/* UI v3: Obsidian command deck. Loaded after the legacy theme on purpose. */
:root {
  --ui-bg-0: #050708;
  --ui-bg-1: #0a0e10;
  --ui-bg-2: #111719;
  --ui-surface: rgba(13, 18, 20, 0.94);
  --ui-surface-strong: rgba(18, 24, 26, 0.98);
  --ui-surface-soft: rgba(29, 37, 39, 0.76);
  --ui-line: rgba(164, 178, 178, 0.26);
  --ui-line-strong: rgba(210, 224, 220, 0.42);
  --ui-gold: #f1b13a;
  --ui-gold-hot: #ffd476;
  --ui-orange: #e96f17;
  --ui-orange-deep: #7b2b08;
  --ui-cyan: #55d9ef;
  --ui-blue: #3994c8;
  --ui-green: #63d36d;
  --ui-red: #ef5e4f;
  --ui-violet: #a885ff;
  --ui-text: #f1f4ef;
  --ui-text-soft: #c3ccc9;
  --ui-muted: #879391;
  --ui-shadow: 0 18px 42px rgba(0, 0, 0, 0.58);
  --ui-inner: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ui-font-display: "Bahnschrift SemiCondensed", "Microsoft YaHei UI", sans-serif;
  --ui-font-body: "Microsoft YaHei UI", "PingFang SC", sans-serif;
}

html,
body {
  background:
    linear-gradient(120deg, rgba(233, 111, 23, 0.07), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
    #030506 !important;
  color: var(--ui-text);
  font-family: var(--ui-font-body) !important;
}

button,
input,
textarea {
  font-family: var(--ui-font-body) !important;
  letter-spacing: 0 !important;
}

button {
  border-radius: 4px !important;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, filter 140ms ease, transform 100ms ease;
}

button:hover:not(:disabled),
button:focus-visible:not(:disabled) {
  border-color: rgba(255, 210, 113, 0.82) !important;
  filter: brightness(1.09) saturate(1.04);
  outline: none;
}

button:focus-visible {
  box-shadow: 0 0 0 2px rgba(85, 217, 239, 0.38), 0 0 18px rgba(85, 217, 239, 0.16) !important;
}

button:active:not(:disabled) {
  filter: brightness(0.94);
  transform: translateY(1px) scale(0.99);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.68) brightness(0.65) !important;
  opacity: 0.7;
}

.shell {
  padding: 12px !important;
}

.phone {
  background: var(--ui-bg-0) !important;
  border: 1px solid #394345 !important;
  border-radius: 2px !important;
  box-shadow:
    0 0 0 2px #050708,
    0 0 0 3px #2c3436,
    0 26px 72px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(233, 111, 23, 0.11) !important;
}

.phone::before {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 10% 90%, rgba(0, 0, 0, 0.34)) !important;
  mix-blend-mode: normal !important;
  opacity: 0.66 !important;
}

.phone::after {
  inset: 5px !important;
  opacity: 0.46 !important;
}

.hub-screen,
.panel-screen,
.level-screen {
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.1), rgba(4, 6, 7, 0.95)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 36px),
    var(--ui-bg-1) !important;
}

.hub-screen::before,
.panel-screen::before,
.level-screen::before {
  background:
    linear-gradient(135deg, transparent 0 48.5%, rgba(241, 177, 58, 0.038) 49%, transparent 49.5%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 36px) !important;
  opacity: 0.72 !important;
}

.hub-screen::after,
.panel-screen::after,
.level-screen::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 14% 86%, rgba(0, 0, 0, 0.42)) !important;
}

/* Shared command bars */
.hub-top,
.panel-header {
  left: 8px !important;
  right: 8px !important;
  top: 8px !important;
}

.hub-top {
  align-items: start !important;
  gap: 6px !important;
}

.profile-block {
  background:
    linear-gradient(90deg, rgba(233, 111, 23, 0.15), transparent 78%),
    rgba(9, 14, 16, 0.94) !important;
  border: 1px solid var(--ui-line-strong) !important;
  box-shadow: var(--ui-inner), 0 8px 20px rgba(0, 0, 0, 0.38) !important;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px) !important;
  min-height: 50px !important;
  padding: 5px 8px !important;
}

.profile-block b {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
  font-size: 13px !important;
}

.profile-block span {
  color: var(--ui-gold) !important;
  font-size: 10px !important;
}

