/**
 * AO UI Kit — Argentum Survivor (híbrido modal / chrome)
 *
 * MODALES (menú, opciones, party, bank, level-up, pause…):
 *   ventana piedra/madera + marco 9-slice fino Kenney 014 (~9px), titlebar placa,
 *   cerrar sprite, botones 3 estados, overlay opaco.
 *
 * CHROME HUD (sidebar, chat, tooltips, context, minimap, buffs, run HUD):
 *   SIN border-image / sin cornisa Kenney. Bisel CSS madera/oro 1–2px (.ao-chrome /
 *   .ao-panel-plain), fondo opaco, Tahoma. Look cliente AO utilitario + limpio.
 *
 * Assets: assets/ui/ao-kit/ (Kenney CC0, tint oro AO) — solo modales / .ao-framed
 * Fallback: si falla una imagen, quedan borde/bisel/colores CSS.
 * Context menu: chrome (no 9-slice). Duel invite: .ao-framed compacto.
 *
 * Clases estables: .ao-modal-overlay .ao-modal .ao-modal-titlebar .ao-modal-title
 *                  .ao-modal-body .ao-modal-footer .ao-btn-close .ao-btn
 *                  .ao-btn-primary .ao-btn-ghost .ao-tab .ao-grid-cell
 *                  .ao-chrome .ao-panel-plain .ao-framed
 */

:root {
  --ao-gold: #c9a227;
  --ao-gold-bright: #e8c85a;
  --ao-gold-dim: #a67c2d;
  --ao-wood-hi: #6b5340;
  --ao-wood: #3d2a1c;
  --ao-wood-lo: #241610;
  --ao-cream: #f0e6d2;
  --ao-cream-dim: #c8b896;
  --ao-ink: #f0e6d2;
  --ao-panel-black: #000000;
  --ao-bevel-hi: #d4b86a;
  --ao-bevel-lo: #2a1a0c;
  --ao-font: Tahoma, Verdana, sans-serif;

  /* Chrome HUD — tokens compartidos (sidebar / chat / tooltips / context) */
  --ao-chrome-bg-hi: #2e2016;
  --ao-chrome-bg-mid: #1a120c;
  --ao-chrome-bg-lo: #0c0907;
  --ao-chrome-edge-hi: #d8bc6e;
  --ao-chrome-edge-mid: #b8944a;
  --ao-chrome-edge-lo: #140e08;
  --ao-chrome-inset-hi: rgba(232, 200, 90, 0.26);
  --ao-chrome-inset-lo: rgba(0, 0, 0, 0.68);
  --ao-chrome-pad-x: 8px;
  --ao-chrome-pad-y: 6px;
  --ao-chrome-gap: 6px;
  --ao-chrome-font: 11px;
  --ao-chrome-label: 9px;
  --ao-chrome-line: 1.35;

  --ao-frame-url: url("../assets/ui/ao-kit/frames/panel-frame-gold.png");
  --ao-frame-slice: 16;
  /* ~9px visual — cliente AO fino (antes 14px bisel grueso) */
  --ao-frame-width: 9px;
  --ao-frame-compact-width: 8px;
  /* image-rendering en bordes/sprites del kit */
  --ao-image-rendering: crisp-edges;

  --ao-btn-url: url("../assets/ui/ao-kit/buttons/btn-normal.png");
  --ao-btn-hover-url: url("../assets/ui/ao-kit/buttons/btn-hover.png");
  --ao-btn-pressed-url: url("../assets/ui/ao-kit/buttons/btn-pressed.png");
  --ao-btn-primary-url: url("../assets/ui/ao-kit/buttons/btn-primary-normal.png");
  --ao-btn-primary-hover-url: url("../assets/ui/ao-kit/buttons/btn-primary-hover.png");
  --ao-btn-primary-pressed-url: url("../assets/ui/ao-kit/buttons/btn-primary-pressed.png");
  --ao-btn-ghost-url: url("../assets/ui/ao-kit/buttons/btn-ghost-normal.png");
  --ao-btn-ghost-hover-url: url("../assets/ui/ao-kit/buttons/btn-ghost-hover.png");
  --ao-btn-ghost-pressed-url: url("../assets/ui/ao-kit/buttons/btn-ghost-pressed.png");

  --ao-close-url: url("../assets/ui/ao-kit/icons/close-normal.png");
  --ao-close-hover-url: url("../assets/ui/ao-kit/icons/close-hover.png");
  --ao-close-pressed-url: url("../assets/ui/ao-kit/icons/close-pressed.png");
  --ao-close-2x-url: url("../assets/ui/ao-kit/icons/close-normal-2x.png");
  --ao-close-hover-2x-url: url("../assets/ui/ao-kit/icons/close-hover-2x.png");
  --ao-close-pressed-2x-url: url("../assets/ui/ao-kit/icons/close-pressed-2x.png");

  --ao-arrow-up-url: url("../assets/ui/ao-kit/icons/arrow-up.png");
  --ao-arrow-up-hover-url: url("../assets/ui/ao-kit/icons/arrow-up-hover.png");
  --ao-arrow-up-pressed-url: url("../assets/ui/ao-kit/icons/arrow-up-pressed.png");
  --ao-arrow-down-url: url("../assets/ui/ao-kit/icons/arrow-down.png");
  --ao-arrow-down-hover-url: url("../assets/ui/ao-kit/icons/arrow-down-hover.png");
  --ao-arrow-down-pressed-url: url("../assets/ui/ao-kit/icons/arrow-down-pressed.png");
  --ao-arrow-up-2x-url: url("../assets/ui/ao-kit/icons/arrow-up-2x.png");
  --ao-arrow-down-2x-url: url("../assets/ui/ao-kit/icons/arrow-down-2x.png");

  --ao-btn-danger-url: url("../assets/ui/ao-kit/buttons/btn-danger-normal.png");
  --ao-btn-danger-hover-url: url("../assets/ui/ao-kit/buttons/btn-danger-hover.png");
  --ao-btn-danger-pressed-url: url("../assets/ui/ao-kit/buttons/btn-danger-pressed.png");

  --ao-frame-ornate-url: url("../assets/ui/ao-kit/frames/panel-frame-gold-ornate.png");
  --ao-frame-ornate-2x-url: url("../assets/ui/ao-kit/frames/panel-frame-gold-ornate-2x.png");
}

/* -------------------------------------------------------------------------- */
/* Overlay — negro 80–90%, sin backdrop-filter                                  */
/* -------------------------------------------------------------------------- */

.ao-modal-overlay {
  background: rgba(0, 0, 0, 0.86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.survivor-meta-overlay.ao-modal-overlay,
#options-modal.ao-modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
}

/* -------------------------------------------------------------------------- */
/* Chrome HUD — bisel CSS (SIN border-image / ornamento Kenney)                 */
/* Sidebar, chat, tooltips, context, minimap, buffs, run HUD, paneles permanentes */
/* Look cliente AO utilitario + limpio (contraste alto, inset, hover sutil).    */
/* -------------------------------------------------------------------------- */

.ao-chrome,
.ao-panel-plain {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-font) !important;
  line-height: var(--ao-chrome-line) !important;
  color: var(--ao-cream) !important;
  background:
    linear-gradient(
      180deg,
      var(--ao-chrome-bg-hi) 0%,
      var(--ao-chrome-bg-mid) 52%,
      var(--ao-chrome-bg-lo) 100%
    ) !important;
  /* Longhands + border-image:none — no shorthand `border:` que pise nada */
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: var(--ao-chrome-edge-hi) !important;
  border-left-color: var(--ao-chrome-edge-mid) !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  /* Un solo reset: longhands posteriores pueden reactivar border-image */
  border-image: none !important;
  image-rendering: auto;
  box-shadow:
    inset 1px 1px 0 var(--ao-chrome-inset-hi),
    inset -1px -1px 0 var(--ao-chrome-inset-lo),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.58) !important;
}

/* Hover sutil — solo superficies interactivas / popups chrome */
.ao-chrome.ao-chrome-interactive:hover,
button.ao-chrome:hover,
.context-menu.ao-chrome:hover,
.context-submenu:hover {
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.34),
    inset -1px -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 3px 12px rgba(0, 0, 0, 0.62) !important;
}

/* -------------------------------------------------------------------------- */
/* Modal — panel opaco + marco 9-slice                                          */
/* Nunca usar `border: … !important` aquí: el shorthand expande a               */
/* `border-image: none !important` y pisa los longhands del frame.              */
/* -------------------------------------------------------------------------- */

.ao-modal {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font);
  color: var(--ao-cream);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #6b5340 0%, #3d2a1c 42%, #241610 100%) !important;
  border-width: var(--ao-frame-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: var(--ao-image-rendering);
  box-shadow:
    inset 0 0 0 1px rgba(240, 230, 210, 0.06),
    inset 0 2px 0 rgba(232, 200, 90, 0.08),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.9) !important;
}

body .survivor-quest-panel.ao-modal,
.survivor-meta-panel.ao-modal,
.survivor-quest-panel.ao-modal,
#game-menu-panel.ao-modal,
#options-modal .modal-window.ao-modal,
#options-modal .modal-options-expanded.ao-modal {
  border-radius: 0 !important;
  border-width: var(--ao-frame-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #6b5340 0%, #3d2a1c 42%, #1a100a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 230, 210, 0.06),
    inset 0 2px 0 rgba(232, 200, 90, 0.08),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.9) !important;
  overflow: hidden;
}

.survivor-quest-panel.ao-modal {
  padding: 0;
}

#game-menu-panel.ao-modal {
  /* Legacy: el menú ya no es modal flotante; se pinta inline sobre vitals+oro. */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 6px;
  gap: 4px;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  z-index: 6;
}

/* Móvil: overlay en el HUD de barras, no sheet fullscreen */
.mobile-mode #game-menu-panel.ao-modal,
.mobile-mode #game-menu-panel.game-menu-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  z-index: 6 !important;
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn {
  margin: 0;
  width: 100%;
  border-radius: 0 !important;
  transition: none !important;
  height: auto;
  min-height: 0;
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn:hover {
  background-image: var(--ao-btn-hover-url) !important;
  filter: none !important;
}

#game-menu-panel.ao-modal .game-menu-header.ao-modal-titlebar {
  border-radius: 0 !important;
}

#game-menu-panel.ao-modal .game-menu-close.ao-btn-close {
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Titlebar + título MAYÚSCULAS                                                 */
/* -------------------------------------------------------------------------- */

.ao-modal-titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 36px 7px 12px;
  margin: 0;
  background:
    linear-gradient(180deg, #7a5e3a 0%, #4a3420 45%, #2e1e12 100%);
  border-bottom: 2px solid var(--ao-gold-dim);
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 90, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.ao-modal-title,
.ao-modal .ao-modal-title,
.ao-modal-titlebar .ao-modal-title,
.ao-modal-titlebar .modal-title,
.ao-modal-titlebar .survivor-meta-title {
  margin: 0;
  font-family: var(--ao-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000, 0 0 1px #000;
  text-align: center;
}

#game-menu-panel.ao-modal .ao-modal-titlebar {
  justify-content: space-between;
  padding: 7px 8px 7px 12px;
  margin-bottom: 6px;
}

#game-menu-panel.ao-modal .ao-modal-titlebar .ao-modal-title {
  letter-spacing: 0.18em;
  font-size: 12px !important;
}

#options-modal .ao-modal-titlebar.modal-header {
  justify-content: space-between;
  padding: 7px 10px;
  background:
    linear-gradient(180deg, #7a5e3a 0%, #4a3420 45%, #2e1e12 100%) !important;
  border-bottom: 2px solid var(--ao-gold-dim) !important;
  border-radius: 0 !important;
}

#options-modal .ao-modal-titlebar .ao-modal-title {
  text-align: left;
  flex: 1 1 auto;
}

/* -------------------------------------------------------------------------- */
/* Body / footer                                                                */
/* -------------------------------------------------------------------------- */

.ao-modal-body,
.ao-modal .survivor-quest-body,
.ao-modal .survivor-meta-header {
  padding-left: 16px;
  padding-right: 16px;
}

.ao-modal .survivor-meta-header {
  margin-top: 10px;
  margin-bottom: 6px;
}

.ao-modal .survivor-quest-body {
  padding-bottom: 4px;
}

.ao-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px 4px;
  border-top: 1px solid var(--ao-gold-dim);
  margin-top: 8px;
}

/* -------------------------------------------------------------------------- */
/* Cerrar — sprite X cuadrado (fallback: bisel + letra X)                       */
/* -------------------------------------------------------------------------- */

.ao-btn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  font-family: var(--ao-font);
  /* Solo sprite: ocultar cualquier "X" tipográfica residual */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  text-shadow: none !important;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  /* Fallback bisel si el PNG no carga */
  background-color: var(--ao-wood) !important;
  background-image: var(--ao-close-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border: 1px solid var(--ao-gold-dim) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 90, 0.25),
    0 1px 0 rgba(0, 0, 0, 0.4);
  image-rendering: var(--ao-image-rendering);
}

.ao-btn-close:hover {
  background-image: var(--ao-close-hover-url) !important;
  color: transparent !important;
  border-color: var(--ao-gold) !important;
  filter: none;
}

.ao-btn-close:active {
  background-image: var(--ao-close-pressed-url) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  /* Sin translateY: evita salto de layout al click */
  transform: translateY(-50%);
}

#game-menu-panel.ao-modal .game-menu-close.ao-btn-close {
  position: static;
  transform: none;
  flex: 0 0 auto;
}

#game-menu-panel.ao-modal .game-menu-close.ao-btn-close:active {
  transform: none;
}

.ao-modal .survivor-meta-close.ao-btn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

#options-modal .modal-close.ao-btn-close {
  position: static;
  transform: none;
  flex: 0 0 auto;
}

#options-modal .modal-close.ao-btn-close:active {
  transform: none;
}

/* -------------------------------------------------------------------------- */
/* Botones — 3 estados (asset + fallback bisel CSS)                             */
/* -------------------------------------------------------------------------- */

.ao-btn {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ao-cream) !important;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  box-sizing: border-box;
  padding: 7px 14px;
  /* Altura fija: pressed Kenney era más bajo → sin salto de layout */
  min-height: 32px;
  height: 32px;
  line-height: 1.1;
  /* Fallback bisel */
  background-color: #4a3420 !important;
  background-image: var(--ao-btn-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border-top: 2px solid var(--ao-bevel-hi) !important;
  border-left: 2px solid #b8944a !important;
  border-right: 2px solid var(--ao-bevel-lo) !important;
  border-bottom: 2px solid #1a1008 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.35) !important;
  transition: none;
  filter: none !important;
}

.ao-btn:hover,
.ao-btn:focus-visible {
  outline: none;
  color: #fff8e0 !important;
  background-image: var(--ao-btn-hover-url) !important;
  background-color: #5a4428 !important;
  border-top-color: var(--ao-gold-bright) !important;
  filter: none !important;
}

.ao-btn:active {
  background-image: var(--ao-btn-pressed-url) !important;
  background-color: #2e2414 !important;
  background-size: 100% 100% !important;
  border-top-color: var(--ao-bevel-lo) !important;
  border-left-color: var(--ao-bevel-lo) !important;
  border-right-color: #b8944a !important;
  border-bottom-color: var(--ao-bevel-hi) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  /* Sin translateY: altura fija + sprite stretched */
  transform: none;
  filter: none !important;
}

.ao-btn.ao-btn-primary,
.survivor-btn-primary.ao-btn {
  background-image: var(--ao-btn-primary-url) !important;
  background-color: var(--ao-gold-dim) !important;
  color: #1a1008 !important;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.35);
  border-top-color: #f0d878 !important;
  border-left-color: #e0c060 !important;
  border-right-color: #5a3e10 !important;
  border-bottom-color: #3a2808 !important;
}

.ao-btn.ao-btn-primary:hover,
.ao-btn.ao-btn-primary:focus-visible,
.survivor-btn-primary.ao-btn:hover,
.survivor-btn-primary.ao-btn:focus-visible {
  background-image: var(--ao-btn-primary-hover-url) !important;
  color: #0a0804 !important;
}

.ao-btn.ao-btn-primary:active,
.survivor-btn-primary.ao-btn:active {
  background-image: var(--ao-btn-primary-pressed-url) !important;
}

.ao-btn.ao-btn-ghost,
.survivor-btn-ghost.ao-btn {
  background-image: var(--ao-btn-ghost-url) !important;
  background-color: #2a2418 !important;
  color: var(--ao-cream-dim) !important;
  border-top-color: #7a6840 !important;
  border-left-color: #6a5834 !important;
  border-right-color: #2a2010 !important;
  border-bottom-color: #14100a !important;
}

.ao-btn.ao-btn-ghost:hover,
.survivor-btn-ghost.ao-btn:hover,
body .ao-modal .survivor-btn-ghost.ao-btn:hover {
  background-image: var(--ao-btn-ghost-hover-url) !important;
  color: var(--ao-cream) !important;
  border-color: var(--ao-gold-dim) !important;
  background-color: #2a2418 !important;
}

.ao-btn.ao-btn-ghost:active,
.survivor-btn-ghost.ao-btn:active {
  background-image: var(--ao-btn-ghost-pressed-url) !important;
}

.ao-btn:disabled,
.ao-btn.is-locked-btn,
button.ao-btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
  color: #8a8070 !important;
  /* Mantener sprite ghosted (no aplanar con background-image:none) */
  background-image: var(--ao-btn-ghost-url) !important;
  background-color: #2a2418 !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  filter: grayscale(0.45) brightness(0.72);
  border-color: #555 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
  transform: none;
}

.ao-btn.ao-btn-primary:disabled,
button.ao-btn.ao-btn-primary:disabled {
  background-image: var(--ao-btn-ghost-url) !important;
  color: #7a7060 !important;
}

.ao-btn.ao-btn-danger:disabled,
button.ao-btn.ao-btn-danger:disabled {
  background-image: var(--ao-btn-ghost-url) !important;
  filter: grayscale(0.55) brightness(0.65);
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn {
  text-align: center;
  padding: 2px 3px;
  font-size: 8px;
  letter-spacing: 0.04em;
  height: auto;
  min-height: 0;
}

#options-modal .modal-btn.ao-btn,
#options-modal .modal-btn-primary.ao-btn {
  min-width: 96px;
  padding: 6px 12px;
  font-size: 11px;
}

/* Tabs opciones — 3 estados sprite AO (normal / hover / pressed=activo) */
#options-modal .options-tab,
.ao-tab {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ao-cream-dim) !important;
  text-shadow: 1px 1px 0 #000;
  min-height: 30px;
  height: auto;
  padding: 7px 10px;
  cursor: pointer;
  background-color: #4a3420 !important;
  background-image: var(--ao-btn-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border-top: 2px solid var(--ao-bevel-hi) !important;
  border-left: 2px solid #b8944a !important;
  border-right: 2px solid var(--ao-bevel-lo) !important;
  border-bottom: 2px solid #1a1008 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.35) !important;
  transition: none !important;
  filter: none !important;
}

#options-modal .options-tab:hover,
.ao-tab:hover {
  color: var(--ao-cream) !important;
  background-image: var(--ao-btn-hover-url) !important;
  background-color: #5a4428 !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-color: var(--ao-gold-dim) !important;
}

#options-modal .options-tab.options-tab-active,
.ao-tab.is-active,
.ao-tab.options-tab-active {
  color: var(--ao-gold-bright) !important;
  background-image: var(--ao-btn-pressed-url) !important;
  background-color: #2e2414 !important;
  border-top-color: var(--ao-bevel-lo) !important;
  border-left-color: var(--ao-bevel-lo) !important;
  border-right-color: #b8944a !important;
  border-bottom-color: var(--ao-bevel-hi) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

#options-modal .options-tab:active,
.ao-tab:active {
  background-image: var(--ao-btn-pressed-url) !important;
  background-color: #2e2414 !important;
  border-top-color: var(--ao-bevel-lo) !important;
  border-left-color: var(--ao-bevel-lo) !important;
  border-right-color: #b8944a !important;
  border-bottom-color: var(--ao-bevel-hi) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  transform: none;
}

#options-modal .options-section-title {
  font-family: var(--ao-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold);
  border-bottom: 1px solid var(--ao-gold-dim);
}

#options-modal .modal-content {
  background: rgba(0, 0, 0, 0.35);
  color: var(--ao-cream);
}

#options-modal .options-row label,
#options-modal .options-chat-tip {
  font-family: var(--ao-font);
  color: var(--ao-cream-dim);
}

/* -------------------------------------------------------------------------- */
/* Grids — celdas negras + bisel AO uniforme (kit)                              */
/* -------------------------------------------------------------------------- */

