:root{
  --ink:#2a2350; --lilac:#c9b8f0; --lilac2:#a58ee0; --mint:#b6ecd9; --mint2:#7fd6b9; --sky:#bfe3f7; --sky2:#8cc8ea;
  --paper:#fbfaff; --muted:#5d5683;
  --tlh: 118px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#16384a;color:var(--ink);font-family:"Rubik",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
/* שמיים מדוגמים: פטרן אלמנטים מדעיים שטוחים, חלש, על בסיס כחול-טורקיז עמוק */
#sky{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(1200px 700px at 50% 45%, #3a7d8c 0%, #22566a 45%, #16384a 100%);}
#sky::before{content:"";position:absolute;top:-512px;left:-512px;right:0;bottom:0;opacity:0.14;
  background:url(img/sky-pattern.webp?v=1) 0 0/512px 512px repeat;animation:skydrift 260s linear infinite;will-change:transform}
#sky::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 210px at 50% 0, rgba(22,56,74,0.8) 0%, rgba(22,56,74,0) 100%),
  radial-gradient(130% 120% at 50% 50%, rgba(22,56,74,0) 55%, rgba(22,56,74,.45) 100%)}
@keyframes skydrift{to{transform:translate3d(512px,512px,0)}}
@media (prefers-reduced-motion:reduce){#sky::before{animation:none;will-change:auto}}
.top{position:fixed;top:0;inset-inline:0;z-index:5;text-align:center;padding:calc(10px + env(safe-area-inset-top)) 16px 0;pointer-events:none}
.top h1{margin:0;font-weight:800;font-size:clamp(1.5rem,3.6vw,3rem);color:#fff;letter-spacing:.01em;text-shadow:0 2px 18px rgba(165,142,224,.55)}
.sub{margin:.2rem 0 0;color:#d9cffb;font-size:clamp(.85rem,1.5vw,1.2rem)}
main{position:fixed;inset:0}
#globe{position:absolute;inset:0;cursor:grab;direction:ltr}
.pinwrap{left:0;top:0}
#globe:active{cursor:grabbing}
#loading{position:absolute;inset:0;display:grid;place-items:center;color:#e9e3ff;font-size:1.1rem;pointer-events:none}
.home{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 86px);inset-inline-start:14px;border:0;border-radius:999px;padding:.5rem .9rem;
  font:500 .95rem "Rubik",sans-serif;background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer}
/* pins */
.pin{position:relative;direction:rtl;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:auto;user-select:none;-webkit-user-select:none}
.pin .dot{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--lilac),var(--lilac2));border:2.5px solid #fff;box-shadow:0 3px 10px rgba(20,10,60,.45);transition:transform .2s}
.pin .dot b{transform:rotate(45deg);color:#fff;font:800 15px "Rubik",sans-serif;text-shadow:0 1px 2px rgba(40,20,90,.5)}
.pin .lbl{margin-top:4px;padding:1px 7px;border-radius:8px;background:rgba(255,255,255,.9);color:var(--ink);font:500 11px "Rubik",sans-serif;white-space:nowrap}
.pin.soon .dot{background:linear-gradient(135deg,#dfe9f3,#b7cbe0);border-style:dashed;opacity:.85}
.pin.soon .lbl{opacity:.8}
.pin:hover .dot,.pin.on .dot{transform:rotate(-45deg) scale(1.25)}
.pin.on .dot{background:linear-gradient(135deg,var(--mint),var(--mint2))}
.pin::before{content:"";position:absolute;inset:-10px}
/* timeline */
.timeline{position:fixed;z-index:7;bottom:0;inset-inline:0;transform:translateZ(0);-webkit-transform:translateZ(0);padding:8px 0 calc(6px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(22,56,74,.95),rgba(22,56,74,.75) 70%,rgba(22,56,74,0))}
#tl{list-style:none;margin:0;padding:46px 18px 8px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;position:relative}
/* the rail is drawn per item, so it spans the whole scrollable list in one steady colour */
#tl li{flex:0 0 auto;scroll-snap-align:center;position:relative}
#tl li::before{content:"";position:absolute;top:-9px;inset-inline:-5px;height:3px;background:#b9a6ec;z-index:0}
#tl li:first-child::before{inset-inline-start:50%}
#tl li:last-child::before{inset-inline-end:50%}
.yr{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px;border:0;background:rgba(255,255,255,.1);color:#efeaff;
  border-radius:14px;padding:26px .6rem .5rem;font-family:"Rubik",sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.yr::before{content:"";position:absolute;top:-14px;width:13px;height:13px;border-radius:50%;background:var(--lilac);border:2px solid #fff}
.yr.soon::before{background:#cfdbe8;border-style:dashed}
.yr .y{font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.yr .n{font-size:.78rem;opacity:.9;white-space:nowrap}
.yr.soon{opacity:.7}
.yr:hover{background:rgba(255,255,255,.2)}
.yr.on{background:var(--mint);color:var(--ink);transform:translateY(-3px)}
.yr.on::before{background:var(--mint2)}
.yr:focus-visible,.pin:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.credit{margin:2px 0 0;text-align:center;color:#bdb2e8;font-size:.72rem}
/* card */
.card{position:fixed;z-index:9;background:var(--paper);box-shadow:0 10px 40px rgba(10,5,40,.5);overflow:auto;
  inset-inline:10px;bottom:calc(var(--tlh) + 4px);max-height:calc(100dvh - var(--tlh) - 80px);border-radius:22px;animation:up .35s ease}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.close{position:absolute;z-index:2;top:10px;inset-inline-end:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
  color:var(--ink);font-size:1.1rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--lilac),var(--sky));border-radius:22px 22px 0 0;overflow:hidden}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.media video{object-fit:contain}
.media .big{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--lilac2);
  font-size:30px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3);padding-inline-start:6px}
.media .soonart{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--ink)}
.media .soonart span{font-size:3rem}
.media .badge{position:absolute;top:12px;inset-inline-start:12px;background:var(--ink);color:#fff;border-radius:999px;padding:.25rem .8rem;font-weight:700;font-size:.9rem}
.body{padding:14px 18px 18px}
.kicker{margin:0;color:var(--lilac2);font-weight:700;font-size:.95rem}
.card h2{margin:.15rem 0 .35rem;font-size:clamp(1.3rem,2.4vw,1.9rem);line-height:1.2}
.who,.where{margin:.1rem 0;color:var(--muted);font-size:1rem}
.hook{margin:.6rem 0 .9rem;font-size:1.05rem;line-height:1.55}
.play{border:0;border-radius:999px;padding:.7rem 1.4rem;font:700 1.05rem "Rubik",sans-serif;color:var(--ink);cursor:pointer;
  background:linear-gradient(135deg,var(--mint),var(--sky));box-shadow:0 4px 14px rgba(127,214,185,.5)}
.play[disabled]{background:#e6e3f3;color:#7a74a0;box-shadow:none;cursor:default}
@media (min-width:900px){
  :root{--tlh:130px}
  .card{inset-inline-start:24px;inset-inline-end:auto;top:110px;bottom:calc(var(--tlh) + 10px);width:min(440px,38vw);max-height:none}
  .yr{min-width:110px;padding:.55rem .8rem}
  .yr .y{font-size:1.25rem}.yr .n{font-size:.88rem}
  .pin .lbl{font-size:13px}
  .credit{font-size:.85rem}
}
@media (min-width:1600px){ /* projector / big screen */
  .yr .y{font-size:1.5rem}.yr .n{font-size:1rem}.hook{font-size:1.25rem}.who,.where{font-size:1.15rem}
  .card{width:min(560px,34vw)}
}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

.yr .y{unicode-bidi:isolate}
#globe.far .pin:not(.on) .lbl{display:none}

#globe canvas{touch-action:none}
.media iframe.yt{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

/* credit link + feedback pill */
.credit a{color:#d9f3ea;text-decoration:underline;text-underline-offset:2px}
.credit a:hover{color:#fff}
.feedback{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 10px);inset-inline-end:10px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;padding:0;font-size:14px;line-height:1;text-decoration:none;color:var(--ink);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);opacity:.6;transition:opacity .2s}
.feedback:hover,.feedback:focus-visible{opacity:1}
.feedback:focus-visible{outline:2px solid #d9f3ea;outline-offset:2px}
@media (min-width:900px){.feedback{top:14px;inset-inline-end:16px}}
@media (prefers-reduced-motion:reduce){.feedback{transition:none}}
@media print{.feedback{display:none!important}}

/* country name under each pin: quiet, map-style */
.pin .ctry{margin-top:2px;padding:0 6px;border-radius:7px;font:500 10px/1.45 "Rubik",sans-serif;letter-spacing:.03em;white-space:nowrap;
  color:rgba(42,35,80,.68);background:rgba(255,255,255,.5)}
.pin .ctry.dup{display:none}
.pin.on .ctry.dup{display:block}
#globe.far .pin:not(.on) .ctry{display:none}
@media (min-width:900px){.pin .ctry{font-size:11px}}

/* card actions + game-lab link */
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;bottom:-18px;margin:0 -18px -18px;padding:10px 18px 16px;
  background:linear-gradient(to top,var(--paper) 78%,rgba(251,250,255,0))}
.lab{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.62rem 1.2rem;font:700 1.02rem "Rubik",sans-serif;color:var(--ink);text-decoration:none;
  background:#fff;border:2px solid var(--lilac);box-shadow:0 3px 10px rgba(165,142,224,.25);transition:background .2s,border-color .2s}
.lab:hover{background:#f3eeff;border-color:var(--lilac2)}
.lab[hidden]{display:none}

/* theater: once an episode plays, the video is big without fullscreen */
.card.theater{inset-inline:0;border-radius:18px 18px 0 0;bottom:var(--tlh)}
.card.theater .media{border-radius:18px 18px 0 0;background:#000}
@media (min-width:900px){
  .card.theater{inset-inline:0;margin-inline:auto;top:calc(env(safe-area-inset-top) + 64px);bottom:auto;
    width:min(80vw,calc((100dvh - 200px) * 16 / 9));max-height:calc(100dvh - 74px);border-radius:22px;z-index:9;
    box-shadow:0 10px 40px rgba(10,5,40,.5),0 0 0 100vmax rgba(18,14,44,.6)}
  .card.theater .media{border-radius:22px 22px 0 0}
  .card.theater .body{padding:10px 20px 14px}
  .card.theater h2{font-size:clamp(1.15rem,1.7vw,1.5rem);margin:.1rem 0 .2rem}
  .card.theater .hook{margin:.4rem 0 .6rem}
  .card.theater .acts{bottom:-14px;margin:0 -20px -14px;padding:8px 20px 12px}
}


/* wide screens: the whole timeline fits, no sideways scrolling (חפ, 31.10) */
@media (min-width:900px){
  #tl{overflow-x:visible;justify-content:center;gap:clamp(4px,.6vw,10px);padding-inline:12px}
  #tl li{flex:1 1 0;min-width:0;max-width:130px}
  .yr{min-width:0 !important;width:100%;padding:26px .3rem .5rem !important}
  .yr .y{font-size:clamp(1rem,1.35vw,1.5rem) !important}
  .yr .n{font-size:clamp(.72rem,.9vw,1rem) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* lab marker (Lucide flask-conical) */
.flask{display:block;width:1em;height:1em;flex:none}
/* lab badge: big round flask that floats above the card, its own link to the lab (חפ, 1.11) */
#tl .labmark{position:absolute;z-index:2;top:0;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;box-sizing:border-box;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:25px;line-height:1;color:var(--ink);text-decoration:none;background:linear-gradient(135deg,#d6f6ea,var(--mint2));border:2.5px solid #fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 14px rgba(10,5,40,.5),0 0 0 5px rgba(182,236,217,.24);animation:labbob 2.8s ease-in-out infinite;transition:top .25s ease,scale .25s ease,box-shadow .25s ease,background .2s}
#tl .labmark::before{content:"";position:absolute;inset:-9px;border-radius:50%}
#tl .labmark .flask{width:1em;height:1em}
#tl li.haslab .yr::before{display:none}
#tl li.haslab:hover .labmark,#tl li.tipon .labmark,#tl .labmark:focus-visible,#tl .yr:focus-visible+.labmark,#tl .yr.on+.labmark{top:-5px;scale:1.1;box-shadow:0 10px 20px rgba(10,5,40,.55),0 0 0 6px rgba(182,236,217,.38)}
#tl .yr.on+.labmark,#tl li.tipon .labmark{background:#fff;border-color:var(--mint2)}
#tl .labmark:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
#tl li:nth-child(2n) .labmark{animation-delay:-1.4s}
@keyframes labbob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){#tl .labmark{animation:none;transition:none}}
/* the bubble: fixed layer above everything on the globe, kept inside the viewport by script.js */
.labtip{position:fixed;z-index:40;top:0;left:0;width:max-content;max-width:min(290px,calc(100vw - 16px));box-sizing:border-box;direction:rtl;text-align:center;padding:.6rem .85rem .7rem;border-radius:14px;
  background:#fbfaff;color:var(--ink);font:500 .93rem/1.4 "Rubik",sans-serif;border:1px solid rgba(127,214,185,.7);box-shadow:0 10px 28px rgba(8,24,40,.4);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.labtip.show{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .18s ease}
.labtip.below{transform:translateY(-6px)}.labtip.below.show{transform:none}
.labtip p{margin:0 0 .5rem}
.labtip-go{display:inline-flex;align-items:center;justify-content:center;min-height:34px;box-sizing:border-box;padding:.35rem 1rem;border-radius:999px;font-weight:700;color:var(--ink);text-decoration:none;
  background:linear-gradient(135deg,var(--mint),var(--mint2));box-shadow:0 3px 10px rgba(127,214,185,.45)}
.labtip-go:hover{filter:brightness(1.06)}
.labtip-go:focus-visible{outline:3px solid var(--mint2);outline-offset:2px}
.labtip::after{content:"";position:absolute;top:100%;left:var(--ax,50%);margin-left:-8px;border:8px solid transparent;border-top-color:#fbfaff;filter:drop-shadow(0 1px 0 rgba(127,214,185,.7))}
.labtip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#fbfaff;filter:none}
@media (prefers-reduced-motion:reduce){.labtip,.labtip.show,.labtip.below{transition:none;transform:none}}
@media print{.labtip{display:none!important}}
.tl-legend{position:absolute;top:2px;inset-inline-start:14px;margin:0;display:flex;align-items:center;gap:4px;font-size:12px;color:#dcd5f7;opacity:.85;pointer-events:none}
.tl-legend .labmark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#d6f6ea,var(--mint2));color:var(--ink);font-size:11px;line-height:1;border:1px solid #fff}
.lab .flask{font-size:1.15em}
.facts{margin:0 0 .8rem;padding-inline-start:1.2rem;font-size:1rem;line-height:1.5;color:var(--muted)}
.facts li{margin:.25rem 0}
.facts[hidden]{display:none}

/* קישור לפורטל המעבדות (madalabs) – פינה עליונה, מול כפתור "כל העולם", לא על הגלובוס */
.portal-link{position:fixed;z-index:6;top:calc(env(safe-area-inset-top) + 86px);inset-inline-end:14px;display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .85rem;min-height:34px;box-sizing:border-box;border-radius:999px;font:500 .88rem/1.2 "Rubik",sans-serif;color:#f3efff;text-decoration:none;
  background:rgba(16,48,66,.55);border:1px solid rgba(207,236,245,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 3px 12px rgba(10,5,40,.25);transition:background .2s}
.portal-link:hover{background:rgba(28,78,100,.75)}
.portal-link:focus-visible{outline:2px solid #d9f3ea;outline-offset:2px}
@media (min-width:900px){.portal-link{top:calc(env(safe-area-inset-top) + 16px);inset-inline-end:18px;font-size:.98rem;padding:.5rem 1rem}}
@media (prefers-reduced-motion:reduce){.portal-link{transition:none}}
@media print{.portal-link{display:none!important}}

/* skeleton loading (shape-matched bones, one synced shimmer; removed the moment real content renders) */
.sk{display:block;background-color:rgba(255,255,255,.15);background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.22) 50%,transparent 100%);background-size:60vw 100%;background-repeat:no-repeat;background-attachment:fixed;background-position:130vw 0;border-radius:7px;animation:sk-sweep 1.6s ease-in-out infinite}
@keyframes sk-sweep{0%{background-position:130vw 0}100%{background-position:-70vw 0}}
.sk-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.sk{animation:none;background-image:none}}
.sk-li{pointer-events:none}
.sk-yr{cursor:default}.sk-yr::before{opacity:.55}
.sk-in{display:inline-block;height:.7em;vertical-align:middle;border-radius:5px}
.yr .n .sk-in{height:.62em}
#loading{overflow:hidden}
#loading>*{grid-area:1/1}
#loading>span{position:relative}
.sk-globe{width:57vh;height:57vh;border-radius:50%;background-color:rgba(214,226,255,.07);box-shadow:inset 0 0 0 1px rgba(233,227,255,.08)}
@media (min-width:900px){.sk-globe{width:70vh;height:70vh}}