/* מבנה משותף למפגשי המחברת: במה תלת־ממדית, כרטיס צד, כפתורים, בוחן. */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--gr-blue);color:var(--gr-ink);font-family:var(--gr-font-ui);overflow:hidden;-webkit-tap-highlight-color:transparent}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#gl.tap{cursor:pointer}
#ov{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#tags{position:fixed;inset:0;pointer-events:none}
#orient{position:fixed;inset:auto 0 44px 0;pointer-events:none;font:600 12px var(--gr-font-ui);color:var(--gr-on-blue)}
#orient span{position:absolute;bottom:0;padding:3px 8px;border:2px solid var(--gr-on-blue)}
#orient[hidden]{display:none}
.tag{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;font:600 13px/1.2 var(--gr-font-ui);background:var(--gr-card);border:var(--gr-border);box-shadow:var(--gr-shadow-sm);padding:5px 9px;white-space:nowrap;cursor:pointer;color:var(--gr-ink);transition:opacity .25s}
.tag small{display:block;font:italic 500 10.5px var(--gr-font-latin);color:var(--gr-ink-2)}
.tag.off{opacity:.35}
.tag.on{background:var(--gr-sun)}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;gap:14px;padding:14px 22px;color:var(--gr-on-blue)}
.brand{font:700 30px/1 var(--gr-font-display);color:var(--gr-on-blue);text-decoration:none;padding:0 6px;background:linear-gradient(var(--gr-sun),var(--gr-sun)) no-repeat 50% 88%/100% 34%;color:var(--gr-ink)}
.where{font-size:13px;opacity:.95;margin-inline-end:auto}
.where i{font:italic 500 11.5px var(--gr-font-latin);opacity:.85;margin-inline-start:6px}
.dots{display:flex;gap:7px;margin:0;padding:0;list-style:none}
.dots button{width:34px;height:12px;border:2px solid var(--gr-on-blue);background:transparent;padding:0;cursor:pointer}
.dots button[aria-current=true]{background:var(--gr-sun);border-color:var(--gr-sun)}
.dots button.done{background:var(--gr-on-blue)}
.dots button:focus-visible,.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,.tag:focus-visible,#cut:focus-visible{outline:3px solid var(--gr-sun);outline-offset:3px}

/* card */
.card{position:fixed;z-index:4;inset-inline-start:4vw;top:50%;transform:translateY(-50%);width:min(430px,36vw);max-height:84vh;overflow:auto;background:var(--gr-card);border:var(--gr-border);box-shadow:8px 8px 0 var(--gr-ink);padding:22px 24px 18px}
.card[hidden]{display:none}
.card.enter{animation:pop .34s var(--gr-ease-pop)}
@keyframes pop{from{transform:translateY(-46%) scale(.97);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}
h1,h2{font:700 clamp(54px,6.4vw,92px)/.86 var(--gr-font-display);margin:0 0 6px;letter-spacing:0}
h2{font-size:clamp(44px,4.6vw,64px)}
.en{font:italic 500 14px/1.3 var(--gr-font-latin);color:var(--gr-ink-2);margin:0 0 14px;direction:ltr;text-align:start}
p{margin:0 0 10px;font-size:16px;line-height:1.55}
p .e{display:block;font:italic 500 12.5px/1.4 var(--gr-font-latin);color:var(--gr-ink-2);direction:ltr;text-align:start}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.btn{font:700 16px var(--gr-font-ui);padding:9px 18px;border:var(--gr-border);background:var(--gr-card);color:var(--gr-ink);box-shadow:var(--gr-shadow-btn);cursor:pointer;transition:transform var(--gr-d-press),box-shadow var(--gr-d-press)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--gr-ink)}
.btn.go{background:var(--gr-sun)}
.card>.row:last-child{position:sticky;bottom:-18px;background:var(--gr-card);padding:10px 0 4px;margin-top:8px;z-index:1}
.btn.ghost{box-shadow:none;border-width:2px;font-size:14px;padding:8px 12px;background:transparent}
.btn small,.opt small,.chip small{display:block;font:italic 500 11px var(--gr-font-latin);color:var(--gr-ink-2);font-weight:500}

