/* V1.27Beta-action-feedback1: final UI feedback overrides. */
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.chosen-action {
  filter: saturate(1.16) brightness(1.1) !important;
  opacity: 1 !important;
  box-shadow:
    0 0 0 2px rgba(171, 255, 151, 0.82),
    0 0 18px rgba(72, 255, 120, 0.42),
    0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

/* ABSOLUTE EOF V1.27Beta-battle-surface-controls1: fixed battle cloth, clean action panels, and scoped utility buttons. */
html body:not(.maintenance-mode) {
  --battle-visible-surface: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-surface-controls1") !important;
  --battle-final-surface: var(--battle-visible-surface) !important;
  --battle-stage-art: var(--battle-visible-surface) !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(231, 245, 242, 0.12)),
    var(--battle-visible-surface) center center / cover no-repeat fixed,
    #eef8f5 !important;
  background-color: #eef8f5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(231, 245, 242, 0.08)),
    var(--battle-visible-surface) center center / cover no-repeat !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden],
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
  right: 82px !important;
  bottom: 12px !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
  right: 14px !important;
  bottom: 12px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
  --battle-mini-control: clamp(50px, 4.2vw, 58px);
  --battle-mini-gap: 8px;
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: var(--battle-mini-control) !important;
  height: var(--battle-mini-control) !important;
  min-width: var(--battle-mini-control) !important;
  min-height: var(--battle-mini-control) !important;
  max-width: var(--battle-mini-control) !important;
  max-height: var(--battle-mini-control) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 1400 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .language-toggle.language-toggle {
  right: max(12px, env(safe-area-inset-right)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .music-toggle.music-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + var(--battle-mini-control) + var(--battle-mini-gap)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + (var(--battle-mini-control) + var(--battle-mini-gap)) * 2) !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle) img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 8px rgba(20, 37, 40, 0.32))
    drop-shadow(0 0 10px rgba(77, 184, 191, 0.18)) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 66% !important;
  height: 66% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(69, 132, 142, 0.54) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 72% 28%, #fff2a8 0 8%, transparent 9%),
    linear-gradient(135deg, transparent 0 42%, rgba(90, 190, 195, 0.92) 43% 57%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(177, 226, 231, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 9px rgba(22, 46, 50, 0.22) !important;
  filter: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(820px, 66vw) !important;
  max-width: calc(100vw - 300px) !important;
  min-width: min(610px, calc(100vw - 300px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 1320 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: clamp(86px, 8.2vw, 116px) !important;
  max-height: none !important;
  aspect-ratio: 1983 / 793 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(28, 48, 52, 0.22)) !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon * {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card span {
  position: absolute !important;
  left: var(--action-template-left, 34.921875%) !important;
  top: var(--action-template-top, 22.916667%) !important;
  width: var(--action-template-width, 64.6875%) !important;
  height: var(--action-template-height, 48.333333%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 4% !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(17px, 1.85vw, 24px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.84),
    0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action {
  filter:
    drop-shadow(0 11px 17px rgba(28, 48, 52, 0.24))
    drop-shadow(0 0 13px rgba(90, 220, 156, 0.34)) !important;
  outline: 2px solid rgba(122, 246, 174, 0.82) !important;
  outline-offset: 2px !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 72px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card {
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    aspect-ratio: auto !important;
    background-size: contain !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card span {
    font-size: clamp(13px, 3.7vw, 17px) !important;
    padding: 0 3% !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
    --battle-mini-control: 48px;
    --battle-mini-gap: 6px;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
    right: 62px !important;
    bottom: 8px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
    right: 8px !important;
    bottom: 8px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-character-select-rollback1: remove the oversized page backing; keep only thin gold card frames. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(36px, 5vw, 70px) !important;
    --select-frame-inner-y: clamp(44px, 5.4vw, 72px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(1180px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: min(72vh, calc(100dvh - 168px)) !important;
    max-height: none !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
}

/* TRUE EOF V1.27Beta-battle-polish-rhasta1: visible battle wallpaper, clean top controls, portrait-safe fighter frames. */
html body:not(.maintenance-mode),
html body:not(.maintenance-mode).battle-controls-active {
  --battle-visible-surface: var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battle-polish-rhasta1")) !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app > .arena {
  background:
    linear-gradient(180deg, rgba(255, 255, 248, 0.08), rgba(217, 224, 213, 0.1)),
    var(--battle-visible-surface) center center / cover no-repeat fixed,
    #e9eee5 !important;
  background-color: #e9eee5 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden]) {
  --battle-final-surface: var(--battle-visible-surface) !important;
  --battle-stage-art: var(--battle-visible-surface) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.06), rgba(210, 220, 211, 0.08)),
    var(--battle-visible-surface) center center / cover no-repeat !important;
  background-color: #e9eee5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden]) .fighters::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 260 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(64vw, 520px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button {
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(75, 88, 86, 0.32) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(249, 253, 249, 0.94), rgba(219, 231, 222, 0.88)) !important;
  color: #20312f !important;
  -webkit-text-fill-color: #20312f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 6px 15px rgba(34, 49, 45, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter {
  padding: 6px !important;
  border: 1px solid color-mix(in srgb, var(--duel-side-accent, #67c6d2) 46%, rgba(255, 255, 255, 0.38)) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)),
    rgba(12, 23, 25, 0.46) !important;
  box-shadow:
    0 14px 30px rgba(20, 33, 34, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face {
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(4, 9, 11, 0.18)),
    rgba(8, 17, 20, 0.2) !important;
  box-shadow:
    inset 0 0 0 1px rgba(237, 252, 252, 0.1),
    inset 0 -42px 58px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar {
  background-size: var(--art-size, contain), cover, cover !important;
  background-position: var(--art-position, center bottom), center center, center center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(8, 17, 20, 0.22) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar[data-character="Rhasta"] {
  --art-size: cover !important;
  --art-position: center center !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art[data-character="Rhasta"] {
  --team-art-size: cover !important;
  --team-art-position: center center !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
  isolation: isolate !important;
  position: fixed !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: clamp(44px, 4.1vw, 54px) !important;
  height: clamp(44px, 4.1vw, 54px) !important;
  min-width: clamp(44px, 4.1vw, 54px) !important;
  min-height: clamp(44px, 4.1vw, 54px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  z-index: 180 !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-battle-polish-rhasta1") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 13px rgba(15, 30, 34, 0.22)) !important;
  transform: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
    background:
      linear-gradient(180deg, rgba(255, 255, 250, 0.04), rgba(210, 220, 211, 0.07)),
      var(--battle-visible-surface) center center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility {
    top: max(7px, env(safe-area-inset-top)) !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    gap: 6px !important;
    z-index: 260 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button {
    min-width: 56px !important;
    min-height: 27px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
  html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
    right: max(7px, env(safe-area-inset-right)) !important;
    bottom: calc(max(7px, env(safe-area-inset-bottom)) + 52px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
  }
}

/* TRUE FINAL EOF V1.27Beta-battle-surface-controls2: last word for battle background, action buttons, and utility controls. */
html body:not(.maintenance-mode) {
  --battle-visible-surface: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-surface-controls2") !important;
  --battle-final-surface: var(--battle-visible-surface) !important;
  --battle-stage-art: var(--battle-visible-surface) !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(232, 246, 243, 0.1)),
    var(--battle-visible-surface) center center / cover no-repeat fixed,
    #eef8f5 !important;
  background-color: #eef8f5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden],
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
  right: 14px !important;
  bottom: 12px !important;
  width: 64px !important;
  height: 64px !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
  right: 82px !important;
  bottom: 12px !important;
  width: 58px !important;
  height: 58px !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
  --battle-mini-control: clamp(50px, 4.2vw, 58px);
  --battle-mini-gap: 8px;
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: var(--battle-mini-control) !important;
  height: var(--battle-mini-control) !important;
  min-width: var(--battle-mini-control) !important;
  min-height: var(--battle-mini-control) !important;
  max-width: var(--battle-mini-control) !important;
  max-height: var(--battle-mini-control) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 1400 !important;
}

html body:not(.maintenance-mode).battle-controls-active > .language-toggle.language-toggle {
  right: max(12px, env(safe-area-inset-right)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .music-toggle.music-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + var(--battle-mini-control) + var(--battle-mini-gap)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + (var(--battle-mini-control) + var(--battle-mini-gap)) * 2) !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 66% !important;
  height: 66% !important;
  border: 1px solid rgba(69, 132, 142, 0.54) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 72% 28%, #fff2a8 0 8%, transparent 9%),
    linear-gradient(135deg, transparent 0 42%, rgba(90, 190, 195, 0.92) 43% 57%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(177, 226, 231, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 9px rgba(22, 46, 50, 0.22) !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(820px, 66vw) !important;
  max-width: calc(100vw - 300px) !important;
  min-width: min(610px, calc(100vw - 300px)) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 1320 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card {
  width: 100% !important;
  height: auto !important;
  min-height: clamp(86px, 8.2vw, 116px) !important;
  aspect-ratio: 1983 / 793 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(28, 48, 52, 0.22)) !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon * {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
  position: absolute !important;
  left: var(--action-template-left, 34.921875%) !important;
  top: var(--action-template-top, 22.916667%) !important;
  width: var(--action-template-width, 64.6875%) !important;
  height: var(--action-template-height, 48.333333%) !important;
  padding: 0 4% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  font-size: clamp(17px, 1.85vw, 24px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.84), 0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action {
  filter: drop-shadow(0 11px 17px rgba(28, 48, 52, 0.24)) drop-shadow(0 0 13px rgba(90, 220, 156, 0.34)) !important;
  outline: 2px solid rgba(122, 246, 174, 0.82) !important;
  outline-offset: 2px !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 72px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 68px !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    aspect-ratio: auto !important;
    background-size: contain !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
    font-size: clamp(13px, 3.7vw, 17px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
    --battle-mini-control: 48px;
    --battle-mini-gap: 6px;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
    right: 8px !important;
    bottom: 8px !important;
    width: 50px !important;
    height: 50px !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
    right: 62px !important;
    bottom: 8px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-cleanframe1: centered selector, visible portraits, no black name mask, faction-ready card frames. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app > .arena {
  width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-gap: clamp(16px, 1.35vw, 22px) !important;
  --select-card-w: clamp(162px, 11.2vw, 196px) !important;
  --select-card-h: calc(var(--select-card-w) * 1.5) !important;
  --select-frame-outset-x: clamp(13px, 0.95vw, 18px) !important;
  --select-frame-outset-y: clamp(18px, 1.2vw, 24px) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(10px, 1.2vh, 16px) clamp(12px, 1.5vw, 22px) !important;
  gap: clamp(8px, 1.1vh, 14px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
  position: relative !important;
  z-index: 18 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  justify-self: center !important;
  width: min(920px, calc(100vw - 48px)) !important;
  min-height: 52px !important;
  margin: 0 auto !important;
  padding: 8px clamp(18px, 2vw, 30px) !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(125, 190, 232, 0.52) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(219, 240, 252, 0.78)),
    rgba(235, 248, 255, 0.9) !important;
  box-shadow:
    0 14px 28px rgba(12, 34, 56, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line > * {
  position: relative !important;
  z-index: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectStatusText {
  justify-self: center !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(19px, 1.65vw, 26px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectRoomText {
  justify-self: start !important;
  color: #27445d !important;
  -webkit-text-fill-color: #27445d !important;
  font-weight: 900 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #leaveCharacterSelect {
  justify-self: end !important;
  min-width: 122px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  z-index: 12 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  width: min(1200px, calc(100vw - 48px)) !important;
  height: min(810px, calc(100dvh - 128px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100dvh - 128px) !important;
  margin: 0 auto !important;
  padding: clamp(70px, 6.2vw, 98px) clamp(64px, 5.3vw, 92px) clamp(58px, 4.7vw, 80px) !important;
  border: 1px solid rgba(167, 210, 241, 0.34) !important;
  border-radius: clamp(22px, 2.2vw, 34px) !important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.9), rgba(228, 244, 252, 0.76) 54%, rgba(214, 232, 244, 0.52) 100%),
    linear-gradient(90deg, rgba(224, 188, 100, 0.14), transparent 16% 84%, rgba(75, 203, 231, 0.14)),
    rgba(237, 248, 255, 0.66) !important;
  box-shadow:
    0 28px 58px rgba(8, 27, 47, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    inset 0 -36px 62px rgba(106, 160, 202, 0.1) !important;
  filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before {
  inset: clamp(12px, 1.4vw, 20px) !important;
  border: 1px solid rgba(194, 163, 88, 0.28) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(96, 209, 255, 0.2), transparent 0 72px, transparent 96px),
    radial-gradient(circle at 0 50%, rgba(232, 188, 84, 0.2), transparent 0 42px, transparent 72px),
    radial-gradient(circle at 100% 50%, rgba(72, 213, 235, 0.22), transparent 0 42px, transparent 72px) !important;
  box-shadow:
    inset 0 0 44px rgba(255, 255, 255, 0.46),
    0 0 28px rgba(93, 192, 240, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  inset: clamp(34px, 3.4vw, 52px) clamp(42px, 4.2vw, 68px) !important;
  border: 1px solid rgba(88, 163, 208, 0.22) !important;
  opacity: 0.74 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs {
  position: relative !important;
  z-index: 4 !important;
  width: min(560px, 100%) !important;
  margin: 0 auto clamp(12px, 1.4vw, 18px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 20px), calc(100dvh - 236px)) !important;
  margin: 0 auto !important;
  padding: 4px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 4px 0 12px !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  --card-frame-main: #e6c466;
  --card-frame-soft: rgba(112, 221, 255, 0.74);
  --card-frame-dark: rgba(40, 52, 62, 0.7);
  --card-frame-gem: #76e3ff;
  --card-name-bg: rgba(251, 246, 218, 0.86);
  --card-name-line: rgba(218, 176, 78, 0.58);
  --card-name-ink: #473109;
  position: relative !important;
  display: block !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  margin: 0 !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: var(--card-name-ink) !important;
  cursor: pointer !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --card-frame-main: #60d7f0;
  --card-frame-soft: rgba(112, 242, 255, 0.78);
  --card-frame-dark: rgba(30, 70, 92, 0.72);
  --card-frame-gem: #93f7ff;
  --card-name-bg: rgba(219, 250, 255, 0.88);
  --card-name-line: rgba(72, 197, 226, 0.62);
  --card-name-ink: #10384f;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="villain"] {
  --card-frame-main: #cf426a;
  --card-frame-soft: rgba(173, 88, 237, 0.72);
  --card-frame-dark: rgba(22, 17, 28, 0.86);
  --card-frame-gem: #e73f77;
  --card-name-bg: rgba(35, 25, 42, 0.9);
  --card-name-line: rgba(207, 66, 106, 0.7);
  --card-name-ink: #f8eaff;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--card-frame-main) 66%, #ffffff 18%) !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow:
    0 15px 28px rgba(10, 27, 45, 0.25),
    0 0 18px color-mix(in srgb, var(--card-frame-soft) 46%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: 19px !important;
  border: 2px solid color-mix(in srgb, var(--card-frame-main) 78%, #ffffff 8%) !important;
  background:
    radial-gradient(circle at 50% -2px, var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at 50% calc(100% + 2px), var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at -2px 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% + 2px) 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    linear-gradient(90deg, transparent 0 7%, var(--card-frame-soft) 7.4% 8.1%, transparent 8.6% 91.4%, var(--card-frame-soft) 91.9% 92.6%, transparent 93%),
    linear-gradient(180deg, transparent 0 6%, color-mix(in srgb, var(--card-frame-main) 82%, #ffffff 10%) 6.3% 7%, transparent 7.8% 92.2%, color-mix(in srgb, var(--card-frame-main) 82%, #ffffff 10%) 93% 93.7%, transparent 94%) !important;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--card-frame-soft) 48%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%, transparent 70%, rgba(8, 18, 28, 0.24) 100%) !important;
  box-shadow: inset 0 -26px 42px rgba(5, 11, 18, 0.16) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  background-image: var(--character-art) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #132638 !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: absolute !important;
  z-index: 9 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  left: 12px !important;
  right: 12px !important;
  bottom: 42px !important;
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid var(--card-name-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)),
    var(--card-name-bg) !important;
  box-shadow:
    0 7px 16px rgba(5, 16, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  opacity: 0.82 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  font-size: clamp(14px, 1.05vw, 18px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  display: block !important;
  min-width: 0 !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(133, 185, 221, 0.58) !important;
  border-radius: 7px !important;
  background: rgba(235, 248, 255, 0.88) !important;
  box-shadow: 0 5px 12px rgba(7, 22, 35, 0.12) !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(9px, 0.78vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  max-width: 100% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  flex: 0 0 auto !important;
  max-width: 42% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.selected > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:hover > span {
  transform: translateY(-3px) !important;
  box-shadow:
    0 20px 36px rgba(10, 27, 45, 0.3),
    0 0 24px color-mix(in srgb, var(--card-frame-soft) 58%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .hint {
  position: relative !important;
  z-index: 16 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(239, 248, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(239, 248, 255, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.54) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    --select-gap: clamp(8px, 2.1vw, 12px) !important;
    --select-card-w: min(39vw, 150px) !important;
    --select-card-h: calc(var(--select-card-w) * 1.5) !important;
    --select-frame-outset-x: clamp(9px, 2.3vw, 13px) !important;
    --select-frame-outset-y: clamp(13px, 3.2vw, 19px) !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
    width: calc(100vw - 18px) !important;
    grid-template-columns: 1fr auto !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectRoomText {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectStatusText {
    justify-self: start !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #leaveCharacterSelect {
    min-width: 86px !important;
    min-height: 32px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 104px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 104px) !important;
    padding: clamp(42px, 10vw, 58px) clamp(20px, 5.2vw, 30px) clamp(38px, 9vw, 54px) !important;
    border-radius: 18px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 12px), calc(100dvh - 190px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 9px !important;
    right: 9px !important;
    bottom: 38px !important;
    min-height: 38px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 9px !important;
    right: 9px !important;
    bottom: 8px !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 36px), calc(100dvh - 154px)) !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(6px, 1vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 200, 95, 0.54) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(7, 20, 36, 0.12) 42%, rgba(4, 12, 24, 0.48)) !important;
  box-shadow:
    0 12px 26px rgba(5, 18, 32, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.12) !important;
  color: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.84 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 6px rgba(246, 200, 95, 0.18))
    drop-shadow(0 0 6px rgba(78, 205, 196, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 20%, rgba(4, 12, 24, 0.1) 52%, rgba(4, 12, 24, 0.76) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .mini-art {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  background: rgba(7, 15, 26, 0.5) !important;
  border-color: rgba(246, 200, 95, 0.34) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].selected > span {
  transform: translateY(-2px) !important;
  border-color: rgba(246, 200, 95, 0.86) !important;
  box-shadow:
    0 18px 34px rgba(5, 18, 32, 0.34),
    0 0 22px rgba(246, 200, 95, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.chosen-action::after {
  content: attr(data-chosen-label) !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 8px !important;
  height: 23px !important;
  min-height: 23px !important;
  z-index: 9 !important;
  pointer-events: none !important;
  border-radius: 6px !important;
  border: 1px solid rgba(188, 255, 166, 0.72) !important;
  background: linear-gradient(180deg, rgba(24, 44, 26, 0.92), rgba(12, 25, 16, 0.92)) !important;
  color: #ecffd7 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 10px rgba(113, 255, 116, 0.24) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.chosen-action span {
  transform: translateY(-5px) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.target-candidate,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.selected-target,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate {
  outline: 0 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target)::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target)::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face {
  --duel-target-frame: rgba(91, 218, 255, 0.96);
  --duel-target-glow: rgba(80, 193, 255, 0.34);
  position: relative !important;
  isolation: isolate !important;
  border-color: rgba(132, 224, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(135, 226, 255, 0.5),
    0 0 16px var(--duel-target-glow),
    0 9px 20px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate .character-face {
  --duel-target-frame: rgba(255, 118, 82, 0.98);
  --duel-target-glow: rgba(255, 88, 58, 0.42);
  border-color: rgba(255, 144, 102, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 30 !important;
  pointer-events: none !important;
  border: 2px solid var(--duel-target-frame) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(var(--duel-target-frame) 0 0) left top / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right top / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left bottom / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right bottom / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left top / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right top / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left bottom / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right bottom / 2px 34px no-repeat !important;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px var(--duel-target-glow) !important;
  animation: mobileDuelTargetFramePulse 1.85s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-skill,
html body:not(.maintenance-mode) #skillInspectDialog .preview-skill,
html body:not(.maintenance-mode) #battleCharacterDialog .preview-skill {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(169, 211, 236, 0.74) !important;
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.96), rgba(224, 240, 248, 0.92)) !important;
  box-shadow:
    0 8px 20px rgba(19, 45, 69, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview :is(#previewSkill, #previewModeSkill),
html body:not(.maintenance-mode) #skillInspectDialog #skillInspectTitle,
html body:not(.maintenance-mode) #battleCharacterDialog #battlePreviewSkill {
  color: #12364f !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription,
html body:not(.maintenance-mode) #skillInspectDialog #skillInspectDescription,
html body:not(.maintenance-mode) #battleCharacterDialog #battlePreviewDescription {
  color: #17344a !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.55 !important;
}

/* TRUE REAL EOF V1.28Beta-desktop-battle-stage-scale1: desktop 1v1 stage fills the space, deck buttons keep art, and the battle log is a narrow vertical strip. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])) {
    --battle-log-width-final: clamp(190px, 14vw, 250px) !important;
    --battle-log-top-final: clamp(54px, 8vh, 78px) !important;
    --battle-stage-edge-final: clamp(8px, 0.9vw, 16px) !important;
    --fighter-panel-w: clamp(118px, 8vw, 158px) !important;
    --fighter-card-w: clamp(392px, 28vw, 540px) !important;
    --fighter-card-h: min(840px, calc(100dvh - var(--battle-stage-edge-final) * 2)) !important;
    --fighter-inner-gap: clamp(10px, 0.85vw, 15px) !important;
    --combatant-pad: 0px !important;
    --fighter-gap: clamp(12px, 1.7vw, 34px) !important;
    --versus-size: clamp(58px, 4.8vw, 74px) !important;
    --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) .topbar {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    position: fixed !important;
    inset: 0 calc(var(--battle-log-width-final) + var(--battle-stage-edge-final)) 0 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters.fighters {
    position: absolute !important;
    z-index: 20 !important;
    inset: var(--battle-stage-edge-final) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, var(--combatant-w))
      var(--versus-size)
      minmax(0, var(--combatant-w)) !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: var(--fighter-gap) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant.combatant {
    width: var(--combatant-w) !important;
    max-width: var(--combatant-w) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    align-items: stretch !important;
    gap: var(--fighter-inner-gap) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant {
    grid-template-columns: var(--fighter-panel-w) var(--fighter-card-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant {
    grid-template-columns: var(--fighter-card-w) var(--fighter-panel-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter.fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--battle-stage-edge-final) * 2) !important;
    align-self: stretch !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter.fighter {
    width: var(--fighter-card-w) !important;
    min-width: var(--fighter-card-w) !important;
    max-width: var(--fighter-card-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighter-panel.fighter-panel {
    width: var(--fighter-panel-w) !important;
    min-width: var(--fighter-panel-w) !important;
    max-width: var(--fighter-panel-w) !important;
    padding: clamp(9px, 0.8vw, 13px) !important;
    gap: clamp(7px, 0.7vw, 11px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .character-face.character-face {
    height: calc(100% - clamp(48px, 5.8vh, 66px)) !important;
    min-height: 0 !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .versus.versus {
    align-self: center !important;
    justify-self: center !important;
    width: var(--versus-size) !important;
    height: var(--versus-size) !important;
    min-width: var(--versus-size) !important;
    min-height: var(--versus-size) !important;
    margin: 0 !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #sidePanel#sidePanel.side:not([hidden]) {
    position: fixed !important;
    top: var(--battle-log-top-final) !important;
    right: var(--battle-stage-edge-final) !important;
    bottom: var(--battle-stage-edge-final) !important;
    left: auto !important;
    width: var(--battle-log-width-final) !important;
    height: auto !important;
    padding: clamp(8px, 0.8vw, 12px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    border-radius: 12px !important;
    z-index: 760 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section {
    padding: clamp(8px, 0.8vw, 12px) !important;
    border-radius: 10px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section:first-child {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .rules {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) h2 {
    margin: 8px 0 9px !important;
    font-size: clamp(17px, 1.3vw, 22px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status {
    padding: 8px 9px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status span,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status strong {
    font-size: clamp(12px, 0.95vw, 15px) !important;
    line-height: 1.2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 2px 4px 0 !important;
    font-size: clamp(12px, 0.9vw, 15px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article {
    padding: 8px 9px !important;
    border-radius: 8px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article > strong {
    font-size: clamp(13px, 1vw, 16px) !important;
    line-height: 1.2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log small {
    font-size: clamp(11px, 0.82vw, 13px) !important;
    line-height: 1.25 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries {
    position: fixed !important;
    z-index: 780 !important;
    left: var(--battle-stage-edge-final) !important;
    bottom: var(--battle-stage-edge-final) !important;
    display: flex !important;
    gap: clamp(8px, 0.8vw, 12px) !important;
    pointer-events: auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.library-action.library-action {
    width: clamp(88px, 7.1vw, 118px) !important;
    height: clamp(112px, 9.4vw, 154px) !important;
    border-radius: 10px !important;
    background-color: rgba(20, 15, 10, 0.82) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow:
      0 14px 28px rgba(25, 16, 8, 0.3),
      inset 0 0 0 1px rgba(255, 239, 184, 0.28) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.opportunity-library-action.library-action {
    background-image:
      linear-gradient(180deg, transparent 46%, rgba(3, 4, 8, 0.72)),
      url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.28Beta-desktop-battle-stage-scale1") !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.artifact-library-action.library-action {
    background-image:
      linear-gradient(180deg, transparent 46%, rgba(3, 4, 8, 0.72)),
      url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.28Beta-desktop-battle-stage-scale1") !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.library-action.library-action > span {
    left: 7px !important;
    right: 7px !important;
    bottom: 7px !important;
    font-size: clamp(10px, 0.8vw, 12px) !important;
  }
}

/* Battle log list must always render as a stable vertical stack in battle view. */
html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log,
html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) #log {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 8px !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) #log.log {
  display: flex !important;
  height: 100% !important;
  max-height: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article,
html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) #log article {
  width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  display: block !important;
}

/* TRUE END V1.27Beta-identity-desktop-layout1: 16:9 desktop identity board with one larger self area and non-overlapping seats. */
@media (min-width: 1100px) and (min-aspect-ratio: 16/10) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 100dvh !important;
    padding: clamp(18px, 2.2vh, 30px) clamp(22px, 2.4vw, 44px) clamp(138px, 14vh, 174px) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #teamBoard#teamBoard.team-board {
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: min(620px, calc(100dvh - 190px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    --identity-seat-w: clamp(132px, 9.6vw, 190px);
    --identity-seat-h: clamp(252px, 30vh, 330px);
    --identity-art-h: clamp(128px, 15.8vh, 176px);
    position: absolute !important;
    left: var(--seat-x) !important;
    top: var(--seat-y) !important;
    width: var(--identity-seat-w) !important;
    min-width: var(--identity-seat-w) !important;
    max-width: var(--identity-seat-w) !important;
    height: var(--identity-seat-h) !important;
    min-height: var(--identity-seat-h) !important;
    max-height: var(--identity-seat-h) !important;
    display: grid !important;
    grid-template-rows: var(--identity-art-h) minmax(0, 1fr) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
      rgba(12, 22, 24, 0.58) !important;
    border: 1px solid rgba(236, 247, 244, 0.28) !important;
    box-shadow: 0 18px 36px rgba(17, 30, 35, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
    z-index: 12 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat {
    --identity-seat-w: clamp(260px, 17vw, 340px);
    --identity-seat-h: clamp(420px, 51vh, 530px);
    --identity-art-h: clamp(248px, 31vh, 340px);
    border-color: rgba(255, 250, 220, 0.72) !important;
    box-shadow:
      0 24px 54px rgba(9, 23, 27, 0.26),
      0 0 0 1px rgba(255, 250, 220, 0.34),
      0 0 34px rgba(96, 207, 218, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    z-index: 24 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.card-vfx-hover,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.card-vfx-press {
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-art.team-art {
    width: 100% !important;
    height: var(--identity-art-h) !important;
    min-height: var(--identity-art-h) !important;
    border-radius: 11px 11px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 54%, rgba(3, 8, 11, 0.74)),
      var(--team-art) center bottom / contain no-repeat !important;
    background-color: rgba(8, 19, 23, 0.28) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-art.team-art {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%, rgba(3, 8, 11, 0.72)),
      var(--team-art) center bottom / contain no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-card-inscription {
    top: 10px !important;
    right: 10px !important;
    width: min(88px, calc(100% - 20px)) !important;
    display: grid !important;
    opacity: 0.94 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-card-inscription {
    width: min(126px, calc(100% - 24px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill {
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--identity-art-h) - 42px) !important;
    max-width: none !important;
    width: auto !important;
    z-index: 18 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill {
    left: 14px !important;
    right: 14px !important;
    top: calc(var(--identity-art-h) - 54px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill-label.team-skill-label,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill-label :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: clamp(11px, 0.78vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill-label.team-skill-label,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill-label :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: clamp(14px, 1.05vw, 18px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info.team-info {
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(28px, auto) auto auto !important;
    gap: 5px !important;
    padding: 8px 9px 9px !important;
    background: linear-gradient(180deg, rgba(7, 16, 20, 0.72), rgba(5, 10, 13, 0.88)) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-info.team-info {
    gap: 7px !important;
    padding: 12px 14px 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header {
    display: flex !important;
    min-height: 22px !important;
    height: auto !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header strong {
    color: #fff7da !important;
    -webkit-text-fill-color: #fff7da !important;
    font-size: clamp(12px, 0.8vw, 15px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-info header strong {
    font-size: clamp(18px, 1.32vw, 24px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header small {
    color: rgba(235, 250, 248, 0.72) !important;
    -webkit-text-fill-color: rgba(235, 250, 248, 0.72) !important;
    font-size: clamp(10px, 0.7vw, 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-mini-bars {
    display: grid !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-mini-row {
    grid-template-columns: 32px minmax(0, 1fr) 26px !important;
    min-height: 17px !important;
    font-size: 10px !important;
    color: #f3fbff !important;
    -webkit-text-fill-color: #f3fbff !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat {
    min-height: 22px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 3px 5px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-label {
    color: #f6fbff !important;
    -webkit-text-fill-color: #f6fbff !important;
    font-size: 9px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-marks {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-value {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-status-bar {
    min-height: 30px !important;
    max-height: 58px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-status-bar {
    min-height: 42px !important;
    max-height: 84px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-equipment {
    min-height: 30px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-equipment {
    min-height: 40px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-choice {
    display: block !important;
    min-height: 16px !important;
    color: #f2fbff !important;
    -webkit-text-fill-color: #f2fbff !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-choice {
    min-height: 20px !important;
    font-size: 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .identity-role-badge {
    transform: translate(-34%, -34%) scale(0.96) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .identity-role-badge {
    transform: translate(-34%, -34%) scale(1.14) !important;
  }
}

/* TRUE END V1.27Beta-battle-log-badges-actions1: full-height battle log, larger action panels, cleaner identity badges. */
html body:not(.maintenance-mode).battle-controls-active {
  --battle-log-width-final: clamp(380px, 30vw, 540px);
  --battle-visible-surface: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-log-badges-actions1") !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(229, 246, 242, 0.08)),
    var(--battle-visible-surface) center center / cover no-repeat fixed,
    #f2fbf7 !important;
  background-color: #f2fbf7 !important;
}

html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) :is(.fighters, .combatant, .fighter, .fighter-panel, .team-board, .seat-ring) {
  background-color: transparent !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: var(--battle-log-width-final) !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 64px 18px 18px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(106, 139, 143, 0.32) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 252, 238, 0.94), rgba(230, 246, 242, 0.88)),
    rgba(250, 255, 252, 0.92) !important;
  box-shadow: -14px 0 34px rgba(31, 52, 58, 0.2) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  transform: translateX(0) !important;
  transition: transform 220ms ease, opacity 180ms ease !important;
  overflow: hidden !important;
  z-index: 1380 !important;
}

html body:not(.maintenance-mode).battle-controls-active.battle-log-collapsed #sidePanel#sidePanel.side:not([hidden]) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(100%) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(126, 166, 168, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 250, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section:first-child {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .rules {
  max-height: 24vh !important;
  overflow: auto !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) h2 {
  margin: 12px 0 10px !important;
  color: #21444a !important;
  font-size: clamp(22px, 1.9vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(222,242,239,0.58)) !important;
  color: #23484f !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status span,
html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status strong {
  color: #23484f !important;
  -webkit-text-fill-color: #23484f !important;
  font-size: clamp(17px, 1.25vw, 22px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 4px 8px 0 !important;
  overflow: auto !important;
  color: #203f45 !important;
  font-size: clamp(18px, 1.22vw, 24px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article {
  padding: 12px 12px 13px !important;
  border: 1px solid rgba(111, 157, 159, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  color: #203f45 !important;
  box-shadow: 0 4px 14px rgba(36, 62, 66, 0.08) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article > strong {
  color: #163d45 !important;
  -webkit-text-fill-color: #163d45 !important;
  font-size: clamp(19px, 1.3vw, 25px) !important;
  line-height: 1.22 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log small {
  color: #395e64 !important;
  -webkit-text-fill-color: #395e64 !important;
  font-size: clamp(16px, 1.06vw, 21px) !important;
  line-height: 1.34 !important;
}

html body:not(.maintenance-mode) #battleLogToggle.battle-log-toggle {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #battleLogToggle.battle-log-toggle:not([hidden]) {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 94px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(87, 132, 137, 0.35) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(221, 241, 238, 0.88)) !important;
  color: #21464c !important;
  -webkit-text-fill-color: #21464c !important;
  box-shadow: 0 7px 18px rgba(28, 52, 57, 0.18), inset 0 1px 0 rgba(255,255,255,0.86) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  z-index: 1420 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  width: min(1120px, calc(100vw - var(--battle-log-width-final) - 56px)) !important;
  max-width: calc(100vw - var(--battle-log-width-final) - 56px) !important;
  min-width: min(860px, calc(100vw - var(--battle-log-width-final) - 56px)) !important;
}

html body:not(.maintenance-mode).battle-controls-active.battle-log-collapsed #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  width: min(1280px, calc(100vw - 120px)) !important;
  max-width: calc(100vw - 120px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
  min-height: clamp(154px, 12vw, 220px) !important;
  aspect-ratio: 1983 / 793 !important;
  background-size: contain !important;
  transform-origin: center bottom !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
  left: 39.2% !important;
  top: 26.6% !important;
  width: 55.6% !important;
  height: 39.5% !important;
  padding: 0 4.2% !important;
  align-items: center !important;
  justify-items: center !important;
  font-size: clamp(25px, 2.6vw, 38px) !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"],
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"] {
  border-color: rgba(159, 205, 210, 0.36) !important;
  background: linear-gradient(90deg, rgba(255, 255, 250, 0.82), rgba(224, 244, 242, 0.56)) !important;
  color: #22484f !important;
  box-shadow: 0 8px 18px rgba(33, 72, 79, 0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"]::before,
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"]::before {
  background: var(--identity-badge-art) center / contain no-repeat !important;
  box-shadow: 0 0 16px rgba(103, 196, 220, 0.2) !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"] span,
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"] span {
  color: #21464c !important;
  -webkit-text-fill-color: #21464c !important;
  text-shadow: none !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode).battle-controls-active {
    --battle-log-width-final: min(88vw, 420px);
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) {
    width: var(--battle-log-width-final) !important;
    padding: 58px 12px 12px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 96px !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-framefinal2: final cascade seal for faction portrait frames. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-card-w: clamp(170px, 11.6vw, 204px) !important;
  --select-card-h: calc(var(--select-card-w) * 1.5) !important;
  --select-frame-outset-x: clamp(14px, 1vw, 19px) !important;
  --select-frame-outset-y: clamp(20px, 1.3vw, 27px) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  height: min(842px, calc(100dvh - 126px)) !important;
  margin: 0 auto !important;
  padding: clamp(70px, 6.2vw, 98px) clamp(70px, 5.7vw, 98px) clamp(60px, 4.8vw, 82px) !important;
  border: 1px solid rgba(182, 148, 78, 0.42) !important;
  border-radius: clamp(24px, 2.2vw, 34px) !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.96), rgba(250, 242, 219, 0.88) 52%, rgba(232, 214, 174, 0.7) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(242, 226, 184, 0.48) 22% 78%, rgba(255, 255, 255, 0.58)),
    rgba(249, 241, 217, 0.9) !important;
  box-shadow:
    0 28px 62px rgba(31, 22, 12, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74),
    inset 0 -34px 64px rgba(137, 103, 48, 0.12) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: "" !important;
  display: block !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  --card-frame-main: #e9c873;
  --card-frame-light: #fff0b0;
  --card-frame-shadow: rgba(64, 45, 17, 0.58);
  --card-frame-glow: rgba(255, 221, 118, 0.34);
  --card-frame-gem: #77e8ff;
  --card-name-bg: rgba(255, 249, 225, 0.9);
  --card-name-line: rgba(213, 169, 75, 0.58);
  --card-name-ink: #452d08;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --card-frame-main: #59d2f2;
  --card-frame-light: #c7fbff;
  --card-frame-shadow: rgba(19, 65, 92, 0.62);
  --card-frame-glow: rgba(88, 232, 255, 0.36);
  --card-frame-gem: #9ef8ff;
  --card-name-bg: rgba(222, 250, 255, 0.91);
  --card-name-line: rgba(68, 194, 226, 0.62);
  --card-name-ink: #113b52;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="villain"] {
  --card-frame-main: #c44164;
  --card-frame-light: #f191b0;
  --card-frame-shadow: rgba(24, 13, 28, 0.78);
  --card-frame-glow: rgba(205, 70, 112, 0.42);
  --card-frame-gem: #ec4d82;
  --card-name-bg: rgba(39, 24, 38, 0.92);
  --card-name-line: rgba(213, 74, 112, 0.72);
  --card-name-ink: #fff0fa;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span {
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  border: 1px solid color-mix(in srgb, var(--card-frame-light) 64%, var(--card-frame-main) 36%) !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow:
    0 18px 32px rgba(36, 24, 12, 0.24),
    0 0 18px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 8 !important;
  border: 2px solid color-mix(in srgb, var(--card-frame-main) 78%, #ffffff 10%) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% -2px, var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at 50% calc(100% + 2px), var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at -1px 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% + 1px) 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    linear-gradient(135deg, transparent 0 5.5%, var(--card-frame-light) 5.8% 6.5%, transparent 7% 93%, var(--card-frame-light) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(45deg, transparent 0 5.5%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 5.8% 6.5%, transparent 7% 93%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(90deg, transparent 0 7%, var(--card-frame-shadow) 7.2% 8.1%, transparent 8.6% 91.4%, var(--card-frame-shadow) 91.9% 92.8%, transparent 93%),
    linear-gradient(180deg, transparent 0 6%, var(--card-frame-main) 6.25% 7.15%, transparent 7.8% 92.2%, var(--card-frame-main) 92.85% 93.75%, transparent 94%) !important;
  box-shadow:
    0 0 16px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  opacity: 1 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  background-image: var(--character-art) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.04) contrast(1.03) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 43px !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 4px 8px !important;
  border: 1px solid var(--card-name-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1)),
    var(--card-name-bg) !important;
  box-shadow:
    0 7px 16px rgba(5, 16, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  z-index: 9 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 27px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* TRUE EOF V1.27Beta-character-select-framefinal1: portrait-sized faction frames and corrected nameplates. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-gap: clamp(16px, 1.6vw, 24px) !important;
  --select-card-w: clamp(170px, 11.6vw, 204px) !important;
  --select-card-h: calc(var(--select-card-w) * 1.5) !important;
  --select-frame-outset-x: clamp(14px, 1vw, 19px) !important;
  --select-frame-outset-y: clamp(20px, 1.3vw, 27px) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 20 !important;
  width: min(980px, calc(100vw - 48px)) !important;
  min-height: 54px !important;
  margin: 0 auto 12px !important;
  padding: 9px 16px !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(180, 151, 84, 0.42) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 235, 206, 0.84)),
    rgba(250, 246, 230, 0.94) !important;
  box-shadow:
    0 14px 28px rgba(38, 28, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  z-index: 12 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  height: min(842px, calc(100dvh - 126px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100dvh - 126px) !important;
  margin: 0 auto !important;
  padding: clamp(70px, 6.2vw, 98px) clamp(70px, 5.7vw, 98px) clamp(60px, 4.8vw, 82px) !important;
  border: 1px solid rgba(182, 148, 78, 0.42) !important;
  border-radius: clamp(24px, 2.2vw, 34px) !important;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.96), rgba(250, 242, 219, 0.88) 52%, rgba(232, 214, 174, 0.7) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(242, 226, 184, 0.48) 22% 78%, rgba(255, 255, 255, 0.58)),
    rgba(249, 241, 217, 0.9) !important;
  box-shadow:
    0 28px 62px rgba(31, 22, 12, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.74),
    inset 0 -34px 64px rgba(137, 103, 48, 0.12) !important;
  filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before {
  inset: clamp(14px, 1.3vw, 22px) !important;
  z-index: 0 !important;
  border: 1px solid rgba(176, 137, 66, 0.34) !important;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(160, 125, 63, 0.18) 49.85% 50.15%, transparent 50.4%),
    radial-gradient(circle at 12% 9%, rgba(231, 190, 94, 0.18), transparent 0 98px),
    radial-gradient(circle at 88% 91%, rgba(72, 198, 219, 0.14), transparent 0 104px) !important;
  box-shadow:
    inset 0 0 48px rgba(255, 255, 255, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  inset: clamp(36px, 3vw, 50px) clamp(42px, 3.8vw, 66px) !important;
  z-index: 0 !important;
  border: 1px solid rgba(111, 88, 45, 0.16) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 18% 82%, rgba(255, 255, 255, 0.18)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 28px), calc(100dvh - 238px)) !important;
  margin: 0 auto !important;
  padding: 6px 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 4px 0 14px !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  --card-frame-main: #e9c873;
  --card-frame-light: #fff0b0;
  --card-frame-shadow: rgba(64, 45, 17, 0.58);
  --card-frame-glow: rgba(255, 221, 118, 0.34);
  --card-frame-gem: #77e8ff;
  --card-name-bg: rgba(255, 249, 225, 0.9);
  --card-name-line: rgba(213, 169, 75, 0.58);
  --card-name-ink: #452d08;
  position: relative !important;
  display: block !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  margin: 0 !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: var(--card-name-ink) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --card-frame-main: #59d2f2;
  --card-frame-light: #c7fbff;
  --card-frame-shadow: rgba(19, 65, 92, 0.62);
  --card-frame-glow: rgba(88, 232, 255, 0.36);
  --card-frame-gem: #9ef8ff;
  --card-name-bg: rgba(222, 250, 255, 0.91);
  --card-name-line: rgba(68, 194, 226, 0.62);
  --card-name-ink: #113b52;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="villain"] {
  --card-frame-main: #c44164;
  --card-frame-light: #f191b0;
  --card-frame-shadow: rgba(24, 13, 28, 0.78);
  --card-frame-glow: rgba(205, 70, 112, 0.42);
  --card-frame-gem: #ec4d82;
  --card-name-bg: rgba(39, 24, 38, 0.92);
  --card-name-line: rgba(213, 74, 112, 0.72);
  --card-name-ink: #fff0fa;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--card-frame-light) 64%, var(--card-frame-main) 36%) !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow:
    0 18px 32px rgba(36, 24, 12, 0.24),
    0 0 18px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  overflow: visible !important;
  transform: none !important;
  color: var(--card-name-ink) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: 22px !important;
  border: 2px solid color-mix(in srgb, var(--card-frame-main) 78%, #ffffff 10%) !important;
  background:
    radial-gradient(circle at 50% -2px, var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at 50% calc(100% + 2px), var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at -1px 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% + 1px) 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    linear-gradient(135deg, transparent 0 5.5%, var(--card-frame-light) 5.8% 6.5%, transparent 7% 93%, var(--card-frame-light) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(45deg, transparent 0 5.5%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 5.8% 6.5%, transparent 7% 93%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(90deg, transparent 0 7%, var(--card-frame-shadow) 7.2% 8.1%, transparent 8.6% 91.4%, var(--card-frame-shadow) 91.9% 92.8%, transparent 93%),
    linear-gradient(180deg, transparent 0 6%, var(--card-frame-main) 6.25% 7.15%, transparent 7.8% 92.2%, var(--card-frame-main) 92.85% 93.75%, transparent 94%) !important;
  box-shadow:
    0 0 16px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 22px rgba(255, 255, 255, 0.05) !important;
  opacity: 1 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 27%, transparent 72%, rgba(8, 14, 18, 0.26)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -24px 42px rgba(5, 10, 16, 0.18) !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  background-image: var(--character-art) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #192536 !important;
  filter: saturate(1.04) contrast(1.03) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: absolute !important;
  z-index: 9 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  left: 12px !important;
  right: 12px !important;
  bottom: 43px !important;
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid var(--card-name-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1)),
    var(--card-name-bg) !important;
  box-shadow:
    0 7px 16px rgba(5, 16, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  opacity: 0.82 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  font-size: clamp(14px, 1.05vw, 18px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 27px !important;
  height: 27px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  display: block !important;
  min-width: 0 !important;
  min-height: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(141, 175, 191, 0.58) !important;
  border-radius: 7px !important;
  background: rgba(244, 249, 246, 0.9) !important;
  box-shadow: 0 5px 12px rgba(7, 22, 35, 0.12) !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(9px, 0.78vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  max-width: 100% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  flex: 0 0 auto !important;
  max-width: 42% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.selected > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:hover > span {
  transform: translateY(-3px) !important;
  box-shadow:
    0 22px 38px rgba(36, 24, 12, 0.28),
    0 0 26px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    --select-gap: clamp(9px, 2.2vw, 13px) !important;
    --select-card-w: min(39vw, 154px) !important;
    --select-card-h: calc(var(--select-card-w) * 1.5) !important;
    --select-frame-outset-x: clamp(9px, 2.3vw, 13px) !important;
    --select-frame-outset-y: clamp(14px, 3.2vw, 20px) !important;
    --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
    width: calc(100vw - 18px) !important;
    grid-template-columns: 1fr auto !important;
    min-height: 44px !important;
    margin-bottom: 8px !important;
    padding: 6px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectRoomText {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectStatusText {
    justify-self: start !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #leaveCharacterSelect {
    min-width: 86px !important;
    min-height: 32px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 96px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 96px) !important;
    padding: clamp(38px, 9vw, 54px) clamp(18px, 4.8vw, 28px) clamp(36px, 8vw, 50px) !important;
    border-radius: 18px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 12px), calc(100dvh - 184px)) !important;
    padding-bottom: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    gap: var(--select-gap) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 9px !important;
    right: 9px !important;
    bottom: 38px !important;
    min-height: 38px !important;
    height: 38px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 9px !important;
    right: 9px !important;
    bottom: 8px !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-cleanframe3: bottom nameplate correction after cleanframe2. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  left: 12px !important;
  right: 12px !important;
  bottom: 42px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: grid !important;
  grid-template-rows: 15px minmax(0, 1fr) !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.12)),
    var(--card-name-bg, rgba(251, 246, 218, 0.86)) !important;
  border: 1px solid var(--card-name-line, rgba(218, 176, 78, 0.58)) !important;
  box-shadow:
    0 7px 14px rgba(5, 16, 28, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  color: var(--card-name-ink, #473109) !important;
  -webkit-text-fill-color: var(--card-name-ink, #473109) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--card-name-ink, #473109) !important;
  -webkit-text-fill-color: var(--card-name-ink, #473109) !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 850 !important;
  line-height: 15px !important;
  opacity: 0.76 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 950 !important;
  line-height: 23px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  bottom: 10px !important;
  min-height: 24px !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 9px !important;
    right: 9px !important;
    bottom: 38px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    grid-template-rows: 14px minmax(0, 1fr) !important;
    padding: 3px 7px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
    font-size: clamp(13px, 3.8vw, 16px) !important;
    line-height: 22px !important;
  }
}

/* V1.27Beta-bright-battle-redraw1: brighter battle surface and cleaner right rail. */
html body:not(.maintenance-mode) #appRoot.app:has(#battle.battle:not([hidden])) {
  --battle-ink: #17354a;
  --battle-ink-soft: #426174;
  --battle-panel-glass: rgba(251, 254, 255, 0.88);
  --battle-panel-blue: rgba(226, 244, 251, 0.82);
  --battle-border-blue: rgba(111, 174, 199, 0.58);
  --battle-gold-soft: rgba(218, 174, 84, 0.56);
  --battle-shadow-soft: 0 18px 44px rgba(47, 96, 120, 0.20);
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) {
  color: var(--battle-ink) !important;
  background-color: #e7f6fb !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 251, 254, 0.58) 43%, rgba(212, 235, 243, 0.48)),
    var(--battle-stage-art) !important;
  background-blend-mode: normal, screen !important;
  border-color: rgba(128, 190, 210, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -22px 72px rgba(103, 166, 190, 0.18),
    0 24px 56px rgba(44, 88, 112, 0.20) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 48%, rgba(78, 146, 170, 0.08)),
    linear-gradient(90deg, rgba(255, 248, 222, 0.20), rgba(204, 240, 249, 0.12) 50%, rgba(255, 248, 222, 0.16)) !important;
  opacity: 0.96 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::after {
  opacity: 0.22 !important;
  filter: saturate(0.78) brightness(1.22) contrast(0.84) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .combatant {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(232, 247, 252, 0.78)),
    linear-gradient(135deg, rgba(255, 244, 210, 0.26), rgba(172, 221, 233, 0.18)) !important;
  border: 1px solid rgba(115, 178, 201, 0.56) !important;
  box-shadow:
    var(--battle-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .combatant::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .combatant::after {
  opacity: 0.26 !important;
  filter: saturate(0.78) brightness(1.28) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel {
  color: var(--battle-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(228, 245, 250, 0.82)),
    linear-gradient(90deg, rgba(255, 245, 214, 0.20), rgba(185, 229, 238, 0.18)) !important;
  border-color: rgba(116, 180, 203, 0.58) !important;
  box-shadow:
    0 14px 30px rgba(52, 94, 117, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-head,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-meta,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .stat-label {
  color: var(--battle-ink-soft) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-head strong,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel b,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .role-card b {
  color: #14364e !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .role-card {
  color: var(--battle-ink) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(232, 248, 252, 0.88) 52%, rgba(255, 246, 222, 0.84)) !important;
  border: 1px solid rgba(120, 181, 202, 0.58) !important;
  box-shadow:
    0 10px 22px rgba(50, 92, 112, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .role-card > span,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .role-card span {
  color: #2f5368 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .status-bar,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .equipment-slots,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .meter-row,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .fatigue-row,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .choice {
  background: rgba(249, 253, 255, 0.82) !important;
  border-color: rgba(132, 190, 209, 0.48) !important;
  color: var(--battle-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(56, 102, 124, 0.10) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .meter {
  background: rgba(210, 232, 241, 0.84) !important;
  border-color: rgba(108, 167, 191, 0.42) !important;
  box-shadow: inset 0 1px 5px rgba(47, 91, 114, 0.14) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .energy,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .fatigue,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel .laziness {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(126, 185, 207, 0.48) !important;
  color: #17354a !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-bar {
  background: rgba(244, 252, 255, 0.84) !important;
  border-color: rgba(124, 184, 205, 0.46) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token {
  color: #203f54 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 247, 251, 0.88)) !important;
  border-color: rgba(126, 184, 205, 0.50) !important;
  box-shadow:
    0 6px 13px rgba(48, 91, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token i {
  background: #f8fdff !important;
  border-color: rgba(113, 174, 197, 0.50) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token b,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token em {
  color: #17364d !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token.buff {
  background: linear-gradient(180deg, rgba(243, 255, 245, 0.96), rgba(221, 246, 229, 0.90)) !important;
  border-color: rgba(87, 172, 113, 0.48) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token.debuff {
  background: linear-gradient(180deg, rgba(255, 246, 241, 0.96), rgba(252, 228, 220, 0.90)) !important;
  border-color: rgba(209, 124, 98, 0.48) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .status-token.cooldown {
  background: linear-gradient(180deg, rgba(246, 244, 255, 0.96), rgba(232, 229, 249, 0.90)) !important;
  border-color: rgba(146, 132, 203, 0.48) !important;
}

html body:not(.maintenance-mode) #sidePanel.side {
  color: var(--battle-ink) !important;
  background: transparent !important;
}

html body:not(.maintenance-mode) #sidePanel.side section,
html body:not(.maintenance-mode) #sidePanel.side section.rules,
html body:not(.maintenance-mode) #sidePanel.side .log {
  color: var(--battle-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 247, 252, 0.88)),
    linear-gradient(135deg, rgba(255, 247, 222, 0.22), rgba(191, 231, 239, 0.18)) !important;
  border: 1px solid rgba(119, 181, 203, 0.58) !important;
  box-shadow:
    0 18px 36px rgba(43, 88, 113, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
}

html body:not(.maintenance-mode) #sidePanel.side section::before,
html body:not(.maintenance-mode) #sidePanel.side section::after {
  opacity: 0.22 !important;
  filter: saturate(0.72) brightness(1.28) !important;
}

html body:not(.maintenance-mode) #sidePanel.side h2 {
  color: #14364e !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html body:not(.maintenance-mode) #sidePanel.side .battle-status,
html body:not(.maintenance-mode) #sidePanel.side .status-line.battle-status {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(229, 246, 251, 0.88)) !important;
  border: 1px solid rgba(120, 181, 202, 0.52) !important;
  color: var(--battle-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 18px rgba(51, 95, 116, 0.12) !important;
}

html body:not(.maintenance-mode) #sidePanel.side .battle-status span,
html body:not(.maintenance-mode) #sidePanel.side .battle-status strong,
html body:not(.maintenance-mode) #sidePanel.side .status-line strong {
  color: #183a52 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #sidePanel.side .rules p,
html body:not(.maintenance-mode) #sidePanel.side .rules li,
html body:not(.maintenance-mode) #sidePanel.side .muted {
  color: #3a5a70 !important;
}

html body:not(.maintenance-mode) #sidePanel.side #log,
html body:not(.maintenance-mode) #sidePanel.side .log {
  scrollbar-color: rgba(109, 170, 194, 0.72) rgba(231, 244, 250, 0.84) !important;
}

html body:not(.maintenance-mode) #sidePanel.side #log article,
html body:not(.maintenance-mode) #sidePanel.side .log article {
  color: #25475d !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 250, 253, 0.86)) !important;
  border: 1px solid rgba(129, 189, 209, 0.42) !important;
  border-left: 3px solid rgba(46, 149, 187, 0.64) !important;
  box-shadow:
    0 7px 15px rgba(51, 95, 116, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html body:not(.maintenance-mode) #sidePanel.side #log article:nth-child(-n + 2),
html body:not(.maintenance-mode) #sidePanel.side .log article:nth-child(-n + 2) {
  background:
    linear-gradient(180deg, rgba(255, 253, 244, 0.96), rgba(236, 249, 252, 0.88)) !important;
  border-left-color: rgba(216, 168, 72, 0.72) !important;
}

html body:not(.maintenance-mode) #sidePanel.side #log article strong,
html body:not(.maintenance-mode) #sidePanel.side #log article small,
html body:not(.maintenance-mode) #sidePanel.side .log article strong,
html body:not(.maintenance-mode) #sidePanel.side .log article small {
  color: #17364d !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #sidePanel.side .log p,
html body:not(.maintenance-mode) #sidePanel.side #log p {
  color: #31566c !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]) .combatant,
  html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter-panel,
  html body:not(.maintenance-mode) #sidePanel.side section {
    box-shadow:
      0 10px 24px rgba(43, 88, 113, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
  }

  html body:not(.maintenance-mode) #sidePanel.side #log article,
  html body:not(.maintenance-mode) #sidePanel.side .log article {
    border-left-width: 2px !important;
  }
}

/* V1.27Beta-bright-battle-redraw1: priority pass over older battle-app rules. */
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) {
  color: #17354a !important;
  background-color: #e7f6fb !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 251, 254, 0.58) 43%, rgba(212, 235, 243, 0.48)),
    var(--battle-stage-art, none) !important;
  background-blend-mode: normal, screen !important;
  border-color: rgba(128, 190, 210, 0.68) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .fighter-panel {
  color: #17354a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(228, 245, 250, 0.82)),
    linear-gradient(90deg, rgba(255, 245, 214, 0.20), rgba(185, 229, 238, 0.18)) !important;
  border-color: rgba(116, 180, 203, 0.58) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .role-card {
  color: #17354a !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(232, 248, 252, 0.88) 52%, rgba(255, 246, 222, 0.84)) !important;
  border: 1px solid rgba(120, 181, 202, 0.58) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-bar,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .equipment-slots,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .meter-row,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .fatigue-row,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .choice {
  color: #17354a !important;
  background: rgba(249, 253, 255, 0.82) !important;
  border-color: rgba(132, 190, 209, 0.48) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-token {
  color: #203f54 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(234, 247, 251, 0.88)) !important;
  border-color: rgba(126, 184, 205, 0.50) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-token.buff {
  background: linear-gradient(180deg, rgba(243, 255, 245, 0.96), rgba(221, 246, 229, 0.90)) !important;
  border-color: rgba(87, 172, 113, 0.48) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-token.debuff {
  background: linear-gradient(180deg, rgba(255, 246, 241, 0.96), rgba(252, 228, 220, 0.90)) !important;
  border-color: rgba(209, 124, 98, 0.48) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-token.cooldown {
  background: linear-gradient(180deg, rgba(246, 244, 255, 0.96), rgba(232, 229, 249, 0.90)) !important;
  border-color: rgba(146, 132, 203, 0.48) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side section,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side section.rules,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .log {
  color: #17354a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 247, 252, 0.88)),
    linear-gradient(135deg, rgba(255, 247, 222, 0.22), rgba(191, 231, 239, 0.18)) !important;
  border: 1px solid rgba(119, 181, 203, 0.58) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .battle-status,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .status-line.battle-status {
  color: #17354a !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(229, 246, 251, 0.88)) !important;
  border: 1px solid rgba(120, 181, 202, 0.52) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side #log article,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .log article {
  color: #25475d !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 250, 253, 0.86)) !important;
  border: 1px solid rgba(129, 189, 209, 0.42) !important;
  border-left: 3px solid rgba(46, 149, 187, 0.64) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .fighter-head,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .fighter-head span,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .role-card span,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .stat-label,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .rules p,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .rules li,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .log p,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .log small {
  color: #3a5a70 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .fighter-head strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .role-card b,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle.battle:not([hidden]) .status-token b,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side h2,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .battle-status strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side .log article strong {
  color: #14364e !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

/* V1.27Beta-profession-icons-ellipse2: final codex, select, and VFX surface overrides. */
@media (min-width: 1180px) {
  html body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box,
  html body:not(.maintenance-mode) .profession-codex-box {
    width: min(1320px, calc(100vw - 28px)) !important;
  }

  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 721px) and (max-width: 1179px) {
  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button {
  --profession-secondary: var(--profession-color, #d6a5ff);
  --profession-role-color: #f2d27c;
  position: relative !important;
  min-width: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--profession-spec-art) center / 100% 100% no-repeat !important;
  cursor: pointer !important;
  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 8px color-mix(in srgb, var(--profession-color) 20%, transparent)) !important;
  transition: transform 140ms ease, filter 140ms ease !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% -5% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 13% 50%, color-mix(in srgb, var(--profession-color) 56%, transparent) 0 5%, transparent 10%),
    radial-gradient(circle at 87% 50%, color-mix(in srgb, var(--profession-role-color) 46%, transparent) 0 5%, transparent 10%),
    linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--profession-secondary) 18%, transparent), transparent 92%) !important;
  opacity: 0.8 !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::after {
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 8% !important;
  bottom: 9% !important;
  height: 32% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg, rgba(2, 4, 9, 0.9), rgba(2, 4, 9, 0.54), rgba(2, 4, 9, 0.9)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--profession-role-color) 28%, transparent),
    0 0 12px color-mix(in srgb, var(--profession-color) 18%, transparent) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button b,
html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button small {
  position: absolute !important;
  left: 12% !important;
  right: 10% !important;
  z-index: 2 !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.92), 0 0 10px color-mix(in srgb, var(--profession-color) 38%, transparent) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button b {
  bottom: 20% !important;
  color: #fff8df !important;
  font-size: clamp(11px, 0.82vw, 14px) !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button small {
  bottom: 9.5% !important;
  color: var(--profession-role-color) !important;
  font-size: clamp(9px, 0.66vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 0.96 !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button:hover,
html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button:focus-visible {
  outline: none !important;
  transform: translateY(-2px) scale(1.02) !important;
  filter:
    drop-shadow(0 13px 20px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 15px color-mix(in srgb, var(--profession-color) 42%, transparent)) !important;
}

html body:not(.maintenance-mode) .profession-spec-box {
  --profession-secondary: #82e8ff;
  --profession-deep: #060910;
  --profession-role-color: #f2d27c;
  border-color: color-mix(in srgb, var(--profession-color) 56%, rgba(255, 236, 186, 0.2)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--profession-deep) 72%, transparent), rgba(3, 5, 9, 0.94)),
    radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--profession-secondary) 24%, transparent), transparent 38%),
    radial-gradient(circle at 82% 86%, color-mix(in srgb, var(--profession-color) 18%, transparent), transparent 42%),
    var(--profession-bg) center / cover no-repeat,
    rgba(5, 8, 13, 0.96) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy em {
  border-color: color-mix(in srgb, var(--profession-role-color) 62%, rgba(255, 255, 255, 0.14)) !important;
  color: var(--profession-role-color) !important;
}

html body:not(.maintenance-mode) .profession-spec-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

html body:not(.maintenance-mode) .profession-spec-tags span {
  width: auto !important;
  padding: 6px 10px !important;
  border: 1px solid color-mix(in srgb, var(--profession-role-color) 50%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 999px !important;
  background: rgba(3, 7, 14, 0.62) !important;
  color: #fff6d8 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) .profession-spec-notes {
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
  list-style: none !important;
}

html body:not(.maintenance-mode) .profession-spec-notes li {
  position: relative !important;
  padding: 9px 11px 9px 28px !important;
  border: 1px solid color-mix(in srgb, var(--profession-color) 28%, rgba(255, 255, 255, 0.1)) !important;
  border-radius: 8px !important;
  background: rgba(4, 8, 16, 0.54) !important;
  color: rgba(240, 247, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  line-height: 1.45 !important;
}

html body:not(.maintenance-mode) .profession-spec-notes li::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--profession-role-color) !important;
  box-shadow: 0 0 10px color-mix(in srgb, var(--profession-role-color) 50%, transparent) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-tags span,
  html body:not(.maintenance-mode) .profession-spec-notes li {
    font-size: 12px !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-skill,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription * {
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription {
  display: block !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #122f46 !important;
  -webkit-text-fill-color: #122f46 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription strong,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription b,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription em,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription span {
  color: #0f2d43 !important;
  -webkit-text-fill-color: #0f2d43 !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) .rich-description .passive-description-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 7px 0 0 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(88, 137, 164, 0.48) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(214, 234, 244, 0.78)) !important;
  color: #12364f !important;
  -webkit-text-fill-color: #12364f !important;
  font-size: 0.84em !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(92px, 7vw, 142px) !important;
    --select-frame-inner-y: clamp(72px, 8.2vh, 106px) !important;
    --select-matrix-h: min(
      calc(var(--select-card-outer-h) * 4 + var(--select-gap) * 3),
      calc(100dvh - var(--select-frame-inner-y) * 2 - 18px)
    ) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 4px)) !important;
    height: min(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 4px)) !important;
    max-height: calc(100dvh - 4px) !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
    box-sizing: border-box !important;
    width: var(--select-matrix-w) !important;
    max-width: var(--select-matrix-w) !important;
    height: var(--select-matrix-h) !important;
    max-height: var(--select-matrix-h) !important;
    padding: 8px 4px 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-padding-top: 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
    height: auto !important;
    min-height: calc(var(--select-matrix-h) - 22px) !important;
    max-height: none !important;
    align-self: start !important;
    justify-self: center !important;
    place-self: start center !important;
    align-content: start !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
    box-sizing: border-box !important;
    padding-top: 10px !important;
    scroll-padding-top: 10px !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
    align-self: start !important;
    justify-self: center !important;
    place-self: start center !important;
    align-content: start !important;
    padding-top: 0 !important;
  }
}

html body:not(.maintenance-mode) .card-vfx-attacking {
  position: relative !important;
  z-index: 95 !important;
  will-change: transform, filter, box-shadow !important;
}

/* V1.27Beta-profession-icons-ellipse2: wider profession codex, independent spec icons, and diagonal identity seating. */
@media (min-width: 1180px) {
  html body:not(.maintenance-mode) .profession-codex-dialog .character-codex-box,
  html body:not(.maintenance-mode) .profession-codex-box {
    width: min(1580px, calc(100vw - 12px)) !important;
    max-height: calc(100dvh - 18px) !important;
  }

  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.25vw, 22px) !important;
  }
}

@media (min-width: 721px) and (max-width: 1179px) {
  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

html body:not(.maintenance-mode) .profession-codex-card {
  min-height: clamp(292px, 24vw, 430px) !important;
  grid-column: auto !important;
}

html body:not(.maintenance-mode) .profession-codex-grid .profession-codex-card {
  min-height: clamp(292px, 24vw, 430px) !important;
  grid-column: auto !important;
}

html body:not(.maintenance-mode) .profession-codex-bg {
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(2, 5, 11, 0.74) 0%, rgba(2, 5, 11, 0.42) 48%, rgba(2, 5, 11, 0.1) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.02), rgba(3, 6, 12, 0.62)),
    var(--profession-bg) center center / cover no-repeat,
    rgba(5, 9, 16, 0.96) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) .profession-codex-copy {
  width: min(720px, 100%) !important;
  gap: clamp(9px, 1vw, 13px) !important;
  padding: clamp(16px, 1.8vw, 26px) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 0.8vw, 12px) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button {
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
  filter:
    drop-shadow(0 9px 16px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 10px color-mix(in srgb, var(--profession-color) 28%, transparent)) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 9% 5% 2% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--profession-color) 32%, transparent), transparent 68%) !important;
  opacity: 0.9 !important;
  filter: blur(1px) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button b {
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  bottom: -2px !important;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden !important;
  color: #fff8df !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(11px, 0.78vw, 14px) !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.95),
    0 0 12px color-mix(in srgb, var(--profession-color) 56%, transparent) !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-spec-icon-button small {
  display: none !important;
}

html body:not(.maintenance-mode) .profession-spec-box {
  width: min(1180px, calc(100vw - 24px)) !important;
  border-color: color-mix(in srgb, var(--profession-color) 58%, rgba(255, 236, 186, 0.16)) !important;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, 0.48), rgba(4, 7, 12, 0.7)),
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--profession-color) 24%, transparent), transparent 34%),
    radial-gradient(circle at 84% 82%, color-mix(in srgb, var(--profession-secondary) 18%, transparent), transparent 40%),
    var(--profession-bg) center / cover no-repeat,
    rgba(5, 8, 13, 0.96) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail {
  display: grid !important;
  grid-template-columns: minmax(460px, 1.12fr) minmax(360px, 0.88fr) !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  min-height: clamp(340px, 38vw, 540px) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(4, 7, 12, 0.06), rgba(4, 7, 12, 0.58)),
    var(--profession-bg) center center / cover no-repeat,
    rgba(6, 10, 18, 0.96) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  left: 8% !important;
  right: 8% !important;
  bottom: 7% !important;
  aspect-ratio: 16 / 9 !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 22px color-mix(in srgb, var(--profession-color) 42%, transparent)) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  align-content: center !important;
  gap: clamp(10px, 1vw, 14px) !important;
  padding: clamp(18px, 2vw, 28px) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--profession-deep) 62%, rgba(255, 255, 255, 0.07)), rgba(5, 8, 13, 0.72)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--profession-color) 28%, rgba(255, 255, 255, 0.08)),
    0 18px 42px rgba(0, 0, 0, 0.26) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy strong {
  font-size: clamp(40px, 4.6vw, 68px) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-codex-card {
    min-height: clamp(260px, 58vw, 340px) !important;
  }

  html body:not(.maintenance-mode) .profession-codex-card .profession-spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #teamBoard.team-board:not([hidden]) {
    width: min(1600px, 100%) !important;
    min-height: calc(100dvh - 176px) !important;
    place-items: center !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing.seat-ring {
    --identity-seat-w: clamp(148px, 10.7vw, 182px);
    --identity-seat-h: clamp(196px, 21.5vh, 228px);
    --identity-art-h: clamp(56px, 7vh, 78px);
    position: relative !important;
    width: min(1560px, calc(100vw - 28px)) !important;
    height: clamp(520px, calc(100dvh - 214px), 690px) !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat {
    position: absolute !important;
    left: var(--seat-x) !important;
    top: var(--seat-y) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: var(--identity-seat-w) !important;
    min-height: var(--identity-seat-h) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* V1.27Beta-guard-impact-room1: quieter table surface, reliable room controls, block impact state. */
html body:not(.maintenance-mode) {
  --luminary-stage-bg: url("assets/ui/luminary-celestial-table-bg-v1.svg?v=V1.27Beta-guard-impact-room1");
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena,
html body:not(.maintenance-mode) #appRoot.app.battle-app .arena,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app .arena,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena {
  background-color: #0b121b !important;
  background-image:
    linear-gradient(180deg, rgba(255, 246, 210, 0.025), rgba(3, 6, 10, 0.18) 58%, rgba(0, 0, 0, 0.28)),
    var(--luminary-stage-bg) !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after,
html body:not(.maintenance-mode) #appRoot.app.battle-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app .arena::after,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app .arena::after,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app .arena::after,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app .arena::after {
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby::before,
html body:not(.maintenance-mode) #roomLobby.room-lobby::after {
  pointer-events: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) #roomSeatGrid.room-seat-grid,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-lobby-actions,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-actions,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-action {
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) #roomSeatGrid.room-seat-grid {
  position: relative !important;
  z-index: 45 !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat {
  isolation: isolate !important;
  z-index: 1 !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat::before,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat::after,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-slot,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-identity,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-separator,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-team-versus,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-team-versus::before,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-team-versus::after {
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-lobby-actions {
  position: relative !important;
  z-index: 80 !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-lobby-actions > button,
html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) .room-seat-action {
  position: relative !important;
  z-index: 90 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) .card-vfx-blocked {
  --card-vfx-glow: rgba(130, 232, 255, 0.5);
  filter: drop-shadow(0 0 16px var(--card-vfx-glow)) brightness(1.08) !important;
}

/* V1.27Beta-room-bg-restore1: room wallpapers and battle stage stay on their own layers. */
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena {
  background: transparent !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after,
html body:not(.maintenance-mode) #appRoot.app.character-select-app .arena::after {
  content: "" !important;
  display: block !important;
  background:
    linear-gradient(180deg, rgba(8, 36, 58, 0.04), rgba(8, 36, 58, 0.1)),
    var(--room-mode-wallpaper) center / cover no-repeat !important;
  opacity: 0.98 !important;
  filter: saturate(1.16) contrast(1.06) brightness(0.98) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="1v1"] { --room-lobby-wallpaper: var(--room-mode-bg-1v1); }
html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="2v2"] { --room-lobby-wallpaper: var(--room-mode-bg-2v2); }
html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="3v3"] { --room-lobby-wallpaper: var(--room-mode-bg-3v3); }
html body:not(.maintenance-mode) #roomLobby.room-lobby[data-mode="identity"] { --room-lobby-wallpaper: var(--room-mode-bg-identity); }

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* V1.27Beta-profession-spec-scale2: final desktop detail scale, centered and aligned. */
@media (min-width: 1001px) {
  html body:not(.maintenance-mode) .profession-spec-dialog {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 1.6vw, 26px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(1560px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    padding: clamp(16px, 1.35vw, 24px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box .rules-head {
    margin-bottom: clamp(12px, 1.05vw, 18px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail {
    width: 100% !important;
    max-width: 1508px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(760px, 1.42fr) minmax(440px, 0.78fr) !important;
    gap: clamp(22px, 1.8vw, 34px) !important;
    align-items: stretch !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(470px, 58dvh, 660px) !important;
    height: auto !important;
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.012), rgba(2, 5, 10, 0.045)),
      var(--profession-concept-art) center center / cover no-repeat,
      #070b12 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 0 22px rgba(0, 0, 0, 0.16),
      0 20px 46px rgba(0, 0, 0, 0.28) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 28px rgba(0, 0, 0, 0.14) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    align-self: stretch !important;
    min-height: clamp(470px, 58dvh, 660px) !important;
    height: auto !important;
    padding: clamp(20px, 1.7vw, 30px) clamp(118px, 7.6vw, 150px) clamp(20px, 1.7vw, 30px) clamp(20px, 1.7vw, 30px) !important;
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(690px, 1.34fr) minmax(420px, 0.82fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art,
  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    min-height: clamp(400px, 50dvh, 540px) !important;
  }
}

/* V1.27Beta-team-target-statrow1: numeric multiplayer stats, clearer target frames, stable own-card hover. */
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you.card-vfx-hover,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you.card-vfx-press,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you:hover {
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-hover,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-press,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat:hover {
  z-index: 30 !important;
  transform: translate(-50%, -50%) scale(1.09) !important;
  transform-origin: center center !important;
  border-color: rgba(255, 244, 207, 0.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 208, 0.2),
    inset 0 0 28px rgba(130, 232, 255, 0.14),
    0 0 0 2px rgba(130, 232, 255, 0.18),
    0 0 34px rgba(130, 232, 255, 0.34),
    0 20px 40px rgba(0, 0, 0, 0.34) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-hover,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-press,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat:hover {
    z-index: 30 !important;
    transform: translate(-50%, -50%) scale(1.06) !important;
    transform-origin: center center !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat-stack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 3px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat {
  min-width: 0 !important;
  min-height: 22px !important;
  grid-template-columns: 15px minmax(12px, auto) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat > .stat-label {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-label-icon {
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-marks {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 14px !important;
  color: #fff4cf !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92) !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value::before {
  content: attr(data-current) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate {
  overflow: visible !important;
  outline: 2px solid var(--target-lock-line, rgba(255, 96, 73, 0.98)) !important;
  outline-offset: 6px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate::after {
  inset: -18px -16px !important;
  z-index: 16 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-info,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-status-bar,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-equipment,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-mini-bars {
  position: relative !important;
  z-index: 22 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat-stack {
    gap: 2px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat {
    min-height: 18px !important;
    grid-template-columns: 12px minmax(10px, auto) !important;
    gap: 2px !important;
    padding: 1px 3px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat > .stat-label,
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-label-icon {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value::before {
    font-size: 10px !important;
  }
}

/* ABSOLUTE FINAL V1.27Beta-battle-luminary-cloth2: the battle view is one modern Luminary cloth surface. */
html body:not(.maintenance-mode):has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) {
  --battle-cloth-art: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-luminary-cloth2");
  --battle-cloth-ink: #203d46;
  --battle-cloth-muted: #557078;
  --battle-cloth-line: rgba(69, 118, 126, 0.2);
  --battle-cloth-panel: rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(225, 243, 243, 0.08)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
  color: var(--battle-cloth-ink) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing .seat-ring-core {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(225, 243, 243, 0.06)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-panel, .role-card, .choice, .meter-row, .energy, .fatigue, .laziness, .equipment-slot, .status-token, .team-skill-label) {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(230, 246, 244, 0.24)),
    rgba(255, 255, 255, 0.34) !important;
  border-color: var(--battle-cloth-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 8px 20px rgba(55, 96, 102, 0.07) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name, .role-card span, .role-card b, .fighter-panel b, .fighter-head strong) {
  color: var(--battle-cloth-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(237, 248, 246, 0.62)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(68, 116, 124, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(48, 78, 86, 0.12) !important;
}

/* TRUE EOF V1.27Beta-duelnotice-top2: final 1v1 top prompt and single-surface battle pass. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  z-index: 240 !important;
  width: min(480px, calc(100vw - 24px)) !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(75, 132, 142, 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(231, 247, 245, 0.72)),
    rgba(255, 255, 255, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 24px rgba(48, 78, 86, 0.14) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status::before {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > strong {
  min-width: 0 !important;
  max-width: 100% !important;
  color: #203d46 !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > span {
  justify-self: start !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > strong {
  justify-self: center !important;
  font-size: clamp(12px, 1.7vw, 14px) !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal {
  position: fixed !important;
  left: 50% !important;
  top: max(48px, calc(env(safe-area-inset-top) + 48px)) !important;
  bottom: auto !important;
  z-index: 239 !important;
  width: min(420px, calc(100vw - 28px)) !important;
  padding: 8px 12px 9px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal strong {
  font-size: clamp(16px, 2.6vw, 22px) !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal b,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal small {
  font-size: 10px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .opponent-combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring .seat-ring-core {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* TRUE EOF V1.27Beta-duelnotice-top1: keep 1v1 round prompts visible at the top. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  z-index: 220 !important;
  box-sizing: border-box !important;
  width: min(480px, calc(100vw - 24px)) !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(75, 132, 142, 0.22) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(231, 247, 245, 0.72)),
    rgba(255, 255, 255, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 10px 24px rgba(48, 78, 86, 0.14) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status::before {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > strong {
  min-width: 0 !important;
  max-width: 100% !important;
  color: #203d46 !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > span {
  justify-self: start !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .status-line.battle-status > strong {
  justify-self: center !important;
  font-size: clamp(12px, 1.7vw, 14px) !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal {
  position: fixed !important;
  left: 50% !important;
  top: max(48px, calc(env(safe-area-inset-top) + 48px)) !important;
  bottom: auto !important;
  z-index: 219 !important;
  width: min(420px, calc(100vw - 28px)) !important;
  padding: 8px 12px 9px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal strong {
  font-size: clamp(16px, 2.6vw, 22px) !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal b,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal small {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* TRUE EOF V1.27Beta-battle-cloth4: remove older battle-frame panels after every legacy sheet. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .opponent-combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring .seat-ring-core {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .combatant::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard#teamBoard.team-board::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing#seatRing.seat-ring::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* TRUE EOF V1.27Beta-battle-luminary-cloth4: beat older high-specificity battle panels. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #seatRing .seat-ring-core {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle .combatant {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* V1.27Beta-target-reticle1: stronger selectable target frames and centered battle reticles. */
@keyframes targetReticlePulse {
  0%,
  100% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes targetReticleSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes targetFrameHotPulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 8px var(--target-lock-glow, rgba(255, 104, 74, 0.58)))
      drop-shadow(0 0 18px var(--target-lock-soft, rgba(255, 104, 74, 0.32)));
  }

  50% {
    filter:
      drop-shadow(0 0 15px var(--target-lock-glow, rgba(255, 104, 74, 0.72)))
      drop-shadow(0 0 30px var(--target-lock-soft, rgba(255, 104, 74, 0.42)));
  }
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.fighter.target-candidate, .fighter.selected-target, .team-fighter.target-candidate, .team-fighter.selected-target) {
  --target-lock-line: rgba(255, 96, 73, 0.98);
  --target-lock-core: #fff3ba;
  --target-lock-soft: rgba(255, 102, 74, 0.35);
  --target-lock-glow: rgba(255, 102, 74, 0.76);
  cursor: crosshair !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.fighter[data-target-kind="ally"], .team-fighter[data-target-kind="ally"]) {
  --target-lock-line: rgba(106, 222, 255, 0.98);
  --target-lock-core: #e8fbff;
  --target-lock-soft: rgba(75, 190, 255, 0.34);
  --target-lock-glow: rgba(75, 190, 255, 0.76);
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.fighter[data-target-kind="self"], .team-fighter[data-target-kind="self"]) {
  --target-lock-line: rgba(111, 255, 229, 0.98);
  --target-lock-core: #f0fffb;
  --target-lock-soft: rgba(71, 255, 221, 0.3);
  --target-lock-glow: rgba(71, 255, 221, 0.68);
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .fighter.attack-target-candidate {
  --target-lock-line: rgba(255, 96, 73, 1);
  --target-lock-core: #fff1b2;
  --target-lock-soft: rgba(255, 86, 54, 0.4);
  --target-lock-glow: rgba(255, 86, 54, 0.86);
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face {
  --duel-target-frame: var(--target-lock-line) !important;
  --duel-target-glow: var(--target-lock-soft) !important;
  border-color: var(--target-lock-line) !important;
  filter: saturate(1.18) brightness(1.08) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 0 0 4px var(--target-lock-soft),
    0 0 30px var(--target-lock-glow),
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 28px var(--target-lock-soft) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face::after {
  inset: 0 !important;
  border: 3px solid var(--target-lock-line) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 0, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 50% 100%, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 0 50%, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 100% 50%, var(--target-lock-core) 0 3px, transparent 5px),
    linear-gradient(var(--target-lock-line) 0 0) left top / 54px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right top / 54px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left bottom / 54px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right bottom / 54px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left top / 3px 48px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right top / 3px 48px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left bottom / 3px 48px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right bottom / 3px 48px no-repeat !important;
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.1),
    inset 0 0 42px var(--target-lock-soft),
    0 0 24px var(--target-lock-glow) !important;
  animation: targetFrameHotPulse 1.55s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-fighter.target-candidate {
  --position-frame-opacity: 1 !important;
  --outer-frame-line: var(--target-lock-line) !important;
  --outer-frame-node: var(--target-lock-core) !important;
  --position-frame-glow: var(--target-lock-glow) !important;
  --target-frame-glow: var(--target-lock-glow) !important;
  border-width: 2px !important;
  border-color: var(--target-lock-line) !important;
  filter: saturate(1.16) brightness(1.07) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 28px var(--target-lock-soft),
    0 0 0 3px rgba(255, 255, 255, 0.08),
    0 0 28px var(--target-lock-glow),
    0 18px 38px rgba(0, 0, 0, 0.36) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .team-fighter.target-candidate::after {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 0, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 50% 100%, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 0 50%, var(--target-lock-core) 0 3px, transparent 5px),
    radial-gradient(circle at 100% 50%, var(--target-lock-core) 0 3px, transparent 5px),
    linear-gradient(var(--target-lock-line) 0 0) left top / 46px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right top / 46px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left bottom / 46px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right bottom / 46px 3px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left top / 3px 40px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right top / 3px 40px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) left bottom / 3px 40px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right bottom / 3px 40px no-repeat !important;
  animation: targetFrameHotPulse 1.55s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.fighter.selected-target .character-face, .team-fighter.selected-target) {
  filter: saturate(1.24) brightness(1.12) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(42px, 30%, 76px) !important;
  height: clamp(42px, 30%, 76px) !important;
  z-index: 58 !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(circle at 50% 50%, var(--target-lock-core) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, transparent 0 24%, var(--target-lock-line) 25% 27%, transparent 29% 37%, var(--target-lock-soft) 39% 42%, transparent 44%),
    conic-gradient(from 45deg, transparent 0 8%, var(--target-lock-line) 8% 11%, transparent 11% 38%, var(--target-lock-line) 38% 41%, transparent 41% 58%, var(--target-lock-line) 58% 61%, transparent 61% 88%, var(--target-lock-line) 88% 91%, transparent 91% 100%) !important;
  box-shadow:
    0 0 12px var(--target-lock-glow),
    0 0 30px var(--target-lock-soft),
    inset 0 0 12px rgba(255, 255, 255, 0.14) !important;
  filter:
    drop-shadow(0 0 7px var(--target-lock-glow))
    drop-shadow(0 0 18px var(--target-lock-soft)) !important;
  animation: targetReticlePulse 1.18s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle::before {
  inset: -10% !important;
  background:
    linear-gradient(var(--target-lock-line) 0 0) left 50% / 38% 2px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) right 50% / 38% 2px no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) 50% top / 2px 38% no-repeat,
    linear-gradient(var(--target-lock-line) 0 0) 50% bottom / 2px 38% no-repeat,
    radial-gradient(circle at 50% 50%, transparent 0 44%, var(--target-lock-line) 45% 48%, transparent 50%) !important;
  opacity: 0.92 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle::after {
  inset: 12% !important;
  border: 2px solid transparent !important;
  border-top-color: var(--target-lock-core) !important;
  border-right-color: var(--target-lock-line) !important;
  border-bottom-color: var(--target-lock-core) !important;
  opacity: 0.86 !important;
  animation: targetReticleSweep 2.4s linear infinite !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) :is(.avatar, .team-art) > .target-reticle {
    width: clamp(34px, 32%, 58px) !important;
    height: clamp(34px, 32%, 58px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face::after {
    border-width: 2px !important;
    background:
      radial-gradient(circle at 50% 0, var(--target-lock-core) 0 2px, transparent 4px),
      radial-gradient(circle at 50% 100%, var(--target-lock-core) 0 2px, transparent 4px),
      radial-gradient(circle at 0 50%, var(--target-lock-core) 0 2px, transparent 4px),
      radial-gradient(circle at 100% 50%, var(--target-lock-core) 0 2px, transparent 4px),
      linear-gradient(var(--target-lock-line) 0 0) left top / 38px 2px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) right top / 38px 2px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) left bottom / 38px 2px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) right bottom / 38px 2px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) left top / 2px 34px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) right top / 2px 34px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) left bottom / 2px 34px no-repeat,
      linear-gradient(var(--target-lock-line) 0 0) right bottom / 2px 34px no-repeat !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-battle-luminary-cloth1: one modern Luminary cloth surface, no middle battle frame. */
html body:not(.maintenance-mode):has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) {
  --battle-cloth-art: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-luminary-cloth1");
  --battle-cloth-ink: #203d46;
  --battle-cloth-muted: #557078;
  --battle-cloth-line: rgba(69, 118, 126, 0.22);
  --battle-cloth-panel: rgba(247, 252, 250, 0.72);
  --battle-cloth-panel-strong: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(225, 243, 243, 0.08)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
  color: var(--battle-cloth-ink) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(225, 243, 243, 0.06)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
  box-shadow: none !important;
  border: 0 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing .seat-ring-core {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-panel, .role-card, .choice, .meter-row, .energy, .fatigue, .laziness, .equipment-slot, .status-token, .team-skill-label) {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(230, 246, 244, 0.28)),
    rgba(255, 255, 255, 0.38) !important;
  border-color: var(--battle-cloth-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 20px rgba(55, 96, 102, 0.08) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name, .role-card span, .role-card b, .fighter-panel b, .fighter-head strong) {
  color: var(--battle-cloth-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(237, 248, 246, 0.6)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(68, 116, 124, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(48, 78, 86, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log article {
  color: var(--battle-cloth-ink) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  border-color: rgba(68, 116, 124, 0.14) !important;
  box-shadow: none !important;
}

/* V1.27Beta-battle-skillbig1: make battle character skill buttons easier to read and tap. */
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card .skill-label,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  min-height: 34px !important;
  max-width: min(100%, 252px) !important;
  padding: 7px 14px !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  flex: 0 0 24px !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text {
  max-width: calc(100% - 32px) !important;
  font-size: 15px !important;
  line-height: 1.08 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill {
  min-height: 30px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  min-height: 27px !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  gap: 5px !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text {
  max-width: calc(100% - 23px) !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card .skill-label,
  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
    min-height: 31px !important;
    padding: 6px 11px !important;
    gap: 7px !important;
    font-size: 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    flex-basis: 21px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text {
    max-width: calc(100% - 28px) !important;
    font-size: 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label,
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label),
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
    min-height: 25px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex-basis: 16px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text {
    max-width: calc(100% - 20px) !important;
    font-size: 11px !important;
  }
}

/* V1.27Beta-battle-preview-skillbox1: keep the enlarged character preview skill-name plate compact. */
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name {
  min-width: min(190px, 78%) !important;
  max-width: min(320px, calc(100% - 42px)) !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  gap: 6px !important;
  border-radius: 8px !important;
}

html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon.passive-skill-icon {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-basis: 18px !important;
}

html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text {
  max-width: calc(100% - 24px) !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name {
    min-width: min(168px, 76%) !important;
    max-width: min(280px, calc(100% - 34px)) !important;
    min-height: 28px !important;
    padding: 4px 9px !important;
    gap: 5px !important;
  }

  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon.passive-skill-icon {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    flex-basis: 16px !important;
  }

  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text {
    max-width: calc(100% - 21px) !important;
    font-size: 12px !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-mobile-start2: keep mobile room actions tappable and explain not-ready starts. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions {
    z-index: 120 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.room-lobby-app #roomLobby.room-lobby:not([hidden]) > .room-lobby-actions > button {
    z-index: 121 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.room-lobby-app ~ #languageToggle,
  html body:not(.maintenance-mode) #appRoot.app.room-lobby-app ~ #musicToggle {
    z-index: 70 !important;
  }
}

html body:not(.maintenance-mode) #roomLobby[data-ready="false"] .room-lobby-actions #startGame[data-ready="false"] {
  cursor: not-allowed !important;
  opacity: 0.9 !important;
  filter: saturate(0.82) brightness(0.98) !important;
}

html body:not(.maintenance-mode) #roomLobby[data-ready="false"] .room-lobby-actions #startGame[data-ready="false"]:hover,
html body:not(.maintenance-mode) #roomLobby[data-ready="false"] .room-lobby-actions #startGame[data-ready="false"]:focus-visible {
  transform: none !important;
  filter: saturate(0.88) brightness(1.02) !important;
}

/* ABSOLUTE EOF V1.27Beta-battle-modern-surface2: remove the remaining pale combat board. */
html body:not(.maintenance-mode):has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) {
  --battle-modern-text: #eaf4f5;
  --battle-modern-panel: rgba(13, 21, 30, 0.82);
  --battle-modern-panel-strong: rgba(18, 29, 40, 0.9);
  --battle-modern-line: rgba(151, 193, 205, 0.22);
  background-color: #101821 !important;
  background-image:
    radial-gradient(ellipse at 18% 86%, rgba(70, 173, 178, 0.18), transparent 36%),
    radial-gradient(ellipse at 82% 12%, rgba(162, 116, 210, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #17232c 0%, #101821 46%, #0b1118 100%) !important;
  background-size: auto, auto, 44px 44px, auto !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
  color: var(--battle-modern-text) !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at 22% 78%, rgba(77, 190, 174, 0.13), transparent 38%),
    radial-gradient(ellipse at 78% 22%, rgba(115, 151, 196, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.08)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 100%) !important;
  background-size: auto, auto, auto, 36px 36px !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden])::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .combatant.combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant.combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle .combatant.combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel.fighter-panel,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .fatigue-row.fatigue-row {
  color: var(--battle-modern-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14)),
    var(--battle-modern-panel) !important;
  border: 1px solid var(--battle-modern-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle :is(.role-card, .choice, .meter-row, .energy, .fatigue, .laziness, .equipment-slot, .status-token) {
  color: var(--battle-modern-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.13)),
    var(--battle-modern-panel-strong) !important;
  border-color: var(--battle-modern-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name, .role-card span, .role-card b, .fighter-panel b, .fighter-head strong) {
  color: #edf7f7 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.68) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: var(--battle-modern-text) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08)),
    rgba(15, 24, 34, 0.86) !important;
  border: 1px solid rgba(151, 193, 205, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

/* V1.27Beta-battle-modern-surface1: this final-loaded file owns battle surface, no pale board. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode):has(#battle.battle:not([hidden])) {
  --battle-surface: #101821;
  --battle-panel-modern: rgba(13, 21, 30, 0.78);
  --battle-line-modern: rgba(151, 193, 205, 0.22);
  --battle-text-modern: #eaf4f5;
  background-color: var(--battle-surface) !important;
  background-image:
    radial-gradient(ellipse at 18% 86%, rgba(70, 173, 178, 0.18), transparent 36%),
    radial-gradient(ellipse at 82% 12%, rgba(162, 116, 210, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #17232c 0%, #101821 46%, #0b1118 100%) !important;
  background-size: auto, auto, 44px 44px, auto !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
  color: var(--battle-text-modern) !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at 22% 78%, rgba(77, 190, 174, 0.13), transparent 38%),
    radial-gradient(ellipse at 78% 22%, rgba(115, 151, 196, 0.12), transparent 35%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.08)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 100%) !important;
  background-size: auto, auto, auto, 36px 36px !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-blend-mode: normal !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden])::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle .combatant {
  background:
    linear-gradient(180deg, rgba(28, 42, 54, 0.86), rgba(11, 18, 26, 0.9)),
    linear-gradient(135deg, rgba(85, 175, 180, 0.11), rgba(134, 109, 176, 0.08)) !important;
  border: 1px solid rgba(153, 198, 208, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .fighter-panel,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .role-card,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .choice,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .meter-row,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .energy,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .fatigue,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .laziness,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .equipment-slot,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle .status-token {
  color: var(--battle-text-modern) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.13)),
    var(--battle-panel-modern) !important;
  border-color: var(--battle-line-modern) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name) {
  color: #dbe9ea !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head strong, .fighter-panel b, .role-card b) {
  color: #f5fbf8 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section {
  color: var(--battle-text-modern) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.1)),
    rgba(11, 18, 26, 0.84) !important;
  border: 1px solid rgba(151, 193, 205, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 40px rgba(0, 0, 0, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: #dcebed !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08)),
    rgba(15, 24, 34, 0.86) !important;
  border: 1px solid rgba(151, 193, 205, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log article,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log article,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log article {
  color: #d9e8e9 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.06)),
    rgba(18, 29, 40, 0.88) !important;
  border-color: rgba(151, 193, 205, 0.18) !important;
  box-shadow: none !important;
}

/* V1.27Beta-profession-spec-scale1: desktop spec detail uses the spare width for a larger aligned concept panel. */
@media (min-width: 1001px) {
  html body:not(.maintenance-mode) .profession-spec-dialog {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 1.8vw, 28px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(1520px, calc(100vw - 34px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    padding: clamp(16px, 1.35vw, 24px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box .rules-head {
    margin-bottom: clamp(12px, 1.05vw, 18px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail {
    width: 100% !important;
    max-width: 1468px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(720px, 1.36fr) minmax(430px, 0.84fr) !important;
    gap: clamp(22px, 1.75vw, 32px) !important;
    align-items: stretch !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(430px, 55dvh, 620px) !important;
    height: auto !important;
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.01), rgba(2, 5, 10, 0.04)),
      var(--profession-concept-art) center center / cover no-repeat,
      #070b12 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 0 22px rgba(0, 0, 0, 0.18),
      0 20px 46px rgba(0, 0, 0, 0.28) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    align-self: stretch !important;
    min-height: clamp(430px, 55dvh, 620px) !important;
    height: auto !important;
    padding: clamp(20px, 1.7vw, 30px) clamp(118px, 8vw, 158px) clamp(20px, 1.7vw, 30px) clamp(20px, 1.7vw, 30px) !important;
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(660px, 1.28fr) minmax(420px, 0.86fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art,
  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    min-height: clamp(390px, 50dvh, 540px) !important;
  }
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(100%, calc(100vw - 18px)) !important;
    margin: auto !important;
  }
}

/* V1.27Beta-battle-skill-label1: final-loaded override for battle skill labels. */
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name {
  box-sizing: border-box !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: min(238px, 88%) !important;
  max-width: min(420px, calc(100% - 32px)) !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(142, 197, 225, 0.72) !important;
  border-left: 3px solid rgba(75, 155, 202, 0.92) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, rgba(238, 248, 253, 0.94), rgba(195, 224, 239, 0.86)) !important;
  color: #153047 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 8px 18px rgba(5, 20, 32, 0.22) !important;
  filter: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill::before,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill::after,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text::before,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon,
html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon.passive-skill-icon {
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  align-self: center !important;
  grid-row: auto !important;
}

html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-text {
  display: inline-block !important;
  grid-row: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(14px, 1.25vw, 17px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  min-height: 22px !important;
  max-width: 100% !important;
  vertical-align: middle !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  flex: 0 0 14px !important;
  display: block !important;
  object-fit: contain !important;
  margin: 0 !important;
  align-self: center !important;
  grid-row: auto !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-text {
  display: inline-block !important;
  grid-row: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 18px) !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.skill-tip,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.preview-skill-tip,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill.inline-skill-name {
    min-height: 30px !important;
    padding: 5px 11px !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon,
  html body:not(.maintenance-mode) #battleCharacterDialog #battleCharacterPreview #battlePreviewSkill .skill-inline-icon.passive-skill-icon {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex-basis: 18px !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon,
  html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    flex-basis: 12px !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) {
  background-color: #050b13 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(241, 251, 254, 0.34) 42%, rgba(154, 212, 233, 0.24)),
    var(--battle-stage-art, url("assets/ui/battle-arena-celestial-duel-v1.png?v=V1.27Beta-room-bg-restore1")) !important;
  background-blend-mode: normal, screen !important;
  background-position: center center, center center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: rgba(128, 190, 210, 0.44) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -22px 72px rgba(103, 166, 190, 0.16),
    0 24px 56px rgba(44, 88, 112, 0.16) !important;
}

/* V1.27Beta-room-bg-clean4: bright crystal room wallpapers, drawn once behind the room UI. */
html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"] {
  --room-mode-wallpaper: url("assets/ui/mode-1v1-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean4") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="2v2"] {
  --room-mode-wallpaper: url("assets/ui/mode-2v2-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean4") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="3v3"] {
  --room-mode-wallpaper: url("assets/ui/mode-3v3-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean4") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="identity"] {
  --room-mode-wallpaper: url("assets/ui/mode-identity-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean4") !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after {
  content: "" !important;
  display: block !important;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, 0.22), rgba(255, 255, 255, 0.08) 48%, rgba(4, 7, 12, 0.2)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 246, 218, 0.06) 42%, rgba(43, 79, 116, 0.14)),
    var(--room-mode-wallpaper) center / cover no-repeat !important;
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.02) brightness(1.02) !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* V1.27Beta-room-bg-clean4: no pseudo image layer over the room. */
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena {
  background-color: #eaf7ff !important;
  background-image:
    linear-gradient(90deg, rgba(4, 7, 12, 0.18), rgba(255, 255, 255, 0.06) 48%, rgba(4, 7, 12, 0.16)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 246, 218, 0.05) 42%, rgba(43, 79, 116, 0.1)),
    var(--room-mode-wallpaper) !important;
  background-size: cover, cover, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/* V1.27Beta-profession-spec-layout12: image-ratio driven spec detail frame. */
html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card,
html body:not(.maintenance-mode) #codexOpenOpportunity.game-codex-opportunity {
  background:
    linear-gradient(180deg, rgba(22, 9, 4, 0.02), rgba(17, 7, 4, 0.56)),
    url("assets/ui/codex-card-opportunity-fatecards-v4-warm.png?v=V1.27Beta-profession-spec-layout12") center / cover no-repeat,
    #1b0d08 !important;
  border-color: rgba(208, 143, 71, 0.64) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 150, 0.14),
    0 18px 42px rgba(35, 12, 4, 0.34) !important;
}

html body:not(.maintenance-mode) .profession-codex-card {
  --profession-bg-position: 92% center;
}

html body:not(.maintenance-mode) .profession-codex-bg {
  background:
    linear-gradient(90deg, rgba(2, 5, 11, 0.74) 0%, rgba(2, 5, 11, 0.42) 48%, rgba(2, 5, 11, 0.1) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.02), rgba(3, 6, 12, 0.62)),
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    rgba(5, 9, 16, 0.96) !important;
}

html body:not(.maintenance-mode) .profession-codex-summary {
  max-width: min(640px, 100%) !important;
  margin: 0 !important;
  color: color-mix(in srgb, var(--profession-color) 82%, #fff8df) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(12px, 0.92vw, 15px) !important;
  font-weight: 860 !important;
  line-height: 1.45 !important;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.86) !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button[data-spec="guardian-druid"] {
  grid-column: auto !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button[data-spec="feral-druid"] {
  grid-column: auto !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button[data-spec="restoration-druid"] {
  grid-column: auto !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button[data-spec="balance-druid"] {
  grid-column: auto !important;
  grid-row: 1 !important;
}

html body:not(.maintenance-mode) .profession-spec-box {
  --profession-bg-position: 92% center;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.08), rgba(78, 43, 14, 0.12)),
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    #ead9bb !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  content: "" !important;
  position: absolute !important;
  left: 5.5% !important;
  top: 6% !important;
  width: min(46%, 420px) !important;
  height: 58% !important;
  border: 1px solid color-mix(in srgb, var(--profession-color) 58%, rgba(94, 58, 24, 0.32)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 245, 221, 0.08), rgba(32, 17, 8, 0.26)),
    var(--profession-concept-art) center / cover no-repeat,
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat !important;
  box-shadow:
    0 16px 30px rgba(54, 31, 13, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  left: auto !important;
  right: 5.5% !important;
  top: 8% !important;
  bottom: auto !important;
  width: min(42%, 380px) !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy span,
html body:not(.maintenance-mode) .profession-spec-detail-copy strong,
html body:not(.maintenance-mode) .profession-spec-detail-copy em,
html body:not(.maintenance-mode) .profession-spec-detail-copy p,
html body:not(.maintenance-mode) .profession-spec-detail-copy small,
html body:not(.maintenance-mode) .profession-spec-tags span,
html body:not(.maintenance-mode) .profession-spec-notes li {
  color: var(--profession-color) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 2px 8px rgba(75, 44, 18, 0.22) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy p,
html body:not(.maintenance-mode) .profession-spec-detail-copy small,
html body:not(.maintenance-mode) .profession-spec-notes li {
  font-weight: 850 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-hero-art::before {
    left: 6% !important;
    right: 6% !important;
    top: 6% !important;
    width: auto !important;
    height: 46% !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::after {
    left: 10% !important;
    right: 10% !important;
    top: auto !important;
    bottom: 6% !important;
    width: auto !important;
  }
}

/* V1.27Beta-profession-spec-layout12: final spec detail composition. */
html body:not(.maintenance-mode) .profession-codex-card,
html body:not(.maintenance-mode) .profession-spec-box {
  --profession-bg-position: 92% center;
}

html body:not(.maintenance-mode) .profession-spec-box {
  width: min(1240px, calc(100vw - 22px)) !important;
  max-height: calc(100dvh - 26px) !important;
  overflow: auto !important;
  border-radius: 10px !important;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, 0.88), rgba(4, 7, 12, 0.68) 44%, rgba(4, 7, 12, 0.82)),
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--profession-color) 20%, transparent), transparent 34%),
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    rgba(5, 8, 13, 0.96) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(368px, 0.96fr) !important;
  gap: clamp(16px, 1.5vw, 22px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  position: relative !important;
  min-height: clamp(400px, 43vw, 610px) !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--profession-color) 40%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.02), rgba(2, 5, 10, 0.18)),
    var(--profession-concept-art) center / cover no-repeat,
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    #090d14 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 76% 76%, color-mix(in srgb, var(--profession-color) 26%, transparent), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 42%, rgba(0, 0, 0, 0.3)) !important;
  box-shadow: inset 0 0 58px rgba(0, 0, 0, 0.5) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important;
  right: clamp(16px, 3vw, 36px) !important;
  top: auto !important;
  bottom: clamp(16px, 3vw, 34px) !important;
  width: clamp(122px, 17vw, 210px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(3, 5, 10, 0.78) 0 44%, transparent 70%),
    var(--profession-spec-art) center / contain no-repeat !important;
  filter:
    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 20px color-mix(in srgb, var(--profession-color) 44%, transparent)) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  display: grid !important;
  align-content: start !important;
  gap: clamp(10px, 1vw, 14px) !important;
  padding: clamp(18px, 2vw, 28px) !important;
  border: 1px solid color-mix(in srgb, var(--profession-color) 30%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--profession-deep) 64%, rgba(255, 255, 255, 0.06)), rgba(5, 8, 13, 0.76)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy > span {
  color: color-mix(in srgb, var(--profession-color) 72%, #fff6d8) !important;
  font-size: clamp(12px, 0.88vw, 14px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  opacity: 0.92 !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy strong {
  color: #fff7df !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(42px, 4.2vw, 62px) !important;
  line-height: 0.98 !important;
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.72),
    0 0 18px color-mix(in srgb, var(--profession-color) 34%, transparent) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy em {
  justify-self: start !important;
  width: auto !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--profession-role-color) 60%, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(2, 6, 12, 0.58) !important;
  color: var(--profession-role-color) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  gap: 9px !important;
  margin: 2px 0 4px !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button {
  position: relative !important;
  display: grid !important;
  align-content: end !important;
  justify-items: center !important;
  min-height: 104px !important;
  padding: 58px 7px 8px !important;
  border: 1px solid color-mix(in srgb, var(--profession-color) 30%, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 54%),
    var(--profession-spec-art) center 8px / 60px 60px no-repeat,
    rgba(4, 8, 15, 0.64) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  cursor: pointer !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button.is-active {
  border-color: color-mix(in srgb, var(--profession-role-color) 74%, #fff8df) !important;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-role-color) 28%, transparent), transparent 56%),
    var(--profession-spec-art) center 6px / 64px 64px no-repeat,
    rgba(7, 10, 17, 0.82) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button b {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #fff8df !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button small {
  position: static !important;
  display: block !important;
  margin-top: 4px !important;
  color: var(--profession-role-color) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy p {
  margin: 0 !important;
  padding: 13px 15px !important;
  border-left: 3px solid color-mix(in srgb, var(--profession-color) 70%, #fff8df) !important;
  border-radius: 8px !important;
  background: rgba(2, 6, 12, 0.48) !important;
  color: color-mix(in srgb, var(--profession-color) 82%, #fff8df) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(14px, 1vw, 16px) !important;
  font-weight: 850 !important;
  line-height: 1.55 !important;
}

html body:not(.maintenance-mode) .profession-spec-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body:not(.maintenance-mode) .profession-spec-tags span {
  padding: 6px 11px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--profession-role-color) 54%, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(3, 7, 14, 0.64) !important;
  color: #fff6d8 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body:not(.maintenance-mode) .profession-spec-notes {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:not(.maintenance-mode) .profession-spec-notes li {
  position: relative !important;
  padding: 10px 12px 10px 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: color-mix(in srgb, var(--profession-color) 74%, #fff8df) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1.45 !important;
}

html body:not(.maintenance-mode) .profession-spec-notes li::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 16px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--profession-role-color) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--profession-role-color) 60%, transparent) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy small {
  display: block !important;
  padding-top: 3px !important;
  color: color-mix(in srgb, var(--profession-color) 66%, #fff8df) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    min-height: clamp(300px, 54vw, 430px) !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(100vw - 12px, 720px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button {
    min-height: 92px !important;
    padding-top: 52px !important;
    background:
      radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 54%),
      var(--profession-spec-art) center 7px / 52px 52px no-repeat,
      rgba(4, 8, 15, 0.64) !important;
  }
}

/* V1.27Beta-profession-spec-layout12: adaptive detail frame and bright top-right emblem. */
html body:not(.maintenance-mode) .profession-spec-box {
  width: min(1380px, calc(100vw - 18px)) !important;
  max-height: calc(100dvh - 18px) !important;
  padding: clamp(12px, 1.25vw, 18px) !important;
}

html body:not(.maintenance-mode) .profession-spec-box .rules-head {
  margin-bottom: clamp(10px, 1vw, 14px) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail {
  grid-template-columns: minmax(0, 1.22fr) minmax(350px, 0.78fr) !important;
  gap: clamp(14px, 1.25vw, 20px) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  min-height: clamp(430px, 68dvh, 690px) !important;
  height: clamp(430px, 68dvh, 690px) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.01), rgba(2, 5, 10, 0.1)),
    var(--profession-concept-art) center center / auto 118% no-repeat,
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    #090d14 !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 22%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 48%, rgba(0, 0, 0, 0.12)) !important;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.34) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  right: clamp(16px, 2.2vw, 32px) !important;
  top: clamp(14px, 2vw, 30px) !important;
  bottom: auto !important;
  width: clamp(132px, 13.5vw, 190px) !important;
  border-radius: 0 !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
  opacity: 1 !important;
  filter:
    brightness(1.18)
    saturate(1.18)
    contrast(1.05)
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 22px color-mix(in srgb, var(--profession-color) 55%, transparent))
    drop-shadow(0 0 10px rgba(255, 245, 206, 0.32)) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  min-height: clamp(430px, 68dvh, 690px) !important;
  align-content: start !important;
  overflow: auto !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button {
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-color) 30%, transparent), transparent 58%),
    var(--profession-spec-art) center 7px / 66px 66px no-repeat,
    rgba(4, 8, 15, 0.58) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button.is-active {
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-role-color) 34%, transparent), transparent 60%),
    var(--profession-spec-art) center 5px / 70px 70px no-repeat,
    rgba(7, 10, 17, 0.72) !important;
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art,
  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    height: auto !important;
    min-height: 0 !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    aspect-ratio: 16 / 10 !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.01), rgba(2, 5, 10, 0.1)),
      var(--profession-concept-art) center center / auto 120% no-repeat,
      var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
      #090d14 !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(100vw - 10px, 720px) !important;
    max-height: calc(100dvh - 10px) !important;
    padding: 10px !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    aspect-ratio: 4 / 3 !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::after {
    width: clamp(94px, 25vw, 128px) !important;
    right: 12px !important;
    top: 10px !important;
  }
}

/* V1.27Beta-profession-spec-layout12: make the art frame follow each concept image. */
html body:not(.maintenance-mode) .profession-spec-box {
  width: min(1360px, calc(100vw - 18px)) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail {
  grid-template-columns: minmax(0, 1.14fr) minmax(350px, 0.86fr) !important;
  align-items: start !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.015), rgba(2, 5, 10, 0.08)),
    var(--profession-concept-art) center center / cover no-repeat,
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    #090d14 !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  background:
    radial-gradient(circle at 83% 17%, color-mix(in srgb, var(--profession-color) 18%, transparent), transparent 19%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 48%, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.26) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  min-height: 0 !important;
  height: auto !important;
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-hero-art {
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.015), rgba(2, 5, 10, 0.08)),
      var(--profession-concept-art) center center / cover no-repeat,
      var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
      #090d14 !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-hero-art {
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
  }
}

/* V1.27Beta-profession-spec-layout12: keep the concept art complete and move the spec emblem to the title side. */
html body:not(.maintenance-mode) .profession-spec-detail {
  grid-template-columns: minmax(0, 1.28fr) minmax(360px, 0.72fr) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.006), rgba(2, 5, 10, 0.035)),
    var(--profession-concept-art) center center / contain no-repeat,
    var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
    #090d14 !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.018), transparent 44%, rgba(0, 0, 0, 0.028)) !important;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.2) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  position: relative !important;
  padding-right: clamp(116px, 10vw, 172px) !important;
}

html body:not(.maintenance-mode) .profession-spec-title-icon {
  position: absolute !important;
  top: clamp(18px, 2vw, 28px) !important;
  right: clamp(16px, 1.8vw, 28px) !important;
  display: block !important;
  width: clamp(92px, 8vw, 136px) !important;
  aspect-ratio: 1 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
  opacity: 1 !important;
  filter:
    brightness(1.2)
    saturate(1.18)
    contrast(1.06)
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 22px color-mix(in srgb, var(--profession-color) 56%, transparent))
    drop-shadow(0 0 10px rgba(255, 245, 206, 0.36)) !important;
  z-index: 2 !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy strong {
  max-width: calc(100% - clamp(8px, 1vw, 18px)) !important;
  padding-right: 0 !important;
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.006), rgba(2, 5, 10, 0.035)),
      var(--profession-concept-art) center center / contain no-repeat,
      var(--profession-bg) var(--profession-bg-position) / cover no-repeat,
      #090d14 !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    padding-right: clamp(82px, 25vw, 112px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-title-icon {
    width: clamp(70px, 23vw, 96px) !important;
    top: 14px !important;
    right: 14px !important;
  }
}

/* V1.27Beta-profession-spec-layout12: make ???? use the same codex icon system in a compact four-slot row. */
html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: clamp(3px, 0.34vw, 5px) !important;
  align-items: end !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: var(--profession-spec-art) center / contain no-repeat !important;
  transform-origin: 50% 100% !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button::before {
  inset: 10% 1% 2% !important;
  border-radius: 999px !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button b {
  left: 2% !important;
  right: 2% !important;
  bottom: -2px !important;
  font-size: clamp(11px, 0.78vw, 14px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  html body:not(.maintenance-mode) .profession-codex-card[data-profession="druid"] .profession-spec-icon-button b {
    font-size: clamp(10px, 2.7vw, 12px) !important;
  }
}

/* V1.27Beta-profession-spec-layout12: portrait concept-only spec detail panel and single-row spec switcher. */
html body:not(.maintenance-mode) .profession-spec-box {
  width: min(1180px, calc(100vw - 18px)) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail {
  grid-template-columns: minmax(270px, 390px) minmax(0, 1fr) !important;
  gap: clamp(16px, 1.55vw, 22px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  justify-self: center !important;
  align-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 236, 0.012), rgba(2, 5, 10, 0.055)),
    var(--profession-concept-art) center center / contain no-repeat,
    #070b12 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    inset 0 0 26px rgba(0, 0, 0, 0.2),
    0 18px 40px rgba(0, 0, 0, 0.3) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(0, 0, 0, 0.035)) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-copy {
  align-self: stretch !important;
  min-height: 0 !important;
  height: auto !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher {
  grid-template-columns: repeat(var(--profession-spec-count, 3), minmax(0, 1fr)) !important;
  grid-auto-flow: column !important;
  gap: clamp(5px, 0.62vw, 8px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button {
  min-width: 0 !important;
  min-height: clamp(82px, 8.2dvh, 100px) !important;
  padding: clamp(48px, 5.2dvh, 58px) 5px 7px !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 54%),
    var(--profession-spec-art) center 7px / clamp(46px, 4.7dvh, 58px) clamp(46px, 4.7dvh, 58px) no-repeat,
    rgba(4, 8, 15, 0.64) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button.is-active {
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-role-color) 30%, transparent), transparent 58%),
    var(--profession-spec-art) center 6px / clamp(50px, 5dvh, 62px) clamp(50px, 5dvh, 62px) no-repeat,
    rgba(7, 10, 17, 0.82) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button b {
  font-size: clamp(11px, 0.82vw, 13px) !important;
}

html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button small {
  font-size: clamp(8px, 0.64vw, 10px) !important;
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    width: min(420px, 100%) !important;
    align-self: start !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-hero-art {
    width: min(360px, 100%) !important;
    aspect-ratio: 9 / 16 !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher {
    grid-template-columns: repeat(var(--profession-spec-count, 3), minmax(0, 1fr)) !important;
    overflow-x: auto !important;
  }
}

/* V1.27Beta-profession-concept-wide1: every spec concept stays horizontal and undistorted. */
html body:not(.maintenance-mode) .profession-spec-detail {
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr) !important;
  align-items: start !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
  align-self: start !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.06)),
    var(--profession-concept-art) center center / contain no-repeat,
    #070b12 !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.038)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 0 28px rgba(0, 0, 0, 0.18) !important;
}

html body:not(.maintenance-mode) .profession-spec-hero-art::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1000px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-spec-hero-art {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
  }
}

/* V1.27Beta-room-bg-clean5: final room wallpaper layer, last in this file by design. */
html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"] {
  --room-mode-wallpaper: url("assets/ui/mode-1v1-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="2v2"] {
  --room-mode-wallpaper: url("assets/ui/mode-2v2-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="3v3"] {
  --room-mode-wallpaper: url("assets/ui/mode-3v3-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="identity"] {
  --room-mode-wallpaper: url("assets/ui/mode-identity-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena {
  background-color: #eaf7ff !important;
  background-image:
    linear-gradient(90deg, rgba(4, 7, 12, 0.14), rgba(255, 255, 255, 0.06) 48%, rgba(4, 7, 12, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 246, 218, 0.05) 42%, rgba(43, 79, 116, 0.08)),
    var(--room-mode-wallpaper) !important;
  background-size: cover, cover, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* V1.27Beta-reaction-discipline-codex-battle1: opportunity codex uses event-card art with a fantasy slot machine. */
html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card,
html body:not(.maintenance-mode) #codexOpenOpportunity.game-codex-opportunity {
  background:
    linear-gradient(90deg, rgba(5, 7, 20, 0.64) 0%, rgba(5, 7, 20, 0.18) 46%, rgba(5, 7, 20, 0.02) 100%),
    linear-gradient(180deg, rgba(8, 7, 26, 0.04), rgba(7, 4, 18, 0.52)),
    url("assets/ui/codex-card-opportunity-slot-machine-v2.webp?v=V1.27Beta-reaction-discipline-codex-battle1") center / cover no-repeat,
    #080719 !important;
  border-color: rgba(123, 96, 236, 0.58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 106, 0.16),
    0 18px 42px rgba(18, 12, 44, 0.38),
    0 0 28px rgba(101, 82, 230, 0.16) !important;
}

html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card > span,
html body:not(.maintenance-mode) #gameCodexDialog #codexOpenOpportunity.game-codex-card > small {
  color: #f4e8ff !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow:
    0 2px 8px rgba(4, 3, 14, 0.96),
    0 0 12px rgba(87, 91, 255, 0.28) !important;
}

html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-box {
  border-color: rgba(123, 96, 236, 0.52) !important;
  background:
    linear-gradient(90deg, rgba(6, 7, 24, 0.84) 0%, rgba(8, 7, 28, 0.66) 42%, rgba(7, 5, 18, 0.8) 100%),
    linear-gradient(180deg, rgba(11, 8, 34, 0.24), rgba(6, 4, 14, 0.96)),
    url("assets/ui/codex-card-opportunity-slot-machine-v2.webp?v=V1.27Beta-reaction-discipline-codex-battle1") center / cover no-repeat,
    #080719 !important;
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.58),
    inset 0 0 42px rgba(111, 97, 231, 0.12),
    0 0 32px rgba(78, 72, 212, 0.14) !important;
}

html body:not(.maintenance-mode) #opportunityLibraryDialog .opportunity-library-note {
  color: rgba(240, 230, 255, 0.8) !important;
}

/* V1.27Beta-reaction-discipline-codex-battle1: battle screen uses one integrated book-page table surface. */
html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) {
  background:
    linear-gradient(180deg, rgba(34, 22, 12, 0.1), rgba(34, 22, 12, 0.18)),
    url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-reaction-discipline-codex-battle1") center / cover no-repeat,
    #eadbb9 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) {
  --battle-stage-art: url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-reaction-discipline-codex-battle1") !important;
  --battle-ink: #2b2019 !important;
  background:
    linear-gradient(180deg, rgba(251, 241, 216, 0.06), rgba(105, 76, 42, 0.12)),
    var(--battle-stage-art) center / cover no-repeat,
    #eadbb9 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden])::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) .arena,
html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) .fighters,
html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) #seatRing.seat-ring {
  background: transparent !important;
  box-shadow: none !important;
}

/* ABSOLUTE EOF V1.27Beta-room-bg-clean5: room lobby background wins after every older layer. */
html body:not(.maintenance-mode) #appRoot.app[data-room-mode="1v1"] {
  --room-mode-wallpaper: url("assets/ui/mode-1v1-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="2v2"] {
  --room-mode-wallpaper: url("assets/ui/mode-2v2-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="3v3"] {
  --room-mode-wallpaper: url("assets/ui/mode-3v3-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app[data-room-mode="identity"] {
  --room-mode-wallpaper: url("assets/ui/mode-identity-cover-crystal-clean-gpt2.png?v=V1.27Beta-room-bg-clean5") !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena {
  background-color: #eaf7ff !important;
  background-image:
    linear-gradient(90deg, rgba(4, 7, 12, 0.14), rgba(255, 255, 255, 0.06) 48%, rgba(4, 7, 12, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 246, 218, 0.05) 42%, rgba(43, 79, 116, 0.08)),
    var(--room-mode-wallpaper) !important;
  background-size: cover, cover, cover !important;
  background-position: center center, center center, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::before,
html body:not(.maintenance-mode) #appRoot.app.room-lobby-app .arena::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

html body:not(.maintenance-mode) #roomLobby.room-lobby:not([hidden]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* ABSOLUTE EOF V1.27Beta-profession-spec-scale2: desktop concept detail wins after older layouts. */
@media (min-width: 1001px) {
  html body:not(.maintenance-mode) .profession-spec-dialog {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(12px, 1.6vw, 26px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box {
    width: min(1560px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 28px) !important;
    margin: auto !important;
    padding: clamp(16px, 1.35vw, 24px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-box .rules-head {
    margin-bottom: clamp(12px, 1.05vw, 18px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail {
    width: 100% !important;
    max-width: 1508px !important;
    margin: 0 auto !important;
    grid-template-columns: minmax(760px, 1.42fr) minmax(440px, 0.78fr) !important;
    gap: clamp(22px, 1.8vw, 34px) !important;
    align-items: stretch !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art {
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-height: clamp(470px, 58dvh, 660px) !important;
    height: auto !important;
    aspect-ratio: var(--profession-concept-ratio, 16 / 9) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 236, 0.012), rgba(2, 5, 10, 0.045)),
      var(--profession-concept-art) center center / cover no-repeat,
      #070b12 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 0 22px rgba(0, 0, 0, 0.16),
      0 20px 46px rgba(0, 0, 0, 0.28) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(0, 0, 0, 0.04)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 28px rgba(0, 0, 0, 0.14) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    align-self: stretch !important;
    min-height: clamp(470px, 58dvh, 660px) !important;
    height: auto !important;
    padding: clamp(20px, 1.7vw, 30px) clamp(118px, 7.6vw, 150px) clamp(20px, 1.7vw, 30px) clamp(20px, 1.7vw, 30px) !important;
  }
}

@media (min-width: 1280px) and (max-height: 820px) {
  html body:not(.maintenance-mode) .profession-spec-detail {
    grid-template-columns: minmax(690px, 1.34fr) minmax(420px, 0.82fr) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-hero-art,
  html body:not(.maintenance-mode) .profession-spec-detail-copy {
    min-height: clamp(400px, 50dvh, 540px) !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-team-target-statrow1: numeric multiplayer stats, wider target frames, no own-card hover drift. */
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you.card-vfx-hover,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you.card-vfx-press,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #youCard.fighter.you:hover {
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-hover,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-press,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app:not(.identity-battle-app) #battle.battle:not([hidden]) #seatRing .seat-fighter.self-seat:hover {
  z-index: 30 !important;
  transform: translate(-50%, -50%) scale(1.09) !important;
  transform-origin: center center !important;
  border-color: rgba(255, 244, 207, 0.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 208, 0.2),
    inset 0 0 28px rgba(130, 232, 255, 0.14),
    0 0 0 2px rgba(130, 232, 255, 0.18),
    0 0 34px rgba(130, 232, 255, 0.34),
    0 20px 40px rgba(0, 0, 0, 0.34) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-hover,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat.card-vfx-press,
  html body:not(.maintenance-mode) #appRoot.app.identity-battle-app #battle.battle.identity-battle:not([hidden]) #seatRing .seat-fighter.self-seat:hover {
    z-index: 30 !important;
    transform: translate(-50%, -50%) scale(1.06) !important;
    transform-origin: center center !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat-stack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 3px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat {
  min-width: 0 !important;
  min-height: 22px !important;
  grid-template-columns: 15px minmax(12px, auto) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat > .stat-label {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  height: 15px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-label-icon {
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  object-fit: contain !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-marks {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 14px !important;
  color: #fff4cf !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92) !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value::before {
  content: attr(data-current) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate {
  overflow: visible !important;
  outline: 2px solid var(--target-lock-line, rgba(255, 96, 73, 0.98)) !important;
  outline-offset: 6px !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate::after {
  inset: -18px -16px !important;
  z-index: 16 !important;
}

html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-info,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-status-bar,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-equipment,
html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter.target-candidate .team-mini-bars {
  position: relative !important;
  z-index: 22 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat-stack {
    gap: 2px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat {
    min-height: 18px !important;
    grid-template-columns: 12px minmax(10px, auto) !important;
    gap: 2px !important;
    padding: 1px 3px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat > .stat-label,
  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-label-icon {
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.team-battle-app #battle.battle:not([hidden]) #seatRing .seat-fighter .team-stat .stat-value::before {
    font-size: 10px !important;
  }
}

/* TRUE EOF V1.27Beta-battle-luminary-cloth3: final battle surface override. */
html body:not(.maintenance-mode):has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) {
  --battle-cloth-art: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-luminary-cloth3");
  --battle-cloth-ink: #203d46;
  --battle-cloth-line: rgba(69, 118, 126, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(225, 243, 243, 0.08)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
  color: var(--battle-cloth-ink) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(225, 243, 243, 0.06)),
    var(--battle-cloth-art) center / cover no-repeat,
    #edf7f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .fighters,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .combatant,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing .seat-ring-core {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) .arena::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #teamBoard.team-board::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #seatRing.seat-ring::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-panel, .role-card, .choice, .meter-row, .energy, .fatigue, .laziness, .equipment-slot, .status-token, .team-skill-label) {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(230, 246, 244, 0.24)),
    rgba(255, 255, 255, 0.34) !important;
  border-color: var(--battle-cloth-line) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 8px 20px rgba(55, 96, 102, 0.07) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name, .role-card span, .role-card b, .fighter-panel b, .fighter-head strong) {
  color: var(--battle-cloth-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: var(--battle-cloth-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(237, 248, 246, 0.62)),
    rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(68, 116, 124, 0.2) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 30px rgba(48, 78, 86, 0.12) !important;
}

/* TRUE EOF V1.27Beta-duelnotice-top3: force final battle surface and 1v1 prompt placement. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  z-index: 260 !important;
  width: min(480px, calc(100vw - 24px)) !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 5px 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(75, 132, 142, 0.22) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(231, 247, 245, 0.72)), rgba(255, 255, 255, 0.68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 10px 24px rgba(48, 78, 86, 0.14) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line::before {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong {
  min-width: 0 !important;
  max-width: 100% !important;
  color: #203d46 !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > span {
  justify-self: start !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) .battle-status.status-line > strong {
  justify-self: center !important;
  font-size: clamp(12px, 1.7vw, 14px) !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal {
  position: fixed !important;
  left: 50% !important;
  top: max(48px, calc(env(safe-area-inset-top) + 48px)) !important;
  bottom: auto !important;
  z-index: 259 !important;
  width: min(420px, calc(100vw - 28px)) !important;
  padding: 8px 12px 9px !important;
  gap: 3px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) .settlement-reveal strong {
  font-size: clamp(16px, 2.6vw, 22px) !important;
  line-height: 1.05 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighters, .combatant, .opponent-combatant),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) :is(#teamBoard.team-board, #seatRing.seat-ring, #seatRing.seat-ring .seat-ring-core) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighters, .combatant)::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighters, .combatant)::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) :is(#teamBoard.team-board, #seatRing.seat-ring)::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) :is(#teamBoard.team-board, #seatRing.seat-ring)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* TRUE EOF V1.27Beta-battle-frame-color1: cleaner combat frame and status palette. */
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) {
  --battle-frame-ink: #1d2730;
  --battle-frame-muted: #5f6870;
  --battle-frame-panel: rgba(248, 250, 248, 0.9);
  --battle-frame-panel-strong: rgba(241, 245, 244, 0.94);
  --battle-frame-line: rgba(84, 96, 104, 0.24);
  --battle-frame-line-strong: rgba(64, 74, 82, 0.34);
  --battle-frame-highlight: rgba(255, 255, 255, 0.82);
  --battle-frame-shadow: rgba(25, 35, 42, 0.16);
  --battle-ally-accent: #2b879d;
  --battle-enemy-accent: #b85552;
  --battle-gold-accent: #b48634;
  --battle-fatigue-accent: #a15d43;
  --battle-laziness-accent: #686982;
  --battle-buff-accent: #2f8a66;
  --battle-debuff-accent: #b84d5d;
  --battle-cooldown-accent: #9c7330;
  --battle-neutral-accent: #66717b;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter, .seat-fighter) {
  color: var(--battle-frame-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(238, 242, 241, 0.28)),
    rgba(247, 249, 247, 0.72) !important;
  border: 1px solid var(--battle-frame-line-strong) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 var(--battle-frame-highlight),
    inset 0 -1px 0 rgba(48, 58, 64, 0.05),
    0 14px 28px var(--battle-frame-shadow) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.you-combatant .fighter, .you-panel, .seat-fighter.self-seat) {
  border-color: rgba(43, 135, 157, 0.46) !important;
  box-shadow:
    inset 3px 0 0 rgba(43, 135, 157, 0.78),
    inset 0 1px 0 var(--battle-frame-highlight),
    0 14px 30px rgba(43, 135, 157, 0.14) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.opponent-combatant .fighter, .opponent-panel) {
  border-color: rgba(184, 77, 82, 0.44) !important;
  box-shadow:
    inset -3px 0 0 rgba(184, 77, 82, 0.78),
    inset 0 1px 0 var(--battle-frame-highlight),
    0 14px 30px rgba(184, 77, 82, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-panel, .role-card, .choice, .meter-row, .equipment-slot, .team-skill-label, .team-mini-row, .team-stat-line, .team-choice) {
  color: var(--battle-frame-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(239, 244, 242, 0.54)),
    var(--battle-frame-panel) !important;
  border: 1px solid var(--battle-frame-line) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 var(--battle-frame-highlight),
    0 8px 18px rgba(39, 53, 60, 0.08) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.role-card, .team-skill-label) {
  border-color: rgba(180, 134, 52, 0.34) !important;
  box-shadow:
    inset 0 3px 0 rgba(180, 134, 52, 0.68),
    inset 0 1px 0 var(--battle-frame-highlight),
    0 10px 20px rgba(65, 55, 34, 0.08) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.character-face, .avatar, .team-art) {
  border-color: rgba(69, 83, 94, 0.28) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 10px 24px rgba(26, 36, 42, 0.16) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.energy, .fatigue, .laziness, .team-stat) {
  --stat-accent: var(--battle-neutral-accent);
  color: var(--battle-frame-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(237, 241, 240, 0.58)),
    var(--battle-frame-panel-strong) !important;
  border: 1px solid rgba(82, 94, 102, 0.2) !important;
  border-left: 3px solid var(--stat-accent) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 var(--battle-frame-highlight),
    0 6px 14px rgba(33, 45, 52, 0.07) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.energy, .team-energy) {
  --stat-accent: var(--battle-gold-accent);
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fatigue, .team-fatigue) {
  --stat-accent: var(--battle-fatigue-accent);
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.laziness, .team-laziness) {
  --stat-accent: var(--battle-laziness-accent);
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .meter {
  background: rgba(35, 44, 52, 0.16) !important;
  border: 1px solid rgba(52, 64, 73, 0.2) !important;
  box-shadow: inset 0 1px 3px rgba(16, 22, 28, 0.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .meter > i,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .team-mini-meter > i {
  background:
    linear-gradient(90deg, #b8424c, #d56b58 48%, #e8aa56) !important;
  box-shadow: 0 0 12px rgba(199, 85, 70, 0.28) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .status-token {
  --status-accent: var(--battle-neutral-accent);
  color: var(--battle-frame-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(238, 242, 241, 0.68)),
    rgba(246, 248, 247, 0.92) !important;
  border: 1px solid rgba(80, 92, 100, 0.22) !important;
  border-left: 4px solid var(--status-accent) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 var(--battle-frame-highlight),
    0 7px 16px rgba(30, 42, 49, 0.09) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .status-token.buff {
  --status-accent: var(--battle-buff-accent);
  background:
    linear-gradient(180deg, rgba(246, 253, 248, 0.92), rgba(226, 241, 232, 0.78)),
    rgba(243, 249, 245, 0.92) !important;
  border-color: rgba(47, 138, 102, 0.3) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .status-token.debuff {
  --status-accent: var(--battle-debuff-accent);
  background:
    linear-gradient(180deg, rgba(255, 249, 248, 0.92), rgba(246, 226, 227, 0.8)),
    rgba(250, 242, 241, 0.94) !important;
  border-color: rgba(184, 77, 93, 0.32) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .status-token.cooldown {
  --status-accent: var(--battle-cooldown-accent);
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.92), rgba(244, 233, 207, 0.8)),
    rgba(249, 244, 231, 0.94) !important;
  border-color: rgba(156, 115, 48, 0.32) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .status-token i {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(235, 239, 238, 0.72)) !important;
  border: 1px solid rgba(69, 81, 90, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.46),
    0 0 0 2px color-mix(in srgb, var(--status-accent) 22%, transparent) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-head, .fighter-side, .role-card, .choice, .stat-label, .team-skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .role-card span, .role-card b, .fighter-panel b, .fighter-head strong, .status-token b, .status-token em, .team-info header strong, .team-info header small, .team-stat-line, .team-choice) {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-side, .role-card span, .team-info header small, .team-stat-line) {
  color: var(--battle-frame-muted) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target),
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle .seat-fighter:is(.target-candidate, .selected-target) {
  outline-color: rgba(208, 67, 61, 0.96) !important;
  box-shadow:
    0 0 0 4px rgba(208, 67, 61, 0.14),
    0 14px 30px rgba(208, 67, 61, 0.18),
    inset 0 1px 0 var(--battle-frame-highlight) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle :is(.fighter-panel, .role-card, .choice, .meter-row, .energy, .fatigue, .laziness, .equipment-slot, .status-token, .team-skill-label, .team-stat) {
    border-radius: 7px !important;
  }
}

/* TRUE EOF V1.27Beta-battle-frame-color2: high-specificity polish for battle stat rails. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighter-panel, .you-panel, .opponent-panel) {
  color: var(--battle-frame-ink) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(232, 238, 237, 0.5)),
    rgba(244, 247, 246, 0.82) !important;
  border: 1px solid rgba(69, 84, 94, 0.26) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 14px 28px rgba(24, 34, 42, 0.14) !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .you-panel {
  border-color: rgba(43, 135, 157, 0.36) !important;
  box-shadow:
    inset 3px 0 0 rgba(43, 135, 157, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 14px 28px rgba(43, 135, 157, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .opponent-panel {
  border-color: rgba(184, 77, 82, 0.34) !important;
  box-shadow:
    inset -3px 0 0 rgba(184, 77, 82, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 14px 28px rgba(184, 77, 82, 0.1) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.meter-row, .energy, .fatigue, .laziness, .choice, .status-bar, .equipment-slots, .equipment-slot, .team-stat, .team-mini-row, .team-stat-line, .team-choice) {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(237, 242, 241, 0.7)),
    rgba(247, 249, 248, 0.94) !important;
  border: 1px solid rgba(76, 90, 100, 0.2) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 7px 15px rgba(25, 37, 45, 0.07) !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.energy, .team-energy) {
  --battle-stat-accent: var(--battle-gold-accent);
  border-left: 3px solid rgba(180, 134, 52, 0.76) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fatigue, .team-fatigue) {
  --battle-stat-accent: var(--battle-fatigue-accent);
  border-left: 3px solid rgba(161, 93, 67, 0.76) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.laziness, .team-laziness) {
  --battle-stat-accent: var(--battle-laziness-accent);
  border-left: 3px solid rgba(104, 105, 130, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.stat-label, .stat-value, .meter-row > b, .choice, .team-stat, .team-stat-line, .team-choice) {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.stat-label, .team-stat-line) {
  color: var(--battle-frame-muted) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .stat-marks i {
  background: rgba(40, 52, 62, 0.13) !important;
  border: 1px solid rgba(48, 61, 70, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  filter: none !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .energy .stat-marks i.filled,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-energy .stat-marks i.filled {
  background: linear-gradient(180deg, #fff2a8, #dca83b 58%, #a16b1e) !important;
  box-shadow: 0 0 8px rgba(205, 155, 55, 0.28) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fatigue .stat-marks i.filled,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-fatigue .stat-marks i.filled {
  background: linear-gradient(180deg, #f0b09c, #c86448 58%, #8d3c32) !important;
  box-shadow: 0 0 8px rgba(190, 88, 67, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .laziness .stat-marks i.filled,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-laziness .stat-marks i.filled {
  background: linear-gradient(180deg, #c4c5d7, #82849e 58%, #585970) !important;
  box-shadow: 0 0 8px rgba(104, 105, 130, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .meter {
  background: rgba(36, 47, 56, 0.15) !important;
  border: 1px solid rgba(48, 60, 68, 0.18) !important;
  box-shadow: inset 0 1px 3px rgba(17, 25, 32, 0.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .meter > i,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-mini-meter > i {
  background: linear-gradient(90deg, #b8434b, #d06b58 54%, #dfa65a) !important;
  box-shadow: 0 0 12px rgba(190, 76, 68, 0.26) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.status-bar, .equipment-slots) {
  min-height: 30px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(235, 241, 240, 0.36)),
    rgba(250, 252, 251, 0.64) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .equipment-slot {
  color: rgba(47, 66, 77, 0.82) !important;
  border-color: rgba(72, 88, 100, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .equipment-slot.empty,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .equipment-slot:empty {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(233, 239, 238, 0.48)),
    rgba(247, 250, 249, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .status-token {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) section,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) #log {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(235, 242, 241, 0.66)),
    rgba(248, 251, 250, 0.88) !important;
  border: 1px solid rgba(72, 92, 104, 0.2) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 15px 32px rgba(23, 36, 45, 0.12) !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) :is(h2, p, span, strong, small, b, em, .log, .log *, .rules, .rules *) {
  color: var(--battle-frame-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #sidePanel.side:not([hidden]) :is(.log-detail, p, small, em) {
  color: var(--battle-frame-muted) !important;
}

/* TRUE EOF V1.27Beta-character-crop-lala-tiantian1: final portrait crops for Lala and Tiantian. */
body:not(.maintenance-mode) .preview-art[data-character="Lala"],
body:not(.maintenance-mode) .mini-art[data-character="Lala"],
body:not(.maintenance-mode) .avatar[data-character="Lala"] {
  --art-position: center 5% !important;
  background-position: var(--art-position), center, center !important;
}

body:not(.maintenance-mode) .team-art[data-character="Lala"],
body:not(.maintenance-mode) .battle.identity-battle .team-art[data-character="Lala"] {
  --team-art-position: center 4% !important;
  background-position: var(--team-art-position) !important;
}

body:not(.maintenance-mode) .character-codex-card[data-character="Lala"] .character-codex-art {
  background:
    linear-gradient(180deg, transparent 68%, rgba(5, 7, 12, 0.72)),
    var(--character-art, none) center 5% / cover no-repeat,
    radial-gradient(circle at 50% 20%, rgba(130, 232, 255, 0.12), transparent 48%),
    #050811 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Tiantian"] .mini-art {
  --art-size: auto 160% !important;
  --art-position: center 10% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center, center !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Tiantian"] .preview-art,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-art[data-character="Tiantian"] {
  --art-size: auto 168% !important;
  --art-position: center 11% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center, center !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] {
  --art-size: auto 194% !important;
  --art-position: center 35% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center, center !important;
}

body:not(.maintenance-mode) .team-art[data-character="Tiantian"] {
  --team-art-size: auto 140% !important;
  --team-art-position: center 21% !important;
  background-size: var(--team-art-size) !important;
  background-position: var(--team-art-position) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-character="Tiantian"] .mini-art {
    --art-size: auto 168% !important;
    --art-position: center 9% !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview[data-character="Tiantian"] .preview-art,
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-art[data-character="Tiantian"] {
    --art-size: auto 176% !important;
    --art-position: center 9% !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar[data-character="Tiantian"] {
    --art-size: auto 184% !important;
    --art-position: center 33% !important;
  }
}

/* TRUE EOF V1.27Beta-duel-ui-color1: remove 1v1 skill white strip and recolor the duel chrome. */
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle {
  --duel-ui-bg: rgba(16, 22, 28, 0.76);
  --duel-ui-bg-strong: rgba(20, 29, 36, 0.84);
  --duel-ui-bg-soft: rgba(27, 38, 45, 0.68);
  --duel-ui-line: rgba(139, 178, 176, 0.28);
  --duel-ui-line-strong: rgba(176, 205, 198, 0.42);
  --duel-ui-text: #edf7f5;
  --duel-ui-muted: #a9bebd;
  --duel-ui-gold: #d6b76d;
  --duel-ui-teal: #69d2cb;
  --duel-ui-rose: #d9827c;
  --duel-ui-amber: #d7965f;
  --duel-ui-violet: #b29bed;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighters {
  --fighter-panel-w: clamp(104px, 8.4vw, 122px);
  --fighter-card-w: clamp(238px, 20vw, 286px);
  --fighter-card-h: clamp(500px, 66vh, 560px);
  --combatant-pad: clamp(8px, 1vw, 12px);
  --combatant-gap: clamp(8px, 0.9vw, 11px);
  height: var(--fighter-card-h) !important;
  margin-top: clamp(26px, 3.8vh, 46px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .combatant {
  gap: var(--combatant-gap) !important;
  padding: var(--combatant-pad) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .you-combatant {
  --duel-side-accent: var(--duel-ui-teal);
  --duel-side-soft: rgba(105, 210, 203, 0.16);
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .opponent-combatant {
  --duel-side-accent: var(--duel-ui-rose);
  --duel-side-soft: rgba(217, 130, 124, 0.14);
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), transparent 32%),
    radial-gradient(circle at 20% 0%, var(--duel-side-soft), transparent 46%),
    var(--duel-ui-bg) !important;
  border: 1px solid var(--duel-ui-line) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.26) !important;
  color: var(--duel-ui-text) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel::after {
  opacity: 0.38 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter {
  position: relative !important;
  grid-template-rows: minmax(0, 1fr) !important;
  padding: 6px !important;
  min-height: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 50% 0%, var(--duel-side-soft), transparent 48%),
    rgba(13, 19, 25, 0.54) !important;
  border: 1px solid color-mix(in srgb, var(--duel-side-accent) 42%, rgba(255, 255, 255, 0.18)) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 20px 44px rgba(0, 0, 0, 0.28) !important;
  color: var(--duel-ui-text) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head {
  position: absolute !important;
  z-index: 18 !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  width: auto !important;
  max-width: calc(100% - 16px) !important;
  min-height: 0 !important;
  height: 24px !important;
  padding: 3px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(39, 51, 60, 0.88), rgba(14, 20, 26, 0.78)) !important;
  border: 1px solid color-mix(in srgb, var(--duel-side-accent) 48%, rgba(255, 255, 255, 0.18)) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: var(--duel-ui-text) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .opponent-combatant .fighter-head {
  left: auto !important;
  right: 8px !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head::after {
  content: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head strong,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head .fighter-side {
  color: var(--duel-ui-text) !important;
  -webkit-text-fill-color: var(--duel-ui-text) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-head .fighter-side {
  color: color-mix(in srgb, var(--duel-side-accent) 78%, #ffffff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--duel-side-accent) 78%, #ffffff) !important;
  font-weight: 900 !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .character-face {
  position: relative !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 50% 8%, var(--duel-side-soft), transparent 46%),
    rgba(8, 13, 18, 0.48) !important;
  border: 1px solid rgba(224, 238, 233, 0.16) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -52px 76px rgba(0, 0, 0, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .avatar {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  align-self: stretch !important;
  border: 0 !important;
  border-radius: 10px !important;
  background-color: transparent !important;
  background-size: var(--art-size, cover), cover, cover !important;
  background-position: var(--art-position, center 18%), center, center !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card {
  position: absolute !important;
  z-index: 19 !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card > span,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .skill-label,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-name,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .inline-skill-action,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .role-card .passive-skill-label {
  max-width: 100% !important;
  min-height: 23px !important;
  height: auto !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(38, 49, 57, 0.88), rgba(12, 18, 23, 0.8)) !important;
  border: 1px solid color-mix(in srgb, var(--duel-side-accent) 40%, rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: var(--duel-ui-text) !important;
  -webkit-text-fill-color: var(--duel-ui-text) !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.46) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel :is(.meter-row, .energy, .status-bar, .equipment-slots, .choice, .fatigue, .laziness) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(14, 21, 27, 0.58) !important;
  border: 1px solid rgba(190, 218, 212, 0.16) !important;
  border-radius: 10px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.16) !important;
  color: var(--duel-ui-text) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .meter-row {
  border-color: color-mix(in srgb, var(--duel-ui-rose) 34%, rgba(255, 255, 255, 0.16)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .energy {
  border-color: color-mix(in srgb, var(--duel-ui-gold) 42%, rgba(255, 255, 255, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .fatigue {
  border-color: color-mix(in srgb, var(--duel-ui-amber) 38%, rgba(255, 255, 255, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .laziness {
  border-color: color-mix(in srgb, var(--duel-ui-violet) 38%, rgba(255, 255, 255, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .fatigue-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel :is(.meter-row, .energy, .fatigue, .laziness) :is(.stat-label, .stat-value, b, span),
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .choice,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .status-bar {
  color: var(--duel-ui-text) !important;
  -webkit-text-fill-color: var(--duel-ui-text) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .stat-label {
  color: var(--duel-ui-muted) !important;
  -webkit-text-fill-color: var(--duel-ui-muted) !important;
  font-weight: 800 !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .stat-value {
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .stat-marks i {
  background: rgba(231, 240, 237, 0.12) !important;
  border: 1px solid rgba(228, 239, 235, 0.14) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .energy .stat-marks i.filled {
  background: radial-gradient(circle at 35% 28%, #fff3b5, var(--duel-ui-gold) 52%, #8c6630) !important;
  border-color: rgba(255, 230, 148, 0.52) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fatigue .stat-marks i.filled {
  background: radial-gradient(circle at 35% 28%, #ffd6ae, var(--duel-ui-amber) 54%, #8b4a2f) !important;
  border-color: rgba(236, 160, 97, 0.5) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .laziness .stat-marks i.filled {
  background: radial-gradient(circle at 35% 28%, #e1d9ff, var(--duel-ui-violet) 52%, #66519f) !important;
  border-color: rgba(182, 154, 238, 0.5) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .equipment-slot {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.08), transparent 54%),
    rgba(11, 18, 23, 0.68) !important;
  border: 1px solid rgba(209, 228, 222, 0.14) !important;
  color: var(--duel-ui-muted) !important;
  -webkit-text-fill-color: var(--duel-ui-muted) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle .fighter-panel .equipment-slot:not(.empty) {
  color: var(--duel-ui-text) !important;
  -webkit-text-fill-color: var(--duel-ui-text) !important;
  border-color: color-mix(in srgb, var(--duel-side-accent) 38%, rgba(255, 255, 255, 0.16)) !important;
}

/* TRUE EOF V1.27Beta-duel-ui-color2: beat legacy double-id light panel overrides on 1v1. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .you-combatant > .fighter-panel,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .opponent-combatant > .fighter-panel {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.06), transparent 32%),
    radial-gradient(circle at 20% 0%, var(--duel-side-soft), transparent 46%),
    rgba(16, 22, 28, 0.76) !important;
  border-color: rgba(139, 178, 176, 0.28) !important;
  color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter.fighter {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 50% 0%, var(--duel-side-soft), transparent 48%),
    rgba(13, 19, 25, 0.54) !important;
  border-color: color-mix(in srgb, var(--duel-side-accent) 42%, rgba(255, 255, 255, 0.18)) !important;
  color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-head.fighter-head {
  background:
    linear-gradient(180deg, rgba(39, 51, 60, 0.88), rgba(14, 20, 26, 0.78)) !important;
  border-color: color-mix(in srgb, var(--duel-side-accent) 48%, rgba(255, 255, 255, 0.18)) !important;
  color: #edf7f5 !important;
  -webkit-text-fill-color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-head.fighter-head :is(strong, span, .fighter-side) {
  color: #edf7f5 !important;
  -webkit-text-fill-color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .character-face.character-face {
  background:
    radial-gradient(circle at 50% 8%, var(--duel-side-soft), transparent 46%),
    rgba(8, 13, 18, 0.48) !important;
  border-color: rgba(224, 238, 233, 0.16) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card::after {
  content: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card .skill-label,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card .inline-skill-name,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card .inline-skill-action,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .role-card.role-card .passive-skill-label {
  background:
    linear-gradient(180deg, rgba(38, 49, 57, 0.88), rgba(12, 18, 23, 0.8)) !important;
  border-color: color-mix(in srgb, var(--duel-side-accent) 40%, rgba(255, 255, 255, 0.14)) !important;
  color: #edf7f5 !important;
  -webkit-text-fill-color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.meter-row, .energy, .status-bar, .equipment-slots, .choice, .fatigue, .laziness) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    rgba(14, 21, 27, 0.58) !important;
  border-color: rgba(190, 218, 212, 0.16) !important;
  color: #edf7f5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app):has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .fatigue-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* TRUE EOF V1.27Beta-battlewallpaper1: no-character battle wallpapers, refined controls, cleaner target reticle. */
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) {
  --battle-wallpaper-fallback: url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battlewallpaper1");
  --battle-control-bottom: max(12px, env(safe-area-inset-bottom));
  --battle-control-right: max(12px, env(safe-area-inset-right));
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) {
  --battle-control-bottom: max(12px, env(safe-area-inset-bottom));
  --battle-control-right: max(12px, env(safe-area-inset-right));
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(5, 10, 13, 0.16), rgba(4, 8, 12, 0.36)),
    radial-gradient(circle at 50% 50%, rgba(248, 252, 245, 0.2), rgba(41, 76, 82, 0.1) 38%, rgba(3, 7, 11, 0.42) 100%),
    var(--battle-wallpaper-art, var(--battle-wallpaper-fallback)) center center / cover no-repeat !important;
  background-color: #dbe7e4 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::before {
  background:
    linear-gradient(90deg, rgba(4, 8, 12, 0.28), transparent 24%, transparent 76%, rgba(4, 8, 12, 0.3)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%, rgba(1, 5, 9, 0.22)) !important;
  opacity: 0.72 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden])::after {
  opacity: 0.28 !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) :is(.language-toggle, .music-toggle, .battle-wallpaper-toggle) {
  position: fixed !important;
  bottom: var(--battle-control-bottom) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  z-index: 980 !important;
  border-radius: 13px !important;
  border: 1px solid rgba(231, 241, 236, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(12, 20, 25, 0.78) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .language-toggle {
  right: var(--battle-control-right) !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .music-toggle {
  right: calc(var(--battle-control-right) + 58px) !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .battle-wallpaper-toggle {
  right: calc(var(--battle-control-right) + 116px) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 5px !important;
  color: #edf7f5 !important;
  -webkit-text-fill-color: #edf7f5 !important;
  font: 900 10px/1.05 "Microsoft YaHei", "PingFang SC", sans-serif !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) .battle-wallpaper-toggle[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .battle-wallpaper-toggle[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) .battle-wallpaper-toggle span {
  width: 22px !important;
  height: 15px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(235, 247, 241, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(215, 237, 232, 0.86), rgba(91, 142, 151, 0.78) 52%, rgba(18, 30, 38, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

html body:not(.maintenance-mode) .battle-wallpaper-toggle b {
  font: inherit !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .battle-libraries {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  transform: none !important;
  z-index: 950 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(44vw, 360px) !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .battle-libraries .library-action {
  min-width: 90px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(12, 20, 25, 0.76) !important;
  border: 1px solid rgba(232, 242, 236, 0.24) !important;
  color: #edf7f5 !important;
  -webkit-text-fill-color: #edf7f5 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighters {
  transform: translateY(clamp(12px, 1.9vh, 24px)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #teamBoard.team-board:not([hidden]) {
  transform: translateY(clamp(10px, 1.7vh, 22px)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .target-reticle {
  width: clamp(28px, 16%, 42px) !important;
  height: clamp(28px, 16%, 42px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 255, 249, 0.68) !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 44%, rgba(238, 255, 248, 0.82) 44% 56%, transparent 56%),
    linear-gradient(0deg, transparent 0 44%, rgba(238, 255, 248, 0.82) 44% 56%, transparent 56%) !important;
  box-shadow:
    0 0 10px rgba(172, 242, 221, 0.5),
    0 0 22px rgba(60, 139, 133, 0.28) !important;
  opacity: 0.86 !important;
  animation: targetReticleBreathe 1.45s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .target-reticle::before {
  inset: 5px !important;
  border: 1px solid rgba(244, 255, 249, 0.42) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .target-reticle::after {
  content: none !important;
  display: none !important;
}

@keyframes targetReticleBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
    opacity: 0.96;
  }
}

html body:not(.maintenance-mode) .profession-codex-card {
  --profession-bg-position: center 58%;
  --profession-bg-size: 112% auto;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="shaman"] {
  --profession-bg-position: center 54%;
  --profession-bg-size: 106% auto;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-codex-bg {
  background:
    linear-gradient(90deg, rgba(2, 5, 11, 0.74) 0%, rgba(2, 5, 11, 0.42) 48%, rgba(2, 5, 11, 0.1) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0.02), rgba(3, 6, 12, 0.62)),
    var(--profession-bg) var(--profession-bg-position) / var(--profession-bg-size) no-repeat,
    rgba(5, 9, 16, 0.96) !important;
}

/* TRUE EOF V1.27Beta-profession-bg-anchor1: anchor codex class backgrounds to the top, scale them up, and pull the art toward the left-lower field. */
html body:not(.maintenance-mode) .profession-codex-card {
  --profession-bg-position: 30% top !important;
  --profession-bg-size: 138% auto !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="shaman"] {
  --profession-bg-position: 28% top !important;
  --profession-bg-size: 134% auto !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-codex-bg {
  background:
    linear-gradient(90deg, rgba(2, 5, 11, 0.72) 0%, rgba(2, 5, 11, 0.38) 45%, rgba(2, 5, 11, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0), rgba(3, 6, 12, 0.58)),
    var(--profession-bg) var(--profession-bg-position) / var(--profession-bg-size) no-repeat,
    rgba(5, 9, 16, 0.96) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-card {
    --profession-bg-position: 24% top !important;
    --profession-bg-size: 156% auto !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-desktop-duel-ui-final5: combat view hard override after every legacy rule. */
html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])),
html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  --battle-final-surface: var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-desktop-duel-ui-final5")) !important;
}

html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])) {
  background:
    linear-gradient(180deg, rgba(254, 249, 232, 0.66), rgba(226, 211, 178, 0.48)),
    var(--battle-final-surface) center / cover no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  position: relative !important;
  --battle-stage-art: var(--battle-final-surface) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.56), rgba(222, 208, 176, 0.42)),
    var(--battle-final-surface) center / cover no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility {
  position: absolute !important;
  z-index: 120 !important;
  top: clamp(10px, 1.5vh, 18px) !important;
  left: clamp(12px, 1.6vw, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(54vw, 520px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility > button {
  width: auto !important;
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(64, 45, 24, 0.34) !important;
  background: linear-gradient(180deg, rgba(255, 249, 226, 0.97), rgba(216, 188, 132, 0.94)) !important;
  color: #302010 !important;
  -webkit-text-fill-color: #302010 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 16px rgba(45, 28, 9, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::after,
html body:not(.maintenance-mode) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #cards.cards .action-card::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon *,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-desktop-duel-ui-final5") center / contain no-repeat !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.35vw, 24px) !important;
    width: min(1680px, calc(100vw - 48px)) !important;
    max-width: min(1680px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(11px, 1.05vw, 18px) !important;
    transform: translateX(-50%) !important;
    font-size: clamp(18px, 1.35vw, 25px) !important;
    line-height: 1 !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-mobile-action-ratio1: keep phone action art proportional and clean the wallpaper control. */
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card > span,
html body:not(.maintenance-mode) #cards.cards .action-card > span {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #fff9dd !important;
  -webkit-text-fill-color: #fff9dd !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.78) !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle {
  width: clamp(42px, 11.2vw, 52px) !important;
  height: clamp(42px, 11.2vw, 52px) !important;
  min-width: clamp(42px, 11.2vw, 52px) !important;
  min-height: clamp(42px, 11.2vw, 52px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle b,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-mobile-action-ratio1") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(5px, 1.6vw, 8px) !important;
    width: min(100%, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.attack {
    background-image: var(--action-attack-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.defend {
    background-image: var(--action-defend-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.charge {
    background-image: var(--action-charge-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(4px, 1.2vw, 7px) !important;
    transform: translateX(-50%) !important;
    font-size: clamp(11px, 3.1vw, 14px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout1: final phone battle layout reset. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(245, 239, 222, 0.9), rgba(214, 199, 168, 0.86)),
      var(--battle-final-surface, var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-mobile-battle-layout1"))) center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .topbar,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #sidePanel.side,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #sidePanel.side:not([hidden]) {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(246, 240, 224, 0.88), rgba(218, 203, 173, 0.84)),
      var(--battle-final-surface, var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-mobile-battle-layout1"))) center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    gap: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(max(8px, env(safe-area-inset-top)) + 58px) 6px max(6px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
    color: #fff5d8 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .control-banner {
    position: fixed !important;
    z-index: 95 !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 31px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(56vw, 240px) !important;
    min-height: 24px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(93, 65, 31, 0.36) !important;
    border-radius: 7px !important;
    background: rgba(48, 32, 17, 0.62) !important;
    color: #fff1c5 !important;
    -webkit-text-fill-color: #fff1c5 !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76) !important;
    box-shadow: 0 8px 18px rgba(31, 20, 9, 0.24) !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility {
    position: fixed !important;
    z-index: 110 !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    max-width: calc(100vw - 78px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility > button {
    width: auto !important;
    min-width: 48px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(69, 48, 23, 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 246, 213, 0.96), rgba(208, 179, 123, 0.94)) !important;
    color: #2a1b0c !important;
    -webkit-text-fill-color: #2a1b0c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    box-shadow: 0 5px 12px rgba(31, 20, 9, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility > #rematch[hidden] {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .versus {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant {
    display: grid !important;
    gap: 5px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant {
    grid-template-columns: minmax(0, 1.18fr) minmax(108px, 0.72fr) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant {
    grid-template-columns: minmax(108px, 0.72fr) minmax(0, 1.18fr) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #youCard.fighter {
    order: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-panel {
    order: 2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-panel {
    order: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #opponentCard.fighter {
    order: 2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(76, 55, 28, 0.34) !important;
    background: rgba(34, 26, 17, 0.36) !important;
    box-shadow: 0 8px 20px rgba(34, 23, 10, 0.18), inset 0 1px 0 rgba(255, 247, 220, 0.15) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-head {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
    min-height: 21px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    border: 0 !important;
    background: rgba(41, 28, 15, 0.58) !important;
    color: #fff2c5 !important;
    -webkit-text-fill-color: #fff2c5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-head strong,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-side {
    min-width: 0 !important;
    color: #fff2c5 !important;
    -webkit-text-fill-color: #fff2c5 !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .character-face {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 7px !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center, center !important;
    box-shadow: inset 0 -18px 24px rgba(0, 0, 0, 0.16) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card {
    min-height: 38px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 238, 185, 0.2) !important;
    background: rgba(31, 22, 13, 0.64) !important;
    color: #fff6db !important;
    -webkit-text-fill-color: #fff6db !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card b {
    display: block !important;
    margin: 0 0 2px !important;
    color: #ffe59a !important;
    -webkit-text-fill-color: #ffe59a !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff6db !important;
    -webkit-text-fill-color: #fff6db !important;
    font-size: clamp(9px, 2.35vw, 11px) !important;
    line-height: 1.18 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel {
    display: grid !important;
    grid-template-rows: minmax(19px, auto) minmax(19px, auto) minmax(20px, auto) minmax(20px, auto) minmax(20px, auto) minmax(22px, 1fr) !important;
    align-content: stretch !important;
    gap: 3px !important;
    padding: 4px !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice) {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 239, 194, 0.18) !important;
    background: rgba(28, 20, 12, 0.55) !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .status-bar,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .equipment-slots {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    max-height: 24px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .meter-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 3px !important;
    max-height: 24px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .fatigue-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    min-height: 0 !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .choice {
    display: grid !important;
    place-items: center !important;
    min-height: 22px !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel :is(.stat-label, .stat-value, b, em, span, .status-token, .equipment-slot) {
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .stat-label {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .stat-label-icon {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .meter {
    height: 6px !important;
    min-height: 6px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.34) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .status-token {
    min-height: 18px !important;
    height: 18px !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 241, 198, 0.12) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .status-token i {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.team-mode:not([hidden]) #teamBoard.team-board,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.identity-battle:not([hidden]) #teamBoard.team-board {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.team-mode:not([hidden]) .fighters,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.identity-battle:not([hidden]) .fighters {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing.seat-ring {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing .seat-fighter {
    max-width: clamp(92px, 29vw, 136px) !important;
    max-height: clamp(132px, 37vh, 176px) !important;
    border-radius: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards {
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: center !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 1.2vw, 6px) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 85 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.attack,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.defend,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.charge {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card .action-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.attack {
    background-image: var(--action-attack-panel-art) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.defend {
    background-image: var(--action-defend-panel-art, var(--action-defend-user-panel-art)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.charge {
    background-image: var(--action-charge-panel-art, var(--action-charge-user-panel-art)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(4px, 1.1vw, 6px) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff9dd !important;
    -webkit-text-fill-color: #fff9dd !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries {
    position: fixed !important;
    z-index: 90 !important;
    left: 6px !important;
    right: auto !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 51px) !important;
    top: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries > button.library-action {
    position: relative !important;
    width: clamp(42px, 12vw, 54px) !important;
    height: clamp(56px, 16vw, 72px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(63, 43, 21, 0.52) !important;
    border-radius: 7px !important;
    background-color: rgba(34, 22, 10, 0.64) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 16px rgba(31, 20, 9, 0.24), inset 0 0 0 1px rgba(255, 239, 185, 0.16) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries > button.library-action > span {
    position: absolute !important;
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    display: block !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(18, 12, 6, 0.7) !important;
    color: #fff4c8 !important;
    -webkit-text-fill-color: #fff4c8 !important;
    font-size: clamp(7px, 2.1vw, 9px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
    white-space: normal !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle,
  html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle {
    right: 6px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 51px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
    z-index: 120 !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-rollback3: final character select rollback after every prior override. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(36px, 5vw, 70px) !important;
    --select-frame-inner-y: clamp(44px, 5.4vw, 72px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(1180px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: min(72vh, calc(100dvh - 168px)) !important;
    max-height: none !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 36px), calc(100dvh - 154px)) !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(6px, 1vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 200, 95, 0.54) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(7, 20, 36, 0.12) 42%, rgba(4, 12, 24, 0.48)) !important;
  box-shadow:
    0 12px 26px rgba(5, 18, 32, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.12) !important;
  color: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.84 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 6px rgba(246, 200, 95, 0.18))
    drop-shadow(0 0 6px rgba(78, 205, 196, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 20%, rgba(4, 12, 24, 0.1) 52%, rgba(4, 12, 24, 0.76) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .mini-art {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  background: rgba(7, 15, 26, 0.5) !important;
  border-color: rgba(246, 200, 95, 0.34) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.selected > span {
  transform: translateY(-2px) !important;
  border-color: rgba(246, 200, 95, 0.86) !important;
  box-shadow:
    0 18px 34px rgba(5, 18, 32, 0.34),
    0 0 22px rgba(246, 200, 95, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.22) !important;
}

/* TRUE EOF V1.27Beta-character-select-rollback2: restore old selector surface; only thin gold card frames remain. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(36px, 5vw, 70px) !important;
    --select-frame-inner-y: clamp(44px, 5.4vw, 72px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(1180px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: min(72vh, calc(100dvh - 168px)) !important;
    max-height: none !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 36px), calc(100dvh - 154px)) !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(6px, 1vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction],
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction]::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction]::after,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 200, 95, 0.54) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(7, 20, 36, 0.12) 42%, rgba(4, 12, 24, 0.48)) !important;
  box-shadow:
    0 12px 26px rgba(5, 18, 32, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.12) !important;
  color: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.84 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 6px rgba(246, 200, 95, 0.18))
    drop-shadow(0 0 6px rgba(78, 205, 196, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 20%, rgba(4, 12, 24, 0.1) 52%, rgba(4, 12, 24, 0.76) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .mini-art {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  background: rgba(7, 15, 26, 0.5) !important;
  border-color: rgba(246, 200, 95, 0.34) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.selected > span {
  transform: translateY(-2px) !important;
  border-color: rgba(246, 200, 95, 0.86) !important;
  box-shadow:
    0 18px 34px rgba(5, 18, 32, 0.34),
    0 0 22px rgba(246, 200, 95, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.22) !important;
}

/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout3: override battle-controls-active phone layout. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app > .arena {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app > .arena {
    position: fixed !important;
    inset: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(180deg, rgba(247, 240, 222, 0.92), rgba(219, 204, 174, 0.86)),
      var(--battle-final-surface, var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-mobile-battle-layout3"))) center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #sidePanel.side,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #sidePanel.side {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(max(8px, env(safe-area-inset-top)) + 58px) 6px max(6px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighters::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighters::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .combatant::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .combatant::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards.cards::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards.cards::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .versus,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .versus {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters {
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant {
    display: grid !important;
    gap: 5px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-combatant,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-combatant {
    grid-template-columns: minmax(0, 1.18fr) minmax(108px, 0.72fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-combatant,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-combatant {
    grid-template-columns: minmax(108px, 0.72fr) minmax(0, 1.18fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #youCard.fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #youCard.fighter {
    order: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-panel,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-panel {
    order: 2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-panel,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-panel {
    order: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #opponentCard.fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #opponentCard.fighter {
    order: 2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(76, 55, 28, 0.34) !important;
    background: rgba(34, 26, 17, 0.36) !important;
    box-shadow: 0 8px 20px rgba(34, 23, 10, 0.18), inset 0 1px 0 rgba(255, 247, 220, 0.15) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-head {
    position: static !important;
    min-height: 21px !important;
    max-height: 26px !important;
    padding: 3px 6px !important;
    background: rgba(41, 28, 15, 0.58) !important;
    color: #fff2c5 !important;
    -webkit-text-fill-color: #fff2c5 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .character-face {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar {
    height: 100% !important;
    min-height: 0 !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center, center !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel {
    display: grid !important;
    grid-template-rows: minmax(19px, auto) minmax(19px, auto) minmax(20px, auto) minmax(20px, auto) minmax(20px, auto) minmax(22px, 1fr) !important;
    gap: 3px !important;
    padding: 4px !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice) {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 239, 194, 0.18) !important;
    background: rgba(28, 20, 12, 0.55) !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards {
    grid-row: 2 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(4px, 1.2vw, 6px) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 85 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards .action-card {
    aspect-ratio: 1983 / 793 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards .action-card::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards .action-card::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards.cards .action-card .action-icon {
    content: none !important;
    display: none !important;
  }
}

/* V1.27Beta-character-select-faction-frames2: larger book-page backing plus three faction card frames. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
  --select-faction-page: rgba(252, 249, 238, 0.98);
  --select-faction-page-soft: rgba(239, 246, 250, 0.94);
  --select-faction-line: rgba(161, 119, 58, 0.44);
  --select-faction-glow: rgba(99, 179, 216, 0.18);
  --select-faction-ornament: rgba(206, 166, 82, 0.46);
  width: min(1880px, calc(100vw - 2px)) !important;
  max-width: calc(100vw - 2px) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(136px, 9.6vw, 218px) !important;
    --select-frame-inner-y: clamp(142px, 16.8vh, 238px) !important;
    --select-matrix-h: min(
      calc(var(--select-card-outer-h) * 4 + var(--select-gap) * 3),
      calc(100dvh - var(--select-frame-inner-y) * 2 - 6px)
    ) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(
      max(calc(var(--select-matrix-w) + var(--select-frame-inner-x) * 2), calc(100vw - 40px)),
      calc(100vw - 2px)
    ) !important;
    height: min(
      max(calc(var(--select-matrix-h) + var(--select-frame-inner-y) * 2), calc(100dvh - 18px)),
      calc(100dvh - 2px)
    ) !important;
    max-width: calc(100vw - 2px) !important;
    max-height: calc(100dvh - 2px) !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
    background:
      radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.78), transparent 55%),
      linear-gradient(90deg, rgba(222, 203, 161, 0.18), transparent 12% 88%, rgba(222, 203, 161, 0.18)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(228, 239, 244, 0.5)) !important;
    border-radius: clamp(20px, 2.2vw, 34px) !important;
    box-shadow:
      0 34px 70px rgba(13, 31, 48, 0.24),
      0 0 44px rgba(223, 190, 122, 0.16),
      inset 0 0 0 1px rgba(172, 129, 66, 0.18) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: clamp(16px, 2.4vh, 28px) clamp(20px, 2.4vw, 36px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: clamp(18px, 2vw, 32px) !important;
    border: 1px solid rgba(166, 128, 70, 0.28) !important;
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(210, 178, 112, 0.18) 8.1% 8.4%, transparent 8.6% 91.4%, rgba(210, 178, 112, 0.18) 91.6% 91.9%, transparent 92%),
      linear-gradient(0deg, transparent 0 9%, rgba(117, 154, 181, 0.12) 9.1% 9.4%, transparent 9.7% 90.3%, rgba(117, 154, 181, 0.12) 90.6% 90.9%, transparent 91%),
      radial-gradient(ellipse at 50% 45%, var(--select-faction-page), var(--select-faction-page-soft) 62%, rgba(228, 236, 238, 0.92) 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.82),
      inset 0 0 84px rgba(129, 172, 196, 0.16),
      inset 0 -34px 62px rgba(202, 173, 104, 0.11) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: clamp(38px, 5.4vh, 62px) clamp(58px, 5.5vw, 96px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    border-radius: clamp(12px, 1.4vw, 22px) !important;
    border: 1px solid rgba(190, 151, 84, 0.2) !important;
    background:
      radial-gradient(circle at 0 0, var(--select-faction-ornament), transparent 0 10px, transparent 28px),
      radial-gradient(circle at 100% 0, var(--select-faction-ornament), transparent 0 10px, transparent 28px),
      radial-gradient(circle at 0 100%, var(--select-faction-ornament), transparent 0 10px, transparent 28px),
      radial-gradient(circle at 100% 100%, var(--select-faction-ornament), transparent 0 10px, transparent 28px),
      linear-gradient(90deg, rgba(255,255,255,0.42), transparent 18% 82%, rgba(255,255,255,0.42)) !important;
    opacity: 0.72 !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.46),
      0 0 36px var(--select-faction-glow) !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] {
  --faction-card-bg-1: rgba(249, 246, 232, 0.98);
  --faction-card-bg-2: rgba(222, 237, 241, 0.94);
  --faction-card-line: rgba(166, 128, 70, 0.72);
  --faction-card-line-soft: rgba(105, 148, 174, 0.44);
  --faction-card-gem: rgba(106, 209, 236, 0.92);
  --faction-card-glow: rgba(106, 209, 236, 0.22);
  --faction-card-ink: #173044;
  --faction-card-tag: rgba(255, 255, 255, 0.9);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="luminary"] {
  --faction-card-bg-1: rgba(255, 252, 235, 0.99);
  --faction-card-bg-2: rgba(229, 245, 250, 0.96);
  --faction-card-line: rgba(218, 175, 75, 0.82);
  --faction-card-line-soft: rgba(124, 220, 255, 0.52);
  --faction-card-gem: rgba(126, 227, 255, 0.95);
  --faction-card-glow: rgba(126, 227, 255, 0.28);
  --faction-card-ink: #16364f;
  --faction-card-tag: rgba(255, 249, 222, 0.94);
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --faction-card-bg-1: rgba(232, 250, 255, 0.98);
  --faction-card-bg-2: rgba(207, 231, 246, 0.94);
  --faction-card-line: rgba(62, 151, 194, 0.8);
  --faction-card-line-soft: rgba(75, 211, 226, 0.5);
  --faction-card-gem: rgba(83, 229, 238, 0.94);
  --faction-card-glow: rgba(83, 229, 238, 0.25);
  --faction-card-ink: #143a52;
  --faction-card-tag: rgba(222, 248, 255, 0.94);
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="villain"] {
  --faction-card-bg-1: rgba(31, 25, 39, 0.96);
  --faction-card-bg-2: rgba(16, 18, 24, 0.98);
  --faction-card-line: rgba(202, 61, 92, 0.78);
  --faction-card-line-soft: rgba(149, 78, 232, 0.46);
  --faction-card-gem: rgba(215, 57, 104, 0.95);
  --faction-card-glow: rgba(149, 78, 232, 0.34);
  --faction-card-ink: #f8ecff;
  --faction-card-tag: rgba(31, 22, 36, 0.9);
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  border: 1px solid var(--faction-card-line) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), transparent 26% 74%, rgba(255,255,255,0.18)),
    radial-gradient(circle at 50% 4%, var(--faction-card-glow), transparent 24%),
    linear-gradient(180deg, var(--faction-card-bg-1), var(--faction-card-bg-2)) !important;
  box-shadow:
    0 15px 28px rgba(20, 35, 48, 0.18),
    0 0 20px var(--faction-card-glow),
    inset 0 0 0 1px rgba(255,255,255,0.56),
    inset 0 -20px 30px rgba(0,0,0,0.06) !important;
  color: var(--faction-card-ink) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="villain"] > span {
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.24),
    0 0 22px var(--faction-card-glow),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 -22px 36px rgba(0,0,0,0.32) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before {
  inset: -11px -9px !important;
  border-radius: 13px !important;
  border: 1px solid var(--faction-card-line-soft) !important;
  background:
    radial-gradient(circle at 50% -1px, var(--faction-card-gem) 0 5px, transparent 6px),
    radial-gradient(circle at 50% calc(100% + 1px), var(--faction-card-gem) 0 5px, transparent 6px),
    radial-gradient(circle at -1px 50%, var(--faction-card-gem) 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% + 1px) 50%, var(--faction-card-gem) 0 5px, transparent 6px),
    linear-gradient(90deg, transparent 0 8%, var(--faction-card-line-soft) 8.3% 8.8%, transparent 9.2% 90.8%, var(--faction-card-line-soft) 91.2% 91.7%, transparent 92%) !important;
  box-shadow: 0 0 16px var(--faction-card-glow) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after {
  left: 10px !important;
  right: 10px !important;
  top: 10px !important;
  bottom: 10px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 38%) !important;
  mix-blend-mode: normal !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span > * {
  position: relative !important;
  z-index: 3 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .skill-tip:not(.mode-tip) {
  color: var(--faction-card-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), transparent 56%),
    var(--faction-card-tag) !important;
  border-color: var(--faction-card-line-soft) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.44) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="villain"] .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction="villain"] .skill-tip:not(.mode-tip) {
  text-shadow: 0 1px 2px rgba(0,0,0,0.7) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].selected > span {
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 38px rgba(17, 35, 52, 0.22),
    0 0 34px var(--faction-card-glow),
    inset 0 0 0 1px rgba(255,255,255,0.62) !important;
}

/* TRUE EOF V1.27Beta-desktop-duel-ui-final4: direct battle selectors for action art, controls, wallpaper, and oversized 1v1 buttons. */
html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])),
html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  --battle-final-surface: var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-desktop-duel-ui-final4")) !important;
}

html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])) {
  background:
    linear-gradient(180deg, rgba(254, 249, 232, 0.66), rgba(226, 211, 178, 0.48)),
    var(--battle-final-surface) center / cover no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  position: relative !important;
  --battle-stage-art: var(--battle-final-surface) !important;
  background-color: #eadfbd !important;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 232, 0.56), rgba(222, 208, 176, 0.42)),
    var(--battle-final-surface) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility {
  position: absolute !important;
  z-index: 120 !important;
  top: clamp(10px, 1.5vh, 18px) !important;
  left: clamp(12px, 1.6vw, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(54vw, 520px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility > button {
  width: auto !important;
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(64, 45, 24, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 249, 226, 0.97), rgba(216, 188, 132, 0.94)) !important;
  color: #302010 !important;
  -webkit-text-fill-color: #302010 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 16px rgba(45, 28, 9, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::after,
html body:not(.maintenance-mode) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #cards.cards .action-card::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon *,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-desktop-duel-ui-final4") center / contain no-repeat !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.35vw, 24px) !important;
    width: min(1680px, calc(100vw - 48px)) !important;
    max-width: min(1680px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(11px, 1.05vw, 18px) !important;
    transform: translateX(-50%) !important;
    font-size: clamp(18px, 1.35vw, 25px) !important;
    line-height: 1 !important;
  }
}

/* TRUE EOF V1.27Beta-statline-playerbadge1: remove duplicated stat strip and let badges sit outside art frames. */
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-stat-line {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.fighter, .team-fighter, .seat-fighter, .team-board, .seat-ring, .team-info) {
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) :is(.avatar, .team-art, .character-face) {
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-head.fighter-head {
  top: -12px !important;
  left: -10px !important;
  z-index: 48 !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(42, 53, 62, 0.96), rgba(10, 17, 23, 0.9)) !important;
  border-color: color-mix(in srgb, var(--duel-side-accent) 54%, rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.38),
    0 0 18px var(--duel-side-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .opponent-combatant .fighter-head.fighter-head {
  left: auto !important;
  right: -10px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-head.fighter-head .fighter-side {
  font-size: 10px !important;
  opacity: 0.96 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .fighter-head.fighter-head strong {
  font-size: 12px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-fighter .team-info header,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .seat-fighter .team-info header {
  position: absolute !important;
  z-index: 46 !important;
  left: -10px !important;
  top: -12px !important;
  width: auto !important;
  max-width: min(150px, calc(100% + 20px)) !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  background:
    linear-gradient(180deg, rgba(42, 53, 62, 0.96), rgba(10, 17, 23, 0.9)) !important;
  border: 1px solid rgba(232, 244, 239, 0.26) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-fighter .team-info header strong,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .seat-fighter .team-info header strong {
  max-width: 82px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-fighter .team-info header small,
html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .seat-fighter .team-info header small {
  max-width: 56px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .seat-fighter .identity-role-badge,
html body:not(.maintenance-mode) #appRoot#appRoot.app.team-battle-app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .team-fighter .identity-role-badge {
  z-index: 58 !important;
  top: -18px !important;
  right: -18px !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 10px rgba(130, 232, 255, 0.2)) !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .battle-libraries {
    max-width: calc(100vw - 190px) !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app:has(#battle.battle:not([hidden])) #battle#battle.battle:not([hidden]) .battle-libraries .library-action {
    min-width: 72px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) :is(.language-toggle, .music-toggle, .battle-wallpaper-toggle) {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .music-toggle {
    right: calc(var(--battle-control-right) + 52px) !important;
  }

  html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])) .battle-wallpaper-toggle {
    right: calc(var(--battle-control-right) + 104px) !important;
  }
}

/* TRUE EOF V1.27Beta-identity-ellipse-libraries1: diagonal identity seating outside controls and icon libraries. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
  position: relative !important;
  grid-template-rows: minmax(0, 1fr) auto 0 auto !important;
  align-content: stretch !important;
  gap: clamp(4px, 0.7vh, 8px) !important;
  padding: clamp(6px, 0.8vh, 10px) clamp(8px, 0.9vw, 14px) clamp(8px, 0.9vh, 12px) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #teamBoard#teamBoard.team-board:not([hidden]) {
  position: relative !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  place-items: initial !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #seatRing#seatRing.seat-ring {
  --identity-seat-w: clamp(138px, 9.6vw, 172px);
  --identity-seat-h: clamp(188px, 19.6vh, 220px);
  --identity-art-h: clamp(56px, 7vh, 76px);
  position: absolute !important;
  inset: clamp(2px, 0.4vh, 6px) clamp(4px, 0.5vw, 8px) clamp(4px, 0.7vh, 10px) clamp(4px, 0.5vw, 8px) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #seatRing#seatRing.seat-ring .seat-fighter,
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #seatRing#seatRing.seat-ring .seat-fighter.self-seat {
  width: var(--identity-seat-w) !important;
  min-height: var(--identity-seat-h) !important;
  height: var(--identity-seat-h) !important;
  max-height: var(--identity-seat-h) !important;
  transform: translate(-50%, -50%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #seatRing#seatRing.seat-ring .seat-ring-core {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) #cards.cards {
  position: relative !important;
  z-index: 12 !important;
  justify-self: center !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .utility {
  z-index: 18 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .battle-libraries {
  position: absolute !important;
  left: clamp(8px, 0.9vw, 14px) !important;
  bottom: clamp(8px, 0.9vh, 12px) !important;
  z-index: 22 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  display: flex !important;
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: clamp(7px, 0.8vw, 10px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .battle-libraries .library-action {
  width: clamp(54px, 4.4vw, 66px) !important;
  height: clamp(54px, 4.4vw, 66px) !important;
  min-width: clamp(54px, 4.4vw, 66px) !important;
  min-height: clamp(54px, 4.4vw, 66px) !important;
  max-width: clamp(54px, 4.4vw, 66px) !important;
  max-height: clamp(54px, 4.4vw, 66px) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: end center !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(4, 7, 12, 0.1), rgba(0, 0, 0, 0.32)),
    var(--library-art) center / cover no-repeat,
    rgba(7, 10, 15, 0.94) !important;
  border: 1px solid color-mix(in srgb, var(--library-glow) 56%, rgba(255, 246, 208, 0.2)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 246, 208, 0.1),
    inset 0 -18px 28px rgba(0, 0, 0, 0.36),
    0 0 18px color-mix(in srgb, var(--library-glow) 28%, transparent),
    0 12px 24px rgba(0, 0, 0, 0.34) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .battle-libraries .library-action span {
  position: absolute !important;
  left: 50% !important;
  bottom: -3px !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: 72px !important;
  padding: 2px 6px !important;
  display: block !important;
  border-radius: 999px !important;
  background: rgba(7, 11, 16, 0.82) !important;
  border: 1px solid color-mix(in srgb, var(--library-glow) 36%, rgba(255, 255, 255, 0.14)) !important;
  color: #f8f1df !important;
  -webkit-text-fill-color: #f8f1df !important;
  font-size: 9px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .battle-libraries .opportunity-library-action {
  --library-art: var(--opportunity-mode-button-art) !important;
  --library-glow: #66d4d0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) .battle-libraries .artifact-library-action {
  --library-art: var(--artifact-mode-button-art) !important;
  --library-glow: #e7bf67 !important;
}

/* TRUE EOF V1.27Beta-identity-actions-bottom1: identity mode actions stay bottom-center like normal battle. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
  padding-bottom: clamp(96px, 13vh, 132px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) #cards#cards.cards {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 970 !important;
  width: min(760px, calc(100vw - 220px)) !important;
  min-width: min(760px, calc(100vw - 220px)) !important;
  max-width: min(760px, calc(100vw - 220px)) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1vw, 12px) !important;
  justify-self: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

@media (max-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) {
    padding-bottom: clamp(108px, 17vh, 148px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.identity-battle-app:has(#battle.battle.identity-battle:not([hidden])) #battle#battle.battle.identity-battle:not([hidden]) #cards#cards.cards {
    width: min(390px, calc(100vw - 24px)) !important;
    min-width: min(390px, calc(100vw - 24px)) !important;
    max-width: min(390px, calc(100vw - 24px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }
}

/* TRUE EOF V1.27Beta-controlbuttons1: fixed bottom-right order: wallpaper, music, language. */
html body:not(.maintenance-mode).battle-controls-active > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
  --battle-control-size: 46px;
  --battle-control-gap: 12px;
  --battle-control-edge: max(12px, env(safe-area-inset-right));
  --battle-control-bottom: max(12px, env(safe-area-inset-bottom));
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  bottom: var(--battle-control-bottom) !important;
  width: var(--battle-control-size) !important;
  height: var(--battle-control-size) !important;
  min-width: var(--battle-control-size) !important;
  min-height: var(--battle-control-size) !important;
  max-width: var(--battle-control-size) !important;
  max-height: var(--battle-control-size) !important;
  margin: 0 !important;
  z-index: 1400 !important;
  border-radius: 13px !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .language-toggle {
  right: var(--battle-control-edge) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .music-toggle {
  right: calc(var(--battle-control-edge) + var(--battle-control-size) + var(--battle-control-gap)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle {
  right: calc(var(--battle-control-edge) + (var(--battle-control-size) + var(--battle-control-gap)) * 2) !important;
  display: inline-flex !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode).battle-controls-active > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
    --battle-control-size: 42px;
    --battle-control-gap: 10px;
  }
}

/* TRUE EOF V1.27Beta-controlbuttons1-final: beat legacy :has/#battle control placement. */
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
  --battle-control-size: 46px;
  --battle-control-gap: 12px;
  --battle-control-edge: max(12px, env(safe-area-inset-right));
  --battle-control-bottom: max(12px, env(safe-area-inset-bottom));
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  bottom: var(--battle-control-bottom) !important;
  width: var(--battle-control-size) !important;
  height: var(--battle-control-size) !important;
  min-width: var(--battle-control-size) !important;
  min-height: var(--battle-control-size) !important;
  max-width: var(--battle-control-size) !important;
  max-height: var(--battle-control-size) !important;
  z-index: 1400 !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .language-toggle {
  right: var(--battle-control-edge) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .music-toggle {
  right: calc(var(--battle-control-edge) + var(--battle-control-size) + var(--battle-control-gap)) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle {
  right: calc(var(--battle-control-edge) + (var(--battle-control-size) + var(--battle-control-gap)) * 2) !important;
  display: inline-flex !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
    --battle-control-size: 42px;
    --battle-control-gap: 10px;
  }
}

/* TRUE EOF V1.27Beta-battle-clarity1: make wallpapers visible and reduce battle chrome noise. */
html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app {
  background:
    linear-gradient(180deg, rgba(5, 9, 12, 0.22), rgba(4, 7, 10, 0.34)),
    var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battle-clarity1")) center center / cover no-repeat fixed,
    #071015 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .arena {
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(3, 7, 10, 0.2)),
    radial-gradient(circle at 50% 48%, rgba(248, 252, 245, 0.18), transparent 34%),
    var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battle-clarity1")) center center / cover no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(232, 244, 239, 0.08),
    inset 0 -90px 130px rgba(0, 0, 0, 0.3) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::before {
  opacity: 0.34 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::after {
  opacity: 0.12 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel.side {
  width: clamp(178px, 15vw, 218px) !important;
  max-width: clamp(178px, 15vw, 218px) !important;
  gap: 10px !important;
  padding: 6px 10px 10px 0 !important;
  background: transparent !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel.side section,
html body:not(.maintenance-mode).battle-controls-active #sidePanel.side .log {
  background:
    linear-gradient(180deg, rgba(17, 28, 34, 0.72), rgba(8, 14, 18, 0.66)) !important;
  border: 1px solid rgba(228, 240, 235, 0.16) !important;
  color: rgba(238, 248, 245, 0.9) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) saturate(1.06) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel.side section :is(h2, h3, strong),
html body:not(.maintenance-mode).battle-controls-active #sidePanel.side .log :is(h2, h3, strong) {
  color: #f3fbf8 !important;
  -webkit-text-fill-color: #f3fbf8 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel.side section :is(p, li, small),
html body:not(.maintenance-mode).battle-controls-active #sidePanel.side .log :is(p, li, small) {
  color: rgba(225, 238, 235, 0.8) !important;
  -webkit-text-fill-color: rgba(225, 238, 235, 0.8) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .stat-marks {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.energy, .fatigue, .laziness, .team-stat) {
  min-height: 28px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel {
  width: clamp(84px, 7.2vw, 108px) !important;
  max-width: clamp(84px, 7.2vw, 108px) !important;
  padding: 8px !important;
  gap: 7px !important;
  background:
    linear-gradient(180deg, rgba(18, 30, 36, 0.7), rgba(8, 14, 18, 0.58)) !important;
  border-color: rgba(228, 240, 235, 0.16) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.meter-row, .energy, .fatigue, .laziness, .choice, .status-bar, .equipment-slots) {
  background: rgba(8, 14, 18, 0.46) !important;
  border-color: rgba(228, 240, 235, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards {
  width: min(630px, 56vw) !important;
  max-width: min(630px, 56vw) !important;
  gap: clamp(12px, 1.2vw, 18px) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card {
  width: clamp(128px, 13vw, 164px) !important;
  min-width: clamp(128px, 13vw, 164px) !important;
  height: 66px !important;
  min-height: 66px !important;
  padding: 8px 12px 8px 58px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(30, 40, 48, 0.84), rgba(10, 16, 22, 0.76)) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card .action-icon {
  width: 46px !important;
  height: 46px !important;
  left: 8px !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card span {
  font-size: 17px !important;
  line-height: 1 !important;
}

/* TRUE EOF V1.27Beta-battle-clarity2: win against legacy image-button and white side-panel rules. */
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section.rules,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > .log {
  background:
    linear-gradient(180deg, rgba(17, 28, 34, 0.74), rgba(8, 14, 18, 0.66)) !important;
  border: 1px solid rgba(228, 240, 235, 0.16) !important;
  color: rgba(238, 248, 245, 0.9) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) saturate(1.06) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section :is(h2, h3, p, li, small, strong),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section.rules :is(h2, h3, p, li, small, strong),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > .log :is(h2, h3, p, li, small, strong) {
  color: rgba(238, 248, 245, 0.9) !important;
  -webkit-text-fill-color: rgba(238, 248, 245, 0.9) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section :is(h2, h3, strong),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section.rules :is(h2, h3, strong),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > .log :is(h2, h3, strong) {
  color: #f6fffb !important;
  -webkit-text-fill-color: #f6fffb !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards {
  width: min(520px, 48vw) !important;
  max-width: min(520px, 48vw) !important;
  height: 78px !important;
  min-height: 78px !important;
  gap: 10px !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
  width: clamp(126px, 12vw, 154px) !important;
  min-width: clamp(126px, 12vw, 154px) !important;
  max-width: clamp(126px, 12vw, 154px) !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
  padding: 0 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  filter: saturate(0.94) brightness(0.92) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28)) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
  font-size: 15px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* TRUE EOF V1.27Beta-battle-clarity3: battle owns the whole viewport, no stray white topbar. */
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .topbar,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #roomPill {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .arena {
  min-height: 100vh !important;
  height: 100vh !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .arena {
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
  min-height: 100vh !important;
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  inset: auto !important;
}

/* TRUE EOF V1.27Beta-battleclean2: readable wallpaper, cleaner battle chrome, class-tinted skill/action buttons. */
html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app {
  background:
    linear-gradient(180deg, rgba(244, 252, 250, 0.03), rgba(8, 16, 20, 0.08)),
    var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battleclean2")) center center / cover no-repeat fixed,
    #d9e8e7 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(90deg, rgba(8, 15, 20, 0.16), transparent 18%, transparent 82%, rgba(8, 15, 20, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(5, 12, 15, 0.1)),
    var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battleclean2")) center center / cover no-repeat !important;
  background-color: #d9e8e7 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::after {
  opacity: 0.08 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side {
  position: fixed !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  width: clamp(164px, 14vw, 210px) !important;
  max-width: clamp(164px, 14vw, 210px) !important;
  padding: 0 !important;
  gap: 0 !important;
  z-index: 950 !important;
  background: transparent !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side > section.rules {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side > section:not(.rules) {
  pointer-events: auto !important;
  padding: 9px !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(250, 255, 253, 0.76), rgba(221, 238, 238, 0.56)) !important;
  border: 1px solid rgba(122, 162, 162, 0.28) !important;
  color: #19313a !important;
  box-shadow:
    0 12px 28px rgba(16, 36, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  backdrop-filter: blur(12px) saturate(1.04) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side .battle-status {
  min-height: 28px !important;
  padding: 4px 7px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.54) !important;
  border: 1px solid rgba(119, 160, 162, 0.24) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side :is(h2, .battle-status span, .battle-status strong, #log article strong) {
  color: #16313d !important;
  -webkit-text-fill-color: #16313d !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side h2 {
  margin: 7px 0 5px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side #log.log {
  max-height: 128px !important;
  overflow: hidden auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side #log.log article {
  padding: 6px 7px !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(119, 160, 162, 0.16) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side #log.log :is(p, small) {
  color: rgba(22, 49, 61, 0.76) !important;
  -webkit-text-fill-color: rgba(22, 49, 61, 0.76) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighters {
  --fighter-panel-w: clamp(92px, 7.3vw, 108px);
  --fighter-card-w: clamp(218px, 18vw, 258px);
  --fighter-card-h: clamp(452px, 61vh, 516px);
  margin-top: clamp(34px, 5.8vh, 56px) !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.fighter, .fighter-panel, .seat-fighter, .team-board) {
  background-color: rgba(248, 253, 251, 0.16) !important;
  border-color: rgba(233, 244, 241, 0.26) !important;
  box-shadow:
    0 12px 28px rgba(12, 30, 38, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards {
  --action-accent: #679bb1;
  --action-accent-soft: #d9edf0;
  --action-ink: #18303b;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  width: min(468px, 43vw) !important;
  max-width: min(468px, 43vw) !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  transform: translateX(-50%) !important;
  z-index: 920 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards:is([data-attack-style*="rogue"], [data-attack-style*="warlock"], [data-attack-style*="shadow"], [data-attack-style*="death-knight"]) {
  --action-accent: #62557d;
  --action-accent-soft: #e6e1ef;
  --action-ink: #201d2f;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards:is([data-attack-style*="mage"], [data-attack-style*="shaman"], [data-attack-style*="frost"], [data-attack-style*="storm"], [data-attack-style*="priest"]) {
  --action-accent: #5d9fd2;
  --action-accent-soft: #dceff9;
  --action-ink: #17324d;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards:is([data-attack-style*="paladin"], [data-attack-style*="warrior"], [data-attack-style*="monk"]) {
  --action-accent: #b8914f;
  --action-accent-soft: #f0e8d6;
  --action-ink: #3c2e18;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards:is([data-attack-style*="hunter"], [data-attack-style*="druid"]) {
  --action-accent: #5f9978;
  --action-accent-soft: #dceee4;
  --action-ink: #1f3b2b;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
  --action-local-accent: var(--action-accent);
  --action-local-soft: var(--action-accent-soft);
  --action-local-ink: var(--action-ink);
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  aspect-ratio: auto !important;
  padding: 0 10px 0 47px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--action-local-accent) 48%, rgba(255, 255, 255, 0.66)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 246, 0.82)),
    linear-gradient(135deg, var(--action-local-soft), rgba(255, 255, 255, 0.2)) !important;
  color: var(--action-local-ink) !important;
  -webkit-text-fill-color: var(--action-local-ink) !important;
  box-shadow:
    0 10px 22px rgba(14, 35, 43, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -10px 18px color-mix(in srgb, var(--action-local-accent) 12%, transparent) !important;
  filter: none !important;
  overflow: hidden !important;
  clip-path: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.defend {
  --action-local-accent: #55a9a7;
  --action-local-soft: #d9efed;
  --action-local-ink: #143b3f;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.charge {
  --action-local-accent: #c49b48;
  --action-local-soft: #f2e8cd;
  --action-local-ink: #433214;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
  position: absolute !important;
  left: 9px !important;
  top: 50% !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--action-local-accent) 42%, rgba(255, 255, 255, 0.72)) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.94), transparent 34%),
    linear-gradient(180deg, #ffffff, var(--action-local-soft)) !important;
  color: var(--action-local-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 4px 9px rgba(20, 46, 56, 0.14) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: block !important;
  color: var(--action-local-ink) !important;
  -webkit-text-fill-color: var(--action-local-ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card:hover:not(:disabled),
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card:focus-visible:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--action-local-accent) 72%, #ffffff) !important;
  box-shadow:
    0 12px 24px rgba(14, 35, 43, 0.22),
    0 0 18px color-mix(in srgb, var(--action-local-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card.chosen-action::after {
  content: attr(data-chosen-label) !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  right: 7px !important;
  top: 6px !important;
  left: auto !important;
  bottom: auto !important;
  height: 16px !important;
  min-height: 16px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--action-local-accent) 42%, rgba(255, 255, 255, 0.76)) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--action-local-ink) !important;
  -webkit-text-fill-color: var(--action-local-ink) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) {
  --skill-accent: #679bb1;
  --skill-soft: #e6f3f3;
  --skill-ink: #18303b;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card[data-attack-style*="rogue"], .seat-fighter[data-attack-style*="rogue"] .team-skill-label, .role-card[data-attack-style*="warlock"], .seat-fighter[data-attack-style*="warlock"] .team-skill-label, .role-card[data-attack-style*="death-knight"], .seat-fighter[data-attack-style*="death-knight"] .team-skill-label) {
  --skill-accent: #62557d;
  --skill-soft: #e8e2f2;
  --skill-ink: #211d30;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card[data-attack-style*="mage"], .seat-fighter[data-attack-style*="mage"] .team-skill-label, .role-card[data-attack-style*="priest"], .seat-fighter[data-attack-style*="priest"] .team-skill-label, .role-card[data-attack-style*="shaman"], .seat-fighter[data-attack-style*="shaman"] .team-skill-label) {
  --skill-accent: #5d9fd2;
  --skill-soft: #dceff9;
  --skill-ink: #17324d;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card[data-attack-style*="hunter"], .seat-fighter[data-attack-style*="hunter"] .team-skill-label, .role-card[data-attack-style*="druid"], .seat-fighter[data-attack-style*="druid"] .team-skill-label) {
  --skill-accent: #5f9978;
  --skill-soft: #dceee4;
  --skill-ink: #1f3b2b;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card[data-attack-style*="paladin"], .seat-fighter[data-attack-style*="paladin"] .team-skill-label, .role-card[data-attack-style*="warrior"], .seat-fighter[data-attack-style*="warrior"] .team-skill-label, .role-card[data-attack-style*="monk"], .seat-fighter[data-attack-style*="monk"] .team-skill-label) {
  --skill-accent: #b8914f;
  --skill-soft: #f0e8d6;
  --skill-ink: #3c2e18;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) > .skill-label,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .team-skill-label.skill-label {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  min-height: 30px !important;
  max-width: min(100%, 240px) !important;
  padding: 6px 12px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--skill-accent) 48%, rgba(255, 255, 255, 0.68)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 247, 0.82)),
    linear-gradient(135deg, var(--skill-soft), rgba(255, 255, 255, 0.22)) !important;
  color: var(--skill-ink) !important;
  -webkit-text-fill-color: var(--skill-ink) !important;
  text-shadow: none !important;
  box-shadow:
    0 8px 18px rgba(12, 30, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -8px 14px color-mix(in srgb, var(--skill-accent) 10%, transparent) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-icon.passive-skill-icon {
  width: 19px !important;
  min-width: 19px !important;
  max-width: 19px !important;
  height: 19px !important;
  min-height: 19px !important;
  max-height: 19px !important;
  flex-basis: 19px !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.74)) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label),
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #battle#battle.battle.identity-battle:not([hidden]) #seatRing .team-skill-label :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  min-height: 25px !important;
  padding: 4px 7px !important;
  gap: 5px !important;
  font-size: 11px !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  padding: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(244, 253, 255, 0.88), rgba(157, 205, 220, 0.62) 54%, rgba(45, 91, 108, 0.72)) !important;
  border: 1px solid rgba(225, 246, 246, 0.62) !important;
  box-shadow:
    0 10px 22px rgba(8, 24, 32, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -8px 16px rgba(19, 66, 84, 0.24) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  position: relative !important;
  width: 25px !important;
  height: 19px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(38, 83, 99, 0.45) !important;
  background:
    radial-gradient(circle at 70% 26%, #fff8bd 0 2px, transparent 3px),
    linear-gradient(135deg, rgba(205, 231, 228, 0.96), rgba(104, 156, 172, 0.74) 58%, rgba(36, 75, 94, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 5px rgba(13, 39, 50, 0.18) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  right: 4px !important;
  bottom: 3px !important;
  height: 7px !important;
  clip-path: polygon(0 100%, 37% 28%, 55% 58%, 70% 38%, 100% 100%) !important;
  background: rgba(244, 252, 249, 0.9) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle b {
  display: none !important;
}

html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) .avatar[data-character="Kongdu"] {
  --art-size: 92% auto !important;
  --art-position: center 36% !important;
  background-size: var(--art-size), cover, cover !important;
  background-position: var(--art-position), center, center !important;
}

html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) .team-art[data-character="Kongdu"] {
  --team-art-size: 92% auto !important;
  --team-art-position: center 36% !important;
  background-size: var(--team-art-size) !important;
  background-position: var(--team-art-position) !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards {
    width: min(430px, calc(100vw - 108px)) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    gap: 7px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding-left: 40px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
    left: 7px !important;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
    font-size: 13px !important;
  }
}

/* TRUE EOF V1.27Beta-battleclean3: specificity lock against legacy battle button frames. */
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 220px !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side > section:not(.rules) {
  height: auto !important;
  min-height: 0 !important;
  max-height: 210px !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side > section.rules {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards {
  left: 50% !important;
  width: min(468px, 43vw) !important;
  max-width: min(468px, 43vw) !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  gap: 9px !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  aspect-ratio: auto !important;
  padding: 0 10px 0 47px !important;
  display: flex !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 246, 0.82)),
    linear-gradient(135deg, var(--action-local-soft), rgba(255, 255, 255, 0.2)) !important;
  color: var(--action-local-ink) !important;
  -webkit-text-fill-color: var(--action-local-ink) !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card.chosen-action::after {
  content: attr(data-chosen-label) !important;
  display: grid !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  color: var(--action-local-ink) !important;
  -webkit-text-fill-color: var(--action-local-ink) !important;
  text-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card.role-card[data-attack-style], .seat-fighter[data-attack-style] .team-skill-label) :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 247, 247, 0.82)),
    linear-gradient(135deg, var(--skill-soft), rgba(255, 255, 255, 0.22)) !important;
  border: 1px solid color-mix(in srgb, var(--skill-accent) 48%, rgba(255, 255, 255, 0.68)) !important;
  color: var(--skill-ink) !important;
  -webkit-text-fill-color: var(--skill-ink) !important;
  text-shadow: none !important;
  box-shadow:
    0 8px 18px rgba(12, 30, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -8px 14px color-mix(in srgb, var(--skill-accent) 10%, transparent) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card.role-card[data-attack-style], .seat-fighter[data-attack-style] .team-skill-label) :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) :is(.skill-inline-text, .skill-inline-icon) {
  color: var(--skill-ink) !important;
  -webkit-text-fill-color: var(--skill-ink) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  display: inline-flex !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(244, 253, 255, 0.88), rgba(157, 205, 220, 0.62) 54%, rgba(45, 91, 108, 0.72)) !important;
  border: 1px solid rgba(225, 246, 246, 0.62) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules) #log.log {
  background:
    linear-gradient(180deg, rgba(250, 255, 253, 0.78), rgba(221, 238, 238, 0.58)) !important;
  border-color: rgba(122, 162, 162, 0.28) !important;
  color: #19313a !important;
  -webkit-text-fill-color: #19313a !important;
  box-shadow:
    0 12px 28px rgba(16, 36, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules) #log.log {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules) :is(h2, h3, p, small, strong, span),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules) #log.log :is(h2, h3, p, small, strong, span) {
  color: #19313a !important;
  -webkit-text-fill-color: #19313a !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side > section:not(.rules) #log.log article {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(119, 160, 162, 0.16) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side {
  width: clamp(210px, 17vw, 248px) !important;
  max-width: clamp(210px, 17vw, 248px) !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side .battle-status.status-line {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  align-items: start !important;
  justify-items: start !important;
  text-align: left !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side .battle-status.status-line > :is(span, strong) {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.22 !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side .battle-status.status-line > span {
  font-size: 10px !important;
  opacity: 0.74 !important;
}

html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #sidePanel#sidePanel.side.side .battle-status.status-line > strong {
  font-size: 12px !important;
}

/* TRUE EOF V1.27Beta-identity-phase-redraw2: faction-specific identity select frames and confirm buttons. */
html body:not(.maintenance-mode) {
  --identity-confirm-justice-art: url("assets/ui/identity-confirm-justice-button-v2.webp?v=V1.27Beta-identity-phase-redraw2");
  --identity-confirm-chaos-art: url("assets/ui/identity-confirm-chaos-button-v2.webp?v=V1.27Beta-identity-phase-redraw2");
  --identity-select-justice-frame-art: url("assets/ui/identity-select-justice-frame-v2.webp?v=V1.27Beta-identity-phase-redraw2");
  --identity-select-chaos-frame-art: url("assets/ui/identity-select-chaos-frame-v2.webp?v=V1.27Beta-identity-phase-redraw2");
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"],
html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] {
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: clamp(18px, 2.1vw, 28px) !important;
  box-shadow:
    0 18px 48px rgba(4, 10, 18, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"] {
  background:
    var(--identity-select-justice-frame-art) center / 100% 100% no-repeat,
    #f4f0df !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] {
  background:
    var(--identity-select-chaos-frame-art) center / 100% 100% no-repeat,
    #09070f !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"] .identity-confirm,
html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm {
  min-height: 58px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--identity-confirm-art) center / 100% 100% no-repeat !important;
  color: #fff7df !important;
  -webkit-text-fill-color: #fff7df !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.92),
    0 0 14px rgba(255, 232, 151, 0.4) !important;
  box-shadow: 0 10px 24px rgba(3, 9, 18, 0.32) !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"] .identity-confirm {
  --identity-confirm-art: var(--identity-confirm-justice-art);
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm {
  --identity-confirm-art: var(--identity-confirm-chaos-art);
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"] .identity-confirm:disabled,
html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm:disabled {
  opacity: 0.46 !important;
  filter: grayscale(0.38) brightness(0.82) !important;
}

/* V1.27Beta-wallpaper-icon1: GPT-drawn circular battle wallpaper control icon. */
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(16, 31, 48, 0.74), rgba(5, 11, 20, 0.9)) !important;
  border: 1px solid rgba(126, 203, 255, 0.54) !important;
  box-shadow:
    0 10px 22px rgba(3, 12, 24, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-wallpaper-icon1") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.38)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before {
  content: none !important;
}

/* V1.27Beta-battle-status-contrast1: readable battle status text on illustrated panels. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
  --battle-status-ink: #fff8df;
  --battle-status-muted: rgba(255, 244, 211, 0.84);
  --battle-status-health: #fff2c2;
  --battle-status-energy: #ffd86b;
  --battle-status-fatigue: #f1c294;
  --battle-status-laziness: #e9c2ff;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .fighter-panel,
  .fighter-panel .meter-row,
  .fighter-panel .fatigue-row,
  .fighter-panel .status-bar,
  .team-info,
  .team-mini-bars,
  .team-stat-stack,
  .team-status-bar
) {
  color: var(--battle-status-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .fighter-panel .stat-label,
  .fighter-panel .choice,
  .team-mini-row span,
  .team-choice,
  .team-info header small,
  .team-stat > .stat-label
) {
  color: var(--battle-status-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  #youHp,
  #oppHp,
  .team-mini-row.hp-mini em
) {
  color: var(--battle-status-health) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.86),
    0 0 10px rgba(255, 213, 105, 0.28) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .energy,
  .team-energy,
  .energy .stat-label,
  .energy .stat-value,
  .team-energy .stat-label,
  .team-energy .stat-value
) {
  color: var(--battle-status-energy) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .fatigue,
  .team-fatigue,
  .fatigue .stat-label,
  .fatigue .stat-value,
  .team-fatigue .stat-label,
  .team-fatigue .stat-value
) {
  color: var(--battle-status-fatigue) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .laziness,
  .team-laziness,
  .laziness .stat-label,
  .laziness .stat-value,
  .team-laziness .stat-label,
  .team-laziness .stat-value
) {
  color: var(--battle-status-laziness) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(
  .status-token,
  .status-token *,
  .team-status-bar,
  .team-status-bar *,
  .status-bar,
  .status-bar *
) {
  color: var(--battle-status-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.74) !important;
}

/* V1.27Beta-skill-frame-clean1: battle hero skill labels use one visual layer only. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label)::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label)::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.skill-label, .team-skill-label)::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.skill-label, .team-skill-label)::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) > .skill-label,
html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .team-skill-label.skill-label {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--skill-accent, #79b6ce) 54%, rgba(255, 255, 255, 0.2)) !important;
  background:
    linear-gradient(180deg, rgba(35, 46, 56, 0.88), rgba(12, 18, 24, 0.84)) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  color: #fff8df !important;
  -webkit-text-fill-color: #fff8df !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) .inline-skill-action::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) .inline-skill-action:disabled {
  opacity: 0.62 !important;
  filter: grayscale(0.35) saturate(0.75) brightness(0.86) !important;
  cursor: not-allowed !important;
}

/* V1.27Beta-mobile-battle-rebuild1: phone battle layout is rebuilt as a compact readable board. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active {
    width: 100vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(6, 14, 20, 0.06), rgba(6, 14, 20, 0.2)),
      var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-mobile-battle-rebuild1")) center center / cover no-repeat fixed,
      #d7e6e4 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .arena {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #roomPill,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(40px + env(safe-area-inset-top)) 8px calc(142px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    overflow: hidden !important;
    background:
      linear-gradient(90deg, rgba(5, 12, 18, 0.18), transparent 24%, transparent 76%, rgba(5, 12, 18, 0.18)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(7, 14, 20, 0.1)),
      var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-mobile-battle-rebuild1")) center center / cover no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighters {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-areas:
      "opponent"
      "versus"
      "player" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 22px minmax(0, 1fr) !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .you-combatant {
    grid-area: player !important;
    grid-template-areas: "art panel" !important;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .opponent-combatant {
    grid-area: opponent !important;
    grid-template-areas: "panel art" !important;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    display: grid !important;
    gap: 6px !important;
    align-items: stretch !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(7, 15, 22, 0.26)),
      rgba(7, 17, 24, 0.18) !important;
    border: 1px solid rgba(235, 247, 243, 0.22) !important;
    box-shadow:
      0 12px 26px rgba(6, 18, 26, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .versus {
    grid-area: versus !important;
    align-self: center !important;
    justify-self: center !important;
    width: 42px !important;
    height: 22px !important;
    min-width: 42px !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    border: 1px solid rgba(236, 248, 244, 0.28) !important;
    background: rgba(8, 18, 26, 0.48) !important;
    color: rgba(248, 253, 251, 0.92) !important;
    -webkit-text-fill-color: rgba(248, 253, 251, 0.92) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighter {
    grid-area: art !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 24px minmax(0, 1fr) !important;
    gap: 4px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    background: rgba(248, 253, 251, 0.12) !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighter-panel {
    grid-area: panel !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: minmax(20px, auto) minmax(20px, auto) 28px 24px minmax(18px, auto) !important;
    gap: 4px !important;
    align-content: stretch !important;
    border-radius: 9px !important;
    background: rgba(8, 18, 26, 0.36) !important;
    border-color: rgba(235, 247, 243, 0.2) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighter-head {
    min-height: 24px !important;
    height: 24px !important;
    padding: 3px 6px !important;
    gap: 4px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighter-head :is(.fighter-side, strong, span) {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .character-face {
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 3px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .avatar.avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center center, center center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 -22px 34px rgba(5, 11, 16, 0.22) !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #battle#battle.battle:not([hidden]) .avatar[data-character="Kongdu"],
  html body:not(.maintenance-mode).battle-controls-active #battle#battle.battle:not([hidden]) .team-art[data-character="Kongdu"] {
    --art-size: 82% auto !important;
    --art-position: center bottom !important;
    --team-art-size: 82% auto !important;
    --team-art-position: center bottom !important;
    background-size: var(--art-size, contain), cover, cover !important;
    background-position: var(--art-position, center bottom), center center, center center !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 25px !important;
    max-height: 34px !important;
    padding: 3px 5px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card > b {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card :is(span, .skill-label, .inline-skill-name, .inline-skill-action, .passive-skill-label, .skill-inline-text) {
    max-width: 100% !important;
    min-height: 21px !important;
    max-height: 28px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.fighter-panel .status-bar, .fighter-panel .equipment-slots, .fighter-panel .meter-row, .fighter-panel .energy, .fighter-panel .fatigue-row, .fighter-panel .choice) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 2px 4px !important;
    border-radius: 7px !important;
    font-size: 9px !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .status-bar {
    max-height: 32px !important;
    overflow: hidden auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .equipment-slots {
    max-height: 26px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .fatigue-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.energy, .fatigue, .laziness, .team-stat) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 3px !important;
    align-items: center !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.energy, .fatigue, .laziness, .team-stat) .stat-marks {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.energy, .fatigue, .laziness, .team-stat) .stat-value {
    min-width: 14px !important;
    font-size: 0 !important;
    text-align: right !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) :is(.energy, .fatigue, .laziness, .team-stat) .stat-value::after {
    content: attr(data-current) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard.team-board:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard.team-board:not([hidden]) {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 6px !important;
    align-content: stretch !important;
    justify-content: stretch !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .seat-ring-core,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .seat-fighter {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 5px !important;
    align-items: stretch !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring[data-seats="10"] .seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring[data-seats="10"] .seat-fighter {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 3px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .seat-fighter.self-seat,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .seat-fighter.self-seat {
    transform: none !important;
    border-color: rgba(255, 246, 208, 0.86) !important;
    box-shadow:
      0 0 0 1px rgba(255, 246, 208, 0.2),
      0 0 20px rgba(114, 220, 255, 0.26),
      0 10px 22px rgba(5, 13, 20, 0.22) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-art,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-art {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 7px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-info,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-info {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 3px !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    gap: 2px !important;
    overflow: hidden !important;
    border-radius: 7px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-mini-bars,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-mini-bars {
    padding: 2px !important;
    display: grid !important;
    gap: 2px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-stat-stack,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-stat-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-stat,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-stat {
    min-height: 18px !important;
    padding: 1px 2px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-stat .stat-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-stat .stat-label {
    font-size: 0 !important;
    gap: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-stat .stat-label-icon,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-stat .stat-label-icon {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring :is(.team-status-bar, .team-equipment, .team-choice),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring :is(.team-status-bar, .team-equipment, .team-choice) {
    min-height: 0 !important;
    max-height: 24px !important;
    padding: 2px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-info header,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-info header {
    min-height: 18px !important;
    padding: 2px 4px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-info header :is(strong, small),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-info header :is(strong, small) {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-skill,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-skill {
    position: absolute !important;
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    top: auto !important;
    z-index: 8 !important;
    max-width: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .team-skill-label :is(.inline-skill-name, .inline-skill-action, .passive-skill-label),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .team-skill-label :is(.inline-skill-name, .inline-skill-action, .passive-skill-label) {
    min-height: 18px !important;
    max-height: 20px !important;
    padding: 2px 5px !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    z-index: 1320 !important;
    width: auto !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 6px 0 34px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    display: grid !important;
    place-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 1330 !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries .library-action {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 4px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1330 !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility #showRulesBattle {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility button {
    width: auto !important;
    min-width: 58px !important;
    max-width: 96px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle),
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
    --battle-control-size: 38px !important;
    --battle-control-gap: 8px !important;
    --battle-control-edge: max(8px, env(safe-area-inset-right)) !important;
    --battle-control-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    position: fixed !important;
    left: auto !important;
    top: auto !important;
    bottom: var(--battle-control-bottom) !important;
    width: var(--battle-control-size) !important;
    height: var(--battle-control-size) !important;
    min-width: var(--battle-control-size) !important;
    min-height: var(--battle-control-size) !important;
    max-width: var(--battle-control-size) !important;
    max-height: var(--battle-control-size) !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    z-index: 1400 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .language-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .language-toggle {
    right: var(--battle-control-edge) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .music-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .music-toggle {
    right: calc(var(--battle-control-edge) + var(--battle-control-size) + var(--battle-control-gap)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle {
    right: calc(var(--battle-control-edge) + (var(--battle-control-size) + var(--battle-control-gap)) * 2) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle) img {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .language-toggle .language-code {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
    width: 34px !important;
    height: 34px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-mobile-battle-rebuild1") center / contain no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle b {
    display: none !important;
  }
}

/* V1.27Beta-mobile-team-grid-lock1: team seats obey the phone grid instead of desktop seat sizes. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board:not([hidden]) #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board:not([hidden]) #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring {
    --seat-size: auto !important;
    --seat-card-h: auto !important;
    --seat-art-h: auto !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 4px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-art.team-art {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border-radius: 7px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-info.team-info {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 3px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
}

/* V1.27Beta-mobile-team-width-lock1: team board cannot exceed the phone viewport. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard.team-board {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard.team-board #seatRing#seatRing.seat-ring {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }
}

/* V1.27Beta-mobile-actions-specificity-lock1: beat legacy :has action-row placement. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards.cards {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: 76px !important;
    z-index: 1320 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards.cards > .action-card.action-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 6px 0 34px !important;
    transform: none !important;
  }
}

/* V1.27Beta-mobile-duel-widthfix1: kill legacy desktop combatant widths on phones. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighters.fighters {
    --fighter-panel-w: auto !important;
    --fighter-card-w: auto !important;
    --fighter-card-h: auto !important;
    --combatant-w: auto !important;
    --combatant-pad: 5px !important;
    --combatant-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 430px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant.combatant {
    --fighter-panel-w: auto !important;
    --fighter-card-w: auto !important;
    --combatant-w: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .you-combatant.you-combatant {
    display: grid !important;
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) !important;
    grid-template-areas: "art panel" !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .opponent-combatant.opponent-combatant {
    display: grid !important;
    grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr) !important;
    grid-template-areas: "panel art" !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant.combatant > .fighter.fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant.combatant > .fighter-panel.fighter-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant.combatant > .fighter.fighter {
    grid-area: art !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .combatant.combatant > .fighter-panel.fighter-panel {
    grid-area: panel !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .fighter.fighter .character-face.character-face {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
  }
}

/* V1.27Beta-mobile-actions-safe-row1: final simple phone action row above utility icons. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #cards.cards {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: 76px !important;
    z-index: 1320 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards.cards > .action-card.action-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 6px 0 34px !important;
  }
}

/* V1.27Beta-mobile-controls-restore1: keep music/language artwork original; only wallpaper gets matching art. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle),
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle) {
    position: fixed !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 1400 !important;
    transform: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .language-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .language-toggle {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-radius: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .music-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .music-toggle {
    right: calc(max(8px, env(safe-area-inset-right)) + 64px + 4px) !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    border-radius: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle {
    right: calc(max(8px, env(safe-area-inset-right)) + 64px + 4px + 58px + 4px) !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    border-radius: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle) img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .language-toggle .language-code {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
    width: 58px !important;
    height: 58px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-mobile-controls-restore1") center / contain no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 8px rgba(0, 0, 0, 0.72))
      drop-shadow(0 0 10px rgba(78, 205, 196, 0.28)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle b {
    display: none !important;
  }
}

/* V1.27Beta-action-panel-restore1: action buttons use class/spec panel art, not generic inline icons. */
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(6, 14, 20, 0.24)) !important;
  clip-path: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.attack,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.attack,
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.attack {
  background: var(--action-attack-panel-art) center center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.defend,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.defend,
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.defend {
  background: var(--action-defend-panel-art) center center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.charge,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.charge,
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.charge {
  background: var(--action-charge-panel-art) center center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span,
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span,
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span {
  position: absolute !important;
  left: var(--action-template-left, 34.921875%) !important;
  top: var(--action-template-top, 22.916667%) !important;
  width: var(--action-template-width, 64.6875%) !important;
  height: var(--action-template-height, 48.333333%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 4% !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(13px, 1.45vw, 18px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card:hover:not(:disabled),
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card:focus-visible:not(:disabled) {
  transform: translateY(-2px) !important;
  filter:
    drop-shadow(0 13px 22px rgba(6, 14, 20, 0.32))
    drop-shadow(0 0 10px rgba(246, 250, 255, 0.2)) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards.cards > .action-card.action-card {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards#cards.cards.cards > .action-card.action-card span,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards.cards.cards > .action-card.action-card span {
    font-size: 12px !important;
    padding: 0 3% !important;
  }
}

/* V1.27Beta-mobile-team-list1: phone multiplayer uses a readable vertical list instead of squeezed desktop seating. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard.team-board {
    position: relative !important;
    z-index: 2 !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 6px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring {
    --seat-size: auto !important;
    --seat-card-h: auto !important;
    --seat-art-h: auto !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 112px !important;
    gap: 6px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring[data-seats="10"] {
    grid-auto-rows: 96px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.team-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden])) #appRoot#appRoot.app.identity-battle-app #battle#battle.battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.team-battle-app #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.identity-battle-app #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 5px !important;
    border-radius: 10px !important;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(7, 16, 24, 0.28)),
      rgba(7, 15, 23, 0.42) !important;
    border: 1px solid rgba(235, 247, 243, 0.22) !important;
    box-shadow: 0 9px 18px rgba(5, 12, 18, 0.2) !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring[data-seats="10"] .seat-fighter.seat-fighter {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter.self-seat {
    border-color: rgba(255, 238, 176, 0.52) !important;
    box-shadow:
      0 10px 20px rgba(5, 12, 18, 0.24),
      0 0 0 1px rgba(255, 238, 176, 0.22) inset !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-art.team-art {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border-radius: 8px !important;
    background-size: contain !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-info.team-info {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: 30px minmax(18px, auto) minmax(14px, auto) 16px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter header {
    min-width: 0 !important;
    max-width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter header :is(strong, small) {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-mini-bars {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 12px 14px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-stat-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter :is(.team-stat, .team-choice, .team-status-bar, .team-equipment, .team-skill) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-card-inscription {
    display: none !important;
  }
}

/* V1.27Beta-control-icons-restore2: bottom-right controls are raw artwork; wallpaper is the only matching round art. */
html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle),
html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])) > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle)::before,
html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle, .battle-wallpaper-toggle)::after,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.music-toggle, .language-toggle) img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.58)) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-control-icons-restore2") center / contain no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 10px rgba(78, 205, 196, 0.28)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle b {
  display: none !important;
}

/* V1.27Beta-action-panel-map1: CSS fallback for attack/defend/charge panel art before JS sync runs. */
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="blood-death-knight"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/death_knight/blood.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/death_knight/blood.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/death_knight/blood.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="frost-death-knight"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/death_knight/frost.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/death_knight/frost.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/death_knight/frost.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="unholy-death-knight"], [data-attack-style="death-knight"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/death_knight/unholy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/death_knight/unholy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/death_knight/unholy.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="havoc-demon-hunter"], [data-attack-style="demon-hunter"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v131/attack/demon_hunter/havoc.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v131/defend/demon_hunter/havoc.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v131/charge/demon_hunter/havoc.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="vengeance-demon-hunter"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v131/attack/demon_hunter/vengeance.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v131/defend/demon_hunter/vengeance.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v131/charge/demon_hunter/vengeance.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="soul-eclipse-demon-hunter"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v131/attack/demon_hunter/soul_eclipse.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v131/defend/demon_hunter/soul_eclipse.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v131/charge/demon_hunter/soul_eclipse.png?v=V1.28Beta-demonhunter-actions-redraw1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="xiaocai-extinction-demon-hunter"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/demon_hunter/xiaocai_extinction.png?v=V1.27Beta-xiaocai-extinction-icons1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/demon_hunter/xiaocai_extinction.png?v=V1.27Beta-xiaocai-extinction-icons1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/demon_hunter/xiaocai_extinction.png?v=V1.27Beta-xiaocai-extinction-icons1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="balance-druid"], [data-attack-style="druid"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/druid/balance.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/druid/balance.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/druid/balance.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="feral-druid"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/druid/feral.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/druid/feral.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/druid/feral.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="guardian-druid"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/druid/guardian.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/druid/guardian.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/druid/guardian.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="restoration-druid"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/druid/restoration.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/druid/restoration.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/druid/restoration.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="devastation-evoker"], [data-attack-style="evoker"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/evoker/devastation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/evoker/devastation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/evoker/devastation.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="preservation-evoker"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/evoker/preservation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/evoker/preservation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/evoker/preservation.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="augmentation-evoker"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/evoker/augmentation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/evoker/augmentation.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/evoker/augmentation.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="beastmaster-hunter"], [data-attack-style="beast-mastery-hunter"], [data-attack-style="hunter"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/hunter/beast_mastery.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/hunter/beast_mastery.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/hunter/beast_mastery.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="marksman-hunter"], [data-attack-style="marksmanship-hunter"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/hunter/marksmanship.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/hunter/marksmanship.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/hunter/marksmanship.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="survival-hunter"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/hunter/survival.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/hunter/survival.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/hunter/survival.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="arcane-mage"], [data-attack-style="mage"], [data-attack-style="caster"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/arcane.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/arcane.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/arcane.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="fire-mage"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/fire.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/fire.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/fire.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="frost-mage"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/mage/frost.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/mage/frost.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/mage/frost.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="windwalker-monk"], [data-attack-style="monk"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/monk/windwalker.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/monk/windwalker.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/monk/windwalker.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="brewmaster-monk"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/monk/brewmaster.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/monk/brewmaster.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/monk/brewmaster.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="mistweaver-monk"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/monk/mistweaver.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/monk/mistweaver.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/monk/mistweaver.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="retribution-paladin"], [data-attack-style="paladin"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/retribution.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/retribution.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/retribution.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="holy-paladin"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/paladin/holy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/paladin/holy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/paladin/holy.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="protection-paladin"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v130/attack/paladin/protection.png?v=V1.28Beta-protection-paladin-redraw2") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v130/defend/paladin/protection.png?v=V1.28Beta-protection-paladin-redraw2") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v130/charge/paladin/protection.png?v=V1.28Beta-protection-paladin-redraw2") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="discipline-priest"], [data-attack-style="priest"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/priest/discipline.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/priest/discipline.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/priest/discipline.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="holy-priest"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/priest/holy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/priest/holy.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/priest/holy.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="shadow-priest"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/priest/shadow.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/priest/shadow.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/priest/shadow.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="assassination-rogue"], [data-attack-style="rogue"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/rogue/assassination.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/rogue/assassination.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/rogue/assassination.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="outlaw-rogue"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/rogue/outlaw.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/rogue/outlaw.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/rogue/outlaw.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="subtlety-rogue"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/rogue/subtlety.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/rogue/subtlety.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/rogue/subtlety.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="elemental-shaman"], [data-attack-style="shaman"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/shaman/elemental.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/shaman/elemental.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/shaman/elemental.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="enhancement-shaman"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/shaman/enhancement.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/shaman/enhancement.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/shaman/enhancement.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="restoration-shaman"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/shaman/restoration.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/shaman/restoration.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/shaman/restoration.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="affliction-warlock"], [data-attack-style="warlock"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warlock/affliction.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warlock/affliction.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warlock/affliction.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="demonology-warlock"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warlock/demonology.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warlock/demonology.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warlock/demonology.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="destruction-warlock"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warlock/destruction.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warlock/destruction.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warlock/destruction.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards:is([data-attack-style="arms-warrior"], [data-attack-style="warrior"]) {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warrior/arms.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warrior/arms.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warrior/arms.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="fury-warrior"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warrior/fury.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warrior/fury.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warrior/fury.png?v=V1.27Beta-action-panel-map1") !important;
}
html body:not(.maintenance-mode) #cards#cards.cards[data-attack-style="protection-warrior"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warrior/protection.png?v=V1.27Beta-action-panel-map1") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warrior/protection.png?v=V1.27Beta-action-panel-map1") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warrior/protection.png?v=V1.27Beta-action-panel-map1") !important;
}

/* V1.27Beta-mobile-team-list-lock2: higher specificity lock for phone multiplayer list layout. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard#teamBoard.team-board {
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: 112px !important;
    gap: 6px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring[data-seats="10"] {
    grid-auto-rows: 96px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring[data-seats="10"] .seat-fighter.seat-fighter {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }
}

/* V1.27Beta-mobile-action-width-lock2: phone action row uses the actual viewport width. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: auto !important;
    top: auto !important;
    bottom: 76px !important;
    z-index: 1320 !important;
    width: calc(100vw - 16px) !important;
    min-width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    inline-size: calc(100vw - 16px) !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    inline-size: auto !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
}

/* V1.27Beta-skill-plate-clean2: skill labels are one clean plate, no stacked rings. */
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card.role-card, .team-skill-label.team-skill-label),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card.role-card, .team-skill-label.team-skill-label) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* V1.28Beta-xiaocai1: Xiaocai extinction form fel energy rail, opposite the status panel. */
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighter,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .seat-fighter {
  overflow: visible;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-rail {
  position: absolute;
  z-index: 18;
  top: 50%;
  width: 24px;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  pointer-events: none;
  color: #aaff73;
  text-shadow:
    0 0 7px rgba(88, 255, 80, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.86);
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-rail[data-side="outer-right"] {
  right: -30px;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-rail[data-side="outer-left"] {
  left: -30px;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-rail[data-side="team-left"] {
  left: 4px;
  top: 54%;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-label {
  writing-mode: vertical-rl;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-value {
  display: block;
  font-size: 16px;
  line-height: 1;
  color: #eaff9a;
  font-weight: 950;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-stack {
  display: grid;
  gap: 2px;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-stack i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(160, 255, 130, 0.22);
  box-shadow: 0 0 4px rgba(90, 255, 80, 0.15);
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .xiaocai-fel-stack i.filled {
  background: linear-gradient(135deg, #55ff49, #4fc8ff 55%, #b35cff);
  box-shadow:
    0 0 7px rgba(96, 255, 64, 0.86),
    0 0 11px rgba(83, 202, 255, 0.42);
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #battle.battle:not([hidden]) .fighter .xiaocai-fel-rail[data-side^="outer"] {
    right: 4px;
    left: auto;
    top: 46%;
  }

  html body:not(.maintenance-mode).battle-controls-active #battle.battle:not([hidden]) .opponent .xiaocai-fel-rail[data-side="outer-left"] {
    left: 4px;
    right: auto;
  }

  html body:not(.maintenance-mode).battle-controls-active #battle.battle:not([hidden]) .xiaocai-fel-label {
    font-size: 9px;
  }

  html body:not(.maintenance-mode).battle-controls-active #battle.battle:not([hidden]) .xiaocai-fel-value {
    font-size: 14px;
  }
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::before,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) > .skill-label,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-skill-label.skill-label,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) > .skill-label,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-skill-label.skill-label {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--skill-accent, #77b8cf) 46%, rgba(255, 255, 255, 0.72)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 242, 240, 0.9)),
    linear-gradient(90deg, color-mix(in srgb, var(--skill-accent, #77b8cf) 16%, transparent), transparent) !important;
  color: color-mix(in srgb, var(--skill-accent, #315d6e) 52%, #17242b) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 8px rgba(5, 12, 18, 0.18) !important;
  outline: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) .skill-inline-icon.skill-inline-icon {
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label) :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
  }
}

/* V1.27Beta-mobile-team-content-lock3: phone team cards clip their internal rows instead of overflowing. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board * {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-info.team-info {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter :is(.team-mini-bars, .team-mini-row, .hp-mini, .team-stat-stack, .team-stat, .team-status-bar, .team-equipment, .team-choice, .team-skill, header) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-stat-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-stat {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    padding: 1px 2px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-stat .stat-label {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #teamBoard#teamBoard#teamBoard.team-board #seatRing#seatRing#seatRing.seat-ring .seat-fighter.seat-fighter .team-stat .stat-value {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    text-align: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* V1.27Beta-desktop-portrait-scale1: desktop duel portraits get more room and show the full figure. */
@media (min-width: 721px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters.fighters,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters.fighters {
    --fighter-panel-w: clamp(108px, 7.2vw, 126px) !important;
    --fighter-card-w: clamp(300px, 23vw, 356px) !important;
    --fighter-card-h: clamp(540px, 73vh, 642px) !important;
    --combatant-gap: clamp(8px, 0.8vw, 12px) !important;
    --combatant-pad: clamp(8px, 0.9vw, 12px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant.combatant,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant.combatant {
    height: var(--fighter-card-h) !important;
    min-height: var(--fighter-card-h) !important;
    max-height: var(--fighter-card-h) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter {
    width: var(--fighter-card-w) !important;
    min-width: var(--fighter-card-w) !important;
    max-width: var(--fighter-card-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face {
    min-height: 0 !important;
    height: 100% !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar.avatar,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar.avatar {
    background-size: contain, cover, cover !important;
    background-position: center bottom, center center, center center !important;
    background-repeat: no-repeat !important;
  }
}

/* V1.27Beta-mobile-fit-max1: phone battle controls cap to real handset width in browser previews. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards {
    width: min(calc(100vw - 16px), 374px) !important;
    min-width: 0 !important;
    max-width: min(calc(100vw - 16px), 374px) !important;
    inline-size: min(calc(100vw - 16px), 374px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.team-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle:not([hidden]) #teamBoard#teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.team-battle-app #teamBoard#teamBoard#teamBoard.team-board,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.identity-battle-app #teamBoard#teamBoard#teamBoard.team-board {
    width: min(calc(100vw - 16px), 374px) !important;
    min-width: 0 !important;
    max-width: min(calc(100vw - 16px), 374px) !important;
  }
}

/* V1.27Beta-desktop-duel-frame-restore1: restore desktop 1v1 background and remove the redundant outer skill frame. */
@media (min-width: 721px) {
  html body:not(.maintenance-mode),
  html body:not(.maintenance-mode).battle-controls-active {
    --desktop-duel-bg: var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-desktop-duel-frame-restore1"));
  }

  html body:not(.maintenance-mode):has(#appRoot.app.duel-battle-app #battle.battle:not([hidden])),
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot.app.duel-battle-app #battle.battle:not([hidden])),
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) .arena,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) .arena {
    background:
      linear-gradient(180deg, rgba(246, 241, 226, 0.12), rgba(18, 31, 38, 0.18)),
      linear-gradient(90deg, rgba(8, 15, 20, 0.18), transparent 24%, transparent 76%, rgba(8, 15, 20, 0.18)),
      var(--desktop-duel-bg) center center / cover no-repeat fixed,
      #d9ded2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(10, 18, 22, 0.1)),
      var(--desktop-duel-bg) center center / cover no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card > .skill-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card > .skill-label {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle.battle:not([hidden]) .role-card.role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
    border-radius: 8px !important;
    border: 1px solid color-mix(in srgb, var(--skill-accent, #77d8d0) 58%, rgba(255, 255, 255, 0.28)) !important;
    background:
      linear-gradient(180deg, rgba(28, 43, 50, 0.9), rgba(10, 17, 22, 0.84)) !important;
    box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

}

/* V1.27Beta-desktop-duel-action-icons-restore1: desktop 1v1 keeps the class panel art and restores the visible action glyphs. */
@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 7.4% !important;
    top: 50% !important;
    width: clamp(22px, 2.15vw, 34px) !important;
    height: clamp(22px, 2.15vw, 34px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: translateY(-50%) !important;
    place-items: center !important;
    color: rgba(255, 250, 232, 0.96) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
    pointer-events: none !important;
    z-index: 5 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon svg,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    stroke: currentColor !important;
    fill: none !important;
  }
}

/* V1.27Beta-desktop-duel-frame-polish2: wider 1v1 portraits and readable light status panels. */
@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters.fighters,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters.fighters {
    --fighter-panel-w: clamp(134px, 9.4vw, 162px) !important;
    --fighter-card-w: clamp(360px, 27vw, 430px) !important;
    --fighter-card-h: clamp(560px, 74vh, 690px) !important;
    --fighter-inner-gap: clamp(12px, 1vw, 16px) !important;
    --combatant-gap: clamp(12px, 1vw, 18px) !important;
    --combatant-pad: clamp(10px, 1.1vw, 16px) !important;
    --fighter-gap: clamp(18px, 2.1vw, 38px) !important;
    --versus-size: clamp(50px, 5.6vh, 62px) !important;
    --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap) + var(--combatant-pad) * 2) !important;
    width: min(100%, calc(var(--combatant-w) * 2 + var(--versus-size) + var(--fighter-gap) * 2)) !important;
    height: var(--fighter-card-h) !important;
    margin-top: clamp(16px, 2.8vh, 34px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant.combatant,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant.combatant {
    width: 100% !important;
    height: var(--fighter-card-h) !important;
    min-height: var(--fighter-card-h) !important;
    max-height: var(--fighter-card-h) !important;
    padding: var(--combatant-pad) !important;
    gap: var(--fighter-inner-gap) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .you-combatant.you-combatant,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .you-combatant.you-combatant {
    grid-template-columns: var(--fighter-panel-w) var(--fighter-card-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .opponent-combatant.opponent-combatant,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .opponent-combatant.opponent-combatant {
    grid-template-columns: var(--fighter-card-w) var(--fighter-panel-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter {
    width: var(--fighter-card-w) !important;
    min-width: var(--fighter-card-w) !important;
    max-width: var(--fighter-card-w) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 7px !important;
    border: 1px solid color-mix(in srgb, var(--duel-side-accent, #8bd6da) 48%, rgba(255, 255, 255, 0.2)) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
      radial-gradient(circle at 50% 2%, color-mix(in srgb, var(--duel-side-accent, #8bd6da) 18%, transparent), transparent 48%),
      rgba(9, 15, 20, 0.5) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel {
    width: var(--fighter-panel-w) !important;
    min-width: var(--fighter-panel-w) !important;
    max-width: var(--fighter-panel-w) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 9px !important;
    gap: 7px !important;
    grid-template-rows: minmax(34px, auto) minmax(30px, auto) minmax(40px, auto) minmax(34px, auto) minmax(34px, auto) minmax(32px, auto) !important;
    align-content: start !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--duel-side-accent, #8bd6da) 38%, rgba(255, 255, 255, 0.22)) !important;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.1), transparent 34%),
      radial-gradient(circle at 18% 2%, color-mix(in srgb, var(--duel-side-accent, #8bd6da) 18%, transparent), transparent 46%),
      rgba(8, 15, 20, 0.68) !important;
    color: #f4fbff !important;
    -webkit-text-fill-color: #f4fbff !important;
    box-shadow:
      0 18px 38px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar.avatar,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar.avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center center, center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice) {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    border: 1px solid rgba(227, 243, 246, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
      rgba(7, 13, 18, 0.5) !important;
    color: #f4fbff !important;
    -webkit-text-fill-color: #f4fbff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.stat-label, .stat-value, .meter-row > b, .choice, .status-bar, .equipment-slot, .status-token, .status-token b, .status-token em),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.stat-label, .stat-value, .meter-row > b, .choice, .status-bar, .equipment-slot, .status-token, .status-token b, .status-token em) {
    color: #f4fbff !important;
    -webkit-text-fill-color: #f4fbff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .stat-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .stat-label {
    color: #dbeef2 !important;
    -webkit-text-fill-color: #dbeef2 !important;
    font-weight: 850 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .stat-value,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .meter-row > b,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .stat-value,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .meter-row > b {
    color: #fff8d8 !important;
    -webkit-text-fill-color: #fff8d8 !important;
    font-weight: 950 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .fatigue-row,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .fatigue-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .status-token,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel .status-token {
    min-height: 22px !important;
    padding: 3px 7px !important;
    border-radius: 7px !important;
    border: 1px solid rgba(234, 248, 250, 0.2) !important;
    background: rgba(241, 250, 252, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
}

/* V1.27Beta-desktop-duel-ui-final3: final battle layout overrides for 1v1 labels, actions, libraries, and skill text. */
html body:not(.maintenance-mode) #appRoot.app.battle-app:has(#battle.battle:not([hidden])) {
  --battle-final-surface: var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-desktop-duel-ui-final3")) !important;
  background:
    linear-gradient(180deg, rgba(250, 244, 225, 0.58), rgba(218, 204, 174, 0.5)),
    var(--battle-final-surface) center / cover no-repeat fixed !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .arena {
  background:
    linear-gradient(180deg, rgba(252, 246, 226, 0.62), rgba(216, 201, 169, 0.46)),
    var(--battle-final-surface) center / cover no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .arena {
  box-shadow: none !important;
  border-color: transparent !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .utility {
  position: absolute !important;
  z-index: 80 !important;
  top: clamp(10px, 1.5vh, 18px) !important;
  left: clamp(12px, 1.6vw, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(52vw, 520px) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .utility > button {
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(64, 45, 24, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 248, 225, 0.96), rgba(213, 185, 129, 0.92)) !important;
  color: #31200f !important;
  -webkit-text-fill-color: #31200f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 16px rgba(45, 28, 9, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries {
  position: absolute !important;
  z-index: 55 !important;
  left: clamp(14px, 1.8vw, 28px) !important;
  right: auto !important;
  bottom: clamp(14px, 2vh, 28px) !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries::after {
  display: none !important;
  content: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries > button.library-action {
  width: clamp(74px, 6.5vw, 104px) !important;
  height: clamp(98px, 8.8vw, 138px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  border: 1px solid rgba(47, 31, 15, 0.45) !important;
  box-shadow: 0 14px 26px rgba(32, 20, 8, 0.24), inset 0 0 0 1px rgba(255, 242, 189, 0.24) !important;
  color: #fff4c8 !important;
  -webkit-text-fill-color: #fff4c8 !important;
  background-color: rgba(31, 20, 10, 0.68) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  backdrop-filter: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries > button.opportunity-library-action {
  background-image: url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.27Beta-desktop-duel-ui-final3") !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries > button.artifact-library-action {
  background-image: url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.27Beta-desktop-duel-ui-final3") !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) .battle-libraries > button.library-action > span {
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  bottom: 6px !important;
  display: block !important;
  padding: 4px 5px !important;
  border-radius: 6px !important;
  background: rgba(21, 13, 7, 0.76) !important;
  color: #fff4c8 !important;
  -webkit-text-fill-color: #fff4c8 !important;
  font-size: clamp(10px, 0.78vw, 12px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card::after,
html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card .action-icon {
  display: none !important;
  content: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card {
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card > span {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(9px, 1vw, 14px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  color: #fff9dd !important;
  -webkit-text-fill-color: #fff9dd !important;
  background: rgba(17, 10, 5, 0.56) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72) !important;
  font-size: clamp(15px, 1.1vw, 19px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter {
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter-head {
  position: absolute !important;
  z-index: 18 !important;
  top: 0 !important;
  left: 8px !important;
  right: auto !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  transform: translateY(calc(-100% + 1px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 4px 9px !important;
  border-radius: 8px 8px 0 0 !important;
  border: 1px solid rgba(70, 45, 20, 0.34) !important;
  border-bottom-color: rgba(70, 45, 20, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.97), rgba(205, 168, 104, 0.92)) !important;
  box-shadow: 0 -6px 14px rgba(45, 28, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  color: #2d1d0e !important;
  -webkit-text-fill-color: #2d1d0e !important;
  text-align: left !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .opponent-combatant .fighter-head {
  left: auto !important;
  right: 8px !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter-head strong,
html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter-head .fighter-side {
  min-width: 0 !important;
  color: #2d1d0e !important;
  -webkit-text-fill-color: #2d1d0e !important;
  font-size: clamp(11px, 0.82vw, 13px) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter-panel .fatigue-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .fighter-panel :is(.energy, .fatigue, .laziness) {
  display: grid !important;
  grid-template-columns: minmax(58px, 64px) minmax(0, 1fr) !important;
  align-items: center !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) {
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 5px 8px !important;
  font-size: clamp(10px, 0.76vw, 13px) !important;
  line-height: 1.08 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) .role-card :is(.inline-skill-action, .inline-skill-name, .passive-skill-label) .skill-inline-text {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(10px, 0.76vw, 13px) !important;
  line-height: 1.08 !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) #cards.cards {
    width: min(1060px, calc(100vw - 72px)) !important;
    max-width: min(1060px, calc(100vw - 72px)) !important;
    gap: clamp(14px, 1.3vw, 22px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle.battle:not([hidden]) #cards.cards .action-card {
    min-height: clamp(116px, 9.2vw, 160px) !important;
    aspect-ratio: 1983 / 793 !important;
  }
}

/* TRUE EOF V1.27Beta-profession-bg-anchor1: final codex class background anchor override. */
html body:not(.maintenance-mode) .profession-codex-card {
  --profession-bg-position: 30% top !important;
  --profession-bg-size: 138% auto !important;
}

html body:not(.maintenance-mode) .profession-codex-card[data-profession="shaman"] {
  --profession-bg-position: 28% top !important;
  --profession-bg-size: 134% auto !important;
}

html body:not(.maintenance-mode) .profession-codex-card .profession-codex-bg {
  background:
    linear-gradient(90deg, rgba(2, 5, 11, 0.72) 0%, rgba(2, 5, 11, 0.38) 45%, rgba(2, 5, 11, 0.08) 100%),
    linear-gradient(180deg, rgba(3, 6, 12, 0), rgba(3, 6, 12, 0.58)),
    var(--profession-bg) var(--profession-bg-position) / var(--profession-bg-size) no-repeat,
    rgba(5, 9, 16, 0.96) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) .profession-codex-card {
    --profession-bg-position: 24% top !important;
    --profession-bg-size: 156% auto !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-desktop-duel-ui-final6: combat view hard override after every legacy rule. */
html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])),
html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  --battle-final-surface: var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-desktop-duel-ui-final6")) !important;
}

html body:not(.maintenance-mode) .arena:has(> #battle.battle:not([hidden])) {
  background:
    linear-gradient(180deg, rgba(254, 249, 232, 0.66), rgba(226, 211, 178, 0.48)),
    var(--battle-final-surface) center / cover no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) {
  position: relative !important;
  --battle-stage-art: var(--battle-final-surface) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.56), rgba(222, 208, 176, 0.42)),
    var(--battle-final-surface) center / cover no-repeat !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) .fighters::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility {
  position: absolute !important;
  z-index: 120 !important;
  top: clamp(10px, 1.5vh, 18px) !important;
  left: clamp(12px, 1.6vw, 24px) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(54vw, 520px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) > .utility > button {
  width: auto !important;
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(64, 45, 24, 0.34) !important;
  background: linear-gradient(180deg, rgba(255, 249, 226, 0.97), rgba(216, 188, 132, 0.94)) !important;
  color: #302010 !important;
  -webkit-text-fill-color: #302010 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 6px 16px rgba(45, 28, 9, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card::after,
html body:not(.maintenance-mode) #cards.cards .action-card::before,
html body:not(.maintenance-mode) #cards.cards .action-card::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card .action-icon *,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon,
html body:not(.maintenance-mode) #cards.cards .action-card .action-icon * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > .battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > .battle-wallpaper-toggle.battle-wallpaper-toggle span {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-desktop-duel-ui-final6") center / contain no-repeat !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.35vw, 24px) !important;
    width: min(1680px, calc(100vw - 48px)) !important;
    max-width: min(1680px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(11px, 1.05vw, 18px) !important;
    transform: translateX(-50%) !important;
    font-size: clamp(18px, 1.35vw, 25px) !important;
    line-height: 1 !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-mobile-action-ratio2: final phone action ratio and wallpaper-icon cleanup. */
html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card > span,
html body:not(.maintenance-mode) #cards.cards .action-card > span {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #fff9dd !important;
  -webkit-text-fill-color: #fff9dd !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.78) !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle {
  width: clamp(42px, 11.2vw, 52px) !important;
  height: clamp(42px, 11.2vw, 52px) !important;
  min-width: clamp(42px, 11.2vw, 52px) !important;
  min-height: clamp(42px, 11.2vw, 52px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle b,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle span {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-mobile-action-ratio2") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(5px, 1.6vw, 8px) !important;
    width: min(100%, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.attack {
    background-image: var(--action-attack-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.defend {
    background-image: var(--action-defend-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card.charge {
    background-image: var(--action-charge-panel-art) !important;
  }

  html body:not(.maintenance-mode) #battle.battle:not([hidden]) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(4px, 1.2vw, 7px) !important;
    transform: translateX(-50%) !important;
    font-size: clamp(11px, 3.1vw, 14px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout2: true final phone battle layout lock. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout4: highest priority phone battle cleanup. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout5: phone overlap cleanup. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout6: remove implicit duel rows on phone. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout7: keep wallpaper control off action row. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout8: beat has-selector wallpaper placement. */
/* ABSOLUTE EOF V1.27Beta-mobile-battle-layout9: compact notice and right controls. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .control-banner,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .control-banner * {
    max-height: 30px !important;
    color: #fff1c5 !important;
    -webkit-text-fill-color: #fff1c5 !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) > :is(.battle-wallpaper-toggle, .music-toggle, .language-toggle) {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 68px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
    z-index: 120 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) > .battle-wallpaper-toggle {
    right: 6px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) > .music-toggle {
    right: clamp(52px, 13.6vw, 62px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) > .language-toggle {
    right: clamp(98px, 26.4vw, 118px) !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-rollback4: keep character select visible; no page wash or faction paint. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
}

@media (min-width: 721px) {
  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select {
    --select-frame-inner-x: clamp(36px, 5vw, 70px) !important;
    --select-frame-inner-y: clamp(44px, 5.4vw, 72px) !important;
  }

  html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
    width: min(1180px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: min(72vh, calc(100dvh - 168px)) !important;
    max-height: none !important;
    padding: var(--select-frame-inner-y) var(--select-frame-inner-x) !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 36px), calc(100dvh - 154px)) !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(6px, 1vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 200, 95, 0.54) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(7, 20, 36, 0.12) 42%, rgba(4, 12, 24, 0.48)) !important;
  box-shadow:
    0 12px 26px rgba(5, 18, 32, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.12) !important;
  color: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.84 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 6px rgba(246, 200, 95, 0.18))
    drop-shadow(0 0 6px rgba(78, 205, 196, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span::after,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 20%, rgba(4, 12, 24, 0.1) 52%, rgba(4, 12, 24, 0.76) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .mini-art {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  background: rgba(7, 15, 26, 0.5) !important;
  border-color: rgba(246, 200, 95, 0.34) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option.selected > span {
  transform: translateY(-2px) !important;
  border-color: rgba(246, 200, 95, 0.86) !important;
  box-shadow:
    0 18px 34px rgba(5, 18, 32, 0.34),
    0 0 22px rgba(246, 200, 95, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.22) !important;
}

/* TRUE EOF V1.27Beta-character-select-rollback5: restore mini portrait dimensions inside the old gold card frame. */
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option .mini-art {
  position: absolute !important;
  inset: 8px 8px 36px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) > button#battleWallpaperToggle#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle.battle-wallpaper-toggle.battle-wallpaper-toggle {
    right: 6px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 68px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 120 !important;
  }
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle.battle-wallpaper-toggle,
  html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle.battle-wallpaper-toggle {
    right: 6px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 68px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 120 !important;
  }
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .opponent-combatant.opponent-combatant {
    grid-row: 1 !important;
    grid-column: 1 !important;
    align-self: stretch !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .you-combatant.you-combatant {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: stretch !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .versus.versus {
    grid-row: auto !important;
    grid-column: auto !important;
    display: none !important;
  }
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .control-banner {
    position: fixed !important;
    z-index: 95 !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 31px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(56vw, 240px) !important;
    min-height: 24px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters.fighters {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .battle-libraries,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .battle-libraries.battle-libraries {
    position: fixed !important;
    left: 6px !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 68px) !important;
    z-index: 90 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 68px) !important;
    z-index: 120 !important;
  }
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app > .arena,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app > .arena {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #sidePanel.side {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(max(8px, env(safe-area-inset-top)) + 58px) 6px max(6px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .versus {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters {
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant {
    display: grid !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-combatant {
    grid-template-columns: minmax(0, 1.18fr) minmax(108px, 0.72fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-combatant {
    grid-template-columns: minmax(108px, 0.72fr) minmax(0, 1.18fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #youCard.fighter {
    order: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .you-panel {
    order: 2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .opponent-panel {
    order: 1 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #opponentCard.fighter {
    order: 2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .fighter-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden])) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards,
  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards {
    grid-row: 2 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(4px, 1.2vw, 6px) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 85 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    aspect-ratio: 1983 / 793 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-size: 100% 100% !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: hidden !important;
  }
}
@media (max-width: 899px) {
  html body:not(.maintenance-mode):has(#appRoot.app.battle-app #battle.battle:not([hidden])),
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background:
      linear-gradient(180deg, rgba(247, 240, 222, 0.92), rgba(219, 204, 174, 0.86)),
      var(--battle-final-surface, var(--battle-wallpaper-art, url("assets/ui/battle-bookpage-table-v1.webp?v=V1.27Beta-mobile-battle-layout2"))) center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app .topbar,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #sidePanel.side {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app > .arena::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden])::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighters::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .combatant::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries::after,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .utility::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(max(8px, env(safe-area-inset-top)) + 58px) 6px max(6px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .control-banner {
    position: fixed !important;
    z-index: 95 !important;
    top: calc(max(8px, env(safe-area-inset-top)) + 31px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(56vw, 240px) !important;
    min-height: 24px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(93, 65, 31, 0.36) !important;
    border-radius: 7px !important;
    background: rgba(48, 32, 17, 0.62) !important;
    color: #fff1c5 !important;
    -webkit-text-fill-color: #fff1c5 !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76) !important;
    box-shadow: 0 8px 18px rgba(31, 20, 9, 0.24) !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility {
    position: fixed !important;
    z-index: 110 !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: 6px !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    gap: 5px !important;
    width: auto !important;
    max-width: calc(100vw - 78px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility > button {
    width: auto !important;
    min-width: 48px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(69, 48, 23, 0.42) !important;
    background: linear-gradient(180deg, rgba(255, 246, 213, 0.96), rgba(208, 179, 123, 0.94)) !important;
    color: #2a1b0c !important;
    -webkit-text-fill-color: #2a1b0c !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: 0 5px 12px rgba(31, 20, 9, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) > .utility > #rematch[hidden],
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .versus {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters {
    grid-row: 1 !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant {
    display: grid !important;
    gap: 5px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant {
    grid-template-columns: minmax(0, 1.18fr) minmax(108px, 0.72fr) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant {
    grid-template-columns: minmax(108px, 0.72fr) minmax(0, 1.18fr) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #youCard.fighter {
    order: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-panel {
    order: 2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-panel {
    order: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) #opponentCard.fighter {
    order: 2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(76, 55, 28, 0.34) !important;
    background: rgba(34, 26, 17, 0.36) !important;
    box-shadow: 0 8px 20px rgba(34, 23, 10, 0.18), inset 0 1px 0 rgba(255, 247, 220, 0.15) !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-head {
    position: static !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 5px !important;
    min-height: 21px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    border: 0 !important;
    background: rgba(41, 28, 15, 0.58) !important;
    color: #fff2c5 !important;
    -webkit-text-fill-color: #fff2c5 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72) !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-head strong,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-side {
    min-width: 0 !important;
    color: #fff2c5 !important;
    -webkit-text-fill-color: #fff2c5 !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .character-face {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 7px !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center, center !important;
    box-shadow: inset 0 -18px 24px rgba(0, 0, 0, 0.16) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card {
    min-height: 38px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 238, 185, 0.2) !important;
    background: rgba(31, 22, 13, 0.64) !important;
    color: #fff6db !important;
    -webkit-text-fill-color: #fff6db !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card b {
    display: block !important;
    margin: 0 0 2px !important;
    color: #ffe59a !important;
    -webkit-text-fill-color: #ffe59a !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .role-card span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #fff6db !important;
    -webkit-text-fill-color: #fff6db !important;
    font-size: clamp(9px, 2.35vw, 11px) !important;
    line-height: 1.18 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel {
    display: grid !important;
    grid-template-rows: minmax(19px, auto) minmax(19px, auto) minmax(20px, auto) minmax(20px, auto) minmax(20px, auto) minmax(22px, 1fr) !important;
    gap: 3px !important;
    padding: 4px !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice) {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 239, 194, 0.18) !important;
    background: rgba(28, 20, 12, 0.55) !important;
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .status-bar,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .equipment-slots {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    max-height: 24px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .meter-row {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 3px !important;
    max-height: 24px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .fatigue-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .choice {
    display: grid !important;
    place-items: center !important;
    min-height: 22px !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel :is(.stat-label, .stat-value, b, em, span, .status-token, .equipment-slot) {
    color: #fff4d0 !important;
    -webkit-text-fill-color: #fff4d0 !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.76) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .stat-label-icon {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .fighter-panel .meter {
    height: 6px !important;
    min-height: 6px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.34) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.team-mode:not([hidden]) #teamBoard.team-board,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.identity-battle:not([hidden]) #teamBoard.team-board {
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.team-mode:not([hidden]) .fighters,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle.identity-battle:not([hidden]) .fighters,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing.seat-ring {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #seatRing .seat-fighter {
    max-width: clamp(92px, 29vw, 136px) !important;
    max-height: clamp(132px, 37vh, 176px) !important;
    border-radius: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(4px, 1.2vw, 6px) !important;
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 85 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1983 / 793 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card .action-icon,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card::before,
  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.attack {
    background-image: var(--action-attack-panel-art) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.defend {
    background-image: var(--action-defend-panel-art, var(--action-defend-user-panel-art)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card.charge {
    background-image: var(--action-charge-panel-art, var(--action-charge-user-panel-art)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) #cards.cards .action-card > span {
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(4px, 1.1vw, 6px) !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff9dd !important;
    -webkit-text-fill-color: #fff9dd !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries {
    position: fixed !important;
    z-index: 90 !important;
    left: 6px !important;
    right: auto !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 51px) !important;
    top: auto !important;
    display: flex !important;
    gap: 5px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries > button.library-action {
    position: relative !important;
    width: clamp(42px, 12vw, 54px) !important;
    height: clamp(56px, 16vw, 72px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(63, 43, 21, 0.52) !important;
    border-radius: 7px !important;
    background-color: rgba(34, 22, 10, 0.64) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 8px 16px rgba(31, 20, 9, 0.24), inset 0 0 0 1px rgba(255, 239, 185, 0.16) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.battle-app #battle#battle.battle:not([hidden]) .battle-libraries > button.library-action > span {
    position: absolute !important;
    left: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    display: block !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: rgba(18, 12, 6, 0.7) !important;
    color: #fff4c8 !important;
    -webkit-text-fill-color: #fff4c8 !important;
    font-size: clamp(7px, 2.1vw, 9px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.82) !important;
    white-space: normal !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > button.battle-wallpaper-toggle.battle-wallpaper-toggle,
  html body:not(.maintenance-mode) > button.battle-wallpaper-toggle.battle-wallpaper-toggle {
    right: 6px !important;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 51px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
    z-index: 120 !important;

  }
}

/* TRUE EOF V1.27Beta-character-select-rollback6: short high-specificity portrait layer restore. */
body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option > span {
  position: relative !important;
  overflow: hidden !important;
}

body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 8px 8px 36px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
}

/* TRUE EOF V1.27Beta-character-select-rollback7: fallback visible mini portrait box. */
body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 44px) !important;
  min-height: 112px !important;
  margin: 8px 8px 0 !important;
  z-index: 0 !important;
  opacity: 1 !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}

/* TRUE EOF V1.27Beta-character-select-rollback8: compute mini portrait height from card variable. */
body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  height: calc(var(--select-card-h) - 44px) !important;
  min-height: 112px !important;
}

/* TRUE EOF V1.27Beta-character-select-white-factions1: restored white art board, real faction tabs, 2:3 portrait cards. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-gap: clamp(12px, 1.6vw, 20px) !important;
  --select-frame-outset-x: clamp(12px, 1.45vw, 18px) !important;
  --select-frame-outset-y: clamp(18px, 1.9vw, 26px) !important;
  --select-card-h: clamp(210px, 25vh, 292px) !important;
  --select-card-w: calc(var(--select-card-h) * 2 / 3) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  width: min(1320px, calc(100vw - 20px)) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 18px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-self: center !important;
  justify-self: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
  min-height: min(78vh, 760px) !important;
  max-height: calc(100dvh - 70px) !important;
  margin: 0 auto !important;
  padding:
    clamp(78px, 7.2vw, 112px)
    clamp(76px, 6.4vw, 112px)
    clamp(64px, 5.6vw, 94px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=white-factions1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 22px 38px rgba(13, 34, 54, 0.24))
    drop-shadow(0 0 24px rgba(92, 178, 255, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs {
  position: relative !important;
  z-index: 8 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  width: min(560px, 100%) !important;
  margin: 0 auto clamp(12px, 1.5vw, 18px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: clamp(32px, 3.4vw, 40px) !important;
  padding: 0 clamp(10px, 1.4vw, 16px) !important;
  border: 1px solid rgba(154, 187, 218, 0.72) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(222, 238, 252, 0.78)),
    rgba(238, 247, 255, 0.86) !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(11px, 1.25vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  box-shadow:
    0 8px 18px rgba(41, 90, 132, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
  border-color: rgba(232, 189, 82, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 226, 0.98), rgba(213, 235, 255, 0.86)),
    rgba(255, 247, 219, 0.92) !important;
  color: #5a3b06 !important;
  -webkit-text-fill-color: #5a3b06 !important;
  box-shadow:
    0 8px 20px rgba(160, 114, 23, 0.16),
    0 0 16px rgba(84, 184, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 6 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 16px), calc(100dvh - 250px)) !important;
  margin: 0 auto !important;
  padding: clamp(6px, 0.8vw, 10px) 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 2px 0 8px !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  position: relative !important;
  display: block !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  margin: 0 !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: #fff7dc !important;
  cursor: pointer !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(232, 189, 82, 0.56) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(23, 41, 58, 0.18), rgba(6, 13, 22, 0.64)),
    #102033 !important;
  box-shadow:
    0 13px 26px rgba(15, 34, 55, 0.24),
    inset 0 0 0 1px rgba(255, 248, 216, 0.12) !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 6 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.88 !important;
  filter:
    drop-shadow(0 0 6px rgba(65, 181, 255, 0.18))
    drop-shadow(0 0 8px rgba(232, 189, 82, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%, rgba(3, 9, 18, 0.08) 54%, rgba(3, 9, 18, 0.82) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  background:
    var(--character-art) center var(--portrait-y, 14%) / var(--portrait-fit, cover) no-repeat,
    radial-gradient(circle at 50% 20%, rgba(90, 178, 255, 0.18), transparent 48%),
    linear-gradient(180deg, #172c43, #07131f) !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > *:not(.mini-art) {
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 42px !important;
  display: grid !important;
  place-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(232, 189, 82, 0.28) !important;
  border-radius: 5px !important;
  background: rgba(8, 18, 30, 0.72) !important;
  box-shadow: none !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  display: block !important;
  max-width: 100% !important;
  color: rgba(222, 237, 250, 0.9) !important;
  -webkit-text-fill-color: rgba(222, 237, 250, 0.9) !important;
  font-size: clamp(8px, 0.8vw, 10px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  display: block !important;
  max-width: 100% !important;
  color: #fff3bd !important;
  -webkit-text-fill-color: #fff3bd !important;
  font-size: clamp(13px, 1.05vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(185, 213, 238, 0.5) !important;
  border-radius: 5px !important;
  background: rgba(239, 247, 255, 0.82) !important;
  box-shadow: none !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(9px, 0.86vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  flex: 0 0 auto !important;
  max-width: 42% !important;
  min-height: 24px !important;
  padding: 5px 7px !important;
  border-radius: 5px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.selected > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:hover > span {
  transform: translateY(-2px) !important;
  border-color: rgba(250, 211, 111, 0.88) !important;
  box-shadow:
    0 16px 30px rgba(15, 34, 55, 0.32),
    0 0 18px rgba(76, 172, 255, 0.16),
    inset 0 0 0 1px rgba(255, 248, 216, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.taken::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:disabled:not(.placeholder)::after {
  content: attr(data-taken-label) !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: calc(var(--select-frame-outset-x) + 12px) !important;
  right: calc(var(--select-frame-outset-x) + 12px) !important;
  top: 50% !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  z-index: 12 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 6px !important;
  background: rgba(80, 84, 92, 0.9) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.taken > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:disabled:not(.placeholder) > span {
  filter: grayscale(0.42) brightness(0.82) !important;
  opacity: 0.86 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    --select-gap: clamp(8px, 2.1vw, 12px) !important;
    --select-frame-outset-x: clamp(9px, 2.5vw, 13px) !important;
    --select-frame-outset-y: clamp(14px, 3.6vw, 20px) !important;
    --select-card-outer-w: min(42vw, 164px) !important;
    --select-card-w: calc(var(--select-card-outer-w) - var(--select-frame-outset-x) * 2) !important;
    --select-card-h: calc(var(--select-card-w) * 3 / 2) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
    width: min(calc(100vw - 8px), calc(var(--select-card-outer-w) * 2 + var(--select-gap) + 54px)) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    min-height: calc(100dvh - 62px) !important;
    max-height: calc(100dvh - 62px) !important;
    padding: clamp(72px, 16vw, 96px) clamp(24px, 6vw, 34px) clamp(58px, 14vw, 78px) !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=white-factions1") center / 100% 100% no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs {
    width: 100% !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button {
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 10px), calc(100dvh - 218px)) !important;
    padding: 2px 0 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 8px !important;
    right: 8px !important;
    bottom: 39px !important;
    min-height: 31px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 8px !important;
    right: 8px !important;
    bottom: 9px !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-battle-polish-rhasta1: final battle visual lock after character-select rules. */
html body:not(.maintenance-mode),
html body:not(.maintenance-mode).battle-controls-active {
  --battle-visible-surface: var(--battle-wallpaper-art, url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.27Beta-battle-polish-rhasta1")) !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  --battle-final-surface: var(--battle-visible-surface) !important;
  --battle-stage-art: var(--battle-visible-surface) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.05), rgba(214, 224, 214, 0.08)),
    var(--battle-visible-surface) center center / cover no-repeat fixed,
    #e9eee5 !important;
  background-color: #e9eee5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.05), rgba(214, 224, 214, 0.08)),
    var(--battle-visible-surface) center center / cover no-repeat !important;
}

html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode) #battle#battle#battle.battle:not([hidden]) .fighters::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 260 !important;
  display: flex !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(64vw, 520px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button {
  min-width: 72px !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(75, 88, 86, 0.32) !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(249, 253, 249, 0.94), rgba(219, 231, 222, 0.88)) !important;
  color: #20312f !important;
  -webkit-text-fill-color: #20312f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 15px rgba(34, 49, 45, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter {
  padding: 6px !important;
  border-radius: 13px !important;
  border: 1px solid color-mix(in srgb, var(--duel-side-accent, #67c6d2) 46%, rgba(255, 255, 255, 0.38)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)), rgba(12, 23, 25, 0.46) !important;
  box-shadow: 0 14px 30px rgba(20, 33, 34, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face {
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(4, 9, 11, 0.18)), rgba(8, 17, 20, 0.2) !important;
  box-shadow: inset 0 0 0 1px rgba(237, 252, 252, 0.1), inset 0 -42px 58px rgba(0, 0, 0, 0.22) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar.avatar {
  background-size: var(--art-size, contain), cover, cover !important;
  background-position: var(--art-position, center bottom), center center, center center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(8, 17, 20, 0.22) !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .avatar[data-character="Rhasta"] {
  --art-size: cover !important;
  --art-position: center center !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art[data-character="Rhasta"],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) .team-art[data-character="Rhasta"] {
  --team-art-size: cover !important;
  --team-art-position: center center !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
  isolation: isolate !important;
  position: fixed !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: clamp(44px, 4.1vw, 54px) !important;
  height: clamp(44px, 4.1vw, 54px) !important;
  min-width: clamp(44px, 4.1vw, 54px) !important;
  min-height: clamp(44px, 4.1vw, 54px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 180 !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("assets/ui/battle-wallpaper-toggle-icon-gpt2.png?v=V1.27Beta-battle-polish-rhasta1") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 13px rgba(15, 30, 34, 0.22)) !important;
  transform: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility {
    top: max(7px, env(safe-area-inset-top)) !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) > .utility.utility > button {
    min-width: 56px !important;
    min-height: 27px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
  html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
    right: max(7px, env(safe-area-inset-right)) !important;
    bottom: calc(max(7px, env(safe-area-inset-bottom)) + 52px) !important;
    width: clamp(40px, 10.8vw, 50px) !important;
    height: clamp(40px, 10.8vw, 50px) !important;
    min-width: clamp(40px, 10.8vw, 50px) !important;
    min-height: clamp(40px, 10.8vw, 50px) !important;
  }
}

/* TRUE END V1.27Beta-battle-surface-controls3: battle-only controls, visible cloth background, larger clean action buttons. */
html body:not(.maintenance-mode) {
  --battle-visible-surface: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-surface-controls3") !important;
  --battle-final-surface: var(--battle-visible-surface) !important;
  --battle-stage-art: var(--battle-visible-surface) !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(232, 246, 243, 0.1)), var(--battle-visible-surface) center center / cover no-repeat fixed, #eef8f5 !important;
  background-color: #eef8f5 !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden])::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) .fighters::after,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::before,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) #cards#cards.cards::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle,
html body:not(.maintenance-mode) > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden],
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
  right: 82px !important;
  bottom: 12px !important;
  width: 64px !important;
  height: 64px !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
  right: 14px !important;
  bottom: 12px !important;
  width: 58px !important;
  height: 58px !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
  --battle-mini-control: clamp(50px, 4.2vw, 58px);
  --battle-mini-gap: 8px;
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: var(--battle-mini-control) !important;
  height: var(--battle-mini-control) !important;
  min-width: var(--battle-mini-control) !important;
  min-height: var(--battle-mini-control) !important;
  max-width: var(--battle-mini-control) !important;
  max-height: var(--battle-mini-control) !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 1400 !important;
}

html body:not(.maintenance-mode).battle-controls-active > .language-toggle.language-toggle {
  right: max(12px, env(safe-area-inset-right)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > .music-toggle.music-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + var(--battle-mini-control) + var(--battle-mini-gap)) !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle {
  right: calc(max(12px, env(safe-area-inset-right)) + (var(--battle-mini-control) + var(--battle-mini-gap)) * 2) !important;
}

html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::before,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span::after,
html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle b {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active > button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle span {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 66% !important;
  height: 66% !important;
  border: 1px solid rgba(69, 132, 142, 0.54) !important;
  border-radius: 9px !important;
  background: radial-gradient(circle at 72% 28%, #fff2a8 0 8%, transparent 9%), linear-gradient(135deg, transparent 0 42%, rgba(90, 190, 195, 0.92) 43% 57%, transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(177, 226, 231, 0.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 3px 9px rgba(22, 46, 50, 0.22) !important;
  filter: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(820px, 66vw) !important;
  max-width: calc(100vw - 300px) !important;
  min-width: min(610px, calc(100vw - 300px)) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  z-index: 1320 !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
  width: 100% !important;
  height: auto !important;
  min-height: clamp(86px, 8.2vw, 116px) !important;
  aspect-ratio: 1983 / 793 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 16px rgba(28, 48, 52, 0.22)) !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon * {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
  position: absolute !important;
  left: var(--action-template-left, 34.921875%) !important;
  top: var(--action-template-top, 22.916667%) !important;
  width: var(--action-template-width, 64.6875%) !important;
  height: var(--action-template-height, 48.333333%) !important;
  padding: 0 4% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  font-size: clamp(17px, 1.85vw, 24px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.84), 0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  z-index: 3 !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action {
  filter: drop-shadow(0 11px 17px rgba(28, 48, 52, 0.24)) drop-shadow(0 0 13px rgba(90, 220, 156, 0.34)) !important;
  outline: 2px solid rgba(122, 246, 174, 0.82) !important;
  outline-offset: 2px !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card.chosen-action::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 72px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 68px !important;
    gap: 6px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    aspect-ratio: auto !important;
    background-size: contain !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
    font-size: clamp(13px, 3.7vw, 17px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active > :is(.language-toggle.language-toggle, .music-toggle.music-toggle, button#battleWallpaperToggle#battleWallpaperToggle.battle-wallpaper-toggle) {
    --battle-mini-control: 48px;
    --battle-mini-gap: 6px;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
    right: 62px !important;
    bottom: 8px !important;
    width: 50px !important;
    height: 50px !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
    right: 8px !important;
    bottom: 8px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* TRUE END V1.27Beta-global-controls-swap1: swap language/music outside battle only. */
html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
  right: 14px !important;
  bottom: 12px !important;
  width: 64px !important;
  height: 64px !important;
}

html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
  right: 82px !important;
  bottom: 12px !important;
  width: 58px !important;
  height: 58px !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode):not(.battle-controls-active) > .language-toggle.language-toggle {
    right: 8px !important;
    bottom: 8px !important;
    width: 50px !important;
    height: 50px !important;
  }

  html body:not(.maintenance-mode):not(.battle-controls-active) > .music-toggle.music-toggle {
    right: 62px !important;
    bottom: 8px !important;
    width: 48px !important;
    height: 48px !important;
  }
}


/* TRUE EOF V1.27Beta-character-select-cleanframe2: centered selector, visible portraits, no black name mask, faction-ready card frames. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app > .arena {
  width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-gap: clamp(16px, 1.35vw, 22px) !important;
  --select-card-w: clamp(162px, 11.2vw, 196px) !important;
  --select-card-h: calc(var(--select-card-w) * 1.5) !important;
  --select-frame-outset-x: clamp(13px, 0.95vw, 18px) !important;
  --select-frame-outset-y: clamp(18px, 1.2vw, 24px) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(10px, 1.2vh, 16px) clamp(12px, 1.5vw, 22px) !important;
  gap: clamp(8px, 1.1vh, 14px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
  position: relative !important;
  z-index: 18 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  justify-self: center !important;
  width: min(920px, calc(100vw - 48px)) !important;
  min-height: 52px !important;
  margin: 0 auto !important;
  padding: 8px clamp(18px, 2vw, 30px) !important;
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(125, 190, 232, 0.52) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(219, 240, 252, 0.78)),
    rgba(235, 248, 255, 0.9) !important;
  box-shadow:
    0 14px 28px rgba(12, 34, 56, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line > * {
  position: relative !important;
  z-index: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectStatusText {
  justify-self: center !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(19px, 1.65vw, 26px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectRoomText {
  justify-self: start !important;
  color: #27445d !important;
  -webkit-text-fill-color: #27445d !important;
  font-weight: 900 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #leaveCharacterSelect {
  justify-self: end !important;
  min-width: 122px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  z-index: 12 !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: start !important;
  justify-items: center !important;
  width: min(1200px, calc(100vw - 48px)) !important;
  height: min(810px, calc(100dvh - 128px)) !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100dvh - 128px) !important;
  margin: 0 auto !important;
  padding: clamp(70px, 6.2vw, 98px) clamp(64px, 5.3vw, 92px) clamp(58px, 4.7vw, 80px) !important;
  border: 1px solid rgba(167, 210, 241, 0.34) !important;
  border-radius: clamp(22px, 2.2vw, 34px) !important;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 255, 255, 0.9), rgba(228, 244, 252, 0.76) 54%, rgba(214, 232, 244, 0.52) 100%),
    linear-gradient(90deg, rgba(224, 188, 100, 0.14), transparent 16% 84%, rgba(75, 203, 231, 0.14)),
    rgba(237, 248, 255, 0.66) !important;
  box-shadow:
    0 28px 58px rgba(8, 27, 47, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    inset 0 -36px 62px rgba(106, 160, 202, 0.1) !important;
  filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before {
  inset: clamp(12px, 1.4vw, 20px) !important;
  border: 1px solid rgba(194, 163, 88, 0.28) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(96, 209, 255, 0.2), transparent 0 72px, transparent 96px),
    radial-gradient(circle at 0 50%, rgba(232, 188, 84, 0.2), transparent 0 42px, transparent 72px),
    radial-gradient(circle at 100% 50%, rgba(72, 213, 235, 0.22), transparent 0 42px, transparent 72px) !important;
  box-shadow:
    inset 0 0 44px rgba(255, 255, 255, 0.46),
    0 0 28px rgba(93, 192, 240, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  inset: clamp(34px, 3.4vw, 52px) clamp(42px, 4.2vw, 68px) !important;
  border: 1px solid rgba(88, 163, 208, 0.22) !important;
  opacity: 0.74 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs {
  position: relative !important;
  z-index: 4 !important;
  width: min(560px, 100%) !important;
  margin: 0 auto clamp(12px, 1.4vw, 18px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 20px), calc(100dvh - 236px)) !important;
  margin: 0 auto !important;
  padding: 4px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 4px 0 12px !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  --card-frame-main: #e6c466;
  --card-frame-soft: rgba(112, 221, 255, 0.74);
  --card-frame-dark: rgba(40, 52, 62, 0.7);
  --card-frame-gem: #76e3ff;
  --card-name-bg: rgba(251, 246, 218, 0.86);
  --card-name-line: rgba(218, 176, 78, 0.58);
  --card-name-ink: #473109;
  position: relative !important;
  display: block !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  margin: 0 !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  color: var(--card-name-ink) !important;
  cursor: pointer !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --card-frame-main: #60d7f0;
  --card-frame-soft: rgba(112, 242, 255, 0.78);
  --card-frame-dark: rgba(30, 70, 92, 0.72);
  --card-frame-gem: #93f7ff;
  --card-name-bg: rgba(219, 250, 255, 0.88);
  --card-name-line: rgba(72, 197, 226, 0.62);
  --card-name-ink: #10384f;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="villain"] {
  --card-frame-main: #cf426a;
  --card-frame-soft: rgba(173, 88, 237, 0.72);
  --card-frame-dark: rgba(22, 17, 28, 0.86);
  --card-frame-gem: #e73f77;
  --card-name-bg: rgba(35, 25, 42, 0.9);
  --card-name-line: rgba(207, 66, 106, 0.7);
  --card-name-ink: #f8eaff;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--card-frame-main) 66%, #ffffff 18%) !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow:
    0 15px 28px rgba(10, 27, 45, 0.25),
    0 0 18px color-mix(in srgb, var(--card-frame-soft) 46%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: 19px !important;
  border: 2px solid color-mix(in srgb, var(--card-frame-main) 78%, #ffffff 8%) !important;
  background:
    radial-gradient(circle at 50% -2px, var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at 50% calc(100% + 2px), var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at -2px 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% + 2px) 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    linear-gradient(90deg, transparent 0 7%, var(--card-frame-soft) 7.4% 8.1%, transparent 8.6% 91.4%, var(--card-frame-soft) 91.9% 92.6%, transparent 93%),
    linear-gradient(180deg, transparent 0 6%, color-mix(in srgb, var(--card-frame-main) 82%, #ffffff 10%) 6.3% 7%, transparent 7.8% 92.2%, color-mix(in srgb, var(--card-frame-main) 82%, #ffffff 10%) 93% 93.7%, transparent 94%) !important;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--card-frame-soft) 48%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%, transparent 70%, rgba(8, 18, 28, 0.24) 100%) !important;
  box-shadow: inset 0 -26px 42px rgba(5, 11, 18, 0.16) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  z-index: 1 !important;
  border-radius: inherit !important;
  opacity: 1 !important;
  background-image: var(--character-art) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #132638 !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > *:not(.mini-art) {
  position: absolute !important;
  z-index: 9 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  left: 12px !important;
  right: 12px !important;
  bottom: 42px !important;
  display: grid !important;
  place-items: center !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid var(--card-name-line) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08)),
    var(--card-name-bg) !important;
  box-shadow:
    0 7px 16px rgba(5, 16, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  display: block !important;
  max-width: 100% !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  opacity: 0.82 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  font-size: clamp(14px, 1.05vw, 18px) !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  left: 12px !important;
  right: 12px !important;
  bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  display: block !important;
  min-width: 0 !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(133, 185, 221, 0.58) !important;
  border-radius: 7px !important;
  background: rgba(235, 248, 255, 0.88) !important;
  box-shadow: 0 5px 12px rgba(7, 22, 35, 0.12) !important;
  color: #17344e !important;
  -webkit-text-fill-color: #17344e !important;
  font-size: clamp(9px, 0.78vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  max-width: 100% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mode-tip {
  flex: 0 0 auto !important;
  max-width: 42% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.selected > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option:hover > span {
  transform: translateY(-3px) !important;
  box-shadow:
    0 20px 36px rgba(10, 27, 45, 0.3),
    0 0 24px color-mix(in srgb, var(--card-frame-soft) 58%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .hint {
  position: relative !important;
  z-index: 16 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  color: rgba(239, 248, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(239, 248, 255, 0.92) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.54) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    --select-gap: clamp(8px, 2.1vw, 12px) !important;
    --select-card-w: min(39vw, 150px) !important;
    --select-card-h: calc(var(--select-card-w) * 1.5) !important;
    --select-frame-outset-x: clamp(9px, 2.3vw, 13px) !important;
    --select-frame-outset-y: clamp(13px, 3.2vw, 19px) !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line {
    width: calc(100vw - 18px) !important;
    grid-template-columns: 1fr auto !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectRoomText {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #selectStatusText {
    justify-self: start !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .status-line #leaveCharacterSelect {
    min-width: 86px !important;
    min-height: 32px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 104px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 104px) !important;
    padding: clamp(42px, 10vw, 58px) clamp(20px, 5.2vw, 30px) clamp(38px, 9vw, 54px) !important;
    border-radius: 18px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 12px), calc(100dvh - 190px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 9px !important;
    right: 9px !important;
    bottom: 38px !important;
    min-height: 38px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 9px !important;
    right: 9px !important;
    bottom: 8px !important;
  }
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 36px), calc(100dvh - 154px)) !important;
  padding: clamp(12px, 1.8vw, 22px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  padding: clamp(6px, 1vw, 12px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 200, 95, 0.54) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(7, 20, 36, 0.12) 42%, rgba(4, 12, 24, 0.48)) !important;
  box-shadow:
    0 12px 26px rgba(5, 18, 32, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.12) !important;
  color: inherit !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.84 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 6px rgba(246, 200, 95, 0.18))
    drop-shadow(0 0 6px rgba(78, 205, 196, 0.1)) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, transparent 20%, rgba(4, 12, 24, 0.1) 52%, rgba(4, 12, 24, 0.76) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .mini-art {
  z-index: 0 !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.02) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] > span > *:not(.mini-art) {
  position: relative !important;
  z-index: 5 !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .card-inscription,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction] .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  background: rgba(7, 15, 26, 0.5) !important;
  border-color: rgba(246, 200, 95, 0.34) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].previewed > span,
html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterSelect.character-select .character-option[data-select-faction].selected > span {
  transform: translateY(-2px) !important;
  border-color: rgba(246, 200, 95, 0.86) !important;
  box-shadow:
    0 18px 34px rgba(5, 18, 32, 0.34),
    0 0 22px rgba(246, 200, 95, 0.24),
    inset 0 0 0 1px rgba(255, 238, 190, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.chosen-action::after {
  content: attr(data-chosen-label) !important;
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  bottom: 8px !important;
  height: 23px !important;
  min-height: 23px !important;
  z-index: 9 !important;
  pointer-events: none !important;
  border-radius: 6px !important;
  border: 1px solid rgba(188, 255, 166, 0.72) !important;
  background: linear-gradient(180deg, rgba(24, 44, 26, 0.92), rgba(12, 25, 16, 0.92)) !important;
  color: #ecffd7 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 10px rgba(113, 255, 116, 0.24) !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #battle.battle:not([hidden]) #cards.cards .action-card.chosen-action span {
  transform: translateY(-5px) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.target-candidate,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.selected-target,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate {
  outline: 0 !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target)::before,
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target)::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face {
  --duel-target-frame: rgba(91, 218, 255, 0.96);
  --duel-target-glow: rgba(80, 193, 255, 0.34);
  position: relative !important;
  isolation: isolate !important;
  border-color: rgba(132, 224, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(135, 226, 255, 0.5),
    0 0 16px var(--duel-target-glow),
    0 9px 20px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.09) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter.attack-target-candidate .character-face {
  --duel-target-frame: rgba(255, 118, 82, 0.98);
  --duel-target-glow: rgba(255, 88, 58, 0.42);
  border-color: rgba(255, 144, 102, 0.78) !important;
}

html body:not(.maintenance-mode) #appRoot.app.duel-battle-app:has(#battle.battle:not([hidden])) #battle .fighter:is(.target-candidate, .selected-target) .character-face::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: 30 !important;
  pointer-events: none !important;
  border: 2px solid var(--duel-target-frame) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(var(--duel-target-frame) 0 0) left top / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right top / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left bottom / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right bottom / 38px 2px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left top / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right top / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) left bottom / 2px 34px no-repeat,
    linear-gradient(var(--duel-target-frame) 0 0) right bottom / 2px 34px no-repeat !important;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.08),
    0 0 18px var(--duel-target-glow) !important;
  animation: mobileDuelTargetFramePulse 1.85s ease-in-out infinite !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview .preview-skill,
html body:not(.maintenance-mode) #skillInspectDialog .preview-skill,
html body:not(.maintenance-mode) #battleCharacterDialog .preview-skill {
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(169, 211, 236, 0.74) !important;
  background: linear-gradient(180deg, rgba(247, 252, 255, 0.96), rgba(224, 240, 248, 0.92)) !important;
  box-shadow:
    0 8px 20px rgba(19, 45, 69, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview :is(#previewSkill, #previewModeSkill),
html body:not(.maintenance-mode) #skillInspectDialog #skillInspectTitle,
html body:not(.maintenance-mode) #battleCharacterDialog #battlePreviewSkill {
  color: #12364f !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body:not(.maintenance-mode) #appRoot.app.character-select-app #characterPreview #previewDescription,
html body:not(.maintenance-mode) #skillInspectDialog #skillInspectDescription,
html body:not(.maintenance-mode) #battleCharacterDialog #battlePreviewDescription {
  color: #17344a !important;
  -webkit-text-fill-color: currentColor !important;
  line-height: 1.55 !important;
}

html body:not(.maintenance-mode) .passive-skill-label {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

html body:not(.maintenance-mode) .passive-skill-label .skill-inline-text {
  grid-row: auto !important;
  order: 2 !important;
}

html body:not(.maintenance-mode) .passive-skill-label .skill-inline-icon.passive-skill-icon {
  grid-row: auto !important;
  order: 1 !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  min-height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  margin: 0 !important;
}

html body:not(.maintenance-mode) #appRoot.app.battle-app #cards[data-attack-style="affliction-warlock"],
html body:not(.maintenance-mode) #appRoot.app.duel-battle-app #cards[data-attack-style="affliction-warlock"],
html body:not(.maintenance-mode) #cards[data-attack-style="affliction-warlock"] {
  --action-attack-panel-art: url("assets/ui/action_buttons/v125/attack/warlock/affliction.png?v=V1.27Beta-profession-icons-ellipse2") !important;
  --action-defend-panel-art: url("assets/ui/action_buttons/v125/defend/warlock/affliction.png?v=V1.27Beta-profession-icons-ellipse2") !important;
  --action-charge-panel-art: url("assets/ui/action_buttons/v125/charge/warlock/affliction.png?v=V1.27Beta-profession-icons-ellipse2") !important;
}

/* TRUE EOF V1.27Beta-character-select-framefinal3: final card-frame override anchored at real EOF. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  --select-card-w: clamp(170px, 11.6vw, 204px) !important;
  --select-card-h: calc(var(--select-card-w) * 1.5) !important;
  --select-frame-outset-x: clamp(14px, 1vw, 19px) !important;
  --select-frame-outset-y: clamp(20px, 1.3vw, 27px) !important;
  --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
  --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  height: min(842px, calc(100dvh - 126px)) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option {
  --card-frame-main: #e9c873;
  --card-frame-light: #fff0b0;
  --card-frame-shadow: rgba(64, 45, 17, 0.58);
  --card-frame-glow: rgba(255, 221, 118, 0.34);
  --card-frame-gem: #77e8ff;
  --card-name-bg: rgba(255, 249, 225, 0.9);
  --card-name-line: rgba(213, 169, 75, 0.58);
  --card-name-ink: #452d08;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="neutral"] {
  --card-frame-main: #59d2f2;
  --card-frame-light: #c7fbff;
  --card-frame-shadow: rgba(19, 65, 92, 0.62);
  --card-frame-glow: rgba(88, 232, 255, 0.36);
  --card-frame-gem: #9ef8ff;
  --card-name-bg: rgba(222, 250, 255, 0.91);
  --card-name-line: rgba(68, 194, 226, 0.62);
  --card-name-ink: #113b52;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction="villain"] {
  --card-frame-main: #c44164;
  --card-frame-light: #f191b0;
  --card-frame-shadow: rgba(24, 13, 28, 0.78);
  --card-frame-glow: rgba(205, 70, 112, 0.42);
  --card-frame-gem: #ec4d82;
  --card-name-bg: rgba(39, 24, 38, 0.92);
  --card-name-line: rgba(213, 74, 112, 0.72);
  --card-name-ink: #fff0fa;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] > span {
  width: var(--select-card-w) !important;
  height: var(--select-card-h) !important;
  min-width: var(--select-card-w) !important;
  min-height: var(--select-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  border: 1px solid color-mix(in srgb, var(--card-frame-light) 64%, var(--card-frame-main) 36%) !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow:
    0 18px 32px rgba(36, 24, 12, 0.24),
    0 0 18px var(--card-frame-glow),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] > span::before {
  content: "" !important;
  display: block !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  border: 2px solid color-mix(in srgb, var(--card-frame-main) 78%, #ffffff 10%) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% -2px, var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at 50% calc(100% + 2px), var(--card-frame-gem) 0 7px, transparent 8px),
    radial-gradient(circle at -1px 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    radial-gradient(circle at calc(100% + 1px) 50%, var(--card-frame-gem) 0 6px, transparent 7px),
    linear-gradient(135deg, transparent 0 5.5%, var(--card-frame-light) 5.8% 6.5%, transparent 7% 93%, var(--card-frame-light) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(45deg, transparent 0 5.5%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 5.8% 6.5%, transparent 7% 93%, color-mix(in srgb, var(--card-frame-main) 80%, #ffffff 8%) 93.5% 94.2%, transparent 94.5%),
    linear-gradient(90deg, transparent 0 7%, var(--card-frame-shadow) 7.2% 8.1%, transparent 8.6% 91.4%, var(--card-frame-shadow) 91.9% 92.8%, transparent 93%),
    linear-gradient(180deg, transparent 0 6%, var(--card-frame-main) 6.25% 7.15%, transparent 7.8% 92.2%, var(--card-frame-main) 92.85% 93.75%, transparent 94%) !important;
  box-shadow: 0 0 16px var(--card-frame-glow) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  inset: 0 !important;
  z-index: 1 !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  background-image: var(--character-art) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
  left: 12px !important;
  right: 12px !important;
  bottom: 43px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.1)),
    var(--card-name-bg) !important;
  border: 1px solid var(--card-name-line) !important;
  border-radius: 8px !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--card-name-ink) !important;
  -webkit-text-fill-color: var(--card-name-ink) !important;
  text-shadow: none !important;
}

/* TRUE EOF V1.27Beta-character-select-framefinal4: mobile two-column fit. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    --select-gap: clamp(7px, 2vw, 9px) !important;
    --select-card-w: min(31vw, 126px) !important;
    --select-card-h: calc(var(--select-card-w) * 1.5) !important;
    --select-frame-outset-x: clamp(8px, 2vw, 10px) !important;
    --select-frame-outset-y: clamp(11px, 2.8vw, 15px) !important;
    --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 96px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 96px) !important;
    padding: clamp(36px, 8vw, 50px) 12px clamp(34px, 7vw, 48px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 18px), calc(100dvh - 184px)) !important;
    padding: 4px 0 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    gap: var(--select-gap) !important;
    padding: 2px 0 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 9px !important;
    right: 9px !important;
    bottom: 36px !important;
    height: 37px !important;
    min-height: 37px !important;
    padding: 3px 7px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
    font-size: clamp(13px, 3.7vw, 16px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    height: 24px !important;
  }
}

/* TRUE EOF V1.27Beta-identity-library-wide1: identity deck buttons use uncropped 2:1 artwork without glossy film. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
  position: absolute !important;
  z-index: 84 !important;
  left: clamp(18px, 2.1vw, 34px) !important;
  right: auto !important;
  bottom: clamp(20px, 3vh, 38px) !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(8px, 0.8vw, 12px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
  position: relative !important;
  width: clamp(220px, 18.5vw, 332px) !important;
  min-width: clamp(220px, 18.5vw, 332px) !important;
  max-width: clamp(220px, 18.5vw, 332px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(246, 212, 132, 0.34) !important;
  color: #fff6d4 !important;
  -webkit-text-fill-color: #fff6d4 !important;
  background-color: rgba(4, 10, 18, 0.92) !important;
  background-image: var(--library-art) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 8px 18px rgba(18, 16, 12, 0.16),
    0 0 16px rgba(255, 226, 151, 0.11) !important;
  filter: saturate(1.05) brightness(1.03) !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.opportunity-library-action {
  --library-art: url("assets/ui/library-opportunity-button-fatecards-gpt2.png?v=V1.27Beta-identity-library-wide1") !important;
  border-color: rgba(118, 226, 221, 0.38) !important;
  box-shadow:
    0 8px 18px rgba(16, 20, 20, 0.14),
    0 0 15px rgba(107, 224, 220, 0.14) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.artifact-library-action {
  --library-art: url("assets/ui/library-artifact-button-relicvault-gpt2.png?v=V1.27Beta-identity-library-wide1") !important;
  border-color: rgba(241, 201, 109, 0.38) !important;
  box-shadow:
    0 8px 18px rgba(22, 18, 12, 0.14),
    0 0 15px rgba(241, 201, 109, 0.14) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
  position: absolute !important;
  z-index: 3 !important;
  left: 10px !important;
  right: auto !important;
  bottom: 8px !important;
  transform: none !important;
  display: inline-grid !important;
  place-items: center !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 238, 188, 0.15) !important;
  border-radius: 999px !important;
  background: rgba(10, 13, 20, 0.44) !important;
  color: #fff7d8 !important;
  -webkit-text-fill-color: #fff7d8 !important;
  font-size: clamp(10px, 0.72vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
  box-shadow: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
    left: calc(max(10px, env(safe-area-inset-left)) + 2px) !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px) !important;
    gap: 7px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
    width: clamp(136px, 43vw, 172px) !important;
    min-width: clamp(136px, 43vw, 172px) !important;
    max-width: clamp(136px, 43vw, 172px) !important;
    aspect-ratio: 2 / 1 !important;
    border-radius: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
    left: 6px !important;
    bottom: 5px !important;
    max-width: calc(100% - 12px) !important;
    padding: 3px 6px !important;
    font-size: clamp(9px, 2.5vw, 11px) !important;
  }
}

/* TRUE ABSOLUTE END V1.27Beta-battle-log-badges-actions1: final override. */
html body:not(.maintenance-mode).battle-controls-active {
  --battle-log-width-final: clamp(380px, 30vw, 540px);
  --battle-visible-surface: url("assets/ui/battle-luminary-modern-cloth-v1.svg?v=V1.27Beta-battle-log-badges-actions1") !important;
}

html body:not(.maintenance-mode).battle-controls-active,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app,
html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app > .arena,
html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) {
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(229,246,242,0.08)), var(--battle-visible-surface) center center / cover no-repeat fixed, #f2fbf7 !important;
  background-color: #f2fbf7 !important;
}

html body:not(.maintenance-mode).battle-controls-active #battle#battle#battle.battle:not([hidden]) :is(.fighters, .combatant, .fighter, .fighter-panel, .team-board, .seat-ring) {
  background-color: transparent !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) {
  position: fixed !important;
  inset: 0 0 0 auto !important;
  width: var(--battle-log-width-final) !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 64px 18px 18px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  border: 0 !important;
  border-left: 1px solid rgba(106,139,143,0.32) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255,252,238,0.94), rgba(230,246,242,0.88)), rgba(250,255,252,0.92) !important;
  box-shadow: -14px 0 34px rgba(31,52,58,0.2) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  transform: translateX(0) !important;
  transition: transform 220ms ease, opacity 180ms ease !important;
  overflow: hidden !important;
  z-index: 1380 !important;
}

html body:not(.maintenance-mode).battle-controls-active.battle-log-collapsed #sidePanel#sidePanel.side:not([hidden]) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(100%) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(126,166,168,0.28) !important;
  border-radius: 12px !important;
  background: rgba(255,255,250,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72) !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section:first-child {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .rules {
  max-height: 24vh !important;
  overflow: auto !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) h2 {
  margin: 12px 0 10px !important;
  color: #21444a !important;
  font-size: clamp(22px, 1.9vw, 32px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status {
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(222,242,239,0.58)) !important;
  color: #23484f !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status span,
html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status strong {
  color: #23484f !important;
  -webkit-text-fill-color: #23484f !important;
  font-size: clamp(17px, 1.25vw, 22px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 4px 8px 0 !important;
  overflow: auto !important;
  color: #203f45 !important;
  font-size: clamp(18px, 1.22vw, 24px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article {
  padding: 12px 12px 13px !important;
  border: 1px solid rgba(111,157,159,0.22) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.54) !important;
  color: #203f45 !important;
  box-shadow: 0 4px 14px rgba(36,62,66,0.08) !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article > strong {
  color: #163d45 !important;
  -webkit-text-fill-color: #163d45 !important;
  font-size: clamp(19px, 1.3vw, 25px) !important;
  line-height: 1.22 !important;
}

html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log small {
  color: #395e64 !important;
  -webkit-text-fill-color: #395e64 !important;
  font-size: clamp(16px, 1.06vw, 21px) !important;
  line-height: 1.34 !important;
}

html body:not(.maintenance-mode) #battleLogToggle.battle-log-toggle {
  display: none !important;
}

html body:not(.maintenance-mode).battle-controls-active #battleLogToggle.battle-log-toggle:not([hidden]) {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 94px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(87,132,137,0.35) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(221,241,238,0.88)) !important;
  color: #21464c !important;
  -webkit-text-fill-color: #21464c !important;
  box-shadow: 0 7px 18px rgba(28,52,57,0.18), inset 0 1px 0 rgba(255,255,255,0.86) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  z-index: 1420 !important;
}

html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  width: min(1120px, calc(100vw - var(--battle-log-width-final) - 56px)) !important;
  max-width: calc(100vw - var(--battle-log-width-final) - 56px) !important;
  min-width: min(860px, calc(100vw - var(--battle-log-width-final) - 56px)) !important;
}

html body:not(.maintenance-mode).battle-controls-active.battle-log-collapsed #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
  width: min(1280px, calc(100vw - 120px)) !important;
  max-width: calc(100vw - 120px) !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
  min-height: clamp(154px, 12vw, 220px) !important;
  aspect-ratio: 1983 / 793 !important;
  background-size: contain !important;
  transform-origin: center bottom !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
  left: 39.2% !important;
  top: 26.6% !important;
  width: 55.6% !important;
  height: 39.5% !important;
  padding: 0 4.2% !important;
  align-items: center !important;
  justify-items: center !important;
  font-size: clamp(25px, 2.6vw, 38px) !important;
  line-height: 1 !important;
}

html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::before,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card::after,
html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card .action-icon.action-icon {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"],
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"] {
  border-color: rgba(159,205,210,0.36) !important;
  background: linear-gradient(90deg, rgba(255,255,250,0.82), rgba(224,244,242,0.56)) !important;
  color: #22484f !important;
  box-shadow: 0 8px 18px rgba(33,72,79,0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"]::before,
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"]::before {
  background: var(--identity-badge-art) center / contain no-repeat !important;
  box-shadow: 0 0 16px rgba(103,196,220,0.2) !important;
}

html body:not(.maintenance-mode) .identity-role-badge[data-role="chosen"] span,
html body:not(.maintenance-mode) .identity-role-badge[data-role="justice_servant"] span {
  color: #21464c !important;
  -webkit-text-fill-color: #21464c !important;
  text-shadow: none !important;
}

@media (max-width: 920px) {
  html body:not(.maintenance-mode).battle-controls-active {
    --battle-log-width-final: min(88vw, 420px);
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) {
    width: var(--battle-log-width-final) !important;
    padding: 58px 12px 12px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app #battle#battle#battle.battle:not([hidden]) #cards#cards#cards.cards.cards {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 96px !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #cards#cards#cards.cards.cards > .action-card.action-card span {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
}

/* TRUE EOF V1.27Beta-identity-library-artlabels1: enlarge identity library buttons and add top art labels. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
  position: absolute !important;
  z-index: 84 !important;
  left: clamp(18px, 2.1vw, 34px) !important;
  right: auto !important;
  bottom: clamp(20px, 3vh, 38px) !important;
  top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: clamp(13px, 1.25vw, 22px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries::after {
  display: none !important;
  content: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
  position: relative !important;
  width: clamp(118px, 10.2vw, 168px) !important;
  height: clamp(148px, 12.6vw, 208px) !important;
  min-width: clamp(118px, 10.2vw, 168px) !important;
  min-height: clamp(148px, 12.6vw, 208px) !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  border: 1px solid rgba(96, 72, 41, 0.42) !important;
  color: #fff6d4 !important;
  -webkit-text-fill-color: #fff6d4 !important;
  background-color: rgba(52, 39, 23, 0.54) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 246, 205, 0.16), rgba(255, 255, 255, 0) 34%, rgba(20, 16, 10, 0.22)),
    var(--library-art) !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  box-shadow:
    0 8px 18px rgba(18, 16, 12, 0.16),
    0 0 18px rgba(255, 226, 151, 0.12),
    inset 0 0 0 1px rgba(255, 249, 224, 0.2) !important;
  filter: saturate(1.08) brightness(1.04) !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::after {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 22%),
    linear-gradient(0deg, rgba(7, 7, 6, 0.28), rgba(7, 7, 6, 0) 42%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::before {
  position: absolute !important;
  z-index: 3 !important;
  top: clamp(8px, 0.72vw, 14px) !important;
  left: 8px !important;
  right: 8px !important;
  display: block !important;
  pointer-events: none !important;
  font-family: "Cinzel Decorative", "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif !important;
  font-size: clamp(19px, 1.58vw, 29px) !important;
  font-weight: 900 !important;
  font-style: italic !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 0.35px rgba(70, 44, 18, 0.38) !important;
  text-shadow:
    0 1px 1px rgba(72, 42, 12, 0.36),
    0 2px 7px rgba(0, 0, 0, 0.24),
    0 0 13px rgba(255, 241, 176, 0.28) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.opportunity-library-action {
  --library-art: var(--opportunity-mode-button-art) !important;
  --library-glow: #6be0dc !important;
  border-color: rgba(118, 226, 221, 0.42) !important;
  box-shadow:
    0 8px 18px rgba(16, 20, 20, 0.14),
    0 0 17px rgba(107, 224, 220, 0.16),
    inset 0 0 0 1px rgba(224, 255, 253, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.opportunity-library-action::before {
  content: "Chance" !important;
  color: #eafffb !important;
  -webkit-text-fill-color: #eafffb !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.artifact-library-action {
  --library-art: var(--artifact-mode-button-art) !important;
  --library-glow: #f1c96d !important;
  border-color: rgba(241, 201, 109, 0.42) !important;
  box-shadow:
    0 8px 18px rgba(22, 18, 12, 0.14),
    0 0 17px rgba(241, 201, 109, 0.16),
    inset 0 0 0 1px rgba(255, 244, 212, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.artifact-library-action::before {
  content: "Artifact" !important;
  color: #fff0bb !important;
  -webkit-text-fill-color: #fff0bb !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
  position: absolute !important;
  z-index: 3 !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  border: 1px solid rgba(255, 238, 188, 0.18) !important;
  border-radius: 8px !important;
  background: rgba(18, 15, 10, 0.46) !important;
  color: #fff7d8 !important;
  -webkit-text-fill-color: #fff7d8 !important;
  font-size: clamp(11px, 0.86vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.46) !important;
  box-shadow: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
    left: calc(max(10px, env(safe-area-inset-left)) + 2px) !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px) !important;
    gap: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
    width: clamp(78px, 21vw, 104px) !important;
    height: clamp(98px, 26.5vw, 132px) !important;
    min-width: clamp(78px, 21vw, 104px) !important;
    min-height: clamp(98px, 26.5vw, 132px) !important;
    border-radius: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::before {
    top: 7px !important;
    left: 5px !important;
    right: 5px !important;
    font-size: clamp(16px, 4.35vw, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
    left: 5px !important;
    right: 5px !important;
    bottom: 5px !important;
    padding: 4px 4px !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
  }
}
/* TRUE EOF V1.27Beta-character-select-oldtitle3: final EOF lock for old title treatment and visible factions. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs[hidden] {
  display: flex !important;
  visibility: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
  z-index: 20 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 247, 235, 0.84)),
    url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: auto !important;
  bottom: 44px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: end !important;
  gap: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.45) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription strong {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
  text-shadow: inherit !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 11px !important;
    right: 11px !important;
    bottom: 38px !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-oldtitle2: direct page paint and stronger title overlay. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
  z-index: 20 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 247, 235, 0.84)),
    url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png") center / 100% 100% no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: auto !important;
  bottom: 44px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: end !important;
  gap: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.45) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription strong {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
  text-shadow: inherit !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 11px !important;
    right: 11px !important;
    bottom: 38px !important;
  }
}

/* ABSOLUTE EOF V1.27Beta-identity-desktop-layout1: 16:9 desktop identity board with one larger self area and non-overlapping seats. */
@media (min-width: 1100px) and (min-aspect-ratio: 16/10) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    min-height: 100dvh !important;
    padding: clamp(18px, 2.2vh, 30px) clamp(22px, 2.4vw, 44px) clamp(138px, 14vh, 174px) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #teamBoard#teamBoard.team-board {
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: min(620px, calc(100dvh - 190px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-ring-core {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.seat-fighter {
    --identity-seat-w: clamp(132px, 9.6vw, 190px);
    --identity-seat-h: clamp(252px, 30vh, 330px);
    --identity-art-h: clamp(128px, 15.8vh, 176px);
    position: absolute !important;
    left: var(--seat-x) !important;
    top: var(--seat-y) !important;
    width: var(--identity-seat-w) !important;
    min-width: var(--identity-seat-w) !important;
    max-width: var(--identity-seat-w) !important;
    height: var(--identity-seat-h) !important;
    min-height: var(--identity-seat-h) !important;
    max-height: var(--identity-seat-h) !important;
    display: grid !important;
    grid-template-rows: var(--identity-art-h) minmax(0, 1fr) !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
      rgba(12, 22, 24, 0.58) !important;
    border: 1px solid rgba(236, 247, 244, 0.28) !important;
    box-shadow: 0 18px 36px rgba(17, 30, 35, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transform: translate(-50%, -50%) !important;
    overflow: hidden !important;
    z-index: 12 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat {
    --identity-seat-w: clamp(260px, 17vw, 340px);
    --identity-seat-h: clamp(420px, 51vh, 530px);
    --identity-art-h: clamp(248px, 31vh, 340px);
    border-color: rgba(255, 250, 220, 0.72) !important;
    box-shadow:
      0 24px 54px rgba(9, 23, 27, 0.26),
      0 0 0 1px rgba(255, 250, 220, 0.34),
      0 0 34px rgba(96, 207, 218, 0.2),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    z-index: 24 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.card-vfx-hover,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.card-vfx-press {
    transform: translate(-50%, -50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-art.team-art {
    width: 100% !important;
    height: var(--identity-art-h) !important;
    min-height: var(--identity-art-h) !important;
    border-radius: 11px 11px 0 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 54%, rgba(3, 8, 11, 0.74)),
      var(--team-art) center bottom / contain no-repeat !important;
    background-color: rgba(8, 19, 23, 0.28) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-card-inscription {
    top: 10px !important;
    right: 10px !important;
    width: min(88px, calc(100% - 20px)) !important;
    display: grid !important;
    opacity: 0.94 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-card-inscription {
    width: min(126px, calc(100% - 24px)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill {
    left: 10px !important;
    right: 10px !important;
    top: calc(var(--identity-art-h) - 42px) !important;
    max-width: none !important;
    width: auto !important;
    z-index: 18 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill {
    left: 14px !important;
    right: 14px !important;
    top: calc(var(--identity-art-h) - 54px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill-label.team-skill-label,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-skill-label :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    min-height: 30px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
    font-size: clamp(11px, 0.78vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill-label.team-skill-label,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-skill-label :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: clamp(14px, 1.05vw, 18px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info.team-info {
    min-height: 0 !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(28px, auto) auto auto !important;
    gap: 5px !important;
    padding: 8px 9px 9px !important;
    background: linear-gradient(180deg, rgba(7, 16, 20, 0.72), rgba(5, 10, 13, 0.88)) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-info.team-info {
    gap: 7px !important;
    padding: 12px 14px 14px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header {
    display: flex !important;
    min-height: 22px !important;
    height: auto !important;
    padding: 0 !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header strong,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-mini-row,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-label,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-choice {
    color: #f6fbff !important;
    -webkit-text-fill-color: #f6fbff !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header strong {
    font-size: clamp(12px, 0.8vw, 15px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-info header strong {
    font-size: clamp(18px, 1.32vw, 24px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-info header small {
    color: rgba(235, 250, 248, 0.72) !important;
    -webkit-text-fill-color: rgba(235, 250, 248, 0.72) !important;
    font-size: clamp(10px, 0.7vw, 12px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-mini-bars {
    display: grid !important;
    gap: 5px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-mini-row {
    grid-template-columns: 32px minmax(0, 1fr) 26px !important;
    min-height: 17px !important;
    font-size: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat {
    min-height: 22px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 3px 5px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-label {
    font-size: 9px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-marks {
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-stat .stat-value {
    display: block !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 950 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-status-bar {
    min-height: 30px !important;
    max-height: 58px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-status-bar {
    min-height: 42px !important;
    max-height: 84px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-equipment {
    min-height: 30px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-equipment {
    min-height: 40px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .team-choice {
    display: block !important;
    min-height: 16px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .team-choice {
    min-height: 20px !important;
    font-size: 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter .identity-role-badge {
    transform: translate(-34%, -34%) scale(0.96) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #seatRing#seatRing.seat-ring .seat-fighter.self-seat .identity-role-badge {
    transform: translate(-34%, -34%) scale(1.14) !important;
  }
}

/* TRUE EOF V1.27Beta-character-select-oldtitle1: restore the older portrait-card read, keep faction tabs visible. */
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
  width: min(1240px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  z-index: 20 !important;
  width: min(1240px, calc(100vw - 24px)) !important;
  min-height: min(760px, calc(100dvh - 132px)) !important;
  height: min(760px, calc(100dvh - 132px)) !important;
  max-height: calc(100dvh - 132px) !important;
  margin: clamp(6px, 1.2vh, 14px) auto 0 !important;
  padding: clamp(52px, 5vw, 78px) clamp(42px, 5.4vw, 76px) clamp(48px, 4.4vw, 70px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 247, 235, 0.84)),
    url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::before {
  content: none !important;
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(250, 247, 235, 0.78)),
    url("assets/ui/character-select-panel-crystal-frame-only-gpt2.png") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
  position: absolute !important;
  inset: clamp(34px, 3vw, 52px) clamp(36px, 3.6vw, 60px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 42%),
    radial-gradient(ellipse at 50% 50%, rgba(250, 246, 228, 0.54), rgba(232, 241, 246, 0.18) 74%, rgba(255, 255, 255, 0) 100%) !important;
  opacity: 0.76 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs[hidden] {
  position: relative !important;
  z-index: 8 !important;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(8px, 1vw, 14px) !important;
  width: min(560px, 100%) !important;
  margin: 0 auto clamp(12px, 1.3vw, 18px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: clamp(32px, 3vw, 40px) !important;
  padding: 0 clamp(10px, 1.4vw, 16px) !important;
  border: 1px solid rgba(178, 132, 58, 0.52) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 238, 0.94), rgba(226, 239, 248, 0.78)),
    rgba(255, 250, 230, 0.88) !important;
  color: #5b3d13 !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58), 0 6px 14px rgba(72, 49, 20, 0.12) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button.empty {
  opacity: 0.62 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
  border-color: rgba(232, 181, 66, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(255, 244, 186, 0.98), rgba(255, 255, 244, 0.9)),
    rgba(255, 239, 174, 0.92) !important;
  color: #3e2708 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 18px rgba(238, 195, 76, 0.28) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 6 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(calc(var(--select-card-outer-h) * 2 + var(--select-gap) + 34px), calc(100dvh - 260px)) !important;
  padding: clamp(8px, 1vw, 14px) 0 clamp(10px, 1.2vw, 16px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 6 !important;
  justify-content: center !important;
  align-content: start !important;
  padding: clamp(4px, 0.6vw, 8px) 0 clamp(10px, 1vw, 16px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] > span {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(3, 12, 23, 0.16) !important;
  box-shadow:
    0 16px 28px rgba(8, 18, 30, 0.24),
    inset 0 0 0 1px rgba(246, 200, 95, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::before,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] > span::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset:
    calc(var(--select-frame-outset-y) * -1)
    calc(var(--select-frame-outset-x) * -1) !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--arcane-card-frame) center / 100% 100% no-repeat !important;
  opacity: 0.92 !important;
  filter: drop-shadow(0 0 8px rgba(246, 200, 95, 0.22)) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span::after,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option[data-select-faction] > span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, rgba(3, 9, 20, 0.3) 66%, rgba(2, 7, 16, 0.84) 100%) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 8px 8px 36px !important;
  z-index: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  opacity: 1 !important;
  border-radius: 7px !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.04) contrast(1.02) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > *:not(.mini-art):not(.card-inscription) {
  position: relative !important;
  z-index: 6 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: auto !important;
  bottom: 44px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: end !important;
  gap: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.45) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  text-shadow: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
  font-size: clamp(9px, 0.72vw, 11px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  opacity: 0.86 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
  font-size: clamp(17px, 1.18vw, 22px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
  z-index: 7 !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 9px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(6, 16, 28, 0.62) !important;
  border: 1px solid rgba(246, 200, 95, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .skill-tip:not(.mode-tip) {
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option.selected > span {
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 34px rgba(8, 18, 30, 0.3),
    0 0 22px rgba(246, 200, 95, 0.22),
    inset 0 0 0 1px rgba(246, 200, 95, 0.36) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    --select-gap: clamp(7px, 2vw, 9px) !important;
    --select-card-w: min(31vw, 126px) !important;
    --select-card-h: calc(var(--select-card-w) * 1.5) !important;
    --select-frame-outset-x: clamp(8px, 2vw, 10px) !important;
    --select-frame-outset-y: clamp(11px, 2.8vw, 15px) !important;
    --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 96px) !important;
    min-height: 0 !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 96px) !important;
    padding: clamp(36px, 8vw, 50px) 12px clamp(34px, 7vw, 48px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-faction-tabs > button {
    height: 31px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-scroll {
    max-height: min(calc(var(--select-card-outer-h) * 3 + var(--select-gap) * 2 + 18px), calc(100dvh - 184px)) !important;
    padding: 4px 0 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    gap: var(--select-gap) !important;
    padding: 2px 0 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .mini-art.mini-art {
    inset: 8px 8px 34px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription {
    left: 11px !important;
    right: 11px !important;
    bottom: 38px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription small {
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option .card-inscription strong {
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot.app.character-select-app #characterSelect#characterSelect.character-select .character-option > span > em {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    height: 24px !important;
  }
}


/* TRUE REAL EOF V1.27Beta-battle-log-badges-actions1: final override lives at actual file end. */

/* TRUE REAL EOF V1.27Beta-identity-library-wide2: identity library buttons are uncropped 2:1 art plates with no gloss film. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
  position: absolute !important;
  z-index: 84 !important;
  left: clamp(16px, 2vw, 30px) !important;
  right: auto !important;
  bottom: clamp(18px, 2.6vh, 34px) !important;
  top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1vw, 16px) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: min(92vw, 700px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
  position: relative !important;
  display: block !important;
  width: clamp(220px, 18.4vw, 332px) !important;
  aspect-ratio: 2 / 1 !important;
  height: auto !important;
  min-width: clamp(220px, 18.4vw, 332px) !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 0 !important;
  color: #fff8df !important;
  -webkit-text-fill-color: #fff8df !important;
  background-color: transparent !important;
  background-image: var(--library-art) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 8px 18px rgba(18, 16, 12, 0.14),
    0 0 14px rgba(255, 226, 151, 0.08) !important;
  filter: saturate(1.03) contrast(1.01) !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.opportunity-library-action {
  --library-art: url("assets/ui/library-opportunity-button-fatecards-2x1-v2.png?v=V1.27Beta-identity-library-wide2") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.artifact-library-action {
  --library-art: url("assets/ui/library-artifact-button-relicvault-2x1-v2.png?v=V1.27Beta-identity-library-wide2") !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
  position: absolute !important;
  z-index: 3 !important;
  left: 12px !important;
  right: auto !important;
  bottom: 9px !important;
  transform: none !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(255, 238, 188, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(13, 11, 8, 0.44) !important;
  color: #fff7d8 !important;
  -webkit-text-fill-color: #fff7d8 !important;
  font-size: clamp(11px, 0.8vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.54) !important;
  box-shadow: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
    left: max(9px, env(safe-area-inset-left)) !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    max-width: calc(100vw - max(18px, env(safe-area-inset-left) + env(safe-area-inset-right))) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action {
    width: clamp(132px, 43vw, 174px) !important;
    min-width: clamp(132px, 43vw, 174px) !important;
    border-radius: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries > button.library-action > span {
    left: 8px !important;
    bottom: 6px !important;
    padding: 3px 7px !important;
    font-size: clamp(9px, 2.4vw, 11px) !important;
  }
}

/* TRUE REAL EOF V1.27Beta-identity-actions-lock1: identity battle actions use the approved 1280x720 geometry. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) {
  padding-bottom: clamp(118px, 15vh, 164px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 1440 !important;
  width: min(760px, max(560px, calc(100vw - 560px))) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: end !important;
  justify-items: stretch !important;
  gap: clamp(8px, 0.9vw, 12px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 13px rgba(21, 39, 44, 0.2)) !important;
  clip-path: none !important;
  overflow: visible !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.attack {
  background-image: var(--action-attack-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.defend {
  background-image: var(--action-defend-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.charge {
  background-image: var(--action-charge-panel-art) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card .action-icon.action-icon,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card .action-icon.action-icon * {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card > span {
  position: absolute !important;
  left: 34.921875% !important;
  top: 20.277778% !important;
  right: auto !important;
  bottom: auto !important;
  width: 64.6875% !important;
  height: 48.333333% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 3.5% !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f9fbff !important;
  -webkit-text-fill-color: #f9fbff !important;
  font-size: clamp(17px, 1.45vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86), 0 0 8px rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
  z-index: 3 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility {
  position: fixed !important;
  left: auto !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 1480 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(36vw, 360px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility > #rematch[hidden] {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility > button {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  min-width: 88px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(82, 62, 31, 0.34) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 249, 225, 0.96), rgba(218, 190, 131, 0.92)) !important;
  color: #32210f !important;
  -webkit-text-fill-color: #32210f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  box-shadow: 0 6px 14px rgba(42, 30, 15, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

@media (max-width: 1180px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) {
    padding-bottom: calc(178px + env(safe-area-inset-bottom)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards {
    width: min(520px, calc(100vw - 24px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards > button.action-card.action-card > span {
    font-size: clamp(13px, 3.4vw, 20px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 82px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 82px) !important;
    gap: 6px !important;
    max-width: min(42vw, 260px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility > button {
    min-width: 70px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 640px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) #cards#cards#cards.cards.cards {
    width: min(390px, calc(100vw - 14px)) !important;
    gap: 5px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) .battle-libraries.battle-libraries {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.identity-battle-app #battle#battle#battle.battle.identity-battle:not([hidden]) > .utility.utility {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px) !important;
    max-width: min(48vw, 220px) !important;
  }
}
/* TRUE REAL EOF V1.27Beta-mobile-profession-spec-row1: mobile codex spec icons stay in one compact row. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-spec-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 1fr !important;
    gap: clamp(3px, 1.15vw, 5px) !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="druid"] .profession-spec-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(2px, 0.85vw, 4px) !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-spec-icon-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    padding: 0 !important;
    background: var(--profession-spec-art) center / contain no-repeat !important;
    filter:
      drop-shadow(0 5px 8px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 6px color-mix(in srgb, var(--profession-color) 24%, transparent)) !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-spec-icon-button::before {
    inset: 13% 3% 2% !important;
    filter: blur(0.5px) !important;
    opacity: 0.72 !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-spec-icon-button b {
    left: 1% !important;
    right: 1% !important;
    bottom: -1px !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="druid"] .profession-spec-icon-button b {
    font-size: clamp(8px, 2.35vw, 10px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher {
    grid-template-columns: repeat(var(--profession-spec-count, 3), minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap: clamp(3px, 1.1vw, 5px) !important;
    overflow-x: hidden !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button {
    min-width: 0 !important;
    min-height: clamp(58px, 15vw, 72px) !important;
    padding: clamp(35px, 9.5vw, 43px) 3px 5px !important;
    background:
      radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-color) 22%, transparent), transparent 54%),
      var(--profession-spec-art) center 5px / clamp(34px, 9vw, 42px) clamp(34px, 9vw, 42px) no-repeat,
      rgba(4, 8, 15, 0.64) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button.is-active {
    background:
      radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--profession-role-color) 30%, transparent), transparent 58%),
      var(--profession-spec-art) center 4px / clamp(36px, 9.5vw, 44px) clamp(36px, 9.5vw, 44px) no-repeat,
      rgba(7, 10, 17, 0.82) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button b {
    font-size: clamp(9px, 2.55vw, 11px) !important;
  }

  html body:not(.maintenance-mode) .profession-spec-detail-switcher .profession-spec-icon-button small {
    font-size: clamp(7px, 2vw, 9px) !important;
  }
}
/* TRUE REAL EOF V1.27Beta-character-select-whiteframe-fix1: centered white board and correctly applied portrait card frames. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-gap: clamp(16px, 1.7vw, 22px) !important;
  --select-card-outer-h: clamp(228px, 33dvh, 246px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 9 / 16) !important;
  --select-card-w: var(--select-card-outer-w) !important;
  --select-card-h: var(--select-card-outer-h) !important;
  --select-frame-outset-x: 0px !important;
  --select-frame-outset-y: 0px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  margin: 0 !important;
  padding: clamp(68px, 9dvh, 78px) clamp(18px, 2vw, 28px) clamp(14px, 2dvh, 22px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  z-index: 3 !important;
  width: min(1180px, calc(100vw - 44px)) !important;
  height: min(630px, calc(100dvh - 92px)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 92px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: clamp(8px, 1.1dvh, 12px) !important;
  margin: 0 auto !important;
  padding:
    clamp(58px, 8dvh, 68px)
    clamp(78px, 7vw, 104px)
    clamp(30px, 4.6dvh, 40px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-character-select-whiteframe-fix1") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 18px 28px rgba(28, 65, 96, 0.18))
    drop-shadow(0 0 18px rgba(116, 190, 255, 0.12)) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px, 1vw, 14px) !important;
  width: min(560px, 100%) !important;
  max-width: 100% !important;
  height: clamp(34px, 5dvh, 40px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 clamp(10px, 1.3vw, 16px) !important;
  border: 1px solid rgba(164, 185, 207, 0.64) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(226, 238, 248, 0.82)),
    rgba(245, 250, 255, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 5px 12px rgba(66, 98, 130, 0.1) !important;
  color: #244056 !important;
  -webkit-text-fill-color: #244056 !important;
  font-size: clamp(11px, 1vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
  border-color: rgba(229, 188, 87, 0.9) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 224, 0.98), rgba(231, 244, 255, 0.9)),
    rgba(255, 247, 217, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 0 14px rgba(76, 165, 255, 0.15),
    0 5px 12px rgba(154, 111, 34, 0.1) !important;
  color: #5a3b07 !important;
  -webkit-text-fill-color: #5a3b07 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 8 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  margin: 0 auto !important;
  padding: clamp(4px, 0.8dvh, 8px) clamp(14px, 1.8vw, 22px) clamp(8px, 1.3dvh, 14px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 8 !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 0 clamp(10px, 1.4dvh, 16px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect.character-select .character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
  position: relative !important;
  display: block !important;
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::before,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(242, 249, 255, 0.94), rgba(218, 235, 249, 0.84)) !important;
  box-shadow:
    0 12px 22px rgba(35, 69, 100, 0.18),
    0 0 14px rgba(112, 190, 255, 0.08) !important;
  overflow: hidden !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-character-select-whiteframe-fix1") center / 100% 100% no-repeat !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 6px rgba(85, 176, 255, 0.12))
    drop-shadow(0 0 5px rgba(235, 198, 93, 0.08)) !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  content: "" !important;
  position: absolute !important;
  inset: 9.5% 8.2% 9.2% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 28%, rgba(7, 20, 34, 0.08) 58%, rgba(4, 11, 22, 0.76) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -18px 30px rgba(0, 0, 0, 0.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  position: absolute !important;
  inset: 9.5% 8.2% 9.2% !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background:
    var(--character-art, none) center var(--portrait-y, 14%) / cover no-repeat,
    linear-gradient(180deg, #dcecf8, #9cb8d0) !important;
  opacity: 1 !important;
  filter: saturate(1.04) contrast(1.03) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > *:not(.mini-art):not(.card-inscription) {
  position: relative !important;
  z-index: 9 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 13% !important;
  right: 13% !important;
  top: auto !important;
  bottom: 19% !important;
  z-index: 10 !important;
  display: grid !important;
  justify-items: start !important;
  align-content: end !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal !important;
  line-height: 1 !important;
  text-align: left !important;
  transform: none !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong {
  position: static !important;
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff8df !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.92),
    0 0 10px rgba(0, 0, 0, 0.42) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription small {
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 850 !important;
  opacity: 0.92 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong {
  font-size: clamp(15px, 1.08vw, 18px) !important;
  font-weight: 950 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  position: absolute !important;
  left: 13% !important;
  right: 13% !important;
  bottom: 7.2% !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 20px !important;
  height: 8.6% !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(8, 18, 30, 0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  transform: none !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff8df !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(8px, 0.7vw, 10px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.86) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.previewed > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.selected > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option:hover > span {
  transform: translateY(-2px) !important;
  box-shadow:
    0 15px 28px rgba(35, 69, 100, 0.24),
    0 0 18px rgba(104, 183, 255, 0.16),
    0 0 12px rgba(235, 198, 93, 0.12) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.taken::after,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option:disabled:not(.placeholder)::after {
  content: attr(data-taken-label) !important;
  position: absolute !important;
  left: 11% !important;
  right: 11% !important;
  top: 50% !important;
  z-index: 20 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 28px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(88, 91, 99, 0.92) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(10px, 0.85vw, 12px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.62) !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.taken > span,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option:disabled:not(.placeholder) > span {
  filter: grayscale(0.34) brightness(0.84) !important;
  opacity: 0.9 !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-gap: clamp(8px, 2.1vw, 12px) !important;
    --select-card-outer-h: min(29.5dvh, 222px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 9 / 16) !important;
    padding: clamp(58px, 9dvh, 68px) 8px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
    width: calc(100vw - 10px) !important;
    height: calc(100dvh - 78px) !important;
    max-height: calc(100dvh - 78px) !important;
    padding: clamp(52px, 10dvh, 72px) clamp(18px, 5vw, 30px) clamp(26px, 5dvh, 38px) !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-character-select-whiteframe-fix1") center / 100% 100% no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    width: 100% !important;
    height: 32px !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    padding: 0 7px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    padding: 2px 0 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .card-inscription strong {
    font-size: clamp(13px, 3.2vw, 16px) !important;
  }
}
/* TRUE REAL EOF V1.27Beta-character-select-whiteframe-fix2: readable skill pill and no second-row bottom clipping. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
  padding-bottom: clamp(20px, 3dvh, 28px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  padding-bottom: clamp(14px, 1.8dvh, 20px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  bottom: 7.4% !important;
  height: 9.8% !important;
  min-height: 23px !important;
  padding: 0 6px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip) .skill-inline-text {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  color: #fff8df !important;
  -webkit-text-fill-color: #fff8df !important;
  font-size: clamp(9px, 0.78vw, 11px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    min-height: 21px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip) .skill-inline-text {
    font-size: clamp(8px, 2.25vw, 10px) !important;
  }
}
/* TRUE REAL EOF V1.27Beta-character-select-whiteboard-align1: compact white-gold selector board, stable tabs, uncropped portrait frames. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-gap: clamp(18px, 1.7vw, 24px) !important;
  --select-card-outer-h: clamp(224px, 32dvh, 238px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: grid !important;
  place-items: start center !important;
  padding: clamp(66px, 9dvh, 74px) clamp(18px, 2vw, 28px) clamp(14px, 2dvh, 22px) !important;
  background: transparent !important;
  overflow: hidden !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
  position: relative !important;
  isolation: isolate !important;
  z-index: 3 !important;
  width: min(960px, calc(100vw - 72px), calc((100dvh - 90px) * 1.5)) !important;
  height: min(640px, calc(100dvh - 90px), calc((100vw - 72px) / 1.5)) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 90px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: clamp(10px, 1.6dvh, 14px) !important;
  margin: 0 auto !important;
  padding:
    clamp(58px, 8.4dvh, 70px)
    clamp(72px, 7vw, 92px)
    clamp(34px, 5dvh, 46px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-character-select-whiteboard-align1") center / 100% 100% no-repeat !important;
  opacity: 0.88 !important;
  filter:
    drop-shadow(0 16px 30px rgba(13, 35, 61, 0.22))
    drop-shadow(0 0 14px rgba(111, 191, 255, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::after {
  content: "" !important;
  position: absolute !important;
  inset: 14% 11% 10% !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  border: 1px solid rgba(126, 175, 214, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(217, 239, 255, 0.08)) !important;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.2),
    inset 0 0 38px rgba(96, 172, 232, 0.08) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  position: relative !important;
  z-index: 2 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
  display: flex !important;
  width: min(560px, 100%) !important;
  height: clamp(34px, 5dvh, 40px) !important;
  margin: 0 auto !important;
  gap: clamp(8px, 1vw, 14px) !important;
  padding: 0 !important;
  background: transparent !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 clamp(10px, 1.3vw, 16px) !important;
  border: 1px solid rgba(145, 174, 204, 0.62) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(221, 235, 248, 0.72)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.64),
    0 5px 12px rgba(34, 72, 110, 0.1) !important;
  color: #254257 !important;
  -webkit-text-fill-color: #254257 !important;
  font-size: clamp(11px, 1vw, 14px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
  border-color: rgba(224, 184, 83, 0.92) !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 222, 0.94), rgba(231, 244, 255, 0.82)) !important;
  color: #5a3b07 !important;
  -webkit-text-fill-color: #5a3b07 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    0 0 13px rgba(86, 169, 255, 0.14),
    0 5px 12px rgba(142, 104, 39, 0.1) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(4px, 0.8dvh, 8px) clamp(12px, 1.6vw, 18px) clamp(16px, 2dvh, 22px) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable both-edges !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  justify-content: center !important;
  align-content: start !important;
  gap: var(--select-gap) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 0 clamp(10px, 1.4dvh, 16px) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  background: transparent !important;
  box-shadow:
    0 12px 22px rgba(21, 52, 86, 0.18),
    0 0 12px rgba(110, 188, 255, 0.1) !important;
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
  inset: 0 !important;
  z-index: 7 !important;
  background:
    url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-character-select-whiteboard-align1") center / 100% 100% no-repeat !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  inset: 8.9% 8.35% 8.8% !important;
  border-radius: 4px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0 30%, rgba(7, 20, 34, 0.05) 56%, rgba(4, 11, 22, 0.76) 100%) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
  background:
    var(--character-art, none) center var(--portrait-y, 14%) / cover no-repeat,
    linear-gradient(180deg, #dcecf8, #9cb8d0) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  left: 13% !important;
  right: 13% !important;
  bottom: 18.8% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
  left: 13% !important;
  right: 13% !important;
  bottom: 6.8% !important;
  height: 9.8% !important;
  min-height: 22px !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-gap: clamp(10px, 2.8vw, 14px) !important;
    --select-card-outer-h: min(24dvh, 206px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    padding: clamp(66px, 8.4dvh, 74px) 6px 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout {
    width: min(390px, calc(100vw - 12px)) !important;
    height: min(calc(100dvh - 84px), calc((100vw - 12px) * 1672 / 941)) !important;
    max-height: calc(100dvh - 84px) !important;
    padding:
      clamp(68px, 9.3dvh, 82px)
      clamp(38px, 10vw, 46px)
      clamp(30px, 4.8dvh, 40px) !important;
    gap: 10px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::before {
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-character-select-whiteboard-align1") center / 100% 100% no-repeat !important;
    opacity: 0.9 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout::after {
    inset: 12% 10% 9% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    width: 100% !important;
    height: 34px !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    padding: 2px 0 12px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    min-height: 20px !important;
  }
}

/* TRUE REAL EOF V1.27Beta-character-select-whiteboard-align2: beat duplicated-class legacy board rules. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto !important;
  background-repeat: repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  display: block !important;
  pointer-events: none !important;
  background:
    url("assets/ui/character-select-desktop-single-white-frame-v1.png?v=V1.27Beta-character-select-whiteboard-align2") center / 100% 100% no-repeat !important;
  opacity: 0.88 !important;
  filter:
    drop-shadow(0 16px 30px rgba(13, 35, 61, 0.22))
    drop-shadow(0 0 14px rgba(111, 191, 255, 0.14)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
  content: "" !important;
  position: absolute !important;
  inset: 14% 11% 10% !important;
  z-index: -1 !important;
  display: block !important;
  pointer-events: none !important;
  border: 1px solid rgba(126, 175, 214, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(217, 239, 255, 0.08)) !important;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.2),
    inset 0 0 38px rgba(96, 172, 232, 0.08) !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-character-select-whiteboard-align2") center / 100% 100% no-repeat !important;
    opacity: 0.9 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    inset: 12% 10% 9% !important;
  }
}

/* TRUE REAL EOF V1.27Beta-character-select-faction-filter-align2: keep Luminary/Neutral/Villain tabs functional after card sizing overrides. */
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option.character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option.character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option.character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.placeholder {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="luminary"] .character-option.character-option:not([data-select-faction="luminary"]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="neutral"] .character-option.character-option:not([data-select-faction="neutral"]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select[data-active-faction="villain"] .character-option.character-option:not([data-select-faction="villain"]),
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.placeholder {
  display: none !important;
}

/* TRUE REAL EOF V1.27Beta-mobile-character-select-frame3: clearer mobile frame, higher tabs, two large card rows. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-gap: clamp(12px, 3.2vw, 16px) !important;
    --select-card-outer-h: clamp(226px, 27.5dvh, 236px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    place-items: start center !important;
    padding: clamp(52px, 6.4dvh, 58px) 4px 10px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: min(386px, calc(100vw - 8px)) !important;
    height: min(772px, calc(100dvh - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
    grid-template-rows: auto minmax(0, auto) !important;
    align-content: start !important;
    gap: clamp(8px, 1.5dvh, 12px) !important;
    padding:
      clamp(46px, 6.4dvh, 54px)
      clamp(30px, 8.2vw, 38px)
      clamp(40px, 5.2dvh, 50px) !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    inset: 0 !important;
    display: block !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-mobile-character-select-frame3") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 22px rgba(8, 28, 58, 0.24))
      drop-shadow(0 0 16px rgba(68, 166, 255, 0.2))
      saturate(1.06)
      contrast(1.05) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    inset: 8.6% 8.2% 6.8% !important;
    display: block !important;
    border: 1px solid rgba(176, 215, 246, 0.24) !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.18), rgba(214, 238, 255, 0.08)) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 255, 255, 0.2),
      inset 0 0 46px rgba(58, 154, 230, 0.11) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    width: min(318px, 100%) !important;
    height: 34px !important;
    margin: 0 auto !important;
    gap: 7px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    padding: 0 6px !important;
    font-size: 11px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    width: min(326px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 20px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 20px) !important;
    margin: 0 auto !important;
    padding: 2px 0 18px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    gap: var(--select-gap) !important;
    align-content: start !important;
    justify-content: center !important;
    padding: 0 0 18px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    inset: 7.3% 7.1% 7.5% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 12% !important;
    right: 12% !important;
    bottom: 18.4% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    left: 12% !important;
    right: 12% !important;
    bottom: 6.6% !important;
    min-height: 22px !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-card-outerframe1: frame surrounds the card instead of sitting inside the portrait. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-frame-bleed-x: clamp(8px, 2.8vw, 11px) !important;
    --select-frame-bleed-y: clamp(9px, 3vw, 12px) !important;
    --select-gap: clamp(24px, 7vw, 28px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    width: min(344px, 100%) !important;
    padding-left: var(--select-frame-bleed-x) !important;
    padding-right: var(--select-frame-bleed-x) !important;
    overflow-x: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    width: 100% !important;
    justify-content: center !important;
    gap: var(--select-gap) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
    background:
      linear-gradient(180deg, rgba(8, 18, 30, 0.06), rgba(8, 18, 30, 0.16)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
    inset:
      calc(var(--select-frame-bleed-y) * -1)
      calc(var(--select-frame-bleed-x) * -1) !important;
    z-index: 8 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-card-outerframe1") center / 100% 100% no-repeat !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    inset: 5.8% 5.4% 6.1% !important;
    border-radius: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 10.5% !important;
    right: 10.5% !important;
    bottom: 17.8% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    left: 10.5% !important;
    right: 10.5% !important;
    bottom: 5.8% !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-select-frame-contrast1: make the large mobile selector frame read against the pale arena. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 24px rgba(5, 24, 54, 0.3))
      drop-shadow(0 0 10px rgba(33, 129, 230, 0.28))
      drop-shadow(0 0 3px rgba(255, 255, 255, 0.5))
      saturate(1.1)
      contrast(1.1) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    inset: 7.2% 6.6% 5.6% !important;
    border: 1px solid rgba(97, 157, 213, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(248, 253, 255, 0.18), rgba(201, 231, 255, 0.09)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.24),
      inset 0 0 26px rgba(255, 255, 255, 0.2),
      inset 0 0 54px rgba(45, 143, 225, 0.13),
      0 0 12px rgba(72, 164, 245, 0.12) !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-card-frame-fit2: fit the mobile board and portraits to the card frames. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-card-outer-h: clamp(226px, 29dvh, 246px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-frame-bleed-x: clamp(5px, 1.55vw, 6px) !important;
    --select-frame-bleed-y: clamp(7px, 2vw, 9px) !important;
    --select-gap: clamp(18px, 5vw, 20px) !important;
    padding-top: clamp(52px, 6.4dvh, 58px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: min(358px, calc(100vw - 28px)) !important;
    height: min(772px, calc(100dvh - 64px)) !important;
    padding:
      clamp(46px, 6.4dvh, 54px)
      clamp(20px, 5.6vw, 24px)
      clamp(38px, 5dvh, 48px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    inset: 7.2% 4.8% 5.6% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    width: min(304px, 100%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    width: min(316px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    padding-left: var(--select-frame-bleed-x) !important;
    padding-right: var(--select-frame-bleed-x) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    gap: var(--select-gap) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    inset: 2.8% 2.4% 4.8% !important;
    border-radius: 5px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 8.5% !important;
    right: 8.5% !important;
    bottom: 16.8% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    left: 8.5% !important;
    right: 8.5% !important;
    bottom: 5.2% !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-card-layer-order1: front outer border, back white plate. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
    isolation: isolate !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(229, 244, 255, 0.88)) !important;
    border-radius: 5px !important;
    box-shadow:
      0 10px 18px rgba(12, 38, 70, 0.18),
      0 0 10px rgba(126, 196, 255, 0.12) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
    z-index: 2 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    z-index: 3 !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 36%, rgba(6, 17, 30, 0.02) 58%, rgba(3, 9, 18, 0.78) 100%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
    inset:
      calc(var(--select-frame-bleed-y) * -1)
      calc(var(--select-frame-bleed-x) * -1) !important;
    z-index: 12 !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-card-layer-order1") center / 100% 100% no-repeat !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    z-index: 13 !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-faction-tabs-polish1: compact segmented faction tabs. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    width: min(304px, 100%) !important;
    height: 32px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 3px !important;
    border: 1px solid rgba(210, 190, 130, 0.58) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(216, 237, 252, 0.58)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(81, 125, 164, 0.22),
      0 6px 14px rgba(20, 55, 92, 0.16) !important;
    backdrop-filter: blur(5px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(5px) saturate(1.08) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(31, 58, 89, 0.72) !important;
    -webkit-text-fill-color: rgba(31, 58, 89, 0.72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button + button {
    box-shadow: inset 1px 0 0 rgba(92, 139, 178, 0.18) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
    border: 1px solid rgba(244, 223, 156, 0.92) !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 219, 0.96), rgba(227, 196, 112, 0.86) 52%, rgba(112, 168, 213, 0.64) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(87, 116, 145, 0.24),
      0 2px 5px rgba(44, 84, 122, 0.18) !important;
    color: #17304f !important;
    -webkit-text-fill-color: #17304f !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-card-trinity1: transparent faction frame, exact white plate, exact portrait crop. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-card-inner-top: 3.1% !important;
    --select-card-inner-x: 2.7% !important;
    --select-card-inner-bottom: 4.9% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
    --card-frame-primary: rgba(236, 207, 126, 0.98);
    --card-frame-secondary: rgba(87, 179, 255, 0.82);
    --card-frame-shadow: rgba(33, 120, 214, 0.2);
    --skill-plaque-text: #132d4c;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="neutral"] {
    --card-frame-primary: rgba(224, 232, 242, 0.98);
    --card-frame-secondary: rgba(154, 126, 232, 0.78);
    --card-frame-shadow: rgba(114, 93, 204, 0.2);
    --skill-plaque-text: #272b52;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-select-faction="villain"] {
    --card-frame-primary: rgba(232, 166, 117, 0.98);
    --card-frame-secondary: rgba(218, 74, 112, 0.82);
    --card-frame-shadow: rgba(160, 35, 76, 0.24);
    --skill-plaque-text: #4a1830;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
    isolation: isolate !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow:
      0 10px 18px rgba(12, 38, 70, 0.16),
      0 0 10px var(--card-frame-shadow) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 1 !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(225, 241, 253, 0.9)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(150, 185, 213, 0.18),
      inset 0 0 18px rgba(255, 255, 255, 0.38) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 2 !important;
    border-radius: 5px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
    inset:
      calc(var(--select-frame-bleed-y) * -1)
      calc(var(--select-frame-bleed-x) * -1) !important;
    z-index: 12 !important;
    border: 1.5px solid var(--card-frame-primary) !important;
    border-radius: 9px !important;
    background:
      linear-gradient(var(--card-frame-secondary), var(--card-frame-secondary)) top 3px left 12px / 34px 1px no-repeat,
      linear-gradient(var(--card-frame-secondary), var(--card-frame-secondary)) top 3px right 12px / 34px 1px no-repeat,
      linear-gradient(var(--card-frame-secondary), var(--card-frame-secondary)) bottom 3px left 12px / 34px 1px no-repeat,
      linear-gradient(var(--card-frame-secondary), var(--card-frame-secondary)) bottom 3px right 12px / 34px 1px no-repeat,
      linear-gradient(var(--card-frame-primary), var(--card-frame-primary)) left 3px top 12px / 1px 34px no-repeat,
      linear-gradient(var(--card-frame-primary), var(--card-frame-primary)) right 3px top 12px / 1px 34px no-repeat,
      linear-gradient(var(--card-frame-primary), var(--card-frame-primary)) left 3px bottom 12px / 1px 34px no-repeat,
      linear-gradient(var(--card-frame-primary), var(--card-frame-primary)) right 3px bottom 12px / 1px 34px no-repeat !important;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.68),
      inset 0 0 0 3px rgba(255, 255, 255, 0.1),
      0 0 0 1px rgba(255, 255, 255, 0.38),
      0 0 8px var(--card-frame-shadow) !important;
    filter: none !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    z-index: 13 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    left: 8.6% !important;
    right: 8.6% !important;
    bottom: 5.1% !important;
    height: clamp(20px, 2.65dvh, 23px) !important;
    min-height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 7px !important;
    border: 1px solid var(--card-frame-primary) !important;
    border-radius: 6px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 248, 0.94), rgba(231, 244, 255, 0.78) 48%, rgba(120, 157, 188, 0.72) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(51, 91, 128, 0.34),
      0 3px 7px rgba(4, 14, 28, 0.3) !important;
    z-index: 14 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em::before {
    content: "" !important;
    position: absolute !important;
    inset: 2px 5px auto !important;
    height: 1px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent) !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .skill-tip:not(.mode-tip) .skill-inline-text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--skill-plaque-text) !important;
    -webkit-text-fill-color: var(--skill-plaque-text) !important;
    font-size: clamp(9.5px, 2.75vw, 11px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mode-tip {
    flex: 0 0 auto !important;
    height: 14px !important;
    min-height: 14px !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(64, 105, 145, 0.34) !important;
    background: rgba(255, 255, 255, 0.36) !important;
    color: var(--skill-plaque-text) !important;
    -webkit-text-fill-color: var(--skill-plaque-text) !important;
    font-size: 8px !important;
    line-height: 12px !important;
    text-shadow: none !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-select-ornate-frame-restore1: real front frame, exact back plate, top-safe faction tabs. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
    --select-card-outer-h: clamp(226px, 29dvh, 246px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-w: var(--select-card-outer-w) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-frame-outset-x: 0px !important;
    --select-frame-outset-y: 0px !important;
    --select-frame-bleed-x: 0px !important;
    --select-frame-bleed-y: 0px !important;
    --select-gap: clamp(18px, 5vw, 20px) !important;
    --select-card-inner-top: 6.9% !important;
    --select-card-inner-x: 6.9% !important;
    --select-card-inner-bottom: 7.2% !important;
    place-items: start center !important;
    padding: clamp(52px, 6.4dvh, 58px) 4px 8px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
    width: min(358px, calc(100vw - 32px)) !important;
    height: min(772px, calc(100dvh - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
    display: grid !important;
    grid-template-rows: 32px minmax(0, auto) !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 8px !important;
    padding:
      clamp(31px, 4.3dvh, 36px)
      clamp(20px, 5.6vw, 24px)
      clamp(38px, 5dvh, 48px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::before {
    inset: 0 !important;
    z-index: -2 !important;
    display: block !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-mobile-character-select-ornate-frame-restore1") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 22px rgba(8, 28, 58, 0.24))
      drop-shadow(0 0 16px rgba(68, 166, 255, 0.2))
      saturate(1.06)
      contrast(1.05) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
    inset: 8.2% 4.8% 5.8% !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid rgba(176, 215, 246, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.16), rgba(214, 238, 255, 0.08)) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 255, 255, 0.2),
      inset 0 0 46px rgba(58, 154, 230, 0.11) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: min(304px, 100%) !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 3px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 190, 130, 0.58) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(216, 237, 252, 0.6)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(81, 125, 164, 0.22),
      0 6px 14px rgba(20, 55, 92, 0.14) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(31, 58, 89, 0.72) !important;
    -webkit-text-fill-color: rgba(31, 58, 89, 0.72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button + button {
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs > button.selected {
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 219, 0.98), rgba(227, 196, 112, 0.86) 54%, rgba(112, 168, 213, 0.62) 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(244, 223, 156, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(87, 116, 145, 0.24) !important;
    color: #17304f !important;
    -webkit-text-fill-color: #17304f !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
    position: relative !important;
    z-index: 5 !important;
    width: min(314px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    display: grid !important;
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    align-content: start !important;
    gap: var(--select-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option {
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow:
      0 10px 18px rgba(12, 38, 70, 0.16),
      0 0 10px rgba(94, 183, 255, 0.12) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
    content: "" !important;
    position: absolute !important;
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 5px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 242, 252, 0.94)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(150, 185, 213, 0.18),
      inset 0 0 18px rgba(255, 255, 255, 0.38) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art {
    position: absolute !important;
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 5px !important;
    background:
      var(--character-art, none) center var(--portrait-y, 14%) / cover no-repeat,
      linear-gradient(180deg, #eef7ff, #b7d1e7) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-select-ornate-frame-restore1") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
    left: 11.8% !important;
    right: 11.8% !important;
    bottom: 18.4% !important;
    z-index: 22 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > em {
    left: 11.8% !important;
    right: 11.8% !important;
    bottom: 6.4% !important;
    height: clamp(20px, 2.65dvh, 23px) !important;
    min-height: 20px !important;
    z-index: 22 !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-select-visible-state-lock1: apply the restored selector skin whenever the selector itself is visible. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-outer-h: clamp(226px, 29dvh, 246px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-w: var(--select-card-outer-w) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-frame-outset-x: 0px !important;
    --select-frame-outset-y: 0px !important;
    --select-frame-bleed-x: 0px !important;
    --select-frame-bleed-y: 0px !important;
    --select-gap: clamp(18px, 5vw, 20px) !important;
    --select-card-inner-top: 6.9% !important;
    --select-card-inner-x: 6.9% !important;
    --select-card-inner-bottom: 7.2% !important;
    place-items: start center !important;
    padding: clamp(52px, 6.4dvh, 58px) 4px 8px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    width: min(358px, calc(100vw - 32px)) !important;
    height: min(772px, calc(100dvh - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
    display: grid !important;
    grid-template-rows: 32px minmax(0, auto) !important;
    align-content: start !important;
    justify-items: center !important;
    gap: 8px !important;
    padding:
      clamp(31px, 4.3dvh, 36px)
      clamp(20px, 5.6vw, 24px)
      clamp(38px, 5dvh, 48px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout::before {
    inset: 0 !important;
    z-index: -2 !important;
    display: block !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-mobile-character-select-visible-state-lock1") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 22px rgba(8, 28, 58, 0.24))
      drop-shadow(0 0 16px rgba(68, 166, 255, 0.2))
      saturate(1.06)
      contrast(1.05) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout::after {
    inset: 8.2% 4.8% 5.8% !important;
    z-index: -1 !important;
    display: block !important;
    border: 1px solid rgba(176, 215, 246, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.16), rgba(214, 238, 255, 0.08)) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 255, 255, 0.2),
      inset 0 0 46px rgba(58, 154, 230, 0.11) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: min(304px, 100%) !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 3px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 190, 130, 0.58) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(216, 237, 252, 0.6)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(81, 125, 164, 0.22),
      0 6px 14px rgba(20, 55, 92, 0.14) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(31, 58, 89, 0.72) !important;
    -webkit-text-fill-color: rgba(31, 58, 89, 0.72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button + button {
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button.selected {
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 219, 0.98), rgba(227, 196, 112, 0.86) 54%, rgba(112, 168, 213, 0.62) 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(244, 223, 156, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(87, 116, 145, 0.24) !important;
    color: #17304f !important;
    -webkit-text-fill-color: #17304f !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    position: relative !important;
    z-index: 5 !important;
    width: min(314px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 16px) !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    display: grid !important;
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    align-content: start !important;
    gap: var(--select-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 16px !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option {
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow:
      0 10px 18px rgba(12, 38, 70, 0.16),
      0 0 10px rgba(94, 183, 255, 0.12) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::after {
    content: "" !important;
    position: absolute !important;
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 5px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 242, 252, 0.94)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(150, 185, 213, 0.18),
      inset 0 0 18px rgba(255, 255, 255, 0.38) !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .mini-art.mini-art {
    position: absolute !important;
    inset:
      var(--select-card-inner-top)
      var(--select-card-inner-x)
      var(--select-card-inner-bottom) !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 5px !important;
    background:
      var(--character-art, none) center var(--portrait-y, 14%) / cover no-repeat,
      linear-gradient(180deg, #eef7ff, #b7d1e7) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 20 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-select-visible-state-lock1") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription {
    left: 11.8% !important;
    right: 11.8% !important;
    bottom: 18.4% !important;
    z-index: 22 !important;
  }

  html body:not(.maintenance-mode) #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > em {
    left: 11.8% !important;
    right: 11.8% !important;
    bottom: 6.4% !important;
    height: clamp(20px, 2.65dvh, 23px) !important;
    min-height: 20px !important;
    z-index: 22 !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-card-scale-frame-outside1: larger inner cards with the ornate frame outside the card body. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-card-h: clamp(226px, 30dvh, 252px) !important;
    --select-card-w: calc(var(--select-card-h) * 941 / 1672) !important;
    --select-frame-outset-x: clamp(9px, 2.8vw, 12px) !important;
    --select-frame-outset-y: clamp(17px, 5vw, 20px) !important;
    --select-frame-bleed-x: var(--select-frame-outset-x) !important;
    --select-frame-bleed-y: var(--select-frame-outset-y) !important;
    --select-card-outer-w: calc(var(--select-card-w) + var(--select-frame-outset-x) * 2) !important;
    --select-card-outer-h: calc(var(--select-card-h) + var(--select-frame-outset-y) * 2) !important;
    --select-gap: clamp(8px, 2.6vw, 12px) !important;
    place-items: start center !important;
    padding: clamp(44px, 5.6dvh, 50px) 4px 8px !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    width: min(382px, calc(100vw - 8px)) !important;
    height: min(790px, calc(100dvh - 52px)) !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100dvh - 52px) !important;
    display: grid !important;
    grid-template-rows: 32px minmax(0, auto) !important;
    align-content: start !important;
    justify-items: center !important;
    gap: clamp(7px, 1.3dvh, 10px) !important;
    padding:
      clamp(20px, 3.1dvh, 26px)
      clamp(14px, 4vw, 18px)
      clamp(34px, 4.8dvh, 44px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    display: block !important;
    pointer-events: none !important;
    background:
      url("assets/ui/character-select-mobile-portrait-frame-codex67.png?v=V1.27Beta-mobile-character-card-scale-frame-outside1") center / 100% 100% no-repeat !important;
    opacity: 1 !important;
    filter:
      drop-shadow(0 14px 22px rgba(8, 28, 58, 0.24))
      drop-shadow(0 0 16px rgba(68, 166, 255, 0.2))
      saturate(1.06)
      contrast(1.05) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout::after {
    content: "" !important;
    position: absolute !important;
    inset: 7.4% 4.2% 5.4% !important;
    z-index: -1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 1px solid rgba(176, 215, 246, 0.2) !important;
    background:
      linear-gradient(180deg, rgba(247, 252, 255, 0.14), rgba(214, 238, 255, 0.07)) !important;
    box-shadow:
      inset 0 0 22px rgba(255, 255, 255, 0.18),
      inset 0 0 46px rgba(58, 154, 230, 0.1) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    position: relative !important;
    z-index: 40 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    width: min(314px, 100%) !important;
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 3px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid rgba(210, 190, 130, 0.58) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(216, 237, 252, 0.6)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(81, 125, 164, 0.22),
      0 6px 14px rgba(20, 55, 92, 0.14) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(31, 58, 89, 0.72) !important;
    -webkit-text-fill-color: rgba(31, 58, 89, 0.72) !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button + button {
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs > button.selected {
    border: 0 !important;
    background:
      linear-gradient(180deg, rgba(255, 250, 219, 0.98), rgba(227, 196, 112, 0.86) 54%, rgba(112, 168, 213, 0.62) 100%) !important;
    box-shadow:
      inset 0 0 0 1px rgba(244, 223, 156, 0.94),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(87, 116, 145, 0.24) !important;
    color: #17304f !important;
    -webkit-text-fill-color: #17304f !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    position: relative !important;
    z-index: 5 !important;
    width: min(348px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 14px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 14px) !important;
    margin: 0 auto !important;
    padding: 0 0 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    display: grid !important;
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    justify-content: center !important;
    align-content: start !important;
    gap: var(--select-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 14px !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option {
    --card-name-bg: rgba(255, 249, 225, 0.91);
    --card-name-line: rgba(218, 176, 78, 0.62);
    --card-name-ink: #452d08;
    --card-title-ink: #7b5b12;
    width: var(--select-card-outer-w) !important;
    height: var(--select-card-outer-h) !important;
    min-width: var(--select-card-outer-w) !important;
    min-height: var(--select-card-outer-h) !important;
    padding: var(--select-frame-outset-y) var(--select-frame-outset-x) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-select-faction="neutral"] {
    --card-name-bg: rgba(222, 250, 255, 0.92);
    --card-name-line: rgba(72, 197, 226, 0.64);
    --card-name-ink: #113b52;
    --card-title-ink: #267f98;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-select-faction="villain"] {
    --card-name-bg: rgba(39, 24, 38, 0.92);
    --card-name-line: rgba(207, 66, 106, 0.72);
    --card-name-ink: #fff0fa;
    --card-title-ink: #f2a7c8;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    width: var(--select-card-w) !important;
    height: var(--select-card-h) !important;
    min-width: var(--select-card-w) !important;
    min-height: var(--select-card-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow:
      0 10px 18px rgba(12, 38, 70, 0.16),
      0 0 10px rgba(94, 183, 255, 0.12) !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 5px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 242, 252, 0.94)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(150, 185, 213, 0.18),
      inset 0 0 18px rgba(255, 255, 255, 0.38) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .mini-art.mini-art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 5px !important;
    background:
      var(--character-art, none) center var(--portrait-y, 14%) / cover no-repeat,
      linear-gradient(180deg, #eef7ff, #b7d1e7) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::before {
    content: "" !important;
    position: absolute !important;
    inset:
      calc(var(--select-frame-outset-y) * -1)
      calc(var(--select-frame-outset-x) * -1) !important;
    z-index: 30 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-card-scale-frame-outside1") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription {
    position: absolute !important;
    left: 8.8% !important;
    right: 8.8% !important;
    bottom: 20.6% !important;
    z-index: 32 !important;
    display: grid !important;
    place-items: center !important;
    gap: 1px !important;
    min-height: clamp(34px, 4.4dvh, 40px) !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border: 1px solid var(--card-name-line) !important;
    border-radius: 7px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.08)),
      var(--card-name-bg) !important;
    box-shadow:
      0 7px 16px rgba(5, 16, 28, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
    color: var(--card-name-ink) !important;
    -webkit-text-fill-color: var(--card-name-ink) !important;
    text-align: center !important;
    text-shadow: none !important;
    pointer-events: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription small,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription strong {
    position: static !important;
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription small {
    color: var(--card-title-ink) !important;
    -webkit-text-fill-color: var(--card-title-ink) !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    opacity: 0.92 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription strong {
    color: var(--card-name-ink) !important;
    -webkit-text-fill-color: var(--card-name-ink) !important;
    font-size: clamp(14px, 3.7vw, 17px) !important;
    font-weight: 950 !important;
    line-height: 1.08 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > em {
    position: absolute !important;
    left: 8.8% !important;
    right: 8.8% !important;
    bottom: 6.2% !important;
    z-index: 32 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .skill-tip:not(.mode-tip),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .skill-tip:not(.mode-tip) .skill-inline-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(133, 185, 221, 0.58) !important;
    border-radius: 7px !important;
    background: rgba(235, 248, 255, 0.9) !important;
    box-shadow: 0 5px 12px rgba(7, 22, 35, 0.12) !important;
    color: #17344e !important;
    -webkit-text-fill-color: #17344e !important;
    font-size: clamp(9px, 2.5vw, 11px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .mode-tip {
    flex: 0 0 auto !important;
    max-width: 42% !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    border: 1px solid rgba(133, 185, 221, 0.58) !important;
    border-radius: 7px !important;
    background: rgba(235, 248, 255, 0.9) !important;
    color: #17344e !important;
    -webkit-text-fill-color: #17344e !important;
    font-size: clamp(8px, 2.2vw, 10px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    text-shadow: none !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-frame-topmost1: draw the ornate frame on the outer card button above every inner layer. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 80 !important;
    display: block !important;
    pointer-events: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-frame-topmost1") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span {
    z-index: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::before {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > em {
    z-index: 20 !important;
  }
}

/* TRUE REAL EOF V1.27Beta-character-codex-white-thumb1: restore white character intro thumbnails, title/name hierarchy, and compact skill badges. */
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-box {
  width: min(1180px, calc(100vw - 28px)) !important;
  max-height: min(88dvh, 840px) !important;
  border: 1px solid rgba(212, 185, 112, 0.48) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(237, 246, 252, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(255, 235, 168, 0.28), transparent 40%) !important;
  color: #17324b !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 22px 60px rgba(4, 15, 30, 0.34) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .rules-head h2,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .opportunity-library-note {
  color: #17324b !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-grid {
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)) !important;
  gap: clamp(12px, 1.45vw, 18px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-card {
  --character-profession-color: #d7b66c;
  --character-role-color: #7db6e8;
  position: relative !important;
  isolation: isolate !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--character-profession-color) 62%, rgba(177, 145, 73, 0.5)) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 246, 253, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    0 14px 30px rgba(15, 43, 72, 0.18) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 0 3px rgba(255, 249, 220, 0.24) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent, var(--character-profession-color), var(--character-role-color), transparent) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-card[data-class-key="priest"] {
  --character-profession-color: #8793aa !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-art {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  border-bottom: 1px solid rgba(186, 155, 84, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 58%, rgba(255, 255, 255, 0.4) 100%),
    var(--character-art, none) center 14% / cover no-repeat,
    linear-gradient(180deg, #eef8ff, #d4e7f3) !important;
  box-shadow:
    inset 0 -18px 28px rgba(255, 255, 255, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy {
  position: relative !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 7px !important;
  min-width: 0 !important;
  padding: 10px 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 247, 253, 0.94)) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy em,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy strong {
  position: static !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy em {
  width: max-content !important;
  max-width: 100% !important;
  padding: 2px 7px !important;
  border-left: 3px solid var(--character-profession-color) !important;
  border-radius: 5px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--character-profession-color) 20%, rgba(255, 255, 255, 0.86)), rgba(255, 255, 255, 0.34)) !important;
  color: color-mix(in srgb, var(--character-profession-color) 72%, #4a3415) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy strong {
  color: #17324b !important;
  -webkit-text-fill-color: #17324b !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill.passive-skill-label {
  box-sizing: border-box !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(197, 166, 91, 0.48) !important;
  border-left: 3px solid var(--character-role-color) !important;
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 246, 253, 0.9) 58%, rgba(226, 234, 226, 0.82)) !important;
  color: #17324b !important;
  -webkit-text-fill-color: #17324b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 5px 11px rgba(13, 38, 65, 0.12) !important;
  overflow: hidden !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill::before,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill::after,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-text::before,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-text::after,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon::before,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon,
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon.passive-skill-icon {
  flex: 0 0 22px !important;
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid rgba(207, 176, 96, 0.68) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.94), rgba(245, 229, 172, 0.66) 44%, rgba(172, 204, 229, 0.48) 100%) !important;
  object-fit: contain !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 5px rgba(20, 48, 78, 0.18) !important;
  filter: saturate(1.02) contrast(0.98) !important;
  opacity: 1 !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-text {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy small {
  display: -webkit-box !important;
  margin: 0 !important;
  color: rgba(45, 70, 91, 0.84) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  line-height: 1.42 !important;
  text-shadow: none !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
}

@media (max-width: 760px) {
  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-box {
    width: min(420px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 18px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy {
    padding: 8px !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy em {
    font-size: 10px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy strong {
    font-size: clamp(15px, 4.5vw, 18px) !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill,
  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill.passive-skill-label {
    min-height: 28px !important;
    padding: 4px 6px !important;
    gap: 5px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon,
  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-skill .skill-inline-icon.passive-skill-icon {
    flex-basis: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-copy small {
    -webkit-line-clamp: 3 !important;
  }
}

@media (max-width: 420px) {
  html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* TRUE REAL EOF V1.27Beta-mobile-character-frame-real-dom-top1: a real final DOM node owns the topmost card frame. */
@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span::before {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span {
    position: relative !important;
    z-index: 1 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option .card-outer-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      url("assets/ui/character-card-whitegold-frame-cutout-v1.png?v=V1.27Beta-mobile-character-frame-real-dom-top1") center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    filter:
      drop-shadow(0 3px 7px rgba(13, 35, 62, 0.18))
      drop-shadow(0 0 7px rgba(94, 183, 255, 0.14)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > em {
    z-index: 20 !important;
  }
}

/* TRUE REAL EOF V1.27Beta-desire-blood-dk3: Desire hybrid frame and passive-tag skill label. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] > span::before {
    background:
      url("assets/ui/character-card-desire-luminary-neutral-frame-v1.png?v=V1.27Beta-desire-blood-dk2") center / 100% 100% no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option[data-character="Desire"] .card-outer-frame {
    display: none !important;
  }
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option[data-character="Desire"] .card-outer-frame {
    background:
      url("assets/ui/character-card-desire-luminary-neutral-frame-v1.png?v=V1.27Beta-desire-blood-dk2") center / 100% 100% no-repeat !important;
  }
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option.no-skill > span > em,
html body:not(.maintenance-mode) #appRoot#appRoot.app #characterPreview #previewSkill[hidden],
html body:not(.maintenance-mode) #battleCharacterDialog #battlePreviewSkill[hidden],
html body:not(.maintenance-mode) #battle#battle.battle:not([hidden]) .role-card > span[hidden],
html body:not(.maintenance-mode) #characterCodexDialog#characterCodexDialog.character-codex-dialog .character-codex-card.no-skill .character-codex-skill {
  display: none !important;
}

html body:not(.maintenance-mode) :is(.has-passive-skill-tag) {
  flex-wrap: wrap !important;
  row-gap: 2px !important;
}

html body:not(.maintenance-mode) :is(.has-passive-skill-tag) .skill-inline-passive-tag {
  flex: 0 0 100% !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 1px !important;
  color: #8a1f2d !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
}

/* TRUE REAL EOF V1.27Beta-faction-distribution1: desktop faction pages fit ten cards in two rows. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
    grid-template-columns: repeat(5, var(--select-card-outer-w)) !important;
  }
}

/* TRUE REAL EOF V1.27Beta-character-select-scaleup1: larger selector cards, higher faction bar, two-row viewport. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select {
  --select-gap: clamp(14px, 1.35vw, 18px) !important;
  --select-card-outer-h: clamp(266px, 39dvh, 288px) !important;
  --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout {
  width: min(1120px, calc(100vw - 44px)) !important;
  height: min(672px, calc(100dvh - 64px)) !important;
  max-width: calc(100vw - 44px) !important;
  max-height: calc(100dvh - 64px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(6px, 1dvh, 9px) !important;
  padding:
    clamp(10px, 2dvh, 16px)
    clamp(48px, 5vw, 70px)
    clamp(18px, 3dvh, 28px) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after {
  inset: 8.5% 6.2% 5.8% !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs {
  width: min(620px, 100%) !important;
  height: clamp(32px, 4.8dvh, 36px) !important;
  margin: 0 auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll {
  width: 100% !important;
  height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 10px) !important;
  max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 10px) !important;
  padding: 0 0 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options {
  grid-template-columns: repeat(5, var(--select-card-outer-w)) !important;
  grid-auto-rows: var(--select-card-outer-h) !important;
  gap: var(--select-gap) !important;
  padding: 0 0 10px !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span {
  width: var(--select-card-outer-w) !important;
  height: var(--select-card-outer-h) !important;
  min-width: var(--select-card-outer-w) !important;
  min-height: var(--select-card-outer-h) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option .mini-art.mini-art,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span::after {
  inset: 7.3% 7.1% 7.5% !important;
}

@media (max-width: 899px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(8px, 1vw, 10px) !important;
    --select-card-outer-h: clamp(262px, 42dvh, 306px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
    padding: 44px 4px 4px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    width: min(390px, calc(100vw - 6px)) !important;
    height: min(798px, calc(100dvh - 48px)) !important;
    max-width: calc(100vw - 6px) !important;
    max-height: calc(100dvh - 48px) !important;
    grid-template-rows: 32px minmax(0, auto) !important;
    gap: 0 !important;
    padding:
      2px
      clamp(12px, 4vw, 18px)
      clamp(18px, 3.2dvh, 24px) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-select-layout.character-select-layout::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout::after {
    inset: 5.2% 4.4% 3.8% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-faction-tabs,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-faction-tabs {
    width: min(330px, 100%) !important;
    height: 32px !important;
    margin: 0 auto !important;
    gap: 6px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: min(366px, 100%) !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px) !important;
    max-height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px) !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(2, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    gap: var(--select-gap) !important;
    padding: 0 0 8px !important;
  }
}

/* TRUE REAL EOF V1.27Beta-character-select-scaleup3: prevent hidden battle side panel from stealing selector space. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel[hidden],
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #sidePanel .battle-status {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* TRUE REAL EOF V1.27Beta-character-select-name-side1: selector thumbnails use the old right-side colored-title layout. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription {
  position: absolute !important;
  left: 45.5% !important;
  right: 10.5% !important;
  top: auto !important;
  bottom: 18.2% !important;
  z-index: 42 !important;
  display: grid !important;
  justify-items: end !important;
  align-content: end !important;
  place-items: initial !important;
  gap: 2px !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: right !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.94),
    0 0 10px rgba(0, 0, 0, 0.42) !important;
  pointer-events: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription small,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--character-title-color, #f2c15a) !important;
  -webkit-text-fill-color: var(--character-title-color, #f2c15a) !important;
  font-size: clamp(8px, 0.72vw, 10px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 0.94 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.92),
    0 0 8px color-mix(in srgb, var(--character-title-color, #f2c15a) 28%, transparent) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option.character-option > span > .card-inscription.card-inscription strong,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select .character-option.character-option > span > .card-inscription.card-inscription strong {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #fff7dc !important;
  -webkit-text-fill-color: #fff7dc !important;
  font-size: clamp(15px, 1.08vw, 19px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.42) !important;
}

/* TRUE REAL EOF V1.27Beta-mobile-profession-bg-left2: mobile profession codex art is cropped farther left inside the card frame. */
@media (max-width: 720px) {
  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card {
    --profession-bg-position: 42% top !important;
    --profession-bg-size: 156% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="shaman"] {
    --profession-bg-position: 40% top !important;
    --profession-bg-size: 150% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card .profession-codex-bg {
    background:
      linear-gradient(90deg, rgba(2, 5, 11, 0.72) 0%, rgba(2, 5, 11, 0.38) 45%, rgba(2, 5, 11, 0.08) 100%),
      linear-gradient(180deg, rgba(3, 6, 12, 0), rgba(3, 6, 12, 0.58)),
      var(--profession-bg) var(--profession-bg-position) / var(--profession-bg-size) no-repeat,
      rgba(5, 9, 16, 0.96) !important;
  }
}

/* TRUE REAL EOF V1.28Beta-xiaocai1: keep Xiaocai fel rail visible after mobile lock rules. */
html body:not(.maintenance-mode) #battle.battle:not([hidden]) :is(.fighter, .seat-fighter):has(> .xiaocai-fel-rail) {
  overflow: visible !important;
}

/* TRUE REAL EOF V1.28Beta-profession-desktop-left3: desktop profession codex class backgrounds sit farther left in the card frame. */
@media (min-width: 721px) {
  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card {
    --profession-bg-position: 16% top !important;
    --profession-bg-size: 138% auto !important;
  }

  html body:not(.maintenance-mode) #professionCodexDialog.profession-codex-dialog .profession-codex-card[data-profession="shaman"] {
    --profession-bg-position: 14% top !important;
    --profession-bg-size: 134% auto !important;
  }
}

html body:not(.maintenance-mode) #battle.battle:not([hidden]) .seat-fighter > .xiaocai-fel-rail[data-side="team-left"] {
  left: 3px !important;
  top: 52% !important;
  right: auto !important;
}

/* TRUE REAL EOF V1.28Beta-xiaocai-fel-always1: Xiaocai's fel energy is visible in every blade form. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail.xiaocai-fel-rail {
  z-index: 96 !important;
  width: 30px !important;
  padding: 6px 3px !important;
  border: 1px solid rgba(120, 255, 170, 0.46) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(166, 255, 112, 0.32), transparent 46%),
    linear-gradient(180deg, rgba(6, 22, 20, 0.82), rgba(5, 8, 14, 0.9)) !important;
  box-shadow:
    0 0 18px rgba(87, 255, 104, 0.2),
    inset 0 0 10px rgba(80, 255, 144, 0.12) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-ready="true"] {
  border-color: rgba(178, 255, 105, 0.88) !important;
  color: #f1ff9a !important;
  box-shadow:
    0 0 18px rgba(105, 255, 74, 0.58),
    0 0 34px rgba(79, 200, 255, 0.34),
    inset 0 0 12px rgba(178, 255, 105, 0.22) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-value {
  font-size: 13px !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack i {
  border: 1px solid rgba(188, 255, 162, 0.18) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="void"] .xiaocai-fel-stack i.filled {
  background: linear-gradient(135deg, #77fff4, #7392ff 58%, #c184ff) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="chaos"] .xiaocai-fel-stack i.filled {
  background: linear-gradient(135deg, #7cff52, #47ddff 56%, #b35cff) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .fighter > .xiaocai-fel-rail[data-side^="outer"] {
    right: 4px !important;
    left: auto !important;
    top: 48% !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .opponent > .xiaocai-fel-rail[data-side="outer-left"] {
    left: 4px !important;
    right: auto !important;
  }
}

/* TRUE REAL EOF V1.28Beta-xiaocai-fel-icons1: icon-only Xiaocai fel energy tokens on the character card's right edge. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) :is(.fighter, .seat-fighter):has(> .xiaocai-fel-rail) {
  overflow: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail.xiaocai-fel-rail {
  position: absolute !important;
  z-index: 110 !important;
  top: 50% !important;
  right: -22px !important;
  left: auto !important;
  width: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 2px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-label {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-value {
  display: block !important;
  min-width: 24px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  color: #eaffb6 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow:
    0 0 6px rgba(98, 255, 127, 0.92),
    0 1px 2px rgba(0, 0, 0, 0.95) !important;
  white-space: nowrap !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  justify-items: center !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack i {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/icons/status/xiaocai-fel-empty-v1.png?v=V1.28Beta-xiaocai-fel-icons1") center / contain no-repeat !important;
  box-shadow: none !important;
  opacity: 0.86 !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack i.filled {
  background: url("assets/icons/status/xiaocai-fel-filled-v1.png?v=V1.28Beta-xiaocai-fel-icons1") center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(91, 255, 89, 0.82)) drop-shadow(0 0 7px rgba(63, 226, 255, 0.44)) !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail.xiaocai-fel-rail {
    right: -2px !important;
    left: auto !important;
    width: 18px !important;
    gap: 1px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-value {
    min-width: 18px !important;
    font-size: 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-stack i {
    width: 14px !important;
    height: 14px !important;
  }
}

/* TRUE REAL EOF V1.28Beta-xiaocai-fel-icons2: one shared fel value, form-colored icon slots. Void is purple; chaos is green/cyan. */
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail.xiaocai-fel-rail {
  right: -24px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="chaos"] .xiaocai-fel-stack i,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail:not([data-form]) .xiaocai-fel-stack i {
  background: url("assets/icons/status/xiaocai-fel-chaos-empty-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="chaos"] .xiaocai-fel-stack i.filled,
html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail:not([data-form]) .xiaocai-fel-stack i.filled {
  background: url("assets/icons/status/xiaocai-fel-chaos-filled-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(96, 255, 74, 0.82)) drop-shadow(0 0 7px rgba(63, 226, 255, 0.46)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="void"] .xiaocai-fel-stack i {
  background: url("assets/icons/status/xiaocai-fel-void-empty-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="void"] .xiaocai-fel-stack i.filled {
  background: url("assets/icons/status/xiaocai-fel-void-filled-v2.png?v=V1.28Beta-xiaocai-fel-icons2") center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(184, 74, 255, 0.84)) drop-shadow(0 0 7px rgba(92, 55, 255, 0.44)) !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="extinction"] .xiaocai-fel-stack i {
  background: url("assets/icons/status/xiaocai-fel-empty-v1.png?v=V1.28Beta-xiaocai-fel-icons1") center / contain no-repeat !important;
}

html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail[data-form="extinction"] .xiaocai-fel-stack i.filled {
  background: url("assets/icons/status/xiaocai-fel-filled-v1.png?v=V1.28Beta-xiaocai-fel-icons1") center / contain no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(155, 73, 255, 0.84)) drop-shadow(0 0 7px rgba(91, 255, 89, 0.5)) !important;
}

@media (max-width: 720px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #battle#battle#battle.battle:not([hidden]) .xiaocai-fel-rail.xiaocai-fel-rail {
    right: -14px !important;
  }
}

/* TRUE REAL EOF V1.28Beta-desktop-battle-bgfix1: desktop 1v1 battle uses the real wallpaper art, not the old cloth sketch layer. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode):has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) {
    --battle-wallpaper-fallback: url("assets/ui/battle_backgrounds/battle-wallpaper-mooncourt-v1.png?v=V1.28Beta-desktop-battle-bgfix1") !important;
    --battle-visible-surface: var(--battle-wallpaper-art, var(--battle-wallpaper-fallback)) !important;
    --battle-final-surface: var(--battle-visible-surface) !important;
    --battle-stage-art: var(--battle-visible-surface) !important;
    --battle-cloth-art: var(--battle-visible-surface) !important;
  }

  html body:not(.maintenance-mode):has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) {
    background:
      linear-gradient(90deg, rgba(9, 14, 20, 0.12), transparent 16%, transparent 84%, rgba(9, 14, 20, 0.14)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(5, 9, 14, 0.08)),
      var(--battle-final-surface) center center / cover no-repeat fixed,
      #dce8ea !important;
    background-image:
      linear-gradient(90deg, rgba(9, 14, 20, 0.12), transparent 16%, transparent 84%, rgba(9, 14, 20, 0.14)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(5, 9, 14, 0.08)),
      var(--battle-final-surface) !important;
    background-size: auto, auto, cover !important;
    background-position: center center, center center, center center !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])::after,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters::before,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighters::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* TRUE REAL EOF V1.28Beta-desktop-battle-cleanframe1: rebuild desktop 1v1 frames and skill plates without nested plastic shells. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])) {
    --battle-log-width-final: clamp(176px, 13.5vw, 236px) !important;
    --battle-log-top-final: clamp(48px, 7vh, 72px) !important;
    --battle-stage-edge-final: clamp(8px, 0.9vw, 16px) !important;
    --fighter-panel-w: clamp(86px, 7.4vw, 128px) !important;
    --fighter-card-w: clamp(215px, 23vw, 330px) !important;
    --fighter-inner-gap: clamp(8px, 0.8vw, 12px) !important;
    --fighter-gap: clamp(8px, 1.1vw, 22px) !important;
    --versus-size: clamp(42px, 4vw, 58px) !important;
    --combatant-pad: 0px !important;
    --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app),
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) > .arena {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) .topbar {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    position: fixed !important;
    inset: 0 calc(var(--battle-log-width-final) + var(--battle-stage-edge-final)) 0 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .fighters.fighters {
    position: absolute !important;
    z-index: 20 !important;
    inset: var(--battle-stage-edge-final) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns:
      minmax(0, var(--combatant-w))
      var(--versus-size)
      minmax(0, var(--combatant-w)) !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: var(--fighter-gap) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .combatant.combatant {
    width: var(--combatant-w) !important;
    max-width: var(--combatant-w) !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    align-items: stretch !important;
    gap: var(--fighter-inner-gap) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .you-combatant.you-combatant {
    grid-template-columns: var(--fighter-panel-w) var(--fighter-card-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) .opponent-combatant.opponent-combatant {
    grid-template-columns: var(--fighter-card-w) var(--fighter-panel-w) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .combatant::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face::after,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel {
    height: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--battle-stage-edge-final) - var(--battle-stage-edge-final)) !important;
    align-self: stretch !important;
    border-radius: 10px !important;
    border: 1px solid rgba(223, 236, 235, 0.34) !important;
    background:
      linear-gradient(180deg, rgba(18, 29, 34, 0.76), rgba(7, 13, 18, 0.78)),
      rgba(9, 15, 20, 0.72) !important;
    box-shadow:
      0 14px 30px rgba(6, 14, 18, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(6px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter.fighter {
    width: var(--fighter-card-w) !important;
    min-width: var(--fighter-card-w) !important;
    max-width: var(--fighter-card-w) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 7px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel {
    width: var(--fighter-panel-w) !important;
    min-width: var(--fighter-panel-w) !important;
    max-width: var(--fighter-panel-w) !important;
    padding: clamp(7px, 0.68vw, 10px) !important;
    gap: clamp(6px, 0.62vw, 9px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-head.fighter-head {
    position: static !important;
    min-height: clamp(30px, 4vh, 42px) !important;
    margin: 0 0 7px !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: rgba(4, 10, 14, 0.46) !important;
    box-shadow: none !important;
    color: #eef8f6 !important;
    -webkit-text-fill-color: #eef8f6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.58) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-head :is(strong, span, .fighter-side) {
    color: #eef8f6 !important;
    -webkit-text-fill-color: #eef8f6 !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .character-face.character-face {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar.avatar {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    background-size: contain, cover, cover !important;
    background-position: center bottom, center center, center center !important;
    background-repeat: no-repeat !important;
    box-shadow:
      inset 0 -80px 70px rgba(0, 0, 0, 0.36),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .avatar-right.avatar-right {
    transform: scaleX(-1) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 5 !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: 76px !important;
    margin: 0 !important;
    padding: 8px 9px !important;
    display: grid !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(228, 238, 236, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(10, 18, 22, 0.84), rgba(5, 10, 14, 0.76)) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(6px) saturate(1.02) !important;
    -webkit-backdrop-filter: blur(6px) saturate(1.02) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card b {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    color: #eef8f6 !important;
    -webkit-text-fill-color: #eef8f6 !important;
    font-size: clamp(11px, 0.9vw, 13px) !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card > .skill-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-label.skill-label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 28px !important;
    height: auto !important;
    padding: 6px 9px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(238, 248, 245, 0.28) !important;
    background: linear-gradient(180deg, rgba(246, 252, 248, 0.18), rgba(118, 156, 154, 0.12)) !important;
    color: #f5fbf8 !important;
    -webkit-text-fill-color: #f5fbf8 !important;
    font-size: clamp(11px, 0.82vw, 13px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-inline-icon.skill-inline-icon {
    width: 15px !important;
    min-width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .fighter-panel.fighter-panel :is(.status-bar, .equipment-slots, .meter-row, .energy, .fatigue, .laziness, .choice) {
    border-radius: 7px !important;
    border: 1px solid rgba(225, 238, 238, 0.22) !important;
    background: rgba(4, 10, 14, 0.42) !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) {
    position: fixed !important;
    top: var(--battle-log-top-final) !important;
    right: var(--battle-stage-edge-final) !important;
    bottom: var(--battle-stage-edge-final) !important;
    left: auto !important;
    width: var(--battle-log-width-final) !important;
    height: auto !important;
    padding: clamp(8px, 0.76vw, 11px) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    border-radius: 12px !important;
    z-index: 760 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .rules {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) > section:first-child {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) h2 {
    margin: 8px 0 !important;
    font-size: clamp(16px, 1.15vw, 20px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status span,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .battle-status strong,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log article > strong,
  html body:not(.maintenance-mode).battle-controls-active #sidePanel#sidePanel.side:not([hidden]) .log small {
    font-size: clamp(11px, 0.82vw, 14px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.opportunity-library-action.library-action {
    background-image:
      linear-gradient(180deg, transparent 46%, rgba(3, 4, 8, 0.72)),
      url("assets/ui/battle-library-opportunity-icon-crop-v1.png?v=V1.28Beta-desktop-battle-cleanframe1") !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) > .battle-libraries.battle-libraries > button.artifact-library-action.library-action {
    background-image:
      linear-gradient(180deg, transparent 46%, rgba(3, 4, 8, 0.72)),
      url("assets/ui/battle-library-artifact-icon-crop-v1.png?v=V1.28Beta-desktop-battle-cleanframe1") !important;
  }
}

@media (min-width: 1280px) {
  html body:not(.maintenance-mode).battle-controls-active:has(#appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden])) {
    --battle-log-width-final: clamp(190px, 13.2vw, 246px) !important;
    --fighter-panel-w: clamp(112px, 8vw, 152px) !important;
    --fighter-card-w: clamp(340px, 27vw, 500px) !important;
    --fighter-inner-gap: clamp(10px, 0.85vw, 15px) !important;
    --fighter-gap: clamp(16px, 1.6vw, 34px) !important;
    --versus-size: clamp(54px, 4.4vw, 72px) !important;
    --combatant-w: calc(var(--fighter-panel-w) + var(--fighter-card-w) + var(--fighter-inner-gap)) !important;
  }
}

/* TRUE REAL EOF V1.28Beta-desktop-battle-skillflat1: desktop 1v1 skills are one flat readable plate, not nested rings. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card {
    left: clamp(10px, 0.9vw, 16px) !important;
    right: clamp(10px, 0.9vw, 16px) !important;
    bottom: clamp(10px, 1vw, 18px) !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card > b {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon, .skill-inline-text, .inline-skill-cooldown)::before,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card :is(.role-card, .team-skill-label, .skill-label, .inline-skill-action, .inline-skill-name, .passive-skill-label, .skill-inline-icon, .skill-inline-text, .inline-skill-cooldown)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card > .skill-label,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-label.skill-label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: 1px solid rgba(236, 248, 244, 0.32) !important;
    background:
      linear-gradient(180deg, rgba(18, 30, 36, 0.86), rgba(6, 12, 18, 0.82)) !important;
    box-shadow:
      0 10px 18px rgba(0, 0, 0, 0.34),
      inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    color: #f4faf7 !important;
    -webkit-text-fill-color: #f4faf7 !important;
    font-size: clamp(12px, 0.86vw, 14px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78) !important;
    outline: 0 !important;
    filter: none !important;
    transform: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card :is(.inline-skill-action.inline-skill-action, .inline-skill-name.inline-skill-name, .passive-skill-label.passive-skill-label):disabled {
    opacity: 0.66 !important;
    filter: saturate(0.72) brightness(0.84) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-inline-icon.skill-inline-icon,
  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-inline-icon.passive-skill-icon {
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .skill-inline-text.skill-inline-text {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body:not(.maintenance-mode).battle-controls-active #appRoot#appRoot#appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app) #battle#battle#battle.battle:not([hidden]) .role-card.role-card .inline-skill-cooldown.inline-skill-cooldown {
    min-height: 26px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255, 206, 164, 0.38) !important;
    background: rgba(52, 20, 12, 0.72) !important;
    color: #ffe4bc !important;
    -webkit-text-fill-color: #ffe4bc !important;
    font-size: clamp(10px, 0.72vw, 12px) !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.74) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
}

/* TRUE REAL EOF V1.28Beta-character-select-lift2: bind desktop selector cards to the upper arena. */
@media (min-width: 900px) {
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]),
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) {
    --select-gap: clamp(10px, 1.25vh, 14px) !important;
    --select-card-outer-h: clamp(228px, 32dvh, 252px) !important;
    --select-card-outer-w: calc(var(--select-card-outer-h) * 941 / 1672) !important;
    --select-card-h: var(--select-card-outer-h) !important;
    --select-card-w: var(--select-card-outer-w) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-select-layout.character-select-layout {
    position: fixed !important;
    left: 50vw !important;
    top: clamp(96px, 13.5dvh, 110px) !important;
    width: min(1040px, calc(100vw - 44px)) !important;
    height: min(592px, calc(100dvh - 124px)) !important;
    max-height: calc(100dvh - 124px) !important;
    padding: clamp(38px, 5.6dvh, 48px) clamp(42px, 4.6vw, 64px) clamp(8px, 1.4dvh, 12px) !important;
    display: block !important;
    overflow: visible !important;
    transform: translateX(-50%) !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-scroll {
    width: 100% !important;
    height: calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px) !important;
    max-height: min(calc((var(--select-card-outer-h) * 2) + var(--select-gap) + 8px), calc(100dvh - 178px)) !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-options {
    grid-template-columns: repeat(4, var(--select-card-outer-w)) !important;
    grid-auto-rows: var(--select-card-outer-h) !important;
    align-content: start !important;
    gap: var(--select-gap) !important;
    padding: 0 0 8px !important;
  }

  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app.character-select-app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option[data-character="Lollipopz"] .mini-art,
  html body:not(.maintenance-mode) #appRoot#appRoot#appRoot.app #characterSelect#characterSelect#characterSelect.character-select:not([hidden]) .character-option[data-character="Lollipopz"] .mini-art {
    --art-size: auto 126% !important;
    --art-position: center 100% !important;
    background-size: var(--art-size), cover !important;
    background-position: var(--art-position), center center !important;
  }
}