/* 7 October 2026, package social2: spotting another player (js/nearby.js) and Invite friends (js/referrals.js). */

/* ---------- Another player, right here ---------- */
.pe-spot .pe-pic { width: 76px; height: auto; min-height: 60px; padding: 3px 2px 2px; border-color: #7fb0d8; }
.nb-who { display: grid; justify-items: center; gap: 1px; width: 100%; cursor: pointer; }
.nb-name { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.2; color: #cfe6ff; }
.pe-spot .pe-btns .btn { flex: 1 1 40%; }

/* ---------- Invite friends ---------- */
.inv-code { text-align: center; }
.inv-code > small { display: block; color: var(--muted); font-size: 12px; }
.inv-big { display: block; margin: 4px 0 2px; font-family: var(--pixel); font-size: 20px; letter-spacing: 1px; color: var(--gold); user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.inv-code .btnrow { padding: 8px 0 0; }
.inv-msg { margin: 12px 0 0; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 8px; background: #17110d; font-size: 14px; line-height: 1.4; text-align: left; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; }
.inv-how { margin: 0; padding-left: 20px; }
.inv-how li { margin: 0 0 8px; line-height: 1.4; }
.inv-how li:last-child { margin-bottom: 0; }
.inv-prog { display: flex; gap: 14px; align-items: center; }
.inv-count { flex: none; width: 92px; text-align: center; }
.inv-count b { display: block; font-family: var(--pixel); font-size: 26px; color: var(--gold); line-height: 1.1; }
.inv-count small, .inv-next small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.inv-next { flex: 1; min-width: 0; }
.inv-next .bar { margin-bottom: 6px; }
.inv-next small + small { margin-top: 4px; }
.inv-rung { align-items: center; }
.inv-rung > div { flex: 1; min-width: 0; }
.inv-rung > div small { display: block; line-height: 1.35; overflow-wrap: anywhere; }
.inv-rung.ready { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232, 182, 74, .25); }
.inv-rung .btn, .inv-rung .pill { flex: none; }
.inv-rung .pill { white-space: nowrap; }
.inv-at { flex: none; width: 46px; height: 46px; display: grid; place-content: center; text-align: center; border-radius: 10px; background: #17110d; border: 2px solid var(--line); }
.inv-at b { font-family: var(--pixel); font-size: 14px; color: var(--gold); line-height: 1.1; }
.inv-at small { font-size: 9px; color: var(--muted); line-height: 1.1; }
.inv-rung.ready .inv-at { border-color: var(--gold); }
.inv-rung.dim .inv-at b { color: var(--muted); }
.inv-chests > b { display: block; margin-bottom: 6px; }
.inv-chest { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.inv-chest > div { flex: 1; min-width: 0; }
.inv-chest small { display: block; color: var(--muted); font-size: 12px; }
.inv-enter { display: flex; gap: 8px; align-items: stretch; }
.inv-enter .inp { flex: 1; min-width: 0; text-transform: uppercase; }
.inv-enter .btn { flex: none; }
.inv-got { margin: 6px 0; }
.inv-got li { padding: 3px 0; }
.inv-proto .btn { flex: 1 1 100%; }
.inv-who { flex: none; display: flex; cursor: pointer; }
.inv-who > .hero-sprite { margin: -20px -14px -12px -18px; } /* the same trim the Friends screen gives a hero in a row */

/* Frames only invites give (worn from Store > Your cosmetics) */
.pf-frame_companion { border: 3px solid #5fc7a6; box-shadow: 0 0 0 1px #173a30, 0 0 8px #5fc7a688, inset 0 0 0 1px #c9ffe9; }
.pf-frame_guide { border: 3px solid #f2a65a; box-shadow: 0 0 0 2px #3a2410, 0 0 0 3px #ffe2b0, 0 0 10px #f2a65a99; }
.pf-frame_roadmaker { border: 3px solid transparent; background: linear-gradient(#120d0a, #120d0a) padding-box, linear-gradient(135deg, #ffd76a, #ff8a5c, #b78cff, #6fd3ff, #ffd76a) border-box; box-shadow: 0 0 10px #ffd76a88; animation: pf-roadmaker 3s ease-in-out infinite; }
@keyframes pf-roadmaker { 0%, 100% { box-shadow: 0 0 6px #ffd76a66; } 50% { box-shadow: 0 0 14px #b78cffaa; } }