/* Gameplay HUD Contract v2.1 final override: timer and target frame cleanup.
   The enemy target frame already contains the skull medallion; keep one skull only. */
body.in-gameplay .combat-center-hud,
body.landscape-ready.in-gameplay .combat-center-hud {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
}

body.in-gameplay .match-timer-panel,
body.landscape-ready.in-gameplay .match-timer-panel {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  column-gap: 8px !important;
  width: 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 auto 6px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.in-gameplay .match-timer-panel::before,
body.landscape-ready.in-gameplay .match-timer-panel::before {
  grid-column: 1 !important;
  justify-self: center !important;
  width: 14px !important;
  min-width: 14px !important;
  height: 20px !important;
  margin: 0 !important;
}

body.in-gameplay .match-timer-panel #arenaTimer,
body.landscape-ready.in-gameplay .match-timer-panel #arenaTimer {
  grid-column: 2 !important;
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff0b9 !important;
  font-size: 29px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  transform: none !important;
  overflow: visible !important;
}

body.in-gameplay .match-timer-panel #arenaTimer::before,
body.in-gameplay .match-timer-panel #arenaTimer::after,
body.landscape-ready.in-gameplay .match-timer-panel #arenaTimer::before,
body.landscape-ready.in-gameplay .match-timer-panel #arenaTimer::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .target-status-panel,
body.landscape-ready.in-gameplay .target-status-panel,
body.in-gameplay .target-enemy-hud,
body.landscape-ready.in-gameplay .target-enemy-hud {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body.in-gameplay .target-status-panel .enemy-combatant,
body.landscape-ready.in-gameplay .target-status-panel .enemy-combatant {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(90deg, rgba(3, 5, 8, 0.18), rgba(3, 5, 8, 0.06)),
    url("/assets/ui/hud-arpg/enemy-target-frame.png?v=hud-contract-2-1") center / 100% 100% no-repeat !important;
}

body.in-gameplay .target-status-panel .enemy-combatant.is-visible,
body.landscape-ready.in-gameplay .target-status-panel .enemy-combatant.is-visible {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.in-gameplay .target-medallion,
body.landscape-ready.in-gameplay .target-medallion,
body.in-gameplay .target-medallion *,
body.landscape-ready.in-gameplay .target-medallion *,
body.in-gameplay .target-medallion::before,
body.in-gameplay .target-medallion::after,
body.landscape-ready.in-gameplay .target-medallion::before,
body.landscape-ready.in-gameplay .target-medallion::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
}

body.in-gameplay .target-status-copy,
body.landscape-ready.in-gameplay .target-status-copy {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .target-heading,
body.landscape-ready.in-gameplay .target-heading {
  position: absolute !important;
  left: auto !important;
  top: 20px !important;
  right: 88px !important;
  bottom: auto !important;
  z-index: 3 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.in-gameplay .target-heading .label,
body.landscape-ready.in-gameplay .target-heading .label {
  display: none !important;
}

body.in-gameplay .target-level,
body.landscape-ready.in-gameplay .target-level {
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: #ead08e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: right !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.in-gameplay .target-status-panel .combatant strong,
body.landscape-ready.in-gameplay .target-status-panel .combatant strong {
  position: absolute !important;
  left: 116px !important;
  top: 14px !important;
  z-index: 3 !important;
  display: block !important;
  width: 210px !important;
  max-width: 210px !important;
  height: 25px !important;
  margin: 0 !important;
  color: #f9e3a8 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 25px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.in-gameplay .target-status-panel .meter.enemy,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy {
  position: absolute !important;
  left: 103px !important;
  right: 67px !important;
  top: 39px !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #17100d, #090605 60%, #030202) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 190, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.62) !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  clip-path: none !important;
}

body.in-gameplay .target-status-panel .meter.enemy::before,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, #20150f, #0b0706 64%, #020101) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.in-gameplay .target-status-panel .meter.enemy span,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy span,
body.in-gameplay #enemyHpText,
body.landscape-ready.in-gameplay #enemyHpText {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.in-gameplay .target-status-panel .meter.enemy i,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy i,
body.in-gameplay #enemyHpBar,
body.landscape-ready.in-gameplay #enemyHpBar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #ff776c, #b93636 58%, #681717) !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, 0.22) !important;
  clip-path: none !important;
}

body.in-gameplay .target-status-panel .meter.enemy.is-boss-health::after,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy.is-boss-health::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  background:
    linear-gradient(90deg,
      transparent calc(33.333% - 1px),
      rgba(10, 5, 4, 0.96) calc(33.333% - 1px),
      rgba(224, 181, 105, 0.9) 33.333%,
      rgba(10, 5, 4, 0.96) calc(33.333% + 1px),
      transparent calc(33.333% + 1px)),
    linear-gradient(90deg,
      transparent calc(66.667% - 1px),
      rgba(10, 5, 4, 0.96) calc(66.667% - 1px),
      rgba(224, 181, 105, 0.9) 66.667%,
      rgba(10, 5, 4, 0.96) calc(66.667% + 1px),
      transparent calc(66.667% + 1px)) !important;
  pointer-events: none !important;
}

/* Gameplay HUD Contract v2.8: right rail ATK reference on a golden-canon grid at 1280x720.
   Keeps gameplay IDs intact and derives title, minimap, portal, and skills from one axis. */
body.in-gameplay,
body.landscape-ready.in-gameplay {
  --hud-golden-canon-stage-width: 1280px;
  --hud-golden-canon-stage-height: 720px;
  --hud-golden-canon-rail-width: 330px;
  --hud-golden-canon-rail-half: 165px;
  --hud-right-axis-x: calc(var(--game-stage-width) - 175px);
  --hud-rail-top-y: 34px;
  --hud-rail-height: 430px;
  --hud-title-width: var(--hud-golden-canon-rail-width);
  --hud-title-height: 70px;
  --hud-title-text-left: 64px;
  --hud-title-text-right: 64px;
  --hud-minimap-y: 82px;
  --hud-map-size-final: 210px;
  --hud-portal-y: 316px;
  --hud-portal-size-final: 112px;
  --hud-skill-bottom-y: 16px;
  --hud-skill-cluster-width: var(--hud-golden-canon-rail-width);
  --hud-skill-cluster-height: 236px;
  --hud-main-attack-size: 126px;
  --hud-skill-size: 80px;
}

body.in-gameplay .hud-top-right,
body.landscape-ready.in-gameplay .hud-top-right,
html.telegram-webview body.in-gameplay .hud-top-right,
html.telegram-fullscreen-requested body.in-gameplay .hud-top-right,
html.telegram-fullscreen-active body.in-gameplay .hud-top-right {
  position: absolute !important;
  left: calc(var(--hud-right-axis-x) - var(--hud-golden-canon-rail-half)) !important;
  top: var(--hud-rail-top-y) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 48 !important;
  display: block !important;
  width: var(--hud-title-width) !important;
  min-width: var(--hud-title-width) !important;
  max-width: var(--hud-title-width) !important;
  height: var(--hud-rail-height) !important;
  min-height: var(--hud-rail-height) !important;
  max-height: var(--hud-rail-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .hud-top-right::before,
body.in-gameplay .hud-top-right::after,
body.landscape-ready.in-gameplay .hud-top-right::before,
body.landscape-ready.in-gameplay .hud-top-right::after,
body.in-gameplay .minimap-panel::before,
body.in-gameplay .minimap-panel::after,
body.landscape-ready.in-gameplay .minimap-panel::before,
body.landscape-ready.in-gameplay .minimap-panel::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .minimap-panel,
body.landscape-ready.in-gameplay .minimap-panel {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: var(--hud-title-width) !important;
  min-width: var(--hud-title-width) !important;
  max-width: var(--hud-title-width) !important;
  height: var(--hud-rail-height) !important;
  min-height: var(--hud-rail-height) !important;
  max-height: var(--hud-rail-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

body.in-gameplay .hud-location-chip,
body.landscape-ready.in-gameplay .hud-location-chip {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  display: block !important;
  width: var(--hud-title-width) !important;
  min-width: var(--hud-title-width) !important;
  max-width: var(--hud-title-width) !important;
  height: var(--hud-title-height) !important;
  min-height: var(--hud-title-height) !important;
  max-height: var(--hud-title-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("/assets/ui/hud-arpg/location-chip-frame-clean.png?v=hud-contract-2-8") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38)) !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.in-gameplay .hud-location-chip::before,
body.in-gameplay .hud-location-chip::after,
body.landscape-ready.in-gameplay .hud-location-chip::before,
body.landscape-ready.in-gameplay .hud-location-chip::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .hud-location-chip .label,
body.landscape-ready.in-gameplay .hud-location-chip .label {
  display: none !important;
}

body.in-gameplay .hud-location-chip strong,
body.landscape-ready.in-gameplay .hud-location-chip strong {
  position: absolute !important;
  left: var(--hud-title-text-left) !important;
  top: 50% !important;
  right: var(--hud-title-text-right) !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f9e3a8 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 0 #050403, 0 0 8px rgba(248, 218, 151, 0.24) !important;
  transform: translateY(-50%) !important;
}

body.in-gameplay .minimap-frame,
body.landscape-ready.in-gameplay .minimap-frame {
  position: absolute !important;
  left: 50% !important;
  top: var(--hud-minimap-y) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  display: block !important;
  width: var(--hud-map-size-final) !important;
  min-width: var(--hud-map-size-final) !important;
  max-width: var(--hud-map-size-final) !important;
  height: var(--hud-map-size-final) !important;
  min-height: var(--hud-map-size-final) !important;
  max-height: var(--hud-map-size-final) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(2, 5, 10, 0.88), rgba(0, 0, 0, 0.94) 68%) !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

body.in-gameplay .minimap-frame::before,
body.landscape-ready.in-gameplay .minimap-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: -22px !important;
  z-index: 4 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("/assets/ui/hud-arpg/minimap-ring.png?v=hud-contract-2-8") center / contain no-repeat !important;
  opacity: 1 !important;
  clip-path: inset(14px 0 0 0) !important;
  pointer-events: none !important;
}

body.in-gameplay .minimap-frame::after,
body.landscape-ready.in-gameplay .minimap-frame::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay #combatMinimapCanvas,
body.landscape-ready.in-gameplay #combatMinimapCanvas {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  display: block !important;
  width: 74% !important;
  min-width: 74% !important;
  max-width: 74% !important;
  height: 74% !important;
  min-height: 74% !important;
  max-height: 74% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(2, 6, 10, 0.92) !important;
  box-shadow: none !important;
  clip-path: circle(50% at 50% 50%) !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.in-gameplay .minimap-north,
body.landscape-ready.in-gameplay .minimap-north {
  display: none !important;
}

body.in-gameplay .system-action-row,
body.landscape-ready.in-gameplay .system-action-row,
body.in-gameplay .hud-system-actions,
body.landscape-ready.in-gameplay .hud-system-actions {
  position: absolute !important;
  left: 50% !important;
  top: var(--hud-portal-y) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--hud-portal-size-final) !important;
  min-width: var(--hud-portal-size-final) !important;
  max-width: var(--hud-portal-size-final) !important;
  height: var(--hud-portal-size-final) !important;
  min-height: var(--hud-portal-size-final) !important;
  max-height: var(--hud-portal-size-final) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay #gameplayMenuButton,
body.in-gameplay .gameplay-menu-button,
body.in-gameplay .system-action-row #gameplayMenuButton,
body.landscape-ready.in-gameplay #gameplayMenuButton,
body.landscape-ready.in-gameplay .gameplay-menu-button,
body.landscape-ready.in-gameplay .system-action-row #gameplayMenuButton {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.in-gameplay #gameplayMenuButton::before,
body.in-gameplay #gameplayMenuButton::after,
body.in-gameplay .gameplay-menu-button::before,
body.in-gameplay .gameplay-menu-button::after,
body.landscape-ready.in-gameplay #gameplayMenuButton::before,
body.landscape-ready.in-gameplay #gameplayMenuButton::after,
body.landscape-ready.in-gameplay .gameplay-menu-button::before,
body.landscape-ready.in-gameplay .gameplay-menu-button::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .system-action-row #exitLevel,
body.in-gameplay #exitLevel.gameplay-exit,
body.landscape-ready.in-gameplay .system-action-row #exitLevel,
body.landscape-ready.in-gameplay #exitLevel.gameplay-exit {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--hud-portal-size-final) !important;
  min-width: var(--hud-portal-size-final) !important;
  max-width: var(--hud-portal-size-final) !important;
  height: var(--hud-portal-size-final) !important;
  min-height: var(--hud-portal-size-final) !important;
  max-height: var(--hud-portal-size-final) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.in-gameplay .system-action-row #exitLevel::before,
body.in-gameplay #exitLevel.gameplay-exit::before,
body.landscape-ready.in-gameplay .system-action-row #exitLevel::before,
body.landscape-ready.in-gameplay #exitLevel.gameplay-exit::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: 50% !important;
  background: url("/assets/ui/hud-arpg/teleport-button.png?v=hud-contract-2-8") center / contain no-repeat !important;
  filter: drop-shadow(0 0 18px rgba(51, 139, 255, 0.52)) !important;
  pointer-events: none !important;
}

body.in-gameplay .system-action-row #exitLevel::after,
body.in-gameplay #exitLevel.gameplay-exit::after,
body.landscape-ready.in-gameplay .system-action-row #exitLevel::after,
body.landscape-ready.in-gameplay #exitLevel.gameplay-exit::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .combat-skill-hud,
body.landscape-ready.in-gameplay .combat-skill-hud,
html.telegram-webview body.in-gameplay .combat-skill-hud,
html.telegram-fullscreen-requested body.in-gameplay .combat-skill-hud,
html.telegram-fullscreen-active body.in-gameplay .combat-skill-hud {
  position: absolute !important;
  left: calc(var(--hud-right-axis-x) - var(--hud-golden-canon-rail-half)) !important;
  top: auto !important;
  right: auto !important;
  bottom: var(--hud-skill-bottom-y) !important;
  z-index: 54 !important;
  display: block !important;
  width: var(--hud-skill-cluster-width) !important;
  min-width: var(--hud-skill-cluster-width) !important;
  max-width: var(--hud-skill-cluster-width) !important;
  height: var(--hud-skill-cluster-height) !important;
  min-height: var(--hud-skill-cluster-height) !important;
  max-height: var(--hud-skill-cluster-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.in-gameplay .combat-skill-hud::before,
body.in-gameplay .combat-skill-hud::after,
body.landscape-ready.in-gameplay .combat-skill-hud::before,
body.landscape-ready.in-gameplay .combat-skill-hud::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .combat-skill-hud .gameplay-abilities,
body.landscape-ready.in-gameplay .combat-skill-hud .gameplay-abilities {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: var(--hud-skill-size) !important;
  min-width: var(--hud-skill-size) !important;
  max-width: var(--hud-skill-size) !important;
  height: var(--hud-skill-size) !important;
  min-height: var(--hud-skill-size) !important;
  max-height: var(--hud-skill-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.in-gameplay .gameplay-abilities .main-attack,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack {
  left: 102px !important;
  top: 110px !important;
  width: var(--hud-main-attack-size) !important;
  min-width: var(--hud-main-attack-size) !important;
  max-width: var(--hud-main-attack-size) !important;
  height: var(--hud-main-attack-size) !important;
  min-height: var(--hud-main-attack-size) !important;
  max-height: var(--hud-main-attack-size) !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(2),
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(2) {
  left: 195px !important;
  top: 5px !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(3),
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(3) {
  left: 55px !important;
  top: 5px !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(4),
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(4) {
  left: 5px !important;
  top: 95px !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(5),
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button:nth-child(5) {
  left: 245px !important;
  top: 95px !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button::before,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: 4 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: url("/assets/ui/hud-arpg/skill-small-frame.png?v=hud-contract-2-8") center / contain no-repeat !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.in-gameplay .gameplay-abilities .main-attack::before,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack::before {
  inset: -8px !important;
  background-image: url("/assets/ui/hud-arpg/skill-main-frame.png?v=hud-contract-2-8") !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button.ready:active::before,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.ready:active::before {
  background-image: url("/assets/ui/hud-arpg/skill-small-frame-active.png?v=hud-contract-2-8") !important;
}

body.in-gameplay .gameplay-abilities .main-attack.ready:active::before,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack.ready:active::before {
  background-image: url("/assets/ui/hud-arpg/skill-main-frame-active.png?v=hud-contract-2-8") !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button.disabled::before,
body.in-gameplay .gameplay-abilities .hud-skill-button.not-enough-mana::before,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.disabled::before,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.not-enough-mana::before {
  background-image: url("/assets/ui/hud-arpg/skill-small-frame-disabled.png?v=hud-contract-2-8") !important;
}

body.in-gameplay .gameplay-abilities .main-attack.disabled::before,
body.in-gameplay .gameplay-abilities .main-attack.not-enough-mana::before,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack.disabled::before,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack.not-enough-mana::before {
  background-image: url("/assets/ui/hud-arpg/skill-main-frame-disabled.png?v=hud-contract-2-8") !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button::after,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button::after {
  display: none !important;
  content: none !important;
}

body.in-gameplay .gameplay-abilities .skill-icon-layer,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer {
  position: absolute !important;
  inset: 14% !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.in-gameplay .gameplay-abilities .main-attack .skill-icon-layer,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack .skill-icon-layer {
  inset: 13% !important;
}

body.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: saturate(1.1) brightness(1.06) drop-shadow(0 0 6px rgba(214, 169, 90, 0.16)) !important;
}

body.in-gameplay .gameplay-abilities .skill-rune,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-rune {
  color: #f7dfa2 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 #030303, 0 0 10px rgba(214, 169, 90, 0.22) !important;
}

body.in-gameplay .gameplay-abilities .main-attack .skill-rune,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack .skill-rune {
  font-size: 44px !important;
}

body.in-gameplay .gameplay-abilities .skill-name,
body.in-gameplay .gameplay-abilities .skill-cost,
body.in-gameplay .gameplay-abilities .skill-state,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-name,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-cost,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-state {
  display: none !important;
}

body.in-gameplay .gameplay-abilities .skill-cooldown,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-cooldown {
  position: absolute !important;
  inset: 12% !important;
  z-index: 3 !important;
  display: block !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32)),
    conic-gradient(from -90deg, rgba(214, 169, 90, 0.32) calc((1 - var(--cooldown-progress, 0)) * 360deg), transparent 0) !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 80ms linear !important;
  pointer-events: none !important;
}

body.in-gameplay .gameplay-abilities .main-attack .skill-cooldown,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack .skill-cooldown {
  inset: 11% !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button.cooldown .skill-cooldown,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.cooldown .skill-cooldown {
  opacity: 0.44 !important;
}

body.in-gameplay .gameplay-abilities .skill-cooldown::before,
body.in-gameplay .gameplay-abilities .skill-cooldown::after,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-cooldown::before,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-cooldown::after {
  display: none !important;
  content: none !important;
}

body.low-performance-mode.in-gameplay .hud-location-chip,
body.low-performance-mode.in-gameplay .minimap-frame,
body.low-performance-mode.in-gameplay .system-action-row #exitLevel,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune,
body.low-performance-mode.landscape-ready.in-gameplay .hud-location-chip,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

body.low-performance-mode.in-gameplay .minimap-frame::before,
body.low-performance-mode.in-gameplay .system-action-row #exitLevel::before,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button::before,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame::before,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel::before,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button::before {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
body.in-gameplay .system-action-row #exitLevel.teleport-casting,
body.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting {
  filter: saturate(1.25) brightness(1.12) drop-shadow(0 0 12px rgba(95, 207, 255, 0.42)) !important;
}

body.in-gameplay .system-action-row #exitLevel.teleport-casting::before,
body.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting::before {
  transform: scale(0.96) !important;
  filter: drop-shadow(0 0 10px rgba(112, 105, 255, 0.44)) !important;
}

body.in-gameplay .system-action-row #exitLevel.teleport-casting::after,
body.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  z-index: 6 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(129, 229, 255, 0.16), transparent 54%),
    conic-gradient(
      from -90deg,
      rgba(111, 225, 255, 0.96) calc(var(--teleport-progress, 0) * 1turn),
      rgba(66, 74, 137, 0.28) 0
    ) !important;
  box-shadow:
    0 0 12px rgba(89, 220, 255, 0.34),
    inset 0 0 14px rgba(123, 98, 255, 0.28) !important;
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%);
  mask: radial-gradient(circle, transparent 58%, #000 61%);
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  animation: teleportButtonPulse 720ms ease-in-out infinite alternate !important;
}

body.in-gameplay .gameplay-abilities .hud-skill-button.teleporting,
body.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.teleporting {
  filter: grayscale(0.18) brightness(0.82) saturate(0.78) !important;
}

@keyframes teleportButtonPulse {
  from {
    filter: drop-shadow(0 0 5px rgba(88, 220, 255, 0.36));
  }

  to {
    filter: drop-shadow(0 0 13px rgba(139, 105, 255, 0.58));
  }
}

body.low-performance-mode.in-gameplay .system-action-row #exitLevel.teleport-casting,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button.teleporting,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.teleporting {
  filter: none !important;
}

body.low-performance-mode.in-gameplay .system-action-row #exitLevel.teleport-casting::before,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting::before,
body.low-performance-mode.in-gameplay .system-action-row #exitLevel.teleport-casting::after,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting::after {
  animation: none !important;
  filter: none !important;
  transition: none !important;
}


/* Canonical gameplay HUD geometry. Values are written by gameplay-hud-layout.js. */
body.in-gameplay,
body.landscape-ready.in-gameplay {
  --hud-layout-axis-x: calc(var(--game-stage-width) - 125px);
  --hud-layout-title-left: calc(var(--game-stage-width) - 262px);
  --hud-layout-title-top: 18px;
  --hud-layout-title-width: 250px;
  --hud-layout-title-height: 48px;
  --hud-layout-title-text-left: 50px;
  --hud-layout-title-text-right: 20px;
  --hud-layout-title-font-size: 14px;
  --hud-layout-title-text-y: -2px;
  --hud-layout-minimap-left: calc(var(--hud-layout-axis-x) - 70px);
  --hud-layout-minimap-top: 64px;
  --hud-layout-minimap-size: 140px;
  --hud-layout-minimap-ring-inset: -15.4px;
  --hud-layout-portal-left: calc(var(--hud-layout-axis-x) - 28px);
  --hud-layout-portal-top: 224px;
  --hud-layout-portal-size: 56px;
  --hud-layout-skills-bottom: 22px;
  --hud-layout-main-size: 142px;
  --hud-layout-main-left: -71px;
  --hud-layout-main-bottom: 0px;
  --hud-layout-small-size: 80px;
}

body.in-gameplay .hud-top-left,
body.landscape-ready.in-gameplay .hud-top-left {
  left: calc(var(--hud-safe-left) + 8px) !important;
  top: calc(var(--hud-safe-top) + 8px) !important;
  transform: scale(0.92) !important;
  transform-origin: top left !important;
}

body.in-gameplay .combat-center-hud,
body.landscape-ready.in-gameplay .combat-center-hud {
  left: 50% !important;
  top: calc(var(--hud-safe-top) + 10px) !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
}

body.in-gameplay .match-timer-panel,
body.landscape-ready.in-gameplay .match-timer-panel {
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 auto 4px !important;
  padding: 0 14px !important;
  grid-template-columns: 16px 1fr !important;
  column-gap: 6px !important;
}

body.in-gameplay .match-timer-panel::before,
body.landscape-ready.in-gameplay .match-timer-panel::before {
  width: 12px !important;
  min-width: 12px !important;
  height: 18px !important;
}

body.in-gameplay .match-timer-panel #arenaTimer,
body.landscape-ready.in-gameplay .match-timer-panel #arenaTimer {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 26px !important;
}

body.in-gameplay .target-status-panel,
body.landscape-ready.in-gameplay .target-status-panel,
body.in-gameplay .target-enemy-hud,
body.landscape-ready.in-gameplay .target-enemy-hud,
body.in-gameplay .target-status-panel .enemy-combatant,
body.landscape-ready.in-gameplay .target-status-panel .enemy-combatant {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
}

body.in-gameplay .target-status-panel .combatant strong,
body.landscape-ready.in-gameplay .target-status-panel .combatant strong {
  left: 112px !important;
  top: 13px !important;
  width: 198px !important;
  max-width: 198px !important;
  height: 24px !important;
  font-size: 21px !important;
  line-height: 24px !important;
}

body.in-gameplay .target-heading,
body.landscape-ready.in-gameplay .target-heading {
  top: 19px !important;
  right: 82px !important;
}

body.in-gameplay .target-status-panel .meter.enemy,
body.landscape-ready.in-gameplay .target-status-panel .meter.enemy {
  left: 98px !important;
  right: 64px !important;
  top: 37px !important;
  height: 16px !important;
  min-height: 16px !important;
}

body.in-gameplay .hud-top-right,
body.landscape-ready.in-gameplay .hud-top-right,
html.telegram-webview body.in-gameplay .hud-top-right,
html.telegram-fullscreen-requested body.in-gameplay .hud-top-right,
html.telegram-fullscreen-active body.in-gameplay .hud-top-right {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--game-stage-width) !important;
  min-width: var(--game-stage-width) !important;
  max-width: var(--game-stage-width) !important;
  height: var(--game-stage-height) !important;
  min-height: var(--game-stage-height) !important;
  max-height: var(--game-stage-height) !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .hud-top-right .minimap-panel,
body.landscape-ready.in-gameplay .hud-top-right .minimap-panel {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: var(--game-stage-width) !important;
  min-width: var(--game-stage-width) !important;
  max-width: var(--game-stage-width) !important;
  height: var(--game-stage-height) !important;
  min-height: var(--game-stage-height) !important;
  max-height: var(--game-stage-height) !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .hud-top-right .hud-location-chip,
body.landscape-ready.in-gameplay .hud-top-right .hud-location-chip {
  position: absolute !important;
  left: var(--hud-layout-title-left) !important;
  top: var(--hud-layout-title-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--hud-layout-title-width) !important;
  min-width: var(--hud-layout-title-width) !important;
  max-width: var(--hud-layout-title-width) !important;
  height: var(--hud-layout-title-height) !important;
  min-height: var(--hud-layout-title-height) !important;
  max-height: var(--hud-layout-title-height) !important;
  background-image: url("/assets/ui/hud-arpg/location-chip-frame-clean.png") !important;
  background-position: 50% 50% !important;
  background-size: 100% 100% !important;
  transform: none !important;
  overflow: visible !important;
}

body.in-gameplay .hud-top-right .hud-location-chip > strong,
body.landscape-ready.in-gameplay .hud-top-right .hud-location-chip > strong {
  position: absolute !important;
  left: var(--hud-layout-title-text-left) !important;
  top: 50% !important;
  right: var(--hud-layout-title-text-right) !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  font-size: var(--hud-layout-title-font-size) !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateY(calc(-50% + var(--hud-layout-title-text-y))) !important;
}

body.in-gameplay .hud-top-right .minimap-frame,
body.landscape-ready.in-gameplay .hud-top-right .minimap-frame {
  position: absolute !important;
  left: var(--hud-layout-minimap-left) !important;
  top: var(--hud-layout-minimap-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--hud-layout-minimap-size) !important;
  min-width: var(--hud-layout-minimap-size) !important;
  max-width: var(--hud-layout-minimap-size) !important;
  height: var(--hud-layout-minimap-size) !important;
  min-height: var(--hud-layout-minimap-size) !important;
  max-height: var(--hud-layout-minimap-size) !important;
  transform: none !important;
}

body.in-gameplay .hud-top-right .minimap-frame::before,
body.landscape-ready.in-gameplay .hud-top-right .minimap-frame::before {
  inset: var(--hud-layout-minimap-ring-inset) !important;
  background-image: url("/assets/ui/hud-arpg/normalized/minimap-ring-square.png") !important;
  background-position: center !important;
  background-size: contain !important;
  clip-path: none !important;
}

body.in-gameplay .hud-top-right .system-action-row,
body.landscape-ready.in-gameplay .hud-top-right .system-action-row,
body.in-gameplay .hud-top-right .hud-system-actions,
body.landscape-ready.in-gameplay .hud-top-right .hud-system-actions {
  position: absolute !important;
  left: var(--hud-layout-portal-left) !important;
  top: var(--hud-layout-portal-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--hud-layout-portal-size) !important;
  min-width: var(--hud-layout-portal-size) !important;
  max-width: var(--hud-layout-portal-size) !important;
  height: var(--hud-layout-portal-size) !important;
  min-height: var(--hud-layout-portal-size) !important;
  max-height: var(--hud-layout-portal-size) !important;
  transform: none !important;
}

body.in-gameplay .hud-top-right #exitLevel.gameplay-exit,
body.landscape-ready.in-gameplay .hud-top-right #exitLevel.gameplay-exit {
  width: var(--hud-layout-portal-size) !important;
  min-width: var(--hud-layout-portal-size) !important;
  max-width: var(--hud-layout-portal-size) !important;
  height: var(--hud-layout-portal-size) !important;
  min-height: var(--hud-layout-portal-size) !important;
  max-height: var(--hud-layout-portal-size) !important;
  background: transparent !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
}

body.in-gameplay .hud-top-right #exitLevel.gameplay-exit::before,
body.landscape-ready.in-gameplay .hud-top-right #exitLevel.gameplay-exit::before {
  background-image: url("/assets/ui/hud-arpg/normalized/teleport-button-square.png") !important;
  background-position: center !important;
  background-size: contain !important;
}

body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
body.landscape-ready.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-webview body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-fullscreen-requested body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-fullscreen-active body.in-gameplay [data-view="gameplay"] .combat-skill-hud {
  position: absolute !important;
  left: var(--hud-layout-axis-x) !important;
  top: auto !important;
  right: auto !important;
  bottom: var(--hud-layout-skills-bottom) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  transform: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .combat-skill-hud .gameplay-abilities,
body.landscape-ready.in-gameplay .combat-skill-hud .gameplay-abilities {
  position: absolute !important;
  inset: auto !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .combat-skill-hud .gameplay-abilities .hud-skill-button,
body.landscape-ready.in-gameplay .combat-skill-hud .gameplay-abilities .hud-skill-button {
  top: auto !important;
  right: auto !important;
  width: var(--hud-layout-small-size) !important;
  min-width: var(--hud-layout-small-size) !important;
  max-width: var(--hud-layout-small-size) !important;
  height: var(--hud-layout-small-size) !important;
  min-height: var(--hud-layout-small-size) !important;
  max-height: var(--hud-layout-small-size) !important;
  pointer-events: auto !important;
}

body.in-gameplay .combat-skill-hud .gameplay-abilities .main-attack,
body.landscape-ready.in-gameplay .combat-skill-hud .gameplay-abilities .main-attack {
  left: var(--hud-layout-main-left) !important;
  bottom: var(--hud-layout-main-bottom) !important;
  width: var(--hud-layout-main-size) !important;
  min-width: var(--hud-layout-main-size) !important;
  max-width: var(--hud-layout-main-size) !important;
  height: var(--hud-layout-main-size) !important;
  min-height: var(--hud-layout-main-size) !important;
  max-height: var(--hud-layout-main-size) !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(2),
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(2) {
  left: var(--hud-layout-skill-1-left) !important;
  bottom: var(--hud-layout-skill-1-bottom) !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(3),
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(3) {
  left: var(--hud-layout-skill-2-left) !important;
  bottom: var(--hud-layout-skill-2-bottom) !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(4),
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(4) {
  left: var(--hud-layout-skill-3-left) !important;
  bottom: var(--hud-layout-skill-3-bottom) !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(5),
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:nth-child(5) {
  left: var(--hud-layout-skill-4-left) !important;
  bottom: var(--hud-layout-skill-4-bottom) !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button > .skill-icon-layer,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button > .skill-icon-layer {
  inset: 18% !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button::before,
body.in-gameplay .combat-skill-hud .hud-skill-button.has-icon::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button.has-icon::before {
  inset: 0 !important;
  z-index: 1 !important;
  background-position: center !important;
  background-size: contain !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack)::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack)::before {
  background-image: url("/assets/ui/hud-arpg/skill-small-frame.png") !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).ready:active::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).ready:active::before {
  background-image: url("/assets/ui/hud-arpg/skill-small-frame-active.png") !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).disabled::before,
body.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).not-enough-mana::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).disabled::before,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button:not(.main-attack).not-enough-mana::before {
  background-image: url("/assets/ui/hud-arpg/skill-small-frame-disabled.png") !important;
}

body.in-gameplay .combat-skill-hud .main-attack::before,
body.landscape-ready.in-gameplay .combat-skill-hud .main-attack::before {
  background-image: url("/assets/ui/hud-arpg/normalized/skill-main-frame.png") !important;
}

body.in-gameplay .combat-skill-hud .main-attack.ready:active::before,
body.landscape-ready.in-gameplay .combat-skill-hud .main-attack.ready:active::before {
  background-image: url("/assets/ui/hud-arpg/normalized/skill-main-frame-active.png") !important;
}

body.in-gameplay .combat-skill-hud .main-attack.disabled::before,
body.in-gameplay .combat-skill-hud .main-attack.not-enough-mana::before,
body.landscape-ready.in-gameplay .combat-skill-hud .main-attack.disabled::before,
body.landscape-ready.in-gameplay .combat-skill-hud .main-attack.not-enough-mana::before {
  background-image: url("/assets/ui/hud-arpg/normalized/skill-main-frame-disabled.png") !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button .skill-icon-layer > img.skill-icon,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button .skill-icon-layer > img.skill-icon {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button > .skill-cooldown,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button > .skill-cooldown {
  inset: 18% !important;
  z-index: 3 !important;
}

body.in-gameplay .target-enemy-hud > .enemy-combatant,
body.landscape-ready.in-gameplay .target-enemy-hud > .enemy-combatant {
  background: none !important;
  isolation: isolate !important;
}

body.in-gameplay .target-enemy-hud .target-status-copy::before,
body.landscape-ready.in-gameplay .target-enemy-hud .target-status-copy::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 92px !important;
  z-index: 0 !important;
  display: block !important;
  background: url("/assets/ui/hud-arpg/enemy-target-frame.png") right center / 420px 74px no-repeat !important;
  pointer-events: none !important;
}

body.in-gameplay .target-enemy-hud .target-medallion,
body.landscape-ready.in-gameplay .target-enemy-hud .target-medallion {
  position: absolute !important;
  left: 2px !important;
  top: 50% !important;
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("/assets/ui/hud-arpg/normalized/enemy-skull-medallion-square.png") center / contain no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay .target-enemy-hud .target-medallion > *,
body.landscape-ready.in-gameplay .target-enemy-hud .target-medallion > * {
  display: none !important;
}

body.in-gameplay .gameplay-abilities .skill-rune,
body.landscape-ready.in-gameplay .gameplay-abilities .skill-rune {
  font-size: 27px !important;
}

body.in-gameplay .gameplay-abilities .main-attack .skill-rune,
body.landscape-ready.in-gameplay .gameplay-abilities .main-attack .skill-rune {
  font-size: 38px !important;
}

body.in-gameplay .objective-hud,
body.landscape-ready.in-gameplay .objective-hud,
body.in-gameplay .combat-log-bar,
body.landscape-ready.in-gameplay .combat-log-bar {
  left: 48% !important;
  bottom: calc(var(--hud-safe-bottom) + 34px) !important;
  width: 470px !important;
  min-width: 0 !important;
  max-width: 470px !important;
  transform: translateX(-50%) !important;
  transform-origin: bottom center !important;
}

body.in-gameplay .combat-log-bar .gameplay-log,
body.landscape-ready.in-gameplay .combat-log-bar .gameplay-log,
body.in-gameplay #combatLog,
body.landscape-ready.in-gameplay #combatLog {
  min-height: 34px !important;
  max-height: 34px !important;
  line-height: 34px !important;
  padding: 0 34px !important;
  font-size: 13px !important;
  text-align: left !important;
}

body.in-gameplay .combat-log-bar .gameplay-log::before,
body.in-gameplay .combat-log-bar .gameplay-log::after,
body.landscape-ready.in-gameplay .combat-log-bar .gameplay-log::before,
body.landscape-ready.in-gameplay .combat-log-bar .gameplay-log::after,
body.in-gameplay #combatLog::before,
body.in-gameplay #combatLog::after,
body.landscape-ready.in-gameplay #combatLog::before,
body.landscape-ready.in-gameplay #combatLog::after {
  display: none !important;
  visibility: hidden !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.in-gameplay .movement-joystick-hud,
body.landscape-ready.in-gameplay .movement-joystick-hud {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.in-gameplay .movement-joystick-hud.is-visible,
body.landscape-ready.in-gameplay .movement-joystick-hud.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

body.in-gameplay #combatMinimapCanvas,
body.landscape-ready.in-gameplay #combatMinimapCanvas {
  width: 92% !important;
  min-width: 92% !important;
  max-width: 92% !important;
  height: 92% !important;
  min-height: 92% !important;
  max-height: 92% !important;
}

body.low-performance-mode.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.landscape-ready.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.in-gameplay .hud-location-chip,
body.low-performance-mode.landscape-ready.in-gameplay .hud-location-chip,
body.low-performance-mode.in-gameplay .minimap-frame,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame,
body.low-performance-mode.in-gameplay .system-action-row #exitLevel,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  body.in-gameplay .hud-top-left,
  body.landscape-ready.in-gameplay .hud-top-left {
    left: calc(var(--hud-safe-left) + 18px) !important;
    top: calc(var(--hud-safe-top) + 30px) !important;
    transform: scale(0.72) !important;
  }

  body.in-gameplay .combat-center-hud,
  body.landscape-ready.in-gameplay .combat-center-hud {
    top: calc(var(--hud-safe-top) + 8px) !important;
    transform: translateX(-50%) scale(0.74) !important;
  }

  body.in-gameplay .gameplay-abilities .skill-rune,
  body.landscape-ready.in-gameplay .gameplay-abilities .skill-rune {
    font-size: 22px !important;
  }

  body.in-gameplay .gameplay-abilities .main-attack .skill-rune,
  body.landscape-ready.in-gameplay .gameplay-abilities .main-attack .skill-rune {
    font-size: 30px !important;
  }

  body.in-gameplay .objective-hud,
  body.landscape-ready.in-gameplay .objective-hud,
  body.in-gameplay .combat-log-bar,
  body.landscape-ready.in-gameplay .combat-log-bar {
    left: 42% !important;
    bottom: calc(var(--hud-safe-bottom) + 8px) !important;
    width: 340px !important;
    max-width: 40dvw !important;
  }

  body.in-gameplay .combat-log-bar .gameplay-log,
  body.landscape-ready.in-gameplay .combat-log-bar .gameplay-log,
  body.in-gameplay #combatLog,
  body.landscape-ready.in-gameplay #combatLog {
    min-height: 24px !important;
    max-height: 24px !important;
    line-height: 24px !important;
    padding: 0 24px !important;
    font-size: 11px !important;
  }
}

/* Keep the complete skill cluster 20% smaller around its bottom-right anchor. */
body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
body.landscape-ready.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-webview body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-fullscreen-requested body.in-gameplay [data-view="gameplay"] .combat-skill-hud,
html.telegram-fullscreen-active body.in-gameplay [data-view="gameplay"] .combat-skill-hud {
  transform: scale(0.8) !important;
  transform-origin: right bottom !important;
}

/* Low-performance GPU budget. Keep every gameplay signal readable while
   removing decorative layers that are expensive in mobile WebViews. */
body.low-performance-mode.in-gameplay .gameplay-panel .battlefield::before,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-panel .battlefield::before,
body.low-performance-mode.in-gameplay .gameplay-panel .battlefield::after,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-panel .battlefield::after {
  display: none !important;
  content: none !important;
}

body.low-performance-mode.in-gameplay .hero-status-panel .player-status-card,
body.low-performance-mode.landscape-ready.in-gameplay .hero-status-panel .player-status-card,
body.low-performance-mode.in-gameplay .hero-portrait-frame,
body.low-performance-mode.landscape-ready.in-gameplay .hero-portrait-frame,
body.low-performance-mode.in-gameplay .match-timer-panel,
body.low-performance-mode.landscape-ready.in-gameplay .match-timer-panel,
body.low-performance-mode.in-gameplay .target-status-panel .enemy-combatant,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .enemy-combatant,
body.low-performance-mode.in-gameplay .target-medallion,
body.low-performance-mode.landscape-ready.in-gameplay .target-medallion,
body.low-performance-mode.in-gameplay .hud-location-chip,
body.low-performance-mode.landscape-ready.in-gameplay .hud-location-chip,
body.low-performance-mode.in-gameplay .minimap-frame,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-exit,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-exit,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-menu-button,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-menu-button,
body.low-performance-mode.in-gameplay .movement-joystick-hud,
body.low-performance-mode.landscape-ready.in-gameplay .movement-joystick-hud,
body.low-performance-mode.in-gameplay .movement-joystick,
body.low-performance-mode.landscape-ready.in-gameplay .movement-joystick,
body.low-performance-mode.in-gameplay .movement-joystick-base,
body.low-performance-mode.landscape-ready.in-gameplay .movement-joystick-base,
body.low-performance-mode.in-gameplay .movement-joystick-knob,
body.low-performance-mode.landscape-ready.in-gameplay .movement-joystick-knob,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button,
body.low-performance-mode.in-gameplay .combat-log-bar .gameplay-log,
body.low-performance-mode.landscape-ready.in-gameplay .combat-log-bar .gameplay-log,
body.low-performance-mode.in-gameplay .level-result-panel,
body.low-performance-mode.landscape-ready.in-gameplay .level-result-panel {
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

body.low-performance-mode.in-gameplay .hero-portrait-frame::before,
body.low-performance-mode.in-gameplay .hero-portrait-frame::after,
body.low-performance-mode.landscape-ready.in-gameplay .hero-portrait-frame::before,
body.low-performance-mode.landscape-ready.in-gameplay .hero-portrait-frame::after,
body.low-performance-mode.in-gameplay .match-timer-panel::before,
body.low-performance-mode.in-gameplay .match-timer-panel::after,
body.low-performance-mode.landscape-ready.in-gameplay .match-timer-panel::before,
body.low-performance-mode.landscape-ready.in-gameplay .match-timer-panel::after,
body.low-performance-mode.in-gameplay .target-status-panel .enemy-combatant::before,
body.low-performance-mode.in-gameplay .target-status-panel .enemy-combatant::after,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .enemy-combatant::before,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .enemy-combatant::after,
body.low-performance-mode.in-gameplay .hud-location-chip::before,
body.low-performance-mode.in-gameplay .hud-location-chip::after,
body.low-performance-mode.landscape-ready.in-gameplay .hud-location-chip::before,
body.low-performance-mode.landscape-ready.in-gameplay .hud-location-chip::after,
body.low-performance-mode.in-gameplay .minimap-frame::before,
body.low-performance-mode.in-gameplay .minimap-frame::after,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame::before,
body.low-performance-mode.landscape-ready.in-gameplay .minimap-frame::after,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-exit::before,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-exit::after,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-exit::before,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-exit::after,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-menu-button::before,
body.low-performance-mode.in-gameplay .system-action-row .gameplay-menu-button::after,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-menu-button::before,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row .gameplay-menu-button::after,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button::before,
body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button::after,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button::before,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button::after,
body.low-performance-mode.in-gameplay .combat-log-bar .gameplay-log::before,
body.low-performance-mode.in-gameplay .combat-log-bar .gameplay-log::after,
body.low-performance-mode.landscape-ready.in-gameplay .combat-log-bar .gameplay-log::before,
body.low-performance-mode.landscape-ready.in-gameplay .combat-log-bar .gameplay-log::after {
  filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

body.low-performance-mode.in-gameplay .hero-status-panel .meter,
body.low-performance-mode.in-gameplay .hero-status-panel .meter i,
body.low-performance-mode.landscape-ready.in-gameplay .hero-status-panel .meter,
body.low-performance-mode.landscape-ready.in-gameplay .hero-status-panel .meter i,
body.low-performance-mode.in-gameplay .target-status-panel .meter,
body.low-performance-mode.in-gameplay .target-status-panel .meter i,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .meter,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .meter i,
body.low-performance-mode.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.landscape-ready.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-icon-layer,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune,
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-cooldown,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer img,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-icon-layer .skill-rune,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-cooldown,
body.low-performance-mode.in-gameplay .hit-text,
body.low-performance-mode.landscape-ready.in-gameplay .hit-text {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: none !important;
}

body.low-performance-mode.in-gameplay .hero-status-panel .meter::before,
body.low-performance-mode.in-gameplay .target-status-panel .meter::before,
body.low-performance-mode.landscape-ready.in-gameplay .hero-status-panel .meter::before,
body.low-performance-mode.landscape-ready.in-gameplay .target-status-panel .meter::before {
  display: none !important;
  content: none !important;
  mix-blend-mode: normal !important;
}

body.low-performance-mode.in-gameplay .system-action-row #exitLevel.teleport-casting::after,
body.low-performance-mode.landscape-ready.in-gameplay .system-action-row #exitLevel.teleport-casting::after {
  box-shadow: none !important;
}

body.low-performance-mode.in-gameplay .hit-text.show,
body.low-performance-mode.landscape-ready.in-gameplay .hit-text.show {
  opacity: 1 !important;
  transform: translate(-50%, -100%) !important;
}

body.low-performance-mode.in-gameplay .movement-joystick-hud,
body.low-performance-mode.landscape-ready.in-gameplay .movement-joystick-hud {
  will-change: auto !important;
}

body.low-performance-mode.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.landscape-ready.in-gameplay #combatMinimapCanvas,
body.low-performance-mode.in-gameplay .match-timer-panel,
body.low-performance-mode.landscape-ready.in-gameplay .match-timer-panel {
  clip-path: none !important;
}

/* The current gameplay layout writes an identity stage transform. Avoid
   promoting the complete canvas + HUD tree to an extra layer in low mode. */
body.low-performance-mode.in-gameplay .gameplay-panel,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-panel {
  transform: none !important;
}

/* Cooldown remains an immediate, readable disabled state without repainting
   a conic gradient on every progress update. Teleport progress is separate. */
body.low-performance-mode.in-gameplay .gameplay-abilities .skill-cooldown,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .skill-cooldown {
  background: rgba(2, 4, 7, 0.72) !important;
}

body.low-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button.cooldown .skill-cooldown,
body.low-performance-mode.landscape-ready.in-gameplay .gameplay-abilities .hud-skill-button.cooldown .skill-cooldown {
  opacity: 0.58 !important;
}

/* Keep the teleport artwork and its interactive button on the same rectangle. */
body.in-gameplay .hud-top-right .system-action-row #exitLevel.gameplay-exit::before,
body.landscape-ready.in-gameplay .hud-top-right .system-action-row #exitLevel.gameplay-exit::before {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center !important;
}

/* Warrior Combat Grammar HUD. The runtime mounts this element as a sibling of
   #combatAbilities so the five ability-button nth-child positions stay stable. */
body.in-gameplay #combatGrammarHud.combat-grammar-hud,
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud {
  --combat-grammar-slot-size: var(--hud-layout-grammar-slot-size, 36px);
  --combat-grammar-slot-gap: var(--hud-layout-grammar-slot-gap, 7px);
  --combat-grammar-glyph-color: #efd18a;
  position: absolute !important;
  left: var(--hud-layout-grammar-left, -463px) !important;
  bottom: var(--hud-layout-grammar-bottom, 75px) !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: var(--hud-layout-grammar-width, 140px) !important;
  min-width: var(--hud-layout-grammar-width, 140px) !important;
  max-width: var(--hud-layout-grammar-width, 140px) !important;
  height: var(--hud-layout-grammar-height, 50px) !important;
  min-height: var(--hud-layout-grammar-height, 50px) !important;
  max-height: var(--hud-layout-grammar-height, 50px) !important;
  margin: 0 !important;
  padding:
    var(--hud-layout-grammar-padding-y, 6px)
    var(--hud-layout-grammar-padding-x, 8px) !important;
  border: 1px solid rgba(209, 174, 100, 0.72) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg, rgba(195, 149, 67, 0.08), transparent 16% 84%, rgba(195, 149, 67, 0.08)),
    linear-gradient(180deg, rgba(31, 27, 24, 0.96), rgba(6, 8, 11, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 179, 0.06),
    inset 0 -10px 18px rgba(0, 0, 0, 0.24),
    0 3px 7px rgba(0, 0, 0, 0.58) !important;
  filter: none !important;
  isolation: isolate !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay #combatGrammarHud.combat-grammar-hud::before,
body.in-gameplay #combatGrammarHud.combat-grammar-hud::after,
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud::before,
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(225, 190, 116, 0.78);
  background: #13100e;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

body.in-gameplay #combatGrammarHud.combat-grammar-hud::before,
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud::before {
  left: -6px;
}

body.in-gameplay #combatGrammarHud.combat-grammar-hud::after,
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud::after {
  right: -6px;
}

body.in-gameplay #combatGrammarHud.combat-grammar-hud[hidden],
body.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud[hidden] {
  display: none !important;
}

#combatGrammarHud .combat-grammar-slots {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, var(--combat-grammar-slot-size));
  place-items: center;
  gap: var(--combat-grammar-slot-gap);
  width: max-content;
  height: var(--combat-grammar-slot-size);
  margin: 0;
  padding: 0;
}

#combatGrammarHud .combat-grammar-slot {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--combat-grammar-slot-size);
  min-width: var(--combat-grammar-slot-size);
  max-width: var(--combat-grammar-slot-size);
  height: var(--combat-grammar-slot-size);
  min-height: var(--combat-grammar-slot-size);
  max-height: var(--combat-grammar-slot-size);
  border: 1px solid rgba(210, 181, 119, 0.58);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 38%, rgba(212, 177, 105, 0.13), transparent 58%),
    linear-gradient(155deg, rgba(24, 22, 22, 0.94), rgba(4, 6, 9, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 237, 190, 0.06),
    inset 0 -8px 14px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(0, 0, 0, 0.72);
  opacity: 0.72;
  transform: translateZ(0);
  transition: border-color 120ms ease, opacity 120ms ease, transform 120ms ease;
  overflow: hidden;
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-slot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(244, 218, 160, 0.08);
  border-radius: 3px;
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-slot.is-filled,
#combatGrammarHud .combat-grammar-slot[data-filled="true"] {
  border-color: rgba(238, 204, 129, 0.92);
  opacity: 1;
  transform: translateY(-1px);
}

#combatGrammarHud .combat-grammar-slot.is-current {
  border-color: rgba(255, 235, 174, 1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 214, 0.14),
    0 0 10px rgba(225, 180, 86, 0.28);
}

#combatGrammarHud[data-seal="bond"] .combat-grammar-slot.is-bond-linked {
  overflow: visible;
}

#combatGrammarHud[data-seal="bond"] .combat-grammar-slot.is-bond-linked::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--combat-grammar-slot-gap) - 3px);
  top: 50%;
  z-index: 2;
  width: calc(var(--combat-grammar-slot-gap) + 6px);
  height: 12px;
  background: url("/assets/ui/combat-grammar/warrior_bond_link.png") center / 100% 100% no-repeat;
  opacity: 0.88;
  transform: translateY(-50%);
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-glyph,
.combat-skill-hud .combat-grammar-badge {
  --combat-grammar-glyph-color: #efd18a;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  color: var(--combat-grammar-glyph-color);
  flex: 0 0 auto;
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-glyph::before,
#combatGrammarHud .combat-grammar-glyph::after,
.combat-skill-hud .combat-grammar-badge::before,
.combat-skill-hud .combat-grammar-badge::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-glyph.is-strike,
#combatGrammarHud .combat-grammar-glyph[data-glyph="strike"],
.combat-skill-hud .combat-grammar-badge.is-strike,
.combat-skill-hud .combat-grammar-badge[data-glyph="strike"] {
  --combat-grammar-glyph-color: #f4d38a;
}

#combatGrammarHud .combat-grammar-glyph.is-strike::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="strike"]::before,
.combat-skill-hud .combat-grammar-badge.is-strike::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="strike"]::before {
  left: 39%;
  top: 5%;
  width: 22%;
  height: 80%;
  border: 1px solid rgba(255, 248, 218, 0.55);
  background: linear-gradient(90deg, #745624, var(--combat-grammar-glyph-color) 58%, #fff1b5);
  clip-path: polygon(50% 0, 100% 18%, 72% 88%, 50% 100%, 28% 88%, 0 18%);
  transform: rotate(38deg);
  transform-origin: 50% 64%;
}

#combatGrammarHud .combat-grammar-glyph.is-strike::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="strike"]::after,
.combat-skill-hud .combat-grammar-badge.is-strike::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="strike"]::after {
  left: 22%;
  top: 70%;
  width: 56%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(38deg);
}

#combatGrammarHud .combat-grammar-glyph.is-rupture,
#combatGrammarHud .combat-grammar-glyph[data-glyph="rupture"],
.combat-skill-hud .combat-grammar-badge.is-rupture,
.combat-skill-hud .combat-grammar-badge[data-glyph="rupture"] {
  --combat-grammar-glyph-color: #ee9b7b;
}

#combatGrammarHud .combat-grammar-glyph.is-rupture::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="rupture"]::before,
.combat-skill-hud .combat-grammar-badge.is-rupture::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="rupture"]::before {
  inset: 19%;
  border: 2px solid currentColor;
  background:
    linear-gradient(118deg, transparent 43%, currentColor 45% 50%, transparent 52%),
    rgba(80, 26, 19, 0.42);
  transform: rotate(45deg);
}

#combatGrammarHud .combat-grammar-glyph.is-rupture::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="rupture"]::after,
.combat-skill-hud .combat-grammar-badge.is-rupture::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="rupture"]::after {
  left: 46%;
  top: 17%;
  width: 2px;
  height: 66%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 28%, 0 42%, 100% 58%, 0 72%, 100% 100%, 0 100%);
  transform: rotate(-20deg);
}

#combatGrammarHud .combat-grammar-glyph.is-invocation,
#combatGrammarHud .combat-grammar-glyph[data-glyph="invocation"],
.combat-skill-hud .combat-grammar-badge.is-invocation,
.combat-skill-hud .combat-grammar-badge[data-glyph="invocation"] {
  --combat-grammar-glyph-color: #cfb9ff;
}

#combatGrammarHud .combat-grammar-glyph.is-invocation::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="invocation"]::before,
.combat-skill-hud .combat-grammar-badge.is-invocation::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="invocation"]::before {
  inset: 15%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
}

#combatGrammarHud .combat-grammar-glyph.is-invocation::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="invocation"]::after,
.combat-skill-hud .combat-grammar-badge.is-invocation::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="invocation"]::after {
  left: 45%;
  top: 2%;
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(22deg);
}

#combatGrammarHud .combat-grammar-glyph.is-flow,
#combatGrammarHud .combat-grammar-glyph[data-glyph="flow"],
.combat-skill-hud .combat-grammar-badge.is-flow,
.combat-skill-hud .combat-grammar-badge[data-glyph="flow"] {
  --combat-grammar-glyph-color: #86d0ed;
}

#combatGrammarHud .combat-grammar-glyph.is-flow::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="flow"]::before,
.combat-skill-hud .combat-grammar-badge.is-flow::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="flow"]::before {
  inset: 13%;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-34deg);
}

#combatGrammarHud .combat-grammar-glyph.is-flow::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="flow"]::after,
.combat-skill-hud .combat-grammar-badge.is-flow::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="flow"]::after {
  left: 34%;
  top: 34%;
  width: 35%;
  height: 35%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(30deg);
}

#combatGrammarHud .combat-grammar-glyph.is-impulse,
#combatGrammarHud .combat-grammar-glyph[data-glyph="impulse"],
.combat-skill-hud .combat-grammar-badge.is-impulse,
.combat-skill-hud .combat-grammar-badge[data-glyph="impulse"] {
  --combat-grammar-glyph-color: #ffd271;
}

#combatGrammarHud .combat-grammar-glyph.is-impulse::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="impulse"]::before,
.combat-skill-hud .combat-grammar-badge.is-impulse::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="impulse"]::before {
  left: 12%;
  top: 47%;
  width: 69%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-34deg);
  transform-origin: 50% 50%;
}

