/* Shared player avatar + frame — ใช้คู่กับ /js/playerAvatar.js
   ทุกที่ที่โชว์รูปผู้เล่น (แชท, รายชื่อในห้อง, กระดานเกม, leaderboard, โปรไฟล์)
   ควรใช้คลาสชุดนี้ กรอบจะได้ขึ้นเหมือนกันหมด */

.player-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
}

/* กรอบเป็นวงแหวน gradient อยู่ใต้รูป ไม่บังตัว emoji */
.player-avatar .pa-frame {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    z-index: 0;
}

.player-avatar .pa-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    border-radius: 50%;
    border: 1px solid;
    background-clip: padding-box;
    overflow: hidden;
}

/* ไม่มีกรอบ = รูปเต็มวง ไม่ต้องเว้นที่ให้วงแหวน */
.player-avatar[data-frame="none"] .pa-inner {
    width: 100%;
    height: 100%;
}

.player-avatar .pa-frame-animated {
    background-size: 220% 220% !important;
    animation: paFrameShift 4s linear infinite;
}

@keyframes paFrameShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .player-avatar .pa-frame-animated { animation: none; }
}

/* ขนาดมาตรฐาน เผื่อเรียกใช้จาก CSS แทนการส่ง size */
.player-avatar-sm { width: 28px; height: 28px; font-size: 14px; }
.player-avatar-md { width: 40px; height: 40px; font-size: 20px; }
.player-avatar-lg { width: 64px; height: 64px; font-size: 32px; }

/* รูปจาก Google — ทับ emoji ไว้ ถ้าโหลดพลาด onerror ลบ <img> ทิ้งแล้ว emoji โผล่เอง */
.player-avatar .pa-inner.pa-has-img,
.pa-content.pa-has-img {
    position: relative;
}
.pa-content {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}
.pa-has-img .pa-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.pa-has-img .pa-emoji { visibility: hidden; }
.pa-img { max-width: none; }