/*
 * HabboStory — page d'accueil des visiteurs.
 *
 * Fluidité : toutes les animations ne touchent que transform et opacity, sur des éléments HTML
 * (images) promus en calques : la carte graphique les déplace sans redessiner la page.
 * Aucun flou (backdrop-filter) ni filtre sur ce qui bouge.
 */

@font-face {
    font-family: 'Exo 2';
    src: url('fonts/exo2-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --hs-ink: #0c1d4a;
    --hs-ink-soft: #3b4f80;
    /* Accent du hub : violet de nuit (la même teinte que la lueur de l'horizon), plus de bleu ni de jaune */
    --hs-violet-1: #cdbdff;
    --hs-violet-2: #8f6bff;
    --hs-violet-3: #5f3fe6;
    --hs-violet-glow: rgba(143, 107, 255, .45);
    --hs-bounce: cubic-bezier(.2, 1.6, .4, 1);
    /* Carte « nuit » : panneau bleu nuit, liserés au clair de lune, accents néon */
    --hs-panel: #141b40;
    --hs-line: rgba(160, 180, 255, .2);
    --hs-text: #eef2ff;
    --hs-muted: #8f9bd0;
    --hs-cyan: #3ff0ff;
    --hs-pink: #ff3fd0;
}

*, *::before, *::after { box-sizing: border-box; }

button, input { font: inherit; color: inherit; }

/* Icônes SVG intégrées (remplacent Font Awesome) */
.hs-ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

html, body.hs {
    margin: 0;
    min-height: 100%;
    background: #0a0f2e;
}

body.hs {
    overflow-x: hidden;
    font-family: 'Exo 2', system-ui, sans-serif;
    color: var(--hs-ink);
    -webkit-font-smoothing: antialiased;
}

.hs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ───────── Ciel de nuit ───────── */

.hs-sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    /* Étoiles fixes = fond du ciel : aucun calque, aucun coût image par image */
    background:
        var(--stars-near) repeat,
        var(--stars-mid) repeat,
        var(--stars-far) repeat,
        linear-gradient(180deg, #04061c 0%, #0a0f2e 40%, #151a4a 75%, #2a1d5e 100%);
}

/* Lueur violette à l'horizon */
.hs-horizon {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -20vh;
    height: 55vh;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(150, 90, 255, .35), rgba(90, 60, 200, .12) 55%, transparent);
}

/* Lune : croissant dessiné par une ombre interne, halo qui respire */
.hs-moon {
    position: absolute;
    top: 9vh;
    right: 9vw;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe8, #f3e7b8 60%, #d9c98f);
    box-shadow: inset -18px -10px 0 rgba(10, 15, 46, .55);
}

.hs-moon::before {
    content: '';
    position: absolute;
    inset: -110px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 244, 200, .22), rgba(180, 170, 255, .08) 55%, transparent);
}

/*
 * Ce qui bouge dans le ciel est réduit au strict minimum pour ne rien coûter à l'affichage :
 * aucune couche plein écran animée, aucune ombre (box-shadow) recalculée, uniquement l'opacité
 * de petits éléments (et le glissement des étoiles filantes). Les halos sont dessinés en dégradés.
 */
.hs-starfield {
    position: absolute;
    inset: 0;
}

/* Étoiles brillantes : point lumineux + croix, dessinés en dégradés ; seule l'opacité varie */
.hs-twinkle {
    position: absolute;
    width: calc(var(--s) * 5);
    height: calc(var(--s) * 5);
    margin: calc(var(--s) * -2.5) 0 0 calc(var(--s) * -2.5);
    background:
        radial-gradient(circle, #fff 0 9%, rgba(200, 220, 255, .55) 14%, transparent 30%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) center / 100% 1px no-repeat,
        linear-gradient(0deg, transparent, rgba(255, 255, 255, .85), transparent) center / 1px 100% no-repeat;
    opacity: .4;
    animation: hs-sparkle var(--d) ease-in-out var(--o) infinite;
}

@keyframes hs-sparkle {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1; }
}

