/* ══════════════════════════════════════════════════════════════════════════ pulse-liga.css — Topplistan "Ligan v5" Byggd 2026-08-29 mot design-proposals/leaderboard-ligan-v5-2026-08-29.html VARFÖR EGEN FIL: forre_pulse.css kapades 2026-07-12 av två samtidiga sessioner. Allt nytt går i en liten dedikerad fil som ingen annan sida laddar. Denna fil laddas ENDAST av views/pages/leaderboard-new.php. SCOPE: allt är prefixat med .lbt-r / .rail.right / .card.place / .jakten. Ingen regel här får läcka till en annan sida. §0.5: INGA lodräta färgade linjer. Markering sker genom att tona HELA ytan. Vågräta avdelare är tillåtna och används. ══════════════════════════════════════════════════════════════════════════ */ /* ── F-MÄRKET ───────────────────────────────────────────────────────────── Kenta 2026-08-29: "du får inte glömma SVG loggan bredvid också VALD SPELARE JAKTEN OSV". Märket är inte dekoration — det är husets signatur på varje yta. Ritas som mask, inte som , så det ärver var(--accent) och därmed temat utan en andra fil. */ .lb-liga{ --lg-mark:url("/public/images/icons/forre-f-ring-currentcolor.svg"); } .lb-liga .rail.right .chd .slabel::before, .lb-liga .card.place .slabel::before, .lb-liga .jakten .jk-hd::before{ content:''; width:12px; height:12px; flex:0 0 12px; display:inline-block; vertical-align:-1px; margin-right:1px; background:var(--accent); -webkit-mask:var(--lg-mark) center/contain no-repeat; mask:var(--lg-mark) center/contain no-repeat; } /* Hall of Fame bär redan pokalen OCH är sidans enda mörka yta. Två märken på samma rubrik är ett för mycket — mockupens `.hof .hd::before{display:none}`. Det är det ENDA undantaget: alla andra rälsrubriker bär märket före sin egen ikon. (Första försöket undantog varje rubrik som hade en chd-ikon — då blev det noll märken på hela rälen, alltså precis det Kenta sa åt mig att sluta med. Uppmätt live 2026-08-29 innan rättelsen: 0 av 3.) */ .lb-liga .rail.right .card.hof .chd .slabel::before{ display:none; } /* Rubrikraden är redan flex — märket radar upp sig av sig självt. .slabel i player-kortet är ett block, så där behövs inline-flex. */ .lb-liga .card.place .slabel{ display:inline-flex; align-items:center; gap:6px; } /* ── JAKTENS RUBRIK ─────────────────────────────────────────────────────── Rubriken togs bort 2026-08-19 med motiveringen "raderna säger 'Du jagar' själva, 21 px för noll information". Det stämde då. Nu bär den märket och namnger ytan, och kostar 15 px eftersom den är en etikett, inte en chd. */ .lb-liga .jakten .jk-hd{ display:flex; align-items:center; gap:6px; margin:0 0 6px; font:700 9.5px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); } /* ── RADEN ──────────────────────────────────────────────────────────────── Fem saker, inte sju kolumner: 1) placering + rörelse i EN cell 2) avatar 3) namn (+ märke, rank, titel, de tre tal som inte är kolumn) 4) aktiv kolumn — viskar 5) poäng — bär Δ-pilen flyttar IN i placeringscellen. Den var en egen 22 px-kolumn som stod tom på varje rad utan historik, och som bar ett värde som bara är begripligt bredvid själva placeringen. */ @media (min-width:821px){ .lb-liga .lbtable.has-dlt .lbt-h, .lb-liga .lbtable.has-dlt .lbt-r{ grid-template-columns:44px minmax(0,1fr) 60px 76px; gap:8px; } } @media (min-width:721px){ .lb-liga .lbt-h, .lb-liga .lbt-r{ grid-template-columns:44px minmax(0,1fr) 60px 76px; gap:8px; } } @media (max-width:720px){ .lb-liga .lbt-h, .lb-liga .lbt-r{ grid-template-columns:40px minmax(0,1fr) 52px 66px; gap:7px; } } .lb-liga .rkcell{ display:flex; align-items:baseline; gap:3px; justify-content:flex-end; } .lb-liga .rkcell .rk{ font:800 13px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; color:var(--dim); min-width:0; text-align:right; } .lb-liga .lbt-r.p1 .rkcell .rk{ color:var(--gold-r); } .lb-liga .lbt-r.p2 .rkcell .rk{ color:#9aa3ad; } .lb-liga .lbt-r.p3 .rkcell .rk{ color:#b07a3c; } /* Rörelsen: liten, samma baslinje, aldrig en egen kolumn. */ .lb-liga .rkcell .dlt{ font:700 8.5px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; color:var(--faint); white-space:nowrap; } .lb-liga .rkcell .dlt.up{ color:var(--live); } .lb-liga .rkcell .dlt.dn{ color:var(--danger, #d9534f); } /* En prick som betyder "oförändrad" är brus på 19 av 20 rader. */ .lb-liga .rkcell .dlt.flat{ visibility:hidden; } @media (max-width:520px){ .lb-liga .rkcell .dlt{ display:none; } } /* Rubrikens tomma Δ-cell har ingen egen kolumn längre. */ .lb-liga .lbt-h .dlt{ display:none; } /* ── KRONAN ─────────────────────────────────────────────────────────────── Det enda ställe där en placering betyder något i sig själv. Ligger på namnraden, inte i sifferkolumnen: den hör till personen, inte till talet. */ .lb-liga .lbt-r svg.krona{ width:12px; height:10px; flex:0 0 12px; color:var(--gold-r); margin-right:5px; vertical-align:-1px; display:inline-block; } /* ── TRE TAL, EN TYNGD ──────────────────────────────────────────────────── v3:s fel var att K/D, Wins och Poäng vägde lika och ögat inte visste var det skulle landa. Nu viskar den aktiva kolumnen (11 px, --faint) och poängen bär (13,5 px / 800, --ink). Poängen är listans sanning; den aktiva kolumnen är bara det man råkar sortera på. */ .lb-liga .lbt-r .num.act{ font:600 11px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; color:var(--faint); } .lb-liga .lbt-r .num.score{ font:800 13.5px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; color:var(--ink); } /* Sorterar man PÅ poäng är poängen redan den som bär — då får den aktiva kolumnen bära accenten i stället, så man ser vad man sorterar på. */ .lb-liga .lbtable[data-sort-active="1"] .lbt-r .num.act{ color:var(--accent-ink); } @media (max-width:720px){ .lb-liga .lbt-r .num.act{ font-size:10.5px; } .lb-liga .lbt-r .num.score{ font-size:12.5px; } } /* Raden: 44 px, som mockupen. 20 rader = 880 px och kortet slutar där — ingen inre rullist någonstans. */ .lb-liga .lbt-r{ min-height:44px; } /* Min egen rad tonas som HELA ytan (§0.5), aldrig med en kantlinje. */ .lb-liga .lbt-r.lbt-me{ background:color-mix(in srgb, var(--accent) 9%, transparent); } .lb-liga .lbt-r.lbt-me:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); } /* ── PAGINERINGEN ───────────────────────────────────────────────────────── Fanns redan och fungerade. Enda ändringen är att den får samma siffertypografi som listan, och att "Min #N" hamnar längst till höger i stället för att stå i flödet mellan sidnumren. */ .lb-liga .lbpager{ justify-content:flex-start; padding:9px 2px 0; } .lb-liga .lbpage{ font:700 11.5px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; } .lb-liga .lbpage.me-jump{ margin-left:auto; } /* ── HÖGERRÄLEN ─────────────────────────────────────────────────────────── En rytm på alla kort. Rubrikerna hade tre olika höjder beroende på om de bar en ikon, en slabel2 eller en länk. */ .lb-liga .rail.right .chd .slabel{ display:inline-flex; align-items:center; gap:7px; } /* ══ HALL OF FAME — SIDANS ENDA MÖRKA YTA ════════════════════════════════ Kenta 2026-08-29 om v2: "svart på ljus bakgrund?" Fem mörka plattor på en ljus sida läses som ett renderingsfel. EN mörk yta läses som ett val. Kortet är permanent (mästarna arkiveras för alltid) — det är sidans enda innehåll som INTE ändras i morgon, och därför det enda som förtjänar att brytas ut ur sidans rytm. Bara FÄRGER ändras här. Strukturen, avstånden och all markup ägs av pulse-hof-base.php och pulse-hof-season.php och rörs inte — så kortet fortsätter fungera exakt som idag om den här filen inte laddas. --board-* finns i forre_pulse.css:26 (ljust) och :59 (mörkt), så ytan är mörk i BÅDA temana utan en enda extra regel. */ .lb-liga .rail.right .card.hof{ background:var(--board-bg); color:var(--board-ink); border-color:color-mix(in srgb, var(--gold-r) 24%, var(--line)); } .lb-liga .card.hof .chd{ background:transparent; border-bottom-color:var(--board-line); box-shadow:none; color:var(--gold-r); } .lb-liga .card.hof .chd .slabel{ color:var(--gold-r); } .lb-liga .card.hof .chd .slabel2{ color:var(--board-sub); } .lb-liga .card.hof .chd .chd-ic{ background:color-mix(in srgb, var(--gold-r) 18%, transparent); color:var(--gold-r); } /* Mästaren */ .lb-liga .card.hof .hof-hero.g{ background:color-mix(in srgb, var(--gold-r) 12%, transparent); } .lb-liga .card.hof .hof-hero:hover{ background:color-mix(in srgb, var(--gold-r) 17%, transparent); } .lb-liga .card.hof .hof-crown{ background:color-mix(in srgb, var(--gold-r) 20%, transparent); color:var(--gold-r); box-shadow:0 0 0 1px color-mix(in srgb, var(--gold-r) 38%, transparent); } .lb-liga .card.hof .hof-lbl{ color:var(--gold-r); } .lb-liga .card.hof .hof-name{ color:var(--board-ink); } .lb-liga .card.hof .hof-sub{ color:var(--board-sub); } /* De fyra talen */ .lb-liga .card.hof .hof-n{ background:rgba(255,255,255,.06); } .lb-liga .card.hof .hof-nv{ color:var(--board-ink); } .lb-liga .card.hof .hof-nl{ color:var(--board-sub); } /* Tvåan och trean */ .lb-liga .card.hof .hof-p{ background:rgba(255,255,255,.05); } .lb-liga .card.hof .hof-p:hover{ background:rgba(255,255,255,.09); } .lb-liga .card.hof .hof-pn{ color:var(--board-ink); } .lb-liga .card.hof .hof-pv, .lb-liga .card.hof .hof-pr{ color:var(--board-sub); } /* Silver och brons på siffran — mockupens medaljbrickor, utan att lägga till ett enda element i markupen. */ .lb-liga .card.hof .hof-p:nth-child(1) .hof-pr{ color:#c7ccd2; } .lb-liga .card.hof .hof-p:nth-child(2) .hof-pr{ color:#b07a3c; } /* Regentlängden */ .lb-liga .card.hof .hof-strip{ border-top-color:var(--board-line); } .lb-liga .card.hof .hof-st{ color:var(--board-sub); } .lb-liga .card.hof .hof-st .n{ color:var(--board-sub); } .lb-liga .card.hof .hof-c{ background:rgba(255,255,255,.07); color:var(--board-ink); } .lb-liga .card.hof .hof-c:hover{ background:color-mix(in srgb, var(--gold-r) 26%, transparent); } .lb-liga .card.hof .hof-cb{ background:var(--board-bg); color:var(--gold-r); } .lb-liga .card.hof .hof-cb.v{ color:var(--champ); } /* Veckoglimten — lila bär fortfarande sin egen betydelse mot den mörka ytan */ .lb-liga .card.hof .hof-week{ border-top-color:var(--board-line); } .lb-liga .card.hof .hof-week:hover{ background:rgba(255,255,255,.05); } .lb-liga .card.hof .hof-wic{ background:color-mix(in srgb, var(--champ) 24%, transparent); } .lb-liga .card.hof .hof-wn, .lb-liga .card.hof .hof-wvn{ color:var(--board-ink); } .lb-liga .card.hof .hof-wvl{ color:var(--board-sub); } .lb-liga .card.hof .hof-foot, .lb-liga .card.hof .hof-empty{ color:var(--board-sub); } .lb-liga .card.hof .hof-empty .bi{ color:var(--gold-r); } /* Länkarna i kortet ärver ljus text — annars blir de sajtens blå på svart. */ .lb-liga .card.hof a{ color:inherit; } /* ══ MASTER–DETALJ ═══════════════════════════════════════════════════════ Kortet under listan visar DIG som standard och byts ut när man klickar en rad. Listan står stilla — inget hopp, ingen omladdning, inget scroll. Vald rad tonas i HELA ytan (§0.5), aldrig med en lodrät linje. */ .lb-liga .lg-back{ margin-left:10px; padding:0; border:0; background:transparent; cursor:pointer; color:var(--accent-ink); font:700 9px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.1em; text-transform:uppercase; } .lb-liga .lg-back:hover{ text-decoration:underline; } .lb-liga .lg-back[hidden]{ display:none !important; } /* Visar kortet någon annan än mig får rubriken bära NAMNET, inte en etikett — och märket byter färg så man ser på 20 cm håll att kortet inte är mitt. */ .lb-liga .card.place[data-lg-kort] .slabel{ display:flex; align-items:center; gap:6px; } .lb-liga .card.place.lg-annan [data-lg-rubrik]{ font-size:13px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lb-liga .card.place.lg-annan{ background:color-mix(in srgb, var(--accent) 5%, var(--card)); } .lb-liga .card.place.lg-annan .slabel::before{ background:var(--dim); } /* "1–20 av 145" — samma dämpade vikt som resten av underrubriken, men med tabulärsiffror så spannet inte hoppar när man bläddrar. */ .lb-liga .psub .lg-span{ font-variant-numeric:tabular-nums; color:var(--faint); } /* ══ LISTKORTET ══════════════════════════════════════════════════════════ Mockup v5 `.lgt`. Rubriken, klockan, sorteringen, podiet, listan och pagineringen ar EN yta. Forut lag de som fyra staplade kort med tre luftgap emellan: sidan borjade med fyra kanter innan man sag en spelare. */ .lb-liga .card.lgcard{ overflow:hidden; } .lb-liga .lgt{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); } /* ★ VATTENMARKET — en gang pa sidan, i listkortets huvud. Ritas som mask med gradienten INUTI market, aldrig som en gradient pa ytan (Kenta: "vill inte ha nagon gradient annars"). Samma teknik som sprites-sidan. */ .lb-liga .lgt::before{ content:''; position:absolute; pointer-events:none; z-index:0; right:-30px; top:-38px; width:190px; height:235px; background:linear-gradient(to bottom, color-mix(in srgb, var(--ink) 11%, transparent) 0%, color-mix(in srgb, var(--ink) 7%, transparent) 45%, transparent 92%); -webkit-mask:var(--lg-mark) top right/contain no-repeat; mask:var(--lg-mark) top right/contain no-repeat; } .lb-liga .lgt > *{ position:relative; z-index:1; } .lb-liga .lgh{ display:flex; align-items:baseline; gap:10px; padding:13px 14px 4px; flex-wrap:wrap; } .lb-liga .lgh h1{ margin:0; font:800 19px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); } .lb-liga .lgh .psub{ font:700 9px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0; } /* Ligabaren ar inne i kortet nu — den ska inte bara en egen ram eller yta. */ .lb-liga .lgt .lgbar{ background:transparent; border:0; box-shadow:none; border-radius:0; padding:0 14px 11px; margin:0; } /* Sorteringen sitter pa det den styr. Kondenserad versal som resten av kortets etiketter — inte sidhuvudets knappar, som var 6 px hogre. */ .lb-liga .lgs{ display:flex; align-items:center; gap:2px; padding:8px 11px 10px; flex-wrap:wrap; } .lb-liga .lgs button{ height:24px; padding:0 10px; border:1px solid transparent; border-radius:3px; background:transparent; color:var(--dim); cursor:pointer; font:700 10px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.08em; text-transform:uppercase; } .lb-liga .lgs button:hover{ color:var(--ink); background:var(--inset); } .lb-liga .lgs button.on{ background:var(--accent); border-color:var(--accent); color:#fff; } .lb-liga .lgs .sp{ margin-left:auto; font:700 9px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-variant-numeric:tabular-nums; } /* Podiet ligger inne i kortet — da far det inte se ut som tre kort till. Ramar och skuggor bort, `--inset` i stallet: samma yta, ett djup mindre. */ .lb-liga .lgcard .podium{ margin:0; padding:12px 14px; gap:8px; } .lb-liga .lgcard .pod{ background:var(--inset); border:1px solid var(--line); box-shadow:none; } .lb-liga .lgcard .pod.g{ border-top-width:2px; } /* Pagineringen bor i kortet, under listan — inte som ett lost band under det. */ .lb-liga .lgcard .lbpager{ margin:0; padding:9px 12px; border-top:1px solid var(--line); justify-content:flex-start; } /* Kolumnrubriken far samma kondenserade etikettvikt som resten av kortet. */ .lb-liga .lbt-h{ font:700 8.5px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); background:var(--inset); padding-top:7px; padding-bottom:7px; } .lb-liga .lbt-h span{ font-weight:700; } @media (max-width:720px){ .lb-liga .lgh{ padding:11px 12px 3px; } .lb-liga .lgh h1{ font-size:17px; } .lb-liga .lgt .lgbar{ padding:0 12px 10px; } .lb-liga .lgs{ padding:7px 9px 9px; } .lb-liga .lgcard .podium{ padding:10px 12px; } } /* ══ SPELARKORTET I RALEN ════════════════════════════════════════════════ Mockup v5: rälen är Hall of Fame · Din placering · Jakten · Aktiva nu. Kortet låg förut i mitten som en bred flexrad med tre 20 px-tal bredvid varandra — den formen finns inte i 320 px. Här blir den: rad 1 märke + "Din placering" / spelarens namn + Tillbaka rad 2 ringen med placeringen · rank · poängen stor till höger rad 3 Wins och K/D som två tal rad 4 placeringsbaren (bara mina) Samma markup, samma data — bara ett annat raster. */ .lb-liga .rail.right .card.place{ display:block !important; /* var inline flex-rad i mitten */ padding:0; margin-top:10px; } .lb-liga .rail.right .card.place > div:first-child{ padding:11px 13px 0; } .lb-liga .rail.right .card.place .slabel{ display:flex; align-items:center; gap:6px; font:800 10px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:var(--ls-sm,1.5px); text-transform:uppercase; color:var(--dim); margin-bottom:8px; } .lb-liga .rail.right .card.place .big{ display:inline-block; font:800 26px/1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; color:var(--accent-ink); margin:0; } .lb-liga .rail.right .card.place .mv{ display:flex; align-items:center; gap:5px; font-size:11.5px; margin-top:3px; } .lb-liga .rail.right .card.place .mv .rkico{ width:14px; height:14px; } .lb-liga .rail.right .card.place .pl-cta{ margin-top:8px; } .lb-liga .rail.right .card.place .pl-stats{ display:inline-flex; align-items:center; gap:5px; font:700 10.5px/1 'Roboto',sans-serif; color:var(--accent-ink); text-decoration:none; } .lb-liga .rail.right .card.place .pl-stats:hover{ text-decoration:underline; } /* Talraden: poängen bär, Wins och K/D viskar — samma hierarki som listraden. */ .lb-liga .rail.right .card.place > div:nth-child(2){ display:flex !important; gap:0 !important; text-align:center !important; margin-top:11px; border-top:1px solid var(--line); } .lb-liga .rail.right .card.place > div:nth-child(2) > div{ flex:1; padding:9px 3px; border-right:1px solid var(--line); } .lb-liga .rail.right .card.place > div:nth-child(2) > div:last-child{ border-right:0; } .lb-liga .rail.right .card.place > div:nth-child(2) .num{ font-size:15px !important; font-weight:800; font-variant-numeric:tabular-nums; } .lb-liga .rail.right .card.place > div:nth-child(2) .num.score{ color:var(--accent-ink); } .lb-liga .rail.right .card.place > div:nth-child(2) > div > div:last-child{ font-size:8.5px !important; letter-spacing:.09em !important; margin-top:3px !important; } /* Placeringsbaren — ryms i 320 px, men legenden måste få radbryta. */ .lb-liga .rail.right .card.place .pbar{ padding:10px 13px 12px; border-top:1px solid var(--line); margin:0; } .lb-liga .rail.right .card.place .pbar-legend{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:10px; margin-bottom:7px; } .lb-liga .rail.right .card.place .pbar-legend .li.total{ margin-left:0; } /* ══ JAKTEN — EGET KORT I RALEN ══════════════════════════════════════════ */ .lb-liga .rail.right .jakten{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin-top:10px; padding:0; overflow:hidden; } .lb-liga .rail.right .jakten .jk-hd{ display:flex; align-items:center; gap:7px; margin:0; padding:9px 12px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 3.5%, var(--card)) 0, var(--card) 55%); font:800 10px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:var(--ls-sm,1.5px); text-transform:uppercase; color:var(--dim); } .lb-liga .rail.right .jakten .jk-row{ padding:9px 12px; } .lb-liga .rail.right .jakten .jk-row + .jk-row{ border-top:1px solid var(--line); } .lb-liga .rail.right .jakten .jk-note{ padding:8px 12px; border-top:1px solid var(--line); } /* "Utmana" får plats i 320 px bara som ikon + kort ord — texten bryter annars raden. */ .lb-liga .rail.right .jakten .jk-duel{ padding:0 7px; font-size:9.5px; } .lb-liga .rail.right .jakten .jk-duel img{ width:11px; height:11px; } /* Mitten är listans egen nu — inget kort under den. */ .lb-liga .center > .card.lgcard{ margin-bottom:0; } /* ══ DE TRE POTTERNA ═════════════════════════════════════════════════════ Mockup v5 `.pots`: "tre tal på en rad, inte fyra rutor. Rutor gjorde det tungt." Färgpricken bär vilken pott det är; talet bär värdet; taket är dämpat efter snedstrecket. */ .lb-liga .lgpots{ display:flex; margin:0; padding:10px 13px 11px; border-top:1px solid var(--line); } .lb-liga .lgpots[hidden]{ display:none !important; } .lb-liga .lgpot{ flex:1; min-width:0; text-align:center; } .lb-liga .lgpot[hidden]{ display:none !important; } .lb-liga .lgpot b{ display:flex; align-items:center; justify-content:center; gap:4px; font:700 7.5px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; } .lb-liga .lgpot b::before{ content:''; width:6px; height:6px; border-radius:2px; background:var(--c, var(--accent)); flex:0 0 6px; } .lb-liga .lgpot span{ display:block; font-variant-numeric:tabular-nums; white-space:nowrap; } .lb-liga .lgpot em{ font-style:normal; font:800 12.5px/1 'Roboto',sans-serif; color:var(--ink); } .lb-liga .lgpot i{ font-style:normal; font:700 9px/1 'Roboto',sans-serif; color:var(--faint); margin-left:1px; } /* ══ TROFERADERNA — TOPP 3 (förslag C, Kenta 2026-08-29) ═════════════════ design-proposals/pallen-2026-08-29.html. Podiet är borta. Topp 3 ÄR listans tre första rader — 62 px höga, med en medaljbricka i stället för placeringssiffran, större avatar och större poäng. Ingen egen ruta, ingen upprepning: förut stod samma tre spelare två gånger på samma skärm, och den större av de två ytorna var den fattigare (podiet hade varken rank, matcher eller kills). §0.5: hela raden tonas i medaljfärgen. Ingen lodrät färgstapel någonstans. */ .lb-liga .lbt-r.lgtr{ min-height:62px; } .lb-liga .lbt-r.lgtr-1{ background:color-mix(in srgb, var(--gold-r) 8%, transparent); } .lb-liga .lbt-r.lgtr-2{ background:color-mix(in srgb, #9aa3ad 9%, transparent); } .lb-liga .lbt-r.lgtr-3{ background:color-mix(in srgb, #b07a3c 8%, transparent); } .lb-liga .lbt-r.lgtr-1:hover{ background:color-mix(in srgb, var(--gold-r) 13%, transparent); } .lb-liga .lbt-r.lgtr-2:hover{ background:color-mix(in srgb, #9aa3ad 14%, transparent); } .lb-liga .lbt-r.lgtr-3:hover{ background:color-mix(in srgb, #b07a3c 13%, transparent); } /* Min egen rad vinner alltid över medaljtonen — annars vet man inte var man är. */ .lb-liga .lbt-r.lgtr.lbt-me{ background:color-mix(in srgb, var(--accent) 12%, transparent); } /* ── MEDALJBRICKAN ──────────────────────────────────────────────────────── Samma språk som Hall of Fame-kortets brickor. Placeringssiffran BLIR brickan — ingen extra tagg i markupen. */ .lb-liga .lbt-r.lgtr .rkcell{ justify-content:center; } .lb-liga .lbt-r.lgtr .rkcell .rk{ width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:50%; font:800 11px/1 var(--cond, 'Roboto Condensed','Roboto',sans-serif); color:#fff !important; box-shadow:0 0 0 2px color-mix(in srgb, var(--card) 70%, transparent); } .lb-liga .lbt-r.lgtr-1 .rkcell .rk{ background:var(--gold-r); } .lb-liga .lbt-r.lgtr-2 .rkcell .rk{ background:#9aa3ad; } .lb-liga .lbt-r.lgtr-3 .rkcell .rk{ background:#b07a3c; } /* Δ-pilen tar brickans plats. På de tre översta raderna säger placeringen redan allt som behövs, och brickan äger cellen. */ .lb-liga .lbt-r.lgtr .rkcell .dlt{ display:none; } /* ── AVATAREN ─────────────────────────────────────────────────────────── */ .lb-liga .lbt-r.lgtr .who .av{ width:40px; height:40px; font-size:13px; } .lb-liga .lbt-r.lgtr-1 .who .av{ width:44px; height:44px; font-size:14px; box-shadow:0 0 0 2px var(--card), 0 0 0 3px var(--gold-r); } .lb-liga .lbt-r.lgtr-2 .who .av{ box-shadow:0 0 0 2px var(--card), 0 0 0 2.5px #9aa3ad; } .lb-liga .lbt-r.lgtr-3 .who .av{ box-shadow:0 0 0 2px var(--card), 0 0 0 2.5px #b07a3c; } /* ── NAMNET OCH TALEN ─────────────────────────────────────────────────── */ .lb-liga .lbt-r.lgtr .who .nm{ font-size:14px; } .lb-liga .lbt-r.lgtr-1 .who .nm{ font-size:15.5px; font-weight:800; } .lb-liga .lbt-r.lgtr-1 svg.krona{ width:14px; height:11px; flex-basis:14px; } .lb-liga .lbt-r.lgtr .num.score{ font-size:18px; } .lb-liga .lbt-r.lgtr-1 .num.score{ font-size:21px; color:var(--gold-r); } .lb-liga .lbt-r.lgtr .num.act{ font-size:11.5px; } /* Avståndet till ettan — det enda talet listan inte redan ger. Dämpat: det är kontext, inte ett värde man jämför rader med. */ .lb-liga .lg-gap{ font-weight:800; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; } @media (max-width:720px){ .lb-liga .lbt-r.lgtr{ min-height:56px; } .lb-liga .lbt-r.lgtr .who .av{ width:34px; height:34px; } .lb-liga .lbt-r.lgtr-1 .who .av{ width:38px; height:38px; } .lb-liga .lbt-r.lgtr .num.score{ font-size:16px; } .lb-liga .lbt-r.lgtr-1 .num.score{ font-size:18px; } } /* ── MOBIL: NAMNET FÅR SIN PLATS TILLBAKA (2026-09-02) ───────────────────── Anmält av Kenta: "namnen syns inte fullt ut på mobilen". Uppmätt i en 316 px bred rad (= 360 px telefon) och det var värre än det låter — namnet fick mellan 12 och 47 px. "Fortnite.Farsan" visades som ett tecken och tre punkter. Räkningen bakom siffran: .who var 113 px. Avataren tog 34 + 12 px gap, det köpta märket 22 + 6, verifieringsbocken 14 + 6 — kvar till namnet blev 19 px på en rad som bar både märke och bock. Namnet var alltså det enda elementet i raden som betalade för alla andra, trots att det är det man läser raden för. Två grepp, i den ordningen: 1. Radens budget stramas åt där det inte kostar läsbarhet. Placeringen behöver inte 40 px för två siffror, K/D inte 52 och Poäng inte 66 — mikroetiketterna under talen är 8,5 px och ryms i 46/58. Avataren går 34 → 30 och gapen 12 → 9 respektive 7 → 6. Det ger namnet ~40 px till utan att en siffra kapas. 2. Räcker det ändå inte får namnet en andra rad i stället för att kapas. Ett 15-teckensnamn kan inte samsas med avatar, märke, bock, K/D och Poäng på 360 px — den ekvationen går inte ihop, och då är ett helt namn på två rader ett bättre svar än ett kapat på en. Taket är två rader (line-clamp), så ett absurt långt namn kan inte skjuta ner resten av listan. Korta namn ser exakt likadana ut som förut: en rad, samma höjd. VARFÖR HÄR OCH INTE I VYN: leaderboard-new.php har ett eget