@charset "UTF-8";
/* =============================================================================
   Spieler /player · One UI, Stufe calm
   Handy: randlose App-Spalte. Ab 540 px: ruhige Karte in der Fenstermitte.
   Umgebaut in Phase 1: App-Rahmen, Willkommen, Beitreten, Lobby.
   Die Spielansichten folgen in ihren Phasen (Inline-Stile in index.html).
   ========================================================================== */

:root { --app-max: 640px; --pad-x: clamp(16px, 4.5vw, 24px); }

body { display: block; }

.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--app-max);
  min-height: 100dvh;
  margin: 0 auto;
}
/* Ab Tablet fast volle Breite, damit die Spiel-Cockpits Platz haben */
@media (min-width: 720px) { .app { max-width: min(94vw, 1600px); } }

/* Kopfleiste: Schriftzug, Ton, Hell/Dunkel. Bleibt über allen Ansichten. */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--pad-x);
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--ou-line);
  background: var(--ou-bg);
}
.app-bar .brand img { height: 36px; }
.app-bar .spacer { flex: 1; }

.app-main { flex: 1; padding: clamp(22px, 5vw, 34px) var(--pad-x) 32px; }

/* Ansichtswechsel: kurz von unten herein (One UI Muster enter, als CSS) */
.view { animation: gh-rise var(--ou-dur-slow) var(--ou-ease) both; }

/* Ansichtsbreite: Eingabe, Lobby und Podium bleiben schmal und zentriert, die inhaltsreichen
   Spiel-Cockpits füllen ab Tablet die Breite (auf dem Handy ohne Wirkung). */
.view { max-width: 620px; margin-inline: auto; }
@media (min-width: 720px) {
  #gameView, #introView { max-width: 1000px; }
  #slView, #rkView, #gvView, #wwView, #hlView, #savedView, #boardsView { max-width: none; }
}

:where(.app-main) h2 { margin: 0 0 8px; font-size: clamp(2.25rem, 9vw, 2.75rem); }
p.sub { margin: 0 0 24px; color: var(--ou-muted); font-size: .9375rem; line-height: 1.5; }

label { margin: 20px 0 7px; }
.view > label:first-of-type { margin-top: 4px; }
.lbl-hint { color: var(--ou-faint); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* Code und PIN: groß und griffig */
input#code, input#wCode {
  padding: 14px 12px 10px;
  font: 400 2.5rem/1 var(--ou-font-display);
  letter-spacing: .3em;
  text-align: center;
  text-indent: .3em;
}
input#pin, input#wPin {
  padding: 14px 12px;
  font: 700 1.5rem/1.2 var(--ou-font-body);
  letter-spacing: .6em;
  text-align: center;
  text-indent: .6em;
}
input#code::placeholder, input#wCode::placeholder { color: var(--ou-line-strong); }

.big-cta { width: 100%; margin-top: 26px; padding: 15px; font-size: var(--ou-fs-md); }
#twitchBtn { margin-top: 10px; }

/* Willkommen zurück */
.welcome-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ou-primary) 55%, transparent);
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-primary) 9%, transparent);
  font: 400 1.75rem/1 var(--ou-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.welcome-name .icon { color: var(--ou-primary-ink); font-size: 1.1rem; }


/* Lobby ------------------------------------------------------------------------ */

.joined-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.joined-head h2 { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.joined-head h2 .icon { color: var(--ou-primary-ink); font-size: .75em; }
#lobbyView .joined-head h2 .icon { color: var(--ou-green-ink); }
.me-badge {
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--ou-primary) 50%, transparent);
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-primary) 10%, transparent);
  color: var(--ou-primary-ink);
  font-size: .8125rem;
  font-weight: 600;
}

/* Warten auf den Start: ruhiger Hinweis mit roter Kante */
.lobby-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--ou-line);
  border-left: 3px solid var(--ou-primary);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  font-weight: 500;
}
.lobby-status .pulse-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ou-primary);
  animation: ou-pulse 1.6s ease-in-out infinite;
}

/* Teilnehmerzahl als Zeile (nicht als Zähler-Kästchen wie im Host) */
.app .count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  color: var(--ou-muted);
  font: 500 var(--ou-fs-sm)/1.4 var(--ou-font-body);
}
.app .count .dot { background: var(--ou-green); animation: ou-pulse 1.6s ease-in-out infinite; }
ul#players { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }

