/* ========================================
   TOURNAMENT PAGE
======================================== */

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.14);

    border:
    1px solid rgba(255,255,255,0.32);

    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.20);

}

.page-title{

    margin:10px 0 30px;

    text-align:center;

    font-size:44px;

    font-weight:900;

    color:#f5d77a;

    text-shadow:
    0 3px 10px rgba(0,0,0,0.75);

}

.matches-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

    gap:24px;

}

.match-card{

    min-height:290px;

    padding:26px;

    border-radius:24px;

    text-align:center;

    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);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

}

.empty-matches{

    grid-column:
    1 / -1;

    padding:34px;

    border-radius:24px;

    text-align:center;

    font-size:24px;

    font-weight:900;

    color:#f5d77a;

    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);

    text-shadow:
    0 3px 8px rgba(0,0,0,0.68);

}

.match-group{

    display:inline-block;

    align-self:center;

    padding:8px 18px;

    border-radius:999px;

    font-size:16px;

    font-weight:900;

    color:#f5d77a;

    background:
    rgba(0,0,0,0.18);

    border:
    1px solid rgba(255,255,255,0.22);

    text-shadow:
    0 2px 6px rgba(0,0,0,0.65);

}

.match-teams{

    display:grid;

    grid-template-columns:1fr;

    gap:9px;

    margin:20px 0;

    font-size:24px;

    font-weight:900;

    text-shadow:
    0 3px 8px rgba(0,0,0,0.68);

}

.match-vs{

    color:#f5d77a;

    font-size:22px;

    font-weight:900;

}

.match-live{

    align-self:center;

    margin-bottom:14px;

    padding:7px 16px;

    border-radius:999px;

    color:white;

    background:#d80621;

    font-size:15px;

    font-weight:900;

    box-shadow:
    0 6px 16px rgba(0,0,0,0.20);

}

.local-time{

    display:block;

    margin:0 0 18px;

    font-size:18px;

    font-weight:900;

    color:white;

    text-shadow:
    0 3px 8px rgba(0,0,0,0.68);

}

.match-place{

    display:grid;

    gap:5px;

    padding:15px;

    border-radius:17px;

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

    border:
    1px solid rgba(255,255,255,0.18);

    font-size:16px;

    text-shadow:
    0 2px 6px rgba(0,0,0,0.60);

}

.match-place span{

    color:#f5d77a;

    font-weight:800;

}

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; /* Mooie basiskleur als de poster stopt */

    }

    /* Magische truc voor de vaste, meeschalende poster op 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;

    }

    .page-title{

        font-size:34px;

    }

    .matches-grid{

        grid-template-columns:
        1fr;

    }

    .match-card{

        min-height:260px;

        padding:22px;
        
        /* Glas-effect extra leesbaar 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;

    }

    .match-teams{

        font-size:21px;

    }

}

/* ========================================
   PLAYED MATCHES (SILVER THEME) - FORCED
======================================== */

.matches-grid .match-card.is-played{

    background:
    rgba(200,206,218,0.32) !important;

    border:
    1px solid rgba(255,255,255,0.70) !important;

    box-shadow:
    0 10px 28px rgba(0,0,0,0.28) !important;

}

.matches-grid .match-card.is-played .match-vs{

    color:#ffffff !important;

    text-shadow:
    0 0 10px rgba(255,255,255,0.75) !important;

}