/* Sunk cost. All rules scoped under .sk-* (the app inlines only this file). */

/* 1-2. the street */
.sk-street { position: relative; flex: 1; min-height: 300px; overflow: hidden; background: linear-gradient(#0b1026 0%, #151a36 58%, #232536 58.5%, #1a1c2a 100%); }
.sk-street::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; background: radial-gradient(60% 40% at 72% 52%, rgba(255,190,90,.18), transparent 70%); pointer-events: none; }
.sk-truck { position: absolute; right: -5%; top: 22%; width: 68%; max-width: 330px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.sk-curb { position: absolute; left: 0; right: 0; top: 58%; height: 4px; background: rgba(234,227,215,.12); }
.sk-queue { position: absolute; left: 0; right: 0; top: calc(58% - 52px); height: 52px; z-index: 2; }
.sk-p { position: absolute; bottom: 0; width: 22px; height: 50px; margin-left: -11px; transition: left .5s cubic-bezier(.3,.7,.2,1), transform .6s, opacity .5s; }
.sk-p::before { content: ""; position: absolute; left: 4px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #8b8fa8; }
.sk-p::after { content: ""; position: absolute; left: 0; top: 16px; width: 22px; height: 34px; border-radius: 10px 10px 4px 4px; background: #5d6280; }
.sk-p.sk-you::before { background: #d8ccff; }
.sk-p.sk-you::after { background: var(--violet); box-shadow: 0 0 14px rgba(123,92,253,.7); }
.sk-p b { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); font: 800 13px var(--sans); color: var(--violet-bright); white-space: nowrap; }
.sk-p.sk-left { opacity: 0; transform: translateX(40px); }
.sk-queue .sk-p { animation: skIn .45s cubic-bezier(.3,1.3,.5,1) backwards; }
@keyframes skIn { from { opacity: 0; transform: translateY(-16px); } }
.sk-clock { position: absolute; left: 50%; top: 63%; transform: translateX(-50%); display: flex; gap: 8px; align-items: baseline; font: 700 15px var(--sans); color: var(--dim); }
.sk-clock b { font: 800 22px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.sk-wait { all: unset; position: absolute; left: 50%; top: 71%; transform: translateX(-50%); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; transition: opacity .3s; }
.sk-wait:focus-visible { outline: 2px solid var(--violet-bright); border-radius: 14px; }
.sk-face { position: relative; display: block; width: 66px; height: 66px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6dc, var(--gold) 70%); border: 3px solid #fff0c2; box-shadow: 0 5px 0 var(--gold-deep), 0 0 26px rgba(252,192,80,.45); }
.sk-wait:active .sk-face { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-deep); }
.sk-hand { position: absolute; left: 31px; top: 10px; width: 4px; height: 23px; border-radius: 2px; background: #2A1B00; transform-origin: 2px 23px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.sk-wait span { font: 800 15px var(--sans); color: var(--text); }
.sk-wait[disabled], .sk-wait.sk-gone { opacity: 0; pointer-events: none; }
.sk-bubble { position: absolute; right: 4%; top: 7%; max-width: 50%; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #1b1b28; font: 800 16px var(--sans); line-height: 1.2; opacity: 0; transform: scale(.6); transform-origin: 85% 100%; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); z-index: 3; }
.sk-street.news .sk-bubble { opacity: 1; transform: none; }
.sk-other { position: absolute; left: 4%; top: 6%; width: 34%; height: 92px; border-radius: 8px 8px 0 0; background: #23263b; opacity: .35; transition: opacity .6s, box-shadow .6s; }
.sk-awn { position: absolute; left: -4px; right: -4px; top: 0; height: 16px; border-radius: 6px; background: repeating-linear-gradient(90deg, #3DD6A0 0 12px, #e9fff6 12px 24px); }
.sk-win { position: absolute; left: 12%; right: 12%; top: 28px; height: 38px; border-radius: 4px; background: #3a3d55; transition: background .6s; }
.sk-sign { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); padding: 3px 9px; border-radius: 8px; background: var(--mint); color: var(--mint-ink); font: 800 13px var(--sans); white-space: nowrap; opacity: 0; transition: opacity .4s .3s; }
.sk-otl { position: absolute; left: 0; right: 0; top: calc(100% + 16px); text-align: center; font: 700 13px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s .4s; }
.sk-street.other .sk-other { opacity: 1; box-shadow: 0 0 30px rgba(63,214,154,.35); }
.sk-street.other .sk-win { background: linear-gradient(#ffe7a8, #ffc35e); }
.sk-street.other .sk-sign, .sk-street.other .sk-otl { opacity: 1; }

/* 3. you and Sam */
.sk-sam { position: relative; width: 100%; max-width: 360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-col { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .5s, box-shadow .5s; }
.sk-head { display: flex; align-items: center; gap: 8px; height: 30px; }
.sk-head .sk-p { position: relative; height: 30px; width: 14px; margin: 0; transform: scale(.6); transform-origin: 50% 100%; }
.sk-head b { font: 800 17px var(--sans); color: #fff; }
.sk-spent { padding: 6px 8px; border-radius: 10px; background: rgba(252,192,80,.14); border: 1.5px dashed var(--gold); color: var(--gold); font: 800 13px var(--sans); text-align: center; transition: transform .9s cubic-bezier(.5,0,.6,1), opacity .9s; }
.sk-spent.sk-none { background: transparent; border-color: var(--line); color: var(--dim); }
.sk-f { padding: 7px 8px; border-radius: 10px; background: var(--raised); font: 700 13.5px var(--sans); color: var(--text); line-height: 1.25; }
.sk-f span { display: block; font: 800 12px var(--sans); color: var(--violet-bright); text-transform: uppercase; letter-spacing: .06em; }
.sk-sam.torn .sk-c-me .sk-spent { text-decoration: line-through 2px; opacity: .4; transform: rotate(-4deg) scale(.94); }
.sk-sam.torn .sk-c-sam .sk-spent.sk-none { opacity: .25; }
.sk-sam.torn .sk-col { border-color: var(--mint); box-shadow: 0 0 18px rgba(63,214,154,.25); }

/* 5. mice */
.sk-mouse { width: 100%; display: flex; justify-content: center; }
.sk-mouse img { width: auto; max-width: 62%; height: auto; max-height: min(260px, 32vh); filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }

/* 6. one more fee */
.sk-chat { width: 100%; max-width: 380px; margin: 0 auto; height: 270px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 18px; background: linear-gradient(#141a2e, #0f1424); border: 1px solid var(--line); padding: 10px 10px 12px; transition: filter .6s; }
.sk-log { display: flex; flex-direction: column; gap: 7px; }
.sk-msg { display: flex; max-width: 84%; animation: skPop .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes skPop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.sk-msg span { padding: 8px 11px; border-radius: 16px; font: 600 15px/1.3 var(--sans); }
.sk-them span { background: #262d47; color: var(--text); border-bottom-left-radius: 5px; }
.sk-me { align-self: flex-end; }
.sk-me span { background: var(--violet); color: #fff; border-bottom-right-radius: 5px; }
.sk-dots { display: inline-flex; gap: 4px; padding: 3px 2px; }
.sk-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: skDot 1s ease-in-out infinite; }
.sk-dots i:nth-child(2) { animation-delay: .15s; } .sk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes skDot { 50% { transform: translateY(-4px); opacity: .5; } }
.sk-them span { transition: background .6s, color .6s, opacity .6s; }
.sk-chat.sk-cold .sk-them span { background: #1c2133; color: var(--dim); opacity: .7; }
.sk-gift { align-self: center; margin-top: 4px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid rgba(234,227,215,.3); font: 800 13px var(--sans); color: var(--text); animation: skPop .35s ease-out both; }

/* 7. ticket stubs */
.sk-stub { position: relative; width: 100%; max-width: 300px; margin: 0 auto; min-height: 86px; padding: 18px 22px; border-radius: 12px; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 0 50%, transparent 11px, #F4E7C8 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #F4E7C8 12px) right / 51% 100% no-repeat;
  color: #2a1d08; font: 800 19px var(--sans); line-height: 1.25; transition: transform .6s, opacity .6s; }
.sk-stub::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; border-bottom: 2px dashed rgba(42,29,8,.25); }
.sk-stub.right { box-shadow: 0 0 0 3px var(--mint); }
.sk-stub.wrong { box-shadow: 0 0 0 3px var(--red); }
.sk-stub.sk-rip { animation: skRip .65s cubic-bezier(.5,0,.8,.4) forwards; }
/* Falls only a little way: a card that ends far below the scene still counts toward its height. */
@keyframes skRip { 0% { transform: none; } 30% { transform: rotate(-6deg) translateY(-6px); } 100% { transform: rotate(16deg) translate(40px, 24px) scale(.9); opacity: 0; } }
.sk-why { margin-top: 8px; font: 600 14px var(--sans); color: #6b1d1d; }

/* 4. why it pulls: on the street */
.sk-street .sk-clock { white-space: nowrap; }
.sk-plus { font: 800 15px var(--sans); font-style: normal; color: var(--violet-bright); opacity: 0; transition: opacity .4s; }
.sk-street.sk-stayed .sk-plus { opacity: 1; }
.sk-street.sk-walked .sk-clock b { color: var(--dim); }
.sk-stamp { position: absolute; left: 50%; top: calc(63% - 8px); padding: 2px 12px; border: 3px solid rgba(234,227,215,.8); border-radius: 8px; font: 900 22px var(--sans); color: #fff; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%) rotate(-8deg) scale(1.6); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.3,1.4,.5,1); pointer-events: none; z-index: 4; background: rgba(21,26,46,.85); }
.sk-street.sk-walked .sk-stamp { opacity: 1; transform: translateX(-50%) rotate(-8deg) scale(1); }
.sk-pnote { position: absolute; left: 6%; right: 6%; top: 74%; text-align: center; font: 700 17px var(--sans); color: var(--text); }

@media (max-height: 700px) {
  .sk-truck { top: 20%; width: 62%; }
  .sk-wait { top: 70%; }
  .sk-street { min-height: 270px; }
  .sk-mouse img { width: 50%; }
  .sk-chat { height: 236px; }
  .sk-msg span { font-size: 14px; padding: 7px 10px; }
}