:root{
  --bg-1:#1B1035; --bg-2:#0F0821;
  --panel:#2A1B52; --panel-line:#4A3580;
  --magenta:#FF3E8E; --gold:#FFC857; --cyan:#4CD9E0; --violet:#9B6BFF;
  --text:#F5F2FF; --text-dim:#B9ABDD;
  --success:#33D17A; --danger:#FF5C5C;
}
*{box-sizing:border-box;}
/* Without this, an element hidden via the `hidden` attribute stays visible
   whenever an author rule also sets its `display` (e.g. `.timer-options{
   display:flex }`) — the UA stylesheet's own `[hidden]{display:none}` loses
   to any same-origin author rule regardless of specificity. */
[hidden]{ display:none !important; }
html,body{height:100%;}
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(ellipse 800px 500px at 50% -10%, rgba(255,62,142,0.25), transparent 60%),
    radial-gradient(ellipse 600px 400px at 85% 10%, rgba(76,217,224,0.15), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment:fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:2.5rem 1.25rem 5rem;
}

.marquee-title{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(1.6rem,5vw,2.2rem); letter-spacing:0.03em;
  color:var(--gold); text-align:center; text-transform:uppercase;
  margin:0 0 1.75rem; text-shadow:0 0 24px rgba(255,200,87,0.25);
}

#app, .stage{ width:100%; max-width:560px; }

a{ color:var(--gold); text-decoration:none; }
a:hover{ color:var(--magenta); text-decoration:underline; }
a:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px; border-radius:4px; }

.top-link{ display:block; text-align:center; font-weight:700; margin:-0.75rem 0 1.5rem; }

label{
  display:block;
  font-family:'Anton',sans-serif; font-weight:400; font-size:0.78rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-dim);
  margin:1.1rem 0 0.4rem;
}
/* Scoped to a direct form child so a label nested one level down inside a
   wrapper div (e.g. #topic-field-group) isn't *also* treated as "the first
   label" and wrongly loses its top margin. */
form > label:first-of-type{ margin-top:0; }

input[type=text], input[type=password]{
  display:block; width:100%;
  background:rgba(255,255,255,0.04); color:var(--text);
  border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 0.9rem;
  font-family:'Manrope',sans-serif; font-size:1rem;
}
input[type=text]:focus, input[type=password]:focus, input[type=text]:focus-visible{
  outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(255,62,142,0.2);
}

/* Segmented button group — replaces a native <select> for small, fixed
   option sets. A native dropdown's open option list renders as a
   browser-native overlay that ignores page CSS/margins entirely, so with
   several selects stacked in one form the open list could be visually
   indistinguishable from the very next (closed) select sitting right below
   it. A button-per-option toggle has no such popup, so the problem can't
   occur at all. Built from real radio inputs (visually hidden) so ordinary
   form submission, keyboard nav and `required` validation keep working. */
.segmented{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.5rem; }
.segmented input[type=radio]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.segmented label{
  flex:1 1 auto; margin:0; padding:0.75rem 0.9rem;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:normal;
  text-transform:none; font-size:0.95rem; color:var(--text-dim);
  background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:12px;
  cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.segmented input[type=radio]:checked + label{
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  border-color:var(--magenta); color:#fff;
}
.segmented input[type=radio]:focus-visible + label{
  outline:2px solid var(--magenta); outline-offset:2px;
}

form{ background:var(--panel); border:1px solid var(--panel-line); border-radius:20px; padding:1.75rem 1.5rem; margin-bottom:1.5rem; box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); }

form > button{
  font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.04em;
  font-size:1rem; text-transform:uppercase;
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  color:#fff; border:none; border-radius:999px;
  padding:0.85rem 1.6rem; cursor:pointer; width:100%;
  box-shadow:0 12px 28px -12px rgba(255,62,142,0.6);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
  margin-top:1.5rem;
}
form > button:hover, form > button:focus-visible{ transform:translateY(-2px); outline:none; }
form > button:active{ transform:translateY(1px); }
form > button:disabled{ opacity:0.5; cursor:default; transform:none; }