.react-label {
  margin: 22px 0 12px;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .lobby-status .pulse-dot, .app .count .dot { animation: none !important; }
}

/* Ab 540 px: App als Karte */
@media (min-width: 540px) {
  body { padding: clamp(16px, 4vh, 48px) 0; }
  .app {
    min-height: 0;
    overflow: clip;
    border: 1px solid var(--ou-line);
    border-radius: var(--ou-radius);
    background: var(--ou-surface);
  }
  .app-bar { background: var(--ou-surface); }
  .lobby-status { background: var(--ou-bg); }
}


/* Quiz: Spielerklärung, Runde, Auflösung, Siegerehrung (Phase 2) --------------------
   Bausteine (.opt, .point-pill, .intro-example …) kommen aus gamehub.css.
   Bewegung aus player.js über Myso.motion: stamp bei der Auswahl, correct und
   wrong bei der Auflösung, urgent einmal pro Sekunde in den letzten fünf. */

.quote-text { margin: 4px 0 20px; font: 600 clamp(1.2rem, 5vw, 1.5rem)/1.35 var(--ou-font-body); text-wrap: balance; }
@media (min-width: 720px) { .quote-text { max-width: 66ch; } }
.intro-example .quote-text { margin-bottom: 4px; font-size: 1.05rem; }

.q-label {
  margin: 20px 0 10px;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}

/* Antwort-Pads: groß und griffig, am Handy 2 × 2, breit nebeneinander */
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 900px) { .opts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
#gameView .opt { min-height: 64px; padding: 12px; font-size: 1rem; line-height: 1.25; }
#gameView .opt .key { width: 34px; height: 34px; font-size: 1.375rem; }
#introView .opt { min-height: 50px; font-size: .9375rem; }

/* Kopf der Runde: Runde links, Countdown rechts, Balken darunter */
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.round-pill {
  padding: 4px 10px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  color: var(--ou-muted);
  font: 600 .75rem/1.3 var(--ou-font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#gameView .timer { font-size: 2.25rem; }
.count-bar { height: 6px; margin: 0 0 22px; overflow: hidden; border-radius: var(--ou-radius-sm); background: var(--ou-surface-2); }
.count-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ou-muted);
  transform-origin: left;
  will-change: transform;
  transition: transform .25s linear, background-color var(--ou-dur) var(--ou-ease);
}
.count-bar.urgent .count-bar-fill { background: var(--ou-red); }

/* Bild oder Ton zum Zitat, leer ohne Medium */
.quote-media { margin: -6px 0 18px; }
.quote-media:empty { display: none; }
.quote-media .media-img {
  display: block;
  width: 100%;
  max-height: 280px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-field-bg);
  object-fit: contain;
}
.quote-media .media-audio { width: 100%; }
@media (min-width: 900px) { .quote-media .media-img { max-height: 420px; } }

/* Auflösung: eigener Punktgewinn groß, darunter Spiel/Person richtig oder falsch */
.reveal-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ou-success) 55%, transparent);
  border-left: 3px solid var(--ou-success);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-success) 10%, var(--ou-surface));
  text-align: center;
}
.reveal-box.zero { border-color: var(--ou-line); border-left-color: var(--ou-line-strong); background: var(--ou-surface-2); }
.reveal-box .gain { display: inline-block; color: var(--ou-green-ink); font: 400 3.5rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.reveal-box.zero .gain { color: var(--ou-muted); }
.reveal-box .sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; margin-top: 8px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }

.scoreboard { margin-top: 20px; }
.scoreboard h3 {
  margin: 0 0 10px;
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
}
.scoreboard ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }

/* Status und Emotes unter den Pads */
.game-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ou-line);
}
.answer-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 1.3em; color: var(--ou-muted); font-size: var(--ou-fs-sm); text-align: center; }
.answer-status.saved { color: var(--ou-green-ink); font-weight: 600; }
.answer-status .icon { flex: none; }

#readyBtn { margin-top: 20px; }

