/* ==========================================
   ChessAPit - Board Styles
   קובץ: mystyle-board.css
   תיאור: עיצוב לוח השחמט והמשבצות
   ========================================== */

/* === לוח השחמט === */
#boardWrapper {
    background-color: var(--board-light);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* שינוי ל-border-box */
    aspect-ratio: 1 / 1;
    overflow: visible;
}

#myBoard {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important; /* אכיפת גובה */
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box; /* שינוי ל-border-box */
    aspect-ratio: 1 / 1;
    touch-action: manipulation;
}

/* === דיאלוג הכתרת רגלי === */
#promotionDialog {
    position: absolute;
    display: none;
    background: white;
    border: 2px solid #333;
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    white-space: nowrap;
}

.promoPiece {
    cursor: pointer;
    display: inline-block;
    margin: 0;
    padding: 2px;
    border-right: 1px solid #666;
}

.promoPiece:last-child {
    border-right: none;
}

/* === הדגשות על הלוח === */
.highlight-square-light {
    box-shadow: inset 0 0 1vmin 1vmin var(--highlight-move);
}

.highlight-square-dark {
    box-shadow: inset 0 0 1vmin 1vmin var(--highlight-move-dark);
}

.highlight-selected {
    box-shadow: inset 0 0 1vmin 1vmin var(--highlight-selected);
}

.highlight-invalid-move {
    background-color: var(--highlight-invalid);
}

/* === אנימציית חשיפת מהלך === */
#chessContainer {
    position: relative; /* חשוב למיקום מוחלט של האנימציה */
}

#moveRevealAnimation {
    position: absolute;
    display: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2px 4px;
    font-weight: bold;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--text-primary);
    z-index: 999999; /* גבוה מאוד כדי להיות מעל כל רכיב במצב לאורך */
    pointer-events: none;
    line-height: 1.4;
    transition: none !important;
    will-change: transform, opacity, top, left, text-shadow;
}

#moveRevealAnimation * {
    transition: none !important;
}

#moveRevealAnimation.show {
    display: block;
}

/* === לוח צף (Floating Board) === */
#chessContainerPlaceholder { 
    visibility: hidden; 
}

/* מצב צף של הקונטיינר */
#chessContainer.floating-mode {
    position: fixed !important;
    margin: 0 !important;
    transform-origin: top left;
    --fb-scale: 1;
    transform: scale(var(--fb-scale));
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* הבטחת אנימציית כלים חלקה גם כשההורה בסקייל */
#chessContainer.floating-mode .piece-417db {
    z-index: 10001 !important;
    will-change: top, left, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    pointer-events: auto;
}

/* כפתורי שליטה במצב צף */
#chessContainer .floating-controls {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%) scale(calc(1 / var(--fb-scale)));
    transform-origin: center top;
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 3px;
    border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10050;
}

.floating-close-btn,
.floating-reset-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.floating-close-btn:hover,
.floating-reset-btn:hover {
    background: #e8e8e8;
    transform: scale(1.08);
}

.floating-close-btn { 
    color: #d00; 
    font-weight: bold; 
}

.floating-reset-btn { 
    color: #333; 
}

@keyframes resetFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#chessContainer.reset-flash { 
    animation: resetFlash 0.3s ease-out; 
}

@media (max-width: 768px) {
    #chessContainer .floating-controls { 
        bottom: -40px; 
    }
}

/* כפתור הצגת/הסתרת פאנל במצב צף - עיצוב משופר */
#chessContainer .floating-controls .floating-panel-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
}

#chessContainer .floating-controls .floating-panel-btn:hover { 
    background: #e8e8e8; 
    transform: scale(1.08); 
    color: #000;
}