#combatGrammarHud .combat-grammar-glyph.is-impulse::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="impulse"]::after,
.combat-skill-hud .combat-grammar-badge.is-impulse::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="impulse"]::after {
  right: 9%;
  top: 13%;
  width: 38%;
  height: 38%;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(11deg);
}

#combatGrammarHud .combat-grammar-glyph.is-mark,
#combatGrammarHud .combat-grammar-glyph[data-glyph="mark"],
.combat-skill-hud .combat-grammar-badge.is-mark,
.combat-skill-hud .combat-grammar-badge[data-glyph="mark"] {
  --combat-grammar-glyph-color: #9be7c7;
}

#combatGrammarHud .combat-grammar-glyph.is-mark::before,
#combatGrammarHud .combat-grammar-glyph[data-glyph="mark"]::before,
.combat-skill-hud .combat-grammar-badge.is-mark::before,
.combat-skill-hud .combat-grammar-badge[data-glyph="mark"]::before {
  inset: 10%;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
}

#combatGrammarHud .combat-grammar-glyph.is-mark::after,
#combatGrammarHud .combat-grammar-glyph[data-glyph="mark"]::after,
.combat-skill-hud .combat-grammar-badge.is-mark::after,
.combat-skill-hud .combat-grammar-badge[data-glyph="mark"]::after {
  inset: 38%;
  border-radius: 50%;
  background: #101517;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34);
}

