/* ====================================================
   tamar-game.css — עיצוב משחק תמר
   ====================================================

   הגיון הפריסה:
   - game-wrapper  = עטיפה שמרכזת ומשמרת יחס 16:9
   - game-container = המשחק עצמו, 100% מהעטיפה
   - bg-image      = תמונת הרקע, ממלאת הכל
   - board-area    = שכבה שקופה מעל הרקע — כאן הפתקיות
   - drag-panel    = צד ימין — הפריטים לגרירה

   ==================================================== */


/* ----------------------------------------------------
   איפוס בסיסי
   ---------------------------------------------------- */
* {
    margin     : 0;
    padding    : 0;
    box-sizing : border-box;
}

body {
    background : #1a0e05;
    display    : flex;
    justify-content : center;
    align-items     : center;
    min-height : 100vh;
    overflow   : hidden;
}


/* ----------------------------------------------------
   עטיפה חיצונית — שומרת יחס 16:9
   ---------------------------------------------------- */
#game-wrapper {
    position : relative;
    width    : 100vw;
    height   : 100vh;
    display  : flex;
    justify-content : center;
    align-items     : center;
}


/* ----------------------------------------------------
   מיכל המשחק — יחס 16:9 קבוע
   ---------------------------------------------------- */
#game-container {
    position : relative;
    width    : 100%;
    height   : 100%;
    max-width  : calc(100vh * 16 / 9);
    max-height : calc(100vw * 9 / 16);
    overflow : hidden;
}


/* ----------------------------------------------------
   שכבה תחתונה — תמונת המצב הסופי (גלויה תמיד)
   ---------------------------------------------------- */
#bg-complete {
    position   : absolute;
    top        : 0;
    left       : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    user-select: none;
    -webkit-user-drag: none;
}

/* ----------------------------------------------------
   שכבה עליונה — קנבס עם תמונת המצב ההתחלתי
   נמחק בהדרגה כשפריט מונח (destination-out)
   ---------------------------------------------------- */
#top-canvas {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    pointer-events  : none;
}


/* ----------------------------------------------------
   אזור הלוח — שכבה שקופה מעל הרקע
   pointer-events:none כדי שלא יחסום גרירה על הפאנל
   ---------------------------------------------------- */
#board-area {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 100%;
    height         : 100%;
    pointer-events : none;
}


/* ----------------------------------------------------
   נקודת יעד (פתקית ריקה)
   ממוקמת מעל הפתקית בתמונת הרקע
   ---------------------------------------------------- */
.drop-zone {
    position       : absolute;
    width          : 12%;
    height         : 16%;
    transform      : translate(-50%, -50%);
    border-radius  : 4px;
    transition     : box-shadow 0.25s ease, background 0.25s ease;
    pointer-events : auto;
    /* outline: 2px dashed red; */ /* פתח לכוונון מיקום */
}

/* נקודת יעד זוהרת בזמן גרירה — מבוטל */
.drop-zone.glow {}

/* נקודת יעד ממולאת — הפריט נמצא בה */
.drop-zone.filled {
    pointer-events : none;
}


/* ----------------------------------------------------
   פאנל הגרירה — שכבה שקופה מעל כל המשחק
   הפריטים מוצבים אבסולוטית בתוכו לפי % מהמיכל
   ---------------------------------------------------- */
#drag-panel {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    pointer-events  : none;
    z-index         : 10;
}


/* ----------------------------------------------------
   פריט לגרירה — ברירת מחדל (לפני הנחה)
   מטרה: להיראות כמו הפריטים ב-אלמנטים נגררים.png
   ---------------------------------------------------- */
.drag-item {
    position       : absolute;
    transform      : translate(-50%, -50%);
    cursor         : grab;
    user-select    : none;
    pointer-events : auto;
    z-index        : 10;
    transition     : filter 0.2s, transform 0.2s;
    filter         : drop-shadow(2px 3px 5px rgba(0,0,0,0.35));
}

/* התמונה (PNG) — ממלאת את הרוחב שהוגדר ב-DragItem (לכל פתקית רוחב משלה) */
.drag-item img {
    display           : block;
    width             : 100%;
    height            : auto;
    pointer-events    : none;
    user-select       : none;
    -webkit-user-drag : none;
}

.drag-item:hover {
    filter    : drop-shadow(3px 5px 9px rgba(0,0,0,0.5)) brightness(1.04);
    transform : translate(-50%, -50%) translateY(-2px);
}

/* המקור נהיה שקוף בזמן הגרירה */
.drag-item.ghost {
    opacity        : 0.30;
    pointer-events : none;
}

/* ----------------------------------------------------
   פריט שהונח על הפתקית — סגנון הפתקית (הפונט השני)
   מטרה: להיראות כמו הכיתוב בסוף משחק תמר.png
   ---------------------------------------------------- */
.drag-item.placed {
    background    : transparent;
    border        : none;
    box-shadow    : none;
    color         : #2c0800;
    font-family   : 'Frank Ruhl Libre', serif;
    font-size     : 1.15rem;
    font-weight   : 900;
    padding       : 0;
    cursor        : default;
    transform     : none !important;
    text-shadow   : 0 1px 2px rgba(0,0,0,0.12);
}


