/* Croquis Clash — style « cahier d'écolier » (aucune ressource externe) */
:root{
  --papier:#F7F9FC;
  --ligne:#D8E4F3;
  --ligne-forte:#C3D5EC;
  --marge:#E4572E;
  --encre:#223A70;
  --encre-douce:#5B6B93;
  --feutre-rouge:#E4572E;
  --feutre-vert:#2FA36B;
  --feutre-bleu:#3E7BFA;
  --surligneur:#FFD23F;
  --blanc:#FFFFFF;
  --ombre:5px 6px 0 rgba(34,58,112,.13);
  --sketch:255px 18px 225px 18px / 18px 225px 18px 255px;
  --main:'Segoe Print','Bradley Hand','Chalkboard SE','Comic Sans MS',cursive;
  --texte:'Trebuchet MS','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--texte);
  color:var(--encre);
  background-color:var(--papier);
  background-image:
    linear-gradient(var(--ligne-forte) 1px, transparent 1px),
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, #E7DAF0 1px, transparent 1px);
  background-size:100% 32px, 100% 8px, 32px 100%;
  min-height:100%;
  padding:18px 14px 60px;
}
@media(min-width:760px){
  body::before{content:'';position:fixed;top:0;bottom:0;left:52px;width:2px;
    background:var(--marge);opacity:.45;pointer-events:none}
  body{padding-left:74px}
}
.hidden{display:none !important}
main{max-width:1060px;margin:0 auto}

/* ---------- Typo ---------- */
.logo{font-family:var(--main);font-weight:700;font-size:clamp(44px,8vw,74px);
  line-height:1;text-align:center;margin-top:22px;transform:rotate(-1.5deg)}
.logo span{color:var(--feutre-rouge);
  text-decoration:underline wavy var(--surligneur) 4px;text-underline-offset:8px}
.tagline{text-align:center;font-weight:700;color:var(--encre-douce);margin:10px 0 24px;font-size:17px}
h2{font-family:var(--main);font-weight:700;font-size:28px;line-height:1.1}

/* ---------- Cartes ---------- */
.card{background:var(--blanc);border:3px solid var(--encre);
  border-radius:var(--sketch);box-shadow:var(--ombre);padding:20px}
