/* ==============================================================
   Miskatonix — page de login.
   Deux fonds en cross-fade (cthulhu / garden), particules,
   vignette, carte avec onglets bordés en néon assorti au thème.
   La logique de connexion (POST login / mdp / game / submit)
   est strictement préservée.

   Polices : whitelist projet (cf. CLAUDE.md) — UnifrakturCook,
   Cormorant Garamond, EB Garamond, Inter, JetBrains Mono.
   Seule exception : la signature historique « Entrez dans la
   folie » garde Agency FB pour son néon vert d'origine.
   ============================================================== */

/* Police d'origine du titre néon historique « Entrez dans la folie ».
   On pointe d'abord sur le chemin servi historiquement par la home
   Cthulhu (déjà mis en cache par Apache et connu pour fonctionner),
   et on garde le chemin racine /assets/ comme repli. */
@font-face {
    font-family: "Narkisim";
    src: url("../games/cthulhu/assets/fonts/nrkis.ttf") format("truetype"),
         url("../assets/fonts/nrkis.ttf")              format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: 'EB Garamond', 'Georgia', serif;
    overflow: hidden;
}
body {
    position: relative;
    color: #e8e8e8;
    background: #0a0a0c;
}

/* ---------- BACKGROUND LAYERS (cross-fade) ---------- */
.bg-layer {
    position: fixed;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease-in-out, transform 8s ease-out;
    z-index: 0;
    will-change: opacity, transform;
}
.bg-cthulhu { background-image: url('../games/cthulhu/assets/img/cthulhu.png'); opacity: 1; }
.bg-fantasy { background-image: url('../games/garden/assets/img/garden.jpg');  opacity: 0; }

body.theme-fantasy .bg-cthulhu { opacity: 0; }
body.theme-fantasy .bg-fantasy { opacity: 1; }
body.theme-cthulhu .bg-cthulhu { transform: scale(1.05); }
body.theme-fantasy .bg-fantasy { transform: scale(1.05); }

.vignette {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.78) 100%);
}

/* ---------- PARTICLES — accents calmes (pas de néon flashy) ---------- */
.particles {
    position: fixed; inset: 0; z-index: 2;
    pointer-events: none; overflow: hidden;
}
.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: float 12s linear infinite;
    transition: background 1.2s ease, box-shadow 1.2s ease;
}
body.theme-cthulhu .particle {
    background: rgba(93, 202, 165, 0.6);
    box-shadow: 0 0 8px rgba(93, 202, 165, 0.8);
}
body.theme-fantasy .particle {
    background: rgba(239, 199, 117, 0.7);
    box-shadow: 0 0 10px rgba(239, 199, 117, 0.9);
}
@keyframes float {
    0%   { transform: translateY(100vh) translateX(0);   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh)  translateX(40px); opacity: 0; }
}

