/* =================================
   GUEIDE WARGAME - STYLES v11.2 (Limpio y Estable)
   Classic wood + High contrast
   ================================= */

:root{
  --board-max-size: 85vh;

  /* Classic wood palette */
  --color-dark-square: #191d24;
  --color-light-square: #4c5868;

  /* UI colors */
  --color-highlight: rgba(20,85,30,.50);
  --last-move-fill: rgba(255, 215, 64, .34);
  --last-move-edge: rgba(255, 214, 10, .92);
  --color-selected: rgba(255,235,59,.80);

  /* Panel + text */
  --panel-bg: #263238;
  --panel-text:#ffffff;
  --accent-color:#e74c3c;
}

body{
  margin:0;
  padding:0;
  background-color:#212121;
  font-family: "Segoe UI", sans-serif;
  color:#eee;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  overflow:hidden;
}

.main-layout{
  display:flex;
  flex-direction:row;
  gap:15px;
  padding:15px;
  background-color:#333;
  border-radius:8px;
  box-shadow:0 0 30px rgba(0,0,0,.7);
  max-height:98vh;
  max-width:1400px;
  align-items:flex-start;
}

/* --- BOARD --- */
#game-container{
  display:flex;
  flex-direction:row;
  height:var(--board-max-size);
  aspect-ratio: 9 / 9;
}

#rank-labels{
  display:none !important;
  flex-direction:column-reverse;
  justify-content:space-around;
  height:95%;
  margin-right:8px;
  font-weight:bold;
  color:#f0d9b5;
  padding:0;
}

.rank-label{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
}

#board-and-files{
  display:flex;
  flex-direction:column;
  height:100%;
  width:100%;
  aspect-ratio: 9 / 9;
}

#board{
  flex-grow:1;
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  grid-template-rows:repeat(9, 1fr);
  border:5px solid #282e36;
  background-color:var(--color-dark-square);
}

#file-labels{
  display:none !important;
  grid-template-columns:repeat(9, 1fr);
  margin-top:5px;
  font-weight:600;
  text-align:center;
  color:#f0d9b5;
  font-size:.82rem;
  letter-spacing:.4px;
}

/* --- SQUARES --- */
.square{
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
}

.square.light{ background-color:var(--color-light-square); }
.square.dark { background-color:var(--color-dark-square); }

/* Frontier */
.square.frontier{
  border-top:2px dashed rgba(255,255,255,.22);
  border-bottom:2px dashed rgba(255,255,255,.22);
}

/* States */
.selected{
  background-color:var(--color-selected) !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,.20);
}

.highlight{ background-color:var(--color-highlight) !important; }

.highlight::before{
  content:'';
  position:absolute;
  width:22%;
  height:22%;
  background-color:rgba(0,0,0,.40);
  border-radius:50%;
}

.highlight.capture::after{
  content:'';
  position:absolute;
  width:85%;
  height:85%;
  border:4px solid rgba(200,0,0,.70);
  border-radius:50%;
}

/* --- ULTIMA JUGADA: SUTIL, ELEGANTE Y CLARAMENTE VISIBLE --- */
/* Origen (punto de salida): tinte azul tactico superpuesto + circulo central de radar */
.square.last-move-from {
  position: relative !important;
  box-shadow: inset 0 0 0 999px rgba(41, 128, 185, 0.35) !important;
}
.square.last-move-from::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px dashed rgba(52, 152, 219, 0.95);
  background: rgba(52, 152, 219, 0.25);
  pointer-events: none;
  z-index: 2;
}

/* Destino (punto de aterrizaje): tinte calido ambar + marco interior fino */
.square.last-move-to {
  position: relative !important;
  box-shadow: inset 0 0 0 1.5px rgba(249, 178, 51, 0.95), inset 0 0 0 999px rgba(249, 178, 51, 0.24) !important;
}

/* Compatibilidad general */
.square.last-move {
  box-shadow: inset 0 0 0 2px rgba(249, 178, 51, 0.7), inset 0 0 0 999px rgba(249, 178, 51, 0.20) !important;
}

