/* casulo: o PeePee nasce no onboarding. Paredes fibrosas vermelho-escuras que pulsam; quando ele sai por baixo, o casulo fica cinza e resseca (.dead) */
.coc{position:relative;flex:1 1 auto;min-height:360px;margin:10px 12px 0;border-radius:28px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;background:#1A0308;box-shadow:inset 0 0 0 2px rgba(255,90,110,.18)}
.cwall{position:absolute;inset:-6%;background:radial-gradient(60% 46% at 50% 50%,#B3202F 0%,#7A0E1C 45%,#3F0610 78%,#1A0308 100%);animation:cpulse 1.6s ease-in-out infinite;transition:filter 1.8s,transform 1.8s}
.cwall svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes cpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes cdent{0%{transform:scale(1)}40%{transform:scale(1.06,.95)}100%{transform:scale(1)}}
.coc.hitw .cwall{animation:cdent .25s}
.coc.boil .cwall{animation-duration:.5s}
.cwr{opacity:0;transition:opacity 1.8s}
.ctint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.csac{position:absolute;left:50%;top:44%;width:150px;height:170px;margin:-85px 0 0 -75px;pointer-events:none}
.csac .mb{position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,190,200,.38),rgba(255,90,110,.16) 60%,rgba(255,90,110,.05));border:2px solid rgba(255,200,210,.35)}
.csac svg{position:relative;width:100%;height:100%}
.cexit{position:absolute;left:50%;bottom:-18px;width:120px;height:52px;margin-left:-60px;border-radius:50%;background:radial-gradient(ellipse,#000 0 55%,#3F0610 56% 100%);box-shadow:0 0 0 4px #5A0A16;transform:scaleX(.25);transition:transform .3s;pointer-events:none}
.coc.dead .cwall{filter:grayscale(1) brightness(.55) contrast(1.15);transform:scale(.93,.88);animation:none}
.coc.dead .cwr{opacity:1}
.coc.dead .ctint{opacity:0!important}
.coc.dead .ctea{filter:grayscale(1);opacity:.35}
.chud{margin:10px 16px 0;display:flex;align-items:center;gap:10px;font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}
.chud svg{width:30px;height:30px;display:block}
.chud .bar{flex:1;margin:0;height:12px}
.cbub{position:absolute;border-radius:50%;pointer-events:none;z-index:2}
.cweak{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:radial-gradient(circle,#FFE36B,rgba(255,210,63,0) 70%);box-shadow:0 0 18px #FFD23F;animation:tw .8s ease-in-out infinite;pointer-events:none}
.cring{position:absolute;width:70px;height:70px;border-radius:50%;border:4px solid #fff;pointer-events:none;transform:translate(-50%,-50%) scale(.4)}
.cring.full{border-color:#FFD23F;box-shadow:0 0 18px #FFD23F}
.cpore{position:absolute;top:13%;width:84px;height:54px;border-radius:50%;border:4px solid #fff;background:#3F0610;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.cpore i{width:70%;height:70%;border-radius:50%;background:#000}
.cpill{position:absolute;top:calc(100% - 46px);width:60px;height:60px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));z-index:3}
.cpill.drag{transform:translate(-50%,-50%) scale(1.25)}
.cpill svg,.ctool svg{width:100%;height:100%;overflow:visible}
.cov{position:absolute;inset:0;pointer-events:none;z-index:2}
.cov svg{width:100%;height:100%;overflow:visible}
.cten{position:absolute;left:14px;right:14px;top:12px;height:10px;border-radius:9px;background:rgba(0,0,0,.5);overflow:hidden;pointer-events:none;z-index:3}
.cten i{display:block;height:100%;width:0}
.ctool{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;z-index:3;transition:transform .15s}
.cfun{position:absolute;top:20%;width:76px;height:26px;border-radius:50%;background:#000;border:4px solid #E8A070;box-shadow:0 0 14px #C8794A;transform:translate(-50%,-50%);pointer-events:none}
.cstr{position:absolute;width:8px;margin-left:-4px;border-radius:4px;background:linear-gradient(#E8A070,#C8794A);pointer-events:none;z-index:2}
.ctea{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(rgba(232,160,112,.55),rgba(140,70,30,.6));border-top:3px solid rgba(255,220,180,.6);pointer-events:none}
.meterbar.cmb{position:absolute;left:14px;right:14px;bottom:12px;margin:0;height:22px;z-index:3;pointer-events:none}
.stm{animation:stm 2.4s ease-in-out infinite}
@keyframes stm{0%{transform:translateY(6px);opacity:0}40%{opacity:.7}100%{transform:translateY(-14px);opacity:0}}