/* ==========================================================
   LAS 100 NOVIAS — CodyChat Login
   Inspirado visualmente en:
   Rentarou Aijou / Hakari Hanazono / Karane Inda

   Personajes:
   control/login/Las100Novias/images/rentarou.png
   control/login/Las100Novias/images/hakari.png
   control/login/Las100Novias/images/karane.png
   ========================================================== */

:root{
    --hn-pink:#f35b91;
    --hn-pink-dark:#d83c70;
    --hn-pink-light:#ffd8e7;

    --hn-yellow:#ffd447;
    --hn-yellow-dark:#e9ad18;

    --hn-blue:#6d91ef;
    --hn-blue-dark:#4869c9;

    --hn-red:#e94b63;
    --hn-red-dark:#c92d49;

    --hn-purple:#7a4f91;

    --hn-ink:#3d2737;
    --hn-muted:#8d7a86;
    --hn-line:#eadde4;

    --hn-white:#fff;
    --hn-bg:#fffafd;
}

html,
body{
    min-height:100%;
    margin:0;
}

body{
    background:var(--hn-bg);
    color:var(--hn-ink);
}

#login_wrap.hn-page{
    min-height:100vh;
    background:var(--hn-bg);
    color:var(--hn-ink);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    overflow:hidden;
}

.hn-page *{
    box-sizing:border-box;
}

.hn-layout{
    display:grid;
    grid-template-columns:minmax(560px,1.48fr) minmax(390px,1fr);
    min-height:100vh;
}

/* ==========================================================
   HERO
   ========================================================== */

.hn-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    isolation:isolate;
    background:
        radial-gradient(circle at 15% 15%,rgba(255,255,255,.96),transparent 25%),
        radial-gradient(circle at 82% 25%,rgba(255,212,71,.25),transparent 25%),
        linear-gradient(135deg,#ffe5ef 0%,#ffc9dc 43%,#f6dce8 100%);
}

.hn-bg-grid{
    position:absolute;
    inset:0;
    z-index:-5;
    opacity:.25;
    background-image:
        linear-gradient(rgba(217,57,111,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(217,57,111,.12) 1px,transparent 1px);
    background-size:54px 54px;
    transform:rotate(-3deg) scale(1.08);
}

.hn-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(2px);
}

.hn-glow-pink{
    width:360px;
    height:360px;
    left:-130px;
    top:16%;
    background:rgba(243,91,145,.22);
    animation:hnGlow 5s ease-in-out infinite alternate;
}

.hn-glow-yellow{
    width:300px;
    height:300px;
    right:-90px;
    top:4%;
    background:rgba(255,212,71,.22);
    animation:hnGlow 6s ease-in-out infinite alternate-reverse;
}

.hn-glow-blue{
    width:260px;
    height:260px;
    right:5%;
    bottom:-100px;
    background:rgba(109,145,239,.17);
}

@keyframes hnGlow{
    from{transform:scale(.92);opacity:.65}
    to{transform:scale(1.08);opacity:1}
}

/* Decorative hearts */

.hn-heart{
    position:absolute;
    z-index:2;
    color:rgba(232,66,112,.68);
    font-family:Georgia,"Times New Roman",serif;
    text-shadow:0 5px 12px rgba(208,49,99,.15);
    pointer-events:none;
}

.hn-heart-1{
    left:10%;
    top:13%;
    font-size:36px;
    transform:rotate(-15deg);
    animation:hnHeartFloat 3.6s ease-in-out infinite;
}

.hn-heart-2{
    right:15%;
    top:14%;
    color:rgba(255,191,39,.8);
    font-size:25px;
    animation:hnHeartFloat 3s ease-in-out .4s infinite;
}

.hn-heart-3{
    left:8%;
    bottom:24%;
    color:rgba(109,145,239,.6);
    font-size:28px;
    animation:hnHeartFloat 4.1s ease-in-out .8s infinite;
}

.hn-heart-4{
    right:8%;
    bottom:19%;
    color:rgba(235,68,104,.72);
    font-size:42px;
    animation:hnHeartFloat 3.4s ease-in-out 1.2s infinite;
}

