/* Target Range (PC only, boy version): first-person toy shooting range. Class prefix tp-. */
.tp { background-size: cover; background-position: center; overflow: hidden; cursor: none; --bc: #ff9d3a; }
.tp.shake { animation: tp-shake .12s ease-out; }
@keyframes tp-shake { 0% { transform: translate(0, 0); } 40% { transform: translate(-3px, 5px); } 100% { transform: translate(0, 0); } }
@media (hover: none) { .tp { cursor: auto; } .tp .tp-cross { display: none; } }

/* layers: sky (flying plates), back row (movers, further away), front row (targets popping up behind the counter), effects */
.tp-sky { position: absolute; inset: 0; overflow: hidden; z-index: 3; }
.tp-row { position: absolute; left: 0; right: 0; overflow: hidden; }
.tp-back { z-index: 4; top: calc(49% - var(--ts) * .82); height: calc(var(--ts) * .82 + 4px); }
.tp-front { z-index: 5; top: calc(var(--counter) - var(--ts)); height: calc(var(--ts) + 4px); }
.tp { --counter: 60%; }
.tp[data-range="fair"] { --counter: 66%; }
.tp-target { position: absolute; bottom: 0; width: var(--ts); height: var(--ts); transform: translate(-50%, 106%); transition: transform .32s cubic-bezier(.2, 1.5, .4, 1); }
.tp-target.up { transform: translate(-50%, 0); }
.tp-target img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 5px rgba(0,0,0,.25)); }
.tp-mover { left: 0; top: 0; bottom: auto; transition: none; transform: translate(-200px, 0); }
.tp-t-plate img { object-position: center; }
.tp-t-teddy img { animation: tp-wave 1s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes tp-wave { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.tp-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.tp-x { position: absolute; pointer-events: none; }

/* the blaster the player holds, swinging with the mouse and kicking back on every shot */
.tp-blaster { position: absolute; left: 50%; bottom: -5%; width: clamp(170px, 34vh, 340px); z-index: 12; pointer-events: none; transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--dx, 0px))) rotate(var(--rot, 0deg)); transition: transform .08s linear; }
.tp-blaster img { width: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.tp-blaster.kick img { animation: tp-kick .14s ease-out; }
@keyframes tp-kick { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(26px) scale(.96); } 100% { transform: translateY(0) scale(1); } }
.tp-flash { position: absolute; left: 50%; top: 2%; width: 90px; height: 90px; margin-left: -45px; margin-top: -45px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, #ffe066 19% 40%, rgba(255,160,40,.7) 41% 60%, transparent 62%); }
.tp-flash.on { animation: tp-flash .13s ease-out; }
@keyframes tp-flash { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } }

