/* The wrapper is invisible to the existing desktop and full-screen layout. */
.mobile-board-viewport { display:contents; }
.mobile-board-tools[hidden] { display:none; }

.mobile-controls-active .game-layout,
.mobile-controls-active.board-expanded .game-layout.expanded-stacked {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:12px max(10px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.mobile-controls-active .battlefield,
.mobile-controls-active.board-expanded .battlefield { width:100%; min-width:0; flex-shrink:0; }
.mobile-controls-active .game-sidebar,
.mobile-controls-active.board-expanded .game-sidebar {
  display:flex;
  flex-direction:column;
  width:100%;
  max-height:none;
  overflow:visible;
  gap:12px;
  padding:0;
  flex-shrink:0;
}
.mobile-controls-active.board-expanded .game-layout {
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  padding-top:max(12px,env(safe-area-inset-top));
}
.mobile-controls-active.board-expanded .turn-controls { position:static; }
.mobile-controls-active .site-header {
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));
  align-items:flex-start;
}
.mobile-controls-active .header-actions { gap:8px; }
.mobile-controls-active .match-heading { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
.mobile-controls-active .header-actions .button { font-size:.8125rem; }
.mobile-controls-active .mobile-board-tools { margin:8px 0 10px; }
.mobile-controls-active .mobile-board-size { display:flex; gap:8px; }
.mobile-controls-active .mobile-board-size .button { flex:1; }
.mobile-controls-active .mobile-board-size [aria-pressed="true"] { border-color:var(--blue); color:var(--blue); background:#263d4b; }
.mobile-controls-active #mobile-board-hint { margin:7px 0 0; color:var(--muted); font-size:.8125rem; line-height:1.4; }
.mobile-controls-active .mobile-board-viewport {
  display:block;
  width:100%;
  height:var(--mobile-viewport-height,auto);
  overflow:auto;
  overscroll-behavior-x:contain;
  touch-action:pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#6d8394 #18232b;
}
.mobile-controls-active .mobile-board-viewport:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.mobile-controls-active .board-frame {
  width:var(--mobile-frame-width,100%);
  margin-inline:auto;
  display:block;
}
.mobile-controls-active .board { touch-action:pan-x pan-y pinch-zoom; }
.mobile-controls-active .square { -webkit-touch-callout:none; user-select:none; }
.mobile-controls-active .board-heading,.mobile-controls-active .board-footer { margin-left:22px; }
.mobile-controls-active .board-footer { flex-wrap:wrap; }
.mobile-controls-active .board-key { display:none; }
.mobile-controls-active .button,
.mobile-controls-active .board-view-tools .button,
.mobile-controls-active .setup-confirm .button,
.mobile-controls-active #selection-panel > .undo-button,
.mobile-controls-active .army-color-choice,
.mobile-controls-active .welcome-choice,
.mobile-controls-active .welcome-help,
.mobile-controls-active summary { min-height:44px; }
.mobile-controls-active .help-button { width:44px; height:44px; min-height:44px; flex-basis:44px; }
.mobile-controls-active .color-options { flex-wrap:wrap; }
.mobile-controls-active .army-color-choice { min-width:80px; }
.mobile-controls-active .turn-card .action-display { margin-right:44px; }
.mobile-controls-active .piece-actions { gap:8px; }
.mobile-controls-active input:not([type="checkbox"],[type="radio"],[type="range"]),
.mobile-controls-active select,
.mobile-controls-active textarea { font-size:16px; min-height:44px; }
.mobile-controls-active input[type="range"] { min-height:44px; }
.mobile-controls-active dialog {
  width:min(670px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:18px;
}
.mobile-controls-active .match-lobby {
  padding-top:max(28px,env(safe-area-inset-top));
  padding-bottom:max(28px,env(safe-area-inset-bottom));
  padding-left:max(24px,env(safe-area-inset-left));
  padding-right:max(24px,env(safe-area-inset-right));
}
@media(orientation:landscape) and (max-height:700px) {
  .mobile-controls-active .welcome-emblem { width:min(260px,35vw); justify-self:center; }
  .mobile-controls-active .match-lobby { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
}

.mobile-controls-active.board-expanded .game-layout,
.mobile-controls-active.board-expanded .game-layout.expanded-stacked { padding:0; }
.mobile-controls-active.board-expanded .battlefield { display:flex; flex-direction:column; }
.mobile-controls-active.board-expanded .board-stage { order:-1; }
.mobile-controls-active.board-expanded .mobile-board-tools { margin:10px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left)); }
.mobile-controls-active.board-expanded .game-sidebar { padding:0 max(10px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }