/* Phone landscape only (844x390, 812x375, 932x430, 740x360).
   Loaded after the social sheets. Desktop and portrait rules stay as they are.
   Daily keeps its reward plaque beside three mission rows. */

@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  /* Zero safe-area insets resolve to the current widths (48px / 30px). */
  :is(#ranking-boards, #friends-dialog)[open] {
    width: calc(100vw - 48px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
  :is(#entry-dialog, #daily-missions-dialog)[open] {
    width: calc(100vw - 30px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }

  /* Ranking mascot is top:-54px. An 8px frame plus dialog top 18px put it at
     y=-28, so the ears were cut by the viewport. Dialog top 54px keeps that
     same 133px art near y=8. Height leaves a 12px bottom gap, so the board
     loses about 30px and scrolls in .ranking-board-content. The mascot's
     offset against the metric tabs is unchanged. */
  #ranking-boards[open] {
    top: calc(env(safe-area-inset-top, 0px) + 54px);
    bottom: auto;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 66px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 66px);
    min-height: 0;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  }
  #ranking-boards .ranking-board-content {
    min-height: 0;
    overflow: auto;
  }

  /* Friends timber was a 370x74 box (5:1) with background-size 100% 100%.
     The desktop plaque is 620x151, so the short box squashed the planks.
     Width stays 370px; height follows that ratio (~90px, border-box).
     The 69px heading clamp is released so the leaves stay in flow.
     The crew list shrinks and scrolls; footer Refresh stays pinned. */
  #friends-dialog[open] {
    min-height: 0;
  }
  #friends-dialog .social-heading {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    align-items: flex-end;
  }
  #friends-dialog .social-heading > .friends-wood-sign {
    flex: 0 0 auto;
    align-self: flex-end;
    width: 370px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 620 / 151;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  #friends-dialog .friends-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  #friends-dialog footer {
    flex: none;
  }

  /* Room owl is 122px at right:27px and hangs to about y=122, over
     #refresh-rooms (measured from x=701). Keep it on the right of "Rooms",
     outside that lane: the mascot spans 149px from the dialog's right
     padding edge, the scroller already insets 10px, plus a shadow gap. */
  #entry-dialog[open] {
    min-height: 0;
  }
  #entry-dialog .browser-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  #entry-dialog .browser-heading {
    padding-right: 160px;
    box-sizing: border-box;
  }
  #entry-dialog #refresh-rooms {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }
  #entry-dialog #available-rooms {
    flex: 1 1 auto;
    min-height: 72px;
    max-height: none;
    overflow: auto;
  }
  #entry-dialog .browser-footer {
    flex: none;
  }

  /* 740x360 only. Three rows stay; the 253px plaque min-height is released
     so the stack can use the shorter body. 844x390 is outside this query. */
  @media (max-height: 370px) {
    #daily-missions-dialog [data-daily-body] {
      grid-template-rows: minmax(0, 1fr) auto;
      min-height: 0;
      overflow: auto;
    }
    #daily-missions-dialog .daily-reward-banner {
      min-height: 0;
    }
    #daily-missions-dialog .daily-mission-list {
      grid-template-rows: repeat(3, minmax(76px, 1fr));
      min-height: 0;
    }
    #daily-missions-dialog .daily-mission {
      min-height: 76px;
    }
  }
}

