/* JAR-INT-GRAPH-003 — refonte complète de la couche UI, construite comme un
   système de composants à partir du kit graphique DA-A (public/assets/).
   Remplace l'intégration incrémentale de JAR-INT-GRAPH-001/FINAL-V1.

   Principe : chaque composant visuel provient d'un asset réel du kit
   (couleur, forme, dégradé, bordure) — jamais d'une valeur inventée. Les
   assets à texte gravé non dynamique (boutons, panneaux, plateau, réserve,
   compteur) sont utilisés via leur variante "chrome" (public/assets/chrome/
   *-chrome.svg — même fichier, uniquement la balise <text> de démonstration
   retirée mécaniquement) plutôt que recréés en CSS : la forme réelle du kit
   sert de fond, le vrai contenu dynamique (libellé de bouton, score, message)
   reste du texte HTML par-dessus. Voir JAR-INT-GRAPH-003-MAPPING.md pour le
   détail écran → composant → asset. */

:root {
  /* Tokens hors design-tokens.css (7 couleurs S01) mais utilisés de façon
     cohérente dans tout le kit (bordures, badges) — lus directement dans
     les SVG, jamais inventés. */
  --jrn-accent-bronze: #B88945;
  --jrn-ink-profond: #19343D;
  --jrn-neutral-disabled: #9C9387;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Source Sans 3', Arial, sans-serif;
  background-color: var(--jrn-bg-ivoire);
  background-image: url('assets/textures/papier.svg');
  background-repeat: repeat;
  background-size: 512px 512px;
  color: var(--jrn-text-brun-encre);
  margin: 0;
  padding: 0;
}

.app-shell {
  max-width: var(--jrn-board-max-width);
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

h1, h2, h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  margin: 0 0 0.6rem 0;
  color: var(--jrn-text-brun-encre);
}

.hidden { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Barre supérieure                                                        */
/* ---------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  max-width: var(--jrn-board-max-width);
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.topbar__logo { height: 44px; width: auto; }
.topbar__nav { display: flex; gap: 0.5rem; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
}
.icon-btn img { width: 40px; height: 40px; }
.icon-btn:hover img { filter: brightness(1.08); }

/* ---------------------------------------------------------------------- */
/* Cartes / panneaux (chrome/panneau_score-chrome.svg — fond réel du kit)  */
/* ---------------------------------------------------------------------- */

/* Valeurs reprises telles quelles de panneau_score-chrome.svg (fond ivoire
   #F5F0E6, liseré bronze #B88945) — l'image elle-même n'est PAS étirée ici
   en fond littéral : son ratio fixe (512x252, avec une ligne décorative à
   une hauteur précise) se déforme visiblement sur ces cartes à hauteur
   variable (texte de longueur libre). Utilisée en fond littéral uniquement
   sur les composants à hauteur bornée proche de ce ratio (.score-card,
   .tutorial-card, ci-dessous) où l'étirement reste fidèle. */
.card {
  background: var(--jrn-bg-ivoire);
  border: 2px solid var(--jrn-accent-bronze);
  border-radius: var(--jrn-radius-lg);
  padding: 1.3rem 1.4rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--jrn-shadow-card);
}

.card--hero {
  text-align: center;
  background-image: none;
  background: transparent;
  box-shadow: none;
  padding-bottom: 0.4rem;
}
/* logo_online.png (exact-reference) porte déjà le nom + la baseline "Le jeu
   de lettres stratégique" — hauteur augmentée par rapport à l'ancien logo
   texte seul pour rester lisible (ratio natif préservé, largeur auto). */
.hero-logo { height: 110px; width: auto; max-width: 100%; }

.card__title { margin-bottom: 0.7rem; }
.card__hint, .hint {
  font-size: 0.88em;
  color: var(--jrn-structure-brun-chaud);
  margin: 0.3rem 0 0.8rem;
}
.field-label { font-weight: 600; margin: 0 0 0.5rem; }