.profile-block i {
  background: linear-gradient(90deg, var(--ui-orange) 0 62%, #283234 62%) !important;
  height: 3px !important;
}

.portrait-mini {
  border: 1px solid rgba(241, 177, 58, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 12px rgba(233, 111, 23, 0.18) !important;
}

.hub-resources,
.panel-resource-mini,
.character-currency-strip {
  gap: 4px !important;
}

.hub-resources span,
.panel-resource-mini span,
.character-currency-strip span {
  background: rgba(8, 12, 14, 0.9) !important;
  border: 1px solid rgba(149, 162, 161, 0.28) !important;
  border-radius: 3px !important;
  box-shadow: var(--ui-inner) !important;
  min-height: 25px !important;
}

.hub-resources b,
.panel-resource-mini b,
.character-currency-strip b {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
  font-size: 11px !important;
}

.coin-icon,
.gem-icon,
.energy-icon,
.meat-icon {
  filter: drop-shadow(0 0 4px rgba(255, 193, 73, 0.28)) !important;
}

.panel-header {
  background:
    linear-gradient(90deg, rgba(233, 111, 23, 0.11), transparent 44%),
    rgba(6, 10, 12, 0.95) !important;
  border: 1px solid rgba(153, 168, 166, 0.27) !important;
  border-bottom-color: rgba(241, 177, 58, 0.52) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38) !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  min-height: 50px !important;
  padding: 4px 6px !important;
}

.panel-header h2 {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
  font-size: 19px !important;
  text-align: left !important;
  text-shadow: none !important;
}

.panel-header h2::after {
  color: var(--ui-muted);
  content: "TACTICAL SYSTEM";
  display: block;
  font: 700 7px/1 var(--ui-font-display);
  margin-top: 2px;
}

.panel-back {
  background: #101719 !important;
  border: 1px solid rgba(241, 177, 58, 0.45) !important;
  color: var(--ui-gold-hot) !important;
  font-size: 24px !important;
  height: 34px !important;
  min-height: 34px !important;
  width: 34px !important;
}

/* Hub */
.hero-stage {
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(3, 6, 7, 0.06) 0 42%, rgba(3, 5, 6, 0.7) 75%, #030506 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 20% 74%, rgba(0, 0, 0, 0.58)),
    url("./assets/characters/armor-hunter.png") 52% top / cover no-repeat !important;
}

.hero-stage::before {
  background:
    linear-gradient(90deg, rgba(233, 111, 23, 0.08) 0 1px, transparent 1px) 18px 0 / 72px 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px) 0 12px / 100% 72px !important;
  opacity: 0.5 !important;
}

.hero-stage::after {
  background: linear-gradient(180deg, transparent 0 66%, rgba(0, 0, 0, 0.9) 95%) !important;
}

.hub-brand {
  left: 18px;
  position: absolute;
  top: 170px;
  z-index: 7;
}

.hub-brand small,
.hub-brand strong,
.hub-brand span {
  display: block;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
}

.hub-brand small {
  color: var(--ui-cyan);
  font: 800 8px/1 var(--ui-font-display);
}

.hub-brand strong {
  color: var(--ui-text);
  font: 900 29px/1 var(--ui-font-display);
  margin-top: 5px;
}

.hub-brand span {
  border-left: 2px solid var(--ui-orange);
  color: var(--ui-gold-hot);
  font-size: 11px;
  font-weight: 800;
  margin-top: 7px;
  padding-left: 7px;
}

.pass-card {
  background: rgba(8, 13, 14, 0.86) !important;
  border: 1px solid rgba(241, 177, 58, 0.43) !important;
  box-shadow: var(--ui-inner), 0 9px 22px rgba(0, 0, 0, 0.34) !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px) !important;
  min-height: 62px !important;
  padding: 8px !important;
  top: 76px !important;
  width: 112px !important;
}

.pass-card strong {
  font-size: 14px !important;
}

.pass-card span {
  color: var(--ui-muted) !important;
  font-size: 9px !important;
}

.side-actions {
  gap: 5px !important;
  right: 9px !important;
  top: 78px !important;
}

.side-actions button {
  background: rgba(8, 13, 15, 0.88) !important;
  border: 1px solid rgba(160, 176, 174, 0.3) !important;
  box-shadow: var(--ui-inner), 0 6px 14px rgba(0, 0, 0, 0.28) !important;
  color: var(--ui-text-soft) !important;
  font-size: 9px !important;
  min-height: 47px !important;
  padding-top: 24px !important;
  width: 47px !important;
}

.side-actions button::before {
  background: linear-gradient(180deg, #f1f3e9, #8b9895) !important;
  height: 18px !important;
  top: 6px !important;
  width: 18px !important;
}

.battle-button {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 20% 80%, rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, #f4b43c 0 46%, #d76012 47% 72%, #7d2b08 100%) !important;
  border: 1px solid var(--ui-gold-hot) !important;
  bottom: 76px !important;
  box-shadow:
    0 0 0 2px rgba(39, 17, 5, 0.9),
    0 10px 28px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(233, 111, 23, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%) !important;
  height: 58px !important;
  min-width: 250px !important;
}

.battle-button::before,
.battle-button::after {
  display: none !important;
}

.battle-button span {
  color: #281305 !important;
  font: 900 23px/1 var(--ui-font-display) !important;
  text-shadow: 0 1px rgba(255, 237, 184, 0.66) !important;
}

.battle-button b {
  color: #3b1a05 !important;
  font-size: 24px !important;
}

/* Shared bottom navigation */
.bottom-nav {
  background: rgba(5, 8, 9, 0.97) !important;
  border-top: 1px solid rgba(241, 177, 58, 0.48) !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.48) !important;
  min-height: 66px !important;
}

.bottom-nav button {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(142, 156, 154, 0.16) !important;
  color: var(--ui-muted) !important;
  font-size: 10px !important;
  min-height: 66px !important;
  padding: 6px 2px 5px !important;
  text-shadow: none !important;
}

.bottom-nav button:last-child {
  border-right: 0 !important;
}

.bottom-nav button span {
  height: 25px !important;
  margin-bottom: 3px !important;
}

