:root{--bg:#f2f8fc;--ink:#14213d;--mut:#4a5874;--pri:#1864ab;--pri2:#0b7285;--acc:#2f9e44;--warm:#f08c00;--card:#fff;--sh:0 6px 0 rgba(16,60,110,.12),0 12px 28px rgba(16,60,110,.12);--r:18px;--fs:1}
*{box-sizing:border-box}html{font-size:calc(17px * var(--fs))}
body{margin:0;font-family:Rubik,"Noto Sans Hebrew",Arial,sans-serif;background:linear-gradient(180deg,#e7f5ff 0,#f2f8fc 320px,#eefbf3 100%);color:var(--ink);line-height:1.6}
body.kid{background:linear-gradient(180deg,#d0f4ff 0,#fff9db 420px,#e6fcf5 100%)}
a{color:var(--pri)}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:4px solid #fab005;outline-offset:2px;border-radius:8px}
.skip{position:absolute;right:-999px;top:0;background:#fff;padding:.5rem 1rem;z-index:99}.skip:focus{right:1rem}
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(16,60,110,.12)}
.bar{display:flex;align-items:center;gap:.6rem;padding:.45rem 1rem;max-width:1200px;margin:auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:800;text-decoration:none;color:var(--ink);font-size:1.05rem}.brand img{width:36px;height:36px;border-radius:50%}
.tools{margin-inline-start:auto;display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}
.tools button,.tools select{font:inherit;font-size:.85rem;border:2px solid #c5d9ee;background:#fff;border-radius:999px;padding:.25rem .7rem;cursor:pointer;color:var(--ink)}
nav.main{max-width:1200px;margin:auto;padding:0 .6rem .4rem;display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:thin}
nav.main a{white-space:nowrap;text-decoration:none;padding:.3rem .7rem;border-radius:999px;color:var(--ink);font-weight:600;font-size:.92rem;background:#eef5fb}
nav.main a[aria-current=page]{background:var(--pri);color:#fff}
main{max-width:1100px;margin:auto;padding:1rem 1rem 3rem}
.crumbs{font-size:.88rem;color:var(--mut);margin:.2rem 0 .8rem}.crumbs a{color:var(--mut)}
h1{font-size:2rem;line-height:1.25;margin:.2rem 0 .6rem}h2{font-size:1.45rem;margin:1.6rem 0 .6rem;color:#0b4f8a}h3{font-size:1.15rem;margin:1rem 0 .4rem}
.hero{position:relative;overflow:hidden;border-radius:28px;padding:2rem 1.6rem;color:#fff;background:radial-gradient(circle at 15% 20%,#4dabf7 0,transparent 45%),radial-gradient(circle at 85% 80%,#38d9a9 0,transparent 40%),linear-gradient(135deg,#1864ab,#0b7285 60%,#2b8a3e);box-shadow:var(--sh)}
.hero h1{font-size:2.3rem;text-shadow:0 3px 0 rgba(0,0,0,.18)}.hero p{font-size:1.1rem;max-width:720px}
.hero .compass{position:absolute;left:1.2rem;top:1rem;font-size:5rem;filter:drop-shadow(0 8px 8px rgba(0,0,0,.25));animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{display:block;text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--r);padding:1.1rem;box-shadow:var(--sh);border-top:7px solid var(--c,#1864ab);transition:transform .15s}
.tile:hover{transform:translateY(-4px)}.tile .em{font-size:2.4rem;display:inline-block;filter:drop-shadow(0 5px 3px rgba(0,0,0,.18))}.tile b{display:block;font-size:1.1rem;margin:.2rem 0}.tile span{color:var(--mut);font-size:.92rem}
.card{background:var(--card);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh);margin:1rem 0}
.read{font-size:1.08rem}.kid .read{font-size:1.25rem;line-height:2}
.btn{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:.55rem 1.05rem;background:var(--pri);color:#fff;font-weight:700;box-shadow:0 4px 0 #0b4f8a;margin:.2rem}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0b4f8a}.btn.g{background:var(--acc);box-shadow:0 4px 0 #237032}.btn.o{background:#fff;color:var(--pri);border:2px solid #a5c8ec;box-shadow:0 4px 0 #a5c8ec}.btn.w{background:var(--warm);box-shadow:0 4px 0 #b86200}
.opt{display:block;width:100%;text-align:right;font:inherit;padding:.65rem .9rem;margin:.35rem 0;border-radius:14px;border:2px solid #c5d9ee;background:#fff;cursor:pointer}
.opt.ok{background:#d3f9d8;border-color:#2f9e44}.opt.no{background:#ffe3e3;border-color:#e03131}
.fb{margin-top:.6rem;padding:.6rem .9rem;border-radius:12px;background:#e7f5ff}.fb.ok{background:#d3f9d8}.fb.no{background:#fff4e6}
.help{background:linear-gradient(135deg,#e6fcf5,#e7f5ff);border:3px solid #38d9a9;border-radius:18px;padding:.8rem 1rem;font-weight:700;margin:1rem 0}
.pill{display:inline-block;background:#e7f5ff;border-radius:999px;padding:.1rem .6rem;font-size:.85rem;margin:.1rem}
.lvchips{display:flex;flex-wrap:wrap;gap:.5rem}.lvchips a,.lvchips button{font:inherit;text-decoration:none;color:var(--ink);background:#fff;border:2px solid #c5d9ee;border-radius:999px;padding:.35rem .9rem;font-weight:700;cursor:pointer}
.lvchips .on{background:var(--pri);color:#fff;border-color:var(--pri)}
.signs{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.sg{background:#fff;border-radius:16px;padding:.8rem;text-align:center;box-shadow:var(--sh);cursor:pointer;border:0;font:inherit;color:inherit}
.shape{width:92px;height:92px;margin:0 auto .4rem;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#fff;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25))}
.shape.oct{background:#d6336c;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border:0;font-size:1.25rem}
.shape.tri{background:conic-gradient(#fff 0 0);clip-path:polygon(50% 4%,98% 94%,2% 94%);background:#fff;position:relative}
.shape.tri,.shape.inv{color:#14213d;background:linear-gradient(#e03131,#e03131)}.shape.tri span,.shape.inv span{background:#fff;width:72%;height:62%;display:flex;align-items:center;justify-content:center;font-size:1.7rem}
.shape.tri span{clip-path:polygon(50% 8%,96% 92%,4% 92%);margin-top:22%}.shape.inv{clip-path:polygon(2% 6%,98% 6%,50% 96%)}.shape.inv span{clip-path:polygon(4% 8%,96% 8%,50% 92%);margin-bottom:22%}
.shape.cir{border-radius:50%;background:#e03131}.shape.cir span{background:#fff;width:70%;height:22%;border-radius:4px}
.shape.sq{background:#1971c2;border-radius:14px;font-size:2.2rem}
.sg .nm{font-weight:800}.sg .imp{color:#c92a2a;font-weight:800}.sg .mean{font-size:.92rem;color:var(--mut)}
.route{width:100%;height:auto;background:linear-gradient(135deg,#f4fce3,#e6fcf5);border-radius:18px}
.stops{counter-reset:s;list-style:none;padding:0}.stops li{position:relative;padding:.6rem 3rem .6rem .8rem;margin:.4rem 0;background:#fff;border-radius:14px;box-shadow:var(--sh)}
.stops li:before{counter-increment:s;content:counter(s);position:absolute;right:.7rem;top:.6rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--pri2);color:#fff;text-align:center;font-weight:800}
.road{display:inline-block;background:#f08c00;color:#fff;border-radius:6px;padding:0 .45rem;font-weight:800;font-size:.85rem;margin-inline-start:.3rem}
textarea{width:100%;min-height:120px;font:inherit;border:2px solid #c5d9ee;border-radius:14px;padding:.6rem}
input[type=text]{font:inherit;border:2px solid #c5d9ee;border-radius:12px;padding:.45rem .7rem;max-width:100%}
.qz{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.qz button{font:inherit;font-size:1.15rem;font-weight:800;color:#fff;border:0;border-radius:18px;padding:1.1rem .8rem;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.25);text-align:right}
.qz .c0{background:#e03131}.qz .c1{background:#1971c2}.qz .c2{background:#f08c00}.qz .c3{background:#2f9e44}.qz button[disabled]{opacity:.55}.qz button.ok{outline:6px solid #fab005;opacity:1}
.timer{font-size:2rem;font-weight:900;color:var(--pri)}.teams{display:flex;gap:.5rem;flex-wrap:wrap}.team{background:#fff;border-radius:14px;padding:.4rem .9rem;box-shadow:var(--sh);font-weight:800}.team.on{outline:4px solid #fab005}
.word{font-size:2rem;letter-spacing:.35rem;font-weight:900;direction:rtl;text-align:center;margin:1rem 0}
.keys{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}.keys button{font:inherit;font-weight:800;width:2.6rem;height:2.6rem;border-radius:10px;border:2px solid #a5c8ec;background:#fff;cursor:pointer}.keys button[disabled]{opacity:.35}
.fuel{display:flex;gap:.25rem;justify-content:center;font-size:1.6rem}
.mem{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}.mem button{min-height:90px;font:inherit;font-weight:700;border-radius:14px;border:0;background:linear-gradient(135deg,#1864ab,#0b7285);color:#fff;cursor:pointer;box-shadow:var(--sh);padding:.4rem}
.mem button.open{background:#fff;color:var(--ink);border:2px solid #74c0fc}.mem button.done{background:#d3f9d8;color:#1b5e2b}
.flip{perspective:900px;min-height:230px}.flip .in{position:relative;min-height:230px;transition:transform .6s;transform-style:preserve-3d}.flip.on .in{transform:rotateY(180deg)}
.flip .fa,.flip .ba{position:absolute;inset:0;backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem;text-align:center;box-shadow:var(--sh);font-size:1.2rem;font-weight:700}
.flip .fa{background:linear-gradient(135deg,var(--cc,#1864ab),#0b7285);color:#fff;font-size:1.6rem}.flip .ba{background:#fff;transform:rotateY(180deg);border-top:10px solid var(--cc,#1864ab)}
.big .flip .ba{font-size:2rem}
.cb{--cc:#1971c2}.cp{--cc:#d6336c}.cg{--cc:#2f9e44}.cy{--cc:#e8a400}
.deck{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.dk{background:#fff;border-radius:16px;padding:.8rem 1rem;box-shadow:var(--sh);border-right:8px solid var(--cc)}
.lock{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}.lock span{width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dee2e6;font-size:1.3rem}.lock span.on{background:#2f9e44;color:#fff}
.board{display:grid;grid-template-columns:repeat(6,1fr);gap:.35rem}.sq{min-height:74px;border-radius:12px;padding:.3rem;font-size:.78rem;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.08);position:relative}
.sq .n{font-weight:900;color:var(--pri)}.sq.q{background:#e7f5ff}.sq.fwd{background:#d3f9d8}.sq.back{background:#fff4e6}.sq.safe{background:#e6fcf5}.sq.start,.sq.end{background:#fff3bf}.sq .tk{position:absolute;bottom:2px;left:3px;font-size:1.2rem}
.slide{min-height:60vh;border-radius:28px;padding:2rem;background:radial-gradient(circle at 80% 20%,#74c0fc55,transparent 50%),linear-gradient(135deg,#fff,#e7f5ff);box-shadow:var(--sh);display:flex;flex-direction:column;justify-content:center}
.slide .se{font-size:4.5rem}.slide h2{font-size:2.2rem;margin:.3rem 0}.slide li{font-size:1.35rem;margin:.4rem 0}
table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}table.t th,table.t td{border:1px solid #d0e2f2;padding:.45rem .6rem;text-align:right;vertical-align:top}table.t th{background:#d0ebff}
.tblwrap{overflow-x:auto}
.pager{display:flex;justify-content:space-between;gap:.5rem;margin-top:2rem;flex-wrap:wrap}
footer{text-align:center;padding:1.5rem 1rem 2.5rem;color:var(--mut);font-size:.9rem}footer img{width:44px;height:44px;border-radius:50%;vertical-align:middle;margin-left:.4rem}
.stars{font-size:1.6rem;letter-spacing:.2rem}.score{font-weight:800}
.twin{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.twin button{font:inherit;font-size:1.15rem;font-weight:800;padding:1.2rem;border-radius:20px;border:0;color:#fff;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.2)}.twin .a{background:#1971c2}.twin .b{background:#2f9e44}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ftab td a{font-weight:700}
.note{background:#fff9db;border-right:6px solid #fab005;border-radius:12px;padding:.6rem .9rem;margin:.6rem 0}
.feel{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}.feel button{font:inherit;background:#fff;border:2px solid #c5d9ee;border-radius:16px;padding:.7rem;cursor:pointer}.feel button .fe{font-size:2.6rem;display:block}
@media (max-width:600px){h1{font-size:1.6rem}.hero h1{font-size:1.7rem}.hero .compass{font-size:3rem;opacity:.5}.qz,.twin{grid-template-columns:1fr}.board{grid-template-columns:repeat(3,1fr)}.brand span{font-size:.92rem}}

a.btn{display:inline-block;text-decoration:none}h1:focus{outline:none}
h1[tabindex]:focus,h1[tabindex]:focus-visible{outline:none}
@media (max-width:600px){.hero .compass{display:none}}
