/* =========================================================
   Parsnew — Auth (Sign in / Sign up) pages
   ========================================================= */

:root{
    --panel-w: 420px;
    --gold: #caa24d;
    --gold-light: #f0d68c;
    --text-soft: #c8cdd3;
    --text-dim: #8a92a0;
}

/* =========================================================
   BODY / BACKGROUND
   ========================================================= */

.auth-body{
    position:relative;
    min-height:100svh;
    background:url("../images/signin_background.png") center center / cover no-repeat fixed;
    font-family:'BKoodak',Tahoma,sans-serif;
    overflow-x:hidden;
}

@media (max-width:900px){
    .auth-body{
        background:url("../images/signin_background_mini.png") center center / cover no-repeat fixed;
    }
}

@media (min-width:901px){
    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        right:auto;
        left:50%;
        transform:translate(-50%,-50%);
        animation:panelFadeCentered .65s ease both;
    }
}

/* Final cascade overrides for the equal-height top and lower frame caps. */
@media (max-width:900px){
    .auth-body--signin,
    .auth-body--signup{
        min-height:100svh;
        padding:clamp(18px,4vw,34px) 12px 28px;
        overflow-x:hidden;
        overflow-y:auto;
        background-attachment:scroll;
    }

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        position:relative;
        inset:auto;
        width:min(100%,460px);
        max-width:460px;
        max-height:none;
        margin:0 auto;
        padding:clamp(88px,23vw,108px) clamp(22px,7vw,34px) clamp(86px,22vw,104px);
        overflow:visible;
        transform:none;
        animation:panelFadeMobile .55s ease both;
    }

    .auth-body--signup .auth-panel{
        padding-top:clamp(84px,22vw,104px);
        padding-bottom:clamp(82px,21vw,100px);
    }

    .auth-panel__skin-body{
        top:clamp(80px,21vw,98px);
        right:0;
        bottom:clamp(80px,21vw,98px);
        left:0;
        background-size:100% 12%;
        background-repeat:repeat-y;
    }

    .auth-panel__skin-top{top:0}
    .auth-panel__skin-under{bottom:0}
}

@media (max-width:420px){
    .auth-body--signin,
    .auth-body--signup{padding-inline:8px}

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        padding-right:20px;
        padding-left:20px;
    }
}

/* =========================================================
   FINAL RESPONSIVE AUTH LAYOUT
   Both frame caps share the 2482 / 622 aspect ratio.
   ========================================================= */

@media (max-width:900px){
    .auth-body--signin,
    .auth-body--signup{
        display:flex;
        flex-direction:column;
        align-items:center;
        min-height:100svh;
        padding:clamp(18px,4vw,34px) 12px 28px;
        overflow-x:hidden;
        overflow-y:auto;
        background-attachment:scroll;
        background-position:center top;
    }

    .auth-body--signin .overlay,
    .auth-body--signup .overlay{
        display:block;
        background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.28));
    }

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        position:relative;
        inset:auto;
        width:min(100%,460px);
        max-width:460px;
        max-height:none;
        margin:0 auto;
        padding:clamp(88px,23vw,108px) clamp(22px,7vw,34px) clamp(86px,22vw,104px);
        overflow:visible;
        transform:none;
        animation:panelFadeMobile .55s ease both;
    }

    .auth-body--signup .auth-panel{
        padding-top:clamp(84px,22vw,104px);
        padding-bottom:clamp(82px,21vw,100px);
    }

    .auth-panel__skin-body{
        top:clamp(80px,21vw,98px);
        right:0;
        bottom:clamp(80px,21vw,98px);
        left:0;
        background-size:100% 12%;
        background-repeat:repeat-y;
    }

    .auth-panel__skin-top{top:0}
    .auth-panel__skin-under{bottom:0}

    .auth-panel__title{
        font-size:clamp(1.15rem,5vw,1.45rem);
        margin-bottom:6px;
    }

    .auth-panel__subtitle{
        font-size:clamp(.78rem,3.4vw,.9rem);
        margin-bottom:18px;
    }

    .auth-field{margin-bottom:11px}
    .auth-field input{min-height:47px;font-size:.86rem}
    .auth-row{margin-bottom:14px;gap:7px 10px}
    .auth-btn{margin-bottom:8px}
    .auth-btn .btn-text{font-size:clamp(14px,4.2vw,17px)}

    .auth-body--signup .auth-panel__subtitle{margin-bottom:11px}
    .auth-body--signup .auth-field{margin-bottom:8px}
    .auth-body--signup .auth-field input{min-height:43px}
    .auth-body--signup .auth-row{margin-bottom:8px}
    .auth-body--signup .auth-btn{margin-bottom:5px}

    .social-row{
        position:relative;
        inset:auto;
        width:100%;
        margin:22px auto 0;
        gap:14px;
    }

    .auth-body .footer-tagline{
        position:relative;
        inset:auto;
        margin:14px auto 0;
        max-width:calc(100vw - 32px);
    }
}

