/* FatalWare download page - the launcher's deep space style: glass card, white accent, the real logo. */
:root {
    --accent: #f4f5fa;
    --accent2: #8c93a8;
    --on-accent: #0b0b10;
    --bg: #030305;
    --dim: #9499ad;
    --muted: #5d6175;
    --bad: #ff8a96;
    --good: #7dffb5;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    background: var(--bg);
    color: #f4f5fa;
    font: 14px/1.45 "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}
.mono { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; }

/* backdrop: stars + two slowly drifting nebulae */
.space {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background:
        radial-gradient(1px 1px at 12% 30%, #fff8, transparent),
        radial-gradient(1px 1px at 42% 72%, #fff6, transparent),
        radial-gradient(1.5px 1.5px at 76% 22%, #fff9, transparent),
        radial-gradient(1px 1px at 64% 48%, #fff5, transparent),
        radial-gradient(1px 1px at 88% 60%, #fff7, transparent),
        radial-gradient(1px 1px at 24% 86%, #fff6, transparent),
        radial-gradient(1px 1px at 55% 12%, #fff6, transparent),
        radial-gradient(1.5px 1.5px at 8% 64%, #fff7, transparent),
        radial-gradient(1px 1px at 93% 9%, #fff6, transparent),
        radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.55)),
        var(--bg);
}
.nebula { position: absolute; border-radius: 50%; animation: drift 26s ease-in-out infinite alternate; }
.n1 {
    width: 70vmax; height: 52vmax; left: -22vmax; top: -24vmax;
    background: radial-gradient(closest-side, rgba(140,147,168,0.24), transparent);
}
.n2 {
    width: 60vmax; height: 46vmax; right: -22vmax; bottom: -24vmax;
    background: radial-gradient(closest-side, rgba(244,245,250,0.11), transparent);
    animation-duration: 32s; animation-direction: alternate-reverse;
}
@keyframes drift { to { transform: translate(7vmax, 5vmax) scale(1.1); } }

.wrap {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px;
    animation: rise .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.card {
    position: relative;
    width: min(440px, 100%);
    display: flex; flex-direction: column;
    padding: 34px 40px 30px;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)), rgba(9, 9, 14, 0.78);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
}
/* a thin light line along the top edge */
.card::before {
    content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}
.card.shake { animation: shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
    20%, 60% { transform: translateX(-7px); }
    40%, 80% { transform: translateX(7px); }
}

.brand { display: flex; align-items: center; justify-content: center; gap: 10px; }
.logo { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(244,245,250,0.35)); }
.wordmark { font-size: 23px; font-weight: 800; letter-spacing: -0.2px; }
.badge {
    font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
    padding: 4px 10px 3px; border-radius: 999px;
    color: var(--on-accent);
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 0 18px rgba(244,245,250,0.22);
}

/* the lock: closed -> spinning while the key is checked -> opens (green) or flashes red */
.lock {
    position: relative; isolation: isolate;
    width: 84px; height: 84px; margin: 28px auto 20px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 70%);
    border: 1px solid rgba(255,255,255,0.09);
    transition: color .3s, border-color .3s, box-shadow .3s;
}
.lock::before {
    content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, currentColor 16%, transparent), transparent);
    transition: opacity .3s;
}
.lock svg {
    width: 44px; height: 44px; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.lock .body { fill: #0d0e14; }
.lock .hole { fill: currentColor; stroke: none; }
.lock .hole-line { stroke-width: 2.6; }
.lock .shackle {
    transform-box: fill-box; transform-origin: 100% 100%;
    transition: transform .5s cubic-bezier(.3,1.5,.5,1);
}
.lock.busy::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.07); border-top-color: var(--accent);
    animation: spin .8s linear infinite;
}
.lock.open { color: var(--good); border-color: rgba(125,255,181,0.32); box-shadow: 0 0 34px rgba(125,255,181,0.14); }
.lock.open .shackle { transform: translateY(-5px) rotate(18deg); }
.lock.bad { color: var(--bad); border-color: rgba(255,138,150,0.32); }
@keyframes spin { to { transform: rotate(360deg); } }

h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.3px; }
.dim { color: var(--dim); margin: 6px 0 0; }

.field {
    display: flex; flex-direction: column; gap: 8px; margin-top: 28px;
    text-align: left; font-size: 12.5px; font-weight: 600; color: #d6d8e2;
}
input {
    width: 100%; text-align: center;
    font-size: 15px; letter-spacing: 1.5px; color: #fff;
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
    padding: 14px 16px; outline: none; text-transform: uppercase;
    transition: border-color .15s, box-shadow .2s, background .15s;
}
input::placeholder { color: var(--muted); letter-spacing: 1.5px; }
input:focus {
    border-color: rgba(244,245,250,0.5); background: rgba(0,0,0,0.5);
    box-shadow: 0 0 0 4px rgba(244,245,250,0.06), 0 0 24px rgba(244,245,250,0.08);
}
input.invalid { border-color: #ff5d6c; box-shadow: 0 0 0 4px rgba(255,93,108,0.10); }
/* the DEV page: the login and the password as typed, the two fields close together */
input.plain, input[type=password] { text-transform: none; letter-spacing: 0.3px; }
.field + .field { margin-top: 14px; }
.error { min-height: 18px; margin: 8px 0 8px; font-size: 12.5px; color: var(--bad); }

.btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; appearance: none; cursor: pointer;
    font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .3px;
    padding: 15px 18px; border-radius: 14px;
    color: var(--on-accent);
    border: 1px solid rgba(255,255,255,0.2);
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    box-shadow: 0 8px 26px rgba(244,245,250,0.16);
    transition: opacity .2s, filter .15s, transform .1s, box-shadow .15s, background .3s;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 10px 32px rgba(244,245,250,0.26); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: default; box-shadow: none; }
.btn.busy:disabled, .btn.done:disabled { opacity: 1; }
.btn.done { background: linear-gradient(90deg, #7dffb5, #3ddc84); box-shadow: 0 8px 26px rgba(125,255,181,0.2); }

.btn .spinner, .btn .check { display: none; }
.btn.busy .spinner {
    display: block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(11,11,16,0.25); border-top-color: var(--on-accent);
    animation: spin .7s linear infinite;
}
.btn.done .check {
    display: block; width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

.info { margin: 14px 0 0; font-size: 12px; color: var(--muted); min-height: 16px; }
.info.good { color: var(--good); }
.info a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(244,245,250,0.3); }
.info a:hover { border-bottom-color: var(--accent); }
.foot { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 480px) {
    .card { padding: 28px 22px 24px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .nebula, .wrap { animation: none; }
}