:root{--bg:#0e1116;--panel:#171c25;--line:#2a3140;--text:#f2f3f5;--muted:#9aa1ae}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Roboto,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:Heebo,Arial,sans-serif;line-height:1.2;margin:0 0 .5em}
.wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 18px}
header.bar{border-bottom:1px solid var(--line);background:#0b0e13}
header.bar .wrap{display:flex;align-items:center;gap:14px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font:800 1.2rem Heebo,Arial,sans-serif}
.brand img{height:40px;width:auto;border-radius:4px}
.brand:hover{text-decoration:none}
.sp{flex:1}
.who{color:var(--muted);font-size:.9rem}
main{flex:1;padding:28px 0 48px}
footer.foot{border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;padding:16px 0;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:4px;padding:11px 22px;font:700 .95rem Roboto,Arial,sans-serif;cursor:pointer}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.sm{padding:6px 14px;font-size:.85rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px;margin-bottom:18px}
.card.narrow{max-width:460px;margin:20px auto}
label{display:block;margin:12px 0 4px;font-size:.9rem;color:var(--muted)}
input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:6px;padding:11px 12px;font:inherit}
input:focus{outline:2px solid var(--acc);border-color:transparent}
.err{background:#3a1519;border:1px solid #6b2a31;color:#ffb4ba;padding:10px 14px;border-radius:6px;margin:0 0 14px}
.okm{background:#12301f;border:1px solid #1f6b42;color:#a5f0c5;padding:10px 14px;border-radius:6px;margin:0 0 14px}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.ev{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;color:var(--text);transition:transform .2s,border-color .2s}
.ev:hover{transform:scale(1.02);border-color:var(--acc);text-decoration:none}
.ev .img{aspect-ratio:16/9;background:#0b0e13 center/cover no-repeat}
.ev .b{padding:14px 16px}
.ev h3{font-size:1.1rem;margin:0 0 4px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.78rem;font-weight:700;background:#222a38;color:var(--muted)}
.pill.live{background:#d11a2a;color:#fff}.pill.ok{background:#12301f;color:#a5f0c5}
.hero{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:22px}
@media(min-width:800px){.hero.two{grid-template-columns:1.1fr 1fr}}
.poster{width:100%;border-radius:8px;border:1px solid var(--line);display:block;background:#0b0e13}
.teams{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0;text-align:center;flex-wrap:wrap}
.teams .t{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:700;min-width:100px}
.teams img{height:72px;width:auto;max-width:120px;object-fit:contain}
.teams .vs{font:800 1.3rem Heebo,Arial,sans-serif;color:var(--muted)}
.price{font:800 1.8rem Heebo,Arial,sans-serif}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;border:1px solid var(--line);margin-bottom:18px}
.player video{width:100%;height:100%;display:block;background:#000}
.player .msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(0,0,0,.72);font-weight:700}
.player .msg[hidden]{display:none}
.player.hasposter .msg{background:rgba(0,0,0,.38)}
.cd{font:800 2rem Heebo,Arial,sans-serif;letter-spacing:.02em}
.desc{white-space:pre-line}

.hero2{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-bottom:22px;background:#0b0e13 center/cover no-repeat;text-align:center}
.hero2::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,14,19,.55),rgba(11,14,19,.92))}
.hero2 .in{position:relative;padding:36px 20px 40px}
.hero2 h1{font-size:clamp(1.5rem,4vw,2.4rem);margin:6px 0 4px}
.hero2 .when{font:700 1.15rem Heebo,Arial,sans-serif;color:#fff;margin:6px 0 4px}
.hero2 .teams{margin:18px 0 8px;gap:clamp(14px,5vw,56px)}
.hero2 .teams img{height:clamp(84px,18vw,150px);max-width:200px}
.hero2 .teams .t{font:800 clamp(1rem,2.6vw,1.5rem) Heebo,Arial,sans-serif;text-transform:uppercase}
.hero2 .teams .vs{font-size:clamp(1.3rem,3vw,2rem)}
.hero2 .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.hero2 .btn.big{padding:15px 34px;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.hero2 .cd{margin-top:14px}
.hero2 .price{margin-top:14px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.info h3{font-size:1.05rem}
.info ul{margin:0;padding-left:18px;color:var(--muted)}

.hero2.flat{background:var(--panel)}.hero2.flat::before{display:none}

.hero2.flat .in{padding:18px 20px 20px}
.hero2.flat h1{font-size:clamp(1.3rem,3vw,1.7rem);margin:0 0 2px}
.hero2.flat .when{margin:2px 0}
.hero2.flat .cd{font-size:1.25rem;margin-top:6px}
.hero2.flat .cta{margin-top:12px}
.hero2.flat .btn.big{padding:12px 28px;font-size:.95rem}
.hero2.flat .okm{margin-top:8px!important}

/* Slider wydarzenia: aktualne wydarzenie + miniatury kolejnych */
body{overflow-x:hidden}
.hero3{width:calc(100vw - var(--sb,0px));margin:-28px 0 22px calc(50% - 50vw + var(--sb,0px)/2);border-radius:0;border-left:0;border-right:0;min-height:clamp(420px,44vw,660px);display:flex;align-items:flex-end;justify-content:center}
.hero3::before{display:none}
.hero3 .sl::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,14,19,.95) 0%,rgba(11,14,19,.62) 45%,rgba(11,14,19,.12) 78%)}
.hero3 .slides{position:absolute;inset:0;z-index:0}
.hero3 .sl{position:absolute;inset:0;background:#0b0e13 center/cover no-repeat;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero3 .sl.on{opacity:1;pointer-events:auto}
.hero3 .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px 56px;text-align:center}
.hero3 .cap h2{font-size:clamp(1.6rem,3.6vw,2.6rem);margin:4px 0 14px}
.hero3 .cap .when{font:700 1.1rem Heebo,Arial,sans-serif;color:#dfe3ea}
.hero3 .cap .btn{text-transform:uppercase;letter-spacing:.03em}
.hero3 .in{width:100%;max-width:1000px;padding:60px 18px 56px;z-index:2;transition:opacity .3s}
.hero3.alt .in{opacity:0;pointer-events:none}
.hero3 .sa{position:absolute;top:44%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(11,14,19,.65);color:#fff;font:30px/1 Arial,sans-serif;padding:0 0 3px;cursor:pointer}
.hero3 .sa:hover{background:var(--acc)}.hero3 .sp{left:16px}.hero3 .sn{right:16px}
.hero3 .sd{position:absolute;left:0;right:0;bottom:16px;z-index:3;display:flex;justify-content:center;gap:9px}
.hero3 .sd button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}.hero3 .sd button.on{background:#fff}
.hero3 button:focus-visible,.hero3 a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:700px){.hero3{min-height:420px}.hero3 .sa{display:none}.hero3 .in,.hero3 .cap{padding-bottom:48px}}
@media (prefers-reduced-motion:reduce){.hero3 .sl,.hero3 .in{transition:none}}
details.card summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.card summary::-webkit-details-marker{display:none}
details.card summary h3{margin:0}
details.card summary::after{content:"+";font:700 1.4rem Heebo,Arial,sans-serif;color:var(--muted)}
details.card[open] summary::after{content:"−"}
details.card[open] summary{margin-bottom:10px}

.nx{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:26px}
.nt{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;color:var(--text);transition:transform .2s,border-color .2s}
.nt:hover{transform:translateY(-2px);border-color:var(--acc);text-decoration:none}
.nt .im{display:block;aspect-ratio:16/9;background:#0b0e13 center/cover no-repeat}
.nt .tx{display:flex;flex-direction:column;padding:10px 12px;gap:2px}
.nt .tx b{font:700 .95rem Heebo,Arial,sans-serif;line-height:1.25}
.nt .tx small{color:var(--muted)}

.cols.two{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;align-items:start}
.cols .main>.card:first-child{margin-top:0}
.side h2{margin:0 0 12px;font-size:1.15rem}
.side .nx{grid-template-columns:1fr;margin-bottom:0}
.info{align-items:stretch}.info>.card{margin-bottom:0}
@media(max-width:860px){.cols.two{grid-template-columns:1fr}.side .nx{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}

/* Układ szeroki: opis + rozwijane okna po lewej, kwadratowe miniatury kolejnych wydarzeń po prawej */
.cols.two{width:calc(100vw - var(--sb,0px));margin-left:calc(50% - 50vw + var(--sb,0px)/2);padding:0 clamp(16px,2.2vw,44px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(18px,2.4vw,40px)}
.cols.two .info{grid-template-columns:1fr 1fr;align-items:start}
.cols.two .info>.card{padding:14px 20px}
.side .nx{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.side .nt{position:relative;aspect-ratio:1/1;flex-direction:column;margin:0}
.side .nt .im{position:absolute;inset:0;aspect-ratio:auto;height:100%;width:100%}
.side .nt .tx{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;background:linear-gradient(0deg,rgba(11,14,19,.94),rgba(11,14,19,.55) 60%,transparent)}
.side .nt .tx b{font-size:.95rem}.side .nt .tx small{color:#c3c8d2;font-size:.78rem}
@media(max-width:860px){.cols.two{width:auto;margin-left:0;padding:0;grid-template-columns:1fr}.cols.two .info{grid-template-columns:1fr}.side .nx{grid-template-columns:repeat(2,1fr)}}

.cols.two+p{width:calc(100vw - var(--sb,0px));margin-left:calc(50% - 50vw + var(--sb,0px)/2);padding:0 clamp(16px,2.2vw,44px);box-sizing:border-box}
@media(max-width:860px){.cols.two+p{width:auto;margin-left:0;padding:0}}
/* Dolna krawędź paska (Pomoc/Wymagania) równo z dolną krawędzią kafli */
.cols.two{align-items:stretch}
.cols.two .main{display:flex;flex-direction:column}
.cols.two .main>.card:first-child{flex:1;margin-bottom:18px}
.cols.two .main .info{margin-top:auto}
@media(max-width:860px){.cols.two .main>.card:first-child{flex:none}}
/* Góra opisu równo z górą kafli (nagłówek „Kolejne wydarzenia” wisi nad kaflami) */
.side h2{line-height:22px;height:22px}
.cols.two .main{padding-top:34px}
@media(max-width:860px){.cols.two .main{padding-top:0}}

.nt.soon{border-style:dashed;pointer-events:none}
.nt.soon:hover{transform:none;border-color:var(--line)}
.nt.soon .im{background:repeating-linear-gradient(135deg,#131822,#131822 12px,#161c27 12px,#161c27 24px)}
.nt.soon .tx{background:none;top:0;justify-content:center;align-items:center;text-align:center;padding:12px}
.nt.soon .tx b{font:800 1.3rem Heebo,Arial,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.nt.soon .tx small{color:var(--muted)}
/* Loga drużyn na górze banera (jeśli są) */
.teams-top{position:absolute;top:22px;left:0;right:0;z-index:3;pointer-events:none;transition:opacity .3s}
.teams-top .teams{margin:0;gap:clamp(14px,4vw,48px)}
.teams-top .teams img{height:clamp(56px,7vw,100px);max-width:150px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.teams-top .teams .t{font-size:clamp(.85rem,1.4vw,1.1rem);text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hero3.alt .teams-top{opacity:0}

/* Odtwarzacz: szeroki (do 1280 px), wyśrodkowany względem strony */
.watch{position:relative;left:50%;transform:translateX(-50%);width:min(1280px,calc(100vw - var(--sb,0px) - 32px));box-sizing:border-box}
@media(max-width:700px){.watch{width:calc(100vw - var(--sb,0px) - 24px)}}
.lang-sw{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}.lang-sw a{padding:3px 8px;font-size:12px;font-weight:700;color:var(--muted)}.lang-sw a:hover{text-decoration:none;color:var(--text)}.lang-sw a.on{background:var(--acc);color:#fff}