body.in-gameplay .combat-skill-hud .combat-grammar-badge,
body.landscape-ready.in-gameplay .combat-skill-hud .combat-grammar-badge {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  z-index: 7 !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border: 1px solid rgba(239, 209, 138, 0.7) !important;
  border-radius: 50% !important;
  background: rgba(6, 8, 11, 0.9) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  transform: none !important;
  opacity: 0.96 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.in-gameplay .combat-skill-hud .main-attack .combat-grammar-badge,
body.landscape-ready.in-gameplay .combat-skill-hud .main-attack .combat-grammar-badge {
  top: 9px !important;
  right: 9px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button.is-pair-hint,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button.is-pair-hint {
  outline: 1px solid rgba(238, 201, 122, 0.92) !important;
  outline-offset: -3px !important;
}

body.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint,
body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint {
  outline: 2px solid rgba(255, 226, 151, 0.96) !important;
  outline-offset: -3px !important;
  animation: combatGrammarPhraseHint 900ms ease-in-out infinite !important;
  will-change: transform;
}

#combatGrammarHud.is-crumbling .combat-grammar-slot.is-filled,
#combatGrammarHud.is-crumbling .combat-grammar-slot[data-filled="true"] {
  animation: combatGrammarCrumble 1500ms cubic-bezier(0.34, 0.02, 0.55, 1) both;
}

#combatGrammarHud.is-crumbling .combat-grammar-glyph {
  animation: combatGrammarGlyphDust 1500ms ease-in both;
}

