*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    background:
    linear-gradient(
        rgba(8,18,40,0.50),
        rgba(8,18,40,0.75)
    ),
    url("../image/tur_tlo.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:#fff;
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

/* ==============================
   TOP BAR
============================== */

.topbar{
    height:70px;
    background:#0d1833;
    border-bottom:1px solid #1e293b;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 30px;
}

.logo{
    font-size:28px;
    font-weight:700;
    color:#3b82f6;
}

nav{
    display:flex;
    gap:30px;
}

nav a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:16px;
}

nav a:hover,
nav a.active{
    color:#3b82f6;
}

.user-box{
    display:flex;
    align-items:center;
    color:#94a3b8;
    font-size:16px;
}

.user-box a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 20px;
    border:1px solid #31527d;
    border-radius:8px;
    background:rgba(18,38,70,.85);
    color:#dbe8ff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.2s ease;
}
.user-box a:hover{
    background:#1d4ed8;
    border-color:#3b82f6;
    color:#fff;
}
/* ==============================
   CONTAINER
============================== */

.container{
    max-width:1400px;
    margin:auto;
    padding:40px 20px;
}

.container h1{
    font-size:42px;
    margin-bottom:30px;
}

.tournament-admin-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:10px;
    padding:11px 20px;
    border:1px solid #31527d;
    border-radius:8px;
    background:rgba(18,40,70,.85);
    color:#dbe8ff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.2s ease;
}
.tournament-admin-button:hover{
    background:#1d4ed8;
    border-color:#3b82f6;
    color:#fff;
}
/* ==============================
   TOURNAMENT TYPES
============================== */

.tournament-types{
    margin-top:20px;
}

.tournament-types h2{
    font-size:30px;
    margin-bottom:20px;
    color:#3b82f6;
}
footer{
    margin-top:40px;
    padding:20px;
    border-top:1px solid rgba(59,130,246,.2);
    color:#7183a0;
    font-size:13px;
    text-align:center;
}

/* ==============================
   TOURNAMENT GRID
============================== */
.tournament-calendar-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
    padding:11px 20px;
    border:1px solid #31527d;
    border-radius:8px;
    background:rgba(18,40,70,.85);
    color:#dbe8ff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.2s ease;
}

.tournament-calendar-button:hover{
    background:#1d4ed8;
    border-color:#3b82f6;
    color:#fff;
}
/* ==============================
   TOURNAMENT GRID
============================== */

.tournament-list{
    display:grid;

    grid-template-columns:repeat(6, 1fr);

    gap:20px;
    max-width:1200px;
}
/* ==============================
   CARDS
============================== */
.tournament-item{
    grid-column:span 2;
    border:1px solid;
    border-radius:14px;
    overflow:hidden;
    background:rgba(8,20,40,.78);
    backdrop-filter:blur(4px);
    transition:.25s;
}


/* 5v5 i 6v6 - drugi rząd */

.tournament-item:nth-child(4){
    grid-column:2 / span 2;
}

.tournament-item:nth-child(5){
    grid-column:4 / span 2;
}


/* otwarta karta - pełna szerokość */

.tournament-item.open{
    grid-column:1 / -1;
}


/* ==============================
   HEADER
============================== */

.tournament-header{
    width:100%;
    min-height:210px;
    padding:25px;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
    display:grid;
    grid-template-columns:90px 1fr 25px;
    align-items:center;
    gap:18px;
}
/* ==============================
   ICON
============================== */
.tournament-icon{
    font-size:38px;
    line-height:1.1;
    text-align:center;
    font-weight:bold;
}
/* ==============================
   TITLE
============================== */

.tournament-title{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.tournament-title strong{
    font-size:32px;
}

.tournament-title span{
    font-size:16px;
    color:#d4dce8;
}
/* ==============================
   PLUS
============================== */
.open-icon{
    font-size:28px;
    font-weight:bold;
}
/* ==============================
   CONTENT
============================== */
.tournament-content{
    display:none;
    padding:25px 32px 30px;
    color:#dbe5f2;
    font-size:17px;
    line-height:1.7;
    border-top:1px solid rgba(255,255,255,.15);
    background:rgba(18,53,36,.80);
}
.tournament-content h3{
    margin:5px 0 12px;
    color:#4b94ff;
    font-size:23px;
}
.tournament-content h4{
    margin:22px 0 8px;
    color:#fff;
    font-size:19px;
}
.tournament-content p{
    margin:0 0 15px;
    max-width:1000px;
}
.tournament-content ul{
    margin:8px 0 18px 25px;
    padding:0;
}
.tournament-content li{
    margin-bottom:7px;
    padding-left:5px;
}
.tournament-content li::marker{
    color:#4b94ff;
}
/* =========================================
   SQUADRON REQUIRED
========================================= */

.squadron-required {
    max-width: 850px;
    margin: 50px auto 80px;
    padding: 45px 50px;
    text-align: center;

    background: rgba(7, 20, 42, 0.88);
    border: 1px solid rgba(64, 130, 230, 0.45);
    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        inset 0 0 30px rgba(30, 90, 170, 0.08);

    backdrop-filter: blur(8px);
}

.squadron-required-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 34px;

    background: rgba(20, 48, 85, 0.9);
    border: 1px solid rgba(70, 140, 230, 0.5);
    border-radius: 14px;
}

