/* ---------------------------------------------------------------------------
   Motchi : l'accueil (lot 4).

   La maison des modes : un en-tête, puis une carte par mode. Ce n'est pas du
   socle, parce que rien de tout cela ne se réemploie ailleurs : la carte de
   mode elle-même est un composant (`.ui-mode-card`, sa couleur et son
   dégradé), mais la façon de la remplir appartient à cet écran.

   Les tailles sont relevées sur le proto en styles calculés (pastilles de
   44 px, bouton de 55 px, liens sur deux colonnes soulignées, pastille de
   coin arrondie en gélule, rayons de 340 px derrière la mascotte), et reportées
   sur l'échelle des jetons quand elles tombent entre deux marches. Les seules
   valeurs remontées sont les textes que le proto écrit en 10 et 12 px, sous le
   plancher de l'échelle.

   Les règles du socle valent ici : toute encre est un jeton, donc mesurée, et
   aucune valeur de couleur n'est écrite en clair. Les voiles font exception,
   un blanc translucide étant une transparence et non une teinte, et les formes
   d'un masque ne sont pas des encres : elles découpent, elles ne peignent pas.
--------------------------------------------------------------------------- */

/* ── L'ouverture ──
   Centrée, comme le proto : elle nomme la maison et pose la question à
   laquelle les deux cartes répondent. */
.home-intro {
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-6);
}
.home-intro .ui-hint { max-width: 62ch; }

/* Le pseudo reste dans le fil du titre au lieu de prendre une ligne à lui :
   « À quoi joue-t-on, Camille ? » tient sur une ligne, et ne se coupe que si le
   pseudo est long. `balance` répartit alors les lignes plutôt que de laisser un
   mot seul en dessous, et `anywhere` sur le pseudo l'empêche de déborder de
   l'écran : trente caractères sans espace ne trouvent sinon aucun endroit où se
   couper, et la page se met à défiler de côté. La moitié dorée garde sa ligne
   partout ailleurs, où elle coupe une phrase et non un nom. */
.home-intro .ui-title { text-wrap: balance; }
.home-intro .ui-title-accent { display: inline; overflow-wrap: anywhere; }

.home-modes { display: grid; gap: var(--space-5); }

/* ── Une carte de mode ──
   Sur un téléphone, le corps occupe toute la carte et la mascotte est posée
   par-dessus, en haut à droite : elle est hors du flux pour que le bouton
   garde toute la largeur, ce qui est aussi la plus grande cible possible au
   pouce. */
.home-mode { position: relative; padding: var(--space-4); }

.mode-card-body { display: flex; flex-direction: column; gap: var(--space-4); }

/* Ce qui se trouve à hauteur de la mascotte s'en écarte : le surtitre, le
   titre, et sur la carte d'un défi terminé le score et sa phrase, qui prennent
   leur place. Le reste passe dessous, où elle n'est plus. */
.home-mode .ui-eyebrow,
.home-mode .ui-title,
.home-mode .mode-card-score,
.home-mode[data-state="completed"] .mode-card-lead { padding-right: 84px; }

/* La mascotte tient dans une boîte et non l'inverse : les poses du proto sont
   des portraits (427x640) qu'il pose dans un cadre au format de la carte, en
   `contain`. Sans le cadre, la carte prend la hauteur de l'image. */
.mode-card-art {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 64px;
    height: 76px;
}
/* Le `<picture>` n'est qu'un aiguillage : il ne doit pas s'interposer entre le
   cadre et l'image, sans quoi la hauteur en pourcentage n'a plus de repère et
   l'illustration disparaît. */
