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

:root{
  --bg:#0B1020; --bg-soft:#151C33; --card:#1B2340; --line:#2B3557;
  --ink:#F2F5FF; --ink-dim:#9AA5C4;
  --brand:#6C5CE7; --brand-2:#A78BFA;
  --ok:#22C55E; --bad:#EF4444; --warn:#F59E0B; --info:#38BDF8;
  --o1:#F59E0B; --o2:#38BDF8; --o3:#EC4899; --o4:#22C55E;
  --o5:#A78BFA; --o6:#F97316; --o7:#14B8A6; --o8:#E11D48; --o9:#84CC16;
  --r:18px; --shadow:0 12px 40px rgba(0,0,0,.45);

  /* טוקנים פנימיים למסך המקרן */
  --pad: clamp(18px, 2.6vw, 44px);
  --glass: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 42%, rgba(0,0,0,.12));
  --edge: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
  --ease: cubic-bezier(.22,.75,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Segoe UI","Assistant","Rubik",system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{ font-variant-numeric:tabular-nums; }

.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ============================================================
   רקע אווירה
   ============================================================ */

.ambient{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

.ambient .blob{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.blob-1{
  width:62vw; height:62vw; top:-22vw; right:-14vw;
  background:radial-gradient(circle at 35% 35%, rgba(108,92,231,.85), rgba(108,92,231,0) 68%);
  animation:drift-a 34s var(--ease) infinite alternate;
}
.blob-2{
  width:55vw; height:55vw; bottom:-24vw; left:-12vw;
  background:radial-gradient(circle at 60% 40%, rgba(56,189,248,.55), rgba(56,189,248,0) 68%);
  animation:drift-b 42s var(--ease) infinite alternate;
}
.blob-3{
  width:46vw; height:46vw; top:32vh; left:26vw;
  background:radial-gradient(circle at 50% 50%, rgba(236,72,153,.34), rgba(236,72,153,0) 66%);
  animation:drift-c 50s var(--ease) infinite alternate;
}
@keyframes drift-a{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(-6vw,7vh,0) scale(1.12); }
  100%{ transform:translate3d(4vw,-4vh,0) scale(.96); }
}
@keyframes drift-b{
  0%  { transform:translate3d(0,0,0) scale(1.05); }
  50% { transform:translate3d(9vw,-6vh,0) scale(.92); }
  100%{ transform:translate3d(-3vw,4vh,0) scale(1.1); }
}
@keyframes drift-c{
  0%  { transform:translate3d(0,0,0) scale(.9); opacity:.28; }
  50% { transform:translate3d(-10vw,-8vh,0) scale(1.15); opacity:.5; }
  100%{ transform:translate3d(7vw,6vh,0) scale(1); opacity:.3; }
}

/* כוכבים דקים — שלוש שכבות שנעות לאט */
.stars{
  position:absolute; inset:-10%;
  display:block;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 12%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.8px 1.8px at 38% 76%, rgba(167,139,250,.5), transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 58%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 43%, rgba(56,189,248,.4), transparent 60%),
    radial-gradient(1px 1px at 24% 62%, rgba(255,255,255,.3), transparent 60%);
  background-size:47% 53%, 61% 44%, 39% 67%, 53% 39%, 44% 58%, 33% 47%;
  opacity:.7;
  animation:stars-drift 90s linear infinite;
}
@keyframes stars-drift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-6%,-4%,0); }
}

/* אלומות אור עדינות מלמעלה */
.beams{
  position:absolute; inset:0;
  background:
    conic-gradient(from 200deg at 70% -10%, rgba(167,139,250,.14), transparent 22%, transparent 78%, rgba(56,189,248,.1)),
    linear-gradient(180deg, rgba(11,16,32,0) 40%, rgba(11,16,32,.85) 100%);
  mix-blend-mode:screen;
  opacity:.75;
  animation:beam-sway 26s ease-in-out infinite alternate;
}
@keyframes beam-sway{
  from{ transform:translateX(-2%) rotate(-.6deg); opacity:.55; }
  to  { transform:translateX(2%) rotate(.6deg); opacity:.85; }
}

/* גרעיניות פילם (SVG מוטבע כ-data URI — אפס בקשות רשת) */
.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045;
  mix-blend-mode:overlay;
}

