/* Foot-in-the-door technique. All rules scoped under .fitd-* */
.fitd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the house */
.fitd-home { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.fitd-grass, .fitd-lawn { fill: #2f7a4f; }
.fitd-roof { fill: #c0504d; }
.fitd-body { fill: #efe3c8; }
.fitd-door { fill: #7a4b2a; }
.fitd-win rect, .fitd-hwin { fill: #9fd3f0; stroke: #fff; stroke-width: 2; }
.fitd-win path { stroke: #fff; stroke-width: 2; fill: none; }
.fitd-win .fitd-hit { fill: transparent; stroke: none; }
.fitd-sc[data-tap] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fitd-stk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fitd-stk rect { fill: #ffd54a; stroke: #fff; stroke-width: 1; }
.fitd-stk path { stroke: #b3261e; stroke-width: 1.6; }
.fitd-stuck .fitd-stk { opacity: 1; animation: fitdSlap .35s cubic-bezier(.2,.8,.2,1.4); }
@keyframes fitdSlap { from { scale: 2.4; opacity: 0; } }
.fitd-yard { position: relative; width: 100%; max-width: 360px; }
.fitd-yard .fitd-home { width: 86%; }
.fitd-volimg { position: absolute; right: 0; bottom: 0; height: 74%; width: auto; filter: drop-shadow(0 8px 16px rgba(123,92,253,.3)); }
.fitd-callout { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: fitdSlap .35s cubic-bezier(.2,.8,.2,1.4) both; }
.fitd-sign3 { padding: 6px 12px; border-radius: 4px; background: #ffd54a; border: 2px solid #fff; color: #8a2a1c; font: 900 15px var(--sans); letter-spacing: .04em; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.fitd-callout span { font: 600 13px var(--sans); color: var(--dim); }
.fitd-callout.fitd-small { position: absolute; left: 4px; top: 0; animation: none; }
.fitd-callout.fitd-small .fitd-sign3 { font-size: 12px; padding: 3px 7px; }
.fitd-ugly { opacity: 0; translate: 0 -260px; }
.fitd-ugly rect { fill: #f4f1e8; stroke: #5b4a3a; stroke-width: 3; }
.fitd-post { stroke: #5b4a3a; stroke-width: 6; fill: none; }
.fitd-ugly text { font: 900 34px var(--sans); fill: #b3261e; text-anchor: middle; letter-spacing: .02em; }
.fitd-ugly .fitd-ug2 { font-size: 30px; }
.fitd-drop .fitd-ugly { opacity: 1; translate: 0 0; transition: translate .55s cubic-bezier(.5,0,.7,1.3), opacity .1s; }

/* the streets */
.fitd-two { gap: 14px; }
.fitd-street { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 2px; }
.fitd-sname { display: flex; align-items: baseline; gap: 8px; font-family: var(--sans); white-space: nowrap; }
.fitd-sname b { font: 800 15px var(--sans); color: var(--text); }
.fitd-sname span { font: 600 13px var(--sans); color: var(--dim); }
.fitd-tal { margin-left: auto; font: 800 14px var(--sans); font-style: normal; color: var(--gold); }
.fitd-st { display: block; width: 100%; height: auto; overflow: visible; }
.fitd-hstk { fill: #ffd54a; stroke: #fff; stroke-width: 1; opacity: 0; }
.fitd-h.stk .fitd-hstk { opacity: 1; animation: fitdSlap .3s both; transform-box: fill-box; transform-origin: center; }
.fitd-h.stk .fitd-hwin { animation: fitdFlash .7s ease-out; }
@keyframes fitdFlash { 0% { fill: #fff3b0; filter: drop-shadow(0 0 6px #ffd54a); } 100% { fill: #9fd3f0; } }
.fitd-hpet { opacity: 0; }
.fitd-hpet rect { fill: #fff; stroke: #888; stroke-width: 1; }
.fitd-hpet path { stroke: var(--mint); stroke-width: 2; fill: none; }
.fitd-h.pet .fitd-hpet { opacity: 1; }
.fitd-hbig { opacity: 0; }
.fitd-hbig rect { fill: #f4f1e8; stroke: #5b4a3a; stroke-width: 1.5; }
.fitd-hbig path { stroke: #b3261e; stroke-width: 2; fill: none; }
.fitd-hbig .fitd-post { stroke-width: 3; }
.fitd-h.big .fitd-hbig { opacity: 1; animation: fitdPlop .35s cubic-bezier(.2,.8,.2,1.4) both; }
@keyframes fitdPlop { from { translate: 0 -30px; opacity: 0; } }
.fitd-note { font: 600 12.5px var(--sans); color: var(--faint); }
.fitd-st[data-tap] { cursor: pointer; }

/* why */
.fitd-mind { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.fitd-thinks { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 320px; }
.fitd-think { padding: 8px 14px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 15px var(--sans); color: var(--text); opacity: 0; translate: 0 8px; transition: opacity .4s, translate .4s; }
.fitd-think.on { opacity: 1; translate: 0 0; }
.fitd-t3 { border: 2px solid var(--gold); color: var(--gold); }
.fitd-home.fitd-mini { max-width: 170px; }

/* the text to Sam */
.fitd-chat { width: 100%; max-width: 330px; padding: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fitd-chead { display: flex; align-items: center; gap: 8px; }
.fitd-chead i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--sans); font-style: normal; background: var(--violet); color: #fff; }
.fitd-chead b { font: 800 15px var(--sans); color: var(--text); }
.fitd-cnote { font: 600 13px var(--sans); color: var(--dim); }
.fitd-msgs { width: 100%; }
.fitd-msgs .choices.fitd-out { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fitd-msgs .choice { max-width: 90%; min-height: 44px; border-radius: 16px 16px 4px 16px; background: var(--violet-deep); border-color: var(--violet); color: #fff; text-align: left; }

@media (max-height: 700px) {
  .fitd-home { max-width: 290px; }
  .fitd-street { max-width: 290px; }
  .fitd-two { gap: 8px; }
  .fitd-think { font-size: 14px; padding: 6px 12px; }
  .fitd-home.fitd-mini { max-width: 130px; }
}