/* ============================================================
   NAMES — swipe-to-rank naming (MASH's sibling)
   white paper · black ink · one red accent · fridge-magnet soul
   ============================================================ */

:root{
  --bg:        #ffffff;
  --card:      #ffffff;
  --ink:       #111111;
  --ink-soft:  #6b6b6b;
  --hair:      rgba(0,0,0,.10);
  --hair-soft: rgba(0,0,0,.06);
  --red:       #ff1f1f;
  --red-deep:  #d40000;
  --trim:      rgba(0,0,0,.13);   /* faded, cut-away letters      */

  /* paper-cutout shadow: a tight contact line + a soft lift */
  --cut: 0 1px 0 rgba(0,0,0,.05), 0 2px 2px rgba(0,0,0,.04),
         0 14px 28px -16px rgba(0,0,0,.30);
  --cut-hi: 0 2px 0 rgba(0,0,0,.06), 0 18px 38px -14px rgba(0,0,0,.38);

  --sans: "Helvetica Neue", Helvetica, Arial, "Arial Nova", sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

[hidden]{ display:none !important; }

.noscript-note{
  position:relative; z-index:2; margin:40px auto; max-width:420px; text-align:center;
  font-weight:700; font-size:14px;
}

/* faint speckled paper texture so white-on-white still breathes */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(0,0,0,.035) .6px, transparent .6px),
    radial-gradient(rgba(0,0,0,.025) .6px, transparent .6px);
  background-size:22px 22px, 22px 22px;
  background-position:0 0, 11px 11px;
}

.screen{ position:relative; z-index:1; min-height:100%; }

/* ───────────────────────── brand ───────────────────────── */
.brand{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.brand__mark{
  font-weight:900; letter-spacing:-.05em; line-height:.8; color:var(--ink);
}
.brand__a{
  display:inline-block; color:var(--red); transform:rotate(-9deg);
  transform-origin:60% 60%;
}
.brand__sub{
  font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); transform:translateY(-4px);
}
.brand__mark--link{ text-decoration:none; }
.brand__mark--hero{ font-size:clamp(56px,13vw,116px); }
.brand__mark--mini{ font-size:26px; flex:0 0 auto; }

/* ─────────────────── hero screens (landing / join / missing) ── */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; padding:clamp(44px,10vh,110px) 20px 8px;
  animation:rise .5s ease both;
}
.brand--hero{ flex-direction:column; align-items:center; gap:10px; }
.brand--hero .brand__sub{ transform:none; }
.hero__hint{
  margin:6px 0 0; max-width:440px;
  font-size:14px; line-height:1.55; color:var(--ink-soft); font-weight:500;
}

.landing{
  max-width:660px; margin:0 auto; padding:30px 20px 90px;
  display:flex; flex-direction:column; gap:36px;
}

.paper-card{
  background:var(--card); border:1px solid var(--hair); border-radius:8px;
  box-shadow:var(--cut); padding:28px 26px 26px;
  transform:rotate(-.4deg);
  animation:rise .5s ease .06s both;
}

.field{ display:block; margin-bottom:22px; }
.field__label{
  display:block; font-size:11px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px;
}
.field__input{
  width:100%; border:none; outline:none; background:transparent;
  font-family:var(--sans); font-weight:900; font-size:25px; letter-spacing:-.02em;
  color:var(--ink); padding:4px 0 7px; border-bottom:2px solid var(--hair);
  border-radius:0;
}
.field__input:focus{ border-bottom-color:var(--red); }
.field__input::placeholder{ color:var(--trim); font-weight:700; letter-spacing:0; }
.field--small .field__input{ font-size:17px; font-weight:700; }

.join__kicker{
  margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft);
}
.join__title{
  margin:0 0 24px; font-size:clamp(26px,6vw,42px); font-weight:900;
  letter-spacing:-.03em; text-transform:uppercase; line-height:1;
  overflow-wrap:anywhere;
}
.join__hint{
  margin:16px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.55;
}
.missing-card__btn{ display:inline-block; text-decoration:none; margin-top:18px; }

