/* HOKEJ na wersji testowej — układ pierwszego podglądu, wygląd typowi (zmienne z typowi/tokeny.css,
   więc skórka TYPOWI/TYPOWA działa sama) + zamrożone brzegi strony jak tafla lodowiska (16.10.2026). */

/* ——— SZRON NA BRZEGACH ——— jak zamarznięta szyba (16.10.2026): matowa mgiełka przy krawędzi ekranu
   i lodowe „pióra” wrastające w stronę treści, rzednące ku środkowi. Tekstura: szron.webp (ciemna skórka),
   szron_jasny.webp (TYPOWA); generator: szron_generator.py. Leży pod treścią, nie łapie kliknięć. */
.hk-lod{position:fixed;top:0;bottom:0;width:clamp(30px,calc((100vw - 1180px) / 2 + 60px),300px);pointer-events:none;z-index:-1;
  background:url("/hokej/szron.webp") left top/420px 1600px repeat-y;opacity:.9}
.hk-lod-l{left:0}
.hk-lod-p{right:0;transform:scaleX(-1);background-position:left 700px}
[data-motyw="ona"] .hk-lod{background-image:url("/hokej/szron_jasny.webp");opacity:1}
/* szron od góry — ta sama tekstura co boki, obrócona (krawędź u góry, pióra rosną w dół) */
.hk-sople{position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:0;height:clamp(90px,12vw,190px);pointer-events:none;z-index:-1;
  background:url("/hokej/szron_gora.webp") left top/auto 100% repeat-x;opacity:.6;
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
[data-motyw="ona"] .hk-sople{background-image:url("/hokej/szron_gora_jasny.webp");opacity:.85}
body{position:relative}
header.top{box-shadow:0 1px 0 color-mix(in srgb,#e9f7ff 60%,transparent),0 4px 14px color-mix(in srgb,#9fd8f7 25%,transparent)}
@media(max-width:820px){.hk-lod{width:14px;background-size:210px 800px}.hk-sople{height:64px}.hk-tytul{margin-top:36px}}
main.wrap{position:relative;z-index:1;display:flow-root}
header.top,footer.foot{position:relative;z-index:2}

/* ——— TYTUŁ ——— */
.hk-tytul{margin-top:clamp(40px,4.5vw,64px);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hk-tytul h1{margin:0;background:linear-gradient(180deg,var(--tx) 0%,var(--tx) 55%,color-mix(in srgb,#9fd6f7 70%,var(--tx)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hk-tytul .hk-liga{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--akcent);border:1px solid var(--akcent);
  border-radius:20px;padding:3px 10px}
.hk-sub{color:var(--mut);margin:12px 0 18px;max-width:760px}
.flabel{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:2px 0 6px;display:block}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{border:1px solid var(--line);background:var(--panel);color:var(--tx);padding:6px 12px;border-radius:20px;cursor:pointer;font-size:13px;user-select:none;transition:.12s}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--acc);color:var(--btn-tx);border-color:var(--acc);font-weight:600}
.chip .ile{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--mut)}
.chip.on .ile{color:var(--btn-tx);opacity:.8}
.chip.pusty{opacity:.42;cursor:default}
.prob{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}

/* ——— MECZ ——— karta jak panele typowi, mecz od razu rozwinięty */
.hk-mecz{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px;margin:16px 0;position:relative;overflow:hidden}
.hk-mecz::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--akcent)}
.hk-mg{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.hk-cz{font-size:11px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.hk-mg h2{margin:0;color:var(--tx);font-size:20px;line-height:1.25;text-transform:none;letter-spacing:-.01em}
.hk-typ{margin:4px 0 10px}
.hk-typ .hk-r{display:inline-flex;gap:14px;border-color:var(--gold);background:color-mix(in srgb,var(--gold) 9%,var(--panel2))}
.hk-naj{margin:0 0 10px}
.hk-naj .chip{font-size:12.5px}
.hk-zakl{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px;padding-top:12px;border-top:1px dashed var(--line)}
.hk-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px}
.hk-r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);transition:border-color .12s,background .12s;font-size:13.5px}
.hk-r:hover{border-color:var(--gold)}
.hk-r.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,transparent);box-shadow:inset 0 0 0 1px var(--gold)}
.zaw{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 14px}
.zaw th{font-size:11px;color:var(--mut);font-weight:600;text-align:right;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.zaw th:first-child,.zaw td:first-child{text-align:left}
.zaw td{padding:4px 6px;border-bottom:1px solid var(--line);text-align:right}
.zaw td.k{font-family:var(--mono);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:6px}
.zaw td.k:hover{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.zaw td.k.on{background:color-mix(in srgb,var(--gold) 22%,transparent);box-shadow:inset 0 0 0 1px var(--gold)}
.zaw-dr{font-size:12px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:10px 0 2px}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.hk-pusto{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--mut)}
#hkLista{padding-bottom:150px}

/* ——— KUPON ——— */
#hkKupon{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--glass-strong);backdrop-filter:blur(8px);
  border-top:2px solid var(--akcent);padding:10px clamp(14px,2.4vw,32px);max-height:42vh;overflow:auto;box-shadow:var(--shadow-soft)}