/* Étoiles filantes : le support est orienté (180° − angle) pour filer vers le bas à gauche,
   la traînée glisse le long de son axe. Visible ~8 % du cycle seulement : passages occasionnels. */
.hs-shooting {
    position: absolute;
    width: 0;
    height: 0;
    transform: rotate(calc(180deg - var(--a)));
}

.hs-shooting i {
    position: absolute;
    top: -6px;
    left: 0;
    width: calc(var(--l) + 12px);
    height: 13px;
    /* Traînée + tête lumineuse, en dégradés (pas d'ombre) */
    background:
        radial-gradient(circle at calc(100% - 6px) 50%, #fff 0 2.5px, rgba(200, 225, 255, .55) 4px, transparent 6.5px),
        linear-gradient(90deg, transparent, rgba(190, 220, 255, .75) 55%, #fff) 0 50% / calc(100% - 6px) 3px no-repeat;
    transform-origin: 100% 50%;
    opacity: 0;
    animation: hs-shoot var(--d) cubic-bezier(.3, .1, .6, 1) var(--o) infinite;
}

@keyframes hs-shoot {
    0%        { opacity: 0; transform: translate3d(0, 0, 0) scaleX(.2); }
    1%        { opacity: 1; }
    4%        { transform: translate3d(35vmax, 0, 0) scaleX(1); }
    8%        { opacity: 0; transform: translate3d(70vmax, 0, 0) scaleX(.6); }
    8.01%, 100% { opacity: 0; transform: translate3d(70vmax, 0, 0) scaleX(.6); }
}

/*
 * ───────── Départ vers l'hôtel : une seule chute, d'un seul tenant ─────────
 * La caméra plonge (tout file vers le haut en accélérant) pendant que l'écran s'enfonce dans la
 * nuit jusqu'à une couleur unie. La page joueur démarre sur exactement cette couleur et s'en
 * dévoile en fondu : le changement de page a lieu « dans le noir », sans retour en arrière.
 * Orion redirige 1,5 s après la réponse : tout est terminé à ~1,3 s.
 */
.hs-starfield, .hs-moon, .hs-horizon { transition: transform 1.25s cubic-bezier(.5, 0, .85, .45); }

/* ───────── Hub centré ───────── */

.hs-hub {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Ancré en haut avec un décalage fixe (≈ centré pour la connexion) : quand la carte s'allonge
       pour l'inscription, rien ne remonte, elle grandit simplement vers le bas */
    justify-content: flex-start;
    gap: clamp(10px, 2.5vh, 22px);
    /* En bas : la place des réseaux, accrochés sous la carte */
    padding: max(16px, calc(50vh - 330px)) 16px 84px;
}

/* Logo : une image par lettre */
.hs-logo {
    position: relative;
    margin: 0;
    width: min(360px, 78vw);
}

.hs-logo-float {
    position: absolute;
    inset: 0;
    animation: hs-float 6s ease-in-out 1.6s infinite;
}

.hs-letter {
    position: absolute;
    display: block;
    animation: hs-drop .75s var(--hs-bounce) both;
    animation-delay: calc(var(--i) * 70ms + 100ms);
}

.hs-letter img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    animation: hs-wave 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 90ms + 1.8s);
}

@keyframes hs-drop {
    from { opacity: 0; transform: translate3d(0, -70px, 0) scale(.5); }
    to   { opacity: 1; transform: none; }
}

/* Vague : chaque lettre saute à son tour puis attend la vague suivante */
@keyframes hs-wave {
    0%, 28%, 100% { transform: translate3d(0, 0, 0); }
    9%            { transform: translate3d(0, -12%, 0) scale(1.05); }
    18%           { transform: translate3d(0, 2%, 0) scale(.99); }
}

@keyframes hs-float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -7px, 0); }
}

.hs-spark {
    position: absolute;
    height: auto;
    user-select: none;
    opacity: 0;
    animation: hs-twinkle 2.8s ease-in-out infinite;
    animation-delay: calc(var(--s) * .7s + 1.4s);
}

