/* ---------- Live ---------- */ .livebanner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px} .livedot{width:10px;height:10px;border-radius:50%;background:var(--win);flex:0 0 auto; animation:pulse 1.6s ease-in-out infinite} /* Der Punkt am Live-Reiter pulsierte bisher IMMER gruen — er behauptete also dauerhaft ein laufendes Spiel. Grundzustand ist jetzt grau und ruhig; gruen wird er nur mit .on, und das setzt renderLive() aus LIVE_VIEW.active. */ .ldm{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink3); opacity:.55} .ldm.on{background:var(--win);opacity:1;animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(70,192,122,.45);opacity:1}50%{box-shadow:0 0 0 7px rgba(70,192,122,0);opacity:.72}} .livetag{font-weight:800;letter-spacing:1.6px;color:var(--win);font-size:13px} .livetime{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums} .livemeta{font-size:12px;color:var(--ink3)} .livescore{margin-left:auto;font-size:15px;font-weight:700;color:var(--ink2)} .livescore b.b{color:var(--team-b)} .livescore b.r{color:var(--team-r)} .lgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start} @media(max-width:1080px){.lgrid{grid-template-columns:1fr}} .scpill{font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px;white-space:nowrap; box-shadow:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)} .scpill.hi{color:var(--win)} .scpill.mid{color:var(--ink2)} .scpill.lo{color:var(--loss)} .scpill.na{color:#8b95a5;opacity:.75} .shimmer{display:inline-block;width:150px;height:10px;border-radius:6px;opacity:.55; background:linear-gradient(90deg,#2c323c 25%,#3a414d 50%,#2c323c 75%);background-size:200% 100%; animation:shim 1.4s linear infinite} @keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}} .obars{display:flex;flex-direction:column;gap:10px} .obar{display:grid;grid-template-columns:46px 1fr 108px 1fr 46px;gap:10px;align-items:center; min-height:34px;border-radius:8px} .obar:hover{background:rgba(255,255,255,.04)} .obar .olbl{display:flex;align-items:center;justify-content:center;gap:5px; font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3)} .obar .oval{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .obar .oval.l{text-align:right} .otrack{height:8px;border-radius:6px;position:relative; box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)} .otrack .fill{position:absolute;top:0;height:8px} .otrack.l .fill{right:0;border-radius:4px 0 0 4px;background:var(--team-b)} .otrack.r .fill{left:0;border-radius:0 4px 4px 0;background:var(--team-r)} .ticker{display:flex;flex-direction:column;gap:2px} .tev{display:flex;align-items:center;gap:9px;min-height:34px;padding:5px 6px;border-radius:8px; font-size:12px;color:var(--ink2)} .tev:hover{background:rgba(255,255,255,.04)} .tev .tt{font-variant-numeric:tabular-nums;color:var(--ink3);flex:0 0 38px;font-size:11px} .tev .teamdot{flex:0 0 auto;align-self:center;margin-right:0} .tev b{color:var(--ink)} .tev .teamdot.b{background:var(--team-b)} .tev .teamdot.r{background:var(--team-r)} .livenote{margin-top:12px;font-size:11px;line-height:1.45;color:var(--ink3)} .emptylive{padding:64px 24px;text-align:center} .emptylive .dotoff{width:10px;height:10px;border-radius:50%;background:var(--ink3);margin:0 auto 16px} .emptylive h2{font-size:16px;margin-bottom:6px} .emptylive p{font-size:12.5px;color:var(--ink3)} .modewrap{display:inline-flex;align-items:center;gap:8px} .modewrap.ml{margin-left:auto} .modebadge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700; color:var(--ink3);padding:4px 11px;border-radius:9px;white-space:nowrap; box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)} .mdot{width:7px;height:7px;border-radius:50%;flex:0 0 auto} .mdot.on{background:var(--win)} .mdot.off{background:var(--ink3)} .w-admtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px} .w-admtile{padding:11px 13px;border-radius:11px;box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)} .w-admtile .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)} .w-admtile .v{font-size:21px;font-weight:650;margin-top:3px} .w-admtile .d{font-size:11px;color:var(--ink3)} .w-admh3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:16px 0 8px} .w-admtbl{width:100%;border-collapse:collapse;font-size:12.5px} .w-admtbl th{text-align:left;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);padding:6px 9px} .w-admtbl td{padding:6px 9px;border-top:1px solid rgba(255,255,255,.045)} .w-admtbl td.num,.w-admtbl th.num{text-align:right;font-variant-numeric:tabular-nums} .w-admtbl td.bar{width:130px} .w-admbar{display:block;height:7px;border-radius:4px;background:var(--track,#1e222a);overflow:hidden} .w-admbar i{display:block;height:100%;background:var(--cyan);border-radius:0 4px 4px 0} .w-admbar.hot i{background:var(--loss,#ff6b5e)} .spechint{display:flex;align-items:center;gap:16px;padding:18px 20px;color:var(--ink3); font-size:12px;line-height:1.55} .spechint b{color:var(--ink2)} .spechint .specicon{font-size:22px;opacity:.65;flex:0 0 auto} /* ---------- Live-Spielerkarten ---------- */ .trhead{display:flex;align-items:center;gap:10px;margin-bottom:11px} .trhead .tname{font-size:13.5px;font-weight:700;letter-spacing:.2px} .trhead .tmeta{margin-left:auto;font-size:11px;color:var(--ink3)} .trbar{width:30px;height:5px;border-radius:3px;flex:0 0 auto} /* Ein Team = EINE Reihe aus 5 Karten. Erst wenn die Karten zu schmal für die LP-Zeile würden, wird umgebrochen (dann zwangsläufig 3+2). */ .cardsrow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} @media(max-width:960px){.cardsrow{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.cardsrow{grid-template-columns:repeat(2,1fr)}} .pcard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:2/3; background:#1d222a;box-shadow:8px 8px 16px var(--lo),-6px -6px 14px var(--hi); display:flex;flex-direction:column;justify-content:space-between} .pcard.me{outline:2px solid rgba(79,195,232,.65);outline-offset:-2px} .pcard .bgfall{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:68px;font-weight:800;color:rgba(255,255,255,.08)} .pcard .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} /* Kräftigerer Verlaufs-Scrim oben UND unten — die Texte müssen auch auf hellem Splash-Artwork (Leona, Syndra) sicher lesbar bleiben. */ .pcard .ovl{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,12,16,.94) 0%,rgba(10,12,16,.78) 12%,rgba(10,12,16,.34) 26%,rgba(10,12,16,0) 42%, rgba(10,12,16,.18) 54%,rgba(9,11,15,.72) 76%,rgba(8,10,13,.97) 100%)} .pcard .top,.pcard .bot{position:relative;z-index:2;padding:11px 12px} .pcard .cname{font-size:10px;font-weight:700;color:#aab5c5;letter-spacing:.7px;text-transform:uppercase; text-shadow:0 1px 3px rgba(0,0,0,.9)} .pcard .cwr{font-size:12.5px;font-weight:800;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.9)} .pcard .cwr.good{color:#5fe09a} .pcard .cwr.mid{color:#dfe5ee} .pcard .cwr.bad{color:#f0906a} /* "na" = kein Messwert. Bewusst farblos: keine Wertung ohne Zahl dahinter. */ .pcard .cwr.na{color:#8b95a5;font-weight:700} .pcard .cwr.dim{opacity:.6} .streakb{position:absolute;top:10px;right:10px;z-index:3;font-size:11px;font-weight:800; padding:3px 9px;border-radius:9px;background:rgba(13,16,21,.72)} .streakb.hot{color:#ffb35c} .streakb.cold{color:#9cd2ff} /* Name-Zeile: Name darf kürzen, der Rang-Chip bleibt immer vollständig sichtbar. */ .pcard .pname{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:800;line-height:1.3} .pcard .pname a{flex:1 1 auto;min-width:0;color:#fff;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.9); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pcard .pname a:hover{color:var(--cyan);text-decoration:underline} .pcard .pname .ptag{color:#aeb9c9;font-weight:600} .pcard .prank{flex:0 0 auto;font-size:9.5px;font-weight:800;color:#e6ebf3;letter-spacing:.3px; background:rgba(255,255,255,.16);border-radius:6px;padding:1px 6px} /* LP-Zeile: LP links, Score-Pill rechts abgesetzt — eine klare Leserichtung. */ .pcard .pline{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:6px; border-top:1px solid rgba(255,255,255,.11); font-size:10.5px;color:#c3ccd9;text-shadow:0 1px 3px rgba(0,0,0,.85)} .pcard .pline .wl2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .pcard .lp{flex:0 0 auto;font-weight:800;color:#efc964;font-variant-numeric:tabular-nums} .pcard .scpill{margin-left:auto;flex:0 0 auto;background:rgba(8,10,14,.82);box-shadow:none; border:1px solid rgba(255,255,255,.12)} .pcard .shimmer{width:70%} /* Stichprobenzeile: nur bei getrackten Accounts. Sie sagt, worauf die Zahlen der Karte beruhen — ohne sie liest man sie als „letzte 20 Games". */ .pcard .psample{margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.3px; color:#9fb6c8;text-shadow:0 1px 3px rgba(0,0,0,.9); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Runen-/Spell-Zeile auf der Karte (Keystone + Secondary links, 2 Spells rechts) */ .pcard .rsrow{position:relative;z-index:2;display:flex;align-items:center; justify-content:space-between;gap:6px;margin-bottom:8px} .rsgrp{display:flex;align-items:center;gap:5px;min-width:0} .iwell{position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:7px;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;cursor:default; background:rgba(11,13,17,.78);border:1px solid rgba(255,255,255,.13); box-shadow:0 2px 6px rgba(0,0,0,.55)} .iwell.rune{border-radius:50%;background:rgba(11,13,17,.86)} .iwell.tree{width:22px;height:22px;border-radius:50%} .iwell.spell{border-radius:6px;background:rgba(11,13,17,.7)} .iwell.spell img{border-radius:5px} .iwell img{width:100%;height:100%;object-fit:contain;display:block} .iwell .ifall{display:none;font-size:8.5px;font-weight:800;letter-spacing:.2px;color:#c3ccd9} /* ---------- Account-Auswahl ---------- */ /* Die Topbar ist EINE Zeile: Logo/Name, Reiter, Accountwahl, Bedienelemente. Der Accountblock schiebt sich per margin-left:auto nach rechts und darf schrumpfen; die Bedienelemente reihen sich dahinter an. Was zuerst weicht, wenn es eng wird, steht bei `.syncstat` weiter oben. */ .acctwrap{position:relative;min-width:0;flex:0 1 auto} .tb-sync{gap:10px} /* EINE Zeile - aber nur ab Tablet aufwaerts. Unterhalb von 641 px gilt der Telefon-Umbruchpunkt weiter unten, der die Topbar bewusst umbrechen laesst (Logo/Name → Reiter → Account → Bedienelemente). Ein `nowrap` in der Grundregel wuerde ihn aushebeln und die Seite seitwaerts schieben - genau das hat der Rauchtest auf allen neun Tabs gemeldet. */ @media (min-width:641px){ /* 10 px zwischen den Bloecken: die vier Zwischenraeume bringen die letzten 8 px, die dem Accountblock im Neo-Skin fehlten. Getrennt wird ohnehin durch die beiden Linien, nicht durch Luft. */ .topbar{gap:6px 10px;flex-wrap:nowrap} /* Die Reiterleiste darf NICHT schrumpfen - ein abgeschnittener Reiter ist ein unerreichbarer Reiter. Sie behaelt ihre natuerliche Breite; was nachgibt, ist der Accountblock (sein Name ellipsiert sauber). */ .viewseg{margin-left:4px;flex:0 0 auto} /* Auch die Marke schrumpft NICHT mehr: bei 1600 px stand sonst "LoL S…" da — es fehlten ganze vier Pixel. Ein mitten im Wort abgeschnittener Markenname ist derselbe Fehler wie der abgeschnittene Untertitel darueber. Sie faellt stattdessen als Ganzes weg, sobald es wirklich eng wird (Regel weiter unten); das Zeichen bleibt. */ .appname{white-space:nowrap;flex:0 0 auto} /* Der Untertitel ist hier ERSATZLOS weg — nicht erst ab einer Grenze. Grund (nachgemessen, nicht geschaetzt): `.wrap` ist auf 1280 px (Neo) bzw. 1400 px (Bento) gedeckelt. Die Zeile war deshalb bei 1920 px genauso breit wie bei 1340 px, und der Untertitel stand in BEIDEN Skins auch am breitesten Fenster als "LOKALES DASHBOAF" da. Ein Text, der nie vollstaendig zu lesen ist, ist kein Untertitel. Am Telefon hat er eine eigene Zeile und bleibt dort erhalten. */ .appname span{display:none} /* Aus demselben Grund der Sync-Status: die alte Grenze `max-width:1520px` konnte wegen des 1280er-Deckels nie greifen, er stand bei jeder Breite als "zuletzt sy…" da. Der vollstaendige Zeitstempel steht im Sync-Panel und in der Verwaltung. Das Element bleibt im DOM, weil paintSync() ungeprueft hineinschreibt. */ .syncstat{display:none} /* Gruppieren statt aufreihen: eine Trennlinie vor dem Account, eine vor den Bedienelementen. Damit zerfaellt die Zeile in drei lesbare Bloecke (Marke+Navigation | Account | Vorwahlen+Sync) statt in fuenf gleichrangige Einzelteile. */ .tb-profile{margin-left:auto;padding-left:14px;min-width:0} /* flex:0 0 auto ist hier PFLICHT. Die Bedienelemente sind mit `justify-content:flex-end` ausgerichtet; schrumpft der Kasten unter die Breite seines Inhalts, laeuft der Inhalt nach LINKS aus dem Kasten heraus und legt sich ueber die Reiter — bei 641 px stand „Neo Bento" quer ueber „Ideen" und „Verwaltung". Weil dieser Ueberlauf nach links geht, waechst scrollWidth NICHT: die Zeile meldete 0 Ueberlauf und sah trotzdem zerstoert aus. Nur das Bildschirmfoto hat es gezeigt. Was stattdessen nachgibt, ist der Accountblock — sein Name ellipsiert sauber, und das Bild bleibt stehen. */ .tb-sync{flex:0 0 auto;padding-left:14px;border-left:1px solid var(--grid)} .tb-profile{flex:0 1 auto} } /* Enger wird es zuerst an den Reitern selbst, bevor irgendetwas wegfaellt. Die Stufen sind an der TATSAECHLICHEN Inhaltsbreite ausgerichtet (Deckel 1280/1400 + Innenabstand), nicht an Wunschbreiten: oberhalb von 1200 px Fensterbreite aendert sich am verfuegbaren Platz nichts mehr. */ @media (min-width:641px) and (max-width:1299px){ .viewseg button{padding:6px 8px;font-size:11.5px} .topbar{gap:6px 10px} /* Zwei Zeilen Accounttext trieben die Kopfzeile hier vorher IN die Bedienelemente hinein (nachgestellt bei 1024 px, beide Skins): der Rang stand quer ueber "Neo Bento". Die alte Regel `.who .meta` war wirkungslos, weil `.acctbtn .who .meta{display:block}` weiter unten im Blatt staerker ist. Deshalb hier mit derselben Staerke. */ .topbar .acctbtn .who .meta{display:none} } @media (min-width:641px) and (max-width:1099px){ .viewseg button{padding:5px 7px;font-size:11px} /* Zuletzt weicht der Markenname — das Zeichen bleibt. */ .topbar .appname{display:none} } /* Engste Stufe: das Band zwischen Telefon-Umbruchpunkt und Notebook. NACHGEMESSEN: der Stand d44c6c9 schob die Seite hier seitwaerts (bei 641 px um 95 px in Neo, bei 660 px um 89 px in Bento) — die EINE Zeile war unterhalb von rund 780 px also nie eingeloest, sie sah nur so aus, weil die Bedienelemente nach LINKS ueber die Reiter liefen. Drei Griffe, in dieser Reihenfolge (erst enger stellen, dann kuerzen, zuletzt wandern lassen — nie abschneiden): 1. alle Abstaende und Schriftgrade herunter, 2. der Accountblock zieht sich auf sein BILD zusammen; der Name steht weiterhin im Menue, das ein Klick oeffnet — nichts geht verloren, 3. `flex:0 1 auto` an der Reiterleiste als Sicherheitsventil. Sie ist eine `.xstrip`: reicht der Platz wirklich nicht mehr (unterhalb von rund 780 px), wandert sie waagerecht statt zu ueberlaufen, mit dem ausblendenden Rand als Hinweis. Jeder Reiter bleibt erreichbar — dieselbe Bedienung wie am Telefon. Ueber diesem Band bleibt sie starr (`flex:0 0 auto` weiter oben), damit kein Reiter dort je hinter dem Accountblock verschwindet. */ @media (min-width:641px) and (max-width:1023px){ .topbar{padding:11px 16px;gap:6px 8px} .viewseg{padding:3px;gap:1px;flex:0 1 auto;min-width:0} .viewseg button{padding:4px 5px;font-size:10.5px} /* Das Ventil MUSS hier ausformuliert werden: die Klasse `.xstrip` traegt ihre Scroll- und Ausblendregeln ausschliesslich im Telefon-Block (max-width:640px). Oberhalb davon war `flex:0 1 auto` allein wirkungs- los — der Kasten schrumpfte zwar, die Knoepfe liefen aber einfach heraus und legten sich ueber Account und Bedienelemente (bei 641 px stand die halbe Reiterleiste auf dem Profilbild). Erst overflow macht aus dem Schrumpfen ein Wandern. Die Steuerung dafuer ist schon da und breitenunabhaengig: xstripPaint() setzt .xmore/.xback beim Scrollen und beim Aufbau, xstripReveal() holt den aktiven Reiter in den Blick. */ .viewseg{overflow-x:auto;overflow-y:hidden;scrollbar-width:none; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;max-width:100%} .viewseg::-webkit-scrollbar{display:none} .viewseg.xmore{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)} .viewseg.xback{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px); mask-image:linear-gradient(90deg,transparent,#000 24px)} .viewseg.xback.xmore{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 26px),transparent)} .tb-prefs{gap:4px} .tb-prefs .seg button{padding:3px 5px;font-size:9.5px} .topbar .acctbtn .who{display:none} .tb-profile{padding-left:10px;flex:0 0 auto} .tb-sync{padding-left:10px;gap:8px} } /* width:100% + min-width:0 sind hier NICHT Kosmetik: ein