/* ===== סוכות — זה בידיים שלי! | עיצוב משחק לפי הפיגמה ===== */
@font-face { font-family: 'FbTamlil'; src: url('../assets/fonts/FbTamlil-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'FbTamlil'; src: url('../assets/fonts/FbTamlil-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'FbTamlil'; src: url('../assets/fonts/FbTamlil-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'FbTamlil'; src: url('../assets/fonts/FbTamlil-Black.otf') format('opentype'); font-weight: 900; font-display: swap; }

:root {
  --sky: #0BE2FE; --sky-2: #00c6ea; --sky-d: #0a9fc0;
  --purple: #7b4dff; --purple-2: #9b74ff; --purple-d: #4b23b8; --lilac: #c9b3ff;
  --lime: #c3d83b; --lime-d: #8aa01a;
  --green: #35c86a; --green-2: #5fe08a; --green-d: #1c8f45;
  --coral: #ff5a6e; --coral-d: #c42f47;
  --yellow: #ffd23f; --yellow-2: #ffe680; --yellow-d: #d99a00;
  --wood: #f6d49a; --wood-2: #e8b672; --wood-d: #b0702f;
  --ink: #23304a; --ink-2: #51607a;
  --paper: #fffaf0;
  --f: 'FbTamlil', 'Arial Hebrew', system-ui, sans-serif;
  --pop: cubic-bezier(.2, 1.6, .4, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); overscroll-behavior: none; }
body { position: fixed; inset: 0; font-family: var(--f); color: var(--ink); touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* ---------- עולם המשחק ---------- */
#game {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; overflow: clip;
  direction: rtl; font-size: 24px; line-height: 1.35;
  background: var(--sky);
}
#screen { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- כפתורי סוכריה ---------- */
.gbtn {
  --b: var(--purple); --b2: var(--purple-2); --bd: var(--purple-d); --t: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 22px; padding: 14px 28px;
  font: 900 26px/1.1 var(--f); color: var(--t); white-space: nowrap;
  background: linear-gradient(180deg, var(--b2), var(--b) 60%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.14), 0 7px 0 var(--bd), 0 12px 20px rgba(20,20,80,.25);
  text-shadow: 0 2px 0 rgba(0,0,0,.2);
  transition: transform .09s, box-shadow .09s, filter .2s;
}
.gbtn::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 38%; border-radius: 16px 16px 40% 40%; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.gbtn:active:not(:disabled) { transform: translateY(6px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.14), 0 1px 0 var(--bd), 0 3px 8px rgba(20,20,80,.25); }
.gbtn:disabled { filter: grayscale(.6) opacity(.55); }
.gbtn.big { font-size: 30px; padding: 17px 36px; border-radius: 26px; }
.gbtn.huge { font-size: 40px; padding: 22px 54px; border-radius: 32px; }
.gbtn.small { font-size: 21px; padding: 10px 18px; border-radius: 18px; }
.gbtn.green { --b: var(--green); --b2: var(--green-2); --bd: var(--green-d); }
.gbtn.coral { --b: var(--coral); --b2: #ff8595; --bd: var(--coral-d); }
.gbtn.yellow { --b: var(--yellow); --b2: var(--yellow-2); --bd: var(--yellow-d); --t: #4a2f00; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.gbtn.ghost { --b: #ffffff; --b2: #ffffff; --bd: #c9d6e6; --t: var(--purple-d); text-shadow: none; }
.gbtn.wa { --b: #25d366; --b2: #5ee88f; --bd: #128c4a; }
.gbtn.dim { filter: saturate(.35) opacity(.7); }
.gbtn.ready { animation: ready 1.3s ease-in-out infinite; }
@keyframes ready { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.wa-ico { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: inline-block; position: relative; flex-shrink: 0; }
.wa-ico::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 4px solid #25d366; border-bottom-left-radius: 2px; }

.ibtn {
  width: 58px; height: 58px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #e8f7ff); font-size: 27px;
  box-shadow: inset 0 -4px 0 rgba(0,90,140,.15), 0 5px 0 var(--sky-d), 0 9px 14px rgba(0,60,100,.25);
  display: grid; place-items: center; transition: transform .1s;
}
.ibtn:active { transform: translateY(4px) scale(.95); }
.ibtn.off { filter: grayscale(1) opacity(.55); }
.linkbtn { background: none; border: 0; padding: 6px 4px; font: 700 20px var(--f); color: var(--purple-d); text-decoration: underline; text-underline-offset: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 3px solid #fff; background: #fff; border-radius: 999px; padding: 9px 18px;
  font: 700 21px var(--f); color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 5px 0 #c6d7e8, 0 8px 12px rgba(0,60,100,.12); transition: transform .12s var(--pop);
}
.chip:active { transform: translateY(3px); }
.chip.on { background: linear-gradient(var(--purple-2), var(--purple)); color: #fff; border-color: #fff; box-shadow: 0 5px 0 var(--purple-d), 0 8px 14px rgba(60,20,160,.3); animation: chipOn .35s var(--pop); }
@keyframes chipOn { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
.chip.big { font-size: 30px; padding: 12px 26px; min-width: 84px; justify-content: center; }
.chips.emo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chips.emo .chip { flex-direction: column; border-radius: 22px; padding: 8px 6px 10px; font-size: 18px; gap: 2px; }
.chips.emo .chip .e { font-size: 36px; line-height: 1.1; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills button { border: 3px solid #fff; background: #fff; border-radius: 999px; padding: 7px 16px; font: 700 19px var(--f); box-shadow: 0 4px 0 #c6d7e8; }
.pills button.on { background: var(--purple); color: #fff; box-shadow: 0 4px 0 var(--purple-d); }
.mini-dots { display: flex; gap: 8px; }
.mini-dots i { width: 14px; height: 14px; border-radius: 50%; background: #d7e2ee; transition: all .3s; }
.mini-dots i.past { background: var(--green); }
.mini-dots i.on { background: var(--purple); width: 34px; border-radius: 8px; }

/* ---------- פאנלים וטקסט ---------- */
.panel {
  position: relative; background: linear-gradient(180deg, #ffffff, #fff7e6);
  border-radius: 36px; border: 6px solid #fff; padding: 24px 28px;
  box-shadow: 0 8px 0 var(--sky-d), 0 22px 40px rgba(0,70,110,.28);
}
.gt {
  margin: 0; font-weight: 900; font-size: 48px; line-height: 1.08; color: #fff; letter-spacing: .3px;
  -webkit-text-stroke: 9px var(--purple-d); paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--purple-d), 0 12px 18px rgba(40,10,120,.3);
}
.gt.md { font-size: 40px; -webkit-text-stroke-width: 8px; }
.gt.sm { font-size: 32px; -webkit-text-stroke-width: 7px; text-shadow: 0 4px 0 var(--purple-d); }
.h2 { margin: 0 0 14px; font-size: 34px; font-weight: 900; color: var(--purple-d); line-height: 1.15; }
.lead { margin: 12px 0 16px; font-size: 25px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.consent { margin: 10px 0 0; font-size: 16px; color: #1f4a66; opacity: .85; }
.hint { font-size: 18px; color: #1f4a66; margin: 8px 0 0; }
.empty { font-size: 22px; font-weight: 700; color: #1f4a66; text-align: center; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.cta-row.center { justify-content: center; }
.cta-col { display: flex; flex-direction: column; gap: 14px; align-items: stretch; margin-top: 8px; }
.row-end { display: flex; justify-content: flex-end; margin-top: 16px; }
input[type=text] {
  font: 700 26px var(--f); color: var(--ink); width: 100%; padding: 14px 20px;
  border: 4px solid #d7e2ee; border-radius: 20px; background: #fff; outline: none;
  box-shadow: inset 0 4px 0 rgba(0,40,80,.06);
}
input[type=text]:focus { border-color: var(--purple); box-shadow: 0 0 0 5px rgba(123,77,255,.2); }

/* ---------- אנימציות כלליות ---------- */
.in { animation: stepIn .45s var(--pop); }
@keyframes stepIn { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-10px) rotate(-2deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.drop-in { animation: dropIn .6s var(--pop); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-60px) rotate(8deg) scale(.8); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 50% { transform: translateY(-10px); } }

/* ---------- מסך פתיחה ---------- */
.splash { background: var(--sky); align-items: center; justify-content: center; }
.splash .sp-logos { position: absolute; top: -26px; right: -10px; width: 340px; animation: sukIn .8s .5s var(--pop) both; }
.splash .sp-title { position: absolute; top: 12px; left: calc(50% - 310px); width: 540px; animation: titleIn .9s var(--pop) both, floaty 4s 1s ease-in-out infinite; }
@keyframes titleIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.splash .sp-suk { position: absolute; bottom: -10px; left: 2%; width: 420px; animation: sukIn 1s .2s var(--pop) both, bounceSoft 2.6s 1.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sukIn { from { transform: translateY(120%); } }
@keyframes bounceSoft { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.03) translateY(-6px); } }
.splash .sp-sol { position: absolute; bottom: -8px; right: 2%; height: 68%; animation: sukIn 1s .35s var(--pop) both; }
.sp-bottom { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sp-bottom small { font-size: 19px; font-weight: 700; color: #064a5c; background: rgba(255,255,255,.7); padding: 5px 14px; border-radius: 999px; }
.loadbar { width: 360px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.6); border: 4px solid #fff; overflow: hidden; box-shadow: 0 5px 0 var(--sky-d); }
.loadbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: repeating-linear-gradient(45deg, var(--yellow) 0 16px, #ffc400 16px 32px); transition: width .25s; animation: barMove .8s linear infinite; }
@keyframes barMove { to { background-position: 45px 0; } }
.start { animation: startIn .6s var(--pop) both, ready 1.2s .6s ease-in-out infinite; }
@keyframes startIn { from { transform: scale(0); } }

/* ---------- מסך הבית ---------- */
.home { background: var(--sky); }
.home-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; direction: ltr; }
.ly { position: absolute; transform-origin: 0 0; }
.ly > img { width: 100%; height: 100%; pointer-events: none; }
.ly-soldier { cursor: pointer; z-index: 3; }
.ly-sukkah { z-index: 2; }
.sol-img { object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; transition: opacity .35s; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1) rotate(0); } 50% { transform: scale(1.015, .99) rotate(.6deg); } }
.sol-img.swap, .poser.swap { animation: poseSwap .45s var(--pop); }
@keyframes poseSwap { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .88); } 60% { transform: scale(.96, 1.06) translateY(-12px); } 100% { transform: scale(1, 1); } }
.vid-box { z-index: 4; pointer-events: none; opacity: 0; transform: scale(.9); transform-origin: 50% 100%; transition: opacity .35s, transform .45s var(--pop); }
.home-stage.talking .vid-box { opacity: 1; transform: none; }
.home-stage.talking .ly-soldier .sol-img { opacity: 0; }
.kv, .kv canvas, .kv video { width: 100%; height: 100%; display: block; }
.kv-fallback video { object-fit: cover; -webkit-mask: radial-gradient(ellipse 48% 50% at 50% 45%, #000 70%, transparent 100%); mask: radial-gradient(ellipse 48% 50% at 50% 45%, #000 70%, transparent 100%); }
.talk-btn {
  position: absolute; z-index: 6; width: 110px; height: 110px; border-radius: 50%; border: 8px solid #fff;
  background: radial-gradient(circle at 35% 30%, var(--yellow-2), var(--yellow)); color: var(--ink); font-size: 46px;
  box-shadow: 0 9px 0 var(--yellow-d), 0 16px 26px rgba(0,0,0,.25); animation: talkPulse 1.8s ease-in-out infinite;
  display: grid; place-items: center; transform: translate(-50%, -50%);
}
.talk-btn span { margin-left: 8px; }
.talk-btn.call { animation: talkPulse .7s ease-in-out infinite; }
.home-stage.talking .talk-btn { opacity: 0; pointer-events: none; }
@keyframes talkPulse { 50% { transform: translate(-50%, -50%) scale(1.14); } }
.home-hud { position: absolute; top: 14px; left: 16px; display: flex; gap: 12px; align-items: center; z-index: 8; direction: rtl; }
.pchip {
  display: flex; align-items: center; gap: 10px; border: 4px solid #fff; border-radius: 999px; padding: 5px 8px 5px 18px;
  background: linear-gradient(#ffffff, #eef9ff); font: 800 22px var(--f); color: var(--ink);
  box-shadow: 0 5px 0 var(--sky-d), 0 9px 14px rgba(0,60,100,.22);
}
.pchip .av { width: 44px; height: 44px; border-radius: 50%; background: #2fbf71 url('../assets/poses/avatar.webp') 50% 50% / cover no-repeat; border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.pchip.new { padding-inline-end: 22px; animation: ready 1.4s ease-in-out infinite; }
.stars-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(#fff3b0, #ffd23f); border: 3px solid #fff; border-radius: 999px; padding: 3px 14px 3px 10px; font: 900 22px var(--f); color: #6b4500; box-shadow: 0 4px 0 var(--yellow-d); }
.stars-pill .st { font-size: 22px; display: inline-block; animation: spinStar 6s linear infinite; }
@keyframes spinStar { 0%, 80% { transform: rotate(0); } 90% { transform: rotate(180deg) scale(1.3); } 100% { transform: rotate(360deg); } }
.stars-pill.bump { animation: bump .45s var(--pop); }
@keyframes bump { 40% { transform: scale(1.3); } }
.ribbon {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 8;
  background: linear-gradient(var(--purple-2), var(--purple)); color: #fff; font: 800 22px var(--f); white-space: nowrap;
  padding: 10px 26px; border-radius: 999px; border: 4px solid #fff; box-shadow: 0 6px 0 var(--purple-d), 0 10px 18px rgba(0,0,0,.2);
  animation: ribbonIn .8s .5s var(--pop) both;
}
@keyframes ribbonIn { from { transform: translate(-50%, 140%); } }
.ribbon.top { top: 10px; bottom: auto; width: max-content; white-space: normal; text-align: center; font-size: 19px; line-height: 1.25; padding: 8px 18px; animation-name: ribbonTopIn; }
@keyframes ribbonTopIn { from { transform: translate(-50%, -160%); } }

/* ---------- הסוכה החיה ---------- */
.suk-hop { position: absolute; inset: 0; transform-origin: 50% 94%; }
.suk-hop.jump { animation: jump .6s var(--pop); }
@keyframes jump { 0% { transform: scale(1, 1); } 20% { transform: scale(1.06, .9); } 45% { transform: scale(.95, 1.07) translateY(-7%); } 70% { transform: scale(1.03, .96); } 100% { transform: scale(1, 1); } }
.suk-hop.wiggle { animation: wiggle .8s ease-in-out; }
@keyframes wiggle { 20% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1.5deg); } }
.suk-body { position: absolute; inset: 0; transform-origin: 50% 92%; animation: sway 5s ease-in-out infinite; cursor: pointer; }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg) scaleY(1); } 25% { transform: rotate(0) scaleY(1.014); } 50% { transform: rotate(1.2deg) scaleY(1); } 75% { transform: rotate(0) scaleY(.99); } }
.suk-img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.part { position: absolute; pointer-events: none; animation: armIdle 3.4s ease-in-out infinite; }
.part img { width: 100%; height: 100%; }
@keyframes armIdle { 0%, 100% { transform: rotate(calc(var(--dir) * -1.6deg)); } 50% { transform: rotate(calc(var(--dir) * 2.6deg)); } }
.part.pop { animation: armPop .9s var(--pop); }
@keyframes armPop {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(calc(var(--dir) * 16deg)) scale(1.2); }
  45% { transform: rotate(calc(var(--dir) * -7deg)) scale(1.08); }
  65% { transform: rotate(calc(var(--dir) * 9deg)) scale(1.13); }
  100% { transform: rotate(0) scale(1); }
}
.part.today { animation: armWave 1.15s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,236,120,.95)) drop-shadow(0 0 26px rgba(255,200,40,.8)); }
.part.today.pop { animation: armPop .9s var(--pop); }
@keyframes armWave { 0%, 100% { transform: rotate(calc(var(--dir) * -3deg)) scale(1.03); } 50% { transform: rotate(calc(var(--dir) * 11deg)) scale(1.13); } }
.pshine { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.9) 48%, rgba(255,255,255,0) 60%) 150% 0 / 260% 100% no-repeat; animation: shine 2.4s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 170% 0; } 60%, 100% { background-position: -70% 0; } }
.bulb { position: absolute; width: 3.4%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fffbe0 0%, rgba(255,226,120,.9) 28%, rgba(255,200,80,0) 70%); mix-blend-mode: screen; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.8); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } }
.bulb.flash { animation: flash .5s ease-out, twinkle 2.4s .5s ease-in-out infinite; }
@keyframes flash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); } 100% { opacity: .4; transform: translate(-50%, -50%) scale(1); } }
.eye { position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none; }
.lid { position: absolute; left: -12%; right: -12%; top: 0; height: 66%; transform: translateY(-104%); transition: transform .075s ease-in;
  background: linear-gradient(180deg, #f8d69c, #eab46e 60%, #cf8f4a); border-radius: 0 0 50% 50% / 0 0 34% 34%; box-shadow: 0 5px 0 #8a5a2b; }
.blink .lid { transform: translateY(0); }
.notes-fly { position: absolute; left: 80%; top: 22%; width: 8%; height: 12%; pointer-events: none; }
.notes-fly i { position: absolute; left: 30%; bottom: 0; font: 900 64px/1 serif; font-style: normal; color: #ff6fae; opacity: 0; text-shadow: 0 3px 0 rgba(0,0,0,.15); animation: noteUp 3.3s ease-out infinite; }
.notes-fly i:nth-child(2) { color: #8ad13f; left: 70%; }
.notes-fly i:nth-child(3) { color: #7b4dff; left: 0; }
@keyframes noteUp { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -170px) scale(1.2) rotate(25deg); } }
.aura { position: absolute; pointer-events: none; border-radius: 50%; }
.aura::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255,252,210,1) 0%, rgba(255,222,90,.85) 30%, rgba(255,200,40,.35) 50%, rgba(255,200,40,0) 70%); animation: auraPulse 1.6s ease-in-out infinite; }
.aura::after { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.8) 0deg 7deg, rgba(255,255,255,0) 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 14%, transparent 60%); mask: radial-gradient(circle, #000 14%, transparent 60%); animation: spin 10s linear infinite; }
@keyframes auraPulse { 50% { transform: scale(1.12); opacity: .85; } }
.sparkles { position: absolute; pointer-events: none; }
.spark { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; filter: drop-shadow(0 0 8px #ffd23f); animation: spark 1.9s ease-in-out infinite; opacity: 0; }
.spark i { display: block; width: 100%; height: 100%; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); transform: scale(var(--sz, 1)); }
@keyframes spark { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
.hand-hit { position: absolute; border: 0; background: transparent; padding: 0; z-index: 5; border-radius: 40%; }
.hand-hit:focus-visible { outline: 6px dashed #fff; }
.htag {
  position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; direction: rtl;
  font: 900 46px/1.1 var(--f); color: #fff; padding: 14px 30px 16px; border-radius: 999px; border: 6px solid #fff;
  background: linear-gradient(var(--purple-2), var(--purple)); box-shadow: 0 9px 0 var(--purple-d), 0 18px 28px rgba(0,0,0,.25);
  animation: tagBob 1.2s ease-in-out infinite;
}
.htag::after { content: ''; position: absolute; left: 50%; bottom: -22px; margin-left: -16px; border: 16px solid transparent; border-top-color: #fff; border-bottom: 0; }
.htag.did { background: linear-gradient(#ffe680, #ffc21a); color: #5a3a00; box-shadow: 0 9px 0 var(--yellow-d), 0 18px 28px rgba(0,0,0,.2); }
.htag .finger { position: absolute; left: -40px; bottom: -64px; font-size: 70px; animation: finger .9s ease-in-out infinite; }
.htag.call { animation: tagBob .5s ease-in-out infinite; }
@keyframes tagBob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -118%) scale(1.05); } }
@keyframes finger { 50% { transform: translate(-8px, 14px) rotate(-12deg); } }
.hbadge {
  position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; direction: rtl;
  font: 800 36px/1 var(--f); color: var(--ink-2); padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,.93); box-shadow: 0 6px 0 rgba(0,110,150,.35);
}
.hbadge.mine { background: linear-gradient(#fff0a0, #ffc21a); color: #5a3a00; box-shadow: 0 6px 0 var(--yellow-d); }
.hbadge.done { background: rgba(35,48,74,.78); color: #fff; box-shadow: none; }
.hbadge.shake { animation: badgeShake .45s; }
@keyframes badgeShake { 20%, 60% { transform: translate(-58%, -50%) rotate(-6deg); } 40%, 80% { transform: translate(-42%, -50%) rotate(6deg); } }

/* ---------- סובבו את הטלפון ---------- */

/* ---------- טוסט, קונפטי, כוכבים ---------- */
#toast {
  position: absolute; bottom: 20px; left: 50%; z-index: 70; max-width: 80%; text-align: center;
  transform: translate(-50%, 160%); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font: 800 22px var(--f); padding: 13px 26px; border-radius: 999px; border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .35s var(--pop), opacity .2s;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; }
.confetti { position: absolute; top: -24px; height: 16px; z-index: 65; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(1100px) rotate(760deg); } }
.fly-star { position: absolute; z-index: 80; font-size: 46px; margin: -26px 0 0 -26px; pointer-events: none; transition: transform .8s cubic-bezier(.5, -0.4, .6, 1), opacity .8s; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.plus-n { position: absolute; z-index: 80; transform: translate(-50%, -50%); pointer-events: none; font: 900 40px var(--f); color: #fff; -webkit-text-stroke: 7px #c47a00; paint-order: stroke fill; animation: plusUp 1.3s ease-out forwards; white-space: nowrap; }
@keyframes plusUp { 0% { transform: translate(-50%, -50%) scale(.3); } 25% { transform: translate(-50%, -90%) scale(1.2); } 100% { transform: translate(-50%, -190%) scale(1); opacity: 0; } }

/* ---------- חלון ---------- */
#modal { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,50,90,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
#modal .mbox { max-width: calc(100% - 60px); max-height: calc(100% - 40px); overflow: auto; animation: popIn .5s var(--pop); }
#modal .mbox.wide { width: 900px; }
@keyframes popIn { from { transform: scale(.4) rotate(-4deg); opacity: 0; } }

/* ---------- חייל האור מגיב ---------- */
.coach { position: absolute; left: 18px; bottom: 0; z-index: 58; height: 300px; pointer-events: none; transform: translateY(110%); display: flex; align-items: flex-end; direction: rtl; }
.coach img { height: 100%; width: auto; filter: drop-shadow(0 8px 12px rgba(0,50,80,.3)); }
.coach.show { animation: coachUp .5s var(--pop) forwards; }
.coach.bye { animation: coachDown .35s ease-in forwards; }
@keyframes coachUp { from { transform: translateY(110%); } to { transform: translateY(12%); } }
@keyframes coachDown { from { transform: translateY(12%); } to { transform: translateY(110%); } }
.coach-bubble { position: absolute; left: 88%; top: 6%; background: #fff; border: 5px solid var(--purple); border-radius: 26px; padding: 10px 20px; font: 900 28px var(--f); color: var(--purple-d); white-space: nowrap; box-shadow: 0 6px 0 var(--purple-d); animation: popIn .45s .15s var(--pop) both; }
.coach-bubble::after { content: ''; position: absolute; left: -18px; bottom: 14px; border: 12px solid transparent; border-right-color: var(--purple); border-left: 0; }

/* ---------- מעבר מסך (איריס) ---------- */
#iris { position: absolute; inset: 0; z-index: 55; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, var(--purple-2), var(--purple-d)); clip-path: circle(0% at 50% 50%); transition: clip-path .4s cubic-bezier(.65, 0, .35, 1); }
#iris.cover { clip-path: circle(75% at 50% 50%); pointer-events: auto; }
#iris img { width: 220px; animation: spin 1.2s linear infinite; opacity: .95; }

/* ---------- מסך משימה ---------- */
.day { background: radial-gradient(ellipse at 50% -20%, #8ef5ff 0%, rgba(142,245,255,0) 55%), radial-gradient(ellipse at 50% 130%, #00b0d8 0%, rgba(0,176,216,0) 60%), var(--sky); }
.bg-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-deco img { position: absolute; opacity: .45; }
.bg-deco .deco-l { left: 8px; top: 16%; height: 82%; }
.bg-deco .deco-r { right: 10px; bottom: 2%; height: 46%; }
.bg-deco::before, .bg-deco::after { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,0) 70%); animation: blob 14s ease-in-out infinite; }
.bg-deco::before { top: -120px; right: 18%; }
.bg-deco::after { bottom: -160px; left: 22%; animation-delay: -7s; }
@keyframes blob { 50% { transform: translate(60px, 40px) scale(1.2); } }

.hud { position: relative; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 18px 6px; }
.plaque {
  display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 8px 22px 10px; border-radius: 18px;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 60px), linear-gradient(#fbe0ae, #eec07c);
  border: 4px solid #fff3d9; box-shadow: inset 0 -5px 0 rgba(160,95,30,.22), 0 6px 0 var(--wood-d), 0 10px 16px rgba(90,50,10,.25);
  transform: rotate(-2deg); animation: plaqueIn .6s var(--pop);
}
@keyframes plaqueIn { from { transform: rotate(-12deg) translateY(-80px); } }
.plaque small { font-size: 17px; font-weight: 800; color: #7a4a1c; }
.plaque b { font-size: 26px; font-weight: 900; color: #5a3310; white-space: nowrap; }
.track { list-style: none; margin: 0 auto; padding: 6px 10px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.35); border-radius: 999px; border: 3px solid rgba(255,255,255,.6); }
.track li { display: flex; align-items: center; gap: 6px; height: 46px; min-width: 46px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.55); opacity: .7; transition: all .35s var(--pop); position: relative; }
.track li + li::before { content: ''; position: absolute; right: calc(100% + 1px); top: 50%; width: 6px; height: 4px; margin-top: -2px; background: rgba(255,255,255,.7); }
.track li i { font-style: normal; font-size: 24px; width: 36px; text-align: center; }
.track li span { display: none; font: 800 19px var(--f); white-space: nowrap; padding-inline-end: 8px; }
.track li.open { cursor: pointer; }
.track li.past { background: linear-gradient(var(--green-2), var(--green)); opacity: 1; }
.track li.past::after { content: '✓'; position: absolute; top: -6px; left: -4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--green-d); font: 900 14px/20px var(--f); text-align: center; }
.track li.on { background: linear-gradient(var(--purple-2), var(--purple)); color: #fff; opacity: 1; transform: scale(1.1); box-shadow: 0 4px 0 var(--purple-d); padding: 0 8px; }
.track li.on span { display: inline; }
.hud-end { display: flex; align-items: center; gap: 10px; }
.step-area { position: relative; z-index: 2; flex: 1; min-height: 0; padding: 8px 30px 22px; }
.step { height: 100%; }
.preview-badge { position: absolute; bottom: 8px; right: 10px; z-index: 50; background: var(--coral); color: #fff; font: 700 15px var(--f); padding: 4px 12px; border-radius: 999px; }

/* ---------- תדריך ---------- */
.brief { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px; height: 100%; }
.brief-sol { height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 250px; }
.poser { transform-origin: 50% 100%; filter: drop-shadow(0 12px 16px rgba(0,50,80,.3)); }
.brief-img { height: 100%; max-height: 520px; width: auto; animation: breathe 3.6s ease-in-out infinite; }
.brief-vid { height: 100%; aspect-ratio: 720 / 900; max-height: 560px; }
.brief-talk { align-self: center; display: flex; flex-direction: column; gap: 22px; padding-bottom: 6px; }
.bubble {
  position: relative; background: #fff; border-radius: 34px; border: 6px solid var(--purple); padding: 18px 26px 18px 66px;
  font: 700 24px/1.45 var(--f); color: var(--ink); box-shadow: 0 8px 0 var(--purple-d), 0 18px 30px rgba(40,10,120,.2);
  animation: popIn .5s var(--pop); cursor: pointer;
}
.bubble::before { content: ''; position: absolute; right: -34px; bottom: 40px; border: 18px solid transparent; border-left-color: var(--purple); border-right: 0; border-width: 18px 0 18px 30px; }
.bubble::after { content: ''; position: absolute; right: -22px; bottom: 44px; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 14px 0 14px 24px; }
.bubble-text { margin: 0; min-height: 3em; }
.bubble .speak { position: absolute; left: 12px; top: 12px; width: 50px; height: 50px; font-size: 22px; }
.mission {
  position: relative; display: flex; align-items: center; gap: 18px; background: linear-gradient(#fff9d8, #ffe98f); border-radius: 18px; padding: 14px 22px;
  box-shadow: 0 8px 16px rgba(120,80,0,.2); transform: rotate(-1.2deg) translateY(30px) scale(.9); opacity: 0;
  transition: all .5s var(--pop);
}
.mission.show { transform: rotate(-1.2deg); opacity: 1; }
.mission .pin { position: absolute; top: -12px; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9aa6, var(--coral)); box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.mission small { font-size: 19px; font-weight: 900; color: #a15c00; }
.mission p { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: #4a3200; line-height: 1.3; }
.m-txt { flex: 1; min-width: 0; }
.mission .gbtn { flex-shrink: 0; }

/* ---------- פריסות משותפות ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px; height: 100%; align-items: center; }
.side { display: flex; flex-direction: column; min-width: 0; }
.visual { height: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
.visual.col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.stack { height: 100%; display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 0; }
.stack > .cta-row { margin-top: 4px; }
.stack-head { text-align: center; }
.stack-head .lead { margin: 8px 0 0; }

/* ---------- צילום ---------- */
.polaroid { background: #fff; padding: 14px 14px 56px; border-radius: 16px; box-shadow: 0 16px 30px rgba(0,50,80,.3); transform: rotate(-2.5deg); width: min(100cqw, 460px, 110cqh); aspect-ratio: 1 / .92; position: relative; }
.polaroid::after { content: ''; position: absolute; top: -14px; left: 50%; width: 120px; height: 34px; margin-left: -60px; background: rgba(255,240,170,.8); transform: rotate(3deg); box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.ph-empty { width: 100%; height: 100%; border-radius: 8px; border: 4px dashed #b9d6ea; background: #f2fbff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ph-empty span { font-size: 90px; animation: floaty 2.4s ease-in-out infinite; }
.ph-empty small { font-size: 19px; color: #6c8499; font-weight: 700; }
.cam-btn {
  display: flex; align-items: center; gap: 16px; width: 100%; border: 5px dashed #fff; border-radius: 28px; padding: 16px 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.15)); font: 900 27px var(--f); color: var(--purple-d);
  transition: transform .15s var(--pop);
}
.cam-btn:active { transform: scale(.97); }
.cam-ico { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: radial-gradient(circle at 35% 30%, #fff, #ffe680); box-shadow: 0 5px 0 var(--yellow-d); flex-shrink: 0; animation: camWiggle 2.4s ease-in-out infinite; }
@keyframes camWiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 85% { transform: rotate(12deg); } }

/* ---------- יום 1: חידון ---------- */
.quiz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; height: 100%; container-type: size; }
.q-side { display: flex; flex-direction: column; gap: 10px; }
.qdots { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.qdots li { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 900 20px var(--f); background: rgba(255,255,255,.55); color: var(--ink-2); border: 3px solid rgba(255,255,255,.8); }
.qdots li.cur { background: #fff; color: var(--purple); transform: scale(1.12); box-shadow: 0 4px 0 var(--sky-d); }
.qdots li.ok { background: var(--green); color: #fff; animation: chipOn .4s var(--pop); }
.qdots li.bad { background: var(--coral); color: #fff; animation: chipOn .4s var(--pop); }
.q-num { font-size: 20px; font-weight: 800; color: #0d5a70; }
.q-title { margin: 0; font-size: 38px; font-weight: 900; line-height: 1.2; color: #fff; -webkit-text-stroke: 7px var(--purple-d); paint-order: stroke fill; text-shadow: 0 5px 0 var(--purple-d); }
.q-ans { display: flex; gap: 16px; margin-top: 8px; }
.q-ans .gbtn { flex: 1; }
.q-ans .gbtn.picked { transform: scale(1.06); }
.q-fb { display: none; background: #fff; border-radius: 24px; padding: 16px 22px; border: 5px solid var(--green); box-shadow: 0 6px 0 rgba(0,0,0,.1); }
.q-fb.show { display: flex; align-items: center; gap: 16px; animation: popIn .45s var(--pop); }
.q-fb.bad { border-color: var(--coral); }
.q-fb p { margin: 0; flex: 1; font-size: 22px; font-weight: 700; }
.q-fb.ok b { color: var(--green-d); } .q-fb.bad b { color: var(--coral-d); }
.q-photo { position: relative; width: min(44cqw, 92cqh); aspect-ratio: 1; border: 12px solid #fff; border-radius: 30px; overflow: hidden; transform: rotate(2deg); box-shadow: 0 18px 30px rgba(0,50,80,.3); animation: dropIn .55s var(--pop); background: #fff; }
.q-photo img { width: 100%; height: 100%; object-fit: cover; }
.stamp { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.25); }
.stamp b { font: 900 70px var(--f); padding: 8px 30px; border: 10px solid; border-radius: 22px; transform: rotate(-14deg); background: rgba(255,255,255,.85); animation: stampIn .35s cubic-bezier(.3, 1.8, .5, 1); }
.stamp.k b { color: var(--green-d); } .stamp.nk b { color: var(--coral-d); }
@keyframes stampIn { from { transform: rotate(-14deg) scale(3); opacity: 0; } }
.result { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: popIn .5s var(--pop); }
.big-stars { display: flex; gap: 14px; align-items: flex-end; }
.big-stars span { font-size: 96px; line-height: 1; filter: grayscale(1) brightness(1.6) opacity(.55); animation: starIn .6s var(--pop) both; }
.big-stars span:nth-child(2) { font-size: 124px; }
.big-stars span.on { filter: drop-shadow(0 6px 0 var(--yellow-d)) drop-shadow(0 0 22px rgba(255,210,63,.9)); }
@keyframes starIn { from { transform: scale(0) rotate(-180deg); } }

/* ---------- יום 1: עיצוב הסוכה ---------- */
.design { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr); gap: 26px; height: 100%; }
.wiz { display: flex; flex-direction: column; min-height: 0; padding: 20px 24px; }
.wiz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wiz-top small { font-size: 18px; font-weight: 800; color: #6c8499; }
.wiz-body { flex: 1; min-height: 0; overflow: auto; padding: 4px; }
.wiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.wiz-nav .gbtn:last-child { margin-inline-start: auto; }
.fam { display: flex; align-items: center; gap: 12px; font: 900 30px var(--f); color: var(--purple-d); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.swatches button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 18px var(--f); color: var(--ink-2); }
.swatches button::before { content: ''; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 50%), var(--c); border: 5px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.15); transition: transform .25s var(--pop); }
.swatches button.on::before { transform: scale(1.18); box-shadow: 0 0 0 5px var(--purple), 0 6px 0 rgba(0,0,0,.15); }
.swatches button.on { color: var(--purple-d); font-weight: 900; }
.tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tcard { border: 4px solid #fff; border-radius: 22px; background: #f3fbff; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 20px var(--f); box-shadow: 0 5px 0 #c6d7e8; transition: transform .2s var(--pop); }
.tcard img { width: 100%; aspect-ratio: 1.3; object-fit: contain; }
.tcard.on { border-color: var(--purple); background: #efe8ff; transform: scale(1.05); box-shadow: 0 5px 0 var(--purple-d); }
.counter { display: block; margin-top: 10px; font-size: 18px; font-weight: 800; color: #6c8499; text-align: center; }
.scene-box { container-type: size; height: 100%; min-height: 0; display: grid; place-items: center; }
.sk-scene { position: relative; width: min(100cqw, 133.33cqh); container-type: inline-size; border-radius: 26px; overflow: hidden; border: 8px solid #fff; box-shadow: 0 16px 30px rgba(0,50,80,.3); }
.sk-bg { width: 100%; }
.sk-obj { position: absolute; filter: drop-shadow(0 1.2cqw 1cqw rgba(60,40,20,.28)); transition: left .4s var(--pop), top .4s var(--pop), width .4s; }
.sk-obj.boing { animation: boing .55s var(--pop); }
@keyframes boing { 0% { transform: scale(1); } 30% { transform: scale(1.12, .88); } 60% { transform: scale(.95, 1.06) translateY(-4%); } 100% { transform: scale(1); } }
.sk-sign img { width: 100%; }
.sk-sign span { position: absolute; inset: 30% 8% 10%; display: grid; place-items: center; text-align: center; font-weight: 900; color: #5a3a1c; line-height: 1.05; }
.sk-items { position: absolute; inset: 0; pointer-events: none; }
.sk-item { position: absolute; transform: translate(-50%, -100%); font-size: 4.3cqw; line-height: 1; display: flex; flex-direction: column; align-items: center; animation: itemIn .55s var(--pop); filter: drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.25)); }
.sk-item span { position: relative; z-index: 1; }
.sk-item.thing { font-size: 4cqw; }
.sk-item.big { font-size: 5.6cqw; }
.sk-item .plate { position: absolute; bottom: -.6cqw; width: 6.6cqw; height: 1.9cqw; border-radius: 50%; background: radial-gradient(ellipse, #fff 55%, #dfe5ec 70%, #fff 80%); box-shadow: 0 .3cqw .4cqw rgba(0,0,0,.2); }
.sk-item.out { animation: itemOut .25s forwards; }
@keyframes itemIn { 0% { transform: translate(-50%, -300%) scale(.3); opacity: 0; } 60% { transform: translate(-50%, -90%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -100%) scale(1); } }
@keyframes itemOut { to { transform: translate(-50%, -100%) scale(0); opacity: 0; } }

/* ---------- יום 1: שיתוף ---------- */
.share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; height: 100%; container-type: size; }
.status { font-size: 23px; font-weight: 800; margin: 12px 0 10px; color: #0d5a70; }
.status.ok { color: var(--green-d); background: #fff; border-radius: 16px; padding: 8px 14px; animation: popIn .4s var(--pop); }
.frame-pic { width: min(50cqw, 96cqh); aspect-ratio: 1; display: grid; place-items: center; }
.frame-pic img { width: 100%; border-radius: 22px; box-shadow: 0 18px 34px rgba(0,50,80,.35); transform: rotate(2deg); }
.loader { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 22px; font-weight: 800; color: #0d5a70; }
.loader i { width: 70px; height: 70px; border-radius: 50%; border: 9px solid rgba(255,255,255,.5); border-top-color: var(--purple); animation: spin .8s linear infinite; }

/* ---------- יום 2: פאזל ---------- */
.pz-box { width: min(100cqw, 100cqh); aspect-ratio: 1; }
.puzzle { display: grid; gap: 4px; width: 100%; height: 100%; padding: 6px; background: var(--purple); border-radius: 22px; border: 6px solid #fff; box-shadow: 0 16px 30px rgba(0,50,80,.3); touch-action: manipulation; }
.puzzle .pc { border: 0; padding: 0; border-radius: 8px; background-repeat: no-repeat; transition: transform .18s var(--pop), box-shadow .18s; }
.puzzle .pc.sel { transform: scale(.88) rotate(-3deg); box-shadow: 0 0 0 5px var(--yellow), 0 8px 16px rgba(0,0,0,.4); z-index: 2; position: relative; }
.puzzle .pc.swapped { animation: swapPop .35s var(--pop); }
@keyframes swapPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.puzzle.solved { background: var(--green); gap: 0; transition: gap .5s; }
.puzzle.solved .pc { border-radius: 0; }
.pz-info { display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,.5); border-radius: 22px; padding: 12px; }
.pz-thumb { width: 110px; height: 110px; border-radius: 14px; border: 5px solid #fff; object-fit: cover; box-shadow: 0 5px 10px rgba(0,0,0,.15); }
.stat { font-size: 24px; font-weight: 800; margin-bottom: 8px; }

/* ---------- יום 3: ריקוד ולהקה ---------- */
.boombox { position: relative; width: min(92cqw, 150cqh, 560px); }
.bb-handle { width: 46%; height: 34px; margin: 0 auto -6px; border: 12px solid #3a3f52; border-bottom: 0; border-radius: 30px 30px 0 0; }
.bb-body { display: flex; align-items: center; gap: 4%; padding: 5%; border-radius: 40px; background: linear-gradient(#ff7a8a, var(--coral)); border: 7px solid #fff; box-shadow: inset 0 -12px 0 rgba(0,0,0,.12), 0 12px 0 var(--coral-d), 0 22px 30px rgba(0,0,0,.25); }
.cone { flex: 1; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #555c70 0 18%, #2a2e3b 20% 44%, #3d4356 46% 60%, #23262f 62%); border: 8px solid #ffd4da; transition: transform .1s; }
.boombox.on .cone { animation: thump .47s ease-in-out infinite; }
@keyframes thump { 30% { transform: scale(1.1); } }
.bb-mid { flex: 1.1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.eq { display: flex; gap: 6px; height: 70px; align-items: flex-end; background: #23262f; padding: 8px; border-radius: 12px; width: 100%; justify-content: center; }
.eq i { width: 14%; height: 20%; background: linear-gradient(var(--yellow), var(--green)); border-radius: 3px; }
.boombox.on .eq i { animation: eq .5s ease-in-out infinite alternate; }
@keyframes eq { from { height: 15%; } to { height: 100%; } }
.ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--yellow) calc(var(--p) * 360deg), rgba(255,255,255,.35) 0); }
.ring span { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 900 26px var(--f); color: var(--coral-d); }
.play-big { width: 110px; height: 110px; border-radius: 50%; border: 8px solid #fff; background: radial-gradient(circle at 35% 30%, #7dffa9, var(--green)); color: #fff; font-size: 44px; box-shadow: 0 9px 0 var(--green-d), 0 16px 24px rgba(0,0,0,.25); animation: ready 1.3s ease-in-out infinite; }
.play-big:active { transform: translateY(6px); }
.q-label { font-size: 23px; font-weight: 900; color: var(--purple-d); margin: 6px 0 10px; }
.reveal { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 420px; }
.reveal small { font-size: 22px; font-weight: 800; color: var(--ink-2); }
.reveal .big-emoji { font-size: 120px; line-height: 1.1; animation: wiggleE .5s ease-in-out infinite alternate; }
@keyframes wiggleE { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(12deg) scale(1.08); } }
.reveal .en { direction: ltr; font: 900 34px var(--f); color: var(--coral); }
.reveal p { font-size: 20px; margin: 4px 0 12px; }
.band-wrap { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.band-bar { display: flex; align-items: center; gap: 18px; }
.band-bar p { margin: 0; flex: 1; font-size: 23px; font-weight: 800; }
.band-bar p b { background: #fff; border-radius: 999px; padding: 2px 12px; color: var(--purple); }
.band-box { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.band { position: relative; width: min(100cqw, 148.8cqh); }
.band img { width: 100%; }
.inst { position: absolute; transform: translate(-50%, -50%); width: 15%; aspect-ratio: .55; border: 0; border-radius: 40px; background: rgba(255,255,255,0); transition: background .2s; }
.inst:active { background: rgba(255,255,255,.2); }
.inst.hit { animation: instHit .5s var(--pop); }
@keyframes instHit { 30% { transform: translate(-50%, -50%) scale(1.15) rotate(-5deg); } }
.inst .lbl { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; background: #fff; border-radius: 16px; padding: 4px 12px; font: 800 17px/1.2 var(--f); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.inst .lbl bdi { direction: ltr; color: var(--coral); font-size: 15px; }
.inst.seen .lbl { background: var(--yellow); }

/* ---------- יום 4 ---------- */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; width: 100%; }
.note { border: 0; min-height: 96px; padding: 14px 16px; font: 800 24px/1.3 var(--f); color: #3d2a00; background: linear-gradient(#fffbe0, #fff09a); border-radius: 6px 6px 22px 6px; box-shadow: 0 8px 14px rgba(120,80,0,.2); transform: rotate(var(--r)); transition: transform .25s var(--pop); }
.note:nth-child(3n+2) { background: linear-gradient(#e7fbff, #b9f0ff); }
.note:nth-child(3n) { background: linear-gradient(#fff0f5, #ffd0e0); }
.note.on { transform: rotate(0) scale(1.08); box-shadow: 0 0 0 6px var(--purple), 0 12px 20px rgba(0,0,0,.2); }
.stack .cta-row input { flex: 1; max-width: 520px; }
.howto { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.howto li { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 10px 16px; font-size: 24px; font-weight: 800; box-shadow: 0 5px 0 #c6d7e8; animation: stepIn .5s var(--pop) both; }
.howto li:nth-child(2) { animation-delay: .12s; } .howto li:nth-child(3) { animation-delay: .24s; } .howto li:nth-child(4) { animation-delay: .36s; }
.howto li span { font-size: 32px; }
.paper { position: relative; width: min(90cqw, 120cqh, 520px); aspect-ratio: 1.3; background: #fff repeating-linear-gradient(#fff 0 38px, #d9ecff 38px 40px); border-radius: 12px; box-shadow: 0 18px 30px rgba(0,50,80,.3); transform: rotate(-3deg); display: grid; place-items: center; padding: 30px; }
.paper p { margin: 0; font: 900 40px/1.3 var(--f); color: var(--purple-d); text-align: center; }
.paper .crayons { position: absolute; top: -30px; left: -20px; font-size: 70px; transform: rotate(-30deg); animation: floaty 2s ease-in-out infinite; }
.doodle { position: absolute; font-size: 44px; animation: floaty 2.6s ease-in-out infinite; }
.d1 { top: 12px; right: 20px; } .d2 { bottom: 14px; left: 22px; animation-delay: -1s; } .d3 { bottom: 16px; right: 30px; animation-delay: -1.7s; }
.spots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; width: 100%; }
.spot { border: 5px solid #fff; background: linear-gradient(#fff, #eefaff); border-radius: 28px; padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 7px 0 #c6d7e8, 0 12px 18px rgba(0,60,100,.15); transition: transform .25s var(--pop); }
.spot .e { font-size: 70px; line-height: 1.1; }
.spot b { font-size: 26px; }
.spot .en { direction: ltr; font: 900 21px var(--f); color: var(--coral); }
.spot.on { border-color: var(--purple); background: #efe8ff; transform: translateY(-8px) scale(1.05); box-shadow: 0 7px 0 var(--purple-d); }
.hang-scene { position: relative; width: min(100cqw, 133cqh); aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; border: 7px solid #fff; box-shadow: 0 16px 30px rgba(0,50,80,.3); }
.hang-scene .bg { position: absolute; inset: 0; }
.hang-scene .poster { position: absolute; background: #fff; padding: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.3); transform: rotate(-3deg); display: grid; place-items: center; }
.hang-scene .poster p { margin: 0; text-align: center; font: 800 19px/1.25 var(--f); color: var(--purple-d); padding: 6px; }
.hang-scene .poster img { width: 100%; height: 100%; object-fit: cover; }
.hang-scene .poster::before { content: ''; position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--coral); box-shadow: 0 2px 3px rgba(0,0,0,.4); z-index: 1; }
.hang-in { animation: hangIn .8s var(--pop); }
@keyframes hangIn { from { transform: translateY(-140%) rotate(16deg); opacity: 0; } }

/* ---------- יום 5 ---------- */
.flips { flex: 1; min-height: 0; max-height: 330px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; width: 100%; perspective: 1200px; }
.flip { border: 0; padding: 0; background: none; height: 100%; min-height: 0; transform: rotate(var(--r)); }
.f-in { position: relative; width: 100%; height: 100%; transition: transform .6s var(--pop); transform-style: preserve-3d; }
.flip.open .f-in { transform: rotateY(180deg); }
.f-front, .f-back { position: absolute; inset: 0; border-radius: 26px; border: 6px solid #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px; box-shadow: 0 10px 0 rgba(0,0,0,.12), 0 16px 24px rgba(0,50,80,.2); }
.f-front { background: linear-gradient(160deg, var(--purple-2), var(--purple-d)); color: #fff; }
.f-front span { font-size: 80px; animation: floaty 2.2s ease-in-out infinite; }
.f-front b { font-size: 34px; font-weight: 900; }
.f-front small { font-size: 18px; opacity: .85; }
.f-back { background: linear-gradient(#fffbe8, #ffeaa0); transform: rotateY(180deg); }
.f-back p { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.4; color: #4a3200; text-align: center; }
.diff { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.diff-bar { display: flex; align-items: center; gap: 16px; }
.diff-bar p { margin: 0; flex: 1; font-size: 22px; font-weight: 800; }
.diff-bar p b { background: #fff; border-radius: 999px; padding: 2px 14px; color: var(--green-d); }
.diff-bar .cta-row { margin: 0; }
.diff-game { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; justify-items: center; container-type: size; }
.diff-game .loader { grid-column: 1 / -1; }
.pane { position: relative; max-width: 100%; max-height: 100%; line-height: 0; border-radius: 18px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 10px 20px rgba(0,50,80,.25); }
.pane canvas { max-width: calc(50cqw - 20px); max-height: calc(100cqh - 12px); width: auto; height: auto; display: block; cursor: crosshair; }
.diff-mark { position: absolute; aspect-ratio: 1; border: 5px solid #3ee08a; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 3px #fff, 0 0 18px #3ee08a; animation: markIn .45s var(--pop); }
@keyframes markIn { from { transform: translate(-50%, -50%) scale(0); } }
.miss-mark { position: absolute; transform: translate(-50%, -50%); font: 900 44px var(--f); color: var(--coral); pointer-events: none; animation: missUp .9s forwards; line-height: 1; }
@keyframes missUp { to { transform: translate(-50%, -110%); opacity: 0; } }

/* ---------- לוח המפקדים ---------- */
.board { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-left: 190px; }
.board-head .sub { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: #0d5a70; }
.bgrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px; padding: 16px 10px 30px 200px; align-content: start; -webkit-overflow-scrolling: touch; }
.pol { margin: 0; background: #fff; padding: 10px 10px 12px; border-radius: 14px; box-shadow: 0 10px 18px rgba(0,50,80,.22); transform: rotate(-2deg); position: relative; animation: stepIn .5s var(--pop) both; }
.pol:nth-child(even) { transform: rotate(2deg); }
.pol:nth-child(3n) { transform: rotate(-1deg); }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pol figcaption { display: flex; flex-direction: column; align-items: center; margin-top: 8px; text-align: center; }
.pol figcaption b { font-size: 21px; }
.pol figcaption small { font-size: 15px; color: #6c8499; }
.pol.mine { box-shadow: 0 0 0 5px var(--yellow), 0 10px 18px rgba(0,50,80,.22); }
.pol-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--yellow); color: #5a3a00; font: 800 14px var(--f); padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 0 var(--yellow-d); }
.pol-star { aspect-ratio: 1; display: grid; place-items: center; font-size: 80px; background: linear-gradient(#f2fbff, #d8f3ff); border-radius: 8px; }
.bfilter { margin-top: 8px; }
.bfilter button { font-size: 16px; padding: 5px 12px; }
.bcount { white-space: nowrap; }
.bmore { grid-column: 1 / -1; justify-self: center; }
.pol img.lz { background: linear-gradient(100deg, #e3f5fb 30%, #f7fdff 50%, #e3f5fb 70%) 0 0 / 300% 100%; animation: lzShine 1.3s linear infinite; }
@keyframes lzShine { to { background-position: -150% 0; } }
.board-sol { position: absolute; left: 0; bottom: -22px; height: 88%; max-height: 480px; pointer-events: none; animation: sukIn .8s var(--pop) both, breathe 3.4s 1s ease-in-out infinite; }

/* ---------- תעודת מפקד ---------- */
.player-card { display: flex; gap: 30px; align-items: stretch; width: 860px; max-width: 100%; }
.idcard { position: relative; width: 340px; flex-shrink: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(150deg, #37c878, #1c8f52); color: #fff; border: 6px solid #fff; box-shadow: 0 10px 0 #136b3b, 0 18px 30px rgba(0,0,0,.25); transform: rotate(-3deg); animation: popIn .6s var(--pop); }
.id-head { background: rgba(0,0,0,.18); padding: 12px 18px; display: flex; flex-direction: column; }
.id-head span { font-size: 28px; font-weight: 900; }
.id-head small { font-size: 15px; opacity: .9; }
.id-body { display: flex; gap: 14px; padding: 18px; align-items: center; }
.id-face { width: 110px; height: 130px; border-radius: 18px; border: 5px solid #fff; background: #0BE2FE url('../assets/poses/salute.webp') 50% 4% / 190% no-repeat; flex-shrink: 0; }
.id-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.id-fields div { display: flex; flex-direction: column; border-bottom: 3px dotted rgba(255,255,255,.6); padding-bottom: 4px; }
.id-fields span { font-size: 14px; opacity: .85; }
.id-fields b { font-size: 21px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id-stamp { position: absolute; left: 18px; bottom: 16px; font: 900 22px/1.05 var(--f); color: var(--coral); border: 5px solid var(--coral); border-radius: 12px; padding: 6px 10px; background: rgba(255,255,255,.9); transform: rotate(-16deg) scale(3); opacity: 0; text-align: center; }
.id-stamp.show { animation: stampIn2 .4s cubic-bezier(.3, 1.8, .5, 1) forwards; }
@keyframes stampIn2 { to { transform: rotate(-16deg) scale(1); opacity: 1; } }
.id-side { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.id-q { display: flex; flex-direction: column; }
.chips.scroll { max-height: 250px; overflow-y: auto; padding: 4px 2px 10px; }
.chips.scroll .chip { font-size: 19px; padding: 7px 14px; }
.chips.cls { gap: 12px; }

/* ---------- סגור בשבת ---------- */
.closed { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 0%, #3b2a8a, #16124a 70%); }
.closed::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 70%, #fff, transparent), radial-gradient(3px 3px at 70% 30%, #fff, transparent), radial-gradient(2px 2px at 85% 60%, #fff, transparent), radial-gradient(2px 2px at 55% 15%, #fff, transparent), radial-gradient(3px 3px at 20% 85%, #fff, transparent); animation: twinkleBg 3s ease-in-out infinite; }
@keyframes twinkleBg { 50% { opacity: .5; } }
.closed .moon { position: absolute; top: 30px; right: 60px; font-size: 110px; animation: floaty 4s ease-in-out infinite; }
.closed-sol { position: absolute; left: 6%; bottom: -10px; height: 80%; }
.closed-card { max-width: 560px; text-align: center; margin-inline-start: 18%; }
.closed-card p { font-size: 24px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}

/* ---------- מצב תצוגה לצוות (ALLOW_PREVIEW) ---------- */
.prev-btn { height: 44px; padding: 0 14px; border: 3px solid var(--ink, #1d1a2b); border-radius: 14px 10px 16px 9px; background: var(--sh-yellow, #FDB515); color: var(--ink, #1d1a2b); font: 900 19px var(--f); white-space: nowrap; box-shadow: 0 0 0 3px #fff, 3px 4px 0 3px rgba(29,26,43,.88); cursor: pointer; rotate: -2deg; }
.prev-btn:active { transform: translate(2px, 3px); }
.prev-pick { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 10px 18px; }
.prev-days { justify-content: center; }
.prev-days .chip { flex-direction: column; gap: 2px; font-size: 26px; }
.prev-days .chip small { font-size: 15px; font-weight: 700; opacity: .8; }
.home > .prev-btn { position: absolute; top: 92px; left: 20px; z-index: 8; }


/* ---------- יום 1: אביזרים מצוירים בסוכה (במקום אימוג'י) ---------- */
.sk-item.obj { font-size: 0; }
.sk-item.obj img { display: block; width: 100%; height: auto; }
.chips.emo .chip .e-img { width: 52px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }

/* ---------- שבת וחג: רק "חג שמח" ---------- */
.scr.closed { display: grid; place-items: center; background: var(--sky, #0BE2FE); }
.scr.closed::before { display: none; }
.closed .chag { margin: 0; font: 900 120px/1.1 var(--f); color: #fff; text-shadow: 0 6px 0 var(--sh-purple-d, #7A2F71), 0 14px 30px rgba(0,0,0,.18); }
body.is-closed #iris, body.is-closed #kb { display: none !important; }
/* סוף הפעילות: חייל מצדיע + הודעת סיום (מידות במסך המשחק הלוגי — תמיד לרוחב, גם בטלפון מסובב) */
.scr.closed.ended { grid-template-columns: auto minmax(0, 1fr); gap: 40px; padding: 30px 70px; align-content: center; }
.ended-sol { height: 440px; width: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.ended-txt { text-align: center; }
.ended .chag { font-size: 104px; white-space: nowrap; }
.ended-txt p { margin: 18px auto 0; max-width: 15em; font: 800 38px/1.35 var(--f); color: #fff; text-shadow: 0 3px 0 var(--sh-purple-d, #7A2F71), 0 8px 20px rgba(0,0,0,.15); }

/* ---------- תדריך: הטקסט של המשימה לא נמעך (בטלפון לאורך/מסך צר הכפתור יורד מתחת לטקסט) ---------- */
.brief { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
.brief-sol { min-width: 0; }
.brief-sol .sol-actor { height: auto; width: min(100%, 432px); max-height: none; }
.mission { flex-wrap: wrap; row-gap: 12px; }
.mission .m-txt { flex: 1 1 300px; min-width: 0; }
.mission .gbtn { flex: 0 0 auto; margin-inline-start: auto; }

/* ---------- מסך פתיחה: הסוכה קטנה יותר, הכפתור ברווח שבינה לבין החייל, והטיפ — טקסט פשוט על הרקע ---------- */
.splash .sp-suk { width: min(420px, 34%); }
.splash .sp-sol { height: 62%; }
.sp-bottom { transform: translateX(-50%) scale(var(--fit, 1)); transform-origin: 50% 100%; text-align: center; }
.splash .start { font-size: 36px; padding-inline: 34px; white-space: nowrap; }
.sp-bottom small, .sp-bottom small:is(*) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0;
  color: var(--ink, #1d1a2b); font-weight: 800; font-size: 20px; line-height: 1.3; text-shadow: 0 1px 0 rgba(255,255,255,.7); max-width: 100%; }

/* ---------- מסך פתיחה — קומפוזיציה מלאה (גדלים יחסיים לגודל המסך) ---------- */
.splash { container-type: size; background: radial-gradient(ellipse 60% 70% at 50% 42%, #9af7ff 0%, rgba(154,247,255,0) 70%), var(--sky); }
.splash .sp-glow { position: absolute; left: -6cqw; bottom: -18cqh; width: 52cqw; height: 80cqh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,247,190,.75), rgba(255,247,190,0)); pointer-events: none; }
.splash .sp-title { left: 50%; top: 0; width: min(52cqw, 112cqh); translate: -50% 0; }
.splash .sp-logos { top: -2cqh; right: auto; left: 1.5cqw; width: min(20cqw, 40cqh); }
.splash .sp-suk { left: 1cqw; bottom: -1.5cqh; width: min(36cqw, 104cqh); }
.splash .sp-sol { right: 2.5cqw; bottom: -1cqh; height: min(90cqh, 37cqw); }
.splash .sp-deco { position: absolute; pointer-events: none; opacity: .95; animation: sukIn 1s .6s var(--pop) both; }
.splash .sp-v1 { right: 1.5cqw; top: 3cqh; width: min(15cqw, 30cqh); rotate: 8deg; }
.splash .sp-v3 { left: 2cqw; top: 26cqh; height: min(30cqh, 14cqw); opacity: .9; }
.sp-bottom { bottom: 4.5cqh; }
.splash .start { animation: startPulse 1.6s ease-in-out infinite; }
@keyframes startPulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }

/* ======== תיקוני "טקסט חתוך" בטלפונים צרים (בדיקה 25.9) ======== */
/* חידון: ההסבר לא נמעך ליד הכפתור; אחרי תשובה כפתורי כן/לא נעלמים כדי לפנות מקום */
.q-fb.show { flex-wrap: wrap; row-gap: 10px; padding: 12px 18px; }
.q-fb p { flex: 1 1 240px; min-width: 0; font-size: 20px; }
.q-fb .gbtn { margin-inline-start: auto; }
.q-side:has(.q-fb.show) .q-ans { display: none; }
/* שלבי צילום: עמודת הטקסט קומפקטית כך שהקישור "לדלג" נשאר גלוי */
.split .side .gbtn.big { font-size: 24px; padding: 12px 22px; white-space: normal; max-width: 100%; }
.split .side .lead { margin: 8px 0 10px; }
.split .side .cam-btn { padding: 10px 16px; }
.split .side .cam-btn .cam-ico { width: 54px; height: 54px; font-size: 28px; }
.split .side .cta-row { margin-top: 10px; row-gap: 4px; }
.split .side .hint { margin-top: 4px; }
/* סרגל עליון: לא בורח מהמסך כשיש הרבה שלבים */
.hud { gap: 8px; padding-inline: 12px; }
.hud .track { gap: 4px; padding: 5px 8px; min-width: 0; }
.track li i { width: 28px; font-size: 21px; }
.track li.on span { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.hud-end { gap: 6px; flex-shrink: 0; }
/* אשף העיצוב: עמודות שלא בורחות, והמונה תמיד גלוי */
.chips.emo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chips.emo .chip { min-width: 0; padding: 6px 4px 8px; font-size: 17px; }
.chips.emo .chip .e-img { height: 36px; }
.swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.swatches button { min-width: 0; }
.swatches button::before { width: min(66px, 100%); height: auto; aspect-ratio: 1; }
.wiz-body .counter { position: sticky; bottom: 0; margin: 6px 0 0; padding: 2px 0; background: var(--paper, #fffdf5); }
/* תדריך: הכרטיס והכפתור נשארים בתוך המסך גם כשהבועה ארוכה */
.brief-talk { align-self: stretch; min-height: 0; max-height: 100%; justify-content: center; gap: 16px; }
.brief-talk .bubble { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.brief-talk .bubble-text { min-height: 0; }
.brief .bubble { font-size: 21px; line-height: 1.35; padding-top: 14px; padding-bottom: 14px; }
/* רשימת הסניפים: כולם נכנסים (ואם בכל זאת גוללים — רמז בדהייה) */
.chips.scroll { max-height: 320px; -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.chips.scroll .chip { font-size: 17px; padding: 6px 12px; }
.brief .bubble { min-height: 80px; }
.chips.emo .chip { padding: 5px 4px 6px; gap: 0; }
.chips.emo .chip .e-img { height: 32px; }
/* אשף העיצוב: כותרת השאלה בשורה אחת ככל האפשר, ופחות ריווח — כל האביזרים נכנסים גם בטלפון קטן */
.wiz { padding: 14px 18px; }
.wiz > .h2 { font-size: 28px; margin-bottom: 8px; }
.wiz-top { margin-bottom: 4px; }
.wiz-nav { margin-top: 8px; }
/* חלון הבונוס (תמונה של הסוכה האמיתית): התמונה לא בורחת מקצה החלון */
#modal .split.tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#modal .split.tight > .polaroid { width: min(100%, 460px); justify-self: center; }