/* Thema „Weiße Weihnacht“: Weiß mit silbernen Akzenten */
:root {
  --ink: #1d2230;          /* Haupttext */
  --ink-soft: #4d5566;
  --silver-ink: #7a8394;   /* Silber als Schriftfarbe */
  --silver-hi: #eef0f4;
  --graphite-1: #8c93a1;
  --graphite-2: #2c313b;
  --green-1: #6ee05f;
  --green-2: #129a2a;
  --silver: linear-gradient(180deg, #ffffff 0%, #b4bac6 46%, #7b8292 52%, #e6e9ef 100%);
  --pearl: radial-gradient(ellipse 90% 140% at 50% 0%, #ffffff 0%, #f6f7fa 50%, #e2e5ec 100%);
  --cut: 2.4vw;
  --font: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: radial-gradient(ellipse 80% 70% at 40% 35%, #ffffff 0%, #f1f3f7 45%, #d3d8e1 100%);
  color: var(--ink);
  font-family: var(--font);
  cursor: default;
  user-select: none;
}

/* Lichtkegel und Schnee im Hintergrund */
#beams {
  position: fixed; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(140,150,170,.07) 0deg 6deg, transparent 6deg 24deg);
  animation: spin 120s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
#snow { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#snow i {
  position: absolute; top: -2vh; width: .6vw; height: .6vw; max-width: 9px; max-height: 9px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, #c3c9d4 70%);
  box-shadow: 0 0 3px rgba(110,120,140,.45);
  opacity: .5;
  animation: fall linear infinite;
}
@keyframes fall { to { transform: translate3d(3vw, 106vh, 0); } }

/* Grundraster */
#stage {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: 1fr 27vw;
  grid-template-rows: 1fr auto;
}
#center { grid-column: 1; grid-row: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }
#ladder { grid-column: 2; grid-row: 1; padding: 2.5vh 2vw 1.5vh 0; display: flex; flex-direction: column; min-height: 0; transition: all .6s ease; }
#qa { grid-column: 1 / -1; grid-row: 2; padding: 1vh 0 4vh; transition: opacity .5s, transform .5s; }
#stage.no-ladder #center { grid-column: 1 / -1; }
#stage.no-ladder #ladder { display: none; }

/* Logo */
#logo { position: relative; width: min(46vh, 36vw); aspect-ratio: 1; transition: all .8s cubic-bezier(.2,.8,.2,1); }
#logo .disc { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 1vh 2.5vh rgba(70,80,100,.35)); z-index: 2; }
#logo .ring { position: absolute; inset: -6%; border-radius: 50%; border: .3vh solid rgba(130,140,160,.45); animation: pulse 4s ease-in-out infinite; }
#logo .ring.r2 { inset: -13%; border-color: rgba(130,140,160,.22); animation-delay: 1.2s; }
#logo .glow { position: absolute; inset: -20%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(150,160,180,.45) 80%, transparent 90%);
  animation: spin 6s linear infinite; filter: blur(6px); }
@keyframes pulse { 50% { transform: scale(1.04); opacity: .5; } }
#logo .t1 { font: 600 34px var(--font); fill: var(--ink-soft); letter-spacing: 6px; }
#logo .t2 { font: 700 58px var(--font); fill: url(#silverText); letter-spacing: 1px; }
#logo .t3 { font: 600 19px var(--font); fill: var(--silver-ink); letter-spacing: 5px; }
.phase-lobby #logo { width: min(66vh, 50vw); }
.phase-question #logo { width: min(34vh, 26vw); }
#hello { position: absolute; bottom: 6vh; left: 0; right: 0; text-align: center; font-size: 4.2vh; letter-spacing: .2vw; color: var(--ink); text-shadow: 0 0 2vh #fff, 0 0 1vh #fff; opacity: 0; transition: opacity .6s; }
.phase-lobby #hello.on { opacity: 1; }

/* Rauten (Lozenge) */
.loz {
  position: relative; padding: 3px;
  background: var(--silver);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  transition: filter .3s;
  filter: drop-shadow(0 .4vh .8vh rgba(60,70,90,.18));
}
.loz > .in {
  height: 100%;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  background: var(--pearl);
  color: var(--ink);
  display: flex; align-items: center;
  padding: 0 calc(var(--cut) + 1vw);
}
.qrow, .arow { position: relative; display: grid; padding: 0 3vw; }
.qrow::before, .arow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #9aa1b0 8%, #d7dbe3 50%, #9aa1b0 92%, transparent);
}
.qrow { margin-bottom: 1.6vh; }
.arow { grid-template-columns: 1fr 1fr; column-gap: 3vw; margin-top: 1.2vh; }
.q { min-height: 15vh; }
.q .in { justify-content: center; text-align: center; font-size: 3.1vw; line-height: 1.2; padding-top: 1vh; padding-bottom: 1vh; }
.q.len-m .in { font-size: 2.6vw; }
.q.len-l .in { font-size: 2.15vw; }
.q.len-xl .in { font-size: 1.8vw; }
.ans { height: 8.5vh; }
.ans .in { font-size: 2.3vw; gap: .8vw; white-space: nowrap; overflow: hidden; }
.ans.small .in { font-size: 1.8vw; }
.ans b { color: var(--silver-ink); font-weight: 700; }
.ans span, .ans b { transition: opacity .35s; }
.ans.hidden span, .ans.hidden b, .ans.removed span, .ans.removed b { opacity: 0; }

