/* Board type Math (js/board-math.js): one 16:9 stage, 1280 × 720 units. --u is one unit, so the stage keeps its shape and
   everything in it grows or shrinks with the item (1 unit = 1 px at 100%: every button is at least 48 units). Our own look:
   a warm paper table, a deep teal tray, coloured signs. */
.wb-plug.wb-math{container-type:size}
.bm{--u:calc(min(100cqw, 100cqh * 16 / 9) / 1280);--ink:#17324D;--teal:#0E5A5F;--red:#E5483A;--yel:#F4B400;
  position:relative;width:calc(var(--u) * 1280);height:calc(var(--u) * 720);overflow:hidden;box-sizing:border-box;
  background:#FFF8EC;border:calc(var(--u) * 3) solid #E9DCC4;border-radius:calc(var(--u) * 22);color:var(--ink);
  font-family:inherit;font-size:calc(var(--u) * 20);line-height:1.15;-webkit-user-select:none;user-select:none}
.bm button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;border:0;margin:0;padding:0}
.bm button:disabled{opacity:.4;cursor:default}
.bm button:active:not(:disabled){transform:translateY(calc(var(--u) * 2))}

/* the side tray */
.bm-tray{position:absolute;left:0;top:0;bottom:0;width:calc(var(--u) * 176);box-sizing:border-box;padding:calc(var(--u) * 10);
  background:var(--teal);display:flex;flex-direction:column;gap:calc(var(--u) * 7);transition:background-color .15s}
.bm-tray.drop{background:#0A3F43;box-shadow:inset 0 0 0 calc(var(--u) * 5) #7FE0D2}
.bm-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 6);color:#fff;min-height:calc(var(--u) * 40)}
.bm-head b{font-size:calc(var(--u) * 30);font-weight:800;letter-spacing:.01em}
.bm-head .pbadge{font-size:calc(var(--u) * 12);padding:0 calc(var(--u) * 7)}
.bm-tb{display:flex;align-items:center;gap:calc(var(--u) * 8);min-height:calc(var(--u) * 62);flex:1 1 0;padding:0 calc(var(--u) * 8)!important;
  background:#F2FBF9!important;border-radius:calc(var(--u) * 14)!important;text-align:left;font-size:calc(var(--u) * 17);font-weight:700;color:var(--ink)}
.bm-ti{flex:none;width:calc(var(--u) * 44);height:calc(var(--u) * 44);display:grid;place-items:center}
.bm-ti svg{width:100%;height:100%}
.bm-tb.bm-away{flex:0 0 auto;justify-content:center;min-height:calc(var(--u) * 52);background:transparent!important;color:#DDF5F1;border:calc(var(--u) * 2) dashed #7FC9C0!important;text-align:center}
.bm-dot{display:block;width:calc(var(--u) * 34);height:calc(var(--u) * 34);border-radius:50%}
.bm-mini-frame{display:block;width:calc(var(--u) * 42);height:calc(var(--u) * 20);border:calc(var(--u) * 3) solid var(--ink);border-radius:calc(var(--u) * 3);
  background:linear-gradient(90deg,transparent 18%,var(--ink) 18% 22%,transparent 22% 38%,var(--ink) 38% 42%,transparent 42% 58%,var(--ink) 58% 62%,transparent 62% 78%,var(--ink) 78% 82%,transparent 82%),
  linear-gradient(transparent 44%,var(--ink) 44% 56%,transparent 56%)}
.bm-mini-line{font-style:normal;font-size:calc(var(--u) * 13);font-weight:800;border-top:calc(var(--u) * 3) solid var(--ink);padding-top:calc(var(--u) * 2)}

/* the sum and its keys */
.bm-eq{position:absolute;left:calc(var(--u) * 188);top:calc(var(--u) * 12);width:calc(var(--u) * 1080);height:calc(var(--u) * 112);display:flex;gap:calc(var(--u) * 10);align-items:stretch}
.bm-sum{flex:1;min-width:0;background:#fff;border:calc(var(--u) * 3) solid #E2D3B8;border-radius:calc(var(--u) * 18);padding:calc(var(--u) * 6) calc(var(--u) * 16);
  display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u) * 4)}