#hkKupon .w{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:6px;font-size:13px}
#hkKupon .razem{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
#hkKupon .razem .prob{font-size:22px;color:var(--akcent)}
#hkKupon .czysc{cursor:pointer;color:var(--mut);border:1px solid var(--line);border-radius:16px;padding:3px 12px;font-size:12px}
#hkKupon .czysc:hover{border-color:var(--warn);color:var(--warn)}
@media(max-width:820px){
  .hk-mecz{padding:14px 12px}
  .hk-siatka{grid-template-columns:1fr}
}

/* ——— MOŻE BETBUILDER (20.10.2026) ——— ten sam kafelek co w piłce (typy.php: .bb) */
.bb{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 7%,transparent)}
.bb-tyt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);font-weight:800;margin-bottom:8px}
.bb-poz{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:5px 0}
.bb-poz+.bb-poz{border-top:1px solid var(--line)}
.bb-nazwa{flex:1 1 220px;font-size:13.5px}
.bb-nazwa i{color:var(--mut);font-style:normal;padding:0 2px}
.bb-p{font-weight:800}
.bb-k{color:var(--acc2);font-size:12.5px;font-variant-numeric:tabular-nums;cursor:help}
.bb-razem{font-size:12px;color:var(--acc2);font-variant-numeric:tabular-nums;cursor:help}
.bb-dodaj{margin:0;padding:5px 12px;min-height:0;border-radius:16px;background:var(--gold);color:var(--btn-tx);border:0;box-shadow:none;
  text-transform:none;letter-spacing:0;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;width:auto}
.bb-dodaj:hover{filter:brightness(1.08);background:var(--gold);color:var(--btn-tx)}
.bb-info{margin-top:8px;font-size:11px;color:var(--mut);line-height:1.5}
@media(max-width:620px){.bb-poz{gap:6px 10px}.bb-nazwa{flex:1 1 100%}}
/* ——— KREATOR ZESTAWÓW ——— style kr-* są w typowi/aplikacja.css (wspólne z piłką) */
#hkKreator{margin:14px 0 4px}

/* ——— POZIOM LIGI (27.10.2026) ——— */
.hk-poziom{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--mut);font-size:10.5px;font-weight:700;letter-spacing:.04em;cursor:help;vertical-align:1px}
.hk-poziom.hk-przewaga{border-color:var(--gold);color:var(--gold)}

