/* 친구 곤충 판 — 셋뿐이라 격자로 나란히 둔다. 합성 판 셋 중 하나다. */
.friends{position:fixed;inset:0;z-index:10;display:grid;
  grid-template-rows:auto 1fr;gap:8px;padding:8px 10px 12px;
  background-size:cover;background-position:center;
  background-image:url("../../../assets/bg/bg_terrarium.webp"),linear-gradient(#e9d9b6,#c9a97a)}
@media (orientation:landscape){
  .friends{background-image:url("../../../assets/bg/bg_terrarium_land.webp"),linear-gradient(#e9d9b6,#c9a97a)}}

.friends-head{display:flex;align-items:center;padding-right:calc(var(--touch) + 6px);
  font-size:.7em;background:var(--panel);border:3px solid var(--wood);
  border-radius:999px;padding:6px 16px;justify-self:start}

/*
 * ⚠ **스크롤되는 칸에는 `min-height:0` 이 있어야 한다.**
 * 격자 칸(`1fr`)은 기본이 `min-height:auto` 라 **내용만큼 늘어난다.**
 * 그러면 스크롤이 안 생기고 아래 것들이 화면 밖으로 밀려난다 —
 * 4:3 폰이나 가로 모드에서 아래가 잘리던 원인이다(2026-08-29, 무기 판에서 먼저 잡았다).
 */
.friends-grid{display:grid;gap:8px;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(min(46vw,240px),1fr));padding:2px}
.friends-card{display:grid;justify-items:center;gap:4px;position:relative;
  background:var(--panel);border:3px solid var(--wood);border-radius:20px;padding:10px 8px}
/*
 * 아직 못 만난 친구 — **검은 실루엣**. 도감·앨범과 같은 방식이다.
 * 흐리게만 두면 "있는데 안 보이는 것"인지 "아직 없는 것"인지 구별이 안 된다.
 * 참고 게임 펫 격자도 미보유는 회색 실루엣이다 (docs/SYSTEM_GAP.md S6).
 */
.friends-card.locked{opacity:.9;background:rgba(120,108,86,.22)}
.friends-card.locked .friends-pic{filter:brightness(0) opacity(.28)}
.friends-card.locked b{opacity:.55}
.friends-pic{width:min(28vw,120px);height:min(28vw,120px);object-fit:contain}
.friends-card b{font-size:.66em}
.friends-tip{font-size:.44em;font-weight:500;text-align:center;line-height:1.3;opacity:.85}
.friends-where{font-size:.42em;font-weight:500;color:var(--wood)}

/* 등급 — 숫자보다 점이 빠르다 */
.friends-dots{display:flex;gap:4px}
.friends-dots i{width:12px;height:12px;border-radius:50%;
  border:2px solid var(--wood);background:transparent}
.friends-dots i.on{background:var(--sap);border-color:#a86a10}

.friends-merge{min-height:var(--touch);min-width:60%;margin-top:2px;
  background:var(--panel);border:4px solid var(--wood);border-radius:999px;
  padding:4px 16px;font-size:.5em;cursor:pointer}
.friends-merge.can{border-color:var(--leaf);animation:glow 1.15s ease-in-out infinite}
.friends-merge.done{opacity:.75}

.friends-pop{position:absolute;top:8px;right:10px;color:var(--leaf);font-size:.6em;
  pointer-events:none;animation:pop-up .9s ease-out forwards}