/* NDIGIT v2 · מי אני: דוגם הצבע. התמונה נשארת בדיוק כמו שהיא (נתי: העדשה הכהה עיוותה את הפנים).
   הסמן הוא טבעת דגימה של מעצב: חציה העליון בצבע שמתחת לסמן, התחתון בצבע הקודם, ולידה ה־HEX האמיתי.
   לחיצה מפילה דוגמית לפלטה מתחת לתמונה. המספרים יושבים על התמונה כתוויות */
.eye .abx-photo::after { content: none; }
.eye .abx-photo img { transform: none; transition: none; }
.dp .eye-photo { cursor: none; touch-action: pan-y; outline: none; }
.dp .eye-photo:focus-visible { box-shadow: 0 0 0 3px var(--lime); }
.eye-base { position: absolute; inset: 0; }
/* קווי עזר דקים מעל התמונה, רק כשהסמן עליה. בלי להכהות ובלי לגעת בפנים */
.dp-guides { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .35s; pointer-events: none; }
.dp-guides path { fill: none; stroke: rgba(11,11,10,.35); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.dp-guides .c { stroke: #0b0b0a; stroke-width: 1.5; stroke-dasharray: none; }
.dp.on .dp-guides { opacity: 1; }
/* טבעת הדגימה */
.dp-ring { --cur: #BFBB02; --prev: #BFBB02; position: absolute; z-index: 3; left: var(--x, 50%); top: var(--y, 30%); width: 78px; height: 78px; border-radius: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  background: linear-gradient(var(--cur) 50%, var(--prev) 50%);
  -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px); mask: radial-gradient(circle, transparent 20px, #000 21px);
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 14px rgba(0,0,0,.35)); transition: opacity .25s, transform .3s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.dp-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), 0 0 0 1px rgba(11,11,10,.25); }
.dp-ring i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); }
.dp.on .dp-ring { opacity: 1; transform: translate(-50%, -50%); }
.dp.drop .dp-ring { transform: translate(-50%, -50%) scale(.82); }
/* הצלב במרכז, בחור של הטבעת (הטבעת ממוסכת, אז הצלב יושב בנפרד) */
.dp .eye-photo::before { content: ""; position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 30%); width: 14px; height: 14px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .25s; pointer-events: none;
  background: linear-gradient(#fff, #fff) center / 100% 1.5px no-repeat, linear-gradient(#fff, #fff) center / 1.5px 100% no-repeat; filter: drop-shadow(0 0 1px rgba(0,0,0,.8)); }
.dp.on .eye-photo::before { opacity: 1; }
.dp-tag { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 30%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 99px; background: rgba(11,11,10,.86); color: var(--bone); font: 400 12.5px/1 Anton, sans-serif; letter-spacing: .06em; direction: ltr; transform: translate(34px, 30px); opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; }
.dp-tag::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cur, #BFBB02); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); }
.dp.on .dp-tag { opacity: 1; }
/* הדוגמית שעפה לפלטה */
.dp-fly { position: fixed; z-index: 60; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 12px; box-shadow: 0 0 0 2px #fff, 0 10px 24px rgba(0,0,0,.4); pointer-events: none; }

/* המספרים: תוויות שמוצמדות לתמונה */
.eye-pins { position: absolute; inset: 0; z-index: 5; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.pin { position: absolute; display: grid; gap: 3px; padding: 10px 14px 11px; border-radius: 12px; background: rgba(11,11,10,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(243,241,234,.14); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.pin b { font: italic 700 34px/.9 var(--display); color: var(--lime); }
.pin span { font: 700 12.5px/1.2 var(--text); color: var(--bone); white-space: nowrap; }
.pin::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(200,245,66,.2); }
.pin-1 { left: -34px; top: 9%; } .pin-1::before { right: -20px; top: 50%; }
.pin-2 { right: -30px; top: 46%; } .pin-2::before { left: -20px; top: 50%; }
.pin-3 { left: -40px; bottom: 15%; } .pin-3::before { right: -20px; top: 50%; }

/* מתחת לתמונה: הרמז והפלטה */
.dp-bar { position: absolute; left: 0; right: 0; top: calc(100% + 18px); display: grid; gap: 10px; }
.eye-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 13px/1.3 var(--text); color: var(--soft); }
.eye-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eye-hint-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .eye-hint-fine { display: inline; } .eye-hint-touch { display: none; } }
.dp-pal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.dp-sw button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--soft); cursor: pointer; }
.dp-sw button span { display: block; aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed #3a3c33; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dp-sw button:disabled { cursor: default; }
.dp-sw.full button span { border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px -8px rgba(0,0,0,.6); }
.dp-sw.full button::after { content: attr(data-hex); font: 400 11px/1 Anton, sans-serif; letter-spacing: .06em; color: var(--bone); direction: ltr; text-align: center; }
.dp-sw.land button span { animation: dp-land .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dp-land { 0% { transform: scale(.6); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) { .dp-sw.full button:hover span { transform: translateY(-3px); } }
.dp-sw button:focus-visible span { outline: 2px solid var(--lime); outline-offset: 3px; }
.dp-said { min-height: 1.3em; margin: 0; font: 600 12.5px/1.3 var(--text); color: var(--lime); }
.abx { padding-bottom: 120px; }

@media (max-width: 899px) {
  .abx { padding-bottom: 0; }
  .abx .abx-portrait.eye { width: min(80vw, 320px); margin-bottom: 150px; }
  .pin { padding: 8px 11px 9px; border-radius: 10px; }
  .pin b { font-size: 26px; } .pin span { font-size: 11.5px; }
  .pin-1 { left: -14px; top: 6%; } .pin-2 { right: -14px; top: 50%; } .pin-3 { left: -16px; bottom: 12%; }
  .pin::before { display: none; }
  .dp-bar { top: calc(100% + 14px); }
  .dp .eye-photo { cursor: default; }
}
@media (prefers-reduced-motion: reduce) { .dp-ring, .dp-guides, .dp-tag { transition: none; } .dp-sw.land button span { animation: none; } }

/* ---------- דיוקן טלאים (במקום דוגם הצבע) ---------- */
.pz-grid { position: absolute; inset: 0; z-index: 2; direction: ltr; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.pz-t { position: relative; min-width: 44px; min-height: 44px; padding: 0; border: 0; outline: 1px dashed rgba(11,11,10,.28); outline-offset: -.5px; background: none center / 300% 300% no-repeat; background-position: calc(var(--c) * 50%) calc(var(--r) * 50%); cursor: pointer; }
.pz-t[data-s]::after { content: attr(data-s); position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 99px; background: rgba(11,11,10,.8); color: var(--bone); font: 700 11px/1 var(--text); opacity: 0; transition: opacity .2s; }
@media (hover: hover) and (pointer: fine) { .pz-t:hover { box-shadow: inset 0 0 0 2px var(--lime); } .pz-t:hover::after { opacity: 1; } }
.pz-t:focus-visible { box-shadow: inset 0 0 0 3px var(--lime); outline: none; }
.pz-t.flip { animation: pz-flip .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pz-flip { 0% { transform: perspective(500px) rotateY(80deg) scale(.92); } 100% { transform: none; } }
.pz-bar { position: absolute; left: 0; right: 0; top: calc(100% + 18px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pz-hint { margin: 0; font: 600 14px/1.3 var(--text); color: var(--soft); }
.pz-reset { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--bone); font: 700 14px/1 var(--text); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pz-t.flip { animation: none; } }
.pz.done .pz-t { outline-color: transparent; }
.pz.done .pz-now { color: var(--lime); }
.pz .abx-photo { aspect-ratio: 1086 / 1448; height: auto; }

/* שורת הנתונים (כמו באתר החי): שלושה טורים עם קו מפריד, המספר גדול בליים והתווית מתחתיו */
.abx-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 32px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.abx-stats div { padding: 0 32px; border-inline-start: 1px solid var(--line); }
.abx-stats div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.abx-stats dt { font: italic 700 clamp(44px, 4vw, 60px)/.9 var(--display); color: var(--lime); direction: ltr; text-align: right; }
.abx-stats dd { margin: 10px 0 0; font: 700 15px/1.3 var(--text); color: var(--bone); white-space: nowrap; }
@media (max-width: 760px) {
  .abx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; padding-top: 20px; }
  .abx-stats div { padding: 0 12px; }
  .abx-stats dt { font-size: 40px; }
  .abx-stats dd { font-size: 12px; white-space: normal; }
  .abx .abx-portrait.eye { margin-bottom: 72px; }
}
/* נתי 30.09: הטקסט רחב יותר, ותחתית התמונה באותו קו של שורת המספרים */
@media (min-width: 761px) {
  .abx { align-items: end !important; }
  .abx-bio p { max-width: 66ch !important; }
}
/* נתי 30.09: כמו באתר החי. טקסט אנכי עם קו ליים בצד השמאלי של התמונה, ותווית "קצת עליי" על הפינה התחתונה */
.pz { position: relative; }
.abx-vert { position: absolute; z-index: 4; left: -44px; top: 0; bottom: 0; display: flex; align-items: center; gap: 14px; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 12px/1 var(--text); letter-spacing: .22em; color: var(--soft); pointer-events: none; white-space: nowrap; }
.abx-vert::after { content: ""; width: 2px; height: 56px; background: linear-gradient(var(--lime), transparent); }
.abx-tag { position: absolute; z-index: 6; left: -24px; bottom: 44px; margin: 0; padding: 22px 34px; border: 1px solid rgba(200,245,66,.55); background: rgba(11,11,10,.92); font: italic 700 20px/1 var(--display); color: var(--lime); pointer-events: none; }
@media (max-width: 760px) {
  .abx-vert { display: none; }
  .abx-tag { left: 10px; bottom: 20px; padding: 12px 18px; font-size: 16px; }
}
/* נתי 30.09: במובייל התווית כיסתה את התמונה והרמז נכנס לתוכה. התווית יורדת במובייל, והרמז יושב מתחת לתמונה בזרימה רגילה */
@media (max-width: 760px) {
  .abx-tag { display: none !important; }
  .pz-bar { top: calc(100% + 14px) !important; justify-content: center; }
  .abx .abx-portrait.eye { margin-bottom: 64px !important; }
}
/* המסגרת באותו יחס של התמונה (3:4), כדי שהרמז לא ייכנס לתוך התמונה */
.abx-portrait.pz { aspect-ratio: 1086 / 1448 !important; }
.abx-stats dt[data-spin] { display: inline-block; transform-origin: 50% 55%; }
/* נתי 30.09: המספרים לא נכנסים לכלל הקטנת התוויות של המובייל (dt). 360 מסתובב לרוחב, סביב הציר האנכי */
.abx-stats dt { font-size: clamp(44px, 4vw, 60px) !important; }
@media (max-width: 760px) { .abx-stats dt { font-size: 40px !important; } .abx-stats dd { font-size: 13px !important; } }
.abx-stats dt[data-spin] { transform-style: preserve-3d; }