*, body
{
/* font-variant-numeric: tabular-nums; psuje łamanie wyrazów */
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
font-kerning: normal;

letter-spacing: normal;
word-spacing: normal;

--scrollbarTrackBackgroundColor: #89CFF0;
--scrollbarTrackBorderColor: #FFFF00;
--scrollbarThumbBackgroundColor: #ffffff;
--scrollbarThumbBorderColor: #FF9999;

--color_accent1: #f69a50; /* piaskowy brąz */
--color_accent2: #106fbd; /* błękitny */
--color_accent3: #0bae56; /* zielony */
--color_accent4: #FFA500; /* pomarańczowy */

--color_nav: var(--color_accent2);
--color_nav_underline: var(--color_accent2);
--color_nav-hover: var(--color_accent3);
--color_nav-hover-underline: var(--color_accent1);

--color_white: #ffffff;
--color_white10pr: #f0f0f0;
--color_black: #000000;
--color_yellow: #F2C200;
--color_focus: var(--color_accent2);

}

/* SCROLLBAR */

@media (min-width: 769px)
{

body::-webkit-scrollbar {
  width: calc(18px + .25em);
}

body::-webkit-scrollbar-track {
  background: var(--scrollbarTrackBackgroundColor);
  border: 1px solid var(--scrollbarTrackBorderColor);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumbBackgroundColor);
  border-radius: 12px;
  border: 1px solid var(--scrollbarThumbBorderColor);
}

}

@media (max-width: 768px)
{

/*
body::-webkit-scrollbar {
  width: calc(9px + .25em);
}

body::-webkit-scrollbar-track {
  background: var(--scrollbarTrackBackgroundColor);
  border: 1px solid var(--scrollbarTrackBorderColor);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumbBackgroundColor);
  border-radius: 6px;
  border: 1px solid var(--scrollbarThumbBorderColor);
}
*/

}



:focus
{
outline: 2px solid transparent;
outline-offset: 2px;
box-shadow: 0 0 0 3px var(--color_focus);
transition: box-shadow 0.25s ease;
}

a
{
color: var(--color_nav);
text-decoration: underline;
text-decoration-color: var(--color_nav_underline);
text-underline-offset: 5px;
}

a:hover
{
color: var(--color_nav-hover);
text-decoration: underline;
text-decoration-thickness: 0.2rem;
text-decoration-color: var(--color_nav-hover-underline);
text-underline-offset: 4px;
transition: color 0.33s ease; /* Spowolnienie zmiany koloru */
}


/* */
/* SILNIK "GRAFICZNY" */
/* */


.container {
    display: flex;
    height: 100%;
flex-direction: column;
align-items: center;

}

/* Kolumna pierwsza */
.column1 {
    background-color: #fafafa;
	border-bottom: 1px solid var(--color_accent1); 
	border-top: 2px solid var(--color_accent1); 
	border-left: 1px solid var(--color_accent1); 
	border-right: 1px solid var(--color_accent1); 
    overflow: hidden;
    position: relative;
    flex: 1;
    max-height: 100px;
    white-space: nowrap;
    line-height: 150%;
	width: 90dvh;
}

/*
@media (max-width: 768px)
{
.column1
{
	width: 50vw;
	flex-direction: row;
}

}
*/

.column1-inner {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    align-items: center;
    transition: transform 0.3s ease; /* Smooth scrolling */
}

.column1-inner > * {
    width: 96px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 4px;
    margin: 4px;
}

