/* ============================================================
   TAROT — theme "eternel" : bleu glacier sur noir, carre et pro,
   avec une part de mystere mystique. Geometrie intemporelle :
   cadres carres en rotation lente, faisceau de lumiere rotatif
   au centre derriere le paquet, brume froide, poussieres d'etoiles.

   La carte se presente DOS visible ; un clic la revele. Chaque
   tirage retourne la carte : dos + loader tant que la nouvelle
   image n'est pas chargee, puis revelation.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700;800&display=swap');

:root {
    --night: #04070b;
    --deep: #0a1523;
    --ice: #9fd4ff;
    --ice-hi: #dbf1ff;
    --ice-dim: rgba(159, 212, 255, 0.30);
    --ice-faint: rgba(159, 212, 255, 0.13);
    --text: #e8f4ff;
    --muted: #7e9cb8;
    --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    /*background:
        radial-gradient(ellipse at 50% 115%, rgba(120, 180, 255, 0.06), transparent 55%),
        radial-gradient(ellipse at 50% -10%, var(--deep), var(--night) 65%); */
    background-color: rgb(0, 0, 0);
    color: var(--text);
    font-family: var(--serif);
    /* Page plein ecran, jamais de barre de scroll : le flip 3D (projection
       en perspective) et le halo central creaient un debordement temporaire. */
    overflow: hidden;
}

/* ------------------------------------------------------------
   Brume froide : nappes bleues qui derivent, hors du temps
   ------------------------------------------------------------ */
.fog {
    position: fixed;
    inset: -35%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(34% 26% at 30% 36%, rgba(70, 130, 220, 0.12), transparent 70%),
        radial-gradient(30% 24% at 72% 26%, rgba(40, 90, 160, 0.15), transparent 70%),
        radial-gradient(30% 26% at 58% 78%, rgba(110, 190, 255, 0.06), transparent 70%);
    animation: fog-drift 34s ease-in-out infinite alternate;
}
@keyframes fog-drift {
    from { transform: translate(-2%, -1%) rotate(-2deg) scale(1); }
    to   { transform: translate(2.5%, 2%) rotate(2deg) scale(1.07); }
}

/* ------------------------------------------------------------
   Poussieres d'etoiles qui montent lentement
   ------------------------------------------------------------ */
.dust {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.3px 1.3px at 40px 60px,   rgba(219, 241, 255, 0.8),  transparent 50%),
        radial-gradient(1px 1px     at 150px 190px, rgba(219, 241, 255, 0.5),  transparent 50%),
        radial-gradient(1.6px 1.6px at 230px 90px,  rgba(159, 212, 255, 0.6),  transparent 50%),
        radial-gradient(1px 1px     at 90px 260px,  rgba(219, 241, 255, 0.45), transparent 50%),
        radial-gradient(1.2px 1.2px at 300px 220px, rgba(159, 212, 255, 0.5),  transparent 50%);
    background-size: 340px 340px;
    animation: dust-rise 70s linear infinite;
    opacity: 0.8;
}
@keyframes dust-rise {
    from { background-position: 0 0; }
    to   { background-position: -60px -680px; }
}

/* ------------------------------------------------------------
   Barre du haut : "LeBonJeu" (JetBrains) centre, lien vers l'accueil.
   ------------------------------------------------------------ */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 46px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    /*background: rgba(6, 12, 22, 0.88);*/
    /*border-bottom: 1px solid var(--ice-faint);*/
    /*backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); */
}
.topbar a { text-decoration: none; }