@media (max-width:420px){
    .auth-body--signin,
    .auth-body--signup{padding-inline:8px}

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        padding-right:20px;
        padding-left:20px;
    }

    .auth-row{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:350px){
    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        padding-right:16px;
        padding-left:16px;
    }

    .auth-field input{padding-right:39px;padding-left:34px}
}

@keyframes panelFadeMobile{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}
}

.auth-body--signin .logo--auth,
.auth-body--signup .logo--auth{
    display:none;
}

.auth-body--signin .logo--auth,
.auth-body--signup .logo--auth{
    display:none;
}

@keyframes panelFadeCentered{
    from{opacity:0;transform:translate(-50%,-48%)}
    to{opacity:1;transform:translate(-50%,-50%)}
}

/* =========================================================
   LOGO (auth variant — sits in the open background area)
   ========================================================= */

.logo--auth{
    position:absolute;
    top:4%;
    left:0;
    transform:none;
    width:calc(100% - var(--panel-w) - 4%);
    display:flex;
    justify-content:center;
    z-index:20;
    pointer-events:none;
}

.logo--auth img{
    width:clamp(220px, 24vw, 480px);
    height:auto;
    filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}

/* =========================================================
   FOOTER TAGLINE + SOCIAL ROW (auth variant)
   ========================================================= */

.auth-body .footer-tagline{
    left:clamp(16px, 2vw, 32px);
    transform:none;
    bottom:clamp(16px, 2.4vh, 30px);
    background:rgba(10,14,20,.55);
    border:1px solid rgba(202,162,77,.5);
    border-radius:8px;
    padding:8px 16px;
}

.social-row{
    position:absolute;
    bottom:clamp(16px, 2.4vh, 30px);
    left:0;
    width:calc(100% - var(--panel-w) - 4%);
    display:flex;
    justify-content:center;
    gap:clamp(10px, 1.2vw, 18px);
    z-index:20;
}

.social-icon{
    width:clamp(32px, 2.6vw, 42px);
    height:clamp(32px, 2.6vw, 42px);
    border-radius:50%;
    border:1px solid rgba(202,162,77,.6);
    background:rgba(0,0,0,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold-light);
    transition:transform .2s ease, filter .2s ease;
}

.social-icon svg{ width:52%; height:52%; }

.social-icon:hover{
    transform:translateY(-2px);
    filter:brightness(1.25);
}

/* =========================================================
   AUTH PANEL
   ========================================================= */

.auth-panel{
    position:absolute;
    top:50%;
    right:clamp(14px, 2.6vw, 46px);
    transform:translateY(-50%);
    width:var(--panel-w);
    max-height:94svh;
    overflow-y:auto;
    z-index:30;

    background:linear-gradient(180deg, rgba(17,28,38,.94), rgba(8,15,21,.96));
    border:1.5px solid var(--gold);
    border-radius:20px;
    box-shadow:0 12px 34px rgba(0,0,0,.55), inset 0 0 0 4px rgba(202,162,77,.08);

    padding:64px 26px 26px;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
}

.auth-panel::-webkit-scrollbar{ width:6px; }
.auth-panel::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:3px; }

.auth-panel__emblem{
    position:absolute;
    top:-46px;
    left:50%;
    transform:translateX(-50%);
    width:120px;
    pointer-events:none;
}

