/* ---------------------------------------------------------------------------
   Motchi : le Défi du jour (lot 5, première passe).

   Trois écrans et un seul fil : l'atterrissage qui présente et explique, la
   manche qui se joue, le résultat qui se lit. Le classement, l'historique, le
   détail d'une journée passée et la carte de partage restent dans `app.css`
   jusqu'à leur passe, où ils rejoindront cette feuille.

   Les tailles sont relevées sur le proto en styles calculés (cartes d'indice de
   112 px et leur épaisseur de 5 px, treize pas de 50 px espacés de 7 px,
   plateau de papier à 24 px de rayon sous une ombre de feutre) et reportées sur
   l'échelle des jetons quand elles tombent entre deux marches.

   Les règles du socle valent ici : toute encre est un jeton, donc mesurée ;
   aucune variante du socle n'est redéfinie ; un écran ne pose que la mise en
   page des composants qu'il accueille. Les voiles font exception, un blanc ou
   un noir translucide étant une transparence et non une teinte.
--------------------------------------------------------------------------- */

/* ── La surface d'un écran du Défi ──
   Le proto pose chaque écran du mode dans un même cadre : une colonne au large,
   arrondie, qui tient le contenu à distance du bord de l'écran. Elle ne peint
   rien, le feutre est déjà derrière. */
.daily-surface {
    border-radius: var(--radius-3xl);
    padding: var(--space-6) 0;
}

/* ── L'atterrissage ──
   Le proto ne dessine pas nos trois états d'arrivée (visiteur, à jouer, en
   cours) : il dessine la page des règles, qui est chez nous la même adresse.
   L'en-tête est donc le sien, et les états empruntent ses composants. */
.daily-intro {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: var(--space-5);
    min-height: 300px;
    margin-bottom: var(--space-5);
}
.daily-intro-copy { flex: 1 1 auto; }
.daily-intro-copy .ui-hint { max-width: 72ch; }
.daily-back { margin-bottom: var(--space-4); }

/* Une fois le Défi terminé, le hero gagne la présence des pages Entre amis :
   la mascotte remplit sa colonne et vient se poser sur le résultat qui suit. */
.daily-intro-completed { margin-bottom: 0; }

/* Ces titres forment une seule phrase : l'accent reste doré, mais ne force pas
   une coupure quand la largeur du hero permet de tout lire sur une ligne. */
.daily-title-inline .ui-title-accent { display: inline; }

/* La scène de mascotte est la même présence que dans l'espace Entre amis : un
   portrait large, posé devant le halo partagé du socle. Les autres heroes du
   Défi réutilisent ce cadre et n'en changent que l'implantation. */
.daily-hero-art {
    position: relative;
    align-self: end;
    display: grid;
    place-items: end center;
    width: 300px;
    height: 300px;
    pointer-events: none;
    transform: translateY(calc(var(--space-5) + 10px));
}
.daily-hero-art .ui-mascot {
    position: relative;
    z-index: 1;
    width: 285px;
    height: 300px;
    object-position: center bottom;
}

/* La carte d'appel à l'action, celle qui porte le bouton du jour. Un seul
   bouton doré par écran, et c'est celui-ci. */
/* Le bandeau d'action du proto : ce qu'il faut savoir à gauche, le geste à
   droite, sur un voile posé sur le feutre. Une carte de papier en faisait un
   bloc de contenu de plus, alors que c'est la sortie de l'écran. */
.daily-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: var(--light);
}
.daily-action-copy b { display: block; font-family: var(--font-title); font-size: var(--type-card); }
.daily-action-copy span { display: block; font-size: var(--type-sm); color: var(--light-sub); }
.daily-action-icon { color: var(--gold); }
.daily-action form { flex: 0 0 auto; margin: 0; }
.daily-action .ui-btn { width: auto; }
.daily-action-note { margin: var(--space-2) 0 0; font-size: var(--type-sm); color: var(--light-sub); }
.daily-action-note a { color: var(--light); }
/* Le pseudo d'un visiteur prend la place du bouton : un champ et son envoi sur
   la même ligne, puisque c'est un seul geste. */
.daily-action-form { display: flex; align-items: flex-start; gap: var(--space-2); }
.daily-action-form .ui-field-group { margin: 0; }
.daily-action-form .ui-field { min-width: 180px; }

/* L'arrivée d'un visiteur garde sa carte : le proto ne dessine pas cet état,
   et un champ de pseudo demande un fond qui le porte. */
.daily-hero { text-align: center; }
.daily-hero .ui-title { margin: var(--space-2) 0 var(--space-3); }
.daily-hero .ui-hint { margin-inline: auto; max-width: 54ch; }
.daily-hero form { margin: var(--space-5) 0 var(--space-3); }
.daily-hero .ui-field-group { max-width: 320px; margin-inline: auto; text-align: left; }
.daily-hero .ui-btn { max-width: 520px; margin-inline: auto; }

/* La progression d'une tentative reprise. Une jauge de manches scellées, jamais
   de temps : ce jeu ne mesure pas l'heure qu'on y passe. */
.daily-steps {
    display: grid;
    grid-auto-flow: column;
    gap: var(--space-1);
    margin: var(--space-4) auto var(--space-2);
    max-width: 320px;
}
.daily-step {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--paper-border);
}
.daily-step.is-done { background: var(--mode); }
.daily-step.is-current { background: var(--gold); }

/* ── Les règles ──
   Trois cartes numérotées, chacune avec son visuel et sa remarque, et rien en
   dessous : le barème se lit en paliers dans la première. Un `<details>` et non un panneau piloté en JavaScript :
   replié, son contenu reste dans la page, donc lisible sans script et trouvable
   par la recherche du navigateur. */
/* Les trois cartes sont posées sur le feutre, comme le proto : mises dans un
   papier, elles se fondaient dedans, crème sur crème. Le pli reste, mais il
   n'a pas de surface à lui. */
.daily-rules { margin-top: var(--space-5); }
.daily-rules-head { cursor: pointer; list-style: none; color: var(--light); }
.daily-rules-head::-webkit-details-marker { display: none; }

/* Le pli fermé est une carte et non un titre : c'est ce que le proto montre à
   qui a déjà joué une fois. Posée sur du papier, elle tient le barème en une
   ligne, dit pourquoi elle est courte, et porte le bouton qui rouvre. Sans
   elle, le repli laissait un surtitre seul sur le feutre, qui ne rappelait
   rien. */
.daily-rules-reminder {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--cream);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-paper-sm);
    text-align: left;
}
.daily-rules-reminder-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--mode-light);
    color: var(--mode-dark);
}
.daily-rules-reminder-copy { display: grid; gap: var(--space-0); }
/* Posés sur du papier, ces textes reprennent l'encre du papier et non celle du
   feutre, que le pli leur donne ailleurs. */
.daily-rules-reminder-copy .ui-eyebrow { color: var(--cream-sub); }
.daily-rules-reminder-copy b {
    font-family: var(--font-title);
    font-size: var(--type-section);
    color: var(--ink);
}
.daily-rules-reminder-copy small { font-size: var(--type-label); color: var(--cream-sub); }

.daily-rules-open-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.daily-rules-more { font-weight: 900; font-size: var(--type-sm); color: var(--mode-dark); }
.daily-rules-open-head .daily-rules-more { border-bottom: 2px solid currentColor; }
/* Sur la carte, la commande est un bouton discret et non un lien souligné : le
   proto la pose ainsi, à droite et sur une seule ligne. */
.daily-rules-reminder .daily-rules-more {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    font-size: var(--type-label);
    white-space: nowrap;
}

/* Un seul des deux en-têtes à la fois : la carte quand c'est replié, la ligne
   courte quand c'est ouvert. */
.daily-rules[open] .daily-rules-reminder { display: none; }
.daily-rules:not([open]) .daily-rules-open-head { display: none; }

.daily-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-4);
}

/* Une carte de règle est du papier, pas une tuile blanche : elle explique, elle
   ne se remplit pas. L'icône ouvre la carte, le numéro la range. */
.daily-rule {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--ink-soft);
    background: var(--cream);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-paper-sm);
    padding: var(--space-5) var(--space-4) var(--space-4);
}
.daily-rule .ui-title { color: var(--ink); }
.daily-rule-icon { color: var(--mode); }
/* Le numéro est un repère de lecture, pas un titre : gros mais pâle, il se lit
   après le titre et jamais avant. */
.daily-rule-number {
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    font-family: var(--font-title);
    font-size: var(--type-metric);
    line-height: 1;
    color: var(--paper-border);
}
.daily-rule p { margin: 0; font-size: var(--type-sm); color: var(--ink-soft); }

/* Le sujet visuel de la première carte : plus on ouvre d'indices, moins la
   manche rapporte. C'est la seule décision du jeu, elle se lit avant le
   tableau. Les points sont dans des pastilles, le nombre d'indices au-dessus. */
.daily-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: var(--space-2) 0;
}
.daily-scale-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
.daily-scale-clues { font-size: var(--type-label); font-weight: 900; color: var(--cream-sub); }
.daily-scale-points {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mode);
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--light);
}
.daily-scale-arrow { color: var(--cream-sub); }

/* Le sceau de la deuxième carte : ce que le joueur voit de sa propre réponse
   jusqu'à minuit, c'est à dire son existence et rien de plus. */
.daily-seal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--cream-2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--type-sm);
    font-weight: 700;
    color: var(--cream-sub);
}
.daily-seal-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--panda);
    font-family: var(--font-title);
    color: var(--light);
}

/* Les trois verdicts de la troisième carte, chacun sur sa teinte de rôle : ce
   qui rapporte, ce qui coûte, ce qui ne fait ni l'un ni l'autre. */
.daily-verdicts { display: flex; flex-direction: column; gap: var(--space-1); }
.daily-verdict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-sm);
    font-weight: 700;
}
.daily-verdict b {
    border-radius: var(--radius-pill);
    padding: var(--space-0) var(--space-2);
    font-size: var(--type-label);
    font-weight: 900;
}
.daily-verdict-good { background: var(--success-bg); color: var(--success); }
.daily-verdict-good b { background: var(--success); color: var(--cream); }
.daily-verdict-bad { background: var(--danger-bg); color: var(--danger); }
.daily-verdict-bad b { background: var(--danger); color: var(--cream); }
.daily-verdict-pass { background: var(--cream-2); color: var(--cream-sub); }
.daily-verdict-pass b { background: var(--paper-border); color: var(--ink-soft); }

/* La remarque au pied d'une carte de règle : ce que le joueur en fait, une fois
   la règle comprise. */
.daily-rule-tip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding: var(--space-3);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-sm);
    background: var(--cream-2);
    color: var(--cream-sub);
}
.daily-rule-tip b { display: block; font-size: var(--type-sm); color: var(--ink-soft); }
.daily-rule-tip small { display: block; font-size: var(--type-label); }
.daily-rule-tip-icon { color: var(--mode); }

/* Les quatre constantes du Défi prolongent les cartes de règles sans les
   enfermer dans un grand papier. Elles se lisent deux par deux au large et
   retrouvent le même empilement que les règles sur un téléphone. */
.daily-rules-facts { margin-top: var(--space-6); }
.daily-rules-facts-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}
.daily-rules-facts-head .ui-title { color: var(--light); }
.daily-rules-facts-head .ui-hint { max-width: 64ch; }
.daily-rules-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.daily-rules-fact .ui-eyebrow { color: var(--cream-sub); }
.daily-rules-cta { margin-top: var(--space-6); }

/* Sous le seuil, les trois cartes s'empilent. La mascotte garde sa présence,
   dans la même colonne étroite que les heroes Entre amis. */
@media (max-width: 720px) {
    .daily-rule-grid,
    .daily-rules-facts-grid { grid-template-columns: minmax(0, 1fr); }
    .daily-action { flex-direction: column; align-items: stretch; text-align: center; }
    .daily-action form, .daily-action .ui-btn { width: 100%; }
    .daily-action-form { flex-direction: column; }
    .daily-action-form .ui-field-group, .daily-action-form .ui-field { width: 100%; }
    .daily-intro {
        grid-template-columns: minmax(0, 1fr) 108px;
        min-height: 0;
    }
    .daily-intro .daily-hero-art { width: 108px; height: 145px; }
    .daily-intro .daily-hero-art .ui-mascot {
        width: 108px;
        height: 145px;
        margin-right: 0;
    }
    .daily-intro .daily-hero-art .ui-mascot-halo {
        bottom: -4px;
        width: 150px;
        height: 142px;
        margin-left: -75px;
    }
    .daily-rules { padding: var(--space-5) var(--space-4); }

    /* La carte du rappel passe en deux lignes : l'icône devant le texte, le
       bouton dessous et sur toute la largeur, le pouce étant la cible. */
    .daily-rules-reminder {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-4);
    }
    .daily-rules-reminder .daily-rules-more { grid-column: 1 / -1; text-align: center; }
}

