/**
 * css/grammar-player.css — the staged lesson player (M513), used by js/grammar/lesson-player.js.
 * Colors come from shared.css tokens only, so every theme and admin brand works. Prefix gp-.
 */
.gp{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;padding-bottom:5.5rem}

/* ── Top bar: quit, six-stage rail, XP and combo ──────────────────────── */
.gp-top{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.6rem .8rem;box-shadow:var(--shadow-s);}
.gp-x{background:none;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer;padding:.3rem .5rem;border-radius:var(--radius)}
.gp-x:hover{color:var(--text);background:var(--surface-2)}
.gp-rail{display:flex;list-style:none;margin:0;padding:0;gap:.25rem;min-width:0}
.gp-rail li{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0;position:relative;font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);opacity:.55;transition:opacity .25s,color .25s}
.gp-rail li i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);font-size:.95rem;transition:all .25s}
.gp-rail li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gp-rail li.done{opacity:1;color:var(--green)}
.gp-rail li.done i{background:var(--green-soft);border-color:var(--green)}
.gp-rail li.on{opacity:1;color:var(--purple)}
.gp-rail li.on i{border-color:var(--purple);background:var(--purple-soft);transform:scale(1.12);box-shadow:0 0 0 4px var(--purple-soft)}
.gp-chips{display:flex;gap:.4rem;align-items:center}
.gp-chip { position:relative; font-variant-numeric:tabular-nums; }
.gp-chip b{font-weight:800}
.gp-combo{background:var(--red-soft);color:var(--red)}
.gp-float{position:absolute;right:.2rem;top:-.2rem;font-weight:800;color:var(--green);animation:gp-float .9s var(--ease-out,ease-out) forwards;pointer-events:none}
@keyframes gp-float{to{transform:translateY(-26px);opacity:0}}

/* ── Main column ─────────────────────────────────────────────────────── */
.gp-main{display:flex;flex-direction:column;gap:1rem;min-width:0}
.gp-main>*{animation:gp-in .35s var(--ease-out,ease-out) both}
@keyframes gp-in{from{opacity:0;transform:translateY(10px)}}
.gp-banner{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--purple-soft),var(--teal-soft));border:1px solid var(--border)}
.gp-bi{font-size:2rem}
.gp-banner b{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--text)}
.gp-banner small{color:var(--text-muted)}
.gp-lead{color:var(--text-muted);font-size:.95rem;text-align:center;margin:0}

