/* ==========================================
   ChessAPit - Control Styles
   קובץ: mystyle-controls.css
   תיאור: עיצוב כפתורים ופקדי משחק
   גרסה 1.2 - עם הערות להתאמה אישית
   ========================================== */

/* === פקדי משחק === */
#gameInfo {
    width: 20%;
    padding: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #cbcafe00;
}

/* === סגנון אחיד לכפתורי פעולה === */
#undoButton,
#statusIndicator,
#resetRestoreButton {
    width: 100%;
    height: 40px;           /* 🔧 גובה הכפתור - שנה כאן */
    padding: 0.2em;
    background: #e0e0e0;
    border: 1px solid #e7f6ff;
    border-radius: 7px;     /* 🔧 עיגול הפינות - שנה כאן (0 = ללא עיגול, 50% = עגול לגמרי) */
    cursor: pointer;
    margin: 4px auto;        /* 🔧 מרווח בין כפתורים - שנה את ה-4px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;         /* 🔧 גודל הסמל/טקסט בכפתור - שנה כאן */
    color: #444;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    outline: none;
}

/* אפקט hover לכפתורי פעולה */
#undoButton:hover,
#statusIndicator:hover,
#resetRestoreButton:hover {
    background: #d5d5d5;
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* === כפתורי Toggle === */
#toggleModeButton,
#globalPieceToggle {
    width: 100%;
    height: 40px;           /* 🔧 גובה כפתורי toggle - שנה כאן */
    padding: 0.2em;
    background: #e0e0e0;
    border: 1px solid #e7f6ff;
    border-radius: 7px;     /* 🔧 עיגול פינות כפתורי toggle - שנה כאן */
    cursor: pointer;
    margin: 4px auto;        /* 🔧 מרווח כפתורי toggle - שנה כאן */
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
    outline: none;
}


/* === גדלי סמלים ספציפיים === */
/* 🔧 כדי לשנות גודל סמל ספציפי, ערוך כאן: */

/* סמל כפתור undo */
#undoButton .button-icon {
    font-size: 26px;         /* 🔧 גודל סמל undo */
}

/* סמל כפתור reset */
#resetRestoreButton .button-icon {
    font-size: 24px;         /* 🔧 גודל סמל reset */
    transition: transform 0.3s ease;
}

/* סמלים בכפתורי toggle */
#toggleModeButton .toggle-symbols span,
#globalPieceToggle .toggle-indicator span {
    font-size: 18px;         /* 🔧 גודל סמלים בכפתורי toggle */
    font-weight: 400;
}

/* === אנימציות ומצבים מיוחדים === */

/* כפתור undo - אנימציית הצעה */
#undoButton.suggest-undo {
    animation: suggestUndo 3s ease-out;
}

/* כפתור reset במצב restore */
#resetRestoreButton.restore-mode {
    background: #e8f4fd;
}

#resetRestoreButton.restore-mode .button-icon {
    transform: rotate(180deg);
}

/* === מצבי סטטוס שונים === */
#statusIndicator.white {
    background: #e7f6ff;
    color: #111;
    border-color: #999;
}

#statusIndicator.black {
    background: #777777;
    color: #fff;
    border-color: #111;
}

#statusIndicator.white.check {
    background: #ffffff;
    color: #d00;
    border-color: #f00;
}

#statusIndicator.black.check {
    background: #333333;
    color: #f00;
    border-color: #f00;
}

#statusIndicator.over {
    background: #777;
    color: #fff;
    border-color: #333;
}

#statusIndicator.draw {
    background: #ccc;
    color: #444;
    border-color: #aaa;
}

/* אנימציות סטטוס */
#statusIndicator.status-checkmate {
    animation: statusCheckmate 2s ease-out;
}

#statusIndicator.status-check-white {
    animation: statusCheckWhite 1.5s ease-out;
}

#statusIndicator.status-check-black {
    animation: statusCheckBlack 0.8s ease-out;
}

/* === כפתורי Toggle - מנגנון הגלילה === */
#toggleModeButton:hover,
#globalPieceToggle:hover {
    background: #d5d5d5;
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#toggleModeButton .toggle-symbols,
#globalPieceToggle .toggle-indicator {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.3s ease;
}

#toggleModeButton .toggle-symbols span,
#globalPieceToggle .toggle-indicator span {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Chess Alpha', 'Rubik', Arial, sans-serif;
    line-height: 1.2;
}

/* מצבי toggle */
#toggleModeButton.mode-letters .toggle-symbols {
    transform: translateX(-50%);
}

#globalPieceToggle.mode-unicode .toggle-indicator {
    transform: translateX(-50%);
}

/* אינדיקטור מצב בכפתורי toggle */
#toggleModeButton::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);
}

