/* --- Styly zůstávají z velké části stejné --- */
body { font-family: 'Helvetica Neue'; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100vh; background-color: #B8AFC3; margin: 0; padding: 10px; position: relative; box-sizing: border-box; overflow: hidden; } /* font-family: sans-serif; */
canvas { background-color: #B8AFC3; margin-bottom: 10px; max-width: 100%; flex-shrink: 0; display: block; /* Pomůže s některými layout issues */ }
#game-container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1200px; }
#controls, #status-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 15px; margin-bottom: 10px; width: 100%; max-width: 800px; }
#status-bar { padding-top: 70px; }
#controls { padding-top: 30px; }
#controls button { padding: auto; padding-inline: 30px; font-size: 1.0em; color: #fff; background-color: #7C33C1; border-radius: 10px; line-height: 1.8; border: none; }
#score, #timer { font-size: 1.2em; min-width: 150px; text-align: center; }
#resetButton, #highscoreButton, #setupButton, #muteButton, #helpButton { padding: 8px 15px; font-size: 1em; cursor: pointer; } /* Přidáno #setupButton */
/* #lang-switcher { position: absolute; top: 10px; right: 20%; display: flex; gap: 5px; z-index: 20; } */
#lang-switcher {
    display: flex; /* Zajistí, že tlačítka budou vedle sebe */
    gap: 5px;
    margin-left: 10px; /* Malá mezera od ostatních tlačítek */
}

#menuToggleButton {
    display: none; /* Skryto na velkých obrazovkách */
    position: absolute;
    top: 10px;
    right: 5%;
    z-index: 60; /* Nad ostatními prvky kromě modálů */
    font-size: 1.8em; /* Větší ikona */
    padding: 0px 8px; /* Upravit padding pro ikonu */
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.8); /* Lehce průhledné pozadí */
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1;
    color: #333;
}

#lang-switcher button { padding: 3px 6px; font-size: 0.8em; cursor: pointer; color: #000; border: 1px solid #ccc; background-color: #f9f9f9; border-radius: 4px; line-height: 1; }
#lang-switcher button.active { background-color: #ddd; font-weight: bold; }
#instructions { position: absolute; bottom: 60px; }
#title { font-family: 'Helvetica Neue'; font-weight: 100; font-size: xx-large; padding-inline: 5px; }
#logo { position: absolute; top: 10px; left:20%; display: flex; float: left; }
a #logo { color: #000; }
#copyright { font-size: small; color: #666; position: absolute; bottom: 30px; }

/* Setup obrazovka - SKRYTÁ defaultně */
#setup-screen {
    display: none; /* !!! ZMĚNA: Skryto defaultně */
    flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(240, 240, 240, 0.95); z-index: 30; padding: 20px; text-align: center;
}
#setup-screen h2 { margin-top: 0;}
#setup-screen div { margin-bottom: 15px; }
#setup-screen label { margin-right: 10px; cursor: pointer; }
#setup-screen input[type="radio"] { margin-right: 5px; }
#setup-screen button { padding: 10px 20px; font-size: 1.2em; cursor: pointer; margin-top: 10px; }

/* Herní oblast - VIDITELNÁ defaultně */
#game-area {
    display: flex; /* !!! ZMĚNA: Viditelné defaultně */
    flex-direction: column; align-items: center; width: 100%;
}

/* Výherní zpráva */
#winMessage { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(124, 51, 193, 0.9); color: white; padding: 30px 40px; border-radius: 15px; font-size: 1.8em; display: none; text-align: center; z-index: 100; }
#winMessage small { font-size: 0.7em; display: block; margin-top: 10px; }
#winScore { font-weight: bold; }
#winMessage button { margin-top: 15px; padding: 8px 15px; cursor: pointer; padding: auto; font-size: 1.0em; color: #000; background-color: rgba(242, 216, 56, 1); border-radius: 10px; line-height: 1.8; border: none; }

/* Highscore Modal */
#highscore-modal { display: none; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 500px; background-color: white; border: 2px solid #333; border-radius: 10px; padding: 20px; z-index: 110; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-height: 80vh; overflow-y: auto; }
#highscore-modal h3 { margin-top: 0; text-align: center; }
#highscore-list { list-style-type: none; padding: 0; }
#highscore-list li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #eee; }
#highscore-list li:last-child { border-bottom: none; }
#highscore-list .score-value { font-weight: bold; }
#highscore-list .score-date { font-size: 0.8em; color: #666; }
#closeHighscoreButton { display: block; margin: 15px auto 0; padding: 8px 15px; cursor: pointer; }

