/* =======================================================
   SOS ARENA
   STYLE.CSS
======================================================= */

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

:root{

    --bg:#171d30;

    --panel:#26314d;

    --panel2:#31446d;

    --cell:#2e3b61;

    --cellHover:#42558a;

    --blue:#4aa3ff;

    --red:#ff5c6c;

    --green:#42c96f;

    --orange:#ff9800;

    --white:#ffffff;

}

body{

    background:var(--bg);

    color:var(--white);

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

    min-height:100vh;

    overflow-x:hidden;

}

#app{

    width:min(96vw,900px);

    margin:auto;

    padding:20px;

}

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

#header{

    text-align:center;

    margin-bottom:20px;

}

#header h1{

    font-size:42px;

    letter-spacing:2px;

}

/* ================= SCORE ================= */

#scorePanel{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:15px;

    align-items:center;

    margin-bottom:20px;

}

.player{

    background:var(--panel);

    border-radius:14px;

    padding:16px;

    text-align:center;

}

.playerTitle{

    font-size:18px;

}

.score{

    font-size:42px;

    font-weight:bold;

    margin-top:8px;

}

.blue{

    border:3px solid var(--blue);

}

.red{

    border:3px solid var(--red);

}

#turnPanel{

    background:var(--panel2);

    padding:15px 20px;

    border-radius:14px;

    text-align:center;

}

.smallTitle{

    font-size:14px;

    opacity:.8;

}

#turnText{

    font-size:24px;

    font-weight:bold;

    margin-top:6px;

}

/* ================= LETTER PANEL ================= */

#letterPanel{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:24px;

}

.letterButton{

    width:64px;

    height:64px;

    border:none;

    border-radius:12px;

    font-size:32px;

    cursor:pointer;

    transition:.2s;

}

.letterButton:hover{

    transform:scale(1.05);

}

.letterButton.active{

    background:var(--green);

    color:white;

}

#newGameBtn{

    padding:16px 28px;

    border:none;

    border-radius:12px;

    background:var(--orange);

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.2s;

}

#newGameBtn:hover{

    transform:scale(1.05);

}

/* ================= BOARD ================= */

#board{

    display:grid;

    grid-template-columns:repeat(6,60px);

    grid-template-rows:repeat(8,60px);

    justify-content:center;

    gap:8px;

}

.cell{

    width:60px;

    height:60px;

    background:var(--cell);

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    font-weight:bold;

    cursor:pointer;

    transition:.15s;

    user-select:none;

}

.cell:hover{

    background:var(--cellHover);

}

/* ================= FOOTER ================= */

footer{

    text-align:center;

    margin-top:30px;

    opacity:.5;

}

/* ================= TABLET ================= */

@media (max-width:800px){

    #board{

        grid-template-columns:repeat(6,52px);

        grid-template-rows:repeat(8,52px);

        gap:6px;

    }

    .cell{

        width:52px;

        height:52px;

        font-size:28px;

    }

}

/* ================= MOBILE ================= */

@media (max-width:600px){

    #header h1{

        font-size:32px;

    }

    #scorePanel{

        grid-template-columns:1fr;

    }

    #turnPanel{

        order:-1;

    }

    #board{

        grid-template-columns:repeat(6,40px);

        grid-template-rows:repeat(8,40px);

        gap:4px;

    }

    .cell{

        width:40px;

        height:40px;

        font-size:22px;

    }

    .letterButton{

        width:52px;

        height:52px;

        font-size:26px;

    }

    #newGameBtn{

        width:100%;

    }

}