.squadron-required h2 {
    margin: 0 0 18px;

    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
}

.squadron-required p {
    max-width: 700px;
    margin: 8px auto;

    color: #b8c5d8;
    font-size: 17px;
    line-height: 1.6;
}
.squadron-required-button {
    display: inline-block;
    margin-top: 25px;
    padding: 13px 28px;
    color: #ffffff;
    background: #2563eb;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.squadron-required-button:hover {
    background: #3b82f6;
    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
/* ==============================
   CARD COLORS
============================== */

.type-blue{
    border-color:#3189ff;
}

.type-blue .tournament-icon,
.type-blue .open-icon{
    color:#4b9aff;
}


.type-green{
    border-color:#42cfa4;
}

.type-green .tournament-icon,
.type-green .open-icon{
    color:#52e0b3;
}


.type-gold{
    border-color:#e8a93c;
}

.type-gold .tournament-icon,
.type-gold .open-icon{
    color:#ffc45b;
}


.type-red{
    border-color:#ef4d55;
}

.type-red .tournament-icon,
.type-red .open-icon{
    color:#ff626a;
}


.type-purple{
    border-color:#9870ff;
}

.type-purple .tournament-icon,
.type-purple .open-icon{
    color:#ad8cff;
}


/* ==============================
   HOVER
============================== */

.tournament-item:hover{
    transform:translateY(-4px);
}

.type-blue:hover{
    box-shadow:0 0 25px rgba(49,137,255,.20);
}

.type-green:hover{
    box-shadow:0 0 25px rgba(66,207,164,.20);
}

.type-gold:hover{
    box-shadow:0 0 25px rgba(232,169,60,.20);
}

.type-red:hover{
    box-shadow:0 0 25px rgba(239,77,85,.20);
}

.type-purple:hover{
    box-shadow:0 0 25px rgba(152,112,255,.20);
}
/* ==============================
   AVAILABLE TOURNAMENTS
============================== */

.available-tournaments{
    margin-top:50px;
}

.available-tournaments h2{
    font-size:30px;
    margin-bottom:20px;
    color:#3b82f6;
}

.tournament-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
}

.tournament-card{
    width:100%;
    padding:18px 22px;
    display:grid;
    grid-template-columns:320px 1fr 180px auto;
    align-items:center;
    gap:25px;
    background:rgba(8,20,40,.82);
    border:1px solid #263858;
    border-radius:10px;
    backdrop-filter:blur(4px);
    transition:.25s;
}

.tournament-card:hover{
    transform:translateY(-2px);
    border-color:#3b82f6;
    box-shadow:0 0 20px rgba(59,130,246,.18);
}

.tournament-card-header{
    margin:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.tournament-status{
    display:inline-block;
    padding:5px 10px;
    border-radius:5px;
    font-size:12px;
    font-weight:700;
    margin:0;
    flex-shrink:0;
}

.tournament-status.open{
    background:#1f6b45;
    color:#8fffc0;
}

.tournament-card h3{
    margin:0;
    font-size:21px;
    line-height:1.3;
    color:#fff;
    white-space:nowrap;
}
.tournament-card p{
    color:#cbd5e1;
    line-height:1.4;
    margin:0;
    max-width:700px;
}
.tournament-card-info{
    display:flex;
    flex-direction:column;
    gap:5px;
    color:#94a3b8;
    font-size:14px;
    margin:0;
    white-space:nowrap;
}

.tournament-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    background:#1d4ed8;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    white-space:nowrap;
    transition:.2s;
}

.tournament-button:hover{
    background:#2563eb;
}
/* ==============================
   TOURNAMENT GUIDES
============================== */

.tournament-guides{
    margin-top:50px;
    margin-bottom:50px;
}

.tournament-guides h2{
    font-size:30px;
    margin-bottom:20px;
    color:#3b82f6;
}

.guides-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    max-width:1200px;
}

.guide-card{
    display:grid;
    grid-template-columns:70px 1fr 30px;
    align-items:center;
    gap:18px;

    padding:24px;

    background:rgba(8,20,40,.82);
    border:1px solid #263858;
    border-radius:14px;

    color:#fff;
    text-decoration:none;

    backdrop-filter:blur(4px);

    transition:.25s;
}