/* Strzałki */
.arrow {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-left {
    left: 0;
}

.arrow-right {
    right: 0;
}

/* Ukrywanie strzałek */
.arrow.hidden {
    display: none;
}

/* Kolumna druga */
.column2 {
    background-color: #cccccc;
    width: 90dvh;
    height: 90dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	border-left: 1px solid var(--color_accent1); 
	border-right: 1px solid var(--color_accent1); 
	border-bottom: 1px solid var(--color_accent1); 
}

@media (max-width: 768px)
{
.column1
{
	border-left: none; 
	border-right: none;
}

.column2
{
	border-left: none;
	border-right: none;
	border-bottom: none;
}
}

@media (max-aspect-ratio: 1/1) {
    .container {
        flex-direction: column;
    }

    .column1 {
        width: 100%;
		height: 100%;
		max-height: 100px;
    }

    .column2 {
        width: 100%;
		height: 100vw;
    }

.column2 table
{

}

}


/* rozwiązanie tymczasowe dla HD: /*

/*

.column1 {
min-height: 100px;
max-height: 100px;
width: 49vw;
height: 49vw;
}

.column2 {
width: 49vw;
height: 49vw;
}

*/


/* */
/* TABELA PODSTAWOWA DLA KODOWANEK I GIER */
/* */

.table-container {
    width: 100%;
    height: 100%;
position: relative;
}

table {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 1vw;
	/* font-family: 'Comic Sans MS', cursive, sans-serif; /* Dziecięca czcionka */ */
}
    
th, td {
    border: 1px dotted #007fff;
    width: 6.25%; /* 100% / 16 = 6.25% (zawiera kolumnę 'legendy' oraz 15 kolumn utworzonych przez nas) */
    height: 6.25%;
    text-align: center;
}

thead th {
    height: auto;
    padding: 0;
}

th
{
font-size: calc(1.5vw + 1.5vh); /* Skalowalna czcionka zależna od wymiarów ekranu */
}

td
{
font-size: clamp(15px, 2vw, 25px);
}


thead th, tbody th {
    background-color: #dddddd;
}

table {
    -webkit-tap-highlight-color: transparent;
}


/* */
/* KODOWANKA PUZZLE Z OBRAZKIEM /*
/* */


#kodowankaPuzzleKontener .containerPuzzle
{
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: flex;
	aspect-ratio: 1 / 1;
    max-width: 100vh;
	width: 100%;
    overflow: hidden;
	z-index: 20;
}

#kodowankaPuzzleKontener .puzzle-piece {
	/* filter: blur(1px); */
    position: absolute;
    width: 22.25%; /* Ustal szerokość puzzla w procentach */
    height: 100%; /* Ustal wysokość puzzla */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	z-index: 2;
}

#kodowankaPuzzleKontener .piece1 { left: -5.125%; top: -5.25%; }
#kodowankaPuzzleKontener .piece2 { left: 11.575%; top: -5.25%; }
#kodowankaPuzzleKontener .piece3 { left: 28.225%; top: -5.25%; }
#kodowankaPuzzleKontener .piece4 { left: 44.875%; top: -5.25%; }
#kodowankaPuzzleKontener .piece5 { left: 61.525%; top: -5.25%; }
#kodowankaPuzzleKontener .piece6 { left: 78.175%; top: -5.25%; }

#kodowankaPuzzleKontener .piece7 { left: -5.125%; top: 11.425%; }
#kodowankaPuzzleKontener .piece8 { left: 11.575%; top: 11.425%; }
#kodowankaPuzzleKontener .piece9 { left: 28.225%; top: 11.425%; }
#kodowankaPuzzleKontener .piece10 { left: 44.875%; top: 11.425%; }
#kodowankaPuzzleKontener .piece11 { left: 61.525%; top: 11.425%; }
#kodowankaPuzzleKontener .piece12 { left: 78.175%; top: 11.425%; }

#kodowankaPuzzleKontener .piece13 { left: -5.125%; top: 28.075%; }
#kodowankaPuzzleKontener .piece14 { left: 11.575%; top: 28.075%; }
#kodowankaPuzzleKontener .piece15 { left: 28.225%; top: 28.075%; }
#kodowankaPuzzleKontener .piece16 { left: 44.875%; top: 28.075%; }
#kodowankaPuzzleKontener .piece17 { left: 61.525%; top: 28.075%; }
#kodowankaPuzzleKontener .piece18 { left: 78.175%; top: 28.075%; }

#kodowankaPuzzleKontener .piece19 { left: -5.125%; top: 44.725%; }
#kodowankaPuzzleKontener .piece20 { left: 11.575%; top: 44.725%; }
#kodowankaPuzzleKontener .piece21 { left: 28.225%; top: 44.725%; }
#kodowankaPuzzleKontener .piece22 { left: 44.875%; top: 44.725%; }
#kodowankaPuzzleKontener .piece23 { left: 61.525%; top: 44.725%; }
#kodowankaPuzzleKontener .piece24 { left: 78.175%; top: 44.725%; }

#kodowankaPuzzleKontener .piece25 { left: -5.125%; top: 61.375%; }
#kodowankaPuzzleKontener .piece26 { left: 11.575%; top: 61.375%; }
#kodowankaPuzzleKontener .piece27 { left: 28.225%; top: 61.375%; }
#kodowankaPuzzleKontener .piece28 { left: 44.875%; top: 61.375%; }
#kodowankaPuzzleKontener .piece29 { left: 61.525%; top: 61.375%; }
#kodowankaPuzzleKontener .piece30 { left: 78.175%; top: 61.375%; }

