/* Paket wettkampf: eigene Styles, nutzt die Tokens aus style.css.
   Maße folgen design/Wettkampf, Lobby, Countdown, Live, Siegerliste, Warteschlange (390 x 844). */

/* ===== Vollbild-Seiten (Einstieg, Lobby, Warteschlange, Ergebnis) ===== */
.screen.wk-voll{padding:0;grid-template-columns:minmax(0,1fr);overflow-x:hidden;place-items:stretch;background:var(--panel);backdrop-filter:none}
.wk-voll .screen-card{width:100%;max-width:430px;max-height:none;min-height:100%;margin:0 auto;padding:var(--safe-top) 0 var(--safe-bottom);gap:0;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
.wk-voll .btns{padding:14px 20px 12px}
.wk-voll .btn:disabled{cursor:default}
.wk-fuell{flex:1 0 12px}
.sr-nur{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Einstieg ===== */
.wk-note{margin:0 20px 18px}
.wk-oben{padding-top:0 !important}
.wk-oder{display:flex;align-items:center;gap:12px;padding:6px 20px}
.wk-oder span:first-child,.wk-oder span:last-child{flex:1;height:1px;background:var(--line-2)}
.wk-oder .mono{font-size:11px;letter-spacing:.06em;color:var(--muted-3);text-transform:uppercase}
.wk-label{padding:8px 20px 0;font:400 11px var(--f-mono);letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.otp{display:flex;gap:10px;padding:8px 20px 0}
.otp input{flex:1;min-width:0;height:68px;padding:0;box-sizing:border-box;border-radius:10px;background:var(--input-bg);border:1px solid var(--line-3);color:var(--text);font:600 30px var(--f-mono);text-align:center;text-transform:uppercase;outline:none;caret-color:var(--copper)}
.otp input:focus{border-color:var(--copper);box-shadow:0 0 0 3px var(--copper-halo)}
.otp input.filled{border-color:var(--ring);background:var(--copper-row)}
.wk-voll .feld-fehler{padding:0 20px}
.wk-unten{padding-top:6px !important}

/* ===== Lobby ===== */
.wk-code{letter-spacing:.12em;font-family:var(--f-mono) !important}
.wk-sec{padding-left:20px}
.lobby-raster{list-style:none;margin:0;padding:0 20px 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lp{display:flex;align-items:center;gap:10px;min-width:0;height:52px;padding:0 10px;border-radius:12px;background:var(--sheet);border:1px solid var(--line)}
.lp.ich{background:var(--copper-row);border-color:var(--ring)}
.lp-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.lp-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;color:var(--text-3)}
.lp.ich .lp-name{color:var(--text)}
.lp-status{font:400 11px var(--f-mono);color:var(--green)}
.lp-status.kupfer{color:var(--copper-text)}
.lp-status.still{color:var(--muted-3)}
.lp.frei{border:1px dashed var(--line-3);background:transparent}
.lp-leer{flex:none;width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:1.5px dashed var(--line-3)}
.lp.frei .lp-name{color:var(--muted-3);font-size:14px}
.wk-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 20px}
.wk-zeile-spalte{flex-direction:column;align-items:stretch;gap:8px}
.wk-zl{font-size:15.5px;color:var(--text-3)}
.wk-seg button{flex:1;min-width:44px;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted-3);font:400 13px var(--f-mono);cursor:pointer}
.wk-seg button.active{background:var(--copper);color:var(--copper-ink);font-weight:600}
.wk-seg button:disabled{cursor:default;opacity:.6}
.wk-seg button.active:disabled{opacity:1}
.wk-seg button:focus-visible{outline-offset:1px}
#lobbyModi{width:100%}
.wk-voll .lobby-desc,.wk-voll .lobby-hinweis{padding:0 20px;text-align:left}
.wk-voll .lobby-hinweis{min-height:0;padding-top:6px}
.wk-voll .lobby-banner{margin:6px 20px 0}
.wk-voll .lobby-desc{padding-top:2px}

/* ===== Countdown ===== */
.countdown{gap:18px}
.countdown-titel{font:400 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--copper-text)}
.countdown-ring{display:flex;align-items:center;justify-content:center;width:200px;height:200px;border-radius:50%;border:2px solid var(--trace);box-shadow:inset 0 0 0 10px var(--copper-row)}
.countdown-zahl{font:700 120px/1 var(--f-cond);color:var(--text);text-shadow:none;animation:zaehlen 1s ease-out both}
.countdown-sub{font-size:16px;color:var(--text-3)}
.countdown-avatare{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:320px;margin-top:10px}
.countdown.los .countdown-sub,.countdown.los .countdown-avatare,.countdown.los .countdown-ring{visibility:hidden}

