/* Transposé de « Cueillir une pensée » (The Safe Garden, CodePen de la conceptrice) :
     même geste — on cueille dans un champ semé au hasard, une récompense douce à chaque fois —
     dans l'univers de Jadis : dégradé corail et jaune pâle, machine à écrire, papier à lettre. */
  :root {
    --encre: #3b2a26;
    --or: #c9a24d;
    --papier: #fffdf6;
    --ligne: rgba(120, 160, 200, .35);
    --marge: rgba(235, 110, 110, .55);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    font-family: "Cormorant Infant", serif;
    color: var(--encre);
    background: linear-gradient(135deg, #ffd3c4 0%, #fbe7d8 35%, #fdf7c9 70%, #f9c6c6 100%);
    background-size: 300% 300%;
    animation: respire 18s ease-in-out infinite;
    overflow-x: hidden;
  }
  @keyframes respire {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }

  .scene { max-width: 460px; margin: 0 auto; padding: 22px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
  .scene > * { flex-shrink: 0; }
  h1 { font-family: "Great Vibes", cursive; font-weight: 400; font-size: 2.7rem; margin: 0; text-align: center; color: #b4534f; }
  .intro { text-align: center; margin: 0; font-size: 1.15rem; line-height: 1.6; }

  /* Le champ, comme dans le jeu d'origine : blanc laiteux, arrondi, semé au hasard */
  .champ {
    position: relative; height: 270px; border-radius: 26px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(180, 90, 80, .12);
    overflow: hidden;
  }
  .papier {
    position: absolute; border: none; cursor: pointer;
    font-family: "Courier Prime", monospace; font-size: .9rem; color: var(--encre);
    background: var(--papier); padding: 8px 11px 7px;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(120, 60, 50, .18);
    transform: rotate(var(--r));
    animation: flotte var(--duree) ease-in-out infinite;
    animation-delay: var(--d);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .papier::after { /* le pli du petit papier */
    content: ""; position: absolute; right: 0; top: 0;
    border-width: 0 10px 10px 0; border-style: solid;
    border-color: transparent #f3e6cf transparent transparent;
  }
  .papier:hover, .papier:focus-visible {
    transform: rotate(0deg) scale(1.15);
    box-shadow: 0 8px 18px rgba(120, 60, 50, .25);
    outline: none;
  }
  .papier.rebond { animation: rebond .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  .papier.parti { visibility: hidden; }
  .etoile { /* les étoiles dorées du jeu d'origine, pour le décor */
    position: absolute; color: var(--or); pointer-events: none;
    text-shadow: 0 0 8px rgba(201, 162, 77, .7);
    animation: scintille 2.6s ease-in-out infinite; animation-delay: var(--d);
  }
  @keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
  @keyframes rebond {
    0% { transform: rotate(var(--r)) scale(1); }
    35% { transform: rotate(0deg) scale(1.35); }
    60% { transform: rotate(0deg) scale(.9); }
    80% { transform: rotate(0deg) scale(1.08); }
    100% { transform: rotate(0deg) scale(1); }
  }
  @keyframes scintille { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

  .pensee { /* la phrase douce qui apparaît à chaque cueillette, comme #pickResult */
    font-family: "Great Vibes", cursive; font-size: 1.9rem; color: #b4534f;
    text-align: center; min-height: 48px; margin: 0;
    opacity: 0; transform: translateY(10px); transition: opacity .8s ease, transform .8s ease;
  }
  .pensee.visible { opacity: 1; transform: translateY(0); }

  /* Le papier à lettre : les petits papiers cueillis viennent s'y poser */
  .lettre {
    position: relative; border-radius: 4px; min-height: 150px; padding: 18px 16px 16px 46px;
    background:
      linear-gradient(90deg, transparent 34px, var(--marge) 34px, var(--marge) 36px, transparent 36px),
      repeating-linear-gradient(var(--papier) 0 27px, var(--ligne) 27px 28px);
    background-color: var(--papier);
    box-shadow: 0 10px 26px rgba(120, 60, 50, .18);
    transition: transform .6s ease;
  }
  .lettre-titre { margin: 0 0 10px; font-family: "Courier Prime", monospace; font-size: .85rem; opacity: .65; }
  .emplacements { display: flex; gap: 10px; flex-wrap: wrap; }
  .emplacement {
    min-width: 96px; height: 38px; border: 1.5px dashed rgba(59, 42, 38, .25); border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    font-family: "Courier Prime", monospace; font-size: .85rem; color: rgba(59, 42, 38, .35);
  }
  .emplacement.rempli { border-style: solid; border-color: transparent; background: var(--papier); color: var(--encre);
    box-shadow: 0 3px 8px rgba(120, 60, 50, .2); animation: pose .35s ease-out both; }
  @keyframes pose { 0% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1) rotate(var(--r, 0deg)); } }

  .volant { position: fixed; z-index: 20; pointer-events: none; margin: 0; }

  /* La chronique : elle n'apparaît qu'à la fin, quand la lettre se déplie */
  .chronique { display: none; font-family: "Courier Prime", monospace; font-size: .98rem; line-height: 28px; margin-top: 4px; }
  .chronique p { margin: 0 0 0; }
  .lettre.depliee .emplacements, .lettre.depliee .lettre-titre { display: none; }
  .lettre.depliee .chronique { display: block; }
  .lettre.depliee { animation: deplie .7s ease-out both; }
  @keyframes deplie { 0% { transform: scaleY(.6) rotate(-1deg); opacity: .4; } 100% { transform: scaleY(1) rotate(0); opacity: 1; } }
  .curseur { display: inline-block; width: 8px; height: 1em; vertical-align: -2px; background: var(--encre); animation: clignote 1s steps(1) infinite; }
  @keyframes clignote { 50% { opacity: 0; } }

  .final { display: none; flex-direction: column; gap: 10px; text-align: center; }
  .final.visible { display: flex; animation: monte .8s ease-out both; }
  @keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .bravo { font-family: "Great Vibes", cursive; font-size: 2.6rem; margin: 0; color: #b4534f; }
  .jadis { font-style: italic; font-size: 1.15rem; margin: 0; line-height: 1.5; }
  .bouton {
    display: block; text-decoration: none; text-align: center; border: none; cursor: pointer;
    font-family: "Courier Prime", monospace; font-size: .98rem; font-weight: 700;
    padding: 14px 16px; border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .bouton:hover { transform: translateY(-2px); }
  .bouton--principal { background: linear-gradient(90deg, #e9726c, #f0a35e); color: #fff; box-shadow: 0 8px 20px rgba(233, 114, 108, .35); }
  .bouton--doux { background: rgba(255, 255, 255, .75); color: var(--encre); }

  .cotillon { position: fixed; top: -14px; width: 9px; height: 15px; z-index: 30; pointer-events: none; animation: tombe linear forwards; }
  @keyframes tombe { to { transform: translateY(108vh) rotate(760deg); } }
  .eclat { position: fixed; z-index: 25; pointer-events: none; color: var(--or); font-size: 14px; animation: eclate .7s ease-out forwards; }
  @keyframes eclate { to { transform: translate(var(--x), var(--y)) scale(.4); opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    body, .papier, .etoile { animation: none; }
    .cotillon, .eclat { display: none; }
  }