/* Trainer readability. Remove this file's HTML link to restore the previous layout. */
.coach-text,
.coach-move-note {
    font-size: 1.125rem;
    line-height: 1.75;
}
.coach-title { font-size: .875rem; }
.coach-subtext { font-size: .875rem; line-height: 1.6; color: #b2bfd0; }
.coach-content:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
    /* SVG markers scale with stroke width. Keep guides and annotations proportional
       to the phone board, including smaller boards in landscape. */
    #myBoard .cm-chessboard .arrow .arrow-line { stroke-width: 1% !important; }
    .main-content { padding-top: 0; padding-bottom: 16px; }
    .main-layout { flex-direction: column; align-items: center; margin-top: 76px; padding-inline: 8px; gap: 12px; }
    .board-frame { width: 100%; max-width: 520px; flex: 0 0 auto; gap: 8px; }
    .board-frame > .coach-bubble {
        height: clamp(140px, 19svh, 180px);
        margin: 0;
        padding: 12px;
        gap: 10px;
    }
    .coach-icon { width: 28px; height: 28px; }
    .coach-text, .coach-move-note { font-size: 1.0625rem; line-height: 1.7; }
    .coach-content { gap: 4px; scrollbar-gutter: auto; }
    .board-status-strip { min-height: 28px; gap: 6px; }
    .board-status-pill { font-size: 11px; min-width: 0; padding: 4px 8px; }
    .board-status-pill.muted { flex: 1; overflow: hidden; }
    .board-status-pill.muted span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .board-eval-wrapper {
        width: min(100%, max(220px, calc(100svh - 340px)));
        align-self: center;
        flex: 0 0 auto;
        gap: 4px;
    }
    .board-eval-wrapper:has(.eval-hidden) { gap: 0; }
    .board-frame > .bottom-controls {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        margin: 0;
        order: initial;
    }
    .board-frame > .bottom-controls > :is(.control-btn, .control-btn-wrapper) { width: 100%; min-width: 0; height: 44px; }
    .board-frame > .bottom-controls .control-btn { min-height: 44px; }
    .board-frame > .bottom-controls .control-btn-wrapper { display: flex; justify-content: center; }
    .board-frame > .bottom-controls #settingsBtn { width: 44px; min-width: 44px; flex: 0 0 44px; }
    .board-frame > .bottom-controls .hint-text { display: none; }
    .control-panel { width: 100%; max-width: 520px; min-height: 0; padding: 12px; }
}