.ao-grid-cell {
  background: var(--ao-panel-black);
  border-radius: 0;
  box-sizing: border-box;
  /* Bisel hundido clásico AO */
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555555 !important;
  border-bottom: 1px solid #666666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.65),
    inset -1px -1px 0 rgba(212, 184, 106, 0.08);
}

.ao-grid-cell.is-selected,
.ao-grid-cell[aria-selected="true"] {
  border-top-color: var(--ao-gold) !important;
  border-left-color: var(--ao-gold-dim) !important;
  border-right-color: var(--ao-gold-bright) !important;
  border-bottom-color: var(--ao-gold) !important;
  box-shadow: inset 0 0 0 1px var(--ao-gold-dim);
}

/* -------------------------------------------------------------------------- */
/* Interior Quests Survivor                                                     */
/* -------------------------------------------------------------------------- */

.ao-modal,
.ao-modal .survivor-meta-title,
.ao-modal .survivor-meta-sub,
.ao-modal .survivor-meta-essence,
.ao-modal .survivor-quest-npc-speech,
.ao-modal .survivor-quest-card,
.ao-modal .survivor-quest-card-title,
.ao-modal .survivor-quest-section,
.ao-modal .survivor-quest-state,
.ao-modal .survivor-quest-rewards,
.ao-modal .survivor-quest-hint,
.ao-modal .survivor-quest-row,
.ao-modal .survivor-quest-detail,
.ao-modal .survivor-quest-tab,
.ao-modal .survivor-quest-badge,
.ao-modal .survivor-quest-chip {
  font-family: var(--ao-font) !important;
}

.ao-modal .survivor-quest-npc-speech {
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--ao-cream-dim) !important;
  background: rgba(0, 0, 0, 0.78) !important;
  border-left: 3px solid var(--ao-gold) !important;
  border-radius: 0 !important;
}

.ao-modal .survivor-quest-card {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #2a1e14 0%, #000000 100%) !important;
  border: 2px solid #555555 !important;
  box-shadow:
    inset 0 1px 0 rgba(240, 230, 210, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.ao-modal .survivor-quest-card.is-active {
  border-color: #777777 !important;
}

.ao-modal .survivor-quest-card.is-active .survivor-quest-state {
  color: var(--ao-cream-dim) !important;
  border-color: #777777 !important;
  background: #000 !important;
}

.ao-modal .survivor-quest-card.is-ready {
  border-color: var(--ao-gold) !important;
  box-shadow:
    inset 0 0 0 1px var(--ao-gold-dim),
    0 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.ao-modal .survivor-quest-card-title {
  font-family: var(--ao-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  color: var(--ao-cream);
}

.ao-modal .survivor-quest-section {
  font-family: var(--ao-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ao-gold);
  border-bottom-color: var(--ao-gold-dim);
}

.ao-modal .survivor-quest-state {
  border-radius: 0;
  font-family: var(--ao-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.ao-modal .survivor-quest-bar {
  border-radius: 0;
  background: #000;
  border: 1px solid #555;
}

.ao-modal .survivor-quest-bar-fill {
  border-radius: 0;
  background: linear-gradient(180deg, var(--ao-gold-bright), var(--ao-gold-dim));
}

.ao-modal .survivor-meta-sub,
.ao-modal .survivor-meta-essence {
  font-family: var(--ao-font);
  font-size: 11px;
  color: var(--ao-cream-dim);
}

.ao-modal .survivor-btn.ao-btn {
  align-self: flex-start;
  min-width: 120px;
  margin-top: 6px;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                       */
/* -------------------------------------------------------------------------- */

.mobile-mode .ao-modal,
.mobile-mode .ao-btn,
.mobile-mode .ao-btn-close,
.mobile-mode #game-menu-panel.ao-modal,
.mobile-mode #game-menu-panel.ao-modal .game-menu-item.ao-btn,
.mobile-mode #game-menu-panel.ao-modal .game-menu-close.ao-btn-close,
.mobile-mode #options-modal .modal-window.ao-modal,
.mobile-mode #options-modal .ao-btn-close {
  border-radius: 0 !important;
}

.mobile-mode #game-menu-panel.ao-modal .game-menu-close.ao-btn-close {
  display: none !important;
}

/* ========================================================================== */
/* KIT COMPLETO — componentes reutilizables                                     */
/* ========================================================================== */

/* Danger */
.ao-btn.ao-btn-danger,
.modal-btn-danger.ao-btn,
.pause-btn-danger.ao-btn {
  background-image: var(--ao-btn-danger-url) !important;
  background-color: #5a2018 !important;
  color: #ffe8e0 !important;
  text-shadow: 1px 1px 0 #000;
  border-top-color: #e09070 !important;
  border-left-color: #c06048 !important;
  border-right-color: #3a100c !important;
  border-bottom-color: #1a0806 !important;
}

.ao-btn.ao-btn-danger:hover,
.ao-btn.ao-btn-danger:focus-visible {
  background-image: var(--ao-btn-danger-hover-url) !important;
  color: #fff8f0 !important;
}

.ao-btn.ao-btn-danger:active {
  background-image: var(--ao-btn-danger-pressed-url) !important;
}

/* Inputs / selects / textarea */
.ao-input,
.ao-select,
.ao-textarea,
.ao-modal .modal-input,
.ao-modal .modal-textarea,
.ao-modal input[type="text"],
.ao-modal input[type="number"],
.ao-modal input[type="search"],
.ao-modal input[type="password"],
.ao-modal select,
.ao-modal textarea,
#survivor-merchant-overlay input,
#survivor-smith-overlay input,
#survivor-city-shop-overlay input,
#trade-window-overlay input,
.sv-merch-search,
.sv-smith-search,
.trade-quantity-input {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
  background: #000 !important;
  border: 1px solid #555 !important;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6), inset -1px -1px 0 rgba(201, 162, 39, 0.08);
  outline: none;
}

.ao-input:focus,
.ao-select:focus,
.ao-textarea:focus,
.ao-modal input:focus,
.ao-modal select:focus,
.ao-modal textarea:focus,
.sv-merch-search:focus,
.sv-smith-search:focus {
  border-color: var(--ao-gold) !important;
  box-shadow: inset 0 0 0 1px var(--ao-gold-dim);
}

.ao-input::placeholder,
.ao-textarea::placeholder,
.ao-modal input::placeholder,
.sv-merch-search::placeholder,
.sv-smith-search::placeholder {
  color: #7a6a52;
  font-family: var(--ao-font);
}

/* Scrollbars AO (WebKit + Firefox) */
.ao-modal,
.ao-modal * ,
.ao-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ao-gold-dim) #000;
}

.ao-modal::-webkit-scrollbar,
.ao-modal *::-webkit-scrollbar,
.ao-scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.ao-modal::-webkit-scrollbar-track,
.ao-modal *::-webkit-scrollbar-track,
.ao-scroll::-webkit-scrollbar-track {
  background: #000;
  border: 1px solid #333;
}

.ao-modal::-webkit-scrollbar-thumb,
.ao-modal *::-webkit-scrollbar-thumb,
.ao-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b5340, #3d2a1c);
  border: 1px solid var(--ao-gold-dim);
  border-radius: 0;
}

.ao-modal::-webkit-scrollbar-thumb:hover,
.ao-modal *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8a6a40, #4a3420);
  border-color: var(--ao-gold);
}

/* List rows */
.ao-list-row,
.ao-modal .party-member,
.ao-modal .clan-member-row,
.ao-modal .friends-row,
.ao-modal .party-nearby-item,
.ao-modal .party-invite-item,
.ao-modal .quests-list-item,
.ao-modal .ranking-row,
.ao-modal .news-item {
  border-radius: 0 !important;
  font-family: var(--ao-font);
  background: linear-gradient(180deg, #1a1410 0%, #000 100%);
  border: 1px solid #444;
  color: var(--ao-cream-dim);
}

.ao-list-row:hover,
.ao-modal .party-member:hover,
.ao-modal .clan-member-row:hover,
.ao-modal .friends-row:hover,
.ao-modal .party-nearby-item:hover,
.ao-modal .quests-list-item:hover,
.ao-modal .ranking-row:hover {
  border-color: var(--ao-gold-dim);
  color: var(--ao-cream);
  background: linear-gradient(180deg, #2a1e14 0%, #0a0806 100%);
}

.ao-list-row.is-selected,
.ao-list-row[aria-selected="true"],
.ao-modal .quests-list-item.is-selected,
.ao-modal .ranking-row.is-self {
  border-color: var(--ao-gold) !important;
  box-shadow: inset 0 0 0 1px var(--ao-gold-dim);
}

/* Badges — bisel recto AO (sin pills 999px) */
.ao-badge,
.ao-modal .party-badge,
.ao-modal .clan-badge,
.ao-modal .ranking-mode-badge,
.ao-modal .world-map-zone-badge,
.ao-modal .quests-badge,
.ao-modal .faction-badge,
#screen-game .faction-badge,
#screen-game .quests-badge,
.party-badge,
.quests-badge,
.faction-badge,
.party-invites-count,
.party-nearby-count {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ao-gold-bright) !important;
  background: #000 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  padding: 2px 6px;
}

.party-invites-count,
.party-nearby-count {
  color: #fff !important;
  background: #8a3028 !important;
  border-color: #c05040 !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  letter-spacing: 0;
}

/* Divider */
.ao-divider {
  height: 0;
  border: 0;
  border-top: 1px solid var(--ao-gold-dim);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  margin: 10px 0;
}

/* Empty states */
.ao-empty,
.ao-modal .party-empty-state,
.ao-modal .friends-empty-state {
  font-family: var(--ao-font);
  text-align: center;
  color: var(--ao-cream-dim);
  padding: 18px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px dashed #555;
  border-radius: 0;
}

.ao-empty .ao-empty-title,
.ao-modal .party-empty-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold);
  margin: 0 0 6px;
}

/* Footer actions alias */
.ao-footer-actions,
.ao-modal .party-actions,
.ao-modal .clan-actions,
.ao-modal .drop-gold-buttons,
.ao-modal .skills-modal-buttons,
.ao-modal .survivor-gameover-actions,
.ao-modal .survivor-pause-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

/* Item grids negros + bisel AO (inventario / banco / trade / merch / smith) */
.ao-item-grid,
.ao-modal .inventory-grid,
.ao-modal .bank-items-grid,
.ao-modal .sv-merch-grid,
.ao-modal .sv-smith-grid,
.ao-modal .trade-items-list,
#tab-inventory .inventory-grid .inventory-slot,
#tab-inventory .inventory-grid .inventory-grid-slot {
  border-radius: 0;
}

#tab-inventory .inventory-slot,
#tab-inventory .inventory-grid-slot,
#screen-game .inventory-slot,
#screen-game .inventory-grid-slot,
.ao-modal .sv-merch-grid > *,
.ao-modal .sv-smith-grid > *,
.ao-modal .bank-items-grid > *,
.ao-modal .bank-items-grid .bank-item,
.trade-items-list .trade-item,
.p2p-trade-overlay .trade-item,
.ao-item-grid > *,
.ao-grid-cell {
  background: var(--ao-panel-black) !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555555 !important;
  border-bottom: 1px solid #666666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.65),
    inset -1px -1px 0 rgba(212, 184, 106, 0.08) !important;
}

#tab-inventory .inventory-slot.selected,
#tab-inventory .inventory-slot.is-selected,
#tab-inventory .inventory-slot.inventory-grid-slot-selected,
#tab-inventory .inventory-grid-slot.selected,
#tab-inventory .inventory-grid-slot.is-selected,
#tab-inventory .inventory-grid-slot.inventory-grid-slot-selected,
#screen-game .inventory-slot.selected,
#screen-game .inventory-slot.is-selected,
#screen-game .inventory-slot.inventory-grid-slot-selected,
#screen-game .inventory-grid-slot.selected,
#screen-game .inventory-grid-slot.is-selected,
#screen-game .inventory-grid-slot.inventory-grid-slot-selected,
.ao-modal .sv-merch-grid > *.is-selected,
.ao-modal .sv-smith-grid > *.is-selected,
.trade-items-list .trade-item.selected,
.p2p-trade-overlay .trade-item.selected,
.ao-grid-cell.is-selected,
.ao-grid-cell[aria-selected="true"] {
  background: #1c1408 !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  border-right-color: var(--ao-gold-bright) !important;
  border-bottom-color: var(--ao-gold) !important;
  box-shadow:
    inset 0 0 0 1px var(--ao-gold),
    inset 0 0 10px rgba(232, 200, 90, 0.28),
    0 0 0 1px var(--ao-gold-bright) !important;
  outline: 1px solid var(--ao-gold-bright);
  outline-offset: -3px;
  z-index: 2;
}

/* ========================================================================== */
/* OVERRIDE GLOBAL — todas las superficies de juego (ao-ui carga al final)      */
/* ========================================================================== */

/* Overlay opaco universal */
.modal-overlay.ao-modal-overlay,
.survivor-levelup-overlay.ao-modal-overlay,
.survivor-pause-overlay.ao-modal-overlay,
.survivor-gameover-overlay.ao-modal-overlay,
#survivor-merchant-overlay.ao-modal-overlay,
#survivor-smith-overlay.ao-modal-overlay,
#survivor-city-shop-overlay.ao-modal-overlay,
.skills-modal-overlay.ao-modal-overlay,
.sst-overlay.ao-modal-overlay,
.chest-modal.ao-modal-overlay,
.survivor-guide-overlay.ao-modal-overlay,
.survivor-run-stats-overlay.ao-modal-overlay,
.rpg-dialog-overlay.ao-modal-overlay,
.inactivity-modal.ao-modal-overlay,
.duel-modal.ao-modal-overlay,
.sv-duel-modal.ao-modal-overlay,
.p2p-trade-overlay.ao-modal-overlay,
.quest-npc-dialog.ao-modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modal shell universal — longhands + border-image !important (ver .ao-modal) */
.ao-modal,
.modal-window.ao-modal,
.sv-merch-window.ao-modal,
.sv-smith-window.ao-modal,
.survivor-levelup-content.ao-modal,
.survivor-pause-content.ao-modal,
.survivor-gameover-content.ao-modal,
.skills-modal-container.ao-modal,
.sst-frame.ao-modal,
.rpg-dialog.ao-modal,
.inactivity-modal-content.ao-modal,
.chest-modal-frame.ao-modal,
.survivor-guide-panel.ao-modal,
.survivor-run-stats-panel.ao-modal,
.duel-modal-content.ao-modal,
.sv-duel-panel.ao-modal {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #6b5340 0%, #3d2a1c 42%, #1a100a 100%) !important;
  border-width: var(--ao-frame-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: var(--ao-image-rendering);
  box-shadow:
    inset 0 0 0 1px rgba(240, 230, 210, 0.06),
    inset 0 2px 0 rgba(232, 200, 90, 0.08),
    inset 0 -3px 0 rgba(0, 0, 0, 0.4),
    0 16px 48px rgba(0, 0, 0, 0.9) !important;
}

/* Titlebars de ventanas con chrome propio (trade / map / merch / smith / gameover) */
.ao-modal .trade-titlebar,
.ao-modal .world-map-titlebar,
.ao-modal .sv-merch-titlebar,
.ao-modal .sv-smith-titlebar,
.ao-modal .gameover-titlebar,
.ao-modal .survivor-levelup-header,
.ao-modal .survivor-pause-header,
.ao-modal .skills-modal-header,
.ao-modal .rpg-dialog-header,
.ao-modal .ranking-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 !important;
  padding: 7px 36px 7px 12px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, #7a5e3a 0%, #4a3420 45%, #2e1e12 100%) !important;
  border-bottom: 2px solid var(--ao-gold-dim) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 90, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
  font-family: var(--ao-font) !important;
}

.ao-modal .trade-title,
.ao-modal .world-map-name,
.ao-modal .sv-merch-titlebar h2,
.ao-modal .sv-smith-titlebar h2,
.ao-modal .gameover-titlebar h2,
.ao-modal .survivor-levelup-header h2,
.ao-modal .survivor-pause-header h2,
.ao-modal .skills-modal-header h2,
.ao-modal .rpg-dialog-title,
.ao-modal .inactivity-modal-title,
.ao-modal #survivor-levelup-title,
.ao-modal #survivor-pause-title,
.ao-modal #survivor-gameover-title {
  margin: 0 !important;
  font-family: var(--ao-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000, 0 0 1px #000 !important;
  font-style: normal !important;
}

.ao-modal .trade-subtitle,
.ao-modal .world-map-meta,
.ao-modal .sv-merch-subtitle,
.ao-modal .sv-smith-subtitle,
.ao-modal .levelup-subtitle,
.ao-modal .levelup-eyebrow,
.ao-modal .pause-eyebrow,
.ao-modal .ranking-subtitle {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  color: var(--ao-cream-dim) !important;
  letter-spacing: 0.04em;
  text-transform: none;
}

.ao-modal .levelup-eyebrow,
.ao-modal .pause-eyebrow {
  display: none !important; /* titlebar AO = título MAYÚSCULAS, sin eyebrow marketing */
}

.ao-modal .levelup-rule,
.ao-modal .pause-rule,
.ao-modal .trade-titlebar-ornament,
.ao-modal .world-map-titlebar-ornament,
.ao-modal .sv-merch-titlebar-ornament,
.ao-modal .sv-smith-titlebar-ornament,
.ao-modal .gameover-titlebar-ornament {
  display: none !important;
}

/* Close buttons en chrome propio */
.ao-modal .trade-close,
.ao-modal .world-map-close,
.ao-modal .sv-merch-close,
.ao-modal .sv-smith-close,
.ao-modal .skills-modal-close,
.ao-btn-close {
  border-radius: 0 !important;
}

/* Anti-glass / anti-Georgia en paneles de juego */
.ao-modal,
.ao-modal *,
.ao-modal-overlay,
#game-menu-panel.ao-modal,
#game-menu-panel.ao-modal * {
  font-family: var(--ao-font) !important;
}

.ao-modal,
.ao-modal .survivor-quest-npc-speech,
.ao-modal .levelup-subtitle,
.ao-modal blockquote,
.ao-modal .gameover-banner {
  font-style: normal !important;
}

/* Tabs genéricos dentro de modales */
.ao-modal .options-tabs,
.ao-modal .quests-filter-tabs,
.ao-modal .ranking-tabs,
.ao-modal .sv-smith-tabs,
.ao-modal .sv-merch-filters,
.ao-modal .sv-smith-filters {
  gap: 4px;
}

.ao-modal .quests-filter-btn,
.ao-modal .ranking-tab,
.ao-modal .ranking-sort,
.ao-modal .sv-smith-tabs button,
.ao-modal .sv-merch-filters button,
.ao-modal .sv-smith-filters button,
.ao-modal .ranking-safe-btn,
.ao-modal .ranking-icon-btn {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ao-cream-dim) !important;
  background: linear-gradient(180deg, #4a3828 0%, #2a1c12 100%) !important;
  border: 1px solid var(--ao-wood-hi) !important;
  box-shadow: inset 0 1px 0 rgba(232, 200, 90, 0.12);
}

