body{
    margin:0;
    padding:0;
    min-height:100vh;
    font-family:Arial,sans-serif;
    color:white;
    background-image:url('../images/9.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.container{
    max-width:1500px;
    margin:0 auto;
    padding:25px;
}

.top-buttons{
    display:flex;
    justify-content:center;
    margin:25px 0;
}

.home-button{
    display:inline-block;
    padding:12px 28px;
    border-radius:20px;
    color:white;
    text-decoration:none;
    font-weight:800;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.30);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    transition:.3s;
}

.home-button:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,0.18);
}

.groups-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
    gap:24px;
}

.group-card{
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,0.18);
    border:1px solid rgba(255,255,255,0.32);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,0.14);
}

.group-title{
    margin:0 0 18px;
    text-align:center;
    font-size:30px;
    font-weight:900;
    color:#f5d77a;
    text-shadow:0 3px 8px rgba(0,0,0,0.65);
}

.group-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.group-table th{
    padding:8px;
    font-size:13px;
    color:#ffffff;
    opacity:.9;
    text-align:center;
    text-shadow:0 2px 6px rgba(0,0,0,0.65);
}

.group-table th:first-child{
    text-align:left;
}

.group-table td{
    padding:12px 8px;
    font-size:16px;
    font-weight:800;
    text-align:center;
    background:rgba(255,255,255,0.12);
    border-top:1px solid rgba(255,255,255,0.16);
    border-bottom:1px solid rgba(255,255,255,0.16);
    text-shadow:0 2px 6px rgba(0,0,0,0.58);
}

.group-table td:first-child{
    text-align:left;
    border-left:1px solid rgba(255,255,255,0.16);
    border-radius:14px 0 0 14px;
}

.group-table td:last-child{
    border-right:1px solid rgba(255,255,255,0.16);
    border-radius:0 14px 14px 0;
    color:#f5d77a;
}

.country-name{
    display:block;
}

footer{
    max-width:1450px;
    margin:35px auto;
    padding:24px;
    border-radius:22px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.28);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 24px rgba(0,0,0,0.14);
}

footer p{
    font-size:16px;
    line-height:1.5;
    text-shadow:0 2px 6px rgba(0,0,0,0.55);
}

/* ========================================
   RESPONSIVE MEDIA QUERIES (Aangepast voor Mobiel)
======================================== */

@media screen and (max-width:768px){
    body{
        background-attachment:scroll !important;
        background-image:none !important;
        background-color:#0d1b10 !important; /* Vangnet kleur onder de poster */
    }

    /* Vaste, meeschalende WK-poster voor mobiel */
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: url('../images/9.png') !important;
        background-size: contain !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
    }

    .container{
        padding:15px;
    }

    .groups-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .group-card{
        padding:18px;
        
        /* Extra leesbaar glas op mobiel */
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

    .group-title{
        font-size:26px;
    }

    .group-table td{
        font-size:14px;
        padding:10px 6px;
        
        /* De tabelrijen iets duidelijker maken op mobiel */
        background: rgba(255, 255, 255, 0.15) !important;
    }
}