:root {
    --teckel-scale: 1;
}

/* Retire le contour bleu par défaut du navigateur sur les éléments
   cliquables au clic/tap (souris, tactile) — ce contour est utile pour
   la navigation au clavier (Tab), donc on le restaure uniquement dans
   ce cas via :focus-visible plutôt que de la retirer complètement. */
button, .letter, .selected-letter {
    -webkit-tap-highlight-color: transparent; /* supprime le flash bleu au tap mobile */
    user-select: none; /* empêche la sélection de texte sur double-tap/clic répété */
    -webkit-user-select: none;
}

button:focus, .letter:focus {
    outline: none;
}

button:focus-visible, .letter:focus-visible {
    outline: 2px solid #2980b9;
    outline-offset: 2px;
}

html { scrollbar-gutter: stable; }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5deb3;
    background-image:
        radial-gradient(circle at 6px 6px, rgba(138, 90, 42, 0.10) 2px, transparent 2.5px),
        radial-gradient(circle at 2px 14px, rgba(138, 90, 42, 0.10) 1.3px, transparent 1.8px),
        radial-gradient(circle at 10px 14px, rgba(138, 90, 42, 0.10) 1.3px, transparent 1.8px);
    background-size: 48px 48px;
    font-family: Arial, sans-serif;
    margin: 0;
    overflow-x: hidden; /* le chien ne doit jamais créer de scroll horizontal */
    padding: 92px 16px 28px; /* padding-top réserve la barre fixe du haut (2 rangées : onglets + date), padding-bottom réserve le footer fixe */
    /* Marges latérales plus généreuses + encoches / barre gestuelle */
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(28px, calc(28px + env(safe-area-inset-bottom)));
    box-sizing: border-box;
}

#game-container {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 480px;
    min-width: 0;
    box-sizing: border-box;
}

#logo {
    display: none; /* Cette propriété masque l'élément */
    width: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.5));
}

/* ===================== Barre du haut ===================== */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    /* Grille 3 colonnes plutôt qu'un flex avec une date en position:absolute :
       hors du flux, la pastille de date ne réservait aucune place et venait
       recouvrir les onglets de mode sur écran étroit. */
    /* Deux rangées dans la colonne de gauche : les onglets de mode en haut,
       la date juste en dessous. La date n'est plus coincée au centre entre
       les onglets et les actions, où elle devait rétrécir pour tenir. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 3px;
    padding: 10px 16px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    background-color: rgba(245, 222, 179, 0.92);
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

#mode-toggle { grid-column: 1; grid-row: 1; }
#top-actions { grid-column: 3; grid-row: 1 / span 2; }

#top-date .date-short { display: none; }
#top-date {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-weight: bold;
    color: #5a3a1e;
    text-transform: capitalize;
    font-size: 15px;
    background-color: rgba(255, 250, 240, 0.7);
    border: 2px solid #d9a86a;
    border-radius: 20px;
    padding: 4px 14px;
    white-space: nowrap;
}

#top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Boutons ronds de l'en-tête. Sélecteur d'enfant direct : les entrées du
   menu déroulant sont imbriquées dans #top-actions et héritaient sinon de
   cette taille fixe, ce qui tronquait leurs libellés. */
#top-actions > button,
#menu-wrap > #menu-button {
    background-color: #fffaf0;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    color: #c25411;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#top-actions > button:hover,
#menu-wrap > #menu-button:hover {
    background-color: #f4e4c1;
}

#menu-wrap {
    position: relative;
}

#menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #fffaf0;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    padding: 4px;
    /* Largeur au contenu, bornée : à 176px fixes le libellé le plus long
       se serrait, et le menu paraissait étriqué sur mobile. */
    min-width: 200px;
    width: max-content;
    max-width: min(78vw, 280px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

#menu-dropdown[hidden] {
    display: none;
}

#menu-dropdown button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #5a3a1e;
    text-align: left;
    white-space: nowrap;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Séparateur fin entre les items, sauf sous le dernier. */
#menu-dropdown button:not(:last-child) {
    border-bottom: 1px solid rgba(90, 58, 30, 0.14);
    border-radius: 0;
}

#menu-dropdown button:hover {
    background-color: #f4e4c1;
}

/* Icônes du menu : même teinte accent que les icônes de l'en-tête
   (trophée, menu, info), taille fixe, alignées avec le libellé. */
#menu-dropdown button svg,
#menu-dropdown #sound-icon svg {
    color: #c25411;
    flex: 0 0 auto;
}

#menu-dropdown #sound-icon {
    display: inline-flex;
    align-items: center;
}

#day-info {
    font-size: 14px;
    color: #7a5230;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    line-height: 0;
}

#day-info .loading-hint {
    line-height: 1.4;
    margin: 6px 0;
}

#today-date {
    font-weight: bold;
    color: #5a3a1e;
    text-transform: capitalize;
    font-size: 15px;
}

#words-found-count {
    font-weight: bold;
}

.loading-hint {
    display: inline-block;
    font-style: italic;
    color: #b07a4a;
}

#images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px calc(50% - 50vw) 10px; /* étend la largeur jusqu'aux bords de la fenêtre */
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    padding: 0 20px; /* le teckel ne doit jamais toucher les bords de l'écran */
    overflow: hidden;
    box-sizing: border-box;
    /* Hauteur fixe (= taille naturelle max du teckel) pour que le reste
       de la page (clavier de lettres, boutons) ne bouge JAMAIS quand le
       teckel rétrécit avec --teckel-scale — sinon le joueur risque de
       mis-cliquer pendant que les éléments se déplacent sous son doigt. */
    height: 180.2px;
    /* padding-right dynamique géré en JS (voir applyResponsiveScale) :
       n'est appliqué que lorsque le teckel risque réellement de passer
       sous le panneau "Mes teckels du jour", pas en permanence — sinon
       le teckel resterait visuellement décalé à gauche même pour un
       petit mot qui n'a aucune raison de l'être. */
}

/* ===================== Animations du teckel ===================== */

/* Petit signe de tête/queue à chaque lettre ajoutée ou retirée : un
   mouvement de rotation discret, dans l'esprit d'un chien qui réagit. */
@keyframes nod-tete {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(-6deg); }
    70% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

@keyframes nod-queue {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(8deg); }
    70% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

#tete-image.nodding {
    animation: nod-tete 0.35s ease-in-out;
    transform-origin: 70% 80%;
}

#queue-image.nodding {
    animation: nod-queue 0.35s ease-in-out;
    transform-origin: 90% 50%;
}

/* Saut du chien entier à la validation, amplitude pilotée par une
   variable CSS (--jump-height) définie en JS selon le score obtenu. */
@keyframes teckel-jump {
    0% { transform: translateY(0); }
    35% { transform: translateY(calc(-1 * var(--jump-height, 14px))); }
    55% { transform: translateY(2px); }
    75% { transform: translateY(calc(-0.3 * var(--jump-height, 14px))); }
    100% { transform: translateY(0); }
}

#images-container.celebrating,
#dynamic-letter-container.celebrating {
    animation: teckel-jump 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===================== Confettis pour les très bons mots ===================== */

#confetti-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 900;
}

.confetti-piece {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    opacity: 0.95;
    animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0.4; }
}

/* ===================== DEV MODE — à supprimer avant mise en ligne ===================== */

#dev-panel {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 12px;
    background-color: #222;
    color: #eee;
    border: 2px solid #f1c40f;
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    z-index: 2000;
    flex-direction: column;
    gap: 6px;
    width: 180px;
}

#dev-panel.visible {
    display: flex;
}

#dev-panel strong {
    color: #f1c40f;
    text-align: center;
}

#dev-panel button {
    font-size: 11px;
    padding: 4px 6px;
    background-color: #f1c40f;
    color: black;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#dev-panel button:hover {
    background-color: #d4ac0d;
}

.dev-row {
    display: flex;
    gap: 4px;
}

#dev-letters-input {
    width: 70px;
    font-size: 11px;
    text-transform: uppercase;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid #999;
}

#dev-best-word {
    font-size: 11px;
    color: #f1c40f;
    word-break: break-word;
}

.selected-letter {
    position: relative; /* Pour positionner le chiffre en bas à droite */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-sizing: border-box; /* la bordure doit être comprise dans la largeur/hauteur fixées en JS, sinon elle s'ajoute par-dessus et le teckel déborde de l'écran sur les mots longs */
    border: calc(4px * var(--teckel-scale, 1)) solid black;
    background-color: #f0853d;
    font-size: calc(24px * var(--teckel-scale, 1));
    color: black;
    animation: letter-settle 0.18s ease-out;
    transform-origin: bottom center;
    transition: width 0.15s ease-out, height 0.15s ease-out;
}

@keyframes letter-settle {
    0% { transform: scaleY(0.85) translateY(4px); opacity: 0.6; }
    100% { transform: scaleY(1) translateY(0); opacity: 1; }
}

