/* ─── Reset & base ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  font-family: 'Courier New', monospace;
  color: #e8d5a3;
  touch-action: none;
  user-select: none;
}

#gameContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Utility ─── */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════
   TITLE SCREEN
══════════════════════════════════════════════ */
#titleScreen {
  position: absolute;
  inset: 0;
  background: #080510;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  overflow: hidden;
}
#titleBg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.45;
  pointer-events: none;
}
#titleFog {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(5,2,20,0.3) 0%, rgba(5,2,20,0.75) 100%);
  pointer-events: none;
}
#titleStars {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.title-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vmin, 22px);
}
.title-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.title-ao {
  font-size: clamp(64px, 16vmin, 130px);
  font-weight: bold;
  font-family: Georgia, serif;
  color: #ffd700;
  text-shadow: 0 0 20px #ffd700, 0 0 50px #cc8800, 0 0 100px #664400, 0 4px 8px rgba(0,0,0,0.8);
  letter-spacing: clamp(10px, 3vmin, 24px);
}
.title-legado {
  font-size: clamp(14px, 3.2vmin, 26px);
  color: #c8a84a;
  letter-spacing: clamp(6px, 2.5vmin, 18px);
  text-transform: uppercase;
  margin-top: clamp(2px, 0.5vmin, 6px);
  opacity: 0.9;
}
.title-ornament { color: #c8a84a; font-size: clamp(18px, 4vmin, 32px); opacity: 0.6; line-height: 1; }
.title-buttons {
  display: flex; flex-direction: column;
  gap: clamp(10px, 2.2vmin, 18px);
  align-items: center; width: 100%;
}
.title-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2vmin, 16px);
  min-width: clamp(220px, 55vw, 360px);
  padding: clamp(13px, 2.5vmin, 20px) clamp(24px, 5vw, 44px);
  border-radius: 14px;
  font-family: inherit;
  font-size: clamp(14px, 2.8vmin, 20px);
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
  overflow: hidden;
}
.title-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none; border-radius: inherit;
}
.title-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); }
.title-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.title-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.title-btn-primary {
  background: linear-gradient(135deg, #5a2e00 0%, #9a5200 35%, #c06800 50%, #9a5200 65%, #5a2e00 100%);
  border: 2px solid #d4a017;
  color: #fff8e0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  box-shadow: 0 4px 24px rgba(180,100,0,0.45), inset 0 1px 0 rgba(255,220,100,0.25);
}
.title-btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(220,140,0,0.6), inset 0 1px 0 rgba(255,220,100,0.35);
  border-color: #ffd700; filter: brightness(1.1);
}
.title-btn-secondary {
  background: linear-gradient(135deg, #0e0830 0%, #1e1450 35%, #2a1c6a 50%, #1e1450 65%, #0e0830 100%);
  border: 2px solid rgba(160,130,220,0.5);
  color: #c8b8f0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  box-shadow: 0 4px 20px rgba(80,40,160,0.3), inset 0 1px 0 rgba(200,180,255,0.1);
}
.title-btn-secondary:hover:not(:disabled) {
  box-shadow: 0 8px 28px rgba(120,80,220,0.45), inset 0 1px 0 rgba(200,180,255,0.2);
  border-color: rgba(200,170,255,0.8); filter: brightness(1.12);
}
.title-btn-secondary em { font-style: normal; color: #ffd700; }
.save-tag {
  display: inline-block;
  margin-left: 8px;
  background: rgba(255,200,0,0.15);
  border: 1px solid rgba(255,200,0,0.4);
  border-radius: 6px;
  color: #ffd700;
  font-size: 0.75em;
  padding: 1px 8px;
  letter-spacing: 1px;
  vertical-align: middle;
  opacity: 0.9;
}
.title-btn-icon { font-size: 1.1em; flex-shrink: 0; }
.title-btn-text { flex: 1; text-align: center; }
.title-version { color: rgba(120,100,60,0.55); font-size: clamp(9px, 1.5vmin, 12px); letter-spacing: 1px; }

/* ── Title: Character Slots ── */
#titleSavesSection {
  width: clamp(220px, 55vw, 380px);
}
.title-no-saves {
  text-align: center; color: rgba(180,150,80,0.35);
  font-size: 12px; letter-spacing: 1px;
}
.title-saves-label {
  text-align: center; color: rgba(200,168,80,0.55);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 8px;
}
.title-saves-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: clamp(100px, 25vh, 220px);
  overflow-y: auto;
  padding: 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,168,60,0.3) transparent;
}
.title-save-slot {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #0e0830 0%, #1e1450 60%, #2a1c6a 100%);
  border: 1px solid rgba(160,130,220,0.4);
  border-radius: 12px;
  padding: clamp(10px, 1.8vmin, 15px) clamp(14px, 2.5vmin, 20px);
  cursor: pointer;
  transition: all 0.18s;
  min-height: 54px;
  position: relative;
}
.title-save-slot:hover {
  border-color: rgba(200,170,255,0.7);
  background: linear-gradient(135deg, #17103e 0%, #281a60 60%, #362488 100%);
  box-shadow: 0 0 16px rgba(140,90,255,0.45), inset 0 0 8px rgba(140,90,255,0.1);
  filter: brightness(1.1);
}
.title-save-icon {
  color: #c8b0f0; font-size: 14px; flex-shrink: 0;
}
.title-save-info {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
}
.title-save-name {
  color: #ffd700; font-size: 15px; font-weight: bold;
  font-family: Georgia, serif; letter-spacing: 0.5px;
}
.title-save-delete {
  flex-shrink: 0;
  background: rgba(180,40,40,0.15);
  border: 1px solid rgba(200,60,60,0.35);
  border-radius: 6px; color: rgba(220,100,100,0.7);
  font-size: 12px; padding: 4px 8px; cursor: pointer;
  transition: all 0.15s; line-height: 1;
  pointer-events: all;
}
.title-save-delete:hover {
  background: rgba(200,40,40,0.35); border-color: rgba(240,80,80,0.7);
  color: #ff9090; transform: scale(1.1);
}
/* Inline delete confirmation */
.title-save-confirm-text {
  flex: 1; color: #f0c080; font-size: 13px;
}
.title-save-confirm-text strong { color: #ffd700; }
.title-save-confirm-btns {
  display: flex; gap: 8px; flex-shrink: 0;
}
.title-confirm-yes, .title-confirm-no {
  padding: 5px 12px; border-radius: 7px; font-size: 12px;
  font-family: 'Courier New', monospace; cursor: pointer;
  font-weight: bold; transition: all 0.15s; border: 1px solid;
}
.title-confirm-yes {
  background: rgba(180,30,30,0.25); border-color: rgba(220,60,60,0.5);
  color: #ff9090;
}
.title-confirm-yes:hover { background: rgba(200,30,30,0.45); color: #ffb0b0; }
.title-confirm-no {
  background: rgba(40,40,80,0.4); border-color: rgba(120,100,180,0.4);
  color: #b0a0e0;
}
.title-confirm-no:hover { background: rgba(60,50,100,0.6); color: #d0c8f8; }

/* ══════════════════════════════════════════════
   CHARACTER CREATION SCREEN
══════════════════════════════════════════════ */
#createScreen {
  position: absolute; inset: 0; z-index: 60;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.cs-bg {
  position: absolute; inset: 0;
  background: #080510;
}
.cs-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0.55;
  pointer-events: none;
}
#starsCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.cs-castle { display: none; }
.cs-fog {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,2,20,0.65) 0%, rgba(5,2,20,0.2) 30%, rgba(5,2,20,0.2) 60%, rgba(5,2,20,0.9) 100%);
  pointer-events: none;
}
.cs-header {
  position: relative; z-index: 2;
  text-align: center;
  padding-top: clamp(16px, 3.5vh, 36px);
  padding-bottom: clamp(4px, 1vh, 12px);
  flex-shrink: 0;
}
.cs-logo-ao {
  display: block;
  font-size: clamp(40px, 9vmin, 76px);
  font-weight: bold; font-family: Georgia, serif; color: #ffd700;
  text-shadow: 0 0 15px #ffd700, 0 0 40px #cc8800, 0 0 80px #664400;
  letter-spacing: clamp(8px, 2.5vmin, 18px); line-height: 1;
}
.cs-logo-sub {
  display: block;
  font-size: clamp(11px, 2.2vmin, 18px); color: #c8a84a;
  letter-spacing: clamp(5px, 2vmin, 14px); text-transform: uppercase;
  margin-top: 4px; opacity: 0.85;
}
.cs-divider {
  width: clamp(120px, 40vw, 280px); height: 1px;
  background: linear-gradient(to right, transparent, #c8a84a, transparent);
  margin: clamp(8px, 1.5vh, 16px) auto;
}
.cs-prompt {
  color: rgba(200,175,110,0.65); font-size: clamp(10px, 1.8vmin, 14px);
  letter-spacing: 3px; text-transform: uppercase;
}
.cs-cards-area {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 2.5vw, 32px);
  padding: 0 clamp(8px, 2vw, 24px) clamp(8px, 2vh, 20px);
  width: 100%; max-width: 1000px; overflow: hidden;
}
.cs-card {
  position: relative; flex: 1;
  max-width: clamp(160px, 28vw, 280px); min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
  transform-origin: bottom center;
}
.cs-card:hover { transform: scale(1.04) translateY(-6px); }
.cs-card.selected { transform: scale(1.07) translateY(-10px); }
.cs-pedestal { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.cs-card-img {
  display: block; width: auto; max-width: 100%;
  height: clamp(160px, 32vh, 320px);
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 0 0px transparent);
  transition: filter 0.3s; position: relative; z-index: 2;
}
.cs-card:hover .cs-card-img { filter: drop-shadow(0 0 12px rgba(255,200,80,0.5)); }
.cs-card.selected .cs-card-img {
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.7)) drop-shadow(0 0 32px rgba(255,150,0,0.4));
}
.cs-card-halo {
  width: 70%; height: clamp(10px, 2vh, 20px);
  background: radial-gradient(ellipse, rgba(255,200,80,0.35) 0%, transparent 70%);
  margin-top: -4px; border-radius: 50%;
  transition: opacity 0.3s; opacity: 0.4; z-index: 1;
}
.cs-card:hover .cs-card-halo, .cs-card.selected .cs-card-halo { opacity: 1; }
.cs-card-label {
  margin-top: clamp(6px, 1.2vh, 12px);
  background: rgba(8,4,22,0.82);
  border: 1px solid rgba(180,140,60,0.3);
  border-radius: clamp(8px, 1.5vmin, 14px);
  padding: clamp(7px, 1.4vmin, 12px) clamp(10px, 2vmin, 18px);
  text-align: center; width: 100%;
  backdrop-filter: blur(6px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cs-card:hover .cs-card-label { border-color: rgba(255,215,0,0.45); }
.cs-card.selected .cs-card-label {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255,215,0,0.25), inset 0 0 12px rgba(255,200,0,0.06);
}
.cs-card-name {
  color: #ffd700; font-size: clamp(14px, 2.8vmin, 22px);
  font-weight: bold; font-family: Georgia, serif; letter-spacing: 1px;
}
.cs-card-check {
  position: absolute; top: clamp(6px, 1vmin, 10px); right: clamp(6px, 1vmin, 10px);
  width: clamp(18px, 3vmin, 26px); height: clamp(18px, 3vmin, 26px);
  border-radius: 50%; background: #ffd700; color: #1a0800;
  font-size: clamp(11px, 2vmin, 16px); font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0);
  transition: opacity 0.2s, transform 0.2s; z-index: 10;
}
.cs-card.selected .cs-card-check { opacity: 1; transform: scale(1); }
.cs-bottom {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 100%; max-width: 520px;
  padding: clamp(10px, 2vh, 20px) clamp(12px, 3vw, 24px) clamp(14px, 3vh, 28px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.8vh, 18px);
}
.cs-name-row { width: 100%; }
.cs-name-row input {
  width: 100%;
  background: rgba(8,4,25,0.88);
  border: 2px solid rgba(180,140,60,0.4);
  border-radius: 10px; color: #f0e0b0;
  font-size: clamp(15px, 2.8vmin, 22px);
  padding: clamp(10px, 2vmin, 15px) clamp(14px, 2.5vmin, 20px);
  font-family: inherit; outline: none; text-align: center; letter-spacing: 1px;
  transition: border-color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(4px);
}
.cs-name-row input::placeholder { color: rgba(180,150,80,0.38); }
.cs-name-row input:focus { border-color: #ffd700; box-shadow: 0 0 18px rgba(255,215,0,0.18); }
.cs-btn-start {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 2vmin, 16px);
  background: linear-gradient(135deg, #5a2e00 0%, #8a4e00 30%, #b06400 50%, #8a4e00 70%, #5a2e00 100%);
  border: 2px solid #d4a017; border-radius: 14px;
  color: #fff8e0; font-size: clamp(15px, 2.8vmin, 21px);
  padding: clamp(14px, 2.6vmin, 20px) 24px;
  cursor: pointer; font-family: inherit; font-weight: bold;
  letter-spacing: 2px; text-transform: uppercase;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.18s, border-color 0.18s;
  box-shadow: 0 4px 24px rgba(180,100,0,0.4), inset 0 1px 0 rgba(255,220,100,0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  position: relative; overflow: hidden;
}
.cs-btn-start::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,220,100,0.1) 0%, transparent 55%);
  pointer-events: none;
}
.cs-btn-icon { font-size: 1em; flex-shrink: 0; }
.cs-btn-text { flex: 1; text-align: center; }
.cs-btn-start:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(220,140,0,0.55), inset 0 1px 0 rgba(255,220,100,0.3);
  transform: translateY(-3px) scale(1.01); border-color: #ffd700; filter: brightness(1.1);
}
.cs-btn-start:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.cs-btn-start:disabled { opacity: 0.28; cursor: not-allowed; box-shadow: none; filter: grayscale(0.5); }