.auth-panel__emblem img{
    width:100%;
    height:auto;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
}

.auth-panel__title{
    text-align:center;
    color:var(--gold-light);
    font-size:clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight:800;
    margin:0 0 10px;
    text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.auth-panel__subtitle{
    text-align:center;
    color:var(--text-soft);
    font-size:clamp(.78rem, .95vw, .9rem);
    line-height:1.8;
    margin:0 0 24px;
}

/* =========================================================
   FORM FIELDS
   ========================================================= */

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

.auth-field{
    position:relative;
    margin-bottom:14px;
}

.auth-field input{
    width:100%;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(202,162,77,.45);
    border-radius:8px;
    padding:13px 44px 13px 40px;
    color:#f0efe9;
    font-size:.88rem;
    font-family:inherit;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.auth-field input::placeholder{ color:var(--text-dim); }

.auth-field input:focus{
    outline:none;
    border-color:var(--gold-light);
    box-shadow:0 0 0 3px rgba(240,214,140,.14);
}

.auth-field input.auth-field__input--error{
    border-color:#c1453f;
    box-shadow:0 0 0 3px rgba(193,69,63,.16);
}

.auth-field__icon{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    width:19px;
    height:19px;
    color:var(--gold);
    pointer-events:none;
    display:flex;
}

.auth-field__toggle{
    position:absolute;
    top:50%;
    left:12px;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    padding:0;
    background:none;
    border:none;
    color:var(--text-dim);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:color .2s ease;
}

.auth-field__toggle:hover,
.auth-field__toggle--active{ color:var(--gold-light); }

/* =========================================================
   CHECKBOX / LINKS ROW
   ========================================================= */

.auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:20px;
    font-size:.76rem;
}

.auth-checkbox{
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--text-soft);
    cursor:pointer;
    user-select:none;
}

.auth-checkbox input{
    width:15px;
    height:15px;
    accent-color:var(--gold);
    cursor:pointer;
}

.auth-link{
    color:#e0b45a;
    text-decoration:underline;
    text-underline-offset:2px;
}

.auth-link:hover{ color:var(--gold-light); }

/* =========================================================
   BUTTONS (reuse .btn-login-page from style.css)
   ========================================================= */

.auth-btn{
    max-width:100%;
    margin:0 0 12px;
}

.auth-btn--primary{
    background:url('../images/join_to_game.png') center / contain no-repeat;
}

.auth-btn .btn-text{
    font-size:clamp(13px, 1.3vw, 16px);
}

.guest-login{
    background:url('../images/btn_guest_gray.png') no-repeat center center;
    background-size:contain;
    aspect-ratio:396 / 64;
}

/* =========================================================
   DIVIDER + SUPPORT
   ========================================================= */

.auth-divider{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(202,162,77,.55), transparent);
    margin:6px 0 18px;
}

.auth-support{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-decoration:none;
}

.auth-support__icon{
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold-light);
    flex-shrink:0;
}

.auth-support__icon svg{ width:56%; height:56%; }

.auth-support__text{
    display:flex;
    flex-direction:column;
    text-align:right;
}

.auth-support__text strong{
    color:var(--gold-light);
    font-size:.82rem;
}

.auth-support__text small{
    color:var(--text-dim);
    font-size:.7rem;
}

/* =========================================================
   RESPONSIVE — stacked single column layout
   ========================================================= */

@media (max-width:900px){

    .auth-body{
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:28px 16px 36px;
    }

    .logo--auth{
        position:static;
        width:100%;
        margin-bottom:18px;
    }

    .logo--auth img{ width:clamp(200px, 46vw, 320px); }

    .auth-panel{
        position:static;
        transform:none;
        width:100%;
        max-width:460px;
        margin:0 auto;
        max-height:none;
        overflow-y:visible;
    }

    .social-row{
        position:static;
        width:100%;
        margin-top:24px;
    }

    .auth-body .footer-tagline{
        position:static;
        margin-top:16px;
        text-align:center;
        white-space:normal;
    }
}

@media (max-width:420px){
    .auth-panel{ padding:56px 18px 22px; }
    .auth-panel__emblem{ width:96px; top:-38px; }
}