#kodowankaPuzzleKontener .piece31 { left: -5.125%; top: 78.025%; }
#kodowankaPuzzleKontener .piece32 { left: 11.575%; top: 78.025%; }
#kodowankaPuzzleKontener .piece33 { left: 28.225%; top: 78.025%; }
#kodowankaPuzzleKontener .piece34 { left: 44.875%; top: 78.025%; }
#kodowankaPuzzleKontener .piece35 { left: 61.525%; top: 78.025%; }
#kodowankaPuzzleKontener .piece36 { left: 78.175%; top: 78.025%; }

#kodowankaPuzzleKontener .hint-piece
{
cursor: pointer;
position: absolute;
width: 16.6666666667%; /* Ustal szerokość puzzla w procentach */
height: 16.6666666667%; */ /* Ustal wysokość puzzla */
margin: 0;
padding: 0;
box-sizing: border-box;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
}

#kodowankaPuzzleKontener .hint-piece p {
  cursor: pointer;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8); /* Półprzezroczyste czarne tło */
  backdrop-filter: blur(10px); /* Rozmycie tła pod spodem */
  padding: 5%;
  font-size: 2.5vh;
}

#kodowankaPuzzleKontener .puzzelCzarnyPrzezroczysty
{
fill: transparent;
}

#kodowankaPuzzleKontener .hint1 { }
#kodowankaPuzzleKontener .hint2 { left: 16.6666666667%; }
#kodowankaPuzzleKontener .hint3 { left: 33.3333333333%; }
#kodowankaPuzzleKontener .hint4 { left: 50%; }
#kodowankaPuzzleKontener .hint5 { left: 66.6666666666%; }
#kodowankaPuzzleKontener .hint6 { left: 83.3333333333%; }

#kodowankaPuzzleKontener .hint7 { top: 16.6666666667%; }
#kodowankaPuzzleKontener .hint8 { left: 16.6666666667%; top: 16.6666666667%; }
#kodowankaPuzzleKontener .hint9 { left: 33.3333333333%; top: 16.6666666667%; }
#kodowankaPuzzleKontener .hint10 { left: 50%; top: 16.6666666667%; }
#kodowankaPuzzleKontener .hint11 { left: 66.6666666666%; top: 16.6666666667%; }
#kodowankaPuzzleKontener .hint12 { left: 83.3333333333%; top: 16.6666666667%; }

#kodowankaPuzzleKontener .hint13 { top: 33.3333333333%; }
#kodowankaPuzzleKontener .hint14 { left: 16.6666666667%; top: 33.3333333333%; }
#kodowankaPuzzleKontener .hint15 { left: 33.3333333333%; top: 33.3333333333%; }
#kodowankaPuzzleKontener .hint16 { left: 50%; top: 33.3333333333%; }
#kodowankaPuzzleKontener .hint17 { left: 66.6666666666%; top: 33.3333333333%; }
#kodowankaPuzzleKontener .hint18 { left: 83.3333333333%; top: 33.3333333333%; }

#kodowankaPuzzleKontener .hint19 { top: 50%; }
#kodowankaPuzzleKontener .hint20 { left: 16.6666666667%; top: 50%; }
#kodowankaPuzzleKontener .hint21 { left: 33.3333333333%; top: 50%; }
#kodowankaPuzzleKontener .hint22 { left: 50%; top: 50%; }
#kodowankaPuzzleKontener .hint23 { left: 66.6666666666%; top: 50%; }
#kodowankaPuzzleKontener .hint24 { left: 83.3333333333%; top: 50%; }

#kodowankaPuzzleKontener .hint25 { top: 66.6666666666%; }
#kodowankaPuzzleKontener .hint26 { left: 16.6666666667%; top: 66.6666666666%; }
#kodowankaPuzzleKontener .hint27 { left: 33.3333333333%; top: 66.6666666666%; }
#kodowankaPuzzleKontener .hint28 { left: 50%; top: 66.6666666666%; }
#kodowankaPuzzleKontener .hint29 { left: 66.6666666666%; top: 66.6666666666%; }
#kodowankaPuzzleKontener .hint30 { left: 83.3333333333%; top: 66.6666666666%; }