/* ---------- FLASH on tab-switch ---------- */
.flash {
    position: fixed; inset: 0; z-index: 3;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.flash.active { opacity: 1; }
body.theme-cthulhu .flash.active {
    background: radial-gradient(circle at center, rgba(93, 202, 165, 0.15) 0%, transparent 60%);
}
body.theme-fantasy .flash.active {
    background: radial-gradient(circle at center, rgba(239, 199, 117, 0.18) 0%, transparent 60%);
}

/* ---------- STAGE ---------- */
.stage {
    position: relative; z-index: 5;
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 20px 40px;
}

/* ---------- TITLE ---------- */
.title-block {
    /* Largeur explicite : sans ça, .title-block se réduit à la
       largeur de son seul enfant non-absolu (.crest = 84 px) et les
       titres absolus dedans n'ont plus de place horizontale → le
       texte se casse en plusieurs lignes et on n'en voit qu'un bout. */
    width: 100%;
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
    animation: fadeInDown 1.2s ease-out;
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Crest = un médaillon avec le logo PNG du jeu actif. La taille
   est figée pour que le switch d'onglet ne fasse PAS bouger le
   titre ni le formulaire (l'image Garden est sensiblement plus
   épaisse, on la rapetisse un poil pour aligner les deux). */
.crest {
    width: 84px; height: 84px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    overflow: hidden;
    transition: border-color 1s ease, box-shadow 1s ease;
}
body.theme-cthulhu .crest {
    border-color: rgba(93, 202, 165, 0.5);
    box-shadow: 0 0 22px rgba(93, 202, 165, 0.35);
}
body.theme-fantasy .crest {
    border-color: rgba(239, 199, 117, 0.6);
    box-shadow: 0 0 22px rgba(239, 199, 117, 0.4);
}
.crest img {
    object-fit: contain;
    transition: opacity 0.4s ease;
}
.crest .crest-img--cthulhu {
    width: 64px; height: 64px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
/* Garden : un peu plus petit (le tracé déborde davantage de son
   carré que celui du Cthulhu) + inversion noir↔blanc pour que le
   logo, originalement encre noire sur fond blanc, devienne blanc
   sur fond sombre du médaillon. */
.crest .crest-img--fantasy {
    width: 54px; height: 54px;
    filter: invert(1) drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.crest .crest-img--fantasy { display: none; }
body.theme-fantasy .crest .crest-img--cthulhu { display: none; }
body.theme-fantasy .crest .crest-img--fantasy { display: block; }

/* ---------- TITRES ----------------------------------------------------
   Les deux titres sont superposés (position absolue) dans un conteneur
   .title-stack à hauteur fixe. Ils partagent donc la MÊME position
   verticale, indépendamment des métriques de leur police respective.
   La transition entre eux se fait via clip-path :
     - clic Cthulhu (onglet de gauche)  → balayage gauche → droite
     - clic Garden  (onglet de droite)  → balayage droite → gauche
   Aucun titre n'est display:none, donc l'animation peut courir sans
   sauter ni recalculer le layout.                                     */
.title-stack {
    position: relative;
    width: 100%;
    height: 72px;          /* enveloppe verticale commune aux deux */
    /* overflow:visible pour laisser respirer les halos verts/dorés
       au-delà de la boîte du stack — sinon on récupère le « cadre néon »
       que générait l'ancien clip-path en coupant le glow au bord. */
    overflow: visible;
}
.title_front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1;
    /* Anti-wrap : la calligraphie reste sur UNE ligne, peu importe la
       largeur du conteneur. */
    white-space: nowrap;
    /* Transition glissement + fondu — la direction vient de l'onglet
       cliqué : on translate dans cette direction, ce qui donne l'effet
       « les lettres arrivent depuis le côté de l'onglet ». Pas de
       clip-path, donc aucun cadre ne se découpe dans le halo. */
    transition: transform 0.7s cubic-bezier(.45,.05,.25,1),
                opacity   0.5s ease-out;
    will-change: transform, opacity;
}
.title_front b { z-index: 2; color: white; display: inline-block; }

/* État caché par défaut, décalé hors de l'axe vers le côté opposé à
   son onglet :
   - Cthulhu (onglet gauche)  caché → décalé vers la GAUCHE  + opaque 0
     → quand cthulhu redevient actif, il glisse de la gauche vers le
       centre, lettres apparaissant gauche→droite.
   - Garden  (onglet droite)  caché → décalé vers la DROITE  + opaque 0
     → quand garden redevient actif, il glisse de la droite vers le
       centre, lettres apparaissant droite→gauche.                  */
.title-cthulhu { transform: translateX(-22%); opacity: 0; }
.title-garden  { transform: translateX( 22%); opacity: 0; }

/* Thème actif → titre correspondant glissé en place + plein opaque.
   Le titre désactivé revient à son état caché (translaté + opacity 0)
   et glisse vers son côté en s'effaçant — wipe symétrique. */
body.theme-cthulhu .title-cthulhu { transform: translateX(0); opacity: 1; }
body.theme-fantasy .title-garden  { transform: translateX(0); opacity: 1; }

/* — Cthulhu : police d'origine Narkisim (chargée via @font-face en
   tête de fichier) + néon vert clignotant. On reste en weight normal :
   Narkisim n'a qu'une graisse, forcer 700 déclenche un faux-bold qui
   épaissit artificiellement le tracé et change l'allure du texte. — */
/* Taille de titre commune aux deux thèmes — sans ça la bascule
   donnait un effet « zoom » entre Narkisim 42 px et UnifrakturCook
   52 px. Maintenant les deux titres occupent la même hauteur visuelle. */
.title-cthulhu          { font-size: 48px; }
.title-cthulhu b {
    font-family: 'Narkisim', 'Georgia', serif;
    font-weight: normal;
    font-size: 48px;
    text-shadow:
        0 -40px 100px,
        0 0 2px,
        0 0 1em #1a9e12,
        0 0 0.5em #28ac4d,
        0 0 0.1em #33ff16,
        0 10px 3px #000;
}
.title-cthulhu b span { animation: blink linear infinite 2s; }
@keyframes blink {
    78%   { color: inherit; text-shadow: inherit; }
    79%   { color: #333; }
    80%   { text-shadow: none; }
    81%   { color: inherit; text-shadow: inherit; }
    82%   { color: #333; text-shadow: none; }
    83%   { color: inherit; text-shadow: inherit; }
    92%   { color: #333; text-shadow: none; }
    92.5% { color: inherit; text-shadow: inherit; }
}

/* — Garden : « Forgez votre légende », gothique enluminé.
   Reflet de flamme qui glisse sur la lame : un dégradé or de 250 %
   de large parcourt le glyphe via background-clip:text, en
   ping-pong (animation-direction: alternate) pour éviter la coupure
   en fin de cycle.
   Pour rester lisible quand le faisceau lumineux n'est PAS sur une
   lettre (c.-à-d. quand le dégradé est sur ses tons sombres), on
   ajoute un petit contour clair via -webkit-text-stroke : il dessine
   le profil du glyphe en or pâle, indépendamment du dégradé qui se
   peint à l'intérieur.                                               */
/* UnifrakturCook a une hauteur de capitale plus courte que Narkisim
   à valeur `font-size` égale — ce qui faisait paraître « Forgez »
   plus petit que « Entrez » à 48 px. On compense en augmentant la
   taille spécifiquement sur le titre Garden pour aligner la hauteur
   visuelle réelle des deux titres. */
.title-garden          { font-size: 56px; letter-spacing: 1px; }
.title-garden b {
    /* UnifrakturCook a un descender plus profond que Narkisim, ce qui
       fait visuellement « tomber » le titre Garden de ~10 px sous la
       ligne de base d'« Entrez ». On le remonte via margin-top négatif
       sans toucher au transform (qui sert à la wipe horizontale). */
    margin-top: -10px;
    font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
    font-weight: 700;
    background: linear-gradient(
        110deg,
        #b07a16 0%,
        #d6a437 28%,
        #ffd76a 47%,
        #fff5cc 50%,
        #ffd76a 53%,
        #d6a437 72%,
        #b07a16 100%
    );
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    /* Contour fin or-pâle : reste visible peu importe la position du
       reflet, sans alourdir le tracé de la calligraphie gothique. */
    -webkit-text-stroke: 0.7px rgba(255, 230, 150, 0.6);
    filter:
        drop-shadow(0 0 0.35em rgba(255, 196, 96, 0.55))
        drop-shadow(0 0 1.2em rgba(232, 120, 44, 0.35))
        drop-shadow(0 6px 8px rgba(0,0,0,0.6));
    animation: blade-shine 9s ease-in-out infinite alternate;
}
/* Spans : on coupe juste le blink hérité, le remplissage transparent
   et le contour s'héritent naturellement. */
.title-garden b span { animation: none; }

@keyframes blade-shine {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
}

/* (les anciennes bascules display:none/block ont été remplacées plus
   haut par la transition clip-path — les deux titres restent toujours
   en DOM, à la même position, et c'est le clip qui les révèle.) */

/* ---------- CARD ---------- */
.card {
    width: 460px;
    max-width: calc(100vw - 40px);
    background: transparent;
    padding: 0;
    animation: fadeInUp 1.2s ease-out 0.2s both;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- TABS — pas d'icône, juste un grand titre stylisé ---------- */
.tabs { display: flex; position: relative; }
.tab {
    flex: 1;
    /* Hauteur STRICTEMENT fixe pour les deux onglets : sans ça
       UnifrakturCook (Garden, ascendantes plus hautes) rend la rangée
       plus grande que Cormorant Italic (Cthulhu) et le formulaire
       saute verticalement au changement d'onglet. */
    height: 92px;
    padding: 10px 10px;
    text-align: center;
    cursor: pointer;
    color: #b8b0a0;
    background: rgba(0, 0, 0, 0.55);
    border: 0 solid transparent;
    border-radius: 6px 6px 0 0;
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.tab-title {
    display: flex; flex-direction: column; align-items: center;
    line-height: 1.05;
    gap: 2px;
}
.tab-line {
    display: block;
    white-space: nowrap;
    transition: text-shadow 0.5s ease, opacity 0.4s ease;
}

/* Cthulhu — serif italique antique. Petit lead, gros nom propre. */
.tab--cthulhu .tab-line--lead {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    font-size: 16px; font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.tab--cthulhu .tab-line--name {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    font-size: 26px; font-weight: 700;
    letter-spacing: 0.03em;
}

/* Garden — gothique enluminé. Lead lyrique, nom propre en grand. */
.tab--garden .tab-line--lead {
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    font-size: 16px; font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.tab--garden .tab-line--name {
    font-family: 'UnifrakturCook', 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 700;
    letter-spacing: 0.01em;
}

/* Onglet inactif */
.tab:not(.active) {
    border-radius: 0;
    background: rgba(40, 40, 45, 0.75);
    color: #b8b0a0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
}
body.theme-cthulhu .tab:not(.active) { border-bottom-color: #5dcaa5; }
body.theme-fantasy .tab:not(.active) { border-bottom-color: #efc775; }
.tab:not(.active):hover {
    background: rgba(55, 55, 60, 0.85);
    color: #d8d2c2;
}

/* Onglet actif : néon top/left/right, sans cadre lourd */
.tab.active {
    clip-path: inset(-40px -40px 0 -40px);
    z-index: 5;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    border-top-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}
body.theme-cthulhu .tab.active {
    background: rgba(20, 55, 47, 0.92);
    color: #b9ecd6;
    border-top-color:   #5dcaa5;
    border-left-color:  #5dcaa5;
    border-right-color: #5dcaa5;
    box-shadow:
        0 -6px 20px rgba(93, 202, 165, 0.4),
        -6px 0 20px rgba(93, 202, 165, 0.4),
        6px 0 20px rgba(93, 202, 165, 0.4);
}
body.theme-fantasy .tab.active {
    background: rgba(70, 45, 15, 0.92);
    color: #f6dca8;
    border-top-color:   #efc775;
    border-left-color:  #efc775;
    border-right-color: #efc775;
    box-shadow:
        0 -6px 20px rgba(239, 199, 117, 0.4),
        -6px 0 20px rgba(239, 199, 117, 0.4),
        6px 0 20px rgba(239, 199, 117, 0.4);
}

/* ---------- FORM ---------- */
.form {
    padding: 28px 32px 30px;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-radius: 0 0 6px 6px;
    position: relative;
    z-index: 1;
    clip-path: inset(0 -40px -40px -40px);
    transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
body.theme-cthulhu .form {
    background: rgba(20, 55, 47, 0.92);
    border-color: #5dcaa5;
    box-shadow:
        0 8px 25px rgba(93, 202, 165, 0.4),
        -8px 0 25px rgba(93, 202, 165, 0.4),
        8px 0 25px rgba(93, 202, 165, 0.4);
}
body.theme-fantasy .form {
    background: rgba(70, 45, 15, 0.92);
    border-color: #efc775;
    box-shadow:
        0 8px 25px rgba(239, 199, 117, 0.4),
        -8px 0 25px rgba(239, 199, 117, 0.4),
        8px 0 25px rgba(239, 199, 117, 0.4);
}

.error-message {
    text-align: center;
    color: #ff6868;
    font-size: 14px;
    margin-bottom: 14px;
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
}

.field { position: relative; margin-bottom: 14px; }
.field-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.3s, stroke 0.3s;
}
body.theme-cthulhu .field-icon { stroke: #b9ecd6; }
body.theme-fantasy .field-icon { stroke: #f6dca8; }

.field input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 4px;
    color: #f0e9d8;
    font-size: 15px;
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    outline: none;
    transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.field input::placeholder {
    color: #7a7466;
    font-style: italic;
}
body.theme-cthulhu .field input:focus {
    border-color: #5dcaa5;
    box-shadow: 0 0 0 3px rgba(93, 202, 165, 0.18);
}
body.theme-fantasy .field input:focus {
    border-color: #efc775;
    box-shadow: 0 0 0 3px rgba(239, 199, 117, 0.18);
}
.eye {
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.5;
    background: none; border: none;
    padding: 4px;
    transition: opacity 0.2s;
}
.eye:hover { opacity: 1; }

/* ---------- CTA ---------- */
.cta {
    width: 100%;
    padding: 14px;
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; letter-spacing: 0.32em;
    font-weight: 700;
    text-transform: uppercase;
    color: #0a0a0c;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.5s, box-shadow 0.5s, transform 0.15s;
}
body.theme-cthulhu .cta {
    background: linear-gradient(180deg, #6dd9b3 0%, #1d9e75 100%);
    box-shadow: 0 4px 20px rgba(93, 202, 165, 0.35);
}
body.theme-fantasy .cta {
    background: linear-gradient(180deg, #f5d68a 0%, #c98e1f 100%);
    box-shadow: 0 4px 20px rgba(239, 199, 117, 0.4);
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}
.cta:hover::before { left: 100%; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 520px) {
    .title-cthulhu       { font-size: 34px; }
    .title-cthulhu b     { font-size: 34px; letter-spacing: 4px; }
    .title-garden        { font-size: 42px; }
    .form                { padding: 22px; }
    .card                { width: 100%; }
    .crest               { width: 70px; height: 70px; }
    .crest .crest-img--cthulhu { width: 52px; height: 52px; }
    .crest .crest-img--fantasy { width: 44px; height: 44px; }
    .tab                 { min-height: 76px; }
    .tab--cthulhu .tab-line--name { font-size: 22px; }
    .tab--garden  .tab-line--name { font-size: 18px; }
    .tab--cthulhu .tab-line--lead,
    .tab--garden  .tab-line--lead { font-size: 14px; }
}