/* Wulin Saga — party frames (HUD, under the player frame), party invite cards and the party window
   (client/js/ui/party.js). Owned by ui-social. Contract: docs/ARCHITECTURE.md §7.5. */

/* ------------------------------------------------------------------ HUD column */
.social-hud {
  position: absolute;
  left: 16px;
  top: var(--hud-party-top, 118px);
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  pointer-events: none !important;
  font-family: var(--font, 'Kanit', 'Leelawadee UI', Tahoma, sans-serif);
  color: var(--c-text, #f3e6c8);
}
.social-hud .pf-member, .social-hud .pf-head, .social-hud .pf-invite { pointer-events: auto; }
.pf-party { display: flex; flex-direction: column; gap: 5px; }
.pf-list { display: flex; flex-direction: column; gap: 5px; }

.pf-head {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 7px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-gold, #e8c46a);
  text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, rgba(62, 34, 20, 0.92), rgba(24, 13, 8, 0.92));
  border: 1px solid rgba(232, 196, 106, 0.45);
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(10, 5, 2, 0.8), 0 3px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s;
}
.pf-head:hover { filter: brightness(1.18); border-color: var(--c-gold, #e8c46a); }
.pf-head-ico svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.pf-head-count { color: var(--c-text, #f3e6c8); font-variant-numeric: tabular-nums; }
.pf-head-lead svg { display: block; width: 14px; height: 14px; }
.pf-head-key {
  min-width: 15px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--c-gold, #e8c46a);
  background: #1a0f0a;
  border: 1px solid var(--c-gold-dark, #9a7430);
  border-radius: 3px;
}

/* ------------------------------------------------------------------ member frame */
.pf-member {
  --cls: #a8977a;
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 5px 9px 5px 6px;
  border-radius: 7px;
  border: 1px solid #140904;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255, 214, 140, 0.09), rgba(255, 214, 140, 0) 60%),
    linear-gradient(180deg, rgba(62, 34, 20, 0.93), rgba(24, 13, 8, 0.93));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--cls) 26%, transparent) 0%, transparent 45%),
    radial-gradient(120% 130% at 50% 0%, rgba(255, 214, 140, 0.09), rgba(255, 214, 140, 0) 60%),
    linear-gradient(180deg, rgba(62, 34, 20, 0.93), rgba(24, 13, 8, 0.93));
  box-shadow:
    inset 0 0 0 1px rgba(232, 196, 106, 0.4),
    inset 0 0 0 3px rgba(22, 10, 5, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s, filter 0.3s, box-shadow 0.15s, transform 0.15s;
}
.pf-member::after {
  /* class-colour accent on the left edge */
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--cls);
  box-shadow: 0 0 6px var(--cls);
  opacity: 0.9;
}
.pf-member:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 150, 0.8),
    inset 0 0 0 3px rgba(22, 10, 5, 0.9),
    0 4px 14px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(232, 196, 106, 0.22);
}
.pf-member.pf-enter { animation: pf-enter 0.35s ease-out; }
@keyframes pf-enter { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.pf-badge {
  --cls: #a8977a;
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff7e2;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.35), transparent 45%),
    radial-gradient(circle at 50% 60%, var(--cls), #120a06 120%);
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.35), transparent 45%),
    radial-gradient(circle at 50% 60%, var(--cls), color-mix(in srgb, var(--cls) 45%, #000) 100%);
  box-shadow:
    0 0 0 2px #2a1206,
    0 0 0 3.5px #c9a24a,
    0 0 0 4.5px #2a1206,
    0 3px 8px rgba(0, 0, 0, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
.pf-badge svg { width: 22px; height: 22px; display: block; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
.pf-badge svg .ln { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pf-badge svg .ln.thin { stroke-width: 1.1; }
.pf-badge.lg { width: 40px; height: 40px; }
.pf-badge.lg svg { width: 24px; height: 24px; }
.pf-lv {
  position: absolute;
  left: -7px;
  bottom: -6px;
  min-width: 19px;
  height: 17px;
  padding: 0 3px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  color: #2a1206;
  background: radial-gradient(circle at 35% 30%, #fff4cc, #e8c46a 45%, #95621c);
  box-shadow: 0 0 0 1.5px #2a1206, 0 2px 4px rgba(0, 0, 0, 0.6);
}

.pf-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-top { display: flex; align-items: center; gap: 4px; height: 17px; min-width: 0; }
.pf-crown { display: none; flex: none; width: 15px; height: 15px; }
.pf-crown svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 3px rgba(255, 200, 80, 0.6)); }
.leader .pf-crown { display: inline-block; }
.pf-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff3d6;
  text-shadow: 0 1px 2px #000;
}
.pf-where {
  flex: 0 1 auto;
  max-width: 96px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  color: #d9c497;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.25);
}
.pf-member .bar { border-radius: 3px; }
.pf-member .pf-hp { height: 12px; }
.pf-member .pf-hp .bar-text { font-size: 9.5px; letter-spacing: 0.2px; }
.pf-member .pf-mp { height: 5px; }
.pf-member .bar-fill { transition: width 0.3s ease-out; }

.pf-member.offmap { opacity: 0.58; filter: saturate(0.45); }
.pf-member.offmap:hover { opacity: 0.85; }
.pf-member.dead { filter: grayscale(0.9) brightness(0.8); }
.pf-member.dead .pf-hp .bar-text { color: #ffb0a4; }
.pf-member.dead .pf-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(10, 5, 3, 0.55);
}

/* ------------------------------------------------------------------ invite card */
.pf-invites { display: flex; flex-direction: column; gap: 8px; }
.pf-invite {
  position: relative;
  width: 280px;
  padding: 9px 12px 11px;
  border-radius: 8px;
  border: 1px solid #140904;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 190, 110, 0.16), rgba(255, 190, 110, 0) 65%),
    linear-gradient(180deg, rgba(74, 30, 18, 0.96), rgba(26, 12, 8, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(232, 196, 106, 0.7),
    inset 0 0 0 3px rgba(22, 10, 5, 0.9),
    inset 0 0 0 4px rgba(139, 90, 43, 0.55),
    0 8px 22px rgba(0, 0, 0, 0.6);
  animation: pf-inv-in 0.28s cubic-bezier(0.2, 1.2, 0.4, 1), pf-inv-glow 2s ease-in-out 0.3s infinite;
  transition: opacity 0.2s, transform 0.2s;
}
.pf-invite.leaving { opacity: 0; transform: translateX(-12px); }
.pf-invite.pf-inv-bump { animation: pf-inv-in 0.28s cubic-bezier(0.2, 1.2, 0.4, 1), pf-inv-glow 2s ease-in-out 0.3s infinite; }
@keyframes pf-inv-in { from { opacity: 0; transform: translateX(-18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pf-inv-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(232, 196, 106, 0.7), inset 0 0 0 3px rgba(22, 10, 5, 0.9), inset 0 0 0 4px rgba(139, 90, 43, 0.55), 0 8px 22px rgba(0, 0, 0, 0.6); }
  50% { box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 1), inset 0 0 0 3px rgba(22, 10, 5, 0.9), inset 0 0 0 4px rgba(139, 90, 43, 0.55), 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 18px rgba(232, 196, 106, 0.45); }
}
.pf-inv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-gold, #e8c46a);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px #000;
}
.pf-inv-ico svg { display: block; width: 15px; height: 15px; fill: currentColor; }
.pf-inv-time {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  color: #f1e2c2;
  font-variant-numeric: tabular-nums;
}
.pf-invite.urgent .pf-inv-time { color: #ff8f7f; }
.pf-inv-text {
  margin: 5px 0 7px;
  font-size: 14px;
  line-height: 1.4;
  color: #f7ecd4;
  text-shadow: 0 1px 2px #000;
}
.pf-inv-name { color: #fff; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 8px rgba(94, 227, 236, 0.45); }
.pf-inv-bar {
  height: 4px;
  margin-bottom: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.pf-inv-fill {
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #9c7627, #ffe9a8);
  box-shadow: 0 0 6px rgba(255, 220, 140, 0.6);
}
.pf-invite.urgent .pf-inv-fill { background: linear-gradient(90deg, #8e1d15, #ff7a66); box-shadow: 0 0 6px rgba(255, 110, 90, 0.7); }
.pf-inv-btns { display: flex; gap: 8px; }
.pf-inv-btns .btn { flex: 1 1 0; }

/* ------------------------------------------------------------------ window */
.pw { display: flex; flex-direction: column; gap: 8px; }
.pw-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.pw-head-ico svg { display: block; width: 20px; height: 20px; fill: var(--c-gold, #e8c46a); filter: drop-shadow(0 1px 1px #000); }
.pw-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-gold-light, #fff0b8);
  text-shadow: 0 1px 1px #000;
}
.pw-count {
  flex: none;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-gold, #e8c46a);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--c-gold-dark, #9a7430);
  border-radius: 10px;
}
.pw-listwrap { padding: 6px; }
.pw-list { gap: 4px; }
.pw-member.list-item {
  position: relative;
  min-height: 60px;
  gap: 10px;
  padding: 6px 8px 6px 10px;
  cursor: pointer;
}
.pw-member.self { background: linear-gradient(90deg, rgba(232, 196, 106, 0.1), rgba(232, 196, 106, 0.02)); border-color: rgba(232, 196, 106, 0.22); }
.pw-member.offmap .pw-info, .pw-member.offmap .pf-badge { opacity: 0.62; }
.pw-member.dead .pf-badge, .pw-member.dead .pw-bars { filter: grayscale(0.9); }
.pw-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pw-name-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  color: #fff3d6;
}
.pw-you {
  flex: none;
  padding: 0 6px;
  font-size: 10.5px;
  line-height: 15px;
  color: #2a1608;
  background: linear-gradient(180deg, #fff0b8, #e8c46a 55%, #b08a3a);
  border-radius: 8px;
}
.pw-sub { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--c-muted, #a8977a); white-space: nowrap; overflow: hidden; }
.pw-cls { font-weight: 500; filter: brightness(1.35); }
.pw-dot { opacity: 0.6; }
.pw-map { overflow: hidden; text-overflow: ellipsis; }
.pw-map.off { color: #ffb86b; }
.pw-bars { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.pw-member .pw-hp { height: 11px; }
.pw-member .pw-hp .bar-text { font-size: 9.5px; }
.pw-member .pw-mp { height: 4px; }
.pw-acts { flex: none; display: flex; gap: 4px; }
.pw-act {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold, #e8c46a);
  background: linear-gradient(180deg, #43291b, #22140c);
  border: 1px solid rgba(154, 116, 48, 0.8);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.14), 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: filter 0.12s, border-color 0.12s, color 0.12s;
}
.pw-act svg { display: block; width: 15px; height: 15px; fill: currentColor; }
.pw-act:hover { filter: brightness(1.25); border-color: var(--c-gold, #e8c46a); }
.pw-whisper { color: #ff9fd8; }
.pw-kick { color: #ff8f7f; }
.pw-kick:hover { background: linear-gradient(180deg, #6a1a14, #3a0d09); }
.pw-seat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 12px;
  font-size: 12px;
  color: rgba(168, 151, 122, 0.6);
  border: 1px dashed rgba(154, 116, 48, 0.35);
  border-radius: var(--radius, 3px);
}
.pw-seat-ring { width: 26px; height: 26px; border-radius: 50%; border: 1px dashed rgba(154, 116, 48, 0.45); }
.pw-empty { padding: 16px 12px 14px; text-align: center; }
.pw-empty-ico svg { width: 44px; height: 44px; fill: rgba(232, 196, 106, 0.35); filter: drop-shadow(0 2px 3px #000); }
.pw-empty-title { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--c-gold, #e8c46a); }
.pw-empty-text { margin-top: 5px; font-size: 12.5px; line-height: 1.55; color: var(--c-muted, #a8977a); }
.pw .section-title { margin: 4px 0 0; }
.pw-invite { display: flex; gap: 6px; margin: 0; }
#ui-root .pw-invite input.pw-name, .pw-invite input.pw-name { flex: 1 1 auto; min-width: 0; }
.pw-invite .btn { min-width: 76px; }
.pw-hint { min-height: 18px; font-size: 12px; line-height: 1.5; color: var(--c-muted, #a8977a); }
.pw-hint.bad { color: var(--c-bad, #ff6b5b); }
.pw-hint.ok { color: var(--c-good, #7ddc6a); }
.pw-hint.info { color: #d9b86a; }
.pw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(232, 196, 106, 0.14);
}
.pw-note { font-size: 11.5px; line-height: 1.45; color: var(--c-muted, #a8977a); }
.pw-leave { flex: none; }

/* tooltip helpers */
.pf-tip-lead {
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: #2a1608;
  background: linear-gradient(180deg, #fff0b8, #e8c46a 55%, #b08a3a);
  border-radius: 8px;
  vertical-align: 2px;
}
.pf-tip-map { color: #ffb86b; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .social-hud { width: 216px; }
  .pf-invite { width: 252px; }
}
@media (max-height: 620px) {
  .pf-member { height: 42px; }
  .pf-badge { width: 32px; height: 32px; }
  .pf-badge svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-invite, .pf-member.pf-enter { animation: none; }
}