/* ── L'écran de manche ──
   Il ne porte aucun signal temporel, pas même une pulsation : le compte à
   rebours de la journée vit sur l'atterrissage et sur l'écran final, jamais
   ici, où il ferait croire que la manche se joue contre la montre. */
.daily-play-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.daily-play-title .ui-title-accent {
    display: inline;
    font-size: var(--type-card);
    font-weight: 700;
    color: var(--gold);
}
.daily-status { display: flex; align-items: stretch; gap: var(--space-3); }

/* Ce que le classement retient, dit ici plutôt qu'à la fin : le joueur arbitre
   entre ouvrir un indice et répondre, et il doit savoir sur quoi cet arbitrage
   se paie. La réponse est « sur le score, et sur rien d'autre ».

   Le second bloc porte un liseré doré parce qu'il porte des points : c'est le
   seul chiffre de l'écran qui bouge quand le joueur décide. */
.daily-status-note,
.daily-status-worth {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(0, 0, 0, .26);
    border: 1px solid color-mix(in srgb, var(--light-sub) 30%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--light);
}
.daily-status-worth { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.daily-status-note small,
.daily-status-worth small {
    display: block;
    font-size: var(--type-label);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .85px;
    color: var(--light-sub);
}
.daily-status-note b,
.daily-status-worth b { display: block; font-size: var(--type-sm); }
.daily-status-note em { font-style: normal; font-size: var(--type-label); color: var(--light-sub); }
.daily-status-worth b { font-family: var(--font-title); font-size: var(--type-card); color: var(--gold); }
.daily-status-icon { color: var(--light-sub); }

/* Le surtitre d'une carte du plateau : « Indice 1 », « Manche 4 ». Plus petit
   que le surtitre du socle, qui nomme un écran là où celui-ci nomme une case. */
.daily-mark {
    display: block;
    font-size: var(--type-label);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .85px;
    color: var(--cream-sub);
}

/* La frise, dans son bandeau : le proto la pose sur un voile sombre, le compte
   à gauche et les treize pas à sa droite. Deux états visibles seulement, jouée
   et en cours ; un troisième qui distinguerait les manches réussies dirait un
   verdict que le jeu ne rend qu'à minuit. */
.daily-track {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.daily-track-label {
    flex: 0 0 auto;
    font-size: var(--type-label);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .85px;
    color: var(--light-sub);
}
.daily-track-label b { display: block; font-family: var(--font-title); font-size: var(--type-card); color: var(--light); }
.daily-track-label small { font-size: var(--type-sm); color: var(--light-sub); }

/* Les pas sont reliés : le trait passe derrière eux et s'arrête à leur bord,
   chaque pastille portant son propre fond. */
.daily-track-steps {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(13, minmax(0, 1fr));
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.daily-track-steps::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 2px;
    background: rgba(255, 255, 255, .12);
}
.daily-track-step { position: relative; display: grid; place-items: center; }

/* La pastille, et elle seule : viser tous les enfants du pas écraserait aussi
   la bulle qu'il porte. */
.daily-track-step > .daily-track-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    font-family: var(--font-text);
    font-size: var(--type-label);
    font-weight: 900;
    color: var(--light-sub);
    cursor: default;
}
.daily-track-step.is-done > .daily-track-dot {
    background: var(--mode);
    border-color: color-mix(in srgb, var(--mode) 55%, #FFF);
    color: var(--light);
    cursor: pointer;
}
.daily-track-step.is-current > .daily-track-dot {
    background: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 55%, #FFF);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--on-gold);
}
.daily-track-step > .daily-track-dot:focus-visible { outline: none; box-shadow: var(--ring); }

/* La bulle qui rend au joueur son propre mot, au survol comme au focus clavier.
   Ce sont ses réponses : les lui rendre ne divulgue rien, et treize manches
   sans pouvoir relire ce qu'on a écrit trois manches plus tôt est une charge
   mentale gratuite. */
.daily-sealed-bubble {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: none;
    min-width: 128px;
    background: var(--cream);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-felt-md);
    padding: var(--space-2) var(--space-3);
    text-align: center;
}
.daily-track-dot:hover + .daily-sealed-bubble,
.daily-track-dot:focus-visible + .daily-sealed-bubble { display: block; }
.daily-sealed-bubble b { display: block; font-family: var(--font-title); color: var(--ink); }
.daily-sealed-bubble small { display: block; font-size: var(--type-label); color: var(--cream-sub); }

/* Aux extrémités, une bulle centrée sortirait de l'écran : elle s'aligne alors
   sur le bord de sa pastille. */
.daily-track-step:first-child .daily-sealed-bubble { left: 0; transform: none; }
.daily-track-step:last-child .daily-sealed-bubble { left: auto; right: 0; transform: none; }

/* Le plateau : le papier où se joue la manche. */
.daily-round { padding: var(--space-6) var(--space-6) var(--space-5); }
.daily-round-copy {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.daily-round-copy p { margin: var(--space-1) 0 0; font-size: var(--type-sm); color: var(--ink-soft); }
.daily-round-copy .ui-mascot { flex: 0 0 auto; }

/* Les indices, deux par ligne comme le proto. Le mot est en capitales et prend
   l'encre des titres : c'est le sujet de l'écran, pas une étiquette. */
.daily-clue-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.daily-clue {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 112px;
    background: var(--tile);
    border: 2px solid var(--paper-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 5px 0 var(--paper-edge);
    padding: var(--space-4);
    text-align: center;
}
/* La languette dorée de la maquette : un repère, pas un état. */
.daily-clue::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 12px;
    border-radius: var(--radius-xs);
    background: var(--gold);
    opacity: .55;
}
/* Les capitales de Fredoka se touchent presque à cette taille, et certains
   mots se relisent deux fois (le V et le R de LIVRE se lisaient comme une seule
   lettre). Le proto espace déjà de 0,5 px ; on va un peu au-delà, et en `em`
   pour que l'écart suive la taille quand elle tombe à 22 px sur un
   téléphone. */
.daily-clue b {
    font-family: var(--font-title);
    font-size: var(--type-compact);
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: var(--ink);
}

/* L'indice qui vient d'être payé entre en place au lieu d'être posé là, et le
   maximum qu'il a fait bouger le dit : deux animations du proto, jouées au
   retour du serveur puisque c'est là que la page change. Le retour immédiat
   qu'il affiche au clic (« ce que cet indice coûte », en pastille sur la carte)
   n'est pas repris : chez nous la page se recharge, et le nouvel indice qui
   paraît est ce retour. */
.daily-clue[data-just-opened] { animation: daily-clue-in .4s ease; }
.daily-status-worth[data-updated] { animation: daily-worth-update .6s ease; }
@keyframes daily-clue-in {
    from { opacity: 0; transform: scale(.9) rotate(-2deg); }
    to { opacity: 1; transform: none; }
}
@keyframes daily-worth-update {
    0% {
        border-color: var(--gold);
        background: color-mix(in srgb, var(--gold) 28%, transparent);
        transform: scale(.9);
    }
    48% { transform: scale(1.07); }
    to { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .daily-clue[data-just-opened],
    .daily-status-worth[data-updated] { animation: none; }
}

/* Le prix est écrit contre le bouton qui l'engage, jamais à l'autre bout de
   l'écran. La carte prend sa propre ligne et la moitié de la largeur, comme le
   proto : elle est l'indice suivant, pas encore payé. */
/* La carte de révélation prend la cellule suivante de la grille, à côté des
   indices : elle est l'indice d'après, pas un bloc posé sous eux. */
.daily-reveal { display: contents; }
.daily-reveal button {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 112px;
    background: color-mix(in srgb, var(--mode-light) 50%, transparent);
    border: 2px dashed color-mix(in srgb, var(--mode) 45%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: left;
    font: inherit;
    color: var(--mode-dark);
    cursor: pointer;
    transition: background var(--dur) ease, transform var(--dur) ease;
}
.daily-reveal button:hover { background: var(--mode-light); transform: translateY(-1px); }
.daily-reveal button:focus-visible { outline: none; box-shadow: var(--ring); }
.daily-reveal-plus {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mode);
    font-family: var(--font-title);
    font-size: var(--type-card);
    line-height: 1;
    color: var(--light);
}
.daily-reveal b { display: block; font-size: var(--type-body); }
.daily-reveal small { display: block; font-size: var(--type-label); color: var(--cream-sub); }

/* La réponse, séparée du plateau par un trait : ce qui précède est à lire, ce
   qui suit est à faire. */
.daily-answer {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--paper-border);
}
.daily-answer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.daily-answer-label { font-weight: 700; color: var(--ink-soft); }

/* Le prix d'une erreur est une mention, pas une alerte : il se lit sur la même
   ligne que l'étiquette du champ, dans une pastille qui ne crie pas. */
.daily-answer-penalty {
    font-size: var(--type-label);
    font-weight: 900;
    color: var(--danger);
    background: var(--danger-bg);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    white-space: nowrap;
}
.daily-answer-row { display: flex; align-items: stretch; gap: var(--space-3); }
.daily-answer-row .ui-field { flex: 1 1 auto; min-width: 0; }
.daily-answer-row .ui-btn { flex: 0 0 auto; width: auto; }

/* Le refus n'emprunte rien au vocabulaire du verdict : une forme que le jeu
   n'accepte pas n'a rien coûté, et la manche reste ouverte. */
.daily-answer-error { margin: var(--space-2) 0 0; font-size: var(--type-sm); font-weight: 900; color: var(--warning); }
.daily-answer .ui-field[aria-invalid="true"] { border-color: var(--warning); }

/* Passer est un geste du jeu, pas une sortie : une pilule centrée, avec son
   prix contre elle. */
/* Passer est un geste du jeu : la pilule du proto, teintée du mode, avec son
   prix en pastille contre elle. */
.daily-pass { margin-top: var(--space-4); }
.daily-pass-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--mode-light) 45%, var(--cream));
    border: 2px solid color-mix(in srgb, var(--mode) 28%, transparent);
    border-radius: var(--radius-md);
    font-family: var(--font-text);
    font-size: var(--type-sm);
    font-weight: 900;
    color: var(--mode);
    cursor: pointer;
    transition: background var(--dur) ease, border-color var(--dur) ease, transform var(--dur) ease;
}
.daily-pass-link:hover {
    background: var(--mode-light);
    border-color: color-mix(in srgb, var(--mode) 48%, transparent);
    transform: translateY(-1px);
}
.daily-pass-link:focus-visible { outline: none; box-shadow: var(--ring); }
.daily-pass-link small {
    padding: var(--space-0) var(--space-2);
    background: color-mix(in srgb, var(--mode) 12%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--type-label);
    color: var(--mode-dark);
}
.daily-play-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    font-size: var(--type-sm);
    color: var(--light-sub);
}

/* Sous le seuil, le proto ne réduit pas l'écran de manche, il l'élague : les
   indices gardent leurs deux colonnes, la note de classement et la phrase
   d'explication s'effacent, et la réponse prend une carte à elle. Empiler les
   indices allongeait l'écran de presque mille pixels. */
