@media (max-width: 768px) and (orientation: portrait) {

    /* Keep startup/status text compact enough for portrait controls. */
    #DGTClockText {
        font-size: 1.1rem !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    /* Also slightly increase the clock status text */
    #DGTClockStatus {
        font-size: 0.9rem !important;
        /* Increased from 0.7rem */
    }

    .card-header {
        font-size: 0.7rem !important;
    }

    h4,
    h5 {
        font-size: 0.7rem !important;
    }

    #pgn,
    .gameMoves,
    .bookMoves {
        font-size: 0.65rem !important;
    }

    /* FIXED SIZING FOR BOARD STATUS SQUARE - KEEP THIS */
    #BoardStatus {
        /* Force fixed size for the board square regardless of window width */
        font-size: 16px !important;
        /* Absolute pixel size instead of relative rem */
        line-height: 1 !important;
        /* Consistent line height */
        max-height: 16px !important;
        /* Constrain maximum height */
        max-width: 16px !important;
        /* Constrain maximum width */
        display: inline-block !important;
        /* Ensure it's a block element for sizing */
        transform: none !important;
        /* Remove any scaling transforms */
        vertical-align: middle !important;
        /* Align with text */
    }

    /* FIXED Player indicator text - prevent stacking/crushing */
    #sidetomove {
        font-size: 1.2rem !important;
        /* Slightly smaller than before */
        font-weight: bold !important;
        display: inline !important;
        /* Change from inline-flex to inline */
        white-space: nowrap !important;
        /* Prevent text wrapping */
        width: auto !important;
        /* Remove any fixed width constraints */
        vertical-align: middle !important;
        margin-right: 5px !important;
        /* Add space between text and indicator */
    }

    /* Ensure the boardinfo container has enough width */
    .boardinfo {
        white-space: nowrap !important;
        min-width: 100px !important;
        /* Ensure minimum width */
        overflow: visible !important;
        position: absolute !important;
        left: 10px !important;
        top: 100% !important;
        transform: translateY(-50%) !important;
        z-index: 2 !important;
    }

    .nav-pills .nav-link {
        padding: 5px 8px !important;
        font-size: 0.65rem !important;
    }

    /* Hide button text on small screens */
    .btn-text {
        display: none;
    }


    /* Ensure buttons have appropriate size */
    .btn-group .btn {
        padding: 0.2rem 0.3rem;
    }

    /* Smaller icons in buttons for portrait mode */
    .fa-lg {
        font-size: 1.2em !important;
    }

    /* Move list height */
    .scroll_movelist {
        height: 20vh !important;
        overflow: auto;
        margin-bottom: 1vh;
    }

    /* Chessboard container fixes */
    .svg-container {
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        padding-bottom: 100% !important;
    }

    /* Chessboard positioning fixes */
    .svg-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Fix for promotion overlay */
    .promotion-overlay {
        width: 100% !important;
        height: 100% !important;
    }

    /* Ensure buttons don't appear in chessboard */
    .board-container .btn,
    #board .btn {
        display: none !important;
        /* Hide buttons in chessboard */
    }

    /* Ensure tabs have consistent layout */
    .tab-pane {
        display: none !important;
    }

    .tab-pane.active,
    .tab-pane.show.active {
        display: block !important;
    }

    /* Container layout for portrait mode */
    .container-fluid {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Main rows for portrait adjustment */
    .container-fluid>.row {
        display: flex;
        flex-direction: column;
    }

    /* Correct column sizes for portrait */
    .container-fluid>.row>.col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Fix for chessboard in any tab context */
    #board_panel {
        margin-bottom: 10px !important;
    }

    /* Agregar espacio entre primera columna (tablero) y segunda columna (reloj) */
    .container-fluid>.row>.col:last-child>.container>.row:first-child {
        margin-top: 20px !important;
    }

    /* Consistent layout for all tabs */
    .tab-content,
    .tab-pane,
    #book,
    #engine,
    #games {
        width: 100% !important;
    }

    /* Prevent layout shift when switching tabs */
    #board {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000;
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

    /* Improved tab display in portrait mode */
    #data {
        margin-top: 5px !important;
    }

    /* CRITICAL FIX: Make controls row compact */
    #boardcontrol .row:nth-child(2) {
        position: relative !important;
        /* For absolute positioning reference */
        min-height: 30px !important;
        /* Kept original height */
        max-height: 30px !important;
        /* Kept original height */
        width: 100% !important;
        padding-right: 0 !important;
        /* Remove padding that could affect alignment */
        padding-left: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        /* Ensure overflow is visible for absolute positioning */
    }

    /* Position the download button container to match top buttons */
    #boardControlButtons {
        position: absolute !important;
        right: 10px !important;
        /* Fixed distance from right edge - matches top buttons */
        top: 75% !important;
        /* ADJUSTED: moved further down for better alignment with "White" text */
        transform: translateY(-50%) !important;
        /* Center vertically */
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 2 !important;
        /* Ensure it stays on top */
    }

    /* Style the download button */
    #uploadBtn,
    #downloadBtn {
        background-color: #17a2b8 !important;
        /* Ensure button is blue */
        font-size: 0.8rem !important;
        padding: 0.2rem 0.4rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* Reset any other positioning that might interfere */
    .pull-right {
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reduce space below chessboard */
    #board_panel .card-body {
        padding-bottom: 5px !important;
    }

    /* Fix checkbox alignment */
    input[type="checkbox"] {
        transform: scale(1) !important;
        margin-right: 4px !important;
        vertical-align: middle !important;
    }

    /* Make label text properly sized */
    label {
        font-size: 0.8rem !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }

    /* Ensure proper height of control area */
    #boardcontrol .col {
        padding: 0 !important;
        min-height: 30px !important;
        max-height: 30px !important;
        display: flex !important;
        align-items: center !important;
    }

    #boardControlButtons {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        margin-top: 5px !important;
    }

    #boardControlButtons button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 0.8rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;
        white-space: nowrap;
    }

    #btn-mute {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        padding: 0 !important;
        flex: 0 0 38px !important;
    }

    #btn-mute span {
        font-size: 14px !important;
    }

    .btn-text {
        display: none !important;
    }

}

@media (max-width: 768px) {
    .analysis-line-compact {
        font-size: 0.8rem;
        gap: 4px;
        flex-wrap: nowrap;
    }
    
    .score-display {
        font-size: 0.9rem;
        padding: 2px 6px;
        min-width: 45px;
    }
    
    .first-move {
        font-size: 1rem;
        padding: 1px 4px;
    }
    
    .continuation-moves {
        font-size: 0.75rem;
    }
    
    .depth-display {
        font-size: 0.7rem;
        padding: 1px 4px;
    }
    
    #pv_output .list-group-item {
        padding: 4px 6px;
        margin-bottom: 2px;
    }
}