/* Profile cosmetics, core (docs/COSMETICS.md): the avatar frame overlay used on every
   page by player_avatar() (app/helpers.php) and its JS twin in app.js. Loads after
   bridge.css. Page parts live in their own files (cosmetics-profile.css).

   Contract: <span class="gf-ava"> <inner avatar, sized by its own class> <img class="gf-frame"> </span>
   The frame file is 1.43x the avatar and centred on it, so it is drawn by the wrapper,
   never inside the avatar (.has-img clips). The wrapper takes the avatar's size: a
   context that gave the avatar a margin moves that margin to .gf-ava. */
.gf-ava{position:relative;display:inline-flex;flex:0 0 auto;vertical-align:middle;isolation:isolate}
/* Frames are rings: the avatar inside a frame is always round. */
.gf-ava > :first-child{border-radius:50% !important}
.gf-frame{position:absolute;left:50%;top:50%;width:143%;height:143%;max-width:none;max-height:none;
  transform:translate(-50%,-50%);pointer-events:none;z-index:1;display:block}
.gf-ava picture{display:contents}

/* Tiny (28px and below) without an image: a calm ring in the frame's colour, with a
   transparent gap so it works on any background. */
.gf-ava.is-ring::after{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:1;pointer-events:none;
  background:var(--gf-ring,#9a9ca2);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2.1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2.2px),#000 calc(100% - 2.1px))}
.gf-ava.ring-holo::after{background:conic-gradient(#6FE7FF,#A2F6CF,#FFE27A,#B9A8FF,#6FE7FF)}
.gf-ava.ring-excl::after{inset:-4px;-webkit-mask:none;mask:none;
  background:radial-gradient(farthest-side,transparent calc(100% - 4.1px),#F0BC3C calc(100% - 4px),#F0BC3C calc(100% - 2.6px),
    transparent calc(100% - 2.5px),transparent calc(100% - 1.3px),#F0BC3C calc(100% - 1.2px))}

/* ---- Frames everywhere: per-surface rules ------------------------------------------
   docs/COSMETICS.md, "Where the frame shows". A frame hangs about a fifth of the avatar
   size over every edge (1.43x), so wherever a name or a label sits close to an avatar the
   framed case gets room here. Mini avatars and .gf-who only render once Cosmetics::ready();
   before the migration nothing below matches. */

/* Mini avatar in front of a name: 20 to 24px, always the tiny still. */
.gf-mini{--s:22px;width:var(--s);height:var(--s);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;font-family:var(--g-cond);font-weight:700;font-size:calc(var(--s) * .5);line-height:1;letter-spacing:0}
.gf-mini.s20{--s:20px}
.gf-mini.s24{--s:24px}
/* A name with its mini avatar. The avatar keeps 4px on both sides for a frame's edge, framed
   or not, so names in a list line up. */
.gf-who{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;vertical-align:middle}
.gf-who > .gf-ava,.gf-who > .gf-mini{margin:0 4px}
.gf-who > .gf-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phones: the avatar takes no more from the name than its frame needs (a 22px frame hangs
   about 5px over each side, partly into the gap). */
@media (max-width:640px){
  .gf-who{gap:5px}
  .gf-who > .gf-ava,.gf-who > .gf-mini{margin:0 2px}
}

/* A brand host (Giveaway::publicHostAvatar): the Gotya mark on black, never cropped. */
.gf-brand.has-img{background:#0A0A0A !important}
.gf-brand.has-img img{object-fit:contain;padding:17%;box-sizing:border-box}

/* Top bar (layouts/_usermenu.php): a framed account avatar (36px, animated) is round and sits
   in a plain button, with room for the frame next to the wallet pill. */
.usermenu-ava{display:inline-flex;padding:0;margin:0 0 0 6px;border:0;border-radius:50%;background:none;color:inherit;font:inherit;cursor:pointer}
.usermenu-ava:focus-visible{outline:2px solid var(--g-gold);outline-offset:9px}
.usermenu-ava .avatar{display:flex;align-items:center;justify-content:center}
.usermenu-drop .um-customize{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;color:var(--g-gold)}
.um-new{font-family:var(--g-cond);font-weight:700;font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;line-height:1.1;
  padding:3px 8px;border-radius:99px;background:linear-gradient(180deg,#FFE27A,#F6B81F);color:#161206}

/* Monthly leaderboard (rewards/leaderboard.php): podium animated, rows still (the own row
   animates). CHAMPION sits on top of a plain avatar; on a framed one it moves under the
   frame, clear of crowns, gems and bolts, and the names make room for the frame. */
.pod > .gf-ava + .pod-crown{position:relative;top:auto;left:auto;transform:none;margin-top:20px;z-index:2}
.pod > .gf-ava ~ .pod-name{margin-top:26px}
.pod > .gf-ava + .pod-crown + .pod-name{margin-top:8px}
@media (max-width:560px){
  .pod > .gf-ava + .pod-crown{margin-top:16px}
  .pod > .gf-ava ~ .pod-name{margin-top:21px}
  .pod > .gf-ava + .pod-crown + .pod-name{margin-top:8px}
}

/* Settings (settings/index.php): the 72px picture, animated. A frame reaches 15px past it on
   every side: room so it clears the line above and the left edge of the card. */
.st-avatar > .gf-ava{margin:6px 0 0 14px}

/* Giveaway cards (giveaways/index.php): host 34px (42px on phones), animated. A host who
   wears a frame (.gf-host) gets room for it; a host without one looks exactly as before. */
.gw2-host.gf-host{gap:15px}
.gw2-host > .gf-ava{margin:3px 0}

/* Card page "Owned by" (collection/asset.php): 24px, the tiny still. */
.ob-link > .gf-ava{margin:0 3px}

/* Marketplace lot (market/show.php and the app.js auction poll): on a phone a long bidder
   name truncates, and the bid table scrolls inside the panel (app.css makes it a scroll box
   under 720px) instead of widening the page past the screen. */
@media (max-width:820px){
  .fc-detail > .fc-panel:has(.gf-who){min-width:0}
  .fc-section .table .gf-who{max-width:130px}
}

/* Home Biggest Hits (home/index.php and the app.js drip): the link stops clipping, because
   the frame hangs over its edge; the name keeps its own ellipsis. */
.bh-who.gf-who{overflow:visible}

/* Giveaway page live feed (giveaways/show.php): the list is a grid, so one long name widened
   every row and pushed the times out of view. With mini avatars the action wraps first and
   only a very long name truncates. */
.gwa-list:has(.gf-who){grid-template-columns:minmax(0,1fr)}
.gwa-row > .gf-who{min-width:0;max-width:60%;flex:0 1 auto}
.gwa-row:has(> .gf-who) > .what{flex:1 4 auto}
/* A phone has no room for a name and the action side by side: the name and the time on top,
   the action under the name (icon 24 + gap 11 + avatar 2 + 22 + 2 + gap 5). */
@media (max-width:640px){
  .gwa-row:has(> .gf-who){flex-wrap:wrap;row-gap:1px}
  .gwa-row > .gf-who{max-width:none}
  .gwa-row:has(> .gf-who) > .what{order:1;flex:1 0 100%;padding-left:66px;font-size:.84rem}
}

/* Giveaway results (giveaways/_ended.php): the podium winners get 92px (top prize) and 76px
   avatars between the card and the name, animated. The page's own img rules size the slabs
   (.pz, .wrow, .rc img), so avatars and frames inside those cards are reset here. */
.ended-page .pz-ava{display:flex;justify-content:center;margin:22px 0 20px}
.ended-page .pz.top .pz-ava{margin:26px 0 24px}
.ended-page .pz-avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--g-cond);font-weight:700;font-size:32px;line-height:1}
.ended-page .pz.top .pz-avatar{width:92px;height:92px;font-size:38px}
/* The winners list stacks short lines: room above the mini avatar for its frame. */
.ended-page .wrow .w:has(> .gf-who){margin-top:5px}
/* On a phone the other winners stack in one column with avatars on: two columns left a name
   six letters. */
@media (max-width:520px){
  .ended-page .wlist:has(.gf-who){grid-template-columns:minmax(0,1fr)}
  .ended-page .wlist:has(.gf-who) .wrow .n{max-width:none}
}
.ended-page .gf-ava img.gf-frame,
.ended-page :is(.pz,.wrow,.rc) .gf-ava img.gf-frame{width:143%;height:143%;max-width:none;margin:0;filter:none;object-fit:fill}
.ended-page :is(.pz,.wrow,.rc) span.has-img img{width:100%;height:100%;margin:0;object-fit:cover;filter:none}