/* Siegerehrung: Logo-Krone über dem Sieger */
.podium { text-align: center; }
.podium .podium-crown { display: grid; place-items: center; min-height: 64px; margin: 4px 0 10px; color: var(--ou-muted); font: 400 2rem/1 var(--ou-font-display); }
.podium .podium-crown img { width: 96px; height: auto; }
.podium .podium-crown .icon { color: var(--ou-yellow-ink); font-size: 3rem; }
.podium h2 { display: flex; align-items: center; justify-content: center; gap: 10px; }
.podium > ul { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 20px 0 0; padding: 0; text-align: left; }
.post-game-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }

/* Bestenlisten nach dem Spiel: Reiter wie One UI Tabs */
.board-tabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--ou-line); }
.board-tab {
  position: relative;
  flex: 1;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ou-muted);
}
.board-tab:hover:not(.active) { color: var(--ou-text); }
.board-tab.active { color: var(--ou-text); }
.board-tab.active::after { content: ""; position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; background: var(--ou-primary); }
@media (pointer: coarse) { .board-tab { min-height: 44px; } }
.boards-content { margin-top: 8px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.boards-content ul.board-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }


/* Spotlight (Phase 3) ------------------------------------------------------------------------
   Kontestant: Brett zum Wählen, großer Buzzer, Final-Einsatz und -Antwort. Zuschauer: Brett
   und Hinweis. Bewegung aus spotlight.js: stamp beim Buzzern und bei „Du bist dran". */

.sl-p { display: flex; flex-direction: column; gap: 16px; }
.sl-p-role {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  color: var(--ou-muted);
  font-size: var(--ou-fs-sm);
  font-weight: 600;
}
.sl-p-role b { color: var(--ou-text); font: 400 1.35rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.sl-p-role.is-contestant { border-color: color-mix(in srgb, var(--ou-primary) 55%, transparent); background: color-mix(in srgb, var(--ou-primary) 9%, transparent); }
.sl-p-role.is-contestant .icon { color: var(--ou-primary-ink); }
.sl-p-body { display: flex; flex-direction: column; gap: 12px; }
.sl-p-h { margin: 0; }
.sl-p-sub, .sl-p-turn { margin: 0; color: var(--ou-muted); }
.sl-p-turn b { color: var(--ou-text); }
.sl-p-myturn { padding: 10px 12px; border-left: 3px solid var(--ou-primary); background: var(--ou-surface-2); }
.sl-p-myturn b { color: var(--ou-primary-ink); }
.sl-p-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-chip {
  padding: 5px 10px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  font: 400 1.25rem/1.1 var(--ou-font-display);
  text-transform: uppercase;
}
.sl-chip.me { border-color: var(--ou-primary); color: var(--ou-primary-ink); }

.sl-p-cat {
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.sl-p-img { max-width: 100%; max-height: 220px; border-radius: var(--ou-radius); }
.sl-p-clue { font: 600 clamp(1.25rem, 5vw, 1.5rem)/1.3 var(--ou-font-body); text-wrap: balance; }
.sl-p-answer {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ou-success) 55%, transparent);
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-success) 10%, var(--ou-surface));
  font-weight: 600;
}
.sl-p-answer span {
  display: block;
  color: var(--ou-green-ink);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.sl-p-result { font-weight: 600; }
.sl-p-result.ok { color: var(--ou-green-ink); }
.sl-p-result.bad { color: var(--ou-red-ink); }
.sl-p-result .sl-why { color: var(--ou-muted); font-weight: 400; }
.sl-p-info { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: var(--ou-muted); text-align: center; }
.sl-p-info .icon { color: var(--ou-primary-ink); }
.sl-p-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ou-green-ink); font-weight: 600; }
.sl-p-label { margin: 4px 0 0; }
.sl-p-inrow { display: flex; gap: 8px; }
.sl-p-inrow input { flex: 1; min-width: 0; }

