/* ============================================================
   SCRAPYARD / JOB BOARD
   ============================================================
   Shown when body.phase-scrapyard. Hidden during working phase.
   Aesthetic: cork/wood pinboard with job cards tacked up.
   ============================================================ */

/* Phase-based visibility */
.scrapyard { display: none; }
body.phase-scrapyard .scrapyard { display: block; }
body.phase-scrapyard main { display: none; }
body.phase-scrapyard footer.action-bar { display: none; }

/* Pinboard surface */
.scrapyard {
  background:
    /* subtle speckled cork dots */
    radial-gradient(circle at 7px 7px, rgba(43, 24, 16, 0.12) 0.8px, transparent 1.2px),
    radial-gradient(circle at 17px 21px, rgba(43, 24, 16, 0.08) 0.7px, transparent 1.0px),
    /* warm cork base */
    linear-gradient(180deg, #c99a5f 0%, #a87943 100%);
  background-size: 14px 14px, 24px 24px, 100% 100%;
  border: 4px solid var(--brass-dark);
  border-radius: 6px;
  padding: 20px 22px 24px;
  color: var(--ink);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 10px rgba(43, 24, 16, 0.3),
    0 6px 14px rgba(0, 0, 0, 0.4);
  min-height: 60vh;
}

/* ------------------------------------------------------------
   INTRO
   ------------------------------------------------------------ */
.scrap-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(43, 24, 16, 0.25);
}
.scrap-title-stack h2 {
  font-family: 'Didot', Georgia, serif;
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
.scrap-subtitle {
  font-size: 11px;
  letter-spacing: 2px;
  font-style: italic;
  color: rgba(43, 24, 16, 0.7);
  margin-top: 2px;
}

.scrap-stats {
  display: flex;
  gap: 8px;
}
.scrap-stat {
  background: var(--ink);
  color: #fdf0d5;
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  padding: 5px 10px;
  text-align: center;
  min-width: 64px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.scrap-stat .num {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
  line-height: 1;
}
.scrap-stat .lbl {
  display: block;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(253, 240, 213, 0.7);
  margin-top: 2px;
}

/* ------------------------------------------------------------
   FINISHED-SHIFT BANNER
   ------------------------------------------------------------ */
.scrap-finished {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fdf0d5;
  border: 2px solid var(--green-dark);
  border-radius: 4px;
  padding: 14px 20px;
  margin-bottom: 18px;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.3);
}
.scrap-finished strong {
  letter-spacing: 3px;
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 15px;
}
.scrap-finished-btn {
  margin-top: 10px;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--brass-dark);
  padding: 6px 16px;
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 2px;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
}
.scrap-finished-btn:hover { background: #f4d976; }

/* ------------------------------------------------------------
   JOB CARD BOARD
   ------------------------------------------------------------ */
.scrap-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.scrap-card {
  background: linear-gradient(180deg, #fdf2d0 0%, #e8d5a8 100%);
  border: 1px solid var(--paper-edge);
  border-radius: 3px;
  padding: 12px 14px 14px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 3px 0 rgba(43, 24, 16, 0.1),
    0 5px 12px rgba(0, 0, 0, 0.25);
  transform: rotate(-0.4deg);
  transition: transform 0.15s;
}
.scrap-card:nth-child(even) { transform: rotate(0.3deg); }
.scrap-card:nth-child(3n)   { transform: rotate(-0.2deg); }
.scrap-card:hover { transform: rotate(0deg) translateY(-2px); }

/* Brass pin in the top-center */
.scrap-card-pin {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 35%, var(--gold), var(--brass-dark));
  border-radius: 50%;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 -2px 2px rgba(0, 0, 0, 0.3);
}

/* Status stamp overlay (when card has a status) */
.scrap-stamp {
  position: absolute;
  top: 14px;
  right: -4px;
  transform: rotate(8deg);
  font-family: 'Arial Black', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 8px;
  border: 2px solid currentColor;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.85;
}
.scrap-stamp.stamp-working  { color: var(--brass-dark); border-color: var(--brass-dark); background: rgba(201, 169, 97, 0.2); }
.scrap-stamp.stamp-perfect  { color: var(--ok);  border-color: var(--ok);  background: rgba(61, 139, 80, 0.15); }
.scrap-stamp.stamp-mixed    { color: var(--warn); border-color: var(--warn); background: rgba(200, 136, 40, 0.15); }
.scrap-stamp.stamp-disaster { color: var(--bad);  border-color: var(--bad);  background: rgba(166, 48, 48, 0.15); }
.scrap-stamp.stamp-scrapped { color: var(--ink-light); border-color: var(--ink-light); background: rgba(43, 24, 16, 0.08); }

/* Disabled state for done cards */
.scrap-card.status-shipped-perfect,
.scrap-card.status-shipped-mixed,
.scrap-card.status-shipped-disaster,
.scrap-card.status-scrapped {
  opacity: 0.65;
}
.scrap-card.status-shipped-perfect:hover,
.scrap-card.status-shipped-mixed:hover,
.scrap-card.status-shipped-disaster:hover,
.scrap-card.status-scrapped:hover {
  transform: rotate(-0.4deg);
}

/* ---- HEADER row ---- */
.scrap-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--ink-light);
}
.scrap-tier-tag {
  font-family: Georgia, serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--brass-dark);
}
.scrap-tier-tag.tier-0 { background: #d3c08c; }
.scrap-tier-tag.tier-1 { background: #b3d4b8; color: var(--green-dark); }
.scrap-tier-tag.tier-2 { background: #c8b8dc; color: #4a3a6a; }
.scrap-tier-tag.tier-3 { background: #e8a894; color: #6f2a18; }
.scrap-type {
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.scrap-serial {
  margin-left: auto;
  font-size: 9px;
  opacity: 0.7;
}

/* ---- TITLE ---- */
.scrap-card-title h3 {
  font-family: 'Didot', Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 3px;
}
.scrap-tagline {
  font-style: italic;
  font-size: 11px;
  color: var(--ink-light);
  line-height: 1.4;
  margin-bottom: 10px;
}

/* ---- SPECS ---- */
.scrap-specs {
  background: rgba(43, 24, 16, 0.05);
  border-left: 3px solid var(--brass);
  padding: 6px 10px;
  margin-bottom: 12px;
  border-radius: 0 2px 2px 0;
}
.scrap-specs-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--brass-dark);
  margin-bottom: 4px;
}
.scrap-specs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--ink);
  line-height: 1.5;
}
.scrap-specs ul li {
  padding-left: 12px;
  position: relative;
}
.scrap-specs ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--brass);
  font-weight: bold;
}
.scrap-specs ul li.more {
  font-style: italic;
  color: var(--ink-light);
  font-size: 10px;
}

