/* Whitelist page: the private jet cabin at night (poster + 3D dust/coin), a first-class boarding pass that tilts in 3D,
   the plane flies the gold route as steps finish, done steps slam in as passport stamps, the live whitelist below. */
.sky.dim img { opacity: .55; }
.wl .veil { background: linear-gradient(180deg, rgba(5, 4, 3, .75) 0%, rgba(5, 4, 3, .2) 30%, rgba(5, 4, 3, .55) 70%, rgba(5, 4, 3, .9) 100%); }
main.wrap { width: min(720px, 100% - 28px); }

.hero { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 96px 0 26px; }
.hero-slot { width: 150px; height: 150px; }
.hero h1 { margin: 0; font: 700 clamp(38px, 7vw, 64px)/1.18 var(--f-display); }
.lede { margin: 0; max-width: 33em; color: #eadfc8; font-size: 16.5px; line-height: 1.75; text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }

/* ---------- the boarding pass ---------- */
.flow { perspective: 1400px; padding-bottom: 8px; }
.ps { position: relative; border-radius: 26px; overflow: hidden; transform-style: preserve-3d; transition: transform .5s var(--ease);
  background: linear-gradient(180deg, rgba(34, 26, 14, .96), rgba(14, 10, 6, .97) 40%); border: 1px solid var(--line2);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 230, 170, .04) inset; animation: pass-in 1.1s .2s var(--ease) both; }
@keyframes pass-in { from { transform: rotateX(28deg) translateY(60px) scale(.96); opacity: 0; } }
.ps.bump { animation: bump .7s var(--ease); }
@keyframes bump { 35% { transform: rotateY(-7deg) rotateX(4deg) scale(1.01); } }
.ps::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .09) 48%, transparent 60%);
  transform: translateX(-100%); animation: glint 7s 2s var(--ease) infinite; }
