/* Estilos de casillas y comportamiento visual */
#board{position:absolute;display:block}

.tile{
  position:absolute;
  width:64px;
  height:32px;
  box-sizing:border-box;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border:2px solid #000;
  background:transparent;
}

.tile.selected{outline:3px solid yellow;outline-offset:3px}

/* Selected unit highlight (yellow outline) */
.unit.selectedUnit{outline:3px solid yellow;outline-offset:4px;box-shadow:0 0 6px rgba(255,200,50,0.6)}

/* Unidad: la barra HP va arriba de la unidad (sobre el rombo). Las unidades se posicionan sobre el rombo (no dentro).
   Las imágenes de unidades se cargan desde la raíz: Bow.svg, Cavalry.png, Spear.svg, Warhrse.svg */
.unit{
  position:absolute; /* se posiciona en el tablero (no dentro del tile) */
  transform:translate(-50%,-50%);
  z-index:30;
  transition:left .25s ease, top .25s ease;
  display:flex;align-items:center;justify-content:center;
}
.unit img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

.hp{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:100%;
  margin-bottom:6px;
  width:40px;
  height:6px;
  background:rgba(0,0,0,0.15);
  overflow:hidden;
}
.hp > i{display:block;height:100%;background:lime;width:100%}

.tooltip{
  position:fixed;
  pointer-events:none;
  background:#fff;
  color:#000;
  padding:6px 8px;
  font-size:12px;
  border:1px solid #333;
  display:none;
  z-index:1000;
}

#tucolor{
  position:absolute;
  left:8px;
  bottom:8px;
  width:28px;
  height:28px;
  border:2px solid #000;
  box-sizing:border-box;
}

/* Thinking timer shown top-right inside #page */
.thinkTimer{
  position:absolute;
  right:8px;
  top:8px;
  z-index:90;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  background:rgba(255,255,255,0.95);
  border:1px solid #333;
  border-radius:6px;
  font-size:13px;
  color:#000;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.thinkTimer .thinkText{font-weight:600}

/* Unidad visual dentro de la casilla - tamaño proporcional a la salud base */
.unit{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  background:#222;
  border:2px solid rgba(0,0,0,0.6);
  box-sizing:border-box;
}

/* Partículas / salpicadura de sangre al morir */
.blood{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(1);
  width:30px;
  height:30px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,0,0,0.95) 0%, rgba(200,0,0,0.9) 40%, rgba(120,0,0,0.7) 70%, rgba(0,0,0,0) 100%);
  pointer-events:none;
  animation: splash 0.5s forwards;
  mix-blend-mode:normal;
}

/* Lista de civilizaciones (panel lateral dentro de #page) */

/* Civ list: horizontal, centered at top inside #page */
.civItem{display:flex;align-items:center}
#civList{
  position:absolute;left:8px;top:8px;z-index:70;font-size:12px;color:#000;display:flex;flex-direction:column;gap:8px;padding:4px 6px;background:transparent;
}
.civColor{width:26px;height:26px;border:2px solid #000;margin-right:6px;box-sizing:border-box;position:relative;border-radius:3px}
.civColor.turn{outline:3px solid yellow;outline-offset:2px}
.civMoves{position:absolute;right:-8px;bottom:-8px;background:#fff;border:1px solid #333;border-radius:3px;padding:2px 4px;font-size:11px}
.civName{white-space:nowrap;font-size:12px}

/* Modal / overlay for building units */
.shopOverlay{
  position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;z-index:200;
}
.shopModal{
  width:420px;max-width:90%;background:#fff;border-radius:8px;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,0.3);display:flex;flex-direction:column;gap:12px;align-items:center
}
.shopModal.setup{border-radius:0}

/* Dark theme */
body.dark-theme{background:#0b0b0b;color:#ddd}
body.dark-theme #page{background:#111}
body.dark-theme .tooltip{background:#222;color:#fff;border-color:#555}
.shopTitle{font-weight:700;font-size:16px}
.shopUnits{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.shopUnit{width:86px;height:86px;border:2px solid #222;border-radius:0px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;background:rgba(255,255,255,0.9);position:relative}
.shopUnit.disabled{opacity:0.35;pointer-events:none}
.shopUnit.selected{outline:3px solid #33aa33}
.shopUnit .price{position:absolute;left:6px;top:6px;background:rgba(255,255,255,0.95);border:1px solid #333;padding:2px 6px;border-radius:4px;font-size:12px}
.shopButtons{display:flex;gap:12px;justify-content:center;width:100%}
.btn{padding:8px 14px;border-radius:6px;border:1px solid #333;background:#eee;cursor:pointer}
.btn.primary{background:#2b7be9;color:#fff;border-color:#1c5fc1}

/* small context (right-click) menu above tile */
.miniMenu{position:absolute;padding:6px 8px;background:#fff;border:1px solid #333;border-radius:6px;z-index:250;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,0.2)}


@keyframes splash{
  0%{opacity:1; transform:translate(-50%,-50%) scale(0.6)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)}
}