@keyframes hs-twinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    40%, 60% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ───────── Carte de connexion ───────── */

/* L'entrée est sur le conteneur et la secousse sur la carte : deux éléments distincts, sinon la fin
   de la secousse relancerait l'animation d'entrée (la carte disparaîtrait puis reviendrait) */
.hs-card-wrap {
    width: min(360px, 100%);
    animation: hs-rise .7s var(--hs-bounce) .55s both;
}

/*
 * Carte : le fond n'est pas porté par la carte elle-même mais par 3 morceaux (.hs-skin) :
 *   haut fixe (coins arrondis), milieu qui s'étire (scaleY), bas qui glisse (translateY).
 * Quand la carte change de hauteur (Connexion ↔ Inscription), seuls ces transform changent :
 * aucune mise en page n'est recalculée. Les positions sont fixées en JS (fitSkin dans accueil.js).
 */
.hs-card {
    position: relative;
    isolation: isolate;
    /* Contient les marges internes (sinon celle du sélecteur « s'échappe » au-dessus de la carte) */
    display: flow-root;
    --skin-h: 600px;   /* hauteur de mise en page de la carte (fixe), réglée par le JS */
}

.hs-skin {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.hs-skin > i {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    border: 1.5px solid var(--hs-line);
    /* Opaque : les morceaux se chevauchent d'1 px, une transparence y dessinerait une ligne */
    background: var(--hs-panel);
    will-change: transform;
    transition: transform .34s cubic-bezier(.2, .8, .25, 1);
}

.hs-skin-top {
    top: 0;
    height: 30px;
    border-bottom: 0 !important;
    border-radius: 22px 22px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* Le milieu chevauche d'1 px le haut et le bas pour qu'aucune ligne n'apparaisse entre les morceaux */
.hs-skin-mid {
    top: 29px;
    height: calc(var(--skin-h) - 58px);
    border-top: 0 !important;
    border-bottom: 0 !important;
    transform-origin: 50% 0;
}

.hs-skin-bot {
    top: calc(var(--skin-h) - 30px);
    height: 30px;
    border-top: 0 !important;
    border-radius: 0 0 22px 22px;
    box-shadow: 0 24px 50px rgba(2, 4, 18, .55);
}

/* Halo violet sous la carte, comme la lueur de l'horizon (dégradé fixe, suit le bas de la carte) */
.hs-skin-bot::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -48px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(140, 100, 255, .35), transparent);
}

@keyframes hs-rise {
    from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ───────── Sous la carte : réseaux ───────── */

.hs-below {
    position: absolute;
    left: -40px;
    right: -40px;
    top: calc(var(--skin-h) + 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    will-change: transform;
    transition: transform .34s cubic-bezier(.2, .8, .25, 1);
}

.hs-social {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--hs-panel);
    color: #c9d2ff;
    font-size: 20px;
    box-shadow: inset 0 0 0 1.5px var(--hs-line), 0 10px 24px rgba(2, 4, 18, .45);
    text-decoration: none;
    transition: transform .2s var(--hs-bounce), background-color .15s ease, color .15s ease;
}

a.hs-social:hover, a.hs-social:focus-visible { transform: translate3d(0, -3px, 0); color: #fff; outline: none; }
a.hs-social--discord:hover, a.hs-social--discord:focus-visible { background: #5865f2; }
a.hs-social--instagram:hover, a.hs-social--instagram:focus-visible {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Lien pas encore branché : visible mais en retrait */
.hs-social.is-soon { opacity: .55; cursor: help; }


/* Petite secousse quand un message d'erreur arrive */
.hs-card.hs-shake { animation: hs-shake .45s ease-in-out; }

@keyframes hs-shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20%      { transform: translate3d(-7px, 0, 0); }
    40%      { transform: translate3d(6px, 0, 0); }
    60%      { transform: translate3d(-4px, 0, 0); }
    80%      { transform: translate3d(2px, 0, 0); }
}

[x-cloak] { display: none !important; }

/* Sélecteur Connexion / Inscription : la pastille blanche glisse sous l'onglet actif */
.hs-switch {
    position: relative;
    display: flex;
    margin: 20px 20px 0;
    padding: 4px;
    border-radius: 999px;
    background: rgba(5, 9, 32, .55);
    box-shadow: inset 0 0 0 1px var(--hs-line);
}

.hs-switch-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hs-violet-1), var(--hs-violet-2) 50%, var(--hs-violet-3));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 14px var(--hs-violet-glow);
    transition: transform .28s cubic-bezier(.2, .9, .3, 1.15);
}