/* three-step explainer */
.steps{
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  animation:rise .5s ease .12s both;
}
@media (min-width:720px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--card); border:1px solid var(--hair); border-radius:6px;
  box-shadow:var(--cut); padding:16px 16px 18px;
}
.step:nth-child(1){ transform:rotate(-.8deg); }
.step:nth-child(2){ transform:rotate(.6deg); }
.step:nth-child(3){ transform:rotate(-.3deg); }
.step__n{ font-weight:900; font-size:13px; color:var(--red); letter-spacing:.08em; }
.step__t{
  margin:7px 0 6px; font-size:15px; font-weight:900; text-transform:uppercase;
  letter-spacing:.04em;
}
.step__p{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-soft); }

/* ───────────────────────── buttons (MASH language) ────────── */
.solid-btn{
  border:none; background:var(--ink); color:#fff; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:13px; letter-spacing:.02em;
  padding:9px 15px; border-radius:6px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 6px 14px -7px rgba(0,0,0,.7);
  transition:transform .12s, box-shadow .12s;
  touch-action:manipulation;
}
.solid-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 18px -7px rgba(0,0,0,.75); }
.solid-btn:active{ transform:translateY(0); }
.solid-btn--big{ width:100%; justify-content:center; font-size:15px; padding:14px 18px; }

