/* 놀이별 친구의 색. 값은 tokens.css가 정한다.

   친구는 두 화면에 산다 — 메뉴의 책 표지(site.css)와 놀이 시작 버튼(app.css).
   형태는 templates/play/_friend.html이 들고, 크기와 모션은 그 친구가 앉는 화면이
   정하며, 색만 이 파일에 모은다. 색을 화면마다 적으면 같은 친구가 두 화면에서
   다른 색으로 뜨는 길이 열리고, 그것은 "카드에서 본 색이 시작 화면으로 이어진다"는
   약속이 깨지는 자리다.

   놀이마다 다른 것은 --accent-band 하나뿐이다. 나머지 색(크림 외곽선·볼터치·
   눈동자)이 공유되기 때문에 네 친구가 한 식구로 보인다. */

/* 대표 색의 빛무리. 흐리지 않으면 테두리가 서서 친구 뒤에 원반 하나가 더
   생긴다 — blur는 뷰박스 단위라 친구가 커져도 같은 비율로 번진다. */
.friend-halo { fill: var(--accent-band); opacity: 0.2; filter: blur(14px); }
.friend-body {
  fill: var(--accent-band);
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linejoin: round;
  /* 그림자는 몸에만 건다. SVG 전체에 걸면 빛무리 원까지 그림자를 드리워
     친구 뒤에 검은 원반이 생긴다. */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}
.friend-core { fill: var(--band-2); }
.friend-string { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.friend-shine { fill: var(--ink); opacity: 0.55; }
.friend-blush { fill: var(--blush); opacity: 0.85; }
.friend-eye { fill: var(--pupil); }
.friend-eye-white { fill: var(--ink); }
.friend-glint { fill: var(--ink); }
.friend-beak { fill: var(--accent); }
/* 달님(창문)의 크레이터와 곁의 별 — 크림색을 옅게 얹어 대표 색 위에서도 읽힌다. */
.friend-crater { fill: var(--ink); opacity: 0.28; }
.friend-twinkle { fill: var(--ink); opacity: 0.85; }
/* 사자(음악대)의 갈기 — 얼굴과 같은 대표 색을 한 단계 어둡게 해 얼굴을 세운다. */
.friend-mane {
  fill: var(--accent-band);
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linejoin: round;
  filter: brightness(0.72);
}
.friend-mouth {
  fill: none;
  stroke: var(--pupil);
  stroke-width: 4;
  stroke-linecap: round;
}