.bottom-nav button span::before {
  background: linear-gradient(180deg, #d8dfda, #75817e) !important;
  height: 23px !important;
  opacity: 0.82;
  width: 24px !important;
}

.bottom-nav button.active {
  background: linear-gradient(180deg, rgba(241, 177, 58, 0.16), rgba(233, 111, 23, 0.04)) !important;
  color: var(--ui-gold-hot) !important;
}

.bottom-nav button.active::before {
  background: var(--ui-gold) !important;
  box-shadow: 0 0 12px rgba(241, 177, 58, 0.7);
  height: 2px !important;
  left: 18% !important;
  right: 18% !important;
}

.bottom-nav button.active span::before {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange)) !important;
  filter: drop-shadow(0 0 6px rgba(241, 177, 58, 0.46));
  opacity: 1;
}

/* Level select */
.level-screen {
  padding: 66px 10px 80px !important;
}

.level-summary {
  background:
    linear-gradient(90deg, rgba(233, 111, 23, 0.12), transparent 64%),
    var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 2px solid var(--ui-orange) !important;
  box-shadow: var(--ui-inner) !important;
  min-height: 46px !important;
  padding: 7px 9px !important;
}

.level-grid {
  gap: 7px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-top: 8px !important;
  padding: 0 1px 12px !important;
}

.level-grid button,
.level-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
    var(--ui-surface-strong) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner), 0 6px 14px rgba(0, 0, 0, 0.26) !important;
  clip-path: none !important;
  min-height: 73px !important;
  padding: 8px 6px !important;
}

.level-grid button::before,
.level-card::before {
  background: var(--ui-muted) !important;
  content: "";
  height: 2px;
  left: 8px;
  opacity: 0.34;
  position: absolute;
  right: 8px;
  top: 0;
}

.level-grid button.selected,
.level-card.selected {
  background:
    linear-gradient(180deg, rgba(241, 177, 58, 0.15), transparent 42%),
    #131819 !important;
  border-color: rgba(241, 177, 58, 0.88) !important;
  box-shadow: 0 0 0 1px rgba(241, 177, 58, 0.14), 0 0 18px rgba(233, 111, 23, 0.18) !important;
}

.level-grid button.selected::before,
.level-card.selected::before {
  background: var(--ui-gold) !important;
  opacity: 1;
}

.level-card strong,
.level-grid button strong {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
  font-size: 13px !important;
}

.level-card span,
.level-card small,
.level-grid button span,
.level-grid button small {
  color: var(--ui-muted) !important;
  font-size: 8px !important;
}

.level-actions {
  background: rgba(5, 8, 9, 0.96) !important;
  border-top: 1px solid rgba(241, 177, 58, 0.36) !important;
  bottom: 0 !important;
  left: 0 !important;
  padding: 9px 12px !important;
  right: 0 !important;
}

.level-actions button {
  background: linear-gradient(180deg, #5ee2d8, #198c8d 58%, #0d4e58) !important;
  border: 1px solid #9af6ec !important;
  box-shadow: var(--ui-inner), 0 8px 18px rgba(0, 0, 0, 0.36) !important;
  color: #06191b !important;
  font-size: 14px !important;
  min-height: 42px !important;
  text-shadow: 0 1px rgba(255, 255, 255, 0.36) !important;
}

/* Panel layout */
.panel-content {
  bottom: 66px !important;
  left: 8px !important;
  right: 8px !important;
  top: 64px !important;
}

.panel-screen[data-active-panel="character"] .panel-header {
  display: none !important;
}

.panel-screen[data-active-panel="character"] .panel-character {
  top: 0 !important;
}

.panel-character,
.panel-equipment,
.panel-shop,
.panel-base,
.panel-missions,
.panel-mail,
.panel-rank,
.panel-friends {
  background: transparent !important;
  padding: 0 2px 12px !important;
  scrollbar-color: rgba(241, 177, 58, 0.5) rgba(8, 12, 14, 0.7);
  scrollbar-width: thin;
}

/* Character */
.character-hero-board {
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.18), rgba(4, 6, 7, 0.72)),
    linear-gradient(110deg, rgba(85, 217, 239, 0.07), transparent 44%, rgba(233, 111, 23, 0.08)),
    #0d1214 !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner), 0 12px 26px rgba(0, 0, 0, 0.34) !important;
  clip-path: none !important;
  grid-template-columns: 50px minmax(0, 1fr) 138px !important;
  grid-template-rows: 68px 274px 43px !important;
  min-height: 395px !important;
  padding: 9px 8px 7px !important;
}

.character-hero-board::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 32px) !important;
  border: 0 !important;
  inset: 70px 144px 50px 56px !important;
}

.character-topline {
  min-height: 60px !important;
}

.character-titlebar b {
  color: var(--ui-text) !important;
  font: 900 17px/1 var(--ui-font-display) !important;
}

.character-titlebar em {
  background: linear-gradient(90deg, var(--ui-cyan), var(--ui-blue)) !important;
}

.character-currency-strip {
  align-self: start !important;
  margin-top: 2px !important;
}

.character-side-tools {
  gap: 6px !important;
}

.character-side-tools button {
  background: rgba(9, 14, 16, 0.86) !important;
  border: 1px solid rgba(241, 177, 58, 0.34) !important;
  color: var(--ui-text-soft) !important;
  font-size: 9px !important;
}

.panel-character .portrait-list {
  background: rgba(6, 10, 11, 0.78) !important;
  border: 1px solid var(--ui-line) !important;
  gap: 5px !important;
  padding: 4px !important;
}

.panel-character .portrait-list button {
  border: 1px solid rgba(164, 178, 178, 0.26) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, 0.42) !important;
}