/* ——— SKUTECZNOŚĆ (28.10.2026) ——— skutecznosc.php + skutecznosc_hokej.js */
.sk-kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:12px 0 20px}
.sk-kafel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;position:relative;overflow:hidden}
.sk-kafel::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--akcent)}
.sk-tyt{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.sk-opis{font-size:12px;color:var(--mut);margin:2px 0 10px;min-height:2.6em}
.sk-liczby{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13px}
.sk-liczby .prob{font-size:20px}
.sk-strz{color:var(--mut)}
.sk-n{font-size:11.5px;color:var(--mut);margin-top:6px}
.sk-werdykt{font-size:12px;font-weight:700;margin-top:6px;color:var(--mut)}
.sk-werdykt.sk-dobrze{color:var(--ok,#3fb950)}
.sk-werdykt.sk-zle{color:var(--warn)}
.sk-pusto{font-size:12.5px;color:var(--mut)}
.sk-h2{font-size:15px;margin:22px 0 4px;text-transform:none;letter-spacing:0}
.sk-od{margin:4px 0 0;font-size:13px}
.sk-kal td.sk-pasek{width:32%;min-width:120px}
.sk-ram{position:relative;height:14px;display:flex;align-items:center}
.sk-pasek .sk-w{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--akcent) 70%,transparent)}
.sk-pasek .sk-w.sk-poza{background:var(--warn)}
.sk-pasek .sk-o{position:absolute;top:0;bottom:0;width:2px;background:var(--tx);margin-left:-1px}
.sk-ost td{vertical-align:top;text-align:left;font-size:12.5px;line-height:1.55}
.sk-ost th{text-align:left}
.sk-tak{color:var(--ok,#3fb950);font-weight:800}
.sk-nie{color:var(--warn);font-weight:800}
.sk-et{display:none;color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.hk-link-sk{font-size:12.5px;font-weight:700;color:var(--akcent);text-decoration:none;border:1px solid var(--akcent);border-radius:20px;padding:3px 10px}
@media(max-width:620px){
  .sk-ost thead{display:none}
  .sk-ost tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .sk-ost td{display:block;border:0;padding:2px 0}
  .sk-ost td:empty{display:none}
  .sk-opis{min-height:0}
  .sk-et{display:block;margin-top:4px}
}

/* ——— FILTRY I LIGI Z BOKU JAK W TYPACH PIŁKI (31.10.2026) ———
   Style pól kopiowane z typy.php (tam są w <style> strony, nie w aplikacja.css);
   panel lig (.z-panelem, .kraje, .kraje-belka) bierze się z typowi/aplikacja.css. */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.ctl-dni{flex:1 1 100%;order:-1}
.ctl-dni .filters{margin:0}
.ctl-dni .dni-info{margin:8px 0 0}
.dni-info{font-size:12.5px;line-height:1.5}
.ctl label{display:block;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.suwak{min-width:190px;flex:1}.suwak input[type=range]{width:100%;accent-color:var(--acc)}
.controls select{width:auto;min-width:140px;padding:9px 10px;font-size:14px}
.controls input[type=number]{width:110px;padding:9px 10px;font-size:14px}
.controls-dni{margin-bottom:4px}
.grid{display:block}
.lewa{min-width:0}
.podsum-typy{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:-6px 0 14px;font-size:12.5px}
.podsum-typy a{border-bottom:1px solid var(--line2)}
.podsum-typy a:hover{color:var(--acc2);border-color:var(--acc)}
.filtry-blok{margin:0 0 12px}
.filtry-pasek{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rodz-otw{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 12px;min-height:0;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:none;
  text-transform:none;letter-spacing:0;font:inherit;font-size:13px;color:var(--tx);cursor:pointer;width:auto}
.rodz-otw:hover{background:var(--panel2);border-color:var(--acc);color:var(--tx)}
.rodz-otw[aria-expanded="true"] .rodz-strz{transform:rotate(180deg)}
.rodz-strz{display:inline-block;transition:transform .15s ease;color:var(--mut)}
.rodz-ile{font-family:var(--mono);font-size:11px;color:var(--acc2)}
.rodz-otw.ma-wybor{border-color:var(--acc);color:var(--tx-mocny)}
.rodz-otw.filtr-otw{border-color:var(--acc);color:var(--tx-mocny);font-weight:700;padding:8px 16px;font-size:14px}
.rodz-otw.filtr-otw:hover{background:var(--acc);color:var(--btn-tx)}
.rodz-otw.filtr-otw .rodz-strz{color:inherit}
#hkFiltryPanel{margin-top:10px}
.grupy .chip{font-size:12.5px}
.hk-pas .flabel{color:var(--acc2)}
.hk-mecz:first-child{margin-top:0}
#hkKreator:empty{display:none}
#hkKreator{margin-top:0}
@media(max-width:900px){#hkKupon{bottom:56px;max-height:36vh}}