/* ==========================
LOGIN PAGE
========================== */

.login-hero {
min-height: 100vh;

display: flex;
align-items: center;
justify-content: center;

padding: 140px 20px 80px;

background:
linear-gradient(
rgba(5, 5, 5, 0.65),
rgba(5, 5, 5, 0.92)
),
url("../../images/ronin-hero.jpg")
center center / cover no-repeat;
}

.login-panel {
position: relative;
z-index: 2;

width: 100%;
max-width: 540px;

padding: 42px;

text-align: center;

border:
1px solid rgba(180, 0, 20, 0.35);

background:
linear-gradient(
135deg,
rgba(18,18,22,0.96),
rgba(6,6,8,0.96)
);

box-shadow:
0 0 40px rgba(120,0,15,0.25);

backdrop-filter: blur(10px);
}

.login-panel::before {
content: "";

position: absolute;
top: 0;
left: 10%;

width: 80%;
height: 1px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,70,95,0.8),
transparent
);
}

.login-panel h1 {
margin: 10px 0 18px;

font-family: "Orbitron", sans-serif;

font-size: clamp(2rem, 5vw, 2.8rem);

letter-spacing: 2px;
text-transform: uppercase;

color: var(--silver-bright);
}

.login-panel .hero-subtext {
max-width: 460px;

margin: 0 auto;

color: var(--silver);

line-height: 1.8;
}

.login-form {
display: flex;
flex-direction: column;

align-items: center;

gap: 22px;

margin-top: 36px;
}

.discord-login-btn {
width: 100%;
max-width: 360px;

min-height: 60px;

font-family: "Orbitron", sans-serif;

font-size: 0.92rem;
font-weight: 700;

letter-spacing: 2px;
text-transform: uppercase;

color: #ffffff;

border:
1px solid rgba(255,255,255,0.18);

background:
linear-gradient(
135deg,
#8b1e1e,
#d33a2c
);

box-shadow:
0 0 18px rgba(180,0,20,0.22);

cursor: pointer;

transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}

.discord-login-btn:hover {
transform: translateY(-3px);

border-color:
rgba(255,70,95,0.7);

box-shadow:
0 0 30px rgba(180,0,20,0.45);
}

.discord-login-btn:active {
transform: translateY(0);
}

#message {
min-height: 24px;

width: 100%;

text-align: center;

font-size: 0.9rem;
}

.success {
color: #7dff98;
}

.error {
color: #ff7777;
}

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

@media (max-width: 768px) {

.login-panel {
padding: 32px 24px;
}

.login-panel h1 {
font-size: 2rem;
}

.discord-login-btn {
max-width: 100%;
}
}