@media (max-width: 720px) {
    .daily-play-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .daily-status { width: 100%; justify-content: flex-end; }
    /* Ce que le classement retient est dit sur l'atterrissage et dans les
       règles : à cette largeur, il prend la place du chiffre qui bouge. */
    .daily-status-note { display: none; }
    .daily-track { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .daily-track-label { justify-content: space-between; }
    .daily-round { padding: var(--space-4); }
    /* Le surtitre et la phrase d'explication s'effacent : la question suffit,
       et elle est déjà posée par le titre. */
    .daily-round-copy .ui-eyebrow,
    .daily-round-copy p { display: none; }
    .daily-round-copy .ui-mascot { width: 56px; height: 56px; }
    .daily-answer {
        margin-top: var(--space-4);
        padding: var(--space-4);
        border-top: 0;
        background: var(--cream);
        border-radius: var(--radius-lg);
    }
    .daily-answer-row .ui-btn { white-space: normal; }
    /* Deux colonnes d'indices sur un téléphone : le mot y tient à la taille du
       titre de carte, pas à celle du plateau, sans quoi « faisceau » se coupe
       en deux lignes. */
    .daily-clue { min-height: 96px; padding: var(--space-3); }
    .daily-clue b { font-size: var(--type-section); }
}

/* ── Le sceau ──
   Entre la réponse et la manche suivante, le proto montre ce que « scellée »
   veut dire : le mot tombe dans une enveloppe, un cachet s'y pose. Les durées
   et les courbes sont les siennes (la lettre descend en 0,8 s après un dixième
   d'attente, le cachet tombe à 0,66 s), et le pli de l'enveloppe est dessiné
   comme chez lui, deux carrés tournés à 45 degrés sous un débord masqué. */
.daily-seal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    backdrop-filter: blur(7px);
    text-align: center;
    color: var(--light);
    animation: daily-overlay-in .18s ease;
}
/* `hidden` doit l'emporter sur le `display: flex` ci-dessus, qui a la même
   spécificité et vient après : sans cette ligne, le voile reste étendu sur
   toute la page et avale les clics du formulaire qu'il recouvre. */
.daily-seal-overlay[hidden] { display: none; }
.daily-seal-overlay p { margin: var(--space-1) 0 0; color: var(--light-sub); }
.daily-seal-overlay .ui-title { animation: daily-fade-up .3s ease .78s both; }
.daily-seal-overlay p { animation: daily-fade-up .3s ease .85s both; }

.daily-envelope {
    position: relative;
    width: 230px;
    height: 145px;
    margin-bottom: var(--space-8);
}
/* La lettre part au-dessus de l'enveloppe et descend dedans. */
.daily-envelope-letter {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 190px;
    height: 90px;
    padding-top: var(--space-5);
    background: var(--cream);
    border-radius: var(--radius-xs);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-card);
    text-transform: uppercase;
    color: var(--ink);
    animation: daily-letter-down .8s cubic-bezier(.65, 0, .35, 1) .1s forwards;
}
.daily-envelope-front {
    position: absolute;
    inset: 32px 0 0;
    z-index: 2;
    overflow: hidden;
    background: var(--cream-2);
    border-radius: 7px;
    box-shadow: 0 20px 38px rgba(0, 0, 0, .35);
}
/* Le pli : deux carrés tournés, le pan éclairé à gauche et l'ombré à droite. */
.daily-envelope-front::before,
.daily-envelope-front::after {
    content: "";
    position: absolute;
    top: 22px;
    width: 170px;
    height: 170px;
    transform: rotate(45deg);
    background: var(--cream);
}
.daily-envelope-front::before { left: -85px; }
.daily-envelope-front::after { right: -85px; background: var(--paper-border); }

.daily-envelope-seal {
    position: absolute;
    top: 93px;
    left: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 68px;
    height: 68px;
    border: 3px solid var(--panda);
    border-radius: 50%;
    background: var(--panda);
    transform: translate(-50%, -50%) scale(0);
    animation: daily-seal-pop .45s var(--ease-pop) .66s forwards;
}

@keyframes daily-overlay-in { from { opacity: 0; } }
@keyframes daily-letter-down { to { transform: translateY(70px); } }
@keyframes daily-seal-pop { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes daily-fade-up {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

/* Le mouvement est l'objet de cet écran : sans lui, il n'y a rien à montrer,
   donc le contrôleur n'ouvre pas le voile et le formulaire part tout de suite.
   La règle reste ici pour le cas où le voile serait déjà ouvert. */
@media (prefers-reduced-motion: reduce) {
    .daily-seal-overlay,
    .daily-seal-overlay .ui-title,
    .daily-seal-overlay p,
    .daily-envelope-letter,
    .daily-envelope-seal { animation: none; }
    .daily-envelope-letter { transform: translateY(70px); }
    .daily-envelope-seal { transform: translate(-50%, -50%) scale(1); }
}

/* ── L'écran final, et la carte de résultat ──
   La même matière est rendue à deux endroits : ici après la treizième manche,
   et sur l'atterrissage une fois la tentative terminée. Elle ne dit rien du
   détail, ni quelles manches ont été trouvées ni combien : le verdict manche
   par manche appartient au lendemain.

   Le score est en or et il est le titre : c'est ce que le joueur vient
   chercher, et la phrase en dessous dit ce qu'il a fait pour l'obtenir. */
.daily-final { text-align: left; }
.daily-final-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: center;
    gap: var(--space-6);
    min-height: 310px;
}
.daily-final-copy { min-width: 0; }
.daily-final-copy > .ui-eyebrow { color: var(--light-sub); }
.daily-final-title { margin: var(--space-3) 0 var(--space-2); color: var(--light); }
.daily-final-title .ui-title-accent { display: inline; }

/* La mascotte occupe la seconde moitié du hero et se pose sur le ticket. Les
   étincelles restent dans son champ, sans créer une rangée décorative à part. */
.daily-final-crown {
    position: relative;
    align-self: end;
    isolation: isolate;
    width: 360px;
    height: 300px;
}
.daily-final-mascot {
    position: absolute;
    z-index: 1;
    right: 20px;
    bottom: 0;
    display: grid;
    place-items: end center;
    width: 300px;
    height: 300px;
}
.daily-final-mascot .ui-mascot-halo { width: 330px; height: 285px; margin-left: -165px; }
.daily-final-mascot .ui-mascot { position: relative; z-index: 1; width: 285px; height: 300px; }
/* Les étincelles du proto : dorées, et elles flottent plutôt que de clignoter.
   L'écran entier entre en fondu, comme chez lui.

   Un nuage et non une ligne. Le proto en pose cinq dans un bloc de 380 px, où
   sa chaîne passe à la ligne et retombe en deux rangées décalées ; sans cette
   borne, les mêmes cinq marques s'alignent et le haut de l'écran devient un
   trait. On garde sa boîte et ses valeurs (27 px, or, 2,4 s de flottement),
   mais chaque marque est posée à sa place plutôt que laissée à la coupure du
   navigateur, ce qui permet d'en compter huit et de les faire flotter en
   décalé. Le champ est en pourcentages, donc il se resserre avec la boîte au
   lieu de déborder sur un téléphone. */
.daily-sparkles {
    position: absolute;
    z-index: 2;
    inset: 35px 0 auto;
    width: 100%;
    height: 180px;
    margin: 0;
    opacity: .8;
    color: var(--gold);
}
.daily-sparkles span {
    position: absolute;
    font-size: 27px;
    line-height: 1;
    animation: daily-float 2.4s ease-in-out infinite;
}
/* Trois tailles : les grandes marques tiennent le nuage, les petites lui
   donnent sa profondeur. */
.daily-sparkles span:nth-child(3),
.daily-sparkles span:nth-child(7) { font-size: 19px; }
.daily-sparkles span:nth-child(4),
.daily-sparkles span:nth-child(8) { font-size: 22px; }

.daily-sparkles span:nth-child(1) { left: 2%; top: 30%; animation-delay: 0s; }
.daily-sparkles span:nth-child(2) { left: 22%; top: 62%; animation-delay: .45s; }
.daily-sparkles span:nth-child(3) { left: 31%; top: 6%; animation-delay: .9s; }
.daily-sparkles span:nth-child(4) { left: 48%; top: 46%; animation-delay: .2s; }
.daily-sparkles span:nth-child(5) { left: 57%; top: 12%; animation-delay: .65s; }
.daily-sparkles span:nth-child(6) { left: 73%; top: 38%; animation-delay: 1.1s; }
.daily-sparkles span:nth-child(7) { left: 86%; top: 72%; animation-delay: .35s; }
.daily-sparkles span:nth-child(8) { left: 91%; top: 4%; animation-delay: .8s; }

.daily-final { animation: daily-fade-up .4s ease; }
@keyframes daily-float {
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .daily-sparkles span, .daily-final { animation: none; }
}

.daily-final-score {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-2);
    margin: var(--space-1) 0 var(--space-2);
}
/* Le score est écrit à la taille du proto, 64 px, et non à la marche la plus
   proche de l'échelle : celle-ci descend à 30 px sur un téléphone, où ce
   chiffre est tout l'écran. C'est le seul endroit du lot dans ce cas. */
.daily-final-score b { font-family: var(--font-title); font-size: 64px; line-height: .95; color: var(--gold); }
.daily-final-score span { font-family: var(--font-title); font-size: var(--type-section); color: var(--light); }
.daily-final-lead { margin: 0; max-width: 54ch; color: var(--light-sub); }

/* Le ticket : la date, trois faits, la série, puis le verrou de minuit. Le
   score porte son maximum, mais aucune jauge ne l'accompagne : l'échelle ne
   part pas de zéro, treize mauvaises réponses valant moins treize. */
/* Le ticket prend la largeur commune de la page. Les faits restent groupés à
   gauche, tandis que les actions forment une colonne fonctionnelle à droite. */
.daily-ticket {
    width: 100%;
    margin-inline: auto;
    padding: var(--space-5) var(--space-6);
    text-align: left;
}
.daily-ticket-with-actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(250px, .72fr);
    gap: var(--space-6);
}
.daily-ticket-content { min-width: 0; }
.daily-ticket-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding-left: var(--space-6);
    border-left: 1px dashed var(--paper-border);
}
.daily-ticket-actions .daily-share { margin-top: 0; }
.daily-ticket-actions .daily-share-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.daily-ticket-actions .ui-btn { width: 100%; }
.daily-ticket-actions .daily-final-home { width: auto; align-self: center; }
.daily-ticket-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--paper-border);
}

/* Les trois faits sur leur propre carte, séparés par un filet : ils se lisent
   ensemble et se comparent, ce qu'une simple rangée ne dit pas. */
/* Les filets entre les trois faits sont l'écart de la grille sur un fond plus
   foncé, comme le proto : des bordures laissaient un trait pendu quand la
   grille passait en colonne. Ils restent sur une ligne à toutes les largeurs,
   parce que c'est ainsi qu'ils se comparent. */
.daily-ticket-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--paper-border);
    border-radius: var(--radius-md);
    margin: var(--space-5) 0;
}
.daily-ticket-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-0);
    padding: var(--space-3) var(--space-2);
    background: var(--tile);
    text-align: center;
}
.daily-ticket-stat b { font-family: var(--font-title); font-size: var(--type-section); color: var(--ink); }
.daily-ticket-stat b small { font-size: .6em; color: var(--cream-sub); }
.daily-ticket-stat span { font-size: var(--type-label); font-weight: 900; color: var(--cream-sub); }
.daily-ticket-icon { color: var(--mode); }

/* La série se déduit des dates menées au bout : la phrase dit où elle en est,
   jamais de combien elle a bougé. */
.daily-streak-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    background: var(--gold-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--type-label);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .85px;
    text-align: center;
    color: var(--cream-sub);
}

/* Le verrou de minuit : une heure de calendrier, jamais une mesure de la
   partie. Le compte à rebours est une amélioration progressive, la phrase se
   lit entière sans lui. */
