/* Tilto · thème « Plaid & tisane » — feuille commune à l'accueil et à tous les jeux */

:root{
  --bg:#f6efe6; --card:#fff8ef; --ink:#4a3b32; --muted:#9a8273; --line:#ecdcc9;
  --terra:#c96f4a; --terra-dark:#9a4f33; --terra-soft:#f4d9b8; --terra-ink:#8a4a30;
  --sage:#7f9a77; --sage-dark:#5f7a58; --sage-soft:#dbe6d3;
  --camel:#d9a679; --camel-soft:#f1dcc4;
  --land:#efdfca; --land-hi:#cfe0c6; --sea:transparent;
  --on-fill:#fff8ef;
  --shadow:0 6px 18px rgba(74,59,50,.09); --shadow-lg:0 12px 30px rgba(74,59,50,.12);
  --plaid-base:#c96f4a; --plaid-light:rgba(255,255,255,.14); --plaid-dark:rgba(122,58,37,.16);
  --radius:22px;
  /* alias utilisés par le code des jeux */
  --accent:var(--terra); --accent-soft:var(--terra-soft); --guess:var(--terra); --good:var(--sage);
  --border:var(--card);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#241c18; --card:#31261f; --ink:#f3e6d6; --muted:#b8a493; --line:#47382e;
  --terra:#e08a63; --terra-dark:#a85a3a; --terra-soft:#5a3a2a; --terra-ink:#f4c9ae;
  --sage:#9fb896; --sage-dark:#6f8a67; --sage-soft:#34432f;
  --camel:#c99a6f; --camel-soft:#4a3a2e;
  --land:#45372d; --land-hi:#3f5537;
  --on-fill:#241c18;
  --shadow:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 12px 30px rgba(0,0,0,.4);
  --plaid-base:#8e4a31; --plaid-light:rgba(255,255,255,.08); --plaid-dark:rgba(0,0,0,.18);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit}

/* ---------- En-tête plaid ---------- */
.plaid{
  background-color:var(--plaid-base);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 10px,var(--plaid-light) 10px 20px),
    repeating-linear-gradient(90deg,transparent 0 10px,var(--plaid-light) 10px 20px),
    repeating-linear-gradient(0deg,transparent 0 28px,var(--plaid-dark) 28px 31px),
    repeating-linear-gradient(90deg,transparent 0 28px,var(--plaid-dark) 28px 31px);
  color:#fff8ef; border-radius:0 0 30px 30px;
}
.plaid .in{max-width:880px;margin:0 auto;padding:18px 16px 22px}
.plaid.game .in{max-width:640px;padding:14px 16px 18px}
.logo{font:700 34px/1 Fredoka,Nunito,sans-serif;letter-spacing:.5px;text-decoration:none;color:#fff8ef}
.plaid .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 14px Fredoka,sans-serif}
.plaid .home{text-decoration:none;color:#fff8ef;background:rgba(0,0,0,.14);padding:4px 12px;border-radius:20px}
.plaid .home:hover{background:rgba(0,0,0,.24)}
.plaid .date{opacity:.9}
.plaid h1{font:700 30px/1.1 Fredoka,sans-serif;margin:12px 0 0;letter-spacing:.3px}

/* ---------- Éléments communs ---------- */
.lcd{font-family:VT323,ui-monospace,monospace;letter-spacing:1px}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.dots{display:flex;gap:6px;margin:16px 0}
.dots i{flex:1;height:8px;border-radius:8px;background:var(--line)}
.dots i.done{background:var(--sage)}
.dots i.cur{background:var(--camel)}
.q{font:600 22px/1.25 Fredoka,sans-serif;margin:0 0 2px}
.sub{color:var(--muted);font-size:14px;margin:2px 0 12px}
.hint{color:var(--muted);font-size:14px;margin:10px 0 0}
.row{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap}
button,.btn{
  font:600 17px Fredoka,sans-serif;border:0;border-radius:30px;padding:12px 24px;cursor:pointer;
  background:var(--terra);color:var(--on-fill);box-shadow:0 4px 0 var(--terra-dark);
  text-decoration:none;display:inline-block;transition:transform .08s,box-shadow .08s;
}
button:active,.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--terra-dark)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.ghost,.btn.ghost{background:var(--card);color:var(--terra-ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.pts{font:400 42px/1 VT323,monospace;color:var(--sage-dark);letter-spacing:1px}
@media (prefers-color-scheme:dark){.pts{color:var(--sage)}}
.facts{margin:12px 0 0;padding-left:20px;font-size:15px}
.facts li{margin:4px 0}
.facts li::marker{color:var(--camel)}
.src{color:var(--muted);font-size:12px;margin:14px 4px 0}
main{max-width:640px;margin:0 auto;padding:0 16px 32px}

/* ---------- Écran de fin ---------- */
.final{text-align:center}
.final .big{font:400 64px/1 VT323,monospace;color:var(--terra);margin:6px 0}
.grid{font-size:26px;letter-spacing:4px;margin:6px 0 12px}
.next{color:var(--muted);font-size:14px;margin-top:14px}
.recap{text-align:left;margin:12px 0 0;padding:0;list-style:none}
.recap li{display:flex;justify-content:space-between;gap:8px;border-top:2px dashed var(--line);padding:9px 2px;font-size:15px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}