/* Eingeloggt: dunkles Silber (Anthrazit), damit es sich klar vom Weiß abhebt */
.ans.locked { background: linear-gradient(180deg, #ffffff, #9ea5b3 50%, #f0f2f6); }
.ans.locked .in { background: linear-gradient(180deg, var(--graphite-1) 0%, #4b515d 50%, var(--graphite-2) 100%); color: #fff; }
.ans.locked b { color: var(--silver-hi); }
.ans.correct { background: linear-gradient(180deg, #eaffea, #57c95a 50%, #e2ffe2); }
.ans.correct .in { background: linear-gradient(180deg, var(--green-1) 0%, #26b33c 50%, var(--green-2) 100%); color: #000; }
.ans.correct b { color: #fff; }
.ans.blink .in { animation: blink .32s steps(1) 7; }
@keyframes blink { 50% { background: var(--pearl); color: var(--ink); } }

/* Gewinnleiter */
#jokers { display: flex; justify-content: center; gap: 1vw; margin-bottom: 1.6vh; }
.joker {
  position: relative; width: 5.2vw; height: 3.6vw; border-radius: 50%;
  border: 2px solid #a3aab8; background: radial-gradient(ellipse at 50% 30%, #ffffff, #dfe3ea 75%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3vw; font-weight: 700; color: var(--ink-soft);
  box-shadow: 0 .4vh 1vh rgba(60,70,90,.2);
  transition: all .4s;
}
.joker svg { width: 55%; height: 55%; fill: var(--ink-soft); }
.joker.aktiv { border-color: var(--graphite-2); box-shadow: 0 0 2.5vh rgba(80,90,110,.6); transform: scale(1.12); }
.joker.benutzt { opacity: .5; }
.joker.benutzt::before, .joker.benutzt::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: .35vw; min-height: 3px;
  background: #d0202a; border-radius: 2px; transform: rotate(32deg); box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.joker.benutzt::after { transform: rotate(-32deg); }

#rows { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
#rows li {
  flex: 1; display: flex; align-items: center; gap: .6vw;
  font-size: 2.6vh; font-weight: 600; color: var(--silver-ink);
  padding: 0 1.4vw; position: relative; min-height: 0;
  border-radius: 1vh;
}
#rows li .no { width: 2.2em; text-align: right; opacity: .85; }
#rows li .dia { width: 1em; text-align: center; font-size: .8em; visibility: hidden; color: var(--ink); }
#rows li .amt { flex: 1; letter-spacing: .05vw; }
#rows li.safe { color: var(--ink); font-weight: 700; }
#rows li.passed .dia { visibility: visible; }
#rows li.current {
  background: linear-gradient(180deg, var(--graphite-1), #4b515d 50%, var(--graphite-2));
  color: #fff; box-shadow: 0 0 2vh rgba(60,70,90,.4);
  clip-path: polygon(1.2vw 0, calc(100% - 1.2vw) 0, 100% 50%, calc(100% - 1.2vw) 100%, 1.2vw 100%, 0 50%);
}
#rows li.current .dia { color: #fff; }
#rows li.won { background: linear-gradient(180deg, var(--green-1), var(--green-2)); color: #000; }

/* Gewinnleiter groß (zwischen den Fragen) */
#stage.ladder-focus #ladder {
  position: fixed; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(52vw, 70vh); height: 88vh; padding: 3vh 3vw;
  background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.98), rgba(228,231,238,.98));
  border: 2px solid #b4bac6; border-radius: 2vh;
  box-shadow: 0 2vh 8vh rgba(40,50,70,.35), 0 0 0 .5vh rgba(255,255,255,.7);
}
#stage.ladder-focus #rows li { font-size: 3.6vh; }
#stage.ladder-focus .joker { width: 7vw; height: 4.8vw; font-size: 1.7vw; }
#stage.ladder-focus #center { opacity: .25; }

/* Phasen */
.phase-lobby #qa, .phase-between #qa { opacity: 0; transform: translateY(5vh); pointer-events: none; }
.phase-lobby #ladder { opacity: 0; }

/* Overlays im Mittelfeld */
#overlay, #finale { position: absolute; inset: 2vh 2vw; display: none; align-items: center; justify-content: center; flex-direction: column; z-index: 3; }
#overlay.on, #finale.on { display: flex; }
#overlay.on ~ #logo, .has-overlay #logo { opacity: 0; transform: scale(.8); }
.panel {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.98), rgba(230,233,240,.97));
  border: 2px solid #b4bac6; border-radius: 2vh;
  padding: 2.5vh 3vw; box-shadow: 0 2vh 5vh rgba(40,50,70,.3);
  text-align: center; animation: pop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.panel h2 { margin: 0 0 1.5vh; font-size: 4vh; color: var(--silver-ink); letter-spacing: .15vw; text-transform: uppercase; }
.panel p { margin: .6vh 0; font-size: 2.6vh; color: var(--ink-soft); }

.vote { display: flex; gap: 3vw; align-items: center; }
.vote img { width: 24vh; height: 24vh; background: #fff; border-radius: 1vh; padding: .6vh; border: 2px solid #c4c9d3; }
.panel .count { font-size: 7vh; font-weight: 700; color: var(--ink); }

.bars { display: flex; gap: 2.4vw; align-items: flex-end; height: 32vh; padding: 0 1vw; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 6vw; }
.bar .pct { font-size: 3vh; font-weight: 700; margin-bottom: .6vh; color: var(--ink); }
.bar .col {
  width: 100%; height: 0; border-radius: .6vh .6vh 0 0;
  background: linear-gradient(90deg, #7b8292, #e9ecf1 45%, #a7adba 70%, #6e7584);
  box-shadow: 0 0 1.5vh rgba(60,70,90,.3);
  transition: height 2.2s cubic-bezier(.2,.9,.2,1);
}
.bar .let { margin-top: .8vh; font-size: 3.4vh; font-weight: 700; color: var(--silver-ink); border-top: 2px solid #a3aab8; width: 100%; padding-top: .6vh; }
.bar.gone { opacity: .25; }

.clock { position: relative; width: 30vh; height: 30vh; border-radius: 50%; margin: 1vh auto; display: flex; align-items: center; justify-content: center; }
.clock .num { position: relative; font-size: 12vh; font-weight: 700; z-index: 1; color: var(--ink); }
.clock .face { position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%); }
.clock.urgent .num { color: #e0262f; animation: beat 1s infinite; }
@keyframes beat { 15% { transform: scale(1.15); } }

#finale .amount {
  margin-top: 2vh; padding: 2vh 5vw; font-size: 9vh; font-weight: 700; color: var(--graphite-2);
  background: linear-gradient(180deg, #ffffff, #cfd4dc 45%, #8e95a3 55%, #f2f4f7);
  clip-path: polygon(3vw 0, calc(100% - 3vw) 0, 100% 50%, calc(100% - 3vw) 100%, 3vw 100%, 0 50%);
}
#finale .who { font-size: 4.5vh; color: var(--ink); }
#finale.million .amount { animation: shine 1.2s ease-in-out infinite alternate; }
@keyframes shine { to { filter: brightness(1.15) drop-shadow(0 0 4vh rgba(140,150,170,.9)); } }
.confetti { position: fixed; top: -3vh; width: 1vw; height: 1.8vh; z-index: 9; animation: fall linear forwards; box-shadow: 0 0 2px rgba(60,70,90,.35); }

/* Start und Verbindung */
#start {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: 2vh;
  align-items: center; justify-content: center; background: rgba(245,247,250,.85); backdrop-filter: blur(6px);
}
#start button {
  font: 700 3.5vh var(--font); color: #fff; border: 0; cursor: pointer;
  padding: 2.2vh 5vw; background: linear-gradient(180deg, var(--graphite-1), var(--graphite-2));
  clip-path: polygon(2vw 0, calc(100% - 2vw) 0, 100% 50%, calc(100% - 2vw) 100%, 2vw 100%, 0 50%);
}
#start p { color: var(--ink-soft); font-size: 2.2vh; margin: 0; }
#start.hide { display: none; }
#offline { position: fixed; top: 1vh; left: 50%; transform: translateX(-50%); z-index: 30; display: none;
  background: #b00020; color: #fff; padding: .8vh 2vw; border-radius: 1vh; font-size: 2vh; }
#offline.on { display: block; }

/* Hochformat (Tablet in der Hand des Kandidaten) */
@media (max-aspect-ratio: 1/1) {
  :root { --cut: 4.5vw; }
  #stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  #ladder { grid-column: 1; grid-row: 1; padding: 1.5vh 3vw 0; }
  #rows { display: none; }
  #center { grid-row: 2; }
  #qa { grid-row: 3; }
  .q .in { font-size: 5vw; } .q.len-m .in { font-size: 4.4vw; } .q.len-l .in, .q.len-xl .in { font-size: 3.8vw; }
  .arow { grid-template-columns: 1fr; row-gap: 1.2vh; }
  .arow::before { display: none; }
  .ans .in { font-size: 4.4vw; } .ans.small .in { font-size: 3.6vw; }
  .joker { width: 13vw; height: 9vw; font-size: 3.4vw; }
  #stage.ladder-focus #ladder { width: 92vw; height: 80vh; }
  #stage.ladder-focus #rows { display: flex; }
  .bars { height: 22vh; } .bar { width: 14vw; }
  #overlay, #finale { inset: 1vh 3vw; }
  .panel { padding: 1.5vh 4vw; }
  .panel h2 { font-size: 3vh; margin-bottom: 1vh; }
  .clock { width: 20vh; height: 20vh; } .clock .num { font-size: 8vh; }
  .vote img { width: 16vh; height: 16vh; }
  #finale .amount { font-size: 6vh; }
}