.daily-locked {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    background: var(--mode-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.daily-locked-text { flex: 1 1 auto; font-size: var(--type-label); color: var(--cream-sub); }
.daily-locked-text b { display: block; font-size: var(--type-sm); color: var(--mode-dark); }
/* Le compte à rebours est un cadran, pas un titre : le proto l'écrit en
   Space Mono, petit et dans l'encre du mode. En Fredoka et en 18 px, il pesait
   autant que le score et ses chiffres dansaient à chaque minute, une police
   proportionnelle ne donnant pas la même largeur à un 1 et à un 8. */
.daily-locked-countdown {
    flex: 0 0 auto;
    font-family: var(--font-code);
    font-size: var(--type-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mode);
}
.daily-locked-icon { color: var(--mode); }

/* Le palier, et son centile. Provisoire tant que minuit n'est pas passé : les
   paliers nommés sont relatifs aux participants du jour. */

/* Un invité joue le Défi comme un compte : ce sont l'historique et le classement
   qui demandent une inscription, jamais la partie. On la lui propose ici, au
   moment où il vient de voir ce qu'elle lui garderait. Le texte et le bouton
   se partagent la ligne, comme le proto. */
.daily-final-signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
    text-align: left;
}
.daily-final-signup .ui-title { margin: var(--space-2) 0; }
.daily-final-signup p { margin: 0; font-size: var(--type-sm); color: var(--ink-soft); }
.daily-final-signup .ui-btn { width: auto; }


@media (max-width: 820px) {
    .daily-ticket-with-actions { grid-template-columns: minmax(0, 1fr); }
    .daily-ticket-actions {
        padding-top: var(--space-4);
        padding-left: 0;
        border-top: 1px dashed var(--paper-border);
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .daily-final-hero {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: var(--space-3);
        min-height: 0;
        margin-bottom: var(--space-4);
    }
    .daily-final-crown { width: 108px; height: 145px; }
    .daily-final-mascot { right: 0; width: 108px; height: 145px; }
    .daily-final-mascot .ui-mascot { width: 108px; height: 145px; }
    .daily-final-mascot .ui-mascot-halo {
        bottom: -4px;
        width: 150px;
        height: 142px;
        margin-left: -75px;
    }
    .daily-final .daily-sparkles { display: none; }
    .daily-final-score { gap: var(--space-1); }
    .daily-final-score b { font-size: 52px; }
    .daily-final-score span { font-size: var(--type-card); }
    .daily-final-title { font-size: var(--type-section); }
    .daily-intro-completed { margin-bottom: var(--space-4); }

    .daily-ticket { padding: var(--space-4); }
    .daily-ticket-top { flex-direction: column; align-items: center; }
    .daily-ticket-stat { padding: var(--space-3) var(--space-1); }
    .daily-ticket-stat span { font-size: var(--type-label); }
    .daily-final-signup { grid-template-columns: minmax(0, 1fr); }
    .daily-final-signup .ui-btn { width: 100%; }
    .daily-locked { flex-wrap: wrap; }
}

/* ── Le classement du jour ──
   Un classement ne porte rien du contenu : des scores, des comptes et des noms,
   et c'est ce qui autorise à l'ouvrir sans session. Le dessin suit cette
   hiérarchie : le bandeau de la journée, le rang de tête, les trois paliers
   nommés, les rangs numérotés, puis la place du lecteur.

   Deux onglets, « Amis » et « Global », comme le proto. Le premier ne se montre
   qu'à qui a une identité de joueur ; un visiteur lit la journée entière.

   Les tailles sont relevées sur le proto en styles calculés et reportées sur
   l'échelle des jetons quand elles tombent entre deux marches : le proto écrit
   des étiquettes à 8 et 9 px, l'échelle s'arrête à 11, et c'est l'échelle qui
   l'emporte. Le seuil de repli est celui du proto, 700 px. */

.daily-board > .daily-back { margin-bottom: 0; }
.daily-board-head {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 230px;
    padding-right: 300px;
    margin-bottom: var(--space-5);
}
.daily-board-intro { flex: 1 1 auto; min-width: 0; }
.daily-board-intro .ui-hint { max-width: 56ch; margin-top: var(--space-2); }
.daily-board-hero-art {
    position: absolute;
    right: 0;
    bottom: 0;
    flex: 0 0 300px;
}

/* ── Le bandeau de la journée ──
   Une plaque sombre posée sur le feutre : la date en pastille dorée, le nom du
   jour, l'état du classement, le nombre de participants. La plaque se compose
   du prune du mode plutôt que d'un violet écrit à la main, de sorte qu'elle
   suive le feutre si celui-ci change. */
.daily-board-summary {
    display: grid;
    grid-template-columns: 58px minmax(150px, .7fr) minmax(280px, 1.25fr) auto;
    align-items: center;
    gap: var(--space-4);
    min-height: 82px;
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(rgba(255, 255, 255, .14) .7px, transparent .7px) 0 0 / 9px 9px,
        linear-gradient(120deg,
            color-mix(in srgb, var(--mode-dark) 94%, var(--felt-2)),
            color-mix(in srgb, var(--mode-dark) 62%, #000));
    box-shadow: var(--shadow-felt-md);
    color: var(--light);
}

/* La date en pastille : le seul or du bandeau, parce que c'est ce que l'on
   cherche en arrivant sur une adresse qui change de contenu chaque nuit. */
.daily-board-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: var(--radius-md);
    background: var(--gold);
    box-shadow: 0 4px 0 var(--gold-dark);
    color: var(--on-gold);
}
.daily-board-day b { font-family: var(--font-title); font-weight: 700; font-size: var(--type-section); line-height: 1; }
.daily-board-day small { font-family: var(--font-code); font-weight: 700; font-size: var(--type-label); text-transform: uppercase; }

.daily-board-identity small,
.daily-board-identity b { display: block; }
.daily-board-identity small {
    font-family: var(--font-code);
    font-weight: 700;
    font-size: var(--type-label);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--light-sub);
}
.daily-board-identity b {
    margin-top: var(--space-0);
    text-transform: capitalize;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-card);
    color: var(--light);
}

/* L'état du classement : une puce dorée qui bat tant que la journée court, une
   coche une fois qu'elle est close. */
.daily-board-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
    padding-left: var(--space-4);
    border-left: 1px solid rgba(255, 255, 255, .18);
}
.daily-board-state > i {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(250, 204, 21, .1);
}
.daily-board-state.is-final > i {
    display: grid;
    place-items: center;
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    margin-top: 0;
    background: rgba(250, 204, 21, .16);
    box-shadow: none;
    font-style: normal;
    font-weight: 900;
    color: var(--gold);
}
.daily-board-state span,
.daily-board-state b,
.daily-board-state small { display: block; min-width: 0; }
.daily-board-state b { font-family: var(--font-title); font-weight: 700; font-size: var(--type-label); color: var(--gold); }
.daily-board-state small { margin-top: 3px; font-size: var(--type-label); line-height: 1.35; color: var(--light-sub); }

.daily-board-count {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    column-gap: var(--space-2);
    padding: 7px var(--space-3);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .09);
}
.daily-board-count svg { grid-row: 1 / span 2; color: var(--light-sub); }
.daily-board-count b { font-family: var(--font-title); font-weight: 600; font-size: var(--type-body); color: var(--light); }
.daily-board-count small { font-size: var(--type-label); color: var(--light-sub); }

/* La légende de l'unité, une fois pour toute la page : sans elle, les « +3 »
   des cartes se liraient comme des totaux. */
.daily-board-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-1) var(--space-4);
    font-size: var(--type-label);
    font-weight: 800;
    line-height: 1.35;
    color: var(--light-sub);
}
.daily-board-legend svg { flex: 0 0 auto; }

/* ── La carte de tête ──
   Le rang de tête et pas « le palier Élite » : certains jours personne ne signe
   le sans-faute, et la carte reviendrait vide alors qu'il y a bel et bien un
   meilleur score du jour. Elle est la seule carte sombre de l'écran, cernée
   d'or par le proto, ce qui ne contredit pas la règle « l'or est ce qui
   t'appartient » : c'est un liseré, pas le cerclage plein que porte la carte du
   lecteur. */
.daily-board-leader {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-4);
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(rgba(255, 255, 255, .16) .7px, transparent .7px) 0 0 / 8px 8px,
        linear-gradient(130deg,
            color-mix(in srgb, var(--mode) 75%, #000) 0%,
            color-mix(in srgb, var(--mode) 58%, #000) 55%,
            color-mix(in srgb, var(--mode) 41%, #000) 100%);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    color: var(--light);
}
/* L'étincelle du proto : une marque de fête, décorative, posée derrière la
   mascotte. */
.daily-board-leader::after {
    content: "✦";
    position: absolute;
    top: var(--space-3);
    right: 132px;
    font-size: 28px;
    /* Un voile et non une teinte : l'opacité dilue l'encre claire du feutre,
       là où un blanc translucide écrit en `color` échapperait à la mesure. */
    color: var(--light);
    opacity: .18;
    transform: rotate(12deg);
}

.daily-board-leader-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 175px;
    grid-template-areas: "copy mascot" "metrics mascot";
    align-items: center;
    gap: var(--space-2) var(--space-6);
}
.daily-board-leader-copy { grid-area: copy; min-width: 0; }
.daily-board-leader-kicker {
    display: block;
    font-size: var(--type-label);
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gold);
}
.daily-board-leader-score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--light);
}
.daily-board-leader-score strong {
    margin-right: var(--space-1);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-compact);
    line-height: 1;
    letter-spacing: -1px;
    color: var(--gold);
}
.daily-board-leader-score small { font-size: var(--type-label); color: var(--light-sub); }

.daily-board-leader-mascot {
    grid-area: mascot;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 115px;
}
/* Les rayons du proto : un éventail masqué en anneau, qui tourne lentement
   derrière la mascotte. C'est un agrément, donc il s'arrête pour qui refuse le
   mouvement dans son système. */
.daily-board-leader-mascot::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 175px;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .82;
    background: repeating-conic-gradient(from 5deg, rgba(255, 255, 255, .13) 0 4deg, transparent 4deg 15deg);
    mask-image: radial-gradient(circle, #000 0 15%, transparent 66%);
    animation: daily-board-rays 54s linear infinite;
}
.daily-board-leader-mascot .ui-mascot { position: relative; z-index: 1; width: 132px; height: 132px; }

@keyframes daily-board-rays {
    to { transform: rotate(360deg); }
}

/* Deux faits, jamais le compte complet des indices : les vingt-six offerts sont
   un plancher que tout le monde reçoit, donc les compter ne comparerait rien. */
.daily-board-leader-metrics {
    grid-area: metrics;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--space-1);
}
.daily-board-leader-metrics > span {
    min-width: 0;
    padding: 7px var(--space-2);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .1);
}
.daily-board-leader-metrics b {
    display: block;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-body);
    line-height: 1;
    color: var(--light);
}
.daily-board-leader-metrics small {
    display: block;
    margin-top: 3px;
    font-size: var(--type-label);
    font-weight: 800;
    line-height: 1.2;
    color: var(--light-sub);
}

/* Les noms du rang de tête. Le proto les replie derrière un bouton parce qu'il
   en montre trente ; la requête n'en rapporte que cinq, et un repli qui
   redonnerait les mêmes cinq ne cacherait rien. */
.daily-board-names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 7px;
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, .18);
    list-style: none;
}
.daily-board-names li {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-1) 7px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .1);
}
.daily-board-names i {
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 2px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    background: var(--cream);
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: var(--type-label);
    color: var(--mode-dark);
}
.daily-board-names b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--type-label);
    font-weight: 700;
    color: var(--light);
}
/* La pastille du lecteur porte l'or, et c'est le seul or du bloc : un liseré
   sur son nom plutôt qu'un cerclage sur la carte, qui appartient à tout le
   palier. */
.daily-board-names .is-mine {
    grid-column: span 2;
    border: 2px solid var(--gold);
    background: rgba(255, 255, 255, .16);
}
.daily-board-names .is-mine em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: var(--type-label);
    font-weight: 900;
    color: var(--gold);
}

.daily-board-names .is-more {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .06);
}
.daily-board-names .is-more small { font-size: var(--type-label); font-weight: 800; color: var(--light-sub); }

/* ── Les paliers nommés ──
   Trois médailles de papier, teintées par leur métal. La teinte et le liseré du
   haut sont les seules choses qui changent d'une carte à l'autre : les encres
   restent celles du papier, où elles sont mesurées. */
