/* Reference-scale profile and customization screens. Artwork is individual WEBP.
   Only the inset avatar list scrolls; its surrounding dialog stays fixed. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#profile-screen{padding:0;overflow:hidden;background:linear-gradient(#3266f1 0,var(--profile-header-height,100px),#1d263b var(--profile-header-height,100px),#1d263b 100%);z-index:24}
.profile-shell{position:absolute;top:0;left:50%;width:947px;height:2048px;transform:translateX(-50%) scale(var(--profile-scale,.4));transform-origin:top center}
.profile-heading-bar{position:absolute;top:0;left:0;width:947px;height:265px;background:linear-gradient(#3467f3,#3478f4);border-bottom:9px solid #2669d4;box-shadow:inset 0 -6px 4px #44a3ff,0 7px 9px #101a36}
#profile-heading{position:absolute;top:126px;left:120px;right:120px;margin:0;text-align:center;color:#fff;font-size:78px;line-height:1.15;letter-spacing:0;-webkit-text-stroke:8px #426386;paint-order:stroke fill;text-shadow:0 6px #233d61}
.profile-close{position:absolute;display:grid;place-items:center;right:34px;top:129px;width:80px;height:80px;padding:0;border:3px solid #8b2936;border-radius:50%;background:radial-gradient(ellipse at 40% 20%,#ff949c,#fb4b51 38%,#dd1725 80%);box-shadow:inset 0 4px 4px #ffb0b7,inset 0 -5px 6px #9f0920,0 5px 4px #15224177;color:#fff;z-index:5}
.profile-close :is(svg,img.button-icon){width:53px;height:53px;stroke-width:5.5;filter:drop-shadow(0 3px 1px #8e2633)}
.profile-summary,.profile-stats{position:absolute;left:23px;width:901px;border:15px solid #edeef6;border-radius:44px;box-shadow:inset 0 3px 4px #fff,inset 0 0 0 3px #8297b7,0 0 0 3px #8791a3,0 4px 2px #0e1426,0 0 0 7px #101b2c66}
.profile-summary{top:289px;height:286px;background:radial-gradient(circle at 30% 20%,#61b0ed55 0 26%,transparent 60%),linear-gradient(#408ee1,#3068c9)}
.profile-portrait{position:absolute;padding:14px;border:3px solid #85899f;border-radius:49px;background:linear-gradient(#fff,#edecf7 65%,#bdbbd0);box-shadow:inset 0 3px 3px #fff,0 4px 3px #27314b66}
.profile-portrait img{display:block;width:100%;height:100%;object-fit:cover;border:4px solid #648274;border-radius:32px;box-shadow:0 0 0 3px #a6aab5}
.profile-summary>.profile-portrait{left:17px;top:17px;width:220px;height:220px}
.profile-nickname-area{position:absolute;left:247px;top:47px;width:402px;color:#fff;text-shadow:0 3px 0 #213558;-webkit-text-stroke:2px #314669;paint-order:stroke fill}
.profile-nickname-area>span{font-size:36px;line-height:1.1}
.profile-nickname-row{position:relative;margin-top:8px;height:74px;border-radius:16px;background:#2959bccc;display:flex;align-items:center;padding:0 88px 0 10px}
#profile-nickname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:48px;line-height:1.1}
.profile-pencil{display:grid;place-items:center;position:absolute;width:76px;height:76px;padding:0;border-radius:24px;border:3px solid #527c30;color:#fff;background:linear-gradient(#c4f356,#8bc837 65%,#589126);box-shadow:inset 0 3px 4px #e8ff95,inset 0 -4px 4px #4b842a,0 3px 3px #26456c77}
.profile-pencil :is(svg,img.button-icon){width:46px;height:46px;stroke-width:2.7;filter:drop-shadow(0 2px 1px #417831)}
#profile-edit{right:4px;top:-1px}
.profile-level-ribbon{position:absolute;right:23px;top:-10px;width:196px;height:246px;padding:69px 18px 0;text-align:center;background:linear-gradient(#6cddf9,#4cafec 24%,#398cd9);border:10px solid #ffcf5a;border-top:0;clip-path:polygon(0 0,100% 0,100% 89%,50% 100%,0 89%);box-shadow:inset 5px 0 0 #2c74b4,inset -5px 0 0 #2c74b4;color:white;font-size:39px;line-height:1;-webkit-text-stroke:3px #32618a;paint-order:stroke fill;filter:drop-shadow(0 4px 3px #223957)}
.profile-level-ribbon span,.profile-level-ribbon b{display:block}.profile-level-ribbon :is(svg,img.button-icon){width:38px;height:43px;fill:#266daa;margin-top:24px}
.profile-stats{top:602px;height:435px;background:repeating-linear-gradient(90deg,#90aac655 0 38px,#7690af30 38px 76px),linear-gradient(#96acc7,#7f93b2)}
.profile-stats-ribbon{position:absolute;left:50%;top:-7px;transform:translateX(-50%);width:263px;height:107px;margin:0;padding-top:23px;text-align:center;border:10px solid #ffca55;border-top-width:5px;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);border-radius:12px;background:linear-gradient(#ff7a8c,#df394d 70%,#b82038);color:white;font-size:43px;line-height:1.05;-webkit-text-stroke:3px #923a3d;paint-order:stroke fill;filter:drop-shadow(0 4px 3px #35405d)}
.profile-stat-columns{position:absolute;left:25px;right:25px;top:139px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.profile-stat{text-align:center;min-width:0;color:#1b2437}
.profile-stat-art{height:118px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.profile-stat-art img{width:108px;height:112px;object-fit:contain}
.profile-target{width:122px;height:122px;filter:drop-shadow(0 4px 3px #425877)}
.profile-target circle{fill:#f8f5fa;stroke:#e84859;stroke-width:12}.profile-target circle:nth-child(3){fill:#ec4355;stroke-width:2}
.profile-target .target-arrow{fill:#ffd545;stroke:#6d809e;stroke-width:8;stroke-linejoin:round}
.profile-lightning{width:91px;height:115px;fill:#ffda49;stroke:#cf8426;stroke-width:4;filter:drop-shadow(0 3px 3px #84662c)}
.profile-stat>span{display:block;font-size:28px;line-height:1.1;white-space:nowrap;letter-spacing:-.5px;margin-bottom:12px}
.profile-stat>b{display:block;margin:0 auto;width:90%;height:59px;line-height:59px;border-radius:18px;background:#455473;color:#fff;font-size:38px;-webkit-text-stroke:3px #29374f;paint-order:stroke fill}
#profile-editor{padding:0;overflow:hidden;z-index:26;background:#101443df}
.profile-editor-card{position:absolute;left:50%;top:50%;width:880px;height:1290px;transform:translate(-50%,-50%) scale(var(--profile-editor-scale,.4));transform-origin:center;background:linear-gradient(135deg,#459fe9,#378bdc 60%,#2561c7);border:5px solid #2465bf;border-radius:55px;box-shadow:inset 5px 5px 7px #87ccff,inset -5px -5px 7px #164693,0 9px 12px #0c103a99}
.profile-editor-body{position:absolute;inset:87px 14px 14px;border:3px solid #c3c3d2;border-radius:46px;background:linear-gradient(#f3f1f9,#deddec 32%,#d1d0e3);box-shadow:inset 0 8px 9px #fff,inset 0 -6px 8px #adabc8}
.profile-title-plate{position:absolute;left:90px;right:90px;top:-21px;height:148px;border:5px solid #2571b8;border-radius:10% 10% 48% 48%/20% 20% 26% 26%;background:linear-gradient(#59c7f4,#46abe8 60%,#3389d7);box-shadow:inset 0 5px 3px #93def9,inset 0 -9px 0 #469dea,0 5px 4px #1d366f66;z-index:2}
.profile-title-plate:after{content:'';position:absolute;inset:7px 11px 14px;border:5px solid #318cd3;border-top:0;border-radius:0 0 46% 46%/0 0 28% 28%;pointer-events:none}
#profile-editor-heading{position:relative;margin:15px 0 0;z-index:1;text-align:center;color:#f8f3ff;font-size:77px;line-height:1.15;letter-spacing:0;-webkit-text-stroke:7px #446598;paint-order:stroke fill;text-shadow:0 4px #214d87}
#profile-editor-close{right:4px;top:2px}
.profile-editor-portrait{left:48px;top:189px;width:184px;height:184px;padding:12px;border-radius:44px}
.profile-editor-portrait img{border-radius:26px;border-width:3px}
.profile-name-form{position:absolute;left:264px;top:226px;width:564px;height:108px;background:#9fa7c6;border-radius:33px;box-shadow:inset 0 2px 1px #9398b0}
#profile-name-input{position:absolute;inset:0;width:100%;height:100%;padding:0 106px 0 17px;margin:0;border:0;border-radius:33px;background:transparent;color:#1e273c;font-size:48px;line-height:1.1;outline:none}
#profile-name-input:not([readonly]){background:#fffbe2;box-shadow:inset 0 0 0 4px #4ba7e3}
#profile-name-input[readonly]{-webkit-user-select:none;user-select:none}
#profile-name-edit{right:11px;top:12px;width:83px;height:83px;border-color:#438ab8;background:linear-gradient(#86f0fa,#44c9e9 42%,#289bd2);box-shadow:inset 0 3px 4px #e5ffff,inset 0 -4px 4px #216fbd,0 3px 3px #52658a55}
#profile-name-edit :is(svg,img.button-icon){filter:drop-shadow(0 2px 1px #217eaa)}
.profile-tabs{position:absolute;left:44px;right:44px;top:387px;height:83px;display:flex;border:3px solid #307dc1;border-radius:26px;overflow:hidden;background:#3c9ce1}
.profile-tabs button{flex:1;min-width:0;margin:0;border:0;border-radius:0;background:linear-gradient(#63c9f1,#368dd7);color:#fff;font-size:43px;line-height:1;-webkit-text-stroke:4px #2d6897;paint-order:stroke fill;box-shadow:inset 0 -4px 2px #2166b4;position:relative}
.profile-tabs button+button{border-left:3px solid #67e0f4}
.profile-tabs button[aria-selected=true]{background:linear-gradient(#8df5f5,#4ad5eb 40%,#3699da);box-shadow:inset 0 4px 4px #c8ffff,inset 0 -5px 3px #266fbc}
.profile-tabs button:active{transform:none;filter:brightness(.96)}
.profile-grid-bed{position:absolute;left:42px;right:42px;top:487px;bottom:20px;border-radius:34px;background:#9fa7c6;box-shadow:inset 0 2px 2px #8e96b4}
.profile-item-scroll{position:absolute;top:487px;left:42px;right:42px;bottom:20px;border-radius:34px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.profile-item-scroll::-webkit-scrollbar{display:none}
.profile-item-grid{position:relative;padding:18px 28px 27px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:229px;gap:19px 20px;align-content:start}
html.avatar-list-open,html.avatar-list-open body,html.avatar-list-open #game,#game #profile-editor,#game #profile-editor-card,#game #profile-item-scroll,#game #profile-item-scroll *{touch-action:pan-y}
.profile-choice{position:relative;display:block;min-width:0;width:100%;height:229px;padding:15px;border-radius:45px;border:3px solid #8f90a8;background:linear-gradient(#fff,#e8e7f3 70%,#b7b6c8);box-shadow:inset 0 3px 3px #fff,0 4px 3px #68718b;text-align:center;overflow:visible}
.profile-choice>img{width:100%;height:100%;display:block;object-fit:cover;border-radius:28px;border:3px solid #67748b;pointer-events:none}
.profile-choice[aria-pressed=true]{border-color:#cf8424;background:linear-gradient(#fff5a9,#ffcc54 45%,#e6992d);box-shadow:inset 0 4px 4px #fff9c8,0 4px 4px #996829}
.profile-choice.locked>img{filter:brightness(.65)}
.profile-lock{position:absolute;right:-7px;top:-17px;width:71px;height:86px;filter:drop-shadow(0 3px 2px #48567b);pointer-events:none}
.profile-lock :is(svg,img.button-icon){width:100%;height:100%;stroke-linecap:round;stroke-linejoin:round}
.lock-shackle{fill:none;stroke:#e3f5ff;stroke-width:10;filter:drop-shadow(0 -2px 1px #7590ac)}
.lock-body{fill:#d1e9fa;stroke:#86a4c4;stroke-width:3}
.lock-key{fill:#5b759a;stroke:none}
.profile-locked-label{position:absolute;bottom:24px;left:15px;right:15px;color:#fff;font-size:28px;line-height:.95;-webkit-text-stroke:4px #38537e;paint-order:stroke fill;pointer-events:none}
.profile-selected-tick{position:absolute;right:-12px;bottom:-5px;width:61px;height:59px;filter:drop-shadow(0 3px 2px #425d23)}
.profile-selected-tick :is(svg,img.button-icon){width:100%;height:100%;stroke:#aaf338;stroke-width:8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.badge-grid .profile-choice{padding:0;background:none;border:0;box-shadow:none}
.badge-grid .profile-choice>img{object-fit:contain;border:0;border-radius:0}
.badge-grid .profile-lock{right:auto;left:50%;top:64px;transform:translateX(-50%);width:78px;height:98px}
.badge-grid .lock-shackle{stroke:#fff080}.badge-grid .lock-body{fill:#ffd443;stroke:#e3a429}.badge-grid .lock-key{fill:#b2691b}
.profile-feedback{position:absolute;left:55px;right:55px;bottom:71px;z-index:8;background:#1e2c55ed;border:3px solid #78cef5;border-radius:24px;color:#fff;font-size:31px;line-height:1.12;text-align:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .15s}
.profile-feedback.visible{opacity:1}
.profile-editor-card.naming{height:440px}.naming .profile-tabs,.naming .profile-grid-bed,.naming .profile-item-scroll,.naming .profile-feedback{display:none}
#menu #lobby-profile{padding:14px;border:3px solid #85899f;border-radius:55px;background:linear-gradient(#fff,#edecf7 65%,#bdbbd0);box-shadow:inset 0 3px 3px #fff,0 4px 3px #27314b66}
#menu #lobby-profile .menu-profile-art{position:static;width:100%;height:100%;background:none;clip-path:none;border:4px solid #648274;border-radius:36px;object-fit:cover}
#profile-screen button:focus-visible,#profile-editor button:focus-visible{outline:5px solid #fff;outline-offset:5px}
#profile-screen button::before,#profile-editor button::before{content:none!important}