:root {
  color-scheme: dark;
  --gold: #f5c466;
  --gold-bright: #ffe8a3;
  --ember: #b84a1d;
  --ink: #080604;
  --panel: rgba(16, 10, 7, 0.88);
  --panel-border: rgba(245, 196, 102, 0.5);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

button, input { font: inherit; }

.viewport {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(128, 61, 24, 0.28), transparent 46%),
    #050403;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #111;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.9);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}

.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.65rem;
  padding: 2rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 43%, rgba(113, 58, 21, 0.32), transparent 32%),
    linear-gradient(180deg, rgba(7, 4, 2, 0.98), rgba(12, 7, 3, 0.97));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.loading-screen.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.loading-mark {
  width: min(72vw, 420px);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.78));
  animation: loading-logo-pulse 2.4s ease-in-out infinite;
}

.loading-mark img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.loading-spinner {
  width: 42px;
  height: 42px;
  padding: 3px;
  border: 2px solid rgba(245, 196, 102, 0.2);
  border-top-color: var(--gold-bright);
  border-right-color: var(--ember);
  border-radius: 50%;
  animation: loading-spin 900ms linear infinite;
  box-shadow: 0 0 22px rgba(245, 196, 102, 0.18);
}

.loading-spinner span {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 232, 163, 0.28);
  border-radius: 50%;
}

.loading-title,
.loading-message {
  margin: 0;
  text-shadow: 0 2px 8px #000;
}

.loading-title {
  color: var(--gold-bright);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loading-message {
  min-height: 1.4em;
  color: rgba(255, 248, 234, 0.72);
  font-size: 0.95rem;
}

.character-screen.is-loading {
  visibility: hidden;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

@keyframes loading-logo-pulse {
  0%, 100% { transform: scale(0.985); opacity: 0.88; }
  50% { transform: scale(1); opacity: 1; }
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 5, 2, 0.1), transparent 34%, rgba(5, 3, 2, 0.48)),
    radial-gradient(circle at center, transparent 42%, rgba(0, 0, 0, 0.32) 100%);
}

.brand {
  position: absolute;
  z-index: 2;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 1040px);
  text-align: center;
  color: #fff8ea;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.82));
  user-select: none;
}

.brand-logo {
  display: block;
  width: min(100%, 920px);
  max-height: 46vh;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.72));
}

.brand.is-compact {
  top: 3.5%;
  width: min(50%, 610px);
  transition: top 420ms ease, width 420ms ease;
}

.brand-kicker {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 16% -0.36em 0;
  font-family: "Segoe Print", "Brush Script MT", Georgia, cursive;
  font-size: clamp(1.5rem, 4.2vw, 4rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
  color: #fffdf5;
  -webkit-text-stroke: clamp(1px, 0.12vw, 2px) #08090d;
  text-shadow:
    3px 4px 0 #111318,
    0 0 14px rgba(255, 255, 255, 0.36),
    0 9px 18px rgba(0, 0, 0, 0.88);
  transform: rotate(-3deg) skewX(-10deg);
}

.brand h1 {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  font-family: Impact, "Arial Black", sans-serif;
  line-height: 0.7;
  letter-spacing: -0.09em;
  font-style: italic;
  font-weight: 950;
  transform: skewX(-10deg) rotate(-1deg);
  paint-order: stroke fill;
}

.brand-mir,
.brand-three {
  display: inline-block;
  color: #fffdf2;
  -webkit-text-fill-color: #fffdf2;
  -webkit-text-stroke: clamp(3px, 0.48vw, 7px) #090a0e;
  text-shadow:
    4px 6px 0 #5d5857,
    9px 12px 0 rgba(0, 0, 0, 0.72),
    0 0 5px #ffffff,
    0 18px 30px rgba(0, 0, 0, 0.9);
}

.brand-mir {
  font-size: clamp(7.2rem, 18vw, 17rem);
  transform: scaleX(1.08);
}

.brand-three {
  margin-left: 0.16em;
  font-size: clamp(5.8rem, 14vw, 13rem);
  letter-spacing: 0.025em;
}

.brand h1::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -8%;
  bottom: -0.12em;
  height: clamp(5px, 0.7vw, 10px);
  background: linear-gradient(90deg, transparent 0%, #f5f0df 14%, #ffffff 70%, transparent 100%);
  clip-path: polygon(0 55%, 88% 0, 100% 38%, 72% 62%, 6% 100%);
  filter: drop-shadow(3px 4px 0 #090a0e);
  transform: rotate(-3deg);
}

.brand-edition {
  position: relative;
  z-index: 3;
  display: block;
  width: max-content;
  margin: -0.32em 8% 0 auto;
  padding: 0 0.18em 0.08em;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.4rem, 6.3vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-style: italic;
  color: #ffc13b;
  -webkit-text-fill-color: #ffc13b;
  -webkit-text-stroke: clamp(2px, 0.3vw, 5px) #1a0901;
  text-shadow:
    3px 4px 0 #6e1900,
    7px 8px 0 #130704,
    0 0 15px rgba(255, 158, 0, 0.68),
    0 14px 24px rgba(0, 0, 0, 0.78);
  transform: skewX(-13deg) rotate(-5deg);
}

.brand-edition::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -9%;
  right: -13%;
  bottom: -0.1em;
  height: 0.17em;
  background: linear-gradient(90deg, transparent, #d34200 13%, #ffb000 58%, #fff3a8 76%, transparent);
  clip-path: polygon(0 70%, 100% 0, 86% 55%, 8% 100%);
  filter: drop-shadow(2px 3px 0 #200800);
}

.server-status {
  position: absolute;
  z-index: 3;
  top: clamp(10px, 2%, 20px);
  left: clamp(10px, 2%, 20px);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.35rem 0.5rem;
  color: #70ee7c;
  text-shadow: 0 1px 2px #000;
  font-family: system-ui, sans-serif;
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
}

.status-dot {
  width: 0.72rem;
  height: 0.72rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #d79b36;
  box-shadow: 0 0 10px currentColor;
}

.server-status.online .status-dot { background: #61d66f; }
.server-status.offline .status-dot { background: #df5b48; }

.login-panel {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(18px, 4%, 48px);
  transform: translateX(-50%);
  width: min(92%, 980px);
  padding: 1rem 1.2rem 0.65rem;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(73, 38, 20, 0.22), transparent 28%),
    var(--panel);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 18px 45px rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(9px);
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}

.login-panel.is-leaving {
  opacity: 0;
  pointer-events: none;
  filter: blur(8px);
  transform: translate(-50%, 24px);
}

.login-panel h2 {
  margin: 0 0 0.7rem;
  color: var(--gold-bright);
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-actions {
  position: absolute;
  right: 0.8rem;
  top: -40px;
  display: flex;
  gap: 0.4rem;
}

.login-fields {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 1fr) auto minmax(100px, 0.45fr);
  align-items: center;
  gap: 0.55rem;
}

.login-panel label {
  display: block;
  margin: 0;
  color: #ead6b6;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-panel input {
  width: 100%;
  min-height: 38px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(218, 170, 92, 0.44);
  border-radius: 4px;
  outline: none;
  color: #fff7e8;
  background: rgba(3, 3, 3, 0.72);
  font-family: system-ui, sans-serif;
}

.login-panel .remember-account {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.45rem;
  color: #c8d2dc;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
}

.login-panel .remember-account input {
  width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--gold-bright);
}

.login-panel input:focus-visible,
.login-panel button:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}

.login-panel button {
  min-height: 38px;
  border: 1px solid #f1bf67;
  border-radius: 4px;
  color: #fff6db;
  background: linear-gradient(#a6421b, #6f2510);
  box-shadow: inset 0 1px rgba(255, 240, 190, 0.28), 0 4px 14px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: filter 180ms ease, transform 180ms ease;
}

.primary-button { width: 100%; }

.secondary-button {
  min-width: 150px;
  padding: 0 0.9rem;
  font-size: 0.72rem;
}

.login-panel button:hover { filter: brightness(1.16); }
.login-panel button:active { transform: translateY(1px); }

.login-message {
  min-height: 1rem;
  margin: 0.35rem 0 0;
  color: #c9b89e;
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
}

.login-message.success { color: #8cf29a; }
.login-message.error { color: #ff9b86; }
.login-panel button:disabled { cursor: wait; filter: grayscale(0.45); opacity: 0.72; }

.build-label {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 7px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font: 0.68rem system-ui, sans-serif;
}

.character-screen {
  position: absolute;
  z-index: 4;
  top: 55%;
  left: 50%;
  width: min(90%, 760px);
  padding: clamp(1rem, 2.3vw, 1.6rem);
  border: 1px solid rgba(245, 196, 102, 0.62);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(56, 82, 111, 0.24), transparent 34%),
    rgba(7, 10, 15, 0.9);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.72),
    0 24px 70px rgba(0, 0, 0, 0.82),
    0 0 34px rgba(75, 187, 224, 0.14);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.96);
}

.character-screen[hidden] { display: none; }

.character-screen.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.character-heading { text-align: center; }

.character-eyebrow {
  color: #7ee3ff;
  font: 700 0.72rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.character-heading h2 {
  margin: 0.25rem 0 1rem;
  color: #fff4ce;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #3f1b08, 0 0 18px rgba(245, 196, 102, 0.28);
}

.character-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

.character-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.85rem;
  align-items: center;
  min-height: 92px;
  padding: 0.8rem;
  border: 1px solid rgba(192, 207, 219, 0.28);
  border-radius: 4px;
  color: #eee6d8;
  background: linear-gradient(135deg, rgba(36, 55, 74, 0.88), rgba(13, 16, 23, 0.94));
  text-align: left;
  cursor: pointer;
}

.character-card:hover,
.character-card.is-selected {
  border-color: #f5c466;
  box-shadow: inset 0 0 18px rgba(245, 196, 102, 0.12), 0 0 16px rgba(64, 186, 230, 0.14);
}

.character-card:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.character-seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(126, 227, 255, 0.72);
  border-radius: 50%;
  color: #fff3c8;
  background: radial-gradient(circle, rgba(64, 177, 220, 0.28), rgba(9, 16, 26, 0.92) 66%);
  box-shadow: inset 0 0 14px rgba(88, 198, 236, 0.3), 0 0 14px rgba(88, 198, 236, 0.18);
  font-size: 1.55rem;
  font-weight: 900;
}
.class-weapon-icon {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 32px;
  height: 32px;
  background-image: url('/assets/ui/Storeitems-0.png');
  background-repeat: no-repeat;
  background-position: calc(-1 * var(--icon-x)) calc(-1 * var(--icon-y));
  background-size: 2048px 1120px;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 3px rgba(255, 220, 135, .55));
  pointer-events: none;
}

.character-name {
  display: block;
  color: #fff7dc;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.character-meta {
  display: block;
  margin-top: 0.24rem;
  color: #b9c8d1;
  font: 0.78rem/1.4 system-ui, sans-serif;
}

