/* V13 calibrated task panel: task content only. Shared shell, original paper art, button positions and functionality untouched. */
/* A single centre for the goal, state and action to avoid scattered baselines. */
.paper-wrap .task-number{left:12.6%;width:43%;}
.paper-wrap .task-progress{left:12.6%;width:43%;top:37.55%;}
.paper-wrap .task-completion{top:0;height:22%;font-size:clamp(11.5px,3.0vw,13.8px);white-space:nowrap;}
.paper-wrap .task-completion strong{font-size:clamp(12.5px,3.3vw,15px);font-variant-numeric:tabular-nums;}
.paper-wrap .progress-track{left:2.5%;width:95%;top:71%;height:clamp(7px,1.6vw,8.5px);}
.paper-wrap .task-next-step{position:absolute;top:103%;left:0;width:100%;height:22%;display:flex;align-items:center;justify-content:center;color:#9b6e72;font:600 clamp(9.4px,2.55vw,11.4px)/1.1 'STFangsong','Songti SC',serif;text-align:center;white-space:nowrap;letter-spacing:.25px;}
.paper-wrap .task-next-step[hidden]{display:none}
/* Before the task is generated, prompt and selector replace exactly the above pair. */
.paper-wrap[data-state="new"] .task-pick{left:12.6%;width:43%;top:37.55%;height:9.25%;}
.paper-wrap[data-state="new"] .task-pick>span{left:0;top:0;width:100%;height:23%;font-size:clamp(11px,2.9vw,13.3px);}
.paper-wrap[data-state="new"] .qty-options{top:45%;width:clamp(137px,33vw,150px);max-height:none;}
@media(max-height:780px){
 .paper-wrap .task-progress{top:37.55%}
 .paper-wrap .task-next-step{font-size:clamp(8.8px,2.35vw,10.6px);top:99%}
 .paper-wrap[data-state="new"] .task-pick{top:37.55%}
 .paper-wrap[data-state="new"] .qty-options{width:clamp(127px,31vw,143px);top:42%}
}

/* V13: asset-geometry corrections. Pixel boxes are anchored to the existing
   paper canvas; original PNG/WebP ratios and the shared shell are untouched. */
/* In the bonus state each side control takes the corresponding decoration
   position. The paint-bearing part is ~87% of each transparent PNG width. */
.paper-wrap .extra-words button{
  width:16.36%; /* 72 CSS px at 440px paper width */
  top:50%;height:auto;min-height:0;
  font-size:clamp(9.5px,2.58vw,11.4px);
  line-height:1;
}
.paper-wrap .extra-words button:first-child{left:9.1%;right:auto}
.paper-wrap .extra-words button:last-child{right:9.1%;left:auto}
.paper-wrap .extra-words button span{top:49%;left:32%;width:60%;transform:translateY(-50%)}
.paper-wrap .extra-words button:last-child span{left:9%;width:59%}
/* The paper strip has a painted upward-right slant of roughly 10 degrees.
   Rotate the label independently; do not exaggerate the whole strip angle. */
.paper-wrap .word-note{transform:rotate(-2deg)}
.paper-wrap .word-note>span{
  transform:translate(-3px,-2px) rotate(-9deg);
  transform-origin:50% 50%;
  max-width:69%;
}
/* Resize the 3:1 artwork without distortion. Its actual visible painted band
   occupies alpha y≈17%-78%, so place the painted band on the progress baseline. */
.paper-wrap[data-state="new"] .qty-options{
  width:clamp(147px,38.2vw,168px);
  height:auto;aspect-ratio:2048/682;
  top:30%;
  left:50%;transform:translateX(-50%);
}
.paper-wrap[data-state="new"] .qty-options button{
  font-size:clamp(13px,3.35vw,15px)!important;
}
@media(max-height:780px){
  .paper-wrap[data-state="new"] .qty-options{top:30%;width:clamp(140px,36.4vw,160px)}
  .paper-wrap .extra-words button{font-size:clamp(9px,2.48vw,10.9px)}
}