@keyframes hnHeartFloat{
    0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}
    50%{transform:translateY(-14px) rotate(8deg) scale(1.1)}
}

/* Sparks */

.hn-spark{
    position:absolute;
    z-index:1;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,255,255,.22),0 0 20px rgba(255,255,255,.85);
    animation:hnSpark 2.4s ease-in-out infinite;
}

.hn-spark-1{left:22%;top:23%}
.hn-spark-2{right:28%;top:34%;width:7px;height:7px;animation-delay:.5s}
.hn-spark-3{left:18%;bottom:30%;width:6px;height:6px;animation-delay:1s}
.hn-spark-4{right:12%;bottom:31%;width:8px;height:8px;animation-delay:1.5s}
.hn-spark-5{left:45%;top:10%;width:5px;height:5px;animation-delay:.8s}

@keyframes hnSpark{
    0%,100%{opacity:.25;transform:scale(.55) rotate(0)}
    50%{opacity:1;transform:scale(1.2) rotate(90deg)}
}

/* Anime title badge */

.hn-title-badge{
    position:absolute;
    z-index:8;
    left:6%;
    top:6%;
    min-width:174px;
    padding:12px 16px 13px;
    border:3px solid rgba(255,255,255,.9);
    border-radius:8px 22px 8px 22px;
    background:linear-gradient(145deg,rgba(243,91,145,.95),rgba(216,60,112,.92));
    color:#fff;
    box-shadow:0 15px 35px rgba(187,48,94,.2);
    transform:rotate(-3deg);
    animation:hnBadge 4.5s ease-in-out infinite;
}

.hn-title-badge small{
    display:block;
    margin-bottom:2px;
    font-size:8px;
    font-weight:900;
    letter-spacing:2px;
    opacity:.9;
}

.hn-title-badge strong{
    display:block;
    font-size:18px;
    line-height:.95;
    letter-spacing:-.8px;
    text-shadow:2px 2px 0 rgba(130,25,61,.22);
}

.hn-title-badge em{
    position:absolute;
    right:-13px;
    top:-14px;
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--hn-yellow);
    border:2px solid #fff;
    font-style:normal;
    font-size:15px;
}

@keyframes hnBadge{
    0%,100%{transform:rotate(-3deg) translateY(0)}
    50%{transform:rotate(-1deg) translateY(-5px)}
}

/* ==========================================================
   CHARACTERS
   ========================================================== */

.hn-character{
    position:absolute;
    z-index:5;
    bottom:-2%;
    pointer-events:none;
    transform-origin:center bottom;
}

.hn-character img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    user-select:none;
    -webkit-user-drag:none;
}

.hn-rentarou{
    left:28%;
    bottom:-2%;
    width:min(30vw,365px);
    height:min(82vh,760px);
    z-index:4;
    animation:hnRentarou 5.2s ease-in-out infinite;
}

.hn-hakari{
    left:47%;
    bottom:-2%;
    width:min(32vw,395px);
    height:min(84vh,780px);
    z-index:6;
    animation:hnHakari 4.6s ease-in-out infinite;
}

.hn-karane{
    left:6%;
    bottom:-2%;
    width:min(31vw,380px);
    height:min(80vh,750px);
    z-index:5;
    animation:hnKarane 4.2s ease-in-out infinite;
}

.hn-rentarou img{
    filter:drop-shadow(0 25px 25px rgba(56,39,52,.18));
}

.hn-hakari img{
    filter:drop-shadow(0 25px 24px rgba(210,52,100,.22));
}

.hn-karane img{
    filter:drop-shadow(0 25px 24px rgba(232,169,34,.2));
}

@keyframes hnRentarou{
    0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
    50%{transform:translate3d(0,-12px,0) rotate(1deg)}
}

@keyframes hnHakari{
    0%,100%{transform:translate3d(0,0,0) rotate(1.2deg)}
    50%{transform:translate3d(0,-18px,0) rotate(-1.2deg)}
}

