/* Mobile home/tournament/tutorial containment. Kept separate from the theme files. */
@media (max-width:1100px), (max-height:650px){
  html[data-home-theme] body #root .game-home{
    isolation:isolate;
  }

  html[data-home-theme] body #root .game-home :is(
    .np-shop-gateway,
    .friends-orb,
    .np-bp-gateway[data-placement="home"],
    .np-tournament-banner--portal
  ){
    position:absolute!important;
  }

  .tutorial-confirm-layer{
    box-sizing:border-box;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    overflow:hidden;
  }

  .tutorial-confirm-card{
    grid-template-columns:minmax(92px,28%) minmax(0,1fr);
    width:min(900px,calc(100vw - 16px));
    height:min(540px,calc(100dvh - 12px));
    min-height:0;
    max-height:calc(100dvh - 12px);
  }

  .tutorial-confirm-portrait{
    width:118%;
    max-width:none;
    max-height:94%;
    transform:translateX(-8%);
  }

  .tutorial-confirm-copy{
    box-sizing:border-box;
    display:flex;
    min-width:0;
    height:100%;
    padding:clamp(30px,8vh,52px) clamp(18px,4vw,42px) clamp(12px,3vh,24px) 8px;
    flex-direction:column;
    justify-content:center;
    overflow:auto;
    overscroll-behavior:contain;
  }

  .tutorial-confirm-copy h2{
    margin:8px 44px 8px 0;
    font-size:clamp(24px,5.2vw,38px);
  }

  .tutorial-confirm-copy p{
    font-size:clamp(12px,2.3vw,15px);
    line-height:1.42;
  }

  .tutorial-confirm-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    width:100%;
    margin-top:clamp(10px,3vh,20px);
  }

  .tutorial-confirm-actions button{
    width:100%;
    min-height:40px;
    padding:6px 8px;
    font-size:10px;
    line-height:1.15;
  }

  .tutorial-confirm-close{
    top:10px;
    right:10px;
    width:36px;
    height:36px;
  }
}

@media (max-width:560px) and (orientation:portrait){
  .tutorial-confirm-card{
    grid-template-columns:94px minmax(0,1fr);
  }

  .tutorial-confirm-actions{
    grid-template-columns:1fr;
  }

  .tutorial-confirm-copy{
    justify-content:flex-start;
  }
}