.home-brand {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    /*font-weight: 800;*/
    font-size: 16px;
    letter-spacing: 0.5px;
    color: rgb(210, 210, 210);
    white-space: nowrap;
    transition: color .15s, text-shadow .15s;
}
.home-brand:hover { color: #fff; text-shadow: 0 0 18px rgba(159, 212, 255, 0.55); }

/* ------------------------------------------------------------
   Mise en page
   ------------------------------------------------------------ */
.scene {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vh, 26px);
    padding: calc(46px + 18px) 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
/* Desktop : contenu legerement remonte (le centrage strict parait bas).
   La borne de hauteur de la carte integre ce decalage pour ne jamais
   etre coupee (la page ne defile pas). */
@media (min-width: 641px) {
    .scene { padding-bottom: calc(10vh + 18px); }
    .card-front img { width: min(74vw, 330px, calc((90vh - 240px) * 0.57)); }
    body.has-meaning .card-front img { width: min(74vw, 330px, calc((90vh - 300px) * 0.57)); }
}

/* ------------------------------------------------------------
   Titre
   ------------------------------------------------------------ */
.head { text-align: center; animation: appear 1s ease both; }
.head .orn {
    font-size: 13px;
    letter-spacing: 6px;
    color: var(--ice-dim);
}
h1 {
    margin: 8px 0 6px;
    font-size: clamp(40px, 9vw, 60px);
    font-weight: 500;
    letter-spacing: 10px;
    text-transform: uppercase;
    text-indent: 10px; /* compense le letter-spacing pour centrer */
    background: linear-gradient(180deg, var(--ice-hi) 15%, var(--ice) 55%, #4a7ba8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 18px 50px rgba(159, 212, 255, 0.18);
}
.head .sub {
    margin: 0;
    font-style: italic;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 1px;
}

/* ------------------------------------------------------------
   L'autel : faisceau rotatif + cadres carres + carte
   ------------------------------------------------------------ */
.altar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
    animation: appear 1.2s ease .15s both;
}

/* Faisceau de lumiere rotatif au centre, derriere le paquet */
.beam {
    position: absolute;
    top: 50%; left: 50%;
    width: min(150vw, 720px);
    height: min(150vw, 720px);
    margin: calc(min(150vw, 720px) / -2) 0 0 calc(min(150vw, 720px) / -2);
    pointer-events: none;
    background: conic-gradient(
        transparent 0deg,
        rgba(159, 212, 255, 0.10) 18deg,
        transparent 44deg,
        transparent 118deg,
        rgba(159, 212, 255, 0.07) 142deg,
        transparent 168deg,
        transparent 236deg,
        rgba(159, 212, 255, 0.09) 260deg,
        transparent 286deg
    );
    -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 76%);
            mask: radial-gradient(closest-side, #000 18%, transparent 76%);
    animation: beam-spin 26s linear infinite;
}
@keyframes beam-spin { to { transform: rotate(360deg); } }

/* Coeur lumineux qui respire, au centre du faisceau */
.beam::after {
    content: "";
    position: absolute;
    inset: 30%;
    background: radial-gradient(circle, rgba(159, 212, 255, 0.15), transparent 65%);
    animation: heart 8s ease-in-out infinite;
}
@keyframes heart {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.12); }
}

/* Support de la carte : c'est LUI qui porte la perspective
   (parent direct du flip, indispensable pour un vrai 3D). */
.float {
    perspective: 1200px;
}

/* ------------------------------------------------------------
   La carte : deux faces, retournement 3D pilote par le JS
   (rotation cumulative, dos = 0deg, face = 180deg).
   Carre : aucun arrondi, double cadre net.
   ------------------------------------------------------------ */
.card-wrap {
    --thick: 12px;                /* epaisseur de la carte (volume) */
    position: relative;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.32, 0.04, 0.2, 1);
    will-change: transform;
}

/* Les deux faces sont ecartees de part et d'autre du plan central :
   la carte a une vraie epaisseur, visible pendant le retournement. */
.card-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Face avant (l'arcane) : dans le flux, donne sa taille au paquet.
   Cachee au depart (tournee a 180deg). */
.card-front { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); }
.card-front img {
    display: block;
    /* Largeur bornee aussi par la HAUTEUR d'ecran (ratio carte ~0.57) :
       titre + carte + invite tiennent toujours sans defilement. */
    width: min(74vw, 330px, calc((100vh - 240px) * 0.57));
    height: auto;
    border: 1px solid rgba(159, 212, 255, 0.55);
    outline: 1px solid var(--ice-faint);
    outline-offset: 6px;
    box-shadow:
        0 0 46px rgba(39, 120, 187, 0.14),
        0 34px 70px rgba(59, 139, 192, 0.7);
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Face arriere : dos de carte dessine en CSS — noir quadrille,
   double cadre, embleme de l'infini */
.card-back {
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--thick) / 2));
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(159, 212, 255, 0.08), transparent 62%),
        repeating-linear-gradient(0deg,  rgba(159, 212, 255, 0.05) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(159, 212, 255, 0.05) 0 1px, transparent 1px 12px),
        linear-gradient(170deg, #0b1826, #05090f);
    border: 1px solid rgba(159, 212, 255, 0.55);
    outline: 1px solid var(--ice-faint);
    outline-offset: 6px;
    box-shadow:
        0 0 46px rgba(159, 212, 255, 0.14),
        0 34px 70px rgba(0, 0, 0, 0.7),
        inset 0 0 0 8px var(--night),
        inset 0 0 0 9px var(--ice-dim);
}

