/* ============================================================
   LISTEN & BUILD 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 tiles, the overlays, the
   wheel and the Lucky Cards all keep one single source.)

   The layout is one column: the listen button and the blanks on top,
   and a full-width word box underneath — this game deliberately puts
   a lot more tiles in the box than the sentence needs, so the box
   gets the whole width instead of a narrow side panel.
   ============================================================ */

#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 note under the start-screen options */
#voiceNote{color:var(--muted);font-size:13px;line-height:1.4;min-height:1.2em;
  max-width:760px;text-align:center}

/* ---------- the blanks ---------- */
/* Nothing is ever pre-placed here, so the row of empty blanks is the
   only clue to how many words the sentence has. */
#sentence{flex:1;align-content:center}
.blank{min-width:104px}

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

/* ---------- the word box ---------- */
#trayPanel{max-height:34vh}
#trayPanel h3{color:#ffd479}
#tray{justify-content:center}
/* a box this full needs slightly smaller tiles than the other games */
#tray .tile{height:52px;font-size:clamp(15px,1.6vw,22px);padding:0 13px}

@media (max-height:820px){
  #listenArea{padding:8px;gap:6px}
  #listenArea .bigbtn{padding:12px 34px}
  #trayPanel{max-height:30vh}
  #tray .tile{height:46px;font-size:clamp(14px,1.45vw,19px);padding:0 11px}
  .blank{min-width:92px;height:52px}
}