.daily-board-tiers {
    display: grid;
    /* Trois colonnes fixes, comme le proto, et non un `auto-fit` : le jour où un
       seul palier existe, une colonne élastique lui fait tenir toute la largeur
       et sa mascotte flotte dans le vide. Une carte de médaille a un gabarit. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.daily-board-tier {
    --medal-edge: var(--paper-edge);
    --medal-tint: var(--cream-2);
    --medal-weave: rgba(0, 0, 0, .06);

    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 205px;
    padding: var(--space-5) 96px var(--space-5) var(--space-5);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(var(--medal-weave) .7px, transparent .7px) 0 0 / 8px 8px,
        linear-gradient(145deg, var(--cream) 0%, var(--medal-tint) 100%);
    box-shadow: inset 0 6px 0 var(--medal-edge), var(--shadow-paper-md);
    color: var(--ink-soft);
}
.daily-board-tier[data-tier="gold"] { --medal-edge: #D6AA2F; --medal-tint: #F9EDCF; --medal-weave: rgba(201, 156, 0, .12); }
.daily-board-tier[data-tier="silver"] { --medal-edge: #AEB9C0; --medal-tint: #EDF0F1; --medal-weave: rgba(111, 126, 136, .11); }
.daily-board-tier[data-tier="bronze"] { --medal-edge: #B9704D; --medal-tint: #F2DED2; --medal-weave: rgba(167, 88, 51, .1); }

.daily-board-tier-mascot {
    position: absolute;
    z-index: 1;
    right: -4px;
    bottom: -5px;
    display: grid;
    place-items: end center;
    width: 94px;
    height: 132px;
    pointer-events: none;
}
.daily-board-tier-mascot .ui-mascot { width: 100%; height: 100%; object-position: center bottom; }

/* La languette du lecteur, à cheval sur le bord haut de sa carte.

   Un liseré ne suffisait pas : les trois cartes en portent déjà un, coloré par
   leur métal, et celui du lecteur, plus épais, se lisait comme une nuance de
   plus plutôt que comme un repère. La languette casse la silhouette de la
   carte, ce qu'aucune épaisseur de trait ne fait, et reprend l'épaisseur pleine
   des boutons du jeu.

   La grille se décale d'autant, et seulement quand une languette existe : la
   réserver toujours laisserait un blanc les jours où le lecteur n'a pas de
   palier. */
.daily-board-tiers.has-tab { padding-top: var(--space-5); }

.daily-board-tier-tab {
    position: absolute;
    z-index: 2;
    top: -14px;
    left: var(--space-4);
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--gold);
    box-shadow: 0 3px 0 var(--gold-dark);
    font-size: var(--type-label);
    font-weight: 900;
    text-transform: uppercase;
    color: var(--on-gold);
}

.daily-board-tier h2 { margin-top: var(--space-2); color: var(--ink); }
.daily-board-tier-score {
    display: block;
    margin-top: var(--space-0);
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-metric);
    line-height: 1;
    color: var(--ink);
}
.daily-board-tier-score small { font-size: var(--type-sm); color: var(--cream-sub); }

.daily-board-tier-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.daily-board-tier-facts > span {
    padding: 7px var(--space-2);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, .68);
    font-size: var(--type-label);
    color: var(--ink-soft);
}
.daily-board-tier-facts b { font-size: var(--type-sm); font-weight: 700; }
.daily-board-tier-facts small { font-size: var(--type-label); }
.daily-board-tier p { margin-top: var(--space-3); font-size: var(--type-sm); font-weight: 900; line-height: 1.4; color: var(--cream-sub); }

/* La carte du lecteur, et elle seule, porte l'or plein. Elle peut être
   n'importe laquelle, y compris celle de tête : son cerclage passe devant, la
   question « où suis-je ? » venant avant « qui mène ? ». */
/* Une carte de médaille ne porte pas de nom : sa languette y est le seul repère
   du lecteur, et elle remplace le cerclage, qui ne se distinguait pas assez du
   liseré que toutes les cartes portent. Le bloc Élite, qui nomme les siens,
   marque sa pastille de nom à la place.

   La carte cesse alors de rogner ce qui sort d'elle, sans quoi la languette
   serait coupée par son propre bord ; la mascotte, qui en profitait pour
   déborder de quelques pixels, rentre dans le cadre. */
.daily-board-tier.is-mine {
    overflow: visible;
    border-color: var(--gold-dark);
}
.daily-board-tier.is-mine .daily-board-tier-mascot { right: 0; bottom: 0; }

/* ── Les rangs numérotés ──
   Une vraie table là où le proto pose une grille de `div` : trois colonnes de
   chiffres alignés sont des données tabulaires, et `table-layout: fixed` rend
   le même dessin en donnant leurs en-têtes de colonne aux lecteurs d'écran. */
.daily-board-rest { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.daily-board-rest-head { padding: 0 var(--space-0) var(--space-4); border-bottom: 1px solid var(--paper-border); }
.daily-board-rest-head b { display: block; font-family: var(--font-title); font-weight: 600; font-size: var(--type-card); color: var(--ink); }
.daily-board-rest-head small { display: block; font-size: var(--type-label); color: var(--cream-sub); }

.daily-board-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.daily-board-table th,
.daily-board-table td { padding: var(--space-2) var(--space-2); text-align: left; vertical-align: middle; }
.daily-board-table thead th {
    height: 42px;
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    text-transform: uppercase;
    color: var(--cream-sub);
}
.daily-board-table th:nth-child(1) { width: 46%; }
.daily-board-table th:nth-child(2) { width: 24%; }
.daily-board-table th:nth-child(3) { width: 30%; }
.daily-board-table tbody th,
.daily-board-table tbody td { height: 76px; border-top: 1px solid var(--paper-border); }
.daily-board-table tbody th { font-weight: 400; }
.daily-board-table tbody th b {
    display: block;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-card);
    color: var(--mode);
}
.daily-board-table tbody small { display: block; margin-top: var(--space-1); font-size: var(--type-label); color: var(--cream-sub); }
.daily-board-table td.daily-board-table-score,
.daily-board-table thead th:nth-child(2) { text-align: center; }
.daily-board-table td.daily-board-table-players,
.daily-board-table thead th:nth-child(3) { text-align: right; }
.daily-board-table-score strong {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-section);
    color: var(--ink);
}
.daily-board-table tbody .daily-board-table-score small { display: inline; margin: 0; font-size: var(--type-sm); }
.daily-board-table-players b { display: block; font-family: var(--font-title); font-weight: 700; font-size: var(--type-card); color: var(--ink); }

/* La ligne du lecteur, marquee comme tout ce qui lui appartient : l'or et la
   pastille « toi ».

   Le bandeau du bas annonce « rang #4 » et la table listait un #4 que rien ne
   designait, si bien que le lecteur relisait la colonne pour retrouver sa
   propre ligne. Le marquage se pose sur les cellules et non sur la rangee : une
   table a bords fusionnes ne prend ni fond ni liseré sur un `tr`. */
.daily-board-table tbody tr[data-mine] > * { background: var(--gold-bg); }
.daily-board-table tbody tr[data-mine] > *:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.daily-board-table-rank { display: flex; align-items: baseline; gap: var(--space-2); }
.daily-board-table-rank em {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    font-family: var(--font-code);
    font-style: normal;
    font-weight: 900;
    font-size: var(--type-label);
    color: var(--on-gold);
}

/* Le repli des paliers suivants. Un `details` là où le proto met un bouton :
   la fin de la liste reste atteignable sans JavaScript, cherchable par le
   navigateur, et un rafraîchissement par morphing ne referme pas ce que le
   lecteur venait d'ouvrir. */
.daily-board-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 50px;
    padding: var(--space-3);
    border-top: 1px solid var(--paper-border);
    cursor: pointer;
    list-style: none;
    font-size: var(--type-sm);
    font-weight: 900;
    color: var(--mode);
}
.daily-board-more > summary::-webkit-details-marker { display: none; }
.daily-board-more > summary .daily-board-more-open,
.daily-board-more[open] > summary .daily-board-more-closed { display: none; }
.daily-board-more[open] > summary .daily-board-more-open { display: inline; }
.daily-board-more > summary:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--ring); }
.daily-board-chevron {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mode) 12%, transparent);
    transition: transform var(--dur-slow);
}
.daily-board-more[open] .daily-board-chevron { transform: rotate(180deg); }

/* ── Les onglets ──
   Deux liens sous le titre, dans une gouttière translucide posée sur le
   feutre. L'onglet courant porte l'or, comme dans le proto sur cette surface :
   c'est ce que le lecteur a choisi de regarder. */
.daily-board-tabs {
    display: inline-flex;
    gap: var(--space-0);
    margin-top: var(--space-3);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .1);
}
.daily-board-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 96px;
    min-height: 40px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--type-sm);
    font-weight: 800;
    text-decoration: none;
    color: var(--light-sub);
}
.daily-board-tabs a span {
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .14);
    font-size: var(--type-label);
}
.daily-board-tabs a[aria-current] {
    background: var(--gold);
    box-shadow: 0 3px 0 var(--gold-dark);
    color: var(--on-gold);
}
.daily-board-tabs a[aria-current] span { background: rgba(0, 0, 0, .1); }
.daily-board-tabs a:focus-visible { outline: none; box-shadow: var(--ring); }

/* Les initiales des amis qui ont terminé, en pile, là où l'onglet global dit
   l'état du classement. */
.daily-board-state.is-friends { align-items: center; }
/* Qualifié par la cellule : sa règle `span` générale le passerait en bloc. */
.daily-board-state .daily-board-avatars { display: flex; flex: 0 0 auto; padding-left: 5px; }
.daily-board-avatars i {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    margin-left: -5px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: var(--cream);
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: var(--type-label);
    color: var(--mode-dark);
}

/* ── Le podium des amis ──
   Trois rubans de médaille empilés, un par place, tous ses ex æquo dessus. Une
   place que personne ne tient reste là, en pointillés, pour que le podium garde
   sa forme. */
.daily-board-friends {
    overflow: hidden;
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(rgba(0, 0, 0, .06) .7px, transparent .7px) 0 0 / 8px 8px,
        linear-gradient(145deg, var(--cream) 0%, var(--cream-2) 100%);
    box-shadow: var(--shadow-paper-md);
    color: var(--ink-soft);
}
.daily-board-friends-head { padding: 0 var(--space-2); }
.daily-board-friends-head small {
    display: block;
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mode);
}
.daily-board-friends-head h2 { margin-top: var(--space-0); color: var(--ink); }

.daily-board-ribbons {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}
.daily-board-ribbon {
    --ribbon-edge: var(--paper-edge);
    --ribbon-tint: var(--cream-2);

    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--ribbon-tint), var(--cream));
    box-shadow: inset 5px 0 0 var(--ribbon-edge);
}
.daily-board-ribbon[data-place="1"] { --ribbon-edge: #D6AA2F; --ribbon-tint: #F9EDCF; }
.daily-board-ribbon[data-place="2"] { --ribbon-edge: #AEB9C0; --ribbon-tint: #EDF0F1; }
.daily-board-ribbon[data-place="3"] { --ribbon-edge: #B9704D; --ribbon-tint: #F2DED2; }

.daily-board-ribbon-mascot { display: grid; place-items: end center; width: 76px; height: 84px; }
.daily-board-ribbon-mascot .ui-mascot { width: 100%; height: 100%; object-position: center bottom; }

.daily-board-ribbon-body { min-width: 0; }
.daily-board-ribbon-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.daily-board-ribbon-place {
    padding: 2px 9px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .72);
    font-family: var(--font-code);
    font-weight: 900;
    font-size: var(--type-label);
    color: var(--ink);
}
.daily-board-ribbon-score {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-section);
    line-height: 1;
    color: var(--ink);
}
.daily-board-ribbon-score small { font-size: var(--type-sm); color: var(--cream-sub); }
.daily-board-ribbon-global {
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .72);
    font-size: var(--type-label);
    font-weight: 900;
    color: var(--ink-soft);
}

/* Les noms en pastilles, qui passent à la ligne plutôt que d'être coupés :
   c'est ce qui laisse un ruban porter quatre ex æquo sur un téléphone. */
.daily-board-ribbon-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}
.daily-board-ribbon-names li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .8);
}
.daily-board-ribbon-names i {
    display: grid;
    flex: 0 0 24px;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mode);
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: var(--type-label);
    color: var(--light);
}
.daily-board-ribbon-names b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: var(--type-sm);
    color: var(--ink);
}
.daily-board-ribbon-names small { flex: 0 0 auto; font-size: var(--type-label); font-weight: 800; color: var(--cream-sub); }
/* Le lecteur est marqué sur son nom et non sur le ruban, qu'il partage peut-être. */
.daily-board-ribbon-names .is-mine { border: 2px solid var(--gold); background: var(--gold-bg); }

/* Une place vide : le ruban en pointillés, la mascotte éteinte. */
.daily-board-ribbon.is-empty {
    min-height: 64px;
    border: 2px dashed var(--paper-edge);
    background: transparent;
    box-shadow: none;
}
.daily-board-ribbon.is-empty .daily-board-ribbon-mascot { height: 52px; filter: grayscale(1); opacity: .3; }
.daily-board-ribbon-vacant {
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    color: var(--cream-sub);
}

/* La pastille « toi », et l'or sur le nom ou la ligne du lecteur : la même
   marque que partout ailleurs sur l'écran. */
.daily-board-ribbon-names em,
.daily-board-friend-player em {
    display: inline-flex;
    margin-left: var(--space-1);
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    background: var(--gold);
    vertical-align: middle;
    font-family: var(--font-code);
    font-style: normal;
    font-weight: 900;
    font-size: var(--type-label);
    text-transform: uppercase;
    color: var(--on-gold);
}

