:root {
  /* Platz, den die schwebende Menueleiste unten frei halten muss. Wird beim
     Start aus ihrer TATSAECHLICHEN Hoehe berechnet (navRaumSetzen) — feste
     Pixelwerte haben am 22.08.2026 auf einem Samsung dazu gefuehrt, dass der
     Knopf "Konto loeschen" hinter der Leiste lag und nicht erreichbar war.
     Zwei Ursachen dahinter: In der Android-WebView ist env(safe-area-inset-
     bottom) 0, waehrend die Leiste trotzdem Platz braucht — und eine groessere
     Systemschrift laesst die Leiste wachsen, ein fester Wert aber nicht. */
  --nav-raum: 150px;
  /* Design-System „1a Flutlicht" — identisch zu den Design-Piloten. */
  --bg:#000000; --bg2:#141C13; --bg3:#141C13; --bg4:#1B2418;
  --border:#2A3A22; --border-b:#3A4A32;
  --cyan:#B4FF3A; --cyan-d:rgba(180,255,58,0.12); --cyan-g:rgba(180,255,58,0.35);
  --ink:#0B0E0C;                     /* Text auf Volt-Grün */
  --gold:#FFB300; --gold-d:rgba(255,194,77,0.15);
  --green:#4ADE80; --green-d:rgba(180,255,58,0.12);
  --red:#FF7A84; --red-d:rgba(255,77,90,0.14);
  --purple:#B4FF3A; --purple-d:rgba(180,255,58,0.12);
  --text:#EDF2EA; --text-m:#8FA08C; --text-f:#5E6E5B;
  --grad:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);
  --r:14px;
  /* ── GOLD DESIGN-SYSTEM v1 — löst „1a Flutlicht" ab (Screen für Screen) ── */
  --gold-mid:#FFC233; --gold-light:#FFD54F;
  --green-dark:#22C55E; --blue:#5B8DB8;
  --bg-primary:#0A0A0A;
  --bg-card-top:rgba(26,26,26,0.9); --bg-card-bottom:rgba(16,16,16,0.95);
  --bg-card-alt-top:rgba(24,24,24,0.8); --bg-card-alt-bottom:rgba(18,18,18,0.9);
  --text-primary:#F5F5F5; --text-secondary:#B0B0B0; --text-muted:#9E9E9E; --text-dim:#757575; --text-label:#616161;
  --border-subtle:rgba(255,255,255,0.04); --border-medium:rgba(255,255,255,0.06);
  --gold-bg:rgba(255,179,0,0.08); --gold-border:rgba(255,179,0,0.2); --gold-glow:rgba(255,179,0,0.15);
  --green-bg:rgba(74,222,128,0.04); --green-border:rgba(74,222,128,0.12);
  --blue-bg:rgba(91,141,184,0.06); --blue-border:rgba(91,141,184,0.12);
  --undo:#EF4444; --undo-bg:rgba(239,68,68,0.08); --undo-border:rgba(239,68,68,0.2);
  --field-bg:rgba(255,255,255,0.03);
  --ease-standard:cubic-bezier(0.22,1,0.36,1); --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);font-family:'Saira',sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;}
.app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg-primary);position:relative;overflow:hidden;}

/* GOLD SHELL — Atmosphäre + Noise (global hinter allen Screens) */
.atmosphere{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:100vh;z-index:0;pointer-events:none;background:radial-gradient(ellipse 65% 32% at 50% 0%, rgba(255,179,0,0.035) 0%, transparent 48%),radial-gradient(ellipse 45% 30% at 22% 96%, rgba(74,222,128,0.02) 0%, transparent 46%),radial-gradient(ellipse 38% 36% at 86% 72%, rgba(91,141,184,0.018) 0%, transparent 48%);}
.noise{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:100vh;z-index:0;pointer-events:none;opacity:0.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");}

/* SCREENS */
.screen{display:none;height:100vh;height:100dvh;flex-direction:column;animation:fadeIn .2s ease;position:relative;z-index:1;}
.screen.active{display:flex;}
/* Nur opacity, KEIN transform: sonst wird die position:fixed Bottom-Nav relativ
   zum (bei scrollbaren Screens hohen) transformierten .screen positioniert und
   springt während der .2s off-screen -> Taps gehen ins Leere. */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.scroll{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);}
.scroll::-webkit-scrollbar{display:none;}

/* AUTH */
.auth-wrap{padding:60px 24px 40px;display:flex;flex-direction:column;min-height:100vh;}
.auth-logo{font-family:'Saira Condensed';font-weight:800;font-size:62px;letter-spacing:.02em;line-height:.95;margin-bottom:6px;}
.auth-logo span{color:var(--cyan);}
.auth-sub{font-size:14px;color:var(--text-m);margin-bottom:48px;line-height:1.5;}
.tabs{display:flex;gap:6px;margin-bottom:28px;}
.tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-f);font-family:'Saira';font-weight:700;font-size:13px;cursor:pointer;transition:all .15s;}
.tab.active{background:var(--cyan-d);border-color:rgba(108,59,245,0.35);color:var(--cyan);}
.field{margin-bottom:14px;}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-f);display:block;margin-bottom:6px;}
.field input{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--border-b);background:var(--bg3);color:var(--text);font-family:'Saira';font-size:14px;outline:none;transition:border-color .15s;}
.field input:focus{border-color:var(--cyan);}
.field input::placeholder{color:var(--text-f);}
.invite-info{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--cyan-d);border:1px solid rgba(108,59,245,0.25);margin-bottom:20px;font-size:13px;color:var(--cyan);}
.invite-info.hidden{display:none;}
.invite-block{margin-top:14px;padding-top:16px;border-top:1px solid var(--border);}
.invite-block-label{font-size:10px;font-weight:700;color:var(--text-m);text-transform:uppercase;letter-spacing:1.2px;}
.invite-code{font-family:'Saira Condensed';font-weight:800;font-size:30px;letter-spacing:.1em;color:var(--text);text-align:center;padding:12px 0 10px;margin:10px 0 12px;border:1.5px dashed var(--border-b);border-radius:12px;background:var(--bg);}
.invite-btns{display:flex;gap:10px;}
.invite-btns .btn-main{margin-top:0;flex:1.4;padding:13px;font-size:14px;}
.invite-btns .btn-ghost{margin-top:0;flex:1;padding:13px;font-size:13px;}
.invite-block-hint{font-size:11px;color:var(--text-f);margin-top:10px;line-height:1.5;}
.btn-main{width:100%;padding:16px;border-radius:14px;border:none;text-transform:uppercase;background:var(--cyan);color:var(--ink);font-family:'Saira';font-weight:700;font-size:15px;cursor:pointer;transition:all .15s;box-shadow:0 4px 20px rgba(108,59,245,0.3);margin-top:8px;}
.btn-main:active{transform:scale(0.97);}
.btn-main:disabled{background:var(--bg3);color:var(--text-f);box-shadow:none;cursor:not-allowed;}
.btn-ghost{width:100%;padding:13px;border-radius:14px;border:1px solid var(--border-b);background:transparent;color:var(--text-m);font-family:'Saira';font-weight:600;font-size:14px;cursor:pointer;margin-top:8px;}
.link-forgot{display:block;width:100%;margin-top:14px;background:none;border:none;color:var(--text-m);font-family:'Saira';font-weight:600;font-size:12.5px;cursor:pointer;text-align:center;padding:4px;}
.link-forgot:hover{color:var(--gold);}
.btn-sm{padding:7px 12px;border-radius:8px;border:none;font-family:'Saira';font-weight:700;font-size:11px;cursor:pointer;transition:all .15s;width:auto;}
.btn-cyan{background:var(--cyan);color:var(--ink);}
.btn-gold{background:var(--gold-d);border:1px solid rgba(166,124,0,0.3);color:var(--gold);}
.btn-danger{background:var(--red-d);border:1px solid rgba(232,84,46,0.3);color:var(--red);}
.btn-outline{background:transparent;border:1px solid var(--border-b);color:var(--text-m);}
.auth-error{background:var(--red-d);border:1px solid rgba(232,84,46,0.3);border-radius:10px;padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:12px;display:none;}
.auth-error.show{display:block;}