/* ── Intro card ──────────────────────────────────────────────────────── */
.gp-intro{padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;}
.gp-hero{position:relative;border-radius:var(--radius);overflow:hidden;margin:-.2rem -.2rem 0}
.gp-hero img{display:block;width:100%;max-height:230px;object-fit:cover}
.gp-lvl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--purple)}
.gp-intro h2{font-family:var(--font-display);font-size:1.5rem;margin:0;color:var(--text);text-wrap:balance}
.gp-goal{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:.65rem .9rem;margin:0;font-size:.92rem;line-height:1.5}
.gp-goal b{color:var(--accent-text)}
.gp-plan{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.gp-plan li{font-size:.8rem;padding:.3rem .7rem;border-radius:99px;background:var(--surface-2);color:var(--text)}
.gp-plan li.gp-plan-motive{background:var(--purple-soft);color:var(--purple);border:1px dashed var(--purple);font-weight:700}
.gp-plan small{color:var(--text-dim)}
.gp-time{font-size:.8rem;color:var(--text-muted);margin:0}

/* ── Buttons & Stage Navigation ─────────────────────────────────────────── */
.gp-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.gp-stage-actions{margin-top:.75rem;padding:.25rem 0;flex-direction:column;align-items:center}
.gp-stage-motive{width:100%;display:flex;justify-content:center;margin-bottom:.4rem}
.gp-motive-pill { box-shadow:0 2px 6px rgba(0,0,0,.06); }
.gp-btn-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;width:100%}
.gp-btn{background:var(--purple);color:#fff;border:none;border-radius:var(--radius);padding:.75rem 1.5rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .12s,filter .12s,background .12s,border-color .12s,color .12s}
.gp-btn:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.gp-btn:disabled{opacity:.45;cursor:not-allowed}
.gp-btn.ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.gp-btn.ghost:hover:not(:disabled){background:var(--surface);border-color:var(--purple);color:var(--purple);filter:none}
.gp-btn.gp-go{padding:.9rem 2.2rem;font-size:1.05rem;background:linear-gradient(120deg,var(--purple),var(--teal))}
.gp-check-btn{align-self:flex-start}

/* ── Teacher: avatar, bubble, thinking pause ─────────────────────────── */
.gp-teacher{display:grid;grid-template-columns:64px 1fr;gap:.8rem;align-items:start;position:relative}
.gp-teacher.done{opacity:.55}
.gp-ava{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:linear-gradient(135deg,var(--purple-soft),var(--teal-soft));border:2px solid var(--border);position:relative}
.gp-ava.speak{border-color:var(--teal);animation:gp-pulse 1.1s ease-in-out infinite}
.gp-ava[data-mood=ask]{border-color:var(--accent);background:var(--accent-soft)}
@keyframes gp-pulse{50%{box-shadow:0 0 0 9px var(--teal-soft)}}
.gp-bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px var(--radius-lg) var(--radius-lg) var(--radius-lg);padding:.9rem 1.1rem;min-width:0;position:relative}
.gp-teacher.ask .gp-bubble{border-color:var(--accent);background:var(--accent-soft)}
.gp-bubble.pop{animation:gp-pop .3s var(--ease-out,ease-out)}
@keyframes gp-pop{from{transform:scale(.96);opacity:.4}}
.gp-bubble-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.gp-bubble-row .gp-cap{flex:1;min-width:0}
.gp-cap{font-family:var(--font-display);font-size:1.18rem;line-height:1.5;color:var(--text);margin:0;text-wrap:pretty}
.gp-gloss{font-size:.82rem;color:var(--text-muted);margin:.35rem 0 0;line-height:1.4}
.gp-gloss:empty{display:none}
.gp .tts-icon-btn.small{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:.82rem;cursor:pointer;transition:all .15s}
.gp .tts-icon-btn.small:hover{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.gp .tts-icon-btn.small:active{transform:scale(.92)}
.gp-pause.think{grid-column:1 / -1;display:flex;flex-direction:column;gap:.3rem}
.gp-think{font-size:.78rem;font-weight:700;color:var(--accent-text);letter-spacing:.04em;text-transform:uppercase}
.gp-blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--accent);margin:0 .15em;transform:translateY(2px)}