#dynamic-letter-container {
    visibility: hidden; /* Caché par défaut */
    height: calc(66px * var(--teckel-scale, 1));
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: height 0.15s ease-out;
    /* La tête/queue ont leur corps visuel légèrement sous le centre
       géométrique de leur image (oreille/queue fine qui remonte) ; on
       descend le bloc de lettres pour recoller avec le corps du chien.
       Valeur mesurée directement sur les images (offset du centre du
       moignon par rapport au centre de l'image ≈ 11.7px à scale 1). */
    transform: translateY(calc(11.7px * var(--teckel-scale, 1)));
}

.letter-content {
    font-size: calc(38px * var(--teckel-scale, 1));
    transform: translateY(calc(-3px * var(--teckel-scale, 1)));
}

.letter-score {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: calc(11px * var(--teckel-scale, 1));
    line-height: 1;
    color: rgba(0, 0, 0, 0.65);
}

/* ===================== Mètre / règle du mot en cours ===================== */

#ruler-container {
    position: relative;
    width: 100%; /* le parent #game-container borne déjà à 480px et gère les marges latérales */
    margin: 0 auto 6px;
    padding-top: 13px; /* réserve la place du fanion "record" au-dessus de la règle */
    opacity: 0.75;
    transition: opacity 0.2s ease-out;
}

/* Plus présente dès qu'un mot est en cours de formation. */
#ruler-container.active {
    opacity: 1;
}

#ruler-track {
    position: relative;
    height: 14px;
    background-color: #fbeede;
    border: 1.5px solid #d9b8a0;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Remplissage orange qui grandit avec la longueur du mot en cours. */
#ruler-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: #f0853d;
    transition: width 0.18s ease-out, background 0.2s ease-out;
    z-index: 1;
}

#ruler-fill.beats-record {
    background: #4caf50;
}

/* Graduations (traits tous les 10 cm, chiffres tous les 20 cm). */
#ruler-ticks {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

#ruler-ticks .ruler-tick {
    position: absolute;
    top: 0;
    width: 1px;
    background: rgba(120, 80, 50, 0.35);
}

#ruler-ticks .ruler-tick.minor { height: 4px; }
#ruler-ticks .ruler-tick.major { height: 7px; background: rgba(120, 80, 50, 0.55); }

#ruler-ticks .ruler-tick-label {
    position: absolute;
    bottom: 0px;
    transform: translateX(-50%);
    font-size: 7px;
    color: rgba(120, 80, 50, 0.7);
    font-family: 'Menlo', 'Consolas', monospace;
}

/* Repère du record du jour : petit fanion vertical, superposé à la règle. */
#ruler-record-marker {
    position: absolute;
    top: 13px;  /* aligné sur le haut de la piste (padding-top du conteneur) */
    height: 14px; /* = hauteur de #ruler-track */
    width: 0;
    border-left: 1.5px dashed #c0392b;
    z-index: 3;
    transition: left 0.18s ease-out;
}

.ruler-record-flag {
    position: absolute;
    top: -12px;
    left: 1px;
    transform: translateX(-50%);
    background: #c0392b;
    color: #fff;
    font-size: 7.5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 3px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
}

/* Repère du maximum possible du jour (objectif). */
#ruler-goal-marker {
    position: absolute;
    top: 13px;
    height: 14px;
    width: 0;
    border-left: 1.5px solid #3a2410;
    z-index: 3;
    transition: left 0.18s ease-out;
}

.ruler-goal-flag {
    position: absolute;
    top: -12px;
    left: 1px;
    transform: translateX(-50%);
    background: #3a2410;
    color: #fff;
    font-size: 7.5px;
    font-weight: bold;
    padding: 0 3px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.5;
}

#ruler-readout {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 2px;
    padding: 0 1px;
    min-height: 13px;
}

#ruler-current {
    font-size: 12px;
    font-weight: bold;
    color: #94491a;
}

#ruler-current.beats-record { color: #2e7d32; }

#ruler-status {
    font-size: 10.5px;
    font-weight: bold;
    color: #7a5a38;
}

/* La hauteur réservée correspond à celle du score REMPLI (gratification +
   "Ton Teckel mesure" + le score), sinon l'affichage du score pousse la
   mise en page et fait sortir "Valider" de l'écran sur les écrans courts. */
#score-container {
    font-size: 24px;
    margin-bottom: 8px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.score-highlight {
    font-weight: bold;
    font-size: 1.5em; /* Ajustez la taille selon vos besoins */
    color: rgb(60, 132, 26);
}

.score-gratification {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Mention affichée quand le joueur trouve LE meilleur mot possible du jour. */
.score-best-note {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1f7a3d;
    animation: best-note-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes best-note-pop {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}
html.chrono-active .score-best-note { color: var(--chrono-cyan); }

.score-text {
    font-size: 1em; /* Ajustez la taille selon vos besoins */
    color: rgb(60, 132, 26);
}

/* Paliers de mérite : le score gagne en couleur et en contour à mesure
   que le mot trouvé est meilleur. tier-1 = modeste, tier-4 = excellent. */
.score-highlight.tier-1,
.score-gratification.tier-1 {
    color: rgb(60, 132, 26);
}

.score-highlight.tier-2,
.score-gratification.tier-2 {
    color: #8a9e2e;
}

.score-highlight.tier-3,
.score-gratification.tier-3 {
    color: #d4860b;
}

.score-highlight.tier-4,
.score-gratification.tier-4 {
    color: #c4470a;
}

.score-highlight.tier-5,
.score-gratification.tier-5 {
    color: #d6336c;
}

.score-highlight.tier-6,
.score-gratification.tier-6 {
    color: #c0392b;
}

.score-highlight.tier-2 {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.score-highlight.tier-3 {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.score-highlight.tier-4 {
    text-shadow: 1.5px 1.5px 0 black;
    -webkit-text-stroke: 0.5px black;
}

.score-highlight.tier-5 {
    text-shadow: 1.5px 1.5px 0 black;
    -webkit-text-stroke: 0.7px black;
    font-size: 1.6em;
}

.score-highlight.tier-6 {
    color: #c0392b;
    text-shadow: 2px 2px 0 black, -1px -1px 0 black;
    -webkit-text-stroke: 1px black;
    font-size: 1.7em;
}

/* ===================== Feedback : mot invalide ===================== */

/* Secousse horizontale du teckel : langage universel du "non".
   Amplitude volontairement modeste (6px) pour rester ludique sans agresser. */
@keyframes teckel-shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-6px); }
    30%      { transform: translateX(5px); }
    45%      { transform: translateX(-4px); }
    60%      { transform: translateX(3px); }
    75%      { transform: translateX(-2px); }
    90%      { transform: translateX(1px); }
}

#images-container.rejecting,
#dynamic-letter-container.rejecting {
    animation: teckel-shake 0.42s ease-in-out;
}

/* Pulsation du message d'erreur : garantit qu'un clic répété sur "Valider"
   avec la même erreur produise bien un signal visible (sinon le texte
   statique donne l'impression que le clic n'a pas été pris en compte). */
@keyframes feedback-pop {
    0%   { transform: scale(0.94); opacity: 0.5; }
    55%  { transform: scale(1.04); }
    100% { transform: scale(1); opacity: 1; }
}

#feedback-message.error.pulsing {
    animation: feedback-pop 0.3s ease-out;
}

/* Respect des préférences système : pas d'animation pour qui n'en veut pas.
   Le message d'erreur textuel reste, lui, toujours affiché. */
@media (prefers-reduced-motion: reduce) {
    #images-container.rejecting,
    #dynamic-letter-container.rejecting,
    #feedback-message.error.pulsing {
        animation: none;
    }
}

#feedback-message {
    min-height: 14px;
    font-size: 15px;
    margin-top: 4px;
    font-weight: bold;
}

#feedback-message.error {
    color: #c0392b;
}

#feedback-message.success {
    color: rgb(60, 132, 26);
}

.side-image {
    height: calc(180.2px * var(--teckel-scale, 1));
    flex-shrink: 0;
    transition: height 0.15s ease-out;
}

#letters-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(6px, 2vw, 10px);
    margin: 10px auto;
    width: 100%; /* le parent #game-container borne déjà à 480px et gère les marges latérales */
}

.letter {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #f16c20;
    /* Noir, comme les segments du teckel (.selected-letter) : le blanc sur
       cet orange ne passait AA sur AUCUN état (3.04 normal, 3.6 hover,
       1.61 disabled). En noir : 6.91 / 5.84 / 13.08. */
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(20px, 6vw, 30px);
    cursor: pointer;
    text-transform: uppercase;
    border: 4px solid black;
    box-sizing: border-box;
}

.letter.disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.letter.last-selected {
    background-color: #8a8a8a !important;
}

.percentage {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    /* Petit texte (11px) => seuil AA strict de 4.5:1. Le blanc translucide
       échouait largement ; ce brun très foncé passe sur tous les états. */
    color: rgba(0, 0, 0, 0.75);
    font-weight: bold;
}

#input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}

/* Les trois boutons d'action partagent la même empreinte carrée pour que
   l'espacement (via le gap du conteneur) soit parfaitement régulier, quelle
   que soit la forme de chaque icône.
   48x48 = zone tactile recommandée (Material Design ; > 44px de l'HIG Apple),
   l'icône visible restant à 30px. */
