/* 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}


/* APP preview has one real 874px screen; shorter desktops scroll outside it. */
.app-preview-toolbar{display:none}
body.app-mobile.app-preview-desktop{margin:0;padding:0!important;min-height:100dvh;overflow:auto!important;background:#0b1511;--app-preview-width:402px;color:var(--ui-text)}
body.app-mobile.app-preview-desktop::before{display:none}
body.app-mobile.app-preview-desktop .app-preview-toolbar{position:static;box-sizing:border-box;max-width:1120px;width:100%;margin:0 auto;padding:24px 22px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;background:transparent;border:0;border-radius:0;box-shadow:none;z-index:auto}
body.app-mobile.app-preview-desktop .app-preview-title{font:720 18px/1.3 system-ui,sans-serif;letter-spacing:-.3px;color:var(--ui-text);text-transform:none;margin:0;padding:0;border:0}
body.app-mobile.app-preview-desktop .app-preview-title span{color:var(--ui-accent)}
body.app-mobile.app-preview-desktop .app-preview-nav{display:flex;align-items:center;justify-content:center;gap:3px;font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.055em;white-space:nowrap;justify-self:center}
body.app-mobile.app-preview-desktop .app-preview-nav a{display:inline-flex;align-items:center;min-height:38px;padding:7px 9px;color:var(--ui-muted);border-radius:7px;text-decoration:none}
body.app-mobile.app-preview-desktop .app-preview-nav a[aria-current=page]{color:var(--ui-accent);background:var(--ui-border)}
body.app-mobile.app-preview-desktop .app-preview-width{margin:0;display:flex;align-items:center;justify-self:end;gap:9px;color:var(--ui-muted);font:500 11px system-ui,sans-serif;white-space:nowrap}
body.app-mobile.app-preview-desktop .app-preview-width select{width:86px;min-height:38px;padding:5px 8px;border:1px solid var(--ui-border);border-radius:8px;background:#0b1511;color:var(--ui-text);color-scheme:dark;font:12px system-ui,sans-serif}
body.app-mobile.app-preview-desktop .app-preview-toolbar a:focus-visible,body.app-mobile.app-preview-desktop .app-preview-toolbar select:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
body.app-mobile.app-preview-desktop .app-preview-stage{display:flex;justify-content:center;align-items:center;padding:8px 12px 28px;min-height:0}
body.app-mobile.app-preview-desktop .app-preview-device{position:relative;flex:none;box-sizing:border-box;width:calc(var(--app-preview-width) + 12px);height:886px;border:6px solid #010705;border-radius:32px;background:#0b1511;box-shadow:0 18px 60px #0009,0 0 0 1px var(--ui-border);overflow:clip}
body.app-mobile.app-preview-desktop .app-preview-screen{position:relative;transform:translateZ(0);width:100%;height:100%;border-radius:25px;overflow:clip;background:#0b1511}
body.app-mobile.app-preview-desktop .app-preview-content{position:absolute;inset:43px 0 25px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
body.app-mobile.app-preview-desktop .app-preview-content::-webkit-scrollbar{display:none}
body.app-mobile.app-preview-desktop .app-preview-island{position:absolute;z-index:1000;top:8px;left:50%;transform:translateX(-50%);width:114px;height:28px;border-radius:18px;background:#03040a;pointer-events:none}
body.app-mobile.app-preview-desktop .app-preview-home{position:absolute;z-index:3000;bottom:8px;left:50%;transform:translateX(-50%);width:118px;height:4px;border-radius:5px;background:var(--ui-muted);pointer-events:none}
body.app-mobile.app-preview-desktop dialog{position:fixed!important;inset:auto!important;left:calc(var(--app-screen-left,0px) + 8px)!important;top:calc(var(--app-screen-top,0px) + 43px)!important;transform:none!important;margin:0!important;width:calc(var(--app-preview-width) - 16px)!important;max-width:calc(var(--app-preview-width) - 16px)!important;max-height:788px!important}
body.app-mobile.app-preview-desktop dialog::backdrop{clip-path:inset(max(0px,var(--app-screen-top,0px)) max(0px,calc(100vw - var(--app-screen-right,100vw))) max(0px,calc(100dvh - var(--app-screen-bottom,100dvh))) max(0px,var(--app-screen-left,0px)))}
@media(max-width:800px){body.app-mobile.app-preview-desktop .app-preview-toolbar{grid-template-columns:1fr auto;gap:8px;padding:15px 12px}body.app-mobile.app-preview-desktop .app-preview-nav{grid-column:1/-1;grid-row:2}body.app-mobile.app-preview-desktop .app-preview-title{font-size:15px}}

body.app-mobile.app-preview-desktop .app-preview-content{padding-bottom:72px}
body.app-mobile.app-preview-desktop .app-preview-content>.app-header,
body.app-mobile.app-preview-desktop .app-preview-content>#chessPwaNotice{display:none!important}
body.app-mobile.app-preview-desktop #controls,
body.app-mobile.app-preview-desktop.light-theme #controls{height:calc(806px - 56px - 72px - var(--app-web-nav-height) - var(--app-activity-height) - var(--app-clock-height))}
body.app-mobile.app-preview-desktop .app-tabs{width:100%;max-width:none;bottom:25px}