/* ==========================================================================
   Marcturus Auth — Habbo-inspired login & register
   Dark space-blue palette · pixel hero scene · iconic yellow buttons
   ========================================================================== */

:root {
    --habbo-night:        #04091a;
    --habbo-blue-deep:    #07172e;
    --habbo-blue:         #0d2c5a;
    --habbo-blue-mid:     #144d8d;
    --habbo-blue-light:   #2c7ec9;
    --habbo-blue-glow:    #54b6ff;

    --habbo-yellow:       #ffce00;
    --habbo-yellow-light: #ffe34d;
    --habbo-yellow-deep:  #d18a00;
    --habbo-yellow-press: #8a5a00;

    --habbo-green:        #58c75a;
    --habbo-green-deep:   #1f8a3c;

    --habbo-text:         #f3f8ff;
    --habbo-text-muted:   #a8b9d6;
    --habbo-text-dim:     #6b7e9c;
    --habbo-on-yellow:    #2a1c00;

    --habbo-line:         rgba(126, 173, 234, 0.18);
    --habbo-line-strong:  rgba(126, 173, 234, 0.35);
}

/* --------------------------------------------------------------------------
   Page background — deep space with star-field
   -------------------------------------------------------------------------- */
.page-wrapper--auth {
    position: relative;
    min-height: 100vh;
}
.page-wrapper--auth::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1200px 700px at 80% -10%, #1a4a93 0%, transparent 55%),
        radial-gradient(900px 700px at -10% 110%, #0e2956 0%, transparent 60%),
        linear-gradient(180deg, var(--habbo-blue-deep) 0%, var(--habbo-night) 65%, #01040c 100%);
}

/* Star-field — pseudo-element on body that fills the viewport */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora::before,
.aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%,  rgba(255, 255, 255, 0.95), transparent 60%),
        radial-gradient(1px   1px   at 27% 64%,  rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(2px   2px   at 41% 32%,  rgba(255, 255, 255, 1.00), transparent 60%),
        radial-gradient(1px   1px   at 58% 82%,  rgba(255, 255, 255, 0.65), transparent 60%),
        radial-gradient(1.5px 1.5px at 73% 14%,  rgba(255, 255, 255, 0.85), transparent 60%),
        radial-gradient(1px   1px   at 86% 58%,  rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(2px   2px   at 92% 24%,  rgba(255, 255, 255, 0.95), transparent 60%),
        radial-gradient(1.5px 1.5px at 8%  78%,  rgba(255, 255, 255, 0.75), transparent 60%),
        radial-gradient(1px   1px   at 36% 12%,  rgba(255, 211, 77, 0.60), transparent 60%),
        radial-gradient(1.5px 1.5px at 64% 48%,  rgba(255, 211, 77, 0.50), transparent 60%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: starTwinkle 4s ease-in-out infinite alternate;
}
.aurora::after {
    animation-duration: 7s;
    animation-delay: -2s;
    transform: translate(40px, 60px);
    opacity: 0.6;
}

@keyframes starTwinkle {
    0%   { opacity: 0.55; }
    100% { opacity: 1;    }
}

/* nebula glow blobs sit *behind* the stars */
.aurora-blob {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.30;
    mix-blend-mode: screen;
}
.aurora-blob--a { top: -25vmax; left: -10vmax; background: radial-gradient(circle, var(--habbo-blue-glow), transparent 60%); }
.aurora-blob--b { bottom: -25vmax; right: -10vmax; background: radial-gradient(circle, #ff8acd, transparent 60%); opacity: 0.22; }
.aurora-blob--c { top: 30vmax; left: 32vmax; background: radial-gradient(circle, var(--habbo-yellow), transparent 60%); opacity: 0.18; }

/* --------------------------------------------------------------------------
   Auth shell layout
   -------------------------------------------------------------------------- */
.page-wrapper--auth main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem 4rem;
}

.auth-stage {
    width: 100%;
    max-width: 1140px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    background: linear-gradient(180deg, rgba(20, 77, 141, 0.18), rgba(13, 44, 90, 0.35));
    border: 1px solid var(--habbo-line);
    border-radius: 28px;
    box-shadow:
        0 30px 60px -25px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 211, 77, 0.06);
    overflow: hidden;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
}

/* --------------------------------------------------------------------------
   Hero panel (left)
   -------------------------------------------------------------------------- */
.auth-hero {
    position: relative;
    padding: 3rem 2.6rem 2.4rem;
    background:
        radial-gradient(640px 280px at 0% 0%,   rgba(84, 182, 255, 0.40), transparent 70%),
        radial-gradient(800px 360px at 100% 100%, rgba(255, 211, 77, 0.30), transparent 70%),
        linear-gradient(135deg, #144d8d 0%, #0c2c5e 50%, #060f2c 100%);
    color: var(--habbo-text);
    overflow: hidden;
    isolation: isolate;
}

/* dotted-pixel grid overlay — gives a subtle pixel-art feel */
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0 1px, transparent 1.5px);
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 211, 77, 0.18);
    border: 1px solid rgba(255, 211, 77, 0.40);
    color: var(--habbo-yellow-light);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    position: relative;
    z-index: 2;
}