/* ---- DIFFICULTY ACCEPT ROW ---- */
.scrap-difficulty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.scrap-accept-btn {
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-dark) 100%);
  color: #fdf0d5;
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  padding: 6px 4px 5px;
  font-family: Georgia, serif;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.1s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.scrap-accept-btn:hover { transform: translateY(-1px); }
.scrap-accept-btn:active { transform: translateY(1px); }

.scrap-accept-btn .diff-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: bold;
}
.scrap-accept-btn .diff-gain {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--gold);
}

/* Color-per-difficulty */
.scrap-accept-btn.diff-standard {
  background: linear-gradient(180deg, #9fb5a0 0%, #5c7e60 100%);
  border-color: #3f5943;
}
.scrap-accept-btn.diff-expedited {
  background: linear-gradient(180deg, #d4a858 0%, #8a6420 100%);
  border-color: #5c3f0e;
}
.scrap-accept-btn.diff-prototype {
  background: linear-gradient(180deg, #c47a4a 0%, #7a3a1a 100%);
  border-color: #4d1f0d;
}

/* ---- ALREADY-DONE label ---- */
.scrap-already {
  padding: 8px;
  text-align: center;
  background: rgba(43, 24, 16, 0.05);
  border: 1px dashed rgba(43, 24, 16, 0.2);
  border-radius: 2px;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-light);
  letter-spacing: 1px;
}

/* ------------------------------------------------------------
   BACK-TO-BOARD BUTTON (in cd-header during working phase)
   ------------------------------------------------------------ */
.back-to-board-btn {
  background: rgba(43, 24, 16, 0.4);
  color: #fdf0d5;
  border: 1px solid var(--brass-dark);
  padding: 4px 8px;
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  border-radius: 2px;
  cursor: pointer;
  margin-left: 8px;
}
.back-to-board-btn:hover {
  background: var(--brass-dark);
  color: var(--gold);
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 680px) {
  .scrap-intro { grid-template-columns: 1fr; }
  .scrap-stats { flex-wrap: wrap; }
  .scrap-board { grid-template-columns: 1fr; }
  .scrap-card { transform: none; }
}

/* ============================================================
   SIDE JOBS — separate section, smaller cards, WC-only payout
   ============================================================ */
.scrap-side-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 24px 0 10px;
  padding: 8px 14px;
  border-top: 2px dashed var(--paper-edge);
  border-bottom: 1px dashed var(--paper-edge);
  background: rgba(201, 169, 97, 0.08);
}
.scrap-side-title {
  font-family: 'Didot', Georgia, serif;
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--brass-dark);
  font-weight: bold;
}
.scrap-side-sub {
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-light);
}

.scrap-board-side {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 8px 4px 16px;
}