.ao-modal .quests-filter-btn.is-active,
.ao-modal .ranking-tab.is-active,
.ao-modal .ranking-sort.is-active,
.ao-modal .sv-smith-tabs button.is-active,
.ao-modal .sv-merch-filters button.is-active,
.ao-modal .sv-smith-filters button.is-active,
.ao-modal .ranking-safe-btn.is-on {
  color: var(--ao-gold-bright) !important;
  border-color: var(--ao-gold) !important;
  background: linear-gradient(180deg, #5a4428 0%, #3a2818 100%) !important;
}

/* ========================================================================== */
/* LEVEL-UP Survivor — ranuras AO (marco 014 fino; sin cards SaaS / sin azul)  */
/* ========================================================================== */

.survivor-levelup-overlay.ao-modal-overlay {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.survivor-levelup-content.ao-modal {
  padding: 0 !important;
  max-width: min(700px, 96vw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.survivor-levelup-content.ao-modal .survivor-levelup-header {
  margin-bottom: 0 !important;
}

.survivor-levelup-content.ao-modal .survivor-levelup-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px 8px;
  max-height: min(70vh, 560px);
  overflow: auto;
  background: rgba(0, 0, 0, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(212, 184, 106, 0.06);
}

.survivor-levelup-content.ao-modal .levelup-option,
.survivor-levelup-content.ao-modal .levelup-card,
.survivor-levelup-content.ao-modal .survivor-levelup-option,
.survivor-levelup-content.ao-modal [role="option"],
.survivor-levelup-content.ao-modal .survivor-upgrade-card {
  --lu-edge: #555;
  --lu-edge-hi: #666;
  --lu-tint: rgba(255, 255, 255, 0.03);
  --lu-rarity: #b0a898;
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 248px;
  padding: 10px 8px 12px !important;
  filter: none !important;
  backdrop-filter: none !important;
  outline: none !important;
  /* Ranura AO: rareza dominante en borde + tinte */
  background:
    linear-gradient(180deg, var(--lu-tint), transparent 42%),
    linear-gradient(180deg, #1a1410 0%, #000 100%) !important;
  border-top: 2px solid var(--lu-edge) !important;
  border-left: 2px solid var(--lu-edge) !important;
  border-right: 2px solid var(--lu-edge-hi) !important;
  border-bottom: 2px solid var(--lu-edge-hi) !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.7),
    inset -1px -1px 0 rgba(212, 184, 106, 0.06) !important;
}

.survivor-levelup-content.ao-modal .levelup-option::before,
.survivor-levelup-content.ao-modal .levelup-card::before {
  content: none !important;
  display: none !important;
}

.survivor-levelup-content.ao-modal .levelup-option:hover,
.survivor-levelup-content.ao-modal .levelup-card:hover,
.survivor-levelup-content.ao-modal .survivor-levelup-option:hover,
.survivor-levelup-content.ao-modal .survivor-upgrade-card:hover {
  transform: none !important;
  background:
    linear-gradient(180deg, var(--lu-tint), transparent 50%),
    linear-gradient(180deg, #2a1e14 0%, #0a0806 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--lu-edge-hi),
    inset 1px 1px 0 rgba(0, 0, 0, 0.55) !important;
}

.survivor-levelup-content.ao-modal .levelup-option:focus,
.survivor-levelup-content.ao-modal .levelup-option:focus-visible,
.survivor-levelup-content.ao-modal .levelup-option.is-focused {
  outline: none !important;
  outline-color: transparent !important;
  background:
    linear-gradient(180deg, var(--lu-tint), transparent 45%),
    linear-gradient(180deg, #2e2216 0%, #0c0a08 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--lu-edge-hi),
    inset 0 0 14px rgba(0, 0, 0, 0.35) !important;
}

/* Selected: placa oro AO (sin azul) */
.survivor-levelup-content.ao-modal .levelup-option.is-selected {
  outline: none !important;
  outline-color: transparent !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  border-right-color: var(--ao-gold-bright) !important;
  border-bottom-color: var(--ao-gold) !important;
  background:
    linear-gradient(180deg, rgba(232, 200, 90, 0.14), transparent 48%),
    linear-gradient(180deg, #3a2818 0%, #100c08 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--ao-gold),
    inset 0 0 22px rgba(201, 162, 39, 0.18),
    0 0 0 1px rgba(232, 200, 90, 0.35) !important;
}

/* Rareza dominante: borde + tinte + franja superior (sin azul/neón) */
.survivor-levelup-content.ao-modal .levelup-option.rarity-common,
.survivor-levelup-content.ao-modal .levelup-option.rarity-uncommon,
.survivor-levelup-content.ao-modal .levelup-option.rarity-rare,
.survivor-levelup-content.ao-modal .levelup-option.rarity-epic,
.survivor-levelup-content.ao-modal .levelup-option.rarity-legendary {
  border-top-width: 3px !important;
}

.survivor-levelup-content.ao-modal .levelup-option.rarity-common {
  --lu-edge: #4a4540;
  --lu-edge-hi: #8a8278;
  --lu-tint: rgba(176, 168, 152, 0.08);
  --lu-rarity: #b0a898;
  border-top-color: #8a8278 !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-uncommon {
  --lu-edge: #2e4a2a;
  --lu-edge-hi: #7aba6a;
  --lu-tint: rgba(100, 160, 90, 0.16);
  --lu-rarity: #9ccc92;
  border-top-color: #7aba6a !important;
  border-right-color: #7aba6a !important;
  border-bottom-color: #4a8a3a !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-rare {
  --lu-edge: #1a3a6a;
  --lu-edge-hi: #4a9eff;
  --lu-tint: rgba(64, 140, 255, 0.18);
  --lu-rarity: #5eb0ff;
  border-top-color: #4a9eff !important;
  border-right-color: #4a9eff !important;
  border-bottom-color: #2a6acc !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-epic {
  --lu-edge: #4a2834;
  --lu-edge-hi: #d4a0ac;
  --lu-tint: rgba(180, 90, 120, 0.18);
  --lu-rarity: #d4a0ac;
  border-top-color: #d4a0ac !important;
  border-right-color: #d4a0ac !important;
  border-bottom-color: #8a5060 !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-legendary {
  --lu-edge: #8a6a18;
  --lu-edge-hi: #f0d070;
  --lu-tint: rgba(232, 200, 90, 0.22);
  --lu-rarity: #f0d070;
  border-top-color: #f0d070 !important;
  border-right-color: #f0d070 !important;
  border-bottom-color: #c9a227 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.7),
    inset -1px -1px 0 rgba(240, 208, 112, 0.18),
    inset 0 0 18px rgba(232, 200, 90, 0.08) !important;
}

/* Selected gana a rareza: placa oro AO (después de rareza, sin azul) */
.survivor-levelup-content.ao-modal .levelup-option.is-selected,
.survivor-levelup-content.ao-modal .levelup-option.is-selected.rarity-common,
.survivor-levelup-content.ao-modal .levelup-option.is-selected.rarity-uncommon,
.survivor-levelup-content.ao-modal .levelup-option.is-selected.rarity-rare,
.survivor-levelup-content.ao-modal .levelup-option.is-selected.rarity-epic,
.survivor-levelup-content.ao-modal .levelup-option.is-selected.rarity-legendary {
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  border-right-color: var(--ao-gold-bright) !important;
  border-bottom-color: var(--ao-gold) !important;
  background:
    linear-gradient(180deg, rgba(232, 200, 90, 0.16), transparent 48%),
    linear-gradient(180deg, #3a2818 0%, #100c08 100%) !important;
  box-shadow:
    inset 0 0 0 1px var(--ao-gold),
    inset 0 0 22px rgba(201, 162, 39, 0.2),
    0 0 0 1px rgba(232, 200, 90, 0.4) !important;
}

.survivor-levelup-content.ao-modal .levelup-name,
.survivor-levelup-content.ao-modal .levelup-card h3,
.survivor-levelup-content.ao-modal .levelup-card-title,
.survivor-levelup-content.ao-modal .survivor-upgrade-card-title {
  font-family: var(--ao-font) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: #f0d878 !important;
  font-style: normal !important;
  font-size: 14px !important;
  text-shadow: 1px 1px 0 #000, 0 0 1px #000 !important;
}

.survivor-levelup-content.ao-modal .levelup-desc,
.survivor-levelup-content.ao-modal .levelup-card p,
.survivor-levelup-content.ao-modal .levelup-card-desc,
.survivor-levelup-content.ao-modal .survivor-upgrade-card-desc {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: #8e806c !important;
  font-size: 10px !important;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.survivor-levelup-content.ao-modal .levelup-rarity.ao-badge,
.survivor-levelup-content.ao-modal .levelup-kind.ao-badge,
.survivor-levelup-content.ao-modal .levelup-stacks.ao-badge,
.survivor-levelup-content.ao-modal .levelup-rarity,
.survivor-levelup-content.ao-modal .levelup-kind,
.survivor-levelup-content.ao-modal .levelup-stacks {
  font-family: var(--ao-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  border-radius: 0 !important;
  background: #000 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  color: var(--ao-gold-bright) !important;
  padding: 2px 6px !important;
}

.survivor-levelup-content.ao-modal .levelup-rarity.ao-badge,
.survivor-levelup-content.ao-modal .levelup-rarity {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  padding: 3px 8px !important;
  color: var(--lu-rarity) !important;
  border-color: var(--lu-edge-hi) !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.55);
}

.survivor-levelup-content.ao-modal .levelup-kind.ao-badge,
.survivor-levelup-content.ao-modal .levelup-kind {
  color: #9a8c78 !important;
  border-color: #444 !important;
  font-weight: 600 !important;
  opacity: 0.9;
}

.survivor-levelup-content.ao-modal .levelup-stacks.ao-badge,
.survivor-levelup-content.ao-modal .levelup-stacks {
  color: var(--ao-cream-dim) !important;
  border-color: #555 !important;
  margin-top: auto;
}

.survivor-levelup-content.ao-modal .levelup-option.rarity-common .levelup-rarity {
  color: #b0a898 !important;
  border-color: #6a6258 !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-uncommon .levelup-rarity {
  color: #9ccc92 !important;
  border-color: #4a6a42 !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-rare .levelup-rarity {
  color: #5eb0ff !important;
  border-color: #3a7acc !important;
  background: #041018 !important;
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(64, 140, 255, 0.28) !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-epic .levelup-rarity {
  color: #d4a0ac !important;
  border-color: #6a4450 !important;
}
.survivor-levelup-content.ao-modal .levelup-option.rarity-legendary .levelup-rarity {
  color: #f0d070 !important;
  border-color: var(--ao-gold) !important;
}

.survivor-levelup-content.ao-modal .levelup-icon,
.survivor-levelup-content.ao-modal .levelup-icon.ao-grid-cell {
  width: 64px !important;
  height: 64px !important;
  margin: 0 0 12px !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(232, 200, 90, 0.12), transparent 65%),
    var(--ao-panel-black) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid var(--lu-edge-hi) !important;
  border-bottom: 1px solid var(--lu-edge-hi) !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.7),
    inset -1px -1px 0 rgba(212, 184, 106, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}

.survivor-levelup-content.ao-modal .levelup-icon .sv-icon,
.survivor-levelup-content.ao-modal .levelup-icon canvas {
  width: 48px !important;
  height: 48px !important;
}

.survivor-levelup-content.ao-modal .levelup-footer.ao-modal-footer {
  justify-content: center;
  margin-top: 0;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--ao-gold-dim);
}

.survivor-levelup-content.ao-modal .levelup-hint {
  margin: 0;
  width: 100%;
  font-family: var(--ao-font) !important;
  font-size: 11px !important;
  font-style: normal !important;
  color: var(--ao-cream-dim) !important;
  text-align: center;
  letter-spacing: 0.04em;
}

.survivor-levelup-content.ao-modal .levelup-hint kbd {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  background-color: #000 !important;
  background-image: none !important;
  border: 1px solid #555 !important;
  color: var(--ao-gold-bright) !important;
}

/* px fijos: font-size:0 + em colapsaba las flechas del hint a puntos ··· */
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow,
.survivor-levelup-content.ao-modal .levelup-hint kbd.ao-kbd-arrow,
.survivor-levelup-content.ao-modal .levelup-hint button.ao-kbd-arrow,
.levelup-hint .ao-kbd-arrow,
.levelup-hint kbd.ao-kbd-arrow,
.levelup-hint button.ao-kbd-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 1px;
  vertical-align: middle;
  border: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 10px !important;
  line-height: 1 !important;
  overflow: visible !important;
  image-rendering: var(--ao-image-rendering);
  cursor: pointer;
  opacity: 1;
  touch-action: manipulation;
}

.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow:disabled,
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow.is-dimmed,
.survivor-levelup-content.ao-modal .levelup-hint button.ao-kbd-arrow:disabled,
.survivor-levelup-content.ao-modal .levelup-hint button.ao-kbd-arrow.is-dimmed,
.levelup-hint .ao-kbd-arrow:disabled,
.levelup-hint .ao-kbd-arrow.is-dimmed,
.levelup-hint button.ao-kbd-arrow:disabled,
.levelup-hint button.ao-kbd-arrow.is-dimmed {
  opacity: 0.35 !important;
  cursor: default;
  filter: none;
}

.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow img,
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow .ao-kbd-arrow-img,
.survivor-levelup-content.ao-modal .levelup-hint kbd.ao-kbd-arrow img,
.survivor-levelup-content.ao-modal .levelup-hint kbd.ao-kbd-arrow .ao-kbd-arrow-img,
.survivor-levelup-content.ao-modal .levelup-hint button.ao-kbd-arrow img,
.survivor-levelup-content.ao-modal .levelup-hint button.ao-kbd-arrow .ao-kbd-arrow-img,
.levelup-hint .ao-kbd-arrow img,
.levelup-hint .ao-kbd-arrow .ao-kbd-arrow-img,
.levelup-hint kbd.ao-kbd-arrow img,
.levelup-hint kbd.ao-kbd-arrow .ao-kbd-arrow-img,
.levelup-hint button.ao-kbd-arrow img,
.levelup-hint button.ao-kbd-arrow .ao-kbd-arrow-img {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  image-rendering: var(--ao-image-rendering);
  pointer-events: none;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Flechas footer: arrow-up AO rotado → ← / → */
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-left .ao-kbd-arrow-img,
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-left img,
.levelup-hint .ao-kbd-arrow-left .ao-kbd-arrow-img,
.levelup-hint .ao-kbd-arrow-left img {
  transform: rotate(-90deg) !important;
}

.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-right .ao-kbd-arrow-img,
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-right img,
.levelup-hint .ao-kbd-arrow-right .ao-kbd-arrow-img,
.levelup-hint .ao-kbd-arrow-right img {
  transform: rotate(90deg) !important;
}

/* Fallback sin <img>: background-image del kit rotado */
.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-left:not(:has(img)),
.levelup-hint .ao-kbd-arrow-left:not(:has(img)) {
  background-image: var(--ao-arrow-up-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  transform: rotate(-90deg);
}

.survivor-levelup-content.ao-modal .levelup-hint .ao-kbd-arrow-right:not(:has(img)),
.levelup-hint .ao-kbd-arrow-right:not(:has(img)) {
  background-image: var(--ao-arrow-up-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  transform: rotate(90deg);
}

/* Body level-up: solo cartas (nav en footer) */
.survivor-levelup-content.ao-modal .survivor-levelup-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  gap: 4px;
  padding: 0 4px;
}

.survivor-levelup-content.ao-modal .levelup-hint-mobile {
  display: none;
}

@media (max-width: 700px) {
  .survivor-levelup-content.ao-modal .levelup-hint-desktop {
    display: none !important;
  }
  .survivor-levelup-content.ao-modal .levelup-hint-mobile {
    display: block !important;
  }
}

.mobile-mode .survivor-levelup-content.ao-modal .levelup-hint-desktop {
  display: none !important;
}

.mobile-mode .survivor-levelup-content.ao-modal .levelup-hint-mobile {
  display: block !important;
}

/* Spell list ↑↓ — solo icono AO kit (sin caja/borde/glow de botón) */
#screen-game .spell-arrow {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  filter: none !important;
  image-rendering: var(--ao-image-rendering);
}

#screen-game .spell-arrow-up {
  background-image: var(--ao-arrow-up-url) !important;
}

#screen-game .spell-arrow-down {
  background-image: var(--ao-arrow-down-url) !important;
}

#screen-game .spell-arrow-up:hover,
#screen-game .spell-arrow-up:focus-visible {
  background-image: var(--ao-arrow-up-hover-url) !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.92;
}

#screen-game .spell-arrow-down:hover,
#screen-game .spell-arrow-down:focus-visible {
  background-image: var(--ao-arrow-down-hover-url) !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0.92;
}

#screen-game .spell-arrow-up:active {
  background-image: var(--ao-arrow-up-pressed-url) !important;
  opacity: 0.78;
}

#screen-game .spell-arrow-down:active {
  background-image: var(--ao-arrow-down-pressed-url) !important;
  opacity: 0.78;
}

/* ========================================================================== */
/* PAUSA / GAME OVER                                                            */
/* ========================================================================== */

.survivor-pause-content.ao-modal,
.survivor-gameover-content.ao-modal {
  padding: 0 0 12px !important;
  width: min(440px, 94vw);
}

/* Pause — filas/ranuras biseladas (misma lógica AO que gameover) */
.survivor-pause-content.ao-modal .survivor-pause-info {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 3px !important;
  padding: 6px !important;
  margin: 0 12px 4px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.65),
    inset -1px -1px 0 rgba(212, 184, 106, 0.06) !important;
}

.survivor-pause-content.ao-modal .pause-stat {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px;
  min-height: 28px;
  padding: 5px 10px !important;
  text-align: left !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1a1410 0%, #0a0806 100%) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #666 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.55),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

.survivor-pause-content.ao-modal .pause-label {
  display: block;
  margin: 0 !important;
  min-width: 5.6em;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold-dim) !important;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
}

.survivor-pause-content.ao-modal .pause-value {
  display: block;
  min-width: 3.2em;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ao-cream) !important;
  text-align: left;
  text-shadow: 1px 1px 0 #000;
}

.survivor-pause-content.ao-modal .survivor-pause-actions {
  flex-direction: column;
  padding: 12px 16px 4px;
  justify-content: stretch;
}

.survivor-pause-content.ao-modal .pause-btn.ao-btn {
  width: 100%;
  text-align: center;
}

.survivor-pause-content.ao-modal .pause-hint {
  font-family: var(--ao-font) !important;
  color: var(--ao-cream-dim) !important;
  text-align: center;
  padding: 0 16px;
  font-style: normal !important;
}

/* Game Over — filas/ranuras biseladas (no grid de cards móviles) */
.survivor-gameover-content.ao-modal .gameover-titlebar.ao-modal-titlebar {
  min-height: 42px !important;
  padding: 10px 14px !important;
  justify-content: center;
  gap: 12px;
}

.survivor-gameover-content.ao-modal #survivor-gameover-title,
.survivor-gameover-content.ao-modal .gameover-titlebar h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}

.survivor-gameover-content.ao-modal .gameover-body {
  padding: 12px 14px 8px !important;
  text-align: left;
}

.survivor-gameover-content.ao-modal .gameover-lede,
.survivor-gameover-content.ao-modal .gameover-banner {
  margin: 0 0 10px !important;
  padding: 0 2px !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--ao-font) !important;
  font-size: 11px !important;
  color: #a89880 !important;
  text-align: center;
  font-style: normal !important;
}

.survivor-gameover-content.ao-modal .gameover-section {
  margin: 0 0 10px !important;
}

.survivor-gameover-content.ao-modal .gameover-section-title {
  margin: 0 0 6px !important;
  font-family: var(--ao-font) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--ao-gold) !important;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .survivor-gameover-stats,
.survivor-gameover-content.ao-modal .gameover-reward-slots {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 6px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.65),
    inset -1px -1px 0 rgba(212, 184, 106, 0.06) !important;
}

.survivor-gameover-content.ao-modal .gameover-stats-compact {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}