/* ===== Live: Spielerleiste unter der Kopfleiste ===== */
.miniboard{flex:none;display:flex;gap:6px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.miniboard::-webkit-scrollbar{display:none}
.mb-chip{flex:1 0 auto;min-width:104px;display:flex;justify-content:flex-start;align-items:center;gap:8px;min-height:0;padding:7px 8px;background:var(--sheet);border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--text-3)}
.mb-chip.ich{background:var(--copper-row);border-color:var(--ring);color:var(--text-3)}
.mb-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.mb-name{max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 12px var(--f-text);color:var(--text-3)}
.mb-chip.ich .mb-name{color:var(--text-3)}
.mb-wert{font:700 15px var(--f-cond);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap;flex-shrink:0}

/* ===== Siegerliste ===== */
.podest{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:34px 20px 22px}
.pd{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.pd-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--text-3)}
.pd-stufe{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:10px;box-sizing:border-box;border-radius:10px 10px 0 0;background:var(--btn);border:1px solid var(--line-3)}
.pd-stufe b{font:700 26px var(--f-cond);color:var(--text)}
.pd-stufe span{font:400 12px var(--f-mono);color:var(--muted)}
.pd.p1 .pd-stufe{height:150px;background:var(--copper);border-color:var(--copper)}
.pd.p1 .pd-stufe b{color:var(--copper-ink)}
.pd.p1 .pd-stufe span{color:#3A1E0A}
.pd.p2 .pd-stufe{height:110px}
.pd.p3 .pd-stufe{height:80px}
.lb-liste{list-style:none;margin:0;padding:0}
.lb-liste .lb{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 20px;border-bottom:1px solid var(--line);font-size:15.5px}
.lb .r{width:22px;font:400 13px var(--f-mono);color:var(--muted-3)}
.lb .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3)}
.lb .n small{display:block;font-size:11px;color:var(--muted-3)}
.lb .g{width:52px;text-align:right;font:400 12px var(--f-mono);color:var(--muted-3)}
.lb .p{min-width:56px;white-space:nowrap;flex:none;text-align:right;font:700 19px var(--f-cond);font-variant-numeric:tabular-nums;color:var(--text)}
.lb.me{background:var(--copper-row)}
.lb.me .n{color:var(--text)}
.lb.me .r{color:var(--copper-text)}
#ergHinweis{min-height:0}
#ergHinweis:empty{display:none}

/* ===== Warteschlange ===== */
.wk-warte{justify-content:space-between}
.wk-warte-mitte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 34px;text-align:center}
.warte-punkte{display:flex;gap:10px}
.warte-punkte i{width:12px;height:12px;border-radius:50%;background:var(--track);transition:background .3s}
.warte-punkte i.an{background:var(--copper);box-shadow:0 0 10px var(--copper-glow)}
.wk-warte-titel{margin:0;font-weight:700;font-size:30px;line-height:1.1;color:var(--text)}
.wk-warte-text{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.wk-warte-platz{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.wk-warte-label{font-size:11px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.wk-warte-vor{font-size:12px;color:var(--muted-3)}
.wk-warte .btns{width:100%;background:var(--panel)}
@media (prefers-reduced-motion: reduce){.countdown-zahl{animation:none}}