/* css/packing.css (BACKLOG 30) — the packing mini-game panel (js/ui/packing.js). The sheet itself (bottom panel on
   phones, right-side panel on wide landscape screens) comes from css/sheets.css (.sheet--panel), like the Stół QC
   panel. The carton is drawn top-down with CSS only: kraft rim + interior, items, four flaps that fold with a 3D
   swing (perspective on .pk-box), the tape lane, tape strips, the address label and the „WYSŁANE” stamp.
   Visual pass 2 (2026-10-15): the carton follows the 3-tone box rule (base #c99558, flaps #b07e45, side / edge
   #8f6334, a 2 px #8f6334 outline), flat — no gradients, no shine sweeps; the mat = the 3D QC tables (sheets.css .mat).
   The teaching loops (lane, gaps, ghost hand, label slot) stay. Only transform / opacity animate. Tokens: main.css. */

.sheet--pack .sheet__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  overflow: hidden;
}

.sheet--pack .sheet__head {
  position: absolute;
  top: 18px;
  right: max(16px, var(--safe-right));
}

/* „2/5” next to the title = a §4 count tag */
.pk__count {
  flex: none;
  min-height: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--raised-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 20px;
}

/* the instruction: one 14 / 800 grey line, left, under the title */
.pk__hint {
  flex: none;
  margin: 0;
  min-height: 1.35em;
  text-align: left;
  font-weight: 800;
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--text-2);
}

.pk__hint.is-nudge { animation: pk-nudge var(--mo-slow) var(--mo-out); }

/* the packing bench: the green ruler mat (css/sheets.css .mat), a container for the carton's size */
.pk__area {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  container-type: size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: var(--cur-hand);
}

.pk__area.is-tape { cursor: crosshair; }
.pk__area:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ------------------------------------------------------------------ the carton (top-down) */
.pk-box {
  position: relative;
  display: block;
  width: min(70%, 380px);
  width: min(70cqw, 380px, 76cqh);
  aspect-ratio: 4 / 3;
  border: 2px solid var(--cardboard-3);
  border-radius: var(--r-sm);
  background: var(--cardboard-1);
  box-shadow: 0 6px 0 var(--cardboard-3);
  perspective: 760px;
  transition: transform var(--mo-slow) var(--mo-out);
}

.pk-box.is-in { animation: pk-in var(--mo-slow) var(--mo-out) backwards; }
.pk-box.is-closed { transform: scale(1.1); }
.pk-box.is-out {
  transform: translateX(150%) rotate(9deg) scale(1.1);
  transition: transform var(--mo-slow) var(--mo-out);
}

/* the inside: the side tone (the box's shadowed face) */
.pk-box__floor {
  position: absolute;
  inset: 7%;
  border-radius: var(--r-xs);
  background: var(--cardboard-3);
}

.pk-box__items {
  position: absolute;
  inset: 12% 11%;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5%;
  place-items: center;
}

/* items seen from above: a tee / hoodie in its poly bag, a shoe box, a small accessory box */
.pk-item {
  position: relative;
  display: block;
  width: 90%;
  height: 86%;
  border-radius: var(--r-sm);
  background: var(--c, #f2c21b);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  transform: rotate(var(--r, 0deg));
}

.pk-item--tee::before,
.pk-item--hoodie::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.1);
}

.pk-item--tee::after {
  content: "";
  position: absolute;
  top: 9%;
  left: 36%;
  width: 28%;
  height: 18%;
  border-radius: 0 0 50% 50%;
  background: rgba(0, 0, 0, 0.26);
}

.pk-item--hoodie::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 27%;
  width: 46%;
  height: 30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
}

.pk-item--shoe {
  height: 70%;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--r-xs);
  background: var(--c, #ff7a18);
}

.pk-item--shoe::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 22%;
  height: 11%;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.78);
}

.pk-item--small {
  width: 58%;
  height: 58%;
  border: 2px solid #c9a227;
  border-radius: var(--r-xs);
  background: var(--ink);
}

.pk-item--small::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: #c9a227;
}

