/* ============================================================
   Friends screen + the Challenge dialog — "Forged Lantern". Loaded after
   ui-pvp.css: it reuses .pveHead / .pveTabs / .pveTab (tab row), .fld, .oGrid /
   .oCard / .oChips (the friend cards share the PVP opponent-card look) and the
   shared team faces (.teamFaces / .tf, ui/team-bar.js's drawTeamBar).
   Cursors: never a bare value (CLAUDE.md §4). No backdrop-filter on anything
   that scrolls (CLAUDE.md §7); only the dialog overlay blurs (ui-battle.css).
   See docs/subsystems/friends-ui.md.
   ============================================================ */

/* ---------- tab row: count + "needs your answer" dot ---------- */
.frHead{ margin-bottom: 4px; }
.pveTab .tabCount{
  margin-left: 8px; padding: 2px 7px; border-radius: 999px; font: 700 .72rem var(--f-body); font-style: normal;
  background: hsl(var(--h) 25% 96% / .12); color: var(--c-text);
}
.pveTab.on .tabCount{ background: hsl(var(--h) 30% 10% / .25); color: inherit; }
.pveTab .tabDot{ display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent-hi); vertical-align: middle; }
.pveTab .tabCount.hidden, .pveTab .tabDot.hidden{ display: none; }

/* ---------- Friends tab: search block ---------- */
.frSearch{
  margin: 18px 0 22px; padding: 16px; border-radius: 24px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82);
}
.frSearchHead{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.frSearchHead > label{ font: 600 .72rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); }
.myTag{ display: inline-flex; align-items: center; gap: 8px; color: var(--c-dim); font: 500 .85rem var(--f-body); }
.myTag b{ color: var(--accent-hi); font: 700 1rem var(--f-display); }
.frSearchRow{ display: flex; gap: 10px; }
.frInput{
  flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--c-line);
  background: hsl(var(--h) 16% 6% / .8); color: var(--c-text); font: 500 1rem var(--f-body);
}
.frInput:focus{ outline: none; border-color: var(--accent-hi); }
.frSearchRow button{ flex: none; width: auto; min-height: 48px; padding: 0 24px; margin: 0; }
#friendSearchResults:not(:empty){ margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
#friendSearchResults .hint{ margin: 0; }

/* ---------- faces ---------- */
.frFace{
  flex: none; width: calc(52px / var(--ui-zoom, 1)); height: calc(52px / var(--ui-zoom, 1)); border-radius: 50%; overflow: hidden; border: 1px solid var(--c-line);
  background: hsl(var(--h) 20% 14%); display: block;
}
.frFace .heroPortrait, .frFace .heroArtFallback{
  width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; object-position: 50% 20%;
  display: flex; align-items: center; justify-content: center;
}
.frFace:empty{ background: hsl(var(--h) 20% 12%); }

