body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #007bff;
    color: white;
    padding: 20px 0;
    margin-bottom: 20px;
}

.game-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.crossword-grid {
    width: 45%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.input-section {
    width: 45%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- Kontajner Kruhu --- */
.letter-circle {
    width: 280px; 
    height: 280px;
    margin: 40px auto;
    position: relative; 
    border-radius: 50%;
    background-color: #e0e0e0;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}


.letter {
    width: 60px; 
    height: 60px;
    line-height: 60px;
    margin: 0; 
    background-color: #ffc107;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.1s;
    text-align: center;

   
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px; 
    
    border: 2px solid transparent; 
}

/* Kontajner kruhu - len definícia veľkosti */
/*.letter-circle {
    position: relative;
    width: 300px; 
    height: 300px;
    margin: 50px auto;
    border-radius: 50%;
}*/

/* Štýl pre každé jednotlivé písmeno - iba definícia vzhľadu, nie pozície */
/*.letter {
    position: absolute; /* Musí zostať absolute! */
   /* width: 60px; 
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    
    /* Všetky transformácie sú teraz v HTML inline style=... */
    /*top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); /* Len zarovnanie stredu písmena do bodu */
/*}

/*.letter:nth-child(1) { transform: rotate(0deg) translateY(-110px) rotate(0deg); }
.letter:nth-child(2) { transform: rotate(51.4deg) translateY(-110px) rotate(-51.4deg); } /* 360/7 = 51.4 */
/*.letter:nth-child(3) { transform: rotate(102.8deg) translateY(-110px) rotate(-102.8deg); }
.letter:nth-child(4) { transform: rotate(154.2deg) translateY(-110px) rotate(-154.2deg); }
.letter:nth-child(5) { transform: rotate(205.6deg) translateY(-110px) rotate(-205.6deg); }
.letter:nth-child(6) { transform: rotate(257deg) translateY(-110px) rotate(-257deg); }
.letter:nth-child(7) { transform: rotate(308.4deg) translateY(-110px) rotate(-308.4deg); }

/* Štýl vybraného písmena */

/* NOVÉ PRAVIDLO PRE VYBRANÉ PÍSMENO */
.letter.selected {
    background-color: #007bff; 
    color: white;
    /* !DÔLEŽITÉ: Použijeme iba FILTER namiesto prepisovania celej transformácie, 
       čo je najbezpečnejší spôsob, ak nechceme ručne opakovať transformáciu pre každé písmeno. 
       Alebo môžeme použiť transformáciu vnoreného elementu.
       
       Pre jednoduchosť teraz opravíme transformáciu, aby sme pridali SCALE k existujúcej.
    */
    
    /* Využijeme vnorený element alebo zmeníme štruktúru. Pre túto chvíľu:
       Aby sme sa vyhli prepísaniu, použijeme vnútorný tieň a box-shadow pre efekt.
    */
    box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5); /* Modrý kruh okolo */
    border-color: #0056b3;
    
    /* Ak chceme, aby sa zväčšilo, musíme zopakovať pôvodnú transformáciu a pridať scale.
       To je ale veľmi neprehľadné. Najjednoduchšie je použiť len zmenu farby.
       
       Ak TRVÁTE na zväčšení, musíte zmeniť štruktúru HTML, alebo použiť JavaScript,
       čo je pre tento prípad príliš zložité. 
       
       NECHÁME len vizuálny efekt bez SCALE pre zachovanie pozície:
    */
}
/* Odstráňte pôvodné .letter.selected transform: scale(1.15) !important; */

.letter:active {
    background-color: #ff9107; /* Tmavšia farba */
}

#current-word-display {
    min-height: 40px;
    font-size: 20px;
    color: #007bff;
}

button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#submit-button {
    background-color: #28a745;
    color: white;
}

#submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#new-level-button {
    background-color: #17a2b8;
    color: white;
}

.message {
    margin-top: 10px;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
}

/* words/static/words/style.css */

/* ... (predchádzajúce štýly) ... */

.word-item {
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 60px; /* Aby menšie políčka neboli príliš malé */
    text-align: center;
}

.not-found {
    background-color: #f0f0f0;
    color: #999;
    border: 1px solid #ddd;
}

.found {
    background-color: #d4edda; /* Svetlo zelená */
    color: #155724; /* Tmavá zelená */
    border: 1px solid #c3e6cb;
}
/* words/static/words/style.css */

/* Kontajner pre jedno slovo, aby sa boxy zobrazili v rade */
.word-item-container {
    display: flex;
    gap: 4px; /* Medzera medzi jednotlivými boxíkmi (písmenami) */
    margin-right: 15px; /* Medzera medzi celými slovami */
    margin-bottom: 10px; 
}

/* Štýl pre jedno políčko (box) */
.letter-box {
    width: 25px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border: 2px solid #ccc;
    background-color: white;
    box-sizing: border-box; /* Zabezpečí, že border je vo vnútri šírky */
}

/* Štýl pre políčko, ktoré je už vyplnené (nájdené) */
.letter-box.found {
    border-color: #28a745; /* Zelený okraj */
    background-color: #d4edda; /* Svetlo zelené pozadie */
    color: #155724; /* Tmavá zelená farba písma */
}

/* Kontajner celého zoznamu slov */
.word-list {
    display: flex;
    flex-wrap: wrap;
    /* Odstráňte pôvodné 'gap: 10px;' a použite margin-right vo .word-item-container */
    margin-top: 15px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 4px;
}

#current-word-display {
    position: relative; /* <--- TOTO je to, čo chýbalo! */
    /* ... (ostatné štýly, napr. margin alebo padding) ... */
    padding-right: 30px; /* Pridajte miesto pre hviezdičku */
}

.bonus-indicator {
    position: absolute; /* Umiestnime vedľa displeja slova */
    top: 0;
    right: 0;
    line-height: 40px; /* Zarovnáme s textom */
}

#bonus-star {
    font-size: 24px;
    opacity: 0; /* Začíname ako neviditeľná */
    transition: opacity 0.3s, color 0.3s;
    color: #a0a0a0; /* Predvolená farba (strieborná/šedá) */
}

/* Trieda pre 1 nájdené bonusové slovo */
.bonus-indicator.stage-1 #bonus-star {
    opacity: 1;
    color: #c0c0c0; /* Strieborná */
}

/* Trieda pre 2 nájdené bonusové slová (pripravené na odhalenie) */
.bonus-indicator.stage-2 #bonus-star {
    opacity: 1;
    color: gold; /* Zlatá */
    transform: scale(1.1);
}