/* v644: focused fixes for input, dock spacing, audio, chat and HUD. */

/* The switch is a real two-state control: no pseudo-labels that stretch it into a button. */
#settingsPanel.settings-panel-v480 .settings-option-v269 {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 48px !important;
  align-items: center !important;
  padding: 8px 12px !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 > span {
  order: 0 !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 input {
  display: none !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 i {
  order: 1 !important;
  position: relative !important;
  display: block !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid #102d40 !important;
  border-radius: 999px !important;
  background: #1b3447 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25) !important;
  transition: background-color .14s ease !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 i::after,
#settingsPanel.settings-panel-v480 .settings-option-v269 input:checked + i::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px auto 2px 2px !important;
  display: block !important;
  width: 18px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #d9edf4 !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
  transition: transform .14s ease, background-color .14s ease !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 input:checked + i {
  border-color: #347b22 !important;
  background: #63c832 !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 input:checked + i::after {
  background: #ecfbff !important;
  transform: translateX(20px) !important;
}
#settingsPanel.settings-panel-v480 .settings-option-v269 input:focus-visible + i {
  outline: 2px solid #d6f5ff !important;
  outline-offset: 2px !important;
}

/* Stable, full-width audio tracks with a clear thumb in Chromium and Firefox. */
#settingsPanel.settings-panel-v480 .settings-audio-v301 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px 14px !important;
  align-items: center !important;
  min-height: 68px !important;
  padding: 10px 12px 12px !important;
  overflow: visible !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 > span {
  display: flex !important;
  grid-column: 1 / -1 !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 output {
  margin: 0 !important;
  color: #c7f0ff !important;
  font: 800 13px/1 var(--font-main, Arial, sans-serif) !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  /* Expand the native input by one thumb radius so the thumb center reaches
     the exact visual endpoints of the track at 0% and 100%. */
  width: calc(100% + 18px) !important;
  min-width: 0 !important;
  height: 24px !important;
  margin: 0 -9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: #52c6e6 !important;
  cursor: pointer !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box !important;
  width: calc(100% - 18px) !important;
  margin: 0 9px !important;
  height: 8px !important;
  border: 1px solid #0d2c40 !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #56c5e4 0, #56c5e4 var(--range-fill, 0%), #17384d var(--range-fill, 0%), #17384d 100%) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28) !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: -5px !important;
  border: 2px solid #0d2c40 !important;
  border-radius: 50% !important;
  background: #bcefff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .32) !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"]::-moz-range-track {
  box-sizing: border-box !important;
  width: calc(100% - 18px) !important;
  margin-inline: 9px !important;
  height: 8px !important;
  border: 1px solid #0d2c40 !important;
  border-radius: 999px !important;
  background: #17384d !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28) !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"]::-moz-range-progress {
  height: 8px !important;
  border: 1px solid #0d2c40 !important;
  border-radius: 999px !important;
  background: #56c5e4 !important;
}
#settingsPanel.settings-panel-v480 .settings-audio-v301 input[type="range"]::-moz-range-thumb {
  box-sizing: border-box !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #0d2c40 !important;
  border-radius: 50% !important;
  background: #bcefff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .32) !important;
}

/* Key bindings are staged until the explicit Apply action. */
#settingsPanel.settings-panel-v480 .settings-key-actions-v644 {
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 4px 0 5px !important;
}
#settingsPanel.settings-panel-v480 .settings-key-actions-v644 :is(.settings-key-apply-v644, .settings-key-reset-v642) {
  align-self: auto !important;
  min-width: 132px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 2px solid #102d40 !important;
  border-radius: 5px !important;
  background: #08799d !important;
  color: #f4fbff !important;
  font: 800 12px/1.2 var(--font-main, Arial, sans-serif) !important;
  box-shadow: inset 0 -3px #07546d !important;
  cursor: pointer !important;
}
#settingsPanel.settings-panel-v480 .settings-key-actions-v644 :is(.settings-key-apply-v644, .settings-key-reset-v642):hover:not(:disabled) {
  background: #0a8db5 !important;
}
#settingsPanel.settings-panel-v480 .settings-key-apply-v644:disabled {
  opacity: .48 !important;
  cursor: default !important;
  filter: saturate(.65) !important;
}
body:has(#loginOverlay:not(.hidden)) #settingsPanel.settings-panel-v480 .settings-key-actions-v644 :is(.settings-key-apply-v644, .settings-key-reset-v642) {
  border-color: #111a24 !important;
  background: #252b3b !important;
  box-shadow: inset 0 -3px #151d2b !important;
}

