#face-editor{inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:#221728 url('../assets/ui/lobby-v3/equipment-background-v1.c35ce7370047.webp') center/cover;color:#f7e8ce;padding:0;overflow:auto}#face-editor::backdrop{background:#110b19} #face-editor .face-frame{position:relative;min-height:100dvh;height:auto;background:transparent;border:0;box-shadow:none;border-radius:0;display:grid;grid-template-rows:150px minmax(530px,1fr) 110px} #face-editor .face-header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:22px 35px 15px 330px;background:linear-gradient(#16112478,transparent);border:0} #face-editor .face-header:before{content:'';position:absolute;left:30px;top:5px;width:245px;height:170px;background:url('../assets/ui/lobby-v3/brand-reference.4d917de79e5b.webp') -24px -5px/1536px 1024px no-repeat;clip-path:polygon(50% 0,60% 15%,78% 18%,94% 35%,93% 64%,51% 100%,7% 64%,4% 35%,26% 17%)} #face-editor .face-header small{display:none} #face-editor .face-header h2{font-family:'Leelawadee UI',Tahoma,sans-serif;color:#ffe0a0;font-size:clamp(29px,3.4vw,54px);margin:0;text-shadow:0 3px 3px #3d1a20} #face-editor .face-header p{color:#f5e4d7;font-size:14px;margin:8px 0 0}#face-close{color:#efd6ac;background:#231c2dcc;border:1px solid #b19b71;width:42px;height:42px;font-size:23px;border-radius:0} #face-editor .face-body{position:static;display:grid;grid-template-columns:minmax(240px,1fr) 490px;gap:24px;padding:14px 32px 8px 338px;min-width:0} #face-editor .face-stage{position:relative;background:transparent;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:end;min-height:500px} #face-editor .face-stage:before{display:none}#face-preview{width:100%;height:100%;max-width:none;max-height:660px;object-fit:contain;filter:drop-shadow(0 4px 3px #29112e)} #face-editor .face-zoom{display:flex;justify-content:center;gap:12px;margin-top:4px} #face-editor .face-zoom button{color:#e9d1b1;background:#251d31dc;border:1px solid #c9ae80;padding:8px 18px;border-radius:0} #face-editor .face-zoom button[aria-pressed=true]{background:#5d3e76} #face-editor .face-options{align-self:stretch;background:linear-gradient(130deg,#211c2def,#121420f2);border:2px solid #cbae79;outline:1px solid #69573a;outline-offset:4px;padding:24px;min-width:0;box-shadow:inset 0 0 0 4px #8c725328} #face-editor .face-tabs{position:absolute;left:35px;top:205px;width:275px;display:flex;flex-direction:column;gap:11px;padding:17px 13px;border:2px solid #bfa06a;background:#1c1a27e8;border-radius:0} #face-editor .face-tab{min-height:68px;justify-content:flex-start;gap:19px;border:1px solid #9f82595c;border-radius:0;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:linear-gradient(#292331,#161521);color:#ead5b0;font-size:20px;padding:12px 19px} #face-editor .face-tab[aria-selected=true]{color:#fff3d9;border-color:#dca8ff;background:linear-gradient(#7532bb,#422366);box-shadow:inset 0 0 16px #d4adff9c} #face-editor .face-tab-glyph{color:#e8bb80;font-size:29px} #face-editor .face-panel{padding-top:4px} #face-editor .face-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} #face-editor .face-choice{background:#151521;border:1px solid #b8986e90;border-radius:0;color:#e5d8c7;padding:8px;min-width:0} #face-editor .face-choice[aria-pressed=true]{border-color:#ce9fff;background:#402658;box-shadow:0 0 12px #b97de97d} #face-editor .face-choice-art,.face-choice-art canvas{width:76px;height:76px;max-width:100%;background:none} #face-editor .face-choice span:not(.face-choice-art){font-size:11px} #face-editor .face-swatch-row{border:0;margin:15px 0;padding:0} #face-editor .face-swatch-row h4{color:#f3e4d0;font-size:19px;font-weight:400;margin:0 0 23px} #face-editor .face-swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px} #face-editor .face-swatch{width:auto;height:65px;min-width:0;border-radius:8px;border:1px solid #d3b085;background:var(--swatch)} #face-editor .face-swatch[aria-pressed=true]{outline:3px solid #e2b5ff;outline-offset:3px;box-shadow:0 0 20px #a455e5} #face-editor .face-note{color:#c5b5c8;font-size:11px;line-height:1.8;margin-top:25px;border-top:1px solid #ae936b4d;padding-top:18px} #face-editor .face-footer{display:flex;gap:16px;align-items:center;padding:17px 35px;background:linear-gradient(0deg,#161124ad,transparent);border:0} #face-editor .face-status{color:#e8d2b5;max-width:310px;flex:1;font-weight:400;font-size:12px} #face-editor .face-status.bad{color:#ffbda3} #face-editor .face-primary,.face-secondary{border:1px solid #ccb17f;border-radius:0;background:linear-gradient(#2f2738,#161622);color:#f5dfb6;box-shadow:none;min-height:56px;padding:10px 25px;font-size:16px} #face-editor .face-primary{font-size:25px;min-height:75px;flex:1;max-width:480px;background:linear-gradient(#813acd,#32125d);border:2px solid #ffdea1;color:#fff0c5;box-shadow:inset 0 0 0 3px #c695e166,0 0 13px #c778eb;text-shadow:0 2px 3px #291339;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%)} #face-editor .face-primary:disabled{opacity:.5;background:linear-gradient(#574366,#2a2037);color:#cfc1cb;box-shadow:none}
@media(min-width:1000px) and (max-height:850px){ #face-editor .face-frame{grid-template-rows:110px minmax(460px,1fr) 105px} #face-editor .face-header{padding-left:280px} #face-editor .face-header:before{width:180px;height:124px;background-size:1152px 768px;background-position:-18px -4px} #face-editor .face-header h2{font-size:38px} #face-editor .face-body{padding-left:275px;grid-template-columns:minmax(200px,1fr) 420px} #face-editor .face-tabs{left:25px;top:150px;width:225px;gap:7px;padding:10px} #face-editor .face-tab{min-height:53px;font-size:17px;padding:9px 12px} #face-editor .face-stage{min-height:440px} #face-editor .face-options{padding:20px} #face-editor .face-primary{min-height:65px} #face-editor .face-grid{gap:9px} #face-editor .face-choice-art,.face-choice-art canvas{width:62px;height:62px} #face-editor .face-swatches{gap:11px} #face-editor .face-swatch{height:50px}}
@media(max-width:999px){ #face-editor .face-header{padding-left:220px} #face-editor .face-header:before{width:170px;height:124px;background-size:1152px 768px;background-position:-18px -4px} #face-editor .face-body{padding-left:210px;grid-template-columns:minmax(180px,1fr) 330px;gap:16px} #face-editor .face-tabs{left:20px;top:185px;width:170px;padding:8px;gap:7px} #face-editor .face-tab{font-size:15px;min-height:56px;padding:8px;gap:10px} #face-editor .face-tab-glyph{font-size:23px} #face-editor .face-options{padding:17px} #face-editor .face-grid{grid-template-columns:repeat(3,minmax(0,1fr))} #face-editor .face-choice-art,.face-choice-art canvas{width:63px;height:63px} #face-editor .face-stage{min-height:460px} #face-editor .face-swatches{grid-template-columns:repeat(4,1fr)} #face-editor .face-primary{font-size:20px;padding:12px} #face-editor .face-footer{gap:9px;padding:14px 20px} #face-editor .face-secondary{padding:10px 14px;font-size:13px} #face-editor .face-status{max-width:200px;font-size:10px}}
@media(max-width:760px){ #face-editor .face-frame{display:flex;flex-direction:column;min-height:100dvh} #face-editor .face-header{padding:20px 20px 15px 145px;min-height:105px} #face-editor .face-header:before{width:110px;height:80px;left:15px;top:10px;background-size:768px 512px;background-position:-12px -3px} #face-editor .face-header h2{font-size:27px} #face-editor .face-header p{font-size:11px} #face-editor .face-body{display:grid;grid-template-columns:1fr;padding:0 17px;gap:14px} #face-editor .face-tabs{position:static;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:7px;margin-bottom:18px} #face-editor .face-tab{min-height:48px;font-size:13px;justify-content:center;gap:6px} #face-editor .face-tab-glyph{font-size:19px} #face-editor .face-options{order:1} #face-editor .face-stage{min-height:380px;height:440px;order:0}#face-preview{max-width:none;width:100%;height:390px;max-height:none} #face-editor .face-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #face-editor .face-options .face-tabs{display:grid} #face-editor .face-footer{flex-wrap:wrap;gap:10px;padding:20px 17px} #face-editor .face-status{max-width:none;flex-basis:100%;font-size:12px} #face-editor .face-primary{order:-1;flex-basis:100%;max-width:none;min-height:64px} #face-editor .face-secondary{flex:1;min-height:47px} #face-editor .face-swatches{grid-template-columns:repeat(5,minmax(0,1fr))} #face-editor .face-swatch{height:50px} #face-editor .face-note{font-size:10px} #face-editor .face-body .face-options{max-width:100%}}
@media(prefers-reduced-motion:reduce){#face-editor *{transition:none!important;animation:none!important}}
#face-editor .face-frame{max-height:none;overflow:visible}
#face-editor .face-tab{flex-direction:row;line-height:1.2;min-height:68px;font-size:20px;font-weight:400}
#face-editor #face-preview{background:transparent;border:0;border-radius:0}
#face-editor .face-zoom{background:transparent;border-radius:0}
#face-editor .face-note{background:transparent;color:#c5b5c8;border-radius:0}
#face-editor .face-swatches{align-items:start}
#face-editor .face-swatch span{font-size:10px;color:#faf0e0;text-shadow:0 1px 3px #241827;max-width:100%;white-space:normal}
@media(min-width:1000px) and (max-height:850px){#face-editor .face-tab{min-height:53px;font-size:17px}}
@media(max-width:999px){#face-editor .face-tab{min-height:56px;font-size:15px}}
@media(max-width:760px){#face-editor .face-tab{min-height:48px;font-size:13px}}