/* ---------------------------------------------------------------------- */
/* Mode toggle / sélecteur de niveau                                       */
/* ---------------------------------------------------------------------- */

.mode-toggle {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.mode-toggle__option {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.6em 0.8em;
  border-radius: var(--jrn-radius-md);
  border: 2px solid var(--jrn-structure-brun-chaud);
  background: var(--jrn-bg-ivoire);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mode-toggle__option input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mode-toggle__option:has(input:checked) {
  background: var(--jrn-accent-interaction-petrole);
  border-color: var(--jrn-accent-interaction-petrole);
  color: #fff;
}

.level-picker { margin: 0.4rem 0 1rem; }
.level-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.level-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  padding: 0.6em 0.4em;
  border-radius: var(--jrn-radius-md);
  border: 2px solid var(--jrn-structure-brun-chaud);
  background: var(--jrn-bg-ivoire);
  cursor: pointer;
  font-size: 0.82em;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* n1_debutant.png etc. (exact-reference) sont des badges complets — hibou +
   cadre + libellé déjà gravés dans l'image, ratio natif ~126:178. Ne pas
   forcer un carré/cercle 44x44 : ça écraserait le badge et couperait le
   libellé en bas. Le <span> texte séparé a été retiré du HTML (redondant
   avec le libellé déjà présent dans l'image). */
.level-card img { width: 100%; height: auto; max-width: 110px; border-radius: var(--jrn-radius-sm); }
.level-card input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* :has() alone silently shows no selection at all on browsers that don't
   support it (notably Firefox before v121, released Dec. 2023) — no error,
   no fallback, just an invisible difference between selected/unselected,
   reported by a real user (2026-08-25). .selected (app.js,
   syncLevelCardSelection()) is the real, JS-verified source of truth and
   works everywhere; :has() below just gives instant native styling on
   browsers modern enough not to need it — kept as its OWN rule rather
   than joined into one comma-separated selector list with .selected: a
   browser whose CSS parser does not recognize :has() at all drops an
   entire rule the moment any one selector in its list fails to parse, so
   combining them would have taken .selected down with it on exactly the
   browsers this fix targets. */
.level-card:has(input:checked) {
  border-color: var(--jrn-accent-jarnac-corail);
  box-shadow: var(--jrn-shadow-soft);
}
.level-card.selected {
  border-color: var(--jrn-accent-jarnac-corail);
  box-shadow: var(--jrn-shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* Boutons (chrome/bouton_*-chrome.svg — chrome réel, texte HTML par-dessus)*/
/* ---------------------------------------------------------------------- */

/* Couleurs reprises telles quelles des fills bouton_*-chrome.svg (mêmes
   tokens validés), en aplat CSS plutôt qu'en image de fond étirée : un
   bouton est un rectangle à coins arrondis de taille fixe, l'étirer dans
   une boîte arbitraire n'a jamais de sens (contrairement à un panneau). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6em 1.1em;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  background-color: var(--jrn-accent-interaction-petrole);
  color: #fff;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled {
  cursor: not-allowed;
  background-color: var(--jrn-neutral-disabled);
  color: #55504a;
}

.btn--primary { background-color: var(--jrn-accent-validation-sauge); }
.btn--secondary { background-color: var(--jrn-accent-interaction-petrole); }
.btn--danger { background-color: var(--jrn-accent-jarnac-corail); }
.btn--bronze { background-color: var(--jrn-accent-bronze); color: var(--jrn-text-brun-encre); }
.btn--ghost {
  background: var(--jrn-surface-sable);
  border: 2px solid var(--jrn-structure-brun-chaud);
  color: var(--jrn-text-brun-encre);
}
.btn--ghost:hover:not(:disabled) { background: var(--jrn-accent-interaction-petrole); color: #fff; }
.btn--block { width: 100%; }
.btn--small { padding: 0.45em 0.85em; font-size: 0.82em; }
.btn__icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------------------------------------------------------------------- */
/* Champs / lignes de saisie                                               */
/* ---------------------------------------------------------------------- */

.input-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

input[type=text] {
  flex: 1;
  min-width: 10em;
  font-family: 'Source Sans 3', Arial, sans-serif;
  font-size: 1rem;
  padding: 0.65em 0.8em;
  border-radius: var(--jrn-radius-sm);
  border: 2px solid var(--jrn-structure-brun-chaud);
  background: var(--jrn-bg-ivoire);
  color: var(--jrn-text-brun-encre);
}

/* ---------------------------------------------------------------------- */
/* Bannières / pastilles d'état — cartes claires teintées (icône + titre +
   description), reprenant exactement le langage visuel de
   exact-reference/ui/messages_etats.png : plus la pastille sombre à puce
   des kits précédents. Teintes dérivées de color-mix() sur les tokens
   validés (aucune couleur inventée), pas d'aplat sombre. */
/* ---------------------------------------------------------------------- */

.banner, #error-box, #help-box {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  border: 1px solid color-mix(in srgb, var(--jrn-accent-interaction-petrole) 35%, transparent);
  background: color-mix(in srgb, var(--jrn-accent-interaction-petrole) 12%, var(--jrn-bg-ivoire));
  color: var(--jrn-text-brun-encre);
  border-radius: var(--jrn-radius-md);
  padding: 0.75em 1.1em;
  margin: 0.7em auto;
  max-width: var(--jrn-board-max-width);
}
.banner::before, #error-box::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 0.1em;
  background: var(--jrn-accent-jarnac-corail);
  flex-shrink: 0;
}
#error-box, .banner--alert {
  border-color: color-mix(in srgb, var(--jrn-accent-jarnac-corail) 35%, transparent);
  background: color-mix(in srgb, var(--jrn-accent-jarnac-corail) 12%, var(--jrn-bg-ivoire));
}
.banner--info, #help-box {
  border-color: color-mix(in srgb, var(--jrn-accent-interaction-petrole) 35%, transparent);
  background: color-mix(in srgb, var(--jrn-accent-interaction-petrole) 10%, var(--jrn-bg-ivoire));
}
.banner--info::before, #help-box::before { background: var(--jrn-accent-interaction-petrole); }

#error-box.network-error {
  background-image: url('assets/ui/deconnecte.svg');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 220px 44px;
  padding-left: 246px;
}
#error-box.network-error::before { display: none; }

