/* --- PODSTAWOWE ZASADY DLA MOBILNYCH --- */
html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-attachment: scroll;
    font-size: 16px;
    overflow-x: hidden;
    text-align: center;
}

/* Główne okno – pełna szerokość i wycentrowane */
main#okno {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background-color: rgba(0, 0, 0, 0.9);
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding: 0 !important;
    box-sizing: border-box;
}

/* Kolumny – pełna szerokość i wycentrowane */
nav#nav2,
article#center,
section#ad {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    position: static !important;
    min-height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px;
    border: none !important;
    box-sizing: border-box;
    text-align: center;
}

/* Środkowa kolumna – pełne centrowanie wszystkiego w środku */
article#center {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box;
}



/* --- BLOKI MINIATUREK – UNIWERSALNE POPRAWKI --- */
.teoriepoz,
.legendypoz,
.grypoz,
.symbpoz,
.galpoz,
.aplipoz,
.fotpoz {
    width: 90% !important;
    max-width: 90% !important;
    float: none !important;
    display: block !important;
    margin: 10px auto !important;
    padding: 0 !important;
    text-align: center !important;
    box-sizing: border-box;
}

.teorie,
.legendy,
.gry,
.symb,
.gal,
.apli,
.fot {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* --- OBRAZY I MINIATURY – WYŚRODKOWANIE I SKALOWANIE --- */
img,
.teoriezdj,
.gryzdj,
.symbzdj,
.galzdj,
.aplizdj,
.fotzdj {
    width: 100% !important;       /* Obrazek wypełnia 100% kontenera (czyli 90% ekranu) */
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    float: none !important;
}

div.legendyzdj
{
	border: 2px solid black;
	width: 225px;
	height: 316px;
	background-repeat: no-repeat; 
	transition: background-image 0.1s;
	margin-left: auto !important;
    margin-right: auto !important;
}

/* --- NAGŁÓWKI, MENU I INNE --- */
nav#nav2 { order: 1; }
article#center { order: 2; }
section#ad { order: 3; }

/* Nawigacja górna */
nav#nav2 {
    text-align: center;
}

nav#nav2 ul,
nav#nav2 li {
    text-align: center;
    padding: 0;
    margin: 0 auto;
}

nav#nav2 li {
    display: inline-block !important;
    width: auto !important;
    min-width: auto !important;
    margin: 5px 8px !important;
}

nav#nav2 a {
    display: inline-block !important;
    padding: 8px 12px;
    font-size: 18px;
}

/* Prawa kolumna (teraz na dole) – centrowanie */
section#ad {
    text-align: center !important;
}

/* Nagłówki automatycznie dopasowane do szerokości ekranu */
h1, h2 {
    font-size: clamp(18px, 5vw, 40px) !important;
    text-align: center !important;
}

/* Główne menu nawigacyjne */
nav#nav {
    width: 100%;
    position: static !important;
    height: auto;
    background-color: black;
    text-align: center;
}

ul#listanavi,
ul.lista {
    width: 100%;
    display: block;
    white-space: normal;
    text-align: center;
    padding: 0;
}

li.opt1,
li.opt2 {
    width: 90%;
    display: block;
    margin: 5px auto !important;
}

/* Logo */
div#logo {
    width: 100%;
    height: 70px;
    background-size: cover;
	margin-top: -135px !important;
    text-align: center;
}

div#logo > p {
    font-size: 50px;
    bottom: 0;
}

div#logo > img {
	display:none !important;
}

div#logo > br {
	display:none !important;
}

/* Przycisk UP */
a#up {
    font-size: 30px;
    right: 10px;
    bottom: 10px;
}

/* Stopka */
footer#stopa {
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px;
}