*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1b1530;overflow:hidden;font-family:"Arial Rounded MT Bold","ui-rounded","Trebuchet MS",system-ui,sans-serif;color:#2b2140;-webkit-user-select:none;user-select:none}
body{display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:100vw;height:56.25vw;--u:1vw;overflow:hidden;background:#ffe9c7}
#c{position:absolute;inset:0;width:100%;height:100%;display:block}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(var(--u)*2.2);overflow:auto}
.screen.active{display:flex}
.screen.dim{background:rgba(27,21,48,.55)}
h1.logo{margin:calc(var(--u)*3) 0 0;font-size:calc(var(--u)*8.5);line-height:1;letter-spacing:.02em;text-align:center;color:#fff;-webkit-text-stroke:calc(var(--u)*.35) #2b2140;paint-order:stroke fill;text-shadow:0 calc(var(--u)*.6) 0 #2b2140;transform:rotate(-2deg)}
.logo .l1{color:#ff5d8f}.logo .l2{color:#ffd23f;font-size:.6em}.logo .l3{color:#3ec1ff}
h2{margin:0 0 calc(var(--u)*1.2);font-size:calc(var(--u)*4);color:#fff;-webkit-text-stroke:calc(var(--u)*.22) #2b2140;paint-order:stroke fill;text-shadow:0 calc(var(--u)*.35) 0 #2b2140}
.tag{font-size:calc(var(--u)*1.9);background:rgba(255,255,255,.88);padding:calc(var(--u)*.6) calc(var(--u)*1.6);border-radius:calc(var(--u)*2);margin:calc(var(--u)*1.4) 0}
.menu-btns{display:flex;flex-direction:column;gap:calc(var(--u)*1.2);align-items:center;margin-top:calc(var(--u)*1)}
.row-btns{flex-direction:row}
.btn{font:inherit;font-size:calc(var(--u)*2.6);padding:calc(var(--u)*.9) calc(var(--u)*3);border-radius:calc(var(--u)*2);border:calc(var(--u)*.3) solid #2b2140;background:#ffd23f;color:#2b2140;cursor:pointer;box-shadow:0 calc(var(--u)*.45) 0 #2b2140;min-width:calc(var(--u)*24);transition:transform .08s}
.btn.big{font-size:calc(var(--u)*3.6);background:#ff5d8f;color:#fff;-webkit-text-stroke:calc(var(--u)*.08) #2b2140}
.btn.small{font-size:calc(var(--u)*1.8);min-width:0;padding:calc(var(--u)*.6) calc(var(--u)*1.6)}
.btn.ghost{background:#fff}
.btn:hover,.btn:focus-visible,.btn.focus{transform:scale(1.07) rotate(-1deg);outline:calc(var(--u)*.35) solid #3ec1ff;outline-offset:calc(var(--u)*.25)}
.btn:active{transform:translateY(calc(var(--u)*.3))}
.icon{position:absolute;bottom:calc(var(--u)*1);right:calc(var(--u)*1);z-index:20;font-size:calc(var(--u)*2.4);width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);border-radius:50%;border:calc(var(--u)*.25) solid #2b2140;background:#fff;cursor:pointer;padding:0;line-height:1}
.pads{display:flex;gap:calc(var(--u)*2);margin-top:auto}
.pad{font-size:calc(var(--u)*1.6);background:rgba(255,255,255,.85);border:calc(var(--u)*.22) solid #9a90b0;color:#6b6280;padding:calc(var(--u)*.6) calc(var(--u)*1.4);border-radius:calc(var(--u)*1.5)}
.pad.on{background:#c9f7d6;border-color:#1f9d55;color:#145c33}
.mini{font-size:calc(var(--u)*1.35);max-width:calc(var(--u)*80);text-align:center;background:rgba(255,255,255,.8);padding:calc(var(--u)*.5) calc(var(--u)*1);border-radius:calc(var(--u)*1)}
/* avatars */
#s-avatars{background:rgba(27,21,48,.35);padding-bottom:calc(var(--u)*6.5)}
#s-avatars h2{font-size:calc(var(--u)*3.2);margin-bottom:calc(var(--u)*.6)}
.opts-col .btn.small{white-space:nowrap}
.av-grid{display:flex;gap:calc(var(--u)*1.5);width:100%;flex:1;min-height:0}
.av-list{width:calc(var(--u)*15);flex:none;display:flex;flex-direction:column;gap:calc(var(--u)*.8);overflow:auto;padding:calc(var(--u)*.4)}
.av-card{display:flex;align-items:center;gap:calc(var(--u)*.8);background:#fff;border:calc(var(--u)*.22) solid #2b2140;border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*.4);font:inherit;font-size:calc(var(--u)*1.5);cursor:pointer;text-align:left}
.av-card img{width:calc(var(--u)*4);height:calc(var(--u)*4);border-radius:50%;object-fit:cover;border:calc(var(--u)*.2) solid #fff;box-shadow:0 0 0 calc(var(--u)*.15) #2b2140}
.av-card.sel{background:#ffd23f}
.av-card.add{justify-content:center;background:#c9f7d6}
.av-edit{flex:1;display:flex;gap:calc(var(--u)*1.5);background:rgba(255,255,255,.92);border:calc(var(--u)*.25) solid #2b2140;border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.2);min-height:0}
.crop-col{width:calc(var(--u)*25);flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6)}
#crop{width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:calc(var(--u)*1.2);background:#eee;touch-action:none;cursor:grab}
.crop-tools{display:flex;gap:calc(var(--u)*1);align-items:center}
.file-btn{white-space:nowrap;font-size:calc(var(--u)*1.5)!important;position:relative;overflow:hidden;display:inline-block}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.zoom{font-size:calc(var(--u)*1.6)}
.zoom input{width:calc(var(--u)*9)}
.opts-col{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*.6);min-width:0}
.row{display:flex;gap:calc(var(--u)*.8);align-items:center}
.row.wrap{flex-wrap:wrap}
.lbl{font-size:calc(var(--u)*1.6);font-weight:bold}
#avName{font:inherit;font-size:calc(var(--u)*2);padding:calc(var(--u)*.4) calc(var(--u)*1);border:calc(var(--u)*.22) solid #2b2140;border-radius:calc(var(--u)*1);width:calc(var(--u)*20);user-select:text;-webkit-user-select:text}
.chip{font:inherit;font-size:calc(var(--u)*1.5);border:calc(var(--u)*.22) solid #2b2140;border-radius:calc(var(--u)*1);background:#fff;padding:calc(var(--u)*.35) calc(var(--u)*.8);cursor:pointer}
.chip.sel{background:#ffd23f;outline:calc(var(--u)*.25) solid #3ec1ff}
.chip img{width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);display:block;border-radius:50%}
.chip.face{padding:calc(var(--u)*.15);border-radius:50%}
.sw{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);border-radius:50%;border:calc(var(--u)*.22) solid #2b2140;cursor:pointer;padding:0}
.sw.sel{outline:calc(var(--u)*.35) solid #3ec1ff;outline-offset:calc(var(--u)*.15)}
#avPrev{width:calc(var(--u)*14);height:calc(var(--u)*20.5);align-self:center;flex:none}
#toast{position:absolute;bottom:calc(var(--u)*2);left:50%;transform:translateX(-50%);background:#1f9d55;color:#fff;font-size:calc(var(--u)*2);padding:calc(var(--u)*.6) calc(var(--u)*2);border-radius:calc(var(--u)*2);opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
/* select */
.sel-row{display:flex;width:100%;justify-content:space-between;align-items:flex-start}
.sel-col{width:calc(var(--u)*34);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);background:rgba(255,255,255,.9);border:calc(var(--u)*.25) solid #2b2140;border-radius:calc(var(--u)*2);padding:calc(var(--u)*1)}
.pl{font-size:calc(var(--u)*1.7);color:#6b6280}
.sel-name{display:flex;align-items:center;gap:calc(var(--u)*1);font-size:calc(var(--u)*3)}
.sel-name span{min-width:calc(var(--u)*16);text-align:center}
.arrow{font:inherit;font-size:calc(var(--u)*2.2);width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);border-radius:50%;border:calc(var(--u)*.25) solid #2b2140;background:#ffd23f;cursor:pointer;padding:0}
.sp{font-size:calc(var(--u)*1.5);color:#4a3f60}
.ready.on{background:#1f9d55;color:#fff}
.hint{font-size:calc(var(--u)*1.2);color:#6b6280}
.sel-mid{display:flex;flex-direction:column;gap:calc(var(--u)*1);align-items:center;margin-top:calc(var(--u)*2)}
.sel-mid .btn.big{min-width:0}
.sel-pads{margin-top:auto}
/* controls */
#s-controls{background:rgba(27,21,48,.45)}
table.ctl{border-collapse:separate;border-spacing:0;background:#fff;border:calc(var(--u)*.25) solid #2b2140;border-radius:calc(var(--u)*1.5);overflow:hidden;font-size:calc(var(--u)*1.7)}
.ctl th,.ctl td{padding:calc(var(--u)*.45) calc(var(--u)*1.4);border-bottom:1px solid #e3ddef;text-align:left}
.ctl th{background:#ffd23f}
.sp-list{display:flex;gap:calc(var(--u)*.8);flex-wrap:wrap;justify-content:center;margin:calc(var(--u)*.8) 0;font-size:calc(var(--u)*1.35)}
.sp-list span{background:#fff;border-radius:calc(var(--u)*1);padding:calc(var(--u)*.3) calc(var(--u)*.8);border:1px solid #9a90b0}
/* win */
#s-win{justify-content:flex-start;padding-top:calc(var(--u)*3);background:rgba(27,21,48,.25)}
.win-box{transform:scale(.85);transform-origin:top center;background:rgba(255,255,255,.93);border:calc(var(--u)*.3) solid #2b2140;border-radius:calc(var(--u)*2.5);padding:calc(var(--u)*1.6) calc(var(--u)*3);display:flex;flex-direction:column;align-items:center}
#winFace{width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;border:calc(var(--u)*.6) solid #fff;box-shadow:0 0 0 calc(var(--u)*.3) #2b2140;object-fit:cover;animation:bob 1s ease-in-out infinite alternate}
#winTitle{margin-top:calc(var(--u)*1)}
@keyframes bob{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(6deg) scale(1.08)}}