.pill {
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: color-mix(in srgb, var(--jrn-accent-interaction-petrole) 14%, var(--jrn-bg-ivoire));
  border: 1px solid color-mix(in srgb, var(--jrn-accent-interaction-petrole) 35%, transparent);
  color: var(--jrn-text-brun-encre);
  border-radius: var(--jrn-radius-md);
  padding: 0.65em 1.1em;
  margin: 0.6em 0;
  font-weight: 600;
}
.pill::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--jrn-accent-interaction-petrole);
}
.pill[data-tone="success"] { background: color-mix(in srgb, var(--jrn-accent-validation-sauge) 16%, var(--jrn-bg-ivoire)); border-color: color-mix(in srgb, var(--jrn-accent-validation-sauge) 40%, transparent); }
.pill[data-tone="success"]::before { background: var(--jrn-accent-validation-sauge); }
.pill[data-tone="alert"] { background: color-mix(in srgb, var(--jrn-accent-jarnac-corail) 14%, var(--jrn-bg-ivoire)); border-color: color-mix(in srgb, var(--jrn-accent-jarnac-corail) 40%, transparent); }
.pill[data-tone="alert"]::before { background: var(--jrn-accent-jarnac-corail); }
.pill[data-tone="wait"] { background: color-mix(in srgb, var(--jrn-accent-bronze) 16%, var(--jrn-bg-ivoire)); border-color: color-mix(in srgb, var(--jrn-accent-bronze) 40%, transparent); }
.pill[data-tone="wait"]::before { background: var(--jrn-accent-bronze); }
.pill[data-tone="info"]::before { background: var(--jrn-accent-interaction-petrole); }

