.feedback-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.feedback-layer * { pointer-events: none !important; }
.cargo-episode { position: absolute; z-index: 6; pointer-events: none !important; user-select: none; }
.cargo-episode * { pointer-events: none !important; }
.feedback-sprite {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform, opacity;
}
.feedback-sprite img { width: 100%; height: 100%; object-fit: contain; }
.feedback-sprite b {
  position: absolute;
  right: -8px;
  bottom: -4px;
  min-width: 15px;
  padding: 1px 3px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}
.feedback-paper {
  position: absolute;
  width: 142px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 19px 22px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 90%;
  background: transparent var(--ui-panel-small) center / 100% 100% no-repeat;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  will-change: transform, opacity;
}
.feedback-paper > img { width: 34px; height: 34px; object-fit: contain; }
.feedback-cancellation {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 62%;
  height: 3px;
  background: var(--coral);
  transform-origin: left center;
  rotate: -8deg;
}
.feedback-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.feedback-links path { fill: none; stroke: var(--yellow); stroke-width: 3px; stroke-linecap: round; }
.commission-feedback-paper { width: 100%; padding: 0.55rem 0.7rem; border: 2px solid var(--ink); color: var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--shadow); font-size: 0.8rem; line-height: 1.25; }
.feedback-progress-row + .feedback-progress-row { margin-top: 0.35rem; }
.feedback-progress-row > b { display: block; font-size: inherit; }
.feedback-stamps { display: inline-flex; gap: 0.25rem; margin-top: 0.2rem; }
.feedback-stamps > i { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px dashed var(--teal); background: #fff9e7; }
.feedback-stamps > i.filled { border-style: solid; }
.feedback-stamps img { width: 100%; height: 100%; object-fit: contain; }
.commission-calendar-feedback { position: relative; min-height: 6.9rem; perspective: 450px; }
.feedback-calendar-title { display: block; margin-bottom: 0.25rem; }
.feedback-calendar-page { display: grid; gap: 0.25rem; padding: 0.4rem; border-top: 3px solid var(--ink); background: var(--paper); transform-origin: 50% 0; backface-visibility: hidden; }
.feedback-calendar-page strong { font-size: 0.9rem; }
.feedback-calendar-page span { font-size: 0.7rem; line-height: 1.3; }
.feedback-calendar-page.old { position: absolute; left: 0.7rem; right: 0.7rem; top: 1.7rem; z-index: 1; background: var(--paper-deep); }
@media (max-width: 900px), (max-height: 560px) {
  .feedback-paper { width: 112px; min-height: 70px; padding: 12px 15px 18px; font-size: 10px; }
  .feedback-paper > img { width: 27px; height: 27px; }
  .feedback-links path { stroke-width: 2px; }
  .commission-feedback-paper { padding: 5px 7px; font-size: 10px; }
  .feedback-stamps > i { width: 18px; height: 18px; }
  .feedback-calendar-title { font-size: 10px; }
  .feedback-calendar-page strong { font-size: 11px; }
  .feedback-calendar-page span { font-size: 10px; }
  .feedback-calendar-page.old { left: 7px; right: 7px; top: 22px; }
}
/* Portrait is a proportional preview of the same landscape stage. Pixel-sized
   temporary paper was much taller than the scaled world region and got hidden. */
@media (orientation: portrait) and (max-width: 640px) {
  .commission-feedback-paper { padding: 0.55rem 0.7rem; border-width: 0.125rem; box-shadow: 0.2rem 0.2rem 0 var(--shadow); font-size: 0.8rem; }
  .feedback-stamps > i { width: 1.6rem; height: 1.6rem; border-width: 0.08rem; }
  .feedback-calendar-title { font-size: 0.8rem; }
  .feedback-calendar-page { border-top-width: 0.2rem; }
  .feedback-calendar-page strong { font-size: 0.9rem; }
  .feedback-calendar-page span { font-size: 0.7rem; }
  .feedback-calendar-page.old { left: 0.7rem; right: 0.7rem; top: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-layer { display: none; }
  .action-button, .nav-hit, .route-choice, .close-hit,
  .route-location-art, .museum-artifact { transition-duration: 0ms !important; }
}