/* crosshair follows the mouse (the real cursor is hidden) */
.tp-cross { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; z-index: 20; pointer-events: none; transition: opacity .15s; }
.tp-cross.off { opacity: 0; }
.tp-cross svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--bc); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tp-cross svg .dot { fill: var(--bc); stroke: none; }
.tp-cross.recoil svg { animation: tp-recoil .16s ease-out; }
@keyframes tp-recoil { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* projectiles and impacts */
.tp-proj { transform: translate(-50%, -50%); }
.tp-proj-dart { width: 16px; height: 50px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #ff7a1a 0 28%, #2f6bff 28%); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.tp-proj-rocket { width: 22px; height: 58px; border-radius: 11px 11px 5px 5px; background: linear-gradient(180deg, #ffd93d 0 25%, #ff3b3b 25%); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.tp-proj-rocket::after { content: ""; position: absolute; left: 50%; bottom: -22px; width: 18px; height: 26px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: radial-gradient(circle at 50% 20%, #fff, #ffb020 50%, transparent 75%); }
.tp-beam { height: 7px; margin-top: -3px; border-radius: 4px; transform-origin: 0 50%; background: var(--bc); box-shadow: 0 0 10px var(--bc), 0 0 22px var(--bc); animation: tp-beam .16s ease-out forwards; }
@keyframes tp-beam { 0% { opacity: 1; } 100% { opacity: 0; } }
.tp-hitmark { width: 0; height: 0; animation: tp-hitmark .35s ease-out forwards; }
.tp-hitmark::before, .tp-hitmark::after { content: ""; position: absolute; left: -30px; top: -4px; width: 60px; height: 8px; border-radius: 4px; transform: rotate(45deg);
  background: linear-gradient(90deg, #fff 0 32%, transparent 32% 68%, #fff 68%); filter: drop-shadow(0 0 2px rgba(0,0,0,.7)); }
.tp-hitmark::after { transform: rotate(-45deg); }
@keyframes tp-hitmark { 0% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
.tp-plus { font-size: 44px; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 6px rgba(0,0,0,.4); transform: translate(-50%, -50%); animation: rise .8s ease-out forwards; }
.tp-miss { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 4px solid rgba(255,255,255,.9); animation: tp-hitmark .4s ease-out forwards; }
.tp-puff { width: 60px; height: 40px; margin: -20px 0 0 -30px; border-radius: 50%; background: radial-gradient(circle, rgba(220,200,160,.9), rgba(220,200,160,0) 70%); animation: tp-puff .5s ease-out forwards; }
@keyframes tp-puff { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6) translateY(-14px); opacity: 0; } }
.tp-boom { width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); border-radius: 50%; border: 10px solid #ffd93d;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,170,40,.6) 45%, rgba(255,90,40,0) 70%); animation: tp-boom .55s ease-out forwards; }
@keyframes tp-boom { 0% { transform: scale(.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.tp-smoke { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle, rgba(120,120,130,.85), rgba(120,120,130,0) 70%); animation: tp-drift .7s ease-out forwards; }
@keyframes tp-drift { 0% { transform: translate(0, 0) scale(.5); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; } }
.tp-spark { width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 6px #ffe066; animation: tp-drift .45s ease-out forwards; }
.tp-shard { width: 22px; height: 22px; margin: -11px 0 0 -11px; animation: tp-shard .8s ease-in forwards; box-shadow: inset 0 0 4px rgba(255,255,255,.6); }
@keyframes tp-shard { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 50% { transform: translate(calc(var(--dx) * .7), var(--dy)) rotate(calc(var(--rot) / 2)); opacity: 1; } 100% { transform: translate(var(--dx), 280px) rotate(var(--rot)); opacity: .1; } }

/* targets after being shot (copied into the effects layer so they can fly past the counter) */
.tp-shot img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 6px 5px rgba(0,0,0,.25)); }
.tp-shot-plate img { object-position: center; }
.tp-hole { position: absolute; width: 17%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #101010 0 42%, #3b3b3b 43% 55%, transparent 57%); }
.tp-hole::before { content: ""; position: absolute; inset: -28%; border-radius: 50%; border: 3px dashed rgba(255,255,255,.95); }
.tp-hole::after { content: ""; position: absolute; left: 50%; top: -70%; width: 2px; height: 240%; margin-left: -1px; background: linear-gradient(180deg, transparent, #222 30% 70%, transparent); transform: rotate(35deg); box-shadow: 18px 0 0 -0px transparent; }
.tp-wobble { animation: tp-wobble .45s ease-out; transform-origin: 50% 100%; }
@keyframes tp-wobble { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-7deg) scale(.96); } 50% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
.tp-fall { transition: transform .5s ease-in, opacity .5s; transform: perspective(600px) rotateX(-95deg); transform-origin: 50% 100%; opacity: .3; }
.tp-knock { animation: tp-knock .85s ease-in forwards; }
@keyframes tp-knock { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 35% { transform: translate(calc(var(--dx) * .5), -140px) rotate(220deg); opacity: 1; } 100% { transform: translate(var(--dx), 300px) rotate(600deg); opacity: .2; } }
.tp-flip { animation: tp-flip .75s ease-in forwards; }
@keyframes tp-flip { 0% { transform: rotate(0) translateY(0); } 40% { transform: rotate(140deg) translateY(-30px); } 100% { transform: rotate(200deg) translateY(300px); opacity: 0; } }
.tp-splat { animation: tp-splat .6s ease-out forwards; transform-origin: 50% 100%; }
@keyframes tp-splat { 0% { transform: scale(1, 1); } 30% { transform: scale(1.4, .45); } 100% { transform: scale(0, 0); opacity: 0; } }
.tp-splatmark { width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 45% 55% 50% 40% / 55% 45% 55% 45%; background: radial-gradient(circle, rgba(120,230,90,.95), rgba(120,230,90,.5) 60%, rgba(120,230,90,0) 72%); animation: tp-puff .9s ease-out forwards; }
.tp-sad { animation: tp-sad .9s ease-in forwards; transform-origin: 50% 100%; }
@keyframes tp-sad { 0% { transform: rotate(0); } 15% { transform: rotate(-10deg); } 30% { transform: rotate(10deg); } 45% { transform: rotate(-8deg); } 60% { transform: rotate(0) translateY(0); } 100% { transform: translateY(110%); } }
.tp-no { width: 80px; height: 80px; margin: -40px 0 0 -40px; animation: rise .9s ease-out forwards; }
.tp-no .ico { width: 100%; height: 100%; }

/* score board: timer ring, stars, streak, best */
.tp-timer { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow); background: conic-gradient(var(--blue) calc(var(--p, 1) * 360deg), #e4e4ee 0); }
.tp-timer i { width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.tp-timer.late { background: conic-gradient(#ff5b5b calc(var(--p, 1) * 360deg), #e4e4ee 0); animation: drumpulse .4s ease-in-out infinite alternate; }
.tp-streak b { display: inline-block; padding: 4px 14px; border-radius: 30px; background: linear-gradient(90deg, #ff7a1a, #ffd93d); color: #fff; font-size: 30px; text-shadow: 0 2px 0 rgba(0,0,0,.25); box-shadow: var(--shadow); animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }

/* magazine: one picture per shot left; click it (or the space bar) to reload; it blinks when empty */
.tp-ammo { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 14; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 26px; background: rgba(255,255,255,.9); border: 4px solid #fff; box-shadow: var(--shadow); cursor: none; transition: border-color .2s; }
.tp-mag { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 232px; }
.tp-mag img { width: 34px; height: 34px; object-fit: contain; transition: opacity .12s, transform .12s; }
.tp-mag img.used { opacity: .15; filter: grayscale(1); transform: scale(.7); }
.tp-reloadbar { width: 100%; height: 10px; border-radius: 5px; background: #e4e4ee; overflow: hidden; opacity: 0; transition: opacity .15s; }
.tp-reloadbar i { display: block; height: 100%; width: 0; background: var(--bc); }
.tp-ammo.reloading .tp-reloadbar { opacity: 1; }
.tp-ammo.empty { border-color: #ff5b5b; animation: tp-blink .45s ease-in-out infinite alternate; }
@keyframes tp-blink { from { box-shadow: var(--shadow); } to { box-shadow: 0 0 0 6px #ff5b5b, var(--shadow); } }

/* start / results panel with the blaster and range shelves */
.tp-panel { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(40,30,70,.45); animation: fadein .18s ease-out; }
.tp-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 34px 24px; border-radius: 34px; background: #fff; box-shadow: var(--shadow); max-width: 94vw; max-height: 94vh; overflow: auto; animation: slidein .25s ease-out; }
.tp-result { display: flex; align-items: center; gap: 28px; }
.tp-res-score { display: flex; align-items: center; gap: 8px; }
.tp-res-num { font-size: 76px; }
.tp-star { width: 58px; height: 58px; }
.tp-acc { width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: var(--ink);
  background: radial-gradient(circle, #fff 58%, transparent 60%), conic-gradient(var(--green) calc(var(--p, 0) * 360deg), #e4e4ee 0); }
.tp-shelf { display: flex; gap: 14px; }
.tp-pick { position: relative; width: 128px; height: 100px; border-radius: 22px; background: #fff; border: 5px solid #e4e4ee; box-shadow: var(--shadow); padding: 6px; overflow: hidden; display: grid; place-items: center; transition: transform .12s; cursor: none; }
.tp-pick:active { transform: scale(.94); }
.tp-pick img { width: 100%; height: 100%; object-fit: contain; }
.tp-pick.rg img { object-fit: cover; border-radius: 14px; }
.tp-pick.on { border-color: var(--blue); box-shadow: 0 0 0 5px var(--yellow), var(--shadow); }
.tp-pick.locked img { filter: grayscale(1) opacity(.35); }
.tp-pick .tp-lock { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px; }
.tp-pick.locked::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, #fff 54%, transparent 56%), conic-gradient(var(--green) calc(var(--p, 0) * 360deg), #e4e4ee 0); }
.tp-pick.new { animation: drumpulse .6s ease-in-out infinite alternate; box-shadow: 0 0 0 5px var(--yellow), var(--shadow); }
.tp-pick.shake { animation: tp-nono .3s ease-in-out; }
@keyframes tp-nono { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.tp-total { display: flex; align-items: center; gap: 8px; font-size: 34px; color: var(--ink); }
.tp-total .tp-star { width: 44px; height: 44px; }
.tp-play { width: 112px; height: 112px; cursor: none; }