.g-avatar { --avatar-size:40px; position:relative; display:inline-flex; flex:0 0 auto; width:var(--avatar-size); height:var(--avatar-size); vertical-align:middle; border-radius:50%; padding:3px; box-sizing:border-box; background:#484848; line-height:1; isolation:isolate; }
.g-avatar-face { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; overflow:hidden; background:#242424; color:#ddd; font-size:calc(var(--avatar-size) * .35); outline:1px solid rgba(255,255,255,.1); }
.g-avatar img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; border-radius:50%; }
.g-avatar-face { position:relative; }
.g-avatar-lord { padding:0; background:none; }
.g-avatar-lord > .g-avatar-face { width:84%; height:84%; margin:auto; outline:none; }
.g-avatar > .g-avatar-frame { position:absolute; inset:auto; left:-8%; top:-12%; width:116%; height:auto; max-width:none; object-fit:contain; border-radius:0; pointer-events:none; z-index:2; }
.g-avatar-view { cursor:zoom-in; border:0; font:inherit; min-width:40px; min-height:40px; }
.g-avatar-view:focus-visible,.avatar-action:focus-visible { outline:2px solid #eac773; outline-offset:4px; }
#avatar { width:auto; height:auto; border:0; background:none; box-shadow:none; overflow:visible; display:block; }
.rank-pin { position:static; width:fit-content; margin:5px auto 0; }
.podium-item > .g-avatar { margin:7px auto 4px; }
.player-section .g-avatar { margin:5px auto; }
.list-item > .g-avatar { margin-right:10px; }
.result-row > .g-avatar { --avatar-size:36px; }
.result-name { min-width:0; overflow-wrap:anywhere; }
.rating-level-player-top .g-avatar { margin-right:10px; }
.rating-level-player-name { flex:1; min-width:0; }
.avatar-overlay { position:fixed; inset:0; z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.92); box-sizing:border-box; overscroll-behavior:contain; }
.avatar-dialog { width:min(100%,400px); max-height:calc(100dvh - 40px); overflow:auto; background:#171717; color:#fff; border-radius:20px; padding:20px; box-sizing:border-box; box-shadow:0 10px 50px #000; font-family:inherit; }
.avatar-dialog-header { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:12px; margin-bottom:10px; }
.avatar-dialog-header h2 { min-width:0; margin:0; padding:8px 0; font-size:20px; line-height:1.3; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; text-wrap:pretty; }
.avatar-dialog p { color:#aaa; font-size:13px; line-height:1.5; }
.avatar-action { min-height:44px; border-radius:10px; background:#303030; color:#fff; border:0; padding:10px 14px; font:inherit; font-size:14px; cursor:pointer; transition:transform .15s,opacity .15s; }
.avatar-action:active { transform:scale(.96); }
.avatar-action:disabled { opacity:.45; cursor:wait; }
.avatar-action.primary { background:#c7152b; }
.avatar-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.avatar-actions > * { flex:1; }
.avatar-close { width:44px; height:44px; padding:0; font-size:24px; background:transparent; }
.avatar-file-label { display:block; text-align:center; margin-top:16px; }
.avatar-crop { width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; touch-action:none; cursor:move; outline:1px solid #ffffff40; margin:20px 0 12px; }
.avatar-crop canvas { display:block; width:100%; height:100%; }
.avatar-zoom { width:100%; accent-color:#d91b32; min-height:40px; }
.avatar-message { min-height:20px; color:#f5b7bf; font-size:13px; margin-top:10px; }
.avatar-large-dialog { width:min(100%,840px); background:transparent; padding:0; }
.avatar-large-photo { display:block; width:100%; max-height:75dvh; object-fit:contain; border-radius:8px; }
@media(prefers-reduced-motion:reduce) { .avatar-action { transition:none; } }

.avatar-profile-options { display:grid; gap:10px; margin-top:20px; }
.avatar-profile-options .avatar-action { text-align:left; padding:14px 16px; min-height:48px; }
.edit-nick-btn { min-width:40px; min-height:40px; }

.avatar-viewer { background:#090909; padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.avatar-viewer .avatar-dialog { max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))); }