/* «Каталог хлама» (#junk): part cards with the real 3D part on a rusty turntable (canvas fed by catalog.js), a mass
   gauge, and a torn-paper техпаспорт on the back (CSS 3D flip). */
#junk {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(242, 194, 48, .05), transparent 70%),
    linear-gradient(180deg, var(--ink), #1a1916 50%, var(--ink));
}

/* Filter chips: masking tape, the active one is hazard yellow. */
#junk .junk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-bottom: 16px; }
#junk .junk-chips { display: flex; flex-wrap: wrap; gap: 10px 8px; }
#junk .junk-chip {
  border: 0; cursor: pointer; font-size: 15px; padding: .5em .95em .42em;
  display: inline-flex; align-items: baseline; gap: .5em;
  transition: transform .15s ease, filter .15s;
}
#junk .junk-chip b { font-size: .8em; opacity: .55; }
#junk .junk-chip:hover { transform: rotate(0deg) translateY(-2px); filter: brightness(1.08); }
#junk .junk-chip:active { transform: rotate(0deg) translateY(1px) scale(.97); }
#junk .junk-chip.is-on { background: linear-gradient(180deg, #ffd54a, #e0ab12); }
#junk .junk-chip.is-on b { opacity: 1; }
#junk .junk-howto { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
#junk .junk-howto .keycap { margin: 0 .3em; font-size: 12px; }
#junk .junk-count { margin: 0 0 22px; color: var(--paper-dim); font-size: 16px; min-height: 1.45em; }
#junk .junk-count b { color: var(--hazard); font-weight: 600; }

/* Grid: 4 across on a laptop, 2 on a phone. */
#junk .junk-grid {
  position: relative; list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(12px, 1.8vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(250px, calc(50% - 8px)), 1fr));
}
/* Below a small phone two cards per row can't fit a name next to the gauge: one per row. */
@media (max-width: 360px) { #junk .junk-grid { grid-template-columns: 1fr; } }
#junk .junk-cell { position: relative; display: flex; }
#junk .junk-cell.is-out { display: none; }

/* Card = tilt wrapper (pointer) > flipper (click) > two faces in one grid cell. Every level stretches so a grid row
   of cards shares one height. */
#junk .junk-card { position: relative; flex: 1; display: flex; perspective: 1100px; cursor: pointer; outline-offset: 6px; -webkit-tap-highlight-color: transparent; }
#junk .junk-tilt {
  flex: 1; display: flex; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
#junk .junk-card.is-hover .junk-tilt { transition-duration: .1s; }
#junk .junk-inner { flex: 1; display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.34, 1.3, .5, 1); }
#junk .junk-card.is-flipped .junk-inner { transform: rotateY(180deg); }
#junk .junk-face { grid-area: 1 / 1; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#junk .junk-back { transform: rotateY(180deg); }

/* Front: number tape, turntable window, name + scale gauge. */
#junk .junk-front { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 10px; }
#junk .junk-front::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 214, 150, .12), transparent 50%);
}
#junk .junk-card.is-hover .junk-front::after { opacity: 1; }
#junk .junk-no { position: absolute; z-index: 3; top: -9px; left: 16px; font-size: 13px; padding: .3em .8em .24em; }
#junk .junk-window {
  position: relative; aspect-ratio: 5 / 4; border-radius: 3px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 12%, rgba(255, 190, 110, .26), transparent 70%),
    radial-gradient(ellipse 90% 38% at 50% 100%, rgba(168, 137, 98, .22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #2c2925, #1a1917 62%, #221f1b);
  box-shadow: inset 0 0 0 1px #0b0a09, inset 0 14px 30px rgba(0, 0, 0, .55);
}
#junk .junk-window canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#junk .junk-role {
  position: absolute; z-index: 2; top: 10px; right: 10px; padding: .42em .55em .34em;
  font: 600 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--hazard);
  border: 1.5px solid rgba(242, 194, 48, .65); border-radius: 2px; opacity: .85;
}
#junk .junk-peek {
  position: absolute; z-index: 2; right: 8px; bottom: 10px; font-size: 12px; opacity: 0;
  transform: translateY(10px) rotate(2deg); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
