/* Aventura del Monte a pantalla completa (/rpg/jugar): pantalla de título, mundo con HUD, diálogos y combate. */

.rpg-game-body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #2c4a24 0%, #14200f 70%, #0b1208 100%);
  -webkit-tap-highlight-color: transparent;
}
.game { position: fixed; inset: 0; font-family: 'Segoe UI', system-ui, sans-serif; color: #f4ecd6; user-select: none; -webkit-user-select: none; }
.game [hidden] { display: none !important; }

/* Marco de madera con filo dorado: el «estilo juego» de todos los paneles. */
.g-frame {
  background: linear-gradient(180deg, rgba(58, 40, 24, .96), rgba(36, 24, 14, .96));
  border: 2px solid #c99a3f; border-radius: 12px;
  box-shadow: 0 0 0 2px #3a2614, 0 10px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .25);
}
.g-btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 700; color: #f4ecd6; padding: 10px 18px; border-radius: 10px;
  background: linear-gradient(180deg, #6b4a2b, #4a3220); border: 2px solid #8a6a3a; box-shadow: 0 3px 0 #2a1a0c;
  transition: transform .08s, filter .15s;
}
.g-btn:hover { filter: brightness(1.12); }
.g-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2a1a0c; }
.g-btn:disabled { opacity: .5; cursor: default; }
.g-btn.gold { background: linear-gradient(180deg, #f2c94c, #c99a3f); border-color: #ffe28a; color: #2a1a08; box-shadow: 0 3px 0 #7a5a1a; }
.g-btn.ghost { background: transparent; border-color: rgba(201, 154, 63, .5); box-shadow: none; }
.g-btn.small { padding: 6px 12px; font-size: 13px; }

/* ------------------------------------------------------------ pantalla de título */
.title-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 220, 140, .18), transparent 60%);
  overflow: auto;
}
.game-logo {
  margin: 0; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(34px, 7vw, 64px); line-height: 1;
  color: #ffd76a; letter-spacing: 1px;
  text-shadow: 0 2px 0 #8a5a1a, 0 4px 0 #5a3a0a, 0 10px 24px rgba(0, 0, 0, .7);
}
.game-logo span { display: block; font-size: .55em; color: #f4ecd6; text-shadow: 0 2px 0 #3a2614, 0 6px 14px rgba(0, 0, 0, .6); }
.title-sub { margin: 0; color: #d9c9a0; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; }
.title-pjs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; }
.title-pj {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 170px; padding: 12px 10px 14px; cursor: pointer;
  color: #f4ecd6; font: inherit; transition: transform .15s;
}
.title-pj:hover { transform: translateY(-4px); }
.title-pj strong { font-size: 16px; }
.title-pj small { color: #d9c9a0; }
.tp-fig { height: 118px; display: flex; align-items: flex-end; justify-content: center; }
.tp-fig canvas { max-height: 118px; width: auto !important; height: auto !important; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
.title-empty { color: #d9c9a0; text-align: center; max-width: 360px; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ------------------------------------------------------------ mundo y HUD */
.world, .world-stage { position: absolute; inset: 0; }
.world-stage canvas { display: block; }

.hud-pj { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; max-width: calc(100vw - 24px); }
.hp-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #4a6a3a, #23331a); border: 2px solid #c99a3f; flex: none; }
.hp-face canvas { display: block; margin: -6px auto 0; }
.hp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-info strong { font-size: 15px; }
.hp-info span { font-size: 12px; color: #d9c9a0; }
.xp-bar { position: relative; width: 190px; max-width: 46vw; height: 12px; border-radius: 6px; background: #1a120a; border: 1px solid #000; overflow: hidden; }
.xp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#b48cff, #7a4fd6); }
.xp-bar em { position: relative; display: block; font-style: normal; font-size: 9px; line-height: 12px; text-align: center; text-shadow: 0 1px 1px #000; }

.hud-map {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 99px;
  font-family: Georgia, serif; font-size: 16px; color: #ffe9a8; background: rgba(20, 14, 6, .65); border: 1px solid rgba(201, 154, 63, .6);
  text-shadow: 0 2px 4px #000; white-space: nowrap; pointer-events: none;
}
.hud-quests { position: absolute; top: 74px; right: 12px; width: 240px; padding: 10px 12px; font-size: 13px; }
.hud-quests h3 { margin: 0 0 6px; font-size: 14px; color: #ffd76a; }
.hq { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid rgba(201, 154, 63, .25); }
.hq span { color: #d9c9a0; font-size: 12px; }
.hq.ready span { color: #8ef06a; font-weight: 700; }

.hud-menu { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hud-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 70px; padding: 8px 4px 6px; cursor: pointer;
  color: #f4ecd6; text-decoration: none; font: inherit; border-radius: 12px;
  background: linear-gradient(180deg, rgba(74, 50, 30, .95), rgba(42, 28, 16, .95)); border: 2px solid #8a6a3a; box-shadow: 0 3px 0 #1a0f06;
}
.hud-btn:hover { border-color: #ffd76a; }
.hud-btn span { font-size: 24px; line-height: 1; }
.hud-btn small { font-size: 11px; color: #d9c9a0; }
.hud-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e0503a; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; line-height: 20px;
}

/* ------------------------------------------------------------ diálogo con NPC */
.dialog {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(720px, calc(100vw - 24px));
  display: flex; gap: 14px; padding: 14px; max-height: calc(100dvh - 200px); overflow: auto; user-select: text;
  animation: subir .25s ease-out;
}
@keyframes subir { from { opacity: 0; transform: translate(-50%, 20px); } }
.dl-face { flex: none; width: 92px; display: flex; align-items: flex-end; justify-content: center; }
.dl-face canvas { max-width: 92px; max-height: 130px; width: auto !important; height: auto !important; }
.dl-main { flex: 1; min-width: 0; }
.dl-main h3 { margin: 0 0 6px; font-family: Georgia, serif; color: #ffd76a; font-size: 18px; }
.dl-main h3 small { font-family: 'Segoe UI', sans-serif; font-size: 12px; color: #d9c9a0; font-weight: 400; }
.dl-text { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.dl-quest { margin: 8px 0; padding: 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 63, .4); }
.dl-quest.done { opacity: .6; }
.dl-quest h4 { margin: 0 0 4px; color: #ffe9a8; }
.dl-quest p { margin: 0 0 6px; font-size: 14px; }
.dl-goal { color: #d9c9a0; font-size: 13px !important; }
.dl-face.lugar { font-size: 64px; line-height: 1; align-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.dl-quest.clase { border-color: rgba(79, 224, 200, .55); box-shadow: inset 3px 0 0 #4fe0c8; }
.g-escena { font-style: italic; color: #e8ddc0; }
.dl-state { font-size: 13px; color: #9fd3ff; font-weight: 700; }
.dl-state.done { color: #8ef06a; }
.dl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.dl-page { margin-right: auto; font-size: 12px; color: #a89870; }

/* ------------------------------------------------------------ ventanas */
.g-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 8, 3, .6); }
.g-modal-box { width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: aparecer .2s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: scale(.96); } }
.g-modal-box:has(.g-iframe) { width: min(1100px, 100%); height: calc(100dvh - 32px); }
.g-modal-box header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(201, 154, 63, .4); }
.g-modal-box h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; color: #ffd76a; }
.g-close { background: none; border: 0; color: #f4ecd6; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.g-modal-body { padding: 16px; overflow: auto; flex: 1; user-select: text; }
.g-modal-body p { line-height: 1.5; }
.g-modal-body:has(.g-iframe) { padding: 6px; }
.g-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.g-list { margin: 0; padding-left: 20px; line-height: 1.7; }
.g-iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; background: #1a2414; }
.tut-text { font-size: 16px; }
.tut-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.tut-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(201, 154, 63, .35); }
.tut-dots i.on { background: #ffd76a; }

/* Ayuda: menú y formulario de reportes o sugerencias */
.ayuda-menu { display: grid; gap: 10px; }
.ayuda-op {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(201, 154, 63, .45); background: rgba(255, 215, 106, .05);
  color: #f4ecd6; font: inherit; cursor: pointer;
}
.ayuda-op:hover { border-color: #ffd76a; background: rgba(255, 215, 106, .1); }
.ayuda-op span { grid-row: 1 / 3; font-size: 30px; text-align: center; }
.ayuda-op strong { font-size: 16px; color: #ffd76a; }
.ayuda-op small { color: #c9bc98; font-size: 13px; line-height: 1.35; }
.rep-intro { margin: 0 0 10px; font-size: 14px; color: #c9bc98; }
.rep-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rep-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.rep-tipo span {
  display: inline-block; padding: 6px 12px; border-radius: 99px; border: 1px solid rgba(201, 154, 63, .4);
  font-size: 14px; color: #c9bc98; cursor: pointer;
}
.rep-tipo input:checked + span { color: #2a1a08; background: linear-gradient(180deg, #f2c94c, #c99a3f); border-color: #ffe28a; font-weight: 700; }
.rep-tipo input:focus-visible + span { outline: 2px solid #ffd76a; outline-offset: 2px; }
.rep-form textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(201, 154, 63, .45); background: rgba(0, 0, 0, .3); color: #f4ecd6; font: inherit; font-size: 15px;
}
.rep-form textarea:focus { outline: none; border-color: #ffd76a; }
.rep-pie { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.rep-pie small { color: #a89870; }
.rep-error { margin: 8px 0 0; color: #f0a08f; font-size: 14px; }
.rep-h { margin: 18px 0 8px; font-family: Georgia, serif; font-size: 16px; color: #ffd76a; }
.rep-lista { display: grid; gap: 8px; }
.rep-vacio { margin: 0; color: #a89870; font-size: 14px; }
.rep-item { padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 63, .25); }
.rep-item p { margin: 6px 0 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rep-cab { display: flex; justify-content: space-between; font-size: 12px; color: #a89870; }
.rep-est { font-style: normal; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.rep-est.nuevo { color: #ffd76a; }
.rep-est.visto { color: #8fc7ff; }
.rep-est.resuelto { color: #8ef06a; }
.rep-resp { padding: 8px 10px; border-left: 3px solid #6fae4a; background: rgba(111, 174, 74, .1); border-radius: 0 8px 8px 0; }

/* ------------------------------------------------------------ avisos y carga */
.toasts { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  padding: 8px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; max-width: 90vw;
  background: rgba(20, 14, 6, .9); border: 1px solid #c99a3f; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  animation: aparecer .25s ease-out; transition: opacity .5s, transform .5s;
}
.toast.gold { background: linear-gradient(180deg, #f2c94c, #c99a3f); color: #2a1a08; font-size: 16px; }
.toast.bad { border-color: #e0503a; }
.toast.out { opacity: 0; transform: translateY(-10px); }
.g-loading { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 3, .45); }
.g-loading span { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 215, 106, .25); border-top-color: #ffd76a; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ combate dentro del juego */
.game-fight-wrap { position: absolute; inset: 0; pointer-events: none; }
.game-fight { position: absolute; inset: 0; pointer-events: auto; padding: 10px; overflow: auto; background: radial-gradient(ellipse at 50% 40%, #2c4a24, #0e170a 80%); }
.game-fight .unit-card, .game-fight .rpg-panel, .game-fight .fight-bar {
  background: linear-gradient(180deg, rgba(58, 40, 24, .95), rgba(36, 24, 14, .95)); border: 2px solid #8a6a3a; color: #f4ecd6;
}
.game-fight .stage-box { border: 2px solid #8a6a3a; }
.game-fight .rpg-panel h3 { color: #ffd76a; }
.game-fight .fight-main { grid-template-columns: minmax(0, 1fr) 260px; }
.game-fight .fr-box { background: linear-gradient(180deg, #3a2818, #24180e); border: 2px solid #ffd76a; color: #f4ecd6; }
.fight-tips { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 24px)); padding: 16px 18px; z-index: 5; }
.fight-tips h3 { margin: 0 0 8px; color: #ffd76a; font-family: Georgia, serif; }
.fight-tips ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.55; font-size: 14px; }

/* ------------------------------------------------------------ chat */
.chat {
  position: absolute; left: 12px; bottom: 84px; z-index: 25; width: min(340px, calc(100vw - 24px)); height: 260px;
  display: flex; flex-direction: column; padding: 0; overflow: hidden; user-select: text;
  background: linear-gradient(180deg, rgba(36, 24, 14, .9), rgba(24, 16, 8, .92));
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 12px; border-bottom: 1px solid rgba(201, 154, 63, .35); }
.chat-head strong { font-size: 13px; color: #ffd76a; }
.chat-head small { color: #d9c9a0; font-weight: 400; }
.chat-head .g-close { font-size: 14px; }
.chat-list { flex: 1; list-style: none; margin: 0; padding: 6px 10px; overflow-y: auto; font-size: 13px; line-height: 1.4; }
.cm { padding: 1px 0; overflow-wrap: anywhere; }
.cm time { color: #8a7a5a; font-size: 11px; }
.cm b, .cm-name { color: #ffe9a8; font-weight: 700; }
.cm-name { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.cm-name:hover { text-decoration: underline; }
.cm.whisper { color: #e3b8ff; }
.cm.whisper .cm-name { color: #d48cff; }
.cm.mine b { color: #b8f59a; }
.chat-form { display: flex; align-items: center; gap: 6px; padding: 6px; border-top: 1px solid rgba(201, 154, 63, .35); flex-wrap: wrap; }
.chat-form input {
  flex: 1; min-width: 0; padding: 7px 9px; border-radius: 8px; border: 1px solid #6b4a2b; background: rgba(0, 0, 0, .35); color: #f4ecd6; font: inherit; font-size: 13px;
}
.chat-form input:focus { outline: none; border-color: #ffd76a; }
.chat-to { flex: 1 1 100%; font-size: 12px; color: #e3b8ff; }
.chat-to button { background: none; border: 0; color: #e3b8ff; cursor: pointer; }
.chat-open {
  position: absolute; left: 12px; bottom: 14px; z-index: 25; width: 54px; height: 54px; border-radius: 50%; font-size: 24px; cursor: pointer;
  background: linear-gradient(180deg, #6b4a2b, #4a3220); border: 2px solid #c99a3f; box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.chat-open .hud-badge { top: -4px; right: -4px; }
/* En combate el chat va a la esquina inferior derecha, lejos del tablero y de la barra de hechizos. */
.game:has(.game-fight:not([hidden])) .chat { left: auto; right: 12px; bottom: 12px; height: 210px; width: min(300px, calc(100vw - 24px)); }
.game:has(.game-fight:not([hidden])) .chat-open { left: 50%; bottom: auto; top: 100px; transform: translateX(-50%); width: 40px; height: 40px; font-size: 18px; }

/* ------------------------------------------------------------ duelos */
.reto-espera {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px; font-size: 14px; white-space: nowrap;
}
.re-pulse { display: inline-block; animation: latir 1s ease-in-out infinite; }
@keyframes latir { 50% { transform: scale(1.25); } }
.duel-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 215, 106, .12); border: 1px solid #c99a3f; }
.duel-h { margin: 18px 0 8px; font-family: Georgia, serif; color: #ffd76a; font-size: 16px; }
.duel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.duel-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 63, .35); }
.duel-list small { color: #a89870; }
.duel-empty, .duel-note { color: #d9c9a0; font-size: 14px; }

/* ------------------------------------------------------------ gestos y jefe de mundo */
.gestos-bar { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); z-index: 22; display: flex; gap: 4px; padding: 6px; }
.gestos-bar button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(201, 154, 63, .4); background: rgba(0, 0, 0, .25); font-size: 22px; cursor: pointer; }
.gestos-bar button:hover { border-color: #ffd76a; transform: translateY(-2px); }
.hud-jefe {
  display: flex; align-items: center; gap: 8px; margin-left: 12px;
  padding: 4px 12px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12px; color: #ffe9a8; white-space: nowrap;
  background: rgba(40, 14, 8, .78); border: 1px solid rgba(224, 80, 58, .6);
}
.hud-jefe small { color: #d9c9a0; }
.hj-bar { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: #1a1a1a; overflow: hidden; }
.hj-bar i { display: block; height: 100%; background: linear-gradient(#ff7a5a, #c1503a); }
.boss-bar { position: relative; height: 22px; border-radius: 8px; background: #1a120a; border: 1px solid #000; overflow: hidden; margin-bottom: 6px; }
.boss-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff7a5a, #a8442f); transition: width .4s; }
.boss-bar em { position: relative; display: block; text-align: center; font-style: normal; font-weight: 700; line-height: 22px; text-shadow: 0 1px 2px #000; }
.boss-meta { color: #d9c9a0; font-size: 13px; margin: 0 0 8px; }
.boss-actions { justify-content: flex-start; flex-wrap: wrap; }

/* ------------------------------------------------------------ mapa del mundo (🗺️) */
.mapa-box { width: min(1180px, 100%); height: calc(100dvh - 32px); }
.mapa-box header { gap: 12px; }
.mapa-tabs { display: flex; gap: 4px; margin-left: auto; }
.mapa-tabs button { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(201, 154, 63, .5); background: transparent; color: #f4ecd6; font: inherit; font-size: 13px; cursor: pointer; }
.mapa-tabs button.on { background: linear-gradient(180deg, #f2c94c, #c99a3f); color: #2a1a08; border-color: #ffe28a; font-weight: 700; }
.mapa-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.mapa-lienzo { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #2a3d22, #101a0c 80%); }
.mapa-lienzo canvas { display: block; cursor: pointer; }
.mapa-tip { position: absolute; z-index: 2; pointer-events: none; padding: 5px 9px; border-radius: 8px; font-size: 12px; background: rgba(20, 14, 6, .92); border: 1px solid #c99a3f; max-width: 260px; white-space: pre-line; }
.mapa-lienzo.mundo { background: #120c06; }
.mapa-lado { overflow-y: auto; padding: 12px; border-left: 1px solid rgba(201, 154, 63, .35); user-select: text; }
.mapa-lado h3 { margin: 0 0 8px; color: #ffd76a; font-family: Georgia, serif; }
.mo { padding: 9px; margin-bottom: 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 63, .35); display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.mo.on { border-color: #ffd76a; box-shadow: inset 0 0 0 1px #ffd76a; }
.mo span { color: #e8dcc0; }
.mo small { color: #a89870; }
.mo-btns { display: flex; gap: 6px; margin-top: 4px; }
.mapa-leyenda { margin-top: 10px; font-size: 12px; color: #d9c9a0; line-height: 1.7; }
.mapa-leyenda .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #4fa3ff; border: 1px solid #fff; vertical-align: middle; }
.mapa-leyenda .flecha { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #ffd200; vertical-align: middle; }
.mapa-leyenda .zona-obj { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 211, 77, .35); border: 1.5px solid #ffd34d; vertical-align: middle; }
.mapa-leyenda .sig { color: #ffd200; font-family: Georgia, serif; font-size: 15px; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.mapa-nota { font-size: 12px; color: #a89870; }
.hq[data-mapa-mision] { cursor: pointer; }
.hq[data-mapa-mision]:hover strong { color: #ffd76a; }

/* ------------------------------------------------------------ móvil */
/* ------------------------------------------------------------ modo prueba (/rpg/prueba) y práctica en ⚔️ Duelos */
.prueba-aviso { max-width: 520px; padding: 12px 16px; text-align: center; color: #f4ecd6; border-color: #e0a040; }
.prueba-aviso strong { display: block; color: #ffd76a; font-size: 17px; margin-bottom: 4px; }
.prueba-aviso p { margin: 0; font-size: 14px; line-height: 1.45; }
.prueba-aviso a, .duel-prueba a { color: #ffd76a; font-weight: 700; }
.hud-prueba {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 99px; white-space: nowrap;
  font-size: 12px; color: #2a1a08; background: rgba(242, 201, 76, .92); border: 1px solid #ffe28a; text-decoration: none; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.hud-prueba u { font-weight: 700; }
.duel-prueba { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(242, 201, 76, .12); border: 1px dashed rgba(242, 201, 76, .6); color: #f4ecd6; font-size: 14px; }
.practica-box { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 154, 63, .35); }
.practica-box > p { margin: 0 0 8px; color: #d9c9a0; font-size: 14px; }
.practica-rivales { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.practica-rivales label { position: relative; cursor: pointer; }
.practica-rivales input { position: absolute; opacity: 0; pointer-events: none; }
.practica-rivales span {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; font-size: 13px; color: #f4ecd6;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 154, 63, .35); border-left: 4px solid var(--c, #c99a3f);
}
.practica-rivales input:checked + span { background: rgba(242, 201, 76, .22); border-color: #ffe28a; border-left-color: var(--c, #c99a3f); }
.practica-rivales input:focus-visible + span { outline: 2px solid #ffe28a; outline-offset: 1px; }
.practica-nivel { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 14px; color: #f4ecd6; }
.practica-nivel input { flex: 1; max-width: 260px; accent-color: #f2c94c; }

@media (max-width: 700px) {
  .mapa-cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 38%; }
  .mapa-lado { border-left: 0; border-top: 1px solid rgba(201, 154, 63, .35); }
  .mapa-tabs button { padding: 5px 8px; }
  .gestos-bar { bottom: 70px; flex-wrap: wrap; justify-content: center; width: calc(100vw - 24px); }
  .hud-jefe { font-size: 11px; margin-left: 6px; padding: 3px 8px; }
  .hud-jefe small { display: none; }
  .chat { left: 8px; bottom: 76px; height: 200px; width: calc(100vw - 16px); }
  .chat-open { left: 8px; bottom: 78px; width: 46px; height: 46px; font-size: 20px; }
  .reto-espera { top: 70px; font-size: 13px; }
  .hud-pj { padding: 6px 10px 6px 6px; }
  .xp-bar { width: 130px; }
  .hud-map { top: auto; bottom: 86px; font-size: 13px; }
  .hud-prueba { top: 88px; left: 12px; transform: none; font-size: 11px; }
  .hud-quests { top: auto; bottom: 120px; right: 8px; width: 200px; font-size: 12px; }
  .hud-menu { bottom: 8px; gap: 4px; }
  .hud-btn { width: 58px; padding: 6px 2px 4px; }
  .hud-btn span { font-size: 20px; }
  .dialog { bottom: 84px; flex-direction: column; align-items: center; }
  .dl-face { width: auto; }
  .game-fight .fight-main { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ pantallas bajas: móvil en horizontal (la app la abre así) */
@media (max-height: 520px) {
  .hud-pj { top: 6px; left: 6px; padding: 4px 10px 4px 4px; gap: 8px; }
  .hp-face { width: 36px; height: 36px; }
  .hp-info strong { font-size: 13px; }
  .hp-info span { font-size: 11px; }
  .xp-bar { width: 140px; height: 10px; }
  .xp-bar em { font-size: 8px; line-height: 10px; }
  .hud-map { top: 8px; bottom: auto; padding: 4px 14px; font-size: 13px; }
  .hud-prueba { top: 40px; font-size: 11px; padding: 2px 10px; }
  .hud-quests { top: 8px; bottom: auto; right: 8px; width: 210px; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 8px 10px; font-size: 12px; }
  .hud-quests h3 { font-size: 13px; margin-bottom: 4px; }
  .hud-menu { bottom: 6px; gap: 6px; left: auto; right: 8px; transform: none; }   /* a la derecha: a la izquierda va el chat */
  .hud-btn { width: 56px; padding: 4px 2px 3px; border-radius: 10px; }
  .hud-btn span { font-size: 18px; }
  .hud-btn small { font-size: 10px; }
  /* El chat queda entre la ficha (arriba) y la barra de botones (abajo), sin taparlas. */
  .chat { left: 6px; bottom: 6px; width: min(290px, 34vw); height: calc(100dvh - 70px); max-height: 260px; }
  .chat-list { font-size: 12px; }
  .chat-open { left: 6px; bottom: 6px; width: 44px; height: 44px; font-size: 20px; }
  .game:has(.game-fight:not([hidden])) .chat { height: min(180px, calc(100dvh - 24px)); width: min(260px, 32vw); }
  .gestos-bar { bottom: 62px; }
  .dialog { bottom: 62px; }

  /* Combate: todo cabe en una pantalla. Fichas compactas arriba, tablero y panel en medio (el tablero de Phaser
     se ajusta al alto que quede) y la barra de hechizos siempre visible abajo, sin desplazar la página. */
  .game-fight { display: flex; flex-direction: column; gap: 6px; padding: 6px; overflow: hidden; }
  .game-fight .fight-top { flex: none; gap: 6px; }
  .game-fight .unit-card { padding: 5px 8px; gap: 3px; }
  .game-fight .pj-av { width: 28px; height: 28px; font-size: 15px; }
  .game-fight .uc-name strong { font-size: 13px; }
  .game-fight .uc-name small { display: none; }
  .game-fight .hp { height: 14px; }
  .game-fight .hp em { line-height: 14px; font-size: 10px; }
  .game-fight .uc-stats { font-size: 11px; gap: 8px; }
  .game-fight .uc-states { min-height: 0; }
  .game-fight .turn-box { min-width: 90px; }
  .game-fight .turn-label { font-size: 14px; }
  .game-fight .fight-main { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 220px; gap: 6px; }
  .game-fight .stage-box, .game-fight .stage { height: 100%; min-height: 0; }
  .game-fight .fight-side { min-height: 0; }
  .game-fight .side-tabs { min-height: 0; padding-top: 4px; }
  .game-fight .spell-info, .game-fight .fight-log ol { font-size: 12px; }
  .game-fight .fight-bar { flex: none; flex-wrap: nowrap; gap: 8px; padding: 5px 8px; }
  .game-fight .spellbar { flex-wrap: nowrap; overflow-x: auto; }
  .game-fight .sb-spell { flex: none; width: 42px; height: 42px; font-size: 20px; }
  .game-fight .res-box { font-size: 13px; gap: 8px; }
  .game:has(.game-fight:not([hidden])) .chat-open { top: auto; left: auto; right: 16px; bottom: 66px; transform: none; }
  .fight-tips { max-height: calc(100% - 12px); overflow-y: auto; padding: 10px 14px; }
  .fight-tips ol { font-size: 13px; line-height: 1.4; }
}