.panel-character .portrait-list button.active {
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 0 1px rgba(241, 177, 58, 0.18), 0 0 12px rgba(233, 111, 23, 0.28) !important;
}

.panel-character-art {
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.62)) !important;
  height: 284px !important;
  width: min(240px, 120%) !important;
}

.panel-character-art::before,
.panel-character-art::after {
  background: linear-gradient(90deg, transparent, rgba(85, 217, 239, 0.68), transparent) !important;
  height: 1px !important;
}

.panel-character .stat-stack {
  background:
    linear-gradient(90deg, rgba(233, 111, 23, 0.86), rgba(123, 43, 8, 0.92)),
    #15100d !important;
  border: 1px solid rgba(255, 212, 118, 0.58) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42) !important;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%) !important;
}

.panel-character .stat-stack strong {
  color: #fff5dd !important;
  font-family: var(--ui-font-display) !important;
  font-size: 20px !important;
}

.panel-character .equip-slots {
  gap: 6px !important;
  grid-auto-rows: 82px !important;
}

.panel-character .equip-slots button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    #111719 !important;
  border: 1px solid rgba(172, 184, 180, 0.3) !important;
  box-shadow: var(--ui-inner), 0 5px 12px rgba(0, 0, 0, 0.28) !important;
  clip-path: none !important;
}

.panel-character .equip-slots button.equipped {
  border-color: rgba(85, 217, 239, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 217, 239, 0.16), 0 0 14px rgba(85, 217, 239, 0.14) !important;
}

.panel-character .equip-slots button.socket-complete {
  border-color: var(--ui-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(241, 177, 58, 0.18), 0 0 16px rgba(233, 111, 23, 0.2) !important;
}

.gear-slot-name {
  color: var(--ui-text-soft) !important;
  font-size: 9px !important;
}

.gear-set-badge {
  color: var(--ui-gold-hot) !important;
}

.character-plan-tabs {
  background: rgba(7, 11, 13, 0.92) !important;
  border: 1px solid var(--ui-line) !important;
}

.character-plan-tabs button,
.character-plan-tabs strong {
  background: #151b1d !important;
  color: var(--ui-muted) !important;
}

.character-plan-tabs button.active {
  background: linear-gradient(180deg, var(--ui-gold), var(--ui-orange)) !important;
  color: #2a1405 !important;
}

.character-forge-button,
.character-merge-button,
.gold-action,
.shop-feature button,
.shop-grid article button,
.bag-detail button:not(:disabled) {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange) 60%, var(--ui-orange-deep)) !important;
  border: 1px solid rgba(255, 223, 143, 0.82) !important;
  box-shadow: var(--ui-inner), 0 7px 16px rgba(0, 0, 0, 0.35) !important;
  color: #271205 !important;
  text-shadow: 0 1px rgba(255, 239, 196, 0.55) !important;
}

.panel-character .character-growth,
.character-backpack {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner) !important;
}

.panel-character .character-growth {
  border-left: 2px solid var(--ui-orange) !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
}

.character-growth b,
.character-backpack-head b {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
}

.character-growth span,
.character-growth p {
  color: var(--ui-muted) !important;
}

.panel-actions {
  gap: 7px !important;
}

.panel-actions button {
  border-radius: 3px !important;
  min-height: 38px !important;
}

.green-action {
  background: linear-gradient(180deg, #73dc77, #27893c 62%, #145126) !important;
  border-color: rgba(163, 246, 169, 0.72) !important;
}

.blue-action {
  background: linear-gradient(180deg, #64d5ef, #247ca3 62%, #12435c) !important;
  border-color: rgba(142, 230, 250, 0.72) !important;
}

.character-backpack {
  margin-top: 8px !important;
}

.character-backpack-head {
  background: rgba(255, 255, 255, 0.018) !important;
  border-bottom: 1px solid rgba(241, 177, 58, 0.2) !important;
  grid-template-columns: minmax(0, 1fr) 82px 108px !important;
  padding: 7px !important;
}

.character-backpack-head b {
  font-size: 15px !important;
}

.character-backpack-head b::before {
  background: var(--ui-orange) !important;
  box-shadow: none !important;
  height: 7px !important;
  width: 3px !important;
}

.character-backpack-head button {
  background: #161d1f !important;
  border: 1px solid var(--ui-line) !important;
}

.backpack-grid {
  gap: 5px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  padding: 7px !important;
}

.bag-item {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 34%),
    #161719 !important;
  border: 1px solid rgba(175, 184, 180, 0.3) !important;
  box-shadow: inset 0 -12px 18px rgba(0, 0, 0, 0.34) !important;
  clip-path: none !important;
  min-height: 70px !important;
}

.bag-item.selected,
.bag-item.equipped {
  border-color: var(--ui-cyan) !important;
  box-shadow: inset 0 0 0 1px rgba(85, 217, 239, 0.15), 0 0 12px rgba(85, 217, 239, 0.16) !important;
}

.bag-detail {
  background: rgba(8, 13, 15, 0.96) !important;
  border: 1px solid var(--ui-line) !important;
  border-left: 2px solid var(--ui-cyan) !important;
  box-shadow: var(--ui-inner) !important;
  clip-path: none !important;
}

.bag-detail::before {
  display: none !important;
}

.bag-detail-icon {
  background: #141b1d !important;
  border: 1px solid rgba(85, 217, 239, 0.45) !important;
}

.bag-detail b {
  color: var(--ui-text) !important;
}

.bag-detail span,
.bag-detail p,
.formal-detail-row i {
  color: var(--ui-muted) !important;
}

.bag-tabs {
  background: #070b0c !important;
  border-top: 1px solid rgba(241, 177, 58, 0.26) !important;
}

.bag-tabs button {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-muted) !important;
}

