/* PostUp friends — shared by /start/ and /friends/ (2026-10-02).
   Uses the host page's colour tokens (--paper, --gold, --ink …). */

.fwrap{padding:10px 18px 0}
.fbox{padding:12px 13px;border-radius:15px;background:var(--paper);border:1px solid rgba(232,200,119,.35);animation:rise .25s ease}
.fbox + .fbox{margin-top:8px}
.fbox .sublab{display:block}
.fbox input{width:100%;margin-top:8px;border:1px solid var(--line3);border-radius:11px;background:var(--inset);color:var(--ink);font:600 14px var(--sans);padding:11px 12px}
.fbox input::placeholder{color:var(--dim)}
.fbox .row2{display:flex;gap:8px;margin-top:8px}
.fbox .row2 input{margin-top:0;flex:1;min-width:0}
.fbtn{appearance:none;border:0;border-radius:11px;background:var(--gold);color:var(--ongold);font:800 13px var(--sans);padding:0 15px;cursor:pointer;flex:none;min-height:42px}
.fbtn[disabled]{background:var(--raised);color:var(--dim);cursor:default}
.fbtn.ghost{background:var(--raised);color:var(--ink2);border:1px solid var(--line3)}
.fmsg{margin:8px 0 0;font:600 12px/1.4 var(--sans);color:var(--muted)}
.fmsg.bad{color:var(--red)}
.fhero b{display:block;font:800 16px/1.3 var(--sans);color:var(--white)}
.fhero span{display:block;font:500 12.5px/1.45 var(--sans);color:var(--muted);margin-top:4px}
.ppl{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.pp{display:flex;align-items:center;gap:10px}
.pav{width:32px;height:32px;border-radius:10px;background:var(--raised);color:var(--ink2);font:800 11px var(--sans);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;position:relative}
.pav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp .t{flex:1 1 0;min-width:0}
.pp .t b{display:block;font:700 13.5px var(--sans);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .t span{display:block;font:600 11px var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fol{appearance:none;border:1px solid transparent;background:var(--gold);color:var(--ongold);border-radius:9px;font:800 11px var(--sans);letter-spacing:.04em;padding:7px 11px;cursor:pointer;white-space:nowrap;flex:none}
.fol.on{background:rgba(127,199,154,.14);color:var(--green);border-color:rgba(127,199,154,.45)}
.fol.ask{background:var(--raised);color:var(--ink2);border-color:var(--line3)}
.fol.no{background:none;color:var(--muted);border-color:var(--line3)}
.fchips{padding:10px 18px 2px;display:flex;gap:5px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fchips::-webkit-scrollbar{display:none}
.fchips .chip{font-size:11px;padding:6px 10px;flex:none;white-space:nowrap}
.compose{margin:10px 18px 0;padding:10px 12px;border-radius:15px;background:var(--paper);border:1px solid var(--line)}
.compose textarea{width:100%;border:0;background:none;color:var(--ink);font:500 13.5px/1.45 var(--sans);resize:none;outline:none;min-height:22px;padding:2px 0}
.compose textarea::placeholder{color:var(--dim)}
.compose .cb{display:flex;align-items:center;gap:8px;margin-top:6px}
.compose .cb label{font:700 11.5px var(--sans);color:var(--ink2);cursor:pointer;padding:6px 2px}
.compose .cb label input{display:none}
.compose .cb .sp{flex:1}
.compose .cb .fbtn{min-height:34px;padding:0 13px;font-size:12px}
.compose img{display:block;max-width:100%;max-height:180px;border-radius:10px;margin-top:8px}
.feed{padding:10px 18px 0;display:flex;flex-direction:column;gap:10px}
.fc{border-radius:18px;background:var(--paper);border:1px solid rgba(203,232,214,.13);overflow:hidden;padding-bottom:12px}
.fc .hd2{padding:12px 13px 0;display:flex;align-items:center;gap:10px}
.fc .hd2 .pav{width:36px;height:36px;border-radius:11px;font-size:12px}
.fc .hd2 .pav.me{background:var(--gold);color:var(--ongold)}
.fc .hd2 .t{flex:1 1 0;min-width:0}
.fc .hd2 .t b{display:block;font:800 14px var(--sans);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .hd2 .t span{display:block;font:600 11px var(--sans);color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kt{font:800 8.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;border-radius:5px;padding:3px 6px;white-space:nowrap;flex:none;color:var(--gold);background:rgba(232,200,119,.12)}
.kt.round{color:var(--blue);background:rgba(143,188,232,.12)}
.kt.league{color:var(--green);background:rgba(127,199,154,.12)}
.kt.post{color:var(--ink2);background:rgba(203,232,214,.08)}
.fc .tx{padding:9px 13px 0;font:600 13.5px/1.45 var(--sans);color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word}
.fc .ph{display:block;width:calc(100% - 26px);margin:10px 13px 0;border-radius:12px;max-height:420px;object-fit:cover;background:var(--inset)}
.rbox{margin:10px 13px 0;padding:11px 12px;border-radius:14px;background:var(--inset);border:1px solid rgba(203,232,214,.1)}
.rbox .r1{display:flex;align-items:flex-end;gap:12px}
.rbox .r1>div{flex:1 1 0;min-width:0}
.rbox .r1 i{display:block;font-style:normal;font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rbox .r1 b{display:block;font:700 20px/1 var(--mono);margin-top:4px;color:var(--ink)}
.rbox .r1 b.big{font-size:28px;color:var(--white)}
.rbox .r1 b.gold{color:var(--gold)}
.rbox .r1 button{appearance:none;border:1px solid var(--line3);background:var(--raised);color:var(--ink2);border-radius:9px;font:700 11px var(--sans);padding:7px 10px;cursor:pointer;white-space:nowrap;flex:none}
.holes{margin-top:11px;overflow-x:auto;scrollbar-width:none}
.holes::-webkit-scrollbar{display:none}
.holes .hh{display:flex;gap:3px;min-width:max-content}
.holes .h{width:30px;flex:none;text-align:center}
.holes .h i{display:block;font-style:normal;font:700 9px var(--mono);color:var(--muted)}
.holes .h em{display:block;font-style:normal;font:600 8.5px var(--sans);color:var(--muted);margin-top:1px}
.holes .h b{margin:4px auto 0;width:26px;height:26px;border-radius:5px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;font:700 13px var(--mono);color:var(--ink)}
.holes .h b.bi{border-radius:50%;border:1.5px solid var(--gold);background:rgba(232,200,119,.1);color:var(--gold)}
.holes .h b.ea{border-radius:50%;border:3px double var(--gold);background:rgba(232,200,119,.1);color:var(--gold)}
.holes .h b.bo{border:1.5px solid rgba(203,232,214,.5);color:var(--ink2)}
.holes .h b.db{border:3px double rgba(203,232,214,.55);color:var(--ink2)}
.hkey{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap;font:600 10.5px var(--sans);color:var(--muted)}
.resb{margin:10px 13px 0;padding:11px 12px;border-radius:14px;background:var(--inset);border:1px solid rgba(232,200,119,.35);display:flex;align-items:center;gap:12px}
.resb.good{border-color:rgba(127,199,154,.35)}
.resb .t{flex:1 1 0;min-width:0}
.resb .t i{display:block;font-style:normal;font:700 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.resb .t b{display:block;font:800 15px var(--sans);color:var(--white);margin-top:3px;overflow-wrap:break-word}
.resb .s{text-align:right;flex:none}
.resb .s b{display:block;font:700 22px var(--mono);color:var(--gold);white-space:nowrap}
.resb.good .s b{color:var(--green)}
.resb .s i{display:block;font-style:normal;font:700 8.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.rxs{padding:10px 13px 0;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.rx{appearance:none;display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(203,232,214,.14);background:var(--raised);border-radius:999px;padding:5px 9px;font-size:14px;line-height:1;cursor:pointer;color:var(--ink)}
.rx i{font-style:normal;font:700 11.5px var(--mono);color:var(--muted)}
.rx.on{background:rgba(127,199,154,.16);border-color:rgba(127,199,154,.45)}
.rx.on i{color:var(--green)}
.rx.more{font:700 12px var(--sans);color:var(--muted);padding:6px 9px}
.rxs .sp{flex:1}
.rxs .tl{appearance:none;border:0;background:none;color:var(--ink2);font:700 11.5px var(--sans);cursor:pointer;white-space:nowrap;padding:5px 2px}
.rxs .tl.del{color:var(--dim)}
.pick{padding:8px 13px 0;display:flex;gap:4px;flex-wrap:wrap}
.coms{margin-top:10px;padding:10px 13px 0;border-top:1px solid rgba(203,232,214,.08);display:flex;flex-direction:column;gap:8px;animation:rise .2s ease}
.com{display:flex;gap:8px;align-items:flex-start}
.com .pav{width:24px;height:24px;border-radius:7px;font-size:9px}
.com .pav.me{background:var(--gold);color:var(--ongold)}
.com .t{flex:1 1 0;min-width:0;font:500 12.5px/1.45 var(--sans);color:var(--ink);overflow-wrap:break-word}
.com .t b{font-weight:800;color:var(--white)}
.com .t span{color:var(--muted);font-size:11px}
.com .t button{appearance:none;border:0;background:none;color:var(--dim);font:600 11px var(--sans);cursor:pointer;padding:0 0 0 4px}
.cin{display:flex;gap:7px}
.cin input{flex:1 1 0;min-width:0;border:1px solid var(--line3);border-radius:10px;background:var(--inset);color:var(--ink);font:500 13px var(--sans);padding:9px 11px}
.cin button{appearance:none;border:0;border-radius:10px;background:var(--raised);color:var(--muted);font:800 12px var(--sans);padding:9px 13px;cursor:pointer;flex:none}
.cin button.go2{background:var(--gold);color:var(--ongold)}
.fempty{margin:10px 18px 0;padding:20px 16px;border-radius:15px;border:1px dashed rgba(203,232,214,.2);text-align:center;font:600 13px/1.5 var(--sans);color:var(--muted)}
.fempty button{margin-top:10px}
.fmore{display:block;margin:10px auto 0;appearance:none;border:1px solid var(--line3);background:var(--raised);color:var(--ink2);border-radius:11px;font:700 12.5px var(--sans);padding:10px 16px;cursor:pointer}
.asks{margin:10px 18px 0;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:rgba(232,200,119,.08);border:1px solid rgba(232,200,119,.35);cursor:pointer;color:var(--ink);font:700 13px var(--sans);width:calc(100% - 36px);appearance:none;text-align:left}
.asks i{margin-left:auto;font-style:normal;color:var(--gold)}

/* 2026-10-02: the Friends page, profiles, people you can tap */
.pp-l{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;color:inherit;text-decoration:none}
.pp-l:hover b{color:var(--gold)}
.ans{display:flex;gap:5px;flex:none}
.flink{appearance:none;border:0;background:none;color:var(--green);font:700 12px var(--sans);cursor:pointer;padding:0}
.flink.dim{color:var(--dim)}
.flink.back{display:block;margin:12px 18px 0;font-size:13px}
.fhero em{font-style:normal;color:var(--ink);font-weight:700}
.fc .hd2 .who{display:flex;align-items:center;gap:10px;flex:1 1 0;min-width:0;color:inherit;text-decoration:none}
.fc .hd2 .who:hover b{color:var(--gold)}
.olink{padding:8px 13px 0}.olink a{font:700 12px var(--sans);color:var(--green)}
.hrow a.eb{text-decoration:none}
.hrow .lnk{text-decoration:none}
.hrow .lnk + .lnk{margin-left:10px}
a.fbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.fmore{text-decoration:none;text-align:center;width:max-content}
.compose .cb{display:none}
.compose.has .cb,.compose:focus-within .cb{display:flex}
.ftabs{display:flex;gap:4px;padding:14px 18px 0;overflow-x:auto;scrollbar-width:none}
.ftabs::-webkit-scrollbar{display:none}
.ftab{appearance:none;border:1px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:999px;font:700 12px var(--sans);padding:8px 13px;cursor:pointer;white-space:nowrap;flex:none}
.ftab.on{background:var(--gold);color:var(--ongold);border-color:transparent}
.prof{margin:10px 18px 0;padding:16px;border-radius:18px;background:var(--paper);border:1px solid rgba(232,200,119,.35)}
.prof .ph1{display:flex;gap:14px;align-items:center}
.pav.big{width:72px;height:72px;border-radius:21px;font-size:24px;background:var(--gold);color:var(--ongold)}
.prof .t{flex:1 1 0;min-width:0}
.prof .t b{display:block;font:900 20px/1.2 var(--sans);color:var(--white);overflow-wrap:break-word}
.prof .t span{display:block;font:600 12px var(--sans);color:var(--muted);margin-top:3px}
.prof .t .cnt b{display:inline;font:700 12px var(--mono);color:var(--ink)}
.prof .ab{margin:12px 0 0;font:500 13.5px/1.45 var(--sans);color:var(--ink)}
.prof .pa{display:flex;align-items:center;gap:10px;margin-top:13px}
.prof .pa .fol{padding:10px 16px;font-size:12.5px}
.prof .fy{font:700 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
a.asks{text-decoration:none}
.fsearch{border-color:var(--line)}
.fsearch .fmsg a{font-weight:700}
/* a round being played right now (2026-10-03) */
.kt.live{color:#ff8a7a;background:rgba(255,120,100,.12);display:inline-flex;align-items:center;gap:5px}
.kt.live i{width:6px;height:6px;border-radius:50%;background:#ff6b5a;animation:ktPulse 1.4s ease-in-out infinite}
@keyframes ktPulse{0%,100%{opacity:1}50%{opacity:.3}}
.rbox.tee{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rbox.tee b{font:800 15px var(--sans);color:var(--white)}
.rbox.tee span{font:600 12px var(--sans);color:var(--muted)}
.rbox .r1 b small{font-size:13px;color:var(--muted);margin-left:1px}
.gds{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.gd{font:700 11.5px var(--sans);border-radius:999px;padding:4px 9px;background:rgba(232,200,119,.12);color:var(--gold);border:1px solid rgba(232,200,119,.3)}
.gd.ea,.gd.ace{background:rgba(232,200,119,.22);border-color:rgba(232,200,119,.6)}