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

/* ------------------------------------------------------------
   טוקנים מקומיים לשני הרכיבים (הצבעים הגלובליים מגיעים מ-screen.css)
   ------------------------------------------------------------ */
.q-stats,
.q-bar{
  --neon:#3D9BFF;                      /* כחול הניאון של המסגרות */
  --neon-hot:#8FD0FF;                  /* הבהוב פנימי בהיר */
  --hud-line:rgba(120,180,255,.22);    /* קווי הפרדה דקים */
  --hud-dim:#B9CFF4;                   /* טקסט משני — עדיין קריא ממרחק */
  --bulb:#FFD98A;                      /* נורות המרקיזה */
  --chamfer:clamp(14px,1.2vw,26px);    /* עומק השיפוע בפינות הסרגל */
}

/* ============================================================
   פריסת הבמה — עמודת סטטיסטיקה + אזור ראשי
   ------------------------------------------------------------
   ‎.view הוא עמודת flex. הבמה נמתחת על כל הגובה הפנוי והסרגל
   נשאר בגובה התוכן שלו. ההכרזות של grid-row נשארות כרשת ביטחון
   למקרה ש-.view-quiz יוגדר שוב כרשת שורות — ב-flex הן פשוט מנוטרלות.
   ‎בגלל dir="rtl" העמודה הראשונה נוחתת בימין — בדיוק כמו בקונספט.
   ============================================================ */

.view-quiz .q-stage{
  flex:1 1 auto;
  grid-row:1 / span 2;
  display:grid;
  grid-template-columns:clamp(150px,17vw,340px) minmax(0,1fr);
  gap:clamp(10px,1.4vw,26px);
  min-height:0;
  min-width:0;
}

.view-quiz .q-stats,
.view-quiz .q-main{ min-height:0; min-width:0; }

/* האזור הראשי — כותרת, תשובות, תחתית.
   שורת התשובות היא היחידה שנמתחת; השאר נצמדות לתוכן שלהן.
   ‎(משתמשים ברשת ולא ב-flex כדי לא לגעת בכללים של רכיבים בבעלות אחרת) */
.view-quiz .q-main{
  display:grid;
  /* מיתוג, כותרת השאלה, התשובות (הנמתחות), תחתית */
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(7px,1.15vh,20px);
  align-content:stretch;
}

/* ============================================================
   1. עמודת הסטטיסטיקה החיה
   ============================================================ */

.q-stats{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:clamp(6px,.9vh,14px);
  padding:clamp(10px,1.1vh,20px) clamp(18px,1.7vw,34px);
  border-radius:clamp(14px,1.3vw,24px);
  border:3px solid var(--neon);
  background:
    linear-gradient(180deg,
      rgba(24,52,104,.94) 0%,
      rgba(11,24,58,.96) 45%,
      rgba(6,14,38,.98) 100%);
  box-shadow:
    0 0 clamp(16px,1.7vw,34px) rgba(61,155,255,.55),
    0 0 clamp(46px,4.6vw,104px) rgba(47,127,255,.32),
    inset 0 2px 0 rgba(255,255,255,.26),
    inset 0 0 clamp(20px,2vw,46px) rgba(47,127,255,.20);
  overflow:hidden;
}

/* נורות המרקיזה — שתי רצועות נקודות זהובות על השוליים הפנימיים */
.q-stats::before,
.q-stats::after{
  content:"";
  position:absolute;
  z-index:0;
  inset-block:clamp(10px,1.2vh,20px);
  width:clamp(7px,.6vw,12px);
  background-image:repeating-radial-gradient(circle at 50% 50%,
    rgba(255,246,214,1) 0 20%,
    var(--bulb) 26% 38%,
    rgba(255,170,60,0) 54% 100%);
  background-size:100% clamp(17px,2vh,30px);
  background-repeat:repeat-y;
  filter:drop-shadow(0 0 5px rgba(255,183,74,.85));
  opacity:.92;
  animation:hud-bulbs 2.6s ease-in-out infinite alternate;
  pointer-events:none;
}
.q-stats::before{ inset-inline-start:clamp(3px,.3vw,6px); }
.q-stats::after { inset-inline-end:clamp(3px,.3vw,6px); animation-delay:1.3s; }

