/*
    Mumpower Game Lounge
    Main Stylesheet
*/


/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}


body {

    margin:0;

    background:#101820;

    color:#e8e8e8;

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

    font-size:14px;

}


a {

    color:#90e0ef;

    text-decoration:none;

}


a:hover {

    color:#ffffff;

}


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

.header {

    height:60px;

    background:#1b263b;

    border-bottom:2px solid #415a77;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}


.header h1 {

    margin:0;

    font-size:24px;

    color:#90e0ef;

}


/* =========================
   MAIN LAYOUT
========================= */


.container {

    display:grid;

    grid-template-columns:

        180px

        1fr

        140px;


    gap:10px;

    padding:10px;

    height:calc(100vh - 80px);

}


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


.panel {

    background:#16213e;

    border:1px solid #415a77;

    border-radius:5px;

    padding:10px;

    overflow:hidden;

}


.panel h2 {

    margin-top:0;

    color:#90e0ef;

    font-size:17px;

    border-bottom:1px solid #415a77;

    padding-bottom:5px;

}



/* =========================
   GAMES PANEL
========================= */


.games-panel {

    overflow-y:auto;

}



.game-card {

    background:#243b55;

    padding:10px;

    margin-bottom:10px;

    border-radius:5px;

}


.game-card:hover {

    background:#2d4a68;

}


.game-card h3 {

    margin-top:0;

}



.disabled {

    opacity:.5;

}



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


.players-panel {

    font-size:13px;

    overflow-y:auto;

}


#players {

    line-height:1.8;

}


/* online indicator */

.player-online {

    color:#55ff55;

}



/* =========================
   CHAT
========================= */


.chat-panel {

    display:flex;

    flex-direction:column;

}



#chat {

    flex:1;

    min-height:400px;

    background:#0d1b2a;

    border:1px solid #415a77;

    padding:10px;

    overflow-y:auto;

}



.chat-message {

    margin-bottom:5px;

}



.chat-name {

    color:#90e0ef;

    font-weight:bold;

}



.chat-input {

    display:flex;

    gap:5px;

    margin-top:10px;

}



.chat-input input {

    flex:1;

}



/* =========================
   INPUTS
========================= */


input {

    background:#0d1b2a;

    color:white;

    border:1px solid #415a77;

    padding:8px;

    border-radius:3px;

}


input:focus {

    outline:none;

    border-color:#90e0ef;

}



/* =========================
   BUTTONS
========================= */


button {

    background:#0077b6;

    color:white;

    border:0;

    padding:8px 15px;

    border-radius:3px;

    cursor:pointer;

}



button:hover {

    background:#0096c7;

}



/* =========================
   LOGIN SCREEN
========================= */


.login-box {

    width:400px;

    margin:150px auto;

    background:#16213e;

    border:1px solid #415a77;

    border-radius:8px;

    padding:40px;

    text-align:center;

}



.login-box h1 {

    color:#90e0ef;

}



.subtitle {

    color:#cccccc;

    margin-bottom:20px;

}



.login-box input {

    width:100%;

    margin-bottom:15px;

}



/* =========================
   TABLE SCREEN
========================= */


.table-area {

    width:700px;

    height:450px;

    margin:30px auto;

    background:#006400;

    border-radius:200px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    padding:80px;

}



.seat {

    background:#16213e;

    padding:20px;

    text-align:center;

    border-radius:10px;

}
.table-controls {

    text-align:center;

    margin:20px;

}



/* =========================
   SCROLLBARS
========================= */


::-webkit-scrollbar {

    width:8px;

}


::-webkit-scrollbar-track {

    background:#0d1b2a;

}


::-webkit-scrollbar-thumb {

    background:#415a77;

    border-radius:5px;

}