/* ---------- friend cards (3 chips always on one line; the card never goes below 310px) ---------- */
.frGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(310px / var(--ui-zoom, 1)), 1fr)); gap: 16px; }
.frCard header{ position: relative; }
.frCard header > div{ flex: 1; min-width: 0; }
.frCard header b{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frCard .oChips{ flex-wrap: nowrap; gap: 6px; }
.frCard .oChips .chip{ flex: 0 0 auto; height: 26px; padding: 0 10px; font-size: .78rem; white-space: nowrap; }
.frCard .friendRemoveBtn{ position: absolute; right: -6px; top: -6px; width: 44px; min-height: 44px; margin: 0; }
.frCard .frChallenge, .frCard .friendChallengeBtn{ width: 100%; min-height: 48px; margin-top: auto; }
.iconBtn{
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%;
  border: 1px solid transparent; background: transparent; box-shadow: none; color: var(--c-dim); font: 600 1.2rem var(--f-body);
  cursor: var(--cur-click, pointer); transition: background var(--t-fast), color var(--t-fast);
}
.iconBtn:hover{ background: hsl(var(--h) 25% 96% / .08); color: var(--c-text); }

/* ---------- rows: search hits, requests, challenges, matches ---------- */
.frBlock{ margin-top: 20px; }
.frBlock:first-child{ margin-top: 6px; }
.frBlock h3{ font: 700 .8rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-dim); margin: 0 0 10px; }
.frRow{
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--c-line);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82); margin-bottom: 10px;
}
.frWho{ min-width: 0; flex: 1; }
.frWho b{ display: block; font: 700 1.05rem var(--f-display); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frWho b em{ font: 500 .8rem var(--f-body); font-style: normal; color: var(--c-dim); margin-left: 6px; }
.frWho small{ display: block; color: var(--c-dim); font: 500 .82rem var(--f-body); margin-top: 2px; }
.frAct{ display: flex; gap: 8px; flex: none; align-items: center; }
.frAct button{ min-height: 44px; }
.frAct .hint{ border: 0; padding: 2px 8px; margin: 0; }
.frTeam{ flex: 0 0 200px; }
.frTeam .dd{ width: 100%; }
.frEmpty{ display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 16px; color: var(--c-dim); }
.frEmpty.hidden{ display: none; }
.frEmpty b{ font: 700 1.15rem var(--f-display); color: var(--c-text); }
.frEmpty p{ margin: 0; }
#friendIncomingRequests:empty, #friendOutgoingRequests:empty, #challengeIncomingList:empty, #challengeOutgoingList:empty{ display: none; }

/* ---------- Challenge dialog ---------- */
.modal.fModal.frModal{ width: min(calc(560px / var(--ui-zoom, 1)), 100%); max-width: none; overflow-x: hidden; gap: 16px; text-align: left; }
.modal.fModal.frModal h2{ font-size: 1.5rem; color: var(--accent-hi); }
.frModal .fld label{ text-align: left; }
.frModal .teamBar{ display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.frModal .teamBar .dd{ width: 100%; }
.frModal .teamFaces{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; flex: none; justify-content: stretch; }
.frModal .tf{ width: auto; min-width: 0; align-items: center; gap: 4px; }
.frModal .tfFace{ width: min(64px, 100%); height: auto; aspect-ratio: 1; }
.frModal .tfName{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%; font: 700 .72rem/1.2 var(--f-display); font-style: normal; text-align: center; overflow-wrap: break-word; }
.frModal .tfLvl{ display: block; font: 600 .68rem var(--f-body); font-style: normal; color: var(--c-dim); }
.frTwo{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.frStepper{ display: flex; align-items: center; justify-content: space-between; height: 44px; border-radius: 14px; border: 1px solid var(--c-line); background: hsl(var(--h) 16% 6% / .8); }
.frStepper input[type="number"]{
  flex: 1; min-width: 0; width: auto; min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; text-align: center;
  color: var(--c-text); font: 700 1.1rem var(--f-display); -moz-appearance: textfield; appearance: textfield;
}
.frStepper input[type="number"]::-webkit-inner-spin-button, .frStepper input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.frStepBtn{ width: 44px; height: 42px; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--c-text); font: 600 1.2rem var(--f-body); cursor: var(--cur-click, pointer); }
.frStepBtn:hover{ background: hsl(var(--h) 25% 96% / .08); }
.frModeTabs{ display: flex; width: 100%; margin: 0; }
.frModeTabs .pveTab{ position: relative; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; letter-spacing: 0; text-transform: none; font: 600 .95rem var(--f-body); }
.frModeTabs .pveTab input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: var(--cur-click, pointer); }
.frModeTabs .pveTab:has(input:checked){ background: hsl(var(--h) 30% 92% / .1); color: var(--accent-hi); box-shadow: inset 0 0 0 1px hsl(var(--h) 40% 70% / .3); }
.frModeTabs .pveTab:has(input:focus-visible){ outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.frModalBtns{ display: flex; gap: 10px; justify-content: flex-end; }
.frModalBtns button{ min-height: 48px; min-width: 110px; }
#challengeSettingsMsg:empty{ display: none; }

/* ---------- tablet portrait: 2 friends per row; phone: 1 ---------- */
@media (max-width: 900px){
  .frGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .frGrid{ grid-template-columns: 1fr; }
  .frRow{ flex-wrap: wrap; }
  .frAct{ width: 100%; }
  .frAct button{ flex: 1; }
  .frTeam{ flex: 1 1 100%; }
  .frSearchRow{ flex-direction: column; }
  .frTwo{ grid-template-columns: 1fr; }
  .frModalBtns button{ flex: 1; }
  .frHead .pveTabs{ width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .frHead .pveTab{ position: relative; padding: 0 4px; font-size: .82rem; justify-content: center; min-width: 0; }
  .frHead .pveTab .tabCount{ display: none; }
  .frHead .pveTab .tabDot{ position: absolute; left: 50%; bottom: 4px; margin: 0; transform: translateX(-50%); }
}
@media (max-width: 480px){
  .frModal .tfName{ display: none; }
}