
:root{--asphalt:#23262e;--asphalt2:#353a46;--red:#d62828;--blue:#1c5fb8;--yellow:#ffc300;--green:#2b9348;--ink:#1d2030;--muted:#4a5068;--bg:#f4f6fb;--card:#fff;--radius:18px;--fs:1}
*{box-sizing:border-box}
html{font-size:calc(17px * var(--fs))}
body{margin:0;font-family:Rubik,Heebo,"Noto Sans Hebrew",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
a{color:#0b4f9c}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:4px solid #ff8c00;outline-offset:3px;border-radius:6px}
.skip{position:absolute;right:-999px;top:0;background:#000;color:#fff;padding:.5rem 1rem;z-index:99}.skip:focus{right:1rem}
header.top{background:linear-gradient(180deg,var(--asphalt),var(--asphalt2));color:#fff;position:relative;box-shadow:0 4px 0 #f7c600}
header.top:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:repeating-linear-gradient(90deg,#fff 0 40px,transparent 40px 70px);opacity:.9}
.brand{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;flex-wrap:wrap}
.brand a{color:#fff;text-decoration:none;font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:.4rem}
.brand .mini{width:42px;height:42px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
.tools{margin-inline-start:auto;display:flex;gap:.35rem;flex-wrap:wrap}
.tools button{background:#fff;color:var(--asphalt);border:0;border-radius:999px;padding:.35rem .75rem;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;min-height:40px}
nav.main{overflow-x:auto}
nav.main ul{list-style:none;margin:0;padding:.2rem .6rem .7rem;display:flex;gap:.3rem;flex-wrap:wrap}
nav.main a{display:block;color:#fff;text-decoration:none;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.1);font-weight:600;font-size:.95rem}
nav.main a[aria-current=page]{background:var(--yellow);color:#222}
nav.main a:hover{background:rgba(255,255,255,.25)}
.crumbs{max-width:1180px;margin:.9rem auto 0;padding:0 1rem;font-size:.92rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem;padding:0;margin:0}.crumbs li+li:before{content:"‹";margin-inline-end:.3rem}
main{max-width:1180px;margin:0 auto;padding:1rem}
h1{font-size:2rem;line-height:1.25;margin:.4rem 0 .6rem}
h2{font-size:1.45rem;margin:1.6rem 0 .6rem}
.lead{font-size:1.12rem;color:#333a55;max-width:60rem}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;align-items:center;background:radial-gradient(circle at 20% 20%,#fff7d1,#ffe9a8 40%,#ffd36b);border-radius:28px;padding:1.4rem;box-shadow:0 10px 0 #e0a800,0 18px 30px rgba(0,0,0,.15);position:relative;overflow:hidden}
.hero h1{font-size:2.3rem;margin-top:0}
.hero .road{position:absolute;inset:auto 0 0 0;height:26px;background:var(--asphalt);}
.hero .road:after{content:"";position:absolute;left:0;right:0;top:11px;height:4px;background:repeating-linear-gradient(90deg,#fff 0 30px,transparent 30px 55px)}
.signs3d{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding-bottom:30px}
.pole{display:flex;flex-direction:column;align-items:center}
.pole svg{width:100%;max-width:130px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));animation:sway 4s ease-in-out infinite;transform-origin:50% 100%}
.pole:nth-child(2) svg{animation-delay:.6s}.pole:nth-child(3) svg{animation-delay:1.2s}
.pole:after{content:"";width:12px;height:46px;background:linear-gradient(90deg,#8a909c,#d7dbe2,#8a909c);border-radius:4px}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.btn{display:inline-flex;align-items:center;gap:.4rem;border:0;border-radius:14px;padding:.65rem 1.1rem;font:inherit;font-weight:800;cursor:pointer;text-decoration:none;min-height:44px;background:var(--blue);color:#fff;box-shadow:0 5px 0 #0f3f80;transition:transform .1s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0f3f80}
.btn.red{background:var(--red);box-shadow:0 5px 0 #8f1414}.btn.green{background:var(--green);box-shadow:0 5px 0 #1b6430}.btn.yellow{background:var(--yellow);color:#222;box-shadow:0 5px 0 #b38900}.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 #c9cfdc;border:2px solid #c9cfdc}
.btn.big{font-size:1.25rem;padding:.9rem 1.5rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.tile{display:block;text-decoration:none;color:var(--ink);background:#fff;border-radius:20px;padding:1rem;border:3px solid transparent;box-shadow:0 6px 0 #d4d9e6,0 10px 18px rgba(0,0,0,.08);transition:transform .15s}
.tile:hover{transform:translateY(-3px)}
.tile .em{font-size:2rem}.tile b{display:block;font-size:1.12rem}.tile small{color:var(--muted)}
.tile.y{border-color:#ffc300}.tile.m{border-color:#1c5fb8}.tile.t{border-color:#6a3fb5}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.feat{background:#fff;border-radius:20px;padding:1rem;box-shadow:0 6px 0 #d4d9e6;text-decoration:none;color:inherit;display:block}
.feat .em{font-size:2rem}
.tcard{background:#fff;border-radius:22px;padding:1rem;box-shadow:0 7px 0 #d4d9e6,0 12px 20px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:.35rem;position:relative;border-top:10px solid var(--tc,#1c5fb8)}
.tcard .sg{width:120px;align-self:center;filter:drop-shadow(0 6px 5px rgba(0,0,0,.3))}
.tcard .nm{font-weight:900;font-size:1.15rem;text-align:center}
.tcard .road{background:#eef3ff;border-radius:12px;padding:.4rem .6rem;font-size:.95rem}
.tcard .life{font-weight:800;font-size:1.08rem;color:#222}
.tcard .wr{font-size:.95rem;color:#3c4260;border-inline-start:4px solid var(--yellow);padding-inline-start:.5rem}
.tag{display:inline-block;font-size:.78rem;background:#f1f3f8;border-radius:999px;padding:.1rem .55rem;margin:.1rem;color:#333}
.rowbtns{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:auto}
.say{background:#fff3c4;border:2px solid #e6b800;border-radius:999px;padding:.25rem .7rem;font:inherit;font-weight:700;cursor:pointer;min-height:40px}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:#fff;border-radius:16px;padding:.7rem;box-shadow:0 4px 0 #d4d9e6;margin:.6rem 0 1rem}
.filters select,.filters input{font:inherit;padding:.4rem .6rem;border-radius:10px;border:2px solid #b8c0d6;min-height:42px}
.chip{border:2px solid #b8c0d6;background:#fff;border-radius:999px;padding:.3rem .7rem;font:inherit;cursor:pointer;min-height:40px}
.chip[aria-pressed=true]{background:var(--asphalt);color:#fff;border-color:var(--asphalt)}
.count{font-weight:700;color:var(--muted)}
dialog{border:0;border-radius:24px;max-width:min(560px,94vw);padding:1.2rem;box-shadow:0 20px 60px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(20,22,30,.6)}
.big .sg{width:200px}
.wheelbox{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:1.2rem;align-items:start}
.wheel{position:relative;aspect-ratio:1;max-width:340px}
.wheel svg{width:100%;transition:transform 2.6s cubic-bezier(.17,.67,.2,1);filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}
.wheel .ptr{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid var(--red);z-index:2}
.teams{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.team{background:#fff;border-radius:14px;padding:.4rem .8rem;border:3px solid #ddd;font-weight:700}
.team.on{border-color:var(--yellow);background:#fff8d6}
.panel{background:#fff;border-radius:20px;padding:1rem;box-shadow:0 6px 0 #d4d9e6;margin:.8rem 0}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.opt{font:inherit;font-size:1.08rem;font-weight:700;padding:.9rem;border-radius:16px;border:3px solid #b8c0d6;background:#fff;cursor:pointer;min-height:56px;text-align:right}
.opt.ok{background:#d3f9d8;border-color:var(--green)}.opt.no{background:#ffe3e3;border-color:var(--red)}
.quizsign{width:190px;display:block;margin:0 auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.3))}
.k .quizsign{width:240px}.k .opt{font-size:1.3rem;min-height:72px}
.hint{background:#e7f5ff;border-radius:12px;padding:.5rem .8rem;border-inline-start:6px solid var(--blue)}
.sortgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.sortcol h3{margin:.2rem 0 .5rem;font-size:1.05rem}
.sitem{display:flex;align-items:center;gap:.5rem;width:100%;font:inherit;font-weight:700;padding:.55rem;border-radius:14px;border:3px solid #b8c0d6;background:#fff;cursor:pointer;margin-bottom:.5rem;min-height:56px;text-align:right}
.sitem svg{width:52px;flex:none}
.sitem.sel{border-color:#ff8c00;background:#fff4e0}
.sitem.done{opacity:.85;cursor:default}
.c0{background:#d3f9d8!important;border-color:#2b9348!important}.c1{background:#d0ebff!important;border-color:#1c5fb8!important}.c2{background:#fff3bf!important;border-color:#e0a800!important}.c3{background:#f3d9fa!important;border-color:#9c36b5!important}
.builder{display:grid;grid-template-columns:1fr minmax(260px,360px);gap:1rem}
.builder fieldset{border:2px solid #d4d9e6;border-radius:14px;margin:0 0 .7rem;padding:.6rem}
.builder legend{font-weight:800}
.builder input[type=text],.builder textarea{width:100%;font:inherit;padding:.5rem;border-radius:10px;border:2px solid #b8c0d6}
.pick{display:flex;flex-wrap:wrap;gap:.35rem}
.pick button{font:inherit;font-size:1.4rem;min-width:46px;min-height:46px;border-radius:12px;border:2px solid #b8c0d6;background:#fff;cursor:pointer}
.pick button[aria-pressed=true]{border-color:#ff8c00;background:#fff4e0}
.preview{position:sticky;top:.5rem}
.embedbox{background:#23262e;color:#fff;border-radius:14px;padding:.8rem;margin-top:1rem}
.embedbox textarea{width:100%;font-family:monospace;font-size:.85rem;direction:ltr;border-radius:8px;padding:.4rem}
table.tbl{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden}
table.tbl th,table.tbl td{border:1px solid #d4d9e6;padding:.5rem .6rem;text-align:right;vertical-align:top}
table.tbl th{background:#e7f0ff}
.verify{display:inline-block;background:#fff0f0;color:#a4161a;border:1.5px solid #e03131;border-radius:999px;font-size:.78rem;font-weight:800;padding:0 .45rem;margin-inline-start:.3rem}
.files li{margin:.35rem 0}
.flabel{font-size:.8rem;background:#eef;border-radius:6px;padding:.05rem .4rem;margin-inline-start:.3rem}
.pn{display:flex;justify-content:space-between;gap:1rem;margin:2rem 0 1rem;flex-wrap:wrap}
footer.foot{background:var(--asphalt);color:#fff;margin-top:2rem;padding:1.2rem 1rem;text-align:center}
footer.foot a{color:#ffe066}
footer.foot img{width:56px;height:56px;border-radius:50%;vertical-align:middle;background:#fff}
.gw{font:inherit;background:#fff3bf;border:0;border-bottom:3px dotted #e0a800;border-radius:4px;padding:0 .15rem;cursor:pointer;color:inherit}
.glossbox{text-align:center}.glossbox .gem{font-size:4rem}.glossbox table{margin:.5rem auto}
.cert{text-align:center;background:linear-gradient(135deg,#fff7d1,#d3f9d8);border:6px double #e0a800;border-radius:24px;padding:1.4rem}
.notice{background:#fff8db;border-radius:14px;padding:.7rem 1rem;border-inline-start:6px solid #f59f00}
body.embed header.top,body.embed .crumbs,body.embed footer.foot,body.embed .pn,body.embed .embedbox,body.embed .noembed{display:none!important}
body.embed main{padding:.5rem}
body.band-t{--bg:#f3f1f8}body.band-t .hero{background:linear-gradient(135deg,#2b2f3d,#4b3f72);color:#fff;box-shadow:0 10px 0 #1a1c25}
body.band-m{--bg:#eef5ff}
.k .tcard .life{font-size:1.35rem}.k .tcard .sg{width:170px}
@media (max-width:820px){.hero{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,1fr)}.wheelbox,.builder{grid-template-columns:1fr}.sortgrid{grid-template-columns:1fr}.hero h1{font-size:1.8rem}h1{font-size:1.6rem}}
@media (max-width:480px){.tiles{grid-template-columns:1fr 1fr}.opts{grid-template-columns:1fr}.tile{padding:.7rem}}
@media print{header.top,.crumbs,footer.foot,.pn,.filters,.tools,.noprint,.embedbox{display:none!important}body{background:#fff}.tcard{box-shadow:none;border:1.5px dashed #888;break-inside:avoid}.builder{display:block}.builder form{display:none}}
@media (max-width:820px){nav.main ul{flex-wrap:nowrap}nav.main a{white-space:nowrap}}
