/* ---------- Spindown puzzle components (shared) ---------- */
.pz{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
.pz-box{position:relative;background:#0B1216;border-radius:18px;overflow:hidden;width:100%;transition:box-shadow .2s}
.pz-box.plain{background:transparent;display:flex;justify-content:center}
.pz-box canvas{display:block;width:100%;aspect-ratio:1/1;max-width:100%}
.pz-count{position:absolute;top:10px;left:0;right:0;text-align:center;color:#fff;font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.pz-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pz-ctl button,.mm-opt{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:11px 14px;font-weight:600;font-size:14px;min-height:46px}
.pz-ctl button.lock{background:var(--accent);color:var(--accent-ink);border:0}
.pz-ctl button.right,.mm-opt.right{border-color:var(--ok);box-shadow:0 0 0 2px var(--ok) inset}
.pz-ctl button.wrong,.mm-opt.wrong{opacity:.45}
.pz-ctl button:disabled{cursor:default}
.pz-stat{text-align:center;font-size:13px;color:var(--ink-2);min-height:18px;font-variant-numeric:tabular-nums}
.seg{display:flex;gap:4px;background:var(--field);border-radius:12px;padding:4px}
.seg button{flex:1;border:0;background:none;border-radius:9px;padding:9px 6px;font-weight:600;font-size:14px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.pz-ctl button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.pz-ctl button:active{transform:scale(.96)}
.pz-ctl button.tap{animation:tapflash .45s ease}
@keyframes tapflash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--glow) 80%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.pz-wait{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#F3EEE6;font-size:13px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);pointer-events:none;animation:waitfade 2s ease-in-out infinite}
@keyframes waitfade{0%,100%{opacity:.55}50%{opacity:1}}
/* fit */
.fit-wall{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px}
.fit-wall.hit{box-shadow:0 0 0 3px var(--ok) inset}.fit-wall.miss{box-shadow:0 0 0 3px #C2564B inset}
.fit-bar{width:100%;height:5px;background:#24323A;border-radius:3px;overflow:hidden}.fit-bar i{display:block;height:100%;background:#F0A35E}
.fit-grid{display:grid;gap:3px;width:120px}.fit-grid i{aspect-ratio:1;border-radius:3px}
.fit-grid.big{width:140px}
.fit-grid i.gap{border:2px dashed #F7CF9F;background:rgba(240,163,94,.1)}
.fit-grid i.pp{background:#F0A35E}
.fit-grid.me{align-self:center;cursor:pointer}
.fit-wall small{color:#9FB0B7;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* mirror match */
.pz-box.mm{display:flex;justify-content:center;padding:18px}
.mm-opts{gap:10px}.mm-opt{padding:12px;background:#0B1216;border-color:#24323A}.mm-opt .fit-grid{width:76px}
/* echo */
.echo{display:grid;gap:8px;padding:16px}
.echo button{aspect-ratio:1;border:0;border-radius:10px;background:#24323A;transition:background .15s}
.echo button.lit{background:#F0A35E;box-shadow:0 0 18px rgba(240,163,94,.6)}
/* symmetry */
.sym{display:grid;gap:3px;padding:14px}
.sym button{aspect-ratio:1;border:0;border-radius:4px;background:#24323A;padding:0}
.sym button.given{cursor:default;background:#1A262C}.sym button.given.on,.sym button.on{background:#F0A35E}
.sym button.axis{box-shadow:3px 0 0 #9FB0B7}
.sym button.bad{outline:2px solid #E48A80;outline-offset:-2px}
/* pattern */
.mandala{width:100%;max-width:340px;aspect-ratio:1;touch-action:manipulation}
.mandala path,.mandala circle{stroke:#4F5F67;stroke-width:.6;cursor:pointer;transition:fill .15s}
.swatches{display:flex;gap:8px;justify-content:center}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)}
/* delayed hint icon + info icon */
.hintrow{position:relative;display:flex;justify-content:flex-end;align-items:flex-start;min-height:34px;margin-top:-2px}
.hintbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:#F0A35E;display:grid;place-items:center;padding:0;opacity:0;pointer-events:none}
.hintbtn svg{width:18px;height:18px}
.inforow{position:relative;display:flex;align-items:flex-end}
.infobtn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:italic 600 14px Georgia,serif;padding:0}
.bubble{position:absolute;z-index:5;bottom:calc(100% + 8px);width:max-content;max-width:min(320px,calc(100vw - 48px));background:var(--ink);color:var(--mist);font-size:13px;line-height:1.4;border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.bubble.right{right:0;text-align:left}.bubble.left{left:0}
@media (prefers-reduced-motion:reduce){.pz-box,.mandala path,.echo button{transition:none}}