/* Die Aufnahmekabine (js/kabine.js): im Fotobrief und in der Garderobe. Jedes Wort ist eine Zeile mit Tonstreifen,
   roter Aufnahmetaste und Abspielknopf; die Kabine selbst hat Schaumstoff, Rotlicht, Mikro und einen VU-Meter. */

/* ---- Zeilen ---- */

.kb-zeilen { display: grid; gap: 0; }
.kb-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kopf tasten" "streifen streifen" "fuss fuss" "meldung meldung";
  gap: 8px 12px; align-items: center; padding: 14px 0 12px;
}
.kb-zeile + .kb-zeile { border-top: 2px dashed color-mix(in srgb, var(--tinte) 24%, transparent); }
.kb-kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.kb-wort { font: 900 20px/1.05 var(--schrift-schild); text-transform: uppercase; text-wrap: balance; }
.kb-stand { font: 900 12px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-stand.im-kasten { padding: 4px 7px 3px; color: var(--vorhang); background: var(--weiss); border: 2px solid var(--vorhang); border-radius: 4px; rotate: -3deg; }
/* ein Wort, zu dem die Bühne noch nicht spricht: wie die Bonus-Marke im Fotobrief */
.kb-bonus {
  padding: 4px 6px 3px; border-radius: 4px; background: var(--magenta); color: var(--tinte);
  font: 900 11px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .08em;
}
.kb-stand.nur-hier { padding: 3px 6px 2px; color: var(--tinte); border: 2px dashed var(--tinte-leise); border-radius: 4px; }

.kb-tasten { grid-area: tasten; display: flex; align-items: center; gap: 10px; }
.kb-hoeren, .kb-taste {
  display: grid; place-items: center; padding: 0; border: var(--kante) solid var(--tinte); border-radius: 50%; box-shadow: var(--versatz-klein);
  transition: transform .15s var(--aus), box-shadow .15s var(--aus), background-color .2s var(--aus), opacity .2s var(--aus);
}
.kb-hoeren { width: 46px; height: 46px; background: var(--weiss); color: var(--tinte); }
.kb-hoeren .kb-symbol, .kb-hoeren svg { width: 22px; height: 22px; display: grid; place-items: center; }
.kb-hoeren:disabled { opacity: .35; box-shadow: none; cursor: default; }
.kb-hoeren.spielt { background: var(--spot); }
/* die Aufnahmetaste: ein roter Knopf mit Licht von oben; gedrückt sinkt er ein und glüht */
.kb-taste {
  position: relative; width: 58px; height: 58px; color: var(--weiss);
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--rot) 52%, #FFFFFF) 0, var(--rot) 46%, color-mix(in srgb, var(--rot) 78%, var(--tinte)) 100%);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.kb-taste svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent)); }
@media (hover: hover) {
  .kb-hoeren:not(:disabled):hover, .kb-taste:hover { transform: translateY(-1px); box-shadow: var(--versatz); }
}
.kb-taste:active, .kb-taste.nimmt-auf { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 50%, transparent), 0 1px 3px color-mix(in srgb, var(--wurf) 30%, transparent); }
.kb-taste.nimmt-auf { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rot) 14%, #FFFFFF) 0, color-mix(in srgb, var(--rot) 75%, #FFFFFF) 30%, var(--rot) 62%, color-mix(in srgb, var(--rot) 78%, var(--tinte)) 100%); }
.kb-taste.nimmt-auf::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--rot) 50%, transparent) 52%, color-mix(in srgb, var(--rot) 0%, transparent) 72%);
}
/* während das Mikro angeht: ein warmer Ring, der atmet */
.kb-taste.wartet::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid var(--bretter); pointer-events: none;
  animation: kb-warten .7s var(--aus) infinite alternate;
}
@keyframes kb-warten { from { opacity: .25; } to { opacity: 1; } }