.bm-line1{display:flex;align-items:center;gap:calc(var(--u) * 10);min-height:calc(var(--u) * 62);white-space:nowrap;overflow:hidden}
.bm-tok{font-size:calc(var(--u) * 54);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.bm-tok.op{color:#6A4FD0}
.bm-tok.ans{color:#fff;background:#2B9348;border-radius:calc(var(--u) * 12);padding:calc(var(--u) * 3) calc(var(--u) * 14)}
.bm-tok.wrong{color:#B0A69A;text-decoration:line-through;text-decoration-thickness:calc(var(--u) * 5)}
.bm-yes{font-size:calc(var(--u) * 50);font-weight:900;color:#2B9348}
.bm-ph{font-size:calc(var(--u) * 50);color:#D6C9B3;font-weight:800}
.bm-say{font-size:calc(var(--u) * 21);font-weight:600;color:#4F5D6B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-msg{color:#B54708}
.bm-key{flex:none;min-width:calc(var(--u) * 96);border-radius:calc(var(--u) * 18)!important;font-size:calc(var(--u) * 26)!important;font-weight:800!important;background:#EFE6D6!important}
.bm-back{min-width:calc(var(--u) * 80);font-size:calc(var(--u) * 34)!important}
.bm-chk{min-width:calc(var(--u) * 168);background:#2B9348!important;color:#fff!important;font-size:calc(var(--u) * 32)!important;box-shadow:0 calc(var(--u) * 5) 0 #1D6B33}
.bm-nums{position:absolute;left:calc(var(--u) * 188);top:calc(var(--u) * 136);width:calc(var(--u) * 1080);height:calc(var(--u) * 64);display:grid;grid-template-columns:repeat(11,1fr);gap:calc(var(--u) * 8)}
.bm-nums.r2{top:calc(var(--u) * 208)}
.bm-num{background:#fff!important;border-radius:calc(var(--u) * 14)!important;font-size:calc(var(--u) * 38)!important;font-weight:800!important;font-variant-numeric:tabular-nums;
  box-shadow:0 calc(var(--u) * 5) 0 var(--sh,#C9BBA2),inset 0 0 0 calc(var(--u) * 2) #E7DAC3}
.bm-num.t0{--sh:#7CC4E8}.bm-num.t1{--sh:#F2A65A}.bm-num.t2{--sh:#9CCB6B}.bm-num.t3{--sh:#C79BEA}.bm-num.t4{--sh:#F07F8E}
.bm-ops{position:absolute;left:calc(var(--u) * 188);top:calc(var(--u) * 284);width:calc(var(--u) * 1080);height:calc(var(--u) * 84);display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u) * 10)}
.bm-op{display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 12);border-radius:calc(var(--u) * 16)!important;color:#fff!important;background:var(--oc)!important;box-shadow:0 calc(var(--u) * 5) 0 var(--od)}
.bm-op b{font-size:calc(var(--u) * 52);font-weight:900;line-height:1}
.bm-op>span{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bm-op .en{font-size:calc(var(--u) * 23);font-weight:800}
.bm-op .vi{font-size:calc(var(--u) * 16);font-weight:600;opacity:.9}
.bm-op.o-add{--oc:#2F8F5B;--od:#1E6340}.bm-op.o-sub{--oc:#D9622B;--od:#9E431B}.bm-op.o-mul{--oc:#7048C8;--od:#4F3191}
.bm-op.o-div{--oc:#1F78C1;--od:#14578E}.bm-op.o-eq{--oc:#34495E;--od:#1F2D3B}

/* the table and its tools */
.bm-play{position:absolute;left:calc(var(--u) * 188);top:calc(var(--u) * 380);width:calc(var(--u) * 1080);height:calc(var(--u) * 328);box-sizing:border-box;
  border-radius:calc(var(--u) * 18);background:#F3E9D6;border:calc(var(--u) * 2) dashed #DCCBAA;display:grid;place-items:center}
.bm-hint{font-size:calc(var(--u) * 24);font-weight:700;color:#A8977A}
.bm-mv{position:absolute;box-sizing:border-box;touch-action:none;cursor:grab}
.bm-mv.lift{z-index:5;cursor:grabbing;filter:drop-shadow(0 calc(var(--u) * 8) calc(var(--u) * 8) rgba(23,50,77,.28))}
.bm-counter{border-radius:50%;box-shadow:inset 0 calc(var(--u) * -6) 0 rgba(0,0,0,.18),0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(23,50,77,.25)}
.bm .c-red{background:var(--red)}.bm .c-yellow{background:var(--yel)}
.bm-line{background:#fff;border-radius:calc(var(--u) * 12);box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(23,50,77,.18)}
.bm-line svg{width:100%;height:100%;display:block}
.bm-line line,.bm-ax{stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.bm-line text{font-size:26px;font-weight:800;fill:var(--ink);text-anchor:middle;font-family:inherit}
.bm-shape{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:calc(var(--u) * 4)}
.bm-shape svg{width:100%;flex:1;min-height:0}
.bm-shape b{font-size:calc(var(--u) * 24);font-weight:800;background:#fff;border-radius:calc(var(--u) * 10);padding:0 calc(var(--u) * 10)}
.bm .s-circle{fill:#FFB4A2}.bm .s-square{fill:#9AD1F5}.bm .s-triangle{fill:#B8E08A}.bm .s-rectangle{fill:#D9B8F5}
.bm-shape svg>*,.bm-ti svg>*{stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.bm-frame{background:#fff;border-radius:calc(var(--u) * 14);padding:calc(var(--u) * 8);box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(23,50,77,.18);display:flex;flex-direction:column;gap:calc(var(--u) * 6)}
.bm-grip{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u) * 30);padding:0 calc(var(--u) * 6);font-weight:800;color:#5B6B7A;
  background:repeating-linear-gradient(90deg,#EFE6D6 0 calc(var(--u) * 6),transparent calc(var(--u) * 6) calc(var(--u) * 10));border-radius:calc(var(--u) * 8)}
.bm-grip b{font-size:calc(var(--u) * 24);color:var(--ink);background:#fff;padding:0 calc(var(--u) * 6);border-radius:calc(var(--u) * 6)}
.bm-cells{display:grid;grid-template-columns:repeat(5,1fr);flex:1;border:calc(var(--u) * 4) solid var(--ink);border-radius:calc(var(--u) * 6);overflow:hidden}
.bm-cell{background:#fff!important;border-right:calc(var(--u) * 3) solid var(--ink)!important;border-bottom:calc(var(--u) * 3) solid var(--ink)!important;display:grid;place-items:center;min-height:calc(var(--u) * 56)}
.bm-cell:nth-child(5n){border-right:0!important}.bm-cell:nth-child(n+6){border-bottom:0!important}
.bm-cell i{display:block;width:72%;aspect-ratio:1;border-radius:50%}
.bm-cell.c-red,.bm-cell.c-yellow{background:#fff!important}
.bm-cell.c-red i{background:var(--red)}.bm-cell.c-yellow i{background:var(--yel)}
@media (prefers-reduced-motion:reduce){.bm button:active:not(:disabled){transform:none}.bm-tray{transition:none}}