#combatGrammarHud .combat-grammar-announcement {
  position: absolute;
  left: auto;
  top: 50%;
  right: calc(100% + 8px);
  bottom: auto;
  z-index: 10;
  display: block;
  box-sizing: border-box;
  width: min(150px, 24dvw);
  min-width: 0;
  max-width: min(150px, 24dvw);
  padding: 5px 8px 6px;
  border: 1px solid rgba(226, 190, 111, 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(22, 18, 16, 0.94), rgba(5, 7, 10, 0.94));
  color: #ffe7ad;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  overflow: hidden;
  pointer-events: none;
}

#combatGrammarHud .combat-grammar-announcement.is-visible {
  animation: combatGrammarAnnouncement 700ms ease-out both;
}

/* Compact landscape keeps the phrase caption in the lane left of the rail. */
@media (orientation: landscape) and (max-height: 520px) {
  body.in-gameplay #combatGrammarHud .combat-grammar-announcement,
  body.landscape-ready.in-gameplay #combatGrammarHud .combat-grammar-announcement {
    width: min(132px, 22dvw);
    max-width: min(132px, 22dvw);
    padding-inline: 6px;
    font-size: 10px;
  }
}

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

@keyframes combatGrammarCrumble {
  0% {
    opacity: 1;
    transform: translateY(-1px) rotate(0deg);
  }
  58% {
    opacity: 0.78;
  }
  100% {
    opacity: 0.2;
    transform: translateY(7px) rotate(5deg) scale(0.78);
  }
}