#kodowankaPuzzleKontener .hint31 { top: 83.3333333333%; }
#kodowankaPuzzleKontener .hint32 { left: 16.6666666667%; top: 83.3333333333%; }
#kodowankaPuzzleKontener .hint33 { left: 33.3333333333%; top: 83.3333333333%; }
#kodowankaPuzzleKontener .hint34 { left: 50%; top: 83.3333333333%; }
#kodowankaPuzzleKontener .hint35 { left: 66.6666666666%; top: 83.3333333333%; }
#kodowankaPuzzleKontener .hint36 { left: 83.3333333333%; top: 83.3333333333%; }



/* */
/* KODOWANKA PUZZLE Z OBRAZKIEM 4x4 /*
/* */


#kodowankaPuzzleKontener_4x4 .containerPuzzle_4x4
{
    -webkit-tap-highlight-color: transparent;
    position: relative;
    display: flex;
	aspect-ratio: 1 / 1;
    max-width: 100vh;
	width: 100%;
    overflow: hidden;
	z-index: 20;
}

#kodowankaPuzzleKontener_4x4 .puzzle-piece {
    position: absolute;
    width: 34%; /* Ustal szerokość puzzla w procentach */
    height: 34%; /* Ustal wysokość puzzla */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 2;
}

/* Pozycje puzzli dla układu 4x4 */
#kodowankaPuzzleKontener_4x4 .piece1 { left: -7.75%; top: -7.75%; }
#kodowankaPuzzleKontener_4x4 .piece2 { left: 17.75%; top: -7.75%; }
#kodowankaPuzzleKontener_4x4 .piece3 { left: 43.15%; top: -7.75%; }
#kodowankaPuzzleKontener_4x4 .piece4 { left: 68.65%; top: -7.75%; }

#kodowankaPuzzleKontener_4x4 .piece5 { left: -7.75%; top: 17.7%; }
#kodowankaPuzzleKontener_4x4 .piece6 { left: 17.75%; top: 17.7%; }
#kodowankaPuzzleKontener_4x4 .piece7 { left: 43.15%; top: 17.7%; }
#kodowankaPuzzleKontener_4x4 .piece8 { left: 68.65%; top: 17.7%; }

#kodowankaPuzzleKontener_4x4 .piece9 { left: -7.75%; top: 43.15%; }
#kodowankaPuzzleKontener_4x4 .piece10 { left: 17.75%; top: 43.15%; }
#kodowankaPuzzleKontener_4x4 .piece11 { left: 43.15%; top: 43.15%; }
#kodowankaPuzzleKontener_4x4 .piece12 { left: 68.65%; top: 43.15%; }

#kodowankaPuzzleKontener_4x4 .piece13 { left: -7.75%; top: 68.65%; }
#kodowankaPuzzleKontener_4x4 .piece14 { left: 17.75%; top: 68.65%; }
#kodowankaPuzzleKontener_4x4 .piece15 { left: 43.15%; top: 68.65%; }
#kodowankaPuzzleKontener_4x4 .piece16 { left: 68.65%; top: 68.65%; }


#kodowankaPuzzleKontener_4x4 .hint-piece {
    cursor: pointer;
    position: absolute;
    width: 25%; /* Ustal szerokość puzzla w procentach */
    height: 25%; /* Ustal wysokość puzzla */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

#kodowankaPuzzleKontener_4x4 .hint-piece p {
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.8); /* Półprzezroczyste czarne tło */
    backdrop-filter: blur(10px); /* Rozmycie tła pod spodem */
    padding: 5%;
    font-size: 2.5vh;
}

#kodowankaPuzzleKontener_4x4 .puzzelCzarnyPrzezroczysty {
    fill: transparent;
    animation: pixelFadeOut 2s forwards;
}

#kodowankaPuzzleKontener_4x4 .puzzelCzarnyAnimacja,
#kodowankaPuzzleKontener .puzzelCzarnyAnimacja {
    animation: pixelFadeOut 2s forwards;
    will-change: opacity, transform;
}

@keyframes pixelFadeOut {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate3d(0, 0, 1, 0deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(10%, 10%, 0) scale(0.3) rotate3d(0, 0, 1, 360deg);
    }
}



/* Pozycje podpowiedzi dla układu 4x4 */
#kodowankaPuzzleKontener_4x4 .hint1 { }
#kodowankaPuzzleKontener_4x4 .hint2 { left: 25%; }
#kodowankaPuzzleKontener_4x4 .hint3 { left: 50%; }
#kodowankaPuzzleKontener_4x4 .hint4 { left: 75%; }

