/* Flasche drehen: runder Tisch, Namen im Kreis, Flasche in der Mitte. */

.buehne-flasche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 12px 10px;
}

.tisch-rahmen {
  position: relative;
  width: min(94vw, 100vh - 250px, 640px);
  width: min(94vw, 100dvh - 250px, 640px);
  min-width: 260px;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.tisch {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  transition: inset .3s ease;
  box-shadow: 0 6px 12px rgba(80, 60, 160, .18), 0 24px 50px rgba(80, 60, 160, .22), inset 0 0 0 10px rgba(0, 0, 0, .1), inset 0 3px 0 10px rgba(255, 255, 255, .12);
}
.tisch[data-tisch="holz"] {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 236, 205, .4), transparent 52%),
    radial-gradient(circle, transparent 55%, rgba(60, 25, 0, .35)),
    repeating-linear-gradient(90deg, #c98a4b 0 15%, #b7773a 15% 15.6%, #d39556 15.6% 31%, #a8692f 31% 31.6%),
    #c98a4b;
}
.tisch[data-tisch="filz"] {
  background: radial-gradient(circle at 45% 40%, #7c5cf0, #3f2b96 78%);
  box-shadow: 0 6px 12px rgba(80, 60, 160, .18), 0 24px 50px rgba(80, 60, 160, .3), inset 0 0 0 12px rgba(255, 255, 255, .75), inset 0 0 0 14px rgba(255, 255, 255, .35), inset 0 0 30px 14px rgba(30, 10, 80, .3);
}
.tisch[data-tisch="nacht"] {
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 90%, transparent),
    radial-gradient(1.5px 1.5px at 70% 22%, #fff 90%, transparent),
    radial-gradient(2px 2px at 60% 75%, #ffe27a 90%, transparent),
    radial-gradient(1.5px 1.5px at 32% 68%, #fff 90%, transparent),
    radial-gradient(1.5px 1.5px at 82% 55%, #fff 90%, transparent),
    radial-gradient(circle at 40% 35%, #3d348b, #1b1640 80%);
}
.tisch[data-tisch="picknick"] {
  background:
    radial-gradient(circle, transparent 60%, rgba(120, 0, 0, .18)),
    repeating-conic-gradient(#ef4146 0 25%, #fff8f0 0 50%) 0 0 / 14% 14%;
}

.namen { position: absolute; inset: 0; pointer-events: none; }
.name-schild {
  position: absolute;
  translate: -50% -50%;
  max-width: 28%;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: var(--schatten-klein);
  font-weight: 600;
  font-size: clamp(.8rem, 3.4vw, 1.1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: scale .2s ease, background .2s ease;
}
.name-schild.dran {
  background: var(--sonne);
  color: #fff;
  box-shadow: 0 6px 18px rgba(139, 92, 246, .45);
  scale: 1.3;
  z-index: 3;
  animation: winken 1s ease-in-out infinite;
}
@keyframes winken { 50% { rotate: -5deg; } }
/* Wer in dieser Runde schon dran war (A.14.7.0): Haken, Schild bleibt gut lesbar */
.name-schild.war-dran { padding-left: 30px; background: #ede9fe; }
.name-schild.war-dran::before {
  content: '✓';
  position: absolute;
  left: 9px;
  top: 50%;
  translate: 0 -50%;
  font-weight: 800;
  color: #6d28d9;
}
.name-schild.war-dran.dran { background: var(--sonne); }
.name-schild.war-dran.dran::before { color: #fff; }

/* Ohne Namen braucht es keinen Rand für die Schilder: der Tisch nimmt den Platz */
.tisch-rahmen:has(.namen:empty) .tisch { inset: 3%; }

.flasche {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17%;
  height: 51%;
  margin: -25.5% 0 0 -8.5%;
  cursor: grab;
  z-index: 2;
  filter: drop-shadow(0 10px 8px rgba(20, 10, 40, .35));
  pointer-events: none;
}
.flasche svg { rotate: var(--dreh, 0rad); pointer-events: auto; }

/* Lichtkegel: ein heller Keil vom Hals bis an den Tischrand, nach dem Stillstand */
.lichtkegel-rahmen { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 1; }
.lichtkegel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -13deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2) 13deg, rgba(255, 255, 255, .55) 26deg, transparent 26deg);
  -webkit-mask: radial-gradient(closest-side, transparent 22%, #000 38%, #000 80%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 22%, #000 38%, #000 80%, transparent 100%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
.lichtkegel.an { opacity: 1; animation: kegel-auf .5s ease-out; }
@keyframes kegel-auf { from { scale: .7; } }
.flasche:active { cursor: grabbing; }
.flasche:focus-visible { outline: 3px solid var(--himmel); outline-offset: 6px; border-radius: 30px; }
.flasche svg { display: block; width: 100%; height: 100%; }

.flaschen-ergebnis {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--schrift-titel);
  font-size: clamp(1.8rem, 8vw, 2.9rem);
  font-weight: 600;
  text-align: center;
}
.flaschen-ergebnis.neu { animation: aufploppen .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes aufploppen { from { transform: scale(.5); opacity: 0; } }
/* Wahrheit oder Pflicht nach dem Dreh (A.14.12.0) */
.wop { display: grid; justify-items: center; gap: 12px; width: min(100%, 480px); }
.wop[hidden] { display: none; }
.wop-wahl { display: flex; gap: 10px; justify-content: center; }
.wop-knopf { min-width: 130px; min-height: 52px; font-size: 1.1rem; font-weight: 650; }
.wop-knopf[data-wop="wahrheit"][aria-pressed="true"] { background: #0e7490; color: #fff; }
.wop-knopf[data-wop="pflicht"][aria-pressed="true"] { background: #be185d; color: #fff; }
.wop-karte {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 18px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  box-shadow: var(--schatten-gross);
  border-top: 6px solid #0e7490;
  text-align: center;
}
.wop-karte[hidden] { display: none; }
.wop-karte[data-art="pflicht"] { border-top-color: #be185d; }
.wop-karte b { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #0e7490; }
.wop-karte[data-art="pflicht"] b { color: #be185d; }
.wop-karte span { font-family: var(--schrift-titel); font-size: clamp(1.1rem, 4.6vw, 1.4rem); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.wop-karte small { color: var(--tusche-weich); }
.wop-karte small:empty { display: none; }
.wop-karte.neu { animation: wop-auf .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes wop-auf { from { transform: rotateX(70deg) scale(.8); opacity: 0; } }
.flaschen-hinweis { margin: 0; font-weight: 550; color: var(--tusche-weich); text-align: center; }
.flaschen-hinweis:empty { display: none; }
.flaschen-runde { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 0; font-weight: 550; color: var(--tusche-weich); text-align: center; }
.flaschen-runde[hidden] { display: none; }
.flaschen-runde .knopf.leise { min-height: 36px; padding: 0 8px; }

.dreh-knopf {
  min-width: min(80vw, 300px);
  min-height: 60px;
  font-size: 1.3rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Werkbank */
.namen-liste { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 8px; }
.namen-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.namen-liste .platz-nr { font-weight: 550; text-align: center; color: var(--tusche-weich); }
.namen-liste .feld-text { grid-area: auto; }
.flaschen-wahl, .tisch-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.flaschen-wahl .schema-wahl svg { width: 22px; height: 64px; }
.tisch-wahl .schema-scheibe { position: relative; inset: auto; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .12), 0 2px 6px rgba(80, 60, 160, .2); }

@media (min-width: 980px) {
  .tisch-rahmen { width: min(100vw - 500px, 100dvh - 260px, 680px); }
}

/* ---------- Handy quer: Tisch links, Ergebnis und Knopf rechts ---------- */
@media (orientation: landscape) and (max-height: 540px) and (min-width: 480px) {
  .buehne-flasche {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    column-gap: 28px;
    row-gap: 10px;
    padding: 0 16px 8px;
  }
  .buehne-flasche { grid-template-rows: 1fr repeat(6, auto) 1fr; }
  .buehne-flasche > :first-child { grid-row: 1 / -1; grid-column: 1; }
  .buehne-flasche > :not(:first-child) { grid-column: 2; }
  .buehne-flasche > :nth-child(2) { grid-row: 2; }
  .buehne-flasche > :nth-child(3) { grid-row: 3; }
  .buehne-flasche > :nth-child(4) { grid-row: 4; }
  .buehne-flasche > :nth-child(5) { grid-row: 5; }
  .buehne-flasche > :nth-child(6) { grid-row: 6; }
  .buehne-flasche > :nth-child(7) { grid-row: 7; }
  .tisch-rahmen { width: min(100dvh - 78px, 52vw); min-width: 0; }
  /* mit Wahrheit-oder-Pflicht-Karte wird die rechte Spalte hoch: alles etwas knapper */
  .buehne-flasche:has(.wop:not([hidden])) { row-gap: 6px; }
  .buehne-flasche:has(.wop:not([hidden])) .flaschen-ergebnis { font-size: clamp(1.3rem, 4.5dvh + .5rem, 2rem); }
  .wop { gap: 6px; }
  .wop-knopf { min-height: 44px; min-width: 110px; font-size: 1rem; }
  .wop-karte { padding: 8px 16px 10px; gap: 2px; border-top-width: 4px; }
  .wop-karte span { font-size: 1.05rem; }
  .buehne-flasche:has(.wop:not([hidden])) .zeitnehmer .zn-ring { width: 64px; height: 64px; }
  .buehne-flasche:has(.wop:not([hidden])) .zeitnehmer .zn-zahl { font-size: 1.2rem; }
  .buehne-flasche:has(.wop:not([hidden])) .dreh-knopf { min-height: 48px; }
}