/* Final viewport composition layer.
   The source deck is 1672x941. Wide screens keep the cinematic composition;
   tall screens scale from height so the deck and GUI remain one scene. */

@media (min-width:851px) and (max-aspect-ratio:4/3){
  .pirate-deck-art{
    left:50%!important;
    width:auto!important;
    height:100%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }

  .flag-island .scene-prop{width:min(480px,72vw)}
  .raft .scene-prop{width:min(470px,70vw)}
  .signal-buoy .scene-prop{width:min(420px,64vw)}
  .message-bottle .scene-prop{width:min(500px,74vw)}
  .data-ship .scene-prop{width:min(450px,68vw)}

  .scene-prop .story-board h2{font-size:clamp(14px,1.1vw,20px)!important}
  .scene-prop .story-board p{font-size:clamp(9px,.68vw,12px)!important}
  .scene-prop .story-board small,
  .scene-prop .story-board b{font-size:clamp(7px,.5vw,9px)!important}

  .pinball-machine:not(.pinball-open){
    bottom:5.5%;
    width:clamp(112px,14vw,230px);
  }
  .console{width:150px!important;padding:10px!important}
}

@media (min-width:851px) and (max-aspect-ratio:1/1){
  .pirate-deck-art{left:53%!important}
  .story-vessel{bottom:40%!important}
  .flag-island .scene-prop{width:min(420px,66vw)}
  .raft .scene-prop{width:min(410px,64vw)}
  .signal-buoy .scene-prop{width:min(370px,58vw)}
  .message-bottle .scene-prop{width:min(440px,68vw)}
  .data-ship .scene-prop{width:min(400px,62vw)}
  .pinball-machine:not(.pinball-open){left:58%;width:clamp(105px,18vw,205px)}
}

/* Short desktop windows need less chrome and height-based encounter caps. */
@media (min-width:851px) and (max-height:700px){
  .topbar{height:58px;padding-inline:3vw}
  .voyage-stage{inset:58px 0 0}
  .flag-island .scene-prop{width:min(440px,54vh)}
  .raft .scene-prop{width:min(430px,56vh)}
  .signal-buoy .scene-prop{width:min(390px,49vh)}
  .message-bottle .scene-prop{width:min(490px,72vh)}
  .data-ship .scene-prop{width:min(420px,52vh)}
  .pinball-machine:not(.pinball-open){bottom:4%;width:clamp(100px,20vh,190px)}
}

/* Ultra-wide screens keep controls tied to height rather than stretching. */
@media (min-width:851px) and (min-aspect-ratio:2/1){
  .pinball-machine:not(.pinball-open){width:clamp(110px,20vh,220px)}
  .console{width:155px!important}
}

/* Phone/tablet GUI is limited by both axes. The existing mobile ship crop is
   retained, while overlays no longer grow solely from viewport width. */
@media (max-width:850px){
  .pinball-machine:not(.pinball-open){width:clamp(76px,min(23vw,16svh),108px)}
  .scene-prop{max-width:min(84vw,68svh)}
}

/* Portrait phones cannot show a 16:9 deck with "contain" without shrinking
   the ship into a strip. Fill from height and crop horizontally around the
   mast, bow and central planks instead. */
@media (max-width:850px) and (orientation:portrait){
  .pirate-deck-art{
    left:73%!important;
    bottom:-1px!important;
    width:auto!important;
    height:112%!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    translate:-50% 0!important;
    transform:none!important;
  }
  .pinball-machine:not(.pinball-open){
    left:72%;
    bottom:10%;
    width:clamp(78px,21vw,104px);
  }
  .story-vessel{bottom:44%!important}
}

@media (max-width:480px) and (orientation:portrait){
  .pirate-deck-art{left:74%!important;height:116%!important}
  .pinball-machine:not(.pinball-open){left:72%;bottom:12%;width:clamp(76px,22vw,96px)}
  .flag-island .scene-prop,.raft .scene-prop{width:min(470px,78vw)}
  .signal-buoy .scene-prop{width:min(420px,72vw)}
  .message-bottle .scene-prop{width:min(480px,82vw)}
  .data-ship .scene-prop{width:min(450px,76vw)}
}

@media (max-width:850px) and (orientation:landscape), (max-height:550px){
  .pinball-machine:not(.pinball-open){width:clamp(70px,min(13vw,24dvh),104px)}
  .scene-prop{max-width:min(54vw,62dvh)}
}

@media (prefers-reduced-motion:reduce){
  .pirate-deck-art,.story-sea{transition:none!important}
}