#kodowankaPuzzleKontener_4x4 .hint5 { top: 25%; }
#kodowankaPuzzleKontener_4x4 .hint6 { left: 25%; top: 25%; }
#kodowankaPuzzleKontener_4x4 .hint7 { left: 50%; top: 25%; }
#kodowankaPuzzleKontener_4x4 .hint8 { left: 75%; top: 25%; }

#kodowankaPuzzleKontener_4x4 .hint9 { top: 50%; }
#kodowankaPuzzleKontener_4x4 .hint10 { left: 25%; top: 50%; }
#kodowankaPuzzleKontener_4x4 .hint11 { left: 50%; top: 50%; }
#kodowankaPuzzleKontener_4x4 .hint12 { left: 75%; top: 50%; }

#kodowankaPuzzleKontener_4x4 .hint13 { top: 75%; }
#kodowankaPuzzleKontener_4x4 .hint14 { left: 25%; top: 75%; }
#kodowankaPuzzleKontener_4x4 .hint15 { left: 50%; top: 75%; }
#kodowankaPuzzleKontener_4x4 .hint16 { left: 75%; top: 75%; }



/* LABIRYNT */

        .labirynt {
            border-collapse: collapse;
        }
        .labirynt td {

            text-align: center;
            vertical-align: middle;
            border: 0;
        }
        .labirynt-black { background-color: black; }
        .labirynt-red { background-color: red; }
        .labirynt-white { background-color: white; }
        .labirynt-orange { background-color: orange; }
        .labirynt-green { background-color: green; }
        .labirynt-escape { background-color: white;  box-shadow: inset 0px 0px 0px 3px #007fff !important; }
        .labirynt-blinking {
            animation: labirynt-blinking 1s infinite;
        }
        @keyframes labirynt-blinking {
            0% { background-color: red; }
            50% { background-color: white; }
            100% { background-color: red; }
        }

.childlike-button {
    background: linear-gradient(45deg, #ff6ec4, #7873f5, #76b852); /* Kolorowy gradient */
    border: none;
    border-radius: 25px; /* Zaokrąglone rogi */
    color: white;
    padding: 15px 15px;
    font-size: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Delikatny cień tekstu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień przycisku */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.button-nowa
{
max-width: 48px;
    font-size: 1px;
    padding: 8px;
    border-radius: 60px; /* Zaokrąglone rogi */
 transform:scale(-1,1);
-webkit-transform:scale(-1,1);
 -moz-transform:scale(-1,1);
-o-transform:scale(-1,1)
}

.childlike-button:hover {
    transform: scale(1.1); /* Powiększenie przycisku przy najechaniu */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Większy cień przy najechaniu */
}

.childlike-button:active {
    transform: scale(0.9); /* Zmniejszenie przycisku przy kliknięciu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Mniejszy cień przy kliknięciu */
}

/* */
/* INTERFEJS WSPÓLNY GIER */
/* */

#ikonkiHDkontener
{
width: auto;
}

@media screen and (max-width: 768px)
{
#ikonkiHDkontener
{
display: none;
}

.instrukcjaHD
{
display: none;
}

.homePageHD
{
display: none;
}

.instrukcjaMobile
{
position: fixed;
top: 0;
right: 0;
background-color: #ffffff;
width: 64px;
height: 64px;
text-align: center;
height: auto;
border: 1px solid;
z-index: 200;
}

.homePageMobile
{
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
width: 64px;
height: 64px;
text-align: center;
height: auto;
border: 1px solid;
z-index: 200;
}
}

@media screen and (min-width: 769px)
{
.instrukcjaMobile
{
display: none;
}

.homePageMobile
{
display: none;
}
}


/* */
/* STATKI PIRACKIE */
/* */

.planszaStatki table
{
border: 0!important;
}

.planszaStatki td
{
border: 0!important;
width: calc(100% / 12); /* 12 bo tyle rzędów i kolumn w tabeli piratów */
height: calc(100% / 12); /* 12 bo tyle rzędów i kolumn w tabeli piratów */
font-size: clamp(15px, 2vw, 25px);
}

.planszaStatki-black { background-color: black; }
.planszaStatki-red { background-color: red; }
.planszaStatki-white { background-color: white; }
.planszaStatki-orange { background-color: orange; }
.planszaStatki-3 { background-color: green; }
.planszaStatki-blinking { animation: blinking 1s infinite; }

.planszaStatki-black
{
background-color: black;
}

.piraciPionki
{
width: 80%;
max-width: calc(100vh / 18); /* 12 + 6 offsetu bo tyle rzędów i kolumn w tabeli piratów */
height: 80%;
max-width: calc(100vh / 18); /* 12 + 6 offsetu bo tyle rzędów i kolumn w tabeli piratów */
}

.planszaStatki-0 { /* WODA */
    background-color: lightblue;
	background-image: radial-gradient(circle, rgba(255, 100, 255, 0.2) 1px, rgba(100, 255, 255, 0.3) 1px);
}

.planszaStatki-1 { /* LĄD */
    background-color: green;
}

.planszaStatki-2 {
    background-color: green;
    color: white;
    box-shadow: 0px 0px 0px 1px white inset;
}

.planszaStatki-3 { /* KONIEC */
    background-color: green;
	color: white;
	box-shadow: 0px 0px 0px 1px white inset;
}

.planszaStatki-4 { /* puste */
    background-color: green;
	color: white;
}

.planszaStatki-5 { /* FORT */
    background-color: green;
	color: white;
	/* box-shadow: 0px 0px 0px 1px red inset; */
}

.planszaStatki-6 { /* MIELIZNA */
    background-color: lightblue;
	color: white;
	background-image: radial-gradient(circle, rgba(255, 100, 255, 0.2) 1px, rgba(100, 255, 255, 0.3) 1px);
}

.planszaStatki-7 { /* PIRACI */
    background-color: lightblue;
	color: white;
	/* box-shadow: 0px 0px 0px 1px red inset; */
	background-image: radial-gradient(circle, rgba(255, 100, 255, 0.2) 1px, rgba(100, 255, 255, 0.3) 1px);
}

.planszaStatki-8 { /* SKARBY */
    background-color: lightblue;
	background-image: radial-gradient(circle, rgba(255, 100, 255, 0.2) 1px, rgba(100, 255, 255, 0.3) 1px);
}

.planszaStatki-green {
    background-color: green;
    color: white;
    font-weight: bold;
}

.planszaStatki-darkblue {
    background-color: darkblue;
    color: white;
    font-weight: bold;
}

.planszaStatki-blue {
    background-color: blue;
    color: white;
    font-weight: bold;
}

.planszaStatki-yellow {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

.planszaStatki-blinking {
    animation: blinking 1s infinite;
}

@keyframes blinking {
	0% { background-color: none; }
    50% { background-color: gold; }
    100% { background-color: none; }
}

/* */
/* PAPIER, NOŻYCE, KAMIEŃ */
/* */

#statystykiPapierNozyceKamien
{
}

#tablicaGry
{
background-color: #ffffff;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0px;
}

.komorkaTablicaGry
{
line-height: 150%;
display: flex;
justify-content: center;
align-items: center;
/* border: 1px solid #ccc; */
font-size: clamp(15px, 2vw, 25px);
text-align: center;
overflow: hidden;
position: relative;
flex-direction: column;
aspect-ratio: 1 / 1; /* Ustawienie proporcji na kwadrat */
cursor: pointer!important;
}

#tablicaGry .wybranaFigura
{
text-transform: uppercase;
}

#tablicaGry .wynik
{
padding: 1rem;
}
.komorkaTablicaGry img {
width: 100%;
max-width: 15vw;
display: block;
margin: 0 auto;
height: auto;
object-fit: cover;
}

@media screen and (max-width: 768px)
{
.komorkaTablicaGry img
{
max-width: 20vw;
cursor: pointer;
}

.komorkaTablicaGry
{
line-height: 140%;
font-size: clamp(14px, 2vw, 22px);
position: relative;
cursor: pointer;
}

}

#tablicaGry .pnkWygrana {
    background-color: gold;
}

#tablicaGry .pnkWygrana::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: gold;
    z-index: -1;
}

#tablicaGry .pnkPrzegrana
{
background-color: #D3D3D3;
}

#tablicaGry .pnkRemis
{
background-color: #D3D3D3;
}

#tablicaGry .pnkWyniki
{
background-color: #89CFF0;
cursor: pointer;
}

#tablicaGry .pnkWyniki {
  background-color: #89CFF0;
  animation:  blink-pnkWyniki 2s infinite;
cursor: pointer;
}

@keyframes blink-pnkWyniki {
  0% {
    background-color: #89CFF0;
  }
  50% {
    background-color: #FFFFFF;
  }
  100% {
    background-color: #89CFF0;
  }
}

.animacjaBandyta {
position: absolute;
width: 100%;
height: 300%;
top: 0;
animation: przesuwanie 0.45s linear infinite;
}
@keyframes przesuwanie {
0% { top: 0; }
100% { top: -200%; }
}


/* */
/* SLIDER PUZZLE */
/* */


.gra5200sliderPuzzleTablica #puzzle-container {
	overflow: hidden;
    position: relative;
    width: 917px;
    height: 917px;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
	z-index: 1;
}

