/*
 * Pubquiz Rundenkarte beim Rundenstart: Karte, Chips im Theme-Stil, Motive je Theme (Leinwand und Handy).
 * Spec: docs/superpowers/specs/2026-10-17-pubquiz-abend-e1-design.md, Abschnitt 3 B und D23.
 * Die Karte ist eine eigene Ebene (absolut, ohne Zeigerereignisse): sie verschiebt nichts und sperrt nie eine Antwort.
 * Animiert wird nur `transform` und `opacity` (per Web Animations aus roundCard.js, jede Einblendung läuft einmal); reduzierte Bewegung und
 * der Schalter „Avatare und Animationen“ aus zeigen den Endzustand ohne Bewegung. Das Hochzählen ist ein Textwechsel in Kästen fester Breite.
 */

/* Den Bezugsrahmen (position: relative) setzt roundCard.js beim Einhängen, wenn das Elternelement noch static ist. */

.pq-rcard {
  --rc-u: var(--pq-k, 6px);
  --rc-accent: #4a5263;
  --rc-ink: #ffffff;
  --rc-dark: #16161d;
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--rc-dark);
}
.pq-rcard *,
.pq-rcard *::before,
.pq-rcard *::after {
  pointer-events: none;
}

/* Leinwand, Raster zurückgehalten (Frageton): mittig über dem Raster bzw. der Schätzfläche; die Karte räumt das Feld vor `optionsAt`. */
.pq-rcard:not(.pq-rcard--phone, .pq-rcard--top) {
  left: 3vw;
  right: 3vw;
  top: 34%;
  bottom: 6%;
}

/* Leinwand, Raster schon sichtbar: kompakte Karte über Kopf- und Fragebereich; Höhe und Lage setzt roundCard.js (endet über dem Zeitbalken). */
.pq-rcard--top {
  --rc-u: calc(0.62 * var(--pq-k, 6px));
  left: 3vw;
  right: 3vw;
  top: 0;
  align-items: center;
}

/* Leinwand vor dem offiziellen Start (Frage erst zu `startedAt`): groß in der freien Fläche, Lage und Höhe setzt roundCard.js (ohne Musikbühne
 * mittig auf der ganzen Folie, mit Musikbühne im Band darüber). Die Karte ersetzt dann die Kopfzeile „Runde 1 von 2 · 100 Punkte“; Zeitbalken
 * und Zähler ruhen bis zum Start (unsichtbar, ihr Platz bleibt: zum Start springt nichts). */
