:root{
  --bg:#efe9dd; --ink:#1f2a36; --ink2:#4a5562; --line:#d6cfc1; --card:#fbf8f2;
  --accent:#b23a2b; --accent-ink:#fff; --ok:#2f6b4f;
  --dock-h:150px;
  font-family: system-ui, -apple-system, "Segoe UI", "Arial Hebrew", Arial, "Noto Sans Hebrew", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;-webkit-text-size-adjust:100%}
body{position:fixed;inset:0;}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
canvas#world{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
canvas#world.dragging{cursor:grabbing}
canvas#world.over{cursor:pointer}

.top{position:fixed;top:0;inset-inline:0;z-index:5;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;pointer-events:none;
  background:linear-gradient(var(--bg) 55%, rgba(239,233,221,0))}
.brand h1{margin:0;font-size:1.15rem;letter-spacing:-.01em;font-weight:750}
.brand p{margin:2px 0 0;font-size:.78rem;color:var(--ink2)}
.chips{display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 11px;font-size:.82rem;min-height:36px;white-space:nowrap}
.chip b{font-variant-numeric:tabular-nums;margin-inline-start:2px}
.chip.done{border-color:var(--ok);color:var(--ok)}
.chip.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

.hint{position:fixed;z-index:4;top:calc(80px + env(safe-area-inset-top));inset-inline:0;margin:0 auto;width:max-content;max-width:calc(100% - 28px);
  font-size:.78rem;color:var(--ink2);background:rgba(251,248,242,.85);border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-align:center;
  transition:opacity .4s}
.hint.gone{opacity:0;pointer-events:none}

.zoom{position:fixed;z-index:4;inset-inline-end:12px;bottom:calc(var(--dock-h) + 14px);display:flex;flex-direction:column;gap:6px}
.zoom button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:1.25rem;line-height:1}

.dock,.tourbar{position:fixed;z-index:6;bottom:0;inset-inline:0;background:var(--card);border-top:1px solid var(--line);
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(31,42,54,.06)}
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.area{border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 4px;min-height:52px;text-align:center;line-height:1.15}
.area .n{display:block;font-size:.66rem;color:var(--ink2);font-variant-numeric:tabular-nums}
.area .t{display:block;font-size:.86rem;font-weight:650;margin-top:2px}
.area.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.area.on .n{color:var(--accent)}
.actions{display:flex;gap:6px;margin-top:8px}
.act{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;min-height:44px;padding:8px 6px;font-size:.9rem;font-weight:600}
.act.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.act.ghost{flex:.8;background:transparent;font-weight:500;color:var(--ink2)}
.act:disabled{opacity:.45;cursor:default}

.sheet{position:fixed;z-index:7;inset-inline:10px;bottom:calc(var(--dock-h) + 10px);max-width:520px;margin-inline:auto;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px 16px;box-shadow:0 12px 40px rgba(31,42,54,.18);
  max-height:calc(100% - var(--dock-h) - 90px);overflow:auto;overscroll-behavior:contain}
