/* Tinder (app) lesson. All rules scoped under .tnd-* */
.tnd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tnd-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* the deck */
.tnd-deck { position: relative; width: 228px; height: 296px; margin: 4px 0 18px; touch-action: none; }
.tnd-card { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(160deg, #2A2350, #141A30 70%); border: 1px solid var(--line-strong); box-shadow: 0 8px 18px rgba(0,0,0,.4); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; user-select: none; -webkit-user-select: none; transform-origin: 50% 110%; }
.tnd-card img { position: absolute; left: 50%; top: 18px; width: 82%; translate: -50% 0; pointer-events: none; -webkit-user-drag: none; }
.tnd-card .tnd-who { position: relative; width: 100%; padding: 40px 14px 12px; background: linear-gradient(transparent, rgba(8,10,20,.92) 45%); text-align: left; }
.tnd-card .tnd-who b { display: block; font: 800 20px var(--sans); color: var(--text); }
.tnd-card .tnd-who span { font: 600 13.5px var(--sans); color: var(--dim); }
.tnd-card.top { cursor: grab; }
.tnd-card.back1 { transform: translateY(8px) scale(.96); }
.tnd-card.back2 { transform: translateY(16px) scale(.92); opacity: .7; }
.tnd-card.back3 { transform: translateY(16px) scale(.92); opacity: 0; }
.tnd-card.settle { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.tnd-stamp { position: absolute; top: 18px; padding: 4px 10px; border-radius: 8px; border: 3px solid; font: 900 22px var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: 0; rotate: -12deg; }
.tnd-stamp.yes { left: 14px; color: var(--mint); border-color: var(--mint); }
.tnd-stamp.no { right: 14px; color: var(--dim); border-color: var(--dim); rotate: 12deg; }
.tnd-in { animation: tndIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes tndIn { from { opacity: 0; translate: 0 30px; rotate: -6deg; } }

.tnd-btns { display: flex; justify-content: center; gap: 44px; }
.tnd-btn { width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: flex; align-items: center; justify-content: center; font: 800 26px var(--sans); color: var(--text); cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.tnd-btn.like { border-color: var(--mint); color: var(--mint); }
.tnd-btn.nope { color: var(--dim); }
.tnd-btn:active { scale: .94; }
.tnd-btn:disabled { opacity: .35; }
.tnd-btnl { display: block; font: 700 12px var(--sans); color: var(--dim); text-align: center; margin-top: 4px; }

/* behind the cards */
.tnd-grid { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; justify-content: center; }
.tnd-mini { position: relative; border-radius: 14px; padding-bottom: 4px; background: linear-gradient(160deg, #2A2350, #141A30 75%); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; overflow: hidden; transition: border-color .3s, box-shadow .3s, opacity .5s, scale .5s; }
.tnd-mini img { width: 64px; margin-top: 6px; }
.tnd-mini b { font: 800 13px var(--sans); color: var(--text); margin-top: -2px; }
.tnd-marks { align-self: stretch; margin-top: 3px; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px 5px; background: rgba(8,10,20,.9); font: 700 12px var(--sans); color: var(--dim); opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; }
.tnd-marks span { display: flex; justify-content: space-between; }
.tnd-marks i { font-style: normal; font-weight: 900; }
.tnd-marks i.y { color: var(--mint); }
.tnd-marks i.n { color: var(--faint); }
.tnd-mini.shown .tnd-marks { opacity: 1; translate: 0 0; }
.tnd-mini.flip { animation: tndFlip .45s ease-in-out; }
@keyframes tndFlip { 50% { transform: rotateY(90deg); } }
.tnd-mini.match { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.45); }
.tnd-mini .tnd-mt { position: absolute; top: 6px; left: 50%; translate: -50% 0; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #17130D; font: 800 12px var(--sans); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.tnd-mini.match .tnd-mt { opacity: 1; }
.tnd-mini.gone { opacity: 0; scale: .85; }
.tnd-mini.only .tnd-marks { display: none; }
.tnd-res { min-height: 22px; font: 700 15px var(--sans); color: var(--gold); text-align: center; opacity: 0; transition: opacity .4s; }
.tnd-res.on { opacity: 1; }
.tnd-empty { font: 700 15px var(--sans); color: var(--dim); text-align: center; padding: 30px 0; }

/* a day of swipes */
.tnd-rain { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; justify-content: center; }
.tnd-r { width: 22px; height: 30px; border-radius: 5px; background: var(--raised); border: 1px solid var(--line-strong); transition: translate .35s ease-in, opacity .35s ease-in, rotate .35s; }
.tnd-r.l { translate: -40px 0; rotate: -20deg; opacity: 0; }
.tnd-r.r { translate: 40px 0; rotate: 20deg; opacity: 0; }
.tnd-r.m { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(252,192,80,.6); }
.tnd-tally { display: flex; gap: 22px; justify-content: center; }
.tnd-tally div { display: flex; flex-direction: column; align-items: center; }
.tnd-tally b { font: 800 22px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.tnd-tally b.g { color: var(--gold); }
.tnd-tally span { font: 600 12.5px var(--sans); color: var(--dim); }

/* the hidden score */
.tnd-meter { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 14px; background: var(--surface); border: 2px solid var(--violet-bright); box-shadow: 0 0 16px rgba(123,92,253,.3); }
.tnd-meter span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.tnd-meter b { font: 800 26px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.tnd-meter em { font: 800 15px var(--sans); color: var(--mint); font-style: normal; min-width: 40px; }
.tnd-likes, .tnd-pk .choices.tnd-two { display: flex; flex-direction: row; justify-content: center; gap: 14px; width: 100%; }
.tnd-pk { width: 100%; }
.tnd-pk .choice { padding: 0; min-height: 0; background: transparent; border-color: transparent; box-shadow: none; justify-content: center; }
.tnd-pk .choice.right .tnd-lk { border-color: var(--mint); }
.tnd-pk .choice.wrong .tnd-lk { border-color: var(--red); }
.tnd-lk { position: relative; width: 132px; border-radius: 16px; background: linear-gradient(160deg, #2A2350, #141A30 75%); border: 2px solid var(--line-strong); display: flex; flex-direction: column; align-items: center; padding-bottom: 8px; }
.tnd-lk img { width: 84px; margin-top: 6px; }
.tnd-lk b { font: 800 14px var(--sans); color: var(--text); }
.tnd-lk small { font: 700 12.5px var(--sans); color: var(--gold); }
.tnd-lk .tnd-heart { position: absolute; top: 6px; right: 8px; color: var(--mint); font: 900 18px var(--sans); }

/* the shuffle */

@media (max-height: 700px) {
  .tnd-deck { width: 192px; height: 250px; }
  .tnd-card .tnd-who b { font-size: 17px; }
  .tnd-btn { width: 58px; height: 58px; }
  .tnd-mini img { width: 52px; }
  .tnd-lk img { width: 64px; }
  .tnd-rain { gap: 4px; grid-template-columns: repeat(10, 20px); }
  .tnd-r { width: 20px; height: 26px; }
}