.tetris-wrapper {
    max-width: 320px;
    margin: 10px auto;
    font-family: sans-serif;
    text-align: center; /* vše vycentrované */
}

/* Flex kontejner pro hlavní okno a mini okénko */
.tetris-flex-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin: 0 auto 10px auto; /* mezera dole před kontrolami */
}

/* Hlavní herní okno */
#tetris-container {
    width: 200px;
    height: 400px;
    background: black;
    border: 2px solid #222;
    position: relative;
    flex-shrink: 0;
}

/* Mini okénko pro další tvar */
#next-container {
    width: 100px;
    height: 100px;
    background: black;
    border: 2px solid #222;
    position: relative;
    flex-shrink: 0;
}

/* Bloky ve hře */
.block {
    width: 20px;
    height: 20px;
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.25);
    transition: background 0.08s linear;
}

/* Sekce pod hlavním oknem */
.tetris-controls {
    margin-top: 10px;
}

#buttons {
    margin-bottom: 6px;
}

#buttons button {
    padding: 6px 10px;
    margin: 0 4px;
    font-size: 13px;
    cursor: pointer;
}

#score, #highscore, #controls {
    margin-top: 6px;
    font-size: 13px;
    color: #000 !important;
}

#highscore {
    font-weight: 600;
    color: #FF0000 !important; /* červená */
}

/* Síň slávy */
.tetris-leaderboard-wrapper {
    text-align: center;
    margin-top: 20px;
}

.tetris-leaderboard {
    width: auto; /* automatická šířka podle obsahu */
    border-collapse: collapse;
    margin: 0 auto; /* centrování tabulky */
    background: #000; /* černé pozadí tabulky */
}

.tetris-leaderboard th,
.tetris-leaderboard td {
    border: 1px solid #fff; /* bílé rámečky */
    padding: 5px 10px;
    text-align: center;
    color: #fff; /* bílé písmo */
}


/* Responsivní úpravy */
@media (max-width: 420px) {
    .tetris-wrapper { max-width: 100%; padding: 0 10px; }
    #tetris-container, #next-container { transform: scale(0.95); transform-origin: top center; }
}