/* ==========================================
   ChessAPit - Landscape Layout
   קובץ: mystyle-landscape.css
   תיאור: פריסה לרוחב (landscape) למובייל ולדסקטופ
   ========================================== */

/* ========================================
   הפעלה רק במצב landscape
   ======================================== */

/* Container principal - מעבר לפריסה אופקית */
#chessContainer.layout-landscape {
    /* שמירת התנהגות בסיסית */
    position: relative;
    display: block; /* לא flex! aftbrd הוא absolute */

    /* משתני CSS דינמיים - יעודכנו ב-JS */
    --board-width: 400px;
    --board-height: 400px;

    /* יישור לשמאל - כמו בפריסה לאורך */
    margin: 0; /* ביטול margin - צמוד לשמאל */
    max-width: none; /* ביטול הגבלת רוחב */

    /* גובה מוגדר ב-JS */
    overflow: visible; /* וודא שלא חותך תוכן */

    /* transition חלק למעבר בין מצבים */
    transition: width 0.7s ease-in-out, height 0.7s ease-in-out;
}

/* transition גם ל-container רגיל */
#chessContainer {
    transition: width 0.7s ease-in-out, height 0.7s ease-in-out;
}

/* ========================================
   החלק השמאלי - הלוח והכותרות
   ======================================== */

/* שמירה על מבנה הלוח - ללא שינויים */
#chessContainer.layout-landscape #explanationBox {
    /* נשאר כמו במצב portrait - בתוך flow */
    position: relative;
    margin: 0; /* ביטול margins */
}

#chessContainer.layout-landscape #boardWrapper {
    /* נשאר כמו במצב portrait - בתוך flow */
    position: relative;
    margin: 0; /* ביטול margins */
}

/* explanationBox - שמירה על רוחב הלוח */
#chessContainer.layout-landscape #explanationBox {
    width: 100% !important;
    max-width: var(--board-width);
    box-sizing: border-box;
}

/* boardWrapper - פינות ישרות תמיד (זה הלוח!) */
#chessContainer.layout-landscape #boardWrapper {
    border-radius: 0 !important;
    width: var(--board-width, 100%); /* רוחב מפורש מה-JS */
    height: var(--board-width, auto); /* גובה זהה לרוחב - ריבוע */
    box-sizing: border-box; /* כולל border ו-padding בחישוב */

    /* וידוא flex layout תקין */
    display: flex;
    justify-content: center;
    align-items: center;

    /* שמור על aspect-ratio כגיבוי */
    aspect-ratio: 1 / 1;

    /* ביטול overflow */
    overflow: visible;

    transition: width 0.7s ease-in-out, height 0.7s ease-in-out;
}

/* ========================================
   aftbrd - מעבר לצד ימין
   ======================================== */

#chessContainer.layout-landscape #aftbrd {
    /* מיקום absolute יחסית ל-chessContainer */
    position: absolute;
    right: auto; /* לא מימין - משתמשים ב-left */
    top: 0;
    left: 0; /* יעודכן דינמית ב-JS - כולל מרווח 1px */
    z-index: 1; /* נמוך מאוד - כדי שהמהלך הנע (10100) יהיה מעליו */

    /* גדלים - יעודכנו דינמית ב-JS */
    width: calc(var(--board-width) * 0.75);
    height: var(--board-height);

    /* פריסה פנימית - עמודה */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    /* ביטול margin/padding שעלולים להפריע */
    margin: 0;
    padding: 0;

    /* עיגול פינות - רק בצד ימין */
    border-radius: 0 12px 12px 0;

    /* גבולות - רק תחתון במצב landscape */
    border-top: none !important;
    border-bottom: 1px solid var(--board-light);
    border-left: none;
    border-right: none;

    /* פינה מעוגלת רק מימין למטה */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 12px !important;

    /* transition חלק - יחסית איטי למעבר חלק */
    transition: all 0.7s ease-in-out;
}

/* ========================================
   toexplor (#output) - בחלק העליון
   ======================================== */

#chessContainer.layout-landscape #toexplor {
    /* תופס את כל המקום הפנוי */
    flex: 1 1 auto;
    width: 100% !important; /* override את ה-80% מ-mystyle-tree.css */
    max-width: 100% !important;

    /* גלילה אנכית - רק כשצריך */
    overflow-y: auto;
    overflow-x: hidden;

    /* box-sizing חשוב למניעת overflow */
    box-sizing: border-box;

    /* ביטול margin/padding שעלולים להפריע */
    margin: 0;
    padding: 0; /* ביטול padding - output יטפל בזה */

    /* transition חלק */
    transition: width 0.7s ease-in-out, max-width 0.7s ease-in-out;
}

