/* Chess Duell – Styles */
.chess-duell-root {
  --cd-light: #efe7d2;
  --cd-dark: #b58863;
  --cd-sel: #f6f669;
  --cd-target: rgba(20, 85, 30, 0.45);
  --cd-check: #e36b6b;
  max-width: 720px;
  margin: 1em auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #222;
}
.chess-duell-root * { box-sizing: border-box; }

.cd-lobby { text-align: center; padding: 1.5em; border: 1px solid #ddd; border-radius: 10px; background: #fafafa; }
.cd-lobby h2 { margin-top: 0; }
.cd-muted { color: #666; font-size: 0.9em; }
.cd-msg { margin-top: 0.8em; min-height: 1.2em; color: #444; }

.cd-btn {
  display: inline-block; padding: 0.55em 1.1em; margin: 0.3em 0.2em;
  border: 1px solid #bbb; border-radius: 6px; background: #fff; color: #222;
  cursor: pointer; font-size: 0.95em;
}
.cd-btn:hover { background: #f0f0f0; }
.cd-btn:disabled { opacity: 0.6; cursor: default; }
.cd-btn-primary { background: #2b6cb0; border-color: #2b6cb0; color: #fff; font-weight: 600; }
.cd-btn-primary:hover { background: #23568e; }
.cd-btn-danger { background: #fff; border-color: #c0392b; color: #c0392b; }
.cd-btn-danger:hover { background: #fdecea; }

/* Brett oben (groß), darunter die Seitenleiste – Zugliste/Chat füllen die volle Breite. */
.cd-game { display: grid; grid-template-columns: 1fr; gap: 1em; align-items: start; }

/* Zugliste und Chat nebeneinander */
.cd-side-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; align-items: start; margin-bottom: 0.8em; }
.cd-side-top > .cd-moves-col, .cd-side-top > .cd-chat { min-width: 0; }
/* Ohne Chat (z. B. Zuschauer) nimmt die Zugliste die volle Breite ein */
.cd-side-top > .cd-moves-col:only-child { grid-column: 1 / -1; }
.cd-status { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 0.6em 1em;
  padding: 0.6em 0.9em; background: #f3f3f3; border-radius: 6px; flex-wrap: wrap; align-items: center; }
.cd-status .cd-you { font-weight: 600; }
.cd-status .cd-players { color: #444; font-weight: 600; }
.cd-status .cd-turn { color: #333; }
.cd-status-over { background: #fff3cd; }
.cd-status-over .cd-turn { font-weight: 700; }

.cd-board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: 100%; max-width: 500px; margin: 0 auto;
  aspect-ratio: 1 / 1; border: 3px solid #5a3d28; border-radius: 4px; overflow: hidden;
  user-select: none;
}
/* min-height/-width: 0 lässt die 1fr-Reihen unter ihre Inhaltsgröße schrumpfen,
   damit das Brett exakt quadratisch bleibt und keine Reihe abgeschnitten wird. */
.cd-cell { position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer; min-width: 0; min-height: 0; }
.cd-light { background: var(--cd-light); }
.cd-dark { background: var(--cd-dark); }
.cd-selected { box-shadow: inset 0 0 0 4px var(--cd-sel); }
.cd-check { background: var(--cd-check) !important; }
/* Letzter Zug: Start- und Zielfeld leicht getönt (über die Feldfarbe gelegt) */
.cd-last { background-image: linear-gradient(rgba(255, 214, 64, 0.5), rgba(255, 214, 64, 0.5)); }

.cd-piece { font-size: clamp(22px, 7vw, 46px); line-height: 1; }
.cd-white { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 1px 1px 2px rgba(0,0,0,0.5);
  -webkit-text-stroke: 1.2px #333; }
.cd-black { color: #1a1a1a; text-shadow: 0 0 1px #888; }

.cd-target::after {
  content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%;
  background: var(--cd-target);
}
.cd-capture::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  border: 4px solid var(--cd-target);
}

.cd-coord { position: absolute; font-size: 10px; font-weight: 700; opacity: 0.6; pointer-events: none; }
.cd-rank { top: 2px; left: 3px; }
.cd-file { bottom: 1px; right: 3px; }

.cd-side h3 { margin: 0 0 0.4em; font-size: 1em; }
.cd-moves { height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 6px;
  padding: 0.4em 0.6em; font-size: 0.9em; background: #fff; }
.cd-move-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 4px; padding: 1px 0; }
.cd-move-no { color: #999; }
.cd-move-san { font-variant-numeric: tabular-nums; }
.cd-move-last { background: #ffe082; border-radius: 3px; padding: 0 4px; font-weight: 600; }

.cd-controls { margin-top: 0.8em; }
.cd-share { margin-bottom: 0.6em; }
.cd-check-opt { display: flex; align-items: flex-start; gap: 0.45em; font-size: 0.85em; color: #444;
  margin: 0.2em 0 0.7em; cursor: pointer; line-height: 1.3; }
.cd-check-opt input { margin-top: 0.15em; cursor: pointer; flex: none; }
.cd-continue { margin: 0.2em 0 0.7em; }
.cd-continue-box { margin-top: 0.4em; }
.cd-link { width: 100%; padding: 0.4em; font-size: 0.8em; border: 1px solid #ccc; border-radius: 4px; margin: 0.3em 0; }

.cd-name-input { width: 100%; padding: 0.45em; font-size: 0.9em; border: 1px solid #ccc; border-radius: 4px; margin: 0.3em 0; }
.cd-name-edit { margin-bottom: 0.6em; }
.cd-name-label { display: block; font-size: 0.8em; color: #666; margin-bottom: 0.1em; }

.cd-field-label { display: block; font-size: 0.85em; font-weight: 600; color: #444; margin: 0.6em 0 0.1em; text-align: left; }
.cd-select { width: 100%; padding: 0.45em; font-size: 0.9em; border: 1px solid #ccc; border-radius: 4px; margin: 0.3em 0; background: #fff; }
.cd-hint { font-size: 0.78em; color: #777; text-align: left; margin: 0.15em 0 0.2em; line-height: 1.35; }

/* Schachuhr */
.cd-clocks { grid-column: 1 / -1; display: flex; gap: 0.6em; }
.cd-clock { flex: 1; display: flex; justify-content: space-between; align-items: center;
  padding: 0.4em 0.7em; border: 1px solid #ddd; border-radius: 6px; background: #fafafa; }
.cd-clock-name { font-weight: 600; font-size: 0.9em; }
.cd-clock-time { font-variant-numeric: tabular-nums; font-size: 1.25em; font-weight: 700; letter-spacing: 0.02em; }
.cd-clock-run { background: #e8f5e9; border-color: #66bb6a; }
.cd-clock-run .cd-clock-time { color: #1b5e20; }

.cd-promo { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: #fff; border: 2px solid #333; border-radius: 10px; padding: 1em; z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3); text-align: center; }
.cd-promo-title { margin-bottom: 0.5em; font-weight: 600; }
.cd-promo-btn { font-size: 38px; line-height: 1; padding: 0.1em 0.25em; margin: 0 0.1em;
  border: 1px solid #bbb; border-radius: 6px; background: #f7f7f7; cursor: pointer; }
.cd-promo-btn:hover { background: #e8e8e8; }
.cd-hidden { display: none; }

@media (max-width: 560px) {
  .cd-game { grid-template-columns: 1fr; }
  .cd-side-top { grid-template-columns: 1fr; }
  .cd-moves { height: 120px; }
  .cd-chat-log { height: 140px; }
}

/* "Meine Partien"-Umschalter */
.cd-mygames { margin-top: 1em; }
.cd-mygames-title { font-weight: 600; font-size: 0.9em; margin-bottom: 0.3em; }
.cd-mygames-list { display: flex; flex-direction: column; gap: 4px; }
.cd-mygames-item { text-align: left; padding: 0.4em 0.6em; border: 1px solid #ddd; border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 0.85em; line-height: 1.3; }
.cd-mygames-item:hover { background: #f0f0f0; }
.cd-mygames-item.cd-current { border-color: #2b6cb0; font-weight: 600; cursor: default; }
.cd-mygames-item.cd-turnflag { border-left: 4px solid #66bb6a; }

/* Chat (nur zwischen den beiden Spielern) – sitzt rechts neben der Zugliste */
.cd-chat { margin-top: 0; }
.cd-chat-log { height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 6px;
  padding: 0.4em 0.6em; background: #fff; font-size: 0.85em; }
.cd-chat-msg { margin: 2px 0; line-height: 1.3; word-break: break-word; }
.cd-chat-name { font-weight: 600; }
.cd-chat-msg.cd-mine .cd-chat-name { color: #2b6cb0; }
.cd-chat-input { display: flex; gap: 4px; margin-top: 0.4em; align-items: stretch; }
.cd-chat-text { flex: 1 1 auto; min-width: 0; padding: 0.4em; font-size: 0.85em;
  border: 1px solid #ccc; border-radius: 4px; }
.cd-chat-input .cd-btn { flex: 0 0 auto; white-space: nowrap; margin: 0; padding: 0.4em 0.7em; }