.pq-rcard--start {
  --rc-u: calc(1.3 * var(--pq-k, 6px));
  left: 3vw;
  right: 3vw;
  top: 0;
}
.pq-rcard--start .pq-rcard__stage {
  width: calc(84 * var(--rc-u));
}
.pq-rcard__kind {
  margin: 0;
  padding: calc(1.2 * var(--rc-u)) calc(2 * var(--rc-u)) 0;
  color: var(--rc-accent);
  font-size: calc(3.4 * var(--rc-u));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Nur solange die große Karte wirklich steht, ruhen Zeitbalken, Zähler und Kopfzeile. Ohne sie (keine Rundenkarte, Escape) bleiben Kopfzeile und
 * Zeitbalken stehen, und am Platz der Frage steht „Gleich geht es los“: die Leinwand ist vor dem Start nie leer. */
.pq-stage--prestart:has(> .pq-rcard--start) > :is(.pq-stage-timebar, .pq-stage-estimate) {
  visibility: hidden;
}
.pq-prestart-ready {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  padding: calc(8 * var(--su, 1px)) calc(20 * var(--su, 1px));
  border-radius: calc(16 * var(--su, 1px));
  background: var(--stage-panel, transparent);
  transform: translate(-50%, -50%);
  visibility: visible;
  white-space: nowrap;
}
.quiz-elimination-question:has(> .pq-prestart-ready) {
  position: relative;
}
.pq-stage--prestart:has(> .pq-rcard--start) .pq-prestart-ready {
  visibility: hidden;
}
.pq-stage--prestart:has(> .pq-rcard--start) > .quiz-elimination-header :is(.pq-roundhead, .pq-currenttag) {
  visibility: hidden;
}

/* Handy und mobiles Pubquiz: kompakte Karte im Teamrahmen, oben im Rumpf. */
.pq-rcard--phone {
  --rc-u: 4px;
  top: 10px;
  left: 12px;
  right: 12px;
  align-items: flex-start;
}

.pq-rcard__stage {
  position: relative;
  width: calc(76 * var(--rc-u));
  max-width: 100%;
}
.pq-rcard--phone .pq-rcard__stage {
  width: 100%;
}
.pq-rcard--top .pq-rcard__stage {
  width: calc(96 * var(--rc-u));
}
/* Zu wenig Platz (Handy, Fragetext): ohne Chips; die Chips stehen weiter im versteckten Text. */
.pq-rcard--tight .pq-rcard__chips {
  display: none;
}

/* ---------- Karte ---------- */
.pq-rcard__panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: calc(0.9 * var(--rc-u)) solid var(--rc-accent);
  border-radius: calc(2.6 * var(--rc-u));
  background: #ffffff;
  /* Comic-Schatten: harte Kante unten, dazu weicher Wurf. */
  box-shadow: 0 calc(0.9 * var(--rc-u)) 0 var(--rc-dark), 0 calc(2.4 * var(--rc-u)) calc(5 * var(--rc-u)) rgb(0 0 0 / 0.28);
  text-align: center;
}
.pq-rcard__title {
  margin: 0;
  padding: calc(1 * var(--rc-u)) calc(2 * var(--rc-u));
  background: var(--rc-accent);
  color: var(--rc-ink);
  font-size: calc(5.4 * var(--rc-u));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pq-rcard__upto {
  margin: 0;
  padding: calc(1.4 * var(--rc-u)) calc(2 * var(--rc-u)) calc(0.4 * var(--rc-u));
  font-size: calc(4.4 * var(--rc-u));
  font-weight: 700;
  line-height: 1.15;
}
/* Zahl: feste Breite (Breite der Endzahl in roundCard.js), Ziffern gleich breit. */
.pq-rcard__num {
  display: inline-block;
  box-sizing: content-box;
  min-width: 3ch;
  margin-inline: 0.12em;
  color: var(--rc-accent);
  font-size: 1.9em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  vertical-align: -0.08em;
}
.pq-rcard__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(1 * var(--rc-u));
  margin: 0;
  padding: calc(1 * var(--rc-u)) calc(2 * var(--rc-u)) calc(1.8 * var(--rc-u));
  list-style: none;
}
/* Hinweis unter den Chips (Buzzerrunde: Frühstart sperrt), eine kurze Zeile. */
.pq-rcard__note {
  margin: 0;
  padding: 0 calc(2 * var(--rc-u)) calc(1.6 * var(--rc-u));
  color: var(--rc-dark);
  font-size: calc(3 * var(--rc-u));
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.pq-rcard--top .pq-rcard__note {
  padding-bottom: calc(1.2 * var(--rc-u));
  font-size: calc(2.4 * var(--pq-k, 6px));
}
.pq-rcard--phone .pq-rcard__note {
  padding: 0 6px 8px;
  font-size: 0.78rem;
}
.pq-rcard--tight .pq-rcard__note {
  padding-bottom: 4px;
  font-size: 0.7rem;
  line-height: 1.15;
}
/* Chips im Stil D23: Grundchip auf --stage-panel mit dunkler Kontur, Bonus- und Anteilschip in der Akzentfarbe des Themes. */
.pq-chip {
  margin: 0;
  padding: calc(0.45 * var(--rc-u)) calc(1.5 * var(--rc-u));
  border: 2px solid var(--rc-dark);
  border-radius: 999px;
  background: #ffffff;
  color: var(--rc-dark);
  font-size: calc(3 * var(--rc-u));
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.pq-chip--accent {
  background: var(--rc-accent);
  color: var(--rc-ink);
}

/* Leinwand kompakt: Schrift bleibt aus der Ferne lesbar (nichts unter 2,3 k). */
.pq-rcard--top .pq-rcard__title {
  padding: calc(0.7 * var(--rc-u)) calc(2 * var(--rc-u));
  font-size: calc(3.4 * var(--pq-k, 6px));
}
.pq-rcard--top .pq-rcard__upto {
  padding: calc(1 * var(--rc-u)) calc(2 * var(--rc-u)) calc(0.2 * var(--rc-u));
  font-size: calc(2.8 * var(--pq-k, 6px));
}
.pq-rcard--top .pq-rcard__num {
  font-size: 1.6em;
}
.pq-rcard--top .pq-rcard__chips {
  gap: calc(0.8 * var(--rc-u));
  padding: calc(0.6 * var(--rc-u)) calc(2 * var(--rc-u)) calc(1.4 * var(--rc-u));
}
.pq-rcard--top .pq-chip {
  padding: calc(0.3 * var(--rc-u)) calc(1.4 * var(--rc-u));
  font-size: calc(2.4 * var(--pq-k, 6px));
}

/* Handy: Schrift „s“, Chips höchstens zwei Zeilen. */
.pq-rcard--phone .pq-rcard__panel {
  border-width: 3px;
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--rc-dark), 0 8px 18px rgb(0 0 0 / 0.25);
}
.pq-rcard--phone .pq-rcard__title {
  padding: 4px 10px;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.pq-rcard--phone .pq-rcard__upto {
  padding: 6px 10px 2px;
  font-size: 1rem;
}
.pq-rcard--phone .pq-rcard__num {
  font-size: 1.6em;
}
.pq-rcard--phone .pq-rcard__chips {
  gap: 4px;
  padding: 4px 6px 8px;
}
.pq-rcard--phone .pq-chip {
  padding: 1px 6px;
  border-width: 1.5px;
  font-size: 0.72rem;
  white-space: normal;
}

/* ---------- Motive (ein Behälter, schwebt einmal ein) ---------- */
.pq-rcard__motif {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: visible;
}
.pq-rcard__sym {
  position: absolute;
  display: block;
  width: calc(var(--s, 8) * var(--rc-u));
  height: calc(var(--s, 8) * var(--rc-u));
  color: var(--c, var(--rc-accent));
  transform: rotate(var(--r, 0deg));
  /* dunkle Kontur wie im Comicstil der Kulissen */
  filter: drop-shadow(calc(0.22 * var(--rc-u)) 0 0 var(--rc-dark)) drop-shadow(calc(-0.22 * var(--rc-u)) 0 0 var(--rc-dark)) drop-shadow(0 calc(0.22 * var(--rc-u)) 0 var(--rc-dark))
    drop-shadow(0 calc(-0.22 * var(--rc-u)) 0 var(--rc-dark));
}

/* Neutral: Scheinwerfer oben, Lichtkegel fällt auf die Karte. */
.pq-rcard__cone {
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc(-17 * var(--rc-u));
  height: calc(19 * var(--rc-u));
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgb(255 238 170 / 0.95), rgb(255 238 170 / 0.28));
}
[data-pq-motif="neutral"] .pq-rcard__sym--l {
  --s: 9;
  --r: 90deg;
  left: calc(50% - 4.5 * var(--rc-u));
  top: calc(-24 * var(--rc-u));
}

/* Irish Pub: Kleeblätter um die Ecken. */
[data-pq-motif="irishpub"] .pq-rcard__sym {
  --c: var(--rc-accent);
}
[data-pq-motif="irishpub"] .pq-rcard__sym--a { --s: 10; --r: -16deg; left: calc(-6 * var(--rc-u)); top: calc(-6 * var(--rc-u)); }
[data-pq-motif="irishpub"] .pq-rcard__sym--b { --s: 7; --r: 22deg; right: calc(-3 * var(--rc-u)); top: calc(-8 * var(--rc-u)); --c: #5aa57f; }
[data-pq-motif="irishpub"] .pq-rcard__sym--c { --s: 8; --r: 34deg; left: calc(-3 * var(--rc-u)); bottom: calc(-6 * var(--rc-u)); --c: #5aa57f; }
[data-pq-motif="irishpub"] .pq-rcard__sym--d { --s: 11; --r: -24deg; right: calc(-7 * var(--rc-u)); bottom: calc(-6 * var(--rc-u)); }
[data-pq-motif="irishpub"] .pq-rcard__sym--e { --s: 5; --r: 8deg; left: 36%; top: calc(-6 * var(--rc-u)); --c: #7cc29c; }

/* Festzelt: Wimpelkette über der Karte, Brezeln an den unteren Ecken. */
.pq-rcard__bunting {
  position: absolute;
  left: -3%;
  top: calc(-7 * var(--rc-u));
  width: 106%;
  height: calc(11 * var(--rc-u));
  overflow: visible;
}
.pq-rcard__rope {
  fill: none;
  stroke: var(--rc-dark);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.pq-rcard__flag {
  stroke: var(--rc-dark);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pq-rcard__flag--b { fill: #46709f; }
.pq-rcard__flag--w { fill: #ffffff; }
[data-pq-motif="oktoberfest"] .pq-rcard__sym { --c: #b3722c; }
[data-pq-motif="oktoberfest"] .pq-rcard__sym--l { --s: 12; --r: -12deg; left: calc(-7 * var(--rc-u)); bottom: calc(-7 * var(--rc-u)); }
[data-pq-motif="oktoberfest"] .pq-rcard__sym--r { --s: 9; --r: 14deg; right: calc(-5 * var(--rc-u)); bottom: calc(-6 * var(--rc-u)); }

/* Weihnachten: Sterne in Gold um die Karte. */
[data-pq-motif="christmas"] .pq-rcard__sym { --c: #f2c14e; }
[data-pq-motif="christmas"] .pq-rcard__sym--a { --s: 10; --r: -14deg; left: calc(-6 * var(--rc-u)); top: calc(-7 * var(--rc-u)); }
[data-pq-motif="christmas"] .pq-rcard__sym--b { --s: 6; --r: 18deg; left: 24%; top: calc(-6 * var(--rc-u)); }
[data-pq-motif="christmas"] .pq-rcard__sym--c { --s: 8; --r: 8deg; right: calc(-4 * var(--rc-u)); top: calc(-8 * var(--rc-u)); }
[data-pq-motif="christmas"] .pq-rcard__sym--d { --s: 7; --r: -20deg; left: calc(-4 * var(--rc-u)); bottom: calc(-6 * var(--rc-u)); }
[data-pq-motif="christmas"] .pq-rcard__sym--e { --s: 11; --r: 12deg; right: calc(-7 * var(--rc-u)); bottom: calc(-7 * var(--rc-u)); }
[data-pq-motif="christmas"] .pq-rcard__sym--f { --s: 5; --r: 0deg; right: 30%; bottom: calc(-5 * var(--rc-u)); }

/* Halloween: Spinnennetz in der Ecke oben rechts, zwei Fledermäuse oben links, Kürbis-Laternen an den unteren Ecken. */
.pq-rcard__web {
  position: absolute;
  right: calc(-2 * var(--rc-u));
  top: calc(-2 * var(--rc-u));
  width: calc(14 * var(--rc-u));
  height: calc(14 * var(--rc-u));
  overflow: visible;
}
.pq-rcard__webline {
  fill: none;
  stroke: var(--rc-dark);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pq-rcard__bat {
  position: absolute;
  fill: var(--rc-dark);
  overflow: visible;
}
.pq-rcard__bat--a { left: calc(-5 * var(--rc-u)); top: calc(-9 * var(--rc-u)); width: calc(11 * var(--rc-u)); height: calc(5.5 * var(--rc-u)); transform: rotate(-10deg); }
.pq-rcard__bat--b { left: calc(8 * var(--rc-u)); top: calc(-12 * var(--rc-u)); width: calc(7 * var(--rc-u)); height: calc(3.5 * var(--rc-u)); transform: rotate(8deg); }
[data-pq-motif="halloween"] .pq-rcard__sym { --c: var(--rc-accent); }
[data-pq-motif="halloween"] .pq-rcard__sym--l { --s: 12; --r: -10deg; left: calc(-7 * var(--rc-u)); bottom: calc(-7 * var(--rc-u)); }
[data-pq-motif="halloween"] .pq-rcard__sym--r { --s: 9; --r: 12deg; right: calc(-5 * var(--rc-u)); bottom: calc(-6 * var(--rc-u)); }

/* Handy und Leinwand kompakt: kleines Motiv in den oberen Ecken der Karte, ohne Kegel und Kette. */
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) .pq-rcard__cone,
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) .pq-rcard__bunting,
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) .pq-rcard__web,
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) .pq-rcard__bat {
  display: none;
}
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif] .pq-rcard__sym {
  --s: 5.5;
  top: calc(-2.25 * var(--rc-u));
  bottom: auto;
  left: auto;
  right: auto;
}
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="neutral"] .pq-rcard__sym--l { right: calc(-1.5 * var(--rc-u)); --r: 0deg; --s: 6; left: auto; }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="irishpub"] .pq-rcard__sym--a { left: calc(-1.75 * var(--rc-u)); }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="irishpub"] .pq-rcard__sym--d { right: calc(-1.75 * var(--rc-u)); }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="irishpub"] :is(.pq-rcard__sym--b, .pq-rcard__sym--c, .pq-rcard__sym--e),
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="christmas"] :is(.pq-rcard__sym--b, .pq-rcard__sym--d, .pq-rcard__sym--e, .pq-rcard__sym--f) {
  display: none;
}
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="christmas"] .pq-rcard__sym--a { left: calc(-1.75 * var(--rc-u)); }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="christmas"] .pq-rcard__sym--c { right: calc(-1.75 * var(--rc-u)); }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="oktoberfest"] .pq-rcard__sym--l { left: calc(-1.75 * var(--rc-u)); --s: 6; }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="oktoberfest"] .pq-rcard__sym--r { right: calc(-1.75 * var(--rc-u)); --s: 6; }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="halloween"] .pq-rcard__sym--l { left: calc(-1.75 * var(--rc-u)); --s: 6; }
:is(.pq-rcard--phone, .pq-rcard--top, .pq-rcard--band) [data-pq-motif="halloween"] .pq-rcard__sym--r { right: calc(-1.75 * var(--rc-u)); --s: 6; }

/* ---------- Moderation: ruhige Textzeile statt Karte ---------- */
.pq-rcard-line {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--muted, #4a5263);
}