#settingsPanel.settings-panel-v480 #settingsPanelGraphics {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #55a6c2 #15384d !important;
}

#dayNightTimer.day-night-timer {
  /* Ice palette selected for this cycle indicator. */
  --dn-frame: transparent;
  --dn-edge: #153b56;
  --dn-day: #d8792e;
  --dn-night: #23486b;
  --dn-progress: #f1fcff;
  box-sizing: border-box !important;
  width: 188px !important;
  min-width: 188px !important;
  height: 32px !important;
  display: block !important;
  padding: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #f0fbff !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#dayNightTimer.day-night-timer.hidden { display: none !important; }
#dayNightTimer.day-night-timer.night {
  border: 2px solid #000 !important;
  background: transparent !important;
  color: #f0fbff !important;
  box-shadow: none !important;
}
#dayNightTimer.day-night-timer::before,
#dayNightTimer.day-night-timer::after { content: none !important; }
#dayNightTimer .day-night-track-v618 {
  position: relative !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, var(--dn-day) 0 50%, var(--dn-night) 50% 100%) !important;
  box-shadow: none !important;
}
#dayNightTimer .day-night-track-v618::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 4px 1px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: repeating-linear-gradient(90deg, rgba(240, 251, 255, .28) 0 1px, transparent 1px 13px) !important;
  pointer-events: none !important;
}
#dayNightTimer #dayNightIcon.day-night-icon {
  position: absolute !important;
  left: clamp(13px, var(--cycle-position, 0%), calc(100% - 13px)) !important;
  top: 50% !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
}
#dayNightTimer #dayNightIcon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) !important;
}
#dayNightTimer #dayNightIcon .cycle-sun { display: block !important; }
#dayNightTimer #dayNightIcon .cycle-moon { display: none !important; }
#dayNightTimer.night #dayNightIcon .cycle-sun { display: none !important; }
#dayNightTimer.night #dayNightIcon .cycle-moon { display: block !important; }
#dayNightTimer #dayNightTimerLabel {
  position: absolute !important;
  top: 33px !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  color: #effaff !important;
  font: 700 12px/16px var(--font-main, Arial, sans-serif) !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(4, 18, 30, .9) !important;
}
@media (max-width: 760px) {
  #dayNightTimer.day-night-timer { width: 158px !important; min-width: 158px !important; }
}

/* The inventory dock starts below the minimap and scrolls only when viewport height is short. */
#actionDock.action-dock {
  top: calc(8px + clamp(110px, 12.5vw, 220px) + 26px + var(--safe-top-v487, 0px)) !important;
  bottom: 10px !important;
  max-height: none !important;
  height: auto !important;
  justify-content: flex-start !important;
  transform: none !important;
  overflow-y: auto !important;
}
#actionDock .dock-button,
#actionDock .dock-button.text-dock {
  background: linear-gradient(to bottom, #333c50 0 calc(100% - 5px), #262c3c calc(100% - 5px) 100%) !important;
  box-shadow: none !important;
  filter: none !important;
}
#actionDock .dock-button::before {
  left: 3px !important;
  right: 3px !important;
  bottom: 3px !important;
  height: 3px !important;
  border-radius: 0 0 4px 0 !important;
  background: #262c3c !important;
}
#actionDock .dock-button.active {
  background: linear-gradient(to bottom, #1687ad 0 calc(100% - 5px), #086384 calc(100% - 5px) 100%) !important;
  box-shadow: none !important;
}
#actionDock .dock-button.active::before { background: #086384 !important; }
/* A slightly heavier crisp outline keeps the attached dock tiles readable. */
#actionDock .dock-button,
#actionDock .dock-button:hover:not(.active),
#actionDock .dock-button.active,
#actionDock .dock-button.active:hover {
  border: 3px solid #000 !important;
}
@media (max-width: 900px) {
  #actionDock.action-dock {
    top: calc(8px + clamp(110px, 12.5vw, 170px) + 26px + var(--safe-top-v487, 0px)) !important;
  }
}
@media (max-width: 520px) {
  #actionDock.action-dock {
    top: calc(8px + clamp(110px, 12.5vw, 170px) + 64px + var(--safe-top-v487, 0px)) !important;
    bottom: 8px !important;
  }
}

/* Only the coin banner's face is translucent; its coin and number stay opaque. */
#gameCoinBalance.game-coin-balance {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(19, 28, 38, .5), rgba(8, 14, 22, .5)) !important;
}

/* The in-game chat panel stays crisp over the world. */
#chatBox #chatMessages {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


#actionDock .dock-button::before {
  display: none !important;
  content: none !important;
}