/* בלש המספרים — styles. Mobile first; big touch targets; RTL with math kept LTR. */
:root{
  --navy:#1d3557;--navy2:#2b4a7a;--ink:#1f2a44;--muted:#667085;--line:#e3e8f2;
  --paper:#ffffff;--sky:#eaf2ff;
  --yellow:#ffd23f;--yellow-d:#d9a800;
  --orange:#ff8c42;--orange-d:#d9691f;
  --green:#22b573;--green-d:#178a56;--green-bg:#e3f8ee;
  --blue:#3a86ff;--blue-d:#1f5fc7;--blue-bg:#e6efff;
  --amber:#ffb703;--amber-bg:#fff4d6;--amber-d:#c98a00;
  --red:#ef476f;--purple:#7b4dff;
  --kid:#3a86ff;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --hand:"Chalkboard SE","Comic Sans MS","Segoe Print","Bradley Hand",cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:"Varela Round","Arial Hebrew","SF Hebrew",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);
  background:var(--sky) radial-gradient(120% 60% at 50% -10%,#d7e6ff 0%,var(--sky) 60%) fixed;touch-action:manipulation;overflow-x:hidden}
button{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.emo{font-family:var(--emoji);font-weight:400;line-height:1.1}
.ex{direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-weight:700;letter-spacing:.3px}
.ex .dot{font-weight:900;padding:0 .08em}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.top .in{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
.top h1{flex:1;margin:0;font-size:19px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:20px;cursor:pointer;display:grid;place-items:center;padding:0;font-family:var(--emoji)}
.ib:active{transform:scale(.92)}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-weight:700;background:rgba(255,255,255,.14);color:#fff;white-space:nowrap}
.pill.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.25)}}
main{max-width:820px;margin:0 auto;padding:12px 12px calc(40px + env(safe-area-inset-bottom))}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;padding:13px 22px;font-size:19px;font-weight:700;cursor:pointer;color:#fff;background:var(--orange);box-shadow:0 5px 0 var(--orange-d);transition:transform .08s,box-shadow .08s;-webkit-user-select:none;user-select:none;text-decoration:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-d)}
.btn.green{background:var(--green);box-shadow:0 5px 0 var(--green-d)}
.btn.green:active{box-shadow:0 1px 0 var(--green-d)}
.btn.blue{background:var(--blue);box-shadow:0 5px 0 var(--blue-d)}
.btn.blue:active{box-shadow:0 1px 0 var(--blue-d)}
.btn.navy{background:var(--navy);box-shadow:0 5px 0 #0f1f36}
.btn.ghost{background:#eef2fb;color:var(--ink);box-shadow:0 5px 0 #d3dbec}
.btn.ghost:active{box-shadow:0 1px 0 #d3dbec}
.btn.sm{font-size:16px;padding:9px 14px;border-radius:13px}
.btn.big{font-size:22px;padding:16px 30px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.center{justify-content:center}
.card{background:var(--paper);border-radius:22px;box-shadow:0 8px 24px rgba(29,53,87,.12);padding:16px}
.stack>*+*{margin-top:12px}
.spk{display:none;border:0;background:var(--blue-bg);border-radius:50%;width:44px;height:44px;font-size:21px;cursor:pointer;flex:none;font-family:var(--emoji);padding:0;place-items:center}
body.canspeak .spk{display:grid}
.spk.sm{width:34px;height:34px;font-size:16px}
.spk:active{transform:scale(.92)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:15px;padding:4px}

/* story + steps */
.prob{background:var(--paper);border-radius:22px;box-shadow:0 8px 24px rgba(29,53,87,.12);padding:14px 14px 18px;overflow:hidden}
.story{display:flex;gap:10px;align-items:flex-start;background:#fffbea;border:2px solid #ffe9a8;border-radius:18px;padding:12px 14px;font-size:21px;line-height:1.55}
.story .txt{flex:1}
.story .sq{display:block;margin-top:6px;font-weight:700;border-radius:6px;transition:background .3s,box-shadow .3s}
.story .sq.hl{background:#ffe066;box-shadow:0 0 0 4px #ffe066}
.robiw{display:flex;gap:10px;align-items:center;margin-top:12px}
.robiw .av{font-size:44px;font-family:var(--emoji);flex:none;animation:robi 2.4s ease-in-out infinite}
@keyframes robi{50%{transform:translateY(-4px) rotate(-4deg)}}
.bub{position:relative;border-radius:16px;padding:10px 14px;font-size:18.5px;line-height:1.5;background:var(--blue-bg)}
.bub.robi{background:#efe9ff;border:2px solid #d9ccff;font-size:20px}
.bub.coach{background:var(--blue-bg)}
.bub.warn{background:var(--amber-bg);border:2px solid #ffe2a1}
.bub.good{background:var(--green-bg);border:2px solid #bdebd4}
.bub .who{font-family:var(--emoji);margin-left:6px}
.steps{margin-top:6px}
.step{margin-top:14px;animation:rise .35s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.step .q{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;margin-bottom:10px;line-height:1.45}
.step .q .qt{flex:1}
.step .fb:empty{display:none}
.step .fb{margin-top:10px}
.step.done{animation:none}
.step.done .q{font-size:16px;color:var(--muted);font-weight:600;margin-bottom:4px}
.step.done .q .spk{display:none}
.sum{display:inline-block;background:var(--green-bg);color:#145c3b;border-radius:12px;padding:6px 12px;font-size:17.5px;font-weight:700}
.note{margin-top:14px;background:var(--green-bg);border:2px solid #bdebd4;border-radius:16px;padding:10px 14px;font-size:19px;line-height:1.55}
.note b{color:#145c3b}

/* options */
.opts{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.opts.c2{grid-template-columns:1fr 1fr}.opts.c3{grid-template-columns:1fr 1fr 1fr}.opts.c4{grid-template-columns:repeat(4,1fr)}}
.opts.c2s{grid-template-columns:1fr 1fr}
.opt{border:0;border-radius:16px;padding:14px 16px;font-size:19px;font-weight:600;background:#f1f5fd;box-shadow:0 4px 0 #d3dbec;cursor:pointer;text-align:center;line-height:1.4;color:var(--ink);transition:transform .08s,background .2s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 #d3dbec}
.opt.ok{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-d)}
.opt.no{background:#fff1d0;color:#8a6200;box-shadow:0 4px 0 #f2d48a;animation:shake .35s}
.opt[disabled]{cursor:default}
.opt[disabled]:not(.ok):not(.no){opacity:.55}
@keyframes shake{25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}

/* keypad */
.kpw{display:flex;flex-direction:column;align-items:center;gap:10px}
.dispw{display:flex;align-items:center;gap:10px;justify-content:center}
.disp{min-width:150px;height:62px;border-radius:16px;background:#fff;border:3px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;letter-spacing:2px;padding:0 14px;color:var(--navy);transition:border-color .2s,background .2s}
.disp .cur{display:inline-block;width:3px;height:34px;background:var(--blue);margin-inline-start:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.disp.good{border-color:var(--green);background:var(--green-bg)}
.disp.bad{border-color:var(--amber);background:var(--amber-bg);animation:shake .35s}
.disp.locked .cur{display:none}
.unit{font-size:19px;font-weight:700;color:var(--muted)}
.kp{display:grid;grid-template-columns:repeat(3,74px);gap:9px;direction:ltr}
.kp button{height:58px;border:0;border-radius:14px;background:#f1f5fd;box-shadow:0 4px 0 #d3dbec;font-size:27px;font-weight:800;cursor:pointer;color:var(--navy)}
.kp button:active{transform:translateY(3px);box-shadow:0 1px 0 #d3dbec}
.kp button.go{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-d);font-size:16px;white-space:nowrap;padding:0 2px}
.kp button.go[disabled]{opacity:.4}
.kp button.del{font-family:var(--emoji);font-size:24px}
.kpw.locked .kp{opacity:.4;pointer-events:none}
@media (min-width:560px){.kp{grid-template-columns:repeat(3,84px)}.kp button{height:62px}}
.helpb{margin-top:10px;text-align:center}

/* pause card */
.pause{margin-top:10px;background:#fff4f6;border:2px solid #ffc9d6;border-radius:18px;padding:14px;text-align:center;font-size:19px;line-height:1.55}
.pause .ico{font-size:42px;font-family:var(--emoji)}

/* simulation: containers */
.sim{margin-top:14px;background:#f6f9ff;border-radius:18px;padding:12px;border:2px dashed #cfdcf5}
.sim:empty{display:none}
.sim .lbl{font-size:16px;color:var(--muted);font-weight:700;margin-bottom:8px}
.conts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cont{position:relative;background:#fff;border-radius:14px;padding:6px 7px 8px;box-shadow:0 3px 0 rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;gap:4px;animation:pop .3s ease-out both}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.cont .hd{font-size:13px;font-weight:800;color:#5b4a00;white-space:nowrap}
.cont .ct{font-size:13px;font-weight:800;direction:ltr}
.cont.bus{background:linear-gradient(#ffd54a,#ffb703);border-radius:16px 16px 10px 10px;padding:7px 8px 16px;box-shadow:0 3px 0 #c98a00}
.cont.bus::after{content:"";position:absolute;bottom:-7px;left:14px;width:14px;height:14px;border-radius:50%;background:#333;box-shadow:calc(var(--w,80px) - 28px) 0 0 #333}
.cont.box{background:linear-gradient(#e6b77e,#d39a5a);border-radius:8px;box-shadow:0 3px 0 #a87038}
.cont.box .hd{color:#4a2d0f}
.cont.small{background:#fff;border:2px solid #dbe5f7}
.cont.empty{opacity:.75}
.cont.partial{outline:3px dashed var(--amber);outline-offset:2px}
.cont.ghost{opacity:.4}
.seats{display:grid;grid-template-columns:repeat(var(--cols,10),var(--sz,9px));gap:2px}
.s{width:var(--sz,9px);height:var(--sz,9px);border-radius:50%;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:background .25s,transform .25s}
.s.f{background:var(--kid);box-shadow:none}
.cont.box .s{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(80,40,0,.25)}
.cont.box .s.f{background:#e63946;box-shadow:none}
.slots{display:grid;grid-template-columns:repeat(var(--cols,5),30px);gap:3px}
.slot{width:30px;height:30px;border-radius:9px;background:#eef3fc;display:grid;place-items:center;font-size:21px;font-family:var(--emoji);transition:background .25s}
.slot.f{background:#fff7d6}
.more{align-self:center;font-weight:700;color:var(--muted);font-size:16px;padding:8px}
.wait{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.wait .wl{font-weight:800;color:#b42345;font-size:17px}
.crowd{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;justify-content:center;max-width:100%}
.crowd .em{font-size:24px;font-family:var(--emoji);line-height:1}
.crowd .ems{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;max-width:330px}
.b100,.b10,.b1{background-image:radial-gradient(circle,var(--dc,#ef476f) 3.2px,transparent 3.6px);background-size:10px 10px;border-radius:4px}
.b100{width:100px;height:100px;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.b10{width:100px;height:10px}
.b1{height:10px}
.status{margin-top:10px;font-size:19px;font-weight:700;text-align:center;line-height:1.5;min-height:1.5em}
.status .sub{display:block;font-weight:600;font-size:17px;color:var(--muted)}
.mctl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.mctl .n{font-size:28px;font-weight:800;min-width:46px;text-align:center}
.round{width:58px;height:58px;border-radius:50%;border:0;font-size:30px;font-weight:800;cursor:pointer;background:var(--blue);color:#fff;box-shadow:0 4px 0 var(--blue-d)}
.round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--blue-d)}
.round.minus{background:#94a3b8;box-shadow:0 4px 0 #64748b}
.round[disabled]{opacity:.35}

/* number line */
.nlw{margin-top:12px;background:#f6f9ff;border-radius:18px;padding:8px 6px;direction:ltr}
.nlw svg{width:100%;height:auto;display:block;overflow:visible}
.nl-axis{stroke:#2c6aa0;stroke-width:5;stroke-linecap:round}
.nl-tick{stroke:#2c6aa0;stroke-width:3}
.nl-tick.minor{stroke-width:2;opacity:.6}
.nl-lab{font-size:30px;fill:#55627a;text-anchor:middle;font-weight:700;font-family:Arial,sans-serif}
.nl-land{font-size:34px;fill:#1f5fc7;text-anchor:middle;font-weight:800;font-family:Arial,sans-serif}
.nl-flag{fill:#e63946}
.nl-flagt{font-size:34px;fill:#c1121f;text-anchor:middle;font-weight:800;font-family:Arial,sans-serif}
.nl-arc{fill:none;stroke:#ff8c42;stroke-width:5;stroke-linecap:round}
.nl-arc.small{stroke-width:3.5}
.nl-over{fill:#ffb70355;stroke:#e09e00;stroke-width:2}
.nl-ball{font-size:52px;text-anchor:middle;font-family:var(--emoji)}
.jctl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px;direction:rtl}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px;direction:ltr}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;background:#fff1e6;color:#a34a00;font-weight:800;font-size:15px}

/* equal groups */
.grps{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.grp{position:relative;background:#fff;border:3px solid #dbe5f7;border-radius:18px;padding:10px 8px;cursor:pointer;text-align:center;transition:border-color .2s,transform .1s;animation:pop .3s ease-out both}
.grp:active{transform:scale(.97)}
.grp .gi{font-size:30px;font-family:var(--emoji)}
.grp .its{font-size:21px;font-family:var(--emoji);line-height:1.25;word-break:break-all}
.grp .gv{font-size:22px;font-weight:800;color:var(--navy)}
.grp.on{border-color:var(--green);background:#f3fcf7}
.grp .tot{position:absolute;top:-12px;left:-8px;background:var(--green);color:#fff;border-radius:999px;padding:2px 10px;font-weight:800;font-size:17px;box-shadow:0 2px 0 var(--green-d);direction:ltr}
.run{margin-top:10px;text-align:center;font-size:22px;font-weight:800;color:var(--green-d);direction:ltr;min-height:1.4em}

/* sharing */
.pile{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;font-size:26px;font-family:var(--emoji);min-height:34px;padding:8px;background:#fff;border-radius:14px;border:2px dashed #e3d3b0}
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px}
.plate{background:#fff;border-radius:16px;border:2px solid #dbe5f7;padding:8px;text-align:center}
.plate .who{font-size:30px;font-family:var(--emoji)}
.plate .got{font-size:22px;font-family:var(--emoji);min-height:30px;line-height:1.25;word-break:break-all}

/* place value */
.blocks{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;justify-content:center;margin-top:12px;padding:10px;background:#f6f9ff;border-radius:18px}
.bgrp{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;padding:6px;border-radius:12px;border:3px dashed transparent;position:relative;transition:border-color .3s,background .3s}
.bgrp.mark{border-color:#c98a00;background:#fff6db}
.bgrp.mark.rest{border-color:#e63946;background:#fff0f2}
.bgrp .tag{position:absolute;top:-14px;right:6px;background:#fff;border-radius:999px;padding:0 8px;font-size:14px;font-weight:800;color:#8a5a00;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.bgrp.rest .tag{color:#b42345}
.flat{width:84px;height:84px;--dc:#3a86ff;background-image:radial-gradient(circle,var(--dc) 2.7px,transparent 3.1px);background-size:8.4px 8.4px;border:2px solid #1f5fc7;border-radius:4px;background-color:#fff}
.rod{width:12px;height:84px;--dc:#22b573;background-image:radial-gradient(circle,var(--dc) 3px,transparent 3.4px);background-size:12px 8.4px;border:2px solid #178a56;border-radius:4px;background-color:#fff}
.unit1{width:12px;height:12px;border-radius:3px;background:#ff8c42;border:2px solid #d9691f}
.units{display:grid;grid-template-columns:repeat(3,12px);gap:3px;align-content:end}

/* book-like table */
.tblw{overflow-x:auto;margin-top:12px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:2px solid #4a7fb5;border-radius:16px;overflow:hidden;background:#fff;table-layout:fixed}
.tbl th{background:#cfe3f5;color:#14365d;font-size:14px;padding:7px 3px;border-bottom:2px solid #4a7fb5;border-left:1px solid #9cbad8;line-height:1.25;word-break:break-word;hyphens:auto}
.tbl td{text-align:center;font-size:19px;padding:5px 3px;border-bottom:1px solid #b7cde3;border-left:1px solid #b7cde3;height:54px}
.tbl tr:last-child td{border-bottom:0}
.tbl th:last-child,.tbl td:last-child{border-left:0}
.tbl td.wk{font-weight:700;font-size:18px}
.tbl td.vis{font-weight:800;font-size:21px}
.tbl tr.exrow td{background:#f4f8fd}
.extag{display:inline-block;background:#4a7fb5;color:#fff;font-size:12px;border-radius:999px;padding:1px 8px;margin-inline-start:4px;vertical-align:middle}
.cell{width:100%;min-height:44px;border:2px dashed #9cbad8;border-radius:12px;background:#f7fbff;font-size:22px;font-weight:800;color:#9cbad8;cursor:pointer}
.cell.done{border:0;background:transparent;color:#1d3557;font-family:var(--hand);font-size:25px;cursor:default}
.cell.wrongv{border:2px solid var(--amber);background:var(--amber-bg);color:#8a6200}
.cell[disabled]{opacity:.45;cursor:default}
.hand{font-family:var(--hand);font-size:25px;color:#1d3557}
.cell.yes{color:var(--green-d)}
.cell.nope{color:#c1121f}

/* bottom sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(15,25,45,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{background:#fff;width:100%;max-width:760px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:14px 14px calc(22px + env(safe-area-inset-bottom));animation:up .25s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.6}}
.sh-hd{display:flex;align-items:center;gap:8px;font-size:19px}
.sh-hd b{flex:1}
.sh-hd .x{background:#eef2fb;color:var(--ink)}

/* bar model */
.barm{margin-top:10px;background:#fff;border-radius:14px;padding:10px;border:2px solid #e3e8f2}
.barm .r{display:flex;align-items:center;gap:8px;margin:6px 0}
.barm .nm{width:64px;font-size:15px;font-weight:700;color:var(--muted);flex:none}
.barm .bars{flex:1;display:flex;gap:3px}
.barm .sg{height:38px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;min-width:44px}
.barm .sg.a{background:#3a86ff}.barm .sg.b{background:#ff8c42}.barm .sg.t{background:#7b4dff}
.barm .sg.u{background:repeating-linear-gradient(45deg,#ffd23f,#ffd23f 8px,#ffe27a 8px,#ffe27a 16px);color:#5b4a00}
.barm .sg.gone{background:repeating-linear-gradient(45deg,#cbd5e1,#cbd5e1 8px,#e2e8f0 8px,#e2e8f0 16px);color:#475569;text-decoration:line-through}

/* home */
.hero{display:flex;align-items:center;gap:14px}
.hero .av{font-size:58px;font-family:var(--emoji);flex:none}
.hero h2{margin:0;font-size:26px}
.hero .motto{margin-top:4px;font-size:17px;font-weight:700;color:#8a5a00;background:#fff4d6;display:inline-block;border-radius:10px;padding:3px 10px}
.rank{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:16px;font-weight:700;color:var(--muted)}
.bar{height:12px;background:#e4ebf7;border-radius:99px;overflow:hidden;flex:1}
.bar>i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#ffd23f,#ff8c42);transition:width .7s}
.cases{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
@media (min-width:600px){.cases{grid-template-columns:1fr 1fr}}
.case{position:relative;display:flex;gap:12px;align-items:center;text-align:start;border:0;cursor:pointer;background:#f9e7b8;border-radius:6px 18px 18px 18px;padding:18px 14px 14px;box-shadow:0 5px 0 #d9b968;color:#3d2b00;transition:transform .1s}
.case::before{content:attr(data-tab);position:absolute;top:-14px;right:0;background:#f9e7b8;border-radius:10px 10px 0 0;padding:2px 14px 0;font-size:14px;font-weight:800;color:#7a5a00}
.case:active{transform:translateY(3px);box-shadow:0 2px 0 #d9b968}
.case .ic{font-size:40px;font-family:var(--emoji);flex:none;width:52px;text-align:center}
.case .t{font-size:20px;font-weight:800}
.case .sub{font-size:15px;margin-top:2px;color:#6b5200}
.case .pr{font-size:14px;margin-top:6px;font-weight:700;color:#7a5a00}
.case.locked{filter:grayscale(.9);opacity:.6;cursor:default}
.case.solved{background:#d9f2e4;box-shadow:0 5px 0 #9fd6b8;color:#0f3d26}
.case.solved::before{background:#d9f2e4;color:#1f6b45}
.case.solved .sub,.case.solved .pr{color:#2a6b4a}
.case .stamp{position:absolute;left:12px;top:10px;transform:rotate(-12deg);border:3px solid #1f9a60;color:#1f9a60;border-radius:10px;padding:0 8px;font-weight:900;font-size:16px;background:rgba(255,255,255,.6)}
.case.next{outline:4px solid #ff8c42;outline-offset:3px;animation:glow 1.8s ease-in-out infinite}
@keyframes glow{50%{outline-color:#ffd23f}}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.tool{border:0;cursor:pointer;background:#fff;border-radius:18px;padding:12px 6px;box-shadow:0 4px 0 #d3dbec;text-align:center;font-size:15px;font-weight:700;color:var(--ink)}
.tool .emo{display:block;font-size:30px;margin-bottom:4px}
.tool:active{transform:translateY(3px);box-shadow:0 1px 0 #d3dbec}

/* case screen */
.chead{display:flex;gap:12px;align-items:center}
.chead .ic{font-size:50px;font-family:var(--emoji)}
.chead h2{margin:0;font-size:24px}
.missions{display:grid;gap:12px;margin-top:14px}
.mis{display:flex;align-items:center;gap:12px;border:0;cursor:pointer;background:#fff;border-radius:18px;padding:14px;box-shadow:0 4px 0 #d3dbec;text-align:start;color:var(--ink)}
.mis:active{transform:translateY(3px);box-shadow:0 1px 0 #d3dbec}
.mis .num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--blue-bg);display:grid;place-items:center;font-weight:800;font-size:19px;color:var(--blue-d)}
.mis .t{font-size:19px;font-weight:800}
.mis .d{font-size:15px;color:var(--muted);margin-top:2px}
.mis .st{margin-inline-start:auto;font-family:var(--emoji);font-size:18px;white-space:nowrap}
.mis.done .num{background:var(--green);color:#fff}
.mis.locked{opacity:.5;cursor:default}
.mis.next{outline:3px solid #ff8c42;outline-offset:2px}
.rulecard{margin-top:16px;background:#fffbea;border:2px dashed #e0c25a;border-radius:18px;padding:14px;font-size:18.5px;line-height:1.55}
.rulecard .rt{font-weight:800;color:#8a5a00;margin-bottom:4px}
.rulecard.locked{color:var(--muted);text-align:center}

/* play */
.phead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots i{width:13px;height:13px;border-radius:50%;background:#cfdcf5}
.dots i.on{background:var(--orange);transform:scale(1.2)}
.dots i.ok{background:var(--green)}
.nextw{margin-top:16px;text-align:center}
.result{text-align:center}
.result .ico{font-size:64px;font-family:var(--emoji)}
.result h2{margin:6px 0;font-size:26px}
.stars{font-size:44px;font-family:var(--emoji);letter-spacing:4px}
.stars .off{filter:grayscale(1);opacity:.3}

/* intro */
.intro{text-align:center}
.intro .ico{font-size:72px;font-family:var(--emoji)}
.intro h2{font-size:26px;margin:8px 0}
.intro p{font-size:19px;line-height:1.6;margin:10px 0}
.intro input{font:inherit;font-size:24px;padding:12px 16px;border-radius:16px;border:3px solid var(--blue);width:100%;max-width:320px;text-align:center}
.motto-big{font-size:26px;font-weight:900;color:var(--navy);background:#fff4d6;border-radius:18px;padding:14px;margin:14px 0}

/* notebook + parent */
.nb{display:grid;gap:12px}
.nb .rulecard{margin-top:0}
.ptext{font-size:17px;line-height:1.65}
.ptext h3{margin:18px 0 6px;font-size:19px}
.ptext ul{margin:6px 0;padding-inline-start:22px}
.ptext li{margin:4px 0}
.ptbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
.ptbl td,.ptbl th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:start}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:17px}
.setrow input[type=text]{font:inherit;font-size:17px;padding:6px 10px;border-radius:10px;border:2px solid var(--line);width:150px}
.toggle{width:58px;height:32px;border-radius:99px;border:0;background:#cbd5e1;position:relative;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:right .2s}
.toggle.on{background:var(--green)}
.toggle.on::after{right:29px}

/* certificate */
.cert{background:#fffdf3;border:6px double #c9a227;border-radius:20px;padding:22px;text-align:center}
.cert .seal{font-size:70px;font-family:var(--emoji)}
.cert h2{font-size:28px;margin:6px 0;color:#7a5a00}
.cert .who{font-size:30px;font-weight:900;color:var(--navy);margin:8px 0}
.cert ol{text-align:start;font-size:17px;line-height:1.6}

/* toast, confetti, modal */
#toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;background:var(--navy);color:#fff;border-radius:16px;padding:12px 18px;font-size:17px;font-weight:700;z-index:80;transition:all .3s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90;width:100%;height:100%}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}}
@media print{
  .top,#toast,#confetti,.noprint{display:none!important}
  body{background:#fff}
  main{padding:0}
}

/* keypad folded while the answer is acted out */
.kpw.mini .kp{display:none}
.kpw.mini .disp{height:50px;font-size:28px;min-width:110px}
/* small-scale items (emoji) inside a container */
.it{font-style:normal;display:block;opacity:0;transform:scale(.3);transition:opacity .22s,transform .22s}
.it.f{opacity:1;transform:none}
.crowd.sm .b100{width:60px;height:60px;background-size:6px 6px;background-image:radial-gradient(circle,var(--dc,#ef476f) 2px,transparent 2.4px)}
.crowd.sm .b10{width:60px;height:6px;background-size:6px 6px;background-image:radial-gradient(circle,var(--dc,#ef476f) 2px,transparent 2.4px)}
.crowd.sm .b1{height:6px;background-size:6px 6px;background-image:radial-gradient(circle,var(--dc,#ef476f) 2px,transparent 2.4px)}
.tens{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.again{display:inline-block;background:#fff1e6;color:#a34a00;border-radius:999px;padding:3px 12px;font-weight:800;font-size:15px;margin-bottom:8px}
.posl{margin-top:8px;text-align:center;font-size:18px;font-weight:700;color:var(--muted)}
.cont.pack{background:linear-gradient(#e6b77e,#d39a5a);border-radius:8px;box-shadow:0 3px 0 #a87038}
.cont.pack .hd{color:#4a2d0f}
.cont.pack .s{background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px rgba(80,40,0,.25)}
.cont.pack .s.f{background:#e63946;box-shadow:none}
.off{filter:grayscale(1);opacity:.3}
.cont .seats{gap:2px}

@media (min-width:560px){.tbl th{font-size:15.5px;padding:8px 6px}.tbl td{font-size:20px}}
.tbl td.wk{font-size:16px}