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

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f4f6f9;
}

a {
    text-decoration: none;
}

.card {
    border-radius: 15px;
    border: none;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

/* ==============================
   NAVBAR
============================== */

.navbar-brand {
    font-weight: bold;
    font-size: 20px;
}

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

.wallet-header {
    background: linear-gradient(135deg,#11998e,#38ef7d);
    color: white;
}

/* ==============================
   STAT CARDS (ADMIN)
============================== */

.stat-card {
    color: white;
    padding: 20px;
}

.stat-card h2 {
    margin: 0;
}

.users { background: #3498db; }
.games { background: #9b59b6; }
.active { background: #f39c12; }
.profit { background: #27ae60; }

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

.board {
    width: 90vmin;
    height: 90vmin;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: repeat(15, 1fr);
    margin: auto;
    border: 5px solid #222;
    background: white;
}

.cell {
    border: 1px solid #ddd;
}

/* Player Tokens */
.token {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    margin: auto;
}

.token-red { background: #ff4d4d; }
.token-green { background: #2ecc71; }
.token-blue { background: #3498db; }
.token-yellow { background: #f1c40f; }

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

.btn-primary {
    background: #3498db;
    border: none;
}

.btn-success {
    background: #2ecc71;
    border: none;
}

.btn-danger {
    background: #e74c3c;
    border: none;
}

.btn-warning {
    background: #f39c12;
    border: none;
}

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

.chat-box {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.chat-box p {
    margin: 5px 0;
    font-size: 14px;
}

.chat-box strong {
    color: #2c3e50;
}

/* ==============================
   TABLE STYLING
============================== */

.table th {
    background: #2c3e50;
    color: white;
}

.badge {
    padding: 6px 10px;
    border-radius: 20px;
}

/* ==============================
   RESPONSIVE DESIGN
============================== */

@media (max-width: 992px) {
    .board {
        width: 95vmin;
        height: 95vmin;
    }
}

@media (max-width: 768px) {
    .board {
        width: 98vmin;
        height: 98vmin;
    }

    .chat-box {
        height: 200px;
    }
}

/* ==============================
   LOGIN / REGISTER FORMS
============================== */

.login-box,
.register-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}