/* FanZone.pl — /sklep/kategorie/ : drzewo kategorii "Tablica taktyczna" (klasy fk-*).
   Ładowany ze szablonu strony (szablon/fanzone-kategorie.php); wspólny motyw serwisu: tema.css (zmienne --fz-*). */
.fk{--g:var(--fz-g);--gh:var(--fz-g-hi);--glow:var(--fz-glow);--line:var(--fz-line);--line2:var(--fz-line2);--mute:var(--fz-mute);--ink:var(--fz-ink);
  --bg:var(--fz-bg);--card:var(--fz-card);--serif:var(--fz-serif);--mono:var(--fz-mono);--ease:var(--fz-ease);--ind:46px;--pin:24px;
  position:relative;color:var(--ink);font-family:var(--mono)}
.fk *,.fk *::before,.fk *::after{box-sizing:border-box}
.fk ul,.fk ol{list-style:none;margin:0;padding:0}
.fk h1,.fk p,.fk dl,.fk dd,.fk dt{margin:0}
.fk a{color:inherit;text-decoration:none}
.fk img{display:block;max-width:100%}
.fk [hidden]{display:none!important}
.fk :focus-visible{outline:2px solid var(--gh);outline-offset:2px;border-radius:6px}

/* ---------- nagłówek ---------- */
.fk-head{padding:clamp(10px,2vw,26px) 0 clamp(22px,3vw,40px);max-width:880px}
.fk-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gh);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.fk-eyebrow::before{content:"";width:34px;height:1px;background:var(--gh)}
.fk .fk-head h1{font-family:var(--serif);font-weight:300;font-variation-settings:"opsz" 144;font-size:clamp(40px,7vw,96px);line-height:.96;letter-spacing:-.03em;margin:0 0 .28em}
.fk .fk-head h1 em{font-style:italic;font-weight:600;color:var(--gh);text-shadow:0 0 36px var(--glow),0 0 90px rgba(110,180,64,.35)}
.fk-lead{font-size:15px;line-height:1.7;color:var(--mute);max-width:62ch}
.fk-stats{display:flex;flex-wrap:wrap;gap:16px clamp(20px,4vw,48px);margin-top:34px}
.fk-stats div{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:1px solid var(--g)}
.fk-stats dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);order:2}
.fk-stats dd{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4vw,46px);line-height:1;letter-spacing:-.02em;color:var(--ink);order:1}

/* ---------- narzędzia ---------- */
.fk-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(20px,3vw,36px)}
.fk-find{flex:1 1 280px;max-width:480px;display:flex;flex-direction:column;gap:6px}
.fk-find label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.fk-find input{width:100%;height:46px;padding:0 14px;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:8px;font:inherit;font-size:15px}
.fk-find input::placeholder{color:var(--mute);opacity:1}
.fk-find input:hover:not(:disabled){border-color:var(--g)}
.fk-find input:focus-visible{outline:2px solid var(--gh);outline-offset:1px;border-color:var(--g)}
.fk-find input:disabled{opacity:.5}
.fk-btns{display:flex;gap:10px;flex-wrap:wrap}
.fk-btns button{height:46px;padding:0 18px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.fk-btns button:hover:not(:disabled){border-color:var(--g);box-shadow:0 0 18px -4px var(--glow);background:rgba(110,180,64,.08)}
.fk-btns button:disabled{opacity:.45;cursor:default}
.fk-keys{flex:1 1 100%;font-size:12px;line-height:1.9;color:var(--mute)}
.fk-keys kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;font:inherit;font-size:11px;text-align:center;color:var(--ink);background:var(--card)}
.fk:not(.fk-on) .fk-keys{display:none}

