.player-name-panel.is-celebrating{max-height:calc(100dvh - var(--player-hud-bottom,160px) - 24px);border-color:#c2f48a80;animation:.2s ease-out name-panel-in,.3s ease-in 2.5s both name-celebration-exit;overflow:hidden;box-shadow:0 14px 40px #001a23a3,0 0 25px #b8ef5430,inset 0 1px #e7ffad50}.player-name-panel.is-celebrating header{z-index:2;margin-bottom:0;position:relative}.name-celebration{isolation:isolate;box-sizing:border-box;text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:15px;min-height:168px;padding:12px 8px 17px;display:flex;position:relative}.name-celebration-halo{z-index:-1;background:radial-gradient(#bcff6329,#0000 65%);animation:1.9s ease-out both name-halo;position:absolute;inset:-45px -40px}.name-celebration-seal{color:#153e26;background:linear-gradient(145deg,#eeffbf,#c3f476 48%,#88db72);border:1px solid #e9ffaab5;border-radius:50%;flex:none;place-items:center;width:57px;height:57px;animation:.55s cubic-bezier(.18,.8,.26,1.3) both name-seal-pop;display:grid;position:relative;box-shadow:inset 0 2px 2px #ffffda90,0 3px #5c914b,0 0 27px #c6ff5f44}.name-celebration-seal>svg:first-of-type{stroke-dasharray:55;stroke-dashoffset:55px;animation:.4s ease-out .12s forwards name-seal-check}.name-celebration-ring{border:1px solid #d1fa9a70;border-radius:50%;animation:.95s ease-out 50ms both name-seal-ring;position:absolute;inset:-8px}.name-seal-spark{color:#fff5ba;fill:#fff5ba;filter:drop-shadow(0 0 5px #ffef9b);animation:.7s .2s both name-seal-spark;position:absolute;top:-7px;right:-9px}.name-celebration-label{z-index:1;overflow-wrap:anywhere;color:#e3ffb2;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 1px #06271d);background:linear-gradient(115deg,#c5fb8d 20%,#faffdf 42%,#fff 49%,#d2fc9e 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;max-width:100%;font-size:clamp(23px,5vw,29px);font-weight:800;line-height:1.18;animation:.55s .12s both name-label-pop,1.4s ease-out .25s both name-label-shine;position:relative}.name-celebration-underline{color:#dfec9e;justify-content:center;align-items:center;gap:10px;animation:.6s .3s both name-seal-spark;display:flex}.name-celebration-underline span{background:linear-gradient(90deg,#0000,#d0efa27d);width:42px;height:1px}.name-celebration-underline span:last-child{transform:rotate(180deg)}.name-confetti{z-index:2;pointer-events:none;position:absolute;inset:0;overflow:visible}.name-confetti>i{top:48%;left:var(--confetti-x);opacity:0;width:7px;height:9px;animation:name-confetti-flight var(--confetti-duration) var(--confetti-delay) cubic-bezier(.16,.65,.4,1) both;position:absolute}.name-confetti>i>span{background:var(--confetti-color);width:100%;height:100%;box-shadow:0 0 4px color-mix(in srgb,var(--confetti-color) 35%,transparent);animation:name-confetti-twist .55s var(--confetti-delay) linear 4;border-radius:1.5px;display:block}.name-confetti .is-star{clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);width:10px;height:10px}.name-confetti .is-ribbon{border-radius:2px;width:4px;height:13px}@keyframes name-confetti-flight{0%{opacity:0;transform:translateY(16px)rotate(0)}12%{opacity:1}40%{opacity:1;transform:translate(calc(var(--confetti-dx)*.72),var(--confetti-peak)) rotate(calc(var(--confetti-spin)*.45))}78%{opacity:.95}to{opacity:0;transform:translate(var(--confetti-dx),var(--confetti-fall)) rotate(var(--confetti-spin))}}@keyframes name-confetti-twist{0%,to{scale:1}50%{scale:.25 1}}@keyframes name-seal-pop{0%{opacity:0;transform:scale(.45)rotate(-14deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes name-seal-check{to{stroke-dashoffset:0}}@keyframes name-seal-ring{0%{opacity:.9;transform:scale(.7)}to{opacity:0;transform:scale(1.9)}}@keyframes name-seal-spark{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes name-label-pop{0%{opacity:0;transform:translateY(7px)scale(.94)}to{opacity:1;transform:none}}@keyframes name-label-shine{0%{background-position:100%}to{background-position:0}}@keyframes name-halo{0%{opacity:0;transform:scale(.65)}25%{opacity:1}to{opacity:.65;transform:scale(1.15)}}@keyframes name-celebration-exit{to{opacity:0;transform:translateY(-7px)scale(.98)}}@media (max-height:560px){.player-name-panel.is-celebrating{padding:10px}.player-name-panel.is-celebrating .player-name-emblem{border-radius:10px;width:32px;height:32px}.player-name-panel.is-celebrating .player-name-close{min-width:32px;min-height:32px}.player-name-panel.is-celebrating header strong{font-size:16px}.name-celebration{flex-direction:row;gap:14px;min-height:80px;padding:10px 8px}.name-celebration-seal{width:44px;height:44px}.name-celebration-label{font-size:24px}.name-celebration-underline{display:none}}@media (prefers-reduced-motion:reduce){.player-name-panel.is-celebrating{animation:none}.name-celebration *{animation:none!important}.name-confetti,.name-celebration-ring{display:none}.name-celebration-seal>svg:first-of-type{stroke-dashoffset:0}.name-celebration-halo{opacity:.65}.name-celebration-label{-webkit-text-fill-color:currentColor;background:0 0}}.player-name-panel{--pn-ink:#21452c;--pn-lime:#bfe95d;--pn-cream:#fff4cd;--pn-honey:#ffc857;z-index:45;top:calc(var(--player-hud-bottom,160px) + 10px);left:max(14px,env(safe-area-inset-left));width:min(400px,calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - var(--player-hud-bottom,160px) - 100px);overscroll-behavior:contain;scrollbar-width:thin;box-sizing:border-box;border:3px solid var(--pn-ink);background:var(--pn-lime);color:var(--pn-ink);box-shadow:0 4px 0 var(--pn-ink),0 14px 26px #10301c38,inset 0 3px 0 #e9ffb4;pointer-events:auto;border-radius:26px 30px 24px 28px;padding:12px;font-family:Fredoka,Trebuchet MS,sans-serif;animation:.2s ease-out name-panel-in;position:absolute;overflow:auto}.player-name-panel:before{content:"";pointer-events:none;border:1px solid #efffc181;border-radius:21px 25px 19px 23px;position:absolute;inset:4px}.player-name-panel header{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 0 12px;display:grid}.player-name-avatar{box-sizing:border-box;border:2.5px solid var(--pn-ink);background:var(--pn-cream);width:60px;height:60px;box-shadow:0 2px 0 var(--pn-ink);border-radius:50%;display:block;position:relative;overflow:hidden}.player-name-avatar>img{object-fit:cover;width:100%;height:100%;display:block;transform:translateY(4%)scale(1.22)}.player-name-avatar:after{content:"";border:3px solid var(--pn-honey);pointer-events:none;border-radius:50%;position:absolute;inset:0}.player-name-title{gap:3px;min-width:0;display:grid}.player-name-title strong{overflow-wrap:anywhere;font:700 24px/1.1 Fredoka,sans-serif}.player-name-title small{color:#3c6337;text-wrap:balance;font:500 14px/1.25 Fredoka,sans-serif}.player-name-panel .player-name-close{border:2.5px solid var(--pn-ink);background:var(--pn-cream);width:44px;height:44px;color:var(--pn-ink);box-shadow:0 3px 0 var(--pn-ink);border-radius:14px;align-self:start;place-items:center;padding:0;display:grid}.player-name-panel .player-name-close:not(:disabled):active{box-shadow:0 1px 0 var(--pn-ink);transform:translateY(2px)}.player-name-panel button:not(:disabled):hover{filter:brightness(1.04)}.player-name-panel :focus-visible,.game-shell .player-name-panel :focus-visible{outline:3px solid var(--pn-ink);outline-offset:2px}.player-name-form{gap:12px;display:grid}.player-name-body{background:#fff8dc;border-radius:20px;gap:8px;padding:12px;display:grid;box-shadow:inset 0 0 0 2px #21452c21,inset 0 -3px #f3e2a6}.player-name-field-head{justify-content:space-between;align-items:baseline;gap:8px;padding:0 3px;display:flex}.player-name-field-head label{font:600 16px/1.2 Fredoka,sans-serif}.player-name-count{color:#4a6b40;font-variant-numeric:tabular-nums;font:500 14px/1 Fredoka,sans-serif}.player-name-field{position:relative}.player-name-panel .player-name-field input{box-sizing:border-box;border:2.5px solid var(--pn-ink);width:100%;min-width:0;height:54px;color:var(--pn-ink);background:#fffdf3;border-radius:15px;outline:none;margin:0;padding:0 50px 0 14px;font:600 22px/1.2 Fredoka,sans-serif;transition:box-shadow .15s;display:block;box-shadow:inset 0 2px #21452c12}.player-name-panel .player-name-field input::placeholder{color:#21452c6b;font-weight:500}.player-name-panel .player-name-field input:focus{box-shadow:0 0 0 3px var(--pn-honey),inset 0 2px 0 #21452c12}.player-name-panel .player-name-field input:focus-visible,.game-shell .player-name-panel .player-name-field input:focus-visible{outline:none}.player-name-panel .player-name-field input[aria-invalid=true]{border-color:#a5381f}.player-name-panel .player-name-field input:disabled{opacity:.72}.player-name-panel .player-name-clear{width:44px;height:44px;color:var(--pn-ink);background:0 0;border-radius:12px;place-items:center;padding:0;display:grid;position:absolute;top:5px;right:5px}.player-name-panel .player-name-clear:hover{background:#21452c14}.player-name-panel .player-name-clear:not(:disabled):active{transform:scale(.92)}.player-name-help{color:#3c6337;align-items:flex-start;gap:6px;padding:0 3px;font:500 13px/1.3 Fredoka,sans-serif;display:flex}.player-name-help>svg{flex:none}.player-name-help[data-invalid]{color:#a5381f;font-weight:600}.player-name-price{border:2.5px solid var(--pn-ink);background:#ffe39a;border-radius:17px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin-top:4px;padding:9px 14px 9px 9px;transition:opacity .15s;display:grid;box-shadow:inset 0 -4px #f7c14f,inset 0 2px #fff3cb}.player-name-price[data-loading]{opacity:.6}.player-name-price[data-free]{background:#eaf9b8;box-shadow:inset 0 -4px #c6ea72,inset 0 2px #f8ffdc}.player-name-price .apu-coin{filter:drop-shadow(0 2px #21452c4d);width:56px;height:56px}.player-name-gift{box-sizing:border-box;border:2.5px solid var(--pn-ink);background:var(--pn-honey);width:56px;height:56px;box-shadow:0 2px 0 var(--pn-ink);border-radius:50%;place-items:center;display:grid}.player-name-price small{color:#3c5a2c;font:500 15px/1.2 Fredoka,sans-serif;display:block}.player-name-price strong{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin-top:1px;font:700 28px/1.1 Fredoka,sans-serif;display:block}.player-name-panel .player-name-save{box-sizing:border-box;border:3px solid var(--pn-ink);background:var(--pn-honey);width:100%;min-height:58px;color:var(--pn-ink);box-shadow:0 4px 0 var(--pn-ink),inset 0 3px 0 #ffe6a1;cursor:pointer;border-radius:19px;justify-content:center;align-items:center;gap:10px;margin:0;padding:6px 16px;font:700 21px/1.1 Fredoka,sans-serif;display:flex}.player-name-save .apu-coin{filter:drop-shadow(0 1px #21452c59);width:36px;height:36px}.player-name-panel .player-name-save:not(:disabled):active{box-shadow:0 1px 0 var(--pn-ink),inset 0 3px 0 #ffe6a1;transform:translateY(3px)}.player-name-panel .player-name-save:disabled{filter:none;cursor:not-allowed;color:#21452c9e;background:#f1e7c2;border-color:#21452c99;box-shadow:0 3px #21452c66}.player-name-panel .player-name-save:disabled .apu-coin{filter:grayscale(.7);opacity:.6}.player-name-panel .player-name-save:disabled:has(.spin){border-color:var(--pn-ink);background:var(--pn-honey);color:var(--pn-ink);box-shadow:0 4px 0 var(--pn-ink);cursor:progress;opacity:.88}.player-name-short{color:#8a2c17;background:#ffe3d3;border:2px solid #a5381f;border-radius:999px;justify-self:center;align-items:center;gap:6px;margin:-2px 0 0;padding:3px 12px 3px 4px;font:600 14px/1.2 Fredoka,sans-serif;display:flex}.player-name-short .apu-coin{width:22px;height:22px}.player-name-progress{box-sizing:border-box;border:2.5px solid var(--pn-ink);background:var(--pn-cream);min-height:56px;color:var(--pn-ink);box-shadow:0 3px 0 var(--pn-ink);border-radius:17px;align-items:center;gap:10px;padding:5px 5px 5px 14px;font:600 15px/1.25 Fredoka,sans-serif;display:flex}.player-name-progress span{flex:1}.player-name-progress a{width:44px;height:44px;color:inherit;border-radius:12px;place-items:center;display:grid}.player-name-panel .name-edit-quote{min-height:44px;color:var(--pn-ink);text-underline-offset:4px;background:0 0;border:0;border-radius:12px;margin:0 auto;padding:0 14px;font:600 15px/1 Fredoka,sans-serif;text-decoration:underline;text-decoration-thickness:2px;display:block}.player-name-panel .name-edit-quote:disabled{filter:none;opacity:.55}.player-name-panel>.name-edit-quote{margin-top:6px}.player-name-note{color:#3c6337;text-align:center;justify-content:center;align-items:center;gap:5px;margin-top:10px;font:500 13px/1.2 Fredoka,sans-serif;display:flex}.player-name-note:empty{display:none}.player-name-note .apu-coin{width:16px;height:16px}.player-name-error{color:#7c2714;text-align:center;background:#ffe3d3;border:2px solid #a5381f;border-radius:14px;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin:-2px 0 0;padding:8px 12px;font:500 14px/1.35 Fredoka,sans-serif;display:flex}.player-name-panel .player-name-error button{border:2px solid var(--pn-ink);background:var(--pn-cream);min-height:44px;color:var(--pn-ink);box-shadow:0 2px 0 var(--pn-ink);border-radius:12px;padding:0 14px;font:600 14px/1 Fredoka,sans-serif}@keyframes name-panel-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}dialog.player-name-dialog{width:min(400px,100vw - 24px);max-width:calc(100vw - 24px)}dialog.player-name-dialog .player-name-panel{box-shadow:0 4px 0 var(--pn-ink),0 22px 60px #001c1980,inset 0 3px 0 #e9ffb4}section.player-name-panel.is-celebrating{border-color:var(--pn-ink);box-shadow:0 4px 0 var(--pn-ink),0 14px 30px #10301c47,inset 0 3px 0 #e9ffb4}.player-name-panel .name-celebration-seal{border:2.5px solid var(--pn-ink);box-shadow:inset 0 2px 2px #ffffda90,0 3px 0 var(--pn-ink)}.player-name-panel .name-celebration-ring{border-color:#21452c59}.player-name-panel .name-celebration-label{color:var(--pn-ink);filter:drop-shadow(0 2px #fff4cd);background-image:linear-gradient(115deg,#21452c 44%,#4d8f2b 50%,#8fce45 53%,#21452c 60%)}.player-name-panel .name-seal-spark{color:#e59a12;fill:var(--pn-honey);filter:drop-shadow(0 0 2px #fff4cd)}.player-name-panel .name-celebration-underline{color:#5d8a33}.player-name-panel .name-celebration-underline span{background:linear-gradient(90deg,#0000,#21452c73)}@media (max-width:420px){.player-name-panel{border-radius:22px 26px 21px 24px;padding:10px}.player-name-panel:before{border-radius:17px 21px 16px 19px}.player-name-panel header{gap:10px;padding-bottom:10px}.player-name-avatar{width:52px;height:52px}.player-name-title strong{font-size:21px}.player-name-title small{font-size:13px}.player-name-body{border-radius:18px;padding:10px}.player-name-panel .player-name-field input{height:52px;font-size:20px}.player-name-panel .player-name-clear{top:4px}.player-name-price{gap:10px;padding:8px 12px 8px 8px}.player-name-price .apu-coin,.player-name-gift{width:48px;height:48px}.player-name-price strong{font-size:25px}.player-name-panel .player-name-save{min-height:56px;font-size:20px}.player-name-save .apu-coin{width:32px;height:32px}}@media (max-height:720px){.player-name-panel{padding:10px}.player-name-panel header{gap:10px;padding-bottom:8px}.player-name-avatar{width:44px;height:44px}.player-name-title strong{font-size:21px}.player-name-title small{font-size:12.5px}.player-name-form{gap:10px}.player-name-body{gap:6px;padding:9px 10px 10px}.player-name-panel .player-name-field input{height:48px;font-size:20px}.player-name-panel .player-name-clear{top:2px}.player-name-price{gap:10px;margin-top:2px;padding:6px 12px 6px 7px}.player-name-price .apu-coin,.player-name-gift{width:40px;height:40px}.player-name-price small{font-size:13px}.player-name-price strong{font-size:22px}.player-name-panel .player-name-save{min-height:50px;font-size:20px}.player-name-save .apu-coin{width:30px;height:30px}.player-name-progress{min-height:50px}.player-name-note{margin-top:6px}.player-name-panel>.name-edit-quote{margin-top:2px}}@media (max-height:600px){.player-name-title small,.player-name-note[data-hint]{display:none}}@media (max-width:340px){.player-name-title strong{font-size:19px}.player-name-price strong{font-size:22px}.player-name-panel .player-name-save{padding:6px 10px;font-size:18px}}@media (prefers-reduced-motion:reduce){.player-name-panel{animation:none}.player-name-panel .name-celebration-label{background:0 0}}
