/* Shape Shifter answers and puzzles, shared by the TV and the phones.
   Answer tiles are neutral so the shapes' own colours read clearly; the A-D badge carries the answer colour. */
.answers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ans{border:2px solid var(--line);border-radius:14px;padding:8px;background:var(--panel);color:var(--ink);display:flex;flex-direction:column;align-items:stretch;gap:4px;
  font:700 1rem/1.2 var(--body);position:relative;transition:opacity .25s,transform .15s,box-shadow .2s}
.ans .let{align-self:flex-start;width:1.9em;height:1.9em;border-radius:8px;display:grid;place-items:center;font:800 .95rem var(--display);color:#fff;flex:none}
.a0 .let{background:#c8321f}
.a1 .let{background:#2563b8}
.a2 .let{background:#e8a317;color:#17202b}
.a3 .let{background:#1d7f4e}
.ans .txt{width:100%;aspect-ratio:1;display:grid;place-items:center}
.ans .txt svg{width:78%;height:78%}
.ans .cnt{position:absolute;top:6px;right:6px;font:800 1rem var(--display);background:var(--chip);padding:1px 9px;border-radius:99px}
.ans.wrong{opacity:.28}
.ans.right{border-color:var(--win);box-shadow:0 0 0 4px var(--panel),0 0 0 7px var(--win)}
.ans.right .let{background:var(--win);color:#fff}

/* The pattern: a row of pictures then "?", or a 3x3 grid with the last square missing. */
.puzzle{display:grid;gap:clamp(6px,1vw,10px);margin:0 auto;width:100%}
.prow{grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.pgrid3{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,300px)}
.puzzle .cell{aspect-ratio:1;border-radius:12px;background:var(--panel);border:2px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.puzzle .cell svg{width:84%;height:84%}
.puzzle .cell.q{border-style:dashed;border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.qtext .puzzle{font:inherit}

/* Missing-piece puzzles: one big picture. Line drawings sit on white in both themes, like paper. */
.ppiece{max-width:560px;border-radius:12px;overflow:hidden;border:2px solid var(--line);line-height:0}
.ppiece svg{width:100%;height:auto;display:block}
.ans .txt svg[viewBox]:not([viewBox="0 0 100 100"]){border-radius:8px;outline:2px solid var(--line)}

/* Picture sums: one line per sum, pictures and signs in a row, total on the right. */
.psums{display:flex;flex-direction:column;gap:8px;max-width:520px}
.sumline{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.2vw,10px)}
.sumline .sym{width:clamp(38px,9vw,64px);aspect-ratio:1;display:grid;place-items:center}
.sumline .sym svg{width:100%;height:100%}
.sumline .op{font:800 clamp(1.3rem,3.4vw,2.2rem)/1 var(--display);color:var(--muted)}
.sumline .total{font:800 clamp(1.5rem,4vw,2.6rem)/1 var(--display);min-width:2.2ch;text-align:left;color:var(--ink)}
.sumline .total.q{color:var(--accent)}
/* Mirror: the shape, a dashed mirror line, then the gap to fill. */
.pmirror{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:12px;max-width:360px}
.pmirror .mline{height:100%;min-height:80px;border-left:4px dashed var(--muted);justify-self:center}

/* Pictures always sit on white "paper", in light and dark mode alike: the drawings use fixed dark inks and greys
   (numbers, line drawings, outlines), which vanish on a dark background. */
.ans .txt{background:#fff;border-radius:10px;border:1px solid #d5dbe2}
.puzzle .cell{background:#fff;border-color:#d5dbe2}
.puzzle .cell.q{background:#fdecea;border-color:var(--accent);color:var(--accent)}
.psums{background:#fff;border-radius:12px;padding:12px;border:1px solid #d5dbe2}
.psums .op{color:#5d6876}
.psums .total{color:#17202b}
.psums .total.q{color:#e2462f}