/* Buzzer: der Held auf dem Handy */
.sl-p-buzzwrap { display: flex; justify-content: center; padding: 10px 0; }
.sl-buzzer {
  display: grid;
  place-items: center;
  width: min(76vw, 280px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ou-primary-fill);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ou-primary) 22%, transparent), var(--ou-drop);
  color: var(--ou-on-primary);
  font: 400 4rem/1 var(--ou-font-display);
  letter-spacing: .06em;
  -webkit-tap-highlight-color: transparent;
}
.sl-buzzer:hover:not(:disabled) { background: var(--ou-primary-fill-hover); }
.sl-buzzer:disabled { opacity: .6; }
@media (min-width: 900px) { .sl-buzzer { width: min(38vw, 400px); } }
.sl-p-bigstate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 16px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface-2);
  color: var(--ou-muted);
  font: 400 2.25rem/1.05 var(--ou-font-display);
  text-align: center;
  text-transform: uppercase;
}
.sl-p-bigstate.ok { border-color: var(--ou-primary); background: var(--ou-primary-fill); color: var(--ou-on-primary); }
.sl-p-bigstate.muted { color: var(--ou-faint); }

/* Brett: klein zum Mitlesen, beim Wählen große Ziele */
.sl-p-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.sl-p-bc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 3px;
  border-radius: var(--ou-radius-sm);
  background: var(--ou-primary-fill);
  color: var(--ou-on-primary);
  font: 400 .8125rem/1 var(--ou-font-display);
  text-align: center;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.sl-p-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
  color: var(--ou-text);
  font: 400 1.125rem/1 var(--ou-font-display);
  font-variant-numeric: tabular-nums;
}
.sl-p-cell.used { border-style: dashed; background: transparent; }
button.sl-p-cell.pick { min-height: 48px; padding: 0; border-color: var(--ou-primary); font-size: 1.5rem; }
button.sl-p-cell.pick:hover:not(:disabled) { background: color-mix(in srgb, var(--ou-primary) 14%, var(--ou-surface)); }
/* Breite Screens: Brett wächst mit */
@media (min-width: 720px) {
  .sl-p-board { gap: 6px; }
  .sl-p-bc { min-height: 48px; font-size: 1.125rem; }
  .sl-p-cell { min-height: 48px; font-size: 1.5rem; }
  button.sl-p-cell.pick { min-height: 64px; font-size: 2rem; }
}

/* Final */
.sl-p-reveals { display: flex; flex-direction: column; gap: 6px; }
.sl-p-reveal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
}
.sl-p-reveal.ok { border-color: color-mix(in srgb, var(--ou-success) 60%, transparent); }
.sl-p-reveal.bad { border-color: color-mix(in srgb, var(--ou-danger) 60%, transparent); }
.sl-p-reveal span { font-weight: 600; }
.sl-p-reveal i { color: var(--ou-muted); font-size: var(--ou-fs-sm); font-style: normal; }


/* Wer oder Was? (Phase 4) ------------------------------------------------------------------
   Handy: Fakten, darunter der große Buzzer, Status und Punkte. Ab 1000 px Arena mit
   Fakten links und Buzzer rechts. Bewegung: stamp beim Buzzern, Aufleuchten bei der Wertung. */

