/* ============================================================
   GAMESHOW · TEILNEHMER-ANSICHT (Handy)
   Kahoot-Prinzip im Campuslichter-Look: Antworten sind „Lichter".
   Frage + Antworttexte stehen NUR auf dem Beamer.
   ============================================================ */

html, body { height: 100%; }
body.participant { overflow: hidden; }   /* app-artig, kein Scrollen */

.stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 100svh;
  padding: max(env(safe-area-inset-top), .9rem) var(--pad) max(env(safe-area-inset-bottom), 1.1rem);
}

/* ---------- Kopfzeile: Frage x/15 + Timer ---------- */
.qbar { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; min-height: 2.2rem; }
.qbar__count { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: var(--muted-2); white-space: nowrap; }
.qbar__count b { color: #fff; font-size: 1rem; }
.qbar__timer { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.qbar__secs {
  font-family: var(--ff-display); font-size: 1.5rem; line-height: 1; color: #fff;
  min-width: 1.7ch; text-align: right; font-variant-numeric: tabular-nums;
}
.qbar__track { width: 92px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.qbar__fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--light-grn), var(--accent)); transform-origin: left; transition: transform 1s linear, background .4s ease; }
.qbar__fill.is-low { background: linear-gradient(90deg, var(--light-orng), var(--accent)); }
.qbar.is-paused .qbar__secs { opacity: .5; }

/* ---------- Screens ---------- */
.screen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.screen__title { font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(2rem, 9vw, 2.8rem); line-height: .95; margin-top: .2rem; }
.screen__sub { color: var(--muted); font-size: clamp(1rem, 4vw, 1.15rem); margin-top: .7rem; max-width: 22ch; }

/* ---------- Lobby / Warten ---------- */
.screen--lobby, .screen--wait { justify-content: center; gap: .3rem; }
.brand { width: min(64vw, 280px); margin-bottom: clamp(1.4rem, 6vw, 2.4rem); filter: drop-shadow(0 16px 44px rgba(0,0,0,.5)); animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.pulse-dot {
  width: 14px; height: 14px; border-radius: 50%; background: var(--light-grn);
  box-shadow: 0 0 0 0 rgba(126,210,123,.6); animation: pulse 1.8s ease-out infinite; margin-bottom: 1.1rem;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(126,210,123,.55)} 70%{box-shadow:0 0 0 22px rgba(126,210,123,0)} 100%{box-shadow:0 0 0 0 rgba(126,210,123,0)} }

/* ---------- Frage / Abstimmung ---------- */
.screen--question { justify-content: flex-start; }
.q-instruct { color: var(--muted); font-size: clamp(.95rem, 3.8vw, 1.1rem); margin: .2rem 0 1rem; max-width: 26ch; }
.q-instruct b { color: #fff; font-weight: 700; }
.q-instruct span { display: block; color: var(--muted-2); font-size: .85em; margin-top: .25rem; }

/* Das „Lichter"-Raster — auf dem Handy UNTEREINANDER (besser lesbar),
   ab Tablet/Desktop 2×2 */
.lights {
  width: 100%; flex: 1 1 auto;
  display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr;
  gap: clamp(.55rem, 2.4vw, .95rem); align-content: stretch; padding-bottom: .3rem;
}
@media (min-width: 720px) {
  .lights { grid-template-columns: 1fr 1fr; }
  .lights[data-count="3"] .light:last-child { grid-column: 1 / -1; }
  .light__letter { font-size: clamp(3.4rem, 7vw, 5.4rem); }
}

.light {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  /* kräftig eingefärbter Block → klarer Kontrast zum Hintergrund (kein „Glas"-Look mehr) */
  background: linear-gradient(150deg,
      color-mix(in srgb, var(--c) 58%, #150a2f) 0%,
      color-mix(in srgb, var(--c) 30%, #110725) 100%);
  border: 2px solid color-mix(in srgb, var(--c) 82%, transparent);
  box-shadow:
    0 16px 32px -18px rgba(0,0,0,.75),
    0 0 26px -6px color-mix(in srgb, var(--c) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .14s ease, box-shadow .25s ease, opacity .25s ease, border-color .25s ease, filter .25s ease;
  min-height: 3.9rem; -webkit-tap-highlight-color: transparent;
}
/* zusätzlicher Farb-Glow je Licht (in der CD-Farbe) */
.light__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--c) 80%, transparent) 0%, transparent 66%);
  opacity: .9; transition: opacity .25s ease;
}
.light__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); pointer-events: none; }
.light__letter {
  position: relative; z-index: 1;
  font-family: var(--ff-display); font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1; color: #fff;
  text-shadow: 0 0 22px color-mix(in srgb, var(--c) 80%, transparent), 0 4px 14px rgba(0,0,0,.5);
}
.light__check {
  position: absolute; top: .55rem; right: .7rem; z-index: 2;
  font-size: 1.5rem; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .2s ease;
}
.light[data-opt="a"] { --c: var(--opt-a); }
.light[data-opt="b"] { --c: var(--opt-b); }
.light[data-opt="c"] { --c: var(--opt-c); }
.light[data-opt="d"] { --c: var(--opt-d); }

.light:active { transform: scale(.97); }
@media (hover:hover) { .light:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -16px color-mix(in srgb, var(--c) 50%, rgba(0,0,0,.6)); } }

/* nach der Abstimmung: gewähltes Licht „zündet", die anderen dimmen weg */
.lights.is-locked .light { pointer-events: none; }
.lights.is-locked .light:not(.is-chosen) { opacity: .26; filter: saturate(.5); transform: scale(.97); }
.light.is-chosen {
  border-color: color-mix(in srgb, var(--c) 80%, #fff 0%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 85%, transparent), 0 24px 60px -14px color-mix(in srgb, var(--c) 70%, transparent);
  animation: ignite .45s ease;
}
.light.is-chosen .light__glow { opacity: 1.25; }
.light.is-chosen .light__check { opacity: 1; transform: scale(1); }
@keyframes ignite { 0%{transform:scale(1)} 40%{transform:scale(1.06)} 100%{transform:scale(1)} }

.voted-hint {
  margin-top: 1rem; text-align: center;
  font-weight: 700; color: #fff; font-size: clamp(1rem, 4vw, 1.15rem);
}
.voted-hint span { display: block; color: var(--muted-2); font-weight: 400; font-size: .85em; margin-top: .2rem; }

/* ---------- DQ-Overlay (Frage verlassen) ---------- */
.dq-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: var(--pad);
  background: rgba(10,4,24,.66); -webkit-backdrop-filter: blur(8px) saturate(.6); backdrop-filter: blur(8px) saturate(.6);
  animation: fade .2s ease;
}
@keyframes fade { from{opacity:0} to{opacity:1} }
.dq-card {
  max-width: 30ch; text-align: center;
  background: var(--card); border: 1.5px solid var(--card-brd); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  padding: clamp(1.4rem, 6vw, 2rem); box-shadow: 0 30px 70px -20px rgba(0,0,0,.7);
}
.dq-emoji { font-family: var(--ff-emoji); font-size: 3rem; line-height: 1; margin-bottom: .6rem; }
.dq-card p { color: var(--muted); font-size: clamp(.98rem, 4vw, 1.08rem); }

/* Inhalt ausgrauen, solange das Overlay aktiv ist */
body.is-dq .stage { filter: grayscale(1) brightness(.6); pointer-events: none; }