/* Put Together — the scattered pieces float in the open top area; four options in the bottom of the screen.
   After an answer the whole character (or word) shows where its pieces were. */

.pt-stim { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; }
/* sizes follow the screen height, so the four options stay on screen on an iPhone SE and a 360 × 600 phone */
.pt-field { position: relative; flex: 1; min-height: min(240px, 30vh); min-height: clamp(150px, 30dvh, 240px); color: var(--stage-ink); }
.pt-field.hanzi, .pt-opt.hanzi { font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', var(--sans); }
.pt-piece {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.pt-whole {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
  color: var(--stage-dim);
}
.pt-field.hanzi .pt-whole { font-size: 96px; }
.pt-field.latin .pt-whole { font-size: 40px; font-weight: 300; letter-spacing: 3px; }
.pt-caption { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--stage-dim); text-align: center; }

.pt-controls { justify-content: flex-end; }
/* The answer window: a 2 px line over the options, full when the pieces appear, empty as time runs out. Quiet ink;
   the last second it fades up to full ink (assemble.js clockPlan drives width and opacity). No number, never red. */
.pt-clock { position: relative; height: 2px; margin: 0 0 14px; visibility: hidden; }
.pt-clock.on { visibility: visible; }
.pt-clock i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 1px; background: var(--stage-ink); opacity: 0.4; }
.pt-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, min(104px, 13vh)); grid-template-rows: repeat(2, clamp(64px, 13dvh, 104px)); gap: 10px; }
.pt-opt {
  min-height: 44px;
  padding: 0 8px;
  color: var(--stage-ink);
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.15s ease;
}
.pt-opt.hanzi { font-size: 44px; font-weight: 400; line-height: 1; }
.pt-opt.latin { font-size: 20px; letter-spacing: 1.5px; }
/* never color alone: the right pick gets a heavier outline too; a wrong pick dims, the answer is outlined */
.pt-opt.is-right { border: 1.5px solid var(--ok); color: var(--ok); }
.pt-opt.is-shown { border: 1.5px solid var(--stage-ink); }
.pt-opt.is-wrong { opacity: 0.55; }
.pt-options.is-done .pt-opt:not(.is-right):not(.is-shown):not(.is-wrong) { opacity: 0.25; }

/* Shapes: the pieces are one SVG over the field; each piece glides into the whole after an answer and dims, as the
   whole character or word does. The gap between pieces is a stroke in the stage's own colour. The options are four
   figures at one scale, ink on the button; the right one turns green (with its heavier outline), never red. */
.pt-field.shape .pt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pt-field.shape .pt-pc { transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
.pt-field.shape .pt-pc path { fill: var(--stage-ink); stroke: var(--stage); stroke-linejoin: round; transition: fill 0.2s ease; }
.pt-field.shape.is-joined .pt-pc path { fill: var(--stage-dim); }
.pt-opt.shape { padding: 8px; }
.pt-opt.shape .pt-fig { display: block; width: 100%; height: 100%; pointer-events: none; }
.pt-opt.shape .pt-fig path { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .pt-field.shape .pt-pc, .pt-field.shape .pt-pc path { transition: none; }
}