/* Reserve a real bottom strip instead of allowing fixed navigation to cover content. */
@media (min-width:1100px) {
  body.fit-match .back-row {height:38px;min-height:38px;align-items:center;}
  body.fit-match .back-row>.text-button {box-sizing:border-box;min-height:36px;height:36px;padding:8px 0;line-height:20px;font-size:14px;}
  body.viewport-hub #app {height:100dvh;box-sizing:border-box;padding:0 24px!important;max-width:none;width:100%;margin:0;}
  body.viewport-hub main {box-sizing:border-box;min-height:0;max-height:none;margin-bottom:0!important;}
  body.viewport-hub .bottom-dock {left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:max(10px,env(safe-area-inset-bottom,0px))!important;z-index:25;}
  body.viewport-hub footer.compact-footer {position:fixed;left:24px;bottom:12px;width:calc(50% - 260px);margin:0;padding:0;border:0;}
  body.viewport-hub footer.compact-footer>span {display:none;}
  body.viewport-hub .developer-credit {flex-wrap:wrap;justify-content:flex-start;gap:5px 8px;font-size:10px;}
  body.viewport-hub .developer-credit small {font-size:10px;}
  body.viewport-hub .friend-page {display:grid;grid-template-rows:auto minmax(0,500px);align-content:center;gap:18px;padding:0!important;max-width:1360px;width:100%;margin:8px auto 0!important;}
  body.viewport-hub .friend-title {position:relative;margin:0;padding-top:12px;}
  body.viewport-hub .friend-title>button {position:absolute;top:0;left:0;margin:0;}
  body.viewport-hub .friend-title h1 {font-size:clamp(34px,3vw,46px);line-height:1.15;margin:8px 0;}
  body.viewport-hub .friend-title p {font-size:16px;line-height:1.4;margin:4px 0;}
  body.viewport-hub .friend-panels {min-height:0;gap:24px;align-items:stretch;}
  body.viewport-hub .friend-panels>section {position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(20px,2vw,30px);}
  body.viewport-hub .friend-crest {position:absolute;right:24px;top:15px;font-size:34px;line-height:1;opacity:.7;}
  body.viewport-hub .friend-panels h2 {font-size:28px;line-height:1.2;margin:0 45px 20px 0;}
  body.viewport-hub .friend-panels label {font-size:15px;line-height:1.3;margin:14px 0 8px;}
  body.viewport-hub .friend-panels input,body.viewport-hub .friend-panels select {min-height:46px;font-size:17px;flex-shrink:0;}
  body.viewport-hub .friend-variant button {min-height:44px;font-size:15px;}
  body.viewport-hub .friend-help {font-size:14px;line-height:1.45;margin:10px 0 16px;}
  body.viewport-hub .friend-create>.primary {margin-top:auto;}
  body.viewport-hub .friend-panels .primary {min-height:48px;flex-shrink:0;font-size:17px;}
  body.viewport-hub .friend-join form {display:flex;flex-direction:column;flex:1;min-height:0;}
  body.viewport-hub .friend-join form>label {margin-top:0;}
  body.viewport-hub .friend-join form>.primary {margin-top:auto;}
  body.viewport-hub .friend-join form>small {font-size:13px;line-height:1.4;color:#bfd8e9;margin:0 0 16px;}
  body.viewport-hub .friend-join input {font-size:28px;letter-spacing:6px;min-height:58px;}
  body.viewport-hub .friend-room-ready {flex:1;align-content:center;min-height:0;padding:0;gap:10px;}
  body.viewport-hub .friend-room-code {margin:0;line-height:1.2;}
  body.viewport-hub .friend-room-ready>.primary,body.viewport-hub .friend-room-ready>p,body.viewport-hub .friend-waiting {margin:0;}
  body.viewport-hub .friend-room-ready>.primary {width:min(100%,340px);}
  body.viewport-hub .feedback-page {padding-top:0;flex:none;}
  body.viewport-hub .feedback-compose,body.viewport-hub .feedback-history {box-sizing:border-box;}
  body.viewport-hub .error-banner,body.viewport-hub .game-notice {margin:6px 0 10px;}
}
@media (min-width:1100px) and (max-height:750px) {
  body.viewport-hub .friend-page {gap:12px;margin-top:4px!important;}
  body.viewport-hub .friend-title {padding-top:4px;}
  body.viewport-hub .friend-title h1 {font-size:34px;margin:6px 0;}
  body.viewport-hub .friend-panels>section {padding:18px 22px;}
  body.viewport-hub .friend-panels h2 {margin-bottom:12px;font-size:26px;}
  body.viewport-hub .friend-panels label {margin:10px 0 6px;}
  body.viewport-hub .friend-help {margin:8px 0 12px;}
  body.viewport-hub .friend-join form>small {margin-bottom:12px;}
}

/* Account information stays readable; shorter windows use explicit panels. */
#modal.profile-paged {width:min(940px,calc(100vw - 32px));max-width:940px;max-height:calc(100dvh - 32px);overflow:visible;padding:22px;box-sizing:border-box;}
.profile-tabs {display:flex;gap:8px;margin-bottom:18px;}
.profile-tabs button {flex:1;min-height:42px;padding:9px 14px;border:1px solid #a5cde36b;border-radius:12px;background:#173c5f;color:#e2eff9;font-size:15px;}
.profile-tabs button[aria-selected=true] {background:linear-gradient(140deg,#467698,#30526f);border-color:#ffe1a0;color:#ffe6b1;}
#modal.profile-paged .profile-account {display:block;}
#modal.profile-paged [data-profile-panel][hidden] {display:none!important;}
#modal.profile-paged .profile-highlight-column {border:0;padding:0;}
#modal.profile-paged .profile-overview h2 {font-size:30px;margin:0 0 10px;}
#modal.profile-paged .profile-overview>p {font-size:15px;line-height:1.4;margin:10px 0;}
#modal.profile-paged .profile-overview {overflow-wrap:anywhere;}
#modal.profile-paged .account-stats {margin:14px 0;}
#modal.profile-paged .profile-actions .dialog-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;}
#modal.profile-paged .profile-actions button {min-height:48px;font-size:16px;padding:12px;}
#modal.profile-paged .profile-close {display:flex;justify-content:flex-end;margin:18px 0 0;}
#modal.profile-paged .profile-close button {font-size:15px;min-height:44px;min-width:100px;}
#modal.profile-paged .profile-highlights {display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
#modal.profile-paged .profile-rank {grid-column:1;grid-row:1;}
#modal.profile-paged .profile-highlights>h3:first-of-type {grid-column:1;grid-row:2;margin:8px 0 0;}
#modal.profile-paged .profile-achievements {grid-column:1;grid-row:3;}
#modal.profile-paged .profile-highlights>h3:last-of-type {grid-column:2;grid-row:1;margin:8px 0 0;}
#modal.profile-paged .profile-best-visual,#modal.profile-paged .best-visual-empty {grid-column:2;grid-row:2/5;}
#modal.profile-paged .best-move-board {width:min(100%,260px);}
@media (max-width:600px) {
  #modal.profile-paged .profile-highlights {display:flex;flex-direction:column;gap:8px;}
  #modal.profile-paged .profile-rank {display:none;}
  #modal.profile-paged .profile-highlights h3 {font-size:18px;margin:0!important;}
  #modal.profile-paged .profile-achievements {gap:6px;}
  #modal.profile-paged .profile-achievements article {padding:8px;}
  #modal.profile-paged .best-move-board {width:180px;}
  #modal.profile-paged .profile-overview>p {font-size:14px;}
}

/* Ordinary forms and the treasury use their width rather than a scrolling column. */
@media (min-width:1100px) {
  #modal:not(.learn-dialog):not(:has(.owned-collection)) {max-height:calc(100dvh - 32px);padding:24px;box-sizing:border-box;}
  #modal:has(.cash-packs) {width:min(820px,calc(100vw - 32px));}
  #modal .cash-packs {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  #modal .cash-pack {padding:14px;}
  #modal .cash-pack strong {font-size:23px;}
  #modal:has(.cash-packs) p {line-height:1.45;margin:10px 0;font-size:14px;}
  #modal:has(.cash-packs) h2 {margin-bottom:12px;}
  #modal:has(.cash-packs) .dialog-actions {margin-top:14px;}
  #modal:has(.auth-fields) {width:min(640px,calc(100vw - 32px));}
  #modal .auth-fields {gap:6px;margin-top:10px;}
  #modal .auth-fields>label {margin:5px 0 0!important;}
  #modal .auth-fields input,#modal .auth-fields select {padding:10px 12px;margin:0;min-height:42px;}
  #modal:has(.friends-list) {width:min(760px,calc(100vw - 32px));}
  #modal .friends-list {grid-template-columns:1fr 1fr;}
  #modal .cash-packs {margin:12px 0;gap:12px;}
  #modal .cash-pack {gap:7px;padding:12px;}
  #modal .cash-status {padding:10px 12px;}
  #modal .cash-note {margin:8px 0;}
}

#modal .coin-history,#modal .dialog-paged-list {max-height:none;overflow:visible;}
#modal .dialog-paged-list>[hidden] {display:none!important;}
#modal .reaction-picker.dialog-paged-list {grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;overflow:visible;}
.dialog-list-pages {display:flex;justify-content:center;align-items:center;gap:14px;margin:12px 0 0;font-size:14px;color:#d4e8f4;}
.dialog-list-pages[hidden] {display:none!important;}
.dialog-list-pages button {border:1px solid #afd1e46b;border-radius:9px;background:#214e73;color:#f1e3bc;font-size:14px;padding:8px 14px;min-height:38px;}
@media (min-width:1100px) {
  #modal:has(.review-layout) {width:min(1060px,calc(100vw - 32px));height:calc(100dvh - 32px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:12px;overflow:visible;}
  #modal:has(.review-layout):not([open]) {display:none;}
  #modal:has(.review-layout)>h2,#modal:has(.review-layout)>.review-method,#modal:has(.review-layout)>.dialog-actions {margin:0;}
  #modal .review-layout {min-height:0;align-items:center;}
  #modal .review-board {width:var(--review-width,100%);max-width:100%;max-height:100%;justify-self:center;}
  #modal .review-controls {margin:0;}
  #modal .review-comment p {font-size:15px;line-height:1.45;}
  #modal .review-range {gap:14px;min-height:32px;}
  #modal .review-range input {width:auto;min-height:20px;padding:0;}
}