@keyframes hud-bulbs{
  from{ opacity:.55; }
  to  { opacity:1; }
}

/* כל התוכן מעל רצועות הנורות */
.qs-head,
.qs-list,
.qs-donut{ position:relative; z-index:1; }

/* --- כותרת העמודה --- */
.qs-head{
  flex:none;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:clamp(.95rem,1.35vw,1.9rem);
  line-height:1.15;
  letter-spacing:.01em;
  padding-bottom:clamp(7px,.9vh,14px);
  text-shadow:0 0 18px rgba(140,205,255,.75), 0 2px 6px rgba(0,0,0,.55);
}
/* הקו הזוהר מתחת לכותרת */
.qs-head::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--neon-hot) 22%, #fff 50%, var(--neon-hot) 78%, transparent);
  box-shadow:0 0 12px rgba(120,190,255,.9);
}

/* --- רשימת הנתונים --- */
.qs-list{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.qs-item{
  flex:1 1 0;
  min-height:0;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(6px,.7vw,14px);
  padding-block:clamp(4px,.7vh,12px);
  overflow:hidden;
}
/* קווי הפרדה בין השורות */
.qs-item:not(:last-child){ border-bottom:1px solid var(--hud-line); }

/* ‎ב-RTL הטקסט נוחת מימין והאייקון משמאל — בדיוק כמו בקונספט */
.qs-text{
  flex:1 1 auto;
  min-width:0;
  text-align:start;
  overflow:hidden;
}

.qs-label{
  color:var(--hud-dim);
  /* רצפה של 17px — מתחת לזה התווית לא נקראית מהאולם */
  font-size:clamp(1.06rem,1vw,1.3rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* המספר הענק — ספרות טבלאיות, כיוון LTR כדי שלא יתהפכו או ייחתכו */
.qs-value{
  direction:ltr;
  text-align:right;
  font-size:clamp(1.4rem,3vw,4rem);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  overflow:hidden;
}

.is-blue  .qs-value{ color:color-mix(in srgb, var(--info) 86%, #fff); text-shadow:0 0 26px rgba(56,189,248,.6); }
.is-green .qs-value{ color:color-mix(in srgb, var(--ok)   76%, #fff); text-shadow:0 0 26px rgba(34,197,94,.6); }
.is-red   .qs-value{ color:color-mix(in srgb, var(--bad)  82%, #fff); text-shadow:0 0 26px rgba(239,68,68,.6); }

/* --- אייקונים מצוירים ב-CSS בלבד --- */
.qs-ico{
  --ico:var(--neon);
  position:relative;
  flex:none;
  display:block;
  font-size:clamp(26px,2.9vw,56px);
  width:1em;
  height:1em;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.14), rgba(5,14,36,.92) 72%);
  box-shadow:
    inset 0 0 0 .075em var(--ico),
    inset 0 0 .3em rgba(255,255,255,.18),
    0 0 .5em color-mix(in srgb, var(--ico) 55%, transparent);
}
.is-blue  .qs-ico{ --ico:color-mix(in srgb, var(--info) 88%, #fff); }
.is-green .qs-ico{ --ico:color-mix(in srgb, var(--ok)   78%, #fff); }
.is-red   .qs-ico{ --ico:color-mix(in srgb, var(--bad)  84%, #fff); }

/* קבוצת אנשים — שלושה ראשים ושלושה גופים מעיגולים */
.is-blue .qs-ico::before{
  content:"";
  position:absolute; left:50%; top:32%;
  width:.21em; height:.21em; border-radius:50%;
  background:var(--ico);
  transform:translate(-50%,-50%);
  box-shadow:
    -.25em .05em 0 -.035em var(--ico),
     .25em .05em 0 -.035em var(--ico);
}
.is-blue .qs-ico::after{
  content:"";
  position:absolute; left:50%; bottom:24%;
  width:.32em; height:.22em;
  border-radius:.16em .16em .04em .04em;
  background:var(--ico);
  transform:translateX(-50%);
  box-shadow:
    -.22em .03em 0 -.045em var(--ico),
     .22em .03em 0 -.045em var(--ico);
}

/* וי — שני מוטות מסובבים (גיאומטריה פיזית, לא זורמת, ולכן לא מתהפכת ב-RTL) */
.is-green .qs-ico::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:.28em; height:.50em;
  border-right:.105em solid var(--ico);
  border-bottom:.105em solid var(--ico);
  border-radius:0 0 .04em 0;
  transform:translate(-50%,-58%) rotate(45deg);
}

/* איקס — שני מוטות מוצלבים */
.is-red .qs-ico::before,
.is-red .qs-ico::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:.50em; height:.10em;
  border-radius:.05em;
  background:var(--ico);
}
.is-red .qs-ico::before{ transform:translate(-50%,-50%) rotate(45deg); }
.is-red .qs-ico::after { transform:translate(-50%,-50%) rotate(-45deg); }

/* --- טבעת אחוז ההצלחה --- */
.qs-donut{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(3px,.5vh,9px);
  padding-top:clamp(6px,.9vh,14px);
  border-top:1px solid var(--hud-line);
}

.qs-donut-title{
  color:#DCE9FF;
  font-size:clamp(1.06rem,1.05vw,1.4rem);
  font-weight:800;
  line-height:1.15;
  text-shadow:0 0 14px rgba(120,190,255,.5);
}

.donut{
  position:relative;
  width:min(clamp(84px,10vw,190px), 100%);
  aspect-ratio:1;
}
.donut svg{ display:block; width:100%; height:100%; overflow:visible; }

.d-track{
  fill:none;
  stroke:rgba(4,12,32,.88);
  stroke-width:14;
}

/* הקשת מתחילה ב-12 ומתמלאת עם כיוון השעון */
.d-arc{
  fill:none;
  /* ⚠️ הצבע האמיתי נקבע ב-screen.js, כי לכל טבעת יש gradient
     במזהה משלה. זה רק גיבוי אם משהו בבנייה נכשל. */
  stroke:#45e6e0;
  stroke-width:14;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
  filter:drop-shadow(0 0 5px rgba(69,230,224,.75));
  transition:stroke-dashoffset .9s var(--ease);
}

.donut-mid{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:.1em;
  pointer-events:none;
}
.donut-pct{
  direction:ltr;
  color:#fff;
  font-size:clamp(1.15rem,2.2vw,2.9rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px rgba(0,0,0,.65), 0 0 22px rgba(140,205,255,.4);
}
.donut-cap{
  color:color-mix(in srgb, var(--ok) 74%, #fff);
  font-size:clamp(1rem,.95vw,1.25rem);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  text-shadow:0 0 16px rgba(34,197,94,.55);
}

/* ============================================================
   2. סרגל השידור התחתון
   ------------------------------------------------------------
   ‎clip-path חותך גם את ה-box-shadow, ולכן המסגרת נבנית משתי
   שכבות אחיות (::before ניאון, ::after פנים כהה) והזוהר החיצוני
   יושב על filter של ההורה — שם החיתוך לא פוגע בו.
   ============================================================ */

.view-quiz .q-bar{
  grid-row:3;
  flex:0 0 auto;
  margin-block-start:clamp(10px,1.6vh,26px);
}

.q-bar{
  position:relative;
  z-index:1;
  height:clamp(72px,13vh,148px);
  min-height:0;
  display:grid;
  /* מספר החיוג · התקדמות · הפילוח החי. הפילוח מקבל את רוב הרוחב
     כי הוא זה שזז, וצריך שיהיה קריא מהשורה האחרונה באולם. */
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,2.4fr);
  align-items:center;
  padding-inline:clamp(10px,1.2vw,26px);
  overflow:hidden;
  filter:drop-shadow(0 0 clamp(10px,1.1vw,24px) rgba(61,155,255,.55));
}

/* שכבת הניאון — הצורה המשופעת במלואה */
.q-bar::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, var(--neon-hot), var(--neon) 40%, #1F6BD6);
  clip-path:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
}

/* פנים כהה — אותה צורה, מוקטנת בעובי המסגרת */
.q-bar::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(22,48,96,.97), rgba(8,18,44,.98) 55%, rgba(5,12,32,.99));
  clip-path:polygon(
    var(--chamfer) 0, calc(100% - var(--chamfer)) 0,
    100% var(--chamfer), 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)), 0 var(--chamfer)
  );
}

/* --- ארבעת האזורים --- */
.qb-zone{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:clamp(6px,.75vw,15px);
  min-width:0;
  min-height:0;
  height:100%;
  padding-inline:clamp(8px,1vw,22px);
  overflow:hidden;
}
/* מפריד אנכי דק בין האזורים */
.qb-zone::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:14%;
  bottom:14%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(90,170,255,.45), transparent);
}
.qb-zone:last-child::before{ display:none; }
/* אזור הפילוח הוא האחרון, אבל הוא בלוק גדול ורוצים גבול שיפריד
   אותו מהתקדמות המשחק — ולכן מחזירים לו את המפריד */
.qb-zone.is-split::before{ display:block; }

.qb-body{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.1em;
}

.qb-label{
  color:var(--hud-dim);
  /* רצפה של 17px — הסרגל התחתון נקרא מהשורה האחרונה באולם */
  font-size:clamp(1.06rem,.92vw,1.2rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* כיוון LTR מקובע — מבטיח ש-"3 / 10", "00:18" ומספרי טלפון
   לא יתהפכו בתוך עמוד RTL. היישור לימין = תחילת האזור. */
.qb-value{
  direction:ltr;
  text-align:right;
  color:#fff;
  font-size:clamp(1.2rem,2.4vw,3rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.is-gold .qb-value{ color:#FFC93C; text-shadow:0 0 22px rgba(245,158,11,.6); }
.is-teal .qb-value{ color:#3FE0CE; text-shadow:0 0 22px rgba(20,184,166,.6); }
.is-cyan .qb-value{ color:#4FE3FF; text-shadow:0 0 22px rgba(56,189,248,.65); }

/* מספר הטלפון ארוך — מוקטן כדי שלא ייחתך */
.is-gold .qb-value{ font-size:clamp(.98rem,1.85vw,2.3rem); }

/* חמש השניות האחרונות — אדום ופעימה עדינה */
.qb-zone.is-danger .qb-value{
  color:color-mix(in srgb, var(--bad) 82%, #fff);
  text-shadow:0 0 26px rgba(239,68,68,.7);
  transform-origin:100% 50%;
  animation:qb-pulse 1s ease-in-out infinite;
}
@keyframes qb-pulse{
  0%,100%{ transform:scale(1);    opacity:1; }
  50%    { transform:scale(1.07); opacity:.82; }
}

/* --- אמבלמות ה-CSS של האזורים --- */
.qb-ico{
  --emb:#fff;
  position:relative;
  flex:none;
  display:block;
  font-size:clamp(22px,2.6vw,52px);
  width:1em;
  height:1em;
}
.is-gold .qb-ico{ --emb:#FFC93C; }
.is-teal .qb-ico{ --emb:#3FE0CE; }
.is-cyan .qb-ico{ --emb:#4FE3FF; }
.is-mix  .qb-ico{ --emb:#9AA9FF; }

/* זהב — גביע: גוף + שתי ידיות, ומתחתיו רגל ובסיס */
.is-gold .qb-ico::before{
  content:"";
  position:absolute; left:50%; top:.14em;
  width:.50em; height:.38em; margin-left:-.25em;
  background:linear-gradient(180deg,#FFE9A8,#EFA119);
  border-radius:.05em .05em .25em .25em;
  box-shadow:
    -.33em .01em 0 -.15em #EFA119,
     .33em .01em 0 -.15em #EFA119,
    0 0 .32em rgba(245,158,11,.6);
}
/* רגל צרה למעלה ובסיס רחב למטה — שתי שכבות רקע על אותו אלמנט */
.is-gold .qb-ico::after{
  content:"";
  position:absolute; left:50%; bottom:.11em;
  width:.36em; height:.24em; margin-left:-.18em;
  background-image:
    linear-gradient(#EFA119,#EFA119),
    linear-gradient(180deg,#FFD983,#E0900F);
  background-size:.11em .15em, .36em .10em;
  background-position:50% 0, 50% 100%;
  background-repeat:no-repeat;
}

/* טורקיז — קבוצת משתתפים (התקדמות המשחק) */
.is-teal .qb-ico::before{
  content:"";
  position:absolute; left:50%; top:32%;
  width:.21em; height:.21em; border-radius:50%;
  background:var(--emb);
  transform:translate(-50%,-50%);
  box-shadow:
    -.25em .05em 0 -.035em var(--emb),
     .25em .05em 0 -.035em var(--emb);
}
.is-teal .qb-ico::after{
  content:"";
  position:absolute; left:50%; bottom:24%;
  width:.32em; height:.22em;
  border-radius:.16em .16em .04em .04em;
  background:var(--emb);
  transform:translateX(-50%);
  box-shadow:
    -.22em .03em 0 -.045em var(--emb),
     .22em .03em 0 -.045em var(--emb);
}

/* ציאן — שעון עם שני מחוגים */
.is-cyan .qb-ico{
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.12), rgba(5,14,36,.9) 72%);
  box-shadow:
    inset 0 0 0 .08em var(--emb),
    0 0 .45em color-mix(in srgb, var(--emb) 55%, transparent);
}
.is-cyan .qb-ico::before,
.is-cyan .qb-ico::after{
  content:"";
  position:absolute; left:50%;
  width:.065em;
  background:var(--emb);
  border-radius:.04em;
  transform-origin:50% 100%;
}
.is-cyan .qb-ico::before{ top:.22em; height:.28em; margin-left:-.0325em; transform:rotate(28deg); }
.is-cyan .qb-ico::after { top:.30em; height:.20em; margin-left:-.0325em; transform:rotate(-78deg); }

/* מיקס — גל קול קטן */
.is-mix .qb-ico::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:.64em; height:.54em;
  transform:translate(-50%,-50%);
  background-image:
    linear-gradient(var(--emb),var(--emb)),
    linear-gradient(var(--emb),var(--emb)),
    linear-gradient(var(--emb),var(--emb)),
    linear-gradient(var(--emb),var(--emb)),
    linear-gradient(var(--emb),var(--emb));
  background-size:.08em .24em, .08em .44em, .08em .32em, .08em .52em, .08em .20em;
  background-position:0 50%, .14em 50%, .28em 50%, .42em 50%, .56em 50%;
  background-repeat:no-repeat;
}

/* --- פס ההתקדמות של המשחק --- */
.qb-track{
  position:relative;
  flex:none;
  width:100%;
  height:clamp(5px,.75vh,11px);
  margin-top:.22em;
  border-radius:999px;
  background:rgba(4,14,36,.85);
  box-shadow:inset 0 0 0 1px rgba(90,170,255,.3);
  overflow:hidden;
}
/* ‎ב-RTL ה-inline-start הוא הקצה הימני — הפס גדל משם שמאלה */
.qb-track > i{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  display:block;
  width:0;
  border-radius:999px;
  background:linear-gradient(to left, #14B8A6, #45E6E0);
  box-shadow:0 0 12px rgba(69,230,224,.65);
  transition:width .8s var(--ease);
}

/* ============================================================
   הפילוח החי — ירוק מול אדום
   ------------------------------------------------------------
   שני פסים שיושבים ריקים עד שנכנסת התשובה הראשונה, ומשם זזים עם
   כל לחיצה. הרוחב הוא חלקו של כל צד מתוך מי שכבר ענה, ולכן שניהם
   יחד תמיד משלימים למסך מלא והאחוז הכתוב תואם למה שרואים.
   האולם לא לומד מזה מהי התשובה הנכונה — רק כמה צדקו.
   ============================================================ */

.qb-splits{
  display:flex; flex-direction:column;
  gap:clamp(5px,.8vh,12px);
  width:100%;
}
.qb-split{
  display:flex; align-items:center;
  gap:clamp(6px,.7vw,14px);
  min-width:0;
}
.qb-split-label{
  flex:0 0 auto;
  width:2.6em;
  font-size:clamp(1rem,1.05vw,1.35rem);
  font-weight:800; line-height:1;
  color:var(--hud-dim);
}
.qb-split-track{
  position:relative;
  flex:1 1 auto; min-width:0;
  height:clamp(13px,2.1vh,30px);
  border-radius:999px;
  background:rgba(4,14,36,.85);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(90,170,255,.28);
  overflow:hidden;
}
/* ‎ב-RTL ה-inline-start הוא הקצה הימני — הפס גדל משם שמאלה */
.qb-split-track > i{
  position:absolute; inset-block:0;
  inset-inline-start:0;
  display:block; width:0;
  border-radius:999px;
  transition:width .45s cubic-bezier(.3,.9,.4,1);
}
.qb-split.is-right .qb-split-track > i{
  background:linear-gradient(to left,#16A34A,#7CF7AE);
  box-shadow:0 0 16px rgba(47,224,122,.65);
}
.qb-split.is-wrong .qb-split-track > i{
  background:linear-gradient(to left,#C81E3A,#FF8FA0);
  box-shadow:0 0 16px rgba(255,61,90,.6);
}
/* אחוז ומספר — רוחב קבוע כדי שהפס לא יזוז בכל עדכון */
.qb-split-pct,
.qb-split-n{
  flex:0 0 auto;
  direction:ltr; text-align:right;
  font-weight:900; line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.qb-split-pct{
  width:2.9em;
  font-size:clamp(1.15rem,1.9vw,2.4rem);
}
.qb-split-n{
  width:2.2em;
  font-size:clamp(.95rem,1.15vw,1.5rem);
  color:var(--hud-dim);
}
.qb-split.is-right .qb-split-pct{ color:#5BFFA6; text-shadow:0 0 20px rgba(47,224,122,.6); }
.qb-split.is-wrong .qb-split-pct{ color:#FF8FA0; text-shadow:0 0 20px rgba(255,61,90,.55); }

/* לפני התשובה הראשונה — הפסים ריקים והמספרים עמומים, כדי שיהיה
   ברור שממתינים ולא שהתוצאה היא באמת 0% */
.is-split:not(.is-live) .qb-split-pct,
.is-split:not(.is-live) .qb-split-n{ opacity:.35; }

/* --- אקולייזר מטריצת נקודות — כמו בקונספט --- */
.qb-eq{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:clamp(2px,.3vw,6px);
  width:100%;
  height:clamp(22px,3.4vh,54px);
  min-height:0;
  direction:ltr;            /* הסוויפ לא מתהפך ב-RTL */
}
.eq-col{
  flex:1 1 0; min-width:0;
  display:flex;
  flex-direction:column-reverse;   /* הנקודה הראשונה ב-DOM היא התחתונה */
  align-items:center;
  justify-content:space-between;
}
.eq-col > i{
  display:block;
  width:clamp(3px,.36vw,7px);
  aspect-ratio:1;
  border-radius:50%;
  background:#1B2A50;              /* נקודה כבויה */
  transition:background .3s ease, box-shadow .3s ease;
}
.eq-col > i.on{
  background:currentColor;
  box-shadow:0 0 6px currentColor;
}

/* סוויפ הצבעים לאורך 18 העמודות: ציאן → כחול → סגול → מג'נטה → ורוד → כתום → זהב */
.qb-eq > .eq-col:nth-child(1)  { color:#22E7F5; }
.qb-eq > .eq-col:nth-child(2)  { color:#24D7FA; }
.qb-eq > .eq-col:nth-child(3)  { color:#2FC0FF; }
.qb-eq > .eq-col:nth-child(4)  { color:#3AA6FF; }
.qb-eq > .eq-col:nth-child(5)  { color:#4B8CFF; }
.qb-eq > .eq-col:nth-child(6)  { color:#6C74FF; }
.qb-eq > .eq-col:nth-child(7)  { color:#8A5CFF; }
.qb-eq > .eq-col:nth-child(8)  { color:#A94BF5; }
.qb-eq > .eq-col:nth-child(9)  { color:#C63FE0; }
.qb-eq > .eq-col:nth-child(10) { color:#E035C6; }
.qb-eq > .eq-col:nth-child(11) { color:#F02FA8; }
.qb-eq > .eq-col:nth-child(12) { color:#FF2E8A; }
.qb-eq > .eq-col:nth-child(13) { color:#FF3D6E; }
.qb-eq > .eq-col:nth-child(14) { color:#FF5A4E; }
.qb-eq > .eq-col:nth-child(15) { color:#FF7A33; }
.qb-eq > .eq-col:nth-child(16) { color:#FF9A1F; }
.qb-eq > .eq-col:nth-child(17) { color:#FFB812; }
.qb-eq > .eq-col:nth-child(18) { color:#FFD60A; }

/* ============================================================
   מסכים נמוכים / צרים — הידוק כדי ששום דבר לא יגלוש
   ============================================================ */

@media (max-height:800px){
  .q-bar{ height:clamp(66px,12.5vh,110px); }
  .qb-eq{ height:clamp(18px,2.8vh,38px); }
  .qs-donut{ gap:2px; }
}

@media (max-aspect-ratio:1/1), (max-width:900px){
  .view-quiz .q-stage{ grid-template-columns:clamp(120px,26vw,240px) minmax(0,1fr); }
  .q-bar{ grid-template-columns:repeat(2,1fr); height:auto; padding-block:clamp(6px,1.2vh,14px); }
  .qb-zone:nth-child(2)::before{ display:none; }
}

/* ============================================================
   העדפת תנועה מופחתת — הכל נשאר סטטי וקריא
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .q-stats::before,
  .q-stats::after{ animation:none; opacity:.9; }
  .qb-zone.is-danger .qb-value{ animation:none; }
  .qb-eq.is-live > i{ animation:none; transform:scaleY(calc(var(--lvl) * .7)); }
  .d-arc{ transition:none; }
  .qb-track > i{ transition:none; }
}

/* --- החצים הכפולים באזור הזהב, כמו בקונספט --- */
.qb-chev{
  flex:0 0 auto;
  direction:ltr;              /* » הוא תו מראה — בלי זה הוא מתהפך ב-RTL */
  margin-inline-end:clamp(2px,.5vw,12px);
  font-size:clamp(1.1rem,1.9vw,2.4rem);
  font-weight:900;
  line-height:1;
  color:#FFB020;
  text-shadow:0 0 12px rgba(255,176,32,.75);
  animation:chev-nudge 1.5s ease-in-out infinite alternate;
}
@keyframes chev-nudge{
  from{ transform:translateX(0); }
  to  { transform:translateX(-22%); }
}
@media (prefers-reduced-motion: reduce){
  .qb-chev{ animation:none; }
}