@import url(
    'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'
);


:root {

    --background: #040404;
    --panel: #070707;

    --text: #d8d8d8;
    --muted: #606060;

    --border: #292929;

    --red: #a80000;
    --bright-red: #e00000;

}


* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    min-height: 100%;

    background:
        radial-gradient(
            circle at center,
            #250000 0%,
            #080000 30%,
            #040404 70%
        );

    color: var(--text);

    font-family:
        "Space Mono",
        monospace;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

}


a {

    color: inherit;

}


/* ================================= */
/* EFFECTS */
/* ================================= */


.noise,
.scanlines {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 50;

}


.noise {

    opacity: .05;

    background-image:
        url(
            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
        );

}


.scanlines {

    opacity: .025;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.12) 4px
        );

}


body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(130,0,0,.12),
            transparent 45%
        );

}


/* ================================= */
/* HEADER */
/* ================================= */


header {

    height: 64px;

    padding: 0 38px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid #220909;

    color: #444;

    font-size: 9px;

    letter-spacing: 3px;

}


.brand {

    color: #ddd;

    text-decoration: none;

    font-weight: bold;

}


.brand i {

    display: inline-block;

    width: 7px;

    height: 7px;

    margin-right: 12px;

    border-radius: 50%;

    background: var(--bright-red);

    box-shadow:
        0 0 12px var(--bright-red);

}


header a {

    color: #900;

}


/* ================================= */
/* HOME */
/* ================================= */


.landing {

    max-width: 1000px;

    min-height:
        calc(100vh - 110px);

    margin: auto;

    padding: 60px 25px;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 70px;

    align-items: center;

}


.warning {

    color: #b40000;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 20px;

}


.hero small {

    color: #303030;

    letter-spacing: 5px;

}


.hero h1 {

    margin: 18px 0 30px;

    font-size: 72px;

    line-height: .85;

    font-weight: 400;

    letter-spacing: 8px;

}


.tagline {

    color: #777;

    font-size: 10px;

    letter-spacing: 5px;

}


.intro {

    margin: 30px 0;

    color: #666;

    font-size: 11px;

    line-height: 1.9;

}


.intro p {

    margin: 0;

}


.description {

    color: #666;

    font-size: 11px;

    line-height: 1.9;

}


.description strong {

    color: #ddd;

}


/* ================================= */
/* BUTTON */
/* ================================= */


.button {

    width: 100%;

    max-width: 420px;

    margin-top: 25px;

    padding: 17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid #670000;

    background: #45000018;

    color: #ddd;

    text-decoration: none;

    font:
        10px "Space Mono";

    letter-spacing: 2px;

    cursor: pointer;

    transition: .2s;

}


.button:hover {

    background: #80000025;

    border-color: #c00000;

    box-shadow:
        0 0 30px rgba(150,0,0,.12);

}


.button b {

    color: var(--bright-red);

}


.small-warning {

    margin-top: 18px;

    color: #421919;

    font-size: 8px;

    letter-spacing: 3px;

}


/* ================================= */
/* TERMINAL */
/* ================================= */


.terminal {

    min-height: 245px;

    border: 1px solid #351313;

    background: #020202cc;

}


.terminal-header {

    padding: 13px;

    border-bottom: 1px solid #211010;

    color: #333;

    font-size: 8px;

    letter-spacing: 2px;

}


.terminal-header em {

    float: right;

    color: #8d0000;

    font-style: normal;

}


.terminal pre {

    padding: 18px;

    margin: 0;

    color: #555;

    font:
        9px/2 "Space Mono";

    white-space: pre-wrap;

}


/* ================================= */
/* CENTRE PAGES */
/* ================================= */


.center {

    min-height: 100vh;

    padding: 35px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}


.node {

    width: 520px;

    max-width: 100%;

    margin-bottom: 18px;

    color: #444;

    text-align: right;

    font-size: 9px;

    letter-spacing: 3px;

}


.panel {

    position: relative;

    width: 520px;

    max-width: 100%;

    padding: 50px;

    background: #050505ee;

    border: 1px solid #501717;

    box-shadow:
        0 0 70px rgba(100,0,0,.1);

}


.panel::before,
.panel::after {

    content: "";

    position: absolute;

    width: 25px;

    height: 25px;

}


.panel::before {

    top: -1px;
    left: -1px;

    border-top: 2px solid #d00000;
    border-left: 2px solid #d00000;

}


.panel::after {

    bottom: -1px;
    right: -1px;

    border-bottom: 2px solid #d00000;
    border-right: 2px solid #d00000;

}


