/*
 * muehle.css: Ergänzungen für das Mühle-Spiel, geladen NACH styles.css.
 * Das Brett ist weisses Papier mit schwarzen 2px-Linien; die 24 Schnittpunkte
 * werden absolut auf dem 7x7-Gitter positioniert.
 */

/* Brettfläche: Papier, Rahmen kommt aus .grid (1px Tinte). */
.muehle-grid {
  background: var(--papier);
}

/* Die Verbindungslinien des Bretts (in JS aus denselben Linien wie die
 * Mühlen erzeugt, damit Linien und Zugregeln nie auseinanderlaufen). */
.muehle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.muehle-lines line {
  stroke: var(--tinte);
  stroke-width: 2;
  stroke-linecap: square;
}

/* 24 Schnittpunkte: volle Trefferfläche für Maus und Finger, der Stein
 * sitzt mittig. */
.grid .muehle-point {
  position: absolute;
  width: calc(100% / 7);
  height: calc(100% / 7);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  touch-action: manipulation;
  background: transparent;
}

/* Leerer Schnittpunkt: kleiner Tintenpunkt auf der Linie. */
.muehle-point:not(.sq--white):not(.sq--black)::before {
  content: "";
  position: absolute;
  width: 16%;
  height: 16%;
  background: var(--tinte);
}

/* Steine als SVG-Grafik (Figuren/). */
.muehle-point .sq__piece {
  width: 70%;
  height: 70%;
  background: center / contain no-repeat;
}

.muehle-point .sq__piece--empty { display: none; }

.muehle-point.sq--white .sq__piece { background-image: url("Figuren/dame_weiss.svg"); }
.muehle-point.sq--black .sq__piece { background-image: url("Figuren/dame_schwarz.svg"); }

/* Letzter Zug: Leuchtstift-Kreis um den Punkt. */
.muehle-point.is-last {
  background-image: radial-gradient(circle closest-side, transparent 74%, var(--cyan) 76%, var(--cyan) 92%, transparent 94%);
}

/* Auswahl direkt am Stein. */
.muehle-point.is-selected::after {
  inset: 12%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--tinte);
}

/* Zielpunkt: Cyan-Punkt (überdeckt den kleinen Linienpunkt). */
.grid .muehle-point.is-target::before {
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--tinte);
}

/* Stein, der nach einer Mühle entfernt werden darf: Ring in Fehlerrot. */
.grid .muehle-point.is-target.is-capture::before {
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: transparent;
  border: 4px solid var(--fehler);
  box-shadow: none;
}

/* Tastaturfokus sichtbar. */
.muehle-point:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 0;
  box-shadow: 0 0 0 5px var(--cyan);
}

/* Copyright-Zeile im Fuss. */
.muehle-copyright {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--text-leise);
}

/* Zweite Schaltfläche der Steuerung über die volle Breite. */
.muehle-wide {
  grid-column: 1 / -1;
}