/* Návrh sjednoceného webu GPM — jeden styl pro všechny stránky.
   Sekci určuje třída na <body>: home (zlatá), league (růžová), pugs (tyrkysová).
   Liga od Season 3 má ledovou paletu Frost (třída frost, dává ji app-core.js podle sezóny na obrazovce) — archiv Season 2 zůstává růžový. */
@font-face { font-family: "Archivo"; src: url("Archivo-Variable.ttf") format("truetype"); font-weight: 100 900; font-stretch: 62% 125%; }
/* písma (build_fonts.py) — začátek */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-a.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0020-007E,U+00A0-00A3,U+00A5-00AC,U+00AE-0107,U+010A-0113,U+0116-011B,U+011E-0123,U+0126-012B,U+012E-0133,U+0136-0137,U+0139-013E,U+0141-0148,U+014A-014D,U+0150-015B,U+015E-0161,U+0164-0165,U+0168-017E,U+01A0-01A1,U+01AF-01B0,U+01CD-01CE,U+0218-021B,U+0237,U+02C6-02C7,U+02D8-02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2000-200B,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+202F-2030,U+2032-2033,U+2039-203A,U+2044,U+20A1,U+20A4,U+20A6,U+20A8-20A9,U+20AB-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BC-20BF,U+2113,U+2122,U+2190-2193,U+2212; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-b.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0300-0303,U+0306-0307,U+0309-030C,U+0312,U+031B,U+0323,U+0326-0328,U+03C0,U+0E3F,U+1EA0-1EF1,U+2070,U+2074-2079,U+2080-2089,U+2116,U+2126,U+212E,U+2153-2154,U+215B-215E,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+27E8-27E9; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-500-a.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01DC,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+02BB-02BC,U+02C6-02C7,U+02D8-02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+20A1,U+20A4,U+20A6,U+20A8-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF,U+2113,U+2122,U+2190-2193,U+2212,U+2215; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-500-b.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0300-0303,U+0306-0307,U+0309-030C,U+0312,U+0315,U+031B,U+0323,U+0326-0328,U+03C0,U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9,U+0E3F,U+1EA0-1EF1,U+2070,U+2074-2079,U+2080-2089,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2194-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+F6D7-F6D8,U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-600-a.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01DC,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+02BB-02BC,U+02C6-02C7,U+02D8-02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+20A1,U+20A4,U+20A6,U+20A8-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF,U+2113,U+2122,U+2190-2193,U+2212,U+2215; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-600-b.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0300-0303,U+0306-0307,U+0309-030C,U+0312,U+0315,U+031B,U+0323,U+0326-0328,U+03C0,U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9,U+0E3F,U+1EA0-1EF1,U+2070,U+2074-2079,U+2080-2089,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2194-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+F6D7-F6D8,U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-700-a.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000,U+000D,U+0020-007E,U+00A0-017F,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01DC,U+01FA-01FF,U+0218-021B,U+0237,U+0259,U+02BB-02BC,U+02C6-02C7,U+02D8-02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+20A1,U+20A4,U+20A6,U+20A8-20AE,U+20B1-20B2,U+20B4-20B5,U+20B8-20BA,U+20BD,U+20BF,U+2113,U+2122,U+2190-2193,U+2212,U+2215; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-700-b.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0300-0303,U+0306-0307,U+0309-030C,U+0312,U+0315,U+031B,U+0323,U+0326-0328,U+03C0,U+0400-045F,U+0472-0473,U+0490-049D,U+04A0-04A5,U+04AA-04AB,U+04AE-04B3,U+04B6-04BB,U+04C0-04C2,U+04CF-04D9,U+04DC-04DF,U+04E2-04E9,U+04EE-04F5,U+04F8-04F9,U+0E3F,U+1EA0-1EF1,U+2070,U+2074-2079,U+2080-2089,U+2116,U+2126,U+212E,U+2150-2151,U+2153-215E,U+2194-2199,U+21A9-21AA,U+21B0-21B3,U+21B6-21B7,U+21BA-21BB,U+21C4,U+21C6,U+2202,U+2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+2500-259F,U+25CA,U+2713,U+274C,U+2B0E-2B11,U+F6D7-F6D8,U+FB01-FB02; }
/* písma (build_fonts.py) — konec */

