/* «الذهب المزيف»: the board. A two-pan balance drawn in SVG with the pieces as buttons on the pans, a tray of
   pieces under it, the log of weighings and the notebook of what is still possible for each piece. */
:root { --accent: #F7C948; }

.scaleBox { position: relative; aspect-ratio: 320 / 150; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; overflow: visible; }
#scaleSvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#scaleSvg .base { fill: #3A4D6B; }
#scaleSvg .pillar { fill: #4F6A96; }
#scaleSvg .beamBar { fill: #C9A227; }
#scaleSvg .pivot { fill: #F3F7FF; stroke: #4F6A96; stroke-width: 2; }
#scaleSvg .string { stroke: #9FB7D9; stroke-width: 1.5; }
#scaleSvg .plate { fill: #C9A227; stroke: #8A6200; stroke-width: 1.5; }
#beam { transform-box: view-box; transform-origin: 160px 42px; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
#gL, #gR { transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.scaleBox.tiltL #beam { transform: rotate(6deg); }
.scaleBox.tiltR #beam { transform: rotate(-6deg); }
.scaleBox.tiltL #gL, .scaleBox.tiltR #gR { transform: translateY(13px); }
.scaleBox.tiltL #gR, .scaleBox.tiltR #gL { transform: translateY(-13px); }
.pan { position: absolute; bottom: 30%; width: 32%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 3px; min-height: 30px; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.pan.l { left: 2.75%; }
.pan.r { right: 2.75%; }
.scaleBox.tiltL .pan.l, .scaleBox.tiltR .pan.r { transform: translateY(var(--dy, 0px)); }
.scaleBox.tiltL .pan.r, .scaleBox.tiltR .pan.l { transform: translateY(calc(var(--dy, 0px) * -1)); }
.panLbl { position: absolute; bottom: 6%; font-size: .78rem; font-weight: 800; color: var(--mute); }
.panLbl.l { left: 15%; }
.panLbl.r { right: 15%; }
.pan .coin { width: 28px; height: 28px; font-size: .9rem; }

.trayBox { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px; margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; min-height: 60px; }
.coin { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #FFE58A; padding: 0; color: #3A2A00; font: 800 1.05rem/1 var(--display);
  background: radial-gradient(circle at 35% 30%, #FFF0A6, #F5B700 60%, #B98500); box-shadow: 0 3px 0 #8A6200; }
.coin:active { transform: translateY(2px); box-shadow: 0 1px 0 #8A6200; }
.coin.clear { filter: grayscale(.85); opacity: .5; }
.coin .mark { position: absolute; top: -9px; inset-inline-end: -8px; width: 17px; height: 17px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: 800 11px/1 var(--body); display: grid; place-items: center; font-style: normal; }
.coin.clear .mark { color: var(--ok); }
.coin.heavy .mark, .coin.light .mark { color: var(--warn); }
.coin.pick { outline: 3px solid var(--sun); outline-offset: 2px; }
.scaleBox.answer, .trayBox.answer { outline: 2px dashed var(--sun); }

.ctl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wlog { display: grid; gap: 8px; }
.wl { display: grid; grid-template-columns: 28px 1fr; gap: 8px 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; }
.wl .lno { width: 28px; height: 28px; border-radius: 8px; background: var(--panel2); color: var(--soft); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.wl .sides { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; direction: ltr; }
.wl .side { display: inline-flex; gap: 3px; }
.wl .side span { width: 24px; height: 24px; border-radius: 50%; background: #E8C14A; color: #3A2A00; display: grid; place-items: center; font: 800 .8rem/1 var(--display); }
.wl .sym { color: var(--soft); font-weight: 800; padding: 0 2px; }
.wl .res { grid-column: 2; font-weight: 800; color: var(--sun); font-size: .92rem; direction: rtl; }
.wl .res.eq { color: var(--ok); }

.book { display: flex; flex-wrap: wrap; gap: 8px; }
.bk { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: .88rem; font-weight: 700; color: var(--soft); }
.bk b { width: 24px; height: 24px; border-radius: 50%; background: #E8C14A; color: #3A2A00; display: grid; place-items: center; font: 800 .8rem/1 var(--display); }
.bk.clear { opacity: .5; }
.bk.clear span { color: var(--ok); }
.bk.heavy span, .bk.light span { color: var(--warn); }
.bk.both span { color: var(--ink); }