@keyframes hnKarane{
    0%,100%{transform:translate3d(0,0,0) rotate(1deg)}
    50%{transform:translate3d(0,-10px,0) rotate(-1deg)}
}

/* Additional CSS effect:
   pink/yellow romantic aura around the character group */

.hn-love-burst{
    position:absolute;
    z-index:3;
    left:48%;
    top:41%;
    width:150px;
    height:150px;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.hn-love-burst:before,
.hn-love-burst:after{
    content:"";
    position:absolute;
    inset:12%;
    border:2px solid rgba(243,91,145,.24);
    border-radius:50%;
    animation:hnPulseRing 2.7s ease-out infinite;
}

.hn-love-burst:after{
    animation-delay:1.35s;
}

.hn-love-burst span{
    position:absolute;
    color:#fff;
    font-size:15px;
    opacity:0;
    text-shadow:0 4px 10px rgba(209,53,103,.25);
    animation:hnBurstHeart 3.4s ease-out infinite;
}

.hn-love-burst span:nth-child(1){left:20%;top:45%;animation-delay:0s}
.hn-love-burst span:nth-child(2){left:68%;top:28%;animation-delay:.5s}
.hn-love-burst span:nth-child(3){left:75%;top:67%;animation-delay:1s}
.hn-love-burst span:nth-child(4){left:35%;top:12%;animation-delay:1.5s}
.hn-love-burst span:nth-child(5){left:5%;top:66%;animation-delay:2s}

@keyframes hnPulseRing{
    0%{transform:scale(.5);opacity:0}
    25%{opacity:1}
    100%{transform:scale(1.7);opacity:0}
}

@keyframes hnBurstHeart{
    0%{opacity:0;transform:translate(0,20px) scale(.4)}
    20%{opacity:1}
    100%{opacity:0;transform:translate(0,-65px) scale(1.1)}
}

/* Hero copy */

.hn-hero-copy{
    position:absolute;
    z-index:9;
    left:7%;
    right:7%;
    bottom:5.5%;
    text-align:center;
    color:var(--hn-ink);
    text-shadow:0 2px 0 rgba(255,255,255,.7);
}

.hn-kicker{
    display:inline-block;
    margin-bottom:7px;
    padding:5px 11px;
    border-radius:30px;
    color:#fff;
    background:var(--hn-red);
    box-shadow:0 6px 15px rgba(211,52,82,.18);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.6px;
}

.hn-hero-copy h1{
    margin:0 0 6px;
    font-size:clamp(27px,3.65vw,45px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-1.4px;
}

.hn-hero-copy h1 b{
    color:var(--hn-pink-dark);
    text-shadow:2px 2px 0 #fff;
}

.hn-hero-copy p{
    display: inline-block;
    margin:0;
    color:#6e5362;
    font-size:clamp(11px,1vw,15px);
    font-weight:650;
    background: var(--hn-white);
    padding: 5px 11px;
    border-radius: 30px;
    font-size: 12px;
}

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

.hn-auth{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:54px clamp(30px,4.4vw,76px) 72px;
    background:
        radial-gradient(circle at 88% 4%,rgba(255,212,71,.16),transparent 21%),
        radial-gradient(circle at 4% 100%,rgba(243,91,145,.11),transparent 24%),
        #fff;
    overflow-y:auto;
}

.hn-auth-shell{
    width:min(400px,100%);
    margin:auto;
}

.hn-language{
    position:absolute;
    z-index:10;
    top:20px;
    right:22px;
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #eadde4;
    border-radius:50%;
    background:#fff;
    box-shadow:0 7px 22px rgba(89,48,68,.08);
    cursor:pointer;
}

.hn-language:hover{
    border-color:var(--hn-pink);
    transform:rotate(8deg);
}

.hn-language img{
    width:21px;
    height:21px;
    border-radius:50%;
    object-fit:cover;
}

/* Brand */

.hn-brand{
    position:relative;
    min-height:70px;
    margin:0 0 5px;
    display:flex;
    align-items:center;
    gap:10px;
}

.hn-brand strong{
    color:var(--hn-pink-dark);
    font-size:27px;
    font-weight:950;
    line-height:.82;
    letter-spacing:-1.7px;
    text-shadow:2px 2px 0 #ffe3ed;
}

.hn-brand-heart{
    display:grid;
    place-items:center;
    width:55px;
    height:55px;
    color:#fff;
    background:linear-gradient(145deg,var(--hn-pink),var(--hn-red));
    clip-path:path("M27 49 L5 27 C-5 16 4 1 16 6 C22 8 27 15 27 15 C27 15 32 8 38 6 C50 1 59 16 49 27 Z");
    font-size:25px;
    filter:drop-shadow(0 9px 12px rgba(224,59,108,.22));
    animation:hnBrandBeat 2.3s ease-in-out infinite;
}

@keyframes hnBrandBeat{
    0%,100%{transform:scale(1)}
    8%{transform:scale(1.1)}
    16%{transform:scale(1)}
    24%{transform:scale(1.08)}
    32%{transform:scale(1)}
}

/* Heading */

.hn-heading{
    margin-bottom:28px;
}

.hn-heading-mini{
    display:block;
    margin-bottom:5px;
    color:var(--hn-pink-dark);
    font-size:8px;
    font-weight:900;
    letter-spacing:2px;
}

.hn-heading h2{
    margin:0 0 7px;
    color:var(--hn-ink);
    font-size:29px;
    font-weight:900;
    letter-spacing:-.9px;
    line-height:1.05;
}

.hn-heading p{
    margin:0;
    color:var(--hn-muted);
    font-size:12px;
}

/* Panel */

.hn-panel{
    display:none;
    animation:hnPanelIn .3s ease;
}

.hn-panel.hn-active{
    display:block;
}

@keyframes hnPanelIn{
    from{
        opacity:0;
        transform:translateY(9px) scale(.992);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* Fields */

.hn-field{
    display:block;
    margin-bottom:16px;
}

.hn-field>span,
.hn-birth>span{
    display:block;
    margin:0 0 7px;
    color:#695363;
    font-size:10px;
    font-weight:750;
}

.hn-field>span i{
    margin-right:4px;
    color:var(--hn-pink);
}

.hn-field>div{
    position:relative;
    display:flex;
    align-items:center;
    height:47px;
    border:1px solid var(--hn-line);
    border-radius:10px;
    background:#fff;
    overflow:hidden;
    transition:border-color .2s,box-shadow .2s,transform .2s;
}

.hn-field>div:focus-within{
    border-color:var(--hn-pink);
    box-shadow:0 0 0 3px rgba(243,91,145,.1);
    transform:translateY(-1px);
}

.hn-field input,
.hn-field input.full_input,
.hn-field select,
.hn-field select.form_data{
    width:100%!important;
    height:45px!important;
    min-height:45px!important;
    margin:0!important;
    padding:0 44px 0 13px!important;
    border:0!important;
    border-radius:0!important;
    color:#493442!important;
    -webkit-text-fill-color:#493442!important;
    background:#fff!important;
    box-shadow:none!important;
    outline:0!important;
    font:500 12px/45px Inter,"Segoe UI",Arial,sans-serif!important;
}

.hn-field input::placeholder{
    color:#c7bac1!important;
    -webkit-text-fill-color:#c7bac1!important;
    opacity:1!important;
}

.hn-eye{
    position:absolute;
    right:5px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    color:var(--hn-pink-dark);
    background:transparent;
    cursor:pointer;
}

.hn-eye:hover{
    background:#fff0f5;
}

/* Options */

.hn-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:-5px 0 20px;
}

.hn-remember{
    display:flex;
    align-items:center;
    gap:7px;
    color:#9b8c96;
    font-size:10px;
    cursor:pointer;
}

.hn-remember input{
    width:13px;
    height:13px;
    margin:0;
    accent-color:var(--hn-pink);
}

.hn-link,
.hn-panel-trigger,
.hn-guest-link{
    border:0;
    padding:0;
    color:var(--hn-pink-dark);
    background:transparent;
    font:700 10px/1.4 Inter,"Segoe UI",Arial,sans-serif;
    cursor:pointer;
}

.hn-link:hover,
.hn-panel-trigger:hover,
.hn-guest-link:hover{
    text-decoration:underline;
}

/* Submit */

.hn-submit{
    position:relative;
    width:100%;
    height:49px;
    margin:0;
    border:0;
    border-radius:11px;
    color:#fff;
    background:
        linear-gradient(95deg,var(--hn-pink-dark),var(--hn-red));
    box-shadow:
        0 9px 20px rgba(218,58,108,.22),
        inset 0 1px 0 rgba(255,255,255,.2);
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    overflow:hidden;
    transition:transform .18s,filter .18s,box-shadow .18s;
}

.hn-submit:before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:55%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );
    transform:skewX(-18deg);
    transition:left .55s ease;
}

.hn-submit:hover:before{
    left:130%;
}

.hn-submit:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:0 13px 25px rgba(218,58,108,.28);
}

