question / prompt
← pinned at top
everything else
← the ONLY scroller
← pinned above keyboard
All rules are scoped to ≤767px + the shell classes, so desktop layout and
games that don't opt in are untouched. When the keyboard opens, the body is
locked to the visible band (--kb-vh tall, offset by --kb-top) and only the
.kb-scroll region shrinks — topbar, question and input all stay on screen.
============================================================ */
@media (max-width: 767px) {
/* Full app-shell opt-in (): the page becomes a
fixed-height column — topbar (natural size) + frame — and .kb-scroll is
the only thing that scrolls, keyboard open or closed. Games that keep
normal page scroll (e.g. the dictionary game) skip this class and only
inherit the html.kb-open pinning below. */
body.kb-shell {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
margin: 0;
overflow: hidden;
overscroll-behavior: none;
}
.kb-frame {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Pinned regions: size to content, never scroll away. */
.kb-stick { flex: 0 0 auto; }
/* The one scrollable region between the pinned head and foot. */
.kb-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* Input bar pinned at the bottom; clears the home indicator. */
.kb-foot {
padding-bottom: max(8px, env(safe-area-inset-bottom));
}
/* ===== Keyboard open: lock the page to the visible band ===== */
html.kb-open,
html.kb-open body {
overflow: hidden;
}
html.kb-open body {
position: fixed;
top: var(--kb-top, 0px);
left: 0;
right: 0;
height: var(--kb-vh, 100dvh);
min-height: 0;
}
/* Keyboard covers the home indicator, so the foot doesn't need to. */
html.kb-open .kb-foot {
padding-bottom: 8px;
}
/* The visible band is precious while typing — the footer link would just
crop at the band edge (the topbar already links home). */
html.kb-open .arcade-footer {
display: none;
}
}
/* Short viewports — landscape phones (≤~430px tall). A full on-screen keyboard
plus the game chrome cannot fit inside a viewport-height pinned column, so
the fixed shell would push the input/keys off the bottom edge. Relax the lock
and let the page scroll normally: everything stays reachable, nothing is
clipped. Portrait (≥~568px tall) keeps the pinned app-shell above. Threshold
sits in the clean gap between landscape-phone height and portrait height. */
@media (max-width: 767px) and (max-height: 500px) {
body.kb-shell {
height: auto;
overflow: visible;
}
.kb-frame { min-height: 0; }
.kb-scroll {
flex: 0 0 auto;
overflow: visible;
}
}