/* ============================================================
   LISTENING ENGINE — additions on top of the shared stylesheet
   (build-standalone.js inlines tt-engine.css BEFORE this file, so
   everything the engines share keeps one single source.)
   ============================================================ */

/* single-column board: one big stage with listen area + options */
#board{grid-template-columns:1fr}
#stage{align-items:stretch}

/* ---------- listen area ---------- */
#listenArea{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:16px;border:2px dashed var(--line);border-radius:16px;
  background:rgba(255,255,255,.03)}
#listenArea .bigbtn{font-size:clamp(17px,2vw,26px);padding:16px 42px}
#voiceNote{color:var(--muted);font-size:13px;line-height:1.4;min-height:1.2em}
#teacherReveal{display:none;font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.4rem,2.4vw,2.2rem);color:var(--good);letter-spacing:.5px}
#teacherReveal.show{display:block}

/* ---------- the four number options ---------- */
#optionsGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1;
  align-content:center;padding:6px 0}
.optBtn{font-family:inherit;font-weight:800;color:var(--text);
  background:var(--panel2);border:2px solid var(--line);border-radius:16px;
  min-height:86px;font-size:clamp(1.5rem,3.2vw,2.6rem);letter-spacing:3px;
  font-variant-numeric:tabular-nums;cursor:pointer;padding:10px;
  transition:transform .12s,border-color .15s,background .15s,opacity .2s}
.optBtn:hover:not(:disabled){transform:translateY(-3px);border-color:var(--t1);
  background:#2c3b56}
.optBtn.wrong{opacity:.4;text-decoration:line-through;cursor:default;
  border-color:var(--bad);color:var(--bad)}
.optBtn.right{background:linear-gradient(180deg,#46e08e,#22b268);
  border-color:transparent;color:#062615}
.optBtn:disabled{cursor:default}

@media (max-width:700px){
  #optionsGrid{grid-template-columns:1fr 1fr;gap:10px}
  .optBtn{min-height:70px}
}