.pill--outline {
  background: var(--jrn-bg-ivoire);
  color: var(--jrn-text-brun-encre);
  border: 2px dashed var(--jrn-structure-brun-chaud);
}
.pill--outline::before { display: none; }

.status-row { display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap; }
.status-row .pill { margin: 0.6em 0; flex: 1 1 auto; }

/* Chronomètre par coup — purement indicatif, jamais imposé (pas de coup
   forcé) : dans l'esprit du jeu original ("on a souvent avantage à jouer
   rapidement... on réduit ainsi la menace d'un coup de JARNAC"), pas une
   règle de tournoi appliquée telle quelle. */
.turn-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 0.5em 0.8em;
  border-radius: var(--jrn-radius-md);
  background: var(--jrn-bg-ivoire);
  border: 1px solid color-mix(in srgb, var(--jrn-structure-brun-chaud) 35%, transparent);
  color: var(--jrn-structure-brun-chaud);
  white-space: nowrap;
}
.turn-timer[data-pressure="soft"] {
  color: var(--jrn-accent-bronze);
  border-color: color-mix(in srgb, var(--jrn-accent-bronze) 45%, transparent);
}
.turn-timer[data-pressure="hard"] {
  color: var(--jrn-accent-jarnac-corail);
  border-color: color-mix(in srgb, var(--jrn-accent-jarnac-corail) 45%, transparent);
}

.status-title { display: block; font-weight: 700; }
.status-desc { display: block; font-size: 0.88em; color: var(--jrn-structure-brun-chaud); margin-top: 0.1em; }

/* ---------------------------------------------------------------------- */
/* Écran de partie — en-tête, score, adversaire                            */
/* ---------------------------------------------------------------------- */

.game-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.6rem 0;
}
.game-topline__title { font-size: 1.3rem; }

.score-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
}

/* panneau_score-chrome.svg est un aplat ivoire (#F5F0E6, même valeur que
   --jrn-bg-ivoire) avec un liseré bronze — reproduit en CSS pur, pas de
   fond étiré : ce composant peut avoir une hauteur variable (nom
   d'adversaire de longueur libre) alors que l'asset a un ratio fixe. */
.score-card {
  flex: 1;
  min-width: 200px;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: var(--jrn-bg-ivoire);
  border: 2px solid var(--jrn-accent-bronze);
  border-radius: var(--jrn-radius-md);
  padding: 0.6em 0.9em;
}
.score-card__icon { width: 44px; height: 44px; border-radius: var(--jrn-radius-sm); flex-shrink: 0; }
/* Même badge complet (hibou + cadre + libellé) que le sélecteur de niveau
   (n{1-4}_*.png, exact-reference) — ratio natif préservé (height fixe,
   width auto), jamais recadré en rond ou en icône carrée. */
.score-card__avatar { height: 56px; width: auto; flex-shrink: 0; }
.score-card__body { display: flex; flex-direction: column; }
.score-card__label { font-size: 0.75em; color: var(--jrn-structure-brun-chaud); }
.score-card__value { font-weight: 700; }
.score-card__status { height: 30px; width: auto; margin-left: auto; }

/* ---------------------------------------------------------------------- */
/* Tutoriel (chrome/panneau-chrome.svg — onglet pétrole + zone ivoire)      */
/* ---------------------------------------------------------------------- */

/* panneau-chrome.svg = onglet pétrole (#356B73) + corps ivoire — reproduit
   en CSS pur (bordure gauche pleine couleur = l'onglet, corps ivoire),
   plutôt qu'étiré : le texte du tutoriel a une longueur variable, l'asset
   un ratio fixe. */