#chessContainer.layout-landscape #output {
    /* שמירה על עיצוב קיים */
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    /* ביטול margin כדי למנוע גלילה מיותרת */
    margin: 0 !important;

    /* פינות מעוגלות - רק מלמעלה מימין */
    border-radius: 0 12px 0 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* ========================================
   gameInfo - מתחת, כפתורים בשורה
   ======================================== */

#chessContainer.layout-landscape #gameInfo {
    /* פריסה אופקית - כמו portrait אבל בשורה */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap; /* כל הכפתורים בשורה אחת */

    /* רווחים - זהה לפריסה לאורך */
    gap: 4px;
    padding: 4px;

    /* גובה אוטומטי */
    height: auto;
    flex: 0 0 auto; /* לא גדל */

    /* רוחב מלא */
    width: 100%;
    box-sizing: border-box;

    /* ביטול margin */
    margin: 0;

    /* מניעת overflow עם scale-down אוטומטי */
    overflow: visible; /* לא hidden - נתן ל-flex לעבוד */

    /* scaling אוטומטי אם הכפתורים גדולים מדי */
    transform-origin: left center;

    /* transition חלק */
    transition: flex-direction 0.7s ease-in-out, gap 0.7s ease-in-out, padding 0.7s ease-in-out, transform 0.3s ease-in-out;
}

/* אם יש overflow, הקטן בצורה אחידה */
@media (max-width: 900px) {
    #chessContainer.layout-landscape #gameInfo {
        transform: scale(0.9);
    }
}

@media (max-width: 700px) {
    #chessContainer.layout-landscape #gameInfo {
        transform: scale(0.8);
    }
}

/* כפתורים - בשורה, עיצוב דומה לפריסה לאורך */
#chessContainer.layout-landscape #gameInfo button {
    flex: 1 1 0; /* כל כפתור תופס חלק שווה מהרוחב */
    margin: 0; /* ביטול margin - משתמשים ב-gap */

    /* גובה זהה לפריסה לאורך */
    height: 40px;
    padding: 0.2em;

    /* עיגול פינות זהה */
    border-radius: 7px;

    /* גודל סמלים זהה */
    font-size: 22px;

    /* רוחב מינימלי למניעת כפתורים קטנים מדי */
    min-width: 40px;
}

/* moveHistory - גם בשורה, יכול להתכווץ */
#chessContainer.layout-landscape #moveHistory {
    flex: 0 1 auto; /* יכול להתכווץ אבל לא לגדול */
    max-width: 150px;
    min-width: 40px;
    margin: 0;
    height: 40px; /* זהה לכפתורים */
    font-size: 14px;
}

/* statusIndicator - בשורה, חולק מקום שווה */
#chessContainer.layout-landscape #statusIndicator {
    flex: 1 1 0; /* חולק מקום שווה עם הכפתורים */
    height: 40px;
    border-radius: 7px;
    font-size: 22px;
    min-width: 40px; /* ריבוע מינימלי */
    margin: 0; /* ביטול margin - משתמשים ב-gap */
}

/* כפתורי toggle - חולקים מקום שווה */
#chessContainer.layout-landscape #toggleModeButton,
#chessContainer.layout-landscape #globalPieceToggle {
    flex: 1 1 0; /* חולק מקום שווה */
    height: 40px;
    padding: 0.2em;
    border-radius: 7px;
    font-size: 18px;
    min-width: 40px;
    margin: 0; /* ביטול margin - משתמשים ב-gap */

    /* שמור על ההתנהגות המקורית */
    position: relative;
    overflow: hidden;
}

/* מנגנון נגלל - התנהגות מקורית */
#chessContainer.layout-landscape #toggleModeButton .toggle-symbols,
#chessContainer.layout-landscape #globalPieceToggle .toggle-indicator {
    display: flex;
    width: 200%; /* כמו במקור */
    height: 100%;
    transition: transform 0.3s ease;
}

#chessContainer.layout-landscape #toggleModeButton .toggle-symbols span,
#chessContainer.layout-landscape #globalPieceToggle .toggle-indicator span {
    width: 50%; /* כמו במקור */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* אינדיקטור toggle - התנהגות מקורית */