.timer-options{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--panel-line);
  display:flex; flex-direction:column; gap:0.9rem;
}
.timer-field{ display:flex; align-items:center; flex-wrap:wrap; gap:0.6rem; }
.timer-field label{
  display:inline; flex:1 1 auto; min-width:9rem; margin:0;
  font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:normal;
  text-transform:none; font-size:0.85rem; color:var(--text-dim);
}
.timer-field-controls{ display:flex; align-items:center; flex:none; gap:0.6rem; }
.timer-field input[type=number]{
  display:block; flex:none; width:4.5rem; text-align:center;
  background:rgba(255,255,255,0.03); color:var(--text-dim);
  border:1px solid var(--panel-line); border-radius:10px;
  padding:0.5rem 0.4rem; font-family:'Manrope',sans-serif; font-size:0.95rem;
}
.timer-field input[type=number]:focus, .timer-field input[type=number]:focus-visible{
  outline:none; border-color:var(--text-dim); box-shadow:0 0 0 3px rgba(185,171,221,0.2);
}
.timer-field .timer-unit{ flex:none; color:var(--text-dim); font-size:0.85rem; }

/* Below this width the longer of the two labels ("Timer nach erster
   Antwort") no longer fits next to its controls on one line while the
   shorter one ("Zeit im Warteraum") still would — wrapping only one of
   the two rows and leaving them visually inconsistent. Force both rows
   to stack the same way instead of letting flex-wrap decide per row. */
@media (max-width:480px){
  .timer-field{ flex-direction:column; align-items:flex-start; gap:0.4rem; }
}

.help-icon{
  position:relative; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid var(--panel-line);
  color:var(--text-dim); font-family:'Manrope',sans-serif; font-size:0.75rem; font-weight:700;
  cursor:pointer; user-select:none;
}
.help-icon:hover, .help-icon:focus, .help-icon:focus-visible, .help-icon.open{
  color:var(--text); border-color:var(--text-dim); outline:none;
}
.help-popup{
  display:none;
  position:absolute; z-index:5; bottom:calc(100% + 0.5rem); right:-0.5rem;
  width:15rem; max-width:65vw;
  background:var(--bg-2); border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 0.9rem; box-shadow:0 12px 28px -12px rgba(0,0,0,0.6);
  color:var(--text); font-size:0.78rem; font-weight:400; line-height:1.5; text-align:left;
}
.help-icon:hover .help-popup, .help-icon:focus .help-popup, .help-icon:focus-visible .help-popup, .help-icon.open .help-popup{
  display:block;
}

