/* sea-battle · fullscreen — paired with fullscreen-fit.js (sets --fs-side, --fs-rw, --fs-w and .fs-wide on .sb).
   Everything is scoped under html.pip-immersive, so normal play and leaving fullscreen are untouched. */
html.pip-immersive .sb{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  overflow:hidden!important;padding-left:10px;padding-right:10px;
}
html.pip-immersive .sb > section{width:var(--fs-w,min(100%,520px));max-width:100%;margin-inline:auto;margin-block:auto}
html.pip-immersive .sb #sb-main{width:var(--fs-side,100%);max-width:100%;margin-inline:auto}
html.pip-immersive .sb .sb-top{margin-bottom:.2rem}
html.pip-immersive .sb .sb-status{min-height:0;margin:.05rem 0 .3rem}
html.pip-immersive .sb .sb-tabs{margin-bottom:.35rem}
html.pip-immersive .sb .sb-tabs button{min-height:36px}
html.pip-immersive .sb .sb-mini-wrap{margin-top:.45rem}
html.pip-immersive .sb .sb-fire,html.pip-immersive .sb .sb-endturn{margin-top:.45rem}
html.pip-immersive .sb .sb-tray{margin:.45rem 0 .35rem}
html.pip-immersive .sb #sb-ready{margin-top:.4rem}

/* landscape: the board takes the height on the left, everything else stacks on the right */
html.pip-immersive .sb.fs-wide #sb-stage{
  display:grid;grid-template-columns:var(--fs-side) var(--fs-rw);column-gap:16px;grid-template-rows:repeat(6,auto);align-content:center;
  width:calc(var(--fs-side) + var(--fs-rw) + 16px);
}
html.pip-immersive .sb.fs-wide #sb-stage > *{grid-column:2;min-width:0}
html.pip-immersive .sb.fs-wide #sb-stage > #sb-main{grid-column:1;grid-row:1 / -1;align-self:center}