.hs-switch.is-register .hs-switch-thumb { transform: translate3d(100%, 0, 0); }

.hs-switch-item {
    position: relative;
    flex: 1;
    padding: 8px 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hs-muted);
    font: 800 13px / 1.2 'Exo 2', system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .12s ease;
}

.hs-switch-item.is-active { color: #fff; text-shadow: 0 1px 0 var(--hs-ink); cursor: default; }

.hs-switch-item:not(.is-active):hover,
.hs-switch-item:focus-visible {
    color: var(--hs-violet-1);
    outline: none;
}

/*
 * Volets : les deux sont toujours en place, superposés dans la même cellule de grille et déjà
 * dessinés (calques préparés). La bascule ne touche que opacity et transform : la mise en page
 * ne change jamais. La hauteur visible de la carte suit via le fond en 3 morceaux.
 */
.hs-panes {
    display: grid;
    overflow: hidden;
}

.hs-pane {
    grid-area: 1 / 1;
    align-self: start;
    min-width: 0;
    will-change: opacity, transform;
    transition: opacity .22s ease-out, transform .34s cubic-bezier(.2, .8, .25, 1);
}

.hs-pane:not(.is-active) {
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease-out, transform .25s ease-in;
}

.hs-pane--login:not(.is-active)    { transform: translate3d(-36px, 0, 0); }
.hs-pane--register:not(.is-active) { transform: translate3d(36px, 0, 0); }

/* Fermeture instantanée du message au moment d'une bascule (pas d'animation de hauteur en parallèle) */
.hs-msg-slot.is-instant { transition: none !important; }

/* ───────── Choix de l'avatar ───────── */

.hs-picker {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 10px;
    border: 1.5px solid var(--hs-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.hs-stage {
    position: relative;
    flex: none;
    width: 84px;
    height: 100px;
    border-radius: 12px;
    background:
        radial-gradient(90% 60% at 50% 100%, rgba(143, 107, 255, .45), transparent 70%),
        linear-gradient(180deg, #33297a, #17183f);
    box-shadow: inset 0 0 0 1.5px rgba(205, 189, 255, .4);
    overflow: hidden;
}

.hs-stage-floor {
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
}

.hs-stage-avatar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    width: auto;
    height: 94px;
    margin: 0 auto;
    image-rendering: pixelated;
    animation: hs-idle 2.6s ease-in-out infinite;
}

@keyframes hs-idle {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -3px, 0); }
}

.hs-picker-controls {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hs-gender {
    display: flex;
    gap: 6px;
}

.hs-gender button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border: 1.5px solid var(--hs-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: var(--hs-muted);
    font: 800 12px / 1 'Exo 2', system-ui, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .12s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.hs-gender button:hover { border-color: var(--hs-violet-2); }
.hs-gender button:active { transform: translateY(2px); }

.hs-gender button.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, var(--hs-violet-1), var(--hs-violet-2));
    color: #fff;
    text-shadow: 0 1px 0 var(--hs-ink);
}

.hs-looks {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.hs-look-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #050a1c;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--hs-violet-1), var(--hs-violet-2) 50%, var(--hs-violet-3));
    color: #fff;
    font-size: 12px;
    box-shadow: 0 3px 0 var(--hs-ink);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.hs-look-arrow:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--hs-ink); }
.hs-look-arrow:active { transform: translateY(3px); box-shadow: 0 0 0 var(--hs-ink); }

