/* ====================================================
   משחק תמר — תענית פרק א׳ משנה ב׳, שני החלקים
   ==================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    background: #1a1512;
    overflow: hidden;
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

/* ----------------------------------------------------
   שלושת הכפתורים של המשחק המקורי, על הלוח עצמו.
   המיקומים באחוזים הם אלה של המשחק המקורי בדיוק.
   שני הראשונים הם קובצי ה-PNG המקוריים. האיקס האדום
   מצויר כאן, כי במקורי הוא צרוב בתוך תמונת הרקע.
   ---------------------------------------------------- */
.tool-btn {
    position: absolute;
    cursor: pointer;
    z-index: 500;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform .15s ease, filter .15s ease;
}
.tool-btn:active { transform: scale(0.96); }

#btn-autofill {
    left: 74.6%; top: 0.55%; width: 9.4%; height: 3.5%;
    background-image: url('assets/buttons/autofill.png');
}
#btn-autofill:hover { transform: scale(1.06);
                      filter: drop-shadow(0 0 10px rgba(255,200,80,.85)); }

#btn-restart {
    left: 85.0%; top: 0.55%; width: 9.4%; height: 3.5%;
    background-image: url('assets/buttons/restart.png');
}
#btn-restart:hover  { transform: scale(1.06);
                      filter: drop-shadow(0 0 10px rgba(80,200,80,.85)); }

/* האיקס האדום — עיגול עם מדרג ורוד-אדום, איקס לבן.
   מועתק בעין מהעיצוב שבתמונת הרקע של המשחק המקורי. */
#btn-exit {
    position: absolute;
    left: 95.6%; top: 0.55%;
    width: 2.3%;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    cursor: pointer;
    z-index: 500;
    background: radial-gradient(circle at 35% 30%, #ff7a9c 0%, #ef2f5a 55%, #c81440 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 -2px 6px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, filter .15s ease;
}
#btn-exit:hover  { transform: scale(1.08);
                   filter: drop-shadow(0 0 10px rgba(255,80,120,.85)); }
#btn-exit:active { transform: scale(0.94); }
#btn-exit svg {
    width: 60%; height: 60%;
    stroke: #fff;
    stroke-width: 6;
    stroke-linecap: round;
}

/* מונה ההתקדמות — קטן, בפינה השמאלית התחתונה של הלוח */
#count {
    position: absolute;
    left: 1.5%; bottom: 1.5%;
    z-index: 500;
    color: #f2e4cb;
    font-size: 14px;
    background: rgba(0,0,0,.45);
    padding: 4px 12px;
    border-radius: 8px;
    direction: rtl;
    pointer-events: none;
}

/* ----------------------------------------------------
   הבמה. היחס נקבע בקוד לפי ממדי השלב הנוכחי.
   ---------------------------------------------------- */
#stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    box-shadow: 0 0 60px rgba(0,0,0,.6);
}

#layer-complete, #layer-start {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ----------------------------------------------------
   הכרטיסים הנגררים
   ---------------------------------------------------- */
.card {
    position: absolute;
    cursor: grab;
    transition: filter .15s ease;
    will-change: transform;
    touch-action: none;
    z-index: 10;
}
.card img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}
.card:hover    { filter: brightness(1.06) drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.card.dragging { cursor: grabbing; z-index: 999;
                 filter: brightness(1.1) drop-shadow(0 10px 22px rgba(0,0,0,.45));
                 transform: scale(1.03) rotate(-.6deg); }
.card.placed   { display: none; }
.card.rejected { animation: shake .34s ease; }

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-9px) rotate(-1.5deg); }
    40%     { transform: translateX(9px)  rotate(1.5deg); }
    60%     { transform: translateX(-6px) rotate(-1deg); }
    80%     { transform: translateX(6px)  rotate(1deg); }
}