.gra5200sliderPuzzleTablica 	 {
    width: 100%;
    height: 100%;
    background-size: 300% 300%;
    cursor: grab;
    transition: transform 0.3s;
	border: 1px solid;
}

.gra5200sliderPuzzleTablica .puzzle-piece
{
    background-size: 300% 300%;
}

.gra5200sliderPuzzleTablica .puzzle-piece.dragging {
    opacity: 0.5;
}

.gra5200sliderPuzzleTablica .puzzle-piece.empty {
    background: none;
    cursor: default;
}

.gra5200sliderPuzzleInterfejs #hint-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.gra5200sliderPuzzleTablica #hint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
    z-index: 10;
}

.gra5200sliderPuzzleTablica .full-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Dopasowanie obrazka do rozmiaru div, przycięcie jeśli konieczne */
    position: absolute; /* Ustawienie pozycji absolutnej */
    top: 0;
    left: 0;
}


/* */
/* GRA 5202, ROZSYPANE OBRAZKI */
/* */


        /* Stylizacja tabeli i komórek */
        #gra5202 table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
#gra5202 td {
    border: 1px solid #ddd;
    padding: 0;
    width: 16.66%;
    height: 0;
    padding-bottom: 16.66%;
    position: relative;
    transition: transform 0.5s ease; /* Animacja przemieszczenia */
    position: relative; /* Umożliwia pozycjonowanie pseudo-elementu względem komórki */
}
        #gra5202 img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            display: block;
        }
