* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #f5f2ea;
  color: #222;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px;
  width: min(560px, 100%);
}
.hidden { display: none !important; }
h1 { font-size: 2rem; }
input, select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #bbb;
  background: #fff;
  color: inherit;
  font-size: 1rem;
}
button {
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  background: #3182ce;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
button:disabled { opacity: 0.45; cursor: default; }
button.secondary { background: #4a5568; }
.join-row, .bot-row { display: flex; gap: 8px; }
#code-input { width: 6em; text-transform: uppercase; }
.hint { color: #666; font-size: 0.9rem; text-align: center; }
#player-list { list-style: none; display: flex; flex-direction: column; gap: 8px; width: 100%; }
#player-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
#player-list li.offline { opacity: 0.5; }
.dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #999; }
.dot.white { background: #f2ead9; }
.dot.black { background: #33302c; }
.kick { margin-left: auto; background: #742a2a; padding: 4px 10px; }
#host-controls { display: flex; flex-direction: column; gap: 8px; align-items: center; }
#status { min-height: 1.4em; font-size: 1.05rem; text-align: center; }
#counts { color: #666; font-size: 0.9rem; min-height: 1.2em; }
#board {
  width: min(480px, 92vw);
  height: auto;
  background: #b8895a;
  border-radius: 12px;
}
#board .line { fill: none; stroke: #3d2b1f; stroke-width: 3; }
#board .point { fill: #3d2b1f; }
#board .stone { stroke-width: 2; }
#board .stone.white { fill: #f2ead9; stroke: #9a8f78; }
#board .stone.black { fill: #33302c; stroke: #000; }
#board .stone.selectable { cursor: pointer; stroke: #ffd700; stroke-width: 3; }
#board .stone.selected { stroke: #ff8c00; stroke-width: 4; }
#board .stone.removable {
  cursor: pointer;
  stroke: #e53e3e;
  stroke-width: 4;
  stroke-dasharray: 4 3;
}
#board .target { fill: rgba(255, 215, 0, 0.55); cursor: pointer; }
#winner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#fireworks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;           /* hinter der Box */
  pointer-events: none; /* Klicks gehen zu den Buttons durch */
}
#winner-box {
  position: relative;
  z-index: 1;           /* Box + Buttons VOR dem Feuerwerk */
  background: #fff;
  color: #222;
  border-radius: 14px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
#winner-actions { display: flex; gap: 10px; }
#error-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #742a2a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
}