/* Settings feature: Game Menu overlay, Settings and Controls windows, nameplate filters and
   the UI scale (features/settings/*). Classes are prefixed st-. */

/* ------------------------------------------------------------------ game menu */

.st-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 940;               /* above windows (100-700) and the death screen (800), below dialogs (950) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(8, 5, 3, 0.35), rgba(5, 3, 2, 0.72));
  animation: fade-in 0.12s ease-out;
}

/* Game menu: a parchment page in a wooden frame, a column of slate pill buttons. */
.st-menu {
  position: relative;
  width: 310px;
  max-width: calc(100vw - 32px);
  padding: 16px 22px 14px;
  background:
    var(--paper-noise),
    var(--paper-stain),
    radial-gradient(ellipse at 50% 30%, var(--parch-hi), var(--parch) 60%, var(--parch-lo));
  border: 9px solid var(--wood);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--wood-edge),
    0 0 0 3px rgba(150, 108, 60, 0.45),
    0 0 0 4px var(--wood-edge),
    inset 0 0 22px rgba(120, 72, 22, 0.45),
    var(--shadow);
  animation: panel-in 0.14s ease-out;
}

.st-menu-head {
  margin-bottom: 14px;
  text-align: center;
}

.st-menu-title {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  color: #4a2a10;
}

.st-menu-sub {
  margin-top: 3px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
}

.st-menu-btns {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.st-menu-btn {
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13.5px;
}

.st-menu-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.st-menu-btn .st-kbd {
  font-size: 10px;
}

.st-menu-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
  border-top: 1px solid var(--border-dim);
}

.st-menu-sound.off {
  color: var(--text-faint);
}