#shuffle-button,
#reset-button,
#delete-button {
    position: relative;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.15s ease-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#reset-button:hover svg,
#delete-button:hover svg {
    stroke: #a83c06;
}

#reset-button:hover { transform: scale(1.12); }
#delete-button:hover { transform: translateX(-2px); }

#reset-button:active,
#delete-button:active {
    transform: scale(0.9);
}

#shuffle-button {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.15s ease-out;
}

#shuffle-button:hover:not(:disabled) svg {
    transform: rotate(180deg);
    transition: transform 0.4s ease-out;
}

#shuffle-button:active:not(:disabled) {
    transform: scale(0.9);
}

#shuffle-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Petit compteur d'essais restants, calé sur le coin de l'ICÔNE (30px) et
   non sur l'empreinte tactile (48px), pour rester visuellement accroché. */
#shuffle-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    box-sizing: border-box;
    background: #b84208;
    color: #fff;
    border: 1.5px solid #fdf0e2;
    border-radius: 999px;
    font-size: 10px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
}

#shuffle-button:disabled #shuffle-count {
    background: #9a9a9a;
}


#word-input {
    display: none; /* Cette propriété masque l'élément */
    font-size: 24px;
    padding: 5px;
    width: 200px;
    text-align: center;
    text-transform: uppercase;
}

/* PRIMAIRE : l'action attendue du joueur. Seul bouton à fond plein.
   Même orange (#f16c20) et même texte NOIR que les tuiles de lettres et les
   segments du teckel : toute la DA est cohérente, et le noir sur cet orange
   donne 6.91:1 (bien meilleur que le blanc, qui plafonnait à 3.04).
   Il se distingue des tuiles non par la couleur mais par son poids : bordure
   épaisse + ombre portée, comme les autres éléments saillants du jeu. */
#validate-button {
    background-color: #f16c20;
    color: black;
    border: 4px solid black;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
    width: 100%; /* le parent #game-container borne déjà à 480px et gère les marges latérales */
    padding: 7px 5px;
    min-height: 48px; /* action principale : zone tactile confortable */
    font-size: 24px;
    cursor: pointer;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease-out, transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

#validate-button:hover:not(:disabled) {
    background-color: #e55b10;
}

/* Le bouton "s'enfonce" : l'ombre disparaît et il se décale d'autant. */
#validate-button:active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.25);
}

#validate-button:disabled {
    background-color: #c9b8a8;
    color: #6b5c4f;
    box-shadow: none;
    cursor: not-allowed;
}

button {
    padding: 2px 5px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #ff7700;
    outline: none; /* Pour éviter une bordure par défaut lors de la mise au point */
}

button:disabled {
    background-color: #999;
    cursor: not-allowed;
}

.letter:hover {
    background-color: #e55b10; /* Changer la couleur de fond en survolant */
    border-color: #d44a00; /* Changer la couleur de la bordure en survolant */
}

/* ===================== Panneau latéral : ancré dans un coin, ne perturbe pas le centrage du jeu ===================== */

/* Le panneau vit désormais DANS une modale (#history-modal) : plus de
   position fixe ni de cadre propre, la modal-content s'en charge. */
#history-panel {
    width: 100%;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
}

#history-panel h2 {
    font-size: 16px;
    margin: 0 0 10px 0;
    text-align: center;
    color: #5a3a1e;
}

#today-header {
    text-align: center;
    margin-bottom: 10px;
}

#today-header h2 {
    margin: 0;
}

#today-summary {
    font-size: 12px;
    color: #8a6a45;
    margin-top: 3px;
    line-height: 1.5;
}

#today-summary strong {
    color: #5a3a1e;
}

#today-record strong {
    color: #c4470a;
}

.today-sep {
    margin: 0 4px;
    opacity: 0.55;
}

#history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Pas de scroll interne : la modale gère un scroll unique (cf.
       #history-modal .modal-content). Éviter le double scroll. */
}

.history-item {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

.history-item .history-side-image {
    height: 42px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.history-item .history-queue {
    margin-right: 0;
}

.history-item .history-tete {
    margin-left: 0;
}

.history-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    background-color: #f0853d;
    border: 3px solid black;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 13px;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
    transition: width 0.3s ease-out;
}

.history-item.is-best .history-body {
    box-shadow: 0 0 0 2px gold inset;
}

.history-item .history-word {
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item .history-score {
    font-size: 12px;
    color: #3a2410;
    white-space: nowrap;
}

#history-empty {
    text-align: center;
    font-size: 12px;
    color: #8a6a45;
    font-style: italic;
    margin-top: 6px;
    line-height: 1.4;
}

#history-panel.has-words #history-empty {
    display: none;
}

/* ===================== Révélation de la veille ===================== */

#yesterday-reveal {
    background-color: transparent;
    border: none;
    border-bottom: 1px dashed #c9a878;
    border-radius: 0;
    padding: 0 0 8px 0;
    margin-bottom: 10px;
    text-align: center;
}

#yesterday-reveal h2 {
    font-size: 10.5px;
    margin: 0 0 3px 0;
    color: #8a6a45;
    font-style: italic;
    font-weight: normal;
}

#yesterday-word {
    font-size: 13px;
    font-weight: bold;
    color: #8a6a40;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#yesterday-word .yesterday-score {
    color: #8a6a45;
    font-size: 11px;
    margin-left: 5px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

#yesterday-letters {
    font-size: 9.5px;
    color: #b09570;
    margin-top: 3px;
    font-family: 'Menlo', 'Consolas', monospace;
    letter-spacing: 1.5px;
}

#yesterday-mine {
    font-size: 11px;
    color: #5a3a1e;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed #e0cbb0;
}

#yesterday-mine .ym-word {
    font-weight: bold;
    text-transform: uppercase;
    color: #c4470a;
}

#yesterday-mine .ym-none {
    font-style: italic;
    color: #8a6a45;
}

/* ===================== Accordéon "Historique" (veille + records passés) ===================== */

#history-archive {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed #c9a878;
}

#archive-toggle {
    width: 100%;
    min-height: 44px; /* zone tactile mini */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background-color: #f6e6cf;
    border: 2px solid #d9b88f;
    border-radius: 8px;
    cursor: pointer;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: bold;
    color: #5a3a1e;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* États explicites : le fond reste toujours défini pour que le bouton ne
   "perde" jamais sa couleur au clic / focus. */
#archive-toggle:hover,
#archive-toggle:focus,
#archive-toggle:active {
    background-color: #f0d9b8;
    border-color: #c99b63;
    color: #5a3a1e;
    outline: none;
}

#archive-toggle[aria-expanded="true"] {
    background-color: #f0d9b8;
    border-color: #c99b63;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#archive-chevron {
    transition: transform 0.2s ease-out;
    font-size: 15px;
    line-height: 1;
    color: #c07a35;
}

#archive-toggle[aria-expanded="true"] #archive-chevron {
    transform: rotate(180deg);
}

#archive-content {
    border: 2px solid #c99b63;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px;
    background-color: #fffdf8;
}

/* La révélation de la veille vit maintenant DANS l'accordéon : on retire
   sa bordure/marge basse d'origine et on ne la garde que si un bloc de
   records passés la suit. */
#archive-content #yesterday-reveal {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#archive-content #yesterday-reveal:not([hidden]) + #past-records {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e0cbb0;
}

#past-records-heading {
    font-size: 12px;
    font-weight: bold;
    color: #5a3a1e;
    margin-bottom: 6px;
    text-align: center;
}

#past-records-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.past-record-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: #5a3a1e;
}

.past-record-item .pr-date {
    flex-shrink: 0;
    width: 52px;
    color: #8a6a45;
    font-size: 10.5px;
}

.past-record-item .pr-word {
    flex: 1;
    text-transform: uppercase;
    font-weight: bold;
    color: #8a6a40;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.past-record-item .pr-score {
    flex-shrink: 0;
    color: #c4470a;
    font-weight: bold;
    font-size: 11px;
}

.past-record-more {
    list-style: none;
    text-align: center;
    font-size: 10.5px;
    font-style: italic;
    color: #8a6a45;
    margin-top: 2px;
}

/* ===================== Bouton "Partager" sous l'historique ===================== */

/* SECONDAIRE : contour, pas de fond plein. Partager est utile mais non
   essentiel — il ne doit pas rivaliser avec le primaire (Valider).
   Brun neutre (et non orange) pour ne pas faire écho au primaire, qui
   porte désormais l'orange de la marque. #5a3a1e sur page = 9.8:1. */
#share-button,
#share-button-mobile {
    margin-top: 12px;
    padding: 8px 12px;
    min-height: 44px;
    font-size: 14px;
    background-color: transparent;
    color: #5a3a1e;
    border: 2px solid #8a6a45;
    border-radius: 6px;
    font-weight: bold;
    touch-action: manipulation;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

/* Au survol, le secondaire se "remplit" — feedback net sans pour autant
   qu'il ait ce poids au repos. */
#share-button:hover,
#share-button-mobile:hover {
    background-color: #5a3a1e;
    color: #fff;
}