.kb-streifen {
  grid-area: streifen; position: relative; height: 58px; border: var(--kante) solid var(--tinte); border-radius: 4px; overflow: hidden;
  background: var(--korn), linear-gradient(180deg, #FFFDF4, #F3ECDD);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 2px 4px color-mix(in srgb, var(--tinte) 14%, transparent);
}
.kb-streifen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kb-leer {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12px; text-align: center; pointer-events: none;
  font: 700 14px/1.2 var(--schrift); color: var(--tinte-leise); opacity: 0; transition: opacity .2s var(--aus);
}
.kb-zeile.leer:not(.nimmt-auf) .kb-leer { opacity: 1; }
/* der Hinweis steht nur auf dem ersten leeren Streifen */
.kb-zeile.leer ~ .kb-zeile.leer .kb-leer { opacity: 0; }
.kb-zeile.leer:not(.nimmt-auf) .kb-streifen canvas { opacity: .35; }
.kb-zeile.nimmt-auf .kb-streifen { background: linear-gradient(180deg, color-mix(in srgb, var(--rot) 5%, #FFFFFF), color-mix(in srgb, var(--rot) 13%, #FFFFFF)); }

.kb-fuss { grid-area: fuss; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font: 700 14px/1.35 var(--schrift); color: var(--tinte-leise); }
.kb-klein {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none;
  font: 700 14px/1 var(--schrift); color: var(--tinte); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.kb-klein.spielt { background: var(--spot); text-decoration: none; padding: 0 8px; border-radius: 999px; }
.kb-chip-symbol, .kb-chip-symbol svg { width: 15px; height: 15px; display: inline-grid; place-items: center; }
/* auch leer im Baum: Eine Ansage, die aus display:none auftaucht, überhören Screenreader (VoiceOver) leicht; leer ist sie 0px hoch */
.kb-meldung { grid-area: meldung; margin: 0; font: 700 14px/1.35 var(--schrift); color: var(--tinte); }

/* was schon da ist: Steves Wörter zum Anhören */
.kb-schon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 4px; }
.kb-schon[hidden] { display: none; }
.kb-schon-titel { width: 100%; font: var(--gruppenname); text-transform: uppercase; letter-spacing: .06em; color: var(--tinte-leise); }
.kb-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 13px 4px 11px; border: var(--kante) solid var(--tinte);
  border-radius: 999px; background: var(--weiss); font: 700 15px/1 var(--schrift); transition: background-color .2s var(--aus);
}
.kb-chip.spielt { background: var(--spot); box-shadow: var(--versatz-klein); }

/* ---- Die Kabine ---- */

.kb-bild, .kb-schaum {
  --kb-schaum: var(--becken-grund);
  --kb-schaum-tief: color-mix(in srgb, var(--becken) 70%, var(--becken-grund));
  --kb-schaum-seite: color-mix(in srgb, var(--becken-grund) 78%, var(--tinte));
  --kb-schaum-licht: color-mix(in srgb, var(--becken-grund) 86%, #FFFFFF);
  --kb-noppen: conic-gradient(from 45deg, var(--kb-schaum) 0 25%, var(--kb-schaum-tief) 0 50%, var(--kb-schaum-seite) 0 75%, var(--kb-schaum-licht) 0 100%) 0 0 / 22px 22px;
}
.kb-schaum { background: radial-gradient(130% 100% at 50% 30%, color-mix(in srgb, var(--wurf) 0%, transparent) 45%, color-mix(in srgb, var(--wurf) 60%, transparent)), var(--kb-noppen); }
.kb-bild {
  position: relative; width: 100%; min-height: 248px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  padding: 58px 14px 14px;
  /* Noppenschaum: Pyramiden, oben angestrahlt, unten im Schatten; von oben fällt warmes Licht auf den Kopf */
  background:
    radial-gradient(60% 70% at 34% 0%, rgba(255, 228, 160, .34), rgba(255, 228, 160, 0) 72%),
    radial-gradient(130% 100% at 50% 30%, color-mix(in srgb, var(--wurf) 0%, transparent) 45%, color-mix(in srgb, var(--wurf) 60%, transparent)),
    var(--kb-noppen);
}
.kb-rotlicht {
  position: absolute; left: 14px; top: 14px; padding: 6px 11px 5px; border: var(--kante) solid var(--tinte); border-radius: 6px;
  background: color-mix(in srgb, var(--tinte) 82%, var(--rot)); color: color-mix(in srgb, var(--rot) 42%, transparent); font: 900 13px/1 var(--schrift-schild); text-transform: uppercase; letter-spacing: .16em;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 55%, transparent), 0 6px 10px -4px color-mix(in srgb, var(--wurf) 60%, transparent);
  transition: background-color .12s linear, color .12s linear, box-shadow .2s var(--aus);
}
.kb-bild.nimmt-auf .kb-rotlicht {
  background: var(--rot); color: var(--weiss); text-shadow: 0 0 6px rgba(255, 230, 235, .9);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tinte) 55%, transparent), 0 6px 22px 2px color-mix(in srgb, var(--rot) 60%, transparent);
}
.kb-sprecher { position: relative; height: 176px; min-width: 0; }
.kb-kopf-bild { position: absolute; left: 0; bottom: 4px; width: 128px; height: 146px; transform-origin: 50% 92%; transition: transform 60ms linear; }
.kb-kopf-bild img {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; translate: -50% 0;
  filter: drop-shadow(0 4px 5px color-mix(in srgb, var(--wurf) 50%, transparent)); -webkit-user-drag: none;
}
.kb-kopf-bild .auf, .kb-kopf-bild .halb { opacity: 0; }
.kb-bild.offen .kb-kopf-bild .auf, .kb-bild.halb .kb-kopf-bild .halb { opacity: 1; }
.kb-bild.offen .kb-kopf-bild .zu, .kb-bild.halb .kb-kopf-bild .zu { opacity: 0; }
.kb-mikro { position: absolute; left: 112px; bottom: -8px; width: 58px; height: 114px; filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--wurf) 50%, transparent)); }
.kb-vu { width: 132px; height: auto; margin: 0 0 4px 8px; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--wurf) 55%, transparent)); }
.kb-vu-glas { fill: #D9CFB4; transition: fill .45s var(--aus); }
.kb-bild.an .kb-vu-glas { fill: #FFE7A4; }
.kb-vu-zahl { font: 700 9px var(--schrift); fill: var(--tinte); }
.kb-vu-zahl.rot { fill: color-mix(in srgb, var(--rot) 80%, var(--tinte)); }
.kb-vu-name { font: 900 13px var(--schrift-schild); letter-spacing: .12em; fill: var(--tinte); }
.kb-nadel { transform-box: view-box; transform-origin: 80px 100px; stroke: var(--tinte); }
.kb-vu, .kb-mikro { color: var(--tinte); }
.kb-vu-gehaeuse { fill: var(--becken-grund); }
.kb-vu-achse { fill: color-mix(in srgb, var(--tinte-leise) 70%, #FFFFFF); }
.kb-vu-rot { stroke: var(--rot); }

@media (min-width: 900px) {
  .kb-kopf-bild { width: 150px; height: 172px; }
  .kb-sprecher { height: 200px; }
  .kb-mikro { left: 132px; width: 66px; height: 130px; }
  .kb-vu { width: 156px; }
}
@media (max-width: 380px) {
  .kb-kopf-bild { width: 108px; height: 124px; }
  .kb-mikro { left: 92px; width: 50px; height: 98px; }
  .kb-vu { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-taste.wartet::after { animation: none; }
  .kb-kopf-bild { transition: none; }
}