/* BowlRx Lane Captcha. Everything is scoped under .brx-lane so a host theme
   cannot reach in, and the lane's own colours are fixed - a maple lane is
   maple in light or dark. */

.brx-lane{--brx-lane-a:#e7bd82;--brx-lane-b:#d9a862;--brx-edge:#8a5f2c;
  --brx-gutter:#2a2118;--brx-deck:#1d1711;--brx-ball:#1f3f6b;--brx-ball-hi:#5b86bd;
  max-width:210px;margin:0 0 6px}

.brx-lane *,.brx-lane *::before,.brx-lane *::after{box-sizing:border-box}

.brx-lane-box{position:relative;width:100%;aspect-ratio:5/7;border-radius:6px;container-type:inline-size;
  overflow:hidden;background:var(--brx-gutter);border:1px solid var(--brx-edge);
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.brx-lane-box.brx-locked{cursor:default}

.brx-lane-surface{position:absolute;inset:0 8% 0 8%;
  background:repeating-linear-gradient(90deg,var(--brx-lane-a) 0 5px,var(--brx-lane-b) 5px 10px);
  border-left:1px solid var(--brx-edge);border-right:1px solid var(--brx-edge)}
.brx-deck{position:absolute;inset:0 8% 62% 8%;background:var(--brx-deck);z-index:1;
  box-shadow:inset 0 -8px 12px -7px rgba(0,0,0,.75)}
.brx-foul{position:absolute;left:8%;right:8%;bottom:19%;height:2px;
  background:var(--brx-edge);opacity:.75}
.brx-arrows{position:absolute;left:8%;right:8%;bottom:26%;height:16%;opacity:.5}
.brx-arrows i{position:absolute;width:0;height:0;border-left:3px solid transparent;
  border-right:3px solid transparent;border-bottom:6px solid var(--brx-edge)}

.brx-pin{position:absolute;width:10.5%;aspect-ratio:96/310;
  transform-origin:50% 96%;transform:translateX(-50%) scale(var(--s,1));
  transition:transform .55s cubic-bezier(.33,1.25,.6,1) var(--d,0ms),
             opacity .55s ease var(--d,0ms);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.brx-fallen .brx-pin{opacity:.9;
  transform:translateX(calc(-50% + var(--fx))) translateY(var(--fy))
            scale(var(--s,1)) rotate(var(--fr))}
/* after .brx-fallen so the sweep wins on equal specificity */
.brx-swept .brx-pin{opacity:0;
  transform:translateX(calc(-50% + var(--fx))) translateY(-80%)
            scale(var(--s,1)) rotate(var(--fr))}

.brx-sweeper{position:absolute;left:0;right:0;top:0;height:16%;z-index:5;
  background:linear-gradient(180deg,#44444e 0%,#23232a 55%,#101014 100%);
  border-bottom:2px solid #5d5d68;box-shadow:0 4px 9px -3px rgba(0,0,0,.8);
  transform:translateY(-140%);transition:transform .42s cubic-bezier(.4,0,.5,1)}
.brx-sweeping .brx-sweeper{transform:translateY(380%)}
.brx-swept .brx-sweeper{transform:translateY(-140%)}

/* The ball is a div, not a <button>, because every theme on the network styles
   button elements - Flatsome's customiser alone emits
   button:not(.icon){border-radius:10px!important}, which squared the ball off.
   !important here guards the GEOMETRY only, never a colour a host might want
   to theme: a ball is round, and that is not a site preference. */
.brx-ball{position:absolute;left:50%;bottom:7%;z-index:20;cursor:grab;
  width:19%!important;height:auto!important;aspect-ratio:1!important;
  min-width:0!important;min-height:0!important;max-width:none!important;
  margin:0 0 0 -9.5%!important;border:0!important;padding:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 34% 30%,var(--brx-ball-hi),var(--brx-ball) 62%)!important;
  box-shadow:0 2px 7px rgba(0,0,0,.45)!important;
  font-size:0;line-height:0;touch-action:none;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.brx-ball::after{content:"";position:absolute;left:28%;top:26%;width:14%;height:14%;
  border-radius:50%!important;background:rgba(0,0,0,.5);
  box-shadow:11px 1.5px 0 rgba(0,0,0,.5),5.5px 9px 0 rgba(0,0,0,.5)}
.brx-ball:focus-visible{outline:3px solid #d6a24f;outline-offset:3px}
.brx-ball.brx-rolling{transition:transform .5s cubic-bezier(.4,.05,.6,1);cursor:default}
.brx-ball.brx-snapback{transition:transform .28s ease-out}
.brx-ball.brx-gutterball{transition:transform .8s cubic-bezier(.35,0,.75,1),opacity .3s ease}

.brx-hint{position:absolute;left:0;right:0;bottom:1.5%;text-align:center;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:#f3e4c8;opacity:.78;pointer-events:none;
  font-family:"Oswald",Impact,sans-serif;transition:opacity .2s ease}

.brx-flash{position:absolute;inset:0;z-index:30;display:flex;align-items:center;
  justify-content:center;pointer-events:none;opacity:0;background:rgba(12,6,20,0);
  transition:opacity .25s ease,background .25s ease}
.brx-struck .brx-flash{opacity:1;background:rgba(12,6,20,.38)}
.brx-flash span{font-family:"Oswald",Impact,sans-serif;font-weight:600;
  letter-spacing:.14em;font-size:clamp(15px,7vw,30px);color:#fff;
  transform:scale(.72);line-height:1;
  text-shadow:0 0 5px #fff,0 0 12px #ff2d95,0 0 26px #ff2d95,0 0 46px #7a1ad4}
.brx-struck .brx-flash span{animation:brxflash .62s cubic-bezier(.2,1.5,.5,1) forwards}
@keyframes brxflash{
  0%{transform:scale(.72);opacity:0}
  35%{transform:scale(1.1);opacity:1}
  48%{opacity:.45} 56%{opacity:1} 68%{opacity:.6} 76%{opacity:1}
  100%{transform:scale(1);opacity:1}}

.brx-status{margin:8px 0 0;font-size:14px;min-height:1.3em}
.brx-status.brx-pass{color:#2f6b42;font-weight:600}
.brx-status.brx-fail{color:#9e3528}

@media (prefers-reduced-motion:reduce){
  .brx-pin,.brx-sweeper,.brx-ball.brx-rolling,.brx-ball.brx-snapback,
  .brx-ball.brx-gutterball{transition:none}
  .brx-struck .brx-flash span{animation:none;transform:scale(1)}
}

/* The lane box is a container, so the two things that cannot be expressed as a
   percentage of their own element - the STRIKE wordmark and the finger holes -
   track the lane's real width instead of the viewport's. */
@container (min-width:1px){
  .brx-flash span{font-size:16cqw}
  .brx-ball::after{box-shadow:5.2cqw .7cqw 0 rgba(0,0,0,.5),2.6cqw 4.3cqw 0 rgba(0,0,0,.5)}
}