.pk-item.is-drop { animation: pk-drop var(--mo-slow) var(--mo-spring) both; }
.pk-item.is-fast { animation-duration: var(--mo-fast); }

/* flaps: swung up toward the viewer while open, flat when closed (short side flaps fold first) */
.pk-box__flap {
  position: absolute;
  display: block;
  background: var(--cardboard-2);
  box-shadow: inset 0 0 0 2px var(--cardboard-3);
  transition: transform var(--mo-slow) var(--mo-out);
}

.pk-box__flap--l,
.pk-box__flap--r {
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 37.5%;
}

.pk-box__flap--l { left: 0; transform-origin: 0 50%; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.pk-box__flap--r { right: 0; transform-origin: 100% 50%; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.pk-box__flap--t,
.pk-box__flap--b {
  left: 0;
  right: 0;
  z-index: 3;
  height: 50%;
  transition-delay: 90ms;
}

.pk-box__flap--t {
  top: 0;
  transform-origin: 50% 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.pk-box__flap--b {
  bottom: 0;
  transform-origin: 50% 100%;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition-delay: 160ms;
}

.pk-box.is-open .pk-box__flap--l { transform: rotateY(-105deg); }
.pk-box.is-open .pk-box__flap--r { transform: rotateY(105deg); }
.pk-box.is-open .pk-box__flap--t { transform: rotateX(105deg); }
.pk-box.is-open .pk-box__flap--b { transform: rotateX(-105deg); }

/* the tape lane on the seam (tape step), the ghost hand showing the swipe */
.pk-box__seam {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 42.5%;
  z-index: 4;
  height: 15%;
  border: 2px dashed rgba(255, 255, 255, 0.8);
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity var(--mo-med) var(--mo-out);
}

.pk-box.is-tape .pk-box__seam {
  opacity: 1;
  animation: pk-lane 0.9s ease-in-out infinite alternate;
}

/* after a short first swipe the bare ends of the lane blink (packing.js flashGaps sets --gap-l / --gap-r) */
.pk-box__seam::before,
.pk-box__seam::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  border-radius: var(--r-xs);
  background: rgba(247, 197, 30, 0.6);
  opacity: 0;
  pointer-events: none;
}

.pk-box__seam::before { left: -2px; width: var(--gap-l, 0%); }
.pk-box__seam::after { right: -2px; width: var(--gap-r, 0%); }

.pk-box.is-gaps .pk-box__seam::before,
.pk-box.is-gaps .pk-box__seam::after {
  animation: pk-gap 0.42s ease-in-out infinite alternate;
}

.pk-box__ghost {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 9;
  width: 100%;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}

.pk-box__ghost .icon {
  display: block;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
  transform: translate(-30%, -10%);
}

.pk-box.is-tape:not(.is-taping) .pk-box__ghost { animation: pk-ghost 1.6s ease-in-out 0.25s infinite; }

.pk-box__tapes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.pk-tape {
  position: absolute;
  display: block;
  height: 15%;
  border-radius: var(--r-xs);
  transform-origin: 0 50%;
  background: rgba(216, 170, 98, 0.9);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: opacity var(--mo-med) var(--mo-out);
}

.pk-tape.is-drop { opacity: 0; }

/* a strip over most of the lane snaps to the lane ends on release */
.pk-tape.is-snap {
  transition: left var(--mo-fast) var(--mo-out), top var(--mo-fast) var(--mo-out), width var(--mo-fast) var(--mo-out), transform var(--mo-fast) var(--mo-out);
}

/* the tape gun under the finger / mouse */
.pk__gun {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mo-fast) var(--mo-out);
}

.pk__gun.is-on { opacity: 1; }

.pk__gun-body {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -8px;
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  background: var(--red);
  color: #fff;
  box-shadow: 0 4px 0 var(--red-dark);
  transform: rotate(-12deg);
}

/* address label: a dashed slot pulses (label step), the label slaps on, then the stamp */
.pk-box__slot,
.pk-box__label {
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 40%;
  height: 31%;
  border-radius: var(--r-xs);
}

.pk-box__slot {
  z-index: 6;
  border: 3px dashed rgba(255, 255, 255, 0.9);
  opacity: 0;
}

.pk-box.is-label .pk-box__slot {
  opacity: 1;
  animation: pk-pulse 0.7s ease-in-out infinite alternate;
}

.pk-box__label {
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 8%;
  padding: 7% 8%;
  box-sizing: border-box;
  background: var(--paper);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: rotate(-3deg) scale(1.7);
}

.pk-box__label.is-on {
  opacity: 1;
  transform: rotate(-3deg) scale(1);
  transition: transform var(--mo-fast) var(--mo-spring), opacity var(--mo-fast) linear;
}

.pk-box__line {
  display: block;
  height: 9%;
  border-radius: var(--r-xs);
  background: var(--ink);
  opacity: 0.72;
}

.pk-box__line--a { width: 64%; }
.pk-box__line--b { width: 90%; }
.pk-box__line--c { width: 52%; }

.pk-box__code {
  display: block;
  margin-top: auto;
  height: 28%;
  border-left: 3px solid var(--ink);
  border-right: 3px solid var(--ink);
  background: var(--ink);
  opacity: 0.8;
}

.pk-box__stamp {
  position: absolute;
  left: 42%;
  top: 40%;
  z-index: 8;
  padding: 1px 10px;
  border: 3px solid currentColor;
  border-radius: var(--r-sm);
  color: var(--red);
  font-weight: 900;
  font-size: var(--fs-24);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-14deg) scale(2.1);
}