/* DASH HEADER */
.dash-header{padding:48px 18px 16px;background:linear-gradient(180deg,var(--bg2) 0%,transparent 100%);}
.dash-logo-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.dash-logo{font-family:'Saira Condensed';font-weight:800;font-size:26px;letter-spacing:.04em;}
.dash-logo span{color:var(--cyan);}
.user-menu{display:flex;align-items:center;gap:10px;position:relative;}
.user-av{width:34px;height:34px;border-radius:50%;background:var(--cyan-d);border:1.5px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--cyan);cursor:pointer;}
.user-av.gold{background:var(--gold-d);border-color:var(--gold);color:var(--gold);}
.user-dropdown{position:absolute;top:42px;right:0;background:var(--bg3);border:1px solid var(--border-b);border-radius:12px;box-shadow:0 10px 28px rgba(20,19,27,0.16);min-width:170px;padding:6px;z-index:60;display:none;}
.user-dropdown.show{display:block;}
.user-dropdown-item{padding:10px 12px;font-size:13px;color:var(--text);border-radius:8px;cursor:pointer;}
.user-dropdown-item:hover{background:rgba(0,0,0,.4);}
.user-dropdown-item.danger{color:var(--red);}
.user-dropdown-mail{padding:8px 12px 10px;font-size:11px;color:var(--text-f);border-bottom:1px solid var(--border);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.league-switcher{margin-bottom:12px;}
.league-switch-select{width:100%;padding:9px 12px;border-radius:12px;border:1px solid var(--border-medium);background:#161616;color:var(--text-primary);font-family:'Saira';font-size:12px;font-weight:600;outline:none;}
.league-switch-label{font-size:12px;color:var(--text-secondary);font-weight:600;padding:2px 0;}
.live-badge{display:flex;align-items:center;gap:5px;background:var(--red-d);border:1px solid rgba(232,84,46,0.3);padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;color:var(--red);letter-spacing:0.5px;}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.4s ease infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* MEIN SPIELER — Silhouette-Platzhalter (löst später der Claude-Design-Screen ab) */
.player-wrap{padding:0 18px 100px;}
.player-silhouette-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 18px;}
.player-silhouette{width:130px;height:168px;}
.player-live-status{margin-top:2px;}

/* HERO — Rasen-Laufbahn */
.hero-card{background:repeating-linear-gradient(90deg,#1C4526 0 42px,#17381F 42px 84px);border:1px solid rgba(20,19,27,0.1);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;margin-bottom:16px;cursor:pointer;}
.hero-card::before{content:'';position:absolute;left:50%;top:-42px;width:130px;height:130px;margin-left:-65px;border:2px solid rgba(255,255,255,0.12);border-radius:50%;pointer-events:none;}
.race-hero-top{display:flex;justify-content:space-between;align-items:baseline;position:relative;}
.race-hero-league{font-family:'Saira Condensed';font-weight:800;font-size:19px;letter-spacing:0.5px;color:var(--text);}
.race-hero-sub{font-size:10.5px;font-weight:700;color:rgba(255,255,255,0.65);text-transform:uppercase;letter-spacing:0.5px;}
.race-hero-tagline{font-size:12px;color:rgba(255,255,255,0.7);margin:4px 0 12px;position:relative;}
.race-hero-tagline b{color:var(--text);}
.race-lane{position:relative;height:60px;margin-bottom:4px;}
.race-lane-line{position:absolute;left:0;right:32px;top:28px;height:2px;background:rgba(255,255,255,0.3);}
.race-finish{position:absolute;right:0;top:16px;width:24px;height:24px;border-radius:6px;background:repeating-conic-gradient(#FFFFFF 0% 25%,#17381F 0% 50%);background-size:8px 8px;display:flex;align-items:center;justify-content:center;z-index:5;}
.race-finish span{font-family:'Saira Condensed';font-weight:800;font-size:9px;color:var(--text);text-shadow:0 0 3px #17381F,0 0 3px #17381F;}
.race-chip{position:absolute;width:22px;height:22px;transform:translateX(-50%);z-index:2;}
.race-chip.you{z-index:6;}
.race-chip-ring{position:absolute;inset:-3px;border:2px solid #FFFFFF;border-radius:26%;pointer-events:none;}
.race-chip-label{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:700;letter-spacing:1px;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.race-cluster{position:absolute;width:22px;height:22px;transform:translateX(-50%);border-radius:26%;background:rgba(255,255,255,0.22);border:1.5px dashed rgba(255,255,255,0.6);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--text);z-index:1;}
.hero-me-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.14);position:relative;}
.hero-me-name{font-size:12.5px;font-weight:600;color:var(--text);}
.hero-me-club{color:rgba(255,255,255,0.6);font-weight:400;}
.hero-me-val{font-family:'Saira Condensed';font-weight:800;font-size:22px;color:var(--text);letter-spacing:0.5px;}
.hero-me-val span{font-size:10px;color:rgba(255,255,255,0.6);font-family:'Saira';font-weight:400;}

.empty-state-link{color:var(--cyan);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-weight:600;}

/* NO STRIKER */
.no-striker{background:var(--bg3);border:1px dashed var(--border-b);border-radius:var(--r);padding:24px;text-align:center;margin-bottom:16px;}
.no-striker-icon{margin-bottom:10px;display:flex;justify-content:center;color:var(--text-m);}
.no-striker-title{font-family:'Saira Condensed';font-weight:800;font-size:18px;letter-spacing:1px;margin-bottom:6px;}
.no-striker-sub{font-size:13px;color:var(--text-m);line-height:1.4;}

/* SORT TABS — Segmented Control */
.sort-tabs{display:flex;gap:4px;margin:2px 18px 14px;background:var(--bg3);border-radius:12px;padding:4px;}
.sort-tab{flex:1;padding:8px 0;border-radius:9px;border:none;background:transparent;color:#5D5B52;font-family:'Saira';font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;}
.sort-tab.active{background:var(--cyan);color:var(--ink);}

/* TABLE */
.table-wrap{padding:0 18px 100px;}
.chart-svg{width:100%;height:190px;display:block;margin-bottom:14px;}
.chart-legend{display:flex;flex-direction:column;gap:6px;}
.chart-legend-item{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;border:1px solid var(--border-medium);background:var(--field-bg);box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;font-size:12.5px;transition:opacity .15s;}
.chart-legend-item.off .chart-legend-swatch{opacity:0.25;}
.chart-legend-item.off .chart-legend-name{color:var(--text-dim);}
.chart-legend-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.chart-legend-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.chart-legend-val{font-family:'Saira Condensed';font-weight:800;font-size:14px;color:var(--text-m);}
.chart-empty{padding:30px;text-align:center;color:var(--text-f);font-size:13px;}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.section-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-f);}
.section-tag{font-size:9px;font-weight:700;background:var(--gold-d);color:var(--gold);padding:2px 8px;border-radius:20px;}
.draft-mode-pill{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:20px;flex:none;}
.draft-mode-pill.test{background:var(--gold-d);color:var(--gold);border:1px solid rgba(140,100,0,0.3);}
.draft-mode-pill.official{background:var(--cyan-d);color:var(--cyan);border:1px solid rgba(108,59,245,0.3);}
.draft-mode-banner{font-size:12px;line-height:1.5;border-radius:12px;padding:10px 14px;margin-bottom:14px;}
.draft-mode-banner.test{background:var(--gold-d);color:var(--gold);border:1px solid rgba(140,100,0,0.25);}
.draft-mode-banner.official{background:var(--cyan-d);color:var(--cyan);border:1px solid rgba(108,59,245,0.25);}
.sort-desc{font-size:11px;color:var(--text-m);margin-bottom:12px;}
.p-row{display:flex;flex-direction:column;gap:7px;padding:10px 12px 11px;border-radius:14px;margin-bottom:7px;border:1px solid var(--border);background:var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:all .15s;}
.p-row.me{background:#18251A;border-color:#3E5A2E;}
.p-row:active{transform:scale(0.985);}
.p-row-top{display:flex;align-items:center;gap:10px;}
.p-rank{font-family:'Saira Condensed';font-weight:800;font-size:15px;color:#B5B2A6;width:18px;text-align:center;flex-shrink:0;}
.p-row.r1 .p-rank{color:var(--gold);}
.p-row.r2 .p-rank{color:#A8B4A4;}
.p-row.r3 .p-rank{color:#C98A3E;}
.mini-trikot{width:38px;height:38px;flex-shrink:0;}
.p-info{flex:1;min-width:0;}
.p-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;}
.du-badge{font-size:9px;font-weight:700;letter-spacing:1px;color:var(--text);background:var(--cyan);border-radius:4px;padding:1.5px 5px;flex-shrink:0;}
.p-meta{font-size:11px;color:var(--text-m);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p-right{text-align:right;flex-shrink:0;}
.p-score{font-family:'Saira Condensed';font-weight:800;font-size:19px;color:var(--text);line-height:1;}
.p-row.me .p-score{color:var(--cyan);}
.p-sub{font-size:10px;color:var(--text-m);margin-top:2px;}
.p-bar{width:100%;height:4px;background:var(--border);border-radius:2px;position:relative;}
.p-bar::after{content:'';position:absolute;right:0;top:-2px;bottom:-2px;width:2px;background:repeating-linear-gradient(var(--text) 0 2px,var(--bg) 2px 4px);opacity:0.5;}
.p-bar-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--cyan);}
.p-row.r1 .p-bar-fill{background:var(--gold);}
.table-finish{width:22px;height:22px;border-radius:5px;background:repeating-conic-gradient(var(--text) 0% 25%,var(--bg) 0% 50%);background-size:8px 8px;display:flex;align-items:center;justify-content:center;}
.table-finish span{font-family:'Saira Condensed';font-weight:800;font-size:10px;color:var(--text);text-shadow:0 0 3px var(--text),0 0 3px var(--text);}
.table-tagline{padding:12px 0 4px;text-align:center;font-size:11.5px;color:var(--text-m);}
.p-row.r1 .p-pct{color:var(--gold);}
.p-row.me .p-pct{color:var(--cyan);}
.chev{color:var(--text-f);flex-shrink:0;}

/* ══ KARTEN — Gold-Grid (Flip-Karten). Layout aus dem abgenommenen Entwurf
   /design/Finale Screen Designentwürfe/fan-tasy_karten_screen.html. Pflicht = Gold
   (nicht Blau wie im Entwurf) für App-weite Konsistenz mit dem Spieltag-Screen. ══ */
#screen-cards .scroll{display:flex;flex-direction:column;}
#screen-cards .cards-wrap{padding:0 0 calc(var(--nav-raum) + env(safe-area-inset-bottom));}
#screen-cards #cardsGrid{width:100%;}

.cards-header{padding:max(48px,calc(env(safe-area-inset-top) + 20px)) 24px 16px;}
.cards-h1{font-family:'Saira Condensed',sans-serif;font-size:32px;font-weight:800;letter-spacing:1px;line-height:1.1;
  background:linear-gradient(180deg,#FFFFFF 0%,#C0C0C0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cards-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}

/* Aktiv-Banner */
#screen-cards .active-banner{margin:0 24px 20px;padding:16px 18px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-card-top),var(--bg-card-bottom));border:1px solid var(--gold-border);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}
#screen-cards .active-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);background-size:200% 100%;animation:cardsShimmer 4s ease-in-out infinite;}
#screen-cards .active-banner.idle{border-color:var(--border);}
#screen-cards .active-banner.idle::before{display:none;}
#screen-cards .banner-row{display:flex;align-items:center;gap:12px;}
#screen-cards .banner-icon-wrap{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--gold-bg);border:1px solid var(--gold-border);}
#screen-cards .banner-icon-wrap svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-cards .banner-icon-wrap.idle{background:rgba(255,255,255,.03);border-color:var(--border);}
#screen-cards .banner-icon-wrap.idle svg{stroke:var(--text-dim);}
#screen-cards .banner-text{flex:1;min-width:0;}
#screen-cards .banner-title{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);}
#screen-cards .banner-sub{font-size:11px;font-weight:500;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#screen-cards .banner-badge{flex:none;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:100px;
  background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);}
/* Frist-Zeile im Banner: bis wann gesetzt werden kann. Steht bewusst als
   eigene Zeile unter dem Banner-Inhalt und nicht in der einzeiligen
   banner-sub — dort wuerde sie bei langen Kartennamen abgeschnitten. */
#screen-cards .banner-frist{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-medium);}
#screen-cards .banner-frist .frist-k{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-label);}
#screen-cards .banner-frist .frist-v{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);}
#screen-cards .banner-frist.knapp .frist-v{color:var(--gold);}
#screen-cards .banner-frist .frist-rest{font-size:11px;font-weight:700;color:var(--gold);padding:3px 10px;border-radius:100px;
  background:var(--gold-bg);border:1px solid var(--gold-border);}

/* Abschnitts-Label */
#screen-cards .section-label{display:flex;align-items:center;gap:8px;padding:0 24px;margin-bottom:12px;}
#screen-cards .section-label::before{content:'';width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-mid));}
#screen-cards .section-label span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);}

/* Karten-Grid + Flip */
#screen-cards .cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 10px;padding:0 24px;}
#screen-cards .flip-card{perspective:800px;cursor:pointer;position:relative;}
/* Reststapel-Lagen hinter der Karte — deuten die verbleibende Anzahl an (peek unten, je tiefer schmaler) */
#screen-cards .stack-layer{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:16px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#1e1e1e,#141414);border:1px solid rgba(255,255,255,.09);box-shadow:0 6px 14px rgba(0,0,0,.55);
  transform:translateY(calc(var(--s) * 9px)) scaleX(calc(1 - var(--s) * 0.05));transform-origin:top center;}
#screen-cards .flip-card.angriff .stack-layer{border-color:rgba(74,222,128,.2);}
#screen-cards .flip-card.pflicht .stack-layer{border-color:rgba(255,179,0,.22);}
#screen-cards .flip-card-inner{position:relative;z-index:1;width:100%;aspect-ratio:3/4;transition:transform .6s var(--ease);transform-style:preserve-3d;}
#screen-cards .flip-card.flipped .flip-card-inner{transform:rotateY(180deg);}
#screen-cards .flip-card-front,#screen-cards .flip-card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;overflow:hidden;}
#screen-cards .flip-card-front{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;
  background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:transform .2s ease,box-shadow .2s ease;}
#screen-cards .flip-card:active .flip-card-front{transform:scale(.97);}
#screen-cards .flip-card.angriff .flip-card-front{border-color:rgba(74,222,128,.1);}
#screen-cards .flip-card.pflicht .flip-card-front{border-color:var(--gold-border);}
#screen-cards .flip-card.is-active .flip-card-front{border-color:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 20px var(--gold-glow);}
#screen-cards .flip-card.is-used .flip-card-front{opacity:.72;}
#screen-cards .card-visual{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
#screen-cards .flip-card.angriff .card-visual{background:var(--green-bg);border:1px solid var(--green-border);}
#screen-cards .flip-card.pflicht .card-visual{background:var(--gold-bg);border:1px solid var(--gold-border);}
#screen-cards .card-visual svg{width:28px;height:28px;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-cards .flip-card.angriff .card-visual svg{stroke:var(--green);}
#screen-cards .flip-card.pflicht .card-visual svg{stroke:var(--gold);}
/* Ornamentiertes Emblem (cardArtSVG, alte Kartenmotive) auf der Vorderseite — in den neuen Kategorie-Farben, dezenter Glow statt altem Grün-Leak */
#screen-cards .card-emblem{width:78px;height:78px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}
#screen-cards .card-emblem svg{width:100%;height:100%;}
#screen-cards .flip-card.angriff .card-emblem svg{filter:drop-shadow(0 0 6px rgba(74,222,128,.32));}
#screen-cards .flip-card.pflicht .card-emblem svg{filter:drop-shadow(0 0 6px rgba(255,179,0,.32));}
#screen-cards .card-type-name{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);text-align:center;line-height:1.05;margin-bottom:4px;padding:0 4px;}
#screen-cards .card-type-desc{font-size:10px;font-weight:500;color:var(--text-muted);text-align:center;padding:0 8px;line-height:1.3;}
#screen-cards .card-flag{position:absolute;top:8px;right:8px;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);}
#screen-cards .card-flag.used{background:rgba(255,255,255,.04);border-color:var(--border);color:var(--text-dim);}
#screen-cards .flip-card-back{transform:rotateY(180deg);display:flex;flex-direction:column;padding:14px;
  background:linear-gradient(180deg,var(--bg-card-top),rgba(14,14,14,.98));border:1px solid var(--border-medium);box-shadow:0 8px 32px rgba(0,0,0,.5);}
#screen-cards .flip-card.angriff .flip-card-back{border-color:var(--green-border);}
#screen-cards .flip-card.pflicht .flip-card-back{border-color:var(--gold-border);}
#screen-cards .back-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
#screen-cards .back-icon-wrap{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;}
#screen-cards .flip-card.angriff .back-icon-wrap{background:var(--green-bg);border:1px solid var(--green-border);}
#screen-cards .flip-card.pflicht .back-icon-wrap{background:var(--gold-bg);border:1px solid var(--gold-border);}
#screen-cards .back-icon-wrap svg{width:13px;height:13px;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-cards .flip-card.angriff .back-icon-wrap svg{stroke:var(--green);}
#screen-cards .flip-card.pflicht .back-icon-wrap svg{stroke:var(--gold);}
/* Rückseite zeigt jetzt dasselbe Emblem wie die Vorderseite, nur klein (kein Strich-Icon mehr) */
#screen-cards .back-emblem{width:30px;height:30px;flex:none;display:flex;align-items:center;justify-content:center;}
#screen-cards .back-emblem svg{width:100%;height:100%;}
#screen-cards .flip-card.angriff .back-emblem svg{filter:drop-shadow(0 0 4px rgba(74,222,128,.3));}
#screen-cards .flip-card.pflicht .back-emblem svg{filter:drop-shadow(0 0 4px rgba(255,179,0,.3));}
#screen-cards .back-title{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text-primary);line-height:1;}
#screen-cards .back-stats{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
#screen-cards .stat-row{display:flex;justify-content:space-between;align-items:center;gap:6px;}
#screen-cards .stat-label{font-size:9.5px;font-weight:500;color:var(--text-muted);}
#screen-cards .stat-value{font-family:'Saira Condensed',sans-serif;font-size:12px;font-weight:700;color:var(--text-secondary);text-align:right;}
#screen-cards .set-btn{margin-top:auto;width:100%;padding:9px 0;font-family:'Saira',sans-serif;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;}
#screen-cards .set-btn:active{transform:scale(.97);}
#screen-cards .set-btn:disabled{opacity:.5;cursor:default;}
#screen-cards .flip-card.angriff .set-btn{background:linear-gradient(180deg,rgba(74,222,128,.14),rgba(74,222,128,.06));color:var(--green);border:1px solid rgba(74,222,128,.22);}
#screen-cards .flip-card.pflicht .set-btn{background:linear-gradient(180deg,rgba(255,179,0,.14),rgba(255,179,0,.06));color:var(--gold);border:1px solid var(--gold-border);}
#screen-cards .flip-card.angriff .set-btn.undo,#screen-cards .flip-card.pflicht .set-btn.undo{background:var(--undo-bg);color:var(--undo);border:1px solid var(--undo-border);}
#screen-cards .back-detail-link{margin-top:7px;text-align:center;font-size:9.5px;font-weight:600;color:var(--text-dim);cursor:pointer;letter-spacing:.3px;}
#screen-cards .back-detail-link:active{color:var(--text-secondary);}
@keyframes cardsShimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ══ MEIN SPIELER — Gold-Design, Layout aus dem abgenommenen Entwurf
   fan-tasy_spieler_screen.html. Echte Daten (Wert X/99, Tore, Karten),
   Entwurf-Fehler (Assists-Box, feste 112 Punkte, Flaggen-Emoji) draussen. ══ */
#screen-player .scroll{display:flex;flex-direction:column;}
.mp-header{padding:max(48px,calc(env(safe-area-inset-top) + 20px)) 24px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.mp-h1{font-family:'Saira Condensed',sans-serif;font-size:32px;font-weight:800;letter-spacing:1px;line-height:1.1;
  background:linear-gradient(180deg,#FFFFFF 0%,#C0C0C0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mp-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}
.mp-hbadge{flex:none;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:5px 14px;border-radius:100px;background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);white-space:nowrap;}
#screen-player .pl-wrap{padding:0 24px calc(var(--nav-raum) + env(safe-area-inset-bottom));}
#screen-player .section-label{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);margin:0 0 12px;}
#screen-player .section-label::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-mid));flex:none;}
#screen-player .section{margin-bottom:20px;}
#screen-player .sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#screen-player .sec-hd .section-label{margin:0;}
#screen-player .sec-link{font-size:11px;font-weight:600;color:var(--gold);cursor:pointer;}
/* Hero-Card */
.hero-card{background:linear-gradient(180deg,var(--bg-card-top),var(--bg-card-bottom));border:1px solid var(--border-subtle);border-radius:20px;padding:22px 20px;text-align:center;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.hero-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.hero-silo{width:76px;height:96px;margin:0 auto 6px;position:relative;display:flex;align-items:flex-end;justify-content:center;}
.hero-silo .sb-glow{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,var(--gold-glow),transparent 70%);}
.hero-silo svg{position:relative;width:100%;height:100%;}
.hero-name{font-family:'Saira Condensed',sans-serif;font-size:22px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;}
.hero-club{font-size:13px;color:var(--text-muted);margin-top:2px;}
.hero-val{display:flex;align-items:baseline;justify-content:center;gap:5px;margin-top:12px;}
.hero-val b{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:50px;line-height:.9;color:var(--green);}
.hero-val i{font-family:'Saira Condensed',sans-serif;font-style:normal;font-weight:700;font-size:20px;color:var(--text-dim);}
.hero-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden;margin:10px auto 0;max-width:220px;}
.hero-bar div{height:100%;background:linear-gradient(90deg,var(--green-dark),var(--green));border-radius:3px;}
.hero-grow{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:8px;}
.hero-grow b{color:var(--green);font-weight:700;}
/* Steckbrief-Grid */
.sbg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.sbg-item{background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:16px;padding:13px 14px;display:flex;flex-direction:column;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.sbg-item .l{font-size:9px;color:var(--text-label);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.sbg-item .v{font-family:'Saira Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);}
.sbg-item .v.green{color:var(--green);}
.sbg-item .v.blue{color:var(--blue);}
.sbg-item .v.gold{color:var(--gold);}
.sbg-item.tap{position:relative;cursor:pointer;}
.sbg-item.tap:active{transform:scale(.98);}
.sbg-chev{position:absolute;right:11px;top:50%;width:14px;height:14px;transform:translateY(-50%);fill:none;stroke:var(--text-label);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Meine gesetzten Karten */
.mk-row{display:grid;grid-template-columns:40px 22px 1fr auto;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-subtle);align-items:center;}
.mk-row:last-child{border-bottom:none;}
.mk-row .pl-vbadge{width:32px;height:32px;}
.mk-nm{font-size:12px;font-weight:700;color:var(--text-primary);}
.mk-sub{font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.mk-wk{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:800;text-align:right;color:var(--text-dim);white-space:nowrap;}
.mk-wk.plus{color:var(--green);}
.mk-wk.minus{color:var(--gold);}
.mk-wk.offen{color:var(--blue);}
/* Stats-Grid */
.stg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stg-box{background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:16px;padding:16px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.stg-box svg{width:20px;height:20px;margin:0 auto 6px;stroke:var(--text-label);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}
.stg-box .v{font-family:'Saira Condensed',sans-serif;font-size:26px;font-weight:800;color:var(--green);line-height:1;}
.stg-box .bar{width:80%;height:3px;background:var(--green-bg);border-radius:2px;margin:8px auto 0;overflow:hidden;}
.stg-box .bar div{height:100%;background:linear-gradient(90deg,var(--green-dark),var(--green));border-radius:2px;}
.stg-box .l{font-size:10px;color:var(--text-muted);margin-top:6px;text-transform:uppercase;letter-spacing:.5px;}
/* Form-Kreise */
.pl-form{display:flex;gap:8px;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:16px;padding:16px;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.pl-fc{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:'Saira Condensed',sans-serif;position:relative;flex:none;}
.pl-fc.t{background:var(--green);color:var(--bg-primary);}
.pl-fc.g{background:var(--gold);color:var(--bg-primary);}
.pl-fc.n{background:rgba(255,255,255,.03);color:var(--text-label);border:1px solid rgba(255,255,255,.06);}
.pl-fc span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:linear-gradient(180deg,rgba(26,26,26,.97),rgba(16,16,16,.98));border:1px solid var(--border-medium);border-radius:10px;padding:7px 11px;font-family:'Saira',sans-serif;font-size:10px;font-weight:500;color:var(--text-secondary);white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.4);}
.pl-fc:hover span{opacity:1;transform:translateX(-50%) translateY(0);}
/* Aktive Karte */
.pl-active{background:linear-gradient(180deg,rgba(74,222,128,.04),rgba(18,18,18,.95));border:1px solid var(--green-border);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.pl-active.pflicht{background:linear-gradient(180deg,rgba(255,179,0,.04),rgba(18,18,18,.95));border-color:var(--gold-border);}
.pl-active.idle{background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px dashed var(--border-medium);}
.pl-active::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--green),var(--green-dark));border-radius:16px 0 0 16px;}
.pl-active.pflicht::before{background:linear-gradient(180deg,var(--gold),var(--gold-mid));}
.pl-active.idle::before{display:none;}
.pl-active .iw{width:44px;height:44px;border-radius:12px;background:var(--green-bg);border:1px solid var(--green-border);display:flex;align-items:center;justify-content:center;flex:none;}
.pl-active.pflicht .iw{background:var(--gold-bg);border-color:var(--gold-border);}
.pl-active.idle .iw{background:rgba(255,255,255,.03);border-color:var(--border-medium);}
.pl-active .iw svg{width:22px;height:22px;stroke:var(--green);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.pl-active.pflicht .iw svg{stroke:var(--gold);}
.pl-active.idle .iw svg{stroke:var(--text-dim);}
.pl-active .info{flex:1;min-width:0;}
.pl-active .info .l{font-size:11px;color:var(--text-muted);}
.pl-active .info .n{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:700;margin-top:2px;line-height:1.2;}
.pl-active .chev{color:var(--text-label);flex:none;}
.pl-active .chev svg{width:16px;height:16px;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:currentColor;}
/* Verlauf + Tabelle (Listen) */
.pl-list{background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.pl-vrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border-subtle);align-items:center;}
.pl-vrow:last-child{border-bottom:none;}
.pl-vbadge{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border-medium);display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed',sans-serif;font-size:14px;font-weight:800;color:var(--text-label);}
.pl-vmatch{font-size:12px;color:var(--text-muted);line-height:1.4;min-width:0;}
.pl-vmatch b{color:var(--green);font-weight:600;}
.pl-vpts{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:800;text-align:right;color:var(--text-dim);white-space:nowrap;}
.pl-vpts.pos{color:var(--green);}
/* Tabellen-Ausschnitt */
.pl-trow{display:grid;grid-template-columns:26px 1fr auto;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border-subtle);align-items:center;font-size:13px;}
.pl-trow:last-child{border-bottom:none;}
.pl-trow.me{background:var(--gold-bg);}
.pl-trank{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:14px;color:var(--text-label);}
.pl-trow.me .pl-trank{color:var(--gold);}
.pl-tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);}
.pl-trow.me .pl-tname{color:var(--gold);font-weight:700;}
.pl-tval{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:14px;color:var(--text-primary);}
.pl-trow.me .pl-tval{color:var(--gold);}
/* Kartenvorrat */
.pl-inv{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.pl-ivchip{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:12px;padding:10px 12px;}
.pl-ivdot{width:7px;height:7px;border-radius:50%;flex:none;}
.pl-ivn{flex:1;min-width:0;font-size:11.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pl-ivc{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:14px;}
.pl-empty{font-size:12px;color:var(--text-muted);line-height:1.5;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:14px;padding:16px;text-align:center;}

/* ══ GEGNER-FENSTER ══
   Bewusst flach gehalten: Das Blatt soll auf einen Blick lesbar sein, ohne zu
   scrollen (Tim, 25.08.2026). Deshalb kein Hero mit Silhouette wie in "Mein
   Spieler", sondern eine Kopfzeile — Trikot, Name, Wert nebeneinander. */
#gegnerSheet{gap:10px;}
.gs-top{background:linear-gradient(180deg,var(--bg-card-top),var(--bg-card-bottom));border:1px solid var(--border-subtle);border-radius:18px;padding:15px 16px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.gs-top::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.gs-kopf{display:flex;align-items:center;gap:12px;}
.gs-trikot{width:40px;height:48px;flex:none;}
.gs-ident{flex:1;min-width:0;}
.gs-name{font-family:'Saira Condensed',sans-serif;font-size:20px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:1.1;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-sub{font-size:12px;color:var(--text-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gs-wert{flex:none;display:flex;align-items:baseline;gap:3px;}
.gs-wert b{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:34px;line-height:.9;color:var(--green);}
.gs-wert i{font-family:'Saira Condensed',sans-serif;font-style:normal;font-weight:700;font-size:14px;color:var(--text-dim);}
.gs-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.05);overflow:hidden;margin-top:12px;}
.gs-bar div{height:100%;background:linear-gradient(90deg,var(--green-dark),var(--green));border-radius:3px;}
.gs-fuss{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:8px;}
.gs-fuss b{color:var(--green);font-weight:700;}
.gs-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.gs-stats>div{background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:14px;padding:9px 12px;}
.gs-stats .l{font-size:8.5px;color:var(--text-label);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.gs-stats .v{font-family:'Saira Condensed',sans-serif;font-size:16px;font-weight:700;margin-top:2px;}
.gs-lbl{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);}
.gs-lbl::before{content:'';width:3px;height:12px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-mid));flex:none;}
#gegnerForm .pl-form{padding:11px;gap:6px;}
#gegnerForm .pl-fc{width:34px;height:34px;font-size:11px;}
.gs-hint{font-size:11px;line-height:1.45;color:var(--text-muted);text-align:center;}
/* Kartendeck des Gegners — nur Bestand, nie die noch verdeckte Karte des
   kommenden Spieltags (das rechnet league_member_deck heraus). */
.gd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;}
.gd-item{display:flex;align-items:center;gap:9px;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));border:1px solid var(--border-subtle);border-radius:13px;padding:8px 10px;min-width:0;}
.gd-item.leer{opacity:.42;}
.gd-ic{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;}
.gd-ic svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.gd-item.leer .gd-ic svg{stroke:var(--text-label);}
.gd-txt{min-width:0;flex:1;}
.gd-nm{font-size:10.5px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gd-ct{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text-muted);margin-top:1px;}
.gd-ct b{color:var(--green);}
.gd-item.leer .gd-ct b{color:var(--text-label);}
.card-sheet{background:linear-gradient(180deg,#171717 0%,#0c0c0c 100%);border-radius:24px 24px 0 0;padding:20px 22px max(32px,calc(env(safe-area-inset-bottom) + 24px));width:100%;max-width:430px;display:flex;flex-direction:column;gap:13px;border-top:1px solid var(--border-medium);max-height:calc(100vh - 14px);max-height:calc(100dvh - 14px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.card-sheet::-webkit-scrollbar{display:none;}
.card-sheet-grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);align-self:center;margin-top:-4px;flex:none;}



.card-sheet-head{display:flex;justify-content:space-between;align-items:baseline;}
.card-sheet-name{font-family:'Saira Condensed';font-weight:800;font-size:24px;letter-spacing:0.5px;color:var(--text);}
.card-sheet-typ{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;}
.card-sheet-rows{display:flex;flex-direction:column;gap:7px;}
.card-sheet-row{display:flex;gap:10px;font-size:12.5px;line-height:1.5;}
.card-sheet-row .k{flex:none;width:78px;font-weight:700;color:var(--text-m);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding-top:2px;}
.card-sheet-btns{display:flex;gap:10px;margin-top:2px;}
.card-sheet-btns button{border-radius:12px;padding:13px 0;font-family:'Saira',sans-serif;font-size:14px;}
.cs-back{flex:1;border:1px solid var(--border-medium);background:none;color:var(--text-secondary);font-weight:600;cursor:pointer;}
.cs-play{flex:1.4;border:none;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#0A0A0A;font-weight:700;cursor:pointer;box-shadow:0 4px 20px rgba(255,179,0,.18);}
.cs-play:disabled{background:rgba(255,255,255,.06);color:var(--text-dim);box-shadow:none;cursor:default;}
.cs-play:disabled{opacity:.45;cursor:default;}
.cs-used{flex:1.4;border:1px solid var(--border-medium);background:rgba(255,255,255,.04);color:var(--text-dim);font-weight:700;cursor:default;}
.mp-timing-row{display:flex;gap:10px;margin-top:14px;}
.mp-timing-box{flex:1;background:rgba(20,19,27,0.03);border-radius:10px;padding:10px 12px;}
.mp-timing-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-f);margin-bottom:4px;}
.mp-timing-val{font-size:12px;color:var(--text);line-height:1.4;}

