@font-face{font-family:"Noto Sans Hebrew";src:url("fonts/noto-hebrew-hebrew.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Noto Sans Hebrew";src:url("fonts/noto-hebrew-latin.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2122}
:root{--emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;--h:100vh;--w:300vh}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd3f4;overscroll-behavior:none}
body{font-family:"Noto Sans Hebrew",Arial,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.world{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;touch-action:none;cursor:grab;direction:ltr;
  background:linear-gradient(#7cc8f0,#bfe6f7 55%,#9fd28a 56%,#79b85a)}
.world.dragging{cursor:grabbing}
.track{position:absolute;left:0;top:0;height:var(--h);width:var(--w);will-change:transform;transform:translate3d(0,0,0)}
.pano,.pano-low{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-user-drag:none;pointer-events:none}
.pano-low{filter:blur(6px);transform:scale(1.01)}
.pano{opacity:0;transition:opacity .6s}
.pano.ready{opacity:1}

/* ambient life */
.fx,.sky-layer,.front-layer{position:absolute;pointer-events:none}
.fx{inset:0;overflow:hidden}
.sky-layer{left:0;top:0;height:var(--h);width:calc(var(--w) * .7 + 100vw);will-change:transform}
.front-layer{left:0;top:0;height:var(--h);width:calc(var(--w) * 1.25);will-change:transform}
.cloud{position:absolute;width:calc(var(--h) * .30);height:calc(var(--h) * .09);border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.75),rgba(255,255,255,.35) 55%,rgba(255,255,255,0) 72%);
  filter:blur(2px);animation:drift linear infinite}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(var(--h) * .9))}}
.spark{position:absolute;width:calc(var(--h) * .012);height:calc(var(--h) * .012);border-radius:50%;
  background:radial-gradient(circle,#fff 0,#fff6c0 30%,rgba(255,220,120,0) 70%);
  animation:twinkle 3.2s ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) translateY(0)}45%{opacity:1;transform:scale(1.25) translateY(calc(var(--h) * -.012))}70%{opacity:.4}}