.pk-box__stamp.is-on {
  opacity: 0.9;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1);
  transition: transform var(--mo-fast) var(--mo-out), opacity var(--mo-fast) linear;
}

.pk-box.is-skip .pk-box__label.is-on,
.pk-box.is-skip .pk-box__stamp.is-on { transition-duration: var(--mo-fast); }

.pk-box__n {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 9;
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text);
  font-weight: 900;
  font-size: var(--fs-14);
  box-shadow: var(--sh-edge-sm);
}

.pk-box__n[hidden] { display: none; }

/* ------------------------------------------------------------------ result row + skip */
.pk__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.pk__result {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pk__stars {
  flex: none;
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--mo-fast) var(--mo-out), transform var(--mo-med) var(--mo-spring);
}

.pk__stars.is-on { opacity: 1; transform: none; }
.pk__star { display: inline-flex; color: var(--line); }
.pk__star.is-on { color: var(--yellow); animation: pk-star var(--mo-slow) var(--mo-spring) both; }
.pk__star:nth-child(2).is-on { animation-delay: 80ms; }
.pk__star:nth-child(3).is-on { animation-delay: 160ms; }

.pk__verdict {
  min-width: 0;
  font-weight: 900;
  font-size: var(--fs-16);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk__skip { flex: none; }

/* ------------------------------------------------------------------ keyframes */
@keyframes pk-in {
  from { transform: translateX(-140%) rotate(-8deg); }
  to { transform: none; }
}

@keyframes pk-drop {
  from { opacity: 0; transform: translateY(-60%) scale(1.85) rotate(calc(var(--r, 0deg) + 24deg)); }
  50% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@keyframes pk-lane {
  from { border-color: rgba(255, 255, 255, 0.45); background-color: rgba(255, 255, 255, 0.04); }
  to { border-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.16); }
}

@keyframes pk-ghost {
  0% { opacity: 0; transform: translateX(4%); }
  15% { opacity: 1; transform: translateX(6%); }
  75% { opacity: 1; transform: translateX(88%); }
  100% { opacity: 0; transform: translateX(92%); }
}

@keyframes pk-gap {
  from { opacity: 0.2; }
  to { opacity: 0.95; }
}

@keyframes pk-pulse {
  from { opacity: 0.45; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1.03); }
}

@keyframes pk-star {
  from { transform: scale(0.3) rotate(-30deg); }
  to { transform: none; }
}

@keyframes pk-nudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}