* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2f4a2a; font-family: "Trebuchet MS", system-ui, sans-serif; color: #fff; user-select: none; }
canvas { display: block; width: 100vw; height: 100vh; cursor: default; }

#barra { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: linear-gradient(#5a3b1c, #3d2810); border-bottom: 3px solid #c9a24a; box-shadow: 0 2px 8px #0008; flex-wrap: wrap; }
.rec { display: flex; align-items: center; gap: 6px; background: #0004; border: 1px solid #c9a24a88; border-radius: 14px; padding: 3px 12px 3px 6px; min-width: 86px; }
.rec .ico { font-size: 18px; }
.rec b { font-size: 16px; text-shadow: 0 1px 0 #000; }
.nivel { position: relative; }
.xp { position: absolute; left: 30px; right: 10px; bottom: 2px; height: 3px; background: #0006; border-radius: 2px; }
.xp div { height: 100%; width: 0; background: #7fe07f; border-radius: 2px; }
#reloj { display: flex; align-items: center; gap: 6px; background: #0004; border: 1px solid #c9a24a88; border-radius: 14px; padding: 2px 12px 2px 6px; font-size: 13px; color: #ffe9b0; }
#reloj .arco { position: relative; width: 42px; height: 22px; overflow: hidden; }
#reloj .arco::before { content: ""; position: absolute; left: 4px; top: 4px; width: 34px; height: 34px; border-radius: 50%; border: 2px dashed #ffd27a88; box-sizing: border-box;
  background: radial-gradient(circle at 50% 100%, #8fd0ff55, transparent 70%); }
#reloj.tarde .arco::before { border-color: #ff9a5a; background: radial-gradient(circle at 50% 100%, #ff9a5a55, transparent 70%); }
#reloj.noche { color: #c8d6ff; }
#reloj.noche .arco::before { border-color: #9fb4ff88; background: radial-gradient(circle at 50% 100%, #3a4c9a77, transparent 70%); }
#reloj-ico { position: absolute; font-size: 13px; line-height: 1; transform: translate(-50%, -50%); }
#clima { font-size: 13px; color: #e8f0ff; background: #0004; border: 1px solid #c9a24a88; border-radius: 14px; padding: 3px 10px; }
#tienda { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 20; }
#tienda.oculto { display: none; }
.caja-tienda { width: min(520px, 94vw); background: linear-gradient(#4a2a5a, #23122a); border: 3px solid #c9a24a; border-radius: 14px; padding: 14px;
  box-shadow: 0 8px 30px #000a; display: flex; flex-direction: column; gap: 10px; animation: aparecer .2s; }
#t-tiempo { float: right; color: #f3dfb0; font-weight: normal; font-size: 13px; }
.globo-t { background: #f7ecd2; color: #3d2810; border-radius: 12px; padding: 8px 12px; font-size: 14px; }
#t-ofertas { display: flex; flex-direction: column; gap: 6px; }
.oferta { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; }
.oferta .ico { font-size: 22px; }
.oferta .txt { flex: 1; }
.oferta .precio { color: #ffd27a; white-space: nowrap; }
#incursion { margin-left: 8px; font-size: 14px; color: #ffd27a; text-shadow: 0 1px 0 #000; }
#incursion.peligro { color: #ff6b5a; font-weight: bold; animation: latido .8s infinite alternate; }
@keyframes latido { from { opacity: .6 } to { opacity: 1 } }
.botones { margin-left: auto; display: flex; gap: 6px; }
button { font: inherit; color: #fff; background: linear-gradient(#7a5426, #5a3b1c); border: 1px solid #c9a24a; border-radius: 8px; padding: 5px 10px; cursor: pointer; }
button:hover { filter: brightness(1.2); }
.xp-heroe { height: 5px; background: #0006; border-radius: 3px; margin: 2px 0 6px; overflow: hidden; }
.xp-heroe div { height: 100%; background: linear-gradient(90deg, #ffd27a, #ffef9a); }
#b-musica.apagado { opacity: .45; text-decoration: line-through; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Abajo: solo el botón para construir y el aviso de lo que estás colocando */
#menu { position: fixed; bottom: 12px; left: 12px; right: 230px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; z-index: 7; }
#menu > * { pointer-events: auto; }
#b-construir { width: 82px; height: 82px; border-radius: 50%; font-size: 34px; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 35% 30%, #c8913e, #6b4a20 70%); border: 3px solid #ffd27a; box-shadow: 0 4px 12px #000a; padding: 0; }
#b-construir span { font-size: 12px; font-weight: bold; color: #ffe9b0; }
#b-construir:hover, #b-construir.activo { filter: brightness(1.15); transform: scale(1.04); }
#colocando { background: #2a1b0aee; border: 2px solid #7fe07f; border-radius: 10px; padding: 8px 12px; font-size: 14px; box-shadow: 0 4px 12px #0008; }
#colocando button { margin-left: 8px; padding: 3px 10px; font-size: 13px; }

/* Ventana de construir */
#construir { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 18; }
#construir.oculto { display: none; }
.caja-construir { width: min(900px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a; border-radius: 14px; box-shadow: 0 8px 30px #000c; }
.c-titulo { font-size: 20px; font-weight: bold; color: #ffd27a; padding: 10px 14px 0; display: flex; justify-content: space-between; align-items: center; }
.c-titulo button { padding: 2px 10px; font-size: 16px; }
#c-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#construir .pestanas { display: flex; gap: 4px; padding: 10px 14px 0; flex-wrap: wrap; border-bottom: 2px solid #c9a24a88; }
#construir .pestanas button { padding: 6px 14px; font-size: 14px; border-radius: 8px 8px 0 0; background: #3d2810; border-bottom: none; }
#construir .pestanas button.activa { background: linear-gradient(#a0702e, #6b4a20); color: #ffd27a; }
.cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 14px 14px; overflow-y: auto; }
.edif { background: #0004; border: 2px solid #c9a24a66; border-radius: 10px; padding: 6px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.edif:hover { border-color: #ffd27a; background: #fff1; transform: translateY(-2px); }
.edif.bloq { opacity: .5; cursor: not-allowed; }
.edif.caro .cost { color: #ff8a7a; }
.edif .dibujo { position: relative; height: 96px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 85%, #7fae5a55, transparent 70%); border-radius: 8px; }
.edif .dibujo img { max-width: 100%; max-height: 96px; object-fit: contain; }
.edif .dibujo .ico { font-size: 40px; align-self: center; }
.edif .candado { position: absolute; inset: auto 4px 4px; background: #000b; border-radius: 6px; font-size: 12px; padding: 2px; }
.edif .nom { font-weight: bold; font-size: 13px; }
.edif .cost { font-size: 12px; color: #f3dfb0; }
.edif .desc { font-size: 11px; color: #f3dfb0aa; line-height: 1.3; }
.edif.chico .dibujo { height: 64px; }
.edif.chico .dibujo img { max-height: 64px; }
#minimapa { position: fixed; right: 12px; bottom: 12px; width: 200px; height: 100px; cursor: pointer;
  background: #1d2e1acc; border: 2px solid #c9a24a; border-radius: 10px; box-shadow: 0 4px 12px #0008; }

#panel { position: fixed; right: 12px; top: 84px; width: 250px; max-height: calc(100vh - 230px); overflow-y: auto; z-index: 6; background: #2a1b0aee; border: 2px solid #c9a24a; border-radius: 10px; padding: 10px; font-size: 14px; box-shadow: 0 4px 12px #0008; }
#panel h3 { margin: 0 0 6px; color: #ffd27a; }
#panel .fila { margin: 4px 0; }
#panel .aviso-panel { color: #ffb3a8; }
#panel button.par { width: 48.5%; margin-right: 3%; vertical-align: top; white-space: nowrap; }
#panel button.par + button.par { margin-right: 0; }
#panel button.chico { width: 23%; margin-right: 2%; padding: 4px 0; font-size: 16px; }
#panel button.gema { width: auto; display: inline-block; padding: 3px 10px; font-size: 12px; margin-top: 4px; background: linear-gradient(#6a3a8a, #3e2058); border-color: #b48aff; }
#panel button.etiqueta { width: 100%; background: none; border: none; text-align: left; padding: 2px 0; opacity: 1; cursor: default; }
#panel .vida { height: 8px; background: #0008; border-radius: 4px; overflow: hidden; margin: 6px 0; }
#panel .vida div { height: 100%; background: #6fd36f; }
#panel button { width: 100%; margin-top: 6px; }
.oculto { display: none; }

#avisos { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.aviso { background: #000b; border: 1px solid #c9a24a; border-radius: 10px; padding: 6px 14px; font-size: 15px; animation: aparecer .25s; }
.aviso.malo { border-color: #ff6b5a; color: #ffb3a8; }
.aviso.bueno { border-color: #7fe07f; color: #c8ffc8; }
@keyframes aparecer { from { transform: translateY(-8px); opacity: 0 } }

/* la Guía del reino: ventana centrada con secciones plegables y buscador */
#ayuda { position: fixed; inset: 0; z-index: 40; background: #0008; display: flex; align-items: center; justify-content: center; padding: 16px; }
#ayuda.oculto { display: none; }
#ayuda .caja-guia { width: min(640px, 100%); max-height: 86vh; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a; border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 30px #000c; color: #f3dfb0; }
#ayuda .g-cabeza { display: flex; justify-content: space-between; align-items: center; font-size: 19px; color: #ffd27a; }
#ayuda .g-cabeza button { padding: 2px 10px; }
#ayuda #g-buscar { padding: 7px 10px; border-radius: 8px; border: 2px solid #8a6a3a; background: #1e1408; color: #f3dfb0; font-size: 14px; }
#ayuda .g-secciones { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
#ayuda details { background: #0004; border: 1px solid #8a6a3a88; border-radius: 9px; padding: 4px 10px; }
#ayuda summary { cursor: pointer; font-weight: bold; color: #ffd27a; font-size: 15px; padding: 4px 0; }
#ayuda summary small { color: #f3dfb099; font-weight: normal; }
#ayuda ul { margin: 4px 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
#ayuda li { margin: 3px 0; }
#ayuda b { color: #ffd27a; }
#b-guia.nuevo { animation: brillo-guia 1.4s ease-in-out infinite; }
@keyframes brillo-guia { 50% { box-shadow: 0 0 0 3px #ffd27a, 0 0 14px #ffd27a; } }

/* misiones del Rey */
#misiones { position: fixed; left: 12px; top: 80px; display: flex; flex-direction: column; gap: 10px; z-index: 5; }
.mision { width: 56px; height: 56px; border-radius: 50%; padding: 4px; cursor: pointer; position: relative;
  background: conic-gradient(#7fe07f calc(var(--p) * 1%), #0008 0); box-shadow: 0 3px 8px #0009; }
.mision:hover { filter: brightness(1.2); }
.mision .dentro { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(#8a6230, #3d2810); border: 2px solid #c9a24a;
  display: flex; align-items: center; justify-content: center; font-size: 24px; }
.mision.diaria .dentro { border-color: #6fb6ff; }
.mision.lista { animation: salto .55s infinite alternate; }
.mision .alerta { position: absolute; right: -4px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: #e03a2a;
  border: 2px solid #fff; font-weight: bold; font-size: 14px; line-height: 19px; text-align: center; }
@keyframes salto { from { transform: translateY(0) } to { transform: translateY(-5px) } }
#dialogo { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 20; }
#dialogo.oculto { display: none; }
.caja-dialogo { display: flex; gap: 14px; width: min(640px, 94vw); background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a;
  border-radius: 14px; padding: 14px; box-shadow: 0 8px 30px #000a; animation: aparecer .2s; }
.retrato { width: 170px; height: 240px; object-fit: cover; object-position: top; border-radius: 10px; flex: none;
  background: radial-gradient(circle at 50% 35%, #b08850, #3d2810); border: 2px solid #c9a24a; }
.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.quien { color: #ffd27a; font-weight: bold; }
.globo { background: #f7ecd2; color: #3d2810; border-radius: 12px; padding: 10px 12px; position: relative; font-size: 15px; line-height: 1.4; }
.globo:before { content: ""; position: absolute; left: -10px; top: 18px; border: 10px solid transparent; border-right-color: #f7ecd2; border-left: 0; }
.contenido h3 { margin: 4px 0 0; color: #ffd27a; }
.objetivo { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px; }
.objetivo .vida { width: 100%; height: 7px; background: #0008; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.objetivo .vida div { height: 100%; background: #ffd27a; }
.objetivo.ok .vida div { background: #7fe07f; }
#d-premio { color: #f3dfb0; font-size: 15px; }
.d-botones { display: flex; gap: 8px; margin-top: auto; }
.d-botones button { flex: 1; padding: 8px; }
#d-cobrar:not(:disabled) { background: linear-gradient(#e0b04a, #9a6a1a); color: #2a1b0a; font-weight: bold; }
@media (max-width: 560px) { .retrato { width: 90px; height: 140px; } }
#panel .inv { border-top: 1px solid #c9a24a44; padding-top: 4px; }
#panel .inv small { color: #f3dfb0aa; }
#panel .puntos { color: #ffd27a; letter-spacing: 2px; }

/* reino en la barra */
#reino { display: flex; align-items: center; gap: 6px; background: #0004; border: 1px solid #c9a24a88; border-radius: 14px; padding: 3px 12px 3px 6px; }
#reino b { font-size: 14px; color: #ffe9b0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escudo { width: 18px; height: 21px; background: var(--color-reino, #c8302a); border: 2px solid #ffd27a; border-radius: 3px 3px 50% 50% / 3px 3px 60% 60%; flex: none;
  box-shadow: inset 0 -4px 0 #0003; }
.escudo.vacio { background: #0006; border-style: dashed; }

/* pantalla de inicio: el pueblo se ve detrás */
body.en-inicio #barra, body.en-inicio #menu, body.en-inicio #minimapa, body.en-inicio #misiones, body.en-inicio #panel,
body.en-inicio #avisos, body.en-inicio #ayuda { display: none !important; }
#inicio { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at center, #0000 30%, #000a 100%), linear-gradient(#0008, #0000 35%, #0000 65%, #000a); }
#inicio.oculto { display: none; }
.i-titulo { font: bold 92px Georgia, "Times New Roman", serif; letter-spacing: 10px; color: #ffd27a; text-align: center; line-height: 1;
  text-shadow: 0 3px 0 #7a4a10, 0 6px 0 #4a2a08, 0 10px 24px #000c; animation: aparecer .8s; }
.i-titulo small { display: block; font: italic 20px Georgia, serif; letter-spacing: 2px; color: #f3dfb0; margin-top: 10px; text-shadow: 0 2px 6px #000; }
#i-contenido { width: min(460px, 92vw); background: #2a1b0acc; border: 2px solid #c9a24a; border-radius: 14px; padding: 16px; box-shadow: 0 8px 30px #000a;
  display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(3px); }
.i-botones { display: flex; flex-direction: column; gap: 8px; }
.i-botones.fila { flex-direction: row; justify-content: space-between; }
.i-botones button { padding: 10px; font-size: 16px; }
.i-botones button.grande, button.grande { font-size: 18px; padding: 12px; background: linear-gradient(#a8742e, #6a4418); }
.i-botones small { display: block; font-size: 12px; color: #f3dfb0; margin-top: 2px; }
.i-pie { font-size: 12px; color: #f3dfb0aa; text-shadow: 0 1px 3px #000; }
.i-msg { font-size: 13px; color: #f3dfb0; }
.ranura { display: flex; align-items: center; gap: 10px; background: #0004; border: 1px solid #c9a24a66; border-radius: 10px; padding: 8px; }
.ranura .r-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ranura .r-info b { color: #ffe9b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranura .r-info small { color: #f3dfb0aa; font-size: 12px; }
.ranura.vacia { opacity: .85; }
.i-form { display: flex; flex-direction: column; gap: 8px; }
.i-form label { color: #ffd27a; font-weight: bold; font-size: 14px; }
.i-form label.check { font-weight: normal; color: #f3dfb0; display: flex; gap: 6px; align-items: center; }
#i-nombre { font: inherit; font-size: 17px; padding: 8px 10px; border-radius: 8px; border: 1px solid #c9a24a; background: #f7ecd2; color: #3d2810; }
.colores { display: flex; gap: 8px; }
.color { width: 36px; height: 40px; padding: 0; background: var(--color-reino); border: 2px solid #0006; border-radius: 4px 4px 50% 50% / 4px 4px 60% 60%; }
.color.elegido { border-color: #ffd27a; box-shadow: 0 0 0 2px #ffd27a, 0 0 10px #ffd27a; }

/* tutorial */
#tutorial { position: fixed; left: 108px; bottom: 12px; z-index: 15; display: flex; gap: 10px; align-items: flex-end; max-width: min(520px, 92vw); pointer-events: none; }
#tutorial.oculto { display: none; }
.tu-rey { width: 86px; height: 120px; object-fit: cover; object-position: top; border-radius: 10px; border: 2px solid #c9a24a;
  background: radial-gradient(circle at 50% 35%, #b08850, #3d2810); flex: none; }
.tu-cuerpo { background: #2a1b0aee; border: 2px solid #c9a24a; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto;
  box-shadow: 0 6px 20px #000a; animation: aparecer .25s; }
.tu-quien { color: #ffd27a; font-weight: bold; font-size: 13px; }
#tu-paso { float: right; font-weight: normal; color: #f3dfb0aa; }
#tu-texto { background: #f7ecd2; color: #3d2810; border-radius: 10px; padding: 8px 10px; font-size: 15px; line-height: 1.4; }
.tu-botones { display: flex; justify-content: space-between; gap: 8px; }
.tu-botones .oculto { display: none; }
#flecha { position: fixed; z-index: 19; font-size: 38px; color: #ffd23a; transform: translate(-50%, -100%); pointer-events: none;
  text-shadow: 0 0 6px #000, 0 2px 0 #7a4a10; animation: rebota .7s infinite alternate ease-in-out; }
#flecha.oculto { display: none; }
#flecha.izq { transform: translate(0, -50%) rotate(90deg); }
@keyframes rebota { from { margin-top: -10px; } to { margin-top: 0; } }

/* logros */
#logro { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #ffd27a; border-radius: 14px; padding: 10px 18px; box-shadow: 0 0 24px #ffd27a88, 0 8px 24px #000a;
  animation: logro-entra .5s cubic-bezier(.2,1.4,.4,1); pointer-events: none; }
#logro.oculto { display: none; }
@keyframes logro-entra { from { transform: translate(-50%, -40px) scale(.7); opacity: 0; } }
.medalla { font-size: 40px; filter: drop-shadow(0 2px 4px #000); }
.l-titulo { color: #ffd27a; font-weight: bold; font-size: 16px; }
.l-desc { color: #f3dfb0; font-size: 13px; }
#vitrina { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 20; }
#vitrina.oculto { display: none; }
.caja-vitrina { width: min(760px, 95vw); max-height: 88vh; overflow: auto; background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a;
  border-radius: 14px; padding: 14px; box-shadow: 0 8px 30px #000a; display: flex; flex-direction: column; gap: 8px; animation: aparecer .2s; }
.caja-vitrina h3 { margin: 6px 0 2px; color: #ffd27a; font-size: 15px; }
.caja-vitrina h3 small { color: #f3dfb0aa; font-weight: normal; font-size: 12px; }
.v-total { color: #f3dfb0; font-size: 14px; }
.v-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.v-logro { background: #0005; border: 1px solid #ffffff22; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; opacity: .55; }
.v-logro .v-ico { font-size: 22px; }
.v-logro b { font-size: 13px; color: #f3dfb0; }
.v-logro small { font-size: 11px; color: #f3dfb0aa; }
.v-logro.hecho { opacity: 1; }
.v-logro.hecho.bronce { border-color: #cd7f32; box-shadow: inset 0 0 12px #cd7f3244; }
.v-logro.hecho.plata { border-color: #c0c8d0; box-shadow: inset 0 0 12px #c0c8d044; }
.v-logro.hecho.oro { border-color: #ffd23a; box-shadow: inset 0 0 12px #ffd23a55; }

/* regiones */
#region-hud { display: none; position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 6; background: #2a1b0aee; border: 2px solid #c9a24a;
  border-radius: 12px; padding: 6px 10px 6px 14px; align-items: center; gap: 12px; color: #ffe9b0; font-weight: bold; box-shadow: 0 4px 14px #0008; white-space: nowrap; }
body.en-region #region-hud { display: flex; }
body.en-region #menu, body.en-region #misiones, body.en-region #b-mundo, body.en-region #b-logros, body.en-region #incursion { display: none !important; }
#mundo, #resultado { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 20; }
#mundo.oculto, #resultado.oculto { display: none; }
.caja-mundo { width: min(860px, 96vw); max-height: 92vh; overflow: auto; background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a; border-radius: 14px;
  padding: 14px; box-shadow: 0 8px 30px #000a; display: flex; flex-direction: column; gap: 10px; animation: aparecer .2s; }
#m-mapa { position: relative; height: 300px; border-radius: 10px; border: 2px solid #8a6a3a;
  background: radial-gradient(ellipse at 30% 40%, #e8d6a8, #d4bc84 60%, #b89a62); box-shadow: inset 0 0 40px #6a4a2a88; overflow: hidden; }
.m-camino { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-camino polyline { fill: none; stroke: #7a4a20; stroke-width: 0.6; stroke-dasharray: 1.5 1.2; vector-effect: non-scaling-stroke; }
.m-region { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px;
  background: #f7ecd2ee; color: #3d2810; border: 2px solid #7a4a20; border-radius: 10px; min-width: 96px; }
.m-region .m-ico { font-size: 24px; }
.m-region .m-nom { font-size: 12px; font-weight: bold; }
.m-region .m-niv { font-size: 11px; color: #7a4a20; }
.m-region.bloq { opacity: .6; filter: grayscale(.6); }
.m-region.ganada { border-color: #2f9a3a; }
.m-region.elegida { box-shadow: 0 0 0 3px #ffd27a, 0 0 14px #ffd27a; }
#m-detalle { background: #0004; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
#m-detalle h3 { margin: 0; color: #ffd27a; }
.m-tropas { display: flex; flex-wrap: wrap; gap: 6px; }
.m-tropa { background: #0005; border: 1px solid #c9a24a55; border-radius: 8px; padding: 4px 8px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.m-tropa input { width: 48px; font: inherit; border-radius: 6px; border: 1px solid #c9a24a; background: #f7ecd2; color: #3d2810; padding: 2px 4px; }

/* botones de duración de la producción */
#panel-botones button.dur { width: 48.5%; margin-right: 1.5%; font-size: 12px; padding: 5px 4px; }
#panel-botones button.dur.activa { border-color: #7fe07f; background: linear-gradient(#4f7a32, #2f4f1c); color: #eaffd8; }

/* subir de nivel y camino del reino */
.rec.nivel { cursor: pointer; }
.rec.nivel:hover { border-color: #ffd27a; background: #fff2; }
#subida, #camino { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#subida.oculto, #camino.oculto { display: none; }
.caja-subida { width: min(520px, 94vw); max-height: 84vh; overflow-y: auto; background: linear-gradient(#6b4a20, #2a1b0a); border: 3px solid #ffd27a; border-radius: 16px;
  box-shadow: 0 0 40px #ffd27a66, 0 8px 30px #000c; padding: 16px 18px; animation: subida .45s ease-out; }
@keyframes subida { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.caja-subida h2 { margin: 0 0 10px; text-align: center; color: #ffd27a; font-size: 26px; text-shadow: 0 2px 0 #000; }
.sub-nivel { background: #0004; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.sub-nivel > b { color: #ffd27a; }
.desb { font-size: 14px; padding: 2px 0; color: #f3dfb0; }
.desb > span:not(.ico-desb):not(.costo-mini):not(.mini) { display: inline-block; width: 22px; text-align: center; }
.desb.fuerte { color: #fff; font-weight: bold; }
.desb.chico { font-size: 12px; color: #f3dfb0aa; }
.proximo { font-size: 13px; color: #c8ffc8; margin: 6px 0 4px; }
.caja-camino { width: min(640px, 96vw); }
.caja-camino h2 { margin: 0; padding: 0 14px; color: #ffd27a; }
.cam-xp { padding: 4px 14px 8px; color: #f3dfb0; border-bottom: 2px solid #c9a24a88; }
.pasos { overflow-y: auto; padding: 8px 14px 14px; }
.paso { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #c9a24a33; }
.paso .num { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;
  background: #3d2810; border: 2px solid #c9a24a88; color: #ffd27a; }
.paso.hecho { opacity: .55; }
.paso.hecho .num { background: #2f6a2a; color: #fff; }
.paso.actual .num { background: linear-gradient(#ffd27a, #c9902a); color: #2a1b0a; box-shadow: 0 0 12px #ffd27a; }
.paso.actual { background: #ffd27a14; border-radius: 8px; }
.paso .cosas { flex: 1; }
.edif .cuenta { font-size: 11px; color: #c8ffc8; }
#cam-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.caja-camino .c-titulo { padding-bottom: 0; }
.caja-subida .d-botones { position: sticky; bottom: -16px; background: #2a1b0a; padding: 8px 0; display: flex; gap: 8px; justify-content: center; }
.edif.chico .dibujo img { height: 84px; width: auto; }

/* mundo: pestañas, etapas y reinos rivales */
.m-pestanas { display: flex; flex-wrap: wrap; gap: 5px; }   /* 11 pestañas: en una sola fila se salían por la derecha */
.m-pestanas button { padding: 5px 10px; white-space: nowrap; border-radius: 8px; background: #3d2810; }
.m-pestanas button.activa { background: linear-gradient(#a0702e, #6b4a20); color: #ffd27a; }
.m-region { min-width: 84px; padding: 3px 6px; }
.m-region .m-nom { font-size: 11px; }
.m-etapas { display: flex; gap: 6px; flex-wrap: wrap; }
.m-etapa { display: flex; flex-direction: column; align-items: center; padding: 4px 10px; min-width: 58px; border-radius: 8px; background: #3d2810; }
.m-etapa small { font-size: 10px; color: #f3dfb0aa; }
.m-etapa.hecha { border-color: #2f9a3a; }
.m-etapa.elegida { box-shadow: 0 0 0 2px #ffd27a, 0 0 10px #ffd27a; background: linear-gradient(#a0702e, #6b4a20); }
.m-etapa:disabled { opacity: .45; cursor: not-allowed; }
#m-mapa.rivales { height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 10px; background: #0003; }
.m-rival { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 10px; background: #f7ecd2ee; color: #3d2810;
  border: 2px solid #7a4a20; border-left: 8px solid var(--c); }
.m-rival .m-ico { font-size: 26px; }
.m-rival .m-nom { font-weight: bold; font-size: 13px; }
.m-rival .m-niv { font-size: 11px; color: #7a4a20; }
.m-rival .m-espera { font-size: 11px; color: #a03a20; }
.m-rival.bloq { opacity: .6; filter: grayscale(.6); }
.m-rival.elegida { box-shadow: 0 0 0 3px #ffd27a, 0 0 14px #ffd27a; }

/* ficha de la unidad tocada */
#ficha { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; min-width: 260px; max-width: min(460px, 90vw);
  background: linear-gradient(#5a3b1ccc, #2a1b0aee); border: 2px solid #c9a24a; border-radius: 12px; padding: 8px 12px; font-size: 13px; color: #f3dfb0;
  box-shadow: 0 4px 16px #0008; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
#ficha.oculto { display: none; }
#ficha .f-tit { font-weight: bold; font-size: 15px; color: #ffd27a; display: flex; justify-content: space-between; gap: 8px; }
#ficha .f-bando { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #2f6a2a; color: #fff; }
#ficha .f-bando.enemigo { background: #a03020; }
#ficha .f-bando.animal { background: #6a5a3a; }
#ficha .f-extra { font-size: 12px; color: #c8ffc8; }
#ficha .vida { height: 6px; }
#ficha .vida { background: #0008; border-radius: 4px; overflow: hidden; margin: 2px 0; }
#ficha .vida div { height: 100%; background: #6fd36f; }
/* volumen en Opciones */
.i-vols { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #0003; border-radius: 8px; }
.i-vol { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; font-size: 14px; color: #f3dfb0; }
.i-vol input { accent-color: #d9a441; width: 100%; }
.i-vol span { text-align: right; font-size: 12px; }
/* libro de dragones y silueta del altar */
.libro-dragones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.libro-dragones .ld { position: relative; background: #0004; border-radius: 6px; padding: 2px; text-align: center; font-size: 10px; color: #f3dfb0; }
.libro-dragones .ld img { width: 48px; height: 48px; display: block; margin: 0 auto; }
.libro-dragones .ld .ld-ico { display: block; font-size: 26px; line-height: 48px; }
.libro-dragones .ld.oculto-d { color: #8a7a60; }
.libro-dragones .ld i { position: absolute; top: 1px; right: 4px; font-style: normal; font-size: 9px; color: #ffd27a; }
.silueta-fusion { display: flex; align-items: center; gap: 8px; }
.silueta-fusion img { width: 72px; height: 72px; filter: drop-shadow(0 0 6px #b070ff); }
/* miniaturas propias (sprites del juego) en el camino del reino y la subida de nivel */
.mini { display: inline-block; vertical-align: middle; background-repeat: no-repeat; }
.ico-desb { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 34px; margin-right: 6px; vertical-align: middle; }
.ico-desb b { position: absolute; right: -2px; bottom: -2px; background: #2a1b0a; color: #ffd27a; border: 1px solid #ffd27a; border-radius: 8px; font-size: 9px; line-height: 12px; padding: 0 3px; }
.desb { display: flex; align-items: center; }
.desb em { font-style: normal; }
.desb.chico .ico-desb { width: 30px; min-height: 24px; }
.proximo .ico-desb { width: 28px; min-height: 22px; margin-right: 2px; }
.libro-dragones .ld .mini { display: block; margin: 0 auto; }
.costo-mini { display: inline-flex; align-items: center; white-space: nowrap; margin-right: 7px; width: auto; } .costo-mini .mini { margin-right: 2px; flex: none; }
.dragon-fila { display: flex; align-items: center; gap: 6px; } .dragon-fila .mini { flex: none; }
/* bestiario */
#bestiario { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#bestiario.oculto { display: none; }
.caja-bestiario { width: min(920px, 96vw); }
#bes-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; }
#bes-contenido h2 small { font-size: 13px; color: #c9b48a; }
.b-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.b-tab { background: #3a2a14; color: #f3dfb0; border: 1px solid #7a5a2a; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 13px; }
.b-tab.activa { background: #7a5a2a; color: #fff3cf; }
.b-tab small { color: #d8c390; }
.b-pie { font-size: 12px; color: #d8c390; margin-bottom: 6px; }
.b-pie.hecha { color: #9dff7a; }
.b-cartas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; overflow-y: auto; padding-right: 4px; }
.b-carta { background: #0004; border: 1px solid #7a5a2a88; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 12px; }
.b-carta .mini { margin-bottom: 2px; }
.b-carta b { font-size: 14px; color: #ffe9b0; }
.b-carta i { color: #e6d3a8; font-size: 11.5px; }
.b-carta small { color: #d8c390; }
.b-carta.oculta { opacity: 0.75; }
.b-estrellas { color: #ffd23a; letter-spacing: 2px; font-size: 15px; }
.b-poderes { color: #ffb08a !important; }
.b-donde { color: #9fd0ff !important; }

/* hechizos */
#hechizos { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#hechizos.oculto, #h-barra.oculto { display: none; }
#hech-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; }
#hech-contenido h2 small { font-size: 13px; color: #c9b48a; }
.h-ico { font-size: 30px; line-height: 1.2; }
.h-mana-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; color: #e0c8ff; }
.h-mana-fila b { color: #f0e0ff; }
.h-comprar, .h-aprender { background: #5a3a8a; color: #fff; border: 1px solid #b08aff; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-weight: bold; margin-top: 4px; }
.h-comprar:disabled, .h-aprender:disabled { opacity: .45; cursor: default; }
#h-barra { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; align-items: center;
  background: #241434ee; border: 2px solid #b08aff; border-radius: 14px; padding: 6px 10px; box-shadow: 0 4px 14px #0008; max-width: calc(100vw - 32px); overflow-x: auto; }
.h-mana { color: #e8d4ff; font-weight: bold; white-space: nowrap; margin-right: 4px; }
.h-boton { position: relative; width: 44px; height: 44px; border-radius: 10px; background: #3a2458; border: 2px solid #7a5aaa; cursor: pointer; font-size: 22px; padding: 0; color: #fff; flex: none; }
.h-boton small { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: bold; color: #d8c0ff; }
.h-boton.activo { border-color: #ffe27a; box-shadow: 0 0 10px #ffe27a; }
.h-boton:disabled { opacity: .4; cursor: default; }
body.en-region #b-hechizos { display: none !important; }

/* colecciones */
#colecciones { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#colecciones.oculto { display: none; }
#col-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; }
#col-contenido .b-cartas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.col-filas { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 4px; }
.col-fila { display: flex; align-items: center; gap: 6px; text-align: left; background: #0003; border-radius: 6px; padding: 2px 6px; }
.col-fila span:not(.mini) { flex: 1; }
.col-fila .mini { flex: none; }
.col-fila.hecha { color: #9dff7a; }
.col-dar { background: #6a4a1a; color: #fff; border: 1px solid #c9a24a; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
.col-dar:disabled { opacity: .45; cursor: default; }

/* supervivencia, torneos y honor */
.m-modo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #3a2410; text-align: center; padding: 10px; }
.m-modo-ico { font-size: 54px; }
.m-modo b { font-size: 20px; }
.m-torneos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; color: #3a2410; overflow: auto; }
.m-col { background: #fff6; border: 1px solid #8a6a3a88; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.m-col h4 { margin: 0 0 4px; font-size: 14px; } .m-col h4 small { font-weight: normal; color: #6a4a2a; }
.m-rondas { display: flex; flex-direction: column; gap: 4px; }
.m-ronda { display: flex; flex-direction: column; background: #0001; border-radius: 8px; padding: 4px 6px; border: 2px solid transparent; }
.m-ronda.actual { border-color: #c9a24a; background: #ffe9a066; } .m-ronda.hecha { opacity: .7; } .m-ronda.hecha span::after { content: " ✔"; color: #2a7a1a; }
.m-ronda.perdida { opacity: .6; } .m-ronda.perdida span::after { content: " ✖"; color: #a02a1a; }
.m-puesto { display: flex; gap: 6px; align-items: center; padding: 3px 6px; border-radius: 6px; background: #0001; }
.m-puesto span { margin-left: auto; font-weight: bold; } .m-puesto.tu { background: #ffe9a099; font-weight: bold; }
.m-honor { display: flex; flex-direction: column; gap: 4px; } .m-honor b { font-size: 15px; }
@media (max-width: 640px) { .m-torneos { grid-template-columns: 1fr; } }
#m-mapa { flex: none; }

/* premio diario y dardos */
#diario, #dardos { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 23; }
#diario.oculto, #dardos.oculto { display: none; }
.caja-diario { width: min(760px, 96vw); }
#dia-contenido, #dar-contenido { display: flex; flex-direction: column; padding: 4px 14px 14px; color: #f3dfb0; gap: 6px; }
#dia-contenido h2 small, #dar-contenido h2 small { font-size: 13px; color: #c9b48a; }
.dia-fila { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dia-carta { background: #0004; border: 2px solid #7a5a2a88; border-radius: 10px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 11px; }
.dia-carta span { font-size: 26px; } .dia-carta i { color: #e6d3a8; }
.dia-carta.hecho { opacity: .55; } .dia-carta.hecho span::after { content: "✔"; font-size: 14px; color: #9dff7a; }
.dia-carta.hoy { border-color: #ffd23a; box-shadow: 0 0 12px #ffd23a88; background: #5a3b1c; }
.dia-carta.ekeko { border-color: #ff8ad8; background: linear-gradient(180deg, #6a2a52, #3a1a30); } .dia-carta.ekeko i { color: #ffe08a; font-weight: 600; }
.dia-lunes { background: #3a5a2a88; border: 1px solid #9dff7a88; border-radius: 10px; padding: 6px 10px; }
@media (max-width: 640px) { .dia-fila { grid-template-columns: repeat(4, 1fr); } }
.dardo-zona { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.dardo-tablero { position: relative; width: 260px; height: 260px; border-radius: 50%; flex: none;
  background: conic-gradient(#8a2a1a 0 60deg, #e8d6a8 60deg 120deg, #8a2a1a 120deg 180deg, #e8d6a8 180deg 240deg, #8a2a1a 240deg 300deg, #e8d6a8 300deg 360deg);
  border: 8px solid #3a2410; box-shadow: 0 6px 18px #000a, inset 0 0 0 30px #0002; }
.dardo-premio { position: absolute; transform: translate(-50%, -50%); font-size: 30px; filter: drop-shadow(0 2px 2px #0008); }
.dardo-premio.dado { opacity: .45; } .dardo-premio b { position: absolute; right: -10px; bottom: -4px; font-size: 16px; color: #9dff7a; }
.dardo-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: #2a1b0a; border: 3px solid #c9a24a;
  display: flex; align-items: center; justify-content: center; font-size: 22px; }
#dardo-flecha { position: absolute; left: 50%; top: 50%; width: 110px; height: 30px; margin-top: -15px; transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
  font-size: 34px; color: #fff3b0; text-align: right; line-height: 30px; text-shadow: 0 0 3px #000, 0 0 6px #000, 0 2px 4px #000; pointer-events: none; z-index: 2; }
.dardo-lista { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.dardo-lista div { background: #0003; border-radius: 6px; padding: 3px 8px; } .dardo-lista div.dado { color: #9dff7a; }

/* gemas */
#tienda-gemas { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#tienda-gemas.oculto { display: none; }
#tg-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; }
#tg-contenido h2 small { font-size: 13px; color: #9fe8ff; }
.rec.gemas b { color: #9fe8ff; }
/* íconos propios (atlas assets/iconos/iconos.webp) en lugar de los emojis: miden 1,25 veces la letra */
.ic { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.3em; background: url(assets/iconos/iconos.webp?v=9) no-repeat; background-size: var(--ic-ancho, 20em) auto; flex: none; }
.barra-mesa { display: block; width: 100%; height: 8px; border-radius: 4px; background: #0005; overflow: hidden; }
.barra-mesa i { display: block; height: 100%; background: linear-gradient(90deg, #c89a2a, #ffe08a); }
/* temporadas */
#temporada { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#temporada.oculto { display: none; }
#t-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; overflow-y: auto; }
#t-contenido h2 small { font-size: 13px; color: #ffb04a; }
.t-estado { margin: 6px 0; padding: 6px 10px; background: #0003; border-radius: 8px; }
.t-camino { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.t-escalon { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 8px; background: #0003; border: 1px solid #ffffff14; font-size: 12px; }
.t-escalon small { color: #c9a86a; } .t-escalon i { color: #ffb04a; font-style: normal; font-size: 11px; }
.t-escalon.hecho { background: #3a5a2a88; border-color: #9dff7a55; } .t-escalon.hecho b::after { content: " ✓"; color: #9dff7a; }
.t-escalon.sig { border-color: #ffb04a; box-shadow: 0 0 6px #ffb04a66; }
.t-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#b-temporada { background: linear-gradient(#a8521a, #6a2e0e); }
ul.novedades { margin: 8px 0 14px; padding-left: 20px; color: #f3dfb0; line-height: 1.5; text-align: left; }
body.en-region #b-temporada { display: none; }

/* ---------------------------------------------------------------- celular: control con el dedo y pantalla chica */
#tactil { display: none; }
canvas#mapa { touch-action: none; filter: saturate(1.25) contrast(1.06); }   /* los sprites salen algo pálidos de Blender: un poco más de color */
body.tactil #tactil { position: fixed; right: 10px; bottom: 124px; z-index: 8; display: flex; flex-direction: column; gap: 8px; }
body.tactil #tactil button { width: 46px; height: 46px; border-radius: 50%; font-size: 20px; padding: 0; box-shadow: 0 3px 8px #0008; }
body.tactil #tactil button.activa { border-color: #7fe07f; background: linear-gradient(#4f7a32, #2f4f1c); }
body.tactil #tactil button.oculto { display: none; }
body.en-inicio #tactil { display: none !important; }
#tc-atacar { display: none; }
body.tactil.en-region #tactil #tc-atacar { display: block; width: 58px; height: 58px; font-size: 26px; border-color: #ff8a5a; background: radial-gradient(circle at 35% 30%, #c8563e, #6b2a20 70%); }
@media (max-width: 760px), (max-height: 520px) {
  #barra { gap: 4px; padding: 4px 6px; }
  .rec { min-width: 0; padding: 2px 8px 2px 4px; gap: 3px; border-radius: 10px; }
  .rec .ico { font-size: 14px; }
  .rec b { font-size: 13px; }
  .xp { left: 22px; right: 6px; }
  #reino { display: none; }
  #incursion { margin-left: 2px; font-size: 12px; }
  /* compacta: oro, gemas, nivel y población; tocando la barra aparecen los demás */
  body.tactil:not(.barra-abierta) #barra .rec:not(.siempre), body.tactil:not(.barra-abierta) #reloj, body.tactil:not(.barra-abierta) #clima { display: none; }
  /* los botones van en el menú ☰ */
  body.tactil #barra .botones { display: none; }
  body.tactil.menu-abierto #barra .botones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: fixed; right: 64px; bottom: 124px; z-index: 31; margin: 0;
    background: #2a1b0af2; border: 2px solid #c9a24a; border-radius: 12px; padding: 8px; box-shadow: 0 6px 18px #000a; max-width: calc(100vw - 80px); }
  body.tactil.menu-abierto #barra .botones button { padding: 9px 10px; font-size: 14px; }
  body.tactil.menu-abierto #barra .botones button.oculto { display: none; }
  #minimapa { width: 120px; height: 60px; right: 8px; bottom: 8px; }
  body.tactil #tactil { right: 8px; bottom: 76px; gap: 6px; }
  body.tactil #tactil button { width: 42px; height: 42px; font-size: 18px; }
  body.tactil.menu-abierto #barra .botones { bottom: 76px; right: 58px; }
  #menu { left: 8px; right: 140px; bottom: 8px; }
  #b-construir { width: 62px; height: 62px; font-size: 26px; }
  #b-construir span { font-size: 10px; }
  #misiones { top: 92px; left: 6px; gap: 6px; }
  .mision { width: 44px; height: 44px; }
  #panel { left: auto; right: 58px; top: 42px; bottom: auto; width: min(280px, 46vw); max-height: calc(100vh - 52px); font-size: 12px; padding: 8px; }
  #panel button { margin-top: 4px; padding: 4px 8px; font-size: 12px; }
  #ficha { bottom: 76px; min-width: 0; max-width: calc(100vw - 70px); font-size: 12px; }
  #avisos { top: 44px; width: 92vw; font-size: 12px; }
  #region-hud { top: 44px; left: 8px; right: 8px; transform: none; font-size: 12px; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 5px 8px; }
  #region-hud button { padding: 4px 8px; font-size: 12px; }
  #h-barra { bottom: 8px; left: 8px; right: 140px; transform: none; flex-wrap: wrap; }
  /* ventanas: pestañas que se deslizan y regiones más chicas */
  .m-pestanas { gap: 4px; }
  .m-pestanas button { flex: none; padding: 4px 7px; font-size: 12px; }
  #m-mapa:not(.rivales) { height: 360px; }
  #m-mapa.vertical:not(.rivales) { height: 560px; }
  .m-region { min-width: 0; padding: 2px 4px; }
  .m-region .m-ico { font-size: 16px; }
  .m-region .m-nom { font-size: 9px; max-width: 64px; line-height: 1.1; }
  .m-region .m-niv { font-size: 9px; }
  #m-mapa.rivales { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* tarjetas de dos en dos (bestiario, hechizos, tienda, colecciones) */
  .b-cartas, #col-contenido .b-cartas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .b-cartas > * { font-size: 12px; }
  .t-camino { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .cartas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 8px; gap: 6px; }
  /* el Rey del tutorial, más chico */
  #tutorial { left: 78px; bottom: 8px; max-width: min(430px, calc(100vw - 200px)); gap: 6px; }
  .tu-rey { width: 54px; height: 76px; }
  .tu-cuerpo { padding: 6px 9px; gap: 4px; font-size: 12px; }
  .tu-botones button { padding: 3px 8px; font-size: 11px; }
  .i-titulo { font-size: min(92px, 17vw); letter-spacing: 4px; }
  .i-titulo small { font-size: 15px; }
}

/* celular parado: se pide girarlo (el juego es horizontal) */
#girar { display: none; }
#colocando #b-poner { background: linear-gradient(#4f7a32, #2f4f1c); border-color: #7fe07f; font-weight: bold; }
@media (orientation: portrait) {
  body.tactil #girar { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(circle at 50% 40%, #4a3218, #1a1008); color: #ffe9b0; text-align: center; padding: 20px; }
  #girar .g-cel { font-size: 84px; animation: girarCel 2s ease-in-out infinite; }
  #girar .g-txt { font: bold 22px Georgia, serif; }
  #girar button { font-size: 16px; padding: 10px 16px; }
}
@keyframes girarCel { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
/* comprar gemas (prototipo) y muro de donaciones */
.tg-tabs { margin: 0 0 8px; flex-wrap: wrap; }
.tg-causa { background: #1d3a1d; border: 1px solid #5fbf5f88; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 13px; color: #d9f5c8; }
.tg-apodo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin-bottom: 8px; color: #e8d6a8; }
.tg-apodo input[type=text] { background: #0006; border: 1px solid #7a5a2a; border-radius: 6px; color: #fff; padding: 3px 8px; width: 130px; font: inherit; }
#tg-apodo-err { color: #ff8a7a; }
.b-carta.paquete { position: relative; gap: 4px; }
.pq-ico { font-size: 34px; line-height: 1.1; }
.pq-gemas { font-size: 16px; color: #9fe8ff; font-weight: bold; }
.pq-extra { position: absolute; top: 6px; right: 6px; background: #c0392b; color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: bold; }
.pq-causa { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #5fbf5f66; color: #b8eaa0; font-size: 11px; }
.tg-muro { display: flex; gap: 8px; margin-bottom: 8px; }
.tg-muro div { flex: 1; background: #0004; border-radius: 10px; padding: 8px; text-align: center; display: flex; flex-direction: column; }
.tg-muro b { font-size: 18px; color: #ffd27a; } .tg-muro b.verde { color: #9dff7a; }
.tg-apodos { font-size: 13px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tg-apodos span { background: #1d3a1d; border-radius: 12px; padding: 2px 10px; color: #d9f5c8; }
.tg-entregas { border: 2px dashed #7a5a2a88; border-radius: 10px; padding: 24px; text-align: center; color: #b8a070; margin-bottom: 8px; }
#tg-contenido > * { flex-shrink: 0; }
#tg-contenido > .b-cartas { flex-shrink: 1; min-height: 150px; }
@media (max-height: 520px) { #tg-contenido { overflow-y: auto; } #tg-contenido > .b-cartas { flex-shrink: 0; overflow: visible; } }
body.tactil .tg-causa { font-size: 12px; padding: 5px 8px; }
.tg-sub { margin: 6px 0 4px; font-size: 15px; color: #ffd27a; } .tg-sub small { font-size: 11px; color: #c9b27a; font-weight: normal; }
.cofre-lista { list-style: none; margin: 2px 0 4px; padding: 0; font-size: 12px; text-align: left; }
.cofre-lista li { display: flex; align-items: center; gap: 4px; }
.b-carta.cofre-t.ya { opacity: 0.55; }
#tg-contenido > .b-cartas.cofres-t { flex-shrink: 0; min-height: 0; }
.tg-ranking { display: flex; gap: 8px; margin-bottom: 8px; }
.tg-ranking > div { flex: 1; background: #0004; border-radius: 10px; padding: 6px 10px; }
.tg-ranking ol { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.tg-ranking li { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; } .tg-ranking li b { color: #9dff7a; }
.cofre-odds { list-style: none; margin: 4px 0; padding: 0; width: 100%; font-size: 11px; }
.cofre-odds li { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px dotted #7a5a2a55; padding: 1px 0; text-align: left; }
.cofre-odds li b { color: #ffd27a; white-space: nowrap; }
.b-carta.cofre-a.plata { border-color: #c8d0d8aa; } .b-carta.cofre-a.oro { border-color: #ffd23aaa; box-shadow: 0 0 8px #ffd23a33 inset; }
/* abrir un cofre ganado: tiembla, estalla en luz y muestra el premio */
#abrir-cofre { position: fixed; inset: 0; z-index: 40; background: radial-gradient(#000c, #000f); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; animation: ac-entra .25s ease-out; }
@keyframes ac-entra { from { opacity: 0; } }
.ac-caja { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 280px; min-height: 280px; }
.ac-rayos { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, var(--ac-luz) 0deg 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(#000 20%, transparent 68%); mask: radial-gradient(#000 20%, transparent 68%);
  animation: ac-gira 9s linear infinite; }
@keyframes ac-gira { to { transform: rotate(360deg); } }
#abrir-cofre { --ac-luz: #e0a060; } #abrir-cofre.ac-plata { --ac-luz: #dfe8f0; } #abrir-cofre.ac-oro { --ac-luz: #ffd23a; }
.ac-cofre { position: relative; font-size: 120px; line-height: 1; animation: ac-tiembla 1.3s ease-in forwards; filter: drop-shadow(0 0 18px var(--ac-luz)); }
@keyframes ac-tiembla {
  0% { transform: scale(.6); } 15% { transform: scale(1.05); }
  30%, 50%, 70%, 85% { transform: scale(1.05) rotate(-8deg); } 40%, 60%, 78%, 92% { transform: scale(1.1) rotate(8deg); }
  100% { transform: scale(1.5); opacity: 0; filter: brightness(4) drop-shadow(0 0 40px #fff); } }
.ac-texto { position: relative; margin-top: 18px; font-size: 20px; color: #ffe9b0; text-shadow: 0 2px 4px #000; }
.ac-premio { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #f3dfb0; animation: ac-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes ac-pop { from { transform: scale(.2); opacity: 0; } }
.ac-premio b { font-size: 24px; color: #fff3c0; text-shadow: 0 2px 6px #000; max-width: 80vw; }
.ac-premio small { font-size: 14px; color: #e8d6a8; text-shadow: 0 1px 3px #000; }
.ac-rareza { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; padding: 2px 14px; border-radius: 12px; background: #0008; color: #ccc; }
.raro .ac-rareza { color: #8fd0ff; box-shadow: 0 0 12px #3fa0ff; } .epico .ac-rareza { color: #e0a8ff; box-shadow: 0 0 14px #b04fff; }
.legendario .ac-rareza { color: #ffd23a; box-shadow: 0 0 18px #ffb000; animation: ac-brilla 1s ease-in-out infinite alternate; }
@keyframes ac-brilla { to { box-shadow: 0 0 30px #ffd23a; } }
#abrir-cofre.raro { --ac-luz: #5fb4ff; } #abrir-cofre.epico { --ac-luz: #c070ff; } #abrir-cofre.legendario { --ac-luz: #ffd23a; }
.ac-mini { display: flex; gap: 10px; align-items: flex-end; min-height: 100px; filter: drop-shadow(0 0 14px var(--ac-luz)); }
.ac-ico { font-size: 90px; line-height: 1; }
.ac-botones { display: flex; gap: 10px; margin-top: 10px; }
.ac-botones button { font-size: 16px; padding: 8px 20px; }
@media (max-height: 520px) { .ac-cofre { font-size: 80px; } .ac-ico { font-size: 60px; } .ac-mini { min-height: 70px; } .ac-rayos { width: 360px; height: 360px; margin: -180px 0 0 -180px; } }
#b-gemas { position: relative; }
.insignia-cofres { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e0302a; color: #fff; font-size: 12px; font-weight: bold;
  line-height: 20px; text-align: center; box-shadow: 0 0 0 2px #2a1a08, 0 2px 4px #000a; animation: insignia-late 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes insignia-late { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(0.95); } }
#tc-menu { position: relative; }
.edif .tarda { font-size: 11px; color: #ffe2a0; }
#b-ver.activo { background: linear-gradient(#4f7a32, #2f4f1c); border-color: #7fe07f; }
/* leyendas y dioses que todavía son mucho más fuertes que tú: tarjeta roja */
.m-rival.fuerte { background: linear-gradient(#f3c0b0ee, #e8a090ee); box-shadow: inset 0 0 0 2px #c0302acc, 0 0 10px #ff3a2a55; }
.m-rival.fuerte .m-ico { filter: drop-shadow(0 0 4px #ff2a1a) sepia(0.3) saturate(1.4) hue-rotate(-15deg); }
.m-rival.fuerte .m-niv { color: #8a1a10; font-weight: bold; }
/* la vida del jefe, grande arriba */
#barra-jefe { position: fixed; top: 128px; left: 50%; transform: translateX(-50%); width: min(560px, 70vw); z-index: 9; pointer-events: none; text-align: center; }
#barra-jefe.oculto { display: none; }
#barra-jefe .bj-nom { font-size: 18px; font-weight: bold; color: #fff3d0; text-shadow: 0 2px 4px #000, 0 0 8px var(--c); margin-bottom: 3px; }
#barra-jefe .bj-barra { position: relative; height: 18px; border-radius: 9px; background: #000b; border: 2px solid #c9a24a; box-shadow: 0 2px 8px #000a; overflow: hidden; }
#barra-jefe .bj-vida { height: 100%; width: 100%; background: linear-gradient(#ff6a4a, #b01a10); box-shadow: 0 0 10px var(--c) inset; transition: width .15s; }
#barra-jefe .bj-num { position: absolute; inset: 0; font-size: 12px; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
body.tactil #barra-jefe { top: 52px; width: 50vw; }
body.tactil #barra-jefe .bj-nom { font-size: 13px; }
/* ventana de la tumba */
#tumba-v { position: fixed; inset: 0; background: #0007; display: flex; align-items: center; justify-content: center; z-index: 22; }
#tumba-v.oculto { display: none; }
#tb-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 14px 14px; color: #f3dfb0; }
#tb-contenido > * { flex-shrink: 0; }
#tb-contenido > .b-cartas { flex-shrink: 1; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.tb-carta { gap: 4px; }
.tb-n { color: #9fe8ff; }
.tb-costo { font-size: 12px; color: #ffe2a0; }
.tb-falta { color: #ff8a7a; }
.tb-botones { display: flex; gap: 6px; }
/* barra de poderes de lo seleccionado */
#barra-poderes { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; gap: 10px; align-items: flex-end; max-width: calc(100vw - 360px); overflow-x: auto; padding: 4px 6px; }
#barra-poderes.oculto { display: none; }
#barra-poderes.sobre-hechizos { bottom: 92px; }
.bp-grupo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: #1a1008cc; border: 2px solid #6b4a20; flex-shrink: 0; }
.bp-grupo.activo { border-color: #ffd27a; box-shadow: 0 0 10px #ffd27a66; }
.bp-poderes { display: flex; gap: 4px; }
.bp-poder { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 8px; overflow: hidden; background: linear-gradient(#5a3a18, #2e1d0b); border: 1px solid #c9a24a; }
.bp-poder.listo { box-shadow: 0 0 8px #ffe08a99; }
.bp-ico { font-size: 22px; line-height: 40px; }
.bp-rec { position: absolute; inset: 0; background: conic-gradient(#000b calc(var(--k, 0) * 360deg), transparent 0); pointer-events: none; }
.bp-seg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.bp-tecla { position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: bold; color: #ffd27a; text-shadow: 0 1px 2px #000; }
.bp-retrato { position: relative; width: 52px; height: 46px; padding: 0; border-radius: 8px; background: #0005; border: 1px solid #7a5a2a; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.bp-n { position: absolute; right: 2px; bottom: 1px; font-size: 11px; font-weight: bold; color: #9fe8ff; text-shadow: 0 1px 2px #000; }
.bp-num { position: absolute; left: 3px; top: 1px; font-size: 10px; color: #ffe2a0; text-shadow: 0 1px 2px #000; }
body.tactil #barra-poderes { max-width: calc(100vw - 150px); bottom: 6px; }
body.tactil .bp-poder { width: 44px; height: 44px; }
#barra-poderes { flex-direction: column; align-items: center; }
.bp-grupos { display: flex; gap: 10px; align-items: flex-end; }
.bp-uno-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.bp-uno { position: relative; width: 36px; height: 40px; padding: 0; border-radius: 6px; background: #1a1008cc; border: 1px solid #7a5a2a; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; }
.bp-uno .bp-vida { width: 30px; height: 4px; margin: 1px 0 2px; background: #000a; border-radius: 2px; overflow: hidden; }
.bp-uno .bp-vida span { display: block; height: 100%; width: 100%; }
.bp-uno.muriendo { border-color: #ff4a3a; animation: bp-late 0.8s ease-in-out infinite alternate; }
@keyframes bp-late { to { box-shadow: 0 0 8px #ff3a2a; } }
#barra-poderes { overflow: visible; }
.bp-grupos { flex-wrap: wrap; justify-content: center; }
/* la barra de poderes y las vidas, a la mitad de tamaño */
#barra-poderes { gap: 3px; padding: 2px 4px; }
.bp-grupos { gap: 5px; }
.bp-grupo { gap: 2px; padding: 2px; border-width: 1px; border-radius: 6px; }
.bp-poderes { gap: 2px; }
.bp-poder { width: 22px; height: 22px; border-radius: 5px; }
.bp-ico { font-size: 13px; line-height: 22px; }
.bp-seg { font-size: 9px; }
.bp-tecla { font-size: 7px; right: 0; bottom: -1px; }
.bp-retrato { width: 28px; height: 25px; border-radius: 5px; }
.bp-n { font-size: 8px; right: 1px; bottom: 0; }
.bp-num { font-size: 7px; left: 1px; top: 0; }
.bp-uno-fila { gap: 2px; }
.bp-uno { width: 19px; height: 23px; border-radius: 4px; }
.bp-uno .bp-vida { width: 16px; height: 3px; margin: 0 0 1px; }
body.tactil .bp-poder { width: 30px; height: 30px; }
body.tactil .bp-ico { font-size: 17px; line-height: 30px; }
body.tactil .bp-uno { width: 24px; height: 28px; }
/* confirmar dentro del juego */
#confirmar { position: fixed; inset: 0; background: #0008; display: flex; align-items: center; justify-content: center; z-index: 60; }
#confirmar.oculto { display: none; }
#confirmar .cf-caja { background: #2a1b0af5; border: 2px solid #c9a24a; border-radius: 12px; padding: 16px 18px; max-width: min(420px, 90vw); color: #f3dfb0; text-align: center; box-shadow: 0 6px 20px #000a; }
#confirmar .cf-texto { font-size: 15px; margin-bottom: 12px; }
#confirmar .cf-botones { display: flex; gap: 10px; justify-content: center; }
#confirmar .cf-botones button { padding: 8px 16px; font-size: 14px; }
/* elegir las almas */
.am-carta { cursor: pointer; border-width: 2px; }
.am-carta.elegida { border-color: #c8b0ff; box-shadow: 0 0 10px #a07aff88; }
.am-pie { display: flex; align-items: center; gap: 8px; background: #3a2a5a99; border: 1px solid #a07aff88; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; color: #efe6ff; }
/* la ventana del altar: grande, que se note que es importante */
#altar-v { position: fixed; inset: 0; background: radial-gradient(#2a103acc, #000d); display: flex; align-items: center; justify-content: center; z-index: 22; }
#altar-v.oculto { display: none; }
.caja-altar { width: min(980px, 96vw); height: min(86vh, 760px); background: linear-gradient(#3a2350, #1a0f22); border-color: #b48aff; box-shadow: 0 0 40px #8a5aff66; }
#al-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 18px 16px; color: #efe6ff; overflow-y: auto; }
#al-contenido h2 { color: #e8d4ff; text-shadow: 0 0 10px #a070ff; }
.al-tabs { margin-bottom: 10px; }
.al-mesa { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 8px 0 14px; flex-wrap: wrap; }
.al-ranura { width: 170px; height: 190px; border-radius: 16px; border: 3px dashed #a07aff; background: #120a1acc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #efe6ff; }
.al-ranura.llena { border-style: solid; box-shadow: 0 0 16px #a07aff66 inset; }
.al-ranura.eligiendo { border-color: #ffd27a; box-shadow: 0 0 18px #ffd27a88; }
.al-ranura b { font-size: 14px; } .al-ranura small { color: #b8a0e0; }
.al-mas { font-size: 54px; color: #b48aff; line-height: 1; }
.al-centro { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 170px; }
.al-incognita { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60px; font-weight: bold; color: #e8d4ff;
  background: radial-gradient(#5a2a8a, #1a0a2a); box-shadow: 0 0 30px #a070ff, 0 0 60px #6a3aff66 inset; animation: al-late 2s ease-in-out infinite alternate; }
@keyframes al-late { to { box-shadow: 0 0 46px #c090ff, 0 0 60px #6a3aff99 inset; } }
.al-suerte { color: #ffe08a; font-size: 15px; letter-spacing: 2px; }
.al-costo { color: #e8d4ff; font-size: 13px; }
.al-forma { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0; }
.al-silueta { width: 180px; height: 180px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(#3a1a5a, #0a0510);
  box-shadow: 0 0 40px #a070ff; animation: al-late 1.6s ease-in-out infinite alternate; }
.al-silueta .mini { transform: scale(1.6); }
.al-silueta.listo { background: radial-gradient(#7a5aaa, #2a1a4a); box-shadow: 0 0 60px #ffe08a; }
.al-txt { font-size: 18px; }
.al-elegir { max-height: 40vh; }
#al-gemas { font-size: 15px; padding: 8px 18px; }
/* la ventana del almacén */
#almacen-v { position: fixed; inset: 0; background: #0009; display: flex; align-items: center; justify-content: center; z-index: 22; }
#almacen-v.oculto { display: none; }
.caja-almacen { width: min(940px, 96vw); min-height: min(320px, 84vh); max-height: min(84vh, 720px); }   /* vacía ocupaba toda la pantalla */
.alm-vacio { text-align: center; padding: 26px 10px; font-size: 14px; opacity: .85; line-height: 1.6; }
.alm-vacio .alm-ico { display: block; font-size: 40px; margin-bottom: 6px; }
#alm-contenido { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 0 16px 14px; color: #f3dfb0; }
#alm-contenido > * { flex-shrink: 0; }
#alm-contenido > .b-cartas { flex-shrink: 1; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
#alm-contenido h2 small { font-size: 13px; color: #9fe8ff; }
.alm-barra { height: 8px; border-radius: 4px; background: #0006; margin: 0 0 10px; overflow: hidden; }
.alm-barra div { height: 100%; background: linear-gradient(90deg, #6ad14a, #f0c030); }
.h-aprender.vender { background: linear-gradient(#6a5a1a, #3a300a); }

/* la ventana de los edificios importantes (cuarteles, herrería, torre de dragones, nidos): centrada y compacta */
#panel-fondo { position: fixed; inset: 0; background: #0007; z-index: 20; }
#panel-fondo.oculto { display: none; }
#panel.grande { left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%); width: min(500px, 94vw) !important; max-height: 78vh !important; z-index: 21; font-size: 13px; padding: 12px 14px; }
#panel.grande h3 { font-size: 18px; margin-right: 34px; }
#panel.grande .cerrar-grande { position: absolute; top: 8px; right: 10px; width: auto; margin: 0; padding: 2px 8px; font-size: 13px; }
#panel.grande #panel-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: flex-start; }
#panel.grande #panel-botones button { margin: 0 !important; }
#panel.grande #panel-botones button.carta-u { flex: 0 0 calc((100% - 18px) / 4); }
#panel.grande #panel-botones button:not(.carta-u) { flex: 1 1 100%; width: auto !important; padding: 5px 10px; font-size: 13px; order: 5; }
#panel.grande #panel-botones button.gema, #panel.grande #panel-botones button.etiqueta { order: -1; }
#panel.grande #panel-botones button.par { flex: 1 1 calc(50% - 3px); order: 9; }
#panel.grande #panel-botones::after { content: ""; order: 4; flex-basis: 100%; height: 0; }   /* salto de línea: las tarjetas arriba, los botones abajo */
#panel.grande button.carta-u { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; font-size: 11px; font-weight: normal; }
#panel.grande button.carta-u b { font-size: 12px; }
#panel.grande button.carta-u small { color: #f3dfb0; font-size: 11px; }
#panel.grande button.carta-u.bloq { filter: grayscale(.5); }
#panel.grande button.carta-u.hecha { border-color: #6ad14a; }
.cu-mini { min-height: 40px; display: flex; align-items: flex-end; }
.cu-ico { font-size: 22px; }
.cu-tropas { display: flex; gap: 1px; flex-wrap: wrap; justify-content: center; }
.cola-u { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 6px 0; }
.cu-hueco { background: #0005; border: 1px solid #c9a24a88; border-radius: 6px; padding: 2px; display: flex; flex-direction: column; align-items: center; min-height: 40px; justify-content: flex-end; font-size: 10px; }
.cu-hueco.vacio { color: #f3dfb066; justify-content: center; }
.cu-barra { width: 90%; height: 4px; background: #0008; border-radius: 3px; overflow: hidden; margin-top: 2px; }
.cu-barra div { height: 100%; background: #ffd27a; }
@media (max-width: 600px) { #panel.grande #panel-botones button.carta-u { flex-basis: calc((100% - 12px) / 3); } }
.dr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 4px; margin: 4px 0; }
.dr-carta { background: #0004; border: 1px solid #7a5a2a88; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 11px; }
#panel.grande .dragon-fila { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* la explicación del puzle al entrar a una región */
#puzle-v { position: fixed; inset: 0; background: #0009; display: flex; align-items: center; justify-content: center; z-index: 23; }
#puzle-v.oculto { display: none; }
.caja-puzle { width: min(620px, 94vw); }
#pz-contenido { padding: 6px 26px 22px; color: #f3dfb0; text-align: center; display: flex; flex-direction: column; align-items: center; }
#pz-contenido h2 { margin: 4px 0 10px; color: #ffd27a; }
.pz-ico { font-size: 64px; line-height: 1; }
.pz-txt { font-size: 19px; line-height: 1.45; margin: 0 0 16px; }
#pz-ok { font-size: 18px; padding: 8px 26px; }
/* los rangos de una leyenda */
.ly-rangos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.ly-rangos button { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; font-size: 14px; width: auto; margin: 0; }
.ly-rangos button small { font-size: 11px; color: #f3dfb0; }
.ly-rangos button.activa { border-color: #ffd27a; box-shadow: 0 0 0 2px #ffd27a88 inset; background: linear-gradient(#7a5a1a, #4a3410); }
/* ícono de lo recogido volando a su contador */
.vuela-ico { position: fixed; z-index: 60; pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); will-change: transform; }
.vuela-ico img, .vuela-ico .ico3d { width: 100%; height: 100%; }
.rec.golpe .ico { animation: golpe-rec .3s ease-out; display: inline-block; }
@keyframes golpe-rec { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
/* elegir qué poder cambia un híbrido que ya tiene 4 */
.modal-poder { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: #0008; }
.modal-poder.oculto { display: none; }
.modal-poder .mp-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.modal-poder .mp-lista button { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid #c9a24a; background: #3a2046; color: #fff3d0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.modal-poder .mp-lista button:hover { background: #57306a; }
.modal-poder small { color: #d8c8e8; font-size: 12px; }
/* Favor del Rey: insignia junto al nivel */
#r-favor { font-size: 11px; margin-left: 4px; color: #ffe27a; font-weight: bold; text-shadow: 0 0 6px #ffb300; }
#r-favor.oculto { display: none; }
/* arena: tabla de la liga y tienda */
.ar-tabla { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; width: 100%; max-width: 320px; font-size: 13px; }
.ar-fila { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; padding: 2px 6px; border-radius: 5px; }
.ar-fila.yo { background: #ffe27a33; font-weight: bold; }
.ar-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 6px; }
.ar-tienda button { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; }
.ar-tienda small { opacity: .85; font-size: 12px; }
.ar-tienda .ar-tesoro { border-color: #ffd66a; }
.al-extra { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #ffffff22; }
.al-extra .fila { display: flex; align-items: center; gap: 8px; }
/* el altar de héroes: tres cartas grandes, la del héroe actual resaltada aunque no se pueda tocar */
#panel.grande #panel-botones button.carta-heroe { flex: 0 0 calc((100% - 12px) / 3); padding: 8px 6px; gap: 2px; }
#panel.grande #panel-botones button.carta-heroe small { line-height: 1.25; text-align: center; }
#panel.grande #panel-botones button.carta-heroe.elegida { opacity: 1; filter: none; box-shadow: 0 0 0 2px #ffd27a, 0 0 12px #ffd27a88; cursor: default; }
#medidor { position: fixed; left: 8px; bottom: 96px; z-index: 30; background: #000b; color: #f3dfb0; font: 12px/1.4 ui-monospace, Menlo, monospace; padding: 5px 8px; border-radius: 6px; pointer-events: none; }
/* los Rumores del altar: siluetas de las almas nuevas del mes */
.am-rumores { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: #2a1840cc; border: 1px solid #8a60c8; color: #e8d4ff; }
.am-siluetas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.am-silueta { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
#desync { position: fixed; inset: 0; z-index: 9999; background: #000d; display: flex; align-items: center; justify-content: center; padding: 16px; }
#desync .caja-d { width: min(420px, 100%); background: linear-gradient(#5a3b1c, #2a1b0a); border: 3px solid #c9a24a; border-radius: 14px; padding: 20px; text-align: center; color: #f3dfb0; box-shadow: 0 8px 30px #000c; }
#desync .caja-d b { display: block; font-size: 19px; color: #ffd27a; margin-bottom: 8px; }
#desync button { margin-top: 14px; padding: 10px 18px; font-size: 16px; }