.hero-headline {
    margin: 1rem 0 0.75rem;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}
.hero-headline em {
    font-style: normal;
    background: linear-gradient(120deg, var(--habbo-yellow-light), var(--habbo-yellow), var(--habbo-yellow-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(255, 211, 77, 0.20);
}

.hero-lede {
    margin: 0 0 1.4rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
    max-width: 28rem;
    position: relative;
    z-index: 2;
}

.hero-features {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    position: relative;
    z-index: 2;
}

.hero-features li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.88);
}

.hero-features .pix {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-block;
    background: linear-gradient(180deg, var(--habbo-yellow-light), var(--habbo-yellow) 60%, var(--habbo-yellow-deep));
    border: 2px solid var(--habbo-yellow-press);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 rgba(0, 0, 0, 0.45);
    image-rendering: pixelated;
}
.hero-features .pix.coin    { border-radius: 50%; }
.hero-features .pix.diamond { transform: rotate(45deg); border-radius: 4px; }
.hero-features .pix.star    { background: radial-gradient(circle, var(--habbo-yellow-light), var(--habbo-yellow) 60%); border-radius: 50%; }

/* Stat row */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    position: relative;
    z-index: 2;
    margin-top: 1.4rem;
}

.hero-stat {
    background: rgba(7, 23, 46, 0.55);
    border: 1px solid var(--habbo-line);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    text-align: center;
    backdrop-filter: blur(4px);
}

.hero-stat strong {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.35rem;
    color: var(--habbo-yellow-light);
    letter-spacing: -0.02em;
    line-height: 1;
}

.hero-stat span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: var(--habbo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Floating Habbo character */
.hero-avatar {
    position: absolute;
    right: 1.6rem;
    bottom: 1.4rem;
    width: 168px;
    z-index: 3;
    pointer-events: none;
    animation: avatarBob 3.2s ease-in-out infinite;
}

@keyframes avatarBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.hero-avatar img {
    image-rendering: pixelated;
    width: 100%;
    filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.45));
}

.hero-avatar__shadow {
    position: absolute;
    bottom: -6px;
    left: 28%;
    right: 28%;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.45), transparent 70%);
    filter: blur(2px);
}

/* Speech bubble */
.hero-speech {
    position: absolute;
    right: 1.4rem;
    bottom: 12.5rem;
    background: #fff;
    color: #1a2742;
    padding: 0.55rem 0.9rem;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.6);
    z-index: 4;
    max-width: 16rem;
    animation: speechPop 4s ease-in-out infinite;
}

.hero-speech::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: 28px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 0 solid transparent;
    border-top: 12px solid #fff;
}

@keyframes speechPop {
    0%, 90%, 100% { opacity: 1; transform: scale(1); }
    95%           { opacity: 1; transform: scale(0.96); }
}