.ww-p { position: relative; display: flex; flex-direction: column; gap: 14px; }
.ww-p-body { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ww-p-kicker {
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.ww-p-h { margin: 0; }
.ww-p-desc { margin: 0; color: var(--ou-muted); }
.ww-p-sub { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
@media (min-width: 720px) { .ww-p-desc, .ww-p-expl { max-width: 66ch; margin-inline: auto; } }

.ww-p-qhead { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ww-p-qhead .ww-p-kicker { color: var(--ou-text); font: 600 1.25rem/1.3 var(--ou-font-body); letter-spacing: 0; text-transform: none; }
.ww-p-factcount { color: var(--ou-muted); font-size: var(--ou-fs-sm); font-variant-numeric: tabular-nums; }

/* Fakten */
.ww-p-facts { display: flex; gap: 8px; width: 100%; }
.ww-p-facts.list { flex-direction: column; }
.ww-p-facts.chain { flex-flow: row wrap; align-items: stretch; justify-content: center; }
.ww-p-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  animation: gh-rise var(--ou-dur-slow) var(--ou-ease);
}
.ww-p-facts.chain .ww-p-fact { min-width: 110px; }
.ww-p-fact-text { font: 600 1.125rem/1.35 var(--ou-font-body); }
.ww-p-fact-imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ww-p-fact-img {
  width: clamp(90px, 30vw, 160px);
  height: clamp(90px, 30vw, 160px);
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  object-fit: cover;
  cursor: zoom-in;
}
.ww-p-fact.imgonly .ww-p-fact-img { width: clamp(160px, 60vw, 320px); height: auto; }
.ww-p-arrow { display: grid; align-self: center; place-items: center; color: var(--ou-primary-ink); font-size: 1.5rem; }

/* Buzzer: rot und groß, wenn frei; sonst ruhig mit Zustand */
.ww-buzzer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  min-height: 132px;
  margin: 4px auto;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface-2);
  color: var(--ou-muted);
  font: 400 clamp(1.75rem, 7vw, 2.5rem)/1.05 var(--ou-font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.ww-buzzer.ready { border-color: var(--ou-primary-fill); background: var(--ou-primary-fill); box-shadow: var(--ou-drop); color: var(--ou-on-primary); font-size: clamp(2.5rem, 11vw, 3.5rem); }
.ww-buzzer.ready:hover { background: var(--ou-primary-fill-hover); }
.ww-buzzer.mine { border-color: var(--ou-success); background: color-mix(in srgb, var(--ou-success) 18%, var(--ou-surface)); color: var(--ou-green-ink); }
.ww-buzzer.blocked { border-color: color-mix(in srgb, var(--ou-danger) 70%, transparent); background: color-mix(in srgb, var(--ou-danger) 10%, var(--ou-surface)); color: var(--ou-red-ink); }
.ww-buzzer.taken, .ww-buzzer.locked, .ww-buzzer.spectator { cursor: not-allowed; }
.ww-buzzer:disabled { opacity: 1; cursor: not-allowed; }
.ww-buzzer-label { line-height: 1.05; }
.ww-buzzer-count { font: 600 var(--ou-fs-lg)/1 var(--ou-font-body); font-variant-numeric: tabular-nums; }
.ww-buzzer.zoom { max-width: 320px; min-height: 84px; font-size: clamp(1.25rem, 6vw, 1.75rem); }
.ww-buzzer.zoom.ready { font-size: clamp(1.75rem, 8vw, 2.25rem); }

/* Status unter dem Buzzer */
.ww-p-status { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 22px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.ww-p-status-buzzed { font-weight: 600; }
.ww-p-status-buzzed b { color: var(--ou-text); }
.ww-p-status-you { color: var(--ou-green-ink); font-weight: 600; }
#wwView .ww-count { color: var(--ou-muted); font-variant-numeric: tabular-nums; }
.ww-p-blocked { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.ww-p-chip {
  padding: 2px 8px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  color: var(--ou-text);
  text-decoration: line-through;
  text-decoration-color: var(--ou-red);
}
.ww-p-chip.me { border-color: var(--ou-danger); color: var(--ou-red-ink); }

/* Auflösung */
.ww-p-winbanner { color: var(--ou-green-ink); font: 400 clamp(2.5rem, 12vw, 3.5rem)/.95 var(--ou-font-display); text-transform: uppercase; }
.ww-p-winner { font: 400 1.75rem/1.1 var(--ou-font-display); text-transform: uppercase; }
.ww-p-winpts { color: var(--ou-green-ink); }
.ww-p-answer {
  padding: 8px 18px;
  border: 1px solid var(--ou-success);
  border-radius: var(--ou-radius);
  background: color-mix(in srgb, var(--ou-success) 12%, var(--ou-surface));
  font: 400 clamp(2rem, 9vw, 2.75rem)/1.05 var(--ou-font-display);
  text-transform: uppercase;
}
.ww-p-expl { margin: 0; color: var(--ou-muted); line-height: 1.5; }

/* Punkte */
.ww-p-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ww-p-mini-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  color: var(--ou-muted);
  font-size: var(--ou-fs-sm);
}
.ww-p-mini-chip b { color: var(--ou-text); font: 400 1.125rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.ww-p-mini-chip.me { border-color: var(--ou-primary); color: var(--ou-primary-ink); }
.ww-p-scores { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ww-p-score-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 80px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
  text-align: left;
}
.ww-p-score-row.lead { border-color: var(--ou-primary); box-shadow: inset 3px 0 0 var(--ou-primary); }
.ww-p-score-row.me { background: color-mix(in srgb, var(--ou-primary) 9%, var(--ou-surface)); }
.ww-p-score-rank { color: var(--ou-muted); font: 400 1.25rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.ww-p-score-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ww-p-score-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--ou-surface-2); }
.ww-p-score-bar > span { display: block; height: 100%; background: var(--ou-primary); transition: width var(--ou-dur-slow) var(--ou-ease); }
.ww-p-score-val { font: 400 1.5rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; text-align: right; }

/* Bild-Großansicht */
.ww-zoom {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ou-black) 88%, transparent);
  animation: gh-fade var(--ou-dur) var(--ou-ease);
}
.ww-zoom-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 96vw; max-height: 94vh; }
.ww-zoom-img { max-width: 96vw; max-height: 68vh; border-radius: var(--ou-radius); object-fit: contain; }
.ww-zoom-close {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ou-line-strong);
  background: var(--ou-surface);
  color: var(--ou-text);
  font-size: 1.25rem;
}