.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(3,6,16,.72) 100%);
}

/* ============================================================
   במה ומעברים בין שלבים
   ============================================================ */

.stage{ position:fixed; inset:0; z-index:1; }

.view{
  position:absolute; inset:0;
  padding:var(--pad);
  display:flex; flex-direction:column;
  opacity:1; transform:none;
  transition:opacity .3s ease, transform .34s var(--ease), filter .3s ease;
}
.view.is-enter{ opacity:0; transform:translateY(22px) scale(.985); filter:blur(6px); }
.view.is-exit { opacity:0; transform:translateY(-16px) scale(1.012); filter:blur(6px); pointer-events:none; }

/* ============================================================
   רכיבים משותפים
   ============================================================ */

.pill{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.42em .95em;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  box-shadow:var(--edge);
  color:var(--ink-dim);
  font-size:clamp(.85rem,1.35vw,1.35rem);
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.pill strong{ color:var(--ink); font-weight:800; }

.glass{
  background:var(--glass), rgba(27,35,64,.62);
  border-radius:var(--r);
  box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(14px) saturate(1.2);
}

/* תג חיבור */
.badge{
  position:fixed; z-index:9; left:14px; bottom:14px;
  display:flex; align-items:center; gap:.5em;
  padding:.45em .85em;
  border-radius:999px;
  background:rgba(11,16,32,.72);
  box-shadow:var(--edge);
  color:var(--ink-dim);
  font-size:.95rem; font-weight:600;
  backdrop-filter:blur(8px);
  transition:opacity .3s ease, transform .3s var(--ease);
}
.badge.is-hidden{ opacity:0; transform:translateY(10px); pointer-events:none; }
.badge-dot{
  width:.62em; height:.62em; border-radius:50%;
  background:var(--bad);
  box-shadow:0 0 0 0 rgba(239,68,68,.55);
  animation:ping 1.6s ease-out infinite;
}
.badge.is-demo{ color:var(--brand-2); }
.badge.is-demo .badge-dot{ background:var(--brand-2); box-shadow:0 0 0 0 rgba(167,139,250,.5); }
@keyframes ping{
  0%  { box-shadow:0 0 0 0 currentColor; opacity:1; }
  70% { box-shadow:0 0 0 10px transparent; opacity:.75; }
  100%{ box-shadow:0 0 0 0 transparent; opacity:1; }
}

/* ============================================================
   1. לובי
   ============================================================ */

.view-lobby{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(16px,2.2vw,38px);
  align-items:stretch;
}

.cta{
  position:relative;
  padding:clamp(20px,2.6vw,46px);
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(10px,1.4vh,26px);
  overflow:hidden;
  background:var(--glass), linear-gradient(150deg, rgba(108,92,231,.28), rgba(27,35,64,.72) 55%);
  border-radius:calc(var(--r) + 10px);
  box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(16px) saturate(1.25);
}
/* טבעת אור מסתובבת סביב כרטיס החיוג */
.cta::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(167,139,250,.35) 74%, rgba(56,189,248,.3) 84%, transparent 92%);
  animation:spin 16s linear infinite;
  pointer-events:none;
}
.cta::after{
  content:""; position:absolute; inset:1.5px;
  border-radius:calc(var(--r) + 9px);
  background:linear-gradient(150deg, rgba(23,30,56,.94), rgba(15,20,40,.97));
  pointer-events:none;
}
.cta > *{ position:relative; z-index:2; }
@keyframes spin{ to{ transform:rotate(1turn); } }

.cta-game{
  font-size:clamp(1rem,1.7vw,1.7rem);
  font-weight:700; color:var(--brand-2);
  letter-spacing:.04em;
}
.cta-title{
  margin:0;
  font-size:clamp(2.6rem,6.2vw,6.4rem);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 30%, #B8C4EE 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow:0 0 60px rgba(167,139,250,.25);
}
.cta-sub{
  margin:0; color:var(--ink-dim);
  font-size:clamp(1rem,1.6vw,1.6rem); font-weight:600;
}