.character-actions {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.character-actions button {
  min-width: 180px;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid #f1bf67;
  border-radius: 4px;
  color: #fff6db;
  background: linear-gradient(#a6421b, #6f2510);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.character-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.72);
  opacity: 0.5;
}

.world-message {
  margin: 0.7rem 0 0;
  color: #adc1cc;
  text-align: center;
  font: 0.78rem/1.4 system-ui, sans-serif;
}

@media (max-height: 620px), (max-width: 760px) {
  .brand { top: 10%; width: min(92%, 680px); }
  .login-panel {
    bottom: 2.5%;
    width: min(94%, 460px);
    padding: 0.7rem;
  }
  .login-actions {
    position: static;
    justify-content: center;
    margin-bottom: 0.45rem;
  }
  .secondary-button { min-width: 0; flex: 1; }
  .login-fields {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.25rem;
  }
  .login-fields > label[for="email"] { grid-column: 1; grid-row: 1; }
  .login-fields > #email { grid-column: 2 / -1; grid-row: 1; }
  .login-fields > label[for="password"] { grid-column: 1; grid-row: 2; }
  .login-fields > #password { grid-column: 2; grid-row: 2; }
  .login-panel .remember-account { grid-column: 3; grid-row: 2; margin-left: 0.35rem; white-space: nowrap; }
  .login-fields > button[type="submit"] { grid-column: 1 / -1; grid-row: 3; }
  .login-panel h2 { margin-bottom: 0.35rem; }
  .login-panel input { min-height: 40px; }
  .login-panel button { min-height: 42px; }
  .build-label { display: none; }
  .brand.is-compact { top: 2%; width: min(58%, 440px); }
  .character-screen { top: 54%; width: min(94%, 520px); padding: 0.8rem; }
  .character-actions { flex-direction: column; }
  .character-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.modal {
  display: grid;
  gap: 0.7rem;
  width: min(100%, 420px);
  padding: 1.2rem;
  border: 1px solid rgba(245, 196, 102, 0.62);
  border-radius: 4px;
  color: #eee6d8;
  background: linear-gradient(180deg, rgba(56, 82, 111, 0.24), transparent 34%), rgba(7, 10, 15, 0.96);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.72), 0 24px 70px rgba(0, 0, 0, 0.82);
}

.modal h2 {
  margin: 0;
  color: #fff4ce;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.create-character-modal { width: min(100%, 560px); }

.class-picker-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.class-picker-field legend {
  padding: 0;
  color: #b9c8d1;
  font: 0.78rem/1.3 system-ui, sans-serif;
}

.class-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.class-choice {
  display: grid;
  min-width: 0;
  min-height: 124px;
  padding: 0.25rem;
  place-items: center;
  gap: 0.1rem;
  border: 1px solid rgba(192, 207, 219, 0.28);
  border-radius: 4px;
  color: #dce8ef;
  background: linear-gradient(180deg, rgba(40, 63, 86, 0.58), rgba(4, 9, 15, 0.9));
  cursor: pointer;
  font: 0.75rem/1.1 system-ui, sans-serif;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.class-choice:hover { border-color: rgba(245, 196, 102, 0.78); transform: translateY(-1px); }
.class-choice.is-selected {
  border-color: #f5c466;
  box-shadow: 0 0 0 1px rgba(245, 196, 102, 0.42), 0 0 18px rgba(245, 196, 102, 0.18);
  color: #fff4ce;
}

.class-choice:focus-visible {
  outline: 2px solid #8ed8ff;
  outline-offset: 2px;
}

.class-choice-portrait {
  display: block;
  width: 100%;
  height: 92px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 400px auto;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.75));
  pointer-events: none;
}

.class-choice-label { display: block; text-align: center; }

.class-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.modal label {
  display: grid;
  gap: 0.25rem;
  color: #b9c8d1;
  font: 0.78rem/1.3 system-ui, sans-serif;
}

.modal input,
.modal select {
  min-height: 38px;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(192, 207, 219, 0.4);
  border-radius: 3px;
  color: #fff7dc;
  background: rgba(0, 0, 0, 0.55);
  font: 1rem system-ui, sans-serif;
}

.modal input:disabled { opacity: 0.4; }
.modal-text { margin: 0; line-height: 1.5; }
.modal-error { min-height: 1.2em; margin: 0; color: #ff8a73; font: 0.8rem system-ui, sans-serif; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }
.modal-actions button { width: auto; min-width: 110px; }

.stage.is-ingame .brand,
.stage.is-ingame .server-status,
.stage.is-ingame .build-label,
.stage.is-ingame .login-panel,
.stage.is-ingame .character-screen { display: none; }

.modal .modal-actions button { margin: 0; }

@media (max-width: 520px) {
  .class-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-choice { min-height: 116px; }
}

.exit-world {
  position: absolute;
  z-index: 6;
  top: 12px;
  right: 12px;
  width: auto;
  min-width: 0;
}

.exit-world[hidden] { display: none; }

/* ---- Selección de personaje: panel de cristal a la izquierda, el personaje a la derecha ---- */
.brand.is-compact {
  top: clamp(10px, 2.5vh, 28px);
  left: clamp(14px, 4.5vw, 72px);
  transform: none;
  width: min(30vw, 360px, 44vh);
}

.character-screen {
  top: auto;
  bottom: clamp(14px, 4vh, 40px);
  left: clamp(14px, 4.5vw, 72px);
  width: min(390px, calc(100% - 28px));
  max-height: calc(100vh - 20px);
  overflow: hidden;
  overflow-x: hidden;
  padding: 1rem 1.05rem 0.9rem;
  border: 1px solid rgba(160, 210, 255, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(48, 98, 170, 0.36), rgba(8, 16, 34, 0.80) 58%),
    rgba(6, 12, 26, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(70, 150, 255, 0.16);
  backdrop-filter: blur(16px) saturate(1.2);
  transform: translateX(-28px);
}

.character-screen.is-active { transform: none; }

.character-heading { text-align: left; }

.character-heading h2 {
  margin: 0.2rem 0 0.8rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: 0.1em;
}

.character-list {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  max-height: max(150px, calc(100vh - 440px));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 2px;
}

.character-list::-webkit-scrollbar,
.character-screen::-webkit-scrollbar { display: none; }

.character-card {
  grid-template-columns: 52px 1fr;
  gap: 0.75rem;
  min-height: 68px;
  padding: 0.55rem 0.7rem;
  border-color: rgba(160, 210, 255, 0.22);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(60, 110, 190, 0.30), rgba(8, 14, 30, 0.70));
  transition: border-color 200ms, background 200ms, transform 200ms, box-shadow 200ms;
}

.character-card:hover { transform: translateX(3px); }

.character-card.is-selected {
  border-color: rgba(255, 214, 130, 0.85);
  background: linear-gradient(100deg, rgba(90, 140, 230, 0.42), rgba(10, 18, 38, 0.80));
  box-shadow: 0 0 0 1px rgba(255, 214, 130, 0.25), 0 0 22px rgba(90, 170, 255, 0.28);
}

.character-seal { width: 52px; height: 52px; font-size: 1.25rem; }
.character-seal.has-portrait {
  background-repeat: no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
  color: transparent;
}

.character-portrait {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
}
.character-card[data-class="0"] .character-seal { border-color: #f09a6a; }
.character-card[data-class="1"] .character-seal { border-color: #7fb4ff; }
.character-card[data-class="2"] .character-seal { border-color: #78e6b8; }
.character-card[data-class="3"] .character-seal { border-color: #c29cff; }

.character-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.character-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(160, 210, 255, 0.4);
  border-radius: 6px;
  font-size: 0.74rem;
  background: linear-gradient(rgba(60, 110, 190, 0.38), rgba(14, 28, 58, 0.72));
}

.character-actions #enter-world {
  grid-column: 1 / -1;
  order: -1;
  min-height: 48px;
  font-size: 0.9rem;
  border-color: #f1c571;
  background: linear-gradient(#d99a3a, #8a4d14);
  box-shadow: 0 0 22px rgba(245, 190, 90, 0.3);
}

.character-actions button:disabled { box-shadow: none; }
.world-message { text-align: left; }

@media (max-width: 760px) {
  .character-screen {
    left: 50%;
    bottom: 10px;
    width: min(calc(100% - 20px), 460px);
    transform: translate(-50%, 24px);
  }
  .character-screen.is-active { transform: translateX(-50%); }
  .character-list { max-height: 24vh; }
  .brand.is-compact {
    left: 50%;
    transform: translateX(-50%);
    width: min(58vw, 300px);
  }
}

.stage:has(.brand.is-compact) .server-status { left: auto; right: 16px; }

.modal {
  border: 1px solid rgba(160, 210, 255, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(48, 98, 170, 0.36), rgba(8, 16, 34, 0.86) 58%),
    rgba(6, 12, 26, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(200, 230, 255, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 24px 70px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(70, 150, 255, 0.16);
}

/* El diálogo de creación deja libre el escenario para ver la previsualización del personaje. */
@media (min-width: 761px) {
  .modal-overlay.is-side {
    place-items: center start;
    padding: 0 0 0 clamp(14px, 4.5vw, 72px);
    background: transparent;
    backdrop-filter: none;
    pointer-events: none;
  }
  .modal-overlay.is-side .modal {
    width: min(390px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    pointer-events: auto;
  }
}

.is-creating .character-screen { opacity: 0; pointer-events: none; }

@media (min-width: 761px) {
  .modal-overlay.is-side {
    place-items: end start;
    padding: 0 0 clamp(14px, 4vh, 40px) clamp(14px, 4.5vw, 72px);
  }
  .modal-overlay.is-side .modal { max-height: calc(100vh - 220px); }
}

/* ---- Mundo: barra de estado y chat ---- */
.hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hud[hidden] { display: none; }

.hud-card {
  position: absolute; top: 12px; left: 12px; width: min(260px, 60vw);
  padding: .55rem .7rem .6rem; border: 1px solid rgba(160, 210, 255, .34); border-radius: 10px;
  background: linear-gradient(160deg, rgba(48, 98, 170, .36), rgba(8, 16, 34, .82) 58%), rgba(6, 12, 26, .72);
  backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  color: #eaf2fb; font: 13px/1.3 system-ui, sans-serif;
}
.hud-title { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.hud-title strong { color: #ffe8a3; font: 800 1rem Georgia, serif; letter-spacing: .04em; }
.hud-title span { color: #9fb2c4; font-size: .78rem; }
.hud-bar { position: relative; height: 14px; margin: 3px 0; border-radius: 7px; background: rgba(0, 0, 0, .55); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.hud-bar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 180ms; }
.hud-bar.hp i { background: linear-gradient(#e0574b, #8f2219); }
.hud-bar.mp i { background: linear-gradient(#4f9bff, #1f4f99); }
.hud-bar span { position: relative; display: block; text-align: center; font-size: .68rem; line-height: 14px; text-shadow: 0 1px 2px #000; }
.hud-card small { display: block; margin-top: .25rem; color: #9fb2c4; }

.chat {
  position: absolute; left: 12px; bottom: 12px; width: min(460px, calc(100% - 24px));
  display: grid; gap: 4px; pointer-events: auto;
}
.chat-log {
  max-height: 170px; overflow-y: auto; padding: .35rem .5rem; border-radius: 8px;
  background: rgba(4, 8, 18, .55); color: #e8eef6; font: 12.5px/1.35 system-ui, sans-serif; scrollbar-width: thin;
}
.chat-line { padding: 1px 0; word-break: break-word; }
.chat-system, .chat-hint { color: #ffd27a; }
.chat-shout, .chat-global, .chat-announcement { color: #ffe86a; }
.chat-whisperin, .chat-whisperout, .chat-gmwhisperin { color: #7ff0ff; }
.chat-group { color: #e6a8f0; }
.chat-guild { color: #ffb6c1; }
.chat-combat { color: #ff9a86; }
.chat-input {
  padding: .45rem .6rem; border-radius: 8px; border: 1px solid rgba(160, 210, 255, .3);
  background: rgba(4, 8, 18, .75); color: #fff; font: 13px system-ui, sans-serif;
}
.chat-input:focus { outline: 2px solid rgba(245, 196, 102, .7); }

.hud-help { position: absolute; right: 12px; bottom: 12px; color: rgba(255, 255, 255, .55); font: 11px system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
@media (max-width: 760px) { .hud-help { display: none; } .chat-log { max-height: 110px; } }

/* Menú de la piedra de teletransporte */
.teleport-menu {
  position: absolute; z-index: 8; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 32px)); max-height: min(520px, calc(100% - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(34, 24, 17, .98), rgba(12, 9, 7, .98));
  border: 2px solid rgba(245, 196, 102, .58); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), 0 18px 48px rgba(0, 0, 0, .7);
  color: #f3e7cf; font-family: "Segoe UI", system-ui, sans-serif;
}
.teleport-menu[hidden] { display: none; }
.teleport-menu header { display: flex; align-items: center; justify-content: space-between; padding: .55rem .8rem; background: rgba(0, 0, 0, .24); border-bottom: 1px solid rgba(245, 196, 102, .35); }
.teleport-menu h2 { margin: 0; color: #f3deb0; font: 700 .92rem Georgia, serif; letter-spacing: .06em; text-shadow: 0 1px 2px #000; }
.teleport-close { min-width: 32px; min-height: 32px; padding: 0; background: rgba(0, 0, 0, .25); border: 1px solid rgba(245, 196, 102, .35); border-radius: 2px; color: #cdbb97; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.teleport-close:hover, .teleport-close:focus-visible { color: #fff; background: rgba(245, 196, 102, .16); }
.teleport-tabs { display: flex; gap: 2px; padding: .45rem .55rem 0; }
.teleport-tabs button {
  flex: 1; min-height: 36px; padding: .4rem .25rem; background: rgba(0, 0, 0, .2); color: #cdbb97; cursor: pointer;
  border: 1px solid rgba(245, 196, 102, .22); border-bottom: 0; border-radius: 2px 2px 0 0; font: 700 .76rem "Segoe UI", system-ui, sans-serif;
}
.teleport-tabs button.is-active { background: rgba(245, 196, 102, .14); color: var(--gold-bright); border-color: rgba(245, 196, 102, .55); }
.teleport-list { overflow-y: auto; padding: .55rem .6rem .7rem; display: grid; gap: 3px; border-top: 1px solid rgba(245, 196, 102, .42); }
.teleport-note { margin: 0 0 .35rem; color: #b7a889; font-size: .74rem; line-height: 1.35; }
.teleport-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 38px; padding: .42rem .6rem;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(245, 196, 102, .22); border-radius: 2px; color: #fff; cursor: pointer; text-align: left;
}
.teleport-row:hover:not(:disabled), .teleport-row:focus-visible { background: rgba(245, 196, 102, .18); border-color: rgba(245, 196, 102, .7); outline: none; }
.teleport-row.is-locked { cursor: not-allowed; opacity: .66; border-color: rgba(255, 255, 255, .12); }
.teleport-name { font-weight: 600; font-size: .83rem; }
.teleport-state { color: var(--gold); font-size: .72rem; white-space: nowrap; }
.teleport-row.is-locked .teleport-state { color: #9fb2c4; }

/* ===== Interfaz del juego (arte original de Zircon) ===== */
.hud-card { display: none; }
.chat { bottom: 76px; }
.hud-help { bottom: 76px; }
.ui-root { position: absolute; inset: 0; z-index: 6; pointer-events: none; font-family: "Segoe UI", system-ui, sans-serif; user-select: none; overflow: clip; }
.ui-root * { user-select: none; }
.ui-root input, .ui-root textarea, .ui-root [contenteditable="true"] { user-select: text; }
.ui-root[hidden] { display: none; }
.ui-root > * { pointer-events: auto; }
.ui-panel-host { position: absolute; left: 50%; bottom: 0; width: 1024px; height: 68px; transform-origin: bottom center; pointer-events: none; }
.ui-panel { position: absolute; inset: 0; pointer-events: auto; }
.ui-sprite { position: absolute; pointer-events: none; }
.ui-sprite-img { position: absolute; image-rendering: pixelated; }
.ui-clip { position: absolute; overflow: hidden; pointer-events: none; }
.ui-btn { position: absolute; cursor: pointer; }
.ui-btn.is-down { filter: brightness(.8); }
.ui-label { position: absolute; color: #e8e2d0; font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 1px #000; }
.ui-stat { text-align: center; color: #fff; font-size: 11px; line-height: 16px; }
.ui-bar-text { text-align: center; font-size: 10px; color: #fff; line-height: 12px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.ui-bar-text.small { color: #c9d4dd; }

.ui-win { position: absolute; user-select: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55)); touch-action: none; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); box-sizing: border-box; }
.ui-win[hidden] { display: none; }
.ui-title { display: flex; align-items: center; justify-content: center; text-align: center; color: #f3deb0; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.ui-cell { position: absolute; overflow: hidden; box-sizing: border-box; }
.ui-icon { pointer-events: none; }
.ui-custom-item-icon { position: absolute; left: 3px; top: 3px; width: 30px; height: 30px; object-fit: contain; pointer-events: none; }
.ui-count { position: absolute; right: 1px; bottom: 0; color: #ffe85a; font-size: 11px; font-weight: 700; text-shadow: 0 0 2px #000, 0 1px 1px #000; pointer-events: none; }
.ui-cell:hover { outline: 1px solid rgba(245, 196, 102, .75); outline-offset: -1px; }
.ui-cell:focus-visible, .ui-btn:focus-visible { outline: 2px solid #ffe27a; outline-offset: 2px; z-index: 20; }
.ui-cell:focus-visible { background: rgba(245, 196, 102, .12); }
.ui-cell.is-sellable { outline: 1px solid rgba(120, 220, 120, .85); outline-offset: -1px; }
.ui-ghost { position: absolute; width: 36px; height: 36px; pointer-events: none !important; opacity: .85; z-index: 3000; }
.ui-weight { position: absolute; pointer-events: none; }
.ui-weight-text { text-align: center; font-size: 10px; color: #fff; top: 351px; }
.ui-gold-title { color: #daa520; font-weight: 700; font-size: 11px; line-height: 20px; text-align: center; }
.ui-gold { text-align: center; color: #fff; line-height: 20px; }
.ui-charname { text-align: center; color: #deffde; font-weight: 700; font-size: 13px; }
.ui-charsub { text-align: center; color: #ffffb5; font-size: 11px; }
.ui-statkey { color: #c9b98b; font-size: 11px; text-align: center; }
.ui-statval { color: #fff; font-size: 11px; text-align: center; }

.ui-belt { position: absolute; left: auto; bottom: auto; transform: none; background: rgba(12, 8, 5, .78); border: 1px solid rgba(245, 196, 102, .45); border-radius: 4px; z-index: 7; cursor: grab; touch-action: none; }
.ui-belt:active { cursor: grabbing; }
.ui-belt[hidden] { display: none; }
.ui-belt-cell { background: rgba(255, 255, 255, .03); border: 1px solid rgba(245, 196, 102, .18); box-sizing: border-box; }
.ui-belt-key { position: absolute; left: 1px; top: 0; color: #b9a984; font-size: 9px; font-style: italic; pointer-events: none; }

.ui-magic-list { position: absolute; overflow-y: auto; scrollbar-width: thin; display: grid; gap: 3px; align-content: start; }
.ui-magic-row { display: flex; gap: 8px; align-items: center; padding: 3px 6px; background: rgba(0, 0, 0, .32); border: 1px solid rgba(245, 196, 102, .2); border-radius: 3px; }
.ui-magic-icon { position: relative !important; flex: none; }
.ui-magic-text { display: grid; line-height: 1.25; }
.ui-magic-text b { color: #f3deb0; font-size: 12px; }
.ui-magic-text span { color: #9fb2c4; font-size: 11px; }

/* Árbol de habilidades inspirado en el panel de Zircon: iconos conectados,
   scroll vertical y detalle de la habilidad seleccionada en la franja inferior. */
.ui-skill-tree { position: static; display: grid; gap: 6px; min-height: 0; color: #e8e2d0; }
.ui-skill-tree-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: rgba(0, 0, 0, .42); border: 1px solid rgba(245, 196, 102, .24); color: #f3deb0; font-size: 12px; }
.ui-skill-tree-top span { color: #a7b9c3; font-size: 11px; }
.ui-skill-tree-board { position: relative; width: 436px; height: 785px; min-height: 785px; overflow: hidden; margin: 0 auto; background: radial-gradient(circle at 50% 20%, rgba(118, 83, 39, .25), transparent 48%), linear-gradient(135deg, rgba(29, 26, 20, .96), rgba(12, 12, 11, .98)); border: 1px solid rgba(245, 196, 102, .25); }
.ui-skill-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .65; }
.ui-skill-tree-line { fill: none; stroke: #82704b; stroke-width: 1.4; }
.ui-skill-node { position: absolute !important; display: grid; grid-template-rows: 36px 18px; justify-items: center; align-content: center; gap: 1px; box-sizing: border-box; padding: 0; background: rgba(14, 15, 13, .86); border: 1px solid rgba(198, 161, 77, .48); color: #b8aa88; cursor: pointer; text-align: center; font-size: 8px; line-height: 1; }
.ui-skill-node:hover, .ui-skill-node.is-selected { border-color: #ffe89d; box-shadow: 0 0 0 1px rgba(255, 232, 157, .35), 0 0 12px rgba(216, 171, 70, .2); color: #fff3bd; }
.ui-skill-node.is-learned { border-color: #d5b35b; color: #f6e2a3; background: rgba(70, 53, 25, .78); }
.ui-skill-node.is-locked { filter: grayscale(.65); opacity: .48; }
.ui-skill-node-icon { position: relative !important; width: 36px; height: 36px; }
.ui-skill-detail { display: grid; grid-template-columns: 42px minmax(0, 1fr) 94px; gap: 8px; align-items: center; padding: 7px 8px; min-height: 66px; background: rgba(9, 8, 6, .82); border: 1px solid rgba(245, 196, 102, .34); }
.ui-skill-detail-icon { position: relative !important; width: 36px; height: 36px; }
.ui-skill-detail-copy { display: grid; gap: 1px; min-width: 0; }
.ui-skill-detail-copy strong { color: #ffe6a0; font-size: 12px; }
.ui-skill-detail-copy span { color: #aebfc7; font-size: 10px; }
.ui-skill-detail-copy p { margin: 2px 0 0; color: #c8c0ad; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-skill-key { width: 92px; }
.ui-skill-tree-hint { padding: 2px 4px 0; color: #8c897c; text-align: center; font-size: 10px; }

.ui-frame { position: absolute; width: 394px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); box-sizing: border-box; background: linear-gradient(#2a1d12, #150e09); border: 1px solid #9a7a3d; box-shadow: 0 0 0 1px #000, 0 10px 26px rgba(0, 0, 0, .6); border-radius: 3px; color: #e8e2d0; }
.ui-frame[hidden] { display: none; }
.ui-frame-head { position: relative; display: flex; justify-content: center; align-items: center; padding: 5px 38px 5px 10px; background: linear-gradient(#4a3720, #2a1d12); border-bottom: 1px solid #9a7a3d; color: #f3deb0; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-align: center; }
.ui-frame-head button { position: absolute; right: 8px; top: 2px; min-width: 28px; min-height: 28px; background: none; border: 0; color: #cdbb97; font-size: 18px; line-height: 1; cursor: pointer; }
.ui-frame-head button:hover { color: #fff; }
.ui-npc-body { padding: 12px 16px 16px; max-height: 320px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.5; scrollbar-width: thin; }
.ui-npc-link { color: #ffd27a; text-decoration: underline; cursor: pointer; }
.ui-npc-link:hover { color: #fff; }
.ui-goods-list { max-height: 330px; overflow-y: auto; padding: 6px; display: grid; gap: 3px; scrollbar-width: thin; }
.ui-goods-row { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 2px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(245, 196, 102, .22); border-radius: 3px; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.ui-goods-row:hover { background: rgba(245, 196, 102, .18); }
.ui-goods-icon { position: relative; width: 36px; height: 36px; flex: none; }
.ui-goods-name { flex: 1; font-size: 12.5px; }
.ui-goods-cost { color: #ffe85a; font-weight: 700; font-size: 12px; }
.ui-goods-cost.is-short { color: #ff7a6a; }
.ui-tooltip { position: absolute; z-index: 4000; max-width: 260px; padding: 6px 9px; background: rgba(10, 7, 4, .94); border: 1px solid #9a7a3d; border-radius: 3px; color: #d8d2c0; font-size: 12px; line-height: 1.35; pointer-events: none; }
.ui-tooltip[hidden] { display: none; }
.ui-exp-hitbox { position: absolute; z-index: 5; cursor: help; background: transparent; }
.ui-tooltip strong { display: block; margin-bottom: 2px; font-size: 13px; }
.ui-tt-foot { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(245, 196, 102, .25); color: #a89a76; }
.ui-framewin { display: flex; flex-direction: column; user-select: none; }
.ui-framewin[hidden] { display: none; }
.ui-framewin-body { flex: 1; min-height: 0; overflow: auto; padding: 6px; scrollbar-width: thin; }
.ui-framewin .ui-magic-list { position: static; height: 100%; }
.ui-frame-head { cursor: move; }

.ui-dead { left: 50%; top: 38%; transform: translateX(-50%); width: 340px; z-index: 3500; }
.ui-dead-body { padding: 14px 16px 16px; font-size: 13px; line-height: 1.5; display: grid; gap: 12px; }
.ui-dead-btn { justify-self: center; padding: 7px 18px; background: linear-gradient(#6a4b24, #3a2812); border: 1px solid #c79a4a; border-radius: 3px; color: #ffe8a3; font-weight: 700; cursor: pointer; }
.ui-dead-btn:hover { filter: brightness(1.2); }
.ui-cell.is-disabled { background: rgba(0, 0, 0, .45); pointer-events: none; }
.ui-gold-btn { position: absolute; padding: 0; background: linear-gradient(#5b4220, #33240f); border: 1px solid #9a7a3d; border-radius: 3px; color: #ffe8a3; font: 700 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ui-gold-btn:hover { filter: brightness(1.25); }
.ui-menu-window { overflow: hidden; }
.ui-menu-extension { position: absolute; z-index: 1; left: 1px; right: 1px; top: 244px; bottom: 1px; pointer-events: none; background: linear-gradient(#2a1d12, #150e09); border-left: 1px solid #9a7a3d; border-right: 1px solid #9a7a3d; border-bottom: 1px solid #9a7a3d; box-sizing: border-box; }
.ui-menu-button { z-index: 2; }

.ui-minimap { width: 202px; padding: 0; background: #000; z-index: 9; }
.ui-minimap .ui-frame-head { padding: 3px 8px; font-size: 11px; cursor: move; }
.ui-minimap-canvas { display: block; }
.ui-minimap-btns { position: absolute; right: 3px; top: 26px; width: 20px; height: 60px; opacity: 0; transition: opacity .15s; }
.ui-minimap:hover .ui-minimap-btns { opacity: 1; }
.ui-bigmap { z-index: 9; width: min(830px, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: calc(100vh - 24px); overflow: hidden; }
.ui-bigmap-body { display: flex; min-width: 0; max-height: calc(100vh - 64px); overflow: auto; }
.ui-bigmap-canvas { display: block; min-width: 0; cursor: crosshair; background: #000; max-width: calc(100vw - 220px); max-height: calc(100vh - 80px); object-fit: contain; }
.ui-bigmap-list { width: 180px; min-width: 140px; max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: thin; border-left: 1px solid #9a7a3d; }
.ui-bigmap-listhead { padding: 4px 8px; color: #f3deb0; font-weight: 700; font-size: 12px; border-bottom: 1px solid rgba(245, 196, 102, .25); }
.ui-bigmap-npc { display: block; width: 100%; padding: 4px 8px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #ffd84a; text-align: left; font: 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ui-bigmap-npc:hover { background: rgba(245, 196, 102, .18); }

/* En ventanas estrechas los contenidos se desplazan dentro de su marco, sin
   crear scroll horizontal de la página ni cortar botones de acción. */
@media (max-width: 760px), (max-height: 620px) {
  .ui-win, .ui-frame { max-width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
  .ui-frame-head { padding-left: 6px; padding-right: 34px; }
  .ui-npc-body, .ui-goods-list, .ui-dialog-body { max-height: calc(100vh - 96px); overflow-y: auto; }
  .ui-bigmap { width: calc(100vw - 12px); max-width: calc(100vw - 12px); }
  .ui-bigmap-body { flex-direction: column; max-height: calc(100vh - 58px); }
  .ui-bigmap-canvas { width: 100%; max-width: 100%; max-height: calc(100vh - 170px); }
  .ui-bigmap-list { width: 100%; min-width: 0; max-height: 150px; border-left: 0; border-top: 1px solid #9a7a3d; }
  .ui-dialog-body { padding: 9px 10px 11px; }
  .ui-dialog-field input, .ui-dialog-field textarea { max-width: 100%; box-sizing: border-box; }
}

.stage.is-ingame .exit-world { display: none; }

/* ===== Grupo, misiones, correo y gremio ===== */
.ui-dialog { z-index: 3600; }
.ui-dialog-body { padding: 12px 14px 14px; display: grid; gap: 10px; }
.ui-dialog-text { white-space: pre-wrap; font-size: 13px; line-height: 1.45; }
.ui-dialog-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ui-dialog-field { display: grid; gap: 3px; font-size: 12px; color: #c9b98b; }
.ui-dialog-field input[type=text], .ui-dialog-field input[type=number], .ui-dialog-field textarea,
.ui-guild-create input[type=text], .ui-guild-create input[type=number], .ui-guild-info textarea, .ui-mail-form input, .ui-mail-form textarea, .ui-people-add input {
  background: #0d0806; border: 1px solid #6b5230; border-radius: 3px; color: #f3e7cf; padding: 5px 7px; font: 13px "Segoe UI", system-ui, sans-serif;
}
.ui-dialog-field input[type=checkbox] { justify-self: start; }
.ui-dialog-btn { padding: 6px 16px; background: linear-gradient(#5b4220, #33240f); border: 1px solid #9a7a3d; border-radius: 3px; color: #ffe8a3; font: 700 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ui-dialog-btn:hover { filter: brightness(1.25); }
.ui-dialog-btn:disabled { cursor: default; filter: grayscale(.45); opacity: .45; }
.ui-empty { color: #8f866f; font-size: 12px; padding: 8px; }
.ui-check { position: absolute; color: #e8e2d0; font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.ui-tabbar { display: flex; gap: 4px; margin-bottom: 8px; }
.ui-tab { flex: 1; padding: 4px 6px; background: rgba(255, 255, 255, .05); color: #cdbb97; border: 1px solid rgba(245, 196, 102, .25); border-radius: 4px 4px 0 0; font: 700 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ui-tab.is-active { background: rgba(245, 196, 102, .2); color: #ffe8a3; border-color: #9a7a3d; }
.ui-win > .ui-tab { position: absolute; flex: none; }

.ui-group-members { position: absolute; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 2px; overflow-y: auto; scrollbar-width: thin; }
.ui-group-member { text-align: left; padding: 3px 6px; background: none; border: 0; color: #fff; font: 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-group-member:hover, .ui-group-lfgrow:hover { background: rgba(245, 196, 102, .18); }
.is-selected { background: rgba(245, 196, 102, .28) !important; }
.ui-group-lfg { position: absolute; display: grid; align-content: start; gap: 2px; }
.ui-group-lfgrow { text-align: left; padding: 2px 6px; height: 19px; background: rgba(0, 0, 0, .3); border: 0; color: #ffe8a3; font: 11.5px "Segoe UI", system-ui, sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ui-quest-list { position: absolute; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 3px; }
.ui-quest-row { display: grid; text-align: left; padding: 5px 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 196, 102, .2); border-radius: 3px; color: #fff; cursor: pointer; font: inherit; }
.ui-quest-row b { font-size: 12.5px; color: #f3deb0; }
.ui-quest-row span { font-size: 11px; color: #9fb2c4; }
.ui-quest-row:hover { background: rgba(245, 196, 102, .15); }
.ui-quest-detail { position: absolute; overflow-y: auto; scrollbar-width: thin; font-size: 12.5px; line-height: 1.45; color: #e8e2d0; display: grid; align-content: start; gap: 8px; }
.ui-quest-detail h3 { margin: 0; color: #ffe8a3; font-size: 15px; }
.ui-quest-text { white-space: pre-wrap; color: #cfc7b0; }
.ui-quest-tasks b, .ui-quest-rewards b { color: #f3deb0; font-size: 12px; }
.ui-quest-task { padding: 2px 0 2px 10px; }
.ui-quest-task.is-done, .ui-tracker-task.is-done { color: #7be3a5; }
.ui-quest-rewardrow { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.ui-quest-reward { position: relative; width: 36px; height: 36px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(245, 196, 102, .3); }
.ui-quest-reward.is-choice { border-color: #7fb6ff; }
.ui-tracker { position: absolute; right: 8px; top: 232px; width: 220px; padding: 6px 8px; background: rgba(10, 7, 4, .6); border-radius: 4px; font-size: 11.5px; line-height: 1.35; color: #e8e2d0; pointer-events: none !important; z-index: 8; }
.ui-tracker[hidden] { display: none; }
.ui-tracker-title { color: #ffe8a3; font-weight: 700; margin-top: 3px; }
.ui-tracker-task { padding-left: 8px; }
.ui-npc-quests { padding: 0 16px 14px; display: grid; gap: 4px; }
.ui-npc-quests[hidden] { display: none; }
.ui-npc-quest-btn { text-align: left; width: 100%; padding: 6px 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(245, 196, 102, .3); border-radius: 3px; color: #cdbb97; cursor: pointer; font: 700 12.5px "Segoe UI", system-ui, sans-serif; }
.ui-npc-quest-btn.is-new { color: #ffd84a; }
.ui-npc-quest-btn:hover { background: rgba(245, 196, 102, .2); }

.ui-mail-page { height: 330px; }
.ui-mail-list { float: left; width: 190px; height: 100%; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 3px; }
.ui-mail-read { margin-left: 200px; height: 100%; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 8px; font-size: 12.5px; }
.ui-mail-read h3, .ui-guild-info h3 { margin: 0; color: #ffe8a3; font-size: 15px; }
.ui-mail-row { display: grid; text-align: left; padding: 5px 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 196, 102, .2); border-radius: 3px; color: #fff; cursor: pointer; font: inherit; }
.ui-mail-row b { font-size: 12px; color: #cdbb97; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-mail-row.is-new b { color: #ffd84a; }
.ui-mail-row span, .ui-mail-meta { font-size: 11px; color: #9fb2c4; }
.ui-mail-text { white-space: pre-wrap; line-height: 1.45; padding: 6px 8px; background: rgba(0, 0, 0, .3); border-radius: 3px; min-height: 80px; }
.ui-mail-gold { color: #ffe85a; }
.ui-mail-items { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-mail-form { display: grid; gap: 8px; }
.ui-people-add { display: flex; gap: 6px; margin-bottom: 8px; }
.ui-people-add input { flex: 1; }
.ui-people-list { height: 280px; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 2px; }
.ui-people-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; background: rgba(255, 255, 255, .04); border-radius: 3px; cursor: pointer; font-size: 12.5px; }
.ui-people-row:hover { background: rgba(245, 196, 102, .15); }
.ui-people-x { background: none; border: 0; color: #cdbb97; font-size: 16px; cursor: pointer; }
.ui-people-x:hover { color: #fff; }
.is-online { color: #7be3a5; }
.is-offline { color: #8f866f; }

.ui-guild-page { height: 360px; overflow-y: auto; scrollbar-width: thin; }
.ui-guild-create, .ui-guild-info { display: grid; gap: 8px; font-size: 12.5px; }
.ui-guild-kv { display: flex; justify-content: space-between; padding: 3px 8px; background: rgba(255, 255, 255, .04); border-radius: 3px; }
.ui-guild-kv span { color: #c9b98b; }
.ui-guild-cost { color: #ffe85a; font-size: 12px; }
.ui-guild-cost.is-short { color: #ff7a6a; }
.ui-guild-mhead, .ui-guild-mrow { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 6px; padding: 4px 8px; font-size: 12px; }
.ui-guild-mhead { color: #f3deb0; font-weight: 700; border-bottom: 1px solid rgba(245, 196, 102, .25); }
.ui-guild-mlist { height: 240px; overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; }
.ui-guild-mrow { background: none; border: 0; color: #fff; text-align: left; cursor: pointer; font-family: inherit; }
.ui-guild-mrow:hover { background: rgba(245, 196, 102, .15); }
.ui-guild-members .ui-dialog-row { margin-top: 8px; }
.ui-economy-page { height: 410px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 110px); gap: 7px; color: #ead9ae; font-size: 12px; }
.ui-economy-head { color: #ffe8a3; padding: 3px 6px; border-bottom: 1px solid rgba(245,196,102,.25); }
.ui-economy-search { display: flex; gap: 6px; align-items: center; }
.ui-economy-search input, .ui-economy-search select { min-width: 0; flex: 1; background: #17130f; color: #f5e9c5; border: 1px solid #806b3f; border-radius: 3px; padding: 5px 7px; }
.ui-economy-search select { flex: 0 0 105px; }
.ui-economy-list { overflow-y: auto; display: grid; align-content: start; gap: 4px; scrollbar-width: thin; }
.ui-economy-row { display: grid; grid-template-columns: 1.5fr 1fr auto auto; gap: 7px; align-items: center; padding: 6px 7px; background: rgba(255,255,255,.045); border: 1px solid rgba(245,196,102,.12); border-radius: 3px; }
.ui-economy-row b { color: #ffe7a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-economy-row span { color: #c4b58c; }
.ui-economy-fav { border: 0; background: none; color: #ffd34d; font-size: 18px; cursor: pointer; padding: 0 3px; }

.ui-quest-detail { display: block; overflow: visible; }
.ui-quest-desc, .ui-quest-tasks, .ui-quest-rewards { position: absolute; overflow-y: auto; scrollbar-width: thin; padding: 4px 6px; }
.ui-quest-actions { position: absolute; display: flex; gap: 8px; justify-content: flex-end; }

.ui-mail-page { height: 380px; }

.ui-quest-detail > * { position: absolute; }
.ui-doll { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.ui-win > .ui-cell { z-index: 20 !important; }
.ui-win > .ui-cell > .ui-sprite { z-index: 21; }

/* ===== Barra de magias, ranking, comercio, compañeros y ajustes ===== */
.ui-magicbar { position: absolute; z-index: 7; background: rgba(12, 8, 5, .7); border: 1px solid rgba(245, 196, 102, .35); border-radius: 4px; touch-action: none; }
.ui-magicbar[hidden] { display: none; }
.ui-magicbar-slot { position: absolute; background: rgb(20, 20, 20); border: 1px solid rgba(245, 196, 102, .5); box-sizing: border-box; cursor: pointer; }
.ui-magicbar-slot.is-filled { border-color: #c79a4a; }
.ui-magicbar-slot:hover { outline: 1px solid #ffe8a3; outline-offset: -1px; }
.ui-magicbar-key { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-style: italic; color: #e8e2d0; text-shadow: 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.ui-magicbar-cd { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(50, 50, 50, .55); color: #ffd84a; font-weight: 700; font-size: 13px; text-shadow: 0 0 3px #000; pointer-events: none; }
.ui-magicbar-set { position: absolute; right: 4px; top: 4px; width: 20px; height: 60px; }
.ui-magicbar-setlabel { position: absolute; left: 0; right: 0; top: 20px; text-align: center; color: #fff; font-size: 12px; }
.ui-magic-key { margin-left: auto; flex: none; }

.ui-lootbox { display: grid; gap: 8px; padding: 10px 12px; color: #f3e7cf; }
.ui-lootbox-title { text-align: center; color: #ffe8a3; font: 700 14px Georgia, serif; }
.ui-lootbox-list { display: grid; gap: 5px; max-height: 172px; overflow-y: auto; }
.ui-lootbox-item { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; min-height: 40px; padding: 2px 5px; border: 1px solid rgba(245,196,102,.25); background: rgba(0,0,0,.3); }
.ui-lootbox-icon { position: relative !important; width: 36px; height: 36px; }
.ui-lootbox-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ui-inspect { display: grid; gap: 8px; padding: 12px; color: #f3e7cf; }
.ui-inspect-title { text-align: center; color: #ffe8a3; font: 700 16px Georgia, serif; }
.ui-inspect-sub { text-align: center; color: #b8c9db; font-size: 12px; }
.ui-inspect-items { display: grid; grid-template-columns: repeat(8, 36px); justify-content: center; gap: 5px; padding-top: 10px; }
.ui-inspect-item { position: relative; width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(245,196,102,.35); background: rgba(0,0,0,.35); }
.ui-inspect-icon { position: absolute !important; }

.ui-select, .ui-input { background: #0d0806; border: 1px solid #6b5230; border-radius: 3px; color: #f3e7cf; padding: 2px 5px; font: 12px "Segoe UI", system-ui, sans-serif; }
.ui-rank-list { position: absolute; display: grid; align-content: start; gap: 0; }
.ui-rank-row { display: grid; grid-template-columns: 34px 1fr 62px 84px 34px; align-items: center; height: 23px; padding: 0 4px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); color: #cfc7b0; font: 12px "Segoe UI", system-ui, sans-serif; text-align: left; cursor: pointer; width: 290px; }
.ui-rank-row:hover { background: rgba(245, 196, 102, .15); }
.ui-rank-row.is-online { color: #fff; }
.ui-rank-row .c1::before { content: "\25CF"; margin-right: 4px; color: #5d5446; font-size: 10px; }
.ui-rank-row.is-online .c1::before { color: #4fe36a; text-shadow: 0 0 4px rgba(79, 227, 106, .7); }
.ui-rank-row .c0 { color: #ffd84a; font-weight: 700; }
.ui-rank-row .c1, .ui-rank-row .c2, .ui-rank-row .c3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rank-search { position: absolute; background: rgba(245, 196, 102, .1); }
.ui-rank-search[hidden] { display: none; }
.is-up { color: #7be3a5; font-size: 10px; }
.is-down { color: #ff7a6a; font-size: 10px; }

.ui-comp { display: grid; grid-template-columns: 150px 1fr 196px; gap: 8px; height: 370px; }
.ui-comp-list { overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 3px; }
.ui-comp-row { display: grid; text-align: left; padding: 5px 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 196, 102, .2); border-radius: 3px; color: #fff; cursor: pointer; font: inherit; }
.ui-comp-row b { color: #f3deb0; font-size: 12.5px; }
.ui-comp-row span { color: #9fb2c4; font-size: 11px; }
.ui-comp-row.is-selected { background: rgba(245, 196, 102, .25); }
.ui-comp-detail { overflow-y: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 6px; font-size: 12.5px; }
.ui-comp-detail h3 { margin: 0; color: #ffe8a3; font-size: 15px; }
.ui-comp-bonus { font-size: 11.5px; color: #9fb2c4; display: grid; gap: 2px; }
.ui-comp-bag { position: relative; width: 190px; height: 226px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(245, 196, 102, .25); }
.ui-comp-bag.is-inactive { opacity: .4; }

/* ===== Familiares: compañero y montura, inspirado en el panel de Zentaur ===== */
.rm-family-window.ui-frame {
  background: #171008;
  border-color: #916b28;
  box-shadow: 0 0 0 1px #0b0703, 0 12px 30px rgba(0, 0, 0, .72);
  color: #ead8ad;
  font-family: Georgia, "Times New Roman", serif;
}
.rm-family-window .ui-frame-head {
  min-height: 26px;
  padding: 4px 38px 4px 10px;
  background: linear-gradient(180deg, #2b1b0a, #1b1006);
  border-bottom-color: #7e5b22;
  color: #f0bd51;
  font-size: 16px;
  text-shadow: 0 1px 2px #000;
}
.rm-family-window .ui-frame-head button { color: #b78b47; }
.rm-family-window .ui-framewin-body { padding: 0; overflow: hidden; }
.rm-fam { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.rm-fam-kind-tabs, .rm-fam-section-tabs { display: flex; align-items: flex-end; gap: 3px; }
.rm-fam-kind-tabs { min-height: 27px; padding: 3px 8px 0; border-bottom: 1px solid #684819; background: #120c07; }
.rm-fam-kind-tabs button, .rm-fam-section-tabs button {
  min-width: 62px; height: 24px; padding: 0 12px; cursor: pointer;
  background: linear-gradient(180deg, #2b2114, #171008);
  border: 1px solid #6c4e20; border-radius: 7px 7px 0 0;
  color: #d4bc8d; font: 700 12px Georgia, "Times New Roman", serif;
}
.rm-fam-kind-tabs button:hover, .rm-fam-section-tabs button:hover { border-color: #b68a3c; color: #ffe2a0; }
.rm-fam-kind-tabs button:focus-visible, .rm-fam-section-tabs button:focus-visible, .rm-fam-btn:focus-visible, .rm-fam-companion-chip:focus-visible {
  outline: 2px solid #f2c75d; outline-offset: 2px;
}
.rm-fam-kind-tabs button.is-on, .rm-fam-section-tabs button.is-on {
  background: linear-gradient(180deg, #c5ad7e, #9f8758);
  border-color: #8c692a; color: #241506; text-shadow: 0 1px rgba(255,255,255,.32);
}
.rm-fam-page { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 9px 9px; }
.rm-fam-section-tabs { min-height: 28px; padding-left: 7px; }
.rm-fam-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 10px; }
.rm-fam-left, .rm-fam-content {
  min-width: 0; border: 1px solid #795520; background: #120d09; box-shadow: inset 0 0 0 1px rgba(255,214,120,.04);
}
.rm-fam-left { display: flex; flex-direction: column; padding: 7px; }
.rm-fam-content { padding: 7px; overflow: auto; scrollbar-width: thin; }

.rm-fam-preview, .rm-fam-mount-preview {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 72%, #3a2810 0, #171008 52%, #0e0905 100%);
  border: 1px solid #6f4d1e;
}
.rm-fam-preview { height: 137px; }
.rm-fam-preview-stage, .rm-fam-mount-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rm-fam-preview-stage { width: 100%; height: 100%; }
.rm-fam-pig-crop { position: relative; width: 62px; height: 32px; overflow: hidden; transform: scale(2.25); image-rendering: pixelated; }
.rm-fam-pig-crop img { position: absolute; left: 0; top: 0; max-width: none; }
.rm-fam-generic-pet { width: 72px; height: 72px; image-rendering: pixelated; }

.rm-fam-companion-strip { display: flex; gap: 3px; min-height: 39px; padding: 5px 3px; overflow-x: auto; scrollbar-width: thin; }
.rm-fam-companion-chip {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px; padding: 2px; cursor: pointer;
  background: linear-gradient(180deg, #291c0c, #100a05); border: 1px solid #644619; color: inherit;
}
.rm-fam-companion-chip img { width: 100%; height: 100%; opacity: .5; }
.rm-fam-companion-chip.is-on { border-color: #f0c24d; box-shadow: inset 0 0 5px rgba(240,194,77,.45); }
.rm-fam-companion-chip.is-on img { opacity: 1; }
.rm-fam-companion-chip.is-active::after { content: ""; position: absolute; right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #64d87e; box-shadow: 0 0 4px #64d87e; }

.rm-fam-id { display: grid; gap: 3px; margin-top: 1px; }
.rm-fam-id-row, .rm-fam-stat-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid #68481c; background: #180f07; }
.rm-fam-id-row { min-height: 22px; padding: 0 7px; font-size: 11px; }
.rm-fam-id-row span, .rm-fam-stat-row span { color: #d6c18f; }
.rm-fam-id-row b, .rm-fam-stat-row b { color: #f4e4bb; font-weight: 400; text-align: right; }
.rm-fam-bars { display: grid; gap: 4px; margin-top: 6px; }
.rm-fam-meter { display: grid; gap: 1px; }
.rm-fam-meter-head { display: flex; justify-content: space-between; font-size: 10px; color: #e1ca97; }
.rm-fam-meter-head b { color: #f8e9bd; font-weight: 400; }
.rm-fam-meter-track { height: 13px; overflow: hidden; background: #090704; border: 1px solid #624518; }
.rm-fam-meter-fill { height: 100%; min-width: 0; background: linear-gradient(90deg, #098b31, #20d44d); box-shadow: inset 0 1px rgba(255,255,255,.22); transition: width .18s ease-out; }
.rm-fam-meter:nth-child(2) .rm-fam-meter-fill { background: linear-gradient(90deg, #a66a08, #e2b827); }
.rm-fam-meter:nth-child(3) .rm-fam-meter-fill { background: linear-gradient(90deg, #24588e, #4da0e3); }

.rm-fam-bag-panel { display: flex; min-height: 100%; flex-direction: column; align-items: center; }
.rm-fam-unlocked { width: 187px; height: 18px; box-sizing: border-box; text-align: center; color: #fff5be; font-size: 11px; line-height: 17px; background: linear-gradient(90deg, #4b2e04, #c99010 50%, #4b2e04); border: 1px solid #80591d; text-shadow: 0 1px 2px #000; }
.rm-fam-bag { position: relative; width: 187px; height: 224px; box-sizing: border-box; background: #11100b; border: 1px solid #765520; }
.rm-fam-bag::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 36px, rgba(143,105,38,.52) 36px 37px), repeating-linear-gradient(0deg, transparent 0 36px, rgba(143,105,38,.52) 36px 37px); }
.rm-fam-bag .ui-cell { z-index: 1; background: rgba(8,8,6,.16); }
.rm-fam-bag.is-inactive { opacity: .45; }
.rm-fam-weight { min-height: 16px; margin-top: 4px; color: #e7d29e; font-size: 10px; text-align: center; }
.rm-fam-hint { margin-top: auto; color: #8f8265; font-size: 9px; text-align: center; }

.rm-fam-stats, .rm-fam-filters { display: grid; align-content: start; gap: 5px; font-size: 11px; }
.rm-fam-stats h3, .rm-fam-filters h3, .rm-fam-mount-detail h3 { margin: 0 0 2px; color: #f1bf59; font-size: 14px; text-align: center; }
.rm-fam-stat-row { min-height: 24px; padding: 0 7px; }
.rm-fam-bonus { display: grid; gap: 2px; margin-top: 2px; padding: 5px; border: 1px solid #503718; color: #b7ad95; font-size: 10px; }
.rm-fam-bonus strong { color: #ddc589; }
.rm-fam-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 4px; }
.rm-fam-btn {
  min-height: 29px; padding: 4px 10px; cursor: pointer;
  background: linear-gradient(180deg, #5b4220, #2b1c0b); border: 1px solid #a47d34; border-radius: 3px;
  color: #ffe1a0; font: 700 11px Georgia, "Times New Roman", serif;
}
.rm-fam-btn:hover { filter: brightness(1.2); }
.rm-fam-btn.is-danger { border-color: #8e4d36; color: #efb49d; }
.rm-fam-btn:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .45; }

.rm-fam-filters { gap: 7px; }
.rm-fam-filter-group { display: grid; gap: 3px; padding-bottom: 5px; border-bottom: 1px solid #3d2b16; }
.rm-fam-filter-group strong { color: #e7cb89; }
.rm-fam-filter-options { display: flex; flex-wrap: wrap; gap: 3px 7px; }
.rm-fam-filter-options label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; color: #d7ccb3; }
.rm-fam-filter-options input { margin: 0; accent-color: #bb8d32; }
.rm-fam-filters .rm-fam-btn { margin-top: 2px; }

.rm-fam-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; border: 1px solid #72501d; background: radial-gradient(ellipse, #2b1d0c, #100b07 70%); text-align: center; }
.rm-fam-empty img { width: 72px; height: 72px; opacity: .65; }
.rm-fam-empty strong { color: #f0c465; }
.rm-fam-empty span { max-width: 300px; color: #b8aa88; font-size: 12px; line-height: 1.4; }

.rm-fam-mount { flex: 1; display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 10px; min-height: 0; border: 1px solid #795520; background: #120d09; padding: 9px; }
.rm-fam-mount-preview { min-width: 0; }
.rm-fam-mount-stage { width: 100%; height: 210px; }
.rm-fam-mount-preview > strong { color: #f4d890; font-size: 15px; }
.rm-fam-mount-preview > span { margin: 4px 0 10px; color: #a99774; font-size: 11px; }
.rm-fam-mount-crop { position: relative; overflow: hidden; transform: scale(1.22); transform-origin: center; image-rendering: pixelated; }
.rm-fam-mount-crop img { position: absolute; max-width: none; }
.rm-fam-no-mount { width: 68px; height: 68px; border: 1px dashed #6f5224; border-radius: 50%; color: #806b44; font-size: 42px; line-height: 68px; text-align: center; }
.rm-fam-mount-detail { display: grid; align-content: start; gap: 6px; min-width: 0; }
.rm-fam-mount-note { margin: 3px 0; padding: 7px; border: 1px solid #493218; color: #aa9d7e; font-size: 10px; line-height: 1.35; }
.rm-fam-mount-detail .rm-fam-btn { margin-top: 4px; }

@media (max-width: 520px) {
  .rm-family-window.ui-frame { width: calc(100vw - 12px) !important; height: min(440px, calc(100vh - 12px)) !important; }
  .rm-family-window .ui-framewin-body { overflow: auto; }
  .rm-fam-layout, .rm-fam-mount { grid-template-columns: 1fr; }
  .rm-fam-content { min-height: 270px; }
}

.ui-settings-page { height: 400px; overflow-y: auto; scrollbar-width: thin; }
.ui-settings-game { display: grid; gap: 10px; }
.ui-setting-row { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #e8e2d0; cursor: pointer; }
.ui-setting-row input[type=range] { flex: 1; }
.ui-settings-keys { display: grid; gap: 4px; }
.ui-key-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 8px; background: rgba(255, 255, 255, .04); border-radius: 3px; font-size: 12.5px; }
.ui-key-btn { min-width: 110px; padding: 3px 8px; background: #0d0806; border: 1px solid #6b5230; border-radius: 3px; color: #ffe8a3; font: 700 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.ui-key-btn.is-listening { border-color: #ffd84a; color: #fff; background: #3a2812; }
.ui-win > .ui-select, .ui-win > .ui-input { position: absolute; box-sizing: border-box; }
.ui-setting-title { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(245, 196, 102, .25); color: #ffe8a3; font-weight: 700; font-size: 12.5px; }

/* ===== Pociones automáticas ===== */
.ui-ap-list { display: grid; gap: 4px; }
.ui-ap-row { position: relative; display: grid; grid-template-columns: 22px 38px 1fr auto; gap: 6px; align-items: center; height: 46px; padding: 2px 4px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 196, 102, .22); border-radius: 3px; }
.ui-ap-swap { display: grid; gap: 2px; }
.ui-ap-swap button { height: 18px; padding: 0; background: #0d0806; border: 1px solid #6b5230; border-radius: 2px; color: #ffe8a3; font-size: 9px; cursor: pointer; }
.ui-ap-cell { position: relative; width: 36px; height: 36px; }
.ui-ap-fields { display: grid; gap: 2px; font-size: 11.5px; color: #e8e2d0; }
.ui-ap-num { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.ui-ap-num input { width: 64px; background: #0d0806; border: 1px solid #6b5230; border-radius: 3px; color: #f3e7cf; padding: 1px 4px; font: 12px "Segoe UI", system-ui, sans-serif; }
.ui-ap-on { font-size: 11.5px; color: #e8e2d0; cursor: pointer; white-space: nowrap; }
.ui-bigmap-pick { width: 100%; margin: 2px 0 4px; box-sizing: border-box; }
.ui-mail-attach { display: grid; gap: 4px; font-size: 12px; color: #cfc7b0; }
.ui-mail-attach-cells { position: relative; height: 38px; }

/* Selector de idioma de la pantalla de acceso */
.lang-switch { position: absolute; top: 14px; right: 16px; z-index: 6; display: flex; gap: 4px; }
.lang-switch button { padding: 3px 8px; background: rgba(12, 8, 5, .7); border: 1px solid rgba(245, 196, 102, .5); border-radius: 3px; color: #e8e2d0; font: 700 12px "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.lang-switch button.is-active { background: #c79a4a; color: #1a1208; }
.stage:has(.brand.is-compact) .lang-switch { right: 200px; }
.stage:has(.hud:not([hidden])) .lang-switch { display: none; }

/* Reparación de equipo (win-repair.ts) */
.ui-repair-list { max-height: 260px; overflow-y: auto; padding: 6px; display: grid; gap: 3px; scrollbar-width: thin; }
.ui-repair-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(245, 196, 102, .22); border-radius: 3px; }
.ui-repair-name { flex: 1; font-size: 12.5px; }
.ui-repair-dura { color: #cfc6ad; font-size: 12px; min-width: 56px; text-align: right; }
.ui-repair-foot { display: grid; gap: 6px; padding: 6px; font-size: 12px; color: #d8d2c0; }
.ui-repair-foot label { display: flex; gap: 6px; align-items: flex-start; }

/* Buffs activos (win-buffs.ts), como BuffDialog */
.ui-buffs { position: absolute; right: 222px; top: 8px; display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: rgba(12, 8, 5, .6); border-radius: 3px; z-index: 8; }
.ui-buffs[hidden] { display: none; }
.ui-buff { position: relative; width: 24px; height: 24px; cursor: help; pointer-events: auto; }

/* Cuadro del monstruo objetivo (win-monster.ts), como MonsterDialog */
.ui-monster { position: absolute; left: 250px; top: 50px; width: 186px; padding: 5px; background: rgba(12, 8, 5, .55); border-radius: 3px; z-index: 8; color: #fff; font: 12px "Segoe UI", system-ui, sans-serif; pointer-events: auto; }
.ui-monster[hidden] { display: none; }
.ui-monster-level { position: absolute; left: 5px; top: 5px; width: 31px; height: 20px; line-height: 20px; text-align: center; background: #000; border: 1px solid #9a7a3d; }
.ui-monster-name { margin-left: 36px; height: 20px; line-height: 20px; text-align: center; background: #000; border: 1px solid #9a7a3d; white-space: nowrap; overflow: hidden; }
.ui-monster-bar { position: relative; margin: 7px 0 0 36px; width: 121px; height: 16px; background: #000; border: 1px solid #9a7a3d; box-sizing: content-box; }
.ui-monster-fill { position: absolute; left: 0; top: 2px; height: 12px; overflow: hidden; }
.ui-monster-hp { position: absolute; left: 41px; top: 31px; width: 121px; height: 18px; line-height: 18px; text-align: center; pointer-events: none; text-shadow: 0 0 2px #000; }
.ui-monster-expand { position: absolute; right: 4px; top: 30px; width: 18px; height: 18px; padding: 0; background: #2a1d12; color: #ffd27a; border: 1px solid #9a7a3d; font-size: 11px; cursor: pointer; }
.ui-monster-details { margin-top: 10px; padding: 5px; background: #000; border: 1px solid #9a7a3d; min-height: 60px; }
.ui-monster-row { margin-bottom: 3px; }
.ui-monster-resists { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-monster-resist { position: relative; display: flex; align-items: center; padding-left: 22px; min-height: 20px; }

/* Refinado (win-refine.ts) */
.ui-refine { display: grid; gap: 8px; padding: 8px; font-size: 12px; color: #d8d2c0; }
.ui-refine-head { color: #ffd27a; }
.ui-refine-group { border: 1px solid rgba(245, 196, 102, .25); border-radius: 3px; padding: 5px 7px; max-height: 96px; overflow-y: auto; scrollbar-width: thin; }
.ui-refine-title { font-weight: 700; margin-bottom: 3px; }
.ui-refine-pick { display: flex; gap: 6px; align-items: center; padding: 1px 0; }
.ui-refine-opts { display: flex; gap: 10px; }
.ui-refine-field { display: grid; gap: 2px; flex: 1; }
.ui-refine-info { color: #e8e2d0; }
.ui-refine-list { display: grid; gap: 4px; }
.ui-refine-row { display: flex; gap: 8px; align-items: center; padding: 3px 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(245, 196, 102, .22); border-radius: 3px; }
.ui-refine-name { min-width: 110px; }
.ui-refine-what { flex: 1; font-size: 11.5px; color: #cfc6ad; }
.ui-crafting { display: grid; gap: 8px; padding: 8px; font-size: 12px; color: #d8d2c0; overflow: auto; max-height: 390px; }
.ui-crafting-head, .ui-crafting-title { color: #ffd27a; font-weight: 700; }
.ui-crafting-list { display: grid; gap: 4px; max-height: 125px; overflow-y: auto; scrollbar-width: thin; }
.ui-crafting-row { display: flex; gap: 8px; align-items: center; padding: 3px 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(245,196,102,.22); border-radius: 3px; }
.ui-crafting-recipe { position: static; width: 205px; height: 24px; text-align: left; }
.ui-crafting-recipe.selected, .ui-crafting .selected { filter: brightness(1.35); border-color: #f5c466; }
.ui-crafting-meta { flex: 1; color: #cfc6ad; font-size: 11px; }
.ui-crafting-detail { display: grid; gap: 6px; border-top: 1px solid rgba(245,196,102,.25); padding-top: 7px; }
.ui-crafting-materials { display: grid; gap: 3px; }
.ui-crafting-material { color: #a9e6a1; }
.ui-crafting-material.missing { color: #ef9b8e; }

/* Temporizador del servidor (win-timer.ts) */
.ui-timer { position: absolute; left: 50%; top: 130px; height: 40px; transform: translateX(-50%); z-index: 8; pointer-events: none; }
.ui-timer[hidden] { display: none; }
.ui-timer-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 3px #000; }
.ui-grouploot-title { color: #f3deb0; text-align: center; font-weight: 700; margin: 2px 0 5px; }
.ui-grouploot-status { color: #cdbb97; text-align: center; min-height: 18px; font-size: 12px; }
.ui-grouploot-list { display: flex; flex-direction: column; gap: 5px; max-height: 245px; overflow: auto; }
.ui-grouploot-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 3px 5px; border: 1px solid rgba(154,122,61,.45); background: rgba(0,0,0,.28); }
.ui-grouploot-icon { width: 36px; height: 36px; object-fit: contain; flex: 0 0 36px; }
.ui-grouploot-item-name { flex: 1; color: #f3e7cf; text-align: left; }
.ui-grouploot-actions { display: flex; justify-content: center; gap: 8px; padding: 8px; }
.ui-progress { width: 520px; max-height: 640px; }
.ui-progress-tabs { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid rgba(218,170,70,.35); }
.ui-progress-body { max-height: 560px; overflow: auto; padding: 10px; color: #f3e1b0; font-size: 13px; }
.ui-progress-line { margin: 4px 0 10px; color: #ffe6a0; }
.ui-progress-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid rgba(218,170,70,.16); }
.ui-progress-row .ui-gold-btn { flex: 0 0 auto; position: static; padding: 3px 10px; }
.ui-hermit { width: 900px; height: 780px !important; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; background: radial-gradient(circle at 32% 42%, rgba(105, 94, 64, .25), transparent 42%), linear-gradient(135deg, #292a25, #131613 62%, #0b0d0d); border-color: #b8a66e; }
.ui-hermit-top { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid rgba(225, 204, 126, .35); color: #f1e3b1; font-size: 13px; background: rgba(9, 11, 10, .46); }
.ui-hermit-board { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; gap: 14px 10px; height: 430px; min-height: 0; padding: 20px 18px; background: radial-gradient(circle at center, rgba(111, 96, 48, .18), transparent 37%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 8px); overflow: auto; }
.ui-hermit-board::before, .ui-hermit-board::after { content: ''; position: absolute; pointer-events: none; background: rgba(212, 191, 115, .28); }
.ui-hermit-board::before { left: 9%; right: 9%; top: 50%; height: 1px; }
.ui-hermit-board::after { top: 10%; bottom: 10%; left: 50%; width: 1px; }
.ui-hermit-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 2px solid #d6c37d; border-radius: 50%; background: radial-gradient(circle, #4d4835, #151713 70%); box-shadow: 0 0 0 5px rgba(22, 22, 18, .85), 0 0 25px rgba(217, 194, 99, .35); color: #f9e7a7; font-size: 30px; }
.ui-hermit-branch { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; align-self: start; gap: 6px; padding: 7px 4px 9px; min-width: 0; border: 1px solid rgba(215, 194, 118, .2); background: rgba(7, 9, 8, .42); }
.ui-hermit-branch-title { color: var(--branch-colour, #e6d593); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.ui-hermit-node { width: 54px; height: 40px; border: 1px solid rgba(214, 195, 127, .46); background: linear-gradient(#292b27, #141714); color: #bcb8a1; font: 700 11px "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); transition: filter .12s ease, transform .12s ease, border-color .12s ease; }
.ui-hermit-node:hover { filter: brightness(1.25); transform: translateY(-1px); }
.ui-hermit-node.is-available { border-color: #e0c66e; color: #f8e9ad; box-shadow: 0 0 8px rgba(224, 198, 110, .32); }
.ui-hermit-node.is-learned { background: linear-gradient(#6c5c2d, #382f18); border-color: #f2d27b; color: #fff2bd; }
.ui-hermit-node.is-selected { outline: 2px solid #7fc7ea; outline-offset: 2px; }
.ui-hermit-detail { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; min-height: 128px; padding: 12px 18px; border-top: 1px solid rgba(225, 204, 126, .35); background: rgba(8, 9, 8, .58); color: #f1e4bb; }
.ui-hermit-detail-text { display: grid; gap: 5px; font-size: 12px; }
.ui-hermit-detail-text h3 { margin: 0; color: #f4dfa0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.ui-hermit-detail-text strong { color: #fff1bd; font-size: 17px; }
.ui-hermit-detail-text p { margin: 0; color: #c9c4af; }
.ui-hermit-learn { position: static; min-width: 132px; min-height: 42px; padding: 8px 16px; }
.ui-hermit-learn:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.3); }
.ui-hermit-footer { padding: 7px 12px; border-top: 1px solid rgba(225, 204, 126, .2); color: #a9a48f; text-align: center; font-size: 11px; }
@media (max-width: 720px) {
  .ui-hermit-board { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 520px; }
  .ui-hermit-detail { grid-template-columns: 1fr; }
  .ui-hermit-learn { justify-self: center; }
}
.ui-socket { width: 440px; }
.ui-socket-body { display: grid; gap: 8px; padding: 10px; color: #f3e1b0; }
.ui-socket-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; }
.ui-socket-row select { min-width: 0; background: #160e08; color: #f7e4b0; border: 1px solid #8c6b32; padding: 5px; }
.ui-socket-status { min-height: 24px; color: #ffd27a; }
.ui-advanced { display: grid; gap: 7px; padding: 8px; color: #f3e1b0; max-height: 360px; overflow: auto; }
.ui-advanced-heading { color: #ffd27a; font-weight: 700; text-align: center; border-bottom: 1px solid #75582d; padding-bottom: 4px; }
.ui-advanced-row { display: grid; grid-template-columns: 142px 1fr; gap: 8px; align-items: center; }
.ui-advanced-row label { color: #e8d39e; font-size: 12px; }
.ui-advanced-select, .ui-advanced-row select { min-width: 0; background: #160e08; color: #f7e4b0; border: 1px solid #8c6b32; padding: 4px; }
.ui-advanced-status { min-height: 30px; color: #ffd27a; font-size: 12px; text-align: center; }
.ui-advanced .ui-gold-btn { justify-self: center; min-width: 160px; }

/* Objeto bloqueado (UserItemFlags.Locked): candado dibujado en la esquina superior derecha de la celda. */
.ui-cell.locked::after { content: ''; position: absolute; right: 2px; top: 3px; width: 6px; height: 5px; background: #e8c34a; border: 1px solid #3a2a00; box-shadow: 0 0 2px #000; pointer-events: none; }
.ui-cell.locked::before { content: ''; position: absolute; right: 3px; top: 0; width: 4px; height: 4px; border: 1px solid #e8c34a; border-bottom: 0; border-radius: 3px 3px 0 0; pointer-events: none; z-index: 1; }
.ui-hidehelmet { display: flex; align-items: center; gap: 4px; color: #ffffb5; font-size: 11px; cursor: pointer; }
.ui-hidehelmet input { margin: 0; }

/* Filtros de recogida del compañero. */
.ui-comp-filters { margin-top: 8px; display: grid; gap: 4px; font-size: 11px; color: #e8dcc0; }
.ui-comp-filters-title { color: #ffe85a; font-weight: 700; }
.ui-comp-filter-row { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; }
.ui-comp-filter-row > span:first-child { color: #ffffb5; min-width: 44px; }
.ui-comp-filter-row label { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.ui-comp-filter-row input { margin: 0; }

.ui-economy-search .ui-gold-btn, .ui-economy-row .ui-gold-btn { position: static; padding: 4px 10px; }
.ui-comp-weight { font-size: 11px; color: #ffffb5; margin-top: 4px; }
.ui-progress-tabs .ui-gold-btn, .ui-advanced .ui-gold-btn { position: static; padding: 4px 10px; }

/* Almacén del gremio: rejilla de casillas igual que la del almacén personal. */
.ui-guild-grid { position: relative; margin: 6px auto; background: rgba(0, 0, 0, .25); border: 1px solid rgba(245, 196, 102, .25); }

/* Ventana de teletransporte grande (2026-11-05) */
.teleport-menu {
  width: min(820px, calc(100% - 28px));
  max-height: min(78vh, calc(100% - 40px));
}
.teleport-menu h2 { font-size: 1.08rem; letter-spacing: .08em; }
.teleport-tabs { gap: 4px; padding: .5rem .6rem 0; }
.teleport-tabs button { min-height: 42px; font-size: .86rem; }
.teleport-list { grid-template-columns: 1fr 1fr; gap: 4px; padding: .6rem .7rem .8rem; }
.teleport-note { grid-column: 1 / -1; font-size: .8rem; }
.teleport-row { min-height: 46px; padding: .5rem .7rem; font-size: .9rem; }
@media (max-width: 720px) {
  .teleport-list { grid-template-columns: 1fr; }
  .teleport-menu { width: calc(100% - 16px); max-height: calc(100% - 24px); }
}

/* ===== Ventana de personaje estilo Zentaur/Zircon ===== */
.rm-cw {
  position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 366px; max-height: min(560px, calc(100% - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #1b1208;
  border: 1px solid #7a5c26;
  box-shadow: 0 0 0 1px #2a1c0c, 0 0 0 3px #0d0904, 0 18px 42px rgba(0,0,0,.75);
  color: #e8d9b5; font-family: Georgia, "Times New Roman", serif;
}
.rm-cw[hidden] { display: none; }

.rm-cw-bar {
  display: flex; align-items: center; justify-content: center; position: relative;
  height: 34px; background: linear-gradient(180deg, #2a1b0c, #1a1108);
  border-bottom: 1px solid #6d5020;
}
.rm-cw-title { color: #f0c968; font: 700 1.05rem Georgia, serif; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.rm-cw-x {
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; padding: 0;
  background: transparent; border: 0; color: #b99a5c; font-size: 1rem; line-height: 1; cursor: pointer;
}
.rm-cw-x:hover { color: #ffd98a; }

.rm-cw-id {
  position: relative; margin: 7px 7px 0; padding: 8px 60px 10px 26px;
  background: linear-gradient(180deg, #2b1d0e, #1e1409);
  border: 1px solid #7a5c26; border-radius: 3px; text-align: center;
}
.rm-cw-heart { position: absolute; left: 8px; top: 10px; color: #c8341f; font-size: 1rem; }
.rm-cw-name { color: #fff; font: 700 1.02rem Georgia, serif; text-shadow: 0 1px 2px #000; }
.rm-cw-sub, .rm-cw-guild { color: #b5a07a; font-size: .76rem; margin-top: 2px; }
.rm-cw-portrait {
  position: absolute; right: 8px; top: 8px; width: 46px; height: 46px;
  background: radial-gradient(circle at 50% 45%, #8a3a12, #2a1206 70%);
  border: 1px solid #8a6a2f; border-radius: 2px;
}

.rm-cw-tabs { display: flex; gap: 3px; padding: 7px 7px 0; }
.rm-cw-tabs button {
  flex: 1; height: 26px; padding: 0 4px; cursor: pointer;
  background: linear-gradient(180deg, #3a2712, #241807);
  border: 1px solid #6d5020; border-radius: 3px 3px 0 0;
  color: #cbb488; font: 600 .78rem Georgia, serif;
}
.rm-cw-tabs button.is-on { background: linear-gradient(180deg, #6b5122, #4a3512); color: #ffe0a0; border-color: #c8a24a; }

.rm-cw-body { margin: 0 7px 7px; border: 1px solid #6d5020; background: #16100a; overflow: auto; }
.rm-cw-pane { padding: 8px; }

/* Equip: rejilla de huecos */
.rm-cw-slots {
  display: grid; grid-template-columns: repeat(5, 46px); grid-template-rows: repeat(4, 46px);
  gap: 6px; justify-content: center; padding: 6px 0;
}
.rm-cw-slot {
  position: relative; width: 46px; height: 46px; overflow: hidden;
  background: linear-gradient(180deg, #241907, #120c05);
  border: 1px solid #6d5020; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
}
.rm-cw-slot:hover { border-color: #c8a24a; }
.rm-cw-icon { display: block; transform-origin: center; }

/* Stats */
.rm-cw-row, .rm-cw-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-bottom: 1px solid #2a1d0d; font-size: .82rem; }
.rm-cw-row b, .rm-cw-line b { color: #ffd98a; font-weight: 600; }
.rm-cw-line { justify-content: flex-start; gap: 10px; }

/* Hermit */
.rm-cw-hermit-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 8px; }
.rm-cw-hermit-btns button {
  height: 26px; cursor: pointer; color: #e8d9b5; font: 600 .78rem Georgia, serif;
  background: linear-gradient(180deg, #3a2712, #241807); border: 1px solid #6d5020; border-radius: 2px;
}
.rm-cw-hermit-btns button:hover { border-color: #c8a24a; color: #ffe0a0; }

/* Alchemy */
.rm-cw-alq {
  display: grid; grid-template-columns: repeat(3, 54px); grid-template-rows: repeat(3, 54px);
  gap: 8px; justify-content: center; padding: 8px 0;
}
.rm-cw-alq-slot, .rm-cw-alq-center { width: 54px; height: 54px; border: 1px solid #6d5020; background: #120c05; }
.rm-cw-alq-center { background: radial-gradient(circle, #2a4a6a, #0b1420); border-color: #3f6a8a; }
.rm-cw-craft { text-align: center; color: #b5a07a; font-size: .78rem; padding-bottom: 4px; }

.rm-cw-doll {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(ellipse at 50% 85%, #3a2a12 0%, #140d06 70%);
  border: 1px solid #4a3512; border-radius: 2px; padding-bottom: 6px;
}
.rm-cw-doll span { color: #cbb488; font: 600 .72rem Georgia, serif; opacity: .8; }
.rm-cw-slots { grid-template-rows: repeat(5, 46px); }

/* Ajustes de la ventana de personaje */
.rm-cw { width: 384px; }
.rm-cw-slots { grid-template-columns: repeat(5, 48px); grid-template-rows: repeat(5, 48px); gap: 5px; }
.rm-cw-slot { width: 48px; height: 48px; }
.rm-cw-icon {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1.25);
  transform-origin: center;
}
.rm-cw-doll { min-height: 148px; }

/* Alquimia: arte real de Zentaur */
.rm-cw-alq-art {
  height: 300px; margin: 2px auto 6px;
  background: url(/assets/ui/alchemy-panel.png) center/contain no-repeat;
}
.rm-cw-alq { display: none; }

.rm-cw-figure {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  background-repeat: no-repeat; image-rendering: pixelated;
}
.rm-cw-check { display: inline-flex; align-items: center; gap: 4px; color: #b5a07a; font-size: .74rem; }
.rm-cw-check input { accent-color: #c8a24a; }

.rm-cw-armour { z-index: 2; }
.rm-cw-figure { z-index: 1; }
.rm-cw-portrait { background-size: cover; background-position: center; }

/* Pestañas al estilo Zentaur: tan claro con texto oscuro */
.rm-cw-tabs button {
  background: linear-gradient(180deg, #c9b287, #a8935f);
  border: 1px solid #6b5323; border-bottom: 0; border-radius: 4px 4px 0 0;
  color: #2a1a08; font-weight: 700; text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.rm-cw-tabs button:hover { background: linear-gradient(180deg, #ddc79a, #bfa76d); }
.rm-cw-tabs button.is-on {
  background: linear-gradient(180deg, #efe0b8, #d3bd88);
  color: #1b1004; border-color: #8a6a2f;
}

.rm-cw-weapon { z-index: 3; }

/* Muñeco: ancla y capas */
.rm-cw-anchor { position: absolute; left: 50%; bottom: 10px; width: 0; height: 0; }
.rm-cw-layer { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
.rm-cw-figure, .rm-cw-armour, .rm-cw-weapon { display: none; }

.rm-cw-anchor { bottom: 14px; }

/* Marco ornamentado y detalles finales */
.rm-cw {
  border: 2px solid #8a6a2f;
  box-shadow: inset 0 0 0 1px #1a1108, inset 0 0 0 3px #4a3512, 0 0 0 1px #0d0904, 0 18px 42px rgba(0,0,0,.75);
  border-radius: 3px;
}
.rm-cw-bar { background: linear-gradient(180deg, #33200c, #1e1409); }
.rm-cw-id { box-shadow: inset 0 0 0 1px #3a2712; }

.rm-cw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.rm-cw-col { display: block; }
.rm-cw-cols .rm-cw-row { padding: 3px 4px; font-size: .78rem; }

/* Altura estable entre pestanas */
.rm-cw-body { min-height: 292px; }
.rm-cw-pane[data-pane="equip"] { min-height: 290px; }

.rm-cw-rank { color: #8d7b58; font-size: .72rem; margin-top: 1px; }

/* Rejilla de equipo: 7x5 con los cuadrados en los bordes */
.rm-cw { width: 400px; }
.rm-cw-slots {
  grid-template-columns: repeat(7, 44px);
  grid-template-rows: repeat(5, 44px);
  gap: 4px;
  justify-content: center;
  padding: 4px 0;
}
.rm-cw-slot { width: 44px; height: 44px; }
.rm-cw-doll { min-height: 0; border: 0; background: radial-gradient(ellipse at 50% 88%, #2e2110 0%, #120c06 72%); }
.rm-cw-pane[data-pane="equip"] { min-height: 264px; }

.rm-cw-anchor { bottom: 8px; }

/* Rejilla a ras: sin huecos ni relleno, 7x6 */
.rm-cw { width: 404px; }
.rm-cw-pane[data-pane="equip"] { padding: 0; min-height: 0; }
.rm-cw-slots {
  grid-template-columns: repeat(7, 46px);
  grid-template-rows: repeat(6, 46px);
  gap: 0;
  padding: 0;
  justify-content: stretch;
}
.rm-cw-slot { width: 46px; height: 46px; border-radius: 0; border-width: 1px; }
.rm-cw-body { min-height: 0; }
.rm-cw-doll { min-height: 0; border: 0; }
.rm-cw-anchor { bottom: 6px; }

/* Reparto vertical de las columnas laterales */
.rm-cw-slots { grid-template-rows: repeat(6, 46px); }
.rm-cw-pane[data-pane="equip"] { padding: 0; }

/* Ojo del ranking */
.ui-rank-eye {
  width: 18px; height: 14px; margin-left: 6px; padding: 0; cursor: pointer;
  background: transparent; border: 0; position: relative; flex: 0 0 auto;
}
.ui-rank-eye::before {
  content: ""; position: absolute; left: 1px; top: 2px; width: 16px; height: 10px;
  border: 1px solid #d8c08a; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2a1c0a 0 2px, #f0d79a 3px 100%);
}
.ui-rank-eye.is-shut::before {
  border-color: #6b5a3a; border-radius: 2px; height: 2px; top: 6px;
  background: #6b5a3a; transform: rotate(-12deg);
}
.ui-rank-eye.is-open:hover::before { border-color: #ffe9b0; box-shadow: 0 0 4px #f0d79a; }

/* El muñeco se escala solo: el ancla ocupa la esquina del hueco */
.rm-cw-anchor {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: 0 0; bottom: auto;
}
.rm-cw-layer { position: absolute; }

/* El muñeco ocupa cinco filas */
.rm-cw-slots { grid-template-rows: repeat(6, 46px); }

/* Celdas algo mayores: el muñeco gana altura y se acerca a la referencia */
.rm-cw { width: 424px; }
.rm-cw-slots { grid-template-columns: repeat(7, 50px); grid-template-rows: repeat(6, 50px); }
.rm-cw-slot { width: 50px; height: 50px; }

/* ===== Ventana de personaje responsive =====
   La celda manda: todo (ventana, rejilla, huecos y muñeco) se deriva de ella.
   La celda se calcula con vmin, así que en pantallas pequeñas encoge sola. */
.rm-cw {
  --cell: clamp(30px, 4.3vmin, 52px);
  width: min(calc(var(--cell) * 7 + 26px), calc(100vw - 12px));
  max-height: calc(100vh - 12px);
}
.rm-cw-slots {
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows: repeat(6, var(--cell));
  justify-content: center;
}
.rm-cw-slot { width: var(--cell); height: var(--cell); }
.rm-cw-body { max-height: calc(100vh - 210px); overflow: auto; }

/* Tipografía y cabecera también a escala */
.rm-cw-title { font-size: clamp(.9rem, 2.1vmin, 1.1rem); }
.rm-cw-name { font-size: clamp(.85rem, 2vmin, 1.05rem); }
.rm-cw-sub, .rm-cw-guild, .rm-cw-rank { font-size: clamp(.62rem, 1.4vmin, .78rem); }
.rm-cw-tabs button { height: clamp(22px, 3.4vmin, 30px); font-size: clamp(.66rem, 1.6vmin, .86rem); }
.rm-cw-portrait { width: clamp(34px, 6vmin, 46px); height: clamp(34px, 6vmin, 46px); }

/* Pantallas muy bajas: la ventana se desplaza por dentro en vez de cortarse */
@media (max-height: 520px) {
  .rm-cw { max-height: calc(100vh - 8px); }
  .rm-cw-body { max-height: calc(100vh - 170px); }
}

/* ===== Ventana de personaje: tamaño fijo y encogido solo si no cabe =====
   En escritorio manda el tamaño de la referencia (424 px de ancho, celda de
   50 px). Solo cuando la pantalla es mas pequena que la ventana se reduce. */
.rm-cw {
  --cell: 50px;
  width: calc(var(--cell) * 7 + 26px);
  max-width: calc(100vw - 12px);
  max-height: calc(100vh - 12px);
}
.rm-cw-slots {
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows: repeat(6, var(--cell));
}
.rm-cw-slot { width: var(--cell); height: var(--cell); }
.rm-cw-body { max-height: calc(100vh - 200px); overflow: auto; }

/* Pantallas estrechas o bajas: todo se reduce de golpe con vmin */
@media (max-width: 470px), (max-height: 560px) {
  .rm-cw {
    --cell: clamp(30px, 7.2vmin, 46px);
    width: min(calc(var(--cell) * 7 + 22px), calc(100vw - 10px));
  }
  .rm-cw-title { font-size: clamp(.85rem, 2.4vmin, 1.05rem); }
  .rm-cw-name { font-size: clamp(.8rem, 2.2vmin, 1rem); }
  .rm-cw-sub, .rm-cw-guild, .rm-cw-rank { font-size: clamp(.6rem, 1.6vmin, .76rem); }
  .rm-cw-tabs button { height: clamp(22px, 4vmin, 28px); font-size: clamp(.64rem, 1.9vmin, .82rem); }
  .rm-cw-portrait { width: clamp(30px, 7vmin, 44px); height: clamp(30px, 7vmin, 44px); }
}

/* ===== Ventana de teletransporte responsive ===== */
.teleport-menu {
  width: min(820px, calc(100vw - 16px));
  max-height: min(82vh, calc(100vh - 16px));
}
.teleport-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.teleport-row { min-height: clamp(34px, 5.2vh, 46px); font-size: clamp(.76rem, 1.6vh, .92rem); }
.teleport-tabs button { min-height: clamp(32px, 5vh, 42px); font-size: clamp(.72rem, 1.5vh, .86rem); }
@media (max-width: 780px) {
  .teleport-list { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {
  .teleport-menu { max-height: calc(100vh - 8px); }
  .teleport-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Sin barras de desplazamiento y sin ampliacion excesiva =====
   La ventana se dimensiona por su contenido: nada de scroll interno. En
   pantallas muy bajas se encoge la celda en vez de sacar barra. */
.rm-cw { max-height: none; }
.rm-cw-body { max-height: none; overflow: visible; }
@media (max-height: 540px) {
  .rm-cw { --cell: clamp(26px, 6.8vmin, 42px); }
}

/* Separacion entre huecos: que se lean como cuadrados, no como barras */
.rm-cw-slots { gap: 2px; }
.rm-cw-slot { border-color: #6d5020; background: linear-gradient(180deg, #2a1e0c, #140e06); }
.rm-cw-slot:hover { border-color: #c8a24a; }

/* ===== Escalado por altura de pantalla, como hace el juego =====
   El cliente dibuja su interfaz a 1024x768 y la escala con el alto de la
   ventana. La ventana de personaje hace lo mismo: la celda se calcula con vh,
   asi que a 1080p todo es ~1,4 veces mayor que a 768p. */
.rm-cw {
  --cell: clamp(34px, 6.5vh, 78px);
  width: calc(var(--cell) * 7 + 26px);
  max-width: calc(100vw - 12px);
}
.rm-cw-slots {
  grid-template-columns: repeat(7, var(--cell));
  grid-template-rows: repeat(6, var(--cell));
}
.rm-cw-slot { width: var(--cell); height: var(--cell); }

/* Tipografia en la misma proporcion */
.rm-cw-title { font-size: clamp(.95rem, 2.6vh, 1.45rem); }
.rm-cw-name { font-size: clamp(.9rem, 2.4vh, 1.35rem); }
.rm-cw-sub, .rm-cw-guild, .rm-cw-rank { font-size: clamp(.66rem, 1.7vh, 1rem); }
.rm-cw-tabs button { height: clamp(26px, 4vh, 42px); font-size: clamp(.7rem, 2vh, 1.1rem); }
.rm-cw-portrait { width: clamp(36px, 6.5vh, 64px); height: clamp(36px, 6.5vh, 64px); }
.rm-cw-row, .rm-cw-line { font-size: clamp(.72rem, 1.9vh, 1rem); }

/* Ventana mas contenida: el personaje llena su hueco sin tanto aire */
.rm-cw {
  --cell: clamp(44px, 4.6vh, 56px);
  width: calc(var(--cell) * 7 + 26px);
}
.rm-cw-title { font-size: clamp(.95rem, 2vh, 1.2rem); }
.rm-cw-name { font-size: clamp(.9rem, 1.9vh, 1.1rem); }
.rm-cw-sub, .rm-cw-guild, .rm-cw-rank { font-size: clamp(.66rem, 1.35vh, .85rem); }
.rm-cw-tabs button { height: clamp(26px, 3.2vh, 34px); font-size: clamp(.7rem, 1.6vh, .92rem); }
.rm-cw-portrait { width: clamp(36px, 5.2vh, 52px); height: clamp(36px, 5.2vh, 52px); }
.rm-cw-row, .rm-cw-line { font-size: clamp(.72rem, 1.5vh, .9rem); }

/* Icono tenue en los huecos vacios: indica que va ahi sin distraer */
.rm-cw-ghost {
  opacity: .22;
  filter: grayscale(1) brightness(1.6);
  pointer-events: none;
}
.rm-cw-slot:has(.rm-cw-ghost) { background: linear-gradient(180deg, #1d1509, #100b05); }

/* Fantasmas: algo mas visibles y sin recortarse */
.rm-cw-ghost {
  opacity: .3;
  filter: grayscale(1) brightness(1.5);
  transform: translate(-50%, -50%) scale(.92);
}

/* El tamano de los iconos lo calcula el JS; la clase solo aporta el centrado */
.rm-cw-icon { position: absolute; left: 50%; top: 50%; transform-origin: center; }
.rm-cw-ghost { opacity: .3; filter: grayscale(1) brightness(1.5); pointer-events: none; }

/* ===== Inventario (diseño tipo cliente original de Mir) =====
   Panel de 255 x 512: cabecera, buscador, rejilla 6x8, barras de peso y
   ranuras, botón de ordenar, pestañas de filtrado y tabla de puntos. */
.ui-inv {
  width: 255px; height: 512px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px),
    #0e0906;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px #966e3c, inset 0 0 0 2px #2a1a0e, inset 0 0 0 3px #18110c, 0 10px 26px rgba(0, 0, 0, .65);
  color: #eed8ac;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  filter: url(#rm-pixel);
  image-rendering: pixelated;
}
.ui-inv .ui-inv-go, .ui-inv .ui-inv-tab, .ui-inv .ui-inv-sort, .ui-inv .ui-inv-stat span, .ui-inv .ui-inv-stat b, .ui-inv .ui-inv-bar span, .ui-inv .ui-count, .ui-inv .ui-inv-input { text-shadow: 1px 1px 0 #000; }
.ui-inv * { box-sizing: border-box; }

.ui-inv-head { position: absolute; left: 0; top: 0; width: 100%; height: 41px; }
.ui-inv-title {
  position: absolute; left: 0; top: 5px; width: 100%; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font: 700 24px/30px Tahoma, "Segoe UI", sans-serif; letter-spacing: .02em;
  pointer-events: none;
  background: linear-gradient(#ffe3a0 8%, #e8b45c 46%, #a87420 74%, #f0c06a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
}
.ui-inv-close {
  position: absolute; right: 8px; top: 8px; width: 22px; height: 22px;
  padding: 0; background: transparent; border: 1px solid #966e3c; border-radius: 2px;
  color: transparent; font: 700 14px/1 "Segoe UI", sans-serif; cursor: pointer;
  box-shadow: inset 0 0 0 1px #2d1d0f; text-shadow: none;
}
.ui-inv-close:hover { background: #2a1c10; color: #ffe8b0; }
.ui-inv-close::before, .ui-inv-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 12px; background: #e8c07a; transform: translate(-50%, -50%) rotate(45deg); }
.ui-inv-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ui-inv-close:hover::before, .ui-inv-close:hover::after { background: #ffe8b0; }
.ui-inv-rule { position: absolute; left: 4px; right: 4px; top: 41px; height: 1px; background: #966e3c; box-shadow: 0 1px 0 #000; pointer-events: none; }

.ui-inv-search { position: absolute; left: 5px; top: 45px; width: 245px; height: 18px; }
.ui-inv-input {
  position: absolute; left: 0; top: 0; width: 160px; height: 18px; margin: 0;
  padding: 0 6px; background: #1a110c; border: 1px solid #6b4e2a; border-radius: 1px;
  color: #f3e7cf; font: 12px/16px "Segoe UI", Tahoma, sans-serif; outline: none;
}
.ui-inv-input::placeholder { color: #8d7552; }
.ui-inv-input:focus { border-color: #b08a52; box-shadow: inset 0 0 0 1px rgba(240, 200, 120, .18); }
.ui-inv-go {
  position: absolute; left: 165px; top: 0; width: 81px; height: 18px; padding: 0;
  background: linear-gradient(#2a1d12, #171008); border: 1px solid #a07a46; border-radius: 9px;
  color: #f3e2bb; font: 12px/16px "Segoe UI", Tahoma, sans-serif; cursor: pointer;
}
.ui-inv-go:hover { border-color: #d4aa64; color: #fff0cc; }

.ui-inv-gridwrap { position: absolute; left: 5px; top: 65px; width: 223px; height: 297px; }
.ui-inv-grid { position: absolute; left: 0; top: 0; width: 239px; height: 297px; background: #8f6938; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.ui-inv-grid::-webkit-scrollbar { width: 14px; }
.ui-inv-grid::-webkit-scrollbar-track { background: #120c09; border: 1px solid #a07a46; border-radius: 7px; }
.ui-inv-grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #f0c878, #c8933f 55%, #8a5c22); border: 2px solid #120c09; border-radius: 7px; }
@supports (-moz-appearance: none) { .ui-inv-grid { scrollbar-color: #c8933f #120c09; } }
.ui-inv .ui-inv-grid .ui-cell {
  width: 36px; height: 36px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 4px),
    linear-gradient(#2a1e13 0%, #21170e 55%, #180f09 100%);
  border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.ui-inv .ui-inv-grid .ui-cell:hover { outline: 1px solid rgba(245, 196, 102, .8); outline-offset: -1px; }
.ui-inv .ui-inv-grid .ui-cell.is-selected { box-shadow: inset 0 0 0 1px #b45cff, 0 0 0 1px #b45cff, 0 0 8px rgba(150, 40, 255, .55); }
.ui-inv .ui-inv-grid .ui-cell.is-filtered { filter: grayscale(.75) brightness(.5); }
.ui-inv .ui-inv-grid .ui-cell.is-sellable { outline: 1px solid rgba(120, 220, 120, .85); outline-offset: -1px; }
.ui-inv .ui-inv-grid .ui-cell.locked::after { right: auto; left: 2px; top: 3px; }
.ui-inv .ui-inv-grid .ui-cell.locked::before { right: auto; left: 3px; top: 0; }
.ui-inv .ui-count { right: 1px; bottom: 0; font: 700 12px/12px "Segoe UI", Tahoma, sans-serif; color: #ffe85a; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 0 0 2px #000; }

.ui-inv-scroll { display: none; } /* era una barra decorativa: no se movia y el inventario no tiene scroll (48 huecos a la vista) */
.ui-inv-thumb { position: absolute; left: 2px; right: 2px; top: 2px; height: 30%; border-radius: 5px; background: linear-gradient(#f0c878, #c8933f 55%, #8a5c22); }

.ui-inv-panel { position: absolute; left: 5px; top: 366px; width: 244px; height: 138px; border: 1px solid #966e3c; box-shadow: inset 0 0 0 1px #000; }
.ui-inv-bar { position: absolute; left: 5px; height: 16px; border: 1px solid #b08a52; border-radius: 3px; background: #0b0705; overflow: hidden; }
.ui-inv-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; border-radius: 2px; }
.ui-inv-bar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 "Segoe UI", Tahoma, sans-serif; color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  white-space: nowrap; pointer-events: none;
}
.ui-inv-weight { top: 5px; width: 178px; }
.ui-inv-weight i { width: 0%; background: linear-gradient(90deg, #6d006d, #8f008f 55%, #5c005c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.ui-inv-slots { top: 24px; width: 178px; }
.ui-inv-slots i { width: 0%; background: linear-gradient(90deg, #17382c, #2f7a60 55%, #3f8a6d 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.ui-inv-sort {
  position: absolute; right: 6px; top: 5px; width: 50px; height: 36px; padding: 0;
  background: linear-gradient(#2a1d12, #171008); border: 1px solid #b08a52; border-radius: 5px;
  color: #f3e2bb; font: 13px/1 "Segoe UI", Tahoma, sans-serif; cursor: pointer;
}
.ui-inv-sort:hover { border-color: #d4aa64; color: #fff0cc; }

.ui-inv-tabs { position: absolute; left: 10px; top: 408px; width: 233px; height: 19px; display: flex; gap: 3px; }
.ui-inv-tab {
  flex: 1 1 0; min-width: 0; padding: 0 2px; background: linear-gradient(#241a12, #150e09);
  border: 1px solid #684c2a; border-radius: 5px; color: #e6d2a8; font: 11px/17px "Segoe UI", Tahoma, sans-serif;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: clip;
}
.ui-inv-tab:hover { border-color: #a07a46; color: #fff0cc; }
.ui-inv-tab.is-active { border-color: #c39a5c; color: #ffe8b0; background: linear-gradient(#332313, #1d140c); }

.ui-inv-stats { position: absolute; left: 10px; top: 431px; width: 233px; }
.ui-inv-stat { display: flex; height: 15px; margin-bottom: 3px; }
.ui-inv-stat span, .ui-inv-stat b {
  display: flex; align-items: center; justify-content: center; height: 15px;
  background: #18110c; border: 1px solid #966e3c; color: #fff; font: 11.5px/15px "Segoe UI", Tahoma, sans-serif;
  white-space: nowrap; overflow: hidden;
}
.ui-inv-stat span { flex: 0 0 108px; margin-right: 3px; font-size: 10.5px; }
.ui-inv-stat b { flex: 1 1 auto; font-weight: 400; letter-spacing: .01em; }

@media (max-height: 560px) {
  .ui-inv { transform: scale(.86); transform-origin: top left; }
}

/* ===== Ventana de Exploracion (codex de cuevas, estilo Compendium de Zentaur) ===== */
.rm-cx {
  position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(928px, calc(100% - 20px)); height: min(470px, calc(100% - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #1b1208;
  border: 1px solid #7a5c26;
  box-shadow: 0 0 0 1px #2a1c0c, 0 0 0 3px #0d0904, 0 18px 42px rgba(0,0,0,.75);
  color: #e8d9b5; font-family: Georgia, "Times New Roman", serif;
}
.rm-cx[hidden] { display: none; }
.rm-cx-bar {
  flex: none; display: flex; align-items: center; justify-content: center; position: relative;
  height: 34px; background: linear-gradient(180deg, #2a1b0c, #1a1108); border-bottom: 1px solid #6d5020; cursor: move;
}
.rm-cx-title { color: #f0c968; font: 700 1.05rem Georgia, serif; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }
.rm-cx-x {
  position: absolute; right: 6px; top: 5px; width: 22px; height: 22px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid #8a6a2f; color: #d8c08a; font-size: .85rem; line-height: 1;
}
.rm-cx-x:hover { color: #ffd98a; border-color: #c8a24a; }
.rm-cx-main { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px; }

.rm-cx-side { flex: none; width: 120px; display: flex; flex-direction: column; gap: 6px; }
.rm-cx-tab {
  height: 30px; cursor: pointer; border-radius: 3px; color: #2a1a06; font: 600 .78rem Georgia, serif;
  background: linear-gradient(180deg, #d8b46a, #a77d34); border: 1px solid #f0d08a;
}
.rm-cx-summary { margin-top: 4px; padding: 6px; border: 1px solid #4a3512; background: #140d06; font-size: .72rem; line-height: 1.35; }
.rm-cx-summary:empty { display: none; }
.rm-cx-sum-title { color: #b5a07a; }
.rm-cx-sum-num { color: #ffd98a; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.rm-cx-sum-bonus { color: #7fe07f; }

.rm-cx-content { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid #6d5020; padding: 6px 8px 8px; background: #140d06; }
.rm-cx-filter { flex: none; display: flex; align-items: center; gap: 6px; color: #e8d9b5; font-size: .76rem; margin-bottom: 6px; cursor: pointer; }
.rm-cx-filter input { margin: 0; accent-color: #c8a24a; }
.rm-cx-panes { flex: 1; min-height: 0; display: flex; gap: 10px; }

.rm-cx-list {
  flex: none; width: 150px; overflow-y: auto; padding: 2px; border: 1px solid #966e3c; background: #18110c;
  scrollbar-width: thin; scrollbar-color: #c8a24a #18110c;
}
.rm-cx-cat { color: #f0c968; font: 700 .72rem Georgia, serif; padding: 5px 4px 2px; border-bottom: 1px solid #3a2a12; }
.rm-cx-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 4px;
  padding: 2px 4px; background: transparent; border: 0; cursor: pointer; text-align: left;
  color: #d9a85a; font: .74rem Georgia, serif;
}
.rm-cx-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cx-item small { flex: none; color: #9a8762; font-size: .68rem; }
.rm-cx-item:hover { background: #2c1f0e; }
.rm-cx-item.is-on { background: #785c32; color: #fff2cc; }
.rm-cx-item.is-done { color: #7fd07f; }
.rm-cx-item.is-done small { color: #7fd07f; }
.rm-cx-empty { color: #9a8762; font-size: .74rem; padding: 6px; }

.rm-cx-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-cx-head { flex: none; padding: 0 2px 6px; }
.rm-cx-head:empty { display: none; }
.rm-cx-head-name { color: #f0c968; font: 700 .95rem Georgia, serif; }
.rm-cx-head-name small { color: #9a8762; font-size: .72rem; font-weight: 400; margin-left: 4px; }
.rm-cx-head-bonus { color: #b5a07a; font-size: .74rem; margin-top: 2px; }
.rm-cx-head-bonus b { color: #ffd98a; font-weight: 600; }
.rm-cx-head-bonus.is-done b { color: #7fe07f; }

.rm-cx-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; padding: 2px 4px 2px 0;
  scrollbar-width: thin; scrollbar-color: #c8a24a #18110c;
}
.rm-cx-card { display: flex; flex-direction: column; gap: 2px; padding: 2px; border: 1px solid #966e3c; background: #18110c; }
.rm-cx-card:hover { background: #785c32; }
.rm-cx-pic { height: 104px; display: flex; align-items: center; justify-content: center; border: 1px solid #966e3c; background: #18110c; }
.rm-cx-pic canvas { width: 100%; height: 100%; object-fit: contain; }

.rm-cx-name {
  height: 24px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
  border: 1px solid #966e3c; color: #fff; font-size: .74rem; text-shadow: 0 1px 1px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-cx-bar-wrap {
  position: relative; height: 26px; border: 1px solid #966e3c; overflow: hidden;
  background: repeating-linear-gradient(135deg, #1a0b0b 0 3px, #2a0f0f 3px 6px);
}
.rm-cx-fill {
  position: absolute; left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); width: 0;
  border-radius: 0 12px 12px 0; background: linear-gradient(180deg, #e04a3a, #9a1c12 60%, #6a0f08);
}
.rm-cx-card.is-done .rm-cx-fill { background: linear-gradient(180deg, #39b54a, #137a22 60%, #0b5016); }
.rm-cx-bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cfe6ff; font: .74rem Georgia, serif; text-shadow: 0 0 2px #000, 0 1px 1px #000;
}
@media (max-width: 720px) {
  .rm-cx-side { display: none; }
  .rm-cx-list { width: 120px; }
}

/* Familiares: sprite propio, equipo, presets de filtros y aviso del NPC */
.rm-fam-sprite { width: 150px; height: 120px; image-rendering: pixelated; }
.rm-fam-companion-chip canvas { width: 100%; height: 100%; opacity: .55; image-rendering: pixelated; }
.rm-fam-companion-chip.is-on canvas { opacity: 1; }
.rm-fam-equip-panel { display: grid; justify-items: center; align-content: start; gap: 6px; }
.rm-fam-equip-panel h3 { margin: 0; color: #f1bf59; font-size: 14px; }
.rm-fam-equip-labels { display: grid; grid-template-columns: repeat(4, 41px); font-size: 9px; color: #d6c18f; text-align: center; }
.rm-fam-equip-grid { position: relative; width: 165px; height: 39px; box-sizing: border-box; background: #11100b; border: 1px solid #765520; }
.rm-fam-equip-grid .ui-cell { z-index: 1; background: rgba(8,8,6,.16); }
.rm-fam-equip-grid.is-inactive { opacity: .45; }
.rm-fam-filter-bar { display: flex; flex-wrap: wrap; gap: 3px; }
.rm-fam-filter-bar .rm-fam-btn { padding: 2px 6px; font-size: 10px; }
.rm-fam-btn:disabled { opacity: .45; cursor: not-allowed; }
.rm-fam-npc-hint { margin-top: 2px; color: #e2a35a; }
.ui-goods-row.is-locked { opacity: .6; }
.rm-fam-equip-grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(143,105,38,.52) 40px 41px); }

/* Monturas: establo, bolsa y armadura */
.rm-fam-mount-list { display: grid; gap: 3px; margin-top: 6px; max-height: 120px; overflow-y: auto; }
.rm-fam-mount-row { text-align: left; padding: 3px 6px; font-size: 11px; color: #e7d29e; background: #180f07; border: 1px solid #68481c; cursor: pointer; }
.rm-fam-mount-row.is-on { border-color: #f0c24d; box-shadow: inset 0 0 5px rgba(240,194,77,.45); }
.rm-fam-mount-row.is-active::after { content: " ●"; color: #64d87e; }
.rm-fam-mount-bag { position: relative; width: 223px; height: 149px; box-sizing: border-box; background: #11100b; border: 1px solid #765520; margin: 4px auto; }
.rm-fam-mount-bag::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 36px, rgba(143,105,38,.52) 36px 37px), repeating-linear-gradient(0deg, transparent 0 36px, rgba(143,105,38,.52) 36px 37px); }
.rm-fam-mount-bag .ui-cell, .rm-fam-armour-cell .ui-cell { z-index: 1; background: rgba(8,8,6,.16); }
.rm-fam-mount-armour { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; font-size: 10px; color: #d6c18f; }
.rm-fam-armour-cell { position: relative; width: 39px; height: 39px; box-sizing: border-box; background: #11100b; border: 1px solid #765520; }
.rm-fam-mount-detail { overflow-y: auto; min-height: 0; }

/* Exploracion: Logros y Mir Atlas */
.rm-cx-side .rm-cx-tab + .rm-cx-tab { margin-top: 4px; }
.rm-lg-rows { display: grid; gap: 6px; overflow-y: auto; padding: 6px; align-content: start; height: 100%; box-sizing: border-box; }
.rm-lg-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: #160f07; border: 1px solid #5a4018; }
.rm-lg-row.is-ready { border-color: #f0c24d; box-shadow: inset 0 0 6px rgba(240,194,77,.35); }
.rm-lg-row.is-done { opacity: .6; }
.rm-lg-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.rm-lg-text b { color: #f1d38a; font-size: 13px; }
.rm-lg-text small { color: #bba77a; font-size: 11px; }
.rm-lg-prize span:first-child { color: #d6c18f; }
.rm-lg-claim { padding: 6px 12px; background: linear-gradient(180deg, #c5ad7e, #9f8758); border: 1px solid #8c692a; color: #241506; cursor: pointer; font-weight: 600; }
.rm-lg-claim:disabled { opacity: .4; cursor: not-allowed; }
.rm-lg-state { color: #64d87e; font-size: 12px; }
.rm-lg-ready { color: #f0c24d; }
.rm-at-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; flex-wrap: wrap; }
.rm-at-tab { padding: 4px 10px; background: #1d140a; border: 1px solid #5a4018; color: #d6c18f; cursor: pointer; }
.rm-at-tab.is-on { background: linear-gradient(180deg, #c5ad7e, #9f8758); color: #241506; border-color: #8c692a; }
.rm-at-q { flex: 1; min-width: 140px; padding: 4px 6px; background: #0f0a05; border: 1px solid #5a4018; color: #f1e2b8; }
.rm-at-boss { color: #d6c18f; font-size: 12px; }
.rm-at-type { background: #0f0a05; border: 1px solid #5a4018; color: #f1e2b8; padding: 3px; }
.rm-at-detail { overflow-y: auto; padding: 8px; box-sizing: border-box; color: #e6d3a3; font-size: 12px; }
.rm-at-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rm-at-head b { display: block; color: #f1d38a; font-size: 15px; }
.rm-at-head small { color: #bba77a; }
.rm-at-head canvas { background: #0d0905; border: 1px solid #5a4018; image-rendering: pixelated; }
.rm-at-sec { margin: 4px 0; line-height: 1.5; }
.rm-at-sec > span:first-child { color: #d6c18f; }
.rm-at-ul { margin: 2px 0 6px; padding-left: 18px; columns: 2; }
.rm-at-ul small { color: #9c8a63; }
.rm-at-link { color: #8fc7ff; cursor: pointer; text-decoration: underline dotted; }
.rm-cx-pane-logros .rm-cx-right, .rm-cx-pane-atlas .rm-cx-right { min-height: 0; }

/* Objetivo de mapa (bajo el minimapa) */
.rm-obj { position: absolute; right: 8px; top: 268px; width: 196px; padding: 5px 7px; z-index: 40; pointer-events: none;
  background: rgba(14,9,4,.82); border: 1px solid #7a5a22; color: #e9d7a6; font-size: 11px; }
.rm-obj-title { color: #f1c75d; font-weight: 600; margin-bottom: 3px; }
.rm-obj-bar { position: relative; height: 14px; background: #241a0c; border: 1px solid #5a4018; }
.rm-obj-fill { height: 100%; background: linear-gradient(90deg, #b8862c, #e8b84a); }
.rm-obj.is-wait .rm-obj-fill { background: linear-gradient(90deg, #3f8c4a, #64d87e); }
.rm-obj-text { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; color: #fff; text-shadow: 0 1px 1px #000; }
.rm-obj-sub { margin-top: 3px; color: #c8b380; font-size: 10px; }
.rm-cx-content[hidden], .rm-at-boss[hidden], .rm-at-type[hidden], .rm-obj[hidden] { display: none !important; }
.rm-cx-pane-logros .rm-cx-list { width: 190px; flex: 0 0 190px; }
.rm-cx-pane-logros .rm-cx-right, .rm-cx-pane-atlas .rm-cx-right { flex: 1; min-width: 0; }
.rm-cx-pane-atlas .rm-cx-list { width: 240px; flex: 0 0 240px; }

/* Engastador al estilo Zentaur: taladrar, poner gema y quitar gemas en una ventana */
.ui-engaste { display: grid; gap: 8px; padding: 8px 10px 10px; color: #f3e1b0; }
.ui-engaste-tabs { display: flex; gap: 4px; }
.ui-engaste-tabs .ui-tab { flex: 1; }
.ui-engaste-panel { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 10px 10px; border: 1px solid #a07a32; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 170, 60, 0.16), transparent 70%), linear-gradient(#1d140b, #120b06);
  box-shadow: inset 0 0 0 1px rgba(255, 215, 130, 0.12), inset 0 0 18px rgba(0, 0, 0, 0.6); }
.ui-engaste-title { font-weight: 700; color: #ffd27a; letter-spacing: 0.04em; text-shadow: 0 0 6px rgba(255, 170, 60, 0.45); }
.ui-engaste-slot { display: grid; justify-items: center; gap: 4px; }
.ui-engaste-label { font-size: 12px; text-decoration: underline; color: #e9d3a0; }
.ui-engaste-cell { position: relative; width: 40px; height: 40px; cursor: pointer; border: 1px solid #c8a050; border-radius: 3px;
  background: linear-gradient(#2a1e13, #180f09); box-shadow: 0 0 8px rgba(255, 200, 110, 0.35); }
.ui-engaste-cell.is-ing { border-color: #ff9a2e; box-shadow: 0 0 8px rgba(255, 120, 50, 0.45); }
.ui-engaste-cell.is-focus { outline: 2px solid #ffe08a; outline-offset: 1px; }
.ui-engaste-cell .ui-sprite, .ui-engaste-pickcell .ui-sprite, .ui-engaste-buyicon .ui-sprite { position: absolute; }
.ui-engaste-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; line-height: 1; text-align: center; color: #8d7550; }
.ui-engaste-count { position: absolute; right: 2px; bottom: 0; font-size: 10px; color: #fff; text-shadow: 0 0 2px #000; }
.ui-engaste-name { font-size: 12px; max-width: 280px; text-align: center; }
.ui-engaste-holes { display: flex; gap: 6px; }
.ui-engaste-hole { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #5a4630; background: #0d0905; opacity: 0.6; }
.ui-engaste-hole.is-open { opacity: 1; border-color: #c8a050; box-shadow: inset 0 0 4px #000; }
.ui-engaste-hole.is-gem { opacity: 1; border-color: #ffd27a; background: radial-gradient(circle at 35% 35%, #ff9be0, #a01870); box-shadow: 0 0 5px rgba(255, 120, 200, 0.7); }
.ui-engaste-holes-text { font-size: 11px; color: #c9b083; }
.ui-engaste-arrow { font-size: 18px; color: #ffb547; line-height: 1; }
.ui-engaste-go { position: static; min-width: 150px; height: 26px; margin-top: 4px; padding: 0 12px; }
.ui-engaste-go:disabled { opacity: 0.45; cursor: default; }
.ui-engaste-msg { min-height: 30px; font-size: 12px; text-align: center; color: #c9b083; }
.ui-engaste-msg.is-ok { color: #8dff8d; }
.ui-engaste-msg.is-bad { color: #ff7a6a; }
.ui-engaste-subtitle { font-size: 12px; color: #ffd27a; margin-bottom: 4px; }
.ui-engaste-grid { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; max-height: 128px; overflow-y: auto; }
.ui-engaste-pickcell { position: relative; width: 40px; height: 40px; cursor: pointer; border: 1px solid #6a5230; border-radius: 3px; background: linear-gradient(#2a1e13, #180f09); }
.ui-engaste-pickcell:hover { border-color: #ffd27a; box-shadow: 0 0 6px rgba(255, 210, 120, 0.5); }
.ui-engaste-shop { display: grid; gap: 4px; }
.ui-engaste-buy { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 8px; padding: 2px 6px; cursor: pointer; text-align: left;
  color: #f3e1b0; background: #1a120a; border: 1px solid #5a4630; border-radius: 3px; }
.ui-engaste-buy:hover { border-color: #c8a050; }
.ui-engaste-buyicon { position: relative; width: 32px; height: 32px; }
.ui-engaste-buycost { color: #ffd27a; }
.ui-engaste-buycost.is-short { color: #ff7a6a; }
.ui-engaste-rar { margin: 2px 0 6px; }
.ui-engaste-buyname small { display: block; color: #9fd28a; font-size: 11px; }
/* Forja: piedra de refinado y fabricar armas */
.ui-forja-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 2px 8px; padding: 3px 4px; border-radius: 3px; }
.ui-forja-row.is-focus { background: rgba(200, 160, 80, .12); }
.ui-forja-label { color: #e8d3a0; font-size: 12px; }
.ui-forja-cells { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-start; }
.ui-forja-row { text-align: left; width: 100%; box-sizing: border-box; justify-self: stretch; align-self: stretch; justify-items: start; }
.ui-forja-cell { width: 40px; height: 40px; cursor: pointer; margin: 0 !important; }
.ui-forja-label { text-align: left; }
.ui-forja-info { grid-column: 2; color: #9fd28a; font-size: 11px; min-height: 0; }
.ui-forja-gold { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 8px; margin-top: 6px; }
.ui-forja-gold input { background: #120d08; color: #ffd27a; border: 1px solid #6b5230; padding: 3px 6px; }
.ui-forja-chance { color: #ffd27a; text-align: center; margin: 6px 0 2px; }
.ui-forja-cls { margin: 6px 0 2px; }

/* Tooltip de objetos con el diseno de Zentaur (ItemLabelBuilder del cliente):
   fondo marron muy oscuro, borde dorado apagado, icono a la izquierda y secciones
   separadas por una linea fina. */
.ui-tooltip.zt { display: flex; align-items: stretch; gap: 6px; max-width: 340px; padding: 6px;
  background: rgba(18, 15, 8, .92); border: 1px solid #695f3e; border-radius: 0;
  font: 12px "Segoe UI", system-ui, sans-serif; line-height: 1.38; color: #ffffff; }
/* El display:flex de arriba gana a .ui-tooltip[hidden] (misma especificidad y va despues),
   asi que al ocultar la ventana de un objeto se quedaba abierta la ultima. */
.ui-tooltip.zt[hidden] { display: none; }
.ui-tooltip.zt .zt-icon { flex: 0 0 auto; min-width: 46px; display: flex; align-items: center; justify-content: center; }
.ui-tooltip.zt .zt-icon .ui-sprite { position: relative !important; left: 0 !important; top: 0 !important; }
.ui-tooltip.zt .zt-body { flex: 1 1 auto; min-width: 180px; }
.ui-tooltip.zt .zt-sec { padding: 0 4px; white-space: pre-wrap; }
.ui-tooltip.zt .zt-sec + .zt-sec { margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(99, 83, 50, .49); }
.ui-tooltip.zt .zt-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 13px; }
.ui-tooltip.zt .zt-rar { font-weight: 600; font-size: 12px; }