/* Side-job cards: smaller, simpler, gold-accent instead of tier-colored */
.scrap-card-side {
  padding: 12px 14px 10px;
  background: linear-gradient(180deg, #fdf0d5 0%, #f5e4b8 100%);
  border: 2px solid var(--paper-edge);
  border-top: 3px solid var(--brass-dark);
  border-radius: 3px;
  position: relative;
  min-height: auto;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scrap-card-side:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.scrap-side-banner {
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Didot', Georgia, serif;
  font-size: 9px;
  letter-spacing: 2px;
  padding: 2px 7px;
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  font-weight: bold;
  z-index: 1;
}

/* Job-type color tag */
.scrap-jobtype-tag {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--gold);
}
.jobtype-tuning { background: #4a3a6a; color: #e8dcf5; }
.jobtype-build  { background: var(--green-dark); color: #fdf0d5; }
.jobtype-craft  { background: #6f2a18; color: #ffe5cc; }

/* Side-job cards reuse .scrap-card-header / .scrap-card-title / .scrap-specs
   but at compacted size — override some spacing */
.scrap-card-side .scrap-card-title h3 {
  font-size: 14px;
  margin: 2px 0 0;
}
.scrap-card-side .scrap-tagline {
  font-size: 10px;
  line-height: 1.3;
}
.scrap-card-side .scrap-specs ul {
  padding-left: 14px;
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.4;
}
.scrap-card-side .scrap-specs li { margin-bottom: 1px; }

/* Single ACCEPT button with inline WC payout */
.scrap-side-accept {
  width: 100%;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-dark) 100%);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 6px 10px;
  font-family: 'Didot', Georgia, serif;
  letter-spacing: 2px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 2px;
  margin-top: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.scrap-side-accept:hover {
  background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 100%);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.side-accept-label {
  font-size: 11px;
}
.side-accept-gain {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  background: var(--ink);
  color: var(--gold);
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 1px;
}

/* ============================================================
   SCRAPYARD — BUDGET ROW on main-case cards
   ============================================================ */
.scrap-budget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  margin: 8px 0 4px;
  background: rgba(43, 24, 16, 0.07);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--brass);
  border-radius: 2px;
  font-family: Georgia, serif;
}
.scrap-budget-label {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: var(--ink-light);
}
.scrap-budget-amt {
  font-family: 'Didot', Georgia, serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.scrap-budget-amt .bud-unit {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: normal;
  color: var(--ink-light);
  margin-left: 2px;
  letter-spacing: 1px;
}
.scrap-budget-note {
  margin-left: auto;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
}
.scrap-budget-fresh {
  border-left-color: var(--green-dark);
}
.scrap-budget-fresh .scrap-budget-note {
  background: var(--green);
  color: #fdf0d5;
  border: 1px solid var(--green-dark);
}
.scrap-budget-repair {
  border-left-color: var(--brass-dark);
}
.scrap-budget-repair .scrap-budget-note {
  background: var(--brass-dark);
  color: var(--paper);
  border: 1px solid var(--ink);
}

/* ============================================================
   SHIFT-START FLAVOR STRIP (rotating atmospheric line)
   ============================================================ */
.scrap-shift-flavor {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-light);
  padding: 10px 16px;
  margin: 12px 0 16px;
  background: rgba(253, 240, 213, 0.55);
  border-left: 4px solid var(--brass-dark);
  border-right: 1px dashed var(--paper-edge);
  border-radius: 2px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.scrap-shift-flavor::before {
  content: '“';
  position: absolute;
  top: 2px;
  left: 6px;
  font-family: 'Didot', Georgia, serif;
  font-size: 22px;
  color: var(--brass);
  opacity: 0.5;
  line-height: 1;
}
.scrap-shift-flavor::after {
  content: '— Morning huddle';
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  font-style: normal;
  color: var(--brass-dark);
  opacity: 0.7;
  margin-top: 6px;
  text-align: right;
}

/* ============================================================
   NEW CASE PULSE — fresh (unshipped) main cards get a subtle glow
   ============================================================ */
.scrap-card.status-fresh {
  animation: newCasePulse 3s ease-in-out infinite;
}
.scrap-card.status-fresh::after {
  content: 'NEW';
  position: absolute;
  top: 8px;
  right: -8px;
  background: linear-gradient(180deg, #a63030 0%, #6b1818 100%);
  color: #fff;
  font-family: 'Didot', Georgia, serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 3px 8px;
  border: 1px solid #2b1810;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: rotate(4deg);
  z-index: 2;
}
@keyframes newCasePulse {
  0%, 100% {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% {
    box-shadow:
      0 3px 10px rgba(201, 169, 97, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
/* Side-job cards shouldn't animate — they're smaller, more freq, different feel */
.scrap-card-side.status-fresh {
  animation: none;
}
.scrap-card-side.status-fresh::after {
  display: none;
}

/* ============================================================
   RECEIVING DOCK (recently-shipped log)
   ============================================================
   A compact receipt-tape strip showing the last 6 ships with grade chip +
   toy name + payout. Sits between the shift flavor and the main board.
*/
.scrap-recent {
  margin: 4px 0 16px;
  padding: 8px 12px 10px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 2px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.1);
}
.scrap-recent-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--paper-edge);
  margin-bottom: 6px;
}
.scrap-recent-title {
  font-family: 'Didot', Georgia, serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink);
  font-weight: bold;
}
.scrap-recent-sub {
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
  color: var(--ink-light);
}

.scrap-recent-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.recent-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 3px 6px;
  font-family: Georgia, serif;
  font-size: 11px;
  border-bottom: 1px dotted rgba(74, 58, 44, 0.12);
}
.recent-entry:last-child { border-bottom: none; }

.recent-chip {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid transparent;
  min-width: 82px;
  justify-content: center;
}
.chip-glyph { font-size: 11px; }
.chip-perfect {
  background: var(--green);
  color: #fdf0d5;
  border-color: var(--green-dark);
}
.chip-mixed {
  background: #d4a04a;
  color: #2b1810;
  border-color: #8a6a2a;
}
.chip-disaster, .chip-scrapped {
  background: var(--bad);
  color: #ffe5cc;
  border-color: #6b1818;
}
.chip-side_job_done {
  background: var(--brass);
  color: var(--ink);
  border-color: var(--brass-dark);
}
.recent-name {
  color: var(--ink);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-gain {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--green-dark);
  font-weight: bold;
  white-space: nowrap;
}
.recent-gain.recent-nogain {
  color: var(--ink-light);
  font-style: italic;
  font-weight: normal;
}

/* ============================================================
   CONVEYOR-BELT ARRIVAL (first render of shift)
   ============================================================
   Cards slide in from the right and settle, staggered. Only applied
   when the scrap-board has .conveyor-in (set on shift start); loses
   on subsequent renders so returning from a ship doesn't re-animate.
*/
.scrap-board.conveyor-in .scrap-card {
  animation: conveyorArrive 0.55s cubic-bezier(0.2, 0.85, 0.4, 1) both;
}

/* Per-child staggering — nth-child drives the delay. Works up to ~12
   cards; extras inherit the 12th delay which is fine visually. */
.scrap-board.conveyor-in .scrap-card:nth-child(1)  { animation-delay: 0.00s; }
.scrap-board.conveyor-in .scrap-card:nth-child(2)  { animation-delay: 0.07s; }
.scrap-board.conveyor-in .scrap-card:nth-child(3)  { animation-delay: 0.14s; }
.scrap-board.conveyor-in .scrap-card:nth-child(4)  { animation-delay: 0.21s; }
.scrap-board.conveyor-in .scrap-card:nth-child(5)  { animation-delay: 0.28s; }
.scrap-board.conveyor-in .scrap-card:nth-child(6)  { animation-delay: 0.35s; }
.scrap-board.conveyor-in .scrap-card:nth-child(7)  { animation-delay: 0.42s; }
.scrap-board.conveyor-in .scrap-card:nth-child(8)  { animation-delay: 0.49s; }
.scrap-board.conveyor-in .scrap-card:nth-child(n+9) { animation-delay: 0.56s; }

@keyframes conveyorArrive {
  from {
    opacity: 0;
    transform: translateX(120px) rotate(2deg);
  }
  60% {
    opacity: 1;
    transform: translateX(-8px) rotate(-0.5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* ============================================================
   NEW STAMP TEAR-AWAY (on accept)
   ============================================================
   The .scrap-card.status-fresh::after "NEW" tag tears off when the
   player clicks accept. Added via .stamp-tearing class; animation
   plays ~260ms before the actual accept navigation fires.
*/
.scrap-card.stamp-tearing::after {
  animation: stampTearAway 0.32s cubic-bezier(0.45, 0, 0.8, 0.6) forwards;
}

@keyframes stampTearAway {
  0%   { transform: rotate(4deg) translate(0, 0); opacity: 1; }
  25%  { transform: rotate(18deg) translate(4px, -3px); }
  60%  { transform: rotate(45deg) translate(22px, -8px) scale(1.1); opacity: 0.9; }
  100% { transform: rotate(75deg) translate(80px, 40px) scale(0.9); opacity: 0; }
}

/* Card itself also dips slightly to sell the "I'm being picked up" beat */
.scrap-card.stamp-tearing {
  animation: cardPickup 0.32s ease-out forwards;
}
@keyframes cardPickup {
  0%   { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
  40%  { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
  100% { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(201,169,97,0.3); }
}