/* =========================================================
   REFERENCE-LOCKED DESKTOP COMPOSITION (1672 × 941)
   ========================================================= */

@media (min-width:901px){
    .auth-body--signin,
    .auth-body--signup{
        background:#02070a url('../images/reference-signin.png') center center / 100% 100% no-repeat fixed;
    }

    .auth-body--signin::before,
    .auth-body--signup::before,
    .auth-body--signin .overlay,
    .auth-body--signup .overlay,
    .auth-body--signin .logo--auth,
    .auth-body--signup .logo--auth,
    .auth-body--signin .footer-tagline,
    .auth-body--signup .footer-tagline,
    .auth-body--signin .social-row,
    .auth-body--signup .social-row{
        display:none;
    }

    /* Interactive controls sit over their exact counterparts in the master. */
    .auth-body--signin .auth-panel{
        top:12.22%;
        right:2.39%;
        transform:none;
        width:22.67%;
        height:79.17%;
        max-height:none;
        padding:0;
        overflow:hidden;
        opacity:0;
        background:transparent;
        border:0;
        border-radius:0;
        outline:0;
        box-shadow:none;
        animation:none;
    }

    /* Sign-up preserves the reference frame and replaces its inner content only. */
    .auth-body--signup .auth-panel{
        top:14.25%;
        right:3.75%;
        transform:none;
        width:20.15%;
        height:73.75%;
        max-height:none;
        padding:32px 17px 12px;
        overflow:hidden;
        background:linear-gradient(180deg,rgba(5,23,31,.985),rgba(4,18,25,.99));
        border:0;
        border-radius:0;
        outline:0;
        box-shadow:inset 0 12px 28px rgba(0,0,0,.38);
    }

    .auth-body--signup .auth-panel::before,
    .auth-body--signup .auth-panel::after,
    .auth-body--signup .auth-panel__emblem{
        display:none;
    }

    .auth-body--signup .auth-panel__title{font-size:19px;margin-bottom:5px}
    .auth-body--signup .auth-panel__subtitle{font-size:11px;line-height:1.65;margin-bottom:10px}
    .auth-body--signup .auth-field{margin-bottom:7px}
    .auth-body--signup .auth-field input{height:42px;padding-top:9px;padding-bottom:9px}
    .auth-body--signup .auth-row{margin-bottom:7px}
    .auth-body--signup .auth-btn{height:47px;margin-bottom:5px}
    .auth-body--signup .auth-divider{margin:2px 0 5px}
    .auth-body--signup .auth-support__icon{width:30px;height:30px}
}

/* =========================================================
   THREE-SLICE AUTH FRAME
   signup-form-top + signup-form-body + signup-form-under
   ========================================================= */

.auth-panel__skin{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.62));
}

.auth-panel__skin::before{
    content:none;
}

.auth-panel__skin-body{
    position:absolute;
    top:88px;
    right:0;
    bottom:90px;
    left:0;
    background:url('../images/signup-form-body.png') center / 100% 10% repeat-y;
    z-index:1;
}

.auth-panel__skin-top,
.auth-panel__skin-under{
    position:absolute;
    left:0;
    width:100%;
    height:auto;
    display:block;
    pointer-events:none;
    z-index:2;
}

.auth-panel__skin-top{top:-2px}
.auth-panel__skin-under{bottom:-2px}

.auth-panel > :not(.auth-panel__skin){position:relative;z-index:1}