/* Styly pro Help Modal (podobné jako highscore modal) */
#help-modal {
    display: none; /* Skrytý defaultně */
    position: absolute;
    top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; max-width: 600px; /* Širší pro text nápovědy */
    background-color: white;
    border: 2px solid #333;
    border-radius: 10px;
    padding: 20px 30px;
    z-index: 110; /* Nad ostatními prvky, kromě případného setup screenu */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-height: 80vh; /* Omezení výšky */
    overflow-y: auto; /* Scrollbar, pokud je text delší */
}
#help-modal h3 { margin-top: 0; text-align: center; margin-bottom: 15px; }
#help-modal p { margin-bottom: 10px; line-height: 1.5; } /* Lepší čitelnost odstavců */
#help-modal strong { color: #333; } /* Zvýraznění klíčových slov */
#help-modal em { font-style: italic; } /* Kurzíva pro zdůraznění */
#help-modal button { /* Použije stejný styl jako closeHighscoreButton */
    display: block;
    margin: 20px auto 0;
    padding: 8px 15px;
    cursor: pointer;
}

/* Cílíme na landscape s maximální výškou typickou pro telefony/menší tablety */
@media (orientation: landscape) and (max-height: 550px) {
    body {
        padding-top: 5px; /* Snížit horní padding */
        justify-content: center; /* Vertikální centrování, pokud je místo */
    }

    /* Skrýt nepotřebné prvky */
    #instructions,
    #copyright,
    #lang-switcher /* Skryjeme i jazyky, pokud nejsou v controls */ {
        display: none !important; /* Zajistíme skrytí */
    }

    /* Zmenšit mezery a paddingy u viditelných prvků */
    #status-bar {
        padding-top: 5px;
        margin-bottom: 5px;
        order: 1; /* Zajistí, že bude nahoře */
    }
    #game-container {
         order: 2; /* Canvas pod status bar */
         margin-top: 0;
    }

    #logo {
        position: absolute;
        top: 10px;
        left: 5%;
    }

    #controls {
        padding-top: 5px;
        margin-bottom: 5px;
        order: 3; /* Ovládání pod canvas */
        gap: 8px; /* Menší mezery mezi tlačítky */
    }

    /* Volitelně zmenšit tlačítka a texty */
    #controls button, #status-bar > div {
        font-size: 0.85em; /* Menší font */
        padding: 5px 8px; /* Menší padding */
    }
     #lang-switcher button { /* Pokud je v controls, zmenšíme také */
         font-size: 0.7em;
         padding: 2px 4px;
     }
}


/* --- Media Query pro menší obrazovky (např. pod 768px) --- */
@media (max-width: 768px) { /* Bod zlomu, upravte podle potřeby */

    #controls {
        display: none; /* Skrýt původní kontejner tlačítek */
        /* Styly pro otevřené menu budou níže pod třídou .controls-menu-open */
    }

    #menuToggleButton {
        display: block; /* Zobrazit menu tlačítko */
    }

    /* Styly pro otevřené menu (kontejner #controls s přidanou třídou) */
    #controls.controls-menu-open {
        display: flex;
        flex-direction: column; /* Tlačítka pod sebou */
        position: absolute;
        top: 50px; /* Pozice pod horní lištou/ikonou */
        right: 10px; /* Zarovnání k pravému okraji */
        width: 200px; /* Nebo auto, podle obsahu */
        background-color: #f0f0f0; /* Barva pozadí menu */
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        z-index: 55; /* Pod menu ikonou, nad ostatním obsahem */
        padding: 10px;
        gap: 8px; /* Mezera mezi tlačítky v menu */
    }

    #controls.controls-menu-open button,
    #controls.controls-menu-open #lang-switcher button { /* Styly pro tlačítka UVNITŘ otevřeného menu */
        width: 100%; /* Plná šířka menu */
        text-align: left; /* Zarovnání textu doleva */
        padding: 10px; /* Větší padding pro snadnější klikání */
        font-size: 1em; /* Může být potřeba upravit */
        margin: 0; /* Reset marginu */
        background-color: #7C33C1; /* Původní barva tlačítka */
        color: #fff;
        border: none;
        border-radius: 5px;
    }
     #controls.controls-menu-open #lang-switcher { /* Pokud je switcher v menu */
         margin-top: 10px;
         padding-top: 10px;
         border-top: 1px solid #ddd;
         flex-direction: row; /* Jazyky pod sebou */
         gap: 5px;
     }
     #controls.controls-menu-open #lang-switcher button {
         background-color: #f9f9f9; /* Jiná barva pro jazyky */
         color: #333;
         border: 1px solid #ccc;
     }
      #controls.controls-menu-open #lang-switcher button.active {
          background-color: #ddd;
          font-weight: bold;
      }
      #logo {
        position: absolute;
        top: 10px;
        left: 5%;
    }
}

/* --- Konec stylů --- */