/* הבמה — במה: דמויות, בועות, אפקטים, פאנלים, מפה, כרטיסים */
#stage{position:relative;direction:ltr;background:#fff;overflow:hidden;--u:6px;width:960px;height:540px;
  box-shadow:0 2px 24px rgba(0,0,0,.08);user-select:none;-webkit-user-select:none;touch-action:none;outline:none;font-size:calc(var(--u)*2.6)}
.layer{position:absolute;inset:0}
#scene{z-index:1}#spot{z-index:2}#closeup{z-index:3}#map{z-index:4}#shapes{z-index:5}#bubbles{z-index:6}#panels{z-index:7}#caption{z-index:8}#cover{z-index:9}#confetti{z-index:10}
#bg img{width:100%;height:100%;object-fit:cover;display:block}
#bg.white img{display:none}
#scene{transition:filter .4s}
#scene.f-night{filter:brightness(.55) saturate(.7) hue-rotate(195deg) saturate(1.2) hue-rotate(-195deg)}
#scene.f-night::after{content:"";position:absolute;inset:0;background:rgba(20,30,80,.28);pointer-events:none}
#scene.f-sepia{filter:sepia(.75) contrast(.95)}
#weather{pointer-events:none;display:none}
#scene.f-rain #weather{display:block;background-image:repeating-linear-gradient(105deg,rgba(255,255,255,0) 0 calc(var(--u)*1.6),rgba(200,215,235,.55) calc(var(--u)*1.6) calc(var(--u)*1.75));
  background-size:calc(var(--u)*7) calc(var(--u)*14);animation:rain .45s linear infinite}
#scene.f-rain{filter:brightness(.85) saturate(.8)}
@keyframes rain{to{background-position:calc(var(--u)*-3) calc(var(--u)*14)}}

/* דמויות */
.actor,.prop{position:absolute;transform:translate(-50%,-100%);cursor:grab;touch-action:none}
.actor .a-anim,.prop .a-anim{height:100%;transform-origin:50% 100%}
.actor .a-flip,.prop .a-flip{height:100%;transform-origin:50% 50%}
.actor.flip .a-flip,.prop.flip .a-flip{transform:scaleX(-1)}
.actor img,.prop img{height:100%;width:auto;display:block;pointer-events:none;-webkit-user-drag:none}
.actor.sil img{filter:brightness(0) opacity(.85)}
.sel .a-flip{filter:drop-shadow(0 0 calc(var(--u)*.35) var(--accent)) drop-shadow(0 0 calc(var(--u)*.35) var(--accent))}
.handle{position:absolute;width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:50%;background:#fff;border:calc(var(--u)*.35) solid var(--accent);
  top:calc(var(--u)*-1.6);right:calc(var(--u)*-1.6);cursor:nwse-resize;display:none;z-index:2}
.sel>.handle{display:block}
body.present .handle,body.student .handle{display:none!important}
.crowd{position:absolute;transform:translate(-50%,-100%);cursor:grab;pointer-events:auto}
.crowd img{position:absolute;bottom:0;transform:translateX(-50%);filter:saturate(.5) brightness(.9);pointer-events:none}

/* אפקטים מעל הראש */
.fx{position:absolute;left:50%;top:0;width:0;height:0;pointer-events:none}
.effect{position:absolute;width:calc(var(--u)*9);height:calc(var(--u)*9);left:calc(var(--u)*2);top:calc(var(--u)*-4);transform-origin:50% 50%}
.effect svg{width:100%;height:100%;overflow:visible}
.e-anger{animation:pulse .6s ease-in-out infinite alternate}
.e-sweat{left:calc(var(--u)*-8);top:calc(var(--u)*1);animation:drip 1.1s ease-in infinite}
.e-hearts{animation:floatup 1.6s ease-in-out infinite}
.e-stars{left:calc(var(--u)*-4.5);top:calc(var(--u)*-6);animation:spin 1.8s linear infinite}
.e-question,.e-exclaim{animation:bob 1s ease-in-out infinite}
.e-gloom{left:calc(var(--u)*-4.5);top:calc(var(--u)*-1);width:calc(var(--u)*9);height:calc(var(--u)*12);animation:gloom 2s ease-in-out infinite}
@keyframes pulse{to{transform:scale(1.18)}}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(calc(var(--u)*3));opacity:0}}
@keyframes floatup{0%{transform:translateY(0) scale(.9)}50%{transform:translateY(calc(var(--u)*-2)) scale(1.05)}100%{transform:translateY(0) scale(.9)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(calc(var(--u)*-1.2)) rotate(6deg)}}
@keyframes gloom{50%{opacity:.55}}

