/* Move-things answers (web/js/moves.js): Match, Sort, Gaps, Label. One component; .young makes it big and
   friendly for the youngest years (pictures, larger targets), without it it's compact and plain. Every place is
   start/end, so right to left mirrors by itself (the left column sits on the right, its dots face the middle). */
.mv{--mvh:46px;--mvfs:1rem;--mvr:var(--r1);display:flex;flex-direction:column;gap:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mv.young{--mvh:62px;--mvfs:1.1875rem;--mvr:var(--r2)}
.mv button{font:inherit;color:inherit}
.mv [data-side],.mv [data-card],.mv [data-w],.mv .mvslot.full{touch-action:none;cursor:grab}
.mv.marked button{cursor:default}
.mvtx{display:block;line-height:1.3}
.mv.young .mvtx.short{font-size:1.5em}
.mvpic{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0}
.mv.young .mvpic{width:60px;height:60px}
.mvpic svg,.mvpic img{width:100%;height:100%;object-fit:contain}
.mvdraw{width:64px;height:48px;flex-shrink:0;border-radius:var(--r0)}
.mv.young .mvdraw{width:84px;height:62px}
.mvcap{font-size:.875em}

/* a piece: the same look for match items, cards, bank words and labels */
.mvitem,.mvcard,.mvword,.mvslot.full{display:flex;align-items:center;gap:8px;min-height:var(--mvh);padding:6px 12px;border-radius:var(--mvr);corner-shape:squircle;
  background:var(--paper);border:1.5px solid var(--line);font-size:var(--mvfs);text-align:start;box-shadow:var(--card-shadow);transition:border-color .12s,box-shadow .12s,opacity .12s}
.mv.young .mvitem,.mv.young .mvcard,.mv.young .mvword,.mv.young .mvslot.full{border-width:2.5px;font-weight:600}
.mvitem:hover,.mvcard:hover,.mvword:hover{border-color:var(--muted)}
.mv .on{border-color:var(--ink)!important;box-shadow:0 0 0 3px var(--accent),var(--card-shadow-hi)}
.mv .lifted{opacity:.35}
.mv .ok{background:color-mix(in srgb,var(--ok) 26%,var(--paper));border-color:var(--ok)}
.mv .no{background:color-mix(in srgb,var(--bad) 18%,var(--paper));border-color:var(--bad)}
.mvghost{position:fixed;z-index:1000;margin:0;pointer-events:none;box-shadow:var(--card-shadow-hi),0 12px 30px var(--shadow);border-color:var(--ink)!important}
.mv .snap{animation:mvsnap .26s cubic-bezier(.3,1.5,.6,1)}
@keyframes mvsnap{0%{transform:scale(.86)}60%{transform:scale(1.05)}100%{transform:none}}
.mv .over{border-color:var(--focus)!important;background:color-mix(in srgb,var(--chk) 16%,var(--paper))!important}

/* match: two columns, lines between */
.mvpair{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr)}
.mv.young .mvpair{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}
.mvcol{display:flex;flex-direction:column;justify-content:space-around;gap:10px;position:relative;z-index:1}
.mvitem{position:relative;width:100%}
.mvitem.haspic{flex-direction:column;justify-content:center;text-align:center;gap:2px}
.mvdot{position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);pointer-events:none}
.mvcol:first-child .mvdot{inset-inline-end:-8px}
.mvcol:nth-child(3) .mvdot{inset-inline-start:-8px}
.mvitem.joined .mvdot,.mvitem.on .mvdot{background:var(--ink)}
.mv.picking .mvitem:not(.on){border-style:dashed}
.mvlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.mvl{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.mv.young .mvl{stroke-width:4.5}
.mvl.temp{stroke:var(--focus);stroke-dasharray:2 7}
.mvl.snap{stroke-dasharray:400;stroke-dashoffset:400;animation:mvdraw .22s ease-out forwards}
@keyframes mvdraw{to{stroke-dashoffset:0}}
.mvl.ok{stroke:var(--okText)}
.mvl.no{stroke:var(--badText);stroke-dasharray:9 7}
.mvl.want{stroke:var(--okText);stroke-dasharray:2 6;stroke-width:2.5;opacity:.85}
.mvhit{fill:none;stroke:transparent;stroke-width:22;pointer-events:stroke;cursor:pointer}

/* sort: a tray of cards over 2–3 boxes */
.mvtray,.mvbank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:calc(var(--mvh) + 18px);padding:8px;border-radius:var(--mvr);corner-shape:squircle;border:2px dashed var(--line);background:var(--board)}
.mvtray.empty{min-height:24px;padding:4px;opacity:.6}
.mv.marked .mvtray.empty,.mv.marked .mvword.used{display:none}
.mv.marked .mvbank:not(:has(.mvword:not(.used))){display:none}
.mvgroups{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.mvbox{display:flex;flex-direction:column;min-height:150px;border-radius:var(--mvr);corner-shape:squircle;border:2px solid var(--line);background:var(--field);overflow:hidden;transition:border-color .12s,background .12s}
.mv .mvboxhead{display:flex;justify-content:center;align-items:center;gap:6px;min-height:40px;padding:6px 8px;border:0;border-bottom:2px solid var(--line);background:var(--soft);font-weight:700;font-size:.9375rem;text-align:center}
.mv.young .mvboxhead{min-height:52px;font-size:1.0625rem}
.mvboxhead .mvpic{width:34px;height:34px}
.mvin{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:8px;flex:1}
.mvcard{min-width:0;max-width:100%}
.mvcard.haspic{flex-direction:column;gap:2px;padding:6px 8px}
.mvfix{display:block;font-size:.75rem;color:var(--okText);font-weight:700}
.mvright{display:contents;color:var(--okText)}
.mv .no .mvright .mvtx{color:var(--okText)}
.mv.picking .mvbox,.mv.picking .mvtray{border-color:var(--muted)}

/* gaps and label: a bank of words */
.mvword.used{opacity:.3;box-shadow:none;border-style:dashed;cursor:default}
.mvtext{font-size:var(--mvfs);line-height:2.6}
.mv.young .mvtext{line-height:2.9}
.mvtext p{margin:0}
.mvtable{border-collapse:collapse;margin-inline:auto;line-height:1.4}
.mvtable td{border:1.5px solid var(--line);padding:6px 10px;text-align:center}
.mvslot{display:inline-flex;align-items:center;justify-content:center;gap:4px;vertical-align:middle;min-width:84px;min-height:38px;padding:2px 10px;margin:2px 3px;border-radius:var(--r0);
  border:2px dashed var(--muted);background:var(--field);font-size:inherit;line-height:1.2}
.mv.young .mvslot{min-width:100px;min-height:50px;border-radius:var(--r1)}
.mvslot.full{display:inline-flex;min-height:38px;padding:2px 10px;margin:2px 3px}
.mv.young .mvslot.full{min-height:50px}
.mv.picking .mvslot:not(.full){border-color:var(--ink);background:var(--accentSoft)}
.mvnum{font-size:.75rem;font-weight:700;color:var(--muted)}
.mvwas{color:var(--badText);font-size:.8em;margin-inline-end:4px}
.mvwas:empty{display:none}
.mvdia{position:relative;border-radius:var(--mvr);background:var(--canvas);border:1.5px solid var(--line);overflow:hidden}
.mvdia canvas{display:block;width:100%;height:280px}
.mv.young .mvdia canvas{height:320px}
.mvdia .mvslot{position:absolute;margin:0;transform:translate(-50%,-50%);min-width:64px;max-width:46%;font-size:.875rem;box-shadow:var(--card-shadow)}
.mvdia .mvslot.snap{animation:mvsnapc .26s cubic-bezier(.3,1.5,.6,1)}
@keyframes mvsnapc{0%{transform:translate(-50%,-50%) scale(.86)}60%{transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%)}}
.mv.young .mvdia .mvslot{min-width:76px;font-size:1rem}
.mvdia .mvslot:not(.full){background:color-mix(in srgb,var(--paper) 88%,transparent)}
@media (min-width:700px){.mvdia canvas{height:340px}}

