/* =====================================
   ROADRUNNER HUD FRAMEWORK
===================================== */

:root{

    --bg:#06111b;
    --bg2:#08131d;

    --panel:#10202d;
    --panel2:#132331;

    --hud:#00E5FF;
    --hud2:#00BCD4;

    --text:#F2FDFF;
    --text2:#9FD9E7;

    --border:rgba(0,229,255,.20);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:
        radial-gradient(circle at top,
        var(--panel2) 0%,
        var(--bg2) 45%,
        var(--bg) 100%);

    color:var(--text);

    font-family:
        "Segoe UI",
        sans-serif;

    min-height:100vh;

}

#stars{

    position:fixed;

    inset:0;

    z-index:-3;

    pointer-events:none;

}

.hud-frame{

    position:fixed;

    inset:12px;

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

    border-radius:14px;

    box-shadow:
        0 0 20px rgba(0,229,255,.10),
        inset 0 0 14px rgba(0,229,255,.05);

    pointer-events:none;

    z-index:-2;

}

.header{

    background:rgba(5,20,32,.82);

    backdrop-filter:blur(10px);

    border-bottom:1px solid var(--border);

    box-shadow:

        0 0 18px rgba(0,229,255,.08);

}

h1,h2,h3{

    color:var(--hud);

    text-shadow:

        0 0 8px rgba(0,229,255,.25);

}

button{

    background:var(--hud2);

    color:#081015;

    border:none;

    transition:.25s;

}

button:hover{

    background:var(--hud);

    box-shadow:

        0 0 16px rgba(0,229,255,.35);

}

input{

    background:#1a2b3a;

    color:white;

    border:1px solid var(--hud2);

}

input:focus{

    outline:none;

    border-color:var(--hud);

    box-shadow:

        0 0 10px rgba(0,229,255,.35);

}