/* Guebel (check) highlight */
.square.guebel{
  outline: 3px solid rgba(249,178,51,.95);
  outline-offset: -3px;
  box-shadow: 0 0 18px rgba(249,178,51,.55);
}

/* --- PIECES (SVG) --- */
.piece{
  width:94%;
  height:98%;
  border:none;
  background:transparent;
  box-shadow:none;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.50));
  z-index:10;
  object-fit:contain;
  transition: transform .10s ease;
}

.piece:hover{ transform: scale(1.08); }

.coord-in-square{ display:none; }

/* --- CONTROL PANEL --- */
#control-panel{
  width:280px;
  background-color:var(--panel-bg);
  color:var(--panel-text);
  padding:15px;
  border-radius:6px;
  display:flex;
  flex-direction:column;
  height:var(--board-max-size);
  overflow:hidden;
  border:1px solid #455a64;
}

.panel-header{ margin-bottom:12px; flex-shrink:0; }

.status-box{
  padding:9px 10px;
  font-size:.88rem;
  font-weight:bold;
  border-radius:4px;
  text-align:center;
  margin-bottom:10px;
  letter-spacing:.6px;
}

.status-box.normal{ background-color:#2e7d32; color:#fff; }
.status-box.guebel{ background-color:#f9b233; color:#111; }
.status-box.mortis{ background-color:#b71c1c; color:#fff; }

/* --- CLOCK PANEL & ACTION BUTTONS --- */
.match-actions {
  margin-top: 5px !important;     
  margin-bottom: 20px !important; 
}

.time-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important; /* Relojes casi pegados */
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.time-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:6px;
  transition:all .15s ease;
}

/* COLORES FORZADOS DE LOS RELOJES */
#dark-time-row {
  background-color: #261a18 !important; 
  border-color: #1a100e !important;
}
#dark-time-row .time-label, 
#dark-time-row .time-value {
  color: #ffffff !important; 
}

#white-time-row {
  background-color: #f5f0e6 !important; 
  border-color: #d7ccc8 !important;
}
#white-time-row .time-label,
#white-time-row .time-value {
  color: #111111 !important; 
}

.time-row.active{
  border-color:#ffd54f !important;
  box-shadow:0 0 0 2px rgba(255,213,79,.40) inset;
}

.time-row.danger{
  background:#7f1d1d !important;
  border-color:#ef5350 !important;
}

.time-label {
  font-size:.9rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
}

.time-value{
  font-family:Consolas, monospace;
  font-size:1.1rem;
}

/* --- LOG DE PARTIDA --- */
.log-header{
  font-size:.85rem;
  font-weight:bold;
  color:#b0bec5;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.panel-body{
  flex-grow:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#move-history-container{
  flex-grow:1;
  background-color:#37474f;
  border-radius:4px;
  overflow-y:auto;
  padding:0;
  margin-bottom:15px;
  border:1px solid #546e7a;
}

#move-history-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}

#move-history-table th{
  position:sticky;
  top:0;
  background-color:#263238;
  z-index:1;
  text-align:left;
  padding:8px;
  color:#eceff1;
  border-bottom:2px solid #78909c;
}

#move-history-table th#dark-player-name,
#move-history-table th#white-player-name{
  font-size:1.02rem;
  letter-spacing:.3px;
}

#move-history-table td{
  padding:6px 8px;
  border-bottom:1px solid #455a64;
  color:#ffffff;
}

#move-history-table tr:nth-child(even){
  background-color: rgba(255,255,255,.05);
}

.history-num{
  color:#90a4ae;
  text-align:center;
  font-size:.8rem;
  border-right:1px solid #546e7a;
}

.history-move{ font-family: Consolas, monospace; }

.panel-footer{ flex-shrink:0; }

.btn-restart{
  width:100%;
  padding:12px;
  background-color:#d32f2f;
  color:#fff;
  border:none;
  border-radius:4px;
  font-weight:bold;
  cursor:pointer;
  font-size:1rem;
  box-shadow:0 4px 6px rgba(0,0,0,.30);
  transition: background .2s;
}

