/* KishMat v58.69 — true edge-to-edge mobile chessboards.
   Mobile layouts use vertical scrolling instead of shrinking the chessboard
   to fit an available-height calculation. Desktop layouts are unchanged. */
@media (max-width:799px) {
  /* The full-screen mission is its own vertical scroll container. */
  .mastery-shell .mastery-lesson-screen {
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mastery-shell .mastery-lesson-layout {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    height:auto;
    min-height:100%;
    padding:6px 0 max(20px, env(safe-area-inset-bottom));
  }
  .mastery-shell .mastery-lesson-header,
  .mastery-shell .mastery-lesson-progress-row {
    margin-inline:10px;
  }
  .mastery-shell .mastery-lesson-main {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    flex:0 0 auto;
    align-content:start;
    gap:12px;
    padding:0;
    min-height:0;
    overflow:visible;
  }
  .mastery-shell .mastery-lesson-board-column {
    order:0;
    grid-row:1;
    width:100%;
    height:auto;
    min-width:0;
    min-height:0;
    align-items:flex-start;
    justify-content:center;
  }
  .mastery-shell .mastery-lesson-board-frame {
    box-sizing:border-box;
    display:block;
    flex:0 0 auto;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:1;
    margin:0;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  /* The mascot is below the full-width board and can remain large even on
     short phones because the mission itself scrolls vertically. */
  .mastery-shell .mastery-lesson-panel {
    order:1;
    grid-row:2;
    box-sizing:border-box;
    width:auto;
    min-width:0;
    min-height:0;
    height:auto;
    align-self:start;
    justify-self:stretch;
    margin:0 10px;
    padding:12px 14px;
    border-radius:18px;
    gap:10px;
  }
  .mastery-shell .mastery-mascot-assistant {
    display:flex!important;
    min-height:132px;
    padding:10px 12px;
    margin-bottom:8px;
    gap:14px;
    border-radius:18px;
    align-items:center;
  }
  .mastery-shell .mastery-assistant-pawn {
    width:clamp(112px,32vw,144px);
    min-width:clamp(112px,32vw,144px);
    flex-basis:clamp(112px,32vw,144px);
    height:clamp(118px,34vw,150px);
  }
  .mastery-shell .mastery-assistant-speech {
    font-size:clamp(.77rem,3.3vw,.94rem);
    line-height:1.65;
  }
  .mastery-shell .mastery-lesson-meta {margin:0 auto 4px;}
  .mastery-shell .mastery-lesson-actions {margin-top:2px;}
}
@media (max-width:799px) and (max-height:450px) {
  .mastery-shell .mastery-mascot-assistant {min-height:120px;padding:8px 12px;}
  .mastery-shell .mastery-assistant-pawn {width:112px;min-width:112px;flex-basis:112px;height:118px;}
}
@media (max-width:799px) {
  /* Native dialog defaults, container padding and 41dvh caused the placement
     chessboard to be smaller than the phone even with width:100%. */
  .mastery-shell .mastery-placement-dialog {
    box-sizing:border-box;
    position:fixed;
    inset:0;
    margin:0;
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    padding:0;
    border:0;
    border-radius:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mastery-shell .mastery-placement-modal {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    padding:9px 0 max(18px, env(safe-area-inset-bottom));
    gap:10px;
  }
  .mastery-shell .mastery-placement-head,
  .mastery-shell .mastery-placement-progress-row {
    margin-inline:12px;
  }
  .mastery-shell .mastery-placement-content {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    min-width:0;
    width:100%;
  }
  .mastery-shell .mastery-placement-board-wrap {
    box-sizing:border-box;
    width:100%!important;
    max-width:none!important;
    height:auto;
    aspect-ratio:1;
    justify-self:stretch;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .mastery-shell .mastery-placement-side {
    box-sizing:border-box;
    padding:8px 14px 16px;
    min-width:0;
  }
  .mastery-shell .mastery-placement-turn {white-space:normal;text-align:center;}
}