@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&family=DM+Sans:wght@400;500;700&display=swap');
/* Food-Clash-Markenpalette (Farben.pdf): Rosa #ff8db6, Rot #ff1d25,
Dunkelrot #510021, Hellgelb #ffecb6, Gelb #ffce2b, Blau #8597ff + Weiss.
Die alten Variablennamen bleiben bewusst bestehen (Inline-Styles in
lobby.html referenzieren sie), nur die Werte sind neu gemappt:
pink->Rot (Primaer-CTA), lime/yellow->Gelb, cyan/green->Blau. */
:root {
--bg:#ff8db6;
--bg-deep:#ff7cad;
--panel:#ffffff;
--panel-2:#fff6e6;
--brand-blue:#8597ff;
--brand-pink:#ff1d25;
--brand-pink-2:#ff1d25;
--brand-lime:#ffce2b;
--brand-yellow:#ffce2b;
--brand-cyan:#8597ff;
--brand-green:#8597ff;
--brand-maroon:#510021;
--brand-cream:#ffecb6;
--text:#510021;
--muted:rgba(81,0,33,.66);
--radius:18px;
--chrome-offset:88px;
--shadow:0 18px 44px rgba(81,0,33,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{touch-action:manipulation;overscroll-behavior-y:auto;overscroll-behavior-x:none;-webkit-text-size-adjust:100%}
body, .screen, #app-shell, #board, .board-wrap, .cell, .logo, .parade, .chip, .score-row, .mp-panel, .chooser-screen, .chooser-panel{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input, textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;touch-action:manipulation}
/* Flaechiges Marken-Rosa mit grossen gelben Sternen in den Ecken - Form
dem "Stern spitz"-Asset aus dem Asset Kit nachgezeichnet (SVG-data-URI,
keine Bilddatei), bewusst gross und angeschnitten wie in den Referenzen. */
body{position:relative;background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 710 670'%3E%3Cpolygon fill='%23ffce2b' points='297,3 348,230 403,112 399,249 613,147 432,291 699,257 440,335 706,446 424,384 621,646 391,416 412,538 332,430 176,641 257,385 57,356 241,318 24,222 253,280 121,141 293,242'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 710 670'%3E%3Cpolygon fill='%23ffce2b' transform='rotate(180 355 335)' points='297,3 348,230 403,112 399,249 613,147 432,291 699,257 440,335 706,446 424,384 621,646 391,416 412,538 332,430 176,641 257,385 57,356 241,318 24,222 253,280 121,141 293,242'/%3E%3C/svg%3E"),
var(--bg);
background-repeat:no-repeat,no-repeat;
background-position:calc(min(58vw,860px) * -0.32) calc(min(58vw,860px) * -0.34),right calc(min(64vw,940px) * -0.32) bottom calc(min(64vw,940px) * -0.34);
background-size:min(58vw,860px) min(58vw,860px),min(64vw,940px) min(64vw,940px);
background-attachment:fixed,fixed;
color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;overflow-y:auto}
/* --hc-conn-h wird von connection.js gesetzt (Hoehe des Offline-/Reconnect-
Banners, sonst 0). Alle oberen Fix-Elemente ruecken um diesen Wert nach
unten, damit der Banner nichts verdeckt (v.a. den Zurueck-Button). */
#app-shell{position:relative;z-index:1;min-height:100vh;display:grid;align-content:start;padding-top:calc(var(--chrome-offset) + var(--hc-conn-h, 0px));transition:padding-top .28s cubic-bezier(.22,1,.36,1);
grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr) 420px;
grid-template-areas:'topbar sidebar' 'main sidebar' 'footer footer'}
.hidden{display:none !important}
/* Schutzraum fuer die iOS-App: StatusBar.setOverlaysWebView({overlay:true})
zieht den WebView bis unter Uhrzeit/Batterie. Ohne env(safe-area-inset-*)
liegen App-Inhalte hinter den Systemicons. Im Browser und in der
Android-TWA liefert env() 0 - dort aendert sich nichts.
Voraussetzung ist viewport-fit=cover im (sonst ist env()
auch auf iOS 0). Seitlich mitgenommen wegen Landscape/Notch. */
body{
padding-left:env(safe-area-inset-left, 0px);
padding-right:env(safe-area-inset-right, 0px);
padding-bottom:env(safe-area-inset-bottom, 0px);
}
.ui-chrome{position:fixed;top:calc(env(safe-area-inset-top, 0px) + 12px + var(--hc-conn-h, 0px));left:calc(env(safe-area-inset-left, 0px) + 12px);right:calc(env(safe-area-inset-right, 0px) + 12px);z-index:750;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;transition:top .28s cubic-bezier(.22,1,.36,1)}
.back-btn,.lang-btn{pointer-events:auto;border:none;border-radius:999px;padding:10px 14px;background:#fff;color:var(--text);font-family:'Poppins',sans-serif;font-weight:700;font-size:.84rem;box-shadow:0 10px 28px rgba(81,0,33,.18);cursor:pointer}
.lang-switch{pointer-events:auto;display:flex;gap:8px}
.lang-btn{min-width:52px;background:rgba(255,255,255,.75)}
.lang-btn.active{background:var(--brand-pink);color:#fff}
/* Rechte Chrome-Gruppe: Vollbild-Button + Sprachumschalter auf einer Hoehe. */
.chrome-right{pointer-events:auto;display:flex;align-items:center;gap:8px}
/* Vollbild nutzt bewusst die .lang-btn-Basis (gleiche Hoehe, Radius, Schatten)
und ergaenzt nur Icon-Abstand und den Aktiv-Zustand. */
.chrome-fullscreen-btn{display:inline-flex;align-items:center;gap:7px;min-width:0}
.chrome-fullscreen-btn[hidden]{display:none}
.chrome-fullscreen-btn .fs-icon{font-size:1rem;line-height:1}
.chrome-fullscreen-btn.is-active{background:var(--brand-pink);color:#fff}
/* Schmale Screens: nur das Icon, damit die Zeile nicht bricht. */
@media (max-width:720px){
.chrome-fullscreen-btn #btn-fullscreen-label{display:none}
.chrome-fullscreen-btn{padding:10px 12px}
}
/* Offline: nur "Einzelspiel starten" (#btn-open-solo) und "Infos &
Einstellungen" (#menu-settings) bleiben voll nutzbar. Der Rest wird
gedimmt; die tatsaechliche Klick-Sperre + der Hinweis-Toast kommen aus
lobby.html (JS, Capturing-Handler), damit auch ein Hinweis erscheint. */
html.hc-offline #chooser-section-play .chooser-card:not(#card-solo){opacity:.45;filter:grayscale(.55)}
html.hc-offline .chooser-menu-btn:not(#menu-play):not(#menu-settings){opacity:.45}
/* Solo bleibt offline normalerweise aktiv; nur wenn die Spieldaten NICHT
gecacht sind, wird der Button gesperrt (JS setzt .solo-locked). */
.btn-open-solo.solo-locked,#btn-open-solo.solo-locked{opacity:.45;filter:grayscale(.6);cursor:not-allowed}
html.hc-offline #chooser-section-lobby,
html.hc-offline #chooser-section-friends,
html.hc-offline #chooser-section-highscore,
html.hc-offline #chooser-section-profile,
html.hc-offline .guest-banner{opacity:.5}
/* env(safe-area-inset-top) oben mit hinein: das Dashboard ist position:fixed
und laesst sich deshalb nicht ueber das body-Padding verschieben. */
.chooser-screen{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top, 0px) + var(--chrome-offset) + 20px + var(--hc-conn-h, 0px)) 32px calc(env(safe-area-inset-bottom, 0px) + 32px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
background:transparent}
.chooser-panel{width:min(1180px,100%);flex-shrink:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.dashboard-footer{grid-column:1 / -1;text-align:center;padding:6px 0 2px;color:var(--text);font-size:.72rem;letter-spacing:.4px;opacity:.6}
.auth-shell{width:min(1120px,100%);flex-shrink:0;display:grid;grid-template-columns:1.08fr .92fr;gap:24px}
/* Login-Karte + Gast-Karte: gestapelt (Gast unten), ab 1200px nebeneinander
(Gast als rechte Spalte). Siehe Media-Query weiter unten.
grid-column:1/-1 ist Pflicht - .chooser-hero darueber spannt ebenfalls ueber
alle Spalten; ohne das saesse dieser Block in der ersten Shell-Spalte und
wuerde sich INNERHALB der linken Haelfte nochmal aufteilen. */
.auth-columns{grid-column:1 / -1;display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.auth-card-guest{background:linear-gradient(150deg, rgba(255,236,182,.55), var(--panel) 60%)}
.auth-card-guest .auth-stack{gap:12px}
.auth-guest-block{display:flex;flex-direction:column;gap:8px}
.auth-guest-facts{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.84rem;line-height:1.45}
.auth-guest-facts li{position:relative;padding-left:22px}
.auth-guest-facts li::before{content:'✓';position:absolute;left:0;top:0;font-weight:900;color:var(--brand-cyan)}
@media (min-width: 1200px){
.auth-shell{width:min(1240px,100%)}
.auth-columns{grid-template-columns:1.12fr .88fr}
}
.auth-card{position:relative;overflow:hidden;border-radius:24px;background:var(--panel);border:1px solid rgba(81,0,33,.12);box-shadow:var(--shadow);padding:28px}
.auth-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,236,182,.4), transparent 42%);pointer-events:none}
.auth-stack{position:relative;display:flex;flex-direction:column;gap:14px}
.auth-card h2{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:900}
.auth-card p{color:var(--muted);line-height:1.6}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-grid input,.auth-card input{width:100%;background:#fff;border:1px solid rgba(81,0,33,.24);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
.auth-grid input:focus,.auth-card input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(133,151,255,.24)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.auth-tab{border:none;border-radius:14px;padding:12px 14px;font-family:'Poppins',sans-serif;font-weight:800;cursor:pointer;background:rgba(81,0,33,.07);color:var(--text)}.auth-tab.active{background:var(--brand-pink);color:#fff;box-shadow:0 14px 30px rgba(255,29,37,.24)}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form.hidden{display:none}.auth-actions{display:flex;gap:10px;flex-wrap:wrap}
.auth-status{min-height:22px;color:var(--brand-cyan);font-weight:700;font-size:.88rem}
/* In-App-Login/Registrierung (E-Mail-Formular + Social auf der Startseite) */
.auth-email-form{display:flex;flex-direction:column;gap:11px}
.auth-card input[hidden],.auth-email-form input[hidden]{display:none}
/* Zwei-Faktor-Schritt: erscheint anstelle von E-Mail/Passwort, sobald die
Auth-Plattform einen Code verlangt. */
.auth-mfa{display:flex;flex-direction:column;gap:8px}
.auth-mfa[hidden]{display:none}
.auth-mfa #auth-mfa-code{letter-spacing:.24em;text-align:center;font-weight:800}
.auth-error{margin:0;color:var(--brand-pink);font-weight:700;font-size:.86rem;line-height:1.4}
.auth-error.hidden{display:none}
.auth-switch{align-self:center;margin-top:2px;background:none;border:none;padding:6px 8px;color:var(--brand-cyan);font-family:'Poppins',sans-serif;font-weight:800;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.auth-switch:hover{filter:brightness(1.08)}
.auth-social{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:rgba(81,0,33,.14)}
/* Google/Apple: identisch zur zentralen Auth-Plattform (offizielle Logos +
Markenfarben), damit der Wiedererkennungswert ueber alle Food-Clash-Apps
gleich ist. */
.btn-social{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 16px;border-radius:11px;font-family:'Poppins',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;border:1px solid transparent}
.btn-social svg{width:18px;height:18px;flex:none}
.btn-social:active{transform:scale(.98)}
.btn-google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.btn-google:hover{background:#f7f8f8}
.btn-apple{background:#000;color:#fff}
.btn-apple:hover{filter:brightness(1.15)}
.profile-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(81,0,33,.05);border:1px solid rgba(81,0,33,.10);margin-bottom:16px}
.profile-mini strong{font-family:'Poppins',sans-serif;font-size:1rem}
.profile-mini small{display:block;color:var(--muted);margin-top:2px}
.profile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.profile-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.profile-overview{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:18px}
.profile-avatar-stage{display:flex;align-items:center;justify-content:center;padding:10px}
.profile-avatar-stage #profile-avatar-summary{display:flex;align-items:center;justify-content:center}
.profile-meta{display:flex;flex-direction:column;gap:8px}
.profile-meta strong{font-family:'Poppins',sans-serif;font-size:1.3rem;line-height:1.1}
.profile-meta small{color:var(--muted);font-size:.92rem;word-break:break-word}
.profile-avatar-layout{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile-avatar-controls{flex:1 1 240px;display:flex;flex-direction:column;gap:10px}
#profile-avatar-preview{display:flex;align-items:center;justify-content:center;min-width:144px;min-height:144px;padding:8px;border-radius:24px;background:rgba(81,0,33,.05);border:1px solid rgba(81,0,33,.12);position:relative;overflow:hidden}
#profile-avatar-preview.avatar-generating::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(81,0,33,.08) 50%,transparent 75%);background-size:200% 100%;animation:avatarSkeleton 1.4s ease infinite;border-radius:inherit;pointer-events:none}
@keyframes avatarSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.profile-avatar-hint{font-size:.84rem;color:var(--muted);line-height:1.45}
.chooser-btn[disabled]{opacity:.6;cursor:wait}
.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid rgba(81,0,33,.10)}
.settings-toggle-row:last-child{border-bottom:none}
.settings-toggle-label{font-size:.95rem;line-height:1.4}
.settings-toggle-label small{display:block;color:var(--muted);font-size:.8rem;margin-top:3px}
.toggle-switch{position:relative;width:44px;height:26px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;border-radius:26px;background:rgba(81,0,33,.20);cursor:pointer;transition:background .2s}
.toggle-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle-switch input:checked + .toggle-slider{background:var(--brand-cyan)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}
html.a11y{filter:grayscale(1) contrast(1.45)}
html.a11y .chooser-btn.primary,html.a11y .chooser-btn.secondary{background:#222;color:#fff;border:2px solid #fff}
html.a11y .chooser-btn.ghost{background:transparent;color:#000;border:2px solid #000}
html.a11y .chooser-kicker,html.a11y .brand-pill,html.a11y .chooser-parade span{display:none!important}
html.a11y body{font-size:1.15em}
html.a11y .chooser-card p,html.a11y .chooser-copy,html.a11y .settings-toggle-label,html.a11y .settings-toggle-label small,html.a11y .profile-mini small,html.a11y .modal-stack p{font-size:1.12em;line-height:1.6}
html.a11y .chooser-btn,html.a11y .action-btn,html.a11y .btn-close-win,html.a11y .chooser-menu-btn,html.a11y .auth-tab{font-size:1.2rem!important;padding:18px 20px!important}
html.a11y .chooser-card h2,html.a11y .modal-stack h2,html.a11y .auth-card h2{font-size:1.4em}
h1,h2,h3,button,.code-box .code,.chooser-hero h1,.live-board-rank,.live-board-score,.live-board-banner,.rank-badge{font-weight:700!important;letter-spacing:.025em}
.auth-link-btn{background:none;border:none;color:rgba(81,0,33,.7);font-size:.82rem;cursor:pointer;padding:0;font-family:'DM Sans',sans-serif;text-decoration:underline;align-self:flex-start;margin-top:2px}
.auth-link-btn:hover{color:rgba(81,0,33,1)}
#hero-profile-block{display:none;align-items:center;gap:14px;margin-top:6px}
#hero-profile-block.visible{display:flex}
#hero-avatar-img-wrap{width:136px;height:136px;border-radius:50%;overflow:hidden;border:3px solid var(--brand-cream);box-shadow:0 6px 22px rgba(81,0,33,.28);flex-shrink:0}
#hero-avatar-img-wrap img{width:100%;height:100%;object-fit:cover}
#hero-avatar-empty{display:none;align-items:center;gap:12px;margin-top:6px}
#hero-avatar-empty.visible{display:flex}
#btn-hero-avatar-generate{width:64px;height:64px;border-radius:50%;flex-shrink:0;border:2px dashed rgba(81,0,33,.4);background:rgba(81,0,33,.06);color:var(--text);font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .15s}
#btn-hero-avatar-generate:hover{background:rgba(81,0,33,.12);transform:scale(1.05)}
#btn-hero-avatar-generate[disabled]{opacity:.6;cursor:wait}
#hero-avatar-empty-copy{color:var(--muted);font-size:.85rem;max-width:220px}
#hero-level-info{display:flex;flex-direction:column;gap:5px}
#hero-level-badge{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.1rem;color:var(--brand-pink)}
#hero-level-bar-outer{width:130px;height:8px;border-radius:999px;background:rgba(81,0,33,.14);overflow:hidden}
#hero-level-bar-inner,#hub-level-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-yellow),var(--brand-pink));transition:width .4s ease}
#hero-level-pts-label{font-size:.78rem;color:var(--muted)}
#hub-level-wrap{margin-top:10px}
#hub-level-badge{font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;color:var(--brand-pink)}
#hub-level-pts{font-size:.75rem;color:var(--muted)}
#hub-level-bar-outer{width:100%;height:8px;border-radius:999px;background:rgba(81,0,33,.14);overflow:hidden;margin-top:5px}
#awards-progress-wrap{margin:10px 0 14px}
#awards-progress-label{font-size:.78rem;color:var(--muted)}
#awards-progress-bar-outer{width:100%;height:8px;border-radius:999px;background:rgba(81,0,33,.14);overflow:hidden;margin-top:5px}
#awards-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand-yellow),var(--brand-pink));transition:width .4s ease}
.modal-change-pw{border-top:1px solid rgba(81,0,33,.12);padding-top:14px;margin-top:4px}
/* Kleiner, dezenter Sekundaer-Button (z.B. "Vollstaendiges Profil"). */
.chooser-btn.btn-mini{align-self:flex-start;padding:9px 16px;font-size:.86rem;font-weight:700}
.modal-change-pw summary{color:var(--muted);font-size:.88rem;cursor:pointer;user-select:none;list-style:none;padding:4px 0}
.modal-change-pw summary::-webkit-details-marker{display:none}
.modal-change-pw-inner{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.modal-change-pw-inner input{width:100%;background:#fff;border:1px solid rgba(81,0,33,.24);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
.modal-change-pw-inner input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(133,151,255,.24)}
.modal-overlay{position:fixed;inset:0;z-index:820;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:20px;background:rgba(81,0,33,.55);backdrop-filter:blur(10px)}
.modal-card{width:min(100%,520px);flex-shrink:0;position:relative;overflow:hidden;border-radius:24px;background:var(--panel);border:1px solid rgba(81,0,33,.12);box-shadow:var(--shadow);padding:24px;margin:auto 0}
.modal-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,236,182,.4), transparent 42%);pointer-events:none}
.modal-stack{position:relative;display:flex;flex-direction:column;gap:14px}
.modal-stack h2{font-family:'Poppins',sans-serif;font-size:1.3rem;font-weight:900}
.modal-stack p{color:var(--muted);line-height:1.55}
.modal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.modal-grid input,.modal-stack input{width:100%;background:#fff;border:1px solid rgba(81,0,33,.24);border-radius:14px;padding:14px 16px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;outline:none;min-width:0}
.modal-grid input:focus,.modal-stack input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(133,151,255,.24)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions .chooser-btn{width:auto;min-width:160px}
.modal-status{min-height:22px;color:var(--brand-cyan);font-weight:700;font-size:.88rem}
/* Konto-Verwaltung im "Profil bearbeiten"-Dialog: "Vollstaendiges Profil"
(zur Auth-Plattform) und "Konto loeschen" nebeneinander, auf schmalen
Schirmen untereinander. Rot bleibt der Loesch-Knopf, laut wird es aber erst
im Bestaetigungsdialog. */
.profile-account-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.profile-account-actions .chooser-btn{width:auto;align-self:auto}
.chooser-btn.danger{color:#7a0016;background:linear-gradient(180deg,#fff,#fdeef0 45%,#fbe0e4);border:1px solid rgba(150,0,25,.28)}
.chooser-btn.danger:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 28px rgba(150,0,25,.22)}
.modal-card.modal-danger{border-color:rgba(150,0,25,.35);box-shadow:0 18px 44px rgba(150,0,25,.24)}
.modal-danger .modal-status{color:#a3001f}
.delete-account-list{margin:0;padding-left:20px;color:var(--muted);line-height:1.55;font-size:.92rem;display:flex;flex-direction:column;gap:2px}
html.a11y .chooser-btn.danger{background:#7a0016;color:#fff;border:2px solid #fff}
.chooser-hero,.chooser-actions{position:relative;overflow:hidden;border-radius:24px;background:var(--panel);border:1px solid rgba(81,0,33,.12);box-shadow:var(--shadow)}
.chooser-hero::before,.chooser-actions::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg, rgba(255,236,182,.4), transparent 42%);pointer-events:none}
.chooser-hero{grid-column:1 / -1;padding:28px 34px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px;align-items:center;background:linear-gradient(135deg,#fff6d6,#ffe9a8);border-color:rgba(255,206,43,.55);box-shadow:0 18px 44px rgba(214,150,0,.22)}
.chooser-hero-copy{display:flex;flex-direction:column;gap:14px}
/* Status-Zeile liegt direkt auf dem Rosa-Hintergrund - Weiss statt Blau.
Doppelklasse noetig: der zur Laufzeit injizierte .hub-status-Style
(communityStyle in lobby.html) kommt spaeter und wuerde sonst gewinnen. */
.hub-status.chooser-global-status{color:#fff;text-shadow:0 1px 6px rgba(81,0,33,.3)}
.chooser-menu{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.chooser-menu-btn{border:none;border-radius:999px;padding:12px 16px;background:#fff;color:var(--text);font-family:'Poppins',sans-serif;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(81,0,33,.14);transition:transform .15s,background .15s}.chooser-menu-btn.active{background:var(--brand-pink);color:#fff;box-shadow:0 14px 30px rgba(255,29,37,.28)}.chooser-menu-content{grid-column:1 / -1;display:flex;flex-direction:column;gap:18px}.chooser-global-status{grid-column:1 / -1}.chooser-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.chooser-section.hidden{display:none !important}.chooser-section-profile .profile-mini{grid-column:1 / -1}
.chooser-panel-grid{display:none}
.chooser-column{display:flex;flex-direction:column;gap:16px;min-width:0}
.chooser-column .chooser-actions{height:100%}
.chooser-kicker{display:none;width:max-content;padding:8px 14px;border-radius:999px;background:rgba(255,206,43,.3);border:1px solid rgba(255,206,43,.7);font-size:.8rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--text);font-weight:700}
.chooser-hero h1{font-family:'Poppins',sans-serif;font-size:4rem;line-height:.92;font-weight:900;letter-spacing:0}
.chooser-hero h1 span,header h1 span,.logo span{color:var(--brand-pink)}
.chooser-hero h1 img.hero-logo,.auth-logo{display:block;width:min(100%,340px);height:auto}
.chooser-copy{grid-column:1 / -1;max-width:680px;color:rgba(81,0,33,.8);font-size:1.02rem;line-height:1.55}
.chooser-parade{display:flex;gap:12px;flex-wrap:wrap;font-size:.95rem}
.chooser-parade span,.brand-pill{padding:9px 14px;border-radius:999px;border:1px solid rgba(81,0,33,.10);background:rgba(81,0,33,.05);color:var(--text);font-weight:700}
.chooser-parade span:nth-child(1){background:rgba(255,206,43,.4);border-color:rgba(255,206,43,.7)}
.chooser-parade span:nth-child(2){background:rgba(133,151,255,.24);border-color:rgba(133,151,255,.5)}
.chooser-parade span:nth-child(3){background:rgba(255,141,182,.32);border-color:rgba(255,141,182,.65)}
.chooser-parade span:nth-child(4){background:rgba(255,236,182,.7);border-color:rgba(255,206,43,.5)}
.chooser-actions{padding:24px;display:flex;flex-direction:column;gap:16px;min-height:100%}
.chooser-card{position:relative;background:var(--panel);border:1px solid rgba(81,0,33,.12);border-radius:18px;padding:20px;box-shadow:0 18px 44px rgba(81,0,33,.16),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s}
.chooser-card:hover{transform:translateY(-3px);border-color:rgba(255,206,43,.6);box-shadow:0 26px 56px rgba(81,0,33,.22),0 0 0 1px rgba(255,206,43,.25),inset 0 1px 0 rgba(255,255,255,.7)}
/* Kein erzwungenes Dark-Mode-Umfaerben (WebView/OS) - App ist fest hell. */
html{color-scheme:light}
/* Menue-Tabs: weiche, gewoelbte Pills (Candy-Gloss + weicher Innenschatten,
KEINE harte 3D-Kante). Aktiver Tab ist farbig erhaben. */
.chooser-menu-btn{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff,#fff6f8 45%,#ffe9ef);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -6px 12px rgba(81,0,33,.06),0 8px 18px rgba(81,0,33,.16);transition:transform .26s cubic-bezier(.34,1.4,.5,1),box-shadow .18s,background .18s,color .18s}
.chooser-menu-btn:hover{transform:translateY(-2px) scale(1.04)}
.chooser-menu-btn:active{transform:scale(.95);transition-duration:.09s}
.chooser-menu-btn.active{color:#fff;background:linear-gradient(180deg,#ff6b70,#ff2a31 55%,#d8121a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px rgba(120,0,6,.38),0 12px 26px rgba(255,29,37,.45)}
/* Etappe 3: scrollabhaengige Einflug-Animation der Sektionen (getiltet,
nicht-lineare Kurve mit leichtem Ueberschwingen, Richtung je nach Position). */
/* Scrollgekoppelte, ruecklaeufige Reveal-Animation: transform + opacity werden
per JS (updateSectionReveal) direkt an die Scrollposition gebunden - beim
Zurueckscrollen laeuft die Kippbewegung wieder heraus. */
.reveal{will-change:transform,opacity;backface-visibility:hidden}
.chooser-section>*{min-width:0}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important;transform:none !important} }
/* Ab breiten Screens 3 Spalten in der "Spielen"-Sektion (>2-Spalten-Fall fuer
die positionsabhaengige Einflug-Richtung). */
@media (min-width:1160px){ #chooser-section-play{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Intuitives Icon-Badge ueber der Karten-Ueberschrift (Sektionen "Spielen" +
"Lobby erstellen"). Comic-Sticker-Look passend zum Effekt-Stil des Spiels:
dicke Tuschelinie (dunkle Kontur), weisse Flaeche, harter Versatz-Schatten;
die eigentlichen Motive sind Inline-SVGs mit Markenfarben + Outline. */
.chooser-card-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;line-height:1;margin-bottom:12px;background:#fff;border:2.5px solid #3a0017;box-shadow:3px 3px 0 rgba(58,0,23,.22)}
.chooser-card-icon svg{width:38px;height:38px;display:block;overflow:visible}
.chooser-card:hover .chooser-card-icon{transform:rotate(-4deg) scale(1.05);transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
html.a11y .chooser-card-icon{background:#fff;border-color:#000;box-shadow:none}
.chooser-card h2{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:800;margin-bottom:8px}
.chooser-card p{color:var(--muted);font-size:.93rem;line-height:1.55;margin-bottom:14px}
.chooser-card input{width:100%;background:#fff;border:1px solid rgba(81,0,33,.24);border-radius:14px;padding:15px 18px;color:var(--text);font-family:'Poppins',sans-serif;font-size:1rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;outline:none;min-width:0}
.chooser-card input:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(133,151,255,.24)}
/* Code-Eingabe im "Spielen"-Tab: Input + Button jeweils in voller
Kartenbreite, gleiche Masse wie die .chooser-btn der anderen Sektionen. */
.chooser-inline{display:grid;grid-template-columns:1fr;gap:10px}
#quickplay-live-stats{margin:-6px 0 14px}
#quickplay-live-stats .qp-stat-num{font-weight:800;color:var(--brand-pink)}
.season-event-banner{position:relative;background:var(--panel);border:1px solid rgba(81,0,33,.12);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.season-event-banner.hidden{display:none}
.season-event-stage{display:flex;gap:18px;align-items:center}
.season-event-stage[hidden]{display:none}
.season-event-stage img{width:100%;height:auto;max-width:30vh;border-radius:16px;flex-shrink:0;background:rgba(81,0,33,.06)}
.season-event-copy{min-width:0}
.season-event-copy h2{font-family:'Poppins',sans-serif;font-size:1.12rem;font-weight:800;margin-bottom:6px}
.season-event-copy p{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:6px}
.season-event-countdown{font-weight:800;color:var(--brand-pink);font-size:1rem}
.season-event-winner{font-weight:800;color:var(--brand-pink);font-size:.95rem}
.season-event-highscore-btn{margin-top:10px;border:none;border-radius:12px;padding:10px 16px;background:rgba(81,0,33,.08);color:var(--text);font-family:'Poppins',sans-serif;font-weight:800;font-size:.85rem;cursor:pointer}
/* Der Fliesstext ist standardmaessig eingeklappt, damit die Kachel kompakt
bleibt - Bild, Titel, Countdown und der fuehrende Spieler sind immer zu
sehen. Aufgeklappt wird per "Mehr erfahren" (data-season-more). */
.season-event-copy p[hidden]{display:none}
.season-event-more{margin:0 0 8px;padding:0;border:none;background:none;color:var(--brand-pink);font-family:'Poppins',sans-serif;font-weight:800;font-size:.84rem;cursor:pointer;text-decoration:underline}
/* Fuehrender Spieler ganz unten in der Kachel. */
.season-event-leader{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(81,0,33,.1);font-size:.86rem;color:var(--text);min-width:0}
.season-event-leader[hidden]{display:none}
.season-event-leader .sel-label{color:var(--muted);font-weight:600;flex-shrink:0}
.season-event-leader .sel-name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.season-event-leader .sel-points{margin-left:auto;font-weight:800;color:var(--brand-pink);flex-shrink:0}
@media (max-width:640px){
.season-event-stage{flex-direction:column;text-align:center}
.season-event-leader{justify-content:center}
.season-event-leader .sel-points{margin-left:0}
}
/* Hochwertige, physische 3D-Buttons. Der Glanz liegt im HINTERGRUND (nie ueber
dem Text), Text per Flex exakt zentriert. Weiche, gewoelbte Pill-Buttons:
Innen-Highlight (oben) + weicher Innen-Bodenschatten (Woelbung) + farbiger
Glow + weicher Ambient-Schatten. KEINE harte 3D-Kante. */
.chooser-btn,.action-btn,.btn-close-win{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;padding:17px 22px;border:none;border-radius:9999px;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.3px;line-height:1.15;transition:transform .3s cubic-bezier(.34,1.4,.5,1),box-shadow .28s ease,filter .2s ease}
.winner-overlay-actions{width:min(100%,360px);display:flex;flex-direction:column;gap:12px}
.chooser-btn:active,.action-btn:active,.btn-close-win:active{transform:scale(.96);transition-duration:.09s;filter:brightness(.98)}
.chooser-btn.primary,.btn-start,.btn-close-win{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 16%,rgba(255,255,255,0) 40%),linear-gradient(180deg,#ff6b70,#ff2a31 52%,#d8121a);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 18px rgba(120,0,6,.4),0 12px 26px rgba(255,29,37,.42),0 20px 36px rgba(60,0,4,.24)}
.chooser-btn.secondary{color:var(--brand-maroon);background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 16%,rgba(255,255,255,0) 40%),linear-gradient(180deg,#ffe98f,#ffce2b 52%,#eaa900);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px rgba(150,100,0,.3),0 12px 26px rgba(255,206,43,.46),0 20px 36px rgba(120,80,0,.18)}
.chooser-btn.ghost{color:var(--text);background:linear-gradient(180deg,#ffffff,#fdf3f6 45%,#f6e7ec);border:1px solid rgba(81,0,33,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -8px 14px rgba(81,0,33,.05),0 10px 22px rgba(81,0,33,.14)}
.chooser-btn:hover,.action-btn:hover,.btn-close-win:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.05) saturate(1.06)}
.chooser-btn.primary:hover,.btn-start:hover,.btn-close-win:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 18px rgba(120,0,6,.4),0 18px 34px rgba(255,29,37,.55),0 28px 50px rgba(60,0,4,.28)}
.chooser-btn.secondary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -10px 18px rgba(150,100,0,.3),0 18px 34px rgba(255,206,43,.6),0 28px 50px rgba(120,80,0,.22)}
.chooser-btn.ghost:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -8px 14px rgba(81,0,33,.05),0 16px 28px rgba(81,0,33,.2)}
/* Broadcast-Host-Kopf: kein weisser Balken mehr. Links "Lobby" (unter dem
fixierten Zurueck-Button), mittig der grosse Rundentimer, ueber der
Buehne (QR/Spielfelder). Logo/Code/Status sind in die rechte Spalte
(aside .host-brand) gewandert. */
.host-topbar{grid-area:topbar;position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:4px 32px 0;min-width:0}
.host-lobby-title{position:absolute;left:32px;top:2px;margin:0;font-family:'Poppins',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:0;color:var(--text)}
.host-timer{font-family:'Poppins',sans-serif;font-weight:900;font-variant-numeric:tabular-nums;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:1;letter-spacing:.03em;color:var(--brand-pink);text-shadow:0 6px 22px rgba(255,29,37,.2)}
body.lobby-last-ten .host-timer{color:#ff1d25;animation:hostTimerPulse .9s ease-in-out infinite}
@keyframes hostTimerPulse{0%,100%{transform:scale(1);text-shadow:0 8px 30px rgba(255,29,37,.35)}50%{transform:scale(1.08);text-shadow:0 10px 44px rgba(255,29,37,.7)}}
.code-box{background:var(--brand-cream);border:1px solid rgba(81,0,33,.14);border-radius:18px;padding:12px 22px;box-shadow:var(--shadow)}
.code-box .lbl{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:1.6px}
.code-box .code{font-family:'Poppins',sans-serif;font-weight:900;font-size:2rem;color:var(--brand-pink);letter-spacing:6px}
.pill{padding:8px 14px;border-radius:999px;font-size:.8rem;font-weight:700;display:flex;align-items:center;gap:8px;justify-self:end}
.pill.waiting{background:rgba(255,206,43,.4);color:var(--text);border:1px solid rgba(255,206,43,.75)}
.pill.running{background:rgba(133,151,255,.3);color:var(--text);border:1px solid rgba(133,151,255,.6)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
main{grid-area:main;position:relative;z-index:1;padding:12px 32px 24px;display:flex;flex-direction:column;gap:16px;min-height:0;overflow:visible}
main h2,.player-list h3,.win-label{font-family:'Poppins',sans-serif;font-weight:800;font-size:.9rem;color:var(--muted);text-transform:uppercase;letter-spacing:2px}
.broadcast-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start;min-height:100%}
/* Buehne links: waehrend der Wartezeit steckt hier der grosse QR-Code, ab
Spielstart die Live-Spielfelder (siehe running/waiting-Regeln weiter unten). */
.board-stage{min-width:0;min-height:0;display:flex;flex-direction:column}
#app-shell:not(.running) .board-stage{align-items:center;justify-content:center;flex:1}
/* Broadcast: immer GENAU 3 Spielfelder pro Reihe (groesser als zuvor). Karten
fuellen ihre Spalte (bis zu einer Obergrenze) und werden zentriert; das
quadratische Board skaliert responsiv mit (aspect-ratio + max-width). Die
Zell-Pixelpositionen kommen aus grid.clientWidth (liveBoardGridMetrics),
daher passt sich alles automatisch an - --mini-cell wird dort synchron
nachgezogen, damit die Motion-Animationen stimmen. */
.live-boards{--live-board-card-width:340px;--live-board-grid-size:300px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-content:start;justify-items:center}
.live-board-card{position:relative;overflow:visible;width:100%;max-width:var(--live-board-card-width);background:var(--panel);border:1px solid rgba(81,0,33,.12);border-radius:28px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 48px rgba(81,0,33,.16);transition:transform 340ms cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease, filter .2s ease}
.live-board-card.leader{border-color:rgba(255,206,43,.9);box-shadow:0 0 0 1px rgba(255,206,43,.4),0 22px 42px rgba(81,0,33,.2)}
.live-board-card.board-updated{z-index:3}
.live-board-card.glow{animation:liveBoardGlow .68s ease}
.live-board-card.shake{animation:liveBoardShake .54s ease}
.live-board-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.live-board-name{display:flex;align-items:center;min-width:0;font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-board-rank{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;margin-right:8px;border-radius:999px;background:rgba(81,0,33,.08);border:1px solid rgba(81,0,33,.12);font-family:'Poppins',sans-serif;font-size:.92rem;font-weight:900;color:var(--brand-pink)}
.live-board-score{font-family:'Poppins',sans-serif;font-weight:900;color:var(--brand-pink);font-size:1rem;letter-spacing:.02em}
.live-board-meta{display:flex;gap:8px;flex-wrap:wrap}
.live-board-pill{flex:1 1 0;min-width:0;padding:8px 10px;border-radius:14px;background:rgba(81,0,33,.05);border:1px solid rgba(81,0,33,.08);display:flex;flex-direction:column;gap:2px}
.live-board-pill strong{font-family:'Poppins',sans-serif;font-size:.88rem;line-height:1.05;color:var(--text)}
.live-board-pill span{font-size:.65rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.live-board-boardwrap{position:relative;display:flex;justify-content:center;align-items:center}
.live-board-fx{position:absolute;inset:-24px -14px -18px -14px;pointer-events:none;overflow:visible;z-index:3}
/* Mini-Board bewusst dunkel (Dunkelrot) wie der Spiel-Screen - Candies und
Effekte brauchen den dunklen Kontrast, auch im hellen Broadcast-Layout. */
.live-board-grid{position:relative;display:block;width:100%;max-width:var(--live-board-grid-size);aspect-ratio:1;height:auto;flex:0 1 auto;--mini-gap:2px;--mini-cell:calc((var(--live-board-grid-size) - (7 * var(--mini-gap)) - 10px) / 8);border-radius:20px;padding:5px;background:#510021;border:1px solid rgba(81,0,33,.3);transition:filter .24s ease, transform .24s ease, box-shadow .24s ease;overflow:hidden}
.live-board-grid.combo-flash{filter:brightness(1.18) saturate(1.25);box-shadow:0 0 0 1px rgba(255,206,43,.4),0 0 34px rgba(255,206,43,.35)}
.live-board-grid.shuffle-flash{filter:brightness(1.12) saturate(1.2);box-shadow:0 0 0 1px rgba(133,151,255,.4),0 0 34px rgba(133,151,255,.35)}
.live-board-cell{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--mini-cell);height:var(--mini-cell);left:5px;top:5px;border-radius:8px;background:rgba(255,255,255,.12);font-size:1.08rem;line-height:1;transform-origin:center center;will-change:transform,opacity;transition:transform .24s cubic-bezier(.2,1.4,.4,1),opacity .24s ease,box-shadow .12s ease}
@keyframes liveBoardPowerupGlow{0%,100%{box-shadow:0 0 6px 1px rgba(255,206,43,.45)}50%{box-shadow:0 0 14px 4px rgba(255,206,43,.85)}}
.live-board-cell.live-board-powerup{background:rgba(255,206,43,.22);animation:liveBoardPowerupGlow 1.4s ease-in-out infinite}
.live-board-cell.changed{animation:liveBoardCellPulse .52s ease}.live-board-cell.motion-drop{animation:liveBoardCellMove .44s cubic-bezier(.2,1.25,.34,1), liveBoardCellPulse .52s ease}.live-board-cell.motion-swap{animation:liveBoardCellMove .34s cubic-bezier(.22,1,.36,1), liveBoardCellPulse .5s ease}.live-board-cell.motion-spawn{animation:liveBoardCellSpawn .4s cubic-bezier(.2,1.25,.34,1), liveBoardCellPulse .52s ease}
.live-board-spark{position:absolute;width:14px;height:14px;border-radius:999px;animation:liveBoardSpark .72s ease-out forwards;filter:drop-shadow(0 0 16px currentColor)}
.live-board-burst{position:absolute;animation:liveBoardBurst 1.1s ease-out forwards;filter:drop-shadow(0 0 16px currentColor)}
.live-board-burst.rect{border-radius:999px}
.live-board-burst.circle{border-radius:50%}
.live-board-score-pop{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.92);font-family:'Poppins',sans-serif;font-weight:800;font-size:1.7rem;color:var(--brand-yellow);text-shadow:0 4px 16px rgba(0,0,0,.6);opacity:0;white-space:nowrap;letter-spacing:.01em;animation:liveBoardScorePop 820ms ease-out forwards;z-index:4}
.live-board-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.8);font-family:'Poppins',sans-serif;font-weight:900;font-size:1.28rem;color:#ff8db6;text-shadow:0 6px 24px rgba(81,0,33,.6);opacity:0;white-space:nowrap;letter-spacing:.02em;animation:liveBoardBannerPop 860ms cubic-bezier(.34,1.56,.64,1) forwards;z-index:4}
@keyframes liveBoardGlow{0%{box-shadow:0 0 0 rgba(133,151,255,0),0 12px 24px rgba(81,0,33,.14)}30%{box-shadow:0 0 0 2px rgba(133,151,255,.72),0 0 32px rgba(133,151,255,.38),0 12px 24px rgba(81,0,33,.18)}100%{box-shadow:0 12px 24px rgba(81,0,33,.14)}}
@keyframes liveBoardShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-5px)}36%{transform:translateX(5px)}54%{transform:translateX(-3px)}72%{transform:translateX(3px)}}
@keyframes liveBoardCellDrop{0%{transform:translateY(-8px) scale(.9);opacity:.4}100%{transform:translateY(0) scale(1);opacity:1}}@keyframes liveBoardCellMove{0%{transform:translate(calc(var(--dx) * (var(--mini-cell) + var(--mini-gap))),calc(var(--dy) * (var(--mini-cell) + var(--mini-gap)))) scale(.96);opacity:.84}100%{transform:translate(0,0) scale(1);opacity:1}}@keyframes liveBoardCellSpawn{0%{transform:translate(0,calc(var(--spawn-y) * (var(--mini-cell) + var(--mini-gap)))) scale(.92);opacity:.35}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes liveBoardCellPulse{0%,100%{box-shadow:0 0 0 rgba(255,206,43,0)}50%{box-shadow:0 0 0 1px rgba(255,206,43,.35),0 0 14px rgba(255,206,43,.22)}}
@keyframes liveBoardSpark{0%{transform:translate(0,0) scale(.5);opacity:0}8%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(1.1);opacity:0}}
@keyframes liveBoardBurst{0%{transform:translate(0,0) rotate(0deg) scale(.5);opacity:0}8%{opacity:1}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(1);opacity:0}}
@keyframes liveBoardScorePop{0%{transform:translate(-50%,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(-50%,-50px) scale(1.3);opacity:0}}
@keyframes liveBoardBannerPop{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}18%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}
.scoreboard-column{display:flex;flex-direction:column;gap:12px;min-width:0}
#scoreboard{flex:1;display:flex;flex-direction:column;gap:12px;overflow:visible;position:relative}
.score-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--panel);border:1px solid rgba(81,0,33,.12);border-radius:18px;padding:16px 20px;position:relative;overflow:hidden;box-shadow:0 16px 32px rgba(81,0,33,.12);transition:transform .15s, box-shadow .2s}
.score-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:6px 0 0 6px;background:var(--brand-pink);opacity:.75}
.score-row.rank-1::before{background:var(--brand-yellow)}
.score-row.rank-2::before{background:var(--brand-cyan)}
.score-row.rank-3::before{background:#ff8db6}
.rank-badge{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;background:rgba(81,0,33,.08);color:var(--text);border:1px solid rgba(81,0,33,.12)}
.pname{font-weight:700;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pemoji{font-size:1.1rem;opacity:.9;margin-left:6px}
.score-val{font-family:'Poppins',sans-serif;font-weight:900;font-size:1.35rem;color:var(--brand-pink);min-width:90px;text-align:right}
.score-bar{position:absolute;right:0;top:0;bottom:0;background:linear-gradient(90deg, rgba(255,29,37,0), rgba(255,29,37,.10));transition:width .8s ease;border-radius:0 var(--radius) var(--radius) 0}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:12px;font-size:.96rem;text-align:center;background:rgba(255,255,255,.55);border:1px dashed rgba(81,0,33,.28);border-radius:18px}
.empty-state .icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(81,0,33,.08);font-size:2rem}
/* Sieger-Overlay bleibt bewusst dunkel (Dunkelrot) - der Celebration-Moment
mit Konfetti braucht die dunkle Buehne, auch in der hellen App. */
#winner-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(81,0,33,.94);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:32px;color:#fff}
#winner-overlay.show{display:flex}
/* Turnier-Rundenwechsel: der Sieger-Screen schrumpft zum zentrierten Popup,
damit die darunter bereits geoeffnete neue Lobby (Code + beigetretene
Spieler in der rechten Spalte) sichtbar bleibt. */
#winner-overlay.as-popup{inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(620px,86vw);max-height:84vh;overflow-y:auto;
padding:24px 26px;gap:10px;border-radius:26px;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(35,0,14,.5)}
#winner-overlay.as-popup .win-trophy{font-size:2.9rem;animation-duration:1.4s}
#winner-overlay.as-popup .win-name{font-size:2rem}
#winner-overlay.as-popup .win-score{font-size:1.2rem}
#winner-overlay.as-popup .win-emoji{transform:scale(.8)}
#winner-overlay.as-popup .win-ranking{max-height:30vh;overflow-y:auto}
.win-next-lobby{font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem;color:var(--brand-yellow);letter-spacing:.4px}
#winner-overlay:not(.as-popup) .win-next-lobby{display:none}
.win-trophy{font-size:5rem;animation:trophyBounce 1s ease infinite alternate}
@keyframes trophyBounce{from{transform:translateY(0) scale(1)}to{transform:translateY(-14px) scale(1.05)}}
.win-name{font-family:'Poppins',sans-serif;font-weight:900;font-size:3.1rem;color:#ff8db6}
.win-score{font-family:'Poppins',sans-serif;font-weight:800;font-size:1.8rem;color:var(--brand-yellow)}
.win-emoji{font-size:2.5rem}
.win-ranking{width:min(100%,520px);max-height:min(40svh,320px);padding:16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);overflow:hidden}
.win-ranking-title{font-family:'Poppins',sans-serif;font-size:.8rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:12px}
.win-ranking-list{display:flex;flex-direction:column;gap:8px;max-height:calc(min(40svh,320px) - 54px);overflow-y:auto;padding-right:4px}
.win-rank-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:#fff}
.win-rank-row .rank{font-family:'Poppins',sans-serif;font-weight:900;color:var(--brand-yellow);text-align:center}
.win-rank-row .name{min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-rank-row .score{font-family:'Poppins',sans-serif;font-weight:900;color:#ff8db6}
#winner-overlay .win-label{color:rgba(255,255,255,.72)}
aside{grid-area:sidebar;position:relative;z-index:1;padding:20px 24px 24px;border-left:1px solid rgba(81,0,33,.12);display:flex;flex-direction:column;gap:20px;overflow-y:auto;background:rgba(255,255,255,.45);backdrop-filter:blur(8px)}
/* Logo + Spiel-Code + Status-Indikator ("Warte auf Spieler") oben in der
rechten Spalte. */
.host-brand{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.host-brand img.header-logo{display:block;height:60px;width:auto}
.host-brand .code-box{width:100%}
.qr-block,.player-list{background:var(--panel);border:1px solid rgba(81,0,33,.12);border-radius:18px;box-shadow:var(--shadow)}
/* Grosser QR-Code: immer voll sichtbar (quadratisch), nutzt bis zu 80% der
Bildschirmhoehe, sofern die Breite es hergibt. image-rendering:pixelated
haelt die Module beim Hochskalieren scharf. */
/* Groesse bewusst an der VERFUEGBAREN Hoehe orientiert (56vh), nicht an der
vollen Viewporthoehe: der Timer-Kopf oben und der Footer unten fressen
Platz, sonst wuerde der (quadratische) QR unten abgeschnitten. 58vw begrenzt
zusaetzlich auf breiten Screens, damit er nie ueber die Buehne hinauslaeuft.
Der QR bleibt so immer komplett sichtbar. */
.qr-block{padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0;max-width:100%}
#qr-code{width:min(56vh,58vw);max-width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-radius:22px;padding:min(2.2vh,20px);border:1px solid rgba(81,0,33,.12)}
#qr-code canvas,#qr-code img{display:block;width:100%;height:100%;image-rendering:pixelated}
.qr-hint{color:var(--text);font-size:clamp(.85rem,1.4vw,1.05rem);text-align:center;font-family:'DM Sans',sans-serif;font-weight:700}
.player-list{padding:18px}
#player-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(81,0,33,.06);border:1px solid rgba(81,0,33,.12);border-radius:999px;padding:8px 14px;font-size:.85rem;display:flex;align-items:center;gap:6px;animation:popIn .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.btn-start:hover{box-shadow:0 18px 34px rgba(255,29,37,.34)}
.btn-start:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-reset{background:rgba(81,0,33,.06);color:var(--text);border:1px solid rgba(81,0,33,.2)}
.btn-reset:hover{background:rgba(81,0,33,.12)}
.duration-panel{padding:18px}
.duration-control{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;margin-top:12px}
.duration-step{border:none;border-radius:12px;background:rgba(81,0,33,.08);color:var(--text);font-family:'Poppins',sans-serif;font-weight:900;font-size:1.2rem;height:44px;cursor:pointer}
.duration-step:active{transform:scale(.98)}
#round-duration{width:100%;height:44px;border-radius:12px;border:1px solid rgba(81,0,33,.24);background:#fff;color:var(--text);text-align:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:1rem}
.duration-hint{margin-top:10px;color:var(--brand-cyan);font-size:.82rem;font-weight:700;text-align:center}
.invite-panel{padding:18px;display:flex;flex-direction:column;gap:12px}
.invite-search{width:100%;background:#fff;border:1px solid rgba(81,0,33,.24);border-radius:14px;padding:12px 14px;color:var(--text);font-family:'Poppins',sans-serif;font-size:.95rem;outline:none}
.invite-search:focus{border-color:var(--brand-cyan);box-shadow:0 0 0 3px rgba(133,151,255,.24)}
.invite-select-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto}
.invite-select-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(81,0,33,.05)}
.invite-select-row input{width:18px;height:18px;accent-color:var(--brand-pink);padding:0}
.invite-select-row strong{font-size:.92rem}.invite-select-row small{display:block;color:var(--muted);margin-top:2px}
.invite-panel-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.invite-panel-actions .chooser-btn{flex:1 1 200px}.invite-panel-status{font-size:.8rem;color:var(--brand-cyan);min-height:1.2em}
/* Hidden state also fades to opacity:0 (not just a fixed translateY): a long
message wraps to 2+ lines and grows taller than the 80px slide-out, which
used to leave a thin visible sliver ("Kante") stuck at the bottom edge.
opacity guarantees it fully disappears at any height; pointer-events:none
stops the hidden toast from swallowing taps. */
#simple-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);opacity:0;pointer-events:none;background:var(--brand-pink);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.9rem;transition:transform .3s,opacity .3s;z-index:900;box-shadow:0 14px 30px rgba(255,29,37,.3);max-width:calc(100vw - 32px);text-align:center}
#simple-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.invite-toast-stack{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.invite-toast{width:min(360px,calc(100vw - 24px));padding:14px 14px 14px 16px;border-radius:18px;background:var(--panel);border:1px solid rgba(81,0,33,.14);box-shadow:0 24px 50px rgba(81,0,33,.22);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.invite-toast-copy{display:flex;flex-direction:column;gap:4px}.invite-toast-copy strong{font-family:'Poppins',sans-serif;font-size:.96rem}.invite-toast-copy small{color:var(--muted);line-height:1.45}
.invite-toast-actions{display:flex;align-items:flex-start;gap:8px}.invite-toast-btn,.invite-toast-close{border:none;cursor:pointer;font-family:'Poppins',sans-serif;font-weight:800}.invite-toast-btn{border-radius:12px;padding:10px 12px;background:var(--brand-pink);color:#fff}.invite-toast-close{width:34px;height:34px;border-radius:10px;background:rgba(81,0,33,.08);color:var(--text);font-size:1rem}
.award-toast-stack{position:fixed;left:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:10px;align-items:flex-start;pointer-events:none}
.award-toast{width:min(320px,calc(100vw - 24px));padding:12px 16px;border-radius:18px;background:var(--brand-yellow);border:1px solid rgba(81,0,33,.2);box-shadow:0 24px 50px rgba(81,0,33,.22);display:flex;align-items:center;gap:12px;color:var(--text);animation:awardToastIn .55s cubic-bezier(.34,1.56,.64,1),awardToastGlow 1.6s ease-in-out .55s infinite}
.award-toast.leaving{animation:awardToastOut .3s ease forwards}
.award-toast-icon{font-size:1.8rem;line-height:1;animation:awardToastIconPop .6s cubic-bezier(.34,1.56,.64,1)}
.award-toast-copy{display:flex;flex-direction:column;gap:2px}
.award-toast-copy strong{font-family:'Poppins',sans-serif;font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;opacity:.75}
.award-toast-copy span{font-family:'Poppins',sans-serif;font-weight:800;font-size:.92rem}
@keyframes awardToastIn{0%{opacity:0;transform:translateX(-30px) scale(.6) rotate(-8deg)}60%{opacity:1;transform:translateX(4px) scale(1.08) rotate(2deg)}100%{opacity:1;transform:translateX(0) scale(1) rotate(0)}}
@keyframes awardToastIconPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes awardToastGlow{0%,100%{box-shadow:0 24px 50px rgba(81,0,33,.22),0 0 0 rgba(255,206,43,0)}50%{box-shadow:0 24px 50px rgba(81,0,33,.22),0 0 22px rgba(255,206,43,.55)}}
@keyframes awardToastOut{to{opacity:0;transform:translateX(-24px) scale(.85)}}
.btn-invite{background:var(--brand-pink);color:#fff;margin-top:0}
dialog#invite-modal,dialog#quickplay-invite-modal,dialog#game-mode-modal{padding:0;border:none;border-radius:24px;background:var(--panel);color:var(--text);max-width:min(480px,calc(100vw - 24px));width:100%;margin:auto;box-shadow:0 30px 80px rgba(81,0,33,.4)}
dialog#invite-modal::backdrop,dialog#quickplay-invite-modal::backdrop,dialog#game-mode-modal::backdrop{background:rgba(81,0,33,.6);backdrop-filter:blur(4px)}
/* Plain overlay (not a native