/* PROFIL */
.profile-wrap{padding:0 18px 100px;}
.profile-card{background:var(--bg3);border:1px solid var(--border-b);border-radius:var(--r);padding:20px;margin-bottom:14px;}
.profile-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.profile-row:last-child{border-bottom:none;}
.profile-row .label{color:var(--text-m);}
.profile-row .val{font-weight:600;}
.rules-card{line-height:1.5;}
.rules-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.rules-chevron{color:var(--text-m);transition:transform .2s ease;flex-shrink:0;}
.rules-chevron.open{transform:rotate(180deg);}
.rules-h{font-family:'Saira';font-weight:700;font-size:13px;color:var(--text);margin-bottom:6px;}
.rules-p{font-size:13px;color:var(--text-m);line-height:1.6;margin-bottom:16px;}

/* TOPBAR (für inner screens) */
/* Kopfleiste liegt auf dem Grund */
.topbar{background:transparent;padding:48px 18px 14px;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--bg2) 0%,transparent 100%);position:sticky;top:0;z-index:20;}
.topbar-title{font-family:'Saira Condensed';font-weight:800;font-size:22px;letter-spacing:.04em;}
.topbar-sub{font-size:12px;color:var(--text-m);margin-top:1px;}

/* ══════════════════════════════════════
   DRAFT SCREEN — altes Flutlicht-CSS entfernt.
   Der Screen läuft jetzt komplett über die gekapselten #screen-draft-Regeln
   (Countdown-Ring, pick-row, players-grid, pcard, admin-panel usw.).
══════════════════════════════════════ */

/* WAITING / MSG */
.msg-card{background:var(--bg3);border:1px solid var(--border-b);border-radius:20px;padding:28px;text-align:center;margin-bottom:14px;}
.msg-icon{margin-bottom:12px;display:flex;justify-content:center;color:var(--text-m);}
.msg-title{font-family:'Saira Condensed';font-weight:800;font-size:22px;letter-spacing:.04em;margin-bottom:6px;}
.msg-sub{font-size:13px;color:var(--text-m);line-height:1.5;}

/* SPIELTAG / FIXTURES */
.fx-daygroup{margin-top:20px;}
.fx-daygroup:first-child{margin-top:4px;}
.fx-daylabel{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-f);margin-bottom:8px;padding-left:2px;}
.fx-card{position:relative;overflow:hidden;border-radius:15px;padding:14px;background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid var(--border);box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);}
.fx-card.fx-own{border-color:var(--cyan);box-shadow:0 8px 20px rgba(108,59,245,.14);}
.fx-own-tag{display:inline-block;font-size:10px;font-weight:800;color:var(--cyan);background:rgba(108,59,245,.1);padding:2px 8px;border-radius:20px;margin-bottom:6px;}
.fx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fx-teams{font-size:14px;font-weight:700;}
.fx-time{font-size:12px;color:var(--text-m);white-space:nowrap;flex-shrink:0;}
.fx-players{font-size:11px;color:var(--text-f);margin-top:6px;line-height:1.4;}
.fx-card-item{position:relative;overflow:hidden;border-radius:14px;padding:12px 14px;background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid var(--border);box-shadow:0 14px 34px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
.fx-card-item.me{border-color:var(--cyan);}

/* ADMIN PANEL */
.admin-panel{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);box-shadow:0 14px 34px rgba(0,0,0,.55);padding:15px 14px;margin-top:20px;}
.admin-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--gold);margin-bottom:12px;}
.admin-btns{display:flex;flex-wrap:wrap;gap:7px;}

/* NOTIF BANNER */
.notif-banner{background:var(--cyan-d);border:1px solid rgba(108,59,245,0.2);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:none;align-items:center;gap:10px;}
.notif-banner.show{display:flex;}
.notif-banner p{font-size:12px;flex:1;line-height:1.4;}

/* PICK FLASH */
.pick-flash{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
.pick-flash.show{animation:flashAnim 2.2s ease forwards;}
@keyframes flashAnim{0%{opacity:0}7%{opacity:1}82%{opacity:1}100%{opacity:0}}
.pick-flash-inner{background:linear-gradient(135deg,rgba(255,179,0,0.12),rgba(255,179,0,0.04));border:2px solid var(--gold);border-radius:20px;padding:22px 36px;text-align:center;backdrop-filter:blur(8px);box-shadow:0 0 40px rgba(255,179,0,.18);}
.pick-flash-icon{display:flex;justify-content:center;color:var(--gold);}
.pick-flash-text{font-family:'Saira Condensed';font-weight:800;font-size:26px;letter-spacing:.04em;color:var(--gold);margin-top:6px;}
.pick-flash-sub{font-size:12px;color:var(--text-muted);margin-top:3px;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:150;display:none;align-items:flex-end;justify-content:center;padding:0;}
.modal-overlay.show{display:flex;}
/* Der Deckel gilt fuer JEDEN Dialog, nicht nur fuer .modal-lg. Ohne ihn wuchs
   ein Dialog ueber den Bildschirm hinaus — und weil das Blatt am unteren Rand
   klebt (align-items:flex-end), lief der Ueberhang nach OBEN raus und war nicht
   erreichbar: kein Scrollbalken, kein Wischen, der Titel schlicht weg.
   Auf iOS fiel das kaum auf. Auf Android schon, weil die WebView die Schrift
   mit der Systemeinstellung skaliert — derselbe Dialog ist dort bei grosser
   Schrift deutlich hoeher. Genau die Ursache, die am 22.08. den Knopf
   "Konto loeschen" hinter die Leiste geschoben hat, nur eine Ebene hoeher.
   dvh statt vh: 100vh meint in mobilen Browsern die Hoehe OHNE eingeblendete
   Systemleisten und ist damit zu gross.
   Der untere Rand nimmt die Safe Area mit, damit die Knoepfe nicht am
   Home-Indikator bzw. an der Navigationsleiste kleben. */
.modal{background:linear-gradient(180deg,#1a1a1a 0%,#0f0f0f 100%);border:1px solid var(--border-medium);border-bottom:none;border-radius:24px 24px 0 0;padding:22px 20px max(40px,calc(env(safe-area-inset-bottom) + 28px));width:100%;max-width:430px;box-shadow:0 -14px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);max-height:calc(100vh - 14px);max-height:calc(100dvh - 14px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.modal.modal-lg{max-height:calc(100vh - 14px);max-height:calc(100dvh - 14px);overflow-y:auto;}

/* MEIN SPIELER */
.mp-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--border);}
.mp-trikot{width:40px;height:44px;flex-shrink:0;}
.mp-name{font-size:14px;font-weight:700;}
.mp-club{font-size:11px;color:var(--text-m);margin-top:1px;}
.mp-val{margin-left:auto;text-align:right;font-family:'Saira Condensed';font-weight:800;font-size:24px;color:var(--cyan);}
.mp-val span{font-size:10px;color:var(--text-f);font-family:'Saira';font-weight:400;}
.mp-block{margin-bottom:18px;}
.mp-block:last-child{margin-bottom:0;}
.mp-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-f);margin-bottom:8px;}
.mp-spark{width:100%;height:50px;display:block;}
.mp-form-row{display:flex;gap:6px;}
.mp-form-chip{flex:1;background:rgba(20,19,27,0.03);border:1px solid var(--border);border-radius:10px;padding:8px 4px;text-align:center;font-size:13px;color:var(--text-f);}
.mp-form-chip.hit{background:var(--green-d);border-color:rgba(28,122,62,0.3);color:var(--green);font-weight:700;}
.mp-form-chip span{display:block;font-size:8px;color:var(--text-f);margin-top:3px;font-weight:400;}
.mp-excerpt-row{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12px;border-bottom:1px solid var(--border);}
.mp-excerpt-row:last-child{border-bottom:none;}
.mp-excerpt-row.me{color:var(--cyan);font-weight:700;}
.mp-excerpt-rank{width:18px;color:var(--text-f);font-family:'Saira Condensed';font-weight:800;font-size:13px;}
.mp-excerpt-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-excerpt-val{font-family:'Saira Condensed';font-weight:800;font-size:14px;}
.mp-cards-row{display:flex;flex-wrap:wrap;gap:6px;}
.mp-card-chip{font-size:11px;background:rgba(20,19,27,0.03);border:1px solid var(--border);border-radius:20px;padding:5px 10px;}
.mp-card-chip b{color:var(--cyan);}
.mp-next,.mp-empty{font-size:12px;color:var(--text-m);line-height:1.5;background:rgba(20,19,27,0.03);border-radius:10px;padding:12px;}
.mp-cardstatus{display:flex;align-items:center;gap:10px;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.4;}
.mp-cardstatus .mp-cs-icon{flex-shrink:0;display:flex;}
.mp-cardstatus.active{background:var(--green-d);border:1px solid rgba(28,122,62,0.3);color:var(--green);}
.mp-cardstatus.active b{color:var(--green);}
.mp-cardstatus.open{background:var(--gold-d);border:1px solid rgba(140,100,0,0.3);color:var(--gold);}
.mp-cardstatus.neutral{background:rgba(20,19,27,0.03);border:1px solid var(--border);color:var(--text-m);}
.mp-cs-sub{font-size:11px;opacity:0.8;margin-top:1px;}
.modal-handle{width:36px;height:4px;background:var(--border-medium);border-radius:2px;margin:0 auto 18px;}
.modal h3{font-family:'Saira Condensed';font-weight:800;font-size:20px;letter-spacing:.5px;margin-bottom:6px;color:var(--text-primary);}
#modalBody{font-size:13px;color:var(--text-muted);margin-bottom:20px;line-height:1.5;}
.draft-mode-card{background:var(--field-bg);border:1px solid var(--border-medium);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;transition:all .15s;}
.draft-mode-card:hover{border-color:var(--gold-border);}
.draft-mode-card.disabled{opacity:0.4;cursor:not-allowed;}
.draft-mode-title{font-weight:700;font-size:14px;margin-bottom:4px;color:var(--text-primary);}
.draft-mode-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
.modal-btns{display:flex;gap:8px;margin-top:4px;}
.modal-btns .btn-main{margin-top:0;}
/* Modal-Buttons auf Gold (überschreibt die alten Volt-Klassen — nur innerhalb .modal) */
.modal .btn-main{padding:15px 24px;border-radius:16px;text-transform:none;font-family:'Saira';font-weight:700;font-size:15px;letter-spacing:.4px;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 4px 20px rgba(255,179,0,.18),0 0 40px rgba(255,179,0,.06),inset 0 1px 0 rgba(255,255,255,.25);}
.modal .btn-ghost{padding:14px;border-radius:14px;border:1px solid var(--border-medium);color:var(--text-secondary);font-family:'Saira';font-weight:700;font-size:14px;}
.modal .btn-ghost:hover{border-color:rgba(255,255,255,.12);color:var(--text-primary);}

/* BOTTOM NAV — Gold-Design (schwebende Pille) */
.bottom-nav{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 18px);max-width:414px;z-index:30;padding:10px 5px 12px;background:rgba(16,16,16,0.72);backdrop-filter:blur(32px) saturate(1.4);-webkit-backdrop-filter:blur(32px) saturate(1.4);border:1px solid rgba(255,255,255,0.05);border-radius:26px;box-shadow:0 -4px 24px rgba(0,0,0,0.3),0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.03);display:flex;justify-content:space-around;align-items:center;}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-label);cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .09s ease;position:relative;font-size:8.5px;font-weight:600;letter-spacing:.2px;text-transform:none;text-align:center;padding:9px 2px;border-radius:13px;-webkit-tap-highlight-color:transparent;}
.nav-item:hover{color:var(--text-muted);}
.nav-item:active{transform:scale(.92);}
.nav-item.active{color:var(--gold);background:rgba(255,179,0,.15);box-shadow:inset 0 0 0 1px rgba(255,179,0,.32);}
.nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.nav-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.nav-item.active .nav-icon svg{stroke-width:2.15;}
.nav-badge{position:absolute;top:-2px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--gold);border:1.5px solid rgba(16,16,16,0.9);box-shadow:0 0 8px rgba(255,179,0,0.5);}

/* TOAST */
/* top MUSS die Safe Area einrechnen: Auf dem iPad-Kompatibilitaetsfenster und
   auf iPhones mit Aussparung liegt die Statusleiste UEBER der WebView. Mit
   festen 16px schob sich die Einblendung unter Uhrzeit und Batterie.
   Gefunden von Tim am 19.08.2026 am iPad Air. */
/* Versteckt wird der Toast um seine EIGENE Hoehe plus seinen Abstand von
   oben — nicht um feste 100px. Auf einem iPhone 17 liegt seine Oberkante
   bei 16 + 59 = 75px, minus 100px blieben 15px sichtbar: nach jedem Toast
   klebte ein Streifen "Code kopiert!" dauerhaft neben der Dynamic Island
   (am 25.08.2026 im Simulator gefunden). */
.toast{position:fixed;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translate(-50%,calc(-100% - 16px - env(safe-area-inset-top) - 12px));background:linear-gradient(180deg,rgba(28,28,28,.98),rgba(18,18,18,.98));border:1px solid var(--border-medium);color:var(--text-primary);font-weight:600;font-size:13px;padding:11px 18px;border-radius:30px;z-index:200;transition:transform .3s cubic-bezier(.32,.72,0,1);display:flex;align-items:center;gap:8px;white-space:nowrap;box-shadow:0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,.05);pointer-events:none;}
.toast #toastIcon{display:flex;}
.toast.show{transform:translate(-50%,0);}

/* ══ KARTEN — Emblem-Leuchten (geteilt mit Mein-Spieler-Minikarte + Spieltag).
   Das ornamentierte Emblem (cardArtSVG) lebt weiter im Spieltag-Screen; das
   Karten-Grid selbst nutzt schlichte Icons (.card-visual, siehe oben). ══ */
.emblem{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center;}
.emblem::before{content:'';position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(180,255,58,.30) 0%,rgba(180,255,58,.10) 42%,transparent 70%);}
.fan-card.pflicht .emblem::before,.card-sheet-art.pflicht .emblem::before{background:radial-gradient(circle,rgba(255,194,77,.30) 0%,rgba(255,194,77,.10) 42%,transparent 70%);}
.emblem svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 0 5px rgba(180,255,58,.55));}
.fan-card.pflicht .emblem svg,.card-sheet-art.pflicht .emblem svg{filter:drop-shadow(0 0 5px rgba(255,194,77,.55));}
/* Detail-Sheet: großes Icon in kategorie-getönter Fläche (Angriff = Grün, Pflicht = Gold) */
.card-sheet-art{height:132px;flex:none;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 14px 34px rgba(0,0,0,.55);
  background:var(--green-bg);border:1px solid var(--green-border);}
.card-sheet-art.pflicht{background:var(--gold-bg);border:1px solid var(--gold-border);}
.card-sheet-art svg{width:96px;height:96px;filter:drop-shadow(0 0 7px rgba(74,222,128,.26));}
.card-sheet-art.pflicht svg{filter:drop-shadow(0 0 7px rgba(255,179,0,.3));}
/* Pflichtkarten-Erklaerblock — eigener, abgesetzter Kasten in Gold, damit die
   Sonderregeln nicht als weitere Meta-Zeile untergehen. Aus /design/karten-pilot. */
.pbox{margin:12px 0 4px;border:1px solid rgba(255,194,77,.34);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,194,77,.07),rgba(255,194,77,.02));padding:12px 13px 13px;}
.pbox-hd{display:flex;align-items:center;gap:8px;font-family:'Saira Condensed';font-weight:800;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);}
.pbox-hd svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.pbox-frist{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 2px;
  padding:8px 11px;border-radius:10px;background:rgba(255,194,77,.1);border:1px solid rgba(255,194,77,.22);}
.pbox-frist-l{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,194,77,.8);}
.pbox-frist-v{font-family:'Saira Condensed';font-weight:800;font-size:20px;color:var(--gold);line-height:1;}
.pbox-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.pbox-list li{position:relative;padding-left:14px;font-size:12px;line-height:1.5;color:var(--text);}
.pbox-list li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.7;}
.pbox-list b{color:var(--gold);font-weight:700;}
.pbox-tip{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,194,77,.16);font-size:11px;line-height:1.45;color:var(--text-m);}