.tutorial-card {
  display: flex;
  align-items: center;
  gap: 0.9em;
  background: var(--jrn-bg-ivoire);
  border: 2px solid var(--jrn-accent-interaction-petrole);
  border-left: 8px solid var(--jrn-accent-interaction-petrole);
  border-radius: var(--jrn-radius-md);
  padding: 0.8em 1.1em;
  margin: 0.7em 0;
  min-height: 72px;
}
.tutorial-card__badge { width: 44px; height: 44px; flex-shrink: 0; }
.tutorial-card__text { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Fenêtre Jarnac                                                           */
/* ---------------------------------------------------------------------- */

.jarnac-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin: 0.9em 0;
}
.jarnac-banner img:first-child { max-width: 100%; height: auto; }
.jarnac-banner__eclat {
  height: 40px;
  width: 40px;
  animation: jrn-pulse 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------------------- */
/* Plateau — utilisation du chrome réel avec échelle uniforme.             */
/* Le plateau maître est carré (512×512) : le conteneur conserve donc       */
/* exactement ce ratio. Chaque ligne conserve elle aussi le ratio natif     */
/* 600×46. Aucun étirement indépendant X/Y.                                 */
/* ---------------------------------------------------------------------- */

.board-section { margin: 1rem 0; width: 100%; max-width: 512px; }

.board-section__title { margin-bottom: 0.5rem; }

.board {
  width: min(512px, 100%);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 88px 34px 44px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
}

.board--own {
  background-image: url('assets/chrome/plateau_joueur-chrome.svg');
}

.board--opponent {
  background-image: url('assets/chrome/plateau_adversaire-chrome.svg');
}

.board-row {
  width: 100%;
  aspect-ratio: 600 / 46;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 16px 0 48px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: relative;
}

.board-row:nth-child(1) { background-image: url('assets/board/ligne_01.svg'); }
.board-row:nth-child(2) { background-image: url('assets/board/ligne_02.svg'); }
.board-row:nth-child(3) { background-image: url('assets/board/ligne_03.svg'); }
.board-row:nth-child(4) { background-image: url('assets/board/ligne_04.svg'); }
.board-row:nth-child(5) { background-image: url('assets/board/ligne_05.svg'); }
.board-row:nth-child(6) { background-image: url('assets/board/ligne_06.svg'); }
.board-row:nth-child(7) { background-image: url('assets/board/ligne_07.svg'); }
.board-row:nth-child(8) { background-image: url('assets/board/ligne_08.svg'); }

.board-row .row-index {
  /* Le numéro appartient déjà au chrome SVG exact de la ligne. */
  display: none;
}

.board-row.selectable { cursor: pointer; }

.board-row.selected {
  outline: 2px solid var(--jrn-accent-interaction-petrole);
  outline-offset: -2px;
  box-shadow: var(--jrn-shadow-soft);
}

.board-row .len {
  font-size: 0.8em;
  color: var(--jrn-structure-brun-chaud);
  margin-left: auto;
  padding-right: 6px;
  position: relative;
  z-index: 2;
}


.letter-tile {
  height: calc(var(--jrn-letter-size-reference) * 0.5);
  width: calc(var(--jrn-letter-size-reference) * 0.5);
  display: inline-block;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Réserve — chrome réel 520×120 conservé avec son ratio.                  */
/* Les lettres sont des assets S02 unitaires posées au-dessus du chrome.   */
/* ---------------------------------------------------------------------- */

.rack-section { margin: 1rem 0; width: 100%; max-width: 520px; }

.rack {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  aspect-ratio: 520 / 120;
  min-height: 0;
  background-color: transparent;
  background-image: url('assets/chrome/reserve-chrome.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  padding: 1.1rem 1.4rem;
}

.rack .letter-tile {
  height: min(54px, 10vw);
  width: min(54px, 10vw);
  cursor: pointer;
  flex-shrink: 0;
}

.rack .letter-tile:hover { filter: drop-shadow(var(--jrn-shadow-soft)); }

.rack--row-letters .letter-tile {
  height: calc(var(--jrn-letter-size-reference) * 0.75);
  width: calc(var(--jrn-letter-size-reference) * 0.75);
}

/* Réserve adverse : mêmes tuiles/chrome que la réserve du joueur pour la
   lisibilité, mais visiblement non interactive — aucun gestionnaire de clic
   n'est câblé sur #opponent-reserve dans app.js (pas seulement un style),
   ce curseur/hover neutralisé n'est qu'un signal visuel cohérent avec ça. */
.rack--opponent .letter-tile { cursor: default; }
.rack--opponent .letter-tile:hover { filter: none; }

/* ---------------------------------------------------------------------- */
/* Compose / actions                                                        */
/* ---------------------------------------------------------------------- */

.compose-section, .actions-section { margin: 1rem 0; max-width: 480px; }

/* Boutons compacts et tactiles, dimensionnés à leur contenu — jamais
   étirés à la largeur d'une colonne de grille (ce qui les transformait en
   barres pleine largeur). */
.actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.actions-grid .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------------- */
/* Fin de partie                                                           */
/* ---------------------------------------------------------------------- */

.score-final {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.8em 1.1em;
  margin: 0.8em 0;
  border-radius: var(--jrn-radius-md);
  background: var(--jrn-accent-validation-sauge);
  color: #fff;
  font-weight: 700;
}
.score-final__icon { height: 44px; width: auto; }

/* ---------------------------------------------------------------------- */
/* Historique                                                              */
/* ---------------------------------------------------------------------- */

.history-section { margin: 1rem 0 2rem; }
.history-panel {
  background: var(--jrn-bg-ivoire);
  border: 1px solid var(--jrn-structure-brun-chaud);
  border-radius: var(--jrn-radius-md);
  padding: 0.8em 1em;
  font-size: 0.9em;
  max-height: 220px;
  overflow-y: auto;
}
.history-panel em { color: var(--jrn-structure-brun-chaud); }

/* ---------------------------------------------------------------------- */
/* Responsive — desktop large / tablette / mobile portrait+paysage         */
/* ---------------------------------------------------------------------- */

@media (max-width: 480px) {
  .score-row { flex-direction: column; }
  .score-card { max-width: none; }
}

@media (max-width: 720px) {
  .topbar__logo { height: 36px; }
  .hero-logo { height: 78px; }
  .card { padding: 1rem 1.1rem 1.2rem; }
  .level-picker__grid { grid-template-columns: repeat(2, 1fr); }
  .rack .letter-tile {
    height: calc(var(--jrn-letter-size-reference) * 0.75);
    width: calc(var(--jrn-letter-size-reference) * 0.75);
  }
}

@media (max-width: 420px) {
  .letter-tile {
    height: calc(var(--jrn-letter-size-reference) * 0.4);
    width: calc(var(--jrn-letter-size-reference) * 0.4);
  }
  .rack .letter-tile {
    height: calc(var(--jrn-letter-size-reference) * 0.6);
    width: calc(var(--jrn-letter-size-reference) * 0.6);
  }
  .game-topline { flex-wrap: wrap; }
  .score-card__status { display: none; }
  .jarnac-banner img:first-child { max-width: 90%; }
  .jarnac-banner__eclat { display: none; }
  #error-box.network-error { background-image: none; padding-left: 1em; }
  #error-box.network-error::before { display: inline-block; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .app-shell { padding-bottom: 1.5rem; }
  .topbar { padding: 0.3rem 1rem; }
  .topbar__logo { height: 32px; }
  .card, .tutorial-card, .banner, #error-box, #help-box, .score-final { padding-top: 0.5em; padding-bottom: 0.5em; margin: 0.4em auto; }
}