.bag-tabs button.active {
  background: linear-gradient(180deg, rgba(241, 177, 58, 0.17), transparent) !important;
  color: var(--ui-gold-hot) !important;
}

/* Equipment */
.panel-equipment {
  gap: 8px !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
}

.weapon-card {
  background:
    linear-gradient(120deg, rgba(233, 111, 23, 0.11), transparent 42%),
    var(--ui-surface-strong) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner), 0 12px 28px rgba(0, 0, 0, 0.34) !important;
  clip-path: none !important;
}

.weapon-card::before {
  border: 0 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 28%) !important;
}

.weapon-art {
  background-color: #0b1012 !important;
  border-bottom: 1px solid rgba(241, 177, 58, 0.24) !important;
}

.weapon-card b,
.equipment-loadout b,
.equipment-materials b,
.equipment-pack > b {
  color: var(--ui-text) !important;
  font-family: var(--ui-font-display) !important;
}

.weapon-card > div:last-child span,
.weapon-card p,
.equipment-loadout span,
.equipment-materials span {
  color: var(--ui-text-soft) !important;
}

.weapon-list {
  gap: 6px !important;
}

.weapon-list button {
  background-color: #101719 !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner) !important;
}

.weapon-list button.active {
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 14px rgba(233, 111, 23, 0.2) !important;
}

.equipment-loadout {
  gap: 6px !important;
}

.equipment-loadout article,
.equipment-materials,
.equipment-pack {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner) !important;
}

.equipment-loadout article {
  border-left: 2px solid rgba(85, 217, 239, 0.52) !important;
}

.equipment-materials i {
  background: #050809 !important;
  border-color: rgba(241, 177, 58, 0.28) !important;
}

.equipment-materials em {
  background: linear-gradient(90deg, var(--ui-orange), var(--ui-gold-hot)) !important;
}

.equipment-pack i {
  background-color: #111719 !important;
  border: 1px solid var(--ui-line) !important;
  clip-path: none !important;
}

/* Shop */
.panel-shop {
  gap: 8px !important;
}

.shop-tabs {
  background: #070b0d !important;
  border: 1px solid var(--ui-line) !important;
  gap: 2px !important;
  padding: 3px !important;
}

.shop-tabs button {
  background: transparent !important;
  border: 0 !important;
  color: var(--ui-muted) !important;
  min-height: 34px !important;
}

.shop-tabs button.active {
  background: linear-gradient(180deg, rgba(241, 177, 58, 0.2), rgba(233, 111, 23, 0.06)) !important;
  border-bottom: 2px solid var(--ui-gold) !important;
  color: var(--ui-gold-hot) !important;
}

.shop-feature {
  background:
    linear-gradient(90deg, rgba(5, 8, 9, 0.96) 0 48%, rgba(5, 8, 9, 0.24) 76%),
    url("./assets/battle/weapon-gatling.png") 95% 52% / 58% auto no-repeat,
    linear-gradient(120deg, #25160c, #0c1113 60%) !important;
  border: 1px solid rgba(241, 177, 58, 0.5) !important;
  box-shadow: var(--ui-inner), 0 12px 26px rgba(0, 0, 0, 0.38) !important;
  clip-path: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 140px !important;
  padding: 16px 46% 14px 15px !important;
}

.shop-feature::before {
  display: none !important;
}

.shop-feature::after {
  background: linear-gradient(90deg, transparent 50%, rgba(233, 111, 23, 0.08)) !important;
}

.shop-feature em {
  color: var(--ui-cyan) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.shop-feature b {
  color: var(--ui-text) !important;
  font: 900 20px/1.12 var(--ui-font-display) !important;
}

.shop-feature span {
  color: var(--ui-muted) !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}

.shop-feature button {
  align-self: flex-start !important;
  min-height: 34px !important;
  width: 104px !important;
}

.shop-feature em,
.shop-feature b,
.shop-feature span,
.shop-feature button {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
  margin: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  position: relative;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  z-index: 1;
}

.shop-feature em,
.shop-feature b {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.shop-grid {
  gap: 7px !important;
}

.shop-grid article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    var(--ui-surface-strong) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner), 0 7px 16px rgba(0, 0, 0, 0.3) !important;
  clip-path: none !important;
  min-height: 176px !important;
  padding: 9px !important;
}

.shop-grid article::before {
  display: none !important;
}

.shop-grid article i {
  background:
    url("./assets/items/shop-pack.svg") center / 72% 72% no-repeat,
    radial-gradient(circle at 50% 46%, rgba(241, 177, 58, 0.18), transparent 54%),
    #0a0f11 !important;
  border: 1px solid rgba(241, 177, 58, 0.22) !important;
  min-height: 78px !important;
  transform: none !important;
}

.shop-grid article[data-shop-item="weapon_pack"] i,
.shop-grid article[data-shop-item="fire_calibration"] i {
  background:
    url("./assets/battle/weapon-cannon.png") center / 96% auto no-repeat,
    #0a0f11 !important;
}

.shop-grid article[data-shop-item="frost_core"] i {
  background:
    url("./assets/items/gem-prism.svg") center / 54% 54% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(85, 217, 239, 0.17), transparent 54%),
    #0a0f11 !important;
}