.mode-card-art picture { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.mode-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* La scène des indices, posée dans un cadre plus grand qu'elle : sur un
   téléphone, la mascotte se range en bas à droite et laisse l'ampoule tenir
   au-dessus de sa tête plutôt que dessus. Sa lueur n'a rien à éclairer ici,
   l'ampoule n'étant pas dessinée sur la mascotte. */
.mode-card-art .ui-scene { position: absolute; right: 0; bottom: 0; width: 58px; height: 58px; aspect-ratio: auto; }
.mode-card-art .ui-scene-glow { display: none; }

/* ── Le repli d'un téléphone ──
   La description, les pastilles et le rappel du lendemain se replient sous le
   seuil : deux modes et deux boutons doivent tenir dans la hauteur visible. Le
   serveur rend le panneau ouvert et le bouton caché, et c'est le contrôleur
   `fold` qui referme sur un écran étroit : sans JavaScript, tout se lit et il
   n'y a pas de commande morte.

   Le bouton est sous les actions, comme le proto le pose, et le panneau
   au-dessus d'elles : c'est ce qui interdit le `<details>`, dont le
   `<summary>` ouvre forcément ce qui le suit. */
.mode-card-detail { display: flex; flex-direction: column; gap: var(--space-6); }
.mode-card-detail[hidden] { display: none; }

.mode-card-more {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--light-sub);
    font-family: var(--font-text);
    font-size: var(--type-sm);
    font-weight: 900;
    cursor: pointer;
}
.mode-card-more[hidden] { display: none; }
.mode-card-more:hover { color: var(--light); }
.mode-card-more:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }

.mode-card-more-sign {
    width: 22px;
    height: 22px;
    position: relative;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    transition: transform var(--dur-fast) ease;
}
.mode-card-more-sign::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.mode-card-more[aria-expanded="true"] .mode-card-more-sign { transform: rotate(180deg); }

.mode-card-lead { max-width: 62ch; }

/* ── Les pastilles ──
   Des faits sur le mode, chacun dans sa tuile voilée : un chiffre en tête
   quand il y en a un, et ce qu'il compte en dessous. Deux par ligne sur un
   téléphone, sauf quand il y en a trois, qui se partagent alors la largeur. */
.mode-card-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
}
.mode-card-pills[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Le contenu est centré dans les deux sens et non aligné sur une ligne de
   base : les libellés n'ont pas la même longueur, donc pas le même nombre de
   lignes, et une ligne de base commune posait le texte court en haut d'une
   pastille aussi haute que sa voisine. Une hauteur minimale les tient égales
   même quand aucun ne passe à la ligne. */
.mode-card-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--space-2);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .08);
    color: var(--light-sub);
    font-size: var(--type-sm);
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
}
.mode-card-pill b {
    font-family: var(--font-title);
    font-size: var(--type-card);
    font-weight: 600;
    color: var(--light);
}

/* ── Ce que la journée réserve ──
   En pleine largeur sous les pastilles sur un téléphone, dans le coin de la
   carte au large : le proto la pose aux deux endroits selon la place. */
.mode-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, .28);
    color: var(--light);
}
.mode-card-badge small { display: block; font-size: var(--type-label); color: var(--light-sub); }
.mode-card-badge b { display: block; font-family: var(--font-title); font-size: var(--type-label); font-weight: 600; }
.mode-card-badge svg { flex: none; }

/* ── Les secondes lectures ──
   Deux liens soulignés, côte à côte. Ce ne sont pas des boutons : une carte a
   une action et une seule. */
.mode-card-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: 0;
}
/* Les liens viennent du socle : leur encre, leur souligné et leurs états sont
   ceux de la variante. L'écran ne décide que de leur place, et de la largeur
   qu'ils prennent dans leur colonne : un souligné qui s'arrête au milieu d'une
   cellule ressemble à une colonne vide. */
.mode-card-links a { width: 100%; }
.mode-card-links a:only-child { grid-column: 1 / -1; }
.mode-card-links svg { flex: none; opacity: .9; }

/* ── L'ampoule et ses halos ──
   Le proto anime deux lueurs : des rayons qui tournent derrière la mascotte du
   Défi, et une ampoule qui bat au-dessus de la scène des indices. Elles sont
   décoratives, donc elles s'arrêtent quand le système demande moins de
   mouvement (plus bas). L'ampoule est dessinée sur un téléphone, où la scène
   n'est pas montrée ; au large, c'est la scène qui la porte et l'on ne pose
   que sa lueur. */