/* ── Board: what the teacher writes down ─────────────────────────────── */
.gp-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.7rem}
.gp-note{background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);padding:.7rem .9rem;font-size:.88rem;line-height:1.5;animation:gp-in .4s both}
.gp-note b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--purple);margin-bottom:.25rem}
.gp-note.rule{border-style:solid;border-color:var(--purple);background:var(--purple-soft)}
.gp-note.warn{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.gp-note.warn b{color:var(--accent-text)}
.gp-note p{margin:0}
.gp-bchips{display:flex;flex-wrap:wrap;gap:.3rem}

/* ── Scene (the story) ───────────────────────────────────────────────── */
.gp-scene{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;}
.gp-line-fr{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-family:var(--font-display);font-size:1.1rem;color:var(--text);animation:gp-in .4s both}
.gp-line-fr small{display:block;font-family:var(--font-body);font-size:.8rem;color:var(--text-muted);margin-top:.1rem}
.gp-line-body{flex:1;min-width:0}

/* ── Questions ───────────────────────────────────────────────────────── */
.gp-item,.gp-check,.gp-sort{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem}
.gp-item.done{opacity:.6}
.gp-item.boss{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.gp-ihead{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);font-weight:700}
.gp-boss{color:var(--red)}
.gp-rev{color:var(--teal-text)}
.gp-q{font-size:1.15rem;line-height:1.5;color:var(--text);margin:0;font-family:var(--font-display)}
.gp-q.en{font-family:var(--font-body);font-size:1rem;color:var(--text-muted)}
.gp-q.wrong-src{color:var(--red);text-decoration:line-through;text-decoration-color:var(--red-soft)}
.gp-instr{font-size:.88rem;color:var(--text-muted);margin:0}
.gp-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.gp-opt{background:var(--surface-2);color:var(--text);border:2px solid var(--border);border-radius:var(--radius);padding:.75rem .9rem;font-size:1rem;cursor:pointer;text-align:center;transition:border-color .12s,transform .12s;min-width:0}
.gp-opt:hover:not(:disabled){border-color:var(--purple);transform:translateY(-1px)}
.gp-opt.ok{border-color:var(--green);background:var(--green-soft)}
.gp-opt.bad{border-color:var(--red);background:var(--red-soft);animation:gp-shake .35s}
@keyframes gp-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.gp-input,.gp-text{width:100%;box-sizing:border-box;background:var(--bg);color:var(--text);border:2px solid var(--border);border-radius:var(--radius);padding:.75rem .9rem;font-size:1rem;font-family:var(--font-body)}
.gp-input:focus,.gp-text:focus{outline:none;border-color:var(--purple)}
.gp-input.ok,.gp-line.ok{border-color:var(--green)}
.gp-input.bad,.gp-line.bad{border-color:var(--red)}
.gp-text{resize:vertical;min-height:5.5rem}
.gp-help{display:flex;flex-wrap:wrap;gap:.5rem}
.gp-hint,.gp-struct-btn{background:var(--teal-soft);border:1px solid transparent;color:var(--teal-text);cursor:pointer;font-size:.85rem;font-weight:600;padding:.35rem .8rem;border-radius:99px}
.gp-hint:hover:not(:disabled),.gp-struct-btn:hover{border-color:var(--teal)}
.gp-hint:disabled{opacity:.7;cursor:default}
.gp-hint small,.gp-struct-btn small{font-weight:500;opacity:.8;margin-left:.2rem}
.gp-funny{font-size:.82rem;font-style:italic;color:var(--text-muted)}
.gp-accents{display:flex;flex-wrap:wrap;gap:.3rem}
.gp-accents[hidden]{display:none}
.gp-accents .accent-btn{padding:.3rem .6rem;font-size:.9rem;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--font-body)}
.gp-accents .accent-btn:hover:not(:disabled){background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.gp-accents .accent-btn:disabled{opacity:.4;cursor:default}
.gp-modal{z-index:300}
.gp-modal-box{position:relative;display:flex;flex-direction:column;gap:.7rem;box-shadow:var(--shadow-m)}
.gp-modal-box h3{margin:0;font-family:var(--font-display);font-size:1.15rem;padding-right:2rem}
.gp-modal-x{position:absolute;top:.6rem;right:.6rem;background:none;border:none;color:var(--text-muted);font-size:1.1rem;cursor:pointer}
.gp-formula{margin:0;padding:.6rem .8rem;background:var(--accent-soft);color:var(--accent-text);border-radius:var(--radius);font-weight:700;text-align:center}
.gp-sl{display:grid;gap:.1rem;padding:.5rem 0;border-top:1px solid var(--border)}
.gp-sl b{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.gp-sfr{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-size:1.05rem}
.gp-sl em{font-size:.85rem;color:var(--text-muted)}
.gp-stage-img{margin:0;border-radius:var(--radius);overflow:hidden;position:relative}
.gp-stage-img img{display:block;width:100%;max-height:11rem;object-fit:cover}
.gp-stage-img figcaption{position:absolute;right:.5rem;bottom:.3rem;font-size:.68rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.gp-stage-img a{color:#fff}
.gp-steps{background:var(--teal-soft);border-radius:var(--radius);padding:.6rem .9rem;font-size:.88rem}
.gp-steps p{margin:.15rem 0}
.gp-line{min-height:3rem;border:2px dashed var(--border);border-radius:var(--radius);padding:.4rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.gp-tiles{display:flex;flex-wrap:wrap;gap:.5rem}
.gp-tile{background:var(--surface-2);color:var(--text);border:2px solid var(--border);border-radius:var(--radius);padding:.5rem .8rem;font-size:1rem;cursor:pointer;transition:transform .12s}
.gp-tile:hover:not(:disabled){transform:translateY(-2px);border-color:var(--purple)}
.gp-fb{border-radius:var(--radius);padding:.8rem 1rem;font-size:.92rem;line-height:1.5;animation:gp-in .3s both}
.gp-fb.ok{background:var(--green-soft);border-left:4px solid var(--green)}
.gp-fb.bad{background:var(--red-soft);border-left:4px solid var(--red)}
.gp-fb b{color:var(--text)}
.gp-fb p{margin:.3rem 0 0;color:var(--text)}
.gp-full-fr{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 .2rem;padding:.4rem .6rem;background:var(--surface);border-radius:var(--radius);font-family:var(--font-display);font-size:1.05rem;color:var(--text)}
.gp-full-fr span{flex:1;min-width:0}
.gp-check-fr{display:flex;align-items:center;gap:.6rem;margin-top:.5rem;padding:.4rem .6rem;background:var(--surface-2);border-radius:var(--radius);font-family:var(--font-display);font-size:1.05rem;color:var(--text)}
.gp-check-fr span{flex:1;min-width:0}
.gp-pit{background:var(--surface);border-radius:var(--radius);padding:.5rem .7rem;font-size:.85rem}
.gp-gain{float:right;color:var(--green);font-weight:800}

/* ── Noticing sort ───────────────────────────────────────────────────── */
.gp-srow{display:grid;grid-template-columns:minmax(7rem,1fr) auto;gap:.3rem .7rem;align-items:center;padding:.5rem .6rem;border-radius:var(--radius);background:var(--surface-2);border:2px solid transparent}
.gp-srow.ok{border-color:var(--green)}
.gp-srow.bad{border-color:var(--red)}
.gp-sw{font-family:var(--font-display);font-size:1.05rem}
.gp-sb{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.gp-sb button{background:var(--surface);color:var(--text);border:2px solid var(--border);border-radius:99px;padding:.3rem .8rem;font-size:.82rem;cursor:pointer}
.gp-sb button.sel{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}
.gp-sy{grid-column:1 / -1;font-size:.8rem;color:var(--text-muted);font-style:normal}
.gp-reveal{background:var(--teal-soft);border-radius:var(--radius);padding:.7rem .9rem;margin:0;font-size:.9rem}

/* ── Free production ─────────────────────────────────────────────────── */
.gp-model{display:flex;flex-direction:column;gap:.6rem}
.gp-ck{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;cursor:pointer}
.gp-ck input{margin-top:.25rem;accent-color:var(--purple)}

/* ── Reference (diagram + examples) and recap ────────────────────────── */
.gp-ref,.gp-recap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.2rem}
.gp-recap ol{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.3rem;font-size:.98rem}

/* ── End screen ──────────────────────────────────────────────────────── */
.gp-end{padding:1.4rem;display:flex;flex-direction:column;gap:.8rem;text-align:center;}
.gp-end .sec-title{text-align:left;margin:0}
.gp-bigstars{font-size:3rem;letter-spacing:.2em;color:var(--border)}
.gp-bigstars .on{color:var(--accent-text);animation:gp-star .6s var(--ease-spring,ease-out) both}
.gp-bigstars span:nth-child(2){animation-delay:.15s}.gp-bigstars span:nth-child(3){animation-delay:.3s}
@keyframes gp-star{from{transform:scale(0) rotate(-40deg)}}
.gp-end h3{font-family:var(--font-display);font-size:1.5rem;margin:0;color:var(--text)}
.gp-xpline{margin:0;color:var(--text-muted)}
.gp-stagexp{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.gp-sx{font-size:.78rem;padding:.25rem .65rem;border-radius:99px;background:var(--surface-2);color:var(--text-muted)}
.gp-sx b{color:var(--green)}
.gp-mast{display:flex;gap:.7rem;text-align:left;align-items:flex-start;background:var(--surface-2);border-radius:var(--radius);padding:.6rem .8rem}
.gp-ms{font-size:1.4rem;color:var(--accent-text);line-height:1}
.gp-mast b{display:block;font-size:.88rem;font-weight:600;color:var(--text)}
.gp-mast small{color:var(--text-muted);font-size:.78rem}
.gp-next{margin:0;font-size:.88rem;color:var(--teal-text);background:var(--teal-soft);border-radius:var(--radius);padding:.6rem .8rem}
.gp-transfer{display:flex;align-items:flex-start;gap:.6rem;margin:0;font-family:var(--font-display);font-size:1.05rem;color:var(--text);text-align:left}
.gp-transfer small{display:block;font-family:var(--font-body);font-size:.8rem;color:var(--text-muted);margin-top:.15rem}
.gp-transfer .gp-line-body{flex:1;min-width:0}

/* ── Floating controls ───────────────────────────────────────────────── */
.gp-ctl{position:fixed;left:50%;transform:translateX(-50%);bottom:max(1rem,env(safe-area-inset-bottom));z-index:20;display:flex;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:.4rem;box-shadow:var(--shadow-m)}
.gp-ctl[hidden]{display:none}
.gp-ctl button{background:none;border:none;color:var(--text);font-size:.85rem;padding:.5rem .9rem;border-radius:99px;cursor:pointer}
.gp-ctl button:hover{background:var(--surface-2)}
.gp-ctl button.on{background:var(--teal-soft);color:var(--teal-text)}
.gp-ctl .gp-skip{background:var(--purple);color:#fff;font-weight:700}

@media (max-width:768px){
  body.has-tabbar .gp-ctl{bottom:calc(72px + env(safe-area-inset-bottom));z-index:270}
  body.has-tabbar .gp{padding-bottom:9rem}
}
@media (max-width:560px){
  .gp-top{grid-template-columns:auto 1fr;grid-template-areas:"x chips" "rail rail"}
  .gp-x{grid-area:x}.gp-chips{grid-area:chips;justify-content:flex-end}.gp-rail{grid-area:rail}
  .gp-teacher{grid-template-columns:48px 1fr;gap:.55rem}
  .gp-ava{width:48px;height:48px;font-size:1.5rem}
  .gp-cap{font-size:1.05rem}
  .gp-rail li span{display:none}
}
@media (prefers-reduced-motion:reduce){.gp *,.gp *::before{animation:none!important;transition:none!important}}
/* reward toasts must never sit on top of the lesson controls */
body:has(.gp) .rw-toast-wrap, body:has(.gp) .rw-toast { pointer-events: none; }

/* M556: English show/hide toggle in the lesson player. .gp-en marks the
   English scaffolding (glosses, explanations, trap notes). The translate/order
   prompts are the task itself and are NOT .gp-en, so they always stay. */
.gp.gp-hide-en .gp-en { display: none !important; }
.gp-en-toggle { cursor: pointer; border: 1px solid rgba(148,163,184,.4); font-weight: 700; letter-spacing: .03em; }
.gp-en-toggle.is-off { opacity: .55; text-decoration: line-through; }

/* M560: retry on wrong answers + free-production keyword check. */
.gp-retry-row { margin-top: .5rem; }
.gp-produce-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.gp-kw { margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.gp-kw .gp-instr { width: 100%; margin: 0 0 .2rem; }
.gp-kw-chip { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid; }
.gp-kw-chip.ok { color: #22c55e; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); }
.gp-kw-chip.bad { color: #f87171; border-color: rgba(248,113,113,.5); background: rgba(248,113,113,.12); }