.survivor-gameover-content.ao-modal .gameover-stat,
.survivor-gameover-content.ao-modal .gameover-city-level {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px;
  min-height: 28px;
  padding: 5px 10px !important;
  text-align: left !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1a1410 0%, #0a0806 100%) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #666 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.55),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

.survivor-gameover-content.ao-modal .gameover-stat.gameover-score {
  border-right-color: var(--ao-gold) !important;
  border-bottom-color: var(--ao-gold-dim) !important;
  background: linear-gradient(180deg, #2a2010 0%, #120e08 100%) !important;
}

.survivor-gameover-content.ao-modal .gameover-essence-stat {
  border-right-color: #b8922e !important;
  border-bottom-color: #8a6a20 !important;
}

.survivor-gameover-content.ao-modal .gameover-xp-stat {
  border-right-color: #6a8a72 !important;
  border-bottom-color: #4a6a52 !important;
}

.survivor-gameover-content.ao-modal .gameover-city-level.gameover-leveled-up {
  border-right-color: #d4b44a !important;
  border-bottom-color: #a88828 !important;
  background: linear-gradient(180deg, #2c2410 0%, #141008 100%) !important;
}

.survivor-gameover-content.ao-modal .gameover-label {
  display: block;
  margin: 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold-dim) !important;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .gameover-value {
  font-size: 13px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: var(--ao-cream) !important;
  text-align: right;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .gameover-score .gameover-value,
.survivor-gameover-content.ao-modal .gameover-essence-stat .gameover-value,
.survivor-gameover-content.ao-modal .gameover-city-value {
  color: var(--ao-gold-bright) !important;
}

.survivor-gameover-content.ao-modal .gameover-xp-stat .gameover-value {
  color: #b8d4c0 !important;
}

.survivor-gameover-content.ao-modal .gameover-city-level {
  margin: 0 !important;
}

.survivor-gameover-content.ao-modal .gameover-essence-breakdown {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  border-radius: 0 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.55),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

.survivor-gameover-content.ao-modal .gameover-detail-toggle {
  font-family: var(--ao-font) !important;
  color: var(--ao-gold) !important;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-body {
  padding: 6px !important;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-group-title {
  color: var(--ao-gold) !important;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-group-total {
  color: var(--ao-gold-bright) !important;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-title {
  margin: 0 0 6px;
  padding: 2px 4px 6px;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ao-gold) !important;
  text-align: center;
  border-bottom: 1px solid #3a2a1a;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  padding: 3px 8px;
  background: linear-gradient(180deg, #14100c 0%, #0a0806 100%);
  border-top: 1px solid #1a120c;
  border-left: 1px solid #1a120c;
  border-right: 1px solid #444;
  border-bottom: 1px solid #555;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-label {
  color: #9a8c78 !important;
  font-size: 10px !important;
}

.survivor-gameover-content.ao-modal .gameover-breakdown-value {
  color: var(--ao-cream) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Achievements — ranuras/filas (no cards flat) */
.survivor-gameover-content.ao-modal .gameover-achievements-panel {
  margin: 0 0 10px !important;
  padding: 6px !important;
  text-align: left;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.55),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

.survivor-gameover-content.ao-modal .gameover-achievements-panel .ach-panel-title {
  margin: 0 0 6px !important;
  padding: 2px 4px 6px;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ao-gold) !important;
  text-align: center;
  border-bottom: 1px solid #3a2a1a;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .gameover-achievements-panel .ach-list {
  gap: 2px !important;
  max-height: 180px;
  padding: 0 4px 0 0 !important;
}

.survivor-gameover-content.ao-modal .ach-card,
.survivor-gameover-content.ao-modal .ach-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #14100c 0%, #0a0806 100%) !important;
  border-top: 1px solid #1a120c !important;
  border-left: 1px solid #1a120c !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.5),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
  color: var(--ao-cream) !important;
}

.survivor-gameover-content.ao-modal .ach-card.rarity-uncommon,
.survivor-gameover-content.ao-modal .ach-row.rarity-uncommon {
  border-right-color: #4a8a48 !important;
  border-bottom-color: #3a6a38 !important;
}
.survivor-gameover-content.ao-modal .ach-card.rarity-rare,
.survivor-gameover-content.ao-modal .ach-row.rarity-rare {
  border-right-color: #4a7aaa !important;
  border-bottom-color: #3a5a7a !important;
}
.survivor-gameover-content.ao-modal .ach-card.rarity-epic,
.survivor-gameover-content.ao-modal .ach-row.rarity-epic {
  border-right-color: #8a4a9a !important;
  border-bottom-color: #6a3a7a !important;
}
.survivor-gameover-content.ao-modal .ach-card.rarity-legendary,
.survivor-gameover-content.ao-modal .ach-row.rarity-legendary {
  border-right-color: var(--ao-gold) !important;
  border-bottom-color: var(--ao-gold-dim) !important;
  background: linear-gradient(180deg, #2a2010 0%, #120e08 100%) !important;
}

.survivor-gameover-content.ao-modal .ach-card-icon,
.survivor-gameover-content.ao-modal .ach-row-icon {
  flex-shrink: 0;
  width: 40px !important;
  height: 40px !important;
  display: grid;
  place-items: center;
  border-radius: 0 !important;
  color: var(--ach-color, var(--ao-gold));
  background:
    radial-gradient(circle at 50% 35%, rgba(232, 200, 90, 0.1), transparent 65%),
    #000 !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #666 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.7) !important;
}

.survivor-gameover-content.ao-modal .ach-card-icon .sv-icon,
.survivor-gameover-content.ao-modal .ach-row-icon .sv-icon,
.survivor-gameover-content.ao-modal .ach-card-icon canvas,
.survivor-gameover-content.ao-modal .ach-row-icon canvas {
  width: 28px !important;
  height: 28px !important;
}

.survivor-gameover-content.ao-modal .ach-card-name,
.survivor-gameover-content.ao-modal .ach-row-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--ao-cream) !important;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .ach-card-rarity,
.survivor-gameover-content.ao-modal .ach-row-rarity {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--ach-color, var(--ao-gold-dim)) !important;
}

.survivor-gameover-content.ao-modal .ach-card-desc,
.survivor-gameover-content.ao-modal .ach-row-desc {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
  color: #9a8c78 !important;
  line-height: 1.3;
}

.survivor-gameover-content.ao-modal .ach-card-reward,
.survivor-gameover-content.ao-modal .ach-row-reward {
  margin-top: 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--ao-gold-bright) !important;
}

.survivor-gameover-content.ao-modal .gameover-hint {
  font-family: var(--ao-font) !important;
  color: #7a6a55 !important;
  text-align: center;
  padding: 0 4px !important;
  margin: 6px 0 8px !important;
  font-size: 10px !important;
  font-style: normal !important;
}

.survivor-gameover-content.ao-modal .survivor-gameover-actions {
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px;
  padding: 10px 14px 4px !important;
  margin: 0 !important;
}

.survivor-gameover-content.ao-modal .survivor-btn.ao-btn {
  width: auto !important;
  min-width: 148px;
  text-align: center;
}

/* ========================================================================== */
/* TRADE / MERCHANT / SMITH / CITY SHOP                                         */
/* ========================================================================== */

#trade-window-overlay .trade-window.ao-modal,
#survivor-merchant-overlay .sv-merch-window.ao-modal,
#survivor-smith-overlay .sv-smith-window.ao-modal,
#survivor-city-shop-overlay .sv-merch-window.ao-modal {
  padding: 0 !important;
  overflow: hidden;
}

#trade-window-overlay .trade-panel,
#survivor-merchant-overlay .sv-merch-panel,
#survivor-city-shop-overlay .sv-merch-panel,
#bank-window-overlay .bank-panel {
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid #555 !important;
}

#trade-window-overlay .trade-panel-title,
#survivor-merchant-overlay .sv-merch-panel-title,
#survivor-smith-overlay .sv-smith-item-name,
#survivor-city-shop-overlay .sv-merch-panel-title,
#bank-window-overlay .bank-panel-title {
  font-family: var(--ao-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ao-gold) !important;
}

#trade-window-overlay .trade-footer,
#survivor-merchant-overlay .sv-merch-footer,
#survivor-smith-overlay .sv-smith-footer,
#survivor-city-shop-overlay .sv-merch-footer {
  border-top: 1px solid var(--ao-gold-dim);
  background: rgba(0, 0, 0, 0.35);
}

#survivor-merchant-overlay .sv-merch-btn.ao-btn,
#survivor-smith-overlay .sv-smith-btn.ao-btn,
#survivor-city-shop-overlay .sv-merch-btn.ao-btn,
#trade-window-overlay .trade-btn.ao-btn {
  min-width: 96px;
}

/* Close positioning for custom titlebars */
.ao-modal .trade-close.ao-btn-close,
.ao-modal .world-map-close.ao-btn-close,
.ao-modal .sv-merch-close.ao-btn-close,
.ao-modal .sv-smith-close.ao-btn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.ao-modal .trade-close.ao-btn-close:active,
.ao-modal .world-map-close.ao-btn-close:active,
.ao-modal .sv-merch-close.ao-btn-close:active,
.ao-modal .sv-smith-close.ao-btn-close:active {
  transform: translateY(-50%);
}

/* ========================================================================== */
/* PARTY / CLAN / FRIENDS / QUESTS / STATS / RANKING / WORK                     */
/* ========================================================================== */

#party-modal .ao-modal,
#party-invite-modal .ao-modal,
#clan-modal .ao-modal,
#clan-create-modal .ao-modal,
#friends-modal .ao-modal,
#stats-modal .ao-modal,
#ranking-modal .ao-modal,
#work-modal .ao-modal,
#fishing-modal .ao-modal,
#news-modal .ao-modal,
#tame-modal .ao-modal,
#drop-gold-modal .ao-modal,
#drop-item-modal .ao-modal,
#npc-dialog-overlay .ao-modal,
#crafting-window-overlay .ao-modal,
#bank-window-overlay .ao-modal,
#world-map-modal .ao-modal {
  padding: 0 0 10px !important;
}

#party-modal .ao-modal-titlebar,
#party-invite-modal .ao-modal-titlebar,
#clan-modal .ao-modal-titlebar,
#friends-modal .ao-modal-titlebar,
#quests-modal .ao-modal-titlebar,
#stats-modal .ao-modal-titlebar,
#ranking-modal .ao-modal-titlebar {
  justify-content: space-between;
  padding-right: 10px !important;
}

#party-modal .ao-btn-close,
#party-invite-modal .ao-btn-close,
#clan-modal .ao-btn-close,
#friends-modal .ao-btn-close,
#quests-modal .ao-btn-close,
#stats-modal .ao-btn-close,
#ranking-modal .ao-btn-close,
#options-modal .ao-btn-close {
  position: static;
  transform: none;
}

#party-modal .ao-btn-close:active,
#quests-modal .ao-btn-close:active,
#stats-modal .ao-btn-close:active,
#ranking-modal .ao-btn-close:active {
  transform: none;
}

#stats-modal .stats-panel-card {
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid #555 !important;
}

#stats-modal .stats-panel-card h4 {
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold) !important;
  border-bottom: 1px solid var(--ao-gold-dim);
  font-size: 11px;
}

#quests-modal .quests-sidebar,
#quests-modal .quests-detail-pane {
  background: transparent;
  border: 0;
  border-radius: 0 !important;
}

#ranking-modal .ranking-list,
#ranking-modal .ranking-summary-grid {
  border-radius: 0 !important;
}

#world-map-modal .world-map-window.ao-modal {
  max-width: min(960px, 96vw);
}

#world-map-modal .world-map-titlebar.ao-modal-titlebar {
  background:
    linear-gradient(180deg, #3a2e22 0%, #241c14 55%, #16120e 100%) !important;
  border-bottom: 1px solid var(--ao-gold-dim) !important;
  box-shadow: inset 0 1px 0 rgba(232, 200, 90, 0.16) !important;
  min-height: 44px;
}

#world-map-modal .world-map-name {
  font-family: var(--ao-font) !important;
  letter-spacing: 0.12em;
  max-width: min(560px, 78vw);
}

#world-map-modal .world-map-meta {
  display: none !important;
}

#world-map-modal .world-map-chrome {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  background:
    linear-gradient(180deg, #2e2014 0%, #18110c 60%, #100c08 100%) !important;
  border-bottom: 1px solid var(--ao-gold-dim) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 90, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55) !important;
  font-family: var(--ao-font) !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
}

#world-map-modal .world-map-chrome-left,
#world-map-modal .world-map-chrome-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#world-map-modal .world-map-chrome-right {
  justify-content: flex-end;
}

#world-map-modal .world-map-actions {
  justify-self: center !important;
  margin: 0 !important;
  display: flex;
  justify-content: center;
  gap: 6px;
}

#world-map-modal .world-map-stage {
  background: #000 !important;
  border-top: 1px solid var(--ao-bevel-lo);
}

#world-map-modal .world-map-toolbar {
  border-radius: 0 !important;
  border: 1px solid #3d2e1e !important;
  background: #0a0806 !important;
  box-shadow: inset 0 1px 0 rgba(232, 200, 90, 0.08);
}

#world-map-modal .world-map-zone-badge {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  letter-spacing: 0.08em;
  background: #000 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  color: var(--ao-gold-bright) !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#world-map-modal .world-map-stat span {
  font-family: var(--ao-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  color: var(--ao-cream-dim) !important;
}

#world-map-modal .world-map-stat strong {
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
}

#world-map-modal .world-map-legend {
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ao-cream-dim) !important;
  gap: 8px 12px;
}

#world-map-modal .world-map-legend > div {
  gap: 5px;
}

/* Marcadores de leyenda: forma intacta; solo bisel/borde AO */
#world-map-modal .world-map-dot {
  box-shadow:
    0 0 0 1px var(--ao-bevel-lo),
    0 0 0 2px rgba(0, 0, 0, 0.55) !important;
}

#world-map-modal .world-map-dot.you {
  background: #4caf50 !important;
}

/* ========================================================================== */
/* TOOLTIPS — chrome plano (borde dorado sólido, SIN 9-slice)                   */
/* ========================================================================== */

.item-tooltip.tooltip-detailed,
.item-tooltip.ao-tooltip-window,
.ability-tooltip.ao-tooltip-window,
.ability-tooltip {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
  background:
    linear-gradient(180deg, #1a120c 0%, #0c0906 100%) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ao-gold) !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  border-right-color: var(--ao-gold-dim) !important;
  border-bottom-color: var(--ao-gold-dim) !important;
  border-image: none !important;
  image-rendering: auto;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 8px 22px rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.item-tooltip .tooltip-name,
.ability-tooltip .ability-tooltip-name {
  font-family: var(--ao-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ao-gold-bright) !important;
}

.item-tooltip .tooltip-desc,
.ability-tooltip .ability-tooltip-desc {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  color: var(--ao-cream-dim) !important;
}

/* -------------------------------------------------------------------------- */
/* Context menu — chrome plano (ya no 9-slice: saturaba junto al HUD)           */
/* -------------------------------------------------------------------------- */

.context-menu,
.context-submenu {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-font) !important;
  line-height: var(--ao-chrome-line) !important;
  color: var(--ao-cream) !important;
  background:
    linear-gradient(
      180deg,
      var(--ao-chrome-bg-hi) 0%,
      var(--ao-chrome-bg-mid) 55%,
      var(--ao-chrome-bg-lo) 100%
    ) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: var(--ao-chrome-edge-hi) !important;
  border-left-color: var(--ao-chrome-edge-mid) !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  border-image: none !important;
  image-rendering: auto;
  box-shadow:
    inset 1px 1px 0 var(--ao-chrome-inset-hi),
    inset -1px -1px 0 var(--ao-chrome-inset-lo),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 8px 22px rgba(0, 0, 0, 0.82) !important;
}

.context-menu {
  padding: 3px 0 !important;
  min-width: 176px;
  animation: none !important;
}

.context-submenu {
  padding: 3px 0 !important;
}

.context-menu button,
.context-menu .context-menu-item {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-font) !important;
  letter-spacing: 0.04em;
  color: var(--ao-cream) !important;
  background: transparent !important;
  text-transform: none;
  padding: 5px 12px !important;
}

.context-menu button:hover,
.context-menu .context-menu-item:hover {
  background: rgba(201, 162, 39, 0.16) !important;
  color: var(--ao-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.2);
}

.context-menu-header {
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-label) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ao-gold-bright) !important;
  border-bottom: 1px solid var(--ao-gold-dim) !important;
  padding: 5px 12px 4px !important;
  margin-bottom: 2px;
}

/* -------------------------------------------------------------------------- */
/* Popups cortos con frame 9-slice (.ao-framed) — solo duel invite / similares  */
/* -------------------------------------------------------------------------- */

.ao-framed,
.survivor-duel-invite {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #3d2a1c 0%, #1a100a 100%) !important;
  border-width: var(--ao-frame-compact-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-compact-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: var(--ao-image-rendering);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85) !important;
}

/* ========================================================================== */
/* RPG DIALOG / INACTIVITY / SKILLS / DUEL / CHEST / GUIDE / P2P                */
/* ========================================================================== */

.rpg-dialog-overlay.ao-modal-overlay,
.inactivity-modal.ao-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpg-dialog.ao-modal,
.inactivity-modal-content.ao-modal {
  width: min(420px, 92vw);
  padding: 0 0 12px !important;
}

.rpg-dialog.ao-modal .rpg-dialog-body,
.inactivity-modal-content.ao-modal .inactivity-modal-text,
.inactivity-modal-content.ao-modal .inactivity-modal-subtext {
  padding: 12px 16px;
  color: var(--ao-cream-dim);
  font-family: var(--ao-font) !important;
}

.rpg-dialog.ao-modal .rpg-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 16px 4px;
  border-top: 1px solid var(--ao-gold-dim);
}

.inactivity-modal-content.ao-modal .ao-modal-footer.ao-footer-actions,
.inactivity-modal-content.ao-modal .ao-footer-actions,
.inactivity-modal-content.ao-modal .inactivity-modal-actions,
#inactivity-modal .ao-modal-footer,
#inactivity-modal .inactivity-modal-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 8px 16px 10px !important;
  border-top: 1px solid var(--ao-gold-dim);
  box-sizing: border-box;
}

.rpg-dialog.ao-modal .rpg-dialog-btn.ao-btn {
  min-width: 100px;
}

.inactivity-modal-content.ao-modal .inactivity-modal-btn.ao-btn,
#inactivity-modal #btn-im-here,
#inactivity-modal .inactivity-modal-btn {
  min-width: 100px;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  float: none !important;
}

.rpg-dialog.ao-modal .rpg-dialog-btn.danger.ao-btn,
.rpg-dialog.ao-modal .rpg-dialog-confirm.danger {
  background-image: var(--ao-btn-danger-url) !important;
}

.inactivity-modal-content.ao-modal .inactivity-modal-icon {
  display: none;
}

.inactivity-modal-content.ao-modal .inactivity-countdown {
  font-family: var(--ao-font) !important;
  font-weight: 700;
  font-size: 28px;
  color: var(--ao-gold-bright);
  text-align: center;
  background: #000;
  border: 1px solid #555;
  margin: 8px 16px;
  padding: 10px;
  border-radius: 0 !important;
}

.skills-modal-overlay.ao-modal-overlay .skills-modal-container.ao-modal {
  width: min(720px, 94vw);
  padding: 0 0 10px !important;
}

.skills-modal-overlay .skills-list,
.skills-modal-overlay .skills-column {
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #444;
}

.skills-modal-overlay .skills-btn.ao-btn {
  min-width: 100px;
}

.skills-modal-overlay .skills-modal-close.ao-btn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

/* Duel */
.sv-duel-modal.ao-modal-overlay .sv-duel-panel.ao-modal,
.duel-modal.ao-modal-overlay .duel-modal-content.ao-modal {
  width: min(400px, 92vw);
  padding: 0 0 12px !important;
}

/* duel invite: frame vía .ao-framed; tipografía / layout */
.survivor-duel-invite {
  gap: 10px !important;
  padding: 6px 8px !important;
}

.survivor-duel-invite-copy strong {
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ao-gold-bright) !important;
}

/* Chest / guide / run stats / skill tree — marco AO */
.chest-modal.ao-modal-overlay,
.survivor-guide-overlay.ao-modal-overlay,
.survivor-run-stats-overlay.ao-modal-overlay,
.sst-overlay.ao-modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: none !important;
}

.chest-modal-frame.ao-modal,
.survivor-guide-panel.ao-modal,
.survivor-run-stats-panel.ao-modal,
.sst-overlay .sst-frame.ao-modal,
.sst-overlay .sst-panel {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
}

.sst-overlay .sst-frame.ao-modal,
.sst-overlay.ao-modal-overlay .sst-frame {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, #6b5340 0%, #3d2a1c 42%, #1a100a 100%) !important;
  border-width: var(--ao-frame-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: var(--ao-image-rendering);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9) !important;
}

.sst-overlay .sst-title,
.chest-modal-title,
.survivor-guide-overlay h2,
.survivor-run-stats-overlay h2 {
  font-family: var(--ao-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em;
  color: var(--ao-gold-bright) !important;
  font-style: normal !important;
}

.p2p-trade-overlay.ao-modal-overlay .ao-modal {
  padding: 0 0 10px !important;
}

/* Sidebar tabs (inventario/hechizos) — bisel AO sin redondeo */
#screen-game .sidebar-tab {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#screen-game .sidebar-tab.sidebar-tab-active {
  color: var(--ao-gold-bright);
  border-color: var(--ao-gold-dim);
}

/* Switches/sliders opciones — cuadrado biselado AO (sin pills 999px) */
#options-modal .options-switch,
#options-modal .options-switch-slider,
#options-modal .options-switch-slider::before {
  border-radius: 0 !important;
}

#options-modal .options-switch-slider {
  background: linear-gradient(180deg, #2a1a10 0%, #14100a 100%) !important;
  border: 2px solid var(--ao-wood-hi) !important;
  border-top-color: var(--ao-bevel-lo) !important;
  border-left-color: var(--ao-bevel-lo) !important;
  border-right-color: #1a1008 !important;
  border-bottom-color: #0a0806 !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.45) !important;
}

#options-modal .options-switch-slider::before {
  width: 14px !important;
  height: 14px !important;
  left: 2px !important;
  top: 2px !important;
  background: linear-gradient(180deg, #8a7a60 0%, #5a4a34 100%) !important;
  border: 1px solid var(--ao-bevel-lo) !important;
  border-top-color: #b8a878 !important;
  border-left-color: #9a8a60 !important;
  box-shadow: none !important;
}