/* ── Les autres amis ──
   Une ligne par ami : sa place, son nom et son rang global, son score, ses
   indices en plus. Sans jauge sous le score : il descend jusqu'à -13, donc une
   barre qui part de zéro mentirait. */
.daily-board-friend-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.daily-board-friend {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 72px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-top: 1px solid var(--paper-border);
}
.daily-board-friend:first-child { border-top: 0; }
.daily-board-friend.is-mine {
    border-radius: var(--radius-sm);
    background: var(--gold-bg);
    box-shadow: inset 3px 0 0 var(--gold);
}
.daily-board-friend-place {
    display: grid;
    place-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-md);
    background: var(--mode-light);
    text-align: center;
}
.daily-board-friend-place small { font-size: var(--type-label); font-weight: 900; text-transform: uppercase; color: var(--mode); }
.daily-board-friend-place b { font-family: var(--font-title); font-weight: 700; font-size: var(--type-card); line-height: 1; color: var(--ink); }
.daily-board-friend-player { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.daily-board-friend-player > i {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mode);
    font-family: var(--font-title);
    font-style: normal;
    font-weight: 700;
    font-size: var(--type-label);
    color: var(--light);
}
.daily-board-friend-player > span { min-width: 0; }
.daily-board-friend-player b,
.daily-board-friend-player small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-board-friend-player b { font-family: var(--font-title); font-weight: 600; font-size: var(--type-body); color: var(--ink); }
.daily-board-friend-player small { margin-top: 2px; font-size: var(--type-label); color: var(--cream-sub); }
.daily-board-friend-score { font-family: var(--font-title); font-weight: 700; font-size: var(--type-card); color: var(--ink); }
.daily-board-friend-score small { font-size: var(--type-label); color: var(--cream-sub); }
.daily-board-friend-clues { text-align: right; }
.daily-board-friend-clues b,
.daily-board-friend-clues small { display: block; }
.daily-board-friend-clues b { font-family: var(--font-title); font-weight: 700; font-size: var(--type-body); color: var(--mode); }
.daily-board-friend-clues small { font-size: var(--type-label); color: var(--cream-sub); }

/* ── La place du lecteur ──
   Elle colle au bas de la fenêtre pendant que l'on parcourt les paliers, comme
   dans le proto : la question « et moi, où suis-je ? » se pose en lisant les
   autres, pas après eux. */
.daily-board-you {
    position: sticky;
    z-index: 20;
    bottom: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--mode);
    border-radius: var(--radius-lg);
    background: var(--mode-light);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
    color: var(--ink-soft);
}
.daily-board-you-label {
    display: block;
    padding-bottom: var(--space-3);
    font-family: var(--font-code);
    font-weight: 700;
    font-size: var(--type-label);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--mode);
}
.daily-board-you-main {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 72px;
}
.daily-board-you-main > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 62px;
    padding: var(--space-1) var(--space-4);
    text-align: center;
    border-left: 1px solid color-mix(in srgb, var(--mode) 18%, transparent);
}
.daily-board-you-main > span:first-child { text-align: left; padding-left: 0; border-left: 0; }
.daily-board-you-main > span:last-child { text-align: right; padding-right: 0; }
/* L'en-tête passe au-dessus du chiffre : il est écrit après lui dans le
   gabarit, où il accompagne la valeur qu'il nomme. */
.daily-board-you-main small {
    order: -1;
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--cream-sub);
}
.daily-board-you-main b {
    display: block;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-section);
    line-height: 1;
    color: var(--ink);
}
.daily-board-you-main b em { display: inline; font-style: normal; font-size: var(--type-sm); color: var(--cream-sub); }
.daily-board-you-main > span > em {
    display: block;
    margin-top: 3px;
    font-family: var(--font-code);
    font-style: normal;
    font-weight: 800;
    font-size: var(--type-sm);
    color: var(--cream-sub);
}
.daily-board-you-rank b { color: var(--mode); }
.daily-board-you > p {
    margin: 7px 0 0;
    padding-top: var(--space-2);
    border-top: 1px solid color-mix(in srgb, var(--mode) 20%, transparent);
    font-size: var(--type-sm);
    line-height: 1.4;
    color: var(--cream-sub);
}
.daily-board-you > p a { color: var(--mode-dark); }

.daily-board-empty { text-align: center; }
.daily-board-empty .ui-hint { margin-bottom: var(--space-4); }
/* La place du lecteur quand il n'en a pas : une bande posee avant les places,
   pas apres.

   Elle vivait en pied de page, ou elle arrivait une fois le podium lu, donc
   trop tard pour dire que ce podium est celui des autres. Ici elle le cadre,
   et c'est pour cela qu'elle porte l'action plutot qu'une phrase seule : deux
   blocs qui disent la meme chose a deux bouts de la page en disent un de trop,
   et l'or ne se pose qu'une fois par ecran.

   Deux rangees sur telephone (le texte, puis les boutons) et une seule des que
   la largeur le permet : la phrase est ce que l'on vient lire, les boutons ce
   que l'on fait ensuite.

   Le liseré est doré parce que la bande parle du lecteur, comme tout ce qui lui
   appartient sur cet ecran ; le fond est ce meme or dilue dans le feutre plutot
   qu'un jaune ecrit a la main. */
.daily-board-outside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    color: var(--light);
}
.daily-board-outside-copy { min-width: 0; margin: 0; }
.daily-board-outside-copy b {
    display: block;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-card);
}
.daily-board-outside-copy small {
    display: block;
    margin-top: 2px;
    font-size: var(--type-sm);
    color: var(--light-sub);
}
/* Les deux boutons sont une rangee a eux : sous le seuil ils prennent la
   largeur a deux, plutot que de s'empiler l'un sous l'autre et de faire de la
   bande une colonne de quatre lignes. */
.daily-board-outside-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
    align-items: stretch;
    flex: 1 1 100%;
}
/* La condition passe sous tout le reste : c'est une note et non une action. */
.daily-board-outside .ui-hint { flex-basis: 100%; margin-top: var(--space-1); }
.daily-board-outside .ui-hint a { color: var(--light); }

@media (min-width: 620px) {
    .daily-board-outside-actions { flex: 0 0 auto; grid-auto-columns: auto; gap: var(--space-3); }
}

/* Le partage sur un classement final, en fin de page : le lecteur qui a joue
   n'a pas besoin qu'on l'invite a jouer, et l'invitation de ceux qui n'ont pas
   joue est montee en tete de classement. */
.daily-board-share { margin-top: var(--space-5); text-align: center; }
.daily-board-share .daily-share-open { width: auto; }

.daily-board-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--type-sm);
    line-height: 1.4;
    color: var(--light-sub);
}
.daily-board-note svg { flex: 0 0 auto; }

@media (max-width: 700px) {
    /* Le bandeau se plie en trois rangées : la date tient la hauteur des deux
       premières, l'état passe sous le nom du jour, les participants prennent la
       largeur. */
    .daily-board-summary {
        grid-template-columns: 57px minmax(0, 1fr) auto;
        gap: 9px var(--space-3);
        padding: 9px var(--space-3) var(--space-3) 9px;
    }
    .daily-board-day { grid-row: 1 / span 2; }
    .daily-board-state {
        grid-column: 2 / -1;
        padding: var(--space-2) 0 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
        border-left: 0;
    }
    .daily-board-count { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; }
    .daily-board-count svg { grid-row: auto; }

    .daily-board-leader { padding: var(--space-4); }
    .daily-board-leader::after { right: 96px; }
    .daily-board-leader-hero {
        grid-template-columns: minmax(0, 1fr) 92px;
        grid-template-areas: "copy mascot" "metrics metrics";
        gap: 9px var(--space-3);
    }
    .daily-board-leader-mascot { min-height: 82px; }
    .daily-board-leader-mascot::before { width: 125px; }
    .daily-board-leader-mascot .ui-mascot { width: 82px; height: 82px; }
    /* Les deux faits se centrent sous le seuil, comme dans le proto : au large
       ils accompagnent le score à leur gauche, ici ils tiennent la largeur. */
    .daily-board-leader-metrics > span { padding: 7px var(--space-1); text-align: center; }
    .daily-board-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .daily-board-tiers { grid-template-columns: 1fr; gap: 9px; }
    /* Empilées, les cartes se touchent presque, et la languette de l'une
       mordrait sur celle du dessus : la gouttière s'ouvre juste assez pour la
       laisser passer. */
    .daily-board-tiers.has-tab { row-gap: var(--space-5); }
    .daily-board-tier { min-height: 172px; padding: var(--space-4) 96px var(--space-4) var(--space-4); }
    .daily-board-tier-mascot { right: -1px; width: 92px; height: 124px; }

    .daily-board-rest { padding: var(--space-4) var(--space-3); }
    .daily-board-tabs { display: flex; }
    .daily-board-tabs a { flex: 1; min-width: 0; min-height: 44px; }
    .daily-board-friends { padding: var(--space-3) var(--space-2); }
    .daily-board-ribbon { grid-template-columns: 60px minmax(0, 1fr); gap: var(--space-2); padding-right: var(--space-2); }
    .daily-board-ribbon-mascot { width: 60px; height: 70px; }
    .daily-board-ribbon-score { font-size: var(--type-card); }
    .daily-board-friend { grid-template-columns: 46px minmax(0, 1fr) 52px; gap: var(--space-2); }
    .daily-board-friend-place { grid-row: 1 / span 2; width: 42px; height: 42px; }
    .daily-board-friend-score { grid-area: 2 / 2; font-size: var(--type-body); }
    .daily-board-friend-clues { grid-area: 1 / 3 / span 2; }
    .daily-board-table th,
    .daily-board-table td { padding: var(--space-2) var(--space-0); }
    .daily-board-table tbody th,
    .daily-board-table tbody td { height: 70px; }

    /* Une seule rangée, et c'est ce qui rend la bande tenable sur téléphone :
       elle est collée en bas de l'écran tout le temps qu'on parcourt les
       paliers, donc chaque ligne qu'elle prend est une ligne de classement en
       moins. Les quatre cases passaient en deux colonnes sur deux rangées, ce
       qui lui faisait prendre le quart de l'écran en permanence.

       Elles tiennent en colonnes serrées : le chiffre descend d'un cran, les
       en-têtes perdent leur interlettrage et les cases leur hauteur minimale,
       qui etait dessinée pour une bande à quatre cases larges. */
    .daily-board-you { padding: var(--space-3); }
    .daily-board-you-label { padding-bottom: var(--space-2); }
    /* La première case est la plus large, et c'est la seule qui ne porte pas
       un chiffre seul : sous son rang se lit « Meilleur que 40 % » ou « rang du
       jour », qui à quatre colonnes égales passait à la ligne et donnait sa
       hauteur à toute la bande. */
    .daily-board-you-main {
        min-height: 0;
        grid-auto-flow: row;
        grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
    }
    .daily-board-you-main > span {
        min-height: 0;
        padding: 0 var(--space-2);
    }
    .daily-board-you-main small { margin-bottom: 3px; letter-spacing: 0; }
    .daily-board-you-main b { font-size: var(--type-card); }
    .daily-board-you-main b em { font-size: var(--type-label); }
    .daily-board-you-main > span > em { margin-top: 1px; font-size: var(--type-label); }
}

@media (max-width: 640px) {
    .daily-board-head {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        align-items: center;
        gap: var(--space-3);
        min-height: 0;
        padding-right: 0;
    }
    .daily-board-hero-art {
        position: relative;
        right: auto;
        bottom: auto;
        width: 108px;
        height: 145px;
    }
    .daily-board-hero-art .ui-mascot {
        width: 108px;
        height: 145px;
        margin-right: 0;
    }
    .daily-board-hero-art .ui-mascot-halo {
        bottom: -4px;
        width: 150px;
        height: 142px;
        margin-left: -75px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-board-leader-mascot::before { animation: none; }
    .daily-board-chevron { transition: none; }
}

/* ── L'historique : la liste des journées ──
   Le proto ouvre l'écran comme les autres du mode (surtitre, titre, phrase) et
   pose la mascotte archiviste à droite, avec la série en pastille. Sous le
   seuil, la pastille n'a plus la place : elle disparaît et la note plus bas dit
   la même chose en clair, ce qui est la seule raison pour laquelle les deux
   formes coexistent dans le document. */
.daily-history-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, .95fr);
    align-items: center;
    gap: var(--space-7);
    min-height: 350px;
    margin-bottom: var(--space-5);
}

