/* Shared viewport budget for traps, openings and drills. */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    body:has(#trainingSection:not([style*="none"])) #nav-placeholder,
    body:has(#trainingSection:not([style*="none"])) .tc-chat-toggle { display: none !important; }
    body:has(#trainingSection:not([style*="none"])) { padding-top: 0 !important; }
}
@media (max-width: 700px) {
    .training-section { padding: 8px 12px 16px; }
    .training-header { flex-wrap: nowrap; gap: 8px; margin-bottom: 6px; }
    .training-title { font-size: 1.15rem; margin: 0; min-width: 0; }
    .training-header-progress { margin-left: auto; margin-right: 0; gap: 4px; min-width: 68px; flex: 1; }
    .training-header-progress-track { width: 48px; }
    .training-close-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; }
    .training-mode-select.hidden-mobile { display: none; }
    .training-opening-info { gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
    .training-opening-name { font-size: 1rem; overflow-wrap: anywhere; }
    .training-opening-color { font-size: .75rem; }
    .training-board-layout { gap: 8px; }
    .training-board-wrap {
        width: min(100%, calc(100svh - 320px));
        width: min(100%, calc(100dvh - 320px));
        max-width: 400px; margin: 0 auto; min-width: 0;
    }
    .training-board { width: 100%; max-width: none; }
    .training-side-panel { min-height: 0; gap: 6px; justify-content: flex-start; }
    .training-stats-row { gap: 8px; }
    .training-stat { flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 6px; }
    .training-stat-val { font-size: 1rem; }
    .training-stat-label { font-size: .7rem; }
    .training-status { padding: 6px 8px; font-size: .9rem; }
    .training-progress-bar-wrap { margin: 0; }
    .training-buttons { gap: 5px; }
    .training-btn { min-height: 44px; padding: 8px 6px; font-size: .85rem; flex: 1; min-width: 0; }
    .training-btn.fav-btn { flex: 0 0 44px; }
    .auto-advance-toggle { min-height: 32px; margin: 0; }
    .training-description { margin: 0 0 6px; font-size: .85rem; color: var(--tc-ink-soft); }
    .training-description summary { cursor: pointer; min-height: 32px; display: list-item; }
    .training-description .training-opening-desc { margin: 4px 0 8px; }
    .training-speed-hud { padding: 6px; margin-bottom: 6px; gap: 10px; }
    .training-speed-hud .speed-timer { font-size: 1.5rem; }
    .drills-header { padding: 12px 12px 8px; }
    #drillsLoginHint { padding: 6px 10px !important; }
    #drillsLoginHint [data-i18n="chessDrills.loginHint.desc"] { display: none; }
    .drills-tags { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
    .drills-tag-pill { flex-shrink: 0; min-height: 36px; }
    .drills-toolbar { gap: 8px; margin-bottom: 8px; }
    .drills-search { font-size: 16px; }
    .drills-filter-btn { min-height: 44px; }
}
/* Landscape phones use the width beside the board for controls. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 950px) {
    .training-section { padding: 6px 12px; }
    .training-header { margin-bottom: 4px; }
    .training-title { margin: 0; font-size: 1rem; }
    .training-opening-info { margin-bottom: 4px; }
    .training-board-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .training-board-wrap { width: min(100%, calc(100dvh - 150px)); margin: 0 auto; }
    .training-board { width: 100%; }
    .training-side-panel { min-height: 0; gap: 5px; }
    .training-btn { min-height: 44px; padding: 8px 6px; }
    .training-mode-select.hidden-mobile { display: none; }
}