#options-modal .options-switch input:checked + .options-switch-slider {
  background: linear-gradient(180deg, #5a4020 0%, #3a2810 100%) !important;
  border-color: var(--ao-gold-dim) !important;
  border-top-color: var(--ao-gold) !important;
  border-left-color: var(--ao-gold-dim) !important;
}

#options-modal .options-switch input:checked + .options-switch-slider::before {
  background: linear-gradient(180deg, var(--ao-gold-bright) 0%, var(--ao-gold) 55%, var(--ao-gold-dim) 100%) !important;
  border-color: var(--ao-bevel-lo) !important;
  border-top-color: #f0e0a0 !important;
}

#options-modal .options-range,
#options-modal input[type="range"].options-range,
#options-modal .options-row input[type="range"] {
  accent-color: var(--ao-gold);
}

#options-modal .options-range::-webkit-slider-runnable-track,
#options-modal .options-row input[type="range"]::-webkit-slider-runnable-track,
#options-modal input[type="range"]::-webkit-slider-runnable-track {
  border-radius: 0 !important;
  height: 8px !important;
  background: linear-gradient(180deg, #0a0806 0%, #1a120c 100%) !important;
  border: 1px solid var(--ao-wood-hi) !important;
  border-top-color: #1a1008 !important;
  border-bottom-color: #3d2e1e !important;
}

#options-modal .options-range::-webkit-slider-thumb,
#options-modal .options-row input[type="range"]::-webkit-slider-thumb,
#options-modal input[type="range"]::-webkit-slider-thumb {
  border-radius: 0 !important;
  width: 14px !important;
  height: 18px !important;
  margin-top: -6px !important;
  background: linear-gradient(180deg, var(--ao-gold-bright) 0%, var(--ao-gold) 45%, var(--ao-gold-dim) 100%) !important;
  border: 1px solid var(--ao-bevel-lo) !important;
  border-top-color: #f0e0a0 !important;
  border-left-color: var(--ao-bevel-hi) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

#options-modal .options-range::-moz-range-track,
#options-modal .options-row input[type="range"]::-moz-range-track,
#options-modal input[type="range"]::-moz-range-track {
  border-radius: 0 !important;
  height: 8px !important;
  background: linear-gradient(180deg, #0a0806 0%, #1a120c 100%) !important;
  border: 1px solid var(--ao-wood-hi) !important;
}

#options-modal .options-range::-moz-range-thumb,
#options-modal .options-row input[type="range"]::-moz-range-thumb,
#options-modal input[type="range"]::-moz-range-thumb {
  border-radius: 0 !important;
  width: 14px !important;
  height: 18px !important;
  background: linear-gradient(180deg, var(--ao-gold-bright) 0%, var(--ao-gold) 45%, var(--ao-gold-dim) 100%) !important;
  border: 1px solid var(--ao-bevel-lo) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* ========================================================================== */
/* Mobile — forzar 0 radius en superficies AO                                   */
/* ========================================================================== */

.mobile-mode .ao-modal,
.mobile-mode .ao-btn,
.mobile-mode .ao-btn-close,
.mobile-mode .ao-input,
.mobile-mode .ao-tab,
.mobile-mode .ao-grid-cell,
.mobile-mode .ao-badge,
.mobile-mode .survivor-levelup-content.ao-modal,
.mobile-mode .survivor-pause-content.ao-modal,
.mobile-mode .survivor-gameover-content.ao-modal,
.mobile-mode .sv-merch-window.ao-modal,
.mobile-mode .sv-smith-window.ao-modal {
  border-radius: 0 !important;
}

/* ========================================================================== */
/* Guía / Run stats / Quest NPC / Duel toast — pulido AO                        */
/* ========================================================================== */

/* Guía — overrides definitivos (#id gana al style inject de survivorGuide.js) */
#survivor-guide-modal.survivor-guide-overlay.ao-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#survivor-guide-modal.survivor-guide-overlay.ao-modal-overlay[style*="flex"] {
  display: flex !important;
}

#survivor-guide-modal .survivor-guide-panel.ao-modal,
#survivor-guide-modal .survivor-guide-container.ao-modal {
  width: min(920px, 96vw) !important;
  max-width: 1100px !important;
  height: auto !important;
  max-height: min(88vh, 820px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  border-width: var(--ao-frame-width) !important;
  border-style: solid !important;
  border-color: var(--ao-gold-dim) !important;
  border-image-source: var(--ao-frame-url) !important;
  border-image-slice: var(--ao-frame-slice) !important;
  border-image-width: var(--ao-frame-width) !important;
  border-image-outset: 0 !important;
  border-image-repeat: stretch !important;
  image-rendering: var(--ao-image-rendering);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #6b5340 0%, #3d2a1c 42%, #1a100a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(240, 230, 210, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.9) !important;
  font-family: var(--ao-font) !important;
  color: var(--ao-cream) !important;
}

#survivor-guide-modal .survivor-guide-container::before,
#survivor-guide-modal .survivor-guide-container::after {
  content: none !important;
  display: none !important;
}

#survivor-guide-modal .guide-header.ao-modal-titlebar {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 10px 7px 12px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--ao-gold-dim) !important;
  border-image: none !important;
  background:
    linear-gradient(180deg, #7a5e3a 0%, #4a3420 45%, #2e1e12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 200, 90, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
  filter: none !important;
}

#survivor-guide-modal .guide-header h2.ao-modal-title,
#survivor-guide-modal .guide-header .ao-modal-title {
  margin: 0 !important;
  font-family: var(--ao-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000, 0 0 1px #000 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ao-gold-bright) !important;
  filter: none !important;
}

#survivor-guide-modal .guide-close-btn.ao-btn-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 0 !important;
  filter: none !important;
}

#survivor-guide-modal .guide-close-btn.ao-btn-close:hover,
#survivor-guide-modal .guide-close-btn.ao-btn-close:active {
  transform: none !important;
}

#survivor-guide-modal .guide-nav-btn {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ao-cream-dim) !important;
  background: linear-gradient(180deg, #4a3828 0%, #2a1c12 100%) !important;
  border: 1px solid var(--ao-wood-hi) !important;
  box-shadow: none !important;
}

#survivor-guide-modal .guide-nav-btn.active,
#survivor-guide-modal .guide-nav-btn:hover {
  color: var(--ao-gold-bright) !important;
  border-color: var(--ao-gold) !important;
}

#survivor-guide-modal .guide-content,
#survivor-guide-modal .guide-body {
  font-family: var(--ao-font) !important;
  color: var(--ao-cream-dim) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

#survivor-guide-modal .guide-content {
  font-style: normal !important;
}

#survivor-guide-modal .attack-number {
  border-radius: 0 !important;
}

#bank-window-overlay .bank-gold-btn.ao-btn,
#bank-window-overlay .bank-btn.ao-btn,
#crafting-window-overlay #crafting-craft-btn.ao-btn {
  min-width: 96px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#bank-window-overlay .bank-footer.ao-modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 0;
}

.survivor-run-stats-overlay.ao-modal-overlay .survivor-run-stats-panel.ao-modal {
  width: min(720px, 94vw);
  max-height: min(86vh, 760px);
  padding: 0 0 12px !important;
  overflow: hidden;
}

.survivor-run-stats-overlay .survivor-run-stats-close.ao-btn-close {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

.survivor-run-stats-overlay .run-stat-card,
.survivor-run-stats-overlay .run-source-row {
  border-radius: 0 !important;
  background: #000 !important;
  border: 1px solid #555 !important;
  font-family: var(--ao-font) !important;
}

.quest-npc-dialog .quest-dialog-card {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #2a1e14 0%, #000 100%) !important;
  border: 2px solid #555 !important;
  font-family: var(--ao-font) !important;
}

.quest-npc-dialog .quest-dialog-card.is-ready {
  border-color: var(--ao-gold) !important;
}

.quest-npc-dialog .quest-dialog-card button,
.quest-npc-dialog .quest-dialog-actions button {
  border-radius: 0 !important;
}

.quest-npc-dialog .ao-btn-close {
  position: static;
  transform: none;
}

.survivor-duel-invite .survivor-duel-invite-btn.ao-btn {
  min-width: 88px;
  padding: 6px 10px;
  font-size: 11px;
}

.chest-modal.ao-modal-overlay .chest-modal-frame.ao-modal {
  padding: 0 0 12px !important;
}

.chest-modal .chest-modal-titlebar.ao-modal-titlebar {
  justify-content: center;
  padding-right: 12px !important;
}

.chest-modal .chest-btn.ao-btn {
  min-width: 110px;
}

.sst-overlay .sst-chip.ao-badge {
  border-radius: 0 !important;
}

.sst-overlay .sst-close.ao-btn-close {
  position: static;
  transform: none;
}

.sst-overlay .sst-detail,
.sst-overlay .sst-canvas-wrap {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #18140f 0%, #0c0a08 100%) !important;
  border-top: 1px solid var(--ao-bevel-lo) !important;
  border-left: 1px solid var(--ao-bevel-lo) !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.55),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

/* Skill tree detail — ranura AO (sin card SaaS / glow radial) */
.sst-overlay .sst-detail-card,
.sst-overlay .sst-detail-slot {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #14100c 0%, #0a0806 100%) !important;
  border-top: 1px solid #1a120c !important;
  border-left: 1px solid #1a120c !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.5),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
}

.sst-overlay .sst-detail-icon.ao-grid-cell,
.sst-overlay .sst-detail-icon {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #1a140e 0%, #0c0a08 100%) !important;
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-right: 1px solid #8a6a3a !important;
  border-bottom: 1px solid #b8944a !important;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.85),
    inset -1px -1px 0 rgba(232, 200, 90, 0.12) !important;
}

.ao-modal .invite-accept.ao-btn,
.ao-modal .invite-decline.ao-btn {
  min-width: 88px;
  padding: 5px 10px;
  font-size: 11px;
}

/* Party/clan invite accept buttons created en runtime (si usan modal-btn) */
.ao-modal .modal-btn:not(.ao-btn) {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ao-cream) !important;
  background-color: #4a3420 !important;
  background-image: var(--ao-btn-url) !important;
  background-size: 100% 100% !important;
  border-top: 2px solid var(--ao-bevel-hi) !important;
  border-left: 2px solid #b8944a !important;
  border-right: 2px solid var(--ao-bevel-lo) !important;
  border-bottom: 2px solid #1a1008 !important;
}

.ao-modal .modal-btn-primary:not(.ao-btn) {
  background-image: var(--ao-btn-primary-url) !important;
  color: #1a1008 !important;
}

.ao-modal .modal-btn-danger:not(.ao-btn) {
  background-image: var(--ao-btn-danger-url) !important;
  color: #ffe8e0 !important;
}

/* ========================================================================== */
/* FASE 2 — HiDPI frames, tooltips mini/detailed, HUD/sidebar, skill tree      */
/* ========================================================================== */

.ao-modal,
.sst-overlay .sst-frame.ao-modal {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  :root {
    /* Asset 96×96 (2× del 48×48); slice debe ser 32, no 16 */
    --ao-frame-url: url("../assets/ui/ao-kit/frames/panel-frame-gold-2x.png");
    --ao-frame-slice: 32;
    --ao-frame-width: 10px;
    --ao-frame-compact-width: 9px;
    --ao-frame-ornate-url: var(--ao-frame-ornate-2x-url);
    /* Close 56×56 → nítido en HiDPI (caja CSS sigue 26×26) */
    --ao-close-url: var(--ao-close-2x-url);
    --ao-close-hover-url: var(--ao-close-hover-2x-url);
    --ao-close-pressed-url: var(--ao-close-pressed-2x-url);
    --ao-arrow-up-url: var(--ao-arrow-up-2x-url);
    --ao-arrow-down-url: var(--ao-arrow-down-2x-url);
  }

  .ao-btn-close {
    image-rendering: auto;
  }
}

.item-tooltip.tooltip-mini {
  border-radius: 0 !important;
  min-width: 0 !important;
  max-width: 220px !important;
  padding: 5px 8px !important;
  background: #000 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  border-image: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: none !important;
}

.item-tooltip.tooltip-mini .tooltip-name {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ao-gold-bright) !important;
}

.item-tooltip.tooltip-detailed {
  /* Misma dirección chrome: borde sólido, sin cornisa PNG */
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ao-gold) !important;
  border-image: none !important;
}

.ability-tooltip .tooltip-name,
.ability-tooltip .ability-tooltip-name {
  font-family: var(--ao-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ao-gold-bright) !important;
}

.ability-tooltip .tooltip-desc,
.ability-tooltip .ability-tooltip-desc {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  color: var(--ao-cream-dim) !important;
}

/* HUD Survivor run + sidebar biseles */
#screen-game .survivor-run-hud,
#screen-game .run-hud-core,
#screen-game .survivor-stats {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
}

#screen-game .surv-atk-icon-wrap,
#screen-game .inventory-slot,
#screen-game .spell-arrow,
#screen-game .spell-info-icon-wrap,
#screen-game .spells-actions button {
  border-radius: 0 !important;
}

/* CTA LANZAR — placa oro AO (sprite primary), sin cian ni sheen cíclico */
#screen-game #btn-spell-cast.spell-cast-cta,
#screen-game #btn-spell-cast.spell-cast-cta.ao-btn {
  min-height: 36px !important;
  height: 36px !important;
  width: 100%;
  padding: 0 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  color: #1a1008 !important;
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.4) !important;
  background-color: var(--ao-gold-dim) !important;
  background-image: var(--ao-btn-primary-url) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  border-top: 2px solid #f0d878 !important;
  border-left: 2px solid #e0c060 !important;
  border-right: 2px solid #5a3e10 !important;
  border-bottom: 2px solid #3a2808 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 180, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.4) !important;
  filter: none !important;
  animation: none !important;
}

#screen-game #btn-spell-cast.spell-cast-cta:hover,
#screen-game #btn-spell-cast.spell-cast-cta:focus-visible,
#screen-game #btn-spell-cast.spell-cast-cta.ao-btn:hover,
#screen-game #btn-spell-cast.spell-cast-cta.ao-btn:focus-visible {
  color: #0a0804 !important;
  background-image: var(--ao-btn-primary-hover-url) !important;
  border-top-color: #fff0a8 !important;
  border-left-color: #f0d878 !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 200, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

#screen-game #btn-spell-cast.spell-cast-cta:active,
#screen-game #btn-spell-cast.spell-cast-cta.ao-btn:active {
  color: #1a1008 !important;
  background-image: var(--ao-btn-primary-pressed-url) !important;
  border-top-color: #5a3e10 !important;
  border-left-color: #3a2808 !important;
  border-right-color: #e0c060 !important;
  border-bottom-color: #f0d878 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55) !important;
  filter: none !important;
}

#screen-game .sidebar-btn-footer {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------- */
/* FASE 2 — HUD chrome: MENU/SALIR/ENVIAR/SEGURO + chrome CSS (sin 9-slice)   */
/* -------------------------------------------------------------------------- */

#btn-game-menu.ao-btn,
#btn-logout.ao-btn {
  flex: 1;
  width: auto;
  min-height: 32px;
  height: auto;
  padding: 8px 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  margin: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#btn-game-menu.ao-btn.menu-open {
  background-image: var(--ao-btn-pressed-url) !important;
  color: var(--ao-gold-bright) !important;
  border-color: var(--ao-gold) !important;
  letter-spacing: 0.05em;
}

#btn-logout.ao-btn.ao-btn-danger {
  background-image: var(--ao-btn-danger-url) !important;
}

#console-send.ao-btn {
  order: 3;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.06em;
  margin-left: 2px;
  line-height: 1;
}

/* SEGURO / COMBATE — sprites AO; safe=wood/gold, combate=danger */
#btn-combat-mode.ao-btn,
.sidebar-btn-combat.ao-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(100% - 12px);
  margin: 4px 6px;
  min-height: 32px;
  height: auto;
  padding: 8px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-shadow: 1px 1px 0 #000 !important;
  border-radius: 0 !important;
}

#btn-combat-mode.ao-btn:not(.combat-off),
.sidebar-btn-combat.ao-btn:not(.combat-off) {
  background-image: var(--ao-btn-danger-url) !important;
  background-color: #5a2018 !important;
  color: #ffe8e0 !important;
  border-top-color: #e09070 !important;
  border-left-color: #c06048 !important;
  border-right-color: #3a100c !important;
  border-bottom-color: #1a0806 !important;
}

#btn-combat-mode.ao-btn:not(.combat-off):hover,
.sidebar-btn-combat.ao-btn:not(.combat-off):hover {
  background-image: var(--ao-btn-danger-hover-url) !important;
  color: #fff8f0 !important;
  box-shadow: none !important;
}

#btn-combat-mode.ao-btn:not(.combat-off):active,
.sidebar-btn-combat.ao-btn:not(.combat-off):active {
  background-image: var(--ao-btn-danger-pressed-url) !important;
}

#btn-combat-mode.ao-btn.combat-off,
.sidebar-btn-combat.ao-btn.combat-off {
  background-image: var(--ao-btn-url) !important;
  background-color: #3d2a1c !important;
  color: var(--ao-gold-bright) !important;
  border-top-color: var(--ao-bevel-hi) !important;
  border-left-color: #b8944a !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: #1a1008 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.2),
    0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

#btn-combat-mode.ao-btn.combat-off:hover,
.sidebar-btn-combat.ao-btn.combat-off:hover {
  background-image: var(--ao-btn-hover-url) !important;
  color: #fff8e0 !important;
  box-shadow: none !important;
}

#btn-combat-mode.ao-btn.combat-off:active,
.sidebar-btn-combat.ao-btn.combat-off:active {
  background-image: var(--ao-btn-pressed-url) !important;
}

/* Chrome HUD — chat + sidebar: .ao-chrome (SIN 9-slice / cornisa Kenney) */
#screen-game .console-panel,
#screen-game .game-column-right,
#screen-game .console-panel.ao-chrome,
#screen-game .game-column-right.ao-chrome {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-font) !important;
  line-height: var(--ao-chrome-line) !important;
  color: var(--ao-cream) !important;
  background:
    linear-gradient(
      180deg,
      var(--ao-chrome-bg-hi) 0%,
      var(--ao-chrome-bg-mid) 52%,
      var(--ao-chrome-bg-lo) 100%
    ) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: var(--ao-chrome-edge-hi) !important;
  border-left-color: var(--ao-chrome-edge-mid) !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  border-image: none !important;
  image-rendering: auto;
  box-shadow:
    inset 1px 1px 0 var(--ao-chrome-inset-hi),
    inset -1px -1px 0 var(--ao-chrome-inset-lo),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.55) !important;
}

#screen-game .game-layout {
  border-radius: 0 !important;
  border-color: var(--ao-gold-dim) !important;
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(201, 162, 39, 0.1) !important;
}

#screen-game .console-panel {
  border-bottom-width: 2px !important;
  overflow: hidden !important;
}

#screen-game .game-column-right {
  border-left-width: 2px !important;
}

/* Skill tree — titlebar única + chips/badges + detail ao-btn */
.sst-overlay .sst-header.ao-modal-titlebar {
  justify-content: space-between !important;
  padding: 7px 12px !important;
  min-height: 34px;
}

.sst-overlay .sst-brand-mark {
  border-radius: 0 !important;
}

.sst-overlay .sst-chip,
.sst-overlay .sst-unlock-badge {
  border-radius: 0 !important;
}

.sst-overlay .sst-action.ao-btn {
  width: 100%;
  margin-top: 12px;
}

.sst-overlay .sst-detail-name {
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: var(--ao-gold-bright) !important;
  font-size: 15px !important;
}

.mobile-mode #game-menu-panel.ao-modal,
.mobile-mode #game-menu-panel .game-menu-item,
.mobile-mode .survivor-levelup-content.ao-modal .levelup-option,
.mobile-mode .sv-merch-window.ao-modal,
.mobile-mode .sv-smith-window.ao-modal,
.mobile-mode #options-modal .ao-modal {
  border-radius: 0 !important;
}

/* ========================================================================== */
/* Guía Survivor — contenido interno al lenguaje AO (sin pergamino/Cormorant)   */
/* ========================================================================== */

#survivor-guide-modal .guide-intro,
#survivor-guide-modal .guide-mechanic,
#survivor-guide-modal .class-card,
#survivor-guide-modal .weapon-card,
#survivor-guide-modal .ability-card,
#survivor-guide-modal .tip-card,
#survivor-guide-modal .control-item,
#survivor-guide-modal .attack-slot {
  border-radius: 0 !important;
  background: linear-gradient(180deg, #14100c 0%, #0a0806 100%) !important;
  border-top: 1px solid #1a120c !important;
  border-left: 1px solid #1a120c !important;
  border-right: 1px solid #555 !important;
  border-bottom: 1px solid #666 !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.5),
    inset -1px -1px 0 rgba(212, 184, 106, 0.05) !important;
  font-family: var(--ao-font) !important;
  font-style: normal !important;
}