.daily-history-kind { color: var(--light-sub); }
.daily-history-lead {
    max-width: 45ch;
    margin-top: 9px;
    font-size: var(--type-body);
    color: var(--light-sub);
    line-height: 1.5;
}

/* La mascotte et la série forment une seule conversation. La mascotte passe
   derrière le bandeau : son buste reste visible et son bas disparaît, ce qui
   la pose sur le bord au lieu de la laisser flotter. */
.daily-history-conversation {
    position: relative;
    align-self: end;
    min-width: 0;
    min-height: 350px;
    padding-top: 220px;
}
.daily-history-hero-art {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 300px;
    height: 300px;
    transform: translateX(-50%);
}
.daily-history-mascot {
    width: 285px;
    height: 300px;
}

/* Une seule règle, visible à toutes les largeurs : elle remplace la pastille
   desktop et le panneau d'aide qui répétaient le bandeau mobile. */
.daily-history-streak {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: var(--space-3);
    min-height: 128px;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
    border-radius: var(--radius-lg);
    background: var(--mode-card-bg);
    box-shadow: var(--shadow-felt-md);
    color: var(--light);
}
.daily-history-streak .daily-history-flame {
    font-size: 34px;
    line-height: 1;
}
.daily-history-streak-count {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.daily-history-streak-count b {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--type-card);
    color: var(--light);
}
.daily-history-streak-count small {
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--light-sub);
}
.daily-history-streak p {
    margin: var(--space-2) 0 0;
    font-size: var(--type-sm);
    line-height: 1.5;
    color: var(--light-sub);
}
.daily-history-streak em {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 5px 7px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--gold) 17%, transparent);
    color: var(--gold);
    font-style: normal;
    font-weight: 900;
    font-size: var(--type-label);
}

/* ── Les trois totaux ──
   Du verre posé sur le feutre, et la même tuile que le rapport d'une journée :
   l'étiquette au-dessus, le chiffre en dessous. */
.daily-history-summary,
.daily-recap-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: 18px;
}
.daily-history-summary .ui-stat,
.daily-recap-summary .ui-stat {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-0);
    text-align: left;
}
.daily-history-summary .ui-stat-value,
.daily-recap-summary .ui-stat-value { font-size: var(--type-section); }
.daily-history-summary .ui-stat-label,
.daily-recap-summary .ui-stat-label {
    font-size: var(--type-label);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Une journée menée au bout sans rang, jouée sans compte : deux tuiles, le
   score et les indices, le bandeau dessous disant pourquoi la troisième
   manque. */
.daily-recap-summary-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.daily-history-empty { margin-bottom: 18px; text-align: center; }
.daily-history-empty .ui-hint { margin-bottom: var(--space-3); }

/* ── Un mois, et ses journées ── */
.daily-history-month { margin-top: var(--space-4); }
.daily-history-month-title {
    margin: 0 0 var(--space-2) 5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--light-sub);
}

.daily-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* La ligne entière est la cible du clic. Cinq colonnes : la date, la journée,
   son score, la place tenue, et ce que la ligne propose. */
.daily-history-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 110px 110px 130px;
    align-items: center;
    gap: var(--space-3);
    min-height: 76px;
    padding: 10px 15px;
    border: 1px solid var(--paper-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    box-shadow: 0 7px 16px rgba(0, 0, 0, .16);
    color: var(--ink-soft);
    text-decoration: none;
    transition: transform var(--dur);
}
a.daily-history-row:hover { transform: translateX(4px); }
a.daily-history-row:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* La journée en cours ne mène nulle part : elle se teinte pour le dire, plutôt
   que de porter un état que seul le curseur révélerait. */
.daily-history-row.is-locked {
    background: linear-gradient(#ECE7DC, #E4DECE);
    cursor: default;
}
.daily-history-row.is-locked .daily-history-date { background: #526A69; }

/* Un jour non joué garde sa ligne, en pointillé : son contenu reste à
   découvrir, et une ligne absente aurait dit autre chose qu'une case vide. */
.daily-history-row.is-empty {
    border: 1px dashed color-mix(in srgb, var(--mode) 52%, transparent);
    background: linear-gradient(#FAF1F6, #EFE0E8);
}
.daily-history-row.is-empty .daily-history-score b,
.daily-history-row.is-empty .daily-history-rank b { color: var(--mode-dark); }

.daily-history-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 47px;
    height: 51px;
    border-radius: var(--radius-sm);
    background: var(--mode);
    color: var(--on-accent);
}
.daily-history-date b { font-family: var(--font-title); font-weight: 700; font-size: var(--type-card); line-height: 1; }
.daily-history-date small { font-size: var(--type-label); text-transform: uppercase; }

.daily-history-day b,
.daily-history-day small,
.daily-history-score b,
.daily-history-score small,
.daily-history-rank b,
.daily-history-rank small { display: block; }
.daily-history-day b { font-family: var(--font-title); font-weight: 600; font-size: var(--type-body); color: var(--ink); }
.daily-history-day small,
.daily-history-score small,
.daily-history-rank small { font-size: var(--type-label); font-weight: 900; color: var(--cream-sub); }
.daily-history-score b,
.daily-history-rank b { font-family: var(--font-title); font-weight: 600; font-size: var(--type-card); color: var(--ink); }

.daily-history-status {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 6px;
    font-size: var(--type-label);
    font-weight: 800;
    color: var(--mode);
}
.daily-history-status.is-locked { gap: var(--space-2); color: var(--cream-sub); }
.daily-history-lock-glyph { display: flex; }
.daily-history-lock-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.daily-history-lock-copy small {
    font-family: var(--font-code);
    font-weight: 900;
    font-size: var(--type-label);
    text-transform: uppercase;
    color: var(--cream-sub);
}
.daily-history-lock-copy b { font-size: var(--type-label); color: var(--mode-dark); }

/* Le bouton des mois précédents est posé sur le feutre, sous la liste : il la
   complète, il n'en fait pas partie. */
.daily-history-more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: var(--space-3);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .07);
    color: var(--light);
    font-size: var(--type-label);
    font-weight: 900;
    text-decoration: none;
}
.daily-history-more:hover { background: rgba(255, 255, 255, .13); }
.daily-history-more:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.daily-history-more-glyph {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 900px) {
    .daily-history-head {
        grid-template-columns: minmax(0, 1fr) 140px;
        align-items: flex-start;
        gap: var(--space-3);
        min-height: 0;
        margin-bottom: var(--space-4);
    }
    .daily-history-intro { min-width: 0; }
    .daily-history-lead { max-width: none; }
    .daily-history-conversation { display: contents; }
    .daily-history-hero-art {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        width: 140px;
        height: 180px;
        margin-bottom: -38px;
        transform: none;
    }
    .daily-history-hero-art .daily-history-mascot {
        width: 140px;
        height: 180px;
    }
    .daily-history-hero-art .ui-mascot-halo {
        bottom: -4px;
        width: 160px;
        height: 155px;
        margin-left: -80px;
    }
    .daily-history-streak {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 700px) {
    .daily-history-month-title { margin-top: var(--space-1); }
    /* Le cadran est écrit avec le statut qui le porte : sous le seuil, celui-ci
       grossit sa flèche, et une règle de même poids l'emporterait sur celle-ci
       en la laissant passer à la ligne. */
    .daily-history-status .daily-history-lock-copy { align-items: center; }
    .daily-history-status .daily-history-lock-copy small { font-size: var(--type-label); }
    .daily-history-status .daily-history-lock-copy b { font-size: var(--type-label); }
}

@media (max-width: 640px) {
    /* Sur téléphone, le personnage garde la colonne du titre puis déborde sur
       le bandeau commun, qui commence dès la ligne suivante. */
    .daily-history-head {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }
    .daily-history-hero-art {
        width: 108px;
        height: 145px;
        margin-bottom: -32px;
    }
    .daily-history-hero-art .daily-history-mascot {
        width: 108px;
        height: 145px;
    }
    .daily-history-hero-art .ui-mascot-halo {
        bottom: -4px;
        width: 140px;
        height: 135px;
        margin-left: -70px;
    }
    .daily-history-streak {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        padding: var(--space-4);
    }
    .daily-history-streak .daily-history-flame { font-size: 30px; }
    .daily-history-streak-count b { font-size: var(--type-body); }
    .daily-history-streak p { font-size: var(--type-label); }

    .daily-history-summary,
    .daily-recap-summary { gap: 6px; }
    .daily-history-summary .ui-glass,
    .daily-recap-summary .ui-glass { padding: var(--space-3) 10px; }
    .daily-history-summary .ui-stat-value,
    .daily-recap-summary .ui-stat-value { font-size: var(--type-card); }
    .daily-history-summary .ui-stat-label,
    .daily-recap-summary .ui-stat-label { font-size: var(--type-label); }

    /* La place tenue quitte la ligne : deux chiffres ne tiennent pas côte à
       côte à cette largeur, et c'est le score que l'on vient lire. */
    .daily-history-row {
        grid-template-columns: 50px minmax(0, 1fr) 75px 35px;
        gap: 7px;
        padding: var(--space-2) 10px;
    }
    .daily-history-rank { display: none; }
    /* Le cadran de minuit prend la largeur qu'il lui faut : le proto l'écrit à
       6 px dans une colonne de 35, et l'échelle s'arrêtant à 11, c'est la
       colonne qui cède plutôt que la lisibilité. */
    .daily-history-row.is-locked { grid-template-columns: 50px minmax(0, 1fr) 62px auto; }
    /* Le libellé tombe, la flèche reste : la ligne dit où elle mène par sa
       forme, pas par sa phrase. */
    .daily-history-status { font-size: 0; }
    .daily-history-status small { font-size: var(--type-label); }
    .daily-history-status b { font-size: var(--type-body); }
}

/* ── Le rapport d'une journée passée ──
   Le seul écran du parcours qui dise un mot mystère, et il le dit parce que la
   journée est close. Chaque manche est un pli : le verdict se lit en diagonale,
   l'explication se déplie. */
.daily-recap-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    margin-bottom: var(--space-7);
}
.daily-recap-intro { min-width: 0; }
.daily-recap-lead {
    margin-top: 9px;
    font-size: var(--type-body);
    color: var(--light-sub);
    line-height: 1.5;
}
.daily-recap-mascot {
    width: 285px;
    height: 300px;
}
.daily-recap-hero-art { flex: 0 0 300px; }

/* Le bandeau d'une journée sans rang : la mascotte y tient en vignette, le
   proto ne lui donnant pas d'en-tête sur cet état. */
.daily-recap-note {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: -8px 0 17px;
    padding: 11px var(--space-4);
    border: 1px solid color-mix(in srgb, var(--light-sub) 30%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--mode) 22%, transparent);
    color: var(--light);
}
.daily-recap-note-mascot { flex: 0 0 54px; }
.daily-recap-note b,
.daily-recap-note small { display: block; }
.daily-recap-note b { font-family: var(--font-title); font-weight: 600; font-size: var(--type-body); }
.daily-recap-note small { font-size: var(--type-label); line-height: 1.5; color: var(--light-sub); }
/* L'invitation à s'inscrire d'une journée jouée sans compte : l'encre claire
   du titre, pour qu'un lien se distingue du texte qu'il interrompt. */
.daily-recap-note a { color: var(--light); font-weight: 700; }

/* La bande qui mène au classement de ce jour-là : ce qu'elle est à gauche, le
   geste à droite, comme les bandeaux d'action du mode. */
.daily-recap-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 14px var(--space-4);
    border-radius: var(--radius-lg);
}
.daily-recap-board-copy {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.daily-recap-board-glyph {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--gold);
    color: var(--on-gold);
}
.daily-recap-board-copy small,
.daily-recap-board-copy b { display: block; }
.daily-recap-board-copy small {
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--light-sub);
}
.daily-recap-board-copy b {
    margin-top: 3px;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-card);
    color: var(--light);
}

/* ── Le dernier défi joué ──
   La même bande que le bandeau du classement sur le rapport, et pour la même
   raison : ce n'est pas le contenu de l'écran, c'est ce vers quoi il mène. Elle
   se range sous le hero et n'en prend pas la hauteur. */
