/* Piłkarz Ręczny v0.2 - kolorystyka pilkareczna.com: jasne tło, pomarańcz, granat */
:root{
  --bg:#f3f4f6; --parkiet:#eceef1; --linia:#e2e5e9;
  --card:#ffffff; --card2:#f9fafb;
  --ink:#111827; --muted:#6b7280;
  --akcent:#ea580c; --akcent-j:#f97316; --granat:#1e293b; --granat2:#0f172a;
  --akcent2:#16a34a; --zle:#dc2626;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;min-height:100vh;max-width:100%;overflow-x:hidden;background:
  repeating-linear-gradient(90deg, var(--parkiet) 0 46px, var(--linia) 46px 48px),
  var(--bg);
  color:var(--ink);font:16px/1.55 system-ui,Segoe UI,Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;padding:16px}
main{width:100%;max-width:1080px}
h1{font-size:clamp(26px,6vw,44px);letter-spacing:2px;margin:.2em 0;color:var(--granat);text-transform:uppercase}
h2{margin:.2em 0 .5em;color:var(--akcent)}
h3{margin:.8em 0 .3em;color:var(--muted);text-transform:uppercase;font-size:13px;letter-spacing:1px}
.sub{color:var(--muted);margin:0 0 14px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:14px;padding:18px;margin:0 0 14px;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.hud{display:flex;flex-wrap:wrap;gap:6px 18px;background:var(--granat);color:#f1f5f9;border:1px solid var(--granat2);border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:14px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* KLUCZOWE dla wąskich ekranów: element gridu domyślnie NIE może zmaleć poniżej swojej zawartości
   (min-width:auto), więc jedna długa nazwa albo szeroka tabela rozpychała kartę poza ekran i treść
   była ucinana po prawej. min-width:0 pozwala kartom kurczyć się do szerokości kolumny. */
.cols > *, .card{min-width:0}
.card table{max-width:100%}
@media(max-width:700px){.cols{grid-template-columns:1fr}}
button{cursor:pointer;border:0;border-radius:10px;font:inherit}
button.big{display:block;width:100%;padding:13px 16px;margin:8px 0;background:var(--akcent);color:#fff;font-weight:800;letter-spacing:.5px;font-size:16px}
button.big:hover{filter:brightness(1.08)}
button.big.alt{background:var(--granat);color:#f1f5f9}
button.big:disabled{opacity:.45;cursor:default}
button.mini{padding:6px 10px;background:var(--granat);color:#f1f5f9;font-size:13px;margin-right:6px}
.btns{display:flex;gap:10px}
.btns.col{flex-direction:column;gap:0}
.btns .big{flex:1}
label{display:block;margin:10px 0;color:var(--muted);font-size:14px}
input,select{width:100%;margin-top:4px;padding:10px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:var(--ink);font:inherit}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:4px 6px;border-bottom:1px solid #eceef1}
tr.me td{background:#fff7ed;color:var(--akcent);font-weight:700}
.news p{margin:6px 0;padding:8px 10px;background:var(--card2);border-left:3px solid var(--akcent);border-radius:0 8px 8px 0;font-size:14px}
.log p{margin:4px 0;color:var(--muted);font-size:13px}
.roll{font-family:ui-monospace,monospace;color:var(--akcent);background:#1e293b;display:inline-block;padding:4px 10px;border-radius:6px;margin-top:12px}
.res{font-size:17px;font-weight:600;margin:10px 0}
.offer{border:2px dashed var(--akcent);border-radius:12px;padding:12px;margin-top:12px}
.match h2,.event h2{font-size:26px}
.start{max-width:520px;margin:6vh auto}
footer{color:#6b7280;font-size:12px;margin-top:18px;max-width:1080px;text-align:center}
footer .disclaimer{margin-top:6px;font-size:11px;line-height:1.5;color:#9ca3af}
/* v0.2 */
.tabs{display:flex;gap:6px;margin:0 0 12px}
.tab{flex:1;padding:9px;border-radius:10px;background:var(--granat);color:#cbd5e1;font-weight:700}
.tab.on{background:var(--akcent);color:#fff}
.crest svg{vertical-align:middle}
.hud svg{vertical-align:middle;margin-right:4px}
.betrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #eceef1;font-size:14px}
.betrow span{flex:1}
.report{max-height:340px;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;margin:10px 0}
/* szeroka tabela ligowa przewija sie w poziomie WEWNATRZ karty, nie rozpycha ekranu */
.tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2px 0}
.tabwrap table{min-width:100%}
/* kolory stref pozycji w tabeli (pasek z lewej + delikatne tlo - nie tylko kolor, jest tez opis w legendzie) */
tr.poz-ziel td:first-child{box-shadow:inset 4px 0 0 var(--akcent2)}
tr.poz-zolty td:first-child{box-shadow:inset 4px 0 0 #eab308}
tr.poz-pomar td:first-child{box-shadow:inset 4px 0 0 var(--akcent)}
tr.poz-czerw td:first-child{box-shadow:inset 4px 0 0 var(--zle)}
tr.poz-ziel{background:rgba(22,163,74,.10)}
tr.poz-zolty{background:rgba(234,179,8,.13)}
tr.poz-pomar{background:rgba(234,88,12,.10)}
tr.poz-czerw{background:rgba(220,38,38,.10)}
tr.me.poz-ziel,tr.me.poz-zolty,tr.me.poz-pomar,tr.me.poz-czerw{outline:2px solid var(--granat);outline-offset:-2px}
.tablegenda{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 2px 0;font-size:11.5px;color:var(--muted)}
.tablegenda .lg{display:inline-flex;align-items:center;gap:5px}
.tablegenda .lg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.tablegenda .lg i.poz-ziel{background:var(--akcent2)}
.tablegenda .lg i.poz-zolty{background:#eab308}
.tablegenda .lg i.poz-pomar{background:var(--akcent)}
.tablegenda .lg i.poz-czerw{background:var(--zle)}
.report p{margin:5px 0;font-size:14px}
.squad td{font-size:13px}
.muted{color:var(--muted)}
.log.tall{max-height:300px;overflow-y:auto}
.jersey{text-align:center;margin:8px 0}
.logo{text-align:center;margin-bottom:4px}
.start.wide{max-width:640px}
.inline{display:flex;gap:6px}
.filelabel{display:inline-block;padding:6px 10px;background:var(--granat);color:#f1f5f9;font-size:13px;border-radius:10px;cursor:pointer;margin-right:6px}

footer a{color:var(--akcent)}

.report.live p{animation:fadein .4s}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.hud b{color:#fdba74}
/* centrum meczowe */
.scorebar{display:flex;align-items:center;justify-content:space-between;background:var(--granat);color:#f1f5f9;border-radius:12px;padding:10px 14px;margin-bottom:10px;gap:8px}
.sbteam{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;flex:1;min-width:0}
.sbteam span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbteam.right{justify-content:flex-end;text-align:right}
.sbmid{text-align:center;flex:0 0 auto}
.sbscore{font-size:30px;font-weight:900;color:#fdba74;line-height:1}
.sbmin{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px}
.report.live p{border-left:3px solid transparent;padding-left:8px;border-radius:0 6px 6px 0}
.report.live p.fgoal{border-left-color:var(--akcent);background:#fff7ed}
.report.live p.fopp{border-left-color:#94a3b8}
.moment{border:2px solid var(--akcent);border-radius:12px;padding:12px 14px;margin-top:12px;background:#fff7ed}
@media(max-width:640px){.sbteam span{font-size:12px}.sbscore{font-size:24px}}
/* karty do gry */
.cardrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.cardrow .muted{min-width:86px;font-size:12px}
.pcard{display:inline-flex;flex-direction:column;justify-content:space-between;width:46px;height:64px;background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:4px 5px;box-shadow:0 2px 6px rgba(15,23,42,.18);font-weight:800;color:#111827;line-height:1}
.pcard i{font-style:normal;font-size:18px;align-self:flex-end}
.pcard.red{color:#dc2626}
.pcard.back{align-items:center;justify-content:center;font-size:30px;background:repeating-linear-gradient(45deg,#1e293b 0 6px,#334155 6px 12px);color:#fff}
.holdwrap{position:relative;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.holdwrap.held .pcard{outline:3px solid var(--akcent);transform:translateY(-6px)}
.holdwrap em{font-size:10px;font-style:normal;color:var(--akcent);font-weight:800}
/* sklep */
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:8px}
.shopitem{border:1px solid #e5e7eb;border-radius:12px;padding:12px;background:var(--card2);display:flex;flex-direction:column}
.shopitem.owned{opacity:.72;border-color:var(--akcent2)}
.shopicon{font-size:40px;text-align:center;background:linear-gradient(135deg,#fff7ed,#ffedd5);border-radius:10px;padding:10px 0;margin-bottom:8px}
.ownedtag{color:var(--akcent2);font-weight:800;font-size:12px;margin-top:auto}
.shopitem .mini{margin-top:auto}
/* wybór numeru */
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:12px 0}
.numbtn{padding:10px 0;border-radius:8px;font-weight:800;font-size:15px}
.numbtn.free{background:var(--akcent);color:#fff}
.numbtn.free:hover{filter:brightness(1.1)}
.numbtn.taken{background:#e5e7eb;color:#9ca3af}
.numbtn.taken.force{background:var(--granat);color:#f1f5f9;cursor:pointer}
.numbtn.taken.force:hover{outline:2px solid var(--akcent)}
/* popup pomeczowy */
.pomeczu{max-width:560px;margin:4vh auto;animation:fadein .35s}
.pomeczu .wingr{color:var(--akcent2)}
.pomeczu .losegr{color:var(--zle)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin:14px 0}
.statbox{background:var(--card2);border:1px solid #e5e7eb;border-radius:10px;padding:10px 6px;text-align:center}
.statbox b{display:block;font-size:22px;color:var(--granat)}
.statbox span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.statbox.nota b{color:var(--akcent)}
.statbox.kara b{color:var(--zle)}
.trenerbox{background:#eef2f7;border-left:4px solid var(--granat);border-radius:0 10px 10px 0;padding:10px 14px;margin:10px 0;font-size:15px}
.prasabox{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 16px;margin:12px 0}
.prasabox .gazeta{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#92400e}
.prasabox .arttytul{margin:4px 0 8px;color:#111827;font-size:19px;font-family:Georgia,serif}
.prasabox .arttresc{margin:0;font-size:14px;line-height:1.6;color:#374151;font-family:Georgia,serif}
@media(max-width:640px){.pomeczu{margin:1vh auto}.statbox b{font-size:18px}}
/* minigra timing */
.tbar{position:relative;height:44px;background:linear-gradient(180deg,#1e293b,#0f172a);border-radius:10px;overflow:hidden;cursor:pointer;touch-action:manipulation;margin:6px 0}
.tzone{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#f97316,#ea580c);opacity:.85;border-radius:4px}
.tperf{position:absolute;top:0;bottom:0;width:3%;background:#fff;opacity:.7}
.tmark{position:absolute;top:2px;bottom:2px;width:5px;background:#fff;border-radius:3px;left:0;box-shadow:0 0 8px rgba(255,255,255,.9)}
.tmark.hit{background:#4ade80;box-shadow:0 0 12px #4ade80}
.tmark.miss{background:#f87171;box-shadow:0 0 12px #f87171}
/* minigry v2 */
.mg{margin:8px 0}
.mghint{font-size:13px;color:var(--muted);margin:4px 0 8px}
.mgshot{width:100%;max-width:420px;display:block;margin:0 auto;cursor:crosshair;border-radius:10px;touch-action:manipulation}
.mgdot{filter:drop-shadow(0 0 6px #fbbf24)}
.mgreflex{height:96px;border-radius:12px;background:var(--granat);color:#94a3b8;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;letter-spacing:2px;cursor:pointer;user-select:none;touch-action:manipulation;transition:background .1s}
.mgreflex.go{background:var(--akcent);color:#fff;animation:pulse .5s infinite}
.mgreflex.hit{background:#16a34a;color:#fff;animation:none}
.mgreflex.early,.mgreflex.late{background:var(--zle);color:#fff;animation:none}
@keyframes pulse{50%{filter:brightness(1.25)}}
.mgkeeperhint{text-align:center;font-size:19px;font-weight:800;min-height:34px;margin:6px 0;color:var(--granat)}
.mgarrow{color:var(--akcent);font-size:26px;animation:pulse .3s infinite}
.mgzones{display:flex;gap:8px}
.mgzone{flex:1;padding:22px 6px;border-radius:12px;background:var(--granat);color:#f1f5f9;font-weight:800;font-size:15px;touch-action:manipulation}
.mgzone.hit{background:#16a34a}
.mgzone.miss{background:var(--zle)}
@media(max-width:640px){.mgzone{padding:26px 4px}.mgreflex{height:110px}}
/* minigra rozegranie */
.mgpassdot{position:absolute;width:52px;height:52px;border-radius:50%;background:var(--akcent);color:#fff;font-weight:900;font-size:20px;border:3px solid #fff;box-shadow:0 0 14px rgba(249,115,22,.8);animation:pop .15s;touch-action:manipulation}
.mgpassdot.good{background:#16a34a;box-shadow:0 0 14px #16a34a}
.mgpassdot.missed{background:#6b7280;opacity:.4}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.mgout .res{margin:8px 0 0}
.decyzjaTimer{margin:0 0 6px;font-weight:800;color:var(--granat);font-size:14px}
.decyzjaTimer.panic{color:var(--zle);animation:pulse .5s infinite}

/* ============ v0.3 THEME POLISH: pilkareczna.com look&feel ============ */
body{
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif;
  background:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(234,88,12,.10), transparent 60%),
    repeating-linear-gradient(90deg, var(--parkiet) 0 46px, var(--linia) 46px 48px),
    var(--bg);
}
h1{font-family:'Bebas Neue','Inter',sans-serif;letter-spacing:3px;font-weight:400}
h2{font-weight:800;letter-spacing:-.3px}
.card{border:1px solid #e6e8ec;border-radius:16px;box-shadow:0 2px 4px rgba(15,23,42,.04),0 12px 28px rgba(15,23,42,.07);animation:cardin .3s ease both}
@keyframes cardin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* HUD: przyklejony pasek jak nagłówek portalu */
.hud{position:sticky;top:8px;z-index:50;background:linear-gradient(135deg,#1e293b,#0f172a);border:1px solid #0f172a;border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.35);backdrop-filter:blur(6px)}
.hud b{color:#fdba74}

/* przyciski */
button{transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
button.big{background:linear-gradient(135deg,#f97316,#ea580c);border-radius:12px;box-shadow:0 4px 14px rgba(234,88,12,.35);text-transform:uppercase;letter-spacing:.6px}
button.big:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(234,88,12,.45)}
button.big:active{transform:translateY(1px) scale(.99)}
button.big.alt{background:linear-gradient(135deg,#33415c,#1e293b);box-shadow:0 4px 12px rgba(15,23,42,.28)}
button.mini{border-radius:9px}
button.mini:hover{filter:brightness(1.15)}

/* taby jak pigułki */
.tabs{background:#e8ebf0;border-radius:14px;padding:5px;gap:5px}
.tab{border-radius:10px;background:transparent;color:#475569;transition:all .15s}
.tab:hover{background:#dde2e9}
.tab.on{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;box-shadow:0 3px 10px rgba(234,88,12,.4)}

/* tabele: zebra + hover */
table tr:nth-child(even) td{background:#f8fafc}
table tr:hover td{background:#f1f5f9}
tr.me td{background:#fff7ed!important;border-left:none}
tr.me td:first-child{border-left:3px solid var(--akcent)}

/* newsy */
.news p{border-radius:10px;border-left-width:4px;box-shadow:0 1px 3px rgba(15,23,42,.05);transition:transform .12s}
.news p:hover{transform:translateX(2px)}

/* scoreboard meczu: gradient + duże cyfry */
.scorebar{background:linear-gradient(135deg,#1e293b,#0f172a);box-shadow:0 8px 22px rgba(15,23,42,.35)}
.sbscore{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:2px}

/* popup pomeczowy */
.pomeczu h2{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:1.5px;font-weight:400}
.statbox{box-shadow:0 1px 3px rgba(15,23,42,.06)}
.statbox b{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:1px}

/* oferty */
.offer{background:linear-gradient(180deg,#fff,#fff8f3);border-radius:14px;transition:box-shadow .15s}
.offer:hover{box-shadow:0 6px 18px rgba(234,88,12,.18)}

/* sklep */
.shopitem{transition:transform .15s,box-shadow .15s;border-radius:14px}
.shopitem:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(15,23,42,.12)}
.shopicon{background:linear-gradient(135deg,#fff7ed,#fed7aa);font-size:44px}

/* moment / decyzja */
.moment{box-shadow:0 6px 20px rgba(234,88,12,.15);border-width:2px;border-radius:14px}
.moment h2{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:1.5px;font-weight:400;color:var(--granat)}

/* wybór numeru */
.numbtn{transition:transform .1s}
.numbtn.free:hover{transform:scale(1.12)}

/* start */
.start .logo svg{filter:drop-shadow(0 4px 12px rgba(234,88,12,.3))}
.report{border-radius:12px}
footer{opacity:.9}
/* chipy statystyk w hubie */
.statchips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.chip{background:var(--card2);border:1px solid #e5e7eb;border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--muted)}
.chip b{color:var(--granat);margin-left:2px}

/* hala sław */
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:6px}
.ach{background:#eceef1;border-radius:10px;padding:8px 4px;text-align:center;font-size:22px;opacity:.35;filter:grayscale(1);cursor:help}
.ach span{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-top:2px;line-height:1.2}
.ach.ma{opacity:1;filter:none;background:linear-gradient(135deg,#fff7ed,#fed7aa);box-shadow:0 2px 8px rgba(234,88,12,.2)}
/* portal pilkareczna (podgląd) */
.portal{max-width:820px;margin:0 auto}
.portalTop{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:12px 18px;border-radius:12px 12px 0 0}
.portalLogo{font-size:22px;font-weight:400;letter-spacing:.5px}
.portalLogo b{font-weight:900}
.portalTag{font-size:10px;text-transform:uppercase;letter-spacing:1px;background:rgba(0,0,0,.25);padding:4px 10px;border-radius:999px}
.portalCrumb{background:#1e293b;color:#94a3b8;font-size:12px;padding:7px 18px}
.portalCard{border-radius:0 0 14px 14px;margin-top:0}
/* smartfon dla mediów */
.phoneWrap{display:flex;justify-content:center}
.phone{width:min(430px,100%);background:#0b1220;border:10px solid #1e293b;border-radius:38px;padding:10px 10px 22px;box-shadow:0 20px 50px rgba(15,23,42,.45);position:relative}
.phoneNotch{width:120px;height:22px;background:#1e293b;border-radius:0 0 14px 14px;margin:0 auto 6px}
.phoneScreen{max-height:72vh;overflow-y:auto;padding:4px 2px}
.phoneStatus{display:flex;justify-content:space-between;color:#94a3b8;font-size:12px;margin:0 6px 4px}
.phone .card{background:#141d2f;border-color:#243146;color:#e2e8f0}
.phone .card h3{color:#cbd5e1}
.phone .card .sub,.phone .muted{color:#7c8aa0}
.phone .big.alt{background:linear-gradient(135deg,#33415c,#243146)}
@media print{
  body *{visibility:hidden}
  #printArea,#printArea *{visibility:visible}
  #printArea{position:absolute;left:0;top:0;width:100%}
  .noprint{display:none!important}
  .hud,.tabs,footer{display:none!important}
}
/* okno czasu refleksu */
.mgokno{position:absolute;left:12%;right:12%;bottom:10px;height:7px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden}
.mgoknoFill{width:100%;height:100%;background:#fff;border-radius:4px}
.mgreflex{position:relative}
/* animacja udanego strzału */
.mgshotanim{animation:shotpulse .5s ease-out}
@keyframes shotpulse{0%{r:9}40%{r:16}100%{r:11}}
/* splash startowy */
.splash{max-width:560px;margin:4vh auto 0;text-align:center}
.splashHero{padding:26px 10px 18px}
.splashHero .logo svg{filter:drop-shadow(0 10px 30px rgba(234,88,12,.35))}
.splashSub{color:var(--muted);font-size:14.5px;max-width:420px;margin:10px auto 0}
.splashMenu{text-align:left}
.splashMenu .big{font-size:17px;padding:15px 16px}
.splashFile{display:block;width:100%;text-align:center;font-weight:800;letter-spacing:.6px;font-size:17px;padding:15px 16px;margin:8px 0;border-radius:12px;text-transform:uppercase;background:linear-gradient(135deg,#33415c,#1e293b);color:#f1f5f9;box-shadow:0 4px 12px rgba(15,23,42,.28)}
.splashFile:hover{transform:translateY(-1px)}
/* menu w tabach + kafelki zapisu */
.tabMenu{flex:0 0 46px;font-size:20px;font-weight:900}
.saveActions{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.saveBtn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;background:var(--card2);border:1px solid #e5e7eb;font-size:22px;color:var(--granat);transition:all .15s}
.saveBtn span{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.saveBtn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(15,23,42,.12);border-color:var(--akcent)}
.saveBtn.danger{border-color:#fecaca}.saveBtn.danger:hover{border-color:var(--zle);background:#fef2f2}
.betrow .mini{white-space:nowrap}
/* ===== mobile polish (20.08) ===== */
.mgreflex span{font-size:16px;font-weight:800;letter-spacing:0;text-align:center;padding:0 12px;line-height:1.3}
@media(max-width:640px){
  .hud{font-size:12.5px;padding:8px 10px;gap:3px 12px;line-height:1.45}
  .tabs{padding:4px;gap:4px}
  .tab{padding:8px 4px;font-size:13px}
  .tab.tabMenu{flex:0 0 38px;font-size:18px}
  h1{font-size:26px}
  h2{font-size:19px}
  button.big{padding:12px 10px;font-size:15px}
  .mgreflex{font-size:18px;letter-spacing:1px}
  .mgreflex span{font-size:14.5px}
  .mgkeeperhint{font-size:16px}
  .card{padding:12px}
  .pomeczu{width:calc(100vw - 20px)}
}
@media(max-width:380px){
  .hud{font-size:11.5px}
  .tab{font-size:12px;padding:8px 2px}
}
/* mobile: HUD nie zaslania, taby zawsze pod reka */
@media(max-width:640px){
  .hud{position:static;box-shadow:none}
  .tabs{position:sticky;top:0;z-index:60;background:#e8ebf0;box-shadow:0 4px 14px rgba(15,23,42,.14);margin-left:-4px;margin-right:-4px}
}
/* ===== minigry v3: intro, karny, zwod, kontra, gol, combo ===== */
.mgintro{background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:12px;padding:22px 14px;text-align:center;animation:cardin .3s}
.mgintrotxt{color:#f1f5f9;font-weight:800;font-size:17px;margin:0 0 6px}
.mgintrostars{color:#94a3b8;font-size:13px;margin:0}
.mgintrostars b{color:#fbbf24;letter-spacing:3px;font-size:16px}
.mgritualbox{background:radial-gradient(ellipse at 50% 30%,#312e81,#0f172a);border-radius:12px;padding:26px 14px;text-align:center;animation:mgpuls 1.6s}
.mgritualtyt{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:6px;color:#fbbf24;margin:0}
.mgritualsub{color:#cbd5e1;font-size:13.5px;margin:6px 0 10px}
.mgritualgk{font-size:34px;animation:mgdance .5s infinite alternate}
@keyframes mgdance{from{transform:translateX(-16px) rotate(-8deg)}to{transform:translateX(16px) rotate(8deg)}}
@keyframes mgpuls{from{filter:brightness(1.6)}to{filter:brightness(1)}}
.mgzwod{position:relative}
.mgzwodobr{text-align:center;font-size:38px;margin:4px 0;animation:mgdance .7s infinite alternate}
.mgkontrapilka{position:absolute;left:4%;top:12%;font-size:34px;padding:8px;cursor:pointer;user-select:none;touch-action:manipulation}
.mggoal{animation:mgshake .45s}
@keyframes mgshake{0%,100%{transform:none}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,1px)}80%{transform:translate(-2px,-1px)}}
.mggol{font-size:19px;font-weight:900;color:#16a34a;animation:mgpop .3s}
@keyframes mgpop{from{transform:scale(.6)}to{transform:scale(1)}}
#momentResult.hotstreak .mg{box-shadow:0 0 0 2px #fb923c,0 0 18px rgba(251,146,60,.55);border-radius:12px}
@media(max-width:640px){.mgritualtyt{font-size:28px}.mgintrotxt{font-size:15px}}
/* charakter gracza */
.charrow{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:11.5px}
.charl,.charr{flex:0 0 88px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.charl{text-align:right}
.charbar{flex:1;position:relative;height:8px;border-radius:4px;background:#e5e7eb}
.charbar::after{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:#cbd5e1}
.charfill{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#fdba74,#ea580c);border-radius:4px}
.chardot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--akcent);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(15,23,42,.3);transform:translate(-50%,-50%)}
@media(max-width:640px){.charl,.charr{flex:0 0 72px;font-size:10px}}
/* cele sezonu */
.celrow{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.cellabel{flex:1;min-width:0}
.celbar{flex:0 0 90px;height:8px;border-radius:4px;background:#e5e7eb;overflow:hidden}
.celfill{height:100%;background:linear-gradient(90deg,#fdba74,#ea580c);border-radius:4px;transition:width .3s}
.celtxt{flex:0 0 44px;text-align:right;font-weight:800;color:var(--granat);font-size:12px}
.celok .cellabel{color:#16a34a;text-decoration:line-through}
.celok .celfill{background:#16a34a}
.celfail .cellabel{color:#9ca3af;text-decoration:line-through}
/* podpowiedz miasta */
.hintcard{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fdba74}
.hintcard p{margin:0 0 8px;font-size:13.5px}
.hintcard .mini.alt{background:transparent;border:1px solid #d6d3d1;color:var(--muted)}
/* nemezis widget */
.nemcard h3{margin-bottom:6px}
.nemrow{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid #eceef1;font-size:13.5px}
.nemg{font-size:18px;color:var(--akcent)}
/* profil: paski statów + kafle sezonu + wykres formy */
.statbars{margin:8px 0}
.sbrow{display:flex;align-items:center;gap:8px;margin:6px 0}
.sbl{flex:0 0 108px;font-size:12.5px;font-weight:700;color:var(--muted)}
.sbtrack{flex:1;height:10px;border-radius:5px;background:#e5e7eb;overflow:hidden}
.sbfill{height:100%;border-radius:5px;background:linear-gradient(90deg,#fdba74,#ea580c);transition:width .4s}
.sbfill.hi{background:linear-gradient(90deg,#86efac,#16a34a)}
.sbfill.lo{background:linear-gradient(90deg,#fca5a5,#dc2626)}
.sbv{flex:0 0 28px;text-align:right;font-size:14px;color:var(--granat)}
.sezkafle{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.sezk{background:var(--card2,#f8fafc);border:1px solid #e5e7eb;border-radius:12px;padding:10px 4px;text-align:center}
.sezk b{display:block;font-size:22px;color:var(--akcent)}
.sezk span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.formachart{display:flex;align-items:flex-end;gap:4px;height:70px;padding:6px 2px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px}
.fbar{flex:1;border-radius:3px 3px 0 0;position:relative;min-height:8%}
.fbar i{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:8.5px;font-style:normal;color:var(--muted)}
.fhi{background:#16a34a}.fmid{background:#f59e0b}.flo{background:#dc2626}
/* ===== SPLASH v2: noc w hali ===== */
body:has(.splash), body:has(.card.start){
  background:
    radial-gradient(ellipse 120% 50% at 50% -10%, rgba(234,88,12,.22), transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(234,88,12,.10), transparent 60%),
    repeating-linear-gradient(90deg, #101a2e 0 46px, #0d1626 46px 48px),
    #0b1120;
}
.splash{max-width:580px;margin:2vh auto 0;text-align:center;animation:cardin .5s ease both}
.splashHero{padding:30px 10px 14px}
.splashHero .logo svg{filter:drop-shadow(0 12px 34px rgba(234,88,12,.45));animation:logoIn .7s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes logoIn{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}
.splashHero .logo svg .lgTxt1{fill:#f1f5f9}
.splashTag{margin:2px 0 0;font-size:11px;font-weight:800;letter-spacing:4px;color:#fb923c;opacity:.9}
.splashSub{color:#94a3b8;font-size:14.5px;max-width:430px;margin:12px auto 0;line-height:1.55}
.splashBadges{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px auto 4px}
.splashBadges span{font-size:11.5px;font-weight:700;color:#cbd5e1;background:rgba(255,255,255,.06);border:1px solid rgba(251,146,60,.28);border-radius:999px;padding:6px 12px;backdrop-filter:blur(4px)}
.splashMenu{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(8px);box-shadow:0 20px 50px rgba(0,0,0,.4);animation:menuIn .5s .15s ease both}
@keyframes menuIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.splashMenu h3{color:#94a3b8}
.splashMenu .muted{color:#64748b!important}
.splashMenu .big{box-shadow:0 6px 18px rgba(234,88,12,.35)}
.splashMenu .big.alt,.splashMenu .loadSlot{background:linear-gradient(135deg,#2a3752,#1b2740);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.splash footer, body:has(.splash) footer{color:#64748b}
body:has(.splash) footer a, body:has(.card.start) footer a{color:#fb923c}
body:has(.splash) footer p, body:has(.card.start) footer p{color:#64748b}
/* kreator na tym samym tle */
.card.start{background:rgba(255,255,255,.97);box-shadow:0 24px 60px rgba(0,0,0,.5);animation:menuIn .4s ease both}
.card.start .logo svg{width:min(280px,74vw);filter:drop-shadow(0 6px 18px rgba(234,88,12,.3))}
.card.start .sub{font-size:15px;letter-spacing:1.5px;color:var(--akcent);font-weight:900}
.card.start label{display:block;margin:12px 0;font-weight:700;font-size:13.5px;color:#334155}
.card.start select,.card.start input{width:100%;margin-top:5px;padding:11px 12px;border:1.5px solid #dbe2ea;border-radius:10px;font:inherit;background:#fbfcfe;transition:border-color .15s}
.card.start select:focus,.card.start input:focus{border-color:var(--akcent);outline:none;box-shadow:0 0 0 3px rgba(234,88,12,.12)}
@media(max-width:640px){
  .splash{margin-top:1vh}
  .splashHero{padding:18px 6px 10px}
  .splashSub{font-size:13.5px;padding:0 10px}
  .splashTag{letter-spacing:3px}
  .splashMenu .big{font-size:15.5px;padding:14px 12px}
}
/* pancerz na webview (Messenger/FB in-app): nic nie wyjedzie poza ekran */
html,body{overflow-x:hidden;max-width:100vw}
#app{overflow-x:hidden}
.card{max-width:100%;box-sizing:border-box}
.card p,.card h2,.card h3,.card li,.res,.mghint,.news p{overflow-wrap:break-word}
img,svg,canvas{max-width:100%}
input,select,textarea{max-width:100%;box-sizing:border-box;font-size:16px} /* 16px = brak auto-zoomu iOS przy focusie */

/* kafle zapisu: deterministyczny układ - ikona w stałym boksie, tekst pod spodem */
.saveActions{align-items:stretch}
.saveActions .saveBtn{position:relative;display:block;height:96px;padding:0;margin:0}
.saveBtn .sicon{position:absolute;top:15px;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:24px;line-height:1}
.saveActions .saveBtn span{position:absolute;top:54px;left:6px;right:6px;display:block;text-align:center;line-height:1.25}
.saveActions input[hidden]{display:none}
/* gala + tutorial */
.galacard{background:linear-gradient(180deg,#fffbeb,#fff)}
.galapos{margin:6px 0;padding:8px 12px;background:#f8fafc;border-left:3px solid var(--akcent);border-radius:0 8px 8px 0;font-size:14.5px}
.tutor p{margin:10px 0;font-size:14.5px;line-height:1.55}
/* charakter: na wąskich ekranach etykiety nad paskiem (nic się nie ucina) */
@media(max-width:560px){
  .charrow{flex-wrap:wrap;gap:2px 8px}
  .charl,.charr{flex:1 1 40%;font-size:10px}
  .charl{text-align:left}
  .charr{text-align:right}
  .charbar{flex:1 1 100%;order:3}
}
/* tabele: pełny profesjonalizm na najmniejszych ekranach */
.card table{width:100%;max-width:100%}
.card td{overflow-wrap:anywhere}
@media(max-width:360px){
  .card table{font-size:11.5px}
  .card td{padding:4px 3px}
  table .crest svg{width:16px;height:16px}
}

/* wizualny podgląd posta w Mediach */
.postCard{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px;margin-top:10px;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.postHead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.postAva svg{border-radius:50%;background:#f1f5f9;padding:2px}
.postHandle{color:#64748b;font-size:12px;font-weight:400}
.postTxt{margin:4px 0 8px;font-size:14px}
.postImg{position:relative;border-radius:10px;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.postEmoji{font-size:54px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.postCap{position:absolute;bottom:8px;right:10px;color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.postStats{margin:8px 0 6px;font-size:13px;color:#334155}
.postReakcje{letter-spacing:-2px;margin-right:2px}
.postKom{margin:2px 0;font-size:12.5px;color:#475569}
.postKom b{color:#0f172a}

/* ===== UX 2.0 (audyt 21.08): hierarchia HUD, dotyk, focus, mikrointerakcje ===== */
.hud{flex-direction:column;gap:7px;padding:12px 14px}
.hudTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hudName{display:flex;align-items:center;gap:8px;font-size:15.5px;min-width:0}
.hudName b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hudNum{color:#94a3b8;font-weight:700}
.hudOvr{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:3px 11px;font-size:12.5px;color:#cbd5e1;white-space:nowrap}
.hudOvr b{color:var(--akcent);font-size:15px}
.hudChips{display:flex;flex-wrap:wrap;gap:5px 6px}
.hchip{background:rgba(255,255,255,.07);border-radius:7px;padding:3.5px 9px;font-size:12.5px;color:#e2e8f0;line-height:1.35;white-space:nowrap}
.hchip b{color:#fff}
.hmut{color:#94a3b8}
.hchipKasa{background:rgba(234,179,8,.14)}
.hchipAlert{background:rgba(220,38,38,.22);color:#fecaca;font-weight:700}
.hud{font-variant-numeric:tabular-nums}

/* dotyk i focus - WCAG 2.2 */
button.mini{padding:10px 13px;min-height:40px}
.tab{padding:12px 8px;min-height:44px}
button.big{min-height:48px}
:focus-visible{outline:3px solid var(--akcent);outline-offset:2px;border-radius:8px}
*{-webkit-tap-highlight-color:transparent}

/* mikrointerakcje */
button{transition:transform .12s ease,filter .15s ease,box-shadow .15s ease}
button.big:active:not(:disabled){transform:scale(.985)}
button.big:not(.alt):not(:disabled){box-shadow:0 2px 10px rgba(234,88,12,.25)}
.card{animation:cardIn .26s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* nagłówki sekcji z akcentem */
.card h3{display:flex;align-items:center;gap:8px}
.card h3::before{content:'';flex:0 0 4px;height:15px;border-radius:2px;background:var(--akcent);opacity:.85}
.phoneScreen h3::before{display:none}

/* czytelność tabel i newsów */
table{font-variant-numeric:tabular-nums}
.card table td{line-height:1.5}
.news p{border-left:3px solid rgba(234,88,12,.35);padding-left:9px;margin:7px 0;line-height:1.5}
/* HUD: twarda dyscyplina szerokości na najwęższych ekranach */
.hud{box-sizing:border-box;max-width:100%;overflow:hidden}
.hudTop{min-width:0}
.hudOvr{flex:0 0 auto}
.hchip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media(max-width:380px){
  .hudName{font-size:14px}
  .hudOvr{padding:2px 8px;font-size:11.5px}
  .hudOvr b{font-size:13.5px}
  .hchip{font-size:11.5px;padding:3px 7px}
}
/* link zgłoszeń beta */
a.mini.zglosLink{display:inline-block;text-decoration:none;background:rgba(234,88,12,.12);color:#c2410c;font-weight:700;border-radius:10px;padding:10px 13px;font-size:13px;margin:6px 0 2px;min-height:0}
/* HUD: wyrazistość - data wyróżniona, semantyka kolorów, większa czcionka */
.hchip{font-size:13px;padding:4px 10px}
.hchipData{background:rgba(234,88,12,.22);border:1px solid rgba(234,88,12,.45);color:#fed7aa}
.hchipData b{color:#fff}
.hchipOk{background:rgba(34,197,94,.18);color:#bbf7d0}
.hchipOk b{color:#4ade80}
.hudName{font-size:16.5px}
@media(max-width:380px){.hchip{font-size:12px;padding:3px 8px}.hudName{font-size:14.5px}}

/* sbteam-fix (aas): pełne nazwy drużyn w scorebarze - zawijanie zamiast ucinania */
.sbteam{min-width:0}
.sbteam span{font-size:clamp(9px,2.6vw,13px);line-height:1.15;overflow-wrap:break-word;white-space:normal;display:block}

/* tabela-liczby-fix (zgłoszenie z bety): liczby w tabelach NIGDY nie łamią się w pionie */
.card table{width:100%;border-collapse:collapse}
.card td{overflow-wrap:normal;word-break:normal}
.card td:nth-child(n+4){white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.card td:nth-child(3){overflow-wrap:anywhere}
.tabelaScroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelaScroll table{min-width:430px}
@media(max-width:420px){.card table{font-size:12px}}