/* The match HUD as one table-side frame that steps aside while you aim. Loaded last: it only adjusts what
   the base, Street Legends, camera and mobile sheets already lay out.
   - Score, flicks and the Street Legends objective stack as one strip, closed by one yellow edge.
   - Whose turn it is shows in that strip (the lit side bar, and a brief call in the flicks row), not in a
     separate corner box; the turn banner stays only as the screen-reader announcement.
   - In a match the floating sound button steps aside (the pause menu has Sound), so the camera controls
     sit alone in the bottom-right corner as one joined tray.
   - While a flick is being aimed, the corner controls fade right back so the table is all you see. */

/* ---- One frame ---- */
.scoreboard { border-bottom: 1px solid rgb(var(--paper-rgb) / .12); }
.flick-meter { border-bottom: 4px solid var(--yellow); }
.legend-objective { border-left: 0; border-bottom: 4px solid var(--yellow); }
@media (min-height: 501px) {
  .legend-objective { top: calc(max(14px, env(safe-area-inset-top)) + 88px); }
}
@media (orientation: portrait) and (max-width: 1100px) {
  .ink-game .legend-objective { top: calc(max(12px, env(safe-area-inset-top)) + 72px); width: calc(100% - 84px); max-width: 440px; left: 12px; transform: none; }
}
/* Where the objective hangs straight under the flicks row, the yellow edge moves down to close it. */
@media (min-height: 601px), (orientation: portrait) {
  .hud-layer:has(.legend-objective:not([hidden])) .flick-meter { border-bottom: 1px solid rgb(var(--paper-rgb) / .12); }
}

/* ---- Turn call inside the frame ---- */
#flick-meter-label {
  display: inline-block; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#flick-meter-label.turn-call {
  color: var(--paper); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: inset 0 -2px 0 var(--turn-color, var(--yellow));
  animation: turn-call 320ms var(--spring, ease-out);
}
@keyframes turn-call { from { transform: translateY(5px); opacity: 0; } }
.hud-layer .turn-banner, .ink-game .hud-layer .turn-banner {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- One corner tray ---- */
body[data-screen="match"] .sound-btn { display: none; }
.camera-toolbar { gap: 0; }
.camera-toolbar button + button { border-left: 0; }
.camera-menu-label { display: grid; text-align: left; line-height: 1.15; }
.camera-menu-label small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.player-camera { bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 1100px), (pointer: coarse) {
  .player-camera { bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
}
@media (max-width: 560px) {
  .player-camera { bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .player-camera { bottom: max(8px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); width: auto; }
}
@media (max-height: 500px) {
  .player-camera { bottom: max(8px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
}
/* The panel opens above the tray at the width it had before the tray shrank to its buttons. */
.player-camera #camera-panel { width: min(280px, calc(100vw - 24px)); }

/* ---- Aim fade ---- */
.hud-layer .pause-btn, .player-camera { transition: opacity 220ms ease; }
body:has(#game-canvas.aiming) :is(.hud-layer .pause-btn, .player-camera) { opacity: .12; }

/* Read to screen readers, never drawn: e.g. the venue's live reading, which is chalked on the table instead. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }