/* Card component styles. Classes are prefixed card- / cv-. */

.cv-wrap {
  position: absolute;
  inset: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 84px);
  container-type: size;
  display: grid; place-items: center;
  padding: 0; box-sizing: border-box;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.cv-root {
  position: relative;
  width: min(calc(100vw - 36px), 420px, calc((100dvh - 220px) * 5 / 7)); /* fallback for iOS < 16 */
  width: min(100cqw, 420px, calc(100cqh * 5 / 7));
  aspect-ratio: 5 / 7;
  container-type: inline-size;
}

/* swipe wrapper: only this element is dragged */
.card-swipe {
  position: absolute; inset: 0;
  touch-action: none;
  cursor: grab;
  will-change: transform;
  border-radius: 18px;
}
.card-swipe.cv-enter { animation: cv-enter .26s ease-out; }
@keyframes cv-enter {
  from { opacity: 0; transform: scale(.94) translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* 3D flip */
.card-persp {
  position: absolute; inset: 0;
  perspective: 1200px; -webkit-perspective: 1200px;
}
.card-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, .2, .2, 1);
}
.card-flip.is-back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

.card-face {
  position: absolute; inset: 0;
  box-sizing: border-box;
  background: #fff; color: #1b1b1f;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(60,40,10,.14);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6cqw 5cqw;
  text-align: center;
}
.card-front { transform: rotateY(0deg) translateZ(1px); -webkit-transform: rotateY(0deg) translateZ(1px); }
.card-back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }

/* front */
.card-staff { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; }
.card-staff svg { display: block; width: 100%; height: 100%; max-height: 100%; }
.card-front-name { flex: none; margin-top: 4cqw; font-size: 14cqw; font-weight: 700; letter-spacing: -.02em; }

/* back */
.card-small { font-size: 4.2cqw; color: #8a8a90; line-height: 1.4; }
.card-bold { font-weight: 700; }
.card-big { font-size: 38cqw; font-weight: 700; line-height: 1; margin: 1cqw 0 4cqw; font-variant-numeric: tabular-nums; }
.card-line { font-size: 4.6cqw; color: #333; line-height: 1.6; }
.card-italic { font-style: italic; }
.card-divider { width: 70%; border: 0; border-top: 1px solid #e2e2e6; margin: 4cqw 0 3cqw; }
.card-name { font-size: 16cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.card-grip { font-size: 7cqw; font-weight: 600; margin: 1cqw 0 2cqw; }

.card-valves { display: flex; flex-direction: column; gap: 2.6cqw; margin-bottom: 4cqw; }
.card-valve {
  width: 12cqw; height: 12cqw; border-radius: 50%;
  border: .5cqw solid #333; color: #333; background: #fff;
  display: grid; place-items: center;
  font-size: 5cqw; font-weight: 600;
}
.card-valve.is-pressed { background: #222; color: #fff; }

/* tint overlay, same footprint as the card */
.card-tint {
  position: absolute; inset: 0; border-radius: 18px;
  opacity: 0; pointer-events: none;
  z-index: 2;
}
.cv-expired-state .card-tint { background: rgb(214, 69, 69); opacity: .3; }

/* timer bar at card top */
.card-timer {
  position: absolute; top: 2.4cqw; left: 6cqw; right: 6cqw; height: 1.4cqw;
  border-radius: 1cqw; overflow: hidden;
  background: rgba(0,0,0,.07);
  opacity: 0; pointer-events: none; z-index: 3;
  transition: opacity .2s;
}
.cv-timing .card-timer { opacity: 1; }
.card-timer-bar {
  width: 100%; height: 100%; background: #e0883a;
  transform-origin: left center; will-change: transform;
}

/* expired banner (top: bottom is occupied by the threshold dots) */
.card-expired {
  position: absolute; left: 0; right: 0; top: 5cqw; z-index: 3;
  text-align: center; font-size: 4.4cqw; font-weight: 700; color: #b02a2a;
  opacity: 0; pointer-events: none; transition: opacity .25s .3s;
}
.cv-expired-state .card-expired { opacity: 1; }

/* threshold dots + labels (fixed relative to the stage, not dragged) */
.cv-dot {
  position: absolute; bottom: 4.5cqw; z-index: 4;
  width: 3.4cqw; height: 3.4cqw; margin-left: -1.7cqw;
  border-radius: 50%; pointer-events: none;
  border: .6cqw solid currentColor; background: transparent;
  opacity: .45; transition: transform .15s, opacity .15s, background-color .15s;
}
.cv-dot-left  { color: #d64545; }
.cv-dot-right { color: #2e9e5b; }
.cv-dot.cv-near { opacity: .9; }
.cv-dot.cv-on { background: currentColor; opacity: 1; animation: cv-pulse .35s ease-out; transform: scale(1.5); }
@keyframes cv-pulse { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1.5); } }

.cv-label {
  position: absolute; bottom: 10cqw; z-index: 4;
  transform: translateX(-50%);
  padding: 1cqw 3cqw; border-radius: 99px; white-space: nowrap;
  font-size: 4cqw; font-weight: 700; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.cv-locked .cv-dot-right, .cv-locked .cv-label-right { display: none; }
.cv-label-left  { background: #d64545; }
.cv-label-right { background: #2e9e5b; }
.cv-label.cv-show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card-flip { transition-duration: .01s; }
  .card-swipe.cv-enter { animation: none; }
  .cv-dot.cv-on { animation: none; }
  .card-timer-bar { will-change: auto; }
}

/* Pull-down for a new batch: hint sits above the card, revealed as the card is pulled down */
.cv-pull {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none;
  background: rgba(120, 100, 70, .14); color: var(--muted, #8a8174);
  opacity: 0; transition: background .2s, color .2s; z-index: 0;
}
.cv-pull-arrow { display: inline-block; transition: transform .2s; }
.cv-pull.cv-ready { background: var(--accent, #b5532a); color: #fff; }
.cv-pull.cv-ready .cv-pull-arrow { transform: rotate(180deg); }
.card-swipe { z-index: 1; }