#survivor-guide-modal .class-ability {
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-left: 2px solid var(--ao-gold-dim) !important;
  box-shadow: none !important;
}

#survivor-guide-modal .class-ability strong {
  color: var(--ao-gold) !important;
}

#survivor-guide-modal .guide-intro {
  border-left: 3px solid var(--ao-gold) !important;
}

#survivor-guide-modal .guide-intro h3,
#survivor-guide-modal .guide-mechanic h4,
#survivor-guide-modal .class-category h4,
#survivor-guide-modal .ability-category h4,
#survivor-guide-modal .class-name,
#survivor-guide-modal .weapon-card h4,
#survivor-guide-modal .attack-info h4 {
  font-family: var(--ao-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000 !important;
  font-style: normal !important;
}

#survivor-guide-modal .guide-content,
#survivor-guide-modal .guide-content p,
#survivor-guide-modal .guide-content li,
#survivor-guide-modal .class-ability p,
#survivor-guide-modal .weapon-card > p,
#survivor-guide-modal .attack-info p {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  color: var(--ao-cream-dim) !important;
}

#survivor-guide-modal .guide-warning,
#survivor-guide-modal .guide-note {
  border-radius: 0 !important;
  background: #1a1008 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  color: var(--ao-cream) !important;
  font-style: normal !important;
}

#survivor-guide-modal .guide-nav-btn .nav-text {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

#survivor-guide-modal .attack-number {
  border-radius: 0 !important;
  background: #000 !important;
  border: 2px solid var(--ao-gold) !important;
  color: var(--ao-gold-bright) !important;
  font-family: var(--ao-font) !important;
}

#survivor-guide-modal .control-item kbd {
  border-radius: 0 !important;
  background: #2a1c12 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  color: var(--ao-gold-bright) !important;
  font-family: var(--ao-font) !important;
  font-style: normal !important;
}

/* ========================================================================== */
/* P1 — HUD / cooldowns / avatares / titlebars unificadas                        */
/* Nodos .sst-node del skill tree se mantienen circulares a propósito.           */
/* ========================================================================== */

#screen-game .survivor-stats-row,
#screen-game .survivor-stats,
#screen-game .run-hud-core,
#screen-game .run-hud-boss,
#screen-game .surv-atk-icon-wrap,
#screen-game .cooldown-sweep,
#screen-game .spell-slot-cooldown,
#screen-game .menu-notif-dot {
  border-radius: 0 !important;
}

#screen-game .cooldown-sweep {
  /* Slot cuadrado AO: conic sin máscara circular */
  border-radius: 0 !important;
}

.ao-modal .party-empty-icon,
.ao-modal .party-member-avatar,
.ao-modal .party-nearby-avatar,
.ao-modal .friends-avatar,
.ao-modal .ach-card-icon {
  border-radius: 0 !important;
}

/* Skill tree chrome (no nodos del grafo) */
.sst-overlay .sst-legend-item,
.sst-overlay .sst-legend-item i,
.sst-overlay .sst-detail-icon,
.sst-overlay .sst-pips i,
.sst-overlay .sst-unlock-badge {
  border-radius: 0 !important;
}

/* Titlebars custom = misma placa AO */
.ao-modal .trade-titlebar.ao-modal-titlebar,
.ao-modal .world-map-titlebar.ao-modal-titlebar,
.ao-modal .sv-merch-titlebar.ao-modal-titlebar,
.ao-modal .sv-smith-titlebar.ao-modal-titlebar,
.ao-modal .gameover-titlebar.ao-modal-titlebar,
.ao-modal .survivor-pause-header.ao-modal-titlebar {
  justify-content: center;
  min-height: 34px;
  padding: 7px 36px 7px 12px !important;
}

.survivor-levelup-content.ao-modal .survivor-levelup-header.ao-modal-titlebar {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: auto;
  padding: 10px 14px 8px !important;
}

.survivor-levelup-content.ao-modal .survivor-levelup-header .levelup-subtitle {
  margin: 0;
  text-align: center;
  font-size: 12px !important;
  color: var(--ao-cream-dim) !important;
}

.survivor-pause-content.ao-modal .survivor-pause-actions.ao-modal-footer {
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  margin-top: 0;
  border-top: 1px solid var(--ao-gold-dim);
}

.survivor-pause-content.ao-modal .survivor-pause-actions.ao-modal-footer .ao-btn {
  width: 100%;
}

.survivor-gameover-content.ao-modal .survivor-gameover-actions.ao-modal-footer {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  border-top: 1px solid var(--ao-gold-dim);
}

.survivor-gameover-content.ao-modal .survivor-gameover-actions.ao-modal-footer .ao-btn {
  width: auto;
  min-width: 148px;
}

/* ========================================================================== */
/* P2 — interiores bisel, tipografía HUD, ornate opt-in, chrome mapa           */
/* ========================================================================== */

/* Ornate opt-in (frame 025) — paneles especiales */
.ao-modal-ornate,
.ao-modal.ao-modal-ornate {
  border-image-source: var(--ao-frame-ornate-url) !important;
}

/* Tipografía juego: sin Segoe; labels HUD en MAYÚSCULAS */
#screen-game,
#screen-game .sidebar,
#screen-game .survivor-run-hud,
#screen-game .survivor-stats,
#screen-game .survivor-stats-row,
#screen-game .console-panel,
#screen-game .game-column-right,
.ao-modal,
.ao-framed,
.ao-chrome,
.ao-panel-plain,
.context-menu,
.context-submenu,
.sst-overlay,
.chest-modal,
.survivor-duel-invite,
.sv-duel-modal,
.duel-modal,
.p2p-trade-overlay {
  font-family: var(--ao-font) !important;
}

#screen-game .run-hud-label,
#screen-game .ssr-label,
#screen-game .ssr-essence-label,
#screen-game .stat-label,
#screen-game .sidebar-tab,
#screen-game .sidebar-btn-footer,
#screen-game .pause-label,
.ao-modal .pause-label,
.ao-modal .gameover-label,
.ao-modal .levelup-eyebrow,
.ao-modal .pause-eyebrow {
  font-family: var(--ao-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
}

#screen-game .ssr-value,
#screen-game .run-hud-metric strong,
#screen-game .stat-value {
  font-family: var(--ao-font) !important;
}


/* P3 — run-stats / guide residuales sin radius web */
.survivor-run-stats-window,
.survivor-run-stats-overlay .survivor-run-stats-window,
.survivor-run-stats-overlay .run-stats-section,
.survivor-run-stats-overlay .survivor-run-stats-close {
  border-radius: 0 !important;
}
.survivor-run-stats-overlay .survivor-run-stats-header h2,
.survivor-run-stats-overlay .ao-modal-title {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;
}
.survivor-run-stats-overlay .run-stats-section h3 {
  font-family: var(--ao-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: var(--ao-gold-bright) !important;
}

/* ========================================================================== */
/* f12 — Chrome híbrido: minimap / buffs / run HUD + tipografía unificada     */
/* ========================================================================== */

/* Minimap wrapper — chrome flush dentro del sidebar (sin doble marco) */
#screen-game .minimap-section,
#screen-game .minimap-section.ao-panel-plain,
#screen-game .ao-chrome > .ao-panel-plain.minimap-section {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  background:
    linear-gradient(
      180deg,
      var(--ao-chrome-bg-hi) 0%,
      var(--ao-chrome-bg-mid) 60%,
      var(--ao-chrome-bg-lo) 100%
    ) !important;
  /* Solo divisor inferior: el padre .ao-chrome ya aporta el bisel externo */
  border-width: 0 0 2px 0 !important;
  border-style: solid !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  border-image: none !important;
  box-shadow:
    inset 0 1px 0 var(--ao-chrome-inset-hi),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45) !important;
}

#screen-game .minimap-map-name,
#screen-game .zone-map-label,
#screen-game #hud-map-name {
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 5px 6px 4px !important;
  border-bottom: 1px solid rgba(166, 124, 45, 0.55) !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

#screen-game .minimap-panel {
  padding: 5px 6px 6px !important;
}

#screen-game #minimap-canvas {
  border-radius: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: var(--ao-chrome-edge-mid) !important;
  border-left-color: var(--ao-gold-dim) !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  border-image: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.55) !important;
}

#screen-game .minimap-coords {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  font-size: 9px !important;
  letter-spacing: 0.04em;
  color: var(--ao-cream-dim) !important;
  background: rgba(0, 0, 0, 0.78) !important;
  border: 1px solid rgba(166, 124, 45, 0.45);
  padding: 1px 5px !important;
}

/* Buffs — slots chrome cuadrados (sin glow Material / radius) */
#screen-game .buffs-container {
  border-radius: 0 !important;
  font-family: var(--ao-font) !important;
  gap: 5px !important;
  padding: 5px 8px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  background:
    linear-gradient(180deg, #1e1510 0%, #0e0a08 100%) !important;
  border-bottom: 1px solid rgba(166, 124, 45, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(232, 200, 90, 0.08) !important;
}

#screen-game .buff-icon {
  border-radius: 0 !important;
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  background: linear-gradient(180deg, #2a1c12 0%, #120e0a 100%) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: #6a5a40 !important;
  border-left-color: #4a3a28 !important;
  border-right-color: #1a1008 !important;
  border-bottom-color: #0a0806 !important;
  border-image: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
  transition: border-color 0.12s ease, box-shadow 0.12s ease !important;
  transform: none !important;
}

#screen-game .buff-icon:hover {
  transform: none !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.28),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 162, 39, 0.25) !important;
  z-index: 10;
}

#screen-game .buff-icon.buff-buff {
  border-top-color: #7aa8d8 !important;
  border-left-color: #4a78a8 !important;
  border-right-color: #1a3048 !important;
  border-bottom-color: #0c1824 !important;
  box-shadow:
    inset 1px 1px 0 rgba(120, 180, 230, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
}

#screen-game .buff-icon.buff-debuff {
  border-top-color: #d87868 !important;
  border-left-color: #a84838 !important;
  border-right-color: #481810 !important;
  border-bottom-color: #200c08 !important;
  box-shadow:
    inset 1px 1px 0 rgba(230, 120, 100, 0.16),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
}

/* Run HUD Survivor — chrome utilitario (semi-permanente en run) */
#screen-game .run-hud-core,
#screen-game .run-hud-core.ao-panel-plain {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: var(--ao-font) !important;
  background:
    linear-gradient(
      180deg,
      var(--ao-chrome-bg-hi) 0%,
      var(--ao-chrome-bg-mid) 55%,
      var(--ao-chrome-bg-lo) 100%
    ) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: var(--ao-chrome-edge-hi) !important;
  border-left-color: var(--ao-chrome-edge-mid) !important;
  border-right-color: var(--ao-bevel-lo) !important;
  border-bottom-color: var(--ao-chrome-edge-lo) !important;
  border-image: none !important;
  box-shadow:
    inset 1px 1px 0 var(--ao-chrome-inset-hi),
    inset -1px -1px 0 var(--ao-chrome-inset-lo),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.55) !important;
}

#screen-game .run-hud-metric {
  padding: 5px 8px 4px !important;
  border-right: 1px solid rgba(166, 124, 45, 0.4) !important;
}

#screen-game .run-hud-label {
  font-size: 8px !important;
  letter-spacing: 0.12em !important;
  color: var(--ao-cream-dim) !important;
}

#screen-game .run-hud-metric strong {
  margin-top: 2px !important;
  font-size: 14px !important;
  color: var(--ao-cream) !important;
  text-shadow: 1px 1px 0 #000;
}

#screen-game .run-hud-wave strong {
  color: var(--ao-gold-bright) !important;
}

#screen-game .run-hud-stats-btn {
  border-radius: 0 !important;
  border-left: 1px solid var(--ao-gold-dim) !important;
  background: linear-gradient(180deg, #4a3828 0%, #2a1c12 100%) !important;
  color: var(--ao-gold-bright) !important;
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-label) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#screen-game .run-hud-stats-btn:hover,
#screen-game .run-hud-stats-btn:focus-visible {
  background: linear-gradient(180deg, #5a4630 0%, #342416 100%) !important;
  color: #fff1ca !important;
  box-shadow: inset 1px 1px 0 rgba(232, 200, 90, 0.22) !important;
}

#screen-game .run-hud-boss,
#screen-game .run-hud-boss.ao-panel-plain {
  border-radius: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-top-color: #c07058 !important;
  border-left-color: #8a4030 !important;
  border-right-color: #3a1810 !important;
  border-bottom-color: #140806 !important;
  border-image: none !important;
  background: linear-gradient(180deg, #2a1410 0%, #100806 100%) !important;
  box-shadow:
    inset 1px 1px 0 rgba(220, 120, 90, 0.18),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
  font-family: var(--ao-font) !important;
}

/* Tipografía / espaciado unificado: sidebar + chat + tooltips */
#screen-game .sidebar-char-info {
  padding: var(--ao-chrome-pad-y) var(--ao-chrome-pad-x) !important;
  font-family: var(--ao-font) !important;
  border-bottom: 1px solid rgba(166, 124, 45, 0.5) !important;
  background: linear-gradient(180deg, #221810 0%, #14100b 100%) !important;
}

#screen-game .char-name {
  font-family: var(--ao-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ao-gold-bright) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

#screen-game .char-meta,
#screen-game #hud-char-meta-text {
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-label) !important;
  letter-spacing: 0.06em;
  color: var(--ao-cream-dim) !important;
}

#screen-game .sidebar-tabs {
  gap: 0 !important;
  border-bottom: 1px solid rgba(166, 124, 45, 0.45) !important;
}

#screen-game .sidebar-tab {
  font-size: var(--ao-chrome-label) !important;
  letter-spacing: 0.1em !important;
  padding: 6px 4px !important;
}

#screen-game .sidebar-stats,
#screen-game .sidebar-status-zone,
#screen-game .sidebar-resources-row {
  font-family: var(--ao-font) !important;
  font-size: var(--ao-chrome-font) !important;
}

#screen-game .sidebar-resources-row {
  flex-shrink: 0 !important;
}

#screen-game .sidebar-essence-compact,
#screen-game .sidebar-gold-compact {
  font-family: var(--ao-font) !important;
  font-variant-numeric: tabular-nums;
}

#screen-game .sidebar-essence-compact {
  color: #e8c84a !important;
}

/* Tabs: altura estable (basis 0) — sin salto de vitals/oro/SEGURO */
#screen-game .sidebar-tab-contents {
  flex: 1 1 0 !important;
  min-height: 246px !important;
}

#screen-game .survivor-stats-row {
  display: none !important;
}

/* Status zone: pre-f16 40px → micro 36px (−4px), pad 4px */
#screen-game .sidebar-status-zone {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 4px 8px !important;
}

#screen-game .stat-label,
#screen-game .ssr-label,
#screen-game .ssr-essence-label {
  font-size: var(--ao-chrome-label) !important;
  letter-spacing: 0.1em !important;
}

/* Vitals AO — chrome utilitario (track hundido, fill con highlight, sin 9-slice) */
#screen-game .stat-row {
  height: 20px !important;
  gap: 6px !important;
}

#screen-game .stat-label {
  width: 35px !important;
  font-family: var(--ao-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--ao-gold) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

#screen-game .stat-bar-track {
  height: 16px !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, #030201 0%, #0c0906 50%, #18120c 100%) !important;
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-right: 1px solid #8a6a3a !important;
  border-bottom: 1px solid #b8944a !important;
  border-image: none !important;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.92),
    inset -1px -1px 0 rgba(232, 200, 90, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
}

#screen-game .stat-bar-fill {
  position: relative !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  image-rendering: pixelated;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

#screen-game .stat-bar-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
}

#screen-game .stat-hp .stat-bar-fill {
  background-color: #b02820 !important;
  background-image: url("../assets/ui/ao-hud/fill-hp.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}
#screen-game .stat-mana .stat-bar-fill {
  background-color: #2768a8 !important;
  background-image: url("../assets/ui/ao-hud/fill-mana.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}
#screen-game .stat-sta .stat-bar-fill {
  background-color: #c9a227 !important;
  background-image: url("../assets/ui/ao-hud/fill-sta.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}
#screen-game .stat-hunger .stat-bar-fill {
  background-color: #2a8a40 !important;
  background-image: url("../assets/ui/ao-hud/fill-ham.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}
#screen-game .stat-thirst .stat-bar-fill {
  background-color: #208888 !important;
  background-image: url("../assets/ui/ao-hud/fill-sed.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
}

/* EXP sidebar — pre-f16 16px → micro 14px (−2px); vitals intactos */
#screen-game .exp-bar-track {
  height: 14px !important;
  max-width: 140px;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, #030201 0%, #0c0906 50%, #18120c 100%) !important;
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-right: 1px solid #8a6a3a !important;
  border-bottom: 1px solid #b8944a !important;
  border-image: none !important;
  box-shadow:
    inset 2px 2px 0 rgba(0, 0, 0, 0.92),
    inset -1px -1px 0 rgba(232, 200, 90, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
}

#screen-game .exp-bar-fill {
  position: relative !important;
  height: 100%;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: #c9a227 !important;
  background-image: url("../assets/ui/ao-hud/fill-exp.png") !important;
  background-repeat: repeat-x !important;
  background-position: center !important;
  background-size: auto 100% !important;
  image-rendering: pixelated;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
}

#screen-game .exp-bar-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.08) 65%,
    transparent 100%
  );
}

#screen-game .exp-label {
  font-family: var(--ao-font) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: var(--ao-gold) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

#screen-game .stat-text-overlay {
  font-family: var(--ao-font) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  color: #fff8e8 !important;
  text-shadow:
    0 0 1px #000,
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000 !important;
}

#screen-game .console-history {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 4px 4px 0 !important;
  padding: 5px 7px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050403 !important;
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #eee8d8 !important;
  box-shadow:
    inset 1px 1px 0 #000,
    inset -1px 0 0 rgba(184, 148, 74, 0.2) !important;
}

#screen-game .console-input-row {
  flex: 0 0 26px !important;
  height: 26px !important;
  margin: 0 4px 4px !important;
  padding: 3px 4px !important;
  gap: 3px !important;
  background: #050403 !important;
  border-top: 1px solid rgba(166, 124, 45, 0.35) !important;
  align-items: stretch !important;
  box-shadow:
    inset 1px 0 0 #000,
    inset -1px -1px 0 rgba(184, 148, 74, 0.2) !important;
}

#screen-game .console-input-row input,
#screen-game .console-chat-mode,
#screen-game .console-whisper-target {
  border-radius: 0 !important;
  font-size: 11px !important;
  border-color: #3a2a1a !important;
  background: #000 !important;
  color: var(--ao-cream) !important;
}

#screen-game .console-chat-mode {
  font-family: var(--ao-font) !important;
  color: var(--ao-gold-bright) !important;
  letter-spacing: 0.04em;
}

.item-tooltip.tooltip-detailed,
.item-tooltip.ao-tooltip-window,
.ability-tooltip.ao-tooltip-window,
.ability-tooltip {
  font-size: var(--ao-chrome-font) !important;
  line-height: var(--ao-chrome-line) !important;
  padding: 7px 10px !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.85) !important;
}

.item-tooltip .tooltip-name,
.ability-tooltip .ability-tooltip-name {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
}

.item-tooltip .tooltip-desc,
.ability-tooltip .ability-tooltip-desc {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* ========================================================================== */
/* HUD kit Winter + Kenney (CC0) + texturas AO 0.13 — assets/ui/ao-hud/        */
/* Paleta wiki AO: HP rojo, MANA azul, STA amarillo, HAM verde, SED cian       */
/* ========================================================================== */

#survivor-hud {
  display: none !important;
}

#screen-game .game-column-right.ao-chrome,
#screen-game .console-panel.ao-chrome {
  background-image:
    linear-gradient(180deg, rgba(46, 32, 22, 0.9) 0%, rgba(12, 9, 7, 0.94) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") !important;
  background-repeat: no-repeat, repeat !important;
  background-size: auto, 64px 64px !important;
  image-rendering: pixelated;
}

#screen-game .inventory-grid {
  background:
    url("../assets/ui/ao-hud/wood-tile.png") repeat,
    #0a0704 !important;
  image-rendering: pixelated;
  border: 1px solid #6a5228 !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 10px rgba(0, 0, 0, 0.7) !important;
  padding: 4px !important;
}

