/*
 * Catrin & Abi® BSL Word Race v0.2.4
 * Race-specific visual layer. Loaded after Games Core so Word Race can now be
 * developed independently without changing Find the Pairs or Letter Match.
 */

/* CENTRE HURDLE CALIBRATION — preserve the verified centre anchor. */
.cag-shell .cag-race-stage .cag-race-lanes{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  z-index:12!important;
}
.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{
  position:absolute!important;
  left:50%!important;
  width:min(42vw,520px)!important;
  height:300px!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  transform-origin:50% 100%!important;
  opacity:1!important;
  filter:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration[data-row="0"]{
  pointer-events:auto!important;
}
.cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-visual{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  opacity:1!important;
  filter:none!important;
  animation:none!important;
  transform:translate(-50%,-50%) scale(var(--cag-perspective-scale,.02))!important;
  transform-origin:50% 88%!important;
  will-change:transform,top!important;
}
.cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-asset{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:50% 100%!important;
  opacity:1!important;
  filter:none!important;
}
.cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-sign,
.cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-label{display:none!important}

/* Distant rows must remain visible. Distance is communicated by scale only. */
.cag-shell .cag-race-stage .cag-hurdle-future,
.cag-shell .cag-race-stage .cag-hurdle-near,
.cag-shell .cag-race-stage .cag-hurdle-pass-behind,
.cag-shell .cag-race-stage .cag-hurdle-cleared{
  opacity:1!important;
  filter:none!important;
}

/* Coins/jewels remain fully opaque too; perspective comes from size and position. */
.cag-shell .cag-race-stage .cag-collectible,
.cag-shell .cag-race-stage .cag-collectible img{
  opacity:1!important;
}

/* Keep clouds high and large, while the sun stays fixed. */
.cag-shell .cag-race-stage .cag-cloud-image{
  width:clamp(230px,24vw,390px)!important;
  max-height:190px!important;
  opacity:1!important;
}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-a{top:2%!important}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-b{top:7%!important}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-c{top:1%!important}

@media(max-width:760px){
  .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:58vw!important;height:235px!important}
  .cag-shell .cag-race-stage .cag-cloud-image{width:220px!important;max-height:120px!important}
}
@media(max-width:520px){
  .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:68vw!important;height:205px!important}
  .cag-shell .cag-race-stage .cag-cloud-image{width:180px!important;max-height:100px!important}
}


/* v0.2.1 runtime recovery + natural cloud motion. */
.cag-shell .cag-race-stage .cag-cloud-image{
  will-change:transform;
  transform-origin:center center!important;
}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-a{left:-24%!important;animation:cag-race-cloud-a 32s linear infinite!important}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-b{left:18%!important;animation:cag-race-cloud-b 43s linear infinite!important}
.cag-shell .cag-race-stage .cag-cloud-image.cloud-c{left:58%!important;animation:cag-race-cloud-c 37s linear infinite!important}
@keyframes cag-race-cloud-a{0%{transform:translate3d(0,0,0) scale(.88)}25%{transform:translate3d(34vw,5px,0) scale(.9)}50%{transform:translate3d(68vw,-3px,0) scale(.88)}75%{transform:translate3d(102vw,4px,0) scale(.9)}100%{transform:translate3d(136vw,0,0) scale(.88)}}
@keyframes cag-race-cloud-b{0%{transform:translate3d(0,0,0) scale(1.04)}25%{transform:translate3d(25vw,-4px,0) scale(1.02)}50%{transform:translate3d(50vw,3px,0) scale(1.04)}75%{transform:translate3d(75vw,-2px,0) scale(1.02)}100%{transform:translate3d(100vw,0,0) scale(1.04)}}
@keyframes cag-race-cloud-c{0%{transform:translate3d(0,0,0) scale(.94)}25%{transform:translate3d(24vw,4px,0) scale(.96)}50%{transform:translate3d(48vw,-4px,0) scale(.94)}75%{transform:translate3d(72vw,2px,0) scale(.96)}100%{transform:translate3d(96vw,0,0) scale(.94)}}
/* Keep calibration hurdles visibly above the photographic track and below Abi. */
.cag-shell .cag-race-stage .cag-race-lanes{z-index:18!important}
.cag-shell .cag-race-stage .cag-runner{z-index:30!important}


/* v0.2.2 depth + jump synchronisation calibration. */
.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{
  width:min(38vw,500px)!important;
  height:280px!important;
}
.cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind{
  pointer-events:none!important;
}
.cag-shell .cag-race-stage .cag-runner.sprite-jump{
  z-index:36!important;
}
@media(max-width:760px){
 .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:50vw!important;height:225px!important}
}
@media(max-width:520px){
 .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:58vw!important;height:195px!important}
}


/* v0.2.3 — modular CSS ordering + runner lane geometry calibration. */
/* The Word Race stylesheet is now explicitly loaded after cag-core-css. */
.cag-shell .cag-race-stage .cag-runner[data-lane="0"]{
  left:31%!important;
  transform:translateX(-50%)!important;
}
.cag-shell .cag-race-stage .cag-runner[data-lane="1"]{
  left:50%!important;
  transform:translateX(-50%)!important;
}
.cag-shell .cag-race-stage .cag-runner[data-lane="2"]{
  left:69%!important;
  transform:translateX(-50%)!important;
}
.cag-shell .cag-race-stage[data-camera-lane="0"] .cag-runner-shadow{left:31%!important}
.cag-shell .cag-race-stage[data-camera-lane="1"] .cag-runner-shadow{left:50%!important}
.cag-shell .cag-race-stage[data-camera-lane="2"] .cag-runner-shadow{left:69%!important}
/* Keep the calibrated centre hurdle larger as it approaches without changing its X anchor. */
.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{
  width:min(42vw,560px)!important;
  height:305px!important;
}
@media(max-width:760px){
 .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:54vw!important;height:240px!important}
}
@media(max-width:520px){
 .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:62vw!important;height:205px!important}
}


/* v0.2.4 horizon-to-camera hurdle calibration. */
.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{
  width:min(44vw,560px)!important;
  height:320px!important;
}
@media(max-width:760px){.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:60vw!important;height:250px!important}}
@media(max-width:520px){.cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{width:70vw!important;height:215px!important}}