/* ==========================================================================
   Traverse ! — habillage.

   Presque tout est dessiné au canevas : la page ne porte que le score, le
   bouton du son, et la croix directionnelle pour les pouces.
   ========================================================================== */
.tv { display: flex; flex-direction: column; align-items: center; gap: 8px;
      width: 100%; height: 100%; justify-content: center; padding: 6px; }

.tv-barre { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.tv-barre b { font-variant-numeric: tabular-nums; font-size: 22px; }
.tv-record { opacity: .6; font-size: 13px; }
.tv-son { border: 0; border-radius: 999px; cursor: pointer; width: 32px; height: 32px;
          font-size: 15px; background: var(--line, #e1e5ec); color: inherit; }

/* Le plateau est PLUS HAUT QUE LARGE : on regarde devant soi, et voir loin vaut
   mieux que voir large — c'est de la rangée suivante que vient la décision. */
.tv-plateau {
  position: relative;
  width: min(100%, 52vh, 420px);
  aspect-ratio: 3 / 4;
  border-radius: 16px; overflow: hidden;
  background: #9ed36a;
  box-shadow: 0 8px 26px rgba(20, 30, 50, .18);
  touch-action: none;
}
.tv-plateau canvas { display: block; width: 100%; height: 100%; }

.tv-croix { display: grid; grid-template-columns: repeat(3, 54px);
            grid-template-rows: repeat(2, 44px); gap: 6px; justify-content: center; }
.tv-croix button {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--line, #e1e5ec); color: inherit; font-size: 18px;
  -webkit-tap-highlight-color: transparent;
}
.tv-croix button:active { transform: translateY(1px); }
.tv-croix .avant { grid-column: 2; grid-row: 1; background: #2fae6a; color: #fff; }
.tv-croix .gauche { grid-column: 1; grid-row: 2; }
.tv-croix .arriere { grid-column: 2; grid-row: 2; }
.tv-croix .droite { grid-column: 3; grid-row: 2; }
.tv.clavier .tv-croix { display: none; }