/* TeachingTool — shared style for Ms Yau's Unit 1 grammar games.
   Blue-only palette (no pink). Used by u1_*.html via assets/gq.js. */
:root {
  --blue:#1565c0; --blue-dk:#0d47a1; --blue-lt:#e3f2fd; --blue-md:#bbdefb;
  --green:#2e7d32; --red:#c62828; --amber:#b26a00;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Segoe UI','PingFang HK','Microsoft JhengHei',sans-serif;
       background:linear-gradient(160deg,#e3f2fd,#e1f5fe); min-height:100vh; padding:16px; }
header { display:flex; align-items:center; justify-content:space-between; max-width:900px;
         margin:0 auto 12px; flex-wrap:wrap; gap:8px; }
h1 { color:var(--blue); font-size:1.22rem; }
.back { color:var(--blue); text-decoration:none; font-weight:700; font-size:.9rem;
        background:#fff; padding:6px 14px; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.08); }
#score { background:#fff; border-radius:999px; padding:8px 16px; font-weight:700; color:var(--blue); }
.bar { background:var(--blue-md); height:12px; border-radius:999px; overflow:hidden; max-width:900px; margin:0 auto 14px; }
.bar i { display:block; height:100%; width:0%; background:var(--blue); transition:.3s; }

#game, #res { background:#fff; border-radius:24px; padding:24px 22px; max-width:900px;
              margin:0 auto; box-shadow:0 6px 22px rgba(21,101,192,.12); text-align:center; }
#res { display:none; margin-top:16px; }
#res h2 { color:var(--blue); }
.qno { color:#9aa; font-weight:700; font-size:.85rem; letter-spacing:1px; }
.sent { font-size:1.45rem; font-weight:700; color:#333; margin:16px 0 6px; line-height:1.7; }
.sent u { color:var(--blue); text-decoration-thickness:4px; text-underline-offset:4px; letter-spacing:2px; }
.hint { color:#999; font-size:.92rem; margin-bottom:4px; }
.zhline { color:var(--blue); font-size:.92rem; font-weight:600; }

/* picture slot — collapses when a question has no photo */
#pic { margin:6px auto 0; }
#pic img { max-height:170px; max-width:100%; border-radius:16px; border:3px solid var(--blue-lt); }

.opts { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
.opt { padding:13px 22px; font-size:1.05rem; font-weight:700; border:3px solid var(--blue-md);
       border-radius:16px; background:#f5fbff; cursor:pointer; transition:.15s; color:var(--blue-dk); }
.opt:hover { background:var(--blue-lt); transform:scale(1.04); }
.opt.correct { background:var(--green); color:#fff; border-color:var(--green); }
.opt.wrongsel { background:var(--red); color:#fff; border-color:var(--red); }
.opt:disabled { cursor:default; opacity:.85; }

#fb { min-height:2.6em; margin-top:18px; font-weight:700; font-size:1.02rem; color:#555; }
#fb .zh { display:block; color:var(--blue); font-weight:600; font-size:.95rem; margin-top:4px; }
#fb .quote { display:block; color:#777; font-weight:600; font-size:.92rem; margin-top:4px; }
#next { display:none; margin:10px auto 0; background:var(--blue); color:#fff; border:none;
        padding:12px 36px; border-radius:999px; font-size:1.05rem; font-weight:700; cursor:pointer; }

/* ---- timetable ---- */
#tableBox { margin:10px auto 0; overflow-x:auto; }
table.tt { border-collapse:collapse; margin:0 auto; font-size:.92rem; }
table.tt caption { color:var(--blue); font-weight:800; padding-bottom:6px; font-size:1rem; }
table.tt th { background:var(--blue-lt); color:var(--blue-dk); padding:6px 9px; border:1px solid var(--blue-md); }
table.tt td { border:1px solid var(--blue-md); padding:6px 9px; min-width:42px; color:#bbb; }
table.tt td.act { text-align:left; color:#333; font-weight:700; background:#fafdff; white-space:nowrap; }
table.tt td.on { color:var(--blue); font-weight:900; font-size:1.1rem; }

/* ---- drag & drop round ---- */
#dragBox { display:none; text-align:left; margin-top:14px; }
.bankLabel { color:#8aa; font-size:.84rem; font-weight:700; margin:12px 0 8px; }
#boxes { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.box { flex:1 1 180px; min-height:96px; border:3px dashed var(--blue-md); border-radius:16px;
       background:#f7fbff; padding:10px; display:flex; flex-wrap:wrap; align-content:flex-start;
       gap:8px; transition:.15s; }
.box .bl { display:block; width:100%; text-align:center; color:var(--blue-dk); font-weight:800;
           font-size:.92rem; margin-bottom:4px; }
.box.over { border-color:var(--blue); background:var(--blue-lt); transform:scale(1.02); }
#bank { display:flex; flex-wrap:wrap; gap:9px; min-height:56px; background:#f7fbff;
        border:2px dashed var(--blue-md); border-radius:16px; padding:10px; }
.chip { background:var(--blue-md); color:var(--blue-dk); font-weight:800; padding:9px 15px;
        border-radius:999px; cursor:grab; touch-action:none; user-select:none; transition:.12s; }
.chip:hover { background:#90caf9; }
.chip.sel { background:var(--blue); color:#fff; }
.chip.right { background:#c8e6c9; color:#1b5e20; }
.chip.wrong { background:#ffcdd2; color:#b71c1c; }
#ghost { position:fixed; pointer-events:none; z-index:9999; opacity:.9; }
#checkDrag { display:none; margin:14px auto 0; background:var(--blue); color:#fff; border:none;
             padding:12px 36px; border-radius:999px; font-size:1.05rem; font-weight:700; cursor:pointer; }

/* ---- results table ---- */
#recap { margin-top:12px; overflow-x:auto; }
#recap table { width:100%; border-collapse:collapse; font-size:.94rem; }
#recap th { background:var(--blue-lt); color:var(--blue-dk); padding:8px 6px; text-align:left; border-bottom:2px solid var(--blue-md); }
#recap td { border-bottom:1px solid #eef6ff; padding:8px 6px; text-align:left; vertical-align:top; }
#recap td.mdl { color:var(--blue); font-weight:700; }
#recap td.zh { color:#888; font-size:.88rem; }
.row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { background:var(--blue); color:#fff; border:none; padding:12px 30px; border-radius:999px;
       font-size:1.05rem; font-weight:700; cursor:pointer; margin-top:18px; }
.btn.ghost { background:#fff; color:var(--blue); border:3px solid var(--blue-md); }

/* ---------------- optional teaching notes (cfg.notes) ----------------
   Rendered only when a game passes cfg.notes, so the other grammar games
   are untouched.  Block types: h / p / steps / pairs / wrong / table / tip.
   Text may use **bold**.  Click the title bar to collapse. */
#notes { text-align:left; background:#f5fbff; border:3px solid var(--blue-md);
         border-radius:20px; margin:0 0 18px; overflow:hidden; }
#notes .nhead { display:flex; align-items:center; justify-content:space-between; gap:10px;
                cursor:pointer; background:var(--blue-lt); color:var(--blue-dk);
                font-weight:800; padding:12px 16px; font-size:1.02rem;
                -webkit-user-select:none; user-select:none; }
#notes .nhead .zh { font-weight:700; color:var(--blue); font-size:.86rem; white-space:nowrap; }
#notes .nbody { padding:14px 18px 16px; }
#notes.hide .nbody { display:none; }
#notes h3 { color:var(--blue); font-size:1rem; margin:15px 0 6px; }
#notes h3:first-child { margin-top:0; }
#notes p { color:#37474f; font-size:.96rem; line-height:1.65; margin:3px 0 4px; }
#notes ol { margin:6px 0 6px 22px; color:#37474f; font-size:.96rem; line-height:1.75; }
#notes b { color:var(--blue-dk); }
#notes .pair { margin:6px 0; font-size:1rem; line-height:1.6; }
#notes .pair .from { color:#607d8b; }
#notes .pair .arrow { color:var(--blue); font-weight:900; margin:0 8px; }
#notes .pair .to { color:var(--green); font-weight:800; }
#notes table { width:100%; border-collapse:collapse; font-size:.93rem; margin:8px 0 4px; }
#notes th { background:var(--blue-lt); color:var(--blue-dk); text-align:left; padding:7px 10px;
            border:1px solid var(--blue-md); }
#notes td { padding:7px 10px; border:1px solid var(--blue-md); color:#37474f; vertical-align:top; }
#notes td.bad { color:var(--red); font-weight:700; }
#notes td.good { color:var(--green); font-weight:700; }
#notes td.why { color:#78909c; font-size:.9rem; }
#notes .tip { background:#fff; border-left:5px solid var(--amber); padding:9px 12px; border-radius:10px;
              color:#5d4037; font-size:.95rem; margin:12px 0 0; line-height:1.6; }

/* ---------------- sentence-building round (cfg.build) ----------------
   One drop zone = the sentence strip.  Chips keep the same drag/tap
   machinery as the word-bank round; the full stop / question mark is a
   fixed marker pinned to the end with CSS order. */
#boxes .box.sentenceBox { flex:1 1 100%; min-height:64px; display:flex; flex-wrap:wrap; gap:8px;
  align-items:center; justify-content:flex-start; padding:12px 14px; background:#f5fbff; }
#boxes .box.sentenceBox .term { order:999; margin-left:2px; font-size:1.6rem; font-weight:900;
  color:var(--blue); }
#boxes .box.sentenceBox .chip { cursor:grab; }

/* ---------------- reminder strip (notes.remind) ----------------
   A compact, STICKY copy of the key rules that sits directly above every
   question, so it stays on screen while the student is answering (and while
   the full notes panel is scrolled away or collapsed). */
#remind { position:sticky; top:0; z-index:6; display:flex; flex-wrap:wrap; gap:4px 16px;
  align-items:center; justify-content:center; background:#fff8e1; border:2px solid #ffe082;
  border-radius:14px; padding:9px 14px; margin:0 0 12px; text-align:left;
  box-shadow:0 3px 10px rgba(21,101,192,.12); }
#remind .rl { font-weight:800; color:var(--amber); font-size:.85rem; white-space:nowrap; }
#remind .ri { font-size:.92rem; color:#5d4037; line-height:1.5; }
#remind b { color:var(--blue-dk); }