/* =================================
   GUEIDE WARGAME - STYLES v10
   Classic wood + High contrast
   ================================= */

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

  /* Classic wood palette */
  --color-dark-square: #b58863;
  --color-light-square:#f0d9b5;

  /* UI colors */
  --color-highlight: rgba(20,85,30,.50);
  --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: 10 / 9;
}

#rank-labels{
  display:flex;
  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:1rem;
}

#board-and-files{
  display:flex;
  flex-direction:column;
  height: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 #4e342e;
  background-color:var(--color-dark-square);
}

#file-labels{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  margin-top:5px;
  font-weight:bold;
  text-align:center;
  color:#f0d9b5;
}

/* --- 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(0,0,0,.20);
  border-bottom:2px dashed rgba(0,0,0,.20);
}

/* 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%;
}

/* 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:15px; flex-shrink:0; }

.turn-box{
  padding:10px;
  margin-bottom:10px;
  border-radius:4px;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
  font-size:1rem;
  letter-spacing:1px;
}

.black-turn{ background-color:#212121; color:#fff; border:2px solid #555; }
.white-turn{ background-color:#f5f5f5; color:#222; border:2px solid #ccc; }

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

/* engine.js usa: normal, guebel, mortis */
.status-box.normal{ background-color:#2e7d32; color:#fff; }
.status-box.guebel{ background-color:#f9b233; color:#111; }
.status-box.mortis{ background-color:#b71c1c; color:#fff; }

/* LOG */
.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 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; }
}