.sheet .x,.quiz-head .x{position:absolute;top:6px;inset-inline-end:6px;width:44px;height:44px;border:0;background:transparent;font-size:1.6rem;line-height:1;color:var(--ink2);border-radius:10px}
.kicker{margin:0;font-size:.74rem;letter-spacing:.02em;color:var(--accent);font-weight:650}
.sheet h2{margin:3px 0 0;font-size:1.12rem;padding-inline-end:36px}
.meta{margin:3px 0 0;font-size:.8rem;color:var(--ink2)}
.meta:empty{display:none}
#sheet-body p{margin:9px 0 0;font-size:.95rem;line-height:1.55}
.found{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:650;color:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:3px 10px}
.mission{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.mission:first-of-type{border-top:0;margin-top:6px;padding-top:2px}
.mission h3{margin:0;font-size:1rem}
.bar{height:8px;background:#e6dfd2;border-radius:99px;margin:8px 0 4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.mission.done .bar i{background:var(--ok)}
.small{font-size:.82rem;color:var(--ink2);margin:4px 0 0}
.sources li{margin:6px 0;font-size:.88rem;line-height:1.45}
.sources a{color:var(--ink);text-underline-offset:2px}

.tourbar h2{margin:4px 0 0;font-size:1.08rem}
.tourbar p{margin:6px 0 0;font-size:.93rem;line-height:1.5}
.tour-head{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--accent);font-weight:650}
.link{border:0;background:none;color:var(--ink2);text-decoration:underline;text-underline-offset:2px;min-height:36px;padding:0 4px;font-size:.82rem}
.tour-nav{display:flex;gap:8px;margin-top:10px}

.modal{position:fixed;inset:0;z-index:20;background:rgba(31,42,54,.42);display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden],.sheet[hidden],.tourbar[hidden],.dock[hidden]{display:none}
.panel{position:relative;background:var(--card);border-radius:18px;width:100%;max-width:560px;max-height:100%;overflow:auto;padding:16px 16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.quiz-head h2{margin:0;font-size:1.1rem;padding-inline-end:40px}
.qnum{font-size:.78rem;color:var(--accent);font-weight:650;margin:12px 0 0}
.q{font-size:1.05rem;font-weight:650;margin:6px 0 10px;line-height:1.4}
.opt{display:block;width:100%;text-align:start;border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;margin:8px 0;min-height:48px;font-size:.95rem;line-height:1.35}
.opt.sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;background:#f6f2ea}
.opt.right{border-color:var(--ok);background:#eef6f0;box-shadow:0 0 0 1px var(--ok) inset}
.opt.wrong{border-color:var(--accent);background:#fbefed}
.opt:disabled{cursor:default;color:var(--ink)}
.confirm{margin-top:6px;width:100%}
.fb{margin:10px 0 0;padding:10px 12px;border-radius:12px;font-size:.92rem;line-height:1.5;background:#f3efe6}
.fb strong{display:block;margin-bottom:2px}
.fb.ok strong{color:var(--ok)} .fb.no strong{color:var(--accent)}
.score{font-size:2.4rem;font-weight:800;margin:14px 0 2px;font-variant-numeric:tabular-nums}

.toast{position:fixed;z-index:30;top:calc(70px + env(safe-area-inset-top));inset-inline:0;margin:0 auto;width:max-content;max-width:calc(100% - 24px);
  background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:.9rem;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:none}
.toast.win{background:var(--ok)}

@media (min-width:760px){
  .dock,.tourbar{inset-inline:auto;left:50%;transform:translateX(-50%);bottom:14px;width:min(720px,calc(100% - 28px));border:1px solid var(--line);border-radius:18px;padding:10px}
  .brand h1{font-size:1.35rem}
  .sheet{bottom:calc(var(--dock-h) + 24px)}
  .zoom{bottom:calc(var(--dock-h) + 28px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* קריינות */
.say{display:inline-flex;align-items:center;gap:6px;margin-top:9px;min-height:40px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--accent);background:#fff;color:var(--accent);font-size:.88rem;font-weight:650}
.say .ic{font-size:1rem;line-height:1}
.say.on{background:var(--accent);color:var(--accent-ink)}
.say[hidden]{display:none}
.tour-audio{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.tour-audio .say{margin-top:4px}

.brand .credit{margin:2px 0 0;font-size:12px;font-weight:600;opacity:.75;letter-spacing:.02em}

/* כניסה: שם וכיתה */
.entry{position:fixed;inset:0;z-index:30;background:rgba(239,233,221,.94);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.entry[hidden],.who[hidden]{display:none}
.entry-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px 16px;box-shadow:0 14px 40px rgba(31,42,54,.12);display:flex;flex-direction:column}
.entry-card .kicker{margin:0;color:var(--accent);font-size:.8rem;font-weight:650}
.entry-card h2{margin:2px 0 6px;font-size:1.6rem;letter-spacing:-.01em}
.entry-sub{margin:0 0 14px;color:var(--ink2);font-size:.92rem;line-height:1.5}
.entry-card label{font-size:.88rem;font-weight:650;margin:8px 0 4px}
.entry-card input{font:inherit;font-size:16px;min-height:48px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);width:100%}
.entry-card input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.entry-card .err{min-height:1.3em;margin:8px 0 4px;color:var(--accent);font-size:.85rem;font-weight:600}
.entry-card .act{flex:none;min-height:50px;font-size:1.05rem}
.entry-card .small{margin:10px 0 0;color:var(--ink2);font-size:.78rem;text-align:center}
.entry-card .credit{text-align:center;margin-top:6px}
.brand{min-width:0;flex:1 1 auto}.chips{flex:0 0 auto}
.who{margin:1px 0 0;font-size:.74rem;color:var(--ink2);pointer-events:auto;line-height:1.35}
.who .link{min-height:24px;font-size:.74rem;padding:0 2px}
.grade{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.grade .gt{margin:0 0 6px;font-size:1.05rem}.grade .gt b{color:var(--accent);font-size:1.25rem}
.grade ul{list-style:none;margin:0;padding:0;font-size:.86rem}
.grade li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-top:1px dashed var(--line)}
.grade li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.grade .small{margin:6px 0 0}

body.has-who .hint{top:calc(106px + env(safe-area-inset-top))}

.open-a{display:block;width:100%;min-height:120px;font:inherit;font-size:.98rem;line-height:1.5;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);resize:vertical}
.open-a:focus{outline:none;border-color:var(--ink)}
.open-note{margin:6px 2px 4px}