/* Floating items behind avatar */
.hero-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.hero-floats span {
    position: absolute;
    font-size: 1.25rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
    animation: floatY 5s ease-in-out infinite;
}
.hero-floats span:nth-child(1) { top: 18%;  left: 64%; animation-delay: -0.5s; }
.hero-floats span:nth-child(2) { top: 36%;  left: 80%; animation-delay: -1.8s; }
.hero-floats span:nth-child(3) { top: 60%;  left: 70%; animation-delay: -3.0s; font-size: 1.5rem; }

@keyframes floatY {
    0%, 100% { transform: translateY(0)    rotate(-4deg); }
    50%      { transform: translateY(-12px) rotate(4deg);  }
}

/* --------------------------------------------------------------------------
   Form panel (right)
   -------------------------------------------------------------------------- */
.auth-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(7, 17, 36, 0.96), rgba(2, 7, 18, 1));
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* The yellow tab strip — Habbo-iconic 3D pressable tabs */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(0, 0, 0, 0.30);
    border-bottom: 1px solid var(--habbo-line);
    padding: 0.7rem 0.7rem 0;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 5;
}

.auth-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-radius: 12px 12px 0 0;
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--habbo-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    border-bottom: 0;
    transition: background 200ms, color 200ms, transform 120ms;
    text-decoration: none;
}

.auth-tab:hover {
    background: rgba(255, 211, 77, 0.10);
    color: var(--habbo-text);
}

.auth-tab.is-active {
    background: linear-gradient(180deg, var(--habbo-yellow-light) 0%, var(--habbo-yellow) 60%, var(--habbo-yellow-deep) 100%);
    color: var(--habbo-on-yellow);
    border-color: var(--habbo-yellow-press);
    box-shadow:
        inset 0 -4px 0 var(--habbo-yellow-press),
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 4px 0 rgba(0, 0, 0, 0.45);
}

.auth-tab .tab-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
    flex-shrink: 0;
}
.auth-tab[data-tab="login"]    { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M10 17l5-5-5-5v3H3v4h7v3zm-1-12h11a2 2 0 012 2v14a2 2 0 01-2 2H9a2 2 0 01-2-2v-3h2v3h11V7H9v3H7V7a2 2 0 012-2z'/></svg>"); }
.auth-tab[data-tab="register"] { --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M15 12a4 4 0 100-8 4 4 0 000 8zm-9 8a5 5 0 015-5h2v2H11a3 3 0 00-3 3v1H6v-1zm12-3v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z'/></svg>"); }

/* Form body */
.auth-form-wrap {
    padding: 2.2rem 2.4rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.auth-form-wrap h2 {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.auth-form-wrap .subtext {
    margin: 0.25rem 0 0.6rem;
    color: var(--habbo-text-muted);
    font-size: 0.92rem;
}

.auth-form { display: flex; flex-direction: column; gap: 0.85rem; }

/* Inputs — chunky, Habbo-pixel-y borders */
.auth-form .form-group { display: flex; flex-direction: column; gap: 0.35rem; }

.auth-form .form-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--habbo-text-muted);
}

.auth-form .form-input {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 2px solid var(--habbo-line-strong);
    background: rgba(2, 7, 18, 0.85);
    color: var(--habbo-text);
    font: 500 0.95rem/1.4 "Inter", sans-serif;
    transition: border-color 180ms, box-shadow 180ms, background 180ms;
}

.auth-form .form-input::placeholder { color: rgba(255, 255, 255, 0.32); }

.auth-form .form-input:focus {
    outline: none;
    border-color: var(--habbo-yellow);
    box-shadow:
        0 0 0 3px rgba(255, 211, 77, 0.25),
        inset 0 0 0 1px rgba(255, 211, 77, 0.18);
    background: rgba(2, 7, 18, 1);
}

/* Form row (remember + forgot) */
.auth-form .form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: var(--habbo-text-muted);
    margin-top: 0.2rem;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 2px solid var(--habbo-line-strong);
    background: rgba(2, 7, 18, 0.7);
    cursor: pointer;
    position: relative;
    transition: background 180ms, border-color 180ms;
}

.checkbox-label input[type="checkbox"]:checked {
    background: linear-gradient(180deg, var(--habbo-yellow-light), var(--habbo-yellow));
    border-color: var(--habbo-yellow-press);
    box-shadow: inset 0 -2px 0 var(--habbo-yellow-press);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px 4px 4px 4px;
    border-right: 3px solid var(--habbo-on-yellow);
    border-bottom: 3px solid var(--habbo-on-yellow);
    transform: rotate(45deg);
    transform-origin: 70% 70%;
    width: 6px;
    height: 10px;
    border-radius: 1px;
}

.link-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--habbo-text-muted);
    flex-wrap: wrap;
}
.link-row a, .auth-form a.muted-link {
    color: var(--habbo-yellow-light);
    font-weight: 600;
    transition: color 180ms;
}
.link-row a:hover { color: var(--habbo-yellow); }