.st-menu-ping {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ settings window */

.st-body {
  padding-top: 8px;
}

.st-tabs {
  margin-bottom: 6px;
}

/* All tab pages share one grid cell: the window keeps the tallest page's height, so switching
   tabs never moves or resizes it. */
.st-pages {
  display: grid;
}

.st-page {
  display: flex;
  grid-area: 1 / 1;
  flex-direction: column;
  gap: 2px;
}

.st-page.st-off {
  visibility: hidden;
}

/* The long Interface page flows into two columns, so every tab is about as tall as the Audio
   one and the shared (fixed) window height has no large empty area. */
.st-page[data-page="interface"] {
  display: block;
  columns: 2;
  column-gap: 22px;
}

.st-page[data-page="interface"] > * {
  break-inside: avoid;
}

.st-page[data-page="interface"] > .st-section {
  break-after: avoid;
}

.st-page[data-page="interface"] .st-row {
  grid-template-columns: 104px minmax(0, 1fr);
}

.st-page[data-page="interface"] .st-row-toggle {
  grid-template-columns: minmax(0, 1fr) auto;
}

.st-note.st-scale-note {
  margin: -2px 4px 4px;
  color: var(--warn, #e0a050);
}

.st-section {
  margin: 12px 0 4px;
}

.st-page > .st-section:first-child {
  margin-top: 4px;
}

.st-row {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 3px 4px;
  border-radius: 3px;
}

.st-row:hover {
  background: rgba(255, 250, 236, 0.35);
}

.st-row-wide {
  grid-template-columns: 70px minmax(0, 1fr);
}

/* A switch is small: the label takes the rest of the row. */
.st-row-toggle {
  grid-template-columns: minmax(0, 1fr) auto;
}

.st-label {
  display: flex;
  flex-direction: column;
  color: var(--text);
}

.st-hint {
  font-size: 11px;
  color: var(--text-faint);
}

.st-ctl {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.st-slider {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.st-val {
  min-width: 42px;
  font-size: 12px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--gold-bright);
}

.st-test {
  min-height: 22px;
  padding: 1px 8px;
  font-size: 11px;
}

/* Range slider: a dark groove filled with gold up to the value (--st-fill set by panel.js). */
.st-range {
  --st-fill: 50%;
  flex: 1;
  min-width: 0;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.st-range:focus {
  outline: none;
}

.st-range::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, #a07424 0, #f0c860 var(--st-fill), #2c3139 var(--st-fill));
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.st-range::-moz-range-track {
  box-shadow: 0 0 0 1px rgba(160, 166, 174, 0.55);
  height: 6px;
  background: #0f0c09;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.st-range::-moz-range-progress {
  height: 6px;
  background: linear-gradient(90deg, #b08a45, var(--gold));
  border-radius: 3px;
}

.st-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: radial-gradient(circle at 40% 35%, #fff0c0, var(--gold) 55%, #8a6424);
  border: 1px solid #2a1c0a;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  -webkit-appearance: none;
}

.st-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%, #fff0c0, var(--gold) 55%, #8a6424);
  border: 1px solid #2a1c0a;
  border-radius: 50%;
}

.st-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(217, 180, 90, 0.45);
}

/* On/off switch */
.st-toggle {
  box-shadow: 0 0 0 1px rgba(160, 166, 174, 0.55);
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #1d2127, #3c434c);
  border: 1px solid #0d0f12;
  border-radius: 11px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
  transition: background 0.15s, border-color 0.15s;
}

.st-toggle .st-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #8c7a5a, #5a4a30);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s, background 0.15s;
}

.st-toggle.on {
  background: linear-gradient(180deg, #c8402f, #7c120d);
  border-color: var(--gold-dim);
}

.st-toggle.on .st-knob {
  background: radial-gradient(circle at 40% 35%, #fff0c0, var(--gold) 60%, #a07a30);
  transform: translateX(18px);
}

.st-toggle:hover:not(:disabled) {
  border-color: var(--gold);
}

.st-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.st-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Segmented preset buttons */
.st-seg {
  box-shadow: 0 0 0 1px #1c1f24;
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.st-seg-btn {
  flex: 1;
  min-height: 30px;
  padding: 4px 6px;
  font-weight: bold;
  color: var(--text-dim);
  cursor: pointer;
  color: #d9c49a;
  background: linear-gradient(180deg, #5b636e, #2c3139);
  border: none;
  border-left: 1px solid #0e1013;
}

.st-seg-btn:first-child {
  border-left: none;
}

.st-seg-btn:hover {
  color: var(--text);
}

.st-seg-btn.active {
  color: #fff3d6;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 50%, var(--red-lo));
  text-shadow: 0 1px 0 #000;
}

.st-seg-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.st-desc {
  font-style: italic;
  min-height: 34px;
  margin: 6px 4px 8px;
  font-style: italic;
  color: var(--ink-dim);
}

.st-gfx-info {
  display: grid;
  gap: 4px;
  margin: 0 4px;
  padding: 8px 10px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.st-gfx-info > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.st-gfx-info span {
  color: var(--text-dim);
}

.st-gfx-info b {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

.st-note {
  margin: 10px 4px 0;
  font-size: 11.5px;
  color: var(--text-faint);
}

.st-status {
  margin: 10px 4px 0;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-left: 3px solid var(--gold-dim);
  border-radius: 3px;
}

.st-status.ok {
  border-left-color: var(--good);
  color: var(--good);
}

.st-status.dim {
  color: var(--text-dim);
}

.st-status.bad {
  border-left-color: var(--error);
  color: var(--error);
}

.st-foot {
  position: sticky;
  bottom: -12px;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin: 12px -12px -12px;
  padding: 10px 12px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border-dim);
}

/* ------------------------------------------------------------------ controls window */

.st-keys {
  display: grid;
  /* Key column as wide as its widest key (at least 80 px, at most ~200 px), shared by the rows. */
  grid-template-columns: fit-content(200px) minmax(0, 1fr);
  gap: 1px 0;
}

.st-key-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  gap: 10px;
  align-items: center;
  min-height: 26px;
  padding: 2px 4px;
  border-radius: 3px;
}

.st-key-row:nth-child(odd) {
  background: rgba(255, 250, 236, 0.35);
}

.st-key-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 80px;
}

.st-key-desc {
  color: var(--text-dim);
}

.st-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  color: #f3e2bb;
  background: linear-gradient(180deg, #5b636e, #2c3139);
  border: 1px solid #0e1013;
  border-bottom-width: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ HUD gear button */

.menu-btn[data-id="settings"] .st-gear {
  transition: transform 0.4s ease;
}

.menu-btn[data-id="settings"]:hover .st-gear {
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ nameplate filters
   Nameplates are drawn by render/entities.js (.rn-plate + .rn-self / .rn-party / .rn-player /
   .rn-hostile / .rn-mob); the selected target always keeps its plate. */

body.st-hide-self .rn-plate.rn-self:not(.rn-targeted),
body.st-hide-players .rn-plate:is(.rn-party, .rn-player, .rn-hostile):not(.rn-targeted),
body.st-hide-mobs .rn-plate.rn-mob:not(.rn-targeted) {
  display: none !important;
}

/* ------------------------------------------------------------------ UI scale
   The individual `scale` property only changes how a block is drawn, not its layout box, so
   ui.js window placement, dragging and clamping keep working. Each HUD block scales towards the
   corner or edge it is anchored to (blocks centred with translateX(-50%) use their left edge:
   the translation is applied before the scale). Tooltips, context menus and drag ghosts follow
   the cursor and stay unscaled. */

#ui.st-scaled > .panel,
#ui.st-scaled > #hud-bottom,
#ui.st-scaled > #hud-self,
#ui.st-scaled > #hud-tr,
#ui.st-scaled > #hud-target,
#ui.st-scaled > #minimap,
#ui.st-scaled > #chat,
#ui.st-scaled > #toasts,
#ui.st-scaled > #zone-banner,
#ui.st-scaled > #world-boss,
#ui.st-scaled > #destiny-tracker,
#ui.st-scaled > #destiny-levelup,
#ui.st-scaled > #sc-party,
#ui.st-scaled > #sc-status,
#ui.st-scaled > #sc-popups,
#ui.st-scaled > #dg-progress,
#ui.st-scaled > #dg-banner,
#ui.st-scaled > .au-hint,
#ui.st-scaled .st-menu,
#ui.st-scaled .modal-backdrop > .modal,
#ui.st-scaled .death-box {
  scale: var(--st-ui-scale, 1);
}

#ui.st-scaled > .panel,
#ui.st-scaled > #hud-self,
#ui.st-scaled > #hud-target,
#ui.st-scaled > #toasts,
#ui.st-scaled > #zone-banner,
#ui.st-scaled > #world-boss,
#ui.st-scaled > #sc-party,
#ui.st-scaled > #dg-banner,
#ui.st-scaled > #sc-popups {
  transform-origin: 0 0;
}

#ui.st-scaled > #hud-bottom,
#ui.st-scaled > #chat,
#ui.st-scaled > #destiny-levelup,
#ui.st-scaled > .au-hint {
  transform-origin: 0 100%;
}

#ui.st-scaled > #minimap {
  transform-origin: 100% 100%;
}

#ui.st-scaled > #hud-tr,
#ui.st-scaled > #destiny-tracker,
#ui.st-scaled > #dg-progress,
#ui.st-scaled > #sc-status {
  transform-origin: 100% 0;
}

/* Scaled windows still fit the screen above the HUD band. */
#ui.st-scaled > .panel {
  max-width: calc((100vw - 16px) / var(--st-ui-scale, 1));
  max-height: var(--auto-max-h, calc(max(300px, 100vh - 168px) / var(--st-ui-scale, 1)));
}

/* The docked Inventory scales towards its top-right corner and keeps its full height. */
#ui.st-scaled > .panel.docked-right {
  transform-origin: 100% 0;
  height: calc((100vh - var(--dock-top, 100px) - 30px) / var(--st-ui-scale, 1));
}