#screen-game .inventory-slot,
#screen-game .inventory-grid-slot {
  background-color: #000 !important;
  background-image: none !important;
  image-rendering: pixelated;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  padding: 2px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #555 !important;
  box-shadow: none !important;
  outline: none !important;
}

#screen-game .surv-atk-icon-wrap,
#screen-game .spell-info-icon-wrap {
  background-color: #000 !important;
  background-image: none !important;
  image-rendering: pixelated;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  padding: 2px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #a67c2d !important;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.65),
    inset -1px -1px 0 rgba(232, 200, 90, 0.12) !important;
}

#screen-game .inventory-slot canvas,
#screen-game .inventory-slot img,
#screen-game .inventory-grid-slot canvas,
#screen-game .inventory-grid-slot img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  display: block !important;
}

#screen-game .spell-info-sprite,
#screen-game .surv-atk-sprite {
  inset: 2px !important;
  overflow: hidden !important;
}

#screen-game .spell-info-sprite canvas,
#screen-game .surv-atk-sprite canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#screen-game .inventory-slot.selected,
#screen-game .inventory-slot.is-selected,
#screen-game .inventory-slot.inventory-grid-slot-selected,
#screen-game .inventory-grid-slot.selected,
#screen-game .inventory-grid-slot.is-selected {
  background-image: none !important;
  background-color: #1c1408 !important;
  border: 1px solid var(--ao-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 200, 90, 0.35) !important;
  outline: none !important;
}

/* Track continuo: bar-track.png mide 64px con tapas en los extremos.
   Con repeat-x se veían ~3 losetas (costuras a 64px y 128px) al vaciar la barra. */
#screen-game .stat-bar-track,
#screen-game .exp-bar-track {
  background-color: #030201 !important;
  background-image: url("../assets/ui/ao-hud/bar-track.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  image-rendering: pixelated;
}

#screen-game .stat-row:has(.stat-hp) .stat-label { color: #e05040 !important; }
#screen-game .stat-row:has(.stat-mana) .stat-label { color: #6ab0e0 !important; }
#screen-game .stat-row:has(.stat-sta) .stat-label { color: #e8d04a !important; }
#screen-game .stat-row:has(.stat-hunger) .stat-label { color: #48c060 !important; }
#screen-game .stat-row:has(.stat-thirst) .stat-label { color: #40c8c8 !important; }

#screen-game .sidebar-tab {
  background: linear-gradient(180deg, #2a1c12 0%, #16100a 100%) !important;
  color: #c8b896 !important;
  border: 1px solid #3a2a1a !important;
  border-bottom-color: #000 !important;
  text-shadow: 1px 1px 0 #000 !important;
  box-shadow: inset 1px 1px 0 rgba(232, 200, 90, 0.08) !important;
}

#screen-game .sidebar-tab.sidebar-tab-active {
  background: linear-gradient(180deg, #5a4028 0%, #3d2a1c 100%) !important;
  color: #fff8e0 !important;
  border-color: var(--ao-gold) !important;
  border-bottom-color: #3d2a1c !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 230, 160, 0.28),
    0 1px 0 #3d2a1c !important;
}

#screen-game #spells-list {
  background: #000 !important;
  color: #d4c4a8 !important;
  border: 1px solid #8a7352 !important;
  font-family: Tahoma, Verdana, sans-serif !important;
  font-size: 11px !important;
  accent-color: #c9a227;
  color-scheme: dark;
}

#screen-game #spells-list option {
  background-color: #000 !important;
  color: #d4c4a8 !important;
}

#screen-game #spells-list option:checked {
  background: #c9a227 linear-gradient(0deg, #c9a227 0%, #c9a227 100%) !important;
  color: #1a1008 !important;
}

#screen-game #btn-combat-mode .combat-icon {
  display: none !important;
}

#screen-game .sidebar-gold-compact,
#screen-game .sidebar-essence-compact {
  background:
    url("../assets/ui/ao-hud/panel-inset.png") center / 100% 100% no-repeat,
    #0a0704 !important;
  image-rendering: pixelated;
  border: 1px solid #6a5228 !important;
}

#screen-game .run-hud-core.ao-panel-plain,
#screen-game .run-hud-boss.ao-panel-plain,
#screen-game .run-hud-quests.ao-panel-plain {
  background-image:
    linear-gradient(180deg, rgba(42, 30, 20, 0.92) 0%, rgba(10, 8, 6, 0.94) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") !important;
  background-repeat: no-repeat, repeat !important;
  image-rendering: pixelated;
}

#screen-game .run-hud-stats-btn {
  background: linear-gradient(180deg, #5a4630 0%, #2a1c12 100%) !important;
  image-rendering: auto;
  color: var(--ao-gold-bright) !important;
  text-indent: 0;
  overflow: hidden;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  min-width: 0 !important;
  min-height: 22px !important;
  padding: 0 8px !important;
}

#screen-game .run-hud-stats-btn:hover,
#screen-game .run-hud-stats-btn:focus-visible {
  background: linear-gradient(180deg, #6a5438 0%, #342416 100%) !important;
  color: #fff1ca !important;
}

#screen-game .run-hud-stats-btn:active {
  background: linear-gradient(180deg, #3a2a18 0%, #1a120c 100%) !important;
}

#screen-game .run-hud-boss-fill {
  background-color: #a83d30 !important;
  background-image: url("../assets/ui/ao-hud/fill-hp.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  image-rendering: pixelated;
}

#screen-game .run-hud-quest-fill {
  background-image: url("../assets/ui/ao-hud/fill-exp.png") !important;
  background-repeat: repeat-x !important;
  background-size: auto 100% !important;
}

/* Desktop: una fila de 4 métricas en el hueco de nombre/raza/clase. */
body:not(.mobile-mode) #screen-game .survivor-run-hud:not([hidden]) {
  display: block !important;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  z-index: auto;
  pointer-events: auto;
}

body:not(.mobile-mode) #screen-game .run-hud-core {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-metric:last-child {
  border-right: 0 !important;
}

body:not(.mobile-mode).survivor-run-hud-visible #hud-char-name,
body:not(.mobile-mode).survivor-run-hud-visible #hud-char-meta {
  display: none !important;
}

body:not(.mobile-mode).survivor-run-hud-visible #screen-game .sidebar-char-info {
  padding-top: 6px !important;
  padding-bottom: 7px !important;
}

#viewport-run-hud-host {
  display: contents;
}

body:not(.mobile-mode) #sidebar-run-hud-host {
  flex-shrink: 0;
  width: 100%;
}

body:not(.mobile-mode) #sidebar-run-hud-host:not(:has(#survivor-run-hud:not([hidden]))) {
  display: none;
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-core,
body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-core.ao-panel-plain {
  border-width: 0 !important;
  border-style: none !important;
  background-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-metric {
  padding: 2px 2px 1px !important;
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-label {
  font-size: 7px !important;
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-metric strong {
  font-size: 11px !important;
  margin-top: 1px !important;
}

#screen-game .hud-run-stats-btn {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  border-radius: 3px !important;
  background-image: none !important;
  flex: 0 0 16px;
}

#run-hud-quests {
  display: none !important;
}

#screen-game .game-viewport > .run-hud-boss,
#screen-game .game-viewport > .run-hud-boss.ao-panel-plain {
  position: absolute;
  left: 50%;
  bottom: 8px;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  width: min(220px, calc(100% - 32px));
  margin: 0;
  z-index: 42;
  pointer-events: none;
  padding: 3px 8px 4px !important;
  box-sizing: border-box;
  border-width: 1px !important;
  border-style: solid !important;
  border-top-color: #c07058 !important;
  border-left-color: #8a4030 !important;
  border-right-color: #3a1810 !important;
  border-bottom-color: #140806 !important;
  background: linear-gradient(180deg, rgba(42, 20, 16, 0.92) 0%, rgba(16, 8, 6, 0.94) 100%) !important;
  background-image: none !important;
  box-shadow:
    inset 1px 1px 0 rgba(220, 120, 90, 0.12),
    inset -1px -1px 0 rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

#screen-game .game-viewport > .run-hud-boss .run-hud-boss-copy {
  font-size: 8px;
  margin-bottom: 2px;
  gap: 8px;
}

#screen-game .game-viewport > .run-hud-boss .run-hud-boss-track {
  height: 4px;
  overflow: hidden;
}

.mobile-stat-bar {
  border-radius: 0 !important;
  background: #030201 !important;
  border: 1px solid #8a6a3a !important;
  border-top-color: #000 !important;
  border-left-color: #000 !important;
  image-rendering: pixelated;
}

.mobile-stat-fill.hp {
  background: url("../assets/ui/ao-hud/fill-hp.png") repeat-x center / auto 100%, #b02820 !important;
}
.mobile-stat-fill.mana {
  background: url("../assets/ui/ao-hud/fill-mana.png") repeat-x center / auto 100%, #2768a8 !important;
}
.mobile-stat-fill.sta {
  background: url("../assets/ui/ao-hud/fill-sta.png") repeat-x center / auto 100%, #c9a227 !important;
}
.mobile-stat-fill.ham {
  background: url("../assets/ui/ao-hud/fill-ham.png") repeat-x center / auto 100%, #2a8a40 !important;
}
.mobile-stat-fill.sed {
  background: url("../assets/ui/ao-hud/fill-sed.png") repeat-x center / auto 100%, #208888 !important;
}

.exp-tooltip {
  border-radius: 0 !important;
}

/* ========================================================================== */
/* FASE modales + móvil Winter — menú, pausa, level-up, ataques, joystick      */
/* ========================================================================== */

#game-menu-panel.ao-modal,
.survivor-pause-content.ao-modal,
.survivor-levelup-content.ao-modal,
.survivor-gameover-content.ao-modal {
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, rgba(107, 83, 64, 0.82) 0%, rgba(26, 16, 10, 0.9) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") !important;
  background-repeat: repeat, no-repeat, repeat !important;
  background-size: auto, auto, 64px 64px !important;
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn,
.survivor-pause-content.ao-modal .pause-btn.ao-btn:not(.ao-btn-primary):not(.ao-btn-danger),
.survivor-gameover-content.ao-modal .ao-btn:not(.ao-btn-primary):not(.ao-btn-danger) {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn:hover,
#game-menu-panel.ao-modal .game-menu-item.ao-btn:focus-visible,
.survivor-pause-content.ao-modal .pause-btn.ao-btn:not(.ao-btn-primary):not(.ao-btn-danger):hover,
.survivor-pause-content.ao-modal .pause-btn.ao-btn:not(.ao-btn-primary):not(.ao-btn-danger):focus-visible {
  filter: brightness(1.12) saturate(1.05);
}

#game-menu-panel.ao-modal .game-menu-item.ao-btn:active,
.survivor-pause-content.ao-modal .pause-btn.ao-btn:not(.ao-btn-primary):not(.ao-btn-danger):active {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown-pressed.png"),
    var(--ao-btn-pressed-url) !important;
}

.survivor-pause-content.ao-modal .survivor-pause-info {
  background:
    url("../assets/ui/ao-hud/panel-inset.png") center / 100% 100% no-repeat,
    rgba(0, 0, 0, 0.55) !important;
  image-rendering: pixelated;
}

.survivor-pause-content.ao-modal .pause-stat {
  background:
    url("../assets/ui/ao-hud/panel-inset.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, #1a1410 0%, #0a0806 100%) !important;
  image-rendering: pixelated;
}

.survivor-pause-content.ao-modal kbd,
.survivor-levelup-content.ao-modal kbd,
.survivor-gameover-content.ao-modal kbd {
  border-radius: 0 !important;
  background: #140e08 !important;
  border: 1px solid var(--ao-gold) !important;
  border-top-color: var(--ao-gold-bright) !important;
  border-left-color: var(--ao-gold) !important;
  border-right-color: #3a2808 !important;
  border-bottom-color: #1a1008 !important;
  color: var(--ao-cream) !important;
  font-family: var(--ao-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  box-shadow: inset 1px 1px 0 rgba(232, 200, 90, 0.18) !important;
}

.survivor-levelup-content.ao-modal .survivor-levelup-options {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.72)),
    url("../assets/ui/ao-hud/wood-tile.png") repeat !important;
  image-rendering: pixelated;
  border-top: 1px solid #000 !important;
  border-bottom: 1px solid var(--ao-gold-dim) !important;
}

.survivor-levelup-content.ao-modal .levelup-icon,
.survivor-levelup-content.ao-modal .levelup-icon.ao-grid-cell {
  background-color: #000 !important;
  background-image: url("../assets/ui/ao-hud/winter/14.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border-width: 0 !important;
  box-sizing: border-box !important;
  padding: 8px !important;
}

.survivor-levelup-content.ao-modal .levelup-icon .sv-icon,
.survivor-levelup-content.ao-modal .levelup-icon canvas {
  width: 40px !important;
  height: 40px !important;
}

.mobile-mode .mobile-action-btn {
  border-radius: 0 !important;
  background-color: #0a0704 !important;
  background-image: url("../assets/ui/ao-hud/winter/14.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
}

.mobile-mode .mobile-action-btn:active {
  filter: brightness(0.82);
  transform: none;
}

.mobile-mode .action-btn-primary {
  background-image:
    url("../assets/ui/ao-hud/winter/14.png") !important;
  box-shadow:
    0 0 0 1px var(--ao-gold),
    0 3px 0 rgba(0, 0, 0, 0.6) !important;
}

.mobile-mode .action-btn-primary .btn-icon {
  width: 28px;
  height: 28px;
  background: url("../assets/ui/ao-hud/winter/223.png") center / contain no-repeat;
  image-rendering: pixelated;
  mix-blend-mode: lighten;
}

.mobile-mode .action-btn-primary .btn-icon > *:not(.sv-icon-fallback-text) {
  opacity: 0;
}

.mobile-survivor-attack-slots {
  background:
    linear-gradient(180deg, rgba(42, 30, 20, 0.92) 0%, rgba(10, 8, 6, 0.94) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") repeat !important;
  image-rendering: pixelated;
  border: 2px solid #a67c2d !important;
  border-top-color: #d8bc6e !important;
  border-left-color: #b8944a !important;
  border-right-color: #2a1a0c !important;
  border-bottom-color: #140e08 !important;
  border-radius: 0 !important;
  box-shadow:
    inset 1px 1px 0 rgba(232, 200, 90, 0.22),
    inset -1px -1px 0 rgba(0, 0, 0, 0.55) !important;
}

.mobile-survivor-attack-slots .surv-atk-icon-wrap {
  background-color: #000 !important;
  background-image: url("../assets/ui/ao-hud/winter/14.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  padding: 3px !important;
  overflow: hidden;
}

.mobile-mode .joystick-base {
  border-radius: 50% !important;
  background: radial-gradient(circle, #24180f 0%, #0c0907 72%) !important;
  border: 3px solid #c9a227 !important;
  box-shadow:
    inset 2px 2px 0 #000,
    inset -1px -1px 0 #8a6a3a,
    0 4px 0 rgba(0, 0, 0, 0.45) !important;
}

.mobile-mode .joystick-base::before {
  border-bottom-color: #c9a227 !important;
}

.mobile-mode .joystick-knob {
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 28%, #e8c85a, #8a5a2b 58%, #3a2410 100%) !important;
  border: 2px solid #e8c85a !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 240, 180, 0.4),
    0 2px 0 #000 !important;
}

.mobile-mode .joystick-knob.active {
  box-shadow:
    inset 1px 1px 0 rgba(255, 240, 180, 0.45),
    0 1px 0 #000,
    0 0 10px rgba(232, 200, 90, 0.35) !important;
}

/* ========================================================================== */
/* FASE game over / opciones / árbol — misma madera y ranuras Winter           */
/* ========================================================================== */

#options-modal .modal-window.ao-modal,
#options-modal .modal-options-expanded.ao-modal,
.sst-overlay .sst-frame.ao-modal,
.skills-modal-overlay .skills-modal-container.ao-modal {
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, rgba(107, 83, 64, 0.82) 0%, rgba(26, 16, 10, 0.9) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") !important;
  background-repeat: repeat, no-repeat, repeat !important;
  background-size: auto, auto, 64px 64px !important;
}

.survivor-gameover-content.ao-modal .gameover-stat,
.survivor-gameover-content.ao-modal .gameover-city-level,
.survivor-gameover-content.ao-modal .ach-card,
.survivor-gameover-content.ao-modal .ach-row {
  background-image:
    url("../assets/ui/ao-hud/panel-inset.png"),
    linear-gradient(180deg, #1a1410 0%, #0a0806 100%) !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.survivor-gameover-content.ao-modal .ach-card-icon,
.survivor-gameover-content.ao-modal .ach-row-icon {
  background-color: #000 !important;
  background-image: url("../assets/ui/ao-hud/winter/14.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border-width: 0 !important;
  box-sizing: border-box !important;
  padding: 5px !important;
}

.survivor-gameover-content.ao-modal .gameover-lede,
.survivor-gameover-content.ao-modal .gameover-hint {
  color: var(--ao-cream-dim) !important;
  font-family: var(--ao-font) !important;
  font-style: normal !important;
}

.survivor-gameover-content.ao-modal .gameover-section-title {
  color: var(--ao-gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  text-shadow: 1px 1px 0 #000;
}

.survivor-gameover-content.ao-modal .gameover-detail-toggle {
  font-family: var(--ao-font) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: var(--ao-gold) !important;
  background: url("../assets/ui/ao-hud/kenney/btn-long-brown.png") center / 100% 100% no-repeat,
    #2a1c12 !important;
  image-rendering: pixelated;
  border: 1px solid var(--ao-gold-dim) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
}

.survivor-gameover-content.ao-modal .ao-btn:not(.ao-btn-primary):not(.ao-btn-danger) {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

#options-modal .modal-content.ao-modal-body {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.58)),
    url("../assets/ui/ao-hud/wood-tile.png") repeat !important;
  image-rendering: pixelated;
}

#options-modal .options-tab.ao-tab,
#options-modal .options-tab {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

#options-modal .options-tab.options-tab-active {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown-pressed.png"),
    var(--ao-btn-pressed-url) !important;
  color: #fff8e0 !important;
}

#options-modal .options-row {
  background: rgba(0, 0, 0, 0.45) !important;
  border-top: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-right: 1px solid #6a5228 !important;
  border-bottom: 1px solid #8a6a3a !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.55) !important;
}

#options-modal .options-range::-webkit-slider-runnable-track,
#options-modal .options-row input[type="range"]::-webkit-slider-runnable-track {
  background: url("../assets/ui/ao-hud/bar-track.png") no-repeat center / 100% 100%,
    linear-gradient(180deg, #0a0806 0%, #1a120c 100%) !important;
  image-rendering: pixelated;
}

#options-modal .options-keys-list::-webkit-scrollbar-track,
#options-modal .options-keys-list::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

#options-modal .options-keys-row {
  background: #0a0704 !important;
  border: 1px solid #6a5228 !important;
  border-radius: 0 !important;
  box-shadow: inset 1px 1px 0 #000 !important;
}

#options-modal .options-keys-key {
  border-radius: 0 !important;
  background: #140e08 !important;
  border: 1px solid var(--ao-gold) !important;
  color: var(--ao-cream) !important;
  font-family: var(--ao-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
}

#options-modal .options-keys-category {
  color: var(--ao-gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em;
  font-family: var(--ao-font) !important;
  border-bottom: 1px solid var(--ao-gold-dim) !important;
}

#options-modal .modal-btn.ao-btn:not(.ao-btn-primary):not(.ao-btn-danger) {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

.sst-overlay .sst-subtitle {
  font-family: var(--ao-font) !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em;
  color: var(--ao-cream-dim) !important;
  font-size: 10px !important;
}

.sst-overlay .sst-canvas-wrap,
.sst-overlay .sst-detail {
  background:
    linear-gradient(180deg, rgba(24, 20, 15, 0.92) 0%, rgba(12, 10, 8, 0.96) 100%),
    url("../assets/ui/ao-hud/wood-tile.png") repeat !important;
  image-rendering: pixelated;
}

.sst-overlay .sst-chip.ao-badge,
.sst-overlay .sst-chip {
  background: #0a0704 !important;
  border: 1px solid var(--ao-gold-dim) !important;
  color: var(--ao-gold-bright) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  box-shadow: inset 1px 1px 0 #000 !important;
}

.sst-overlay .sst-detail-icon.ao-grid-cell,
.sst-overlay .sst-detail-icon {
  background-color: #000 !important;
  background-image: url("../assets/ui/ao-hud/winter/14.png") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border-width: 0 !important;
  box-sizing: border-box !important;
  padding: 8px !important;
}

.sst-overlay .sst-reset.ao-btn,
.sst-overlay .sst-action.ao-btn:not(.ao-btn-primary) {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

.sst-overlay .sst-detail-card,
.sst-overlay .sst-detail-slot {
  background-image:
    url("../assets/ui/ao-hud/panel-inset.png"),
    linear-gradient(180deg, #14100c 0%, #0a0806 100%) !important;
  background-size: 100% 100%, auto !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
}

.skills-modal-overlay .skills-list,
.skills-modal-overlay .skills-column {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url("../assets/ui/ao-hud/wood-tile.png") repeat !important;
  image-rendering: pixelated;
  border: 1px solid #6a5228 !important;
}

.skills-modal-overlay .skills-btn.ao-btn:not(.ao-btn-primary) {
  background-image:
    url("../assets/ui/ao-hud/kenney/btn-long-brown.png"),
    var(--ao-btn-url) !important;
  image-rendering: pixelated;
}

/* ========================================================================== */
/* Pulido pre-ZIP — consola un pozo, slots simples, barras, jefe, hechizos     */
/* ========================================================================== */

#screen-game .console-panel.ao-chrome {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#screen-game .console-history::-webkit-scrollbar {
  width: 7px;
}

#screen-game .console-history::-webkit-scrollbar-track {
  background: #050403;
  border-radius: 0;
}

#screen-game .console-history::-webkit-scrollbar-thumb {
  background: #6a5228;
  border-radius: 0;
  border: 1px solid #000;
}

#screen-game .console-input-row input,
#screen-game .console-chat-mode,
#screen-game .console-whisper-target {
  height: 100% !important;
  min-height: 0 !important;
}

#screen-game #console-send.ao-btn {
  height: 100% !important;
  min-height: 0 !important;
}

#screen-game .inventory-slot:hover:not(.is-selected):not(.selected):not(.inventory-grid-slot-selected),
#screen-game .inventory-grid-slot:hover:not(.is-selected):not(.selected):not(.inventory-grid-slot-selected) {
  border-color: #8a7352 !important;
  background-color: #0c0a08 !important;
  box-shadow: none !important;
}

#screen-game .inventory-slot.is-selected,
#screen-game .inventory-slot.selected,
#screen-game .inventory-slot.inventory-grid-slot-selected,
#screen-game .inventory-grid-slot.is-selected,
#screen-game .inventory-grid-slot.selected,
#screen-game .inventory-grid-slot.inventory-grid-slot-selected,
#screen-game .inventory-slot.is-selected:hover,
#screen-game .inventory-slot.selected:hover,
#screen-game .inventory-slot.inventory-grid-slot-selected:hover,
#screen-game .inventory-grid-slot.is-selected:hover,
#screen-game .inventory-grid-slot.selected:hover,
#screen-game .inventory-grid-slot.inventory-grid-slot-selected:hover {
  background-image: none !important;
  background-color: #1c1408 !important;
  border: 1px solid var(--ao-gold-bright) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 200, 90, 0.35) !important;
  outline: none !important;
}

#screen-game .inventory-slot.equipped::after,
#screen-game .inventory-grid-slot.equipped::after {
  content: "E";
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 3;
  color: #e8c85a;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}

#screen-game .inventory-slot .item-amount,
#screen-game .inventory-grid-slot .item-amount {
  position: absolute;
  right: 1px;
  bottom: 0;
  z-index: 3;
  color: #fff8e8;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
  pointer-events: none;
}

#screen-game .inventory-slot .item-bound-badge,
#screen-game .inventory-grid-slot .item-bound-badge {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 3;
  color: #c9a227;
  font-size: 8px;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

#screen-game .inventory-slot .item-icon-fallback,
#screen-game .inventory-grid-slot .item-icon-fallback {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

#screen-game #spells-list {
  -webkit-tap-highlight-color: transparent;
}