.hn-submit i{
    margin-left:7px;
}

/* Divider */

.hn-divider{
    display:flex;
    align-items:center;
    gap:13px;
    margin:25px 0 18px;
    color:#aaa0a7;
    font-size:9px;
    white-space:nowrap;
}

.hn-divider:before,
.hn-divider:after{
    content:"";
    height:1px;
    flex:1;
    background:#e7dfe4;
}

/* Social */

.hn-socials{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.hn-social{
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid #eadde4;
    border-radius:10px;
    color:#493442;
    background:#fff;
    box-shadow:0 6px 14px rgba(88,45,67,.07);
    font-size:11px;
    font-weight:750;
    cursor:pointer;
    transition:transform .18s,box-shadow .18s;
}

.hn-social:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 19px rgba(88,45,67,.12);
}

.hn-social i{
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    font-size:11px;
    font-style:normal;
}

.hn-facebook i{
    color:#1877f2;
}

.hn-google-mark{
    color:#4285f4!important;
    font-family:Arial,sans-serif;
    font-weight:900;
}

/* Switches */

.hn-switches{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:68px;
    color:#9c8d97;
    text-align:center;
    font-size:10px;
}

.hn-switches .hn-panel-trigger{
    margin-left:3px;
    font-size:10px;
}

.hn-guest-link{
    color:#8d7181;
}

