/* ===========================================================
   ARMA LV - Cadet Academy
   Military Theme (US Army 90's)
=========================================================== */

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

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

:root{

    --bg:#1a1c17;
    --panel:#2a2d25;
    --panel2:#34392f;

    --green:#5f7d38;
    --green-hover:#769b47;

    --gold:#c7a15a;

    --text:#ece7d5;

    --border:#6e734f;

    --shadow:rgba(0,0,0,.55);

}

body{

    font-family:'Rajdhani',sans-serif;

    background:
        linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
        url("assets/background.jpg") center center/cover no-repeat fixed;

    color:var(--text);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow-x:hidden;

}

/* затемнение */

.overlay{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,255,255,.03),
    rgba(0,0,0,.5));

    pointer-events:none;

}

/* шум */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.05;

    background-image:
    radial-gradient(#ffffff 1px, transparent 1px);

    background-size:4px 4px;

}

/* контейнер */

.container{

    position:relative;

    z-index:10;

    width:650px;

    max-width:94%;

    text-align:center;

}

/* логотип */

.logo{

    width:140px;

    margin-bottom:20px;

    border-radius:14px;

    border:3px solid var(--gold);

    box-shadow:

    0 0 25px rgba(0,0,0,.6);

}

/* заголовок */

h1{

    font-size:54px;

    letter-spacing:8px;

    color:var(--gold);

    text-shadow:

    0 2px 10px rgba(0,0,0,.8);

}

h2{

    margin-top:8px;

    font-size:28px;

    letter-spacing:2px;

}

.server{

    margin-top:8px;

    color:#bdb9ab;

    font-size:18px;

    margin-bottom:30px;

}

/* главная панель */

.card{

    position:relative;

    background:

    linear-gradient(
    180deg,
    rgba(58,63,50,.95),
    rgba(34,36,30,.95));

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

    border-radius:10px;

    padding:35px;

    text-align:left;

    box-shadow:

    0 18px 40px var(--shadow);

}

/* декоративные линии */

.card::before{

    content:"CADET ACADEMY";

    position:absolute;

    top:-14px;

    left:25px;

    background:var(--bg);

    color:var(--gold);

    padding:0 12px;

    letter-spacing:2px;

    font-size:14px;

}

.card::after{

    content:"";

    position:absolute;

    inset:8px;

    border:1px solid rgba(255,255,255,.05);

    pointer-events:none;

}

/* текст */

label{

    display:block;

    margin-top:18px;

    margin-bottom:10px;

    color:var(--gold);

    font-weight:700;

    font-size:18px;

    letter-spacing:1px;

}

/* поле ника */

input[type=text]{

    width:100%;

    padding:16px;

    background:#161714;

    color:white;

    border:2px solid #49543c;

    border-radius:8px;

    outline:none;

    font-size:18px;

    transition:.25s;

}

input[type=text]:focus{

    border-color:var(--green);

    box-shadow:

    0 0 12px rgba(113,167,67,.4);

}

/* выбор экзамена */

.tests{

    margin-top:15px;

}

.radio{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    cursor:pointer;

    font-size:18px;

    transition:.25s;

}

.radio:hover{

    color:#ffffff;

    transform:translateX(6px);

}

input[type=radio]{

    width:18px;

    height:18px;

    accent-color:var(--green);

}
/* ===========================
      КНОПКИ
=========================== */

button{

    width:100%;

    margin-top:25px;

    padding:16px 20px;

    border:none;

    border-radius:8px;

    background:linear-gradient(
        180deg,
        #6b8441,
        #4f6531
    );

    color:#f5f3ea;

    font-family:'Rajdhani',sans-serif;

    font-size:19px;

    font-weight:700;

    letter-spacing:2px;

    cursor:pointer;

    transition:.25s;

    text-transform:uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 5px 15px rgba(0,0,0,.35);

}

button:hover{

    background:linear-gradient(
        180deg,
        #809f4b,
        #61793a
    );

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(128,170,80,.35);

}

button:active{

    transform:scale(.98);

}

/* ===========================
      ОТВЕТЫ
=========================== */

.answer{

    display:block;

    width:100%;

    margin:12px 0;

    text-align:left;

    padding-left:22px;

}

.answer::before{

    content:"► ";

    color:var(--gold);

}

/* ===========================
      ПРОГРЕСС
=========================== */

.progress{

    width:100%;

    height:12px;

    background:#151613;

    border:1px solid #4f5c3d;

    border-radius:10px;

    overflow:hidden;

    margin-bottom:30px;

}

.progressFill{

    height:100%;

    background:linear-gradient(
        90deg,
        #6b8d41,
        #8eb852
    );

    transition:.4s;

}

/* ===========================
      RESULT CARD
=========================== */

.card h1{

    font-size:52px;

}

.card h2{

    text-align:center;

}

.card h3{

    color:var(--gold);

    text-align:center;

}

.card p{

    color:#c8c4b7;

    text-align:center;

    font-size:18px;

}

/* ===========================
      ЛИНИЯ
=========================== */

hr{

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

    margin:20px 0;

}

/* ===========================
      ТЕРМИНАЛ
=========================== */

.container::before{

    content:"AUTHORIZED PERSONNEL ONLY";

    display:block;

    width:100%;

    margin-bottom:15px;

    color:#7d8f67;

    letter-spacing:3px;

    font-size:13px;

}

/* ===========================
      АНИМАЦИЯ
=========================== */

.card{

    animation:fade .35s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
      СВЕЧЕНИЕ ЛОГОТИПА
=========================== */

.logo:hover{

    transform:scale(1.03);

    transition:.3s;

    box-shadow:

    0 0 30px rgba(199,161,90,.35);

}

/* ===========================
      МОБИЛЬНАЯ ВЕРСИЯ
=========================== */

@media(max-width:700px){

    .container{

        width:95%;

    }

    .card{

        padding:22px;

    }

    h1{

        font-size:34px;

        letter-spacing:4px;

    }

    h2{

        font-size:22px;

    }

    button{

        font-size:17px;

    }

    .logo{

        width:100px;

    }

}

/* ===========================
      CRT ЭФФЕКТ
=========================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    repeating-linear-gradient(

        to bottom,

        rgba(255,255,255,.015),

        rgba(255,255,255,.015) 2px,

        transparent 2px,

        transparent 4px

    );

    opacity:.25;

}
.reportNotice{

    margin-top:30px;

    padding:22px;

    background:linear-gradient(
        180deg,
        rgba(60,70,45,.95),
        rgba(42,47,35,.95)
    );

    border:2px solid #6f8b45;

    border-left:8px solid #c7a15a;

    border-radius:10px;

    box-shadow:0 8px 25px rgba(0,0,0,.35);

}

.reportNotice h3{

    color:#c7a15a;

    letter-spacing:2px;

    margin-bottom:18px;

    text-align:center;

}

.reportNotice p{

    color:#ece7d5;

    text-align:left;

    line-height:1.8;

    margin-bottom:12px;

}

.highlight{

    color:#c7a15a;

    font-weight:bold;

}

.warning{

    color:#ffcc66 !important;

    font-weight:bold;

    border-top:1px solid rgba(255,255,255,.1);

    padding-top:15px;

    margin-top:15px;

}