/* טבעת ההתגלות של דמות */
.reveal-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    box-shadow: 0 0 0 2px rgba(255,236,170,.95), 0 0 34px 12px rgba(255,214,102,.7);
    animation: ringPop .9s ease-out forwards;
}
@keyframes ringPop {
    0%   { transform: scale(.72); opacity: 0; }
    35%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1.22); opacity: 0; }
}

/* ----------------------------------------------------
   קונפטי — הועבר מהמשחק המקורי כפי שהוא
   ---------------------------------------------------- */
.confetti-particle { position: fixed; pointer-events: none; z-index: 2000; }

@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));
    }
}

/* ----------------------------------------------------
   תמר — מסגרת הדמות, ובתוכה מנוגנים הסרטונים שלה
   ---------------------------------------------------- */
#tamar {
    position: absolute;
    left:   1.86%;
    top:    3.50%;
    width: 11.03%;
    height:21.55%;
    z-index: 400;
    border-radius: 11%;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    transition: transform .25s ease, box-shadow .25s ease;
}
#tamar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#tamar.talking {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px rgba(255,222,140,.95), 0 10px 30px rgba(0,0,0,.5);
}
/* הוידאו הוא ילד של המסגרת וממלא אותה במאה אחוז, ולכן הוא
   תמיד בדיוק בגודל שלה — כולל כשהיא גדלה בזמן דיבור. */
#tamar .video-layer-video {
    position: absolute;
    left: 0; top: 0;
    width: 100%  !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    box-shadow: none !important;
    background: transparent;
}

/* סרטון הסיום — בענק במרכז הלוח */
.end-video-frame {
    position: absolute;
    z-index: 1100;
    border-radius: 3%;
    overflow: hidden;
    box-shadow: 0 20px 70px rgba(0,0,0,.6);
    animation: endPop .5s cubic-bezier(.2,.8,.3,1);
}
@keyframes endPop {
    from { opacity: 0; transform: scale(.7); }
    to   { opacity: 1; transform: scale(1);  }
}
.end-video-frame .video-layer-video {
    position: absolute;
    left: 0; top: 0;
    width: 100%  !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    box-shadow: none !important;
}

/* ----------------------------------------------------
   מסך המעבר בין חלק לחלק
   ---------------------------------------------------- */
#stage-veil {
    position: fixed;
    inset: 0;
    background: #1a1512;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease;
    z-index: 1150;
}
#stage-veil.on { opacity: 1; }
#stage-veil span {
    color: #f5e6c8;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 2px;
    direction: rtl;
}

/* ----------------------------------------------------
   מסך הסיום
   ---------------------------------------------------- */
#win {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20,14,8,.55);
    z-index: 1200;
    pointer-events: none;
}
#win.on { display: flex; animation: winIn .5s ease; }
#win span {
    background: linear-gradient(180deg,#fff6e0,#e8cf9c);
    color: #4a3410;
    font-size: 44px;
    font-weight: 700;
    padding: 22px 60px;
    border-radius: 18px;
    box-shadow: 0 14px 44px rgba(0,0,0,.5);
    direction: rtl;
}
@keyframes winIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }


/* ----------------------------------------------------
   הילת מקומות הדוברים.
   נדלקת רק כשגוררים כרטיס של דובר, ומאירה את כל מקומות
   הדוברים יחד — לא את הנכון בלבד. כך המורה יודע שאלה
   מקומות שאפשר לגרור אליהם, ובלי לרמוז לאיזה מהם.
   ---------------------------------------------------- */
.speaker-slot {
    position: absolute;
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity .2s ease;
}
.speaker-slot.on {
    opacity: 1;
    animation: speakerPulse 1.2s ease-in-out infinite;
}
@keyframes speakerPulse {
    0%,100% { box-shadow: 0 0 0 2px rgba(120,200,255,.85),
                          0 0 18px 5px rgba(120,200,255,.45); }
    50%     { box-shadow: 0 0 0 3px rgba(160,220,255,1),
                          0 0 30px 10px rgba(120,200,255,.75); }
}