/* ===== ערכת צבעי שלהבות חב"ד + סגנון גרפיטי-מדבקות =====
   נטען אחרי game.css. רקע הפיגמה, הסוכה והחייל לא משתנים — רק שכבת הממשק שלנו.
   צבעי הלוגו: ש סגול · ל גל טורקיז · ה ליים · ב ורוד-אדום · ו כתום · ת צהוב */

/* פונטים לכותרות-תג קצרות (עברית + לטינית) */
@font-face { font-family: 'Rubik Wet Paint'; src: url('../assets/fonts/RubikWetPaint-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; font-display: swap; }
@font-face { font-family: 'Rubik Wet Paint'; src: url('../assets/fonts/RubikWetPaint-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+FEFF; font-display: swap; }
@font-face { font-family: 'Rubik Bubbles'; src: url('../assets/fonts/RubikBubbles-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; font-display: swap; }
@font-face { font-family: 'Rubik Bubbles'; src: url('../assets/fonts/RubikBubbles-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+FEFF; font-display: swap; }
@font-face { font-family: 'Rubik Dirt'; src: url('../assets/fonts/RubikDirt-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; font-display: swap; }
@font-face { font-family: 'Rubik Dirt'; src: url('../assets/fonts/RubikDirt-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+FEFF; font-display: swap; }

:root {
  /* לוגו שלהבות */
  --sh-purple: #A6479A; --sh-purple-l: #C77BBB; --sh-purple-d: #7A2F71;
  --sh-teal: #0AA0B4;   --sh-teal-l: #22BFD4;   --sh-teal-d: #087F90;
  --sh-lime: #B9CB31;   --sh-lime-l: #D3E163;   --sh-lime-d: #8C9C12;
  --sh-pink: #E8285E;   --sh-pink-l: #F2648A;   --sh-pink-d: #B5164A;
  --sh-orange: #F06B24; --sh-orange-l: #F79457; --sh-orange-d: #C04C0E;
  --sh-yellow: #FDB515; --sh-yellow-l: #FFD466; --sh-yellow-d: #D08F00;

  /* מיפוי הטוקנים הישנים לצבעי הלוגו — כך כל הממשק מתיישר */
  --purple: var(--sh-purple); --purple-2: var(--sh-purple-l); --purple-d: var(--sh-purple-d); --lilac: #EBD3E7;
  --lime: var(--sh-lime); --lime-d: var(--sh-lime-d);
  --green: var(--sh-lime); --green-2: var(--sh-lime-l); --green-d: var(--sh-lime-d);
  --coral: var(--sh-pink); --coral-d: var(--sh-pink-d);
  --yellow: var(--sh-yellow); --yellow-2: var(--sh-yellow-l); --yellow-d: var(--sh-yellow-d);
  --teal: var(--sh-teal); --teal-2: var(--sh-teal-l); --teal-d: var(--sh-teal-d);
  --orange: var(--sh-orange); --orange-d: var(--sh-orange-d);

  /* דיו ונייר של המדבקות */
  --ink: #1d1a2b; --ink-2: #4b4660; --paper: #fffdf5; --rim: #ffffff;
  --shade: rgba(29, 26, 43, .88);
  --bw: 3px;
  --sticker: 0 0 0 4px var(--rim), 4px 6px 0 4px var(--shade);
  --sticker-sm: 0 0 0 3px var(--rim), 3px 4px 0 3px var(--shade);
  --outline: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink);
  --f-tag: 'Rubik Wet Paint', var(--f);
  --f-bub: 'Rubik Bubbles', var(--f);
  --f-stamp: 'Rubik Dirt', var(--f);
  --dc: var(--sh-purple);
}
/* צבע לכל יום */
.day.d1 { --dc: var(--sh-purple); } .day.d2 { --dc: var(--sh-teal); } .day.d3 { --dc: var(--sh-orange); }
.day.d4 { --dc: var(--sh-pink); } .day.d5 { --dc: var(--sh-lime-d); }

/* ---------- כפתורים: מדבקות ויניל ---------- */
.gbtn {
  --b: var(--sh-purple); --t: #fff; --ts: var(--outline);
  border: var(--bw) solid var(--ink); border-radius: 20px 14px 22px 12px / 14px 20px 12px 22px;
  background: var(--b); color: var(--t); text-shadow: var(--ts);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), var(--sticker);
}
.gbtn::before { left: 10px; right: 10px; top: 3px; height: 42%; border-radius: 12px 12px 40% 40% / 12px 12px 16px 16px; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); }
.gbtn:active:not(:disabled) { transform: translate(4px, 6px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 0 0 4px var(--rim), 0 0 0 4px var(--shade); }
.gbtn.big { border-radius: 24px 16px 26px 14px / 16px 24px 14px 26px; }
.gbtn.huge { border-radius: 28px 18px 30px 16px / 18px 28px 16px 30px; }
.gbtn.green { --b: var(--sh-lime); --t: var(--ink); --ts: 0 1px 0 rgba(255,255,255,.45); }
.gbtn.coral { --b: var(--sh-pink); }
.gbtn.yellow { --b: var(--sh-yellow); --t: var(--ink); --ts: 0 1px 0 rgba(255,255,255,.5); }
.gbtn.ghost { --b: var(--paper); --t: var(--ink); --ts: none; }
.gbtn.ghost::before { display: none; }
.gbtn.wa { --b: var(--sh-teal); }
.gbtn.wa .wa-ico { border: 2.5px solid var(--ink); }
.gbtn:disabled { filter: grayscale(.5) opacity(.6); }

.ibtn {
  border: var(--bw) solid var(--ink); background: var(--paper);
  box-shadow: inset 0 -4px 0 rgba(29,26,43,.12), var(--sticker-sm);
}
.ibtn:nth-of-type(odd) { rotate: -4deg; } .ibtn:nth-of-type(even) { rotate: 3deg; }
.ibtn.off { filter: none; background: #dcd8e4; opacity: .85; }
.linkbtn { color: var(--sh-purple-d); }

.chip {
  border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 900;
  box-shadow: var(--sticker-sm);
}
.chips .chip:nth-child(3n+1) { rotate: -1.5deg; } .chips .chip:nth-child(3n+2) { rotate: 1.2deg; }
.chip.on { background: var(--sh-teal-d); color: #fff; border-color: var(--ink); text-shadow: var(--outline); box-shadow: var(--sticker-sm); position: relative; }
.chip.on::after { content: '✓'; position: absolute; top: -10px; left: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--sh-lime); border: 2.5px solid var(--ink); color: var(--ink); font: 900 14px/19px var(--f); text-align: center; text-shadow: none; }
.pills button { border: 2.5px solid var(--ink); background: var(--paper); box-shadow: 2px 3px 0 var(--shade); font-weight: 900; }
.pills button.on { background: var(--sh-teal-d); color: #fff; box-shadow: 2px 3px 0 var(--shade); }
.mini-dots i { background: var(--paper); border: 2px solid var(--ink); }
.mini-dots i.past { background: var(--sh-lime); }
.mini-dots i.on { background: var(--sh-yellow); }

/* ---------- פאנלים וכותרות ---------- */
.panel {
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 28px 22px 30px 20px / 22px 30px 20px 28px;
  box-shadow: 0 0 0 5px var(--rim), 5px 8px 0 5px var(--shade);
}
.gt {
  /* כותרות נקיות בפונט של האתר (בלי טפטופים ובלי צל סגול) */
  font-family: var(--f); font-weight: 900; letter-spacing: 0; color: var(--sh-purple-d);
  -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.gt.md, .gt.sm { -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.h2 { color: var(--sh-purple-d); }
.lead { color: var(--ink); }
.consent, .hint, .empty { color: var(--ink-2); }
input[type=text] { border: 3px solid var(--ink); border-radius: 16px; box-shadow: inset 2px 3px 0 rgba(29,26,43,.08); }
input[type=text]:focus { border-color: var(--sh-purple); box-shadow: 0 0 0 5px rgba(166,71,154,.22); }

/* ---------- מסך פתיחה ---------- */
.sp-bottom small { background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); font-weight: 900; }
.loadbar { border: var(--bw) solid var(--ink); background: var(--paper); box-shadow: 0 0 0 4px var(--rim), 4px 6px 0 4px var(--shade); }
.loadbar i { background: repeating-linear-gradient(45deg, var(--sh-yellow) 0 16px, var(--sh-orange) 16px 32px); }

/* ---------- מסך הבית ---------- */
.pchip {
  border: var(--bw) solid var(--ink); background: var(--sh-purple); color: #fff; text-shadow: var(--outline); font-weight: 900;
  box-shadow: var(--sticker-sm); rotate: -1.5deg;
}
.pchip .av { border: 2.5px solid var(--ink); background-color: var(--sh-lime); box-shadow: none; }
.pchip.new { background: var(--sh-yellow); color: var(--ink); text-shadow: none; }
.stars-pill {
  background: var(--sh-yellow); border: 2.5px solid var(--ink); color: var(--ink);
  font: 900 22px/1.2 var(--f); box-shadow: 2px 3px 0 var(--shade); rotate: 3deg;
}
.ribbon {
  background: var(--sh-pink); border: var(--bw) solid var(--ink); color: #fff; text-shadow: var(--outline); font-weight: 900;
  box-shadow: var(--sticker-sm); border-radius: 18px 12px 20px 10px;
}
/* תגית "המשימה של היום" — מדבקה עם הילת ספריי */
.htag {
  font: 900 40px/1.1 var(--f); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink);
  background: var(--sh-teal); border: 4px solid var(--ink); border-radius: 26px 18px 28px 16px / 18px 26px 16px 28px;
  box-shadow: 0 0 0 7px var(--rim), 7px 10px 0 7px var(--shade); isolation: isolate;
}
.htag::before {
  content: ''; position: absolute; z-index: -1; inset: -46px -60px; pointer-events: none; background: var(--sh-yellow);
  -webkit-mask: url('../assets/fx/speckle.svg') center / 100% 100% no-repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  mask: url('../assets/fx/speckle.svg') center / 100% 100% no-repeat, radial-gradient(closest-side, #000 30%, transparent 100%);
  opacity: .9;
}
.htag::after { border-top-color: var(--ink); bottom: -24px; }
.htag.did { background: var(--sh-yellow); color: var(--ink); -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(255,255,255,.5); box-shadow: 0 0 0 7px var(--rim), 7px 10px 0 7px var(--shade); }
.htag .finger { -webkit-text-stroke: 0; filter: drop-shadow(3px 3px 0 var(--ink)); }
/* תגיות הימים האחרים */
.hbadge {
  font-weight: 900; color: var(--ink-2); background: var(--paper); border: var(--bw) solid var(--ink);
  border-radius: 16px 12px 18px 10px; box-shadow: var(--sticker-sm); rotate: -3deg;
}
.hbadge.mine { background: var(--sh-yellow); color: var(--ink); box-shadow: var(--sticker-sm); rotate: 4deg; isolation: isolate; }
.hbadge.mine::before {
  content: ''; position: absolute; inset: -18px -24px; z-index: -1; background: var(--sh-orange);
  -webkit-mask: url('../assets/fx/splat.svg') center / contain no-repeat; mask: url('../assets/fx/splat.svg') center / contain no-repeat;
}
.hbadge.done { background: var(--sh-purple-d); color: #fff; text-shadow: var(--outline); box-shadow: var(--sticker-sm); }

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

/* ---------- טוסט, כוכבים, חלון ---------- */
#toast {
  background: var(--sh-purple); color: #fff; text-shadow: var(--outline); font-weight: 900;
  border: var(--bw) solid var(--ink); border-radius: 18px 12px 20px 10px; box-shadow: var(--sticker-sm);
}
.plus-n { -webkit-text-stroke-color: var(--ink); text-shadow: 3px 4px 0 var(--sh-orange); }
.confetti { outline: 1.5px solid rgba(29,26,43,.55); }
#modal { background: rgba(29,26,43,.55); }
.coach-bubble {
  background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 22px 16px 24px 14px;
  box-shadow: var(--sticker-sm);
}
.coach-bubble::after { border-right-color: var(--ink); }
#iris { background: radial-gradient(circle at 50% 50%, var(--sh-teal-l), var(--sh-teal-d)); }

/* ---------- מסך משימה ---------- */
/* כתמי הספריי ברקע הוסרו (נראו כמו צל כהה) */
.day::before, .day::after { display: none; }
.day-splats-off::before, .day-splats-off::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0; opacity: .16;
  -webkit-mask: url('../assets/fx/splat.svg') center / contain no-repeat; mask: url('../assets/fx/splat.svg') center / contain no-repeat;
}
.day::before { width: 300px; height: 280px; top: 70px; left: -70px; background: var(--sh-lime); rotate: -18deg; }
.day::after { width: 360px; height: 330px; bottom: -110px; right: -60px; background: var(--sh-pink); rotate: 24deg; }
.plaque {
  background: var(--dc); border: var(--bw) solid var(--ink); border-radius: 14px 20px 12px 22px;
  box-shadow: var(--sticker-sm); position: relative; padding-left: 40px;   /* מקום לתגית "יום N" בפינה */
}
.plaque small {
  position: absolute; top: -14px; left: -12px; background: var(--sh-yellow); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 10px; padding: 1px 9px; font: 900 16px/1.25 var(--f); rotate: 8deg; box-shadow: 2px 3px 0 var(--shade);
}
.plaque b { font: 900 26px/1.15 var(--f); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); }
.track { background: rgba(255,255,255,.45); border: 2.5px dashed rgba(29,26,43,.5); }
.track li { background: var(--paper); border: 2.5px solid var(--ink); opacity: 1; box-shadow: 2px 3px 0 var(--shade); }
.track li:not(.open) i { opacity: .5; filter: grayscale(.4); }
.track li + li::before { background: rgba(29,26,43,.45); }
.track li.past { background: var(--sh-lime); }
.track li.past::after { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); line-height: 16px; }
.track li.on { background: var(--dc); color: #fff; border-width: 3px; box-shadow: 0 0 0 3px var(--rim), 3px 4px 0 3px var(--shade); rotate: -2deg; }
.track li.on span { font-weight: 900; text-shadow: var(--outline); }
.preview-badge { background: var(--sh-pink); border: 2px solid var(--ink); }

/* בועת דיבור + כרטיס משימה עם מסקינג-טייפ */
.bubble { background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 26px 22px 28px 20px; box-shadow: var(--sticker); font-weight: 800; }
.bubble::before { border-left-color: var(--ink); right: -32px; }
.bubble::after { border-left-color: var(--paper); right: -24px; }
.mission {
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 22px 16px 24px 14px;
  box-shadow: var(--sticker);
}
.mission .pin { top: -15px; left: 22px; width: 92px; height: 26px; margin: 0; border-radius: 0; rotate: -6deg; background: rgba(253, 214, 102, .85); box-shadow: inset 0 0 0 40px rgba(255,255,255,.15);
  clip-path: polygon(3% 8%, 9% 0, 16% 10%, 23% 0, 30% 9%, 100% 0, 97% 20%, 100% 38%, 96% 58%, 100% 78%, 97% 100%, 88% 92%, 80% 100%, 72% 91%, 0 100%, 4% 80%, 0 60%, 4% 40%, 0 20%); }
.mission small { font: 900 20px/1.2 var(--f); color: var(--dc); }
.mission p { color: var(--ink); }

/* ---------- פריסות ---------- */
.polaroid { border: var(--bw) solid var(--ink); box-shadow: 0 0 0 5px var(--rim), 5px 8px 0 5px var(--shade); }
.polaroid::after { background: rgba(253,214,102,.85); }
.ph-empty { border-color: rgba(29,26,43,.35); background: #fff; }
.ph-empty small { color: var(--ink-2); }
.cam-btn { border: 3px dashed var(--ink); background: rgba(255,255,255,.55); color: var(--ink); }
.cam-ico { background: var(--sh-yellow); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); }

/* ---------- חידון ---------- */
.qdots li { background: var(--paper); border: 2.5px solid var(--ink); color: var(--ink); box-shadow: 2px 3px 0 var(--shade); }
.qdots li.cur { background: var(--sh-yellow); color: var(--ink); box-shadow: 2px 3px 0 var(--shade); }
.qdots li.ok { background: var(--sh-lime); color: var(--ink); }
.qdots li.bad { background: var(--sh-pink); color: #fff; }
.q-num { color: var(--ink); font-weight: 900; }
.q-title { -webkit-text-stroke: 7px var(--ink); text-shadow: 4px 5px 0 var(--sh-purple); }
.q-fb { background: var(--paper); border: var(--bw) solid var(--ink); border-inline-start: 14px solid var(--sh-lime); box-shadow: var(--sticker-sm); border-radius: 18px; }
.q-fb.bad { border-color: var(--ink); border-inline-start-color: var(--sh-pink); }
.q-fb.ok b { color: var(--sh-lime-d); } .q-fb.bad b { color: var(--sh-pink-d); }
.q-photo { border: 10px solid #fff; outline: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 3px var(--shade); }
.stamp b { font-family: var(--f-stamp); font-weight: 400; background: rgba(255,255,255,.85); border-width: 8px; outline: 3px solid currentColor; outline-offset: 4px; }
.stamp.k b { color: var(--sh-teal-d); } .stamp.nk b { color: var(--sh-pink-d); }
.big-stars span.on { filter: drop-shadow(3px 4px 0 var(--ink)) drop-shadow(0 0 20px rgba(253,181,21,.8)); }

/* ---------- עיצוב הסוכה ---------- */
.wiz-top small, .counter { color: var(--ink-2); }
.swatches button::before { border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); }
.swatches button.on::before { box-shadow: 0 0 0 4px var(--rim), 0 0 0 7px var(--sh-purple), 3px 5px 0 7px var(--shade); }
.tcard { border: 2.5px solid var(--ink); background: var(--paper); box-shadow: var(--sticker-sm); }
.tcard.on { border-color: var(--ink); background: #F4E3F1; box-shadow: 0 0 0 3px var(--sh-purple), 3px 5px 0 3px var(--shade); }
.sk-scene { border: 7px solid #fff; outline: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 3px var(--shade); }
.status { color: var(--ink); }
.status.ok { color: var(--sh-lime-d); border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); }
.frame-pic img { outline: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 3px var(--shade); }
.loader { color: var(--ink); }
.loader i { border-color: rgba(29,26,43,.18); border-top-color: var(--sh-purple); }

/* ---------- פאזל / להקה / ריקוד ---------- */
.puzzle { background: var(--sh-purple); border: 5px solid #fff; outline: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 3px var(--shade); }
.puzzle.solved { background: var(--sh-lime); }
.pz-info { background: var(--paper); border: 2.5px solid var(--ink); box-shadow: var(--sticker-sm); }
.pz-thumb { border: 2.5px solid var(--ink); }
.bb-body { border: 5px solid #fff; outline: var(--bw) solid var(--ink); background: var(--sh-pink); box-shadow: inset 0 -12px 0 rgba(0,0,0,.14), 6px 9px 0 3px var(--shade); }
.cone { border-color: var(--sh-pink-l); }
.eq i { background: linear-gradient(var(--sh-yellow), var(--sh-lime)); }
.ring span { color: var(--sh-pink-d); border: 2px solid var(--ink); }
.play-big { background: var(--sh-lime); color: var(--ink); border: var(--bw) solid var(--ink); box-shadow: var(--sticker); }
.q-label { color: var(--sh-purple-d); }
.reveal .en { color: var(--sh-pink); }
.band-bar p b { border: 2px solid var(--ink); color: var(--sh-purple-d); }
.inst .lbl { border: 2.5px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); background: var(--paper); font-weight: 900; }
.inst .lbl bdi { color: var(--sh-pink-d); }
.inst.seen .lbl { background: var(--sh-yellow); }

/* ---------- יום 4 ---------- */
.note { background: #FFE39A; border: 2.5px solid var(--ink); box-shadow: 3px 5px 0 var(--shade); color: var(--ink); }
.note:nth-child(3n+2) { background: #BDEFF6; }
.note:nth-child(3n) { background: #FAD0DC; }
.note:nth-child(4n) { background: #E6EE9E; }
.note.on { box-shadow: 0 0 0 4px var(--sh-purple), 4px 6px 0 4px var(--shade); }
.howto li { background: var(--paper); border: 2.5px solid var(--ink); box-shadow: var(--sticker-sm); }
.paper { border: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 0 var(--shade); }
.paper p { color: var(--sh-purple-d); }
.spot { background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--sticker-sm); }
.spot .en { color: var(--sh-pink-d); }
.spot.on { background: #F4E3F1; border-color: var(--ink); box-shadow: 0 0 0 4px var(--sh-purple), 4px 6px 0 4px var(--shade); }
.hang-scene { border: 6px solid #fff; outline: var(--bw) solid var(--ink); box-shadow: 6px 9px 0 3px var(--shade); }
.hang-scene .poster p { color: var(--sh-purple-d); }
.hang-scene .poster::before { background: var(--sh-pink); border: 2px solid var(--ink); }

/* ---------- יום 5 ---------- */
.f-front, .f-back { border: var(--bw) solid var(--ink); box-shadow: 0 0 0 5px var(--rim), 5px 8px 0 5px var(--shade); }
.f-front { background: var(--sh-purple); }
.flip:nth-child(2) .f-front { background: var(--sh-teal); }
.flip:nth-child(3) .f-front { background: var(--sh-orange); }
.f-front b { font-family: var(--f); font-weight: 900; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); }
.f-front small { font-weight: 800; text-shadow: var(--outline); opacity: 1; }
.f-back { background: var(--paper); }
.f-back p { color: var(--ink); }
.diff-bar p b { border: 2px solid var(--ink); color: var(--sh-lime-d); }
.pane { border: 5px solid #fff; outline: var(--bw) solid var(--ink); box-shadow: 5px 8px 0 3px var(--shade); }
.diff-mark { border-color: var(--sh-lime); box-shadow: 0 0 0 3px var(--ink), 0 0 16px var(--sh-lime); }
.miss-mark { color: var(--sh-pink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

/* ---------- לוח המפקדים ---------- */
.board-head .sub { color: var(--ink); }
.pol { border: 2.5px solid var(--ink); box-shadow: 4px 6px 0 var(--shade); }
.pol figcaption small { color: var(--ink-2); }
.pol.mine { box-shadow: 0 0 0 4px var(--sh-yellow), 5px 7px 0 4px var(--shade); }
.pol-tag { background: var(--sh-yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 3px 0 var(--shade); font-weight: 900; }
.pol-star { background: #EAF9FB; }

/* ---------- תעודת מפקד ---------- */
.idcard { background: var(--sh-purple); border: 4px solid var(--ink); box-shadow: 0 0 0 5px var(--rim), 6px 9px 0 5px var(--shade); }
.id-head { background: var(--sh-purple-d); border-bottom: 3px solid var(--ink); }
.id-head span { font-family: var(--f); font-weight: 900; -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); }
.id-face { border: 3px solid var(--ink); box-shadow: 0 0 0 3px #fff; }
.id-fields b { text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.id-stamp { color: var(--sh-pink-d); border-color: var(--sh-pink-d); font-family: var(--f-stamp); font-weight: 400; }

@media (prefers-reduced-motion: reduce) { .htag::before { display: none; } }

/* ---------- חלון שיתוף: התמונה במסגרת החג ---------- */
.share-box { display: flex; align-items: center; gap: 30px; max-width: 880px; }
.share-box .side { flex: 1; min-width: 280px; }
.share-pic { height: 420px; width: auto; aspect-ratio: 1080 / 1350; border-radius: 12px; border: var(--bw) solid var(--ink); box-shadow: 5px 8px 0 var(--shade); rotate: -2deg; animation: dropIn .6s var(--pop); }
.frame-pic { aspect-ratio: 1080 / 1350; width: min(42cqw, 78cqh); }
.frame-pic img { border-radius: 12px; }
.pchip .stars-pill { text-shadow: none; }