#junk .junk-card.is-hover .junk-peek { opacity: 1; transform: rotate(2deg); }
@media (hover: none) { #junk .junk-peek { opacity: 1; transform: rotate(2deg); } }

#junk .junk-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); transition: opacity .5s;
}
#junk .junk-loading::before {
  content: ''; width: 38px; height: 38px; border-radius: 50%; border: 7px dotted #6d675d;
  box-shadow: inset 0 0 0 5px #2a2824; animation: junk-spin 1.2s linear infinite;
}
#junk .junk-card.is-ready .junk-loading { opacity: 0; pointer-events: none; }
#junk .junk-card.is-broken .junk-loading::before { animation: none; border-color: var(--alarm); }
@keyframes junk-spin { to { transform: rotate(1turn); } }

#junk .junk-meta { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 4px 2px; }
#junk .junk-meta > div:first-child { min-width: 0; }
#junk .junk-name { margin: 0; font-size: clamp(19px, 1.1vw + 8px, 26px); line-height: 1; }
#junk .junk-dims { display: block; margin-top: 6px; min-height: 1em; font-size: 13px; line-height: 1; color: var(--paper-dim); letter-spacing: .03em; white-space: nowrap; }
#junk .junk-scale { flex: none; display: grid; justify-items: center; gap: 3px; }
#junk .junk-gauge { width: 60px; height: 34px; overflow: visible; }
#junk .g-face { fill: #1c1b18; stroke: #6d675d; stroke-width: 2.5; }
#junk .g-ticks line { stroke: var(--paper); stroke-width: 1.4; }
#junk .g-red { fill: none; stroke: var(--alarm); stroke-width: 3; }
#junk .g-needle {
  stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round;
  transform-box: view-box; transform-origin: 32px 32px; transform: rotate(var(--a));
}
#junk .g-needle.is-kick { animation: junk-needle .75s cubic-bezier(.2, .7, .3, 1); }
#junk .g-hub { fill: #d9d0bb; stroke: #151412; stroke-width: 1; }
#junk .junk-kg { font-size: 13px; line-height: 1; color: var(--paper-dim); }
#junk .junk-kg b { color: var(--paper); font-size: 15px; font-weight: 600; }
@keyframes junk-needle {
  0% { transform: rotate(var(--a)); }
  22% { transform: rotate(calc(var(--a) + 30deg)); }
  48% { transform: rotate(calc(var(--a) - 13deg)); }
  72% { transform: rotate(calc(var(--a) + 5deg)); }
  100% { transform: rotate(var(--a)); }
}

