/* Shared lesson shell styles — used by app/staircase/lesson/[order]/route.ts
   and the frozen /public/stages/*.html pilots. */

  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

  /* "lesson" design tokens (matches app/globals.css). Var NAMES kept so the
     whole stylesheet below re-themes by repointing here — _engine.js reads
     --card/--line/--teal/--ink/--mute from inline styles, so those must stay.
     Roles: teal = brand + selection, good = correct, garnet = wrong,
     amber = the writing/condition voice, plum = the warm context panel. */
  :root{
    --ink:#1c1d1f; --teal:#20505f; --teal-d:#1a424e; --teal-dd:#143540; --amber:#9c7b34; --plum:#6d5f45; --garnet:#9c3a2e;
    --paper:#fbfaf7; --card:#ffffff; --line:#e3e0d8; --text:#3a3c40; --mute:#5c5f66; --faint:#8f887a;
    --teal-bg:#e9f0f2; --amber-bg:#f8f2e6; --garnet-bg:#f7ecea; --plum-bg:#f6efe4;
    /* added: surfaces + per-voice line/ink pairs so hex stops repeating */
    --wash:#f0ede5; --chip:#eceae3; --dash:#c9c5ba;
    --teal-line:#cbdbe0; --teal-ink:#1a424e;
    --amber-line:#e4d6bd; --amber-ink:#6d5522; --amber-lab:#8a6c2c;
    --garnet-line:#e4cfc9;
    --plum-line:#e6dcc7; --plum-ink:#4a4436;
    --good:#2e6e4e; --good-bg:#eef4ef; --good-line:#cfdcd2;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,'Noto Sans KR',sans-serif;
    /* Georgia carries the student-facing English prose; it has no Hangul, so
       the Korean serif names (and the generic `serif` tail) pick up 한글. */
    --serif:Georgia,'Times New Roman','Noto Serif KR','Nanum Myeongjo',serif;
  }
  *{box-sizing:border-box;}
  /* No bounce inside the lesson frame either — an overscroll here would chain
     to the page behind it and drag the header down with it. */
  html,body{margin:0;padding:0;overscroll-behavior:none;}
  body{
    background:var(--wash);
    font-family:var(--sans);
    color:var(--text); -webkit-font-smoothing:antialiased;
    padding:22px 12px 60px;
  }
  body{padding:26px 16px 40px;}
  .app{max-width:620px; margin:0 auto;}

  /* ── sheet ──
     Part for part the UK player's: a bordered paper card, a header band
     carrying the eyebrow / lesson name / per-screen dots, then the body the
     engine renders into. The .foot the engine emits as the body's last child
     is pulled out to the card's edges so it reads as the sheet's footer. */
  .sheet{
    background:var(--paper); border:1px solid var(--line); border-radius:20px;
    box-shadow:0 10px 34px rgba(28,25,18,.09); overflow:hidden;
    display:flex; flex-direction:column;
  }
  .sheet > header{padding:18px 22px 13px; border-bottom:1px solid var(--line);}
  .kick{
    font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
    display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:600;
  }
  .kick .tier{
    background:var(--chip); border-radius:99px; padding:2px 9px; font-size:10px;
    letter-spacing:.06em; font-weight:650; color:var(--mute); white-space:nowrap;
  }
  .sheet > header h1{font-size:17px; margin:6px 0 10px; font-weight:650; color:var(--ink);}
  .dots{display:flex; gap:5px;}
  .dots i{flex:1; height:3px; border-radius:2px; background:var(--line);}
  .dots i.on{background:var(--teal);}

  /* legacy topbar — still present in the frozen /public/stages pilots */
  .topbar{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .brandmark{font-family:var(--serif); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.01em; white-space:nowrap;}
  .progress{flex:1; height:8px; background:#e0ddd3; border-radius:99px; overflow:hidden;}
  .progress .fill{height:100%; width:0%; background:var(--teal); border-radius:99px; transition:width .45s cubic-bezier(.2,.8,.3,1);}
  .topbar .xp{font-family:var(--sans); font-size:11px; color:var(--amber-lab); font-weight:700; letter-spacing:.04em; white-space:nowrap; min-width:52px; text-align:right;}
  .skillline{display:flex; align-items:baseline; gap:9px; margin-bottom:12px; flex-wrap:wrap;}
  .skillline .sid{font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-lab); font-weight:700;}
  .skillline .sname{font-family:var(--sans); font-size:14px; font-weight:700; color:var(--ink);}

  .screen{
    padding:22px; min-height:420px; display:flex; flex-direction:column;
    animation:slideIn .32s ease;
  }
  /* the frozen pilots have no .sheet, so the screen is still its own card */
  .app > .screen{
    background:var(--paper); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 10px 34px rgba(28,25,18,.09); padding:26px 26px 24px;
  }
  @keyframes slideIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .screen{animation:none;} .progress .fill{transition:none;} }

  .stype{font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
  .stype.concept{color:var(--ink);} .stype.see{color:var(--teal);} .stype.judge{color:var(--plum);} .stype.write{color:var(--amber-lab);} .stype.legend{color:var(--plum);} .stype.wrap{color:var(--ink);}
  .stype .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
  .stype .legendtag{margin-left:auto; font-size:9px; letter-spacing:.08em; color:var(--plum); background:var(--plum-bg); border:1px solid var(--plum-line); border-radius:99px; padding:2px 9px; text-transform:none;}

  .q{font-size:15.5px; line-height:1.6; color:var(--text); font-weight:500; margin:0 0 16px;}
  .q b{color:var(--ink);}

  /* concept */
  .concept-title{font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.3; margin:2px 0 12px;}
  .concept-body{font-size:14px; line-height:1.7; color:var(--text); margin-bottom:14px;}
  .concept-body b{color:var(--ink);}
  .concept-body .contrast{color:var(--mute); font-size:12.5px; display:block; margin-top:7px;}
  .formula{display:flex; align-items:stretch; gap:8px; margin:4px 0 14px; flex-wrap:wrap;}
  .fpart{flex:1; min-width:110px; border-radius:12px; padding:10px 12px; text-align:center;}
  .fpart .fk{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:5px; font-weight:700;}
  .fpart .fv{font-family:var(--serif); font-size:15px; font-weight:600; line-height:1.3;}
  .fpart.give{background:var(--teal-bg); border:1px solid var(--teal-line);} .fpart.give .fk{color:var(--teal);} .fpart.give .fv{color:var(--teal-ink);}
  .fpart.claim{background:var(--amber-bg); border:1px solid var(--amber-line);} .fpart.claim .fk{color:var(--amber-lab);} .fpart.claim .fv{color:var(--amber-ink);}
  .farrow{align-self:center; color:var(--dash); font-size:16px;}
  .model-sent{font-family:var(--serif); font-size:16.5px; line-height:1.6; color:var(--ink); background:var(--card); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:0 12px 12px 0; padding:14px 16px; margin-bottom:12px;}
  .model-sent .gv{color:var(--teal); font-weight:600;} .model-sent .cl{color:var(--amber-ink); font-weight:600;}
  .examtip{display:flex; gap:9px; align-items:flex-start; background:var(--plum-bg); border:1px solid var(--plum-line); border-radius:12px; padding:10px 13px; font-size:12px; line-height:1.6; color:var(--plum-ink);}
  .examtip .tk{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--plum); font-weight:700; white-space:nowrap; padding-top:2px;}

  /* options */
  .opts{display:flex; flex-direction:column; gap:10px;}
  .opt{
    text-align:left; background:var(--card); border:1.5px solid var(--line); border-radius:12px;
    padding:13px 15px; font-family:var(--serif); font-size:15px; line-height:1.55; color:var(--ink);
    cursor:pointer; transition:border-color .12s, background .12s, transform .06s; width:100%;
  }
  .opt:hover:not(:disabled){border-color:var(--teal); transform:translateY(-1px);}
  .opt:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .opt:disabled{cursor:default;}
  .opt.sel{border-color:var(--teal); background:var(--teal-bg);}
  .opt.correct{border-color:var(--good); background:var(--good-bg);}
  .opt.wrong{border-color:var(--garnet); background:var(--garnet-bg);}
  .opt .why{display:none; font-family:var(--sans); font-size:11.5px; line-height:1.55; color:var(--mute); margin-top:8px; padding-top:8px; border-top:1px dashed var(--dash);}
  .opt.reveal .why{display:block;}
  .opt.correct .why{color:var(--good);} .opt.wrong .why{color:var(--garnet);}

  /* tap the part */
  .tapsent{font-family:var(--serif); font-size:18px; line-height:1.8; color:var(--ink); margin:6px 0 4px;}
  .tapspan{cursor:pointer; border-bottom:2.5px dashed var(--dash); border-radius:4px; padding:2px 3px; transition:background .12s;}
  .tapspan:hover{background:var(--chip);}
  .tapspan:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .tapspan.sel{background:var(--teal-bg); border-bottom-color:var(--teal); border-bottom-style:solid;}
  .tapspan.correct{background:var(--good-bg); border-bottom-color:var(--good);}
  .tapspan.wrong{background:var(--garnet-bg); border-bottom-color:var(--garnet);}

  /* tiles */
  .buildrow{min-height:56px; border:1.5px dashed var(--dash); border-radius:12px; background:var(--chip); padding:9px; display:flex; flex-wrap:wrap; gap:7px; align-items:flex-start; margin-bottom:14px;}
  .buildrow.empty::before{content:"타일을 눌러 문장을 만들어 보세요"; color:var(--faint); font-size:12px; padding:6px 4px;}
  .bank{display:flex; flex-wrap:wrap; gap:8px;}
  .tile{
    font-family:var(--serif); font-size:14.5px; color:var(--ink);
    background:var(--card); border:1.5px solid var(--line); border-bottom-width:2.5px; border-radius:99px;
    padding:8px 14px; cursor:pointer; transition:transform .07s, border-color .12s;
  }
  .tile:hover{border-color:var(--teal); transform:translateY(-1px);}
  .tile:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .tile.used{opacity:.25; pointer-events:none;}
  .buildrow .tile{border-color:#d8d4c9; background:#fff;}

  /* write */
  .promptbox{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.65; color:var(--text); margin-bottom:12px;}
  .promptbox b{color:var(--ink);}
  .given{display:flex; flex-direction:column; gap:7px; margin-bottom:12px;}
  .given .gs{display:flex; gap:10px; align-items:baseline; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:9px 13px;}
  .given .gn{font-family:var(--sans); font-size:10px; letter-spacing:.08em; color:var(--faint); white-space:nowrap;}
  .given .gt{font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.5;}
  .src{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:10px;}
  .src .st{display:flex; justify-content:space-between; align-items:center; background:var(--chip); padding:7px 13px; font-family:var(--sans); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--mute);}
  .src .sb{font-family:var(--serif); font-size:14.5px; line-height:1.65; color:var(--ink); padding:11px 13px;}
  .glossline{display:none; font-family:var(--sans); font-size:11.5px; color:var(--mute); margin-top:6px; padding-top:6px; border-top:1px dashed var(--dash); line-height:1.55;}
  .gloss-on .glossline{display:block;}
  .glossbtn{align-self:flex-start; font-family:var(--sans); font-size:10px; letter-spacing:.06em; font-weight:700; color:var(--plum); background:var(--plum-bg); border:1px solid var(--plum-line); border-radius:99px; padding:4px 12px; cursor:pointer; margin:-4px 0 12px; display:inline-block;}
  .glossbtn:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .cond{border:1.4px solid var(--amber-line); background:var(--amber-bg); border-radius:12px; padding:10px 13px; margin-bottom:12px;}
  .cond .ct{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-lab); font-weight:700; margin-bottom:7px;}
  .chips{display:flex; flex-wrap:wrap; gap:7px;}
  .chip{
    font-size:11.5px; font-weight:600; color:var(--amber-ink); background:#fff; border:1.4px solid var(--amber-line); border-radius:99px;
    padding:4px 11px; display:inline-flex; align-items:center; gap:6px; transition:all .18s;
  }
  .chip .cmark{font-family:var(--sans); font-size:11px; width:13px; text-align:center;}
  .chip.pass{background:var(--good-bg); border-color:var(--good-line); color:var(--good);}
  .chip.fail{background:var(--garnet-bg); border-color:var(--garnet-line); color:var(--garnet);}
  .hygiene{display:flex; flex-wrap:wrap; gap:6px 14px; margin:-4px 0 12px; padding:0 3px;}
  .hyg{font-family:var(--sans); font-size:10px; letter-spacing:.04em; color:var(--faint); display:inline-flex; gap:5px; align-items:center; transition:color .18s;}
  .hyg.pass{color:var(--good);} .hyg.fail{color:var(--garnet);}
  textarea.write{
    width:100%; min-height:84px; resize:vertical; border:1.5px solid var(--line); border-radius:12px;
    background:var(--card); padding:13px 15px; font-family:var(--serif); font-size:16px; line-height:1.6; color:var(--ink);
  }
  textarea.write:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-bg);}
  .wcount{font-family:var(--sans); font-size:10.5px; color:var(--faint); text-align:right; margin-top:5px;}
  .wcount.over{color:var(--garnet); font-weight:700;}
  .modelreveal{display:none; margin-top:12px; background:var(--teal-bg); border:1px solid var(--teal-line); border-radius:12px; padding:11px 13px;}
  .modelreveal .mk{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:5px;}
  .modelreveal .mv{font-family:var(--serif); font-size:15px; color:var(--teal-ink); line-height:1.55;}
  .modelreveal.show{display:block;}

  /* coach */
  .coach{display:none; margin-top:auto; padding-top:16px;}
  .coach.show{display:block;}
  .coachbox{display:flex; gap:11px; align-items:flex-start; border-radius:12px; padding:12px 14px;}
  .coachbox.good{background:var(--good-bg); border:1px solid var(--good-line);}
  .coachbox.fix{background:var(--amber-bg); border:1px solid var(--amber-line);}
  .boo{
    width:34px; height:34px; flex:none; border-radius:50%;
    background:var(--teal-bg) url('/boo.svg') center/74% no-repeat;
    color:transparent; font-size:0; overflow:hidden;
  }
  .coachtext{font-size:13px; line-height:1.6; color:var(--text); padding-top:2px;}
  .coachtext b{color:var(--ink);}
  .coachbox.good .coachtext{color:var(--good);} .coachbox.good .coachtext b{color:#1f5238;}

  /* The engine emits .foot as the LAST child of .screen, so the negative
     margins pull it back out to the sheet's edges — same band, same rule, same
     button weights as the UK player's <footer>. */
  .foot{
    display:flex; gap:10px; margin:auto -22px -22px; padding:14px 22px 18px;
    border-top:1px solid var(--line);
  }
  .app > .screen > .foot{margin:auto -26px -24px; padding:14px 26px 20px;}
  .btn{
    border:none; background:var(--ink); color:#fff; font-family:var(--sans);
    font-size:14.5px; font-weight:600; border-radius:12px; padding:13px 20px;
    cursor:pointer; flex:2; transition:transform .07s, opacity .12s;
  }
  .btn:hover:not(:disabled){transform:translateY(-1px);}
  .btn:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .btn:disabled{opacity:.35; cursor:default;}
  /* .primary is the engine's name for the forward button; it is the plain
     .btn here, exactly as Continue is in the UK player. */
  .btn.primary{background:var(--ink); color:#fff;}
  .btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line); flex:1;}
  .btn.ghost:hover{border-color:var(--dash);}
  .btn.ghost.ready{background:var(--teal); border-color:var(--teal); color:#fff;}
  .btn.accent{background:var(--teal); color:#fff;}

  /* wrap */
  .wrap-xp{font-family:var(--serif); font-size:40px; font-weight:600; color:var(--amber); line-height:1;}
  .wrap-xp small{font-size:15px; color:var(--mute); font-weight:400;}
  .report{margin:18px 0 14px; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
  .report .rrow{display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-top:1px solid var(--line); font-size:12.5px; background:var(--card);}
  .report .rrow:first-child{border-top:none; background:var(--chip); font-family:var(--sans); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--mute);}
  .rmark{font-family:var(--sans); font-size:11.5px; font-weight:700;}
  .rmark.ok{color:var(--good);} .rmark.retry{color:var(--amber-lab);}
  .takeaway{font-size:13.5px; line-height:1.65; color:var(--plum-ink); background:var(--plum-bg); border:1px solid var(--plum-line); border-radius:12px; padding:12px 15px;}
  .takeaway b{color:var(--ink);}

  /* ── answer spectrum ── */
  .spectrum{display:none; margin-top:12px;}
  .spectrum.show{display:block;}
  .spec-head{font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:8px;}
  .spec-sum{font-size:12.5px; line-height:1.6; color:var(--text); background:var(--teal-bg); border:1px solid var(--teal-line); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
  .spec-row{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:7px;}
  .spec-tier{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:5px;}
  .spec-row.t0 .spec-tier{color:var(--mute);} .spec-row.t1 .spec-tier{color:var(--teal);} .spec-row.t2 .spec-tier{color:var(--amber-lab);}
  .spec-row.t2{border-color:var(--amber-line); background:var(--amber-bg);}
  .spec-text{font-family:var(--serif); font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.5;}
  .spec-why{font-family:var(--sans); font-size:11.5px; line-height:1.55; color:var(--mute); margin-top:5px;}
  .spec-row.mine{border:1.8px solid #9dbcc5; background:#eef4f6; box-shadow:0 2px 10px rgba(32,80,95,.12);}
  .spec-row.mine .spec-tier{color:var(--teal);}

  /* ── verdict card (write result) ── */
  .verdict{display:none; margin-top:12px; border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; background:var(--card);}
  .verdict.show{display:block; animation:slideIn .3s ease;}
  .verdict.pass{border-color:var(--good-line); background:var(--good-bg);}
  .verdict.escape{border-color:var(--amber-line); background:var(--amber-bg);}
  .verdict .vhead{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
  .verdict .vmark{font-family:var(--sans); font-weight:700; font-size:16.5px;}
  .verdict.pass .vmark{color:var(--good);} .verdict.escape .vmark{color:var(--amber-lab);}
  .verdict .vtier{margin-left:auto; font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--good); background:#fff; border:1.4px solid var(--good-line); border-radius:99px; padding:3px 10px; white-space:nowrap;}
  .verdict .vans{font-family:var(--serif); font-size:15.5px; line-height:1.6; color:var(--ink);}
  .verdict .vnote{font-size:12.5px; line-height:1.6; color:var(--amber-ink); margin-top:6px;}

  /* ── Boo 대화 (개념 화면) ──
     Fixed-height chat panel: the card never stretches — the transcript
     scrolls inside. margin-top:auto on the first row pins a short
     conversation to the bottom, like a real chat. Choices sit below the
     panel, always visible without scrolling. */
  .dlg{display:flex; flex-direction:column; gap:10px; margin:2px 0 10px;
    height:clamp(260px, 46dvh, 360px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--chip); border:1px solid var(--line); border-radius:12px; padding:12px;}
  .dlg > :first-child{margin-top:auto;}
  .drow{display:flex; gap:9px; align-items:flex-end; animation:bubIn .3s ease both;}
  .drow.stu{justify-content:flex-end;}
  .drow .boo{width:28px; height:28px; font-size:11px; margin-bottom:2px;}
  .dbub{max-width:84%; background:var(--card); border:1px solid var(--line); border-radius:13px; border-bottom-left-radius:5px; padding:10px 13px; font-size:13.5px; line-height:1.68; color:var(--text);}
  .dbub b{color:var(--ink);}
  .dbub.wide{max-width:100%; flex:1;}
  .drow.stu .dbub{background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber-ink); font-weight:600; border-radius:13px; border-bottom-right-radius:5px;}
  .dchoices{display:flex; flex-direction:column; gap:8px; padding-left:37px; animation:bubIn .3s ease both;}
  .dchoice{text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:11px 14px; font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .12s, transform .06s;}
  .dchoice:hover{border-color:var(--teal); transform:translateY(-1px);}
  .dchoice:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  .dnext{align-self:flex-end; background:transparent; border:1.4px solid var(--line); border-radius:99px; color:var(--mute); font-family:var(--sans); font-size:12px; font-weight:600; padding:8px 18px; cursor:pointer; animation:bubIn .3s ease both;}
  .dnext:hover{border-color:var(--teal); color:var(--teal);}
  .dnext:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
  @keyframes bubIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .drow,.dchoices,.dnext,.verdict.show{animation:none;} }

/* ── low-stage screen types (tapseq · sort · fill · tapnone · flipseq) ── */
.galways{display:block; font-family:var(--sans); font-size:11.5px; color:var(--mute); margin-top:6px; padding-top:6px; border-top:1px dashed var(--dash); line-height:1.55;}

/* sort: pool of words → buckets */
.pool{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.pool .tile.picked{border-color:var(--teal); background:var(--teal-bg); transform:translateY(-1px);}
.buckets{display:flex; gap:8px; flex-wrap:wrap;}
.bucket{flex:1; min-width:120px; border:1.5px dashed var(--dash); border-radius:12px; padding:10px; min-height:74px; background:var(--card); cursor:pointer; transition:border-color .12s;}
.bucket:hover{border-color:var(--teal);}
.bucket:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
.bucket .bk{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin-bottom:7px; color:var(--mute);}
.bucket.b-name .bk{color:var(--teal);} .bucket.b-act .bk{color:var(--amber-lab);} .bucket.b-desc .bk{color:var(--plum);}
.bucket .drop{display:flex; flex-wrap:wrap; gap:6px;}
/* .bchip = a placed word inside a bucket — isolated from the write-screen .chip */
.bchip{font-family:var(--serif); font-size:13px; font-weight:600; color:var(--ink); background:var(--chip); border:1px solid var(--line); border-radius:99px; padding:4px 11px; cursor:pointer;}
.bchip.ok{border-color:var(--good); background:var(--good-bg); color:var(--good);}
.bchip.bad{border-color:var(--garnet); background:var(--garnet-bg); color:var(--garnet);}

/* fill: word-bank into a sentence blank */
.fillblank{display:inline-block; font-family:var(--serif); min-width:64px; text-align:center; border-bottom:2.5px dashed var(--dash); color:var(--faint); font-weight:600; padding:0 4px;}
.fillblank.correct{border-bottom-color:var(--good); color:var(--good); background:var(--good-bg); border-radius:4px;}
.fillbank{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;}

/* flipseq: reveal slot cards left-to-right */
.flipdeck{display:flex; gap:10px; margin:4px 0 16px;}
.flip{flex:1; min-height:86px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); cursor:pointer; padding:12px 10px; display:flex; flex-direction:column; justify-content:center; gap:6px; transition:transform .1s, border-color .12s; text-align:center;}
.flip:hover{transform:translateY(-2px); border-color:var(--teal);}
.flip:focus-visible{outline:2.5px solid var(--ink); outline-offset:2px;}
.flip .fk{font-family:var(--sans); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:700;}
.flip .fv{font-family:var(--serif); font-size:15px; font-weight:600; color:var(--faint);}
.flip.open{cursor:default;}
.flip.open.c-give{background:var(--teal-bg); border-color:var(--teal-line);} .flip.open.c-give .fv{color:var(--teal-ink);} .flip.open.c-give .fk{color:var(--teal);}
.flip.open.c-mid{background:var(--plum-bg); border-color:var(--plum-line);} .flip.open.c-mid .fv{color:var(--plum-ink);} .flip.open.c-mid .fk{color:var(--plum);}
.flip.open.c-claim{background:var(--amber-bg); border-color:var(--amber-line);} .flip.open.c-claim .fv{color:var(--amber-ink);} .flip.open.c-claim .fk{color:var(--amber-lab);}
@media (prefers-reduced-motion: reduce){ .flip:hover, .pool .tile.picked{transform:none;} }

/* concept-wordbank selected state */
.bank .tile.sel{border-color:var(--teal); background:var(--teal-bg); transform:translateY(-1px);}
.bank .tile.correct{border-color:var(--good); background:var(--good-bg); color:var(--good);}