#globalPieceToggle::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 26px;
    background: #4fffdf;
    border-radius: 3px;
    left: 4px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#toggleModeButton.mode-letters::before {
    left: auto;
    right: 4px;
}

#globalPieceToggle.mode-unicode::before {
    left: auto;
    right: 4px;
}

/* === היסטוריית מהלכים - מוסתר === */
#moveHistory {
    display: none !important;
}

/* === מערכת Tooltip === */
.chess-tooltip {
    position: absolute;       /* absolute כדי שיגלול עם התוכן */
    background: #f7f6e6;
    color: #222;
    border: 1.5px solid #999;
    border-radius: 8px;       /* 🔧 עיגול פינות tooltip */
    padding: 8px 12px;        /* 🔧 ריפוד פנימי של tooltip */
    font-size: 14px;          /* 🔧 גודל טקסט ב-tooltip */
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    font-family: 'Rubik', 'Varela Round', Arial, sans-serif;
}

.chess-tooltip.show {
    opacity: 1;
}

/* חץ של tooltip - כשמוצג משמאל */
.chess-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #999;
}

.chess-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #f7f6e6;
}

/* חץ כשה-tooltip מוצג מימין */
.chess-tooltip.right-side::before {
    right: auto;
    left: -6px;
    border-left: none;
    border-right: 6px solid #999;
}

.chess-tooltip.right-side::after {
    right: auto;
    left: -4px;
    border-left: none;
    border-right: 5px solid #f7f6e6;
}

/* Tooltip למצבים מיוחדים */
.chess-tooltip.status-white {
    background: #ffffff;
    color: #111;
}

.chess-tooltip.status-black {
    background: #333333;
    color: #fff;
}

.chess-tooltip.status-check {
    border-color: #f00;
    color: #d00;
}

.chess-tooltip.status-over {
    background: #777;
    color: #fff;
}

/* === Media Queries למובייל === */
@media (max-width: 768px) {
    /* 🔧 גדלים למובייל - שנה כאן */
    #undoButton,
    #statusIndicator,
    #resetRestoreButton,
    #toggleModeButton,
    #globalPieceToggle {
        height: 32px;         /* 🔧 גובה כפתורים במובייל */
        font-size: 20px;      /* 🔧 גודל סמלים במובייל */
        margin: 1px auto;     /* 🔧 מרווחים במובייל */
    }
    
    #toggleModeButton::before,
    #globalPieceToggle::before {
        width: 5px;
        height: 22px;
    }
    
    .chess-tooltip {
        font-size: 12px;      /* 🔧 גודל טקסט tooltip במובייל */
        padding: 6px 10px;    /* 🔧 ריפוד tooltip במובייל */
    }
}


/* === תיקון צבע טקסט בכפתורי toggle === */
#toggleModeButton,
#globalPieceToggle,
#toggleModeButton:focus,
#globalPieceToggle:focus,
#toggleModeButton:active,
#globalPieceToggle:active {
    color: #0f172a !important;  /* צבע טקסט כהה קבוע */
}

#toggleModeButton .toggle-symbols span,
#globalPieceToggle .toggle-indicator span,
#toggleModeButton:focus .toggle-symbols span,
#globalPieceToggle:focus .toggle-indicator span,
#toggleModeButton:active .toggle-symbols span,
#globalPieceToggle:active .toggle-indicator span {
    color: inherit !important;  /* ירש את הצבע מההורה */
}

/* === מניעת בחירת טקסט בכפתורים === */
.game-control-btn,
#undoButton,
#statusIndicator,
#resetRestoreButton,
#toggleModeButton,
#globalPieceToggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;  /* מניעת הדגשה במובייל */
}

/* === מניעת אפקט highlight במובייל === */
@media (max-width: 768px) {
    #toggleModeButton,
    #globalPieceToggle,
    #undoButton,
    #statusIndicator,
    #resetRestoreButton {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* שמירה על צבע טקסט קבוע במובייל */
    #toggleModeButton:active,
    #globalPieceToggle:active {
        background: #e0e0e0 !important;  /* רקע ללא שינוי */
        color: #0f172a !important;       /* טקסט כהה */
    }
    
    /* הבטחת צבע תקין לסמלים */
    #toggleModeButton:active .toggle-symbols span,
    #globalPieceToggle:active .toggle-indicator span {
        color: #0f172a !important;
        opacity: 1 !important;
    }
}

/* === תיקון לחיצה על כפתורים במובייל === */
@media (pointer: coarse) {
    /* הגדלת אזור לחיצה במכשירי מגע */
    .game-control-btn,
    #undoButton,
    #statusIndicator,
    #resetRestoreButton,
    #toggleModeButton,
    #globalPieceToggle {
        min-height: 30px;  /* גודל מינימלי מומלץ למובייל */
        touch-action: manipulation;  /* מניעת double-tap zoom */
    }
}