/* ===========================
   TUG OF WAR TRIVIA
   Main Stylesheet
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Orbitron',sans-serif;
    background:#071018;
    color:#fff;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ===========================
   GAME AREA
=========================== */

#game{

    width:100vw;
    height:100vh;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at top,#173f69,#08111d 70%);
}


/* ===========================
   ANIMATED BACKGROUND
=========================== */

.background{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(255,255,255,.03),
        rgba(255,255,255,0)
    );

    opacity:.4;
}

.lights{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    radial-gradient(circle,#2ab9ff55 0%,transparent 60%),
    radial-gradient(circle,#ff343455 0%,transparent 60%);

    background-size:500px 500px;

    animation:moveLights 12s linear infinite;
}



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

header{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 40px;

    position:absolute;

    top:0;

    z-index:20;
}


/* ===========================
   TEAM PANELS
=========================== */

.team{

    width:260px;

    padding:20px;

    border-radius:20px;

    text-align:center;

    backdrop-filter:blur(8px);

    border:2px solid rgba(255,255,255,.2);

    box-shadow:
    0 0 30px rgba(255,255,255,.08);

}

.team h2{

    font-size:24px;

    letter-spacing:2px;

    margin-bottom:10px;

}

.score{

    font-size:55px;

    font-weight:900;

}

.blue{

    background:#118dff22;

    border-color:#22a8ff;

    box-shadow:0 0 30px #0095ff;

}

.red{

    background:#ff222222;

    border-color:#ff4040;

    box-shadow:0 0 30px #ff2f2f;

}



/* ===========================
   TITLE
=========================== */

.title{

    text-align:center;

}

.title h1{

    font-size:48px;

    color:#ffd400;

    text-shadow:

    0 0 10px gold,

    0 0 25px gold;

}

.title span{

    display:block;

    margin-top:5px;

    color:#fff;

    font-size:26px;

    letter-spacing:10px;

}

.round{

    margin-top:10px;

    font-size:18px;

}



/* ===========================
   COUNTDOWN
=========================== */

#countdown{

    position:absolute;

    left:50%;

    top:130px;

    transform:translateX(-50%);

    font-size:90px;

    font-weight:900;

    color:#ffe600;

    text-shadow:

    0 0 25px gold;

    display:none;

}



/* ===========================
   QUESTION BOX
=========================== */

.questionBox{

    position:absolute;

    top:180px;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    max-width:92%;

    padding:35px;

    border-radius:25px;

    background:rgba(10,20,40,.85);

    border:2px solid rgba(255,255,255,.15);

    box-shadow:

    0 0 40px rgba(0,0,0,.4);

    z-index:10;

}

#timer{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#ffd400;

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    font-weight:bold;

    margin:auto auto 25px;

}

#question{

    text-align:center;

    font-size:30px;

    margin-bottom:30px;

    line-height:1.5;

}



/* ===========================
   ANSWERS
=========================== */

.answers{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.answer{

    padding:22px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    font-size:20px;

    font-weight:bold;

    transition:.25s;

    background:#1e3556;

    color:white;

}

.answer:hover{

    transform:scale(1.05);

    background:#2d73ff;

    box-shadow:

    0 0 20px #2d73ff;

}



/* ===========================
   ARENA
=========================== */

.arena{

    position:absolute;

    bottom:140px;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;

}



/* ===========================
   PLAYERS
=========================== */

.players{

    display:flex;

    gap:18px;

}

.player{

    width:60px;

    height:140px;

    border-radius:20px;

    background:linear-gradient(#ffffff,#aaaaaa);

    box-shadow:

    0 0 15px rgba(255,255,255,.3);

}



/* ===========================
   ROPE
=========================== */

.ropeContainer{

    width:50%;

    display:flex;

    justify-content:center;

}

#rope{

    width:100%;

    height:16px;

    border-radius:20px;

    background:

    repeating-linear-gradient(
    45deg,
    #c89a5c,
    #c89a5c 10px,
    #b07d44 10px,
    #b07d44 20px
    );

    position:relative;

}

#flag{

    position:absolute;

    left:50%;

    top:-14px;

    width:14px;

    height:45px;

    background:#fff;

    transform:translateX(-50%);

    border-radius:4px;

}



/* ===========================
   PROGRESS BAR
=========================== */

.progressArea{

    width:70%;

    position:absolute;

    bottom:50px;

    left:50%;

    transform:translateX(-50%);

}

.bar{

    width:100%;

    height:25px;

    background:#243142;

    border-radius:50px;

    overflow:hidden;

}

#progress{

    width:50%;

    height:100%;

    background:linear-gradient(90deg,#2196f3,#ff4444);

}



/* ===========================
   WIN SCREEN
=========================== */

#winnerScreen{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    background:rgba(0,0,0,.9);

    z-index:100;

}

#winnerText{

    font-size:80px;

    margin-bottom:40px;

    color:#ffd400;

    text-shadow:

    0 0 25px gold;

}

#restart{

    padding:20px 60px;

    border:none;

    border-radius:15px;

    background:#2a7cff;

    color:white;

    font-size:25px;

    cursor:pointer;

    transition:.3s;

}

#restart:hover{

    transform:scale(1.1);

}



/* ===========================
   CONFETTI
=========================== */

#confettiCanvas{

    position:absolute;

    inset:0;

    pointer-events:none;

}



/* ===========================
   LIGHT MOVEMENT
=========================== */

@keyframes moveLights{

0%{

background-position:0 0,100% 100%;

}

50%{

background-position:100% 0,0 100%;

}

100%{

background-position:0 0,100% 100%;

}

}