.mode-card-bulb {
    position: absolute;
    z-index: 3;
    top: -4px;
    left: 20px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: var(--gold);
    color: var(--on-gold);
}
.mode-card-bulb::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--gold) 68%, transparent),
        color-mix(in srgb, var(--gold) 18%, transparent) 52%,
        transparent 72%
    );
    animation: mode-card-halo 2.6s ease-in-out infinite;
}

.mode-card-rays { display: none; }

@keyframes mode-card-rays { to { transform: rotate(360deg); } }
@keyframes mode-card-halo {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.16); }
}

/* ── La carte du défi terminé ──
   Le score est le titre de cette carte : il prend la taille d'un titre, et son
   dénominateur reste petit, parce qu'il ne se lit qu'une fois. */
.mode-card-score {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-family: var(--font-title);
    color: var(--light);
}
.mode-card-score b { font-size: var(--type-metric); font-weight: 700; line-height: 1; }
.mode-card-score small { font-size: var(--type-card); color: var(--light-sub); }

/* Autant de colonnes que de tuiles : un invité n'a pas de rang, et celle qui
   reste prend alors toute la largeur plutôt que de laisser un trou à côté. */
.mode-card-figures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }

/* Le compte d'indices est un chiffre, creusé dans le feutre : le proto l'y pose
   en voile sombre, et garde le relief pour ce qui distingue. */
.mode-card-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-0);
    margin: 0;
    padding: var(--space-3) var(--space-2);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, .22);
    text-align: center;
}
.mode-card-figure b { font-family: var(--font-title); font-size: var(--type-card); font-weight: 600; color: var(--light); }
.mode-card-figure .ui-eyebrow { color: var(--light-sub); }

/* Le rang est une médaille : claire, en relief, et son étiquette au-dessus du
   palier, parce que c'est « Argent » qui se lit et non le mot « rang ». */
.mode-card-figure.is-rank {
    border-color: var(--paper-border);
    background: linear-gradient(145deg, var(--cream), var(--cream-2));
    box-shadow: inset 0 4px 0 rgba(0, 0, 0, .1), var(--shadow-felt-md);
}
.mode-card-figure.is-rank b { color: var(--ink); }
.mode-card-figure.is-rank .ui-eyebrow { color: var(--cream-sub); }

/* ── Au-delà du téléphone ──
   La mise en page du proto : le corps à gauche, la mascotte (ou la scène) dans
   sa colonne à droite, et les actions alignées sur une même largeur. Le seuil
   est celui de la coquille, pour que la page change de forme d'un seul coup. */
/* ── Le défi terminé : une bande, pas une carte ──
   Le mode est joué et il ne reste qu'à relire son score : le bloc rend sa
   hauteur à ce que le joueur cherche ensuite, les parties entre amis. C'est le
   dessin du proto (`hub-home-complete`), qui la tient sur une seule ligne.

   Sur un téléphone, la mascotte reste à côté du score et les tuiles passent
   dessous : ce qui doit tenir dans la largeur du pouce, ce sont les tuiles et
   les boutons, pas le portrait. */
.home-complete {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
        "seal copy"
        "stats stats"
        "actions actions";
    align-items: center;
    gap: var(--space-4) var(--space-4);
}

/* La mascotte est dans le flux ici, et non posée dans le coin : rien n'a donc
   à lui réserver de marge. */
.home-complete .ui-eyebrow,
.home-complete .mode-card-score,
.home-complete .mode-card-lead { padding-right: 0; }

.home-complete-seal { grid-area: seal; width: 76px; height: 84px; }
.home-complete-seal .ui-mascot { width: 100%; height: 100%; }

.home-complete-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.home-complete-stats { grid-area: stats; }

.home-complete-actions {
    grid-area: actions;
    display: grid;
    gap: var(--space-3);
    align-content: center;
}

/* Le partage à la place que le proto lui donne sous le bouton doré : un voile
   clair, discret, plus court que l'action principale au-dessus. */