.dial{ display:flex; gap:clamp(4px,.6vw,10px); direction:ltr; flex-wrap:nowrap; }
.dial i{
  flex:1 1 0; min-width:0;
  display:grid; place-items:center;
  padding:clamp(4px,.9vh,16px) 0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03));
  box-shadow:var(--edge), 0 8px 22px rgba(0,0,0,.35);
  font-style:normal; font-weight:900;
  font-size:clamp(1.6rem,4.4vw,4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#fff;
  animation:tile-in .5s var(--ease) backwards;
}
@keyframes tile-in{
  from{ opacity:0; transform:translateY(14px) scale(.9); }
}

.ext{
  display:flex; align-items:center; gap:.6em;
  font-size:clamp(1.2rem,2.4vw,2.4rem); font-weight:800;
}
.ext-num{
  display:grid; place-items:center;
  min-width:1.9em; padding:.1em .3em;
  border-radius:14px;
  background:linear-gradient(180deg,var(--warn),#D97706);
  color:#231303;
  box-shadow:0 10px 26px rgba(245,158,11,.35);
  font-size:1.25em; font-weight:900;
}

.counter{
  display:flex; align-items:baseline; gap:.4em;
  margin-top:auto;
  padding-top:clamp(6px,1vh,16px);
}
.counter b{
  font-size:clamp(2.4rem,5.4vw,5.6rem);
  font-weight:900; line-height:1;
  color:var(--ok);
  text-shadow:0 0 44px rgba(34,197,94,.35);
  transition:transform .3s var(--ease);
}
.counter b.bump{ animation:bump .45s var(--ease); }
@keyframes bump{ 40%{ transform:scale(1.18); } }
.counter span{ font-size:clamp(1.1rem,2vw,2rem); font-weight:700; color:var(--ink-dim); }

/* רשת המשתתפים */
.roster{
  display:flex; flex-direction:column; min-height:0;
  padding:clamp(14px,1.8vw,28px);
  background:var(--glass), rgba(21,28,51,.55);
  border-radius:calc(var(--r) + 10px);
  box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(14px);
}
.roster-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6em; margin-bottom:clamp(8px,1.2vh,18px);
}
.roster-head h2{
  margin:0; font-size:clamp(1.1rem,2vw,2rem); font-weight:800; letter-spacing:.01em;
}
.roster-grid{
  flex:1 1 auto; min-height:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(130px,13vw,210px),1fr));
  grid-auto-rows:min-content;
  gap:clamp(6px,.8vw,14px);
  overflow:hidden;
  align-content:start;
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
.roster-grid.dense{
  grid-template-columns:repeat(auto-fill, minmax(clamp(92px,8.5vw,140px),1fr));
}
.player{
  display:flex; align-items:center; gap:.55em;
  padding:.5em .7em;
  border-radius:14px;
  background:linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:var(--edge);
  min-width:0;
  animation:player-in .55s var(--ease) backwards;
  transition:opacity .3s ease, filter .3s ease;
}
.player.off{ opacity:.35; filter:grayscale(.7); }
.player-num{
  flex:none;
  display:grid; place-items:center;
  width:1.85em; height:1.85em;
  border-radius:11px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:#fff; font-weight:900;
  font-size:clamp(.95rem,1.35vw,1.4rem);
  box-shadow:0 6px 16px rgba(108,92,231,.4);
}
.player-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(.95rem,1.35vw,1.45rem); font-weight:700;
}
.dense .player-name{ font-size:clamp(.8rem,1vw,1.1rem); }
@keyframes player-in{
  from{ opacity:0; transform:translateY(16px) scale(.86); filter:blur(4px); }
}
.roster-empty{
  margin:auto; text-align:center;
  color:var(--ink-dim);
  font-size:clamp(1.1rem,1.9vw,1.9rem); font-weight:700;
}
.roster-empty .dots i{
  display:inline-block; width:.32em; height:.32em; margin:0 .12em;
  border-radius:50%; background:var(--brand-2);
  animation:blink 1.4s ease-in-out infinite;
}
.roster-empty .dots i:nth-child(2){ animation-delay:.2s; }
.roster-empty .dots i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,100%{ opacity:.25; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-.25em); } }
.roster-more{
  margin-top:.6em; text-align:center; color:var(--ink-dim);
  font-size:clamp(.9rem,1.3vw,1.3rem); font-weight:700;
}

/* ============================================================
   2+3. שאלה / חשיפה  (אותו DOM — מעבר חלק ביניהם)
   ============================================================ */

.view-quiz{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,1.6vh,26px);
}

