, so on the dashboard/game main.container is body's GRANDCHILD, not its child — a flex/grid column on body alone lays out only this wrapper (which just grows to its content) and never constrains main's height, so its overflow-y never scrolls and the list runs off the bottom. Re-establish the column on the wrapper so the height reaches main. (Static pages like Settings have no wrapper; there main.container is a direct flex child and this rule is inert — harmless.) */ body > [id^="phx-"] { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* The scroll container. flex: 1 fills the space its flex parent (body on static pages, the wrapper on live ones) leaves after the header; min-height: 0 lets it shrink below its content so overflow-y actually scrolls instead of overflowing the shell. width: 100% restores cross-axis fill: main.container's base margin: 0 auto would otherwise suppress the flex item's default stretch and shrink-wrap it to content width — collapsing wide pages (e.g. Settings) into a narrow centered column here only; a definite width still centers it up to max-width on a wide standalone window while filling a phone. */ main.container, main.game-window { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* The header fills the shell width too. Like main.container it carries a base max-width: 960px; margin: 0 auto, so as a stretch-suppressed grid item it would otherwise shrink-wrap to its content (brand + nav) and render as a narrow bar. width: 100% fills the phone; margin: 0 auto still centers it up to max-width on a wide standalone window, keeping it flush with main. */ header.topbar, header.topbar-brand { width: 100%; } /* No chrome to pop a detached window out of when we ARE the window: the installed PWA has no browser frame, and window.open can't spawn a useful second one. Hide the per-game "Open in window" button here. */ .popout-btn { display: none; } /* Board sizing must fit the *non-scrolling* shell, not the raw viewport. The base --tile-size (:root) caps the board at 9.5vh per row, but on a phone the 17vw term wins and reserves nothing for the game-header, players/turn bar, tray, or safe-area insets — so the 9-row board plus that chrome overruns the safe viewport by ~10-15px and clips the bottom of the hand. Re-derive the height term against the space actually left after that chrome: 100dvh minus the top/bottom insets minus a fixed reserve for the header + turn bar + tray (+ the board's own gaps/borders). Whichever of the three terms is smallest still wins, so a wide window keeps the 72px cap and a narrow phone keeps 17vw up until the board would collide with the tray — then this term shrinks it to fit. Reserve breakdown: game-header ~44 + topbar-players ~29 + tray ~68 + board gaps/border ~30 ≈ 170; rounded to 180 for a small safety margin. */ .game { --tile-size: min( 17vw, calc( (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 180px) / 9 ), 72px ); } } /* ---------- Settings hub page ---------- */ .settings-page { margin: 1.5rem auto; padding: 0 1rem; } .settings-list a { display: inline-flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border, #444); border-radius: 6px; color: var(--text); text-decoration: none; } .settings-list a:hover { border-color: var(--text); } .settings-list .icon { width: 1.4rem; height: 1.4rem; } /* active (unmuted / alerts-granted) toggle state, mirrors .nav-bell.on */ .settings-list .on { color: var(--gold); } /* ---------- Logged-out brand header ---------- */ /* No bar chrome: the mark sits on the page's dark background exactly like the landing page. Top offset mirrors the landing mark's position — the landing's .landing block sits 1.5rem below the top of main.container (which no longer has top padding), and .landing-mark keeps its own 0.2rem margin. */ header.topbar-brand { max-width: 460px; margin: 1.5rem auto 0; padding: 0 1rem; text-align: center; } header.topbar-brand a { color: var(--gold); text-decoration: none; } /* Favorites list */ .friend-row { display: flex; align-items: center; gap: 0.5rem; } .friend-row .opponent { flex: 1; } .friend-remove { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted, #888); } .fav-toggle { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted, #888); } .fav-toggle.on { color: var(--accent, gold); } .profile-dialog { text-align: center; } .profile-name { margin: 0 0 0.25rem; } .profile-ratio { font-size: 2rem; font-weight: 700; margin: 0.5rem 0 0; } .profile-record, .profile-rating, .profile-joined { opacity: 0.7; margin: 0.25rem 0; } .profile-fav { margin-top: 1rem; } /* fantasy-tactics rebrand sprites (blue==red placeholder; team recolor pending, see JC-7) */ .sprite-bastion.side-red { background-image: url("/images/sprites/bastion_red-c7fbd3042e8454d7c156a5569d09bc33.png?vsn=d"); } .sprite-bastion.side-blue { background-image: url("/images/sprites/bastion_blue-8805baab77795b156c7f2c0354d0a86c.png?vsn=d"); } .sprite-cassian.side-red { background-image: url("/images/sprites/cassian_red-1fb5a1a95d9e17ba6e4e131fe7a3a317.png?vsn=d"); } .sprite-cassian.side-blue { background-image: url("/images/sprites/cassian_blue-86900d5ff2ef5b28a36dc8c3ac00ffa5.png?vsn=d"); } .sprite-fulmen.side-red { background-image: url("/images/sprites/fulmen_red-66d72fb896ec9c11059a12fe48279c52.png?vsn=d"); } .sprite-fulmen.side-blue { background-image: url("/images/sprites/fulmen_blue-c5bb7f74d422e3b527ce19bd4a0449d3.png?vsn=d"); } .sprite-mercy.side-red { background-image: url("/images/sprites/mercy_red-64a5a07080f82c4f60910eee4c930225.png?vsn=d"); } .sprite-mercy.side-blue { background-image: url("/images/sprites/mercy_blue-99ab7cbea2f6ad6f63f8e6a3fad274c0.png?vsn=d"); } .sprite-silas.side-red { background-image: url("/images/sprites/silas_red-3b058147c63292e2123117b2aeef3060.png?vsn=d"); } .sprite-silas.side-blue { background-image: url("/images/sprites/silas_blue-44c8430a028c0307bb9b5c26ca056af2.png?vsn=d"); } .sprite-vlad.side-red { background-image: url("/images/sprites/vlad_red-7de7ee21d5322c592c9aa3878bce474d.png?vsn=d"); } .sprite-vlad.side-blue { background-image: url("/images/sprites/vlad_blue-7fda8149fce528572ff6b06eb23b2225.png?vsn=d"); } .sprite-pandora.side-red { background-image: url("/images/sprites/pandora_red-8afdc2399b179484bcd19d41cc2d4964.png?vsn=d"); } .sprite-pandora.side-blue { background-image: url("/images/sprites/pandora_blue-41440662350444a29283205e3175ff86.png?vsn=d"); } .sprite-magnus.side-red { background-image: url("/images/sprites/magnus_red-79b41e817c7a72a90cf91c73730c64a7.png?vsn=d"); } .sprite-magnus.side-blue { background-image: url("/images/sprites/magnus_blue-c14ec95690542a72506a4635fd1c3551.png?vsn=d"); } .sprite-maharet.side-red { background-image: url("/images/sprites/maharet_red-14dc7605002bbfcfffdac027a8ce5747.png?vsn=d"); } .sprite-maharet.side-blue { background-image: url("/images/sprites/maharet_blue-ec19e40b0b3e3b7f16754a987f97a933.png?vsn=d"); } .sprite-claudia.side-red { background-image: url("/images/sprites/claudia_red-0fc4f8363972b17cee5f91768f4dd0a2.png?vsn=d"); } .sprite-claudia.side-blue { background-image: url("/images/sprites/claudia_blue-5819277c38347b95352191342508c173.png?vsn=d"); } .sprite-grokk.side-red { background-image: url("/images/sprites/grokk_red-928042a217cb15ca11ca9a0fbe7501c2.png?vsn=d"); } .sprite-grokk.side-blue { background-image: url("/images/sprites/grokk_blue-890810c691a7f5d2aa265d3876c75195.png?vsn=d"); } .sprite-zug.side-red { background-image: url("/images/sprites/zug_red-b9a03aed2f93498e908d21fd8eb0e439.png?vsn=d"); } .sprite-zug.side-blue { background-image: url("/images/sprites/zug_blue-be085aaa5be3a77edd90809ebc015a38.png?vsn=d"); } .sprite-mogra.side-red { background-image: url("/images/sprites/mogra_red-d3d80b25787389cb48a25702da9c172c.png?vsn=d"); } .sprite-mogra.side-blue { background-image: url("/images/sprites/mogra_blue-ccfa6daeb61624bf93dad31922673794.png?vsn=d"); } .sprite-bogrot.side-red { background-image: url("/images/sprites/bogrot_red-d5a253f54a7f5b122ba048c874b8708c.png?vsn=d"); } .sprite-bogrot.side-blue { background-image: url("/images/sprites/bogrot_blue-40b37bf213d1f520ead7c228d8375f39.png?vsn=d"); } .sprite-ugthar.side-red { background-image: url("/images/sprites/ugthar_red-fa7cfcb1972bb96750bde80475d6a149.png?vsn=d"); } .sprite-ugthar.side-blue { background-image: url("/images/sprites/ugthar_blue-02789b1d5f7fb12475659ccadcb91ff9.png?vsn=d"); }