/* ===================================================== profile frames ===
   Blown-glass HUD frames (js/frames.js). Each frame stacks:
     halo  — coloured light behind the frame
     rim   — the dark outer casing, with a drop shadow that lifts it off the page
     tube  — the glass (or brushed metal) ring: bright top lip, tinted body, shaded underside
     face  — the recessed well holding the avatar, sunk with inset shadow
     sheen — a pane of glass over the face (face::after)
     gloss — specular highlights across the top of the tube
     deco  — the theme's ornaments (SVG), overhanging the edge
   Everything scales from --s. */

@property --pfa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.pfp {
  --s: 40px; --f: #c49bff; --f2: #6a3fd6; --t: calc(var(--s) * .13);
  position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s);
  vertical-align: middle; isolation: isolate; font-family: var(--num); font-weight: 800; color: #fff;
}
.pfp > span { position: absolute; border-radius: 30%; }

.pf-halo {
  inset: -14%; z-index: -1; border-radius: 38%; opacity: .7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--f2) 70%, transparent), color-mix(in srgb, var(--f) 25%, transparent) 60%, transparent);
}
.pf-rim {
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--f) 35%, #1a0b30), #07020f 58%, color-mix(in srgb, var(--f2) 45%, #000));
  box-shadow:
    0 calc(var(--s) * .06) calc(var(--s) * .14) rgba(0, 0, 0, .6),
    0 0 0 calc(var(--s) * .012) rgba(255, 255, 255, .14),
    inset 0 calc(var(--s) * .02) calc(var(--s) * .03) rgba(255, 255, 255, .18);
}
.pf-tube {
  inset: calc(var(--t) * .14); border-radius: 29%; opacity: .9;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .25) 9%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, var(--f) 0%, color-mix(in srgb, var(--f) 50%, var(--f2)) 46%, var(--f2) 80%, color-mix(in srgb, var(--f2) 55%, #fff) 100%);
  box-shadow:
    inset 0 calc(var(--s) * .012) calc(var(--s) * .012) rgba(255, 255, 255, .95),
    inset 0 calc(var(--s) * -.045) calc(var(--s) * .07) rgba(0, 0, 0, .5),
    inset 0 0 calc(var(--s) * .06) color-mix(in srgb, var(--f) 80%, transparent),
    0 0 calc(var(--s) * .12) color-mix(in srgb, var(--f) 45%, transparent);
}
.metal .pf-tube {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 30%),
    conic-gradient(from 200deg, var(--f), var(--f2) 14%, var(--f) 28%, var(--f2) 46%, var(--f) 62%, var(--f2) 80%, var(--f));
}
.pf-face {
  inset: var(--t); border-radius: 24%; overflow: hidden; display: grid; place-items: center;
  font-size: calc(var(--s) * .36);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--f2) 40%, #2a1550), #0a031a 86%);
  box-shadow:
    0 0 0 calc(var(--s) * .02) rgba(0, 0, 0, .7),
    0 0 0 calc(var(--s) * .036) color-mix(in srgb, var(--f) 55%, transparent);
}
.pf-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .07) 30%, transparent 46%);
  box-shadow:
    inset 0 calc(var(--s) * .05) calc(var(--s) * .09) rgba(0, 0, 0, .65),
    inset 0 calc(var(--s) * -.02) calc(var(--s) * .04) rgba(255, 255, 255, .14);
}
.pf-face .emo { font-size: calc(var(--s) * .48); line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.pfp .av-clip img { transform: scale(1.7); transform-origin: 50% 22%; }
.pfp .av-clip img.badge, .ls-av .av-clip img.badge { transform: none; object-fit: cover; }
.pfp .av-clip img.sats { object-position: 50% 0; transform: scale(2.3); transform-origin: 50% 22%; }
.pf-gloss {
  inset: calc(var(--t) * .2); border-radius: 29%; pointer-events: none; overflow: hidden; z-index: 1; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 58% 22% at 34% 7%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 88% 90%, rgba(255, 255, 255, .4), transparent 11%);
}
.pf-deco {
  position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; overflow: visible; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 calc(var(--s) * .015) calc(var(--s) * .02) rgba(0, 0, 0, .6));
}