@keyframes combatGrammarGlyphDust {
  0%, 46% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0.08;
    transform: translateY(5px) scale(0.62);
  }
}

@keyframes combatGrammarAnnouncement {
  0% {
    opacity: 0;
    transform: translate(6px, -50%) scale(0.96);
  }
  18%, 72% {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-4px, -50%) scale(0.98);
  }
}

body.low-performance-mode.in-gameplay #combatGrammarHud.combat-grammar-hud,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud.combat-grammar-hud,
body.low-performance-mode.in-gameplay #combatGrammarHud .combat-grammar-slot,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud .combat-grammar-slot,
body.low-performance-mode.in-gameplay .combat-skill-hud .combat-grammar-badge,
body.low-performance-mode.landscape-ready.in-gameplay .combat-skill-hud .combat-grammar-badge {
  filter: none !important;
  box-shadow: none !important;
  transition: none !important;
}

body.low-performance-mode.in-gameplay #combatGrammarHud[data-seal="bond"] .combat-grammar-slot.is-bond-linked::before,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud[data-seal="bond"] .combat-grammar-slot.is-bond-linked::before {
  opacity: 0.72;
  filter: none !important;
}

body.low-performance-mode.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint,
body.low-performance-mode.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint,
body.low-performance-mode.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-slot,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-slot,
body.low-performance-mode.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-glyph,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-glyph,
body.low-performance-mode.in-gameplay #combatGrammarHud .combat-grammar-announcement.is-visible,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud .combat-grammar-announcement.is-visible {
  animation: none !important;
  will-change: auto !important;
}

