/* =============================
   css/scenes/gunshop.css
   ============================= */
/* ===== cena: loja de armas (fase 6) ===== */
#scene-gunshop .bg{left:0;top:0;width:360px;height:640px}
#scene-gunshop .headcard{left:8px;width:196px;top:8px;background:#fff}
#scene-gunshop .headcard b{color:#4a5a2b}
#scene-gunshop .bal{left:12px;right:12px;top:68px;z-index:8}

/* cartão do kit */
#scene-gunshop .kit{left:30px;top:174px;width:300px;background:var(--w);border:4px solid var(--k);border-radius:14px;box-shadow:6px 6px 0 var(--k);z-index:6;overflow:hidden}
#scene-gunshop .kit.pop{animation:kitPop .3s ease-out}
#scene-gunshop .kit.shake{animation:kitShake .4s linear}
@keyframes kitPop{from{transform:scale(.6) rotate(-4deg);opacity:0}}
@keyframes kitShake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
#scene-gunshop .kh{font:900 15px "PDDTitle",Impact,sans-serif;letter-spacing:.5px;text-align:center;padding:4px 6px;border-bottom:4px solid var(--k);color:var(--k)}
#scene-gunshop .ks{padding:6px 4px 0;background:repeating-linear-gradient(90deg,#fff 0 80px,#f3ecd6 80px 160px)}
#scene-gunshop .kitsvg{display:block;width:100%;height:auto}
#scene-gunshop .kp{display:flex;justify-content:space-between;align-items:center;padding:3px 12px 4px;border-top:4px solid var(--k);background:#fff}
#scene-gunshop .kp span{font:900 12px "PDDText","Comic Sans MS",sans-serif}
#scene-gunshop .kp b{font:900 24px "PDDTitle",Impact,sans-serif;color:#d90429}
#scene-gunshop .stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);text-align:center;padding:6px 14px;border:5px solid;border-radius:10px;
  font:900 28px/1 "PDDTitle",Impact,sans-serif;letter-spacing:1px;animation:stampIn .25s ease-out;background:#fffd;white-space:nowrap}
#scene-gunshop .stamp small{display:block;font:900 12px "PDDText","Comic Sans MS",sans-serif;letter-spacing:0;margin-top:3px}
#scene-gunshop .stamp.no{color:var(--r);border-color:var(--r)}
#scene-gunshop .stamp.ok{color:#1c8f3a;border-color:#1c8f3a}
@keyframes stampIn{from{transform:translate(-50%,-50%) rotate(-10deg) scale(2.2);opacity:0}}

/* personagens */
#scene-gunshop .char.sergeant{left:106px;top:346px;width:252px;height:242px;z-index:2}
#scene-gunshop .counter{left:0;top:500px;width:360px;height:140px;z-index:3}
#scene-gunshop .char.h{left:0;bottom:6px;width:124px;height:186px;z-index:4}
#scene-gunshop .tag{z-index:5}
#scene-gunshop .th{left:8px;top:420px;transform:rotate(-4deg)}
#scene-gunshop .tv{right:10px;top:470px;transform:rotate(3deg);background:#cdb98a;z-index:2}

/* H sonhando */
#scene-gunshop .dream{left:2px;top:446px;width:124px;height:50px;z-index:6;pointer-events:none}
#scene-gunshop .dream i{position:absolute;font-style:normal;font-size:20px;animation:twinkle .7s ease-in-out infinite alternate}
#scene-gunshop .dream i:nth-child(1){left:2px;top:8px}
#scene-gunshop .dream i:nth-child(2){right:2px;top:6px;animation-delay:.25s}
#scene-gunshop .dream i:nth-child(3){left:50px;top:-8px;font-size:18px;animation-delay:.45s}
@keyframes twinkle{from{transform:scale(.7) rotate(-12deg);opacity:.6}to{transform:scale(1.25) rotate(12deg);opacity:1}}