/* Registration */

.hn-field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}

.hn-birth{
    margin-bottom:16px;
}

.hn-birth>div{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.hn-birth select{
    width:100%;
    height:43px;
    padding:0 8px;
    border:1px solid var(--hn-line);
    border-radius:9px;
    color:#57404d;
    background:#fff;
    outline:0;
    font-size:11px;
}

.hn-recaptcha{
    margin:12px 0;
    overflow:hidden;
}

.hn-terms{
    margin:11px 0 0;
    color:#a2949c;
    text-align:center;
    font-size:9px;
}

/* Footer */

.hn-footer{
    position:absolute;
    left:30px;
    right:30px;
    bottom:17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#b1a7ad;
    font-size:9px;
}

.hn-footer nav{
    display:flex;
    gap:13px;
}

.hn-footer a{
    color:#9d8e97!important;
    text-decoration:none!important;
}

/* CodyChat */

.hn-page>.section{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
}

.hn-page .selectboxit-container{
    width:100%;
}

.hn-page .selectboxit{
    width:100%!important;
    height:45px!important;
    line-height:45px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
}

.hn-page .selectboxit-text{
    height:45px!important;
    line-height:45px!important;
    color:#493442!important;
    font-size:12px!important;
}

.hn-page .selectboxit-arrow-container{
    height:45px!important;
}

.hn-page input:-webkit-autofill,
.hn-page input:-webkit-autofill:hover,
.hn-page input:-webkit-autofill:focus{
    -webkit-text-fill-color:#493442!important;
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    caret-color:#493442!important;
}

/* ==========================================================
   RADIO
   ========================================================== */

.hn-radio-dock{
    position:fixed;
    z-index:70;
    left:18px;
    bottom:18px;
    width:min(310px,calc(100vw - 36px));
    overflow:hidden;
    border:1px solid rgba(243,91,145,.22);
    border-radius:18px;
    color:#382544;
    background:rgba(255,250,253,.95);
    box-shadow:0 18px 45px rgba(71,30,83,.18);
    backdrop-filter:blur(16px);
    font-family:"Segoe UI",Arial,sans-serif;
}

.hn-radio-toggle{
    width:100%;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 12px;
    border:0;
    color:inherit;
    background:transparent;
    text-align:left;
    cursor:pointer;
}

.hn-radio-icon{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    flex:0 0 39px;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(145deg,var(--hn-pink),var(--hn-red));
    box-shadow:0 7px 18px rgba(159,43,108,.22);
}

.hn-radio-copy{
    min-width:0;
    display:flex;
    flex:1;
    flex-direction:column;
}

.hn-radio-copy small{
    color:#b65b7d;
    font-size:8px;
    font-weight:900;
    letter-spacing:1.1px;
}

.hn-radio-copy strong{
    overflow:hidden;
    color:#4b294b;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hn-radio-arrow{
    color:#a66a91;
    transition:transform .2s;
}

.hn-radio-open .hn-radio-arrow{
    transform:rotate(180deg);
}

.hn-radio-body{
    display:none;
    padding:0 12px 12px;
}

.hn-radio-open .hn-radio-body{
    display:grid;
    grid-template-columns:1fr auto;
    gap:9px;
}

.hn-radio-body select{
    min-width:0;
    height:38px;
    padding:0 9px;
    border:1px solid rgba(243,91,145,.18);
    border-radius:10px;
    color:#55334f;
    background:#fff;
    outline:0;
    font-size:11px;
}

.hn-radio-controls{
    display:flex;
    gap:5px;
}

.hn-radio-controls button{
    width:38px;
    height:38px;
    border:0;
    border-radius:10px;
    color:#93406f;
    background:#fce8f0;
    cursor:pointer;
}

.hn-radio-controls .hn-radio-play{
    color:#fff;
    background:linear-gradient(145deg,var(--hn-pink),var(--hn-red));
}

.hn-playing .hn-radio-icon{
    animation:hnRadioPulse 1.25s ease-in-out infinite;
}

@keyframes hnRadioPulse{
    50%{
        box-shadow:
            0 0 0 6px rgba(243,91,145,.11),
            0 7px 18px rgba(159,43,108,.25);
    }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px){
    .hn-layout{
        grid-template-columns:minmax(510px,1.25fr) minmax(380px,1fr);
    }

    .hn-hakari{
        left:43%;
    }

    .hn-rentarou{
        left:23%;
    }

    .hn-karane{
        left:1%;
    }
}

@media(max-width:900px){

    #login_wrap.hn-page{
        overflow:visible;
    }

    .hn-layout{
        display:flex;
        min-height:0;
        flex-direction:column;
    }

    .hn-hero{
        min-height:500px;
        height:62vh;
        max-height:640px;
    }

    .hn-auth{
        min-height:620px;
        padding:54px 24px 84px;
        overflow:visible;
    }

    .hn-title-badge{
        left:5%;
        top:5%;
        transform:scale(.9) rotate(-3deg);
        transform-origin:left top;
    }

    .hn-rentarou{
        left:23%;
        width:34vw;
        height:75%;
    }

    .hn-hakari{
        left:39%;
        width:37vw;
        height:79%;
    }

    .hn-karane{
        left:1%;
        width:35vw;
        height:74%;
    }

    .hn-love-burst{
        left:49%;
        top:43%;
    }

    .hn-hero-copy{
        bottom:15.5%;
    }

    .hn-hero-copy h1{
        font-size:27px;
    }

    .hn-hero-copy p{
        font-size:11px;
    }

    .hn-switches{
        margin-top:54px;
    }

    .hn-footer{
        bottom:16px;
    }

    .hn-language{
        position:fixed;
        top:13px;
        right:13px;
    }
}