/* Aufleuchten bei der Wertung (grün richtig, rot falsch), ganz kurz über dem Bild */
.ww-flash { position: fixed; inset: 0; z-index: 55; pointer-events: none; animation: gh-flash .9s var(--ou-ease) forwards; }
.ww-flash.ok { box-shadow: inset 0 0 0 8px var(--ou-success); background: color-mix(in srgb, var(--ou-success) 14%, transparent); }
.ww-flash.bad { box-shadow: inset 0 0 0 8px var(--ou-danger); background: color-mix(in srgb, var(--ou-danger) 14%, transparent); }
@keyframes gh-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* Breite Screens: Arena mit Fakten links und Buzzer rechts */
.ww-p-arena { display: grid; grid-template-columns: 1fr; align-items: start; gap: 16px; width: 100%; align-self: stretch; text-align: left; }
@media (min-width: 900px) {
  .ww-p-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-self: stretch; }
}
@media (min-width: 1000px) {
  .ww-p-arena { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .ww-p-arena-buzz { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
  .ww-p-arena .ww-buzzer { max-width: none; }
  .ww-p-facts.list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}


/* Getroffen Verschossen (Phase 5) ----------------------------------------------------------
   Passiv: Begriff groß, Auflösung als ruhige Karte, Sieger grün, Endstand als Liste. */

.gv-p { display: flex; flex-direction: column; gap: 14px; }
.gv-p-body { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gv-p-kicker {
  color: var(--ou-muted);
  font: 600 var(--ou-fs-xs)/1.35 var(--ou-font-body);
  letter-spacing: var(--ou-label-tracking);
  text-transform: uppercase;
}
.gv-p-h { margin: 0; }
.gv-p-desc { margin: 0; color: var(--ou-muted); line-height: 1.5; }
.gv-p-sub { margin: 0; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.gv-p-question { padding: 8px 0; }
.gv-p-term { font: 400 clamp(2.75rem, 13vw, 4.5rem)/.95 var(--ou-font-display); letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
.gv-p-term.small { font-size: clamp(2rem, 9vw, 3rem); }
.gv-p-imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gv-p-img {
  width: clamp(120px, 40vw, 200px);
  height: clamp(120px, 40vw, 200px);
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius);
  background: var(--ou-surface-2);
  object-fit: cover;
}
.gv-p-expl {
  padding: 12px 14px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
  font: 500 var(--ou-fs-lg)/1.5 var(--ou-font-body);
}
@media (min-width: 720px) { .gv-p-desc, .gv-p-expl { max-width: 66ch; margin-inline: auto; } }

.gv-p-win { gap: 10px; }
.gv-p-winbanner { color: var(--ou-green-ink); font: 400 clamp(2.5rem, 12vw, 3.5rem)/.95 var(--ou-font-display); text-transform: uppercase; }
.gv-p-winner { font: 400 1.75rem/1.1 var(--ou-font-display); text-transform: uppercase; }

.gv-p-scores { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gv-p-score-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 70px auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface);
  text-align: left;
}
.gv-p-score-row.lead { border-color: var(--ou-primary); box-shadow: inset 3px 0 0 var(--ou-primary); }
.gv-p-score-row.me { background: color-mix(in srgb, var(--ou-primary) 9%, var(--ou-surface)); }
.gv-p-score-rank { color: var(--ou-muted); font: 400 1.25rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; }
.gv-p-score-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gv-p-score-bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--ou-surface-2); }
.gv-p-score-bar > span { display: block; height: 100%; background: var(--ou-primary); transition: width var(--ou-dur-slow) var(--ou-ease); }
.gv-p-score-val { font: 400 1.5rem/1 var(--ou-font-display); font-variant-numeric: tabular-nums; text-align: right; }

@media (min-width: 900px) {
  .gv-p-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-self: stretch; }
  .gv-p-body { max-width: min(92vw, 1100px); margin-inline: auto; }
  .gv-p-img { width: clamp(200px, 22vw, 360px); height: clamp(200px, 22vw, 360px); }
}