:root {
  --bg: #0c0c0f; --ink: #f3f1ec; --ink2: #c8cad4; --mut: #8a8d9e; --dim: #4d5061;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.05); --card: rgba(255,255,255,.035);
  --gold: #f2d468; --win: #3ddc97; --loss: #ff5d6c;
  --lg: linear-gradient(100deg, #b8379f, #f0116a);
  --pg: linear-gradient(100deg, #70f0cc, #22e0ff 55%, #6292e2);
  --gd: linear-gradient(100deg, #f2d468, #e0b33c);
  --fg: linear-gradient(100deg, #ecf6ff, #76b0ff);
  --fd: "Archivo", sans-serif;
  --fb: "Bricolage Grotesque", "Archivo", sans-serif;
  --fm: "IBM Plex Mono", Consolas, monospace;
  --e: cubic-bezier(.16, 1, .3, 1);
}
body.home   { --acc: #f2d468; --grad: var(--gd); --tint: #2b2410; --on: #141414; }
body.league { --acc: #f0116a; --grad: var(--lg); --tint: #4a0056; --on: #fff; }
body.pugs   { --acc: #22e0ff; --grad: var(--pg); --tint: #00458f; --on: #06121c; }
body.league.frost { --acc: #7fb6ff; --grad: var(--fg); --tint: #0b2a55; --on: #06121c; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 15px; min-height: 100vh; position: relative; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* pozadí: šikmý přechod do barvy sekce, velké P a dvě šikmé linky ve sklonu značky */
.bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(128deg, transparent 38%, color-mix(in srgb, var(--tint) 80%, transparent) 100%); }
.bg i { position: absolute; right: -90px; top: 96px; width: 700px; height: 1106px; background: var(--grad); opacity: .06;
  -webkit-mask: url(p.png) center / contain no-repeat; mask: url(p.png) center / contain no-repeat; }
.bg b { position: absolute; left: -10%; width: 130%; height: 16px; background: var(--acc); opacity: .05; transform: rotate(-40deg); transform-origin: left; top: 1040px; }
.bg b + b { height: 5px; opacity: .09; top: 1180px; }

/* ── společná hlavička ── */
.top { position: relative; z-index: 5; height: 72px; display: flex; align-items: center; padding: 0 48px; background: rgba(11,11,14,.94); border-bottom: 1px solid var(--line); }
.top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .p { height: 38px; } .brand .wm { height: 23px; }
.main { display: flex; height: 100%; margin-left: 150px; }
.main a { position: relative; display: flex; align-items: center; padding: 0 19px; color: var(--mut); font: 700 13px/1 var(--fd); font-stretch: 115%; letter-spacing: .16em; }
.main a.on { color: var(--acc); font-weight: 800; }
.main a.on::after { content: ""; position: absolute; left: 19px; right: 19px; bottom: -1px; height: 3px; background: var(--acc); }
.tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search { width: 236px; height: 36px; display: flex; align-items: center; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.04); color: #7d8092; font-size: 13.5px; }
.livep { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255,80,95,.45); background: rgba(255,60,80,.10); color: #ffb0b6; font: 800 12px/1 var(--fd); font-stretch: 112%; letter-spacing: .1em; }
.livep i, .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4658; box-shadow: 0 0 0 0 rgba(255,70,88,.6); animation: pulse 1.6s infinite; }
.mechip { height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 13px 0 4px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-weight: 600; font-size: 13.5px; }

/* druhý řádek: podstránky sekce */
.sub { position: relative; z-index: 4; height: 54px; display: flex; align-items: center; gap: 4px; padding: 0 48px; background: rgba(0,0,0,.36); border-bottom: 1px solid var(--line); }
.sub .slogo { height: 30px; margin-right: 20px; }
.sub a { padding: 9px 15px; border-radius: 99px; color: var(--mut); font: 700 12.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .12em; }
.sub a.on { background: var(--grad); color: var(--on); font-weight: 800; }
.sub .r { margin-left: auto; color: var(--mut); font: 500 12px var(--fm); }
.crumb { display: flex; align-items: center; gap: 10px; color: var(--mut); font: 500 12px var(--fm); letter-spacing: .04em; }
.crumb b { color: var(--ink); font-weight: 600; }

/* ── stavební kameny ── */
.wrap { width: 1280px; margin: 0 auto; padding: 34px 0 70px; }
.bar { width: 84px; height: 6px; background: var(--acc); margin-bottom: 16px; }
.kick { color: var(--acc); font: 800 13px/1 var(--fd); font-stretch: 120%; letter-spacing: .26em; text-transform: uppercase; }
.hd { margin: 0; font-family: var(--fd); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: .96; letter-spacing: -.01em; word-spacing: .14em; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin: 0; color: var(--ink2); font-size: 17px; line-height: 1.6; }
.btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; flex: none; height: 46px; padding: 0 22px; border-radius: 7px; background: var(--grad); color: var(--on); font: 800 13.5px/1 var(--fd); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; }
.btn.ghost { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.btn.lg { background: var(--lg); color: #fff; } .btn.pg { background: var(--pg); color: #06121c; }
body.frost .btn.lg { background: var(--fg); color: #06121c; }
.btn.sm { height: 36px; padding: 0 15px; font-size: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.card > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 900 13px/1 var(--fd); font-stretch: 122%; letter-spacing: .12em; text-transform: uppercase; }
.card > h3 .n { margin-left: auto; color: var(--mut); font: 500 11.5px var(--fm); letter-spacing: .04em; text-transform: none; }
.lbl { color: var(--mut); font: 500 10.5px/1.2 var(--fm); letter-spacing: .14em; text-transform: uppercase; }
.num { font-family: var(--fd); font-stretch: 125%; font-weight: 900; line-height: 1; }
.pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; height: 22px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink2); font: 600 10.5px/1 var(--fm); letter-spacing: .1em; text-transform: uppercase; }
.pill.acc { border-color: color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); }
.pill.w { border-color: rgba(61,220,151,.4); background: rgba(61,220,151,.12); color: var(--win); }
.pill.l { border-color: rgba(255,93,108,.4); background: rgba(255,93,108,.12); color: var(--loss); }
.pill.gold { border-color: rgba(242,212,104,.45); background: rgba(242,212,104,.12); color: var(--gold); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.row { display: flex; align-items: center; gap: 14px; } .sp { margin-top: 20px !important; } .sp2 { margin-top: 38px !important; }
.sec { display: flex; align-items: flex-end; gap: 16px; margin: 0 0 18px; }
.sec .hd { font-size: 30px; } .sec .more { margin-left: auto; color: var(--acc); font: 800 12px var(--fd); font-stretch: 115%; letter-spacing: .14em; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink2); font: 700 12px/1 var(--fd); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; }
.chip.on { background: var(--grad); color: var(--on); border-color: transparent; }
.chip img { height: 20px; }

/* profilovka z Discordu a logo týmu */
.av { --s: 26px; width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; object-fit: cover;
  color: #fff; font: 800 calc(var(--s) * .42)/1 var(--fd); text-transform: uppercase; box-shadow: 0 0 0 1.5px rgba(255,255,255,.14);
  background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 50) 75% 36%)); }
.av.k2 { background: #1b1c23; color: hsl(var(--h) 85% 66%); }
.av.k3 { background: hsl(var(--h) 55% 82%); color: hsl(var(--h) 60% 22%); }
.av.k4 { background: conic-gradient(from 210deg, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 120) 80% 55%), hsl(var(--h) 80% 55%)); }
/* logo týmu samo, bez podkladu; čtvereček se zkratkou zůstane jen tam, kde se obrázek nenačte */
.tl { --s: 28px; width: var(--s); height: var(--s); flex: none; position: relative; display: inline-grid; place-items: center; border-radius: 22%;
  background: color-mix(in srgb, var(--c) 24%, #14141a); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.tl b { color: color-mix(in srgb, var(--c) 70%, #fff); font: 800 calc(var(--s) * .30)/1 var(--fd); }
.tl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.tl.ok { background: none; box-shadow: none; } .tl.ok b { display: none; }
.who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .who > span { min-width: 0; }
.who .nm { color: #fff; font: 600 14.5px/1.2 var(--fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; margin-top: 3px; color: var(--mut); font: 500 11px var(--fm); }

/* tabulky */
table.t { width: 100%; border-collapse: collapse; }
.t th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--mut); font: 500 10.5px/1 var(--fm); letter-spacing: .12em; text-transform: uppercase; text-align: right; white-space: nowrap; }
.t td { padding: 9px 10px; border-bottom: 1px solid var(--line2); color: var(--ink2); font: 500 13px/1 var(--fm); text-align: right; white-space: nowrap; }
.t tr:last-child td { border-bottom: 0; }
.t th.l, .t td.l { text-align: left; } .t td.c, .t th.c { text-align: center; }
.t .z { color: var(--dim); } .t .b { color: #fff; font-weight: 700; } .t .hi { color: var(--acc); font-weight: 700; }
.t .pos { color: var(--win); } .t .neg { color: var(--loss); }
.t td.rk { width: 34px; color: var(--mut); font: 800 13px var(--fd); font-stretch: 115%; text-align: left; }
.fm { display: inline-flex; gap: 4px; } .fm i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; font: 700 10px/1 var(--fm); font-style: normal; }
.fm .w { background: rgba(61,220,151,.16); color: var(--win); } .fm .l { background: rgba(255,93,108,.16); color: var(--loss); }

/* ── úvod ── */
.hero { display: grid; grid-template-columns: 1fr 652px; gap: 40px; align-items: center; min-height: 736px; padding: 0; }
.hero .hd { font-size: 66px; }
.hero .lead { margin-top: 30px; }
.facts { display: flex; gap: 54px; margin-top: 54px; } .facts .num { font-size: 36px; } .facts .lbl { margin-top: 10px; }
.panels { display: grid; grid-template-columns: 246px 246px 132px; gap: 14px; height: 652px; }
.pn { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 14px 28px; overflow: hidden; text-align: center; background: linear-gradient(172deg, #111 8%, var(--pc) 100%); }
.pn::before, .pn .ln { content: ""; width: 120px; height: 4px; background: var(--pl); flex: none; }
.pn .ln { background: #0a0a0a; margin-top: 22px; }
.pn .logo { height: 170px; margin-top: 82px; }
.pn .f { margin-top: 44px; display: grid; gap: 15px; font: 600 12px/1 var(--fd); font-stretch: 115%; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.pn .f b { color: #fff; font-weight: 800; }
.pn .cta { margin-top: auto; color: #fff; font: 800 13px/1 var(--fd); font-stretch: 118%; letter-spacing: .16em; }
.pn.lgp { --pc: #42004c; --pl: #ea0d73; } .pn.pgp { --pc: #0051a5; --pl: #72e2d3; }
body.frost .pn.lgp { --pc: #1f2a40; --pl: #9cc8ff; }      /* ocelová, ať se neplete se sytě modrým panelem PUGs */
.pn.asp { --pc: #e2c660; --pl: #f2d468; background: linear-gradient(172deg, #1c1a12 6%, #e2c660 100%); }
.pn.asp::before, .pn.asp .ln { width: 80px; } .pn.asp .logo { height: 150px; margin-top: 92px; }
.pn.asp .nm { margin-top: 34px; color: var(--gold); font: 900 13px/1.5 var(--fd); font-stretch: 120%; letter-spacing: .08em; }
.pn.asp .cta { color: #15130a; font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }

/* karta zápasu (výsledky, rozpis) */
.mc { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 18px; }
.mc .meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.mc .meta .lbl { margin-right: auto; }
.mc .side { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; } .mc .side.r { flex-direction: row-reverse; text-align: right; }
.mc .side span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc .sc { font-size: 24px; letter-spacing: .02em; } .mc .sc i { color: var(--dim); font-style: normal; margin: 0 5px; }
.mc .lose { color: var(--mut); }

/* žebříček PUGs — řádky jako karty, velké MMR */
.lb { display: grid; grid-template-columns: 60px 1fr 250px 330px 150px; align-items: center; height: 60px; margin-bottom: 10px; padding: 0 24px 0 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); position: relative; }
.lb .rk { text-align: center; color: var(--mut); font: 900 20px var(--fd); font-stretch: 125%; }
.lb .nm { font: 800 18px var(--fd); font-stretch: 116%; color: #fff; }
.lb .rec { color: var(--ink2); font: 500 13px var(--fm); } .lb .rec b { color: #fff; }
.lb .wr { display: flex; align-items: center; gap: 12px; color: var(--win); font: 600 12.5px var(--fm); }
.lb .wr u { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); position: relative; overflow: hidden; }
.lb .wr u s { position: absolute; left: 0; top: 0; bottom: 0; background: var(--win); border-radius: 2px; }
.lb .mmr { text-align: right; font-size: 30px; }
.lb.t1::before, .lb.t2::before, .lb.t3::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--edge); }
.lb.t1 { --edge: #70f0cc; } .lb.t2 { --edge: #c8c8d0; } .lb.t3 { --edge: #e09650; }
.lb.t1 .rk, .lb.t2 .rk, .lb.t3 .rk { color: var(--edge); }

/* tabule zápasu */
.board { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px 34px 28px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ca) 26%, transparent), rgba(255,255,255,.03) 38%, rgba(255,255,255,.03) 62%, color-mix(in srgb, var(--cb) 26%, transparent)); }
.board::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ca) 50%, var(--cb) 50%); }
.board .meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.board .tm { display: flex; align-items: center; gap: 18px; font: 800 30px/1 var(--fb); } .board .tm.r { flex-direction: row-reverse; }
.board .res { text-align: center; padding: 0 40px; } .board .res .num { font-size: 68px; } .board .res .num i { font-style: normal; color: var(--dim); margin: 0 10px; }
.cmp { display: grid; grid-template-columns: 54px 1fr 54px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); font: 600 13px var(--fm); }
.cmp:last-child { border: 0; }
.cmp .mid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: relative; padding-top: 18px; }
.cmp .mid em { position: absolute; left: 0; right: 0; top: 0; text-align: center; color: var(--ink2); font: 500 11.5px var(--fb); font-style: normal; }
.cmp .mid u, .cmp .mid s { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); position: relative; display: block; }
.cmp .mid u::after, .cmp .mid s::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--w); border-radius: 3px; }
.cmp .mid u::after { right: 0; background: var(--ca); transform-origin: right; animation: growx .9s var(--e) both; animation-delay: var(--d, 0s); }
.cmp .mid s::after { left: 0; background: var(--cb); transform-origin: left; animation: growx .9s var(--e) both; animation-delay: var(--d, 0s); }
.cmp .rv { text-align: right; } .cmp .dimv { color: var(--mut); }
.star { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.025); }
.star .no { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.07); font: 800 13px var(--fd); }
.star:first-of-type .no { background: var(--gold); color: #141414; }
.star .st { margin-left: auto; color: var(--ink2); font: 500 12px var(--fm); }

/* hlavička týmu / hráče */
.headc { position: relative; display: flex; align-items: center; gap: 24px; padding: 26px 30px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(255,255,255,.03) 55%); }
.headc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.headc h1 { margin: 6px 0 0; font: 800 40px/1 var(--fb); }
.headc .big { margin-left: auto; display: flex; gap: 0; } .headc .big > div { padding: 0 28px; border-left: 1px solid var(--line); text-align: right; } .headc .big .num { font-size: 40px; } .headc .big .lbl { margin-top: 10px; }
.sg { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 18px 14px; } .sg .num { font-size: 26px; margin-top: 8px; } .sg .v { margin-top: 8px; font: 700 20px/1 var(--fb); color: #fff; }

/* pavouk play-off */
.br { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 46px; align-items: center; }
.br .col { display: grid; gap: 18px; } .br h4 { margin: 0 0 4px; text-align: center; color: var(--mut); font: 800 12px var(--fd); font-stretch: 118%; letter-spacing: .2em; }
.ser { position: relative; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 6px 0; }
.ser .lbl { padding: 8px 16px 6px; display: flex; justify-content: space-between; }
.ser .rw { display: flex; align-items: center; gap: 11px; padding: 8px 16px; font-weight: 600; } .ser .rw .num { margin-left: auto; font-size: 20px; }
.ser .rw.out { color: var(--mut); } .ser .rw.out .num { color: var(--dim); } .ser .rw.win .num { color: var(--acc); }
.ser.next { border-style: dashed; } .ser.live { border-color: rgba(255,80,95,.5); }
.br .col:not(:last-child) .ser::after { content: ""; position: absolute; right: -24px; top: 50%; width: 23px; height: 1px; background: var(--line); }

/* přehrávač */
.viewer { position: relative; width: 100%; aspect-ratio: 1440 / 810; overflow: hidden; background: #000; }
.viewer img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

/* ── animace ── */
@keyframes up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sheen { from { transform: translateX(-340%) skewX(-24deg); } to { transform: translateX(470%) skewX(-24deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,70,88,.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255,70,88,0); } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-34px, 26px); } }
.a-up { animation: up .75s var(--e) both; animation-delay: var(--d, 0s); }
.a-rise { animation: rise .95s var(--e) both; animation-delay: var(--d, 0s); }
.a-fade { animation: fade .9s ease both; animation-delay: var(--d, 0s); }
.a-grow { transform-origin: left; animation: growx .7s var(--e) both; animation-delay: var(--d, 0s); }
.bg i { animation: drift 9s ease-in-out infinite alternate; }
.sheen { position: relative; overflow: hidden; }
.sheen::after { --d: var(--sd, 1.3s); content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent); transform: translateX(470%) skewX(-24deg);
  animation: sheen 1.15s ease both; animation-delay: var(--d); }