/* Short landscape screens keep the coach beside the board, with controls below. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
    .main-layout { padding-block: 0; }
    .board-frame {
        display: grid;
        grid-template-columns: minmax(140px, min(42vw, calc(100svh - 180px))) minmax(0, 1fr);
        max-width: 920px;
        align-items: start;
        column-gap: 16px;
    }
    .board-frame > .board-status-strip { grid-column: 1; grid-row: 1; }
    .board-frame > .board-eval-wrapper { grid-column: 1; grid-row: 2; width: 100%; }
    .board-frame > .coach-bubble { grid-column: 2; grid-row: 1 / 3; height: calc(100svh - 140px); }
    .board-frame > .bottom-controls { grid-column: 1 / -1; grid-row: 3; }
    .control-panel { max-width: 920px; }
}

/* Practice modes: a clear status card rather than an empty, oversized overlay. */
#myBoard .arrow-practice-hint .arrow-line { stroke: #00c8ff !important; opacity: .8; }
#myBoard .arrow-practice-hint .arrow-head { fill: #00c8ff !important; }
.mode-overlay-panel { background: var(--bg-surface, #141a22); border-radius: 16px; }
.overlay-header { padding: 16px; }
.overlay-back-btn { width: 44px; height: 44px; flex-shrink: 0; color: #c1d0e2; }
html[dir="ltr"] .overlay-back-btn i { transform: rotate(180deg); }
.overlay-body { flex: 0 0 auto; padding: 20px; gap: 16px; }
.ta-timer-text, .drill-ring-text { white-space: nowrap; font-variant-numeric: tabular-nums; }
.drill-progress-label { position: absolute; inset-inline: 0; bottom: 22px; text-align: center; font-size: 12px; color: #b2bfd0; }
.drill-ring-text { font-size: 18px; width: 100%; text-align: center; }
.ta-stat-lbl, .drill-stat-lbl { color: #b2bfd0; font-size: 12px; }
.practice-assistance { margin: 0; padding: 12px; width: 100%; box-sizing: border-box; color: #c1d0e2; background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.14); border-radius: 10px; font-size: 14px; line-height: 1.6; }
.practice-assistance[data-assisted] { color: #6ee7ff; border-color: rgba(0,200,255,.45); }
.assistance-active { display: none; }
.practice-assistance[data-assisted] .assistance-default { display: none; }
.practice-assistance[data-assisted] .assistance-active { display: inline; }
html[lang="ar"] .practice-assistance [lang="en"], html:not([lang="ar"]) .practice-assistance [lang="ar"] { display: none; }
.ta-btn-stop { background: #6c2735 !important; box-shadow: none !important; }

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
    .board-frame > .mode-overlay-panel { position: relative; inset: auto; width: 100%; height: auto; transform: none; overflow: visible; border: 1px solid var(--border, #293445); transition: none; }
    /* Match desktop overlay behavior: leave mode selection until the Back
       action, while keeping fixed result dialogs available. */
    .main-layout:has(.board-frame > .mode-overlay-panel.active) > .control-panel { display: contents; }
    .main-layout:has(.board-frame > .mode-overlay-panel.active) > .control-panel > :not(.mode-result-modal) { display: none !important; }
    .board-frame > .mode-overlay-panel:not(.active) { display: none !important; }
    .board-frame:has(> .mode-overlay-panel.active) > .coach-bubble { display: none; }
    .board-frame:has(> .mode-overlay-panel.active) > .board-eval-wrapper { width: min(100%, max(168px, calc(100svh - 390px))); }
    .board-frame > .mode-overlay-panel .overlay-header { min-height: 44px; padding: 6px 10px; gap: 10px; }
    .board-frame > .mode-overlay-panel .overlay-body { padding: 10px; gap: 8px; }
    .board-frame > .mode-overlay-panel .ta-timer-ring,
    .board-frame > .mode-overlay-panel .drill-progress-ring { width: 64px; height: 64px; margin: 0; }
    .board-frame > .mode-overlay-panel .ta-timer-text { font-size: 19px; letter-spacing: 0; }
    .board-frame > .mode-overlay-panel .drill-ring-text { font-size: 13px; }
    .board-frame > .mode-overlay-panel .drill-progress-label { bottom: 9px; font-size: 10px; }
    .board-frame > .mode-overlay-panel .overlay-body { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; }
    .board-frame > .mode-overlay-panel :is(.drill-line-select, .practice-assistance, .overlay-start-btn, .ta-leaderboard) { grid-column: 1 / -1; }
    .board-frame > .mode-overlay-panel :is(.ta-stats-row, .drill-stats-grid) { gap: 6px; }
    .board-frame > .mode-overlay-panel :is(.ta-stat, .drill-stat) { min-width: 0; padding: 6px 2px; gap: 2px; border: 0; background: transparent; }
    .board-frame > .mode-overlay-panel :is(.ta-stat-val, .drill-stat span:nth-child(2)) { font-size: 18px; }
    .board-frame > .mode-overlay-panel :is(.ta-stat-lbl, .drill-stat-lbl) { font-size: 11px; text-align: center; }
    .board-frame > .mode-overlay-panel .drill-stat i { display: none; }
    .board-frame > .mode-overlay-panel .practice-assistance { padding: 6px 8px; font-size: 13px; }
    .board-frame > .mode-overlay-panel.in-game .ta-leaderboard { display: none; }
    #timeAttackPanel.in-game .overlay-header { padding-inline-end: 62px; }
    .board-frame > #timeAttackPanel.in-game #taStartBtn { position: absolute; inset-inline-end: 10px; top: 6px; width: 44px; height: 44px; padding: 0; font-size: 0; }
    .board-frame > #timeAttackPanel.in-game #taStartBtn::before { content: '\f04d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 16px; }
}
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
    .board-frame > .mode-overlay-panel { grid-column: 2; grid-row: 1 / 3; }
    .board-frame:has(> .mode-overlay-panel.active) > .board-eval-wrapper { width: 100%; }
}