.ghost-btn{
  border:1px solid var(--hair); background:#fff; color:var(--ink); cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:13px;
  padding:9px 13px; border-radius:6px; transition:border-color .12s, color .12s;
  touch-action:manipulation;
}
.ghost-btn:hover{ border-color:var(--red); color:var(--red); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--hair); background:#fff; cursor:pointer;
  font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.04em;
  padding:7px 11px; border-radius:5px; color:var(--ink); text-transform:lowercase;
  transition:transform .12s, box-shadow .12s, background .12s, color .12s;
  touch-action:manipulation;
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 4px 10px -5px rgba(0,0,0,.5); }
.chip:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none; }
.chip.flash{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.flash .lucide{ stroke:#fff; }

/* icons (Lucide) */
.ico{ display:inline-flex; }
.lucide{ width:16px; height:16px; display:block; }
.chip .lucide{ width:13px; height:13px; }
.solid-btn .lucide{ width:15px; height:15px; }

/* section titles */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:14px;
}
.section-title{
  margin:0; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.section-title--mini{ font-size:11px; color:var(--ink-soft); }
.section-title--ico{ display:flex; align-items:center; gap:8px; }
.section-title--ico .lucide{ width:15px; height:15px; color:var(--red); }
.section-title--mini .lucide{ width:13px; height:13px; color:var(--ink-soft); }
.section-count{
  font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--ink-soft);
}

/* messages */
.inline-msg{
  margin:10px 0 0; font-size:13px; font-weight:600; color:var(--red-deep);
  line-height:1.5; overflow-wrap:anywhere;
}
.inline-msg--ok{ color:var(--ink-soft); }
.inline-msg--center{ text-align:center; }
.empty-note{ margin:14px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.55; }
.micro-note{
  margin:14px 0 0; font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
}

/* ───────────────────────── app header ───────────────────────── */
.apphead{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
  padding:24px clamp(16px,4vw,56px) 6px;
  animation:rise .5s ease both;
}
.apphead__session{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  flex:1 1 260px; min-width:0;
}
.session-title{
  margin:0; font-size:clamp(20px,4vw,30px); font-weight:900; letter-spacing:-.03em;
  text-transform:uppercase; line-height:1; overflow-wrap:anywhere;
}
.me{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.me__label{
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.me__name{
  font-weight:900; font-size:14px; letter-spacing:-.01em; text-transform:uppercase;
  overflow-wrap:anywhere;
}
.budget{
  display:inline-flex; align-items:center; gap:3px;
  padding-left:12px; border-left:1px solid var(--hair);
}
.budget__star .lucide{ width:18px; height:18px; color:var(--trim); fill:none; }
.budget__star.is-spent .lucide{ color:var(--red); fill:var(--red); }

/* ───────────────────────── board layout ───────────────────────── */
.board{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:44px;
  padding:20px clamp(16px,4vw,56px) 100px;
  max-width:1280px; margin:0 auto; width:100%;
}
@media (min-width:980px){
  .board{
    display:grid; grid-template-columns:minmax(320px,400px) 1fr;
    grid-template-areas:"share share" "mine deck" "results deck";
    gap:40px clamp(32px,4vw,64px); align-items:start;
  }
  .sharebar{ grid-area:share; }
  .panel--mine{ grid-area:mine; }
  .panel--deck{ grid-area:deck; }
  .panel--results{ grid-area:results; }
}

/* ───────────────────────── share bar ───────────────────────── */
.sharebar{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px;
  padding:16px 18px;
  background:var(--card); border:1px solid var(--hair);
  border-left:5px solid var(--red); border-radius:8px;
  box-shadow:var(--cut); transform:rotate(-.25deg);
  animation:rise .5s ease .03s both;
}
.sharebar__text{
  flex:1 1 260px; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.sharebar__label{
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red-deep);
}
.sharebar__url{
  font-weight:800; font-size:clamp(13px,2.6vw,16px); letter-spacing:-.01em;
  overflow-wrap:anywhere; user-select:all; -webkit-user-select:all;
}
.sharebar__btn{ flex:0 0 auto; }
.sharebar__btn.flash{ background:var(--red); }
.panel{ animation:rise .5s ease both; min-width:0; }
.panel--deck{ animation-delay:.06s; }
.panel--results{ animation-delay:.12s; }

/* ───────────────────────── your names ───────────────────────── */
.propose{ display:flex; gap:10px; align-items:stretch; }
.propose__input{
  flex:1; min-width:0; resize:vertical; min-height:54px;
  border:2px dashed var(--hair); border-radius:6px; background:#fff;
  padding:10px 12px; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--ink); outline:none; transition:border-color .15s;
}
.propose__input:focus{ border-color:var(--red); }
.propose__input::placeholder{ color:var(--trim); font-weight:500; }
.propose__btn{ align-self:stretch; }

.wordstorm{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.wordstorm:empty{ display:none; }

/* a word magnet (one of your proposals) */
.magnet{
  position:relative; user-select:none;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); color:var(--ink);
  font-weight:800; font-size:14px; letter-spacing:-.01em; text-transform:uppercase;
  padding:7px 10px; border-radius:4px; border:1px solid var(--hair);
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 5px 10px -6px rgba(0,0,0,.4);
  transition:transform .14s ease, box-shadow .14s ease;
  animation:drop .3s cubic-bezier(.18,.9,.25,1.1) both;
}
.magnet:nth-child(4n+1){ transform:rotate(-1.6deg); }
.magnet:nth-child(4n+2){ transform:rotate(1.4deg); }
.magnet:nth-child(4n+3){ transform:rotate(-.6deg); }
.magnet:nth-child(4n+4){ transform:rotate(.9deg); }
.magnet:hover{
  transform:translateY(-2px) rotate(0);
  box-shadow:0 2px 0 rgba(0,0,0,.06), 0 12px 18px -8px rgba(0,0,0,.5);
  z-index:3;
}
.magnet__text{ overflow-wrap:anywhere; }
.magnet__star{
  border:none; background:none; cursor:pointer; display:inline-flex;
  padding:3px; margin:-3px; color:var(--trim); transition:color .12s, transform .12s;
  touch-action:manipulation;
}
.magnet__star:hover{ color:var(--red); transform:scale(1.15); }
.magnet__star .lucide{ width:15px; height:15px; }
.magnet__star[aria-pressed="true"]{ color:var(--red); }
.magnet__star[aria-pressed="true"] .lucide{ fill:var(--red); }
.magnet__x{
  border:none; background:none; cursor:pointer; display:inline-flex;
  padding:3px; margin:-3px; color:var(--ink-soft); transition:color .12s;
  touch-action:manipulation;
}
.magnet__x:hover{ color:var(--red); }
.magnet__x .lucide{ width:12px; height:12px; }

/* ───────────────────────── the deck ───────────────────────── */
.deck{
  position:relative; height:clamp(300px,52vh,470px);
  max-width:540px; margin:14px auto 0; width:100%;
}
.deck__stack{ position:absolute; inset:0; }

.swipe-card{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:30px 26px;
  background:var(--card); border:1px solid var(--hair); border-radius:12px;
  box-shadow:var(--cut-hi);
  /* pan-y: vertical touch flicks scroll the page as normal; the JS claims the
     gesture only once clearly-horizontal card-drag intent is established. */
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;
  will-change:transform;
}
.swipe-card:active{ cursor:grabbing; }
.swipe-card--under{
  pointer-events:none; box-shadow:var(--cut);
  transform:translateY(calc(var(--depth) * 11px))
            scale(calc(1 - var(--depth) * .045))
            rotate(calc(var(--depth) * -1.1deg));
}
.swipe-card.is-dragging{ transition:none; box-shadow:var(--cut-hi); z-index:30; }
.swipe-card.is-snapping{
  transition:transform .22s cubic-bezier(.2,.9,.3,1.15);
}
.swipe-card.is-flying{
  transition:transform .38s cubic-bezier(.2,.8,.3,1), opacity .38s ease;
  pointer-events:none; z-index:40;
}
.swipe-card--return{ animation:cardReturn .32s cubic-bezier(.18,.9,.25,1.1) both; }
.swipe-card.is-denied{ animation:deny .38s ease both; }
/* first-run demo: JS walks the card through the three swipe poses */
.swipe-card.is-demoing{ transition:transform .5s cubic-bezier(.3,.8,.3,1); }
.swipe-card.is-demoing .stamp{ transition:opacity .4s ease; }

.swipe-card__pin{
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%; background:var(--red);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.25);
}
.swipe-card__word{
  font-weight:900; font-size:clamp(34px,9vw,58px); letter-spacing:-.04em;
  line-height:.95; text-transform:uppercase; text-align:center;
  overflow-wrap:anywhere; max-width:100%;
}
.swipe-card__word--long{ font-size:clamp(26px,6.5vw,40px); }
.swipe-card__word--xlong{ font-size:clamp(19px,5vw,28px); }
.swipe-card__by{
  font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); text-align:center; overflow-wrap:anywhere;
}
.swipe-card__by strong{ color:var(--ink); font-weight:900; }