/* מיקרו-אנימציות */
.anim-shake{animation:shake .5s ease-in-out 2}
.anim-jump{animation:jump .7s cubic-bezier(.3,.7,.4,1) 1}
.anim-fall{animation:fall .7s cubic-bezier(.5,0,.75,0) forwards}
.anim-dance{animation:dance .9s ease-in-out infinite}
.anim-walk-left,.anim-walk-right,.anim-enter-left,.anim-enter-right,.anim-exit-left,.anim-exit-right{animation:walkbob .38s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4%) rotate(-2deg)}40%{transform:translateX(4%) rotate(2deg)}60%{transform:translateX(-3%)}80%{transform:translateX(3%)}}
@keyframes jump{0%{transform:scale(1,1)}15%{transform:scale(1.06,.92)}45%{transform:translateY(-22%) scale(.97,1.04)}75%{transform:translateY(0) scale(1.05,.94)}100%{transform:scale(1,1)}}
@keyframes fall{0%{transform:rotate(0)}70%{transform:rotate(92deg)}85%{transform:rotate(86deg)}100%{transform:rotate(90deg) translateX(-2%)}}
@keyframes dance{0%,100%{transform:rotate(-6deg) translateY(0)}25%{transform:rotate(0) translateY(-8%)}50%{transform:rotate(6deg) translateY(0)}75%{transform:rotate(0) translateY(-8%)}}
@keyframes walkbob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-3%) rotate(1.5deg)}}

/* ספוטלייט + קלוז-אפ */
#spot{pointer-events:none;opacity:0;transition:opacity .4s}
#spot.on{opacity:1;background:radial-gradient(ellipse var(--rx) var(--ry) at var(--sx) var(--sy),rgba(0,0,0,0) 0 60%,rgba(0,0,0,.82) 100%)}
#closeup{display:none;overflow:hidden}
#closeup.on{display:block;animation:zoomin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes zoomin{from{transform:scale(.6);opacity:0}}
#closeup .cu-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:blur(calc(var(--u)*1.2)) brightness(.95);transform:scale(1.1)}
#closeup .cu-lines{position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.55) 0 3deg,rgba(255,255,255,0) 3deg 12deg)}
#closeup .cu-frame{position:absolute;left:50%;top:50%;width:calc(var(--u)*78);height:calc(var(--u)*78);transform:translate(-50%,-50%);border-radius:50%;
  background:#fff;border:calc(var(--u)*.7) solid var(--ink);overflow:hidden;box-shadow:0 0 0 calc(var(--u)*1.2) #fff}
#closeup .cu-frame img.bust{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
#closeup .cu-frame img.crop{position:absolute;height:330%;width:auto;left:50%;top:3%;transform:translateX(-50%)}
#closeup .cu-frame.flip img{transform:translateX(-50%) scaleX(-1)}
#closeup .cu-frame.flip img.bust{transform:scaleX(-1)}
#closeup .cu-name{position:absolute;left:50%;bottom:calc(var(--u)*3);transform:translateX(-50%);background:var(--accent);color:#fff;padding:calc(var(--u)*.6) calc(var(--u)*2.4);border-radius:calc(var(--u)*1);font-family:var(--ui);font-size:calc(var(--u)*3.4);font-weight:700}

/* בועות */
#shapes{pointer-events:none;overflow:visible}
#bubbles{pointer-events:none}
.bubble{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;padding:calc(var(--u)*1.6) calc(var(--u)*2.4);
  font-family:var(--ui);font-size:calc(var(--u)*3.2);line-height:1.3;text-align:center;color:var(--ink);min-height:calc(var(--u)*6)}
