/* hooodl.com/neighbours: what the neighbour list adds to /join.css. */
mark.pk { background: linear-gradient(transparent 30%, var(--pink) 30%, var(--pink) 92%, transparent 92%); }
.hint { flex-wrap: wrap; }
.stk .tx { display: flex; flex-direction: column; gap: 3px; }
.stk .tx .big { display: flex; align-items: center; gap: 8px; }
.opts.list .stk .tx small { margin: 0; }

/* scenes */
.walk { transform-box: fill-box; animation: walk 5s linear infinite; }
@keyframes walk { from { transform: translateX(-60px); } to { transform: translateX(0); } }
.loop { transform-box: view-box; transform-origin: 170px 112px; animation: spin 16s linear infinite; }
.coin { transform-box: fill-box; animation: drop 1.1s cubic-bezier(.5,0,.8,.6) both; }
@keyframes drop { from { transform: translateY(-190px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateY(0); } 90% { transform: translateY(-6px); } }
.plus { transform-box: fill-box; transform-origin: center; animation: plus .6s 1.5s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes plus { from { transform: scale(0) rotate(-10deg); } to { transform: rotate(-6deg); } }
.jarfill { transform-box: fill-box; transform-origin: bottom; animation: fill 1.6s .3s ease-out both; }
@keyframes fill { from { transform: scaleY(0); } }
.hero-district { --hbg: #D9E6FF; }
.hero-loves { --hbg: #C8F0DA; }
.hero-why { --hbg: #FFD3E6; }
.hero-pledge { --hbg: #FFE7C4; }
.hero-shout { --hbg: #FFF3A0; }
.hero-contact { --hbg: #BFE0FF; }

/* why: their reasons as a note */
.quote { padding: 16px 16px 14px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 4px 18px 18px 18px; box-shadow: 4px 4px 0 var(--pink); font: 400 19px/1.35 var(--marker); }
.quote small { display: block; margin-top: 6px; font: 500 12px/1.3 var(--mono); color: var(--muted); }

/* contact */
.tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #FFF7B8; border: 2px solid var(--ink); border-radius: 12px; font: 700 14px/1.4 var(--body); }
.tip svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* done: points, the Grätzl pass, how to redeem, invites */
.pts { display: flex; gap: 14px; align-items: center; padding: 14px; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
.pts .n { font: 400 40px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; }
.pts .tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pts b { font: 900 16px/1.2 var(--body); }
.pts span { font: 700 14px/1.35 var(--body); }
.pass { position: relative; background: var(--ink); color: var(--card); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 6px 6px 0 var(--pink); overflow: hidden; }
.pass .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pass .row > div { min-width: 0; }
.pass .lbl { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #BDB8A8; }
.pass .num { font: 400 44px/1 var(--display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.pass .who { font: 400 26px/1.1 var(--marker); color: var(--pink); overflow-wrap: anywhere; }
.pass .streetsign { background: var(--sign); color: #fff; border: 3px solid #fff; border-radius: 6px; padding: 6px 10px; font: 800 14px/1.1 var(--body); white-space: nowrap; }
.pass .icons { display: flex; gap: 8px; flex-wrap: wrap; }
.pass .icons span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--card); color: var(--ink); }
.pass .icons svg { width: 20px; height: 20px; }
.pass .pledge { font: 700 14px/1.4 var(--body); color: #E9E4D6; border-top: 1px dashed #4A4740; padding-top: 12px; }
.pass .pledge b { color: var(--yellow); }
.how { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font: 700 15px/1.4 var(--body); }
.how li::before { content: counter(s); width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); color: var(--yellow); border-radius: 50%; font: 900 13px/1 var(--body); }
.how li span { min-width: 0; overflow-wrap: anywhere; }
.invite { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 16px; }
.invite h3 { margin: 0; font: 900 17px/1.2 var(--body); }
.invite p { margin: 0; font-size: 14px; color: var(--muted); }
.linkrow { display: flex; gap: 8px; }
.linkrow code { flex: 1; min-width: 0; padding: 12px; background: var(--bg); border: 2px dashed var(--line); border-radius: 10px; font: 500 13px/1.2 var(--mono); overflow-wrap: anywhere; user-select: all; }
.linkrow button { padding: 0 16px; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 10px; font: 900 13px/1 var(--body); text-transform: uppercase; cursor: pointer; }
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ladder div { padding: 8px; border-radius: 10px; background: var(--bg); font: 700 12px/1.3 var(--body); text-align: center; }
.ladder b { display: block; font: 400 20px/1 var(--display); margin-bottom: 4px; }