/* ---------- plansza: drzewo + karta ---------- */
.fk-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(24px,5vw,72px);align-items:start}
.fk-treewrap{min-width:0}
.fk-path{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:14px;font-size:12px;letter-spacing:.06em;color:var(--mute);min-height:20px}
.fk-path span{text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.fk-path b{font-weight:500;color:var(--gh);overflow-wrap:anywhere}
.fk:not(.fk-on) .fk-path{display:none}
.fk-tree{position:relative}
.fk-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fk-w{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-linecap:round;transition:stroke .2s,opacity .2s}
.fk-w.fk-new{stroke-dasharray:1;stroke-dashoffset:1;animation:fkDraw .7s var(--d,0s) var(--ease) forwards}
.fk-w.fk-wh{stroke:var(--gh);stroke-width:2.25;filter:drop-shadow(0 0 4px var(--glow))}
.fk-hl .fk-w:not(.fk-wh){opacity:.45}
@keyframes fkDraw{to{stroke-dashoffset:0}}

.fk-l{position:relative;z-index:1}
.fk-gw .fk-l{padding-left:var(--ind)}
.fk-l0>.fk-root>.fk-gw>.fk-l1{padding-left:var(--ind)}
.fk-n{position:relative}
.fk-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:3px 0}
.fk-pin{position:relative;flex:none;width:var(--pin);height:var(--pin);display:grid;place-items:center}
.fk-dot{width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--line2);transition:border-color .2s,background .2s,box-shadow .2s}
.fk-dot--ball{width:var(--pin);height:var(--pin);border:0;background:none;filter:drop-shadow(0 0 8px var(--glow))}
.fk-dot--ball svg{width:100%;height:100%}
.fk-on .fk-p:not(.fk-root)>.fk-row .fk-dot{display:none}
.fk-tg{position:relative;width:var(--pin);height:var(--pin);padding:0;border-radius:50%;border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s,box-shadow .2s,transform .3s var(--ease)}
.fk-tg::after{content:"";position:absolute;inset:-12px} /* większy cel dotyku */
.fk-pm{position:relative;width:10px;height:10px}
.fk-pm::before,.fk-pm::after{content:"";position:absolute;left:0;right:0;top:4.25px;height:1.5px;background:currentColor;border-radius:1px;transition:transform .3s var(--ease)}
.fk-pm::after{transform:rotate(90deg)}
.fk-open>.fk-row .fk-pm::after{transform:rotate(0)}
.fk-tg:hover{border-color:var(--g);box-shadow:0 0 14px -2px var(--glow)}
.fk-open>.fk-row .fk-tg{border-color:var(--g);color:var(--gh)}

.fk-a{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;padding:6px 12px 6px 8px;border-radius:10px;border:1px solid transparent;transition:background .2s,border-color .2s,transform .3s var(--ease)}
.fk-th{flex:none;width:40px;height:40px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#0e1a10;display:grid;place-items:center}
.fk-th img{width:100%;height:100%;object-fit:cover}
.fk-th b{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--gh)}
.fk-nm{flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.35;overflow-wrap:anywhere}
.fk-c{flex:none;font-size:12px;letter-spacing:.04em;color:var(--mute);padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s}
.fk-no{flex:none;font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--gh);width:24px}
.fk-l1>.fk-n>.fk-row .fk-th{width:52px;height:52px;border-radius:10px}
.fk-l1>.fk-n>.fk-row .fk-nm{font-family:var(--serif);font-weight:300;font-size:clamp(21px,2.4vw,28px);letter-spacing:-.015em;line-height:1.15;font-variation-settings:"opsz" 72}
.fk-l1>.fk-n>.fk-row{min-height:66px}
.fk-root>.fk-row .fk-nm{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.015em;font-variation-settings:"opsz" 72}

/* hover / focus / ścieżka */
.fk-a:hover,.fk-hot>.fk-row .fk-a{background:rgba(110,180,64,.09);border-color:rgba(110,180,64,.32)}
.fk-a:hover .fk-c,.fk-hot>.fk-row .fk-c{color:var(--gh);border-color:var(--g)}
.fk-hot>.fk-row .fk-dot{border-color:var(--gh);background:var(--g);box-shadow:0 0 12px var(--glow)}
.fk-hot>.fk-row .fk-tg{border-color:var(--gh);box-shadow:0 0 14px -2px var(--glow)}
.fk-a:focus-visible{outline-offset:-1px}
.fk-m>.fk-row .fk-nm{color:var(--gh);text-decoration:underline;text-decoration-color:var(--g);text-underline-offset:4px}
.fk-hide{display:none}

