/* =====================================================================
   morovd.de · Spiel-Unterseite — Kosti „Das Knochenspiel"
   ---------------------------------------------------------------------
   Bildband-Schwelle (.sp-* aus subpage-shared.css) -> weicher Übergang in
   die „Spielkammer" auf Petrol. Das Brett ist ein geschnitztes Objekt aus
   Stein und Knochen, von Messing beleuchtet.

   Signatur „Wärme folgt dem Zug": im Ruhezustand kühle Patina; beim Säen
   wandert ein Messing-Glühen Mulde für Mulde mit (.is-active); Capture/
   Bonus glimmen heller auf; die beiden Speicher sammeln den Punktestand
   als glühende Messing-Füllsäule mit großer Megrim-Zahl. Rhymt mit dem
   Citizen-Gitter (Hero) und der Warnstein-Naht (Prosa). Palette/Fonts aus
   site.css (:root). JS: static/js/kosti.js.
   ===================================================================== */

.ko {
  /* feines Korn (neutral) — dieselbe Atmosphäre wie der Prosa-Lesebereich */
  --noise-tex: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   Spielkammer auf Petrol — Atmosphäre läuft durch den Falz weiter
   ===================================================================== */
.ko-room {
  position: relative;
  background: var(--c-petrol-deep);
  padding: clamp(2.5rem, 6vh, 4.5rem) 1.25rem clamp(5rem, 14vh, 9rem);
  overflow: hidden;
}
.ko-room__atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 55% at 50% -8%,
    rgba(28, 57, 69, 0.55) 0%, rgba(28, 57, 69, 0) 60%);
}
.ko-room__atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-tex);
  background-size: 200px 200px;
  opacity: 0.045;
  mix-blend-mode: soft-light;
}
.ko-room__inner {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  margin: 0 auto;
}

/* gemeinsame kleine Auszeichnung (Messing-Eyebrow) */
.ko-eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-brass);
}
.ko-eyebrow--center { text-align: center; }

/* =====================================================================
   Schwelle — die Inschrift, mit der der Fremde das Spiel zwischen uns legte
   ===================================================================== */
.ko-threshold {
  text-align: center;
  max-width: 48ch;
  margin: 0 auto clamp(2.5rem, 6vh, 4rem);
}
.ko-threshold .ko-eyebrow { margin-bottom: 1.1rem; }
.ko-inscription {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: var(--c-sand);
}

/* =====================================================================
   Vollbild-Bühne — das Brett liegt auf der Küste, sofort sichtbar.
   Bild füllt den Screen (abgedunkelt/vignettiert), das Brett schwebt
   zentriert darüber. Kein Scrollen nötig, um zu spielen.
   ===================================================================== */
.ko-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--c-black);
  text-align: center;
  padding: clamp(5rem, 12vh, 7rem) 1rem clamp(3rem, 7vh, 4.5rem);
}
.ko-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ko-hero__img { animation: sp-hero-img 18s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}

.ko-hero__fog { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Vignette + Verdunkelung: Ränder dunkel, Mitte (Brett) im Lichtpool;
   oben für die Navi-Lesbarkeit, unten weicher Übergang nach Petrol. */
.ko-hero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 80% at 50% 47%,
      rgba(13, 36, 48, 0.08) 0%, rgba(10, 26, 24, 0.70) 70%, rgba(10, 26, 24, 0.90) 100%),
    linear-gradient(to bottom,
      rgba(10, 26, 24, 0.72) 0%, rgba(10, 26, 24, 0.10) 24%,
      rgba(10, 26, 24, 0.00) 46%, rgba(13, 36, 48, 0.35) 68%,
      rgba(13, 36, 48, 0.78) 86%, var(--c-petrol-deep) 100%);
}

/* Tide-Naht: feine Messing-Horizontlinie am Bild→Petrol-Übergang —
   horizontales Gegenstück zur vertikalen Warnstein-Naht. Zu den Rändern
   ausgeblendet (kein harter Anstoß), warmer Schimmer glimmt nach oben.
   z-index 1 = über dem Wash, unter Brett/Scroll-Hinweis (bleiben klar). */