#gra5202 td.highlighted::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 20px solid rgba(255, 215, 0, 0.9); /* Złota poświata wokół komórki */
    border-radius: 5px;
    z-index: 1; /* Ustawienie na wyższym poziomie niż zawartość komórki */
    pointer-events: none; /* Zapobiega interakcji z pseudo-elementem */
}


/* */
/* GRA 5203, ROZSYPANE OBRAZKI 8x8 */
/* */


        /* Stylizacja tabeli i komórek */
        #gra5203 table {
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            table-layout: fixed;
			border: none!important;
        }
#gra5203 td {
    border: none!important;
    padding: 0;
    width: 12.5%;
    height: 0;
    padding-bottom: 12.5%;
    position: relative;
    transition: transform 0.5s ease; /* Animacja przemieszczenia */
    position: relative; /* Umożliwia pozycjonowanie pseudo-elementu względem komórki */
}
        #gra5203 img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            display: block;
        }
#gra5203 td.highlighted::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 20px solid rgba(255, 215, 0, 0.9); /* Złota poświata wokół komórki */
    border-radius: 5px;
    z-index: 1; /* Ustawienie na wyższym poziomie niż zawartość komórki */
    pointer-events: none; /* Zapobiega interakcji z pseudo-elementem */
}



/* */
/* ZNAKI DROGOWE I INNE SVG */
/* */


@keyframes SVG_rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.SVG_rotate-animation {
    animation: SVG_rotate 1s linear;
}

.hint-img
{
width: 100%;
max-width: 96px;
}

.legend-img
{
width: 100%;
max-width: 64px;
}


/* */
/* QUIZ */
/* */


.QUIZ_rotating-text {
	font-weight: 600;
    display: inline-block;
    animation: QUIZ_rotate-and-glow 5s infinite;
}

@keyframes QUIZ_rotate-and-glow {
    0% {
        transform: rotateY(0deg);
        color: black;
		font-weight: 600;
    }
    75% {
        transform: rotateY(360deg);
        color: black;
		font-weight: 600;
    }
    90% {
        transform: rotateY(360deg);
        color: gold;
		font-weight: 600;
    }
    100% {
        transform: rotateY(360deg);
        color: black;
		font-weight: 600;
    }
}


/* */
/* 802 pisanie po ekranie */
/* */

.table-container802
{
   position: relative; /* Ustawienie kontekstu pozycji dla dzieci */
    width: 100%;
    height: 100%;
}

#table802 {
    position: relative;
    z-index: 20;
    cursor: pointer;
    border-collapse: collapse;
    font-size: 1vw;
    width: 100vmin; /* Użycie mniejszego z wymiarów widoku */
    height: 100vmin; /* Użycie mniejszego z wymiarów widoku */
    max-width: 100%;
    max-height: 100%;
    table-layout: fixed; /* Utrzymanie stałego rozmiaru komórek */
	border: none;
}

