/* Psychological manipulation. All rules scoped under .mnp-* */

/* the same favor */
.mnp-two { width: 100%; max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnp-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 44px; }
.mnp-who { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; min-height: 44px; }
.mnp-who img { height: 118px; width: auto; filter: drop-shadow(0 6px 10px rgba(123,92,253,.25)); animation: mnpIn .45s cubic-bezier(.2,.8,.2,1.2) both; }
.mnp-col:nth-child(2) .mnp-who img { animation-delay: .2s; }
@keyframes mnpIn { from { translate: 0 30px; opacity: 0; } }
.mnp-who b { font: 800 14px var(--sans); color: var(--text); }
.mnp-ask { width: 100%; padding: 7px 9px; border-radius: 12px; background: var(--raised); color: var(--text); font: 500 13px/1.3 var(--sans); }
.mnp-yes { font: 700 12px var(--sans); color: var(--mint); }
.mnp-think { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 100%; padding: 6px 9px; border-radius: 16px; background: #fff; color: #2b2418; font: 700 13px/1.25 var(--sans); text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,.35); opacity: 0; scale: .6; transition: opacity .25s, scale .35s cubic-bezier(.2,.8,.2,1.4); }
.mnp-think::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 10px; height: 10px; border-radius: 5px; background: #fff; }
.mnp-col.open .mnp-think { opacity: 1; scale: 1; }

/* the out-loud test */
.mnp-cards { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.mnp-card { position: relative; padding: 10px 12px; border-radius: 14px; background: var(--raised); border: 2px solid var(--line); transition: border-color .3s, opacity .4s; }
.mnp-ch { display: flex; align-items: center; gap: 8px; }
.mnp-ch img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 0; border-radius: 20px; background: var(--surface); }
.mnp-ch b { font: 800 14px var(--sans); color: var(--text); }
.mnp-v { margin-left: auto; padding: 2px 9px; border-radius: 8px; font: 800 12px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.mnp-line { margin: 6px 0 0; font: 600 15px/1.3 var(--serif); color: var(--text); transition: opacity .25s, filter .25s; }
.mnp-line.out, .mnp-opts .choice span.out { opacity: 0; filter: blur(4px); }
.mnp-line.in, .mnp-opts .choice span.in { animation: mnpType .4s ease-out; }
@keyframes mnpType { from { opacity: 0; translate: 0 6px; } }
.mnp-loud { margin-top: 8px; width: 100%; min-height: 44px; border: 0; border-radius: 12px; background: var(--gold); color: #2a1d00; font: 800 13px var(--sans); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.mnp-card.holds { border-color: var(--mint); }
.mnp-card.holds .mnp-v { background: rgba(126,224,195,.2); color: var(--mint); }
.mnp-card.breaks { border-color: var(--line); border-style: dashed; }
.mnp-card.breaks .mnp-line { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.mnp-card.breaks .mnp-v { background: rgba(255,255,255,.08); color: var(--dim); }
.mnp-card.breaks { animation: mnpCrack .45s ease-out; }
@keyframes mnpCrack { 0% { rotate: 0deg; } 25% { rotate: -2deg; } 50% { rotate: 1.5deg; } 100% { rotate: 0deg; } }

/* the gym */
.mnp-gym { width: 100%; max-width: 360px; display: flex; align-items: center; gap: 8px; }
.mnp-seller { flex: none; height: 170px; width: auto; filter: drop-shadow(0 6px 10px rgba(123,92,253,.25)); }
.mnp-pitches { flex: 1; min-width: 0; }
.mnp-opts { display: flex; flex-direction: column; gap: 6px; }
.mnp-opts .choice { text-align: left; }
.mnp-opts .choice span { font: 600 14px/1.3 var(--serif); transition: opacity .2s, filter .2s; }

/* the pop-up */
.mnp-popbox { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mnp-pop { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 8px; border-radius: 18px; background: #fff; color: #1c1a24; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: mnpPop .45s cubic-bezier(.2,.8,.2,1.25) both; }
@keyframes mnpPop { from { scale: .7; opacity: 0; } }
.mnp-pt { font: 800 20px/1.2 var(--serif); text-align: center; }
.mnp-field { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #c9c6d6; color: #9a96a8; font: 500 14px var(--sans); }
.mnp-get { width: 100%; padding: 11px 0; border-radius: 10px; background: #7b3fd6; color: #fff; text-align: center; font: 800 15px var(--sans); }
.mnp-no { min-height: 44px; padding: 4px 8px; border: 0; background: none; color: #6b6878; font: 500 13px var(--sans); text-decoration: underline; cursor: pointer; }
.mnp-pop.said { animation: mnpCrack .45s ease-out; }
.mnp-pop.said .mnp-no { color: #1c1a24; font-weight: 800; text-decoration: none; background: #ffe58a; border-radius: 6px; }
.mnp-said { padding: 8px 12px; border-radius: 12px; background: var(--raised); border: 2px solid var(--gold); color: var(--text); font: 600 15px/1.3 var(--serif); text-align: center; opacity: 0; translate: 0 10px; transition: opacity .35s, translate .35s; }
.mnp-popbox.loud .mnp-said { opacity: 1; translate: 0 0; }

/* one shape */
.mnp-spots { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.mnp-spots .slot { width: 100%; min-height: 54px; }
.mnp-spots .slot .n { font-size: 12px; }

/* Sam */
.mnp-chat { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.mnp-chead { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.mnp-chead img { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; object-position: 50% 20%; }
.mnp-chead b { font: 700 15px var(--sans); color: var(--text); }
.mnp-msg { align-self: flex-start; max-width: 86%; padding: 8px 12px; border-radius: 16px; border-bottom-left-radius: 4px; background: var(--raised); color: var(--text); font: 500 15px/1.3 var(--sans); animation: mnpIn .35s both; }
.mnp-msg + .mnp-msg { animation-delay: .5s; }

@media (max-height: 700px) {
  .mnp-who img { height: 92px; }
  .mnp-col { padding-top: 40px; }
  .mnp-ask { font-size: 12.5px; }
  .mnp-seller { height: 130px; }
  .mnp-opts .choice span { font-size: 13px; }
}