#share-button.record-flash,
#share-button-mobile.record-flash {
    animation: share-record-flash 1.4s ease-out;
}

/* Bouton de partage de la page : visible sur TOUS les formats.
   (Historiquement caché sur desktop car le panneau "Mes teckels du jour"
   y était une colonne toujours visible, avec son propre bouton. Depuis que
   ce panneau est devenu une modale, ce bouton-là n'est plus atteignable
   sans ouvrir 📋 — celui de la page est donc le point d'accès principal.) */
#share-button-mobile {
    width: 100%; /* le parent #game-container borne déjà à 480px et gère les marges latérales */
    box-sizing: border-box;
}

/* Flash du bouton partage à un nouveau record : il se remplit brièvement
   (jaune) pour attirer l'œil, puis redevient un secondaire à contour. */
@keyframes share-record-flash {
    0%, 100% { background-color: transparent; color: #5a3a1e; transform: scale(1); }
    20% { background-color: #f1c40f; color: black; border-color: #000; transform: scale(1.08); }
    50% { background-color: #f1c40f; color: black; border-color: #000; transform: scale(1.04); }
}

/* ===================== Modal classement du jour ===================== */

/* Onglets Classique / Chrono du classement unifié */
#lb-tabs {
    display: flex;
    gap: 6px;
    margin: 4px 0 14px;
    justify-content: center;
}
.lb-tab {
    flex: 1;
    max-width: 160px;
    background-color: #fffaf0;
    border: 1.5px solid #d9b8a0;
    color: #9a7a50;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.lb-tab[aria-selected="true"] { background-color: #f16c20; border-color: #c25411; color: #fff; }
.lb-panel[hidden] { display: none; }

/* Onglets "Mes teckels" (mêmes styles que le classement) */
#mt-tabs { display: flex; gap: 6px; margin: 4px 0 14px; justify-content: center; }
.mt-tab {
    flex: 1; max-width: 160px;
    background-color: #fffaf0; border: 1.5px solid #d9b8a0; color: #9a7a50;
    border-radius: 20px; padding: 8px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mt-tab[aria-selected="true"] { background-color: #f16c20; border-color: #c25411; color: #fff; }
.mt-panel[hidden] { display: none; }

/* Section Chrono de "Mes teckels" */
#mt-chrono-today { margin-bottom: 14px; }
.mt-chrono-noplay { color: #9a7a50; text-align: center; font-weight: 600; margin: 18px 0; }
.mt-chrono-day-head { font-size: 15px; color: #5a3d20; margin-bottom: 8px; text-align: center; }
.mt-chrono-day-head strong { color: #f16c20; font-size: 17px; }
.mt-chrono-ribbon-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 4px 0; }
.mt-chrono-ribbon-scroll::-webkit-scrollbar { height: 5px; }
.mt-chrono-ribbon-scroll::-webkit-scrollbar-thumb { background: #d9b8a0; border-radius: 3px; }
.mt-chrono-images { display: inline-flex; align-items: center; min-width: 100%; width: max-content; }
.mt-chrono-images .side-image { flex: 0 0 auto; }
.mt-chrono-ribbon {
    display: inline-flex; align-items: center; flex-shrink: 0;
    transform: translateY(calc(11.7px * var(--teckel-scale, 0.46)));
}
.mt-chrono-ribbon .selected-letter {
    position: relative; display: inline-flex; justify-content: center; align-items: center;
    flex-shrink: 0; box-sizing: border-box;
    background-color: var(--chrono-cyan); color: #06121f;
    border: calc(4px * var(--teckel-scale, 0.46)) solid #06121f;
}
.mt-chrono-ribbon .letter-content { font-size: calc(38px * var(--teckel-scale, 0.46)); font-weight: 500; transform: translateY(calc(-3px * var(--teckel-scale, 0.46))); }

#mt-chrono-past-heading { font-weight: 700; color: #5a3d20; margin: 6px 0 8px; }
#mt-chrono-past-list { list-style: none; padding: 0; margin: 0; }
.mt-chrono-past-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px; margin-bottom: 6px;
    background-color: #fffaf0; border: 1px solid #ecdcc8;
}
.mt-chrono-past-item.is-record { background-color: #fff2e0; border-color: #f0b070; }
.mt-chrono-past-item .mcp-date { color: #9a7a50; font-size: 13px; font-weight: 600; min-width: 44px; }
.mt-chrono-past-item .mcp-total { color: #f16c20; font-weight: 800; font-size: 15px; }
.mt-chrono-past-item .mcp-words { color: #9a7a50; font-size: 12px; margin-left: auto; }
.mt-chrono-past-item .mcp-badge { font-size: 14px; }
#mt-chrono-empty { color: #9a7a50; text-align: center; margin: 16px 0; }
#mt-chrono-share {
    display: block; width: 100%; margin-top: 14px;
    background-color: #f16c20; color: #fff; border: none; border-radius: 24px;
    padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
}
#lb-chrono-summary {
    text-align: center;
    font-size: 14px;
    color: #5a3a1e;
    margin-bottom: 12px;
    min-height: 18px;
}
#lb-chrono-list { list-style: none; padding: 0; margin: 0; }

#player-rank-summary {
    text-align: center;
    font-size: 14px;
    color: #5a3a1e;
    margin-bottom: 12px;
    min-height: 18px;
}

#leaderboard-empty {
    text-align: center;
    color: #8a6a45;
    font-style: italic;
    padding: 20px 0;
}

#daily-stats {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px dashed #c79a6a;
}

#daily-stats h3 {
    font-size: 14px;
    margin: 0 0 10px 0;
    text-align: center;
    color: #5a3a1e;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff5e6;
    border: 2px solid #c79a6a;
    border-radius: 6px;
    padding: 8px 4px;
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #d4860b;
}

.stat-label {
    font-size: 11px;
    color: #7a5230;
}

#player-rank-summary .rank-highlight {
    font-weight: bold;
    color: #d4860b;
}

#leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 4px 8px;
    background-color: #fff5e6;
    border: 2px solid #5a3a1e;
    border-radius: 4px;
    box-sizing: border-box;
}

.leaderboard-item.is-me {
    background-color: #ffe0b2;
    border-color: #c0392b;
    font-weight: bold;
}

.leaderboard-item.is-podium {
    background-color: #fff0d4;
}

.leaderboard-separator {
    text-align: center;
    color: #b09570;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 2px 0;
}

.leaderboard-rank {
    font-weight: bold;
    color: #5a3a1e;
    min-width: 28px;
    font-size: 14px;
}

.leaderboard-word {
    flex: 1;
    text-transform: uppercase;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tie-note {
    text-transform: none;
    font-weight: normal;
    font-size: 10px;
    color: #8a6a45;
    margin-left: 4px;
}

.leaderboard-score {
    color: #5a3a1e;
    white-space: nowrap;
}

/* ===================== Modal de partage ===================== */

/* La modale de l'historique peut être longue : on la borne et on scrolle
   à l'intérieur (un seul scroll, celui de la modal-content). */
#history-modal .modal-content {
    max-height: 82vh;
    overflow-y: auto;
    padding-top: 30px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-content {
    position: relative;
    background-color: #fffaf0;
    border: 4px solid black;
    border-radius: 10px;
    padding: 24px;
    /* Marges latérales réelles (16px de chaque côté) plutôt qu'un
       pourcentage : sur petit écran, 90vw collait la modale aux bords.
       box-sizing indispensable : sans lui, les 24px de padding et les 4px
       de bordure s'AJOUTENT à cette largeur et la modale touche les bords. */
    box-sizing: border-box;
    width: min(440px, calc(100vw - 32px));
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}

.modal-content h2 {
    margin: 0 0 14px 0;
    text-align: center;
    color: #5a3a1e;
    font-size: 20px;
}

.rules-text {
    font-size: 14px;
    color: #3a2410;
    line-height: 1.5;
}

/* --- Règles en slides --- */
.rules-slides-content { text-align: center; }
.rules-slides { min-height: 250px; display: flex; align-items: center; }
.rules-slide { width: 100%; }
.rules-slide[hidden] { display: none; }
.rules-slide-logo { display: block; width: min(180px, 58%); margin: 4px auto 16px; }
.rules-slide-title { font-size: 19px; color: #3a2410; margin: 4px 0 14px; }
.rules-slide p {
    font-size: 14px;
    color: #3a2410;
    line-height: 1.55;
    margin: 0 auto 12px;
    max-width: 330px;
}
.rules-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
}
.rules-nav button {
    background-color: #fffaf0;
    border: 1.5px solid #d9b8a0;
    color: #c25411;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rules-nav button:disabled { opacity: 0.3; cursor: default; }
.rules-dots { display: flex; gap: 8px; }
.rules-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background-color: #d9b8a0;
    cursor: pointer;
    padding: 0;
}
.rules-dot.active { background-color: #f16c20; }

.rules-title-highlight {
    background-color: #f0853d;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: bold;
}
/* Teckel "plein-de-mots" cyan dans la slide règles Chrono */
.rules-slide .rules-looong-chrono .looong-body span {
    background-color: #2ad4e6;
    color: #06121f;
}
/* Séparateurs de mots (mini-case sombre) dans le teckel des règles Chrono */
.rules-slide .rules-looong-chrono .looong-body span.looong-sep {
    background-color: #2b6a80;
    min-width: 6px;
    width: 6px;
    flex: 0 0 6px;
}

/* Le mot "looooooooong" rendu comme un teckel : queue + corps + tête, dans
   la même DA que le chien du plateau.
   Géométrie mesurée sur queue1.png / tete1.png : le moignon de raccord fait
   35.8% de la hauteur de l'image et son centre est à 56.5% (soit 6.5% sous
   le centre géométrique) — d'où la hauteur du corps et le translateY. */
.rules-looong {
    --looong-h: 54px; /* hauteur des images queue/tête (chien volontairement petit) */
    --looong-border: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 16px;
}

.rules-looong .looong-part {
    height: var(--looong-h);
    flex-shrink: 0;
}

.rules-looong .looong-body {
    display: inline-flex;
    align-items: stretch;
    /* recale le corps sur l'axe du moignon (6.5% sous le centre) */
    transform: translateY(calc(var(--looong-h) * 0.065));
}

/* Chaque lettre a son propre segment bordé, comme les tuiles du vrai
   teckel (.selected-letter). Les bordures adjacentes se chevauchent
   (margin-left négatif) pour ne pas doubler d'épaisseur entre deux
   segments — sinon la "colonne vertébrale" du chien paraîtrait deux fois
   plus épaisse que ses contours. */
.rules-looong .looong-body span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(var(--looong-h) * 0.358);
    min-width: calc(var(--looong-h) * 0.27);
    border: var(--looong-border) solid black;
    margin-left: calc(-1 * var(--looong-border));
    background-color: #f0853d;
    color: black; /* comme les segments de lettres du teckel en jeu */
    font-weight: bold;
    font-size: calc(var(--looong-h) * 0.21);
    line-height: 1;
    text-transform: lowercase;
}

/* Les segments d'extrémité s'aboutent à la queue et à la tête : pas de
   bordure là où le corps rejoint le chien. */
.rules-looong .looong-body span:first-child {
    margin-left: 0;
    border-left: none;
}

.rules-looong .looong-body span:last-child {
    border-right: none;
}

.rules-text p {
    margin: 0 0 10px 0;
}

.rules-credit {
    text-align: center;
    font-size: 12px;
    color: #8a6a45;
    margin: 14px 0 0 0;
    padding-top: 10px;
    border-top: 1px dashed #c79a6a;
}

.rules-credit a {
    color: #8a5a2a;
    text-decoration: underline;
}

.rules-credit a:hover {
    color: #5a3a1e;
}

/* Bouton de fermeture commun à toutes les modales : 44x44 de zone tactile
   même si le glyphe × est plus petit. */
#share-close,
#rules-close,
#hint-close,
#leaderboard-close,
#history-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #5a3a1e;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#share-close:hover,
#rules-close:hover,
#hint-close:hover,
#leaderboard-close:hover,
#history-close:hover {
    color: #c0392b;
    background: none;
}

#share-text {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    padding: 10px;
    border: 2px solid #5a3a1e;
    border-radius: 6px;
    resize: none;
    background-color: white;
    color: #2a1a0e;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}

#share-copy {
    padding: 8px 20px;
    font-size: 16px;
    background-color: #f16c20;
    color: white;
    border: 3px solid black;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

#share-copy:hover {
    background-color: #e55b10;
}

.share-copied-message {
    color: rgb(60, 132, 26);
    font-weight: bold;
    font-size: 14px;
}

#credit-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #8a6a40;
    pointer-events: auto;
    z-index: 10;
    background-color: #f5deb3;
    padding: 6px 0;
}

#credit-footer a {
    color: #5a3a1e;
    text-decoration: underline;
    font-weight: bold;
}

