/* Product/crop cards (market + targets) and hand cards. From the Wooden mock. */

.pcard {
  width: 62px; height: 90px;
  border-radius: 9px;
  background: var(--color-parchment-card);
  border: 2px solid #fff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  flex: 0 0 auto;
}
.pcard.tappable { cursor: pointer; }
.pcard.sel { outline: 3px solid var(--color-gold); outline-offset: 1px; }
.pcard .banner {
  background: var(--cb, var(--crop-pea));
  color: #fff; font-size: 9px; font-weight: var(--font-weight-bold);
  text-align: center; padding: 3px 2px 2px; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.pcard .corner { position: absolute; top: 2px; width: 11px; height: 11px; }
.pcard .corner.l { left: 3px; }
.pcard .corner.r { right: 3px; }
.pcard .art { flex: 1; display: flex; align-items: center; justify-content: center; background: #fbf3df; }
.pcard .art svg { width: 38px; height: 38px; }
.pcard .counter { display: flex; align-items: center; gap: 2px; background: #fff; border-top: 1px solid #eadfc2; padding: 2px 3px; }
.pcard .val {
  font-size: 11px; font-weight: var(--font-weight-heavy);
  color: #fff; background: var(--cb, var(--crop-pea));
  border-radius: 4px; padding: 0 4px; line-height: 1.35;
}
.pcard .thr { display: flex; gap: 2px; font-size: 7px; font-weight: var(--font-weight-bold); color: var(--color-brown-muted); flex-wrap: wrap; }
.pcard .thr span { display: inline-flex; align-items: center; gap: 1px; }
.pcard .thr i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-gold); display: inline-block; font-style: normal; }

/* Hand cards */
.hcard {
  width: 48px; height: 70px; margin-left: -12px;
  border-radius: 8px; background: var(--color-parchment-card);
  border: 2px solid #fff; box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .12s ease;
  flex: 0 0 auto;
}
.hcard:first-child { margin-left: 0; }
.hcard .hb { font-size: 7.5px; font-weight: var(--font-weight-bold); color: #fff; text-align: center; padding: 2px 1px; background: var(--cb, var(--crop-pea)); }
.hcard .ha { flex: 1; display: flex; align-items: center; justify-content: center; background: #fbf3df; }
.hcard .ha svg { width: 26px; height: 26px; }
.hcard.front {
  transform: translateY(-12px) scale(1.06);
  outline: 3px solid var(--color-gold); outline-offset: 0;
  box-shadow: var(--shadow-button-hover);
  z-index: 2;
}