/* zwijanie (animacja wysokości); bez JS wszystko rozwinięte */
.fk-on .fk-gw{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s var(--ease),visibility 0s .4s}
.fk-on .fk-open>.fk-gw{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s var(--ease),visibility 0s}
.fk-on .fk-gw>.fk-l{overflow:hidden;min-height:0}
.fk-instant .fk-gw{transition:none!important}

/* wejście */
.fk-on .fk-l1>.fk-n{animation:fkIn .6s calc(var(--i,0) * 38ms + .1s) var(--ease) backwards}
@keyframes fkIn{from{opacity:0;transform:translateX(-14px)}}

/* ---------- karta (prawa kolumna, tylko desktop) ---------- */
.fk-card{position:sticky;top:calc(var(--fz-hh) + 18px);padding:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 120%,#10230f 0%,var(--card) 60%);isolation:isolate;transition:border-color .3s,box-shadow .3s}
.fk-card.fk-live{border-color:rgba(110,180,64,.45);box-shadow:0 0 40px -14px var(--glow)}
.fk-card__pitch{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.5}
.fk-card__pitch path{fill:none;stroke:rgba(238,243,234,.16);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-width:1}
.fk-card__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gh);margin-bottom:16px}
.fk-card__img{width:180px;height:180px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--line2);background:#0e1a10;overflow:hidden;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(110,180,64,.06),0 0 40px -8px var(--glow)}
.fk-card__img img{width:100%;height:100%;object-fit:cover;animation:fkPop .45s var(--ease)}
.fk-card__img svg{width:96px;height:96px}
.fk-card__img b{font-family:var(--serif);font-weight:300;font-size:80px;color:var(--gh);line-height:1}
@keyframes fkPop{from{opacity:0;transform:scale(.9)}}
.fk-card__nm{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:-.02em;text-align:center;margin-bottom:10px;overflow-wrap:anywhere}
.fk-card__path{font-size:12px;line-height:1.6;color:var(--mute);text-align:center;margin-bottom:14px;overflow-wrap:anywhere}
.fk-card__meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;font-size:12px;margin-bottom:18px}
.fk-card__meta span{padding:4px 11px;border:1px solid var(--line2);border-radius:999px;color:var(--ink)}
.fk-card__go{text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gh)}
.fk:not(.fk-on) .fk-card{display:none}
.fk:not(.fk-on) .fk-board{grid-template-columns:minmax(0,1fr)}

.fk-empty{padding:24px 0;color:var(--mute);font-size:14px}

/* ---------- telefon / tablet ---------- */
@media (max-width:960px){
  .fk-board{grid-template-columns:minmax(0,1fr)}
  .fk-card{display:none}
}
@media (max-width:640px){
  .fk{--ind:24px;--pin:26px}
  .fk-row{gap:8px;min-height:52px}
  .fk-a{gap:9px;padding:6px 8px 6px 6px}
  .fk-th{width:36px;height:36px}
  .fk-l1>.fk-n>.fk-row .fk-th{width:44px;height:44px}
  .fk-nm{font-size:14px}
  .fk-l1>.fk-n>.fk-row .fk-nm{font-size:20px}
  .fk-no{display:none}
  .fk-btns{width:100%}
  .fk-btns button{flex:1 1 0;padding:0 10px}
  .fk-find{max-width:none}
  .fk-keys{display:none}
  .fk-c{font-size:11.5px;padding:2px 8px}
}

@media (prefers-reduced-motion:reduce){
  .fk *,.fk *::before,.fk *::after{animation:none!important;transition:none!important}
  .fk-w.fk-new{stroke-dasharray:none;stroke-dashoffset:0}
}
@media (forced-colors:active){
  .fk-w{stroke:CanvasText}.fk-w.fk-wh{stroke:Highlight}
  .fk-a:hover,.fk-hot>.fk-row .fk-a{border-color:Highlight}
}