/* WellTrack v3.7 — opt-in friend homes, detailed sharing, likes and comments. */
.friend-card.is-visitable{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.friend-card.is-visitable:hover{transform:translateY(-1px);border-color:rgba(85,123,104,.34);box-shadow:0 8px 20px rgba(78,68,50,.07)}.friend-card.is-visitable:focus-visible{outline:3px solid rgba(85,123,104,.22);outline-offset:2px}.friend-cheer{position:relative;z-index:2}
.friend-detail-page{display:grid;gap:15px}.friend-detail-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.friend-back{border:0;background:transparent;color:var(--brand-dark);padding:6px 0;font-weight:900;font-size:12px}.friend-relation{font-size:10px;font-weight:900;color:var(--muted);background:var(--surface-2);padding:6px 9px;border-radius:999px}.friend-detail-header{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}.friend-detail-header h1{font-size:25px;margin:3px 0 4px}.friend-detail-header p{font-size:11px;color:var(--muted);margin:0}.friend-avatar.large{width:52px;height:52px;border-radius:18px;font-size:18px}
.friend-home-stage{position:relative;overflow:hidden;min-height:270px;border-radius:26px;border:1px solid #d8d5c4;background:linear-gradient(#dce9e1 0 47%,#ead2a6 47%);box-shadow:var(--shadow)}.friend-home-stage .room-window{top:26px}.friend-home-stage .room-shelf{top:72px}.friend-home-stage .room-floor{z-index:0}.friend-home-stage .friend-monster-wrap{position:absolute;inset:0;z-index:4}.friend-home-stage .monster-wrap{bottom:30px}.friend-monster-name{position:absolute;z-index:8;left:15px;bottom:13px;display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:13px;background:rgba(255,253,247,.9);backdrop-filter:blur(8px);border:1px solid rgba(222,214,199,.85)}.friend-monster-name strong{font-size:12px}.friend-monster-name span{font-size:8px;color:var(--muted)}
.friend-water-card{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;padding:15px;border-radius:20px;background:var(--blue-soft);border:1px solid #cbdade}.friend-water-card>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.72);font-size:23px}.friend-water-card small{display:block;color:#62747a;font-size:9px;font-weight:900}.friend-water-card strong{display:block;font-size:22px;margin:2px 0}.friend-water-card p{margin:0;color:#62747a;font-size:9px}
.friend-feed-section{display:grid;gap:10px}.friend-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.friend-section-head h2{font-size:20px;margin:2px 0 0}.friend-section-head>span{font-size:10px;color:var(--muted);font-weight:900}.friend-meal-feed{display:grid;gap:11px}.friend-meal-post{padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 5px 14px rgba(78,68,50,.035)}.friend-meal-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.friend-meal-head>div{display:flex;align-items:baseline;gap:7px}.friend-meal-head strong{font-size:13px}.friend-meal-head span,.friend-post-owner{font-size:9px;color:var(--muted)}.friend-meal-photo{display:block;width:100%;max-height:300px;object-fit:cover;border-radius:15px;margin-top:10px;background:var(--surface-2)}.friend-meal-text{font-size:12px;margin:9px 0 0;line-height:1.55}.friend-meal-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.friend-meal-tags span{font-size:8px;font-weight:900;color:var(--brand-dark);background:var(--brand-soft);padding:4px 7px;border-radius:999px}.friend-post-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(222,214,199,.7)}.friend-post-actions>span{font-size:9px;color:var(--muted)}.friend-like{border:0;background:transparent;color:var(--muted);font-size:11px;font-weight:900;padding:3px 0}.friend-like.active{color:var(--coral)}.friend-comments{display:grid;gap:6px;margin-top:8px}.friend-comments>div{display:grid;grid-template-columns:auto 1fr;gap:6px;padding:7px 9px;border-radius:11px;background:var(--surface-2)}.friend-comments strong{font-size:9px}.friend-comments span{font-size:9px;line-height:1.45}.friend-comment-form{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:8px}.friend-comment-form input{min-width:0;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 10px;font-size:10px}.friend-comment-form button{border:0;border-radius:11px;background:var(--brand);color:#fff;padding:8px 11px;font-size:9px;font-weight:900}
.friend-private-card,.friend-private-row,.friend-privacy-footnote,.friend-empty{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:14px}.friend-private-card.large{margin-top:18px;padding:22px}.friend-private-card strong,.friend-private-row strong,.friend-privacy-footnote strong{font-size:12px}.friend-private-card p,.friend-private-row p,.friend-privacy-footnote p{font-size:10px;color:var(--muted);margin:4px 0 0}.friend-private-row{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center}.friend-private-row>span{font-size:22px}.friend-empty{font-size:11px;color:var(--muted);text-align:center}.friend-privacy-footnote{background:#eee8dc}
.friend-detail-modal-backdrop{position:fixed;z-index:120;inset:0;background:rgba(47,45,40,.48);display:grid;place-items:end center;padding:18px 12px calc(18px + env(safe-area-inset-bottom));overflow:auto}.friend-detail-modal{width:min(100%,520px);max-height:min(86vh,760px);overflow:auto;background:var(--surface);border-radius:24px;padding:17px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(40,35,28,.22)}.friend-modal-note{font-size:10px;color:var(--muted);margin:0 0 11px}.friend-privacy-options{display:grid;gap:7px;margin-bottom:12px}.friend-privacy-options label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:10px;border-radius:14px;background:var(--surface-2)}.friend-privacy-options input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand)}.friend-privacy-options strong{display:block;font-size:11px}.friend-privacy-options small{display:block;color:var(--muted);font-size:8px;line-height:1.45;margin-top:2px}
@media(max-width:430px){.friend-home-stage{min-height:250px}.friend-home-stage .monster-wrap{bottom:28px}.friend-detail-header h1{font-size:22px}.friend-detail-modal-backdrop{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}.friend-detail-modal{border-radius:22px}}