* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  width: 100%;
  max-width: 100%;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  background: #8f927d;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  overflow: hidden;
  background: #8f927d;
  color: #f3dfb8;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

:root {
  --hud-gold: #d8aa4d;
  --hud-gold-light: #ffe2a3;
  --hud-stone: #e8e0ca;
  --hud-jade: #7fa969;
  --hud-ink: #3b2a18;
  --mobile-stage-max-width: 460px;
  --app-height: 100dvh;
  --app-width: 100vw;
  --runtime-safe-area-top: env(safe-area-inset-top, 0px);
  --hud-safe-top-extra: 0px;
  --hud-safe-top: max(var(--runtime-safe-area-top), var(--hud-safe-top-extra));
}

.app {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #8f927d;
  overflow: hidden;
}

.mobile-shell {
  position: relative;
  width: 100%;
  max-width: var(--mobile-stage-max-width);
  min-height: var(--app-height, 100dvh);
  margin: 0 auto;
  background: #8f927d;
  box-shadow: 0 0 0 1px #2b2116, 0 0 32px rgba(0, 0, 0, .55);
}

.entry-screen {
  position: absolute;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 22px;
  background-color: #d8dccd;
  background-image: url("../assets/ui/app_launch_bg_v2_local_grade.webp");
  background-image: image-set(
    url("../assets/ui/app_launch_bg_v2_local_grade.webp") type("image/webp")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.entry-screen.is-ready {
  background-image: url("../assets/ui/server_select_bg_v2_local_grade.webp");
  background-image: image-set(
    url("../assets/ui/server_select_bg_v2_local_grade.webp") type("image/webp")
  );
}

.entry-screen[hidden] {
  display: none;
}

.app.entry-locked > .topbar,
.app.entry-locked > .layout,
.app.entry-locked > .bottom-nav {
  visibility: hidden;
  pointer-events: none;
}

.app.entry-locked .entry-screen {
  visibility: visible;
  pointer-events: auto;
}

.entry-screen.server-mode,
.entry-screen.is-ready {
  background-image: url("../assets/ui/server_select_bg_v2_local_grade.webp");
  background-image: image-set(
    url("../assets/ui/server_select_bg_v2_local_grade.webp") type("image/webp")
  );
}

html[data-entry-lean="1"] .entry-screen,
html[data-entry-lean="1"] .entry-screen.server-mode,
html[data-entry-lean="1"] .entry-screen.is-ready {
  background-image:
    radial-gradient(circle at 50% 24%, rgba(255, 236, 172, .35), transparent 32%),
    linear-gradient(180deg, #d9ddce 0%, #aeb79a 42%, #61583d 100%);
}

.entry-panel {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 16px;
  width: min(100%, 340px);
  min-height: 74%;
  padding-bottom: 28px;
}

.auth-box {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(202, 171, 89, .42);
  background: rgba(235, 229, 205, .42);
}

.auth-box input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(110, 82, 42, .58);
  background: rgba(255, 250, 236, .94);
  color: #241506;
  padding: 8px 10px;
  border-radius: 6px;
}

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

.auth-actions button {
  min-height: 36px;
  border-radius: 6px;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 221, 118, .94), rgba(152, 84, 20, .9));
  color: #fff3c7;
  font-weight: 900;
}

.auth-hint {
  color: #5d4c28;
  font-size: 12px;
  line-height: 1.4;
}

.auth-hint[data-tone="error"] {
  color: #8f2118;
  font-weight: 700;
}

.name-modal-panel .action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.entry-server {
  display: none;
}

.entry-screen.server-mode .entry-launch,
.entry-screen.is-ready .entry-launch {
  display: none;
}

.entry-screen.server-mode .entry-server,
.entry-screen.is-ready .entry-server {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
}

.entry-screen.server-mode .server-list,
.entry-screen.is-ready .server-list {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
}

.entry-screen.server-mode .server-choice,
.entry-screen.server-mode #entryEnterButton,
.entry-screen.is-ready .server-choice,
.entry-screen.is-ready #entryEnterButton {
  position: absolute;
  min-width: 0;
}

.entry-screen.server-mode #entryEnterButton,
.entry-screen.is-ready #entryEnterButton {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff3c7;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(46, 24, 6, .92), 0 0 3px rgba(255, 218, 122, .34);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.entry-logo {
  width: min(86%, 310px);
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(42, 26, 8, .46));
}

.entry-logo.small {
  width: min(72%, 250px);
  max-height: 150px;
}

.entry-primary,
.server-choice {
  border: 1px solid rgba(143, 91, 22, .66);
  background: linear-gradient(180deg, rgba(255, 221, 118, .94), rgba(152, 84, 20, .9));
  color: #fff3c7;
  text-shadow: 0 1px 1px rgba(55, 28, 6, .85);
  box-shadow: 0 5px 12px rgba(71, 43, 12, .28), inset 0 1px 0 rgba(255, 247, 195, .64);
}

.entry-primary {
  min-width: 170px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 900;
}

.server-list {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 10px;
  background: rgba(235, 229, 205, .38);
  border: 1px solid rgba(202, 171, 89, .42);
}

.server-choice {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
}

.server-choice span {
  font-size: 11px;
  color: #f9e6a8;
}

.entry-screen.server-mode .server-choice:not(.active),
.entry-screen.is-ready .server-choice:not(.active) {
  border-color: rgba(78, 58, 36, .72);
  background: linear-gradient(180deg, rgba(121, 91, 50, .82), rgba(62, 43, 25, .9));
  color: rgba(255, 232, 180, .72);
  box-shadow: inset 0 1px 0 rgba(255, 244, 199, .18), 0 3px 8px rgba(20, 12, 6, .24);
}

.entry-screen.server-mode .server-choice:not(.active) span,
.entry-screen.is-ready .server-choice:not(.active) span {
  color: rgba(255, 229, 173, .58);
}

.entry-screen.server-mode .server-choice.active,
.entry-screen.is-ready .server-choice.active {
  border-color: rgba(190, 134, 40, .9);
  background: linear-gradient(180deg, rgba(255, 221, 118, .96), rgba(152, 84, 20, .92));
  color: #fff3c7;
}

.entry-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  color: #4c3517;
  font-size: 12px;
}

.entry-session span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-session button {
  min-height: 30px;
  border: 1px solid rgba(110, 82, 42, .58);
  border-radius: 6px;
  background: rgba(255, 250, 236, .86);
  color: #4c3517;
  font-weight: 800;
}

.topbar {
  width: 100%;
  padding: var(--hud-safe-top) 0 0;
  border-bottom: 1px solid rgba(216, 170, 77, .45);
  background: linear-gradient(180deg, rgba(164, 168, 141, .58), rgba(111, 128, 91, .34) 70%, rgba(128, 126, 98, .48));
}

.top-hud-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 56;
  overflow: hidden;
  background: url("../assets/hud/crops/top_hud_backplate_v3_webp_q82.webp") center / 100% 100% no-repeat;
  isolation: isolate;
}

.top-hud-item {
  position: absolute;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 18px;
}

.player-card {
  display: block;
  min-width: 0;
  border: 0;
  border-radius: 0 0 10px 0;
  background: url("../assets/hud/crops/top_v3_player_plate_webp_q82.webp") center / 100% 100% no-repeat;
  box-shadow:
    inset -1px -1px 0 rgba(216, 170, 77, .35),
    0 2px 8px rgba(0, 0, 0, .32);
  -webkit-tap-highlight-color: transparent;
}

.avatar-frame {
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--hud-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #f5e8be, #7fa969 62%, #60441e 100%);
  box-shadow: 0 0 0 2px rgba(255, 245, 202, .45), inset 0 0 10px rgba(255, 214, 128, .4);
  overflow: hidden;
  cursor: pointer;
}

.avatar-frame:hover {
  border-color: var(--hud-gold);
  background: radial-gradient(circle at 50% 35%, #f5e8be, #7fa969 62%, #60441e 100%);
}

.avatar-frame,
.avatar-frame:hover,
.avatar-frame:active,
.avatar-frame:focus,
.avatar-frame:focus-visible,
.name-button,
.name-button:hover,
.name-button:active,
.name-button:focus,
.name-button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.vip-icon {
  display: grid;
  place-items: center;
  z-index: 4;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.vip-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    brightness(1.55)
    saturate(1.75)
    contrast(1.12)
    drop-shadow(0 1px 1px rgba(0, 0, 0, .55))
    drop-shadow(0 0 4px rgba(255, 224, 83, .72));
  animation: hudVipFloat 1.45s ease-in-out infinite;
}

.vip-icon:hover,
.vip-icon:active,
.vip-icon:focus,
.vip-icon:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(1.08);
}

.player-part {
  position: absolute;
  z-index: 3;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#playerName {
  color: #ffe789;
  font-size: 4px;
  font-weight: 800;
  text-shadow: 0 0 2px rgba(255, 218, 80, .9), 0 1px 2px #000;
}

.name-button {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

.name-button:hover,
.name-button:active,
.name-button:focus,
.name-button:focus-visible {
  border: 0;
  background: transparent;
  background-image: none;
  color: #ffe789;
}

#vipBadge {
  display: grid;
  place-items: center;
  z-index: 5;
  padding: 0;
  border: 1px solid rgba(255, 232, 148, .68);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff0a8 0%, #d6a43c 42%, #8b5714 100%);
  color: #fff8cf;
  font-size: 3px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 0 2px rgba(255, 255, 216, .75), 0 1px 2px rgba(0, 0, 0, .35);
  -webkit-text-stroke: 0;
  text-shadow: 0 1px 1px rgba(78, 38, 5, .9);
  white-space: nowrap;
  animation: hudGoldTextGlow 1.55s ease-in-out infinite;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#vipBadge:hover,
#vipBadge:active,
#vipBadge:focus,
#vipBadge:focus-visible {
  outline: 0;
  border-color: rgba(255, 232, 148, .8);
  filter: brightness(1.08);
}

#vipBadge.vip-name-level-1,
#vipBadge.vip-name-level-2,
#vipBadge.vip-name-level-3,
#vipBadge.vip-name-level-4,
#vipBadge.vip-name-level-5,
#vipBadge.vip-name-level-6,
#vipBadge.vip-name-level-7,
#vipBadge.vip-name-level-8,
#vipBadge.vip-name-level-9,
#vipBadge.vip-name-level-10 {
  border-style: solid;
}

#vipBadge.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
#vipBadge.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
#vipBadge.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
#vipBadge.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
#vipBadge.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
#vipBadge.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
#vipBadge.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
#vipBadge.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
#vipBadge.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
#vipBadge.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

#vipBadge .vip-icon.vip-name-level-1 img,
#vipBadge .vip-icon.vip-name-level-2 img,
#vipBadge .vip-icon.vip-name-level-3 img {
  filter: brightness(1.35) saturate(1.2) contrast(1.04) drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 0 3px rgba(231, 186, 98, .45));
}

#vipBadge .vip-icon.vip-name-level-4 img,
#vipBadge .vip-icon.vip-name-level-5 img,
#vipBadge .vip-icon.vip-name-level-6 img,
#vipBadge .vip-icon.vip-name-level-7 img {
  filter: brightness(1.55) saturate(1.55) contrast(1.1) drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 0 5px rgba(255, 187, 83, .62));
}

#vipBadge .vip-icon.vip-name-level-8 img,
#vipBadge .vip-icon.vip-name-level-9 img,
#vipBadge .vip-icon.vip-name-level-10 img {
  filter: brightness(1.85) saturate(1.9) contrast(1.16) drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(255, 219, 92, .82)) drop-shadow(0 0 3px rgba(207, 45, 31, .42));
}

.player-meta,
.player-status {
  display: grid;
  place-items: center;
  color: #fff0bd;
  font-size: 3px;
  font-weight: 800;
  line-height: 1;
  -webkit-text-stroke: .18px rgba(31, 18, 7, .9);
  text-shadow: 0 1px 0 rgba(31, 18, 7, .8);
}

.top-hud-stage.is-player-no-alliance #playerTitle {
  display: none !important;
}

.top-hud-stage.is-player-no-alliance #playerAlliance {
  left: 12.61% !important;
  width: 14.78% !important;
  text-align: center;
}

.player-status {
  color: #b4c88b;
  font-size: 12px;
}

h2 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #ffd27a;
}

p {
  color: #d7c19b;
  line-height: 1.55;
}

.resource-strip {
  display: contents;
}

.resource-pill {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("../assets/hud/crops/top_v3_resource_strip_1_webp_q82.webp") center / 100% 100% no-repeat;
  color: #f0dfaa;
  font-size: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: absolute;
  box-shadow: none;
}

.resource-pill i {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hud-gold-light);
  font-style: normal;
  font-size: 3px;
}

.resource-pill i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
}

.top-hud-resource-part {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-hud-resource-part img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
}

.top-hud-resource-part.resource-icon[data-resource-key="food"] img,
.top-hud-resource-part.resource-icon[data-resource-key="wood"] img,
.top-hud-resource-part.resource-icon[data-resource-key="iron"] img,
.top-hud-resource-part.resource-icon[data-resource-key="troops"] img,
.top-hud-resource-part.resource-icon[data-resource-key="population"] img {
  animation: hudResourceFloat 1.8s ease-in-out infinite;
}

.top-hud-resource-part[data-resource-key="wood"] {
  animation-delay: .12s;
}

.top-hud-resource-part[data-resource-key="iron"] {
  animation-delay: .24s;
}

.top-hud-resource-part[data-resource-key="troops"] {
  animation-delay: .36s;
}

.top-hud-resource-part[data-resource-key="population"] {
  animation-delay: .48s;
}

.top-hud-resource-part.resource-icon[data-resource-key="wood"] img {
  animation-delay: .12s;
}

.top-hud-resource-part.resource-icon[data-resource-key="iron"] img {
  animation-delay: .24s;
}

.top-hud-resource-part.resource-icon[data-resource-key="troops"] img {
  animation-delay: .36s;
}

.top-hud-resource-part.resource-icon[data-resource-key="population"] img {
  animation-delay: .48s;
}

.resource-icon {
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hud-gold-light);
  font-style: normal;
}

.resource-value {
  font-size: 3px;
  font-weight: 700;
  color: #f3df98;
  text-shadow: 0 1px 2px #000;
}

.resource-label {
  color: #d9c78f;
  font-style: normal;
  font-size: 3px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

@keyframes hudVipFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      brightness(1.45)
      saturate(1.65)
      contrast(1.08)
      drop-shadow(0 1px 1px rgba(0, 0, 0, .55))
      drop-shadow(0 0 3px rgba(255, 220, 95, .58));
  }
  50% {
    transform: translateY(-1px) scale(1.05);
    filter:
      brightness(1.95)
      saturate(2)
      contrast(1.16)
      drop-shadow(0 1px 1px rgba(0, 0, 0, .5))
      drop-shadow(0 0 8px rgba(255, 231, 105, .95));
  }
}

@keyframes identityEmblemFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1.04) saturate(1.08);
  }
  50% {
    transform: translateY(-1px) scale(1.035);
    filter: brightness(1.18) saturate(1.18);
  }
}

@keyframes hudGoldTextGlow {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 1px 1px rgba(78, 38, 5, .9), 0 0 1px rgba(255, 230, 118, .35);
  }
  50% {
    filter: brightness(1.14);
    text-shadow: 0 1px 1px rgba(78, 38, 5, .9), 0 0 5px rgba(255, 226, 104, .9);
  }
}

@keyframes hudResourceFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65));
  }
  50% {
    transform: translateY(-.75px) scale(1.04);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .65)) drop-shadow(0 0 4px rgba(255, 232, 151, .42));
  }
}

.recharge-trigger {
  cursor: pointer;
}

.recharge-trigger:hover {
  filter: brightness(1.12) drop-shadow(0 0 3px rgba(255, 219, 113, .42));
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.city-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.right-hud-dock {
  position: fixed;
  left: calc(50% + min(50vw, 230px) - 50px);
  top: 112px;
  z-index: 7;
  display: grid;
  gap: 7px;
  width: 42px;
  pointer-events: auto;
}

.right-hud-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 45px;
  padding: 0;
  border: 0 !important;
  appearance: none;
  background: transparent !important;
  color: #ffe8a6;
  font-size: 8px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(42, 14, 4, .95), 0 0 5px rgba(255, 206, 83, .42);
  outline: 0 !important;
  box-shadow: none !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.right-hud-button img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(28, 12, 4, .58));
}

.right-hud-button span {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.right-hud-button em {
  position: absolute;
  right: 3px;
  top: 3px;
  display: block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8 0 18%, #e54a2d 48%, #8d130a 100%);
  color: transparent;
  font-size: 0;
  font-style: normal;
  font-weight: 900;
  line-height: 0;
  text-shadow: none;
  box-shadow: 0 0 7px rgba(255, 64, 38, .62);
  animation: hudNoticePulse 1.2s ease-in-out infinite;
}

.right-hud-button i {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 12px;
  height: 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  animation: hudNoticePulse 1.2s ease-in-out infinite;
}

.right-hud-button i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 57, 34, .66));
}

.right-hud-button.has-notice img {
  filter: drop-shadow(0 2px 3px rgba(28, 12, 4, .58)) drop-shadow(0 0 6px rgba(255, 80, 42, .45));
}

.right-hud-button.has-dot-notice img {
  filter: drop-shadow(0 2px 3px rgba(28, 12, 4, .58)) drop-shadow(0 0 5px rgba(255, 80, 42, .38));
}

@keyframes hudNoticePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.right-hud-button:hover,
.right-hud-button:active,
.right-hud-button:focus,
.right-hud-button:focus-visible {
  border: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.world-mode .right-hud-dock {
  display: none;
}

.city-shell.world-mode {
  height: 100%;
}

.city-shell::-webkit-scrollbar {
  display: none;
}

.city-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 2208;
  overflow: hidden;
  border: 0;
  background: #21170f;
}

.world-mode .city-stage {
  width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  overflow: visible;
  padding: 0;
  background: transparent;
}
.world-page-segment {
  position: relative;
  min-height: 140vh;
}

.city-stage img {
  position: absolute;
  user-select: none;
  pointer-events: none;
}

img.asset-load-failed {
  visibility: hidden !important;
}

.base-layer,
.runtime-layer {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.base-layer {
  z-index: 1;
}

.runtime-layer,
.placed-layer {
  z-index: 2;
}

.upgrade-target-layer {
  z-index: 3;
  opacity: calc(.08 + var(--upgrade-progress, 0) * .92);
  filter:
    blur(calc((1 - var(--upgrade-progress, 0)) * 3px))
    brightness(calc(1.18 - var(--upgrade-progress, 0) * .1))
    saturate(calc(.82 + var(--upgrade-progress, 0) * .34))
    drop-shadow(0 0 12px rgba(235, 227, 190, .36));
  transition: opacity .35s linear;
  animation: buildingMorphTargetMist 1.8s ease-in-out infinite;
}

.building-morphing-source {
  opacity: calc(1 - var(--upgrade-progress, 0) * .38);
  filter:
    blur(calc(var(--upgrade-progress, 0) * 2.2px))
    brightness(calc(.92 + var(--upgrade-progress, 0) * .2))
    saturate(calc(.9 - var(--upgrade-progress, 0) * .22))
    drop-shadow(0 0 12px rgba(235, 228, 196, .3));
  animation: buildingMorphSourceMist 1.8s ease-in-out infinite;
}

.runtime-layer.building-upgrading,
.placed-layer.building-upgrading,
.resource-slot-image.building-upgrading {
  filter:
    brightness(calc(.92 + var(--upgrade-progress, 0) * .16))
    saturate(calc(.9 + var(--upgrade-progress, 0) * .22))
    drop-shadow(0 0 8px rgba(245, 211, 114, .24));
  animation: upgradingBreath 1.35s ease-in-out infinite;
}

.runtime-layer.building-morphing-source,
.placed-layer.building-morphing-source,
.resource-slot-layer.building-morphing-source,
.resource-slot-image.building-morphing-source {
  opacity: calc(1 - var(--upgrade-progress, 0) * .38);
  filter:
    blur(calc(var(--upgrade-progress, 0) * 2.2px))
    brightness(calc(.92 + var(--upgrade-progress, 0) * .2))
    saturate(calc(.9 - var(--upgrade-progress, 0) * .22))
    drop-shadow(0 0 12px rgba(235, 228, 196, .3));
  animation: buildingMorphSourceMist 1.8s ease-in-out infinite;
}

.placed-layer {
  object-fit: contain;
}

.resource-slot-layer {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.resource-slot-layer.building-upgrading::after,
.hotspot.building-upgrading::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 7%;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 226, 112, .95) calc(var(--upgrade-progress, 0) * 100%), rgba(68, 55, 35, .32) 0);
  box-shadow: 0 0 5px rgba(255, 221, 105, .55);
  pointer-events: none;
}

.resource-slot-image {
  position: absolute;
  object-fit: cover;
}

.resource-slot-image.upgrade-target-layer {
  z-index: 2;
}

.building-morph-fog {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(.18 + var(--upgrade-progress, 0) * .48);
  mix-blend-mode: screen;
  animation: buildingMorphFog 2.2s ease-in-out infinite;
}

.resource-slot-layer .building-morph-fog {
  inset: 0;
  z-index: 3;
}

.building-morph-fog::before,
.building-morph-fog::after {
  content: "";
  position: absolute;
  inset: -18% -14%;
  background:
    radial-gradient(circle at 28% 68%, rgba(243, 237, 212, .38), transparent 28%),
    radial-gradient(circle at 64% 34%, rgba(255, 237, 187, .32), transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(216, 222, 214, .24), transparent 38%);
  filter: blur(8px);
  transform: translate(-2%, 2%) scale(.98);
}

.building-morph-fog::after {
  inset: -10% -8%;
  opacity: .72;
  animation: buildingMorphFogDrift 2.8s ease-in-out infinite;
}

.building-morphing-source::before,
.building-morphing-source::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 70%, rgba(238, 231, 202, calc(.12 + var(--upgrade-progress, 0) * .18)), transparent 32%),
    radial-gradient(circle at 64% 35%, rgba(255, 239, 196, calc(.10 + var(--upgrade-progress, 0) * .16)), transparent 30%);
  opacity: calc(.22 + var(--upgrade-progress, 0) * .5);
  pointer-events: none;
  filter: blur(7px);
  animation: buildingMorphFog 2.2s ease-in-out infinite;
}

.building-morphing-source::after {
  inset: -4% 2%;
  animation-delay: -.9s;
  opacity: calc(.14 + var(--upgrade-progress, 0) * .38);
}

.placed-layer.unlock-reveal {
  animation: buildingReveal .95s cubic-bezier(.2, .86, .22, 1) both;
  filter: drop-shadow(0 0 12px rgba(245, 211, 114, .78)) drop-shadow(0 10px 12px rgba(21, 15, 8, .34));
}

.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.scene-time-day {
  background: rgba(255, 244, 205, .04);
}

.scene-time-dusk {
  background:
    radial-gradient(circle at 70% 16%, rgba(255, 194, 107, .20), transparent 26%),
    linear-gradient(180deg, rgba(255, 174, 92, .13), rgba(94, 54, 34, .16));
}

.scene-time-night {
  background:
    radial-gradient(circle at 78% 12%, rgba(168, 205, 255, .12), transparent 20%),
    linear-gradient(180deg, rgba(10, 24, 52, .34), rgba(5, 10, 24, .42));
}

.scene-weather-cloudy::before,
.scene-weather-fog::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 18%, rgba(235, 238, 218, .20), transparent 30%),
    radial-gradient(ellipse at 72% 36%, rgba(231, 236, 218, .18), transparent 34%),
    linear-gradient(180deg, rgba(230, 232, 211, .08), rgba(223, 230, 213, .02));
}

.scene-weather-fog::before {
  opacity: .82;
  filter: blur(1px);
}

.weather-panel {
  position: absolute;
  right: 3.2%;
  top: 5.3%;
  z-index: 6;
  display: grid;
  gap: 1px;
  min-width: 42px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 225, 146, .46);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(247, 238, 202, .70), rgba(112, 128, 101, .48));
  color: #442a12;
  font-family: inherit;
  line-height: 1;
  box-shadow: 0 2px 7px rgba(33, 23, 12, .26), inset 0 0 6px rgba(255, 255, 226, .35);
}

.weather-panel b {
  font-size: 7px;
}

.weather-panel span {
  color: #fff4c2;
  font-size: 5px;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(39, 24, 8, .75);
}

.guide-entry-button {
  position: absolute;
  right: 2.6%;
  top: 10.8%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5e7b4;
  font-family: inherit;
  font-size: 8px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(41, 23, 7, .85);
}

.guide-entry-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-entry-button span {
  position: relative;
  z-index: 2;
  font-size: 7px;
  letter-spacing: 0;
  transform: translateY(1px);
}

.hotspot {
  position: absolute;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  appearance: none;
}

.hotspot:hover,
.hotspot:active,
.hotspot:focus,
.hotspot:focus-visible,
.hotspot.active {
  border: 0;
  background: transparent;
  outline: 0;
  box-shadow: none;
  filter: none;
}

.hotspot .building-label {
  position: absolute;
  left: 50%;
  bottom: -7px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  transform: translateX(-50%);
  padding: 0;
  background: transparent;
  color: #ffe6a6;
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  -webkit-text-stroke: .18px rgba(27, 15, 5, .95);
  text-shadow: 0 1px 0 rgba(27, 15, 5, .95);
}

.locked-building-hotspot .building-label {
  color: #d7c1a0;
  opacity: .92;
}

.locked-building-hotspot .building-label em {
  color: #f5d485;
}

.unlock-mini-arrow {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 10px;
  color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 226, 92, .9));
  animation: upgradeHintPulse .92s ease-in-out infinite;
}

.unlock-mini-arrow::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: linear-gradient(#fff6b6, #d79523);
}

.unlock-mini-arrow::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 6px;
  height: 6px;
  border-left: 2px solid #fff2a7;
  border-top: 2px solid #fff2a7;
  transform: rotate(45deg);
}

.building-label b,
.building-label em,
.building-label i {
  font: inherit;
  line-height: 1;
}

.building-label em {
  color: #ffe0a0;
}

.upgrade-hint {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 10px;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 3px rgba(255, 226, 92, .9));
  animation: upgradeHintPulse .92s ease-in-out infinite;
}

.upgrade-hint::before {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 0;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff6a5, #f0b42f 70%, #a16d12);
}

.upgrade-hint::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #f5c63b;
  filter: drop-shadow(0 -1px 1px rgba(255, 247, 157, .85));
}

.upgrade-hourglass {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 10px;
  color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 3px rgba(255, 226, 92, .75));
  animation: hourglassFlip 1.15s ease-in-out infinite;
}

.upgrade-hourglass::before,
.upgrade-hourglass::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 6px;
  height: 4px;
  border-left: 1px solid #e8c464;
  border-right: 1px solid #e8c464;
}

.upgrade-hourglass::before {
  top: 0;
  border-top: 1px solid #fff2a6;
  background: linear-gradient(180deg, rgba(255, 242, 166, .9), rgba(224, 167, 42, .28));
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
}

.upgrade-hourglass::after {
  bottom: 0;
  border-bottom: 1px solid #fff2a6;
  background: linear-gradient(180deg, rgba(224, 167, 42, .22), rgba(255, 218, 91, .92));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.wall-hotspot .building-label {
  top: -7px;
  bottom: auto;
}

.unlock-guide-marker {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f1dfaa;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
}

.unlock-guide-marker::before {
  content: none;
}

.unlock-guide-marker::after {
  content: none;
}

.unlock-guide-arrow {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 3;
  width: 22px;
  height: 31px;
  transform: translateX(-50%);
  background: transparent;
  filter:
    drop-shadow(0 3px 3px rgba(18, 11, 4, .68))
    drop-shadow(0 0 7px rgba(255, 226, 91, .85));
  animation: guideArrowBob .78s ease-in-out infinite;
}

.unlock-guide-arrow::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 2px;
  width: 6px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(90deg, #5fa63f 0%, #c6ef60 42%, #fff38b 56%, #4f9b34 100%);
  box-shadow: inset 0 0 3px rgba(255, 255, 198, .9);
}

.unlock-guide-arrow::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 13px solid #8ed34c;
  filter: drop-shadow(0 -1px 0 rgba(255, 247, 148, .85));
}

.unlock-guide-marker span {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  min-width: 72px;
  padding: 5px 9px;
  border: 1px solid rgba(199, 169, 88, .7);
  background: linear-gradient(180deg, rgba(61, 69, 56, .92), rgba(35, 39, 31, .92));
  box-shadow: 0 4px 12px rgba(18, 14, 8, .34), inset 0 1px 0 rgba(255, 241, 186, .2);
  text-align: center;
  transform: translateY(16px);
  animation: unlockPromptBob .9s ease-in-out infinite;
}

.unlock-guide-marker b,
.unlock-guide-marker em {
  font-style: normal;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(16, 12, 6, .82);
}

.unlock-guide-marker b {
  font-size: 9px;
  color: #ffe5a0;
}

.unlock-guide-marker em {
  font-size: 7px;
  color: #d7e2c4;
}

.unlock-guide-marker span {
  display: none;
}

@keyframes unlockPulse {
  0%, 100% { opacity: .58; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.02); }
}

@keyframes unlockGlow {
  0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.9); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes guideArrowBob {
  0%, 100% { transform: translate(-50%, -4px) scale(1); opacity: .94; }
  50% { transform: translate(-50%, 7px) scale(1.08); opacity: 1; }
}

@keyframes unlockPromptBob {
  0%, 100% { transform: translateY(14px) scale(1); filter: brightness(1); }
  50% { transform: translateY(7px) scale(1.04); filter: brightness(1.14); }
}

@keyframes upgradeHintPulse {
  0%, 100% { transform: translateY(0) scale(.92); opacity: .82; }
  50% { transform: translateY(-1px) scale(1.12); opacity: 1; }
}

@keyframes hourglassFlip {
  0%, 42% { transform: translateY(0) rotate(0deg) scale(.95); opacity: .86; }
  55%, 100% { transform: translateY(-1px) rotate(180deg) scale(1.05); opacity: 1; }
}

@keyframes upgradingBreath {
  0%, 100% { opacity: .95; }
  50% { opacity: 1; }
}

@keyframes buildingMorphSourceMist {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.006); }
}

@keyframes buildingMorphTargetMist {
  0%, 100% { transform: translateY(0) scale(.998); }
  50% { transform: translateY(-1px) scale(1.006); }
}

@keyframes buildingMorphFog {
  0%, 100% { transform: translate(-2%, 2%) scale(.96); }
  50% { transform: translate(3%, -3%) scale(1.05); }
}

@keyframes buildingMorphFogDrift {
  0%, 100% { transform: translate(3%, -1%) scale(1.02); }
  50% { transform: translate(-4%, 3%) scale(.96); }
}

.city-unlock-fx {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.city-unlock-fx .fx-ring {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 54%;
  aspect-ratio: 1 / .48;
  border: 2px solid rgba(245, 211, 114, .82);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 16px rgba(245, 211, 114, .42), inset 0 0 14px rgba(245, 211, 114, .18);
  animation: fxRing .86s ease-out both;
}

.city-unlock-fx .fx-dust {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(224, 198, 127, .72);
  box-shadow: 0 0 8px rgba(244, 215, 132, .48);
  animation: fxDust .92s ease-out both;
}

.city-unlock-fx .fx-dust.p1 { --dx: -44px; --dy: -22px; animation-delay: .05s; }
.city-unlock-fx .fx-dust.p2 { --dx: 36px; --dy: -28px; animation-delay: .12s; }
.city-unlock-fx .fx-dust.p3 { --dx: 6px; --dy: -48px; animation-delay: .18s; }

.city-unlock-fx b {
  position: absolute;
  left: 50%;
  top: 22%;
  min-width: 70px;
  transform: translateX(-50%);
  color: #ffe9a9;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #120c05, 0 0 8px rgba(245, 211, 114, .62);
  animation: fxText .95s ease-out both;
}

@keyframes buildingReveal {
  0% { opacity: 0; transform: translateY(14px) scale(.82); filter: blur(2px) brightness(1.75); }
  45% { opacity: .72; transform: translateY(-3px) scale(1.05); filter: blur(.5px) brightness(1.35); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 12px rgba(245, 211, 114, .42)); }
}

@keyframes fxRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
}

@keyframes fxDust {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25); }
}

@keyframes fxText {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.86); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -16px) scale(1); }
}

.world-page-controls,
.world-tile-detail {
  position: relative;
  z-index: 1;
}

.world-page-controls {
  position: fixed;
  left: 50%;
  bottom: 50px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  align-items: center;
  width: min(100vw, 460px);
  transform: translateX(-50%);
  margin: 0;
  padding: 2px 5px;
  border-top: 1px solid rgba(255, 226, 163, .24);
  border-bottom: 1px solid rgba(26, 18, 8, .58);
  background: rgba(210, 215, 190, .4);
  backdrop-filter: blur(2px);
}

.world-grid-page {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-height: calc(140vh - 42px);
}

.world-map-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

.world-tile {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  padding: 1px;
  border: 0;
  background: transparent;
  color: #2a1a0c;
  text-align: center;
  overflow: hidden;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-content {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.world-tile:hover,
.world-tile:active,
.world-tile:focus,
.world-tile:focus-visible {
  background: transparent;
  outline: 0;
}

.world-tile:not(.tile-openGround) {
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 238, 181, .12), rgba(255, 238, 181, 0) 58%);
}

.world-tile-asset {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 96%;
  height: 96%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: .92;
  filter: drop-shadow(0 1px 1px rgba(22, 18, 10, .34));
  pointer-events: none;
}

.world-city-asset {
  width: 104%;
  height: 104%;
  top: 43%;
}

.world-truce-badge {
  position: absolute;
  z-index: 4;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .58));
}

.world-tile.active {
  outline: 0;
  background: transparent;
}

.world-tile.world-home-focus {
  overflow: visible;
  z-index: 8;
}

.world-tile.world-home-focus .world-tile-content {
  animation: world-home-soft-glow 1.15s ease-in-out 2;
}

.world-tile.world-home-focus::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 8;
  width: 70%;
  height: 70%;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 238, 138, .42) 0%, rgba(255, 209, 74, .22) 46%, rgba(255, 209, 74, 0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: world-home-soft-ring 1.15s ease-in-out 2;
}

@keyframes world-home-soft-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
  }
  28%,
  58% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes world-home-soft-glow {
  0% {
    filter: brightness(1);
  }
  42% {
    filter: brightness(1.42) saturate(1.08) drop-shadow(0 0 7px rgba(255, 220, 90, .72));
  }
  100% {
    filter: brightness(1);
  }
}

.world-city-name {
  position: absolute;
  left: 50%;
  bottom: 3px;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 1px;
  width: 118%;
  min-width: 118%;
  max-width: 170%;
  overflow: visible;
  transform: translate(-50%, -50%);
  color: #ffe7ad;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  -webkit-text-stroke: .18px rgba(40, 19, 6, .95);
  text-shadow: 0 1px 1px rgba(30, 12, 4, .95);
}

.world-city-name-text,
.world-city-name em {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
}

.world-city-name em {
  color: #fff1c9;
  font-size: 5px;
  font-style: normal;
  font-weight: 800;
  -webkit-text-stroke: .12px rgba(40, 19, 6, .9);
}

.world-city-name.name-len-3 {
  font-size: 6.5px;
}

.world-city-name.name-len-4 {
  width: 158%;
  min-width: 158%;
  font-size: 5.8px;
  letter-spacing: 0;
}

.world-city-name.name-len-4 em {
  font-size: 4.8px;
}

.tile-openGround {
  background: transparent;
}

.tile-playerCity {
  color: #fff2bd;
  text-shadow: 0 1px 1px #2a1408;
}

.tile-emptyLand {
  color: #2f2412;
}

.tile-occupiedLand {
  color: #fff1bd;
  text-shadow: 0 1px 1px #2a1408;
}

.tile-resourceWood {
  color: #f3ffd4;
}

.tile-resourceIron {
  color: #f2f4e8;
}

.tile-mountain {
  color: #ece5c4;
}

.tile-water {
  color: #e3f8ff;
}

.world-page-controls button,
.world-tile-detail button {
  padding: 5px 6px;
  font-size: 10px;
}

.world-page-controls button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 30px;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.world-page-controls::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: 38px;
  border-top: 1px solid rgba(255, 235, 174, .72);
  border-bottom: 1px solid rgba(150, 105, 42, .36);
  background:
    linear-gradient(90deg, rgba(94, 130, 90, .08), rgba(255, 245, 205, .42) 14%, rgba(255, 238, 183, .50) 50%, rgba(255, 245, 205, .42) 86%, rgba(94, 130, 90, .08)),
    linear-gradient(180deg, rgba(255, 249, 222, .40), rgba(193, 166, 101, .16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 235, .55),
    0 -1px 0 rgba(110, 82, 43, .14);
  pointer-events: none;
}

.world-page-controls button img {
  width: 100%;
  height: 44px;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(var(--world-control-icon-y, -8px));
  filter: drop-shadow(0 1px 1px rgba(53, 42, 24, .45));
}

.world-page-controls button span {
  position: absolute;
  left: 50%;
  bottom: var(--world-control-label-y, 5px);
  width: 100%;
  transform: translateX(-50%);
  color: #fff1b2;
  font-size: var(--world-control-label-size, 7px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: .35px rgba(54, 29, 10, .92);
  text-shadow:
    0 1px 0 rgba(61, 34, 12, .9),
    0 0 3px rgba(18, 10, 3, .72),
    0 -1px 0 rgba(255, 255, 221, .42);
  pointer-events: none;
}

.world-page-controls button:hover,
.world-page-controls button:active,
.world-page-controls button:focus,
.world-page-controls button:focus-visible {
  border: 0;
  background: transparent;
  outline: 0;
  box-shadow: none;
  filter: none;
}

.world-tile-detail {
  padding: 0;
  color: #f4e1b8;
}

.world-tile-detail h2 {
  margin-bottom: 7px;
  color: #ffe0a3;
  font-size: 15px;
}

.world-tile-modal {
  width: min(92vw, 420px);
}

.world-tile-modal.modal-skin-world-forest #worldTileModalClose,
.world-tile-modal.modal-skin-world-food #worldTileModalClose,
.world-tile-modal.modal-skin-world-iron #worldTileModalClose,
.world-tile-modal.modal-skin-world-attached #worldTileModalClose {
  z-index: 220 !important;
  pointer-events: auto !important;
}

.world-tile-modal.modal-skin-world-water {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 425px;
  padding: 54px 38px 48px;
  border: 0;
  box-shadow: none;
  background-size: 100% 100%;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-water .modal-head {
  min-height: 42px;
}

.world-tile-modal.modal-skin-world-water #worldTileModalTitle {
  color: #fff3c4;
  font-size: 15px;
  text-shadow: 0 1px 1px rgba(18, 42, 45, .7), 0 0 4px rgba(255, 219, 107, .34);
}

.world-tile-modal.modal-skin-world-water #worldTileModalClose {
  position: absolute;
  left: auto;
  right: 32px;
  top: 45px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  z-index: 6;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-water #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-water #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-water #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-water #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  filter: none;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-water .info-row {
  border-bottom: 0;
}

.world-tile-modal.modal-skin-world-water .action-row:empty {
  display: none;
}

.world-tile-modal.modal-skin-world-water .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-water #worldTileModalTitle,
.world-tile-modal.modal-skin-world-water [data-world-water-item] {
  position: absolute;
  left: var(--world-water-x, 50%);
  top: var(--world-water-y, 50%);
  width: var(--world-water-w, auto);
  height: var(--world-water-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-water-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-water #worldTileModalClose {
  right: auto;
  left: var(--world-water-x, 50%);
  top: var(--world-water-y, 50%);
  width: var(--world-water-w, 38px);
  height: var(--world-water-h, 38px);
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-water .world-water-info {
  display: contents;
}

.world-tile-modal.modal-skin-world-water .world-water-info .panel-grid {
  display: contents;
}

.world-tile-modal.modal-skin-world-water .world-water-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-water [data-world-water-item].info-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  color: #fff3cb;
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(11, 38, 44, .78), 0 0 3px rgba(255, 230, 143, .3);
}

.world-tile-modal.modal-skin-world-water [data-world-water-item].info-row b {
  color: #ffe28f;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-water [data-world-water-item].info-row span {
  min-width: 0;
  color: #f7fff6;
  text-align: left;
}

.world-tile-modal.modal-skin-world-water .action-result[data-world-water-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff0bf;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(11, 38, 44, .78);
}

.world-tile-modal.modal-skin-world-wasteland {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 425px;
  padding: 72px 46px 58px;
  border: 0;
  box-shadow: none;
  background-size: 100% 100%;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-wasteland .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-wasteland #worldTileModalTitle,
.world-tile-modal.modal-skin-world-wasteland [data-world-wasteland-item] {
  position: absolute;
  left: var(--world-wasteland-x, 50%);
  top: var(--world-wasteland-y, 50%);
  width: var(--world-wasteland-w, auto);
  height: var(--world-wasteland-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-wasteland-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-wasteland #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-wasteland-x, 50%);
  top: var(--world-wasteland-y, 50%);
  width: var(--world-wasteland-w, 38px);
  height: var(--world-wasteland-h, 38px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-wasteland #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-wasteland #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-wasteland #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-wasteland #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-wasteland .world-wasteland-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-wasteland .world-wasteland-info {
  display: contents;
}

.world-tile-modal.modal-skin-world-wasteland .panel-grid {
  display: contents;
  margin: 0;
}

.world-tile-modal.modal-skin-world-wasteland .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 0;
  color: #fff0c4;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(57, 25, 7, .82), 0 0 3px rgba(255, 211, 106, .28);
}

.world-tile-modal.modal-skin-world-wasteland .info-row b {
  color: #ffdf8a;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-wasteland .info-row span {
  color: #fff8d8;
  text-align: left;
}

.world-tile-modal.modal-skin-world-wasteland .action-row {
  display: contents;
  margin: 0;
}

.world-tile-modal.modal-skin-world-wasteland .action-row button {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border-color: rgba(255, 211, 101, .72);
  background: linear-gradient(180deg, rgba(112, 52, 16, .88), rgba(62, 25, 8, .9));
  color: #ffe9a9;
  font-size: inherit;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(36, 12, 0, .72);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-wasteland .action-result[data-world-wasteland-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff0bf;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(57, 25, 7, .82);
}

.world-tile-modal.modal-skin-world-wasteland .action-row button:hover,
.world-tile-modal.modal-skin-world-wasteland .action-row button:active,
.world-tile-modal.modal-skin-world-wasteland .action-row button:focus,
.world-tile-modal.modal-skin-world-wasteland .action-row button:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-mountain {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 425px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  overflow: visible;
  color: #fff0bd;
}

.world-tile-modal.modal-skin-world-mountain .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-mountain #worldTileModalTitle,
.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item] {
  position: absolute;
  left: var(--world-mountain-x, 50%);
  top: var(--world-mountain-y, 50%);
  width: var(--world-mountain-w, auto);
  height: var(--world-mountain-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-mountain-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-mountain #worldTileModalTitle,
.world-tile-modal.modal-skin-world-mountain .world-mountain-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-mountain #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-mountain-x, 286px);
  top: var(--world-mountain-y, 53px);
  width: var(--world-mountain-w, 40px);
  height: var(--world-mountain-h, 40px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-mountain #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-mountain #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-mountain #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-mountain #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-mountain .world-mountain-info,
.world-tile-modal.modal-skin-world-mountain .world-mountain-info .panel-grid,
.world-tile-modal.modal-skin-world-mountain .world-mountain-info .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-mountain .world-mountain-info .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff2c5;
  font-size: var(--world-mountain-size, 12px);
  font-weight: 800;
  line-height: 1.18;
  text-shadow: none;
}

.world-tile-modal.modal-skin-world-mountain .world-mountain-info .info-row b {
  color: #ffe28d;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-mountain .world-mountain-info .info-row span {
  min-width: 0;
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item="actionOpen"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-mountain-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-mountain .action-result[data-world-mountain-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-weight: 800;
  text-align: center;
  text-shadow: none;
}

.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item]:hover,
.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item]:active,
.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item]:focus,
.world-tile-modal.modal-skin-world-mountain [data-world-mountain-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-mountain-live-edit [data-world-mountain-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-mountain-live-edit [data-world-mountain-item].is-live-selected {
  z-index: 95;
}

.world-mountain-live-edit .world-mountain-live-editor-panel,
.world-mountain-live-edit .world-mountain-live-editor-panel * {
  pointer-events: auto !important;
}

.world-mountain-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-mountain-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-mountain-hit-x);
  top: var(--world-mountain-hit-y);
  width: var(--world-mountain-hit-w);
  height: var(--world-mountain-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-mountain-live-hitbox:hover,
.world-mountain-live-hitbox:active,
.world-mountain-live-hitbox:focus,
.world-mountain-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-mountain-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-mountain-live-resize-handle {
  position: absolute;
  left: var(--world-mountain-handle-x);
  top: var(--world-mountain-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-mountain-live-resize-handle[hidden] {
  display: none;
}

.world-tile-modal.modal-skin-world-plain {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 444px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-size: 100% 100%;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-plain .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-plain #worldTileModalTitle,
.world-tile-modal.modal-skin-world-plain [data-world-plain-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
}

.world-tile-modal.modal-skin-world-plain #worldTileModalTitle {
  display: none;
}

.world-tile-modal.modal-skin-world-plain #worldTileModalClose {
  left: var(--world-plain-x, 286px);
  top: var(--world-plain-y, 58px);
  width: var(--world-plain-w, 40px);
  height: var(--world-plain-h, 40px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-plain #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-plain #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-plain #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-plain #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-plain .world-plain-info,
.world-tile-modal.modal-skin-world-plain .panel-grid,
.world-tile-modal.modal-skin-world-plain .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview {
  position: absolute;
  left: 50%;
  top: 228px;
  z-index: 3;
  width: 246px;
  transform: translate(-50%, -50%);
  color: #fff2be;
  text-shadow: 0 1px 1px rgba(35, 16, 4, .82);
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview h2,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview h2,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview .panel-grid,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview .panel-grid,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .panel-grid {
  display: grid;
  gap: 4px;
  margin: 0;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview .info-row,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview .info-row,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .info-row {
  position: static;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  width: auto;
  height: auto;
  transform: none;
  color: #fff4c8;
  font-size: 10px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-section,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-section,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-section {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-section > strong,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-section > strong,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-section > strong {
  color: #ffe595;
  font-size: 11px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-general-picker,
.world-tile-modal.modal-skin-world-openground .world-plain-general-picker,
.world-tile-modal.modal-skin-world-forest .world-plain-general-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-general-chip,
.world-tile-modal.modal-skin-world-openground .world-plain-general-chip,
.world-tile-modal.modal-skin-world-forest .world-plain-general-chip {
  min-width: 52px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(255, 220, 120, .42);
  border-radius: 4px;
  background: rgba(44, 31, 13, .38);
  color: #f8ddb0;
  font-size: 10px;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-plain .world-plain-general-chip.is-selected,
.world-tile-modal.modal-skin-world-openground .world-plain-general-chip.is-selected,
.world-tile-modal.modal-skin-world-forest .world-plain-general-chip.is-selected {
  border-color: rgba(174, 229, 255, .92);
  background: linear-gradient(180deg, rgba(118, 184, 238, .58), rgba(74, 139, 207, .54));
  color: #ffffff;
}

.world-tile-modal.modal-skin-world-plain .world-plain-troop-row,
.world-tile-modal.modal-skin-world-openground .world-plain-troop-row,
.world-tile-modal.modal-skin-world-forest .world-plain-troop-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 8px 0 5px;
  color: #ffe595;
  font-size: 11px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-troop-row input,
.world-tile-modal.modal-skin-world-openground .world-plain-troop-row input,
.world-tile-modal.modal-skin-world-forest .world-plain-troop-row input {
  min-width: 0;
  height: 24px;
  border: 1px solid rgba(255, 220, 120, .45);
  border-radius: 4px;
  background: rgba(31, 23, 10, .45);
  color: #fff6cf;
  text-align: center;
}

.world-tile-modal.modal-skin-world-plain .world-plain-troop-range,
.world-tile-modal.modal-skin-world-openground .world-plain-troop-range,
.world-tile-modal.modal-skin-world-forest .world-plain-troop-range {
  width: 100%;
  margin: 0;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-hint,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-hint,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-hint {
  min-height: 16px;
  color: #fff6cf;
  font-size: 10px;
  text-align: center;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview .action-row,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview .action-row,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.world-tile-modal.modal-skin-world-plain .world-plain-attack-preview .action-row button,
.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview .action-row button,
.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .action-row button {
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe8aa;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(39, 18, 2, .85);
}

.world-tile-modal.modal-skin-world-plain .world-plain-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-plain .info-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff4c8;
  font-size: var(--world-plain-size, 12px);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 1px rgba(56, 30, 8, .75), 0 0 3px rgba(255, 214, 108, .25);
}

.world-tile-modal.modal-skin-world-plain .info-row b {
  color: #ffe18b;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-plain .info-row span {
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="rowCoord"] {
  left: var(--world-plain-x, 170px);
  top: var(--world-plain-y, 123px);
  width: var(--world-plain-w, 220px);
  height: var(--world-plain-h, 26px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="rowType"] {
  left: var(--world-plain-x, 170px);
  top: var(--world-plain-y, 159px);
  width: var(--world-plain-w, 220px);
  height: var(--world-plain-h, 26px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="rowStatus"] {
  left: var(--world-plain-x, 170px);
  top: var(--world-plain-y, 198px);
  width: var(--world-plain-w, 248px);
  height: var(--world-plain-h, 34px);
  font-size: var(--world-plain-size, 11px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="rowEffect"] {
  left: var(--world-plain-x, 177px);
  top: var(--world-plain-y, 270px);
  width: var(--world-plain-w, 248px);
  height: var(--world-plain-h, 42px);
  font-size: var(--world-plain-size, 10px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="rowStamina"] {
  left: var(--world-plain-x, 170px);
  top: var(--world-plain-y, 237px);
  width: var(--world-plain-w, 220px);
  height: var(--world-plain-h, 26px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="actionMove"],
.world-tile-modal.modal-skin-world-plain [data-world-plain-item="actionAttack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe8aa;
  font-size: var(--world-plain-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(39, 18, 2, .85), 0 0 3px rgba(255, 221, 126, .28);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="attackConfirm"],
.world-tile-modal.modal-skin-world-plain [data-world-plain-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe8aa;
  font-size: var(--world-plain-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(39, 18, 2, .85), 0 0 3px rgba(255, 221, 126, .28);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="actionMove"] {
  left: var(--world-plain-x, 123px);
  top: var(--world-plain-y, 362px);
  width: var(--world-plain-w, 112px);
  height: var(--world-plain-h, 32px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="actionAttack"] {
  left: var(--world-plain-x, 224px);
  top: var(--world-plain-y, 362px);
  width: var(--world-plain-w, 112px);
  height: var(--world-plain-h, 32px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="attackConfirm"] {
  left: var(--world-plain-x, 115px);
  top: var(--world-plain-y, 386px);
  width: var(--world-plain-w, 104px);
  height: var(--world-plain-h, 30px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="attackBack"] {
  left: var(--world-plain-x, 225px);
  top: var(--world-plain-y, 386px);
  width: var(--world-plain-w, 86px);
  height: var(--world-plain-h, 30px);
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item="result"] {
  display: grid;
  place-items: center;
  left: var(--world-plain-x, 170px);
  top: var(--world-plain-y, 404px);
  width: var(--world-plain-w, 250px);
  height: var(--world-plain-h, 28px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-size: var(--world-plain-size, 11px);
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px rgba(57, 25, 7, .55);
  box-shadow: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-plain [data-world-plain-item]:hover,
.world-tile-modal.modal-skin-world-plain [data-world-plain-item]:active,
.world-tile-modal.modal-skin-world-plain [data-world-plain-item]:focus,
.world-tile-modal.modal-skin-world-plain [data-world-plain-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-openground {
  position: relative;
  width: min(96vw, calc(92dvh * 0.6667), var(--world-openground-modal-width, 340px));
  aspect-ratio: 340 / 444;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  background-image: var(--modal-bg);
  overflow: hidden;
  color: #ffe8ae;
}

.world-tile-modal.modal-skin-world-openground::before,
.world-tile-modal.modal-skin-world-openground::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-openground::before {
  background: transparent;
  mix-blend-mode: normal;
  opacity: 0;
}

.world-tile-modal.modal-skin-world-openground::after {
  inset: 4px;
  border-radius: 18px;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-openground .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-openground .world-openground-info > h2 {
  display: none;
}
.world-tile-modal.modal-skin-world-openground .modal-head,
.world-tile-modal.modal-skin-world-openground .world-openground-info,
.world-tile-modal.modal-skin-world-openground .panel-grid,
.world-tile-modal.modal-skin-world-openground .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-openground .world-openground-info {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-openground .world-openground-info .panel-grid,
.world-tile-modal.modal-skin-world-openground .world-openground-info .action-row {
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-openground #worldTileModalTitle,
.world-tile-modal.modal-skin-world-openground [data-world-openground-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="root"] {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  z-index: 1;
}

.world-tile-modal.modal-skin-world-openground #worldTileModalTitle,
.world-tile-modal.modal-skin-world-openground .world-openground-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-openground #worldTileModalClose {
  left: var(--world-openground-x, 301px);
  top: var(--world-openground-y, 92px);
  width: var(--world-openground-w, 40px);
  height: var(--world-openground-h, 40px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-openground #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-openground #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-openground #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-openground #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-openground .info-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff4c8;
  font-size: var(--world-openground-size, 12px);
  text-shadow: none;
}

.world-tile-modal.modal-skin-world-openground .info-row span,
.world-tile-modal.modal-skin-world-openground .info-row strong {
  text-shadow: none;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="rowCoord"] {
  left: var(--world-openground-x, 173px);
  top: var(--world-openground-y, 118px);
  width: var(--world-openground-w, 149px);
  height: var(--world-openground-h, 27px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="rowType"] {
  left: var(--world-openground-x, 170px);
  top: var(--world-openground-y, 159px);
  width: var(--world-openground-w, 220px);
  height: var(--world-openground-h, 26px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="rowStatus"] {
  left: var(--world-openground-x, 181px);
  top: var(--world-openground-y, 155px);
  width: var(--world-openground-w, 170px);
  height: var(--world-openground-h, 38px);
  font-size: var(--world-openground-size, 11px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="rowEffect"] {
  left: var(--world-openground-x, 180px);
  top: var(--world-openground-y, 201px);
  width: var(--world-openground-w, 189px);
  height: var(--world-openground-h, 58px);
  font-size: var(--world-openground-size, 10px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="rowStamina"] {
  left: var(--world-openground-x, 170px);
  top: var(--world-openground-y, 237px);
  width: var(--world-openground-w, 220px);
  height: var(--world-openground-h, 26px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackInfo"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackGenerals"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackTroopRow"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackTroopRange"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackHint"] {
  left: var(--world-openground-x, 170px);
  top: var(--world-openground-y, 228px);
  width: var(--world-openground-w, 246px);
  height: var(--world-openground-h, auto);
  font-size: var(--world-openground-size, 10px);
}

.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  transform: none;
  z-index: 3;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-openground .world-plain-attack-preview > [data-world-openground-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  transform: none;
  z-index: 3;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview > [data-world-forest-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview {
  color: #fff1bd;
  text-shadow: 0 1px 1px rgba(26, 15, 4, .72);
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .panel-grid {
  gap: 1px;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .info-row {
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 5px;
  min-height: 13px;
  color: #fff4c8;
  font-size: var(--world-forest-size, 8px);
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-preview .info-row b {
  color: #ffe28d;
  font-size: inherit;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-section {
  gap: 2px;
  margin-top: 2px;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-section > strong {
  font-size: var(--world-forest-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-forest .world-plain-general-picker {
  gap: 2px;
}

.world-tile-modal.modal-skin-world-forest .world-plain-general-chip {
  min-width: 37px;
  height: 15px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: var(--world-forest-size, 8px);
  line-height: 1;
}

.world-tile-modal.modal-skin-world-forest .world-plain-troop-row {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
  margin: 2px 0;
  font-size: var(--world-forest-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-forest .world-plain-troop-row input {
  height: 17px;
  border-radius: 3px;
  font-size: var(--world-forest-size, 8px);
}

.world-tile-modal.modal-skin-world-forest .world-plain-troop-range {
  height: 12px;
}

.world-tile-modal.modal-skin-world-forest .world-plain-attack-hint {
  min-height: 12px;
  font-size: var(--world-forest-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackInfo"] {
  height: var(--world-openground-h, 88px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackGenerals"] {
  height: var(--world-openground-h, 78px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackTroopRow"] {
  height: var(--world-openground-h, 28px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackTroopRange"] {
  height: var(--world-openground-h, 18px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackHint"] {
  height: var(--world-openground-h, 24px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="actionAttack"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackConfirm"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe8aa;
  font-size: var(--world-openground-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(39, 18, 2, .85), 0 0 3px rgba(255, 221, 126, .28);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="actionAttack"] {
  left: var(--world-openground-x, 175px);
  top: var(--world-openground-y, 352px);
  width: var(--world-openground-w, 75px);
  height: var(--world-openground-h, 32px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackConfirm"] {
  left: var(--world-openground-x, 115px);
  top: var(--world-openground-y, 386px);
  width: var(--world-openground-w, 104px);
  height: var(--world-openground-h, 30px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackBack"] {
  left: var(--world-openground-x, 225px);
  top: var(--world-openground-y, 386px);
  width: var(--world-openground-w, 86px);
  height: var(--world-openground-h, 30px);
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="result"] {
  display: grid;
  place-items: center;
  left: var(--world-openground-x, 170px);
  top: var(--world-openground-y, 312px);
  width: var(--world-openground-w, 261px);
  height: var(--world-openground-h, 58px);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-size: var(--world-openground-size, 10px);
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px rgba(57, 25, 7, .55);
  box-shadow: none;
}

.world-openground-live-edit [data-world-openground-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-openground-live-edit [data-world-openground-item].is-live-selected {
  z-index: 95;
}

.world-openground-live-edit .world-openground-live-editor-panel,
.world-openground-live-edit .world-openground-live-editor-panel * {
  pointer-events: auto !important;
}

.world-openground-live-edit .world-tile-modal.modal-skin-world-openground::before,
.world-openground-live-edit .world-tile-modal.modal-skin-world-openground::after {
  display: none;
}

.world-openground-live-edit .world-tile-modal.modal-skin-world-openground {
  box-shadow: none;
}

.world-openground-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-openground-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-openground-hit-x);
  top: var(--world-openground-hit-y);
  width: var(--world-openground-hit-w);
  height: var(--world-openground-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-openground-live-hitbox:hover,
.world-openground-live-hitbox:active,
.world-openground-live-hitbox:focus,
.world-openground-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-openground-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-openground-live-resize-handle {
  position: absolute;
  left: var(--world-openground-handle-x);
  top: var(--world-openground-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-openground-live-resize-handle[hidden] {
  display: none;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item="actionAttack"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackConfirm"],
.world-tile-modal.modal-skin-world-openground [data-world-openground-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 211, 101, .72);
  background: linear-gradient(180deg, rgba(112, 52, 16, .88), rgba(62, 25, 8, .9));
  color: #ffe9a9;
  font-size: inherit;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(36, 12, 0, .72);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-openground [data-world-openground-item]:hover,
.world-tile-modal.modal-skin-world-openground [data-world-openground-item]:active,
.world-tile-modal.modal-skin-world-openground [data-world-openground-item]:focus,
.world-tile-modal.modal-skin-world-openground [data-world-openground-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-forest {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 510px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  overflow: visible;
  color: #fff0bd;
}

.world-tile-modal.modal-skin-world-forest .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-forest #worldTileModalTitle,
.world-tile-modal.modal-skin-world-forest [data-world-forest-item] {
  position: absolute;
  left: var(--world-forest-x, 50%);
  top: var(--world-forest-y, 50%);
  width: var(--world-forest-w, auto);
  height: var(--world-forest-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-forest-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-forest #worldTileModalTitle,
.world-tile-modal.modal-skin-world-forest .world-forest-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-forest #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-forest-x, 287px);
  top: var(--world-forest-y, 65px);
  width: var(--world-forest-w, 42px);
  height: var(--world-forest-h, 42px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-forest #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-forest #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-forest #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-forest #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-forest .world-forest-info,
.world-tile-modal.modal-skin-world-forest .world-forest-info .panel-grid,
.world-tile-modal.modal-skin-world-forest .world-forest-info .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-forest .world-forest-info .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff2c5;
  font-size: var(--world-forest-size, 12px);
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(18, 40, 12, .78), 0 0 3px rgba(246, 222, 126, .25);
}

.world-tile-modal.modal-skin-world-forest .world-forest-info .info-row b {
  color: #ffe28d;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-forest .world-forest-info .info-row span {
  min-width: 0;
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-forest [data-world-forest-item="actionAttack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-forest-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-forest [data-world-forest-item="attackConfirm"],
.world-tile-modal.modal-skin-world-forest [data-world-forest-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-forest-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-forest .action-result[data-world-forest-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(18, 40, 12, .78);
}

.world-tile-modal.modal-skin-world-forest [data-world-forest-item]:hover,
.world-tile-modal.modal-skin-world-forest [data-world-forest-item]:active,
.world-tile-modal.modal-skin-world-forest [data-world-forest-item]:focus,
.world-tile-modal.modal-skin-world-forest [data-world-forest-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-forest-live-edit [data-world-forest-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-forest-live-edit [data-world-forest-item].is-live-selected {
  z-index: 95;
}

.world-forest-live-edit .world-forest-live-editor-panel,
.world-forest-live-edit .world-forest-live-editor-panel * {
  pointer-events: auto !important;
}

.world-forest-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-forest-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-forest-hit-x);
  top: var(--world-forest-hit-y);
  width: var(--world-forest-hit-w);
  height: var(--world-forest-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-forest-live-hitbox:hover,
.world-forest-live-hitbox:active,
.world-forest-live-hitbox:focus,
.world-forest-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-forest-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-forest-live-resize-handle {
  position: absolute;
  left: var(--world-forest-handle-x);
  top: var(--world-forest-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-forest-live-resize-handle[hidden] {
  display: none;
}

.world-tile-modal.modal-skin-world-food {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 510px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  overflow: visible;
  color: #fff0bd;
}

.world-tile-modal.modal-skin-world-food .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-food #worldTileModalTitle,
.world-tile-modal.modal-skin-world-food [data-world-food-item] {
  position: absolute;
  left: var(--world-food-x, 50%);
  top: var(--world-food-y, 50%);
  width: var(--world-food-w, auto);
  height: var(--world-food-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-food-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-food #worldTileModalTitle,
.world-tile-modal.modal-skin-world-food .world-food-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-food #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-food-x, 284px);
  top: var(--world-food-y, 114px);
  width: var(--world-food-w, 42px);
  height: var(--world-food-h, 42px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-food #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-food #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-food #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-food #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-food .world-food-info,
.world-tile-modal.modal-skin-world-food .world-food-info .panel-grid,
.world-tile-modal.modal-skin-world-food .world-food-info .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-food .world-food-info .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff2c5;
  font-size: var(--world-food-size, 12px);
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72), 0 0 3px rgba(246, 222, 126, .24);
}

.world-tile-modal.modal-skin-world-food .world-food-info .info-row b {
  color: #ffe28d;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-food .world-food-info .info-row span {
  min-width: 0;
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-food [data-world-food-item="actionAttack"],
.world-tile-modal.modal-skin-world-food [data-world-food-item="attackConfirm"],
.world-tile-modal.modal-skin-world-food [data-world-food-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-food-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  transform: none;
  z-index: 3;
  color: #fff1bd;
  text-shadow: 0 1px 1px rgba(48, 28, 4, .72);
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview > [data-world-food-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview .panel-grid {
  display: grid;
  gap: 1px;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview .info-row {
  position: static;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 5px;
  width: auto;
  height: auto;
  min-height: 13px;
  transform: none;
  color: #fff4c8;
  font-size: var(--world-food-size, 8px);
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-preview .info-row b {
  color: #ffe28d;
  font-size: inherit;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-section {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-section > strong {
  color: #ffe595;
  font-size: var(--world-food-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-food .world-plain-general-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.world-tile-modal.modal-skin-world-food .world-plain-general-chip {
  min-width: 37px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(255, 220, 120, .42);
  border-radius: 3px;
  background: rgba(44, 31, 13, .38);
  color: #f8ddb0;
  font-size: var(--world-food-size, 8px);
  line-height: 1;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-food .world-plain-general-chip.is-selected {
  border-color: rgba(174, 229, 255, .92);
  background: linear-gradient(180deg, rgba(118, 184, 238, .58), rgba(74, 139, 207, .54));
  color: #ffffff;
}

.world-tile-modal.modal-skin-world-food .world-plain-troop-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin: 2px 0;
  color: #ffe595;
  font-size: var(--world-food-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-food .world-plain-troop-row input {
  min-width: 0;
  height: 17px;
  border: 1px solid rgba(255, 220, 120, .45);
  border-radius: 3px;
  background: rgba(31, 23, 10, .45);
  color: #fff6cf;
  font-size: var(--world-food-size, 8px);
  text-align: center;
}

.world-tile-modal.modal-skin-world-food .world-plain-troop-range {
  box-sizing: border-box;
  width: var(--world-food-w, 100%);
  height: var(--world-food-h, 12px);
  margin: 0;
}

.world-tile-modal.modal-skin-world-food .world-plain-troop-range::-webkit-slider-runnable-track {
  height: max(4px, calc(var(--world-food-h, 12px) * .38));
}

.world-tile-modal.modal-skin-world-food .world-plain-troop-range::-webkit-slider-thumb {
  margin-top: calc((max(4px, calc(var(--world-food-h, 12px) * .38)) - var(--world-food-h, 12px)) / 2);
}

.world-tile-modal.modal-skin-world-food .world-plain-attack-hint {
  min-height: 12px;
  color: #fff6cf;
  font-size: var(--world-food-size, 8px);
  line-height: 1.05;
  text-align: center;
}

.world-tile-modal.modal-skin-world-food .action-result[data-world-food-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72);
}

.world-tile-modal.modal-skin-world-food [data-world-food-item]:hover,
.world-tile-modal.modal-skin-world-food [data-world-food-item]:active,
.world-tile-modal.modal-skin-world-food [data-world-food-item]:focus,
.world-tile-modal.modal-skin-world-food [data-world-food-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-food-live-edit [data-world-food-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-food-live-edit [data-world-food-item].is-live-selected {
  z-index: 95;
}

.world-food-live-edit .world-food-live-editor-panel,
.world-food-live-edit .world-food-live-editor-panel * {
  pointer-events: auto !important;
}

.world-food-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-food-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-food-hit-x);
  top: var(--world-food-hit-y);
  width: var(--world-food-hit-w);
  height: var(--world-food-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-food-live-hitbox:hover,
.world-food-live-hitbox:active,
.world-food-live-hitbox:focus,
.world-food-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-food-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-food-live-resize-handle {
  position: absolute;
  left: var(--world-food-handle-x);
  top: var(--world-food-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-food-live-resize-handle[hidden] {
  display: none;
}

.world-tile-modal.modal-skin-world-iron {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 510px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  overflow: visible;
  color: #fff0bd;
}

.world-tile-modal.modal-skin-world-iron .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-iron #worldTileModalTitle,
.world-tile-modal.modal-skin-world-iron [data-world-iron-item] {
  position: absolute;
  left: var(--world-iron-x, 50%);
  top: var(--world-iron-y, 50%);
  width: var(--world-iron-w, auto);
  height: var(--world-iron-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-iron-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-iron #worldTileModalTitle,
.world-tile-modal.modal-skin-world-iron .world-iron-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-iron #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-iron-x, 299px);
  top: var(--world-iron-y, 81px);
  width: var(--world-iron-w, 42px);
  height: var(--world-iron-h, 42px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-iron #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-iron #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-iron #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-iron #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-iron .world-iron-info,
.world-tile-modal.modal-skin-world-iron .world-iron-info .panel-grid,
.world-tile-modal.modal-skin-world-iron .world-iron-info .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-iron .world-iron-info .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff2c5;
  font-size: var(--world-iron-size, 12px);
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72), 0 0 3px rgba(246, 222, 126, .24);
}

.world-tile-modal.modal-skin-world-iron .world-iron-info .info-row b {
  color: #ffe28d;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-iron .world-iron-info .info-row span {
  min-width: 0;
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-iron [data-world-iron-item="actionAttack"],
.world-tile-modal.modal-skin-world-iron [data-world-iron-item="attackConfirm"],
.world-tile-modal.modal-skin-world-iron [data-world-iron-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-iron-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  transform: none;
  z-index: 3;
  color: #fff1bd;
  text-shadow: 0 1px 1px rgba(48, 28, 4, .72);
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview > [data-world-iron-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview .panel-grid {
  display: grid;
  gap: 1px;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview .info-row {
  position: static;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 5px;
  width: auto;
  height: auto;
  min-height: 13px;
  transform: none;
  color: #fff4c8;
  font-size: var(--world-iron-size, 8px);
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-preview .info-row b {
  color: #ffe28d;
  font-size: inherit;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-section {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-section > strong {
  color: #ffe595;
  font-size: var(--world-iron-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-iron .world-plain-general-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.world-tile-modal.modal-skin-world-iron .world-plain-general-chip {
  min-width: 37px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(255, 220, 120, .42);
  border-radius: 3px;
  background: rgba(44, 31, 13, .38);
  color: #f8ddb0;
  font-size: var(--world-iron-size, 8px);
  line-height: 1;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-iron .world-plain-general-chip.is-selected {
  border-color: rgba(174, 229, 255, .92);
  background: linear-gradient(180deg, rgba(118, 184, 238, .58), rgba(74, 139, 207, .54));
  color: #ffffff;
}

.world-tile-modal.modal-skin-world-iron .world-plain-troop-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin: 2px 0;
  color: #ffe595;
  font-size: var(--world-iron-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-iron .world-plain-troop-row input {
  min-width: 0;
  height: 17px;
  border: 1px solid rgba(255, 220, 120, .45);
  border-radius: 3px;
  background: rgba(31, 23, 10, .45);
  color: #fff6cf;
  font-size: var(--world-iron-size, 8px);
  text-align: center;
}

.world-tile-modal.modal-skin-world-iron .world-plain-troop-range {
  box-sizing: border-box;
  width: var(--world-iron-w, 100%);
  height: var(--world-iron-h, 12px);
  margin: 0;
}

.world-tile-modal.modal-skin-world-iron .world-plain-troop-range::-webkit-slider-runnable-track {
  height: max(4px, calc(var(--world-iron-h, 12px) * .38));
}

.world-tile-modal.modal-skin-world-iron .world-plain-troop-range::-webkit-slider-thumb {
  margin-top: calc((max(4px, calc(var(--world-iron-h, 12px) * .38)) - var(--world-iron-h, 12px)) / 2);
}

.world-tile-modal.modal-skin-world-iron .world-plain-attack-hint {
  min-height: 12px;
  color: #fff6cf;
  font-size: var(--world-iron-size, 8px);
  line-height: 1.05;
  text-align: center;
}

.world-tile-modal.modal-skin-world-iron .action-result[data-world-iron-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72);
}

.world-tile-modal.modal-skin-world-iron [data-world-iron-item]:hover,
.world-tile-modal.modal-skin-world-iron [data-world-iron-item]:active,
.world-tile-modal.modal-skin-world-iron [data-world-iron-item]:focus,
.world-tile-modal.modal-skin-world-iron [data-world-iron-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-iron-live-edit [data-world-iron-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-iron-live-edit [data-world-iron-item].is-live-selected {
  z-index: 95;
}

.world-iron-live-edit .world-iron-live-editor-panel,
.world-iron-live-edit .world-iron-live-editor-panel * {
  pointer-events: auto !important;
}

.world-iron-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-iron-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-iron-hit-x);
  top: var(--world-iron-hit-y);
  width: var(--world-iron-hit-w);
  height: var(--world-iron-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-iron-live-hitbox:hover,
.world-iron-live-hitbox:active,
.world-iron-live-hitbox:focus,
.world-iron-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-iron-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-iron-live-resize-handle {
  position: absolute;
  left: var(--world-iron-handle-x);
  top: var(--world-iron-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-iron-live-resize-handle[hidden] {
  display: none;
}

.world-tile-modal.modal-skin-world-attached {
  position: relative;
  width: 340px;
  max-width: min(92vw, 340px);
  min-height: 510px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  overflow: visible;
  color: #fff0bd;
}

.world-tile-modal.modal-skin-world-attached .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-attached #worldTileModalBody {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-attached #worldTileModalTitle,
.world-tile-modal.modal-skin-world-attached [data-world-attached-item] {
  position: absolute;
  left: var(--world-attached-x, 50%);
  top: var(--world-attached-y, 50%);
  width: var(--world-attached-w, auto);
  height: var(--world-attached-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-attached-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-attached #worldTileModalTitle,
.world-tile-modal.modal-skin-world-attached .world-attached-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-attached #worldTileModalClose {
  position: absolute;
  right: auto;
  left: var(--world-attached-x, 299px);
  top: var(--world-attached-y, 81px);
  width: var(--world-attached-w, 42px);
  height: var(--world-attached-h, 42px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.world-tile-modal.modal-skin-world-attached #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-attached #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-attached #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-attached #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  transform: translate(-50%, -50%);
}

.world-tile-modal.modal-skin-world-attached .world-attached-info,
.world-tile-modal.modal-skin-world-attached .world-attached-info .panel-grid,
.world-tile-modal.modal-skin-world-attached .world-attached-info .action-row {
  display: contents;
}

.world-tile-modal.modal-skin-world-attached .world-attached-info .info-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  color: #fff2c5;
  font-size: var(--world-attached-size, 12px);
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72), 0 0 3px rgba(246, 222, 126, .24);
}

.world-tile-modal.modal-skin-world-attached .world-attached-info .info-row b {
  color: #ffe28d;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-attached .world-attached-info .info-row span {
  min-width: 0;
  color: #fffbe0;
  text-align: left;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="back"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionScout"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionMarch"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionGarrison"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="attackConfirm"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="attackBack"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe9a9;
  font-size: var(--world-attached-size, 12px);
  font-weight: 900;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .86), 0 0 4px rgba(255, 221, 126, .34);
  cursor: pointer;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="back"] {
  background: transparent !important;
  color: transparent;
  text-shadow: none;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionScout"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionMarch"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="actionGarrison"] {
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1;
}

.world-tile-modal.modal-skin-world-attached .world-attached-action-button img {
  display: block;
  width: min(100%, 34px);
  height: calc(var(--world-attached-h, 34px) - 13px);
  max-height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-attached .world-attached-action-button span {
  display: block;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  transform: none;
  z-index: 3;
  color: #fff1bd;
  text-shadow: 0 1px 1px rgba(48, 28, 4, .72);
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview > [data-world-attached-item] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview .panel-grid {
  display: grid;
  gap: 1px;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview .info-row {
  position: static;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 5px;
  width: auto;
  height: auto;
  min-height: 13px;
  transform: none;
  color: #fff4c8;
  font-size: var(--world-attached-size, 8px);
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-preview .info-row b {
  color: #ffe28d;
  font-size: inherit;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-section {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-section > strong {
  color: #ffe595;
  font-size: var(--world-attached-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-attached .world-plain-general-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.world-tile-modal.modal-skin-world-attached .world-plain-general-chip {
  min-width: 37px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(255, 220, 120, .42);
  border-radius: 3px;
  background: rgba(44, 31, 13, .38);
  color: #f8ddb0;
  font-size: var(--world-attached-size, 8px);
  line-height: 1;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-attached .world-plain-general-chip.is-selected {
  border-color: rgba(255, 238, 155, .9);
  background: rgba(121, 62, 14, .62);
  color: #fff6cf;
}

.world-tile-modal.modal-skin-world-attached .world-plain-troop-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin: 2px 0;
  color: #ffe595;
  font-size: var(--world-attached-size, 8px);
  line-height: 1.05;
}

.world-tile-modal.modal-skin-world-attached .world-plain-troop-row input {
  min-width: 0;
  height: 17px;
  border: 1px solid rgba(255, 220, 120, .45);
  border-radius: 3px;
  background: rgba(31, 23, 10, .45);
  color: #fff6cf;
  font-size: var(--world-attached-size, 8px);
  text-align: center;
}

.world-tile-modal.modal-skin-world-attached .world-plain-troop-range {
  box-sizing: border-box;
  width: var(--world-attached-w, 100%);
  height: var(--world-attached-h, 12px);
  margin: 0;
}

.world-tile-modal.modal-skin-world-attached .world-plain-troop-range::-webkit-slider-runnable-track {
  height: max(4px, calc(var(--world-attached-h, 12px) * .38));
}

.world-tile-modal.modal-skin-world-attached .world-plain-troop-range::-webkit-slider-thumb {
  margin-top: calc((max(4px, calc(var(--world-attached-h, 12px) * .38)) - var(--world-attached-h, 12px)) / 2);
}

.world-tile-modal.modal-skin-world-attached .world-plain-attack-hint {
  min-height: 12px;
  color: #fff6cf;
  font-size: var(--world-attached-size, 8px);
  line-height: 1.05;
  text-align: center;
}

.world-tile-modal.modal-skin-world-attached .action-result[data-world-attached-item] {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff4c6;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 1px rgba(58, 35, 8, .72);
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item]:hover,
.world-tile-modal.modal-skin-world-attached [data-world-attached-item]:active,
.world-tile-modal.modal-skin-world-attached [data-world-attached-item]:focus,
.world-tile-modal.modal-skin-world-attached [data-world-attached-item]:focus-visible {
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 238px;
  min-height: 138px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 220, 120, .62);
  border-radius: 8px;
  background: rgba(37, 20, 9, .92);
  box-shadow: inset 0 1px 0 rgba(255, 240, 170, .22), 0 8px 22px rgba(0, 0, 0, .38);
  color: #fff1c0;
  text-align: center;
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe28d;
  font-size: 14px;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm p,
.world-tile-modal.modal-skin-world-attached .world-scout-confirm span {
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .8);
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm div {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm button {
  min-width: 72px;
  height: 28px;
  border: 1px solid rgba(255, 220, 120, .68);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(115, 48, 18, .9), rgba(56, 24, 10, .94));
  color: #ffe9a9;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 238, 160, .36);
}

.world-tile-modal.modal-skin-world-attached .world-scout-confirm button:disabled {
  opacity: .45;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: 238px;
  min-height: 138px;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  padding: 16px 18px 14px;
  border: 1px solid rgba(255, 220, 120, .62);
  border-radius: 8px;
  background: rgba(37, 20, 9, .92);
  box-shadow: inset 0 1px 0 rgba(255, 240, 170, .22), 0 8px 22px rgba(0, 0, 0, .38);
  color: #fff1c0;
  text-align: center;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe28d;
  font-size: 14px;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm p,
.world-tile-modal.modal-skin-world-city .world-scout-confirm span {
  display: block;
  margin: 0 0 8px;
  font-size: 10px;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(30, 15, 3, .8);
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm div {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm button {
  min-width: 72px;
  height: 28px;
  border: 1px solid rgba(255, 220, 120, .68);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(115, 48, 18, .9), rgba(56, 24, 10, .94));
  color: #ffe9a9;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 238, 160, .36);
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm button:hover,
.world-tile-modal.modal-skin-world-city .world-scout-confirm button:active,
.world-tile-modal.modal-skin-world-city .world-scout-confirm button:focus,
.world-tile-modal.modal-skin-world-city .world-scout-confirm button:focus-visible {
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-city .world-scout-confirm button:disabled {
  opacity: .45;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 510px;
  z-index: 25;
  display: block;
  color: #fff1c0;
  font-size: 9px;
  overflow: visible;
}

.world-attached-march-page [data-world-attached-item] {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
  box-sizing: border-box;
}

.world-attached-march-page [data-world-attached-item="marchSummary"] {
  left: var(--world-attached-x, 169px) !important;
  top: var(--world-attached-y, 125px) !important;
  width: var(--world-attached-w, 199px) !important;
  height: var(--world-attached-h, 24px) !important;
  font-size: var(--world-attached-size, 8px) !important;
  z-index: 160 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none;
}

.world-attached-march-page [data-world-attached-item="marchGenerals"] {
  left: var(--world-attached-x, 173px) !important;
  top: var(--world-attached-y, 197px) !important;
  width: var(--world-attached-w, 230px) !important;
  height: var(--world-attached-h, 115px) !important;
  font-size: var(--world-attached-size, 10px) !important;
}

.world-attached-march-page [data-world-attached-item="marchUnits"] {
  left: var(--world-attached-x, 173px) !important;
  top: var(--world-attached-y, 311px) !important;
  width: var(--world-attached-w, 231px) !important;
  height: var(--world-attached-h, 108px) !important;
  font-size: var(--world-attached-size, 10px) !important;
}

.world-attached-march-page [data-world-attached-item="marchAssign"] {
  left: var(--world-attached-x, 174px) !important;
  top: var(--world-attached-y, 386px) !important;
  width: var(--world-attached-w, 230px) !important;
  height: var(--world-attached-h, 30px) !important;
  font-size: var(--world-attached-size, 10px) !important;
}

.world-attached-march-page [data-world-attached-item="marchAuto"] {
  left: var(--world-attached-x, 128px) !important;
  top: var(--world-attached-y, 422px) !important;
  width: var(--world-attached-w, 65px) !important;
  height: var(--world-attached-h, 30px) !important;
  font-size: var(--world-attached-size, 10px) !important;
}

.world-attached-march-page [data-world-attached-item="marchConfirm"] {
  left: var(--world-attached-x, 216px) !important;
  top: var(--world-attached-y, 421px) !important;
  width: var(--world-attached-w, 65px) !important;
  height: var(--world-attached-h, 30px) !important;
  font-size: var(--world-attached-size, 10px) !important;
}

.world-attached-march-page [data-world-attached-item="marchBack"] {
  left: var(--world-attached-x, 44px) !important;
  top: var(--world-attached-y, 107px) !important;
  width: var(--world-attached-w, 42px) !important;
  height: var(--world-attached-h, 42px) !important;
  font-size: var(--world-attached-size, 18px) !important;
}

.world-attached-march-page [data-world-attached-item="marchGenerals"],
.world-attached-march-page [data-world-attached-item="marchUnits"] {
  display: block;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 3px 0 0;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-summary {
  display: block !important;
  align-items: center;
  padding: 2px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff4c2;
  font-weight: 900;
  line-height: 1.15;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
  text-shadow: 0 1px 1px rgba(35, 18, 4, .92), 0 0 4px rgba(255, 221, 118, .35);
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-generals,
.world-tile-modal.modal-skin-world-attached .world-attached-march-units {
  overflow: hidden;
  padding-right: 0;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row {
  position: relative !important;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1px 5px;
  width: 100%;
  height: auto;
  transform: none !important;
  min-height: 36px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 220, 120, .28);
  border-radius: 6px;
  background: rgba(38, 22, 10, .58);
  color: #ffe8ac;
  text-align: left;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row {
  border-color: rgba(214, 222, 232, .36);
  background: linear-gradient(180deg, rgba(245, 248, 252, .18), rgba(132, 142, 154, .14));
  color: #e8edf3;
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row b {
  color: #f4f8ff;
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row span,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row em {
  color: #dce4ee;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row b,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row b {
  grid-row: span 3;
  color: #ffe28d;
  font-size: 10px;
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row span,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row span,
.world-tile-modal.modal-skin-world-attached .world-attached-general-row em,
.world-tile-modal.modal-skin-world-attached .world-attached-general-row i,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row em {
  min-width: 0;
  font-style: normal;
  font-size: 8px;
  line-height: 1.08;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row i {
  color: #fff3bf;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row.is-selected,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-selected {
  border-color: rgba(255, 238, 155, .9);
  background: rgba(110, 51, 16, .72);
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-selected {
  border-color: rgba(174, 229, 255, .92);
  background: linear-gradient(180deg, rgba(118, 184, 238, .58), rgba(74, 139, 207, .54));
  color: #ffffff;
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-selected b,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-selected span,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-selected em {
  color: #ffffff;
}

.world-tile-modal.modal-skin-world-attached .world-attached-general-row.is-active,
.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-active {
  box-shadow: inset 0 0 0 1px rgba(80, 210, 255, .5);
}

.world-tile-modal.modal-skin-world-attached .world-attached-unit-row.is-active {
  box-shadow: inset 0 0 0 1px rgba(150, 225, 255, .72), 0 0 5px rgba(255, 245, 190, .18);
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-assign {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-assign input {
  min-width: 0;
  height: 20px;
  border: 1px solid rgba(255, 220, 120, .42);
  border-radius: 5px;
  background: rgba(30, 18, 8, .62);
  color: #fff6cf;
  text-align: center;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-actions {
  display: contents;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-actions button {
  padding: 0;
  border: 1px solid rgba(255, 220, 120, .62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(115, 48, 18, .9), rgba(56, 24, 10, .94));
  color: #ffe9a9;
  font-size: 9px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 238, 160, .36);
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchSummary"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchGenerals"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchUnits"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchAssign"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchAuto"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchConfirm"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchBack"] {
  position: absolute;
  left: var(--world-attached-x, 50%);
  top: var(--world-attached-y, 50%);
  width: var(--world-attached-w, auto);
  height: var(--world-attached-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  box-sizing: border-box;
  font-size: var(--world-attached-size, 10px);
  pointer-events: auto;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchGenerals"],
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchUnits"] {
  display: block;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 3px 0 0;
  box-sizing: border-box;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchGenerals"] > *,
.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchUnits"] > * {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3px;
}

.world-tile-modal.modal-skin-world-attached [data-world-attached-item="marchBack"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.world-tile-modal.modal-skin-world-attached .world-attached-march-actions [data-world-attached-item="marchBack"],
.world-attached-march-page [data-world-attached-item="marchBack"] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.world-attached-live-edit [data-world-attached-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-attached-live-edit [data-world-attached-item].is-live-selected {
  z-index: 95;
}

.world-attached-live-edit .world-attached-live-editor-panel,
.world-attached-live-edit .world-attached-live-editor-panel * {
  pointer-events: auto !important;
}

.world-attached-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-attached-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-attached-hit-x);
  top: var(--world-attached-hit-y);
  width: var(--world-attached-hit-w);
  height: var(--world-attached-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-attached-live-hitbox:hover,
.world-attached-live-hitbox:active,
.world-attached-live-hitbox:focus,
.world-attached-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-attached-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-attached-live-resize-handle {
  position: absolute;
  left: var(--world-attached-handle-x);
  top: var(--world-attached-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-attached-live-resize-handle[hidden] {
  display: none;
}


.world-tile-modal.modal-skin-world-city {
  position: relative;
  width: 360px;
  max-width: min(92vw, 360px);
  min-height: 430px;
  padding: 0;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-city .info-row {
  border-bottom: 0;
}

.world-tile-modal.modal-skin-world-city .modal-head {
  display: contents;
}

.world-tile-modal.modal-skin-world-city #worldTileModalTitle,
.world-tile-modal.modal-skin-world-city .world-city-info,
.world-tile-modal.modal-skin-world-city .world-city-player-vip,
.world-tile-modal.modal-skin-world-city .world-city-player-name,
.world-tile-modal.modal-skin-world-city .world-city-player-emblem,
.world-tile-modal.modal-skin-world-city .world-city-action-button,
.world-tile-modal.modal-skin-world-city #worldTileModalClose {
  position: absolute;
  left: var(--world-city-x, 50%);
  top: var(--world-city-y, 50%);
  width: var(--world-city-w, auto);
  height: var(--world-city-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--world-city-size, 12px);
  z-index: 2;
}

.world-tile-modal.modal-skin-world-city #worldTileModalTitle {
  display: grid;
  place-items: center;
  color: #fff0b8;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 1px rgba(41, 12, 2, .72), 0 0 3px rgba(255, 212, 86, .28);
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip,
.world-tile-modal.modal-skin-world-city .world-city-player-name,
.world-tile-modal.modal-skin-world-city .world-city-player-emblem {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  outline: 0;
  text-decoration: none;
  cursor: pointer;
  overflow: visible;
}

.world-tile-modal.modal-skin-world-city .world-city-player-name,
.world-tile-modal.modal-skin-world-city .world-city-player-emblem {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip::before,
.world-tile-modal.modal-skin-world-city .world-city-player-vip::after {
  content: none !important;
  display: none !important;
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-8,
.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-9,
.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-10 {
  text-shadow: none !important;
  -webkit-text-stroke-width: 0;
  box-shadow: 0 0 4px rgba(255, 198, 66, .46), 0 0 8px rgba(255, 108, 48, .2) !important;
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-8 {
  color: #2a1705;
  background: linear-gradient(180deg, #ffeeb2 0%, #e4b348 100%);
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-9 {
  color: #fff9dc;
  background: linear-gradient(180deg, #e99b40 0%, #8a2918 100%);
}

.world-tile-modal.modal-skin-world-city .world-city-player-vip.vip-name-level-10 {
  color: #fff7d2;
  background: linear-gradient(180deg, #f06434 0%, #8b1711 100%);
}

.world-tile-modal.modal-skin-world-city .world-city-player-emblem .vip-identity-emblem,
.world-tile-modal.modal-skin-world-city .world-city-player-emblem .vip-identity-emblem img {
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.world-tile-modal.modal-skin-world-city .world-city-info {
  display: grid;
  align-content: start;
  color: #594326;
  text-shadow: 0 1px 0 rgba(255, 248, 209, .34);
}

.world-tile-modal.modal-skin-world-city .world-city-info h2 {
  display: none;
}

.world-tile-modal.modal-skin-world-city .world-city-info .panel-grid {
  gap: 2px;
  margin: 0;
  padding-top: 2px;
}

.world-tile-modal.modal-skin-world-city .world-city-info .info-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  justify-content: start;
  column-gap: 8px;
  align-items: center;
  color: #5c472b;
  font-weight: 700;
  min-height: 18px;
  padding: 1px 0;
  text-shadow: 0 1px 0 rgba(255, 248, 214, .45);
}

.world-tile-modal.modal-skin-world-city .world-city-info .info-row b {
  color: #7a551b;
  font-weight: 900;
}

.world-tile-modal.modal-skin-world-city .world-city-info .info-row span {
  color: #45331d;
  font-weight: 800;
  justify-self: start;
  text-align: left;
}

.world-tile-modal.modal-skin-world-city .world-city-info .action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.world-tile-modal.modal-skin-world-city .world-city-info .action-row button {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-rows: 28px 14px;
  justify-items: center;
  align-items: center;
  width: 58px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  color: #5a3517;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 241, 184, .7);
}

.world-tile-modal.modal-skin-world-city .world-city-info .action-row button:hover,
.world-tile-modal.modal-skin-world-city .world-city-info .action-row button:active,
.world-tile-modal.modal-skin-world-city .world-city-info .action-row button:focus,
.world-tile-modal.modal-skin-world-city .world-city-info .action-row button:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-city .world-city-info .action-row img {
  display: block;
  width: 30px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-city .world-city-info .action-row span {
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-city .world-city-action-button {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
  color: #5a3517;
  cursor: pointer;
  font-size: var(--world-city-size, 11px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 241, 184, .7);
  z-index: 5;
}

.world-tile-modal.modal-skin-world-city .world-city-action-button:hover,
.world-tile-modal.modal-skin-world-city .world-city-action-button:active,
.world-tile-modal.modal-skin-world-city .world-city-action-button:focus,
.world-tile-modal.modal-skin-world-city .world-city-action-button:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-tile-modal.modal-skin-world-city .world-city-action-button img {
  display: block;
  width: min(100%, 34px);
  height: calc(var(--world-city-h, 46px) - 16px);
  max-height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-city .world-city-action-button span {
  pointer-events: none;
}

.world-tile-modal.modal-skin-world-city #worldTileModalClose {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  box-shadow: none;
  filter: none;
  cursor: pointer;
  font-size: 0;
  outline: 0;
  z-index: 6;
}

.world-tile-modal.modal-skin-world-city #worldTileModalClose::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("../assets/hud/crops/friends_v1/friend_request_ignore_v1_webp_q82.webp") center / contain no-repeat;
  border: 0;
}

.world-tile-modal.modal-skin-world-city #worldTileModalClose::after {
  content: "";
}

.world-tile-modal.modal-skin-world-city #worldTileModalClose:hover,
.world-tile-modal.modal-skin-world-city #worldTileModalClose:active,
.world-tile-modal.modal-skin-world-city #worldTileModalClose:focus,
.world-tile-modal.modal-skin-world-city #worldTileModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  filter: none;
  outline: 0;
}

.world-city-live-edit [data-world-city-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-city-live-edit [data-world-city-item].is-live-selected {
  z-index: 95;
}

.world-city-live-editor-panel {
  z-index: 3000;
}

.world-city-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.world-city-live-edit .world-city-live-editor-panel,
.world-city-live-edit .world-city-live-editor-panel * {
  pointer-events: auto !important;
}

.world-city-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-city-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-city-hit-x);
  top: var(--world-city-hit-y);
  width: var(--world-city-hit-w);
  height: var(--world-city-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-city-live-hitbox:hover,
.world-city-live-hitbox:active,
.world-city-live-hitbox:focus,
.world-city-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-city-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-city-live-resize-handle {
  position: absolute;
  left: var(--world-city-handle-x);
  top: var(--world-city-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-city-live-resize-handle[hidden] {
  display: none;
}

.world-water-live-edit [data-world-water-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-water-live-edit [data-world-water-item].is-live-selected {
  z-index: 95;
}

.world-water-live-editor-panel {
  z-index: 3000;
}

.world-water-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.world-water-live-edit .world-water-live-editor-panel,
.world-water-live-edit .world-water-live-editor-panel * {
  pointer-events: auto !important;
}

.world-water-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-water-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-water-hit-x);
  top: var(--world-water-hit-y);
  width: var(--world-water-hit-w);
  height: var(--world-water-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-water-live-hitbox:hover,
.world-water-live-hitbox:active,
.world-water-live-hitbox:focus,
.world-water-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-water-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-water-live-resize-handle {
  position: absolute;
  left: var(--world-water-handle-x);
  top: var(--world-water-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-water-live-resize-handle[hidden] {
  display: none;
}

.world-wasteland-live-edit [data-world-wasteland-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-wasteland-live-edit [data-world-wasteland-item].is-live-selected {
  z-index: 95;
}

.world-wasteland-live-editor-panel {
  z-index: 3000;
}

.world-wasteland-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.world-wasteland-live-edit .world-wasteland-live-editor-panel,
.world-wasteland-live-edit .world-wasteland-live-editor-panel * {
  pointer-events: auto !important;
}

.world-wasteland-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-wasteland-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-wasteland-hit-x);
  top: var(--world-wasteland-hit-y);
  width: var(--world-wasteland-hit-w);
  height: var(--world-wasteland-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-wasteland-live-hitbox:hover,
.world-wasteland-live-hitbox:active,
.world-wasteland-live-hitbox:focus,
.world-wasteland-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-wasteland-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-wasteland-live-resize-handle {
  position: absolute;
  left: var(--world-wasteland-handle-x);
  top: var(--world-wasteland-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-wasteland-live-resize-handle[hidden] {
  display: none;
}

.world-plain-live-edit [data-world-plain-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.world-plain-live-edit [data-world-plain-item].is-live-selected {
  z-index: 95;
}

.world-plain-live-editor-panel {
  z-index: 3000;
}

.world-plain-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.world-plain-live-edit .world-plain-live-editor-panel,
.world-plain-live-edit .world-plain-live-editor-panel * {
  pointer-events: auto !important;
}

.world-plain-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.world-plain-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--world-plain-hit-x);
  top: var(--world-plain-hit-y);
  width: var(--world-plain-hit-w);
  height: var(--world-plain-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .78);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.world-plain-live-hitbox:hover,
.world-plain-live-hitbox:active,
.world-plain-live-hitbox:focus,
.world-plain-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.world-plain-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.world-plain-live-resize-handle {
  position: absolute;
  left: var(--world-plain-handle-x);
  top: var(--world-plain-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.world-plain-live-resize-handle[hidden] {
  display: none;
}

.world-search-modal {
  width: min(86vw, 340px);
}

#worldSearchModal:has(#worldSearchX:focus),
#worldSearchModal:has(#worldSearchY:focus) {
  place-items: start center;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: min(46vh, 320px);
  overflow-y: auto;
}

.coord-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.coord-form label {
  display: grid;
  gap: 4px;
  color: #ffe0a3;
  font-size: 13px;
}

.coord-form input {
  min-width: 0;
  border: 1px solid #7b5e35;
  background: #120d08;
  color: #f7e6c2;
  padding: 8px;
  font: inherit;
}

.world-tile-modal .action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.side-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 12;
  width: min(100vw, 460px);
  max-height: min(70dvh, 620px);
  overflow: auto;
  transform: translate(-50%, 105%);
  transition: transform .18s ease;
  margin: 0;
  padding: 12px;
  border: 1px solid #5e472d;
  border-bottom: 0;
  background: #1d150e;
  box-shadow: 0 -14px 32px rgba(0, 0, 0, .48);
}

.side-panel.open {
  transform: translate(-50%, 0);
}

.panel-close {
  float: right;
  margin: 0 0 8px 10px;
  padding: 5px 8px;
  font-size: 13px;
}

.panel-grid {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(73, 61, 39, .13);
  color: #4b402f;
  font-size: 10px;
  line-height: 1.25;
}

.info-row b {
  flex: 0 0 auto;
  color: #72551f;
  font-weight: 600;
}

.info-row span {
  min-width: 0;
  text-align: right;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.action-result {
  margin-top: 4px;
  padding: 6px 7px;
  border: 1px solid rgba(151, 125, 63, .35);
  background: rgba(223, 203, 146, .18);
  color: #5d4519;
  font-size: 10px;
  line-height: 1.3;
  pointer-events: none;
}

.alliance-panel {
  display: grid;
  gap: 10px;
  width: min(100%, 340px);
  color: #ffe6ad;
}

.alliance-summary {
  display: grid;
  gap: 6px;
}

.alliance-member-list {
  display: grid;
  gap: 5px;
  max-height: min(42dvh, 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.alliance-member-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.alliance-member-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 5px 7px;
  border: 1px solid rgba(195, 132, 49, .32);
  border-radius: 4px;
  background: rgba(62, 31, 12, .42);
  color: #ffe0a4;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alliance-member-row:active {
  filter: brightness(1.12);
}

.alliance-member-row img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(238, 188, 83, .82);
}

.alliance-member-row span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.alliance-member-row .player-identity-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.alliance-member-row .player-identity-emblem {
  display: inline-grid;
}

.alliance-member-row span strong,
.alliance-member-row span small {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.alliance-member-row span small {
  color: #dfb66d;
  font-size: 10px;
  font-weight: 700;
}

.alliance-member-row em {
  color: #ffd884;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.alliance-member-row.self {
  border-color: rgba(255, 214, 107, .62);
  background: rgba(109, 61, 18, .5);
}

.alliance-note {
  margin: 0;
  color: #d9b06c;
  font-size: 11px;
  line-height: 1.45;
}

.upgrade-panel-grid .action-row {
  order: -1;
  margin-top: 0;
  margin-bottom: 2px;
}

.maincity-level-tester {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 210, 122, .24);
  background: rgba(255, 210, 122, .06);
}

.maincity-level-tester > b {
  color: #ffd27a;
  font-size: 12px;
}

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

.level-test-buttons button {
  padding: 5px 4px;
  font-size: 12px;
}

.level-test-buttons button.active {
  border-color: #ffd36b;
  background: rgba(255, 211, 107, .24);
  color: #fff4c9;
}

.feature-area {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.feature-area h3 {
  margin: 0 0 8px;
  color: #ffd27a;
  font-size: 16px;
}

.feature-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}

.feature-button {
  display: grid;
  gap: 3px;
  width: 100%;
  text-align: left;
  position: relative;
}

.feature-button.is-locked {
  opacity: .78;
}

.feature-button.is-locked .unit-lock-overlay {
  width: max(12px, var(--channel-size, 18px));
  height: 18px;
  left: 50%;
  right: auto;
  top: 29%;
  transform: translate(-50%, -50%);
}

.feature-button strong {
  color: #ffe0a3;
  font-size: 14px;
}

.feature-button span {
  color: #cdb58f;
  font-size: 12px;
  line-height: 1.35;
}

.yuxuantai-info-area {
  color: #56431f;
}

.yuxuantai-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.yuxuantai-status span {
  padding: 6px;
  border: 1px solid rgba(160, 125, 48, .28);
  background: rgba(255, 242, 189, .2);
  font-size: 10px;
}

.recruit-area {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.recruit-topline {
  position: absolute;
  left: 44px;
  right: 44px;
  top: 58px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  color: #f0d7a3;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96);
}

.recruit-topline b {
  color: #ffd875;
  font-size: 12px;
}

.recruit-topline.layout-applied {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.recruit-topline.layout-applied [data-recruit-draw-item] {
  position: absolute;
  left: var(--rdx);
  top: var(--rdy);
  width: var(--rdw);
  height: var(--rdh);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  font-size: var(--rd-title-size);
  line-height: 1.15;
  text-align: center;
}

.recruit-stage {
  position: absolute;
  inset: 88px 28px 78px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 172px 150px;
  grid-template-areas:
    "legend legend"
    "brave epic";
  gap: 12px;
  place-items: center;
  min-height: 0;
}

.recruit-stage.layout-applied {
  inset: 0;
  display: block;
}

.recruit-pool {
  position: relative;
  display: grid;
  min-width: 0;
  width: 126px;
  height: 150px;
  color: #fff0c8;
  text-align: center;
  overflow: visible;
}

.recruit-stage.layout-applied .recruit-pool {
  position: absolute;
  left: var(--rdx);
  top: var(--rdy);
  width: var(--rdw);
  height: var(--rdh);
  transform: translate(-50%, -50%);
}

.pool-legend {
  grid-area: legend;
  width: 142px;
  height: 170px;
}

.pool-brave {
  grid-area: brave;
}

.pool-epic {
  grid-area: epic;
}

.recruit-pool::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 0;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .36));
  pointer-events: none;
  transform-origin: center;
  animation: recruitPoolFrameBreath 2.6s ease-in-out infinite;
}

.pool-brave::before {
  background-image: url("../assets/ui/recruit/recruit_pool_fame_frame_v1_webp_q82.webp?v=1671");
}

.pool-epic::before {
  background-image: url("../assets/ui/recruit/recruit_pool_good_frame_v1_webp_q82.webp?v=1671");
}

.pool-legend::before {
  background-image: url("../assets/ui/recruit/recruit_pool_god_frame_v1_webp_q82.webp?v=1671");
}

.recruit-main-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto auto auto;
  grid-template-areas:
    "fx"
    "title"
    "state"
    "rare";
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 11px 6px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  overflow: hidden;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
}

.recruit-main-button.layout-applied {
  overflow: visible;
}

.recruit-main-button::after {
  content: none;
  position: absolute;
  inset: -20% -42%;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 247, 178, .42) 50%, transparent 58% 100%);
  transform: translateX(-54%);
  opacity: 0;
  pointer-events: none;
}

.recruit-main-button:active::after,
.recruit-pool.recruiting .recruit-main-button::after {
  animation: none;
}

.pool-fx {
  display: none !important;
  position: relative;
  grid-area: fx;
  left: auto;
  top: auto;
  width: min(64%, 70px);
  height: min(48%, 74px);
  transform: translateY(5px);
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 170, .34), rgba(255, 197, 64, .22) 36%, transparent 62%),
    conic-gradient(from 0deg, transparent, rgba(255, 232, 119, .52), transparent 34%, rgba(184, 233, 255, .18), transparent 72%);
  box-shadow: 0 0 16px rgba(255, 212, 91, .28);
  filter: drop-shadow(0 2px 5px rgba(255, 202, 86, .22));
  animation: recruitFxFloat 1.1s ease-in-out infinite;
}

.pool-fx span {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 228, 109, .58), transparent 42%),
    conic-gradient(from 0deg, transparent, rgba(255, 222, 99, .58), transparent 42%, rgba(143, 221, 204, .25), transparent 78%);
  filter: blur(.2px);
  animation: recruitSigilSpin 2.4s linear infinite;
}

.pool-fx::after {
  content: "";
  position: absolute;
  inset: 15% 10%;
  background: linear-gradient(100deg, transparent 0 35%, rgba(255, 247, 178, .6) 48%, transparent 62% 100%);
  transform: translateX(-55%);
  animation: recruitFxShine 1.35s ease-in-out infinite;
}

.pool-legend .pool-fx {
  background:
    radial-gradient(circle, rgba(255, 244, 170, .44), rgba(245, 54, 44, .18) 38%, transparent 64%),
    conic-gradient(from 0deg, transparent, rgba(255, 232, 119, .72), transparent 34%, rgba(255, 78, 61, .38), transparent 72%);
}

.pool-epic .pool-fx {
  background:
    radial-gradient(circle, rgba(231, 214, 255, .38), rgba(142, 80, 255, .2) 40%, transparent 64%),
    conic-gradient(from 0deg, transparent, rgba(218, 196, 255, .62), transparent 34%, rgba(132, 88, 225, .34), transparent 72%);
}

.pool-brave .pool-fx {
  background:
    radial-gradient(circle, rgba(209, 255, 207, .32), rgba(60, 195, 124, .18) 40%, transparent 64%),
    conic-gradient(from 0deg, transparent, rgba(198, 255, 208, .52), transparent 34%, rgba(91, 211, 156, .28), transparent 72%);
}

.recruit-pool strong {
  grid-area: title;
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: #ffd875;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .36);
}

.recruit-stage.layout-applied .recruit-pool strong {
  font-size: var(--rd-title-size);
}

.recruit-stage.layout-applied .recruit-pool [data-recruit-draw-item] {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  transform: none;
  text-align: center;
  white-space: normal;
}

.recruit-stage.layout-applied > [data-recruit-draw-item] {
  position: absolute;
  left: var(--rdx);
  top: var(--rdy);
  z-index: 40;
  width: var(--rdw);
  height: var(--rdh);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.recruit-stage.layout-applied > .recruit-stage-label {
  font-size: var(--rd-title-size);
  line-height: 1.08;
  white-space: normal;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .36);
}

.recruit-stage.layout-applied > .pool-title {
  color: #ffd875;
  font-weight: 800;
}

.recruit-stage.layout-applied > .pool-state {
  color: #f0d7a3;
}

.recruit-stage.layout-applied > .pool-state.is-free {
  color: #fff1b8;
  font-weight: 700;
}

.recruit-stage.layout-applied > .pool-state.is-cooling {
  color: #f3d09a;
}

.recruit-stage.layout-applied > .recruit-stage-status-button {
  flex-direction: column;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--rd-title-size);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.recruit-free-label {
  color: #fff1b8;
  font-weight: 800;
  font-size: 1.2em;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .42);
}

.recruit-stage.layout-applied > .pool-state.is-free .recruit-free-label {
  color: #fff7c8;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 8px rgba(255, 220, 105, .76), 0 0 14px rgba(255, 186, 72, .38);
}

.recruit-stage.layout-applied > .pool-state.is-cooling .recruit-free-label {
  color: #a98247;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .9);
}

.recruit-cooldown-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #f3d09a;
  font-size: .86em;
  line-height: 1.05;
}

.recruit-hourglass-icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 210, 82, .58));
  animation: recruitHourglassIconTurn 1.25s ease-in-out infinite;
}

.recruit-stage.layout-applied > .pool-rarity {
  color: #d6b46c;
}

.recruit-stage.layout-applied > .recruit-stage-paid {
  z-index: 45;
  min-height: 0;
  padding: 0;
  border-color: rgba(232, 188, 88, .62);
  background: rgba(35, 18, 10, .72) !important;
  color: #fff0c8;
  font-size: var(--rd-title-size);
  line-height: 1.1;
  box-shadow: none !important;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.recruit-stage.layout-applied > .recruit-stage-paid.is-free-draw {
  border-color: rgba(255, 222, 116, .9);
  background: rgba(76, 40, 13, .78) !important;
  color: #fff4bd;
  font-weight: 800;
}

.recruit-stage.layout-applied > .recruit-stage-paid:hover,
.recruit-stage.layout-applied > .recruit-stage-paid:active,
.recruit-stage.layout-applied > .recruit-stage-paid:focus,
.recruit-stage.layout-applied > .recruit-stage-paid:focus-visible,
.recruit-stage.layout-applied > .recruit-stage-status-button:hover,
.recruit-stage.layout-applied > .recruit-stage-status-button:active,
.recruit-stage.layout-applied > .recruit-stage-status-button:focus,
.recruit-stage.layout-applied > .recruit-stage-status-button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.recruit-stage.layout-applied .recruit-main-button [data-recruit-draw-item] {
  pointer-events: none;
}

.recruit-pool span,
.recruit-pool small {
  position: relative;
  z-index: 1;
  color: #f0d7a3;
  font-size: 9px;
  line-height: 1.15;
}

.recruit-stage.layout-applied .recruit-pool span,
.recruit-stage.layout-applied .recruit-pool small {
  font-size: var(--rd-meta-size);
}

.recruit-pool span {
  grid-area: state;
}

.recruit-pool small {
  grid-area: rare;
  color: #d6b46c;
}

.recruit-actions {
  position: absolute;
  right: 36px;
  bottom: 28px;
  display: grid;
  grid-template-columns: auto;
  justify-content: end;
  gap: 7px;
}

.recruit-paid-row {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: -27px;
  z-index: 2;
  display: flex;
  gap: 5px;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.recruit-paid-row.layout-applied {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  display: block;
  transform: none;
  pointer-events: none;
}

.recruit-paid-row.layout-applied button {
  pointer-events: auto;
}

.recruit-actions.layout-applied {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.recruit-actions.layout-applied [data-recruit-draw-item] {
  position: absolute;
  left: var(--rdx);
  top: var(--rdy);
  width: var(--rdw);
  height: var(--rdh);
  min-height: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  font-size: var(--rd-title-size);
  pointer-events: auto;
}

.recruit-actions.layout-applied .recruit-floating-action {
  min-height: 0;
  padding: 0;
  border-color: rgba(232, 188, 88, .68);
  background: rgba(35, 18, 10, .68);
  color: #ffe3a2;
  line-height: 1;
}

.recruit-actions .is-hidden-now {
  display: none !important;
}

.recruit-actions:not(.layout-applied) .recruit-history-entry {
  left: 62px;
}

.recruit-actions:not(.layout-applied) .recruit-exchange-entry {
  left: 244px;
}

.recruit-subpage {
  position: absolute;
  inset: 62px 24px 28px;
  display: grid;
  grid-template-rows: 28px 1fr;
  gap: 8px;
  color: #f5dca5;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96);
}

.recruit-subpage-head {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 6px;
}

.recruit-subpage-head button {
  min-height: 22px;
  padding: 0 8px;
  border-color: rgba(232, 188, 88, .68);
  background: rgba(35, 18, 10, .68);
  color: #ffe3a2;
  font-size: 10px;
}

.recruit-subpage-head [data-recruit-back]:not(.bingying-back-button),
.recruit-subpage-head [data-artifact-back]:not(.bingying-back-button) {
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffe3a2;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 206, 92, .35);
}

.recruit-subpage-head [data-recruit-back]:not(.bingying-back-button):hover,
.recruit-subpage-head [data-recruit-back]:not(.bingying-back-button):focus-visible,
.recruit-subpage-head [data-artifact-back]:not(.bingying-back-button):hover,
.recruit-subpage-head [data-artifact-back]:not(.bingying-back-button):focus-visible {
  outline: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.recruit-subpage-head strong {
  text-align: center;
  color: #ffdf83;
  font-size: 14px;
}

.recruit-subpage.layout-applied [data-recruit-subpage-item] {
  position: absolute;
  left: var(--rsx);
  top: var(--rsy);
  width: var(--rsw);
  height: var(--rsh);
  transform: translate(-50%, -50%);
  font-size: var(--rss);
  z-index: 72;
}

.recruit-subpage.layout-applied [data-recruit-subpage-item="title"] {
  display: grid;
  place-items: center;
  line-height: 1.08;
  white-space: nowrap;
}

.recruit-subpage-head .bingying-back-button[data-recruit-back],
.recruit-subpage-head .bingying-back-button[data-artifact-back] {
  min-height: 0;
  padding: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.recruit-subpage-live-edit [data-recruit-subpage-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.recruit-subpage-live-edit [data-recruit-subpage-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.artifact-subpage-layout-applied [data-artifact-subpage-item],
.modal-skin-artifact #gameModalClose[data-artifact-subpage-item="close"] {
  position: absolute;
  left: var(--asx);
  top: var(--asy);
  width: var(--asw);
  height: var(--ash);
  transform: translate(-50%, -50%);
  font-size: var(--ass);
  z-index: 72;
}

.artifact-subpage-layout-applied [data-artifact-subpage-item="title"] {
  display: grid;
  place-items: center;
  line-height: 1.08;
  white-space: nowrap;
}

.modal-skin-artifact #gameModalClose {
  position: absolute;
  left: 318px;
  top: 34px;
  width: 32px !important;
  height: 32px !important;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.modal-skin-artifact #gameModalClose::before,
.modal-skin-artifact #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.modal-skin-artifact #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-artifact #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.artifact-subpage-live-edit [data-artifact-subpage-item],
.artifact-subpage-live-edit #gameModalClose[data-artifact-subpage-item="close"] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.artifact-subpage-live-edit [data-artifact-subpage-item].is-live-selected,
.artifact-subpage-live-edit #gameModalClose[data-artifact-subpage-item="close"].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.recruit-history-list,
.recruit-exchange-list {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  padding: 0 3px 4px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: none;
}

.recruit-history-list::-webkit-scrollbar,
.recruit-exchange-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.recruit-history-list li,
.exchange-row {
  border: 1px solid rgba(232, 188, 88, .22);
  border-radius: 6px;
  background: rgba(26, 14, 8, .54);
  box-shadow: inset 0 1px 0 rgba(255, 238, 176, .08);
}

.recruit-history-list li {
  display: grid;
  gap: 3px;
  padding: 6px 7px;
}

.recruit-history-list li b {
  color: #ffd875;
  font-size: 10px;
}

.recruit-history-list li em {
  color: #f1c982;
  font-size: 9px;
  font-style: normal;
}

.recruit-history-list li p {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.history-reward {
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255, 232, 132, .12);
  color: #fff0bf;
  font-size: 9px;
}

.history-reward.rarity-sss,
.exchange-row.rarity-sss {
  border-color: rgba(255, 211, 78, .48);
}

.history-reward.rarity-ssr,
.exchange-row.rarity-ssr {
  border-color: rgba(192, 134, 255, .42);
}

.history-reward.rarity-sr,
.exchange-row.rarity-sr {
  border-color: rgba(111, 220, 173, .36);
}

.recruit-history-list .empty {
  min-height: 120px;
  place-content: center;
  text-align: center;
}

.exchange-row {
  display: grid;
  grid-template-columns: 38px 1fr 58px;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
}

.exchange-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 212, 83, .28));
}

.exchange-row div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.exchange-row b {
  color: #fff0bf;
  font-size: 11px;
}

.exchange-row span {
  color: #d8b676;
  font-size: 9px;
}

.exchange-row small {
  color: rgba(255, 225, 154, .72);
  font-size: 8px;
  line-height: 1.1;
}

.exchange-row button {
  min-height: 24px;
  padding: 0 5px;
  border-color: rgba(232, 188, 88, .68);
  background: linear-gradient(180deg, rgba(216, 167, 66, .82), rgba(95, 45, 15, .82));
  color: #fff1c4;
  font-size: 10px;
}

.exchange-row button:disabled {
  border-color: rgba(165, 140, 92, .42);
  background: rgba(44, 34, 25, .58);
  color: rgba(230, 204, 152, .58);
}

.recruit-paid-row button {
  min-height: 20px;
  padding: 2px 6px;
  border-color: rgba(232, 188, 88, .62);
  background: rgba(35, 18, 10, .72);
  color: #fff0c8;
  font-size: 8px;
  line-height: 1.1;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.recruit-paid-row em {
  color: #fff0a0;
  font-style: normal;
}

.recruit-yuanbao-mini {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -2px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 218, 82, .7));
  animation: recruitYuanbaoMiniPulse 1.05s ease-in-out infinite;
}

.recruit-main-button:hover,
.recruit-main-button:active,
.recruit-main-button:focus,
.recruit-main-button:focus-visible,
.recruit-paid-row button:hover,
.recruit-paid-row button:active,
.recruit-paid-row button:focus,
.recruit-paid-row button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  filter: none;
}

.recruit-main-button,
.recruit-main-button:hover,
.recruit-main-button:active,
.recruit-main-button:focus,
.recruit-main-button:focus-visible {
  background: transparent !important;
}

.recruit-paid-row button:hover,
.recruit-paid-row button:active,
.recruit-paid-row button:focus,
.recruit-paid-row button:focus-visible {
  background: rgba(35, 18, 10, .72) !important;
}

.recruit-pool.recruiting .pool-fx {
  animation: recruitFxBurst .32s ease-in-out 5;
}

.recruit-pool.recruiting::after {
  content: none;
  position: absolute;
  inset: -12px;
  z-index: 3;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 239, 153, .64), transparent 42%),
    conic-gradient(from 0deg, transparent, rgba(255, 224, 104, .62), transparent 42%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: recruitSummonBurst .86s ease-out both;
}

.recruit-reveal {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  pointer-events: auto;
  overflow: hidden;
  cursor: pointer;
  --origin-x: 0px;
  --origin-y: 0px;
  --rare-glow: rgba(255, 218, 96, .82);
  --rare-core: rgba(255, 246, 184, .9);
}

.recruit-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, rgba(153, 18, 18, .36), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .42) 46%, rgba(0, 0, 0, .82));
  animation: recruitDarkStage 2.6s ease-out both;
}

.recruit-reveal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(114vw, 520px);
  height: min(58vw, 260px);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 241, 166, .36), transparent 30%),
    linear-gradient(100deg, transparent 0 38%, rgba(255, 246, 188, .58) 48%, rgba(116, 226, 208, .18) 54%, transparent 64% 100%);
  transform: translate(-50%, -50%) rotate(-7deg);
  opacity: 0;
  animation: recruitBeamSweep 2.35s ease-out .18s both, recruitBeamPulse 2.35s ease-out .18s both;
}

.reveal-legend {
  --origin-x: 0px;
  --origin-y: -112px;
  --rare-glow: rgba(255, 224, 98, .96);
  --rare-core: rgba(255, 248, 190, .98);
}

.reveal-brave {
  --origin-x: -96px;
  --origin-y: 76px;
  --rare-glow: rgba(116, 215, 178, .72);
  --rare-core: rgba(211, 255, 222, .82);
}

.reveal-epic {
  --origin-x: 96px;
  --origin-y: 76px;
  --rare-glow: rgba(183, 132, 255, .8);
  --rare-core: rgba(244, 218, 255, .9);
}

.recruit-curtain {
  position: absolute;
  top: -12%;
  z-index: 1;
  width: 28%;
  height: 126%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rare-glow) 45%, transparent), transparent);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  animation: recruitCurtainFall 2.65s ease-out .24s both;
}

.curtain-left {
  left: 10%;
  --curtain-r: 11deg;
}

.curtain-right {
  right: 10%;
  --curtain-r: -11deg;
  animation-delay: .34s;
}

.recruit-burst {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 2;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--rare-core), rgba(255, 208, 78, .42) 18%, transparent 44%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rare-glow) 78%, transparent) 0 2deg, transparent 2deg 10deg);
  filter: blur(.2px) drop-shadow(0 0 26px var(--rare-glow));
  opacity: 0;
  transform: translate(-50%, -50%) scale(.24);
  pointer-events: none;
  animation: recruitBurstBloom 2.15s cubic-bezier(.12, .78, .18, 1) .55s both;
}

.summon-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  background: url("../assets/ui/recruit/recruit_summon_gate_ornate_strip_v3_webp_q58.webp?v=1688") 0 0 / 3600% 100% no-repeat;
  filter: drop-shadow(0 0 14px rgba(255, 220, 105, .78)) drop-shadow(0 0 28px rgba(255, 180, 54, .32));
  animation:
    recruitOrnateGateFrames 2.75s steps(35) both,
    summonRingSpinSmooth 3.05s cubic-bezier(.13, .76, .25, 1) both;
}

.summon-ring.ring-soft {
  width: 365px;
  height: 365px;
  background:
    radial-gradient(circle, rgba(255, 229, 124, .24), transparent 42%),
    conic-gradient(from 180deg, transparent, rgba(255, 227, 110, .46), transparent 42%, rgba(255, 80, 46, .18), transparent 78%);
  filter: blur(.2px) drop-shadow(0 0 24px rgba(255, 191, 68, .48));
  animation: summonRingHalo 3.45s ease-out .05s both;
}

.draw-result-panel {
  position: relative;
  z-index: 30;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translateY(2px);
  animation: recruitPanelSettle .72s ease-out 2.55s both;
}

.draw-result-panel > b {
  display: block;
  padding: 2px 12px;
  border: 1px solid rgba(232, 188, 88, .62);
  border-radius: 999px;
  background: rgba(35, 18, 10, .58);
  color: #ffe395;
  font-size: 10px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .95);
  animation: drawTitlePop .45s ease-out .28s both;
}

.draw-card-group {
  position: relative;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 300px;
  height: 150px;
}

.draw-card-group::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  background: url("../assets/ui/recruit/recruit_summon_gate_ornate_strip_v3_webp_q58.webp?v=1688") 0 0 / 3600% 100% no-repeat;
  filter: drop-shadow(0 0 18px rgba(255, 203, 74, .72)) drop-shadow(0 0 28px rgba(255, 106, 42, .22));
  transform: translate(-50%, -50%) scale(.38) rotate(0deg);
  opacity: 0;
  pointer-events: none;
  animation:
    recruitOrnateGateFrames 2.85s steps(35) .16s both,
    recruitSummonGate 3.25s ease-out .16s both;
}

.recruit-reveal.layout-applied .draw-result-panel {
  position: absolute;
  inset: 0;
  display: block;
  transform: none;
}

.recruit-reveal.layout-applied .draw-result-panel > b {
  position: absolute;
  left: 50%;
  top: 82px;
  transform: translate(-50%, -50%);
}

.recruit-reveal.layout-applied .draw-result-panel > b.draw-result-title-hidden {
  display: none;
}

.recruit-reveal.layout-applied .draw-card-group {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.recruit-reveal.layout-applied .draw-card-group::before {
  left: 50%;
  top: 48%;
  width: 320px;
  height: 320px;
}

.recruit-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.recruit-spark {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5bc, #ffd15a 58%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(255, 212, 83, .9));
  opacity: 0;
  animation: recruitSparkFly 2.4s cubic-bezier(.12, .72, .18, 1) both;
  animation-delay: var(--spark-delay, .36s);
  --spark-x: 0px;
  --spark-y: 0px;
  --spark-scale: 1;
}

.spark-1 { --spark-x: -132px; --spark-y: -84px; --spark-scale: 1.1; --spark-delay: .34s; }
.spark-2 { --spark-x: -92px; --spark-y: 56px; --spark-scale: .9; --spark-delay: .46s; }
.spark-3 { --spark-x: 118px; --spark-y: -72px; --spark-scale: 1.2; --spark-delay: .4s; }
.spark-4 { --spark-x: 146px; --spark-y: 42px; --spark-scale: .9; --spark-delay: .58s; }
.spark-5 { --spark-x: -34px; --spark-y: -118px; --spark-scale: 1.1; --spark-delay: .62s; }
.spark-6 { --spark-x: 36px; --spark-y: 118px; --spark-scale: .8; --spark-delay: .72s; }
.spark-7 { --spark-x: -164px; --spark-y: 8px; --spark-scale: 1; --spark-delay: .82s; }
.spark-8 { --spark-x: 164px; --spark-y: -8px; --spark-scale: 1; --spark-delay: .86s; }
.spark-9 { --spark-x: -112px; --spark-y: -128px; --spark-scale: .7; --spark-delay: .92s; }
.spark-10 { --spark-x: 98px; --spark-y: 124px; --spark-scale: .8; --spark-delay: .98s; }
.spark-11 { --spark-x: -16px; --spark-y: 152px; --spark-scale: .65; --spark-delay: 1.08s; }
.spark-12 { --spark-x: 20px; --spark-y: -152px; --spark-scale: .7; --spark-delay: 1.1s; }
.spark-13 { --spark-x: -186px; --spark-y: -46px; --spark-scale: .75; --spark-delay: 1.18s; }
.spark-14 { --spark-x: 188px; --spark-y: 50px; --spark-scale: .7; --spark-delay: 1.24s; }
.spark-15 { --spark-x: -70px; --spark-y: 136px; --spark-scale: .6; --spark-delay: 1.3s; }
.spark-16 { --spark-x: 74px; --spark-y: -136px; --spark-scale: .6; --spark-delay: 1.36s; }
.spark-17 { --spark-x: -210px; --spark-y: 88px; --spark-scale: .55; --spark-delay: 1.44s; }
.spark-18 { --spark-x: 210px; --spark-y: -88px; --spark-scale: .55; --spark-delay: 1.48s; }
.spark-19 { --spark-x: -238px; --spark-y: -12px; --spark-scale: .5; --spark-delay: 1.54s; }
.spark-20 { --spark-x: 238px; --spark-y: 12px; --spark-scale: .5; --spark-delay: 1.58s; }
.spark-21 { --spark-x: -142px; --spark-y: 168px; --spark-scale: .58; --spark-delay: 1.62s; }
.spark-22 { --spark-x: 142px; --spark-y: -168px; --spark-scale: .58; --spark-delay: 1.66s; }
.spark-23 { --spark-x: -52px; --spark-y: -190px; --spark-scale: .44; --spark-delay: 1.7s; }
.spark-24 { --spark-x: 58px; --spark-y: 190px; --spark-scale: .44; --spark-delay: 1.74s; }
.spark-25 { --spark-x: -250px; --spark-y: 124px; --spark-scale: .42; --spark-delay: 1.78s; }
.spark-26 { --spark-x: 250px; --spark-y: -124px; --spark-scale: .42; --spark-delay: 1.82s; }
.spark-27 { --spark-x: -6px; --spark-y: -214px; --spark-scale: .5; --spark-delay: 1.88s; }
.spark-28 { --spark-x: 6px; --spark-y: 214px; --spark-scale: .5; --spark-delay: 1.92s; }

.draw-result-card {
  position: relative;
  z-index: 35;
  --card-x: 0px;
  --card-r: 0deg;
  --card-delay: 1.24s;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  place-items: center;
  gap: 5px;
  width: 102px;
  height: 138px;
  padding: 15% 13% 13%;
  border: 0;
  border-radius: 0;
  background: url("../assets/ui/recruit/recruit_result_card_frame_v1_webp_q82.webp?v=1671") center / 100% 100% no-repeat;
  color: #fff0c8;
  font-style: normal;
  box-shadow: 0 0 0 rgba(255, 214, 98, 0);
  text-align: center;
  opacity: 0;
  animation: drawFramePop 1.42s cubic-bezier(.16, .86, .22, 1.12) both;
  animation-delay: var(--card-delay);
}

.draw-result-card.rarity-sss {
  filter: drop-shadow(0 0 10px rgba(255, 218, 82, .68)) drop-shadow(0 0 18px rgba(255, 94, 54, .26));
}

.draw-result-card.rarity-ssr {
  filter: drop-shadow(0 0 9px rgba(191, 132, 255, .62)) drop-shadow(0 0 14px rgba(255, 218, 82, .28));
}

.draw-result-card.rarity-sr {
  filter: drop-shadow(0 0 8px rgba(116, 218, 178, .54));
}

.recruit-reveal.layout-applied .draw-result-card {
  position: absolute;
  left: var(--rrx);
  top: var(--rry);
  width: var(--rrw);
  height: var(--rrh);
  transform: translate(-50%, -50%);
  animation: drawFramePopFixed 1.42s cubic-bezier(.16, .86, .22, 1.12) both;
  animation-delay: var(--card-delay);
}

.recruit-reveal.layout-applied .draw-global-result-part {
  position: absolute;
  left: var(--rgx);
  top: var(--rgy);
  z-index: 52;
  width: var(--rgw);
  height: var(--rgh);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-align: center;
  font-style: normal;
  line-height: 1.05;
  pointer-events: none;
  opacity: 0;
  animation: recruitResultContentIn .42s ease-out 1.98s both;
}

.recruit-reveal.layout-applied .draw-global-image {
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .46)) drop-shadow(0 0 6px rgba(255, 213, 99, .32));
}

.recruit-reveal.layout-applied .draw-global-rarity {
  color: #e7c46a;
  font-size: var(--rgs);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .36);
}

.recruit-reveal.layout-applied .draw-global-name {
  color: #fff0bb;
  font-size: var(--rgs);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .36);
}

.recruit-reveal.layout-applied .draw-global-label {
  color: #d6b46c;
  font-size: var(--rgs);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96);
}

.result-live-edit .draw-global-result-part {
  pointer-events: auto !important;
  cursor: move;
  outline: 1px dashed rgba(255, 222, 116, .9);
  background: rgba(40, 24, 8, .1);
}

.result-live-edit .draw-global-result-part.is-live-selected {
  outline: 2px solid #5be5ff;
  box-shadow: 0 0 12px rgba(91, 229, 255, .45);
}

.result-live-editor-panel {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 180;
  display: grid;
  grid-template-columns: 46px 58px;
  gap: 4px;
  width: 160px;
  padding: 7px;
  border: 1px solid rgba(224, 178, 91, .65);
  background: rgba(20, 12, 6, .88);
  color: #ffe3a2;
  font-size: 10px;
  cursor: default;
}

.result-live-editor-panel b,
.result-live-editor-panel [data-live-field="key"],
.result-live-editor-panel button {
  grid-column: 1 / -1;
}

.result-live-editor-panel b {
  cursor: move;
  user-select: none;
}

.result-live-editor-panel label {
  display: contents;
}

.result-live-editor-panel input {
  min-width: 0;
  height: 20px;
  border: 1px solid rgba(224, 178, 91, .42);
  background: rgba(0, 0, 0, .35);
  color: #ffe3a2;
  font: inherit;
}

.result-live-editor-panel button {
  height: 24px;
  border: 1px solid rgba(224, 178, 91, .72);
  background: linear-gradient(180deg, #8b5b25, #40220f);
  color: #ffe5a7;
  font: inherit;
}

.recruit-reveal.layout-applied .draw-result-card .draw-result-rarity,
.recruit-reveal.layout-applied .draw-result-card .draw-reward-image,
.recruit-reveal.layout-applied .draw-result-card .draw-reward-fallback,
.recruit-reveal.layout-applied .draw-result-card .draw-result-name,
.recruit-reveal.layout-applied .draw-result-card .draw-result-label {
  position: absolute;
  left: var(--part-x);
  top: var(--part-y);
  width: var(--part-w);
  height: var(--part-h);
  font-size: var(--part-size);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
  margin: 0;
  text-align: center;
}

.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-rarity,
.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-name,
.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-label {
  font-size: var(--part-size);
}

.draw-result-card::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  z-index: 3;
  background: url("../assets/ui/recruit/recruit_card_flash_strip_v2.png") 0 0 / 2400% 100% no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    recruitCardFlashFrames 1.05s steps(23) calc(var(--card-delay) + .12s) both,
    recruitCardFlashFade 1.1s ease-out calc(var(--card-delay) + .12s) both;
  pointer-events: none;
}

.draw-result-card::after {
  content: "";
  position: absolute;
  inset: 10% 8%;
  z-index: 5;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--rare-core) 40%, transparent), transparent 38%),
    linear-gradient(100deg, transparent 0 38%, rgba(255, 247, 178, .72) 50%, transparent 62% 100%);
  transform: translateX(-58%);
  animation: drawCardSweep 1.2s ease-out calc(var(--card-delay) + .26s) both;
  pointer-events: none;
}

.draw-result-card.rarity-sss::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 226, 88, .56), transparent 42%),
    linear-gradient(100deg, transparent 0 34%, rgba(255, 253, 210, .88) 49%, rgba(255, 80, 46, .28) 56%, transparent 66% 100%);
}

.draw-result-card.rarity-ssr::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(202, 154, 255, .45), transparent 42%),
    linear-gradient(100deg, transparent 0 36%, rgba(246, 224, 255, .78) 50%, transparent 64% 100%);
}

.draw-card-back {
  position: absolute;
  inset: 8% 7%;
  z-index: 4;
  display: block;
  background: url("../assets/ui/recruit/recruit_card_back_v1.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 8px rgba(255, 210, 86, .42));
  transform-origin: center;
  animation: recruitCardBackFlip 1.16s cubic-bezier(.16, .86, .22, 1.08) var(--card-delay) both;
  pointer-events: none;
}

.draw-reward-image {
  position: relative;
  z-index: 7;
  display: block;
  width: min(66%, 72px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 0 9px rgba(255, 213, 99, .32);
}

.draw-reward-image.reward-general {
  width: min(78%, 82px);
  height: 58px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .46)) drop-shadow(0 0 6px rgba(255, 213, 99, .32));
}

.draw-reward-image.reward-shard,
.draw-reward-image.reward-item {
  padding: 3px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 231, 144, .14), transparent 70%);
}

.count-5 .draw-reward-image {
  width: min(64%, 42px);
  border-radius: 7px;
}

.count-5 .draw-reward-image.reward-general {
  width: min(82%, 48px);
  height: 38px;
  border-radius: 0;
}

.draw-reward-fallback {
  position: relative;
  z-index: 7;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 120, .8), transparent 70%);
}

.count-2 .draw-result-card,
.count-3 .draw-result-card,
.count-4 .draw-result-card,
.count-5 .draw-result-card {
  position: absolute;
}

.count-2 .card-1 { --card-x: -48px; --card-r: -5deg; --card-delay: 1.24s; }
.count-2 .card-2 { --card-x: 48px; --card-r: 5deg; --card-delay: 1.58s; }
.count-3 .card-1 { --card-x: -88px; --card-r: -8deg; --card-delay: 1.2s; }
.count-3 .card-2 { --card-x: 0px; --card-delay: 1.52s; }
.count-3 .card-3 { --card-x: 88px; --card-r: 8deg; --card-delay: 1.84s; }
.count-4 .card-1 { --card-x: -108px; --card-r: -10deg; --card-delay: 1.18s; }
.count-4 .card-2 { --card-x: -36px; --card-r: -3deg; --card-delay: 1.48s; }
.count-4 .card-3 { --card-x: 36px; --card-r: 3deg; --card-delay: 1.78s; }
.count-4 .card-4 { --card-x: 108px; --card-r: 10deg; --card-delay: 2.08s; }
.count-5 .draw-card-group {
  width: 340px;
}

.count-5 .draw-result-card {
  width: 72px;
  height: 108px;
  gap: 3px;
}

.count-5 .card-1 { --card-x: -128px; --card-r: -12deg; --card-delay: 1.18s; }
.count-5 .card-2 { --card-x: -64px; --card-r: -6deg; --card-delay: 1.52s; }
.count-5 .card-3 { --card-x: 0px; --card-delay: 1.86s; }
.count-5 .card-4 { --card-x: 64px; --card-r: 6deg; --card-delay: 2.2s; }
.count-5 .card-5 { --card-x: 128px; --card-r: 12deg; --card-delay: 2.54s; }

.draw-result-card span,
.draw-result-card strong,
.draw-result-card small {
  position: relative;
  z-index: 8;
  opacity: 0;
  animation: recruitResultContentIn .42s ease-out calc(var(--card-delay) + .74s) both;
}

.draw-result-card .draw-reward-image,
.draw-result-card .draw-reward-fallback {
  z-index: 7;
  opacity: 0;
  animation: recruitResultContentIn .42s ease-out calc(var(--card-delay) + .74s) both;
}

.draw-result-card span {
  color: #e7c46a;
  font-size: 10px;
  font-weight: 800;
}

.draw-result-card strong {
  color: #fff0bb;
  font-size: 14px;
  line-height: 1.1;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 186, 72, .36);
}

.draw-result-card small {
  color: #d6b46c;
  font-size: 8px;
  white-space: nowrap;
}

.count-5 .draw-result-card strong {
  font-size: 11px;
}

.recruit-reveal.layout-applied .draw-result-card strong {
  font-size: var(--part-size);
}

.count-5 .draw-result-card span {
  font-size: 8px;
}

.recruit-reveal.layout-applied .draw-result-card span,
.recruit-reveal.layout-applied .draw-result-card small {
  font-size: var(--part-size);
}

.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-rarity,
.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-name,
.recruit-reveal.layout-applied.count-5 .draw-result-card .draw-result-label {
  font-size: var(--part-size);
}

.is-empty .draw-result-card {
  width: 132px;
  height: 126px;
}

.is-empty .draw-result-card strong {
  font-size: 13px;
}

.recruit-reveal em {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 246, 176, .5), transparent 22%),
    linear-gradient(100deg, transparent 0 35%, rgba(255, 237, 158, .42) 48%, transparent 62%),
    linear-gradient(180deg, transparent, rgba(255, 223, 91, .18), transparent);
  animation: summonFlash 2.25s ease-out .12s both;
}

.recruit-reveal.is-reveal-skipped::after,
.recruit-reveal.is-reveal-skipped .recruit-curtain,
.recruit-reveal.is-reveal-skipped .recruit-burst,
.recruit-reveal.is-reveal-skipped .summon-ring,
.recruit-reveal.is-reveal-skipped .recruit-particles,
.recruit-reveal.is-reveal-skipped .draw-card-group::before,
.recruit-reveal.is-reveal-skipped .draw-result-card::before,
.recruit-reveal.is-reveal-skipped .draw-result-card::after,
.recruit-reveal.is-reveal-skipped .draw-card-back,
.recruit-reveal.is-reveal-skipped em,
.recruit-reveal.is-reveal-skipped .artifact-forge-backdrop,
.recruit-reveal.is-reveal-skipped .artifact-forge-anvil,
.recruit-reveal.is-reveal-skipped .artifact-forge-ring,
.recruit-reveal.is-reveal-skipped .artifact-forge-flare,
.recruit-reveal.is-reveal-skipped .artifact-forge-streams {
  animation: recruitSkipLayerFade .18s ease-out both !important;
  pointer-events: none !important;
}

.recruit-reveal.is-reveal-skipped .draw-result-panel,
.recruit-reveal.is-reveal-skipped .draw-result-panel > b,
.recruit-reveal.is-reveal-skipped .draw-result-card,
.recruit-reveal.is-reveal-skipped .draw-result-card span,
.recruit-reveal.is-reveal-skipped .draw-result-card strong,
.recruit-reveal.is-reveal-skipped .draw-result-card small,
.recruit-reveal.is-reveal-skipped .draw-result-card .draw-reward-image,
.recruit-reveal.is-reveal-skipped .draw-result-card .draw-reward-fallback,
.recruit-reveal.is-reveal-skipped .draw-global-result-part,
.recruit-reveal.is-reveal-skipped .artifact-result-label,
.recruit-reveal.is-reveal-skipped .artifact-result-icon,
.recruit-reveal.is-reveal-skipped .recruit-dismiss-hint {
  opacity: 1 !important;
  animation: none !important;
}

.recruit-reveal.is-reveal-skipped:not(.layout-applied) .draw-result-card {
  transform: translate(var(--card-x, 0px), 0) perspective(420px) rotateZ(var(--card-r, 0deg)) rotateY(0deg) scale(1);
}

.recruit-reveal.is-reveal-skipped .draw-result-card .draw-reward-image,
.recruit-reveal.is-reveal-skipped .draw-result-card .draw-reward-fallback {
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .46)) drop-shadow(0 0 6px rgba(255, 213, 99, .32));
}

.recruit-reveal.is-reveal-skipped .artifact-result-icon {
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(226, 76, 255, .32));
}

@keyframes recruitSkipLayerFade {
  to { opacity: 0; }
}

.artifact-reveal {
  --rare-glow: rgba(210, 56, 255, .78);
  --rare-core: rgba(255, 78, 92, .92);
}

.artifact-reveal::before {
  background:
    radial-gradient(ellipse at 50% 56%, rgba(118, 18, 94, .46), transparent 34%),
    radial-gradient(ellipse at 50% 63%, rgba(255, 58, 38, .28), transparent 30%),
    linear-gradient(180deg, rgba(10, 4, 16, .9), rgba(32, 8, 26, .58) 48%, rgba(4, 2, 9, .9));
  animation-duration: 3.2s;
}

.artifact-reveal::after {
  background:
    linear-gradient(115deg, transparent 0 32%, rgba(255, 61, 96, .5) 43%, rgba(218, 74, 255, .5) 51%, transparent 64% 100%),
    linear-gradient(65deg, transparent 0 37%, rgba(255, 152, 52, .28) 49%, transparent 62% 100%);
  animation-duration: 3.2s;
}

.artifact-forge-backdrop,
.artifact-forge-anvil,
.artifact-forge-ring,
.artifact-forge-flare,
.artifact-forge-streams {
  position: absolute;
  left: 50%;
  top: 48%;
  pointer-events: none;
}

.artifact-forge-backdrop {
  z-index: 1;
  width: 330px;
  height: 230px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(255, 46, 65, .44) 45% 47%, transparent 49%),
    linear-gradient(45deg, transparent 0 42%, rgba(183, 62, 255, .36) 45% 47%, transparent 50%),
    radial-gradient(ellipse at 50% 66%, rgba(255, 72, 28, .28), transparent 46%);
  filter: blur(.5px) drop-shadow(0 0 18px rgba(202, 55, 255, .32));
  transform: translate(-50%, -50%) scale(.6) rotate(45deg);
  opacity: 0;
  animation: artifactForgeBackdrop 4.2s ease-out .15s both;
}

.artifact-forge-backdrop::before,
.artifact-forge-backdrop::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(224, 72, 255, .38);
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 72, 88, .55) 19% 21%, transparent 22% 48%, rgba(224, 72, 255, .48) 49% 51%, transparent 52% 100%),
    linear-gradient(0deg, transparent 0 26%, rgba(255, 143, 48, .4) 27% 29%, transparent 30% 70%, rgba(224, 72, 255, .42) 71% 73%, transparent 74% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: .72;
}

.artifact-forge-backdrop::after {
  inset: 31%;
  opacity: .54;
  transform: rotate(45deg);
}

.artifact-forge-anvil {
  z-index: 3;
  width: 126px;
  height: 56px;
  border-radius: 50% 50% 36% 36%;
  background:
    linear-gradient(180deg, rgba(255, 225, 132, .62), rgba(106, 63, 31, .78)),
    radial-gradient(ellipse at 50% 0%, rgba(255, 247, 190, .78), transparent 54%);
  box-shadow: 0 0 28px rgba(255, 160, 58, .48), inset 0 2px 0 rgba(255, 242, 170, .34);
  transform: translate(-50%, 44px) scale(.2);
  opacity: 0;
  animation: artifactAnvilRise 1.4s cubic-bezier(.16, .86, .2, 1.1) .42s both;
}

.artifact-forge-ring {
  z-index: 4;
  width: 238px;
  height: 238px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 66, 84, .72) 49% 51%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(208, 75, 255, .68) 49% 51%, transparent 53%),
    linear-gradient(45deg, transparent 46%, rgba(255, 151, 55, .52) 49% 51%, transparent 54%),
    linear-gradient(135deg, transparent 46%, rgba(178, 45, 255, .46) 49% 51%, transparent 54%);
  border: 1px solid rgba(255, 78, 102, .52);
  box-shadow: inset 0 0 22px rgba(159, 44, 255, .22);
  filter: drop-shadow(0 0 14px rgba(255, 67, 90, .72)) drop-shadow(0 0 28px rgba(177, 54, 255, .36));
  transform: translate(-50%, -50%) scale(.32) rotate(45deg);
  opacity: 0;
  animation: artifactDiamondForge 4.4s cubic-bezier(.13, .78, .2, 1) .55s both;
}

.artifact-forge-ring.ring-inner {
  z-index: 5;
  width: 150px;
  height: 150px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 54, 72, .68) 49% 51%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(222, 68, 255, .64) 49% 51%, transparent 54%);
  animation: artifactDiamondForgeReverse 4.1s cubic-bezier(.13, .78, .2, 1) .72s both;
}

.artifact-forge-ring::before,
.artifact-forge-ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 70, 92, .8) 13% 15%, transparent 16% 32%, rgba(222, 72, 255, .72) 33% 35%, transparent 36% 64%, rgba(255, 138, 50, .66) 65% 67%, transparent 68% 100%),
    linear-gradient(0deg, transparent 0 16%, rgba(222, 72, 255, .72) 17% 19%, transparent 20% 80%, rgba(255, 70, 92, .74) 81% 83%, transparent 84% 100%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: .68;
}

.artifact-forge-ring::after {
  inset: 23%;
  opacity: .48;
  transform: rotate(45deg);
}

.artifact-forge-flare {
  z-index: 8;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 235, 230, .86), rgba(255, 54, 74, .55) 12%, rgba(198, 68, 255, .24) 30%, transparent 58%),
    linear-gradient(90deg, transparent 0 42%, rgba(255, 72, 88, .72) 48%, transparent 56% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(217, 70, 255, .62) 48%, transparent 56% 100%);
  filter: blur(.2px) drop-shadow(0 0 34px rgba(225, 56, 255, .56));
  transform: translate(-50%, -50%) scale(.12);
  opacity: 0;
  animation: artifactForgeFlash 4.6s ease-out .85s both;
}

.artifact-forge-streams {
  z-index: 7;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
}

.artifact-forge-streams i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 160px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(211, 69, 255, .78), rgba(255, 66, 78, .72), transparent);
  filter: blur(.3px) drop-shadow(0 0 10px rgba(214, 69, 255, .72));
  opacity: 0;
  transform-origin: 50% 100%;
  animation: artifactSoulStream 3.8s ease-out .75s both;
}

.artifact-forge-streams i:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.artifact-forge-streams i:nth-child(2) { transform: translate(-50%, -100%) rotate(72deg); animation-delay: .9s; }
.artifact-forge-streams i:nth-child(3) { transform: translate(-50%, -100%) rotate(144deg); animation-delay: 1.05s; }
.artifact-forge-streams i:nth-child(4) { transform: translate(-50%, -100%) rotate(216deg); animation-delay: 1.2s; }

.artifact-reveal .summon-ring,
.artifact-reveal .recruit-curtain,
.artifact-reveal .recruit-burst {
  display: none;
}

.artifact-reveal .draw-card-group::before {
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255, 63, 82, .5) 49%, transparent 54% 100%),
    linear-gradient(0deg, transparent 0 44%, rgba(213, 72, 255, .45) 49%, transparent 54% 100%),
    linear-gradient(45deg, transparent 0 45%, rgba(255, 138, 51, .34) 50%, transparent 55% 100%);
  border-radius: 8px;
  animation: artifactResultSigil 3.4s ease-out .38s both;
}

.artifact-reveal .draw-result-card {
  background:
    linear-gradient(180deg, rgba(83, 49, 22, .86), rgba(25, 20, 20, .92)),
    radial-gradient(circle at 50% 12%, rgba(255, 225, 132, .4), transparent 46%);
  border: 1px solid rgba(235, 190, 82, .72);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 170, .18), 0 0 18px rgba(255, 177, 58, .22);
}

.artifact-reveal .draw-reward-fallback {
  display: none;
}

.artifact-result-labels {
  position: absolute;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  transform: none;
  pointer-events: none;
}

.artifact-result-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 64px);
  display: grid;
  grid-template-rows: 9px 13px 9px;
  align-items: center;
  justify-items: center;
  width: 72px;
  height: 32px;
  margin: 0;
  transform: translateX(calc(-50% + var(--label-x, 0px))) rotate(var(--label-r, 0deg));
  transform-origin: center 10%;
  text-align: center;
  line-height: 1.05;
  opacity: 0;
  animation: artifactResultLabelIn .42s ease-out calc(var(--label-delay, 1.9s)) both;
}

.artifact-result-label b,
.artifact-result-label strong,
.artifact-result-label small {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(255, 72, 138, .32);
}

.artifact-result-label b {
  color: #f5c56d;
  font-size: var(--alliance-size, 8px);
  font-weight: 800;
}

.artifact-result-label strong {
  color: #fff0bb;
  font-size: 10px;
  font-weight: 800;
}

.artifact-result-label small {
  color: #d7a7ff;
  font-size: 7px;
}

.artifact-reveal.count-1 .artifact-result-label.card-1,
.artifact-reveal.count-2 .artifact-result-label.card-1,
.artifact-reveal.count-3 .artifact-result-label.card-1,
.artifact-reveal.count-4 .artifact-result-label.card-1,
.artifact-reveal.count-5 .artifact-result-label.card-1 { --label-x: -128px; --label-r: -12deg; --label-delay: 1.92s; }

.artifact-reveal.count-2 .artifact-result-label.card-1 { --label-x: -48px; --label-r: -5deg; }
.artifact-reveal.count-2 .artifact-result-label.card-2 { --label-x: 48px; --label-r: 5deg; --label-delay: 2.16s; }

.artifact-reveal.count-3 .artifact-result-label.card-1 { --label-x: -88px; --label-r: -8deg; }
.artifact-reveal.count-3 .artifact-result-label.card-2 { --label-x: 0px; --label-delay: 2.16s; }
.artifact-reveal.count-3 .artifact-result-label.card-3 { --label-x: 88px; --label-r: 8deg; --label-delay: 2.4s; }

.artifact-reveal.count-4 .artifact-result-label.card-1 { --label-x: -108px; --label-r: -10deg; }
.artifact-reveal.count-4 .artifact-result-label.card-2 { --label-x: -36px; --label-r: -3deg; --label-delay: 2.16s; }
.artifact-reveal.count-4 .artifact-result-label.card-3 { --label-x: 36px; --label-r: 3deg; --label-delay: 2.4s; }
.artifact-reveal.count-4 .artifact-result-label.card-4 { --label-x: 108px; --label-r: 10deg; --label-delay: 2.64s; }

.artifact-reveal.count-5 .artifact-result-label.card-1 { --label-x: -128px; --label-r: -12deg; }
.artifact-reveal.count-5 .artifact-result-label.card-2 { --label-x: -64px; --label-r: -6deg; --label-delay: 2.16s; }
.artifact-reveal.count-5 .artifact-result-label.card-3 { --label-x: 0px; --label-delay: 2.4s; }
.artifact-reveal.count-5 .artifact-result-label.card-4 { --label-x: 64px; --label-r: 6deg; --label-delay: 2.64s; }
.artifact-reveal.count-5 .artifact-result-label.card-5 { --label-x: 128px; --label-r: 12deg; --label-delay: 2.88s; }

.artifact-reveal.count-1 .artifact-result-label.card-1 {
  --label-x: 0px;
  --label-r: 0deg;
  width: 102px;
  height: 38px;
  top: calc(50% + 70px);
}

.artifact-reveal.count-1 .artifact-result-label strong {
  font-size: 12px;
}

.artifact-reveal.count-1 .artifact-result-label b {
  font-size: 9px;
}

.artifact-reveal.count-1 .artifact-result-label small {
  font-size: 8px;
}

.artifact-reveal .draw-card-back {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 224, 112, .52), transparent 38%),
    linear-gradient(180deg, rgba(76, 45, 23, .95), rgba(19, 24, 30, .96));
  border: 1px solid rgba(255, 216, 105, .58);
  border-radius: 8px;
}

.artifact-result-icon {
  position: absolute;
  left: 50%;
  top: 43%;
  z-index: 11;
  width: 54%;
  height: 42%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(226, 76, 255, .32));
  opacity: 0;
  animation: artifactResultIconIn .5s ease-out calc(var(--card-delay) + .78s) both;
}

.artifact-reveal.count-5 .artifact-result-icon {
  width: 50%;
  height: 36%;
  top: 42%;
}

@keyframes artifactForgeBackdrop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(45deg); }
  35% { opacity: .86; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  100% { opacity: .42; transform: translate(-50%, -50%) scale(1.08) rotate(45deg); }
}

@keyframes artifactAnvilRise {
  0% { opacity: 0; transform: translate(-50%, 84px) scale(.2); }
  70% { opacity: 1; transform: translate(-50%, 44px) scale(1.05); }
  100% { opacity: .82; transform: translate(-50%, 44px) scale(1); }
}

@keyframes artifactDiamondForge {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.22) rotate(-25deg) skew(-6deg); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg) skew(0deg); }
  100% { opacity: .34; transform: translate(-50%, -50%) scale(1.16) rotate(95deg) skew(5deg); }
}

@keyframes artifactDiamondForgeReverse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(105deg) skew(5deg); }
  42% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(45deg) skew(0deg); }
  100% { opacity: .24; transform: translate(-50%, -50%) scale(1.22) rotate(-15deg) skew(-6deg); }
}

@keyframes artifactForgeFlash {
  0%, 26% { opacity: 0; transform: translate(-50%, -50%) scale(.12); }
  42% { opacity: .98; transform: translate(-50%, -50%) scale(.78); }
  58% { opacity: .46; transform: translate(-50%, -50%) scale(1.16); }
  100% { opacity: .12; transform: translate(-50%, -50%) scale(1.32); }
}

@keyframes artifactSoulStream {
  0% { opacity: 0; transform: translate(-50%, -100%) rotate(var(--stream-r, 0deg)) scaleY(.18); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -100%) rotate(calc(var(--stream-r, 0deg) + 180deg)) scaleY(1.15); }
}

@keyframes artifactResultSigil {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.24) rotate(45deg) skew(-10deg); }
  45% { opacity: .82; transform: translate(-50%, -50%) scale(.72) rotate(45deg) skew(0deg); }
  100% { opacity: .24; transform: translate(-50%, -50%) scale(.98) rotate(45deg) skew(8deg); }
}

@keyframes artifactResultLabelIn {
  0% { opacity: 0; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes artifactResultIconIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.78); filter: brightness(1.8) drop-shadow(0 0 12px rgba(226, 76, 255, .58)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: brightness(1) drop-shadow(0 5px 7px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(226, 76, 255, .32)); }
}

.recruit-dismiss-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 5;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(18, 10, 8, .46);
  color: rgba(255, 231, 156, .86);
  font-size: 9px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  opacity: 0;
  animation: recruitHintIn .45s ease-out 3.2s both, recruitHintPulse 1.4s ease-in-out 3.8s infinite;
  pointer-events: none;
}

@keyframes recruitFxFloat {
  0%, 100% { transform: translateY(0) scale(.98); filter: brightness(.98) drop-shadow(0 2px 5px rgba(255, 202, 86, .26)); }
  50% { transform: translateY(-3px) scale(1.03); filter: brightness(1.12) drop-shadow(0 3px 8px rgba(204, 150, 36, .46)); }
}

@keyframes recruitPoolFrameBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .36)) brightness(1);
  }
  50% {
    transform: translateY(-2px) scale(1.018);
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .42)) brightness(1.12);
  }
}

@keyframes recruitYuanbaoMiniPulse {
  0%, 100% { transform: translateY(0) scale(.92) rotate(-8deg); filter: drop-shadow(0 0 4px rgba(255, 218, 82, .54)); }
  50% { transform: translateY(-1px) scale(1.12) rotate(8deg); filter: drop-shadow(0 0 8px rgba(255, 238, 126, .9)); }
}

@keyframes recruitHourglassIconTurn {
  0%, 42% { transform: rotate(0deg) scale(1); }
  52%, 100% { transform: rotate(180deg) scale(1.03); }
}

@keyframes recruitFxShine {
  0%, 100% { opacity: 0; transform: translateX(-55%); }
  42% { opacity: .8; }
  70% { opacity: 0; transform: translateX(55%); }
}

@keyframes recruitSigilSpin {
  from { transform: rotate(0deg) scale(.96); }
  to { transform: rotate(360deg) scale(.96); }
}

@keyframes recruitFxBurst {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.18); filter: brightness(1.55); }
}

@keyframes recruitCardSweep {
  0% { opacity: 0; transform: translateX(-54%); }
  28% { opacity: .9; }
  100% { opacity: 0; transform: translateX(54%); }
}

@keyframes recruitSummonBurst {
  0% { opacity: 0; transform: scale(.72) rotate(0deg); }
  35% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.22) rotate(38deg); }
}

@keyframes recruitGateFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes recruitBeamFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes recruitCardFlashFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes recruitOrnateGateFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes recruitSparkFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.24);
  }
  14% {
    opacity: 1;
  }
  72% {
    opacity: .72;
    transform: translate(calc(-50% + var(--spark-x) * .82), calc(-50% + var(--spark-y) * .82)) scale(var(--spark-scale));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.12);
  }
}

@keyframes recruitCurtainFall {
  0% {
    opacity: 0;
    transform: translateY(-42px) rotate(var(--curtain-r, 0deg)) scaleY(.62);
  }
  24% {
    opacity: .72;
  }
  76% {
    opacity: .42;
    transform: translateY(6px) rotate(var(--curtain-r, 0deg)) scaleY(1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(26px) rotate(var(--curtain-r, 0deg)) scaleY(1.16);
  }
}

@keyframes recruitBurstBloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18) rotate(0deg);
  }
  20% {
    opacity: .92;
  }
  56% {
    opacity: .5;
    transform: translate(-50%, -50%) scale(1.05) rotate(112deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.32) rotate(220deg);
  }
}

@keyframes summonRingSpinSmooth {
  0% { opacity: 0; transform: scale(.48) rotate(0deg); filter: brightness(1.45) drop-shadow(0 0 20px rgba(255, 220, 105, .7)); }
  22% { opacity: .98; }
  68% { opacity: .88; transform: scale(1.12) rotate(210deg); }
  100% { opacity: 0; transform: scale(1.32) rotate(330deg); filter: brightness(1.05) drop-shadow(0 0 8px rgba(255, 220, 105, .34)); }
}

@keyframes summonRingHalo {
  0% { opacity: 0; transform: scale(.44) rotate(0deg); }
  18% { opacity: .82; }
  78% { opacity: .36; transform: scale(1.08) rotate(-180deg); }
  100% { opacity: 0; transform: scale(1.24) rotate(-260deg); }
}

@keyframes recruitBeamPulse {
  0% { filter: blur(2px) brightness(1.1); }
  36% { filter: blur(.8px) brightness(1.8); }
  100% { filter: blur(3px) brightness(1); }
}

@keyframes recruitPanelSettle {
  0% { filter: brightness(1.26); }
  100% { filter: brightness(1); }
}

@keyframes recruitHintIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
  100% { opacity: .9; transform: translateX(-50%) translateY(0); }
}

@keyframes recruitHintPulse {
  0%, 100% { opacity: .62; }
  50% { opacity: .94; }
}

@keyframes recruitCardFlashFade {
  0% { opacity: 0; transform: scale(.86); }
  18% { opacity: .95; transform: scale(.98); }
  62% { opacity: .58; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes recruitCardBackFlip {
  0% {
    opacity: 0;
    transform: perspective(520px) rotateY(0deg) scale(.72);
    filter: brightness(1.8) drop-shadow(0 0 10px rgba(255, 224, 104, .58));
  }
  18% {
    opacity: 1;
    transform: perspective(520px) rotateY(0deg) scale(1.02);
  }
  54% {
    opacity: 1;
    transform: perspective(520px) rotateY(84deg) scale(1.04);
    filter: brightness(2.2) drop-shadow(0 0 14px rgba(255, 224, 104, .78));
  }
  64% {
    opacity: 0;
    transform: perspective(520px) rotateY(100deg) scale(1.04);
  }
  100% {
    opacity: 0;
    transform: perspective(520px) rotateY(100deg) scale(1.04);
  }
}

@keyframes recruitResultContentIn {
  0% { opacity: 0; transform: translateY(5px) scale(.92); filter: brightness(1.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes recruitBeamSweep {
  0% { opacity: 0; transform: translate(-72%, -50%) rotate(-7deg) scale(.92); }
  22% { opacity: .95; }
  54% { opacity: .48; transform: translate(-50%, -50%) rotate(-7deg) scale(1.02); }
  100% { opacity: 0; transform: translate(-28%, -50%) rotate(-7deg) scale(1.12); }
}

@keyframes recruitSummonGate {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  28% { opacity: .9; transform: translate(-50%, -50%) scale(.74) rotate(70deg); }
  62% { opacity: .72; transform: translate(-50%, -50%) scale(1.08) rotate(175deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(260deg); }
}

@keyframes summonRingSpin {
  0% { opacity: 0; transform: scale(.52) rotate(0deg); }
  24% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.22) rotate(145deg); }
}

@keyframes recruitDarkStage {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: .98; }
}

@keyframes summonCardFlip {
  0% { opacity: 0; transform: translateX(var(--card-x)) perspective(420px) rotateZ(var(--card-r)) rotateY(86deg) scale(.72); filter: brightness(2); }
  48% { opacity: 1; transform: translateX(var(--card-x)) perspective(420px) rotateZ(var(--card-r)) rotateY(-10deg) scale(1.08); filter: brightness(1.55); }
  100% { opacity: 1; transform: translateX(var(--card-x)) perspective(420px) rotateZ(var(--card-r)) rotateY(0deg) scale(1); filter: brightness(1); }
}

@keyframes drawTitlePop {
  0% { opacity: 0; transform: translateY(8px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes drawFramePop {
  0% {
    opacity: 0;
    transform: translate(calc(var(--card-x) + var(--origin-x)), var(--origin-y)) perspective(420px) rotateZ(var(--card-r)) rotateY(72deg) scale(.52);
    filter: brightness(2.1);
  }
  46% {
    opacity: 1;
    transform: translate(var(--card-x), 0) perspective(420px) rotateZ(var(--card-r)) rotateY(-9deg) scale(1.08);
    filter: brightness(1.65);
  }
  100% {
    opacity: 1;
    transform: translate(var(--card-x), 0) perspective(420px) rotateZ(var(--card-r)) rotateY(0deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes drawFramePopFixed {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) perspective(420px) rotateY(80deg) scale(.42);
    filter: brightness(2.1);
  }
  32% {
    opacity: 0;
    transform: translate(-50%, -50%) perspective(420px) rotateY(64deg) scale(.48);
    filter: brightness(2.4);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(420px) rotateY(-9deg) scale(1.08);
    filter: brightness(1.65);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(420px) rotateY(0deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes drawCardSweep {
  0% { opacity: 0; transform: translateX(-58%); }
  36% { opacity: .86; }
  100% { opacity: 0; transform: translateX(58%); }
}

@keyframes summonFlash {
  0% { opacity: 0; transform: scale(.6); }
  25% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes recruitResultPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #5e472d;
  background:
    linear-gradient(135deg, rgba(67, 83, 55, .42), transparent 36%),
    linear-gradient(25deg, transparent 52%, rgba(58, 75, 96, .34)),
    #201811;
}

.world-map::before {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 210, 122, .08);
  transform: rotate(-9deg);
}

.world-route {
  position: absolute;
  height: 1px;
  transform-origin: 0 50%;
  background: rgba(255, 210, 122, .28);
}

.world-city {
  position: absolute;
  width: 14px;
  height: 14px;
  min-width: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #160f09;
  background: #b9553f;
  transform: translate(-50%, -50%);
}

.world-city.owned {
  background: #d8aa4d;
}

.world-city.active {
  box-shadow: 0 0 0 4px rgba(255, 210, 122, .22);
}

.world-city span {
  position: absolute;
  left: 12px;
  top: -9px;
  padding: 1px 4px;
  background: rgba(18, 12, 7, .78);
  color: #ffe0a3;
  font-size: 11px;
  white-space: nowrap;
}

button {
  border: 1px solid #8b753e;
  background: linear-gradient(180deg, #806a37, #4f3d1d);
  color: #f7e6c2;
  padding: 5px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

button:hover {
  background: linear-gradient(180deg, #947a3e, #5c4720);
}

button:active,
button:focus,
button:focus-visible {
  outline: 0;
  box-shadow: none;
}

button:disabled {
  border-color: #4c3b29;
  background: #21180f;
  color: #8d7c65;
  cursor: not-allowed;
}

button.secondary {
  border-color: #85735c;
  background: linear-gradient(180deg, #8a8273, #5d5548);
}

.bottom-nav {
  position: relative;
  display: block;
  width: 100%;
  min-height: 50px;
  z-index: 8;
  padding: 0;
  background: linear-gradient(180deg, rgba(218, 210, 176, .2), rgba(109, 104, 79, .16));
  box-shadow: inset 0 1px 0 rgba(236, 220, 169, .26);
  overflow: visible;
}

.bottom-hud-item {
  position: absolute;
  padding: 0;
}

.bottom-dock-frame {
  position: absolute;
  z-index: 0;
  object-fit: fill;
  pointer-events: none;
}

.hud-mission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 0 8px;
  border-color: #6b5132;
  background: rgba(18, 12, 7, .76);
  text-align: left;
}

.hud-mission strong {
  color: #ffe0a3;
  font-size: 20px;
}

.hud-mission span {
  min-width: 0;
  overflow: hidden;
  color: #f0d7a5;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hud-mission em {
  padding: 4px 8px;
  border: 1px solid #5d7c3a;
  background: #36531f;
  color: #e8ffc8;
  font-style: normal;
  font-size: 13px;
}

.hud-dock {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: end;
  overflow-x: auto;
  scrollbar-width: none;
}

.hud-dock::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: grid;
  gap: 3px;
  justify-items: center;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #efd3a0;
  font-size: 12px;
  overflow: visible;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover,
.nav-item:active,
.nav-item:focus-visible,
.world-entry:hover,
.world-entry:active,
.world-entry:focus-visible {
  background: transparent;
  outline: 0;
}

.nav-skin,
.more-button-skin,
.world-skin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.nav-skin {
  z-index: 1;
}

.more-button-skin {
  z-index: 1;
}

.nav-icon-image {
  position: absolute;
  left: 50%;
  top: 39%;
  z-index: 2;
  width: 62%;
  height: 62%;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}

.nav-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: 100%;
  transform: translateX(-50%);
  font-size: var(--nav-label-size, 12px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px #1a1008;
}

.nav-item.active {
  color: #ffd27a;
}

.nav-item.active .nav-icon-image {
  color: #ffe39c;
  filter: brightness(1.08) drop-shadow(0 1px 1px rgba(255, 214, 112, .34));
}

.bottom-hud-notice {
  position: absolute;
  right: 5%;
  top: 8%;
  z-index: 6;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(255, 232, 151, .9);
  border-radius: 999px;
  background: linear-gradient(180deg, #e54529, #8d1209);
  color: #fff4bd;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(48, 4, 1, .96);
  box-shadow: 0 0 7px rgba(255, 64, 38, .6);
  animation: hudNoticePulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

.nav-item.has-mail-notice .nav-icon-image {
  filter: brightness(1.08) drop-shadow(0 1px 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 5px rgba(255, 80, 42, .38));
}

.nav-item.covered {
  opacity: .22;
  filter: grayscale(.3);
}

.more-expanded-item {
  z-index: 5;
  animation: moreNavIn .18s cubic-bezier(.2, .9, .15, 1) both;
  animation-delay: calc((5 - var(--more-index, 0)) * 22ms);
}

.more-expanded-item .nav-icon-image {
  top: 38%;
  width: 50%;
  height: 50%;
}

.more-expanded-item .nav-label {
  bottom: 4%;
}

.nav-item.more-open {
  z-index: 6;
  color: #ffd27a;
  filter: brightness(1.08);
}

@keyframes moreNavIn {
  from {
    opacity: 0;
    transform: translateX(56px) scale(.72);
    filter: blur(2px) brightness(1.2);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

.world-entry {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe4a8;
  font-size: 22px;
  font-weight: 700;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.world-entry span {
  position: absolute;
  left: 50%;
  bottom: 11%;
  z-index: 3;
  transform: translateX(-50%);
  font-size: var(--world-label-size, 12px);
  line-height: 1;
  text-shadow: 0 2px 2px #101007;
}

.world-map-icon {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 2;
  width: 58%;
  height: 58%;
  object-fit: cover;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: saturate(1.05) contrast(1.02) drop-shadow(0 2px 2px rgba(0, 0, 0, .55));
}

.world-entry.active {
  filter: brightness(1.04);
}

.chat-list {
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow: auto;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid rgba(255, 210, 122, .22);
  background: rgba(255, 238, 190, .06);
}

.chat-message {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  color: #f2dfb8;
  font-size: 13px;
  line-height: 1.35;
}

.chat-message strong {
  color: #ffd27a;
  font-weight: 700;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.chat-form input {
  min-width: 0;
  border: 1px solid #5e472d;
  background: #120d08;
  color: #f7e6c2;
  padding: 8px 9px;
  font: inherit;
}

.game-modal.modal-skin-channel {
  position: relative;
  width: min(92vw, var(--channel-modal-width, 390px));
  height: min(84dvh, var(--channel-modal-height, 585px));
  max-height: none;
  padding: 76px 30px 72px;
  border: 0;
  background-color: transparent;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow: hidden;
  color: #f2d9a8;
}

.modal-skin-channel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
  pointer-events: none;
}

.modal-skin-channel .modal-head h2 {
  color: #f1c777;
  font-size: var(--channel-size, 17px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 3px rgba(33, 13, 4, .92);
}

.modal-skin-channel #gameModalClose {
  position: absolute;
  right: -17px;
  top: -10px;
  width: 34px;
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  pointer-events: auto;
}

.modal-skin-channel #gameModalClose::before,
.modal-skin-channel #gameModalClose::after {
  content: none;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(12px, var(--channel-size, 18px));
  height: max(2px, calc(var(--channel-size, 18px) / 6));
  border-radius: 2px;
  background: #8a5520;
  box-shadow: 0 1px 0 rgba(237, 194, 104, .55);
  transform-origin: center;
}

.modal-skin-channel #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-channel #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-channel #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
  min-height: 0;
  gap: 0;
}

.modal-skin-channel [data-channel-item] {
  position: absolute;
  left: var(--channel-x);
  top: var(--channel-y);
  width: var(--channel-w);
  height: var(--channel-h);
  margin: 0;
  font-size: var(--channel-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-channel #gameModalTitle[data-channel-item] {
  display: block;
  line-height: var(--channel-h);
}

.modal-skin-channel #gameModalClose[data-channel-item] {
  left: var(--channel-x);
  top: var(--channel-y);
  right: auto;
  width: var(--channel-w);
  height: var(--channel-h);
}

.modal-skin-channel .channel-desc {
  margin: 0;
  color: #e1bd80;
  font-size: inherit;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 2px rgba(19, 8, 3, .88);
}

.modal-skin-channel .chat-list {
  display: block;
  min-height: 0;
  max-height: none;
  margin-top: 0;
  padding: 9px 10px;
  border: 1px solid rgba(122, 74, 28, .55);
  background: rgba(35, 19, 8, .5);
  box-shadow: inset 0 0 16px rgba(18, 7, 2, .42);
  overflow: auto;
  scrollbar-width: none;
}

.modal-skin-channel .chat-system-feed {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
  pointer-events: none;
  scrollbar-width: none;
}

.modal-skin-channel .chat-system-feed:empty {
  border: 0;
  background: transparent;
}

.modal-skin-channel .chat-system-feed::-webkit-scrollbar,
.modal-skin-channel .chat-player-feed::-webkit-scrollbar {
  display: none;
}

.modal-skin-channel .chat-player-feed {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
}

.modal-skin-channel .chat-player-feed-inner {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
}

.modal-skin-channel .chat-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  color: #f1dfbc;
  font-size: inherit;
}

.modal-skin-channel .chat-system-message {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
  color: #ffd976;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.28;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(37, 12, 2, .96), 0 0 6px rgba(255, 203, 80, .34);
}

.modal-skin-channel .chat-system-message.is-rotating {
  align-items: center;
  min-height: 100%;
}

.modal-skin-channel .chat-system-marquee {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.modal-skin-channel .chat-system-marquee-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
  will-change: transform;
  animation: channelBroadcastMarquee 15s linear infinite;
}

.modal-skin-channel .chat-system-marquee-inner > span,
.modal-skin-channel .chat-system-marquee-inner > strong,
.modal-skin-channel .chat-system-marquee-inner > .player-identity-name-group {
  flex: 0 0 auto;
}

.modal-skin-channel .chat-system-text {
  display: inline-block;
  white-space: nowrap;
}

@keyframes channelBroadcastMarquee {
  0% { transform: translateX(var(--channel-system-w, 260px)); }
  100% { transform: translateX(-100%); }
}

.modal-skin-channel .chat-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(220, 165, 73, .72);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(31, 15, 6, .72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.modal-skin-channel .chat-profile-trigger {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-decoration: none;
  user-select: none;
  overflow: visible;
}

.modal-skin-channel .chat-profile-trigger:hover,
.modal-skin-channel .chat-profile-trigger:active,
.modal-skin-channel .chat-profile-trigger:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  transform: none;
}

.modal-skin-channel .chat-profile-trigger .chat-avatar {
  display: block;
}

.modal-skin-channel .chat-content {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.28;
}

.modal-skin-channel .chat-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: none;
  min-width: max-content;
  line-height: 1.1;
  overflow: visible;
  overflow-wrap: normal;
  white-space: nowrap;
}

.modal-skin-channel .chat-time {
  flex: 0 0 auto;
  color: #fff2c8;
  font-size: .72em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(36, 10, 2, .9), 0 0 4px rgba(255, 223, 150, .28);
  white-space: nowrap;
}

.modal-skin-channel .chat-name .compact-player-name-group,
.modal-skin-channel .chat-system-message .compact-player-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
}

.modal-skin-channel .chat-name .compact-player-vip,
.modal-skin-channel .chat-system-message .compact-player-vip {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  font-size: .66em;
  font-style: normal;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-1,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-2,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-3,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-4,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-5,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-6,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-7,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-8,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-9,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.modal-skin-channel .chat-name .compact-player-vip.vip-name-level-10,
.modal-skin-channel .chat-system-message .compact-player-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-channel .chat-name .compact-player-name,
.modal-skin-channel .chat-system-message .compact-player-name {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  color: #fff1b0;
  line-height: 1.16;
  text-overflow: clip;
  white-space: nowrap;
}

.modal-skin-channel .chat-name .compact-player-identity,
.modal-skin-channel .chat-system-message .compact-player-identity {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modal-skin-channel .chat-name .compact-player-identity:empty,
.modal-skin-channel .chat-system-message .compact-player-identity:empty {
  display: none;
}

.modal-skin-channel .chat-name .compact-player-identity .vip-identity-emblem,
.modal-skin-channel .chat-system-message .compact-player-identity .vip-identity-emblem {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  filter: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.modal-skin-channel .chat-name .compact-player-identity .vip-identity-emblem img,
.modal-skin-channel .chat-system-message .compact-player-identity .vip-identity-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal-skin-channel .chat-content > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal-skin-channel .chat-private-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 0 3px;
  border: 1px solid rgba(226, 168, 74, .72);
  border-radius: 2px;
  background: rgba(88, 37, 18, .55);
  color: #ffe0a0;
  font-size: .72em;
  font-style: normal;
  font-weight: 800;
  line-height: 1.18;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .92);
}

.modal-skin-channel .chat-message strong {
  color: #e2aa56;
}

.modal-skin-channel .chat-system-message strong {
  color: #ffe89a;
  font-weight: 900;
}

.modal-skin-channel .chat-message .vip-name,
.vip-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #ffd66f;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(41, 17, 4, .95), 0 0 6px rgba(255, 196, 78, .42);
}

.player-identity-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
}

.player-identity-vip {
  flex: 0 0 auto;
  min-width: 25px;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  font-size: .68em;
  font-style: normal;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.player-identity-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.player-identity-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.player-identity-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.player-identity-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.player-identity-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.player-identity-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.player-identity-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.player-identity-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.player-identity-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.player-identity-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.player-identity-name {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.player-identity-emblem {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
}

.player-identity-emblem:empty {
  display: none;
}

.player-identity-emblem .vip-identity-emblem {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.player-identity-emblem .vip-identity-emblem img,
.player-profile-identity .vip-identity-emblem img,
.friend-search-emblem .vip-identity-emblem img,
.friend-request-identity-trigger .vip-identity-emblem img,
.friend-list-row .compact-player-identity .vip-identity-emblem img,
.modal-skin-mail .vip-identity-emblem img,
.modal-skin-mail .mail-detail-identity .vip-identity-emblem img,
.modal-skin-mail .mail-compose-identity .vip-identity-emblem img,
.modal-skin-ranking .vip-identity-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.player-identity-name-group .player-identity-name {
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.modal-skin-channel .chat-message .vip-name em,
.vip-name em {
  font-style: normal;
  font-size: .72em;
  color: #3b1b08;
  background: linear-gradient(180deg, #ffe29b, #c7892b);
  border: 1px solid rgba(255, 222, 134, .8);
  border-radius: 2px;
  padding: 0 2px;
  text-shadow: none;
}

.vip-name-level-1 em,
.vip-name-level-1.player-profile-vip {
  color: #25180a;
  background: linear-gradient(180deg, #f2dbad, #b88746);
  border-color: rgba(237, 201, 133, .82);
}

.vip-name-level-2 em,
.vip-name-level-2.player-profile-vip {
  color: #20170d;
  background: linear-gradient(180deg, #ffe0a6, #c58a38);
  border-color: rgba(255, 218, 139, .86);
}

.vip-name-level-3 em,
.vip-name-level-3.player-profile-vip {
  color: #1c1609;
  background: linear-gradient(180deg, #ffe792, #d6a337);
  border-color: rgba(255, 230, 129, .9);
}

.vip-name-level-4 em,
.vip-name-level-4.player-profile-vip {
  color: #fff2bd;
  background: linear-gradient(180deg, #87591d, #4b2410);
  border-color: rgba(237, 184, 84, .88);
}

.vip-name-level-5 em,
.vip-name-level-5.player-profile-vip {
  color: #fff0bc;
  background: linear-gradient(180deg, #9c6024, #5e1f14);
  border-color: rgba(255, 190, 91, .9);
}

.vip-name-level-6 em,
.vip-name-level-6.player-profile-vip {
  color: #fff5c9;
  background: linear-gradient(180deg, #b36a22, #712012);
  border-color: rgba(255, 204, 97, .92);
}

.vip-name-level-7 em,
.vip-name-level-7.player-profile-vip {
  color: #fff8d8;
  background: linear-gradient(180deg, #d0962d, #7f2917);
  border-color: rgba(255, 223, 121, .94);
}

.vip-name-level-8 em,
.vip-name-level-8.player-profile-vip {
  color: #2a1705;
  background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12);
  border-color: rgba(255, 232, 139, .98);
}

.vip-name-level-9 em,
.vip-name-level-9.player-profile-vip {
  color: #fff9dc;
  background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309);
  border-color: rgba(255, 226, 121, .98);
}

.vip-name-level-10 em,
.vip-name-level-10.player-profile-vip {
  color: #fff7d2;
  background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807);
  border-color: rgba(255, 233, 128, 1);
  box-shadow: 0 0 4px rgba(255, 198, 66, .42);
}

.modal-skin-channel .chat-message .vip-name-gilded,
.vip-name-gilded {
  color: #fff2b8;
  text-shadow: 0 1px 1px rgba(45, 17, 3, .95), 0 0 8px rgba(255, 214, 89, .58), 0 0 2px #fff1b4;
}

.modal-skin-channel .chat-message .vip-name-sovereign,
.vip-name-sovereign {
  color: #ffe0a0;
  text-shadow: 0 1px 1px rgba(47, 10, 3, .98), 0 0 8px rgba(255, 195, 71, .68), 0 0 3px rgba(255, 75, 48, .48);
}

.modal-skin-channel .chat-message.chat-system-vip {
  border: 1px solid rgba(236, 187, 78, .32);
  border-radius: 3px;
  background: rgba(83, 42, 10, .28);
  box-shadow: inset 0 0 10px rgba(255, 201, 88, .12);
}

.modal-skin-channel .chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 0;
}

.modal-skin-channel .chat-form input {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #f8e2b5;
  font-size: inherit;
}

.modal-skin-channel .chat-form input:hover,
.modal-skin-channel .chat-form input:active,
.modal-skin-channel .chat-form input:focus,
.modal-skin-channel .chat-form input:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-channel .chat-form button {
  border-color: #9b692c;
  background: linear-gradient(180deg, #9b5b24, #562812);
  color: #ffe1a1;
  font-size: inherit;
  font-weight: 800;
}

.modal-skin-channel .chat-form button[data-channel-item="send"],
.modal-skin-channel .chat-form button[data-channel-item="send"]:hover,
.modal-skin-channel .chat-form button[data-channel-item="send"]:active,
.modal-skin-channel .chat-form button[data-channel-item="send"]:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-weight: 900;
  text-shadow: none;
}

.modal-skin-channel .chat-form button[data-channel-item="send"] span {
  display: none;
}

.channel-live-edit [data-channel-item] {
  outline: 0;
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
  z-index: 90;
}

.channel-live-edit [data-channel-item].is-live-selected {
  z-index: 95;
}

.game-modal.modal-skin-channel.channel-live-edit {
  overflow: visible;
}

.channel-live-editor-panel {
  z-index: 3000;
}

.channel-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.channel-live-edit .channel-live-editor-panel,
.channel-live-edit .channel-live-editor-panel * {
  pointer-events: auto !important;
}

.channel-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.channel-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--channel-hit-x);
  top: var(--channel-hit-y);
  width: var(--channel-hit-w);
  height: var(--channel-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 222, 119, .62);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.channel-live-hitbox:hover,
.channel-live-hitbox:active,
.channel-live-hitbox:focus,
.channel-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.channel-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
  background: transparent !important;
}

.channel-live-resize-handle {
  position: absolute;
  left: var(--channel-handle-x);
  top: var(--channel-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.channel-live-resize-handle[hidden] {
  display: none;
}

.bag-system {
  position: absolute;
  inset: 0;
  display: block;
  color: #f4ddb0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .9);
}

.bag-detail-page {
  inset: 62px 22px 28px;
  display: grid;
  gap: 8px;
}

.bag-summary {
  display: contents;
}

.bag-summary span,
.bag-filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  color: #f0d38a;
  font-size: var(--bag-size, 9px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.bag-filter-button:hover,
.bag-filter-button:focus,
.bag-filter-button:focus-visible,
.bag-filter-button:active {
  background: transparent;
  outline: none;
  box-shadow: none;
}

.bag-filter-button.active {
  color: #ffe7a8;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 8px rgba(255, 195, 82, .72);
}

.bag-summary em,
.bag-filter-button em {
  color: #f0d38a;
  font-style: normal;
  line-height: 1;
}

.bag-summary b,
.bag-filter-button b {
  color: #ffe18d;
  font-size: calc(var(--bag-size, 9px) + 1px);
  line-height: 1;
}

.bag-filter-button.active em,
.bag-filter-button.active b {
  color: #fff0b8;
}

.bag-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  max-height: none;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.bag-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.bag-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 7px;
  min-height: 52px;
  padding: 6px;
  border: 1px solid rgba(224, 178, 91, .24);
  border-radius: 7px;
  background: rgba(29, 16, 9, .52);
  color: #f5ddb0;
  text-align: left;
  box-shadow: none;
}

.bag-item img,
.bag-item i {
  grid-row: 1 / 3;
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(255, 230, 142, .34), transparent 72%);
  filter: drop-shadow(0 2px 4px rgba(66, 41, 14, .28));
}

.bag-item strong {
  min-width: 0;
  color: #fff0bf;
  font-size: 11px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bag-item span {
  min-width: 0;
  color: #d8b676;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bag-item em {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #ffe18d;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.bag-item.rarity-sss { border-color: rgba(184, 132, 28, .5); }
.bag-item.rarity-ssr { border-color: rgba(132, 92, 172, .42); }
.bag-item.rarity-sr { border-color: rgba(71, 144, 113, .38); }
.bag-gift-item {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.bag-gift-item .bag-gift-toggle {
  display: contents;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
}

.bag-gift-item.is-gift-selected {
  border-color: rgba(255, 219, 105, .76);
  background: rgba(93, 62, 21, .58);
}

.bag-gift-qty {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: grid;
  grid-template-columns: 20px 42px;
  align-items: center;
  gap: 3px;
  margin-top: -2px;
  color: #f7d98e;
  font-size: var(--alliance-admin-size, 7px);
  font-weight: 900;
  pointer-events: auto;
}

.bag-gift-qty input {
  width: 42px;
  height: 18px;
  min-width: 0;
  border: 1px solid rgba(224, 178, 91, .68);
  border-radius: 3px;
  background: rgba(21, 11, 5, .88);
  color: #fff2b8;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  outline: 0;
  box-shadow: none;
}

.bag-gift-confirm {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 95;
  pointer-events: auto;
}

.bag-gift-confirm button {
  min-width: 78px;
  height: 24px;
  border: 1px solid rgba(242, 201, 92, .68);
  border-radius: 4px;
  background: rgba(103, 47, 15, .92);
  color: #ffe7a4;
  font-size: 10px;
  font-weight: 900;
  box-shadow: none;
}

.bag-gift-confirm button:disabled {
  opacity: .48;
  filter: grayscale(.35);
}

.bag-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 190px;
  gap: 5px;
  color: #d8b676;
  text-align: center;
}

.bag-empty b {
  color: #ffe18d;
  font-size: 14px;
}

.bag-detail-page {
  grid-template-columns: 112px 1fr;
  align-items: start;
}

.bag-back-button {
  position: absolute;
  z-index: 72;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.bag-detail-icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(224, 178, 91, .28);
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 232, 150, .28), rgba(29, 16, 9, .32));
}

.bag-detail-icon img,
.bag-detail-icon i {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(66, 41, 14, .32));
}

.bag-detail-main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.bag-detail-main strong {
  color: #fff0bf;
  font-size: 16px;
}

.bag-detail-main span,
.bag-detail-main p,
.bag-detail-main em {
  margin: 0;
  color: #d8b676;
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}

.bag-detail-main em {
  color: #ffe18d;
}

.bag-detail-main button {
  min-height: 28px;
  border-color: rgba(224, 178, 91, .62);
  background: linear-gradient(180deg, rgba(216, 167, 66, .82), rgba(95, 45, 15, .82));
  color: #fff1c4;
  font-size: 11px;
}

.bag-detail-main button:disabled {
  border-color: rgba(165, 140, 92, .42);
  background: rgba(44, 34, 25, .58);
  color: rgba(230, 204, 152, .58);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(0, 0, 0, .62);
}

.modal-backdrop[hidden] {
  display: none;
}

#nameModal,
.guide-modal-backdrop {
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
}

.avatar-modal {
  width: min(92vw, 520px);
  padding: 14px;
  border: 1px solid rgba(188, 162, 82, .72);
  background: linear-gradient(180deg, rgba(238, 233, 212, .88), rgba(202, 211, 188, .9));
  background-image: var(--modal-bg, url("../assets/ui/modal_common_backplate_v1_webp_q82.webp?v=1675"));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 16px 38px rgba(36, 30, 18, .32), inset 0 0 0 1px rgba(255, 250, 215, .42);
  color: #3f3524;
  font-size: 11px;
}

.modal-skin-common { --modal-bg: url("../assets/ui/modal_common_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-name { --modal-bg: url("../assets/ui/modal_name_backplate_v4_horizontal_clear_webp_q82.webp"); }
.modal-skin-guide { --modal-bg: url("../assets/ui/modal_guide_backplate_v2_image2_low_webp_q82.webp"); }
.modal-skin-upgrade { --modal-bg: url("../assets/ui/modal_upgrade_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-recruit { --modal-bg: url("../assets/ui/modal_recruit_backplate_v3_webp_q82.webp?v=1671"); }
.modal-skin-yuxuantai { --modal-bg: url("../assets/ui/modal_yuxuantai_info_backplate_v2_webp_q82.webp?v=1675"); }
.modal-skin-bingying { --modal-bg: url("../assets/ui/modal_bingying_backplate_v3_webp_q82.webp?v=1675"); }
.modal-skin-juxianlou { --modal-bg: url("../assets/ui/modal_juxianlou_backplate_v2_webp_q82.webp?v=1675"); }
.modal-skin-jishi { --modal-bg: url("../assets/ui/modal_jishi_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-shenbingge { --modal-bg: url("../assets/ui/modal_shenbingge_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-yumayuan { --modal-bg: url("../assets/ui/modal_yumayuan_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-jumingsuo { --modal-bg: url("../assets/ui/modal_jumingsuo_backplate_v2_webp_q82.webp?v=1675"); }
.modal-skin-shuyuan { --modal-bg: url("../assets/ui/modal_shuyuan_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-chengqiang { --modal-bg: url("../assets/ui/modal_chengqiang_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-artifact { --modal-bg: url("../assets/ui/modal_shenbingge_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-resource { --modal-bg: url("../assets/ui/modal_resource_collect_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-resource-liangtian { --modal-bg: url("../assets/ui/bzone/modal_liangtian_backplate_v4_1536_webp_q88_candidate.webp"); }
.modal-skin-resource-famuchang { --modal-bg: url("../assets/ui/bzone/modal_famuchang_backplate_v4_1536_webp_q88_candidate.webp"); }
.modal-skin-resource-tiekuang { --modal-bg: url("../assets/ui/bzone/modal_tiekuang_backplate_v4_1536_webp_q88_candidate.webp"); }
.modal-skin-world { --modal-bg: url("../assets/ui/modal_world_tile_action_backplate_v1_webp_q82.webp"); }
.modal-skin-world-water { --modal-bg: url("../assets/ui/modal_world_water_backplate_v6_natural_complete_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-city { --modal-bg: url("../assets/ui/modal_world_player_city_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-wasteland { --modal-bg: url("../assets/ui/modal_world_wasteland_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-mountain { --modal-bg: url("../assets/ui/modal_world_mountain_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-plain { --modal-bg: url("../assets/ui/modal_world_plain_backplate_v8_clean4_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-openground { --modal-bg: url("../assets/ui/modal_world_openground_backplate_v2_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-forest { --modal-bg: url("../assets/ui/modal_world_forest_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-food { --modal-bg: url("../assets/ui/modal_world_food_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-iron { --modal-bg: url("../assets/ui/modal_world_iron_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-world-attached { --modal-bg: url("../assets/ui/modal_world_attached_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-march-queue { --modal-bg: url("../assets/ui/modal_march_queue_backplate_v1_cutout_webp_q82.webp?v=1670"); }
.modal-skin-gameplay-rules { --modal-bg: url("../assets/ui/modal_gameplay_rules_backplate_v3_cutout_webp_q82.webp?v=1670"); }
.modal-skin-avatar { --modal-bg: url("../assets/ui/modal_avatar_backplate_v2_image2_low_webp_q82.webp?v=1675"); }
.modal-skin-general-list { --modal-bg: url("../assets/ui/modal_general_list_equipment_backplate_v1_image2_low_webp_q82.webp?v=1675"); }
.modal-skin-general-detail { --modal-bg: url("../assets/ui/modal_general_detail_layer2_backplate_v4_6slots_no_midline_webp_q82.webp?v=1675"); }
.modal-skin-bag { --modal-bg: url("../assets/ui/modal_bag_backplate_v1_webp_q82.webp?v=1675"); }
.modal-skin-bag[data-modal-mode="bag-detail"] { --modal-bg: url("../assets/ui/modal_bag_detail_backplate_v1_image2_low_webp_q82.webp?v=1675"); }
.modal-skin-recharge { --modal-bg: url("../assets/ui/modal_recharge_backplate_v6_goldbronze_green_cutout_webp_q82.webp?v=1675"); }
.modal-skin-channel { --modal-bg: url("../assets/ui/modal_channel_backplate_v2_magenta_cutout_webp_q82.webp?v=1675"); }
.modal-skin-mail { --modal-bg: url("../assets/ui/modal_mail_backplate_v4_separate_tabs_cutout_webp_q82.webp?v=1675"); }
.modal-skin-task { --modal-bg: url("../assets/ui/modal_task_backplate_v5_original_style_cutout_webp_q82.webp?v=1675"); }
.modal-skin-vip { --modal-bg: url("../assets/ui/modal_vip_backplate_v1_image2_low_webp_q82.webp?v=1675"); }
.modal-skin-ranking { --modal-bg: url("../assets/ui/modal_ranking_backplate_v2_chroma_cutout_listclean_webp_q82.webp?v=1675"); }
.modal-skin-player-profile { --modal-bg: url("../assets/ui/modal_player_profile_backplate_v4_cutout_webp_q82.webp?v=1675"); }
.modal-skin-friends { --modal-bg: url("../assets/ui/modal_friends_home_backplate_v6_edgefill_cutout_webp_q82.webp?v=1675"); }
.modal-skin-alliance { --modal-bg: url("../assets/hud/alliance_modal_backplate_v2_clean_webp_q82.webp?v=1675"); }
.modal-skin-alliance[data-modal-mode="alliance-chat"] { --modal-bg: url("../assets/hud/alliance_chat_backplate_v2_cutout_webp_q82.webp?v=1675"); }
.modal-skin-alliance[data-modal-mode="alliance-manage"] { --modal-bg: url("../assets/hud/alliance_manage_backplate_v5_cutout_webp_q82.webp?v=1675"); }
.modal-skin-alliance[data-modal-mode="alliance-member-admin"] { --modal-bg: url("../assets/hud/alliance_member_admin_backplate_v9_tall_cutout_webp_q82.webp?v=1675"); }
.game-modal.modal-skin-alliance[data-modal-mode="alliance-member-admin"] { background-image: var(--modal-bg); }

.game-modal.modal-skin-general {
  position: relative;
  width: 360px;
  height: 430px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-general-list {
  width: min(92vw, calc(86dvh * 0.6667), var(--general-list-modal-width, 360px));
  aspect-ratio: 2 / 3;
  height: auto;
}

.game-modal.modal-skin-general-detail {
  width: min(92vw, calc(86dvh * 0.8372), var(--general-detail-modal-width, 360px));
  aspect-ratio: 360 / 430;
  height: auto;
}

.game-modal.modal-skin-ranking {
  position: relative;
  width: min(96vw, calc(92dvh * 0.6667), var(--ranking-modal-width, 360px));
  aspect-ratio: 2 / 3;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #f6dfad;
  overflow: hidden;
}

.game-modal.modal-skin-player-profile {
  position: relative;
  width: min(94vw, calc(88dvh * 0.6667), var(--player-profile-modal-width, 380px));
  aspect-ratio: 2 / 3;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: hidden;
  color: #ffe8ae;
}

.modal-skin-player-profile .modal-head {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.modal-skin-player-profile #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 44px;
  transform: translate(-50%, -50%);
  color: #ffe9aa;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(39, 10, 2, .95);
}

.modal-skin-player-profile #gameModalClose {
  position: absolute;
  right: 28px;
  top: 36px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.modal-skin-player-profile [data-player-profile-item] {
  position: absolute;
  left: var(--player-profile-x);
  top: var(--player-profile-y);
  width: var(--player-profile-w);
  height: var(--player-profile-h);
  margin: 0;
  font-size: var(--player-profile-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-player-profile #gameModalTitle[data-player-profile-item] {
  left: var(--player-profile-x);
  top: var(--player-profile-y);
  width: var(--player-profile-w);
  height: var(--player-profile-h);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe9aa;
  font-size: var(--player-profile-size, 17px);
  line-height: 1;
}

.modal-skin-player-profile #gameModalClose[data-player-profile-item] {
  left: var(--player-profile-x);
  top: var(--player-profile-y);
  width: var(--player-profile-w);
  height: var(--player-profile-h);
  right: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

.modal-skin-player-profile #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
}

.player-profile-panel {
  position: absolute;
  inset: 0;
  font-family: "Microsoft YaHei", "Noto Serif SC", serif;
}

.player-profile-card {
  position: absolute;
  inset: 0;
}

.player-profile-avatar {
  width: var(--player-profile-w, 88px);
  height: var(--player-profile-h, 88px);
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(245, 198, 91, .85);
  background: rgba(35, 12, 4, .65);
}

.player-profile-main {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff1b0;
  font-size: var(--player-profile-size, 13px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .95);
  white-space: nowrap;
  overflow: visible;
}

.game-modal.modal-skin-alliance {
  position: relative;
  width: min(94vw, 86dvh, 390px);
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #f7dda5;
}

.modal-skin-alliance .modal-head {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  display: block;
  pointer-events: none;
  overflow: visible;
}

.modal-skin-alliance #gameModalTitle {
  display: none;
}

.modal-skin-alliance #gameModalTitle {
  margin: 0;
  color: #ffe7a7;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(45, 12, 4, .95), 0 0 8px rgba(255, 198, 67, .42);
}

.modal-skin-alliance #gameModalClose {
  position: absolute;
  left: var(--alliance-x, 80.5%);
  top: var(--alliance-y, 10.4%);
  z-index: 60;
  width: var(--alliance-w, 9%);
  height: var(--alliance-h, 7.2%);
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  touch-action: none;
}

.modal-skin-alliance #gameModalClose:hover,
.modal-skin-alliance #gameModalClose:active,
.modal-skin-alliance #gameModalClose:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  filter: none;
}

.modal-skin-alliance .alliance-back-button {
  position: absolute;
  left: var(--alliance-x, 11%);
  top: var(--alliance-y, 10.4%);
  z-index: 60;
  width: var(--alliance-w, 9%);
  height: var(--alliance-h, 7.2%);
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.modal-skin-alliance .alliance-back-button:hover,
.modal-skin-alliance .alliance-back-button:active,
.modal-skin-alliance .alliance-back-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  filter: none;
}

.modal-skin-alliance #gameModalBody {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  overflow: visible;
  z-index: 1;
}

.modal-skin-alliance .alliance-panel {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  color: #f7dda5;
}

.alliance-emblem {
  position: absolute;
  left: var(--alliance-x, 0);
  top: var(--alliance-y, 0);
  width: var(--alliance-w, 42px);
  height: var(--alliance-h, 42px);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.alliance-summary {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 56%);
  height: var(--alliance-h, 42px);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.alliance-summary strong {
  display: block;
  width: 100%;
  color: #fff8cf;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "SimHei", "STHeiti", sans-serif;
  font-size: calc(var(--alliance-size, 11px) * 1.55);
  font-weight: 1000;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  background: linear-gradient(180deg, #fffef0 0%, #ffe36b 36%, #f2b42b 68%, #fff1a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 1px rgba(35, 11, 3, .98),
    0 0 6px rgba(255, 224, 87, .76),
    0 0 13px rgba(255, 157, 31, .42);
  animation: allianceNameGoldPulse 1.9s ease-in-out infinite;
}

@keyframes allianceNameGoldPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 214, 78, .55)); }
  50% { filter: drop-shadow(0 0 7px rgba(255, 238, 130, .9)); }
}

.alliance-summary span {
  display: block;
  width: 100%;
  margin-top: 2px;
  color: #ffd66d;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "SimHei", sans-serif;
  font-size: calc(var(--alliance-size, 11px) * .72);
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 1px rgba(39, 10, 2, .95), 0 0 4px rgba(255, 197, 56, .38);
}

.alliance-notice,
.alliance-result {
  color: #f3cb82;
  font-size: var(--alliance-size, 10px);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(39, 10, 2, .9);
}

.alliance-notice {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 39%);
  width: var(--alliance-w, 88%);
  height: var(--alliance-h, 31px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 31px;
  margin: 0;
  padding: 0 10px;
}

.alliance-notice img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.alliance-action-button {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 50px);
  height: var(--alliance-h, 46px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe39c;
  font-size: var(--alliance-size, 10px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .95);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alliance-action-visual {
  pointer-events: none;
}

.alliance-hotspot-button {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 70px);
  height: var(--alliance-h, 28px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alliance-hotspot-button:hover,
.alliance-hotspot-button:active,
.alliance-hotspot-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  filter: none;
}

.alliance-action-button:hover,
.alliance-action-button:active,
.alliance-action-button:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
  filter: brightness(1.08);
}

.alliance-action-button img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(24, 6, 1, .55));
}

.alliance-action-button[data-alliance-item="allianceChatAction"] img,
.alliance-action-button[data-alliance-item="memberManageAction"] img {
  width: 100%;
  height: 100%;
}

.alliance-action-button span {
  display: none !important;
}

.alliance-bottom-label {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 42px);
  height: var(--alliance-h, 16px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #ffe79e;
  font-size: var(--alliance-size, 10px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .95), 0 0 4px rgba(255, 200, 75, .45);
  pointer-events: none;
}

.modal-skin-alliance .alliance-member-list {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 74%);
  width: var(--alliance-w, 89%);
  height: var(--alliance-h, 38%);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 5px 6px 7px;
}

.modal-skin-alliance .alliance-member-row {
  position: relative;
  display: block;
  min-height: var(--alliance-row-h, 38px);
  height: var(--alliance-row-h, 38px);
  padding: 0;
  border: 1px solid rgba(211, 151, 62, .26);
  border-radius: 4px;
  background: rgba(69, 20, 9, .38);
  color: #f7dda5;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.modal-skin-alliance .alliance-member-row:hover,
.modal-skin-alliance .alliance-member-row:active,
.modal-skin-alliance .alliance-member-row:focus-within {
  background: rgba(94, 31, 13, .46);
  box-shadow: none;
}

.alliance-member-row > b {
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  color: #d9a95d;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.alliance-member-avatar {
  position: absolute;
  left: var(--alliance-row-x, 39px);
  top: var(--alliance-row-y, 18px);
  width: var(--alliance-row-w, 32px);
  height: var(--alliance-row-h, 32px);
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.alliance-member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(238, 188, 83, .82);
}

.alliance-member-info {
  position: absolute;
  left: var(--alliance-row-x, 112px);
  top: var(--alliance-row-y, 18px);
  width: var(--alliance-row-w, 126px);
  height: var(--alliance-row-h, 31px);
  transform: translate(-50%, -50%);
  display: grid;
  gap: 1px;
  min-width: 0;
  overflow: visible;
}

.alliance-member-info .player-identity-name-group {
  font-size: var(--alliance-row-size, 11px);
}

.modal-skin-alliance .compact-player-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.modal-skin-alliance .compact-player-vip {
  flex: 0 0 auto;
  min-width: 25px;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.modal-skin-alliance .compact-player-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-alliance .compact-player-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-alliance .compact-player-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-alliance .compact-player-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-alliance .compact-player-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-alliance .compact-player-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-alliance .compact-player-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-alliance .compact-player-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.modal-skin-alliance .compact-player-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.modal-skin-alliance .compact-player-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-alliance .compact-player-name {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  color: #ffe7a7;
  font-size: 11px;
  font-weight: 900;
  overflow: visible;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .95);
}

.modal-skin-alliance .compact-player-identity {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.modal-skin-alliance .compact-player-identity:empty {
  display: none;
}

.modal-skin-alliance .compact-player-identity .vip-identity-emblem {
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.modal-skin-alliance .compact-player-identity .vip-identity-emblem::before,
.modal-skin-alliance .compact-player-identity .vip-identity-emblem::after,
.modal-skin-alliance .compact-player-identity .vip-identity-emblem img {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.modal-skin-alliance .compact-player-identity .vip-identity-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.alliance-member-info small {
  color: #d9b06c;
  font-size: calc(var(--alliance-row-size, 9px) * .9);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-role-badge {
  position: absolute;
  left: var(--alliance-row-x, 202px);
  top: var(--alliance-row-y, 18px);
  width: var(--alliance-row-w, 42px);
  height: var(--alliance-row-h, 31px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 0;
  color: #ffdc8b;
  font-size: var(--alliance-row-size, 8px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-role-badge img {
  width: min(100%, var(--alliance-row-h, 23px));
  height: min(100%, var(--alliance-row-h, 23px));
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(24, 6, 1, .55));
}

.alliance-role-badge em {
  display: none !important;
}

.alliance-member-row > em {
  position: absolute;
  left: var(--alliance-row-x, 247px);
  top: var(--alliance-row-y, 18px);
  width: var(--alliance-row-w, 32px);
  height: var(--alliance-row-h, 22px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #ffe28e;
  font-size: var(--alliance-row-size, 9px);
  font-style: normal;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.alliance-member-row > em.is-offline {
  color: #9e7a58;
}

.alliance-result {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 95%);
  width: var(--alliance-w, 82%);
  height: var(--alliance-h, 18px);
  transform: translate(-50%, -50%);
  min-height: 16px;
  padding: 0 9px;
  text-align: center;
}

.alliance-sub-title {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 26%);
  width: var(--alliance-w, 160px);
  height: var(--alliance-h, 28px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff2a8;
  font-size: var(--alliance-size, 15px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(35, 11, 3, .98), 0 0 6px rgba(255, 203, 62, .55);
}

.alliance-chat-notice {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 26%);
  width: var(--alliance-w, 210px);
  height: var(--alliance-h, 24px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #ffe39a;
  font-size: var(--alliance-size, 10px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(35, 11, 3, .98), 0 0 5px rgba(255, 200, 78, .38);
}

.alliance-chat-notice span {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-width: 100%;
  white-space: nowrap;
  will-change: transform;
  transform: translate(-115%, -50%);
  animation: allianceNoticeMarquee 24s linear infinite;
}

@keyframes allianceNoticeMarquee {
  0% { transform: translate(0, -50%); }
  26% { transform: translate(0, -50%); }
  48% { transform: translate(115%, -50%); }
  49% { transform: translate(-115%, -50%); }
  72% { transform: translate(0, -50%); }
  100% { transform: translate(0, -50%); }
}

.alliance-chat-list,
.alliance-manage-list {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 58%);
  width: var(--alliance-w, 230px);
  height: var(--alliance-h, 190px);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: start;
  gap: 5px;
  overflow-y: auto;
  scrollbar-width: none;
  color: #f5d69a;
  font-size: var(--alliance-size, 9px);
}

.alliance-chat-list::-webkit-scrollbar,
.alliance-manage-list::-webkit-scrollbar {
  display: none;
}

.alliance-chat-list p,
.alliance-manage-list article {
  margin: 0;
  min-height: 34px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(68, 21, 8, .32);
  border: 1px solid rgba(222, 160, 70, .18);
}

.alliance-chat-list p {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  min-height: 26px;
  padding: 3px 4px;
}

.alliance-chat-profile-trigger {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
}

.alliance-chat-profile-trigger:hover,
.alliance-chat-profile-trigger:active,
.alliance-chat-profile-trigger:focus,
.alliance-chat-profile-trigger:focus-visible {
  background: transparent;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  transform: none;
}

.alliance-chat-avatar {
  display: block;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(222, 170, 76, .72);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(31, 15, 6, .72);
}

.alliance-chat-content {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.18;
}

.alliance-chat-name {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: none;
  min-width: max-content;
  overflow: visible;
  white-space: nowrap;
}

.alliance-chat-time {
  flex: 0 0 auto;
  color: #fff2c8;
  font-size: 6.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(36, 10, 2, .9), 0 0 4px rgba(255, 223, 150, .28);
  white-space: nowrap;
}

.alliance-chat-text {
  min-width: 0;
  color: #f1d4a2;
  font-size: 7.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-chat-list .compact-player-name-group {
  gap: 2px;
  font-size: 7.5px;
}

.alliance-chat-list .compact-player-vip {
  min-width: 18px;
  padding: 0 1px;
  font-size: 5.5px;
  line-height: 1.1;
}

.alliance-chat-list .compact-player-name {
  font-size: 7.5px;
  line-height: 1.1;
}

.alliance-chat-list .compact-player-identity {
  width: 10px;
  height: 10px;
}

.alliance-chat-role {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  width: max-content;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
  color: #ffd574;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .92), 0 0 4px rgba(255, 205, 83, .28);
}

.alliance-chat-role img {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  object-fit: contain;
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-chat-list em {
  color: #f1d4a2;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alliance-chat-input,
.alliance-chat-send {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 86%);
  width: var(--alliance-w, 170px);
  height: var(--alliance-h, 28px);
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 4px;
  background: rgba(52, 15, 7, .42);
  color: #f4d18b;
  font-size: var(--alliance-size, 10px);
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  text-align: center;
}

.alliance-chat-input {
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  transform: translate(calc(-50% - 8px), calc(-50% - 4px));
  background: transparent;
  color: #f4d18b;
}

.alliance-chat-send {
  width: var(--alliance-w, 42px);
  background: transparent;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 0;
}

.alliance-chat-input:hover,
.alliance-chat-input:active,
.alliance-chat-input:focus,
.alliance-chat-input:focus-visible {
  background: transparent !important;
  color: #f4d18b;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.alliance-chat-send:hover,
.alliance-chat-send:active,
.alliance-chat-send:focus,
.alliance-chat-send:focus-visible {
  background: transparent !important;
  color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.alliance-manage-member-row {
  position: relative;
  display: block;
  width: 176px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(211, 151, 62, .2);
  border-radius: 4px;
  background: rgba(69, 20, 9, .28);
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alliance-manage-member-row:hover,
.alliance-manage-member-row:active,
.alliance-manage-member-row:focus,
.alliance-manage-member-row:focus-visible {
  background: rgba(69, 20, 9, .28);
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.alliance-manage-member-row.selected {
  border-color: rgba(255, 222, 117, .55);
  background: rgba(106, 43, 12, .38);
}

.alliance-manage-member-row > b {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  color: #d9a95d;
  font-size: 6.5px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .9);
}

.alliance-manage-row-avatar {
  position: absolute;
  left: var(--alliance-manage-row-x, 29px);
  top: var(--alliance-manage-row-y, 19px);
  width: var(--alliance-manage-row-w, 28px);
  height: var(--alliance-manage-row-h, 28px);
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.alliance-manage-row-avatar:hover,
.alliance-manage-row-avatar:active,
.alliance-manage-row-avatar:focus,
.alliance-manage-row-avatar:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.alliance-manage-row-avatar img,
.alliance-manage-selected-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(238, 188, 83, .82);
  display: block;
}

.alliance-manage-row-info {
  position: absolute;
  left: var(--alliance-manage-row-x, 96px);
  top: var(--alliance-manage-row-y, 19px);
  width: var(--alliance-manage-row-w, 108px);
  height: var(--alliance-manage-row-h, 31px);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  gap: 1px;
  overflow: visible;
}

.alliance-manage-row-info .compact-player-name-group {
  font-size: var(--alliance-manage-row-size, 8px);
}

.alliance-manage-row-info .compact-player-vip {
  min-width: 19px;
  font-size: 5.8px;
  line-height: 1.08;
}

.alliance-manage-row-info .compact-player-name {
  font-size: var(--alliance-manage-row-size, 8px);
}

.alliance-manage-row-info .compact-player-identity {
  width: 11px;
  height: 11px;
}

.alliance-manage-row-info small,
.alliance-manage-selected-info small,
.alliance-manage-hint {
  display: block;
  color: #d9b06c;
  font-size: calc(var(--alliance-size, 9px) * .9);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-manage-row-info small {
  font-size: calc(var(--alliance-manage-row-size, 8px) * .78);
}

.alliance-manage-row-role-name,
.alliance-manage-member-row > em {
  position: absolute;
  left: var(--alliance-manage-row-x, 163px);
  top: var(--alliance-manage-row-y, 19px);
  width: var(--alliance-manage-row-w, 30px);
  height: var(--alliance-manage-row-h, 20px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  color: #fff0a8;
  font-size: var(--alliance-manage-row-size, 8px);
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.alliance-manage-row-role-name {
  color: #ffd574;
  font-size: var(--alliance-manage-row-size, 7px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .92), 0 0 4px rgba(255, 205, 83, .25);
}

.alliance-manage-member-row > em.is-offline {
  color: #9e7a58;
}

.alliance-manage-selected-avatar,
.alliance-manage-role-display,
.alliance-manage-action {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 54px);
  height: var(--alliance-h, 54px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.alliance-manage-selected-avatar:hover,
.alliance-manage-selected-avatar:active,
.alliance-manage-selected-avatar:focus,
.alliance-manage-selected-avatar:focus-visible,
.alliance-manage-role-display:hover,
.alliance-manage-role-display:active,
.alliance-manage-role-display:focus,
.alliance-manage-role-display:focus-visible,
.alliance-manage-action:hover,
.alliance-manage-action:active,
.alliance-manage-action:focus,
.alliance-manage-action:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.alliance-manage-selected-info {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 50%);
  width: var(--alliance-w, 104px);
  height: var(--alliance-h, 36px);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  overflow: visible;
  color: #ffe7a7;
  font-size: var(--alliance-size, 8px);
  text-align: center;
}

.alliance-manage-selected-info .compact-player-name-group {
  justify-content: center;
  font-size: var(--alliance-size, 8px);
}

.alliance-manage-selected-info .compact-player-vip {
  min-width: 20px;
  font-size: 6px;
}

.alliance-manage-selected-info .compact-player-name {
  font-size: var(--alliance-size, 8px);
}

.alliance-manage-selected-info .compact-player-identity {
  width: 12px;
  height: 12px;
}

.alliance-manage-role-display {
  display: grid;
  place-items: center;
}

.alliance-manage-role-display img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 1px rgba(24, 6, 1, .55));
}

.alliance-manage-action {
  display: grid;
  place-items: center;
  color: transparent;
  font-size: 0;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 34;
}

.alliance-manage-action img {
  display: none !important;
}

.alliance-role-picker,
.alliance-gift-picker {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 210px;
  transform: translate(-50%, -50%);
  z-index: 3600;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 220, 118, .68);
  border-radius: 4px;
  background: rgba(45, 15, 7, .94);
  box-shadow: 0 0 18px rgba(21, 6, 2, .65);
  color: #ffe4a4;
  text-align: center;
}

.alliance-role-picker strong,
.alliance-gift-picker strong {
  color: #fff1bd;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .95);
}

.alliance-role-picker div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.alliance-role-picker button,
.alliance-gift-picker button {
  min-width: 0;
  height: 28px;
  padding: 0 3px;
  border: 1px solid rgba(224, 170, 78, .65);
  border-radius: 3px;
  background: rgba(106, 43, 13, .86);
  color: #ffe6a6;
  font-size: 8px;
  font-weight: 900;
  box-shadow: none;
}

.alliance-role-picker button:disabled,
.alliance-gift-picker button:disabled {
  color: rgba(189, 145, 96, .55);
  border-color: rgba(128, 86, 44, .45);
  background: rgba(38, 18, 10, .72);
  filter: grayscale(.35) brightness(.72);
}

.alliance-role-picker .alliance-role-picker-close,
.alliance-gift-picker .alliance-role-picker-close {
  position: absolute;
  right: 6px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 221, 126, .72);
  border-radius: 50%;
  background: rgba(83, 30, 13, .9);
  color: #ffe6a6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-indent: 0;
  box-shadow: none;
  filter: none;
}

.alliance-gift-main,
.alliance-gift-resource,
.alliance-gift-resource-tabs {
  display: grid;
  gap: 6px;
}

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

.alliance-gift-resource-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.alliance-gift-resource-tabs.is-resource-list {
  grid-template-columns: 1fr;
}

.alliance-gift-resource-tabs.is-resource-list .alliance-gift-resource-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  align-items: center;
  gap: 6px;
}

.alliance-gift-resource-tabs.is-resource-list .alliance-gift-resource-row input {
  width: 64px;
  height: 24px;
}
.alliance-gift-resource-row {
  display: grid;
  grid-template-columns: 1fr 58px;
  align-items: center;
  gap: 6px;
}

.alliance-gift-resource-row > span {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #ffe6a6;
  font-size: var(--alliance-size, 9px);
  font-weight: 900;
}

.alliance-gift-resource-row img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.alliance-gift-resource-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-gift-resource-row input {
  width: 58px;
  height: 22px;
  min-width: 0;
  border: 1px solid rgba(224, 170, 78, .65);
  border-radius: 3px;
  background: rgba(22, 9, 4, .72);
  color: #ffe6a6;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  outline: 0;
  box-shadow: none;
}
.alliance-gift-resource-tabs button.is-selected {
  color: #fff6c8;
  border-color: rgba(255, 227, 126, .85);
  background: rgba(142, 65, 18, .95);
}
.alliance-gift-resource-tabs button {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: center;
  gap: 2px;
}

.alliance-gift-resource-tabs button img {
  width: 13px;
  height: 13px;
  object-fit: contain;
  pointer-events: none;
}

.alliance-gift-resource-tabs button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-gift-resource label {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 5px;
  color: #f2d391;
  font-size: 8px;
  font-weight: 900;
}

.alliance-gift-resource input {
  min-width: 0;
  height: 24px;
  border: 1px solid rgba(224, 170, 78, .65);
  border-radius: 3px;
  background: rgba(22, 9, 4, .72);
  color: #ffe6a6;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  outline: 0;
  box-shadow: none;
}

.alliance-gift-resource input:focus {
  border-color: rgba(255, 227, 126, .85);
  box-shadow: none;
}

.bag-system.is-alliance-gift-mode .bag-gift-tip {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 172px;
  height: 16px;
  transform: translateX(-50%);
  z-index: 96;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff0b8;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(42, 17, 4, .82);
  pointer-events: none;
}

.bag-system.is-alliance-gift-mode .bag-gift-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 98;
  min-width: 160px;
  max-width: 80%;
  padding: 6px 10px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 218, 112, .72);
  border-radius: 999px;
  background: rgba(45, 15, 7, .95);
  color: #ffe3a1;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .92);
  pointer-events: none;
}


.alliance-gift-confirm-layer {
  position: absolute;
  left: 50%;
  bottom: 48px;
  width: 260px;
  transform: translateX(-50%);
  z-index: 3900;
  padding: 8px;
  border: 1px solid rgba(255, 218, 112, .72);
  border-radius: 5px;
  background: rgba(45, 15, 7, .95);
  box-shadow: none;
}
.alliance-role-confirm {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-top: 2px;
  color: #ffe3a1;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .92);
}

.alliance-role-confirm strong {
  display: block;
  width: 100%;
  text-align: center;
}

.alliance-role-confirm span {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.alliance-role-confirm button {
  width: 48px;
  height: 24px;
  font-size: 9px;
}

.alliance-live-edit .alliance-manage-action[data-alliance-editable="1"] {
  z-index: 3200 !important;
  outline: 2px dashed rgba(255, 235, 120, .98) !important;
  outline-offset: -1px;
  border: 1px dashed rgba(255, 235, 120, .98) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.alliance-live-edit .alliance-manage-action[data-alliance-editable="1"].is-live-selected {
  outline: 2px dashed rgba(255, 244, 142, 1) !important;
  border-color: rgba(255, 244, 142, 1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-manage-hint {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 88%);
  width: var(--alliance-w, 230px);
  height: var(--alliance-h, 24px);
  transform: translate(-50%, -50%);
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.alliance-live-edit [data-alliance-editable="1"],
.alliance-live-edit #gameModalBody[data-alliance-editable="1"] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  outline-offset: 0;
  background-color: transparent;
  cursor: move;
  touch-action: none;
  pointer-events: auto;
}

.alliance-live-edit #gameModalClose[data-alliance-editable="1"],
.alliance-live-edit .alliance-back-button[data-alliance-editable="1"] {
  z-index: 2800 !important;
  border: 1px dashed rgba(255, 230, 120, .95) !important;
  background: transparent !important;
  color: transparent !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

.alliance-live-edit [data-alliance-editable="1"].is-live-selected,
.alliance-live-edit #gameModalBody[data-alliance-editable="1"].is-live-selected {
  outline: 2px dashed rgba(255, 244, 142, .98);
  background-color: transparent;
}

.alliance-live-edit #gameModalClose[data-alliance-editable="1"].is-live-selected,
.alliance-live-edit .alliance-back-button[data-alliance-editable="1"].is-live-selected {
  border: 2px dashed rgba(255, 244, 142, .98) !important;
  background: transparent !important;
}

.alliance-live-edit .alliance-member-row[data-alliance-editable="1"] {
  outline-offset: -1px;
}

.alliance-members-only-edit .alliance-member-row {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-members-only-edit .alliance-member-row:hover,
.alliance-members-only-edit .alliance-member-row:active,
.alliance-members-only-edit .alliance-member-row:focus-within {
  background: transparent !important;
}

.alliance-live-edit .alliance-live-editor-panel,
.alliance-live-edit .alliance-live-editor-panel *,
.alliance-live-edit .alliance-live-resize-handle {
  pointer-events: auto !important;
}
.alliance-member-admin-panel {
  color: #f5d69a;
  font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}

.alliance-admin-tabs {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 25%);
  width: var(--alliance-w, 170px);
  height: var(--alliance-h, 26px);
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}

.alliance-admin-tab-hotspot {
  position: absolute;
  left: var(--alliance-x, 50%);
  top: var(--alliance-y, 25%);
  width: var(--alliance-w, 81px);
  height: var(--alliance-h, 26px);
  transform: translate(-50%, -50%);
  z-index: 6;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  pointer-events: auto;
}

.alliance-admin-tab-hotspot.is-active {
  background: transparent;
  color: transparent;
  filter: none;
}

.alliance-admin-tab-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffe4a4;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 1px rgba(30, 8, 2, .95);
  pointer-events: none;
}

.alliance-live-edit .alliance-admin-tab-hotspot[data-alliance-editable="1"] {
  outline: 2px dashed rgba(255, 235, 120, .98) !important;
  outline-offset: -1px;
  border: 1px dashed rgba(255, 235, 120, .98) !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.alliance-live-edit .alliance-admin-tab-hotspot[data-alliance-editable="1"].is-live-selected {
  outline: 2px dashed rgba(255, 244, 142, 1) !important;
  border-color: rgba(255, 244, 142, 1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-admin-list {
  position: absolute;
  left: var(--alliance-x, 45%);
  top: var(--alliance-y, 56%);
  width: var(--alliance-w, 248px);
  height: var(--alliance-h, 195px);
  transform: translate(-50%, -50%);
  display: block;
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  z-index: 3;
}

.alliance-live-edit .alliance-admin-list {
  overflow: visible;
}

.alliance-admin-list::-webkit-scrollbar {
  display: none;
}

.alliance-admin-row {
  position: relative;
  width: var(--alliance-admin-w, 238px);
  min-height: var(--alliance-admin-h, 39px);
  height: var(--alliance-admin-h, 39px);
  margin-left: max(0px, calc(var(--alliance-admin-x, 124px) - var(--alliance-admin-w, 238px) / 2));
  padding: 0 58px 0 37px;
  border: 1px solid rgba(211, 151, 62, .18);
  border-radius: 4px;
  background: rgba(69, 20, 9, .28);
  box-shadow: none;
}

.alliance-live-edit .alliance-admin-row[data-alliance-editable="1"] {
  outline: 2px dashed rgba(255, 235, 120, .98) !important;
  outline-offset: -1px;
  border: 1px dashed rgba(255, 235, 120, .98) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-live-edit .alliance-admin-row[data-alliance-editable="1"].is-live-selected {
  outline: 2px dashed rgba(255, 244, 142, 1) !important;
  border-color: rgba(255, 244, 142, 1) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.alliance-live-edit .alliance-admin-row[data-alliance-editable="1"],
.alliance-live-edit .alliance-admin-row[data-alliance-editable="1"] * {
  pointer-events: auto !important;
}

.alliance-admin-row > b {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 18px;
  transform: translateY(-50%);
  color: #d9a95d;
  font-size: 6.5px;
  font-weight: 900;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.alliance-admin-avatar {
  position: absolute;
  left: var(--alliance-admin-x, 31px);
  top: var(--alliance-admin-y, 20px);
  width: var(--alliance-admin-w, 27px);
  height: var(--alliance-admin-h, 27px);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.alliance-admin-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(238, 188, 83, .82);
  border-radius: 50%;
  object-fit: cover;
}

.alliance-admin-info {
  position: absolute;
  left: var(--alliance-admin-x, 93px);
  top: var(--alliance-admin-y, 20px);
  width: var(--alliance-admin-w, 122px);
  min-height: var(--alliance-admin-h, 32px);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  gap: 1px;
  overflow: visible;
}

.alliance-admin-info .compact-player-name-group {
  font-size: var(--alliance-admin-size, 8px);
  gap: 2px;
}

.alliance-admin-info .compact-player-vip {
  min-width: 20px;
  font-size: 5.8px;
  line-height: 1.08;
}

.alliance-admin-info .compact-player-name {
  font-size: var(--alliance-admin-size, 8px);
  letter-spacing: 0;
}

.alliance-admin-info .compact-player-identity {
  width: 12px;
  height: 12px;
}

.alliance-admin-info small {
  display: block;
  overflow: hidden;
  color: #d9b06c;
  font-size: calc(var(--alliance-admin-size, 8px) * .82);
  font-weight: 800;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-admin-row-actions {
  position: absolute;
  left: var(--alliance-admin-x, 202px);
  top: var(--alliance-admin-y, 20px);
  display: grid;
  grid-template-columns: repeat(2, 25px);
  gap: 3px;
  width: var(--alliance-admin-w, 56px);
  height: var(--alliance-admin-h, 24px);
  transform: translate(-50%, -50%);
}

.alliance-admin-row-actions button,
.alliance-admin-action-icon {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
}

.alliance-admin-action-icon[data-alliance-item] {
  position: absolute;
  left: var(--alliance-admin-x, 202px);
  top: var(--alliance-admin-y, 20px);
  width: var(--alliance-admin-w, 26px);
  height: var(--alliance-admin-h, 24px);
  transform: translate(-50%, -50%);
}

.alliance-admin-action-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.alliance-admin-row-actions button:disabled,
.alliance-admin-action-icon:disabled {
  opacity: .45;
  filter: grayscale(.35);
}

.alliance-admin-detail {
  position: absolute;
  left: var(--alliance-x, 72%);
  top: var(--alliance-y, 55%);
  width: var(--alliance-w, 92px);
  min-height: var(--alliance-h, 94px);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 8px;
  color: #f0c879;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 1px rgba(31, 8, 2, .9);
  z-index: 3;
}

.alliance-admin-detail strong {
  color: #fff0a8;
  font-size: 10px;
}

.alliance-admin-empty {
  display: grid;
  place-items: center;
  height: 56px;
  color: #d9b06c;
  font-size: 9px;
  font-weight: 900;
}

.alliance-admin-result {
  top: 84%;
  color: #ffe2a0;
}

.alliance-admin-confirm {
  z-index: 3800;
}

.alliance-member-admin-panel .alliance-admin-confirm {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(230px, calc(100% - 24px)) !important;
  margin: 0 !important;
  z-index: 3900 !important;
  place-items: center !important;
  text-align: center !important;
}

.alliance-member-admin-panel .alliance-admin-confirm button,
.alliance-member-admin-panel .alliance-admin-confirm button:hover,
.alliance-member-admin-panel .alliance-admin-confirm button:active,
.alliance-member-admin-panel .alliance-admin-confirm button:focus,
.alliance-member-admin-panel .alliance-admin-confirm button:focus-visible {
  box-shadow: none !important;
  background: rgba(108, 44, 12, .74) !important;
}

.alliance-member-admin-panel .alliance-admin-confirm span {
  justify-content: center;
}

.alliance-member-admin-panel button:hover,
.alliance-member-admin-panel button:active,
.alliance-member-admin-panel button:focus,
.alliance-member-admin-panel button:focus-visible,
.alliance-admin-tab-hotspot:hover,
.alliance-admin-tab-hotspot:active,
.alliance-admin-tab-hotspot:focus,
.alliance-admin-tab-hotspot:focus-visible,
.alliance-admin-action-icon:hover,
.alliance-admin-action-icon:active,
.alliance-admin-action-icon:focus,
.alliance-admin-action-icon:focus-visible {
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-skin-alliance button,
.modal-skin-alliance button:hover,
.modal-skin-alliance button:active,
.modal-skin-alliance button:focus,
.modal-skin-alliance button:focus-visible {
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.player-profile-mainline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38em;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  transform-origin: center;
  flex: 0 0 auto;
}

.player-profile-mainline .vip-name,
.player-profile-mainline strong {
  flex: 0 0 auto;
}

.player-profile-mainline em,
.player-profile-main small {
  color: #f5d596;
  font-size: .82em;
  font-weight: 800;
  font-style: normal;
  flex: 0 0 auto;
}

.player-profile-mainline .player-profile-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .12em;
  border-width: 1px;
  border-style: solid;
  border-radius: 2px;
  font-size: .66em;
  line-height: 1.08;
  box-shadow: none;
  text-shadow: none;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.player-profile-identity {
  display: inline-grid;
  place-items: center;
  width: 1.65em;
  height: 1.65em;
  flex: 0 0 auto;
}

.player-profile-identity:empty {
  display: none;
}

.player-profile-identity .vip-identity-emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 1px rgba(35, 7, 2, .85)) drop-shadow(0 0 4px rgba(255, 208, 92, .38));
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
  pointer-events: none;
}

.player-profile-alliance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .82em;
  text-align: center;
  font-style: normal;
  font-size: .82em;
  font-weight: 800;
  line-height: 1;
  color: #f5d596;
  white-space: nowrap;
  flex: 0 0 auto;
}

.player-profile-alliance.is-empty {
  margin-left: 1.16em;
  font-size: .7em;
  color: #dcc18a;
  opacity: .92;
}

.player-profile-stats {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  overflow: auto;
  scrollbar-width: none;
}

.player-profile-stats::-webkit-scrollbar { width: 0; height: 0; }

.player-profile-stat-row {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: nowrap;
  color: #f4d28d;
  font-size: var(--player-profile-size, 11px);
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .92);
}

.player-profile-stat-row .info-row {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-player-profile .player-profile-stat-row .info-row b {
  color: #d0a45e;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .9);
}

.modal-skin-player-profile .player-profile-stat-row .info-row span {
  color: #f3cf84;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .96), 0 0 3px rgba(255, 210, 94, .22);
}

.player-profile-result {
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: #f6d58b;
  font-size: var(--player-profile-size, 10px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 1px rgba(32, 8, 2, .96), 0 0 3px rgba(255, 210, 96, .28);
  white-space: normal;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.player-profile-actions {
  display: contents;
}

.player-profile-actions button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #ffe8a4;
  font-weight: 900;
  font-size: var(--player-profile-size, 13px);
  text-shadow: 0 1px 1px rgba(35, 9, 2, .95);
}

.player-profile-actions button[data-player-close] {
  color: transparent;
  text-shadow: none;
  box-shadow: none;
}

.player-profile-actions button[data-player-private-message],
.player-profile-actions button[data-player-add-friend] {
  color: transparent;
  text-shadow: none;
  box-shadow: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.player-profile-actions button[data-player-add-friend] {
  background-image: url("../assets/hud/crops/social_identity_clean_v1073/add_friend_v1_webp_q82.webp");
}

.player-profile-actions button[data-player-private-message] {
  background-image: url("../assets/hud/crops/social_identity_clean_v1073/private_message_v1_webp_q82.webp");
}

.player-profile-actions button[data-player-add-friend]:disabled {
  filter: grayscale(.45) brightness(.72);
  opacity: .68;
}

.game-modal.modal-skin-friends {
  position: relative;
  width: min(92vw, calc(84dvh * .6667), 342px);
  height: min(84dvh, calc(92vw / .6667), 513px);
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #f7deb0;
}

.game-modal.modal-skin-march-queue {
  position: relative;
  width: min(92vw, 360px);
  height: min(88dvh, 540px);
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  color: #ffe8b4;
  box-shadow: none;
}

.modal-skin-march-queue .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.modal-skin-march-queue #gameModalTitle {
  display: none;
}

.modal-skin-march-queue #gameModalClose {
  position: absolute;
  right: auto;
  left: var(--march-queue-x, 328px);
  top: var(--march-queue-y, 51px);
  z-index: 8;
  width: var(--march-queue-w, 38px);
  height: var(--march-queue-h, 38px);
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: transparent;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.modal-skin-march-queue #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
}

.march-queue-panel {
  position: absolute;
  inset: 0;
  color: #ffe8b4;
  font-size: 10px;
}

.modal-skin-march-queue [data-march-queue-item] {
  position: absolute;
  left: var(--march-queue-x, 50%);
  top: var(--march-queue-y, 50%);
  width: var(--march-queue-w, auto);
  height: var(--march-queue-h, auto);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--march-queue-size, 10px);
  box-sizing: border-box;
}

.march-queue-back {
  z-index: 8;
  min-width: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: transparent;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}

.march-queue-tab {
  z-index: 6;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #f8d79a;
  font-size: var(--march-queue-size, 12px);
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(35, 8, 2, .95);
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0;
  min-width: 0;
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.march-queue-tab:hover,
.march-queue-tab:active,
.march-queue-tab:focus,
.march-queue-tab:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}

.march-queue-tab.is-active {
  color: #fff8d7;
  background: transparent !important;
}

.march-queue-list {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 2px 4px 8px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.march-queue-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.march-queue-row {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(230, 174, 78, .32);
  border-radius: 6px;
  background: rgba(41, 16, 7, .48);
  box-shadow: inset 0 0 0 1px rgba(255, 229, 154, .08);
}

.march-queue-row strong {
  color: #fff1b2;
  font-size: 11px;
  line-height: 1.15;
}

.march-queue-row span,
.march-queue-row em,
.march-queue-row small {
  min-width: 0;
  color: #f0d4a1;
  font-style: normal;
  font-size: 9px;
  line-height: 1.18;
}

.march-queue-row.is-empty {
  min-height: 72px;
  align-content: center;
  text-align: center;
}

.game-modal.modal-skin-gameplay-rules {
  position: relative;
  width: min(94vw, 405px);
  height: min(88dvh, 540px);
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background: var(--modal-bg) center / 100% 100% no-repeat;
  color: #ffe8b4;
  box-shadow: none;
}

.modal-skin-gameplay-rules .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.modal-skin-gameplay-rules #gameModalTitle {
  position: absolute;
  left: var(--gameplay-rules-x, 180px);
  top: var(--gameplay-rules-y, 54px);
  width: var(--gameplay-rules-w, 150px);
  height: var(--gameplay-rules-h, 34px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  color: #fff1bd;
  font-size: var(--gameplay-rules-size, 17px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(37, 9, 2, .92), 0 0 7px rgba(255, 191, 58, .46);
  pointer-events: none;
}

.modal-skin-gameplay-rules #gameModalClose {
  position: absolute;
  right: auto;
  left: var(--gameplay-rules-x, 311px);
  top: var(--gameplay-rules-y, 64px);
  z-index: 9;
  width: var(--gameplay-rules-w, 38px);
  height: var(--gameplay-rules-h, 38px);
  min-width: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: transparent;
  box-shadow: none !important;
  outline: 0 !important;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.modal-skin-gameplay-rules #gameModalClose::before,
.modal-skin-gameplay-rules #gameModalClose::after {
  content: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  height: 8%;
  min-height: 2px;
  border-radius: 999px;
  background: #ffe8a2;
  box-shadow: 0 1px 2px rgba(38, 9, 2, .86), 0 0 5px rgba(255, 198, 72, .38);
}

.modal-skin-gameplay-rules #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-gameplay-rules #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-gameplay-rules #gameModalClose:hover,
.modal-skin-gameplay-rules #gameModalClose:active,
.modal-skin-gameplay-rules #gameModalClose:focus,
.modal-skin-gameplay-rules #gameModalClose:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: brightness(1.06);
}

.modal-skin-gameplay-rules #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
}

.gameplay-rules-panel {
  position: absolute;
  inset: 0;
  color: #5e3915;
}

.gameplay-rules-nav {
  position: absolute;
  left: var(--gameplay-rules-x, 100px);
  top: var(--gameplay-rules-y, 288px);
  width: var(--gameplay-rules-w, 92px);
  height: var(--gameplay-rules-h, 356px);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.gameplay-rules-nav::-webkit-scrollbar,
.gameplay-rules-detail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.gameplay-rules-nav button {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 38px;
  padding: 5px 4px;
  border: 1px solid rgba(133, 75, 20, .28);
  border-radius: 5px;
  background: rgba(255, 227, 154, .22);
  box-shadow: none;
  color: #6c4218;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gameplay-rules-nav button:hover,
.gameplay-rules-nav button:active,
.gameplay-rules-nav button:focus,
.gameplay-rules-nav button:focus-visible {
  outline: 0;
  box-shadow: none;
  background: rgba(255, 226, 139, .34);
}

.gameplay-rules-nav button.is-active {
  border-color: rgba(175, 103, 28, .62);
  background: linear-gradient(180deg, rgba(255, 236, 165, .58), rgba(204, 129, 38, .22));
}

.gameplay-rules-nav strong {
  font-size: calc(var(--gameplay-rules-size, 10px) + 2px);
  font-weight: 900;
  line-height: 1.05;
  color: #7a4212;
  text-shadow: 0 1px 0 rgba(255, 246, 193, .7);
}

.gameplay-rules-nav span {
  font-size: max(7px, calc(var(--gameplay-rules-size, 10px) - 2px));
  font-weight: 700;
  line-height: 1.1;
  color: #73522d;
}

.gameplay-rules-detail {
  position: absolute;
  left: var(--gameplay-rules-x, 220px);
  top: var(--gameplay-rules-y, 288px);
  width: var(--gameplay-rules-w, 158px);
  height: var(--gameplay-rules-h, 356px);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  min-width: 0;
  overflow-y: auto;
  padding: 1px 3px 8px 2px;
  scrollbar-width: none;
}

.gameplay-rules-detail header {
  display: grid;
  gap: 2px;
  margin-bottom: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(129, 79, 25, .28);
}

.gameplay-rules-detail header strong {
  color: #7b4214;
  font-size: calc(var(--gameplay-rules-size, 10px) + 5px);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 241, 178, .68);
}

.gameplay-rules-detail header span {
  color: #6f4e27;
  font-size: max(8px, calc(var(--gameplay-rules-size, 10px) - 1px));
  font-weight: 800;
  line-height: 1.15;
}

.gameplay-rules-list {
  width: 100%;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 0;
}

.gameplay-rules-list article {
  display: grid;
  gap: 3px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(129, 79, 25, .2);
}

.gameplay-rules-list strong {
  color: #7b4515;
  font-size: calc(var(--gameplay-rules-size, 10px) + 1px);
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 241, 178, .6);
}

.gameplay-rules-list span {
  color: #553817;
  font-size: max(8px, calc(var(--gameplay-rules-size, 10px) - 1px));
  font-weight: 700;
  line-height: 1.32;
}

.gameplay-rules-live-edit [data-gameplay-rules-item] {
  outline: 0;
  user-select: none;
  touch-action: none;
}

.gameplay-rules-live-edit [data-gameplay-rules-item].is-live-selected {
  z-index: 95;
}

.gameplay-rules-live-edit .gameplay-rules-live-editor-panel,
.gameplay-rules-live-edit .gameplay-rules-live-editor-panel * {
  pointer-events: auto !important;
}

.gameplay-rules-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.gameplay-rules-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--gameplay-rules-hit-x);
  top: var(--gameplay-rules-hit-y);
  width: var(--gameplay-rules-hit-w);
  height: var(--gameplay-rules-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .82);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.gameplay-rules-live-hitbox:hover,
.gameplay-rules-live-hitbox:active,
.gameplay-rules-live-hitbox:focus,
.gameplay-rules-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.gameplay-rules-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.gameplay-rules-live-resize-handle {
  position: absolute;
  left: var(--gameplay-rules-handle-x);
  top: var(--gameplay-rules-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.gameplay-rules-live-resize-handle[hidden] {
  display: none;
}

.march-queue-live-edit [data-march-queue-item] {
  outline: 0;
  user-select: none;
  touch-action: none;
}

.march-queue-live-edit [data-march-queue-item].is-live-selected {
  z-index: 95;
}

.march-queue-live-edit .march-queue-live-editor-panel,
.march-queue-live-edit .march-queue-live-editor-panel * {
  pointer-events: auto !important;
}

.march-queue-live-hitbox-layer {
  position: absolute;
  inset: 0;
  z-index: 115;
  pointer-events: none;
}

.march-queue-live-hitbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--march-queue-hit-x);
  top: var(--march-queue-hit-y);
  width: var(--march-queue-hit-w);
  height: var(--march-queue-hit-h);
  padding: 0;
  border: 1px dashed rgba(255, 225, 111, .82);
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  transform: none;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
}

.march-queue-live-hitbox:hover,
.march-queue-live-hitbox:active,
.march-queue-live-hitbox:focus,
.march-queue-live-hitbox:focus-visible {
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.march-queue-live-hitbox.is-live-selected {
  border: 2px solid rgba(238, 45, 45, .95);
}

.march-queue-live-resize-handle {
  position: absolute;
  left: var(--march-queue-handle-x);
  top: var(--march-queue-handle-y);
  z-index: 130;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.march-queue-live-resize-handle[hidden] {
  display: none;
}

.modal-skin-friends .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-friends #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 9.2%;
  min-width: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffe2a0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 2px rgba(45, 9, 0, .98), 0 0 6px rgba(155, 63, 12, .74);
}

.modal-skin-friends #gameModalTitle {
  display: none;
}

.modal-skin-friends #gameModalClose {
  position: absolute;
  left: var(--friends-x, 87%);
  top: var(--friends-y, 9.8%);
  width: var(--friends-w, 36px);
  height: var(--friends-h, 36px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  font-size: var(--friends-size, 18px);
}

.modal-skin-friends #gameModalClose::before,
.modal-skin-friends #gameModalClose::after {
  content: none;
}

.modal-skin-friends #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-friends #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-friends #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
}

.friends-panel {
  position: absolute;
  left: 13%;
  top: 15%;
  width: 74%;
  height: 74%;
  display: grid;
  grid-template-rows: 34px 22px auto minmax(0, 1fr) 24px;
  gap: 5px;
}

.modal-skin-friends [data-friends-item]:not(.friend-request-row [data-friends-item]):not(.friend-list-row [data-friends-item]) {
  position: absolute;
  left: var(--friends-x);
  top: var(--friends-y);
  width: var(--friends-w);
  height: var(--friends-h);
  transform: translate(-50%, -50%);
  font-size: var(--friends-size, 10px);
}

.modal-skin-friends .friends-panel {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  display: block;
}

.modal-skin-friends .friends-search[data-friends-item],
.modal-skin-friends .friends-search-clear[data-friends-item],
.modal-skin-friends .friends-search-submit[data-friends-item],
.modal-skin-friends .friends-home-entry[data-friends-item],
.modal-skin-friends .friends-summary[data-friends-item],
.modal-skin-friends .friends-search-results[data-friends-item],
.modal-skin-friends .friend-search-card [data-friends-item],
.modal-skin-friends .friends-request-notice[data-friends-item],
.modal-skin-friends .friends-list[data-friends-item],
.modal-skin-friends .friends-result[data-friends-item] {
  margin: 0;
}

.modal-skin-friends .friends-search[data-friends-item],
.modal-skin-friends .friends-search-clear[data-friends-item],
.modal-skin-friends .friends-search-submit[data-friends-item] {
  min-height: 0;
  height: var(--friends-h);
  font-size: var(--friends-size, 10px);
}

.modal-skin-friends .friends-search[data-friends-item] input,
.modal-skin-friends .friends-search-clear[data-friends-item],
.modal-skin-friends .friends-search-submit[data-friends-item],
.modal-skin-friends .friend-search-card [data-friends-item],
.modal-skin-friends .friends-summary[data-friends-item],
.modal-skin-friends .friends-result[data-friends-item],
.modal-skin-friends .friends-section-title,
.modal-skin-friends .friend-list-row,
.modal-skin-friends .friend-request-row,
.modal-skin-friends .friends-home-entry[data-friends-item],
.modal-skin-friends .friends-request-notice[data-friends-item] {
  font-size: var(--friends-size, 10px);
}

.modal-skin-friends .friends-search-results[data-friends-item] {
  max-height: none;
}

.modal-skin-friends .friends-list[data-friends-item] {
  min-height: 0;
}

.friends-subpanel {
  grid-template-rows: 28px 22px minmax(0, 1fr) 24px;
}

.friends-chat-panel {
  grid-template-rows: 28px 45px minmax(0, 1fr) 34px 24px;
}

.friends-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  justify-self: start;
  min-width: 44px;
  height: 24px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: #ffe2a0;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(34, 6, 0, .96);
}

.modal-skin-friends .friends-back[data-friends-item] {
  position: absolute;
  z-index: 72;
  left: var(--friends-x);
  top: var(--friends-y);
  width: var(--friends-w);
  height: var(--friends-h);
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
}

.friends-back img {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}

.modal-skin-friends .friends-back-icon {
  background: transparent;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
}

.modal-skin-friends .friends-back-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
}

.modal-skin-friends .friends-subpanel .friends-back {
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  text-shadow: none !important;
}

.modal-skin-friends .friends-back,
.modal-skin-friends .friends-back:hover,
.modal-skin-friends .friends-back:active,
.modal-skin-friends .friends-back:focus,
.modal-skin-friends .friends-back:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

.modal-skin-friends .friends-subpanel .friends-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.friends-search {
  display: block;
  align-items: center;
  min-height: 32px;
  padding: 2px 48px 2px 9px;
  border: 1px solid rgba(255, 208, 116, .34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(95, 34, 11, .25), rgba(26, 9, 4, .14)),
    radial-gradient(circle at 18% 50%, rgba(255, 213, 124, .18), transparent 46%);
  box-shadow:
    inset 0 0 0 1px rgba(64, 17, 3, .42),
    inset 0 1px 6px rgba(12, 3, 0, .38),
    0 0 5px rgba(255, 185, 76, .13);
}

.friends-search input {
  min-width: 0;
  width: 100%;
  height: 25px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffe8b2;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(20, 4, 0, .95);
}

.friends-search input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.friends-search input::placeholder {
  color: rgba(238, 198, 123, .72);
}

.friends-search:focus-within {
  border-color: rgba(255, 226, 145, .62);
  box-shadow:
    inset 0 0 0 1px rgba(92, 30, 6, .55),
    inset 0 1px 6px rgba(12, 3, 0, .34),
    0 0 7px rgba(255, 198, 86, .28);
}

.friends-search button {
  height: 24px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe2a0;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(34, 6, 0, .96);
}

.friends-search-clear {
  width: 18px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: #c58a38;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(27, 6, 0, .96), 0 0 4px rgba(255, 188, 76, .28);
  box-shadow: none !important;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.friends-search-clear:active {
  color: #f1c06a;
  transform: translate(-50%, -50%);
}

.friends-search-submit {
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.friends-search-submit img {
  width: 14px;
  height: 14px;
  margin-right: 1px;
  object-fit: contain;
  vertical-align: -2px;
}

.friends-summary,
.friends-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  color: #ffe5aa;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgba(36, 6, 0, .96), 0 0 4px rgba(121, 45, 8, .64);
}

.friends-list {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  padding: 0 3px;
  scrollbar-width: none;
}

.friends-search-results {
  display: block;
  position: relative;
  min-height: 0;
  max-height: none;
  overflow: visible;
  scrollbar-width: none;
}

.friends-search-results:empty {
  display: none;
}

.friends-search-results::-webkit-scrollbar { width: 0; height: 0; }

.friends-list::-webkit-scrollbar { width: 0; height: 0; }

.friends-home-entry {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: transparent;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer;
}

.game-modal:not(.friends-live-edit) .friends-home-entry:hover,
.game-modal:not(.friends-live-edit) .friends-home-entry:active,
.game-modal:not(.friends-live-edit) .friends-home-entry:focus,
.game-modal:not(.friends-live-edit) .friends-home-entry:focus-visible {
  background: transparent !important;
  color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent !important;
}

.game-modal:not(.friends-live-edit) .friends-home-entry {
  outline: 0 !important;
}

.friend-entry-count {
  position: absolute;
  right: 8px;
  top: 12px;
  width: 8px;
  height: 8px;
  min-width: 8px;
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1aa 0 18%, #d83b26 48%, #72150f 100%);
  color: transparent;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
  text-shadow: none;
  box-shadow: 0 0 7px rgba(255, 58, 30, .62);
  animation: friendRequestCountPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

.alliance-nav-count {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  min-width: 8px;
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1aa 0 18%, #d83b26 48%, #72150f 100%);
  color: transparent;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
  text-shadow: none;
  box-shadow: 0 0 6px rgba(255, 58, 30, .58);
  pointer-events: none;
  z-index: 12;
}

.alliance-entry-count {
  position: absolute;
  right: -2px;
  top: 4px;
  width: 8px;
  height: 8px;
  min-width: 8px;
  display: inline-block;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1aa 0 18%, #d83b26 48%, #72150f 100%);
  color: transparent;
  font-size: 0;
  font-weight: 900;
  line-height: 0;
  text-shadow: none;
  box-shadow: 0 0 5px rgba(255, 58, 30, .55);
  pointer-events: none;
}

@keyframes friendRequestCountPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-1px) scale(1.08); filter: brightness(1.22); }
}

.friends-request-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 5px 9px 7px;
}

.friends-request-tabs button {
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #d6ad72;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(35, 6, 0, .96);
}

.friends-request-tabs button.is-active {
  color: #ffe6a8;
  filter: brightness(1.14);
  text-shadow: 0 1px 2px rgba(35, 6, 0, .96), 0 0 7px rgba(224, 118, 42, .6);
}

.friends-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 4px;
  color: #ffd98a;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(35, 8, 0, .95);
}

.friends-section-title strong {
  white-space: nowrap;
}

.friends-section-title span {
  display: none;
  justify-self: center;
  color: #d7a968;
  font-size: 8px;
  white-space: nowrap;
}

.friend-search-card {
  display: contents;
}

.friend-search-card-bg {
  display: block;
  border: 1px solid rgba(214, 159, 76, .44);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 214, 126, .16), transparent 42%),
    linear-gradient(180deg, rgba(65, 23, 10, .42), rgba(21, 8, 5, .24));
  box-shadow:
    inset 0 0 0 1px rgba(78, 25, 7, .5),
    0 2px 8px rgba(17, 4, 0, .28);
}

.friend-search-avatar {
  display: block;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(245, 198, 99, .72), 0 2px 7px rgba(19, 4, 0, .56);
}

.friend-search-vip,
.friend-search-name,
.friend-search-info,
.friend-search-action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(25, 5, 0, .95);
}

.friend-search-vip {
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  color: #fff1b0;
  background: linear-gradient(180deg, rgba(117, 31, 18, .96), rgba(77, 18, 11, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 235, 164, .18), 0 1px 1px rgba(21, 5, 2, .75);
  font-style: normal;
  font-weight: 900;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.friend-search-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.friend-search-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.friend-search-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.friend-search-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.friend-search-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.friend-search-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.friend-search-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.friend-search-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.friend-search-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.friend-search-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.friend-search-name {
  overflow: visible;
  color: #ffe6a2;
  font-weight: 900;
  white-space: nowrap;
}

.friend-search-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.friend-search-emblem .vip-identity-emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.friend-search-info {
  overflow: hidden;
  color: #f0c987;
  font-weight: 800;
}

.friend-search-action {
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffe6a6;
  font-weight: 900;
  cursor: pointer;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.friend-search-action img {
  width: 100%;
  height: 100%;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.friend-search-action:hover,
.friend-search-action:focus,
.friend-search-action:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

.friend-search-action:active {
  transform: translate(-50%, -50%);
  background: transparent !important;
  box-shadow: none !important;
}

.friend-search-action span {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .82em;
}

.friend-search-action.is-pending-label {
  min-width: max-content;
  width: auto;
  padding: 0 2px;
  color: #ffe1a1;
  font-size: max(calc(var(--friends-size, 10px) - 2px), 7px);
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(31, 6, 0, .82);
}

.friend-request-row {
  position: relative;
  display: block;
  width: var(--request-row-w, 214px);
  min-height: var(--request-row-h, 76px);
  margin: 8px 0 0 var(--request-row-left, 0px);
  padding: 0;
  border: 1px solid rgba(167, 98, 38, .46);
  border-radius: 4px;
  background: transparent;
  color: #f2d49a;
  font-size: 10px;
}

.friends-live-edit .friend-request-row[data-friends-editable="1"] {
  cursor: move;
  outline: 1px dashed rgba(255, 230, 120, .34);
  outline-offset: -2px;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.friends-live-edit .friend-request-row[data-friends-editable="1"].is-live-selected {
  outline: 1px dashed rgba(45, 210, 255, .98);
}

.friend-request-row:first-child {
  margin-top: var(--request-row-top, 0px);
}

.friend-request-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: block;
  border-radius: 4px;
  pointer-events: auto;
}

.friend-request-frame[data-friends-item="requestRow"] {
  left: 50%;
  top: 50%;
  width: var(--request-row-w, 100%);
  height: var(--request-row-h, 100%);
}

.friend-request-avatar {
  position: absolute;
  left: var(--request-avatar-x, 76px);
  top: var(--request-avatar-y, 28px);
  width: var(--request-avatar-w, 34px);
  height: var(--request-avatar-h, 34px);
  transform: translate(-50%, -50%);
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(230, 177, 86, .58);
}

.friend-request-row [data-friends-item="requestAvatar"],
.friend-request-row [data-friends-item="requestInfo"],
.friend-request-row [data-friends-item="requestActions"] {
  position: absolute;
  transform: translate(-50%, -50%);
}

.friend-request-row [data-friends-item="requestAvatar"] {
  left: var(--request-avatar-x, 76px);
  top: var(--request-avatar-y, 28px);
  width: var(--request-avatar-w, 34px);
  height: var(--request-avatar-h, 34px);
}

.friend-request-row [data-friends-item="requestInfo"] {
  left: var(--request-info-x, 154px);
  top: var(--request-info-y, 27px);
  width: var(--request-info-w, 112px);
  min-height: var(--request-info-h, 36px);
}

.friend-request-row [data-friends-item="requestActions"] {
  left: var(--request-actions-x, 180px);
  top: var(--request-actions-y, 58px);
  width: var(--request-actions-w, 118px);
  min-height: var(--request-actions-h, 24px);
}

.friend-request-info {
  position: absolute;
  left: var(--request-info-x, 154px);
  top: var(--request-info-y, 27px);
  width: var(--request-info-w, 112px);
  min-height: var(--request-info-h, 36px);
  transform: translate(-50%, -50%);
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: center;
  justify-items: start;
  font-size: var(--request-info-size, 10px);
}

.friend-request-identity-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
}

.friend-request-identity-line .player-identity-name-group,
.friend-request-identity-line .compact-player-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.friend-request-identity-line .compact-player-vip {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 164, .18), 0 1px 1px rgba(21, 5, 2, .75);
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: none;
}

.friend-request-identity-line .compact-player-name {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  color: #fff1b0;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: clip;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .98), 0 0 4px rgba(255, 211, 91, .42);
  white-space: nowrap;
}

.friend-request-identity-line .compact-player-identity {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  min-width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.friend-request-identity-line .compact-player-identity:empty {
  display: none;
}

.friend-request-identity-line .compact-player-identity .vip-identity-emblem {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  filter: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.friend-request-identity-line .compact-player-identity .vip-identity-emblem img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.friend-request-identity-line .compact-player-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.friend-request-identity-line .compact-player-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.friend-request-identity-line .compact-player-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.friend-request-identity-line .compact-player-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.friend-request-identity-line .compact-player-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.friend-request-identity-line .compact-player-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.friend-request-identity-line .compact-player-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.friend-request-identity-line .compact-player-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.friend-request-identity-line .compact-player-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.friend-request-identity-line .compact-player-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.friend-request-identity-line .compact-player-vip.vip-name-level-4,
.friend-request-identity-line .compact-player-vip.vip-name-level-5,
.friend-request-identity-line .compact-player-vip.vip-name-level-6,
.friend-request-identity-line .compact-player-vip.vip-name-level-7,
.friend-request-identity-line .compact-player-vip.vip-name-level-9,
.friend-request-identity-line .compact-player-vip.vip-name-level-10 {
  text-shadow: 0 1px 0 rgba(30, 5, 1, .42);
}

.friend-request-identity-line .compact-player-vip.vip-name-level-8 {
  text-shadow: 0 1px 0 rgba(255, 244, 182, .22);
}

.friend-request-row .vip-name {
  justify-content: start;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.friend-request-identity-line .compact-player-name.vip-name {
  max-width: none;
  overflow: visible;
  color: #fff1b0;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.friend-request-name-line {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.1;
  white-space: nowrap;
}

.friend-request-vip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 12px;
  padding: 0 2px;
  border: 1px solid rgba(255, 218, 126, .7);
  border-radius: 2px;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.friend-request-vip-trigger.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.friend-request-vip-trigger.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.friend-request-vip-trigger.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.friend-request-vip-trigger.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.friend-request-vip-trigger.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.friend-request-vip-trigger.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.friend-request-vip-trigger.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.friend-request-vip-trigger.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.friend-request-vip-trigger.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.friend-request-vip-trigger.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.friend-request-name-trigger {
  display: inline-block;
  max-width: 56px;
  overflow: hidden;
  color: #ffe7a6;
  font-size: inherit;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  vertical-align: middle;
  cursor: pointer;
}

.friend-request-identity-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-style: normal;
  cursor: pointer;
}

.friends-subpanel .friends-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  margin-top: 2px;
  color: #ffe5aa;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(36, 6, 0, .96);
}

.friend-request-identity-trigger .vip-identity-emblem {
  width: 14px;
  height: 14px;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.friend-request-meta {
  overflow: hidden;
  color: #d5ad74;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(34, 5, 0, .9);
}

.friend-request-row span {
  overflow: visible;
  color: #cfa76b;
  font-size: 9px;
  text-overflow: clip;
  white-space: nowrap;
}

.friend-request-row .friend-request-meta {
  overflow: hidden;
  color: #d5ad74;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(34, 5, 0, .9);
}

.friend-request-row button {
  min-width: 42px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #ffe7a0;
  font-size: var(--request-actions-size, 10px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .96);
}

.friend-request-row button img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.friend-request-actions {
  position: absolute;
  left: var(--request-actions-x, 180px);
  top: var(--request-actions-y, 58px);
  width: var(--request-actions-w, 118px);
  min-height: var(--request-actions-h, 24px);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.friend-request-actions button {
  min-width: 22px;
  min-height: 22px;
  padding: 0;
}

.friend-request-actions button img {
  width: 18px;
  height: 18px;
}

.friends-subpanel .friends-list {
  max-height: 286px;
  overflow-y: auto;
}

.friend-list-row {
  position: relative;
  display: grid;
  grid-template-columns: 22px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-bottom: 4px;
  padding: 3px 7px;
  border: 1px solid rgba(180, 130, 59, .32);
  border-radius: 4px;
  background: rgba(26, 13, 7, .42);
  cursor: pointer;
}

.friend-list-row:active {
  filter: brightness(1.13);
  transform: translateY(1px);
}

.friend-list-row > img {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(230, 177, 86, .58), 0 2px 5px rgba(20, 6, 0, .5);
}

.friend-list-row b {
  color: #ffe7a0;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.friend-list-row .friend-row-icon {
  position: absolute;
  left: var(--friend-icon-x, 14px);
  top: var(--friend-icon-y, 17px);
  min-width: var(--friend-icon-w, 14px);
  width: var(--friend-icon-w, 14px);
  height: var(--friend-icon-h, 14px);
  min-height: var(--friend-icon-h, 14px);
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.friend-list-row .friend-row-delete {
  left: var(--friend-row-x, 22px);
  top: var(--friend-row-y, 17px);
  width: var(--friend-row-w, 16px);
  min-width: var(--friend-row-w, 16px);
  height: var(--friend-row-h, 16px);
  min-height: var(--friend-row-h, 16px);
}

.friend-list-row .friend-row-block {
  left: var(--friend-row-x, 199px);
  top: var(--friend-row-y, 17px);
  width: var(--friend-row-w, 16px);
  min-width: var(--friend-row-w, 16px);
  height: var(--friend-row-h, 16px);
  min-height: var(--friend-row-h, 16px);
}

.friend-list-row .friend-row-icon:hover,
.friend-list-row .friend-row-icon:active,
.friend-list-row .friend-row-icon:focus,
.friend-list-row .friend-row-icon:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: brightness(1.12);
  outline: 0;
  transform: translate(-50%, -50%);
}

.friend-list-row .friend-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.friend-list-row div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.friend-list-row .compact-player-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.friend-list-row .compact-player-vip {
  flex: 0 0 auto;
  min-width: 25px;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 235, 164, .18), 0 1px 1px rgba(21, 5, 2, .75);
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-shadow: none;
}

.friend-list-row.friend-blacklist-row {
  grid-template-columns: 22px 28px minmax(0, 1fr) 24px;
}

.friend-list-row .compact-player-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.friend-list-row .compact-player-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.friend-list-row .compact-player-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.friend-list-row .compact-player-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.friend-list-row .compact-player-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.friend-list-row .compact-player-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.friend-list-row .compact-player-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.friend-list-row .compact-player-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.friend-list-row .compact-player-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.friend-list-row .compact-player-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.friend-list-row .compact-player-vip.vip-name-level-4,
.friend-list-row .compact-player-vip.vip-name-level-5,
.friend-list-row .compact-player-vip.vip-name-level-6,
.friend-list-row .compact-player-vip.vip-name-level-7,
.friend-list-row .compact-player-vip.vip-name-level-9,
.friend-list-row .compact-player-vip.vip-name-level-10 {
  text-shadow: 0 1px 0 rgba(30, 5, 1, .42);
}

.friend-list-row .compact-player-vip.vip-name-level-8 {
  text-shadow: 0 1px 0 rgba(255, 244, 182, .22);
}

.friend-list-row .compact-player-name {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  color: #fff1b0;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: clip;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .98), 0 0 4px rgba(255, 211, 91, .42);
  white-space: nowrap;
}

.friend-list-row .compact-player-identity {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.friend-list-row .compact-player-identity:empty {
  display: none;
}

.friend-list-row .compact-player-identity .vip-identity-emblem {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  filter: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.friend-list-row .vip-name:not(.compact-player-name) {
  justify-content: start;
  max-width: none;
  overflow: visible;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.friend-list-row span {
  overflow: hidden;
  color: #d5ad74;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(34, 5, 0, .9);
}

.friend-list-row .friend-row-meta {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) 20px;
  align-items: center;
  column-gap: 8px;
  width: 74px;
  min-width: 0;
}

.friend-list-row .friend-row-meta i,
.friend-list-row .friend-row-meta em {
  font-style: normal;
  white-space: nowrap;
}

.friend-list-row .friend-row-meta i {
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-list-row .friend-presence {
  flex: 0 0 auto;
  font-size: 7px;
  font-weight: 900;
  text-align: right;
}

.friend-list-row .friend-presence.is-online {
  color: #fff2a4;
  text-shadow: 0 0 4px rgba(255, 214, 92, .72), 0 1px 1px rgba(40, 7, 0, .86);
}

.friend-list-row .friend-presence.is-offline {
  color: rgba(178, 126, 76, .62);
  text-shadow: 0 1px 1px rgba(25, 6, 0, .78);
}

.friend-list-row .friend-request-status-meta {
  grid-template-columns: minmax(38px, 1fr) minmax(54px, auto);
  width: 104px;
  column-gap: 9px;
}

.friend-list-row .friend-request-status-meta em {
  overflow: visible;
  color: #ffe1a0;
  font-size: 7px;
  font-weight: 900;
  text-align: right;
  text-overflow: clip;
  text-shadow: 0 1px 1px rgba(28, 7, 1, .92), 0 0 4px rgba(230, 150, 55, .28);
}

.friend-list-row button,
.friend-list-row > em {
  min-width: 34px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 3px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #ffe3a2;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(29, 6, 0, .98);
}

.friend-list-row button img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.friend-list-row .friend-row-icon-button {
  min-width: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent !important;
}

.friend-list-row .friend-row-icon-button:hover,
.friend-list-row .friend-row-icon-button:active,
.friend-list-row .friend-row-icon-button:focus,
.friend-list-row .friend-row-icon-button:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

.friend-list-row .friend-row-icon-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.friend-list-row .friend-row-message {
  min-width: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
  color: transparent;
  font-size: 0;
  text-shadow: none;
  -webkit-tap-highlight-color: transparent !important;
}

.friend-list-row .friend-row-message:hover,
.friend-list-row .friend-row-message:active,
.friend-list-row .friend-row-message:focus,
.friend-list-row .friend-row-message:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

.friend-list-row .friend-row-message img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none;
}

.friend-blacklist-entry {
  position: absolute;
  left: var(--friends-x, 50%);
  top: var(--friends-y, 40%);
  width: var(--friends-w, 20px);
  height: var(--friends-h, 20px);
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, -50%);
  z-index: 4;
}

.friend-blacklist-entry img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.friends-confirm-layer {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(13, 4, 1, .22);
}

.friends-confirm-box {
  width: min(176px, 76%);
  min-height: 82px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 11px 13px 10px;
  border: 1px solid rgba(229, 174, 82, .58);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 215, 128, .18), transparent 50%),
    linear-gradient(180deg, rgba(91, 31, 12, .94), rgba(31, 10, 4, .95));
  box-shadow:
    inset 0 0 0 1px rgba(92, 24, 5, .72),
    0 6px 16px rgba(11, 3, 0, .44);
  color: #ffe8ad;
  text-align: center;
}

.friends-confirm-box strong {
  color: #ffe7a0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(33, 6, 0, .96), 0 0 5px rgba(229, 144, 48, .42);
}

.friends-confirm-box p {
  margin: 0;
  color: #f3c982;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(29, 6, 0, .9);
}

.friends-confirm-box div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.friends-confirm-box button {
  min-width: 48px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(226, 168, 79, .48);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(113, 46, 15, .72), rgba(49, 16, 5, .78));
  color: #ffe5a0;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(29, 6, 0, .96);
  box-shadow: inset 0 0 0 1px rgba(255, 222, 142, .09);
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.friends-confirm-box .friends-confirm-ok {
  color: #fff0b8;
  border-color: rgba(255, 202, 101, .72);
  background: linear-gradient(180deg, rgba(151, 63, 22, .86), rgba(86, 25, 8, .88));
}

.friends-confirm-box button:hover,
.friends-confirm-box button:focus,
.friends-confirm-box button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 142, .12);
}

.friends-confirm-box button:active {
  transform: translateY(1px);
  filter: brightness(1.12);
}

.friends-toast-layer {
  position: absolute;
  inset: 0;
  z-index: 121;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 24px;
}

.friends-toast-box {
  min-width: 128px;
  max-width: 82%;
  padding: 6px 10px;
  border: 1px solid rgba(226, 180, 84, .46);
  border-radius: 999px;
  background: rgba(42, 16, 6, .92);
  color: #ffe7a0;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .96);
  box-shadow: inset 0 0 0 1px rgba(255, 229, 158, .1), 0 4px 12px rgba(0, 0, 0, .26);
}

.friend-blacklist-empty-entry {
  width: 100%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(180, 130, 59, .28);
  background: rgba(26, 13, 7, .28);
  color: #ffe3a2;
  font-size: 9px;
  font-weight: 900;
}

.friend-blacklist-empty-entry img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.friend-list-row.is-pending > em {
  min-width: 42px;
  color: #d8ad78;
  background: transparent;
}

.friends-request-notice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  margin: 0 3px 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: rgba(116, 32, 14, .22);
  color: #ffe8a8;
  font-size: 10px;
  font-weight: 900;
  text-align: left;
  text-shadow: 0 1px 2px rgba(36, 6, 0, .96);
  box-shadow: inset 0 0 0 1px rgba(220, 150, 65, .26), 0 0 7px rgba(176, 43, 18, .18);
}

.friends-request-notice > img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.friends-request-notice span {
  justify-self: end;
  color: #ffdf8b;
  font-size: 9px;
}

.friends-chat-header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 2px 7px;
  cursor: pointer;
}

.friends-chat-header img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(230, 177, 86, .58), 0 2px 5px rgba(20, 6, 0, .5);
}

.friends-chat-header div {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: #ffe8aa;
  font-size: 11px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(34, 6, 0, .96);
}

.friends-chat-header span {
  overflow: hidden;
  color: #d6ad74;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-chat-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  padding: 2px 5px 5px;
  scrollbar-width: none;
}

.friends-chat-list::-webkit-scrollbar { width: 0; height: 0; }

.friends-chat-bubble {
  max-width: 82%;
  padding: 5px 7px;
  border-radius: 6px;
  color: #ffe7ad;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(30, 5, 0, .94);
  word-break: break-word;
}

.friends-chat-bubble.is-in {
  align-self: flex-start;
  background: rgba(72, 37, 22, .42);
  box-shadow: inset 0 0 0 1px rgba(207, 149, 74, .26);
}

.friends-chat-bubble.is-out {
  align-self: flex-end;
  background: rgba(116, 61, 22, .46);
  box-shadow: inset 0 0 0 1px rgba(243, 184, 86, .28);
}

.friends-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 2px 5px;
}

.friends-chat-form input {
  min-width: 0;
  height: 26px;
  border: 0;
  outline: 0;
  background: rgba(26, 11, 6, .24);
  color: #ffe8b2;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px rgba(20, 4, 0, .95);
}

.friends-chat-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe2a0;
  font-size: 10px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(34, 6, 0, .96);
}

.friends-chat-form button img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

.friends-empty {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #e7bf7e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-shadow: 0 1px 2px rgba(30, 5, 0, .94);
}

.friends-search-empty {
  min-height: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 1.15;
}

.modal-skin-ranking .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-ranking #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 128px;
  height: 28px;
  transform: translate(-50%, -50%);
  color: #ffe9aa;
  font-size: 17px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(35, 12, 3, .9);
}

.modal-skin-ranking #gameModalClose {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  pointer-events: auto;
}

.modal-skin-ranking #gameModalClose::before,
.modal-skin-ranking #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #fff0b8;
  box-shadow: 0 1px 1px rgba(44, 16, 4, .8);
}

.modal-skin-ranking #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-ranking #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-ranking #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
}

.ranking-panel {
  position: absolute;
  inset: 0;
  font-family: "Microsoft YaHei", "Noto Serif SC", serif;
}

.ranking-title {
  position: absolute;
  left: 50%;
  top: 72px;
  display: grid;
  width: 248px;
  transform: translateX(-50%);
  text-align: center;
}

.ranking-title strong {
  color: #fff0b4;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 1px rgba(37, 12, 2, .84);
}

.ranking-title span {
  margin-top: 2px;
  color: #fff0b8;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 1px 1px rgba(24, 8, 2, .98), 0 0 3px rgba(255, 209, 98, .34);
}

.ranking-podiums {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.ranking-podium-info {
  position: absolute;
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  box-shadow: none;
  color: #f7dfaa;
  font: inherit;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.ranking-podium-avatar {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  box-shadow: none;
  font: inherit;
  pointer-events: auto;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.ranking-podium-info:hover,
.ranking-podium-avatar:hover,
.ranking-podium-info:focus-visible,
.ranking-podium-avatar:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

.ranking-podium-info:active,
.ranking-podium-avatar:active,
.ranking-podium-info.is-pressed,
.ranking-podium-avatar.is-pressed {
  transform: scale(.96);
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 0 !important;
}

.ranking-podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 0;
  background: transparent;
}

.ranking-podium-info b {
  display: grid;
  place-items: center;
  color: #fff1ba;
  font-size: max(var(--ranking-size, 10px), 7px);
  line-height: 1.15;
}

.ranking-podium-info strong {
  max-width: none;
  overflow: visible;
  color: #fff0b8;
  font-size: max(var(--ranking-size, 9px), 7px);
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.ranking-podium-info span,
.ranking-podium-info em {
  max-width: 100%;
  overflow: hidden;
  color: #ffe8a4;
  font-size: max(calc(var(--ranking-size, 9px) - 2px), 5px);
  font-style: normal;
  line-height: 1.2;
  font-weight: 800;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(35, 10, 3, .98), 0 0 3px rgba(255, 212, 105, .38);
  white-space: nowrap;
}

.ranking-podium-info .ranking-podium-vip {
  display: inline-grid;
  place-items: center;
  width: auto;
  min-width: 24px;
  max-width: none;
  padding: 0 3px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  overflow: visible;
  font-size: max(calc(var(--ranking-size, 9px) - 1px), 6px);
  line-height: 1.18;
  text-align: center;
  text-overflow: clip;
  text-shadow: none;
}

.ranking-podium-info .ranking-podium-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.ranking-podium-info .ranking-podium-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.ranking-list {
  position: absolute;
  left: 50%;
  top: 286px;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 286px;
  height: 160px;
  padding: 2px 4px 8px;
  overflow: auto;
  transform: translateX(-50%);
  scrollbar-width: none;
}

.ranking-list::-webkit-scrollbar { width: 0; height: 0; }

.ranking-row {
  display: grid;
  grid-template-columns: 22px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 7px;
  border: 1px solid rgba(180, 130, 59, .32);
  border-radius: 4px;
  background: rgba(26, 13, 7, .42);
  cursor: pointer;
}

.ranking-row.self {
  border-color: rgba(180, 130, 59, .32);
  background: rgba(26, 13, 7, .42);
}

.ranking-row.self strong {
  color: #fff5c8;
  text-shadow: 0 1px 1px rgba(35, 10, 3, .95), 0 0 4px rgba(255, 218, 111, .42);
}

.ranking-row.selected {
  border-color: rgba(255, 220, 116, .86);
  background: rgba(102, 57, 18, .58);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 160, .22);
}

.ranking-row.self.selected {
  border-color: rgba(255, 220, 116, .9);
  background: rgba(102, 57, 18, .58);
}

.ranking-row b {
  color: #ffe7a0;
  font-size: 10px;
  text-align: center;
}

.ranking-row img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
  cursor: pointer;
}

.ranking-row div {
  display: grid;
  min-width: 0;
}

.ranking-row strong {
  overflow: visible;
  color: #fff0bb;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.ranking-row span,
.ranking-row small {
  overflow: hidden;
  color: #f1d89a;
  font-size: 7px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(31, 11, 4, .92);
  white-space: nowrap;
}

.ranking-row small {
  display: block;
  font-weight: 800;
}

.ranking-row em {
  color: #ffe5a0;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.ranking-tabs {
  position: absolute;
  left: 50%;
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 284px;
  transform: translateX(-50%);
}

.ranking-tabs button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: #d8bd80;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(35, 12, 3, .82);
}

.ranking-tabs button.active {
  color: #fff0b2;
}

.ranking-tabs button:active {
  transform: translateY(1px) scale(.98);
}

.modal-skin-ranking [data-ranking-item] {
  position: absolute;
  left: var(--ranking-x);
  top: var(--ranking-y);
  width: var(--ranking-w);
  height: var(--ranking-h);
  margin: 0;
  font-size: var(--ranking-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-ranking #gameModalTitle[data-ranking-item] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe9aa;
  font-size: var(--ranking-size, 17px);
  line-height: 1;
}

.modal-skin-ranking #gameModalClose[data-ranking-item] {
  left: var(--ranking-x, 326px);
  top: var(--ranking-y, 38px);
  right: auto;
  width: var(--ranking-w, 38px);
  height: var(--ranking-h, 38px);
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  box-shadow: none;
  right: auto;
  color: transparent;
}

.modal-skin-ranking #gameModalClose[data-ranking-item]::before,
.modal-skin-ranking #gameModalClose[data-ranking-item]::after {
  content: none;
}

.modal-skin-ranking .ranking-title[data-ranking-item] {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: hidden;
  text-align: center;
}

.modal-skin-ranking .ranking-title[data-ranking-item] strong {
  display: block;
  width: 100%;
  font-size: max(var(--ranking-size, 12px), 8px);
  line-height: 1.05;
  white-space: nowrap;
}

.modal-skin-ranking .ranking-title[data-ranking-item] span {
  display: block;
  width: 100%;
  color: #fff0b8;
  font-size: max(calc(var(--ranking-size, 12px) - 4px), 6px);
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 1px 1px rgba(24, 8, 2, .98), 0 0 3px rgba(255, 209, 98, .34);
  white-space: nowrap;
}

.modal-skin-ranking .ranking-row .vip-name,
.modal-skin-ranking .ranking-podium-info .vip-name {
  max-width: none;
  overflow: visible;
  font-size: inherit;
  line-height: 1.15;
  text-overflow: clip;
  white-space: nowrap;
}

.modal-skin-ranking .compact-player-name-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  white-space: nowrap;
}

.modal-skin-ranking .compact-player-vip {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 24px;
  padding: 0 2px;
  border: 1px solid rgba(255, 214, 112, .92);
  border-radius: 2px;
  font-size: .68em;
  font-style: normal;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
  text-shadow: none;
}

.modal-skin-ranking .compact-player-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-ranking .compact-player-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-ranking .compact-player-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-ranking .compact-player-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-ranking .compact-player-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-ranking .compact-player-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-ranking .compact-player-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-ranking .compact-player-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.modal-skin-ranking .compact-player-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.modal-skin-ranking .compact-player-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-ranking .compact-player-identity {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-skin-ranking .compact-player-identity:empty {
  display: none;
}

.modal-skin-ranking .compact-player-identity .vip-identity-emblem {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
}

.modal-skin-ranking .ranking-podium-info .vip-name {
  font-size: max(var(--ranking-size, 9px), 7px);
}

.modal-skin-ranking .ranking-row .vip-name em,
.modal-skin-ranking .ranking-podium-info .vip-name em {
  flex: 0 0 auto;
  font-size: .68em;
}

.modal-skin-ranking .ranking-podium-info .vip-name em {
  font-size: .82em;
  padding: 0 3px;
  min-width: 24px;
  line-height: 1.18;
  text-align: center;
}

.modal-skin-ranking .vip-name em {
  color: #fff1b0;
  background: linear-gradient(180deg, rgba(117, 31, 18, .96), rgba(77, 18, 11, .96));
  border-color: rgba(255, 214, 112, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 164, .18), 0 1px 1px rgba(21, 5, 2, .75);
  text-shadow: 0 1px 1px rgba(23, 3, 1, .95);
}

.modal-skin-ranking .ranking-podium-info .vip-name,
.modal-skin-ranking .ranking-row .vip-name {
  color: #fff1b0;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .98), 0 0 4px rgba(255, 211, 91, .42);
}

.modal-skin-ranking .ranking-list[data-ranking-item] {
  display: grid;
  align-content: start;
  overflow: auto;
}

.modal-skin-ranking .ranking-row strong,
.modal-skin-ranking .ranking-row em {
  font-size: max(var(--ranking-size, 9px), 7px);
}

.modal-skin-ranking .ranking-row span {
  font-size: max(calc(var(--ranking-size, 9px) - 2px), 6px);
}

.modal-skin-ranking .ranking-tabs[data-ranking-item] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.modal-skin-ranking .ranking-tabs[data-ranking-item] button {
  min-height: 0;
  font-size: max(var(--ranking-size, 9px), 7px);
}

.ranking-live-edit [data-ranking-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 230, 120, .42);
  outline-offset: -2px;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
  z-index: 90;
}

.ranking-live-edit [data-ranking-item][hidden] {
  display: block !important;
  opacity: .22;
}

.ranking-live-edit [data-ranking-item].is-live-selected {
  outline: 1px dashed rgba(255, 230, 120, .42);
  outline-offset: -2px;
  z-index: 95;
}

.player-profile-live-edit [data-player-profile-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 230, 120, .42);
  outline-offset: -2px;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
  z-index: 90;
}

.player-profile-live-edit [data-player-profile-item][hidden] {
  display: block !important;
  opacity: .22;
}

.player-profile-live-edit [data-player-profile-item].is-live-selected {
  outline: 1px dashed rgba(255, 230, 120, .42);
  outline-offset: -2px;
  z-index: 95;
}

.friends-live-edit [data-friends-editable="1"] {
  cursor: move;
  outline: 1px dashed rgba(255, 230, 120, .42);
  outline-offset: -2px;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
  z-index: 90;
}

.friends-live-edit [data-friends-editable="1"][hidden] {
  display: block !important;
  opacity: .22;
}

.friends-live-edit [data-friends-editable="1"].is-live-selected {
  outline: 1px dashed rgba(45, 210, 255, .98);
  outline-offset: -2px;
  z-index: 95;
}

.friends-live-edit .friend-request-frame[data-friends-item="requestRow"] {
  display: none !important;
  pointer-events: none !important;
}

.friends-live-edit .friend-request-row [data-friends-item="requestAvatar"] {
  z-index: 81;
}

.friends-live-edit .friend-request-row [data-friends-item="requestInfo"] {
  z-index: 82;
}

.friends-live-edit .friend-request-row [data-friends-item="requestActions"] {
  z-index: 83;
}

.friends-live-edit .friend-request-row [data-friends-item="requestActions"] button,
.friends-live-edit .friend-request-row [data-friends-item="requestActions"] img {
  pointer-events: none !important;
}

.friends-live-edit .friends-home-entry[data-friends-editable="1"],
.friends-live-edit .friends-home-entry[data-friends-editable="1"]:hover,
.friends-live-edit .friends-home-entry[data-friends-editable="1"]:active,
.friends-live-edit .friends-home-entry[data-friends-editable="1"]:focus,
.friends-live-edit .friends-home-entry[data-friends-editable="1"]:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  outline: 1px dashed rgba(255, 230, 120, .42) !important;
  outline-offset: -2px;
  -webkit-tap-highlight-color: transparent !important;
}

.friends-live-edit .friends-home-entry[data-friends-editable="1"].is-live-selected {
  outline: 1px dashed rgba(45, 210, 255, .98) !important;
  z-index: 95;
}

.ranking-live-resize-handle {
  position: absolute;
  left: var(--ranking-x);
  top: var(--ranking-y);
  z-index: 120;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.player-profile-live-resize-handle {
  left: var(--player-profile-x);
  top: var(--player-profile-y);
}

.friends-live-resize-handle {
  position: absolute;
  left: var(--friends-x);
  top: var(--friends-y);
  z-index: 130;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .9);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .72), 0 0 8px rgba(45, 210, 255, .58);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.ranking-live-resize-handle[hidden] {
  display: none;
}

.ranking-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.ranking-live-editor-panel input[data-ranking-live-field="size"] {
  min-width: 0;
}

.game-modal.modal-skin-bag {
  position: relative;
  width: min(92vw, var(--bag-modal-width, 360px));
  height: min(82dvh, var(--bag-modal-height, 430px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #f3dcab;
}

.modal-skin-bag #gameModalBody {
  position: absolute;
  inset: 0;
}

.modal-skin-bag .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-bag #gameModalTitle {
  position: absolute;
  left: var(--bag-x, 50%);
  top: var(--bag-y, 35px);
  width: var(--bag-w, 150px);
  height: var(--bag-h, 26px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  color: #ffe0a3;
  font-size: var(--bag-size, 17px);
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
}

.modal-skin-bag #gameModalClose {
  position: absolute;
  left: var(--bag-x, 318px);
  top: var(--bag-y, 35px);
  width: var(--bag-w, 32px);
  height: var(--bag-h, 32px);
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
}


.modal-skin-bag .bag-gift-back-button {
  position: absolute;
  left: var(--bag-gift-back-x, 56px);
  top: var(--bag-gift-back-y, 70px);
  width: var(--bag-gift-back-w, 36px);
  height: var(--bag-gift-back-h, 36px);
  min-width: 0;
  padding: 0;
  z-index: 90;
  border: 1px solid rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
  box-shadow: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.modal-skin-bag .bag-gift-back-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 48%;
  background: #fff0b6;
  clip-path: polygon(100% 38%, 43% 38%, 43% 12%, 0 50%, 43% 88%, 43% 62%, 100% 62%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.modal-skin-bag .bag-gift-back-button:hover,
.modal-skin-bag .bag-gift-back-button:active,
.modal-skin-bag .bag-gift-back-button:focus,
.modal-skin-bag .bag-gift-back-button:focus-visible {
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
}.modal-skin-bag #gameModalClose::before,
.modal-skin-bag #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
}

.modal-skin-bag #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-bag #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-skin-bag #gameModalClose::before,
.modal-skin-bag #gameModalClose::after {
  width: 52%;
  height: 9%;
  min-height: 2px;
}

.modal-skin-bag [data-bag-item] {
  position: absolute;
  left: var(--bag-x);
  top: var(--bag-y);
  width: var(--bag-w);
  height: var(--bag-h);
  margin: 0;
  font-size: var(--bag-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-bag .bag-list[data-bag-item] {
  font-size: var(--bag-size, 11px);
}

.modal-skin-bag .bag-list[data-bag-item] .bag-item strong {
  font-size: var(--bag-size, 11px);
}

.modal-skin-bag .bag-list[data-bag-item] .bag-item span {
  font-size: max(8px, calc(var(--bag-size, 11px) - 3px));
}

.modal-skin-bag .bag-list[data-bag-item] .bag-item em {
  font-size: max(9px, calc(var(--bag-size, 11px) - 1px));
}

.modal-skin-bag .bag-detail-page {
  inset: 0;
  display: block;
}

.modal-skin-bag .bag-detail-main {
  display: contents;
}

.modal-skin-bag .bag-detail-main [data-bag-item] {
  display: flex;
  align-items: center;
}

.modal-skin-bag .bag-detail-main strong[data-bag-item] {
  justify-content: center;
  font-size: var(--bag-size, 15px);
  line-height: 1.1;
  text-align: center;
}

.modal-skin-bag .bag-detail-main span[data-bag-item],
.modal-skin-bag .bag-detail-main p[data-bag-item],
.modal-skin-bag .bag-detail-main em[data-bag-item] {
  overflow: hidden;
  justify-content: center;
  font-size: var(--bag-size, 10px);
  line-height: 1.35;
  text-align: center;
}

.modal-skin-bag .bag-detail-main button[data-bag-item] {
  justify-content: center;
  min-height: 0;
  font-size: var(--bag-size, 11px);
}

.modal-skin-bag .bag-back-button[data-bag-item] {
  border: 1px solid rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
  container-type: size;
}

.modal-skin-bag .bag-back-button[data-bag-item]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58cqw;
  height: 48cqh;
  background: #fff0b6;
  clip-path: polygon(100% 38%, 43% 38%, 43% 12%, 0 50%, 43% 88%, 43% 62%, 100% 62%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.modal-skin-bag .bag-back-button[data-bag-item]::after {
  content: none;
}

.modal-skin-bag[data-modal-mode="bag-detail"] #gameModalClose,
.modal-skin-bag[data-modal-mode="bag-detail"] .bag-back-button[data-bag-item] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-icon[data-bag-item],
.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-main button[data-bag-item] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-main button[data-bag-item="detailAction"] {
  position: absolute;
  color: #fff3bd;
  font-weight: 900;
  font-size: max(calc(var(--bag-size, 11px) + 2px), 13px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 1px 1px rgba(55, 25, 8, .42);
  filter: none;
  transition: transform .08s ease, color .08s ease, text-shadow .08s ease;
}

.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-main button[data-bag-item="detailAction"]:not(:disabled) {
  cursor: pointer;
}

.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-main button[data-bag-item="detailAction"]:not(:disabled):hover {
  color: #fff8d6;
  text-shadow: 0 1px 1px rgba(55, 25, 8, .34);
}

.modal-skin-bag[data-modal-mode="bag-detail"] .bag-detail-main button[data-bag-item="detailAction"]:not(:disabled):active {
  transform: translate(-50%, -50%) translateY(1px) scale(.98);
}

.modal-skin-bag[data-modal-mode="bag-detail"] #gameModalClose::before,
.modal-skin-bag[data-modal-mode="bag-detail"] #gameModalClose::after,
.modal-skin-bag[data-modal-mode="bag-detail"] .bag-back-button[data-bag-item]::before,
.modal-skin-bag[data-modal-mode="bag-detail"] .bag-back-button[data-bag-item]::after {
  content: none;
}

.bag-live-edit [data-bag-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 230, 120, .95);
  outline-offset: -2px;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
  z-index: 90;
}

.bag-live-edit [data-bag-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
  outline-offset: -2px;
  z-index: 95;
}

.bag-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.bag-live-editor-panel input[data-bag-live-field="size"] {
  min-width: 0;
}

.game-modal.modal-skin-mail {
  position: relative;
  width: min(92vw, var(--mail-modal-width, 360px));
  height: min(82dvh, var(--mail-modal-height, 430px));
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #f3dcab;
}

.modal-skin-mail .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-mail #gameModalTitle {
  position: absolute;
  left: var(--mail-x, 180px);
  top: var(--mail-y, 47px);
  width: var(--mail-w, 150px);
  height: var(--mail-h, 26px);
  margin: 0;
  color: #f1c777;
  font-size: var(--mail-size, 17px);
  line-height: var(--mail-h, 26px);
  text-align: center;
  text-shadow: 0 2px 3px rgba(33, 13, 4, .92);
  transform: translate(-50%, -50%);
}

.modal-skin-mail #gameModalClose {
  position: absolute;
  left: var(--mail-x, 318px);
  top: var(--mail-y, 50px);
  width: var(--mail-w, 32px);
  height: var(--mail-h, 32px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-mail #gameModalClose::before,
.modal-skin-mail #gameModalClose::after {
  content: none;
}

.modal-skin-mail #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
}

.modal-skin-mail .mail-system {
  max-height: none;
  height: 100%;
  color: #f2d7a0;
}

.modal-skin-mail .task-summary,
.modal-skin-mail .task-result {
  color: #fff0ba;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(24, 0, 0, .96), 0 0 5px rgba(83, 10, 0, .82);
}

.modal-skin-mail .task-result {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffe2a0;
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(45, 13, 1, .88), 0 0 4px rgba(121, 59, 9, .45);
}

.modal-skin-mail .task-list {
  max-height: none;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-skin-mail .mail-window {
  padding: 2px 4px 8px;
}

.modal-skin-mail .mail-tab {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #ffe2a2;
  font-size: var(--mail-size, 9px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(28, 0, 0, .95);
  box-shadow: none;
  outline: 0;
}

.modal-skin-mail .mail-tab.is-active {
  color: #fff6d6;
  background: transparent;
  box-shadow: none;
  filter: brightness(1.12);
}

.modal-skin-mail .mail-tab:hover,
.modal-skin-mail .mail-tab:active,
.modal-skin-mail .mail-tab:focus,
.modal-skin-mail .mail-tab:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.modal-skin-mail .mail-row {
  width: 100%;
  min-height: 23px;
  max-height: 28px;
  display: grid;
  grid-template-columns: 40px 28px 1fr 44px;
  gap: 3px;
  align-items: center;
  margin: 0 0 1px;
  padding: 2px 3px;
  border: 0;
  border-bottom: 1px solid rgba(241, 177, 77, .24);
  border-radius: 0;
  background: rgba(47, 10, 4, .18);
  color: #fff0b8;
  text-align: left;
  text-shadow: 0 1px 2px rgba(30, 5, 0, .9);
}

.modal-skin-mail .mail-row .mail-row-identity,
.modal-skin-mail .mail-row strong,
.modal-skin-mail .mail-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  -webkit-text-stroke: .12px rgba(55, 10, 0, .54);
}

.modal-skin-mail .mail-row .mail-row-identity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  text-overflow: clip;
  -webkit-text-stroke: 0;
}

.modal-skin-mail .mail-row-vip {
  width: 25px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 214, 112, .9);
  border-radius: 2px;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  box-shadow: 0 0 3px rgba(255, 198, 66, .32);
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.modal-skin-mail .mail-row-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-mail .mail-row-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-mail .mail-row-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-mail .mail-row-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-mail .mail-row-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-mail .mail-row-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-mail .mail-row-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-mail .mail-row-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.modal-skin-mail .mail-row-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.modal-skin-mail .mail-row-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-mail .mail-row span {
  color: #6b2c0c;
  font-size: 7px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 230, 162, .62);
}

.modal-skin-mail .mail-row span.mail-row-vip {
  color: inherit;
  font-weight: 900;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  box-shadow: none;
}

.modal-skin-mail .mail-row span .vip-name {
  max-width: 100%;
  vertical-align: middle;
}

.modal-skin-mail .mail-row-player {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.modal-skin-mail .mail-row-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  height: 14px;
  overflow: visible;
}

.modal-skin-mail .mail-row-emblem .vip-identity-emblem {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

.modal-skin-mail .vip-name {
  gap: 5px;
}

.modal-skin-mail .mail-detail-head .vip-name {
  gap: 8px;
  color: #fff1b0;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .98), 0 0 4px rgba(255, 211, 91, .42);
}

.modal-skin-mail .vip-name em {
  font-size: .54em;
  padding: 0 1px;
  border-radius: 2px;
  transform: translateY(-1px);
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.modal-skin-mail .mail-detail-head .vip-name em {
  color: #fff1b0;
  background: linear-gradient(180deg, rgba(117, 31, 18, .96), rgba(77, 18, 11, .96));
  border-color: rgba(255, 214, 112, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 164, .18), 0 1px 1px rgba(21, 5, 2, .75);
  font-size: .68em;
  min-width: 28px;
  padding: 0 3px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(23, 3, 1, .95);
  transform: none;
}

.modal-skin-mail .mail-vip-seal {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 9px;
  padding: 0 4px 0 14px;
  border: 1px solid rgba(236, 166, 60, .54);
  border-radius: 999px;
  color: #ffe6a4;
  background: rgba(83, 13, 3, .42) url("../assets/hud/crops/social_identity_clean_v1073/mail_seal_v1_webp_q82.webp") 2px center / 12px 12px no-repeat;
  font-size: .58em;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
  animation: mailVipSealGlow 2.4s ease-in-out infinite;
}

.modal-skin-mail .mail-detail-head .mail-vip-seal {
  margin-left: 10px;
  font-size: var(--mail-self-size, 10px);
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  width: var(--mail-self-w, 18px);
  min-width: var(--mail-self-w, 18px);
  height: var(--mail-self-h, 18px);
  background: transparent !important;
  color: transparent;
  box-shadow: none !important;
  text-shadow: none !important;
}

.modal-skin-mail .mail-detail-head .mail-vip-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.modal-skin-mail .vip-identity-emblem {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 3px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
  vertical-align: middle;
}

.modal-skin-mail .mail-row strong {
  color: #5a2108;
  font-size: 9px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 237, 180, .58), 0 0 2px rgba(101, 36, 6, .22);
}

.modal-skin-mail .mail-row em {
  color: #6d2a09;
  font-size: 7px;
  font-weight: 800;
  text-align: right;
  text-shadow: 0 1px 0 rgba(255, 232, 169, .58);
}

.modal-skin-mail .mail-row.is-claimed {
  opacity: .72;
}

.modal-skin-mail .mail-detail {
  display: grid;
  gap: 6px;
  color: #fff0ba;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(31, 5, 0, .92);
}

.modal-skin-mail .mail-back,
.modal-skin-mail .mail-claim {
  min-height: 28px;
  border: 1px solid rgba(215, 166, 72, .56);
  border-radius: 3px;
  background: rgba(68, 38, 13, .46);
  color: #ffd987;
  font-size: var(--mail-size, 10px);
}

.modal-skin-mail .mail-back {
  position: absolute;
  left: var(--mail-x, 54px);
  top: var(--mail-y, 80px);
  z-index: 12;
  width: var(--mail-w, 40px);
  height: var(--mail-h, 36px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: translate(-50%, -50%);
}

.modal-skin-mail .mail-detail-head strong,
.modal-skin-mail .mail-detail-head span,
.modal-skin-mail .mail-detail small {
  display: block;
}

.modal-skin-mail .mail-detail .mail-detail-head {
  display: contents;
}

.modal-skin-mail .mail-detail-head strong {
  text-align: center;
  color: #5b2108;
  font-size: var(--mail-size, 12px);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 235, 176, .62), 0 0 3px rgba(103, 35, 4, .22);
}

@keyframes mailVipSealGlow {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255, 208, 86, 0); }
  50% { filter: brightness(1.16); box-shadow: 0 0 5px rgba(255, 208, 86, .42); }
}

@keyframes mailVipBadgeFlash {
  0%, 100% {
    border-color: rgba(255, 214, 112, .9);
    filter: brightness(1.04) saturate(1.08);
    box-shadow: 0 0 2px rgba(255, 210, 92, .28), 0 0 5px rgba(255, 120, 54, .16);
  }
  45% {
    border-color: rgba(255, 238, 142, 1);
    filter: brightness(1.24) saturate(1.25);
    box-shadow: 0 0 6px rgba(255, 224, 104, .7), 0 0 11px rgba(255, 122, 54, .36);
  }
  60% {
    border-color: rgba(255, 222, 122, .96);
    filter: brightness(1.12) saturate(1.14);
    box-shadow: 0 0 3px rgba(255, 210, 92, .42), 0 0 7px rgba(255, 120, 54, .22);
  }
}

.modal-skin-mail .mail-detail-head span,
.modal-skin-mail .mail-detail small {
  margin-top: 2px;
  color: #ffe1a1;
  font-size: var(--mail-size, 10px);
  font-weight: 700;
}

.modal-skin-mail .mail-detail-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.modal-skin-mail .mail-detail-participant {
  display: contents;
}

.modal-skin-mail .mail-detail-name-group {
  display: block;
  position: absolute;
  width: var(--mail-w, 160px);
  max-width: none;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.modal-skin-mail .mail-detail-label,
.modal-skin-mail .mail-detail-name-group,
.modal-skin-mail .mail-detail-name,
.modal-skin-mail .mail-detail-vip,
.modal-skin-mail .mail-detail-identity,
.modal-skin-mail .mail-detail-head .mail-vip-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: nowrap;
}

.modal-skin-mail .mail-detail-vip {
  appearance: none;
  -webkit-appearance: none;
  font-size: var(--mail-self-size, 10px) !important;
  font-style: normal;
  font-weight: 900;
  border: 0;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  text-align: center;
  line-height: 1.18;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
  outline: 0 !important;
  text-decoration: none !important;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
}

.modal-skin-mail .mail-detail-vip::before,
.modal-skin-mail .mail-detail-vip::after {
  content: none !important;
  display: none !important;
}

.modal-skin-mail .mail-detail-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-mail .mail-detail-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-mail .mail-detail-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-mail .mail-detail-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-mail .mail-detail-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-mail .mail-detail-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-mail .mail-detail-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-mail .mail-detail-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #ffeeb2 0%, #e4b348 100%); border-color: rgba(255, 232, 139, .98); }
.modal-skin-mail .mail-detail-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #e99b40 0%, #8a2918 100%); border-color: rgba(255, 226, 121, .98); }
.modal-skin-mail .mail-detail-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #f06434 0%, #8b1711 100%); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-mail .mail-detail-name-group .mail-detail-vip {
  border: 1px solid rgba(255, 214, 112, .92) !important;
  box-shadow: 0 0 4px rgba(255, 198, 66, .46), 0 0 8px rgba(255, 108, 48, .2) !important;
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite !important;
  overflow: hidden;
}

.modal-skin-mail .mail-detail-name {
  color: #fff4c2 !important;
  font-size: var(--mail-self-size, 11px) !important;
  font-weight: 900;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke-width: 0;
  text-shadow: 0 1px 0 rgba(31, 7, 1, .88) !important;
}

.modal-skin-mail .mail-detail-name-group .mail-detail-vip,
.modal-skin-mail .mail-detail-name-group .mail-detail-name,
.modal-skin-mail .mail-detail-name-group .mail-detail-identity,
.modal-skin-mail .mail-detail-name-group .mail-vip-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mail-self-w) !important;
  min-width: var(--mail-self-w) !important;
  height: var(--mail-self-h) !important;
  margin: 0 !important;
  transform: translate(calc(-50% + var(--mail-rel-x, 0px)), calc(-50% + var(--mail-rel-y, 0px)));
}

.modal-skin-mail .mail-seal-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b1f0d !important;
  font-size: var(--mail-size, 9px) !important;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke-width: 0;
  text-shadow: 0 1px 0 rgba(255, 235, 178, .48) !important;
  white-space: normal;
  overflow: visible;
}

.modal-skin-mail .mail-detail-name-group .mail-detail-identity {
  width: var(--mail-self-w, calc(var(--mail-self-size, 11px) * 1.9));
  min-width: var(--mail-self-w, calc(var(--mail-self-size, 11px) * 1.9));
  height: var(--mail-self-h, calc(var(--mail-self-size, 11px) * 1.9));
  pointer-events: auto;
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.modal-skin-mail .mail-detail-name-group .mail-detail-name {
  width: var(--mail-self-w) !important;
  min-width: 0 !important;
  max-width: none !important;
}

.modal-skin-mail .mail-detail-identity .vip-identity-emblem {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  box-shadow: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
  pointer-events: none;
}

.modal-skin-mail .mail-detail-identity .vip-identity-emblem img,
.modal-skin-mail .mail-compose-identity .vip-identity-emblem img,
.modal-skin-mail .mail-vip-seal img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.modal-skin-mail .mail-detail-body {
  overflow: auto;
  padding: 6px 8px;
  scrollbar-width: none;
}

.modal-skin-mail .mail-detail-body.has-floating-action {
  padding-bottom: calc(var(--mail-action-clearance, 34px) + 8px);
}

.modal-skin-mail .mail-detail-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.modal-skin-mail .mail-detail-body-text {
  margin: 2px 0;
  padding-right: var(--mail-body-right-pad, 0px);
  color: #4a210d;
  font-size: var(--mail-size, 11px);
  font-weight: 900;
  line-height: 1.42;
  text-align: left;
  white-space: pre-wrap;
  text-shadow: 0 1px 0 rgba(255, 234, 174, .55);
}

.modal-skin-mail .mail-reward-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-right: var(--mail-body-right-pad, 0px);
}

.modal-skin-mail .mail-reward-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 7px;
  margin-top: 5px;
  padding-right: var(--mail-body-right-pad, 0px);
  color: #5a2108;
  font-size: var(--mail-size, 11px);
  font-weight: 900;
  line-height: 1.32;
  text-shadow: 0 1px 0 rgba(255, 232, 164, .72);
}

.modal-skin-mail .mail-reward-summary span {
  white-space: nowrap;
}

.modal-skin-mail .mail-reward-icon {
  position: relative;
  width: 30px;
  height: 36px;
  display: inline-grid;
  place-items: start center;
  border: 1px solid rgba(126, 54, 13, .36);
  border-radius: 4px;
  background: rgba(86, 37, 11, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 232, 160, .22);
  padding-top: 1px;
}

.modal-skin-mail .mail-reward-icon img,
.modal-skin-mail .mail-reward-icon i {
  width: 23px;
  height: 23px;
  object-fit: contain;
  display: block;
  font-style: normal;
  color: #5a2108;
  font-size: 12px;
  font-weight: 900;
  line-height: 23px;
  text-align: center;
}

.modal-skin-mail .mail-reward-icon em {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  overflow: hidden;
  color: #5c2409;
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 232, 164, .7);
}

.modal-skin-mail .mail-reward-icon b {
  position: absolute;
  right: -2px;
  bottom: 7px;
  min-width: 16px;
  padding: 0 2px;
  border-radius: 2px;
  color: #fff2bc;
  background: rgba(67, 22, 6, .82);
  font-size: 7px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 1px rgba(30, 5, 0, .92);
}

.modal-skin-mail .mail-reply-inline {
  position: absolute;
  right: 8px;
  bottom: 8px;
  float: right;
  min-width: 58px;
  min-height: 22px;
  margin: 0;
  border: 1px solid rgba(230, 174, 72, .58);
  border-radius: 3px;
  background: rgba(68, 38, 13, .58);
  color: #ffe3a2;
  font-size: max(calc(var(--mail-size, 10px) - 1px), 8px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .96);
  z-index: 2;
}

.modal-skin-mail .mail-claim:disabled {
  color: rgba(230, 204, 152, .58);
  border-color: rgba(165, 140, 92, .34);
  background: rgba(44, 34, 25, .42);
}

.modal-skin-mail .mail-compose {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(80px, 1fr) auto auto auto;
  gap: 5px;
  padding: 4px 8px 6px;
  color: #f7dc9c;
  overflow: hidden;
}

.modal-skin-mail .mail-compose-title {
  color: #fff4c7;
  font-size: var(--mail-size, 12px);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(32, 5, 0, .95);
}

.modal-skin-mail .mail-compose-target {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 36px;
}

.modal-skin-mail .mail-compose-target > img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(230, 174, 72, .78);
  box-shadow: 0 1px 2px rgba(30, 5, 0, .75);
}

.modal-skin-mail .mail-compose-target > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.modal-skin-mail .mail-compose-name-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: max-content;
  color: #fff1b0;
  font-size: max(var(--mail-size, 10px), 10px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(32, 9, 2, .98), 0 0 4px rgba(255, 211, 91, .42);
  white-space: nowrap;
}

.modal-skin-mail .mail-compose-name-line > button {
  position: relative;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.modal-skin-mail .mail-compose-name-line > .mail-compose-vip {
  width: 25px !important;
  min-width: 25px !important;
  height: 15px !important;
  min-height: 15px !important;
}

.modal-skin-mail .mail-compose-name-line > .mail-compose-name {
  width: auto !important;
  min-width: max-content !important;
  height: auto !important;
}

.modal-skin-mail .mail-compose-name-line > .mail-compose-identity {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

.modal-skin-mail .mail-compose-vip {
  flex: 0 0 auto;
  width: 25px !important;
  min-width: 25px !important;
  height: 15px !important;
  min-height: 15px !important;
  padding: 0 1px;
  border: 1px solid rgba(255, 214, 112, .9);
  border-radius: 2px;
  background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12);
  color: #2a1705;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  box-shadow: 0 0 3px rgba(255, 198, 66, .32);
  animation: mailVipBadgeFlash 1.9s ease-in-out infinite;
  cursor: pointer;
}

.modal-skin-mail .mail-compose-vip.vip-name-level-1 { color: #25180a; background: linear-gradient(180deg, #f2dbad, #b88746); border-color: rgba(237, 201, 133, .82); }
.modal-skin-mail .mail-compose-vip.vip-name-level-2 { color: #20170d; background: linear-gradient(180deg, #ffe0a6, #c58a38); border-color: rgba(255, 218, 139, .86); }
.modal-skin-mail .mail-compose-vip.vip-name-level-3 { color: #1c1609; background: linear-gradient(180deg, #ffe792, #d6a337); border-color: rgba(255, 230, 129, .9); }
.modal-skin-mail .mail-compose-vip.vip-name-level-4 { color: #fff2bd; background: linear-gradient(180deg, #87591d, #4b2410); border-color: rgba(237, 184, 84, .88); }
.modal-skin-mail .mail-compose-vip.vip-name-level-5 { color: #fff0bc; background: linear-gradient(180deg, #9c6024, #5e1f14); border-color: rgba(255, 190, 91, .9); }
.modal-skin-mail .mail-compose-vip.vip-name-level-6 { color: #fff5c9; background: linear-gradient(180deg, #b36a22, #712012); border-color: rgba(255, 204, 97, .92); }
.modal-skin-mail .mail-compose-vip.vip-name-level-7 { color: #fff8d8; background: linear-gradient(180deg, #d0962d, #7f2917); border-color: rgba(255, 223, 121, .94); }
.modal-skin-mail .mail-compose-vip.vip-name-level-8 { color: #2a1705; background: linear-gradient(180deg, #fff0a6, #d69b2d 58%, #8c4b12); border-color: rgba(255, 232, 139, .98); }
.modal-skin-mail .mail-compose-vip.vip-name-level-9 { color: #fff9dc; background: linear-gradient(180deg, #f5ce62, #9d341c 70%, #421309); border-color: rgba(255, 226, 121, .98); }
.modal-skin-mail .mail-compose-vip.vip-name-level-10 { color: #fff7d2; background: linear-gradient(180deg, #ffe68a, #c93922 55%, #3a0807); border-color: rgba(255, 233, 128, 1); box-shadow: 0 0 4px rgba(255, 198, 66, .42); }

.modal-skin-mail .mail-compose-name {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-width: max-content;
  color: #fff4c2;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(31, 7, 1, .88);
  cursor: pointer;
  white-space: nowrap;
}

.modal-skin-mail .mail-compose-identity {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  flex: 0 0 auto;
  cursor: pointer;
}

.modal-skin-mail .mail-compose-target .vip-identity-emblem {
  position: static !important;
  inset: auto !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0;
  display: grid !important;
  place-items: center;
  background: transparent !important;
  box-shadow: none !important;
  animation: identityEmblemFloat 1.45s ease-in-out infinite;
  pointer-events: none;
}

.modal-skin-mail .mail-compose-target .vip-name {
  min-width: 0;
}

.modal-skin-mail .mail-compose-target small,
.modal-skin-mail .mail-compose-rule {
  color: #f3d39a;
  font-size: max(calc(var(--mail-size, 10px) - 2px), 7px);
  line-height: 1.25;
  text-shadow: 0 1px 1px rgba(30, 5, 0, .88);
}

.modal-skin-mail .mail-compose textarea {
  width: 100%;
  min-height: 78px;
  resize: none;
  border: 0;
  border-radius: 4px;
  background: rgba(45, 15, 8, .52);
  color: #fff0ba;
  padding: 7px;
  font: inherit;
  font-size: max(var(--mail-size, 10px), 10px);
  line-height: 1.38;
  outline: 0;
  box-shadow: none;
}

.modal-skin-mail .mail-compose-result {
  min-height: 14px;
  color: #ffe5a7;
  font-size: max(calc(var(--mail-size, 10px) - 2px), 7px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.modal-skin-mail .mail-compose-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.modal-skin-mail .mail-compose-actions button {
  min-height: 26px;
  border: 1px solid rgba(230, 174, 72, .58);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(143, 70, 24, .82), rgba(70, 30, 13, .9));
  color: #ffe3a2;
  font-size: max(calc(var(--mail-size, 10px) - 1px), 8px);
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(28, 8, 2, .96);
}

.modal-skin-mail .mail-compose-actions button:disabled {
  opacity: .55;
}

.modal-skin-mail [data-mail-item] {
  position: absolute;
  left: var(--mail-x);
  top: var(--mail-y);
  width: var(--mail-w);
  height: var(--mail-h);
  margin: 0;
  font-size: var(--mail-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.mail-live-edit [data-mail-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 222, 119, .36);
  outline-offset: -2px;
  touch-action: none;
  z-index: 90;
}

.mail-live-edit [data-mail-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
  z-index: 95;
}

.mail-live-edit .mail-live-fixed-layer {
  cursor: default;
  outline: 0 !important;
  z-index: auto;
}

.mail-live-editor-panel {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(2, minmax(calc(78px * var(--live-editor-scale, 1)), 1fr));
  gap: calc(5px * var(--live-editor-scale, 1));
  min-width: 178px;
  min-height: 210px;
  max-width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: calc(9px * var(--live-editor-scale, 1));
  border: 1px solid rgba(245, 210, 124, .66);
  border-radius: calc(8px * var(--live-editor-scale, 1));
  background: rgba(18, 11, 7, .9);
  color: #ffe7ae;
  font-size: calc(10px * var(--live-editor-scale, 1));
  overflow: auto;
  pointer-events: auto;
  resize: both;
  scrollbar-width: thin;
}

.mail-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.mail-live-editor-panel input[data-mail-live-field="size"] {
  min-width: 0;
}

.mail-live-editor-panel label {
  display: grid;
  gap: 2px;
  margin: 0;
}

.mail-live-editor-panel input,
.mail-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(185, 142, 62, .7);
}

.mail-live-editor-panel button {
  border: 1px solid rgba(213, 174, 89, .86);
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
}

.mail-live-resize-handle {
  position: absolute;
  left: var(--mail-x);
  top: var(--mail-y);
  z-index: 130;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .9);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .72), 0 0 8px rgba(45, 210, 255, .58);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.game-modal.modal-skin-task {
  position: relative;
  width: min(92vw, calc(86dvh * 0.6667), var(--task-modal-width, 360px));
  aspect-ratio: 2 / 3;
  height: auto;
  padding: 0;
  border: 0;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #3d1705;
  overflow: visible;
}

.modal-skin-task .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-task #gameModalTitle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: var(--task-x, 180px);
  top: var(--task-y, 48px);
  width: var(--task-w, 150px);
  height: var(--task-h, 28px);
  margin: 0;
  color: #f6d98c;
  font-size: var(--task-size, 17px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 3px rgba(40, 13, 2, .78);
  transform: translate(-50%, -50%);
}

.modal-skin-task #gameModalClose {
  position: absolute;
  left: var(--task-x, 321px);
  top: var(--task-y, 54px);
  width: var(--task-w, 34px);
  height: var(--task-h, 34px);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-task #gameModalClose::before,
.modal-skin-task #gameModalClose::after {
  display: none;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(12px, var(--task-size, 18px));
  height: max(2px, calc(var(--task-size, 18px) / 6));
  border-radius: 2px;
  background: #8a5520;
  box-shadow: 0 1px 0 rgba(237, 194, 104, .55);
  transform-origin: center;
}

.modal-skin-task #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-task #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-task #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
}

.modal-skin-task .task-system {
  height: auto;
  max-height: none;
  display: block;
  color: #3d1705;
}

.modal-skin-task .task-summary,
.modal-skin-task .task-result {
  color: #261006;
  font-size: var(--task-size, 12px);
  font-weight: 900;
  line-height: 1.35;
  text-shadow: none;
}

.modal-skin-task .task-result {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffe2a0;
  font-weight: 900;
  text-shadow: 0 2px 3px rgba(45, 13, 1, .88), 0 0 4px rgba(121, 59, 9, .45);
}

.modal-skin-task .task-list {
  max-height: none;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-skin-task .task-card {
  grid-template-columns: 1fr 58px;
  gap: 6px;
  padding: 7px 6px;
  border: 1px solid rgba(78, 34, 8, .32);
  border-radius: 3px;
  background: rgba(255, 232, 166, .16);
}

.modal-skin-task .task-card strong {
  color: #1f0901;
  font-size: calc(var(--task-size, 11px) + 1px);
  font-weight: 900;
  line-height: 1.22;
}

.modal-skin-task .task-card span,
.modal-skin-task .task-card em,
.modal-skin-task .task-card small {
  margin-top: 2px;
  color: #351204;
  font-size: var(--task-size, 11px);
  font-weight: 800;
  font-style: normal;
  line-height: 1.28;
}

.modal-skin-task .task-card button {
  min-height: 28px;
  border-color: rgba(128, 68, 14, .36);
  border-radius: 3px;
  background: rgba(99, 45, 9, .12);
  color: rgba(86, 40, 8, .58);
  font-size: max(10px, calc(var(--task-size, 11px) - 1px));
  font-weight: 800;
}

.modal-skin-task .task-card button:not(:disabled) {
  border-color: rgba(139, 69, 15, .66);
  background: linear-gradient(180deg, rgba(165, 104, 28, .7), rgba(94, 41, 8, .78));
  color: #ffe3a4;
  text-shadow: 0 1px 2px rgba(40, 13, 2, .64);
}

.modal-skin-task [data-task-item] {
  position: absolute;
  left: var(--task-x);
  top: var(--task-y);
  width: var(--task-w);
  height: var(--task-h);
  margin: 0;
  font-size: var(--task-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.task-live-edit [data-task-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 222, 119, .38);
  outline-offset: -2px;
  touch-action: none;
  z-index: 90;
}

.task-live-edit [data-task-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
  z-index: 95;
}

.task-live-editor-panel {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(2, minmax(calc(78px * var(--live-editor-scale, 1)), 1fr));
  gap: calc(5px * var(--live-editor-scale, 1));
  min-width: 178px;
  min-height: 210px;
  max-width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: calc(9px * var(--live-editor-scale, 1));
  border: 1px solid rgba(245, 210, 124, .66);
  border-radius: calc(8px * var(--live-editor-scale, 1));
  background: rgba(18, 11, 7, .9);
  color: #ffe7ae;
  font-size: calc(10px * var(--live-editor-scale, 1));
  overflow: auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  pointer-events: auto;
  resize: both;
  scrollbar-width: thin;
}

.task-live-editor-panel b,
.task-live-editor-panel select,
.task-live-editor-panel button {
  grid-column: 1 / -1;
}

.task-live-editor-panel b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.task-live-editor-panel label {
  display: grid;
  gap: calc(2px * var(--live-editor-scale, 1));
  margin: 0;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.task-live-editor-panel input,
.task-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: calc(24px * var(--live-editor-scale, 1));
  padding: calc(2px * var(--live-editor-scale, 1)) calc(4px * var(--live-editor-scale, 1));
  border: 1px solid rgba(230, 190, 106, .42);
  border-radius: calc(4px * var(--live-editor-scale, 1));
  background: rgba(255, 244, 210, .96);
  color: #2d2012;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.task-live-editor-panel button {
  min-height: calc(26px * var(--live-editor-scale, 1));
  border: 1px solid rgba(213, 174, 89, .86);
  border-radius: calc(5px * var(--live-editor-scale, 1));
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.task-live-resize-handle {
  position: absolute;
  left: var(--task-x);
  top: var(--task-y);
  z-index: 120;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(45, 210, 255, .98);
  border-radius: 4px;
  background: rgba(12, 31, 44, .82);
  box-shadow: 0 0 0 1px rgba(255, 240, 160, .7), 0 0 8px rgba(45, 210, 255, .55);
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.task-live-resize-handle[hidden] {
  display: none;
}

.general-list-live-editor-panel {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr repeat(5, 48px) 54px 54px 58px;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border: 1px solid rgba(198, 155, 71, .78);
  background: rgba(24, 18, 10, .92);
  color: #f5e3ad;
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.general-list-live-editor-panel b,
.general-list-live-editor-panel select,
.general-list-live-editor-panel button {
  height: 24px;
}

.general-list-live-editor-panel label {
  display: grid;
  gap: 2px;
  margin: 0;
}

.general-list-live-editor-panel input,
.general-list-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(185, 142, 62, .7);
}

.general-list-live-editor-panel button {
  border: 1px solid rgba(213, 174, 89, .86);
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
}

.general-detail-live-editor-panel {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1000;
  display: grid;
  grid-template-columns: 1fr repeat(5, 48px) 54px 54px 58px;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border: 1px solid rgba(198, 155, 71, .78);
  background: rgba(24, 18, 10, .92);
  color: #f5e3ad;
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.general-detail-live-editor-panel b,
.general-detail-live-editor-panel select,
.general-detail-live-editor-panel button {
  height: 24px;
}

.general-detail-live-editor-panel label {
  display: grid;
  gap: 2px;
  margin: 0;
}

.general-detail-live-editor-panel input,
.general-detail-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(185, 142, 62, .7);
}

.general-detail-live-editor-panel button {
  border: 1px solid rgba(213, 174, 89, .86);
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
}

.modal-skin-general #gameModalBody {
  position: absolute;
  inset: 0;
}

.modal-skin-general .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-general #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 150px;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffe0a3;
  font-size: 17px;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
}

.modal-skin-general #gameModalClose {
  position: absolute;
  left: 318px;
  top: 35px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
}

.modal-skin-general #gameModalClose::before,
.modal-skin-general #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
}

.modal-skin-general #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-general #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-skin-general-list #gameModalTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  left: var(--general-list-x, 50%);
  top: var(--general-list-y, 10%);
  width: var(--general-list-w, 120px);
  height: var(--general-list-h, 28px);
  font-size: var(--general-list-size, 18px);
  line-height: 1;
}

.modal-skin-general-list #gameModalClose {
  left: var(--general-list-x, 88%);
  top: var(--general-list-y, 9%);
  width: var(--general-list-w, 34px);
  height: var(--general-list-h, 34px);
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-general-list #gameModalClose::before,
.modal-skin-general-list #gameModalClose::after {
  content: none;
}

.modal-skin-general-list #gameModalBody {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.modal-skin-general-list .general-system {
  inset: 0;
}

.modal-skin-general-list [data-general-list-item] {
  position: absolute;
  left: var(--general-list-x);
  top: var(--general-list-y);
  width: var(--general-list-w);
  height: var(--general-list-h);
  margin: 0;
  font-size: var(--general-list-size);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-general-list .general-summary {
  overflow: hidden;
}

.modal-skin-general-list .general-list {
  max-height: none;
  overflow-y: auto;
  display: grid;
  grid-auto-rows: 42px;
  gap: 5px;
  padding: 3px 0 0;
}

.modal-skin-general-list .general-upgrade-result {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modal-skin-general-list .general-card {
  position: relative;
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0 13px 0 57px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f5ddb0;
}

.modal-skin-general-list .general-card.is-selected {
  filter: brightness(1.08);
}

.modal-skin-general-list .general-card img {
  position: absolute;
  left: var(--general-avatar-x, 26.5px);
  top: var(--general-avatar-y, 18px);
  width: var(--general-avatar-size, 37px);
  height: var(--general-avatar-size, 37px);
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  border: 0;
  box-sizing: border-box;
}

.modal-skin-general-list .general-card > img {
  visibility: hidden;
}

.modal-skin-general-list .general-card > div {
  visibility: hidden;
}

.modal-skin-general-list .general-avatar-fixed {
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  z-index: 8;
  pointer-events: none;
}

.modal-skin-general-list .general-row-fixed {
  position: absolute;
  display: grid;
  align-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 0 3px 0 7px;
  transform: translateY(-50%);
  z-index: 8;
  pointer-events: none;
  color: #f5ddb0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96);
}

.modal-skin-general-list .general-row-fixed strong {
  color: #ffe8aa;
  font-family: "Microsoft YaHei", "Noto Serif SC", serif;
  font-size: calc(var(--general-list-size, 11px) + 1px);
  font-weight: 800;
  line-height: 1.05;
}

.modal-skin-general-list .general-row-fixed span {
  color: #f0cf91;
  font-size: max(8px, calc(var(--general-list-size, 11px) - 2px));
  line-height: 1.1;
  white-space: normal;
}

.modal-skin-general-list .general-avatar-fixed.is-selected {
  outline: 1px solid rgba(255, 220, 112, .72);
  outline-offset: -1px;
  filter: brightness(1.06);
}

.modal-skin-general-list .general-row-fixed.is-selected {
  border: 1px solid rgba(255, 220, 112, .5);
  border-radius: 5px;
  background: rgba(255, 220, 112, .06);
  box-shadow: none;
}

.modal-skin-general-list.general-list-live-edit .general-avatar-fixed {
  pointer-events: auto;
}

.modal-skin-general-list .general-card div {
  display: grid;
  align-content: center;
  gap: 6px;
  height: 100%;
  min-width: 0;
}

.modal-skin-general-list .general-card strong {
  color: #ffe8aa;
  font-size: calc(var(--general-list-size, 11px) + 1px);
  line-height: 1.05;
}

.modal-skin-general-list .general-card span,
.modal-skin-general-list .general-card em {
  display: block;
  overflow: hidden;
  color: #d6b875;
  font-size: max(8px, calc(var(--general-list-size, 11px) - 2px));
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-skin-general-list .general-equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 9px 10px;
  padding: 5px 7px;
}

.modal-skin-general-list .general-equipment-slot {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.modal-skin-general-list .general-equipment-slot img {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}

.modal-skin-general-list .general-equipment-slot[data-general-equipment-slot="boots"] img,
.modal-skin-general-list .general-equipment-slot[data-general-equipment-slot="mount"] img {
  width: 53%;
  height: 53%;
}

.modal-skin-general-list .general-equipment-slot i {
  width: 58%;
  height: 58%;
  border-radius: 4px;
  background: rgba(28, 17, 10, .25);
}

.modal-skin-general-list .general-equipment-slot.is-selected {
  outline: 1px solid rgba(255, 220, 112, .72);
  outline-offset: -2px;
}

.modal-skin-general-list .general-equipment-info {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 11px 12px;
  overflow: hidden;
  color: #f1d89b;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .92);
}

.modal-skin-general-list .general-equipment-info strong {
  color: #ffe6a4;
  font-size: calc(var(--general-list-size, 10px) + 2px);
  line-height: 1.2;
}

.modal-skin-general-list .general-equipment-info span,
.modal-skin-general-list .general-equipment-info em {
  color: #d5b875;
  font-size: var(--general-list-size, 10px);
  font-style: normal;
  line-height: 1.35;
}

.modal-skin-general-list .general-detail-entry-button {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff0b6;
  font-family: "Microsoft YaHei", "Noto Serif SC", serif;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(97, 48, 8, .78);
  isolation: isolate;
}

.modal-skin-general-list .general-detail-entry-button::before {
  content: "";
  position: absolute;
  inset: -34% -24%;
  z-index: 0;
  background: url("../assets/ui/buttons/button_detail_more_image2_v1_webp_q82.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

.modal-skin-general-list .general-detail-entry-button span {
  position: relative;
  z-index: 1;
  transform: translateY(2px);
}

.modal-skin-general-list .general-detail-entry-button:active {
  filter: brightness(1.14);
}

.modal-skin-general-list .general-equipment-choices {
  display: grid;
  gap: 4px;
  max-height: 70px;
  overflow: auto;
  padding-right: 2px;
}

.modal-skin-general-list .general-equipment-equip {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffe2a0;
  text-align: left;
}

.modal-skin-general-list .general-equipment-equip img,
.modal-skin-general-list .general-equipment-equip i {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
}

.modal-skin-general-list .general-equipment-equip span {
  overflow: hidden;
  color: #ffe2a0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-skin-general-detail #gameModalTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  left: var(--general-detail-x, 50%);
  top: var(--general-detail-y, 8%);
  width: var(--general-detail-w, 130px);
  height: var(--general-detail-h, 26px);
  font-size: var(--general-detail-size, 17px);
  line-height: 1;
  transform: translate(-50%, -50%);
}

.modal-skin-general-detail #gameModalClose {
  left: var(--general-detail-x, 88%);
  top: var(--general-detail-y, 8%);
  width: var(--general-detail-w, 32px);
  height: var(--general-detail-h, 32px);
  min-width: 0;
  padding: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
  transform: translate(-50%, -50%);
}

.modal-skin-general-detail #gameModalClose::before,
.modal-skin-general-detail #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  max-width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.modal-skin-general-detail #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-general-detail #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-skin-general-detail #gameModalBody {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.modal-skin-general-detail .general-detail-page {
  inset: 0;
  display: block;
}

.modal-skin-general-detail .general-detail-main {
  --detail-text-inset: 5px;
  --detail-label-col: 58px;
  --detail-readable-size: max(11px, var(--general-detail-size, 9px));
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  justify-items: stretch;
  gap: 7px;
  box-sizing: border-box;
  padding: 4px 7px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  color: #ffe1a0;
  font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-synthesis: none;
  letter-spacing: 0;
  font-size: var(--detail-readable-size);
  line-height: 1.5;
  text-shadow:
    0 1px 1px rgba(24, 8, 2, .9),
    1px 0 1px rgba(24, 8, 2, .58),
    -1px 0 1px rgba(24, 8, 2, .58);
  touch-action: pan-y;
  user-select: none;
  overscroll-behavior: contain;
  scroll-padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.modal-skin-general-detail .general-detail-main::-webkit-scrollbar {
  display: none;
}

.modal-skin-general-detail .general-detail-main > * {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.modal-skin-general-detail .general-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 0 var(--detail-text-inset) 7px;
  border-bottom: 1px solid rgba(214, 159, 64, .28);
  text-align: center;
  transform: none;
}

.modal-skin-general-detail .general-title-row img {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.modal-skin-general-detail .general-title-row div {
  min-width: 0;
}

.modal-skin-general-detail .general-title-row strong,
.modal-skin-general-detail .general-title-row span {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  line-height: 1.55;
}

.modal-skin-general-detail .general-detail-section {
  display: grid;
  gap: 4px;
  box-sizing: border-box;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(214, 159, 64, .22);
}

.modal-skin-general-detail .general-detail-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 14px;
}

.modal-skin-general-detail .general-detail-section-title {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 22px;
  padding: 2px calc(var(--detail-text-inset) + 1px) 3px;
  color: #ffe08e;
  font-size: calc(var(--detail-readable-size) + 1px);
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  text-shadow: 0 1px 1px rgba(25, 8, 1, .85);
}

.modal-skin-general-detail .general-stat-grid {
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 0;
  border-bottom: 0;
}

.modal-skin-general-detail .general-stat-grid span {
  display: grid;
  grid-template-columns: var(--detail-label-col) minmax(0, 1fr);
  align-items: center;
  min-height: 25px;
  box-sizing: border-box;
  padding: 3px var(--detail-text-inset);
  border-radius: 4px;
  background: rgba(24, 13, 7, .36);
  line-height: 1.35;
}

.modal-skin-general-detail .general-stat-grid b {
  color: #ffe0a0;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

.modal-skin-general-detail .general-stat-grid em {
  color: #fff2bd;
  font-weight: 800;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.modal-skin-general-detail .general-equipment-summary-line {
  color: #f2d89e;
  font-size: var(--detail-readable-size);
  line-height: 1.75;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
  padding: 6px var(--detail-text-inset);
  border: 1px solid rgba(214, 159, 64, .16);
  border-radius: 4px;
  background: rgba(24, 13, 7, .22);
}

.modal-skin-general-detail .general-skill-list {
  gap: 4px;
  padding: 0;
  border-bottom: 0;
}

.modal-skin-general-detail .general-skill-list li {
  grid-template-columns: 16px minmax(0, 1fr) 30px;
  min-height: 25px;
  box-sizing: border-box;
  gap: 4px;
  padding: 3px var(--detail-text-inset);
  border-radius: 4px;
  line-height: 1.7;
}

.modal-skin-general-detail .general-skill-list li b,
.modal-skin-general-detail .general-skill-list li span,
.modal-skin-general-detail .general-skill-list li em {
  line-height: 1.55;
}

.modal-skin-general-detail .general-skill-list li b {
  text-align: center;
  font-weight: 700;
}

.modal-skin-general-detail .general-skill-list li span {
  text-align: left;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.modal-skin-general-detail .general-skill-list li em {
  text-align: right;
  white-space: nowrap;
}

.modal-skin-general-detail .general-skill-study,
.modal-skin-general-detail .general-soul-reserve {
  box-sizing: border-box;
  gap: 4px;
  margin-top: 0;
}

.modal-skin-general-detail .general-skill-study p,
.modal-skin-general-detail .general-soul-reserve p {
  margin: 0;
  line-height: 1.5;
  background: rgba(24, 13, 7, .22);
  border-radius: 4px;
  padding: 3px 5px;
}

.modal-skin-general-detail .general-detail-info-row {
  display: grid;
  grid-template-columns: var(--detail-label-col) minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 6px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 4px var(--detail-text-inset);
  border: 1px solid rgba(214, 159, 64, .16);
  border-radius: 4px;
  background: rgba(24, 13, 7, .24);
  color: #ffe0a0;
  line-height: 1.35;
}

.modal-skin-general-detail .general-detail-info-row span {
  color: #ffe0a0;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.modal-skin-general-detail .general-detail-info-row em {
  min-width: 0;
  color: #fff2bd;
  font-weight: 800;
  font-style: normal;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.modal-skin-general-detail .general-detail-info-row.is-stack {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  justify-content: stretch;
}

.modal-skin-general-detail .general-skill-study .general-detail-info-row {
  grid-template-columns: 1fr;
  gap: 2px;
  min-height: 38px;
  padding: 4px 6px 5px;
}

.modal-skin-general-detail .general-skill-study .general-detail-info-row span {
  display: block;
  width: 100%;
  color: #ffe6a8;
  font-size: max(10px, calc(var(--detail-readable-size) - 1px));
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.modal-skin-general-detail .general-skill-study .general-detail-info-row em {
  display: block;
  width: 100%;
  color: #fff2bd;
  font-size: max(10px, calc(var(--detail-readable-size) - 1px));
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-info-row {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  min-height: 28px;
  padding: 3px 6px;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-info-row span {
  white-space: nowrap;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-info-row em {
  text-align: right;
  white-space: normal;
}

.modal-skin-general-detail .general-detail-info-row.is-stack em {
  text-align: left;
  line-height: 1.42;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-soul-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-soul-list span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 18px;
  box-sizing: border-box;
  padding: 2px var(--detail-text-inset);
  text-align: left;
}

.modal-skin-general-detail .general-soul-reserve .general-detail-soul-list span b {
  color: #ffefa8;
  font-family: Tahoma, Arial, "Microsoft YaHei", sans-serif;
  font-size: calc(var(--detail-readable-size) + 1px);
  font-weight: 700;
  line-height: 1.55;
  text-align: right;
  text-shadow: none;
}

.modal-skin-general-detail .general-skill-study button {
  min-height: 20px;
  border: 1px solid rgba(214, 159, 64, .34);
  border-radius: 5px;
  background: rgba(82, 46, 15, .5);
  color: #ffe49d;
  font-size: var(--general-detail-size, 9px);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(25, 8, 1, .9);
}

.modal-skin-general-detail .general-skill-study button:disabled {
  background: rgba(24, 13, 7, .28);
  color: rgba(204, 174, 118, .52);
}

.modal-skin-general-detail .general-detail-action-button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(21, 12, 7, .18);
  color: #f4ca72;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(28, 10, 2, .9), 0 0 6px rgba(231, 162, 54, .42);
  box-shadow: inset 0 0 10px rgba(231, 169, 66, .16);
}

.modal-skin-general-detail .general-detail-action-button:disabled {
  color: rgba(184, 154, 103, .52);
  text-shadow: 0 1px 2px rgba(10, 6, 4, .8);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .28);
  cursor: not-allowed;
}

.modal-skin-general-soul {
  --modal-bg: url("../assets/ui/modal_general_soul_upgrade_backplate_v2_webp_q82.webp?v=1675");
}

.game-modal.modal-skin-general-soul {
  position: relative;
  width: min(92vw, calc(86dvh * 0.8372), var(--general-soul-modal-width, 360px));
  aspect-ratio: 360 / 430;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
}

.modal-skin-general-soul .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-general-soul #gameModalTitle {
  position: absolute;
  left: var(--general-soul-left, 50%);
  top: var(--general-soul-top, 12%);
  width: var(--general-soul-w, 120px);
  height: var(--general-soul-h, 26px);
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: var(--general-soul-size, 16px);
  text-align: center;
  color: #ffe8a6;
  text-shadow: 0 1px 2px rgba(26, 8, 2, .95), 0 0 8px rgba(220, 152, 44, .42);
}

.modal-skin-general-soul.general-soul-live-edit #gameModalTitle {
  pointer-events: auto;
}

.modal-skin-general-soul #gameModalClose {
  position: absolute;
  left: var(--general-soul-left, auto);
  right: auto;
  top: var(--general-soul-top, 7%);
  width: var(--general-soul-w, 32px);
  height: var(--general-soul-h, 32px);
  min-width: 0;
  padding: 0;
  transform: none;
  border: 1px solid rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  pointer-events: auto;
}

.modal-skin-general-soul #gameModalClose::before,
.modal-skin-general-soul #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52%;
  height: 9%;
  border-radius: 999px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.modal-skin-general-soul #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-general-soul #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-skin-general-soul #gameModalBody {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.modal-skin-general-soul .general-soul-upgrade-page {
  position: absolute;
  inset: auto;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  gap: 0;
  box-sizing: border-box;
  color: #ffe4a0;
  font-family: "Microsoft YaHei", Tahoma, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  text-shadow:
    0 1px 1px rgba(34, 12, 2, .88),
    1px 0 1px rgba(34, 12, 2, .58),
    -1px 0 1px rgba(34, 12, 2, .58);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.modal-skin-general-soul .general-soul-upgrade-page .general-back-button {
  position: absolute;
  left: var(--general-soul-left, -35px);
  top: var(--general-soul-top, -60px);
  width: var(--general-soul-w, 36px);
  height: var(--general-soul-h, 36px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  container-type: size;
}

.modal-skin-general-soul .general-soul-upgrade-page .general-back-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58cqw;
  height: 48cqh;
  background: #fff0b6;
  clip-path: polygon(100% 38%, 43% 38%, 43% 12%, 0 50%, 43% 88%, 43% 62%, 100% 62%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.modal-skin-general-soul .general-soul-upgrade-page .general-back-button::after {
  content: none;
}

.modal-skin-general-soul .general-soul-avatar {
  position: absolute;
  left: var(--general-soul-left);
  top: var(--general-soul-top);
  width: var(--general-soul-w);
  height: var(--general-soul-h);
  overflow: hidden;
  border-radius: 50%;
  transform: none;
  z-index: 4;
  background: rgba(18, 9, 4, .24);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
}

.modal-skin-general-soul .general-soul-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  filter: saturate(1.04) contrast(1.04) drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.modal-skin-general-soul .general-soul-upgrade-head {
  position: absolute;
  left: var(--general-soul-left);
  top: var(--general-soul-top);
  width: var(--general-soul-w);
  height: var(--general-soul-h);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px 3px;
  border-bottom: 1px solid rgba(214, 159, 64, .18);
}

.modal-skin-general-soul .general-soul-upgrade-head strong,
.modal-skin-general-soul .general-soul-upgrade-head span {
  display: block;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 1px 1px rgba(24, 7, 2, .92);
}

.modal-skin-general-soul .general-soul-upgrade-head strong {
  color: #ffe8a6;
  font-size: var(--general-soul-size, 13px);
}

.modal-skin-general-soul .general-soul-upgrade-head span {
  color: #ffe2a0;
}

.modal-skin-general-soul [data-general-soul-item="comboExp"],
.modal-skin-general-soul [data-general-soul-item="comboSoul"],
.modal-skin-general-soul [data-general-soul-item="countTrigger"],
.modal-skin-general-soul [data-general-soul-item="preview"],
.modal-skin-general-soul [data-general-soul-item="result"],
.modal-skin-general-soul [data-general-soul-item="confirm"],
.modal-skin-general-soul [data-general-soul-item="picker"] {
  position: absolute;
  left: var(--general-soul-left);
  top: var(--general-soul-top);
  width: var(--general-soul-w);
  height: var(--general-soul-h);
  font-size: var(--general-soul-size, 10px);
}

.modal-skin-general-soul .general-soul-upgrade-content {
  display: block;
  overflow: visible;
  overflow-x: hidden;
  min-width: 0;
  padding: 0;
  scrollbar-width: none;
}

.modal-skin-general-soul .general-soul-upgrade-combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 226, 150, .08);
}

.modal-skin-general-soul .general-soul-upgrade-combo.is-soul-stock {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr);
}

.modal-skin-general-soul .general-soul-upgrade-combo span {
  min-width: 0;
  color: #ffe0a0;
  font-size: 9px;
  line-height: 1.35;
  white-space: nowrap;
  font-weight: 800;
  text-shadow:
    0 1px 1px rgba(38, 12, 2, .92),
    1px 0 1px rgba(38, 12, 2, .68),
    -1px 0 1px rgba(38, 12, 2, .68);
}

.modal-skin-general-soul .general-soul-upgrade-combo b {
  color: #fff2bd;
  font-family: Tahoma, "Microsoft YaHei", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-shadow:
    0 1px 1px rgba(38, 12, 2, .96),
    1px 0 1px rgba(38, 12, 2, .72),
    -1px 0 1px rgba(38, 12, 2, .72),
    0 0 5px rgba(255, 196, 69, .18);
}

.modal-skin-general-soul .general-soul-upgrade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  box-sizing: border-box;
  padding: 2px 8px;
  border: 1px solid rgba(214, 159, 64, .16);
  border-radius: 5px;
  background: rgba(24, 13, 7, .18);
}

.modal-skin-general-soul .general-soul-upgrade-row.is-wide {
  grid-template-columns: minmax(0, 1.35fr) auto;
}

.modal-skin-general-soul .general-soul-upgrade-row span {
  color: #d6aa5b;
  line-height: 1.25;
  white-space: nowrap;
}

.modal-skin-general-soul .general-soul-upgrade-row b {
  color: #ffefa8;
  font-family: Tahoma, "Microsoft YaHei", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.modal-skin-general-soul .general-soul-count-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 27px;
  box-sizing: border-box;
  padding: 3px 9px;
  border: 1px solid rgba(255, 229, 134, .92);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(213, 139, 35, .74), rgba(116, 64, 18, .58));
  color: #fff4bf;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-shadow: 0 1px 2px rgba(25, 8, 1, .92), 0 0 8px rgba(255, 191, 62, .46);
  box-shadow: inset 0 0 14px rgba(255, 215, 105, .38), 0 0 12px rgba(255, 195, 62, .32);
}

.modal-skin-general-soul .general-soul-count-trigger b {
  color: #ffefa8;
  font-family: Tahoma, "Microsoft YaHei", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.modal-skin-general-soul .general-soul-count-popover {
  position: absolute;
  left: var(--general-soul-left);
  right: auto;
  top: var(--general-soul-top);
  width: var(--general-soul-w);
  height: var(--general-soul-h);
  z-index: 9;
  display: grid;
  gap: 7px;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid rgba(229, 177, 75, .48);
  border-radius: 8px;
  background: rgba(25, 12, 6, .94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .42), inset 0 0 16px rgba(211, 150, 45, .12);
}

.modal-skin-general-soul .general-soul-count-popover[hidden] {
  display: none;
}

.modal-skin-general-soul .general-soul-count-popover > b {
  color: #ffe8a6;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.modal-skin-general-soul .general-soul-count-popover label {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #d6aa5b;
  line-height: 1.45;
}

.modal-skin-general-soul .general-soul-count-popover input[type="number"] {
  min-width: 0;
  height: 26px;
  box-sizing: border-box;
  border: 1px solid rgba(214, 159, 64, .36);
  border-radius: 4px;
  background: rgba(10, 6, 3, .36);
  color: #ffefa8;
  font: 11px/1.45 Tahoma, "Microsoft YaHei", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.modal-skin-general-soul .general-soul-upgrade-range {
  width: 100%;
  height: 18px;
  accent-color: #d79a32;
}

.modal-skin-general-soul .general-soul-upgrade-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.modal-skin-general-soul .general-soul-upgrade-buttons button,
.modal-skin-general-soul .general-soul-upgrade-confirm {
  min-height: 27px;
  border: 1px solid rgba(255, 225, 127, .82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214, 139, 35, .72), rgba(116, 64, 18, .56));
  color: #fff4bf;
  font-size: var(--general-soul-size, 10px);
  line-height: 1.45;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(25, 8, 1, .92), 0 0 7px rgba(255, 191, 62, .38);
  box-shadow: inset 0 0 13px rgba(255, 215, 105, .34), 0 0 11px rgba(255, 195, 62, .28);
}

.modal-skin-general-soul .general-soul-upgrade-preview {
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 226, 150, .07);
}

.modal-skin-general-soul .general-soul-upgrade-preview b {
  color: #fff0b6;
  line-height: 1.35;
  font-weight: 900;
  text-shadow:
    0 1px 1px rgba(38, 12, 2, .96),
    1px 0 1px rgba(38, 12, 2, .72),
    -1px 0 1px rgba(38, 12, 2, .72),
    0 0 5px rgba(255, 196, 69, .18);
}

.modal-skin-general-soul .general-soul-upgrade-preview span {
  color: #ffe0a0;
  font-size: 9px;
  line-height: 1.38;
  text-align: left;
  font-weight: 800;
  text-shadow:
    0 1px 1px rgba(38, 12, 2, .92),
    1px 0 1px rgba(38, 12, 2, .68),
    -1px 0 1px rgba(38, 12, 2, .68);
}

.modal-skin-general-soul .general-soul-picker-actions {
  display: grid;
  grid-template-columns: repeat(2, 76px);
  justify-content: center;
  gap: 12px;
}

.modal-skin-general-soul .general-soul-picker-actions button {
  min-width: 0;
  min-height: 27px;
  border: 1px solid rgba(255, 225, 127, .82);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214, 139, 35, .72), rgba(116, 64, 18, .56));
  color: #fff4bf;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(25, 8, 1, .92), 0 0 7px rgba(255, 191, 62, .38);
  box-shadow: inset 0 0 13px rgba(255, 215, 105, .34), 0 0 11px rgba(255, 195, 62, .28);
}

.modal-skin-general-soul .general-soul-picker-actions [data-soul-picker-cancel] {
  background: linear-gradient(180deg, rgba(184, 116, 35, .68), rgba(91, 55, 22, .58));
  color: #ffe7a6;
}

.general-soul-live-edit [data-general-soul-item] {
  outline: 1px dashed rgba(255, 225, 99, .9);
  outline-offset: -2px;
  cursor: move;
}

.general-soul-live-edit [data-general-soul-item].is-live-selected {
  outline: 2px solid rgba(255, 63, 63, .95);
  box-shadow: 0 0 0 2px rgba(255, 63, 63, .18);
}

.modal-skin-general-soul .general-upgrade-result {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  box-sizing: border-box;
  padding: 0 9px 1px;
  color: #fff0b8;
  font-size: var(--general-soul-size, 10px);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow:
    0 1px 1px rgba(24, 8, 2, .95),
    1px 0 1px rgba(24, 8, 2, .72),
    -1px 0 1px rgba(24, 8, 2, .72);
  background: linear-gradient(180deg, rgba(96, 48, 13, .42), rgba(34, 15, 5, .34));
  border-radius: 999px;
}

.modal-skin-general-soul .general-upgrade-result:empty {
  display: none;
}

.modal-skin-general-soul .general-soul-upgrade-confirm:disabled {
  color: rgba(184, 154, 103, .52);
  background: rgba(24, 13, 7, .14);
}

.modal-skin-general-detail .general-detail-enhance-action.is-ready {
  color: #ffe69f;
  background: rgba(112, 67, 20, .22);
  box-shadow: inset 0 0 12px rgba(245, 185, 74, .24), 0 0 8px rgba(245, 185, 74, .18);
}

.modal-skin-general-detail [data-general-detail-item] {
  position: absolute;
  left: var(--general-detail-left);
  top: var(--general-detail-top);
  width: var(--general-detail-w);
  height: var(--general-detail-h);
  margin: 0;
  font-size: var(--general-detail-size);
  transform: none;
  pointer-events: auto;
}

.modal-skin-general-detail .general-portrait {
  min-height: 0;
  overflow: hidden;
}

.modal-skin-general-detail .general-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  box-shadow:
    inset 0 0 21px 9px rgba(18, 9, 4, .64),
    inset 0 28px 22px -12px rgba(18, 9, 4, .64),
    inset 0 -28px 22px -12px rgba(18, 9, 4, .6),
    inset 20px 0 17px -10px rgba(18, 9, 4, .48),
    inset -20px 0 17px -10px rgba(18, 9, 4, .48),
    inset 0 0 2px 1px rgba(230, 176, 82, .12);
}

.modal-skin-general-detail .general-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .42)) drop-shadow(0 0 10px rgba(115, 63, 21, .16));
}

.modal-skin-general-detail .general-stat-grid,
.modal-skin-general-detail .general-skill-list,
.modal-skin-general-detail .general-skill-study,
.modal-skin-general-detail .general-soul-reserve {
  overflow: visible;
}

.modal-skin-general-detail .general-title-row strong {
  font-size: calc(var(--general-detail-size, 11px) + 2px);
}

.modal-skin-general-detail .general-title-row span,
.modal-skin-general-detail .general-stat-grid,
.modal-skin-general-detail .general-equipment-line,
.modal-skin-general-detail .general-skill-list,
.modal-skin-general-detail .general-skill-study,
.modal-skin-general-detail .general-soul-reserve,
.modal-skin-general-detail .general-upgrade-result {
  font-size: var(--general-detail-size, 9px);
}

.modal-skin-general-detail .general-upgrade-result {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.modal-skin-general-detail .general-upgrade-result:empty {
  display: none;
}

.modal-skin-general-detail .general-equipment-line {
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.modal-skin-general-detail .general-detail-equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 7px;
  width: 100%;
  height: 100%;
}

.modal-skin-general-detail .general-detail-equipment-slot {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  aspect-ratio: 1.18;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: rgba(255, 226, 154, .58);
  cursor: pointer;
  font: inherit;
  line-height: 1;
  overflow: visible;
}

.modal-skin-general-detail .general-detail-equipment-slot.is-selected {
  border-radius: 4px;
  outline: 1px solid rgba(255, 221, 116, .78);
  outline-offset: -6px;
  box-shadow: inset 0 0 8px rgba(255, 203, 80, .18);
}

.modal-skin-general-detail .general-detail-equipment-slot img {
  width: 78%;
  height: 78%;
}

.modal-skin-general-detail .general-detail-equipment-slot[data-general-detail-equipment-slot="boots"] img {
  width: 56%;
  height: 56%;
}

.modal-skin-general-detail .general-detail-equipment-slot[data-general-detail-equipment-slot="mount"] img {
  width: 56%;
  height: 56%;
}

.modal-skin-general-detail .general-detail-equipment-slot:nth-child(3n + 1) img,
.modal-skin-general-detail .general-detail-equipment-slot:nth-child(3n + 1) i {
  transform: translateX(4px);
}

.modal-skin-general-detail .general-detail-equipment-slot:nth-child(3n) img,
.modal-skin-general-detail .general-detail-equipment-slot:nth-child(3n) i {
  transform: translateX(-4px);
}

.general-list-live-edit [data-general-list-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 222, 119, .38);
  outline-offset: -2px;
  touch-action: none;
  z-index: 90;
}

.general-list-live-edit [data-general-list-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
  z-index: 95;
}

.general-detail-live-edit [data-general-detail-item] {
  cursor: move;
  outline: 1px dashed rgba(255, 222, 119, .38);
  outline-offset: -2px;
  touch-action: none;
  z-index: 90;
}

.general-detail-live-edit [data-general-detail-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
  z-index: 95;
}

.general-detail-live-edit .general-portrait img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.general-system {
  position: absolute;
  inset: 62px 22px 28px;
  color: #f4ddb0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96);
}

.general-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.general-summary span,
.general-soul-reserve div span {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 28px;
  border: 1px solid rgba(224, 178, 91, .26);
  border-radius: 6px;
  background: rgba(32, 18, 10, .42);
  color: #d8b676;
  font-size: 8px;
}

.general-summary b,
.general-soul-reserve b {
  color: #ffe18d;
  font-size: 10px;
}

.general-list {
  display: grid;
  align-content: start;
  gap: 7px;
  max-height: 298px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.general-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.general-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 8px;
  min-height: 58px;
  padding: 6px 8px;
  border: 1px solid rgba(224, 178, 91, .26);
  border-radius: 7px;
  background: rgba(29, 16, 9, .52);
  color: #f5ddb0;
  text-align: left;
  box-shadow: none;
}

.general-card img {
  grid-row: 1 / 4;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(235, 195, 95, .46);
}

.general-card strong {
  color: #fff0bf;
  font-size: 12px;
}

.general-card span,
.general-card em {
  color: #d8b676;
  font-size: 9px;
  font-style: normal;
}

.general-card.rarity-sss { border-color: rgba(255, 211, 78, .56); }
.general-card.rarity-ssr { border-color: rgba(192, 134, 255, .46); }
.general-card.rarity-sr { border-color: rgba(111, 220, 173, .36); }

.general-empty {
  display: grid;
  place-items: center;
  min-height: 230px;
  gap: 5px;
  color: #d8b676;
  text-align: center;
}

.general-empty b {
  color: #ffe18d;
  font-size: 14px;
}

.general-back-button {
  position: absolute;
  left: 16px;
  top: -30px;
  z-index: 12;
  min-width: 0;
  min-height: 0;
  width: var(--general-detail-w, 32px);
  height: var(--general-detail-h, 32px);
  padding: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.general-back-button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-left: 4px solid #fff0b6;
  border-bottom: 4px solid #fff0b6;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.general-back-button::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 13px;
  height: 4px;
  border-radius: 2px;
  background: #fff0b6;
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.general-detail-page {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px;
}

.general-portrait {
  display: grid;
  place-items: end center;
  min-height: 322px;
  overflow: hidden;
}

.general-portrait img {
  width: 132px;
  max-height: 316px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .42));
}

.general-detail-main {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.general-title-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 7px;
  align-items: center;
}

.general-title-row img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(235, 195, 95, .48);
}

.general-title-row strong {
  display: block;
  color: #fff0bf;
  font-size: 13px;
}

.general-title-row span {
  color: #d8b676;
  font-size: 9px;
}

.general-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.general-stat-grid span {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 5px;
  border: 1px solid rgba(224, 178, 91, .2);
  border-radius: 5px;
  background: rgba(29, 16, 9, .45);
  font-size: 9px;
}

.general-stat-grid b {
  color: #d8b676;
}

.general-stat-grid em {
  color: #ffe18d;
  font-style: normal;
}

.general-equipment-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(224, 178, 91, .2);
  border-radius: 5px;
  background: rgba(29, 16, 9, .42);
  color: #f2d89e;
  font-size: 9px;
}

.general-detail-equipment-slots {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.general-detail-equipment-slot {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(214, 171, 84, .28);
  border-radius: 3px;
  background: rgba(25, 14, 8, .42);
  overflow: hidden;
}

.general-detail-equipment-slot img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
}

.general-detail-equipment-slot i {
  color: rgba(255, 226, 154, .58);
  font-size: 8px;
  font-style: normal;
  line-height: 1;
}

.general-detail-equipment-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-skill-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.general-skill-list li {
  display: grid;
  grid-template-columns: 18px 1fr 34px;
  align-items: center;
  gap: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(224, 178, 91, .2);
  border-radius: 5px;
  background: rgba(29, 16, 9, .42);
  font-size: 9px;
}

.general-skill-list b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(224, 178, 91, .24);
  color: #ffe18d;
}

.general-skill-list em {
  color: #ffe18d;
  font-style: normal;
  text-align: right;
}

.general-skill-study {
  display: grid;
  gap: 5px;
}

.general-skill-study p {
  margin: 0;
  color: #d8b676;
  font-size: 9px;
}

.general-skill-study button {
  min-height: 24px;
  border-color: rgba(165, 140, 92, .42);
  background: rgba(44, 34, 25, .58);
  color: rgba(230, 204, 152, .58);
  font-size: 10px;
}

.general-skill-study button:not(:disabled) {
  border-color: rgba(170, 214, 255, .66);
  background: linear-gradient(180deg, rgba(54, 87, 110, .84), rgba(30, 45, 62, .84));
  color: #dff2ff;
}

.general-soul-reserve {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

.general-soul-reserve p {
  margin: 0;
  color: #d8b676;
  font-size: 9px;
}

.general-soul-reserve div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.general-soul-reserve button {
  min-height: 24px;
  border-color: rgba(165, 140, 92, .42);
  background: rgba(44, 34, 25, .58);
  color: rgba(230, 204, 152, .58);
  font-size: 10px;
}

.general-soul-reserve button:not(:disabled) {
  border-color: rgba(255, 220, 118, .72);
  background: linear-gradient(180deg, rgba(125, 80, 25, .86), rgba(77, 38, 14, .82));
  color: #ffe9aa;
}

.general-upgrade-result {
  min-height: 14px;
  color: #ffe0a0;
  font-size: 8px;
  font-style: normal;
}

.juxianlou-guest-panel {
  display: grid;
  gap: 7px;
  color: #f2d7a0;
}

.juxianlou-guest-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(224, 178, 91, .28);
  border-radius: 7px;
  background: rgba(30, 16, 9, .50);
}

.juxianlou-guest-card img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(235, 195, 95, .52);
}

.juxianlou-guest-card strong,
.juxianlou-guest-card span,
.juxianlou-guest-card em {
  display: block;
}

.juxianlou-guest-card strong {
  color: #ffe9ad;
  font-size: 13px;
}

.juxianlou-guest-card span,
.juxianlou-guest-card em,
.juxianlou-empty {
  margin-top: 2px;
  color: #d8b676;
  font-size: 9px;
  font-style: normal;
}

.juxianlou-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 6px;
}

.modal-skin-juxianlou .juxianlou-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.modal-skin-juxianlou .juxianlou-actions button {
  min-height: 28px;
  padding: 4px 5px;
  font-size: 10px;
  line-height: 1.15;
}

.modal-skin-juxianlou .juxianlou-actions button.speedup {
  font-size: 9px;
}

.juxianlou-subpage {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 270px;
  padding-top: 22px;
  color: #f2d7a0;
}

.juxianlou-owned-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.juxianlou-owned-list::-webkit-scrollbar {
  display: none;
}

.juxianlou-owned-window {
  overflow: hidden;
}

.juxianlou-owned-list button {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 5px;
  align-items: center;
  min-height: 38px;
  padding: 4px;
  border: 1px solid rgba(210, 166, 84, .26);
  border-radius: 6px;
  background: rgba(34, 18, 10, .42);
  color: #efd7a0;
  text-align: left;
}

.juxianlou-owned-list button.active {
  border-color: rgba(255, 224, 136, .72);
  background: rgba(93, 58, 22, .62);
}

.juxianlou-owned-list img {
  grid-row: 1 / 4;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.juxianlou-owned-list strong,
.juxianlou-owned-list span,
.juxianlou-owned-list em {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.juxianlou-owned-list strong {
  color: #ffe9ad;
  font-size: 9px;
  line-height: 1.05;
}

.juxianlou-owned-list span {
  font-size: 8px;
}

.juxianlou-owned-list em {
  color: #d6b36f;
  font-size: 8px;
  font-style: normal;
}

.juxianlou-captive-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 7px;
}

.juxianlou-captive-list button {
  display: grid;
  grid-template-columns: 30px minmax(44px, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  min-height: 48px;
  width: 100%;
  column-gap: 7px;
  row-gap: 2px;
}

.juxianlou-captive-list img {
  grid-row: 1 / 4;
  width: 26px;
  height: 26px;
}

.juxianlou-captive-list strong,
.juxianlou-captive-list span,
.juxianlou-captive-list em {
  white-space: nowrap;
}

.juxianlou-captive-list span {
  grid-column: 2 / 4;
  color: #ead09a;
  font-size: 7px;
}

.juxianlou-captive-list em {
  grid-column: 2 / 4;
  color: #f8d982;
  font-size: 7px;
  text-align: left;
}

.juxianlou-captive-list strong {
  font-size: 8px;
}

.juxianlou-modal-panel [data-juxianlou-item="captivePersuade"].speedup {
  padding: 1px;
  font-size: 5px;
  line-height: 1.05;
}

.juxianlou-modal-panel [data-juxianlou-item="captiveBanquet"].is-cooling {
  border-color: #4c3b29;
  background: #21180f;
  color: #8d7c65;
}

.captive-clear-cooldown {
  display: grid;
  grid-template-columns: 9px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 2px;
  width: 100%;
}

.captive-clear-cooldown img {
  grid-row: 1;
  grid-column: 1;
  width: 8px;
  height: 8px;
}

.captive-clear-cooldown b {
  grid-row: 1;
  grid-column: 2;
}

.captive-clear-cooldown em {
  grid-row: 2;
  grid-column: 1 / 3;
  justify-self: center;
  transform: translateX(-2px);
}

.captive-clear-cooldown b,
.captive-clear-cooldown em {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-style: normal;
}

.juxianlou-gift-page {
  position: absolute;
  inset: 54px 34px 36px;
  color: #f3d9a3;
}

.juxianlou-gift-page .bingying-back-button {
  position: absolute;
  left: 4px;
  top: -22px;
}

.juxianlou-gift-page .modal-brief {
  margin: 0 0 8px 34px;
  font-size: 8px;
}

.juxianlou-gift-list {
  display: grid;
  gap: 7px;
  max-height: 286px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: none;
}

.juxianlou-gift-list::-webkit-scrollbar {
  display: none;
}

.juxianlou-gift-row {
  display: grid;
  grid-template-columns: 1fr 72px 52px;
  gap: 4px 6px;
  align-items: center;
  min-height: 54px;
  padding: 6px;
  border: 1px solid rgba(226, 184, 88, .48);
  border-radius: 6px;
  background: rgba(45, 25, 12, .34);
}

.juxianlou-gift-row strong {
  color: #ffe5a2;
  font-size: 9px;
}

.juxianlou-gift-row span,
.juxianlou-gift-row em,
.juxianlou-gift-row label {
  font-size: 7px;
  color: #efd09a;
  font-style: normal;
}

.juxianlou-gift-row span {
  grid-column: 1 / 4;
}

.juxianlou-gift-row input {
  width: 48px;
  height: 18px;
  margin-left: 3px;
  border: 1px solid rgba(224, 178, 91, .55);
  background: rgba(20, 10, 5, .48);
  color: #ffe7ad;
  font-size: 8px;
}

.juxianlou-gift-row button {
  min-height: 22px;
  border-color: #b58a34;
  background: linear-gradient(180deg, #e5c36c 0%, #a16b24 66%, #5b3414 100%);
  color: #fff2bd;
  font-size: 8px;
  font-weight: 800;
}


.task-system {
  display: grid;
  gap: 8px;
  max-height: 58vh;
  color: #f2d7a0;
}

.task-summary,
.task-result {
  color: #d8b676;
  font-size: 11px;
}

.task-list {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  max-height: 48vh;
  padding-right: 2px;
  scrollbar-width: none;
}

.task-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.task-card {
  display: grid;
  grid-template-columns: 1fr 66px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(224, 178, 91, .22);
  border-radius: 7px;
  background: rgba(30, 16, 9, .52);
}

.task-card strong,
.task-card span,
.task-card em,
.task-card small {
  display: block;
}

.task-card strong {
  color: #ffe6a8;
  font-size: 12px;
}

.task-card span,
.task-card em,
.task-card small {
  margin-top: 2px;
  color: #d8b676;
  font-size: 9px;
  font-style: normal;
}

.task-card button {
  min-height: 28px;
  border-color: rgba(165, 140, 92, .42);
  background: rgba(44, 34, 25, .58);
  color: rgba(230, 204, 152, .58);
  font-size: 10px;
}

.task-card button:not(:disabled) {
  border-color: rgba(255, 220, 118, .72);
  background: linear-gradient(180deg, rgba(125, 80, 25, .86), rgba(77, 38, 14, .82));
  color: #ffe9aa;
}

.vip-panel {
  gap: 8px;
}

.vip-summary {
  line-height: 1.45;
}

.vip-progress {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(218, 166, 73, .42);
  border-radius: 999px;
  background: rgba(21, 11, 5, .62);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45);
}

.vip-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f5d16, #ffd36d 58%, #fff0b7);
  box-shadow: 0 0 8px rgba(255, 208, 97, .42);
}

.vip-card strong {
  color: #ffe0a0;
}

.vip-card span {
  color: #e6c58b;
}

.vip-card small {
  color: #bd9862;
}

.game-modal.modal-skin-vip {
  position: relative;
  width: min(92vw, calc(86dvh * 0.6667), 360px);
  aspect-ratio: 2 / 3;
  height: auto;
  padding: 0;
  border: 0;
  background-image: var(--modal-bg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #ffe4aa;
  overflow: hidden;
}

.modal-skin-vip .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-vip #gameModalTitle {
  position: absolute;
  left: var(--vip-x, 50%);
  top: var(--vip-y, 7.778%);
  width: var(--vip-w, 41.667%);
  height: var(--vip-h, 5.556%);
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe9a8;
  font-size: var(--vip-size, 17px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(41, 8, 2, .98), 0 0 8px rgba(245, 178, 60, .5);
  pointer-events: none;
}

.modal-skin-vip #gameModalClose {
  position: absolute;
  left: var(--vip-x, 87.5%);
  top: var(--vip-y, 10.185%);
  width: var(--vip-w, 9.444%);
  height: var(--vip-h, 6.296%);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.modal-skin-vip #gameModalClose::before,
.modal-skin-vip #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 9%;
  min-height: 2px;
  border-radius: 999px;
  background: #ffe7a4;
  box-shadow: 0 1px 2px rgba(38, 9, 2, .9), 0 0 5px rgba(255, 195, 72, .42);
}

.modal-skin-vip #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-vip #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-vip #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: visible;
}

.modal-skin-vip .vip-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: none;
  gap: 0;
  max-height: none;
  color: #ffe2a0;
}

.modal-skin-vip .vip-back-button {
  position: absolute;
  left: 28px;
  top: 34px;
  z-index: 8;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.modal-skin-vip .vip-back-button::before,
.modal-skin-vip .vip-back-button::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 17px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff4b8, #d79b33);
  box-shadow: 0 1px 2px rgba(32, 12, 2, .65);
  transform-origin: left center;
}

.modal-skin-vip .vip-back-button::before { transform: rotate(-38deg); }
.modal-skin-vip .vip-back-button::after { transform: rotate(38deg); }

.modal-skin-vip .vip-back-button:hover,
.modal-skin-vip .vip-back-button:active,
.modal-skin-vip .vip-back-button:focus,
.modal-skin-vip .vip-back-button:focus-visible {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(1.08);
}

.modal-skin-vip .vip-summary,
.modal-skin-vip .task-result {
  position: absolute;
  left: var(--vip-x, 50%);
  top: var(--vip-y, 21.481%);
  width: var(--vip-w, 75.556%);
  height: var(--vip-h, 9.63%);
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: #ffe7b5;
  font-size: var(--vip-size, 10px);
  font-weight: 800;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(33, 9, 2, .95), 0 0 5px rgba(135, 48, 8, .52);
}

.modal-skin-vip .task-result {
  display: grid;
  place-items: center;
  text-align: center;
}

.modal-skin-vip .task-list {
  position: absolute;
  left: var(--vip-x, 50%);
  top: var(--vip-y, 52.593%);
  width: var(--vip-w, 75.556%);
  height: var(--vip-h, 43.704%);
  max-height: var(--vip-h, none);
  transform: translate(-50%, -50%);
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-skin-vip .task-card {
  grid-template-columns: 1fr 48px;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(246, 194, 82, .24);
  border-radius: 4px;
  background: rgba(35, 13, 5, .48);
}

.modal-skin-vip .task-card strong {
  color: #ffe391;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.22;
  text-shadow: 0 1px 2px rgba(29, 7, 1, .96);
}

.modal-skin-vip .task-card span,
.modal-skin-vip .task-card em,
.modal-skin-vip .task-card small {
  margin-top: 1px;
  color: #f3ce8c;
  font-size: var(--vip-size, 8px);
  font-weight: 800;
  font-style: normal;
  line-height: 1.28;
  text-shadow: 0 1px 2px rgba(29, 7, 1, .96);
}

.modal-skin-vip .task-card small {
  color: #d7a968;
}

.modal-skin-vip .task-card button {
  min-height: 24px;
  border-color: rgba(179, 116, 34, .48);
  border-radius: 3px;
  background: rgba(65, 29, 8, .44);
  color: rgba(255, 226, 166, .68);
  font-size: 9px;
  font-weight: 800;
}

.modal-skin-vip .task-card button:not(:disabled) {
  border-color: rgba(255, 214, 105, .76);
  background: linear-gradient(180deg, rgba(151, 82, 22, .92), rgba(83, 28, 8, .9));
  color: #ffe5a2;
  text-shadow: 0 1px 2px rgba(36, 9, 2, .78);
}

.modal-skin-vip .vip-progress {
  position: absolute;
  left: var(--vip-x, 50%);
  top: var(--vip-y, 28.333%);
  width: var(--vip-w, 75.556%);
  height: var(--vip-h, 1.481%);
  transform: translate(-50%, -50%);
  border-color: rgba(255, 210, 99, .48);
  background: rgba(18, 6, 2, .68);
}

.modal-skin-vip .vip-progress i {
  background: linear-gradient(90deg, #9d3818, #f0ab3e 54%, #fff0a8);
}

.game-modal.modal-skin-recruit {
  position: relative;
  width: 360px;
  height: 430px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #f3dcab;
}

.modal-skin-recruit .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-recruit #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 130px;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffe0a3;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
  display: none;
}

.modal-skin-recruit #gameModalClose {
  position: absolute;
  left: 318px;
  top: 35px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.modal-skin-recruit #gameModalClose::before,
.modal-skin-recruit #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.modal-skin-recruit #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-recruit #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-skin-recruit .recruit-back-button {
  position: absolute !important;
  left: 42px;
  top: 35px;
  z-index: 80;
  width: 32px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto;
}

.modal-skin-artifact .artifact-back-button {
  position: absolute !important;
  left: 42px;
  top: 34px;
  z-index: 80;
  width: 32px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto;
}

.modal-skin-artifact .artifact-subpage-layout-applied .artifact-back-button[data-artifact-subpage-item="back"] {
  left: var(--asx) !important;
  top: var(--asy) !important;
  width: var(--asw) !important;
  height: var(--ash) !important;
}

.modal-skin-recruit #gameModalBody {
  position: absolute;
  inset: 0;
}

.avatar-modal.modal-skin-avatar {
  position: relative;
  width: min(calc(100vw - 24px), calc(var(--mobile-stage-max-width) - 24px), calc(100dvh - 44px), 520px);
  height: min(calc(100vw - 24px), calc(var(--mobile-stage-max-width) - 24px), calc(100dvh - 44px), 520px);
  padding: 0;
}

.avatar-modal.name-modal-panel {
  position: relative;
  width: min(1024px, calc(100vw - 24px), calc((var(--app-height, 100dvh) - 48px) * 2.6667));
  aspect-ratio: 1024 / 384;
  height: auto;
  padding: 0;
  background:
    var(--modal-bg) center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 42%, rgba(255, 236, 160, .92), rgba(204, 139, 54, .78) 52%, rgba(83, 45, 18, .92) 100%),
    linear-gradient(180deg, #e8bb68, #6f3c17);
  border-radius: 8px;
  overflow: visible;
}

.name-modal-panel .modal-head,
.name-modal-panel .upload-row,
.name-modal-panel .action-row {
  position: static;
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

.name-modal-panel [data-name-modal-item] {
  position: absolute;
  left: var(--name-x);
  top: var(--name-y);
  width: var(--name-w);
  height: var(--name-h);
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: var(--name-size);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 2;
}

.name-modal-panel #nameModalTitle {
  display: grid;
  place-items: center;
  color: #8a541f;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 232, 158, .92), 0 0 2px rgba(24, 11, 3, .5), 1px 1px 0 rgba(41, 20, 5, .28);
}

.name-modal-panel #nameModalClose,
.name-modal-panel #playerNameSave {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.name-modal-panel #nameModalClose {
  color: transparent;
  font-size: 0;
  min-width: 44px;
  min-height: 44px;
  z-index: 20;
}

.name-modal-panel #nameModalClose::before,
.name-modal-panel #nameModalClose::after {
  content: none;
  display: none;
}

.name-modal-panel [data-name-modal-item="label"] {
  display: grid;
  place-items: center;
  color: #563013;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 224, 139, .82), 0 0 3px rgba(37, 18, 5, .24);
}

.name-modal-panel #playerNameInput {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #38200c;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 226, 148, .72), 0 0 3px rgba(26, 12, 3, .22);
  box-shadow: none;
  outline: 0;
}

.name-modal-panel #playerNameRandom,
.name-modal-panel #playerNameSave {
  min-height: 26px;
  padding: 0 8px;
  line-height: 1.15;
}

.name-modal-panel #playerNameSave {
  display: grid;
  place-items: center;
  color: #8b5330;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 221, 142, .52), 0 0 2px rgba(32, 13, 3, .18);
  transform: translate(-50%, -50%) perspective(180px) rotateX(5deg) skewX(-5deg);
  transform-origin: center 64%;
  opacity: .58;
  filter: saturate(.78) brightness(.82);
  cursor: default;
}

.name-modal-panel #playerNameSave.is-active {
  color: #ffe0a1;
  text-shadow: 0 1px 1px rgba(42, 18, 4, .95), 0 0 5px rgba(255, 193, 75, .42);
  opacity: 1;
  filter: saturate(1.08) brightness(1.05);
  cursor: pointer;
}

.modal-skin-mail .mail-profile-trigger {
  cursor: pointer;
}

.modal-skin-mail .mail-vip-trigger,
.modal-skin-mail .mail-identity-trigger,
.player-profile-vip.vip-page-trigger,
.player-profile-name-trigger,
.player-profile-identity-trigger {
  cursor: pointer;
}

.modal-skin-mail .mail-profile-trigger:hover,
.modal-skin-mail .mail-vip-trigger:hover,
.modal-skin-mail .mail-identity-trigger:hover,
.player-profile-vip.vip-page-trigger:hover,
.player-profile-name-trigger:hover,
.player-profile-identity-trigger:hover {
  filter: brightness(1.08);
}

.name-modal-panel #nameModalClose:hover,
.name-modal-panel #nameModalClose:active,
.name-modal-panel #nameModalClose:focus,
.name-modal-panel #nameModalClose:focus-visible,
.name-modal-panel #playerNameSave:hover,
.name-modal-panel #playerNameSave:active,
.name-modal-panel #playerNameSave:focus,
.name-modal-panel #playerNameSave:focus-visible {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.game-modal.modal-skin-bingying {
  position: relative;
  width: var(--bingying-modal-width, 360px);
  height: var(--bingying-modal-height, 430px);
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f2d6a3;
}

.game-modal.modal-skin-yuxuantai {
  position: relative;
  width: var(--yxt-modal-width, 360px);
  height: var(--yxt-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-juxianlou {
  position: relative;
  width: var(--jxl-modal-width, 360px);
  height: var(--jxl-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-jishi {
  position: relative;
  width: var(--jishi-modal-width, 360px);
  height: var(--jishi-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-shenbingge {
  position: relative;
  width: var(--sbg-modal-width, 360px);
  height: var(--sbg-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-yumayuan {
  position: relative;
  width: var(--yma-modal-width, 360px);
  height: var(--yma-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-jumingsuo {
  position: relative;
  width: 360px;
  height: 430px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-shuyuan {
  position: relative;
  width: var(--sy-modal-width, 360px);
  height: var(--sy-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-chengqiang {
  position: relative;
  width: 360px;
  height: 430px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
  background-image: url("../assets/ui/modal_chengqiang_backplate_v1_webp_q82.webp?v=1675") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.game-modal.modal-skin-artifact {
  position: relative;
  width: var(--artifact-draw-width, 360px);
  height: var(--artifact-draw-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.game-modal.modal-skin-resource-liangtian,
.game-modal.modal-skin-resource-famuchang,
.game-modal.modal-skin-resource-tiekuang {
  position: relative;
  width: var(--resource-modal-width, 360px);
  height: var(--resource-modal-height, 430px);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: #f3dcab;
}

.modal-skin-juxianlou #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-jishi #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-shenbingge #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-yumayuan #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-jumingsuo #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-shuyuan #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-chengqiang #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.modal-skin-artifact #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.resource-modal-panel #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
}

.jishi-modal-panel .modal-head,
.shenbingge-modal-panel .modal-head,
.yumayuan-modal-panel .modal-head,
.modal-skin-jumingsuo .modal-head,
.shuyuan-modal-panel .modal-head,
.chengqiang-modal-panel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.resource-modal-panel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.jishi-modal-panel .panel-grid,
.jishi-modal-panel .feature-area,
.jishi-modal-panel .action-row,
.shenbingge-modal-panel .panel-grid,
.shenbingge-modal-panel .feature-area,
.shenbingge-modal-panel .action-row,
.yumayuan-modal-panel .panel-grid,
.yumayuan-modal-panel .feature-area,
.yumayuan-modal-panel .action-row,
.modal-skin-jumingsuo .panel-grid,
.modal-skin-jumingsuo .action-row,
.shuyuan-modal-panel .panel-grid,
.shuyuan-modal-panel .feature-area,
.shuyuan-modal-panel .action-row,
.chengqiang-modal-panel .panel-grid,
.chengqiang-modal-panel .feature-area,
.chengqiang-modal-panel .action-row {
  display: contents;
}

.resource-modal-panel .panel-grid,
.resource-modal-panel .feature-area,
.resource-modal-panel .action-row {
  display: contents;
}

.modal-skin-jumingsuo [data-jumingsuo-item] {
  position: absolute;
  left: var(--jmsx);
  top: var(--jmsy);
  width: var(--jmsw);
  height: var(--jmsh);
  margin: 0;
  font-size: var(--jmss);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.modal-skin-jumingsuo .jumingsuo-panel-grid .info-row {
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 211, 121, .16);
  color: #fff0c0;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
}

.modal-skin-jumingsuo .jumingsuo-panel-grid .info-row b {
  flex: 0 0 auto;
  color: #ffd46f;
}

.modal-skin-jumingsuo .jumingsuo-panel-grid .info-row span {
  flex: 1;
  color: #fff7db;
  text-align: right;
}

.modal-skin-jumingsuo .jumingsuo-panel-grid .action-row button {
  display: grid;
  place-items: center;
  border: 1px solid rgba(206, 151, 55, .88);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(126, 68, 22, .94), rgba(55, 29, 13, .96));
  color: #ffe0a3;
  font-size: var(--jmss);
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.modal-skin-jumingsuo .jumingsuo-panel-grid .action-row button:disabled {
  opacity: .58;
  filter: grayscale(.3);
}

.modal-skin-jumingsuo #gameModalTitle {
  margin: 0;
  color: #ffe3a5;
  font-size: var(--jmss);
  text-align: center;
  text-shadow: 0 1px 2px #2d1205, 0 0 8px rgba(255, 185, 70, .46);
}

.modal-skin-jumingsuo #gameModalTitle[data-jumingsuo-item] {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: 0;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.modal-skin-jumingsuo .action-result[data-jumingsuo-item="result"] {
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffd978;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(28, 9, 2, .96), 0 0 5px rgba(127, 54, 8, .68);
  pointer-events: none;
}

.modal-skin-jumingsuo #gameModalClose {
  min-width: 0;
  padding: 0;
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.modal-skin-jumingsuo #gameModalClose::before,
.modal-skin-jumingsuo #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.modal-skin-jumingsuo #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-jumingsuo #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.jumingsuo-live-edit [data-jumingsuo-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.jumingsuo-live-edit [data-jumingsuo-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.jumingsuo-live-edit .jumingsuo-live-editor-panel,
.jumingsuo-live-edit .jumingsuo-live-editor-panel * {
  pointer-events: auto !important;
}

.shuyuan-live-edit [data-shuyuan-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  user-select: none;
  touch-action: none;
}

.shuyuan-live-edit [data-shuyuan-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.shuyuan-live-edit .shuyuan-live-editor-panel,
.shuyuan-live-edit .shuyuan-live-editor-panel * {
  pointer-events: auto !important;
}

.chengqiang-live-edit [data-chengqiang-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  user-select: none;
  touch-action: none;
}

.chengqiang-live-edit [data-chengqiang-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.chengqiang-live-edit .chengqiang-live-editor-panel,
.chengqiang-live-edit .chengqiang-live-editor-panel * {
  pointer-events: auto !important;
}

.chengqiang-garrison-live-edit [data-chengqiang-garrison-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  user-select: none;
  touch-action: none;
}

.chengqiang-garrison-live-edit [data-chengqiang-garrison-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.chengqiang-garrison-live-edit .chengqiang-garrison-live-editor-panel,
.chengqiang-garrison-live-edit .chengqiang-garrison-live-editor-panel * {
  pointer-events: auto !important;
}

.jumingsuo-govern-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 62px 32px 26px;
  color: #f3dcab;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
  overflow: hidden;
}

.jumingsuo-govern-page .bingying-back-button {
  position: absolute !important;
  left: 22px;
  top: 30px;
  z-index: 72;
  display: block;
  width: 32px !important;
  height: 32px !important;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
  transform: translate(-50%, -50%) !important;
}

.modal-skin-jumingsuo .jumingsuo-govern-page .bingying-back-button[data-jumingsuo-item="governBack"] {
  left: var(--jmsx);
  top: var(--jmsy);
  width: var(--jmsw) !important;
  height: var(--jmsh) !important;
  font-size: var(--jmss);
}

.jumingsuo-govern-page .modal-brief {
  margin-left: 22px;
  color: #fff0c0;
  font-size: 9px;
}

.jumingsuo-govern-list {
  max-height: none;
  min-height: 0;
}

.jumingsuo-govern-page .general-card {
  min-height: 52px;
  padding: 5px 7px;
}

.jumingsuo-govern-page .general-card strong {
  font-size: 10px;
}

.jumingsuo-govern-page .general-card span,
.jumingsuo-govern-page .general-card em {
  font-size: 8px;
}

.jumingsuo-govern-page .general-card:disabled {
  opacity: .62;
  filter: grayscale(.25);
}

.chengqiang-repair-page {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 7px;
  padding: 62px 32px 26px;
  color: #f3dcab;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
  overflow: hidden;
}

.chengqiang-repair-page .modal-brief {
  margin: 0 8px 0 22px;
  color: #fff0c0;
  font-size: 9px;
  line-height: 1.35;
}

.chengqiang-repair-summary {
  display: grid;
  gap: 2px;
  margin: 0 10px 0 22px;
  padding: 5px 8px;
  border: 1px solid rgba(221, 166, 65, .24);
  border-radius: 7px;
  background: rgba(32, 15, 7, .38);
}

.chengqiang-repair-summary b {
  color: #ffe18d;
  font-size: 10px;
}

.chengqiang-repair-summary span {
  color: #d8b676;
  font-size: 8px;
}

.chengqiang-repair-list {
  max-height: none;
  min-height: 0;
}

.chengqiang-repair-page .general-card {
  min-height: 52px;
  padding: 5px 7px;
}

.chengqiang-repair-page .general-card strong {
  font-size: 10px;
}

.chengqiang-repair-page .general-card span,
.chengqiang-repair-page .general-card em {
  font-size: 8px;
}

.chengqiang-repair-page .general-card:disabled {
  opacity: .62;
  filter: grayscale(.25);
}

.chengqiang-repair-result {
  min-height: 16px;
  color: #ffe3a2;
  font-size: 8px;
  text-align: center;
}

.jishi-modal-panel [data-jishi-item] {
  position: absolute;
  left: var(--jsx);
  top: var(--jsy);
  width: var(--jsw);
  height: var(--jsh);
  margin: 0;
  padding: 0;
  font-size: var(--jss);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.shenbingge-modal-panel [data-shenbingge-item] {
  position: absolute;
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  margin: 0;
  padding: 0;
  font-size: var(--sbgs);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.shenbingge-modal-panel #gameModalClose[data-shenbingge-item="close"] {
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  font-size: var(--sbgs);
}

.shenbingge-modal-panel #gameModalTitle[data-shenbingge-item="title"] {
  left: var(--sbgx);
  top: var(--sbgy);
  width: var(--sbgw);
  height: var(--sbgh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(11px, calc(var(--sbgs) - 1px));
  line-height: 1.12;
  white-space: nowrap;
  pointer-events: auto;
  overflow: visible;
  z-index: 74;
}

.yumayuan-modal-panel [data-yumayuan-item] {
  position: absolute;
  left: var(--ymax);
  top: var(--ymay);
  width: var(--ymaw);
  height: var(--ymah);
  margin: 0;
  padding: 0;
  font-size: var(--ymas);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.shuyuan-modal-panel [data-shuyuan-item] {
  position: absolute;
  left: var(--syx);
  top: var(--syy);
  width: var(--syw);
  height: var(--syh);
  margin: 0;
  padding: 0;
  font-size: var(--sys);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.resource-modal-panel [data-resource-item] {
  position: absolute;
  left: var(--rsx);
  top: var(--rsy);
  width: var(--rsw);
  height: var(--rsh);
  margin: 0;
  padding: 0;
  font-size: var(--rss);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.resource-live-edit [data-resource-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.resource-live-edit [data-resource-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.resource-live-edit .resource-live-editor-panel,
.resource-live-edit .resource-live-editor-panel * {
  pointer-events: auto !important;
}

.resource-live-editor-panel {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(2, 78px);
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(245, 210, 124, .66);
  border-radius: 8px;
  background: rgba(18, 11, 7, .9);
  color: #ffe7ae;
  font-size: 10px;
  pointer-events: auto;
}

.resource-live-editor-panel b,
.resource-live-editor-panel select,
.resource-live-editor-panel button {
  grid-column: 1 / -1;
}

.resource-live-editor-panel label {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 3px;
}

.resource-live-editor-panel input,
.resource-live-editor-panel select {
  min-width: 0;
  border: 1px solid rgba(255, 222, 143, .45);
  border-radius: 4px;
  background: rgba(255, 243, 204, .92);
  color: #2f1809;
  font-size: 10px;
}

.resource-live-editor-panel button {
  border: 1px solid rgba(255, 221, 130, .8);
  border-radius: 5px;
  background: rgba(122, 69, 25, .94);
  color: #ffe9b6;
}

.shuyuan-modal-panel [data-shuyuan-item="desc"] { left: var(--syx, 62px); top: var(--syy, 86px); width: var(--syw, 240px); height: var(--syh, 34px); font-size: var(--sys, 10px); }
.shuyuan-modal-panel [data-shuyuan-item="rowLevel"] { left: var(--syx, 58px); top: var(--syy, 104px); width: var(--syw, 248px); height: var(--syh, 28px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowRequire"] { left: var(--syx, 58px); top: var(--syy, 134px); width: var(--syw, 248px); height: var(--syh, 24px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowQueue"] { left: var(--syx, 58px); top: var(--syy, 164px); width: var(--syw, 248px); height: var(--syh, 24px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowScholar"] { left: var(--syx, 58px); top: var(--syy, 194px); width: var(--syw, 248px); height: var(--syh, 24px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowTime"] { left: var(--syx, 58px); top: var(--syy, 224px); width: var(--syw, 248px); height: var(--syh, 24px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowCost"] { left: var(--syx, 58px); top: var(--syy, 254px); width: var(--syw, 248px); height: var(--syh, 24px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="rowEffect"] { left: var(--syx, 58px); top: var(--syy, 292px); width: var(--syw, 248px); height: var(--syh, 42px); font-size: var(--sys, 9px); }
.shuyuan-modal-panel [data-shuyuan-item="upgrade"] { left: var(--syx, 70px); top: var(--syy, 342px); width: var(--syw, 78px); height: var(--syh, 34px); font-size: var(--sys, 10px); }
.shuyuan-modal-panel [data-shuyuan-item="featureResearch"] { left: var(--syx, 152px); top: var(--syy, 342px); width: var(--syw, 78px); height: var(--syh, 34px); font-size: var(--sys, 10px); }
.shuyuan-modal-panel [data-shuyuan-item="featureScholar"] { left: var(--syx, 235px); top: var(--syy, 342px); width: var(--syw, 78px); height: var(--syh, 34px); font-size: var(--sys, 10px); }
.shuyuan-modal-panel [data-shuyuan-item="featureTitle"],
.shuyuan-modal-panel [data-shuyuan-item="featureDesc"] { display: none; }
.shuyuan-modal-panel [data-shuyuan-item="result"] { left: var(--syx, 58px); top: var(--syy, 318px); width: var(--syw, 250px); height: var(--syh, 20px); font-size: var(--sys, 8px); }

.resource-modal-panel #gameModalTitle {
  color: #6b320c;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 237, 178, .9),
    1px 0 0 rgba(255, 237, 178, .72),
    -1px 0 0 rgba(255, 237, 178, .72),
    0 0 5px rgba(80, 35, 7, .28);
}

.resource-modal-panel #gameModalClose {
  min-width: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0 !important;
}

.resource-modal-panel .modal-brief,
.resource-modal-panel .info-row,
.resource-modal-panel .feature-area h3,
.resource-modal-panel .feature-area p,
.resource-modal-panel .action-result {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #3f240b;
  font-weight: 700;
  text-shadow:
    0 1px 0 rgba(255, 241, 190, .9),
    1px 0 0 rgba(255, 241, 190, .66),
    -1px 0 0 rgba(255, 241, 190, .66),
    0 0 4px rgba(60, 26, 5, .18);
}

.resource-modal-panel .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(255, 211, 121, .16);
}

.resource-modal-panel .info-row b {
  color: #3f240b;
  font-weight: 800;
  text-shadow:
    0 1px 0 rgba(255, 241, 190, .95),
    1px 0 0 rgba(255, 241, 190, .72),
    -1px 0 0 rgba(255, 241, 190, .72),
    0 0 4px rgba(60, 26, 5, .22);
}

.resource-modal-panel .info-row span {
  color: #2f1c09;
  font-weight: 800;
  text-shadow:
    0 1px 0 rgba(255, 241, 190, .95),
    1px 0 0 rgba(255, 241, 190, .72),
    -1px 0 0 rgba(255, 241, 190, .72),
    0 0 4px rgba(60, 26, 5, .22);
}

.resource-modal-panel .info-row * {
  color: inherit;
  text-shadow: inherit;
}

.modal-skin-resource-famuchang.resource-modal-panel #gameModalTitle,
.modal-skin-resource-tiekuang.resource-modal-panel #gameModalTitle {
  color: #ffe0a3;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
}

.modal-skin-resource-famuchang.resource-modal-panel .modal-brief,
.modal-skin-resource-famuchang.resource-modal-panel .info-row,
.modal-skin-resource-famuchang.resource-modal-panel .feature-area h3,
.modal-skin-resource-famuchang.resource-modal-panel .feature-area p,
.modal-skin-resource-famuchang.resource-modal-panel .action-result,
.modal-skin-resource-tiekuang.resource-modal-panel .modal-brief,
.modal-skin-resource-tiekuang.resource-modal-panel .info-row,
.modal-skin-resource-tiekuang.resource-modal-panel .feature-area h3,
.modal-skin-resource-tiekuang.resource-modal-panel .feature-area p,
.modal-skin-resource-tiekuang.resource-modal-panel .action-result {
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
}

.modal-skin-resource-famuchang.resource-modal-panel .info-row b,
.modal-skin-resource-tiekuang.resource-modal-panel .info-row b {
  color: #ffd46f;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
}

.modal-skin-resource-famuchang.resource-modal-panel .info-row span,
.modal-skin-resource-tiekuang.resource-modal-panel .info-row span {
  color: #fff7db;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
}

.resource-modal-panel [data-resource-item="upgrade"] {
  display: grid;
  place-items: center;
  border-color: rgba(206, 151, 55, .88);
  background: linear-gradient(180deg, rgba(128, 70, 24, .94), rgba(60, 30, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.resource-modal-panel [data-resource-item="featureTitle"],
.resource-modal-panel [data-resource-item="featureDesc"] {
  display: none;
}

.resource-modal-panel [data-resource-item="upgrade"].speedup,
.resource-modal-panel [data-resource-item="upgrade"].speedup .speedup-button-content,
.resource-modal-panel [data-resource-item="upgrade"].speedup .speedup-button-content * {
  font-size: 5px !important;
  white-space: nowrap;
}

.resource-modal-panel [data-resource-item="upgrade"].speedup .yuanbao-inline-icon {
  width: 8px;
  height: 8px;
}

.shuyuan-modal-panel .shuyuan-research-page {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 58px;
  bottom: 28px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 5px;
  overflow: visible;
  color: #fff0c0;
}

.shuyuan-modal-panel [data-shuyuan-item="researchBack"] { left: var(--syx, 42px); top: var(--syy, 34px); width: var(--syw, 32px); height: var(--syh, 32px); font-size: var(--sys, 10px); }

.shuyuan-research-current {
  display: grid;
  gap: 2px;
  min-height: 34px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(56, 34, 18, .55), rgba(28, 18, 12, .20));
  box-shadow: none;
}

.shuyuan-research-current b {
  color: #ffe19a;
  font-size: 9px;
}

.shuyuan-research-current span,
.shuyuan-research-current em {
  color: #f5d9a7;
  font-size: 7px;
  font-style: normal;
  line-height: 1.15;
}

.shuyuan-tech-map-scroll {
  position: relative;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(216, 158, 74, .10), transparent 40%),
    rgba(23, 17, 12, .10);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.shuyuan-tech-map-scroll::-webkit-scrollbar {
  display: none;
}

.shuyuan-tech-map {
  position: relative;
  width: 300px !important;
  min-height: 224px;
  max-width: 100%;
}

.shuyuan-tech-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shuyuan-tech-links path {
  stroke: rgba(232, 188, 92, .54);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 2px rgba(255, 188, 76, .12));
}

.shuyuan-tech-links marker path {
  fill: rgba(232, 188, 92, .68);
}

.shuyuan-tech-links path.is-done {
  stroke: rgba(127, 215, 132, .72);
}

.shuyuan-tech-links path.is-bridge {
  stroke: rgba(232, 188, 92, .48);
}

.shuyuan-tech-node {
  position: absolute;
  width: 62px;
  height: 24px;
  min-width: 0;
  padding: 2px 4px;
  display: grid;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(216, 164, 75, .56);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 232, 151, .20), transparent 36%),
    linear-gradient(145deg, rgba(80, 45, 20, .92), rgba(31, 20, 14, .96));
  color: #fff3cb;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(255, 207, 90, .10), 0 0 6px rgba(26, 10, 2, .38);
  text-shadow: 0 1px 2px rgba(16, 6, 1, .98);
}

.shuyuan-tech-node::before {
  content: attr(data-order);
  position: absolute;
  left: -3px;
  top: -5px;
  min-width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(30, 19, 12, .92);
  border: 1px solid rgba(224, 181, 92, .58);
  color: #ffe3a5;
  font-size: 5px;
  line-height: 1;
}

.shuyuan-tech-node:active {
  transform: none;
  box-shadow: inset 0 0 12px rgba(255, 207, 90, .10), 0 0 6px rgba(26, 10, 2, .38);
}

.shuyuan-tech-node strong {
  color: #ffe09b;
  font-size: 6.4px;
  line-height: 1.1;
  white-space: nowrap;
}

.shuyuan-tech-node span {
  color: #f5c774;
  font-size: 5.6px;
  line-height: 1;
}

.shuyuan-tech-node.is-active {
  border-color: rgba(255, 232, 139, .96);
  box-shadow: inset 0 0 14px rgba(255, 225, 120, .18), 0 0 10px rgba(255, 207, 78, .42);
}

.shuyuan-tech-node.is-done {
  border-color: rgba(127, 215, 132, .74);
  background:
    radial-gradient(circle at 50% 20%, rgba(184, 255, 171, .20), transparent 38%),
    linear-gradient(145deg, rgba(39, 77, 35, .88), rgba(22, 35, 20, .96));
}

.shuyuan-tech-node.is-researching {
  animation: shuyuanResearchPulse 1.2s ease-in-out infinite;
}

.shuyuan-tech-node.is-locked {
  filter: grayscale(.52) brightness(.68);
}

.shuyuan-tech-node.is-locked::after {
  content: "閿?;
  position: absolute;
  right: -2px;
  top: -4px;
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(35, 23, 15, .92);
  color: #cbbca0;
  font-size: 5px;
  border: 1px solid rgba(210, 184, 130, .48);
}

.shuyuan-tech-node.category-鍏电,
.shuyuan-tech-node.category-璁粌,
.shuyuan-tech-node.category-鎴樻硶,
.shuyuan-tech-node.category-鍐涚暐 {
  border-color: rgba(219, 103, 66, .58);
}

.shuyuan-tech-node.category-璧勬簮,
.shuyuan-tech-node.category-鍐呮斂,
.shuyuan-tech-node.category-鏀夸护 {
  border-color: rgba(120, 197, 130, .52);
}

.shuyuan-tech-node.category-鍣ㄦ,
.shuyuan-tech-node.category-寰￠┈,
.shuyuan-tech-node.category-涓栫晫,
.shuyuan-tech-node.category-姝﹀皢 {
  border-color: rgba(130, 178, 235, .52);
}

.shuyuan-tech-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid rgba(218, 166, 76, .34);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(64, 37, 18, .72), rgba(28, 18, 13, .78));
}

.shuyuan-tech-detail b {
  color: #ffe09b;
  font-size: 9px;
}

.shuyuan-tech-detail span,
.shuyuan-tech-detail em,
.shuyuan-tech-detail small {
  grid-column: 1 / 2;
  color: #fff0c0;
  font-size: 7px;
  line-height: 1.15;
  font-style: normal;
}

.shuyuan-tech-detail button {
  grid-column: 2 / 3;
  grid-row: 1 / 6;
  align-self: stretch;
  width: 66px;
  min-width: 0;
  padding: 0 5px;
  border: 1px solid rgba(224, 179, 84, .82);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(126, 68, 22, .96), rgba(55, 29, 13, .98));
  color: #ffe0a3;
  font-size: 8px;
  font-weight: 800;
}

.shuyuan-tech-detail button:disabled {
  color: #b4a58b;
  filter: grayscale(.6) brightness(.72);
}

@keyframes shuyuanResearchPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.32); }
}

.shuyuan-research-result:not([data-shuyuan-item]) {
  position: static !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  padding: 2px 4px !important;
  font-size: 8px !important;
  text-align: center;
}

.shuyuan-modal-panel [data-shuyuan-item="result"] {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.shuyuan-scholar-page {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 58px;
  bottom: 28px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  overflow: visible;
  color: #fff0c0;
}

.shuyuan-scholar-summary {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  background: linear-gradient(90deg, rgba(56, 34, 18, .55), rgba(28, 18, 12, .20));
}

.shuyuan-scholar-summary b {
  color: #ffe19a;
  font-size: 10px;
}

.shuyuan-scholar-summary span,
.shuyuan-scholar-summary em {
  color: #f5d9a7;
  font-size: 8px;
  line-height: 1.2;
  font-style: normal;
}

.shuyuan-scholar-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.shuyuan-scholar-list::-webkit-scrollbar {
  display: none;
}

.shuyuan-scholar-card {
  min-width: 0;
  min-height: 70px;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 2px 6px;
  padding: 6px;
  border: 1px solid rgba(216, 164, 75, .42);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(72, 43, 22, .74), rgba(28, 19, 13, .84));
  color: #fff0c0;
  text-align: left;
}

.shuyuan-scholar-card img {
  grid-row: 1 / 4;
  width: 38px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255, 214, 116, .32);
}

.shuyuan-scholar-card strong {
  color: #ffe09b;
  font-size: 10px;
}

.shuyuan-scholar-card span,
.shuyuan-scholar-card em {
  color: #f5d9a7;
  font-size: 7px;
  line-height: 1.2;
  font-style: normal;
}

.shuyuan-scholar-card.is-assigned {
  border-color: rgba(127, 215, 132, .72);
  box-shadow: inset 0 0 12px rgba(116, 220, 126, .10);
}

.shuyuan-scholar-card.is-full:not(.is-assigned) {
  filter: grayscale(.35) brightness(.82);
}

.yumayuan-modal-panel [data-yumayuan-item="desc"] { left: 62px; top: 86px; width: 240px; height: 34px; font-size: 10px; }
.yumayuan-modal-panel [data-yumayuan-item="rowLevel"] { left: 58px; top: 126px; width: 248px; height: 34px; font-size: 9px; }
.yumayuan-modal-panel [data-yumayuan-item="rowNext"] { left: 58px; top: 164px; width: 248px; height: 24px; font-size: 9px; }
.yumayuan-modal-panel [data-yumayuan-item="rowCost"] { left: 58px; top: 193px; width: 248px; height: 24px; font-size: 9px; }
.yumayuan-modal-panel [data-yumayuan-item="rowTime"] { left: 58px; top: 222px; width: 248px; height: 24px; font-size: 9px; }
.yumayuan-modal-panel [data-yumayuan-item="rowEffect"] { left: 58px; top: 251px; width: 248px; height: 38px; font-size: 9px; }
.yumayuan-modal-panel [data-yumayuan-item="upgrade"] { left: 70px; top: 322px; width: 78px; height: 34px; font-size: 11px; }
.yumayuan-modal-panel [data-yumayuan-item="featureCultivate"] { left: 152px; top: 322px; width: 78px; height: 34px; font-size: 10px; }
.yumayuan-modal-panel [data-yumayuan-item="featureSynthesis"] { left: 235px; top: 322px; width: 78px; height: 34px; font-size: 10px; }
.yumayuan-modal-panel [data-yumayuan-item="featureStable"] { left: 152px; top: 365px; width: 160px; height: 34px; font-size: 10px; }
.yumayuan-modal-panel [data-yumayuan-item="featureTitle"],
.yumayuan-modal-panel [data-yumayuan-item="featureDesc"] { display: none; }
.yumayuan-modal-panel [data-yumayuan-item="result"] { left: 58px; top: 288px; width: 250px; height: 24px; font-size: 9px; }

.chengqiang-modal-panel .chengqiang-panel-grid,
.chengqiang-modal-panel .chengqiang-feature-area {
  color: #fff0c0;
}

.chengqiang-modal-panel [data-chengqiang-item] {
  position: absolute;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
  overflow: hidden;
  pointer-events: auto;
}

.chengqiang-modal-panel [data-chengqiang-item="rowLevel"] { left: 180px; top: 112px; width: 250px; height: 30px; font-size: 8px; }
.chengqiang-modal-panel [data-chengqiang-item="rowHealth"] { left: 180px; top: 148px; width: 250px; height: 24px; font-size: 9px; }
.chengqiang-modal-panel [data-chengqiang-item="rowDefense"] { left: 180px; top: 178px; width: 250px; height: 24px; font-size: 9px; }
.chengqiang-modal-panel [data-chengqiang-item="rowTime"] { left: 180px; top: 208px; width: 250px; height: 24px; font-size: 9px; }
.chengqiang-modal-panel [data-chengqiang-item="rowCost"] { left: 180px; top: 238px; width: 250px; height: 24px; font-size: 9px; }
.chengqiang-modal-panel [data-chengqiang-item="rowEffect"] { left: 180px; top: 272px; width: 250px; height: 34px; font-size: 8px; }
.chengqiang-modal-panel [data-chengqiang-item="upgrade"] { left: 108px; top: 326px; width: 72px; height: 34px; font-size: 10px; }
.chengqiang-modal-panel [data-chengqiang-item="repair"] { left: 180px; top: 326px; width: 72px; height: 34px; font-size: 10px; }
.chengqiang-modal-panel [data-chengqiang-item="garrison"] { left: 252px; top: 326px; width: 72px; height: 34px; font-size: 10px; }
.chengqiang-modal-panel [data-chengqiang-item="result"] { left: 180px; top: 368px; width: 250px; min-height: 20px; font-size: 8px; text-align: center; }

.chengqiang-modal-panel [data-chengqiang-item].info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 211, 121, .16);
}

.chengqiang-modal-panel [data-chengqiang-item].info-row b {
  color: #ffd46f;
  white-space: nowrap;
}

.chengqiang-modal-panel [data-chengqiang-item].info-row span {
  color: #fff7db;
  text-align: right;
}

.chengqiang-modal-panel [data-chengqiang-item="upgrade"],
.chengqiang-modal-panel [data-chengqiang-item="repair"],
.chengqiang-modal-panel [data-chengqiang-item="garrison"] {
  display: grid;
  place-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  box-shadow: none;
}

.chengqiang-modal-panel [data-chengqiang-item="upgrade"]:active,
.chengqiang-modal-panel [data-chengqiang-item="repair"]:active,
.chengqiang-modal-panel [data-chengqiang-item="garrison"]:active {
  background: transparent;
  box-shadow: none;
}

.chengqiang-modal-panel .info-row:not([data-chengqiang-item]) {
  position: relative;
  left: 56px;
  width: 250px;
  min-height: 24px;
  margin: 0 0 7px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 211, 121, .16);
  color: #fff0c0;
  font-size: 9px;
}

.chengqiang-modal-panel .info-row:not([data-chengqiang-item]):nth-child(1) { margin-top: 84px; }

.chengqiang-modal-panel .info-row:not([data-chengqiang-item]) b {
  color: #ffd46f;
  white-space: nowrap;
}

.chengqiang-modal-panel .info-row:not([data-chengqiang-item]) span {
  color: #fff7db;
  text-align: right;
}

.chengqiang-modal-panel .action-row {
  position: absolute;
  left: 58px;
  top: 326px;
  width: 64px;
  height: 34px;
}

.chengqiang-modal-panel .action-row button,
.chengqiang-modal-panel .feature-button {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffe0a3;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.chengqiang-modal-panel .action-row button:active,
.chengqiang-modal-panel .feature-button:active {
  background: transparent;
  box-shadow: none;
}

.chengqiang-modal-panel .chengqiang-feature-area h3,
.chengqiang-modal-panel .chengqiang-feature-area p {
  display: none;
}

.chengqiang-modal-panel .feature-buttons {
  display: contents;
}

.chengqiang-modal-panel .feature-button:nth-child(1) {
  position: absolute;
  left: 128px;
  top: 326px;
  width: 64px;
  height: 34px;
}

.chengqiang-modal-panel .feature-button:nth-child(2) {
  position: absolute;
  left: 198px;
  top: 326px;
  width: 64px;
  height: 34px;
}

.chengqiang-modal-panel .feature-button:nth-child(3) {
  position: absolute;
  left: 268px;
  top: 326px;
  width: 64px;
  height: 34px;
}

.chengqiang-modal-panel .action-result {
  position: absolute;
  left: 58px;
  top: 366px;
  width: 250px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff0c0;
  font-size: 8px;
  text-align: center;
}


.chengqiang-garrison-page {
  left: 30px;
  right: 30px;
  top: 70px;
  bottom: 34px;
  grid-template-rows: auto auto 1fr;
}

.chengqiang-garrison-page h3 {
  font-size: 14px;
}

.chengqiang-garrison-page p {
  color: #fff0c0;
  font-size: 9px;
  text-align: center;
}

.chengqiang-garrison-overview-page {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
  overflow: hidden;
}

.chengqiang-garrison-overview-page [data-chengqiang-garrison-item] {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.chengqiang-guard-layout-page {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
  overflow: hidden;
}

.chengqiang-guard-layout-page [data-chengqiang-guard-item] {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.chengqiang-guard-layout-page h3 {
  color: #ffe0a3;
  text-align: center;
}

.chengqiang-guard-layout-page p {
  color: #fff0c0;
  line-height: 1.32;
  text-align: center;
}

.chengqiang-garrison-overview {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
}

.chengqiang-garrison-overview div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 211, 121, .16);
  color: #fff0c0;
  font-size: 9px;
}

.chengqiang-garrison-overview b {
  color: #ffd46f;
  white-space: nowrap;
}

.chengqiang-garrison-overview span {
  color: #fff7db;
  text-align: right;
}

.chengqiang-garrison-overview em {
  color: #f1c98e;
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
  font-style: normal;
}

.chengqiang-garrison-actions {
  display: contents;
}

.chengqiang-garrison-actions button {
  position: absolute;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffe0a3;
  font-size: 10px;
  font-weight: 800;
  text-shadow: 0 1px 2px #1a0903;
  box-shadow: none;
}

.chengqiang-garrison-live-edit .ymc-editor-hitbox::after {
  content: none;
}

.chengqiang-guard-live-edit [data-chengqiang-guard-item] {
  position: absolute;
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.chengqiang-guard-live-edit [data-chengqiang-guard-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.chengqiang-guard-live-edit .ymc-editor-hitbox::after {
  content: none;
}

.chengqiang-garrison-actions button:active {
  background: transparent;
  box-shadow: none;
}

.chengqiang-garrison-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 18px;
}

.chengqiang-guard-panel {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 0;
}

.chengqiang-guard-summary {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(216, 164, 75, .24);
  border-radius: 7px;
  background: rgba(31, 15, 8, .46);
  color: #f7dcaa;
}

.chengqiang-guard-summary b {
  color: #ffe18d;
  font-size: 10px;
}

.chengqiang-guard-summary span {
  color: #f1c98e;
  font-size: 8px;
  line-height: 1.25;
}

.chengqiang-guard-window {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chengqiang-guard-window::-webkit-scrollbar {
  display: none;
}

.chengqiang-guard-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
  padding-bottom: 12px;
}

.chengqiang-guard-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto auto;
  gap: 1px 6px;
  min-height: 58px;
  padding: 5px;
  border: 1px solid rgba(224, 178, 91, .28);
  border-radius: 7px;
  background: rgba(29, 16, 9, .50);
  color: #f5ddb0;
  text-align: left;
  box-shadow: none;
}

.chengqiang-guard-card img {
  grid-row: 1 / 4;
  width: 34px;
  height: 46px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid rgba(235, 195, 95, .38);
}

.chengqiang-guard-card strong {
  color: #fff0bf;
  font-size: 10px;
}

.chengqiang-guard-card span,
.chengqiang-guard-card em {
  color: #d8b676;
  font-size: 7px;
  line-height: 1.18;
  font-style: normal;
}

.chengqiang-guard-card.is-selected {
  border-color: rgba(127, 215, 132, .76);
  box-shadow: inset 0 0 12px rgba(116, 220, 126, .12);
}

.chengqiang-machine-list {
  display: grid;
  gap: 7px;
  padding-bottom: 18px;
}

.chengqiang-machine-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  min-height: 66px;
  padding: 7px 8px;
  border: 1px solid rgba(224, 178, 91, .28);
  border-radius: 7px;
  background: rgba(29, 16, 9, .50);
  color: #f5ddb0;
}

.chengqiang-machine-card strong {
  color: #fff0bf;
  font-size: 11px;
}

.chengqiang-machine-card span,
.chengqiang-machine-card em,
.chengqiang-machine-card small {
  color: #d8b676;
  font-size: 8px;
  line-height: 1.2;
  font-style: normal;
}

.chengqiang-machine-card em,
.chengqiang-machine-card small {
  grid-column: 1 / -1;
}

.chengqiang-machine-card div {
  grid-row: 1 / 3;
  grid-column: 2;
  display: grid;
  gap: 4px;
  align-content: center;
}

.chengqiang-machine-card button {
  min-width: 48px;
  min-height: 24px;
  border: 1px solid rgba(206, 151, 55, .78);
  border-radius: 5px;
  background: rgba(84, 43, 18, .82);
  color: #ffe0a3;
  font-size: 8px;
}

.chengqiang-machine-card button:disabled,
.chengqiang-machine-card.is-locked {
  opacity: .62;
  filter: grayscale(.25);
}

.chengqiang-machine-card.is-selected {
  border-color: rgba(127, 215, 132, .76);
  box-shadow: inset 0 0 12px rgba(116, 220, 126, .12);
}

.chengqiang-garrison-card {
  min-height: 112px;
}

.chengqiang-garrison-card .unit-card-art {
  width: 82px;
  height: 60px;
}

.chengqiang-garrison-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #fff0c0;
  font-size: 11px;
  text-align: center;
}

.chengqiang-quantity-panel {
  color: #fff1c8;
}

.modal-skin-chengqiang #gameModalBody > .building-unlock-panel {
  position: absolute;
  left: 54px;
  top: 76px;
  width: 252px;
  z-index: 20;
  display: grid;
  gap: 10px;
  padding: 0;
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .88);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.modal-skin-chengqiang .building-unlock-panel .modal-brief {
  margin: 0;
  color: #fff0c0;
  font-size: 10px;
  line-height: 1.35;
}

.modal-skin-chengqiang .building-unlock-panel .info-row {
  color: #fff0c0;
  border-bottom-color: rgba(255, 211, 121, .16);
}

.modal-skin-chengqiang .building-unlock-panel .info-row b {
  color: #ffd46f;
}

.modal-skin-chengqiang .building-unlock-panel .info-row span {
  color: #fff7db;
}

.modal-skin-chengqiang .building-unlock-panel > .action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 2px;
}

.modal-skin-chengqiang .building-unlock-panel > .action-row button {
  min-width: 0;
  height: 36px;
  border: 1px solid rgba(206, 151, 55, .88);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(126, 68, 22, .94), rgba(55, 29, 13, .96));
  color: #ffe0a3;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.modal-skin-chengqiang .building-unlock-panel > .action-result {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff0c0;
  font-size: 8px;
  text-align: center;
}

.jishi-modal-panel #gameModalTitle,
.shenbingge-modal-panel #gameModalTitle,
.yumayuan-modal-panel #gameModalTitle,
.shuyuan-modal-panel #gameModalTitle,
.chengqiang-modal-panel #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 150px;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffe3a5;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
  text-align: center;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 2px #2d1205, 0 0 8px rgba(255, 185, 70, .46);
}

.jishi-modal-panel #gameModalClose,
.shenbingge-modal-panel #gameModalClose,
.yumayuan-modal-panel #gameModalClose,
.shuyuan-modal-panel #gameModalClose,
.chengqiang-modal-panel #gameModalClose {
  position: absolute;
  left: 318px;
  top: 34px;
  width: 32px !important;
  height: 32px !important;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.jishi-modal-panel #gameModalClose::before,
.jishi-modal-panel #gameModalClose::after,
.shenbingge-modal-panel #gameModalClose::before,
.shenbingge-modal-panel #gameModalClose::after,
.yumayuan-modal-panel #gameModalClose::before,
.yumayuan-modal-panel #gameModalClose::after,
.shuyuan-modal-panel #gameModalClose::before,
.shuyuan-modal-panel #gameModalClose::after,
.chengqiang-modal-panel #gameModalClose::before,
.chengqiang-modal-panel #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.resource-modal-panel #gameModalClose::before,
.resource-modal-panel #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.jishi-modal-panel #gameModalClose::before,
.shenbingge-modal-panel #gameModalClose::before,
.yumayuan-modal-panel #gameModalClose::before,
.shuyuan-modal-panel #gameModalClose::before,
.chengqiang-modal-panel #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.resource-modal-panel #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.jishi-modal-panel #gameModalClose::after,
.shenbingge-modal-panel #gameModalClose::after,
.yumayuan-modal-panel #gameModalClose::after,
.shuyuan-modal-panel #gameModalClose::after,
.chengqiang-modal-panel #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.resource-modal-panel #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.jishi-modal-panel .modal-brief,
.jishi-modal-panel .info-row,
.jishi-modal-panel .feature-area h3,
.jishi-modal-panel .feature-area p,
.jishi-modal-panel .action-result,
.shenbingge-modal-panel .modal-brief,
.shenbingge-modal-panel .info-row,
.shenbingge-modal-panel .feature-area h3,
.shenbingge-modal-panel .feature-area p,
.shenbingge-modal-panel .action-result,
.yumayuan-modal-panel .modal-brief,
.yumayuan-modal-panel .info-row,
.yumayuan-modal-panel .feature-area h3,
.yumayuan-modal-panel .feature-area p,
.yumayuan-modal-panel .action-result,
.shuyuan-modal-panel .modal-brief,
.shuyuan-modal-panel .info-row,
.shuyuan-modal-panel .feature-area h3,
.shuyuan-modal-panel .feature-area p,
.shuyuan-modal-panel .action-result {
  color: #fff0c0;
  text-shadow: 0 1px 2px rgba(20, 8, 2, .96), 0 0 5px rgba(95, 35, 8, .72);
}

.jishi-modal-panel .info-row,
.shenbingge-modal-panel .info-row,
.yumayuan-modal-panel .info-row,
.shuyuan-modal-panel .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-bottom-color: rgba(255, 211, 121, .16);
}

.jishi-modal-panel .info-row b,
.shenbingge-modal-panel .info-row b,
.yumayuan-modal-panel .info-row b,
.shuyuan-modal-panel .info-row b {
  color: #ffd46f;
}

.jishi-modal-panel .info-row span,
.shenbingge-modal-panel .info-row span,
.yumayuan-modal-panel .info-row span,
.shuyuan-modal-panel .info-row span {
  color: #fff7db;
}

.jishi-modal-panel .action-result,
.shenbingge-modal-panel .action-result,
.yumayuan-modal-panel .action-result,
.shuyuan-modal-panel .action-result {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff0c0;
  font-size: var(--jss);
  box-shadow: none;
}

.jishi-modal-panel [data-jishi-item="upgrade"],
.jishi-modal-panel [data-jishi-item="featureTrade"],
.jishi-modal-panel [data-jishi-item="featureCaravan"],
.jishi-modal-panel [data-jishi-item="featureSell"] {
  display: grid;
  place-items: center;
  border-color: rgba(206, 151, 55, .88);
  background: linear-gradient(180deg, rgba(128, 70, 24, .94), rgba(60, 30, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.shenbingge-modal-panel [data-shenbingge-item="upgrade"],
.shenbingge-modal-panel [data-shenbingge-item="featureForge"],
.shenbingge-modal-panel [data-shenbingge-item="featureEnhance"],
.shenbingge-modal-panel [data-shenbingge-item="featureArtifact"] {
  display: grid;
  place-items: center;
  border-color: rgba(206, 151, 55, .88);
  background: linear-gradient(180deg, rgba(128, 70, 24, .94), rgba(60, 30, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.yumayuan-modal-panel [data-yumayuan-item="upgrade"],
.yumayuan-modal-panel [data-yumayuan-item="featureCultivate"],
.yumayuan-modal-panel [data-yumayuan-item="featureSynthesis"],
.yumayuan-modal-panel [data-yumayuan-item="featureStable"],
.shuyuan-modal-panel [data-shuyuan-item="upgrade"],
.shuyuan-modal-panel [data-shuyuan-item="featureResearch"],
.shuyuan-modal-panel [data-shuyuan-item="featureScholar"] {
  display: grid;
  place-items: center;
  border: 1px solid rgba(206, 151, 55, .88);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(126, 68, 22, .94), rgba(55, 29, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.jishi-modal-panel [data-jishi-item="featureTrade"] span,
.jishi-modal-panel [data-jishi-item="featureCaravan"] span,
.jishi-modal-panel [data-jishi-item="featureSell"] span,
.shenbingge-modal-panel [data-shenbingge-item="featureForge"] span,
.shenbingge-modal-panel [data-shenbingge-item="featureEnhance"] span,
.shenbingge-modal-panel [data-shenbingge-item="featureArtifact"] span {
  display: none;
}

.yumayuan-modal-panel [data-yumayuan-item="featureCultivate"] span,
.yumayuan-modal-panel [data-yumayuan-item="featureSynthesis"] span,
.yumayuan-modal-panel [data-yumayuan-item="featureStable"] span,
.shuyuan-modal-panel [data-shuyuan-item="featureResearch"] span,
.shuyuan-modal-panel [data-shuyuan-item="featureScholar"] span {
  display: none;
}

.jishi-modal-panel [data-jishi-item="upgrade"].speedup,
.shenbingge-modal-panel [data-shenbingge-item="upgrade"].speedup,
.yumayuan-modal-panel [data-yumayuan-item="upgrade"].speedup,
.shuyuan-modal-panel [data-shuyuan-item="upgrade"].speedup {
  padding: 1px;
  font-size: 5px !important;
  line-height: 1.05;
}

.jishi-modal-panel [data-jishi-item="upgrade"].speedup .speedup-button-content,
.shenbingge-modal-panel [data-shenbingge-item="upgrade"].speedup .speedup-button-content,
.yumayuan-modal-panel [data-yumayuan-item="upgrade"].speedup .speedup-button-content,
.shuyuan-modal-panel [data-shuyuan-item="upgrade"].speedup .speedup-button-content {
  gap: 1px;
  white-space: nowrap;
  line-height: 1.05;
}

.jishi-modal-panel [data-jishi-item="upgrade"].speedup .speedup-button-content,
.jishi-modal-panel [data-jishi-item="upgrade"].speedup .speedup-button-content *,
.shenbingge-modal-panel [data-shenbingge-item="upgrade"].speedup .speedup-button-content,
.shenbingge-modal-panel [data-shenbingge-item="upgrade"].speedup .speedup-button-content * {
  font-size: 5px !important;
}

.yumayuan-modal-panel [data-yumayuan-item="upgrade"].speedup .speedup-button-content,
.yumayuan-modal-panel [data-yumayuan-item="upgrade"].speedup .speedup-button-content * {
  font-size: 5px !important;
  white-space: nowrap;
}

.jishi-modal-panel [data-jishi-item="upgrade"].speedup .yuanbao-inline-icon,
.shenbingge-modal-panel [data-shenbingge-item="upgrade"].speedup .yuanbao-inline-icon,
.yumayuan-modal-panel [data-yumayuan-item="upgrade"].speedup .yuanbao-inline-icon {
  width: 8px;
  height: 8px;
}

.jishi-live-edit [data-jishi-item],
.shenbingge-live-edit [data-shenbingge-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.jishi-live-edit [data-jishi-item].is-live-selected,
.shenbingge-live-edit [data-shenbingge-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.shenbingge-live-edit .sbg-live-hitbox {
  position: absolute;
  left: var(--sbg-hit-x);
  top: var(--sbg-hit-y);
  z-index: 120;
  width: var(--sbg-hit-w);
  height: var(--sbg-hit-h);
  min-width: 0;
  padding: 0;
  border: 1px dashed rgba(255, 230, 120, .95);
  background: rgba(255, 220, 90, .04);
  color: transparent;
  font-size: 0;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
}

.shenbingge-live-edit .sbg-live-hitbox.is-live-selected {
  border: 2px solid rgba(72, 210, 255, .95);
  background: rgba(72, 210, 255, .08);
}

.jishi-live-editor-panel {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(2, minmax(calc(78px * var(--live-editor-scale, 1)), 1fr));
  gap: calc(5px * var(--live-editor-scale, 1));
  min-width: 178px;
  min-height: 210px;
  max-width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: calc(9px * var(--live-editor-scale, 1));
  border: 1px solid rgba(245, 210, 124, .66);
  border-radius: calc(8px * var(--live-editor-scale, 1));
  background: rgba(18, 11, 7, .9);
  color: #ffe7ae;
  font-size: calc(10px * var(--live-editor-scale, 1));
  overflow: auto;
  pointer-events: auto;
  resize: both;
  scrollbar-width: thin;
}

.shenbingge-live-editor-panel > b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.shenbingge-live-editor-panel input[data-sbg-live-field="size"] {
  min-width: 0;
}

.yumayuan-subpage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: 6px;
  padding: 60px 30px 28px;
  color: #f9e5b8;
  text-shadow: 0 1px 2px rgba(17, 7, 2, .92);
  overflow: hidden;
}

.yumayuan-subpage .bingying-back-button {
  position: absolute;
  left: 23px;
  top: 29px;
}

.yumayuan-subpage .modal-brief {
  margin: 0 0 0 28px;
  width: 246px;
  color: #fff0c5;
  font-size: 9px;
  line-height: 1.25;
}

.yumayuan-horse-list {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 4px;
  min-height: 0;
  max-height: none;
  padding: 1px 2px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}

.yumayuan-horse-list::-webkit-scrollbar { display: none; }

.yumayuan-horse-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: 13px 11px 11px;
  gap: 1px 5px;
  min-height: 42px;
  padding: 4px 6px;
  border: 1px solid rgba(196, 143, 61, .58);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(55, 29, 15, .72), rgba(30, 15, 8, .76));
  color: #ffe4aa;
  text-align: left;
  box-shadow: inset 0 0 10px rgba(255, 196, 74, .08);
}

.yumayuan-horse-card.active {
  border-color: rgba(255, 214, 105, .96);
  box-shadow: 0 0 10px rgba(255, 190, 74, .22), inset 0 0 12px rgba(255, 204, 95, .12);
}

.yumayuan-horse-card img {
  grid-row: 1 / span 3;
  grid-column: 1;
  width: 34px;
  height: 34px;
  object-fit: contain;
  align-self: center;
}

.yumayuan-horse-card strong {
  grid-column: 2;
  overflow: hidden;
  color: #ffe7af;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yumayuan-horse-card span,
.yumayuan-horse-card em {
  grid-column: 2;
  overflow: hidden;
  color: #f4d293;
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.yumayuan-horse-card.is-cooling {
  filter: grayscale(.18) brightness(.82);
}

.yumayuan-horse-card.is-cooling em {
  color: #d8c19a;
}

.yumayuan-detail-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 2px 7px;
  min-height: 66px;
  margin-top: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(196, 143, 61, .42);
  border-radius: 7px;
  background: rgba(31, 15, 8, .58);
}

.yumayuan-detail-card img {
  grid-row: 1 / span 5;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.yumayuan-detail-card strong { color: #ffe7af; font-size: 11px; }
.yumayuan-detail-card span,
.yumayuan-detail-card em,
.yumayuan-detail-card b,
.yumayuan-detail-card small { color: #f6d79c; font-size: 8px; font-style: normal; font-weight: 700; }

.yumayuan-primary-action {
  width: 100%;
  margin-top: 0;
  min-height: 30px;
  border-color: rgba(206, 151, 55, .88);
  background: linear-gradient(180deg, rgba(126, 68, 22, .94), rgba(55, 29, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
}

.yumayuan-primary-action:disabled {
  opacity: .58;
  filter: grayscale(.3);
}

.yumayuan-page-result {
  display: block;
  min-height: 16px;
  margin-top: 0;
  color: #fff0c0;
  font-size: 9px;
  text-align: center;
}

.yumayuan-synthesis-page {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

.yumayuan-synthesis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

.yumayuan-synth-column {
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: 5px;
  border: 1px solid rgba(196, 143, 61, .35);
  border-radius: 7px;
  background: rgba(25, 12, 7, .42);
  overflow: hidden;
}

.yumayuan-synth-column > b {
  color: #ffe7af;
  font-size: 9px;
  text-align: center;
}

.yumayuan-synth-main-list,
.yumayuan-synth-material-list {
  gap: 3px;
  padding: 0 1px 3px;
}

.yumayuan-synthesis-page .yumayuan-horse-card {
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 12px 10px 10px;
  min-height: 36px;
  padding: 3px 4px;
  gap: 1px 4px;
}

.yumayuan-synthesis-page .yumayuan-horse-card img {
  width: 28px;
  height: 28px;
}

.yumayuan-synthesis-page .yumayuan-horse-card strong { font-size: 8px; }
.yumayuan-synthesis-page .yumayuan-horse-card span,
.yumayuan-synthesis-page .yumayuan-horse-card em { font-size: 6px; }

.yumayuan-empty-material {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 1px dashed rgba(211, 164, 79, .42);
  border-radius: 6px;
  color: #d5b982;
  font-size: 8px;
  text-align: center;
}

.yumayuan-synthesis-detail {
  min-height: 72px;
}

.yumayuan-modal-panel [data-yumayuan-synthesis-item] {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.yumayuan-modal-panel [data-yumayuan-synthesis-item="grid"] {
  min-height: 0;
}

.yumayuan-synthesis-live-edit [data-yumayuan-synthesis-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  pointer-events: none !important;
  user-select: none;
  touch-action: none;
}

.yumayuan-synthesis-live-edit [data-yumayuan-synthesis-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.yumayuan-synthesis-live-edit .yumayuan-synthesis-live-editor-panel,
.yumayuan-synthesis-live-edit .yumayuan-synthesis-live-editor-panel * {
  pointer-events: auto !important;
}

.yumayuan-modal-panel [data-yumayuan-cultivate-item] {
  position: absolute;
  margin: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.yumayuan-modal-panel [data-yumayuan-cultivate-item="list"] {
  overflow-y: auto;
  scrollbar-width: none;
}

.yumayuan-modal-panel [data-yumayuan-cultivate-item="list"]::-webkit-scrollbar {
  display: none;
}

.yumayuan-cultivate-live-edit [data-yumayuan-cultivate-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.yumayuan-cultivate-live-edit [data-yumayuan-cultivate-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.yumayuan-cultivate-live-edit [data-yumayuan-cultivate-item] {
  pointer-events: none !important;
}

.yumayuan-cultivate-live-edit .yumayuan-cultivate-live-editor-panel,
.yumayuan-cultivate-live-edit .yumayuan-cultivate-live-editor-panel * {
  pointer-events: auto !important;
}

.ymc-editor-layer {
  position: absolute;
  inset: 0;
  z-index: 2600;
  pointer-events: none;
}

.ymc-editor-hitbox {
  position: absolute;
  min-width: 12px;
  min-height: 12px;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(255, 230, 120, .95);
  background: rgba(40, 180, 255, .035);
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}

.ymc-editor-hitbox::after {
  content: attr(data-label);
  position: absolute;
  left: 2px;
  top: -13px;
  padding: 1px 3px;
  border-radius: 3px;
  background: rgba(18, 11, 7, .82);
  color: #ffe7ae;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;
}

.ymc-editor-hitbox.is-live-selected {
  border: 2px solid rgba(72, 210, 255, .95);
  background: rgba(72, 210, 255, .08);
}

.ymc-editor-hitbox.is-hidden-layout {
  border-color: rgba(255, 120, 120, .9);
}

.jishi-live-editor-panel b,
.jishi-live-editor-panel select,
.jishi-live-editor-panel button {
  grid-column: 1 / -1;
  width: 100%;
}

.jishi-live-editor-panel label {
  display: grid;
  grid-template-columns: calc(22px * var(--live-editor-scale, 1)) 1fr;
  align-items: center;
  gap: calc(3px * var(--live-editor-scale, 1));
}

.jishi-live-editor-panel input,
.jishi-live-editor-panel select {
  min-width: 0;
  height: calc(20px * var(--live-editor-scale, 1));
  border: 1px solid rgba(238, 205, 119, .5);
  border-radius: calc(3px * var(--live-editor-scale, 1));
  background: rgba(255, 245, 211, .95);
  color: #24170c;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.jishi-live-editor-panel button {
  min-height: calc(24px * var(--live-editor-scale, 1));
  border-color: rgba(238, 205, 119, .74);
  background: linear-gradient(180deg, #f1d789, #8a5a1d);
  color: #fff4bf;
  font-size: calc(10px * var(--live-editor-scale, 1));
  font-weight: 800;
}

.jishi-sell-page {
  position: absolute;
  inset: 54px 34px 32px;
  color: #f3d9a3;
}

.jishi-sell-page .bingying-back-button {
  position: absolute;
  left: 4px;
  top: -22px;
}

.jishi-sell-page .modal-brief {
  margin: 0 0 8px 34px;
  font-size: 8px;
}

.jishi-sell-list {
  display: grid;
  gap: 7px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: none;
}

.jishi-sell-list::-webkit-scrollbar {
  display: none;
}

.jishi-sell-row {
  display: grid;
  grid-template-columns: 48px 1fr 56px;
  gap: 4px 6px;
  align-items: center;
  min-height: 64px;
  padding: 6px;
  border: 1px solid rgba(226, 184, 88, .48);
  border-radius: 6px;
  background: rgba(45, 25, 12, .34);
}

.jishi-sell-row strong {
  color: #ffe5a2;
  font-size: 9px;
}

.jishi-sell-row span,
.jishi-sell-row em,
.jishi-sell-row label {
  color: #efd09a;
  font-size: 7px;
  font-style: normal;
}

.jishi-sell-row span {
  grid-column: 2 / 4;
}

.jishi-sell-row input {
  width: 44px;
  height: 18px;
  margin-left: 3px;
  border: 1px solid rgba(224, 178, 91, .55);
  background: rgba(20, 10, 5, .48);
  color: #ffe7ad;
  font-size: 8px;
}

.jishi-sell-row button {
  min-height: 22px;
  border-color: #b58a34;
  background: linear-gradient(180deg, #e5c36c 0%, #a16b24 66%, #5b3414 100%);
  color: #fff2bd;
  font-size: 8px;
  font-weight: 800;
}

.jishi-sell-orders {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
  max-height: 64px;
  overflow: hidden;
  color: #f7d9a0;
  font-size: 7px;
}

.jishi-market-page {
  inset: 54px 30px 30px;
}

.jishi-market-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  max-height: 292px;
  overflow: hidden;
}

.jishi-market-slot {
  min-height: 38px;
  padding: 3px;
  border: 1px solid rgba(220, 176, 82, .58);
  border-radius: 5px;
  background: rgba(38, 20, 10, .38);
  color: #ffe4a2;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 1px;
}

.jishi-market-slot:hover,
.jishi-market-slot:active,
.jishi-market-slot:focus {
  background: rgba(38, 20, 10, .38);
  box-shadow: none;
}

.jishi-market-slot.is-empty {
  border-style: dashed;
  color: rgba(255, 226, 166, .48);
  background: rgba(38, 20, 10, .18);
  pointer-events: none;
}

.jishi-market-slot.is-list-entry {
  border-color: rgba(255, 218, 112, .78);
  background: radial-gradient(circle at 50% 18%, rgba(255, 225, 128, .32), rgba(87, 45, 16, .48));
}

.jishi-plus-mark {
  display: inline-grid;
  place-items: center;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border: 1px solid rgba(255, 229, 151, .82);
  border-radius: 50%;
  color: #fff2b6;
  font-style: normal;
  font-size: 8px;
  line-height: 1;
  box-shadow: 0 0 4px rgba(255, 219, 112, .38);
}

.jishi-market-slot.is-mine {
  border-color: rgba(126, 210, 255, .65);
}

.jishi-market-slot b {
  font-size: 6px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jishi-market-slot span {
  font-size: 5px;
  line-height: 1.2;
  color: #efd09a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jishi-market-icon {
  width: 15px;
  height: 15px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.jishi-market-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jishi-type-icon {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(240, 196, 98, .68);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 232, 154, .95), rgba(157, 85, 26, .88) 58%, rgba(50, 21, 7, .9));
  display: block;
  position: relative;
}

.jishi-type-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-top: 2px solid rgba(62, 30, 8, .9);
  transform: rotate(-35deg);
}

.jishi-market-footer {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #ffe0a3;
  font-size: 7px;
  text-align: center;
}

.jishi-market-footer button {
  min-height: 20px;
  font-size: 7px;
}

.jishi-listing-form .jishi-trade-form {
  margin-top: 10px;
}

#gameModal:has(.jishi-listing-form input:focus) {
  place-items: start center;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: min(46vh, 320px);
  overflow-y: auto;
}

#gameModal:has(.jishi-listing-form input:focus) .game-modal.modal-skin-jishi {
  width: min(var(--jishi-modal-width, 360px), calc(100vw - 20px));
}

#gameModal:has(.jishi-listing-form input:focus) .jishi-listing-form .modal-brief {
  display: none;
}

#gameModal:has(.jishi-listing-form input:focus) .jishi-listing-form .jishi-trade-form {
  gap: 5px;
  margin-top: 4px;
  padding: 8px 10px;
}

#gameModal:has(.jishi-listing-form input:focus) .jishi-trade-form em {
  min-height: 18px;
  line-height: 1.25;
}

.jishi-trade-form {
  display: grid;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid rgba(226, 184, 88, .48);
  border-radius: 7px;
  background: rgba(45, 25, 12, .34);
}

.jishi-trade-form label {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 6px;
  color: #f5d7a0;
  font-size: 8px;
}

.jishi-trade-form input,
.jishi-trade-form select {
  min-width: 0;
  height: 22px;
  border: 1px solid rgba(224, 178, 91, .55);
  background: rgba(20, 10, 5, .48);
  color: #ffe7ad;
  font-size: 8px;
}

.jishi-trade-form em {
  min-height: 30px;
  color: #ffe0a3;
  font-size: 7px;
  font-style: normal;
  line-height: 1.35;
}

.jishi-trade-form button {
  min-height: 28px;
  border-color: #b58a34;
  background: linear-gradient(180deg, #e5c36c 0%, #a16b24 66%, #5b3414 100%);
  color: #fff2bd;
  font-size: 9px;
  font-weight: 800;
}

.jishi-trade-result {
  display: block;
  min-height: 14px;
  color: #ffe6a4;
  font-size: 7px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}

.juxianlou-modal-panel [data-juxianlou-item] {
  position: absolute;
  left: var(--jxlx);
  top: var(--jxly);
  width: var(--jxlw);
  height: var(--jxlh);
  margin: 0;
  padding: 0;
  font-size: var(--jxls);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.juxianlou-modal-panel .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-bottom-color: rgba(231, 184, 90, .22);
  color: #f6dfad;
  text-shadow: 0 1px 2px rgba(14, 6, 2, .96), 0 0 6px rgba(255, 190, 80, .16);
}

.juxianlou-modal-panel .modal-brief,
.juxianlou-modal-panel .juxianlou-result {
  color: #f3d9a3;
  text-shadow: 0 1px 2px rgba(14, 6, 2, .96), 0 0 6px rgba(255, 190, 80, .14);
}

.juxianlou-modal-panel .action-result {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.juxianlou-modal-panel .info-row b {
  color: #ffd77d;
  font-weight: 700;
}

.juxianlou-modal-panel .info-row span {
  color: #fff1c2;
}

.juxianlou-modal-panel .info-row span {
  text-align: right;
}

.juxianlou-modal-panel .action-row {
  display: contents;
}

.juxianlou-modal-panel [data-juxianlou-item="upgrade"],
.juxianlou-modal-panel [data-juxianlou-item="banquet"],
.juxianlou-modal-panel [data-juxianlou-item="captive"],
.juxianlou-modal-panel [data-juxianlou-item="banquetAction"],
.juxianlou-modal-panel [data-juxianlou-item="captiveBanquet"],
.juxianlou-modal-panel [data-juxianlou-item="captiveGift"],
.juxianlou-modal-panel [data-juxianlou-item="captivePersuade"] {
  display: grid;
  place-items: center;
  border-color: #b58a34;
  background: linear-gradient(180deg, #e5c36c 0%, #a16b24 66%, #5b3414 100%);
  color: #fff2bd;
  font-weight: 800;
  text-align: center;
}

.juxianlou-modal-panel [data-juxianlou-item="guestCard"],
.juxianlou-modal-panel [data-juxianlou-item="generalList"],
.juxianlou-modal-panel [data-juxianlou-item="captiveList"],
.juxianlou-modal-panel [data-juxianlou-item="empty"] {
  transform: translate(-50%, -50%);
}

.juxianlou-live-edit [data-juxianlou-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.juxianlou-live-edit [data-juxianlou-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.bingying-live-edit [data-bingying-item] {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
}

.bingying-live-edit [data-bingying-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
}

.bingying-live-edit .bingying-live-hitbox {
  position: absolute;
  left: var(--by-hit-x);
  top: var(--by-hit-y);
  z-index: 120;
  width: var(--by-hit-w);
  height: var(--by-hit-h);
  min-width: 0;
  padding: 0;
  border: 1px dashed rgba(255, 230, 120, .95);
  background: rgba(255, 220, 90, .04);
  color: transparent;
  font-size: 0;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
}

.bingying-live-edit .bingying-live-hitbox.is-live-selected {
  border: 2px solid rgba(72, 210, 255, .95);
  background: rgba(72, 210, 255, .08);
}

.juxianlou-live-edit .jxl-live-hitbox {
  position: absolute;
  left: var(--jxl-hit-x);
  top: var(--jxl-hit-y);
  z-index: 120;
  width: var(--jxl-hit-w);
  height: var(--jxl-hit-h);
  min-width: 0;
  padding: 0;
  border: 1px dashed rgba(255, 230, 120, .95);
  background: rgba(255, 220, 90, .04);
  color: transparent;
  font-size: 0;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  transform: translate(-50%, -50%);
}

.juxianlou-live-edit .jxl-live-hitbox.is-live-selected {
  border: 2px solid rgba(72, 210, 255, .95);
  background: rgba(72, 210, 255, .08);
}

.jxl-live-editor-panel {
  position: fixed;
  right: 12px;
  top: 84px;
  z-index: 3000;
  display: grid;
  grid-template-columns: repeat(2, minmax(calc(78px * var(--live-editor-scale, 1)), 1fr));
  gap: calc(5px * var(--live-editor-scale, 1));
  min-width: 178px;
  min-height: 210px;
  max-width: min(460px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: calc(9px * var(--live-editor-scale, 1));
  border: 1px solid rgba(245, 210, 124, .66);
  border-radius: calc(8px * var(--live-editor-scale, 1));
  background: rgba(18, 11, 7, .9);
  color: #ffe7ae;
  font-size: calc(10px * var(--live-editor-scale, 1));
  overflow: auto;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  pointer-events: auto;
  resize: both;
  scrollbar-width: thin;
}

.jxl-live-editor-panel b,
.jxl-live-editor-panel select,
.jxl-live-editor-panel button {
  grid-column: 1 / -1;
}

.jxl-live-editor-panel b {
  cursor: move;
  user-select: none;
  touch-action: none;
}

.jxl-live-editor-panel label {
  display: grid;
  gap: calc(2px * var(--live-editor-scale, 1));
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.jxl-live-editor-panel input,
.jxl-live-editor-panel select {
  min-width: 0;
  height: calc(24px * var(--live-editor-scale, 1));
  border: 1px solid rgba(230, 190, 106, .42);
  border-radius: calc(4px * var(--live-editor-scale, 1));
  background: rgba(255, 244, 210, .96);
  color: #2d2012;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.jxl-live-editor-panel button {
  min-height: calc(26px * var(--live-editor-scale, 1));
  border-color: rgba(255, 218, 118, .82);
  background: linear-gradient(180deg, #d29a35, #7a4315);
  color: #fff1bd;
  font-size: calc(10px * var(--live-editor-scale, 1));
}

.modal-skin-juxianlou .modal-head {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.modal-skin-juxianlou #gameModalTitle {
  position: absolute;
  left: 50%;
  top: 35px;
  width: 150px;
  margin: 0;
  transform: translate(-50%, -50%);
  color: #ffe0a3;
  font-size: 17px;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
}

.modal-skin-juxianlou #gameModalClose {
  position: absolute;
  left: 318px;
  top: 35px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: transparent;
  font-size: 0;
}

.modal-skin-juxianlou #gameModalClose::before,
.modal-skin-juxianlou #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
}

.modal-skin-juxianlou #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-skin-juxianlou #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.juxianlou-modal-panel #gameModalTitle[data-juxianlou-item],
.juxianlou-modal-panel #gameModalClose[data-juxianlou-item] {
  left: var(--jxlx);
  top: var(--jxly);
  width: var(--jxlw);
  height: var(--jxlh);
  font-size: var(--jxls);
  pointer-events: auto;
}

.yuxuantai-modal-panel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.yuxuantai-modal-panel #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
}

.yuxuantai-modal-panel [data-yuxuantai-item] {
  position: absolute;
  left: var(--yxtx);
  top: var(--yxty);
  width: var(--yxtw);
  height: var(--yxth);
  margin: 0;
  padding: 0;
  font-size: var(--yxts);
  line-height: 1.2;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  overflow: hidden;
}

.yuxuantai-modal-panel #gameModalTitle,
.yuxuantai-modal-panel #gameModalClose {
  min-width: 0;
  pointer-events: auto;
}

.yuxuantai-modal-panel #gameModalTitle {
  color: #ffe0a3;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
}

.yuxuantai-modal-panel #gameModalClose {
  width: 32px !important;
  height: 32px !important;
  min-width: 0;
  padding: 0;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.yuxuantai-modal-panel #gameModalClose::before,
.yuxuantai-modal-panel #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.yuxuantai-modal-panel #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.yuxuantai-modal-panel #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.yuxuantai-modal-panel .panel-grid,
.yuxuantai-modal-panel .feature-area,
.yuxuantai-modal-panel .yuxuantai-status {
  display: contents;
}

.yuxuantai-modal-panel .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
}

.yuxuantai-modal-panel .info-row span {
  text-align: right;
}

.yuxuantai-modal-panel .action-row {
  display: contents;
}

.yuxuantai-modal-panel [data-yuxuantai-item="upgrade"],
.yuxuantai-modal-panel [data-yuxuantai-item="recruit"] {
  display: grid;
  place-items: center;
  border-color: #b58a34;
  background: linear-gradient(180deg, #f1d789 0%, #b98528 66%, #684017 100%);
  color: #fff2bd;
  font-weight: 800;
  text-align: center;
}

.yuxuantai-modal-panel [data-yuxuantai-item="featureDesc"] {
  line-height: 1.28;
}

.yuxuantai-modal-panel [data-yuxuantai-item="statusOwned"],
.yuxuantai-modal-panel [data-yuxuantai-item="statusPool"],
.yuxuantai-modal-panel [data-yuxuantai-item="statusCooldown"] {
  display: grid;
  place-items: center;
  padding: 3px;
  text-align: center;
}

.modal-skin-yuxuantai .modal-brief,
.modal-skin-yuxuantai .info-row,
.modal-skin-yuxuantai .yuxuantai-info-area,
.modal-skin-yuxuantai .yuxuantai-status span {
  color: #f0d7a3;
}

.modal-skin-yuxuantai .info-row {
  border-bottom-color: rgba(231, 177, 77, .18);
}

.modal-skin-yuxuantai .info-row b,
.modal-skin-yuxuantai .feature-area h3,
.modal-skin-yuxuantai .yuxuantai-status b {
  color: #ffd875;
}

.modal-skin-yuxuantai .yuxuantai-status span {
  border-color: rgba(221, 166, 62, .38);
  background: rgba(42, 23, 12, .42);
}

.yuxuantai-live-edit [data-yuxuantai-item] {
  cursor: move;
}

.yuxuantai-live-edit [data-yuxuantai-item].is-live-selected {
  outline: 1px dashed rgba(255, 232, 132, .9);
  outline-offset: 2px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0);
}

.yxt-live-editor-panel {
  position: absolute;
  z-index: 50;
  right: -146px;
  top: 18px;
  width: 136px;
  padding: 8px;
  border: 1px solid rgba(238, 205, 119, .68);
  border-radius: 6px;
  background: rgba(25, 21, 18, .92);
  color: #f7dfa8;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: auto;
}

.yxt-live-editor-panel b,
.yxt-live-editor-panel select,
.yxt-live-editor-panel button {
  display: block;
  width: 100%;
}

.yxt-live-editor-panel label {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}

.yxt-live-editor-panel input,
.yxt-live-editor-panel select {
  min-width: 0;
  height: 20px;
  border: 1px solid rgba(238, 205, 119, .5);
  border-radius: 3px;
  background: rgba(255, 245, 211, .95);
  color: #24170c;
  font-size: 10px;
}

.yxt-live-editor-panel button {
  margin-top: 8px;
  min-height: 24px;
  border-color: rgba(238, 205, 119, .74);
  background: linear-gradient(180deg, #f1d789, #8a5a1d);
  color: #fff4bf;
  font-size: 10px;
  font-weight: 800;
}

.bingying-modal-panel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.bingying-modal-panel #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  color: #f4d6a0;
}

.bingying-modal-panel [data-bingying-item] {
  position: absolute;
  left: var(--byx);
  top: var(--byy);
  width: var(--byw);
  height: var(--byh);
  margin: 0;
  padding: 0;
  font-size: var(--bys);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.bingying-modal-panel #gameModalTitle {
  display: grid;
  place-items: center;
  margin: 0;
  color: #ffe0a3;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-align: center;
  text-shadow: 0 1px 2px #231006, 0 0 8px rgba(255, 186, 72, .5);
  pointer-events: none;
}

.bingying-modal-panel #gameModalClose {
  width: 32px !important;
  height: 32px !important;
  min-width: 0;
  pointer-events: auto;
  padding: 0;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.bingying-modal-panel #gameModalClose::before,
.bingying-modal-panel #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.bingying-modal-panel #gameModalClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bingying-modal-panel #gameModalClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.bingying-panel-grid {
  display: block;
  margin: 0;
}

.bingying-modal-panel .modal-brief,
.bingying-modal-panel .info-row,
.bingying-modal-panel .action-result {
  color: #fff1c8;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(92, 30, 8, .72);
}

.bingying-modal-panel .info-row {
  align-items: center;
  padding: 0 6px;
  border-bottom-color: rgba(255, 211, 121, .16);
}

.bingying-modal-panel .info-row b {
  color: #ffd46f;
}

.bingying-modal-panel .info-row span {
  color: #fff7db;
}

.bingying-action-button {
  border-color: rgba(206, 151, 55, .88);
  background: linear-gradient(180deg, rgba(120, 62, 22, .94), rgba(58, 29, 13, .96));
  color: #ffe0a3;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903;
}

.bingying-action-button:hover,
.bingying-action-button:focus-visible {
  background: linear-gradient(180deg, rgba(158, 84, 28, .96), rgba(76, 37, 14, .98));
}

.bingying-action-button:disabled {
  border-color: rgba(82, 69, 54, .8);
  background: linear-gradient(180deg, rgba(82, 74, 62, .78), rgba(42, 36, 30, .85));
  color: rgba(222, 202, 166, .75);
}

.bingying-upgrade-button {
  background: linear-gradient(180deg, rgba(214, 145, 45, .98), rgba(102, 48, 17, .98));
  box-shadow: 0 0 8px rgba(255, 190, 76, .24), inset 0 1px 0 rgba(255, 229, 154, .28);
}

.bingying-action-button.speedup,
.action-row button.speedup,
.maincity-modal-panel .maincity-upgrade-button.speedup {
  border-color: rgba(245, 198, 80, .96);
  background: linear-gradient(180deg, rgba(244, 205, 92, .96), rgba(170, 92, 27, .98));
  color: #fff7cf;
  box-shadow: 0 0 10px rgba(255, 199, 69, .28), inset 0 1px 0 rgba(255, 243, 176, .3);
}

.upgrade-speedup-hint {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 2px;
  color: #ffe29a;
  font-style: normal;
  font-size: .9em;
}

.upgrade-speedup-hint span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.yumayuan-modal-panel .info-row span:has(.upgrade-speedup-hint),
.jishi-modal-panel .info-row span:has(.upgrade-speedup-hint),
.shenbingge-modal-panel .info-row span:has(.upgrade-speedup-hint),
.bingying-modal-panel .info-row span:has(.upgrade-speedup-hint),
.yuxuantai-modal-panel .info-row span:has(.upgrade-speedup-hint) {
  font-size: 7px !important;
  line-height: 1.05;
}

.yumayuan-modal-panel .upgrade-speedup-hint,
.jishi-modal-panel .upgrade-speedup-hint,
.shenbingge-modal-panel .upgrade-speedup-hint,
.bingying-modal-panel .upgrade-speedup-hint,
.yuxuantai-modal-panel .upgrade-speedup-hint {
  gap: 1px;
  margin-top: 1px;
  font-size: 6px !important;
  line-height: 1.05;
  white-space: nowrap;
}

.yumayuan-modal-panel .upgrade-speedup-hint,
.yumayuan-modal-panel .upgrade-speedup-hint * {
  font-size: 5px !important;
  white-space: nowrap;
}

.yumayuan-modal-panel .upgrade-speedup-hint .yuanbao-inline-icon,
.jishi-modal-panel .upgrade-speedup-hint .yuanbao-inline-icon,
.shenbingge-modal-panel .upgrade-speedup-hint .yuanbao-inline-icon,
.bingying-modal-panel .upgrade-speedup-hint .yuanbao-inline-icon,
.yuxuantai-modal-panel .upgrade-speedup-hint .yuanbao-inline-icon {
  width: 8px;
  height: 8px;
}

.yuanbao-inline-icon {
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  vertical-align: -0.25em;
  filter: drop-shadow(0 0 3px rgba(255, 199, 63, .52));
}

.speedup-button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.speedup-yuanbao-icon,
.top-hud-resource-part[data-resource-key="gold"].resource-icon img {
  animation: yuanbaoPulse 1.15s ease-in-out infinite;
}

@keyframes yuanbaoPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 2px rgba(255, 202, 66, .42));
  }
  50% {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 6px rgba(255, 224, 100, .82));
  }
}

.bingying-result {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  text-align: center;
}

.bingying-subpage {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 62px;
  bottom: 34px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 8px;
  color: #fff1c8;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(92, 30, 8, .72);
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.bingying-subpage h3 {
  margin: 0;
  color: #ffe0a3;
  font-size: 15px;
  text-align: center;
}

.bingying-subpage p {
  margin: 0;
  color: #f7ddb0;
  font-size: 10px;
  line-height: 1.35;
}

.bingying-back-button {
  min-width: 0;
  padding: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  color: #ffe0a3;
  font-weight: 800;
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
}

.bingying-modal-panel .bingying-back-button {
  position: absolute !important;
  z-index: 72;
  width: 32px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) !important;
}

.chengqiang-modal-panel .chengqiang-back-button {
  position: absolute !important;
  left: 42px;
  top: 34px;
  z-index: 72;
  width: 32px !important;
  height: 32px !important;
  transform: translate(-50%, -50%) !important;
}

.chengqiang-modal-panel[data-modal-mode="building"] > .bingying-back-button,
.chengqiang-modal-panel[data-modal-mode="building"] > .panel-back-button,
.chengqiang-modal-panel[data-modal-mode="building"] > .recruit-back-button {
  display: none !important;
}

.bingying-back-button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-left: 4px solid #fff0b6;
  border-bottom: 4px solid #fff0b6;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.bingying-back-button::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 13px;
  height: 4px;
  border-radius: 2px;
  background: #fff0b6;
  filter: drop-shadow(0 0 3px rgba(255, 218, 95, .52));
}

.bingying-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.bingying-card-grid.bingying-custom-layout {
  position: relative;
  display: block;
  width: 304px;
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  padding: 0;
}

.bingying-scroll-content {
  position: relative;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  scrollbar-width: none;
}

.bingying-scroll-content::-webkit-scrollbar { display: none; }

.bingying-custom-page-text .bingying-scroll-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
  min-height: 0;
  height: auto;
  max-height: none;
}

.bingying-card-grid.bingying-custom-layout .bingying-unit-card {
  position: absolute;
}

.bingying-subpage.bingying-custom-page-text {
  display: block;
  padding-bottom: 42px;
}

.bingying-custom-page-text [data-page-item] {
  position: absolute;
}

.bingying-unit-card {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 100%;
  min-height: 94px;
  padding: 7px 6px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff0c8;
  text-align: center;
}

.bingying-unit-card:hover,
.bingying-unit-card:active,
.bingying-unit-card:focus,
.bingying-unit-card:focus-visible,
.bingying-unit-card:disabled,
.bingying-unit-card.is-unavailable {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bingying-unit-card.is-locked .unit-card-art,
.bingying-unit-card.is-locked strong,
.bingying-unit-card.is-locked span,
.bingying-unit-card.is-locked em {
  filter: grayscale(.35) brightness(.72);
  opacity: .78;
}

.bingying-unit-card.bingying-custom-card-parts {
  position: absolute;
  display: block;
}

.bingying-custom-card-parts [data-card-part] {
  position: absolute;
  display: grid;
  place-items: center;
}

.unit-lock-overlay {
  position: absolute;
  left: 50%;
  top: 27px;
  z-index: 8;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  background: url("../assets/hud/crops/unit_lock_closed_gold_v1_webp_q82.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(35, 18, 4, .65));
  animation: lockPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

.unit-lock-overlay::before,
.unit-lock-overlay::after,
.unit-lock-overlay span { display: none; }

.bingying-lock-tip {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 80;
  width: min(250px, 72vw);
  padding: 12px 14px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(222, 162, 58, .86);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(165, 74, 22, .42), transparent 55%),
    linear-gradient(180deg, rgba(90, 50, 26, .97), rgba(42, 24, 15, .98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 214, 126, .28);
  color: #fff2bf;
  text-align: center;
  pointer-events: none;
  animation: lockTipIn .18s ease-out both;
}

.bingying-lock-tip b,
.bingying-lock-tip span {
  display: block;
}

.bingying-lock-tip b {
  margin-bottom: 4px;
  color: #ffe08b;
  font-size: 14px;
}

.bingying-lock-tip span {
  font-size: 12px;
  line-height: 1.35;
}

.unit-card-art {
  width: 72px;
  height: 54px;
  display: grid;
  place-items: end center;
  border-radius: 6px;
  background: transparent;
  overflow: visible;
}

.unit-card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  animation: unitIdle 1.65s ease-in-out infinite;
}

.bingying-unit-card strong {
  color: #ffd46f;
  font-size: 12px;
}

.bingying-unit-card span,
.bingying-unit-card em {
  color: #f3d4a5;
  font-size: 9px;
  font-style: normal;
  line-height: 1.2;
}

.bingying-sub-result {
  min-height: 24px;
  display: grid;
  place-items: center;
  color: #fff4d4;
  font-size: 10px;
  text-align: center;
}

.bingying-quantity-panel {
  width: min(310px, 86vw);
  display: grid;
  gap: 10px;
  color: #fff1c8;
}

.bingying-trainer-panel {
  width: min(318px, 86vw);
  display: grid;
  gap: 10px;
  color: #fff1c8;
}

.trainer-panel-head {
  display: grid;
  gap: 4px;
  text-align: center;
}

.trainer-panel-head b {
  color: #ffd46f;
  font-size: 15px;
}

.trainer-panel-head span,
.trainer-empty {
  color: #f3d4a5;
  font-size: 10px;
  line-height: 1.35;
}

.trainer-card-list {
  display: grid;
  gap: 7px;
  max-height: 245px;
  overflow-y: auto;
  scrollbar-width: none;
}

.trainer-card-list::-webkit-scrollbar {
  display: none;
}

.trainer-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas:
    "avatar name"
    "avatar stats"
    "avatar bonus";
  align-items: center;
  column-gap: 8px;
  min-height: 58px;
  padding: 6px 8px;
  border: 1px solid rgba(219, 160, 58, .62);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(83, 46, 24, .76), rgba(35, 20, 13, .78));
  color: #fff1c8;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 218, 137, .18);
}

.trainer-card:hover,
.trainer-card:active,
.trainer-card:focus,
.trainer-card:focus-visible {
  outline: 0;
  filter: brightness(1.08);
}

.trainer-card.is-unavailable {
  filter: grayscale(.35) brightness(.75);
}

.trainer-card i {
  grid-area: avatar;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(16, 10, 6, .38);
}

.trainer-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trainer-card strong {
  grid-area: name;
  color: #ffd46f;
  font-size: 13px;
}

.trainer-card span {
  grid-area: stats;
}

.trainer-card em {
  grid-area: bonus;
  font-style: normal;
}

.trainer-card span,
.trainer-card em {
  color: #f3d4a5;
  font-size: 10px;
  line-height: 1.25;
}

.trainer-actions {
  display: grid;
  grid-template-columns: 1fr;
}

.trainer-actions button {
  min-height: 30px;
}

.quantity-unit-preview {
  min-height: 96px;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 10px;
}

.quantity-unit-preview i {
  width: 112px;
  height: 76px;
  display: grid;
  place-items: end center;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.quantity-unit-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  animation: unitIdle 1.55s ease-in-out infinite;
}

.quantity-unit-preview b {
  display: block;
  color: #ffd46f;
  font-size: 15px;
}

.quantity-unit-preview span,
.quantity-input-row span,
.quantity-cost {
  color: #f3d4a5;
  font-size: 10px;
  line-height: 1.35;
}

.quantity-input-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
}

.quantity-input-row input {
  width: 100%;
  min-height: 30px;
  border: 1px solid rgba(217, 167, 77, .74);
  border-radius: 5px;
  background: rgba(20, 10, 5, .52);
  color: #fff2d0;
  text-align: center;
}

.quantity-range {
  width: 100%;
  accent-color: #d8a54e;
}

.quantity-shortcuts,
.quantity-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.quantity-actions {
  grid-template-columns: 1fr 1fr;
}

.quantity-shortcuts button,
.quantity-actions button {
  min-height: 30px;
  padding: 4px 5px;
}

@keyframes unitIdle {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-2px) scale(1.015); filter: brightness(1.08); }
}

@keyframes lockPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    filter: brightness(1.16);
  }
}

@keyframes lockTipIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(.94);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.modal-skin-avatar .modal-head {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#avatarModalTitle {
  position: absolute;
  left: var(--avatar-title-x, 210px);
  top: var(--avatar-title-y, 40px);
  width: var(--avatar-title-w, 120px);
  height: var(--avatar-title-h, 24px);
  margin: 0;
  display: grid;
  place-items: center;
  font-size: var(--avatar-title-size, 16px);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.avatar-close-button {
  position: absolute;
  left: var(--avatar-close-x, 382px);
  top: var(--avatar-close-y, 40px);
  width: var(--avatar-close-w, 52px);
  height: var(--avatar-close-h, 24px);
  padding: 0;
  font-size: var(--avatar-close-size, 11px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-indent: -9999px;
}

.avatar-preview-slot {
  position: absolute;
  left: var(--avatar-preview-x, 125px);
  top: var(--avatar-preview-y, 260px);
  width: var(--avatar-preview-size, 132px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.avatar-preview-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 3px 7px rgba(42, 30, 11, .36));
}

.recharge-modal {
  position: relative;
  width: 360px;
  max-width: 92vw;
  min-height: 0;
  height: 540px;
  max-height: min(92vh, 540px);
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.recharge-modal .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.recharge-modal [data-recharge-item] {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rw);
  height: var(--rh);
  margin: 0;
  padding: 0;
  font-size: var(--rs);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.recharge-modal #rechargeModalTitle,
.recharge-modal #rechargeModalClose,
.recharge-modal #rechargeModalBack {
  min-width: 0;
  pointer-events: auto;
}

.recharge-modal #rechargeModalClose,
.recharge-modal #rechargeModalBack {
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
  text-shadow: none;
  overflow: hidden;
  z-index: 120;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.recharge-modal #rechargeModalClose:hover,
.recharge-modal #rechargeModalClose:active,
.recharge-modal #rechargeModalClose:focus,
.recharge-modal #rechargeModalClose:focus-visible,
.recharge-modal #rechargeModalBack:hover,
.recharge-modal #rechargeModalBack:active,
.recharge-modal #rechargeModalBack:focus,
.recharge-modal #rechargeModalBack:focus-visible {
  border: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
  outline: 0;
}

.recharge-modal #rechargeModalTitle[hidden] {
  display: none;
}

.game-modal {
  width: min(86vw, 360px);
  max-height: min(54vh, 430px);
  overflow: auto;
}

.game-modal.modal-skin-guide {
  --guide-modal-scale: min(1, calc((100vw - 24px) / 360), calc((var(--app-height, 100dvh) - 48px) / 430));
  position: relative;
  width: 360px;
  height: 430px;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: visible;
  color: #3f3524;
  background:
    var(--modal-bg) center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 18%, rgba(255, 240, 177, .92), rgba(226, 184, 95, .74) 36%, rgba(116, 70, 28, .9) 100%),
    linear-gradient(180deg, #f3d687, #936027);
  border-radius: 8px;
  flex: 0 0 auto;
  transform: scale(var(--guide-modal-scale));
  transform-origin: center center;
}

.modal-skin-guide .modal-head {
  position: absolute;
  left: var(--guide-x, 36px);
  top: var(--guide-y, 23px);
  z-index: 2;
  width: var(--guide-w, 96px);
  height: var(--guide-h, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.modal-skin-guide #gameModalTitle {
  margin: 0;
  color: #7b561a;
  font-size: var(--guide-size, 15px);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 238, 174, .72);
}

.modal-skin-guide #gameModalClose {
  position: absolute;
  left: var(--guide-x, 283px);
  top: var(--guide-y, 57px);
  z-index: 3;
  width: var(--guide-w, 31px);
  height: var(--guide-h, 31px);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  pointer-events: auto;
  touch-action: manipulation;
}

.modal-skin-guide #gameModalClose::before,
.modal-skin-guide #gameModalClose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--guide-size, 16px);
  height: max(2px, calc(var(--guide-size, 16px) / 8));
  border-radius: 2px;
  background: #8a5d1f;
  box-shadow: 0 1px 0 rgba(255, 231, 161, .62);
  transform-origin: center;
}

.modal-skin-guide #gameModalClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-skin-guide #gameModalClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

.modal-skin-guide #gameModalBody {
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
}

.modal-skin-guide [hidden] {
  display: none !important;
}

.game-modal.maincity-modal-panel {
  position: relative;
  width: var(--maincity-modal-width, 360px);
  max-width: 92vw;
  height: var(--maincity-modal-height, 430px);
  max-height: 92vw;
  padding: 0;
  border: 0;
  background: url("../assets/ui/modal_maincity_backplate_v2_image2_low_webp_q82.webp?v=1675") center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
}

.game-modal.modal-skin-ranking {
  max-height: none;
  overflow: hidden;
}

.artifact-area .recruit-pool.is-locked {
  filter: grayscale(.5) brightness(.72);
}

.artifact-area .recruit-pool.is-locked .recruit-main-button,
.artifact-area .recruit-pool.is-locked .recruit-paid-row button {
  cursor: not-allowed;
}

.artifact-area {
  --artifact-gold: #ffe0a3;
  --artifact-cream: #fff0c0;
  --artifact-brown: rgba(45, 24, 12, .92);
  position: absolute;
  inset: 0;
  display: block;
}

.artifact-area.has-reveal .artifact-stage,
.artifact-area.has-reveal .artifact-actions,
.artifact-area.has-reveal .artifact-hint-line {
  visibility: hidden;
  pointer-events: none;
}

.artifact-stage {
  display: contents;
}

.artifact-actions {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.artifact-actions [data-artifact-item] {
  pointer-events: auto;
  z-index: 6;
}

.artifact-actions .secondary {
  min-height: 0;
  padding: 0;
  border-color: rgba(232, 188, 88, .68);
  background: rgba(35, 18, 10, .68);
  color: #ffe3a2;
  line-height: 1;
}

.artifact-pool-entry {
  display: contents;
}

.artifact-pool-button {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--artifact-cream);
  overflow: visible;
}

.artifact-area [data-artifact-item] {
  position: absolute;
  left: var(--adx);
  top: var(--ady);
  width: var(--adw);
  height: var(--adh);
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  font-size: var(--ads);
  pointer-events: auto;
}

.artifact-hint-line[data-artifact-item="hint"] {
  display: grid;
  place-items: center;
  color: #fff0c0;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px rgba(10, 4, 1, .94), 0 0 7px rgba(255, 206, 91, .28);
}

.artifact-pool-button:hover,
.artifact-pool-button:active,
.artifact-pool-button:focus,
.artifact-pool-button:focus-visible,
.artifact-paid-row button:hover,
.artifact-paid-row button:active,
.artifact-paid-row button:focus,
.artifact-paid-row button:focus-visible {
  outline: 0;
  box-shadow: none;
}

.artifact-pool-glow {
  display: none;
  position: absolute;
  left: 50%;
  top: 54px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 218, 116, .34), rgba(255, 218, 116, .08) 48%, transparent 70%);
  filter: blur(.2px);
  animation: artifactGlow 1.9s ease-in-out infinite;
  pointer-events: none;
}

.artifact-pool-entry.pool-epic .artifact-pool-glow {
  background: radial-gradient(circle, rgba(135, 220, 255, .36), rgba(135, 220, 255, .08) 50%, transparent 72%);
}

.artifact-pool-entry.pool-legend .artifact-pool-glow {
  background: radial-gradient(circle, rgba(255, 246, 190, .46), rgba(124, 184, 255, .15) 48%, transparent 74%);
}

.artifact-pool-icon {
  z-index: 2;
  width: var(--adw);
  height: var(--adh);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 8px rgba(12, 5, 2, .55));
}

.artifact-pool-button .pool-title {
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--artifact-gold);
  font-size: 12px;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px #1a0903, 0 0 7px rgba(255, 200, 80, .35);
}

.artifact-pool-button .pool-state,
.artifact-pool-button .pool-rarity,
.artifact-free-info {
  z-index: 3;
  display: grid;
  place-items: center;
  color: #f6d7a1;
  font-size: 8px;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px rgba(15, 6, 2, .9);
}

.artifact-free-info {
  color: #fff0c0;
  font-weight: 700;
}

.artifact-paid-row {
  display: contents;
}

.artifact-paid-row button {
  min-height: 0;
  padding: 1px 2px;
  border: 1px solid rgba(206, 151, 55, .72);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(112, 62, 25, .9), rgba(43, 23, 12, .92));
  color: #ffe0a3;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px #160703;
}

.artifact-paid-row .recruit-yuanbao-mini {
  width: 9px;
  height: 9px;
  vertical-align: -2px;
}

.artifact-pool-entry.is-locked {
  filter: grayscale(.55) brightness(.72);
}

.artifact-pool-entry.is-locked .artifact-pool-button,
.artifact-pool-entry.is-locked .artifact-paid-row button {
  cursor: not-allowed;
}

.artifact-close-button[data-artifact-item="close"] {
  width: var(--adw) !important;
  height: var(--adh) !important;
  min-width: 0;
  padding: 0;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
  color: transparent;
  font-size: 0;
  pointer-events: auto;
  z-index: 20;
}

.artifact-close-button[data-artifact-item="close"]::before,
.artifact-close-button[data-artifact-item="close"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: #fff0b6;
  box-shadow: 0 0 4px rgba(255, 218, 95, .58);
}

.artifact-close-button[data-artifact-item="close"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.artifact-close-button[data-artifact-item="close"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.artifact-lock-overlay {
  top: 44px;
}

.artifact-live-edit .artifact-editable-item {
  outline: 1px dashed rgba(255, 230, 120, .95);
  cursor: move;
  pointer-events: auto !important;
  user-select: none;
  touch-action: none;
  z-index: 80;
}

.artifact-live-edit .artifact-editable-item.is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
  z-index: 90;
}

@keyframes artifactPoolIdle {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 6px 8px rgba(12, 5, 2, .55)) brightness(1); }
  50% { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 8px 10px rgba(12, 5, 2, .58)) brightness(1.08); }
}

@keyframes artifactGlow {
  0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(.95); }
  50% { opacity: .92; transform: translate(-50%, -50%) scale(1.08); }
}

.shenbingge-subpage .jishi-trade-form button {
  min-height: 34px;
}

.shenbingge-modal-panel .shenbingge-subpage {
  position: static;
  inset: auto;
  display: contents;
}

.forge-equipment-page {
  inset: 50px 28px 26px;
}

.forge-equipment-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 318px;
  overflow: auto;
  padding: 2px 4px 10px;
  scrollbar-width: none;
}

.forge-equipment-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.forge-slot-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.forge-slot-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.forge-slot-tabs button {
  flex: 0 0 auto;
  min-width: 38px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(199, 154, 73, .52);
  border-radius: 4px;
  background: rgba(33, 17, 9, .54);
  color: #d9b878;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  scroll-snap-align: start;
}

.forge-slot-tabs button.is-selected {
  border-color: rgba(245, 203, 105, .88);
  background: linear-gradient(180deg, rgba(122, 70, 22, .88), rgba(49, 25, 11, .9));
  color: #fff0b8;
  box-shadow: inset 0 1px 0 rgba(255, 238, 173, .25), 0 0 5px rgba(255, 202, 93, .22);
}

.forge-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  min-height: 0;
}

.forge-card {
  display: grid;
  grid-template-rows: 42px auto auto auto;
  justify-items: center;
  min-height: 108px;
  padding: 6px 4px;
  border: 1px solid rgba(217, 171, 88, .44);
  border-radius: 6px;
  background: rgba(28, 15, 9, .48);
  color: #ffe8af;
  box-shadow: none;
  scroll-snap-align: start;
}

.forge-card:disabled {
  opacity: .52;
  filter: grayscale(.35);
}

.forge-card img,
.forge-card i {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.forge-card strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff1bf;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forge-card span,
.forge-card em {
  max-width: 100%;
  overflow: hidden;
  color: #d7b87b;
  font-size: 6px;
  font-style: normal;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forge-card.rarity-sss { border-color: rgba(227, 183, 62, .68); }
.forge-card.rarity-ssr { border-color: rgba(163, 103, 218, .56); }
.forge-card.rarity-sr { border-color: rgba(97, 171, 124, .52); }

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

.forge-equipment-page [data-shenbingge-item="forgeListBack"] {
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  z-index: 76;
  display: block;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
}

.forge-equipment-page [data-shenbingge-item="forgeListDesc"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 8px;
  color: #ffe3a0;
  line-height: 1.24;
  text-align: center;
  text-shadow: 0 1px 2px rgba(13, 5, 2, .98), 0 0 5px rgba(132, 56, 10, .62);
  white-space: normal;
}

.forge-equipment-page [data-shenbingge-item="forgeList"] {
  display: grid;
  box-sizing: border-box;
  align-content: start;
  gap: 8px;
  margin: 0;
  max-height: none;
  padding: 2px 4px 10px;
  overflow: auto;
  scrollbar-width: none;
}

.forge-equipment-page [data-shenbingge-item="forgeList"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.enhance-equipment-page [data-shenbingge-item="enhanceListBack"] {
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  z-index: 76;
  display: block;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
}

.enhance-equipment-page [data-shenbingge-item="enhanceListDesc"] {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 8px;
  color: #ffe3a0;
  line-height: 1.24;
  text-align: center;
  text-shadow: 0 1px 2px rgba(13, 5, 2, .98), 0 0 5px rgba(132, 56, 10, .62);
  white-space: normal;
}

.enhance-equipment-page [data-shenbingge-item="enhanceList"] {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  margin: 0;
  max-height: none;
  padding: 2px 4px 10px;
  overflow: auto;
  scrollbar-width: none;
}

.enhance-equipment-page [data-shenbingge-item="enhanceList"]::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.enhance-card {
  min-height: 116px;
}

.enhance-card strong,
.enhance-card span,
.enhance-card em {
  white-space: normal;
}

.forge-confirm-card {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 4px auto 8px;
  color: #ffe8b2;
}

.forge-confirm-card img,
.forge-confirm-card i {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.forge-confirm-card strong {
  color: #fff0bd;
  font-size: 12px;
}

.forge-confirm-card span {
  color: #d9ba7a;
  font-size: 8px;
}

.forge-confirm-page .bingying-back-button[data-shenbingge-item="forgeConfirmBack"] {
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  z-index: 76;
  display: block;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
}

.forge-confirm-page .forge-confirm-card[data-shenbingge-item="forgeConfirmCard"] {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 2px 6px;
  color: #ffe8b2;
  text-align: center;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(92, 30, 8, .72);
}

.forge-confirm-page .forge-confirm-card[data-shenbingge-item="forgeConfirmCard"] img,
.forge-confirm-page .forge-confirm-card[data-shenbingge-item="forgeConfirmCard"] i {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.forge-confirm-page .forge-confirm-card[data-shenbingge-item="forgeConfirmCard"] strong {
  color: #fff0bd;
  font-size: var(--sbgs) !important;
  line-height: 1.15;
  white-space: nowrap;
}

.forge-confirm-page .forge-confirm-card[data-shenbingge-item="forgeConfirmCard"] span {
  color: #f4d487;
  font-size: max(7px, calc(var(--sbgs) - 3px)) !important;
  line-height: 1.1;
  white-space: nowrap;
}

.forge-confirm-page .forge-confirm-form {
  display: contents;
}

.forge-confirm-page [data-shenbingge-item="forgeConfirmRequirement"],
.forge-confirm-page [data-shenbingge-item="forgeConfirmResource"],
.forge-confirm-page [data-shenbingge-item="forgeConfirmMaterial"],
.forge-confirm-page [data-shenbingge-item="forgeConfirmTime"] {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  padding: 0 5px;
  color: #ffe4a5;
  font-style: normal;
  line-height: 1.28;
  text-align: left;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(12, 5, 2, .96), 0 0 4px rgba(145, 70, 14, .58);
  white-space: normal;
}

.forge-confirm-page [data-shenbingge-item="forgeConfirmButton"] {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 8px;
  border: 1px solid rgba(238, 196, 91, .72);
  border-radius: 2px;
  background: linear-gradient(180deg, #f1d789 0%, #b98528 66%, #684017 100%);
  color: #fff2bd;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(51, 22, 4, .9);
  box-shadow: inset 0 1px 0 rgba(255, 244, 183, .42), 0 2px 4px rgba(18, 7, 2, .34);
}

.forge-confirm-page [data-shenbingge-item="forgeConfirmButton"]:disabled {
  filter: grayscale(.25);
  opacity: .86;
}

.enhance-confirm-page .bingying-back-button[data-shenbingge-item="enhanceBack"] {
  left: var(--sbgx) !important;
  top: var(--sbgy) !important;
  z-index: 76;
  display: block;
  width: var(--sbgw) !important;
  height: var(--sbgh) !important;
  transform: translate(-50%, -50%) !important;
  border-color: rgba(232, 195, 93, .82);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 222, 119, .9), rgba(130, 70, 21, .94) 62%, rgba(45, 24, 12, .96));
  box-shadow: 0 0 7px rgba(255, 205, 83, .28), inset 0 1px 0 rgba(255, 239, 177, .35);
}

.enhance-confirm-page .forge-confirm-card[data-shenbingge-item="enhanceCard"] {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 2px 6px;
  color: #ffe8b2;
  text-align: center;
  text-shadow: 0 1px 2px rgba(18, 7, 2, .96), 0 0 5px rgba(92, 30, 8, .72);
}

.enhance-confirm-page .forge-confirm-card[data-shenbingge-item="enhanceCard"] img,
.enhance-confirm-page .forge-confirm-card[data-shenbingge-item="enhanceCard"] i {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.enhance-confirm-page .forge-confirm-card[data-shenbingge-item="enhanceCard"] strong {
  color: #fff0bd;
  font-size: var(--sbgs) !important;
  line-height: 1.15;
  white-space: nowrap;
}

.enhance-confirm-page .forge-confirm-card[data-shenbingge-item="enhanceCard"] span {
  color: #f4d487;
  font-size: max(7px, calc(var(--sbgs) - 3px)) !important;
  line-height: 1.1;
  white-space: nowrap;
}

.enhance-confirm-page .enhance-confirm-form {
  display: contents;
}

.enhance-confirm-page [data-shenbingge-item="enhanceEffect"],
.enhance-confirm-page [data-shenbingge-item="enhanceResource"],
.enhance-confirm-page [data-shenbingge-item="enhanceMaterial"],
.enhance-confirm-page [data-shenbingge-item="enhanceRate"] {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  padding: 0 5px;
  color: #ffe4a5;
  font-style: normal;
  line-height: 1.28;
  text-align: left;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(12, 5, 2, .96), 0 0 4px rgba(145, 70, 14, .58);
  white-space: normal;
}

.enhance-confirm-page [data-shenbingge-item="enhanceConfirm"] {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 8px;
  border: 1px solid rgba(238, 196, 91, .72);
  border-radius: 2px;
  background: linear-gradient(180deg, #f1d789 0%, #b98528 66%, #684017 100%);
  color: #fff2bd;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(51, 22, 4, .9);
  box-shadow: inset 0 1px 0 rgba(255, 244, 183, .42), 0 2px 4px rgba(18, 7, 2, .34);
}

.enhance-confirm-page [data-shenbingge-item="enhanceConfirm"]:disabled {
  filter: grayscale(.25);
  opacity: .86;
}

.enhance-confirm-page .shenbingge-enhance-result[data-shenbingge-item="enhanceResult"] {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffe1a0;
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  text-shadow: 0 1px 2px rgba(15, 6, 2, .98), 0 0 5px rgba(170, 85, 18, .62);
  white-space: normal;
}

.maincity-modal-panel .modal-head {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.maincity-modal-panel #gameModalBody {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 10px;
}

.maincity-modal-panel [data-maincity-item] {
  position: absolute;
  left: var(--mcx);
  top: var(--mcy);
  width: var(--mcw);
  height: var(--mch);
  margin: 0;
  padding: 0;
  font-size: var(--mcs);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.maincity-modal-panel .panel-grid {
  display: block;
  margin: 0;
}

.maincity-modal-panel .info-row {
  align-items: center;
  padding: 0 6px;
}

.maincity-modal-panel .action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.maincity-modal-panel .maincity-upgrade-button {
  width: 100%;
  height: 100%;
  border-color: #b58a34;
  background: linear-gradient(180deg, #f1d789 0%, #b98528 66%, #684017 100%);
  color: #fff2bd;
  font-weight: 800;
}

.maincity-modal-panel .maincity-upgrade-button.ready {
  background:
    linear-gradient(180deg, rgba(255, 244, 181, .95) 0%, rgba(202, 143, 44, .98) 68%, rgba(90, 55, 19, .98) 100%);
}

.maincity-modal-panel .maincity-upgrade-button.cooling,
.maincity-modal-panel .maincity-upgrade-button:disabled {
  border-color: rgba(84, 75, 62, .9);
  background: linear-gradient(180deg, rgba(96, 92, 82, .72), rgba(48, 45, 39, .82));
  color: rgba(215, 207, 186, .72);
}

.maincity-modal-panel #gameModalClose {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: transparent;
  text-shadow: none;
  font-size: 0;
  line-height: 0;
  appearance: none;
  pointer-events: auto;
}

.maincity-modal-panel #gameModalClose::before,
.maincity-modal-panel #gameModalClose::after {
  content: none;
}

.maincity-live-edit [data-maincity-item] {
  cursor: move;
  touch-action: none;
}

.maincity-live-edit [data-maincity-item].is-live-selected {
  outline: 2px solid rgba(72, 210, 255, .95);
  outline-offset: -2px;
  z-index: 90;
}

.maincity-live-editor-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -96px;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr repeat(5, 48px) 54px 58px;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border: 1px solid rgba(198, 155, 71, .78);
  background: rgba(24, 18, 10, .92);
  color: #f5e3ad;
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.maincity-live-editor-panel b,
.maincity-live-editor-panel select,
.maincity-live-editor-panel button {
  height: 24px;
}

.maincity-live-editor-panel label {
  display: grid;
  gap: 2px;
  margin: 0;
}

.maincity-live-editor-panel input,
.maincity-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(185, 142, 62, .7);
}

.maincity-live-editor-panel button {
  border: 1px solid rgba(213, 174, 89, .86);
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
}

#gameModalBody {
  display: grid;
  gap: 7px;
  font-size: 10px;
}

.modal-brief {
  margin: 0;
  color: #554934;
  font-size: 10px;
  line-height: 1.32;
}

.guide-modal-content {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: start;
}

.guide-npc {
  width: 92px;
  max-height: 135px;
  object-fit: contain;
  align-self: end;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .38));
}

.guide-dialog {
  position: relative;
  width: var(--guide-dialog-width, auto);
  height: var(--guide-dialog-height, auto);
  min-height: var(--guide-dialog-height, 78px);
  transform: translate(var(--guide-dialog-x, 0), var(--guide-dialog-y, 0));
  padding: 11px 16px 10px 10px;
  background: url("../assets/guide/crops/guide_dialog_frame_v4_image2_low_webp_q82.webp") center / 100% 100% no-repeat;
  color: #3d311d;
}

.guide-dialog b {
  position: absolute;
  left: var(--guide-title-x, 5px);
  top: var(--guide-title-y, 13px);
  display: block;
  width: max-content;
  margin: 0;
  color: #8d6a1d;
  font-size: var(--guide-title-size, 9px);
  line-height: 1;
}

.guide-dialog p {
  position: absolute;
  left: var(--guide-text-x, 19px);
  top: var(--guide-text-y, 29px);
  color: #4b412c;
  font-size: var(--guide-text-size, 9px);
  line-height: var(--guide-line-height, 12px);
  margin: 0;
  width: var(--guide-text-width, 165px);
}

.guide-dialog p span {
  display: block;
  white-space: nowrap;
}

.guide-step-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
}

.guide-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(143, 139, 119, .24);
  background: rgba(229, 223, 207, .72);
  text-align: left;
  color: inherit;
}

.guide-step:hover,
.guide-step.active {
  border-color: rgba(213, 181, 95, .58);
  background: rgba(232, 221, 188, .78);
}

.guide-step.done {
  border-color: rgba(129, 169, 112, .5);
  background: rgba(215, 226, 203, .76);
}

.guide-step.locked {
  opacity: .58;
}

.guide-step i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e9d38f, #c7a548);
  color: #2f2413;
  font-style: normal;
  font-weight: 900;
}

.guide-step.done i {
  background: linear-gradient(180deg, #cde2a9, #79a65a);
  color: #1f3519;
}

.guide-step strong,
.guide-step span {
  display: block;
}

.guide-step strong {
  color: #8a6924;
  font-size: 13px;
}

.guide-step span {
  color: #5e5a4c;
  font-size: 12px;
  line-height: 1.35;
}

.modal-skin-guide .guide-modal-content {
  position: absolute;
  inset: 0;
  display: block;
  height: auto;
}

.modal-skin-guide .guide-npc {
  position: absolute;
  left: var(--guide-x, 65px);
  top: var(--guide-y, 113px);
  width: var(--guide-w, 82px);
  height: var(--guide-h, 124px);
  max-height: none;
  object-fit: contain;
  background: radial-gradient(circle at 50% 55%, rgba(255, 235, 160, .28), rgba(120, 72, 24, .12) 62%, transparent 72%);
}

.modal-skin-guide .guide-dialog {
  position: absolute;
  left: var(--guide-x, -23px);
  top: var(--guide-y, 22px);
  width: var(--guide-dialog-width, auto);
  height: var(--guide-dialog-height, 102px);
  min-height: 0;
  transform: translate(0, 0);
  padding: 8px 6px 6px;
  background: transparent;
}

.modal-skin-guide .guide-dialog b {
  position: absolute;
  left: var(--guide-title-x, 5px);
  top: var(--guide-title-y, 13px);
  margin: 0;
  color: #8a631e;
  font-size: var(--guide-title-size, 11px);
}

.modal-skin-guide .guide-dialog p {
  position: absolute;
  left: var(--guide-text-x, 19px);
  top: var(--guide-text-y, 29px);
  width: var(--guide-text-width, 165px);
  color: #4a3b24;
  font-size: var(--guide-text-size, 9px);
  line-height: var(--guide-line-height, 13px);
}

.modal-skin-guide .guide-dialog p span {
  white-space: normal;
}

.modal-skin-guide .guide-step-list {
  position: absolute;
  left: var(--guide-x, 64px);
  top: var(--guide-y, 202px);
  width: var(--guide-w, 263px);
  height: var(--guide-h, 136px);
  min-height: 0;
  overflow: auto;
  gap: 5px;
  padding-right: 2px;
}

.modal-skin-guide .guide-step {
  min-height: 44px;
  padding: 6px 7px 5px;
  border-color: rgba(122, 89, 35, .34);
  background: rgba(238, 224, 184, .64);
  overflow: visible;
}

.modal-skin-guide .guide-step strong {
  color: #8a6924;
  font-size: 11px;
  line-height: 1.28;
  padding-top: 1px;
  overflow: visible;
}

.modal-skin-guide .guide-step span {
  color: #4a3b24;
  font-size: 9px;
  line-height: 1.25;
}

.modal-skin-guide .guide-action-row {
  position: absolute;
  left: var(--guide-x, 64px);
  top: var(--guide-y, 365px);
  width: var(--guide-w, 263px);
  height: var(--guide-h, 32px);
  margin: 0;
}

.modal-skin-guide .guide-action-row button {
  min-height: 30px;
  border: 1px solid rgba(164, 106, 30, .86);
  background: linear-gradient(180deg, #f6df95 0%, #d2a63d 58%, #8a571d 100%);
  color: #3a260f;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 244, 185, .62), 0 2px 4px rgba(45, 24, 8, .24);
}

.modal-skin-guide .guide-complete-panel {
  position: absolute;
  left: 50px;
  top: 92px;
  width: 260px;
  display: grid;
  gap: 12px;
  color: #3f2b13;
  text-align: center;
}

.modal-skin-guide .guide-complete-panel b {
  color: #8a631e;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 235, 158, .55);
}

.modal-skin-guide .guide-complete-panel p {
  color: #3e2c17;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-shadow: none;
}

.modal-skin-guide .guide-complete-panel div {
  display: grid;
  gap: 8px;
}

.modal-skin-guide .guide-complete-panel button {
  min-height: 32px;
  border: 1px solid rgba(164, 106, 30, .86);
  background: linear-gradient(180deg, #f6df95 0%, #d2a63d 58%, #8a571d 100%);
  color: #3a260f;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 244, 185, .62), 0 2px 4px rgba(45, 24, 8, .24);
}

.modal-skin-guide .guide-complete-panel button.secondary {
  background: linear-gradient(180deg, #d0c1a1, #8e7654);
  color: #fff2c4;
}

.modal-skin-guide .guide-dialog p,
.modal-skin-guide .guide-step span,
.modal-skin-guide .guide-action-row button {
  font-weight: 700;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.modal-skin-guide .guide-dialog b,
.modal-skin-guide .guide-step strong {
  color: #8a631e;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 235, 158, .45);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.guide-live-edit [data-guide-item] {
  cursor: move;
}

.guide-live-edit [data-guide-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
}

.guide-live-editor-panel {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -128px;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr repeat(6, 48px) 54px 54px 58px;
  gap: 5px;
  align-items: end;
  padding: 6px;
  border: 1px solid rgba(198, 155, 71, .78);
  background: rgba(24, 18, 10, .92);
  color: #f5e3ad;
  font-size: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}

.guide-live-editor-panel b,
.guide-live-editor-panel select,
.guide-live-editor-panel button {
  height: 24px;
}

.guide-live-editor-panel label {
  display: grid;
  gap: 2px;
  margin: 0;
}

.guide-live-editor-panel input,
.guide-live-editor-panel select {
  width: 100%;
  min-width: 0;
  height: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(185, 142, 62, .7);
}

.guide-live-editor-panel button {
  border: 1px solid rgba(213, 174, 89, .86);
  background: rgba(119, 78, 24, .92);
  color: #ffe7a8;
}

.modal-head {
  position: sticky;
  top: -14px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin: -14px -14px 8px;
  padding: 7px 8px 6px;
  border-bottom: 0;
  background: transparent;
}

.modal-head h2 {
  margin: 0;
  color: #4d3a19;
  font-size: 13px;
  line-height: 1;
}

.modal-head button {
  min-width: 42px;
  padding: 4px 6px;
  font-size: 10px;
}

.recharge-note {
  margin: 0;
  color: #5a4b34;
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.recharge-balance {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: #fff1bf;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .82), 0 0 6px rgba(255, 223, 132, .32);
}

.recharge-balance strong {
  color: #fff7d6;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88), 0 0 7px rgba(255, 228, 146, .42);
}

.cdk-section {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  text-align: center;
  color: #fff1bf;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .82), 0 0 5px rgba(255, 223, 132, .28);
  z-index: 2;
}

.cdk-section strong {
  color: #fff7d6;
  font-size: 1.05em;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88), 0 0 7px rgba(255, 228, 146, .42);
}

.cdk-section div {
  display: flex;
  gap: 4px;
  width: 100%;
}

.recharge-modal #cdkInput {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rw);
  height: var(--rh);
  min-width: 0;
  flex: initial;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff1bf;
  font: inherit;
  font-size: var(--rs);
  text-align: center;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88);
  pointer-events: auto;
  outline: 0;
  appearance: none;
}

.recharge-modal #cdkInput::placeholder {
  color: rgba(255, 237, 182, .72);
}

.recharge-modal #cdkSubmit {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rw);
  height: var(--rh);
  flex: initial;
  transform: translate(-50%, -50%);
  padding: 0;
  font-size: var(--rs);
  pointer-events: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff1bf;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88), 0 0 5px rgba(255, 223, 132, .28);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.recharge-modal #cdkSubmit:hover,
.recharge-modal #cdkSubmit:active,
.recharge-modal #cdkSubmit:focus,
.recharge-modal #cdkSubmit:focus-visible {
  border: 0 !important;
  background: transparent !important;
  color: #fff1bf;
  box-shadow: none !important;
  outline: 0;
}

.recharge-modal #cdkMessage {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  width: var(--rw);
  height: var(--rh);
  transform: translate(-50%, -50%);
  min-height: 1.1em;
  color: #fff1bf;
  font-size: .9em;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .82), 0 0 5px rgba(255, 223, 132, .28);
  pointer-events: none;
}

.recharge-grid {
  position: absolute;
  inset: 0;
}

.recharge-pack {
  display: grid;
  gap: 3px;
  min-height: 84px;
  align-content: center;
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.recharge-pack strong {
  color: #fff7d6;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88), 0 0 7px rgba(255, 228, 146, .42);
}

.recharge-pack span {
  color: #fff1bf;
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .82), 0 0 5px rgba(255, 223, 132, .28);
}

.recharge-pack em {
  color: #ffefb1;
  font-style: normal;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(35, 18, 7, .88), 0 0 6px rgba(255, 228, 146, .34);
}

.recharge-pack:hover,
.recharge-pack:active,
.recharge-pack:focus,
.recharge-pack:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.recharge-live-edit .recharge-modal [data-recharge-item] {
  cursor: move;
  position: absolute;
  outline: 2px dashed rgba(122, 230, 255, .9);
  outline-offset: -1px;
  touch-action: none;
  z-index: 90;
  pointer-events: auto !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 8px rgba(122, 230, 255, .32);
  background: rgba(122, 230, 255, .03);
}

.recharge-live-edit .recharge-modal [data-recharge-item].is-live-selected {
  outline: 2px solid rgba(238, 45, 45, .9);
  outline-offset: -2px;
  z-index: 95;
}

.recharge-live-edit .recharge-modal #rechargeModalClose,
.recharge-live-edit .recharge-modal #rechargeModalBack {
  z-index: 150;
  min-width: 34px;
  min-height: 24px;
}

.recharge-live-edit .recharge-modal #rechargeModalClose::after,
.recharge-live-edit .recharge-modal #rechargeModalBack::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 246, 186, .98);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(12, 23, 34, .35) inset, 0 0 6px rgba(122, 230, 255, .22);
  pointer-events: none;
}

.recharge-live-edit .recharge-modal #rechargeModalClose,
.recharge-live-edit .recharge-modal #rechargeModalBack,
.recharge-live-edit .recharge-modal #cdkSubmit,
.recharge-live-edit .recharge-modal .recharge-pack {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none;
}

.recharge-live-editor-panel {
  position: fixed;
}

.recharge-live-resize-handle {
  position: absolute;
  left: var(--recharge-x);
  top: var(--recharge-y);
  z-index: 130;
}

.recharge-live-resize-handle[hidden] {
  display: none;
}

.avatar-picker {
  position: absolute;
  inset: 0;
}

.avatar-choice {
  position: absolute;
  left: var(--avatar-x, 128px);
  top: var(--avatar-y, 198px);
  display: block;
  width: var(--avatar-size, 72px);
  aspect-ratio: 1;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  color: #5b421b;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.avatar-choice:nth-child(2) { --avatar-x: 260px; }
.avatar-choice:nth-child(3) { --avatar-x: 392px; }
.avatar-choice:nth-child(4) { --avatar-y: 318px; }
.avatar-choice:nth-child(5) { --avatar-x: 260px; --avatar-y: 318px; }
.avatar-choice:nth-child(6) { --avatar-x: 392px; --avatar-y: 318px; }

.avatar-choice.active {
  background: transparent;
}

.avatar-choice img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 2px 4px rgba(42, 30, 11, .35));
}

.avatar-choice,
.avatar-choice:hover,
.avatar-choice:active,
.avatar-choice:focus,
.avatar-choice:focus-visible,
.avatar-choice.active {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.avatar-choice::before,
.avatar-choice::after,
.avatar-choice:hover::before,
.avatar-choice:hover::after,
.avatar-choice:active::before,
.avatar-choice:active::after,
.avatar-choice.active::before,
.avatar-choice.active::after {
  content: none !important;
  display: none !important;
}

.upload-row {
  position: absolute;
  left: var(--avatar-upload-x, 168px);
  top: var(--avatar-upload-y, 446px);
  width: var(--avatar-upload-w, 184px);
  height: var(--avatar-upload-h, 32px);
  display: grid;
  place-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 0;
  transform: translate(-50%, -50%);
  color: #4d3d25;
  font-size: var(--avatar-upload-size, 12px);
  cursor: pointer;
}

.avatar-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hotspot,
.unlock-guide-marker,
.guide-entry-button,
.world-tile,
.world-page-controls button,
.nav-item,
.world-entry,
.bottom-hud-item {
  -webkit-tap-highlight-color: transparent;
}

.hotspot:hover,
.hotspot:active,
.hotspot:focus,
.hotspot:focus-visible,
.unlock-guide-marker:hover,
.unlock-guide-marker:active,
.unlock-guide-marker:focus,
.unlock-guide-marker:focus-visible,
.guide-entry-button:hover,
.guide-entry-button:active,
.guide-entry-button:focus,
.guide-entry-button:focus-visible,
.world-tile:hover,
.world-tile:active,
.world-tile:focus,
.world-tile:focus-visible,
.world-page-controls button:hover,
.world-page-controls button:active,
.world-page-controls button:focus,
.world-page-controls button:focus-visible,
.nav-item:hover,
.nav-item:active,
.nav-item:focus,
.nav-item:focus-visible,
.world-entry:hover,
.world-entry:active,
.world-entry:focus,
.world-entry:focus-visible,
.bottom-hud-item:hover,
.bottom-hud-item:active,
.bottom-hud-item:focus,
.bottom-hud-item:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#avatarModalClose,
#avatarModalClose:hover,
#avatarModalClose:active,
#avatarModalClose:focus,
#avatarModalClose:focus-visible {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

#avatarModal .modal-skin-avatar {
  position: relative;
  padding: 0;
}

#avatarModal .modal-skin-avatar .modal-head {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none;
}

#avatarModal .modal-skin-avatar #avatarModalTitle {
  position: absolute !important;
  left: var(--avatar-title-x, 50%) !important;
  top: var(--avatar-title-y, 8%) !important;
  width: var(--avatar-title-w, 30%) !important;
  height: var(--avatar-title-h, 6%) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  color: #f5d37f;
  font-size: var(--avatar-title-size, 16px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  transform: translate(-50%, -50%) !important;
  text-align: center;
  text-shadow: 0 1px 1px rgba(38, 19, 6, .95), 0 0 4px rgba(76, 39, 12, .72);
  -webkit-text-stroke: .28px rgba(48, 25, 8, .72);
  pointer-events: none;
}

#avatarModal .modal-skin-avatar .avatar-choice {
  left: var(--avatar-x, 24.615%) !important;
  top: var(--avatar-y, 38.077%) !important;
  width: var(--avatar-size, 13.846%) !important;
}

@media (max-width: 420px) {
  .topbar {
    align-items: stretch;
  }

  .player-card {
    min-width: 0;
  }

}

  font-size: 9px;
  line-height: 1.15;




.modal-skin-alliance .modal-head,
.modal-skin-alliance #gameModalClose,
.modal-skin-alliance .alliance-back-button {
  z-index: 80;
}

.hud-notice-dot {
  position: absolute;
  left: var(--notice-x, auto);
  top: var(--notice-y, auto);
  right: auto;
  width: var(--notice-w, 8px);
  height: var(--notice-h, 8px);
  min-width: 2px;
  min-height: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3b8 0 18%, #e54a2d 48%, #8d130a 100%);
  box-shadow: 0 0 7px rgba(255, 64, 38, .62);
  pointer-events: none;
  z-index: 20;
}

.hud-notice-dot[data-hud-notice-editable="1"] {
  pointer-events: auto;
  cursor: move;
}

.hud-notice-dot.is-live-selected {
  outline: 1px dashed rgba(255, 244, 142, .98);
  outline-offset: 1px;
}

.hud-notice-live-editor-panel {
  position: fixed;
  right: 18px;
  top: 126px;
  z-index: 5000;
}

.hud-notice-resize-handle {
  position: fixed;
  z-index: 5001;
  transform: translate(-50%, -50%);
}

.right-hud-button em.hud-notice-dot {
  left: var(--notice-x, auto);
  top: var(--notice-y, auto);
  right: auto;
  width: var(--notice-w, 8px);
  height: var(--notice-h, 8px);
  min-width: 2px;
  min-height: 2px;
  padding: 0;
}