/* Transference. The reader's own person is violet throughout; Sam is green. */
:root { --trf-me: #A99BFF; --trf-sam: #3FD69A; }
.trf-hero img { width: 260px; }

/* your person: the trait chips */
.trf-chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; }
.trf-chip { min-height: 52px; padding: 6px 6px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 3px 0 #070a14; font-size: 14px; font-weight: 700; line-height: 1.15; transition: background .2s, border-color .2s, transform .08s; }
.trf-chip:active { transform: translateY(2px); }
.trf-chip.on { background: rgba(123,92,253,.28); border-color: var(--trf-me); color: #fff; }
.trf-count { margin-top: 10px; text-align: center; font-size: 14px; color: var(--dim); }
.trf-count b { color: var(--trf-me); font-size: 17px; }

/* Sam */
.trf-sam { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.trf-sam img { width: 150px; filter: drop-shadow(0 12px 24px rgba(63,214,154,.3)); }
.trf-said { width: 100%; max-width: 340px; padding: 12px 14px 14px; border-radius: 18px; background: var(--surface); border: 2px solid rgba(63,214,154,.45); text-align: center; }
.trf-said small { display: block; font-size: 13px; color: var(--dim); font-weight: 700; }
.trf-fact { min-height: 44px; display: grid; place-items: center; font: 700 23px/1.2 var(--serif); color: #eafff5; opacity: 0; }
.trf-fact.in { animation: trfIn 2.5s ease both; }
@keyframes trfIn { 0% { opacity: 0; transform: translateY(8px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.trf-pips { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.trf-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.trf-pips i.on { background: var(--trf-sam); }
.trf-pips.big { margin-top: 14px; }
.trf-pips.big i.on { background: var(--gold); }

/* the couch */
.trf-photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trf-photo img { width: 100%; max-width: 360px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.trf-photo figcaption { font-size: 12px; color: var(--dim); }

/* memory check */
.trf-q { display: grid; place-items: center; min-height: 150px; }
.trf-qcard { width: 100%; max-width: 320px; padding: 20px 16px; border-radius: 20px; background: var(--surface); border: 2px solid rgba(63,214,154,.45); text-align: center; font: 700 24px/1.2 var(--serif); animation: trfPop .3s cubic-bezier(.34,1.56,.64,1) both; }
.trf-qcard small { display: block; font: 700 13px var(--sans); color: var(--dim); margin-bottom: 6px; }
@keyframes trfPop { from { opacity: 0; transform: scale(.92); } }
.trf-res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; }
.trf-rc { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); animation: trfPop .35s ease both; }
.trf-rc b { font-size: 14px; line-height: 1.15; }
.trf-rc .v { font-size: 12px; color: var(--dim); }
.trf-rc.mine { border-color: var(--trf-me); background: rgba(123,92,253,.14); }
.trf-rc .tag { align-self: flex-start; padding: 1px 7px; border-radius: 99px; background: var(--trf-me); color: #120b33; font-size: 12px; font-weight: 800; }
.trf-rc.miss { box-shadow: inset 0 0 0 2px var(--red); }
.trf-rc.miss .v { color: #ffb3b3; }

/* the bundle */
.trf-bwrap { width: 100%; max-width: 380px; margin: 0 auto; }
.trf-bundle { width: 100%; display: block; overflow: visible; }
.trf-bundle .ln { fill: none; stroke: var(--line-strong); stroke-width: 2.5; transition: stroke .4s; }
.trf-bundle .ln.sam.on { stroke: var(--trf-sam); }
.trf-bundle .ln.sam.lure.on { stroke: var(--gold); stroke-dasharray: 5 4; }
.trf-bundle .ln.per.on { stroke: var(--trf-me); }
.trf-bundle .tr rect { fill: var(--surface); stroke: var(--line); stroke-width: 2; transition: fill .4s, stroke .4s; }
.trf-bundle .tr text { fill: var(--text); font: 700 13.5px var(--sans); text-anchor: middle; }
.trf-bundle .tr .fill { fill: var(--gold); font-size: 12px; opacity: 0; transition: opacity .4s; }
.trf-bundle .tr.seen.on rect { fill: rgba(63,214,154,.2); stroke: var(--trf-sam); }
.trf-bundle .tr.lure.on rect { fill: rgba(252,192,80,.18); stroke: var(--gold); }
.trf-bundle .tr.lure.on .fill { opacity: 1; }
.trf-bundle .nd { fill: var(--raised); stroke: var(--trf-sam); stroke-width: 3; }
.trf-bundle .nd.per { fill: #2b2358; stroke: var(--trf-me); transition: fill .4s; }
.trf-bundle .nd.per.on { fill: var(--trf-me); }
.trf-bundle .lab { fill: var(--dim); font: 800 13px var(--sans); text-anchor: middle; }

@media (max-height: 700px) {
  .trf-chip { min-height: 46px; font-size: 13px; }
  .trf-sam img { width: 110px; }
  .trf-photo img { max-width: 290px; }
  .trf-rc { padding: 7px 8px; }
  .trf-rc b { font-size: 13px; }
}