/* counter */
.count{display:flex;align-items:baseline;gap:8px;margin:2px 0 6px;direction:ltr;justify-content:flex-end}
.count b{font:400 64px/1 var(--gr-font-num)}
.count span{font:400 28px var(--gr-font-num);color:var(--gr-ink-2)}
.regs{display:grid;gap:8px;margin:6px 0 4px}
.reg{display:grid;grid-template-columns:96px 1fr 46px;align-items:center;gap:10px;font-size:14px;font-weight:600}
.reg small{display:block;font:italic 500 10.5px var(--gr-font-latin);color:var(--gr-ink-2)}
.bar{height:16px;border:2px solid var(--gr-ink);background:var(--gr-paper);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--c);transition:width .3s var(--gr-ease)}
html[dir=rtl] .bar i{inset:0 0 0 auto}
.reg em{font:400 15px var(--gr-font-num);font-style:normal;text-align:end}
.reg.full{animation:stamp .45s var(--gr-ease-pop)}
@keyframes stamp{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.win{margin-top:12px;padding:12px 14px;border:var(--gr-border);background:var(--gr-sun);box-shadow:var(--gr-shadow-sm)}
.win[hidden]{display:none}
.win b{font:700 40px/1 var(--gr-font-display);display:block;direction:ltr;text-align:end}
.win .l{display:block;direction:ltr;text-align:start;font:italic 500 12px var(--gr-font-latin);color:var(--gr-ink-2);margin-top:2px}
.note{font-size:13px;color:var(--gr-ink-2);margin-top:8px}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.chip{font:600 14px var(--gr-font-ui);padding:7px 11px;border:var(--gr-border);background:var(--gr-card);cursor:pointer;color:var(--gr-ink);box-shadow:var(--gr-shadow-sm)}
.chip[aria-pressed=true]{background:var(--gr-sun)}
.detail{border:var(--gr-border);background:var(--gr-paper);padding:12px 14px;min-height:112px}
.detail b{font:700 34px/1 var(--gr-font-display);display:block;margin-bottom:2px}
.detail .en{display:block}
.detail .sw{display:inline-block;width:14px;height:14px;border:2px solid var(--gr-ink);background:var(--c,#ccc);margin-inline-end:6px}

/* slider */
.slide{margin:14px 0 8px}
.slide label{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin-bottom:6px}
.slide label span small{display:block;font:italic 500 10.5px var(--gr-font-latin);color:var(--gr-ink-2)}
input[type=range]{width:100%;height:34px;accent-color:var(--gr-red);margin:0}
.defs{display:grid;gap:8px;margin-top:10px}
.def{border:var(--gr-border);padding:9px 12px;background:var(--gr-paper);transition:background .25s,transform .25s}
.def.hi{background:var(--gr-sun);transform:translateX(-4px)}
html[dir=ltr] .def.hi{transform:translateX(4px)}
.def b{font-size:15px}
.def small{display:block;font-size:12.5px;color:var(--gr-ink-2)}
.def .l{direction:ltr;text-align:start;font:italic 500 11px var(--gr-font-latin);margin-top:2px}

/* quiz */
.q{font-size:19px;font-weight:700;line-height:1.35;margin:4px 0 12px}
.opts{display:grid;gap:8px}
.opt{font:600 15.5px/1.3 var(--gr-font-ui);text-align:start;padding:11px 13px;border:var(--gr-border);background:var(--gr-card);cursor:pointer;box-shadow:var(--gr-shadow-sm);color:var(--gr-ink)}
.opt:disabled{cursor:default}
.opt.ok{background:var(--gr-mint)}
.opt.no{background:var(--gr-red);color:#fff;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fb{margin-top:10px;padding:10px 12px;border:var(--gr-border);background:var(--gr-paper);font-size:14px}
.fb[hidden]{display:none}
.score{font:400 64px/1 var(--gr-font-num)}

.credit{position:fixed;z-index:3;inset-inline-end:16px;bottom:10px;font-size:10.5px;color:var(--gr-on-blue);opacity:.85;max-width:46vw;text-align:end;line-height:1.35}
.credit i{font:italic 500 9.5px var(--gr-font-latin)}
.loading{position:fixed;inset:0;display:grid;place-items:center;z-index:9;background:var(--gr-blue);color:var(--gr-on-blue);font:700 54px var(--gr-font-display);transition:opacity .5s}
.loading.gone{opacity:0;pointer-events:none}

@media(max-width:820px){
 .top{padding:10px 14px;gap:8px}.brand{font-size:24px}.where{display:none}.dots{margin-inline-start:auto}.dots button{width:26px}
 .card{inset-inline:10px;top:auto;bottom:10px;transform:none;width:auto;max-height:50vh;padding:18px 18px 16px;box-shadow:5px 5px 0 var(--gr-ink)}
 @keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
 h1{font-size:52px}h2{font-size:40px}.en{margin-bottom:8px}.count b{font-size:52px}.credit{display:none}
 p{font-size:14.5px}.detail{min-height:0}.detail b{font-size:28px}.q{font-size:16.5px}.opt{font-size:14.5px;padding:9px 11px}
 .reg{grid-template-columns:78px 1fr 40px}
}
@media(prefers-reduced-motion:reduce){.card.enter,.reg.full,.opt.no{animation:none}*{transition:none!important}}

/* QA: אזור לחיצה של 44px לנקודות השלבים, בלי לשנות את הגודל הנראה. */
.dots button{position:relative}
.dots button::before{content:"";position:absolute;inset:-16px -9px}
img:not([src]),img[src=""]{display:none!important}
#gl{background:#1c1d21}