#table802 td {
    width: calc(100% / 64); /* Szerokość komórki */
    height: calc(100% / 64); /* Wysokość komórki */
    text-align: center;
    vertical-align: middle;
    aspect-ratio: 1 / 1; /* Zachowanie kwadratowego kształtu */
	border: none;
    font-size: clamp(15px, 2vw, 25px);
}

#table802 tr {
    height: calc(100% / 64); /* Wysokość wiersza */
}

#table802 .lit {
    background-color: #ffffff;
	/* border: 6px solid #00ff00; */
	box-shadow: 10px 10px 10px #000000;
}

#table802 .edge {
    background-color: gold;
}

#table802 .activated {
    background-color: #96D406; /* #3bb143; */
}

#table802 .gold {
    background-color: gold;
}

#table802 .final {
    background-color: gold;
    animation: glow 1.5s infinite alternate cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 0 32px rgba(255, 223, 0, 0.5);
}

@keyframes glow {
    from {
        background-color: gold;
        box-shadow: 0 0 1px rgba(255, 223, 0, 1);
    }
    to {
        background-color: gold;
        box-shadow: 0 0 32px rgba(255, 255, 0, 1);
    }
}

thead th, tbody th {
    background-color: #dddddd;
}

#canvas802 {
    display: none;
}


/* */
/* OVERLAY */
/* */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Zmniejszona przeźroczystość */
    display: none;
    z-index: 1000;
    backdrop-filter: blur(5px); /* Rozmycie tła */
    padding: 2pt;
    overflow-y: auto; /* Dodanie przewijania w osi Y */
}

.overlay-content {
	margin: 0 auto;
	max-width: 1200px;
    line-height: 200%;
    position: relative;
    text-align: center;
    color: white;
	font-size: clamp(18px, 3vw, 30px);
    padding: 2pt;
    padding-top: 50px; /* Dodanie paddingu na górze */
    padding-bottom: 50px; /* Dodanie paddingu na dole */
}

.closebtn {
    margin: 0 auto;
    font-size: calc(1.4vw + 1.4vh); /* Dwukrotnie większy niż overlay-content */
	padding-bottom: 1.4vw;
    color: white;
    width: 80%;
	text-align: center;
    background-color: var(--color_accent3);
    border: 1px solid;
    cursor: pointer;
    z-index: 10001; /* Upewnienie się, że przycisk jest na wierzchu overlay */
    pointer-events: auto; /* Upewnienie się, że przycisk jest interaktywny */
	text-transform: uppercase;
}

.overlayZasady fieldset
{
text-align: left;
}

.overlayZasady fieldset
{
color: #000000;
background-color: #ffffff;
margin: 1rem;
padding: 1rem;
}

.overlayContainerSchowaj
{
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
line-height: 1!important;
z-index: 10001;
}

.overlayCloseSVG
{
width: 64px;
height: 64px;
padding-top: 24px;
}

@media screen and (max-width: 768px)
{
.overlayCloseSVG
{
width: 32px;
height: 32px;
padding-top: 12px;
}
}

@keyframes rainbow {
    0% { background-color: red; }
    16.67% { background-color: orange; }
    33.33% { background-color: yellow; }
    50% { background-color: green; }
    66.67% { background-color: blue; }
    83.33% { background-color: indigo; }
    100% { background-color: violet; }
}
@keyframes textColorChange {
    0% { color: white; }
    16.67% { color: black; }
    33.33% { color: white; }
    50% { color: black; }
    66.67% { color: white; }
    83.33% { color: black; }
    100% { color: white; }
}
.blinking {
    animation: rainbow 3s linear infinite, textColorChange 3s linear infinite;
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
}


/* CIASTECZKA */


#cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-height: 200px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
	line-height: 1.25;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
	box-shadow: inset 0 2px 0 0 var(--color_accent1); 
}

#cookie-banner p {
    margin: 0;
    flex-grow: 1;
}

#cookie-banner a
{
color: var(--color_accent1);
}

#cookie-banner a
{
color: var(--color_accent1);
text-decoration-color: var(--color_accent3);
}

#cookie-banner a:hover
{
color: var(--color_accent4);
text-decoration-color: var(--color_accent2);
}

#accept-cookies {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-left: 20px;
}

#accept-cookies:hover {
    background-color: #45a049;
}