/* Grounded screenshot corrections. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 #friends-dialog .social-heading{height:60px;min-height:60px;max-height:60px}
 #friends-dialog .social-heading>.friends-wood-sign{width:246px;height:60px;aspect-ratio:auto;margin:0;padding:4px 16px}
 #friends-dialog .friends-wood-sign h2{font-size:22px!important;margin:7px 0 0!important}
 #friends-dialog .friends-wood-sign>span{font-size:8px;margin-top:4px}
 #friends-dialog .social-mascot{width:85px;height:85px;top:-28px}
 #friends-dialog .friends-connect{padding:3px 8px;min-height:48px}
 #friends-dialog .friends-tabs{min-height:36px}
 #friends-dialog .friends-tabs button{min-height:34px}
 #friends-dialog footer{min-height:44px;padding:2px 10px}
 #friends-dialog .friends-list{min-height:68px}
 #ranking-boards[open]{top:30px;height:calc(100dvh - 42px);max-height:calc(100dvh - 42px)}
 #ranking-boards .social-mascot{width:84px;height:84px;top:-25px}
 #ranking-boards .ranking-podium{height:120px;min-height:120px}
 #ranking-boards .ranking-champion-plaque,#ranking-boards .ranking-champion[data-position="1"] .ranking-champion-plaque{height:28%;bottom:3%}
 #ranking-boards .ranking-champion-name{font-size:12px}
 #ranking-boards .ranking-champion-value{font-size:14px}
 #ranking-boards .ranking-board-content{overflow:auto}
 #entry-dialog .browser-scroll{padding-bottom:4px}
 #entry-dialog #available-rooms{min-height:50px}
 #daily-missions-dialog .daily-mission-list{grid-template-rows:repeat(3,minmax(0,1fr));min-height:0}
 #daily-missions-dialog .daily-mission{min-height:0}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
 #ranking-boards[open]{grid-template-rows:48px 38px 30px minmax(0,1fr) 14px}
 #ranking-boards .social-heading{min-height:48px;height:48px;padding:3px 115px 3px 50px}
 #ranking-boards .social-heading h2{font-size:26px!important;margin:0!important}
 #ranking-boards .social-heading small{font-size:8px;margin:0}
 #ranking-boards .ranking-metrics button{min-height:36px}
 #ranking-boards .ranking-formats{padding:1px 10px}
 #ranking-boards .ranking-formats button{min-height:27px}
 /* The top three own the first content view; rank four starts below the fold. */
 #ranking-boards .ranking-board-content{container-type:size;scroll-padding-block:6px}
 #ranking-boards .ranking-podium{height:100cqh;min-height:140px;box-sizing:border-box}
 #ranking-boards .ranking-champion-plaque,#ranking-boards .ranking-champion[data-position="1"] .ranking-champion-plaque{height:25%;bottom:3%}
 #ranking-boards .ranking-champion-name{font-size:12px;line-height:1.1;white-space:normal;max-height:2.2em}
 #ranking-boards .ranking-champion-value{font-size:15px;line-height:1.15}
 #ranking-boards .ranking-champion-portrait,#ranking-boards .ranking-champion[data-position="1"] .ranking-champion-portrait{height:78%;bottom:22%}
 #ranking-boards .ranking-medal{font-size:20px;top:62%;height:24px}
 #ranking-boards .ranking-champion[data-position="1"] .ranking-medal{font-size:22px;top:61%}
 #ranking-boards .ranking-board-content table{border-spacing:0 3px;padding:1px 0}
 #ranking-boards .ranking-board-content td{padding:2px 8px;height:34px;font-size:12px}
 #ranking-boards .ranking-player-face{height:28px;width:28px;flex-basis:28px}
 #friends-dialog[open]{top:24px;height:calc(100dvh - 36px);max-height:calc(100dvh - 36px);padding-bottom:3px}
 #friends-dialog .social-heading{height:50px;min-height:50px;max-height:50px}
 #friends-dialog .social-heading>.friends-wood-sign{width:205px;height:50px;padding:2px 10px}
 #friends-dialog .friends-wood-sign h2{font-size:18px!important;margin-top:7px!important}
 #friends-dialog .friends-wood-sign>span{font-size:6px;margin-top:2px}
 #friends-dialog .friends-person{min-height:51px;padding:3px 6px;margin-bottom:4px}
 #friends-dialog .friends-avatar{width:36px;height:36px;flex-basis:36px}
 #friends-dialog footer{min-height:34px;padding:0 8px}
 #friends-dialog footer>span{font-size:9px}
 #friends-dialog footer button{min-height:32px;padding:3px 14px}
 #entry-dialog[open]{top:14px;height:calc(100dvh - 26px);max-height:calc(100dvh - 26px);padding-bottom:2px}
 #entry-dialog .social-heading{height:44px;min-height:44px;padding:3px 110px 2px 60px}
 #entry-dialog .social-heading h2{font-size:25px!important;margin:0!important}
 #entry-dialog .social-heading small{font-size:7px;line-height:1}
 #entry-dialog .social-mascot{height:80px;width:80px;top:-25px;right:52px}
 #entry-dialog .browser-scroll{padding-top:3px;gap:3px}
 #entry-dialog .browser-heading{min-height:44px;padding:0 120px 0 0}
 #entry-dialog #available-rooms{min-height:78px;padding:0 2px 3px;gap:5px}
 #entry-dialog .available-room{min-height:74px;padding:3px 5px;gap:5px}
 #entry-dialog .available-map{height:64px}
 #entry-dialog .rooms-empty{min-height:72px;display:flex;align-items:center;justify-content:center;gap:10px;padding:3px}
 #entry-dialog .rooms-empty .social-empty-emblem{width:45px;height:45px}
 #entry-dialog .rooms-empty p{font-size:12px;margin:0}
 #entry-dialog .browser-settings{padding:3px 2px;gap:8px}
 #entry-dialog .browser-footer{padding:4px 14px;min-height:49px;gap:10px}
 #entry-dialog #room-browser-status{font-size:8px;margin:1px 3px;min-height:10px}
 #daily-missions-dialog .daily-mission{padding:4px 8px;gap:7px;align-items:center;overflow:hidden}
 #daily-missions-dialog .daily-mission-icon{height:36px;width:36px;flex-basis:36px}
 #daily-missions-dialog .daily-mission-copy h3{font-size:12px;margin:0 0 4px}
 #daily-missions-dialog .daily-progress{height:9px;min-height:0}
}