.error{ color:var(--danger); font-weight:700; text-align:center; margin:0 0 1rem; }
.success{
  background:var(--panel); border:1px solid var(--success); border-radius:20px;
  padding:1.75rem 1.5rem; margin-bottom:1.5rem;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.success p{ margin:0 0 0.6rem; text-align:center; }
.success p:last-child{ margin-bottom:0; }
.success p.top-link{ margin-top:1.5rem; }

.stats{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:1.25rem 1.5rem; margin-bottom:1.5rem; text-align:center;
  color:var(--text-dim); line-height:1.6;
}

.link-row{ display:flex; gap:0.6rem; align-items:stretch; margin-top:0.25rem; }
.link-box{
  flex:1; word-break:break-all; display:flex; align-items:center;
  background:rgba(255,255,255,0.04); border:1px solid var(--panel-line); border-radius:12px;
  padding:0.75rem 1rem; font-family:'Space Grotesk',monospace; font-size:0.9rem;
}
.link-row button{
  flex:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.85rem;
  background:rgba(255,255,255,0.06); border:1px solid var(--panel-line); color:var(--text);
  border-radius:12px; padding:0 1.1rem; cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.link-row button:hover, .link-row button:focus-visible{ border-color:var(--gold); color:var(--gold); outline:none; }

#countdown-msg, #create-room-status{
  text-align:center; color:var(--gold); font-weight:700; margin:-0.5rem 0 1.5rem;
}

.eyebrow{
  font-family:'Anton',sans-serif;
  font-size:0.95rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin:0 0 0.75rem;
}

/* Sticky so the countdown/answer-window ring stays visible while scrolling
   down to the answer buttons on small screens instead of scrolling away. */
.ring-wrap{
  display:flex; justify-content:center; margin-bottom:1rem;
  position:sticky; top:0.6rem; z-index:20;
}
.ring{
  position:relative; width:132px; height:132px;
  background:rgba(15,8,33,0.72); border-radius:50%;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 24px -8px rgba(0,0,0,0.6);
}
.ring svg{ transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:8; }
.ring-progress{
  fill:none; stroke:var(--magenta); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:352; transition:stroke-dashoffset 1s linear;
}
.ring-progress.danger{ stroke:var(--danger); }
.ring-num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column;
}
.ring-num strong{ font-family:'Space Grotesk',monospace; font-size:2.4rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.ring-num span{ font-size:0.65rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em; margin-top:0.15rem; }

.timer-note{
  text-align:center; font-size:0.9rem; color:var(--text-dim); font-style:italic;
  margin:-0.5rem 0 1.5rem;
}
.timer-note.hidden{ visibility:hidden; }

.question-card{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:1.75rem 1.5rem;
  text-align:center;
  box-shadow:0 20px 50px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  margin-bottom:1.5rem;
}
.question-card h2{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(1.35rem,4.2vw,1.7rem); line-height:1.25; margin:0;
}
.question-card .result-q{
  font-size:0.95rem; color:var(--text-dim); margin:0 0 0.6rem;
}
.question-card .result-a{
  font-size:1.05rem; margin:0;
}
.question-card .result-a strong{ color:var(--gold); }

.options{
  display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; margin-bottom:1.75rem;
}
@media (max-width:420px){ .options{ grid-template-columns:1fr; } }

.opt{
  --tint: var(--magenta);
  position:relative;
  display:flex; align-items:center; gap:0.85rem;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--panel-line);
  border-radius:16px;
  padding:1rem 1.1rem;
  text-align:left;
  color:var(--text);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .2s ease;
}
.opt:nth-child(1){ --tint:var(--magenta); }
.opt:nth-child(2){ --tint:var(--gold); }
.opt:nth-child(3){ --tint:var(--cyan); }
.opt:nth-child(4){ --tint:var(--violet); }

.opt .medal{
  flex:none; width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--tint); color:#1B1035;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:1.05rem;
  box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
.opt:hover, .opt:focus-visible{
  transform:translateY(-2px);
  border-color:var(--tint);
  box-shadow:0 10px 24px -12px var(--tint);
  outline:none;
}
.opt:active{ transform:translateY(1px); }
.opt.selected{ border-color:var(--tint); box-shadow:0 0 0 2px var(--tint) inset; }
.opt:disabled{ opacity:0.45; cursor:default; transform:none; box-shadow:none; }
.opt:disabled:hover{ transform:none; }

.status{
  text-align:center; font-size:0.9rem; color:var(--text-dim); font-style:italic;
  margin:-0.75rem 0 1.5rem; min-height:1.2em;
}
.status.show{ color:var(--gold); font-style:normal; font-weight:700; }