.q-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(14px,2vw,34px);
}
.q-left{ min-width:0; }
.q-meta{ display:flex; align-items:center; gap:.6em; margin-bottom:.5em; flex-wrap:wrap; }
.q-text{
  margin:0;
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.015em;
  text-wrap:balance;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}

/* טבעת הספירה לאחור */
.ring{ position:relative; width:clamp(110px,12.5vw,196px); aspect-ratio:1; flex:none; }
.ring svg{ width:100%; height:100%; display:block; transform:rotate(-90deg) scaleX(-1); }
.ring .track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:9; }
.ring .prog{
  fill:none; stroke:var(--info); stroke-width:9; stroke-linecap:round;
  filter:drop-shadow(0 0 10px currentColor);
  color:var(--info);
  transition:stroke .5s ease, color .5s ease;
}
.ring.warn .prog{ stroke:var(--warn); color:var(--warn); }
.ring.danger .prog{ stroke:var(--bad); color:var(--bad); }
.ring-num{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:clamp(2.2rem,4.6vw,4.6rem);
  font-weight:900; line-height:1;
  letter-spacing:-.03em;
  transition:color .4s ease, transform .3s var(--ease);
}
.ring.warn .ring-num{ color:var(--warn); }
.ring.danger .ring-num{ color:var(--bad); }
.ring.pulse{ animation:ring-pulse 1s ease-in-out infinite; }
@keyframes ring-pulse{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 0 rgba(239,68,68,0)); }
  50%    { transform:scale(1.06); filter:drop-shadow(0 0 26px rgba(239,68,68,.45)); }
}
.is-reveal .ring{ opacity:0; transform:scale(.8); pointer-events:none; }
.ring{ transition:opacity .3s ease, transform .35s var(--ease); }

/* רשת התשובות */
.opts{
  display:grid;
  gap:clamp(8px,1.2vw,20px);
  min-height:0;
  align-content:stretch;
}
.opts[data-n="2"]{ grid-template-columns:1fr 1fr; }
.opts[data-n="3"],.opts[data-n="4"],
.opts[data-n="5"],.opts[data-n="6"]{ grid-template-columns:1fr 1fr; }
.opts[data-n="7"],.opts[data-n="8"],.opts[data-n="9"]{ grid-template-columns:repeat(3,1fr); }

.opt{
  position:relative;
  display:flex; flex-direction:column; justify-content:center;
  gap:.4em;
  min-width:0;
  padding:clamp(10px,1.5vw,26px) clamp(12px,1.6vw,28px);
  border-radius:var(--r);
  background:var(--glass), rgba(27,35,64,.66);
  box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(12px);
  overflow:hidden;
  animation:opt-in .5s var(--ease) backwards;
  transition:transform .38s var(--ease), opacity .38s ease, filter .38s ease, box-shadow .38s ease, background .38s ease;
}
/* פס צבע עדין בקצה הכרטיס */
.opt::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:6px;
  background:var(--acc); opacity:.85;
  transition:opacity .3s ease;
}
@keyframes opt-in{
  from{ opacity:0; transform:translateY(24px) scale(.96); filter:blur(5px); }
}

.opt-main{ display:flex; align-items:center; gap:clamp(10px,1.3vw,22px); min-width:0; }
.opt-key{
  flex:none;
  display:grid; place-items:center;
  width:clamp(50px,4.6vw,92px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.4), transparent 60%), var(--acc);
  color:#0B1020;
  font-weight:900;
  font-size:clamp(1.7rem,3.1vw,3.2rem);
  line-height:1;
  box-shadow:0 10px 30px color-mix(in srgb, var(--acc) 45%, transparent), inset 0 -3px 10px rgba(0,0,0,.25);
  transition:transform .38s var(--ease), box-shadow .38s ease;
}
.opt-text{
  min-width:0;
  font-size:clamp(1.4rem,2.6vw,2.6rem);
  font-weight:800; line-height:1.16;
  overflow-wrap:anywhere;
}
.opts[data-n="7"] .opt-text,
.opts[data-n="8"] .opt-text,
.opts[data-n="9"] .opt-text{ font-size:clamp(1.4rem,2vw,2rem); }
.opts[data-n="5"] .opt-text,
.opts[data-n="6"] .opt-text{ font-size:clamp(1.4rem,2.3vw,2.3rem); }

