<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Entrar | Survive</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg1: #050714;
            --bg2: #0f1430;
            --line: #34427a;
            --text: #eef2ff;
            --muted: #97a4cf;
            --yellow: #ffc928;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Rajdhani', sans-serif;
            color: var(--text);
            background:
                radial-gradient(600px 380px at 10% -10%, #5b34ce55 0%, transparent 60%),
                radial-gradient(700px 420px at 100% 120%, #f59e0b44 0%, transparent 60%),
                linear-gradient(145deg, var(--bg1), var(--bg2));
            display: grid;
            place-items: center;
            padding: 16px;
        }

        .card {
            width: min(420px, 100%);
            border: 1px solid var(--line);
            border-radius: 20px;
            background: #0b1027ee;
            padding: 20px;
            box-shadow: 0 24px 70px #0009;
        }

        .logo {
            display: block;
            width: 100%;
            max-width: 320px;
            margin: 0 auto 10px;
        }

        h1 {
            margin: 2px 0 2px;
            font-family: 'Anton', sans-serif;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            font-size: 1.9rem;
            text-align: center;
        }

        .subtitle {
            margin: 0 0 16px;
            color: var(--muted);
            text-align: center;
            font-size: 1.04rem;
        }

        .alert {
            border: 1px solid #ef4444;
            background: #7f1d1d66;
            color: #fee2e2;
            border-radius: 12px;
            padding: 10px 12px;
            margin-bottom: 12px;
            font-weight: 700;
        }

        .group { margin-bottom: 12px; }

        label {
            display: block;
            margin-bottom: 5px;
            color: #cdd7ff;
            font-weight: 700;
        }

        input {
            width: 100%;
            border: 1px solid #3c4a8a;
            border-radius: 12px;
            background: #0c1330;
            color: #f5f7ff;
            padding: 11px 12px;
            font: inherit;
            font-weight: 700;
            outline: none;
        }

        input:focus {
            border-color: #7c6dff;
            box-shadow: 0 0 0 3px #7c6dff33;
        }

        button {
            width: 100%;
            border: 1px solid #efb910;
            border-radius: 12px;
            background: linear-gradient(180deg, #ffd54a, #ffc928);
            color: #251600;
            font: inherit;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            padding: 11px 12px;
            cursor: pointer;
        }

        .links {
            margin-top: 12px;
            text-align: center;
            color: var(--muted);
            font-weight: 700;
        }

        .links a {
            color: var(--yellow);
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .card {
                border-radius: 16px;
                padding: 16px 14px;
            }

            .logo {
                max-width: 260px;
            }

            h1 {
                font-size: 1.65rem;
            }

            .subtitle {
                font-size: 0.98rem;
            }
        }

        @media (max-height: 730px) {
            body {
                display: block;
                min-height: auto;
            }

            .card {
                margin: 8px auto;
            }
        }
    </style>
</head>
<body>
    <main class="card">
        <img class="logo" src="{{ asset('images/survive-logo.png') }}?v=3" alt="Survive">
        <h1>Entrar na sua cidade</h1>
        <p class="subtitle">Jogue apenas com participantes da mesma cidade.</p>

        @if ($errors->any())
            <div class="alert">{{ $errors->first() }}</div>
        @endif

        <form method="post" action="{{ route('player.login.submit') }}">
            @csrf
            <div class="group">
                <label for="email">E-mail</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required>
            </div>
            <div class="group">
                <label for="password">Senha</label>
                <input id="password" type="password" name="password" required>
            </div>
            <button type="submit">Entrar</button>
        </form>

        <div class="links">
            Não tem conta? <a href="{{ route('register') }}">Criar cadastro</a>
        </div>
    </main>
</body>
</html>