/* verdict stamps — fade in as you drag */
.stamp{
  position:absolute; top:24px; padding:5px 14px;
  border:4px solid currentColor; border-radius:8px;
  font-weight:900; font-size:27px; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; pointer-events:none; background:rgba(255,255,255,.7);
}
.stamp--like{ left:18px; color:var(--ink); transform:rotate(-14deg); }
.stamp--nope{ right:18px; color:var(--ink-soft); transform:rotate(14deg); }
.stamp--love{
  top:auto; bottom:30px; left:50%; color:var(--red);
  transform:translateX(-50%) rotate(-5deg);
}

.deck__empty{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:26px; text-align:center;
  border:2px dashed var(--hair); border-radius:12px;
  background:repeating-linear-gradient(90deg, transparent 0 38px, var(--hair-soft) 38px 39px);
}
.deck__empty-pin{
  width:12px; height:12px; border-radius:50%; background:var(--red);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.25);
  margin-bottom:4px;
}
.deck__empty-title{
  margin:0; font-weight:900; font-size:23px; letter-spacing:-.02em; text-transform:uppercase;
}
.deck__empty-sub{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.55; max-width:280px; }

.deck-hint{
  margin:14px auto 0; max-width:360px; text-align:center;
  font-size:12px; font-weight:600; color:var(--ink-soft); letter-spacing:.03em;
  line-height:1.5;
}
.deck-hint strong{
  color:var(--red-deep); font-weight:800; text-transform:uppercase; letter-spacing:.08em;
}

