@font-face{

    font-family:'Tournament';

    src:url('fonts/airstrike_0.ttf') format('truetype');

    font-weight:700;

}

body{

    background:#000;
    color:#000;

    font-family:Arial, Helvetica, sans-serif;

    margin:10px;

}



/* HEADER */

.header{

    text-align:center;

    font-size:48px;

    font-weight:bold;

    margin-bottom:15px;

}


.header h2{

	font-family:'Tournament', Arial, sans-serif;
	
    color:#FFF;

    margin:8px;

}



/* ROUND BUTTON */

.buttons a{

    display:inline-block;

    padding:8px 25px;

    margin:4px;

    background:#1e293b;

    color:#fff;

    border:1px solid #475569;

    border-radius:5px;

    text-decoration:none;

    font-size:20px;

}



.buttons a.active{

    background:#f59e0b;

    color:#000;

    border-color:#ffd700;

}



/* GROUP TABLE */

.group-table{

    width:100%;

    table-layout:fixed;

    border-collapse:separate;

    border-spacing:10px;

}



/* EACH GROUP */

.group-column{

    width:25%;

    vertical-align:top;

}



.group-box{

    background:#111827;

    border:2px solid #475569;

    border-radius:10px;

    overflow:hidden;

}



/* GROUP HEADER */

.group-title{

    text-align:center;

    background:#1e293b;

    color:#ffd700;

    font-size:26px;

    font-weight:bold;

    padding:12px;

    border-bottom:2px solid #475569;

}



/* MATCH BOX */

.match{

    margin:10px;
	margin-bottom:20px;

    border:4px solid #475569;

    border-radius:10px;

    overflow:hidden;

}



/* PLAYER ROW */

.player-row{

    display:flex;

    height:50px;

    align-items:center;

    background:#334155;

    border-bottom:1px solid #64748b;

    font-size:28px;

}



.player-row:last-child{

    border-bottom:none;

}



/* PLAYER NAME */

.name{

    flex:1;

    padding-left:12px;

    color:#ffffff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* SCORE */

.score-area{

    width:70px;

    display:flex;

    justify-content:flex-end;

    background:transparent;

    padding-right:8px;

}



.score{

    width:70px;

    height:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:bold;

    color:white;

}



/* WIN */

.score-2{

background:#16a34a;

}


/* DRAW / 1 POINT */

.score-1{

background:#eab308;

color:#000;

}


/* LOSS */

.score-0{

background:#dc2626;

}


/* NOT PLAYED */

.score--{

background:#475569;

}



/* EMPTY */

.empty{

    text-align:center;

    padding:50px 10px;

    color:#94a3b8;

}



/* FOOTER */

.footer{

    text-align:center;

    margin-top:15px;

    color:#94a3b8;

    font-size:18px;

}

.timer-box{

position:fixed;

top:15px;

right:15px;

width:620px;           /* Wider */

background:#111827;

border:2px solid #475569;

border-radius:10px;

padding:12px;

text-align:center;

box-shadow:0 4px 12px rgba(0,0,0,.4);

z-index:999;

}



#timer{

    width:100%;

    font-size:120px;

    font-weight:bold;

    letter-spacing:2px;

    line-height:1;

    margin-bottom:4px;

    transition:0.4s ease;

}



#timer-label{

    font-size:60px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

    transition:0.4s ease;

}



.timer-buttons{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-top:10px;

}

.timer-buttons button{

    flex:1;

    height:55px;

    font-size:28px;

    font-weight:bold;

    border:none;

    border-radius:8px;

    cursor:pointer;

    color:white;

    transition:0.2s;

}

/* Start */
.timer-buttons button:nth-child(1){

    background:#16a34a;

}

/* Pause */
.timer-buttons button:nth-child(2){

    background:#f59e0b;

    color:#000;

}

/* Reset */
.timer-buttons button:nth-child(3){

    background:#dc2626;

}

.timer-box button:hover{

background:#f59e0b;

color:#000;

}

/* 25:00 - 10:01 */
.timer-green{

    color:#22c55e;

}

/* 10:00 - 05:01 */
.timer-yellow{

    color:#facc15;

}

/* 05:00 - 00:00 */
.timer-red{

    color:#ef4444;

}

@keyframes timerBlink{

    0%{
        opacity:1;
    }

    50%{
        opacity:.2;
    }

    100%{
        opacity:1;
    }

}

.timer-blink{

    animation:timerBlink .8s infinite;

}

.player-list{

    height:42px;

    background:#1e293b;

    border-bottom:1px solid #334155;

}

.player-list .name{

    width:100%;

    padding-left:12px;

    font-size:18px;

    display:flex;

    align-items:center;

}