.shop-grid article b {
  color: var(--ui-text) !important;
  font-size: 12px !important;
}

.shop-grid article span {
  color: var(--ui-gold-hot) !important;
  font-size: 10px !important;
}

.shop-grid article button {
  min-height: 31px !important;
}

/* Base and auxiliary lists */
.panel-base,
.panel-missions,
.panel-mail,
.panel-rank,
.panel-friends {
  gap: 8px !important;
}

.panel-base {
  background:
    linear-gradient(180deg, rgba(5, 8, 9, 0.72), rgba(5, 8, 9, 0.94) 68%),
    url("./assets/battle/battle-scene.png") center bottom / cover no-repeat !important;
  border: 1px solid rgba(164, 178, 178, 0.13) !important;
  min-height: calc(100% - 4px) !important;
  padding: 7px 7px 104px !important;
}

.base-status,
.base-grid article,
.icon-board,
.mission-card,
.mission-list article,
.mail-list article,
.rank-podium article,
.rank-list article,
.friend-tools button,
.friend-list article {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: var(--ui-inner), 0 7px 16px rgba(0, 0, 0, 0.24) !important;
  clip-path: none !important;
}

.base-status,
.mission-card {
  border-left: 2px solid var(--ui-orange) !important;
}

.base-grid {
  gap: 7px !important;
}

.base-grid article {
  border-top-color: rgba(241, 177, 58, 0.3) !important;
  min-height: 94px !important;
}

.base-grid article b,
.base-status b,
.icon-board h3,
.mission-card b,
.mission-list b,
.mail-list b,
.rank-list b,
.friend-list b {
  color: var(--ui-text) !important;
}

.base-grid article span,
.base-status span,
.mission-card span,
.mission-list span,
.mail-list span,
.rank-list i,
.friend-list span {
  color: var(--ui-muted) !important;
}

.icon-board {
  padding: 10px !important;
}

.icon-grid {
  gap: 7px !important;
}

.icon-grid i {
  background: #0c1214 !important;
  border: 1px solid rgba(85, 217, 239, 0.3) !important;
  color: var(--ui-text-soft) !important;
  box-shadow: inset 0 0 12px rgba(85, 217, 239, 0.05) !important;
}

.rank-podium article.first {
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 18px rgba(233, 111, 23, 0.16) !important;
}

/* Battle HUD */
.top-hud {
  background:
    linear-gradient(90deg, rgba(4, 7, 8, 0.94), rgba(4, 7, 8, 0.64) 72%, transparent),
    linear-gradient(180deg, rgba(4, 7, 8, 0.96), rgba(4, 7, 8, 0.08)) !important;
  border-bottom: 1px solid rgba(241, 177, 58, 0.24) !important;
  gap: 6px !important;
  grid-template-columns: 27px 50px minmax(0, 1fr) !important;
  min-height: 47px !important;
  padding: 5px 7px 4px !important;
}

.icon-btn,
.speed-btn {
  background: rgba(10, 16, 18, 0.92) !important;
  border: 1px solid rgba(164, 178, 178, 0.36) !important;
  border-radius: 3px !important;
  box-shadow: var(--ui-inner) !important;
  clip-path: none !important;
  color: var(--ui-text-soft) !important;
}

.speed-btn {
  color: var(--ui-gold-hot) !important;
}

.battle-clock b {
  color: var(--ui-text-soft) !important;
  font: 800 9px/1 var(--ui-font-display) !important;
}

.stage-title {
  align-content: center !important;
  justify-items: start !important;
  min-height: 36px !important;
  text-align: left !important;
}

.stage-title strong {
  color: var(--ui-text) !important;
  font: 900 11px/1 var(--ui-font-display) !important;
  max-width: 100% !important;
}

.stage-title span,
.stage-title small {
  color: var(--ui-text-soft) !important;
  font-size: 8px !important;
}

.stage-title i {
  background: rgba(5, 8, 9, 0.84) !important;
  border: 1px solid rgba(85, 217, 239, 0.36) !important;
  height: 3px !important;
  margin: 2px 0 !important;
  width: min(130px, 94%) !important;
}

.stage-title em {
  background: linear-gradient(90deg, var(--ui-blue), var(--ui-cyan)) !important;
}

.right-hud {
  gap: 5px !important;
  right: 6px !important;
  top: 54px !important;
}

.right-hud .hero-card {
  background: rgba(7, 11, 13, 0.88) !important;
  border: 1px solid rgba(241, 177, 58, 0.36) !important;
  box-shadow: var(--ui-inner) !important;
  clip-path: none !important;
  padding: 3px !important;
  width: 38px !important;
}

.round-slot {
  background: rgba(7, 11, 13, 0.86) !important;
  border: 1px solid rgba(164, 178, 178, 0.38) !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  height: 33px !important;
  width: 33px !important;
}

.round-slot .skill-art {
  height: 29px !important;
  width: 29px !important;
}

.round-slot .skill-level {
  background: #0a0e10 !important;
  border: 1px solid rgba(241, 177, 58, 0.5) !important;
  color: var(--ui-gold-hot) !important;
}

.bottom-fort {
  background: linear-gradient(180deg, transparent, rgba(4, 7, 8, 0.48) 35%, rgba(4, 7, 8, 0.9)) !important;
  border: 0 !important;
  bottom: 5px !important;
  box-shadow: none !important;
  transform: scale(0.84) !important;
  transform-origin: center bottom !important;
}

