/* Palette de Pictolang (polyglot-words/static/css/main.css) : indigo profond et turquoise. */
body.pw{
  --ink:#2b2468; --ink-soft:#5a5486; --paper:#f3f5fa; --card:#fff; --surface:#eaeef7; --line:#d9deec;
  --accent:#0e9c8a; --accent-dark:#0a7567; --accent-soft:#d7f3ef; --on-accent:#fff;
  --ok:#1a7f55; --ok-bg:#e3f5ea; --err:#c0392b; --err-bg:#fdecea; --miss:#a8731d;
  --box:40px;
}
@media (prefers-color-scheme:dark){
  body.pw{ --ink:#e9e7ff; --ink-soft:#b3afe0; --paper:#151232; --card:#1f1b4a; --surface:#2a2560; --line:#3c3680;
    --accent:#2cc7b2; --accent-dark:#5fe0cf; --accent-soft:#12403b; --on-accent:#04312c;
    --ok:#5fd394; --ok-bg:#12301f; --err:#ff8a80; --err-bg:#3a1a1d; --miss:#e6c36a; }
}
body.pw .top{background:var(--ink);color:#fff}
@media (prefers-color-scheme:dark){ body.pw .top{background:#2a2560} }
body.pw .kicker{color:var(--accent-dark)}
body.pw .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.pw .btn:hover{border-color:var(--accent)}
body.pw .demo-flag{background:var(--accent);color:var(--on-accent)}
body.pw .cta-card{background:var(--ink)}
@media (prefers-color-scheme:dark){ body.pw .cta-card{background:#2a2560} }

.center{text-align:center}
.left{text-align:left}
.btn.big{padding:13px 30px;font-size:1.05rem}
.link-btn{background:none;border:0;padding:4px 2px;color:var(--ink-soft);font:inherit;font-size:.92rem;cursor:pointer;text-decoration:underline}
.center-actions{justify-content:center}

/* setup */
.setup-card{margin-top:24px;padding:26px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font-weight:800;margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.radio{display:block;margin:6px 0;cursor:pointer}
.radio input{accent-color:var(--accent);margin-right:6px}

/* quiz card */
.quiz-card{margin:30px 0 0;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink-soft);font-size:.95rem;margin-bottom:8px}
.progressbar{height:6px;background:var(--surface);border-radius:999px;overflow:hidden;margin-bottom:18px}
.progressbar>span{display:block;height:100%;background:var(--accent);transition:width .3s}
.quiz-img{display:block;margin:0 auto 8px;width:220px;max-width:60%;border-radius:16px;background:var(--surface);aspect-ratio:4/3}
.quiz-img svg{display:block;width:100%;height:100%}
.quiz-hint{text-align:center;color:var(--ink-soft);font-style:italic;margin:0 0 18px}

.quiz-line{display:flex;align-items:center;gap:12px;margin:10px 0}
.quiz-line-label{width:112px;flex:none;font-weight:700;font-size:.95rem}
.quiz-groups{display:flex;flex-wrap:wrap;gap:6px 22px}
.quiz-group{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}
input.quiz-box{width:var(--box);height:calc(var(--box) + 4px);padding:0;text-align:center;font:700 1.15rem system-ui,sans-serif;border:2px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);text-transform:none}
input.quiz-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
input.quiz-box.locked{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-dark);cursor:default}
input.quiz-box.fixed{width:calc(var(--box) * .55);background:none;border-color:transparent;box-shadow:none;color:var(--ink-soft)}
.quiz-special summary{cursor:pointer;color:var(--ink-soft);font-size:.92rem;margin-top:14px}
.quiz-special .row{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.quiz-special .row b{font-size:.8rem;color:var(--ink-soft);width:96px}
.quiz-special button{min-width:34px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit}
.quiz-special button:hover{border-color:var(--accent)}
.quiz-help{margin:14px 0 0}
.card .actions,.quiz-card .actions{margin-top:20px}

/* answer */
.answer-line{display:grid;grid-template-columns:112px 1fr;gap:6px 16px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.answer-line:last-of-type{border-bottom:0}
.typed{font-size:1.3rem;font-weight:600;letter-spacing:.04em;white-space:pre-wrap;min-height:1.6em}
.typed .ok{color:var(--ok)}
.typed .sub{color:var(--err);background:var(--err-bg);border-radius:3px}
.typed .ins{color:var(--err);text-decoration:line-through}
.typed .del{color:var(--miss);border-bottom:2px dotted var(--miss)}
.typed .gap{display:inline-block;width:.6em}
.answer-correct{color:var(--ink-soft);font-size:.95rem}
.answer-correct b{color:var(--ink);font-size:1.05rem}
.answer-ipa{color:var(--accent-dark);margin-left:8px}
.verdict{display:inline-block;font-size:.85rem;padding:2px 10px;border-radius:999px;margin-top:4px}
.verdict.good{background:var(--ok-bg);color:var(--ok)}
.verdict.bad{background:var(--err-bg);color:var(--err)}

/* result */
.score-big{font:800 clamp(3rem,10vw,4.5rem) system-ui,sans-serif;color:var(--accent-dark);margin:6px 0}
.score-msg{font-size:1.2rem;font-weight:600;margin:0 0 24px}
.card{max-width:520px;margin:0 auto 22px;padding:18px 22px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.card h3{margin:0 0 10px}
.lang-scores{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lang-scores li{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;text-align:left}
.bar{height:12px;border-radius:999px;background:var(--surface);overflow:hidden}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:999px}
.review-list{margin:0;padding-left:1.2em}
.review-list li+li{margin-top:6px}

@media (max-width:640px){
  .quiz-line{flex-direction:column;align-items:flex-start;gap:4px}
  .quiz-line-label{width:auto}
  .answer-line{grid-template-columns:1fr}
  .quiz-card{padding:16px}
}
@media (prefers-reduced-motion:reduce){.progressbar>span{transition:none}}