/* Shared mobile refinements. ChessChan deliberately never loads this asset. */
.mobile-picker { display: none; }
.mobile-secondary { display: contents; }
@media (min-width: 901px) {
    .mobile-fold, .mobile-fold-content { display: contents; }
    .mobile-fold > summary { display: none; }
}
@media (max-width: 900px) {
    body[data-mobile-page] { --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); }
    body[data-mobile-page] :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; min-width: 0; max-width: 100%; }
    body[data-mobile-page] :is(button, summary, .btn, .cmg-cta) { touch-action: manipulation; }
    .mobile-fold { margin: 6px 0; min-width: 0; }
    .mobile-fold > summary { cursor: pointer; min-height: 44px; padding: 8px 12px; color: var(--tc-ink, #1B2430); background: var(--tc-surface, #fff); border: 1px solid var(--tc-line, #ddd); border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
    .mobile-fold > summary > * { display: inline; font-size: 14px; margin: 0; }
    .mobile-fold > summary:focus-visible { outline: 3px solid var(--tc-blue, #3AB3F2); }
    .mobile-sheet[open] > .mobile-fold-content { position: fixed; z-index: 1100; inset: 128px 8px calc(12px + var(--mobile-safe-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 2px solid var(--tc-ink, #1B2430); border-radius: 12px; background: var(--tc-surface, #fff); box-shadow: 0 4px 0 var(--tc-line, #ddd); }
    .mobile-sheet[open] > summary { position: fixed; z-index: 1101; top: 80px; left: 8px; right: 8px; }
    .mobile-sheet[open] > summary::after { content: '×'; float: right; font-size: 20px; line-height: 20px; }
    body:has(.mobile-sheet[open]) .tc-chat-toggle { display: none !important; }
    .mobile-picker { display: block; width: 100%; min-height: 44px; margin: 6px 0 10px; padding: 8px; border: 2px solid var(--tc-line, #ddd); border-radius: 10px; background: var(--tc-surface, #fff); color: var(--tc-ink, #1B2430); }
    /* First viewport: useful choices before decorative intros. */
    body.home-page .hero, body.home-page.is-logged-in .hero { padding: 12px 12px 8px; }
    body.home-page.is-logged-in .hero { padding-top: calc(var(--mobile-nav-height, 74px) + 12px); }
    html[data-tc-target=app] body.home-page .hero { padding: 12px 12px 8px; }
    body.home-page .hero-logo { width: 56px; margin: 0 0 6px; animation: none; }
    body.home-page.is-logged-in .hero-logo { display: none; }
    body.home-page .hero-title { font-size: 1.15rem; margin: 0 0 6px; }
    body.home-page .hero-subtitle { display: none; }
    body.home-page .hero-social { margin: 6px 0 0; gap: 8px; }
    body.home-page .hero-social .social-btn { width: 44px; height: 44px; }
    body.home-page .hero-cta { margin: 4px 0; gap: 8px; }
    body.home-page .hero-cta-hint { display: none; }
    body.home-page .section { padding: 10px 12px 20px; }
    body.home-page .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
    body.home-page .group-title { font-size: 1rem; margin: 0 0 8px; }
    body.home-page .tool-card { padding: 6px; min-width: 0; gap: 4px; }
    body.home-page .tool-card h3 { font-size: 14px; line-height: 1.3; margin: 0; }
    body.home-page .tool-card p { display: none; }
    body.home-page .tool-card .tool-icon { width: 56px; height: 56px; margin: 0 auto 4px; object-fit: contain; }
    body.home-page .interactive-card { padding: 10px; }
    body.home-page .controls { flex-direction: row; flex-wrap: wrap; }
    body.home-page .controls button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; font-size: 14px; }
    /* Bot: original action buttons are moved beside the board on mobile. */
    body[data-mobile-page=play-bot] .main-content-wrapper,
    body[data-mobile-page=play-friend] .main-content-wrapper { padding: 0 8px !important; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) .header-section { flex-direction: row; flex-wrap: nowrap; margin: 4px 0; padding: 0; gap: 6px; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) .header-section h1 { font-size: 1rem; margin: 0; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) :is(.page-subtitle, .login-hint) { display: none !important; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) .header-section .tc-share-trigger { width: 44px; min-width: 44px; height: 44px; padding: 8px; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) .header-section .tc-share-trigger [data-i18n] { display: none; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend]) .container { padding: 4px; margin: 0; width: 100%; border: 0; box-shadow: none; }
    body[data-mobile-page=play-bot] .game-container { display: flex !important; flex-direction: column !important; gap: 4px; overflow: visible; }
    body[data-mobile-page=play-bot] .sidebar { display: contents; }
    body[data-mobile-page=play-bot] .sidebar > .mobile-fold:first-child { order: -1; }
    body[data-mobile-page=play-bot] .board-section { order: 0; overflow: visible; margin: 0; width: 100%; }
    body[data-mobile-page=play-bot] #gameBoard { width: var(--mobile-board-size, min(100%, calc(100dvh - 310px))) !important; height: var(--mobile-board-size, min(calc(100vw - 32px), calc(100dvh - 310px))) !important; max-width: 100% !important; margin: 0 auto; }
    body[data-mobile-page=play-bot] #status { min-height: 28px; padding: 4px; margin: 5px 0; font-size: 14px; }
    body[data-mobile-page=play-bot] .board-section > .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
    body[data-mobile-page=play-bot] .board-section > .controls button { width: 100%; min-height: 44px; padding: 6px !important; font-size: 14px !important; line-height: 1.2; }
    body[data-mobile-page=play-bot] .mobile-secondary { display: flex; width: 100%; gap: 6px; }
    body[data-mobile-page=play-bot] .mobile-secondary > .mobile-fold { flex: 1; margin: 0; }
    body[data-mobile-page=play-bot] .difficulty-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
    body[data-mobile-page=play-bot] .difficulty-btn { min-height: 60px; padding: 6px; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend], [data-mobile-page=memory-games], [data-mobile-page=puzzles], [data-mobile-page=endgame-training], [data-mobile-page=analysis]) .tc-chat-toggle { display: none !important; }
    body:is([data-mobile-page=play-bot], [data-mobile-page=play-friend], [data-mobile-page=memory-games]) #footer-container { margin-top: 12px; }
    /* Lobby before board; live clocks before play board. */
    body[data-mobile-page=play-friend] #lobbyScreen .board-section,
    body[data-mobile-page=play-friend] #waitingScreen .board-section { display: none; }
    body[data-mobile-page=play-friend] :is(.settings-panel, .share-panel) { padding: 8px; }
    body[data-mobile-page=play-friend] .input-group { margin-bottom: 8px; }
    body[data-mobile-page=play-friend] #gameScreen .game-container { display: flex !important; flex-direction: column !important; gap: 4px; }
    body[data-mobile-page=play-friend] #gameScreen .board-section { order: -1 !important; margin: 0; }
    body[data-mobile-page=play-friend] #playBoardWrap { width: 100%; }
    body[data-mobile-page=play-friend] #timerSection { order: -1 !important; width: 100%; }
    body[data-mobile-page=play-friend] #opponentTimer { grid-column: 1; grid-row: 1; }
    body[data-mobile-page=play-friend] #opponentInfoBar { grid-column: 1; grid-row: 2; }
    body[data-mobile-page=play-friend] #playerTimer { grid-column: 2; grid-row: 1; }
    body[data-mobile-page=play-friend] #playerInfoBar { grid-column: 2; grid-row: 2; }
    body[data-mobile-page=play-friend] .mobile-secondary { display: flex; gap: 4px; width: 100%; order: 4; }
    body[data-mobile-page=play-friend] .mobile-secondary > .mobile-fold { flex: 1; margin: 0; }
    body[data-mobile-page=play-friend] .mobile-secondary summary { padding: 8px 4px; }
    body[data-mobile-page=play-friend] #gameScreen .sidebar { display: contents; }
    body[data-mobile-page=play-friend] #timerSection { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 6px !important; }
    body[data-mobile-page=play-friend] #timerSection .timer-display { font-size: 1.15rem; padding: 2px; margin: 0; }
    body[data-mobile-page=play-friend] #timerSection .player-info-bar { margin: 0; padding: 2px; min-width: 0; }
    body[data-mobile-page=play-friend] #timerSection .player-avatar { width: 24px; height: 24px; }
    body[data-mobile-page=play-friend] #playBoard { width: var(--mobile-board-size, min(calc(100vw - 32px), calc(100dvh - 320px))) !important; height: var(--mobile-board-size, min(calc(100vw - 32px), calc(100dvh - 320px))) !important; margin: 0 auto; }
    body[data-mobile-page=play-friend] #status { margin: 4px 0; min-height: 28px; padding: 4px; font-size: 14px; }
    body[data-mobile-page=play-friend] .mobile-controls { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 5px; margin: 6px 0; max-width: none; }
    body[data-mobile-page=play-friend] .mobile-controls button { flex: 1 1 30%; min-height: 44px; padding: 6px !important; font-size: 14px !important; }
    body[data-mobile-page=play-friend] .mobile-controls:has(#rematchBtnMobile:not(.hidden)) button:disabled { display: none; }
    body[data-mobile-page=play-friend] .mobile-fold-content > .controls { display: flex !important; }
    /* Puzzle frame must start at the top, including short phones. */
    body:is([data-mobile-page=puzzles], [data-mobile-page=endgame-training]) .tcf { min-height: 0; align-content: start; }
    body:is([data-mobile-page=puzzles], [data-mobile-page=endgame-training]) .tcf-board { width: var(--mobile-board-size, min(calc(100% - 8px), calc(100dvh - 240px))) !important; }
    body:is([data-mobile-page=puzzles], [data-mobile-page=endgame-training]) .tcf-act { min-height: 44px; }
    body:is([data-mobile-page=puzzles], [data-mobile-page=endgame-training]) .tcf-status { max-height: none; overflow: visible; }
    .training-board-wrap { width: var(--mobile-board-size, min(100%, calc(100dvh - 320px))); }
    /* Memory games: one native picker instead of six tall promotional cards. */
    body[data-mobile-page=memory-games] .container { padding: 8px 10px; }
    body[data-mobile-page=memory-games] { overflow-anchor: none; }
    body[data-mobile-page=memory-games] .container > header { padding: 0; margin: 0 0 6px; }
    body[data-mobile-page=memory-games] :is(.logo-container, .page-intro, .memory-login-hint, .game-selector) { display: none !important; }
    body[data-mobile-page=memory-games] .page-title-row { flex-wrap: nowrap; gap: 6px; }
    body[data-mobile-page=memory-games] h1 { font-size: 1rem; margin: 0; }
    body[data-mobile-page=memory-games] .page-title-row .tc-share-trigger { width: 44px; min-width: 44px; padding: 8px; }
    body[data-mobile-page=memory-games] .page-title-row .tc-share-trigger [data-i18n] { display: none; }
    body[data-mobile-page=memory-games] .game-area { padding: 4px; }
    body[data-mobile-page=memory-games] .mobile-original-difficulty { display: none !important; }
    body[data-mobile-page=memory-games] .mobile-difficulty-picker { margin: 0 0 6px; }
    body[data-mobile-page=memory-games] .difficulty-selector { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
    body[data-mobile-page=memory-games] .difficulty-selector > [data-i18n]:not(button) { display: none; }
    body[data-mobile-page=memory-games] .difficulty-btn { flex: 1; min-width: 0; min-height: 44px; padding: 4px; margin: 0; font-size: 14px; line-height: 1.2; }
    body[data-mobile-page=memory-games] .stats { gap: 8px; font-size: 14px; margin: 6px 0; }
    body[data-mobile-page=memory-games] .memory-grid { width: min(100%, calc(100dvh - 320px)); margin: 8px auto; padding: 0; gap: 5px; }
    body[data-mobile-page=memory-games] .memory-card { min-height: 44px; font-size: 1.5rem; border-radius: 6px; }
    body[data-mobile-page=memory-games] .memory-card:not(.flipped):not(.matched) { font-size: 0; }
    body[data-mobile-page=memory-games] .simon-board { width: min(100%, calc(100dvh - 385px)); height: auto; aspect-ratio: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px auto; }
    body[data-mobile-page=memory-games] .simon-button { width: 100%; height: auto; aspect-ratio: 1; min-height: 44px; }
    body[data-mobile-page=memory-games] .sequence-display { min-height: 44px; padding: 6px; margin: 4px 0; font-size: 1.2rem; }
    body[data-mobile-page=memory-games] .sequence-input { gap: 4px; margin: 4px 0; }
    body[data-mobile-page=memory-games] .sequence-input:not([style*="display: none"]):has(button) { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body[data-mobile-page=memory-games] .sequence-input > .btn { grid-column: 1 / -1; margin-top: 0 !important; }
    body[data-mobile-page=memory-games] .sequence-input button { min-height: 44px; height: 44px; width: auto; padding: 6px; }
    body[data-mobile-page=memory-games] #sequence-game.active { display: flex; flex-direction: column; }
    body[data-mobile-page=memory-games] #sequence-game .difficulty-selector { order: 0; }
    body[data-mobile-page=memory-games] #sequence-game .mobile-difficulty-picker { order: 0; }
    body[data-mobile-page=memory-games] #sequence-game .stats { order: 1; }
    body[data-mobile-page=memory-games] #seq-message { order: 2; margin: 4px 0; padding: 4px; font-size: 13px; line-height: 1.2; }
    body[data-mobile-page=memory-games] #sequence-display { order: 3; }
    body[data-mobile-page=memory-games] #sequence-input { order: 4; }
    body[data-mobile-page=memory-games] #sequence-game .control-btns { order: 5; }
    body[data-mobile-page=memory-games] #seq-share { order: 6; }
    body[data-mobile-page=memory-games] :is(#shell-canvas-wrap, #visual-canvas-wrap) { height: min(220px, calc(100dvh - 340px)) !important; min-height: 0 !important; aspect-ratio: auto; margin: 6px auto; }
    body[data-mobile-page=memory-games] .shell-hint { font-size: 14px; margin: 4px 0; }
    body[data-mobile-page=memory-games] .control-btns { flex-direction: row; gap: 6px; margin-top: 8px; }
    body[data-mobile-page=memory-games] .control-btns .btn { min-height: 44px; flex: 1; padding: 6px; font-size: 14px; }
    /* Search and conversion are the primary surfaces. */
    body[data-mobile-page=fide-ratings] .fide-container { padding: 8px 10px; }
    body[data-mobile-page=fide-ratings] .logo-container { display: none; }
    body[data-mobile-page=fide-ratings] .page-title-row { gap: 6px; flex-wrap: nowrap; margin-bottom: 8px; }
    body[data-mobile-page=fide-ratings] .page-title { font-size: 1.2rem; margin: 0; }
    body[data-mobile-page=fide-ratings] .search-box { padding: 10px; margin: 8px 0; }
    body[data-mobile-page=fide-ratings] .search-box h2 { font-size: 1rem; margin: 0 0 6px; }
    body[data-mobile-page=fide-ratings] .search-input-group { gap: 6px; }
    body[data-mobile-page=fide-ratings] .tabs { display: flex; gap: 6px; margin: 8px 0; }
    body[data-mobile-page=fide-ratings] .tabs .tab { flex: 1; min-width: 0; min-height: 44px; padding: 6px; font-size: 14px; }
    body[data-mobile-page=fide-ratings] :is(.player-card, .player-name, .player-info) { min-width: 0; overflow-wrap: anywhere; }
    body[data-mobile-page=fide-ratings] .players-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-mobile-page=pgn-to-gif] .container { padding: 8px 10px; }
    body[data-mobile-page=pgn-to-gif] header { margin-bottom: 8px; padding: 0; }
    body[data-mobile-page=pgn-to-gif] .page-title-row { flex-wrap: nowrap; gap: 6px; }
    body[data-mobile-page=pgn-to-gif] h1 { font-size: 1rem; line-height: 1.3; margin: 0; }
    body[data-mobile-page=pgn-to-gif] :is(.page-heading-icon, header .description) { display: none; }
    body[data-mobile-page=pgn-to-gif] .two-column-layout { gap: 10px; }
    body[data-mobile-page=pgn-to-gif] .card { padding: 10px; }
    body[data-mobile-page=pgn-to-gif] .card h2 { font-size: 1rem; margin: 0 0 6px; }
    body[data-mobile-page=pgn-to-gif] #pgn-input { height: 112px; min-height: 80px; padding: 8px; }
    body[data-mobile-page=pgn-to-gif] #generate-btn { min-height: 44px; margin-top: 8px; padding: 8px; }
    body[data-mobile-page=pgn-to-gif] #preview-container { min-height: 100px; }
    body[data-mobile-page=pgn-to-gif] .gif-actions-row button { min-height: 44px; padding: 8px; }
    body[data-mobile-page=pgn-to-gif]:not(.mobile-gif-ready) .two-column-layout > .mobile-fold > summary { display: none; }
    body[data-mobile-page=pgn-to-gif].mobile-gif-ready .two-column-layout { display: flex; flex-direction: column; }
    body[data-mobile-page=pgn-to-gif].mobile-gif-ready .two-column-layout > .card { order: -1; }
    body[data-mobile-page=pgn-to-gif].mobile-gif-ready #preview-container { min-height: 0; }
    body[data-mobile-page=pgn-to-gif].mobile-gif-ready #preview-container img { max-height: calc(100dvh - 280px); width: auto; max-width: 100%; object-fit: contain; }
    /* Reading pages remain scrollable, with immediate entry points. */
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .main { padding: 8px 12px 20px; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) :is(.openings-header, .traps-header) { padding: 6px 0; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) :is(.openings-title, .traps-title) { font-size: 1.15rem; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) :is(.openings-subtitle, .traps-subtitle) { display: none; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .page-title-row { flex-wrap: nowrap; gap: 6px; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .page-title-row .tc-share-trigger { width: 44px; min-width: 44px; padding: 8px; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .page-title-row .tc-share-trigger [data-i18n] { display: none; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .training-cta-card { padding: 10px; margin: 8px 0; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .cta-card-desc { display: none; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) .training-cta-card .overall-progress { padding: 6px; margin: 6px 0 0; }
    .openings-container.show-black .mobile-fold:has(.toc-white),
    .openings-container:not(.show-black) .mobile-fold:has(.toc-black) { display: none; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) :is(.openings-tabs, .traps-tabs) { display: flex; flex-wrap: nowrap; gap: 6px; }
    body:is([data-mobile-page=chess-openings], [data-mobile-page=chess-traps]) :is(.training-start-btn, .training-speed-btn) { min-height: 44px; padding: 8px; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) .container { padding: 8px 12px; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) .header-section { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 8px; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) .header-section .logo { width: 44px; height: 44px; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) h1 { font-size: 1.2rem; margin: 0; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) .intro-text { font-size: 14px; margin: 6px 0 12px; }
    body:is([data-mobile-page=rules], [data-mobile-page=notation]) .content-section { padding: 12px; margin-bottom: 12px; min-width: 0; }
    body[data-mobile-page=notation] :is(table, pre, .board-diagram) { max-width: 100%; }
    body[data-mobile-page=notation] .content-section { overflow-x: auto; }
    /* Profile navigation and leaderboard filters before long account summaries. */
    body[data-mobile-page=chess-drills] .drills-subtitle { display: none; }
    body[data-mobile-page=chess-drills] .drills-header { padding: 4px 12px; }
    body[data-mobile-page=chess-drills] .drills-header h1 { font-size: 1.2rem; }
    body[data-mobile-page=chess-drills] .overall-progress { padding: 8px; margin: 6px 0; }
    body[data-mobile-page=chess-drills] #drillsLoginHint { display: none !important; }
    body[data-mobile-page=chess-drills] .drills-tag-pill { min-height: 44px; }
    body[data-mobile-page=profile] .main-container { padding: 10px; }
    body[data-mobile-page=profile] .profile-header { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 8px; gap: 8px; margin-bottom: 8px; text-align: left; }
    body[data-mobile-page=profile] .profile-avatar-large { width: 52px; height: 52px; }
    body[data-mobile-page=profile] .profile-info { min-width: 0; width: auto; }
    body[data-mobile-page=profile] .profile-name { font-size: 1.2rem; }
    body[data-mobile-page=profile] .sidebar-nav { display: none; }
    body[data-mobile-page=profile] .profile-header-rank { grid-column: 1 / -1; width: 100%; padding: 6px; }
    body[data-mobile-page=profile] .profile-badges { justify-content: flex-start; gap: 4px; }
    body[data-mobile-page=profile] .badge { padding: 4px 6px; }
    body[data-mobile-page=profile] .profile-email { margin-bottom: 6px; }
    body[data-mobile-page=profile] .content-wrapper { display: block; }
    body[data-mobile-page=profile] .content-area { min-width: 0; }
    body[data-mobile-page=leaderboard] .leaderboard-header { padding: 8px 12px; }
    body[data-mobile-page=leaderboard] .leaderboard-container { display: flex; flex-direction: column; padding: 0 10px; }
    body[data-mobile-page=leaderboard] .lb-views { order: -1; margin: 6px 0 10px; }
    body[data-mobile-page=leaderboard] .leaderboard-subtitle { margin: 6px 0; font-size: 14px; }
    body[data-mobile-page=tournaments] .header-section { padding: 8px; margin-bottom: 8px; }
    body[data-mobile-page=tournaments] h1 { font-size: 1.1rem; }
    body[data-mobile-page=tournaments] .container { padding: 10px; }
    body[data-mobile-page=tournaments] .tc-chat-toggle { bottom: 12px; right: 8px; }
    /* Compact the actual analysis components; leave React-owned nodes intact. */
    body[data-mobile-page=analysis] main { margin: 4px 8px 12px !important; }
    body[data-mobile-page=analysis] [data-sentry-component=GameAnalysis] { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
    body[data-mobile-page=analysis] [data-sentry-component=Board] { width: min(100%, calc(100dvh - 360px)); margin: 0 auto; padding: 0; }
    body[data-mobile-page=analysis] [data-sentry-component=Board] { grid-column: 2; grid-row: 1; }
    body[data-mobile-page=analysis] [data-sentry-component=Board] > :not([data-sentry-component=EvaluationBar]) { row-gap: 4px; }
    body[data-mobile-page=analysis] [data-sentry-component=PlayerHeader] { min-height: 28px; }
    body[data-mobile-page=analysis] [data-sentry-component=PlayerHeader] .MuiAvatar-root { width: 24px; height: 24px; font-size: 14px; }
    body[data-mobile-page=analysis] .MuiIconButton-root { min-width: 44px; min-height: 44px; padding: 8px; }
    body[data-mobile-page=analysis] .MuiPaper-root { padding: 8px; }
    body[data-mobile-page=analysis] [data-sentry-component=GameAnalysis] > :has(> [data-sentry-component=PanelToolBar]) { grid-column: 1 / -1; grid-row: 2; padding: 4px; gap: 4px; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    body[data-mobile-page=analysis] :is([data-sentry-component=PanelHeader], [data-sentry-component=GameAnalysis] > :has(> [data-sentry-component=PanelToolBar]) > :has(> [data-sentry-component=PanelHeader])) { order: -1; }
    body[data-mobile-page=analysis] [data-sentry-component=GameAnalysis] > :has(> [data-sentry-component=PanelToolBar]) > :has(> [data-sentry-component=PanelHeader]) { padding: 0; margin: 0; width: 100%; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] h5 { font-size: 1rem; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] > :has(button) { width: 100%; flex-basis: 100%; min-width: 0; display: flex; flex-wrap: nowrap; gap: 4px; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] button { min-height: 44px; width: 100%; font-size: 12px; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] button p { font-size: 12px; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] > :has(button) > button { width: calc(50% - 2px); min-width: 0; flex: 1; }
    body[data-mobile-page=analysis] [data-sentry-component=PanelHeader] > button { width: calc(50% - 2px); flex-basis: calc(50% - 2px); }
    body[data-mobile-page=analysis] .MuiFab-root { position: static; grid-column: 1; grid-row: 1; align-self: start; min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; font-size: 0; }
    body[data-mobile-page=analysis] .MuiFab-root svg { display: none; }
    body[data-mobile-page=analysis] .MuiFab-root::after { content: '⚙'; font-size: 24px; }
    /* Chessmon entry: play link visible before the large artwork. */
    body[data-mobile-page=chessmon] .cmg-hero { display: flex; flex-direction: column; }
    body[data-mobile-page=chessmon] .cmg-hero-panel { order: -1; margin-top: 0; padding: 12px; }
    body[data-mobile-page=chessmon] .cmg-hero-img { min-height: 180px; height: 180px; }
    body[data-mobile-page=chessmon] .cmg-lead { font-size: 14px; margin: 8px 0; }
    body[data-mobile-page=chessmon] .cmg-facts { display: none; }
    body[data-mobile-page=chessmon] .cmg-actions { margin: 8px 0; }
    body[data-mobile-page=chessmon-play] { --cm-row-h: 44px; }
    body[data-mobile-page=chessmon-play] .cm-hud-btn { width: 44px; height: 44px; }
    body[data-mobile-page=chessmon-play] .cm-hud-stat { min-height: 44px; }
    body[data-mobile-page=chessmon-play] .cm-start-box { max-height: calc(100dvh - 24px); overflow-y: auto; }
    /* Dialog actions must remain reachable, even after text enlargement. */
    body:is([data-mobile-page=login], [data-mobile-page=register]) .auth-container { padding: 8px 10px; align-items: flex-start; min-height: 0; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .auth-card { padding: 8px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .auth-card h1 { font-size: 1.3rem; margin: 0 0 8px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .auth-separator { margin: 4px 0; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .form-group { margin-bottom: 6px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .form-group label { margin-bottom: 2px; font-size: 14px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .form-group input { min-height: 44px; padding: 8px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) :is(.google-btn,button[type=submit]) { min-height: 44px; padding: 8px; }
    body:is([data-mobile-page=login], [data-mobile-page=register]) .auth-footer { margin-top: 8px; }
    body[data-mobile-page] :is(.modal-dialog, .gameover-modal-card, .game-over-box, .tc-modal) { max-height: calc(100dvh - 24px); overflow-y: auto; padding: 16px; }
    body[data-mobile-page] :is(.modal-actions, .gameover-modal-actions, .tc-modal-actions) { position: sticky; bottom: 0; background: var(--tc-surface, #fff); padding: 6px 0; }
    body[data-mobile-page=durak-friend] .durak-container { padding: 8px 10px; }
    body[data-mobile-page=durak-friend] .lobby-panel { padding: 10px; }
    body[data-mobile-page=durak-friend] .lobby-panel h2 { font-size: 1rem; margin-bottom: 6px; }
    body[data-mobile-page=durak-friend] .lobby-panel input { min-height: 44px; margin-bottom: 6px; }
    body[data-mobile-page=durak-friend] .lobby-btns { margin: 6px 0; }
    body[data-mobile-page=durak-friend] .lobby-divider { margin: 8px 0; }
    body[data-mobile-page=durak-friend] .lobby-panel > p { font-size: 14px; margin: 6px 0; }
    body[data-mobile-page=durak-friend] .btn-primary { min-height: 44px; padding: 8px !important; }
}
/* A short landscape viewport uses the space beside the board. */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    body[data-mobile-page=play-friend] #gameScreen .game-container { display: block !important; }
    body[data-mobile-page=play-friend] #gameScreen .board-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
    body[data-mobile-page=play-friend] #timerSection { grid-column: 1; grid-row: 1; }
    body[data-mobile-page=play-friend] #playBoardWrap { grid-column: 1; grid-row: 2 / 5; }
    body[data-mobile-page=play-friend] #playBoard { width: min(calc(100dvh - 235px), calc(50vw - 24px)) !important; height: min(calc(100dvh - 235px), calc(50vw - 24px)) !important; }
    body[data-mobile-page=play-friend] #status { grid-column: 2; grid-row: 1; }
    body[data-mobile-page=play-friend] .mobile-controls { grid-column: 2; grid-row: 2; }
    body[data-mobile-page=play-friend] .mobile-secondary { grid-column: 2; grid-row: 3; }
    body[data-mobile-page=analysis] [data-sentry-component=GameAnalysis] { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); }
    body[data-mobile-page=analysis] [data-sentry-component=GameAnalysis] > :has(> [data-sentry-component=PanelToolBar]) { grid-column: 3; grid-row: 1; }
    body[data-mobile-page=analysis] [data-sentry-component=Board] { width: min(100%, calc(100dvh - 160px)); }
    body[data-mobile-page=play-bot] .game-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); align-items: start; }
    body[data-mobile-page=play-bot] .board-section { display: contents; }
    body[data-mobile-page=play-bot] #gameBoard { grid-column: 1; grid-row: 1 / 5; width: min(calc(100dvh - 170px), calc(50vw - 24px)) !important; height: min(calc(100dvh - 170px), calc(50vw - 24px)) !important; }
    body[data-mobile-page=play-bot] .sidebar > .mobile-fold:first-child { grid-column: 2; grid-row: 1; }
    body[data-mobile-page=play-bot] #status { grid-column: 2; grid-row: 2; }
    body[data-mobile-page=play-bot] .board-section > .controls { grid-column: 2; grid-row: 3; }
    body[data-mobile-page=play-bot] .mobile-secondary { grid-column: 2; grid-row: 4; align-self: start; }
    body[data-mobile-page=play-bot] .mobile-fold { grid-column: 2; margin: 2px 0; }
    body[data-mobile-page=memory-games] .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 12px; }
    body[data-mobile-page=memory-games] .container > header { grid-column: 1; grid-row: 1; margin: 0; }
    body[data-mobile-page=memory-games] .mobile-picker { grid-column: 2; grid-row: 1; margin: 0; }
    body[data-mobile-page=memory-games] .game-area.active { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 4px 12px; }
    body[data-mobile-page=memory-games] #sequence-game.active { display: grid; }
    body[data-mobile-page=memory-games] :is(.memory-grid,.simon-board,#shell-canvas-wrap,#visual-canvas-wrap) { grid-column: 1; grid-row: 1 / 5; width: min(100%, calc(100dvh - 155px)); margin: 0 auto; }
    body[data-mobile-page=memory-games] .difficulty-selector { grid-column: 2; }
    body[data-mobile-page=memory-games] .mobile-difficulty-picker { grid-column: 2; }
    body[data-mobile-page=memory-games] .stats { grid-column: 2; }
    body[data-mobile-page=memory-games] .control-btns { grid-column: 2; }
    body[data-mobile-page=memory-games] :is(#shell-canvas-wrap,#visual-canvas-wrap) { height: min(220px, calc(100dvh - 155px)) !important; }
}