/* ══════════════════════════════════════════════
   HUD (overlay sobre el canvas de exploración)
══════════════════════════════════════════════ */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

#hudPanel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 240px;
  background: linear-gradient(160deg, rgba(10,5,28,0.92) 0%, rgba(18,10,38,0.88) 100%);
  border: 1px solid rgba(180,140,60,0.45);
  border-radius: 12px;
  padding: 12px 16px 14px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,220,100,0.08);
}

#hudName {
  color: #ffd700;
  font-size: 16px;
  font-weight: bold;
  font-family: Georgia, serif;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
}

#hudMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

#hudClass {
  color: #c8a84a;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.hud-sep { color: rgba(200,168,60,0.4); font-size: 11px; }

.hud-lv-badge {
  background: rgba(255,200,0,0.12);
  border: 1px solid rgba(255,200,0,0.35);
  border-radius: 6px;
  color: #ffd700;
  font-size: 11px;
  padding: 1px 7px;
  letter-spacing: 0.5px;
}

.hud-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,168,60,0.3), transparent);
  margin: 2px 0;
}

.hud-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-bar-label {
  font-size: 10px;
  font-weight: bold;
  width: 20px;
  flex-shrink: 0;
  text-align: right;
  letter-spacing: 0.5px;
}

.hp-lbl { color: #ff6666; }
.mp-lbl { color: #6688ff; }
.xp-lbl { color: #aa88ff; }

.hud-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  position: relative;
}

.hud-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.hud-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: rgba(255,255,255,0.2);
  border-radius: 4px 4px 0 0;
}

.hud-hp-bar  { background: linear-gradient(to right, #228822, #44dd44); }
.hud-mp-bar  { background: linear-gradient(to right, #2244bb, #4488ff); }
.hud-xp-bar  { background: linear-gradient(to right, #6622aa, #aa44ff); }

.hud-bar-num {
  color: #e8d5a3;
  font-size: 10px;
  min-width: 56px;
  text-align: right;
}

#hudGoldRow {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 4px 8px;
  background: rgba(255,200,0,0.07);
  border: 1px solid rgba(255,200,0,0.2);
  border-radius: 7px;
}

.hud-gold-icon { color: #ffd700; font-size: 14px; }
#hudGoldNum { color: #ffd700; font-size: 14px; font-weight: bold; letter-spacing: 0.5px; }
.hud-gold-label { color: #c8a84a; font-size: 11px; }

#hudPotions {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  pointer-events: none;
}
.hud-pot {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 8px;
  font-size: 13px; font-weight: bold; font-family: monospace;
  background: rgba(8,4,22,0.82);
  border: 1px solid rgba(200,180,80,0.3);
  color: #e8e0a0;
  backdrop-filter: blur(4px);
  cursor: default;
}

#hudCoords {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(8,4,22,0.82);
  border: 1px solid rgba(120,100,180,0.35);
  border-radius: 8px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
}

.coords-label {
  color: rgba(180,150,220,0.6);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#hudCoordsVal {
  color: #c8b0f0;
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 1px;
}

#hudHint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,4,22,0.88);
  border: 1px solid rgba(200,168,60,0.4);
  border-radius: 8px;
  padding: 8px 20px;
  color: #c8a84a;
  font-size: 12px;
  letter-spacing: 1px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

#hudMeditHint {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(4,2,18,0.92);
  border: 1px solid rgba(100,160,255,0.5);
  border-radius: 10px;
  padding: 10px 24px;
  color: #88ccff;
  font-size: 13px;
  letter-spacing: 1px;
  pointer-events: none;
  backdrop-filter: blur(6px);
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(100,180,255,0.6);
  animation: pulseHint 2s ease-in-out infinite;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* ══════════════════════════════════════════════
   COMBAT SCREEN
══════════════════════════════════════════════ */
#combatScreen {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #07040f;
  font-family: 'Courier New', monospace;
  color: #e8d5a3;
}

#combatScreen.hidden { display: none !important; }

.combat-enemy-area {
  flex: 1;
  position: relative;
  background: linear-gradient(to bottom, #0e0820 0%, #180c30 50%, #0e0820 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 32px 24px;
  border-bottom: 2px solid rgba(200,168,60,0.3);
}

.combat-enemy-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}

.combat-enemy-name {
  color: #ffd700;
  font-size: 18px;
  font-weight: bold;
  font-family: Georgia, serif;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
}

.combat-enemy-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
}

.combat-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.combat-bar-label {
  color: #a09060;
  font-size: 12px;
  width: 26px;
  flex-shrink: 0;
}

.combat-bar-track {
  width: 180px;
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}

.combat-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
}

.mana-bar { background: #4488ff !important; }

.combat-hp-text {
  color: #e8d5a3;
  font-size: 12px;
  min-width: 60px;
}

.combat-player-area {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px 32px;
  gap: 24px;
  background: linear-gradient(to top, #0c0818 0%, #180c30 100%);
}

.combat-player-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  align-items: flex-end;
}

.combat-player-name {
  color: #ffd700;
  font-size: 14px;
  font-weight: bold;
  font-family: Georgia, serif;
}

.combat-player-canvas {
  image-rendering: pixelated;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
}

.combat-bottom {
  display: flex;
  height: 220px;
  border-top: 2px solid rgba(200,168,60,0.3);
  background: #08040f;
}

.combat-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(200,168,60,0.2);
  scrollbar-width: thin;
  scrollbar-color: rgba(200,168,60,0.3) transparent;
}

.combat-log-msg {
  font-size: 13px;
  color: #d0b880;
  line-height: 1.5;
  padding: 3px 0;
}

.combat-log-msg strong { color: #ffd700; }

.combat-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  width: 340px;
  flex-shrink: 0;
  align-content: center;
}

.combat-btn {
  background: linear-gradient(135deg, #1a0e30 0%, #2a1850 100%);
  border: 1px solid rgba(160,130,220,0.4);
  color: #d0b8f0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  line-height: 1.3;
}

.combat-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2a1848 0%, #3a2870 100%);
  border-color: #a080e0;
  color: #e8d5ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(120,80,200,0.3);
}

.combat-btn:active:not(:disabled) { transform: translateY(1px); }

.combat-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.combat-btn:first-child {
  background: linear-gradient(135deg, #2a0e0e 0%, #4a1c1c 100%);
  border-color: rgba(220,100,80,0.4);
  color: #f0c0a0;
}

.combat-btn:first-child:hover:not(:disabled) {
  background: linear-gradient(135deg, #3a1212 0%, #5a2020 100%);
  border-color: #e06040;
  color: #ffd0b0;
  box-shadow: 0 3px 12px rgba(220,80,60,0.3);
}

.flee-btn {
  background: linear-gradient(135deg, #0e1a0e 0%, #1a2c1a 100%) !important;
  border-color: rgba(80,180,80,0.4) !important;
  color: #a0e0a0 !important;
}

.flee-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #142014 0%, #223c22 100%) !important;
  border-color: #60c060 !important;
  color: #c0f0c0 !important;
  box-shadow: 0 3px 12px rgba(60,160,60,0.3) !important;
}

/* ══════════════════════════════════════════════
   SHOP SCREEN
══════════════════════════════════════════════ */
#shopScreen {
  position: absolute; inset: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
}
#shopScreen.hidden { display: none !important; }

.sp-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
}
.sp-popup {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, #0e0828 0%, #1a1248 60%, #120e30 100%);
  border: 1px solid rgba(200,168,60,0.45);
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(160,120,0,0.25), 0 8px 40px rgba(0,0,0,0.7);
  width: clamp(320px, 42vw, 480px);
  overflow: hidden;
}
.sp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(200,168,60,0.2);
  background: rgba(0,0,0,0.25);
}
.sp-title {
  flex: 1;
  font-size: clamp(16px, 2.2vmin, 22px);
  font-weight: bold;
  color: #ffd700;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255,200,0,0.4);
}
.sp-gold {
  font-size: 14px; font-weight: bold;
  color: #ffd700;
  background: rgba(255,200,0,0.1);
  border: 1px solid rgba(255,200,0,0.3);
  border-radius: 8px; padding: 4px 12px;
}
.sp-close {
  background: rgba(200,60,60,0.2); border: 1px solid rgba(200,60,60,0.4);
  color: #f08080; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 14px; font-weight: bold;
  transition: all 0.15s;
}
.sp-close:hover { background: rgba(200,60,60,0.4); color: #ffb0b0; }

.sp-items { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; }

.sp-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,180,80,0.2);
  border-radius: 12px; padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}
.sp-row:hover { border-color: rgba(220,200,80,0.45); background: rgba(255,255,255,0.07); }
.sp-row-icon { font-size: 28px; flex-shrink: 0; }
.sp-row-info { flex: 1; }
.sp-row-name { font-size: 14px; font-weight: bold; color: #f0e0a0; margin-bottom: 3px; }
.sp-row-desc { font-size: 11px; color: rgba(200,180,120,0.7); letter-spacing: 0.5px; }
.sp-row-stock {
  font-size: 13px; font-weight: bold; font-family: monospace;
  background: rgba(220,200,60,0.12); border: 1px solid rgba(220,200,60,0.3);
  border-radius: 6px; color: #e8d860; padding: 3px 10px;
}
.sp-row-price {
  font-size: 13px; font-weight: bold; color: #ffd700;
  min-width: 44px; text-align: right;
}
.sp-buy-btn {
  background: linear-gradient(135deg, #5a2e00, #9a5200);
  border: 1px solid #d4a017; color: #fff8e0;
  font-family: inherit; font-size: 12px; font-weight: bold;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.sp-buy-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #7a3e00, #ba6200);
  border-color: #ffd700; box-shadow: 0 3px 12px rgba(200,140,0,0.4);
}
.sp-buy-btn.sp-cant    { opacity: 0.35; cursor: not-allowed; }
.sp-buy-btn:disabled   { opacity: 0.35; cursor: not-allowed; }
.sp-buy-btn.sp-equipped{ background: rgba(80,200,80,0.15); border-color: #4a8; color: #8f8; cursor: default; }
.sp-row-equipped       { border-color: rgba(80,200,80,0.4) !important; background: rgba(80,200,80,0.06) !important; }
.sp-row-locked         { opacity: 0.45; }

/* ══════════════════════════════════════════════
   LEVEL UP OVERLAY
══════════════════════════════════════════════ */
.levelup-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,2,12,0.88);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

.levelup-box {
  background: linear-gradient(160deg, #0e0820 0%, #1a1030 100%);
  border: 2px solid #ffd700;
  border-radius: 16px;
  padding: 40px 60px;
  text-align: center;
  box-shadow: 0 0 60px rgba(255,215,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.levelup-title {
  color: #ffd700;
  font-size: 28px;
  font-weight: bold;
  font-family: Georgia, serif;
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
  letter-spacing: 2px;
}

.levelup-level {
  color: #e8d5a3;
  font-size: 20px;
}

.levelup-level strong { color: #ffd700; font-size: 32px; }

.levelup-stats {
  color: #c8a84a;
  font-size: 14px;
  letter-spacing: 1px;
  background: rgba(8,4,22,0.6);
  border: 1px solid rgba(200,168,60,0.3);
  border-radius: 8px;
  padding: 10px 20px;
}

.levelup-btn {
  background: linear-gradient(135deg, #3a1e00 0%, #6a3c00 50%, #3a1e00 100%);
  border: 2px solid #c8a020;
  color: #ffd700;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 36px;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 2px;
  transition: all 0.18s;
  margin-top: 8px;
}

.levelup-btn:hover {
  background: linear-gradient(135deg, #5a2e00 0%, #9a5200 50%, #5a2e00 100%);
  border-color: #ffd700;
  box-shadow: 0 4px 20px rgba(200,160,0,0.4);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════
   INFO OVERLAY (mensaje temporal)
══════════════════════════════════════════════ */
.info-overlay {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  background: rgba(8,4,22,0.92);
  border: 1px solid rgba(200,168,60,0.5);
  border-radius: 10px;
  padding: 12px 28px;
  color: #e8d5a3;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ══════════════════════════════════════════════
   COMBAT SCREEN v3 – AO style (log top, scene center, buttons right)
══════════════════════════════════════════════ */
#combatScreen {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  background: #0a0404;
}
#combatScreen.hidden { display: none !important; }

/* Main row: scene + buttons */
.cb-main {
  flex: 1; display: flex; flex-direction: row; min-height: 0; overflow: hidden;
}

/* Battle scene */
.cb-scene {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
}
.cb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}

/* ── HUD boxes (Pokémon style: cream + dark border) ── */
.cb-hud {
  position: absolute; z-index: 5;
  background: linear-gradient(160deg, #f5f0e0 0%, #ece8d8 100%);
  border: 3px solid #5a4020;
  border-radius: 12px;
  padding: 10px 16px 10px;
  font-family: 'Courier New', monospace;
  color: #1a1000;
  min-width: 210px;
  box-shadow: 3px 3px 0 rgba(40,24,0,0.45);
}
.cb-hud-e {
  top: 14px; left: 14px;
}
.cb-hud-p {
  bottom: 10px; right: 14px;
}

.cb-hname {
  font-size: 14px; font-weight: bold; color: #1a0e00;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; letter-spacing: 0.5px;
}
.cb-hlv {
  font-size: 12px; color: #5a3e10; font-weight: normal; margin-left: 8px;
}

.cb-hrow {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
}
.cb-hlbl {
  font-size: 10px; font-weight: bold; width: 24px; text-align: right;
  color: #5a4020; flex-shrink: 0; letter-spacing: 0.3px;
}
.cb-hlbl.mp-c  { color: #1844a0; }
.cb-hlbl.xp-c  { color: #3a6ad0; }
.cb-hlbl.atk-lbl { color: #cc3300; font-size: 11px; }

.cb-htrack {
  flex: 1; height: 8px;
  background: #c8be98; border-radius: 4px; overflow: hidden;
  border: 1px solid #8a7040;
}
.cb-ehp, .cb-php {
  height: 100%; border-radius: 4px;
  background: linear-gradient(to right, #30b830, #60e060);
  transition: width 0.35s ease, background 0.35s;
}
.cb-pmp {
  height: 100%; border-radius: 4px;
  background: linear-gradient(to right, #2050d0, #4488ff);
  transition: width 0.35s ease;
}
.cb-xpfill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(to right, #1060d8, #30a0ff);
  transition: width 0.5s ease;
}
.cb-hnum {
  font-size: 11px; color: #1a1000; min-width: 54px;
  text-align: right; font-weight: bold;
}

/* Timer bar */
.cb-timer-track {
  flex: 1; height: 6px;
  background: rgba(0,0,0,0.12); border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(180,80,40,0.35);
}
.cb-timer-fill {
  height: 100%; width: 0%;
  background: linear-gradient(to right, #aa2200, #ff4422);
  border-radius: 3px; transition: width 0.08s linear;
}

/* ── Log – arriba, estilo AO ── */
.cb-log {
  height: clamp(110px, 20vh, 160px); flex-shrink: 0;
  overflow-y: auto; padding: 8px 14px;
  background: #000000;
  border-bottom: 3px solid #5a2a08;
  display: flex; flex-direction: column; gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(180,80,20,0.35) transparent;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.5);
}
.cb-msg {
  font-size: 13px; color: #d4a060; line-height: 1.55; padding: 1px 0;
}
.cb-msg strong  { color: #f0c880; font-weight: bold; }
.cb-msg .dmg    { color: #ff6040; font-weight: bold; }
.cb-msg .heal   { color: #60e880; font-weight: bold; }
.cb-msg .shield { color: #60b8ff; font-weight: bold; }
.cb-msg .stun   { color: #f0c040; font-weight: bold; }
.cb-msg .warn   { color: #ff9040; font-weight: bold; }

/* ── Right panel: action buttons – sunset theme ── */
.cb-actions {
  width: 260px; flex-shrink: 0;
  display: flex; flex-direction: column;
  gap: 7px; padding: 14px 12px;
  background: linear-gradient(to bottom, #140606, #0a0202);
  border-left: 3px solid #6a2808;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: inset 2px 0 20px rgba(0,0,0,0.6);
}
.cb-actions-title {
  font-size: 10px; font-weight: bold; letter-spacing: 2px;
  color: #8a5020; text-transform: uppercase; padding: 2px 4px;
  border-bottom: 1px solid rgba(140,70,20,0.35);
  margin-bottom: 2px;
}
.cb-btn {
  background: linear-gradient(160deg, #2e1208, #1e0c06);
  border: 1px solid rgba(200,100,30,0.45);
  color: #e8c090;
  font-family: 'Courier New', monospace;
  font-size: 12px; font-weight: bold;
  padding: 11px 12px; border-radius: 8px;
  cursor: pointer; transition: all 0.14s;
  text-align: left; line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,160,60,0.08);
  letter-spacing: 0.3px;
  width: 100%;
}
.cb-btn:hover:not(:disabled) {
  background: linear-gradient(160deg, #4a1e0c, #2e1208);
  border-color: rgba(255,140,40,0.75);
  color: #ffd8a0;
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(200,80,10,0.4), inset 0 1px 0 rgba(255,180,60,0.15);
}
.cb-btn:active:not(:disabled) { transform: translateY(1px); }
.cb-btn:disabled { opacity: 0.28; cursor: not-allowed; }

.cb-btn-attack {
  background: linear-gradient(160deg, #4a0e0e, #2a0808) !important;
  border-color: rgba(240,80,40,0.55) !important;
  color: #ffb090 !important;
}
.cb-btn-attack:hover:not(:disabled) {
  background: linear-gradient(160deg, #6a1212, #3e0e0e) !important;
  border-color: #ff6040 !important; color: #ffd0b0 !important;
  box-shadow: 0 5px 16px rgba(240,60,20,0.45) !important;
}
.cb-btn-flee {
  background: linear-gradient(160deg, #0e2010, #081408) !important;
  border-color: rgba(60,180,80,0.45) !important;
  color: #80e890 !important;
  margin-top: auto;
}
.cb-btn-flee:hover:not(:disabled) {
  background: linear-gradient(160deg, #143018, #0e1e0e) !important;
  border-color: #50d060 !important; color: #b0ffb8 !important;
  box-shadow: 0 5px 16px rgba(40,160,60,0.35) !important;
}
.cb-btn-meditate {
  background: linear-gradient(160deg, #0e1828, #080e1c) !important;
  border-color: rgba(60,140,240,0.5) !important; color: #80c8ff !important;
}
.cb-btn-meditate:hover:not(:disabled) {
  background: linear-gradient(160deg, #162238, #0e1428) !important;
  border-color: #60b0ff !important; color: #b8e0ff !important;
  box-shadow: 0 5px 16px rgba(40,120,240,0.45) !important;
}
.cb-btn-meditate.medit-active {
  background: linear-gradient(160deg, #102040, #1a3a6e) !important;
  border-color: #44aaff !important; color: #88ddff !important;
  box-shadow: 0 0 16px rgba(60,160,255,0.5) !important;
  animation: meditPulse 1.8s ease-in-out infinite !important;
}
@keyframes meditPulse {
  0%,100% { box-shadow: 0 0 10px rgba(60,160,255,0.35); }
  50%      { box-shadow: 0 0 24px rgba(80,200,255,0.7); }
}
.cb-btn-potion-heal {
  background: linear-gradient(160deg, #281e06, #181202) !important;
  border-color: rgba(220,190,40,0.5) !important; color: #f0e060 !important;
}
.cb-btn-potion-heal:hover:not(:disabled) {
  background: linear-gradient(160deg, #3a2c0a, #26180a) !important;
  border-color: #e0c020 !important; color: #fff060 !important;
  box-shadow: 0 5px 16px rgba(200,160,20,0.4) !important;
}
.cb-btn-potion-mana {
  background: linear-gradient(160deg, #0e1828, #08101e) !important;
  border-color: rgba(80,180,220,0.5) !important; color: #80d8ff !important;
}
.cb-btn-potion-mana:hover:not(:disabled) {
  background: linear-gradient(160deg, #162030, #0e1828) !important;
  border-color: #50c0e8 !important; color: #b0ecff !important;
  box-shadow: 0 5px 16px rgba(60,160,220,0.4) !important;
}

/* ─── Chat panel ─── */
#chatPanel {
  position: fixed;
  bottom: 60px;
  right: 12px;
  width: 300px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

#chatMessages {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
#chatMessages::-webkit-scrollbar { display: none; }

.chat-msg {
  font-size: 12px;
  line-height: 1.4;
  background: rgba(0,0,0,0.55);
  border-radius: 6px;
  padding: 3px 8px;
  color: #e8d5a3;
  word-break: break-word;
  pointer-events: none;
  backdrop-filter: blur(2px);
  animation: chatFadeIn 0.2s ease;
}
.chat-msg.chat-system {
  color: #aaa;
  font-style: italic;
  font-size: 11px;
}
.chat-name {
  font-weight: bold;
}

#chatInputRow {
  pointer-events: none; /* invisible hasta que el chat esté activo */
  display: flex;
  gap: 6px;
  align-items: center;
}
#chatPanel.chat-active #chatInputRow {
  pointer-events: all;
}
#chatInput {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(200,160,60,0.35);
  border-radius: 8px;
  color: #e8d5a3;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  padding: 5px 10px;
  outline: none;
  transition: border-color 0.2s;
}
#chatInput:focus {
  border-color: rgba(200,160,60,0.8);
  background: rgba(0,0,0,0.85);
}
#chatInput::placeholder { color: rgba(200,160,60,0.35); }

#chatSendBtn {
  display: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(200,160,60,0.55);
  background: rgba(60,40,0,0.85);
  color: #e8c870;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
#chatSendBtn:active { background: rgba(100,70,0,0.9); }
#chatPanel.chat-active #chatSendBtn { display: flex; }

@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hint tecla T */
#chatPanel::after {
  content: 'T para chatear';
  display: block;
  font-size: 10px;
  color: rgba(200,160,60,0.3);
  text-align: right;
  pointer-events: none;
  padding-right: 4px;
}
#chatInput:focus ~ #chatPanel::after,
#chatInput:focus + *::after { display: none; }

/* Error de nombre en creación */
.cs-name-error {
  color: #ff6666;
  font-size: 11px;
  margin-left: 8px;
}

/* ─── Login box en pantalla de título ─── */
.title-login-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 8px;
}
.tl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-label {
  font-size: 11px;
  color: rgba(200,160,60,0.7);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tl-field input {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(200,160,60,0.35);
  border-radius: 8px;
  color: #e8d5a3;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 9px 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  width: 100%;
}
.tl-field input:focus {
  border-color: rgba(200,160,60,0.8);
  background: rgba(0,0,0,0.75);
}
.tl-field input::placeholder { color: rgba(200,160,60,0.3); }
.tl-error {
  color: #ff7777;
  font-size: 12px;
  min-height: 16px;
  text-align: center;
}
.tl-btn-row {
  display: flex;
  gap: 8px;
}
.tl-btn-row .title-btn { flex: 1; }
.title-btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(200,160,60,0.3);
  color: rgba(200,160,60,0.7);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.title-btn-secondary:hover {
  background: rgba(200,160,60,0.1);
  color: #e8d5a3;
  border-color: rgba(200,160,60,0.6);
}

/* ─── Botón volver en creación ─── */
.cs-btn-back {
  background: none;
  border: none;
  color: rgba(200,160,60,0.5);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  cursor: pointer;
  margin-top: 6px;
  padding: 4px;
  transition: color 0.2s;
}
.cs-btn-back:hover { color: rgba(200,160,60,0.9); }

/* ─── Chat rediseñado (solo input) ─── */
#chatPanel {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  width: 340px;
}
#chatInput {
  width: 100%;
  background: rgba(0,0,0,0.0);
  border: none;
  border-bottom: 1px solid rgba(200,160,60,0.0);
  border-radius: 0;
  color: transparent;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 6px 12px;
  outline: none;
  pointer-events: all;
  transition: all 0.25s;
  caret-color: transparent;
}
#chatPanel.chat-active #chatInput {
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(200,160,60,0.6);
  border-radius: 8px;
  color: #e8d5a3;
  caret-color: #e8d5a3;
}
#chatInput::placeholder { color: rgba(0,0,0,0); }
#chatPanel.chat-active #chatInput::placeholder { color: rgba(200,160,60,0.4); }
#chatHint {
  font-size: 10px;
  color: rgba(200,160,60,0.3);
  pointer-events: none;
  transition: opacity 0.2s;
}
#chatPanel.chat-active #chatHint { opacity: 0; }

/* ─── Recordarme checkbox ─── */
.tl-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(200,160,60,0.6);
  cursor: pointer;
  user-select: none;
}
.tl-remember input[type="checkbox"] {
  accent-color: #c8a020;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.tl-remember:hover { color: rgba(200,160,60,0.9); }

/* ─── Botones de zoom (siempre visibles) ─── */
#zoomControls {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
}
.zoom-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 2px solid rgba(200,160,60,0.5);
  background: linear-gradient(160deg, #1a1408cc, #0e0c04cc);
  color: #e8c870;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.zoom-btn:active { transform: scale(0.9); }
.zoom-btn:hover  { border-color: rgba(200,160,60,0.9); background: linear-gradient(160deg, #2a2010cc, #1a1408cc); }

/* ─── Botones táctiles (solo mobile) ─── */
.touch-chat-btn {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 90px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(200,160,60,0.6);
  background: linear-gradient(160deg, #1a1408, #0e0c04);
  color: #e8c870;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(200,160,60,0.15);
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.touch-chat-btn:active { transform: scale(0.92); }
.touch-chat-btn.chat-open {
  border-color: #f0c840;
  background: linear-gradient(160deg, #2a1e04, #1a1404);
  box-shadow: 0 0 20px rgba(240,200,60,0.5), 0 4px 12px rgba(0,0,0,0.4);
}

/* ─── Botón táctil de meditación (solo mobile) ─── */
.touch-meditate-btn {
  display: none; /* oculto en desktop, visible en mobile vía @media */
  position: fixed;
  bottom: 24px;
  right: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(60,140,240,0.6);
  background: linear-gradient(160deg, #0e1828, #080e1c);
  color: #80c8ff;
  font-size: 26px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(60,140,240,0.2);
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.touch-meditate-btn:active {
  transform: scale(0.92);
}
.touch-meditate-btn:disabled {
  opacity: 0.28;
}
.touch-meditate-btn.medit-active {
  border-color: #44aaff;
  background: linear-gradient(160deg, #102040, #1a3a6e);
  box-shadow: 0 0 20px rgba(60,160,255,0.6), 0 4px 12px rgba(0,0,0,0.4);
  animation: meditPulse 1.8s ease-in-out infinite;
}

/* ─── Combate responsive + botón meditar (mobile) ─── */
@media (max-width: 700px) {
  .touch-meditate-btn,
  .touch-chat-btn {
    display: flex;
  }

  #chatPanel {
    bottom: 100px;
    right: 8px;
    width: calc(100vw - 16px);
  }
  /* Combat: layout vertical con alturas fijas para Android */
  #combatScreen {
    height: 100svh; /* small viewport height – excluye barras de Android/iOS */
    height: 100dvh;
    height: 100vh;
  }

  .cb-log {
    flex: 0 0 clamp(56px, 11vh, 90px);
    overflow-y: auto;
  }

  .cb-main {
    flex-direction: column;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
  }

  /* Escena: altura fija al 46% del viewport, no crece más */
  .cb-scene {
    flex: 0 0 46vh;
    height: 46vh;
    overflow: hidden;
  }

  .cb-hud {
    padding: 5px 8px;
    min-width: 0;
    font-size: 10px;
    border-width: 2px;
  }

  .cb-hud-e { top: 4px; left: 4px; max-width: 42%; }
  .cb-hud-p { bottom: 4px; right: 4px; max-width: 42%; }

  .cb-hname { font-size: 10px; margin-bottom: 2px; }
  .cb-hnum  { font-size: 9px; min-width: 36px; }
  .cb-htrack { height: 5px; }

  /* Acciones: toman todo el espacio restante después de log + escena */
  .cb-actions {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 6px 6px 8px;
    gap: 5px;
    border-left: none;
    border-top: 2px solid #6a2808;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cb-actions-title { display: none; }

  .cb-btn {
    flex: 1 1 calc(33% - 5px);
    min-width: 70px;
    padding: 9px 4px;
    font-size: 11px;
    text-align: center;
  }

  .cb-btn-flee { margin-top: 0; }

  .cb-msg { font-size: 11px; }
}