.opt-mark{
  position:absolute; inset-inline-end:clamp(10px,1.2vw,20px); inset-block-start:clamp(8px,1vw,16px);
  font-size:clamp(1.4rem,2.4vw,2.4rem);
  opacity:0; transform:scale(.4) rotate(-18deg);
  transition:opacity .35s ease, transform .45s var(--ease);
}

/* שורת הספירה — מוסתרת בשלב השאלה */
.tally{
  display:grid; gap:.35em;
  max-height:0; opacity:0;
  transition:max-height .4s var(--ease), opacity .3s ease, margin .4s var(--ease);
}
.tally-bar{
  height:clamp(10px,1.1vh,18px);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.tally-bar i{
  display:block; height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, #fff 0%), var(--acc));
  box-shadow:0 0 18px color-mix(in srgb, var(--acc) 55%, transparent);
  transition:width .9s var(--ease);
}
.tally-txt{
  display:flex; align-items:baseline; gap:.4em;
  font-size:clamp(1rem,1.5vw,1.5rem); font-weight:800; color:var(--ink-dim);
}
.tally-txt b{ color:var(--ink); font-size:1.25em; }

/* מצב חשיפה */
.is-reveal .tally{ max-height:6em; opacity:1; margin-top:.5em; }
.is-reveal .opt.correct{
  background:linear-gradient(150deg, rgba(34,197,94,.35), rgba(21,80,45,.55));
  box-shadow:0 0 0 3px rgba(34,197,94,.6), 0 22px 60px rgba(34,197,94,.35);
  transform:scale(1.035);
  z-index:2;
  animation:burst .7s var(--ease);
}
.is-reveal .opt.correct::before{ background:var(--ok); opacity:1; }
.is-reveal .opt.correct .opt-mark{ opacity:1; transform:scale(1) rotate(0); }
.is-reveal .opt.correct .opt-key{ transform:scale(1.06); box-shadow:0 12px 34px rgba(34,197,94,.5); }
@keyframes burst{
  0%  { transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  45% { transform:scale(1.09); box-shadow:0 0 0 16px rgba(34,197,94,0); }
  100%{ transform:scale(1.035); }
}
.is-reveal .opt.wrong{
  opacity:.52; filter:grayscale(.65); transform:scale(.965);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.is-reveal .opt.wrong::before{ opacity:.4; }

/* אזור תחתון — התקדמות / כותרת חשיפה */
.q-foot{
  position:relative;
  min-height:clamp(64px,9vh,110px);
}
.q-foot > *{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; gap:.5em;
  transition:opacity .3s ease, transform .35s var(--ease);
}
.foot-progress{ opacity:1; transform:none; }
.foot-reveal{ opacity:0; transform:translateY(14px); pointer-events:none; }
.is-reveal .foot-progress{ opacity:0; transform:translateY(-14px); pointer-events:none; }
.is-reveal .foot-reveal{ opacity:1; transform:none; pointer-events:auto; }

.prog-label{
  display:flex; align-items:baseline; gap:.4em;
  font-size:clamp(1.1rem,2vw,2rem); font-weight:800; color:var(--ink-dim);
}
.prog-label b{ color:var(--ink); }
.prog-track{
  height:clamp(12px,1.5vh,22px);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  box-shadow:var(--edge);
  overflow:hidden;
}
.prog-track i{
  display:block; height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--info));
  background-size:200% 100%;
  box-shadow:0 0 26px rgba(108,92,231,.6);
  transition:width .6s var(--ease);
  animation:sheen 3s linear infinite;
}
@keyframes sheen{ to{ background-position:200% 0; } }

.reveal-title{
  margin:0;
  font-size:clamp(1.6rem,3.4vw,3.4rem);
  font-weight:900; line-height:1.1;
  color:var(--ok);
  text-shadow:0 0 44px rgba(34,197,94,.35);
  overflow-wrap:anywhere;
}
.reveal-sub{
  margin:0; font-size:clamp(1.1rem,1.9vw,1.9rem); font-weight:700; color:var(--ink-dim);
}
.reveal-sub b{ color:var(--ink); }

/* ============================================================
   4. טבלת מובילים
   ============================================================ */

.view-board{ gap:clamp(10px,1.6vh,24px); }
.board-head{ display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap; }
.board-title{
  margin:0;
  font-size:clamp(2rem,4.4vw,4.2rem); font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#A9B6E6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.board-list{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  gap:clamp(6px,.9vh,14px);
  margin-top:clamp(8px,1.4vh,20px);
  overflow:hidden;
}
.row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,1.4vw,24px);
  padding:clamp(8px,1.1vh,18px) clamp(12px,1.5vw,26px);
  border-radius:var(--r);
  background:var(--glass), rgba(27,35,64,.6);
  box-shadow:var(--shadow), var(--edge);
  backdrop-filter:blur(10px);
  animation:row-in .5s var(--ease) backwards;
}
@keyframes row-in{
  from{ opacity:0; transform:translateX(-40px) scale(.97); filter:blur(4px); }
}
.row-rank{
  min-width:1.6em; text-align:center;
  font-size:clamp(1.2rem,2.2vw,2.2rem); font-weight:900; color:var(--ink-dim);
}
.row-medal{ font-size:clamp(1.5rem,2.8vw,2.8rem); line-height:1; }
.row-num{
  display:grid; place-items:center;
  width:1.9em; height:1.9em; border-radius:12px;
  background:rgba(255,255,255,.09); box-shadow:var(--edge);
  font-size:clamp(.95rem,1.4vw,1.4rem); font-weight:900; color:var(--ink-dim);
}
.row-mid{ display:flex; align-items:center; gap:.7em; min-width:0; }
.row-name{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(1.3rem,2.4vw,2.4rem); font-weight:800;
}
.row-score{
  font-size:clamp(1.4rem,2.6vw,2.6rem); font-weight:900;
  color:var(--brand-2);
  text-shadow:0 0 26px rgba(167,139,250,.3);
}
.row-score small{ font-size:.5em; font-weight:700; color:var(--ink-dim); margin-inline-start:.35em; }