/* ----------------------------------------------------
   כפתורי overlay — שקופים, מכסים את כפתורי הרקע
   מיקום לפי background.webp — ניתן לכוונן אחוזים
   ---------------------------------------------------- */

/* כפתור "הפעל מחדש" הירוק — פינה ימנית עליונה
   גרפיקה + מיקום עודכן ב-2026-05-13 מ"עין של קלוד" (גרירה מדויקת של PNG) */
#overlay-restart-btn {
    position    : absolute;
    left        : 77.29%;
    top         : 0.00%;
    width       : 20.14%;
    height      : 12.63%;
    cursor      : pointer;
    z-index     : 50;
    background  : url('../מסכים בצלאל/השלמות מסכים/הפעל מחדש.png') no-repeat center / contain;
    transition  : transform 0.15s ease, filter 0.15s ease;
    user-select : none;
}
#overlay-restart-btn:hover {
    transform : scale(1.06);
    filter    : drop-shadow(0 0 10px rgba(80, 200, 80, 0.85));
}
#overlay-restart-btn:active {
    transform : scale(0.96);
}

/* כפתור X האדום — ימין לכפתור הירוק */
#overlay-exit-btn {
    position      : absolute;
    left          : 93%;
    top           : 1%;
    width         : 6.5%;
    height        : 12%;
    cursor        : pointer;
    z-index       : 50;
    border-radius : 50%;
    /* background: rgba(255,0,0,0.3); */ /* פתח לכוונון */
}

/* כפתור "פתרון אוטומטי" — תמונת PNG מתיקיית בצלאל המשותפת
   מיקום עודכן ב-2026-05-13 מ"עין של קלוד" (גרירה מדויקת של PNG) */
#overlay-autofill-btn {
    position    : absolute;
    left        : 65.30%;
    top         : 0.00%;
    width       : 16.14%;
    height      : 12.37%;
    cursor      : pointer;
    z-index     : 50;
    background  : url('../מסכים בצלאל/השלמות מסכים/פתרון אוטומטי.png') no-repeat center / contain;
    transition  : transform 0.15s ease, filter 0.15s ease;
    user-select : none;
}

#overlay-autofill-btn:hover {
    transform : scale(1.06);
    filter    : drop-shadow(0 0 10px rgba(255, 200, 80, 0.85));
}

#overlay-autofill-btn:active {
    transform : scale(0.96);
}


/* ----------------------------------------------------
   מסך ניצחון
   ---------------------------------------------------- */
#win-overlay {
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background      : rgba(0, 0, 0, 0.60);
    display         : flex;
    justify-content : center;
    align-items     : center;
    z-index         : 200;
    /* מוסתר בהתחלה */
    opacity         : 0;
    pointer-events  : none;
    transition      : opacity 0.5s ease;
}

#win-overlay.visible {
    opacity        : 1;
    pointer-events : all;
}

#win-message {
    background    : #fffdf0;
    border-radius : 16px;
    padding       : 40px 60px;
    text-align    : center;
    direction     : rtl;
    box-shadow    : 0 8px 30px rgba(0,0,0,0.5);
}

#win-message p {
    font-family : 'Frank Ruhl Libre', serif;
    font-size   : 2rem;
    font-weight : 700;
    color       : #2c0800;
    margin-bottom: 10px;
}

#win-restart-btn {
    margin-top    : 20px;
    background    : #3cb371;
    color         : white;
    border        : none;
    border-radius : 20px;
    padding       : 10px 30px;
    font-family   : 'Frank Ruhl Libre', serif;
    font-size     : 1.1rem;
    font-weight   : 700;
    cursor        : pointer;
    direction     : rtl;
}

#win-restart-btn:hover { background: #2a9d60; }


/* ----------------------------------------------------
   ספארקל — חלקיקי זוהר אחרי הנחת פריט
   ---------------------------------------------------- */
.sparkle-particle {
    position        : absolute;
    width           : 8px;
    height          : 8px;
    border-radius   : 50%;
    pointer-events  : none;
    transform       : translate(-50%, -50%);
    animation       : sparkle-fly 0.7s ease-out forwards;
    z-index         : 100;
}

@keyframes sparkle-fly {
    0%   { opacity: 1;   transform: translate(-50%, -50%) translate(0, 0)       scale(1);   }
    100% { opacity: 0;   transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0); }
}

/* ----------------------------------------------------
   אפקט פיצוץ קונפטי — לכל הכיוונים, עם גרביטציה
   0%   = במרכז
   50%  = שיא קפיצה (גובה הכי גדול)
   100% = נופל למטה (גרביטציה)
   ---------------------------------------------------- */
@keyframes confetti-burst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) rotate(var(--rot-start));
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%)
                   translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7 - 30px))
                   rotate(calc((var(--rot-start) + var(--rot-end)) / 2));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%)
                   translate(var(--dx), calc(var(--dy) + 120px))
                   rotate(var(--rot-end));
    }
}