/* ================= friends and their messages (2026-10-27) =================
   The card on the right (src/friends.js; the user's two pictures, design/camp/friends/README.md), 380 wide under
   the clock's card (the panel's top), down to the menu's bottom, in the menu's wood. A friends button opens it (the
   user, 2026-10-29; the arrow tab on the window's right edge went). */
/* The friends buttons (.friends-btn): the user's wooden disc (2026-10-29: a .pg-round like the buildings' settings and
   Back, assets/camp/ui/round-friends.webp) on the HUD left of the clock and first in every building's bar, and in the
   fire's room the plain people glyph left of the room's buttons. src/friends.js paint() keeps them alike: the count at
   the corner, .lit while it is above zero, aria-expanded while the card is open. */
.friends-btn .fb-n{position:absolute;z-index:1;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:#f6c945;color:#1c1007;font:700 13px/22px var(--cp-bold);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:none}
.friends-btn .fb-n:empty{display:none}
/* the disc while the card is open: lit as the settings' gear is while the settings are */
.pg-round.friends-btn[aria-expanded="true"]{filter:var(--pg-shadow) drop-shadow(0 0 8px rgba(255,205,135,.55)) brightness(1.12)}
/* The notice while something waits (the user, 2026-10-29: a request was easy to miss): a gold ring and glow round
   the disc, pulsing, while the count is above zero (requests waiting, lines unread). */
.pg-round.friends-btn.lit::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(246,201,69,.95),0 0 26px 8px rgba(255,196,107,.8);animation:fr-ring 2.4s ease-in-out infinite}
@keyframes fr-ring{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pg-round.friends-btn.lit::after{animation:none;opacity:.8}}
/* The plain icon in the fire's room (the user, 2026-10-29: the friends icon as it was, there): no frame, the panel's
   people glyph with a soft dark shadow, brighter while hovered or while the card is open; the count at its corner.
   Lit, the glyph itself brightens and glows gold, pulsing. */