body.low-performance-mode.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-slot,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud.is-crumbling .combat-grammar-slot {
  opacity: 0.48 !important;
  transform: translateY(2px) !important;
}

body.low-performance-mode.in-gameplay #combatGrammarHud .combat-grammar-announcement.is-visible,
body.low-performance-mode.landscape-ready.in-gameplay #combatGrammarHud .combat-grammar-announcement.is-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

/* Portrait gameplay is opt-in. These rules do not alter the existing
   landscape-first runtime until either html or body receives this class. */
@media (orientation: portrait) and (max-width: 480px) {
  body.portrait-gameplay.in-gameplay .combat-center-hud,
  html.portrait-gameplay body.in-gameplay .combat-center-hud {
    left: calc(var(--hud-safe-left) + 8px) !important;
    right: calc(var(--hud-safe-right) + 8px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 420px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    transform: none !important;
  }

  body.portrait-gameplay.in-gameplay .target-status-panel,
  body.portrait-gameplay.in-gameplay .target-enemy-hud,
  body.portrait-gameplay.in-gameplay .target-status-panel .enemy-combatant,
  html.portrait-gameplay body.in-gameplay .target-status-panel,
  html.portrait-gameplay body.in-gameplay .target-enemy-hud,
  html.portrait-gameplay body.in-gameplay .target-status-panel .enemy-combatant {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.portrait-gameplay.in-gameplay .target-enemy-hud .target-status-copy::before,
  html.portrait-gameplay body.in-gameplay .target-enemy-hud .target-status-copy::before {
    inset: 0 !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }

  body.portrait-gameplay.in-gameplay .target-enemy-hud .target-medallion,
  html.portrait-gameplay body.in-gameplay .target-enemy-hud .target-medallion {
    left: 1px !important;
    width: clamp(68px, 20dvw, 84px) !important;
    min-width: clamp(68px, 20dvw, 84px) !important;
    max-width: clamp(68px, 20dvw, 84px) !important;
    height: clamp(68px, 20dvw, 84px) !important;
    min-height: clamp(68px, 20dvw, 84px) !important;
    max-height: clamp(68px, 20dvw, 84px) !important;
  }

  body.portrait-gameplay.in-gameplay .target-status-panel .combatant strong,
  html.portrait-gameplay body.in-gameplay .target-status-panel .combatant strong {
    left: 26.67% !important;
    width: 47.14% !important;
    max-width: 47.14% !important;
    font-size: clamp(17px, 5dvw, 21px) !important;
  }

  body.portrait-gameplay.in-gameplay .target-heading,
  html.portrait-gameplay body.in-gameplay .target-heading {
    right: 19.52% !important;
  }

  body.portrait-gameplay.in-gameplay .target-status-panel .meter.enemy,
  html.portrait-gameplay body.in-gameplay .target-status-panel .meter.enemy {
    left: 23.33% !important;
    right: 15.24% !important;
  }

  body.portrait-gameplay.in-gameplay [data-view="gameplay"] .combat-skill-hud,
  html.portrait-gameplay body.in-gameplay [data-view="gameplay"] .combat-skill-hud {
    /* At the target portrait heights the layout emits 60px skills. Keeping
       the existing 0.8 visual scale yields a real 48px touch rectangle. */
    left: clamp(
      calc(var(--hud-safe-left) + 195px),
      var(--hud-layout-axis-x),
      calc(100dvw - var(--hud-safe-right) - 52px)
    ) !important;
    transform: scale(0.8) !important;
    transform-origin: right bottom !important;
  }

  body.portrait-gameplay.in-gameplay .combat-skill-hud .gameplay-abilities .hud-skill-button:not(.main-attack),
  html.portrait-gameplay body.in-gameplay .combat-skill-hud .gameplay-abilities .hud-skill-button:not(.main-attack) {
    width: max(60px, var(--hud-layout-small-size)) !important;
    min-width: max(60px, var(--hud-layout-small-size)) !important;
    max-width: max(60px, var(--hud-layout-small-size)) !important;
    height: max(60px, var(--hud-layout-small-size)) !important;
    min-height: max(60px, var(--hud-layout-small-size)) !important;
    max-height: max(60px, var(--hud-layout-small-size)) !important;
  }

  body.portrait-gameplay.in-gameplay #combatGrammarHud.combat-grammar-hud,
  html.portrait-gameplay body.in-gameplay #combatGrammarHud.combat-grammar-hud {
    --combat-grammar-slot-size: 34px;
    --combat-grammar-slot-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint,
  body.landscape-ready.in-gameplay .combat-skill-hud .hud-skill-button.is-phrase-hint,
  #combatGrammarHud.is-crumbling .combat-grammar-slot,
  #combatGrammarHud.is-crumbling .combat-grammar-glyph,
  #combatGrammarHud .combat-grammar-announcement.is-visible {
    animation: none !important;
    will-change: auto !important;
  }

  #combatGrammarHud .combat-grammar-announcement.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Mobile adaptive tiers keep combat feedback intact while removing compositor
   work that does not communicate gameplay state. */
body.balanced-performance-mode.in-gameplay .gameplay-panel .battlefield::before,
body.balanced-performance-mode.in-gameplay .gameplay-panel .battlefield::after,
body.balanced-performance-mode.in-gameplay .hero-portrait-frame,
body.balanced-performance-mode.in-gameplay .target-status-panel .enemy-combatant,
body.balanced-performance-mode.in-gameplay .hud-location-chip,
body.balanced-performance-mode.in-gameplay .minimap-frame,
body.balanced-performance-mode.in-gameplay .movement-joystick,
body.balanced-performance-mode.in-gameplay .movement-joystick-knob,
body.balanced-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button,
body.balanced-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.balanced-performance-mode.in-gameplay .gameplay-panel .battlefield::before,
body.balanced-performance-mode.in-gameplay .gameplay-panel .battlefield::after,
body.balanced-performance-mode.in-gameplay .hero-portrait-frame::before,
body.balanced-performance-mode.in-gameplay .hero-portrait-frame::after,
body.balanced-performance-mode.in-gameplay .minimap-frame::before,
body.balanced-performance-mode.in-gameplay .minimap-frame::after,
body.balanced-performance-mode.in-gameplay .movement-joystick::before,
body.balanced-performance-mode.in-gameplay .movement-joystick::after {
  animation: none !important;
}

body.emergency-performance-mode.in-gameplay .gameplay-panel .battlefield::before,
body.emergency-performance-mode.in-gameplay .gameplay-panel .battlefield::after,
body.emergency-performance-mode.in-gameplay .hero-status-panel,
body.emergency-performance-mode.in-gameplay .target-status-panel,
body.emergency-performance-mode.in-gameplay .match-timer-panel,
body.emergency-performance-mode.in-gameplay .hud-location-chip,
body.emergency-performance-mode.in-gameplay .minimap-frame,
body.emergency-performance-mode.in-gameplay .system-action-row,
body.emergency-performance-mode.in-gameplay .movement-joystick-hud,
body.emergency-performance-mode.in-gameplay .movement-joystick,
body.emergency-performance-mode.in-gameplay .movement-joystick-knob,
body.emergency-performance-mode.in-gameplay .gameplay-abilities .hud-skill-button,
body.emergency-performance-mode.in-gameplay .combat-log-bar .gameplay-log,
body.emergency-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.emergency-performance-mode.in-gameplay .gameplay-panel .battlefield::before,
body.emergency-performance-mode.in-gameplay .gameplay-panel .battlefield::after,
body.emergency-performance-mode.in-gameplay .hero-portrait-frame::before,
body.emergency-performance-mode.in-gameplay .hero-portrait-frame::after,
body.emergency-performance-mode.in-gameplay .target-medallion,
body.emergency-performance-mode.in-gameplay .minimap-frame::before,
body.emergency-performance-mode.in-gameplay .minimap-frame::after,
body.emergency-performance-mode.in-gameplay .movement-joystick::before,
body.emergency-performance-mode.in-gameplay .movement-joystick::after,
body.emergency-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-toggle-chevron {
  animation: none !important;
  transition: none !important;
}

/* Mission objective drawer. It lives in stage space and only its toggle
   accepts input, so collapsing it restores the left movement lane. */
body.in-gameplay #missionObjectiveHud.mission-objective-hud,
body.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud {
  --mission-objective-toggle-size: 48px;
  --mission-objective-panel-height: 82px;
  --mission-objective-progress: 0;
  position: absolute !important;
  left: calc(var(--hud-safe-left) + 8px) !important;
  top: calc(var(--hud-safe-top) + clamp(150px, 28dvh, 220px)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 52 !important;
  display: block !important;
  width: min(
    284px,
    calc(var(--game-stage-width) - var(--hud-safe-left) - var(--hud-safe-right) - 28px)
  ) !important;
  min-width: 0 !important;
  max-width: 284px !important;
  height: var(--mission-objective-panel-height) !important;
  min-height: var(--mission-objective-panel-height) !important;
  max-height: var(--mission-objective-panel-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: transform 180ms ease !important;
  overflow: visible !important;
  pointer-events: none !important;
}

body.in-gameplay #missionObjectiveHud.mission-objective-hud[hidden],
body.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud[hidden] {
  display: none !important;
}

body.in-gameplay #missionObjectiveHud.mission-objective-hud.is-collapsed,
body.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud.is-collapsed {
  transform: translateX(calc(-100% + var(--mission-objective-toggle-size))) !important;
}

#missionObjectiveHud .mission-objective-panel {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr 3px;
  box-sizing: border-box;
  width: calc(100% - var(--mission-objective-toggle-size));
  height: var(--mission-objective-panel-height);
  padding: 9px 12px 9px;
  border: 1px solid rgba(175, 130, 67, 0.76);
  border-left: 2px solid #c99443;
  border-radius: 0 6px 6px 0;
  background:
    linear-gradient(90deg, rgba(201, 148, 67, 0.09), transparent 32%),
    rgba(8, 10, 14, 0.94);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.42);
  color: #e8d6a6;
  opacity: 1;
  visibility: visible;
  transition: opacity 100ms ease, visibility 100ms ease;
  overflow: hidden;
  pointer-events: none;
}

#missionObjectiveHud.is-collapsed .mission-objective-panel {
  opacity: 0;
  visibility: hidden;
}

#missionObjectiveHud .mission-objective-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: #d6a95a;
  font-size: 10px;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#missionObjectiveHud .mission-objective-heading b {
  flex: 0 0 auto;
  color: #9b8a6a;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

#missionObjectiveHud #missionObjectiveText {
  align-self: center;
  display: -webkit-box;
  min-width: 0;
  max-height: 32px;
  margin: 1px 0 4px;
  color: #f0e3c2;
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
  letter-spacing: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#missionObjectiveHud .mission-objective-progress {
  position: relative;
  align-self: end;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(93, 74, 48, 0.55);
  overflow: hidden;
}

