/* Compact friend layout retained from the separate, explicit request. */
/* Ordered friend cards replace the large empty bottle pond. */
body.is-sections-demo .friend-hall { --glass-rim:var(--section-border);--glass-reflection:rgba(236,245,237,.12);padding:26px; }
body.is-sections-demo .friend-hall-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px; }
body.is-sections-demo .friend-hall-heading h3 { margin:9px 0 0;font-family:"Noto Serif SC","Songti SC",serif;font-size:23px;font-weight:500;letter-spacing:.05em; }
body.is-sections-demo .friend-hall-heading p { margin:0;color:var(--text-muted);font-size:13px;line-height:1.8; }
body.is-sections-demo .friend-constellation { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;height:auto;min-height:0;padding:8px 0;background:none;overflow:visible;border-radius:0; }
body.is-sections-demo .friend-constellation::before,body.is-sections-demo .friend-constellation::after { content:none; }
body.is-sections-demo .drifting-friend { position:relative;top:auto;left:auto;min-width:0;transform:none;transition:translate .15s ease-out; }
body.is-sections-demo .drifting-friend.is-dragging { transition:none; }
body.is-sections-demo .friend-constellation .friend-bottle { position:relative;display:flex;flex-direction:row;align-items:center;gap:17px;width:100%;min-width:0;min-height:164px;padding:22px 18px;border:1px solid var(--glass-rim);border-radius:20px;background:linear-gradient(135deg,var(--section-highlight),var(--section-soft));color:var(--text);animation:none;transform:none;text-align:left;filter:none;box-shadow:inset 0 1px var(--glass-reflection); }
body.is-sections-demo .friend-constellation .friend-bottle:hover { border-color:var(--gold);filter:none; }
body.is-sections-demo .friend-constellation .friend-bottle>span { position:static;padding:0;border:0;border-radius:0;background:none;opacity:1;transform:none;white-space:normal; }
/* Compact cards have persistent text, not the old floating tooltip labels. */
body.is-sections-demo .friend-constellation .friend-bottle:is(:hover,:focus-visible)>span { transform:none; }
body.is-sections-demo .friend-constellation .friend-bottle>span { inset:auto;transition:none; }
body.is-sections-demo .friend-constellation .friend-bottle>.friend-bottle-art { flex:0 0 75px;display:grid;place-items:center;width:75px;height:96px;border-radius:50%;background:radial-gradient(ellipse,var(--section-highlight),transparent 70%); }
body.is-sections-demo .friend-constellation .friend-bottle img { width:56px;height:78px;object-fit:contain;animation:bottle-float var(--bottle-duration) ease-in-out var(--bottle-delay) infinite; }
body.is-sections-demo .friend-constellation .friend-bottle:hover img { filter:drop-shadow(0 0 9px rgba(99,207,137,.42)); }
body.is-sections-demo .friend-constellation .friend-details { display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;flex:1;overflow-wrap:anywhere; }
body.is-sections-demo .friend-details>:is(strong,small,em) { min-width:0;max-width:100%; }
body.is-sections-demo .friend-details strong { font-family:"Noto Serif SC","Songti SC",serif;font-size:18px;line-height:1.5;font-weight:500; }
body.is-sections-demo .friend-details small { color:var(--text-muted);font-size:12px;line-height:1.9; }
body.is-sections-demo .friend-details em { color:var(--gold);font-size:11px;font-style:normal;letter-spacing:.12em; }
body.is-sections-demo .drifting-friend:is(.is-dragging,:focus-within) .friend-bottle img { animation-play-state:paused; }

@media(max-width:1100px) {
  body.is-sections-demo .friend-constellation { gap:12px; }
  body.is-sections-demo .friend-constellation .friend-bottle { flex-direction:column;gap:8px;padding:18px 15px;text-align:center; }
  body.is-sections-demo .friend-constellation .friend-bottle>.friend-bottle-art { flex-basis:80px;height:80px; }
  body.is-sections-demo .friend-details { align-items:center; }
}
@media(max-width:767px) {
  body.is-sections-demo .friend-hall { padding:21px; }
  body.is-sections-demo .friend-hall-heading { display:block;margin-bottom:18px; }
  body.is-sections-demo .friend-hall-heading p { margin-top:12px; }
  body.is-sections-demo .friend-constellation { grid-template-columns:1fr;gap:14px; }
  body.is-sections-demo .friend-constellation .friend-bottle { flex-direction:row;min-height:135px;padding:18px 20px;text-align:left; }
  body.is-sections-demo .friend-details { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { body.is-sections-demo .friend-constellation .friend-bottle img { animation:none; } }