@media (min-width:901px){
    .auth-body--signin,
    .auth-body--signup{
        background:#050d12;
    }

    .auth-body--signin::before,
    .auth-body--signup::before{
        display:block;
        inset:0 25.48% 0 0;
        background-size:100% 100%;
        background-position:center;
    }

    .auth-body--signin .overlay,
    .auth-body--signup .overlay,
    .auth-body--signin .social-row,
    .auth-body--signup .social-row,
    .auth-body--signin .footer-tagline,
    .auth-body--signup .footer-tagline{
        display:flex;
    }

    .auth-body--signin .logo--auth,
    .auth-body--signup .logo--auth{
        display:none;
    }

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        top:50%;
        right:clamp(22px,2.45vw,46px);
        transform:translateY(-50%);
        width:390px;
        height:auto;
        max-height:94svh;
        padding:78px 31px 61px;
        overflow:visible;
        opacity:1;
        background:transparent;
        border:0;
        border-radius:0;
        outline:0;
        box-shadow:none;
        animation:panelFade .65s ease both;
    }

    .auth-body--signup .auth-panel{
        width:410px;
        padding:76px 34px 58px;
    }

    .auth-body--signin .auth-panel::before,
    .auth-body--signin .auth-panel::after,
    .auth-body--signup .auth-panel::before,
    .auth-body--signup .auth-panel::after,
    .auth-panel__emblem{
        display:none;
    }

    .auth-body--signup .auth-panel__title{font-size:20px;margin-bottom:6px}
    .auth-body--signup .auth-panel__subtitle{font-size:12px;line-height:1.7;margin-bottom:12px}
    .auth-body--signup .auth-field{margin-bottom:8px}
    .auth-body--signup .auth-field input{height:43px;padding-top:8px;padding-bottom:8px}
    .auth-body--signup .auth-row{margin-bottom:9px}
    .auth-body--signup .auth-btn{height:auto;margin-bottom:6px}
    .auth-body--signup .auth-divider{display:none}
    .auth-support{visibility:hidden;height:12px}
}

@keyframes panelFade{
    from{opacity:0;transform:translateY(-48%)}
    to{opacity:1;transform:translateY(-50%)}
}

@media (max-width:900px){
    .auth-panel{
        background:transparent;
        border:0;
        border-radius:0;
        box-shadow:none;
        padding:72px 28px 60px;
    }

    .auth-panel__emblem{display:none}
    .auth-panel__skin-body{top:76px;right:0;bottom:20px;left:0}
    .auth-support{visibility:hidden;height:8px}
}

@media (max-width:430px){
    .auth-panel{padding:64px 24px 52px}
}

/* Auth pages use the same master background as index.html. */
.auth-body--signin,
.auth-body--signup{
    background:#000 url('../images/background.png') center center / cover no-repeat fixed;
}

.auth-body--signin::before,
.auth-body--signup::before{
    display:none;
}

@media (min-width:901px){
    .auth-body--signin .logo--auth,
    .auth-body--signup .logo--auth{
        display:none;
    }
}

@media (max-width:900px){
    .auth-body--signin,
    .auth-body--signup{
        background-image:url('../images/background_mini.png');
        background-position:center top;
    }
}

@media (min-width:901px){
    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        right:auto;
        left:50%;
        transform:translate(-50%,-50%);
        animation:panelFadeCentered .65s ease both;
    }
}

/* Responsive rules must remain last in this file. */
@media (max-width:900px){
    .auth-body--signin,
    .auth-body--signup{
        min-height:100svh;
        padding:clamp(18px,4vw,34px) 12px 28px;
        overflow-x:hidden;
        overflow-y:auto;
        background-attachment:scroll;
    }

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        position:relative;
        inset:auto;
        width:min(100%,460px);
        max-width:460px;
        max-height:none;
        margin:0 auto;
        padding:clamp(88px,23vw,108px) clamp(22px,7vw,34px) clamp(86px,22vw,104px);
        overflow:visible;
        transform:none;
        animation:panelFadeMobile .55s ease both;
    }

    .auth-body--signup .auth-panel{
        padding-top:clamp(84px,22vw,104px);
        padding-bottom:clamp(82px,21vw,100px);
    }

    .auth-panel__skin-body{
        top:clamp(80px,21vw,98px);
        right:0;
        bottom:clamp(80px,21vw,98px);
        left:0;
        background-size:100% 12%;
        background-repeat:repeat-y;
    }

    .auth-panel__skin-top{top:0}
    .auth-panel__skin-under{bottom:0}
}

@media (max-width:420px){
    .auth-body--signin,
    .auth-body--signup{padding-inline:8px}

    .auth-body--signin .auth-panel,
    .auth-body--signup .auth-panel{
        padding-right:20px;
        padding-left:20px;
    }
}