#loading { margin: 20vh auto; text-align: center; font: 700 1.2rem system-ui, sans-serif; color: #25465c; }
.dash-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, 960px); margin: 0 auto 10px; padding: 0 10px; box-sizing: border-box; color: #25465c; font-weight: 800; }
.dash-bones { display: flex; align-items: center; gap: 7px; font-size: 1.2rem; }
.dash-bones img { width: 26px; height: 28px; object-fit: contain; }
.dash-hearts { color: #a83f47; font-size: 1.35rem; letter-spacing: 3px; }
.dash-journey { display: flex; align-items: center; gap: 9px; font-size: .9rem; }
.dash-trail { width: clamp(60px, 16vw, 180px); height: 9px; background: #ddc98f; border-radius: 10px; overflow: hidden; }
.dash-trail span { display: block; height: 100%; background: #3e8b62; transform-origin: left; border-radius: inherit; }
.dash-input { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.dash-jump { min-width: 170px; min-height: 64px; font-size: 1.4rem; touch-action: none; user-select: none; -webkit-user-select: none; }
.dash-jump:active, .dash-jump.is-held { transform: translateY(3px); box-shadow: none; }
.dash-instructions { font-size: .95rem; color: #365468; line-height: 1.5; margin: 0; }
.dash-instructions strong { display: block; font-size: 1rem; }
.dash-canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
@media (max-width: 600px) {
  .shell-main { padding-top: 0; justify-content: center; }
  .dash-hud { margin-bottom: 12px; font-size: .85rem; }
  .dash-input { flex-direction: column; gap: 13px; }
  .dash-jump { width: 85%; min-height: 76px; }
  .dash-instructions { text-align: center; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .dash-hud { margin-bottom: 3px; font-size: .75rem; }
  .dash-jump { min-height: 48px; min-width: 120px; font-size: 1rem; }
  .dash-instructions { font-size: .75rem; }
}