/* Shared viewport-sized shell for guest, member and world pages. */
:root { --page-header: clamp(100px, 18dvh, 160px); }
body, body.retro2006 { margin:0; padding:16px; min-height:100dvh; border-top:4px solid #65759b; box-sizing:border-box; }
.retro2006 .retroSite, .app {
  width:min(100%,750px); height:calc(100dvh - 36px); margin:0 auto;
  display:flex; flex-direction:column; overflow:hidden;
}
.retro2006 .homeHeader, .app > .header {
  height:var(--page-header); min-height:var(--page-header); flex:0 0 var(--page-header);
}
.retro2006 .communityMain { flex:1; min-height:0; overflow:auto; padding:18px 16px; }
.retro2006 footer { flex-shrink:0; }
.retro2006.memberHome .communityMain { display:flex; flex-direction:column; }
.retro2006.memberHome .communityModule { flex:1; min-height:0; display:flex; flex-direction:column; margin-bottom:0; }
.retro2006.memberHome .communityDeck { flex:0 0 117px; }
.retro2006.memberHome .memberDirectory { flex:1; min-height:0; display:flex; flex-direction:column; }
.memberDirectory .launchMain { flex:1; min-height:0; padding:12px 0; }
.memberDirectory .retroWindow { display:flex; flex-direction:column; min-height:0; }
.memberDirectory .launchList { flex:1; min-height:50px; height:auto; overflow:auto; }
.memberDirectory .windowTitle, .memberDirectory form, .memberDirectory .panelHint, .memberDirectory .roomTabs, .memberDirectory .roomSearch, .memberDirectory .launchActions { flex-shrink:0; }
.app > .screen { display:flex; flex-direction:column; flex:1; min-height:0; overflow:auto; padding:12px 16px; }
.app .game { flex:0 0 auto; min-height:0; width:100%; margin-block:auto; }
.app .scene {
  width:min(750px,100%,calc((100dvh - var(--page-header) - 200px - var(--page-footer,0px) - var(--toolbar-extra,0px)) * 750 / 590));
  min-width:0; min-height:0; aspect-ratio:750 / 590;
  height:auto; box-sizing:border-box;
}
.app .roomControls { width:100%; max-width:750px; margin-inline:auto; }
.app .roomToolbar { gap:4px; }
.app .game .hint { margin:4px 0; font-size:11px; }
.app .game .status { margin:4px 0; }
@media (max-height:760px) {
  .retro2006 .welcomeBody { padding:14px 18px; }
  .retro2006 .welcomeIllustration { min-height:160px; }
  .retro2006 .welcomeBody p { font-size:12px; line-height:1.5; }
  .retro2006 .introActions { margin-top:8px; }
  .retro2006 .communityMain { padding-top:12px; padding-bottom:12px; }
}
@media (max-width:650px) {
  body,body.retro2006 { padding:10px; }
  .retro2006 .retroSite,.app { height:calc(100dvh - 24px); }
  .retro2006.memberHome .communityMain { overflow:auto; }
  .memberDirectory .launchMain { min-height:420px; }
  .app > .screen { padding:10px; }
}

/* The home page scrolls as one document on phones, including a wrapped login. */
@media (max-width:650px) {
  .retro2006 .retroSite {
    height:auto;
    min-height:calc(100dvh - 24px);
  }
  .retro2006 .homeHeader {
    height:auto;
    min-height:152px;
    flex:0 0 auto;
    flex-wrap:wrap;
    justify-content:center;
  }
  .retro2006 .brand { margin:0; flex-shrink:0; }
  .retro2006 .headerLoginForm {
    flex:1 1 280px;
    min-width:0;
    align-self:auto;
  }
  .retro2006 .headerLoginFields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .retro2006 .headerLoginFields input { min-width:0; height:32px; font-size:16px; }
  .retro2006 .communityMain,
  .retro2006.memberHome .communityMain { flex:1 0 auto; overflow:visible; }
  .retro2006 .communityDeck,
  .retro2006.memberHome .communityDeck {
    height:auto;
    min-height:150px;
    flex:0 0 auto;
    grid-template-columns:58px minmax(0,1fr) minmax(0,1fr);
    padding:36px 6px 12px;
  }
  .retro2006 .communityHouses { display:none; }
  .retro2006 .onlineTile,
  .retro2006 .popularTile,
  .retro2006 .xivTile { height:auto; min-height:94px; }
  .retro2006 .onlineTile { gap:3px; }
  .retro2006 .xivTile { margin:0; }
  .retro2006.memberHome .communityModule { flex:0 0 auto; }
  .retro2006.memberHome .memberDirectory { flex:0 0 auto; }
  .retro2006 .memberDirectory .launchMain { flex:0 0 auto; }
  .retro2006 .memberDirectory .launchList { flex:none; height:240px; }
  .retro2006 footer { flex-wrap:wrap; gap:10px; }
}

/* Loading uses the same scene bounds without introducing a scrollbar. */
.booting .app > .screen { overflow:hidden; }

/* Show the room at its original proportions; the page can grow around it. */
.playPage .app { height:auto; min-height:calc(100dvh - 36px); }
.playPage .app > .screen { flex:1 0 auto; overflow:visible; }
.playPage .app .game { margin-block:0; }
.playPage .app .scene { width:100%; max-width:640px; aspect-ratio:640 / 570; flex-shrink:0; }
.playPage .app .roomControls { max-width:640px; }
@media (max-width:650px) {
  .playPage .app { height:auto; min-height:calc(100dvh - 24px); }
}