/* Rangliste (Phase 6) ------------------------------------------------------------------------
   Einordnen per Ziehen und per Antippen (Schutzliste 2.2): .drop, .sel, .targetable und der
   Abbrechen-Knopf sind Zustände aus ranking.js. Geteilte Bausteine (Balken, Kacheln,
   Auflösung, Detailansicht) liegen in gamehub.css. */

.rk-p { display: flex; flex-direction: column; gap: 14px; }
.rk-p-body { display: flex; flex-direction: column; gap: 12px; }
.rk-p-h { margin: 0; font-size: 2rem; }
.rk-p-desc { margin: 0; color: var(--ou-muted); line-height: 1.5; }
.rk-p-sub { margin: 0; color: var(--ou-muted); }
.rk-p-sub b { color: var(--ou-text); font-variant-numeric: tabular-nums; }
.rk-p-ok {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--ou-green-ink);
  font: 400 1.75rem/1 var(--ou-font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.rk-p-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chip.me { border-color: var(--ou-primary); color: var(--ou-primary-ink); }

/* Einordnen: Karte für Karte. Handy: Karte, offene Elemente, Abgeben, dann die Liste.
   Desktop: links die Karte (klebt beim Scrollen), rechts die eigene Liste. */
.rk-p-place { display: flex; flex-direction: column; gap: 16px; }
.rk-p-side, .rk-p-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) {
  .rk-p-place { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); align-items: start; gap: 24px; }
  .rk-p-side { position: sticky; top: 12px; }
}

.rk-p-progress { display: flex; align-items: center; gap: 12px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.rk-p-progress b { color: var(--ou-text); font-variant-numeric: tabular-nums; }
.rk-p-progressbar { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: 1px; background: var(--ou-line); }
.rk-p-progressbar > span { position: absolute; inset: 0 auto 0 0; background: var(--ou-primary); transition: width var(--ou-dur) var(--ou-ease); }

/* Die große Karte */
.rk-p-focus {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius);
  background: var(--ou-surface);
}
.rk-p-focus.is-moving { border-color: var(--ou-primary); box-shadow: inset 0 3px 0 var(--ou-primary); }
.rk-p-focus-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 34vh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--ou-line);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  cursor: zoom-in;
}
.rk-p-focus-media:active { transform: none; }
.rk-p-focus-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rk-p-focus-mono { color: var(--ou-muted); font: 400 clamp(3rem, 12vw, 4.5rem)/1 var(--ou-font-display); }
.rk-p-focus-count, .rk-p-focus-more {
  position: absolute;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--ou-radius-sm);
  background: color-mix(in srgb, var(--ou-black) 72%, transparent);
  color: var(--ou-cream);
  font: 600 .75rem/1.2 var(--ou-font-body);
}
.rk-p-focus-count { left: 8px; }
.rk-p-focus-more { right: 8px; }
.rk-p-focus-info { display: grid; gap: 4px; }
.rk-p-focus-kicker { color: var(--ou-muted); font: 600 .6875rem/1.2 var(--ou-font-label); letter-spacing: var(--ou-label-tracking); text-transform: uppercase; }
.rk-p-focus.is-moving .rk-p-focus-kicker { color: var(--ou-primary-ink); }
.rk-p-focus-name { margin: 0; font-size: clamp(1.75rem, 6vw, 2.25rem); overflow-wrap: anywhere; }
.rk-p-focus-desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--ou-muted); font-size: var(--ou-fs-sm); line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Ein Knopf je Tier in Tier-Farbe (dunkle Schrift wie auf den Tier-Labels) */
.rk-p-tierbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.rk-p-tierbtn {
  position: relative;
  min-height: 60px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--ou-radius-sm);
  background: var(--tier, var(--ou-surface-2));
  color: var(--ou-black);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--ou-black) 22%, transparent);
}
.rk-p-tierbtn:hover:not(:disabled) { filter: brightness(1.06); }
.rk-p-tierbtn:focus-visible { outline: 2px solid var(--ou-text); outline-offset: 2px; }
.rk-p-tierbtn.is-current { opacity: .45; }
.rk-p-tierbtn-label { font: 400 1.9rem/1 var(--ou-font-display); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.rk-p-tierbtn-count {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ou-black) 70%, transparent);
  color: var(--ou-cream);
  font: 700 .6875rem/1.3 var(--ou-font-body);
  font-variant-numeric: tabular-nums;
}
.rk-p-tierbtn-key { position: absolute; bottom: 3px; left: 6px; color: color-mix(in srgb, var(--ou-black) 55%, transparent); font: 700 .625rem/1 var(--ou-font-body); }
.rk-p-focus-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-p-keys { margin-left: auto; color: var(--ou-faint); font-size: .75rem; }
@media (hover: none), (pointer: coarse) {
  .rk-p-keys, .rk-p-tierbtn-key { display: none; }
}