.ko-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      transparent 4%, rgba(199, 167, 101, 0.14) 22%,
      rgba(199, 167, 101, 0.66) 50%,
      rgba(199, 167, 101, 0.14) 78%, transparent 96%) bottom center / 100% 1px no-repeat,
    radial-gradient(150% 90% at 50% 100%,
      rgba(199, 167, 101, 0.12) 0%, rgba(199, 167, 101, 0) 55%);
}

.ko-hero__stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: clamp(1.2rem, 3vh, 2.1rem);
}
.ko-hero__head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.ko-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 8vw, 5rem);
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--c-creme);
  text-shadow: 0 2px 30px rgba(10, 26, 24, 0.85);
}
.ko-hero__sub {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(0.92rem, 1.5vw, 1.15rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-brass);
  text-shadow: 0 1px 14px rgba(10, 26, 24, 0.85);
}

/* Brett auf der Küste: tieferer Bodenschatten (es „ruht" auf dem Grund),
   Status/Beschriftung lesbar über dem Bild. */
.ko-hero .ko-board {
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.58),
    0 2px 0 rgba(255, 255, 255, 0.03) inset,
    0 -22px 40px rgba(0, 0, 0, 0.35) inset;
}
.ko-hero .ko-status { text-shadow: 0 1px 16px rgba(10, 26, 24, 0.9); }
.ko-hero .ko-sides  { text-shadow: 0 1px 12px rgba(10, 26, 24, 0.9); }

/* Scroll-Hinweis: unten warten Geschichte + Bestenliste */
.ko-hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-text);
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-sand);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.ko-hero__cue:hover,
.ko-hero__cue:focus-visible { opacity: 1; color: var(--c-champagne); outline: none; }
.ko-hero__chevron {
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ko-hero__chevron { animation: ko-cue 1.8s ease-in-out infinite; }
}
@keyframes ko-cue {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(2px, 2px); }
}

/* sehr niedrige Viewports (Querformat): Titel kleiner, Hinweis aus */
@media (max-height: 680px) {
  .ko-hero { padding-top: clamp(4rem, 10vh, 5.5rem); }
  .ko-hero__title { font-size: clamp(2rem, 6vh, 3rem); }
  .ko-hero__stage { gap: clamp(0.7rem, 2vh, 1.3rem); }
  .ko-hero__cue { display: none; }
}

/* =====================================================================
   Brett
   ===================================================================== */
.ko-board {
  --store-w: clamp(54px, 12vw, 78px);
  --gap: clamp(10px, 1.6vw, 16px);
  --pad: clamp(14px, 2.2vw, 22px);

  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  width: 100%;
  max-width: 640px;
  padding: var(--pad);
  border-radius: 16px;
  /* geschnitztes Objekt: Patina-Oberfläche, zur Tiefe hin abdunkelnd */
  background:
    radial-gradient(140% 120% at 50% -10%, rgba(110, 143, 152, 0.10), rgba(110, 143, 152, 0) 55%),
    linear-gradient(176deg, var(--c-petrol-patina) 0%, var(--c-black) 118%);
  border: 1px solid rgba(199, 167, 101, 0.22);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.03) inset,
    0 -22px 40px rgba(0, 0, 0, 0.35) inset;
}
/* feines Korn auf dem Brett selbst */
.ko-board::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise-tex);
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Zug-Lichtlinie: wandert zwischen der Reihe des Fremden (oben) und deiner
   (unten) — atmosphärischer Begleiter der Statuszeile. */
.ko-turnline {
  position: absolute;
  left:  calc(var(--pad) + var(--store-w) + var(--gap));
  right: calc(var(--pad) + var(--store-w) + var(--gap));
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--c-brass), transparent);
  box-shadow: 0 0 10px rgba(199, 167, 101, 0.55);
  opacity: 0.6;
  transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.ko-board[data-turn="ai"]     .ko-turnline { top: 27%; }
