/* ═══ המסך הראשון: «המסלול של ג׳ובי» ═══════════════════════════════════
   ג׳ובי במרכז, והקהלים הם עולמות שמקיפים אותו. טוקנים בלבד, כמו styles.css. */
@font-face { font-family: 'Noto Sans Hebrew'; src: url('assets/fonts/noto-sans-hebrew-var.woff') format('woff'); font-weight: 100 900; font-display: swap; }
:root {
  --page: #090F1F;
  --tx: #F1F3FA;
  --tx-mut: #B8C0D2;
  --gold: #F4B92F;
  --orbit: rgba(184, 192, 210, 0.28);
  --scrim-top: rgba(9, 15, 31, 0.35);
  --scrim-bottom: rgba(9, 15, 31, 0.80);
  /* צבעי העולמות: מערכת המותג (src/design/tokens.ts) */
  --w-student: #25BFE8;
  --w-teacher: #F4B92F;
  --w-principal: #946CFF;
  --w-district: #5146E5;
  --w-private: #43D5AD;
  --w-partner: #FF7185;
  --shade: rgba(5, 9, 18, 0.55);
  --shine: rgba(255, 255, 255, 0.55);
  --t-q: 34px;
  /* ההדגמה (data-view=talk) */
  --on-gold: #090F1F;
  --cyan: #25BFE8;
  --violet: #946CFF;
  --err: #FFB4BF;
  --board: rgba(14, 26, 48, 0.92);
  --board-rim: rgba(37, 191, 232, 0.35);
  --board-glow: rgba(37, 191, 232, 0.25);
  --chalk: #F1F3FA;
  --chalk-mut: #9FB0CC;
  --pen: #B9D3FF;
  --mark-x: #FF8A9B;
  --mark-ok: #43D5AD;
  --bubble: #F1F3FA;
  --bubble-tx: #141B2E;
  --line: rgba(184, 192, 210, 0.30);
  --chip-brd: rgba(241, 243, 250, 0.5);
  --field-bg: rgba(9, 15, 31, 0.82);
  --field-brd: rgba(184, 192, 210, 0.52);
  --radius: 14px;
  --radius-l: 22px;
  --t-say: 17px; --t-why: 15px; --t-math: 21px; --t-micro: 13px; --t-btn: 16px;
  --t-name: 14px;
  --t-sub: 17px;
  --t-small: 14px;
  --B: min(330px, 41vh);   /* ג׳ובי: צלע הקנבס של המעצב (לירז 2.11: קצת קטן יותר) */
  --globe: 60px;
  --system-h: min(540px, calc(100dvh - 210px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* שפת התנועה (DESIGN.md): כל משך בדף הוא אחד מאלה */
  --d1: 200ms; --d2: 420ms; --d3: 750ms; --stagger: 60ms;
  --w-oversight: #946CFF;
  --w-business: #43D5AD;
  --glass: rgba(12, 22, 42, 0.88);
  --glass-brd: rgba(184, 192, 210, 0.22);
}
@media (min-width: 960px) { :root { --t-say: 19px; --t-why: 16px; --t-math: 24px; --t-q: 56px; --t-sub: 20px; --t-name: 17px; --B: min(520px, 64vh); --globe: 86px; --system-h: min(600px, calc(100dvh - 250px)); } }
@media (max-height: 700px) { :root { --B: 280px; --system-h: 410px; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100dvh; background: var(--page); color: var(--tx); font-family: 'Noto Sans Hebrew', system-ui, sans-serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* החלל: הציור של המעצב, ומעליו כוכבים בשלושה עומקים (קנבס) */
.sky { position: fixed; inset: 0; z-index: -2; background: var(--page) url('assets/sky-900.webp') 60% 30% / cover no-repeat; }
.sky::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 0%, var(--scrim-top) 45%, var(--scrim-bottom) 100%); }
@media (min-width: 960px) { .sky { background-image: url('assets/sky-1800.webp'); } }
.stars { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

.app { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 16px 24px; }
.bar { width: 100%; max-width: 1100px; display: flex; align-items: center; gap: 4px; min-height: 52px; }
.bar .mark { margin: 0 auto; }
[data-view="worlds"] .only-talk, [data-view="talk"] .only-worlds, .only-scene { display: none !important; }
.mark { height: 22px; width: auto; opacity: .8; }
.sub { margin: 8px 0 0; font-size: var(--t-sub); color: var(--tx-mut); text-align: center; }
.q { margin: 3vh 0 0; font-size: var(--t-q); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; text-align: center; }

/* ── המערכת: ג׳ובי, המסלול והעולמות ── */
.system { position: relative; isolation: isolate; width: 100%; max-width: 900px; height: var(--system-h); margin: auto 0; flex: none; }
.joovi { cursor: pointer; } .joovi { position: absolute; z-index: 2; left: calc(50% - var(--B) * .28); top: calc(50% - var(--B) * .352); width: calc(var(--B) * .56); height: calc(var(--B) * .64); pointer-events: auto; transform-origin: 0 0; }
.jbox { position: absolute; width: var(--B); height: var(--B); left: calc(var(--B) * -.24); top: calc(var(--B) * -.18); }
.jbox > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.clip { opacity: 0; }
.still[data-pose="point"] { transform: translate(11.10%, .19%) scale(1.137); }
.still[data-pose="thumb"] { transform: translate(7.24%, 2.01%) scale(1.116); }
.still[data-pose="welcome"] { transform: translate(7.74%, .85%) scale(1.062); }

/* המסלול: חצי אחורי מתחת לג׳ובי, וחצי קדמי מעליו. כך העולמות עוברים מאחוריו ולפניו */
.orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit.back { z-index: 1; }
.orbit.front { z-index: 3; }
.orbit path { fill: none; stroke: var(--orbit); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* בלי z-index כאן: כל עולם צריך להיות בהקשר של .system, כדי לעבור מאחורי ג׳ובי (z 2) או לפניו */
.worlds { position: absolute; inset: 0; pointer-events: none; }
.world {
  position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 6px;
  color: var(--tx); text-decoration: none; pointer-events: auto; will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.globe {
  width: var(--globe); height: var(--globe); border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, var(--shine) 0%, transparent 32%),
    radial-gradient(circle at 70% 78%, var(--shade) 0%, transparent 60%),
    var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px var(--shade), 0 0 36px -6px var(--c);
  transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease);
}
.name { font-size: var(--t-name); font-weight: 700; white-space: nowrap; text-shadow: 0 1px 8px var(--page); transition: opacity var(--d2); }
.world:hover .globe, .world:focus-visible .globe { transform: scale(1.12); box-shadow: 0 0 0 2px var(--tx), 0 10px 30px var(--shade), 0 0 46px -4px var(--c); }
.world:focus-visible { outline: none; }
[data-world="student"]   { --c: var(--w-student); }
[data-world="teacher"]   { --c: var(--w-teacher); }
[data-world="principal"] { --c: var(--w-principal); }
[data-world="district"]  { --c: var(--w-district); }
[data-world="private"]   { --c: var(--w-private); }
[data-world="partner"]   { --c: var(--w-partner); }
[data-world="oversight"] { --c: var(--w-oversight); }
[data-world="business"]  { --c: var(--w-business); }

.foot { margin: auto 0 0; padding-top: 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; color: var(--orbit); }
.about { font-size: var(--t-small); color: var(--tx-mut); text-underline-offset: 5px; text-decoration-color: var(--orbit); }
.about:hover { color: var(--tx); }

/* כניסה (רק עם JS): הכל מתחיל מוסתר, ו־first.js מעלה אותו פעם אחת */
.js .sub { opacity: 0; transform: translateY(10px); transition: opacity var(--d3) var(--ease) var(--d1), transform var(--d3) var(--ease) var(--d1); }
.js .sub.in { opacity: 1; transform: none; }
.js .q { opacity: 0; transform: translateY(10px); transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.js .q.in { opacity: 1; transform: none; }
.js .foot { opacity: 0; transition: opacity var(--d3) var(--ease) var(--d2); }
.js .foot.in { opacity: 1; }

/* בלי JS: העולמות בשורה, מתחת לג׳ובי */
.no-js .worlds { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: calc(var(--system-h) * .62); pointer-events: auto; }
.no-js .world { position: static; }
.no-js .orbit { display: none; }

@media (prefers-reduced-motion: reduce) { .js .q, .js .sub, .js .foot, .globe { transition: none; } }

/* ═══ ההדגמה (data-view=talk): אותו עולם, ג׳ובי גלש לפינה והלוח במרכז ═══ */
.ibtn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--tx-mut); border-radius: var(--radius); cursor: pointer; }
.ibtn[hidden] { display: none; }
.ibtn:hover { color: var(--tx); }
.ibtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-open { color: var(--gold); }
@media (min-width: 9999px) {
  [data-view="talk"] { grid-template-columns: 1fr minmax(0, 520px); grid-template-areas: "bar bar" "sys say" "sys col"; column-gap: 48px; max-width: 1100px; margin: 0 auto; }
  [data-view="talk"] .system { --B: 440px; justify-self: center; }
  [data-view="talk"] .bubble { align-self: end; }
  [data-view="talk"] .col { max-width: none; align-self: start; }
}
.bubble { position: relative; flex: 1; padding: 12px 16px; background: var(--bubble); color: var(--bubble-tx); border-radius: var(--radius-l); font-size: var(--t-say); font-weight: 600; line-height: 1.45; outline: none; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
/* זנב לכיוון ג׳ובי (משמאל לבועה) */
.bubble.swap { opacity: 0; transform: translateY(4px); }
.bubble p { margin: 0; }

.col { max-width: var(--col); margin: 0 auto; }
.caps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-micro); color: var(--tx-mut); min-height: 1.4em; }
.caps li { opacity: .5; transition: opacity var(--d2), color var(--d2); }
.caps li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 6px; background: var(--line); vertical-align: middle; transition: background-color var(--d2), box-shadow var(--d2); }
.caps li.lit { opacity: 1; color: var(--tx); }
.caps li.lit::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* הלוח נפתח מתוך החלל: נקודת אור שמתרחבת לחלון (clip-path), עם הבהק בשוליים */
.stage { margin-top: 12px; }
.stage[hidden] { display: none; }
.stage-body {
  position: relative; min-height: 250px; padding: 16px; border-radius: var(--radius-l);
  background: var(--board); box-shadow: 0 0 0 1px var(--board-rim), 0 0 60px -10px var(--board-glow), 0 20px 50px var(--shade);
  clip-path: circle(0% at 15% 0%); transition: clip-path var(--d3) var(--ease);
  backdrop-filter: blur(2px);
}
.stage.open .stage-body { clip-path: circle(150% at 15% 0%); }
.stage.closing .stage-body { clip-path: circle(0% at 50% 50%); transition-duration: var(--d3); }