.bubble .b-text{outline:none;white-space:pre-wrap;word-break:break-word;min-height:1.3em}
.bubble .b-text[contenteditable="true"]{cursor:text;background:rgba(122,46,46,.06);border-radius:4px}
.bubble.k-thought{padding:calc(var(--u)*2.2) calc(var(--u)*3)}
.bubble.k-shout{font-weight:800;font-size:calc(var(--u)*3.6);padding:calc(var(--u)*2.4) calc(var(--u)*3)}
.bubble.k-whisper{font-style:italic;color:#555;font-size:calc(var(--u)*2.9)}
.bubble.k-verse{font-family:var(--serif);font-size:calc(var(--u)*3);line-height:1.5;text-align:right;padding:calc(var(--u)*1.8) calc(var(--u)*2.6)}
.bubble .b-ref{font-family:var(--ui);font-size:calc(var(--u)*2);color:var(--accent);font-weight:700;margin-top:calc(var(--u)*.6);text-align:left}
.bubble.k-sfx .b-text{white-space:pre}
.bubble.k-sfx{padding:0;font-size:calc(var(--u)*10);font-weight:900;line-height:1;color:#e0602a;-webkit-text-stroke:calc(var(--u)*.45) var(--ink);paint-order:stroke fill;
  transform:translate(-50%,-50%) rotate(-7deg);text-shadow:calc(var(--u)*.5) calc(var(--u)*.6) 0 var(--ink);letter-spacing:.02em}
.bubble.empty .b-text:empty::before{content:"…";color:#bbb}
.bubble.sel{outline:calc(var(--u)*.3) dashed var(--accent);outline-offset:calc(var(--u)*.6)}
.bubble .bw{position:absolute;left:calc(var(--u)*-1.6);bottom:calc(var(--u)*-1.6);width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:50%;background:#fff;border:calc(var(--u)*.35) solid var(--accent);cursor:ew-resize;display:none}
.bubble.sel .bw{display:block}
body.present .bubble.sel{outline:none}
body.present .bubble .bw{display:none!important}

/* כתובית */
#caption{position:absolute;left:4%;right:4%;bottom:3%;background:rgba(255,255,255,.94);border:calc(var(--u)*.3) solid var(--ink);border-radius:calc(var(--u)*1);
  padding:calc(var(--u)*1.2) calc(var(--u)*2.4);font-size:calc(var(--u)*3.4);line-height:1.4;text-align:center;font-family:var(--ui);display:none;outline:none}
#caption.show{display:block}
#caption.verse{font-family:var(--serif)}
#caption small{display:block;font-size:.6em;color:var(--accent);font-family:var(--ui);font-weight:700}
#caption[contenteditable="true"]{cursor:text;box-shadow:0 0 0 calc(var(--u)*.4) var(--accent)}

/* פאנלים */
#panels{pointer-events:none;display:none}
#panels.on{display:block}

/* מסכים מלאים */
#cover{display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;direction:rtl}
#cover.on{display:flex}
#cover.blackout{background:#000}
#cover.whiteout{background:#fff}
#cover.title{background:#fff;font-size:calc(var(--u)*9);font-weight:800;color:var(--accent);padding:6%}
#cover.title .tc{outline:none;border-bottom:calc(var(--u)*.6) solid var(--accent);padding-bottom:calc(var(--u)*1.5);animation:tcin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes tcin{from{opacity:0;transform:translateY(calc(var(--u)*4))}}
#cover.poll{background:#fff;padding:5% 7%;gap:calc(var(--u)*3)}
#cover.poll .pq{font-size:calc(var(--u)*7);font-weight:800;color:var(--ink);outline:none}
#cover.poll .popts{display:flex;gap:calc(var(--u)*2.5);width:100%;justify-content:center;flex-wrap:wrap}
#cover.poll .popt{flex:1;max-width:calc(var(--u)*50);min-height:calc(var(--u)*22);border:calc(var(--u)*.5) solid var(--line);border-radius:calc(var(--u)*2.4);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:calc(var(--u)*4.2);padding:calc(var(--u)*2);gap:calc(var(--u)*1);outline:none;transition:.3s}
#cover.poll .popt b{font-size:calc(var(--u)*6);color:var(--accent)}
#cover.poll .popt.hide{opacity:0;transform:scale(.8)}
#cover.poll .pfoot{font-size:calc(var(--u)*2.4);color:var(--muted)}
#cover.reading{background:#fff;display:block;overflow:auto;padding:4% 7%;text-align:right;font-family:var(--serif)}
#cover.reading h2{font-family:var(--ui);color:var(--accent);font-size:calc(var(--u)*4.4);margin:0 0 calc(var(--u)*2)}
#cover.reading p{font-size:calc(var(--u)*4.2);line-height:1.6;margin:0 0 calc(var(--u)*1.2);color:#9a9aa0;transition:color .3s}
#cover.reading p.cur{color:var(--ink);background:var(--tint);border-radius:calc(var(--u)*1);box-shadow:0 0 0 calc(var(--u)*1) var(--tint)}
#cover.reading p b{font-family:var(--ui);color:var(--accent);font-size:.7em;margin-left:.4em}

/* מפה */
#map{display:none;overflow:hidden;background:#efe6cf}
#map.on{display:block}
#map .m-inner{position:absolute;inset:0;transition:transform .8s cubic-bezier(.3,.7,.2,1);transform-origin:50% 50%}
#map .m-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#map .m-path{fill:none;stroke:var(--accent);stroke-width:calc(var(--u)*.7);stroke-dasharray:1.6 1.2;stroke-linecap:round}
#map .m-path.draw{animation:pathdraw 1.4s ease-out}
@keyframes pathdraw{from{stroke-dashoffset:120;opacity:.2}}
#map .pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:calc(var(--u)*.6);cursor:pointer;flex-direction:row-reverse}
#map .pin i{width:calc(var(--u)*1.8);height:calc(var(--u)*1.8);border-radius:50%;background:var(--accent);border:calc(var(--u)*.35) solid #fff;box-shadow:0 0 0 calc(var(--u)*.15) var(--accent);display:block}
#map .pin span{direction:rtl;font-size:calc(var(--u)*2.4);font-weight:700;background:rgba(255,255,255,.85);padding:0 calc(var(--u)*.6);border-radius:calc(var(--u)*.5);white-space:nowrap}
#map .pin.inpath i{background:#fff;box-shadow:0 0 0 calc(var(--u)*.35) var(--accent)}
#map .token{position:absolute;width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:#fff;border:calc(var(--u)*.5) solid var(--accent);overflow:hidden;
  transform:translate(-50%,-115%);cursor:grab;box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1) rgba(0,0,0,.25)}
#map .token img{position:absolute;height:330%;left:50%;top:4%;transform:translateX(-50%);pointer-events:none}
#map .token.sel{border-color:#e0602a;box-shadow:0 0 0 calc(var(--u)*.6) #fff,0 0 0 calc(var(--u)*1) #e0602a}

#confetti{pointer-events:none;width:100%;height:100%}
.pick-mode #stage{cursor:crosshair}