.fr-friends{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;color:#f0c27a;transition:color .2s}
.fr-friends:hover,.fr-friends[aria-expanded="true"]{color:#ffd98a}
.fr-friends:focus-visible{outline:2px solid var(--fr-gold-hi,#f6c945);outline-offset:2px}
.fr-friends .fb-i{display:block;width:34px;height:34px}
.fr-friends .fb-i svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(16,10,5,.8)) drop-shadow(0 0 5px rgba(16,10,5,.45))}
.fr-friends .fb-n{top:calc(50% - 30px);right:auto;left:calc(50% + 9px)}
.fr-friends.lit .fb-i svg{animation:fr-lit 2.4s ease-in-out infinite}
@keyframes fr-lit{
  0%,100%{color:#f4cd8a;filter:drop-shadow(0 1px 1px rgba(16,10,5,.8)) drop-shadow(0 0 3px rgba(255,236,190,.35)) drop-shadow(0 0 8px rgba(255,214,120,.3)) drop-shadow(0 0 20px rgba(255,180,70,.2))}
  50%{color:#fff0c4;filter:drop-shadow(0 1px 1px rgba(16,10,5,.7)) drop-shadow(0 0 3px rgba(255,246,210,1)) drop-shadow(0 0 8px rgba(255,214,120,1)) drop-shadow(0 0 20px rgba(255,180,70,1))}
}
@media (prefers-reduced-motion:reduce){.fr-friends.lit .fb-i svg{animation:none;color:#ffe7a8;filter:drop-shadow(0 1px 1px rgba(16,10,5,.7)) drop-shadow(0 0 2px rgba(255,243,200,1)) drop-shadow(0 0 6px rgba(255,214,120,1)) drop-shadow(0 0 16px rgba(255,190,90,1))}}

.friends{position:fixed;z-index:12;right:22px;top:126px;bottom:40px;width:380px;box-sizing:border-box;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#21160f 0%,#1d140e 30%,#1a120d 100%);border:2px solid var(--cp-line);border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.45);
  transform:translateX(calc(100% + 34px));transition:transform .5s var(--ease);font:400 15px/1.3 var(--cp-sans);color:var(--cp-text)}
.friends[hidden]{display:none}
body.friends-open .friends{transform:none}
.fp-head{position:relative;flex:none;padding:16px 16px 0 22px}
.fp-top{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.fp-eyebrow{font:700 12px/1 var(--cp-px);letter-spacing:.2em;color:var(--cp-gold)}
.fp-tools{display:flex;align-items:center;gap:2px;margin-right:-6px}
.fp-icon{position:relative;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:none;color:#f0c27a;cursor:pointer}
.fp-icon svg{width:22px;height:22px;fill:currentColor}
.fp-icon:hover,.fp-icon[aria-expanded="true"]{background:rgba(255,226,180,.08)}
.fp-icon:focus-visible,.fp-row:focus-visible,.fp-tab:focus-visible,.fp-btn:focus-visible,.fp-back:focus-visible,.fp-asks:focus-visible,.fp-send:focus-visible{outline:2px solid var(--cp-gold);outline-offset:2px}
.fp-icon.did{color:#9be38a}
.fp-title{margin:4px 0 0;font:700 34px/1 var(--cp-serif);color:#fdfcf2;padding:.06em 0}
.fp-back{display:flex;align-items:center;gap:4px;margin-left:-8px;padding:4px 8px 4px 2px;border:0;border-radius:10px;background:none;color:#fefefc;font:400 20px/1 var(--cp-serif);cursor:pointer}
.fp-back svg{width:22px;height:22px;color:#f0c27a}
.fp-back:hover{background:rgba(255,226,180,.06)}
/* you, and each friend */
.fp-me,.fp-who{display:flex;align-items:center;gap:14px;margin-top:12px}
.fp-who{margin-top:6px;padding-bottom:12px;border-bottom:1px solid #4d3c2d}
.fp-who .fp-icon{margin-left:auto}
.fp-av{flex:none;display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;box-sizing:border-box;border:2px solid #d9a05b;background:#2a1c14;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fp-av.big{width:64px;height:64px}
.fp-av img{display:block;width:100%;height:100%;object-fit:cover}
.fp-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fp-name{font:400 22px/1.1 var(--cp-serif);color:#fefefc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.1em 0;margin:-.1em 0}
.fp-st{display:inline-flex;align-items:center;gap:7px;margin-top:5px;font:400 14px/1 var(--cp-sans);color:#c2b6a8;white-space:nowrap}
.fp-dot{width:9px;height:9px;border-radius:50%;background:#5c5650;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.fp-st.here .fp-dot{background:#7ed26b;box-shadow:0 0 6px rgba(126,210,107,.55)}
.fp-st.here{color:#d6cdbf}
.fp-moon{display:inline-grid;place-items:center;width:12px;height:12px}
.fp-moon svg{width:12px;height:12px;fill:#f6c945}
/* Friends and Chats */
.fp-tabs{display:flex;margin-top:12px;border-bottom:1px solid #4d3c2d}
.fp-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 0 9px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:400 18px/1 var(--cp-serif);color:#b8ac9e;cursor:pointer}
.fp-tab b{font-weight:400;color:#d9cfc2}
.fp-tab[aria-selected="true"]{color:#fefefc;border-bottom-color:#f6c945}
.fp-tab[aria-selected="true"] b{color:#fefefc}
.fp-n{display:inline-block;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:#f6c945;color:#1c1007;font:700 12px/20px var(--cp-bold);text-align:center;flex:none}
/* the list */
.fp-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:12px 16px 16px 20px;scrollbar-width:thin;scrollbar-color:#5c4130 transparent}
.fp-asks{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:2px 0 4px;padding:11px 10px 11px 14px;border:1.5px solid #ab7847;border-radius:10px;background:#281c15;color:var(--cp-text);font:400 17px/1 var(--cp-serif);cursor:pointer;text-align:left}
.fp-asks:hover{background:#2f2119}
.fp-asks > svg{width:22px;height:22px;fill:#f0c27a;flex:none}
.fp-asks .fp-n{margin-left:auto}
.fp-chev{display:grid;place-items:center;width:18px;height:18px;color:#c2b6a8}
.fp-chev svg{width:18px;height:18px}
.fp-sec{margin:14px 2px 6px;font:500 14px/1 var(--cp-sans);color:#e0b768;letter-spacing:.02em}
.fp-rule{height:1px;margin:14px 0 4px;background:#4d3c2d}
.fp-row{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:7px 8px 7px 4px;border:0;border-radius:12px;background:none;color:var(--cp-text);text-align:left;cursor:pointer;font:inherit}
button.fp-row:hover{background:rgba(255,226,180,.06)}
.fp-row .fp-name{font-size:19px}
.fp-row .fp-last{margin-top:4px;font:400 14px/1.2 var(--cp-sans);color:#a59a8b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.fp-when{font:400 12.5px/1 var(--cp-sans);color:#8a7c68;white-space:nowrap}
.fp-row.ask{cursor:default}
.fp-row.ask .fp-btn{flex:none}
.fp-empty{margin:18px 4px;font:400 15px/1.4 var(--cp-sans);color:#9c9284;text-align:center;list-style:none}
.fp-btn{height:34px;padding:0 13px;border:1.5px solid #6a4c31;border-radius:8px;background:#2a1e16;font:600 14px/1 var(--cp-bold);color:var(--cp-text);cursor:pointer;white-space:nowrap}
.fp-btn:hover{filter:brightness(1.1)}
.fp-btn.yes{border-color:#cd9d48;background:#2a1c10;color:#e6b65a}
.fp-btn[disabled]{opacity:.5;cursor:default}
/* adding by code */
.fp-code{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.fp-code-t{font:700 24px/1 var(--cp-bold);letter-spacing:.12em;color:#f7df7a;font-variant-numeric:tabular-nums;padding:8px 0}
.fp-ask{display:flex;gap:8px;align-items:center}
.fp-ask .fp-in{flex:1;min-width:0;letter-spacing:.08em;text-transform:uppercase}
.fp-note{margin:12px 2px 0;font:400 14px/1.4 var(--cp-sans);color:#c2b6a8;min-height:1.4em}
/* the thread */
.fp-log{list-style:none;margin:0;padding:0 0 4px;display:flex;flex-direction:column;gap:10px}
.fp-day{display:flex;align-items:center;gap:12px;margin:4px 0 2px;font:400 13px/1 var(--cp-sans);color:#8a7c68;white-space:nowrap}
.fp-day::before,.fp-day::after{content:"";flex:1;height:1px;background:#4d3c2d}
.fp-msg{display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:86%}
.fp-msg.me{align-self:flex-end;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:4px 6px}
.fp-msg.me .fp-time{flex-basis:100%;text-align:right}
/* the "1" beside your own line until the friend has read it (the user, 2026-10-29, as KakaoTalk shows it) */
.fp-seen{font:700 12px/1 var(--cp-bold);color:#f6c945;padding:0 0 5px}
.fp-msg.seen .fp-seen,.fp-msg.pending .fp-seen,.fp-msg.failed .fp-seen{display:none}
.fp-bub{box-sizing:border-box;padding:9px 13px 10px;border:1px solid rgba(255,236,205,.13);border-radius:14px;background:#2a1d14;font:400 15.5px/1.4 var(--cp-sans);color:#f1ede6;overflow-wrap:anywhere;white-space:pre-wrap}
.fp-bub[data-msg]{cursor:pointer}
.fp-msg.me .fp-bub{background:#2e2212;border-color:#b8763c}
.fp-time{font:400 12px/1 var(--cp-sans);color:#8a7c68;font-variant-numeric:tabular-nums;padding:0 4px}
.fp-msg.pending{opacity:.6}
.fp-msg.failed{opacity:.55}
.fp-msg.failed .fp-bub{text-decoration:line-through;text-decoration-color:rgba(232,87,42,.8)}
.fp-foot{flex:none;padding:10px 14px 14px 18px;border-top:1px solid #4d3c2d}
.fp-foot[hidden]{display:none}
.fp-say{display:flex;gap:8px;align-items:center}
.fp-in{display:block;width:100%;height:44px;box-sizing:border-box;margin:0;padding:0 14px;border:1.5px solid #7a5a30;border-radius:10px;background:#171410;box-shadow:none;font:400 15.5px/1.3 var(--cp-sans);color:#e8e6e3}
.fp-say .fp-in{flex:1;min-width:0}
.fp-in.small{height:36px;font-size:14px}
.fp-in:focus{border-color:#c8903f;outline:none;box-shadow:none}
.fp-in::placeholder{color:#8a8173}
.fp-send{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1.5px solid #cd9d48;border-radius:10px;background:#2a1c10;color:#e6b65a;cursor:pointer}
.fp-send svg{width:22px;height:22px}
.fp-send:hover{background:#352412}
/* the menu over a thread (remove, block, report), and a line's */
.fp-menu{position:absolute;z-index:3;right:14px;top:58px;min-width:190px;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--cp-line);border-radius:12px;background:#1b130d;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.fp-menu.line{right:auto;left:16px}
.fp-menu.report{right:12px;left:12px;top:52px;gap:8px;padding:12px}
.fp-menu-item{padding:10px 12px;border:0;border-radius:8px;background:rgba(255,236,205,.06);font:400 14.5px/1 var(--cp-sans);color:var(--cp-text);text-align:left;cursor:pointer}
.fp-menu-item:hover{background:rgba(217,160,91,.18)}
.fp-menu-note{margin:2px 4px 0;font:400 12.5px/1.3 var(--cp-sans);color:#8a7c68}
.fp-menu-h{font:600 15px/1.2 var(--cp-bold);color:#fef5de}
.fp-reasons{display:flex;flex-direction:column;gap:4px;font:400 14px/1.3 var(--cp-sans);color:#e6dccd}
.fp-reasons label,.fp-check{display:flex;align-items:center;gap:8px;cursor:pointer}
.fp-check{font:400 14px/1.3 var(--cp-sans);color:#e6dccd}
.fp-menu-acts{display:flex;justify-content:flex-end;gap:8px}

/* ---- a phone: the card over the camp, the HUD (the friends disc with it) stepping back as it does for the menu ---- */
@media (max-width:760px){
  .friends{left:auto;right:12px;top:calc(var(--safe-t) + 12px);bottom:calc(var(--safe-b) + 12px);width:min(380px,calc(100vw - 48px));transform:translateX(calc(100% + 40px))}
  body.friends-open .friends{box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 16px 36px rgba(0,0,0,.45)}
  body.friends-open .hud{opacity:0;pointer-events:none}
  .friends-btn .fb-n{min-width:20px;height:20px;border-radius:10px;font-size:12px;line-height:20px}
  /* (In the room's bar a fourth button cut the fire's name to "솔바람 …", as 접기's word once did: on a phone the icon
     stands just under the bar's right end instead, over the dark band above the painting.) */
  .fr-acts{position:relative}
  .fr-friends{position:absolute;top:calc(100% + 6px);right:0;width:42px;height:42px}
  .fr-friends .fb-i{width:28px;height:28px}
  .fr-friends .fb-n{top:calc(50% - 25px);left:calc(50% + 6px)}
  /* (One card at a time: the menu's tab steps aside while the card is open.) */
  body.friends-open .nav-toggle{opacity:0;pointer-events:none}
  .fp-head{padding:12px 12px 0 16px}
  .fp-body{padding:10px 12px 14px 14px}
  .fp-title{font-size:30px}
}
/* The card ends above the folded fire's dock card, as a panel on the right does (src/ui.js, Dock.place: --dock-room). */
@media (min-width:761px){
  body.fire-docked .friends{bottom:max(54px,var(--dock-room,0px))}
}
/* The fire's name card: a request already sent is said, not pressed. */
.fr-pop-item[disabled]{opacity:.55;cursor:default}

/* ---- Korean: the labels in the plain sans, as the camp's other labels ---- */
html[lang="ko"] .fp-sec{letter-spacing:.02em}