.ko-board[data-turn="player"] .ko-turnline { top: 73%; }
.ko-board[data-turn="over"]   .ko-turnline { opacity: 0; }

/* ---- Mulden-Feld ---- */
.ko-field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  flex: 1;
  min-width: 0;
}
.ko-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
}

/* ---- Mulde (eingesenkter Brunnen) ----
   Flexibel: die sechs Mulden teilen sich die Reihenbreite gleichmäßig und
   bleiben dank aspect-ratio rund -> passt auf jeder Bildschirmbreite, kein
   Überlauf. Auf großen Schirmen durch max-width gedeckelt. */
.ko-pit {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: clamp(44px, 9.4vw, 60px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px;
  border-radius: 50%;
  /* gesenkt: dunkler Kern, Inset-Schatten = echte Tiefe */
  background: radial-gradient(ellipse at 50% 38%, var(--c-black) 0%, var(--c-petrol-patina) 130%);
  border: 1px solid rgba(199, 167, 101, 0.18);
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.60),
    inset 0 -1px 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.28s ease, border-color 0.28s ease, transform 0.18s ease;
}
/* eigene Klasse für Button-Mulden: Button-Reset */
button.ko-pit {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ko-pit--player { border-color: rgba(199, 167, 101, 0.32); }
.ko-pit--ai     { cursor: default; }

.ko-pit--player:not(:disabled):hover,
.ko-pit--player:not(:disabled):focus-visible {
  border-color: var(--c-brass);
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(199, 167, 101, 0.40),
    0 0 18px rgba(199, 167, 101, 0.30);
  transform: translateY(-1px) scale(1.03);
  outline: none;
}
.ko-pit--player:disabled { cursor: default; }

/* Signatur: die Wärme folgt dem Zug — die gerade befüllte Mulde glüht in
   Messing und kühlt danach wieder ab (Klasse via JS). */
.ko-pit.is-active {
  border-color: var(--c-champagne);
  box-shadow:
    inset 0 3px 9px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(227, 204, 151, 0.55),
    0 0 22px rgba(199, 167, 101, 0.55);
}
.ko-pit.is-drop  { animation: ko-drop 0.18s ease; }
/* Auslöser-Mulde (eigene, leere): warmes Champagner-Pulsieren. */
.ko-pit.is-capture { animation: ko-capture 0.42s ease; }
/* Eroberte Gegner-Mulde: deutlich anders — kräftiger Messing-Griff, hebt
   sich kurz an, damit klar wird, dass GENAU sie genommen wird. */
.ko-pit.is-captured { animation: ko-captured 0.42s ease; z-index: 3; }

@keyframes ko-drop    { 50% { transform: scale(1.08); } }
@keyframes ko-capture {
  0%, 100% { box-shadow: inset 0 3px 9px rgba(0,0,0,0.6); }
  40%      { box-shadow: 0 0 0 2px var(--c-champagne), 0 0 26px rgba(227,204,151,0.7); }
}
@keyframes ko-captured {
  0%   { box-shadow: inset 0 3px 9px rgba(0,0,0,0.6); transform: scale(1); }
  40%  { box-shadow: 0 0 0 2px var(--c-brass), 0 0 30px rgba(199,167,101,0.85),
                     inset 0 0 14px rgba(0,0,0,0.7); transform: scale(1.07); }
  100% { box-shadow: inset 0 3px 9px rgba(0,0,0,0.6); transform: scale(1); }
}

/* ---- Fliegende Capture-Steine (fixed-Overlay über dem Brett) ---- */
.ko-fly {
  position: fixed;
  z-index: 80;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;          /* auf left/top zentrieren */
  border-radius: 50%;
  pointer-events: none;
  transform: translate(0, 0) scale(1);
  transition: transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
.ko-fly--player {
  background: radial-gradient(circle at 34% 30%, var(--c-creme) 0%, var(--c-champagne) 72%);
  box-shadow: 0 0 9px rgba(227, 204, 151, 0.65);
}
.ko-fly--ai {
  background: radial-gradient(circle at 34% 30%, #9EBAC0 0%, var(--c-patina) 75%);
  box-shadow: 0 0 9px rgba(110, 143, 152, 0.55);
}

/* ---- „Erobert / Captured"-Label über der eroberten Mulde ---- */
.ko-caplabel {
  position: fixed;
  z-index: 81;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-text);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-champagne);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(227, 204, 151, 0.5);
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.42s ease;
}
.ko-caplabel.is-show { opacity: 1; transform: translate(-50%, -135%) scale(1); }

/* ---- Steine ---- */
.ko-stone {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* deine Steine = Knochen/Elfenbein (warm) */
.ko-stone--player {
  background: radial-gradient(circle at 34% 30%, var(--c-creme) 0%, var(--c-champagne) 72%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), 0 0 5px rgba(227, 204, 151, 0.25);
}
/* Steine des Fremden = kühler Stein (matt) */
.ko-stone--ai {
  background: radial-gradient(circle at 34% 30%, #9EBAC0 0%, var(--c-patina) 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}
/* viele Steine -> Zahl statt Punkte */
.ko-num {
  font-family: var(--font-text);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.ko-num--player { color: var(--c-champagne); }
.ko-num--ai     { color: var(--c-patina); }

/* =====================================================================
   Speicher (Kalah) — geschnitztes Gefäß mit glühender Messing-Füllsäule
   ===================================================================== */
.ko-store {
  position: relative;
  width: var(--store-w);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(176deg, var(--c-petrol-patina) 0%, var(--c-black) 120%);
  border: 1.5px solid rgba(199, 167, 101, 0.45);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.55),
    inset 0 -2px 4px rgba(255, 255, 255, 0.03);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.ko-store--player { border-color: rgba(199, 167, 101, 0.55); }

/* die Füllsäule: steigt mit dem Punktestand (--fill 0..1) */
.ko-store__fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  transform: scaleY(var(--fill, 0));
  transform-origin: bottom center;
  background: linear-gradient(to top,
    rgba(199, 167, 101, 0.55) 0%,
    rgba(227, 204, 151, 0.30) 70%,
    rgba(227, 204, 151, 0.05) 100%);
  box-shadow: 0 -6px 16px rgba(227, 204, 151, 0.35);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.ko-store--ai .ko-store__fill {
  background: linear-gradient(to top,
    rgba(110, 143, 152, 0.45) 0%,
    rgba(110, 143, 152, 0.18) 75%,
    rgba(110, 143, 152, 0.02) 100%);
  box-shadow: 0 -6px 16px rgba(110, 143, 152, 0.28);
}
/* die große Megrim-Zahl (Display-Schrift, nur hier groß genug) */
.ko-store__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.ko-store--player .ko-store__num { color: var(--c-champagne); }
.ko-store--ai     .ko-store__num { color: var(--c-sand); }

/* Aufglimmen bei Capture/Spielende-Einzug bzw. Bonuszug */
.ko-store.is-score { animation: ko-store-score 0.7s ease; }
.ko-store.is-bonus { animation: ko-store-bonus 0.7s ease; }
@keyframes ko-store-score {
  0%, 100% { box-shadow: inset 0 4px 12px rgba(0,0,0,0.55); }
  35%      { box-shadow: 0 0 0 2px var(--c-brass), 0 0 30px rgba(199,167,101,0.6),
                         inset 0 4px 12px rgba(0,0,0,0.4); }
}
@keyframes ko-store-bonus {
  0%, 100% { box-shadow: inset 0 4px 12px rgba(0,0,0,0.55); }
  35%      { box-shadow: 0 0 0 2px var(--c-champagne), 0 0 34px rgba(227,204,151,0.75),
                         inset 0 4px 12px rgba(0,0,0,0.4); }
}

/* der Speicher der Seite, die am Zug ist, trägt einen feinen Messing-Saum */
.ko-board[data-turn="player"] .ko-store--player,
.ko-board[data-turn="ai"]     .ko-store--ai {
  border-color: var(--c-brass);
  box-shadow:
    0 0 18px rgba(199, 167, 101, 0.25),
    inset 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   Seiten-Beschriftung · Status · Neustart
   ===================================================================== */
.ko-sides {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 640px;
  margin: 1rem auto 0;
  padding: 0 0.2rem;
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
/* Die Seiten-Labels sind der primäre Zug-Indikator: im Ruhezustand gedämpft,
   die Seite, die am Zug ist, leuchtet auf und blitzt einmal kurz. */
.ko-side {
  color: rgba(201, 189, 159, 0.42);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.ko-board[data-turn="player"] ~ .ko-sides .ko-side--player {
  color: var(--c-champagne);
  text-shadow: 0 0 14px rgba(227, 204, 151, 0.5);
  animation: ko-flash 1.15s ease 1;
}
.ko-board[data-turn="ai"] ~ .ko-sides .ko-side--ai {
  color: #b9d2cb;
  text-shadow: 0 0 14px rgba(110, 143, 152, 0.55);
  animation: ko-flash 1.15s ease 1;
}
/* Bonuszug: das eigene Label blitzt erneut auf (per JS getriggert).
   !important, damit es die Dauer-Hervorhebung der aktiven Seite übersteuert. */
.ko-side.is-flash { animation: ko-flash 1.15s ease 1 !important; }

/* Spielende: das Label der Siegerseite feiert, das andere verblasst. */
.ko-side--player.is-winner { color: var(--c-champagne); text-shadow: 0 0 20px rgba(227, 204, 151, 0.75); animation: ko-flash 1.5s ease 2; }
.ko-side--ai.is-winner     { color: #cfe3dc;            text-shadow: 0 0 20px rgba(110, 143, 152, 0.7);  animation: ko-flash 1.5s ease 2; }
.ko-side.is-faded { color: rgba(201, 189, 159, 0.30); }
.ko-side.is-draw  { color: rgba(201, 189, 159, 0.7); animation: ko-flash 1.5s ease 1; }

@keyframes ko-flash {
  0%, 100% { opacity: 1; }
  14% { opacity: 0.22; } 28% { opacity: 1; }
  44% { opacity: 0.32; } 60% { opacity: 1; }
}

/* Statuszeile bleibt für Screenreader (aria-live), ist aber visuell verborgen. */
.ko-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* „Neues Spiel" liegt dauerhaft im Layout (reservierter Platz). Während des
   Spiels per visibility verborgen -> taucht 1:1 ohne Layout-Shift auf. */
.ko-restart {
  margin: 1.6rem auto 0;
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brass);
  background: transparent;
  border: 1px solid rgba(199, 167, 101, 0.5);
  border-radius: 2px;
  padding: 0.7rem 2rem;
  cursor: pointer;
  visibility: hidden;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.4s ease;
  opacity: 0;
}
.ko-restart.is-shown { visibility: visible; opacity: 1; }
.ko-restart:hover,
.ko-restart:focus-visible {
  background: var(--c-brass);
  color: var(--c-petrol-deep);
  border-color: var(--c-brass);
  outline: none;
}

/* =====================================================================
   Spielanleitung (ausklappbar) — Inschriften-Stil
   ===================================================================== */
.ko-rules {
  width: min(640px, 100%);
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  border-left: 2px solid rgba(199, 167, 101, 0.55);
  background: rgba(28, 57, 69, 0.28);
  border-radius: 0 3px 3px 0;
}
.ko-rules__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  font-family: var(--font-text);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brass);
  user-select: none;
  list-style: none;
}
.ko-rules__summary::-webkit-details-marker { display: none; }
.ko-rules__summary::marker { content: ""; }
.ko-rules__summary:hover { color: var(--c-champagne); }
.ko-rules__arrow { transition: transform 0.25s ease; }
.ko-rules[open] .ko-rules__arrow { transform: rotate(180deg); }

.ko-rules__body {
  overflow: hidden;
}
/* Orientierungs-Zeile: erst verorten, dann Regeln */
.ko-rules__lead {
  margin: 0;
  padding: 0.2rem 1.2rem 0.95rem;
  font-family: var(--font-text);
  font-size: clamp(0.92rem, 1.25vw, 1.02rem);
  line-height: 1.7;
  color: var(--c-sand);
}
.ko-rule {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.85rem 1.2rem;
  border-top: 1px solid rgba(199, 167, 101, 0.15);
}
.ko-rule__label {
  font-family: var(--font-text);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-brass);
}
.ko-rule p {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.7;
  color: var(--c-sand);
}

/* ---- Mini-Diagramme in der Anleitung (Inline-SVG, palette-treu) ---------
   Mancala ist räumlich -> ein kleines Bild sagt mehr als der Regeltext.
   Statisch (kein reduced-motion-Thema); Farbe nie alleiniger Indikator
   (Zahlen + Position + Form tragen die Bedeutung mit). Per aria-hidden,
   da der nebenstehende Regeltext die Aussage vollständig beschreibt. */
.ko-rule__fig {
  margin: 0.8rem 0 0.1rem;
}
.kd {
  width: min(300px, 100%);
  height: auto;
  display: block;
}
.kd-well        { fill: #0A1A18; stroke: rgba(199, 167, 101, 0.40); stroke-width: 1.5; }
.kd-well--hot   { stroke: var(--c-champagne); stroke-width: 2.2; }
.kd-store       { fill: rgba(28, 57, 69, 0.55); stroke: var(--c-brass); stroke-width: 2; }
.kd-store--hot  { fill: rgba(199, 167, 101, 0.20); stroke: var(--c-champagne); }
.kd-you         { fill: var(--c-champagne); }
.kd-str         { fill: var(--c-patina); }
.kd-num         { font-family: var(--font-text); font-size: 13px; }
.kd-num--you    { fill: var(--c-champagne); }
.kd-num--str    { fill: var(--c-patina); }
.kd-arrow       { fill: none; stroke: var(--c-brass); stroke-width: 1.6; }

/* =====================================================================
   Namenseingabe (nur bei Top-5-Qualifikation; [hidden] blendet aus)
   ===================================================================== */
.ko-name {
  width: min(440px, 100%);
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  text-align: center;
}
.ko-name__label {
  margin: 0 0 0.6rem;
  font-family: var(--font-text);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--c-champagne);
}
/* erreichte Punktzahl — kleine Messing-Eyebrow + große Megrim-Zahl (wie Kalah) */
.ko-name__score {
  margin: 0 0 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.ko-name__score-label {
  font-family: var(--font-text);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brass);
}
.ko-name__score-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--c-champagne);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 22px rgba(227, 204, 151, 0.25);
}
.ko-name__row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
#ko-name-input {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--c-creme);
  background: rgba(10, 26, 24, 0.5);
  border: 1px solid rgba(199, 167, 101, 0.4);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.25s ease;
}
#ko-name-input::placeholder { color: rgba(201, 189, 159, 0.55); }
#ko-name-input:focus { border-color: var(--c-brass); }
#ko-name-submit {
  font-family: var(--font-text);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-brass);
  background: transparent;
  border: 1px solid rgba(199, 167, 101, 0.5);
  border-radius: 2px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
#ko-name-submit:hover,
#ko-name-submit:focus-visible {
  background: var(--c-brass);
  color: var(--c-petrol-deep);
  outline: none;
}
.ko-name__status {
  font-family: var(--font-text); font-size: 0.8rem; letter-spacing: 0.04em;
  min-height: 1.15em; margin: 0.55rem 0 0; text-align: center; color: var(--c-patina);
  transition: color 0.2s;
}
.ko-name__status.is-ok { color: var(--c-champagne); }
.ko-name__status.is-error { color: var(--c-warn); }