.row.top{ background:var(--glass), linear-gradient(120deg, rgba(108,92,231,.32), rgba(27,35,64,.7) 60%); }
.row.top .row-name{ font-size:clamp(1.5rem,2.9vw,2.9rem); }
.row.r1{
  box-shadow:0 0 0 2px rgba(245,158,11,.55), 0 20px 50px rgba(245,158,11,.22), var(--edge);
  background:var(--glass), linear-gradient(120deg, rgba(245,158,11,.3), rgba(27,35,64,.72) 62%);
}
.row.r1 .row-score{ color:var(--warn); text-shadow:0 0 30px rgba(245,158,11,.4); }
.row.r2{ box-shadow:0 0 0 2px rgba(203,213,225,.4), 0 16px 40px rgba(0,0,0,.4), var(--edge); }
.row.r3{ box-shadow:0 0 0 2px rgba(249,115,22,.4), 0 16px 40px rgba(0,0,0,.4), var(--edge); }
.board-more{
  text-align:center; color:var(--ink-dim);
  font-size:clamp(1.1rem,1.8vw,1.8rem); font-weight:800;
  padding-top:.3em;
  animation:row-in .5s var(--ease) backwards;
}

/* ============================================================
   5. סיום — פודיום + קונפטי
   ============================================================ */

