/* ============================================================================
   Jump Hurdles (hurdles.js)
   ============================================================================ */
#screen-hurdles {
    flex-direction: column;
    padding: 0;
    background: #5BC2F5;
    overflow: hidden;
    /* Width scales with height to preserve a 430:780 portrait ratio */
    width: calc(100dvh * 430 / 780);
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
#screen-hurdles.active { animation-name: portraitFadeIn; }

.hurdles-ui {
    max-width: none;
    padding: 0.4rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    min-height: 52px;
}
#hurdlesCanvas {
    display: block;
    width: 100%;
    /* Fill the space under the HUD; ignore the canvas's own (HiDPI) pixel size */
    flex: 1 1 0;
    height: 0;
    min-height: 0;
    touch-action: none;
}
.hurdles-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: max(64px, 9vh) var(--sp-4) 0;   /* sit high so DeeDee stays visible on the lawn */
    background: rgba(0, 0, 0, 0.25);
    z-index: 20;
}
.hurdles-message { max-width: 320px; border-color: #F2A33A; }
.hurdles-message p { white-space: pre-line; }
.hurdles-msg-dog {
    height: 90px;
    width: auto;
    margin: -0.75rem auto 0.4rem;
    animation: mascotBounce 1.5s ease-in-out infinite;
}