.board-label{
  font-family:'Anton',sans-serif; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-dim); text-align:center; margin:0 0 0.75rem;
}
ul.board{ list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:0.5rem; }
ul.board li{
  display:flex; align-items:center; gap:0.75rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px; padding:0.6rem 0.9rem;
}
ul.board li .rank{
  flex:none; width:1.6rem; text-align:center; font-family:'Space Grotesk',monospace; font-weight:700;
  color:var(--text-dim);
}
ul.board li.lead .rank{ color:var(--gold); }
ul.board li .name{ flex:1; font-weight:700; }
ul.board li .score{ font-family:'Space Grotesk',monospace; font-weight:700; font-variant-numeric:tabular-nums; }
ul.board li.me{ border-color:var(--magenta); background:rgba(255,62,142,0.08); }
ul.board li.lead::before{ content:"\2605"; color:var(--gold); }
ul.board li.winner{ border-color:var(--gold); background:rgba(255,200,87,0.1); }
ul.board li .mark{ font-size:0.8rem; font-weight:700; }
ul.board li .mark.correct{ color:var(--success); }
ul.board li .mark.incorrect{ color:var(--danger); }

.winner-announcement{
  text-align:center; font-size:1.05rem; color:var(--text-dim); margin:-0.5rem 0 1.75rem;
}
.winner-announcement strong{
  display:block; font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.03em;
  font-size:clamp(1.8rem,6vw,2.4rem); text-transform:uppercase; color:var(--gold);
  text-shadow:0 0 24px rgba(255,200,87,0.35); margin-top:0.35rem;
}

.cta-row{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:0.5rem; }
.cta-btn{
  display:inline-block;
  font-family:'Anton',sans-serif; font-weight:400; letter-spacing:0.04em;
  font-size:1rem; text-transform:uppercase; text-align:center;
  background:linear-gradient(180deg, var(--magenta), #D42C72);
  color:#fff; border:none; border-radius:999px;
  padding:0.85rem 2.2rem; cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(255,62,142,0.6);
  transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.cta-btn:hover, .cta-btn:focus-visible{ transform:translateY(-2px); outline:none; text-decoration:none; color:#fff; }
.cta-btn:active{ transform:translateY(1px); }
.cta-btn:disabled{ opacity:0.5; cursor:default; transform:none; }

.cta-btn.secondary{
  background:transparent; color:var(--text);
  border:1px solid var(--panel-line); box-shadow:none;
}
.cta-btn.secondary:hover, .cta-btn.secondary:focus-visible{
  color:var(--gold); border-color:var(--gold);
}

.lead-group{ margin:0 0 2rem; }
.lead-group p{
  text-align:center; color:var(--text-dim); font-size:1.05rem; line-height:1.6;
  max-width:44ch; margin:0 auto 0.9rem;
}
.lead-group p:last-child{ margin-bottom:0; }

.disclaimer{
  text-align:center; color:var(--text-dim); font-size:0.78rem; line-height:1.5;
  max-width:44ch; margin:3rem auto 0; padding-top:1.25rem;
  border-top:1px solid var(--panel-line);
}

.msg-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:20px;
  padding:2rem 1.5rem; text-align:center; font-size:1.05rem; color:var(--text-dim);
}

.restart-status{
  text-align:center; color:var(--gold); font-weight:700; margin:0.75rem 0 0;
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
}
.restart-status.error{ color:var(--danger); }

.spinner{
  display:inline-block; width:1.1em; height:1.1em; flex:none;
  border:2px solid rgba(255,255,255,0.25); border-top-color:var(--gold);
  border-radius:50%; animation:spin 0.8s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } .spinner{ animation-duration:2.4s; } }

.stage-wide{ max-width:1100px; }

.table-wrap{ overflow-x:auto; border:1px solid var(--panel-line); border-radius:20px; }
.rounds-table{
  width:100%; border-collapse:collapse; font-size:0.9rem; white-space:nowrap;
}
.rounds-table th, .rounds-table td{
  text-align:left; padding:0.75rem 1rem; border-bottom:1px solid var(--panel-line);
}
.rounds-table th{
  background:rgba(255,255,255,0.04); color:var(--text-dim);
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
}
.rounds-table tbody tr:last-child td{ border-bottom:none; }
.rounds-table tbody tr:hover{ background:rgba(255,255,255,0.03); }

.pagination{
  display:flex; align-items:center; justify-content:center; gap:1.25rem;
  margin-top:1.5rem; font-weight:700; color:var(--text-dim);
}