/*
 * V1.328Beta — Luminary UI design contract.
 *
 * One material language for the identity ritual, practice-mode chooser and
 * battle command rail. Phase/mode colours remain semantic accents; geometry,
 * typography, surfaces and interaction states stay consistent.
 */

html body:not(.maintenance-mode) {
  --lfd-ui-bg: #06111f;
  --lfd-ui-bg-deep: #030914;
  --lfd-ui-panel: rgba(8, 22, 38, 0.94);
  --lfd-ui-panel-soft: rgba(14, 34, 54, 0.84);
  --lfd-ui-panel-hover: rgba(20, 45, 68, 0.94);
  --lfd-ui-border: rgba(157, 205, 232, 0.42);
  --lfd-ui-border-strong: rgba(215, 234, 246, 0.66);
  --lfd-ui-gold: #e8ca82;
  --lfd-ui-text: #f4f9fc;
  --lfd-ui-text-muted: rgba(215, 232, 243, 0.76);
  --lfd-ui-radius-shell: 20px;
  --lfd-ui-radius-panel: 14px;
  --lfd-ui-radius-control: 11px;
  --lfd-ui-shadow-shell:
    0 28px 72px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --lfd-ui-shadow-panel:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --lfd-ui-focus: 0 0 0 3px rgba(103, 207, 244, 0.38), 0 0 0 6px rgba(232, 202, 130, 0.2);
  --lfd-ui-motion: 150ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

/* Identity selection: one dark-fantasy shell with faction colour as accent. */
html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase] {
  --lfd-ui-accent: #8fdcf4;
  --lfd-ui-accent-rgb: 143, 220, 244;
  --lfd-ui-scene-art: none;
  border: 1px solid var(--lfd-ui-border-strong) !important;
  border-radius: var(--lfd-ui-radius-shell) !important;
  color: var(--lfd-ui-text) !important;
  background:
    linear-gradient(180deg, rgba(3, 9, 20, 0.62), rgba(3, 9, 20, 0.94)),
    radial-gradient(circle at 18% 8%, rgba(var(--lfd-ui-accent-rgb), 0.18), transparent 34rem),
    radial-gradient(circle at 84% 86%, rgba(232, 202, 130, 0.1), transparent 30rem),
    var(--lfd-ui-scene-art) center 44% / cover no-repeat,
    var(--lfd-ui-bg-deep) !important;
  box-shadow: var(--lfd-ui-shadow-shell), 0 0 34px rgba(var(--lfd-ui-accent-rgb), 0.12) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase="justice_select"] {
  --lfd-ui-accent: #8fdcf4;
  --lfd-ui-accent-rgb: 143, 220, 244;
  --lfd-ui-scene-art: var(--identity-select-justice-bg-art);
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase="evil_select"] {
  --lfd-ui-accent: #e58a9c;
  --lfd-ui-accent-rgb: 229, 138, 156;
  --lfd-ui-scene-art: var(--identity-select-chaos-bg-art);
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]::before,
html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]::after {
  content: none !important;
  display: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head {
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 2vw, 28px) !important;
  border: 1px solid color-mix(in srgb, var(--lfd-ui-accent) 45%, transparent) !important;
  border-radius: var(--lfd-ui-radius-panel) !important;
  color: var(--lfd-ui-text) !important;
  background:
    linear-gradient(100deg, rgba(var(--lfd-ui-accent-rgb), 0.14), transparent 46%),
    linear-gradient(180deg, rgba(18, 42, 64, 0.94), rgba(7, 20, 36, 0.96)) !important;
  box-shadow: var(--lfd-ui-shadow-panel) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head > span,
html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-copy > span {
  color: color-mix(in srgb, var(--lfd-ui-accent) 82%, #ffffff 18%) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head > strong {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(30px, 3.2vw, 54px) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42), 0 0 18px rgba(var(--lfd-ui-accent-rgb), 0.16) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head > small,
html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-action-panel > p,
html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-copy > p {
  color: var(--lfd-ui-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-display.identity-card-display,
html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-action-panel.identity-action-panel {
  border: 1px solid var(--lfd-ui-border) !important;
  border-radius: var(--lfd-ui-radius-panel) !important;
  background:
    linear-gradient(135deg, rgba(var(--lfd-ui-accent-rgb), 0.08), transparent 44%),
    linear-gradient(180deg, var(--lfd-ui-panel-soft), var(--lfd-ui-panel)) !important;
  box-shadow: var(--lfd-ui-shadow-panel) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-copy {
  border-top: 1px solid rgba(var(--lfd-ui-accent-rgb), 0.2) !important;
  background: linear-gradient(180deg, rgba(8, 22, 38, 0.72), rgba(5, 15, 28, 0.96)) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-copy > strong,
html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-action-panel > strong {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option {
  border: 1px solid var(--lfd-ui-border) !important;
  border-radius: var(--lfd-ui-radius-control) !important;
  color: var(--lfd-ui-text) !important;
  background:
    linear-gradient(105deg, rgba(var(--lfd-ui-accent-rgb), 0.1), transparent 48%),
    linear-gradient(180deg, rgba(19, 43, 64, 0.9), rgba(7, 20, 36, 0.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important;
  transition: transform var(--lfd-ui-motion), border-color var(--lfd-ui-motion), background-color var(--lfd-ui-motion), filter var(--lfd-ui-motion) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option > i {
  border: 1px solid rgba(var(--lfd-ui-accent-rgb), 0.48) !important;
  background:
    var(--identity-option-icon) center / cover no-repeat,
    radial-gradient(circle, rgba(var(--lfd-ui-accent-rgb), 0.2), rgba(4, 12, 23, 0.96) 72%) !important;
  box-shadow: inset 0 0 8px rgba(var(--lfd-ui-accent-rgb), 0.12), 0 0 12px rgba(var(--lfd-ui-accent-rgb), 0.12) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option > strong {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option > small {
  color: var(--lfd-ui-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option:hover:not(:disabled),
html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option:focus-visible,
html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]:not([data-selection-commit="identity"])
  .identity-option.identity-option.selected {
  border-color: color-mix(in srgb, var(--lfd-ui-accent) 82%, #ffffff 18%) !important;
  background:
    linear-gradient(105deg, rgba(var(--lfd-ui-accent-rgb), 0.22), transparent 52%),
    linear-gradient(180deg, rgba(24, 53, 78, 0.96), rgba(7, 22, 40, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(var(--lfd-ui-accent-rgb), 0.12),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 20px rgba(var(--lfd-ui-accent-rgb), 0.15) !important;
  filter: brightness(1.06) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option:hover:not(:disabled) {
  transform: translateY(-2px) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option:focus-visible {
  outline: none !important;
  box-shadow: var(--lfd-ui-focus) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option:disabled {
  opacity: 0.54 !important;
  filter: saturate(0.5) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase][data-selection-commit="identity"]
  .identity-option.identity-option.selected {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--lfd-ui-accent) 86%, #ffffff 14%) !important;
  filter: saturate(1.04) brightness(1.03) !important;
  box-shadow: var(--lfd-ui-focus), 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-option.identity-option.selected:focus-visible {
  outline: none !important;
  box-shadow: var(--lfd-ui-focus), 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-confirm.identity-confirm {
  width: 100% !important;
  max-width: 560px !important;
  min-height: 50px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  justify-self: center !important;
  padding: 12px 22px !important;
  border: 1px solid color-mix(in srgb, var(--lfd-ui-accent) 68%, #ffffff 12%) !important;
  border-radius: var(--lfd-ui-radius-control) !important;
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
  background:
    linear-gradient(100deg, rgba(var(--lfd-ui-accent-rgb), 0.24), transparent 50%),
    linear-gradient(180deg, rgba(27, 58, 84, 0.98), rgba(8, 22, 39, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(var(--lfd-ui-accent-rgb), 0.12) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.72) !important;
  transition: transform var(--lfd-ui-motion), filter var(--lfd-ui-motion), border-color var(--lfd-ui-motion) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-confirm.identity-confirm:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter: brightness(1.08) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-confirm.identity-confirm:focus-visible {
  outline: none !important;
  box-shadow: var(--lfd-ui-focus) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-confirm.identity-confirm:disabled:not([data-selection-pending="true"]) {
  border-color: rgba(157, 185, 202, 0.22) !important;
  color: rgba(214, 228, 238, 0.46) !important;
  background: linear-gradient(180deg, rgba(24, 38, 51, 0.88), rgba(9, 18, 29, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  opacity: 0.72 !important;
  filter: saturate(0.45) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .identity-confirm.identity-confirm[data-selection-pending="true"] {
  cursor: wait !important;
  opacity: 1 !important;
  filter: saturate(0.9) brightness(1.02) !important;
  box-shadow: var(--lfd-ui-focus), 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
  .selection-commit-announcer.selection-commit-announcer {
  border: 1px solid color-mix(in srgb, var(--lfd-ui-accent) 58%, transparent) !important;
  border-radius: var(--lfd-ui-radius-control) !important;
  color: var(--lfd-ui-text) !important;
  background: rgba(6, 20, 34, 0.94) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), 0 0 16px rgba(var(--lfd-ui-accent-rgb), 0.14) !important;
}

/* Practice selection uses the exact same shell/control grammar. */
html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog.practice-mode-dialog {
  --lfd-ui-accent: #8fdcf4;
  --lfd-ui-accent-rgb: 143, 220, 244;
  color: var(--lfd-ui-text) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(var(--lfd-ui-accent-rgb), 0.16), transparent 38%),
    linear-gradient(180deg, rgba(2, 8, 18, 0.78), rgba(2, 7, 15, 0.94)) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-shell {
  border: 1px solid var(--lfd-ui-border-strong) !important;
  border-radius: var(--lfd-ui-radius-shell) !important;
  color: var(--lfd-ui-text) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(var(--lfd-ui-accent-rgb), 0.14), transparent 34rem),
    radial-gradient(circle at 88% 100%, rgba(232, 202, 130, 0.09), transparent 30rem),
    linear-gradient(90deg, rgba(4, 15, 29, 0.98), rgba(6, 24, 42, 0.9) 48%, rgba(4, 15, 29, 0.76)),
    url("assets/ui/lobby-bot-practice-solid-fast.webp?v=V1.325Beta-practice-room-recovery1") center / cover no-repeat !important;
  box-shadow: var(--lfd-ui-shadow-shell), 0 0 34px rgba(var(--lfd-ui-accent-rgb), 0.1) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-kicker {
  color: var(--lfd-ui-gold) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-shell > h2 {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42), 0 0 18px rgba(var(--lfd-ui-accent-rgb), 0.14) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-shell > p {
  color: var(--lfd-ui-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-close {
  border: 1px solid var(--lfd-ui-border) !important;
  color: var(--lfd-ui-text) !important;
  background: rgba(6, 19, 34, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option {
  --lfd-option-accent: #8fdcf4;
  --lfd-option-accent-rgb: 143, 220, 244;
  border: 1px solid var(--lfd-ui-border) !important;
  border-radius: var(--lfd-ui-radius-panel) !important;
  color: var(--lfd-ui-text) !important;
  background:
    linear-gradient(110deg, rgba(var(--lfd-option-accent-rgb), 0.14), transparent 52%),
    linear-gradient(180deg, rgba(2, 9, 20, 0.04) 18%, rgba(3, 12, 25, 0.54) 58%, rgba(3, 10, 21, 0.97)),
    var(--practice-card-art) 64% center / cover no-repeat !important;
  box-shadow: var(--lfd-ui-shadow-panel) !important;
  transition: transform var(--lfd-ui-motion), border-color var(--lfd-ui-motion), filter var(--lfd-ui-motion) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option[data-practice-mode="3v3"] {
  --lfd-option-accent: #e8ca82;
  --lfd-option-accent-rgb: 232, 202, 130;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option[data-practice-mode="identity"] {
  --lfd-option-accent: #e58a9c;
  --lfd-option-accent-rgb: 229, 138, 156;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option > span {
  color: var(--lfd-option-accent) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 0 16px rgba(var(--lfd-option-accent-rgb), 0.18) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option > strong {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option > small {
  color: var(--lfd-ui-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option:hover:not(:disabled),
html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option:focus-visible {
  border-color: color-mix(in srgb, var(--lfd-option-accent) 82%, #ffffff 18%) !important;
  filter: brightness(1.07) !important;
  transform: translateY(-2px) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog
  :is(.practice-mode-option, .practice-mode-close):focus-visible {
  outline: none !important;
  box-shadow: var(--lfd-ui-focus) !important;
}

html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog
  :is(.practice-mode-option, .practice-mode-close):disabled {
  opacity: 0.56 !important;
  filter: saturate(0.45) !important;
  transform: none !important;
}

/* Battle prompt rail now belongs to the same material system. */
html body:not(.maintenance-mode) #battleCommandState#battleCommandState#battleCommandState.battle-command-state {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--battle-state-color) 46%, var(--lfd-ui-border)) !important;
  border-radius: var(--lfd-ui-radius-panel) !important;
  color: var(--lfd-ui-text) !important;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--battle-state-color) 13%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(16, 38, 59, 0.97), rgba(5, 16, 30, 0.98)) !important;
  box-shadow:
    var(--lfd-ui-shadow-panel),
    0 0 22px color-mix(in srgb, var(--battle-state-color) 12%, transparent) !important;
}

html body:not(.maintenance-mode) #battleCommandState#battleCommandState#battleCommandState
  .battle-command-state-copy > small {
  color: color-mix(in srgb, var(--battle-state-color) 78%, #ffffff 22%) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #battleCommandState#battleCommandState#battleCommandState
  .battle-command-state-copy > strong {
  color: var(--lfd-ui-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #battleCommandState#battleCommandState#battleCommandState > em {
  color: var(--lfd-ui-text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(.maintenance-mode) #battleCommandState#battleCommandState#battleCommandState
  .battle-command-state-emblem {
  border-radius: 8px !important;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--battle-state-color) 22%, transparent), rgba(4, 14, 27, 0.88) 70%) !important;
}

/*
 * Phone normal-duel geometry: the old 36px reservation was smaller than the
 * 58px command rail. Both now share the same variables, so the opponent HP
 * panel cannot begin underneath the rail.
 */
@media (max-width: 720px) {
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    --duel-mobile-command-top: max(6px, env(safe-area-inset-top)) !important;
    --duel-mobile-command-h: 58px !important;
    --duel-mobile-command-gap: 6px !important;
    --duel-mobile-utility-slot-w: 67px !important;
    --duel-mobile-owner-left: calc(var(--duel-mobile-edge) + var(--duel-mobile-utility-slot-w) + 6px) !important;
    --duel-mobile-stage-top: calc(var(--duel-mobile-command-top) + var(--duel-mobile-command-h) + var(--duel-mobile-command-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)
  > #battleCommandState#battleCommandState#battleCommandState.battle-command-state {
    position: absolute !important;
    inset: var(--duel-mobile-command-top) var(--duel-mobile-edge-r) auto var(--duel-mobile-owner-left) !important;
    z-index: 1200 !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--duel-mobile-command-h) !important;
    min-height: var(--duel-mobile-command-h) !important;
    max-height: var(--duel-mobile-command-h) !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    overflow: hidden !important;
  }

  /* Toast and control copy temporarily replace the rail and must stay inside
   * the same reserved slot, including long translated messages. */
  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #toast#toast.toast:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #controlBanner#controlBanner.control-banner:not([hidden]) {
    top: max(6px, env(safe-area-inset-top)) !important;
    bottom: auto !important;
    box-sizing: border-box !important;
    width: min(384px, calc(100vw - 12px)) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    padding: 8px 11px !important;
    overflow: hidden !important;
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-panel) !important;
    color: var(--lfd-ui-text) !important;
    background: linear-gradient(180deg, rgba(16, 38, 59, 0.98), rgba(5, 16, 30, 0.99)) !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #toast#toast.toast:not([hidden]) {
    left: calc(max(6px, env(safe-area-inset-left)) + 73px) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: clamp(11px, 3.2vw, 13px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #controlBanner#controlBanner.control-banner:not([hidden]) :is(span, strong) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #controlBanner#controlBanner.control-banner:not([hidden]) strong {
    color: color-mix(in srgb, var(--battle-state-color, #8fdcf4) 76%, #ffffff 24%) !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #controlBanner#controlBanner.control-banner:not([hidden]) span {
    color: var(--lfd-ui-text-muted) !important;
    font-size: clamp(10px, 2.9vw, 12px) !important;
  }

  html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase] {
    border-radius: 16px !important;
  }

  html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head,
  html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-card-display.identity-card-display,
  html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-action-panel.identity-action-panel,
  html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-shell,
  html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option {
    border-radius: 13px !important;
  }

  html body:not(.maintenance-mode) #identitySelect#identitySelect.identity-select[data-phase]
    .identity-option.identity-option {
    border-radius: 13px !important;
  }

  html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head {
    padding: 10px 12px !important;
  }

  html body:not(.maintenance-mode) #identitySelect#identitySelect .identity-select-head > strong {
    font-size: 25px !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-shell {
    padding: 24px 15px 17px !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option {
    min-height: clamp(88px, 14dvh, 112px) !important;
  }
}

@media (max-width: 720px) and (max-height: 700px) {
  html body:not(.maintenance-mode) #practiceModeDialog#practiceModeDialog .practice-mode-option {
    min-height: 88px !important;
  }
}

/*
 * Contract lock: the legacy normal-duel stylesheet contains a 49-ID
 * specificity wall for this banner. Important declarations inside a named
 * cascade layer intentionally outrank legacy unlayered important rules, so we
 * can restore the shared two-line feedback slot without copying that debt.
 */
@layer lfd-contract-locks {
  @media (max-width: 720px) {
    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
      --duel-mobile-command-top: max(6px, env(safe-area-inset-top)) !important;
      --duel-mobile-command-h: 58px !important;
      --duel-mobile-command-gap: 6px !important;
      --duel-mobile-utility-slot-w: 67px !important;
      --duel-mobile-owner-left: calc(var(--duel-mobile-edge) + var(--duel-mobile-utility-slot-w) + 6px) !important;
      --duel-mobile-stage-top: calc(var(--duel-mobile-command-top) + var(--duel-mobile-command-h) + var(--duel-mobile-command-gap)) !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #battleCommandState.battle-command-state {
      position: absolute !important;
      inset: var(--duel-mobile-command-top) var(--duel-mobile-edge-r) auto var(--duel-mobile-owner-left) !important;
      z-index: 1200 !important;
      box-sizing: border-box !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: var(--duel-mobile-command-h) !important;
      min-height: var(--duel-mobile-command-h) !important;
      max-height: var(--duel-mobile-command-h) !important;
      margin: 0 !important;
      padding: 6px 9px !important;
      overflow: hidden !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #controlBanner.control-banner:not([hidden]) {
      position: fixed !important;
      inset: var(--duel-mobile-command-top) var(--duel-mobile-edge-r) auto var(--duel-mobile-owner-left) !important;
      z-index: 2200 !important;
      box-sizing: border-box !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: var(--duel-mobile-command-h) !important;
      min-height: var(--duel-mobile-command-h) !important;
      max-height: var(--duel-mobile-command-h) !important;
      margin: 0 !important;
      padding: 5px 9px !important;
      transform: none !important;
      display: grid !important;
      grid-template-rows: min-content min-content !important;
      align-content: center !important;
      justify-items: center !important;
      gap: 2px !important;
      overflow: hidden !important;
      border: 1px solid var(--lfd-ui-border) !important;
      border-radius: var(--lfd-ui-radius-panel) !important;
      color: var(--lfd-ui-text) !important;
      -webkit-text-fill-color: var(--lfd-ui-text) !important;
      background: linear-gradient(180deg, rgba(16, 38, 59, 0.98), rgba(5, 16, 30, 0.99)) !important;
      box-shadow: var(--lfd-ui-shadow-panel) !important;
      text-align: center !important;
      text-shadow: none !important;
      pointer-events: none !important;
      isolation: isolate !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #controlBanner.control-banner:not([hidden]) > :is(strong, span) {
      position: static !important;
      display: block !important;
      min-width: 0 !important;
      max-width: 100% !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      letter-spacing: 0 !important;
      text-shadow: none !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #controlBanner.control-banner:not([hidden]) > strong {
      color: color-mix(in srgb, var(--battle-state-color, #8fdcf4) 76%, #ffffff 24%) !important;
      -webkit-text-fill-color: color-mix(in srgb, var(--battle-state-color, #8fdcf4) 76%, #ffffff 24%) !important;
      font-size: clamp(13px, 3.5vw, 15px) !important;
      line-height: 1 !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #controlBanner.control-banner:not([hidden]) > span {
      color: var(--lfd-ui-text-muted) !important;
      -webkit-text-fill-color: var(--lfd-ui-text-muted) !important;
      font-size: clamp(10px, 2.7vw, 11px) !important;
      line-height: 1.1 !important;
    }
  }

  @media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
      --duel-mobile-command-h: 46px !important;
      --duel-mobile-command-gap: 4px !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #battleCommandState.battle-command-state {
      padding: 4px 8px !important;
      grid-template-rows: minmax(0, 1fr) 3px !important;
      grid-template-areas:
        "emblem copy latency"
        "progress progress progress" !important;
    }

    html body:not(.maintenance-mode).battle-controls-active
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
    > #controlBanner.control-banner:not([hidden]) {
      padding: 4px 8px !important;
      gap: 1px !important;
    }
  }
}

html body:not(.maintenance-mode)[data-vfx-quality="low"]
  #practiceModeDialog#practiceModeDialog.practice-mode-dialog {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  html body:not(.maintenance-mode).battle-controls-active
  #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle) {
    --duel-mobile-command-h: 46px !important;
    --duel-mobile-command-gap: 4px !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)
  > #battleCommandState#battleCommandState#battleCommandState.battle-command-state {
    padding: 4px 8px !important;
    grid-template-rows: minmax(0, 1fr) 3px !important;
    grid-template-areas:
      "emblem copy latency"
      "progress progress progress" !important;
  }

  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #toast#toast.toast:not([hidden]),
  html body:not(.maintenance-mode).battle-controls-active:has(
    #appRoot.app.battle-app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  ) #controlBanner#controlBanner.control-banner:not([hidden]) {
    max-height: 46px !important;
    padding: 5px 9px !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  > #battleCommandState.battle-command-state > em {
    display: none !important;
  }

  html body:not(.maintenance-mode).battle-controls-active
  #appRoot.app.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
  #battle.battle:not([hidden]):not(.team-mode):not(.identity-battle)
  > #battleCommandState.battle-command-state .battle-command-state-emblem {
    width: 24px !important;
    height: 24px !important;
  }
}

/*
 * V1.329Beta — character identity and lore surface.
 * A form may change its art, title, skill and story, but the person keeps one
 * personality. The lore UI uses the shared dark crystal/metal material and a
 * structural mobile layout instead of a percentage-based colour split.
 */
html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog {
  z-index: 10020;
  box-sizing: border-box;
  padding: clamp(10px, 2.2vw, 24px);
  background:
    radial-gradient(circle at 18% 8%, rgba(87, 179, 222, 0.12), transparent 32rem),
    linear-gradient(145deg, rgba(2, 8, 17, 0.88), rgba(3, 12, 24, 0.94));
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 24px));
  max-height: min(92dvh, 940px);
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 70%, var(--lfd-ui-border) 30%);
  border-radius: var(--lfd-ui-radius-shell);
  color: var(--lfd-ui-text);
  background:
    radial-gradient(circle at 76% 0%, color-mix(in srgb, var(--character-profession-color, #75cfee) 12%, transparent), transparent 30rem),
    linear-gradient(155deg, rgba(12, 31, 50, 0.98), var(--lfd-ui-panel) 46%, rgba(5, 15, 28, 0.99));
  box-shadow:
    var(--lfd-ui-shadow-shell),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 38px color-mix(in srgb, var(--character-profession-color, #75cfee) 10%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--lfd-ui-gold) 66%, transparent) rgba(7, 19, 33, 0.86);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-close {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  position: sticky;
  top: 12px;
  float: none;
  z-index: 8;
  box-sizing: border-box;
  min-width: 72px;
  min-height: 44px;
  margin: 12px;
  padding: 9px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 74%, var(--lfd-ui-border) 26%);
  border-radius: var(--lfd-ui-radius-control);
  color: #fff1c9;
  -webkit-text-fill-color: #fff1c9;
  background:
    linear-gradient(110deg, rgba(232, 202, 130, 0.13), transparent 52%),
    linear-gradient(180deg, rgba(28, 52, 72, 0.98), rgba(8, 22, 38, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 10px 24px rgba(0, 0, 0, 0.34);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
  transition: transform var(--lfd-ui-motion), border-color var(--lfd-ui-motion), filter var(--lfd-ui-motion);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-close:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--lfd-ui-gold) 88%, #ffffff 12%);
  filter: brightness(1.08);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-close:focus-visible {
  outline: none;
  box-shadow: var(--lfd-ui-focus), 0 10px 24px rgba(0, 0, 0, 0.34);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-hero {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(340px, 45%) minmax(0, 1fr);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: clamp(430px, 54vw, 610px);
  background: linear-gradient(135deg, rgba(8, 22, 38, 0.96), rgba(5, 16, 29, 0.99));
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-art {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 34%, transparent);
  border-bottom: 0;
  background-color: var(--lfd-ui-bg-deep);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(38px, 5vw, 70px) clamp(28px, 4.2vw, 58px) clamp(28px, 4vw, 52px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--character-profession-color, #75cfee) 10%, transparent), transparent 48%),
    radial-gradient(circle at 100% 0%, rgba(232, 202, 130, 0.08), transparent 28rem),
    linear-gradient(155deg, rgba(13, 34, 54, 0.96), rgba(6, 18, 32, 0.99));
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title #characterLoreKicker {
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--character-profession-color, #75cfee) 54%, var(--lfd-ui-border) 46%);
  border-left: 4px solid var(--character-profession-color, #75cfee);
  border-radius: 7px;
  color: color-mix(in srgb, var(--character-profession-color, #75cfee) 56%, #ffffff 44%);
  -webkit-text-fill-color: currentColor;
  background: rgba(7, 22, 38, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-shadow: none;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title h2 {
  color: var(--lfd-ui-text);
  -webkit-text-fill-color: var(--lfd-ui-text);
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.5);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title .character-lore-english-name {
  color: color-mix(in srgb, var(--character-profession-color, #75cfee) 58%, #dff7ff 42%);
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 18px color-mix(in srgb, var(--character-profession-color, #75cfee) 20%, transparent);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-tags {
  gap: 7px;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-chip {
  box-sizing: border-box;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 48%, var(--lfd-ui-border) 52%);
  border-left: 4px solid color-mix(in srgb, var(--character-profession-color, #75cfee) 72%, #8fe3f7 28%);
  border-radius: 8px;
  color: #f5e8c1;
  -webkit-text-fill-color: #f5e8c1;
  background: linear-gradient(180deg, rgba(25, 48, 67, 0.94), rgba(8, 24, 40, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-skill.character-codex-skill {
  box-sizing: border-box;
  max-width: min(100%, 520px);
  min-height: 44px;
  border: 1px solid var(--lfd-ui-border);
  border-left: 4px solid var(--character-role-color, #dfb45f);
  border-radius: var(--lfd-ui-radius-control);
  color: var(--lfd-ui-text);
  -webkit-text-fill-color: var(--lfd-ui-text);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--character-role-color, #75cfee) 13%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(22, 47, 67, 0.96), rgba(7, 22, 38, 0.99));
  box-shadow: var(--lfd-ui-shadow-panel);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-body {
  grid-area: 2 / 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 40%, var(--lfd-ui-border) 60%);
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--character-profession-color, #75cfee) 7%, transparent), transparent 26rem),
    linear-gradient(145deg, rgba(12, 31, 49, 0.99), rgba(5, 17, 31, 0.995));
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section,
html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section:nth-child(2n) {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(18px, 2.3vw, 28px);
  border-top: 1px solid rgba(157, 205, 232, 0.13);
  border-right: 1px solid rgba(157, 205, 232, 0.11);
  color: var(--lfd-ui-text);
  background: linear-gradient(180deg, rgba(18, 40, 58, 0.38), rgba(5, 17, 31, 0.2));
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section:nth-child(2n) {
  border-right: 0;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section h3 {
  margin: 0 0 9px;
  color: var(--lfd-ui-gold);
  -webkit-text-fill-color: var(--lfd-ui-gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: none;
  text-shadow: none;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section p,
html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-skill-panel p.rich-description {
  margin: 0;
  color: var(--lfd-ui-text-muted);
  -webkit-text-fill-color: var(--lfd-ui-text-muted);
  font-weight: 650;
  line-height: 1.72;
  text-shadow: none;
  white-space: pre-line;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-text-block {
  display: block;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-text-block + .character-lore-text-block {
  margin-top: 0.72em;
  padding-top: 0.72em;
  border-top: 1px solid rgba(157, 205, 232, 0.13);
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-quote,
html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-skill-panel {
  grid-column: 1 / -1;
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-quote {
  border-top: 0;
  background:
    linear-gradient(100deg, rgba(232, 202, 130, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(18, 37, 55, 0.98), rgba(6, 19, 34, 0.99));
}

html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-quote p {
  color: #fff0c2;
  -webkit-text-fill-color: #fff0c2;
}

html body:not(.maintenance-mode)[data-vfx-quality="low"] #characterLoreDialog.character-lore-dialog {
  background: rgba(2, 9, 18, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 780px) {
  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog {
    padding: 8px;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
    background:
      radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--character-profession-color, #75cfee) 10%, transparent), transparent 22rem),
      linear-gradient(160deg, rgba(11, 29, 47, 0.99), rgba(5, 16, 29, 0.995));
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-close {
    top: 9px;
    min-width: 64px;
    min-height: 44px;
    margin: 9px;
    padding: 9px 12px;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-hero {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-art {
    width: 100%;
    min-width: 0;
    min-height: clamp(300px, 61dvh, 520px);
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 34%, transparent);
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title {
    width: 100%;
    min-width: 0;
    gap: 10px;
    padding: 22px 16px 24px;
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--character-profession-color, #75cfee) 10%, transparent), transparent 52%),
      linear-gradient(160deg, rgba(13, 34, 54, 0.98), rgba(6, 18, 32, 0.995));
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title h2 {
    font-size: clamp(36px, 13vw, 54px);
    line-height: 0.98;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title .character-lore-english-name {
    font-size: clamp(17px, 5.3vw, 22px);
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-body {
    grid-template-columns: minmax(0, 1fr);
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section,
  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-section:nth-child(2n) {
    grid-column: 1;
    padding: 18px 16px;
    border-right: 0;
  }
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape) {
  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-box > .character-lore-hero {
    grid-template-columns: minmax(250px, 42%) minmax(0, 1fr);
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-art {
    min-height: 360px;
    border-right: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 34%, transparent);
    border-bottom: 0;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title {
    justify-content: end;
    gap: 7px;
    padding: 54px 18px 20px;
  }

  html body:not(.maintenance-mode) #characterLoreDialog.character-lore-dialog .character-lore-title h2 {
    font-size: clamp(32px, 7vw, 48px);
  }
}

/* Legacy biography controls used unlayered !important specificity walls. */
@layer lfd-contract-locks {
  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-copy .character-codex-heading
    .character-codex-lore-button.character-codex-lore-button {
    display: inline-grid !important;
    grid-template-columns: 30px auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: clamp(88px, 6vw, 98px) !important;
    min-width: clamp(88px, 6vw, 98px) !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 5px 10px 5px 6px !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--lfd-ui-gold) 68%, var(--lfd-ui-border) 32%) !important;
    border-radius: var(--lfd-ui-radius-control) !important;
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: var(--lfd-ui-text) !important;
    background:
      linear-gradient(105deg, rgba(232, 202, 130, 0.12), transparent 48%),
      linear-gradient(180deg, rgba(26, 51, 71, 0.98), rgba(7, 22, 38, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 8px 18px rgba(0, 0, 0, 0.24) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
    transition: transform var(--lfd-ui-motion), border-color var(--lfd-ui-motion), filter var(--lfd-ui-motion) !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-lore-button .character-codex-lore-mark {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(232, 202, 130, 0.44) !important;
    border-radius: 8px !important;
    background:
      linear-gradient(rgba(5, 18, 31, 0.14), rgba(5, 18, 31, 0.14)),
      url("assets/ui/main-4k/biography-button-icon-4k-v1.webp?v=V1.36Beta-texture-4k-lock1") center / cover no-repeat !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    filter: saturate(0.82) brightness(0.94) !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-lore-button .character-codex-lore-label {
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: var(--lfd-ui-text) !important;
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-lore-button::after {
    content: none !important;
    display: none !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-lore-button:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--lfd-ui-gold) 84%, #ffffff 16%) !important;
    filter: brightness(1.08) !important;
  }

  html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
    .character-codex-card .character-codex-lore-button:focus-visible {
    outline: none !important;
    box-shadow: var(--lfd-ui-focus) !important;
  }

  @media (max-width: 899px) {
    html body:not(.maintenance-mode) #characterCodexDialog.character-codex-dialog
      .character-codex-card .character-codex-copy .character-codex-heading
      .character-codex-lore-button.character-codex-lore-button {
      width: clamp(84px, 23vw, 94px) !important;
      min-width: clamp(84px, 23vw, 94px) !important;
    }
  }
}

/* Character-select skill stack is one joined tab/body component. The special
   mode entry remains a separate control, while every base/job/mode skill uses
   the same zero-gap primary seam. */
@layer lfd-contract-locks {
  html body:not(.maintenance-mode) #characterSelect.character-select
    #characterPreview.character-preview .preview-skill.preview-skill-unified {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body:not(.maintenance-mode) #characterSelect.character-select
    #characterPreview.character-preview #previewModeSkill.preview-mode-skill-tip:not([hidden]) {
    margin: 0 0 clamp(6px, 0.8dvh, 9px) !important;
  }

  html body:not(.maintenance-mode) #characterSelect.character-select
    #characterPreview.character-preview #previewSkill.preview-skill-primary {
    margin: 0 !important;
    border-bottom: 0 !important;
    border-radius: 8px 8px 0 0 !important;
  }

  html body:not(.maintenance-mode) #characterSelect.character-select
    #characterPreview.character-preview #previewDescription.preview-skill-description {
    margin: 0 !important;
    border-radius: 0 8px 8px 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.maintenance-mode) #identitySelect .identity-option,
  html body:not(.maintenance-mode) #identitySelect .identity-confirm,
  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option,
  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-close,
  html body:not(.maintenance-mode) #characterCodexDialog .character-codex-lore-button,
  html body:not(.maintenance-mode) #characterLoreDialog .character-lore-close {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase],
  html body:not(.maintenance-mode) #identitySelect .identity-select-head,
  html body:not(.maintenance-mode) #identitySelect .identity-card-display,
  html body:not(.maintenance-mode) #identitySelect .identity-action-panel,
  html body:not(.maintenance-mode) #identitySelect .identity-option,
  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-shell,
  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option,
  html body:not(.maintenance-mode) #battleCommandState.battle-command-state,
  html body:not(.maintenance-mode) #characterLoreDialog .character-lore-box,
  html body:not(.maintenance-mode) #characterLoreDialog .character-lore-section,
  html body:not(.maintenance-mode) #characterLoreDialog .character-lore-close,
  html body:not(.maintenance-mode) #characterCodexDialog .character-codex-lore-button {
    border: 2px solid CanvasText !important;
    color: CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) :is(#identitySelect, #practiceModeDialog)
  :is(button, .identity-option):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) :is(#characterCodexDialog, #characterLoreDialog)
  button:focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
}

/* V1.334: final scoped readability and inspection/hand safety locks. */
@layer lfd-contract-locks {
  /* The same scene carries the lobby, room, selection and their subpages. */
  html body:not(.maintenance-mode)
    #appRoot.app:not(.battle-app):not(.room-lobby-app) > .arena {
    background: linear-gradient(180deg, rgba(13, 40, 67, .3), rgba(25, 58, 86, .13) 50%, rgba(16, 43, 69, .28)), var(--lfd-ui-scene-room) center / cover no-repeat !important;
  }

  html body:not(.maintenance-mode)
    #appRoot.app:not(.battle-app):not(.room-lobby-app) > .arena::before,
  html body:not(.maintenance-mode)
    #appRoot.app:not(.battle-app):not(.room-lobby-app) > .arena::after {
    content: none !important;
  }

  /* One static backdrop replaces unrelated grey blur, purple fog and frames. */
  html body:not(.maintenance-mode) > :is(
    .rules-dialog, .opportunity-dialog, .control-dialog, .account-dialog,
    .practice-mode-dialog, .profession-hand-drawer
  ),
  html body:not(.maintenance-mode) #characterSelect :is(.mode-dialog, .preview-job-dialog) {
    background: var(--lfd-ui-backdrop), var(--lfd-ui-scene-room) center / cover no-repeat !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Shared shells: lobby, codices, rules, libraries, choice/control dialogs,
   * character biographies, account, settings and result surfaces. */
  html body:not(.maintenance-mode) :is(
    #lobby .lobby-panel,
    .rules-dialog > .rules-box,
    .opportunity-dialog > .opportunity-box,
    .control-dialog > .control-box,
    #practiceModeDialog > .practice-mode-shell,
    #accountDialog > .account-dialog-shell,
    #characterLoreDialog > .character-lore-box,
    #previewJobDialog > .preview-job-ritual,
    #modeDialog > .mode-dialog-shell,
    #professionHandDrawer > .profession-hand-panel,
    #settingsDockPanel,
    #artifactPreview,
    #sidePanel > section
  ) {
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-shell) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-surface) !important;
    background-color: var(--lfd-ui-bg) !important;
    box-shadow: var(--lfd-ui-shadow-shell) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html body:not(.maintenance-mode) :is(
    #lobby .lobby-panel,
    #practiceModeDialog > .practice-mode-shell,
    #accountDialog > .account-dialog-shell,
    .rules-dialog > .rules-box,
    .control-dialog > .control-box
  )::before,
  html body:not(.maintenance-mode) :is(
    #lobby .lobby-panel,
    #practiceModeDialog > .practice-mode-shell,
    #accountDialog > .account-dialog-shell,
    .rules-dialog > .rules-box,
    .control-dialog > .control-box
  )::after {
    content: none !important;
  }

  /* Replace the home form's overlapping legacy paint with normal-flow rows. */
  html body:not(.maintenance-mode) #lobby .lobby-panel {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: min(860px, calc(100vw - 36px)) !important;
    max-width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #lobby .lobby-panel > label {
    position: static !important;
    order: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 4px 8px !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    color: var(--lfd-ui-text) !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) #lobby .lobby-panel > label > small {
    position: static !important;
    grid-column: 2 !important;
    color: var(--lfd-ui-text-muted) !important;
    font-size: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) #lobby .join-row {
    position: static !important;
    order: 1 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    padding: 0 !important;
  }

  html body:not(.maintenance-mode) #lobby :is(.mode-select, .lobby-actions) {
    position: static !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    transform: none !important;
  }

  html body:not(.maintenance-mode) #lobby .mode-select {
    order: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body:not(.maintenance-mode) #lobby .mode-select > button {
    min-height: 116px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 18px 12px !important;
  }

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

  /* Subpanels retain their component geometry and semantic content. */
  html body:not(.maintenance-mode) :is(
    #rulesDialog .rules-section,
    #rulesDialog .rules-card,
    #rulesDialog .rule-block,
    #damageTypeDialog .damage-type-panel,
    #identityRulesDialog .identity-rule-card,
    #professionSpecDialog .profession-spec-summary,
    #professionSpecDialog .profession-spec-detail,
    #characterLoreDialog .character-lore-section,
    #characterLoreDialog .character-lore-title,
    #characterLoreDialog .character-lore-body,
    #characterSelect .status-line,
    #characterSelect .preview-job-ritual-head,
    #characterSelect .preview-job-ritual-foot,
    #modeDialog .mode-dialog-detail-frame,
    #accountDialog .account-form,
    #accountDialog .account-profile,
    #settingsDockHint
  ) {
    border-color: var(--lfd-ui-border) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-surface) !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
  }

  /* Native controls: all navigation/confirm/return controls share material.
   * Card thumbnails, skill icons and the three illustrated practice cards
   * deliberately keep their art as content. */
  html body:not(.maintenance-mode) :is(
    #lobby .lobby-actions > button,
    #lobby .join-row > button,
    #lobby .mode-select > button,
    #roomLobby .room-lobby-actions > button,
    #roomLobby .room-seat-action,
    .rules-head > button,
    .rules-tabs > button,
    .rules-subtabs > button,
    .character-codex-filters > button,
    .character-faction-tabs > button,
    .profession-codex-tabs > button,
    .profession-spec-tabs > button,
    .control-actions > button,
    .mode-dialog-actions > button,
    .account-tabs > button,
    #accountSubmit, #accountLogout,
    #lockCharacter, #leaveCharacterSelect,
    #previewJobConfirm, #previewJobClose,
    #previewJobButton, #previewModeButton,
    #modeClose, #modeLockCharacter,
    #closePracticeMode, #closeCharacterLore, #closeSkillInspect,
    #closeBattleCharacterPreview, #artifactPreviewClose,
    #cancelRimebladeDirection, #professionHandClose, #professionReplaceBack, #professionTargetBack,
    #copyRoom, #accountButton, #accountClose,
    #resultRematch, #resultReturnLobby,
    #battleLogToggle, #leaveBattle, #leaveRoom,
    #battle .battle-libraries > button:not(.profession-hand-action),
    #battle #cards > .action-card,
    #settingsToggle, #languageToggle, #musicToggle,
    #soundEffectsToggle, #vfxQualityToggle, #battleWallpaperToggle
  ) {
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-control) !important;
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--lfd-ui-control) !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
    text-shadow: none !important;
    clip-path: none !important;
    transition: border-color var(--lfd-ui-motion), background-color var(--lfd-ui-motion), box-shadow var(--lfd-ui-motion) !important;
  }

  html body:not(.maintenance-mode) :is(
    #lobby .lobby-actions > button, #lobby .mode-select > button,
    #roomLobby .room-lobby-actions > button, .rules-head > button,
    #lockCharacter, #previewJobConfirm, #modeClose, #modeLockCharacter,
    #resultRematch, #resultReturnLobby
  )::before,
  html body:not(.maintenance-mode) :is(
    #lobby .lobby-actions > button, #lobby .mode-select > button,
    #roomLobby .room-lobby-actions > button, .rules-head > button,
    #lockCharacter, #previewJobConfirm, #modeClose, #modeLockCharacter,
    #resultRematch, #resultReturnLobby
  )::after {
    content: none !important;
  }

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

  html body:not(.maintenance-mode) #battle #cards > .action-card > span {
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) #battle #cards > .action-card.selected {
    border-color: var(--lfd-ui-border-strong) !important;
    box-shadow: var(--lfd-ui-focus) !important;
  }

  html body:not(.maintenance-mode) :is(
    #lobby .lobby-actions > button, #lobby .join-row > button,
    .rules-head > button, .mode-dialog-actions > button,
    #previewJobConfirm, #accountSubmit, #resultRematch, #resultReturnLobby
  ) {
    aspect-ratio: auto !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 10px 16px !important;
    line-height: 1.25 !important;
  }

  html body:not(.maintenance-mode) :is(
    #lobby .mode-select > button, .rules-tabs > button,
    .rules-subtabs > button, .character-faction-tabs > button,
    .account-tabs > button
  ):is(.selected, .active, [aria-selected="true"]),
  html body:not(.maintenance-mode) :is(
    #startGame, #lockCharacter, #previewJobConfirm, #accountSubmit,
    #modeAccept, #resultRematch
  ) {
    border-color: var(--lfd-ui-border-strong) !important;
    color: var(--lfd-ui-text) !important;
    background: linear-gradient(110deg, color-mix(in srgb, var(--lfd-ui-accent-quiet) 18%, transparent), transparent 65%), var(--lfd-ui-control) !important;
    box-shadow: var(--lfd-ui-shadow-panel), inset 0 -2px var(--lfd-ui-accent-quiet) !important;
  }

  html body:not(.maintenance-mode) :is(
    #lobby input, #accountDialog input, #accountDialog select,
    #characterCodexDialog input, #professionCodexDialog input
  ) {
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-control) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-panel) !important;
    box-shadow: inset 0 1px 4px var(--lfd-ui-bg-deep) !important;
    min-width: 0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* All interface headings and button labels remain flat, solid and legible. */
  html body:not(.maintenance-mode) :is(
    .rules-dialog, .opportunity-dialog, .control-dialog,
    #practiceModeDialog, #accountDialog, #professionHandDrawer,
    #lobby, #roomLobby, #modeDialog, #previewJobDialog
  ) :is(h1, h2, h3, h4, button > span, button > strong),
  html body:not(.maintenance-mode) :is(
    #professionDrawTitle, #professionHandTitle, #opportunityTitle,
    #artifactTitle, #controlTitle, #rimebladeDirectionTitle
  ),
  html body:not(.maintenance-mode) #enterFatedDuel > strong
  {
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    filter: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    background-image: none !important;
  }

  html body:not(.maintenance-mode) #appRoot > .arena > .topbar :is(h1, #subtitle, .account-pill-copy > small, .account-pill-copy > strong) {
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 1px 4px var(--lfd-ui-bg) !important;
  }

  /* One typographic hierarchy, with gold reserved for small section labels. */
  html body:not(.maintenance-mode) :is(
    .rules-head > h2, .opportunity-box > h2, .opportunity-head > h2, .control-box > h2,
    #practiceModeTitle, .account-dialog-heading h2,
    .preview-job-ritual-heading > strong,
    .game-codex-card > span, .lobby-actions > button > span
  ) {
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;
  }

  html body:not(.maintenance-mode) :is(
    .rules-head > h2, .opportunity-box > h2, .opportunity-head > h2, .control-box > h2,
    #practiceModeTitle, .account-dialog-heading h2
  ) {
    font-size: clamp(22px, 2.5vw, 32px) !important;
    line-height: 1.25 !important;
  }

  html body:not(.maintenance-mode) :is(
    .rules-box > p, .opportunity-box > p, .opportunity-head > p, .control-box > p,
    #practiceModeHint, .game-codex-card > small,
    #lobby .lobby-actions > button > small, #lobby .mode-select > button > small,
    .rules-head > small, .account-dialog-heading p
  ) {
    color: var(--lfd-ui-text-muted) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
  }

  /* Preserve the three practice illustrations, use a quiet shared shell. */
  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-kicker {
    color: var(--lfd-ui-gold) !important;
    text-shadow: none !important;
    letter-spacing: .16em !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option {
    border-color: var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-panel) !important;
    background: linear-gradient(180deg, transparent 28%, rgba(3, 9, 20, .34) 55%, var(--lfd-ui-bg-deep)), var(--practice-card-art) 64% center / cover no-repeat !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option > span {
    color: var(--lfd-ui-accent-quiet) !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option[data-practice-mode="3v3"] > span {
    color: var(--lfd-ui-gold) !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option[data-practice-mode="identity"] > span {
    color: var(--lfd-ui-danger-quiet) !important;
  }

  html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option::after {
    border-color: var(--lfd-ui-border) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-panel) !important;
    box-shadow: none !important;
  }

  /* Turn feedback keeps its existing safe-area dimensions in every mode. */
  html body:not(.maintenance-mode) #battleCommandState.battle-command-state {
    --battle-state-color: var(--lfd-ui-accent-quiet) !important;
    --battle-state-glow: transparent !important;
    border-color: var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-control) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-surface) !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
  }

  html body:not(.maintenance-mode) #battleCommandState.battle-command-state:is([data-phase="required"], [data-phase="targeting"], [data-phase="settling"]) {
    --battle-state-color: var(--lfd-ui-gold) !important;
  }

  html body:not(.maintenance-mode) #battleCommandState.battle-command-state[data-phase="controlled"] {
    --battle-state-color: var(--lfd-ui-danger-quiet) !important;
  }

  html body:not(.maintenance-mode) #battleCommandState .battle-command-state-emblem,
  html body:not(.maintenance-mode) #battleCommandState .battle-command-state-emblem::before {
    box-shadow: none !important;
  }

  html body:not(.maintenance-mode) #battleCommandState .battle-command-state-emblem {
    border-color: var(--lfd-ui-border-strong) !important;
    background: var(--lfd-ui-control) !important;
  }

  html body:not(.maintenance-mode) #battleCommandState .battle-command-state-copy > strong {
    text-shadow: none !important;
  }

  html body:not(.maintenance-mode) :is(#controlBanner, #battleToast, #toast, #settingsDockHint, #audioCueCaption) {
    border-color: var(--lfd-ui-border) !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-surface) !important;
    box-shadow: var(--lfd-ui-shadow-panel) !important;
  }

  /* Shared focus and hover affordances keep selection distinct from hover. */
  html body:not(.maintenance-mode) :is(
    #lobby, #roomLobby, .rules-dialog, .opportunity-dialog, .control-dialog,
    #practiceModeDialog, #accountDialog, #characterSelect
  ) :is(button, input, select):focus-visible {
    outline: 2px solid var(--lfd-ui-accent-quiet) !important;
    outline-offset: 3px !important;
    box-shadow: var(--lfd-ui-focus) !important;
  }

  @media (hover: hover) {
    html body:not(.maintenance-mode) :is(
      #lobby .lobby-actions > button, #lobby .join-row > button,
      #roomLobby .room-lobby-actions > button, .rules-head > button,
      .rules-tabs > button, .rules-subtabs > button,
      .control-actions > button, .mode-dialog-actions > button,
      #closePracticeMode, #closeCharacterLore, #accountSubmit
    ):hover:not(:disabled) {
      border-color: var(--lfd-ui-border-strong) !important;
      background: var(--lfd-ui-panel-hover) !important;
      filter: brightness(1.06) !important;
    }
  }

  html body:not(.maintenance-mode) :is(
    #lobby .lobby-actions > button, #lobby .join-row > button,
    #roomLobby .room-lobby-actions > button, .rules-head > button,
    .control-actions > button, .mode-dialog-actions > button,
    #lockCharacter, #accountSubmit, #previewJobConfirm
  ):disabled {
    opacity: .56 !important;
    filter: saturate(.4) !important;
  }

  @media (max-width: 720px) {
    html body:not(.maintenance-mode) #lobby .lobby-panel {
      grid-template-columns: minmax(0, 1fr) !important;
      padding: 16px !important;
      gap: 12px !important;
    }
    html body:not(.maintenance-mode) #lobby .lobby-panel > label {
      grid-column: 1 !important;
    }
    html body:not(.maintenance-mode) #lobby .join-row {
      grid-column: 1 !important;
      grid-row: 2 !important;
    }
    html body:not(.maintenance-mode) #lobby .mode-select > button {
      min-height: 84px !important;
      padding: 12px 8px !important;
    }
    html body:not(.maintenance-mode) #lobby .lobby-actions > button {
      padding: 10px 5px !important;
    }
    html body:not(.maintenance-mode) #lobby .lobby-actions > button > span {
      font-size: 15px !important;
    }
    html body:not(.maintenance-mode) #lobby .lobby-actions > button > small {
      font-size: 9px !important;
    }
    html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-shell {
      padding: 28px 16px 18px !important;
    }
    html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-shell > h2 {
      padding-inline: 22px !important;
      font-size: 25px !important;
    }
    html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option {
      background: linear-gradient(90deg, var(--lfd-ui-bg-deep), rgba(3, 9, 20, .7) 58%, rgba(3, 9, 20, .18)), var(--practice-card-art) 66% center / cover no-repeat !important;
    }
    html body:not(.maintenance-mode) #practiceModeDialog .practice-mode-option > :is(span, strong, small) {
      align-self: flex-start !important;
      justify-self: start !important;
      text-align: left !important;
    }
    html body:not(.maintenance-mode) .rules-head > h2 {
      min-width: 0 !important;
      overflow-wrap: anywhere !important;
      font-size: 22px !important;
    }
  }

  html body:not(.maintenance-mode)[data-vfx-quality="low"] :is(
    .rules-dialog, .opportunity-dialog, .control-dialog, .practice-mode-dialog, .account-dialog
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html body:not(.maintenance-mode) :is(
      #lobby, #roomLobby, .rules-dialog, .control-dialog, #practiceModeDialog, #accountDialog
    ) :is(button, input, select) {
      transition: none !important;
    }
  }

  @media (forced-colors: active) {
    html body:not(.maintenance-mode) :is(
      .rules-dialog > .rules-box, .control-dialog > .control-box,
      .opportunity-dialog > .opportunity-box,
      #practiceModeDialog > .practice-mode-shell,
      #accountDialog > .account-dialog-shell, #battleCommandState,
      #controlBanner, #battleToast
    ) {
      border-color: CanvasText !important;
      color: CanvasText !important;
      background: Canvas !important;
      box-shadow: none !important;
    }
    html body:not(.maintenance-mode) :is(
      #lobby, #roomLobby, .rules-dialog, .control-dialog, #practiceModeDialog, #accountDialog
    ) :is(button, input, select) {
      border-color: ButtonText !important;
      color: ButtonText !important;
      background-color: ButtonFace !important;
      box-shadow: none !important;
      forced-color-adjust: auto !important;
    }
    html body:not(.maintenance-mode) :is(button, input, select):focus-visible {
      outline: 2px solid Highlight !important;
      outline-offset: 3px !important;
    }
  }
}

/* The inspection shell owns its frame. Art and readable copy occupy separate
 * grid cells; no portrait, name or skill is positioned outside the shell. */
@layer lfd-contract-locks {
  html body #battleCharacterDialog:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    overflow: auto !important;
  }
  html body #battleCharacterDialog #battleCharacterPreview {
    --card-frame-outset-x: 0px;
    --card-frame-outset-y: 0px;
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    align-items: stretch !important;
    width: min(840px, 100%) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
    margin: 0 !important;
    padding: 24px !important;
    gap: 0 !important;
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: var(--lfd-ui-radius-shell) !important;
    background: var(--lfd-ui-bg) !important;
    color: var(--lfd-ui-text) !important;
    box-shadow: var(--lfd-ui-shadow-shell) !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
    isolation: isolate !important;
  }
  html body #battleCharacterPreview > .preview-card-outer-frame {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 40px solid transparent !important;
    border-image: url("assets/ui/character-inspect-frame-celestial-v1334.png") 230 / 40px / 0 stretch !important;
    background: none !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    pointer-events: none !important;
  }
  html body #battleCharacterPreview #battlePreviewArt {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: min(72dvh, 620px) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 8px 0 0 8px !important;
    background-image: var(--character-art) !important;
    background-size: cover !important;
    background-position: center 24% !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
  }
  html body #battleCharacterPreview :is(.preview-inscription, .preview-mini-art),
  html body #battleCharacterPreview::before,
  html body #battleCharacterPreview::after,
  html body #battleCharacterPreview #battlePreviewArt::before,
  html body #battleCharacterPreview #battlePreviewArt::after {
    display: none !important;
    content: none !important;
  }
  html body #battleCharacterPreview > .preview-copy {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(72dvh, 620px) !important;
    margin: 0 !important;
    padding: 44px 22px 24px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--lfd-ui-bg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: auto !important;
    transform: none !important;
    z-index: 3 !important;
  }
  html body #battleCharacterPreview :is(#battlePreviewTitle, #battlePreviewName) {
    display: block !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
    background: none !important;
    overflow-wrap: anywhere !important;
    line-height: 1.3 !important;
  }
  html body #battleCharacterPreview #battlePreviewTitle {
    color: var(--lfd-ui-text-muted) !important;
    font-size: 12px !important;
  }
  html body #battleCharacterPreview #battlePreviewName {
    padding-right: 8px !important;
    font-size: clamp(23px, 2.7vw, 32px) !important;
  }
  html body #battleCharacterPreview .preview-skill {
    margin: 12px 0 0 !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  html body #battleCharacterPreview #battlePreviewSkill {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    clip-path: none !important;
    border: 1px solid var(--lfd-ui-border) !important;
    border-radius: 8px 8px 0 0 !important;
    color: var(--lfd-ui-text) !important;
    background: var(--lfd-ui-panel-hover) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  html body #battleCharacterPreview #battlePreviewSkill .skill-inline-icon {
    position: static !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
  html body #battleCharacterPreview #battlePreviewSkill :is(.skill-inline-text, .skill-inline-passive-tag) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    text-shadow: none !important;
  }
  html body #battleCharacterPreview #battlePreviewSkill .skill-inline-text {
    flex: 1 1 100px !important;
  }
  html body #battleCharacterPreview #battlePreviewDescription {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--lfd-ui-border) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    background: var(--lfd-ui-panel) !important;
    color: var(--lfd-ui-text) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
  }
  html body #battleCharacterPreview #closeBattleCharacterPreview {
    top: 28px !important;
    right: 28px !important;
    z-index: 6 !important;
    min-width: 58px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    line-height: 1.3 !important;
    backdrop-filter: none !important;
  }
  @media (max-width: 559px) {
    html body #battleCharacterDialog #battleCharacterPreview {
      width: min(430px, 100%) !important;
      padding: 18px !important;
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
    }
    html body #battleCharacterPreview #battlePreviewArt {
      height: min(43dvh, 380px) !important;
      border-radius: 8px 8px 0 0 !important;
    }
    html body #battleCharacterPreview > .preview-copy {
      grid-column: 1 !important;
      grid-row: 2 !important;
      max-height: 39dvh !important;
      justify-content: flex-start !important;
      padding: 12px !important;
      gap: 4px !important;
    }
    html body #battleCharacterPreview .preview-skill { margin-top: 6px !important; }
    html body #battleCharacterPreview #closeBattleCharacterPreview { top: 24px !important; right: 24px !important; }
  }
  @media (forced-colors: active) {
    html body #battleCharacterPreview > .preview-card-outer-frame { display: none !important; }
    html body #battleCharacterDialog #battleCharacterPreview,
    html body #battleCharacterPreview :is(.preview-copy, #battlePreviewSkill, #battlePreviewDescription) {
      background: Canvas !important;
      color: CanvasText !important;
      border-color: CanvasText !important;
    }
  }
}

@layer lfd-contract-locks {
  body.battle-controls-active > .profession-hand-anchor > .profession-hand-open:focus-visible {
    outline: 2px solid var(--lfd-ui-border-strong) !important;
    outline-offset: 3px !important;
    box-shadow: var(--lfd-ui-focus) !important;
  }

  @media (orientation: landscape) and (max-height: 520px) and (max-width: 960px) {
    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > .fighters {
      bottom: calc(max(6px, env(safe-area-inset-bottom)) + 160px) !important;
      grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 1fr) !important;
      gap: 5px !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > .fighters > .combatant {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      grid-row: 1 !important;
      gap: 4px !important;
      padding: 4px !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > .fighters > .you-combatant {
      grid-column: 1 !important;
      grid-template-columns: minmax(0, 1fr) 44% !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > .fighters > .opponent-combatant {
      grid-column: 3 !important;
      grid-template-columns: 44% minmax(0, 1fr) !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > .fighters > .versus {
      grid-column: 2 !important;
      grid-row: 1 !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] .combatant > .fighter {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 100% !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > #cards.cards {
      position: fixed !important;
      inset: auto auto calc(max(6px, env(safe-area-inset-bottom)) + 50px) 50% !important;
      width: min(480px, calc(100vw - 12px)) !important;
      min-width: 0 !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      transform: translateX(-50%) !important;
      translate: none !important;
    }

    #appRoot.duel-battle-app:not(.team-battle-app):not(.identity-battle-app)
    #battle.battle:not(.team-mode):not(.identity-battle)[data-profession-hand-layout="duel"] > #cards.cards > .action-card {
      width: 100% !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      background-size: contain !important;
    }
  }
}