/* The player bar (js/ui/avatarbar.js): a round picture of everyone in the party along the bottom
   of the screen with a short name under it, and nothing else. You: a gold ring. A squadmate playing
   right now: a ring in their colour (--pc) and a green dot. A ghost or a helper wisp: faded, grey and
   a little smaller. The lines to the characters (.av-links) only show while a card is touched. */
.av-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#hud > .av-bar { position: absolute; left: 50%; bottom: calc(6px + var(--safe-b) + var(--lift, 0px)); transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.av-bar[hidden] { display: none; }

.av-bar .av-card { --pc: #ffd25a; --d: var(--s, 48px); position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--s, 48px) * 1.3); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: transform .14s ease-out; }
.av-bar .av-frame { position: relative; width: var(--d); height: var(--d); border-radius: 50%; box-shadow: 0 0 0 2px var(--pc), 0 0 0 4px rgba(0, 0, 0, .55); transition: box-shadow .14s; }
.av-bar .av-pic { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 30%, #6a5a48, #1e160e 72%); }
.av-bar .av-pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: filter .14s, opacity .14s; }
.av-bar .av-name { max-width: calc(100% + 8px); margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: clamp(10px, calc(var(--s, 48px) * .27), 13px); line-height: 1.2; color: #fff; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 0 1px 3px #000; }
/* you */
.av-bar .av-card.me .av-frame { box-shadow: 0 0 0 3px #ffd25a, 0 0 0 5px rgba(0, 0, 0, .6), 0 0 10px 2px rgba(255, 210, 90, .55); }
.av-bar .av-card.me .av-name { color: #ffe27a; }
/* playing right now: their colour, a glow and the green dot */
.av-bar .av-card.live .av-frame { box-shadow: 0 0 0 3px var(--pc), 0 0 0 5px rgba(0, 0, 0, .6), 0 0 12px 3px var(--pc); }
.av-dot { position: absolute; right: -3px; top: -3px; z-index: 1; width: max(10px, calc(var(--d, 48px) * .3)); height: max(10px, calc(var(--d, 48px) * .3)); border-radius: 50%; background: #5ee36b; box-shadow: 0 0 0 2px #000, 0 0 8px 2px rgba(94, 227, 107, .9); animation: liveDot 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes liveDot { 50% { box-shadow: 0 0 0 2px #000, 0 0 3px 0 rgba(94, 227, 107, .5); } }
/* a ghost or a helper wisp: faded, grey, smaller */
.av-bar .av-card.ghostmate, .av-bar .av-card.wisp { --d: calc(var(--s, 48px) * .76); }
.av-bar .av-card.ghostmate .av-frame, .av-bar .av-card.wisp .av-frame { box-shadow: 0 0 0 2px rgba(190, 205, 225, .35), 0 0 0 4px rgba(0, 0, 0, .35); }
.av-bar .av-card.ghostmate .av-pic { background: radial-gradient(circle at 50% 30%, #4a5262, #181c24 72%); }
.av-bar .av-card.ghostmate .av-pic img { filter: grayscale(.9) brightness(1.05); opacity: .5; }
.av-bar .av-card.wisp .av-pic { background: radial-gradient(circle at 50% 40%, rgba(159, 240, 255, .4), rgba(16, 40, 50, .55) 75%); }
.av-bar .av-card.wisp .av-fb { background: none; opacity: .6; }
.av-bar .av-card.ghostmate .av-name, .av-bar .av-card.wisp .av-name { font-size: clamp(9px, calc(var(--s, 48px) * .22), 11px); color: #c8d2de; opacity: .6; }
/* a stand-in picture (no WebGL): the hero's icon and an initial */
.av-fb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #fff8, transparent 70%); }
.av-fb span { font-size: calc(var(--d, 48px) * .5); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.av-fb b { position: absolute; right: 12%; bottom: 4%; font-size: calc(var(--d, 48px) * .26); color: #fff; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; }
.av-bar .av-gift { left: auto; right: -12px; top: -8px; }
.av-more { align-self: center; margin-bottom: 14px; padding: 3px 8px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--th-text); background: var(--th-card); box-shadow: 0 0 0 2px var(--th-ring), 0 0 0 4px var(--ink); }

/* lit: a finger is on the card (its line to the character shows too) */
.av-bar .av-card.on { transform: translateY(-4px) scale(1.08); }
.av-bar .av-card.on .av-frame { box-shadow: 0 0 0 3px var(--pc), 0 0 0 5px rgba(0, 0, 0, .6), 0 0 16px 5px var(--pc); }
.av-bar .av-card.on .av-pic img { filter: brightness(1.12); opacity: 1; }
.av-bar .av-card.on .av-name { opacity: 1; }
.tag.av-lit .nm { filter: brightness(1.25) drop-shadow(0 0 6px var(--c, #ffd25a)); }
.reduce-motion .av-bar .av-card { transition: none; }
.reduce-motion .av-dot { animation: none; }

/* My Hero → Face */
.face-note { margin: 4px 0 2px; font-size: 16px; line-height: 1.4; text-align: center; }
.face-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 16px; padding: 18px 4px 10px; }
.face-grid .av-card { --pc: #ffd25a; --s: 92px; --d: 92px; position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--s) * 1.12); padding: 0; border: none; background: none; font: inherit; cursor: pointer; }
.face-grid .av-frame { position: relative; width: 100%; aspect-ratio: 1.12; padding: 4px; border-radius: 11px; background: linear-gradient(var(--th-panel-hi), var(--th-panel-lo)); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px var(--th-frame-dk), 0 5px 0 2px rgba(0, 0, 0, .35); transition: box-shadow .14s; }
.face-grid .av-pic { position: relative; width: 100%; height: 100%; border-radius: 7px; overflow: hidden; background: #3a2c1c; box-shadow: 0 0 0 3px var(--pc); }
.face-grid .av-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; pointer-events: none; }
.face-grid .av-fb > i { font-style: normal; font-size: 44px; }
.face-grid .av-name { margin-top: 4px; font-weight: 700; font-size: 14px; color: #fff; text-shadow: -2px 0 #000, 2px 0 #000, 0 -2px #000, 0 2px #000; }
.face-grid .av-card:hover .av-frame { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px var(--th-frame-dk), 0 5px 0 2px rgba(0, 0, 0, .35), 0 0 14px 3px var(--th-glow); }
.face-grid .av-card.picked .av-frame { box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--th-title), 0 0 18px 6px var(--th-glow); }
.face-grid .av-card.picked::after { content: '✔'; position: absolute; top: -10px; right: -8px; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 26px; text-align: center; color: #12300f; background: #5ee36b; box-shadow: 0 0 0 2px var(--ink); }

/* ---------- squadmates everywhere: who is playing right now and who is a ghost ----------
   The same marks as the bar, on the squad screens, the team picker, toasts and name tags: playing
   now = bright, in their colour, with the green dot; a ghost = grey, faded, smaller. Pictures are
   each friend's own hero (ui/heroshot.js facePic: <img class="hf">). */
.fc > img.hf { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; pointer-events: none; }
.fc .fc-dot { position: absolute; right: -6px; top: -6px; z-index: 1; width: 13px; height: 13px; border-radius: 50%; background: #5ee36b; box-shadow: 0 0 0 2px #000, 0 0 8px 2px rgba(94, 227, 107, .9); }
.fc.ghost { --pc: #7d8796 !important; transform: scale(.88); }
.fc.ghost > img.hf, .fc.ghost > i { filter: grayscale(.9); opacity: .5; }
.fc.ghost .lv { opacity: .7; }
/* asleep (game/squad.js isAsleep): greyed like the icon was */
.seat.asleep .fc > img.hf, .jq-f.asleep .fc > img.hf, .tp-p.asleep .fc > img.hf, .wr-s.asleep .fc > img.hf, .sleep-card .fc > img.hf { filter: grayscale(.85) brightness(.8); }
/* the camp's squad card: its seats */
.sc-seats i.m { overflow: visible; }
.sc-seats i.m > img.hf { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sc-seats i.m:not(.on):not(.zz) { --pc: #7d8796 !important; }
.sc-seats i.m:not(.on):not(.zz) > img.hf { filter: grayscale(.85); opacity: .55; }
/* the Ghost Report's "who played" badges */
.newbadge > img.hf { width: 22px; height: 22px; margin: -3px 2px -3px -4px; border-radius: 50%; vertical-align: middle; background: #2a2018; }
/* a toast's picture of a squadmate */
.mate-ic { position: relative; display: inline-block; width: 34px; height: 34px; vertical-align: middle; border-radius: 50%; background: #2a2a32; box-shadow: 0 0 0 2px rgba(190, 205, 225, .4); }
.mate-ic > img.hf { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(.9); opacity: .55; }
.mate-ic > i:not(.av-dot) { font-style: normal; font-size: 22px; line-height: 34px; }
.mate-ic.live { background: #2a3a2a; box-shadow: 0 0 0 2px #5ee36b, 0 0 10px 2px rgba(94, 227, 107, .6); }
.mate-ic.live > img.hf { filter: none; opacity: 1; }
.mate-ic .av-dot { --d: 34px; right: -4px; top: -4px; width: 11px; height: 11px; }
/* name tags over squadmates (game/run.js markMate): one playing now gets a bold pill in their
   colour with the green dot; a ghost's (or a helper wisp's) is small and faint. (Your own YOU tag
   stays the boldest.) */
.tag.m-live:not(.dot) .nm { padding: 1px 8px 1px 5px; border-radius: 999px; font-size: 15px; color: #fff; background: rgba(10, 18, 10, .78); box-shadow: 0 0 0 2px var(--c, #5ee36b), 0 0 10px 2px var(--c, #5ee36b); text-shadow: 0 1px 0 #000; }
.tag.m-live .nm .on-ic { width: 10px; height: 10px; }
.tag.m-faint:not(.dot) .nm { gap: 3px; font-size: 11px; color: #c8d4e2; opacity: .6; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
.tag.m-faint .nm .lv { font-size: 8px; opacity: .8; }
.tag.m-faint .nm .gp-ic { font-size: .9em; animation: none; }
.tag.you { z-index: 1; } /* (your YOU stays on top when a friend's tag comes close) */
@media (max-height: 500px) { .tag.m-live:not(.dot) .nm { padding: 0 6px 0 4px; font-size: 13px; } }