#missionObjectiveHud .mission-objective-progress > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f6634, #d6a95a 72%, #f0d58e);
  transform: scaleX(var(--mission-objective-progress));
  transform-origin: left center;
  transition: transform 180ms ease;
}

#missionObjectiveHud[data-complete="true"] .mission-objective-panel {
  border-color: rgba(112, 157, 125, 0.8);
  border-left-color: #79a98a;
}

#missionObjectiveHud[data-complete="true"] .mission-objective-heading {
  color: #a8d0af;
}

#missionObjectiveHud[data-complete="true"] .mission-objective-progress > i {
  background: linear-gradient(90deg, #577d62, #79a98a 72%, #b6d9bc);
}

#missionObjectiveHud .mission-objective-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 9px;
  place-items: center;
  box-sizing: border-box;
  width: var(--mission-objective-toggle-size);
  min-width: var(--mission-objective-toggle-size);
  max-width: var(--mission-objective-toggle-size);
  height: var(--mission-objective-toggle-size);
  min-height: var(--mission-objective-toggle-size);
  max-height: var(--mission-objective-toggle-size);
  margin: 0;
  padding: 0 7px 0 9px;
  border: 1px solid rgba(196, 150, 77, 0.86);
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, rgba(34, 30, 25, 0.98), rgba(7, 9, 12, 0.98));
  color: #e5bd6c;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.46);
  transform: translateY(-50%);
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
}

