.vesisto-taulukko {
            width: 100%;
            border-collapse: collapse;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .vesisto-taulukko th, 
        .vesisto-taulukko td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .vesisto-taulukko th {
            background-color: #1980b0;
            color: white;
        }

        .paarivi {
            cursor: pointer;
        }

        .paarivi:hover {
            background-color: #f5f5f5;
        }

        .toggle-btn {
            font-weight: bold;
            color: #007bff;
            font-size: 1.3em;
            text-align: right;
        }

        .tulosrivi {
            display: none;
            background-color: #fcfcfc;
        }

        .tulosrivi.nayta {
            display: table-row;
        }

        /* Sisempi Top 20 -taulukko */
        .top-taulukko {
            width: 100%;
            border-collapse: collapse;
            margin: 10px 0;
        }

        .top-taulukko th {
            background-color: #e2e8f0;
            color: #333;
            padding: 8px;
            font-size: 0.9em;
        }

        .top-taulukko td {
            padding: 8px;
            border-bottom: 1px solid #cbd5e1;
            font-size: 0.9em;
        }

        /* ========================================================== */
        /* MOBIILITYYLIT (Näytöt, jotka ovat kapeampia kuin 600px)    */
        /* ========================================================== */
        @media screen and (max-width: 600px) {
            
            /* Piilotetaan päätaulukon otsikkorivi puhelimessa */
            .vesisto-taulukko thead {
                display: none;
            }

            /* Muutetaan taulukon osat blokeiksi, jotta ne rivittyvät allekkain */
            .vesisto-taulukko, 
            .vesisto-taulukko tbody, 
            .vesisto-taulukko tr, 
            .vesisto-taulukko td {
                display: block;
                width: 100%;
                box-sizing: border-box;
            }

            /* Tehdään jokaisesta vesistön päärivistä oma "korttinsa" */
            .paarivi {
                margin-bottom: 5px;
                border: 1px solid #ddd;
                border-radius: 6px;
                background: white;
                padding: 10px;
                position: relative;
            }

            /* Lisätään tekstitiedot (labelit) solujen eteen mobiilissa */
            .paarivi td:nth-of-type(1)::before { content: "No: "; font-weight: bold; }
            .paarivi td:nth-of-type(2)::before { content: "Vesistö: "; font-weight: bold; }
            .paarivi td:nth-of-type(3)::before { content: "Pelattu: "; font-weight: bold; }
            .paarivi td:nth-of-type(4)::before { content: "Pelaajia: "; font-weight: bold; }

            /* Muotoillaan solut kortin sisällä siisteiksi riveiksi */
            .paarivi td {
                padding: 4px 8px;
                border: none;
            }

            /* Korostetaan vesistön nimeä kortissa */
            .paarivi td:nth-of-type(2) {
                font-size: 1.2em;
                color: #2c3e50;
            }

            /* Sijoitetaan + / - painike kortin yläkulmaan */
            .toggle-btn {
                position: absolute;
                top: 12px;
                right: 15px;
                font-size: 1.6em;
                padding: 0;
            }

            /* Tulosrivi mobiilissa */
            .tulosrivi.nayta {
                display: block;
                border: 1px solid #ddd;
                border-top: none;
                margin-bottom: 15px;
                border-radius: 0 0 6px 6px;
                padding: 10px;
                background-color: #f8fafc;
            }

            .tulosrivi td {
                padding: 0;
                border: none;
            }
        }