.panel h1 {

    margin: 18px 0 25px;

    font-size: 55px;

    font-weight: 400;

    letter-spacing: 8px;

}


.panel hr {

    border: 0;

    border-top: 1px solid #351010;

    margin-bottom: 28px;

}


.panel label,
.game label {

    display: block;

    margin: 20px 0 10px;

    color: #aaa;

    font-size: 9px;

    letter-spacing: 3px;

}


.panel p {

    color: #666;

    font-size: 10px;

    line-height: 2;

}


/* ================================= */
/* INPUT */
/* ================================= */


.input {

    height: 52px;

    display: flex;

    align-items: center;

    background: #020202;

    border: 1px solid #292929;

}


.input:focus-within {

    border-color: #700000;

}


.input b {

    padding: 0 15px;

    color: #c00000;

}


.input input {

    flex: 1;

    height: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ddd;

    font:
        10px "Space Mono";

    letter-spacing: 2px;

}


.error {

    margin-top: 15px;

    padding: 13px;

    border: 1px solid #650000;

    color: #d00000;

    font-size: 9px;

}


.hidden {

    display: none !important;

}


.foot {

    display: flex;

    justify-content: space-between;

    margin-top: 35px;

    padding-top: 15px;

    border-top: 1px solid #1c1c1c;

    color: #292929;

    font-size: 7px;

    letter-spacing: 2px;

}


.switch {

    margin-top: 20px;

    color: #333;

    text-align: center;

    font-size: 8px;

    letter-spacing: 2px;

}


.switch a {

    color: #900;

    text-decoration: none;

}


.under {

    margin-top: 18px;

    color: #321616;

    font-size: 8px;

    letter-spacing: 3px;

}


/* ================================= */
/* GAME */
/* ================================= */


.game {

    max-width: 1200px;

    min-height:
        calc(100vh - 64px);

    margin: auto;

    padding: 60px 30px;

    display: grid;

    grid-template-columns:
        230px 1fr;

    gap: 65px;

}


.game aside {

    padding-right: 30px;

    border-right: 1px solid #211010;

}


.game aside small {

    color: #333;

    letter-spacing: 4px;

}


.counter {

    margin: 18px 0 10px;

    font-size: 48px;

}


.counter i {

    color: #333;

    font-size: 10px;

    font-style: normal;

}


.bar {

    height: 2px;

    background: #1d1d1d;

}


.bar span {

    display: block;

    height: 100%;

    width: 0;

    background: #a00000;

    transition: width .3s;

}


.game aside p {

    padding: 12px 0;

    border-bottom: 1px solid #181818;

    color: #333;

    font-size: 8px;

    letter-spacing: 2px;

}


.game aside p b {

    float: right;

    color: #777;

    font-weight: 400;

}


.game section {

    max-width: 760px;

}


.meta {

    display: flex;

    justify-content: space-between;

    padding-bottom: 14px;

    border-bottom: 1px solid #251010;

    color: #970000;

    font-size: 8px;

    letter-spacing: 3px;

}


.game h1 {

    margin: 32px 0;

    font-size: 30px;

    font-weight: 400;

    letter-spacing: 3px;

}


.game article {

    min-height: 160px;

    padding: 22px;

    border-left: 2px solid #580000;

    background: #38000008;

    color: #aaa;

    font-size: 13px;

    line-height: 2;

}


/* ================================= */
/* CURSOR LOCK / FINISH */
/* ================================= */


.overlay {

    position: fixed;

    inset: 0;

    z-index: 40;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.96);

    text-align: center;

}


.lock {

    width: 620px;

    max-width: 90%;

    padding: 50px;

    background: #050505;

    border: 1px solid #600000;

    box-shadow:
        0 0 70px rgba(140,0,0,.15);

}


.lock h2 {

    font-weight: 400;

    letter-spacing: 5px;

}


.lock p {

    color: #666;

    font-size: 10px;

    line-height: 2;

}


.lock small {

    color: #9a0000;

}


/* ================================= */
/* MOBILE */
/* ================================= */