@keyframes glint { 0% { transform: translateX(-100%); } 25%, 100% { transform: translateX(100%); } }
.ps-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--gold-flat); color: var(--accent-ink); }
.ps-head img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(26, 18, 4, .3); }
.ps-head b { font: 700 22px/1 var(--f-display); }
.ps-head .mono { margin-inline-start: auto; font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: .8; }
.ps-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 22px 20px 10px; }
.ps-city { display: grid; justify-items: center; gap: 2px; min-width: 64px; }
.ps-city small { color: var(--mute); font-size: 12px; }
.ps-city b { font: 800 26px/1 var(--f-mono); color: #8c7f68; letter-spacing: .04em; }
.ps-city.to b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 30px; }
.ps-city span { font-size: 13px; color: var(--text); }
.ps-track { position: relative; height: 76px; }
[dir="rtl"] .ps-track { transform: scaleX(-1); }
.arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc path { fill: none; stroke: rgba(242, 193, 91, .45); stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
.prog { position: absolute; inset-inline: 2%; bottom: -2px; height: 3px; border-radius: 3px; background: rgba(242, 193, 91, .14); overflow: hidden; }
.prog i { position: absolute; inset: 0; background: var(--gold-flat); transform-origin: left center; transform: scaleX(.04); transition: transform 1s var(--ease); }
.plane-run { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; color: var(--gold2);
  transition: transform 1.1s var(--spring); will-change: transform; }
.plane-run svg { width: 30px; height: 30px; fill: currentColor; filter: drop-shadow(0 0 8px rgba(255, 200, 100, .8)); }
.ps-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px 20px 18px; }
.ps-meta div { min-width: 0; }
.ps-meta dt { color: var(--mute); font-size: 11.5px; }
.ps-meta dd { margin: 2px 0 0; font-weight: 700; font-size: 15px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-cut { position: relative; height: 0; border-top: 2px dashed rgba(242, 193, 91, .3); margin: 0 18px; }
.ps-cut::before, .ps-cut::after { content: ''; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.ps-cut::before { left: -31px; } .ps-cut::after { right: -31px; }
.ps-body { padding: 20px 20px 24px; }
.prog-label { margin: 0 0 12px; font: 700 14px/1.2 var(--f-body); color: var(--accent); }

/* passport stamps for finished steps: the newest one slams in */
.done-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.done-chips:empty { display: none; }
.done-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 2px solid rgba(94, 227, 154, .55); border-radius: 8px; color: var(--ok);
  font: 800 12.5px/1 var(--f-body); background: rgba(94, 227, 154, .06); transform: rotate(-3deg); }
.done-chips li:nth-child(2n) { transform: rotate(2.5deg); border-color: rgba(242, 193, 91, .55); color: var(--gold2); background: rgba(242, 193, 91, .06); }
.done-chips li:nth-child(3n) { transform: rotate(-1deg); }
.ck { display: inline-block; flex: none; width: 11px; height: 6px; margin-block-end: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.done-chips li.last { animation: slam .55s var(--spring) both; }
@keyframes slam { 0% { transform: scale(2.6) rotate(-18deg); opacity: 0; } 60% { opacity: 1; } }

.stepcard { position: relative; transform-origin: 50% 0; }
.stepcard.in { animation: card-in .6s var(--ease) both; }
@keyframes card-in { from { transform: perspective(900px) rotateX(-24deg) translateY(16px); opacity: 0; } }
.stepcard.nope { animation: nope .4s; }
@keyframes nope { 25% { transform: translateX(8px); } 50% { transform: translateX(-8px); } 75% { transform: translateX(4px); } }
.stepcard h3 { margin: 0 0 6px; font: 700 26px/1.3 var(--f-display); }
.stepcard .line { margin: 0 0 16px; color: var(--mute); }
.field-row { display: flex; align-items: stretch; gap: 8px; direction: ltr; }
.field-row .at { display: grid; place-items: center; width: 44px; border-radius: 14px; background: rgba(242, 193, 91, .1); border: 1px solid var(--line2); color: var(--accent); font: 800 18px/1 var(--f-mono); }
.field-col { display: grid; gap: 12px; }
.field { width: 100%; min-width: 0; flex: 1; min-height: 52px; padding: 13px 15px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(4, 3, 2, .85); color: var(--text);
  font: 600 16.5px/1.2 var(--f-body); outline: none; transition: border-color .2s; direction: ltr; }
.field:focus { border-color: var(--accent); }
.field.mono { font-family: var(--f-mono); font-size: 15px; }
.err { min-height: 1.3em; margin: 8px 0 0; color: var(--warn); font-size: 14px; }
.qc-img { display: block; width: 100%; height: auto; border-radius: 16px; margin-bottom: 12px; border: 1px solid var(--line2); box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 1); animation: card-in .7s .1s var(--ease) both; }
.qc-steps { display: flex; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: q; }
.qc-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 12px; background: rgba(242, 193, 91, .06); border: 1px solid var(--line); font-size: 13px; color: var(--text); }
.qc-steps li::before { counter-increment: q; content: counter(q); display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 800 11px/1 var(--f-mono); }
.hp { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* ---------- status board after joining ---------- */
.board { position: relative; margin-top: 4px; padding: 24px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(34, 26, 14, .96), rgba(14, 10, 6, .97)); border: 1px solid var(--line2);
  box-shadow: 0 40px 90px -40px #000; animation: pass-in .9s var(--ease) both; overflow: hidden; }
.bd-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bd-top img { border-radius: 50%; box-shadow: 0 0 30px rgba(242, 193, 91, .4); }
.bd-top .kick { margin: 0; color: var(--mute); font: 600 14px/1.2 var(--f-mono); direction: ltr; }
.bd-top h3 { margin: 2px 0 0; font: 700 28px/1.2 var(--f-display); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bd-stamp { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 3px double rgba(94, 227, 154, .7);
  color: var(--ok); font: 800 13px/1.2 var(--f-body); text-align: center; transform: rotate(-14deg); animation: slam .7s .3s var(--spring) both; }
.bd-st { margin: 0 0 14px; font-weight: 600; padding-inline-end: 96px; }
.bd-st.ok { color: var(--ok); } .bd-st.warn { color: var(--warn); }
.bd-act { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-link { margin-top: 16px; } .bd-link label { display: block; margin-bottom: 8px; color: var(--mute); font-size: 14px; }
.bd-note { margin: 16px 0 0; color: var(--mute); font-size: 13.5px; }

/* ---------- live whitelist ---------- */
.live { margin-top: 34px; padding: 22px 20px; border-radius: 26px; background: var(--glass); border: 1px solid var(--line); }
.live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.live h2 { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 24px/1.2 var(--f-display); }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.stats div { padding: 12px 10px; border-radius: 14px; background: rgba(242, 193, 91, .05); border: 1px solid var(--line); min-width: 0; }
.stats dt { color: var(--mute); font-size: 11.5px; line-height: 1.3; }
.stats dd { margin: 4px 0 0; font: 800 19px/1 var(--f-mono); color: var(--gold2); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "p w s" "p a s"; align-items: center; column-gap: 12px; padding: 10px 12px;
  border-radius: 14px; background: rgba(4, 3, 2, .55); border: 1px solid rgba(242, 193, 91, .1); }
.feed li img, .feed li .pf { grid-area: p; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.feed .pf { display: grid; place-items: center; background: var(--gold-flat); color: var(--accent-ink); font-weight: 800; }
.feed .who { grid-area: w; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.feed .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.feed .who span { color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .what { grid-area: a; color: var(--mute); font-size: 13px; }
.feed .tx, .feed .fs { grid-area: s; display: inline-flex; align-items: center; min-height: 32px; padding: 6px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.feed .tx { color: var(--accent-ink); background: var(--gold-flat); }
.feed .fs { color: var(--mute); border: 1px solid var(--line); }
.feed .fs.verifying, .feed .fs.sending { color: var(--gold2); }
.feed .empty { display: block; text-align: center; color: var(--mute); }
.feed-more { width: 100%; margin-top: 10px; }
.foot .mono { font-size: 12.5px; }

/* pop-ups for allocations that just landed */
.popwrap { position: fixed; bottom: 16px; inset-inline-start: 16px; z-index: 40; display: grid; gap: 8px; pointer-events: none; max-width: calc(100% - 32px); }
.livepop { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: 14px; background: rgba(20, 15, 8, .96); border: 1px solid var(--line2); font-size: 14px;
  box-shadow: 0 16px 40px -16px #000; animation: pop-in .5s var(--spring) both; }
.livepop.out { animation: pop-out .4s var(--ease) forwards; }
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
@keyframes pop-in { from { transform: translateY(20px) scale(.9); opacity: 0; } }
@keyframes pop-out { to { transform: translateY(10px); opacity: 0; } }

/* "You're in!" celebration (the 3D coin rain plays behind it) */
.sentfx { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(3, 2, 1, .72); animation: fade .4s both; }
@keyframes fade { from { opacity: 0; } }
.sf-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; width: min(460px, 100%); padding: 30px 24px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(34, 26, 14, .97), rgba(12, 9, 5, .98)); border: 1px solid var(--line2); animation: pass-in .8s var(--spring) both; }
.sf-badge { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; border: 4px double var(--accent); transform: rotate(-12deg); animation: slam .7s .25s var(--spring) both; }
.sf-badge span { display: grid; gap: 2px; color: var(--gold2); font-size: 12.5px; font-weight: 800; }
.sf-badge b { font: 800 36px/1 var(--f-mono); }
.sf-in h2 { margin: 6px 0 0; font: 700 32px/1.25 var(--f-display); }
.sf-amt { margin: 0; font: 800 22px/1.2 var(--f-mono); color: var(--text); direction: ltr; }
.sf-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.sf-bits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sf-bits i { position: absolute; top: -20px; left: calc(50% + var(--x) * 45%); width: 14px; height: 14px; border-radius: 50%; background: var(--gold-flat); animation: drop 2.4s var(--d) ease-in forwards; }
@keyframes drop { to { transform: translateY(110vh) rotate(540deg); } }

@media (max-width: 560px) {
  .hero { padding-top: 84px; }
  .hero-slot { width: 120px; height: 120px; }
  .ps-route { padding: 18px 14px 8px; gap: 8px; }
  .ps-city { min-width: 50px; } .ps-city b { font-size: 20px; } .ps-city.to b { font-size: 24px; }
  .ps-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 16px; row-gap: 10px; }
  .ps-head { padding: 12px 16px; } .ps-head .mono { font-size: 9.5px; letter-spacing: .08em; }
  .ps-body { padding: 18px 16px 20px; }
  .stepcard h3 { font-size: 23px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:last-child { grid-column: span 2; }
  .live { padding: 18px 14px; }
  .chip.hide-s { display: none; }
  .bd-stamp { width: 74px; height: 74px; font-size: 11px; } .bd-st { padding-inline-end: 76px; }
}