#credit-footer a:hover {
    color: #f16c20;
}

/* ===================== Écrans courts (sans scroll) =====================
   Sur les ordinateurs à écran peu haut (ex. 1366x768, ou une fenêtre
   réduite), l'affichage du score faisait sortir "Valider" du cadre.
   On compacte le rythme vertical dès que la hauteur descend sous 820px,
   indépendamment de la largeur : tout le jeu doit tenir sans scroll. */
@media (min-width: 901px) and (max-height: 880px) {
    body {
        padding-top: 66px;
        padding-bottom: 12px;
    }

    #day-info {
        margin: 0 0 10px 0;
        padding: 3px 14px;
        min-height: 28px;
    }

    #images-container {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    #score-container {
        min-height: 66px;
        margin-bottom: 4px;
        font-size: 21px;
    }

    #letters-container {
        margin-top: 6px;
        margin-bottom: 6px;
    }

    #input-container {
        margin-bottom: 2px;
    }

    /* Le bouton de partage apparaît après le 1er mot validé : sur écran
       court, sa hauteur suffisait à faire réapparaître le scroll. On le
       compacte pour qu'il tienne dans le budget vertical. */
    #share-button-mobile {
        margin-top: 6px;
        min-height: 38px;
        padding: 5px 12px;
        font-size: 13px;
    }

    #credit-footer {
        display: none; /* méta non essentielle : on la sacrifie avant le jeu */
    }
}

/* Écrans très courts (< 740px de haut) : on resserre encore, en réduisant
   aussi le teckel, seul élément vraiment coûteux en hauteur restante. */
@media (min-width: 901px) and (max-height: 740px) {
    body {
        padding-top: 58px;
        padding-bottom: 4px;
    }

    #day-info {
        margin-bottom: 4px;
    }

    /* Pas de `transform: scale()` ici : les animations (saut, tremblement)
       posent leur PROPRE `transform` sur ce même élément et l'écraseraient,
       faisant brutalement reprendre au teckel sa taille pleine le temps de
       l'animation. On récupère la hauteur sur les marges à la place. */
    #images-container {
        margin-top: 0;
        margin-bottom: 0;
    }

    #score-container {
        min-height: 58px;
        font-size: 19px;
        margin-bottom: 2px;
    }

    #letters-container {
        margin-top: 2px;
        margin-bottom: 4px;
    }

    #share-button-mobile {
        margin-top: 4px;
        min-height: 34px;
        padding: 4px 10px;
        font-size: 12.5px;
    }

    #feedback-message {
        min-height: 0;
        font-size: 13px;
        margin-top: 2px;
    }
}

@media (max-width: 900px) {
    /* Les boutons d'en-tête (🔊 ℹ️ 🏆 📋) sont en position fixe et ne
       réservent pas d'espace dans le flux normal. Le padding-top du body
       (voir plus bas) pousse tout le contenu sous cette rangée de
       boutons pour qu'ils n'empiètent jamais sur la date.

       Le panneau "Mes teckels du jour" s'ouvre maintenant en modale (📋),
       comme les règles / le classement / l'indice. Plus de panneau latéral
       ni de bascule .mobile-open à gérer ici. */

    /* Le bouton de partage est désormais visible par défaut sur tous les
       formats : ici on ne fait que resserrer sa marge sur mobile. */
    #share-button-mobile {
        margin: 6px auto 0;
    }

    /* Boutons d'en-tête : 44px minimum de zone tactile (WCAG AAA / Apple HIG),
       espacés d'au moins 8px pour éviter les erreurs de frappe. */
    #sound-toggle,
    #info-button,
    #leaderboard-button,
    #hint-button {
        top: 10px;
        width: 44px;
        height: 44px;
        font-size: 17px;
    }

    #info-button { left: 8px; }
    #sound-toggle { left: 60px; }
    #leaderboard-button { left: 112px; }
    #hint-button { left: 164px; }

    #history-toggle {
        top: 10px;
        width: 44px;
        height: 44px;
        font-size: 17px;
        right: 8px;
    }

    body {
        flex-direction: column;
        padding: 84px 16px 6px;
        /* top: sous la rangée de boutons fixes — bottom: minimal, juste
           pour ne pas finir abruptement. Resserré pour tenir sans scroll
           sur les petits écrans (iPhone SE et similaires).
           On réaffirme les safe-areas, sinon ce raccourci `padding` les
           écraserait (encoches / barre gestuelle). */
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(6px, calc(6px + env(safe-area-inset-bottom)));
    }

    /* Marges verticales resserrées sur mobile : le teckel garde sa taille
       normale (voir demande explicite), c'est le reste de la page qui est
       compressé pour limiter le scroll. */
    #images-container {
        margin-top: 2px;
        margin-bottom: 2px;
    }

    #letters-container,
    #chrono-letters {
        margin: 6px auto;
        gap: clamp(4px, 1.6vw, 8px);
    }

    #day-info {
        margin-bottom: 4px;
        padding: 2px 12px;
        font-size: 12px;
        min-height: 26px;
    }

    #input-container {
        margin-bottom: 4px;
    }

    #validate-button {
        margin-bottom: 0;
        padding: 6px 5px;
        min-height: 48px; /* on ne descend jamais sous la zone tactile mini */
    }

    #credit-footer {
        margin-top: 6px;
        font-size: 10px;
    }

    /* Le footer crédit reste dans le flux normal de la page sur mobile
       (pas position:fixed comme sur desktop), pour ne jamais chevaucher
       le bouton de partage flottant ni le bas du jeu. */
    #credit-footer {
        position: static;
        margin-top: 8px;
    }
}