.daily-last-run {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
}
.daily-last-run-copy {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.daily-last-run-glyph {
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--gold);
    color: var(--on-gold);
}
.daily-last-run-copy small,
.daily-last-run-copy b,
.daily-last-run-copy em { display: block; }
.daily-last-run-copy small {
    font-family: var(--font-code);
    font-weight: 800;
    font-size: var(--type-label);
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--light-sub);
}
.daily-last-run-copy b {
    margin-top: 3px;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-card);
    color: var(--light);
}
/* Les chiffres en chasse fixe, comme partout où le Défi en aligne : ce sont
   les mêmes que porte la carte résultat, lus d'un coup d'œil. Le rang y est un
   lien, donc il se souligne : rien d'autre ne dirait qu'il mène quelque part. */
.daily-last-run-copy em {
    margin-top: 2px;
    font-family: var(--font-code);
    font-weight: 700;
    font-size: var(--type-sm);
    font-style: normal;
    color: var(--light-sub);
}
/* Les deux actions côte à côte dès le téléphone : empilées sur toute la
   largeur, elles donnaient à ce rappel le poids du hero qu'il accompagne. */
.daily-last-run-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-2);
    align-content: center;
}
.daily-last-run-actions .daily-share { margin-top: 0; }

@media (min-width: 620px) {
    .daily-last-run { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .daily-last-run-actions { grid-auto-flow: column; gap: var(--space-3); }
    .daily-last-run-actions .daily-share { margin-top: 0; }
}

/* Le palier est une médaille qui s'ouvre, pas un lien souligné au milieu d'une
   ligne de chiffres.

   Elle porte le métal de son palier et non l'or du lecteur. L'or dit « ceci est
   à toi », ce qui a un sens sur le classement, où il faut distinguer la ligne
   du lecteur de celles des autres ; ce bloc-ci est sa dernière partie tout
   entier, donc il n'y a rien à distinguer et la couleur redevient libre de
   nommer le palier. La carte de partage de cette même journée le fait déjà, et
   c'est la même journée que l'on regarde.

   Les valeurs sont celles de cette carte (`.daily-share[data-tier]`) et non
   celles des cartes de palier du classement : un métal sur le feutre n'est pas
   un métal sur le papier, les premières étant une face claire posée sur du
   sombre et les secondes un liseré et un lavis posés sur de la crème. Même
   palier, deux surfaces, deux valeurs. Au-delà du quatrième rang il n'y a plus
   de palier à nommer, et le neutre de cette carte prend la place.

   Le survol ne fonce pas le métal, il l'allume : cinq métaux assombris font
   cinq teintes de plus à écrire, là où un halo de la couleur déjà là n'en
   demande aucune. */
.daily-last-run-rank {
    --medal-face: var(--gold);

    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    margin-left: var(--space-2);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--medal-face);
    color: var(--ink);
    font-family: var(--font-text);
    font-weight: 900;
    font-size: var(--type-label);
    text-decoration: none;
    vertical-align: baseline;
    transition: box-shadow var(--dur-fast);
}
/* Élite est violet et non doré, et c'est la seule valeur que cette médaille ne
   reprenne pas telle quelle à la carte de partage. Sur cette carte, le métal du
   palier est le dégradé du fond, prune pour Élite ; son `--share-accent` jaune
   est le rehaut du score parfait posé dessus, et il se trouve qu'il coïncide
   avec le métal pour les quatre autres. Pris ici, il donnait deux médailles
   jaunes à distinguer, Élite et Or. */
.daily-last-run-rank[data-tier="elite"] { --medal-face: #D8C6F0; }
.daily-last-run-rank[data-tier="gold"] { --medal-face: #F7D25F; }
.daily-last-run-rank[data-tier="silver"] { --medal-face: #DCE8EE; }
.daily-last-run-rank[data-tier="bronze"] { --medal-face: #F0AD86; }
/* Hors palier, la pastille sort de la famille des métaux au lieu d'en prendre
   un cinquième : le neutre de la carte de partage (`#D9E2E8`) est un gris bleu,
   donc à deux doigts de l'Argent, et le bleu franc de son `data-tier="other"`
   se relit comme un métal de plus. Une pierre chaude ne peut se confondre avec
   aucun des quatre, et c'est bien ce qu'elle dit : ce rang n'a pas de palier. */
.daily-last-run-rank[data-tier="other"] { --medal-face: #D8D2C8; }
.daily-last-run-rank:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--medal-face) 40%, transparent); }

/* Le partage de la journee close, dans l'en-tete de l'ecran : il y est
   l'action de ce qu'on vient de lire, la ou une ligne a lui le laissait flotter
   entre les tuiles et le bandeau du classement. */
.daily-recap-share { margin-top: var(--space-4); }
.daily-recap-share .daily-share-open { width: auto; }

@media (max-width: 560px) {
    .daily-recap-share .daily-share-open { width: 100%; }
}

.daily-recap-rounds-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 3px 9px;
}
/* Une commande et non un bouton d'écran : elle agit sur la liste qui la suit,
   et le proto lui donne la taille d'une étiquette. */
.daily-recap-fold-all {
    padding: 7px var(--space-3);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .1);
    color: var(--light);
    font-family: var(--font-text);
    font-weight: 900;
    font-size: var(--type-label);
    cursor: pointer;
}
.daily-recap-fold-all:hover { background: rgba(255, 255, 255, .18); }
.daily-recap-fold-all:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.daily-recap-rounds {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Le verdict teinte la manche entière, liseré compris : treize cartes se lisent
   alors d'un coup d'œil, ce qu'un simple bord coloré ne donnait pas. */
.daily-recap-round {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--cream), var(--cream-2));
    box-shadow: var(--shadow-paper-md);
    color: var(--ink-soft);
}
.daily-recap-round[data-outcome="correct"] {
    background: var(--success-bg);
    box-shadow: inset 5px 0 0 var(--success), inset 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent), var(--shadow-paper-md);
}
.daily-recap-round[data-outcome="incorrect"] {
    background: var(--danger-bg);
    box-shadow: inset 5px 0 0 var(--danger), inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent), var(--shadow-paper-md);
}
.daily-recap-round[data-outcome="passed"],
.daily-recap-round[data-outcome="unplayed"] {
    background: var(--cream-2);
    box-shadow: inset 5px 0 0 var(--paper-edge), inset 0 0 0 1px var(--paper-border), var(--shadow-paper-md);
}

.daily-recap-round-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) 60px 38px;
    align-items: center;
    gap: var(--space-3);
    min-height: 65px;
    padding: var(--space-2) 13px;
    list-style: none;
    cursor: pointer;
}
.daily-recap-round-head::-webkit-details-marker { display: none; }
.daily-recap-round-head:hover { background: color-mix(in srgb, var(--mode) 7%, transparent); }
.daily-recap-round-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }

.daily-recap-round-number {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--mode) 20%, transparent);
    border-radius: 9px;
    background: var(--mode-light);
    color: var(--mode-dark);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-sm);
}
.daily-recap-round[data-outcome="correct"] .daily-recap-round-number {
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
    background: color-mix(in srgb, var(--success) 18%, var(--cream));
    color: var(--success);
}
.daily-recap-round[data-outcome="incorrect"] .daily-recap-round-number {
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 16%, var(--cream));
    color: var(--danger);
}

.daily-recap-word,
.daily-recap-answer { min-width: 0; }
.daily-recap-word small,
.daily-recap-word b,
.daily-recap-answer small,
.daily-recap-answer b { display: block; }
.daily-recap-word small,
.daily-recap-answer small {
    font-size: var(--type-label);
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--cream-sub);
}
.daily-recap-word b,
.daily-recap-answer b {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-body);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.daily-recap-answer b { font-weight: 500; }
.daily-recap-round[data-outcome="correct"] .daily-recap-word small { color: var(--success); }
.daily-recap-round[data-outcome="incorrect"] .daily-recap-word small,
.daily-recap-round[data-outcome="incorrect"] .daily-recap-answer b { color: var(--danger); }

.daily-recap-points {
    justify-self: end;
    min-width: 43px;
    padding: 5px var(--space-2);
    border-radius: 20px;
    background: var(--mode);
    color: var(--on-accent);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-sm);
    text-align: center;
}
.daily-recap-round[data-outcome="correct"] .daily-recap-points { background: var(--success); }
.daily-recap-round[data-outcome="incorrect"] .daily-recap-points { background: var(--danger); }
.daily-recap-round[data-outcome="passed"] .daily-recap-points { background: var(--cream-sub); }

/* Le chevron dit l'état du pli : il tourne, il ne change pas de glyphe. */
.daily-recap-fold {
    display: grid;
    justify-self: end;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--mode) 10%, transparent);
    color: var(--cream-sub);
    transition: transform var(--dur);
}
.daily-recap-round[open] .daily-recap-fold { transform: rotate(180deg); }

.daily-recap-round-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 18px;
    padding: 13px 20px 16px 65px;
    border-top: 1px solid var(--paper-border);
    background: rgba(255, 255, 255, .7);
}
.daily-recap-round-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--type-label);
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--cream-sub);
}

.daily-recap-clues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}
.daily-recap-clue {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 20px;
    background: var(--mode-light);
    color: var(--mode-dark);
    font-size: var(--type-label);
    font-weight: 700;
}
/* Un indice non ouvert se lit, mais il se voit aussi : c'est ce que la manche
   avait gardé pour soi, et c'est là tout l'intérêt de le découvrir après. Le
   pointillé est ce qui le dit, comme partout ailleurs dans le jeu : une pastille
   pleine est un indice payé, une pastille en pointillé un indice resté fermé. */
.daily-recap-clue[data-locked] {
    background: color-mix(in srgb, var(--cream-sub) 10%, var(--cream));
    border: 1px dashed color-mix(in srgb, var(--cream-sub) 60%, var(--cream));
    color: var(--cream-sub);
}
/* La mention est une pastille dans la pastille : posée en texte simple, elle se
   lisait comme la suite du mot. */
.daily-recap-clue small {
    padding: 2px 5px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--cream-sub) 26%, var(--cream));
    color: var(--ink-soft);
    font-size: var(--type-label);
    font-weight: 700;
    text-transform: uppercase;
}

/* La part des joueurs est une pastille et non une ligne de texte : c'est un
   fait sur la manche, pas une légende sous les indices. */
.daily-recap-found {
    display: inline-flex;
    margin-top: 9px;
    padding: 5px var(--space-2);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--mode) 10%, transparent);
    color: var(--mode-dark);
    font-size: var(--type-label);
    font-weight: 900;
}

.daily-recap-maths { border-left: 1px solid var(--paper-border); padding-left: 17px; }
.daily-recap-maths b {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: var(--type-sm);
    color: var(--ink);
}

@media (max-width: 700px) {
    .daily-recap-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .daily-recap-head:not(:has(.daily-recap-hero-art)) { grid-template-columns: minmax(0, 1fr); }
    .daily-recap-intro { text-align: left; }
    .daily-recap-hero-art { width: 108px; height: 145px; }
    .daily-recap-hero-art .daily-recap-mascot {
        width: 108px;
        height: 145px;
        margin-right: 0;
    }
    .daily-recap-hero-art .ui-mascot-halo {
        bottom: -4px;
        width: 150px;
        height: 142px;
        margin-left: -75px;
    }
}

@media (max-width: 640px) {
    .daily-recap-note { align-items: flex-start; }
    .daily-recap-board { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 14px; }

    /* Le mot et la réponse s'empilent : à cette largeur, deux colonnes de
       texte laissent trois lettres à chacune. */
    .daily-recap-round-head {
        grid-template-rows: auto auto;
        grid-template-columns: 30px minmax(0, 1fr) 42px 29px;
        gap: 2px 7px;
        padding: var(--space-2);
    }
    .daily-recap-round-number { grid-row: 1 / span 2; width: 30px; height: 30px; }
    .daily-recap-word { grid-area: 1 / 2; }
    .daily-recap-answer { grid-area: 2 / 2; }
    .daily-recap-points { grid-row: 1 / span 2; min-width: 38px; padding: 5px var(--space-1); font-size: var(--type-label); }
    .daily-recap-fold { grid-row: 1 / span 2; width: 26px; height: 26px; }
    .daily-recap-word b,
    .daily-recap-answer b { font-size: var(--type-label); }
    .daily-recap-word small,
    .daily-recap-answer small { font-size: var(--type-label); }

    .daily-recap-round-body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-3) 14px 15px;
    }
    .daily-recap-maths { border-left: 0; border-top: 1px solid var(--paper-border); padding: 9px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .daily-history-row,
    .daily-recap-fold { transition: none; }
}