/* ===== Czysta Gra: typy kibiców na żywo (komponent) ===== */
.cg-live{
  --s:#0d1b12; --card:rgba(255,255,255,.05); --cardline:rgba(255,255,255,.28);
  --t1:#ffffff; --t2:rgba(255,255,255,.72); --t3:rgba(255,255,255,.52); --grid:rgba(255,255,255,.14);
  --jaga:#c98500; --remis:#6f7a74; --rywal:#3987e5; --yel:#FFD100; --redd:#c8102e;
  position:relative; background:var(--s); color:var(--t1); border-radius:28px; margin:0 20px; padding:64px 0 56px;
  font-family:'Outfit',Arial,sans-serif; line-height:1.5;
}
.cg-live *{box-sizing:border-box;}
.cg-live .cg-wrap{max-width:1240px; margin:0 auto; padding:0 28px;}
.cg-live .cg-split{display:grid; grid-template-columns:250px 1fr; gap:40px; align-items:start;}
.cg-live .cg-lbl{font-family:'Roboto Mono',monospace; font-size:.76rem; letter-spacing:3px; text-transform:uppercase; padding-top:8px; color:var(--t2);}
.cg-live .cg-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--redd); margin-right:10px; vertical-align:1px; animation:cgpuls 1.6s ease-in-out infinite;}
@keyframes cgpuls{0%,100%{opacity:1} 50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){ .cg-live .cg-dot{animation:none;} }
.cg-live h2{font-size:clamp(1.8rem,3.6vw,2.8rem); font-weight:600; letter-spacing:-.02em; line-height:1.08; margin:0;}
.cg-live h2 span{color:var(--yel);}
.cg-live .cg-lead{margin-top:14px; font-size:1.05rem; color:var(--t2); max-width:640px;}
.cg-live .cg-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px;}
.cg-live .cg-kpi,.cg-live .cg-card{background:var(--card); border:1px dashed var(--cardline); border-radius:20px;}
.cg-live .cg-kpi{padding:20px 22px;}
.cg-live .cg-kpi b{display:block; font-size:2.6rem; font-weight:600; line-height:1.05; letter-spacing:-.02em;}
.cg-live .cg-kpi span{display:block; margin-top:8px; font-family:'Roboto Mono',monospace; font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--t2);}
.cg-live .cg-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.cg-live .cg-card{padding:24px 24px 22px; margin-top:14px; min-width:0;}
.cg-live .cg-grid2 .cg-card{margin-top:0;}
.cg-live .cg-card h3{font-size:1.1rem; font-weight:600; margin:0;}
.cg-live .cg-sub{font-size:.88rem; color:var(--t2); margin-top:2px;}

/* kto wygra: dzielony pasek wygrana / remis / porażka */
.cg-live .cg-x12{display:flex; gap:2px; height:22px; margin-top:20px;}
.cg-live .cg-x12 i{display:block; height:100%; outline:none;}
.cg-live .cg-x12 i:first-child{border-radius:4px 0 0 4px;}
.cg-live .cg-x12 i:last-child{border-radius:0 4px 4px 0;}
.cg-live .cg-x12 i:hover,.cg-live .cg-x12 i:focus-visible{filter:brightness(1.18);}
.cg-live .cg-legend{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; font-size:.92rem; color:var(--t2);}
.cg-live .cg-legend .k{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px;}
.cg-live .cg-legend b{color:var(--t1); font-weight:600; margin-right:4px;}

/* średni typ */
.cg-live .cg-avg{display:flex; align-items:baseline; justify-content:center; gap:16px; font-size:3.6rem; font-weight:600; line-height:1; margin-top:22px; letter-spacing:-.02em;}
.cg-live .cg-avg em{font-style:normal; color:var(--t3); font-weight:400;}
.cg-live .cg-avgn{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; margin-top:10px; font-family:'Roboto Mono',monospace; font-size:.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--t2);}
.cg-live .cg-avgn span:first-child{text-align:right;} .cg-live .cg-avgn span:last-child{text-align:left;}

/* najczęstsze wyniki */
.cg-live .cg-rows{margin-top:18px; display:grid; gap:9px;}
.cg-live .cg-row{display:grid; grid-template-columns:52px 1fr; align-items:center; gap:12px; outline:none; border-radius:6px;}
.cg-live .cg-row .s{font-family:'Roboto Mono',monospace; font-size:.98rem; color:var(--t1);}
.cg-live .cg-row .tr{display:flex; align-items:center; gap:10px; min-width:0;}
.cg-live .cg-row .b{height:16px; background:var(--jaga); border-radius:0 4px 4px 0; min-width:3px; flex:0 0 auto;}
.cg-live .cg-row .v{font-size:.86rem; color:var(--t2); white-space:nowrap;}
.cg-live .cg-row .v b{color:var(--t1); font-weight:600;}
.cg-live .cg-row:hover .b,.cg-live .cg-row:focus-visible .b{filter:brightness(1.18);}
.cg-live .cg-more{margin-top:14px; font-size:.86rem; color:var(--t3);}