/* ══ MEIN SPIELER — 1:1 aus /design/mein-spieler-pilot (Entwurf 5a) ══ */
.player-silhouette-wrap{display:none;}   /* Silhouette sitzt jetzt im Steckbrief */
.steckbrief{margin:0 0 2px;border-radius:18px;padding:2px;box-shadow:0 14px 34px rgba(0,0,0,.55);
  background:linear-gradient(165deg,#D8FF8A 0%,#B4FF3A 16%,#3E5A2E 46%,#1B231A 72%,#86C22E 100%);}
.steckbrief-in{position:relative;border-radius:16px;background:linear-gradient(180deg,#141C13,#0E120D);overflow:hidden;padding:16px;}
.sb-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.08) 46%,transparent 58%);}
.sb-top{position:relative;display:flex;gap:16px;align-items:center;}
.sb-silo{position:relative;flex:none;width:118px;display:flex;justify-content:center;}
.sb-glow{position:absolute;top:12px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(180,255,58,.16),transparent 70%);}
.sb-silo svg{position:relative;}
.sb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.sb-name{font-family:'Saira Condensed';font-weight:800;font-size:27px;letter-spacing:.02em;text-transform:uppercase;line-height:1;}
.sb-club{font-size:12.5px;color:var(--text-m);}
.sb-val{display:flex;align-items:baseline;gap:5px;margin-top:4px;}
.sb-val b{font-family:'Saira Condensed';font-weight:800;font-size:52px;line-height:.9;color:var(--cyan);}
.sb-val i{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-size:20px;color:var(--text-f);}
.sb-bar{height:5px;border-radius:3px;background:#1B231A;overflow:hidden;}
.sb-bar div{height:100%;background:linear-gradient(90deg,#4E8F2E,#B4FF3A);}
.sb-tags{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;}
.sb-tag{padding:3px 9px;border-radius:999px;background:var(--bg2);border:1px solid var(--border);font-size:10px;color:var(--text-m);}
/* Im Entwurf standen hier Kuerzel ("SGE – FCB"), die App zeigt die vollen
   Vereinsnamen aus der Datenbank — die passen nicht in eine Zeile neben das
   Label. Deshalb Label oben, Paarung darunter, mit Umbruch statt Abschnitt. */
.sb-next{position:relative;margin-top:14px;display:flex;flex-direction:column;gap:5px;border-top:1px solid #1B231A;padding-top:11px;cursor:pointer;}
.sb-next-r{font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
.sb-lbl{font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--text-f);flex:none;}

.mp-kstatus{margin:12px 0 0;display:flex;align-items:center;gap:13px;border-radius:14px;padding:11px 14px;cursor:pointer;
  background:linear-gradient(90deg,rgba(180,255,58,.09),transparent 65%),var(--bg2);border:1px solid #3E5A2E;box-shadow:0 0 22px rgba(180,255,58,.07);}
.mp-kstatus.open{background:var(--bg2);border:1px dashed #3A4536;box-shadow:none;}
.mp-kmini{flex:none;width:38px;height:53px;border-radius:6px;padding:1.5px;transform:rotate(-6deg);box-shadow:0 5px 12px rgba(0,0,0,.5);
  background:linear-gradient(165deg,#D8FF8A,#B4FF3A 30%,#3E5A2E 70%);}
.mp-kmini.pflicht{background:linear-gradient(165deg,#FFE3A8,#FFC24D 30%,#5A452E 70%);}
.mp-kmini-in{height:100%;border-radius:5px;background:linear-gradient(180deg,#141C13,#0E120D);display:flex;align-items:center;justify-content:center;}
.mp-kmini-in .emblem{width:30px;height:30px;}
.mp-kmini-in .emblem::before{display:none;}
.mp-kmini.locked{background:repeating-linear-gradient(-45deg,#141C13 0 5px,#0E120D 5px 10px);border:1.5px solid var(--border);padding:0;display:flex;align-items:center;justify-content:center;}
.mp-kmini.locked svg{width:16px;height:16px;}
.mp-ktxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mp-kname{font-family:'Saira Condensed';font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;}
.mp-kon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;}
.mp-dot{width:6px;height:6px;border-radius:50%;box-shadow:0 0 6px currentColor;}
.mp-kmuted{font-size:11px;font-weight:600;color:var(--text-f);}
.mp-kchev{width:14px;height:14px;flex:none;}

.mp-block2{margin:14px 0 0;border-radius:14px;background:var(--bg2);border:1px solid var(--border);padding:13px 14px;}
.mp-block2.last{margin-bottom:18px;}
.mp-block-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.mp-link{font-size:11px;font-weight:600;color:var(--cyan);cursor:pointer;}
.mp-feed-row{display:grid;grid-template-columns:40px 1fr auto;column-gap:10px;align-items:center;padding:8px 0;border-top:1px solid #161D15;}
.mp-feed-st{font-family:'Saira Condensed';font-weight:800;font-size:13px;color:var(--text-f);letter-spacing:.04em;}
.mp-feed-txt{font-size:12px;color:var(--text-s,#C7D3C2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-feed-pts{font-family:'Saira Condensed';font-weight:800;font-size:17px;}

.mp-form{margin:14px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mp-form-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.mp-form-chip{min-width:34px;padding:5px 8px;border-radius:999px;background:var(--bg2);border:1px solid var(--border);
  color:var(--text-f);font-family:'Saira Condensed';font-weight:800;font-size:11.5px;text-align:center;display:inline-flex;align-items:center;gap:4px;}
.mp-form-chip.hit{background:rgba(180,255,58,.12);border-color:#3E5A2E;color:var(--cyan);}
.mp-form-chip span{font-size:9px;opacity:.7;font-weight:700;}

.mp-slice{margin:14px 0 0;border-radius:14px;background:var(--bg2);border:1px solid var(--border);padding:8px 6px;}
.mp-excerpt-row{display:grid;grid-template-columns:26px 1fr auto;column-gap:8px;align-items:center;padding:7px 8px;border-radius:9px;margin-bottom:2px;background:transparent;border:1px solid transparent;}
.mp-excerpt-row.me{background:#18251A;border-color:#3E5A2E;}
.mp-excerpt-rank{font-family:'Saira Condensed';font-weight:800;font-size:15px;color:var(--text-f);text-align:center;}
.mp-excerpt-row.me .mp-excerpt-rank{color:var(--cyan);}
.mp-excerpt-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-excerpt-val{font-family:'Saira Condensed';font-weight:800;font-size:16px;}

.mp-inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.mp-inv{border-radius:10px;background:var(--bg2);border:1px solid var(--border);padding:8px 7px;display:flex;flex-direction:column;gap:3px;}
.mp-inv-dot{width:7px;height:7px;border-radius:50%;}
.mp-inv-n{font-size:9.5px;font-weight:600;line-height:1.15;color:var(--text-s,#C7D3C2);}
.mp-inv-c{font-family:'Saira Condensed';font-weight:800;font-size:12px;}


/* ══ LIGA-TABELLE — 1:1 aus /design/liga-pilot ("1a Flutlicht") ══ */
.dash-header{padding:20px 16px 0;}
.dash-logo-row{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 4px;}
.dash-logo{font-family:'Saira Condensed';font-weight:800;font-size:26px;letter-spacing:.04em;text-transform:uppercase;}
.user-av{width:38px;height:38px;border-radius:50%;border:1.5px solid #3E5A2E;background:var(--bg2);
  display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed';font-weight:700;font-size:14px;color:var(--cyan);cursor:pointer;}
.league-switcher{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
.sort-tabs{display:flex;gap:8px;margin:16px 16px 12px;overflow-x:auto;padding-bottom:2px;}
.sort-tabs::-webkit-scrollbar{display:none;}
.sort-tab{flex:0 0 auto;padding:9px 18px;border-radius:999px;border:1px solid var(--border);background:transparent;
  color:var(--text-m);font-family:'Saira';font-weight:500;font-size:12.5px;cursor:pointer;white-space:nowrap;}
.sort-tab.active{background:var(--cyan);color:var(--ink);border-color:var(--cyan);font-weight:700;letter-spacing:.02em;}
.table-wrap{padding:0 16px 90px;}
.p-row{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:10px 12px 12px;margin-bottom:10px;
  display:flex;flex-direction:column;gap:0;transition:transform .12s;}
.p-row.me{background:#18251A;border-color:#3E5A2E;}
.p-row-top{display:flex;align-items:center;gap:12px;}
.p-rank{font-family:'Saira Condensed';font-weight:800;font-size:20px;color:var(--text-f);width:20px;text-align:center;flex:0 0 auto;}
.p-row.me .p-rank,.p-row.r1 .p-rank{color:var(--cyan);}
.p-row.r2 .p-rank{color:#A8B4A4;}
.p-row.r3 .p-rank{color:#C98A3E;}
.mini-trikot{width:38px;height:38px;flex:0 0 auto;}
.p-info{flex:1;min-width:0;}
.p-name{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:7px;}
.p-name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.du-badge{background:var(--cyan);color:var(--ink);font-family:'Saira Condensed';font-weight:800;font-size:10px;
  letter-spacing:.04em;padding:1.5px 5px;border-radius:4px;flex:0 0 auto;}
.p-meta{font-size:12.5px;color:var(--text-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.p-right{text-align:right;flex:0 0 auto;}
.p-score{font-family:'Saira Condensed';font-weight:800;font-size:21px;line-height:1;}
.p-sub{font-size:9.5px;letter-spacing:.08em;color:var(--text-f);text-transform:uppercase;margin-top:2px;}
.p-bar{height:4px;border-radius:999px;background:#1E2A1B;margin-top:9px;overflow:hidden;}
.p-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#6FBF1F,var(--cyan));}
.p-row.r1 .p-bar-fill{background:linear-gradient(90deg,#C98A3E,var(--gold));}
.section-head{padding:0 2px;}
.section-title{font-family:'Saira Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-s,#C7D3C2);}
.sort-desc{font-size:12px;color:var(--text-m);margin:2px 2px 12px;}
.table-tagline{font-size:12px;color:var(--text-m);text-align:center;padding:14px 8px 4px;line-height:1.5;}


/* ══ SPIELTAG — 1:1 aus /design/spieltag-pilot ══ */
.fx-mine-lbl{font-family:'Saira Condensed';font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:8px 2px 9px;}
.fx-mine{border-radius:18px;padding:16px;margin-bottom:4px;
  background:radial-gradient(120% 120% at 50% 0%,rgba(180,255,58,.16),rgba(180,255,58,.03) 60%,transparent);
  border:1px solid rgba(180,255,58,.5);box-shadow:0 0 30px rgba(180,255,58,.12);}
.fx-mine-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fx-badge{background:var(--cyan);color:var(--ink);font-family:'Saira Condensed';font-weight:800;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
.fx-time{font-size:11.5px;color:var(--text-m);text-align:right;}
.fx-pair{display:flex;align-items:center;gap:10px;margin-top:15px;}
.fx-card .fx-pair{margin-top:0;}
.fx-side{flex:1;display:flex;align-items:center;gap:9px;min-width:0;}
.fx-side.away{justify-content:flex-end;}
/* Vereinsnamen stehen ungekuerzt (Join-Strings) — Umbruch statt Abschnitt. */
.fx-club{font-family:'Saira Condensed';font-weight:700;letter-spacing:.02em;line-height:1.1;overflow-wrap:anywhere;font-size:14.5px;}
.fx-mine .fx-club{font-weight:800;font-size:17px;}
.fx-vs{font-family:'Saira Condensed';font-weight:700;color:var(--text-f);flex:0 0 auto;font-size:13px;}
/* Spielstand statt Trennstrich, sobald angepfiffen ist */
/* Keine feste Mindestbreite: Vereinsnamen der 2. Liga sind lang ("SpVgg Greuther
   Fürth"), und .fx-club kuerzt mit Ellipse. Der Stand nimmt nur, was er braucht. */
.fx-score{font-family:'Saira Condensed';font-weight:800;font-size:19px;letter-spacing:.02em;
  color:var(--text-primary);flex:0 0 auto;padding:0 7px;text-align:center;line-height:1;
  font-variant-numeric:tabular-nums;}
.fx-mine .fx-score{font-size:23px;}
.fx-score.laeuft{color:var(--green);}
.fx-lauf{display:inline-flex;align-items:center;gap:5px;font-family:'Saira Condensed';font-weight:700;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);}
.fx-lauf::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 7px var(--green);animation:fxPuls 1.6s ease-in-out infinite;}
@keyframes fxPuls{0%,100%{opacity:1}50%{opacity:.35}}
.fx-ende{font-family:'Saira Condensed';font-weight:700;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-f);}
.fx-jersey{border-radius:7px;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.fx-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.05);}
.fx-mine .fx-chips{border-top-color:rgba(180,255,58,.16);margin-top:14px;padding-top:13px;}
.fx-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--border);}
.fx-chip.du{background:rgba(180,255,58,.12);border-color:rgba(180,255,58,.45);}
.fx-chip-ini{width:20px;height:20px;border-radius:50%;background:var(--cyan);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed';font-weight:800;font-size:9px;flex:none;}
.fx-chip-n{font-size:11px;font-weight:600;}
.fx-chip-s{font-size:8px;font-weight:700;letter-spacing:.06em;opacity:.6;}
.fx-grp{display:flex;align-items:center;gap:9px;margin:22px 2px 11px;color:var(--text-m);}
.fx-grp svg{width:14px;height:14px;flex:0 0 auto;}
.fx-grp-t{font-family:'Saira Condensed';font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto;}
.fx-grp-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent);}
.fx-list{display:flex;flex-direction:column;gap:9px;}
.fx-card{position:relative;overflow:hidden;border-radius:15px;padding:14px;
  background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);}
.fx-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(128deg,transparent 34%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.02) 54%,transparent 66%);}
.fx-card>*{position:relative;}
.fx-open{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.03);border:1px dashed #3A4A32;font-size:10.5px;color:var(--text-m);}

/* Kartenuebersicht */
.mc-hint{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;background:rgba(255,194,77,.06);border:1px solid rgba(255,194,77,.28);margin-bottom:18px;}
.mc-hint svg{width:16px;height:16px;flex:0 0 auto;}
.mc-hint span{font-size:11.5px;color:#E6D2A6;line-height:1.4;}
.mc-mine{position:relative;overflow:hidden;border-radius:18px;padding:16px;
  background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid rgba(180,255,58,.45);
  box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 26px rgba(180,255,58,.14);}
.mc-mine.pflicht{background:linear-gradient(168deg,#241E14 0%,#1A160F 52%,#12100A 100%);border-color:rgba(255,194,77,.45);}
.mc-mine-in{position:relative;display:flex;align-items:center;gap:14px;}
.mc-kat{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid currentColor;}
.mc-name{font-family:'Saira Condensed';font-weight:800;font-size:21px;letter-spacing:.02em;text-transform:uppercase;margin-top:8px;}
.mc-eff{font-size:12px;color:var(--text-m);margin-top:4px;line-height:1.4;}
.mc-sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 11px;}
.mc-sec-n{font-size:11px;color:var(--text-f);}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-bottom:20px;}
.mc-hidden{position:relative;overflow:hidden;border-radius:16px;height:172px;border:1px solid var(--border);
  background:linear-gradient(158deg,#18211502,#0D120B),repeating-linear-gradient(135deg,#12180F 0 9px,#0F140C 9px 18px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mc-hidden-em{width:52px;height:52px;position:relative;display:flex;align-items:center;justify-content:center;}
.mc-hidden-em svg{width:100%;height:100%;opacity:.5;}
.mc-hidden-em svg.lock{position:absolute;width:22px;height:22px;opacity:1;}
.mc-hidden-l{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-f);margin-top:11px;}
.mc-who{display:flex;align-items:center;gap:7px;margin-top:14px;}
.mc-rc .mc-who{margin-top:0;}
.mc-who-ini{width:22px;height:22px;border-radius:50%;background:var(--cyan);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed';font-weight:800;font-size:10px;flex:none;}
.mc-who-n{font-size:12px;font-weight:600;color:var(--text-s,#C7D3C2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-reveal{position:relative;overflow:hidden;border-radius:18px;padding:18px 16px;text-align:center;
  background:radial-gradient(120% 130% at 50% 0%,rgba(180,255,58,.18),rgba(180,255,58,.03) 60%,transparent);
  border:1px solid rgba(180,255,58,.5);box-shadow:0 0 34px rgba(180,255,58,.16);animation:mcPop .5s cubic-bezier(.2,.9,.3,1) both;}
@keyframes mcPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mc-reveal-k{font-family:'Saira Condensed';font-weight:800;font-size:11px;letter-spacing:.2em;color:var(--cyan);}
.mc-reveal-h{font-family:'Saira Condensed';font-weight:800;font-size:28px;letter-spacing:.03em;text-transform:uppercase;margin-top:4px;}
.mc-reveal-s{font-size:12px;color:var(--text-m);margin-top:4px;}
.mc-rc{position:relative;overflow:hidden;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid rgba(180,255,58,.35);box-shadow:0 14px 34px rgba(0,0,0,.55);}
.mc-rc.pflicht{background:linear-gradient(168deg,#241E14 0%,#1A160F 52%,#12100A 100%);border-color:rgba(255,194,77,.35);}
.mc-rc.none{background:var(--bg2);border:1px dashed var(--border);box-shadow:none;}
.mc-rc-em{height:76px;display:flex;align-items:center;justify-content:center;}
.mc-rc-em svg{width:74px;height:74px;}
.mc-rc-name{font-family:'Saira Condensed';font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase;text-align:center;line-height:1.1;}
.mc-none{height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.mc-none svg{width:26px;height:26px;}
.mc-none span{font-size:10.5px;color:var(--text-f);}
#matchdayBody{padding:0 16px 90px;}


/* Alte Draft-Pilot-CSS (dr-hero/dr-stats/order-*/feed-* etc.) entfernt —
   Draft läuft jetzt komplett über die gekapselten #screen-draft-Regeln. */


/* ══ GLANZLICHTER — exakt wie in den Piloten. Der Sheen liegt dort auf jedem
   hochwertigen Container, nicht nur auf den Spielkarten: Match-Karten,
   Reveal-Kacheln, Spielerkarten im Draft, Admin-Konsole und Hero-Bereich.
   Ohne ihn wirken die Flaechen flach — genau das war Tims Kritik. ══ */
.fx-card-item::after,.pcard::after,.admin-panel::after,.dr-hero::after,
.card-sheet-art::after,.mp-kstatus::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(128deg,transparent 34%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.02) 54%,transparent 66%);}
.fx-card-item>*,.pcard>*,.admin-panel>*,.dr-hero>*,.mp-kstatus>*{position:relative;z-index:1;}
.mp-kstatus{position:relative;overflow:hidden;}
.card-sheet-art{position:relative;overflow:hidden;}


/* ══ PROFIL — aus /design/profil-pilot ══════════════════════════════════ */
.profile-wrap{padding:0 16px 100px;}
/* Panels tragen Verlauf und Schatten wie .panel im Piloten */
.profile-card{position:relative;overflow:hidden;border-radius:16px;padding:16px;margin-bottom:11px;
  background:linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);border:1px solid var(--border);box-shadow:0 14px 34px rgba(0,0,0,.55);}
/* Die erste Karte ist die Profilkarte — mit Volt-Schimmer wie .me im Piloten */
.profile-wrap>.profile-card:first-child{border-radius:18px;padding:18px;
  background:radial-gradient(120% 130% at 12% 0%,rgba(180,255,58,.15),transparent 55%),linear-gradient(168deg,#1B2418 0%,#131A12 52%,#0E140D 100%);
  border-color:rgba(180,255,58,.32);}
.profile-card::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(128deg,transparent 34%,rgba(255,255,255,.07) 46%,rgba(255,255,255,.02) 54%,transparent 66%);}
.profile-card>*{position:relative;z-index:1;}
/* Abschnittsueberschriften mit Volt-Strich davor */
.profile-wrap .topbar-title,.profile-section{display:flex;align-items:center;gap:8px;margin:26px 2px 12px;
  font-family:'Saira Condensed';font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-s,#C7D3C2);}
.profile-section::before{content:'';width:3px;height:14px;border-radius:2px;background:var(--cyan);display:block;}
.rules-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;}
.rules-h{font-family:'Saira Condensed';font-weight:700;font-size:15px;letter-spacing:.02em;}
.rules-p{font-size:12.5px;line-height:1.6;color:var(--text-s,#C7D3C2);margin-top:12px;}
.rules-chevron{transition:transform .22s;color:var(--text-m);}
/* Eingabefelder wie im Piloten: dunkler Feldgrund, Volt beim Fokus */
.field label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-f);display:block;margin-bottom:9px;}
.field input,.field textarea,#feedbackText,#joinCodeInput,#createLeagueName{
  width:100%;background:#0B0F09;border:1px solid var(--border);border-radius:12px;padding:13px 14px;
  color:var(--text);font-family:'Saira';font-size:14px;outline:none;transition:border-color .15s,background .15s;}
.field input:focus,.field textarea:focus,#feedbackText:focus,#joinCodeInput:focus,#createLeagueName:focus{
  border-color:rgba(180,255,58,.55);background:#0E140C;}
.field input::placeholder,textarea::placeholder{color:var(--text-f);}
/* Buttons: Primaer voll in Volt mit Verlauf, Ghost als Outline */
.btn-main{width:100%;padding:16px;border-radius:14px;border:none;text-transform:uppercase;
  background:linear-gradient(180deg,#C6FF52,#9BE22B);color:var(--ink);
  font-family:'Saira Condensed';font-weight:800;font-size:16px;letter-spacing:.06em;
  cursor:pointer;box-shadow:0 12px 28px rgba(180,255,58,.22);margin-top:8px;}
.btn-ghost{width:100%;padding:13px;border-radius:14px;border:1px solid var(--border);background:transparent;
  color:var(--text-m);font-family:'Saira';font-weight:700;font-size:14px;cursor:pointer;margin-top:8px;}
.btn-ghost:hover{border-color:#3A4A32;color:var(--text-s,#C7D3C2);}

/* ══ LOGIN — aus /design/login-pilot ════════════════════════════════════ */
.auth-wrap{position:relative;padding:104px 26px 40px;display:flex;flex-direction:column;min-height:100vh;overflow:hidden;
  background:radial-gradient(120% 45% at 50% -6%, #16301C 0%, #000000 56%);}
/* Flutlicht-Kegel und Lampenreihe */
.auth-wrap::before{content:'';position:absolute;top:-130px;left:-50px;width:230px;height:540px;
  background:linear-gradient(180deg,rgba(180,255,58,.16),transparent 70%);transform:rotate(23deg);filter:blur(30px);pointer-events:none;}
.auth-wrap::after{content:'';position:absolute;top:-130px;right:-50px;width:230px;height:540px;
  background:linear-gradient(180deg,rgba(180,255,58,.10),transparent 70%);transform:rotate(-23deg);filter:blur(30px);pointer-events:none;}
.auth-wrap>*{position:relative;z-index:1;}
/* Die 99 als Wasserzeichen — das Spielziel im Hintergrund */
.auth-watermark{position:absolute;top:150px;left:0;right:0;text-align:center;z-index:0;
  font-family:'Saira Condensed';font-weight:800;font-size:320px;line-height:1;
  color:rgba(180,255,58,.04);pointer-events:none;user-select:none;}
.auth-lamps{position:absolute;top:20px;left:0;right:0;display:flex;justify-content:space-between;padding:0 26px;pointer-events:none;z-index:1;}
.auth-lamps div{display:flex;gap:5px;}
.auth-lamps i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);display:block;}
.auth-logo{text-align:center;text-shadow:0 0 40px rgba(180,255,58,.25);margin-bottom:0;}
.auth-sub{text-align:center;font-size:13px;color:var(--text-m);margin:14px 0 34px;line-height:1.5;}
.auth-sub b{color:var(--cyan);font-weight:600;}
/* Umschalter als Pill-Paar wie im Piloten */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--border);margin-bottom:24px;}
.tab{flex:1;padding:11px 0;border-radius:999px;border:none;background:transparent;color:var(--text-m);
  font-family:'Saira Condensed';font-weight:800;font-size:15px;letter-spacing:.06em;cursor:pointer;text-transform:uppercase;}
.tab.active{background:var(--cyan);color:var(--ink);}
.invite-info{display:flex;align-items:center;gap:13px;border-radius:14px;padding:13px 15px;margin-bottom:26px;
  background:linear-gradient(90deg,rgba(180,255,58,.12),transparent 70%),var(--bg2);
  border:1px solid #3E5A2E;box-shadow:0 0 24px rgba(180,255,58,.08);font-size:13.5px;color:var(--text);}

/* ══════════ GOLD: geteilte Empty-States (global) ══════════ */
.msg-card{background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-radius:18px;padding:28px;text-align:center;margin:8px 0 14px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.msg-icon{margin-bottom:12px;display:flex;justify-content:center;color:var(--text-muted);}
.msg-title{font-family:'Saira Condensed';font-weight:800;font-size:20px;letter-spacing:.03em;margin-bottom:6px;color:var(--text-primary);}
.msg-sub{font-size:13px;color:var(--text-muted);line-height:1.5;}
.empty-state-link{color:var(--gold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-weight:600;}

/* ══════════ GOLD: LIGA-TABELLE (screen-dash) ══════════ */
#screen-dash .scroll{padding-bottom:calc(var(--nav-raum) + env(safe-area-inset-bottom));}
#screen-dash .dash-head{padding:max(52px,calc(env(safe-area-inset-top) + 20px)) 20px 4px;}
#screen-dash .dash-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
#screen-dash .dash-head-titles{min-width:0;}
#screen-dash .dash-h1{font-family:'Saira Condensed',sans-serif;font-size:30px;font-weight:800;letter-spacing:1px;line-height:1.05;background:linear-gradient(180deg,#FFFFFF 0%,#BFBFBF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#screen-dash .dash-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}
#screen-dash .user-menu{position:relative;flex:0 0 auto;}
#screen-dash .user-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:15px;color:#0A0A0A;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);box-shadow:0 0 18px rgba(255,179,0,.22),0 4px 12px rgba(0,0,0,.3);cursor:pointer;border:none;}
#screen-dash .user-av.gold{box-shadow:0 0 22px rgba(255,179,0,.4),0 0 0 2px rgba(255,213,79,.55),0 4px 12px rgba(0,0,0,.3);}
#screen-dash .user-dropdown{position:absolute;top:46px;right:0;background:linear-gradient(180deg,var(--bg-card-top) 0%,var(--bg-card-bottom) 100%);border:1px solid var(--border-medium);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.5);min-width:180px;padding:6px;z-index:60;display:none;}
#screen-dash .user-dropdown.show{display:block;}
#screen-dash .user-dropdown-mail{padding:8px 12px 10px;font-size:11px;color:var(--text-dim);border-bottom:1px solid var(--border-subtle);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-dash .user-dropdown-item{padding:10px 12px;font-size:13px;color:var(--text-secondary);border-radius:9px;cursor:pointer;transition:background .15s;}
#screen-dash .user-dropdown-item:hover{background:rgba(255,255,255,.04);color:var(--text-primary);}
#screen-dash .user-dropdown-item.danger{color:var(--undo);}
#screen-dash .league-switcher{margin:12px 20px 0;background:var(--field-bg);border-color:var(--border-medium);}
/* Frist-Leiste: erscheint nur am Spieltag selbst, solange die Karten offen
   sind. Der Liga-Tab ist der Screen nach dem Login — wer nie in die Karten
   schaut, sieht die Frist sonst nirgends. */
#screen-dash .frist-leiste{margin:12px 20px 0;padding:12px 14px;border-radius:14px;display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--gold-bg);border:1px solid var(--gold-border);transition:transform .15s var(--ease);}
#screen-dash .frist-leiste:active{transform:scale(.99);}
#screen-dash .frist-leiste svg{width:20px;height:20px;flex:none;color:var(--gold);}
#screen-dash .frist-leiste .fl-text{flex:1;min-width:0;}
#screen-dash .frist-leiste .fl-title{font-family:'Saira Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--text-primary);}
#screen-dash .frist-leiste .fl-sub{font-size:11px;font-weight:500;color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#screen-dash .frist-leiste .fl-rest{flex:none;font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap;}
#screen-dash .frist-leiste.ok{background:var(--green-bg);border-color:var(--green-border);}
#screen-dash .frist-leiste.ok svg,#screen-dash .frist-leiste.ok .fl-rest{color:var(--green);}
#screen-dash .league-switch-label{font-size:12px;color:var(--text-secondary);font-weight:600;padding:2px 0;}
#screen-dash .league-switch-select{width:100%;padding:10px 36px 10px 12px;border-radius:12px;border:1px solid var(--border-medium);background:var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFB300' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:16px;color:var(--text-primary);font-family:'Saira';font-size:12px;font-weight:600;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
/* Podium */
#screen-dash .podium-section{padding:18px 20px 4px;}
#screen-dash .podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;min-height:150px;}
#screen-dash .podium-item{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;max-width:100px;}
#screen-dash .podium-avatar-wrap{position:relative;}
#screen-dash .podium-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.04em;position:relative;z-index:1;}
#screen-dash .podium-item.first .podium-avatar{width:54px;height:54px;font-size:19px;}
#screen-dash .podium-avatar.gold{background:linear-gradient(135deg,rgba(255,179,0,.18),rgba(255,179,0,.05));border:2px solid rgba(255,179,0,.35);color:var(--gold);}
#screen-dash .podium-avatar.silver{background:linear-gradient(135deg,rgba(200,200,200,.15),rgba(200,200,200,.05));border:2px solid rgba(200,200,200,.3);color:#C8C8C8;}
#screen-dash .podium-avatar.bronze{background:linear-gradient(135deg,rgba(205,127,50,.15),rgba(205,127,50,.05));border:2px solid rgba(205,127,50,.3);color:#CD7F32;}
#screen-dash .podium-avatar.empty{background:rgba(255,255,255,.02);border:2px dashed var(--border-medium);color:var(--text-label);}
#screen-dash .podium-avatar.you-ring{box-shadow:0 0 0 2px var(--green),0 0 16px rgba(74,222,128,.3);}
#screen-dash .podium-crown{position:absolute;top:-13px;left:50%;transform:translateX(-50%);width:22px;height:22px;z-index:2;}
#screen-dash .podium-crown svg{width:100%;height:100%;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke:var(--gold);filter:drop-shadow(0 0 4px rgba(255,179,0,.3));}
/* max-width:100% statt fester 92px: Stuermernamen sind laenger als Kontonamen
   ("Jonathan Burkardt" wurde um 4px abgeschnitten). Der Platz ist ohnehin durch
   .podium-item (100px) begrenzt, die 10px Abstand zwischen den Plaetzen bleiben. */
#screen-dash .podium-name{font-size:11.5px;font-weight:600;letter-spacing:-.02em;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);}
/* Zweite Zeile auf dem Treppchen: der Mitspieler unter seinem Stuermer.
   Die gap des podium-item ist 7px — fuer die eng zusammengehoerenden Namen
   zu viel, deshalb der negative Rand. */
#screen-dash .podium-sub{margin-top:-5px;font-size:9.5px;letter-spacing:.02em;text-align:center;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-label);}
#screen-dash .podium-sub.you{color:var(--green);font-weight:700;}
#screen-dash .podium-points{font-family:'Saira Condensed',sans-serif;font-size:19px;font-weight:900;letter-spacing:.3px;}
#screen-dash .podium-item.first .podium-points{color:var(--gold);}
#screen-dash .podium-item.second .podium-points{color:#C8C8C8;}
#screen-dash .podium-item.third .podium-points{color:#CD7F32;}
#screen-dash .podium-base{width:100%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-bottom:none;box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed',sans-serif;font-size:22px;font-weight:800;color:rgba(255,255,255,.08);}
#screen-dash .podium-item.first .podium-base{height:56px;}
#screen-dash .podium-item.second .podium-base{height:42px;}
#screen-dash .podium-item.third .podium-base{height:32px;}
/* Sort-Tabs */
#screen-dash .g-sort-tabs{display:flex;gap:6px;padding:10px 20px 2px;overflow-x:auto;scrollbar-width:none;}
#screen-dash .g-sort-tabs::-webkit-scrollbar{display:none;}
#screen-dash .g-sort-tab{flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid var(--border-medium);background:transparent;color:var(--text-dim);font-family:'Saira';font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease;}
#screen-dash .g-sort-tab.active{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border);font-weight:700;}
/* Section-Label + Desc */
#screen-dash .g-section-label{display:flex;align-items:center;gap:8px;padding:16px 20px 0;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);}
#screen-dash .g-section-label::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-mid) 100%);border-radius:2px;flex-shrink:0;}
#screen-dash .g-sort-desc{font-size:11px;color:var(--text-dim);padding:6px 20px 0;line-height:1.4;}
/* Tabellen-Zeilen */
#screen-dash .table-section{padding:12px 20px 0;}
#screen-dash #tableRows{display:flex;flex-direction:column;gap:8px;}
#screen-dash .g-row{background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-radius:14px;padding:10px 14px 12px;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s ease;position:relative;overflow:hidden;}
#screen-dash .g-row.no-striker{opacity:.62;}
#screen-dash .g-row.you{border-color:var(--green-border);background:linear-gradient(180deg,rgba(74,222,128,.05) 0%,var(--bg-card-alt-bottom) 100%);box-shadow:0 0 24px rgba(74,222,128,.05),0 2px 8px rgba(0,0,0,.2);}
#screen-dash .g-row.you::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);}
#screen-dash .g-row:active{transform:scale(.995);}
#screen-dash .g-row-main{display:grid;grid-template-columns:24px 34px 1fr auto;gap:10px;align-items:center;}
#screen-dash .g-rank{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:800;color:var(--text-label);text-align:center;}
#screen-dash .g-row.top1 .g-rank{color:var(--gold);}
#screen-dash .g-row.top2 .g-rank{color:#C8C8C8;}
#screen-dash .g-row.top3 .g-rank{color:#CD7F32;}
#screen-dash .g-row.you .g-rank{color:var(--green);}
#screen-dash .g-trikot{width:34px;height:34px;flex:0 0 auto;}
#screen-dash .g-info{min-width:0;}
#screen-dash .g-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;font-weight:600;color:var(--text-secondary);}
#screen-dash .g-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#screen-dash .g-row.you .g-name{color:var(--text-primary);}
#screen-dash .g-you{font-size:9px;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.8px;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.15);padding:1px 8px;border-radius:100px;flex:0 0 auto;}
/* Seit 17.08. steht oben der Stuermer und darunter, kleiner, der Mitspieler:
   In einer Fantasy-Tabelle sucht das Auge den Spieler, nicht den Kontonamen.
   Das "Du"-Abzeichen ist mitgewandert — es gehoert zur Person, nicht zum Stuermer. */
#screen-dash .g-striker{display:flex;align-items:center;gap:5px;min-width:0;font-size:10.5px;color:var(--text-label);margin-top:2px;}
#screen-dash .g-striker>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#screen-dash .g-row.you .g-striker{color:var(--text-secondary);}
#screen-dash .g-striker .g-you{font-size:8.5px;padding:0 6px;}
#screen-dash .g-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;}
#screen-dash .g-score{font-family:'Saira Condensed',sans-serif;font-size:18px;font-weight:800;color:var(--text-primary);line-height:1;}
#screen-dash .g-row.you .g-score{color:var(--green);}
#screen-dash .g-score-sub{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-top:3px;}
#screen-dash .g-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.05);margin-top:10px;overflow:hidden;}
#screen-dash .g-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 100%);}
#screen-dash .g-row.top1 .g-bar-fill{background:linear-gradient(90deg,var(--gold) 0%,var(--gold-light) 100%);}
#screen-dash .g-row.you .g-bar-fill{background:linear-gradient(90deg,var(--green-dark) 0%,var(--green) 100%);}
/* ══════════ LIVE-ZUWACHS IN DER TABELLE (Entwurf C, 31.08.) ══════════ */
/* Solange der Spieltag laeuft, steht neben dem Wert, was gerade dazukam.
   Mit dem letzten Abpfiff geht der Zuwachs in den Wert ueber und verschwindet —
   die Bedingung dafuer ist matchday_phase().phase==='spieltag'. */
/* Die Rangspalte traegt jetzt Pfeil UND Ziffer. Sie behaelt ihre Breite auch
   ohne Pfeil, sonst wackelt die ganze Spalte, sobald einer sich bewegt. */
/* Die breitere Rangspalte gilt NUR waehrend des Spieltags. An allen anderen
   Tagen steht die Tabelle exakt so da wie bisher — der Platz fuer den Pfeil
   wird erst reserviert, wenn es ueberhaupt Bewegung geben kann. */
#screen-dash #tableRows.spieltag-live .g-row-main{grid-template-columns:37px 34px 1fr auto auto;}
#screen-dash .g-rank{display:flex;align-items:center;justify-content:flex-end;gap:2px;}
#screen-dash .g-pfeil{width:13px;flex:none;display:flex;align-items:center;justify-content:center;gap:1px;}
#screen-dash .g-pfeil svg{width:8px;height:8px;}
#screen-dash .g-pfeil .n{font-family:'Saira Condensed',sans-serif;font-size:8.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
#screen-dash .g-pfeil.hoch{color:var(--green);}
/* Runter bewusst gedaempft statt rot: ueberholt zu werden ist kein Fehler, und
   Rot heisst in der App "zurueckgenommen". Gruen bleibt die einzige Farbe, die
   sagt "hier ist gerade etwas passiert". */
#screen-dash .g-pfeil.runter{color:var(--text-dim);}
/* Der Zuwachs-Chip. Farbe folgt der WIRKUNG, nicht der Karte — dieselbe Regel
   wie im Spieltag-Tab: gruen gezaehlt, blau von einer Karte veraendert, gold
   von einer Pflichtkarte getilgt. Der Entwurf hatte hier noch Gold fuer
   "veraendert"; damit sah der Auswaertsheld nach einer Strafe aus. */
#screen-dash .g-delta{align-self:center;font-family:'Saira Condensed',sans-serif;font-size:11px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;padding:2px 7px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
#screen-dash .g-delta svg{width:13px;height:13px;flex:none;}
#screen-dash .g-delta.plus{color:var(--green);background:rgba(74,222,128,.09);}
#screen-dash .g-delta.karte{color:var(--blue);background:rgba(91,141,184,.10);border-color:rgba(91,141,184,.42);}
#screen-dash .g-delta.getilgt{color:var(--gold);background:var(--gold-bg);border-color:var(--gold-border);}
/* Der Strich rot, nicht in der Chipfarbe: gold auf gold ist bei 11px derselbe
   Ton wie die Ziffern und liest sich nicht als Streichung. Der Chip bleibt
   gold (Tims Entscheidung vom 30.08.) — nur der Strich hebt sich ab. */
#screen-dash .g-delta.getilgt .zahl{text-decoration:line-through;text-decoration-thickness:1.6px;text-decoration-color:#FF7A84;}
@media (prefers-reduced-motion:no-preference){
  #screen-dash .g-delta.frisch{animation:zuwachsAufblitzen 1.8s ease-out;}
  @keyframes zuwachsAufblitzen{0%{transform:scale(1)}18%{transform:scale(1.18)}100%{transform:scale(1)}}
}
#screen-dash .table-tagline{padding:14px 8px 4px;text-align:center;font-size:11.5px;color:var(--text-muted);line-height:1.5;}

/* ══════════ GOLD: APP-HINWEIS (mobiles Web) ══════════ */
/* Ganzseitige Einblendung, wenn die Web-App am Handy im Browser geoeffnet wird.
   Im nativen Wrapper wird sie nie gezeigt — dort waebe die App fuer sich selbst. */
#appHinweis{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;background:var(--bg);}
#appHinweis.show{display:flex;}
#appHinweis .ah-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px 28px calc(32px + env(safe-area-inset-bottom));text-align:center;}
#appHinweis .ah-logo{width:88px;height:88px;border-radius:22px;margin-bottom:6px;filter:drop-shadow(0 0 34px rgba(255,179,0,.18));}
#appHinweis .ah-title{font-family:'Saira Condensed',sans-serif;font-size:26px;font-weight:800;letter-spacing:.6px;line-height:1.15;color:var(--text-primary);}
#appHinweis .ah-sub{font-size:13.5px;font-weight:500;color:var(--text-muted);line-height:1.5;max-width:300px;}
#appHinweis .ah-btn{width:100%;max-width:340px;margin-top:20px;padding:16px 24px;border-radius:16px;border:none;font-family:'Saira';font-size:15px;font-weight:700;letter-spacing:.4px;cursor:pointer;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 4px 20px rgba(255,179,0,.18),inset 0 1px 0 rgba(255,255,255,.25);}
#appHinweis .ah-btn:active{transform:scale(.99);}
#appHinweis .ah-weiter{margin-top:4px;padding:12px 18px;background:none;border:none;font-family:'Saira';font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--text-dim);cursor:pointer;}
#appHinweis .ah-weiter:active{color:var(--text-secondary);}

/* Gleiches Problem wie beim Toast: Der Balken lief unter die Statusleiste.
   Bei voller Breite ist ein Innenabstand richtig, kein Versatz — so reicht
   die Flaeche bis zur Kante, der Text beginnt aber unterhalb der Uhr. */
#offlineBar{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top);z-index:1200;display:none;
  padding:calc(env(safe-area-inset-top) + 7px) 16px 7px;text-align:center;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;color:#0A0A0A;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);
  box-shadow:0 2px 14px rgba(0,0,0,.45);}
#offlineBar.show{display:block;}

/* ══════════ GOLD: START (screen-boot) ══════════ */
/* Neutraler Ladezustand beim App-Start. Vorher stand hier der Login-Screen —
   der blitzte bei eingeloggten Nutzern ~3 s auf, bis getUser() aus dem Netz
   zurueckkam, und behauptete solange das Gegenteil vom wahren Zustand. */
#screen-boot .boot-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:0 28px;}
#screen-boot .boot-mark{font-family:'Saira Condensed',sans-serif;font-size:34px;font-weight:800;letter-spacing:2px;line-height:1;}
#screen-boot .b-fan{color:var(--text-primary);}
#screen-boot .b-tasy{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#screen-boot .boot-bar{width:118px;height:2px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;}
#screen-boot .boot-bar span{display:block;width:38%;height:100%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:bootSlide 1.15s ease-in-out infinite;}
@keyframes bootSlide{from{transform:translateX(-110%)}to{transform:translateX(370%)}}
@media (prefers-reduced-motion:reduce){#screen-boot .boot-bar span{animation:none;opacity:.45;}}

/* ══════════ GOLD: LOGIN (screen-auth) ══════════ */
/* Der Login-Bildschirm MUSS scrollen koennen. .app steht auf overflow:hidden und
   .screen auf fester Hoehe (100dvh) — passt der Inhalt nicht, wird er sonst
   abgeschnitten und ist mit keiner Geste erreichbar.
   Gemessen am 19.08.2026: bei 375x667 (iPhone SE) liegt der Knopf
   "Konto erstellen & beitreten" 59 px unter der Kante, die AGB-Zeile 55 px.
   Auf dem iPad-Kompatibilitaetsfenster dasselbe Bild — und Apple prueft auf
   einem iPad Air. Ein Wischversuch markierte dort Text, statt zu scrollen. */
#screen-auth{overflow-y:auto;-webkit-overflow-scrolling:touch;}
#screen-auth .auth-wrap{padding:env(safe-area-inset-top) 28px 32px;display:flex;flex-direction:column;min-height:100%;flex:0 0 auto;background:none;}
#screen-auth .auth-wrap::before,#screen-auth .auth-wrap::after{content:none;display:none;}
#screen-auth .auth-logo-sec{padding-top:64px;padding-bottom:32px;display:flex;flex-direction:column;align-items:center;gap:10px;}
#screen-auth .auth-logo-mark{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,rgba(255,179,0,.12),rgba(255,179,0,.04));border:1px solid rgba(255,179,0,.15);display:flex;align-items:center;justify-content:center;margin-bottom:4px;box-shadow:0 0 24px rgba(255,179,0,.08);}
#screen-auth .auth-logo-mark svg{width:28px;height:28px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-auth .auth-logo-img{width:104px;height:104px;display:block;margin-bottom:4px;filter:drop-shadow(0 0 34px rgba(255,179,0,.16));}
#screen-auth .auth-logo-text{font-family:'Saira Condensed',sans-serif;font-size:34px;font-weight:800;letter-spacing:2px;line-height:1;}
#screen-auth .lg-fan{color:var(--text-primary);}
#screen-auth .lg-tasy{background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#screen-auth .auth-logo-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.4px;text-align:center;line-height:1.4;}
#screen-auth .invite-info{background:linear-gradient(180deg,rgba(91,141,184,.06) 0%,rgba(91,141,184,.02) 100%);border:1px solid rgba(91,141,184,.12);border-radius:16px;padding:14px 16px;margin-bottom:22px;display:flex;align-items:flex-start;gap:12px;box-shadow:none;}
#screen-auth .invite-info.hidden{display:none;}
#screen-auth .invite-icon{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(91,141,184,.08);border:1px solid rgba(91,141,184,.15);}
#screen-auth .invite-icon svg{width:16px;height:16px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-auth .invite-title{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:2px;}
#screen-auth .invite-desc{font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.4;}
#screen-auth .tabs{display:flex;gap:6px;margin-bottom:22px;background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:14px;padding:4px;}
#screen-auth .tab{flex:1;padding:10px 0;border-radius:10px;border:none;font-family:'Saira';font-size:13px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:all .25s var(--ease);background:transparent;color:var(--text-dim);}
#screen-auth .tab.active{background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 2px 12px rgba(255,179,0,.2),inset 0 1px 0 rgba(255,255,255,.25);}
#screen-auth .auth-error{display:none;background:linear-gradient(180deg,rgba(239,68,68,.1) 0%,rgba(239,68,68,.04) 100%);border:1px solid var(--undo-border);border-radius:12px;padding:11px 14px;font-size:12.5px;font-weight:500;color:#FCA5A5;margin-bottom:16px;}
#screen-auth .auth-error.show{display:block;}
#screen-auth .form-group{margin-bottom:16px;}
#screen-auth .form-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-label);margin-bottom:8px;}
#screen-auth .input-wrap{position:relative;}
#screen-auth .form-input{width:100%;padding:14px 16px 14px 44px;background:var(--field-bg);border:1px solid var(--border-subtle);border-radius:14px;font-family:'Saira';font-size:14px;font-weight:500;color:var(--text-primary);outline:none;transition:all .2s ease;}
#screen-auth #lPw,#screen-auth #rPw{padding-right:44px;}
#screen-auth .form-input::placeholder{color:var(--text-dim);font-weight:400;}
#screen-auth .form-input:focus{background:rgba(255,255,255,.05);border-color:rgba(255,179,0,.25);box-shadow:0 0 0 3px rgba(255,179,0,.06);}
#screen-auth .input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--text-dim);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .2s ease;}
#screen-auth .form-input:focus ~ .input-icon{stroke:var(--gold);}
#screen-auth .toggle-pass{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;cursor:pointer;background:none;border:none;padding:0;}
#screen-auth .toggle-pass svg{width:18px;height:18px;stroke:var(--text-dim);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease;}
#screen-auth .toggle-pass:hover svg{stroke:var(--text-secondary);}
#screen-auth .input-hint{font-size:10px;font-weight:500;color:var(--text-label);margin-top:6px;margin-left:4px;}
#screen-auth .btn-main{width:100%;padding:16px 24px;border-radius:16px;border:none;font-family:'Saira';font-size:15px;font-weight:700;letter-spacing:.4px;text-transform:none;cursor:pointer;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 4px 20px rgba(255,179,0,.18),0 0 40px rgba(255,179,0,.06),inset 0 1px 0 rgba(255,255,255,.25);transition:all .25s var(--ease);margin-top:8px;}
#screen-auth .btn-main:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(255,179,0,.25),0 0 50px rgba(255,179,0,.1),inset 0 1px 0 rgba(255,255,255,.3);}
#screen-auth .btn-main:active{transform:translateY(0) scale(.99);}
#screen-auth .btn-main:disabled{opacity:.5;cursor:not-allowed;transform:none;}
#screen-auth .auth-footer{text-align:center;margin-top:auto;padding:24px 0 12px;font-size:11px;font-weight:500;color:var(--text-dim);line-height:1.5;}
#screen-auth .auth-footer a{color:var(--gold);text-decoration:none;font-weight:600;}
#screen-auth .auth-footer a:hover{text-decoration:underline;}
/* Pflicht-Zustimmung bei der Registrierung (Google-UGC-Regel) */
#screen-auth .consent-row{display:flex;align-items:flex-start;gap:10px;margin:18px 0 4px;cursor:pointer;}
#screen-auth .consent-row input{position:absolute;opacity:0;width:0;height:0;}
#screen-auth .consent-box{width:20px;height:20px;flex-shrink:0;border-radius:6px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);margin-top:1px;}
#screen-auth .consent-box svg{width:12px;height:12px;stroke:#0A0A0A;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s;}
#screen-auth .consent-row input:checked+.consent-box{background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);border-color:var(--gold);}
#screen-auth .consent-row input:checked+.consent-box svg{opacity:1;}
#screen-auth .consent-row input:focus-visible+.consent-box{box-shadow:0 0 0 3px rgba(255,179,0,.25);}
#screen-auth .consent-text{font-size:11px;font-weight:500;color:var(--text-dim);line-height:1.5;}
#screen-auth .consent-text a{color:var(--gold);text-decoration:none;font-weight:600;}
#screen-auth .consent-row.missing .consent-box{border-color:var(--red,#E5484D);}

/* ══ BENACHRICHTIGUNGEN — Schalter im Profil ══
   Eigener Schalter statt Systemelement: <input type=checkbox> laesst sich auf
   iOS und Android nicht verlaesslich einfaerben, und Emojis kommen hier nicht
   in Frage. Der Knopf traegt role="switch" und aria-checked, damit die
   Sprachausgabe ihn richtig ansagt. */
.np-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);}
.np-row:first-child{padding-top:2px;}
.np-row:last-child{border-bottom:none;padding-bottom:2px;}
.np-umfang{display:flex;gap:6px;padding:0 0 12px;border-bottom:1px solid var(--border);}
.np-um{flex:1;padding:8px 6px;border-radius:10px;border:1px solid var(--border-medium);background:none;color:var(--text-muted);font-family:'Saira',sans-serif;font-size:11.5px;font-weight:600;cursor:pointer;}
.np-um.an{border-color:var(--gold-border);color:var(--gold);background:rgba(255,179,0,.08);}
.gs-folgen{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:13px;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));}
.gs-folgen .np-t{flex:1;font-size:12.5px;}
.np-txt{flex:1;min-width:0;}
.np-t{font-size:13.5px;font-weight:700;color:var(--text-primary);}
.np-sw{flex:none;width:46px;height:27px;border-radius:100px;border:1px solid var(--border-medium);
  background:var(--bg3);position:relative;cursor:pointer;padding:0;transition:background .18s ease,border-color .18s ease;
  -webkit-tap-highlight-color:transparent;}
.np-sw span{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:var(--text-dim);transition:transform .18s cubic-bezier(.32,.72,0,1),background .18s ease;}
.np-sw[aria-checked="true"]{background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);border-color:var(--gold-border);
  box-shadow:0 0 16px rgba(255,179,0,.16);}
.np-sw[aria-checked="true"] span{transform:translateX(19px);background:#0A0A0A;}
.np-sw:disabled{opacity:.45;cursor:default;box-shadow:none;}
.karten-push{margin:0 24px 16px;padding:12px 14px;border:1px solid var(--border-subtle);border-radius:14px;background:linear-gradient(180deg,var(--bg-card-alt-top),var(--bg-card-alt-bottom));}
.karten-push .np-cta{margin-top:10px;}
.np-hint{font-size:12px;color:var(--text-muted);line-height:1.55;display:flex;gap:10px;align-items:flex-start;}
.np-hint svg{flex:none;width:16px;height:16px;margin-top:1px;stroke:var(--text-dim);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.np-hint b{color:var(--text-secondary);font-weight:600;}
/* Nur fuer den Fall, in dem das System noch nicht gefragt hat — bei 'denied'
   hilft kein Knopf mehr, da fuehrt nur der Weg in die Systemeinstellungen. */
.np-cta{margin-top:11px;width:100%;padding:10px 14px;border-radius:11px;border:1px solid var(--gold-border);
  background:var(--gold-bg);color:var(--gold);font-family:'Saira Condensed',sans-serif;font-size:13px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;}
.np-cta:active{transform:scale(.985);}

/* ══════════ GOLD: PROFIL (screen-profile) ══════════ */
#screen-profile .scroll{padding-bottom:calc(var(--nav-raum) + env(safe-area-inset-bottom));}
#screen-profile .p-wrap{padding:0 20px;}
#screen-profile .p-head{padding:max(52px,calc(env(safe-area-inset-top) + 20px)) 0 8px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
#screen-profile .p-h-title{font-family:'Saira Condensed';font-size:28px;font-weight:800;letter-spacing:1px;line-height:1.1;color:var(--text-primary);}
#screen-profile .p-h-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:3px;}
#screen-profile .logout-btn{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border-medium);color:var(--text-dim);font-family:'Saira';font-weight:700;font-size:11px;padding:8px 14px;border-radius:999px;cursor:pointer;transition:all .2s ease;}
#screen-profile .logout-btn:hover{border-color:rgba(239,68,68,.4);color:var(--undo);}
#screen-profile .logout-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#screen-profile .me-card{position:relative;overflow:hidden;border-radius:20px;padding:20px;background:linear-gradient(180deg,var(--bg-card-top) 0%,var(--bg-card-bottom) 100%);border:1px solid var(--gold-border);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04),0 0 40px rgba(255,179,0,.04);}
#screen-profile .me-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(128deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);}
#screen-profile .me-in{position:relative;display:flex;align-items:center;gap:16px;z-index:1;}
#screen-profile .av-lg{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed';font-weight:800;font-size:22px;color:#0A0A0A;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);box-shadow:0 0 24px rgba(255,179,0,.25),0 4px 12px rgba(0,0,0,.3);}
#screen-profile .me-edit{flex:0 0 auto;width:36px;height:36px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;}
#screen-profile .me-edit:active{transform:scale(.95);}
#screen-profile .me-edit svg{width:16px;height:16px;stroke:var(--text-dim);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-profile .me-edit:hover svg{stroke:var(--gold);}
#screen-profile .me-n{font-family:'Saira Condensed';font-weight:800;font-size:22px;letter-spacing:.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-profile .me-m{font-size:12px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-profile .lg{position:relative;overflow:hidden;border-radius:18px;padding:16px;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);}
#screen-profile .lg.active{border-color:var(--gold-border);box-shadow:0 0 24px rgba(255,179,0,.04),0 2px 8px rgba(0,0,0,.2);}
#screen-profile .lg+.lg{margin-top:10px;}
#screen-profile .lg-top{display:flex;align-items:center;gap:12px;}
#screen-profile .crest{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed';font-weight:800;font-size:16px;color:#0A0A0A;box-shadow:0 0 12px rgba(0,0,0,.3);}
#screen-profile .lg-n{font-family:'Saira Condensed';font-weight:700;font-size:16px;letter-spacing:.3px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-profile .lg-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;}
#screen-profile .modus{display:inline-block;font-weight:700;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;border-radius:999px;padding:3px 10px;color:var(--text-label);border:1px solid var(--border-medium);}
#screen-profile .modus.on{color:var(--green);border-color:var(--green-border);background:var(--green-bg);}
#screen-profile .aktiv{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--green);border:1px solid var(--green-border);border-radius:999px;padding:5px 12px;background:var(--green-bg);}
#screen-profile .aktiv i{width:5px;height:5px;border-radius:50%;background:var(--green);display:block;box-shadow:0 0 6px rgba(74,222,128,.4);}
#screen-profile .lg-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
#screen-profile .btn{padding:11px 16px;border-radius:14px;font-family:'Saira';font-weight:700;font-size:13px;cursor:pointer;border:none;transition:all .2s ease;}
#screen-profile .btn-go{background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 2px 12px rgba(255,179,0,.2),inset 0 1px 0 rgba(255,255,255,.25);}
#screen-profile .btn-gold{background:transparent;border:1px solid var(--gold-border);color:var(--gold);}
#screen-profile .btn-undo{background:var(--undo-bg);border:1px solid var(--undo-border);color:var(--undo);}
#screen-profile .btn-lg{width:100%;padding:14px;font-size:14px;}
#screen-profile .panel{border-radius:18px;padding:18px;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);}
#screen-profile .panel+.panel{margin-top:10px;}
#screen-profile .lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-label);margin-bottom:10px;}
#screen-profile .code{flex:1;font-family:'Saira Condensed';font-weight:800;font-size:22px;letter-spacing:2px;color:var(--gold);background:var(--field-bg);border:1px dashed var(--border-medium);border-radius:12px;padding:12px 14px;text-align:center;}
#screen-profile .copy{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:13px 16px;border-radius:12px;background:transparent;border:1px solid var(--border-medium);color:var(--text-secondary);font-family:'Saira';font-weight:700;font-size:12px;cursor:pointer;transition:all .2s ease;}
#screen-profile .copy:hover{border-color:var(--gold-border);color:var(--gold);background:var(--gold-bg);}
#screen-profile .copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
#screen-profile .note{font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.5;margin-top:10px;}
#screen-profile input,#screen-profile textarea{width:100%;background:var(--field-bg);border:1px solid var(--border-subtle);border-radius:14px;padding:13px 14px;color:var(--text-primary);font-family:'Saira';font-size:14px;outline:none;transition:all .2s ease;}
#screen-profile input:focus,#screen-profile textarea:focus{border-color:var(--gold-border);background:rgba(255,255,255,.04);box-shadow:0 0 0 3px rgba(255,179,0,.04);}
#screen-profile input::placeholder,#screen-profile textarea::placeholder{color:var(--text-dim);font-weight:400;}
#screen-profile textarea{min-height:96px;line-height:1.5;resize:vertical;}
#screen-profile .segs{display:flex;gap:4px;background:var(--field-bg);border:1px solid var(--border-subtle);border-radius:999px;padding:4px;}
#screen-profile .seg{flex:1;text-align:center;padding:9px 4px;border-radius:999px;font-weight:600;font-size:12px;cursor:pointer;transition:all .18s ease;color:var(--text-dim);border:1px solid transparent;}
#screen-profile .seg.active{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border);}
#screen-profile .modenote{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.02);}
#screen-profile .modenote svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:1px;}
#screen-profile .modenote span{font-size:11.5px;line-height:1.5;color:var(--text-muted);}
#screen-profile .acc{border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);}
#screen-profile .acc-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;cursor:pointer;transition:background .2s ease;}
#screen-profile .acc-hd:hover{background:rgba(255,255,255,.02);}
#screen-profile .acc-hd span{font-family:'Saira Condensed';font-weight:700;font-size:15px;letter-spacing:.3px;color:var(--text-primary);}
#screen-profile .acc-hd svg{width:18px;height:18px;fill:none;stroke:var(--text-dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease);}
#screen-profile .acc-hd svg.open{transform:rotate(180deg);}
#screen-profile .acc-body{padding:0 18px 18px;border-top:1px solid var(--border-subtle);}
#screen-profile .acc-body .rules-h{font-family:'Saira Condensed';font-weight:800;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-top:14px;}
#screen-profile .acc-body .rules-p{font-size:12.5px;line-height:1.65;color:var(--text-secondary);margin-top:6px;}
#screen-profile .fb{background:linear-gradient(180deg,rgba(91,141,184,.05) 0%,var(--bg-card-alt-bottom) 100%);border-color:rgba(91,141,184,.1);}
#screen-profile .fb-hd{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
#screen-profile .fb-icon{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--blue-bg);border:1px solid var(--blue-border);}
#screen-profile .fb-icon svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#screen-profile .fb-t{font-family:'Saira Condensed';font-weight:800;font-size:16px;letter-spacing:.3px;color:var(--text-primary);}
#screen-profile .fb-s{font-size:12px;line-height:1.5;color:var(--text-muted);margin-top:3px;}
#screen-profile .p-foot{margin-top:26px;text-align:center;font-size:11px;color:var(--text-dim);line-height:1.7;}
#screen-profile .p-foot a{color:var(--text-muted);text-decoration:none;cursor:pointer;}
#screen-profile .p-foot a:hover{color:var(--gold);}
#screen-profile .p-del{margin-top:14px;background:transparent;border:1px solid var(--undo-border);color:var(--undo);font-family:'Saira';font-weight:600;font-size:12px;padding:10px 16px;border-radius:12px;cursor:pointer;width:100%;}
#screen-profile .p-del:hover{background:var(--undo-bg);}
/* ══ PROFIL-MENUE ══
   Jeder Ueberbegriff eine Zeile. Die Panels in der aufgeklappten Schublade
   legen ihre Kartenkanten ab — Karte in Karte sieht nach Versehen aus. */
#screen-profile #profilMenue{margin-top:26px;}
#screen-profile .acc.pm{margin-bottom:10px;}
#screen-profile #profilMenue>*:last-child{margin-bottom:0;}
#screen-profile .acc.pm.offen{border-color:var(--gold-border);box-shadow:0 0 24px rgba(255,179,0,.04),0 2px 8px rgba(0,0,0,.2);}
#screen-profile .pm-t{display:flex;align-items:center;gap:10px;min-width:0;}
#screen-profile .pm-t i{width:3px;height:14px;border-radius:2px;flex:0 0 auto;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-mid) 100%);}
#screen-profile .pm-t span{font-family:'Saira Condensed';font-weight:700;font-size:15px;letter-spacing:.3px;color:var(--text-primary);}
#screen-profile .acc-body.pm-body{padding-top:16px;}
#screen-profile .acc-body .panel{background:none;border:none;box-shadow:none;border-radius:0;padding:0;}
#screen-profile .acc-body .panel+.panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-subtle);}

/* ══════════ GOLD: SPIELTAG (screen-matchday) ══════════ */
#screen-matchday .scroll{padding-bottom:calc(var(--nav-raum) + env(safe-area-inset-bottom));}
#screen-matchday .md-head{padding:max(52px,calc(env(safe-area-inset-top) + 20px)) 20px 4px;}
#screen-matchday .md-h1{font-family:'Saira Condensed';font-size:30px;font-weight:800;letter-spacing:1px;line-height:1.05;background:linear-gradient(180deg,#FFFFFF 0%,#BFBFBF 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
#screen-matchday .md-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}
#screen-matchday .g-sort-tabs{display:flex;gap:6px;padding:12px 20px 4px;}
#screen-matchday .g-sort-tab{flex:1;padding:9px 12px;border-radius:999px;border:1px solid var(--border-medium);background:transparent;color:var(--text-dim);font-family:'Saira';font-size:12.5px;font-weight:600;cursor:pointer;transition:all .18s ease;}
#screen-matchday .g-sort-tab.active{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border);font-weight:700;}
#screen-matchday #matchdayBody{padding:8px 20px 0;}
#screen-matchday .fx-mine-lbl{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);margin:10px 0 10px;}
#screen-matchday .fx-mine-lbl::before{content:'';width:3px;height:14px;border-radius:2px;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);}
#screen-matchday .fx-mine{position:relative;overflow:hidden;padding:18px;border:1px solid var(--gold-border);background:linear-gradient(180deg,var(--bg-card-top) 0%,var(--bg-card-bottom) 100%);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);border-radius:20px;margin-bottom:16px;}
#screen-matchday .fx-mine-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
#screen-matchday .fx-badge{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--gold-border);border-radius:999px;padding:4px 10px;}
#screen-matchday .fx-time{font-size:11px;font-weight:600;color:var(--text-dim);}
#screen-matchday .fx-pair{display:flex;align-items:center;justify-content:center;gap:14px;}
#screen-matchday .fx-side{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end;min-width:0;}
#screen-matchday .fx-side.away{justify-content:flex-start;}
#screen-matchday .fx-club{font-family:'Saira Condensed';font-size:14px;font-weight:700;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .fx-vs{font-family:'Saira Condensed';font-size:18px;font-weight:800;color:var(--text-dim);flex:0 0 auto;}
#screen-matchday .fx-jersey{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
#screen-matchday .fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle);}
#screen-matchday .fx-chip{display:inline-flex;align-items:center;gap:5px;background:var(--field-bg);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 9px;font-size:11px;}
#screen-matchday .fx-chip.du{background:var(--green-bg);border-color:var(--green-border);}
#screen-matchday .fx-chip-ini{font-family:'Saira Condensed';font-weight:800;font-size:10px;color:var(--text-secondary);background:rgba(255,255,255,.08);width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
#screen-matchday .fx-chip.du .fx-chip-ini{color:#0A0A0A;background:var(--green);}
#screen-matchday .fx-chip-n{font-weight:600;color:var(--text-secondary);}
#screen-matchday .fx-chip-s{font-size:9px;font-weight:700;color:var(--text-label);border:1px solid var(--border-medium);border-radius:4px;padding:0 4px;}
#screen-matchday .fx-grp{display:flex;align-items:center;gap:8px;margin:16px 0 10px;color:var(--text-label);}
#screen-matchday .fx-grp svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;}
#screen-matchday .fx-grp-t{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;}
#screen-matchday .fx-grp-line{flex:1;height:1px;background:var(--border-medium);}
#screen-matchday .fx-list{display:flex;flex-direction:column;gap:8px;}
#screen-matchday .fx-card{background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.2);padding:14px 16px;}
#screen-matchday .fx-open{font-size:10px;color:var(--text-dim);text-align:center;margin-top:8px;border-color:var(--border-medium);background:rgba(255,255,255,.03);}
#screen-matchday .sb-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-label);}
/* Blaetterleiste ueber beiden Unterreitern — zugleich der Zugang zum Archiv. */
#screen-matchday .md-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 14px;padding:8px 8px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);}
#screen-matchday .md-nav-b{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text-secondary);
  cursor:pointer;transition:background .15s ease,color .15s ease;}
#screen-matchday .md-nav-b svg{width:17px;height:17px;}
#screen-matchday .md-nav-b:hover:not(:disabled){background:rgba(255,255,255,.07);color:var(--text-primary);}
#screen-matchday .md-nav-b:disabled{opacity:.28;cursor:default;}
#screen-matchday .md-nav-t{flex:1;text-align:center;display:flex;flex-direction:column;gap:2px;}
#screen-matchday .md-nav-st{font-size:14px;font-weight:700;color:var(--text-primary);}
#screen-matchday .md-nav-s{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-label);}
#screen-matchday .mc-hint{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--gold-border);background:var(--gold-bg);margin-bottom:14px;}
#screen-matchday .mc-hint svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;}
#screen-matchday .mc-hint span{font-size:11.5px;line-height:1.5;color:var(--text-secondary);}
#screen-matchday .mc-sec{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px;}
#screen-matchday .mc-sec-n{font-size:10px;color:var(--text-dim);font-weight:600;}
#screen-matchday .mc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
#screen-matchday .mc-hidden,#screen-matchday .mc-rc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:12px;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);}
#screen-matchday .mc-rc.pflicht{border-color:var(--gold-border);}
#screen-matchday .mc-hidden-em{position:relative;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
#screen-matchday .mc-hidden-em>svg{position:absolute;inset:0;width:100%;height:100%;}
#screen-matchday .mc-hidden-em .lock{width:20px;height:20px;position:relative;}
#screen-matchday .mc-hidden-l{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-label);}
#screen-matchday .mc-who{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;}
#screen-matchday .mc-who-ini{font-family:'Saira Condensed';font-weight:800;font-size:10px;color:#0A0A0A;background:var(--text-muted);border-radius:4px;padding:1px 4px;flex:0 0 auto;}
#screen-matchday .mc-who-n{font-size:11px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .mc-mine{border-radius:18px;padding:18px;background:linear-gradient(180deg,var(--bg-card-top) 0%,var(--bg-card-bottom) 100%);border:1px solid var(--green-border);box-shadow:0 8px 32px rgba(0,0,0,.4);margin-bottom:8px;}
#screen-matchday .mc-mine.pflicht{border-color:var(--gold-border);}
#screen-matchday .mc-mine-in{display:flex;align-items:center;gap:16px;}
#screen-matchday .mc-kat{display:inline-block;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border:1px solid;border-radius:999px;padding:2px 9px;}
#screen-matchday .mc-name{font-family:'Saira Condensed';font-weight:800;font-size:18px;color:var(--text-primary);margin-top:6px;}
#screen-matchday .mc-eff{font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:4px;}
#screen-matchday .mc-reveal{text-align:center;padding:10px 0 4px;background:none;border:none;box-shadow:none;}
#screen-matchday .mc-reveal-k{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--green);}
#screen-matchday .mc-reveal-h{font-family:'Saira Condensed';font-weight:800;font-size:22px;color:var(--text-primary);margin-top:4px;}
#screen-matchday .mc-reveal-s{font-size:12px;color:var(--text-muted);margin-top:4px;}
#screen-matchday .mc-rc-em{width:52px;height:52px;display:flex;align-items:center;justify-content:center;}
#screen-matchday .mc-rc-name{font-size:10px;font-weight:700;text-align:center;line-height:1.2;}
#screen-matchday .mc-rc.none{opacity:.6;}
#screen-matchday .mc-none{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-dim);font-size:9px;}
#screen-matchday .mc-none svg{width:18px;height:18px;}

/* ══════════ SPIELTAG v2 (30.08.) — der Stuermer traegt Kachel und Zeile ══════════ */
/* Kartenuebersicht: zwei Spalten statt drei. Der Stuermername braucht die
   Breite — bei drei Spalten bricht "Emanuel Latte Lath" auf drei Zeilen um. */
#screen-matchday .mc-grid{grid-template-columns:1fr 1fr;gap:9px;}
#screen-matchday .kt{border:1px solid var(--border-subtle);border-radius:15px;padding:12px 11px 11px;
  background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:9px;min-width:0;}
#screen-matchday .kt.pflicht{border-color:var(--gold-border);}
#screen-matchday .kt.leer{opacity:.72;}
/* Kopf der Kachel: Trikot und Stuermer. Das ist die neue erste Zeile. */
#screen-matchday .kt-top{display:flex;gap:8px;align-items:center;min-width:0;}
#screen-matchday .kt-who{min-width:0;display:flex;flex-direction:column;}
#screen-matchday .kt-str{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
#screen-matchday .kt-club{font-size:10px;color:var(--text-dim);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .kt-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 0 2px;}
#screen-matchday .kt-art{width:66px;height:66px;}
#screen-matchday .kt-art svg{width:100%;height:100%;}
#screen-matchday .kt-cname{font-size:11px;font-weight:700;letter-spacing:.04em;text-align:center;line-height:1.25;}
#screen-matchday .kt-none{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 8px;color:var(--text-dim);}
#screen-matchday .kt-none svg{width:26px;height:26px;opacity:.55;}
#screen-matchday .kt-none span{font-size:10.5px;}
#screen-matchday .kt-lock{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0 6px;color:var(--text-dim);}
#screen-matchday .kt-lock svg{width:26px;height:26px;}
#screen-matchday .kt-lock .t{font-size:10px;letter-spacing:.03em;}
/* Fusszeile: der Mensch, jetzt zweitrangig. */
#screen-matchday .kt-user{display:flex;align-items:center;gap:6px;padding-top:8px;margin-top:auto;border-top:1px solid var(--border-subtle);min-width:0;}
#screen-matchday .kt-ini{font-family:'Saira Condensed';font-weight:800;font-size:9px;color:#0A0A0A;background:var(--text-muted);border-radius:4px;padding:1px 4px;flex:0 0 auto;}
#screen-matchday .kt-uname{font-size:10.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Eigene Karte: der Stuermer gehoert zwischen Kartennamen und Wirkung. */
#screen-matchday .mc-str{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-secondary);margin-top:6px;}

/* ── Paarungen: eine Zeile je Beteiligtem, Karte rechts ── */
#screen-matchday .fx-grp.live{color:var(--green);}
#screen-matchday .fx-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex:0 0 auto;box-shadow:0 0 7px rgba(74,222,128,.7);}
#screen-matchday .fx-dot.klein{width:5px;height:5px;}
@media (prefers-reduced-motion:no-preference){#screen-matchday .fx-dot{animation:fxPuls 2.4s ease-in-out infinite;}}
#screen-matchday .fx-card{padding:0;overflow:hidden;}
#screen-matchday .fx-card.eigen{border-color:var(--gold-border);box-shadow:0 0 0 1px var(--gold-border);}
#screen-matchday .fx-card .fx-pair{padding:11px 13px 10px;}
#screen-matchday .fx-mid{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto;min-width:52px;}
#screen-matchday .fx-score{font-family:'Saira Condensed';font-size:17px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1;}
#screen-matchday .fx-score.leer{color:var(--text-dim);}
#screen-matchday .fx-score.laeuft{color:var(--green);}
#screen-matchday .fx-when{font-size:9.5px;color:var(--text-dim);letter-spacing:.05em;white-space:nowrap;}
#screen-matchday .fx-when.live{color:var(--green);display:flex;align-items:center;gap:4px;}
#screen-matchday .fx-part{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle);background:rgba(0,0,0,.22);}
#screen-matchday .pt-row{display:flex;flex-direction:column;min-width:0;}
#screen-matchday .pt-kopf{display:flex;align-items:center;gap:9px;padding:9px 13px;min-width:0;}
/* Tore des Stuermers, eingerueckt unter seinen Namen. */
#screen-matchday .pt-tore{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 9px 37px;}
#screen-matchday .pt-tor{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:999px;border:1px solid;font-size:10px;}
#screen-matchday .pt-tor>svg:first-child{width:13px;height:13px;flex:0 0 auto;}
#screen-matchday .pt-tor .min{font-weight:600;opacity:.8;}
#screen-matchday .pt-tor .zahl{font-family:'Saira Condensed';font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;}
#screen-matchday .pt-tor.plus{color:var(--green);border-color:var(--green-border);background:var(--green-bg);}
#screen-matchday .pt-tor.karte{color:var(--blue);border-color:rgba(91,141,184,.32);background:rgba(91,141,184,.10);}
/* Ein getilgtes Tor traegt das Pflichtkarten-Gold: die Karte hat gewirkt, und
   zwar so, wie sie soll. Rot bleibt fuer "zurueckgenommen" reserviert — ein
   getilgtes Tor ist nicht zurueckgenommen, es zaehlt nur nicht. */
#screen-matchday .pt-tor.getilgt{color:var(--gold);border-color:var(--gold-border);background:var(--gold-bg);}
#screen-matchday .pt-tor.getilgt .zahl{text-decoration:line-through;text-decoration-color:#FF7A84;text-decoration-thickness:1.7px;}
#screen-matchday .pt-tor.karte>svg:last-child,#screen-matchday .pt-tor.getilgt>svg:last-child{width:15px;height:15px;flex:0 0 auto;}
#screen-matchday .pt-row+.pt-row{border-top:1px solid var(--border-subtle);}
#screen-matchday .pt-row.du{background:var(--gold-bg);box-shadow:inset 3px 0 0 var(--gold);}
#screen-matchday .pt-side{font-size:9px;font-weight:700;width:15px;height:15px;flex:0 0 auto;border-radius:5px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--text-dim);}
#screen-matchday .pt-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
#screen-matchday .pt-str{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
#screen-matchday .pt-user{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .pt-card{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:4px 9px 4px 5px;border-radius:999px;border:1px solid var(--border-medium);max-width:145px;}
#screen-matchday .pt-card svg{width:22px;height:22px;flex:0 0 auto;}
#screen-matchday .pt-card .cn{font-size:10px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .pt-card.gold{border-color:var(--gold-border);background:var(--gold-bg);}
#screen-matchday .pt-card.gruen{border-color:var(--green-border);background:var(--green-bg);}
#screen-matchday .pt-card.zu{border-color:var(--border-subtle);background:transparent;color:var(--text-dim);}
#screen-matchday .pt-card.zu .cn{color:var(--text-dim);}
#screen-matchday .pt-card.zu svg{width:14px;height:14px;margin-left:3px;}
#screen-matchday .pt-card.keine{border:none;background:transparent;padding-right:2px;}
#screen-matchday .pt-card.keine .cn{color:var(--text-label);font-weight:500;}

/* ── Spieltagsbilanz: was ein abgeschlossener Spieltag gebracht hat ── */
#screen-matchday .bz{border:1px solid var(--gold-border);border-radius:18px;padding:16px 15px 15px;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(255,179,0,.06) 0%,var(--bg-card-bottom) 62%);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}
#screen-matchday .bz-head{display:flex;align-items:baseline;gap:9px;margin-bottom:13px;}
#screen-matchday .bz-h-k{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-border);background:var(--gold-bg);border-radius:999px;padding:3px 9px;}
#screen-matchday .bz-h-t{font-family:'Saira Condensed';font-size:19px;font-weight:800;color:var(--text-primary);}
#screen-matchday .bz-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
#screen-matchday .bz-kpi{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;
  border-radius:12px;border:1px solid var(--border-subtle);background:rgba(255,255,255,.025);}
#screen-matchday .bz-kpi-n{font-family:'Saira Condensed';font-size:23px;font-weight:800;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;}
#screen-matchday .bz-kpi-t{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);text-align:center;}
#screen-matchday .bz-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-label);margin:0 0 8px;}
#screen-matchday .bz-lbl:not(:first-of-type){margin-top:16px;}
#screen-matchday .bz-list{display:flex;flex-direction:column;gap:1px;border-radius:12px;overflow:hidden;background:var(--border-subtle);}
#screen-matchday .bz-row{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(0,0,0,.24);min-width:0;}
#screen-matchday .bz-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
#screen-matchday .bz-str{font-size:12.5px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
#screen-matchday .bz-user{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .bz-leer{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:12px;
  border:1px dashed var(--border-medium);color:var(--text-dim);font-size:11.5px;line-height:1.4;}
#screen-matchday .bz-leer svg{flex:0 0 auto;opacity:.5;}
/* Karten */
#screen-matchday .bz-karten{display:flex;flex-wrap:wrap;gap:6px;}
#screen-matchday .bz-karte{display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border-radius:999px;
  border:1px solid var(--border-medium);background:rgba(255,255,255,.025);max-width:100%;}
#screen-matchday .bz-karte svg{width:19px;height:19px;flex:0 0 auto;}
#screen-matchday .bz-k-n{font-size:10px;font-weight:700;white-space:nowrap;}
#screen-matchday .bz-k-u{font-size:9.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .bz-karte.grau{opacity:.78;border-style:dashed;}
#screen-matchday .bz-ohne{margin-top:9px;}
#screen-matchday .bz-ohne-n{display:block;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-label);margin-bottom:6px;}
/* Zuwachs als Balken — der laengste Balken ist der Tagesbeste, nicht 100 Punkte */
#screen-matchday .bz-bars{display:flex;flex-direction:column;gap:7px;}
#screen-matchday .bz-bar{display:flex;align-items:center;gap:9px;min-width:0;}
#screen-matchday .bz-bar-n{flex:0 0 34%;font-size:11.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-matchday .bz-bar.du .bz-bar-n{color:var(--gold);font-weight:700;}
#screen-matchday .bz-bar-t{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden;}
#screen-matchday .bz-bar-f{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,rgba(74,222,128,.55),var(--green));}
#screen-matchday .bz-bar.du .bz-bar-f{background:linear-gradient(90deg,rgba(255,179,0,.55),var(--gold));}
#screen-matchday .bz-bar-v{flex:0 0 auto;font-family:'Saira Condensed';font-size:13px;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;min-width:30px;text-align:right;}

/* ══════════ DRAFT — Gold-Design v1 (Warteliste · Laufend · Ergebnis) ══════════ */
#screen-draft .scroll{display:flex;flex-direction:column;}
#screen-draft .draft-wrap{padding:0 24px calc(var(--nav-raum) + env(safe-area-inset-bottom));}
/* Header */
#screen-draft .dr-head{padding:max(48px,calc(env(safe-area-inset-top) + 20px)) 24px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
#screen-draft .dr-h1{font-family:'Saira Condensed',sans-serif;font-size:32px;font-weight:800;letter-spacing:1px;line-height:1.1;background:linear-gradient(180deg,#FFFFFF 0%,#C0C0C0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#screen-draft .dr-sub{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:.3px;margin-top:4px;}
#screen-draft .dr-head-pills{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end;margin-top:4px;}
#screen-draft .dr-badge-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;padding:5px 14px;border-radius:100px;flex:none;}
#screen-draft .dr-badge-pill.live{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);animation:drPulseBadge 3s ease-in-out infinite;}
#screen-draft .dr-badge-pill.done{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18);color:var(--green);}
#screen-draft .draft-mode-pill{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:100px;flex:none;}
#screen-draft .draft-mode-pill.test{background:var(--blue-bg);border:1px solid var(--blue-border);color:var(--blue);}
#screen-draft .draft-mode-pill.official{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);}
/* Status-Banner (Warteliste) */
#screen-draft .status-banner{margin:0 0 20px;background:linear-gradient(180deg,rgba(26,26,26,.9) 0%,rgba(16,16,16,.95) 100%);border:1px solid rgba(255,179,0,.1);border-radius:20px;padding:18px 20px;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.04);display:flex;align-items:center;gap:14px;}
#screen-draft .status-icon{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,179,0,.06);border:1px solid rgba(255,179,0,.12);}
#screen-draft .status-icon svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-draft .status-body{flex:1;min-width:0;}
#screen-draft .status-title{font-family:'Saira Condensed',sans-serif;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:.3px;}
#screen-draft .status-sub{font-size:11px;font-weight:500;color:var(--text-muted);margin-top:3px;line-height:1.5;}
/* Section-Label */
#screen-draft .section-label{display:flex;align-items:center;gap:8px;margin:0 0 12px;}
#screen-draft .section-accent{width:3px;height:14px;border-radius:2px;flex:none;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);}
#screen-draft .section-text{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--text-label);}
/* Pick-Rows */
#screen-draft .pick-row{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-radius:16px;padding:14px 18px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.2);position:relative;overflow:hidden;transition:all .2s ease;}
#screen-draft .pick-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);border-radius:16px 0 0 16px;opacity:0;transition:opacity .2s ease;}
#screen-draft .pick-row.active{border-color:var(--green-border);background:linear-gradient(180deg,rgba(74,222,128,.04) 0%,rgba(18,18,18,.95) 100%);box-shadow:0 0 24px rgba(74,222,128,.04),0 2px 8px rgba(0,0,0,.2);}
#screen-draft .pick-row.active::before{opacity:1;}
#screen-draft .pick-row.ghost{opacity:.55;}
#screen-draft .pick-row.picked{opacity:.82;}
#screen-draft .pick-num{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-family:'Saira Condensed',sans-serif;font-size:14px;font-weight:800;color:var(--text-label);transition:all .3s ease;}
#screen-draft .pick-row.active .pick-num{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.18);color:var(--green);}
#screen-draft .pick-avatar{width:40px;height:40px;border-radius:50%;flex:none;background:linear-gradient(135deg,#2a2a2a,#1a1a1a);border:2px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;}
#screen-draft .pick-avatar.ini{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:15px;color:#0A0A0A;}
#screen-draft .pick-body{flex:1;min-width:0;}
#screen-draft .pick-name{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .pick-role{font-size:10px;font-weight:500;color:var(--text-dim);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .pick-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 12px;border-radius:100px;flex:none;background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);}
#screen-draft .pick-badge.waiting{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--text-label);}
#screen-draft .pick-badge.founder{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold);}
#screen-draft .remove-x{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .2s ease;}
#screen-draft .remove-x:hover{border-color:rgba(239,68,68,.4);}
#screen-draft .remove-x svg{width:14px;height:14px;stroke:var(--text-label);stroke-width:1.8;fill:none;stroke-linecap:round;}
#screen-draft .remove-x:hover svg{stroke:#EF4444;}
/* Countdown-Banner (Laufend) */
#screen-draft .countdown-banner{margin:0 0 14px;background:linear-gradient(180deg,rgba(26,26,26,.9) 0%,rgba(16,16,16,.95) 100%);border:1px solid rgba(255,179,0,.1);border-radius:20px;padding:22px 20px;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.04);position:relative;overflow:hidden;}
#screen-draft .shimmer{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--gold) 50%,transparent 100%);opacity:.4;animation:drShimmer 4s ease-in-out infinite;}
#screen-draft .countdown-inner{display:flex;align-items:center;gap:18px;}
#screen-draft .ring-wrap{width:112px;height:112px;position:relative;flex:none;filter:drop-shadow(0 0 6px rgba(255,179,0,.3));}
#screen-draft .ring-wrap svg{transform:rotate(-90deg);}
#screen-draft .ring-bg{fill:none;stroke:rgba(255,179,0,.06);stroke-width:3;}
#screen-draft .ring-progress{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:339.292;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s ease;}
#screen-draft .ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#screen-draft .ring-icon{width:34px;height:32px;display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
#screen-draft .ring-icon svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-draft .ring-time{font-family:'Saira Condensed',sans-serif;font-size:22px;font-weight:800;letter-spacing:1px;color:var(--gold);text-shadow:0 0 30px rgba(255,179,0,.25);animation:drTimerPulse 2s ease-in-out infinite;}
#screen-draft .countdown-info{flex:1;min-width:0;}
#screen-draft .countdown-title{font-family:'Saira Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.5px;color:var(--text-primary);margin-bottom:6px;}
#screen-draft .countdown-desc{font-size:11px;font-weight:500;color:var(--text-muted);line-height:1.5;}
#screen-draft .countdown-meta{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
#screen-draft .meta-pill{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:var(--text-label);}
#screen-draft .meta-pill b{color:var(--text-secondary);font-weight:800;}
#screen-draft .clock-warn{font-size:11px;font-weight:600;color:var(--gold);text-align:center;margin:0 0 16px;padding:9px 14px;border-radius:12px;background:var(--gold-bg);border:1px solid var(--gold-border);display:none;}
#screen-draft .clock-warn.show{display:block;}
#screen-draft .clock-warn.danger{color:#EF4444;background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);}
/* Du-bist-dran-Banner */
#screen-draft .my-turn-banner{text-align:center;padding:18px 16px;margin:16px 0;border-radius:18px;background:linear-gradient(180deg,rgba(74,222,128,.06) 0%,rgba(18,18,18,.95) 100%);border:1px solid var(--green-border);box-shadow:0 0 24px rgba(74,222,128,.05);}
#screen-draft .mtb-icon{display:flex;justify-content:center;margin-bottom:6px;}
#screen-draft .mtb-icon svg{width:30px;height:30px;stroke:var(--green);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-draft .mtb-title{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:.5px;color:var(--green);}
#screen-draft .mtb-sub{font-size:11px;color:var(--text-muted);margin-top:3px;}
/* Admin-Panel */
#screen-draft .admin-panel{margin:16px 0 0;border:1px solid rgba(255,179,0,.12);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(26,22,14,.6) 0%,rgba(16,14,10,.9) 100%);box-shadow:none;padding:0;}
#screen-draft .admin-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.02);margin:0;}
#screen-draft .admin-head svg{width:16px;height:16px;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;}
#screen-draft .admin-title{flex:1;font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin:0;}
#screen-draft .admin-only{font-size:8.5px;font-weight:700;letter-spacing:1.4px;color:var(--text-label);border:1px solid rgba(255,255,255,.06);border-radius:100px;padding:4px 9px;flex:none;}
#screen-draft .admin-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
#screen-draft .admin-note{font-size:11px;color:var(--text-muted);line-height:1.5;}
#screen-draft .admin-btns-row{flex-direction:row;flex-wrap:wrap;gap:8px;}
#screen-draft .admin-btns-row button{flex:1;min-width:92px;width:auto;padding:11px;}
/* Buttons (Primär = Login-Spec) */
#screen-draft .btn-primary{width:100%;padding:15px 24px;border:none;border-radius:16px;cursor:pointer;font-family:'Saira',sans-serif;font-size:15px;font-weight:700;letter-spacing:.4px;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;box-shadow:0 4px 20px rgba(255,179,0,.18),0 0 40px rgba(255,179,0,.06),inset 0 1px 0 rgba(255,255,255,.25);transition:all .2s var(--ease);}
#screen-draft .btn-primary:active{transform:scale(.98);}
#screen-draft .btn-ghost{width:100%;margin:0;padding:14px;border-radius:14px;cursor:pointer;background:transparent;border:1px solid var(--border-medium);color:var(--text-secondary);font-family:'Saira',sans-serif;font-size:13px;font-weight:700;transition:all .2s ease;}
#screen-draft .btn-ghost:hover{border-color:rgba(255,255,255,.12);color:var(--text-primary);}
#screen-draft .btn-danger{width:100%;padding:14px;border-radius:14px;cursor:pointer;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);color:#EF4444;font-family:'Saira',sans-serif;font-size:13px;font-weight:700;transition:all .2s ease;}
#screen-draft .btn-danger:hover{background:rgba(239,68,68,.1);}
#screen-draft .btn-sub{font-size:10px;color:var(--text-dim);text-align:center;margin-top:-4px;}
/* Draft-Modus-Banner */
#screen-draft .draft-mode-banner{font-size:11.5px;line-height:1.5;border-radius:14px;padding:11px 15px;margin:0 0 14px;}
#screen-draft .draft-mode-banner b{font-weight:800;}
#screen-draft .draft-mode-banner.test{background:var(--blue-bg);border:1px solid var(--blue-border);color:var(--text-secondary);}
#screen-draft .draft-mode-banner.test b{color:var(--blue);}
#screen-draft .draft-mode-banner.official{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--text-secondary);}
#screen-draft .draft-mode-banner.official b{color:var(--gold);}
/* Spieler-Grid */
#screen-draft .players-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#screen-draft .pcard{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.2);padding:14px 12px;text-align:center;transition:all .2s ease;}
#screen-draft .pcard.available{cursor:pointer;}
#screen-draft .pcard.available:hover{transform:translateY(-2px);border-color:var(--gold-border);box-shadow:0 6px 18px rgba(0,0,0,.3);}
#screen-draft .pcard.taken{opacity:.45;}
#screen-draft .pcard.taken::after{content:none;}
#screen-draft .pcard.my-pick{opacity:1;border-color:var(--green-border);background:linear-gradient(180deg,rgba(74,222,128,.05) 0%,rgba(18,18,18,.95) 100%);}
#screen-draft .pcard.locked{cursor:default;}
#screen-draft .preview-note{font-size:11px;font-weight:500;color:var(--text-dim);line-height:1.45;margin:-4px 0 12px 2px;}
#screen-draft .pcard.verdeckt .pcard-name{color:var(--text-dim);letter-spacing:2px;}
#screen-draft .pcard.freigebbar{cursor:pointer;}
#screen-draft .pcard.freigebbar:active{border-color:rgba(255,179,0,.35);}
#screen-draft .pcard-freigabe{margin-top:8px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);}
#screen-draft .pcard-top{display:flex;justify-content:center;align-items:center;margin-bottom:6px;}
#screen-draft .pcard-rang{font-size:9px;font-weight:700;color:var(--text-label);text-transform:uppercase;letter-spacing:.6px;}
#screen-draft .pcard-trikot{width:32px;height:36px;margin:0 auto 8px;}
#screen-draft .pcard-name{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:2px;line-height:1.15;letter-spacing:.02em;}
#screen-draft .pcard-club{font-size:10px;color:var(--text-muted);text-align:center;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .pcard-val{font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:20px;text-align:center;color:var(--gold);line-height:1;}
#screen-draft .pcard.my-pick .pcard-val{color:var(--green);}
#screen-draft .pcard-by{font-size:9px;color:var(--text-dim);text-align:center;margin-top:5px;}
#screen-draft .pcard-by b{color:var(--green);font-weight:700;}
#screen-draft .pcard-pick-btn{width:100%;margin-top:10px;padding:9px;border-radius:10px;border:none;background:linear-gradient(180deg,var(--gold-mid) 0%,var(--gold) 100%);color:#0A0A0A;font-family:'Saira',sans-serif;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 4px 14px rgba(255,179,0,.18);transition:transform .15s ease;}
#screen-draft .pcard-pick-btn:active{transform:scale(.97);}
/* Ergebnis */
#screen-draft .done-banner{margin:0 0 20px;text-align:center;padding:26px 20px 22px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(74,222,128,.05) 0%,rgba(16,16,16,.95) 100%);border:1px solid rgba(74,222,128,.12);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 24px rgba(74,222,128,.04);}
#screen-draft .done-check{width:56px;height:56px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);}
#screen-draft .done-check svg{width:28px;height:28px;stroke:var(--green);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-draft .done-title{font-family:'Saira Condensed',sans-serif;font-size:24px;font-weight:800;letter-spacing:.5px;background:linear-gradient(180deg,#FFFFFF,#C0C0C0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
#screen-draft .done-sub{font-size:12px;color:var(--text-muted);margin-top:4px;}
#screen-draft .mine-card{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:20px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(74,222,128,.05) 0%,rgba(18,18,18,.95) 100%);border:1px solid var(--green-border);box-shadow:0 0 24px rgba(74,222,128,.04),0 2px 8px rgba(0,0,0,.2);}
#screen-draft .mine-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green),var(--green-dark));border-radius:16px 0 0 16px;}
#screen-draft .mine-label{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--green);}
#screen-draft .mine-striker{font-family:'Saira Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--text-primary);margin-top:3px;line-height:1.1;}
#screen-draft .mine-club{font-size:11px;color:var(--text-muted);margin-top:2px;}
#screen-draft .mine-sw{text-align:right;flex:none;}
#screen-draft .mine-sw .l{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--text-label);}
#screen-draft .mine-sw .v{font-family:'Saira Condensed',sans-serif;font-size:22px;font-weight:800;color:var(--green);line-height:1;}
#screen-draft .res-row{display:flex;align-items:center;gap:11px;padding:12px 16px;margin-bottom:8px;border-radius:16px;background:linear-gradient(180deg,var(--bg-card-alt-top) 0%,var(--bg-card-alt-bottom) 100%);border:1px solid var(--border-subtle);box-shadow:0 2px 8px rgba(0,0,0,.2);}
#screen-draft .res-row.me{border-color:var(--green-border);background:linear-gradient(180deg,rgba(74,222,128,.04) 0%,rgba(18,18,18,.95) 100%);}
#screen-draft .res-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Saira Condensed',sans-serif;font-weight:800;font-size:13px;color:#0A0A0A;}
#screen-draft .res-user{flex:0 0 28%;min-width:0;font-family:'Saira Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .res-row.me .res-user{color:var(--green);}
#screen-draft .res-arrow{stroke:var(--text-label);stroke-width:1.8;fill:none;width:14px;height:14px;flex:none;}
#screen-draft .res-striker{flex:1;min-width:0;}
#screen-draft .res-striker .n{font-family:'Saira Condensed',sans-serif;font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .res-striker .c{font-size:10px;color:var(--text-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-draft .res-sw{font-family:'Saira Condensed',sans-serif;font-size:15px;font-weight:800;color:var(--text-dim);flex:none;}
#screen-draft .mode-note{font-size:11.5px;line-height:1.5;color:var(--text-muted);border-radius:14px;padding:11px 15px;margin-top:18px;}
#screen-draft .mode-note b{font-weight:800;}
#screen-draft .mode-note.test{background:var(--blue-bg);border:1px solid var(--blue-border);}
#screen-draft .mode-note.test b{color:var(--blue);}
#screen-draft .mode-note.official{background:var(--gold-bg);border:1px solid var(--gold-border);}
#screen-draft .mode-note.official b{color:var(--gold);}
/* Notif-Banner */
#screen-draft .notif-banner{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:16px;padding:12px 14px;margin-bottom:16px;gap:12px;}
#screen-draft .nb-icon{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(91,141,184,.08);border:1px solid var(--blue-border);}
#screen-draft .nb-icon svg{width:17px;height:17px;stroke:var(--blue);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#screen-draft .nb-body{flex:1;min-width:0;font-size:11.5px;line-height:1.45;color:var(--text-secondary);}
#screen-draft .nb-body b{color:var(--text-primary);font-weight:700;}
#screen-draft .nb-btn{flex:none;padding:8px 14px;border:none;border-radius:10px;background:linear-gradient(180deg,var(--gold-mid),var(--gold));color:#0A0A0A;font-family:'Saira',sans-serif;font-weight:700;font-size:12px;cursor:pointer;}
#screen-draft .nb-x{flex:none;width:28px;height:28px;border-radius:8px;background:transparent;border:1px solid var(--border-medium);color:var(--text-muted);font-size:12px;cursor:pointer;}
@keyframes drShimmer{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes drTimerPulse{0%,100%{text-shadow:0 0 30px rgba(255,179,0,.25)}50%{text-shadow:0 0 40px rgba(255,179,0,.35)}}
@keyframes drPulseBadge{0%,100%{box-shadow:0 0 20px rgba(255,179,0,.08)}50%{box-shadow:0 0 30px rgba(255,179,0,.15)}}

/* Header-Branding (dezentes Gold-Logo, alle Screens außer Login) */
.head-left{display:flex;align-items:center;gap:11px;min-width:0;}
.app-brand{width:30px;height:30px;flex:none;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAALkElEQVR42t2ba4wkZbnHf89bVd3TPd2zM7srzMbdBXEFV0ERODmKwZh4WdEP6vGc5JAYL9FEYzRuxCjHg9EEPxgvUaIBQTQEN8cTA95FFo4BTkA+sEAiK4qJwd1FdsCdnZ1bV1d1ve/jh6raqenpnunbxHUr6Uxfaqrq/7zP5f/83/cVuh8eYAHq9fo23/f3qepbgH8BdgM1QOjjUFVGcXS4jgJLwFHgEHCfqt6zuLg4246l/ZAu3wngpqamdqnqx4FrRGTXMCA2EfzqhxfJzzsG/K/ned+am5s7BpjMULqeASQ/YWpq6qOqeoOIbM9u6toMdMaBLwCU1BYCMKuqn19YWLi5HWPuGqvA79mzp6yqtwHXA1UgyX4zZzj44uDkIC1QE5F3lMvl86MouqeAZ5UHCCB79uwJZmdn7wLeoapJZiDZ5Ife7OsoYEXEV9VfLSwsvAdo5d7iFTzBWWu/LyL/oaotIDgLwOeDa1S1JSIvD4JgdxzHP8kwq5dnyKmpqY+IyH8XwHMWgG+vai1jzGVBEMzEcfwo4Akg27Zt22GtPQxsGSTOz3TwhWtp+lHnrbUXh2F43ABqrd0vIlNZpj9bwefh4IwxU57n7QdU6vX6Ns/zngSmMwuZYW4ksongFVTaK3nf18oHeQa4xPc872oR2aGqblDwIopnwBgwWQBJPzk6e5M+r6ZW1E6AwGr617n0r/ZvSAO4DPPVvqruExHt3a5tRdcogQflklIuQ+ApnteBZen6RlB0lTHa/08VrIPECs0Ymi0hsZkhBiRMIrLPF5HLVXWgxCdGKflKfRxqVaU6BhM1R8kHz3TgZ50MooUH1g7Gyt5bC3ECCw2hEQlLTVgMhThJDdNn/jAZ5st9YGfBNfoYfcX3oFaFqQnlVRcl/Nu+hOltLg2FInDNIq/bZ6ddvl9576zgFGZOCnc+FPC7v3iowkIoaUhoX8lTMmPt9LOuru9EZQwEvlKtKC87z3LDJyOmdzmI81xbAOA6AHNtIHs53wEXwaXnOfbfNsbvY0MjhlYiA1UOEan5g3J7MVAK0tdVVyRM73S05sB4HYCN6q8Dm8CO7Y7X70146tkSgYGQgcum+IOWKAE8D8ZKymQd1KbgTaG70DxB6ehetu2znm7+Bjv8geuzpGD9LOFJMWllo2b8tiS4kduv913W21Uq8OxzwsN/9HCqtOxwxMMfhpyIgBElraIrFEM0zdrHnzc0Qmi1BGezWubYMOF1+uycYC3MzAl3PeLz5xlDGAutJE2Om2aAnpNL7pIZj2nGwk8fCHj6GcPcgtCM0prdqcStkjF07Tk5B1gpg7DUFJabgs0I0aCs0x8KfKc4zfmmg7+dFI7NGJ6fE8JmZoB12WD3z6qQOEgSaLZWE6FhKLc/koakkwEsLCwJJ+bhb3NCI1zHVbWTWFX8MS1z7VTY6fD9hj+ybqyD67YSiGIhiiBqrWZsfRFuXakmOuJO0x8q5tfxgNxt84bF6XCxullttj+SGxWzduE7ySqFyEqXuFH4t3d/m60x+CMB3+4B2fvAU8oBjJXAWcWpbPCQhRyimsZ5FuvDlLr1sPkDg5cOYVCYORBgogrbJxzOGZpjKahV5a7dEwpsL0lSktNsQZxlfKujDx9/qJHvlgM0VSCntzoWdsDkuBLF0p0H5KOvqZESC2EkzC1DGMNCCI1I0KQ/T+gFm88wYnOHEJCsBxjzlfdc1aIZCTbJ+gK3Di0ulDabpDX/8FHDDx8qceSF7DcnqO2tEvQ6sP5oMsxaDzDAOVt1pXb10v66FUNYB696iWNrTfnSnWWarTQc1iTbIauGPxxu7c7lFVz2wLqBJqB5sssTXmYAbcLlF1jOe5HywvxK06UjLJn+EKm1cx5o8wjtQRBpB5+/JJPCEru2SoyKL/gDl5UNkqAoiJfdYb0QcOBlra4WDGAdBB7c/bjPkRNmRQkeMVnyhy4rXXhAYuHYccPSstBK0pFsD5M8MToKYZD9b5LAk0c97n7CZymERlQQQ0bIFAdWhLS9frsVlzdZO/yzRwKePmKYXUilbNXVMrd2LIPp6IcxLDeFKEmFzyiRQSXwTVKENqgEzsHsKeHZE8ILpwxhlNXw9p5A18yPnDZCy6ZNVGxTMSTnAKdptWpqd/0HKUJrwBf1eQeLIZxcNJyYT7V824nFdPkq9xBXiH2TLXIJY4hbKRkpBUqltHLuP1wRKn5OknTiIkogivugsrrWNp5JJ0Kcg4t2Wi6YdjgHTz9neOavhqCkVMv9tdzDK0KdOkHt0A5nFHdQV/UMnFoSrtxr+cqHQ16/dyUZOODXj3l89rtjPPWsYaKqPRkhx2aGBt/JEKteuVA4OPj5JeE/r2rx8LeXGSv7vP8bW3nN/mmuuPZcPv6dKfbuNjx60zJveEXCYkNWT8ttgM2MpKZqF0WXwqgPMPpG0vJ38fmO/7k+5PZ7xnnjf72IA/8/jlNYDA233FvjXz91Do/8YYwffzHknEklSrpP07djMyOTw9xaLjCslmEMxE3hi9eEHJ3xufa2STwPLntJzK0fOcmNH5zjZTsSogQ+fOMUlZJh/zsjml28oBM2MzItULvM6w3abEqa6Se3ON58qeUHv6lyqmG4cEfC199/ii1Vx0vPTfjKe0/x4q2OYyd8fvJwhXe9NsEP1ibDbtjMyHS3dSTyQY/YKtvrSq0CTx4LOHeL5cYPzjG9xRLGwkIoXLK7xdfeN8dYoBw+FjA9qYxX0kSYh8F62MymgXcMreEZSecAEgdT48p8w3D345XTCzACL50sufvxClEiTI47mq1UjZYeNUUzEtFxo2muAcCrQsmHmZOGZ44Lb39Nk1YCNx2sccu9NabGlUpJ+fJPJzjwUJXAV/Zd2uSJP3s0GoLvbbYilFvYFWZnCppgTme1z2S4qkRJ2hR98+clbv5MgzcdrHL/4TFu/b9xxkrK3JLhzkeqRInwgTcu8eqLY667torxevdqM8yoO+X0EpV2ucu5tKtLjSAD9RvWQb2mfO/eEr980OcXN5zk368MMQa+dOcENx2sUSk5Pnb1IrdeN8fNPwq455DHeNX1zAj9oRbgWmjGKUsTSafDNIvNVgtOLQst2xtHX2/EAl+55ssVbv5EyIHPzfKXIwGHj/j4Bi59aYvpcxO+ekeJz91eolZx6WD0SrTK5fIXBl1hIKKMlSCMhSsvtGzZmq2uDuDHvw24/0mfpVBoxLLuiGyYqExqxB89GPDAEz7VsmXX9gTjWe57wvCJb1W4476Ayph2W2HX9dZSr9cXRKTeb+yLpMvjtlSVrXXlkvMc735di8ma8tifPH5xyOeFU8LJRSGMhcQN12zls0sLjVQeL6rSXkkZLyv9zj2q6qJMTEw8BezNUpjpJ1Y9k2bqeiV9gMBP3b8ZQ2xhvpGCt13CYJAKlC/GdIWpN+u032lyBURV/+ADj4nIy7XHpyme5rJFC/MNIYohCLIH6iJkjELJcW41xRjwOk5EjKo+5qvqQRF5by95oP1mmj1QS9MVnCZbIlcUM1TPyEXV+Zaag1Kv17eJyIaLpc+0leBDXMfli6WNMZeYbGvZgWyHkTvLwefuL8CBxcXFWQGkUqnsKJVKh1V1zYaJswx8TtXmVfWVjUZjxgAmDMPngOtExJDuqjobwQMkImJE5LpGo3GcwsJWL4qiQ+Vy+QIRuSzbN+SdZeBbIhKo6h3Ly8ufz/dKSdt+u6BWq91ljDkrt81Za38VhmHHbXOnXSSO47vK5fJOEbksA5/8E2yY7Aoc8LKaf3uj0XgfEBVVSq9DfUyiKPpZEATPi8hrRaRWWACv6+w5PhPAF1UIk+W0EyLy6eXl5eszg3TdOrtqo2Ecx496nvdDY0wC7BKRyax8yBk88pIfwDHgFmvthxqNxm8K/EY32j2+Zvv8xMTEVuBtwFtV9QpV3V3wjDNi5FV1CTgqIoeAe40xB3vZPv93TVklE0GKvkgAAAAASUVORK5CYII=") center/contain no-repeat;filter:drop-shadow(0 0 12px rgba(255,179,0,.15));}