.deck-actions{
  display:flex; justify-content:center; align-items:center; gap:22px; margin-top:22px;
}
.swipe-btn{
  width:62px; height:62px; border-radius:50%;
  display:inline-grid; place-items:center; cursor:pointer;
  border:1px solid var(--hair); background:#fff; color:var(--ink-soft);
  box-shadow:var(--cut);
  transition:transform .12s, box-shadow .12s, background .12s, color .12s;
  touch-action:manipulation;
}
.swipe-btn .lucide{ width:26px; height:26px; }
.swipe-btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--cut-hi); }
.swipe-btn:active:not(:disabled){ transform:scale(.93); }
.swipe-btn:disabled{ opacity:.35; cursor:default; }
.swipe-btn--nope:hover:not(:disabled){ color:var(--ink); }
.swipe-btn--like{ background:var(--ink); border-color:var(--ink); color:#fff; }
.swipe-btn--like .lucide{ fill:#fff; }
.swipe-btn--love{ background:var(--red); border-color:var(--red); color:#fff; }
.swipe-btn--love .lucide{ fill:#fff; }
.swipe-btn--love:hover:not(:disabled){ background:var(--red-deep); border-color:var(--red-deep); }

.deck-foot{
  display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px;
}
.keys-hint{ font-size:11px; color:var(--ink-soft); letter-spacing:.04em; }
@media (pointer:coarse){ .keys-hint{ display:none; } }

/* ───────────────────────── the ranking ───────────────────────── */
.banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-bottom:16px; padding:12px 16px;
  border:none; border-radius:6px; cursor:pointer;
  background:var(--red); color:#fff;
  font-family:var(--sans); font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:var(--cut);
  transition:background .12s, transform .12s;
}
.banner:hover{ background:var(--red-deep); transform:translateY(-1px); }

.locked{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:34px 24px 30px; text-align:center;
  border:2px dashed var(--hair); border-radius:10px;
  background:repeating-linear-gradient(90deg, transparent 0 38px, var(--hair-soft) 38px 39px);
}
.locked__ico .lucide{ width:28px; height:28px; color:var(--ink-soft); }
.locked__title{
  margin:2px 0 0; font-weight:900; font-size:17px; letter-spacing:.2em; text-transform:uppercase;
}
.locked__msg{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5; max-width:300px; }
.locked__bar{
  width:min(240px,100%); height:4px; margin-top:12px;
  background:var(--trim); border-radius:4px; overflow:hidden;
}
.locked__fill{
  height:100%; width:0; background:var(--ink); border-radius:4px;
  transition:width .4s ease;
}

.leaderboard{ list-style:none; margin:0; padding:0; }
.lb-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 2px; border-bottom:1px solid var(--hair-soft);
}
.lb-row__rank{
  flex:0 0 34px; font-weight:900; font-size:21px; letter-spacing:-.03em;
  color:var(--ink-soft); text-align:center;
}
.lb-row--top .lb-row__rank{ color:var(--red); }
.lb-row__main{ flex:1; min-width:0; }
.lb-row__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.lb-row__name{
  font-weight:900; font-size:17px; letter-spacing:-.01em; text-transform:uppercase;
  overflow-wrap:anywhere;
}
.lb-row__by{ font-size:11px; font-weight:600; color:var(--ink-soft); overflow-wrap:anywhere; }
.lb-row__bar{
  height:5px; margin-top:7px; background:var(--hair-soft);
  border-radius:4px; overflow:hidden;
}
.lb-row__fill{
  height:100%; width:0; background:var(--ink); border-radius:4px;
  transition:width .4s ease;
}
.lb-row--top .lb-row__fill{ background:var(--red); }
.lb-row__side{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.lb-row__pct{ font-weight:900; font-size:15px; letter-spacing:-.02em; }
.lb-row__counts{ display:flex; gap:9px; }
.lb-count{
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700; color:var(--ink-soft);
}
.lb-count .lucide{ width:11px; height:11px; }
.lb-count--love .lucide{ color:var(--red); fill:var(--red); }

.finished{ margin-top:26px; }
.finished__list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.voter-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--hair); border-radius:4px;
  box-shadow:0 1px 0 rgba(0,0,0,.05), 0 5px 10px -6px rgba(0,0,0,.4);
  padding:5px 10px; font-weight:800; font-size:12px; letter-spacing:.02em;
  text-transform:uppercase; overflow-wrap:anywhere;
}
.voter-chip:nth-child(3n+1){ transform:rotate(-1.2deg); }
.voter-chip:nth-child(3n+2){ transform:rotate(1deg); }
.voter-chip .lucide{ width:12px; height:12px; color:var(--red); }

/* ───────────────────────── animations ───────────────────────── */
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes drop{
  from{ opacity:0; transform:translateY(-10px) rotate(-3deg) scale(.96); }
  to{   opacity:1; }
}
@keyframes cardReturn{
  from{ opacity:0; transform:translateY(-30px) rotate(-5deg) scale(.9); }
  to{   opacity:1; transform:none; }
}
@keyframes deny{
  0%,100%{ transform:none; }
  20%{ transform:translateX(-10px) rotate(-1deg); }
  40%{ transform:translateX(9px) rotate(1deg); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(4px); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}