/* ============================================================
   LISTEN & PIECE ENGINE — additions on top of the shared stylesheet
   (tt-engine.css is loaded BEFORE this file, so the colours, the
   scoreboard, the turn bar, the timer, the overlays, the wheel and
   the Lucky Cards all keep one single source.)

   The one real difference from every other engine here: a tile holds
   a PHRASE, not a word. "to travel from New York to California" has
   to fit on a classroom screen next to five others, so the tiles wrap
   internally and size themselves instead of being a fixed 60px row.
   ============================================================ */

#board{grid-template-columns:1fr;grid-template-rows:1fr auto}

/* ---------- the listen button ---------- */
#listenArea{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px;border:2px dashed var(--line);border-radius:16px;
  background:rgba(255,255,255,.03)}
#listenArea .bigbtn{font-size:clamp(17px,2vw,26px);padding:16px 46px;letter-spacing:1px}
#teacherReveal{display:none;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.3rem,2.2vw,2rem);color:var(--good);letter-spacing:.5px;text-align:center}
#teacherReveal.show{display:block}

/* the notes under the start-screen options */
#voiceNote,#poolNote{color:var(--muted);font-size:13px;line-height:1.4;min-height:1.2em;
  max-width:760px;text-align:center}
#poolNote{font-weight:700;letter-spacing:.4px}
#poolNote.warn{color:var(--t2)}

/* ---------- a fifth badge tone ---------- */
/* The shared sheet ships tone-a..d. This pack sorts its sentences into
   five grammar groups, so rather than making two of them share a colour
   the engine adds a violet. */
.badge.tone-e{color:#d7b4ff;border-color:#63409c;background:rgba(190,140,255,.10)}

/* ---------- the blanks ---------- */
/* Nothing is ever pre-placed here, so the row of empty blanks is the
   only clue to how many phrases the sentence has. They are wider and
   free-height because a phrase tile is not a word tile. */
#sentence{flex:1;align-content:center;gap:10px}
.blank{min-width:150px;height:auto;min-height:62px;padding:3px}

/* The final "." or "?" would give away the sentence form, so the engine
   prints a muted ellipsis until the round is settled. */
.endmark.pending{font-size:clamp(20px,2.4vw,32px);opacity:.45;letter-spacing:2px}

.solution{width:100%;text-align:center;margin-top:14px;color:#7ee2a8;
  font-weight:800;font-size:clamp(15px,1.7vw,23px);line-height:1.35}

/* ---------- phrase tiles ---------- */
/* The shared .tile is a fixed-height, nowrap, one-word chip. A chunk
   tile has to grow with its text and wrap inside itself, so all four
   of those properties are overridden together. */
.tile{white-space:normal;height:auto;min-height:56px;line-height:1.18;
  text-align:center;padding:9px 15px;max-width:min(34ch,92%);
  font-size:clamp(15px,1.55vw,22px)}

/* ---------- the chunk box ---------- */
#trayPanel{max-height:36vh}
#trayPanel h3{color:#ffd479}
#tray{justify-content:center;gap:10px}

@media (max-height:820px){
  #listenArea{padding:8px;gap:6px}
  #listenArea .bigbtn{padding:12px 34px}
  #trayPanel{max-height:32vh}
  .tile{min-height:48px;font-size:clamp(14px,1.4vw,19px);padding:7px 12px}
  .blank{min-width:132px;min-height:54px}
}