/* =========================================================
   Zweck: Board-Kachel – Layout/Größe/Positionierung der Dartscheibe
========================================================= */
.boardPanel {
  padding: 18px;
  display: flex;

  /* Zweck: Inhalt (Board) oben ausrichten */
  align-items: flex-start;
  justify-content: center;

  /* Zweck: Kachel-Höhe begrenzen (damit sie nicht „zu groß“ wird) */
  max-height: min(560px, calc(100vh - 260px));
  overflow: hidden;
}

/* =========================================================
   Zweck: Board-Wrapper – steuert die Board-Position innerhalb der Kachel
========================================================= */
.boardInner {
  width: min(820px, 96%);
  aspect-ratio: 1 / 1;
  display: flex;

  /* Zweck: Board innerhalb des Wrappers oben halten */
  align-items: flex-start;
  justify-content: center;

  /* Zweck: Board höher setzen (Feinjustierung) */
  margin-top: -20px;

  /* Zweck: keine doppelte Karte */
  border: none;
  background: transparent;
}

/* =========================================================
   Zweck: SVG – Größe, Schärfe und dezente Tiefe
========================================================= */
.boardSvg {
  width: 70%;
  height: 70%;
  display: block;

  /* Zweck: bessere Optik (dezente Tiefe, bleibt trotzdem „clean“) */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.18));
}
/* Heatmap-spezifische Styles liegen in styles/layout.css */