:root{ --bg:#eef0ea; --card:#ffffff; --ink:#1d251f; --muted:#414a43; --line:#d8ded6; --line2:#b8c2b4; --r-blue:#2b6fbe; --r-green:#2e7d43; --r-bronze:#a78317; --r-red:#8f1420; --r-violet:#5f2ba8; --r-orange:#cf5a1e; --plate:rgba(8,18,10,.74); --accent:#2e7a3b; /* bara de sub pagina deschisă din meniu: verdele de accent se citește bine pe fond deschis, dar pe cel închis are nevoie de o variantă vie */ --navsel:#2e7a3b; /* albastrul si verdele Google, deschise cu ~20% */ --hs:#68A1F6; --as:#5DBA75; --outink:#9c6a6a; --evdet:#2b302b; /* scara de procente: albastru tare -> rosu; violet pentru note peste 9 */ --p90:#2b6fbe; --p80:#5b9bd5; --p70:#2e7d43; --p60:#5aa869; --p50:#9a7b0c; --p0:#8f1420; --porto:#cf5a1e; --pviolet:#6d28d9; /* Culoarea etichetei de rol din tabelul vocilor. Stă pe TEXT, nu pe fundal (decizia din 11 august 2026), deci are nevoie de două palete: tonurile închise se citesc pe card alb, dar dispar pe fond întunecat. */ --rol-arbitru:#86419c; --rol-arbitru_amator:#9a5fae; --rol-fotbalist:#7c3aed; --rol-fotbalist_activ:#5b21b6; --rol-comentator:#0369a1; --rol-jurnalist:#64748b; --rol-antrenor:#c2410c; --rol-oficial_club:#b45309; --rol-echipa:#9d174d; --rol-publicatie:#475569; --rol-oficial:#111827; /* VAR: magenta, ținut anume în afara paletei de teren - verdele, galbenul, portocaliul și roșul spun deja altceva pe un cartonaș. */ --var-ink:#25687d; --ref-ink:#983aa1; --var-soft:#7fa4b0; --ref-soft:#bd8ac2; --bal-soft:#b5a565; /* avertismentele din panoul de voturi: conflictul tare, „la cald" mai șters */ --warn-ink:#b45309; --warn-soft:#a16207; --titlebg:#f6f1e4; --dtrack:#e4e7de; --chip:#e6eae1; --dwarn:#c2620a; --dhot:#8f1420; } /* Întunericul are tentă de ALBASTRU, nu de verde, din 7 septembrie 2026 (decizia utilizatorului, după trei tente puse una lângă alta pe paginile reale). Motivul e paleta de informație: verdele e culoare care SPUNE ceva - selecția, oaspeții, nota bună, terenul - iar un fundal verde fură din fiecare; magenta arbitrului și notele calde (bronz, portocaliu) se topesc într-un fundal vișiniu. Albastrul închis e singurul ton pe care nu-l folosim ca să spunem ceva. Clarul rămâne crem cu tentă verde: acolo cartelele sunt albe și tenta stă doar în fundal. */ @media (prefers-color-scheme: dark){ :root{ --bg:#0d1117; --card:#161b24; --ink:#e8edf5; --muted:#98a3b5; --line:#262e3a; --line2:#3c4759; --hs:#7FB0FF; --as:#6FD189; --outink:#e0c3c3; --evdet:#d9dee7; --p90:#7fb0ff; --p80:#a9cbff; --p70:#6fd189; --p60:#a6e0b3; --p50:#e8c34a; --p0:#ff6b74; --porto:#ff8a5c; --pviolet:#c4a7f5; --rol-arbitru:#c9aae6; --rol-arbitru_amator:#d7bfea; --rol-fotbalist:#a78bfa; --rol-fotbalist_activ:#c4b5fd; --rol-comentator:#38bdf8; --rol-jurnalist:#94a3b8; --rol-antrenor:#fb923c; --rol-oficial_club:#fbbf24; --rol-echipa:#f472b6; --rol-publicatie:#cbd5e1; --rol-oficial:#e5e7eb; --var-ink:#48c4d7; --ref-ink:#e0a5e9; --var-soft:#3f7e8a; --ref-soft:#8f6b96; --bal-soft:#8a7d4f; --warn-ink:#fbbf24; --warn-soft:#e8c34a; --navsel:#6fd189; --titlebg:rgba(198,164,92,.11); --dtrack:rgba(255,255,255,.13); --chip:#1f2632; --dwarn:#f0a145; --dhot:#ff5d6b; } } :root[data-theme="dark"]{ --bg:#0d1117; --card:#161b24; --ink:#e8edf5; --muted:#98a3b5; --line:#262e3a; --line2:#3c4759; --hs:#7FB0FF; --as:#6FD189; --outink:#e0c3c3; --evdet:#d9dee7; --p90:#7fb0ff; --p80:#a9cbff; --p70:#6fd189; --p60:#a6e0b3; --p50:#e8c34a; --p0:#ff6b74; --porto:#ff8a5c; --pviolet:#c4a7f5; --rol-arbitru:#c9aae6; --rol-arbitru_amator:#d7bfea; --rol-fotbalist:#a78bfa; --rol-fotbalist_activ:#c4b5fd; --rol-comentator:#38bdf8; --rol-jurnalist:#94a3b8; --rol-antrenor:#fb923c; --rol-oficial_club:#fbbf24; --rol-echipa:#f472b6; --rol-publicatie:#cbd5e1; --rol-oficial:#e5e7eb; --var-ink:#48c4d7; --ref-ink:#e0a5e9; --var-soft:#3f7e8a; --ref-soft:#8f6b96; --bal-soft:#8a7d4f; --warn-ink:#fbbf24; --warn-soft:#e8c34a; --navsel:#6fd189; --titlebg:rgba(198,164,92,.11); --dtrack:rgba(255,255,255,.13); --chip:#1f2632; --dwarn:#f0a145; --dhot:#ff5d6b; } :root[data-theme="light"]{ --bg:#eef0ea; --card:#ffffff; --ink:#1d251f; --muted:#414a43; --line:#d8ded6; --line2:#b8c2b4; --navsel:#2e7a3b; --hs:#68A1F6; --as:#5DBA75; --outink:#9c6a6a; --evdet:#2b302b; --p90:#2b6fbe; --p80:#5b9bd5; --p70:#2e7d43; --p60:#5aa869; --p50:#9a7b0c; --p0:#8f1420; --porto:#cf5a1e; --pviolet:#6d28d9; /* Culoarea etichetei de rol din tabelul vocilor. Stă pe TEXT, nu pe fundal (decizia din 11 august 2026), deci are nevoie de două palete: tonurile închise se citesc pe card alb, dar dispar pe fond întunecat. */ --rol-arbitru:#86419c; --rol-arbitru_amator:#9a5fae; --rol-fotbalist:#7c3aed; --rol-fotbalist_activ:#5b21b6; --rol-comentator:#0369a1; --rol-jurnalist:#64748b; --rol-antrenor:#c2410c; --rol-oficial_club:#b45309; --rol-echipa:#9d174d; --rol-publicatie:#475569; --rol-oficial:#111827; --var-ink:#25687d; --ref-ink:#983aa1; --var-soft:#7fa4b0; --ref-soft:#bd8ac2; --bal-soft:#b5a565; --warn-ink:#b45309; --warn-soft:#a16207; --titlebg:#f6f1e4; --dtrack:#e4e7de; --chip:#e6eae1; --dwarn:#c2620a; --dhot:#8f1420; } *{box-sizing:border-box} /* controalele native (săgeata select-ului, scrollbar) urmează tema, nu rămân pe varianta de lumină, altfel săgeata dropdown-ului era invizibilă pe fond închis */ :root{ color-scheme:light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; } } :root[data-theme="dark"]{ color-scheme:dark; } body{ background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; margin:0; padding:22px 14px 48px; } .wrap{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:18px} a{color:inherit} /* ── bara de meniu, lipită de marginea de sus ────────────────────────────── Un singur rând: marca la stânga, paginile la mijloc, sezonul la dreapta. Rămâne lipită și OPACĂ la derulare, ca să te poți întoarce sus din orice punct al unei pagini lungi (cerut de utilizator pe 18 august 2026). Marginile negative o duc de la un capăt la altul al ecranului, peste paddingul lui `body`. Anume NU `100vw`: acela numără și bara de derulare, deci ar fi produs derulare orizontală pe desktop. `--navh` e înălțimea ei, măsurată în JS: capetele lipite ale tabelelor de jucători se opresc SUB bară, nu dedesubtul ei. Fără asta, antetul cu care te uiți la coloane dispărea în spatele meniului. */ /* Fără padding pe verticală, ci înălțime minimă pe rândul dinăuntru: paginile se întind astfel pe toată înălțimea barei, iar bara care marchează pagina deschisă ajunge chiar la marginea de jos. Cu padding, ar fi plutit la câțiva pixeli deasupra ei și n-ar mai fi arătat a meniu. */ #topbar{ position:sticky; top:0; z-index:45; background:var(--bg); margin:-22px -14px 18px; padding:0 14px; border-bottom:1px solid var(--line); } .sitebarin{ max-width:1060px; margin:0 auto; display:flex; align-items:stretch; gap:10px; min-height:48px; } .brand{ display:flex; align-items:center; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; text-decoration:none; white-space:nowrap; flex:none; } .brand:hover{ color:var(--ink); } .sitebarin .mainnav{ flex:1; margin:0; } .themetgl{ align-self:center; } .seasonbox{ display:flex; align-items:center; gap:6px; flex:none; white-space:nowrap; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; } /* Regula de bază a selectorului stă ÎNAINTEA mediilor de mai jos, fiindcă `font:inherit` e o prescurtare care rescrie și `font-size`: pusă după, ea anula micșorarea de pe telefon la aceeași specificitate, iar selectorul rămânea de 85px oricâte trepte adăugam. */ .seasonsel{ background:var(--card); color:inherit; border:1px solid var(--line); border-radius:6px; padding:1px 4px; font:inherit; font-weight:600; letter-spacing:normal; text-transform:none; cursor:pointer; } /* Pe ecran îngust bara se strânge ca să rămână pe UN rând: dispare marca, dispare cuvântul „Sezonul" (rămâne anul, care e comanda), iar paginile și selectorul își strâng paddingul. Cu două rânduri, bara lipită ar fi mâncat 87px permanent din capul fiecărei pagini de telefon. */ /* Marca pleacă prima, la 860px, nu la 700 ca restul: e cel mai lat element al barei (170px măsurați) și singurul pur decorativ - drumul spre prima pagină rămâne pe „Fotbal". De când bara are și căutare, fără treapta asta rândul se rupea în două între 700 și 780px. */ @media(max-width:860px){ .brand{ display:none; } } @media(max-width:700px){ .seasonlbl{ display:none; } .sitebarin{ gap:6px; } .sitebarin .mnav{ padding:0 9px; font-size:12.5px; } .sitebarin{ min-height:44px; } .sitebarin .mainnav{ gap:4px; } .seasonsel{ font-size:11.5px; } } /* încă o treaptă, ca să încapă și pe telefoanele de 360px (Android obișnuit): măsurat, la 400px lipseau 26px din cei 358 necesari */ @media(max-width:400px){ .sitebarin{ gap:5px; } .sitebarin .mnav{ padding:0 7px; font-size:12px; } .seasonsel{ font-size:11px; padding:1px 2px; } } /* ── bara de JOS (telefon) ────────────────────────────────────────────────── Sub 700px meniul principal coboară la degetul mare, ca într-o aplicație: patru butoane, iconiță + etichetă, butonul aprins cu o liniuță deasupra. Bara de sus rămâne cu marca (revine la lățimea asta - are loc, fiindcă paginile au plecat), căutarea, sezonul și tema. Submeniul Fotbal (Etapa curentă | Sezon) dispare și el: e exact ce spun primele două butoane. Submeniurile Arbitraj și Statistici rămân, sunt taburi de pagină. Sezonul se citește din padding-ul de jos al lui body, ca ultimul rând al oricărei pagini să nu rămână sub bară; safe-area e pentru telefoanele cu bară de gesturi. */ #barajos{ display:none; } #bjfoaie{ display:none; } @media(max-width:700px){ #barajos{ position:fixed; left:0; right:0; bottom:0; z-index:46; display:grid; grid-template-columns:repeat(4,1fr); background:var(--card); border-top:1px solid var(--line); padding:5px 4px calc(6px + env(safe-area-inset-bottom,0px)); } #barajos button{ background:none; border:0; padding:5px 2px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); cursor:pointer; position:relative; font:600 10.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } #barajos button svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #barajos button.on{ color:var(--navsel); font-weight:800; } #barajos button.on svg{ stroke-width:2.1; } #barajos button.on::before{ content:""; position:absolute; top:-6px; left:50%; width:22px; height:3px; border-radius:0 0 3px 3px; background:var(--navsel); transform:translateX(-50%); } #barajos button:focus-visible{ outline:2px solid var(--navsel); outline-offset:-2px; border-radius:8px; } .bjcnt:empty{ display:none; } #barajos .bjcnt{ position:absolute; top:1px; right:calc(50% - 21px); min-width:15px; height:15px; line-height:15px; border-radius:8px; background:var(--warn-ink); color:#fff; font-size:9.5px; font-weight:800; padding:0 4px; text-align:center; } body{ padding-bottom:calc(64px + env(safe-area-inset-bottom,0px)); } .brand{ display:flex; } .sitebarin .mainnav{ display:none; } .statsub.secfotbal{ display:none; } /* foaia „Mai mult": peste bară, ancorată jos, se închide la atingerea fondului */ #bjfoaie:not([hidden]){ display:block; position:fixed; inset:0; z-index:47; } .bjfond{ position:absolute; inset:0; background:rgba(0,0,0,.45); } .bjlista{ position:absolute; left:0; right:0; bottom:0; background:var(--card); border-radius:14px 14px 0 0; padding:6px 0 calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 24px rgba(0,0,0,.25); } .bjlista::before{ content:""; display:block; width:36px; height:4px; border-radius:2px; background:var(--line2, var(--line)); margin:4px auto 6px; } .bjsec{ padding:8px 16px 3px; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .bjlista a{ display:flex; align-items:center; padding:11px 16px; font-weight:600; font-size:14px; text-decoration:none; color:var(--ink); border-top:1px solid var(--line); } .bjlista a:active{ background:var(--bg); } .bjlista a .bjcnt{ margin-left:auto; min-width:18px; height:18px; line-height:18px; border-radius:9px; background:var(--warn-ink); color:#fff; font-size:11px; font-weight:800; padding:0 5px; text-align:center; } } /* ── căutarea globală ─────────────────────────────────────────────────────── Stă în bară, între pagini și sezon: acolo o caută toată lumea. Pe ecran lat e o casetă vizibilă; sub 820px rămâne doar lupa, iar la atingere caseta se întinde peste toată bara (`body.srchon`). O casetă permanentă ar fi rupt pe două rânduri exact bara care acum ține pe UN rând până la 360px. Poziționarea absolută de pe telefon se raportează la #topbar, care e `sticky`, deci element poziționat - .sitebarin nu e. */ .srch{ position:relative; display:flex; align-items:center; gap:6px; flex:none; } .srchico, .srchx{ width:32px; height:32px; flex:none; border-radius:50%; padding:0; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; font-size:14px; line-height:1; align-items:center; justify-content:center; } .srchico{ display:none; } .srchx{ display:none; } .srchico:hover, .srchx:hover{ color:var(--ink); } /* Proprietăți de font scrise pe bucăți, nu `font:inherit`: prescurtarea rescrie și `font-size`, iar bara își strânge litera pe telefon (capcana plătită deja la selectorul de sezon). */ .srchinp{ width:150px; min-width:0; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:5px 9px; font-family:inherit; font-size:13px; font-weight:500; letter-spacing:normal; text-transform:none; outline:none; transition:width .14s ease; } .srchinp::placeholder{ color:var(--muted); } .srchinp:focus{ border-color:var(--navsel); } /* Lărgirea la focus doar unde chiar prisosește loc: sub 1000px cei 60px în plus împingeau bara pe două rânduri exact în clipa în care începeai să scrii, adică mutau pagina sub degete. */ @media(min-width:1000px){ .srchinp:focus{ width:210px; } } .srchdd{ position:absolute; top:calc(100% + 7px); right:0; width:342px; display:none; max-height:min(72vh, 470px); overflow-y:auto; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:5px; box-shadow:0 14px 34px rgba(0,0,0,.24); } .srchdd.on{ display:block; } .srchcat{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:9px 8px 4px; } .srchrow{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; cursor:pointer; text-decoration:none; color:var(--ink); } .srchrow:hover, .srchrow.sel{ background:var(--bg); } .srchrow .tlogo{ height:20px; width:26px; flex:none; } /* Cine n-are siglă (arbitru, voce) primește un semn de aceeași lățime, ca numele să înceapă pe aceeași verticală în toată lista. */ .srchsg{ width:24px; flex:none; text-align:center; font-size:14px; color:var(--muted); } .srchnm{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .srchnm b{ color:var(--navsel); font-weight:800; } .srchsub{ margin-left:auto; padding-left:8px; font-size:11.5px; color:var(--muted); white-space:nowrap; flex:none; } .srchgol{ padding:16px 10px; font-size:13px; color:var(--muted); text-align:center; } .srchgol i{ display:block; margin-top:5px; font-size:11.5px; font-style:normal; opacity:.85; } @media(max-width:820px){ .srchinp{ display:none; } .srchico{ display:flex; } body.srchon .srch{ position:absolute; left:14px; right:14px; top:0; bottom:0; background:var(--bg); z-index:3; } /* Bara groasă de sub pagina deschisă e trasă cu `margin-bottom:-1px` peste linia de jos a meniului, deci iese din cutia pe care o acoperă stratul de căutare și rămânea o codiță verde sub casetă. Meniul se ascunde de tot cât ține căutarea - e oricum dedesubt. */ body.srchon .mainnav{ visibility:hidden; } body.srchon .srchico{ display:none; } body.srchon .srchx{ display:flex; } body.srchon .srchinp, body.srchon .srchinp:focus{ display:block; flex:1; width:auto; } body.srchon .srchdd{ left:0; right:0; width:auto; } } .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 18px; } .card h3{ margin:0 0 8px; font-size:14.5px; } .card p{ margin:6px 0; font-size:13.5px; line-height:1.55; max-width:72ch; } .card p.src{ color:var(--muted); font-size:12px; } /* echipa mea */ .myteam{ display:flex; align-items:center; gap:14px; cursor:pointer; border-left:5px solid var(--tc); } .myteam .badge{ width:44px; height:44px; border-radius:12px; background:var(--tc); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; } .myteam .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; } .myteam .nm{ font-size:18px; font-weight:800; } .myteam .rec{ margin-left:auto; text-align:right; font-size:12.5px; color:var(--muted); } .myteam .rec b{ color:var(--ink); font-size:16px; } /* clasament */ .standings table{ width:100%; border-collapse:collapse; font-size:13.5px; margin-top:10px; } /* Cifrele stau CENTRAT în celulă, nu lipite de marginea din dreapta. Alinierea la dreapta e bună când compari coloane de numere lungi și inegale (bani, populații); aici toate au una sau două cifre, iar lipite de linia de despărțire păreau ale coloanei următoare. */ .standings th, .standings td{ padding:9.5px 8px; text-align:center; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; } .standings th{ padding-top:6px; padding-bottom:6px; } .standings th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-top:none; } .standings td.tm, .standings th.tm{ text-align:left; } .standings tr.row{ cursor:pointer; } .standings tr.row:hover td{ background:var(--bg); } .standings .dot{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:8px; vertical-align:baseline; } .standings tr.me td{ font-weight:800; } .standings td.pts{ font-weight:800; } /* Rândul de antet al grupei a doua: arată ca un al doilea cap de tabel, cu o linie de 1px deasupra, iar eticheta cade pe aceeași verticală cu cea din antetul de sus. Nu e clicabil și nu se aprinde la hover - e un titlu. */ /* Aerul de deasupra etichetei e cât cel de dedesubt (6px de fiecare parte, cerut de utilizator pe 31 august 2026): rândul se citește ca un antet, nu ca o pauză, iar clasamentul cu play-off se scurtează cu 9px - exact ce-i lipsea ca să se termine odată cu cardul jucătorilor din dreapta. */ .standings tr.stghead td{ border-top:1px solid var(--line); padding-top:6px; padding-bottom:6px; } .standings tr.stghead{ cursor:default; } .standings tr.stghead:hover td{ background:none; } .standings td.stghd{ font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); } .standings td.stgcell{ position:relative; } /* Forma: coloană a ei, îngustă, ÎNAINTEA meciurilor. Cât a stat în celula echipei, bulinele porneau de unde se termina numele, deci „CFR" și „Csíkszereda" le duceau la verticale diferite - o coloană care nu era coloană. Lățimea e scrisă, ca antetul „Formă" să n-o întindă. */ /* Aliniate la DREAPTA, nu la centru: cel mai recent meci e ultima bulină, deci el trebuie să cadă mereu pe aceeași verticală. Centrat, o echipă cu patru meciuri jucate își muta tot șirul cu jumătate de bulină. */ .standings th.frmc, .standings td.frmc{ width:46px; padding-left:4px; padding-right:4px; white-space:nowrap; text-align:right; } .standings td.frmc .frm{ margin-left:0; } /* Pe telefon antetul „FORMĂ" e mai lat decât bulinele lui (56px față de 34) și împingea cardul peste ecran, cu 10px. Cinci buline colorate nu au nevoie de etichetă; tooltipul rămâne pe celulă. */ @media (max-width:620px){ .standings th.frmc, .standings td.frmc{ width:34px; } .frmlbl{ display:none; } } /* Pe telefon clasamentul din Fotbal ține M, V, E, Î, GM, GP și Pct (cerut de utilizator pe 6 septembrie 2026, în două trepte: întâi fără goluri, apoi cu golurile marcate și primite în coloane separate, înaintea punctelor): doar forma iese, ca numele și cifrele să se citească fără să se înghesuie. Clasamentul fără greșeli (.clasarbtbl) și modalul lui nu se ating - acolo tabelul derulează. */ @media (max-width:620px){ .card.standings th.frmc, .card.standings td.frmc{ display:none; } } .standings .stgpill{ position:absolute; top:5px; right:6px; z-index:1; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); background:var(--card); padding:0 5px; white-space:nowrap; border-radius:999px; line-height:15px; } /* Numărul locului, colorat cu soarta echipei. Culoarea o pune fiecare rând, din SOARTA; aici rămâne doar greutatea, ca cele șase culori să se citească pe o cifră mică. */ .standings td.stpz{ font-weight:800; cursor:help; } /* etape */ .roundsnav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .rchip{ border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer; color:var(--ink); font-family:inherit; } .rchip.active{ background:var(--accent); border-color:var(--accent); color:#fff; } .rchip.disabled{ opacity:.45; cursor:default; font-weight:500; } .mlist{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:760px){ .mlist{ grid-template-columns:1fr; } } .mcard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:border-color .15s; } .mcard:hover{ border-color:var(--accent); } .mcard .when{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; } .mcard .teams{ display:flex; align-items:center; gap:10px; justify-content:space-between; } .mcard .tn{ font-weight:800; font-size:15.5px; flex:1; display:flex; align-items:center; gap:7px; } .mcard .tn.right{ justify-content:flex-end; text-align:right; } .mcard .dot{ width:11px; height:11px; border-radius:3px; flex:none; } .mcard .sc{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--bg); border-radius:8px; padding:2px 10px; } .mcard .gls{ font-size:12px; color:var(--muted); line-height:1.5; } .mcard .cta{ font-size:12px; font-weight:700; color:var(--accent); } :root[data-theme="dark"] .mcard .cta{ color:#6fbf7e; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mcard .cta{ color:#6fbf7e; } } /* detaliu meci / echipa */ /* Bara de derulare NU are voie să apară și să dispară: un tab mai scurt scurtează pagina sub înălțimea ferestrei, bara pleacă, și TOT conținutul sare lateral cu lățimea ei. Golul se rezervă mereu. */ html{ scrollbar-gutter:stable; } .back{ font-size:13.5px; font-weight:700; cursor:pointer; color:var(--muted); background:none; border:none; padding:0; text-align:left; font-family:inherit; } .back:hover{ color:var(--ink); } header.match{ text-align:center; display:flex; flex-direction:column; gap:6px; } .eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; } /* Trei coloane, nu un rând care se rupe: pe telefon, „flex-wrap" arunca numele echipei oaspete pe rândul de sub scor, iar antetul nu se mai citea ca o tabelă. Acum fiecare parte are coloana ei, iar pe ecran îngust sigla urcă deasupra numelui. */ .score-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:16px; } .msid{ display:flex; align-items:center; gap:12px; min-width:0; justify-content:flex-end; } .msid.a{ justify-content:flex-start; } .msid .team-name{ overflow:hidden; text-overflow:ellipsis; } @media (max-width:620px){ .score-row{ gap:9px; } .msid{ flex-direction:column-reverse; gap:6px; text-align:center; } .msid.a{ flex-direction:column; } .msid .team-name{ white-space:normal; overflow:visible; line-height:1.15; } } /* Numele echipelor stau în culoarea textului, amândouă la fel: cine e gazdă și cine e oaspete se vede din loc și din siglă, nu din culoare. Culorile de club, folosite până acum aici, se citeau ca două categorii diferite și cereau câte o variantă pe temă ca să nu dispară în fundal (U Cluj are #111111, invizibil pe întuneric). */ .team-name{ color:var(--ink); font-size:clamp(18px,3.4vw,30px); font-weight:800; letter-spacing:-.01em; cursor:pointer; } /* siglele flanchează scorul, mai mari decât oriunde altundeva în pagină */ .score-row .tlogo{ height:clamp(34px,5.4vw,54px); width:auto; max-width:clamp(44px,7vw,70px); object-fit:contain; flex:none; } /* Sigla duce la pagina echipei, ca și numele (cerut pe 6 septembrie 2026). Zona clicabilă e strânsă pe siglă, nu pe celula de grilă: `.msid` se întinde pe jumătate de rând, iar un click în gol ar fi navigat aiurea. */ .tmgo{ display:flex; align-items:center; flex:none; cursor:pointer; text-decoration:none; } .tmgo:hover{ filter:brightness(1.12); } .score{ font-size:clamp(26px,4.6vw,40px); font-weight:800; font-variant-numeric:tabular-nums; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:2px 16px; } /* Marcatorii pe UN rând, ancorați de cifra lor din scor. Coloana din mijloc e o FANTOMĂ a scorului (aceeași literă, aceleași cifre tabulare), nu o lățime scrisă de mână: „0 – 2" și „10 – 11" nu sunt la fel de late, iar alinierea trebuie să țină la amândouă. `line-height:0` o lasă fără înălțime, deci rândul rămâne subțire; marginile negative de o jumătate de cifră (plus jumătatea mingii) mută prima minge sub CENTRUL cifrei, nu lângă ea. Fără padding și fără chenar - fantoma imită textul scorului, nu pastila din jurul lui. */ .goal-note{ font-size:13.5px; font-weight:600; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; } .gnaxis{ visibility:hidden; line-height:0; font-size:clamp(26px,4.6vw,40px); font-weight:800; font-variant-numeric:tabular-nums; margin:0 calc(-0.275em - 7px); } .gnside{ display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; } .gnside.h{ justify-content:flex-end; text-align:right; } .gnside.a{ justify-content:flex-start; text-align:left; } /* `nowrap` pe element, nu pe rând: rândul are voie să se rupă ÎNTRE marcatori (pe telefon chiar trebuie), dar nu în mijlocul unui nume - „Mailat S." pe un rând și „(90+1′) ⚽" pe altul nu se mai citea ca o intrare. */ .gnitem{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; } .gnitem i{ font-style:normal; font-weight:600; color:var(--muted); font-size:12px; } .gnsep{ color:var(--line); font-weight:400; } @media (max-width:620px){ .goal-note{ font-size:12.5px; } .gnside{ gap:2px 6px; } } /* Rândul arbitrului stă la STÂNGA, nu centrat sub scor: cerut de utilizator pe 22 august 2026. Scrie „ARBITRU" înaintea numelui, ca să se știe ce e omul acela, iar linkul spre pagina de arbitraj e verde din prima - altfel arăta a etichetă, nu a drum. Marginea de sus îl desparte de scor. */ .meta{ font-size:13px; color:var(--muted); align-self:flex-start; text-align:left; display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; } .refln{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:700; } .reflbl{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } /* `--navsel`, nu `--accent`: al doilea e definit o singură dată (verde închis) și dispare pe fond întunecat; primul are câte o valoare pe temă. */ /* Două clase, nu una: `.rfnew` e definit mai jos în foaie și, la specificitate egală, ordinea l-ar face să câștige cu `--muted`. */ .rfnew.rfgo{ color:var(--navsel); border-color:var(--navsel); margin-left:0; } .rfnew.rfgo:hover{ color:var(--navsel); border-color:var(--navsel); background:var(--bg); } /* Numele de om se poartă ca un link: subliniat la trecerea cu mouse-ul. `.brcl` trăia doar în ARB_CSS, care nu se injectează în pagina meciului, deci numele arbitrului de sub scor nici nu arăta a clicabil. */ /* Culoarea arbitrajului, hotărâtă cu utilizatorul pe 22 august 2026: magenta pentru cine DECIDE pe teren (centralul), teal pentru camera VAR. Magenta a fost până acum culoarea VAR-ului; s-a mutat fiindcă arbitrul e conceptul mai mare, iar VAR un caz al lui. Niciuna nu se ciocnește cu paleta notelor (violet/albastru/verde/bronz/portocaliu/roșu) sau cu albastrul gazdelor și verdele oaspeților. */ .brcl{ cursor:pointer; } /* Magenta e a celui care DECIDE pe teren, deci a centralului - nu a oricărui nume clicabil din brigadă: tușierii și al patrulea arbitru nu decid, iar colorându-i pe toți culoarea nu mai spunea nimic. */ .refln .brcl{ color:var(--ref-ink); } .brcl:hover{ text-decoration:underline; text-underline-offset:3px; } .evlk{ color:inherit; text-decoration:none; cursor:pointer; } .evlk:hover{ text-decoration:underline; text-underline-offset:3px; } /* ── mini-antetul lipit al paginii de meci ──────────────────────────────── Scorul și minutul rămân la vedere când citești statisticile de la coada paginii, ca la Sofascore și FotMob. Apare abia după ce rândul de scor a ieșit de sub bara de meniu, deci nu dublează nimic cât e antetul pe ecran. Sub #topbar ca z-index (44 < 45): bara de meniu rămâne deasupra, iar ferestrele modale (z-index 100) le acoperă pe amândouă. */ .mmini{ position:fixed; left:0; right:0; top:var(--navh); z-index:44; cursor:pointer; background:var(--card); border-bottom:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-115%); transition:transform .18s ease; } .mmini.on{ transform:none; } .mmin{ max-width:1060px; margin:0 auto; padding:7px 14px; display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; } .mmini .tlogo{ height:22px; width:30px; flex:none; } .mmn{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mmsc{ flex:none; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:1px 10px; } .mmini .lvtag{ flex:none; } @media (max-width:520px){ .mmin{ gap:7px; padding:6px 10px; } .mmn{ max-width:30vw; } } .legend{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center; padding:10px 4px 2px; font-size:12.5px; color:var(--muted); } .legend b{ color:var(--ink); font-weight:700; } .band{ display:inline-flex; align-items:center; gap:6px; } .swatch{ width:13px; height:13px; border-radius:4px; display:inline-block; } /* layout meci: sus 2 coloane (teren vertical | prezentare generala) */ .matchtop{ display:grid; grid-template-columns:minmax(320px,1.25fr) 1fr; gap:16px; align-items:stretch; } /* minmax(0,1fr), nu 1fr: „1fr" singur are minimul auto = min-content-ul conținutului, deci un rând de statistici mai lat decât ecranul lățea coloana la 410px pe un telefon de 390 și tot body-ul căpăta scroll lateral. */ @media (max-width:840px){ .matchtop{ grid-template-columns:minmax(0,1fr); } /* jucătorii de la margini (plăcuțe de 80px centrate pe poziție) ies din teren; pe desktop cad în padding, pe telefon împingeau tot body-ul în lateral. clip, nu hidden: nu creează container de scroll și taie doar orizontal, tooltip-urile verticale rămân vizibile. */ .matchtop > .card{ overflow-x:clip; } } @media (max-width:480px){ .vfield .player{ width:64px; } .vfield .pname{ max-width:68px; } } /* cardul din dreapta (Prezentare generală) isi distribuie randurile ca sa aiba aceeasi inaltime cu terenul din stanga */ .matchtop > .tstats{ display:flex; flex-direction:column; } .matchtop > .tstats .tsgroup{ flex:1; display:flex; flex-direction:column; } .matchtop > .tstats .tsgroup h4{ flex:none; } .matchtop > .tstats .tsgroup .tsrow{ flex:1; display:flex; flex-direction:column; justify-content:center; } @media (max-width:840px){ .matchtop > .tstats .tsgroup .tsrow{ flex:none; display:block; } } .vfield{ position:relative; width:100%; max-width:520px; margin:4px auto 0; aspect-ratio:0.66; border-radius:16px; overflow:visible; background:repeating-linear-gradient(0deg,#2e7a3b 0 8.5%,#2a7136 8.5% 17%); background-clip:padding-box; } .vfield svg.lines{ position:absolute; inset:0; width:100%; height:100%; border-radius:16px; -webkit-mask:linear-gradient(#000,#000); } /* etichetele „cine e sus, cine e jos" de pe teren */ .vfteams{ position:absolute; inset:0; pointer-events:none; z-index:6; } /* Sigla la stânga, mai mare, cu numele și formația stivuite lângă ea. Cei 10px de margine sunt cerința utilizatorului: lipită de colț, eticheta arăta a greșeală de desen, nu a etichetă. */ .vfteam{ position:absolute; left:20px; display:flex; align-items:center; gap:4px; } .vfteam.h{ top:20px; } .vfteam.a{ bottom:20px; } .vfteam .tlogo{ height:26px; width:auto; max-width:30px; flex:none; } .vftxt{ display:flex; flex-direction:column; gap:0; min-width:0; } /* Terenul e verde în ambele teme, deci alb cu umbră, nu variabile de temă. */ .vftxt b{ font-size:12px; font-weight:800; color:#fff; letter-spacing:.01em; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.6); } .vftxt i{ font-style:normal; font-size:9px; font-weight:700; letter-spacing:.03em; line-height:1.25; color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,0,0,.55); } @media (max-width:480px){ .vfteam{ left:16px; gap:3px; } .vfteam.h{ top:16px; } .vfteam.a{ bottom:16px; } .vfteam .tlogo{ height:22px; } .vftxt b{ font-size:11px; } .vftxt i{ font-size:8.5px; } } .vfield .player{ width:80px; gap:1px; } .vfield .jersey{ width:32px; height:32px; font-size:12px; } .vfield .pname{ font-size:10px; max-width:86px; padding:1px 6px; } .vfield .badges{ font-size:9px; } .vfield .shot{ box-shadow:0 1px 3px rgba(0,0,0,.4); } .vfield .tip{ z-index:80; } /* teren */ .pitch-scroll{ overflow-x:auto; border-radius:16px; scrollbar-width:thin; scrollbar-color:rgba(20,40,24,.55) transparent; } .pitch-scroll::-webkit-scrollbar{ height:7px; } .pitch-scroll::-webkit-scrollbar-track{ background:transparent; } .pitch-scroll::-webkit-scrollbar-thumb{ background:rgba(20,40,24,.45); border-radius:4px; } .pitch{ position:relative; width:100%; min-width:850px; aspect-ratio:1.75; border-radius:16px; overflow:hidden; background:repeating-linear-gradient(90deg,#2e7a3b 0 9%,#2a7136 9% 18%); } .pitch svg.lines{ position:absolute; inset:0; width:100%; height:100%; } .player{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; width:104px; text-align:center; cursor:pointer; } /* În text (tabele), asteriscul stă inline după cifră - acolo nu strică nimic. DOAR în insignele rotunde iese din flux: acolo lățea conținutul și împingea cifra din centru, așa că atârnă centrat sub cerc. */ .prv{ font-style:normal; font-size:.60em; vertical-align:super; opacity:.5; margin-left:1px; letter-spacing:0; font-weight:700; cursor:help; } .jersey{ position:relative; } .jersey .prv{ position:absolute; left:50%; transform:translateX(-50%); bottom:-4px; font-size:10px; line-height:1; opacity:.6; margin:0; vertical-align:baseline; } .provnote{ font-size:11.5px; color:var(--muted); margin:6px 0 0; display:flex; align-items:center; gap:6px; } .provnote b{ color:var(--fg); font-weight:700; } .jersey{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; border:2px solid #fff; color:#fff; cursor:pointer; box-shadow:0 0 0 2.5px var(--tc,#333), 0 3px 8px rgba(0,0,0,.4); } .pnr{ font-weight:400; opacity:.72; font-size:10px; margin-right:4px; font-variant-numeric:tabular-nums; } .pname{ background:var(--plate); color:#fff; font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px; white-space:nowrap; max-width:132px; overflow:hidden; text-overflow:ellipsis; } .badges{ font-size:10px; color:#ffe9a8; font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.6); } .player .repl{ font-size:9.5px; color:#ffdede; font-weight:600; background:rgba(0,0,0,.4); padding:0 5px; border-radius:5px; margin-top:1px; white-space:nowrap; } .pills{ display:flex; gap:3px; } .pill{ min-width:42px; padding:2px 5px 3px; border-radius:6px; color:#fff; display:flex; flex-direction:column; align-items:center; line-height:1.05; box-shadow:0 1px 3px rgba(0,0,0,.3); } .pill small{ font-size:7.5px; letter-spacing:.08em; opacity:.85; font-weight:700; } .pill span{ font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; } .b-violet{ background:var(--r-violet);} .b-blue{ background:var(--r-blue);} .b-green{ background:var(--r-green);} .b-bronze{ background:var(--r-bronze);} .b-red{ background:var(--r-red);} .b-orange{ background:var(--r-orange);} .b-none{ background:#4a544c; } /* AURA A FOST SCOASĂ: cu șase culori, violetul e folosit o SINGURĂ dată, la 9+, deci se distinge singur, n-are nevoie de al doilea semn. (Comentariul de mai jos e păstrat ca avertisment pentru viitor: inelul cu culoarea clubului e făcut tot din box-shadow pe .jersey, deci orice regulă care suprascrie box-shadow-ul ȘTERGE apartenența la club.) */ .player .tip{ position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); display:none; background:rgba(8,18,10,.93); padding:6px 7px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.45); } .player:hover .tip, .player:focus-within .tip{ display:block; } .player:hover, .player:focus-within{ z-index:60; } .pillavg{ margin-top:1px; padding:1px 9px 2px; border-radius:7px; color:#fff; font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums; border:1.5px solid rgba(255,255,255,.85); box-shadow:0 1px 3px rgba(0,0,0,.35); } .pillavg small{ font-size:8px; opacity:.85; margin-right:4px; } /* hover: nota noastră + pictograme (minge/gheată/mănuși) */ .sic{ width:15px; height:15px; vertical-align:-3px; display:inline-block; } .tipcard .sic, .mpills .sic{ width:16px; height:16px; } /* cartonașe mai mari în fișa jucătorului (lângă nume) și pe teren */ .mhead .who .sic{ width:22px; height:22px; vertical-align:-5px; } .tipcard{ display:flex; flex-direction:column; align-items:center; gap:4px; color:#eef2ee; } .tipg{ font-weight:800; font-size:15px; padding:2px 11px; border-radius:8px; color:#fff; font-variant-numeric:tabular-nums; box-shadow:0 1px 3px rgba(0,0,0,.35); } .ticons{ display:flex; gap:9px; align-items:center; } .tic{ display:inline-flex; align-items:center; gap:2px; } .tic b{ font-size:11px; font-weight:800; } th .sic{ vertical-align:middle; } /* modal jucator */ /* ANCORAT SUS, nu centrat vertical: centrarea muta modalul la fiecare schimbare de tab, fiindcă panourile au înălțimi diferite, „Istoric" e aproape gol, „Carieră" are 16 rânduri. Cu flex-start, marginea de sus rămâne pe loc, deci taburile stau exact sub mouse după click. */ .mback{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-start; justify-content:center; z-index:100; padding:min(8vh,64px) 14px 14px; overflow-y:auto; } /* TOATE ferestrele au aceeași lățime: 90% din lățimea maximă a SITE-ULUI (1060px, cea a lui .wrap și .sitebarin), nu a ferestrei browserului - corectat pe 28 august 2026, după prima variantă cu 91vw, care creștea odată cu fereastra. 91vw rămâne doar ca plafon pe ecrane înguste. Fiecare fereastră are o pagină-geamănă care își întinde oricum conținutul pe toată lățimea, deci lățimea comună e aceeași direcție. */ .modal{ background:var(--card); color:var(--ink); border-radius:16px; max-width:min(954px, 91vw); width:100%; max-height:86vh; overflow:auto; padding:18px 20px; box-shadow:0 18px 50px rgba(0,0,0,.4); } /* Statisticile din fereastra jucătorului curg pe două coloane la lățimea asta, exact ca #jpfisa din pagina lui - altfel rândurile etichetă-valoare s-ar întinde pe tot ecranul. Bara de indisponibilitate și nota de sub taburi rămân pe toată lățimea. */ @media(min-width:900px){ .modal .m2panel[data-panel="stats"]{ column-count:2; column-gap:38px; } } .modal .m2panel[data-panel="stats"] .srow{ break-inside:avoid; } .modal .m2panel[data-panel="stats"] h4{ break-after:avoid-column; } .modal .m2panel[data-panel="stats"] .indisp, .modal .m2panel[data-panel="stats"] > p{ column-span:all; } .modal .mhead{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .modal .mhead .jersey{ cursor:default; flex:none; } .modal .mhead .who{ flex:1; } .modal .mhead .who b{ font-size:16.5px; } .modal .mhead .who .sub2{ font-size:12px; color:var(--muted); } .modal .mx{ border:none; background:var(--bg); border-radius:8px; width:30px; height:30px; font-size:15px; cursor:pointer; color:var(--ink); flex:none; } .modal .mpills{ display:flex; gap:6px; align-items:center; margin:4px 0 12px; flex-wrap:wrap; } .modal h4, .jpcard .m2panel h4{ margin:14px 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } /* titlul de secțiune cu comutatorul la dreapta, pe aceeași linie */ .modal h4.sech, .jpcard h4.sech{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .fmoddd{ text-transform:none; letter-spacing:0; } .modal .srow, .jpcard .srow{ display:flex; justify-content:space-between; gap:10px; padding:4.5px 0; border-top:1px solid var(--line); font-size:13.5px; } .modal .srow span:last-child, .jpcard .srow span:last-child{ font-weight:700; font-variant-numeric:tabular-nums; } /* ── fereastra unui jucător DINTR-UN MECI ────────────────────────────── Radarul stânga, esențialul dreapta, secțiunile dedesubt. Culoarea e a PĂRȚII (gazde/oaspeți), nu a notei: jetoanele notei (--r-*) sunt definite o singură dată, pentru fundal cu text alb, deci ca linie pe cardul închis n-ar avea contrast. Gazde/oaspeți sunt tocmai perechea aleasă să se citească pe amândouă temele. */ /* banda meciului, sus: se citește din ce meci vine fereastra, oricare ar fi pagina de pornire. Siglele stau lipite de scor, ca perechea să se citească dintr-o privire. */ /* trei locuri: linkul la stânga, meciul la mijloc, ✕ la dreapta. Mijlocul ia restul lățimii, altfel numele echipelor se taie cu „…". */ .pmwrap{ display:contents; } /* Antetul are ACELEAȘI trei coloane ca `.pmtop` de dedesubt, deci banda meciului cade fix peste coloana din mijloc, nu pe centrul ferestrei (cerut de utilizator pe 5 septembrie 2026). Distanțele stânga-dreapta ies inegale, și e în regulă: alinierea pe coloane e cea care se vede. */ .pmhead{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:center; gap:0 12px; margin:0 0 16px; } .pmhead .pmlink{ grid-column:1; justify-self:start; } .pmhead .pmmeci{ grid-column:2; } .pmhead .mx{ grid-column:3; justify-self:end; } .pmmeci{ flex:1; display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; font-size:14px; } .pmmt{ flex:1; min-width:0; display:flex; align-items:center; gap:7px; justify-content:flex-end; } .pmmt.r{ justify-content:flex-start; } .pmmt b{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pmmeci .tlogo{ height:22px; width:auto; flex:none; } .pmms{ flex:none; font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--chip); border-radius:9px; padding:3px 11px; white-space:nowrap; } .pmms i{ font-style:normal; color:var(--muted); font-weight:600; } /* Aceleași TREI verticale ca secțiunile de dedesubt: identitatea plus pastilele umplu prima coloană, banda de skill-uri celelalte două. Așa se aliniază tot cardul pe o singură grilă. */ .pmtop{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; align-items:start; margin:0 0 2px; } .pmleft{ grid-column:1; min-width:0; } .pmid{ min-width:0; } .pmwho{ display:flex; align-items:center; gap:13px; } .pmwho .jersey{ width:46px; height:46px; font-size:16px; flex:none; cursor:default; } .pmwt{ min-width:0; } .pmnume{ font-size:clamp(17px,1.9vw,23px); font-weight:800; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pmnume .sic{ width:20px; height:20px; vertical-align:-3px; } .pmsub{ font-size:12.5px; color:var(--muted); margin-top:2px; } /* Fișa omului, sub pastile: card cu chenar ca al lor, ÎNTINS pe înălțimea rămasă până la baza benzii de skill-uri. Rândurile împart spațiul în părți egale, deci cardul arată la fel cu cinci fapte și cu șase. Pe desktop `summary` e ascuns: lista se citește direct, fără buton. */ .pmleft{ align-self:stretch; display:flex; flex-direction:column; } .pmdet{ margin-top:10px; flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } .pmdet > summary{ display:none; } .pmfc{ flex:1 1 auto; display:flex; flex-direction:column; padding:2px 11px; border:1px solid var(--line); border-radius:12px; background:var(--card); } .pmfr{ flex:1 1 0; min-height:23px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; } .pmfr + .pmfr{ border-top:1px solid var(--line); } .pmfr span{ color:var(--muted); } .pmfr b{ font-weight:700; text-align:right; } @media (max-width:700px){ .pmleft{ display:block; } .pmdet{ display:block; } .pmdet > summary{ display:list-item; font-size:12.5px; color:var(--muted); font-weight:700; cursor:pointer; } .pmdet[open] > summary{ margin-bottom:6px; } .pmfr{ padding:4px 0; } } .pmsub .sic{ width:14px; height:14px; vertical-align:-2px; } /* banda de skill-uri: opt rânduri, două coloane de patru, pe toată lățimea. Un rând are nevoie de ~280px (etichetă + valoare + bară); pe toată lățimea ies ~440px de coloană, deci bara chiar se citește - în locul radarului (300px) ar fi rămas de 100px. Semnul de la 50% e media ligii: se vede dintr-o privire dacă e peste sau sub. */ /* Chenar ca al fișei din stânga, ca cele două jumătăți ale antetului să se citească drept două cutii, nu una desenată și una nu. Legenda intră ÎNĂUNTRU: ea explică barele de deasupra ei, deci n-are ce căuta afară. */ .pmband{ grid-column:2 / 4; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto 1fr; gap:0 14px; margin:0; border:1px solid var(--line); border-radius:12px; padding:2px 13px 10px; align-self:stretch; } /* Rândul legendei e `1fr`, deci cât timp banda e mai scurtă decât fișa din stânga slack-ul cade SUB text, nu între bare - și cele două jumătăți se termină pe aceeași linie, fără nicio înălțime scrisă de mână. */ .skcap{ grid-column:1/-1; font-size:11px; color:var(--muted); margin:8px 0 0; } .skcap b{ color:var(--ink); font-weight:800; } .skcap .skcw{ color:var(--rc); } .skcol{ min-width:0; } .skr{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; padding:6px 0 8px; border-top:1px solid var(--line); } .skcol .skr:first-child{ border-top:0; } /* percentila poartă culoarea barei pe care o descrie, cu grosime normală */ .skp{ flex:none; width:36px; text-align:right; font-style:normal; font-size:13.5px; font-weight:400; color:var(--rc); font-variant-numeric:tabular-nums; } .skn{ font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* cifra brută e mai mică și gri: se vede oricum, întreagă, în secțiunile de dedesubt. Ce se citește de aici e PERCENTILA, deci ea e mare și în culoarea textului. */ .skv{ font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; padding-left:10px; } /* pista are ACEEAȘI lățime pe toate rândurile: se întinde pe amândouă coloanele, iar percentila are lățime fixă lângă ea */ .skbar{ grid-column:1/-1; display:flex; align-items:center; gap:8px; margin-top:6px; } .skb{ flex:1; min-width:0; position:relative; height:5px; border-radius:3px; background:var(--dtrack); } .skb i{ position:absolute; inset:0 auto 0 0; background:var(--rc); border-radius:3px; } /* Semnul medianei e o TĂIETURĂ în bară, de 2px, în culoarea ferestrei: se vede la fel de bine și peste umplutură, și pe pista goală, fără să adauge o a treia culoare. O liniuță de 1px desenată sub umplutură dispărea la orice percentilă peste ea. */ .skm{ position:absolute; top:-1px; bottom:-1px; width:3px; margin-left:-1.5px; background:var(--card); } /* Trei coloane EGALE, nu lățime fixă: rândul de pastile se termină atunci exact acolo unde se termină cardul cu fișa de dedesubt, oricât de largă ar fi coloana. Grila are mereu trei coloane, deci o pastilă în minus (meci fără statistici) nu le lățește pe cele rămase. */ .pmpils{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; } /* tot ce e în pastilă stă centrat (cerut de utilizator pe 2 septembrie 2026): eticheta e mai îngustă decât cifra la unele, iar aliniate la stânga cele trei pastile arătau nefinisate */ .pmp{ min-width:0; text-align:center; } .pmp{ border:1px solid var(--line); border-radius:12px; padding:7px 10px; background:var(--card); } .pmpe{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:800; } .pmpv{ display:block; margin-top:2px; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; white-space:nowrap; } .pmpv .sic{ width:17px; height:17px; } .pmpu{ font-size:12.5px; font-weight:700; color:var(--muted); } /* coloane, nu grilă: cu grilă, o secțiune scurtă („Șuturi", 6 rânduri) lăsa dedesubtul ei gol până la înălțimea celei mai lungi din rând */ .pmsecs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; align-items:start; } .pmcol{ display:flex; flex-direction:column; gap:12px; min-width:0; } .pms{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .pms h5{ margin:0; padding:7px 11px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; background:var(--chip); border-bottom:1px solid var(--line); } .pmsr{ display:flex; justify-content:space-between; gap:10px; padding:5.5px 11px; font-size:12.5px; } .pmsr + .pmsr{ border-top:1px solid var(--line); } .pmsr b{ font-variant-numeric:tabular-nums; flex:none; } @media(max-width:700px){ /* antetul se rupe în două rânduri: link + ✕ sus, meciul dedesubt */ .pmhead{ grid-template-columns:1fr auto; grid-template-areas:"lnk x" "meci meci"; gap:8px 10px; } .pmhead .pmlink{ grid-area:lnk; } .pmhead .mx{ grid-area:x; } .pmmeci{ grid-area:meci; } .pmtop{ grid-template-columns:minmax(0,1fr); gap:16px; } .pmleft{ grid-column:1; } .pmband{ grid-column:1; grid-template-columns:minmax(0,1fr); } .skcol:last-child .skr:first-child{ border-top:1px solid var(--line); } .pmwho{ gap:11px; } .pmwho .jersey{ width:44px; height:44px; font-size:15px; } /* numele stă MEREU pe un rând: se strânge cu lățimea ecranului, iar la nume foarte lungi rămâne tăietura, nu ruperea pe două rânduri */ .pmnume{ font-size:clamp(15px,5.2vw,21px); } /* fereastra meciului își strânge marginile și se lățește pe telefon, ca pastilele să încapă pe UN rând până la 320px */ .pmod{ padding-left:14px; padding-right:14px; max-width:95vw; } .pmsecs{ grid-template-columns:minmax(0,1fr); } .pmcol{ display:contents; } .pmpils{ gap:6px; } .pmp{ padding:7px 6px; } .pmpe{ font-size:8.5px; letter-spacing:.02em; } .pmpv{ font-size:16px; } .pmpu{ font-size:10px; } .pmmeci{ font-size:12.5px; gap:7px; } .pmmeci .tlogo{ height:18px; } .pmms{ font-size:14px; padding:2px 8px; } } /* Taburile stau LIPITE de marginea de sus a modalului: pe ferestre scurte dispăreau la derulare, iar al doilea tab nu mai era sub mouse după click. */ /* nowrap + derulare: cu wrap, al cincilea tab sărea pe rândul doi și bara creștea la două etaje pe ferestre înguste */ .mtabs2{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:4px; background:var(--card); border-radius:10px; padding:3px; margin:2px 0 12px; position:sticky; top:-18px; z-index:5; box-shadow:0 6px 10px -8px rgba(0,0,0,.35); scrollbar-width:none; } .mtabs2::-webkit-scrollbar{ display:none; } .m2{ flex:none; white-space:nowrap; } .m2{ border:none; background:none; color:var(--muted); font-weight:700; font-size:13px; padding:6px 16px; border-radius:7px; cursor:pointer; font-family:inherit; } .m2.active{ background:var(--bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); } .m2:disabled{ opacity:.4; cursor:default; } /* ── bara de indisponibilitate, deasupra statisticilor ── */ .indisp{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; border-radius:9px; padding:8px 11px; margin:0 0 10px; line-height:1.4; } .indisp b{ font-weight:800; } .indisp.susp{ background:rgba(224,71,62,.12); color:var(--p0); } .indisp.acc{ background:rgba(160,96,8,.12); color:var(--p50); } .indisp .zi{ font-weight:400; opacity:.85; } /* ── carieră / transferuri ── */ .trrow{ display:grid; grid-template-columns:74px 1fr 78px; gap:8px; align-items:center; font-size:12.5px; padding:6px 0; border-top:1px solid var(--line); } .trrow:first-child{ border-top:none; } .trd{ color:var(--muted); font-variant-numeric:tabular-nums; } .trc{ line-height:1.35; } .trc b{ font-weight:700; } .trf{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; } .trf.gratis{ font-weight:400; color:var(--muted); } .mgol{ color:var(--muted); font-size:13px; margin:6px 0; } /* istoricul accidentărilor: sezon, diagnostic, perioadă, zile, meciuri ratate */ .acch{ display:flex; align-items:baseline; gap:10px; margin:14px 0 8px; flex-wrap:wrap; } .acch h4{ margin:0; font-size:13px; text-transform:none; letter-spacing:0; } .acch span{ font-size:12px; color:var(--muted); } .accr{ display:grid; grid-template-columns:58px minmax(0,1fr) 152px 62px 46px; gap:10px; align-items:center; min-height:38px; padding:0 8px 0 4px; font-size:12.5px; border-top:1px solid var(--line); } /* sezonul respiră față de diagnostic, iar coloana din dreapta are același aer ca marginea din stânga tabelului (cerut pe 2 septembrie 2026) */ .accs{ padding-right:8px; } .accs{ color:var(--muted); font-variant-numeric:tabular-nums; } .accd{ font-weight:600; } .accd i{ font-style:normal; font-weight:400; color:var(--dwarn); } .accp{ color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; } /* durata și meciurile se citesc drept, deci centrate; perioada rămâne la dreapta */ .accz{ color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; white-space:nowrap; } .accm{ text-align:center; font-weight:700; font-variant-numeric:tabular-nums; } /* steluța marchează data dedusă din propriile noastre meciuri, nu scrisă de sursă */ .accrev{ font-style:normal; color:var(--dwarn); margin-left:2px; } .accr.acum{ background:var(--chip); } /* capul de tabel: fără el, coloana din dreapta era un număr fără nume */ .accr.accap{ min-height:0; padding-bottom:5px; border-top:0; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; } .accr.accap span{ font-weight:700; color:var(--muted); } .accr.accap span:nth-child(3){ text-align:right; } .accr.accap span:nth-child(4), .accr.accap span:nth-child(5){ text-align:center; } @media(max-width:640px){ .accr{ grid-template-columns:52px minmax(0,1fr) auto; row-gap:2px; padding:6px 4px; } .accp{ grid-column:2; text-align:left; font-size:11.5px; } .accz{ grid-column:3; } .accm{ display:none; } .accr.accap{ display:none; } } .tmval{ font-size:26px; font-weight:800; margin:2px 0 12px; } .tmval span{ display:block; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .tminj{ background:rgba(196,30,47,.12); color:#c41e2f; font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:8px; margin:0 0 10px; } :root[data-theme="dark"] .tminj{ color:#ff9aa4; } /* statistici echipa: grupe pe 2 coloane, stil Sofascore */ .tstats .teamsline{ display:flex; justify-content:space-between; font-weight:800; font-size:13.5px; margin-bottom:8px; } /* Eticheta de echipă, aceeași peste tot unde pagina desparte gazdele de oaspeți: sigla, numele în culoarea textului la amândouă, și o linie dedesubt - albastru la gazde, verde la oaspeți, aceleași două culori cu harta șuturilor și cu statisticile. Bulina colorată de dinainte spunea același lucru, dar mai încet. */ .tmlab{ display:inline-flex; align-items:center; gap:7px; min-width:0; color:var(--ink); font-weight:800; } .tmlab.a{ flex-direction:row-reverse; } .tmlab .tlogo{ height:20px; width:auto; max-width:28px; } /* linia stă sub NUME, nu sub siglă */ .tmlab b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800; border-bottom:3px solid var(--hs); padding-bottom:3px; } .tmlab.a b{ border-bottom-color:var(--as); } /* minmax(0,1fr): cu „1fr" simplu, minimul auto lăsa coloana să crească după cel mai lat rând de statistici și pagina căpăta scroll lateral pe telefon */ .tscols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 32px; align-items:start; } @media (max-width:760px){ .tscols{ grid-template-columns:minmax(0,1fr); } } .tscol{ display:flex; flex-direction:column; } /* Fiecare grup de statistici e o ZONĂ cu chenar: titlul sus, chenarul până sub ultimul rând (cerut de utilizator pe 6 septembrie 2026 - „așa e mai ușor de reperat"). Titlul iese în paddingul cutiei, deci se lipește de chenar și ține loc de cap de secțiune. */ .tsgroup{ border:1px solid var(--line); border-radius:12px; padding:0 12px 8px; margin-top:16px; } .tsgroup:first-child{ margin-top:0; } .tsgroup h4{ margin:0 -12px 2px; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:400; text-align:center; color:var(--muted); background:var(--titlebg); padding:7px 10px; border-radius:11px 11px 0 0; border-bottom:1px solid var(--line); } .tsrow{ padding:16px 0 6px; } .tsrow .vals{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:6px; } .tsrow .vals .lbl{ color:var(--ink); font-size:12.5px; text-align:center; flex:1; } /* rând cu metrică medie pe surse + tooltip explicativ */ .tsrow.src{ position:relative; } .tsrow.src .lbl{ cursor:help; } .tti{ font-size:9.5px; color:var(--muted); vertical-align:super; } .tstip{ display:none; position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% - 4px); z-index:40; width:max-content; max-width:250px; background:var(--plate); color:#fff; text-align:left; border-radius:9px; padding:9px 11px; font-size:11.5px; line-height:1.4; box-shadow:0 8px 22px rgba(0,0,0,.4); } .tstip b{ font-weight:700; display:block; margin-bottom:2px; } .tstip .d{ display:block; color:#cfd6ce; margin-bottom:5px; } .tstip .s{ display:block; font-variant-numeric:tabular-nums; } .tstip .s i{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; } .tsrow.src:hover .tstip, .tsrow.src:focus-within .tstip{ display:block; } .tsrow .vals b{ font-weight:400; min-width:44px; } .tsrow .vals b.rt{ text-align:right; } .tsplit{ display:flex; align-items:center; gap:14px; } .tsplit .half{ flex:1; height:6px; display:flex; } .tsplit .half.left{ justify-content:flex-end; } .tsplit .half i{ height:100%; border-radius:3px; } .tsrow .drow{ display:flex; align-items:center; } .tsrow .drow .dnum{ width:58px; flex:none; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink); } .tsrow .drow .dnum.rt{ text-align:right; } /* clusterul cerc–eticheta–cerc, centrat; fractiile raman lipite de margini */ .tsrow .drow .dmid{ flex:1; display:flex; align-items:center; justify-content:center; gap:16px; } .tsrow .drow .dlbl{ width:124px; text-align:center; font-size:12.5px; color:var(--ink); } .tsrow .drow.big{ padding:6px 0; } .tsrow .drow.big .dmid{ gap:30px; } .tsrow .drow.big .dlbl{ width:150px; } .donut{ --p:0; --c:var(--hs); position:relative; width:50px; height:50px; border-radius:50%; flex:none; background:conic-gradient(var(--c) calc(var(--p)*1%), var(--dtrack) 0); } .donut i{ position:absolute; inset:5px; border-radius:50%; background:var(--card); font-style:normal; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .donut.lg{ width:78px; height:78px; } .donut.lg i{ inset:9px; font-size:15px; } /* DUPĂ toate regulile rândurilor cu cercuri, nu înaintea lor: la specificitate egală câștigă ordinea. Rândul normal are ~330px, cel mare (cerc .lg) ~454, iar pe telefon încap doar ~324, totul se strânge proporțional. */ @media (max-width:480px){ .tsrow .drow .dnum{ width:40px; font-size:12px; } .tsrow .drow .dlbl{ width:84px; font-size:11.5px; } .tsrow .drow .dmid{ gap:6px; } .tsrow .drow.big .dmid{ gap:10px; } .tsrow .drow.big .dlbl{ width:104px; } .donut{ width:46px; height:46px; } .donut.lg{ width:58px; height:58px; } .donut.lg i{ inset:6px; font-size:13px; } } /* tab toggle pe vizual */ .mtabs{ display:inline-flex; gap:4px; background:var(--bg); border-radius:11px; padding:4px; margin-bottom:12px; } .mtab{ border:none; background:none; color:var(--muted); font-weight:700; font-size:13px; padding:7px 18px; border-radius:8px; cursor:pointer; font-family:inherit; } .mtab.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18); } /* banda de evenimente a meciului: gazdele la stânga, oaspeții la dreapta, minutul pe axa din mijloc. E tiparul pe care îl are orice site de scoruri, deci se citește fără instrucțiuni. */ /* Banda stă într-o cutie cu exact geometria terenului din primul tab: aceeași lățime, același colț rotunjit, aceeași înălțime (măsurată la randare în `--evh`). Așa, comutarea între file schimbă doar ce e înăuntru - nimic nu sare, nimic nu se întinde. Ce nu încape derulează în interior, cu o bară subțire. Rezerva `aspect-ratio` ține cutia dreaptă și dacă măsurătoarea n-a apucat să se facă. */ #tab-ev{ height:var(--evh); } .evbox{ width:100%; max-width:520px; height:100%; margin:0 auto; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); } #tab-ev:not([data-h]) .evbox{ aspect-ratio:0.66; height:auto; } .evcap{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 12px; border-bottom:1px solid var(--line); background:var(--bg); } .evcs{ display:flex; align-items:center; gap:7px; min-width:0; } .evcs.a{ flex-direction:row-reverse; text-align:right; } .evcs .tlogo{ height:26px; width:auto; max-width:30px; flex:none; } .evtx{ display:flex; flex-direction:column; gap:1px; min-width:0; } .evcs.a .evtx{ align-items:flex-end; } .evtx b{ font-size:12.5px; font-weight:800; border-bottom:3px solid var(--hs); padding-bottom:2px; } .evcs.a .evtx b{ border-bottom-color:var(--as); } .evtx i{ font-style:normal; font-size:9.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; } /* Filtrele benzii: bifate toate la deschidere, deci implicit se vede tot. Stau în rândul de sub taburi, în locul butoanelor de echipă, deci arată ca ele: aceeași margine de jos, aceeași aliniere la stânga. */ .evfil{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0 0 10px; } .evfil label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--muted); } .evfil label:has(input:checked){ color:var(--ink); } .evfil input{ width:14px; height:14px; accent-color:var(--accent); cursor:pointer; } .evscroll{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:2px 10px 6px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; } .evscroll::-webkit-scrollbar{ width:6px; } .evscroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; } .evscroll::-webkit-scrollbar-track{ background:transparent; } .evwrap{ position:relative; padding:4px 0 2px; } .evwrap::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:var(--line); } .evrow{ display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); align-items:center; gap:8px; padding:6px 0; } .evmin{ position:relative; z-index:1; justify-self:center; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:2px 0; min-width:44px; text-align:center; font-size:11px; font-weight:800; color:var(--muted); } .evside{ display:flex; align-items:flex-start; gap:9px; min-width:0; } .evside.h{ flex-direction:row-reverse; text-align:right; } .evside .sic{ width:19px; height:19px; flex:0 0 19px; vertical-align:0; margin-top:1px; } .evtxt{ min-width:0; } .evnm{ font-size:13px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; } .evsub{ font-size:11.5px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere; } /* Schimbarea vorbește în culorile echipei, ca restul benzii: albastru la gazde, verde la oaspeți - inclusiv săgeata. Verde pentru amândouă spunea „intrare", dar ștergea tocmai deosebirea pe care o face toată pagina. Cine IESE primește un roz șters (alb cu ~15% roșu pe fond întunecat, oglinda lui pe fond deschis), nu roșu plin: roșul plin arăta ca o sancțiune, deși omul doar a ieșit de pe teren. */ .evside.h .evin, .evside.h .ic-s{ color:var(--hs); } .evside.a .evin, .evside.a .ic-s{ color:var(--as); } .evout{ color:var(--outink); } .evsdet{ color:var(--evdet); } .evsc{ display:inline-block; font-size:11px; font-weight:800; border:1px solid var(--line); border-radius:6px; padding:0 5px; margin:0 5px; vertical-align:1px; color:var(--muted); } .ic-og, .ic-r{ color:var(--p0); } .ic-ga, .ic-pm{ color:var(--muted); } .ic-var{ color:var(--var-ink); } .ic-g, .ic-gp{ color:var(--ink); } .evanulat{ text-decoration:line-through; text-decoration-thickness:1.5px; } .evvar{ color:var(--var-ink); font-weight:800; letter-spacing:.03em; } .evsep{ position:relative; display:flex; justify-content:center; margin:10px 0 6px; } /* Sub „Final" nu mai e nimic de legat, deci linia verticală se oprește acolo. Se taie cu o mască de culoarea cutiei, pornită din CENTRUL pastilei - deci ancorată de ea, nu de o cifră scrisă de mână. Masca urcă peste linie fiindcă `.evsep` e poziționat, iar `.evwrap::before` e al unui strămoș. */ .evsep.evfinal::after{ content:''; position:absolute; left:50%; top:50%; height:18px; width:6px; margin-left:-3px; background:var(--card); pointer-events:none; } .evsep span{ position:relative; z-index:1; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 13px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .evrow.evgol .evnm{ font-size:14.5px; font-weight:800; } .evnimic{ color:var(--muted); font-size:13px; padding:14px 4px; text-align:center; } @media (max-width:560px){ .evrow{ grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr); gap:5px; padding:5px 0; } .evmin{ min-width:38px; } .evside{ gap:6px; } .evside .sic{ width:17px; height:17px; flex:0 0 17px; } .evnm{ font-size:12px; } .evsub{ font-size:11px; } } /* shotmap */ .smwrap{ position:relative; width:100%; aspect-ratio:1.75; border-radius:14px; overflow:hidden; background:repeating-linear-gradient(90deg,#2e7a3b 0 9%,#2a7136 9% 18%); } .smwrap svg.lines{ position:absolute; inset:0; width:100%; height:100%; } .shot{ position:absolute; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; cursor:default; } .shot.h{ background:var(--hs); box-shadow:0 1px 3px rgba(0,0,0,.45); } .shot.a{ background:var(--as); box-shadow:0 1px 3px rgba(0,0,0,.45); } /* pe langa / blocat / bara = doar contur subtire */ .shot.k-miss, .shot.k-block, .shot.k-post{ background:transparent !important; border:2px solid var(--hs); box-shadow:none; } .shot.a.k-miss, .shot.a.k-block, .shot.a.k-post{ border-color:var(--as); } .shot.k-goal{ width:18px; height:18px; border:2.5px solid #fff; z-index:5; box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.5); } .smlegend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:10px; align-items:center; } .smlegend .shot{ position:static; transform:none; display:inline-block; vertical-align:middle; } .smfilters{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; } .smchip{ border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:4px 12px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; } .smchip.on{ border-color:var(--accent); background:var(--accent); color:#fff; } .smchip .shn{ font-weight:400; opacity:.85; } /* selector de echipa deasupra terenului */ .mteam{ display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap; } .mtbtn{ border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; } .mtbtn.on{ border-color:var(--tc,var(--accent)); box-shadow:inset 0 0 0 1px var(--tc,var(--accent)); color:var(--tc,var(--ink)); } .mtbtn[data-mt="all"].on{ background:var(--accent); border-color:var(--accent); color:#fff; } /* o singura echipa: cercuri mai mari */ .vfield.solo .jersey{ width:52px; height:52px; font-size:16px; } .vfield.solo .pname{ font-size:12px; max-width:150px; } .vfield.solo .player{ width:124px; } .vfield.solo .shot{ width:15px; height:15px; } .vfield.solo .shot.k-goal{ width:20px; height:20px; } /* impartire prima / a doua repriza pe harta suturilor unei echipe */ .rmid{ position:absolute; left:0; right:0; top:50%; border-top:2px dashed rgba(255,255,255,.45); z-index:4; } .rlbl{ position:absolute; left:8px; z-index:6; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.4); padding:2px 7px; border-radius:5px; } .rlbl.top{ top:8px; } .rlbl.bot{ bottom:8px; } /* clasament jucatori (per meci si per echipa) */ .pr-controls{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; align-items:center; } .pr-controls select{ background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:13px; font-family:inherit; } .prrow{ display:flex; align-items:center; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:13.5px; } .prrow .rk{ width:22px; text-align:right; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; } .prrow .dot{ width:10px; height:10px; border-radius:50%; flex:none; } .prrow .nm{ flex:1; font-weight:600; cursor:pointer; } .prrow .nm:hover{ text-decoration:underline; } .prrow .bar{ flex:2; height:6px; background:var(--line); border-radius:3px; overflow:hidden; } .prrow .bar i{ display:block; height:100%; } .prrow .val{ width:52px; text-align:right; font-weight:800; font-variant-numeric:tabular-nums; } /* tabel statistici jucatori, sortabil */ .xscroll, .pstat{ overflow-x:auto; } /* scrollbar finuț dar sesizabil, în ambele teme */ .xscroll, .pstat, .modal{ scrollbar-width:thin; scrollbar-color:rgba(142,152,144,.6) transparent; } .xscroll::-webkit-scrollbar, .pstat::-webkit-scrollbar, .modal::-webkit-scrollbar{ width:9px; height:9px; } .xscroll::-webkit-scrollbar-track, .pstat::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track{ background:transparent; } .xscroll::-webkit-scrollbar-thumb, .pstat::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb{ background:rgba(142,152,144,.6); border-radius:8px; border:3px solid transparent; background-clip:padding-box; } .xscroll:hover::-webkit-scrollbar-thumb, .pstat:hover::-webkit-scrollbar-thumb, .modal:hover::-webkit-scrollbar-thumb{ background:rgba(142,152,144,.85); background-clip:padding-box; } .pstat table{ border-collapse:collapse; font-size:12.5px; min-width:1080px; width:100%; } .pstat th, .pstat td{ padding:5px 7px; text-align:center; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; white-space:nowrap; } /* `top` rămâne 0, NU `var(--navh)`: `.pstat` are `overflow-x:auto`, ceea ce face din el un container de derulare pe AMBELE axe, deci `sticky` de aici se raportează la el, nu la ecran - antetul nu se lipește în realitate de marginea de sus a paginii, oricât ar părea din CSS. Măsurat pe 18 august 2026: cu `top:49px`, antetul a coborât 49px de la locul lui și a acoperit primele două rânduri. Bara de meniu lipită nu-l deranjează cu nimic. */ .pstat th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-top:none; cursor:pointer; user-select:none; position:sticky; top:0; background:var(--card); } .pstat th:hover{ color:var(--ink); } .pstat th.on{ color:var(--accent); font-weight:800; } :root[data-theme="dark"] .pstat th.on{ color:#6fbf7e; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pstat th.on{ color:#6fbf7e; } } .pstat th:first-child, .pstat td:first-child{ text-align:left; position:sticky; left:0; background:var(--card); } .pstat td:first-child{ font-weight:600; cursor:pointer; max-width:190px; overflow:hidden; text-overflow:ellipsis; } .pstat td:first-child:hover{ text-decoration:underline; } .pstat td.hi{ font-weight:800; } .pstat .sdot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; } /* Antetul stă deasupra NUMELUI, nu deasupra siglei (cerut de utilizator pe 31 august 2026): celula are trei lucruri unul după altul - siglă, pastila de poziție, nume - iar cele trei se poartă ca trei coloane, deci și capul de tabel trebuie să înceapă de unde încep numele. Jetoanele adună exact lățimile de mai jos, ca o schimbare de mărime a siglei să le ducă pe amândouă odată. */ :root{ --sig:32px; /* siglă 26 + spațiul de după ea 6 */ --sigpoz:53px; } /* siglă 26 + 6 + pastila de poziție 15 + 6 */ /* Eticheta grupei a doua cade pe aceeași verticală cu antetul de sus, deci primește ACELAȘI padding - altfel „Play-out" ar porni de la marginea celulei, iar „Play-off" de după siglă. */ .standings th.tm, .clasarbtbl th.tm, .standings td.stghd{ padding-left:calc(8px + var(--sig)); } /* Mai puțin aer sub ultima echipă. Se vede DOAR la sezonul cu play-off, unde clasamentul e cardul cel mai înalt; în rest e întins de grilă până la înălțimea coloanei din dreapta, deci marginea de jos e absorbită. */ .card.standings{ padding-bottom:7px; } .pstat th.plh{ padding-left:calc(7px + var(--sigpoz)); } /* „Meci" din fișa jucătorului are doar siglă, fără pastilă de poziție; „Scor" n-are nici siglă, deci rămâne la paddingul obișnuit. */ .pstat th.jpmh{ padding-left:calc(7px + var(--sig)); } .pstat th.jpsch{ padding-left:7px; } /* Pastila de post: DOAR litera, cu chenar, fără umplutură colorată (decizia utilizatorului, 7 septembrie 2026). Cele patru culori de dinainte - auriu la portar, albastru la fundaș, verde la mijlocaș, roșu la atacant - erau exact culorile scării de note (media ligii / foarte bun / bun / slab), deci un atacant purta „slab" lângă nume chiar pe terenul unde tricoul e colorat după notă. Postul e categorie, nota e scară; litera ajunge. Gri deschis pe fond închis, gri închis pe fond deschis - `--muted` are câte o valoare pe temă. */ .posb{ display:inline-block; width:15px; text-align:center; font-size:9px; font-weight:700; border-radius:4px; margin-right:6px; color:var(--muted); border:1px solid var(--muted); background:transparent; vertical-align:middle; line-height:12px; box-sizing:border-box; } .poslegend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin-top:2px; align-items:center; } .pstat tr.subrow td{ opacity:.82; } /* coloanele lipite (loc + nume) rămân opace și pe rândurile de rezerve - să nu se vadă textul de dedesubt */ .mtbl tr.subrow td.rk, .mtbl tr.subrow td.plc{ opacity:1; color:var(--muted); } /* numărul de pe tricou, discret, în paranteză, după nume */ .pnrsm{ font-size:10px; color:var(--muted); font-weight:400; margin-left:5px; font-variant-numeric:tabular-nums; } .pstat th.sep, .pstat td.sep{ border-left:1px solid var(--line); } .pstat th.pct{ font-weight:700; } .pstat td.pv{ font-weight:400; } .fdoc td.pv.p90{ color:var(--p90); } .fdoc td.pv.p80{ color:var(--p80); } .fdoc td.pv.p70{ color:var(--p70); } .fdoc td.pv.p60{ color:var(--p60); } .fdoc td.pv.p50{ color:var(--p50); } .fdoc td.pv.p0{ color:var(--p0); } .fdoc td.pv.pcviolet{ color:var(--pviolet); } .fdoc td.pv.pcorange{ color:var(--porto); } .pstat td.pv.p90{ color:var(--p90); } .pstat td.pv.p80{ color:var(--p80); } .pstat td.pv.p70{ color:var(--p70); } .pstat td.pv.p60{ color:var(--p60); } .pstat td.pv.p50{ color:var(--p50); } .pstat td.pv.p0{ color:var(--p0); } .pstat td.pv.pcviolet{ color:var(--pviolet); } .pstat td.pv.pcorange{ color:var(--porto); } .alltable table{ width:100%; border-collapse:collapse; font-size:13px; } .alltable th, .alltable td{ padding:5px 9px; text-align:center; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; } .alltable th{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-top:none; } .alltable td:first-child, .alltable th:first-child{ text-align:left; } .alltable td.avgc{ font-weight:800; } .alltable tr.teamhead td{ font-weight:800; text-align:left; padding-top:13px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; border-top:none; } .alltable tr.subrow td{ color:var(--muted); } /* pagina de echipa */ .thead{ display:flex; align-items:center; gap:14px; } .thead .badge{ width:52px; height:52px; border-radius:14px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; } /* Sigla, nu inițiala: literele într-un pătrat colorat erau o soluție de pe vremea când nu aveam desenele. Pastila colorată rămâne doar pentru echipele fără siglă în bancă. */ .tbadge{ width:52px; height:52px; object-fit:contain; flex:none; } .myteam .tbadge{ width:44px; height:44px; } .thead h2{ margin:0; font-size:24px; } .thead .sub2{ font-size:13px; color:var(--muted); } /* forma echipei: ultimele 5 rezultate, pătrățele V/E/Î, click duce la meci */ /* Forma ultimelor 5 în clasament, ca buline. Mici ANUME: coloana echipei e cea care se întinde, iar cinci pastile de mărimea celor din pagina echipei ar fi lățit tabelul peste ecranul telefonului. Aceleași trei culori ca `.fbx`, doar în alt format. */ .frm{ display:inline-flex; gap:2px; margin-left:7px; vertical-align:middle; flex:none; } .frm i{ width:6px; height:6px; border-radius:50%; display:block; } /* Verdele, galbenul și roșul NOTELOR (--p70 / --p50 / --p0), nu trei culori proprii: sunt mai stinse, sunt exact cele cu care e scris scorul live de alături, și își schimbă singure valoarea pe temă. */ .fb-w{ background:var(--p70); } .fb-d{ background:var(--p50); } .fb-l{ background:var(--p0); } /* Pe telefon bulinele se strâng încă o treaptă: măsurat, cei 11px economisiți sunt exact cât îi trebuie lui „Corvinul" ca să nu mai fie tăiat cu „…". */ @media (max-width:620px){ .frm{ gap:1px; margin-left:5px; } .frm i{ width:5px; height:5px; } } .tform{ display:flex; align-items:center; gap:4px; margin-top:7px; font-size:12px; color:var(--muted); } .fbx{ display:inline-flex; width:20px; height:20px; border-radius:6px; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; cursor:pointer; } .fbx:hover{ filter:brightness(1.15); } .fbx-w{ background:#1a9e4b; } .fbx-d{ background:#8a93a3; } .fbx-l{ background:#d43f3f; } /* pe pagina unei echipe, clubul de sub numele din teren e mereu același - se ascunde */ #txihome .xic{ display:none; } /* topurile echipei: „Meciuri" în colțul din dreapta al titlului, coloana sub el */ .tops5 .statcard + .statcard{ margin-top:14px; } /* antetul celor două coloane de cifre, cu linie dedesubt */ .tops5 .stat5h{ display:flex; align-items:baseline; gap:6px; padding:0 0 5px; border-bottom:1px solid var(--line); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); } .tops5 .stat5h .sp{ flex:1; min-width:0; } /* `:first-of-type` se uită la TIPUL elementului, iar antetul e tot un div, deci primul rând de date nu mai e „primul div" și și-ar fi luat linia de sus peste linia antetului */ .tops5 .stat5h + .statrow{ border-top:none; } .tops5 .v5{ width:82px; flex:none; display:flex; align-items:baseline; justify-content:center; font-variant-numeric:tabular-nums; } .tops5 .m5{ width:56px; flex:none; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; } .tops5 .stat5h .v5, .tops5 .stat5h .m5{ text-align:center; } .tops5 .pm{ color:var(--muted); font-size:11.5px; margin-left:4px; font-weight:400; } /* meciurile echipei, compacte: un rând pe meci, trei coloane pe ecran lat */ .mlist3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } @media (max-width:980px){ .mlist3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .mlist3{ grid-template-columns:1fr; } } .mrow3{ display:flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px; } .mrow3:hover{ border-color:var(--accent); } .mrow3 .mr3e{ color:var(--muted); font-size:11px; white-space:nowrap; min-width:50px; flex:none; } .mrow3 .mr3t{ flex:1; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; min-width:0; } .mrow3 .mr3t.h{ justify-content:flex-end; } .mrow3 .mr3s{ font-variant-numeric:tabular-nums; white-space:nowrap; flex:none; } /* card arbitru */ .refcard .refrow{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; } .refname{ font-size:15px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .refname b{ font-weight:800; } .refname .refsub{ display:block; font-size:12px; color:var(--muted); font-weight:400; margin-top:2px; } .refstats{ display:flex; gap:22px; flex-wrap:wrap; } .rst{ text-align:center; } .rst b{ display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; } .rst span{ font-size:11px; color:var(--muted); } .refname.clk{ cursor:pointer; } .refname.clk:hover b{ text-decoration:underline; } /* numele echipei în fișa arbitrului: scurtat de rmEchipa, cu siglă lângă el */ .rmnm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rmflag{ font-size:15px; line-height:1; flex:none; } /* lățimi fixe: antetul nu se mai mișcă la comutarea Total <-> Medie */ .sztbl{ margin-top:8px; table-layout:fixed; } /* capul Istoricului: linia de carieră (fostul rând de sub nume) și nota despre granița statisticilor noastre */ .rfcar{ font-size:12.5px; margin:2px 0 3px; } .rfnota{ font-size:11.5px; color:var(--muted); margin:0 0 10px; } .sztbl .szpm{ font-size:9px; color:var(--muted); font-weight:700; margin-left:2px; } .sztbl tr.szlim td{ border-bottom:2px solid var(--muted); } .refrez{ font-size:12.5px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:7px 10px; margin:8px 0 2px; line-height:1.5; } .refrez b{ color:var(--ink); } .refprof.nivp{ font-weight:700; } /* semnul de anomalie: aceeași formă cu badge-ul de conflict de interese (.cfb), dar ROȘU - vezi nivPill pentru motivul despărțirii de galben */ .anmb{ display:inline-block; font-size:10px; font-weight:700; color:var(--p0); background:transparent; border:1px solid var(--p0); border-radius:999px; padding:1px 5px; cursor:help; vertical-align:1px; } .sztbl th.rnm, .sztbl td.rnm{ width:25%; } .sztbl th:not(.rnm), .sztbl td:not(.rnm){ width:15%; } /* ── fișa arbitrului ── Stă AICI, în foaia principală, nu în ARB_CSS: fișa se deschide din patru locuri, numele de pe prima pagină, cardul de arbitru din pagina de meci, plăcile din pagina Arbitri și tabelul de acolo, iar ARB_CSS se injectează doar pe ultimele două. Cât timp a stat acolo, tabelul de meciuri al fișei ieșea nestilizat exact pe drumurile cele mai scurte spre el. */ /* .marbidx rămâne doar ca marcaj: lățimea o dă acum regula comună .modal. */ /* derularea orizontala poarta scrollbarul finut al tabelelor de jucatori (clasa .xscroll, definita in foaia principala) - cerut pe 30 august 2026, ca toate tabelele site-ului sa derueleze la fel */ .reftw{ overflow-x:auto; } /* „Filă nouă", la capătul liniei de carieră. Taburile „Meciuri recente" / „Istoric" au dispărut pe 29 august 2026: filtrele au urcat pe rândul numelui, iar defalcarea pe sezoane a coborât sub tabel, pliată. */ .rfnew{ font-size:11px; font-weight:700; color:var(--muted); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:2px 8px; white-space:nowrap; margin-left:8px; vertical-align:1px; display:inline-block; } /* rândul cu cartonașele poartă și linkul de filă nouă: sunt amândouă lucruri despre OM, nu despre tabelul de dedesubt */ .mhead .who .sub2{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 0; } /* semnul într-o casetă de lățime fixă: coloana se aliniază pe cifră */ .numsg{ font-variant-numeric:tabular-nums; } .numsg .sgn{ display:inline-block; width:.62em; text-align:right; } .rfnew:hover{ color:var(--accent); border-color:var(--accent); } /* pagina de sine stătătoare a fișei: cardul poartă antetul de modal, deci îi ia și spațierea, dar fără fundalul și marginile unei ferestre */ .arbfisa .mhead{ padding:0; border:none; margin:6px 0 12px; } /* aceeași înfățișare ca lista de jucători: coloană de ordine, linii pe ambele axe, aceeași înălțime de rând, două tabele care arată la fel se citesc la fel */ .reftbl{ width:100%; border-collapse:collapse; font-size:12.5px; } .reftbl th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:7px 8px; text-align:center; white-space:nowrap; border-bottom:1px solid var(--line); } /* Antetul arată a antet: fundal mai închis decât rândurile și chenar întreg, ca subsolul de jos - cerut pe 29 august 2026 („pare neterminat așa"). */ .reftbl thead th{ background:var(--chip); border-top:1px solid var(--line); } .reftbl thead th:first-child{ border-left:1px solid var(--line); } .reftbl thead th:last-child{ border-right:1px solid var(--line); } .reftbl tbody td:first-child{ border-left:1px solid var(--line); } .reftbl tbody td:last-child{ border-right:1px solid var(--line); } .reftbl tfoot td{ border-bottom:1px solid var(--line); } .reftbl tfoot td:first-child{ border-left:1px solid var(--line); } .reftbl tfoot td:last-child{ border-right:1px solid var(--line); } /* Cartonașele au un pixel în plus de fiecare parte: două cifre mici lipite de chenar, între coloane late, se citeau înghesuit. */ #reftblA th.thcart, #reftblA td.thcart{ padding-left:9px; padding-right:9px; } .reftbl td{ padding:7px 8px; border-top:1px solid var(--line); border-left:1px solid var(--line); text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap; } .reftbl th{ border-left:1px solid var(--line); } .reftbl th:first-child, .reftbl td:first-child{ border-left:none; } .reftbl tbody tr{ cursor:pointer; } .reftbl tbody tr:hover{ background:var(--bg); } /* antete sortabile. Săgeata are lățime rezervată MEREU (și când e goală), altfel rândul de antet își schimbă lățimea la fiecare click și tabelul tresare sub degete. */ .reftbl th.thsort{ cursor:pointer; user-select:none; } .reftbl th.thsort:hover{ color:var(--ink); background:var(--bg); } .reftbl th.sorton{ color:var(--accent); } .reftbl .sarr{ display:inline-block; width:9px; font-size:9px; margin-left:2px; vertical-align:1px; } .reftbl .rk{ width:34px; text-align:center; color:var(--muted); font-weight:400; } .reftbl .rnm{ text-align:left; font-weight:600; overflow:hidden; text-overflow:ellipsis; max-width:190px; } .reftbl tbody tr:hover .rnm{ text-decoration:underline; } .reftbl .mut{ color:var(--muted); opacity:.45; } .reftbl .sic{ width:13px; height:14px; } /* Cele șapte plăci au conținut de înălțimi diferite - o cifră cu pictogramă, o cifră cu etichetă pe două rânduri, un procent. Aliniate sus, cifrele stăteau pe linii diferite și rândul arăta rupt; centrate pe verticală, se citesc ca un singur rând de cifre. */ .arbsum{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin:2px 0 12px; } /* Rândul de context stă DEASUPRA benzii de indici, ca zona „La centru" din Brigada: trei plăci, cu cartonașele pe două rânduri ca placa să nu fie lată cât două. */ .arbsum.arbsum3{ grid-template-columns:repeat(3,minmax(0,150px)); margin-bottom:10px; } .arbsum.arbsum2{ grid-template-columns:repeat(2,minmax(0,150px)); margin-bottom:10px; } /* Linia care ține locul benzii de indici la competițiile pe care presa noastră nu le citește. Aceeași literă cu notele de sub tabele. */ .ixnota{ margin:0 0 12px; font-size:11.5px; color:var(--muted); line-height:1.5; } /* Plăcile se întind cât cărțile „Meciul" + „Arbitrul" de dedesubt, iar filtrele din antet cât cartea „VAR" - aceleași verticale sus și jos (cerut pe 30 august 2026). Banda împarte 1:3:3 cu gap 12px, deci jumătatea stângă e 4/7 din lățime plus gap-ul dintre primele două. */ /* Cu a cincea placă (meciuri ca VAR) rândul se întinde spre dreapta, ca plăcile să rămână la fel de late ca înainte: 5/7 din lățime plus cele două goluri. Alinierea de dinainte - plăcile exact cât cărțile „Meciul" + „Arbitrul" - se pierde cu bună știință; era o potrivire de patru plăci. */ .arbsum.arbsum5{ grid-template-columns:repeat(5,1fr); margin-bottom:10px; width:calc((100% - 28px) * 5 / 7 + 28px); } @media(max-width:860px){ .arbsum.arbsum5{ width:100%; } } /* Pe telefon cele cinci plăci se rup 3 + 2: la cinci pe un rând, „TOTAL MECIURI ÎN 2026/27" cădea pe patru rânduri și placa se dubla în înălțime. */ @media(max-width:620px){ .arbsum.arbsum5{ grid-template-columns:repeat(3,1fr); } } /* cuvintele-cheie ale plăcilor poartă culorile pe care le au și în tabel: violetul lui „curat", gradientul titlului „Meciul" la „discutate" */ /* Aceeași variabilă ca „curat" din tabel, dar la 9,5px uppercase ieșea optic mai deschisă: mărimea și greutatea o aduc la aceeași densitate. */ .arbsum .ascur{ font-style:normal; font-weight:800; font-size:10.5px; color:var(--pviolet); } /* „VAR" în tealul camerei, aceeași culoare cu cartea VAR din bandă și cu rândul VAR din brigadă: ce spune cifra despre cine, aia poartă. */ .arbsum .asvar{ font-style:normal; font-weight:800; font-size:10.5px; color:var(--var-ink); } .arbsum .asdisc{ font-style:normal; font-weight:800; font-size:10.5px; background-image:linear-gradient(105deg,var(--var-ink) 0%,var(--ref-ink) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* numele arbitrului, pe rândul filtrelor: mare și fără iconiță - linia de carieră a coborât în Istoric, deci numele rămâne singurul titlu */ .rfhead .who .rfnm2{ font-size:21px; font-weight:800; letter-spacing:-.01em; } .rfhead .who.whorow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* Meciul nejucat: același rând, stins. Nu ascuns și nu într-o listă separată - are brigada, deci are ce spune; doar că n-are încă rezultat. */ .arbrow.arbprog{ opacity:.55; } .arbrow.arbprog:hover{ opacity:.8; } .arbrow.arbprog .amute{ opacity:.6; } .arbsum .asc2{ gap:1px; } .arbsum .asc2 > span{ display:flex; align-items:center; justify-content:center; gap:5px; } .arbsum .asc2 .sic{ width:15px; height:17px; } /* Banda de indici: aceleași trei grupuri ca panoul paginii de meci, în aceeași ordine și cu aceleași titluri, lățimile după câte plăci are fiecare. */ .ixband{ display:flex; gap:14px; align-items:flex-start; margin:0 0 12px; flex-wrap:wrap; } .ixgrp{ min-width:0; } .ixgrp .vargh{ margin:0 0 5px; } .ixgrid{ display:grid; gap:6px; } /* Chenarul grupului îmbrățișează plăcile, ca în panoul paginii de meci, iar sus și jos rămâne mai mult aer decât în lateral: acolo ies etichetele de cod din plăci, iar semnul actorului stă sub procent. */ .ixgrp .vargr{ padding:8px 9px 11px; } .ixperechi{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px 12px; } .vpair{ min-width:0; display:flex; flex-direction:column; } /* Aer egal deasupra și dedesubtul subtitlului - cerut pe 28 august 2026 („să nu fie așa îngrămădite"). Marginea de jos pare mare fiindcă eticheta de cod iese 7px deasupra plăcii și mănâncă din ea. Regulile stau în foaia GLOBALĂ, nu în ARB_CSS: fișa arbitrului se deschide și din pagina unui meci, unde ARB_CSS nu se injectează. */ .ksup{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:center; margin:3px 0 14px; white-space:nowrap; overflow:hidden; } /* Rândul de sub o carte de indici. Tot în foaia globală, din același motiv ca `.ksup`: fișa se deschide și din pagina unui meci, unde ARB_CSS nu ajunge. `nowrap` îl face să DEPĂȘEASCĂ, nu să se rupă, iar depășirea e ce măsoară `ixJosFit` ca să pună forma scurtă; textul rupt n-ar depăși nimic. */ .idxjos{ font-size:10.5px; color:var(--muted); margin:8px 0 0; } .idxjos.idxc{ white-space:nowrap; overflow:hidden; text-align:center; } .ixg2{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* Fundalul rămâne cel obișnuit; doar chenarul poartă culoarea actorului, iar codul stă deasupra lui, ca legenda unui fieldset (fundalul lui e cel al cardului, ca să taie linia chenarului). */ .ixt{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:12px 4px 8px; text-align:center; min-width:0; } .ixt.kref{ border-color:var(--ref-soft); } .ixt.kvar{ border-color:var(--var-soft); } /* Codul și semnul juriului stau ÎMPREUNĂ pe chenar, sus: codul spune ce măsoară placa, semnul din ce urnă vine cifra (ziar la presă, fluier la foștii arbitri). Fundalul etichetei e cel al cardului, ca să taie linia. */ /* padding lateral 7px, nu 4: pe plăcile punctate, un punct lipit de capul etichetei se citea ca punct de propoziție („IAF.VP."). */ .ixt .kcod{ position:absolute; top:-7px; left:50%; transform:translateX(-50%); background:var(--card); padding:0 7px; font-size:9px; font-weight:800; letter-spacing:.07em; line-height:1.2; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; } .ixt.kref .kcod{ color:var(--ref-ink); } .ixt.kvar .kcod{ color:var(--var-ink); } .ixt .jur{ width:12px; height:12px; color:var(--muted); opacity:.8; flex:none; } /* Aceeași iconiță de juriu în antetul coloanei din tabelul fișei: coloanele urmează comutatorul de deasupra, iar semnul spune din ce urnă e cifra fără să mai citească nimeni ultima literă a codului. */ .arbidxt thead .jur{ width:11px; height:11px; color:var(--muted); opacity:.75; vertical-align:-1px; margin-left:3px; margin-right:-14px; } /* Antetul se centrează pe TEXT: săgeata de sortare (9px lățime fixă) și iconița de juriu stau „într-o parte", cu margini negative, altfel împing codul spre stânga. Lățimile fixe pe coloanele de cifre țin tabelul NEMIȘCAT la comutarea juriului - fără ele, „100%" contra „–" schimba lățimile și coloana de meci sălta la fiecare click. */ .arbidxt th .sarr{ margin-right:-11px; } .arbidxt th.thix{ width:58px; } .arbidxt th.thic{ width:45px; } .arbidxt th.thfz{ width:48px; } /* Lumea „fără VAR": chenar punctat cu aer între puncte. border-style:dotted are pasul fix, deci punctele le desenează SVG-ul .kfvb, întins peste placă, cu geometria scrisă aici (Chromium acceptă x/width/rx din CSS). Chenarul plăcii rămâne ca rezervă, transparent. */ .ixt.kfv{ border-color:transparent; } /* sub etichetă, nu peste ea: SVG-ul vine după .kcod în DOM, deci fără z-index punctele se desenau PESTE fundalul etichetei, printre litere. */ .kfvb{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; } .ixt .kcod{ z-index:1; } .ixt.kref .kfvb{ color:var(--ref-soft); } .ixt.kvar .kfvb{ color:var(--var-soft); } .kfvb rect{ x:0.5px; y:0.5px; width:calc(100% - 1px); height:calc(100% - 1px); rx:8.5px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-dasharray:0.1 4.4; stroke-linecap:round; } .ixt > b{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; } /* Semnul actorului, sub procent, în culoarea chenarului: fluier la arbitrul din teren, monitor la camera video. */ .ixt .act{ display:block; width:13px; height:13px; margin:3px auto 0; } .ixt.kref .act{ color:var(--ref-soft); } .ixt.kvar .act{ color:var(--var-soft); } /* ── moneda cu două fețe ────────────────────────────────────────────── Fiecare felie are două jurii, presa și foștii arbitri. Până pe 29 august 2026 asta însemna două plăci alăturate, adică paisprezece cifre deodată. Acum e O placă cu două fețe: fața arată presa, click-ul o întoarce spre breaslă, iar comutatorul din capul benzii le întoarce pe toate. Nu se pierde nimic - juriul celălalt e la o atingere, și e tot în tabel. */ .jsw{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:0 0 10px; font-size:11px; color:var(--muted); } .jsw button{ display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--bg); border:1px solid var(--line); color:var(--muted); border-radius:999px; padding:3px 10px; cursor:pointer; } .jsw button.on{ border-color:var(--navsel); color:var(--navsel); } .jsw .jsi{ width:11px; height:11px; } /* Cele două comutatoare ale fișei - competiția și juriul - stau pe un rând, la dreapta benzii de indici: amândouă spun prin ce lentilă se citesc aceleași meciuri. Pe ecran îngust se rup unul sub altul; împreună cer ~340px. */ .ixsw{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 14px; } .ixsw .jsw{ margin:0; } .coin{ position:relative; perspective:700px; min-width:0; cursor:pointer; -webkit-tap-highlight-color:transparent; } .cin{ position:relative; width:100%; height:var(--coinh,72px); transform-style:preserve-3d; transition:transform .45s; } .coin.flip .cin{ transform:rotateY(180deg); } .cface{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .cface.cb{ transform:rotateY(180deg); } /* Plasa pentru browserele care nu ascultă `backface-visibility` (Safari o pierde de îndată ce o față are un descendent cu context propriu): acolo spatele nu se ascunde, iar prin el se vede FAȚA, oglindită - adică exact ce a raportat utilizatorul pe 29 august 2026, „scrisul în oglindă" în loc de celălalt indice. Așa că faza vizibilă nu mai atârnă de o proprietate 3D, ci se schimbă din opacitate, cu întârzierea pusă la JUMĂTATEA rotirii (.45s / 2) și cu durata 0 - deci comutarea se petrece fix când placa e pe muchie și nu se vede nimic din ea. În Chromium rezultatul e identic cu cel de dinainte; în Safari e diferența dintre corect și oglindit. */ .coin .cface{ opacity:1; transition:opacity 0s linear .225s; } .coin .cface.cb{ opacity:0; } .coin.flip .cface{ opacity:0; } .coin.flip .cface.cb{ opacity:1; } .cface .ixt{ height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } /* semnul de întoarcere, în colțul plăcii: fără el nimeni n-ar ghici că placa are un spate. Stă în FIECARE față, altfel s-ar oglindi la rotire. */ .cflip{ position:absolute; right:5px; top:4px; width:10px; height:10px; color:var(--muted); opacity:.45; z-index:2; pointer-events:none; } .coin.cfix{ cursor:default; } .coin.cfix .cflip{ display:none; } /* placa duelului: aceeași fază judecată din două părți, deci o singură placă cu ambele jumătăți, despărțite de „vs". Chenarul e pe jumătate magenta, pe jumătate teal, ca la cartea Meciului. */ .ixt.kduel{ border-color:var(--ref-soft) var(--var-soft) var(--var-soft) var(--ref-soft); } /* Eticheta duelului poartă amândouă codurile, fiecare în culoarea jumătății pe care o numește; „vs" dintre ele rămâne gri, ca despărțitorul de sub el. */ .ixt .kcod.kdd{ color:var(--muted); font-weight:700; } .ixt .kcod.kdd .kdref{ color:var(--ref-ink); font-weight:800; } .ixt .kcod.kdd .kdvar{ color:var(--var-ink); font-weight:800; } /* „vs" se aliniază pe RÂNDUL cifrelor, nu pe mijlocul celulei: sub cifre mai stau semnele de actor, deci centrarea pe toată placa îl cobora între ele. `align-items:flex-start` + înălțimea de linie a cifrei îl așază exact la mijlocul lor. */ .dwrap{ display:flex; align-items:flex-start; justify-content:center; gap:7px; width:100%; } .dh{ display:flex; flex-direction:column; align-items:center; line-height:1.1; min-width:0; } .dh b{ font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; } .dh .dic{ display:block; width:12px; height:12px; margin:3px auto 0; } .dh.dhref .dic{ color:var(--ref-soft); } .dh.dhvar .dic{ color:var(--var-soft); } .dvs{ flex:none; font-size:8.5px; font-weight:700; letter-spacing:.06em; line-height:23px; text-transform:uppercase; color:var(--muted); opacity:.75; } @media(max-width:760px){ /* Meciul și Arbitrul împart primul rând, VAR îl ia pe al doilea întreg: cartea Meciului are o singură placă, deci pe un rând propriu ar lăsa două treimi de rând goale. */ .ixband{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; } .ixband .ixgrp + .ixgrp{ margin-top:0; } .ixband .gvar{ flex:1 1 100% !important; } .ixperechi{ gap:6px 8px; } /* subtitlul perechii trebuie să încapă pe UN rând și la 360px: pe două rânduri împinge plăcile în jos și cartea nu se mai citește dintr-o privire. Un punct mai mic și mai puțină distanță între litere ajung. */ .ksup{ font-size:8.5px; letter-spacing:.02em; } } /* Sub 400px mai coboară un punct: la 360px „Decizii finale" și „A întors decizia" se rupeau încă în două. */ @media(max-width:400px){ .ksup{ font-size:8px; letter-spacing:0; } .dwrap{ gap:5px; } .dh b{ font-size:17px; } .dvs{ line-height:20px; } } .arbsum div{ background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 4px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } /* Cartonașele: cifra și pictograma pe UN rând. „Galbene" scris cu litere era un cuvânt pe care desenul îl spune mai repede, și mai mare, cât cifra. */ .arbsum .asc{ flex-direction:row; gap:5px; } .arbsum .asc .sic{ width:19px; height:21px; } .arbsum b{ font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; } /* selector pe copil DIRECT: eticheta e span-ul de sub placă, dar procentul colorat e tot un span, înăuntrul cifrei, cu selectorul descendent ajungea la 9,5px și cele două plăci de indice se citeau mai mici decât restul */ .arbsum > div > span{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); line-height:1.25; } /* Filtrele stau DEASUPRA plăcilor, fiindcă ele decid ce scrie în plăci - se citesc în ordinea în care lucrează. La dreapta și de mărime obișnuită: sunt un control, nu subiectul ferestrei. */ /* Antetul fișei: numele și linia de carieră la stânga, filtrele în dreptul lor, la dreapta - cerut pe 29 august 2026, când au dispărut taburile „Meciuri recente" / „Istoric". */ .rfhead{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; } .rfhead .who{ flex:1 1 260px; min-width:0; } /* În fereastră, numele își cere doar lățimea LUI (nume + „Tab nou"), nu 260px de rezervă: cu baza fixă rândul se rupea chiar și când cele două jumătăți ar fi încăput. Cerut de utilizator pe 10 septembrie 2026, odată cu mutarea ✕-ului pe rândul lui. */ .marbidx .rfhead .who{ flex:1 1 auto; } /* ✕-ul stă pe un rând al lui, în colț, ca să nu cadă sub deget când se apasă filtrul de sezon de lângă el. Rândul n-are înălțime proprie: butonul e tras în paddingul ferestrei. */ .marbidx .mxrow{ display:flex; justify-content:flex-end; height:26px; margin:-6px -4px 2px 0; } .marbidx .mxrow .mx{ width:26px; height:26px; font-size:14px; } .rfhead .rimfilsus{ margin:2px 0 0; flex:0 1 auto; } /* Filtrele își iau lățimea din TEXTUL lor, nu din lățimea cărții VAR (cerut de utilizator pe 31 august 2026). Erau întinse egal într-o cutie de 3/7 din pagină, iar cele trei nume - „Toate sezoanele", „Toate meciurile", „Toate echipele" - se tăiau sub săgeata selectorului. Alinierea cu cartea VAR de dedesubt a căzut odată cu placa a cincea de deasupra, care oricum a mutat verticalele; ce contează acum e să se citească ce e selectat. */ @media(min-width:861px){ .marbidx .rfhead .rimfilsus, .arbfisa .rfhead .rimfilsus{ flex:0 0 auto; } .rfhead .rimfilsus .posdd{ flex:0 0 auto; min-width:0; width:auto; } } /* Istoricul pe sezoane: pliat, ca „Faze clare" din pagina meciului. Titlul stă mereu la vedere, restul se deschide la click. `.clardet` trăiește în ARB_CSS, care nu ajunge în fereastra deschisă din pagina unui meci, deci regulile de care depinde secțiunea sunt scrise și aici. */ .rfist{ margin:26px 0 4px; } .rfist > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:6px 0; } .rfist > summary::-webkit-details-marker{ display:none; } .rfist > summary h3{ margin:0; font-size:15px; letter-spacing:.06em; text-transform:uppercase; } .rfist > summary:hover h3{ color:var(--navsel); } .rfist .clarcta{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--navsel); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } .rfist .clarcta::before{ content:'arată'; } .rfist[open] .clarcta::before{ content:'ascunde'; } .rfist .clarcta::after{ content:'▾'; font-size:11px; transition:transform .15s; } .rfist[open] .clarcta::after{ transform:rotate(180deg); } .rfist[open] .clarcta{ color:var(--muted); } .rfist .clarbox{ border:1px solid var(--line); border-radius:12px; background:var(--chip); padding:10px 12px 12px; margin-top:4px; } .rfist .postabs{ margin:0 0 10px; } .rimfil{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin:0 0 8px; } /* Filtrele își iau lățimea din textul lor, nu una fixă: „Toate meciurile" se tăia (cerut de utilizator pe 31 august 2026). `width:auto` pe un select îl lasă să se măsoare după opțiunea cea mai lungă. */ .rimfil .posdd{ flex:0 0 auto; min-width:0; width:auto; } /* În fereastră, cele patru filtre se strâng cu câțiva pixeli (aer lateral și spațiul dintre ele), ca rândul lor să încapă lângă nume - fără asta se rupeau pe două rânduri din 23px. Textul nu pierde nimic. */ /* Peste 1048px fereastra are lățimea ei fixă (954px), deci cele două jumătăți ale antetului stau pe UN rând: numele cu „Tab nou" la stânga, cele patru filtre la dreapta. `nowrap` e ce le ține acolo - cu wrap, o diferență de un pixel rupea rândul. Numele lung nu se taie: `.who` e la rândul lui un flex care rupe „Tab nou" pe rândul de dedesubt. Sub 1048px fereastra se îngustează odată cu ecranul, deci rândul se rupe ca înainte. */ @media(min-width:1048px){ .marbidx .rfhead{ flex-wrap:nowrap; } } @media(min-width:861px){ .marbidx .rfhead{ gap:10px; } .marbidx .rfhead .rimfil{ gap:6px; } .marbidx .rfhead .posdd{ padding-left:7px; padding-right:7px; } } .rimpg{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:9px; font-size:12px; color:var(--muted); } .rimpg button{ border:1px solid var(--line); background:var(--bg); color:inherit; border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:14px; line-height:1; } .rimpg button:disabled{ opacity:.35; cursor:default; } .arbidxt{ font-size:12px; } /* Celule mai strânse decât în tabelul mare de arbitri: aici coloana de meci are nevoie de 340px ca numele echipelor să se vadă, iar cei 3px scoși din fiecare margine, pe unsprezece coloane, sunt exact cât lipsea ca tabelul să încapă în fereastră fără derulare. */ .arbidxt th, .arbidxt td{ padding:7px 4px; } /* Lățimea minimă a coloanei de meci e ce face numele echipelor să se vadă: `.rmnm` are `overflow:hidden`, deci fără ea numele se strâng la zero și rândul rămâne cu sigle și scor, exact ce s-a reclamat pe 29 august 2026. Se poate acum, fiindcă cele șapte coloane de indice urmează juriul: până atunci erau zece, iar cele trei în plus luau tocmai lățimea asta. Dacă tabelul iese din ramă, `.reftw` derulează lateral. */ .arbidxt .rmeci{ text-align:left; white-space:nowrap; font-weight:500; line-height:1.35; min-width:352px; } /* Meciul pe UN rând: la stânga când s-a jucat, la dreapta cine a jucat. Coloana din stânga e FIXĂ, nu „auto", cu lățime după conținut, „Et. 7" și „P-off 10" ar fi pornit echipele din locuri diferite la fiecare rând, iar coloana de scoruri ar fi șerpuit. Fixă, echipele încep de pe aceeași verticală și scorurile cad unul sub altul. */ /* Trei celule - sezon | etapă | meci - cu linii verticale între ele, ca niște coloane de tabel (cerut pe 30 august 2026). Data a ieșit din rând: există în pagina meciului și în tooltipul rândului. Lățimile fixe țin echipele pe aceeași verticală la toate rândurile. */ .rmlin{ display:grid; grid-template-columns:50px 64px minmax(0,1fr); align-items:stretch; } .rmlin .rsez, .rmlin .ret{ display:flex; align-items:center; } .rmlin .ret, .rmlin .rteam{ border-left:1px solid var(--line); padding-left:8px; } .rmlin .ret{ font-size:10px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; white-space:nowrap; } /* Scorul se citește pe verticală, ca o listă de rezultate: în aceeași coloană la toate rândurile, gazda la dreapta lui, oaspetele la stânga. Aliniate la stânga, scorurile ieșeau în zigzag după lungimea numelui. */ .rteam{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; } .rmlin .rteam{ align-self:stretch; } /* Siglele: gazda o poartă în stânga numelui, oaspetele în dreapta - desenul spune singur cine joacă acasă, fără să mai scriem noi. De aceea cele două capete sunt flex, nu text aliniat: sigla și numele merg umăr la umăr, iar numele se scurtează cu trei puncte dacă e nevoie, sigla niciodată. */ .rteam .rh, .rteam .ra{ display:flex; align-items:center; gap:5px; min-width:0; } .rteam .rh{ justify-content:flex-end; } .rteam .ra{ justify-content:flex-start; } .rteam .tlogo{ height:16px; width:22px; margin:0; flex:none; } .rteam .rsc{ font-weight:700; font-variant-numeric:tabular-nums; min-width:36px; text-align:center; } .arbidxt tfoot .rmeci{ font-size:11px; color:var(--muted); font-weight:600; white-space:normal; } /* Meciul curat rămâne vizibil, dar stins: e explicația indicelui, nu subiectul lui. Dacă l-am fi scos de tot, fișa ar fi repetat aceeași eroare pe care coloanele noi o repară, zece meciuri liniștite, invizibile. */ .arbidxt tbody tr.rgol td{ opacity:.62; } .arbidxt tbody tr.rimr{ cursor:pointer; } .arbidxt tbody tr.rimr:hover td{ background:var(--chip); } /* Hoverul pe culorile site-ului, nu pe cel neutru: meciul discutat se aprinde galben (culoarea avertizării), cel curat violet (culoarea lipsei de greșeală). Amestecul pleacă din variabilele temei, deci ține și pe închis, și pe deschis. Meciul fără presă rămâne pe hoverul neutru. */ .arbidxt tbody tr.rimr.rdisc:hover td{ background:color-mix(in srgb, var(--warn-ink) 18%, var(--card)); } .arbidxt tbody tr.rimr.rcur:hover td{ background:color-mix(in srgb, var(--pviolet) 16%, var(--card)); } /* Rândul internațional nu duce nicăieri: n-avem pagină de meci pentru el, deci nici cursor de link, nici aprindere la trecerea mouse-ului. */ .arbidxt tbody tr.rimr.rintl{ cursor:default; } .arbidxt tbody tr.rimr.rintl:hover td{ background:transparent; } .arbidxt tbody tr.rimr.rintl .ret{ cursor:help; } .arbidxt tfoot td{ border-top:2px solid var(--line); font-weight:700; background:var(--bg); } .rcurat{ font-size:10.5px; font-weight:700; color:var(--pviolet); } /* Eticheta de sezon. Neutră intenționat - spune CÂND, nu cât de bine; dacă ar fi colorată ca un verdict, ochiul ar citi un an ca pe o notă. */ .szchip{ display:inline-block; font-size:9.5px; font-weight:700; color:var(--muted); background:var(--chip); border:1px solid var(--line); padding:1px 6px; border-radius:999px; margin-left:4px; white-space:nowrap; vertical-align:1px; } /* Numele echipei la atingerea siglei - vezi refFisaSigle. Deasupra tuturor, inclusiv a ferestrei modale, și fără să prindă clicuri: e o notă, nu un buton, iar dacă ar fi prins mouse-ul ar fi acoperit tocmai rândul de sub ea. */ .rmbul{ position:fixed; z-index:120; transform:translate(-50%,-125%); opacity:0; pointer-events:none; transition:opacity .12s; background:var(--ink); color:var(--card); font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:7px; white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.35); } .rmbul.on{ opacity:.95; } @media(max-width:560px){ .arbsum{ grid-template-columns:repeat(4,1fr); } .arbidxt{ font-size:11px; } .arbidxt td, .arbidxt th{ padding:5px 4px; } /* Pe telefon rândul nu mai poartă nici data, nici numele echipelor: rămân eticheta etapei, sezonul, siglele și scorul, atât cât încape pe o linie fără să se scurteze nimic. Numele erau oricum tăiate la o literă-două, ceea ce nu e informație, e zgomot; cine vrea numele atinge sigla. Se ascund DOAR numele care au siglă (.cusigla): echipele din arhive care n-au una își păstrează numele, altfel rândul lor ar rămâne gol. */ /* Pragul pe celulă e obligatoriu: fără el coloanele de cifre strâng coloana meciului până când eticheta iese peste sigle. Cu el, tabelul se trage lateral din .reftw, pentru asta există. */ .arbidxt .rmeci{ min-width:212px; } /* taburile și linkul stau tot pe un rând: strânse, încap în 390px, iar un „Filă nouă" căzut singur pe rândul doi lua cât încă două rânduri de meci */ .rfnew{ padding:4px 7px; font-size:11px; } .rmlin{ grid-template-columns:44px 56px minmax(0,1fr); } .rmlin .ret, .rmlin .rteam{ padding-left:5px; } .rteam .rmnm.cusigla{ display:none; } .rteam{ gap:4px; } .rteam .rsc{ min-width:34px; } .rteam .tlogo{ height:17px; width:23px; } /* Pe telefon, DOUĂ pe rând. Erau trei filtre și stăteau pe un rând, câte o treime; de pe 8 septembrie 2026 sunt patru (s-a adăugat competiția), iar la 324px de rând un sfert înseamnă 75px, adică sub lățimea săgeții de select. Două rânduri de câte două costă 30px din capul fișei și lasă fiecare etichetă citibilă. Textul întreg se vede oricum la desfacere. */ .rimfil .posdd{ flex:1 1 46%; min-width:0; padding-left:6px; padding-right:18px; } /* aer dublu deasupra comutatorului de juriu */ #rimcorp .jsw{ margin-top:15px; } } /* Fluierul în text curent: cât o literă, aliniat pe linia de bază, în culoarea textului - deci se aprinde odată cu numele la hover. */ .jurin{ width:13px; height:13px; vertical-align:-2px; } .postabs{ display:flex; gap:4px; flex-wrap:wrap; background:var(--bg); border-radius:11px; padding:4px; margin-bottom:12px; width:fit-content; } .ptab{ border:none; background:none; color:var(--muted); font-weight:700; font-size:13px; padding:7px 15px; border-radius:8px; cursor:pointer; font-family:inherit; } .ptab.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18); } .allplayers .pstat td:first-child .dot{ margin:0 6px 0 2px; } /* schimbarea unui filtru derulează înapoi la tabel (`scrollIntoView`), iar bara lipită i-ar acoperi capul: marja de derulare o ocolește */ .allplayers{ scroll-margin-top:calc(var(--navh, 0px) + 8px); } .postabs.scope{ margin-top:-4px; } .stab{ border:none; background:none; color:var(--muted); font-weight:700; font-size:12.5px; padding:6px 13px; border-radius:8px; cursor:pointer; font-family:inherit; } .stab.active{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.18); } .pstat table.toptbl{ min-width:0; } /* lista de jucători: cap cu dropdown, siglă, paginare, coloane-surse */ .allhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } /* Aer dublu între titlu și taburile de grupe: erau lipite de rândul de filtre, iar titlul și butoanele se citeau ca un singur bloc. */ .allplayers .postabs{ margin-top:8px; } .allhead h3{ margin:0; } .allfilters{ display:flex; gap:8px; flex-wrap:wrap; } .posdd{ font-family:inherit; font-size:13px; font-weight:700; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:6px 10px; cursor:pointer; } .posdd.sz{ font-size:12px; padding:3px 6px; margin-left:8px; font-weight:600; } /* Siglele se măsoară pe ÎNĂLȚIME, nu pe o cutie pătrată: stemele au proporții diferite (a Rapidului e mai lată decât înaltă, a Petrolului invers), iar cu `object-fit:contain` într-un pătrat cea lată se scala după lățime și ieșea vizibil mai mică. Cu înălțimea fixă și lățimea liberă, toate se văd la fel de mari. Merge doar fiindcă siglele sunt tăiate pe conturul stemei (`pipeline/sigle_egale.py`) - altfel marginea transparentă ar reintroduce exact diferența pe care o repară. */ /* Cutie de lățime FIXĂ, nu doar plafon: cu `width:auto` fiecare stemă își lua lățimea ei (Rapid 1,19 lățime/înălțime, Botoșani 0,68), deci numele de după ele porneau din locuri diferite și coloana șerpuia. Măsurat pe toate cele 46 de sigle ale proiectului: cea mai LATĂ are raportul 1,19, iar cutia are 26/19 = 1,37 - deci `contain` le limitează pe TOATE pe înălțime, rămân la 19px și se centrează pe orizontală în cutie. Regula „siglele se măsoară pe înălțime" e neatinsă; ce se fixează e slotul, nu stema. Cerut de utilizator pe 31 august 2026. */ .tlogo{ height:19px; width:26px; object-fit:contain; vertical-align:middle; margin-right:6px; flex:none; } /* Centrare pe verticală ADEVĂRATĂ în celulele care poartă siglă + pastilă de poziție + nume (cerut de utilizator pe 31 august 2026). `vertical-align: middle` aliniază mijlocul imaginii cu linia de bază plus JUMĂTATE DIN x-height, nu cu centrul optic al literelor mari - de aici cei 1,7-2,3px cu care sigla stăteau mai jos decât numele. Celula devine un rând flex, deci toate cele trei se centrează pe aceeași axă, iar textul din celelalte coloane rămâne pe linia lui. `min-width:0` e obligatoriu: un element flex refuză implicit să se strângă sub conținut, iar fără el numele lung ar întinde coloana în loc să se taie. */ /* Banda cu siglele tuturor echipelor: separator vizual între topuri și tabelul mare, și scurtătură spre pagina fiecărei echipe. Cele 16 stau pe UN rând pe desktop, câte 8 pe două rânduri pe telefon - de aceea e o grilă cu 16 coloane egale, nu un flex: cu flex, echipele s-ar fi așezat inegal, după lățimea fiecărei steme. minmax(0,1fr) fiindcă un element de grilă refuză implicit să coboare sub conținut. */ .bandaech{ display:grid; grid-template-columns:repeat(16, minmax(0,1fr)); gap:6px; align-items:center; margin:16px 0; padding:14px 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .bech{ display:flex; align-items:center; justify-content:center; padding:4px 0; border-radius:9px; transition:background .12s, transform .12s; } .bech:hover{ background:var(--bg); transform:translateY(-2px); } /* Sigla își ia toată lățimea slotului, măsurată pe ÎNĂLȚIME ca peste tot; marginea din regula de bază n-are ce căuta aici, slotul o dă. */ .bandaech .tlogo{ height:34px; width:100%; max-width:44px; margin:0; } @media(max-width:820px){ .bandaech{ grid-template-columns:repeat(8, minmax(0,1fr)); gap:4px; padding:10px 6px; } .bandaech .tlogo{ height:26px; max-width:34px; } } @media(max-width:420px){ .bandaech .tlogo{ height:22px; } } .standings td.tm, .pstat td.pl, .pstat td.plc{ display:flex; align-items:center; min-width:0; } .standings td.tm > *, .pstat td.pl > *, .pstat td.plc > *{ flex:none; } /* Numele e singurul care are voie să se strângă: el se taie cu „…", nu sigla și nu pastila de poziție. */ .standings td.tm .stnm, .pstat td.pl .sn, .pstat td.pl > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .alltbl .rk{ text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; } .alltbl td.pl{ text-align:left; white-space:nowrap; } /* coloane cu lățime FIXĂ (nu mai sar la schimbarea tabului) - liga + meci. stânga (loc, nume, notă) rămâne pe loc; doar coloanele de statistici din dreapta se schimbă. width:max-content = tabelul = suma lățimilor fixe și derulează orizontal, fără să înghesuie coloanele când sunt multe (tabul „Toate"). */ .allplayers .alltbl, .allplayers .mtbl{ table-layout:fixed; width:max-content; min-width:0; } .allplayers .alltbl th, .allplayers .alltbl td, .allplayers .mtbl th, .allplayers .mtbl td{ width:50px; box-sizing:border-box; overflow:hidden; text-align:center; } .allplayers .alltbl th.rk, .allplayers .alltbl td.rk, .allplayers .mtbl th.rk, .allplayers .mtbl td.rk{ width:32px; } .allplayers .alltbl th.plh, .allplayers .alltbl td.pl, .allplayers .mtbl th.plh, .allplayers .mtbl td.plc{ width:172px; text-overflow:ellipsis; text-align:left; } /* loc + nume rămân lipite la stânga la scroll orizontal (ligă + meci), opace */ .allplayers .alltbl th.rk, .allplayers .alltbl td.rk, .allplayers .mtbl th.rk, .allplayers .mtbl td.rk{ position:sticky; left:0; z-index:3; background:var(--card); text-align:center; color:var(--muted); font-weight:400; cursor:default; font-variant-numeric:tabular-nums; } .allplayers .alltbl th.plh, .allplayers .alltbl td.pl, .allplayers .mtbl th.plh, .allplayers .mtbl td.plc{ position:sticky; left:32px; z-index:2; background:var(--card); } .allplayers .alltbl td.pl, .allplayers .mtbl td.plc{ cursor:pointer; } .allplayers .alltbl td.pl:hover, .allplayers .mtbl td.plc:hover{ text-decoration:underline; } .allplayers .mtbl td.plc .tlogo{ margin-right:6px; } /* linii verticale subțiri (1px) între TOATE coloanele */ .allplayers .alltbl th, .allplayers .alltbl td, .allplayers .mtbl th, .allplayers .mtbl td{ border-left:1px solid var(--line); } .allplayers .alltbl th.rk, .allplayers .alltbl td.rk, .allplayers .mtbl th.rk, .allplayers .mtbl td.rk{ border-left:none; } /* coloana de procent e a doua jumătate a unei perechi (6/24 | 25%), deci fără linie între ele: linia ar despărți tocmai ce trebuie citit împreună (cerut de utilizator pe 5 septembrie 2026). `.pc` e doar procentul; `.pv` îl poartă și fracția de șuturi, care e PRIMA jumătate a perechii. */ .allplayers .alltbl th.pct, .allplayers .alltbl td.pc, .allplayers .mtbl th.pct, .allplayers .mtbl td.pc{ border-left:none; padding-left:2px; } .allplayers .alltbl th.cardh, .allplayers .alltbl td.cardc, .allplayers .mtbl th.cardh, .allplayers .mtbl td.cardc{ width:26px; } /* galben / roșu = jumătate */ /* nota noastră: aceeași lățime ca restul, fără bold în aceste tabele */ .allplayers .alltbl td.notacol .grade.own, .allplayers .mtbl td.notacol .grade.own{ font-weight:600; font-size:inherit; } .pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; } .pgleft{ color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; } .pgnav{ display:flex; gap:3px; flex-wrap:wrap; } .pgn{ min-width:30px; height:30px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; } .pgn.on{ background:var(--accent); color:#fff; border-color:var(--accent); } .pgn:disabled{ opacity:.4; cursor:default; } .pgdots{ padding:0 3px; color:var(--muted); align-self:center; } .src{ display:none; } /* textele explicative de sub secțiuni, scoase (self-explanatory) */ /* nota ca text colorat, fără fundal (nota noastră = bold, mai mare) */ .grade{ font-variant-numeric:tabular-nums; font-weight:600; } .grade.own{ font-weight:800; font-size:14.5px; } .gc-violet{ color:var(--pviolet); } .gc-blue{ color:var(--p90); } .gc-green{ color:var(--p70); } .gc-bronze{ color:var(--p50); } .gc-orange{ color:var(--porto); } .gc-red{ color:var(--p0); } .gc-none{ color:var(--muted); } td.notacol{ text-align:center; } td.srcv{ color:var(--muted); font-size:12px; } /* sursele: discrete, mai înguste */ th[data-ak="so"], th[data-ak="fl"], th[data-ak="mo"], th[data-pk="so"], th[data-pk="fl"], th[data-pk="mo"]{ font-weight:600; opacity:.8; } .tlk{ cursor:pointer; } .topstack{ display:flex; flex-direction:column; gap:16px; } .tophead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; } .tophead h3{ margin:0; } /* widget compact „Meciurile etapei" - un rând pe meci: gazde stânga, scor centru, oaspeți dreapta */ .hg-when{ font-size:10px; color:var(--muted); text-align:left; white-space:nowrap; } /* ── meci în desfășurare ── Aici, în stilul principal, NU în ARB_CSS: acela se injectează doar pe paginile de arbitri, deci insigna și nota de pe pagina de meci și din programul etapei rămâneau nestilizate. */ .lvtag{ display:inline-flex; align-items:center; gap:5px; font-weight:800; color:#e0473e; letter-spacing:.02em; } .lvdot{ width:7px; height:7px; border-radius:50%; background:#e0473e; display:inline-block; animation:lvpuls 1.6s ease-in-out infinite; flex:none; } @keyframes lvpuls{ 0%,100%{opacity:1} 50%{opacity:.25} } .lvnote{ margin:10px auto 0; max-width:660px; font-size:12.5px; line-height:1.55; color:var(--muted); background:var(--chip); border:1px solid var(--line); border-radius:9px; padding:8px 12px; text-align:left; } .hglive .hg-when{ color:#e0473e; font-weight:800; display:inline-flex; align-items:center; gap:5px; } .hglive .hg-sc{ color:#e0473e; } /* coloana de scor live din clasament: verde conduce, roșu condusă, galben egal */ .lvc{ text-align:center; padding-left:2px; padding-right:2px; } /* Scorul live stă în coloana lui, imediat după bulinele de formă: șirul se citește cronologic, ultimele cinci rezultate și apoi ce se joacă acum. */ .lvsc{ font-weight:800; font-size:11.5px; font-variant-numeric:tabular-nums; cursor:help; } .lvw{ color:var(--p70); } .lvl{ color:var(--p0); } .lvd{ color:var(--p50); } /* pe telefon coloana live împingea cardul peste viewport (425 la 390px): se strâng celulele clasamentului doar când coloana chiar există */ @media(max-width:480px){ .standings th, .standings td{ padding-left:4px; padding-right:4px; } .lvsc{ font-size:10px; } /* Numele se taie, restul celulei NU se rupe pe două rânduri: scorul live stă acum lângă nume, iar „U. Craiova / 1-1" pe două rânduri ar înălța rândul. Tăierea s-a mutat de pe celulă pe nume tocmai ca „…" să nu mănânce scorul. */ .standings td, .standings th{ white-space:nowrap; } .standings .tm .stnm{ display:inline-block; max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; } } /* Tabel adevărat: chenar de jur împrejur, linie verticală între coloane, antet pe fundal mai închis. Coloana meciului se strânge la o lățime fixă - lăsată pe 1fr, ea lua tot spațiul și restul rândului se înghesuia. */ /* Derularea e la ORICE lățime, nu doar pe telefon: coloanele au lățimi fixe care însumează 1047px, iar `table-layout:fixed` face lățimea tabelului max(100%, suma coloanelor) - deci pe tabletă tabelul ieșea din card cu 70-326px, peste chenar. Raportat de utilizator pe 2 septembrie 2026. */ .hgames #hgbody{ overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(142,152,144,.6) transparent; } .hgtbl{ width:100%; border-collapse:collapse; border:1px solid var(--line); font-size:13px; table-layout:fixed; } /* Trei tabele ALĂTURATE, nu unul cu linii mai groase: între grupuri stă o coloană-spațiu goală, în culoarea cardului, cu câte o linie de fiecare parte - deci fiecare grup pare închis pe toate laturile. Cerut de utilizator pe 2 septembrie 2026, după prima variantă cu linie dublă. Grupurile: CÂND și CE meci | cine a arbitrat și cum a ieșit | camera VAR. */ .hgtbl .hg-gap{ width:12px; padding:0; background:var(--card); border-left:1px solid var(--line); border-right:1px solid var(--line); } /* Liniile ORIZONTALE nu trec prin spațiu, altfel cele trei grupuri par tot un tabel, doar cu o coloană goală. La borduri contopite, `hidden` bate orice altă valoare, deci taie și linia pusă pe rând, nu doar pe celulă. */ .hgtbl .hg-gap{ border-top-style:hidden; border-bottom-style:hidden; } .hgtbl thead th.hg-gap{ background:var(--card); } .hgtbl th, .hgtbl td{ border-left:1px solid var(--line); padding:7px 6px; } .hgtbl th:first-child, .hgtbl td:first-child{ border-left:none; } .hgtbl thead th{ background:var(--bg); border-bottom:1px solid var(--line); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:800; text-align:center; } .hgtbl thead th{ text-align:center; } .hgtbl tbody tr{ border-top:1px solid var(--line); } .hgtbl tbody tr:first-child{ border-top:none; } /* antetul de indice pe două rânduri: codul sus, semnul juriului dedesubt - aceeași scriere ca în tabelul arbitrilor */ .hgtbl .th2r{ display:inline-flex; flex-direction:column; align-items:center; gap:0; } .hgtbl .th2r .thact{ display:block; line-height:0; margin-top:1px; } .hgtbl .th2r .thact svg{ width:12px; height:12px; display:block; } .hgtbl .th2r .thact.kvar{ color:var(--var-ink); } .hgtbl thead th .sic{ width:13px; height:14px; vertical-align:middle; } /* Toate coloanele au lățime scrisă, deci `table-layout:fixed` le scalează proporțional până umple cardul. Lăsată pe `auto`, coloana meciului lua tot spațiul rămas (575px din 1060) și restul rândului se înghesuia. */ /* aer la marginea din stânga, cât are și cea din dreapta */ .hg-when{ width:80px; text-align:right; padding-left:10px; padding-right:12px; } /* 328px, nu 340: la `table-layout:fixed` tabelul NU se strânge sub suma lățimilor scrise, se lățește la ea - deci cele 1.028px ale coloanelor depășeau cu 7 lățimea cardului (1.022 la lățime maximă, 1.019 pe un ecran de 1.100) și cutia derula orizontal. Semnalat de utilizator pe 9 septembrie 2026. Cu 328 suma iese 1.016 + 1px chenar, deci încape peste tot până la pragul de telefon; numele unei echipe primește tot 142px, dublu față de cei 72 ceruți de „Csíkszereda". */ .hg-m{ width:328px; } /* Numele centralului e prenume + nume, fără al doilea prenume (`numeLista`), deci coloana n-are nevoie de 200px: „Horia Mladinovici", cel mai lung din sezon, cere 118. */ .hg-ref{ width:162px; } .hg-cd{ width:42px; text-align:center; font-variant-numeric:tabular-nums; padding-left:3px; padding-right:3px; } .hg-fz{ width:44px; text-align:center; font-variant-numeric:tabular-nums; } .hg-imp{ width:84px; text-align:center; } .hg-var{ width:54px; text-align:center; } /* linia de la capătul grupului al treilea: chenarul tabelului cade dincolo de marginea vizibilă a derulării, deci se desenează pe chiar celulă */ .hg-vr{ width:156px; border-right:1px solid var(--line); } /* Cei 3px de aer la stânga numelor din „Arbitru" și „Arbitru VAR", ceruți de utilizator pe 9 septembrie 2026 - numele stăteau lipite de linia coloanei. Se scriu pe `.hgtbl td`, nu pe clasă: regula comună `.hgtbl th, .hgtbl td` are specificitate mai mare, deci un `padding-left` pus doar pe `.hg-ref` n-a făcut niciodată nimic (cel scris acolo era de 15px, iar în pagină se vedeau 6). Antetele rămân centrate, deci nu primesc aerul. */ .hgtbl td.hg-ref, .hgtbl td.hg-vr{ padding-left:9px; } /* Antetul „Faze discutate" se rupe pe două rânduri, ca să nu ceară o coloană de 100px pentru o cifră de o cifră. */ .hgtbl thead th.hg-fz{ white-space:normal; line-height:1.15; } .hgrow{ cursor:pointer; } .hgrow.upcoming{ cursor:default; opacity:.85; } /* meciul neînceput căruia i se știe brigada rămâne apăsabil și la culoare: are unde duce, deci n-are de ce să pară stins */ .hgrow.upcoming.hgprog{ cursor:pointer; opacity:1; } .hgrow:hover{ background:var(--bg); } .hg-m{ white-space:nowrap; } .hg-m .hg-t{ display:inline-flex; align-items:center; gap:7px; min-width:0; width:calc(50% - 30px); vertical-align:middle; } .hg-m .hg-t .tlogo{ margin:0; height:20px; width:24px; } .hg-h{ justify-content:flex-end; } .hg-a{ justify-content:flex-start; } .hg-nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hg-h .hg-nm{ text-align:right; } .hg-sc{ display:inline-block; width:52px; text-align:center; vertical-align:middle; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; padding:2px 4px; border-radius:7px; border:1px solid var(--line); } /* Numele arbitrului duce la fișa lui, nu la meci: oprește propagarea. */ .hgrn{ display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:100%; font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* verdele de accent era al linkului spre FIȘA arbitrului; celula duce acum la arbitrajul meciului, deci rămâne doar sublinierea, pusă de `.hgarb` */ .hgrn .jurin{ flex:none; } .hgc{ font-variant-numeric:tabular-nums; } /* Arbitrul din camera VAR: aceeași scriere ca centralul, dar fără fluier - semnul e al celui care conduce meciul, iar camera are monitorul în antet. */ .hgvr{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%; } .hgvrc{ color:var(--var-ink); } /* cine n-are fișă rămâne text, dar în aceeași familie de culoare, mai stinsă: altfel un singur nume negru între opt albastre pare o greșeală */ .hgvr:not(.hgvrc):not(.mut){ color:var(--var-soft); } /* apăsabilă e CELULA, nu numele: click pe coloana arbitrului sau a arbitrului VAR deschide arbitrajul meciului */ .hgtbl td.hgarb{ cursor:pointer; } .hgtbl td.hgarb:hover .hgvr, .hgtbl td.hgarb:hover .hgrn{ text-decoration:underline; } .hgc0{ opacity:.4; } /* categoria cu zero: estompată, ca să se vadă că lipsește */ /* Cifrele de judecată: număr de faze, indicele presei, opririle camerei. Fiecare duce la pagina de arbitraj a meciului. */ .hgv{ cursor:pointer; font-variant-numeric:tabular-nums; font-weight:700; } .hgv.mut{ color:var(--muted); font-weight:400; } .hgv.hgvb{ font-weight:800; } .hgv.hgvv{ color:var(--var-ink); font-weight:800; } .hgv:hover{ text-decoration:underline; } .hg-empty{ color:var(--muted); font-size:13px; margin:6px 0; } .hgfaza td{ font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:800; padding:9px 6px 3px; background:var(--bg); } /* Pe telefon tabelul derulează pe orizontală, cu data și meciul lipite - aceeași soluție ca la clasament: opt coloane în 340px ar cere ori nume tăiate la două litere, ori un rând rupt care nu mai e tabel. */ @media(max-width:760px){ .hgtbl{ min-width:0; } .hgtbl .hg-when, .hgtbl .hg-m{ position:sticky; background:var(--card); z-index:2; } .hgtbl .hg-when{ left:0; } .hgtbl .hg-m{ left:52px; box-shadow:1px 0 0 var(--line); } .hgtbl thead .hg-when, .hgtbl thead .hg-m{ background:var(--bg); z-index:3; } /* Lățimile se rescriu, nu se lasă pe cele de desktop: acelea însumează ~950px, adică aproape trei ecrane de tras cu degetul. */ .hgtbl .hg-when{ width:52px; } .hgtbl .hg-m{ width:224px; } .hgtbl .hg-ref{ width:112px; } .hgtbl .hg-cd{ width:30px; } .hgtbl .hg-fz{ width:46px; } .hgtbl .hg-imp{ width:54px; } .hgtbl .hg-var{ width:42px; } .hgtbl .hg-vr{ width:110px; padding-right:6px; } .hgtbl .hg-gap{ width:8px; } .hgtbl .hg-when{ padding-left:6px; } .hgtbl th, .hgtbl td{ padding-left:4px; padding-right:4px; } /* 86px pentru fiecare nume: „Csíkszereda", cel mai lung din ligă, cere 72. Sub atât, jumătate din echipe ies „Vol…" și tabelul nu mai spune cine joacă. */ .hgtbl .hg-m .hg-t{ width:calc(50% - 22px); } .hgtbl .hg-sc{ width:42px; } } /* rândurile din „Cei mai buni jucători" se aliniază la înălțimea celor din „Echipe de top" (33px), ca cele două carduri să respire la fel */ #bpbody th, #bpbody td, #ttbody th, #ttbody td{ padding-top:6.5px; padding-bottom:6.5px; } /* Coloana de loc din „Cei mai buni jucători" se strânge cât cea din „Echipe de top" (16px + 6 spațiu), ca siglele celor două carduri să cadă pe aceeași verticală: stăteau cu 17px mai la dreapta, deși cardurile pornesc din același x. Cerut de utilizator pe 31 august 2026. */ /* 20px + 4 de padding la celula următoare = tot 24, adică exact cât are „Echipe de top" (2 + 16 + 6). Lățimea nu poate coborî sub 20: la 17px se tăia „10" al zecelea rând („1.."). */ #bpbody th.rk, #bpbody td.rk, #ttbody th.rk, #ttbody td.rk{ width:20px; padding-left:0; padding-right:0; } #bpbody td.pl, #bpbody th.plh, #ttbody td.pl, #ttbody th.plh{ padding-left:4px; } #bpbody th.plh{ padding-left:calc(4px + var(--sigpoz)); } /* La echipe nu există pastilă de poziție, deci antetul se aliniază doar peste siglă. */ #ttbody th.plh{ padding-left:calc(4px + var(--sig)); } /* Cele două selectoare de deasupra au aceeași lățime, cea mai mare dintre ele: lățimea unui `select` o dă opțiunea cea mai lungă, iar „Deposedări" din al doilea îl făcea vizibil mai lat decât „Notă medie" din primul. */ #ttdd, #bpdd{ min-width:186px; } .statlist{ display:flex; flex-direction:column; } .statlist .statrow{ padding:7px 2px; } /* topuri de statistici / echipe */ .statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; } .statcard h4{ margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .statrow{ display:flex; align-items:center; gap:6px; padding:4px 0; cursor:pointer; font-size:13px; border-top:1px solid var(--line); } .statrow:first-of-type{ border-top:none; } .statrow .rk{ width:16px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:center; flex:none; } .statrow .sn{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .statrow b{ font-variant-numeric:tabular-nums; } .statrow:hover .sn{ color:var(--accent); } .toptbl td{ cursor:pointer; } .toptbl .rk{ text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; width:34px; } .toptbl th:nth-child(2), .toptbl .pl{ text-align:left; } .toptbl th:nth-child(3), .toptbl td:nth-child(3){ text-align:center; } /* cei mai buni jucători: coloane cu lățime fixă, cifre centrate (nu sar la schimbarea metricii) */ .bptbl{ table-layout:fixed; width:100%; } .bptbl th.mcol, .bptbl td.mcol{ width:58px; text-align:center; font-variant-numeric:tabular-nums; } .bptbl th.gcol, .bptbl td.gcol{ width:60px; text-align:center; } .bptbl td.pl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* echipa etapei: cardul de pe prima pagină și cel din pagina echipei */ .totwmeta{ font-size:12px; color:var(--muted); margin-bottom:10px; } .pertabs{ margin:0 0 10px; } #ts-det .pertabs{ margin-top:8px; } .formsel{ margin-bottom:12px; } /* Meniul principal: LINKURI de meniu, nu butoane. Pastilele cu chenar și fundal arătau a butoane de comandă, iar un meniu de site nu e o bară de comenzi. Pagina deschisă se vede prin două lucruri deodată - textul la intensitate maximă (`--ink`, restul stau pe `--muted`) și o bară groasă dedesubt, lipită de marginea de jos a barei -, ca să nu depindă de culoare singură. */ .mainnav{ display:flex; gap:2px; justify-content:center; align-items:stretch; margin-top:0; flex-wrap:wrap; } /* .postabs are width:fit-content, deci `justify-content` nu-l mișcă: bara se centrează cu margini automate, sub bara principală, care e și ea centrată. Submeniul e în ACELAȘI registru ca meniul de sus - text, nu pastile -, dar cu un pas mai jos în ierarhie: literă mai mică și bară mai subțire. Cu pastile albe sub un meniu plat, al doilea nivel părea mai apăsat decât primul. Se aplică doar la `.statsub`, nu la toate rândurile de taburi din site: acelea sunt filtre, nu navigație. */ .statsub{ justify-content:center; margin:10px auto 14px; background:none; padding:0; gap:4px; } .statsub .ptab{ background:none; box-shadow:none; border-radius:0; padding:4px 12px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; } .statsub .ptab:hover{ color:var(--ink); border-bottom-color:var(--line); } .statsub .ptab.active{ background:none; box-shadow:none; color:var(--ink); border-bottom-color:var(--navsel); } /* Semnul de pe intrarea „Lipsuri": câte carduri sunt încă nerezolvate. Stă în bara de sus, deci trebuie să nu miște înălțimea rândului - de aia are line-height fix și nu padding vertical. */ .lipsdot{ display:inline-block; min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:9px; background:var(--warn-ink); color:#fff; font-size:10px; font-weight:800; text-align:center; vertical-align:1px; margin-left:5px; } /* submeniul secțiunii: eticheta scurtă apare doar cât nu încape cea lungă */ .navscurt{ display:none; } @media(max-width:560px){ .navlung{ display:none; } .navscurt{ display:inline; } } /* `margin-bottom:-1px` trage bara peste linia de jos a meniului, ca să pară una singură, nu două dungi lipite. */ .mnav{ display:flex; align-items:center; padding:0 15px; font-weight:700; font-size:14px; text-decoration:none; color:var(--muted); background:none; border:none; border-radius:0; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; } .mnav:hover{ color:var(--ink); border-bottom-color:var(--line); } .mnav.on{ color:var(--ink); border-bottom-color:var(--navsel); } /* prima pagină: echipa etapei + top, pe două coloane */ .homecols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; } @media (max-width:900px){ .homecols{ grid-template-columns:1fr; } } .totwhome .formsel{ margin-bottom:8px; } .totwhome .xifield{ max-width:430px; } /* Terenul și lista celor 11. Terenul e UN element de grilă întins pe amândouă rândurile coloanei din dreapta, deci se aliniază sus cu taburile de formație și jos cu ultimul rând al listei - fără nicio măsurătoare scrisă de mână: îl întinde grila. */ .twwrap{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:'pitch tabs' 'pitch list'; column-gap:22px; align-items:stretch; } .twpitch{ grid-area:pitch; display:flex; min-width:0; } /* Taburile de formație se aliniază la STÂNGA coloanei: regula generală `.formsel` le pune pe centru cu margini automate. */ .twtabs{ grid-area:tabs; min-width:0; } .twtabs .formsel{ margin-left:0; margin-right:auto; justify-content:flex-start; } /* Eticheta jucătorului: sigla clubului în stânga numelui, pe același rând. Numele clubului nu se mai scrie - se citește din siglă. Sigla stă în AFARA pastilei întunecate, deci poate fi cu 50% mai mare: înăuntru, fundalul închis o strângea și o ascundea. */ .xilab{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; } .xilab .tlogo{ width:21px; height:18px; margin:0; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .xilab .xin{ margin-top:0; } .twlist{ grid-area:list; overflow-x:auto; min-width:0; } /* Terenul lat: se întinde pe toată înălțimea rândului, iar dungile gazonului merg pe verticală, ca la o transmisie. */ .totwhome .xifield.xiwide{ max-width:none; width:100%; height:100%; min-height:330px; aspect-ratio:auto; margin:0; background:repeating-linear-gradient(90deg,#2e7a3b 0 9%,#2a7136 9% 18%); } .xifield svg.lnh{ display:none; } .xiwide svg.lnv{ display:none; } .xiwide svg.lnh{ display:block; } .xiwide .xip{ left:var(--hx); top:var(--hy); } /* Tabel adevărat: chenar de jur împrejur, linii verticale între coloane și capul de tabel pe un fundal un pic mai închis. */ .twtbl{ width:100%; table-layout:fixed; border-collapse:collapse; border:1px solid var(--line); } .twtbl th, .twtbl td{ border-left:1px solid var(--line); } .twtbl th:first-child, .twtbl td:first-child{ border-left:none; } .twtbl thead th{ background:var(--bg); border-bottom:1px solid var(--line); } .twtbl th.twc, .twtbl td.twc{ width:52px; text-align:center; } .twtbl th.gcol, .twtbl td.gcol{ width:60px; text-align:center; } .twtbl td.pl{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .twtbl th.twc .sic{ width:15px; height:15px; vertical-align:middle; opacity:.7; } /* Semnele din celulă: o minge pentru fiecare gol, un semn pentru fiecare pasă decisivă. Celula fără niciunul rămâne GOALĂ - golul e la 38% din prezențe și pasa la 16%, deci un zero scris de nouă ori din zece ar fi zgomot. */ .twsem{ display:inline-flex; align-items:center; gap:2px; line-height:0; } .twsem .sic{ width:15px; height:15px; flex:none; vertical-align:0; } .twtbl td.twgol{ color:var(--ink); } .twtbl td.twas{ color:var(--muted); } @media(max-width:900px){ .twwrap{ grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:'tabs' 'pitch' 'list'; row-gap:12px; } .twpitch{ display:block; } /* Pe telefon terenul se întoarce pe verticală, cum am discutat: acolo lățimea e scumpă și înălțimea gratis. Se schimbă doar coordonatele aplicate, nu cele scrise - amândouă sunt pe element. */ .totwhome .xifield.xiwide{ max-width:430px; margin:0 auto; height:auto; min-height:0; aspect-ratio:0.68; background:repeating-linear-gradient(0deg,#2e7a3b 0 9%,#2a7136 9% 18%); } .xiwide svg.lnv{ display:block; } .xiwide svg.lnh{ display:none; } .xiwide .xip{ left:var(--vx); top:var(--vy); } } /* Pe telefon coloana numelui rămâne cu ~120px din 340: coloanele de semne se strâng, fiindcă ele n-au nevoie de lățimea de pe desktop. */ @media(max-width:480px){ .twtbl th.twc, .twtbl td.twc{ width:40px; padding-left:2px; padding-right:2px; } .twtbl th.gcol, .twtbl td.gcol{ width:46px; padding-left:2px; padding-right:2px; } .twtbl .rk{ width:26px; padding-left:0; padding-right:0; } } /* pagina Formule */ /* Titlurile paginilor de Arbitraj și de Statistici erau `h2` fără nicio regulă, deci luau mărimea implicită a browserului (~26px) - de aproape două ori cât titlul unui card din Fotbal. Cerut de utilizator pe 8 septembrie 2026: aceeași mărime peste tot, „se înțelege și cu font mai mic". Secțiunile coboară odată cu titlul, altfel ar fi ieșit mai mari decât pagina care le poartă. */ .fdoc h2{ margin:4px 0 2px; font-size:14.5px; } .fdoc h3{ margin:22px 0 8px; font-size:14.5px; } .fdoc h4{ margin:14px 0 6px; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } .fdoc p, .fdoc li{ font-size:13.5px; line-height:1.55; } .fdoc code, .fdoc pre{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; background:var(--bg); border-radius:8px; } .fdoc pre{ padding:10px 13px; overflow-x:auto; border:1px solid var(--line); } .fdoc code{ padding:1px 5px; } .fdoc table{ border-collapse:collapse; margin:8px 0 14px; font-size:12.5px; width:100%; max-width:640px; } /* paginile de metodologie pe toată lățimea (ca .arbform, dar disponibil global, ARB_CSS se injectează doar pe paginile de arbitri). Rândul mai lung primește și aer între rânduri, altfel devine obositor. */ .fdoc.fullw p, .fdoc.fullw li{ max-width:none; line-height:1.65; } .fdoc.fullw table, .fdoc.fullw pre{ max-width:none; } .fdoc th, .fdoc td{ border:1px solid var(--line); padding:5px 9px; text-align:left; } .fdoc th{ background:var(--bg); } .fdoc .note{ color:var(--muted); font-size:12.5px; } /* ── paginile legale: Despre, Termeni, Confidențialitate, Cookies ────────── Text lung de citit, nu tabele de cifre, deci rândul primește aer. Lățimea era tăiată la ~72 de caractere, adică puțin peste jumătate de card (573px din 1060), iar utilizatorul a cerut pe 12 septembrie 2026 să curgă dintr-o margine în alta. Compensarea e aerul dintre rânduri, urcat la 1.68: la rând lung, el e cel care ține ochiul pe linie. Regula .fdoc p de mai sus dă mărimea; aici doar ritmul. */ .legal p, .legal li{ max-width:none; line-height:1.68; } .legal ul{ padding-left:20px; margin:6px 0 12px; } .legal li{ margin:3px 0; } .legal h3{ margin:26px 0 6px; } .legal h4{ margin:16px 0 4px; } .legal table{ max-width:none; } .legalact{ margin:2px 0 20px; } .legal a{ color:var(--navsel); } /* Numele sau adresa necompletate se VĂD, nu trec tăcut. Paznicul le raportează în Lipsuri, dar cine deschide pagina trebuie să le vadă întâi: un placeholder discret e exact felul în care ajunge un site live cu politica de confidențialitate necompletată. */ .legalgol{ background:color-mix(in srgb, var(--warn-ink) 14%, transparent); color:var(--warn-ink); border:1px dashed var(--warn-ink); border-radius:6px; padding:0 5px; font-size:12px; font-weight:700; white-space:nowrap; } /* Rândul de la coada fiecărei pagini legale, spre celelalte trei: cine caută politica de cookies o caută de regulă din cea de confidențialitate. */ .legalnav{ margin-top:32px; padding-top:14px; border-top:1px solid var(--line2); display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; } /* ── subsolul site-ului ──────────────────────────────────────────────────── Site-ul n-a avut niciodată subsol; a apărut odată cu paginile legale. Lățimea e a lui .wrap (1060px), ca linia de sus să cadă exact sub conținut, iar culoarea e cea ștearsă: subsolul e o hartă, nu conținut. */ #subsol{ max-width:1060px; margin:40px auto 0; padding-top:15px; border-top:1px solid var(--line2); font-size:12px; color:var(--muted); } #subsol .sublinii{ display:flex; flex-wrap:wrap; gap:7px 18px; margin-bottom:10px; } /* Linkurile subsolului poartă culoarea TEXTULUI, nu pe cea ștearsă: pe --muted abia se vedeau (cerut de utilizator pe 12 septembrie 2026), iar ierarhia rămâne, fiindcă paragraful de dedesubt e cel care stă în gri. */ #subsol a{ color:var(--ink); text-decoration:none; } #subsol a:hover{ text-decoration:underline; } /* Fără max-width: rândul curge dintr-o margine în alta, ca textul paginilor legale. Greutatea e scrisă explicit - e text mărunt, nu un titlu. */ #subsol p{ margin:4px 0; max-width:none; line-height:1.5; font-weight:400; } @media(max-width:700px){ #subsol{ margin-top:28px; } } /* ── bannerul de consimțământ pentru analiza traficului ──────────────────── Apare până la prima alegere și NU e un zid: tot site-ul se citește în spatele lui, iar refuzul nu închide nimic. Cele două butoane au ACEEAȘI mărime, aceeași formă și același contrast - „Refuz" la fel de la îndemână ca „Accept" e cerința ghidului EDPB, iar un „Accept" colorat lângă un „Refuz" scris mic e exact tiparul pentru care autoritățile europene au dat amenzi. Pe telefon stă DEASUPRA barei de jos, ca meniul să rămână folosibil cât timp bannerul e pe ecran. */ #cbanner{ position:fixed; left:0; right:0; bottom:0; z-index:99; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px rgba(0,0,0,.5); } .cbin{ max-width:1060px; margin:0 auto; padding:13px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; } .cbtxt{ flex:1 1 320px; min-width:0; margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); } .cbtxt b{ color:var(--ink); } .cbtxt a{ color:var(--navsel); } .cbbtns{ display:flex; gap:8px; flex:0 0 auto; } /* flex-baza ZERO, nu auto: cu auto, butoanele se măsoară după text și „Accept" iese cu 9px mai lat decât „Refuz" pe telefon. Egalitatea celor două e chiar cerința, deci nu poate atârna de lungimea cuvântului. */ .cbbtns button{ flex:1 1 0; min-width:110px; padding:9px 16px; cursor:pointer; border:1px solid var(--line); border-radius:8px; background:var(--chip); color:var(--ink); font:700 12.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } .cbbtns button:hover{ border-color:var(--navsel); color:var(--navsel); } @media(max-width:700px){ #cbanner{ bottom:calc(60px + env(safe-area-inset-bottom,0px)); } .cbin{ padding:11px 12px; gap:9px 12px; } .cbbtns{ width:100%; } } .formsel{ justify-content:center; margin-left:auto; margin-right:auto; } .formsel .ptab{ display:inline-flex; flex-direction:column; align-items:center; line-height:1.12; gap:0; padding:4px 14px; } .formsel .ptab small{ font-size:10px; font-weight:700; opacity:.7; font-variant-numeric:tabular-nums; } .formsel .ptab small .fstar{ color:#f0b429; opacity:1; font-style:normal; } .xifield{ position:relative; width:100%; max-width:460px; margin:0 auto; aspect-ratio:0.68; border-radius:14px; overflow:visible; background:repeating-linear-gradient(0deg,#2e7a3b 0 9%,#2a7136 9% 18%); } .xifield svg.lines{ position:absolute; inset:0; width:100%; height:100%; } .xip{ position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; width:82px; text-align:center; cursor:default; } .xij{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; border:2px solid #fff; color:#fff; box-shadow:0 0 0 2.5px var(--tc,#333), 0 3px 8px rgba(0,0,0,.4); } .xip.cons .xij{ box-shadow:0 0 0 2.5px #ffd54a, 0 0 0 5px rgba(255,213,74,.4), 0 3px 8px rgba(0,0,0,.45); } .xin{ font-size:10.5px; font-weight:700; color:#fff; background:var(--plate); padding:1px 6px; border-radius:5px; margin-top:1px; white-space:nowrap; max-width:92px; overflow:hidden; text-overflow:ellipsis; } .xic{ font-size:9px; color:#ffe9a8; text-shadow:0 1px 2px rgba(0,0,0,.6); } .xicard{ position:absolute; top:-3px; left:50px; z-index:6; line-height:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .xicard .sic{ width:15px; height:15px; } .xitip{ display:none; position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); z-index:30; background:rgba(8,18,10,.94); padding:6px 7px; border-radius:10px; box-shadow:0 5px 16px rgba(0,0,0,.5); } .xitip .pills{ justify-content:center; } .xitip .pillavg{ display:block; margin:3px auto 0; text-align:center; } .xip:hover, .xip:focus-within{ z-index:60; } .xip:hover .xitip, .xip:focus-within .xitip{ display:block; } /* Toggle temă (întuneric / lumină). Stă ÎN bară, nu mai plutește `fixed` în colț: acolo cădea peste selectorul de sezon și cerea 46px rezervați pe dreapta, adică exact lățimea care lipsea ca paginile să încapă pe un rând pe telefon. */ .themetgl{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.18); font-family:inherit; padding:0; } .themetgl:hover{ border-color:var(--accent); } /* ── pagina jucătorului (#jucator/Nume): DOSARUL ── Coloana stângă e lipită la derulare și ține fișa (nota, numele, clubul, profilul, sezonul, forma); dreapta ține taburile și cifrele. Sub 900px coloanele se stivuiesc și lipirea se anulează. */ .jpdosar{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:14px; align-items:start; } /* Coloana nu derulează în interior: se întinde cât are nevoie (cerut pe 2 septembrie 2026). Rămâne lipită doar dacă încape în fereastră - `jpLipire` îi pune `.jplung` când e mai înaltă, altfel partea de jos ar fi de neatins cât timp dreapta e mai lungă. */ .jpl{ position:sticky; top:calc(var(--navh,49px) + 10px); display:flex; flex-direction:column; gap:8px; } .jpl.jplung{ position:static; } .jpr{ min-width:0; --rc:var(--hs); } /* barele benzii: albastrul liniei din grafic */ /* Rândul de deasupra chenarelor: întoarcerea la stânga, „Compară" la dreapta. Marginile rândului sunt cele ale butonului de întoarcere de dinainte, ca fișa să înceapă de la aceeași înălțime ca pe orice pagină. */ .jpbkrow{ display:flex; align-items:center; gap:10px; margin:0 0 -15px; } .jpbkrow .jpback{ margin:0; } .cmpbtn{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; text-decoration:none; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:5px 11px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .cmpbtn:hover{ border-color:var(--navsel); color:var(--navsel); } .cmpbtn svg{ width:14px; height:14px; } /* Comparația: o coloană pe om, aceeași statistică pe același rând. Grila are o coloană de etichete și `--nc` coloane egale, deci trecerea de la doi la trei jucători nu cere altă foaie de stil. */ /* `--rc` e culoarea umpluturii barelor. Pe pagina jucătorului stă pe `.jpr`; aici trebuie pusă din nou, altfel barele se desenează TRANSPARENTE - un jeton care nu există nu dă nicio eroare, doar nu face nimic. */ /* Barele sunt VERZI de obicei și albastre la cel care câștigă rândul, ca verdele să nu însemne nimic în plus decât „așa arată o bară". `--rc` e jetonul umpluturii; pe pagina jucătorului stă pe `.jpr`, aici pe card - un jeton care nu există nu dă nicio eroare, doar nu face nimic. */ .cmpcard{ padding:14px 16px 12px; --rc:var(--as); } .cmpcel.cmpwin{ --rc:var(--hs); } .cmpcel.cmpwin .skp, .cmpcel.cmpwin.cmpnr{ color:var(--hs); font-weight:800; } /* Fiecare om are chenarul lui, pe fiecare secțiune. Chenarul e un element gol întins peste toate rândurile blocului, deci alinierea rămâne a grilei și dreptunghiul nu poate ieși din ea. */ /* `align-items:stretch`, nu `center`: cu centrare, o celulă mai scundă decât rândul se așază la mijlocul lui, iar linia ei de sus cădea mai jos decât a vecinei - liniile orizontale nu se mai continuau de la eticheta din mijloc spre margini. Acum fiecare celulă umple rândul, iar conținutul se centrează ÎN ea. */ .cmpbloc{ display:grid; grid-template-columns:170px repeat(var(--nc,2), minmax(0,1fr)); gap:0 14px; align-items:stretch; } .cmpbloc .cmpcel, .cmpbloc .cmplab{ display:flex; flex-direction:column; justify-content:center; } /* `align-items:center` pe bloc strânge orice element la conținutul lui, iar chenarul e gol - deci rămânea de 2px. `align-self:stretch` îl întinde peste rândurile pe care le acoperă. */ .cmpbox{ border:1px solid var(--line); border-radius:10px; pointer-events:none; align-self:stretch; } .cmpbloc .cmplab{ grid-column:1; } .cmpbloc .cc1{ grid-column:2; } .cmpbloc .cc2{ grid-column:3; } .cmpbloc .cc3{ grid-column:4; } .cmpbloc .cb1{ grid-column:2; } .cmpbloc .cb2{ grid-column:3; } .cmpbloc .cb3{ grid-column:4; } .cmpbloc .cmpcel{ text-align:center; padding:7px 10px; } .cmpbloc .cmpcel.cmplin{ border-top:1px solid var(--line); } .cmpbloc .cmplab{ padding:7px 0; } .cmpaddwrap{ position:relative; margin-left:auto; } .cmpadd{ border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:5px 11px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .cmpadd:hover{ border-color:var(--navsel); color:var(--navsel); } .cmppanel.cmppsus{ left:auto; right:0; top:34px; width:290px; } /* Alegerea următorului jucător stă exact acolo unde va apărea numele lui. */ .cmpgoala .cmphd{ padding-top:10px; } .cmppick{ width:100%; border:1px dashed var(--line); background:none; color:var(--muted); border-radius:10px; padding:12px 10px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; } .cmppick:hover{ border-color:var(--navsel); color:var(--navsel); } .cmppanel{ position:absolute; z-index:20; left:0; right:0; top:52px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:7px; box-shadow:0 12px 30px rgba(0,0,0,.28); } .cmpq{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font:inherit; font-size:12.5px; padding:6px 8px; } .cmprows{ max-height:340px; overflow:auto; margin-top:6px; } .cmprow{ width:100%; display:flex; align-items:center; gap:7px; border:0; background:none; color:var(--ink); font:inherit; font-size:12.5px; text-align:left; padding:5px 6px; border-radius:7px; cursor:pointer; } .cmprow:hover{ background:var(--chip); } .cmprow .tlogo{ height:17px; width:auto; flex:none; } .cmprnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cmprow .pnrsm{ margin-left:auto; } .cmptop h3 i{ font-style:normal; font-weight:600; color:var(--muted); } .cmpgrid{ margin-top:10px; } .cmprand{ display:grid; grid-template-columns:170px repeat(var(--nc,2), minmax(0,1fr)); gap:0 14px; align-items:center; border-top:1px solid var(--line); } .cmprand.cmpcap{ border-top:0; align-items:stretch; } .cmplab{ font-size:12.5px; color:var(--muted); font-weight:600; padding:7px 0; overflow:hidden; text-overflow:ellipsis; } .cmpcel{ padding:6px 0; min-width:0; padding-right:6px; } .cmpcel.cmpnr{ font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .cmpcel.cmpgol{ color:var(--muted); } /* Titlul secțiunii stă CENTRAT peste coloanele jucătorilor, nu la stânga: el descrie tocmai ce se compară dedesubt. La doi oameni cade la mijlocul dintre coloane, la trei peste coloana din mijloc - aceeași regulă, fiindcă e centrat pe zona lor, nu pe pagină. */ .cmpsec{ display:grid; grid-template-columns:170px repeat(var(--nc,2), minmax(0,1fr)); gap:0 14px; margin:21px 0 7px; } .cmpsect{ grid-column:2/-1; text-align:center; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:800; } /* Identitatea e cea din pagina jucătorului: sigla la stânga, numele pe primul rând, echipa și numărul pe al doilea - tot grupul centrat în coloană, cu nota dedesubt. */ .cmphd{ position:relative; padding:2px 0 10px; text-align:center; } /* Numele se centrează pe COLOANĂ, ca nota de dedesubt: cutia de text ocupă tot rândul, iar sigla atârnă absolut în stânga, în paddingul lăsat pentru ea. Cu inline-flex era centrat GRUPUL (siglă + text), deci numele ieșea mereu deplasat spre dreapta față de nota de sub el. */ .cmphd .cmpwho{ display:block; position:relative; padding:0 44px; text-align:center; } .cmphd .jplogo{ position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; } .cmphd .jplogo img, .cmphd .jplogo .tlogo{ height:34px; width:auto; } .cmpnm{ display:block; font-size:16px; font-weight:800; color:var(--ink); text-decoration:none; } .cmpnm:hover{ text-decoration:underline; } .cmpsub{ display:block; font-size:12px; color:var(--muted); margin-top:1px; } .cmphd .jpnota{ width:auto; min-width:0; max-width:132px; margin:8px auto 0; } .cmpx{ position:absolute; top:0; right:0; border:0; background:none; cursor:pointer; color:var(--muted); font-size:13px; line-height:1; padding:2px 4px; } .cmpx:hover{ color:var(--ink); } .cmphd .cmpwho .jpwt{ display:block; text-align:center; } @media(max-width:760px){ .cmprand{ grid-template-columns:104px repeat(var(--nc,2), minmax(0,1fr)); gap:0 8px; } .cmpbloc{ grid-template-columns:104px repeat(var(--nc,2), minmax(0,1fr)); gap:0 8px; } .cmplab{ font-size:11px; } .cmpnm{ font-size:13.5px; } .cmpbloc .cmpcel{ padding:7px 4px; } .cmphd .jplogo img, .cmphd .jplogo .tlogo{ height:26px; } .cmphd .cmpwho{ padding:0; } .cmpsub{ font-size:10.5px; } /* ✕-ul stă DEASUPRA numelui pe telefon: centrat, numele ajunge până la marginea coloanei și îi intra sub el. */ .cmphd{ padding-top:18px; } .cmpx{ top:-2px; } .cmpcard{ padding:12px 10px 10px; } .cmpbloc .skv{ font-size:10.5px; } .cmpbloc .skp{ width:30px; font-size:12px; } .cmpbloc .skbar{ gap:5px; } /* Telefonul întoarce rândul pe dos: valorile pe margini și eticheta la mijloc, ca perechea să se citească dintr-o privire. Lățimile sunt 1:2:1 - eticheta are jumătate de ecran și se rupe pe două rânduri când nu încape, iar cifrele n-au nevoie de mai mult de un sfert. Fiecare secțiune arată a TABEL: chenar de jur împrejur și linii orizontale, fără linii verticale - chenarele pe om ar tăia rândul tocmai acolo unde ochiul îl citește dintr-o parte în alta. */ .cmp2 .cmpbloc{ grid-template-columns:minmax(0,1fr) 2fr minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:10px; } .cmp2 .cmpbox{ display:none; } .cmp2 .cmpbloc .cmplab{ grid-column:2; text-align:center; font-size:11px; color:var(--muted); padding:8px 6px; } .cmp2 .cmpbloc .cc1, .cmp2 .cmpbloc .cb1{ grid-column:1; } .cmp2 .cmpbloc .cc2, .cmp2 .cmpbloc .cb2{ grid-column:3; } .cmp2 .cmpbloc .cmplin{ border-top:1px solid var(--line); } .cmp2 .cmpsec{ grid-template-columns:minmax(0,1fr); } .cmp2 .cmpsect{ grid-column:1; } .cmp2 .cmprand.cmpcap{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .cmp2 .cmprand.cmpcap > .cmplab{ display:none; } /* Bara ia toată lățimea celulei, iar procentul coboară sub ea: alături, îi rămâneau ~50px din sfertul de ecran. */ .cmp2 .cmpbloc .skbar{ flex-direction:column; align-items:stretch; gap:3px; margin-top:4px; } /* pe coloană, `flex:1` al pistei îi dă ÎNĂLȚIMEA, nu lățimea, iar baza 0 o făcea de 0px - bara dispărea cu totul */ .cmp2 .cmpbloc .skb{ flex:none; height:5px; } .cmp2 .cmpbloc .skp{ width:auto; text-align:center; font-size:11.5px; } /* Blocul de sus are cifre lungi („2.0/4.0 · 50%"), deci acolo marginile primesc 35% fiecare și eticheta 30% - ruptă pe două-trei rânduri, dacă trebuie. Cu 1:2:1, cifra se rupea în patru rânduri și bara fiecăruia ajungea la altă înălțime, deci rândul nu se mai citea dintr-o parte în alta. Valoarea rămâne pe UN rând, ca barele să pornească de la aceeași linie la toți. */ .cmp2 .cmpband{ grid-template-columns:35% 30% 35%; } .cmp2 .cmpband .skv{ white-space:nowrap; font-size:11px; } .cmp2 .cmpband .cmpcel{ padding:8px 5px; } .cmp2 .cmpband .cmplab{ padding:8px 3px; } /* pe telefon se compară doi, deci butonul de adăugare n-are ce căuta */ .cmpaddwrap{ display:none; } /* Sigla urcă DEASUPRA numelui: alături de el, rândul „Rapid · nr. 29 · atacant" nu mai încăpea pe o linie. */ .cmp2 .cmphd .jplogo{ position:static; transform:none; justify-content:center; margin:0 auto 4px; } } /* Butonul de întoarcere stă DEASUPRA chenarului, nu în el (cerut de utilizator pe 3 septembrie 2026): cardul începe direct cu numele. Cele două margini sunt legate: `#app` are `gap:18px`, iar cardurile trebuie să înceapă de la aceeași înălțime ca pe orice altă pagină cu buton de întoarcere (pagina echipei), deci butonul coboară cu 15px și tot cu atât se strânge golul de sub el - rămân 3px până la chenar. */ .jpback{ display:block; margin:15px 0 -15px; } /* Nota stă în blocul SEZONULUI, nu deasupra numelui: ea descrie sezonul, ca pastilele de sub ea. Jumătate de lățime, lipită la STÂNGA - jumătatea din dreapta rămâne liberă pentru ce mai vine acolo - cu textul centrat înăuntru. */ /* Nota sezonului și de câte ori a prins echipa etapei, una lângă alta: două cifre de bilanț, deci același rând. Placa a doua e neutră - nu e o notă, deci n-are ce căuta pe scara de culori. */ .jpsezb{ display:flex; gap:8px; align-items:stretch; } .jpsezb > *{ flex:1 1 0; width:auto !important; min-width:0 !important; } /* Aceeași literă, aceeași așezare și aceleași margini ca placa notei: cele două stau una lângă alta, deci orice diferență de mărime sau de spațiere se citește ca o greșeală. Ce se schimbă e DOAR fundalul - nu e o notă, deci n-are ce căuta pe scara de culori. */ .jptotw{ background:var(--chip); color:var(--ink); text-align:center; border-radius:12px; padding:9px 8px; font-size:27px; font-weight:800; line-height:1; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; } .jptotw small{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; color:var(--muted); } .jptotw.gol{ color:var(--muted); } .jpnota{ align-self:flex-start; width:50%; min-width:104px; text-align:center; color:#fff; border-radius:12px; padding:9px 8px; font-size:27px; font-weight:800; line-height:1; display:flex; flex-direction:column; gap:4px; align-items:center; font-variant-numeric:tabular-nums; } .jpnota small{ font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.9; } .jpnota.b-none{ background:var(--chip); color:var(--muted); } /* Identitatea se citește ca în fereastra din meci: un semn mare la stânga, numele și rândul mic la dreapta lui. În fereastră semnul e nota, aici e SIGLA clubului - nota are deja placa ei deasupra. Postul a ieșit din rândul mic: se scrie oricum întreg în „Post", două rânduri mai jos. */ .jpwho{ display:flex; align-items:center; gap:12px; min-width:0; } .jplogo{ flex:none; line-height:0; } .jplogo .tlogo{ height:40px; width:auto; max-width:46px; } .jpwt{ min-width:0; } /* numele stă pe UN rând, ca în fereastră: coloana are 272px, iar sigla ia 56 din ei, deci la 21px „Filip Stojilkovic" se rupea în două */ .jpnume{ margin:0; font-size:18.5px; font-weight:400; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jpnume b{ font-weight:800; } .jpsub{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); } /* Eticheta se aliniază la DREAPTA, cu spațiu dublu până la valoare, iar valorile rămân aliniate la stânga: așa cele două coloane se citesc ca două șiruri, nu ca un text zimțat pe amândouă marginile. */ .jpfapte{ display:grid; grid-template-columns:auto 1fr; gap:3px 24px; margin:4px 0 0; font-size:12.5px; } .jpfapte dt{ color:var(--muted); text-align:right; } .jpfapte dd{ margin:0; font-weight:600; } .jpazi{ margin:2px 0 0; font-size:11px; color:var(--muted); } .jpsec{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800; margin-top:8px; padding-top:10px; border-top:1px solid var(--line); } .jpsec i{ font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; font-size:11px; } .jppils{ display:flex; flex-direction:column; gap:4px; } .jppil{ display:flex; justify-content:space-between; align-items:baseline; background:var(--chip); border-radius:8px; padding:5px 10px; font-size:13px; } .jppil b{ font-variant-numeric:tabular-nums; } .jppil i{ font-style:normal; color:var(--muted); font-size:12px; } .jppil .sic{ width:11px; height:11px; vertical-align:-1px; } /* forma: nota mare la stânga, trei rânduri la dreapta; chenarul spune rezultatul */ .jpforma{ display:flex; flex-direction:column; gap:6px; } /* Cardul e obișnuit, fără bară și fără subliniere: rezultatul se citește din CULOAREA SCORULUI - verde câștigat, galben egal, roșu pierdut. Cerut de utilizator pe 2 septembrie 2026: cifra pe care oricum o citești spune și cum s-a terminat, deci nu mai e nevoie de un al doilea semn. */ .jpft{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; column-gap:10px; align-items:center; padding:7px 9px; border:1px solid var(--line); border-radius:10px; color:inherit; text-decoration:none; } .jpft:hover{ background:var(--chip); } /* clasa de rezultat colorează DOAR scorul; cardul rămâne în culoarea paginii */ .jpft.jpv,.jpft.jpe,.jpft.jpi{ color:inherit; } .jpftm i.jpv{ color:var(--p70); } .jpftm i.jpe{ color:var(--p50); } .jpftm i.jpi{ color:var(--p0); } .jpftm i{ font-weight:800; } .jpftn{ grid-row:1/4; font-size:18px; color:#fff; border-radius:8px; padding:6px 7px; min-width:50px; text-align:center; font-variant-numeric:tabular-nums; } .jpftn.b-none{ background:var(--chip); color:var(--muted); } .jpfte{ grid-column:2; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .jpftm{ grid-column:2; display:flex; gap:5px; font-weight:600; font-size:12.5px; min-width:0; } .jpftm span{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jpftm i{ flex:none; font-style:normal; font-variant-numeric:tabular-nums; } .jpfts{ grid-column:2; font-size:11.5px; color:var(--muted); } .jpfts .sic{ width:12px; height:12px; vertical-align:-2px; } /* titlurile blocurilor din dreapta */ .jpbloc{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; } /* Pe pagina jucătorului banda de skill-uri stă într-un `jpbloc`, care are deja chenar: cu al ei pe deasupra ieșeau două, unul în altul. Chenarul rămâne al blocului, banda păstrează doar grila. */ .jpbloc > .pmband{ border:0; border-radius:0; padding:0; } .jpbloc + .jpbloc{ margin-top:16px; } /* Tabelul carierei: același aer sub titlu ca sub taburi, și un cap de tabel care se vede a cap de tabel - fundal, chenar și literă mică, ca antetele din restul site-ului. */ .carcat{ margin:12px 0; } .cartbl table{ border:1px solid var(--line); border-radius:10px; border-collapse:separate; border-spacing:0; overflow:hidden; } .cartbl thead th{ background:var(--chip); border-bottom:1px solid var(--line); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:800; white-space:nowrap; } .cartbl tbody tr + tr td{ border-top:1px solid var(--line); } .jpbloc .skcap{ margin-top:10px; } .jph3{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; flex-wrap:wrap; } .jph3 h3{ margin:0; font-size:14px; } .jph3 span{ font-size:12px; color:var(--muted); flex:1 1 auto; } .jph3 .fmoddd{ margin-left:auto; } .jpr .pmband{ grid-column:auto; } .jpsecs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } @media(max-width:899px){ .jpdosar{ grid-template-columns:minmax(0,1fr); } .jpl{ position:static; max-height:none; overflow:visible; } .jpforma{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); } .jpsecs{ grid-template-columns:minmax(0,1fr); } .jpsecs .pmcol{ display:contents; } .jppils{ display:grid; grid-template-columns:1fr 1fr; } .jpr .pmband{ grid-template-columns:minmax(0,1fr); } } .jpgh{ margin-top:4px; flex-wrap:wrap; } /* selectul de metrică se dimensionează după CEA MAI LUNGĂ opțiune, iar „Meci fără gol primit (clean sheet), portari și fundași" e mai lat decât un telefon întreg: fără plafon, tot cardul căpăta derulare orizontală */ .jpgh .posdd{ max-width:min(340px, calc(100vw - 60px)); } /* graficul se întinde pe toată lățimea cardului (cât tabelul de dedesubt) și derulează orizontal doar când nici așa nu încap etapele */ .jpgwrap{ overflow-x:auto; scrollbar-width:thin; } .jpgin{ position:relative; } /* tooltipul graficului: HTML, nu , ca să se vadă imediat și să încapă în el siglele, scorul final și cel de la pauză */ .jptip{ display:none; position:absolute; z-index:30; transform:translate(-50%,-100%); background:var(--plate); color:#fff; border-radius:10px; padding:8px 10px; font-size:12px; line-height:1.35; white-space:nowrap; pointer-events:none; box-shadow:0 8px 22px rgba(0,0,0,.4); } .jptip.jos{ transform:translate(-50%,0); } .jptip.on{ display:block; } .jptstat{ font-size:14px; font-weight:800; margin-bottom:4px; font-variant-numeric:tabular-nums; } /* pe fundal închis, culoarea notei devine ilizibilă: cifra rămâne albă, culoarea și-o spune oricum bulina din tabel */ .jptstat *{ color:#fff; } .jptstat i{ font-style:normal; font-weight:600; font-size:11px; opacity:.8; margin-left:4px; } .jptstat .sic{ width:12px; height:12px; vertical-align:-1px; } .jptm{ display:flex; align-items:center; gap:8px; } .jptm .tlogo{ height:15px; width:auto; max-width:21px; } .jptm b{ font-size:13.5px; font-variant-numeric:tabular-nums; } .jptt{ display:inline-flex; align-items:center; gap:4px; opacity:.85; } .jptt.mn{ opacity:1; font-weight:800; } .jptht{ margin-top:3px; font-size:11px; color:#cfd6ce; } .jphit{ fill:transparent; cursor:pointer; } .jpseg{ stroke:var(--hs); stroke-width:2; fill:none; } .jpdot{ fill:var(--hs); stroke:var(--card); stroke-width:1.2; cursor:pointer; } .jpdot:hover{ stroke:var(--ink); } .jpgrid{ stroke:var(--line); stroke-width:1; } .jpmed{ stroke:var(--muted); stroke-dasharray:4 4; opacity:.75; } .jpax{ fill:var(--muted); font-size:9.5px; } .jpgol{ font-size:13px; color:var(--muted); padding:12px 0; } .jpbloc .jpth{ margin-top:0; } /* taburile de categorie stau la un rând de aer sub filtre, nu lipite de ele */ .jpbloc #jpcattabs{ margin-top:14px; } /* tabelul meci cu meci are chenar de jur împrejur și linii verticale între coloane, ca celula să se găsească dintr-o privire (cerut pe 2 septembrie 2026) */ .jpr .pstat table{ border:1px solid var(--line); } .jpr .pstat th, .jpr .pstat td{ border-left:1px solid var(--line); } .jpr .pstat th:first-child, .jpr .pstat td:first-child{ border-left:0; } .jpr .pstat th.pct, .jpr .pstat td.pc{ border-left:0; padding-left:2px; } /* scorul stă pe centrul coloanei la TOATE rândurile; „(r)" al rezervei intrate e scos din flux, la dreapta scorului, ca să nu-l împingă din centru */ .jpscol{ position:relative; } /* în fereastră taburile se lipesc de marginea ei (top:-18px, cât padding-ul); în pagină se lipesc de marginea ecranului, altfel primul rând se taie */ .jpcard .mtabs2{ top:0; } /* Totalurile pe sezon și fișa de profil vin din fereastră, unde cardul are 540 px. Întinse pe toată lățimea paginii, eticheta și cifra ajung la un metru una de alta, deci se strâng: profilul într-o coloană îngustă, totalurile în două coloane, ca să umple totuși pagina. */ /* transferurile pe toată lățimea, cu suma pe UN rând și rândurile la aceeași înălțime (cerut pe 2 septembrie 2026); în fereastră rămâne așezarea strânsă */ .jpr .trrow{ grid-template-columns:96px 1fr auto; min-height:42px; padding:0 4px; font-size:13px; } .jpr .trf{ white-space:nowrap; } /* Coloanele care descriu MECIUL (etapa, adversarul, locul, scorul) au lățimi fixe: altfel, la trecerea de la un tab la altul - „Atac" are 13 coloane, „Portar" doar 8 - tabelul se re-măsura și partea din stânga sărea stânga-dreapta sub ochi. Acum rămâne pe loc, iar tabelul doar se termină mai devreme. */ .jptb th.jpeth, .jptb td.jpet{ width:64px; min-width:64px; text-align:right; } .jptb th.jpmh, .jptb td.plc{ width:150px; min-width:150px; } .jptb th.jplch, .jptb td.jplc{ width:74px; min-width:74px; } .jptb th.jpsch, .jptb td.jpscol{ width:78px; min-width:78px; } .jplc{ font-size:11px; color:var(--muted); white-space:nowrap; } .jpet{ white-space:nowrap; font-size:11.5px; color:var(--muted); } .jptb .on{ color:var(--accent); } .jpmeci{ cursor:pointer; } .jpadv{ font-weight:600; } .jploc{ font-size:10px; color:var(--muted); margin-left:5px; } /* Scorul are coloana lui, ca să cadă toate pe aceeași verticală: în coloana „Meci" se alinia după numele adversarului, deci scorurile stăteau împrăștiate. Lățimea fixă a cifrelor ține alinierea, iar „(r)" iese în afara ei - e o notă despre om, nu despre meci, și n-are de ce să miște scorul din loc. */ .jpsch{ text-align:left; } .jpscol{ white-space:nowrap; } .jpsc{ display:inline-block; min-width:38px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; } .jprez{ position:absolute; left:calc(50% + 24px); top:50%; transform:translateY(-50%); font-size:10px; color:var(--muted); } /* etapele fără el: rândul rămâne desenat, dar dat în spate */ .jpnep td{ color:var(--muted); opacity:.5; } /* Cariera: coloana campionatului și sezoanele venite de la Transfermarkt. Rândul adus de acolo NU se stinge ca unul lipsă - e la fel de real, doar are mai puține cifre; ce îl deosebește e că numele campionatului nu e „SuperLiga", iar restul coloanelor scriu „–". */ /* Competiția se citește ca text, deci stă la STÂNGA - antet și celule deopotrivă (cerut de utilizator pe 6 septembrie 2026). `.pstat td` centrează tot, deci selectorul are nevoie de `.cartbl` ca să câștige. */ .cartbl th.jpkh, .cartbl td.jpk{ text-align:left; } .jpk{ font-size:11px; color:var(--muted); max-width:215px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .carext td.jpk{ color:var(--ink); } /* ── Cupa României ──────────────────────────────────────────────────── */ .cupa .cupsez{ color:var(--muted); font-weight:500; } .cupnota{ margin:2px 0 16px; font-size:12px; color:var(--muted); max-width:70ch; } .cuprunda + .cuprunda{ margin-top:22px; } .cuprunda h4{ margin:0 0 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; font-weight:400; color:var(--muted); background:var(--titlebg); padding:7px 10px; border-radius:8px; } /* Fiecare grupă și fiecare rundă eliminatorie e o ZONĂ cu chenar (cerut pe 7 septembrie 2026), ca la statisticile meciului: titlul iese în paddingul cutiei, deci ține loc de cap de secțiune, iar chenarul se închide sub ultimul rând. Runda „Grupe" nu primește chenar propriu - are patru înăuntru, iar o cutie peste ele ar fi un chenar în chenar. */ .cupelim, .cupgrup{ border:1px solid var(--line); border-radius:12px; padding:0 12px 8px; } .cupelim h4, .cupgrup h5{ margin:0 -12px 2px; padding:7px 12px; border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; background:var(--titlebg); } .cupgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px; } @media (max-width:820px){ .cupgrid{ grid-template-columns:minmax(0,1fr); } } /* Tabloul: finala și semifinalele într-o coloană, sferturile în cealaltă (cerut pe 7 septembrie 2026). Sunt 1, 2 și 4 meciuri, deci înșirate pe verticală lăsau jumătate de ecran gol. Coloana sferturilor e puțin mai lată (9:11), iar aerul dintre finală și semifinale e mic (10px), ca partea de jos a semifinalelor să cadă pe linia de jos a sferturilor (a doua cerere, aceeași zi): ultima rundă a fiecărei coloane se ÎNTINDE până la baza rândului (`flex:1`), deci cele două coloane se termină pe aceeași linie prin construcție, oricâte meciuri ar avea semifinalele. */ .cupbr{ display:grid; grid-template-columns:minmax(0,9fr) minmax(0,11fr); gap:16px 22px; align-items:stretch; } .cupbrc{ display:flex; flex-direction:column; gap:10px; } .cupbrc > .cuprunda:last-child{ flex:1; } /* Distanța dintre runde o dă `gap`-ul coloanei, nu regula de adiacență: amândouă ar face 44px. */ .cupbrc .cuprunda + .cuprunda{ margin-top:0; } .cupbr + .cuprunda{ margin-top:22px; } @media (max-width:820px){ .cupbr{ grid-template-columns:minmax(0,1fr); gap:22px; } } /* Grupa are două chenare înăuntru: clasamentul și meciurile. Antetul tabelului e NEGRU pe amândouă temele - culoarea spune „aici e un clasament", iar `--titlebg` e prea aproape de fundalul cutiei ca s-o spună. Culorile sunt fixe dinadins: un jeton de temă ar face antetul alb pe fond deschis, adică invizibil. */ .cupgbox{ border:1px solid var(--line); border-radius:10px; margin-top:10px; padding:0 9px 4px; overflow:hidden; } .cupgbox .cuptbl{ margin:0 -9px; width:calc(100% + 18px); } .cupgbox .cuptbl thead th{ background:#14171c; color:#eef1f5; padding:8px 5px; } .cupgbox .cuptbl tbody td{ padding:6px 5px; } .cupgbox .cuptbl thead th.cupth{ padding-left:9px; } .cupgbox .cuptbl tbody tr:first-child td{ border-top:none; } .cupgbox .cuptbl tbody td:first-child{ padding-left:9px; } .cupgms{ padding:0 9px 6px; } .cupgrup h5{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } /* Runda „Grupe" nu poartă banda aurie: ea s-ar repeta imediat dedesubt, la fiecare grupă. Rămâne doar cuvântul, centrat. */ .cupgr > h4{ background:none; border:0; text-align:center; padding:0; margin-bottom:10px; letter-spacing:.16em; font-size:12px; } /* Antetul tabului: titlul la stânga, ca la Arbitri, cu mărimea titlurilor de card („Meciurile etapei") și cu aer dedesubt. */ .cuphead{ margin:4px 0 12px; } .cuphead h3{ font-size:14.5px; } .cupgrup .cuptbl{ margin-top:8px; } .cuptbl{ width:100%; border-collapse:collapse; font-size:12px; margin-bottom:8px; font-variant-numeric:tabular-nums; } .cuptbl th, .cuptbl td{ padding:4px 5px; text-align:center; border-top:1px solid var(--line); } .cuptbl thead th{ border-top:none; color:var(--muted); font-weight:400; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; } .cuptbl .cupth{ text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; } .cuptbl .cupth .tlogo{ height:14px; width:16px; vertical-align:-3px; margin-right:5px; } /* Rândul de meci: data la stânga, gazdele lipite de scor, oaspeții după el - aceeași citire ca peste tot în site. Coloanele sunt FIXE, deci scorurile cad pe aceeași verticală la toate rundele. */ .cuprow{ display:grid; grid-template-columns:50px minmax(0,1fr) 44px minmax(0,1fr); align-items:center; gap:5px; padding:6px 0; font-size:13px; border-top:1px solid var(--line); } .cupms > .cuprow:first-child{ border-top:none; } .cupd{ font-size:11px; color:var(--muted); white-space:nowrap; } .cupt{ display:flex; align-items:center; gap:5px; min-width:0; text-decoration:none; } .cupt.h{ justify-content:flex-end; } /* Lățime FIXĂ, ca la `.rteam`: cu `width:auto`, cutia siglei era cât desenul (11-21px, după club), deci numele de lângă ea se opreau la verticale diferite de la un rând la altul, iar siglele nu cădeau pe o linie. Cu lățimea fixă și `object-fit:contain` din `.tlogo`, desenul se centrează în cutia lui, iar numele se aliniază - la dreapta pe stânga scorului, la stânga pe dreapta lui. Cerut de utilizator pe 8 septembrie 2026. */ .cupt .tlogo{ height:18px; width:22px; flex:none; } .cupnm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } a.cupt:hover .cupnm{ text-decoration:underline; } .cupfl{ width:22px; flex:none; } .cupsc{ text-align:center; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; } .cupsc i{ display:block; font-style:normal; font-size:9.5px; font-weight:400; color:var(--muted); } .cupd i{ font-style:normal; } .cuprowl{ cursor:pointer; } .cuprowl:hover{ background:var(--titlebg); } /* pagina unui meci de cupă */ .cupmhd{ text-align:center; margin-bottom:18px; } .cupmmeta{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } .cupmsc{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; margin:8px 0 4px; font-size:17px; } .cupmsc .cupsc{ font-size:24px; } .cupmsc .cupt .tlogo{ height:30px; width:40px; } .cupmsub{ font-size:12px; color:var(--muted); margin-top:6px; } /* Fantoma scorului trebuie să aibă mărimea scorului DE AICI (24px), nu pe cea din pagina meciului de campionat - altfel prima minge nu cade sub cifră. Vezi `.gnaxis`. */ .cupmhd .gnaxis{ font-size:24px; } .cupmhd .goal-note{ margin-top:4px; } .cupmeta{ justify-content:flex-start; margin-top:10px; } /* Filtrele stau ÎN cutia „Meci", sub titlu: pagina de cupă are o singură filă, deci n-au unde altundeva. */ .evfilcup{ display:flex; flex-wrap:wrap; gap:4px 14px; margin:0 0 8px; font-size:12px; color:var(--muted); } .evfilcup label{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .cupmgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; } .cupmbox{ border:1px solid var(--line); border-radius:12px; padding:0 12px 10px; } .cupmbox h4{ margin:0 -12px 10px; padding:7px 12px; font-size:11.5px; font-weight:400; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); background:var(--titlebg); border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; } /* Formațiile: două coloane, numărul de tricou pe o lățime FIXĂ, ca numele să pornească toate de pe aceeași verticală (o cifră contra două altfel le decalează). */ .culgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 14px; } /* Trei coloane FIXE la margini: postul în față, numărul la coadă (cerut de utilizator pe 7 septembrie 2026), numele între ele. Cu flex, un „mijlocaș" lângă un „portar" decala numele de la un rând la altul. */ .culrow{ display:grid; grid-template-columns:15px minmax(0,1fr) 20px; gap:7px; align-items:baseline; font-size:12.5px; padding:2px 0; } .culnr{ text-align:right; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; } .culp{ white-space:nowrap; } .culp .posb{ margin-right:0; } .culnm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .culnm a{ color:inherit; text-decoration:none; } .culnm a:hover{ text-decoration:underline; } .culhd{ display:flex; align-items:center; gap:7px; margin-bottom:8px; padding-bottom:5px; font-size:13px; } .culhd .tlogo{ height:20px; width:auto; } .culhd b{ border-bottom:2px solid var(--hs); padding-bottom:3px; font-weight:600; } .culhd.a b{ border-bottom-color:var(--as); } .cupmbox .evwrap{ scrollbar-width:thin; } .culsep{ margin:8px 0 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); border-top:1px solid var(--line); padding-top:6px; } @media (max-width:820px){ .cupmgrid{ grid-template-columns:minmax(0,1fr); } } @media (max-width:560px){ /* Rândurile au aceeași înălțime (min-height), iar coloana echipei are ~100px la 390px de lățime: „Hermannstadt" cere 86 la 12px, plus sigla - de aceea litera coboară la 11.5px și sigla la 14px. */ .cuprow{ grid-template-columns:30px minmax(0,1fr) 40px minmax(0,1fr); gap:4px; min-height:44px; box-sizing:border-box; } .cupd{ font-size:10px; } .cuprow{ font-size:11.5px; padding:7px 2px; } .cupd i{ display:none; } .cupt{ gap:5px; } .cupt .tlogo{ height:14px; width:16px; } .cupfl{ width:16px; } /* numele se RUPE, nu se taie: „Politehnica Timișoara" tăiat la „Politehnic…" nu mai spune care Politehnica; `overflow-wrap:anywhere` intervine DOAR când un singur cuvânt nu încape, ca să nu iasă din card */ .cupnm{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25; overflow-wrap:anywhere; } .cuptbl .cupth{ max-width:130px; } /* Sub 560px coloana formației are ~165px: „mijlocaș" ar mânca jumătate din ea, deci rămâne forma de trei litere. */ /* Antetul meciului la lățime de telefon: cu 17px, „Hermannstadt" ieșea din ecran și trăgea toată pagina cu el. */ .cupmsc{ font-size:14px; gap:8px; } .cupmsc .cupsc{ font-size:20px; } .cupmsc .cupt .tlogo{ height:22px; width:30px; } .cupmhd .gnaxis{ font-size:20px; } .cupmhd .goal-note{ font-size:11.5px; } .culrow{ grid-template-columns:15px minmax(0,1fr) 18px; gap:6px; } } /* ── Cupele europene ───────────────────────────────────────────────────── Lista e pe CAMPANIE: un card pe echipă, cu rundele înăuntru și, unde a prins faza grupelor, clasamentul alături. Rândul de meci e chiar cel de cupă, deci nu se rescrie nimic din geometria lui. */ /* Campaniile pe DOUĂ coloane pe desktop, cu cardurile ALINIATE SUS: primele două stau umăr la umăr, iar restul intră în coloana mai scurtă (cerut pe 9 septembrie 2026). Multicolul de dinainte echilibra înălțimea, dar primul card din dreapta pornea de la coada celui din stânga. Coloanele se compun în JS (`euroColoane`), deci ordinea din DOM nu mai e cea a clasării - pe telefon o pune la loc `order`, scris pe fiecare card ca `--eu-o`. */ .eucamps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; align-items:start; margin-top:14px; } .eucol{ display:flex; flex-direction:column; gap:14px; min-width:0; } .eucamp{ border:1px solid var(--line); border-radius:12px; overflow:hidden; } .euchd{ display:flex; align-items:center; gap:9px; padding:8px 12px; background:var(--titlebg); border-bottom:1px solid var(--line); } .euchd .eucl{ height:24px; width:28px; flex:none; object-fit:contain; } .euchn{ font-size:14px; font-weight:600; color:inherit; text-decoration:none; } .euchn:hover{ text-decoration:underline; } .euct{ margin-left:auto; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); } /* Rundele la stânga, clasamentul la dreapta. Faza-ligă are 36 de rânduri, deci coloana lui trebuie să poată fi înaltă fără să întindă rundele. */ .eucbody{ padding:10px 12px 12px; } .eucbody.eucbg{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:16px; align-items:start; } .eurunda + .eurunda{ margin-top:10px; } .eurhd{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:4px; margin-bottom:2px; } .eurhd h5{ margin:0; font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; } .eucomp{ font-size:11px; color:var(--muted); } .eugen{ margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; } /* Clasamentele au ieșit din cardul campaniei într-o secțiune proprie, sub meciuri (cerut pe 9 septembrie 2026): un tabel de 36 de rânduri lângă patru runde de câte două meciuri lăsa jumătate de card gol, iar cu campaniile pe două coloane n-ar mai fi avut unde încăpea. */ .euclas{ margin-top:20px; } .euclas h4{ margin:0 0 4px; font-size:14.5px; } /* Un clasament e o ZONĂ, ca grupa de cupă: titlul pe banda aurie (`--titlebg`), chenarul în jurul întregului clasament, iar cele trei bucăți de câte 12 în chenare PROPRII înăuntru (cerut pe 9 septembrie 2026). Lipite fără chenare, cele trei se citeau ca un singur tabel rupt aiurea la rândul 12. */ .euclbox{ border:1px solid var(--line); border-radius:12px; margin-top:14px; } .euclhd{ display:flex; align-items:baseline; gap:8px; padding:7px 12px; background:var(--titlebg); border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; color:var(--muted); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; } .euclhd i{ margin-left:auto; font-style:normal; font-size:10px; opacity:.75; text-transform:none; letter-spacing:0; cursor:help; } .eutabg{ display:grid; grid-template-columns:repeat(var(--eucol,1),minmax(0,1fr)); gap:12px; align-items:start; padding:12px; } .eutabbox{ margin-top:0; } .eutab{ margin-top:0; } .eutab .euloc{ width:22px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; } /* Golaverajul nu se rupe pe două rânduri: în bucata cu numele cele mai lungi coloana lui se strângea, „0-0" cădea în două, iar rândurile ei ieșeau mai înalte decât ale celorlalte două bucăți ale ACELUIAȘI clasament. Numele are deja tăietură cu „…" din `.cuptbl .cupth`. */ .eutab td, .eutab th{ white-space:nowrap; } /* Numele se taie mai devreme decât cei 170px ai cupei: bucata are o treime din lățime, iar un nume lung împingea coloana „Pct" în afara chenarului, unde `overflow:hidden` o tăia. */ .eutab .cupth{ max-width:118px; } .eutab tbody tr.euromine td{ background:var(--chip); font-weight:600; } /* Formațiile meciului european au o coloană în plus față de cupă: NOTA. Rândul devine clicabil doar unde chiar sunt cifre de arătat. */ .euro .culrow{ grid-template-columns:15px minmax(0,1fr) 32px 20px; } .culnt{ text-align:right; } .culnt .jbadge{ display:inline-block; min-width:30px; padding:1px 4px; border-radius:5px; font-size:11px; font-weight:600; text-align:center; } .culcl{ cursor:pointer; border-radius:6px; } .culcl:hover{ background:var(--chip); } .eunota{ margin-top:10px; } /* Fereastra jucătorului străin n-are link spre fișă, dar antetul are trei locuri: fără un element gol la stânga, banda meciului n-ar mai cădea pe coloana din mijloc. */ .pmlgol{ visibility:hidden; } /* Statisticile de echipă, în zone cu chenar, ca în pagina meciului de campionat. Trei coloane pe desktop, una pe telefon. */ .eutst{ margin-top:18px; } .eutstg{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .eutsts{ border:1px solid var(--line); border-radius:10px; padding:8px 10px 6px; } .eutstt{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; } .eutstr{ display:grid; grid-template-columns:46px minmax(0,1fr) 46px; gap:6px; align-items:baseline; font-size:12px; padding:2px 0; } .eutstr b{ font-variant-numeric:tabular-nums; } .eutstr b:first-child{ text-align:right; } .eutstr span{ text-align:center; color:var(--muted); font-size:11px; } @media (max-width:960px){ .eucamps{ display:flex; flex-direction:column; gap:14px; } .eucol{ display:contents; } .eucamp{ order:var(--eu-o,0); } .eutabg{ grid-template-columns:minmax(0,1fr); } .eutstg{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .eutstg{ grid-template-columns:minmax(0,1fr); } .euro .culrow{ grid-template-columns:15px minmax(0,1fr) 30px 18px; } .euchd{ gap:7px; padding:7px 10px; } .euct{ font-size:10px; } .eucbody{ padding:8px 10px 10px; } .eutab .cupth{ max-width:104px; } /* Sub ~360px cele opt coloane nu mai încap nici cu numele tăiat, deci bucata derulează pe orizontală, cu scrollbarul finuț al tabelelor de jucători - `overflow:hidden` de pe `.cupgbox` ar fi tăiat „Pct". */ .eutabbox{ overflow-x:auto; } } .carnat{ margin-top:18px; } /* Tabelul naționalelor are patru coloane, nu treizeci: `.pstat table` îi dă 1080px minimum și `width:100%`, deci fără regula asta se întindea cât cel de deasupra, cu jumătate de tabel gol. */ .carnat table{ min-width:0; width:auto; } /* Numele selecționatei se aliniază la stânga, ca antetul ei; cifrele la dreapta. `.pstat th` și `.cartbl thead th` centrează tot, deci selectorul are nevoie de clasa proprie ca să câștige. */ .cartbl .carnat th.natnm, .cartbl .carnat td.natnm{ text-align:left; } .cartbl .carnat th.jplch, .cartbl .carnat td.jplc{ text-align:right; min-width:76px; } .carnath{ margin:0 0 8px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .carnow td{ font-weight:700; } .carbg{ margin-left:7px; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; padding:1px 5px; border-radius:5px; background:var(--chip); color:var(--muted); } /* Meciurile de la națională. Coloana meciului se aliniază la stânga, ca la selecționate; cifrele au nevoie de mai puțin decât cei 76px ai tabelului de deasupra (sunt cinci coloane, nu trei), iar regula de acolo se bate cu DOUĂ clase, altfel pierde. */ .cartbl .carnatm th.natmec, .cartbl .carnatm td.natmec{ text-align:left; } .cartbl .carnat.carnatm th.jplch, .cartbl .carnat.carnatm td.jplc{ min-width:34px; } /* Nouă coloane la 7px de aer lateral ies cu 31px peste cardul de 706px; la 5px încap fix. Măsurat pe fișa cu cele mai lungi nume de meci. */ .carnatm .alltbl th, .carnatm .alltbl td{ padding-left:5px; padding-right:5px; } .natmec{ white-space:nowrap; } .natvs{ color:var(--muted); margin:0 5px; } /* Scorul e lucrul cerut, deci se citește ca numele echipelor, nu ca restul cifrelor - regula coloanei de cifre le dă tuturor culoarea ștearsă. */ .natsc{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); } .carnatn{ margin-left:6px; font-size:9.5px; padding:1px 5px; border-radius:5px; background:var(--chip); color:var(--muted); } /* Nouă coloane nu încap pe telefon: tabelul derulează în cutia lui, nu pagina, cu scrollbarul finuț al tabelelor de jucători. */ .natmw{ overflow-x:auto; max-width:100%; } .natmnota{ margin:8px 0 0; font-size:11px; color:var(--muted); } .jpv{ color:var(--p70); } .jpe{ color:var(--p50); } .jpi{ color:var(--p0); } @media(max-width:640px){ /* pe telefon selectoarele de sub „Meci cu meci" încap unul lângă altul doar dacă au voie să se strângă */ .jpth .allfilters{ flex-wrap:wrap; } }