.base-hp {
  background: rgba(5, 9, 10, 0.82) !important;
  border: 1px solid rgba(164, 178, 178, 0.28) !important;
}

.green-hp {
  background: #07100a !important;
  border: 1px solid rgba(151, 239, 155, 0.58) !important;
  box-shadow: 0 0 10px rgba(99, 211, 109, 0.12) !important;
  height: 9px !important;
}

.green-hp > div {
  background: linear-gradient(90deg, #32a84a, #75e77e) !important;
}

/* Skill selection and result */
.skill-modal,
.result-modal,
.fake-pay-modal,
.feedback-modal,
.equipment-detail-modal,
.cloud-account-modal {
  background: rgba(2, 4, 5, 0.78) !important;
  backdrop-filter: blur(5px);
}

.skill-modal {
  align-items: end !important;
  padding: 0 10px 102px !important;
}

.skill-panel {
  background:
    linear-gradient(180deg, rgba(233, 111, 23, 0.08), transparent 28%),
    rgba(8, 13, 15, 0.97) !important;
  border: 1px solid rgba(241, 177, 58, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: var(--ui-shadow), var(--ui-inner) !important;
  max-width: 390px !important;
  padding: 11px 10px 12px !important;
}

.skill-kicker {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange)) !important;
  border: 0 !important;
  border-radius: 2px !important;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%) !important;
  color: #2b1506 !important;
  font: 900 12px/1 var(--ui-font-display) !important;
  margin-bottom: 5px !important;
  padding: 5px 18px !important;
  text-shadow: none !important;
}

.skill-panel h2 {
  color: var(--ui-text-soft) !important;
  font-size: 10px !important;
  margin: 0 0 8px !important;
}

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

.skill-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
    #101719 !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 3px !important;
  clip-path: none !important;
  min-height: 91px !important;
  padding: 7px 4px 6px !important;
}

.skill-card:hover,
.skill-card:focus-visible {
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 16px rgba(233, 111, 23, 0.2) !important;
}

.skill-card .skill-icon {
  border: 1px solid rgba(241, 177, 58, 0.34) !important;
  height: 50px !important;
  width: 50px !important;
}

.skill-card .skill-copy strong {
  color: var(--ui-text) !important;
  font-size: 10px !important;
}

.skill-card .skill-copy em {
  color: var(--ui-gold-hot) !important;
  font-size: 7px !important;
}

.skill-refresh {
  background: #11191b !important;
  border: 1px solid rgba(85, 217, 239, 0.5) !important;
  color: var(--ui-cyan) !important;
  min-height: 30px !important;
}

.result-panel,
.fake-pay-panel,
.feedback-panel,
.cloud-account-panel,
.test-panel {
  background:
    linear-gradient(180deg, rgba(233, 111, 23, 0.08), transparent 26%),
    var(--ui-surface-strong) !important;
  border: 1px solid rgba(241, 177, 58, 0.48) !important;
  border-radius: 4px !important;
  box-shadow: var(--ui-shadow), var(--ui-inner) !important;
  clip-path: none !important;
  color: var(--ui-text) !important;
}

.result-panel span,
.fake-pay-panel span,
.feedback-panel span,
.cloud-account-panel > span {
  color: var(--ui-gold-hot) !important;
}

.result-panel p,
.fake-pay-panel p,
.feedback-panel label,
.cloud-account-panel p,
.cloud-account-panel small {
  color: var(--ui-muted) !important;
}

.result-actions button,
.fake-pay-actions button,
.feedback-actions button,
.cloud-account-actions button,
.cloud-recover-form button {
  background: #151d1f !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-soft) !important;
}

.result-actions button:last-child,
.fake-pay-actions button:last-child,
.feedback-actions button:last-child {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange) 62%, var(--ui-orange-deep)) !important;
  border-color: rgba(255, 223, 143, 0.78) !important;
  color: #281305 !important;
}

/* Gear detail modal now matches the rest of the game. */
.equipment-detail-modal {
  padding: 20px 18px 78px !important;
}

.equipment-detail-card {
  background: var(--ui-surface-strong) !important;
  border: 1px solid rgba(241, 177, 58, 0.5) !important;
  box-shadow: var(--ui-shadow), var(--ui-inner) !important;
  color: var(--ui-text) !important;
  max-width: 342px !important;
  width: min(342px, 100%) !important;
}

.equipment-detail-hero {
  background:
    radial-gradient(circle at 84% 42%, rgba(241, 177, 58, 0.15), transparent 22%),
    linear-gradient(90deg, rgba(233, 111, 23, 0.12), transparent 62%),
    #11191b !important;
  border-bottom: 1px solid rgba(241, 177, 58, 0.32) !important;
}

.equipment-detail-icon {
  background:
    var(--gear-image) center / 78% 78% no-repeat,
    #0a0f11 !important;
  border: 1px solid rgba(241, 177, 58, 0.46) !important;
}

.equipment-detail-icon b {
  background: var(--ui-orange) !important;
}

.equipment-detail-hero strong {
  color: var(--ui-text) !important;
  font: 900 19px/1 var(--ui-font-display) !important;
}

.equipment-detail-hero span,
.equipment-detail-hero small {
  color: var(--ui-text-soft) !important;
}

