1592 lines
42 KiB
CSS
1592 lines
42 KiB
CSS
/* ============================ */
|
||
/* ====== GLOBÁLNE ŠTÝLY ====== */
|
||
/* ============================ */
|
||
|
||
/* ================================================ */
|
||
/* Reset štýlov pre konzistenciu medzi prehliadačmi */
|
||
/* ================================================ */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
/* ============================ */
|
||
/* Základné nastavenia pre body */
|
||
/* ============================ */
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 100vh;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
overflow-x: hidden;
|
||
background: var(--Backgrtound, url('../images/worlds/background.jpg')) lightgray 50% / cover no-repeat;
|
||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
||
cursor: url('../images/cursor.png') 5 5, auto;
|
||
justify-content: center;
|
||
display: flex;
|
||
}
|
||
|
||
/* ============================= */
|
||
/* ========== LOADING ========== */
|
||
/* ============================= */
|
||
.loading-screen {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 1;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.loading-content {
|
||
text-align: center;
|
||
color: white;
|
||
}
|
||
|
||
.loading-logo {
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.loading-text-jozino {
|
||
display: flex;
|
||
width: 444px;
|
||
height: 43px;
|
||
transform: rotate(0.093deg);
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
flex-shrink: 0;
|
||
|
||
/* Štýlovanie textu */
|
||
color: #FFF;
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 100px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 18px; /* 20% */
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.5rem;
|
||
position: relative;
|
||
z-index: 10;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
}
|
||
|
||
.loading-text-banik {
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 45px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 100%;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
|
||
/* Gradient pozadí pre text */
|
||
background: conic-gradient(from 90deg at 50% 50%, #ECD517 0deg, #ECBB17 360deg);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
position: relative;
|
||
z-index: 20;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 50px;
|
||
height: 50px;
|
||
border: 4px solid rgba(236, 207, 23, 0.3);
|
||
border-top: 4px solid #ECCF17;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 1rem;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-message {
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 22px;
|
||
color: #ECCF17;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 0.7; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
/* Hlavný kontajner pre progress bar */
|
||
/* Obsahuje progress bar a textové informácie */
|
||
.loading-progress-container {
|
||
width: 100%; /* Celá šírka */
|
||
max-width: 400px; /* Maximálna šírka 400px */
|
||
margin: 1.5rem auto 0; /* Vertikálny spacing a centrovanie */
|
||
}
|
||
|
||
/* Progress Bar (pozadie) */
|
||
/* Sivý pruh ktorý reprezentuje 0-100% */
|
||
.loading-progress-bar {
|
||
width: 100%; /* Celá šírka kontajnera */
|
||
height: 8px; /* Výška progress baru */
|
||
background-color: rgba(236, 207, 23, 0.2); /* Priehľadná žltá farba pozadia */
|
||
border-radius: 4px; /* Zaoblené rohy */
|
||
overflow: hidden; /* Skryje obsah mimo progress baru */
|
||
margin-bottom: 0.5rem; /* Spacing pod progress barom */
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); /* Vnútorný tieň pre 3D efekt */
|
||
}
|
||
|
||
/* Progress Fill (žltý pásik) */
|
||
/* Animovaný žltý pásik ktorý sa napĺňa */
|
||
.loading-progress-fill {
|
||
height: 100%; /* Celá výška progress baru */
|
||
width: 0%; /* Začína na 0% */
|
||
background: linear-gradient(90deg, #ECCF17 0%, #FFE55C 50%, #ECCF17 100%); /* Žltý gradient */
|
||
border-radius: 4px; /* Zaoblené rohy */
|
||
transition: width 0.3s ease; /* Plynulá animácia šírky */
|
||
box-shadow: 0 0 10px rgba(236, 207, 23, 0.5); /* Žltý svietiaci efekt */
|
||
}
|
||
|
||
/* Progress Text (percentá a detaily) */
|
||
/* Zobrazuje percento a počet načítaných zdrojov */
|
||
.loading-progress-text {
|
||
display: flex; /* Flexbox pre rozmiestnenie textu */
|
||
justify-content: space-between; /* Text na ľavej a pravej strane */
|
||
align-items: center; /* Vertikálne vycentrovanie */
|
||
font-family: "Luckiest Guy", sans-serif; /* Font rovnaký ako v hre */
|
||
color: #ECCF17; /* Žltá farba textu */
|
||
font-size: 14px; /* Veľkosť textu */
|
||
}
|
||
|
||
/* Progress Percentage (napr. "75%") */
|
||
/* Zobrazuje aktuálne percento načítania */
|
||
#loading-progress-percentage {
|
||
font-size: 16px; /* Väčší text pre percento */
|
||
font-weight: bold; /* Tučný text */
|
||
}
|
||
|
||
/* Progress Details (napr. "15/20 zdrojov") */
|
||
/* Zobrazuje počet načítaných zdrojov */
|
||
#loading-progress-details {
|
||
font-size: 12px; /* Menší text pre detaily */
|
||
opacity: 0.8; /* Mierne priehľadný text */
|
||
}
|
||
|
||
|
||
|
||
/* ============================ */
|
||
/* Horný, bočný menuu button */
|
||
/* ============================ */
|
||
#menuButton {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
width: 43px;
|
||
height: 43px;
|
||
border-radius: 50%;
|
||
background-image: url("../images/menubutton.png");
|
||
background-size: cover;
|
||
background-position: center;
|
||
border: none;
|
||
cursor: pointer;
|
||
outline: none;
|
||
z-index: 1000;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
}
|
||
.kruhove-tlacidlo {
|
||
width: 43px;
|
||
height: 43px;
|
||
border-radius: 50%; /* Tvar kruhu */
|
||
background-image: url("../images/menubutton.png"); /* Cesta k obrázku, ktorý chceš použiť ako pozadie */
|
||
background-size: cover; /* Upravuje veľkosť obrázku na takú, aby pokrýval celé tlačidlo */
|
||
background-position: center; /* Zarovnáva obrázok na strede */
|
||
border: none; /* Bez ohraničenia */
|
||
cursor: pointer; /* Zmení kurzor na ukazovateľ, aby naznačil interaktívnosť */
|
||
outline: none; /* Odstráni ohraničenie po kliknutí */
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
}
|
||
.kruhove-tlacidlo:focus {
|
||
outline: none; /* Odstráni ohraničenie po získaní zaostrenia */
|
||
}
|
||
|
||
|
||
|
||
/* ============================= */
|
||
/* ========== MODALY ========= */
|
||
/* ============================= */
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(9px);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.modal.modal-open {
|
||
background: rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(9px);
|
||
}
|
||
|
||
.execise-window{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
|
||
width: 70%;
|
||
height: 80%;
|
||
max-width: 450px;
|
||
max-height: 500px;
|
||
min-width: 400px;
|
||
min-height: 450px;
|
||
background: url('../images/pozadie_button_mobile_2.png') lightgray 50% / cover no-repeat;
|
||
|
||
/* Vnútorný obsah */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 2rem 3rem;
|
||
box-sizing: border-box;
|
||
border: 4px solid #ECCF17;
|
||
border-radius: 30px;
|
||
|
||
/* Animácie */
|
||
transition: all 0.4s ease;
|
||
}
|
||
|
||
/* Vysledok element - skrytý na začiatku */
|
||
.vysledok {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.85);
|
||
backdrop-filter: blur(5px);
|
||
display: none; /* PRIDANÉ: skrytý na začiatku */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
border-radius: 30px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Keď sa zobrazuje výsledok */
|
||
.vysledok.show {
|
||
display: flex;
|
||
}
|
||
|
||
/* Kontajner pre obsah vysledku */
|
||
.vysledok center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Obrázok výsledku */
|
||
.vysledok img {
|
||
max-width: 300px !important;
|
||
max-height: 250px !important;
|
||
width: auto !important;
|
||
height: auto !important;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* Správy v rámci vysledku */
|
||
.vysledok .attempt-message,
|
||
.vysledok .success-message {
|
||
margin-top: 20px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
/* Style pre recove cvicenie */
|
||
.cvicenie-content {
|
||
padding: 10px;
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.cvicenie-text {
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy";
|
||
font-size: 45px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.cvicenie-text p {
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.cvicenie-text button {
|
||
width: auto;
|
||
max-height: 200px;
|
||
display: block;
|
||
}
|
||
|
||
.cvicenie-text img{
|
||
min-width: 100px;
|
||
max-width: 300px;
|
||
max-height: 200px;
|
||
max-width: 253px;
|
||
height: 200px;
|
||
width: auto;
|
||
}
|
||
|
||
/* Štýl div kontajnera pred a po nahravani */
|
||
.tlacidlo {
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
outline: none; /* Odstráňte ohraničenie */
|
||
transition: transform 0.2s ease; /* Animácia pre plynulé zväčšenie */
|
||
width: 253px;
|
||
height: 69px;
|
||
flex-shrink: 0;
|
||
border-radius: 30px;
|
||
border: 4px solid #1A511D;
|
||
background: linear-gradient(0deg, #15981E 0%, #0F1 100%);
|
||
position: relative;
|
||
justify-content: center;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.tlacidlo button {
|
||
background-color: transparent;
|
||
border: none
|
||
}
|
||
.tlacidlo a {
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy";
|
||
font-size: 40px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.tlacidlo:hover {
|
||
background-color: rgba(255, 228, 196, 0);
|
||
transform: scale(0.98);
|
||
border: 4px solid #9A0003;
|
||
background: linear-gradient(0deg, #AD0003 0%, #FF2528 100%);
|
||
}
|
||
.tlacidlo:active {
|
||
background-color: rgba(255, 228, 196, 0);
|
||
transform: scale(0.98);
|
||
border: 4px solid #9A0003;
|
||
background: linear-gradient(0deg, #AD0003 0%, #FF2528 100%);
|
||
}
|
||
/* Štýl div kontajnera počas nahrávania */
|
||
.tlacidlo.recording {
|
||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||
transform: scale(0.98);
|
||
animation: recording-pulse 1s ease-in-out infinite alternate;
|
||
}
|
||
.tlacidlo.recording button {
|
||
background: transparent !important;
|
||
cursor: not-allowed !important;
|
||
}
|
||
.tlacidlo.recording button a {
|
||
color: #fff !important;
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
|
||
}
|
||
/* Pulzovanie celého div-u */
|
||
@keyframes recording-pulse {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
|
||
/* Style pre posluchove cvicenie */
|
||
.cvicenie {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(9px);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.cvicenie-content-2 {
|
||
padding: 20px;
|
||
display: flex;
|
||
gap: 5px;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.cvicenie-content-2 p {
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 22px;
|
||
font-style: normal;
|
||
font-weight: 100;
|
||
line-height: normal;
|
||
margin: 0;
|
||
padding: 0px 10px;
|
||
letter-spacing: 1.6px;
|
||
}
|
||
.cvicenie-content-2 h1 {
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy";
|
||
font-size: 40px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
text-transform: uppercase;
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.buttonsContainer {
|
||
gap: 10px;
|
||
}
|
||
#buttonsContainer img {
|
||
width: 50px; /* Prispôsobte veľkosť podľa potreby */
|
||
padding: 2px;
|
||
height: 50px;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
}
|
||
.buttonsContainer:hover img {
|
||
scale: 0.98;
|
||
}
|
||
|
||
|
||
/* Modal pre pauzu/back to menu */
|
||
.main-menu ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.main-menu li {
|
||
margin-bottom: 1rem;
|
||
}
|
||
/* Štýlovanie menu tlačidiel */
|
||
.menu-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
position: relative;
|
||
|
||
/* Rozměry tlačidla podľa Figma */
|
||
width: 250px;
|
||
height: 64px;
|
||
flex-shrink: 0;
|
||
border-radius: 30px;
|
||
|
||
/* Tieň pre tlačidlá */
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
|
||
/* Štandardné neaktívne tlačidlo */
|
||
border: 4px solid #AC3F0B;
|
||
background: url('../images/pozadie_button.png') lightgray 50% / cover no-repeat;
|
||
|
||
/* Prechod pre animácie */
|
||
transition: all 0.3s ease;
|
||
|
||
/* Text štýlovanie */
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 32px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 20px; /* 50% */
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
|
||
/* Základná farba textu pre neaktívne tlačidlá */
|
||
color: #FFF;
|
||
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
z-index: 10000;
|
||
}
|
||
/* Hover efekt pre menu tlačidlá */
|
||
.menu-button:hover {
|
||
box-shadow: inset 0 0 20px 2px rgba(236, 207, 23, 0.3);
|
||
border: 4px solid #ECCF17;
|
||
scale: 0.98;
|
||
}
|
||
/* Aktívne tlačidlo pri stlačení */
|
||
.menu-button:active {
|
||
transform: rotate(0.093deg) translateY(0) scale(0.98);
|
||
filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
|
||
}
|
||
|
||
|
||
/*Modal pre endgame - game over*/
|
||
.stats{
|
||
padding-bottom: 15px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.stats a {
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy";
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 20px; /* 50% */
|
||
text-transform: uppercase;
|
||
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.stats span {
|
||
color: #FFF;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
font-family: "Luckiest Guy";
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
justify-content: center;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.stats img {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
/* Hviezdy v modali */
|
||
.modal-stars {
|
||
display: flex;
|
||
gap: 5px;
|
||
justify-content: center;
|
||
margin-top: -15px;
|
||
}
|
||
.modal-stars img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
.gameend{
|
||
height: auto;
|
||
width: auto;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
/*Dialogové okno pre menu */
|
||
.dialogove-okno {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(9px);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.close {
|
||
position: absolute;
|
||
top: 20px;
|
||
right: 30px;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 64px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
z-index: 1001;
|
||
transition: transform 0.4s ease;
|
||
}
|
||
.close:hover {
|
||
transform: rotate(15deg) scale(1.05);
|
||
}
|
||
|
||
#blur-background {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
backdrop-filter: blur(4px); /* Rozmazanie všetkého pod #blur-background */
|
||
z-index: 999;
|
||
}
|
||
.cvicenie-open #blur-background {
|
||
filter: blur(4px) grayscale(50%); /* Aplikuj rozmazanie a zosvetlenie pozadia, keď je dialogové okno otvorené */
|
||
}
|
||
|
||
|
||
/* ============================= */
|
||
/* ========= OKNO HRY ======== */
|
||
/* ============================= */
|
||
.main-container {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
background-color: #17284900;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
grid-template-columns: 800px 300px;
|
||
justify-content: center;
|
||
text-align: center;
|
||
gap: 20px;
|
||
align-content: center;
|
||
}
|
||
|
||
/* ============================= */
|
||
/* ======== HORNÝ PANEL ======== */
|
||
/* ============================= */
|
||
.top-panel {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
height: 80px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.panel-item {
|
||
width: 253px;
|
||
height: 69px;
|
||
border-radius: 30px;
|
||
border: 4px solid #AC3F0B;
|
||
background-image: url('../images/pozadie_button_mobile_2.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
color: #FFF;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
}
|
||
|
||
/* Stredný panel - PEXESO s odlišným borderom a textom */
|
||
.game-title {
|
||
border: 4px solid #ECCF17 !important;
|
||
}
|
||
|
||
.game-title span {
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
-webkit-text-stroke: unset;
|
||
}
|
||
|
||
/* ============================= */
|
||
/* ========== CANVAS ========== */
|
||
/* ============================= */
|
||
.content-section {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
gap: 20px;
|
||
max-width: 1200px;
|
||
flex-wrap: wrap;
|
||
flex-direction: row;
|
||
align-content: center;
|
||
margin: 0;
|
||
background-color: #17284900;
|
||
}
|
||
|
||
/* Hlavný herný canvas */
|
||
#gameCanvas {
|
||
background-image: url("../images/pozadie.jpg");
|
||
min-width: 800px; /* Desktopová veľkosť */
|
||
min-height: 800px;
|
||
max-width: 800px;
|
||
max-height: 800px;
|
||
height: 800px;
|
||
width: 800px;
|
||
flex-shrink: 0;
|
||
|
||
/* === GRID NASTAVENIE === */
|
||
display: grid;
|
||
gap: 1.5%;
|
||
padding: 2%;
|
||
align-content: center;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
justify-items: stretch;
|
||
|
||
/* === VZHĽAD === */
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
border: 4px solid #AC3F0B;
|
||
background-size: cover;
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
transition: all 0.4s ease;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
|
||
/* === BOX-SIZING === */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* =========================================== */
|
||
/* ZÁKLADNÉ NASTAVENIE KARTY */
|
||
/* Toto je predvolené nastavenie pre karty */
|
||
/* =========================================== */
|
||
.card-container {
|
||
display: flex;
|
||
width: 100%;
|
||
height: auto;
|
||
aspect-ratio: 1 / 1;
|
||
|
||
|
||
container-type: inline-size;
|
||
|
||
background-image: url('../images/pozadie_button_mobile_2.png');
|
||
border: 2px solid #ECCF17 !important;
|
||
border-radius: 10px;
|
||
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
transition: all 0.5s ease;
|
||
|
||
perspective: 1000px;
|
||
transform-style: preserve-3d;
|
||
position: relative;
|
||
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.card-container:hover {
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
box-shadow: 0 0 20px 2px #ECCF17 inset;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
scale: 0.98;
|
||
}
|
||
|
||
/* ===== ANIMÁCIA OTÁČANIA KARIET ===== */
|
||
.card-container.flipping {
|
||
transform: rotateY(90deg) scale(1.05);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/* ===== ANIMÁCIA PRE NESPRÁVNE PÁRY (TRASENIE) ===== */
|
||
@keyframes wrongMatch {
|
||
0% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
100% { transform: translateX(0); }
|
||
}
|
||
|
||
.card-container.wrong-match {
|
||
animation: wrongMatch 0.5s ease;
|
||
border-color: #ff4757 !important;
|
||
box-shadow: 0 0 15px 2px rgba(255, 71, 87, 0.5) inset !important;
|
||
}
|
||
|
||
/* ===== ANIMÁCIA PRE SPRÁVNU ODPOVEĎ (NÁJDENÝ PÁR) ===== */
|
||
@keyframes correctMatch {
|
||
0% {
|
||
border-color: #16B921;
|
||
box-shadow: 0 0 15px 2px rgba(22, 185, 33, 0.3) inset;
|
||
}
|
||
50% {
|
||
border-color: #1ED929;
|
||
box-shadow: 0 0 25px 4px rgba(30, 217, 41, 0.6) inset;
|
||
transform: scale(1.08);
|
||
}
|
||
100% {
|
||
border-color: #16B921;
|
||
box-shadow: 0 0 15px 2px rgba(22, 185, 33, 0.3) inset;
|
||
transform: scale(1.02);
|
||
}
|
||
}
|
||
|
||
.card-container.correct-match {
|
||
animation: correctMatch 0.6s ease;
|
||
}
|
||
|
||
|
||
|
||
.card-container img {
|
||
width: 55%;
|
||
height: 55%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* Text na rubovej strane karty (PEXESO) - väčší */
|
||
.card-container span {
|
||
font-size: 20cqw;
|
||
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
-webkit-text-stroke: unset;
|
||
|
||
max-width: 90%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding: 0 5%;
|
||
}
|
||
|
||
.card-container.flipped span {
|
||
font-size: 11cqw;
|
||
}
|
||
|
||
/* =========================================== */
|
||
/* Blikanie času v posledných 10 sekundách */
|
||
/* =========================================== */
|
||
#game-time.time-warning {
|
||
animation: time-blink 0.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes time-blink {
|
||
0%, 100% {
|
||
color: #ffffff;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
50% {
|
||
color: #ff0000;
|
||
text-shadow: 0 0 10px rgba(255, 0, 0, 0.8),
|
||
2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.time-display {
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
/* Červené upozornenie keď ostáva málo času */
|
||
.time-display.warning {
|
||
color: #ff6b6b !important;
|
||
animation: timePulse 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes timePulse {
|
||
0%, 100% {
|
||
transform: scale(1);
|
||
text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
text-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
|
||
}
|
||
}
|
||
|
||
/* =========================================== */
|
||
/* ===== PAUSE MENU ===== */
|
||
/* =========================================== */
|
||
|
||
.pause-modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.14);
|
||
backdrop-filter: blur(9px);
|
||
z-index: 1000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* Overlay (tmavé pozadie) */
|
||
.pause-modal-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Samotný modal box */
|
||
.pause-modal-content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 2;
|
||
width: 70%;
|
||
max-width: 450px;
|
||
min-width: 400px;
|
||
background: url('../images/pozadie_button_mobile_2.png') lightgray 50% / cover no-repeat;
|
||
border: 4px solid #ECCF17;
|
||
border-radius: 30px;
|
||
padding: 2rem 3rem;
|
||
box-sizing: border-box;
|
||
transition: all 0.4s ease;
|
||
}
|
||
|
||
.pause-modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.pause-modal-header h2 {
|
||
font-family: 'Luckiest Guy', sans-serif;
|
||
font-size: 64px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
}
|
||
|
||
.pause-close-btn {
|
||
position: absolute;
|
||
top: -20px;
|
||
right: -10px;
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
color: #FFF;
|
||
text-align: center;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 64px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
transition: transform 0.4s ease;
|
||
z-index: 1001;
|
||
}
|
||
|
||
.pause-close-btn:hover {
|
||
transform: rotate(15deg) scale(1.05);
|
||
}
|
||
|
||
|
||
.pause-modal-body {
|
||
padding: 10px 0;
|
||
}
|
||
|
||
|
||
.pause-menu {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.pause-menu ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.pause-menu li {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.pause-button {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 250px;
|
||
height: 64px;
|
||
flex-shrink: 0;
|
||
border-radius: 30px;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
border: 4px solid #AC3F0B;
|
||
background: url('../images/pozadie_button.png') lightgray 50% / cover no-repeat;
|
||
transition: all 0.3s ease;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 32px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 20px;
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
color: #FFF;
|
||
cursor: url('../images/active_cursor4.png') 5 5, pointer;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.pause-button:hover {
|
||
box-shadow: inset 0 0 20px 2px rgba(236, 207, 23, 0.3);
|
||
border: 4px solid #ECCF17;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.pause-button:active {
|
||
transform: translateY(0) scale(0.98);
|
||
filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
|
||
}
|
||
|
||
/* =============================================== */
|
||
/* side panel s hráčmi */
|
||
/* =============================================== */
|
||
.side-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
width: 300px;
|
||
min-height: 800px;
|
||
max-height: 800px;
|
||
|
||
}
|
||
.players-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
width: 100%;
|
||
min-height: 158px;
|
||
border-radius: 30px;
|
||
border: 4px solid #AC3F0B;
|
||
background-image: url('../images/pozadie_button_mobile_2.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
}
|
||
|
||
.players-panel :active {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 20px;
|
||
width: 100%;
|
||
min-height: 158px;
|
||
background-image: url('../images/pozadie_button_mobile_2.png');
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
|
||
border-radius: 30px;
|
||
border: 4px solid #ECCF17;
|
||
box-shadow: 0 0 20px 2px #ECCF17 inset;
|
||
}
|
||
|
||
.players-panel span {
|
||
font-size: 60px;
|
||
color: #FFF;
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
-webkit-text-stroke-width: 1px;
|
||
-webkit-text-stroke-color: #000;
|
||
}
|
||
|
||
.players-panel h1 {
|
||
font-size: 40px;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.players-panel .name {
|
||
background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
-webkit-text-stroke: unset;
|
||
}
|
||
|
||
.player-1 .name {
|
||
background: linear-gradient(176deg, #00E5FF 3.52%, #2494A1 96.48%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.player-2 .name {
|
||
background: linear-gradient(176deg, #1EFF00 3.52%, #8EE046 96.48%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.player-3 .name {
|
||
background: linear-gradient(176deg, #5579D4 3.52%, #008CFF 96.48%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.player-4 .name {
|
||
background: linear-gradient(176deg, #D455D2 3.52%, #F0D 96.48%);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* ==========================================
|
||
POČÍTADLO VYBRANÝCH SLOV - "Vybraných: X / 14 slov"
|
||
========================================== */
|
||
|
||
.selection-counter {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 12px 20px;
|
||
margin-bottom: 15px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 2px solid rgba(236, 207, 23, 0.3);
|
||
border-radius: 12px;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.counter-label {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 16px;
|
||
-webkit-text-stroke: 0.5px #000;
|
||
}
|
||
|
||
.counter-value {
|
||
color: #ECCF17;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
-webkit-text-stroke: 1px #000;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.counter-separator {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 20px;
|
||
}
|
||
|
||
.counter-max {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 20px;
|
||
-webkit-text-stroke: 0.5px #000;
|
||
}
|
||
|
||
.counter-suffix {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 16px;
|
||
-webkit-text-stroke: 0.5px #000;
|
||
}
|
||
|
||
/* Stavy počítadla */
|
||
.selection-counter.too-few {
|
||
border-color: rgba(255, 71, 87, 0.6);
|
||
background: rgba(255, 71, 87, 0.1);
|
||
}
|
||
|
||
.selection-counter.too-few .counter-value {
|
||
color: #ff4757;
|
||
}
|
||
|
||
.selection-counter.ok {
|
||
border-color: rgba(76, 209, 55, 0.6);
|
||
background: rgba(76, 209, 55, 0.1);
|
||
}
|
||
|
||
.selection-counter.ok .counter-value {
|
||
color: #4CD137;
|
||
}
|
||
|
||
.selection-counter.at-max {
|
||
border-color: rgba(255, 165, 0, 0.8);
|
||
background: rgba(255, 165, 0, 0.15);
|
||
}
|
||
|
||
.selection-counter.at-max .counter-value {
|
||
color: #FFA500;
|
||
}
|
||
|
||
/* Upozornenie o limite */
|
||
.pexeso-selection-limit-warning {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 10000;
|
||
background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
|
||
border: 4px solid #AC3F0B;
|
||
border-radius: 20px;
|
||
padding: 25px 40px;
|
||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
|
||
animation: slideInBounce 0.5s ease-out;
|
||
opacity: 1;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.warning-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.warning-icon {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.warning-text {
|
||
color: #FFFFFF;
|
||
font-family: "Luckiest Guy", sans-serif;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
-webkit-text-stroke: 2px #AC3F0B;
|
||
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
@keyframes slideInBounce {
|
||
0% {
|
||
transform: translate(-50%, -150%);
|
||
opacity: 0;
|
||
}
|
||
60% {
|
||
transform: translate(-50%, -45%);
|
||
opacity: 1;
|
||
}
|
||
80% {
|
||
transform: translate(-50%, -52%);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
/* =============================================== */
|
||
/* GRID ROZLOŽENIE PRE KAŽDÝ POČET KARIET */
|
||
/* Definuje iba počet stĺpcov - šírka karty sa */
|
||
/* automaticky vypočíta z gridu (1fr = 1 podiel). */
|
||
/* Veľkosť karty, obrázku a textu je riešená cez */
|
||
/* aspect-ratio a cqw v .card-container vyššie. */
|
||
/* =============================================== */
|
||
|
||
/* 4 karty = 2 stĺpce (2×2) */
|
||
#gameCanvas.cards-4 { grid-template-columns: repeat(2, 1fr); }
|
||
|
||
/* 6 kariet = 3 stĺpce (3×2) */
|
||
#gameCanvas.cards-6 { grid-template-columns: repeat(3, 1fr); }
|
||
|
||
/* 8 kariet = 4 stĺpce (4×2) */
|
||
#gameCanvas.cards-8 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 10 kariet = 5 stĺpcov (5×2) */
|
||
#gameCanvas.cards-10 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 12 kariet = 4 stĺpce (4×3) */
|
||
#gameCanvas.cards-12 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 14 kariet = 7 stĺpcov (7×2) */
|
||
#gameCanvas.cards-14 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 16 kariet = 4 stĺpce (4×4) - ŠTANDARDNÁ VEĽKOSŤ */
|
||
#gameCanvas.cards-16 { grid-template-columns: repeat(4, 1fr); }
|
||
|
||
/* 18 kariet = 6 stĺpcov (6×3) */
|
||
#gameCanvas.cards-18 { grid-template-columns: repeat(5, 1fr); }
|
||
|
||
/* 20 kariet = 5 stĺpcov (5×4) */
|
||
#gameCanvas.cards-20 { grid-template-columns: repeat(5, 1fr); }
|
||
|
||
/* 22-24 kariet = 6 stĺpcov (6×4, 22 bude mať 2 prázdne bunky) */
|
||
#gameCanvas.cards-22,
|
||
#gameCanvas.cards-23,
|
||
#gameCanvas.cards-24 { grid-template-columns: repeat(5, 1fr); }
|
||
|
||
/* 25 kariet = 5 stĺpcov (5×5) */
|
||
#gameCanvas.cards-25 { grid-template-columns: repeat(5, 1fr); }
|
||
|
||
/* 26-28 kariet = 7 stĺpcov */
|
||
#gameCanvas.cards-26,
|
||
#gameCanvas.cards-27,
|
||
#gameCanvas.cards-28 { grid-template-columns: repeat(6, 1fr); }
|
||
|
||
/* 30 kariet = 6 stĺpcov (6×5) */
|
||
#gameCanvas.cards-29,
|
||
#gameCanvas.cards-30 { grid-template-columns: repeat(6, 1fr); }
|
||
|
||
/* 32-34 kariet = 7 stĺpcov */
|
||
#gameCanvas.cards-31,
|
||
#gameCanvas.cards-32,
|
||
#gameCanvas.cards-33,
|
||
#gameCanvas.cards-34 { grid-template-columns: repeat(7, 1fr); }
|
||
|
||
/* 36 kariet = 6 stĺpcov (6×6) */
|
||
#gameCanvas.cards-35,
|
||
#gameCanvas.cards-36 { grid-template-columns: repeat(7, 1fr); }
|
||
|
||
/* 38-41 kariet = 7 stĺpcov */
|
||
#gameCanvas.cards-37,
|
||
#gameCanvas.cards-38,
|
||
#gameCanvas.cards-39,
|
||
#gameCanvas.cards-40,
|
||
#gameCanvas.cards-41 { grid-template-columns: repeat(7, 1fr); }
|
||
|
||
|
||
/* ============================================================ */
|
||
/* ==== RESPONZÍVNY LAYOUT ==== */
|
||
/* ============================================================ */
|
||
|
||
@media (max-width: 1199px), (max-height: 899px) {
|
||
.main-container {
|
||
width: 100%; /* Plná šírka viewportu */
|
||
padding: 8px; /* Odstup od okrajov obrazovky */
|
||
gap: 10px; /* Menšia medzera medzi sekciami */
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* HORNÝ PANEL (čas / PEXESO / pokusy) */
|
||
/* -------------------------------------------------------- */
|
||
.top-panel {
|
||
width: 100%; /* Plná šírka rodiča */
|
||
max-width: 800px; /* Ale nie širší ako canvas */
|
||
height: auto; /* Výška podľa obsahu */
|
||
gap: 10px; /* Menší rozostup medzi boxmi */
|
||
flex-wrap: nowrap; /* Ostanú v jednom riadku */
|
||
justify-content: space-between; /* Rovnomerne rozložené */
|
||
}
|
||
|
||
/* Jednotlivé boxy v hornom paneli (čas, názov hry, pokusy) */
|
||
.panel-item {
|
||
flex: 1 1 0; /* Rovnaký podiel priestoru */
|
||
min-width: 0; /* Dovolí flex-u zmrštiť box */
|
||
max-width: 240px; /* Horný limit pre širšie obrazovky */
|
||
width: auto; /* Prepis desktopovej fixnej šírky 253px */
|
||
height: 56px; /* Nižší box ako na desktope */
|
||
font-size: 28px; /* Menší text */
|
||
border-width: 3px; /* Tenší border */
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* CONTENT SECTION */
|
||
/* Zmena z riadku [canvas | panel] na stĺpec [canvas] */
|
||
/* [panel] */
|
||
/* -------------------------------------------------------- */
|
||
.content-section {
|
||
flex-direction: column; /* Stĺpec namiesto riadku */
|
||
align-items: center; /* Vycentrovať deti */
|
||
width: 100%; /* Plná šírka */
|
||
max-width: 800px; /* Ale maximálne ako canvas */
|
||
gap: 10px; /* Medzera medzi canvasom a panelom */
|
||
flex-wrap: nowrap; /* Neumožniť wrap - stĺpec je jasný */
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* GAME CANVAS - RESPONZÍVNY */
|
||
/* Canvas je vždy štvorec (aspect-ratio 1:1). */
|
||
/* Jeho šírka sa vypočíta ako menšia z: */
|
||
/* - 100% šírky rodiča */
|
||
/* - dostupnej výšky viewportu mínus rezervácia (240px */
|
||
/* na top-panel + side-panel + gaps + padding) */
|
||
/* Takto sa canvas vždy zmestí na obrazovku bez scrollovania*/
|
||
/* -------------------------------------------------------- */
|
||
#gameCanvas {
|
||
min-width: 0;
|
||
min-height: 0;
|
||
width: min(calc(100vw - 20px), calc(100dvh - 200px), 800px);
|
||
height: min(calc(100vw - 20px), calc(100dvh - 200px), 800px);
|
||
}
|
||
|
||
/* -------------------------------------------------------- */
|
||
/* SIDE PANEL (hráči) */
|
||
/* Namiesto stĺpca vedľa canvasu - riadok pod canvasom */
|
||
/* -------------------------------------------------------- */
|
||
.side-panel {
|
||
width: 100%; /* Plná šírka rodiča */
|
||
max-width: 800px; /* Ako canvas */
|
||
min-height: auto; /* Zrušíme 800px z desktopu */
|
||
max-height: unset; /* Zrušíme 800px z desktopu */
|
||
flex-direction: row; /* Vedľa seba, nie pod sebou */
|
||
flex-wrap: wrap; /* Povoliť zalomenie na nový riadok */
|
||
justify-content: center; /* Vycentrovanie hráčov */
|
||
gap: 10px; /* Menšia medzera medzi hráčmi */
|
||
}
|
||
|
||
/* Panel jedného hráča - kompaktnejší, 2-4 sa zmestia vedľa seba */
|
||
.players-panel {
|
||
width: auto; /* Šírka podľa obsahu */
|
||
min-width: 140px; /* Ale aspoň 140px široký */
|
||
max-width: 200px; /* Max 200px široký */
|
||
flex: 1 1 auto; /* Povolený rast aj zmrštenie */
|
||
min-height: 80px; /* Nižšia min. výška */
|
||
padding: 8px 12px; /* Menší vnútorný padding */
|
||
}
|
||
|
||
/* Meno hráča - menší font */
|
||
.players-panel h1 {
|
||
font-size: 22px;
|
||
}
|
||
|
||
/* Skóre hráča - menší font */
|
||
.players-panel span {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
/* ============================================================ */
|
||
/* ==== DROBNÉ ÚPRAVY PRE ÚZKE OBRAZOVKY (< 768px) ==== */
|
||
/* ==== Tieto sú o modálnych oknách, NIE o layoute ==== */
|
||
/* ============================================================ */
|
||
@media (max-width: 768px) {
|
||
|
||
/* Pause modal a cvičenie okno - zmestia sa aj na telefón */
|
||
.execise-window,
|
||
.pause-modal-content {
|
||
min-width: 90%; /* Zrušenie fixnej šírky */
|
||
width: 90%; /* 90% šírky obrazovky */
|
||
max-height: 90vh; /* Max 90% výšky viewportu */
|
||
overflow-y: auto; /* Scroll ak je obsah dlhý */
|
||
padding: 1.5rem 1rem; /* Menší padding */
|
||
}
|
||
|
||
/* Nadpis "PAUZA" - menší font na telefóne */
|
||
.pause-modal-header h2 {
|
||
font-size: 40px;
|
||
}
|
||
|
||
/* Tlačidlá v modáloch - plná šírka */
|
||
.tlacidlo,
|
||
.menu-button,
|
||
.pause-button {
|
||
width: 100%; /* Plná šírka */
|
||
min-width: unset; /* Zruš fixnú min šírku */
|
||
height: 55px; /* Nižšie */
|
||
font-size: 24px; /* Menší text */
|
||
}
|
||
|
||
/* Nadpis "PEXESO" v hornom paneli - menší */
|
||
.game-title span {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
@media (max-width: 480px) {
|
||
.loading-progress-container {
|
||
max-width: 300px;
|
||
}
|
||
|
||
.loading-progress-text {
|
||
font-size: 12px;
|
||
}
|
||
|
||
#loading-progress-percentage {
|
||
font-size: 14px;
|
||
}
|
||
|
||
#loading-progress-details {
|
||
font-size: 10px;
|
||
}
|
||
.pause-modal-content {
|
||
width: 95%;
|
||
min-width: 280px;
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
|
||
.pause-modal-header h2 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.pause-close-btn {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.pause-button {
|
||
font-size: 20px;
|
||
height: 48px;
|
||
min-width: 180px;
|
||
}
|
||
|
||
#menuButton, .kruhove-tlacidlo {
|
||
width: 35px;
|
||
height: 35px;
|
||
top: 5px;
|
||
left: 5px;
|
||
}
|
||
|
||
.cvicenie-text p, .loading-text-jozino {
|
||
font-size: 30px;
|
||
}
|
||
|
||
.cvicenie-text img {
|
||
max-height: 120px;
|
||
}
|
||
}
|
||
|
||
|
||
|