.hs-look-dots { display: flex; gap: 6px; }

.hs-look-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 2px solid var(--hs-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .25s var(--hs-bounce), background-color .2s ease;
}

.hs-look-dot.is-active {
    border-color: var(--hs-violet-1);
    background: var(--hs-violet-1);
    transform: scale(1.3);
}

.hs-hint {
    margin: 0;
    color: var(--hs-muted);
    font-size: 11px;
    font-weight: 600;
}

.hs-hint--field { margin: -6px 0 0 4px; }

/* Deux champs côte à côte (mot de passe + confirmation) */
.hs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hs-row .hs-field { min-width: 0; }

@media (max-width: 420px) {
    .hs-row { grid-template-columns: 1fr; }
}
.hs-row .hs-field:last-child { padding-left: 12px; }

.hs-field-label {
    flex: none;
    color: var(--hs-muted);
    font-size: 13px;
    font-weight: 700;
}

.hs-field input[type="date"] { color-scheme: dark; cursor: pointer; }

.hs-referral {
    margin: 0;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(143, 107, 255, .14);
    color: var(--hs-violet-1);
    box-shadow: inset 0 0 0 1px rgba(143, 107, 255, .4);
    font-size: 13px;
    font-weight: 600;
}

/* Formulaire */
.hs-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
}

.hs-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 10px 0 6px;
    border: 1.5px solid var(--hs-line);
    border-radius: 14px;
    background: rgba(5, 9, 32, .5);
    cursor: text;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.hs-field:hover { border-color: rgba(160, 180, 255, .38); }

.hs-field:focus-within {
    border-color: var(--hs-violet-2);
    background: rgba(5, 9, 32, .75);
    box-shadow: 0 0 0 4px rgba(143, 107, 255, .2);
}

.hs-field-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(143, 107, 255, .16);
    color: var(--hs-violet-1);
    font-size: 13px;
    transition: background-color .2s ease, color .2s ease;
}

.hs-field:focus-within .hs-field-icon {
    background: var(--hs-violet-3);
    color: #fff;
}

.hs-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    outline: none;
    background: transparent;
    color: var(--hs-text);
    font: 600 15px / 1 'Exo 2', system-ui, sans-serif;
    box-shadow: none;
}

