/* Mobile shell elements exist in the shared LAB DOM but never alter desktop presentation. */
body:not(.app-mobile) :is(.app-web-nav,.app-brand-name,.app-mobile-header,.app-activity,.app-clocks,.app-board-controls,.app-top-line,.app-position-preview,.app-tabs,.app-mobile-setting){display:none!important}
/* Unified LAB phone/native presentation: one phone-sized workspace, one view at a time. */
body.app-mobile {
  --app-web-nav-height: 64px;
  --app-activity-height: 0px;
  --app-clock-height: 0px;
  box-sizing: border-box;
  width: 100%; min-width: 0; min-height: 100dvh;
  margin: 0; padding: var(--app-preview-safe-top, env(safe-area-inset-top, 0px)) 0 calc(78px + var(--app-preview-safe-bottom, env(safe-area-inset-bottom, 0px)));
  overflow-x: hidden;
}
body.app-mobile:has(.app-activity:not([hidden])) { --app-activity-height: 55px; }
body.app-mobile:has(#workspaceTimers:not([hidden])) { --app-clock-height: 80px; }
body.app-mobile:has(#humanSession:not([hidden])) { --app-clock-height: 80px; }
body.app-mobile:has(#workspaceTimers:not([hidden])):has(#humanSession:not([hidden])) { --app-clock-height: 155px; }
body.app-mobile *, body.app-mobile *::before, body.app-mobile *::after { box-sizing: border-box; }
body.app-mobile > .app-header, body.app-mobile > #chessPwaNotice { display: none !important; }
.app-web-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: min(100%, 430px); min-height: 39px; margin: 0 auto; padding: 2px 8px;
  border-bottom: 1px solid var(--ui-border); font: 650 10px/1.2 system-ui, sans-serif;
  letter-spacing: .055em;
}
.app-channel-nav { display: flex; align-items: center; gap: 3px; min-width: 0; }
.app-channel-nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 2px 3px; color: var(--ui-muted); text-decoration: none; border-radius: 6px; }
.app-channel-nav a[aria-current="page"] { color: var(--ui-accent); background: var(--ui-raised); }
.app-channel-nav a:focus-visible, .app-language button:focus-visible { outline: 2px solid var(--ui-accent); }
.app-language { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.app-language button { min-height: 34px; padding: 2px 4px; border: 0; background: transparent; color: var(--ui-muted); font: inherit; cursor: pointer; }
.app-language button[aria-pressed="true"] { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.app-brand-name { width: min(100%, 430px); margin: 0 auto; padding: 5px 8px 3px; text-align: center; color: var(--ui-text); font: 760 17px/1.15 system-ui, sans-serif; letter-spacing: .01em; }
.app-embedded .app-web-nav { display: flex !important; }
.app-mobile-header {
  position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: 6px;
  width: min(100%, 430px); min-height: 56px; margin: 0 auto; padding: 5px 8px;
  background: var(--ui-surface); border-bottom: 1px solid var(--ui-border);
}
.app-mobile-header button, .app-activity button {
  flex: 0 0 44px; min-width: 44px; min-height: 44px; border: 1px solid var(--ui-border);
  border-radius: 9px; background: var(--ui-raised); color: var(--ui-text); font: 600 21px/1 system-ui; cursor: pointer;
}
.app-mobile-header button:focus-visible, .app-activity button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.app-mobile-title { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; }
.app-mobile-title strong, .app-mobile-title small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.app-mobile-title strong { color: var(--ui-text); font-size: 13px; }
.app-mobile-title small { margin-top: 3px; color: var(--ui-muted); font-size: 11px; }
.app-activity[hidden], .app-position-preview[hidden] { display: none !important; }
.app-activity { display: flex; align-items: center; gap: 8px; width: min(100%, 430px); margin: 0 auto; padding: 5px 10px; color: var(--ui-accent); background: var(--ui-inset); font-size: 12px; }
.app-activity span { flex: 1; }
.app-activity button { flex-basis: auto; padding: 0 12px; font-size: 13px; }
.app-clocks { width: min(100%, 430px); margin: 0 auto; }
.app-clocks:has(#workspaceTimers[hidden]):has(#humanSession[hidden]) { display: none; }
.app-clocks #workspaceTimers { margin: 4px 8px 0; }
.app-clocks .player-timer { padding: 6px 8px; }
.app-clocks .player-timer strong { font-size: 16px; }
.app-clocks #timerCaption { margin: 2px 8px; }
.app-clocks #humanSession { margin: 4px 8px; padding: 5px 8px; }
.app-clocks #humanSession .btn { min-height: 44px; color: var(--ui-text); background: var(--ui-raised); border: 1px solid var(--ui-border); border-radius: 7px; }
body.app-mobile #main, body.app-mobile #main:has(#board.scaled), body.app-mobile #main.lab-custom-width {
  display: block !important; width: 100% !important; max-width: 430px !important;
  margin: 0 auto !important; padding: 6px 8px 0; min-width: 0;
}
body.app-mobile #board-container {
  width: 100%; max-width: none; height: auto !important; min-height: 0 !important;
  margin: 0 0 10px; padding: 10px 10px 14px !important; min-width: 0;
  border-radius: 11px;
}
body.app-mobile .board-heading { margin-bottom: 8px; }
body.app-mobile .board-heading .research-tag, body.app-mobile .board-legend, body.app-mobile .board-note { display: none !important; }
body.app-mobile .board-stage { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
body.app-mobile #board { width: 100%; min-width: 0; }
body.app-mobile #board .notation-322f9 { line-height: 1; }
body.app-mobile #board .alpha-d2270 { right: 4px; bottom: 4px; }
body.app-mobile #board .numeric-fc462 { left: 4px; top: 4px; }
body.app-mobile .board-actions.has-all-evals { padding: 8px 0 4px; }
body.app-mobile .all-eval-badges { gap: 4px; }
body.app-mobile .all-eval-badge { min-height: 48px; }
.app-board-controls { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.app-action-row { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: 6px; width: 100%; align-items: stretch; }
.app-analysis-slot { min-width: 0; }
.app-board-controls .analysis-source-row {
  display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; gap: 4px; align-items: center; margin: 0; height: 100%;
}
.app-board-controls > #analysisSourceStatus {
  /* In this column, inherited flex-basis:130px would reserve empty height. */
  flex: 0 0 auto; height: auto; min-height: 0;
  min-width: 0; padding: 0 2px; font-size: 10.5px; line-height: 1.3; color: var(--ui-muted);
}
.app-top-line {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px;
  width: 100%; margin-top: 2px; padding: 7px 10px; border: 1px solid var(--ui-border);
  border-radius: 9px; background: var(--ui-inset); color: var(--ui-text); text-align: left; cursor: pointer;
}
.app-top-line[hidden] { display: none !important; }
.app-top-line span { flex: 0 0 auto; white-space: nowrap; color: var(--ui-accent); font: 720 10.5px/1.25 system-ui, sans-serif; letter-spacing: .04em; }
.app-top-line strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-board-controls .analysis-source-row select, .app-board-controls .analysis-deepen, .app-board-controls .analysis-dcc-toggle { min-height: 40px; }
.app-board-controls .analysis-source-row select { min-width: 0; width: 100%; padding-inline: 5px; }
.app-board-controls .analysis-deepen { padding-inline: 7px; white-space: nowrap; }
.app-board-controls .analysis-dcc-toggle { display: inline-flex; align-items: center; padding-inline: 3px; font-size: 11px; }
.app-board-controls .top-buttons { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; width: 100%; margin: 0; }
.app-board-controls .top-buttons .btn { min-width: 0; min-height: 44px; padding: 4px 2px; font-size: 14px; }
.app-board-controls #btnHideEval { font-size: 11px; }
.app-sim { width: 100%; min-height: 40px; padding: 6px 10px; color: #f5c779; background: #392b1c; border: 1px solid #826943; border-radius: 8px; font: 650 12.5px system-ui; cursor: pointer; }
.app-sim:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
#appSimMore { display: block; margin: 8px 0; }
body.app-mobile[data-app-view="board"] #controls { display: none !important; }
body.app-mobile:not([data-app-view="board"]) #board-container { display: none !important; }
body.app-mobile #controls, body.app-mobile.light-theme #controls {
  display: flex !important; flex-direction: column; align-self: auto; contain: none !important;
  width: 100%; max-width: none; height: calc(100dvh - 56px - 72px - var(--app-web-nav-height) - var(--app-activity-height) - var(--app-clock-height) - var(--app-preview-safe-top, env(safe-area-inset-top, 0px)) - var(--app-preview-safe-bottom, env(safe-area-inset-bottom, 0px)));
  min-height: 380px !important; margin: 0; padding: 9px !important; overflow: hidden; border-radius: 11px;
}
body.app-mobile[data-app-view="board"] #controls { display: none !important; }
body.app-mobile #controls > .workspace-top, body.app-mobile #controls > .workspace-bottom { display: none !important; }
body.app-mobile #controls .workspace-analysis { display: flex; flex: 1 1 auto; height: auto !important; min-height: 0; }
body.app-mobile #controls .workspace-display { flex: 1 1 auto; min-height: 0; padding: 10px; }
body.app-mobile #controls .workspace-display #moves, body.app-mobile #controls .workspace-display #dccAnalysisPanel { font-size: 14px; }
.app-position-preview {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0;
  margin-bottom: 9px; padding: 8px; background: var(--ui-inset); border: 1px solid var(--ui-border); border-radius: 9px;
}
#appMiniBoard { flex: 0 0 94px; width: 94px; height: 94px; }
#appMiniBoard .board-b72b1 { border: 0; box-sizing: content-box; }
#appMiniBoard .white-1e1d7 { background: #e9e8d3; color: #4d6655; }
#appMiniBoard .black-3c85d { background: #739077; color: #f4f1dc; }
#appMiniBoard .notation-322f9 { font-size: 7px; }
.app-preview-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.app-preview-text strong, .app-preview-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-preview-text strong { color: var(--ui-text); font-size: 12px; }
.app-preview-text small { color: var(--ui-muted); font-size: 11px; }
.app-preview-text button { min-height: 44px; padding: 5px 10px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-raised); color: var(--ui-accent); font: 600 12px system-ui; }
body.app-mobile[data-app-view="review"] #controls .workspace-analysis { display: none; }
body.app-mobile #controls > .game-review-drawer.open {
  position: static !important; display: block !important; flex: 1 1 auto; min-height: 0;
  margin: 0; padding: 8px; border: 1px solid var(--ui-border); border-radius: 8px; overflow: auto;
}
body.app-mobile #controls:has(> .game-review-drawer.open) > #appPositionPreview { visibility: visible !important; }
body.app-mobile #controls > .workspace-drawer.open:not(.game-review-drawer) { z-index: 650; }
.app-tabs {
  position: fixed; left: 50%; bottom: 0; z-index: 700; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: min(100%, 430px);
  min-height: calc(64px + var(--app-preview-safe-bottom, env(safe-area-inset-bottom, 0px))); padding: 4px 4px var(--app-preview-safe-bottom, env(safe-area-inset-bottom, 0px));
  background: var(--ui-surface); border-top: 1px solid var(--ui-border); box-shadow: 0 -6px 18px #0003;
}
.app-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 56px; padding: 2px; border: 0; border-radius: 9px; background: transparent; color: var(--ui-muted); font: 600 11px/1.2 system-ui; cursor: pointer; }
.app-tabs button + button::before {
  content: ""; position: absolute; left: 0; top: 32%; width: 1px; height: 36%;
  background: var(--ui-border); opacity: .42; pointer-events: none;
}
.app-tabs button span:first-child { font-size: 19px; line-height: 1; }
.app-tabs button[aria-current="page"] { color: var(--ui-accent); background: var(--ui-raised); }
.app-tabs button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
body.app-mobile .lab-tools-dialog { width: min(420px, calc(100vw - 16px)); max-height: calc(100dvh - 24px - var(--app-preview-safe-top, env(safe-area-inset-top, 0px)) - var(--app-preview-safe-bottom, env(safe-area-inset-bottom, 0px))); }
body.app-mobile .deep-panel button, body.app-mobile .deep-panel select, body.app-mobile .deep-panel input,
body.app-mobile #dccAnalysisPanel button, body.app-mobile #moves button { min-height: 44px; }
body.app-mobile .workspace-drawer .btn, body.app-mobile .game-review-drawer button { min-height: 44px; }
@media (max-width: 370px) { .app-mobile-header { gap: 3px; padding-inline: 5px; } .app-mobile-header button { flex-basis: 42px; min-width: 42px; } #appMiniBoard { flex-basis: 80px; width: 80px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { body.app-mobile *, body.app-mobile *::before, body.app-mobile *::after { scroll-behavior: auto !important; transition-duration: 0s !important; } }

.app-pwa-panel { margin: 12px 0; padding: 12px; border: 1px solid var(--ui-border); border-radius: 10px; color: var(--ui-text); background: var(--ui-inset); font-size: 13px; line-height: 1.45; }
.app-pwa-panel[hidden], .app-pwa-panel [hidden] { display: none !important; }
.app-pwa-panel p { margin: 8px 0 0; }
.app-pwa-panel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-accent); }
#appPwaInstall { min-height: 44px; padding: 8px 12px; }
#appPwaUpdate { padding: 8px; border-left: 3px solid var(--ui-accent); }

