/* O Mundo da Flor — estilo */
:root{
  --pink:#FF4F9A; --pink2:#FF8FB8; --yellow:#FFC83D; --teal:#19B5A5; --violet:#7B5CFF; --red:#E8374F; --ink:#2B1B3D; --cream:#FFF8EC;
  --f1:'Fredoka','Nunito',system-ui,sans-serif; --f2:'Nunito',system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2B1B3D;font-family:var(--f2);color:var(--ink);overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font-family:var(--f1);cursor:pointer;border:0;color:inherit}
#app,#login,#game,#picker{position:fixed;inset:0}
[hidden]{display:none!important}

/* ---------- login ---------- */
#login{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#FFC83D 0%,#FF8E5A 40%,#FF4F9A 80%,#7B5CFF 100%);overflow:hidden}
#login .bubbles i{position:absolute;border-radius:50%;background:rgba(255,255,255,.28);animation:floaty 9s ease-in-out infinite}
#login .bubbles i:nth-child(1){width:120px;height:120px;left:-30px;top:8%}
#login .bubbles i:nth-child(2){width:70px;height:70px;right:12%;top:14%;animation-delay:-2s}
#login .bubbles i:nth-child(3){width:160px;height:160px;right:-50px;top:46%;animation-delay:-4s}
#login .bubbles i:nth-child(4){width:50px;height:50px;left:16%;bottom:18%;animation-delay:-1s}
#login .bubbles i:nth-child(5){width:90px;height:90px;left:40%;bottom:-20px;animation-delay:-5s}
#login .bubbles i:nth-child(6){width:36px;height:36px;left:60%;top:30%;animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.login-card{position:relative;width:min(88vw,380px);background:#fff;border-radius:34px;padding:92px 26px 28px;text-align:center;box-shadow:0 22px 60px rgba(43,27,61,.35)}
.flor-badge{position:absolute;left:50%;top:-62px;transform:translateX(-50%);width:128px;height:128px}
.flor-badge img{width:128px;height:128px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 8px 24px rgba(43,27,61,.3);position:relative;z-index:2;background:#fff}
.flor-badge .petals{position:absolute;inset:-14px;border-radius:50%;z-index:1;background:conic-gradient(from 0deg,#FF4F9A 0 12%,#FFC83D 12% 25%,#19B5A5 25% 37%,#7B5CFF 37% 50%,#FF4F9A 50% 62%,#FFC83D 62% 75%,#19B5A5 75% 87%,#7B5CFF 87% 100%);animation:spin 14s linear infinite;-webkit-mask:radial-gradient(circle,transparent 62px,#000 63px);mask:radial-gradient(circle,transparent 62px,#000 63px)}
@keyframes spin{to{transform:rotate(360deg)}}
.login-card h1{font-family:var(--f1);font-size:34px;line-height:1.05;margin:0 0 4px;color:var(--pink)}
.login-card .sub{margin:0 0 20px;font-weight:800;color:#8A7AA6;font-size:17px}
#pw{width:100%;font:700 22px var(--f2);padding:16px 18px;border-radius:20px;border:3px solid #E7DDF7;text-align:center;outline:none;color:var(--ink);user-select:text;-webkit-user-select:text}
#pw:focus{border-color:var(--violet)}
.btn{font-family:var(--f1);font-weight:600;font-size:20px;padding:14px 22px;border-radius:22px;background:var(--violet);color:#fff;box-shadow:0 5px 0 rgba(43,27,61,.25);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(43,27,61,.25)}
.btn.big{width:100%;margin-top:14px;font-size:24px;padding:16px}
.btn.go{background:linear-gradient(135deg,var(--pink),#FF8E5A)}
.btn.ghost{background:#EFE8FA;color:var(--ink);box-shadow:0 5px 0 #D7CBEE}
.btn.teal{background:var(--teal)}
.err{color:var(--red);font-weight:800;min-height:22px;margin:12px 0 0}

/* ---------- jogo ---------- */
#game{background:linear-gradient(#53C4FF,#FFE9B8);overflow:hidden}
#stageWrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#stage{width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;gap:8px;align-items:center;pointer-events:none;z-index:5}
.chip{pointer-events:auto;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 14px 6px 10px;font:600 18px var(--f1);display:flex;align-items:center;gap:6px;box-shadow:0 3px 0 rgba(43,27,61,.18)}
.chip.coin span{min-width:30px}
.chip.coin.pop{animation:pop .5s}
.chip.lvl{flex:1;gap:10px}
.chip.lvl b{font-weight:600;white-space:nowrap}
.chip .bar{flex:1;height:12px;border-radius:99px;background:#EADFFB;overflow:hidden;min-width:40px}
.chip .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--pink));border-radius:99px;transition:width .6s}
.chip.tiny{padding:6px 10px;font-size:20px}
#where{position:absolute;top:calc(56px + var(--safe-t));left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font:600 15px var(--f1);padding:4px 16px;border-radius:99px;z-index:4;pointer-events:none;box-shadow:0 3px 0 rgba(43,27,61,.2);transition:opacity .5s}
#dock{position:absolute;left:0;right:0;bottom:0;padding:8px 12px calc(10px + var(--safe-b));display:flex;gap:10px;justify-content:center;z-index:5;pointer-events:none}
#dock button{pointer-events:auto;position:relative;flex:1;max-width:130px;background:#fff;border-radius:22px;padding:7px 4px 6px;font:600 14px var(--f1);box-shadow:0 4px 0 rgba(43,27,61,.22);display:flex;flex-direction:column;align-items:center;line-height:1.1}
#dock button span{font-size:26px}
#dock button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,27,61,.22)}
#dock em{position:absolute;top:-6px;right:8px;min-width:22px;height:22px;border-radius:99px;background:var(--red);color:#fff;font:600 13px/22px var(--f1);font-style:normal;text-align:center;padding:0 5px;animation:pop 1.6s infinite}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

/* toast */
#toast{position:absolute;left:50%;top:calc(10px + var(--safe-t));transform:translate(-50%,-30px);background:#fff;padding:10px 20px;border-radius:99px;font:600 18px var(--f1);box-shadow:0 8px 24px rgba(43,27,61,.3);opacity:0;pointer-events:none;transition:all .35s;z-index:30;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#fade{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s;z-index:40}
#fade.on{opacity:1;pointer-events:auto}
#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:35}
#fx i{position:absolute;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
#fx .coinfly{position:absolute;font-size:30px;animation:cfly 1s ease-out forwards}
@keyframes cfly{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-90px) scale(1.3);opacity:0}}

/* ---------- sheet (painéis) ---------- */
#sheet{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(43,27,61,.0)}
#sheet.dim{background:rgba(43,27,61,.45);animation:fadein .25s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.panel{background:var(--cream);border-radius:30px 30px 0 0;padding:16px 16px calc(18px + var(--safe-b));max-height:86%;overflow:auto;box-shadow:0 -10px 40px rgba(43,27,61,.35);animation:rise .3s cubic-bezier(.2,.9,.3,1.2);position:relative;-webkit-overflow-scrolling:touch}
.panel.full{height:92%;max-height:92%}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.panel h2{font:600 26px var(--f1);margin:0 0 4px;color:var(--pink)}
.panel .lead{margin:0 0 12px;font-weight:700;color:#7C6C97}
.xbtn{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;background:#EFE8FA;font-size:20px;box-shadow:0 3px 0 #D7CBEE}

/* diálogo */
.dlg{padding-top:14px}
.dlg .who{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:#fff;border:4px solid #fff;box-shadow:0 3px 8px rgba(43,27,61,.3);display:flex;align-items:center;justify-content:center;font-size:30px;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.who b{font:600 20px var(--f1)}
.who small{display:block;font-weight:800;color:#8A7AA6}
.dots{margin-left:auto;display:flex;gap:5px;margin-right:46px}
.dots i{width:10px;height:10px;border-radius:50%;background:#E3D8F5}
.dots i.on{background:var(--pink)}
.dots i.done{background:var(--teal)}
.bubble{background:#fff;border-radius:24px 24px 24px 6px;padding:14px 16px;box-shadow:0 4px 0 #E8DDF5;display:flex;gap:12px;align-items:center}
.bubble .vis{font-size:44px;line-height:1}
.bubble .en{font:600 24px/1.2 var(--f1);flex:1}
.bubble .say{width:46px;height:46px;border-radius:50%;background:var(--yellow);font-size:22px;flex:none;box-shadow:0 3px 0 #D79F10}
.ptline{margin:8px 4px 10px;font-weight:700;color:#7C6C97;min-height:22px;font-size:16px}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{background:#fff;border-radius:22px;padding:14px 16px;font:600 22px var(--f1);text-align:left;box-shadow:0 5px 0 #D7CBEE;border:3px solid transparent;display:flex;align-items:center;gap:10px;transition:transform .1s}
.opt:active{transform:translateY(3px)}
.opt .sp{margin-left:auto;font-size:20px;opacity:.7}
.opt.right{background:#D7F8E9;border-color:var(--teal);box-shadow:0 5px 0 #8ADCC3;animation:pop .5s}
.opt.wrong{background:#FFE0E5;border-color:var(--red);animation:shake .4s}
.opt.dim{opacity:.4}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.rowbtns{display:flex;gap:10px;margin-top:12px}
.rowbtns .btn{flex:1;font-size:18px;padding:12px 8px}
.hintbtn{display:flex;align-items:center;gap:8px;background:#EFE8FA;border-radius:99px;padding:8px 16px;font:600 17px var(--f1);box-shadow:0 3px 0 #D7CBEE}
.hintbtn b{background:var(--pink);color:#fff;border-radius:99px;min-width:24px;height:24px;line-height:24px;text-align:center;font-size:14px}
.hintbtn[disabled]{opacity:.5}
.mic{background:var(--teal)!important;color:#fff}
.mic.rec{background:var(--red)!important;animation:pop 1s infinite}

.result{text-align:center}
.result .stars{font-size:52px;letter-spacing:6px;margin:6px 0}
.result .stars span{display:inline-block;animation:starpop .5s both}
.result .stars span:nth-child(2){animation-delay:.15s}.result .stars span:nth-child(3){animation-delay:.3s}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1)}}
.reward{display:flex;gap:10px;justify-content:center;margin:10px 0 4px;flex-wrap:wrap}
.reward span{background:#fff;border-radius:99px;padding:8px 16px;font:600 20px var(--f1);box-shadow:0 3px 0 #E8DDF5}
.newwords{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.wc{background:#fff;border-radius:18px;padding:8px 12px;box-shadow:0 3px 0 #E8DDF5;text-align:center;min-width:92px}
.wc .e{font-size:30px;display:block}
.wc b{font:600 18px var(--f1);display:block}
.wc small{font-weight:800;color:#8A7AA6}

/* missões */
.mis{display:flex;align-items:center;gap:12px;background:#fff;border-radius:22px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 0 #E8DDF5}
.mis .em{font-size:30px}
.mis .tx{flex:1;font:600 18px/1.15 var(--f1)}
.mis .pg{height:10px;border-radius:99px;background:#EADFFB;margin-top:6px;overflow:hidden}
.mis .pg i{display:block;height:100%;background:var(--teal);border-radius:99px}
.mis.done{background:#D7F8E9}
.mis .ck{font-size:28px}
.bonus{background:linear-gradient(135deg,#FFE27A,#FFB347);border-radius:22px;padding:12px 16px;text-align:center;font:600 19px var(--f1);margin-top:4px}
.mini{height:14px;border-radius:99px;background:#EADFFB;overflow:hidden;margin:8px 0 12px}
.mini i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--yellow));border-radius:99px}

/* caderno */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 12px}
.stats div{background:#fff;border-radius:18px;padding:10px 4px;text-align:center;box-shadow:0 3px 0 #E8DDF5}
.stats b{display:block;font:600 24px var(--f1);color:var(--pink)}
.stats small{font-weight:800;color:#8A7AA6;font-size:12px}
.cat{font:600 16px var(--f1);color:var(--violet);margin:12px 0 6px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wcell{background:#fff;border-radius:16px;padding:8px 4px;text-align:center;box-shadow:0 3px 0 #E8DDF5;position:relative}
.wcell .e{font-size:28px;display:block}
.wcell b{font:600 15px var(--f1);display:block;line-height:1.1}
.wcell small{font-weight:800;color:#8A7AA6;font-size:12px}
.wcell.locked{opacity:.4;filter:grayscale(1)}
.wcell .lv{position:absolute;top:4px;right:6px;font-size:10px;color:var(--teal)}

/* mapa */
.mapbox{border-radius:22px;overflow:hidden;box-shadow:0 4px 0 #E8DDF5;background:#BDEBD0}
.mapbox svg{display:block;width:100%;height:auto;max-height:60vh}
.mapbox .pin.open:active circle{transform:scale(1.2)}
.mapbox .pin.lock{opacity:.9}

/* loja */
.tabs{display:flex;gap:6px;margin:6px 0 10px;overflow:auto}
.tab{flex:1;white-space:nowrap;background:#EFE8FA;border-radius:16px;padding:8px 10px;font:600 15px var(--f1);box-shadow:0 3px 0 #D7CBEE}
.tab.on{background:var(--pink);color:#fff;box-shadow:0 3px 0 #C23878}
.wardrobe{display:flex;gap:12px}
.wardrobe .preview{width:42%;background:linear-gradient(#FFE9F3,#FFF4D6);border-radius:24px;padding:6px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px #fff}
.wardrobe .preview svg{width:100%;height:auto;max-height:44vh}
.items{flex:1;display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto;padding-right:2px}
.item{background:#fff;border-radius:18px;padding:9px 10px;display:flex;align-items:center;gap:8px;font:600 15px/1.1 var(--f1);box-shadow:0 3px 0 #E8DDF5;text-align:left;border:3px solid transparent;width:100%}
.item.sel{border-color:var(--violet)}
.item.on{background:#D7F8E9}
.item .pr{margin-left:auto;font-size:15px;white-space:nowrap}
.buybar{margin-top:12px;display:flex;gap:10px;align-items:center}
.buybar .btn{flex:1}

/* trabalho (minijogos) */
.job .scoreline{display:flex;justify-content:space-between;font:600 18px var(--f1);margin-bottom:8px}
.order{background:#fff;border-radius:24px;padding:14px;text-align:center;box-shadow:0 4px 0 #E8DDF5}
.order .big{font:600 26px/1.2 var(--f1)}
.order .play{margin-top:8px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.choices.c2{grid-template-columns:repeat(2,1fr)}
.choice{background:#fff;border-radius:22px;padding:12px 4px;font:600 16px var(--f1);box-shadow:0 5px 0 #D7CBEE;display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid transparent}
.choice .e{font-size:44px;line-height:1.1}
.choice.right{background:#D7F8E9;border-color:var(--teal)}
.choice.wrong{background:#FFE0E5;border-color:var(--red);animation:shake .4s}
.tag{background:#FFF3B0;border:3px dashed #D79F10;border-radius:12px;font:600 26px var(--f1);padding:10px 4px;text-align:center}
.shelfrow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.shelf{background:#DDEBFF;border-radius:18px;padding:10px 4px;text-align:center;font:600 16px var(--f1);box-shadow:0 5px 0 #A9C3EA;border:3px solid transparent}
.shelf .e{font-size:38px;display:block}
.jobcard{display:flex;align-items:center;gap:12px;background:#fff;border-radius:22px;padding:12px 14px;margin-bottom:10px;box-shadow:0 4px 0 #E8DDF5;width:100%;text-align:left}
.jobcard .em{font-size:38px}
.jobcard b{font:600 20px var(--f1);display:block}
.jobcard small{font-weight:800;color:#8A7AA6;display:block;line-height:1.2}
.jobcard .pay{margin-left:auto;font:600 17px var(--f1);white-space:nowrap}
.jobcard.lock{opacity:.5}

/* sadie hint bubble */
.hintbox{margin-top:10px;background:#FFF3B0;border-radius:18px;padding:10px 14px;font:700 17px var(--f2);display:flex;gap:10px;align-items:center;animation:rise .25s}

/* passeio de autocarro */
#ride{position:absolute;inset:0;z-index:45;background:#53C4FF;overflow:hidden}
#ride svg{position:absolute;inset:0;width:100%;height:100%}
#ride .rideFar{animation:rideFar 6s linear infinite}
#ride .rideRoad{animation:rideRoad 1.1s linear infinite}
#ride .bobbus{animation:bob .35s ease-in-out infinite alternate}
@keyframes rideFar{from{transform:translateX(0)}to{transform:translateX(-360px)}}
@keyframes rideRoad{from{transform:translateX(0)}to{transform:translateX(-90px)}}
@keyframes bob{to{transform:translateY(-4px)}}
#ride .cap{position:absolute;left:0;right:0;top:18%;text-align:center;font:600 34px var(--f1);color:#fff;text-shadow:0 3px 0 rgba(43,27,61,.4)}

/* ---------- animações dos personagens ---------- */
.ch .bd,.ch .hd,.ch .lg,.ch .arm,.dogsit .tail{transform-box:fill-box}
.ch .bd{transform-origin:50% 100%;animation:idle 3.2s ease-in-out infinite}
.ch .hd{transform-origin:50% 100%}
.ch .lg{transform-origin:50% 0}
.ch .arm{transform-origin:50% 8%}
@keyframes idle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
.ch.walking .bd{animation:hop .36s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ch.walking .lg.l{animation:legA .36s ease-in-out infinite}
.ch.walking .lg.r{animation:legB .36s ease-in-out infinite}
.ch.walking .arm.l{animation:legB .36s ease-in-out infinite}
.ch.walking .arm.r{animation:legA .36s ease-in-out infinite}
@keyframes legA{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(22deg)}}
@keyframes legB{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-22deg)}}
.ch.talk .hd{animation:talk .3s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-3px) rotate(3deg)}}
.ch.cheer .arm{animation:cheer .3s ease-in-out infinite alternate}
@keyframes cheer{from{transform:rotate(0)}to{transform:rotate(160deg)}}
.dogsit .tail{transform-origin:0% 100%;animation:wag .35s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.dogsit .hd{transform-origin:50% 90%;animation:dhead 2.6s ease-in-out infinite}
@keyframes dhead{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.dogsleep .bd{animation:breathe 2.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,1.06)}}
.zzz{animation:zz 2.6s ease-in-out infinite}
@keyframes zz{0%{opacity:0;transform:translate(0,6px)}40%{opacity:1}100%{opacity:0;transform:translate(8px,-14px)}}
.cloud{animation:drift 40s linear infinite alternate}
.cloud.c1{animation-duration:55s}.cloud.c2{animation-duration:48s}
@keyframes drift{from{translate:-40px 0}to{translate:80px 0}}
.bus{animation:busgo 38s linear infinite}
@keyframes busgo{0%{transform:translateX(-300px)}42%{transform:translateX(640px)}50%{transform:translateX(640px)}100%{transform:translateX(1200px)}}
.spark{animation:spark 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes spark{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.tapfx{animation:tapfx .6s ease-out forwards;transform-box:fill-box;transform-origin:50% 50%}
@keyframes tapfx{from{transform:scale(.3);opacity:.9}to{transform:scale(1.6);opacity:0}}
.wordpop{animation:wordpop 1.8s ease-out forwards}
@keyframes wordpop{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
.petal{animation:petal 5s ease-in-out infinite}
@keyframes petal{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media (min-width:760px){
  #stage{max-width:520px}
  #hud,#dock{max-width:520px;margin:0 auto}
  .panel{max-width:520px;margin:0 auto;width:100%;border-radius:30px}
  #sheet{align-items:center}
}
@media (prefers-reduced-motion:reduce){.bus,.cloud{animation:none}}

/* ---------- escolha de jogador ---------- */
#picker{background:linear-gradient(160deg,#FFC83D 0%,#FF8E5A 40%,#FF4F9A 80%,#7B5CFF 100%);overflow:auto;display:flex;justify-content:center}
.pbox{width:min(92vw,420px);padding:calc(26px + var(--safe-t)) 0 30px;margin:auto 0}
.pbox h1{font:600 34px var(--f1);color:#fff;text-align:center;margin:0 0 18px;text-shadow:0 3px 0 rgba(43,27,61,.25)}
.pbox .lead{color:#fff;text-align:center}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{background:#fff;border-radius:26px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 6px 0 rgba(43,27,61,.22);font-family:var(--f1)}
.pcard:first-child{grid-column:1/3;flex-direction:row;justify-content:center;gap:16px;padding:16px}
.pcard:first-child img{width:96px;height:96px}
.pcard img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:4px solid #FFC83D}
.pcard b{font-size:22px;font-weight:600}
.pcard small{font:800 13px var(--f2);color:#8A7AA6;display:block}
.pcard .plus{width:72px;height:72px;border-radius:50%;background:#EFE8FA;color:var(--violet);font-size:36px;display:flex;align-items:center;justify-content:center}
.pcard.empty{background:rgba(255,255,255,.75)}
.pcard:active{transform:translateY(3px)}
.pname{width:100%;font:700 24px var(--f2);padding:14px;border-radius:20px;border:0;text-align:center;outline:none;user-select:text;-webkit-user-select:text;margin-bottom:14px}
.pfaces{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
.pfaces button{width:62px;height:62px;border-radius:50%;padding:0;background:#fff;border:4px solid transparent;overflow:hidden}
.pfaces button.on{border-color:var(--violet);transform:scale(1.12)}
.pfaces img{width:100%;height:100%;object-fit:cover}