.btn-restart:hover{ background-color:#b71c1c; }

/* Responsive */
@media (max-width: 800px){
  body{
    overflow:auto;
    min-height:auto;
    display:block;
    background-color:#212121;
  }

  .main-layout{
    flex-direction:column;
    align-items:center;
    max-height:none;
    padding:0;
    background-color:transparent;
    box-shadow:none;
  }

  #game-container{
    width:100vw;
    height:100vw;
    aspect-ratio: 1 / 1;
  }

  #rank-labels{ display:none; }

  #control-panel{
    width:95%;
    height:auto;
    min-height:300px;
    margin-top:10px;
    background-color:#263238;
  }

  #move-history-container{ min-height:150px; }
}

/* --- COMPRESIÓN EXTREMA DE ESPACIOS (IDEAL PARA MÓVIL) --- */

/* 1. Reducir separación entre los bloques principales */
#online-zone {
    margin-bottom: 6px !important; 
}

.match-actions {
    margin-top: 4px !important;    
    margin-bottom: 4px !important; 
}

.time-panel {
    gap: 4px !important; /* Relojes casi pegados */
    margin-bottom: 6px !important;
}

/* 2. Reducir la altura (grosor) de los botones */
.btn-online, .btn-action {
    padding: 6px 4px !important; /* Antes era 10px, esto los hace mucho más delgados */
    font-size: 0.70rem !important; /* Letra un pelín más pequeña para que encaje perfecto */
}

/* 3. Reducir la altura de los fondos de los relojes */
.time-row {
    padding: 6px 8px !important; /* Antes era 10px de alto */
}

.time-label {
    font-size: 0.7rem !important;
}

.time-value {
    font-size: 1rem !important; /* Números un poco más compactos */
}

/* --- FONDOS BLANCO Y NEGRO PUROS PARA RELOJES --- */
#dark-time-row {
    background-color: #1a1a1a !important; 
    border-color: #000000 !important;
}
#dark-time-row .time-label, 
#dark-time-row .time-value {
    color: #ffffff !important; 
}

#white-time-row {
    background-color: #ffffff !important; 
    border-color: #cccccc !important;
}
#white-time-row .time-label,
#white-time-row .time-value {
    color: #000000 !important; 
}

/* --- ACERCAR BOTONES DE ACCIÓN A BOTONES DE SALA --- */
.panel-header {
    margin-bottom: 2px !important; /* Elimina el espacio debajo del bloque superior */
}

#online-zone {
    margin-bottom: 0px !important; /* Quita separación extra */
}

.match-actions {
    margin-top: 4px !important; /* Deja solo un hilo de espacio (4px) */
}

.action-row {
    margin-top: 2px !important; /* Mata el margen que venía oculto en el HTML */
}

/* ==========================================
   PANEL INFERIOR (BARRA DE TIEMPO Y STATS)
   ========================================== */
#bottom-stats-panel {
    width: 100%;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 1. Barra de Tiempo (60 Bloques) */
#time-bar-container {
    display: flex;
    width: 100%;
    height: 14px;
    gap: 2px;
    background-color: #1a1a1a;
    padding: 2px;
    border-radius: 4px;
    border: 1px solid #333;
    box-sizing: border-box;
}

.time-block {
    flex: 1;
    background-color: #2b2b2b; /* Color cuando se apaga el bloque */
    border-radius: 1px;
    transition: background-color 0.3s ease;
}

/* Colores de Alerta del Tiempo */
.time-block.active-block { background-color: #4caf50; } /* Verde: > 50% */
.time-block.warning { background-color: #ffeb3b; }      /* Amarillo: 25% - 50% */
.time-block.danger { background-color: #ff9800; }       /* Naranja: 10% - 25% */
.time-block.critical { background-color: #f44336; }     /* Rojo: < 10% */

/* 2. Franja de Estadísticas */
#player-info-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #263238;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid #455a64;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.strip-name { font-weight: bold; color: #eceff1; }
.strip-rank { font-weight: bold; color: #ffd54f; letter-spacing: 0.5px; }
.strip-record { font-family: Consolas, monospace; color: #90a4ae; }

/* Ajuste para móviles */
@media (max-width: 800px) {
    #player-info-strip {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    #time-bar-container { height: 10px; }
}