/* V9 layout calibration: all positions are percentages of the un-stretched 941 x 1305 paper. */
/* The original V8 paper is unchanged except the four printed ribbon characters, replaced by live HTML. */
.paper-wrap .task-title{
  display:flex;position:absolute;z-index:3;
  left:15.0%;top:20.1%;width:22.0%;height:6.25%;
  align-items:center;justify-content:center;margin:0;
  color:#f8deac;text-shadow:0 1px 1px #3e174d,0 0 2px #401848;
  font:700 clamp(15px,4.55vw,20px)/1 'STFangsong','Songti SC',serif;
  letter-spacing:1px;white-space:nowrap;transform:rotate(-8deg);
}
/* Centre 20 词 between the two painted gold flourishes at y≈32.5%. */
.paper-wrap .task-number{
  display:flex;top:28.45%;left:13.2%;width:41.0%;height:10.1%;
  align-items:center;justify-content:center;gap:4px;
}
.paper-wrap .task-number strong{
  font:700 clamp(48px,13.1vw,61px)/1 Georgia,'Times New Roman',serif;
  letter-spacing:-1px;
}
.paper-wrap .task-number span{font-size:clamp(16px,4.5vw,20px);align-self:center;margin-top:11px}
/* The long centre gold line is at about 41.4% of the paper height.
   Completion copy is ABOVE the line, progress bar BELOW; both retain clear space. */
.paper-wrap .task-progress{
  position:absolute;left:11.8%;top:37.55%;width:45.0%;height:9.25%;
  display:block;max-height:none;
}
.paper-wrap .task-completion{
  position:absolute;top:0;left:0;width:100%;height:21%;
  display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:clamp(11.3px,3.0vw,14px);line-height:1.15;
}
.paper-wrap .task-completion strong{font-size:clamp(12.4px,3.35vw,15.5px)}
.paper-wrap .progress-track{
  position:absolute;left:2.5%;top:78%;width:95%;height:clamp(6px,1.45vw,8px);
}
/* Empty task: align the prompt with completion copy and the selection with progress-bar region.
   Selector art keeps native 2048:682 aspect, and is wider than V8 but not taller. */
.paper-wrap[data-state="new"] .task-pick{
  left:11.8%;top:37.5%;width:45.0%;height:9.5%;
  display:block;text-align:center;white-space:nowrap;
}
.paper-wrap[data-state="new"] .task-pick>span{
  position:absolute;left:-5%;top:0;width:110%;height:24%;
  display:flex;justify-content:center;align-items:center;
  font-size:clamp(10.8px,2.98vw,13.5px);line-height:1.1;white-space:nowrap;
}
.paper-wrap[data-state="new"] .qty-options{
  position:absolute;top:42%;left:50%;transform:translateX(-50%);
  width:clamp(135px,34vw,150px);height:auto;aspect-ratio:2048 / 682;
  padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background-size:100% 100%;
}
.paper-wrap[data-state="new"] .qty-options button{font-size:clamp(12px,3.2vw,14.5px)!important}
/* Match the original assembled purple button illustration rather than arbitrary V5-V8 offsets.
   The non-task gold ornaments are returned to their original flanking locations. */
.paper-wrap .main-cta{top:50.9%;left:26.1%;width:47.8%;height:8.2%}
.paper-wrap .cta-flourish{top:52.2%;width:9.0%;height:auto}
.paper-wrap .cta-flourish-left{left:16.6%}
.paper-wrap .cta-flourish-right{right:16.6%}
.paper-wrap .extra-words{left:0;top:50.9%;width:100%;height:8.2%;overflow:visible}
.paper-wrap .extra-words button:first-child{left:9.1%;right:auto}
.paper-wrap .extra-words button:last-child{right:9.1%;left:auto}
/* On shorter viewports keep the exact same relative anchors; never squeeze three-way art. */
@media(max-height:780px){
 .paper-wrap .task-number strong{font-size:clamp(45px,12.5vw,56px)}
 .paper-wrap .task-progress{top:37.6%}
 .paper-wrap[data-state="new"] .task-pick{top:37.5%}
 .paper-wrap[data-state="new"] .qty-options{width:clamp(125px,32vw,145px);height:auto}
}