/* 原稿比例：564 × 846。所有元素按画布比例定位，缩放不改变排版。 */
:root {
  --paper: #ebebed;
  --ink: #393436;
  --yellow: #e9e04b;
  --line: #a2a2a2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 30px 20px;
  background: #f5f5f5;
  color: var(--ink);
}
.poster {
  position: relative;
  width: min(100%, 774px);
  aspect-ratio: 564 / 846;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  container-type: inline-size;
}
.section { display: contents; }
/* --x/--y 为原稿坐标；--w/--h 为元素宽高。 */
.placed {
  position: absolute;
  left: calc(var(--x) / 564 * 100%);
  top: calc(var(--y) / 846 * 100%);
  width: calc(var(--w) / 564 * 100%);
  height: calc(var(--h) / 846 * 100%);
  margin: 0;
}
.type img { display: block; width: 100%; height: 100%; }
.bar, .food-disc, .star, .area-chart { background: var(--yellow); }
.rule { background: var(--line); }
.food-disc { border-radius: 50%; }
.food { object-fit: cover; filter: grayscale(1); }
.rating-frame { border: 0.18cqw solid var(--line); }
.star {
  clip-path: polygon(50% 0%,65% 33%,100% 38%,75% 64%,81% 100%,50% 82%,19% 100%,25% 64%,0% 38%,35% 33%);
}
.star-cover { background: var(--paper); }
/* 五条分界线保持相同粗细。 */
.pie { border-radius: 50%; background: var(--yellow); overflow: hidden; }
.pie span {
  position: absolute; left: 48.5%; top: 51.5%;
  width: 54%; height: 1.6%; background: var(--paper);
  transform-origin: 0 50%; transform: translateY(-50%) rotate(var(--angle));
}
.time-arrow { background: var(--line); border-radius: 2px; }
.time-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-right: 0.5cqw solid var(--line);
  border-top: 0.5cqw solid var(--line);
  border-radius: 0.3cqw;
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 600px) { body { padding: 12px 8px; } }
@media print {
  @page { size: 188mm 282mm; margin: 0; }
  html, body { margin: 0; padding: 0; background: var(--paper); }
  .poster { width: 188mm; height: 282mm; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}