/* ===================================================================
   MODE TOGGLE (Classique / Chrono) dans la barre du haut
   =================================================================== */
#mode-toggle {
    display: flex;
    background-color: #fffaf0;
    border: 1.5px solid #d98a3a;
    border-radius: 20px;
    padding: 2px;
    font-size: 12px;
    font-weight: 600;
}
#mode-toggle button {
    border: none;
    background: none;
    color: #9a7a50;
    border-radius: 16px;
    padding: 4px 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#mode-toggle button[aria-selected="true"] {
    background-color: #E8823C;
    color: #1a1a1a;
}

/* ===================================================================
   MODE CHRONO — overlay plein écran (palette bleu nuit + cyan)
   =================================================================== */
:root { --chrono-bg:#0e1b33; --chrono-bg2:#0a1424; --chrono-cyan:#2ad4e6;
        --chrono-ink:#eaf6ff; --chrono-muted:#6b8bbf; --chrono-line:#1a2f52;
        --chrono-tile:#123a5c; }

#chrono-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 400;             /* sous le header (#top-bar est à 500) */
    background-color: var(--chrono-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 84px;        /* réserve la barre du haut partagée (onglets + date) */
}
#chrono-overlay[hidden] { display: none; }

/* En mode Chrono, le header partagé passe en palette bleu nuit. */
html.chrono-active #top-bar {
    background-color: rgba(14, 27, 51, 0.92);
}
html.chrono-active #top-date {
    color: var(--chrono-cyan);
    background-color: var(--chrono-bg2);
    border-color: var(--chrono-line);
}
html.chrono-active #top-actions > button,
html.chrono-active #menu-wrap > #menu-button {
    background-color: var(--chrono-bg2);
    border-color: #06121f;
    color: var(--chrono-cyan);
}
html.chrono-active #mode-toggle {
    background-color: var(--chrono-bg2);
    border-color: var(--chrono-cyan);
}
html.chrono-active #mode-toggle button[aria-selected="true"] {
    background-color: var(--chrono-cyan);
    color: #06121f;
}
html.chrono-active #mode-toggle button {
    color: #6b8bbf;
}
html.chrono-active #menu-dropdown {
    background-color: var(--chrono-bg2);
    border-color: #06121f;
}
html.chrono-active #menu-dropdown button {
    color: var(--chrono-cyan);
}
html.chrono-active #menu-dropdown button:hover {
    background-color: rgba(42, 212, 230, 0.12);
}
/* Indice : propre au Classique. « Mes teckels » reste accessible en Chrono,
   le panneau ayant un onglet dédié à ce mode. */
html.chrono-active #hint-button {
    display: none;
}
/* Bascule de mode : recoloration INSTANTANÉE. Une transition CSS sur
   background-color s'anime sur le fil principal ; or l'ouverture du Chrono
   peut enchaîner un gros calcul (tirage du jour) qui le bloque. L'animation
   restait alors figée en cours de route et l'en-tête paraissait beige
   pendant une à deux secondes. */
html.chrono-active body { background-color: var(--chrono-bg); }

#chrono-screen {
    max-width: 480px;
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    color: var(--chrono-ink);
    min-height: 100%;
}

/* --- Intro (teckel par défaut, plus d'icône éclair) --- */
#chrono-intro { text-align: center; padding: 6vh 8px 0; }
#chrono-intro-teckel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 14px;
}
#chrono-intro-teckel .side-image { height: 168px; flex: 0 0 auto; }
#chrono-intro h2 { font-size: 24px; margin: 6px 0; color: var(--chrono-ink); }
#chrono-intro p { color: #a9c6e2; font-size: 14px; line-height: 1.6; margin: 8px auto; max-width: 340px; }
#chrono-intro .chrono-note { color: var(--chrono-muted); font-size: 12px; margin-top: 14px; }
#chrono-start, #chrono-see-lb {
    margin-top: 18px;
    background-color: var(--chrono-cyan);
    color: #06121f;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
#chrono-already { margin-top: 22px; }
#chrono-already p { color: var(--chrono-ink); font-weight: 600; }
#chrono-already-score { color: var(--chrono-cyan); font-size: 20px; font-weight: 700; margin: 8px 0; }

/* --- Timer --- */
#chrono-timer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}
#chrono-timer #chrono-wordcount {
    color: var(--chrono-muted);
    font-size: 13px;
    font-weight: 600;
}
#chrono-clock {
    font-size: 30px;
    font-weight: 700;
    color: var(--chrono-cyan);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}
#chrono-clock.chrono-urgent { color: #ff5f6d; }

/* --- Zone de jeu : teckel-ruban continu + route graduée --- */
#chrono-scene {
    position: relative;
    width: 100%;
    height: 214px;   /* + de place sous la ligne pour les badges de stèles */
    margin: 6px 0 2px;
    overflow: hidden;
}
/* Conteneur scrollable horizontalement (voir les mots précédents) */
#chrono-scroll {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
#chrono-scroll::-webkit-scrollbar { display: none; }
/* Piste : large, contient route + teckel dans le même repère absolu (cm→px).
   Largeur fixée dynamiquement en JS (cf. setTrackWidth) selon le score/record
   du jour ; pas de padding magique ici. */
#chrono-track-inner {
    position: relative;
    height: 100%;
    min-width: 100%;
    /* Rien ne doit se peindre au-delà de la piste : la largeur est bornée au
       bout du teckel, donc le décor situé plus loin reste invisible tant que
       le chien ne l'a pas atteint. */
    overflow: hidden;
}

/* Route : graduations qui défilent avec le teckel (même piste) */
#chrono-road {
    position: absolute;
    left: 0; right: 0;
    bottom: 40px;
    height: 14px;   /* mesuré : liseré pile sur le bas des pattes (scène 214px, images 127px, align-items:center) */
    z-index: 1;
    /* Chemin : une bande sombre surmontée d'un liseré clair = sol sur lequel
       le teckel avance, plutôt qu'un simple trait flottant. */
    border-top: 2px solid var(--chrono-line);
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), transparent 70%);
    overflow: hidden;
}
#chrono-road-ticks { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.road-tick {
    position: absolute;
    top: 0;
    width: 1px;
    height: 6px;
    background-color: rgba(255,255,255,0.18);
    transform: translateX(-0.5px);
}
.road-tick.major { height: 10px; background-color: rgba(255,255,255,0.32); }
.road-tick-label {
    position: absolute;
    top: 3px;                  /* dans #chrono-road-decor : juste sous la ligne */
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--chrono-muted);
    opacity: 0.75;
    white-space: nowrap;
    pointer-events: none;
}

/* ---- Décor de route (buissons / arbres, stèles, panneau record) ----
   Vit dans #chrono-track-inner, même repère scrollable que le teckel :
   tout défile ensemble quand le chien avance. Ancré au niveau du sol
   (bottom identique au border-top de #chrono-road = 26px). */
#chrono-road-decor {
    position: absolute;
    left: 0; right: 0;
    bottom: 56px;   /* pied du décor = niveau du sol (liseré de #chrono-road) */
    height: 0;      /* les enfants se posent par leur bottom sur cette ligne */
    z-index: 2;
    pointer-events: none;
}
/* plantes : silhouettes cyan-foncé, en retrait derrière le teckel */
.road-decor-plant {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
}
.road-decor-plant svg { display: block; fill: #24507a; }
.road-decor-plant.bush svg { width: 34px; height: 21px; }
.road-decor-plant.tree svg { width: 26px; height: 44px; }

/* Stèles des scores passés : pastille sur la ligne + badge arrondi placé
   SOUS les graduations, pour ne jamais passer derrière le teckel. */
.road-stele, .road-record, .road-today {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    pointer-events: none;
}
.road-stele .rs-mark,
.road-record .rr-mark,
.road-today .rt-mark {
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-top: -5px;
    background-color: var(--chrono-muted);
    box-shadow: 0 0 0 2px var(--chrono-bg);
}
.road-record .rr-mark { background-color: var(--chrono-cyan); }
.road-today .rt-mark { background-color: var(--chrono-ink); }

.road-stele .rs-tag,
.road-record .rr-tag,
.road-today .rt-tag {
    margin-top: 20px;          /* sous la rangée des étiquettes de graduation */
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background-color: rgba(10, 22, 40, 0.92);
    border: 1px solid var(--chrono-line);
    white-space: nowrap;
    line-height: 1.25;
}
.road-stele .rs-tag b,
.road-record .rr-tag b,
.road-today .rt-tag b {
    font-size: 11px; font-weight: 800;
    color: var(--chrono-ink);
}
.road-stele .rs-tag span,
.road-record .rr-tag span,
.road-today .rt-tag span {
    font-size: 9.5px; font-weight: 600;
    color: var(--chrono-muted);
}
.road-stele.row2 .rs-tag,
.road-record.row2 .rr-tag,
.road-today.row2 .rt-tag { margin-top: 44px; }
.road-record .rr-tag { border-color: var(--chrono-cyan); }
.road-record .rr-tag b { color: var(--chrono-cyan); }
.road-today .rt-tag { border-color: var(--chrono-ink); }
.road-today.is-record .rt-tag { border-color: var(--chrono-cyan); }
.road-today.is-record .rt-tag b,
.road-today.is-record .rt-tag span { color: var(--chrono-cyan); }

/* ---- Frise récap de l'écran de fin ---- */
#chrono-end-road-wrap { margin: 2px 0 8px; }
#chrono-end-road-scroll {
    position: relative;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 96px;
}
#chrono-end-road-scroll::-webkit-scrollbar { display: none; }
#chrono-end-road-track { position: relative; height: 100%; min-width: 100%; }
#chrono-end-line-REMOVED {}