#missionObjectiveHud .mission-objective-toggle:focus-visible {
  outline: 2px solid #efd18a;
  outline-offset: 2px;
}

#missionObjectiveHud .mission-objective-toggle:active {
  background: linear-gradient(180deg, rgba(61, 46, 28, 0.98), rgba(13, 12, 12, 0.98));
}

@keyframes mission-objective-attention {
  0%,
  100% {
    border-color: rgba(196, 150, 77, 0.86);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.46), 0 0 0 rgba(214, 169, 90, 0);
    color: #e5bd6c;
  }

  50% {
    border-color: rgba(239, 200, 121, 0.96);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.46), 0 0 11px rgba(214, 169, 90, 0.42);
    color: #f5dda4;
  }
}

#missionObjectiveHud.is-collapsed.is-unread .mission-objective-toggle {
  animation: mission-objective-attention 1.65s ease-in-out infinite;
}

#missionObjectiveHud .mission-objective-toggle-mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(223, 181, 100, 0.78);
  transform: rotate(45deg);
  color: #f2d68f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

#missionObjectiveHud .mission-objective-toggle-mark > b {
  display: block;
  transform: rotate(-45deg);
  text-indent: 1px;
}

#missionObjectiveHud .mission-objective-toggle-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(135deg);
  transition: transform 180ms ease;
}

#missionObjectiveHud.is-collapsed .mission-objective-toggle-chevron {
  transform: rotate(-45deg);
}

body.in-gameplay.level-result-open #missionObjectiveHud,
body.landscape-ready.in-gameplay.level-result-open #missionObjectiveHud {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-height: 520px) and (orientation: landscape) {
  body.in-gameplay #missionObjectiveHud.mission-objective-hud,
  body.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud {
    --mission-objective-panel-height: 68px;
    top: calc(var(--hud-safe-top) + 142px) !important;
    width: min(
      250px,
      calc(var(--game-stage-width) - var(--hud-safe-left) - var(--hud-safe-right) - 24px)
    ) !important;
    max-width: 250px !important;
  }

  #missionObjectiveHud .mission-objective-panel {
    grid-template-rows: auto 1fr 2px;
    padding: 7px 10px 7px;
  }

  #missionObjectiveHud #missionObjectiveText {
    max-height: 26px;
    margin: 0 0 3px;
    font-size: 11px;
    line-height: 13px;
  }

  #missionObjectiveHud .mission-objective-heading,
  #missionObjectiveHud .mission-objective-heading b {
    font-size: 9px;
    line-height: 11px;
  }

  #missionObjectiveHud .mission-objective-progress {
    height: 2px;
  }
}

@media (orientation: portrait) and (max-width: 480px) {
  body.portrait-gameplay.in-gameplay #missionObjectiveHud.mission-objective-hud,
  html.portrait-gameplay body.in-gameplay #missionObjectiveHud.mission-objective-hud {
    top: calc(var(--hud-safe-top) + 164px) !important;
    width: min(
      270px,
      calc(100dvw - var(--hud-safe-left) - var(--hud-safe-right) - 20px)
    ) !important;
    max-width: 270px !important;
  }
}

body.low-performance-mode.in-gameplay #missionObjectiveHud.mission-objective-hud,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud,
body.low-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-panel,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud .mission-objective-panel,
body.low-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-progress > i,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud .mission-objective-progress > i,
body.low-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-toggle-chevron,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud .mission-objective-toggle-chevron {
  transition: none !important;
}

body.low-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-panel,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud .mission-objective-panel,
body.low-performance-mode.in-gameplay #missionObjectiveHud .mission-objective-toggle,
body.low-performance-mode.landscape-ready.in-gameplay #missionObjectiveHud .mission-objective-toggle {
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.in-gameplay #missionObjectiveHud.mission-objective-hud,
  body.landscape-ready.in-gameplay #missionObjectiveHud.mission-objective-hud,
  #missionObjectiveHud .mission-objective-panel,
  #missionObjectiveHud .mission-objective-progress > i,
  #missionObjectiveHud .mission-objective-toggle-chevron,
  #missionObjectiveHud .mission-objective-toggle {
    transition: none !important;
    animation: none !important;
  }
}