#screen-game #spells-list.spell-picking,
#screen-game #spells-list.spell-picking option {
  cursor: pointer;
}

#screen-game #spells-list option:hover,
#screen-game #spells-list option:focus,
#screen-game #spells-list option:active {
  background-color: #000 !important;
  background-image: none !important;
  color: #d4c4a8 !important;
}

#screen-game #spells-list option:checked,
#screen-game #spells-list option:checked:hover,
#screen-game #spells-list option:checked:focus,
#screen-game #spells-list option:checked:active {
  background-color: #c9a227 !important;
  background-image: linear-gradient(#c9a227, #c9a227) !important;
  color: #1a1008 !important;
}

#screen-game .game-viewport > .run-hud-boss .run-hud-boss-track {
  overflow: hidden !important;
  background: #180807 !important;
}

#screen-game .game-viewport > .survivor-run-notice {
  top: 8px;
}

body:not(.mobile-mode) #screen-game #sidebar-run-hud-host .run-hud-core {
  border-image: none !important;
}

#screen-game .sidebar-essence-compact,
#screen-game .sidebar-gold-compact {
  min-height: 22px;
  align-items: center;
}

#screen-game .sidebar-gold-compact:hover {
  box-shadow: inset 1px 1px 0 #000 !important;
}

.survivor-pause-content.ao-modal .survivor-pause-info[hidden],
body.mobile-mode .survivor-pause-info[hidden] {
  display: none !important;
}

/* ========================================================================== */
/* GAME OVER epitafio — sella el diseño (ao-ui carga último)                   */
/* ========================================================================== */
#survivor-gameover-screen.go-epitaph {
  background:
    radial-gradient(ellipse 80% 60% at 50% 38%, rgba(92, 16, 14, 0.42) 0%, rgba(0, 0, 0, 0) 58%),
    rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#survivor-gameover-screen.go-epitaph .go-sheet {
  background: none !important;
  border: none !important;
  border-image: none !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#survivor-gameover-screen.go-epitaph .go-sheet::-webkit-scrollbar,
#survivor-gameover-screen.go-epitaph .go-details-body::-webkit-scrollbar,
#survivor-gameover-screen.go-epitaph .gameover-breakdown-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#survivor-gameover-screen.go-epitaph .go-btn-primary {
  background: #e8c85a !important;
  background-image: none !important;
  color: #161008 !important;
  border: none !important;
  border-image: none !important;
}

#survivor-gameover-screen.go-epitaph .go-btn-ghost {
  background: transparent !important;
  background-image: none !important;
  color: #a89880 !important;
  border: none !important;
  border-image: none !important;
}

/* ========================================================================== */
/* Misiones — cascarón de tamaño fijo (.ao-quest-shell)                         */
/* Survivor / diario mundo / diálogo NPC: misma caja al cambiar tabs.           */
/* ========================================================================== */

.ao-modal.ao-quest-shell,
#quests-modal .ao-modal.ao-quest-shell,
.survivor-quest-panel.ao-quest-shell,
.survivor-meta-panel.ao-quest-shell,
#quest-npc-dialog .ao-quest-shell {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  width: min(900px, 96vw) !important;
  min-width: min(900px, 96vw) !important;
  max-width: min(900px, 96vw) !important;
  height: min(600px, 88vh) !important;
  min-height: min(600px, 88vh) !important;
  max-height: min(600px, 88vh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ao-quest-shell > .ao-modal-titlebar,
.ao-quest-shell > .modal-header {
  flex: 0 0 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  justify-content: space-between !important;
  padding: 0 8px 0 14px !important;
}

.ao-quest-shell > .ao-modal-titlebar .ao-modal-title,
.ao-quest-shell > .ao-modal-titlebar .survivor-meta-title,
.ao-quest-shell > .modal-header .ao-modal-title {
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}

.ao-quest-shell .ao-btn-close,
.ao-quest-shell .survivor-meta-close,
.ao-quest-shell .quest-dialog-close,
#quests-modal .ao-quest-shell .ao-btn-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 26px;
}

.ao-quest-chrome {
  box-sizing: border-box;
  flex: 0 0 128px;
  height: 128px;
  min-height: 128px;
  max-height: 128px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(46, 32, 22, 0.92) 0%, rgba(12, 9, 7, 0.96) 100%);
}

.ao-quest-speech,
.ao-quest-shell .survivor-quest-npc-speech,
body .ao-quest-shell .survivor-quest-npc-speech {
  box-sizing: border-box;
  flex: 0 0 54px;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--ao-cream);
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  border-left: 3px solid var(--ao-gold) !important;
  font: 13px/1.35 var(--ao-font) !important;
  quotes: none;
}

.ao-quest-speech.is-empty {
  color: var(--ao-cream-dim);
  border-left-color: #6a5228 !important;
  font-style: italic;
}

.ao-quest-stats {
  box-sizing: border-box;
  flex: 0 0 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(166, 124, 45, 0.35);
  border-bottom: 1px solid rgba(166, 124, 45, 0.35);
}

.ao-quest-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid rgba(166, 124, 45, 0.28);
}

.ao-quest-stat:last-child {
  border-right: 0;
}

.ao-quest-stat span {
  color: var(--ao-cream-dim);
  font: 700 8px/1 var(--ao-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ao-quest-stat strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ao-gold-bright);
  font: 700 12px/1.1 var(--ao-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ao-quest-tabs,
.ao-quest-shell .survivor-quest-tabs,
.ao-quest-shell .quests-filter-tabs {
  box-sizing: border-box;
  flex: 0 0 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  flex-wrap: nowrap !important;
}

.ao-quest-tabs .ao-tab,
.ao-quest-shell .survivor-quest-tab,
.ao-quest-shell .quests-filter-btn {
  min-width: 0 !important;
  width: 100%;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 6px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.ao-quest-split,
.ao-quest-shell .survivor-quest-layout,
.ao-quest-shell .quests-layout,
body #quests-modal .ao-quest-shell .quests-layout {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 0.92fr) minmax(280px, 1.28fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ao-quest-list-pane,
.ao-quest-list,
.ao-quest-shell .survivor-quest-list,
.ao-quest-shell .quests-sidebar,
body #quests-modal .ao-quest-shell .quests-sidebar,
body #quests-modal .ao-quest-shell .quests-list {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: hidden;
  padding: 8px !important;
  background: rgba(0, 0, 0, 0.28);
  border: 0;
  border-right: 1px solid rgba(166, 124, 45, 0.34);
}

.ao-quest-list,
.ao-quest-shell .survivor-quest-list,
.ao-quest-shell .ao-quest-list-pane .ao-quest-list,
body #quests-modal .ao-quest-shell .quests-list {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto !important;
  padding: 0 !important;
  border-right: 0;
  background: transparent;
}

.ao-quest-shell .ao-quest-list-pane {
  padding: 8px !important;
}

.ao-quest-shell aside.survivor-quest-list,
.ao-quest-shell aside.ao-quest-list {
  padding: 8px !important;
  overflow: auto !important;
  border-right: 1px solid rgba(166, 124, 45, 0.34) !important;
}

.ao-quest-empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 24px 16px;
  color: var(--ao-cream-dim);
  font: 13px/1.45 var(--ao-font);
  text-align: center;
}

.ao-quest-row-track {
  display: block;
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  background: #0c0a08;
  border: 1px solid #3d3224;
}

.ao-quest-row-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #85641d, #d3aa43);
}

.ao-quest-shell .survivor-quest-row.is-ready .ao-quest-row-track i {
  background: #c9a227;
}

.ao-quest-detail,
.ao-quest-shell .survivor-quest-detail,
.ao-quest-shell .quests-detail-pane,
body #quests-modal .ao-quest-shell .quests-detail-pane {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(42, 30, 20, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%);
  border: 0 !important;
}

.ao-quest-detail-scroll,
.ao-quest-shell .ao-quest-detail-scroll,
body #quests-modal .ao-quest-shell .quests-detail {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
}

.ao-quest-detail-foot,
.ao-quest-shell .ao-quest-detail-foot,
.ao-quest-shell .survivor-quest-actions,
body #quests-modal .ao-quest-shell .quests-detail-pane > .modal-footer,
body #quests-modal .ao-quest-shell .ao-quest-detail-foot {
  box-sizing: border-box;
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden;
  border-top: 1px solid rgba(166, 124, 45, 0.4) !important;
  background: rgba(8, 7, 5, 0.55) !important;
}

.ao-quest-detail-foot .survivor-quest-hint {
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: var(--ao-cream-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ao-quest-detail-foot .ao-btn,
.ao-quest-detail-foot .survivor-btn,
.ao-quest-shell .ao-quest-detail-foot .modal-btn {
  flex: 0 0 auto;
  min-width: 120px;
}

.ao-quest-shell .survivor-quest-row,
.ao-quest-shell .quests-list-item {
  flex: 0 0 auto;
  width: 100%;
}

.ao-quest-shell .survivor-quest-row.is-selected,
.ao-quest-shell .quests-list-item-selected,
.ao-quest-shell .quests-list-item.is-selected {
  border-color: var(--ao-gold);
  box-shadow: inset 3px 0 var(--ao-gold);
}

.ao-quest-list::-webkit-scrollbar,
.ao-quest-detail-scroll::-webkit-scrollbar,
.ao-quest-shell .survivor-quest-list::-webkit-scrollbar,
.ao-quest-shell .quests-list::-webkit-scrollbar,
.ao-quest-shell .quests-detail::-webkit-scrollbar {
  width: 8px;
}

.ao-quest-list::-webkit-scrollbar-track,
.ao-quest-detail-scroll::-webkit-scrollbar-track,
.ao-quest-shell .survivor-quest-list::-webkit-scrollbar-track,
.ao-quest-shell .quests-list::-webkit-scrollbar-track,
.ao-quest-shell .quests-detail::-webkit-scrollbar-track {
  background: #050403;
}

.ao-quest-list::-webkit-scrollbar-thumb,
.ao-quest-detail-scroll::-webkit-scrollbar-thumb,
.ao-quest-shell .survivor-quest-list::-webkit-scrollbar-thumb,
.ao-quest-shell .quests-list::-webkit-scrollbar-thumb,
.ao-quest-shell .quests-detail::-webkit-scrollbar-thumb {
  background: #6a5228;
  border: 1px solid #000;
}

#quest-npc-dialog.quest-npc-dialog {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  padding: 12px;
}

#quest-npc-dialog.quest-npc-dialog.hidden {
  display: none !important;
}

#quest-npc-dialog .quest-dialog-header p {
  display: none;
}

.quest-dialog-objectives,
.quest-dialog-rewards,
.ao-quest-shell .quests-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.quest-dialog-objective-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #c8baa0;
  font: 12px sans-serif;
}

.quest-dialog-objectives .is-done .quest-dialog-objective-line {
  color: #83c78c;
}

.quest-dialog-progress {
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  background: #0c0a08;
  border: 1px solid #3d3224;
}

.quest-dialog-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #85641d, #d3aa43);
}

.quest-dialog-objectives .is-done i,
.ao-quest-shell .is-done .quests-progress-track b {
  background: #5eaa68;
}

@media (max-width: 720px) {
  .ao-modal.ao-quest-shell,
  #quests-modal .ao-modal.ao-quest-shell,
  .survivor-quest-panel.ao-quest-shell,
  .survivor-meta-panel.ao-quest-shell,
  #quest-npc-dialog .ao-quest-shell {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-width: 0 !important;
    border-image: none !important;
  }

  .ao-quest-split,
  .ao-quest-shell .survivor-quest-layout,
  .ao-quest-shell .quests-layout,
  body #quests-modal .ao-quest-shell .quests-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 38% 62% !important;
  }

  .ao-quest-list-pane,
  .ao-quest-shell .survivor-quest-list,
  .ao-quest-shell .quests-sidebar,
  body #quests-modal .ao-quest-shell .quests-sidebar {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(166, 124, 45, 0.34);
  }

  #quest-npc-dialog.quest-npc-dialog {
    padding: 0;
  }
}

body #quests-modal .ao-quest-shell > .modal-header,
body #quests-modal .ao-quest-shell > .ao-modal-titlebar {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 8px 0 14px !important;
}

body #quests-modal .ao-quest-shell .quests-filter-tabs {
  margin: 0 !important;
  gap: 0 !important;
}

body #quests-modal .ao-quest-shell .quests-filter-btn {
  padding: 0 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
}

.ao-quest-shell .survivor-quest-state.is-ready {
  color: #fff0a8;
  border-color: #c9a227;
}

.ao-quest-shell .survivor-quest-state.is-active {
  color: #8edfff;
  border-color: #347891;
}

.ao-quest-shell .survivor-quest-state.is-done,
.ao-quest-shell .survivor-quest-state.is-completed {
  color: #9ee0a5;
  border-color: #4d7b52;
}

.ao-quest-shell .survivor-quest-state.is-available {
  color: #e3c984;
}

.ao-quest-shell .survivor-quest-state.is-locked {
  color: #9e8d75;
  border-color: #555;
}

.ao-quest-shell .survivor-quest-state.is-abandoned {
  color: #e0b2a2;
  border-color: #875044;
}

.ao-quest-shell .ao-quest-detail-scroll h4,
.ao-quest-shell .quests-detail h4 {
  margin: 14px 0 8px;
  color: #b99a61;
  font: 700 10px/1.2 var(--ao-font);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ao-quest-shell .quest-dialog-rewards li {
  color: #d8c69d;
  font: 12px/1.35 var(--ao-font);
}

.ao-quest-shell .survivor-quest-actions {
  margin-top: 0 !important;
  flex-wrap: nowrap !important;
}

/* ========================================================================== */
/* Menú AO inline — grilla 2×4 sobre HP/MANA/STA/HAM/SED + oro                */
/* ========================================================================== */

#sidebar-vitals-host.sidebar-vitals-host {
  position: relative !important;
  flex-shrink: 0;
  overflow: hidden !important;
  isolation: isolate;
  z-index: 8;
}

#sidebar-vitals-host.is-menu-open .sidebar-vitals-default {
  visibility: hidden !important;
  pointer-events: none !important;
}

#game-menu-panel.game-menu-panel,
#sidebar-vitals-host > #game-menu-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 4px !important;
  z-index: 6 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  border-top: 2px solid var(--ao-gold-dim, #a67c2d) !important;
  border-bottom: 2px solid var(--ao-gold-dim, #a67c2d) !important;
  border-image: none !important;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(201, 162, 39, 0.04) 0px,
      rgba(201, 162, 39, 0.04) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #2a2016 0%, #100c08 100%) !important;
  background-repeat: repeat, no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(232, 200, 90, 0.16) !important;
  overflow: hidden !important;
}

#game-menu-panel.game-menu-panel[hidden],
#sidebar-vitals-host > #game-menu-panel[hidden] {
  display: none !important;
}

#game-menu-panel .game-menu-item.ao-btn,
#game-menu-panel .game-menu-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 2px 3px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: hidden;
  color: var(--ao-cream, #f0e6d2) !important;
  text-shadow: 1px 1px 0 #000 !important;
}

#game-menu-panel .game-menu-item.ao-btn:hover,
#game-menu-panel .game-menu-item.ao-btn:focus-visible {
  color: #fff8e0 !important;
  filter: brightness(1.1) saturate(1.05);
}

#game-menu-panel .game-menu-item-icon {
  width: 16px;
  height: 16px;
  color: var(--ao-gold-bright, #e8c85a);
}

#game-menu-panel .game-menu-item-icon .sv-icon,
#game-menu-panel .game-menu-item-icon canvas,
#game-menu-panel .game-menu-item-icon svg,
#game-menu-panel .game-menu-item-icon img {
  width: 16px !important;
  height: 16px !important;
}

#game-menu-panel .game-menu-item-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}

#game-menu-panel .game-menu-item[data-menu-action="stats"] .game-menu-item-label {
  font-size: 7px !important;
  letter-spacing: 0 !important;
}

#game-menu-panel .game-menu-site-slot,
#game-menu-panel .ao-menu-site-item {
  display: none !important;
}

.mobile-mode #mobile-vitals-host {
  position: relative !important;
  overflow: hidden;
}

.mobile-mode #mobile-vitals-host.is-menu-open .mobile-stats {
  visibility: hidden;
  pointer-events: none;
}

.mobile-mode #mobile-vitals-host #game-menu-panel.game-menu-panel,
.mobile-mode #mobile-hud-left #game-menu-panel.game-menu-panel {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 8 !important;
}

.mobile-mode #game-menu-panel .game-menu-item.ao-btn,
.mobile-mode #game-menu-panel .game-menu-item {
  min-height: 0 !important;
  height: 100% !important;
  padding: 3px 2px !important;
  font-size: 8px !important;
}

#btn-game-menu.ao-btn.menu-open #btn-game-menu-label {
  color: inherit;
}