/* PogonSportNet.pl - Dla dzieci: wspolny wyglad gier dla najmlodszych */
:root{--navy:#0b1450;--navy2:#16207a;--bordo:#9b2236;--bordo2:#c03049;--gold:#f2b632;--sky:#e8f1ff;--ink:#0b1450;--mute:#5a6290;--ok:#2fa866;--card:#fff;--line:rgba(11,20,80,.12);
  --display:"Teko","Oswald","Arial Narrow",sans-serif;--body:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:transparent;color:var(--ink);font:17px/1.4 var(--body)}
body{padding:0 0 8px}button{font:inherit;color:inherit}
.k-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,#dfeaff 0%,#f6f9ff 60%,#fff 100%);border-radius:22px;padding:16px 16px 20px;box-shadow:0 14px 40px rgba(11,20,80,.18);border:3px solid #fff}
.k-wrap:before{content:"";position:absolute;left:-40px;right:-40px;bottom:-60px;height:120px;background:radial-gradient(60% 100% at 50% 100%,#7ccf6b 0%,#5fb850 60%,transparent 61%);opacity:.25;pointer-events:none}
.k-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px;position:relative}
.k-top h1{margin:0;font:700 42px/.9 var(--display);text-transform:uppercase;color:var(--navy);letter-spacing:.01em}.k-top h1 em{font-style:normal;color:var(--bordo)}
.k-tools{display:flex;gap:8px}
.k-ic{width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:0 3px 0 rgba(11,20,80,.15);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.k-ic:active{transform:translateY(2px);box-shadow:none}
.k-lead{margin:0 0 12px;color:var(--mute);font-size:16px;position:relative}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:14px 20px 11px;font:700 26px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;background:var(--gold);color:#2a1d00;box-shadow:0 5px 0 #c98d12;transition:transform .08s}
.k-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c98d12}
.k-btn.navy{background:var(--navy2);color:#fff;box-shadow:0 5px 0 #070c3a}.k-btn.bordo{background:var(--bordo2);color:#fff;box-shadow:0 5px 0 #6d1525}
.k-btn.white{background:#fff;color:var(--navy);box-shadow:0 5px 0 #c9d3ef}.k-btn.on{outline:4px solid var(--gold);outline-offset:2px}
.k-btn:disabled{opacity:.5}
.k-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;position:relative}
.k-box{background:#fff;border-radius:18px;padding:14px;box-shadow:0 4px 0 rgba(11,20,80,.08);position:relative}
.k-foot{margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--mute);position:relative}
.k-stars{font-size:38px;letter-spacing:4px}
.k-win{position:absolute;inset:0;z-index:20;display:none;align-items:center;justify-content:center;background:rgba(11,20,80,.55);padding:16px}
.k-win.on{display:flex}.k-win>div{background:#fff;border-radius:24px;padding:22px 20px;text-align:center;max-width:420px;width:100%;animation:kpop .45s cubic-bezier(.2,1.6,.4,1)}
.k-win h2{margin:0 0 6px;font:700 46px/.95 var(--display);text-transform:uppercase;color:var(--bordo)}
.k-win p{margin:0 0 14px;color:var(--mute)}
@keyframes kpop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes kwob{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes kshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.k-shake{animation:kshake .3s 2}.k-wob{animation:kwob .5s}
canvas.k-conf{position:absolute;inset:0;pointer-events:none;z-index:30}
@media(max-width:560px){.k-top h1{font-size:34px}.k-btn{font-size:22px;padding:12px 16px 9px}.k-wrap{padding:12px 10px 16px;border-radius:18px}}
@media print{body *{visibility:hidden}.k-print,.k-print *{visibility:visible}.k-print{position:absolute;left:0;top:0;width:100%}}
.k-back{display:inline-block;margin:0 0 6px;font:600 14px/1 var(--body);color:var(--navy);text-decoration:none;background:#fff;border-radius:999px;padding:7px 12px;box-shadow:0 2px 0 rgba(11,20,80,.12);position:relative}
.k-more{margin-top:16px;position:relative}.k-more h3{margin:0 0 8px;font:700 26px/1 var(--display);text-transform:uppercase;color:var(--navy);text-align:center}
.k-more>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.k-more a{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:16px;padding:10px 6px;text-decoration:none;box-shadow:0 4px 0 rgba(11,20,80,.1);color:var(--navy);text-align:center}
.k-more a b{font:700 18px/1 var(--display);text-transform:uppercase}
.k-more a:hover{transform:translateY(-2px)}