html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{box-sizing:border-box}body{color:#5e5e5e;background-color:#fff8dd}iframe,object{outline:0}*,::after,::before{box-sizing:inherit}a{color:#ffcb80;text-decoration:none}a:active,a:focus,a:hover{color:#252525;text-decoration:underline}body{color:#252525;font:400 12px Arial,sans-serif;line-height:1.4em}.clearfix::after{clear:both;content:'';display:table}.container{max-width:1180px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;width:100%}.hide-text{overflow:hidden;padding:0;text-indent:101%;white-space:nowrap}.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.game-list{font-size:0}.game-item{font-size:12px;display:inline-block;width:32%;margin-right:2%;margin-bottom:20px;box-sizing:border-box;vertical-align:top;text-align:center;background:#fff;border-radius:2px;box-shadow:0 1px 1px rgba(230,81,0,.1);height:312px;overflow:hidden}.game-item:nth-child(3n){margin-right:0}.game-item img{width:100%;border-radius:2px 2px 0 0}.game-item img:hover{opacity:.9}.game-item .game-meta{padding:10px}.game-item .game-meta p{font-size:11px;line-height:1.4em;margin-bottom:.4em}.game-item a{color:#ef6c00;text-decoration:none;display:block}.game-item a:hover{text-decoration:underline}.game-item a h2{font-size:14px;padding:0;margin:0}.sidebar h3{color:#fff;background:#ffcb80;margin:0;padding:10px 20px;position:relative;display:block;font-size:14px;border-radius:2px 2px 0 0;text-shadow:0 1px 4px rgba(0,0,0,.6)}.sidebar nav li{display:inline-block;margin-right:3%;margin-bottom:10px;box-sizing:border-box;width:31.333%;text-decoration:none;box-sizing:border-box}.sidebar nav li:nth-child(3n){margin-right:0}.sidebar nav li img{width:100%}.sidebar nav li .tooltip{display:block;position:relative;text-decoration:none}.sidebar nav li .tooltip:hover img{opacity:.9}.sidebar nav li .tooltip:hover:after{background:#333;background:rgba(239,108,0,.9);border-radius:5px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;content:attr(title);text-align:center;left:50%;margin-left:-40px;padding:5px;position:absolute;width:80px;z-index:98}.sidebar .box-content{padding-bottom:10px}.sidebar .btn-mobile-nav-close{display:none}header{border-radius:5px;margin-bottom:20px;box-shadow:0 1px 4px rgba(0,0,0,.3)}header .top-logo{border-top-left-radius:5px;border-top-right-radius:5px;height:100px;text-align:center;background:#ffab00 url(../images/top-bg.png) repeat-x}header .top-logo img{width:100%;max-width:445px}header .top-nav{border-bottom-left-radius:5px;border-bottom-right-radius:5px;height:36px;line-height:36px;background:#ef6c00;position:relative;overflow:hidden}header .top-nav ul{list-style:none;margin:0;padding:0 20px;box-sizing:border-box}header .top-nav ul li{display:inline-block;margin-right:30px;color:#fff;font-size:14px}header .top-nav ul li span{text-decoration:underline}header .top-nav ul li a{color:#fff;font-size:14px}header .top-nav .btn-mobile-nav{display:none}.content{display:inline;float:left;width:70%;margin:0 2% 0 0}.sidebar{display:inline;float:left;width:28%}.row::after{clear:both;content:'';display:table}.box{margin:0 0 20px;background:#fff;border-radius:2px;box-shadow:0 1px 1px rgba(230,81,0,.1);position:relative} .box p{padding:0px 20px 10px 20px;text-align:justify} .box h2{padding:0px 20px 10px 20px;text-align:justify; font-size: 14px} .box .box-content{padding:20px;margin:0}.box p.box-content{padding:20px;text-align:justify}.box p.box-content a{color:inherit;text-decoration:underline}.box h1,.box h3{color:#fff;background:#ffcb80;margin:0;padding:10px 20px;position:relative;display:block;font-size:14px;border-radius:2px 2px 0 0;text-shadow:0 1px 4px rgba(0,0,0,.6)}.box .ya-share2{position:absolute;top:7px;right:7px}.box p.h404{text-align:center}.box p.h404 span{font-size:72px;font-weight:700;color:#ef6c00;text-shadow:#ffcb80 .05em .05em .01em;line-height:3em}.box .game-wrap{background:url(../images/preloader.gif) 50% 50% no-repeat;min-height:100px}#game,#game iframe{display:block;margin:0 auto}#game-select{margin:15px auto 0;display:block}.no-flash{width:100%;text-align:center;padding:100px 0;background:#fff}.top-adv{padding:4px;border-radius:2px;box-shadow:0 1px 1px rgba(230,81,0,.1);background:#fff;margin-bottom:20px}.bottom-adv{margin:0 0 20px;width:100%}footer{margin-bottom:30px;border-radius:5px;background:#ef6c00;padding:10px 0;color:#fff;height:37px;box-shadow:0 -1px 4px rgba(0,0,0,.3)}footer .container{position:relative}footer p{padding:0 20px;margin:0}footer .counter{width:88px;height:31px;position:absolute;right:20px;top:-7px;overflow:hidden}.sidebar-adv{max-height:270px;margin:0 0 20px;background:#fff;border-radius:2px;box-shadow:0 1px 1px rgba(230,81,0,.1);position:relative;padding:10px 5px;overflow:hidden}.sidebar-adv-wrap{max-width:300px;max-height:250px;margin:auto}@media only screen and (max-width:767px){.game-item .game-meta p{font-size:12px}.sidebar nav li{width:17.6%}.sidebar nav li:nth-child(3n){margin-right:3%}.sidebar nav li:nth-child(5n){margin-right:0}.sidebar nav{padding-top:60px}.sidebar.active{display:block}.sidebar .btn-mobile-nav-close{display:block;width:30px;height:30px;top:12px;right:20px;position:absolute}.sidebar .btn-mobile-nav-close span{display:block;position:absolute;top:16px;height:0}.sidebar .btn-mobile-nav-close span:after,.sidebar .btn-mobile-nav-close span:before{content:"";display:block;position:absolute;top:0;height:5px;width:30px;background:#fff;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sidebar .btn-mobile-nav-close span:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}header .top-nav .btn-mobile-nav{display:block;width:30px;height:30px;top:0;right:20px;position:absolute}header .top-nav .btn-mobile-nav span{display:block;position:absolute;top:16px;height:5px;width:30px;background:#fff}header .top-nav .btn-mobile-nav span:after,header .top-nav .btn-mobile-nav span:before{content:"";display:block;position:absolute;top:-8px;height:5px;width:30px;background:#fff}header .top-nav .btn-mobile-nav span:after{top:8px}.content{width:100%;margin-right:0}.sidebar{position:absolute;left:0;top:0;width:100%;display:none}.sidebar h3{display:none}.sidebar .box{background:rgba(0,0,0,.85);border-radius:0}.box .game-wrap{overflow:hidden}.sidebar-adv{display:none}}#game iframe.fixed,#game.fixed{background:#000;position:fixed;width:100%;height:calc(100% - 36px);top:36px;left:0;z-index:1000;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-align:center;align-items:center}#close-fullscreen,#fullscreen{cursor:pointer;font-size:11px;letter-spacing:.08em;text-transform:uppercase}#close-fullscreen{padding:0 20px;margin:0;display:none;position:fixed;right:0;top:0;z-index:1001;height:36px;width:100%;color:#fff;background:#ef6c00;border:0;box-shadow:0 1px 4px rgba(0,0,0,.3);outline:0;line-height:36px;text-align:right}#close-fullscreen.active{display:block}#fullscreen{border-radius:6px;background-color:#474743;font-family:"Roboto Condensed",Arial,Helvetica,sans-serif;line-height:43px;color:#fff;display:block;margin:0 auto 20px;height:40px;border:0;padding:0 20px;outline:0}#close-fullscreen:before{content:'';display:block;width:130px;position:absolute;background:url(/images/logo.png) 0 50% no-repeat;height:100%;background-size:contain;top:0;left:20px}.card-header{color:#fff;background:#ffcb80;margin:0;padding:10px 20px;position:relative;display:block;font-size:15px;border-radius:4px 4px 0 0;text-shadow:0 1px 4px rgba(0,0,0,.6);padding:0;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.card-header a{color:#fff;padding:10px 20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;text-decoration:none;border-right:solid 1px rgba(0,0,0,.1)}.card-header a.active{background:rgba(0,0,0,.3)}.card-header a:hover{background:rgba(0,0,0,.1)}
/* === kulki.net.pl: iOS-safe fullscreen + lazy game overrides === */
#game iframe.fixed,#game.fixed{height:calc(100vh - 36px);height:calc(100dvh - 36px)}
#fullscreen,#close-fullscreen{-webkit-appearance:none;appearance:none}
/* clearer section headings */
.box h2{color:#ef6c00;margin:0;padding:14px 20px 4px;text-align:left;font-size:16px;font-weight:700;line-height:1.3}
/* footer layout + links */
footer{height:auto}
footer .container{display:-webkit-box;display:flex;-webkit-box-pack:justify;justify-content:space-between;-webkit-box-align:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:2px 16px}
footer .footer-links{margin:0}
footer a{color:#fff;text-decoration:underline}
/* bullet lists inside description boxes */
.content .box ul{margin:0;padding:0 20px 10px 42px;list-style:disc;text-align:left}
.content .box li{margin:0 0 6px;line-height:1.5em;padding:0}
.content .box li:last-child{margin-bottom:0}
/* ================================================================
ODSWIEZENIE TRESCI - blok doklejany na KONIEC pliku css/style.css.
Wzor 1:1 ze strony podgladu, ktora Ci sie spodobala (podglad.html):
jasne tlo #fafafa, naglowek sekcji lezy WPROST na tle
(#bf360c + cienka linia #ffcc80), bez bialej ramki dookola tekstu.
Biale zostaja tylko kafelki gier - dokladnie takie jak teraz
(zaokraglenie 2px, delikatny cien).
Naglowek strony (logo, pasek menu) i HTML: bez zmian.
================================================================ */
/* 1. tlo strony: z kremowego #fff8dd na jasna szarosc - jak w przykladzie */
body{background-color:#fafafa}
/* 2. koniec bialych ramek wokol tekstu.
Tresc lezy wprost na tle strony, tak jak na stronie podgladu. */
.box{background:none;box-shadow:none;border-radius:0;margin:0 0 26px}
/* 3. naglowki sekcji - 1:1 z przykladu:
h2.sec{font-size:17px;color:#bf360c;border-bottom:2px solid #ffcc80}
zamiast wypelnionego paska #ffcb80 z cieniem tekstu. */
.box h1,.box h3,.sidebar h3{
color:#bf360c;background:none;text-shadow:none;border-radius:0;
margin:0 0 15px;padding:6px 0 11px;
font-size:17px;font-weight:700;line-height:1.25;
border-bottom:2px solid #ffcc80}
.sidebar h3{font-size:15px;margin-bottom:13px;padding:5px 0 9px}
/* 4. tekst opisow: wyrownany do lewej krawedzi linii pod naglowkiem,
wiekszy i luzniejszy, koniec justowania */
.content .box p,.content .box li{font-size:13px;line-height:1.72em;text-align:left;color:#3d3d3d}
.content .box p{padding:0 0 13px}
.content .box p.box-content{padding:0 0 8px;text-align:left}
.content .box .box-content{padding:0}
.content .box ul{padding:0 0 13px 24px}
.content .box li{margin:0 0 7px}
.box h2{font-size:16px;padding:16px 0 5px;color:#e65100;text-align:left}
.sidebar .box .box-content{padding:0}
/* 5. siatka gier: rowne kolumny i rowne wysokosci w rzedzie.
Znika sztywne height:312px, wiec zaden opis nie jest juz uciety.
Sam kafelek zostaje taki jak w przykladzie: biale tlo,
zaokraglenie 2px, cien 0 1px 1px rgba(230,81,0,.1). */
.game-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-size:12px}
.game-item{width:auto;margin:0;height:auto;display:block;
transition:box-shadow .16s ease}
.game-item:hover{box-shadow:0 1px 2px rgba(230,81,0,.16),0 3px 10px rgba(230,81,0,.10)}
.game-item img{display:block;aspect-ratio:4/3;object-fit:cover}
.game-item img:hover{opacity:1}
.game-item .game-meta{padding:9px 8px 13px}
.game-item a h2{font-size:14px;line-height:1.28;color:#e65100;text-align:center}
.game-item .game-meta p{font-size:11.5px;color:#666;line-height:1.45em;margin:5px 0 0}
/* 6. linki w tresci: czytelniejsza pomarancz zamiast bladego #ffcb80 */
.content a,.box p.box-content a{color:#ef6c00}
/* 7. telefon: 2 kolumny zamiast 3 sciesnionych */
@media only screen and (max-width:767px){
.game-list{grid-template-columns:repeat(2,1fr);gap:12px}
.game-item .game-meta p{font-size:12px}
.box h1,.box h3{font-size:16px;margin-bottom:13px;padding:4px 0 9px}
.content .box p,.content .box li{font-size:13.5px}
/* menu wysuwane z boku zostaje bez zmian - wraca jego wewnetrzny odstep */
.sidebar .box .box-content{padding:20px}
}
/* ============ MOBILNE 2026-07-26 ============ */
@media only screen and (max-width:767px){
/* --- 1. szapka od krawedzi do krawedzi: wychodzi poza 20px paddingu .container --- */
body > .container > header{margin-left:-20px;margin-right:-20px;border-radius:0}
body > .container > header .top-logo{border-top-left-radius:0;border-top-right-radius:0}
body > .container > header .top-nav{border-bottom-left-radius:0;border-bottom-right-radius:0}
header .top-logo .container,header .top-nav .container{padding-left:16px;padding-right:16px}
header .top-nav ul{padding:0}
header .top-nav ul li{margin-right:20px}
header .top-nav ul li:last-child{margin-right:0}
header .top-nav .btn-mobile-nav{right:16px}
/* --- 2. wysuwane menu: przypiete do okna, a nie do gory dokumentu --- */
/* wczesniej byla pozycja absolutna wzgledem calej strony, wiec po
przewinieciu w dol menu otwieralo sie poza ekranem */
.sidebar{position:fixed;left:0;right:0;top:0;bottom:0;width:auto;margin:0;z-index:1200;
overflow-y:auto;-webkit-overflow-scrolling:touch;
background:rgba(0,0,0,.86);padding-bottom:24px}
.sidebar .box{background:transparent;box-shadow:none;margin:0}
.sidebar .btn-mobile-nav-close{z-index:3}
body.mj-menu-otwarte{overflow:hidden}
}
/* ---- lista gier w wysuwanym menu: LISTA GIER W MENU (mobile) ---- */
@media only screen and (max-width:767px){
/* wczesniej byla tu siatka samych miniaturek 5 w rzedzie, bez nazw -
nie dalo sie odczytac, ktora gra jest ktora, ani wygodnie trafic palcem */
.sidebar h3{display:block;background:transparent;color:#fff;text-align:center;
font-size:17px;padding:16px 56px 10px;text-shadow:none;border-radius:0}
.sidebar nav{padding-top:0}
.sidebar nav ul{padding:0;margin:0;list-style:none}
.sidebar nav li,
.sidebar nav li:nth-child(3n),
.sidebar nav li:nth-child(5n){display:block;float:none;width:auto;margin:0 0 6px}
.sidebar nav li .tooltip{display:flex;align-items:center;padding:6px 8px;
border-radius:8px;background:rgba(255,255,255,.07)}
.sidebar nav li .tooltip img{width:56px;min-width:56px;height:auto;
margin-right:10px;border-radius:4px}
/* nazwa gry bierze sie z atrybutu title - bez zmian w szablonie PHP */
.sidebar nav li .tooltip:after,
.sidebar nav li .tooltip:hover:after{content:attr(title);position:static;display:block;
width:auto;margin:0;padding:0;background:none;border-radius:0;
-webkit-transform:none;transform:none;
color:#fff;font-size:14px;line-height:1.3;text-align:left}
}
/* ---- KRZYZYK MENU + tlo wysuwanego menu (mobile) ---- */
@media only screen and (max-width:767px){
/* przy pozostawionej przezroczystosci przez menu przebijala strona pod spodem */
.sidebar{background:rgba(18,18,18,.97)}
/* krzyzyk byl liczony wzgledem