@media (max-width: 360px) {
  .app-channel-nav { gap: 1px; font-size: 9px; }
  .app-channel-nav a { padding-inline: 2px; }
  .app-language { font-size: 9px; }
  .app-brand-name { font-size: 16px; }
}

/* APP-only close actions. Stable selectors also cover lazily created panels
 * and EN/SL labels; delete/remove/clear and ordinary navigation stay unchanged. */
body.app-mobile :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close) {
  background: #6f263b !important;
  color: #fff4f6 !important;
  border: 1px solid #b96c82 !important;
  min-width: 44px; min-height: 44px;
}
body.app-mobile :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close):hover {
  background: #89354c !important;
}
body.app-mobile :is(.dialog-close, #btnCloseGames, #btnCloseSettings,
  #btnCoachClose, #geminiClose, #gameReviewPanel .game-review-heading > button,
  #deepAnalysisPanel [data-deep="close"], #simTournamentDialog [data-action="close"],
  .chess-study-close, .research-close):focus-visible {
  background: #89354c !important;
  outline: 2px solid #efafc0; outline-offset: 2px;
}

body.app-mobile #popularGamesPanel .library-result-list{flex:0 0 auto;min-height:0;max-height:none;overflow:visible;overscroll-behavior:auto}
body.app-mobile #popularGamesPanel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ui-accent) var(--ui-inset);scrollbar-gutter:stable}