/* Alles eingeordnet */
.rk-p-focus.is-done { align-items: flex-start; border-color: color-mix(in srgb, var(--ou-green) 55%, var(--ou-line)); }
.rk-p-done-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--ou-green) 22%, transparent); color: var(--ou-green-ink); }
.rk-p-done-icon .icon { font-size: 1.3rem; }

/* Eigene Liste */
.rk-p-listhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rk-p-listhead h3 { margin: 0; font-size: 1.75rem; }
.rk-p-listhead span { color: var(--ou-faint); font-size: .8125rem; }
/* Am Handy wird nicht gezogen: leere Ablage ausblenden, die Karte meldet schon „Alles eingeordnet" */
@media (hover: none), (pointer: coarse) {
  .rk-p-pool:has(.rk-p-poolempty) { display: none; }
}
.rk-p-poolhead { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--ou-muted); font-size: var(--ou-fs-sm); }
.rk-p-poolhead.is-done { color: var(--ou-green-ink); font-weight: 600; }
.rk-p-poolgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 8px;
  border: 1px dashed var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  transition: border-color var(--ou-dur-fast) var(--ou-ease), background-color var(--ou-dur-fast) var(--ou-ease);
}
.rk-p-poolgrid.drop { border-color: var(--ou-primary); background: color-mix(in srgb, var(--ou-primary) 8%, transparent); }
.rk-p-poolempty { align-self: center; color: var(--ou-faint); font-size: var(--ou-fs-sm); }
.rk-p-el {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--ou-line-strong);
  border-radius: var(--ou-radius-sm);
  background: var(--ou-surface-2);
  color: var(--ou-text);
  font: 600 var(--ou-fs-sm)/1.2 var(--ou-font-body);
  letter-spacing: 0;
  cursor: grab;
  user-select: none;
}
.rk-p-el:has(> .rk-el-img) { padding-left: 5px; }
.rk-p-el:hover { border-color: var(--ou-text); }
.rk-p-el:active { cursor: grabbing; }
.rk-p-el.sel {
  border-color: var(--ou-primary);
  background: color-mix(in srgb, var(--ou-primary) 14%, var(--ou-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ou-primary) 45%, transparent);
}
.rk-p-el .rk-el-img { width: 32px; height: 32px; flex: none; border-radius: var(--ou-radius-sm); object-fit: cover; }
.rk-p-el .rk-el-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-p-tiers { display: flex; flex-direction: column; gap: 6px; }
.rk-p-tiers .rk-bar { background: color-mix(in srgb, var(--ou-text) 4%, transparent); }
.rk-p-tiers .rk-bar.targetable { cursor: pointer; }
.rk-p-tiers.is-moving .rk-bar.targetable { border-color: color-mix(in srgb, var(--ou-primary) 50%, var(--ou-line)); }
.rk-p-tiers .rk-bar.targetable:hover, .rk-p-tiers .rk-bar.drop { outline: 2px solid var(--ou-primary); outline-offset: -2px; }
.rk-p-submit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.rk-p-submithint { color: var(--ou-faint); font-size: var(--ou-fs-sm); text-align: center; }
@media (min-width: 720px) { .rk-p-desc { max-width: 66ch; margin-inline: auto; } }