/* Mauspi Pet: panel mascota.exe, minijuego de entrenar y peleas */
.pspr{display:inline-block;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle;animation:pspr var(--d) steps(var(--n)) infinite}
.pspr.once{animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes pspr{from{background-position-x:0}to{background-position-x:var(--to)}}
.pscreen{position:relative;height:140px;border:var(--line);border-radius:10px;background:#9fd86a url(/pet/bg-campo.png) center 70%/cover;image-rendering:pixelated;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}
.pscreen::before{content:"";position:absolute;inset:0;background:#0b1a3a;opacity:0;transition:opacity .6s;pointer-events:none}
.pscreen.night::before{opacity:.55}
.pscreen>*{position:relative}
.pscreen .walk{filter:drop-shadow(0 3px 0 rgba(22,36,29,.25))}
.pscreen .walk{animation:pwalk 9s ease-in-out infinite;display:inline-block}
.pscreen.night .walk,.pscreen .walk.still{animation:none}
@keyframes pwalk{0%,100%{transform:translateX(-34px)}45%{transform:translateX(34px)}50%{transform:translateX(34px) scaleX(-1)}95%{transform:translateX(-34px) scaleX(-1)}}
.pscreen .poo{position:absolute!important;bottom:8px;font-size:1rem}
.pscreen .ico2{position:absolute!important;top:6px;right:8px;font-size:1.1rem}
.pscreen .lbl{position:absolute!important;top:6px;left:8px;font-family:var(--px);font-size:.55rem;text-transform:uppercase;background:var(--paper);border:2px solid var(--ink);border-radius:5px;padding:0 5px}
.pscreen .zz{position:absolute!important;top:22px;left:50%;color:var(--cream);font-family:var(--px);animation:pzz 2.4s linear infinite}
@keyframes pzz{0%{transform:translate(0,10px);opacity:0}30%{opacity:1}100%{transform:translate(20px,-14px);opacity:0}}
.pscreen.flash{animation:pflash .9s 3}
@keyframes pflash{50%{filter:brightness(1.8)}}
.pname{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-family:var(--round);font-weight:700}
.pname small{font-family:var(--px);font-size:.55rem;text-transform:uppercase;opacity:.7}
.pstats{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;font-size:.78rem;margin-top:4px}
.pstats b{font-weight:500;opacity:.7}
.pstats .h{letter-spacing:1px}
.pbtns{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:9px}
.pbtns button{border:var(--line);border-radius:9px;background:var(--cream);font-size:1.05rem;height:34px;cursor:pointer;box-shadow:0 2px 0 var(--ink);padding:0}
.pbtns button:active{transform:translateY(2px);box-shadow:none}
.pbtns button:disabled{opacity:.4;cursor:default}
.peggs{display:flex;justify-content:space-around;margin:6px 0}
.peggs button{border:var(--line);border-radius:10px;background:#cfe3b0;padding:8px 6px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.peggs button:hover{transform:translateY(-2px)}
.ptrain{margin-top:9px;border:var(--line);border-radius:10px;padding:8px;background:var(--cream);text-align:center}
.ptrain .track{position:relative;height:18px;border:2px solid var(--ink);border-radius:9px;background:var(--paper);margin:6px 0;overflow:hidden}
.ptrain .zone{position:absolute;top:0;bottom:0;background:var(--lime)}
.ptrain .mark{position:absolute;top:-2px;bottom:-2px;width:4px;background:var(--ink)}
.pwho{display:inline-flex;align-items:center;gap:3px}
.pvs{border:2px solid var(--ink);border-radius:6px;background:var(--pink);font-size:.7rem;line-height:1;padding:2px 4px;cursor:pointer}
/* pelea */
.pfight{position:fixed;inset:0;z-index:90;background:rgba(22,36,29,.7);display:grid;place-items:center;padding:16px}
.pfight .win{width:100%;max-width:460px}
.parena{position:relative;height:190px;border:var(--line);border-radius:10px;background:#7cc24f url(/pet/bg-rancho.png) center 80%/cover;image-rendering:pixelated;display:flex;justify-content:space-between;align-items:flex-end;padding:0 18px 22px;overflow:hidden}
.parena .side{display:flex;flex-direction:column;align-items:center;gap:6px;width:46%}
.parena .side .sp{height:110px;display:flex;align-items:flex-end;justify-content:center}
.parena .side.r .sp{transform:scaleX(-1)}
.parena .hp{font-size:.8rem;letter-spacing:1px}
.parena .hp,.parena .nk{background:rgba(255,253,244,.85);border-radius:6px;padding:0 6px}
.parena .nk{font-family:var(--round);font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.parena .hit{animation:phit .45s}
@keyframes phit{0%,100%{transform:translateX(0);filter:none}25%{transform:translateX(-7px);filter:brightness(2.2)}75%{transform:translateX(7px)}}
.parena .lunge{animation:plunge .45s}
@keyframes plunge{50%{transform:translateX(22px)}}
.parena .side.r .lunge{animation-name:plunger}
@keyframes plunger{50%{transform:translateX(-22px)}}
.pmsg{text-align:center;font-family:var(--round);font-weight:700;font-size:1.1rem;margin:10px 0 4px;min-height:1.5em}
.prow{display:flex;gap:8px;justify-content:center;margin-top:8px}
.pscreen .tomb{width:34px;height:42px;margin-left:-8px;background:#a7b0aa;border:2px solid var(--ink);border-radius:16px 16px 3px 3px;display:grid;place-items:center;font-family:var(--px);font-size:.55rem;box-shadow:inset -4px 0 0 rgba(0,0,0,.15)}
/* chacra */
.cscene{position:relative;width:100%;aspect-ratio:640/384;border:var(--line);border-radius:10px;overflow:hidden;background:#4a7a32}
.cstage{position:absolute;left:0;top:0;width:640px;height:384px;transform-origin:0 0;image-rendering:pixelated}
.cstage .cbg{position:absolute;inset:0;width:640px;height:384px;image-rendering:pixelated}
.cit{position:absolute;padding:0;border:0;background:none;line-height:0}
button.cit{cursor:pointer}
.cit img{image-rendering:pixelated;display:block}
button.cit:hover,button.csp:hover{filter:brightness(1.12) drop-shadow(0 0 2px #fff)}
.csp{position:absolute;display:block;padding:0;border:0;background-color:transparent;background-repeat:no-repeat;image-rendering:pixelated;line-height:0}
button.csp{cursor:pointer}
.caspas{width:128px;height:128px;background-image:url(/pet/chacra/lpc/aspas.png);animation:caspas 1.6s steps(8) infinite;pointer-events:none}
@keyframes caspas{to{background-position-x:-1024px}}
.cbub{position:absolute;width:210px;background:var(--paper);border:2px solid var(--ink);border-radius:7px;padding:5px 7px;font-size:10.5px;line-height:1.35;z-index:999;image-rendering:auto;box-shadow:2px 2px 0 var(--ink)}
.cbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0;font-family:var(--round);font-weight:700;font-size:1.05rem}
.cbar .btn{margin-left:auto}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ccard{border:var(--line);border-radius:10px;padding:9px 11px;background:var(--cream);display:flex;flex-direction:column;gap:5px;font-size:.86rem}
.ccard b{font-family:var(--round);font-size:1rem}
.ccard .btn{align-self:flex-start;white-space:nowrap}
.ccard .prow{flex-wrap:wrap}
.ccard.flash{animation:pflash .9s 2}
.ch3{font-family:var(--round);margin:14px 0 6px}
.pmoney{display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:.8rem;margin-top:6px}
.pmoney a{font-family:var(--round);font-weight:700}