/* =====================================================================
   „Die Besten" — die in den Stein gemeißelten Namen
   ===================================================================== */
.ko-best {
  width: min(520px, 100%);
  margin: clamp(3rem, 8vh, 4.5rem) auto 0;
}
.ko-best .ko-eyebrow { margin-bottom: 1.4rem; }
.ko-lb {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-text);
}
.ko-lb th {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-patina);
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(199, 167, 101, 0.28);
}
.ko-lb td {
  font-size: 1rem;
  color: var(--c-sand);
  padding: 0.7rem 0.7rem;
  border-bottom: 1px solid rgba(199, 167, 101, 0.10);
}
.ko-lb__rank  { text-align: center; color: var(--c-brass); width: 2.5rem; }
.ko-lb__name  { text-align: left; }
.ko-lb__score { text-align: right; }
.ko-lb__date  { text-align: right; color: var(--c-patina); }
th.ko-lb__name { text-align: left; }
th.ko-lb__score, th.ko-lb__date { text-align: right; }
.ko-lb tbody tr:first-child td { color: var(--c-champagne); }
.ko-lb tbody tr:hover td { background: rgba(28, 57, 69, 0.30); }
.ko-lb__empty {
  text-align: center;
  color: var(--c-patina);
  padding: 1.2rem !important;
  letter-spacing: 0.04em;
}