/* Desktop APP simulation: the same LAB/mobile DOM and controller, framed for inspection. */
.app-preview-desktop-tools{display:none}
body.app-mobile.app-preview-desktop{
  --app-preview-width:min(402px,46dvh,calc(100vw - 30px));
  --app-preview-height:min(874px,calc(100dvh - 24px));
  --app-preview-inset:max(12px,calc((100dvh - 874px)/2));
  min-height:100dvh;
  padding-top:var(--app-preview-inset);
  padding-bottom:calc(78px + var(--app-preview-inset));
  background:radial-gradient(900px 620px at 50% 18%,rgba(75,118,93,.18),transparent 68%),#0b1511;
}
body.app-mobile.app-preview-desktop::before{
  content:"";position:fixed;z-index:900;pointer-events:none;box-sizing:border-box;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(var(--app-preview-width) + 14px);height:var(--app-preview-height);
  border:6px solid #010705;border-radius:32px;
  box-shadow:0 18px 60px #0009,0 0 0 1px #59735f;
}
body.app-mobile.app-preview-desktop :is(.app-web-nav,.app-brand-name,.app-mobile-header,.app-activity,.app-clocks){
  width:var(--app-preview-width);max-width:var(--app-preview-width)
}
body.app-mobile.app-preview-desktop #main,
body.app-mobile.app-preview-desktop #main:has(#board.scaled),
body.app-mobile.app-preview-desktop #main.lab-custom-width{
  width:var(--app-preview-width)!important;max-width:var(--app-preview-width)!important
}
body.app-mobile.app-preview-desktop #controls,
body.app-mobile.app-preview-desktop.light-theme #controls{
  height:calc(var(--app-preview-height) - 56px - 72px - var(--app-web-nav-height) - var(--app-activity-height) - var(--app-clock-height));
}
body.app-mobile.app-preview-desktop .app-tabs{
  width:var(--app-preview-width)!important;max-width:var(--app-preview-width);bottom:var(--app-preview-inset)
}
body.app-mobile.app-preview-desktop .app-preview-desktop-tools{
  position:fixed;z-index:950;top:calc(var(--app-preview-inset) + 6px);left:calc(50% + 225px);
  display:flex;flex-direction:column;gap:5px;min-width:142px;padding:9px 10px;
  border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-surface);
  color:var(--ui-muted);font:11px/1.25 system-ui,sans-serif;box-shadow:0 10px 30px #0005
}
body.app-mobile.app-preview-desktop .app-preview-desktop-tools strong{color:var(--ui-text);font-size:12px}
body.app-mobile.app-preview-desktop .app-preview-desktop-tools a{color:var(--ui-accent);text-decoration:none;font-weight:650}
body.app-mobile.app-preview-desktop .app-preview-desktop-tools a:hover{text-decoration:underline}
@media(max-width:760px){
  body.app-mobile.app-preview-desktop .app-preview-desktop-tools{display:none!important}
  body.app-mobile.app-preview-desktop::before{border-width:3px;border-radius:22px}
}