@charset "UTF-8";
:root{
  --ink:#2b1d12; --paper:#f6ecd8; --paper2:#efe0c2; --gold:#b8862b; --brown:#7a4a22; --dark:#3a2716;
  --blue:#1f5fa8; --sky:#e8f2fc; --green:#2e8b57; --red:#c0392b; --white:#fff;
  --fs: clamp(17px, 1.3vw + 1vh, 44px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"Rubik","Heebo","Assistant","Arial Hebrew","Segoe UI",Arial,sans-serif;font-size:var(--fs);color:var(--ink);
  background:var(--paper);display:flex;flex-direction:column;height:100vh;overflow-x:hidden}
body.after{background:var(--sky)}
body.before{background:linear-gradient(180deg,var(--paper),var(--paper2))}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:4px solid #f5b400;outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.35em .8em;background:var(--dark);color:#fff}
.chips{display:flex;gap:.35em;flex-wrap:wrap}
.chip{font-size:.62em;padding:.25em .7em;border-radius:99px;background:rgba(255,255,255,.12);color:#e9dcc6;white-space:nowrap}
.chip.on{background:var(--gold);color:#1d1208;font-weight:700}
.chip.done{background:rgba(255,255,255,.28);color:#fff}
.tools{display:flex;gap:.5em;align-items:center}
.timer{font-variant-numeric:tabular-nums;font-size:.75em;direction:ltr}
.tool{background:transparent;border:2px solid rgba(255,255,255,.4);color:#fff;border-radius:.4em;padding:0 .4em;font-size:.8em}
main{flex:1;display:flex;padding:1em 1.4em .6em;min-height:0}
.screen{flex:1;display:flex;flex-direction:column;gap:.6em;animation:fade .45s ease;min-height:0}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:2.4em;margin:.1em 0;line-height:1.1}
h2{font-size:1.75em;margin:0;line-height:1.15}
.kicker{font-size:.8em;font-weight:700;letter-spacing:.02em;color:var(--brown)}
.after .kicker{color:var(--blue)}
.lead{font-size:1.1em;margin:0;line-height:1.35}
.small{font-size:.7em;opacity:.85}

/* title */
.hero{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:minmax(0,1fr);gap:1.2em;align-items:center;flex:1;min-height:0}
.hero .photo{position:relative;border-radius:1em;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);height:100%;max-height:72vh}
.hero .photo img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.25)}
.cap{position:absolute;bottom:0;inset-inline:0;background:rgba(0,0,0,.6);color:#fff;font-size:.6em;padding:.35em .7em}
.guide{display:flex;gap:.8em;align-items:flex-end}
.guide img{width:6.5em;height:6.5em;object-fit:cover;object-position:50% 20%;border-radius:50%;border:5px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.25);flex:none}
.bubble{background:#fff;border-radius:1em;padding:.7em 1em;box-shadow:0 4px 14px rgba(0,0,0,.12);position:relative;line-height:1.35}
.bubble b{color:var(--brown)}
.btn-big{background:var(--brown);color:#fff;border:0;border-radius:.6em;padding:.5em 1.4em;font-size:1.15em;font-weight:700;box-shadow:0 5px 0 #4b2c12;align-self:flex-start}
.after .btn-big{background:var(--blue);box-shadow:0 5px 0 #123a68}
.btn-big:active{transform:translateY(3px);box-shadow:0 2px 0 #4b2c12}

/* info screens */
.split{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:1.2em;flex:1;min-height:0;align-items:stretch}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.facts li{background:#fff;border-radius:.7em;padding:.5em .8em;box-shadow:0 2px 8px rgba(0,0,0,.08);line-height:1.3;display:flex;gap:.5em;align-items:baseline}
.facts .y{font-weight:800;color:var(--brown);min-width:3.2em;direction:ltr;text-align:right}
.after .facts .y{color:var(--blue)}
.pic{position:relative;border-radius:1em;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.22);min-height:0}
.pic img{width:100%;height:100%;object-fit:cover;display:block}

/* stop */
.stop{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:minmax(0,1fr);gap:1.1em;flex:1;min-height:0}
.stop .pic{max-height:62vh}
.stop .side{display:flex;flex-direction:column;gap:.55em;min-width:0}
.fact{background:#fff;border-inline-start:8px solid var(--gold);border-radius:.6em;padding:.5em .8em;line-height:1.35;margin:0}
.after .fact{border-color:var(--blue)}
.ask{font-weight:800;font-size:1.05em;margin:.2em 0 0}
.objs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.obj{background:#fff;border:4px solid transparent;border-radius:.9em;padding:.5em .3em;display:flex;flex-direction:column;align-items:center;gap:.2em;box-shadow:0 4px 0 rgba(0,0,0,.12);transition:transform .15s}
.obj:hover{transform:translateY(-3px)}
.obj .e{font-size:2.6em;line-height:1.1}
.obj .l{font-weight:700;font-size:.85em;text-align:center;line-height:1.15}
.obj .t{font-size:.6em;background:var(--paper2);border-radius:99px;padding:.1em .6em}
.after .obj .t{background:#d6e7fa}
.obj.picked{border-color:var(--gold);background:#fff8e6;transform:scale(1.04)}
.after .obj.picked{border-color:var(--blue);background:#eef6ff}
.obj.dim{opacity:.45}
.explain{min-height:2.6em;font-size:.95em;line-height:1.3;margin:0;font-weight:600}
.explain.show{animation:fade .35s ease}
.fly{position:fixed;z-index:50;font-size:3em;pointer-events:none;transition:all .8s cubic-bezier(.5,-0.3,.7,1)}

/* transition */
.gate{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-rows:minmax(0,1fr);gap:1.2em;flex:1;min-height:0}
.timeline{display:flex;flex-direction:column;gap:.45em}

/* board */
.board{width:100%;border-collapse:separate;border-spacing:.3em;font-size:.8em}
.board th{background:var(--dark);color:#fff;padding:.35em;border-radius:.5em;font-size:.95em}
.board th.b{background:var(--brown)} .board th.a{background:var(--blue)}
.board td{background:#fff;border-radius:.6em;padding:.4em .6em;vertical-align:middle;line-height:1.25;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.board td.crit{font-weight:800;background:var(--paper2);text-align:center;white-space:nowrap}
.board td.bef{background:#fff6e4}.board td.aft{background:#eaf3fe}
.mine{display:block;font-weight:700}
.def{display:block;font-size:.85em;opacity:.75}
.reveal{background:var(--gold);color:#1d1208;border:0;border-radius:.5em;padding:.2em .7em;font-weight:700}
.chg{font-size:.92em}
.chg b{color:var(--green)}
.chg i{font-style:normal;color:var(--brown);font-weight:700}

/* quiz */
.quiz{flex:1;display:flex;flex-direction:column;gap:.7em;justify-content:center;max-width:1300px;margin:0 auto;width:100%}
.qnum{font-weight:800;color:var(--blue)}
.q{font-size:1.6em;font-weight:800;line-height:1.2;margin:0}
.opts{display:grid;grid-template-columns:1fr;gap:.5em}
.opt{background:#fff;border:4px solid #c9d8ea;border-radius:.8em;padding:.45em .9em;text-align:start;font-size:1.15em;font-weight:600;display:flex;gap:.6em;align-items:center}
.opt .k{background:var(--blue);color:#fff;border-radius:50%;width:1.6em;height:1.6em;display:inline-flex;align-items:center;justify-content:center;flex:none;font-weight:800}
.opt.ok{border-color:var(--green);background:#e7f7ee}.opt.ok .k{background:var(--green)}
.opt.no{border-color:var(--red);background:#fdeceb}.opt.no .k{background:var(--red)}
.qx{font-size:1.05em;font-weight:600;min-height:2.6em;margin:0}
.score{font-size:.8em}

/* final */
.think{background:#fff;border-radius:1em;padding:.8em 1.1em;box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:1.6em;font-weight:800;line-height:1.25;margin:0;border-inline-start:12px solid var(--gold)}
.recap{display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.pill{background:#fff;border-radius:99px;padding:.15em .7em;font-size:.85em;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.pill.b{border:3px solid var(--gold)} .pill.a{border:3px solid var(--blue)}
.hw{background:#fffbe9;border:3px dashed var(--gold);border-radius:1em;padding:.6em 1em;line-height:1.35}
.hw h3{margin:0 0 .2em;font-size:1.05em}

/* end */
.end{flex:1;display:grid;grid-template-columns:1.2fr .8fr;gap:1.2em;align-items:center}
.yt{display:inline-flex;align-items:center;gap:.5em;background:#c4302b;color:#fff;text-decoration:none;font-weight:800;border-radius:.7em;padding:.5em 1.1em;font-size:1.15em;box-shadow:0 5px 0 #7d1d1a;align-self:flex-start}
.qr{background:#fff;border-radius:1em;padding:.6em;width:min(15em,100%);margin:0 auto;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.qr img{width:100%;display:block}
.credit{font-size:.6em;opacity:.8;margin:0}
.imgcredit{font-size:.48em;opacity:.65;margin:0;line-height:1.3}

.bag{display:flex;gap:.5em;align-items:center;padding:.3em 1em;background:rgba(0,0,0,.06);min-height:2.2em;flex-wrap:wrap}
.bag-label{font-weight:800;font-size:.8em}
.bag-items{display:flex;gap:.35em;flex-wrap:wrap}
.bag-empty{font-size:.7em;opacity:.7}
.bag .pill{font-size:.7em}
.bag.hide{display:none}
.nav{display:flex;justify-content:space-between;align-items:center;padding:.35em 1em .5em}
.navbtn{background:#fff;border:2px solid rgba(0,0,0,.2);border-radius:.5em;padding:.2em .9em;font-size:.8em;font-weight:700}
.navbtn.primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.navbtn:disabled{opacity:.35;cursor:default}
.count{font-size:.65em;opacity:.7}

@media (max-width:820px){
  :root{--fs:16px}
  body{height:auto;min-height:100vh}
  main{padding:.7em .8em}
  h1{font-size:1.9em} h2{font-size:1.4em}
  .hero,.split,.stop,.gate,.end{grid-template-columns:1fr;grid-template-rows:auto}
  .hero .photo{max-height:34vh;height:34vh}
  .pic{height:30vh;flex:none} .stop .pic{max-height:30vh}
  .objs{gap:.4em} .obj .e{font-size:2em}
  .q{font-size:1.3em} .think{font-size:1.25em}
  .board,.board tbody,.board tr,.board td{display:block;width:100%}
  .board thead{display:none}
  .board tr{margin-bottom:.6em}
  .board td{margin-bottom:.25em}
  .board td.bef::before{content:"לפני: ";font-weight:800;color:var(--brown)}
  .board td.aft::before{content:"אחרי: ";font-weight:800;color:var(--blue)}
  .chip{display:none}.chip.on{display:inline-block}
}

/* ===== v3: walkable street ===== */
body{height:100vh;height:100dvh;overflow:hidden}
main{padding:0;flex:1;display:flex;min-height:0;position:relative}
.scene{position:relative;flex:1;overflow:hidden;background:#2b1d12;touch-action:none;user-select:none;-webkit-user-select:none;direction:ltr}
.overlay[hidden],.other[hidden],.scene[hidden],.panel[hidden],.controls[hidden]{display:none!important}
.cam{position:absolute;inset:0;transition:transform .65s cubic-bezier(.6,0,.8,.4),filter .65s;will-change:transform}
.cam.zoom{transform:scale(5.5);filter:brightness(.55) blur(1px)}
.head{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.face{pointer-events:none}
.face{position:absolute;left:0;top:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#2b1d12}
.ly{position:absolute;left:0;top:0;will-change:transform}
.ly svg,.ly img.slot{display:block;width:100%;height:100%}
.ly img.slot{object-fit:fill}
.face-a svg,.face-a img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(30,15,5,.45) 100%)}
.after .vig{background:radial-gradient(ellipse at 50% 55%,transparent 65%,rgba(30,40,60,.25) 100%)}
.ly.hot,.ly.front,.ly.back,.ly.main{pointer-events:none}
.spot{pointer-events:auto;position:absolute;transform:translateX(-50%);background:none;border:0;padding:0;cursor:pointer;font-size:calc(var(--u)*3.2)}
.spot .door{position:absolute;inset:0;border-radius:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*.6) calc(var(--u)*.6);border:calc(var(--u)*.45) solid rgba(255,215,120,.0);box-shadow:0 0 0 rgba(255,200,90,0);transition:all .3s}
.spot.k-door .door{border-color:rgba(255,215,120,.55);box-shadow:0 0 calc(var(--u)*3) rgba(255,190,80,.55),inset 0 0 calc(var(--u)*3) rgba(255,200,90,.5);animation:pulse 2.2s ease-in-out infinite;background:linear-gradient(180deg,rgba(255,220,140,.25),rgba(255,180,60,.35))}
.spot.k-info .door{border-radius:calc(var(--u)*1.5);border-style:dashed}
.spot.near .door{border-color:#ffd66b;box-shadow:0 0 calc(var(--u)*5) rgba(255,200,80,.9),inset 0 0 calc(var(--u)*4) rgba(255,210,100,.7)}
.spot .spark{position:absolute;left:50%;top:calc(var(--u)*-6);transform:translateX(-50%);font-size:calc(var(--u)*4.4);filter:drop-shadow(0 0 calc(var(--u)*1) rgba(255,220,120,.95));animation:bob 1.6s ease-in-out infinite}
.spot .lbl{position:absolute;left:50%;bottom:calc(100% + var(--u)*7);transform:translateX(-50%) scale(.6);opacity:0;white-space:nowrap;background:#fff8e6;color:#3a2716;font-weight:800;border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*.6) calc(var(--u)*1.6);font-size:calc(var(--u)*3.4);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) rgba(0,0,0,.35);transition:all .25s;direction:rtl;font-family:inherit}
.spot.near .lbl{opacity:1;transform:translateX(-50%) scale(1)}
.spot.near .lbl::after{content:" · היכנסו ↵";font-weight:600;opacity:.75}
.spot.k-info.near .lbl::after{content:" · קראו ↵"}
.spot.k-gate .door,.spot.k-end .door{border-color:rgba(255,215,120,.35)}
.spot.done .spark{font-size:calc(var(--u)*3);animation:none;opacity:.8}
.spot.done.k-door .door{animation:none;border-color:rgba(140,220,140,.6);box-shadow:none;background:none}
.spot.done .spark::after{content:"✔";position:absolute;right:-.6em;top:-.3em;font-size:.6em;color:#2e8b57;background:#fff;border-radius:50%;padding:0 .2em}
@keyframes pulse{50%{box-shadow:0 0 calc(var(--u)*5) rgba(255,190,80,.85),inset 0 0 calc(var(--u)*4) rgba(255,200,90,.7)}}
@keyframes bob{50%{transform:translate(-50%,calc(var(--u)*-1.2))}}
.walker{position:absolute;bottom:calc(var(--u)*1.5);height:calc(var(--u)*29);width:calc(var(--u)*14.5);transform:translateX(-50%);pointer-events:none;transition:opacity .35s;z-index:3}
.walker svg{width:100%;height:100%;overflow:visible;transition:transform .3s}
.walker.faceL svg{transform:scaleX(-1)}
.walker.walking svg{animation:bounce .42s ease-in-out infinite}
.walker.walking .legF{animation:legF .42s ease-in-out infinite}
.walker.walking .legB{animation:legB .42s ease-in-out infinite}
.walker.walking .armF{animation:legB .42s ease-in-out infinite}
.walker.walking .armB{animation:legF .42s ease-in-out infinite}
.walker .leg{transform-origin:30px 80px}.walker .arm{transform-origin:28px 44px}
@keyframes legF{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes legB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes bounce{50%{translate:0 -2px}}
.walker.turning{opacity:.15}
.walker.gone{opacity:0}
.map{position:absolute;top:calc(var(--u)*2.5);left:50%;transform:translateX(-50%);width:min(46%,560px);height:calc(var(--u)*5);z-index:4;pointer-events:none}
.mline{position:absolute;left:6%;right:6%;top:50%;height:4px;border-radius:2px;background:rgba(255,248,230,.75);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.map .md,.map .me{position:absolute;top:50%}
.map .md{transform:translate(50%,-50%);font-size:calc(var(--u)*2.6);margin-right:0}
.map .md.i{width:8px;height:8px;border-radius:50%;background:#ffd66b;box-shadow:0 0 4px #000}
.map .md.i.v{background:#8fd18f}
.map .md.d.v{color:#2e8b57;background:#fff;border-radius:50%;padding:0 .2em;font-size:calc(var(--u)*2)}
.map .me{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;background:#c0392b;border:3px solid #fff;transform:translate(50%,-50%);box-shadow:0 0 8px rgba(0,0,0,.5)}
.map{--inset:6%}.map .md,.map .me{margin-right:0}
.map .mend{position:absolute;top:50%;transform:translateY(-50%);font-size:calc(var(--u)*3)}
.map .mend.s{right:0}.map .mend.e{left:0}
.sidetag{position:absolute;top:calc(var(--u)*8.5);left:50%;transform:translateX(-50%);background:rgba(43,29,18,.65);color:#fff3da;border-radius:99px;padding:.1em .8em;font-size:.6em;z-index:4;direction:rtl;pointer-events:none}
.other{position:absolute;bottom:calc(var(--u)*30);z-index:5;background:#fff8e6;color:#3a2716;border-radius:1em;padding:.25em .7em;font-weight:800;font-size:.75em;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:wig 1.4s ease-in-out infinite;direction:rtl;pointer-events:none}
.other.toL{left:2%}.other.toR{right:2%}
@keyframes wig{50%{transform:translateY(-6px)}}
.say{position:absolute;top:calc(var(--u)*12);left:50%;transform:translate(-50%,-12px);opacity:0;transition:all .4s;z-index:6;max-width:min(80%,980px);display:flex;gap:.6em;align-items:center;background:#fff;border-radius:1em;padding:.45em .9em .45em .5em;box-shadow:0 8px 24px rgba(0,0,0,.35);direction:rtl;font-size:.85em;line-height:1.3;pointer-events:none}
.say.show{opacity:1;transform:translate(-50%,0)}
.say img.hadas,.guide img.hadas{width:2.6em;height:2.6em;border-radius:50%;object-fit:cover;object-position:50% 20%;border:3px solid #f6ecd8;flex:none}
.overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(20,10,4,.35);opacity:0;transition:opacity .3s;direction:rtl;padding:2%}
.overlay.in{opacity:1}
.overlay.low{align-items:flex-end;background:none;padding-bottom:3%}
.card{background:#fffaf0;border-radius:1em;padding:1em 1.4em;max-width:min(86%,1050px);box-shadow:0 18px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:.5em;align-items:flex-start;transform:scale(.85);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.overlay.in .card{transform:none}
.card h1{font-size:2.1em}.card h3{margin:0;font-size:1.5em}.card p{margin:0;line-height:1.4}
.card .ic{font-size:2.4em;line-height:1}
.card.year{align-items:center;text-align:center;max-width:min(70%,820px);padding:.6em 1.2em;background:rgba(255,250,240,.96)}
.card.year .yy{font-size:2.2em;font-weight:900;color:#b8862b;line-height:1}
.card .keys{font-size:.75em;opacity:.8}
.card .ask{font-weight:800}
.titled .controls,.titled .bag{visibility:hidden}
.btn-big.glow{animation:glowb 1.2s ease-in-out infinite}
@keyframes glowb{50%{box-shadow:0 0 0 6px rgba(255,214,107,.6),0 5px 0 #4b2c12}}
.ghost{background:#fff;border:3px solid #d9c49a;border-radius:.6em;padding:.35em .9em;font-weight:700;font-size:.9em}
/* interior */
.overlay.zoomin{background:rgba(20,10,4,.7)}
.room{display:flex;gap:1em;align-items:center;max-width:100%;max-height:100%;transform:scale(.3);transition:transform .55s cubic-bezier(.2,.9,.3,1.05)}
.overlay.in .room{transform:none}
.room .pic{position:relative;display:inline-block;line-height:0;border-radius:.8em;overflow:hidden;border:6px solid #f6e3b8;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 60px rgba(255,190,90,.35);flex:none}
.room .pic img{display:block;max-width:min(58vw,1100px);max-height:calc(var(--H) * .86);width:auto;height:auto}
.room .side{background:#fffaf0;border-radius:1em;padding:.8em 1em;display:flex;flex-direction:column;gap:.45em;max-width:30em;box-shadow:0 10px 30px rgba(0,0,0,.4);max-height:calc(var(--H) * .9);overflow:auto}
.room h3{margin:0;font-size:1.4em}
.room .fact{font-size:.85em}
.room .ask{margin:0;font-weight:800;font-size:.95em}
.room .cnt{background:#b8862b;color:#fff;border-radius:99px;padding:0 .5em;font-size:.85em}
.after .room .cnt{background:#1f5fa8}
.found{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.3em;font-size:.78em;line-height:1.3}
.found li{background:#fff3d6;border-radius:.5em;padding:.25em .5em;animation:fade .4s}
.after .found li{background:#e6f0fb}
.found li.q{background:#eee;opacity:.6;width:3em;text-align:center}
.row{display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.hid{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:.1em;font-size:clamp(22px,2.6vw,52px);line-height:1;opacity:.82;filter:drop-shadow(0 0 3px rgba(0,0,0,.6)) saturate(.8);cursor:pointer;animation:twinkle 4s ease-in-out infinite;border-radius:50%}
.hid:nth-of-type(2){animation-delay:1.3s}.hid:nth-of-type(3){animation-delay:2.6s}
.hid.got{opacity:0;transform:translate(-50%,-50%) scale(2);transition:all .4s;pointer-events:none}
.hid.hint{animation:hint 1s ease-in-out 3}
@keyframes twinkle{0%,85%,100%{filter:drop-shadow(0 0 3px rgba(0,0,0,.6)) saturate(.8)}92%{filter:drop-shadow(0 0 14px #ffe9a0) saturate(1.2)}}
@keyframes hint{50%{transform:translate(-50%,-50%) scale(1.6);filter:drop-shadow(0 0 18px #fff3a0)}}
/* gate (ahead face) */
.gatebox{position:absolute;left:50%;top:52%;width:calc(var(--u)*52);height:calc(var(--u)*58);transform:translate(-50%,-50%) scale(var(--gs,1));transform-origin:50% 60%;transition:transform .5s;direction:rtl}
.gatebox .arch{position:absolute;inset:0;background:linear-gradient(#a8957d,#8a7862);border-radius:50% 50% 4% 4%/32% 32% 4% 4%;box-shadow:0 0 0 calc(var(--u)*3) #7a6a56,0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.5);overflow:hidden;padding:calc(var(--u)*5) calc(var(--u)*6) 0}
.gatebox .light{position:absolute;inset:calc(var(--u)*5) calc(var(--u)*6) 0;border-radius:50% 50% 0 0/26% 26% 0 0;background:radial-gradient(ellipse at 50% 70%,#fffbe8,#ffe7a8 40%,#9cc8ea 100%);z-index:0}
.gatebox .leaf{position:absolute;top:calc(var(--u)*5);bottom:0;width:calc(50% - var(--u)*6);background:repeating-linear-gradient(90deg,#6b3f1d 0 calc(var(--u)*5),#5a3317 calc(var(--u)*5) calc(var(--u)*5.4));z-index:1;transition:transform 1.4s cubic-bezier(.5,0,.3,1);box-shadow:inset 0 0 calc(var(--u)*3) rgba(0,0,0,.5)}
.gatebox .leaf.lf{left:calc(var(--u)*6);border-radius:100% 0 0 0/26% 0 0 0;transform-origin:0 50%}
.gatebox .leaf.rt{right:calc(var(--u)*6);border-radius:0 100% 0 0/0 26% 0 0;transform-origin:100% 50%}
.gatebox .leaf::after{content:"";position:absolute;top:50%;width:calc(var(--u)*3);height:calc(var(--u)*3);border-radius:50%;background:#2a1a0c;box-shadow:0 0 0 calc(var(--u)*.6) #c9a050}
.gatebox .leaf.lf::after{right:calc(var(--u)*2)}.gatebox .leaf.rt::after{left:calc(var(--u)*2)}
.gatebox.s0 .leaf.lf{transform:perspective(900px) rotateY(-14deg)}.gatebox.s0 .leaf.rt{transform:perspective(900px) rotateY(14deg)}
.gatebox.s0 .arch{filter:sepia(.3) brightness(.85)}
.gatebox.s0::before{content:"";position:absolute;inset:-20% -30% 40%;background:radial-gradient(ellipse at 50% 80%,rgba(255,120,40,.55),transparent 60%);animation:fire 1s ease-in-out infinite;z-index:-1}
@keyframes fire{50%{opacity:.6}}
.gatebox.s1 .leaf.lf{transform:perspective(900px) rotateY(-38deg)}.gatebox.s1 .leaf.rt{transform:perspective(900px) rotateY(38deg)}
.gatebox.s2 .leaf.lf{transform:perspective(900px) rotateY(-62deg)}.gatebox.s2 .leaf.rt{transform:perspective(900px) rotateY(62deg)}
.gatebox.open .leaf.lf{transform:perspective(900px) rotateY(-96deg)}.gatebox.open .leaf.rt{transform:perspective(900px) rotateY(96deg)}
.gatebox.open{transform:translate(-50%,-50%) scale(2.6)!important;transition:transform 1.8s ease-in .4s}
.gatebox .yr{position:absolute;left:50%;top:calc(var(--u)*-13);transform:translateX(-50%);background:#f6e3b8;color:#5a3519;border:calc(var(--u)*.6) solid #7a5a30;border-radius:calc(var(--u)*1.5);padding:0 calc(var(--u)*3);font-size:calc(var(--u)*7);font-weight:900;box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(0,0,0,.4);z-index:2}
.gatebox .yr:empty{display:none}
.gatebox .yr b{display:inline-block;animation:flip .6s ease}
@keyframes flip{from{transform:rotateX(90deg)}to{transform:none}}
.aheadsign{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:#fff;border-radius:.6em;padding:.3em .8em;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.35);direction:rtl}
.flash{position:absolute;inset:0;background:#fffbea;opacity:0;pointer-events:none;transition:opacity .7s;z-index:20}
.flash.on{opacity:1}
.fly{position:fixed;z-index:50;font-size:3em;pointer-events:none;transition:all .85s cubic-bezier(.5,-0.3,.7,1)}
/* controls */
.controls{position:absolute;left:0;right:0;bottom:calc(var(--bagH,2.4em) + .5em);display:flex;justify-content:space-between;align-items:flex-end;padding:0 1.2em;pointer-events:none;z-index:8;direction:ltr}
.ctl{pointer-events:auto;border:0;border-radius:.6em;font-weight:800;box-shadow:0 5px 0 rgba(0,0,0,.35);background:rgba(255,250,240,.92);color:#3a2716;touch-action:none}
.ctl.walk{width:2.6em;height:2.6em;font-size:1.1em;border-radius:50%}
.ctl.look{padding:.4em 1em;font-size:.9em;background:#b8862b;color:#fff;direction:rtl}
.after .ctl.look{background:#1f5fa8}
.ctl:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.bag{position:relative;z-index:9;background:#2b1d12;color:#fff3da;flex:none;min-height:2.4em}
.after .bag{background:#173d66}
.bag-label{font-size:.8em}
.bag-label b{background:#f5b400;color:#2b1d12;border-radius:99px;padding:0 .45em;margin-inline-start:.2em}
.bag .pill{color:#2b1d12}
.bag.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.04)}}
.panel{flex:1;overflow:auto;display:flex;flex-direction:column;padding:1em 1.4em .4em;min-height:0}
.panel .screen{flex:1}
.pnav{display:flex;justify-content:space-between;padding:.5em 0 .2em}
body.paneled .bag{background:rgba(0,0,0,.06);color:inherit}
.top{position:relative;z-index:12}
@media (max-width:820px),(max-height:520px){
  :root{--fs:16px}
  .map{width:70%}
  .sidetag{font-size:.7em}
  .say{font-size:.8em;max-width:92%}
  .card{max-width:94%;padding:.8em 1em}.card h1{font-size:1.5em}.card h3{font-size:1.2em}
  .room{flex-direction:column;gap:.5em;max-height:100%;overflow:auto;align-items:stretch}
  .room .pic{align-self:center}
  .room .pic img{max-width:92vw;max-height:calc(var(--H) * .42)}
  .room .side{max-width:none;max-height:none}
  .overlay.zoomin{align-items:flex-start;overflow:auto}
}
@media (max-aspect-ratio:4/5){
  body{height:100dvh}
  main{flex-direction:column}
  .scene{flex:1;min-height:52dvh}
  .controls{position:static;padding:.5em .8em;pointer-events:auto;background:#2b1d12;align-items:center}
  .after .controls{background:#173d66}
  .ctl.walk{width:3.2em;height:3.2em}
  .ctl.look{font-size:1em;padding:.6em 1em}
  .bag{flex:none;max-height:22dvh;align-items:flex-start;overflow:auto}
  body.paneled main{flex:1}
  .other{bottom:calc(var(--u)*34);font-size:.85em}
  .overlay.zoomin{position:fixed;top:2.6em}
}

/* v4 panorama mode */
.pano{position:absolute;inset:0}
.pano .pimg{position:absolute;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
body.pano .walker{display:none}
.scene.walking .pano{animation:bob .52s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*-.45))}}
body.pano.before .face-r .vig,body.pano.before .face-l .vig{background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(30,15,5,.5) 100%),linear-gradient(rgba(20,10,0,.18),transparent 25%)}
.gatewrap{position:absolute;inset:0;transition:transform 2s cubic-bezier(.6,0,.35,1) .5s}
.gatewrap.opening{transform:scale(3.2)}
.gatebox.art{transform:translate(-50%,-50%)!important;transition:none}
.gatebox.art .arch{background:none;box-shadow:none;padding:0;border-radius:50% 50% 0 0/22% 22% 0 0}
.gatebox.art .light{inset:0;border-radius:0;background-size:cover;background-position:30% 60%}
.gatebox.art .leaf{top:0;width:50%;border-radius:0;box-shadow:inset 0 0 calc(var(--u)*2) rgba(0,0,0,.35);background-repeat:no-repeat}
.gatebox.art .leaf.lf{left:0}.gatebox.art .leaf.rt{right:0}
.gatebox.art .leaf::after{display:none}
.gatebox.art .yr{top:calc(var(--u)*-12)}
.credit.src{font-size:.75em;opacity:.75;max-width:60ch;margin-inline:auto}

/* v5: look around by moving the phone (gyro) or the mouse */
.gaze{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;will-change:transform}
.cam{transition:transform .65s cubic-bezier(.6,0,.8,.4),filter .65s,scale .9s ease}
.cam.gy{scale:1.25}
.cam.gy.zoom{scale:1}
.tool.on{background:var(--gold,#e0a93b);color:#1d1208;border-color:var(--gold,#e0a93b)}
.gyroask{position:absolute;left:50%;bottom:calc(var(--u)*15);transform:translateX(-50%);z-index:7;direction:rtl;font:inherit;font-weight:800;font-size:.8em;
  background:#fff3d6;color:#3a2716;border:0;border-radius:99px;padding:.5em 1.1em;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 3px rgba(255,214,107,.8);white-space:nowrap;animation:glowb 1.8s ease-in-out infinite;cursor:pointer}
.gyroask[hidden]{display:none!important}
.titled .gyroask{display:none!important}
@media (prefers-reduced-motion:reduce){.cam{transition:none}}

/* v4.1 fix: frame hugs picture on phones, objects inside */
.room .pic{height:-webkit-fit-content;height:fit-content}
.room .pic img{max-height:calc(var(--H) * .86)}
@media (max-width:820px),(max-aspect-ratio:1/1){.room .pic{display:block;width:92vw;max-width:92vw;height:auto;flex:0 0 auto}.room .pic img{width:100%;height:auto;max-width:100%;max-height:none}}

/* v5: talking characters + empty comparison board */
.hid.ch{width:46px;height:46px;border-radius:50%;background:rgba(255,215,120,.25);border:2px solid rgba(255,220,140,.95);box-shadow:0 0 0 0 rgba(255,210,110,.8);animation:chPulse 1.8s infinite;transform:translate(-50%,-50%);font-size:22px;display:flex;align-items:center;justify-content:center;padding:0}
.hid.ch.got{animation:none;background:rgba(255,255,255,.85);border-color:#7bc47f}
@keyframes chPulse{0%{box-shadow:0 0 0 0 rgba(255,210,110,.8)}70%{box-shadow:0 0 0 14px rgba(255,210,110,0)}100%{box-shadow:0 0 0 0 rgba(255,210,110,0)}}
.sbub{position:absolute;transform:translateX(-50%);max-width:72%;background:#fffdf6;color:#2b1d10;border-radius:14px;padding:8px 12px;font-size:15px;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:5;text-align:right;direction:rtl}
.boardscreen{border-radius:16px;padding:14px;margin:-6px}
.tray{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;padding:8px;border:2px dashed #c9a46b;border-radius:12px;background:rgba(255,255,255,.7);min-height:44px}
.bchip{font:inherit;font-size:14px;padding:6px 10px;border-radius:999px;border:1.5px solid #b98c4f;background:#fff;cursor:pointer;margin:2px}
.bchip.sel{background:#ffd27a;border-color:#a8661c;box-shadow:0 0 0 3px rgba(255,190,80,.5)}
.bchip.ok{background:#dff3df;border-color:#3f9a46}
.bchip.no{background:#fde0dc;border-color:#c8463a}
td.drop{min-height:56px;cursor:pointer;vertical-align:top;background:rgba(255,255,255,.75)}
td.drop .ph{color:#a8936f;font-size:12px}
td.wr textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px;border:1px solid #c9b48f;border-radius:8px;padding:6px;resize:vertical;direction:rtl}
.score{text-align:center;font-weight:700;margin:10px 0 0}
.btn-big[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width:700px){.board,.board tbody,.board tr,.board td{display:block;width:auto}.board thead{display:none}.board tr{margin-bottom:10px;border-radius:10px;overflow:hidden}
 .board td.bef:before{content:"לפני:";font-weight:700;display:block;font-size:12px}.board td.aft:before{content:"אחרי:";font-weight:700;display:block;font-size:12px}
 .hid.ch{width:38px;height:38px;font-size:18px}.sbub{font-size:13px;max-width:86%}}
.sbub{max-width:88%;width:max-content}