/* Shooting Gallery: what only the booth has. The rest comes from /rooms/room.css. */

/* the score, top left */
.sg-score { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top, 0px)); left: calc(78px + env(safe-area-inset-left, 0px)); pointer-events: none;
  display: grid; text-shadow: 0 2px 0 #0008, 0 0 18px #000a; }
.sg-score[hidden] { display: none; }
.sg-score strong { font: 800 46px/1 var(--font); color: #ffe7a0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sg-score small { font-size: 13px; color: #f3e6c8; margin-top: 3px; }

/* the clock and the streak, top right */
.sg-right { position: absolute; z-index: 3; top: calc(84px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); pointer-events: none;
  display: grid; justify-items: end; gap: 8px; }
.sg-right[hidden] { display: none; }
.sg-clock { font: 800 38px/1 var(--font); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #0008, 0 0 14px #000a; }
.sg-clock.low { color: #ff6a50; animation: sgpulse .5s ease-in-out infinite alternate; }
@keyframes sgpulse { to { transform: scale(1.12); } }
.sg-mult { display: grid; justify-items: end; padding: 6px 12px; border-radius: 12px; background: #0009; border: 1px solid #fff2; color: #fff; box-shadow: 0 4px 14px #0006; }
.sg-mult[hidden] { display: none; }
.sg-mult strong { font: 800 26px/1 var(--font); }
.sg-mult small { font-size: 12px; color: #e9dcc0; }
.sg-mult.m2 strong { color: #bff0a8; }
.sg-mult.m3 strong { color: #ffd34a; }
.sg-mult.m4 { border-color: #ffb300aa; box-shadow: 0 0 22px #ffb30066; }
.sg-mult.m4 strong { color: #ffb347; }

/* the rifle's rounds, bottom right */
.sg-rifle { position: absolute; z-index: 3; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #000a; border: 1px solid #fff1; pointer-events: none; }
.sg-rifle[hidden] { display: none; }
.sg-shells { display: flex; gap: 5px; }
.sg-shells i { width: 9px; height: 26px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #e7b55a 0 34%, #b8862f 34% 40%, #c8352a 40%); box-shadow: inset -2px 0 3px #0006, 0 1px 3px #0008;
  transition: opacity .15s, transform .15s; }
.sg-shells i.spent { opacity: .18; transform: translateY(3px); }
.sg-rifle.reloading .sg-shells i { animation: sgload .66s linear; }
@keyframes sgload { from { opacity: .2; } to { opacity: 1; } }
.sg-spare { font: 700 15px var(--font); color: #f3e6c8; font-variant-numeric: tabular-nums; }
.sg-spare[hidden] { display: none; }
.sg-reload { pointer-events: auto; font: 700 14px var(--font); padding: 8px 14px; border-radius: 999px; border: 0; background: #e8c272; color: #1b1308; cursor: pointer; }
.sg-reload[hidden] { display: none; }
@media (max-width: 760px) {
  .sg-score { top: calc(64px + env(safe-area-inset-top, 0px)); left: calc(14px + env(safe-area-inset-left, 0px)); }
  .sg-score strong { font-size: 34px; }
  .sg-right { top: calc(118px + env(safe-area-inset-top, 0px)); }
  .sg-clock { font-size: 28px; }
  .sg-rifle { right: 64px; }
}

/* the sights: drawn over the booth where the mouse is (the pointer itself is hidden) */
canvas.sg-aiming { cursor: none; }
.sg-aim { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
.sg-aim[hidden] { display: none; }
.sg-aim .sg-sights { position: absolute; left: -24px; top: -24px; }
.sg-aim.kick .sg-sights { animation: sgkick .14s ease-out; }
@keyframes sgkick { 0% { transform: scale(1.35) translateY(-4px); } 100% { transform: none; } }
.sg-sights { --sight: #ffeab0; display: block; position: relative; width: 48px; height: 48px; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); }
.sg-sights i, .sg-sights b { position: absolute; inset: 0; margin: auto; }
.sg-sights.ring i { width: 34px; height: 34px; border: 2px solid var(--sight); border-radius: 50%; }
.sg-sights.ring b { width: 5px; height: 5px; background: var(--sight); border-radius: 50%; }
.sg-sights.cross i { width: 44px; height: 1.5px; background: linear-gradient(90deg, var(--sight) 0 40%, transparent 40% 60%, var(--sight) 60%); }
.sg-sights.cross b { width: 1.5px; height: 44px; background: linear-gradient(180deg, var(--sight) 0 40%, transparent 40% 60%, var(--sight) 60%); }
.sg-sights.dot i { width: 26px; height: 26px; border: 1px solid var(--sight); border-radius: 50%; opacity: .7; }
.sg-sights.dot b { width: 8px; height: 8px; background: var(--sight); border-radius: 50%; box-shadow: 0 0 8px var(--sight); }
.sg-sights.scope i { width: 40px; height: 40px; border: 4px double var(--sight); border-radius: 50%; }
.sg-sights.scope b { width: 30px; height: 30px; background: linear-gradient(var(--sight), var(--sight)) center / 1.5px 100% no-repeat, linear-gradient(var(--sight), var(--sight)) center / 100% 1.5px no-repeat; }
.sg-sights.square i { width: 30px; height: 30px; border: 2px solid var(--sight); border-radius: 4px; box-shadow: 0 0 10px var(--sight), inset 0 0 8px var(--sight); }
.sg-sights.square b { width: 4px; height: 4px; background: var(--sight); box-shadow: 0 0 6px var(--sight); }

/* words floating up from a hit */
.sg-pops { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.sg-pop { position: absolute; transform: translate(-50%, -50%); font: 800 22px/1 var(--font); color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 #000a, 0 0 12px #000; animation: sgrise 1.2s cubic-bezier(.2, .8, .3, 1) forwards; }
.sg-pop.m2 { color: #bff0a8; }
.sg-pop.m3 { color: #ffd34a; font-size: 24px; }
.sg-pop.m4 { color: #ffb347; font-size: 26px; }
.sg-pop.bull { font-size: 32px; color: #ffe27a; text-shadow: 0 2px 0 #0009, 0 0 14px #ffb300, 0 0 34px #ff9d00aa; }
.sg-pop.juggle { color: #9fe3ff; }
.sg-pop.time { color: #9fe3ff; font-size: 26px; }
.sg-pop.streak { font-size: 30px; color: #ffd34a; }
.sg-pop.bad { color: #ff6a50; font-size: 26px; }
.sg-pop.miss { color: #ff9a80; font-size: 18px; }
.sg-pop.bomb { font-size: 36px; color: #fff; text-shadow: 0 2px 0 #0009, 0 0 12px #ff5ad1, 0 0 30px #5ad1ff, 0 0 44px #ffe27a; }
.sg-pop.small { font-size: 16px; opacity: .9; }
@keyframes sgrise { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .sg-pop { animation-duration: .01s; animation-delay: 1s; } .sg-aim.kick .sg-sights { animation: none; } }

.sg-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; }
.sg-flash.red { background: radial-gradient(circle, #ff5a2a33, #ff000066); }
.sg-flash.gold { background: radial-gradient(circle, #ffe9a033, #ffc84a00 70%); }
.sg-flash.white { background: radial-gradient(circle, #ffffff22, #fff0 70%); }
.sg-flash.bomb { background: radial-gradient(circle, #ffffffcc, #ffe9a066 35%, #ff5ad133 60%, #5ad1ff00 85%); }
.sg-flash.go { animation: sgflash .7s ease-out forwards; }
@keyframes sgflash { 0% { opacity: 1; } 100% { opacity: 0; } }

.sg-pause { position: absolute; z-index: 4; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #fff3; background: #0008; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px #0006; }
.sg-pause:hover { background: #000b; }
@media (max-width: 760px) { .sg-pause { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: auto; right: 14px; transform: none; } }
.sg-paused { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(14, 10, 8, .92); backdrop-filter: blur(14px); }
.sg-paused[hidden] { display: none; }
.sg-paused strong { font: 400 48px/1 var(--serif, var(--gu-serif)); color: #fff; }

/* the shop's swatches: a booth's stripes over its wall, a sight, a duck */
.swatch-booth { min-height: 90px; height: 100%; position: relative; background: var(--wall); overflow: hidden; }
.swatch-booth i { position: absolute; inset: 0 0 auto; height: 46%; background: repeating-linear-gradient(90deg, var(--stripe) 0 22px, var(--cream) 22px 44px);
  -webkit-mask: radial-gradient(circle at 11px 100%, transparent 10px, #000 11px) 0 0 / 22px 100%; mask: radial-gradient(circle at 11px 100%, transparent 10px, #000 11px) 0 0 / 22px 100%; }
.swatch-booth b { position: absolute; left: 10%; right: 10%; bottom: 18%; height: 4px; background: var(--trim); border-radius: 2px; box-shadow: 0 -14px 0 -1px var(--bulb), 0 0 12px var(--bulb); }
.swatch-booth.neon b { box-shadow: 0 0 10px var(--trim), 0 0 22px var(--trim); }
.swatch-sights { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, #3a2018, #120806); }
.swatch-sights .sg-sights { transform: scale(1.4); }
.swatch-duck { min-height: 90px; height: 100%; display: grid; place-items: center; background: radial-gradient(circle, #4a1612, #1a0605); }
.swatch-duck i { position: relative; width: 74px; height: 40px; border-radius: 50%; background: var(--body); box-shadow: inset -6px -6px 10px #0004; }
.swatch-duck i::before { content: ''; position: absolute; right: -2px; top: -16px; width: 28px; height: 28px; border-radius: 50%; background: var(--head); box-shadow: inset -4px -4px 6px #0003; }
.swatch-duck i::after { content: ''; position: absolute; right: -16px; top: -6px; width: 18px; height: 9px; border-radius: 50%; background: var(--beak); }
.swatch-duck b { position: absolute; left: 18px; top: 10px; width: 30px; height: 16px; border-radius: 50%; background: var(--wing); }
.swatch-duck em { position: absolute; right: 8px; top: -8px; width: 5px; height: 5px; border-radius: 50%; background: #111; box-shadow: 0 0 0 2px #fff; z-index: 1; }
.swatch-duck.chrome i { background: linear-gradient(160deg, #fff, var(--body) 40%, #8a8d96); }