.why { min-height: 2.9em; margin: 10px 4px 0; text-align: center; font-size: var(--t-why); line-height: 1.45; color: var(--tx-mut); transition: opacity var(--d2) var(--ease); }
.why.swap { opacity: 0; }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn { min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 1px solid var(--chip-brd); background: transparent; color: var(--tx); font-size: var(--t-btn); font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; transition: background-color var(--d1), transform var(--d1) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn.quiet { border-color: transparent; color: var(--tx-mut); font-weight: 500; }
.end .vision { margin: 4px 0 10px; text-align: center; font-size: var(--t-say); font-weight: 700; color: var(--tx); }

/* ── הלוח עצמו (stage/show.js) ── */
.board { position: relative; }
.scene { display: grid; gap: 6px; justify-items: center; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.scene.in { opacity: 0; transform: translateY(8px) scale(.98); }
.scene.out { position: absolute; inset: 0; opacity: 0; transform: scale(.97); }
.bm { direction: ltr; unicode-bidi: isolate; font-size: var(--t-math); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--chalk); }
.bm.task { color: var(--chalk-mut); padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.bm.changed { color: var(--chalk); }
.brow { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.brow.pen .bm { color: var(--pen); }
.bnote { font-size: var(--t-small); color: var(--chalk-mut); }
.bslot { width: 22px; display: inline-flex; }
.bk { width: 22px; height: 22px; }
.bk.x { color: var(--mark-x); }
.bk.ok { color: var(--mark-ok); }
.brow.bad .bm { text-decoration: line-through; text-decoration-color: var(--mark-x); text-decoration-thickness: 2px; }
.brow.dissolve { opacity: 0; filter: blur(4px); transform: scale(1.04); transition: opacity var(--d3), filter var(--d3), transform var(--d3); }
.brow.fixed .bm { color: var(--chalk); }
.bcheck-note, .bhint { margin: 2px 0 0; font-size: var(--t-small); font-weight: 700; color: var(--mark-x); }
.bhint { color: var(--gold); }
.bw { clip-path: inset(0 100% 0 0); transition: clip-path var(--d3) var(--ease); }
.bw.on { clip-path: inset(0 0 0 0); }
.bf { opacity: 0; transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.bf.on { opacity: 1; }

.bal { width: 100%; max-width: 330px; height: auto; overflow: visible; direction: ltr; }
.bal text { direction: ltr; unicode-bidi: isolate; }
.bd { stroke: var(--chalk); stroke-linecap: round; opacity: 0; transition: opacity var(--d2) var(--ease); }
.bd.on { opacity: 1; }
.bal-beam { stroke-width: 3.5; }
.bal-pan { stroke-width: 3; }
.bal-rope { stroke: var(--chalk-mut); stroke-width: 1.2; stroke-dasharray: 3 3; }
.bal-stand { fill: none; stroke: var(--chalk-mut); stroke-width: 1.5; }
.bal-pin { fill: var(--gold); }
.bal-item rect { fill: none; stroke-width: 1.6; }
.bal-item text { font-size: var(--t-micro); text-anchor: middle; font-family: 'Noto Sans Hebrew', system-ui, sans-serif; }
.bal-item.bx rect { stroke: var(--cyan); } .bal-item.bx text { fill: var(--cyan); font-style: italic; }
.bal-item.bu rect { stroke: var(--chalk-mut); } .bal-item.bu text { fill: var(--chalk-mut); }
.bal-item.pop { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.bal-item.pop.on { opacity: 1; transform: none; }
.bal-item.pop.on.gone, .bal-item.gone { opacity: 0; transform: translateY(-14px) scale(.6); transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.bal-pill rect { fill: none; stroke: var(--gold); stroke-width: 1.4; }
.bal-pill text { fill: var(--gold); font-size: var(--t-micro); text-anchor: middle; font-family: 'Noto Sans Hebrew', system-ui, sans-serif; }

.bpl { position: relative; width: 100%; max-width: 280px; touch-action: none; cursor: grab; }
.bpl svg { display: block; width: 100%; height: auto; }
.bpl .g { stroke: rgba(184, 192, 210, .14); } .bpl .a { stroke: var(--chalk-mut); stroke-width: 1.2; }
.bpl .cv { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; }
.bpl .dt { fill: var(--gold); stroke: var(--page); stroke-width: 2; }
.bhandle { position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); background: none; border: 0; border-radius: var(--radius-l); }

.bcard { width: 100%; max-width: 300px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(241, 243, 250, .05); display: grid; gap: 8px; justify-items: center; }
.bcard-k { font-size: var(--t-micro); color: var(--chalk-mut); font-weight: 700; }
.bcard-v { margin: 0; font-size: var(--t-say); font-weight: 700; color: var(--gold); }
.bchips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bchip { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--line); font-size: var(--t-small); color: var(--chalk-mut); background: none; cursor: default; transition: all var(--d2) var(--ease); }
button.bchip { cursor: pointer; min-height: 40px; color: var(--chalk); }
.bchip.go.on, .bchip[aria-pressed="true"] { border-color: var(--mark-ok); color: var(--mark-ok); }
.brow.fly { opacity: .35; transform: translateY(8px) scale(.9); transition: opacity var(--d3), transform var(--d3); }

.borbs { display: flex; gap: 14px; justify-content: center; padding: 18px 0 6px; }
.borb { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.5), transparent 34%), var(--violet); opacity: 0; transform: scale(.5); transition: opacity var(--d2), transform var(--d2) var(--ease); }
.borb.on { opacity: .55; transform: none; }
.borb.focus.on { opacity: 1; }
.borb.pulse { box-shadow: 0 0 0 3px var(--gold), 0 0 26px var(--gold); transform: scale(1.18); }
.btag { margin: 6px 0 0; font-size: var(--t-small); color: var(--chalk-mut); }
.btag b { color: var(--gold); margin-inline-start: 4px; }
.bstars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px 18px; padding: 14px 0 8px; }
.bstar { width: 14px; height: 14px; border-radius: 50%; background: var(--chalk-mut); box-shadow: 0 0 8px rgba(255,255,255,.3); transition: background-color var(--d2), box-shadow var(--d2), opacity var(--d2); }
.bstar.weak { background: var(--gold); box-shadow: 0 0 14px var(--gold); }

/* ── הטופס הקצר ── */
.sheet { width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius-l); background: #0E1A30; color: var(--tx); box-shadow: 0 0 0 1px var(--board-rim), 0 30px 80px var(--shade); }
.sheet::backdrop { background: rgba(5, 9, 18, .6); backdrop-filter: blur(3px); }
.sheet-in, .end .form { padding: 18px; display: grid; gap: 12px; }
.end .form { padding: 0; }
.form h2 { margin: 0; font-size: var(--t-say); }
.form p.lead-in { margin: -6px 0 0; font-size: var(--t-why); color: var(--tx-mut); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--t-small); color: var(--tx-mut); }
.input { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 18px; background: var(--field-bg); border: 1px solid var(--field-brd); border-radius: var(--radius); color: var(--tx); }
textarea.input { min-height: 90px; resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--err); }
.err { margin: 0; font-size: var(--t-small); color: var(--err); }
.err:empty { display: none; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.review { margin: 0; padding: 12px; border-radius: var(--radius); background: rgba(241, 243, 250, .06); font-size: var(--t-small); white-space: pre-wrap; line-height: 1.6; }
.review b { color: var(--tx); }
.nojs { text-align: center; padding: 24px; }
.nojs a { color: var(--cyan); }


@media (prefers-reduced-motion: reduce) {
  .stage-body, .bubble, .why, .scene, .bw, .bf, .bd, .bal-item, .borb, .bstar, .brow, .caps li { transition: none !important; }
}

/* ═══ הסיור (data-view=talk) ═══ */
[data-world="student"]   { --wc: var(--w-student); }
[data-world="teacher"]   { --wc: var(--w-teacher); }
[data-world="oversight"] { --wc: var(--w-oversight); }
[data-world="business"]  { --wc: var(--w-business); }
[data-view="talk"] { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "bar bar" "say sys" "moons moons" "col col"; align-items: center; align-content: start; column-gap: 10px; padding-bottom: 96px; }
[data-view="talk"] .bar { grid-area: bar; }
[data-view="talk"] .system { grid-area: sys; --B: 190px; width: calc(var(--B) * .56); height: calc(var(--B) * .64); margin: 0; }
[data-view="talk"] .joovi { left: 0; top: 0; }
[data-view="talk"] .bubble { grid-area: say; }
[data-view="talk"] .moons { grid-area: moons; }
[data-view="talk"] .col { grid-area: col; width: 100%; max-width: 480px; justify-self: center; }
@media (min-width: 960px) {
  [data-view="talk"] { grid-template-columns: minmax(0, 540px) 1fr; grid-template-areas: "bar bar" "say sys" "col sys" "col moons"; column-gap: 0; max-width: 1120px; margin: 0 auto; }
  /* ג׳ובי צמוד לעמודת התוכן, כדי שהזנב של הבועה יגיע אליו ולא יצביע על האוויר */
  [data-view="talk"] .system { --B: 420px; justify-self: start; align-self: start; margin-inline-start: 28px; margin-top: 18px; }  /* RTL: start = הצד הימני של העמודה, צמוד לתוכן */
  [data-view="talk"] .bubble { align-self: end; }
  [data-view="talk"] .col { max-width: none; align-self: start; }
  [data-view="talk"] .moons { align-self: start; flex-wrap: wrap; justify-content: center; overflow: visible; }
}

/* הבועה: זכוכית כהה עם זוהר בצבע העולם. הזנב פונה אל ג׳ובי (משמאל לה) */
.bubble { position: relative; min-height: 5.2em; padding: 14px 18px; background: var(--glass); color: var(--tx); border: 1px solid var(--glass-brd); border-radius: var(--radius-l); box-shadow: 0 0 34px -10px var(--wc, var(--cyan)), inset 0 1px 0 rgba(255,255,255,.06); font-size: var(--t-say); font-weight: 600; line-height: 1.5; display: flex; align-items: center; }
.bubble::before { content: ''; position: absolute; left: -8px; top: 50%; width: 15px; height: 15px; background: var(--glass); border-left: 1px solid var(--glass-brd); border-bottom: 1px solid var(--glass-brd); transform: translateY(-50%) rotate(45deg); }
.bubble p { margin: 0; }
.bubble .w { opacity: 0; transition: opacity var(--d2) var(--ease); }
.bubble .w.on { opacity: 1; }

/* הירחים: היכולות, עם שם אמיתי. הירח הפעיל מתמלא לאורך הזמן שלו */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.moons { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 2px 4px; scrollbar-width: none; }
.moons::-webkit-scrollbar { display: none; }
.moon { flex: 1 1 0; scroll-snap-align: center; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; max-width: 112px; padding: 6px 4px; background: none; border: 0; color: var(--tx-mut); cursor: pointer; font-size: var(--t-micro); line-height: 1.3; text-align: center; transition: color var(--d2) var(--ease); }
.moon-dot { --p: 0; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--wc, var(--cyan)) calc(var(--p) * 1turn), rgba(184,192,210,.22) 0); -webkit-mask: radial-gradient(circle, transparent 6px, #000 7px); mask: radial-gradient(circle, transparent 6px, #000 7px); transition: transform var(--d2) var(--ease); }
.moon[aria-pressed="true"] { color: var(--tx); font-weight: 700; }
.moon[aria-pressed="true"] .moon-dot { transform: scale(1.15); }
.moon.done .moon-dot { --p: 1; }
.moons.manual .moon[aria-pressed="true"] .moon-dot { --p: 1; }

/* כרטיס ההסבר: כותרת ו־2–3 משפטים. שומר מקום, כדי שהחלפה לא תזיז את מה שמתחתיו */
.explain { margin-top: 12px; padding: 14px 16px; min-height: 9.5em; border-radius: var(--radius-l); background: var(--glass); border: 1px solid var(--glass-brd); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.explain.swap, .explain.wait { opacity: 0; transform: translateY(6px); }
.explain-head { display: flex; width: 100%; align-items: center; justify-content: space-between; background: none; border: 0; padding: 0; cursor: default; text-align: start; }
.explain h2 { margin: 0; font-size: var(--t-say); color: var(--tx); }
.explain-text { margin: 8px 0 0; font-size: var(--t-why); line-height: 1.6; color: var(--tx-mut); }
.chev { display: none; }

/* «דברו איתנו»: קבוע בתחתית, בהישג אגודל */
.talkbar { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; background: linear-gradient(180deg, transparent, var(--scrim-bottom) 40%); pointer-events: none; }
.talkbar .btn { pointer-events: auto; width: min(440px, 100%); justify-content: center; }
.btn.big { min-height: 54px; font-size: 17px; }
.end { margin-top: 14px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.end .row { justify-content: center; }
.readlink { font-size: var(--t-small); color: var(--tx-mut); text-underline-offset: 5px; }
.tracks { display: grid; gap: 8px; width: 100%; }
.track { display: grid; gap: 2px; text-align: start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--glass-brd); background: var(--glass); color: var(--tx); cursor: pointer; transition: border-color var(--d1) var(--ease); }
.track:hover { border-color: var(--wc, var(--cyan)); }
.track b { font-size: var(--t-say); }
.track span { font-size: var(--t-small); color: var(--tx-mut); }

/* הגיליון: עולה מלמטה בטלפון */
.sheet { margin: auto auto 0; width: min(520px, 100vw); max-height: 92dvh; border-radius: var(--radius-l) var(--radius-l) 0 0; transition: transform var(--d2) var(--ease), opacity var(--d2) var(--ease), display var(--d2) allow-discrete, overlay var(--d2) allow-discrete; }
.sheet[open] { transform: none; opacity: 1; }
@starting-style { .sheet[open] { transform: translateY(40px); opacity: 0; } }
@media (min-width: 960px) { .sheet { margin: auto; border-radius: var(--radius-l); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head .ibtn svg { stroke: currentColor; }
.input.grow { min-height: 64px; resize: none; overflow: hidden; }
.consent-line { margin: 0; font-size: var(--t-micro); color: var(--tx-mut); }
.send { width: 100%; justify-content: center; }
.peek summary { cursor: pointer; font-size: var(--t-small); color: var(--tx-mut); }

/* סצנות ה«אהה» על הלוח */
.brow { position: relative; }
.bring { position: absolute; left: -16px; right: -16px; top: -8px; bottom: -8px; width: calc(100% + 32px); height: calc(100% + 16px); overflow: visible; pointer-events: none; }
.bring ellipse { fill: none; stroke: var(--gold); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d3) var(--ease); }
.bring.on ellipse { stroke-dashoffset: 0; }
.btape { width: 100%; max-width: 280px; display: grid; gap: 4px; justify-items: center; margin-top: 6px; }
.btape-total .bm { font-size: var(--t-small); color: var(--chalk-mut); }
.btape-bar { display: flex; width: 100%; height: 34px; border: 1.5px solid var(--chalk); border-radius: 6px; overflow: hidden; }
.btape-seg { flex: 1; display: grid; place-items: center; border-inline-start: 1.5px dashed var(--chalk-mut); opacity: 0; background: rgba(37,191,232,.0); transition: opacity var(--d2) var(--ease), background-color var(--d2) var(--ease); }
.btape-seg:first-child { border-inline-start: 0; }
.btape-seg.on { opacity: 1; background: rgba(37,191,232,.18); }
.btape-seg .bm { font-size: var(--t-small); }
.bsubs { display: flex; gap: 8px; justify-content: center; width: 100%; }
.bsub { flex: 1; max-width: 140px; display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: var(--radius); border: 1px solid var(--line); }
.bsub .bm { font-size: var(--t-small); }
.bchip.lit { border-color: var(--wc, var(--cyan)); color: var(--tx); }
.borbs.zoom { padding-top: 6px; }
.bstars { transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.bstars.far { opacity: .35; transform: scale(.82); }
.bmont { margin: 0; font-size: var(--t-small); font-weight: 700; color: var(--wc, var(--cyan)); min-height: 1.4em; }
.bmont-stack { position: relative; width: 100%; min-height: 150px; }
.bmont-pane { position: absolute; inset: 0; display: grid; gap: 6px; justify-items: center; align-content: center; opacity: 0; transition: opacity var(--d2) var(--ease); }
.bmont-pane.on { opacity: 1; }
.bal-item { transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease); }

/* ── ציור בקווי אור, על החלל עצמו (lightDraw) ── */
.stage-body[data-surface="space"] { background: transparent; box-shadow: none; border-color: transparent; backdrop-filter: none; }
.ld { width: 100%; max-width: 460px; height: auto; overflow: visible; direction: ltr; }
.ld-l { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d3) var(--ease); }
.ld-l.on { stroke-dashoffset: 0; }
.ld-l.base { stroke: var(--chalk-mut); }
.ld-l.h, .ld-l.arc, .ld-l.bound { stroke: var(--gold); }
.ld-l.proj { stroke: var(--violet); }
.ld-l.axis { stroke: var(--chalk-mut); stroke-width: 1.2; }
.ld-tri { fill: var(--gold); opacity: 0; transition: opacity var(--d3) var(--ease); }
.ld-tri.on { opacity: .14; }
.ld-area { fill: var(--cyan); opacity: 0; transition: opacity var(--d3) var(--ease); }
.ld-area.on { opacity: .22; }
.ld-t { fill: var(--chalk); font-size: var(--t-micro); font-family: 'Noto Sans Hebrew', system-ui, sans-serif; opacity: 0; transition: opacity var(--d2) var(--ease); direction: rtl; unicode-bidi: plaintext; }
.ld-t.on { opacity: 1; }
.ld-t.ltr { direction: ltr; unicode-bidi: isolate; }
.ld-t.mid { text-anchor: middle; }
.ld-pyr, .ld-t { transition: opacity var(--d3) var(--ease); }
.ld-pyr.fade, .ld-t.fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ld-l, .ld-tri, .ld-area, .ld-t, .ld-pyr { transition: none; } }

/* ── «חלק מהעולם» (לירז): בלי קווי מסגרת קשיחים. משטחים רכים שזוהרים בצבע העולם ── */
.bubble, .explain, .stage-body, .sheet, .track {
  border: 0; border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(184, 192, 210, .07), 0 0 46px -14px var(--wc, var(--cyan)), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.stage-body[data-surface="space"] { box-shadow: none; }
.bubble::before { border: 0; }
.moon-dot { box-shadow: 0 0 0 0 transparent; transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.moon[aria-pressed="true"] .moon-dot { box-shadow: 0 0 18px -2px var(--wc, var(--cyan)); }
.btn.primary { border-radius: 999px; box-shadow: 0 8px 30px -8px var(--gold); }

/* ═══ הסצנה (data-view=scene): חלל אחד, בלי מסגרות ═══════════════════════════
   לירז, 2.11 ערב: «מאיפה זה נפל עליי». בלי כרטיסים, בלי שורת שלבים ובלי לוח.
   כל רכיב ממוקם באופן מוחלט: שינוי טקסט או ציור לא מזיז שום דבר אחר (CLS = 0). */
[data-view="scene"] .only-scene { display: revert !important; }
[data-view="scene"] .space.only-scene { display: block !important; }
[data-view="scene"] .only-worlds, [data-view="scene"] .moons, [data-view="scene"] .col, [data-view="scene"] .talkbar, [data-view="scene"] .not-scene { display: none !important; }
[data-view="scene"] {
  --B: 224px; --jx: 6px; --jy: 76px;
  --say-top: 80px; --say-start: 16px; --say-end: 150px;
  --draw-top: 280px; --draw-bottom: 24px; --draw-x: 8px;
  --cap-top: 198px; --say-h: 108px;
  display: block; position: relative; height: 100dvh; min-height: 560px; max-width: 1240px; margin: 0 auto; padding: 0; overflow: visible clip;  /* ג׳ובי חורג מהעמודה לצד: לא נחתך. בגובה: בלי גלילה */
}
[data-view="scene"] .bar { position: absolute; z-index: 30; top: 0; inset-inline: 0; padding: 0 12px; max-width: none; }
[data-view="scene"] .bar .mark { margin: 0 auto; }
[data-view="scene"] .system { position: absolute; z-index: 4; left: var(--jx); top: var(--jy); width: calc(var(--B) * .56); height: calc(var(--B) * .64); margin: 0; }
[data-view="scene"] .joovi { left: 0; top: 0; }
/* הבועה בגובה קבוע (עד 3 שורות בטלפון, 2 במחשב): משפט ארוך לא דוחף ולא מכסה את שם היכולת */
[data-view="scene"] .bubble { position: absolute; z-index: 5; top: var(--say-top); right: var(--say-start); left: var(--say-end); width: auto; height: var(--say-h); min-height: 0; }
.pill { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(244, 185, 47, .14); color: var(--gold); font-weight: 700; font-size: var(--t-small); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(244, 185, 47, .55), 0 0 22px -8px var(--gold); transition: background-color var(--d1) var(--ease); }
.pill:hover { background: rgba(244, 185, 47, .24); }
[data-view="scene"] .back { order: 0; }

.space { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.space > * { pointer-events: auto; }
.sd { cursor: pointer; } .sd { position: absolute; top: var(--draw-top); bottom: var(--draw-bottom); left: var(--draw-x); right: var(--draw-x); width: calc(100% - 2 * var(--draw-x)); height: calc(100% - var(--draw-top) - var(--draw-bottom)); overflow: visible; pointer-events: auto; font-family: 'Noto Sans Hebrew', system-ui, sans-serif; transition: opacity var(--d3) var(--ease); }
.space.calm .sd { opacity: 0; }

/* קווי אור: הילה רחבה ועמומה ומעליה קו דק. בלי פילטר טשטוש: זול לטלפון */
.lt path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d3) var(--ease); }
.lt.on path { stroke-dashoffset: 0; }
.lt .halo { stroke: var(--cyan); stroke-width: 7; opacity: .22; }
.lt .core { stroke: #CFF3FF; stroke-width: 1.8; }
.lt.dim .halo { stroke: var(--chalk-mut); opacity: .14; } .lt.dim .core { stroke: var(--chalk-mut); stroke-width: 1.2; }
.lt.gold .halo { stroke: var(--gold); } .lt.gold .core { stroke: #FFE3A3; }
.lt.violet .halo { stroke: var(--violet); } .lt.violet .core { stroke: #D9CCFF; }
.lt.ok .halo { stroke: var(--mark-ok); opacity: .3; } .lt.ok .core { stroke: var(--mark-ok); stroke-width: 2.6; }
.lt.bad .halo { stroke: var(--mark-x); opacity: .35; } .lt.bad .core { stroke: var(--mark-x); stroke-width: 2.6; }
.sd-fill { opacity: 0; transition: opacity var(--d3) var(--ease); }
.sd-fill.gold { fill: var(--gold); } .sd-fill.gold.on { opacity: .13; }
.sd-fill.cyan { fill: var(--cyan); } .sd-fill.cyan.on { opacity: .24; }
.sd text { opacity: 0; transition: opacity var(--d2) var(--ease), transform var(--d3) var(--ease); }
.sd text.on { opacity: 1; }
.sd-pt { fill: var(--chalk-mut); font-size: 12px; font-weight: 600; direction: ltr; }
.sd-math { fill: var(--chalk); font-size: 15px; font-weight: 600; direction: ltr; unicode-bidi: isolate; }
.sd-math.sm { font-size: 13px; fill: var(--chalk-mut); }
.sd-math.mid { text-anchor: middle; }
.sd-math.lit { fill: #FFE3A3; }
.sd-hand { fill: #E6F6FF; font-size: 22px; font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.sd-hand.mid, .sd-name, .sd-note.mid { text-anchor: middle; }
.sd text.sd-hand.fly { opacity: 0; transform: translateY(70px) scale(.4); transform-box: fill-box; transform-origin: center; }
.sd-name { fill: var(--tx-mut); font-size: 13px; font-weight: 600; direction: rtl; }
.sd-name.big { font-size: 16px; fill: var(--tx); }
.sd-name.gold { fill: var(--gold); }
.sd text.r { text-anchor: start; }
.sd-note { fill: var(--err); font-size: 14px; font-weight: 600; direction: rtl; text-anchor: middle; }
.sd-note.sm { font-size: 12px; text-anchor: end; }
.sd-note.sm.mid { text-anchor: middle; fill: var(--chalk-mut); letter-spacing: 2px; }
.sd-vtx { opacity: 0; transition: opacity var(--d2) var(--ease); }
.sd-vtx.on { opacity: 1; }
.sd-vtx .dot { fill: #fff; } .sd-vtx .ring { fill: rgba(255,255,255,.12); stroke: rgba(255,255,255,.7); stroke-width: 1.2; animation: touch 1.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.sd-vtx.rest .ring { animation: none; opacity: 0; }
@keyframes touch { 50% { transform: scale(1.25); opacity: .5; } }
.sd-par { opacity: 0; } .sd-par.in { opacity: 1; }
.melt { opacity: 0 !important; transform: scale(1.04); transform-box: fill-box; transform-origin: center; transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.sd-pyr { transition: opacity var(--d3) var(--ease); }

/* כוכבים: הבהירות היא השליטה */
.sd-star { opacity: 0; transition: opacity var(--d3) var(--ease); }
.sd-star.on { opacity: 1; }
.sd .sd-star text { opacity: 1; }
.sd .sd-star text.gold { opacity: 0; } .sd .sd-star text.gold.on { opacity: 1; }
.sd-star .glow { fill: var(--wc, var(--cyan)); opacity: calc(var(--m) * .22); }
.sd-star .core { fill: #fff; opacity: calc(.35 + var(--m) * .65); }
.sd-star.far { opacity: .3; }
.sd-star.pick .core { fill: var(--gold); opacity: 1; }
.sd-person .core { fill: #fff; }
.sd-person .torso { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: calc(.35 + var(--m) * .65); }
.sd-person .core { opacity: calc(.35 + var(--m) * .65); }
.sd-person.pick .body { stroke: var(--gold); opacity: 1; }
.sd-person.far { opacity: .3; }
.sd .sm-l { font-size: 12px; text-anchor: start; direction: ltr; fill: var(--chalk-mut); }
.sd-link, .sd-orbit { fill: none; stroke: rgba(184,192,210,.22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.sd-link.on, .sd-orbit.on { stroke-dashoffset: 0; }
.sd-orbit.lit0 { stroke: var(--w-student); } .sd-orbit.lit1 { stroke: var(--w-teacher); } .sd-orbit.lit2 { stroke: var(--w-oversight); }
.sd-orbit[class*="lit"] { stroke-width: 1.6; opacity: .8; }
.sd-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sd-ring.on { opacity: 1; animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .45; } }
.sd-ring2, .sd-oops { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d3) var(--ease); }
.sd-ring2 { stroke: var(--gold); stroke-width: 1.6; }
.sd-oops { stroke: var(--mark-x); stroke-width: 1.4; opacity: .7; }
.sd-oops.on, .sd-approve.on .sd-ring2 { stroke-dashoffset: 0; }
.sd-approve text { opacity: 0; } .sd-approve.on text { opacity: 1; }
.sd-open { opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-open.in { opacity: 1; }
.sd-mark { transition: opacity var(--d2) var(--ease); }
.sd-zoom { transform-box: view-box; transform-origin: 50% 50%; transform: scale(1.5); transition: transform 3.2s var(--ease); }
.sd-zoom.out { transform: scale(1); }

/* גרמי השמיים: היכולות. כל אחד נכנס מקצה המסך אל המסלול של ג׳ובי */
.bodies { position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; }
.body { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  --to-x: calc(var(--jx) + var(--B) * .28 + cos(var(--a)) * var(--orb-r)); --to-y: calc(var(--jy) + var(--B) * .36 + sin(var(--a)) * var(--orb-r) * .8);
  --a: calc(60deg + var(--i) * 30deg); --orb-r: calc(var(--B) * .42);
  transform: translate(calc(100vw + 40px), calc(var(--to-y) + 160px)) scale(.4); opacity: 0;
  transition: transform 1.4s var(--ease), opacity var(--d3) var(--ease); }
.body.here { transform: translate(var(--to-x), var(--to-y)); opacity: 1; }
.planet { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--wc, var(--cyan)) 60%, rgba(0,0,0,.4)); box-shadow: 0 0 14px -2px var(--wc, var(--cyan)); transition: transform var(--d2) var(--ease), box-shadow var(--d2) var(--ease); }
.body.now .planet { transform: scale(1.7); box-shadow: 0 0 22px 2px var(--wc, var(--cyan)); }
.body:focus-visible { outline-offset: 0; border-radius: 50%; }
.capname { position: absolute; z-index: 6; margin: 0; top: var(--cap-top); right: var(--say-start); left: var(--say-end); color: var(--wc, var(--cyan)); font-size: var(--t-small); font-weight: 700; letter-spacing: .01em; opacity: 0; transform: translateY(4px); transition: opacity var(--d2) var(--ease), transform var(--d2) var(--ease); }
.capname.on { opacity: 1; transform: none; }

/* השיא: הסצנה נרגעת, והשדה מתכנס לשורה אחת */
.finale { position: absolute; z-index: 7; top: var(--draw-top); left: 0; right: 0; display: flex; justify-content: center; padding: 0 16px; }
.fin-pull { position: relative; width: min(520px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.finale.on .fin-pull { opacity: 1; transform: none; }
.fin-pull::before { content: ''; position: absolute; inset: -90px -40px; z-index: -1; background: radial-gradient(closest-side, rgba(37,191,232,.16), transparent); pointer-events: none; }
.fin-line { position: relative; width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px; padding-inline-start: 20px; border-radius: 999px; background: rgba(9, 15, 31, .72); box-shadow: 0 0 0 1px rgba(184,192,210,.30), 0 0 40px -12px var(--cyan); transition: box-shadow var(--d2) var(--ease); }
.fin-line.ready { box-shadow: 0 0 0 1px var(--gold), 0 0 44px -10px var(--gold); }
.fin-in { flex: 1; min-width: 0; min-height: 48px; border: 0; background: none; color: var(--tx); font-size: 17px; outline: none; }
.fin-in::placeholder, .fin-msg::placeholder { color: var(--tx-mut); opacity: 1; }
.fin-line:focus-within { box-shadow: 0 0 0 2px var(--gold), 0 0 44px -10px var(--gold); }
.fin-send { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); box-shadow: 0 0 26px -4px var(--gold); }
.fin-send svg { width: 22px; height: 22px; fill: none; stroke: var(--on-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fin-msg { width: 100%; min-height: 64px; padding: 12px 20px; border: 0; border-radius: 26px; background: rgba(9, 15, 31, .72); box-shadow: 0 0 0 1px rgba(184,192,210,.30); color: var(--tx); font-size: 16px; resize: none; outline: none; }
.fin-msg:focus { box-shadow: 0 0 0 2px var(--gold); }
.fin-err { margin: 0; min-height: 0; color: var(--err); font-size: var(--t-small); }
.fin-err:empty { display: none; }
.fin-more, .fin-again { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--tx-mut); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.fin-consent, .fin-direct { margin: 0; color: var(--tx-mut); font-size: var(--t-micro); }
.fin-direct a { color: var(--tx); }
.finale.sent .fin-line, .finale.sent .fin-msg, .finale.sent .fin-more, .finale.sent .fin-consent { opacity: .35; pointer-events: none; }
.mote { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--cyan); pointer-events: none; }
.signal { position: fixed; z-index: 50; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 24px 8px var(--gold), 0 30px 40px -10px rgba(244,185,47,.5); pointer-events: none; }

/* מחשב (לירז, 2.11 לילה): הרכב אחד במרכז, ברוחב 960. ג׳ובי בצד, ולידו באותו גובה: שם היכולת, הבועה והציור.
   הקבוצה כולה ממורכזת לגובה המסך (‎--G‎ = ראש הקבוצה), בלי פינות מנוגדות */
@media (min-width: 960px) {
  [data-view="scene"] {
    --B: 400px; --G: max(72px, calc(50dvh - 290px)); --jx: 20px; --jy: calc(var(--G) + 90px);
    --say-top: calc(var(--G) + 30px); --say-h: 88px; --cap-top: var(--G); --draw-top: calc(var(--G) + 136px);
    max-width: 960px;
  }
  [data-view="scene"] .bubble { left: 300px; right: 0; width: auto; }
  .capname { left: 300px; right: 0; width: auto; }
  .sd { left: 300px; right: 0; top: var(--draw-top); bottom: auto; width: auto; height: 440px; }
  .finale { left: 300px; right: 0; top: var(--draw-top); }
}
@media (max-height: 700px) and (max-width: 959px) {
  [data-view="scene"] { --B: 210px; --jy: 50px; --say-top: 58px; --say-end: 128px; --say-h: 100px; --cap-top: 166px; --draw-top: 196px; }
}
@media (prefers-reduced-motion: reduce) {
  .lt path, .sd text, .sd-star, .body, .melt, .sd-zoom, .fin-pull, .capname, .sd-link, .sd-orbit { transition: none !important; }
  .sd-vtx .ring, .sd-ring.on { animation: none; }
}

.sd-q.lit { fill: var(--gold); }
.sd-bulb { fill: var(--gold); filter: drop-shadow(0 0 6px var(--gold)); }
.sd-hint { opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-hint.on { opacity: 1; }
[data-view="scene"] .bubble { cursor: pointer; }
.sd-info { opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-info.in { opacity: 1; }
.sd-info text { opacity: 1 !important; }
.sd-info .k { fill: var(--tx-mut); font-size: 14px; }
.sd-info .v { font-size: 16px; font-weight: 700; }
.sd-info .v.ok { fill: var(--mark-ok); } .sd-info .v.bad { fill: var(--mark-x); } .sd-info .v.mut { fill: var(--tx); font-size: 14px; }
.sd-info .v.lit { fill: #FFE3A3; }

/* ═══ הכוכבים של המסך הראשון (לירז, 2.11): כוכב מושקע ושונה לכל עולם, בשפה אחת ═══
   שכבות: מרקם שמסתובב לאט (‎.tex::before‎, transform בלבד: קומפוזיטור, 60fps) → צל וקצה אור (‎::after‎) → הילת אטמוספרה (box-shadow).
   תלמיד: אוקיינוס ועננים · מורה: פסים זהובים וסערה · מפקח: סגול, ואורות עיר בצד החשוך · עסקי: ירוק, טבעת כפולה וירח קטן. */
.globe { position: relative; background: var(--c); }
.globe .tex { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.globe .tex::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: var(--tex); animation: spin-tex 38s linear infinite; }
.globe::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),           /* ברק */
    radial-gradient(circle at 30% 30%, rgba(0,0,0,0) 44%, rgba(4,8,20,.72) 78%, rgba(4,8,20,.9) 100%), /* terminator */
    radial-gradient(circle at 76% 80%, rgba(4,8,20,.55), rgba(4,8,20,0) 55%);
  box-shadow: inset -3px -4px 8px rgba(0,0,0,.45), inset 2px 2px 3px rgba(255,255,255,.18); }     /* קצה אור */
.globe { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 18px 2px color-mix(in srgb, var(--c) 45%, transparent), 0 0 46px -6px var(--c), 0 10px 30px var(--shade); }
@keyframes spin-tex { to { transform: translateX(-50%); } }

[data-world="student"] .globe { --c: #1F78C4; --tex:
  radial-gradient(ellipse 14% 9% at 12% 34%, rgba(255,255,255,.85), transparent 70%),
  radial-gradient(ellipse 18% 6% at 30% 62%, rgba(255,255,255,.7), transparent 70%),
  radial-gradient(ellipse 10% 14% at 40% 30%, #3FA46A 0 55%, transparent 62%),
  radial-gradient(ellipse 14% 9% at 62% 34%, rgba(255,255,255,.85), transparent 70%),
  radial-gradient(ellipse 18% 6% at 80% 62%, rgba(255,255,255,.7), transparent 70%),
  radial-gradient(ellipse 10% 14% at 90% 30%, #3FA46A 0 55%, transparent 62%),
  linear-gradient(180deg, #2C8FDB, #1B5FA6); }
[data-world="teacher"] .globe { --c: #E7A92A; --tex:
  radial-gradient(ellipse 7% 5% at 22% 62%, #B5641E 0 60%, transparent 70%),
  radial-gradient(ellipse 7% 5% at 72% 62%, #B5641E 0 60%, transparent 70%),
  repeating-linear-gradient(176deg, #F6CF6B 0 9%, #E2A23A 9% 16%, #F3DA97 16% 22%, #D08A2C 22% 30%); }
[data-world="oversight"] .globe { --c: #7E58F0; --tex:
  radial-gradient(ellipse 12% 20% at 20% 50%, rgba(255,255,255,.18), transparent 70%),
  radial-gradient(ellipse 12% 20% at 70% 50%, rgba(255,255,255,.18), transparent 70%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 12.5%),
  linear-gradient(180deg, #9C7BFF, #5A37C9); }
/* אורות עיר: נקודות זהובות שנראות רק בצד החשוך (מסכה) */
.globe .lights { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1; pointer-events: none;
  -webkit-mask: radial-gradient(circle at 28% 28%, transparent 48%, #000 72%); mask: radial-gradient(circle at 28% 28%, transparent 48%, #000 72%); }
.globe .lights::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 200%; animation: spin-tex 38s linear infinite;
  background: radial-gradient(circle, #FFD98A 0 1px, transparent 1.6px) 0 0 / 9px 7px, radial-gradient(circle, #FFE9B8 0 .8px, transparent 1.4px) 4px 3px / 13px 11px; opacity: .9; }
[data-world="business"] .globe { --c: #2FB98F; --tex:
  radial-gradient(ellipse 12% 16% at 18% 40%, #1E8A62 0 55%, transparent 64%),
  radial-gradient(ellipse 9% 7% at 34% 70%, #8FE3C2 0 50%, transparent 62%),
  radial-gradient(ellipse 12% 16% at 68% 40%, #1E8A62 0 55%, transparent 64%),
  radial-gradient(ellipse 9% 7% at 84% 70%, #8FE3C2 0 50%, transparent 62%),
  linear-gradient(180deg, #48D3A6, #1F8F6C); }
/* הטבעת: חצי אחורי מאחורי הכוכב וחצי קדמי לפניו, עם שני פסים */
.globe .ring { position: absolute; left: -34%; right: -34%; top: 38%; height: 26%; border-radius: 50%; transform: rotate(-16deg); pointer-events: none;
  border: 2px solid rgba(214, 248, 234, .75); box-shadow: 0 0 0 3px rgba(47,185,143,.25), inset 0 0 0 2px rgba(214,248,234,.25); }
.globe .ring.back { z-index: -1; clip-path: inset(0 0 52% 0); }
.globe .ring.front { z-index: 2; clip-path: inset(48% 0 0 0); }
.globe .moonlet { position: absolute; z-index: 3; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff, #9AA6BF 60%, #3B4560); box-shadow: 0 0 6px rgba(255,255,255,.5);
  animation: moonlet 9s linear infinite; }
@keyframes moonlet { from { transform: rotate(0deg) translateX(calc(var(--globe) * .78)) scale(.9); } to { transform: rotate(360deg) translateX(calc(var(--globe) * .78)) scale(.9); } }
/* התווית: תמיד קריאה, על הילה כהה, ושום קו לא עובר דרכה */
.world .name { position: relative; z-index: 4; padding: 2px 10px; border-radius: 999px; background: rgba(9, 15, 31, .62); box-shadow: 0 0 14px 6px rgba(9, 15, 31, .45); }
.world .globe { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .globe .tex::before, .globe .lights::before, .globe .moonlet { animation: none; } }

/* ═══ הטופס בשיא (לירז 2.11): שדות נפרדים, אורגני בתוך העולם ═══
   במצב השיא הדף נגלל (‎.fin‎): כשהמקלדת פתוחה בטלפון, השדה שבפוקוס עולה למעלה ולא נחתך. */
[data-view="scene"].fin { height: auto; min-height: 100dvh; overflow: visible; }
[data-view="scene"].fin .finale { position: relative; top: auto; padding-top: var(--draw-top); padding-bottom: 48px; }
@media (min-width: 960px) {
  [data-view="scene"].fin { min-height: max(100dvh, calc(var(--draw-top) + 600px)); }
  [data-view="scene"].fin .finale { position: absolute; top: var(--draw-top); padding-top: 0; }
}
.fin-pull { gap: 10px; justify-items: stretch; text-align: start; }
.fin-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fin-chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(9, 15, 31, .62); color: var(--tx-mut); font-size: var(--t-small); font-weight: 600; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(184,192,210,.30); transition: box-shadow var(--d1) var(--ease), color var(--d1) var(--ease), background-color var(--d1) var(--ease); }
.fin-chip[aria-checked="true"] { color: var(--tx); background: rgba(37,191,232,.16); box-shadow: 0 0 0 1.5px var(--wc, var(--cyan)), 0 0 22px -6px var(--wc, var(--cyan)); }
.fin-field { position: relative; display: grid; gap: 4px; }
.fin-l { padding-inline-start: 18px; font-size: var(--t-micro); color: var(--tx-mut); }
.fin-f { width: 100%; min-height: 50px; padding: 0 18px; border: 0; border-radius: 26px; background: rgba(9, 15, 31, .72); color: var(--tx); font-size: 16px; outline: none;
  box-shadow: 0 0 0 1px rgba(184,192,210,.30), 0 0 30px -14px var(--cyan); transition: box-shadow var(--d1) var(--ease); }
textarea.fin-f { min-height: 84px; padding: 12px 18px; resize: none; line-height: 1.5; }
.fin-f:focus { box-shadow: 0 0 0 2px var(--gold), 0 0 34px -10px var(--gold); }
.fin-f[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--err); }
.fin-f[dir="ltr"] { text-align: left; }
.fin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .fin-pair { grid-template-columns: 1fr; } }
.fin-hint { margin: -2px 0 0; padding-inline-start: 18px; font-size: var(--t-micro); color: var(--tx-mut); }
.fin-send { justify-self: center; min-width: 200px; min-height: 52px; padding: 0 28px; border-radius: 999px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 0 30px -6px var(--gold); width: auto; height: auto; }
.fin-pull.ready .fin-send { box-shadow: 0 0 40px -2px var(--gold); }
.fin-consent, .fin-direct, .fin-again { justify-self: center; text-align: center; }
.finale.sent .fin-chips, .finale.sent .fin-field, .finale.sent .fin-pair, .finale.sent .fin-hint { opacity: .35; pointer-events: none; }
.fin-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.fin-read { min-height: 52px; padding: 0 22px; border-radius: 999px; display: grid; place-items: center; color: var(--tx); text-decoration: none; font-weight: 600; font-size: var(--t-small);
  box-shadow: 0 0 0 1px rgba(184,192,210,.40); background: rgba(9,15,31,.5); }
.fin-read:hover { box-shadow: 0 0 0 1px var(--tx); }

/* הסרגל העליון בסצנה (לירז 2.11): «דברו איתנו» מימין, בתחילת הקריאה; הלוגו במרכז; «חזרה» כפתור קטן וברור משמאל */
[data-view="scene"] .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
[data-view="scene"] .bar .pill { grid-column: 1; grid-row: 1; justify-self: start; }
[data-view="scene"] .bar .mark { grid-column: 2; grid-row: 1; margin: 0; }
[data-view="scene"] .bar .back-pill { grid-column: 3; grid-row: 1; justify-self: end; }
.back-pill { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 44px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 0;
  background: rgba(9, 15, 31, .55); box-shadow: 0 0 0 1px rgba(184,192,210,.40); color: var(--tx); font-size: var(--t-small); font-weight: 600; cursor: pointer; }
.back-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.back-pill:hover { box-shadow: 0 0 0 1px var(--tx); }
.sd-mini text { opacity: 1; }
.sd-hot { fill: var(--mark-x); filter: drop-shadow(0 0 6px var(--mark-x)); }
.sd-dot { fill: #fff; filter: drop-shadow(0 0 5px var(--cyan)); }
.sd-dot.dim { fill: var(--chalk-mut); filter: none; }
.sd-dot.pop { opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-dot.pop.on { opacity: 1; }
.sd-bar { fill: rgba(184,192,210,.18); } .sd-bar.on { fill: var(--cyan); } .sd-bar.on.low { fill: var(--mark-x); }
.sd-col { fill: var(--wc, var(--cyan)); opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-col.on { opacity: .85; }
.sd-meter { opacity: 0; transition: opacity var(--d2) var(--ease); } .sd-meter.in { opacity: 1; }
.sd-star .hit { fill: transparent; }
.sd-person.help .torso, .sd-person.help .core { stroke: var(--mark-x); fill: var(--mark-x); opacity: 1; }
.sd-person.help .torso { fill: none; }
.sd-person.missing { opacity: .25; }
.sd-oops.on { stroke-dashoffset: 0; }

/* ═══ המסך הראשון (לירז 2.11): «מי אתם?» בבועה של ג׳ובי, באותה שפה של הבועות בעולמות. הזנב יורד אליו ═══ */
.ask { position: absolute; z-index: 7; left: 50%; bottom: calc(50% + var(--B) * .352 + 14px); width: max-content; margin: 0; padding: 12px 26px 14px; border-radius: 28px; text-align: center; max-width: min(92vw, 420px);
  background: var(--glass); box-shadow: 0 0 0 1px rgba(184,192,210,.07), 0 0 46px -14px var(--cyan), inset 0 1px 0 rgba(255,255,255,.05); }
.ask::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: var(--glass); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.ask .q { margin: 0; font-size: calc(var(--t-q) * .78); }
.ask .sub { margin: 4px 0 0; font-size: var(--t-small); }
.ask { transform: translateX(-50%); }
.js .ask { opacity: 0; transform: translate(-50%, 8px) scale(.98); transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); }
.js .ask.in { opacity: 1; transform: translateX(-50%); }
.js .ask .q, .js .ask .sub { opacity: 1; transform: none; }
/* «הסבר על המערכת»: משני אבל גלוי, בסרגל העליון ולא בתחתית */
[data-view="worlds"] .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
[data-view="worlds"] .bar .mark { grid-column: 2; grid-row: 1; margin: 0; }
.read-pill { grid-column: 1; grid-row: 1; justify-self: start; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; color: var(--tx); text-decoration: none;
  font-size: var(--t-small); font-weight: 600; background: rgba(9,15,31,.55); box-shadow: 0 0 0 1px rgba(184,192,210,.40); white-space: nowrap; }
.read-pill:hover { box-shadow: 0 0 0 1px var(--tx); }
@media (prefers-reduced-motion: reduce) { .js .ask { transition: none; } }
.sd-flag { fill: rgba(255,138,155,.06); stroke: var(--mark-x); stroke-width: 1.2; opacity: 0; transition: opacity var(--d2) var(--ease); }
.sd-flag.on { opacity: 1; animation: pulse-soft 2.4s var(--ease) infinite; }
@keyframes pulse-soft { 50% { opacity: .55; } }
.sd text.far { opacity: .35; }
.lt.dim.on .core { stroke: var(--chalk-mut); }