.glow{position:absolute;width:calc(var(--h) * .22);height:calc(var(--h) * .22);border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,240,170,.45),rgba(255,230,140,0) 65%);animation:pulse 4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes pulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}
.bird{position:absolute;width:calc(var(--h) * .03);height:calc(var(--h) * .015);animation:fly linear infinite}
.bird svg{width:100%;height:100%;overflow:visible}
.bird path{animation:flap .5s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(-.45)}}
@keyframes fly{from{transform:translateX(0)}to{transform:translateX(calc(var(--h) * 2.2))}}
.leaf{position:absolute;width:calc(var(--h) * .035);height:calc(var(--h) * .022);border-radius:0 80% 0 80%;
  background:linear-gradient(135deg,#9be25b,#3e9a2c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  opacity:.85;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(calc(var(--h) * -.25),calc(var(--h) * 1.15)) rotate(540deg)}}

/* Title on the painted banner: soft glow only (no hard outline — keeps niqqud dots clean) */
.title{position:absolute;transform:translate(-50%,-50%);margin:0;text-align:center;direction:rtl;
  font-weight:800;line-height:1.25;color:#5b2c07;font-size:calc(var(--h) * var(--title-k,.04));
  text-shadow:0 0 .18em rgba(255,240,205,.85),0 0 .5em rgba(255,226,160,.55),0 .06em .14em rgba(120,60,10,.25);
  white-space:nowrap;pointer-events:none}

/* places + signs (same wood look as v4) */
.places{position:absolute;inset:0}
.hot{position:absolute;display:block;border-radius:30%;cursor:pointer;background:transparent;border:0;padding:0}
.sign{position:absolute;display:block;transform:translate(-50%,-100%);direction:rtl;cursor:pointer;
  text-decoration:none;color:#4a2306;font-size:calc(var(--h) * var(--sign-k,.021));outline:none;
  animation:sway 5.5s ease-in-out infinite;animation-delay:calc(var(--d) * -1);transform-origin:50% 100%;
  background:none;border:0;padding:0;font-family:inherit;z-index:2}
.board{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:6.4em;min-height:3.1em;padding:.8em .6em .42em;border-radius:.75em;text-align:center;
  background:
    repeating-linear-gradient(176deg,rgba(255,255,255,0) 0 .55em,rgba(140,70,20,.10) .55em .62em),
    linear-gradient(180deg,#f2b56e 0%,#e09a52 55%,#cf8440 100%);
  border:.2em solid #ffcb45;
  box-shadow:inset 0 .12em 0 rgba(255,255,255,.45),inset 0 -.18em .25em rgba(120,55,10,.28),
             0 0 0 .07em #c98a16,0 .28em .5em rgba(60,30,5,.35);
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.icon{position:absolute;top:0;left:50%;transform:translate(-50%,-62%);
  width:1.75em;height:1.75em;border-radius:50%;display:grid;place-items:center;
  font-family:var(--emoji);font-size:1.12em;line-height:1;
  background:radial-gradient(circle at 35% 30%,#fff7d6,#ffd25a 70%,#e9a71a);
  box-shadow:0 0 0 .1em #c98a16,0 .15em .3em rgba(60,30,5,.3)}
.name{display:block;font-weight:800;line-height:1.3;white-space:nowrap;text-shadow:0 0 .25em rgba(255,236,200,.75)}
.sign:hover .board,.sign:focus-visible .board,.sign.lit .board{transform:translateY(-.25em) scale(1.06) rotate(-1.5deg);
  box-shadow:inset 0 .12em 0 rgba(255,255,255,.5),inset 0 -.18em .25em rgba(120,55,10,.28),0 0 0 .07em #c98a16,0 0 .9em .2em rgba(255,236,150,.9),0 .45em .7em rgba(60,30,5,.35)}
.sign:active .board{transform:scale(.94);transition-duration:.08s}
.sign:focus-visible .board{outline:.18em solid #1a3cff;outline-offset:.15em}
.sign.has-post{transform:translate(-50%,calc(-100% - 2.1em))}
.sign.has-post::after{content:"";position:absolute;left:50%;top:100%;width:.75em;height:2.2em;transform:translateX(-50%);z-index:-1;
  border-radius:.15em;background:linear-gradient(90deg,#8a5426,#b9773e 45%,#7c4a1f);box-shadow:0 .2em .3em rgba(0,0,0,.25)}
@keyframes sway{0%,100%{rotate:0deg}50%{rotate:1.2deg}}

/* swipe hint + arrows */
.hint{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;direction:ltr;
  display:flex;align-items:center;gap:14px;padding:8px 18px;border-radius:40px;background:rgba(255,250,235,.72);
  box-shadow:0 6px 18px rgba(40,60,20,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-size:30px;color:#7a3d0a;font-weight:900;pointer-events:none;transition:opacity .6s}
.hint .hand{font-family:var(--emoji);display:inline-block;animation:swipe 1.6s ease-in-out infinite}
.hint .arr{animation:nudge 1.6s ease-in-out infinite}
.hint .arr-l{animation-direction:reverse}
.hint.gone{opacity:0}
@keyframes swipe{0%,100%{transform:translateX(-22px) rotate(-10deg)}50%{transform:translateX(22px) rotate(10deg)}}
@keyframes nudge{0%,100%{opacity:.35}50%{opacity:1}}
.nav{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));z-index:6;width:46px;height:46px;border-radius:50%;border:3px solid #ffcb45;
  background:radial-gradient(circle at 35% 30%,#f7c98b,#e09a52 60%,#c97c38);color:#5b2c07;font-size:32px;font-weight:900;line-height:36px;
  padding:0;direction:ltr;unicode-bidi:isolate;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 10px rgba(60,30,5,.35);cursor:pointer;transition:opacity .5s,transform .15s;font-family:Arial,sans-serif}
.nav:active{transform:scale(.9)}
.nav-l{left:max(8px,env(safe-area-inset-left))}
.nav-r{right:max(8px,env(safe-area-inset-right))}
.nav.faint{opacity:.55}
.nav.off,.nav.off.faint{opacity:0;pointer-events:none}

/* card */
.card-wrap{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(30,50,20,.35);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .25s ease}
.card-wrap[hidden]{display:none}
.card{position:relative;direction:rtl;width:min(84vw,340px);padding:46px 22px 26px;border-radius:28px;text-align:center;
  background:repeating-linear-gradient(176deg,rgba(255,255,255,0) 0 14px,rgba(140,70,20,.08) 14px 16px),linear-gradient(180deg,#fbe1b4,#f2b56e);
  border:5px solid #ffcb45;box-shadow:0 0 0 2px #c98a16,inset 0 3px 0 rgba(255,255,255,.5),0 18px 40px rgba(30,20,5,.45);
  animation:pop .38s cubic-bezier(.3,1.6,.5,1)}
.card-icon{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--emoji);font-size:40px;
  background:radial-gradient(circle at 35% 30%,#fff7d6,#ffd25a 70%,#e9a71a);box-shadow:0 0 0 4px #c98a16,0 6px 12px rgba(60,30,5,.35)}
.card-name{margin:6px 0 20px;font-size:30px;line-height:1.35;font-weight:800;color:#4a2306;text-shadow:0 0 .25em rgba(255,236,200,.8)}
.play{display:inline-block;min-width:200px;padding:14px 30px 20px;border-radius:999px;text-decoration:none;
  font-size:38px;font-weight:900;color:#fff;letter-spacing:.5px;
  background:linear-gradient(180deg,#8ee05a 0%,#4fbf2c 50%,#2f9a1a 100%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(20,80,10,.45),0 8px 0 #22700f,0 14px 22px rgba(20,60,10,.45);
  text-shadow:0 2px 3px rgba(20,70,10,.55),0 0 10px rgba(30,90,10,.35);animation:breathe 1.6s ease-in-out infinite}
.play:active{transform:translateY(6px);box-shadow:inset 0 4px 0 rgba(255,255,255,.55),inset 0 -6px 0 rgba(20,80,10,.45),0 2px 0 #22700f,0 4px 10px rgba(20,60,10,.45);animation:none}
.card-x{position:absolute;top:10px;left:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.65);
  color:#7a3d0a;font-size:20px;font-weight:900;cursor:pointer;font-family:Arial,sans-serif}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.05}}

.foot{position:fixed;left:0;right:0;bottom:max(4px,env(safe-area-inset-bottom));z-index:5;text-align:center;direction:rtl;
  font-size:11.5px;color:rgba(255,252,240,.85);text-shadow:0 1px 3px rgba(30,40,10,.75),0 0 6px rgba(30,40,10,.45);pointer-events:none}
.noscript{position:fixed;inset:auto 0 30% 0;margin:auto;max-width:300px;background:#fff;padding:16px 28px;border-radius:12px;font-size:20px;z-index:20}
@media (prefers-reduced-motion:reduce){.sign,.cloud,.bird,.leaf,.spark,.glow,.hint .hand,.play{animation:none}}