/* histogramy */
.cg-live .cg-hist{position:relative; height:150px; display:flex; align-items:flex-end; gap:2px; margin-top:34px; border-bottom:1px solid var(--grid);}
.cg-live .cg-hist .c{flex:1; height:100%; display:flex; justify-content:center; align-items:flex-end; position:relative; outline:none;}
.cg-live .cg-hist .c i{display:block; width:min(24px,72%); background:var(--jaga); border-radius:4px 4px 0 0;}
.cg-live .cg-hist .c:hover i,.cg-live .cg-hist .c:focus-visible i{filter:brightness(1.18);}
.cg-live .cg-hist .c .top{position:absolute; left:50%; transform:translateX(-50%); margin-bottom:4px; font-size:.8rem; font-weight:600; line-height:1.2; color:var(--t1); white-space:nowrap; padding:0 4px; border-radius:4px; background:#19261e; z-index:2;}
.cg-live .cg-hist.zfakt{margin-top:56px;}
.cg-live .cg-xl{display:flex; gap:2px; margin-top:7px;}
.cg-live .cg-xl span{flex:1; text-align:center; font-family:'Roboto Mono',monospace; font-size:.66rem; color:var(--t3); white-space:nowrap;}
.cg-live .cg-avgline{position:absolute; top:-27px; bottom:0; width:0; border-left:1px solid rgba(255,255,255,.75); pointer-events:none;}
.cg-live .cg-avgline span{position:absolute; top:0; left:7px; font-size:.76rem; color:var(--t1); white-space:nowrap;}
.cg-live .cg-avgline.lft span{left:auto; right:7px;}

/* typy w czasie */
.cg-live .cg-line{margin-top:16px; position:relative;}
.cg-live .cg-line svg{display:block; width:100%; height:auto; overflow:visible;}
.cg-live .cg-line text{font-family:'Roboto Mono',monospace; font-size:10px; fill:rgba(255,255,255,.52);}
.cg-live .cg-line text.end{font-family:'Outfit',Arial,sans-serif; font-size:13px; font-weight:600; fill:#fff;}

/* stopka i tabela */
.cg-live .cg-foot{margin-top:18px; font-size:.84rem; color:var(--t3);}
.cg-live details{margin-top:10px;}
.cg-live summary{cursor:pointer; font-weight:600; font-size:.92rem; color:var(--t2);}
.cg-live .cg-tables{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:12px;}
.cg-live table{width:100%; border-collapse:collapse; font-size:.84rem;}
.cg-live caption{text-align:left; font-weight:600; padding-bottom:6px;}
.cg-live th,.cg-live td{text-align:left; padding:5px 6px; border-bottom:1px solid var(--grid);}
.cg-live td.n{text-align:right; font-variant-numeric:tabular-nums;}

/* dymek */
.cg-live .cg-tip{position:absolute; left:0; top:0; pointer-events:none; background:#fff; color:#0a0a0a; border-radius:10px; padding:8px 12px; font-size:.84rem; line-height:1.35; box-shadow:0 10px 26px rgba(0,0,0,.35); transform:translate(-50%,calc(-100% - 14px)); opacity:0; transition:opacity .12s; z-index:5; white-space:nowrap;}
.cg-live .cg-tip.on{opacity:1;}
.cg-live .cg-tip b{display:block; font-size:1rem; font-weight:600;}
.cg-live .cg-tip span{color:#52514e;}

/* tendencje, archiwum, dymek z wieloma seriami */
.cg-live .cg-delta{margin-top:10px; font-size:.82rem; color:var(--t2);}
.cg-live .cg-mini{margin-top:18px; font-family:'Roboto Mono',monospace; font-size:.66rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--t3);}
.cg-live .cg-mini.cg-c{text-align:center; margin-top:16px;}
.cg-live .cg-fakt{margin-top:12px; font-size:.9rem; color:var(--t1);}
.cg-live .cg-trend{margin-top:8px; position:relative;}
.cg-live .cg-trend svg{display:block; width:100%; height:auto; overflow:visible;}
.cg-live .cg-trend text{font-family:'Roboto Mono',monospace; font-size:10px; fill:rgba(255,255,255,.52);}
.cg-live .cg-trend text.end{font-family:'Outfit',Arial,sans-serif; font-size:12px; font-weight:600; fill:#fff;}
.cg-live .cg-chip{font-size:.7rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:#0a0a0a; background:var(--yel); border-radius:999px; padding:2px 8px; white-space:nowrap;}
.cg-live .cg-row.extra{margin-top:6px; padding-top:9px; border-top:1px solid var(--grid);}
.cg-live .cg-avgline.real{border-left:2px solid var(--yel); top:-50px;}
.cg-live .cg-avgline.real span{color:var(--yel); font-weight:600;}
.cg-live .cg-foot a{color:var(--yel); font-weight:600;}
.cg-live .cg-tip .tt{display:block; font-size:.76rem; color:#52514e; margin-bottom:4px;}
.cg-live .cg-tip .tr{display:flex; align-items:center; gap:8px; line-height:1.5;}
.cg-live .cg-tip .tr i{display:inline-block; width:12px; height:2px; border-radius:1px;}
.cg-live .cg-tip .tr b{display:inline; font-size:.92rem; min-width:34px;}
/* na stronie konkursu: pas raportu nad pasem "Druga szansa", z odstępem; ukryty raport nie zostawia dziury */
.cg-outer > .cg-live{margin-bottom:24px;}
.cg-outer > [hidden]{display:none;}

@media (max-width:900px){ .cg-live .cg-split{grid-template-columns:1fr; gap:16px;} }
@media (max-width:640px){
  .cg-live{margin:0 12px; padding:40px 0 34px; border-radius:22px;}
  .cg-live .cg-wrap{padding:0 16px;}
  .cg-live .cg-kpis{grid-template-columns:1fr 1fr;}
  .cg-live .cg-kpis .cg-kpi:last-child{grid-column:1 / -1;}
  .cg-live .cg-kpi b{font-size:2.1rem;}
  .cg-live .cg-grid2{grid-template-columns:1fr;}
  .cg-live .cg-card{padding:20px 16px 18px;}
  .cg-live .cg-avg{font-size:2.9rem;}
  .cg-live .cg-xl span{font-size:.58rem;}
}