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

body {	
	background:
        linear-gradient(
            rgba(0, 20, 32, 0.35),
            rgba(0, 20, 32, 0.55)
        ),
        url("../images/battleship-bg.jpg")
        center center / cover
        fixed no-repeat;
}
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    padding: 20px;
}

.login-box {
    width: min(500px, 100%);
    padding: 42px;

    text-align: center;
	
	background: rgba(3, 28, 43, 0.94);
}

.login-logo {
    font-size: 58px;
    margin-bottom: 5px;
}

.login-box h1 {
    margin: 0;

    font-size: 40px;
}

.login-subtitle {
    margin: 12px 0 30px;

    color: var(--text-muted);
    font-size: 17px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form label {
    text-align: left;

    color: var(--accent-bright);
    font-weight: bold;
}

.login-form input {
    width: 100%;
    padding: 13px 14px;

    border: 1px solid var(--border-bright);
    border-radius: 7px;
    outline: none;

    color: #fff;

    background:
        rgba(3, 30, 47, .9);
}

.login-form input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 3px rgba(85, 200, 255, .12);
}

.login-form .btn {
    margin-top: 7px;
}

.form-error {
    margin-bottom: 16px;
    padding: 11px;

    border: 1px solid #9d4444;
    border-radius: 7px;

    color: #ffd1d1;

    background:
        rgba(120, 25, 25, .3);
}


/* ==============================================
   LOBBY
   ============================================== */

.player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-name {
    font-weight: bold;
}

.lobby-panel {
    max-width: 850px;
    margin: 0 auto;
    padding: 28px;
}

.lobby-title {
    margin: 0;

    text-align: center;
    font-size: 30px;
}

.lobby-intro {
    margin: 8px 0 28px;

    text-align: center;

    color: var(--text-muted);
}

.lobby-status {
    margin-bottom: 12px;

    color: var(--accent-bright);
    font-size: 14px;
}

.player-list {
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 9px;
}

.player-row {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 65px;
    padding: 12px 15px;

    border-bottom:
        1px solid rgba(50, 131, 173, .28);

    background:
        rgba(7, 49, 73, .48);
}

.player-row:last-child {
    border-bottom: 0;
}

.player-row:hover {
    background:
        rgba(10, 68, 99, .58);
}

.player-row-name {
    flex: 1;
}

.player-row-name strong {
    display: block;

    font-size: 17px;
}

.player-row-status {
    color: var(--text-muted);
    font-size: 14px;
}

.player-row-self {
    color: var(--accent);
}

.player-row-playing {
    color: #efc45c;
}

.challenge-waiting {
    margin-top: 20px;
    padding: 15px;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--accent-bright);

    background:
        rgba(4, 48, 72, .7);
}

.challenge-time {
    margin-top: 10px;

    color: var(--text-muted);
    font-size: 14px;
}

@media (max-width: 600px) {
    .login-box {
        padding: 28px 20px;
    }

    .login-box h1 {
        font-size: 32px;
    }

    .lobby-panel {
        padding: 18px 12px;
    }

    .player-row {
        flex-wrap: wrap;
    }

    .player-row-name {
        flex-basis: calc(100% - 20px);
    }
}

/* KATSOJAT */
.spectator-option { margin:16px 0 4px; padding:12px 14px; border:1px solid var(--border); border-radius:8px; background:rgba(7,49,73,.45); color:var(--text-muted); }
.spectator-option label { cursor:pointer; }
.spectator-option input { margin-right:8px; }
.public-games-section { margin-top:28px; }
.public-games-section h3 { color:var(--accent-bright); }
.public-game-empty { padding:16px; color:var(--text-muted); background:rgba(7,49,73,.35); }

.challenge-spectator-info { color:var(--text-muted); font-size:14px; }


.challenge-cancel { margin-top: 12px; }
.challenge-result { margin-top: 20px; padding: 14px 15px; text-align:center; border:1px solid var(--border); border-radius:8px; background:rgba(4,48,72,.82); color:var(--accent-bright); }
.challenge-result.challenge-result-warning { color:#ffb347; border-color:rgba(255,179,71,.55); }