/* Classic Tetris (js/theory/tetris.js): #tetris-screen / #tt-root. The Chord
   Bridge's column (gauntlet.css lends its bar, buttons, cards and setup fold):
   control bar, the canvas with the boards painted on it, the touch buttons on
   a phone, the key hint. */
#tt-root { width: min(1040px, 97vw); display: flex; flex-direction: column; gap: 8px; }
.tt-bar {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  color: #9aa3b8; font-size: 12px;
}
.tt-bar label { display: inline-flex; align-items: center; gap: 5px; }
.tt-bar label.hidden { display: none; }
.tt-bar select {
  background: #1a1f2b; color: #e8ecf6; border: 1px solid #2a3145;
  border-radius: 7px; padding: 4px 7px; font: inherit;
}
.tt-title { font-weight: 700; color: #f3ecd8; font-size: 15px; }
.tt-main { display: flex; flex-direction: column; gap: 8px; }
#tt-stage {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid #2a3145; background: #0d1016; touch-action: none;
}
/* a phone's rotate / hold / drop row; the board itself is dragged */
.tt-touch { display: flex; gap: 8px; justify-content: center; }
.tt-touch.hidden { display: none; }
.tt-touch .gb-btn { flex: 1 1 0; min-height: 48px; font-size: 18px; font-weight: 700; touch-action: manipulation; }
.tt-rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 8px 0 4px; color: #c6cddd; font-size: 14px; }
.tt-rstats b { color: #e7b54a; }
.tt-rank { color: #9aa3b8; font-size: 13px; margin-top: 4px; }
.tt-rank:empty { display: none; }
.tt-pay { color: #e7b54a; font-weight: 700; font-size: 14px; margin-top: 4px; }
.tt-pay:empty { display: none; }
.tt-lit { color: #7f8aa5; font-size: 12px; font-style: normal; }
@media (max-width: 700px) {
  .tt-bar .gb-stats { margin-left: 0; width: 100%; font-size: 11.5px; }
}