:root {
    --desk: #0b1f1a; --desk-2: #12332a; --paper: #f3ede2; --paper-2: #e6dac4;
    --ink: #10231c; --soft: #5b5d55; --orange: #e85d04; --red: #c9361d; --green: #2f7a4b;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--desk); color: var(--paper);
    font: 16px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
  main { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }
  h1 { font: 800 26px/1.1 Georgia, serif; margin: 8px 0 4px; }
  .kicker { font: 700 13px/1.2 "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
  .sub { color: #c9c3b6; margin: 4px 0 16px; }
  .picker { display: grid; gap: 10px; }
  .picker button { text-align: left; padding: 14px 16px; border-radius: 10px; border: 0; cursor: pointer;
    background: var(--paper); color: var(--ink); font: inherit; }
  .picker b { display: block; font: 700 17px Georgia, serif; }
  .picker small { color: var(--soft); font-size: 14px; }
  .langs { display: flex; gap: 6px; justify-content: flex-end; }
  .langs button { width: auto; padding: 6px 12px; border-radius: 8px; border: 1px solid #4a5d55; background: none;
    color: #c9c3b6; font: 700 13px "Courier New", monospace; cursor: pointer; }
  .langs button.on { background: var(--paper); color: var(--ink); }
  .bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 10px;
    font: 700 13px "Courier New", monospace; color: #c9c3b6; }
  .bar button { background: none; border: 1px solid #4a5d55; color: #c9c3b6; border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; }
  .field { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.35); }
  textarea { width: 100%; min-height: 132px; resize: vertical; border: 0; outline: 0; background: transparent;
    font: 600 20px/1.35 "Courier New", monospace; color: var(--ink); word-break: break-all; }
  .meta { display: flex; justify-content: space-between; font: 13px "Courier New", monospace; color: var(--soft); }
  .stamps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
  .stamps button { font-size: 22px; line-height: 1; padding: 8px 10px; border-radius: 10px; border: 0;
    background: var(--desk-2); cursor: pointer; }
  .stamps button:active { transform: scale(.94); }
  .status { min-height: 22px; margin: 0 0 10px; font-weight: 700; }
  .status.gaston { color: #f0c36b; }
  .rules { display: grid; gap: 8px; }
  .rule { background: var(--paper); color: var(--ink); border-radius: 10px; padding: 10px 12px 10px 44px; position: relative;
    border-left: 6px solid var(--green); }
  .rule.ko { background: #f6dcd5; border-left-color: var(--red); }
  .rule .n { position: absolute; left: 10px; top: 10px; font: 700 13px "Courier New", monospace; color: var(--soft); }
  .rule .t { font-weight: 600; }
  .rule .fam { font: 13px "Courier New", monospace; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
  .rule.new { animation: pop .35s ease-out; }
  .rule.auto { box-shadow: 0 0 0 3px var(--green); }
  .rule .badge { font: 700 13px "Courier New", monospace; color: var(--green); margin-top: 2px; }
  @keyframes pop { from { transform: scale(.96); opacity: .3; } }
  .end { background: var(--paper); color: var(--ink); border-radius: 12px; padding: 18px; text-align: center; margin: 12px 0; }
  .end .stamp { display: inline-block; border: 6px solid var(--green); color: var(--green); padding: 6px 18px;
    font: 900 34px Georgia, serif; transform: rotate(-6deg); margin: 6px 0 12px; }
  .end.dead .stamp { border-color: var(--red); color: var(--red); }
  .end pre { white-space: pre-wrap; background: var(--paper-2); padding: 10px; border-radius: 8px; font: 14px "Courier New", monospace; text-align: left; }
  .end button { margin-top: 8px; padding: 10px 14px; border-radius: 10px; border: 0; background: var(--orange); color: #fff; font: 700 15px inherit; cursor: pointer; }
  .rule .hint { font-size: 13px; color: var(--soft); margin-top: 2px; }
  .rule details.hint summary { cursor: pointer; text-decoration: underline dotted; }
  .rule details.hint[open] { color: var(--ink); }
  .rule .hint.note { color: var(--red); font-weight: 600; }
  .rule .read { font: 600 13px/1.35 "Courier New", monospace; color: var(--red); margin-top: 4px; word-break: break-word; }
  .act { font: 700 13px "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 6px 0 0 4px; }
  .picker .group { margin: 10px 0 0; }
  .field.confirm { margin-top: 10px; border: 3px dashed var(--orange); }
  .field.confirm .retype { font: 700 18px "Courier New", monospace; color: var(--orange); white-space: nowrap; margin-left: 8px; }
  .hidden { display: none !important; }
  .help { color: #9fa79f; font-size: 13px; margin-top: 18px; }
  /* Bandeau fixe : la règle à corriger reste visible quand le clavier du téléphone est ouvert. */
  .focus { position: sticky; top: 0; z-index: 5; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
    background: #f6dcd5; color: var(--ink); border-left: 6px solid var(--red); font-size: 15px; font-weight: 600;
    box-shadow: 0 6px 16px rgba(0,0,0,.35); }
  .focus b { font: 700 13px "Courier New", monospace; color: var(--soft); margin-right: 4px; }
  .focus .read { font: 600 13px/1.35 "Courier New", monospace; color: var(--red); margin-top: 3px; font-weight: 600; }
  #clips.bite { animation: bite .9s ease-out; }
  @keyframes bite { 0%, 40% { color: var(--red); transform: scale(1.35); } 100% { transform: scale(1); } }
  #clips { display: inline-block; }

  /* ---- site public (playpassquest.com) */
  a { color: var(--paper); }
  .picker .kicker { display: block; margin-bottom: 2px; }
  .picker button:disabled { opacity: .55; cursor: default; }
  .streak { margin: 0 0 4px; font: 700 14px "Courier New", monospace; color: #f0c36b; }
  .end button.ghost { background: none; color: var(--ink); border: 1px solid var(--soft); }
  /* Emplacements publicitaires : réservés, masqués tant qu'aucune régie n'est branchée. */
  .ad-slot { min-height: 100px; margin: 14px 0 0; border-radius: 10px; background: var(--desk-2); }
  .ad-slot[hidden] { display: none; }
  .foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid #2a453c; font-size: 13px; color: #9fa79f; }
  .foot a { color: #c9c3b6; }
  .legal { line-height: 1.55; }
  .legal h1 { margin-top: 4px; }
  .legal h2 { font: 700 18px Georgia, serif; margin: 22px 0 6px; }
  .legal p { color: #e6dfd2; }
  .legal .kicker a { color: var(--orange); text-decoration: none; }

  /* ---- Comment jouer : bouton « ? » permanent et écran d'aide */
  main { position: relative; }
  .help-btn { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--paper); background: none; color: var(--paper); font: 800 20px Georgia, serif; cursor: pointer; }
  .help-btn:focus-visible, .howto button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  body.noscroll { overflow: hidden; }
  .howto { position: fixed; inset: 0; z-index: 20; overflow-y: auto; background: rgba(5, 16, 13, .92); padding: 16px; }
  .howto[hidden] { display: none; }
  .howto-card { max-width: 520px; margin: 0 auto; background: var(--desk); border: 1px solid #2a453c; border-radius: 16px; padding: 18px 18px 20px; }
  .howto h2 { font: 800 26px/1.1 Georgia, serif; margin: 0 0 12px; }
  .howto-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
  .howto-list li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; font-size: 15px; line-height: 1.4; color: #e6dfd2; }
  .howto-list .ic { font-size: 20px; line-height: 1.2; }
  .howto-list b { color: var(--paper); }
  .howto-actions { margin-top: 16px; }
  .howto-actions button { width: 100%; padding: 14px; border: 0; border-radius: 10px; background: var(--orange); color: #fff;
    font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
  /* La démo : un champ qui se tape tout seul, des règles qui passent du rouge au vert. */
  .demo { position: relative; }
  .demo .field { padding: 10px 12px; }
  .demo-pw { min-height: 28px; font: 700 22px/1.25 "Courier New", monospace; color: var(--ink); }
  .demo-pw::after { content: "▌"; color: var(--orange); animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .demo-rules { display: grid; gap: 6px; margin-top: 8px; min-height: 150px; align-content: start; }
  .demo-rules .rule { padding: 8px 10px; font-size: 14px; }
  .demo-rules .read { font-size: 12px; }
  .demo-stamp { position: absolute; right: 8px; top: 2px; border: 4px solid var(--green); color: var(--green); padding: 2px 10px;
    font: 900 22px Georgia, serif; transform: rotate(-8deg) scale(.6); opacity: 0; transition: transform .25s, opacity .25s; background: var(--paper); }
  .demo-stamp.on { opacity: 1; transform: rotate(-8deg) scale(1); }
  @media (prefers-reduced-motion: reduce) { .demo-pw::after { animation: none; } .demo-stamp { transition: none; } }