/* Embleme central : l'infini dans un carre tourne a 45deg */
.back-emblem {
    position: relative;
    width: 44%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(159, 212, 255, 0.45);
    transform: rotate(45deg);
   /* box-shadow: inset 0 0 0 6px var(--night), inset 0 0 0 7px var(--ice-faint);*/
}
.back-emblem span {
    transform: rotate(-45deg);   /* l'infini reste droit */
    font-size: clamp(34px, 10vw, 52px);
    color: var(--ice);
    text-shadow: 0 0 14px rgba(159, 212, 255, 0.6);
}
/* Reperes aux angles haut/bas du dos */
.back-emblem::before, .back-emblem::after {
    content: "\2726"; /* ✦ */
    position: absolute;
    font-size: 12px;
    color: var(--ice-dim);
    transform: rotate(-45deg);
}
.back-emblem::before { top: -42px; left: 50%; margin-left: -6px; }
.back-emblem::after  { bottom: -42px; left: 50%; margin-left: -6px; }

/* Tranches de la carte : ferment le volume entre les deux faces.
   Texture de fines strates, comme des couches de carton empilees. */
.card-side {
    position: absolute;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    box-shadow: inset 0 0 0 1px rgba(159, 212, 255, 0.30);
}
.side-l, .side-r {
    top: 0; bottom: 0;
    width: var(--thick);
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #24405e, #122740 55%, #0a1626);
}
.side-l { left:  calc(var(--thick) / -2); transform: rotateY(90deg); }
.side-r { right: calc(var(--thick) / -2); transform: rotateY(90deg); }
.side-t, .side-b {
    left: 0; right: 0;
    height: var(--thick);
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #122740, #24405e 50%, #122740);
}
.side-t { top:    calc(var(--thick) / -2); transform: rotateX(90deg); }
.side-b { bottom: calc(var(--thick) / -2); transform: rotateX(90deg); }

/* Loader : carre qui tourne, visible pendant le chargement */
.loader {
    position: absolute;
    left: 50%; bottom: 10%;
    width: 20px; height: 20px;
    margin-left: -10px;
    border: 2px solid rgba(159, 212, 255, 0.20);
    border-top-color: var(--ice);
    opacity: 0;
    transition: opacity .25s ease;
    animation: loader-spin 1s linear infinite;
}
.card-wrap.loading .loader { opacity: 1; }
@keyframes loader-spin { to { transform: rotate(360deg); } }


/* ------------------------------------------------------------
   Invite
   ------------------------------------------------------------ */
.hint {
    margin: 0;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: var(--muted);
    animation: appear 1.2s ease 0.35s both, breathe 4s ease-in-out 2s infinite;
}
.hint .star { color: var(--ice-dim); font-style: normal; margin: 0 8px; }
@keyframes breathe {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.empty { color: var(--muted); font-style: italic; }

@keyframes appear {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Signification de la carte revelee (option $SHOW_MEANINGS)
   Plaque 3D avec volume extrude, comme la carte : deux faces
   (texte / dos) + quatre tranches. Revelee par un flip horizontal.
   ------------------------------------------------------------ */
.meaning {
    /* Conteneur : positionne en absolu sous la carte (hors du flux) :
       la position de la carte ne bouge pas, que la plaque soit la ou non.
       Porte la perspective du flip 3D. */
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    /* Meme largeur que la carte : .altar prend la largeur de la carte,
       donc 100% = largeur de la carte, a tous les breakpoints. */
    width: 100%;
    transform: translateX(-50%);
    perspective: 1100px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.meaning.show { opacity: 1; }

/* La plaque qui se retourne : flip VERTICAL (axe X).
   Dos visible (-180deg) -> face texte (0deg). */
.meaning-card {
    --mthick: 10px;              /* epaisseur de la plaque */
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-180deg);
    transition: transform .8s cubic-bezier(0.32, 0.04, 0.2, 1);
    will-change: transform;
}
.meaning.show .meaning-card {
    transform: rotateX(0deg);
    animation: meaning-glow 2.4s ease-in-out .6s both;
}

/* Faces : fond et cadre identiques au dos de carte */
.mc-front, .mc-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(159, 212, 255, 0.10), transparent 62%),
        repeating-linear-gradient(0deg,  rgba(159, 212, 255, 0.05) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(159, 212, 255, 0.05) 0 1px, transparent 1px 12px),
        linear-gradient(170deg, #0b1826, #05090f);
    border: 1px solid rgba(159, 212, 255, 0.55);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.6),
        inset 0 0 0 6px var(--night),
        inset 0 0 0 7px var(--ice-dim);
}
/* Face texte : dans le flux, donne sa taille a la plaque */
.mc-front {
    position: relative;
    padding: 15px 24px 16px;
    text-align: center;
    transform: translateZ(calc(var(--mthick) / 2));
}
/* Petits reperes ✦ aux extremites de la face texte */
.mc-front::before, .mc-front::after {
    content: "\2726";
    position: absolute;
    top: 50%;
    font-size: 11px;
    color: var(--ice-dim);
    transform: translateY(-50%);
}
.mc-front::before { left: 10px; }
.mc-front::after  { right: 10px; }

