/* =========================
   Gemeinsames Layout
   ========================= */
.kr-layout{
  display:grid;
  grid-template-columns: 280px 1fr; /* links Toolbar, rechts Bühne */
  gap:16px;
  align-items:start;
}
.kr-toolbar .field{ margin-bottom:.6rem; }
.kr-toolbar .tiny{ color:#9aa4af; }

/* ---------- LIVE (ONLINE) ---------- */
.kr-stage{
  position:relative;
  display:grid;
  grid-template-areas:
    "center"
    "rim";
  grid-template-rows: minmax(360px, 1fr) auto;
  min-height: 70vh;
}
.kr-center{
  grid-area:center;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
}
.kr-task{ font-size:clamp(2rem,6vw,4rem); padding:.9rem 2.2rem; background:#2a2f36; border-radius:.8rem; color:#fff; }
.kr-timer{ color:#aab2bd; }
.kr-participants{ grid-area:rim; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:8px; pointer-events:none; }
.kr-participants .kr-player{ pointer-events:auto; }
#kr-highscore{
  text-align:center; font:600 13px/1.35 ui-monospace,Menlo,monospace; color:#e2e8f0;
  padding:10px 14px; border-radius:12px; background:rgba(15,23,42,.75); border:1px solid #263347; box-shadow:0 6px 18px rgba(0,0,0,.25);
}
#kr-highscore .lead{ font-size:1.2rem; color:#22c55e; }
.qr img{ display:block; width:110px; height:110px; }

/* ---------- SALDIX (OFFLINE) ---------- */
.sx-stage{
  position:relative;
  background:transparent;
  min-height:72vh;
  border-radius:14px;
}

.sx-board{
  /* Board mittig, mit sauberen Rändern */
  margin: 8px auto;
  width: min(95%, 1100px);
  aspect-ratio: 16 / 9;
  border:1px solid #233043;
  border-radius: 12px;
  background: radial-gradient(1200px 600px at 50% 10%, #0a1220, #0a0f17);
  box-shadow: 0 30px 60px rgba(0,0,0,.25) inset, 0 12px 28px rgba(0,0,0,.25);
  overflow:hidden;
  position:relative;
}

/* Score-Badges um das Board */
.sx-score{ position:absolute; z-index:2; }
.sx-top    { top:-10px; left:50%; transform:translateX(-50%); }
.sx-right  { right:-10px; top:50%; transform:translateY(-50%); }
.sx-bottom { bottom:-10px; left:50%; transform:translateX(-50%); }
.sx-left   { left:-10px; top:50%; transform:translateY(-50%); }
.badge{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem;
  border-radius:999px; background:#0f172a; border:1px solid #334155; color:#e2e8f0; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.badge b{ font-weight:800; }
.b-blue{   outline:2px solid #3b82f6; }
.b-red{    outline:2px solid #ef4444; }
.b-green{  outline:2px solid #22c55e; }
.b-yellow{ outline:2px solid #eab308; }

/* SVG Grid */
.sx-svg{ width:100%; height:100%; }
.sx-tri{ fill:#0b121b; stroke:#3b4a5f; stroke-width:1.6; }
.sx-tri.closed{ fill:#0d1b2a; }
.sx-val{
  font: 700 clamp(12px, 1.8vw, 22px)/1 ui-monospace,Menlo,monospace;
  fill:#e5e7eb;
  paint-order:stroke; stroke:#0b121b; stroke-width:3px; /* dunkle Outline → sehr gut lesbar */
}

/* Knoten (place stone) */
.sx-vert{
  cursor:pointer;
  fill:#0f172a; stroke:#5b6b86; stroke-width:2;
  transition:transform .1s ease, fill .15s ease, stroke .2s ease;
}
.sx-vert:hover{ transform:scale(1.12); fill:#132033; }
.sx-vert.occ{ cursor:not-allowed; stroke:#0b0f16; }

/* aktives Team (für subtile Hervorhebung, optional verwendbar) */
.sx-board{ --sx-active:#3b82f6; }