.guide-card:hover{
    transform:translateY(-4px);
    border-color:#3b82f6;
    box-shadow:0 0 25px rgba(59,130,246,.18);
}

.guide-icon{
    font-size:38px;
    text-align:center;
}

.guide-card h3{
    font-size:21px;
    margin-bottom:7px;
    color:#fff;
}

.guide-card p{
    color:#cbd5e1;
    line-height:1.6;
    font-size:15px;
}

.guide-arrow{
    font-size:28px;
    color:#3b82f6;
}
/* =========================================================
   TOURNAMENT RANKING
========================================================= */

.tournament-ranking{
    margin-top:30px;
    padding:30px 35px;
    background:rgba(7,20,47,.92);
    border:1px solid #263f63;
    border-radius:12px;
}

.tournament-ranking h2{
    margin-bottom:20px;
    color:#3b82f6;
    font-size:24px;
}

.tournament-ranking-empty{
    color:#94a3b8;
    font-size:15px;
}

.ranking-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ranking-row{
    display:grid;
    grid-template-columns:60px 1fr 80px 80px 110px;
    align-items:center;
    gap:15px;
    padding:14px 18px;
    background:rgba(18,40,70,.75);
    border:1px solid #31527d;
    border-radius:9px;
    transition:.2s ease;
}

.ranking-row:hover{
    background:rgba(29,78,216,.18);
    border-color:#3b82f6;
}

.ranking-position{
    color:#ffd166;
    font-size:20px;
    font-weight:700;
    text-align:center;
}

.ranking-squadron{
    color:#fff;
    font-size:16px;
    font-weight:600;
}

.ranking-stat{
    color:#c7d2e3;
    font-size:14px;
    text-align:center;
}

.ranking-balance{
    font-weight:700;
}

.ranking-balance.positive{
    color:#4ade80;
}

.ranking-balance.negative{
    color:#f87171;
}

.ranking-more{
    margin-top:12px;
}

.ranking-more summary{
    display:inline-block;
    padding:10px 16px;
    background:rgba(18,40,70,.85);
    border:1px solid #31527d;
    border-radius:7px;
    color:#dbe8ff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    list-style:none;
}

.ranking-more summary:hover{
    background:#1d4ed8;
    border-color:#3b82f6;
    color:#fff;
}

.ranking-more summary::-webkit-details-marker{
    display:none;
}

/* =========================================================
   TRAININGS
========================================================= */

.available-trainings{
    margin-top:50px;
    margin-bottom:50px;
}

.available-trainings h2{
    font-size:30px;
    margin-bottom:20px;
    color:#3b82f6;
}

.training-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
    width:100%;
}

.training-card{
    width:100%;
    padding:18px 22px;
    display:grid;
    grid-template-columns:320px 220px 1fr;
    align-items:center;
    gap:25px;
    background:rgba(8,20,40,.82);
    border:1px solid #263858;
    border-radius:10px;
    backdrop-filter:blur(4px);
    transition:.25s;
}

.training-card:hover{
    transform:translateY(-2px);
    border-color:#3b82f6;
    box-shadow:0 0 20px rgba(59,130,246,.18);
}

.training-card-header{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.training-card h3{
    margin:0;
    color:#fff;
    font-size:21px;
    line-height:1.3;
}

.training-date{
    color:#60a5fa;
    font-size:14px;
    font-weight:600;
}

.training-card-info{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:#94a3b8;
    font-size:14px;
}

.training-card-info a{
    color:#60a5fa;
    text-decoration:none;
    font-weight:600;
}

.training-card-info a:hover{
    color:#fff;
}

.training-card p{
    margin:0;
    color:#cbd5e1;
    line-height:1.5;
    font-size:15px;
}

.no-trainings{
    width:100%;
    padding:22px;
    background:rgba(8,20,40,.82);
    border:1px solid #263858;
    border-radius:10px;
    color:#94a3b8;
}
/* ==============================
   MOBILE
============================== */

@media(max-width:900px){

    .tournament-list{
        grid-template-columns:1fr;
    }

    .tournament-item,
    .tournament-item:nth-child(4),
    .tournament-item:nth-child(5),
    .tournament-item.open{
        grid-column:1;
    }
    .tournament-grid{
        grid-template-columns:1fr;
    }
    .tournament-header{
        min-height:170px;
    }
        .guides-grid{
        grid-template-columns:1fr;
    }
        .tournament-card{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:18px;
    }

    .tournament-card-header{
        width:100%;
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
    }

    .tournament-card h3{
        font-size:20px;
        white-space:normal;
    }

    .tournament-card p{
        width:100%;
        margin:0;
        white-space:normal;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
    }

    .tournament-card-info{
        width:100%;
        flex-direction:row;
        flex-wrap:wrap;
        gap:8px 20px;
    }

    .tournament-button{
        width:100%;
        text-align:center;
    }

}