/* หิวดึก — profile frames by level (public/js/frames.js). --fb = avatar box, --ff = frame image box, --fa = avatar circle inside the hole. */
.pframe { position: relative; display: inline-block; flex: 0 0 auto; width: var(--fb, 40px); height: var(--fb, 40px); overflow: visible; vertical-align: middle; }
.pframe .pf-av { position: absolute; left: 50%; top: 50%; width: var(--fa, 36px); height: var(--fa, 36px); transform: translate(-50%, -50%); border-radius: 50%;
  object-fit: contain; background: radial-gradient(circle at 50% 35%, #313a86, #12163a 70%); box-shadow: inset 0 0 0 1px #0008; border: 0; margin: 0; }
.pframe .pf-av.photo { object-fit: cover; }
.pframe .pf-fr { position: absolute; left: 50%; top: 50%; width: var(--ff, 58px); height: var(--ff, 58px); transform: translate(-50%, -50%); pointer-events: none; max-width: none;
  filter: hue-rotate(var(--fh, 0deg)) drop-shadow(0 2px 3px #0009); border: 0; border-radius: 0; background: none; box-shadow: none; }
/* level number on the frame's bottom plate (plate centre ≈ 86.5 % down the frame art) */
.pframe .pf-lv { position: absolute; left: 50%; top: calc(50% + var(--ff, 58px) * .365); transform: translate(-50%, -50%); min-width: calc(var(--ff, 58px) * .3); height: max(13px, calc(var(--ff, 58px) * .2));
  padding: 0 3px; display: grid; place-items: center; border-radius: 999px; font: 700 max(9px, calc(var(--ff, 58px) * .16))/1 Mitr, system-ui, sans-serif; color: #fff4d6;
  background: linear-gradient(180deg, #2b2346, #120f24); border: 1px solid #ffcf5a; box-shadow: 0 1px 3px #000c; text-shadow: 0 1px 0 #000; white-space: nowrap; z-index: 1; }
/* f04 neon + f05 jade + f07 ice: tint the plate like the art */
.pframe.f04 .pf-lv { border-color: #5ff0ff; color: #dffcff; } .pframe.f05 .pf-lv { border-color: #61e3a0; } .pframe.f07 .pf-lv { border-color: #9fd2ff; color: #eaf6ff; }
.pframe.f08 .pf-lv { border-color: #c79bff; } .pframe.f11 .pf-lv { border-color: #fff; background: linear-gradient(90deg, #4a2a7a, #1f5a7a, #6a2a5a); }

/* HUD: the frame replaces the old level ring */
.who .hudframe { margin: -2px 2px -2px 4px; }
.who .hudframe .pf-lv { font-size: 10.5px; }
/* online room bar: the button keeps its size, the frame sits around it */
.rb-av.framed { border: 0; background: none; }
.rb-av.framed > .pframe { position: absolute; left: 0; top: 0; }
.rb-av.framed.me .pf-av { box-shadow: 0 0 0 2px var(--good); } .rb-av.framed.work .pf-av { box-shadow: 0 0 0 2px #ffb340; }
.rb-av.framed > i { z-index: 2; }
/* member list + leaderboard */
.member .mst .pframe { margin: 6px; }
.lbrow .pframe { margin: 4px 6px; }
.lbrow.framed { grid-template-columns: 40px auto 1fr auto auto; }
.podium .pd .pframe { margin: 8px 0 6px; }
/* account / profile */
.pf-frame-card { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 8px 0 4px; }
.pf-frame-card .pframe { margin: 14px; }
.pf-frame-card p { margin: 0; text-align: left; color: #cfd6ff; } .pf-frame-card b { color: #ffe9bf; font-size: 17px; }
.pf-frame-card small { color: var(--dim, #9aa3d6); }
/* level-up: new frame celebration */
#frameUp { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.6); z-index: 9000; pointer-events: none; opacity: 0; text-align: center;
  padding: 16px 26px 14px; border-radius: 22px; background: radial-gradient(circle at 50% 30%, #2e2a66ee, #11122ef2); border: 1px solid #ffcf5a88; box-shadow: 0 10px 40px #000a, 0 0 40px #ffcf5a33;
  transition: opacity .35s, transform .45s cubic-bezier(.2, 1.6, .4, 1); color: #fff4d6; font-family: Mitr, system-ui, sans-serif; width: max-content; max-width: min(380px, calc(100vw - 32px)); }
#frameUp.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#frameUp .pframe { margin: 22px auto 16px; display: block; }
#frameUp .pframe .pf-fr { animation: frameGlow 1.6s ease-in-out infinite alternate; }
#frameUp b { display: block; font-size: 18px; color: #ffe9bf; } #frameUp small { color: #c9cff5; font-size: 13px; }
@keyframes frameGlow { from { filter: hue-rotate(var(--fh, 0deg)) drop-shadow(0 0 4px #ffcf5a66); } to { filter: hue-rotate(var(--fh, 0deg)) drop-shadow(0 0 16px #ffcf5acc); } }
@media (prefers-reduced-motion: reduce) { #frameUp, #frameUp .pframe .pf-fr { transition: none; animation: none; } }