.helper-text {
    font-size: 0.74rem;
    color: var(--habbo-text-dim);
    line-height: 1.5;
    margin-top: 0.4rem;
}

/* The iconic yellow Habbo button */
.habbo-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 1rem 1.6rem;
    border-radius: 14px;
    border: 2px solid var(--habbo-yellow-press);
    background: linear-gradient(180deg, var(--habbo-yellow-light) 0%, var(--habbo-yellow) 50%, var(--habbo-yellow-deep) 100%);
    color: var(--habbo-on-yellow);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -5px 0 var(--habbo-yellow-press),
        0 6px 0 rgba(0, 0, 0, 0.45),
        0 14px 30px -10px rgba(255, 211, 77, 0.5);
    transition: transform 110ms ease, box-shadow 110ms ease, filter 180ms;
}

.habbo-button:hover { filter: brightness(1.06); }

.habbo-button:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -2px 0 var(--habbo-yellow-press),
        0 3px 0 rgba(0, 0, 0, 0.40);
}

.habbo-button .arrow {
    display: inline-block;
    transition: transform 200ms;
}
.habbo-button:hover .arrow { transform: translateX(3px); }

/* Alternate small button (used as "Voltar / Login") */
.habbo-button--ghost {
    background: rgba(255, 255, 255, 0.05);
    color: var(--habbo-text);
    border: 2px solid var(--habbo-line-strong);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.habbo-button--ghost:active {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.20);
}

/* Validation / Alert */
.alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.alert::before {
    content: "⚠";
    font-size: 1.05rem;
}
.alert-danger {
    background: rgba(216, 58, 63, 0.18);
    border: 1px solid rgba(216, 58, 63, 0.55);
    color: #ffb1b3;
}

/* --------------------------------------------------------------------------
   Header tweaks on auth pages
   -------------------------------------------------------------------------- */
.main-header--auth {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    position: relative;
    z-index: 2;
}

.main-header--auth .header-inner { padding-top: 1.2rem; }

.main-header--auth .top-bar {
    justify-content: space-between;
}

.auth-badge {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--habbo-text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--habbo-line);
}

/* --------------------------------------------------------------------------
   Responsive — collapse to single column on smaller screens
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .auth-stage {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .auth-hero {
        padding: 2.4rem 2rem 5.6rem; /* leaves room for the floating avatar */
        min-height: 380px;
    }

    .hero-headline { font-size: 2rem; }

    .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .hero-avatar { width: 132px; right: 1rem; bottom: 1rem; }
    .hero-speech { right: 1rem; bottom: 9.6rem; }
}

@media (max-width: 540px) {
    .auth-hero { padding: 2rem 1.4rem 5.2rem; }
    .hero-headline { font-size: 1.65rem; }
    .hero-stats { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
    .hero-stat strong { font-size: 1.1rem; }
    .hero-stat span { font-size: 0.6rem; }

    .auth-form-wrap { padding: 1.6rem 1.4rem 2.2rem; }
    .auth-form-wrap h2 { font-size: 1.4rem; }

    .auth-tabs { padding: 0.5rem 0.5rem 0; }
    .auth-tab  { padding: 0.7rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.06em; }

    .hero-avatar { width: 110px; }
    .hero-speech { display: none; } /* save space on tiny screens */
}

@media (max-width: 380px) {
    .hero-stats { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .aurora::before, .aurora::after,
    .hero-avatar, .hero-floats span, .hero-speech { animation: none !important; }
}