.view-podium{ align-items:center; gap:clamp(8px,1.4vh,22px); overflow:hidden; }
.podium-title{
  margin:0; text-align:center;
  font-size:clamp(2rem,4.6vw,4.4rem); font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(180deg,#FFF3C4,#F59E0B 70%,#EC4899);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 70px rgba(245,158,11,.25);
  animation:title-pop .7s var(--ease) backwards;
}
@keyframes title-pop{ from{ opacity:0; transform:translateY(-18px) scale(.9); } }
.podium-sub{
  margin:0; text-align:center; color:var(--ink-dim);
  font-size:clamp(1rem,1.7vw,1.7rem); font-weight:700;
}

.podium{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,1.6vw,30px);
  width:min(1100px,96%);
  margin-top:clamp(6px,1.2vh,18px);
}
.ped{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.4em; }
.ped-1{ order:2; flex-grow:1.25; }
.ped-2{ order:1; }   /* בימין (RTL) */
.ped-3{ order:3; }
.ped-medal{
  font-size:clamp(2rem,4.2vw,4.2rem); line-height:1;
  animation:medal-drop .8s var(--ease) backwards;
}
.ped-1 .ped-medal{ font-size:clamp(2.6rem,5.4vw,5.4rem); filter:drop-shadow(0 0 26px rgba(245,158,11,.6)); }
@keyframes medal-drop{ from{ opacity:0; transform:translateY(-46px) rotate(-30deg); } }
.ped-name{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:clamp(1.1rem,2.1vw,2.1rem); font-weight:800; text-align:center;
}
.ped-1 .ped-name{ font-size:clamp(1.4rem,2.8vw,2.8rem); }
.ped-score{
  font-size:clamp(1.1rem,2vw,2rem); font-weight:900; color:var(--brand-2);
}
.ped-1 .ped-score{ color:var(--warn); font-size:clamp(1.4rem,2.6vw,2.6rem); }
.ped-block{
  width:100%;
  border-radius:16px 16px 0 0;
  background:var(--glass), linear-gradient(180deg, rgba(108,92,231,.4), rgba(27,35,64,.85));
  box-shadow:var(--shadow), var(--edge);
  display:grid; place-items:center;
  transform-origin:bottom;
  animation:rise .85s var(--ease) backwards;
  position:relative;
  overflow:hidden;
}
.ped-block span{
  font-size:clamp(2rem,4.4vw,4.6rem); font-weight:900; color:rgba(255,255,255,.28);
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.ped-1 .ped-block{
  height:clamp(120px,26vh,270px);
  background:var(--glass), linear-gradient(180deg, rgba(245,158,11,.55), rgba(120,53,15,.85));
  box-shadow:0 0 0 2px rgba(245,158,11,.5), 0 -14px 70px rgba(245,158,11,.35), var(--shadow);
  animation-delay:.1s;
}
.ped-2 .ped-block{ height:clamp(84px,18vh,190px); animation-delay:.25s; }
.ped-3 .ped-block{ height:clamp(64px,13vh,140px); animation-delay:.4s; }
.ped-1 .ped-block::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
  animation:shine 3.4s ease-in-out infinite;
}
@keyframes shine{ 0%{ transform:translateX(-120%); } 60%,100%{ transform:translateX(120%); } }
@keyframes rise{ from{ opacity:0; transform:scaleY(.05); } }

.standings{
  width:min(1200px,98%);
  flex:1 1 auto; min-height:0;
  margin-top:clamp(6px,1.2vh,16px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(210px,22vw,320px),1fr));
  gap:clamp(5px,.7vh,10px) clamp(8px,1.2vw,20px);
  align-content:start;
  overflow:hidden;
  mask-image:linear-gradient(180deg,#000 86%,transparent 100%);
}
.st-row{
  display:flex; align-items:center; gap:.55em;
  padding:.4em .7em;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  box-shadow:var(--edge);
  font-size:clamp(.95rem,1.4vw,1.4rem);
  animation:row-in .45s var(--ease) backwards;
  min-width:0;
}
.st-rank{ color:var(--ink-dim); font-weight:900; min-width:1.9em; }
.st-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.st-score{ font-weight:900; color:var(--brand-2); }

/* קונפטי — CSS בלבד */
.confetti{ position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.confetti i{
  position:absolute; top:-12vh;
  width:.62vw; min-width:7px; height:1.5vw; min-height:14px;
  border-radius:2px;
  opacity:.9;
  animation:fall linear infinite;
}
.confetti i:nth-child(3n){ border-radius:50%; height:.7vw; min-height:8px; }
.confetti i:nth-child(4n){ width:.35vw; min-width:4px; }
@keyframes fall{
  0%  { transform:translate3d(0,-12vh,0) rotate(0deg); opacity:0; }
  8%  { opacity:.95; }
  100%{ transform:translate3d(var(--dx,4vw),112vh,0) rotate(var(--rot,720deg)); opacity:.9; }
}

/* ============================================================
   מסכים צרים / אנכיים
   ============================================================ */

@media (max-aspect-ratio:1/1), (max-width:900px){
  .view-lobby{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .q-head{ grid-template-columns:1fr; }
  .q-head .ring{ justify-self:end; }
  .opts[data-n="7"],.opts[data-n="8"],.opts[data-n="9"]{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .blob,.stars,.beams{ animation:none !important; }
}