/*
 * DALARZ RESPONSIVE ACCOUNT
 * Version 1.0.0
 *
 * Login and Register only.
 *
 * Desktop visual design is preserved.
 * Mobile and tablet receive responsive layout.
 *
 * No original DALARZ animation or DOM element
 * is removed by this stylesheet.
 */

/* =========================================================
   TABLET + MOBILE FOUNDATION
   ========================================================= */

@media (max-width: 1024px) {

    html {
        width: 100%;
        height: auto;
        min-height: 100%;

        overflow-x: clip;

        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        min-height: 100vh !important;
        min-height: 100svh !important;

        margin: 0 !important;

        overflow-x: clip !important;
        overflow-y: auto !important;

        overscroll-behavior-x: none;

        -webkit-overflow-scrolling: touch;
    }

    /* =========================================
       LOGIN FOUNDATION
       ========================================= */

    #login-scene {
        width: 100%;

        min-height: 100vh;
        min-height: 100svh;

        overflow: visible;
    }

    #centerPanel {
        width: 100%;

        min-height: 100vh;
        min-height: 100svh;

        padding-top:
            clamp(18px, 3.5vh, 46px);

        padding-right:
            max(14px, env(safe-area-inset-right));

        padding-bottom:
            max(22px, env(safe-area-inset-bottom));

        padding-left:
            max(14px, env(safe-area-inset-left));

        gap:
            clamp(16px, 3vh, 34px);

        justify-content: center;
    }

    #logoSection {
        max-width: 100%;
        flex-shrink: 0;
    }

    #logoText {
        max-width: 100%;

        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    #loginPanel {
        max-width: 100%;
        height: auto;
    }

    #loginPanel input {
        min-height: 48px;
        font-size: 16px;
    }

    #enterButton {
        min-height: 48px;
    }

    /* =========================================
       REGISTER FOUNDATION
       ========================================= */

    .registerPage {
        width: 100%;

        min-height: 100vh;
        min-height: 100svh;

        padding-top:
            max(20px, env(safe-area-inset-top));

        padding-right:
            max(16px, env(safe-area-inset-right));

        padding-bottom:
            max(20px, env(safe-area-inset-bottom));

        padding-left:
            max(16px, env(safe-area-inset-left));
    }

    .registerForm {
        max-width: 100%;
        margin-inline: auto;
    }

    .registerInput {
        font-size: 16px;
    }
}

/* =========================================================
   MOBILE LOGO GEOMETRY
   ========================================================= */

@media (max-width: 600px) {

    #centerPanel {
        gap:
            clamp(14px, 2.4vh, 23px);

        padding-top:
            max(18px, env(safe-area-inset-top));

        padding-bottom:
            max(24px, env(safe-area-inset-bottom));
    }

    /*
     * One shared geometry:
     *
     * Logo Section Center
     *       =
     * Logo Text Center
     *       =
     * RGB Ring Center
     */

    #logoSection {
        width: min(100%, 330px) !important;

        height:
            clamp(134px, 42vw, 174px) !important;

        margin-inline: auto;

        transform: none !important;

        --dalarz-ring-radius:
            clamp(52px, 15.7vw, 61px);
    }

    #logoText {
        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;

        flex-shrink: 1;

        font-size:
            clamp(34px, 10.3vw, 43px) !important;

        letter-spacing:
            clamp(2px, 1.1vw, 6px) !important;

        line-height: 1 !important;

        text-align: center !important;

        white-space: nowrap;
    }

    /*
     * CRITICAL FIX:
     *
     * login.js assigns an inline transform
     * with a fixed 78px radius.
     *
     * The responsive CSS must override that
     * inline transform on small screens.
     */

    #logoRing {
        position: absolute !important;

        left: 50% !important;
        top: 50% !important;

        width: 100% !important;
        height: 100% !important;

        transform:
            translate(-50%, -50%) !important;

        transform-origin: 50% 50%;

        pointer-events: none;
    }

    #logoRing .logo-dot {
        transform:
            rotate(var(--angle))
            translateY(
                calc(
                    0px - var(--dalarz-ring-radius)
                )
            )
            rotate(
                calc(var(--angle) * -1)
            ) !important;
    }

    /*
     * Keep all decorative circles centered
     * on exactly the same point.
     */

    #logoInnerRing {
        position: absolute;

        left: 50%;
        top: 50%;

        width:
            calc(
                var(--dalarz-ring-radius) +
                var(--dalarz-ring-radius)
            );

        height:
            calc(
                var(--dalarz-ring-radius) +
                var(--dalarz-ring-radius)
            );

        transform:
            translate(-50%, -50%);

        border-radius: 50%;

        pointer-events: none;
    }

    #logoSection::after {
        width:
            calc(
                var(--dalarz-ring-radius) +
                var(--dalarz-ring-radius) +
                16px
            ) !important;

        height:
            calc(
                var(--dalarz-ring-radius) +
                var(--dalarz-ring-radius) +
                16px
            ) !important;
    }

    /* =========================================
       LOGIN GLASS PANEL
       ========================================= */

    #loginPanel {
        width: min(390px, 100%) !important;

        min-height: 0 !important;

        padding:
            clamp(19px, 5vw, 26px)
            clamp(17px, 5vw, 22px)
            clamp(19px, 5vw, 24px) !important;
    }

    .loginHeader {
        margin-bottom: 19px;
    }

    #loginPanel h2 {
        font-size:
            clamp(22px, 6vw, 25px);
    }

    #loginPanel .loginHeader p {
        overflow-wrap: anywhere;
    }

    #registerBox {
        margin-top: 17px;
        line-height: 1.6;
    }

    #registerBox a {
        display: inline-flex;

        min-height: 44px;

        align-items: center;
        justify-content: center;
    }

    .registerPage {
        align-items: center;
    }
}

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

@media (max-width: 360px) {

    #centerPanel {
        gap: 12px;
    }

    #logoText {
        font-size: 34px !important;
        letter-spacing: 2px !important;
    }

    #loginPanel {
        border-radius: 22px;
    }

    #enterButton {
        font-size: 13px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   SHORT SCREENS / LANDSCAPE
   ========================================================= */

@media (max-width: 1024px) and (max-height: 530px) {

    #centerPanel {
        justify-content: flex-start;
    }

    .registerPage {
        align-items: flex-start;
    }
}

/* =========================================================
   ACCESSIBILITY / LOWER MOTION
   ========================================================= */

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {

    #hypnoticDisc,
    #logoRing.is-hue-cycling,
    #enterButton.is-hue-cycling {
        animation: none !important;
    }
}