/* Spielinsel-Referenz auf /referenzen/ – „Insel in der Vitrine“
   Dieselbe dokumentarische Form wie der WIRZEIT-Fall (assets/referenzen-wirzeit.css): Haarlinien,
   Mono-Etiketten, Bernstein als Auszeichnung. Statt des Abendlichts ein kaum sichtbarer blau-violetter
   Schimmer aus der App-Farbwelt. Oben das Erklärvideo im Querformat, dann die Leistungen (.wz-ledger),
   drei echte Spielszenen in schlichten Handyrahmen und die Kennzahlen (.fact-rail / .wz-scores).
   Videorahmen und Pause-Knopf kommen aus assets/spielinsel-video.css, Bewegung aus assets/referenzen.js. */

.reference-case--spielinsel {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(ellipse 52% 40% at 16% 28%, rgba(98,72,172,.11), transparent 72%),
    linear-gradient(180deg, #0d0d12 0%, #0c0c0e 58%, #0c0c0d 100%);
}
.reference-case--spielinsel .case-heading > p:last-child { max-width: 720px; }
.reference-case--spielinsel .case-heading h2 { letter-spacing: -.028em; }
.case-status--beta { border-color: rgba(134,112,204,.55); color: #b9aae8; }
.case-status--beta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .55rem;
  border-radius: 50%;
  background: #b9aae8;
  vertical-align: .05em;
}

/* Bühne: das Video liegt wie ein Abzug in der Vitrine */
.si-stage--case { margin: 0 0 5.5rem; }
.si-stage--case .si-video--quer { background: #101019; }
.si-stage--case .si-video--quer video { background: #101019; }

/* Spielszenen */
.si-shots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
}
.si-shots-head p { margin: 0; }
.si-shots-head p:last-child { color: #77736e; font: 500 .64rem/1.5 "Geist Mono", monospace; letter-spacing: .04em; }
.si-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  max-width: 720px;
  margin: 0 0 5.5rem;
  padding: 0;
  list-style: none;
}
.si-shots li { min-width: 0; }
.si-shots figure { margin: 0; }
.si-shot {
  display: block;
  padding: 6px;
  border: 1px solid #4a433c;
  border-radius: 26px;
  background: #0b0a09;
  box-shadow: 0 24px 54px rgba(0,0,0,.34);
}
.si-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 1170;
  object-fit: cover;
  border-radius: 20px;
  background: #18181b;
}
.si-shots figcaption {
  margin-top: .9rem;
  color: #817d78;
  font: 500 .65rem/1.6 "Geist Mono", monospace;
  letter-spacing: .04em;
}

/* Kennzahlen */
.si-proof__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.si-proof__head p { margin: 0; }
.si-proof__head p:last-child { color: #77736e; font: 500 .64rem/1.5 "Geist Mono", monospace; letter-spacing: .04em; }
.si-scores { margin: 0 0 1.6rem; }
.si-scores dt { font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .si-stage--case { margin-bottom: 4rem; }
  .si-shots-head, .si-proof__head { flex-direction: column; gap: .2rem; }
  .si-shots {
    display: flex;
    gap: 14px;
    max-width: none;
    margin: 0 -20px 4rem;
    padding: 4px 20px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .si-shots::-webkit-scrollbar { display: none; }
  .si-shots li { flex: 0 0 56%; scroll-snap-align: start; }
  .si-shot { padding: 5px; border-radius: 22px; }
  .si-shot img { border-radius: 17px; }
}