/* Lostrommel (A.10.0.0): Glastrommel auf der Leinwand, gezogene Kugeln groß darunter,
   ohne Wiederholung eine Zahlentafel wie beim Bingo. */

.buehne-los {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 18px;
}
.trommel {
  width: min(86vw, 100dvh - 430px, 400px);
  min-width: 220px;
  aspect-ratio: 1 / 1.08;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.los-mitte { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

/* ---------- Ergebnis ---------- */
.los-ergebnis {
  --g: 96px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: var(--g);
  max-width: min(100%, 640px);
}
.los-ergebnis[data-anzahl="2"], .los-ergebnis[data-anzahl="3"] { --g: 78px; }
.los-ergebnis[data-anzahl="4"], .los-ergebnis[data-anzahl="5"], .los-ergebnis[data-anzahl="6"] { --g: 50px; gap: 8px; }
.los-ergebnis:not([data-anzahl="1"]):not([data-anzahl="2"]):not([data-anzahl="3"]):not([data-anzahl="4"]):not([data-anzahl="5"]):not([data-anzahl="6"]) { --g: 46px; }
/* Vor dem ersten Zug: eine leere Kugel mit „?“ hält den Platz, damit der Knopf nicht springt. */
.los-ergebnis:empty::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px dashed rgba(139, 92, 246, .35);
  color: rgba(139, 92, 246, .45);
  font-size: 2.4rem;
  font-weight: 750;
}
.los-kugel {
  display: grid;
  place-items: center;
  width: var(--g);
  height: var(--g);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, var(--farbe) 32%, color-mix(in srgb, var(--farbe) 62%, #1e1b3a) 100%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--farbe) 40%, transparent);
  animation: los-auftauchen .42s cubic-bezier(.2, 1.5, .4, 1) both;
}
.los-kugel b {
  display: grid;
  place-items: center;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--tusche);
  font-size: calc(var(--g) * .34);
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1;
}
.los-kugel.lang b { font-size: calc(var(--g) * .22); }
@keyframes los-auftauchen {
  from { transform: translateY(-36px) scale(.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.los-reihenfolge { margin: -4px 0 0; font-size: .9rem; color: var(--tusche-weich); text-align: center; }

.los-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.zieh-knopf {
  min-width: min(80vw, 300px);
  min-height: 60px;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.los-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.los-aktionen[hidden] { display: none; }
.los-hinweis { margin: 0; font-weight: 550; color: var(--tusche-weich); text-align: center; }

/* ---------- Zahlentafel ---------- */
.los-tafel { width: min(100%, 560px); }
.los-tafel.raster {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
}
.los-tafel.raster span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 650;
  color: rgba(30, 27, 58, .62); /* .45 = 2,8:1, .62 = 4,6:1 (A.14.5.0) */
}
.los-tafel.raster .raus { background: var(--verlauf); color: #fff; }
.los-tafel .neu { animation: los-neu 1.2s ease-out 2; outline: 2px solid #ec4899; outline-offset: 1px; }
@keyframes los-neu { 50% { transform: scale(1.18); } }
.los-tafel.liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.los-tafel.liste span {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--farbe) 16%, #fff);
  color: color-mix(in srgb, var(--farbe) 70%, #1e1b3a);
  font-weight: 650;
  font-size: .9rem;
}
.los-tafel.liste em { align-self: center; color: var(--tusche-weich); font-size: .85rem; }

/* ---------- Verlauf (mit Wiederholung) ---------- */
.los-verlauf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 640px; }
.los-verlauf[hidden] { display: none; }
.los-verlauf .verlauf-titel { font-weight: 600; color: var(--tusche-weich); }
.los-verlauf ol { display: contents; list-style: none; }
.los-verlauf li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  font-size: .9rem;
}
.los-verlauf li:first-child { background: var(--verlauf); color: #fff; }

/* ---------- Werkbank ---------- */
.los-bereich { display: flex; align-items: end; gap: 10px; }
.los-bereich label { flex: 1; display: grid; gap: 4px; font-weight: 600; color: var(--tusche-weich); }
.los-bereich input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(139, 92, 246, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  color: var(--tusche);
  font: inherit;
  font-weight: 650;
  font-size: 1.1rem;
}
.los-bereich input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.los-strich { padding-bottom: 10px; font-weight: 700; color: var(--tusche-weich); }
.los-zeile { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.nur-ansage, .kein-ansage { display: none; }
.kann-ansagen .nur-ansage { display: flex; }
html:not(.kann-ansagen) .kein-ansage { display: block; }

/* ---------- Rechner: Trommel links, Ergebnis rechts daneben ---------- */
@media (min-width: 980px) {
  .buehne-los { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 36px; padding: 12px 28px 24px; }
  .trommel { width: min(40vw, 100dvh - 250px, 440px); grid-row: 1 / span 3; align-self: start; position: sticky; top: 90px; }
  .los-tafel, .los-verlauf { grid-column: 2; justify-self: center; }
}

/* ---------- Handy quer ---------- */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-los { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 0 16px 8px; }
  /* Leinwand ohne feste Breite nähme ihre Pixelbreite an ⇒ Breite aus der Höhe rechnen */
  .trommel { width: calc((100dvh - 90px) / 1.08); min-width: 0; grid-row: 1 / span 3; align-self: start; position: sticky; top: 8px; }
  .los-tafel, .los-verlauf { grid-column: 2; justify-self: center; }
  .los-tafel.raster span { font-size: .7rem; }
}