.chess-wrap{
  max-width:560px;
}

.chess-panel{
  margin-top:36px;
}

.btn-small{
  padding:8px 16px;
  font-size:11px;
}

.chess-divider{
  margin:22px 0;
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--cyan-dim);
}

.join-form{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.join-input{
  width:160px;
  padding:14px 16px;
  background:rgba(63,242,255,0.06);
  border:1px solid rgba(63,242,255,0.35);
  border-radius:2px;
  color:#fff;
  font-family:'Orbitron',sans-serif;
  font-size:16px;
  letter-spacing:.3em;
  text-align:center;
  text-transform:uppercase;
  outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.join-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 18px rgba(63,242,255,0.4);
}

.room-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.room-info-label{
  font-family:'Orbitron',sans-serif;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--cyan-dim);
}
.room-code{
  font-family:'Orbitron',sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:.3em;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(63,242,255,0.6);
}

.chess-board{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:0;
  max-width:420px;
  margin:26px auto 0;
  border:2px solid rgba(63,242,255,0.35);
  border-radius:4px;
  overflow:hidden;
  user-select:none;
  touch-action:manipulation;
}

.chess-square{
  position:relative;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background:#0b111c;
}
.chess-square.light{
  background:rgba(63,242,255,0.08);
}
.chess-square.selected{
  box-shadow:inset 0 0 0 3px var(--cyan);
  background:rgba(63,242,255,0.22);
}
.chess-square.last-move{
  background:rgba(255,210,63,0.14);
}
.chess-square.disabled{
  cursor:not-allowed;
}

.chess-square .dot{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:26%;
  height:26%;
  border-radius:50%;
  background:rgba(63,242,255,0.55);
  box-shadow:0 0 8px rgba(63,242,255,0.6);
  pointer-events:none;
}
.chess-square .dot.capture{
  width:84%;
  height:84%;
  background:transparent;
  box-shadow:inset 0 0 0 4px rgba(255,95,126,0.65);
}

.piece{
  width:76%;
  height:76%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:clamp(22px,6.2vw,34px);
  line-height:1;
  color:#10151b;
  pointer-events:none;
  transition:transform .12s ease;
}
.piece.piece-p{
  font-size:clamp(15px,4.2vw,24px);
}
/* Piece glyphs render inside a light disc rather than relying on text color,
   since some mobile fonts ignore CSS color on certain chess glyphs (pawns
   especially) and always paint them dark. Team is shown via ring color. */
.piece.white{
  background:radial-gradient(circle at 35% 30%, #ffffff, #dbe9f1 85%);
  border:2px solid rgba(63,242,255,0.6);
  box-shadow:0 0 8px rgba(63,242,255,0.4);
}
.piece.black{
  background:radial-gradient(circle at 35% 30%, #f1f6f9, #cddce6 85%);
  border:2px solid rgba(192,77,255,0.7);
  box-shadow:0 0 8px rgba(192,77,255,0.45);
}

.history-panel{
  margin-top:22px;
  max-height:120px;
  overflow-y:auto;
  padding:14px 18px;
  border:1px solid rgba(63,242,255,0.18);
  border-radius:4px;
  background:rgba(63,242,255,0.03);
  font-family:'Orbitron',sans-serif;
  font-size:12px;
  line-height:2;
  color:#9fc4d6;
  text-align:left;
}

.action-row{
  margin-top:28px;
}

@media (max-width:480px){
  .chess-board{max-width:340px;}
  .join-input{width:130px;font-size:14px;}
}