* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, sans-serif; background: #1e1e2e; color: #cdd6f4; }
#header { display: flex; justify-content: space-between; padding: 16px 24px; background: #181825; }
#header h1 { font-size: 20px; }
#main { display: flex; gap: 24px; padding: 24px; justify-content: center; }
#board-container { width: 640px; height: 640px; }
#board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; }
#sidebar { width: 320px; display: flex; flex-direction: column; gap: 16px; }
.control { display: flex; flex-direction: column; gap: 4px; }
.control label { font-size: 14px; color: #a6adc8; }
select, button { padding: 8px 12px; background: #313244; color: #cdd6f4; border: 1px solid #45475a; border-radius: 4px; font-size: 14px; cursor: pointer; }
button:hover { background: #45475a; }
#move-list { flex: 1; overflow-y: auto; max-height: 300px; background: #181825; padding: 8px; border-radius: 4px; font-family: monospace; font-size: 14px; }
#result { padding: 12px; background: #313244; border-radius: 4px; text-align: center; }
#board .feld {
  position: relative;
  cursor: pointer;
}
#board .piece {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  line-height: 1;
  z-index: 2;
  user-select: none;
  will-change: transform;
}
#board .piece-weiss {
  color: #fff;
  text-shadow: -2px 0 0 #333, 2px 0 0 #333, 0 -2px 0 #333, 0 2px 0 #333;
}
#board .piece-schwarz {
  color: #111;
}
#board .mark-punkt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 1;
}
#board .mark-schlag {
  position: absolute;
  inset: 2px;
  border: 4px solid rgba(0,0,0,0.25);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
#board .koordinaten {
  position: absolute;
  font-size: 12px;
  color: #555;
  pointer-events: none;
  z-index: 3;
}
#board .koordinaten.datei {
  bottom: -18px;
  right: 4px;
}
#board .koordinaten.rang {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
}

#status .ki-dots span {
  opacity: 0.2;
  display: inline-block;
  animation: ki-dot 1.2s infinite;
}
#status .ki-dots span:nth-child(2) { animation-delay: 0.2s; }
#status .ki-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ki-dot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}
#move-list div { padding: 2px 0; }
#move-list b { color: #f0d9b5; }
#result button { margin-top: 12px; }