.equipment-detail-ring {
  background:
    radial-gradient(circle, rgba(255, 220, 131, 0.78) 0 10%, rgba(241, 177, 58, 0.18) 11% 28%, transparent 30%),
    conic-gradient(from 20deg, transparent, rgba(241, 177, 58, 0.8), transparent 42%) !important;
}

.equipment-detail-tabs,
.equipment-detail-body,
.equipment-detail-actions {
  background: #0b1113 !important;
}

.equipment-detail-tabs {
  border-bottom: 1px solid var(--ui-line) !important;
}

.equipment-detail-tabs button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--ui-muted) !important;
  font-size: 13px !important;
  min-height: 38px !important;
  text-shadow: none !important;
}

.equipment-detail-tabs button.active {
  background: rgba(241, 177, 58, 0.08) !important;
  border-bottom-color: var(--ui-gold) !important;
  color: var(--ui-gold-hot) !important;
}

.equipment-gem-row,
.equipment-attr-row {
  background: #12191b !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-soft) !important;
}

.equipment-gem-row.active {
  border-color: var(--ui-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(241, 177, 58, 0.12) !important;
}

.equipment-gem-icon {
  background:
    var(--gem-image, none) center / 82% 82% no-repeat,
    #080d0f !important;
  border: 1px solid rgba(241, 177, 58, 0.34) !important;
}

.equipment-gem-row.empty .equipment-gem-icon {
  background: #0a0f11 !important;
  color: var(--ui-muted) !important;
}

.equipment-gem-row b,
.equipment-attr-row b {
  color: var(--ui-text) !important;
}

.equipment-gem-row i,
.equipment-gem-row em,
.equipment-attr-row i,
.equipment-detail-actions small {
  color: var(--ui-muted) !important;
}

.equipment-detail-actions {
  border-top: 1px solid var(--ui-line) !important;
}

.equipment-detail-forge {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange) 62%, var(--ui-orange-deep)) !important;
  border: 1px solid rgba(255, 225, 148, 0.78) !important;
  border-radius: 3px !important;
  box-shadow: var(--ui-inner), 0 8px 18px rgba(0, 0, 0, 0.38) !important;
  color: #281305 !important;
  font-size: 17px !important;
  min-height: 43px !important;
  text-shadow: 0 1px rgba(255, 242, 198, 0.52) !important;
}

.equipment-detail-close,
.cloud-account-close {
  background: #101719 !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-soft) !important;
}

/* Fashion page */
.fashion-page {
  background:
    linear-gradient(180deg, rgba(233, 111, 23, 0.05), transparent 32%),
    #070b0d !important;
}

.fashion-page::before {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 36px) !important;
}

.fashion-page-top,
.fashion-preview,
.fashion-page-block,
.fashion-bonus-panel,
.fashion-page-actions {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
}

.fashion-preview-copy b,
.fashion-page-block header b,
.fashion-bonus-panel b {
  color: var(--ui-text) !important;
}

.fashion-preview-copy span,
.fashion-preview-copy i,
.fashion-page-block header span,
.fashion-bonus-panel p {
  color: var(--ui-muted) !important;
}

.fashion-character-list button,
.fashion-style-list button {
  background: #111719 !important;
  border-color: var(--ui-line) !important;
}

.fashion-character-list button.active,
.fashion-style-list button.active {
  border-color: var(--ui-gold) !important;
  box-shadow: 0 0 14px rgba(233, 111, 23, 0.18) !important;
}

.fashion-equip-button {
  background: linear-gradient(180deg, var(--ui-gold-hot), var(--ui-orange) 62%, var(--ui-orange-deep)) !important;
  border: 1px solid rgba(255, 225, 148, 0.78) !important;
  border-radius: 3px !important;
  color: #281305 !important;
}

.audio-toggle,
.cloud-account-button {
  background: rgba(8, 13, 15, 0.92) !important;
  border-color: rgba(164, 178, 178, 0.34) !important;
  box-shadow: var(--ui-inner), 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

.audio-toggle {
  border-radius: 50% !important;
  color: var(--ui-gold-hot) !important;
}

.cloud-account-panel strong,
.cloud-recover-form input,
.feedback-panel input,
.feedback-panel textarea {
  background: #080d0f !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text) !important;
}

html[data-runtime-platform="app"] .test-panel-toggle,
html[data-runtime-platform="wechat-miniprogram"] .test-panel-toggle {
  display: none !important;
}

.toast {
  background: rgba(8, 13, 15, 0.96) !important;
  border: 1px solid rgba(241, 177, 58, 0.46) !important;
  border-radius: 3px !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48) !important;
  color: var(--ui-text) !important;
}

@media (max-height: 780px) {
  .hub-brand {
    top: 142px;
  }

  .hub-brand strong {
    font-size: 24px;
  }

  .pass-card {
    min-height: 54px !important;
  }

  .battle-button {
    bottom: 70px !important;
    height: 52px !important;
  }

  .character-hero-board {
    grid-template-rows: 61px 238px 40px !important;
    min-height: 348px !important;
  }

  .panel-character-art {
    height: 246px !important;
  }

  .panel-character .equip-slots {
    grid-auto-rows: 71px !important;
  }

  .shop-feature {
    min-height: 116px !important;
  }

  .shop-grid article {
    min-height: 150px !important;
  }

  .skill-modal {
    padding-bottom: 80px !important;
  }
}

@media (max-width: 430px) {
  .shell {
    padding: 0 !important;
  }

  .phone {
    border-left: 0 !important;
    border-right: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}