/* Le teckel vit dans la piste, aligné en bas ; la tête est à droite,
   le corps s'allonge vers la gauche. Position absolue : sa tête est ancrée
   sur la position réelle du score (cmToX(totalScore)), même repère que le
   décor/graduations, pour une vraie sensation d'avancée sur le chemin. */
/* Le teckel vit dans la piste. La QUEUE est fixe à cmToX(0) (le point de
   départ ne bouge jamais) ; le corps s'allonge vers la DROITE au fil des
   lettres/mots, la tête avance donc réellement sur le chemin. Position
   ancrée en JS (left = cmToX(0), cf. positionTeckel). */
#chrono-teckel {
    position: absolute;
    left: 40px;
    bottom: 0;
    display: flex;
    align-items: center;            /* comme le Classique : cohérent avec le translateY de #chrono-body */
    justify-content: flex-start;
    flex-wrap: nowrap;
    z-index: 3;
    height: 100%;
    padding-bottom: 26px;
    box-sizing: border-box;
}
#chrono-teckel .side-image { flex: 0 0 auto; }
#chrono-teckel.chrono-hop { animation: chrono-hop 0.45s ease-in-out; }
@keyframes chrono-hop {
    0%,100% { transform: translateY(0); }
    30% { transform: translateY(-11px); }
    55% { transform: translateY(0); }
    78% { transform: translateY(-5px); }
}
/* Célébration à la validation d'un mot : un saut plus haut et net que la
   marche normale, pour bien distinguer "mot réussi" du simple déplacement. */
#chrono-teckel.chrono-celebrate { animation: chrono-celebrate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chrono-celebrate {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-20px) scale(1.04); }
    70% { transform: translateY(0) scale(0.98); }
    100% { transform: translateY(0) scale(1); }
}
/* Tremblement bref du chien entier à l'ajout/retrait d'une lettre (équivalent
   du triggerNod du Classique) : rotation douce de la tête/queue, sans
   secousse du corps. */
#chrono-head.chrono-nodding { animation: chrono-nod-tete 0.35s ease-in-out; }
#chrono-queue.chrono-nodding { animation: chrono-nod-queue 0.35s ease-in-out; }
@keyframes chrono-nod-tete {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(-6deg); }
    70% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}
@keyframes chrono-nod-queue {
    0% { transform: rotate(0deg); }
    35% { transform: rotate(8deg); }
    70% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}
#chrono-body {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* Recale le corps sur l'axe du moignon tête/queue, exactement comme le
       Classique (offset 11.7px à hauteur naturelle), mis à l'échelle des
       segments Chrono (SEG_H=46 / 65.3 ≈ 0.7044). */
    transform: translateY(calc(11.7px * 0.7044));
}
/* Segments de lettres (mot en cours = cyan vif ; verrouillé = bleu terne) */
/* Segments alignés sur le Classique, à l'échelle Chrono (ratio ≈ 0.7044). */
#chrono-body .selected-letter,
#chrono-end-ribbon .selected-letter {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-sizing: border-box;
    background-color: var(--chrono-cyan);
    color: #06121f;
    border: 2.8px solid #06121f;   /* = 4px Classique × 0.7044 */
}
#chrono-body .selected-letter.locked {
    background-color: #2b6a80;   /* bleu terne = mot validé, figé */
    color: #9fc4d4;
}
#chrono-body .selected-letter.locked .letter-content { color: #9fc4d4; }
#chrono-body .letter-content {
    font-size: 26.8px;           /* = 38px Classique × 0.7044 */
    font-weight: 500;
    transform: translateY(-2.1px);
}
#chrono-body .letter-score {
    position: absolute;
    bottom: 2px; right: 3px;
    font-size: 7.7px;            /* = 11px Classique × 0.7044 */
    line-height: 1;
    color: rgba(6,18,31,0.65);
}
#chrono-body .selected-letter.locked .letter-score { color: #9fc4d4; }

/* Fade de l'arrière (queue qui disparaît vers la gauche hors champ) */
#chrono-fade-left {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 70px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(to right, var(--chrono-bg) 20%, transparent 100%);
}

/* --- Compteur (feedback façon jeu vidéo) --- */
/* Score cumulé = seule info pendant le jeu, dans un cadre resserré et centré.
   Le nombre de mots et le meilleur mot sont réservés à l'écran de fin. */
#chrono-meter-readout {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0;
    background-color: var(--chrono-bg2);
    border: 1.5px solid var(--chrono-line);
    border-radius: 14px;
    padding: 10px 26px;
}
/* --- Score cumulé : élément principal --- */
#chrono-odometer {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--chrono-cyan);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
#chrono-odometer .odo-value { font-size: 40px; }
#chrono-odometer .odo-unit {
    font-size: 16px;
    font-weight: 700;
    color: var(--chrono-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#chrono-odometer.beats-record,
#chrono-odometer.beats-record .odo-value { color: #5fd968; }
/* "+N" gratifiant qui apparaît et s'envole */
#chrono-gain {
    position: absolute;
    top: -6px; right: -22px;
    color: var(--chrono-cyan);
    font-size: 16px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
}
#chrono-gain.pop { animation: chrono-gain-pop 0.9s ease-out; }
@keyframes chrono-gain-pop {
    0% { opacity: 0; transform: translateY(0) scale(0.8); }
    25% { opacity: 1; transform: translateY(-14px) scale(1.15); }
    100% { opacity: 0; transform: translateY(-30px) scale(1); }
}

/* --- Lettres (alignées sur le Classique, recolorées cyan) --- */
#chrono-letters {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(6px, 2vw, 10px);
    margin: 10px auto;
    width: 100%;
}
#chrono-letters.chrono-shake { animation: chrono-shake 0.32s; }
@keyframes chrono-shake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-6px); }
    40%,80% { transform: translateX(6px); }
}
#chrono-letters .letter {
    /* Mêmes dimensions et même forme que les lettres du Classique
       (.letter) : carré à angles vifs, bordure 4px, aucune graisse
       spécifique — seules les couleurs changent. */
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--chrono-cyan);
    border: 4px solid #06121f;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: clamp(20px, 6vw, 30px);
    color: #06121f;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
#chrono-letters .letter.selected {
    background-color: #24506a;
    color: #6f93b3;
    border-color: #16283c;
}
#chrono-letters .letter .percentage {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.75);
    font-weight: bold;
}
#chrono-letters .letter.selected .percentage { color: #6f93b3; opacity: 1; }
#chrono-letters .letter.last-selected {
    box-shadow: 0 0 0 3px var(--chrono-ink) inset;
}

/* --- Boutons d'action (shuffle/reset/delete) — mêmes dimensions Classique --- */
#chrono-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    color: var(--chrono-cyan);
    margin: 6px 0 14px;
}
#chrono-actions button {
    background: none;
    border: none;
    color: var(--chrono-cyan);
    cursor: pointer;
    padding: 4px;
    position: relative;
    display: flex;
    -webkit-tap-highlight-color: transparent;
}
#chrono-actions button:disabled { opacity: 0.35; cursor: default; }
#chrono-shuffle-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background-color: var(--chrono-cyan);
    color: #06121f;
    font-size: 11px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    text-align: center;
    padding: 0 3px;
}
/* Valider centré et pleine largeur comme en Classique ; « J'ai fini » en
   dessous, discret et étroit : côte à côte, il tombait sous le pouce droit
   et s'appuyait par mégarde. */
#chrono-play-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
#chrono-validate {
    width: 100%;
    background-color: var(--chrono-cyan);
    color: #06121f;
    border: 3px solid #06121f;
    border-radius: 10px;
    padding: 13px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
#chrono-finish {
    align-self: center;
    background-color: transparent;
    color: var(--chrono-muted);
    border: 2px solid #35507a;
    border-radius: 999px;
    padding: 8px 20px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
/* Feedback (mot invalide / trop court) : bandeau popup superposé sur le
   teckel, au centre de la scène — visible là où l'œil est, pas en bas de page. */
