:root{color-scheme:dark;--hintergrund: #14532d;--text: #f8fafc;--max-breite: 480px;--touch-min: 44px}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--hintergrund);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;touch-action:manipulation;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden;overflow-x:clip}input,textarea{user-select:text;-webkit-user-select:text}#root{min-height:100dvh}.app{width:100%;max-width:var(--max-breite);min-height:100dvh;margin:0 auto;padding-top:max(1rem,env(safe-area-inset-top));padding-right:max(1rem,env(safe-area-inset-right));padding-bottom:max(1rem,env(safe-area-inset-bottom));padding-left:max(1rem,env(safe-area-inset-left))}button,[role=button]{min-width:var(--touch-min);min-height:var(--touch-min);font:inherit;touch-action:manipulation}.karte-bild{display:block;width:100%;height:auto;aspect-ratio:5 / 7}.karte-bild--klein{width:44px}.hand{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.hand-karten{position:relative;display:flex;justify-content:center;gap:6px;overflow:hidden;overflow:clip;width:calc(100% + 12px);margin:-6px;padding:6px}.hand-aufnehmen{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap}.hand-karte{flex:1 1 0;min-width:var(--touch-min);max-width:clamp(56px,9.7dvh,76px);padding:0;border:0;border-radius:10px;background:transparent;color:inherit;cursor:default}.hand-karten--zwei-reihen{--hand-luecke: 4px;display:grid;grid-template-columns:repeat(calc(2 * var(--spalten)),minmax(calc((var(--touch-min) - var(--hand-luecke)) / 2),calc((clamp(56px,9.7dvh,76px) - var(--hand-luecke)) / 2)));justify-content:center;gap:var(--hand-luecke)}.hand-karten--zwei-reihen .hand-karte{grid-row:var(--reihe);grid-column:var(--spalte) / span 2;max-width:none}.hand-karte--spielbar{cursor:pointer}.hand-karte--gesperrt .karte-bild{opacity:.45}.hand-karte:focus-visible{outline:3px solid #facc15;outline-offset:2px}.knopf{padding:.6rem 1.25rem;border:0;border-radius:10px;background:#e2e8f0;color:#0f172a;font-weight:600;cursor:pointer}.knopf--haupt{background:#facc15}.knopf:disabled{opacity:.45;cursor:default}.knopf--klopfen{background:#f97316;color:#fff}.klopf-knopf{display:flex;flex-direction:column;align-items:center;gap:.25rem}.klopf-knopf-ziel{font-size:.85rem;opacity:.85}.overlay-hintergrund{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:#0000008c}.overlay-dialog{position:relative;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:24rem;padding:1.25rem;border-radius:14px;background:#1e293b;color:var(--text);max-height:100%;overflow-y:auto}.abfrage-titel,.overlay-titel{margin:0;padding:0 2.25rem;font-size:1.2rem;text-align:center}.dialog-minimieren{position:absolute;top:.25rem;right:.25rem;display:flex;align-items:center;justify-content:center;width:var(--touch-min);height:var(--touch-min);padding:0;border:0;border-radius:10px;background:transparent;color:var(--text);font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer}.dialog-minimieren:focus-visible,.dialog-leiste:focus-visible{outline:3px solid #facc15;outline-offset:2px}.dialog-frist{margin:0;color:#facc15;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}.tisch-leiste{position:absolute;bottom:100%;left:0;right:0;z-index:5;display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem .4rem;margin-bottom:-.3rem;pointer-events:none}.dialog-leiste{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:var(--touch-min);padding:.2rem .75rem;border:2px solid #facc15;border-radius:22px;background:#1e293b;color:var(--text);font-size:.8rem;font-weight:600;line-height:1.2;text-align:center;box-shadow:0 2px 10px #0006;cursor:pointer;pointer-events:auto;animation:leiste-ein .2s ease-out}.dialog-leiste-text{display:block;min-width:0}.dialog-leiste-name{display:inline-block;overflow:hidden;max-width:7.5em;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}.dialog-leiste-frist{margin-left:.4em;color:#facc15;font-variant-numeric:tabular-nums;white-space:nowrap}.dialog-leiste-frist:before{content:"· "}@keyframes leiste-ein{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}.abfrage-knoepfe{display:flex;flex-direction:column;gap:.6rem}.abfrage-knoepfe .knopf{min-height:var(--touch-min)}.abfrage-zusatz{display:block;font-size:.8rem;font-weight:400}.abfrage-banner{position:absolute;top:50%;left:50%;z-index:1;width:max-content;max-width:100%;padding:.2rem .9rem;border-radius:10px;background:#0f172a;color:var(--text);text-align:center;transform:translate(-50%,-50%);pointer-events:none}.overlay-knoepfe{display:flex;flex-direction:column;gap:.6rem}.overlay-hinweis{margin:0;text-align:center;opacity:.85}.runden-liste{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}.runden-zeile{display:flex;align-items:baseline;gap:.75rem}.runden-name{flex:1 1 auto;font-weight:600}.runden-verlust{color:#fca5a5;font-weight:700}.runden-leben{min-width:3.5rem;text-align:right}.tisch{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:.5rem;width:100%;max-width:600px;height:100dvh;margin:0 auto;padding-top:max(.5rem,env(safe-area-inset-top));padding-right:max(.75rem,env(safe-area-inset-right));padding-bottom:max(.75rem,env(safe-area-inset-bottom));padding-left:max(.75rem,env(safe-area-inset-left));background:var(--hintergrund)}.tisch-kopf{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tisch-kopf>.knopf{flex:none;padding-inline:.85rem}.tisch-titel{display:flex;flex-direction:column;min-width:0}.tisch-runde{font-size:1.1rem;font-weight:700}.tisch-modus-zeile{display:flex;align-items:baseline;gap:.4rem;min-width:0}.tisch-modus{flex:none;font-size:.85rem;opacity:.85}.tisch-verlierer{overflow:hidden;min-width:0;font-size:.72rem;opacity:.7;text-overflow:ellipsis;white-space:nowrap}.teil-ende{margin:0;text-align:center;line-height:1.3}.tisch-gegner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"links oben rechts";align-items:end;gap:.4rem}.tisch-sitz--links{grid-area:links}.tisch-sitz--oben{grid-area:oben;align-self:start}.tisch-sitz--rechts{grid-area:rechts}.platz{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem;border:2px solid transparent;border-radius:12px;background:#00000040}.platz--am-zug{border-color:#facc15}.platz--aus{opacity:.6}.platz--kompakt{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.4rem .75rem}.platz-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25rem .5rem;max-width:100%}.platz-name{overflow:hidden;max-width:100%;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.platz-leben{font-variant-numeric:tabular-nums}.platz-kennzeichen{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;margin:0;padding:0;list-style:none}.kennzeichen{padding:.05rem .45rem;border-radius:999px;background:#ffffff2e;font-size:.72rem}.platz-karten{display:flex;justify-content:center}.platz-karten{--gegner-karte: clamp(22px, 3.5dvh, 28px)}.platz-karten .karte-bild{width:var(--gegner-karte)}.platz-karten .karte-bild+.karte-bild{margin-left:calc(var(--gegner-karte) / -2)}.platz-karten--viele .karte-bild+.karte-bild{margin-left:calc(var(--gegner-karte) * -.7)}.tisch-mitte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:0}.einsatz{font-size:1.6rem;font-weight:800}.stich{--stich-karte: clamp(42px, 6.9dvh, 56px);position:relative;flex:1 1 11rem;width:100%;max-width:20rem;min-height:5rem;max-height:11rem}.stich-karte{position:absolute;z-index:1;width:var(--stich-karte);border-radius:8px;pointer-events:none}.stich-karte--oben{top:0;left:50%;margin-left:calc(var(--stich-karte) / -2)}.stich-karte--unten{bottom:0;left:50%;margin-left:calc(var(--stich-karte) / -2)}.stich-karte--links{top:50%;left:12%;margin-top:calc(var(--stich-karte) * -.7)}.stich-karte--rechts{top:50%;right:12%;margin-top:calc(var(--stich-karte) * -.7)}.stich-karte--gewinner{outline:3px solid #facc15;outline-offset:2px}.stich-verlauf{--verlauf-karte: calc(var(--stich-karte) * .55);--verlauf-versatz-y: clamp(8px, 1.6dvh, 12px);--verlauf-versatz-x: clamp(2px, .6dvh, 5px);--verlauf-schritt: min(var(--verlauf-versatz-y), 72px / max(var(--n, 1) - 1, 1));--verlauf-schritt-x: min(var(--verlauf-versatz-x), 24px / max(var(--n, 1) - 1, 1));position:absolute;inset:0;z-index:0;display:grid;place-content:center;width:fit-content;height:fit-content;margin:auto;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}.stich-verlauf--ecke{inset:0 auto auto 0;margin:0;place-content:start}.stich-verlauf--ecke .verlauf-gruppe{margin-top:0;margin-left:calc(var(--i) * var(--verlauf-schritt))}.verlauf-hinweis{position:absolute;right:0;bottom:100%;margin-bottom:2px;z-index:1;padding:0 .3rem;border:1px solid #facc15;border-radius:999px;background:#0f172a;color:#facc15;font-size:.6rem;font-weight:700;line-height:1.4;white-space:nowrap;pointer-events:none}.stich-verlauf:focus-visible{outline:3px solid #facc15;outline-offset:2px}.verlauf-gruppe{display:flex;align-items:flex-start;grid-area:1 / 1;place-self:start;margin-top:calc(var(--i) * var(--verlauf-schritt));margin-left:calc(var(--i) * var(--verlauf-schritt-x))}.verlauf-karte{flex:none;width:var(--verlauf-karte);border-radius:calc(var(--verlauf-karte) * .09);box-shadow:0 1px 3px #00000073}.verlauf-karte+.verlauf-karte{margin-left:calc(var(--verlauf-karte) * -.55)}.verlauf-karte--gewinner{outline:2px solid #facc15;transform:translateY(-2px)}.verlauf-fenster-liste{display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0;list-style:none}.verlauf-fenster-titel{margin:0 0 .3rem;font-size:.95rem;text-align:center}.verlauf-fenster-karten{display:flex;justify-content:center;gap:8px}.verlauf-fenster-karte{display:flex;flex-direction:column;align-items:center;gap:2px;width:var(--stich-karte, 48px);min-width:0}.verlauf-fenster-karte .karte-bild{border-radius:8px}.verlauf-fenster-karte--gewinner .karte-bild{outline:3px solid #facc15;outline-offset:2px}.verlauf-fenster-name{overflow:hidden;max-width:100%;font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.ansage-zeile{position:relative;width:100%}.ansage{min-height:1.4em;margin:0;text-align:center}.frist{position:absolute;top:100%;left:0;right:0;margin:0;color:#facc15;font-size:.85rem;font-weight:700;line-height:1.2;text-align:center;font-variant-numeric:tabular-nums;pointer-events:none}.verbindung-banner{position:absolute;top:100%;left:50%;z-index:15;width:max-content;max-width:100%;margin:.25rem 0 0;padding:.35rem .8rem;font-size:.85rem;line-height:1.2;border-radius:10px;background:#facc15;color:#0f172a;font-weight:600;text-align:center;transform:translate(-50%);pointer-events:none}.fehler-hinweis{display:flex;align-items:flex-end;justify-content:center;min-height:1.75rem;color:#fecaca;font-size:.85rem;font-weight:600;line-height:1.2;text-align:center}.tisch-unten{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem}@media(orientation:landscape)and (max-height:540px){.tisch{grid-template-columns:minmax(0,1fr) minmax(15.5rem,17rem);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"gegner kopf" "mitte  unten" "fehler unten";column-gap:1rem;row-gap:.4rem;max-width:960px}.tisch-kopf{grid-area:kopf;align-self:start}.tisch-gegner{grid-area:gegner}.tisch-mitte{grid-area:mitte;gap:.3rem}.fehler-hinweis{grid-area:fehler}.tisch-unten{grid-area:unten;align-self:end;gap:.5rem}.einsatz{font-size:1.3rem}}.ergebnis-meldung{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem;cursor:pointer}.ergebnis-meldung-text{margin:0;padding:1rem 1.5rem;border-radius:18px;font-size:clamp(2rem,11vw,3.4rem);font-weight:800;line-height:1.1;text-align:center;animation:ergebnis-meldung 2.5s ease-out both}.ergebnis-meldung--sieg .ergebnis-meldung-text{background:linear-gradient(135deg,#facc15,#22c55e);color:#14290f;box-shadow:0 0 2.5rem #facc158c}.ergebnis-meldung--niederlage .ergebnis-meldung-text{background:#334155;color:#cbd5e1;box-shadow:0 0 2rem #00000080}@keyframes ergebnis-meldung{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.05)}25%{transform:scale(1)}85%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.ergebnis-meldung-text,.dialog-leiste{animation:none}}.start{display:flex;flex-direction:column;gap:1.25rem}.start-titel{margin:1rem 0 0;font-size:2.4rem;text-align:center}.start-feld{display:flex;flex-direction:column;gap:.35rem;font-weight:600}.start-eingabe{min-height:var(--touch-min);padding:.5rem .75rem;border:2px solid transparent;border-radius:10px;background:#f8fafc;color:#0f172a;font:inherit;font-size:1rem}.start-eingabe:focus-visible{outline:3px solid #facc15;outline-offset:2px}.umschalter{display:flex;gap:.5rem;margin:0;padding:0;border:0}.umschalter legend{margin-bottom:.35rem;padding:0;font-weight:600}.umschalter-option{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:var(--touch-min);padding:.5rem .75rem;border:2px solid rgb(255 255 255 / .35);border-radius:10px;background:#00000040;font-weight:600;text-align:center;cursor:pointer}.umschalter-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.umschalter-option:has(input:checked){border-color:#facc15;background:#facc15;color:#0f172a}.umschalter-option:has(input:focus-visible){outline:3px solid #facc15;outline-offset:2px}.start-haupt{min-height:56px;font-size:1.15rem}.start-online{display:flex;flex-direction:column;gap:.6rem}.start-hinweis{margin:0;text-align:center;opacity:.85}.start-hinweis-box{display:flex;flex-direction:column;gap:.6rem;padding:.75rem 1rem;border-radius:10px;background:#0000004d;text-align:center}.start-hinweis-text{margin:0;font-weight:600}.start-beitreten{display:flex;align-items:flex-end;gap:.6rem}.start-code-feld{flex:1 1 0;min-width:0}.start-code{width:100%;font-size:1.25rem;letter-spacing:.3em;text-transform:uppercase}.start-fehler{margin:0;padding:.5rem .75rem;border-radius:10px;background:#fee2e2;color:#7f1d1d;font-weight:600;text-align:center}.lobby{display:flex;flex-direction:column;gap:1.1rem}.lobby-banner{margin:0;padding:.5rem .75rem;border-radius:10px;background:#facc15;color:#0f172a;font-weight:600;text-align:center}.lobby-einladung{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:.5rem;text-align:center}.lobby-code-titel{font-weight:600;opacity:.85}.lobby-code{font-size:3.2rem;font-weight:800;letter-spacing:.2em;margin-right:-.2em;line-height:1.1}.lobby-link{max-width:100%;font-size:.85rem;opacity:.85;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}.lobby-kopiert{min-height:1.25rem;font-size:.9rem}.lobby-unterzeile{margin:0 0 .5rem;font-size:1rem}.lobby-plaetze{display:flex;flex-direction:column;gap:.4rem;margin:0 0 .6rem;padding:0;list-style:none}.lobby-platz{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:52px;padding:.25rem .25rem .25rem .75rem;border-radius:10px;background:#00000040}.lobby-platz-name{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0;font-weight:600;overflow-wrap:anywhere}.lobby-zusatz{font-weight:400;opacity:.85}.kennzeichen--getrennt{background:#fca5a5;color:#7f1d1d}.knopf--klein{flex:none;padding:.4rem .8rem}.lobby-breit{width:100%}.lobby-hinweis{margin:0;text-align:center;opacity:.9}