/* =============================
   css/scenes/range.css
   ============================= */
/* ===== cena: estande de tiro (fase 7) ===== */
#scene-range .world{left:0;top:0;width:360px;height:640px;overflow:hidden}
#scene-range .world>*{position:absolute}
#scene-range .bg{left:0;top:0;width:360px;height:640px}
#scene-range .headcard{left:8px;width:196px;top:8px;background:#fff;z-index:9}
#scene-range .headcard b{color:#7a2b1c}
#scene-range .bal{left:12px;right:12px;top:68px;z-index:8}
#scene-range .char.sergeant{left:106px;top:332px;width:252px;height:242px;z-index:2}
#scene-range .bench{left:0;top:520px;width:360px;height:120px;z-index:3}
#scene-range .char.h{left:0;bottom:6px;width:124px;height:186px;z-index:4}
#scene-range .tag{z-index:5}
#scene-range .th{left:8px;top:420px;transform:rotate(-4deg)}
#scene-range .tv{right:10px;top:480px;transform:rotate(3deg);background:#cdb98a;z-index:2}

/* plaquinhas penduradas */
#scene-range .plates,#scene-range .stamps{left:0;top:0;width:360px;height:640px;pointer-events:none}
#scene-range .plates>.plate,#scene-range .stamps>*{position:absolute}
#scene-range .plate{width:162px;height:64px;transform-origin:50% 0;z-index:3;animation:plateIn .55s cubic-bezier(.2,1.4,.4,1) backwards,plateSwing 3.2s ease-in-out var(--d) infinite alternate}
#scene-range .plate:nth-child(2){animation-delay:.12s,var(--d)}
#scene-range .plate:nth-child(3){animation-delay:.24s,var(--d)}
#scene-range .plate:nth-child(4){animation-delay:.36s,var(--d)}
#scene-range .plate:nth-child(5){animation-delay:.48s,var(--d)}
#scene-range .plsvg{display:block;width:162px;height:64px;filter:drop-shadow(3px 4px 0 #0005)}
#scene-range .plate.hit{animation:plateFall .8s cubic-bezier(.5,0,1,.6) forwards}
@keyframes plateIn{from{transform:translateY(-190px) rotate(8deg)}}
@keyframes plateSwing{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes plateFall{0%{transform:rotate(0)}25%{transform:rotate(-14deg) translateY(-8px)}100%{transform:rotate(38deg) translateY(520px);opacity:0}}
#scene-range .stampx{padding:2px 10px;border:4px solid #e63946;border-radius:8px;color:#e63946;background:#fffe;font:900 24px/1 "PDDTitle",Impact,sans-serif;letter-spacing:1px;
  transform:rotate(var(--r));animation:stampIn2 .25s ease-out .1s backwards;z-index:4;white-space:nowrap}
@keyframes stampIn2{from{transform:rotate(var(--r)) scale(2.4);opacity:0}}

/* HUD, mira, pedra */
#scene-range .hud{left:8px;top:70px;z-index:9;background:#1b1b22;color:#ffd93b;border:3px solid var(--k);border-radius:10px;padding:2px 10px;font:900 15px "PDDText","Comic Sans MS",sans-serif;box-shadow:3px 3px 0 var(--k)}
#scene-range .hud b{font:900 20px "PDDTitle",Impact,sans-serif;color:#fff}
#scene-range .aim{left:0;top:0;width:80px;height:80px;z-index:7;pointer-events:none;will-change:transform}
#scene-range .aimsvg{display:block;width:80px;height:80px;filter:drop-shadow(0 0 4px #0008)}
#scene-range .fly{left:0;top:0;width:360px;height:640px;z-index:7;pointer-events:none}
#scene-range .stone{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d4dae0,#8a96a0 60%,#58626c);border:2px solid var(--k);box-sizing:border-box}
#scene-range .miss{width:80px;text-align:center;z-index:8;pointer-events:none;font:900 22px/1 "PDDTitle",Impact,sans-serif;color:#ffd93b;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 -2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000}
#scene-range .miss.pop{animation:missUp .7s ease-out forwards}
@keyframes missUp{from{transform:translateY(8px) scale(.6);opacity:0}25%{opacity:1;transform:translateY(0) scale(1.15)}to{transform:translateY(-26px);opacity:0}}

/* estilingue em primeira pessoa */
#scene-range .slwrap{left:80px;top:446px;width:200px;height:190px;z-index:6;pointer-events:none;transform-origin:50% 100%}
#scene-range .slsvg{display:block;width:200px;height:190px}
#scene-range .slwrap.shot{animation:recoil .32s ease-out}
#scene-range .slwrap.shot .stn{visibility:hidden;animation:stnBack 0s .26s forwards}
@keyframes stnBack{to{visibility:visible}}
@keyframes recoil{0%{transform:translateY(0)}20%{transform:translateY(14px) scale(.97)}60%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* faixa de vitória */
#scene-range .banner{left:20px;right:20px;top:200px;z-index:10;text-align:center;padding:14px 8px;background:#fffd;border:6px solid #e63946;border-radius:16px;color:#e63946;
  font:900 33px/1.05 "PDDTitle",Impact,sans-serif;letter-spacing:1px;transform:rotate(-4deg);box-shadow:6px 6px 0 var(--k);animation:bannerIn .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes bannerIn{from{transform:rotate(-4deg) scale(2.6);opacity:0}}

/* congelado: o MUNDO fica cinza e parado; a caixa de Deus fica fora dele */
#scene-range.frozen .world{filter:grayscale(1) contrast(.9) brightness(.7);transition:filter 1.2s}
#scene-range.frozen .world *{animation-play-state:paused!important}
#scene-range .god{left:0;top:0;width:360px;height:640px;z-index:20;background:radial-gradient(circle at 50% 38%,#fff3 0,#0000 55%)}
#scene-range .rays{left:-80px;top:-10px;width:520px;height:520px;position:absolute;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#fff1b0 0 7deg,#fff0 7deg 18deg);opacity:.35;
  -webkit-mask:radial-gradient(circle,#000 0,#0000 68%);mask:radial-gradient(circle,#000 0,#0000 68%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#scene-range .gbox{position:absolute;left:24px;right:24px;top:190px;padding:18px 16px 20px;text-align:center;
  background:linear-gradient(#2a1e46,#171028);border:5px solid #ffd93b;border-radius:18px;
  box-shadow:0 0 0 3px #1b1b22,0 0 36px 8px #ffd93b99,inset 0 0 24px #ffd93b33;animation:godIn 1.1s ease-out}
@keyframes godIn{from{transform:scale(.7);opacity:0;filter:blur(8px)}}
#scene-range .gt{font:900 21px/1.1 "PDDTitle",Impact,sans-serif;letter-spacing:1px;color:#ffd93b;min-height:48px;
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 3px 0 #000,0 -3px 0 #000,3px 0 0 #000,-3px 0 0 #000}
#scene-range .gb{margin-top:10px;font:700 16px/1.35 "PDDText","Comic Sans MS",sans-serif;color:#fff;min-height:118px;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 0 #000}
#scene-range>.next{z-index:30}