/* Back: техпаспорт on torn paper, taped to the plate, with an ink stamp. */
#junk .junk-back { padding: 12px; display: flex; }
#junk .junk-back::before {
  content: ''; position: absolute; z-index: 2; top: 3px; left: 50%; width: 78px; height: 22px; margin-left: -39px;
  transform: rotate(-3deg); background: linear-gradient(180deg, rgba(236, 222, 178, .94), rgba(214, 198, 152, .94));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  clip-path: polygon(0 10%, 8% 0, 20% 12%, 34% 0, 50% 10%, 66% 0, 80% 12%, 92% 0, 100% 10%, 97% 50%, 100% 90%, 88% 100%, 72% 88%, 56% 100%, 40% 90%, 24% 100%, 10% 90%, 0 100%, 3% 50%);
}
#junk .junk-sheet { flex: 1; min-width: 0; padding: 20px 16px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.25; }
#junk .junk-doc { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #6b6255; }
#junk .junk-sheet .junk-name { color: #1d1b18; font-size: clamp(18px, .9vw + 8px, 24px); }
#junk .junk-spec { margin: 2px 0 0; display: grid; gap: 4px; }
#junk .junk-spec > div { display: flex; align-items: baseline; gap: 6px; }
#junk .junk-spec dt { flex: 1; display: flex; align-items: baseline; gap: 6px; color: #5a5347; white-space: nowrap; }
#junk .junk-spec dt::after { content: ''; flex: 1; min-width: 8px; border-bottom: 2px dotted rgba(34, 32, 28, .28); }
#junk .junk-spec dd { margin: 0; color: #1d1b18; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
#junk .junk-spec dd small { font-size: 12px; line-height: 1.15; color: #7a705f; margin-top: 2px; }
#junk .junk-bolts { display: inline-flex; gap: 3px; padding-top: 2px; }
#junk .junk-bolts i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a9387, #3b3833 70%); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
#junk .junk-bolts i.off { background: none; box-shadow: inset 0 0 0 1.5px rgba(34, 32, 28, .3); }
#junk .junk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 2px; }
#junk .junk-tags .junk-tag { font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; padding: .45em .6em .38em; background: #1d1b18; color: var(--hazard); }
#junk .junk-desc { margin: auto 0 0; padding-top: 4px; font-size: 15px; line-height: 1.28; color: #22201c; }
#junk .junk-stamp {
  margin: 3px 2px 0 auto; pointer-events: none; padding: .38em .6em .3em;
  border: 2.5px solid currentColor; border-radius: 3px; color: rgba(196, 38, 28, .8);
  font: 600 13px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-12deg) scale(1.8); opacity: 0; transition: transform .16s cubic-bezier(.55, 0, .9, .4), opacity .12s;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 120px 60px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0 / 120px 60px;
}
#junk .junk-card.is-flipped .junk-stamp { opacity: 1; transform: rotate(-12deg) scale(1); transition-delay: .42s; }

#junk .junk-foot { margin: clamp(28px, 4vw, 48px) 0 0; display: flex; justify-content: center; }
#junk .junk-foot .paper { max-width: 560px; margin: 0; transform: rotate(-.8deg); font-size: 18px; text-align: center; padding: 18px 26px; }

/* Two narrow columns (phones and anything up to a small tablet): compact type so the name, sizes and gauge fit, and
   the back sheet doesn't make the front card taller than its content. */
@media (max-width: 760px) {
  #junk .junk-howto { display: none; }
  #junk .junk-dims { white-space: normal; }
  #junk .junk-chip { font-size: 13px; }
  #junk .junk-front { padding: 11px 9px 9px; gap: 7px; }
  #junk .junk-window { aspect-ratio: 1 / 1; }
  #junk .junk-no { font-size: 11px; left: 10px; }
  #junk .junk-role { font-size: 9px; top: 7px; right: 7px; letter-spacing: .12em; }
  #junk .junk-peek { font-size: 10px; bottom: 6px; right: 5px; }
  #junk .junk-meta { padding: 0 2px 0 9px; gap: 4px; }
  #junk .junk-name { font-size: 16px; }
  #junk .junk-dims { font-size: 10.5px; margin-top: 4px; }
  #junk .junk-gauge { width: 42px; height: 24px; }
  #junk .junk-kg { font-size: 11px; }
  #junk .junk-kg b { font-size: 12px; }
  #junk .junk-back { padding: 7px; }
  #junk .junk-sheet { padding: 15px 9px 9px; font-size: 12px; gap: 4px; }
  #junk .junk-doc { display: none; }
  #junk .junk-sheet .junk-name { font-size: 15px; }
  #junk .junk-spec { gap: 2px; }
  #junk .junk-spec dt { gap: 3px; }
  #junk .junk-spec dd small { font-size: 10.5px; }
  #junk .junk-bolts i { width: 7px; height: 7px; }
  #junk .junk-bolts { gap: 2px; }
  #junk .junk-tags .junk-tag { font-size: 9px; }
  #junk .junk-back::before { top: -6px; }
  #junk .junk-desc { font-size: 12.5px; line-height: 1.22; }
  #junk .junk-stamp { display: none; }
}