:root {
    color-scheme: dark;
    --bg: #080b10;
    --surface: #111722;
    --surface-2: #161d29;
    --border: #252e3b;
    --text: #f3f6fb;
    --muted: #8f9bad;
    --primary: #315be8;
    --brand: #f5b700;
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Tahoma, Arial, sans-serif;
}

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

.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(49,91,232,.17), transparent 28rem),
        radial-gradient(circle at 84% 88%, rgba(245,183,0,.08), transparent 30rem),
        var(--bg);
    color: var(--text);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 18px;
}

.auth-card {
    width: min(440px, 100%);
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(22,29,41,.96), rgba(13,18,27,.98));
    box-shadow: 0 28px 90px rgba(0,0,0,.46);
}

.auth-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.auth-brand img { width: 168px; max-height: 72px; object-fit: contain; object-position:left center; }
.auth-brand span { color:var(--brand); font-size: 11px; font-weight:800; letter-spacing:.14em; }
.auth-heading { margin:24px 0 20px; }
.auth-heading h1 { margin:0 0 7px; font-size:28px; }
.auth-heading p, .auth-first-run span { color:var(--muted); font-size:13px; line-height:1.55; }
.auth-form { display:grid; gap:15px; }
.auth-form label:not(.auth-check) { display:grid; gap:7px; }
.auth-form label > span { font-size:11px; font-weight:760; color:#c4ccda; letter-spacing:.03em; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text] {
    width:100%; height:44px; padding:0 12px; border:1px solid #303a49; border-radius:10px;
    background:#0d121b; color:var(--text); outline:none;
}
.auth-form input:focus { border-color:#5272ea; box-shadow:0 0 0 3px rgba(49,91,232,.17); }
.auth-form small { color:var(--muted); font-size:11px; }
.auth-check { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.auth-form button, .auth-first-run a {
    min-height:44px; border:0; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--primary); color:white; font-size:13px; font-weight:760; text-decoration:none; cursor:pointer;
}
.auth-form button:hover, .auth-first-run a:hover { filter:brightness(1.08); }
.auth-error { margin-bottom:16px; padding:10px 12px; border:1px solid rgba(239,68,68,.32); border-radius:10px; background:rgba(239,68,68,.10); color:#ffb4b4; font-size:12px; }
.auth-first-run { margin-top:22px; padding:14px; display:grid; gap:6px; border:1px solid rgba(245,183,0,.18); border-radius:12px; background:rgba(245,183,0,.055); }
.auth-first-run strong { font-size:12px; color:#f3d36f; }
.auth-first-run a { margin-top:5px; min-height:38px; background:rgba(245,183,0,.12); color:#f3d36f; border:1px solid rgba(245,183,0,.2); }
.setup-card { width:min(500px,100%); }



/* =========================================================
   GAME UI — LOGIN / CONFIGURAÇÃO INICIAL
   ========================================================= */
.auth-body {
    background:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
        radial-gradient(circle at 18% 12%, rgba(49,91,232,.17), transparent 28rem),
        radial-gradient(circle at 84% 88%, rgba(216,173,75,.08), transparent 30rem),
        #080b10;
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.auth-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(216,173,75,.24);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(27,35,47,.97), rgba(13,18,27,.985));
    box-shadow: 0 28px 90px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.03);
}

.auth-card::before,
.auth-card::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    opacity: .5;
}

.auth-card::before {
    left: 10px;
    top: 10px;
    border-left: 1px solid #9d7a31;
    border-top: 1px solid #9d7a31;
}

.auth-card::after {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid #9d7a31;
    border-bottom: 1px solid #9d7a31;
}

.auth-brand { border-bottom-color: rgba(216,173,75,.18); }
.auth-brand span { color: #f2c95c; }

.auth-form input[type=email],
.auth-form input[type=password],
.auth-form input[type=text] {
    border-color: rgba(135,148,164,.26);
    border-radius: 11px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}

.auth-form input:focus {
    border-color: rgba(216,173,75,.5);
    box-shadow: 0 0 0 3px rgba(49,91,232,.14), inset 0 1px 2px rgba(0,0,0,.16);
}

.auth-form button {
    background: linear-gradient(180deg, #466ced, #315be8);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(49,91,232,.18);
}