@media(max-width:600px){

    .hn-hero{
        min-height:455px;
        height:55vh;
        max-height:520px;
    }

    .hn-title-badge{
        min-width:145px;
        padding:9px 12px;
        transform:scale(.78) rotate(-3deg);
        transform-origin:left top;
    }

    .hn-title-badge strong{
        font-size:15px;
    }

    .hn-rentarou{
        left:30%;
        width:41vw;
        height:73%;
    }

    .hn-hakari{
        left:55%;
        width:41vw;
        height:72%;
    }

    .hn-karane{
        left:5%;
        width:41vw;
        height:70%;
    }

    .hn-love-burst{
        left:51%;
        top:43%;
        transform:translate(-50%,-50%) scale(.7);
    }

    .hn-heart-1{
        font-size:25px;
    }

    .hn-heart-2{
        font-size:20px;
    }

    .hn-heart-4{
        font-size:29px;
    }

    .hn-hero-copy{
        bottom:15%;
    }

    .hn-kicker{
        font-size:6px;
        letter-spacing:1px;
    }

    .hn-hero-copy h1{
        font-size:21px;
    }

    .hn-hero-copy p{
        font-size:9px;
    }

    .hn-auth{
        min-height:650px;
        padding:47px 22px 86px;
    }

    .hn-auth-shell{
        width:100%;
    }

    .hn-brand{
        min-height:58px;
    }

    .hn-brand-heart{
        width:55px;
        height:55px;
        font-size:25px;
    }

    .hn-brand strong{
        font-size:23px;
    }

    .hn-heading{
        margin-bottom:24px;
    }

    .hn-heading h2{
        font-size:25px;
    }

    .hn-field-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .hn-socials{
        display:flex;
        justify-content:center;
        gap:24px;
    }

    .hn-social{
        width:46px;
        height:46px;
        padding:0;
        border:2px solid var(--hn-pink-light);
        border-radius:50%;
        background:#fff;
    }

    .hn-social span{
        display:none;
    }

    .hn-social i{
        font-size:15px;
    }

    .hn-switches{
        margin-top:30px;
    }

    .hn-footer{
        left:20px;
        right:20px;
        flex-direction:column;
        gap:5px;
        text-align:center;
    }

    .hn-footer nav{
        display:none;
    }

    .hn-radio-dock{
        left:12px;
        bottom:12px;
        width:calc(100vw - 24px);
        border-radius:15px;
    }

    .hn-radio-toggle{
        min-height:54px;
    }

    .hn-radio-open .hn-radio-body{
        grid-template-columns:1fr;
    }

    .hn-radio-controls{
        justify-content:center;
    }
}