/* nehybný snímek = konečný stav; krokování = animace zastavené v čase --t (na výrobu GIFů) */
body.still *, body.still *::before, body.still *::after { animation: none !important; }
body.scrub *, body.scrub *::before, body.scrub *::after { animation-play-state: paused !important; animation-delay: calc(var(--d, 0s) - var(--t, 0s)) !important; animation-iteration-count: 1 !important; }

/* doplňky jednotlivých stránek */
.tc { border-top: 3px solid var(--c); padding: 18px 18px 16px; } .tc .nm { font: 700 16px/1.2 var(--fb); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc .st { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line2); } .tc .st b { display: block; margin-top: 7px; font: 700 16px var(--fm); color: #fff; } .tc .st b.hi { color: var(--acc); }
.ldr { display: flex; align-items: center; gap: 14px; padding: 18px; } .ldr .nm { margin-top: 5px; font: 700 17px/1.1 var(--fb); color: #fff; } .ldr .num { margin-left: auto; font-size: 30px; }
.cnt { padding: 22px 24px; } .cnt .num { font-size: 40px; } .cnt .lbl { margin-top: 12px; color: var(--acc); }
.pt { padding: 14px 16px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(255,255,255,.02); } .pt.won { border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.05); }
#end { position: relative; z-index: 99; height: 2px; background: #00ff01; }
.pm .num, .pm .lbl { white-space: nowrap; }
.g2 > *, .g3 > *, .g4 > * { min-width: 0; }