#chessContainer.layout-landscape #toggleModeButton::before,
#chessContainer.layout-landscape #globalPieceToggle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 26px;
    background: #cbcafe;
    border-radius: 3px;
    left: 4px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#chessContainer.layout-landscape #globalPieceToggle::before {
    background: #4fffdf;
}

/* ========================================
   התאמות נוספות
   ======================================== */

/* וידוא שהלוח ממלא את boardWrapper */
#chessContainer.layout-landscape #myBoard {
    width: 100% !important;
    height: auto !important; /* שומר על aspect-ratio */
    max-width: 100%;
    max-height: 100%;
    display: block;
    box-sizing: border-box; /* כולל border ו-padding בחישוב */
}

/* תיקון לרכיב הלוח של chessboard.js */
#chessContainer.layout-landscape #myBoard > div[class*="board-"],
#chessContainer.layout-landscape #myBoard > [id*="chessboard-"] {
    box-sizing: border-box !important; /* אכיפה על ספריית chessboard.js */
    width: 100% !important;
    height: 100% !important;
}

/* promotionDialog - שמירה על מיקום נכון */
#chessContainer.layout-landscape #promotionDialog {
    /* יישאר יחסי ל-boardWrapper */
    position: absolute;
}

/* moveRevealAnimation - שמירה על מיקום ותצוגה */
#chessContainer.layout-landscape #moveRevealAnimation {
    /* יישאר יחסי ל-boardWrapper */
    position: absolute;

    /* מניעת שבירת שורה - רק כשהאלמנט מוצג */
    white-space: nowrap;

    /* אל תכפה display - זה מפריע להסתרת האנימציה */
    /* הסרנו: display: inline-block !important; */
    /* הסרנו: width: auto !important; */
    /* הסרנו: max-width: none !important; */
}

/* ========================================
   עיגולי פינות - התאמה סופית
   ======================================== */

/* explanationBox - עיגול למעלה (רק אם יש) */
#chessContainer.layout-landscape #explanationBox {
    border-radius: 12px 12px 0 0;
}

/* toexplor - עיגול למעלה מימין */
#chessContainer.layout-landscape #toexplor {
    border-radius: 0 12px 0 0;
}

/* gameInfo - עיגול למטה מימין */
#chessContainer.layout-landscape #gameInfo {
    border-radius: 0 0 12px 0;
}

/* ========================================
   Responsive - התאמות עדינות
   ======================================== */

/* במסכים קטנים מאוד - התאמות עדינות */
@media (max-width: 900px) {
    #chessContainer.layout-landscape #gameInfo {
        gap: 3px;
        padding: 3px;
    }

    #chessContainer.layout-landscape #gameInfo button {
        height: 36px;
        font-size: 20px;
        min-width: 36px;
    }

    #chessContainer.layout-landscape #statusIndicator {
        width: 36px;
        height: 36px;
    }
}

/* התאמות ספציפיות למובייל landscape */
@media (max-width: 900px) and (orientation: landscape) {
    /* וידוא שה-boardWrapper תקין גם במובייל landscape */
    #chessContainer.layout-landscape #boardWrapper {
        /* אכיפת גודל ריבועי מדויק */
        width: var(--board-width, 100%) !important;
        height: var(--board-width, 100%) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* וידוא ש-myBoard ממלא את boardWrapper */
    #chessContainer.layout-landscape #myBoard {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* אכיפה מוחלטת על הרכיב של chessboard.js */
    #chessContainer.layout-landscape #myBoard > div[class*="board-"],
    #chessContainer.layout-landscape #myBoard > [id*="chessboard-"] {
        box-sizing: border-box !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
}

/* במסכים גדולים - שמור על העיצוב הרגיל */
@media (min-width: 1400px) {
    #chessContainer.layout-landscape #gameInfo {
        gap: 4px;
        padding: 4px;
    }
}

/* ========================================
   עיצוב סטטוס במצב landscape
   ======================================== */

/* שמירה על עיצוב כפתורים קיים */
#chessContainer.layout-landscape .game-control-btn {
    /* נשאר כמו קיים */
}

/* ========================================
   טיפול בגלילה
   ======================================== */

/* scrollbar מותאם ל-output במצב landscape */
#chessContainer.layout-landscape #toexplor::-webkit-scrollbar {
    width: 8px;
}

#chessContainer.layout-landscape #toexplor::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0 12px 0 0;
}

#chessContainer.layout-landscape #toexplor::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#chessContainer.layout-landscape #toexplor::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}