/* =====================================================================
   Schluss-Marke + Rückweg (wie Prosa)
   ===================================================================== */
.ko-end {
  margin-top: clamp(3rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.ko-end__mark {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: transparent;
  border: 1px solid var(--c-brass);
  box-shadow: 0 0 10px rgba(199, 167, 101, 0.35);
}
.ko-end__back {
  font-family: var(--font-text);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-sand);
  text-decoration: none;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}
.ko-end__back:hover,
.ko-end__back:focus-visible {
  color: var(--c-champagne);
  letter-spacing: 0.30em;
  outline: none;
}
.ko-end__back:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

/* =====================================================================
   Ankunft (Entrance) — komponierte Beats: Titel, dann das Brett aus dem
   Dunst, dann (per JS) die ausgeschütteten Knochen, zuletzt der Hinweis.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ko-hero__title { animation: sp-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
  .ko-hero__sub   { animation: sp-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s both; }
  /* das Brett steigt verzögert und leicht herangezoomt aus dem Dunst auf */
  .ko-board       { animation: sp-board-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both; }
  .ko-hero__cue   { animation: sp-fade-in 1s ease 2.5s both; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 768px) {
  .ko-board {
    max-width: 100%;
    --store-w: clamp(42px, 13vw, 64px);
    --gap: clamp(6px, 1.4vw, 12px);
    --pad: clamp(10px, 2vw, 16px);
  }
  .ko-rule { grid-template-columns: 70px 1fr; }
}
@media (max-width: 480px) {
  .ko-stone { width: 7px; height: 7px; }
  .ko-pit { padding: 5px; gap: 2px; }
  .ko-row { gap: 4px; }
}

/* =====================================================================
   reduced-motion: keine Bewegungs-Effekte, aber alles voll bedienbar
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ko-board { animation: none; }
  .ko-pit, .ko-store, .ko-store__fill, .ko-turnline, .ko-status { transition: none; }
  .ko-pit.is-drop, .ko-pit.is-capture, .ko-pit.is-captured,
  .ko-store.is-score, .ko-store.is-bonus { animation: none; }
  .ko-pit--player:not(:disabled):hover { transform: none; }
  /* Fliegende Steine/Label werden im reduced-motion-Pfad gar nicht erst
     erzeugt; als Sicherheitsnetz hier ohne Bewegung. */
  .ko-fly { transition: none; }
  .ko-caplabel { transition: opacity 0.2s ease; }
}