/* The Duskreach (public/js/court_dusk.ts): the flight's and the rooftop run's banner, the lift bar,
   the star-map, mend and lock canvases, the board and the time. Indigo and lantern gold. */
#cdk-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(20, 16, 50, .78); border: 2px solid #8a70d0; color: #f4f0ff; font-size: 13px; white-space: nowrap; text-shadow: 0 1px 0 #000; box-shadow: 0 0 14px rgba(160, 130, 255, .35); }
#cdk-hud b { color: #ffe9a8; }
#cdk-hud .cdk-sub { color: #c8b8f0; font-size: 12px; }
#cdk-hud .cdk-clock { font-variant-numeric: tabular-nums; color: #fff6d0; min-width: 52px; }
#cdk-hud .btn { padding: 2px 8px; font-size: 12px; }
.cdk-lift { width: 70px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); border: 1px solid #8a70d0; overflow: hidden; }
.cdk-lift div { height: 100%; background: linear-gradient(90deg, #ffcf70, #fff6c0); transition: width .1s linear; }
.cdk-map, .cdk-lock { display: block; margin: 8px auto; image-rendering: pixelated; border-radius: 10px; border: 2px solid #4a3a8a; background: #121438; cursor: pointer; touch-action: manipulation; }
.cdk-map { width: min(240px, 70vw); }
.cdk-lock { width: 120px; }
.cdk-time { font-size: 30px; text-align: center; color: #5a3a8a; font-weight: bold; font-variant-numeric: tabular-nums; margin: 6px 0; }
.cdk-board .row .price { font-variant-numeric: tabular-nums; }
.cdk-wonders .big { min-width: 22px; text-align: center; }
@media (max-width: 600px) {
  #cdk-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; }
  #cdk-hud .cdk-sub { font-size: 10px; }
}
@media (max-height: 500px) { #cdk-hud { top: calc(8px + var(--safe-t)); } }