/* Keep the player inside the visible viewport, including notches and toolbars. */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
#mainDiv {
    position: absolute !important;
    margin: 0 !important;
    left: var(--h5-left, 0px);
    top: var(--h5-top, 0px);
    width: var(--h5-width, 100vw) !important;
    height: var(--h5-height, 100vh) !important;
    left: calc(var(--h5-left, 0px) + env(safe-area-inset-left, 0px));
    top: calc(var(--h5-top, 0px) + env(safe-area-inset-top, 0px));
    width: calc(var(--h5-width, 100vw) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    height: calc(var(--h5-height, 100vh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    touch-action: none;
    overflow: hidden;
}
#entry {
    inset: auto;
    left: var(--h5-left, 0px);
    top: var(--h5-top, 0px);
    width: var(--h5-width, 100vw);
    height: var(--h5-height, 100vh);
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
}
#entry form { flex-shrink: 0; margin: auto; }
#entry input { font-size: 16px; }
@media (max-height: 480px) {
    #entry form { padding: 12px 20px; }
    #entry h1 { font-size: 22px; }
    #entry p { margin: 6px 0; line-height: 1.4; }
    #entry label { margin-top: 8px; }
    #entry input { margin-top: 4px; padding: 8px; }
    #entry button { margin-top: 12px; padding: 10px; }
    #entry #status { margin-top: 4px; min-height: 0; }
}