@media (max-width: 800px) {

    .landing {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .hero h1 {

        font-size: 53px;

    }


    .game {

        grid-template-columns: 1fr;

        gap: 25px;

    }


    .game aside {

        padding: 0 0 25px;

        border-right: 0;

        border-bottom: 1px solid #211010;

    }


    header {

        padding: 0 18px;

    }


    .panel {

        padding: 38px 25px;

    }

}
/* =========================================
   ADMIN PANEL
========================================= */


.admin-page {

    max-width: 1250px;

    margin: auto;

    padding: 55px 30px 80px;

}


/* TITRE */

.admin-title {

    margin-bottom: 45px;

}


.admin-title small {

    color: #333;

    font-size: 9px;

    letter-spacing: 5px;

}


.admin-title h1 {

    margin: 15px 0;

    font-size: 50px;

    font-weight: 400;

    letter-spacing: 7px;

}


.admin-title p {

    color: #555;

    font-size: 10px;

}


/* =========================================
   STATISTIQUES
========================================= */


.admin-stats {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 25px;

}


.stat {

    position: relative;

    padding: 25px;

    min-height: 145px;

    background: #050505;

    border: 1px solid #281010;

}


.stat::before {

    content: "";

    position: absolute;

    top: -1px;

    left: -1px;

    width: 18px;

    height: 18px;

    border-top: 2px solid #780000;

    border-left: 2px solid #780000;

}


.stat small {

    display: block;

    color: #444;

    font-size: 8px;

    letter-spacing: 3px;

}


.stat strong {

    display: block;

    margin-top: 15px;

    color: #ddd;

    font-size: 42px;

    font-weight: 400;

}


.stat span {

    color: #520000;

    font-size: 7px;

    letter-spacing: 2px;

}


/* =========================================
   CONTENU
========================================= */


.admin-content {

    display: grid;

    grid-template-columns:
        1fr 350px;

    gap: 20px;

}


.admin-panel {

    background: #050505;

    border: 1px solid #281010;

}


.admin-panel-header {

    padding: 15px 18px;

    border-bottom: 1px solid #211010;

    color: #555;

    font-size: 8px;

    letter-spacing: 3px;

}


.admin-panel-header span:last-child {

    float: right;

    color: #420000;

}


.admin-panel-header .red {

    color: #a00000;

}


/* =========================================
   TABLE
========================================= */


.table-head {

    display: grid;

    grid-template-columns:
        1.2fr .7fr .8fr 1fr;

    padding: 13px 18px;

    border-bottom: 1px solid #171717;

    color: #333;

    font-size: 7px;

    letter-spacing: 2px;

}


.player-row {

    display: grid;

    grid-template-columns:
        1.2fr .7fr .8fr 1fr;

    align-items: center;

    min-height: 70px;

    padding: 10px 18px;

    border-bottom: 1px solid #151515;

    font-size: 9px;

}


.player-row:hover {

    background: #18000022;

}


.player-name {

    color: #bbb;

}


.player-status {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #555;

}


.status-light {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #444;

}


.status-light.online {

    background: #b00000;

    box-shadow:
        0 0 8px #b00000;

}


.progress-container {

    display: flex;

    align-items: center;

    gap: 8px;

}


.progress-mini {

    width: 80px;

    height: 3px;

    background: #1b1b1b;

}


.progress-mini span {

    display: block;

    height: 100%;

    background: #820000;

}


.progress-number {

    color: #666;

    font-size: 8px;

}


.activity {

    color: #444;

    font-size: 8px;

}


.empty {

    padding: 50px;

    color: #333;

    text-align: center;

    font-size: 9px;

    letter-spacing: 2px;

}


/* =========================================
   SYSTEM LOG
========================================= */


.system-log {

    height: 320px;

    padding: 18px;

    overflow-y: auto;

    font-size: 8px;

    line-height: 2;

}


.log-line {

    color: #444;

}


.log-line .time {

    color: #570000;

}


.log-line .important {

    color: #900000;

}


/* =========================================
   DANGER
========================================= */


.admin-danger {

    margin-top: 20px;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid #210909;

    background: #050505;

}


.admin-danger small {

    color: #4b0000;

    font-size: 8px;

    letter-spacing: 3px;

}


.admin-danger p {

    margin: 8px 0 0;

    color: #333;

    font-size: 8px;

}


.danger-button {

    padding: 12px 18px;

    border: 1px solid #650000;

    background: transparent;

    color: #900000;

    font:
        8px "Space Mono";

    letter-spacing: 2px;

    cursor: pointer;

}


.danger-button:hover {

    background: #500000;

    color: #ddd;

}


/* =========================================
   ADMIN MOBILE
========================================= */


@media (max-width: 900px) {

    .admin-stats {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .admin-content {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .admin-stats {

        grid-template-columns: 1fr;

    }


    .admin-title h1 {

        font-size: 38px;

    }


    .table-head {

        display: none;

    }


    .player-row {

        grid-template-columns: 1fr;

        gap: 9px;

        padding: 18px;

    }


    .admin-danger {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }

}