.home-card{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.home-card label{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
input[type=text]{font-family:var(--texte);font-weight:700;font-size:17px;
  border:3px solid var(--encre);border-radius:14px 6px 14px 6px;
  padding:11px 14px;width:100%;background:#FDFEFF;color:var(--encre);outline:none}
input[type=text]:focus{border-color:var(--feutre-bleu);box-shadow:0 0 0 3px rgba(62,123,250,.2)}
.rules{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:14.5px;
  color:var(--encre-douce);border-top:2px dashed var(--ligne-forte);padding-top:12px}
.fineprint{font-size:12.5px;color:var(--encre-douce);font-weight:600;text-align:center}
.diffrow{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.chip{border:2.5px solid var(--encre);background:#fff;border-radius:999px;
  padding:6px 14px;font-weight:800;font-size:13.5px;cursor:pointer;color:var(--encre)}
.chip.active{background:var(--surligneur)}

/* ---------- Boutons ---------- */
.btn{font-family:var(--texte);font-weight:800;font-size:16px;
  border:3px solid var(--encre);border-radius:14px 5px 14px 5px;
  background:var(--blanc);color:var(--encre);padding:11px 18px;cursor:pointer;
  box-shadow:3px 4px 0 rgba(34,58,112,.18);
  transition:transform .08s ease, box-shadow .08s ease;user-select:none}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 rgba(34,58,112,.18)}
.btn:active{transform:translate(1px,2px);box-shadow:1px 1px 0 rgba(34,58,112,.18)}
.btn:focus-visible,.chip:focus-visible,.sw:focus-visible,.tool:focus-visible{
  outline:3px solid var(--feutre-bleu);outline-offset:2px}
.btn.primary{background:var(--feutre-rouge);color:#fff}
.btn.bot{background:var(--feutre-bleu);color:#fff}
.btn.ghost{background:transparent;box-shadow:none}
.btn.big{font-size:18px;padding:14px 20px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- Recherche ---------- */
.search-card{max-width:420px;margin:60px auto 0;text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center}
.pencil{font-size:54px;animation:scribble 1.1s ease-in-out infinite}
@keyframes scribble{
  0%{transform:rotate(-14deg) translateX(-8px)}
  50%{transform:rotate(10deg) translateX(8px)}
  100%{transform:rotate(-14deg) translateX(-8px)}
}
@media(prefers-reduced-motion:reduce){.pencil{animation:none}.cf{display:none}}

/* ---------- Barre du haut ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:12px}
.pill{background:var(--blanc);border:3px solid var(--encre);border-radius:999px;
  padding:6px 14px;font-weight:800;font-size:14px;box-shadow:3px 3px 0 rgba(34,58,112,.13)}
.timerbox{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px}
#timerNum{font-family:var(--main);font-weight:700;font-size:34px;line-height:1;
  background:var(--blanc);border:3px solid var(--encre);border-radius:50% 46% 52% 48%;
  width:74px;height:74px;display:flex;align-items:center;justify-content:center;
  box-shadow:3px 4px 0 rgba(34,58,112,.15)}
#timerNum.urgent{color:var(--feutre-rouge);animation:pulse .8s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.tbar{width:120px;height:8px;border:2px solid var(--encre);border-radius:99px;
  overflow:hidden;background:#fff}
#timerBar{height:100%;background:var(--feutre-vert);width:100%;transition:width .3s linear}
#timerBar.low{background:var(--feutre-rouge)}
.scores{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;flex-wrap:wrap}
.scorechip{background:var(--blanc);border:3px solid var(--encre);
  border-radius:12px 4px 12px 4px;padding:6px 12px;
  box-shadow:3px 3px 0 rgba(34,58,112,.13);display:flex;align-items:center;gap:7px}
.scorechip .pts{font-family:var(--main);font-size:20px;line-height:.9;color:var(--feutre-bleu)}
.dot{width:9px;height:9px;border-radius:50%;background:#bbb;border:1.5px solid var(--encre)}
.dot.on{background:var(--feutre-vert)}
.vs{font-family:var(--main);font-size:22px;color:var(--feutre-rouge)}

/* ---------- Statut ---------- */
#statusBar{text-align:center;font-weight:800;font-size:15.5px;
  background:var(--surligneur);border:3px solid var(--encre);
  border-radius:6px 16px 6px 16px;padding:8px 14px;margin-bottom:14px;
  box-shadow:3px 3px 0 rgba(34,58,112,.13);transform:rotate(-.4deg)}
#statusBar.ok{background:#CFF3E1}
#statusBar.bad{background:#FBD9CC}

/* ---------- Duel ---------- */
.duel{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;align-items:start}
.card-head{font-weight:800;font-size:16.5px;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.word{font-family:var(--main);font-size:22px;font-weight:700;line-height:1;
  background:var(--surligneur);padding:3px 12px;border-radius:4px 12px 4px 12px;
  transform:rotate(-1.2deg);display:inline-block}
.hint{font-weight:800;color:var(--encre-douce);font-size:13px;letter-spacing:.2em}
.cwrap{position:relative;border:3px solid var(--encre);border-radius:10px;
  overflow:hidden;background:#fff}
canvas{display:block;width:100%;height:auto;touch-action:none;background:#fff}
#meCnv{cursor:crosshair}
.overlay{position:absolute;inset:0;background:rgba(247,249,252,.9);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--main);font-size:26px;font-weight:700;padding:16px}

/* ---------- Outils ---------- */
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.sw{width:26px;height:26px;border-radius:50% 42% 55% 45%;
  border:2.5px solid var(--encre);cursor:pointer;padding:0;transition:transform .08s}
.sw:hover{transform:scale(1.15)}
.sw.active{outline:3px solid var(--surligneur);outline-offset:2px;transform:scale(1.12)}
.tsep{width:2px;height:24px;background:var(--ligne-forte);margin:0 4px}
.tool{border:2.5px solid var(--encre);background:#fff;border-radius:8px;
  min-width:34px;height:34px;cursor:pointer;font-size:15px;font-weight:800;color:var(--encre);
  display:flex;align-items:center;justify-content:center;padding:0 6px}
.tool.active{background:var(--surligneur)}
.tool .b{border-radius:50%;background:var(--encre)}

/* ---------- Deviner ---------- */
.guessrow{display:flex;gap:8px;margin-top:12px}
.guessrow .btn{white-space:nowrap}
.msg{min-height:24px;font-weight:800;margin-top:8px;font-size:15px}
.msg.ok{color:var(--feutre-vert)}
.msg.warm{color:#D97E00}
.msg.no{color:var(--feutre-rouge)}
.feed{margin-top:10px;font-weight:700;font-size:14px;color:var(--encre-douce);
  min-height:20px;word-break:break-word}
.feed b{color:var(--encre)}
.okline{margin-top:8px;font-weight:800;color:var(--feutre-vert)}

/* ---------- Modales ---------- */
.modal{position:fixed;inset:0;background:rgba(34,58,112,.35);
  display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal-card{max-width:460px;width:100%;text-align:center;display:flex;flex-direction:column;gap:14px}
.revline{font-weight:700;font-size:16px;line-height:1.7}
.bigscore{font-family:var(--main);font-size:38px;line-height:1}
.rowbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- Confettis ---------- */
.cf{position:fixed;font-size:22px;z-index:99;pointer-events:none;
  animation:cfall 1.15s ease-out forwards}
@keyframes cfall{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0}
}

/* ---------- Bandeaux ---------- */
.warnband{background:#FBD9CC;border:3px solid var(--encre);border-radius:10px;
  padding:12px 16px;font-weight:800;max-width:640px;margin:0 auto 16px;text-align:center}
.connpill{position:fixed;right:12px;bottom:12px;z-index:60;font-size:12px;
  font-weight:800;background:#fff;border:2.5px solid var(--encre);
  border-radius:999px;padding:5px 12px;box-shadow:3px 3px 0 rgba(34,58,112,.13)}
.connpill.on{color:var(--feutre-vert)}
.connpill.off{color:var(--feutre-rouge)}

/* ---------- Choix de langue (splash i18n) ---------- */
#langSplash{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;background-color:var(--papier);
  background-image:
    linear-gradient(var(--ligne-forte) 1px, transparent 1px),
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, #E7DAF0 1px, transparent 1px);
  background-size:100% 32px, 100% 8px, 32px 100%}
#langSplash .lang-card{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px;
  text-align:center;padding:28px 24px}
#langSplash .lang-logo{font-size:clamp(36px,7vw,54px);margin-top:0}
#langSplash .lang-q{font-weight:800;color:var(--encre-douce);line-height:1.5}
#langSplash .lang-q em{font-style:italic;opacity:.8}
#langSplash .lang-sugg{outline:4px solid var(--surligneur);outline-offset:2px}
/* ---------- Page /stats ---------- */
.stats-main{max-width:860px;margin:0 auto}
.stats-main .tagline{text-align:center;font-weight:700;color:var(--encre-douce);margin:6px 0 18px}
.stats-card{margin:0 auto 18px;padding:22px 20px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--blanc);border:2px solid var(--ligne-forte);border-radius:14px;padding:14px 10px;text-align:center}
.tile .n{font-family:var(--main);font-weight:700;font-size:clamp(22px,4vw,34px);color:var(--encre);line-height:1.1}
.tile .l{font-size:12px;font-weight:800;color:var(--encre-douce);margin-top:6px}
.stats-h2{font-family:var(--main);font-size:20px;margin-bottom:10px;transform:rotate(-.5deg)}
.stats-table{width:100%;border-collapse:collapse;font-size:14px}
.stats-table th,.stats-table td{padding:7px 10px;text-align:right;border-bottom:1px dashed var(--ligne-forte)}
.stats-table th:first-child,.stats-table td:first-child{text-align:left}
.stats-table th{color:var(--encre-douce);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.stats-table tr.today td{font-weight:800;color:var(--feutre-bleu)}
.stats-back{text-align:center;margin:16px 0 30px}
.stats-back a{font-weight:800;color:var(--feutre-bleu)}