.daily-share-compact {
    display: block;
    width: 100%;
    padding: var(--space-2);
    font-family: var(--font-text);
    font-size: var(--type-sm);
    font-weight: 900;
    color: var(--light);
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.daily-share-compact:hover { background: rgba(255, 255, 255, .12); }
.daily-share-compact:focus-visible { outline: none; box-shadow: var(--ring); }

.home-complete-register { grid-template-columns: 1fr; }

@media (min-width: 900px) {

    /* Quatre colonnes sur une ligne : la mascotte du palier, le score, les deux
       tuiles, les deux actions. Les largeurs sont celles du proto (102 px pour
       le portrait, 176 px pour la colonne des actions), le reste s'ajuste. */
    .home-complete {
        grid-template-columns: 102px minmax(0, 1fr) auto 176px;
        grid-template-areas: "seal copy stats actions";
        gap: var(--space-5);
        padding: var(--space-5);
    }
    .home-complete-seal { width: 102px; height: 112px; }
    .home-complete-stats { grid-auto-columns: 138px; }
    .home-modes { gap: var(--space-6); }

    .home-mode {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        align-items: center;
        gap: var(--space-5);
        padding: var(--space-7);
    }

    .home-mode .ui-eyebrow,
    .home-mode .ui-title,
    .home-mode .mode-card-score,
    .home-mode[data-state="completed"] .mode-card-lead { padding-right: 0; }

    .mode-card-art { position: relative; inset: auto; width: 100%; height: 310px; }

    /* La scène reprend sa taille et son format, posée sur le bas du cadre, et
       sa lueur avec elle. */
    .mode-card-art .ui-scene {
        left: 50%;
        right: auto;
        bottom: 0;
        width: min(455px, 100%);
        height: auto;
        aspect-ratio: 760 / 517;
        transform: translateX(-50%);
    }
    .mode-card-art .ui-scene-glow { display: block; }

    /* Les trois blocs d'action prennent la même largeur, celle du proto : un
       bouton qui traverse toute une carte de mille pixels n'est plus un
       bouton. */
    .mode-card-pills,
    .mode-card-links,
    .mode-card-body > .ui-btn { max-width: 520px; width: 100%; }

    /* Au large, les pastilles tiennent sur une ligne, à parts égales. Le
       chiffre revient à côté de ce qu'il compte, et non plus au-dessus. */
    .mode-card-pills { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .mode-card-pill { flex-direction: row; gap: var(--space-1); min-height: 44px; padding: var(--space-2) var(--space-3); }

    .mode-card-links { gap: var(--space-5); }

    /* La pastille de coin, posée sur la colonne de la mascotte. En haut pour
       ce qui s'ouvrira (le détail des réponses), en bas pour ce qui se répète
       (un défi par jour) : le proto place les deux ainsi. */
    .mode-card-badge {
        position: absolute;
        top: var(--space-6);
        right: var(--space-6);
        padding: var(--space-2) var(--space-3);
        text-align: left;
    }
    .mode-card-badge.is-bottom {
        top: auto;
        bottom: var(--space-6);
        font-family: var(--font-code);
        text-align: center;
        text-transform: uppercase;
    }
    .mode-card-badge.is-bottom b { font-family: var(--font-code); font-weight: 700; }

    /* Les rayons du proto : un éventail de voiles qui tourne lentement derrière
       la mascotte, fondu en son centre et sur ses bords par un masque. */
    .mode-card-rays {
        display: block;
        position: absolute;
        inset: 0;
        margin: auto;
        width: 340px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: repeating-conic-gradient(from 5deg, rgba(255, 255, 255, .1) 0 4deg, transparent 4deg 15deg);
        mask-image: radial-gradient(circle, #000 0 15%, transparent 66%);
        opacity: .85;
        animation: mode-card-rays 60s linear infinite;
    }

    .mode-card-bulb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mode-card-rays,
    .mode-card-bulb::before { animation: none; }
}