/* Palette de Get Phrasal (english-phrasal-verbs/static/css/main.css) : encre indigo, marque indigo-violet, particule orange. */
body.gp{
  --ink:#1b1a3a; --ink-soft:#54537a; --paper:#f7f6ff; --card:#fff; --surface:#eeecfb; --line:#e2e0f5;
  --brand:#4338ca; --gold:#b4500a;
  --accent:#ff7a3d; --accent-dark:#b4500a; --accent-soft:#ffeadf; --on-accent:#1b1a3a;
  --ok:#1f7a4c; --ok-bg:#e3f5ea; --err:#c0392b; --err-bg:#fdecea;
  --font-hero:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  body.gp{ --ink:#ecebff; --ink-soft:#b4b2dc; --paper:#0f0e1f; --card:#181733; --surface:#211f45; --line:#2d2b52;
    --brand:#a198ff; --gold:#ffa56b; --accent:#ff9460; --accent-dark:#ffa56b; --accent-soft:#3a2430; --on-accent:#1b1a3a;
    --ok:#5fd394; --ok-bg:#12301f; --err:#ff8a80; --err-bg:#3a1a1d; }
}
body.gp .top{background:var(--brand);color:#fff}
@media (prefers-color-scheme:dark){ body.gp .top{background:#2a2766;color:#fff} }
body.gp .kicker{color:var(--gold)}

.center{text-align:center}
.left{text-align:left}
.btn.big{padding:14px 30px;font-size:1.1rem}
.btn.block{display:block;width:100%;margin-top:18px;text-align:center}
.link-btn{background:none;border:0;padding:6px 2px;color:var(--ink);font:inherit;font-size:1.05rem;cursor:pointer;text-decoration:underline}
.center-actions{justify-content:center}

/* start */
.start-card{margin-top:26px;padding:28px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);text-align:center}
.start-words{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-bottom:14px;font:700 1.7rem var(--font-hero);color:var(--ink)}
mark.lex{background:none;color:var(--brand);font-weight:700;border-bottom:3px solid var(--gold)}

/* quiz */
.study-top{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line);margin-bottom:26px}
.q-title{font-weight:700;color:var(--ink-soft);margin:0 0 12px}
.prompt{font-size:clamp(1.35rem,3.4vw,1.8rem);text-align:center;margin:0 0 28px;line-height:1.4}
.prompt-plain{font-family:var(--font-hero);font-size:1.35rem}
.blank{display:inline-block;width:4.5em;height:1em;vertical-align:baseline;border-bottom:3px solid var(--gold)}
.options{display:grid;gap:12px}
.option{display:flex;align-items:center;gap:16px;text-align:left;min-height:64px;padding:14px 20px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-size:1.15rem;cursor:pointer;transition:border-color .12s,background .12s,transform .08s}
.option:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}
.option:disabled{cursor:default}
.option .key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;font:700 1.2rem var(--font-hero);background:color-mix(in srgb,var(--brand) 12%,var(--card));color:var(--brand);border:2px solid color-mix(in srgb,var(--brand) 30%,var(--card))}
.option .opt-text{flex:1}
.option.correct{border-color:var(--ok);background:var(--ok-bg)}
.option.correct .key{background:var(--ok);color:#fff;border-color:var(--ok)}
.option.wrong{border-color:var(--err);background:var(--err-bg)}
.option.wrong .key{background:var(--err);color:#fff;border-color:var(--err)}
.option .mark{margin-left:auto;font-weight:800;font-size:1.3rem}
.keyboard-hint{font-size:.9rem;margin-top:22px}

/* correction */
.correction{margin-top:8px}
.verdict{text-align:center;font-weight:700;font-size:1.3rem}
.verdict.ok{color:var(--ok)} .verdict.err{color:var(--err)}
.hero-word{font:700 clamp(2rem,6vw,2.8rem) var(--font-hero);margin:14px 0;position:relative;display:inline-block}
.hero-word::after{content:"";position:absolute;left:0;bottom:-4px;height:5px;width:100%;background:var(--gold);border-radius:3px;transform:scaleX(0);transform-origin:left;animation:underline .5s ease forwards}
@keyframes underline{to{transform:scaleX(1)}}
.badge{display:inline-block;padding:1px 10px;border-radius:999px;font-size:.78rem;font-weight:700;vertical-align:middle;background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand)}
.badge-informal{background:color-mix(in srgb,var(--gold) 24%,var(--card));color:var(--ink)}
.badge-variety{background:color-mix(in srgb,var(--ink) 10%,var(--card));color:var(--ink)}
.explanation{margin:0 0 16px}
.explanation-title{margin:0 0 8px;font-weight:600;color:var(--ink-soft)}
.explanation-list{margin:0;padding-left:1.4em;list-style:none}
.explanation-list li{position:relative}
.explanation-list li+li{margin-top:8px}
.explanation-list li::before{content:"→";position:absolute;left:-1.4em;color:var(--ink-soft)}
.examples-title{font-size:.95rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin:24px 0 12px}
.example{padding:14px 16px;background:var(--paper);border-radius:10px;border-left:4px solid var(--gold);font-size:1.1rem}
.example+.example{margin-top:12px}
.correction-actions{margin-top:18px;text-align:center}

/* other meanings */
.senses-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.sense{padding:12px 16px;border:1px solid var(--line);border-radius:10px}
.sense-here{opacity:.72;background:var(--paper)}
.sense-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--brand)}
.sense-def{margin:8px 0}
.sense .example{font-size:1rem;margin:8px 0}
.sense-note{font-size:.9rem;margin:0;color:var(--ink-soft)}

/* score */
.score-big{font:800 clamp(3rem,10vw,4.5rem) var(--font-hero);color:var(--brand);margin:6px 0}
.score-msg{font-size:1.2rem;font-weight:600;margin:0 0 24px}
.card{max-width:480px;margin:0 auto 24px;padding:20px 24px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.missed-list{margin:0;padding-left:1.2em;text-align:left}
.missed-list li+li{margin-top:8px}

body.gp .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
body.gp .btn:hover{border-color:var(--brand)}
body.gp .cta-card{background:#2a2766}
body.gp .cta-card .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
body.gp .demo-flag{background:var(--accent);color:var(--on-accent)}
body.gp :focus-visible{outline-color:var(--accent)}
@media (max-width:520px){.option{padding:12px 14px;font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){.hero-word::after{animation:none;transform:none}}