/* calm: no bounces or drawn-in lines */
:root[data-motion=reduce] .mv *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.mv *{animation:none!important;transition:none!important}}

/* on paper */
.wsmatch{width:auto!important;margin-block:4pt;margin-inline:16pt 0;border-collapse:separate!important;border-spacing:0 6pt}
.printsheet .wsmatch td{border:0;padding:2pt 4pt;vertical-align:middle;width:auto}
.wsmatch td i{display:inline-block;width:6pt;height:6pt;border-radius:50%;background:#000;vertical-align:middle}
.printsheet .wsmatch td.wsdot{width:8pt!important;padding:0}
.wsmatch img,.wscut img,.wsbank img{display:inline-block!important;vertical-align:middle;max-height:40pt!important;max-width:70pt!important;margin:0!important}
.wsmatch td:first-child{text-align:end}
.wsmatch .wsmgap{width:70pt!important}
.wscut{display:flex;flex-wrap:wrap;gap:4pt;margin-block:4pt 6pt;margin-inline:16pt 0}
.wscut span{border:1pt dashed #000;padding:3pt 7pt}
.printsheet .wsboxes td{width:auto;height:70pt;padding:3pt 5pt;text-align:center}
.wsbank{border:1pt solid #000;padding:3pt 6pt;margin-block:4pt 6pt;margin-inline:16pt 0;display:flex;flex-wrap:wrap;gap:3pt 10pt}
.wsgaps{margin-inline-start:16pt;line-height:2}
.wsblank{display:inline-block;min-width:60pt;border-bottom:1pt solid #000;height:12pt;vertical-align:baseline}
.wslabels{display:grid;grid-template-columns:1fr 1fr;gap:5pt 12pt;margin-inline-start:16pt}