/* Face dos : cachee au repos (rotee a 180deg), embleme central */
.mc-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateX(180deg) translateZ(calc(var(--mthick) / 2));
    /* Dos gris (au lieu du degrade bleu de la face texte) */
    background:
        repeating-linear-gradient(0deg,  rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 12px),
        linear-gradient(170deg, #3a3f47, #23262c);
    border: 1px solid rgba(200, 205, 215, 0.35);
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.6),
        inset 0 0 0 6px #23262c,
        inset 0 0 0 7px rgba(200, 205, 215, 0.25);
    color: rgba(220, 224, 230, 0.55);
    font-size: 22px;
}

/* Tranches : ferment le volume de la plaque (memes strates que la carte) */
.mc-side {
    position: absolute;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
.ms-l, .ms-r {
    top: 0; bottom: 0;
    width: var(--mthick);
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #24405e, #122740 55%, #0a1626);
}
.ms-l { left:  calc(var(--mthick) / -2); transform: rotateY(90deg); }
.ms-r { right: calc(var(--mthick) / -2); transform: rotateY(90deg); }
.ms-t, .ms-b {
    left: 0; right: 0;
    height: var(--mthick);
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, #122740, #24405e 50%, #122740);
}
.ms-t { top:    calc(var(--mthick) / -2); transform: rotateX(90deg); }
.ms-b { bottom: calc(var(--mthick) / -2); transform: rotateX(90deg); }

/* Lueur de bordure qui pulse une fois a l'apparition (rituel devoile) */
@keyframes meaning-glow {
    0%   { box-shadow: 0 0 0 0 rgba(159, 212, 255, 0); }
    35%  { box-shadow: 0 0 44px 2px rgba(159, 212, 255, 0.28); }
    100% { box-shadow: 0 0 0 0 rgba(159, 212, 255, 0); }
}

.m-name {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ice-hi);
    text-shadow: 0 0 14px rgba(159, 212, 255, 0.45);
    margin-bottom: 7px;
}
.m-text {
    display: block;
    font-style: italic;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}

/* Quand la signification est activee, la carte cede un peu de hauteur
   pour que tout tienne a l'ecran (la page ne defile jamais). */
body.has-meaning .card-front img {
    width: min(74vw, 330px, calc((100vh - 320px) * 0.57));
}

/* ------------------------------------------------------------
   Petits ecrans
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    /* Topbar plus compacte */
    .topbar { height: 44px; padding: 0 12px; }
    .home-brand { font-size: 15px; }
    /* Contenu remonte : padding bas important -> le groupe carte+plaque
       (centre) glisse vers le haut de l'ecran. */
    .scene {
        padding-top: calc(44px + 10px);
        padding-bottom: 24vh;
    }

    /* Cartes plus grandes sur mobile */
    .card-wrap { --thick: 10px; }
    .card-front img {
        width: min(80vw, 340px, calc((100vh - 230px) * 0.57));
    }
    body.has-meaning .card-front img {
        width: min(80vw, 340px, calc((100vh - 300px) * 0.57));
    }
    .m-text { font-size: 12px; }
    .beam {
        width: min(120vw, 480px);
        height: min(120vw, 480px);
        margin: calc(min(120vw, 480px) / -2) 0 0 calc(min(120vw, 480px) / -2);
    }
}

@media (max-width: 420px) {
    h1 { letter-spacing: 7px; text-indent: 7px; }
    .scene { gap: 16px; padding-bottom: 22vh; }
    .home-brand { font-size: 12px; }
    .card-front img {
        width: min(78vw, 300px, calc((100vh - 220px) * 0.57));
    }
    body.has-meaning .card-front img {
        width: min(78vw, 300px, calc((100vh - 290px) * 0.57));
    }
}

/* ------------------------------------------------------------
   Accessibilite : mouvement reduit
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fog, .dust, .beam, .beam::after,
    .head, .altar, .hint {
        animation: none !important;
    }
    .card-wrap { transition: none !important; }
    .meaning { transition: none !important; }
    .meaning-card { transition: none !important; transform: rotateY(0deg) !important; animation: none !important; }
}