@font-face{font-family:"Rubik";src:url(fonts/rubik-hebrew.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";src:url(fonts/rubik-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#2b1d3a; --muted:#6b5a7d;
  --a:#e0457b; --a2:#ff8fb1; --b:#2a9d8f; --b2:#5ec8d8;
  --card:#ffffff; --bg1:#fff1f7; --bg2:#eaf7ff;
  --radius:22px; --shadow:0 10px 30px rgba(73,38,105,.14);
  --fs:clamp(16px, .55vw + 12px, 26px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Rubik","Assistant","Heebo",system-ui,sans-serif;color:var(--ink);font-size:var(--fs);line-height:1.45;
  background:radial-gradient(circle at 90% 0%,#ffd6e7 0,transparent 40%),radial-gradient(circle at 0% 100%,#cdeffd 0,transparent 45%),linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:4px solid #7b5cff;outline-offset:3px}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1em;padding:.7em clamp(12px,2vw,36px) .3em}
.brand h1{margin:0;font-size:clamp(28px,2.6vw,56px);font-weight:800;letter-spacing:-.5px;line-height:1.1;
  background:linear-gradient(90deg,var(--a),#8b5cf6,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{margin:.15em 0 0;color:var(--muted);font-size:.85em}
.tools{display:flex;flex-wrap:wrap;gap:.45em}
.tool{border:0;background:#fff;border-radius:999px;padding:.45em .9em;box-shadow:0 3px 10px rgba(73,38,105,.12);font-weight:600;font-size:.85em;white-space:nowrap;transition:transform .15s,background .2s}
.tool:hover{transform:translateY(-2px)}
.tool[aria-pressed="true"]{background:#2b1d3a;color:#fff}
#soundBtn[aria-pressed="true"]{background:#fff;color:var(--ink)}
#soundBtn[aria-pressed="false"]{background:#eee;color:#888}
#crazyBtn[aria-pressed="true"]{background:linear-gradient(90deg,#ff5fa2,#ffb03a,#7b5cff);color:#fff}

.layout{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,28px);padding:clamp(8px,1.4vw,28px) clamp(12px,2vw,36px)}
@media (min-width:1200px){
  .layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
  .teams{grid-column:1 / -1}
}

/* ---------- wheels ---------- */
.stage{background:rgba(255,255,255,.55);border-radius:var(--radius);padding:clamp(10px,1.4vw,24px);box-shadow:var(--shadow);backdrop-filter:blur(4px)}
.wheels{display:grid;grid-template-columns:minmax(0,1fr) clamp(34px,4.5vw,84px) minmax(0,1fr);align-items:center}
.wheel-box{margin:0;display:flex;flex-direction:column;align-items:center;gap:.35em;min-width:0}
.wheel-title{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:.3em .9em;border-radius:14px;color:#fff;text-align:center}
.wheel-title b{font-size:1.05em}
.wheel-title small{font-size:.72em;opacity:.95}
.wheel-title.a{background:linear-gradient(135deg,var(--a),#b33dc6)}
.wheel-title.b{background:linear-gradient(135deg,var(--b),#2f6fd6)}
.wheel-wrap{width:100%;aspect-ratio:248/228;position:relative}
.wheel{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 8px 14px rgba(60,20,90,.22))}
.wheel text{font-family:"Rubik",system-ui,sans-serif;font-weight:600;fill:#2b1d3a;pointer-events:none}
.wheel .emo{font-size:13px}
.wheels.small .wheel .lbl{display:none}
.wheels.small .wheel .emo{font-size:17px}
.readout{display:flex;align-items:center;justify-content:center;text-align:center;min-height:2.6em;width:100%;padding:.25em .5em;border-radius:14px;background:#fff;font-weight:700;font-size:1em;line-height:1.2;box-shadow:inset 0 0 0 3px currentColor}
.readout.a{color:var(--a)}
.readout.b{color:var(--b)}
.readout.landed{animation:pop .5s ease}
.gear-link{display:flex;flex-direction:column;align-items:center;gap:.3em;align-self:center;margin-top:-1.2em}
.gear{width:100%;max-width:90px;overflow:visible}
.link-word{font-size:.7em;font-weight:700;color:var(--muted);text-align:center;line-height:1.1}

.spin-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6em 1em;margin-top:clamp(10px,1.2vw,22px)}
.spin{border:0;border-radius:999px;padding:.45em 1.8em;font-size:clamp(26px,2.2vw,48px);font-weight:800;color:#fff;
  background:linear-gradient(90deg,var(--a),#8b5cf6,var(--b));box-shadow:0 8px 0 #5b2b86,0 14px 24px rgba(91,43,134,.35);transition:transform .1s,box-shadow .1s}
.spin:hover{transform:translateY(-2px)}
.spin:active{transform:translateY(6px);box-shadow:0 2px 0 #5b2b86,0 6px 12px rgba(91,43,134,.3)}
.spin:disabled{filter:grayscale(.4) brightness(.95);cursor:wait}
.respin{border:2px solid var(--b);background:#fff;color:var(--b);border-radius:999px;padding:.35em 1em;font-weight:600;font-size:.8em}
.respin:disabled{opacity:.4;cursor:not-allowed}

/* ---------- result ---------- */
.result{min-width:0}
.welcome,.quiz{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(14px,1.6vw,30px)}
.welcome h2{margin:0 0 .4em;font-size:1.35em}
.welcome ol{margin:0;padding-inline-start:1.3em;display:grid;gap:.45em}
.ta{color:var(--a)} .tb{color:var(--b)}
.hint{margin:.9em 0 0;padding:.6em .8em;background:#fff6dc;border-radius:12px;font-size:.9em}
.q-card{position:relative;background:linear-gradient(135deg,#fff0f6,#eef9ff);border-radius:18px;padding:1em 1.1em .9em;border:3px dashed #c9b6ee}
.q-card.pop{animation:pop .55s ease}
.q-label{display:inline-block;background:#2b1d3a;color:#fff;border-radius:999px;padding:.1em .8em;font-size:.75em;font-weight:700}
.q-card.crazy .q-label{background:linear-gradient(90deg,#ff5fa2,#ffb03a,#7b5cff)}
.question{margin:.35em 0 0;font-size:clamp(24px,1.9vw,44px);line-height:1.3;font-weight:800}
.question mark{border-radius:10px;padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.question mark.a{background:#ffd3e2;color:#a3184a}
.question mark.b{background:#c9f0ea;color:#16675d}
.task-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5em;margin:1em 0 .5em}
.task-head h3{margin:0;font-size:1.15em}
.show-all{border:0;border-radius:999px;padding:.45em 1.1em;font-weight:700;background:#ffcf4d;box-shadow:0 4px 0 #d79e00;font-size:.9em}
.show-all[aria-pressed="true"]{background:#2b1d3a;color:#fff;box-shadow:0 4px 0 #000}
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:.55em;counter-reset:t}
.task{counter-increment:t;background:#faf7ff;border-radius:16px;padding:.6em .8em;border-inline-start:8px solid var(--c,#8b5cf6)}
.task-row{display:flex;align-items:flex-start;gap:.6em}
.task-row::before{content:counter(t);flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--c,#8b5cf6);color:#fff;font-weight:800;font-size:.9em;margin-top:.05em}
.task-text{flex:1;min-width:0;font-weight:600}
.task-text small{display:block;font-weight:400;color:var(--muted);font-size:.8em}
.peek{flex:none;border:0;background:#fff;border-radius:999px;padding:.2em .7em;font-size:.8em;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.answer{margin:.5em 0 .1em;padding:.55em .8em;background:#fff;border-radius:12px;border:2px solid #ece4fb;font-size:.95em}
.answer[hidden]{display:none}
.answer.show{animation:fadein .35s ease}
.answer ul{margin:.2em 0 0;padding-inline-start:1.2em}
.answer b{color:#5b2b86}

.foot{text-align:center;color:var(--muted);font-size:.75em;padding:.5em 1em 1.4em}

@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{transform:scale(1.06)}}

@media (max-width:600px){
  .tool span{display:none}
  .tool{font-size:1.05em;padding:.35em .7em}
  .top{justify-content:center;text-align:center}
  .readout{font-size:.85em;min-height:3.2em}
  .wheel-title{padding:.25em .6em}
  .gear-link{margin-top:-2.4em}
  .link-word{font-size:.6em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- v2: counter + quiz ---------- */
.counter{background:#fff;border-radius:999px;padding:.35em 1em;box-shadow:var(--shadow);font-weight:700;white-space:nowrap}
.counter b{color:#8b5cf6;font-size:1.15em}
.counter.bump b{display:inline-block;animation:pulse .4s ease}
.q-card.silly-q .q-label{background:linear-gradient(90deg,#ff5fa2,#ffb03a,#7b5cff)}
.steps{display:flex;gap:.35em;justify-content:center;margin:.9em 0 .2em;flex-wrap:wrap}
.steps i{width:clamp(12px,1vw,20px);height:clamp(12px,1vw,20px);border-radius:50%;background:#e4dcf2;display:block;transition:background .3s}
.steps i.ok{background:#22b07d} .steps i.no{background:#f06a6a} .steps i.cur{background:#8b5cf6;transform:scale(1.25)}
.qbox{margin-top:.8em}
.qtext{margin:0 0 .6em;font-size:clamp(20px,1.45vw,34px);line-height:1.3}
.qtext small{display:block;font-size:.62em;color:var(--muted);font-weight:500;margin-top:.2em}
.opts{display:grid;gap:.55em}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;text-align:start;border:3px solid #e2d8f3;background:#fff;border-radius:16px;padding:.7em .9em;font-size:clamp(17px,1.1vw,27px);line-height:1.35;font-weight:600;color:var(--ink);box-shadow:0 4px 0 #e2d8f3;transition:transform .08s,border-color .2s,background .2s;min-height:2.6em}
.opts.two .opt{text-align:center;font-size:clamp(20px,1.4vw,32px);font-weight:800}
.opt:hover:not(:disabled){border-color:#b79ef0;transform:translateY(-2px)}
.opt:disabled{cursor:default}
.opt.right{border-color:#22b07d;background:#e6f8f0;box-shadow:0 4px 0 #22b07d}
.opt.wrong{border-color:#f06a6a;background:#fde9e9;box-shadow:0 4px 0 #f06a6a;animation:shake .4s}
.opt.dim{opacity:.55}
.opt .mark{float:left;margin-inline-start:.4em}
.ruler{display:flex;align-items:center;gap:.4em;margin-top:.45em;font-size:.85em;font-weight:800;direction:rtl}
.ruler .bar{height:14px;border-radius:4px;background:repeating-linear-gradient(90deg,#f5c542 0 9px,#d9a400 9px 11px);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.ruler.grow .bar{width:clamp(70px,9vw,170px)}
.ruler .val{opacity:0;transition:opacity .3s .7s;color:#16675d;white-space:nowrap}
.ruler.grow .val{opacity:1}
.ruler.broken .bar{width:clamp(60px,6vw,110px);background:repeating-linear-gradient(90deg,#bbb 0 9px,#999 9px 11px);transform-origin:right center;animation:snap .7s ease forwards}
.ruler.broken .val{opacity:1;color:#c0392b;font-size:1.2em}
.rule{margin:.6em 0 0;padding:.5em .8em;background:#fff6dc;border-radius:12px;font-weight:700}
.fb{margin-top:.8em;padding:.7em .9em;border-radius:14px;font-size:clamp(17px,1.05vw,26px);line-height:1.4;animation:fadein .3s ease}
.fb.ok{background:#e6f8f0;color:#0f5e43}
.fb.no{background:#fff1e6;color:#8a3b12}
.fb b{font-weight:800}
.nav-row{display:flex;justify-content:flex-end;margin-top:.8em}
.next{border:0;border-radius:999px;padding:.55em 1.5em;font-size:clamp(18px,1.2vw,28px);font-weight:800;color:#fff;background:linear-gradient(90deg,var(--a),#8b5cf6);box-shadow:0 5px 0 #5b2b86}
.next:active{transform:translateY(3px);box-shadow:0 2px 0 #5b2b86}
.summary{text-align:center;padding:.4em 0}
.summary .big{font-size:clamp(34px,3vw,64px);font-weight:900;margin:.1em 0}
.confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes snap{0%{transform:rotate(0)}50%{transform:rotate(-14deg)}100%{transform:rotate(-24deg) translateY(4px);opacity:.75}}
@media (max-width:600px){
  .opts.two{grid-template-columns:1fr}
  .counter{font-size:.9em;padding:.3em .8em}
  .tools{flex-wrap:wrap;justify-content:center}
}

.qtext mark{border-radius:10px;padding:0 .2em;background:#c9f0ea;color:#16675d;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.qtext .nw{white-space:nowrap}