@media(max-width:420px){

    .hn-hero{
        min-height:420px;
    }

    .hn-rentarou{
        left:21%;
        width:39vw;
        height:65%;
    }

    .hn-hakari{
        left:43%;
        width:42vw;
        height:69%;
    }

    .hn-karane{
        left:-3%;
        width:41vw;
        height:64%;
    }

    .hn-title-badge{
        transform:scale(.68) rotate(-3deg);
    }

    .hn-hero-copy h1{
        font-size:19px;
    }

    .hn-hero-copy p{
        font-size:8px;
    }
}

@media(max-height:760px) and (min-width:901px){

    .hn-auth{
        align-items:flex-start;
        padding-top:32px;
        padding-bottom:48px;
    }

    .hn-brand{
        min-height:55px;
    }

    .hn-heading{
        margin-bottom:20px;
    }

    .hn-field{
        margin-bottom:11px;
    }

    .hn-options{
        margin-bottom:15px;
    }

    .hn-divider{
        margin:18px 0 14px;
    }

    .hn-switches{
        margin-top:30px;
    }

    .hn-hero-copy{
        bottom:14%;
    }
}

@media(prefers-reduced-motion:reduce){

    .hn-panel,
    .hn-character,
    .hn-heart,
    .hn-glow,
    .hn-title-badge,
    .hn-love-burst span,
    .hn-love-burst:before,
    .hn-love-burst:after,
    .hn-brand-heart,
    .hn-spark{
        animation:none!important;
    }

    .hn-submit{
        transition:none;
    }
}