.hs-field input::placeholder { color: #6c78ad; font-weight: 500; }

/* Pré-remplissage du navigateur : on garde le fond translucide du champ au lieu d'un rectangle opaque */
.hs-field input:-webkit-autofill,
.hs-field input:-webkit-autofill:hover,
.hs-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hs-text);
    caret-color: var(--hs-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

.hs-field input:autofill { background-color: transparent; }

.hs-eye {
    border: 0;
    padding: 6px;
    background: transparent;
    color: var(--hs-muted);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease;
}

.hs-eye:hover, .hs-eye:focus-visible { color: var(--hs-violet-1); outline: none; }

.hs-captcha { display: flex; justify-content: center; }

/* Message intégré : la ligne de grille passe de 0fr à 1fr pour déplier la hauteur en douceur */
.hs-msg-slot {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0 20px;
    opacity: 0;
    transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease;
}

.hs-msg-slot.is-open {
    grid-template-rows: 1fr;
    margin: 14px 20px -2px;
    opacity: 1;
}

.hs-msg-slot > .hs-msg { overflow: hidden; min-height: 0; }

.hs-msg {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.hs-msg-ico { margin-top: 1px; font-size: 16px; }
.hs-msg > span { flex: 1; padding: 0; }

.hs-msg-slot.is-open .hs-msg { padding: 10px 8px 10px 12px; }

.hs-msg--error {
    background: rgba(255, 79, 110, .14);
    color: #ffb8c4;
    box-shadow: inset 0 0 0 1.5px rgba(255, 110, 140, .5);
}

.hs-msg--success {
    background: rgba(70, 230, 140, .12);
    color: #9dffc4;
    box-shadow: inset 0 0 0 1.5px rgba(70, 230, 140, .45);
}

.hs-msg-close {
    border: 0;
    padding: 0 4px;
    background: transparent;
    color: inherit;
    opacity: .6;
    font-size: 14px;
    cursor: pointer;
}

.hs-msg-close:hover, .hs-msg-close:focus-visible { opacity: 1; outline: none; }

/* Boutons « Habbo » : gros contour, relief, reflet qui passe */
.hs-btn {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    margin-bottom: 5px;
    border: 2.5px solid #050a1c;
    border-radius: 14px;
    font: 900 16px / 1 'Exo 2', system-ui, sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 0 #050a1c, inset 0 3px 0 rgba(255, 255, 255, .5);
    transition: transform .12s ease, box-shadow .12s ease;
}

.hs-btn .hs-ico { font-size: 16px; transition: transform .2s ease; }
.hs-btn:hover .hs-ico { transform: translateX(3px); }
.hs-btn--ghost:hover .hs-ico-star { transform: rotate(72deg) scale(1.15); }

.hs-btn--primary {
    background: linear-gradient(180deg, var(--hs-violet-1), var(--hs-violet-2) 45%, var(--hs-violet-3));
    color: #fff;
    text-shadow: 0 2px 0 var(--hs-ink);
}

.hs-btn--ghost {
    border: 1.5px solid rgba(205, 189, 255, .45);
    background: rgba(143, 107, 255, .08);
    color: #e9e2ff;
    box-shadow: none !important;
    transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}

.hs-btn--ghost::before { display: none; }
.hs-btn--ghost:hover, .hs-btn--ghost:focus-visible { background: rgba(143, 107, 255, .18); border-color: var(--hs-violet-1); }
.hs-btn--ghost:active { transform: translateY(2px); }

.hs-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translate3d(-150%, 0, 0) skewX(-20deg);
    animation: hs-sweep 5s ease-in-out 2s infinite;
}


@keyframes hs-sweep {
    0%        { transform: translate3d(-150%, 0, 0) skewX(-20deg); }
    25%, 100% { transform: translate3d(350%, 0, 0) skewX(-20deg); }
}

.hs-btn:hover, .hs-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 #050a1c, inset 0 3px 0 rgba(255, 255, 255, .6);
    outline: none;
}

.hs-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #050a1c, inset 0 3px 0 rgba(255, 255, 255, .4);
}

.hs-btn.is-loading { cursor: progress; }
.hs-btn.is-loading > * { opacity: 0; }

.hs-btn.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hs-spin .7s linear infinite;
}

@keyframes hs-spin { to { transform: rotate(360deg); } }

.hs-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 -2px;
    color: var(--hs-muted);
    font-size: 12px;
    font-weight: 700;
}

.hs-divider::before, .hs-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hs-line));
}

.hs-divider::after { transform: scaleX(-1); }

/* ───────── Petits écrans ───────── */

@media (max-height: 680px) {
    .hs-logo { width: min(280px, 70vw); }
    .hs-form { gap: 10px; padding-bottom: 16px; }
}

/* ───────── Mouvement réduit ───────── */

@media (prefers-reduced-motion: reduce) {
    .hs-twinkle, .hs-logo-float, .hs-letter, .hs-letter img,
    .hs-card-wrap, .hs-card, .hs-btn::before, .hs-stage-avatar {
        animation: none !important;
    }
    .hs-spark, .hs-twinkle { animation: none; opacity: 1; }
    .hs-shooting { display: none; }
}

/* ───────── Mode léger ─────────
   Décor fixe : plus d'étoiles filantes ni d'animations en boucle (logo, lettres, étincelles, avatar, reflet
   des boutons), et plus de calques préparés en permanence. Seule la roue de chargement des boutons tourne. */
.hs-shooting { display: none; }
.hs-twinkle, .hs-logo-float, .hs-letter img, .hs-spark, .hs-stage-avatar, .hs-btn::before { animation: none; }
.hs-skin > i, .hs-below, .hs-pane { will-change: auto; }