/* Shared avatar UI. The renderer supplies only semantic markup; sizing and product styling live here. */
.z-avatar{
  --avatar-size:48px;
  display:inline-grid;
  width:var(--avatar-size);
  height:var(--avatar-size);
  flex:0 0 var(--avatar-size);
  place-items:center;
  overflow:hidden;
  border-radius:30%;
  background:var(--avatar-bg,#a4e629);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 5px 16px rgba(5,0,22,.22);
  color:#160032;
  isolation:isolate;
  vertical-align:middle;
}
.z-avatar-xs{--avatar-size:28px}.z-avatar-sm{--avatar-size:36px}.z-avatar-md{--avatar-size:48px}.z-avatar-lg{--avatar-size:64px}.z-avatar-xl{--avatar-size:96px}
.z-avatar>img,.z-avatar>svg{display:block;width:100%;height:100%}.z-avatar>img{object-fit:cover}
.z-avatar-emoji>span{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:calc(var(--avatar-size)*.62);line-height:1;filter:drop-shadow(0 3px 3px rgba(24,0,44,.24));transform:translateY(.02em)}
.z-avatar-custom>svg{animation:avatar-arrive .34s cubic-bezier(.2,.85,.28,1.16)}

.avatarbtn .z-avatar{width:100%;height:100%;border-radius:inherit;box-shadow:none}.avatarbtn{overflow:visible}.avatarbtn:has(.z-avatar){background:transparent}
.avatar{display:grid;width:36px;height:36px;flex:0 0 36px;place-items:center;border-radius:12px;background:transparent}.avatar .z-avatar{width:100%;height:100%;border-radius:inherit;box-shadow:none}

.avatar-picker{display:grid;min-width:0;gap:14px;color:#fff}
.avatar-picker-top{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px}
.avatar-picker-preview{display:grid;width:96px;height:96px;place-items:center}
.avatar-photo-button{display:flex;min-width:0;min-height:58px;align-items:center;justify-content:center;gap:9px;padding:10px 12px;border:1px solid transparent;border-radius:15px;background:linear-gradient(rgba(13,6,34,.88),rgba(13,6,34,.88)) padding-box,radial-gradient(ellipse at 100% 0,rgba(166,255,53,.88),rgba(124,41,230,.42) 55%,transparent 100%) border-box;color:#fff;font:600 14px/1.15 "Raleway",sans-serif;cursor:pointer}
.avatar-photo-button svg{width:24px;height:24px;flex:0 0 24px;color:#a6ff35}
.avatar-picker h3{margin:2px 0 -3px;font:700 16px/1.2 "Raleway",sans-serif}
.avatar-emoji-grid{display:grid;width:100%;min-width:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.avatar-emoji-choice{display:grid;min-width:0;aspect-ratio:1;place-items:center;padding:0;border:1px solid transparent;border-radius:15px;background:radial-gradient(circle at 32% 18%,rgba(255,255,255,.18),rgba(124,41,230,.42) 48%,rgba(13,6,34,.9));cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.avatar-emoji-choice span{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:clamp(27px,8vw,34px);line-height:1;filter:drop-shadow(0 4px 4px rgba(5,0,22,.38))}
.avatar-emoji-choice.selected{border-color:#fff;box-shadow:0 0 0 2px #a6ff35,0 9px 20px rgba(124,41,230,.28);transform:scale(1.045)}
.avatar-color-head{display:flex;align-items:end;justify-content:space-between;gap:12px}.avatar-color-head span{color:rgba(255,255,255,.58);font-size:11px}
.avatar-colors{display:grid;min-width:0;grid-template-columns:repeat(9,minmax(0,1fr));align-items:center;gap:7px}
.avatar-color{position:relative;display:grid;width:100%;height:auto;aspect-ratio:1;place-items:center;padding:0;border:2px solid rgba(255,255,255,.2);border-radius:50%;background:var(--choice,#a4e629);box-shadow:inset 0 2px 4px rgba(255,255,255,.28);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.avatar-color.selected{box-shadow:0 0 0 2px #050016,0 0 0 4px #fff,inset 0 2px 4px rgba(255,255,255,.3);transform:scale(.9)}
.avatar-color-custom{overflow:hidden;background:linear-gradient(135deg,#e62f29,#ffb020 23%,#a4e629 43%,#20c997 61%,#29a9eb 79%,#7c29e6)}
.avatar-color-custom>span{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#050016;color:#fff;font-size:20px;line-height:1;pointer-events:none}
.avatar-color-custom input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer}

/* Guest identity is a real scrollable mobile form now; the fixed CTA remains reachable at 390px. */
.identityScreen{height:100%;min-height:100%;max-width:430px;margin-inline:auto;overflow-y:auto;overscroll-behavior-y:contain;padding:34px 16px calc(86px + env(safe-area-inset-bottom,0px));background:#05001b;scrollbar-width:none}
.identityScreen::-webkit-scrollbar{display:none}
.identityScreen>.authBg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.identityScreen:before,.identityScreen:after{position:fixed}
.identityIntro{position:relative;inset:auto;text-align:center}
.identityWave{font-size:58px;line-height:1;filter:drop-shadow(0 7px 10px rgba(0,0,0,.32))}
.identityIntro h1{margin:12px 0 6px;font:700 27px/1.16 "Raleway",sans-serif}
.identityIntro p{margin:0;color:rgba(255,255,255,.63);font-size:13px;line-height:1.45}
.identityForm{position:relative;inset:auto;margin-top:30px;padding-bottom:92px}
.identityForm .fieldWrap{position:relative}.identityForm .fieldLabel{font-size:11px}
.identityAvatarSection{position:relative;margin-top:28px;padding:24px 12px 14px;border:1px solid transparent;border-radius:20px;background:linear-gradient(rgba(5,0,22,.84),rgba(5,0,22,.84)) padding-box,radial-gradient(ellipse at 100% 0,rgba(166,255,53,.52),rgba(124,41,230,.58) 54%,transparent 100%) border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.identityAvatarSection>.fieldLabel{top:-15px;left:0}
.identityActions{position:fixed!important;z-index:30;left:50%!important;right:auto!important;bottom:0!important;width:min(430px,100%);grid-template-columns:50px minmax(0,1fr);margin:0;padding:18px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(5,0,22,.97) 34%);transform:translateX(-50%)}
.identityActions .identityBack{display:grid!important;place-items:center;background:rgba(255,255,255,.08)}
.identityJoinError{grid-column:1/-1;margin:0 0 5px;text-align:center}

/* Profile card and the edit action share the same renderer as every other player list. */
.accountCard>.accountAvatarWrap{position:relative;width:64px;height:64px;align-self:center}
.accountAvatarWrap>.z-avatar{width:64px;height:64px;border-radius:19px}
.accountAvatarEdit{position:absolute;right:-5px;bottom:-5px;display:grid;width:30px;height:30px;place-items:center;padding:0;border:2px solid #1c0833;border-radius:10px;background:#a6ff35;box-shadow:0 5px 13px rgba(5,0,22,.45);cursor:pointer}
.accountAvatarEdit img{width:15px;height:15px;object-fit:contain;filter:brightness(.18) saturate(2)}
.avatar-profile-sheet{display:grid;gap:14px;max-height:min(690px,78dvh);overflow:auto;padding:4px 1px 2px;overscroll-behavior:contain;scrollbar-width:none}
.avatar-profile-sheet::-webkit-scrollbar{display:none}.avatar-profile-sheet .avatar-picker{padding-top:4px}

.avatarAnswer,.scoreAvatarLabel{display:flex;align-items:center;gap:9px}.avatarAnswer .z-avatar,.scoreAvatarLabel .z-avatar{flex:none}
.scoreAvatarLabel{min-width:0}.scoreAvatarLabel>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand .avatar:has(.z-avatar){overflow:visible;background:transparent}.brand .avatar>.z-avatar{width:47px;height:47px;border-radius:15px;box-shadow:none}.member-avatar:has(.z-avatar){overflow:visible;background:transparent}.member-avatar>.z-avatar{width:35px;height:35px;border-radius:50%;box-shadow:none}.member-avatar>i{z-index:3;left:auto!important;right:-1px;top:auto!important;bottom:-1px;width:9px!important;height:9px!important;border:2px solid #17052b}.turn-ready-icon:has(.z-avatar){display:grid;min-height:68px;place-items:center}.turn-ready-icon>.z-avatar{--avatar-size:68px;border-radius:21px}.watching-card>.z-avatar{--avatar-size:68px;margin-bottom:12px;border-radius:21px}.countdown-stage>.z-avatar{--avatar-size:64px;margin:0 auto 10px;border-radius:20px}

@keyframes avatar-arrive{from{opacity:0;transform:scale(.84) rotate(-4deg)}to{opacity:1;transform:none}}
@media(max-width:390px){
  .identityScreen{padding-inline:14px}.identityAvatarSection{padding-inline:11px}
  .avatar-picker{gap:12px}.avatar-picker-top{grid-template-columns:88px minmax(0,1fr);gap:12px}.avatar-picker-preview{width:88px;height:88px}.avatar-picker-preview .z-avatar-xl{--avatar-size:88px}
  .avatar-emoji-grid{gap:7px}.avatar-colors{gap:5px}
}
@media(max-width:350px){
  .avatar-emoji-choice span{font-size:26px}.avatar-color-custom>span{width:21px;height:21px;font-size:17px}
}
@media(orientation:landscape) and (max-height:600px){
  .identityScreen{max-width:760px;padding:18px 18px 88px}.identityIntro{width:42%;text-align:center}.identityForm{position:absolute;top:20px;right:18px;width:52%;margin:0;padding-bottom:82px}.identityActions{position:fixed!important;right:18px!important;left:auto!important;width:52%;margin:0}.identityAvatarSection{margin-top:24px}.avatar-picker-top{grid-template-columns:70px minmax(0,1fr)}.avatar-picker-preview,.avatar-picker-preview .z-avatar-xl{width:70px;height:70px}.avatar-picker-preview .z-avatar-xl{--avatar-size:70px}.avatar-emoji-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.avatar-emoji-choice{border-radius:10px}.avatar-emoji-choice span{font-size:24px}.avatar-colors{grid-template-columns:repeat(9,30px);justify-content:flex-start}.avatar-color{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){.z-avatar-custom>svg,.avatar-emoji-choice,.avatar-color{animation:none!important;transition:none!important}}

/* Shared product bottom sheet: same shape, blur and swipe behaviour as game sheets. */
.z-shared-sheet{position:fixed;z-index:220;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,0,9,.78);opacity:0;transition:opacity .18s;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.z-shared-sheet.visible{opacity:1}.z-shared-sheet.closing{opacity:0}
.z-shared-sheet>.bottom-sheet{width:min(100%,430px);max-height:92dvh;overflow-y:auto;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));border:1px solid rgba(255,255,255,.12);border-radius:26px 26px 0 0;background:rgba(33,11,55,.98);box-shadow:0 -22px 60px rgba(0,0,0,.52);transition:transform .18s cubic-bezier(.2,.78,.2,1);touch-action:pan-y;overscroll-behavior:contain}
.z-shared-sheet .sheet-handle{display:block;width:48px;height:5px;margin:0 auto 15px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.35)}
.z-shared-sheet .sheet-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.z-shared-sheet .sheet-title h2{margin:0;font:700 22px/1.15 Raleway,sans-serif}.z-shared-sheet .sheet-x{width:36px;height:36px;padding:0;border:0;border-radius:12px;background:rgba(255,255,255,.08);font-size:24px;line-height:1}.z-shared-sheet .sheet-content{min-width:0}

/* Fullscreen camera; the actual permission is requested only after the user presses Create by photo. */
.avatar-camera-overlay{position:fixed;z-index:260;inset:0;display:grid;place-items:center;background:#050016;opacity:0;transition:opacity .18s}.avatar-camera-overlay.open{opacity:1}
.avatar-camera{display:grid;width:min(100%,430px);height:100dvh;grid-template-rows:auto minmax(280px,1fr) auto auto;overflow:hidden;background:radial-gradient(circle at 50% 24%,#351060,#050016 55%);color:#fff}
.avatar-camera>header{display:grid;z-index:4;grid-template-columns:44px 1fr 44px;align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 9px;text-align:center}.avatar-camera>header b{font:700 18px/1 Raleway,sans-serif}.avatar-camera-close{display:grid;width:40px;height:40px;place-items:center;padding:0;border:0;border-radius:13px;background:rgba(255,255,255,.1);font-size:27px;line-height:1}
.avatar-camera-stage{position:relative;min-height:0;overflow:hidden;background:#0d0622}.avatar-camera-stage video,.avatar-photo-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.avatar-camera-stage video{transform:scaleX(-1)}.avatar-photo-preview{z-index:2;display:none;background:#0d0622;object-fit:cover}.avatar-photo-preview.show{display:block}
.avatar-face-shade,.avatar-face-guide{position:absolute;z-index:3;left:19%;top:10%;width:62%;height:74%;border-radius:46% 54% 47% 53%/42% 43% 57% 58%;pointer-events:none}.avatar-face-shade{box-shadow:0 0 0 100vmax rgba(5,0,22,.58)}.avatar-face-guide{border:2px solid rgba(255,255,255,.72);filter:drop-shadow(0 0 9px rgba(124,41,230,.7));transition:border-color .22s,filter .22s,transform .22s}.avatar-face-guide:before,.avatar-face-guide:after{content:"";position:absolute;width:36px;height:36px;border-color:#a4e629;opacity:0;transition:opacity .2s}.avatar-face-guide:before{left:-4px;top:-4px;border-left:4px solid;border-top:4px solid;border-radius:18px 0 0}.avatar-face-guide:after{right:-4px;bottom:-4px;border-right:4px solid;border-bottom:4px solid;border-radius:0 0 18px}.avatar-face-guide.ready{border-color:#a4e629;filter:drop-shadow(0 0 14px rgba(164,230,41,.74));transform:scale(1.012)}.avatar-face-guide.ready:before,.avatar-face-guide.ready:after{opacity:1}.avatar-face-guide.fallback{border-style:dashed;opacity:.75}
.avatar-camera-error,.avatar-camera-busy{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center;background:radial-gradient(circle at 50% 35%,#39125e,#0d0622 68%)}.avatar-camera-error[hidden],.avatar-camera-busy[hidden]{display:none}.avatar-camera-error>span{font-size:62px}.avatar-camera-error h2{margin:12px 0 7px;font:700 22px/1.1 Raleway,sans-serif}.avatar-camera-error p{max-width:270px;margin:0 0 20px;color:#baabc6;font-size:14px}.avatar-camera-error .secondary{min-width:190px}
.avatar-camera-busy{gap:14px;background:rgba(5,0,22,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.avatar-spinner{width:46px;height:46px;border:4px solid rgba(255,255,255,.15);border-top-color:#a4e629;border-radius:50%;animation:avatar-spin .8s linear infinite}
.avatar-camera-copy{padding:12px 16px 2px;text-align:center}.avatar-camera-copy h2{margin:0 0 4px;font:700 19px/1.18 Raleway,sans-serif}.avatar-camera-copy p{min-height:18px;margin:0;color:#baaac6;font-size:13px}
.avatar-camera-controls{display:grid;grid-template-columns:72px 82px 72px;align-items:center;justify-content:space-between;padding:8px 30px calc(12px + env(safe-area-inset-bottom,0px))}.avatar-camera-copy[hidden],.avatar-camera-controls[hidden]{display:none}.camera-gallery{display:grid;justify-items:center;gap:4px;padding:5px;border:0;background:transparent}.camera-gallery>span{display:grid;width:44px;height:44px;place-items:center;border-radius:13px;background:rgba(255,255,255,.11)}.camera-gallery svg{width:25px;height:25px;color:#fff}.camera-gallery small{font-size:11px}.camera-shutter{display:grid;width:78px;height:78px;place-items:center;padding:5px;border:3px solid #fff;border-radius:50%;background:transparent}.camera-shutter i{display:block;width:60px;height:60px;border-radius:50%;background:linear-gradient(145deg,#a4e629,#62c71c);box-shadow:0 0 22px rgba(164,230,41,.36)}.camera-shutter:active i{transform:scale(.91)}.camera-control-spacer{width:72px}.avatar-camera-preview-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:10px;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(5,0,22,.98) 30%)}.avatar-camera-preview-actions[hidden]{display:none}.avatar-camera-preview-actions button{min-height:50px}

/* Result and compact editor. WebGL lives only here; all regular player lists use the shared lightweight Avatar renderer. */
.avatar-result{text-align:center}.avatar-result-preview,.avatar-editor-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 34% 19%,rgba(255,255,255,.28),var(--avatar-bg,#7c29e6) 48%,#140225);isolation:isolate}.avatar-result-preview{width:190px;height:190px;margin:0 auto 16px;border-radius:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 18px 44px rgba(5,0,22,.4)}
.avatar-3d-canvas{display:block;width:100%!important;height:100%!important}.avatar-3d-fallback{display:grid;place-items:center}.avatar-3d-fallback .z-avatar{--avatar-size:min(100%,190px);border-radius:inherit;box-shadow:none}
.avatar-result h2{margin:0 0 18px;font:700 27px/1.08 Raleway,sans-serif}.avatar-result-actions{display:grid;gap:10px}.avatar-result-actions button{width:100%;min-height:50px}.avatar-result-actions .ghost{border:0;background:transparent;color:#d2c6db}
.avatar-editor-sheet{padding-inline:12px!important}.avatar-editor{display:grid;width:100%;min-width:0;gap:13px}.avatar-editor>*{min-width:0}.avatar-editor-hero{width:100%;max-width:100%;height:220px;border-radius:20px;touch-action:pan-y}.avatar-editor-hero>.avatar-editor-3d{width:100%;height:100%}.avatar-editor-hero>small{position:absolute;z-index:2;left:0;right:0;bottom:8px;color:rgba(255,255,255,.58);font-size:11px;text-align:center;pointer-events:none}.avatar-editor-hero.swipe-left>.avatar-editor-3d{animation:avatar-card-left .34s ease}.avatar-editor-hero.swipe-right>.avatar-editor-3d{animation:avatar-card-right .34s ease}
.avatar-editor-tabs{display:flex;gap:7px;overflow-x:auto;padding:1px 2px 5px;scrollbar-width:none;scroll-snap-type:x proximity}.avatar-editor-tabs::-webkit-scrollbar,.avatar-editor-options::-webkit-scrollbar{display:none}.avatar-editor-tabs button{flex:none;min-height:36px;padding:7px 11px;border:0;border-radius:999px;background:#16052d;color:#d2c5dc;font-size:12px;white-space:nowrap;scroll-snap-align:center}.avatar-editor-tabs button.selected{background:#a4e629;color:#102000}
.avatar-editor-section h3{margin:0 0 9px;font:700 16px/1.2 Raleway,sans-serif}.avatar-editor-options{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 7px;scroll-snap-type:x mandatory;scrollbar-width:none}.avatar-part{display:grid;min-width:88px;min-height:62px;place-items:center;gap:5px;padding:8px;border:1px solid transparent;border-radius:14px;background:#16052d;color:#e8ddf0;font-size:12px;scroll-snap-align:start}.avatar-part.selected{border-color:#a4e629;background:#2a0c4a;box-shadow:0 0 0 2px rgba(164,230,41,.18)}.avatar-part i{display:block;width:32px;height:32px;border:2px solid rgba(255,255,255,.34);border-radius:50%;background:var(--part-color)}.avatar-editor-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px;padding-bottom:2px}.avatar-editor-actions button{min-height:50px}.profile-avatar-editor{display:grid;gap:14px}.profile-avatar-current{display:none}.avatar-profile-save{min-height:50px}
.avatar-toast{position:fixed;z-index:300;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(350px,calc(100% - 28px));padding:13px 16px;border-radius:14px;background:#eaffd3;color:#102000;font:600 12px/1.35 Exo 2,sans-serif;text-align:center;opacity:0;transform:translate(-50%,20px);transition:.2s;pointer-events:none}.avatar-toast.show{opacity:1;transform:translate(-50%,0)}

@keyframes avatar-spin{to{transform:rotate(360deg)}}@keyframes avatar-card-left{0%{transform:translateX(0);opacity:1}45%{transform:translateX(-22px);opacity:.45}100%{transform:none;opacity:1}}@keyframes avatar-card-right{0%{transform:translateX(0);opacity:1}45%{transform:translateX(22px);opacity:.45}100%{transform:none;opacity:1}}
@media(min-width:700px){.avatar-camera-overlay{background:rgba(5,0,22,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.avatar-camera{height:min(820px,calc(100dvh - 32px));border:1px solid rgba(255,255,255,.14);border-radius:28px;box-shadow:0 25px 80px rgba(0,0,0,.6)}.z-shared-sheet{align-items:center}.z-shared-sheet>.bottom-sheet{border-radius:26px;max-height:min(820px,calc(100dvh - 32px))}}
@media(max-height:700px){.avatar-camera{grid-template-rows:auto minmax(230px,1fr) auto auto}.avatar-camera-copy{padding-top:7px}.avatar-camera-controls{padding-block:2px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.camera-shutter{width:66px;height:66px}.camera-shutter i{width:50px;height:50px}.avatar-editor-hero{height:180px}}
@media(orientation:landscape) and (max-height:600px){.avatar-camera{width:min(760px,100%);grid-template-columns:1.25fr .75fr;grid-template-rows:auto 1fr auto}.avatar-camera>header{grid-column:1/-1}.avatar-camera-stage{grid-column:1;grid-row:2/-1}.avatar-camera-copy,.avatar-camera-controls,.avatar-camera-preview-actions{grid-column:2}.avatar-camera-copy{align-self:end}}
@media(prefers-reduced-motion:reduce){.avatar-spinner{animation-duration:1.5s}.avatar-editor-hero.swipe-left>.avatar-editor-3d,.avatar-editor-hero.swipe-right>.avatar-editor-3d{animation:none}}