/* Responsive sizing for the gameplay boards that still need dedicated
   portrait-phone overrides. The regular Bot Fight already has width-driven
   phone rules in styles.css; landscape layouts keep their height caps. */

/* Special-field markers use a fixed box instead of a content-sized minimum,
   so every glyph is centered on the same geometric cell center. */
.daily-special-marker{
  width:54%;
  min-width:0;
  height:54%;
  box-sizing:border-box;
  padding:0;
  line-height:1;
  text-align:center;
  place-content:center;
}

.campaign-play-layout,
.campaign-play-board-wrap{width:100%;min-width:0}

@media (max-width:820px) and (orientation:portrait){
  /* Campaign */
  .campaign-play-content{
    width:100%;
    padding-left:max(4px,env(safe-area-inset-left));
    padding-right:max(4px,env(safe-area-inset-right));
  }
  .campaign-play-layout,
  .campaign-play-board-wrap,
  .campaign-play-board{
    width:100%;
    max-width:none;
  }

  /* Daily Challenge */
  .daily-game{padding-left:6px;padding-right:6px}
  .daily-board-wrap{width:100%;padding:2px}
  .daily-board{width:100%;max-width:none}

  /* Interactive tutorial. The page has inline styles after the shared base
     stylesheet, so include the page scope to keep these mobile overrides final. */
  .tutorial-page .tutorial-main{
    width:100%;
    padding-left:max(6px,env(safe-area-inset-left));
    padding-right:max(6px,env(safe-area-inset-right));
  }
  .tutorial-page .tutorial-board-card{padding-left:8px;padding-right:8px}
  .tutorial-page .tutorial-board{width:100%;max-width:none}
}

@media (max-width:390px) and (orientation:portrait){
  .campaign-play-content{padding-left:2px;padding-right:2px}
  .daily-game{padding-left:4px;padding-right:4px}
  .daily-board-wrap{padding:1px}
  .tutorial-page .tutorial-main{padding-left:4px;padding-right:4px}
  .tutorial-page .tutorial-board-card{padding-left:6px;padding-right:6px}
}