#chrono-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    pointer-events: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    opacity: 0;
    background-color: rgba(10,20,36,0.95);
    border: 1.5px solid var(--chrono-line);
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
#chrono-feedback.chrono-fb-bad { color: #ff6b6b; border-color: #ff6b6b; }
#chrono-feedback.chrono-fb-warn { color: #ffcf40; border-color: #ffcf40; }
#chrono-feedback.chrono-fb-bad,
#chrono-feedback.chrono-fb-warn {
    animation: chrono-fb-pop 1.6s ease-out;
}
@keyframes chrono-fb-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    22% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    82% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}

/* --- Écran de fin --- */
#chrono-end { text-align: center; padding-top: 8px; }
#chrono-end-label { color: var(--chrono-muted); font-size: 13px; margin: 4px 0 10px; }

/* Teckel final : tous les mots bout à bout, scrollable horizontalement. */
#chrono-end-teckel-wrap { margin: 6px 0 4px; }
#chrono-end-scene { position: relative; width: 100%; overflow: hidden; }
#chrono-end-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--chrono-line) transparent;
}
#chrono-end-scroll::-webkit-scrollbar { height: 6px; }
#chrono-end-scroll::-webkit-scrollbar-thumb { background: var(--chrono-line); border-radius: 3px; }
/* piste commune : teckel + route + décor dans le même repère scrollable */
#chrono-end-track {
    position: relative;
    width: max-content;
    min-width: 100%;
    padding: 10px 40px 0 0;
    box-sizing: content-box;
}
#chrono-end-road-line {
    position: absolute;
    left: 0; right: 0; bottom: 68px; height: 2px;
    background-color: var(--chrono-line);
    z-index: 1;
}
#chrono-end-road-decor {
    position: absolute;
    left: 0; right: 0; bottom: 68px; height: 0;   /* place sous la ligne pour les badges */
    z-index: 2;
    pointer-events: none;
}
#chrono-end-images {
    position: relative;
    /* display:flex (et non inline-flex) : une boîte EN LIGNE serait recentrée
       par le text-align:center de l'écran de fin, ce qui annulerait le
       margin-left qui aligne le corps sur le 0 cm de la route. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    z-index: 3;
    padding-bottom: 68px;   /* pattes sur la ligne, comme en jeu */
    --teckel-scale: 0.67;
}
#chrono-end-images .side-image { flex: 0 0 auto; }
#chrono-end-ribbon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Même recalage que le corps en jeu (#chrono-body) : +11.7px du Classique,
       mis à l'échelle du ruban de fin (--teckel-scale). */
    transform: translateY(calc(11.7px * var(--teckel-scale, 0.67)));
}
#chrono-end-ribbon .selected-letter {
    border: calc(4px * var(--teckel-scale, 0.67)) solid #06121f;
}
#chrono-end-ribbon .letter-content {
    font-size: calc(38px * var(--teckel-scale, 0.67));
    font-weight: 500;
    transform: translateY(calc(-3px * var(--teckel-scale, 0.67)));
}
#chrono-end-ribbon .letter-score {
    position: absolute;
    bottom: 2px; right: 3px;
    font-size: calc(11px * var(--teckel-scale, 0.67));
    line-height: 1;
    color: rgba(6,18,31,0.65);
}
/* Séparateur entre deux mots du ruban : petit "os" stylisé. */
/* Séparateur entre deux mots : mini-case, même hauteur/bordure que les
   segments de lettres mais étroite et plus sombre. */
/* Début d'un nouveau mot : liseré dessiné À L'INTÉRIEUR de la tuile
   (box-shadow inset = aucun impact sur la largeur, donc la longueur du
   teckel reste égale au score en cm, et rien ne peut le repeindre). */
.selected-letter.word-start {
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.75);
}
.chrono-ribbon-sep {
    flex-shrink: 0;
    width: 12px;
    box-sizing: border-box;
    background-color: #163a52;
    border: 3px solid #06121f;
    align-self: center;
}
#chrono-end-scrollhint { color: var(--chrono-muted); font-size: 11px; margin: 4px 0 0; }

#chrono-end-meter { margin: 10px 0 4px; }
#chrono-end-meter-readout { font-size: 40px; font-weight: 700; color: var(--chrono-cyan); line-height: 1; }
#chrono-end-meter-readout .cm { font-size: 20px; }
#chrono-end-sub { color: #a9c6e2; font-size: 13px; margin: 8px 0 16px; }

#chrono-share {
    display: block;
    width: 100%;
    background-color: var(--chrono-cyan);
    color: #06121f;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 8px;
}
#chrono-end-actions { display: flex; gap: 8px; margin-bottom: 18px; }
#chrono-end-actions button {
    flex: 1;
    background-color: var(--chrono-bg2);
    color: var(--chrono-ink);
    border: 1px solid var(--chrono-line);
    border-radius: 10px;
    padding: 13px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.chrono-block-title { font-size: 13px; font-weight: 600; color: var(--chrono-ink); margin: 10px 0 8px; }
#chrono-reveal-missed {
    margin-top: 12px;
    background: none;
    border: 1px solid var(--chrono-line);
    color: var(--chrono-cyan);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
#chrono-missed[hidden] { display: none; }
#chrono-missed {
    margin-top: 10px;
    /* Liste longue : on la borne en hauteur et on la rend défilante plutôt
       que de repousser le partage et le classement hors de l'écran. */
    max-height: 216px;
    overflow-y: auto;
    align-content: flex-start;
    padding: 2px 4px;
    scrollbar-width: thin;
}
#chrono-found, #chrono-missed { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.chrono-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--chrono-ink);
}
.chrono-chip b { font-weight: 700; color: var(--chrono-cyan); margin-left: 3px; }
.chrono-chip.found { background-color: #14503f; }
.chrono-chip.found b { color: #5dcaa5; }
.chrono-chip.missed { background-color: var(--chrono-bg2); border: 1px dashed #35507a; color: #a9c6e2; }
.chrono-chip.missed b { color: var(--chrono-muted); }
.chrono-none { color: var(--chrono-muted); font-size: 12px; }

/* --- Popup de confirmation de sortie --- */
#chrono-confirm-modal {
    position: absolute;
    inset: 0;
    background-color: rgba(6, 12, 22, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2200;
}
#chrono-confirm-modal[hidden] { display: none; }
#chrono-confirm-card {
    background-color: var(--chrono-bg2);
    border: 1px solid var(--chrono-line);
    border-radius: 14px;
    padding: 22px 20px 18px;
    max-width: 320px;
    width: 100%;
    text-align: center;
}
#chrono-confirm-text { color: var(--chrono-ink); font-size: 15px; font-weight: 600; margin: 0 0 18px; }
#chrono-confirm-actions { display: flex; gap: 10px; }
#chrono-confirm-cancel {
    flex: 1.4;
    background-color: var(--chrono-cyan);
    color: #06121f;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
#chrono-confirm-ok {
    flex: 1;
    background-color: transparent;
    color: var(--chrono-muted);
    border: 1px solid var(--chrono-line);
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Écran étroit : la date longue ne peut pas cohabiter avec les onglets de
   mode et les 3 boutons d'action — on bascule sur la version compacte. */
@media (max-width: 560px) {
    #top-date { font-size: 12.5px; padding: 3px 9px; border-width: 1.5px; }
    /* On récupère la place nécessaire des deux côtés : sans cela les onglets
       et les 3 boutons d'action ne laissent qu'une douzaine de pixels et la
       pastille de date débordait par-dessus. Cibles tactiles conservées
       au-dessus de 36 px. */
    #top-bar {
        gap: 6px;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    #top-actions { gap: 5px; }
    #top-actions > button,
    #menu-wrap > #menu-button { width: 37px; height: 37px; }
    #mode-toggle { font-size: 11.5px; }
    #mode-toggle button { padding: 4px 8px; }
}

/* Très petits écrans (iPhone SE ~375 px, Galaxy S ~360 px) : on serre encore
   d'une poignée de pixels pour que la date reste affichée sans recouvrir les
   onglets, tout en gardant des cibles tactiles d'au moins 34 px. */
@media (max-width: 400px) {
    #top-bar { gap: 4px; padding-left: 6px; padding-right: 6px; }
    #top-actions { gap: 3px; }
    #top-actions > button,
    #menu-wrap > #menu-button { width: 34px; height: 34px; }
    #top-actions > button svg,
    #menu-button svg { width: 19px; height: 19px; }
    #mode-toggle { font-size: 11px; }
    #mode-toggle button { padding: 4px 7px; }
    #top-date { font-size: 12px; padding: 3px 7px; }
}

/* Sous 340 px (iPhone 5/SE 1re génération), la place manque réellement :
   on sacrifie la date, purement informative, plutôt que de rogner les
   onglets de mode ou les cibles tactiles des actions. */
@media (max-width: 340px) {
    #top-date { display: none; }
}

/* Grille des lettres du Chrono : mêmes marges et même gouttière que le
   Classique. Placé en fin de feuille car la règle de base #chrono-letters
   est déclarée après la media query du Classique et l'emportait à
   spécificité égale. */
@media (max-width: 900px) {
    #chrono-letters {
        margin: 6px auto;
        gap: clamp(4px, 1.6vw, 8px);
    }
}