/* themes */
.fr-neon .pf-halo { opacity: 1; }
.fr-neon .pf-glow { filter: drop-shadow(0 0 1.5px #2fd4ff) drop-shadow(0 0 3px #ff6ee7); }
.fr-void .pf-face { background: radial-gradient(circle at 50% 50%, #000 0%, #12031f 60%, #3a0d52 100%); }
.fr-frost .pf-face { background: radial-gradient(circle at 50% 28%, #2a5a86, #07142a 86%); }
.fr-flame .pf-halo { background: radial-gradient(closest-side, rgba(255, 120, 30, .8), rgba(255, 60, 20, .25) 60%, transparent); }

/* rarity: the rarest frames glow harder */
.rar-legendary .pf-halo, .rar-mythic .pf-halo, .big .pf-halo { opacity: .95; }

/* motion */
.anim-sweep .pf-gloss::after {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .7) 50%, transparent 58%);
  transform: translateX(-130%); animation: pfSweep 5s ease-in-out infinite;
}
@keyframes pfSweep { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.anim-spin .pf-tube {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 26%),
    conic-gradient(from var(--pfa), var(--f), var(--f2) 30%, var(--f) 50%, var(--f2) 80%, var(--f));
  animation: pfSpin 7s linear infinite;
}
@keyframes pfSpin { to { --pfa: 360deg; } }
.anim-pulse .pf-halo { animation: pfPulse 2.6s ease-in-out infinite; }
@keyframes pfPulse { 50% { opacity: 1; transform: scale(1.07); } }
.pf-flicker { transform-box: fill-box; transform-origin: 50% 100%; animation: pfFlicker 1.7s ease-in-out infinite; }
@keyframes pfFlicker { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(1.07) skewX(-2deg); } 65% { transform: scaleY(.94) skewX(2deg); } }
.pf-orbit { transform-origin: 50px 50px; animation: pfOrbit 16s linear infinite; }
@keyframes pfOrbit { to { transform: rotate(360deg); } }

.pfp.empty {
  display: inline-grid; place-items: center; border-radius: 30%; color: var(--muted);
  background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .25);
}

@media (prefers-reduced-motion: reduce) {
  .pfp *, .pfp *::after { animation: none !important; }
}

/* ========================================================= collection === */
.look-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coll-count { font-family: var(--num); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.coll-count b { color: var(--lux, #e8c06a); font-size: 15px; }
.look .name-row { display: grid; gap: 4px; max-width: 260px; font-size: 13px; color: var(--muted); margin: 6px 0 12px; }
.coll-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--panel-border); margin-bottom: 12px; }
.coll-tabs button {
  border: 0; cursor: pointer; padding: 7px 14px; border-radius: 9px; font: inherit; font-weight: 700; color: var(--muted); background: transparent;
}
.coll-tabs button small { font-family: var(--num); margin-left: 4px; opacity: .8; }
.coll-tabs button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.coll-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px;
  max-height: 340px; overflow-y: auto; padding: 10px 6px 6px; margin: 0 -6px;
}
.coll-item {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; cursor: pointer; border-radius: 16px; padding: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 70%);
  border: 1px solid rgba(255, 255, 255, .07); transition: transform .14s, border-color .14s, background .14s;
}
.coll-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--r, #fff) 40%, transparent); }
.coll-item.focus { border-color: rgba(255, 255, 255, .35); }
.coll-item.on { border-color: var(--lux, #e8c06a); background: radial-gradient(circle at 50% 40%, rgba(232, 192, 106, .22), rgba(232, 192, 106, .03) 72%); box-shadow: 0 0 0 1px var(--lux, #e8c06a), 0 0 18px rgba(232, 192, 106, .25); }
.coll-item.locked .pfp { filter: grayscale(.7) brightness(.72); opacity: .9; }
.coll-item .lock { position: absolute; top: 5px; right: 5px; font-style: normal; font-size: 11px; line-height: 1; padding: 3px 4px; border-radius: 7px; background: rgba(10, 4, 24, .88); border: 1px solid rgba(255, 255, 255, .12); z-index: 3; }
.coll-item .new {
  position: absolute; top: -6px; right: -4px; z-index: 3; font-style: normal; font-family: var(--num); font-weight: 800; font-size: 10.5px;
  letter-spacing: 1px; padding: 2px 6px; border-radius: 6px; color: #12062a; background: linear-gradient(180deg, #fff3b0, #ffb340);
}
.coll-item .pip { position: absolute; bottom: 5px; width: 18px; height: 3px; border-radius: 3px; background: var(--r); box-shadow: 0 0 6px var(--r); }
.coll-detail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid var(--panel-border); min-height: 54px; }
.coll-detail:empty { display: none; }
.coll-detail .rar { font-family: var(--num); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--r); }
.coll-detail b { font-size: 17px; }
.coll-detail .state { font-size: 13px; color: var(--muted); margin-left: auto; }
.coll-detail .earn { flex-basis: 100%; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.coll-detail .earn li { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: center; gap: 10px; font-size: 13.5px; }
.coll-detail .earn li b { font-family: var(--num); font-size: 13px; font-variant-numeric: tabular-nums; }
.coll-detail .bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.coll-detail .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff4fd8, #ffd23f); }
@media (max-width: 520px) {
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
  .coll-detail .earn li { grid-template-columns: minmax(0, 1fr) 70px auto; }
}

/* a new unlock slides in */
.unlock-pop {
  position: fixed; top: calc(16px + var(--safe-t, 0px)); right: 16px; z-index: 100000; display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px; border-radius: 18px; max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, rgba(40, 18, 72, .96), rgba(14, 6, 30, .96));
  border: 1px solid color-mix(in srgb, var(--r) 70%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 30px color-mix(in srgb, var(--r) 35%, transparent);
  animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.unlock-pop.out { animation: popOut .4s ease-in both; }
.unlock-pop .lbl { display: block; font-family: var(--num); font-weight: 700; font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.unlock-pop b { display: block; font-size: 17px; }
.unlock-pop .rar { font-family: var(--num); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--r); }
@keyframes popIn { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes popOut { to { opacity: 0; transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .unlock-pop, .unlock-pop.out { animation: none; } }
.pf-deco.back { z-index: -1; }

/* =================================================== frames at the table ===
   Seat plaques, the lobby, the "thinking" box and the turn banner: when the box holds a framed
   avatar, the glass frame replaces the box's own square border. Sizes follow each box. */
.seat .av:has(> .pfp), .ls-av:has(> .pfp), .think-av:has(> .pfp), .banner .ban-av:has(> .pfp) {
  border: 0; background: none; box-shadow: none; overflow: visible !important; border-radius: 0;
}
.seat .av > .pfp { --s: 42px !important; }
.seats.compact .seat .av > .pfp { --s: 34px !important; }
.ls-av > .pfp { --s: 46px !important; }
.think-av > .pfp { --s: 54px !important; }
.banner .ban-av > .pfp { --s: 64px !important; }
.seat .av > .pfp .av-clip img, .think-av > .pfp .av-clip img, .banner .ban-av > .pfp .av-clip img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
/* the active player's frame breathes with the turn */
.seat.active .av > .pfp .pf-halo { opacity: 1; animation: pfPulse 2.2s ease-in-out infinite; }
@media (max-width: 640px) { .seat .av > .pfp { --s: 36px !important; } .seats.compact .seat .av > .pfp { --s: 34px !important; } }