/* The Glimmering Shallows (public/js/court_summer.ts): the Regatta's banner on the water, the
   finish time and the board, Ada's and Odile's corners of their panels. Turquoise and gold. */
#csu-hud { top: calc(124px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 12px;
  background: rgba(10, 60, 70, .78); border: 2px solid #3ac8c8; color: #f4fffe; font-size: 13px; white-space: nowrap; text-shadow: 0 1px 0 #000; box-shadow: 0 0 14px rgba(60, 220, 220, .3); }
#csu-hud b { color: #ffe08a; }
#csu-hud .csu-sub { color: #bfeeee; font-size: 12px; }
#csu-hud .csu-concord { color: #fff6c8; }
#csu-hud .csu-clock { font-variant-numeric: tabular-nums; color: #fff6d0; min-width: 52px; }
#csu-hud .btn { padding: 2px 8px; font-size: 12px; }
.csu-time { font-size: 30px; text-align: center; color: #1a7a7a; font-weight: bold; font-variant-numeric: tabular-nums; margin: 6px 0; }
.csu-regatta { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #8ad0c8; }
.csu-regatta h4 { margin: 8px 0 4px; }
.csu-board { margin: 4px 0 4px 20px; padding: 0; font-size: 13px; }
.csu-board li { margin: 2px 0; font-variant-numeric: tabular-nums; }
.csu-ada, .csu-odile { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #c8b890; }
.csu-ada h4, .csu-odile h4 { margin: 0 0 4px; }
@media (max-width: 600px) {
  #csu-hud { top: calc(150px + var(--safe-t)); font-size: 11px; gap: 6px; padding: 4px 8px; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; white-space: normal; }
  #csu-hud .csu-sub { font-size: 10px; }
}
@media (max-height: 500px) { #csu-hud { top: calc(8px + var(--safe-t)); } }