/* ---------------------------------------------------------------------------
   MOBILE SHELL

   Below this width index.html stops being a sidebar + board + move list laid
   out side by side and becomes three tabbed screens, driven by
   body[data-mtab] from game-mobile.js. The board owns the whole viewport; the
   move list and the settings sidebar live behind the bottom tab bar instead of
   being stacked above the board in one very long scroll.

   The width here is the same one game-mobile.js watches via MOBILE_QUERY —
   change one and change the other.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {

    body {
        padding: 8px;
        /* Clear the fixed tab bar, plus the home indicator under it. */
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        min-height: 100svh;
        /* Kills the 300ms double-tap-to-zoom delay without disabling pinch. */
        touch-action: manipulation;
        -webkit-text-size-adjust: 100%;
    }


    .mobile-only { display: inline-flex !important; }

    /* --- Tab bar ---------------------------------------------------------- */

    #mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1500;
        background: #202020;
        border-top: 1px solid #3a3a3a;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.45);
    }

    #mobile-tabbar .mtab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: 56px;
        padding: 6px 0;
        background: transparent;
        border: none;
        border-top: 3px solid transparent;
        color: #888;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
    }

    #mobile-tabbar .mtab .mtab-icon { font-size: 20px; line-height: 1; }
    #mobile-tabbar .mtab.active { color: #fff; border-top-color: #e74c3c; }
    #mobile-tabbar .mtab:active { background: #2a2a2a; }

    /* --- Which tab is showing --------------------------------------------- */

    #main-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    /* Board before settings whichever side the desktop sidebar is pinned to. */
    #main-layout, #main-layout.sidebar-right { flex-direction: column; }
    #game-area { order: 1; width: 100%; max-width: 100%; gap: 8px; }
    #sidebar   { order: 2; }

    body.is-mobile[data-mtab="moves"] #sidebar { display: none; }

    /* Board is for playing: Score replaces the move list/history controls.
       Moves keeps the history buttons so a position can still be reviewed. */
    body.is-mobile[data-mtab="board"] #movelist-column,
    body.is-mobile[data-mtab="board"] #history-nav { display: none !important; }
    body.is-mobile[data-mtab="moves"]  #board { display: none; }
    body.is-mobile[data-mtab="settings"] #game-area { display: none; }

    /* Reuse the real score panel rather than duplicating game state. On Board,
       hide every other sidebar panel; on Settings, Players remains and Score
       moves out. */
    body.is-mobile[data-mtab="board"] #sidebar {
        display: flex;
        background: transparent !important;
        box-shadow: none;
        border-radius: 6px;
        margin-top: 8px;
    }

    body.is-mobile[data-mtab="board"] #sidebar > :not(#score-panel),
    body.is-mobile[data-mtab="settings"] #score-panel {
        display: none;
    }

    body.is-mobile[data-mtab="board"] #score-panel {
        width: 100%;
        flex-grow: 0 !important;
        border: 1px solid #444;
        border-radius: 6px;
    }

    body.is-mobile[data-mtab="board"] #score-panel .panel-header {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
    }

    body.is-mobile[data-mtab="board"] #score-panel .panel-content {
        padding: 8px;
    }

    body.is-mobile[data-mtab="board"] #material-list {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 5px;
        padding: 0;
    }

    body.is-mobile[data-mtab="board"] #material-list > div {
        margin-bottom: 0 !important;
        padding: 6px 8px;
    }

    /* --- Board ------------------------------------------------------------ */

    /* One definite edge length for both axes: as wide as the screen allows, or
       as tall as the space the visible status, score, and tab bars leave over,
       whichever is smaller. --mobile-chrome is measured and published by
       game-mobile.js; the fallback covers the moment before it first runs. */
    body.is-mobile {
        --board-edge: max(260px, min(100vw - 16px, 100vh - var(--mobile-chrome, 210px)));
        --board-edge: max(260px, min(100vw - 16px, 100svh - var(--mobile-chrome, 210px)));
    }

    #board-column { width: 100%; gap: 8px; }

    #board {
        /* !important throughout: buildBoardDOM() writes the desktop pixel grid
           straight onto the element as inline styles. */
        box-sizing: border-box !important;
        width: var(--board-edge) !important;
        height: var(--board-edge) !important;
        grid-template-columns: repeat(var(--board-size), 1fr) !important;
        grid-template-rows: repeat(var(--board-size), 1fr) !important;
        border-width: 4px;
        margin: 0 auto;
        box-shadow: 0 8px 24px rgba(0,0,0,0.5);
        /* Never scroll or zoom the page out from under a piece being dragged. */
        touch-action: none;
    }

    /* Pieces and analysis icons are sized in px by updateVisuals() against the
       desktop square size. --sq-px is the real one, published by
       game-mobile.js, so they shrink with the board instead of overflowing. */
    .square { font-size: calc(var(--sq-px, 40px) * 0.8); }

    .square img.piece {
        width: 92% !important;
        height: 92% !important;
    }

    .square span.piece {
        width: auto !important;
        height: auto !important;
        font-size: calc(var(--sq-px, 40px) * 0.85) !important;
    }

    .analysis-icon {
        width: calc(var(--sq-px, 40px) * 0.42) !important;
        height: calc(var(--sq-px, 40px) * 0.42) !important;
    }

    .square.drop-target::before { box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9); }

    /* 11px labels on a 27px square sit right across the piece. Scale them with
       the board and thin them out so they read as a guide, not as clutter. */
    .coord-rank, .coord-file {
        font-size: max(7px, calc(var(--sq-px, 40px) * 0.3));
        color: rgba(255, 255, 255, 0.55);
    }
    .coord-rank { top: 1px; left: 2px; }
    .coord-file { bottom: 1px; right: 2px; }

    /* --- Status bar and history nav --------------------------------------- */

    #status-bar-container {
        width: 100% !important;
        max-width: 100%;
        min-height: 48px;
        height: auto;
        padding: 6px 8px;
        margin-bottom: 0;
        gap: 8px;
    }

    #status-text {
        font-size: 14px;
        min-width: 0;
        flex: 1 1 auto;
        /* One line, always: a wrapping status shifts the bar's height, which
           resizes the board under the player's finger. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Six icons and a status message have to share ~400px. The buttons keep a
       44px tap height but give back width, so the message is not reduced to
       "BLACK's T…". */
    .status-actions { gap: 0; flex: 0 0 auto; }

    .status-actions .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        font-size: 19px;
        line-height: 1;
        padding: 4px 2px;
    }

    /* On a 375px screen six buttons at 40px still crowd the message out. */
    @media (max-width: 400px) {
        .status-actions .icon-btn { min-width: 36px; font-size: 17px; }
        #status-text { font-size: 13px; }
    }

    /* The caption sits above the button and would be clipped by the viewport
       edge, and there is no hover on touch to trigger it anyway. */
    .icon-btn::after { display: none; }

    #btn-annotate.active {
        background: #e74c3c;
        color: #fff;
        border-radius: 6px;
    }

    #history-nav {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        margin-top: 0;
    }

    #history-nav .icon-btn {
        flex: 1;
        padding: 10px 0;
        font-size: 18px;
    }

    #history-nav .history-info { font-size: 12px; flex: 2; text-align: center; }

    /* --- Move list -------------------------------------------------------- */

    #movelist-column { display: contents; }

    #log-area {
        width: 100% !important;
        max-width: 100%;
        height: 240px;
        box-sizing: border-box;
        /* Stop a flick at the end of the list from bouncing the whole page. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* On its own tab the list gets everything the board would have had. */
    body.is-mobile[data-mtab="moves"] #log-area {
        height: calc(100vh - var(--mobile-chrome, 210px)) !important;
        height: calc(100svh - var(--mobile-chrome, 210px)) !important;
    }

    .move-row { grid-template-columns: 34px 1fr 1fr; gap: 4px; }

    .move-item {
        font-size: 14px;
        padding: 10px 6px;   /* 40px tall — a comfortable tap target */
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .move-piece-icon { width: 20px; height: 20px; }

    /* --- Settings sidebar ------------------------------------------------- */

    #sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 8px;
        overflow: hidden;
        overscroll-behavior: contain;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    .accordion-header, .panel-header {
        padding: 16px 16px;
        font-size: 15px;
        background: #2a2a2a;
        border-bottom: 1px solid #333;
        min-height: 52px;
        box-sizing: border-box;
    }

    .accordion-content, .panel-content { padding: 16px; }

    /* Label above control, both full width: side-by-side leaves a select about
       120px wide, which is unusable with a thumb. */
    .control-row {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 18px;
    }

    .control-row label {
        margin-bottom: 8px;
        font-size: 14px;
        color: #ddd;
    }

    .control-row select,
    .control-row input[type=range],
    .control-row input[type=color],
    .control-row input[type=text],
    .control-row input[type=number],
    .control-row input[type=password] {
        width: 100%;
        height: 44px;
        /* 16px or larger, or iOS Safari zooms the page in on focus. */
        font-size: 16px;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* Sliders carry a value readout as a third child, which the column layout
       strands on a line of its own below the track. Put it back on the label's
       row and let the track span the full width underneath. */
    .control-row:has(> input[type=range]) {
        flex-flow: row wrap;
        align-items: center;
    }
    .control-row:has(> input[type=range]) > label { flex: 1 1 auto; }
    .control-row:has(> input[type=range]) > span {
        flex: 0 0 auto;
        margin-bottom: 8px;
        text-align: right;
        font-size: 14px !important;
        color: #fff;
    }
    .control-row:has(> input[type=range]) > input[type=range] {
        order: 3;
        flex: 1 0 100%;
    }

    /* A checkbox is the one control that should stay on the label's row. */
    .control-row:has(> input[type=checkbox]) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .control-row:has(> input[type=checkbox]) label { margin-bottom: 0; }

    input[type=checkbox] {
        width: 22px !important;
        height: 22px;
        min-height: 22px;
        flex: 0 0 auto;
        accent-color: #e74c3c;
    }

    .p-setup-row { padding: 10px 12px; margin-bottom: 8px; }
    .p-setup-row select { height: 40px; font-size: 16px; }



    /* Reordering panels needs a drag the browser only offers with a mouse. */
    .drag-handle { display: none !important; }

    /* These position selectors control the desktop flex layout. Mobile has a
       fixed tab shell, so showing them suggests changes that cannot apply. */
    .desktop-layout-controls { display: none; }

    button, .icon-btn, select { touch-action: manipulation; }
    button, .icon-btn { min-height: 44px; min-width: 44px; }

    .btn-small { min-height: 38px; padding: 8px 12px; font-size: 13px; }

    /* --- Editor palette --------------------------------------------------- */

    #palette-area { padding: 10px !important; }
    #piece-palette { gap: 8px !important; }
    .palette-item { width: 46px; height: 46px; }

    /* --- Modals ----------------------------------------------------------- */

    .modal-content {
        width: calc(100% - 24px);
        max-height: 85svh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px;
    }

    .modal-header { font-size: 20px; }

    /* Promotion is a mid-move interruption, so make the choices thumb-sized. */
    #promotion-options { gap: 12px !important; }
    #promotion-options > * { min-width: 64px; min-height: 64px; }

}

/* Landscape phones have height to spare nowhere and width everywhere: put the
   board beside its controls rather than stacked under them. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {

    /* !important because updateTheme() writes display straight onto the
       element for the "Show Title" setting, and inline beats any stylesheet. */

    /* Squeeze the bar down — every pixel here is a pixel off the board. */
    #mobile-tabbar .mtab { min-height: 44px; padding: 2px 0; }
    #mobile-tabbar .mtab .mtab-icon { font-size: 16px; }
    #mobile-tabbar .mtab .mtab-label { font-size: 10px; }

    body { padding: 6px; padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }

    /* Height is the binding constraint in landscape, and the board has to
       clear the fixed tab bar as well as the body padding. */
    body.is-mobile {
        --board-edge: max(200px, min(100vw - 360px, 100svh - 62px));
    }

    body.is-mobile[data-mtab="board"] #board-column {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    body.is-mobile[data-mtab="board"] #status-bar-container {
        width: 170px !important;
        flex-direction: column;
        height: auto;
    }

    body.is-mobile[data-mtab="board"] #status-bar-container { order: 1; }
    body.is-mobile[data-mtab="board"] #board { order: 2; }

    body.is-mobile[data-mtab="board"] .status-actions { flex-wrap: wrap; justify-content: center; }
}