:root {
    --relick-pink: #ff007f;
    --relick-cyan: #00f3ff;
    --relick-yellow: #ffe600;
    --relick-green: #00f800;
    --relick-panel: #0c0019;
    --relick-purple: #1a0033;
}

html { min-height: 100%; }

body.bg-login-image,
body.login {
    min-height: 100vh;
    color: #e8e3ec;
    font-family: 'Chakra Petch', sans-serif !important;
    background-color: #05000a !important;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(78, 0, 126, .82), transparent 46%),
        linear-gradient(rgba(5, 0, 10, .78), rgba(5, 0, 10, .94)),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 243, 255, .06) 2px, rgba(0, 243, 255, .06) 4px),
        url('../img/FONDO_ESTRATEGIAS.png') !important;
    background-attachment: fixed !important;
    background-position: center !important;
    background-size: cover !important;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: .22;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0, 0, 0, .25) 3px, rgba(0, 0, 0, .25) 4px);
}

.container { position: relative; z-index: 2; }

.card.o-hidden {
    position: relative;
    overflow: visible !important;
    color: #e8e3ec;
    background: var(--relick-panel) !important;
    border: 2px solid #4e4853 !important;
    border-top-color: #89818f !important;
    border-left-color: #89818f !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .8), 0 0 30px rgba(0, 243, 255, .12) !important;
}

.card.o-hidden::before {
    content: 'RELICK TCG // TERMINAL DE ACCESO';
    display: block;
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 10px 14px;
    color: #fff;
    background: linear-gradient(90deg, var(--relick-purple), #4a006b 60%, #100018);
    border-bottom: 2px solid var(--relick-cyan);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    letter-spacing: .05em;
}

.card.o-hidden::after {
    content: '● SISTEMA EN LÍNEA';
    position: absolute;
    z-index: 4;
    top: 9px;
    right: 14px;
    color: var(--relick-green);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    text-shadow: 0 0 7px var(--relick-green);
}

.card-body { background: transparent !important; }
.card-body > .row { margin: 0; }
.card-body > .row > [class*='col-'] { padding: 0; }

.bg-login-image2,
.bg-register-image,
.bg-password-image {
    position: relative;
    min-height: 590px;
    border-right: 2px solid var(--relick-pink);
    background-color: #08000f !important;
    background-position: center !important;
    background-size: cover !important;
    filter: saturate(1.08) contrast(1.04);
}

.bg-register-image { min-height: 1110px; }

.bg-login-image2::after,
.bg-register-image::after,
.bg-password-image::after {
    content: 'RELICK\A VIRTUAL';
    white-space: pre;
    display: flex;
    position: absolute;
    inset: 0;
    align-items: flex-end;
    justify-content: center;
    padding: 34px;
    color: var(--relick-yellow);
    background: linear-gradient(transparent 50%, rgba(8, 0, 15, .92));
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    text-shadow: 3px 3px #000, 0 0 14px var(--relick-pink);
}

.p-5 { padding: 2.35rem !important; }

h1.h4 {
    color: var(--relick-yellow) !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 17px;
    line-height: 1.55;
    text-shadow: 3px 3px #000;
}

.text-center > p,
#user_form p { color: #bbb2c2; font-size: 16px; }

form.user .form-control,
form.user .form-control-user,
form.user select.form-control {
    height: 48px;
    padding: 10px 13px;
    color: #fff;
    background: #050008 !important;
    border: 2px solid #42394a !important;
    border-top-color: #1c1820 !important;
    border-left-color: #1c1820 !important;
    border-radius: 0 !important;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 15px !important;
    transition: border-color .15s, box-shadow .15s;
}

form.user .form-control::placeholder,
form.user .form-control-user::placeholder { color: #887f90; opacity: 1; }

form.user .form-control:focus,
form.user .form-control-user:focus,
form.user select.form-control:focus {
    color: #fff;
    border-color: var(--relick-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0, 243, 255, .12), inset 0 0 12px rgba(0, 243, 255, .06) !important;
}

form.user select.form-control option { color: #fff; background: #0c0019; }
form.user input[type='date'] { color-scheme: dark; }

form.user .btn-user,
#submitbtn {
    min-height: 48px;
    color: #fff !important;
    background: linear-gradient(180deg, #ff168a, #8f0048) !important;
    border: 3px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 #000, 0 0 13px rgba(255, 0, 127, .5) !important;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
    transition: transform .1s, color .1s;
}

form.user .btn-user:hover,
#submitbtn:hover { color: var(--relick-yellow) !important; }
form.user .btn-user:active,
#submitbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px #000 !important; }

form.user .btn-secondary,
form.user .btn-google {
    border-width: 2px !important;
    border-color: #555 !important;
    background: linear-gradient(#454047, #211e23) !important;
    box-shadow: 2px 2px #000 !important;
}
form.user .btn-secondary:hover { border-color: #7289da !important; color: #aab8ff !important; }
form.user .btn-google:hover { border-color: #db4437 !important; color: #ff8b82 !important; }

hr { border-top: 1px solid #392f40; }
a.small, .enlace-terminos { color: var(--relick-cyan) !important; font-weight: 600; }
a.small:hover, .enlace-terminos:hover { color: var(--relick-yellow) !important; text-decoration: none; }

form.user > a[id^='M'],
form.user div a[id^='M'],
#Muser, #Memail, #Mpassword, #MRpassword, #MRSpassword,
#Mrecaptcha, #Mcondiciones {
    display: block;
    margin: -7px 0 10px;
    color: #ff629f !important;
    font-size: 12px;
}

#condiciones { accent-color: var(--relick-pink); }
#reCaptcha { margin: 16px 0; overflow: hidden; }
#message_send { color: #e8e3ec; }

.section_loader { background-color: #05000a !important; }
.loader_1, .loader_2 { border-color: var(--relick-cyan) !important; }

@media (max-width: 991.98px) {
    .card.o-hidden { margin-top: 28px !important; }
    .p-5 { padding: 2rem 1.5rem !important; }
}

@media (max-width: 575.98px) {
    .container { padding: 0 10px; }
    .card.o-hidden::before { padding-right: 8px; font-size: 7px; }
    .card.o-hidden::after { display: none; }
    h1.h4 { font-size: 14px; }
    .p-5 { padding: 1.6rem 1rem !important; }
    form.user .form-group.row { margin-right: 0; margin-left: 0; }
    form.user .form-group.row > [class*='col-'] { padding-right: 0; padding-left: 0; margin-bottom: 12px; }
}