:root {

    /* Základní herní barvy tekutin */

    --color-red: #ff453a;

    --color-blue: #0a84ff;

    --color-green: #32d74b;

    --color-yellow: #ffd60a;

    --color-orange: #ff9f0a;

    --color-purple: #bf5af2;

    --color-cyan: #64d2ff;



    /* Barvy prostředí (Dark Mode) */

    --bg-color: #0d1117; /* Příjemná hluboká tmavě modro-šedá */

    --bottle-border: rgba(255, 255, 255, 0.3);

    --bottle-bg: rgba(255, 255, 255, 0.03);

    --text-color: #ffffff;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    user-select: none; /* Důležité: Zabraňuje označování textu při rychlém klikání */

    -webkit-tap-highlight-color: transparent; /* Skryje modrý problik na iOS */

}



body {

    background-color: var(--bg-color);

    color: var(--text-color);

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    overflow: hidden; /* Zabraňuje scrollování stránky */

}



.app-container {

    width: 100%;

    max-width: 500px; /* Hra bude vypadat dobře i na širokém PC monitoru */

    height: 100%;

    display: flex;

    flex-direction: column;

    padding: 20px;

}



/* Horní lišta se statistikami */

.top-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    margin-bottom: 40px;

}



.stats {

    display: flex;

    gap: 15px;

    font-size: 1.2rem;

    font-weight: bold;

}



.icon-btn {

    background: rgba(255, 255, 255, 0.1);

    border: none;

    color: var(--text-color);

    padding: 10px 15px;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: bold;

    cursor: pointer;

    transition: background 0.2s;

}



.icon-btn:active {

    background: rgba(255, 255, 255, 0.2);

}



/* Herní plocha s lahvičkami */

.game-board {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px;

    flex: 1;

    align-content: center; /* Vycentruje lahvičky vertikálně */

}



/* Design lahvičky */

.bottle {

    width: 65px;

    height: 200px;

    border: 3px solid var(--bottle-border);

    border-top: none; /* Otevřené hrdlo */

    border-bottom-left-radius: 35px;

    border-bottom-right-radius: 35px;

    background-color: var(--bottle-bg);

    position: relative;

    

    /* Flexbox kouzlo pro skládání tekutin odspodu */

    display: flex;

    flex-direction: column;

    justify-content: flex-end; 

    

    overflow: hidden;

    padding-bottom: 5px; /* Malá mezera na dně lahvičky */

    cursor: pointer;

    transition: transform 0.2s ease-in-out, border-color 0.2s;

}



/* Stav, když hráč klikne na lahvičku (připravíme pro JS) */

.bottle.selected {

    transform: translateY(-20px); /* Lahvička povyskočí */

    border-color: #ffffff;

}



/* Jednotlivé vrstvy tekutiny */

.liquid {

    width: 100%;

    height: 25%; /* Hra počítá s max 4 barvami na lahvičku */

    transition: height 0.3s ease;

}



/* Nejspodnější tekutina kopíruje zaoblený tvar dna lahvičky */

.liquid:last-child {

    border-bottom-left-radius: 30px;

    border-bottom-right-radius: 30px;

}