/* * Catrin & Abi® BSL Word Race v0.2.7 * 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}} /* v0.2.6 — corrected ground-plane projection. * v0.2.5's final override was accidentally written with literal \n characters, * so the browser ignored it and retained the old 0.02 inner-sprite scale. * These are real CSS declarations and the hurdle's bottom edge is the ground contact. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ height:auto!important; transform:translate(-50%,-100%)!important; transform-origin:50% 100%!important; overflow:visible!important; max-width:none!important; min-width:0!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-visual{ position:relative!important; display:block!important; left:auto!important; top:auto!important; width:100%!important; height:auto!important; margin:0!important; transform:none!important; transform-origin:50% 100%!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-asset{ display:block!important; width:100%!important; height:auto!important; max-width:none!important; object-fit:contain!important; object-position:50% 100%!important; opacity:1!important; } .cag-shell .cag-race-stage .cag-collectible{ position:absolute!important; opacity:1!important; transform-origin:50% 50%!important; } .cag-shell .cag-race-stage .cag-collectible img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; opacity:1!important; } /* ========================================================= v0.2.7 — TRACK-MATCHED HURDLE GROUND PLANE + FORWARD MOTION ========================================================= */ /* Both photographic track layers share the exact same crop. Their scale animation is anchored at the horizon so the barriers, lane lines and verge expand toward the camera without moving the vanishing point. */ .cag-shell .cag-race-stage .cag-photo-track{ overflow:hidden!important; } .cag-shell .cag-race-stage .cag-track-image{ transform-origin:50% 0%!important; will-change:transform,opacity!important; } .cag-shell .cag-race-stage.is-running .cag-track-image-a{ animation:cag-race-forward-a 1.35s linear infinite!important; } .cag-shell .cag-race-stage.is-running .cag-track-image-b{ animation:cag-race-forward-b 1.35s linear infinite!important; } .cag-shell .cag-race-stage.is-boosting .cag-track-image-a, .cag-shell .cag-race-stage.is-boosting .cag-track-image-b{ animation-duration:.72s!important; } /* Two overlapping zoom cycles hide the reset. This deliberately animates the barriers as well as the track markings because they are baked into one image. */ @keyframes cag-race-forward-a{ 0% {transform:scale(1,1);opacity:1} 62% {opacity:1} 100% {transform:scale(1.075,1.105);opacity:0} } @keyframes cag-race-forward-b{ 0% {transform:scale(1.0375,1.0525);opacity:0} 12% {opacity:1} 50% {transform:scale(1.075,1.105);opacity:1} 51% {transform:scale(1,1);opacity:1} 100% {transform:scale(1.0375,1.0525);opacity:1} } /* Make the ground-contact anchor explicit after every legacy Core rule. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ transform:translate(-50%,-100%)!important; transform-origin:50% 100%!important; height:auto!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-visual, .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-asset{ transform:none!important; transform-origin:50% 100%!important; width:100%!important; height:auto!important; opacity:1!important; } /* Coins/jewels remain on the same projected ground plane and stay opaque. */ .cag-shell .cag-race-stage .cag-collectible, .cag-shell .cag-race-stage .cag-collectible img{ opacity:1!important; } /* Reduced-motion users keep a static photographic track. */ @media(prefers-reduced-motion:reduce){ .cag-shell .cag-race-stage.is-running .cag-track-image-a, .cag-shell .cag-race-stage.is-running .cag-track-image-b{ animation:none!important; } .cag-shell .cag-race-stage .cag-track-image-b{display:none!important} } /* ========================================================= v0.2.8 — SEPARATE TRACK + INDEPENDENT BARRIER MOTION ========================================================= */ /* The new track is a single fixed perspective image. */ .cag-shell .cag-race-stage .cag-track-image-static{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:fill!important; transform:none!important; opacity:1!important; animation:none!important; z-index:1!important; } /* Old v0.2.7 track zoom layers are no longer part of the markup. */ .cag-shell .cag-race-stage .cag-track-image-a, .cag-shell .cag-race-stage .cag-track-image-b{ animation:none!important; display:none!important; } /* Each barrier asset has the same 1535×1024 canvas as the supplied track. Keeping it full-frame preserves the artist-created vanishing point exactly. */ .cag-shell .cag-race-stage .cag-barrier-motion{ position:absolute!important; inset:0!important; overflow:hidden!important; pointer-events:none!important; z-index:3!important; } .cag-shell .cag-race-stage .cag-barrier-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:fill!important; opacity:0!important; will-change:transform,opacity!important; } /* LEFT barrier scales away from its own vanishing point at x≈48%, y≈29%. */ .cag-shell .cag-race-stage .cag-barrier-motion-left .cag-barrier-image{ transform-origin:48% 29.3%!important; } /* RIGHT barrier has a mirrored vanishing point at x≈52.7%, y≈29%. */ .cag-shell .cag-race-stage .cag-barrier-motion-right .cag-barrier-image{ transform-origin:52.7% 29.3%!important; } /* Repeating cross-faded perspective passes. The barrier posts grow outwards/downwards, which makes them look as if they are travelling past Abi while the track/horizon themselves stay fixed. */ .cag-shell .cag-race-stage.is-running .cag-barrier-image.barrier-cycle-a{ animation:cag-barrier-forward-a 1.05s linear infinite!important; } .cag-shell .cag-race-stage.is-running .cag-barrier-image.barrier-cycle-b{ animation:cag-barrier-forward-b 1.05s linear infinite!important; } .cag-shell .cag-race-stage.is-boosting .cag-barrier-image.barrier-cycle-a, .cag-shell .cag-race-stage.is-boosting .cag-barrier-image.barrier-cycle-b{ animation-duration:.62s!important; } @keyframes cag-barrier-forward-a{ 0% {transform:scale(1);opacity:1} 58% {opacity:1} 100% {transform:scale(1.115);opacity:0} } @keyframes cag-barrier-forward-b{ 0% {transform:scale(1.055);opacity:0} 18% {opacity:1} 50% {transform:scale(1.115);opacity:1} 51% {transform:scale(1);opacity:1} 100% {transform:scale(1.055);opacity:1} } /* Keep game objects above the separate environment layers. */ .cag-shell .cag-race-stage .cag-race-lanes, .cag-shell .cag-race-stage .cag-reward-lanes{z-index:18!important} .cag-shell .cag-race-stage .cag-runner{z-index:30!important} /* The hurdle's feet remain its projection anchor. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ transform:translate(-50%,-100%)!important; transform-origin:50% 100%!important; } /* Respect reduced-motion preferences. */ @media(prefers-reduced-motion:reduce){ .cag-shell .cag-race-stage .cag-barrier-image{ animation:none!important; } .cag-shell .cag-race-stage .cag-barrier-image.barrier-cycle-a{ opacity:1!important; transform:none!important; } .cag-shell .cag-race-stage .cag-barrier-image.barrier-cycle-b{ display:none!important; } } /* ========================================================= v0.2.9 — REAL STAGE HORIZON + STRONGER FORWARD MOTION ========================================================= */ /* The sky must sit behind the ENTIRE scene. Core previously ended it at 48%, exposing the stage background as a cyan strip before the track became opaque. */ .cag-shell .cag-race-stage .cag-race-sky{ inset:0!important; height:100%!important; bottom:0!important; background:transparent!important; overflow:hidden!important; } .cag-shell .cag-race-stage .cag-sky-texture{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; object-position:50% 50%!important; } /* Remove any inherited road/background colour beneath the transparent part of the new track so the full-height sky remains visible to the true horizon. */ .cag-shell .cag-race-stage .cag-race-road.cag-photo-track{ background:transparent!important; } /* Much stronger barrier flow. The transform origin remains locked to each artwork's vanishing point, but the posts now grow enough to visibly sweep toward the camera before the duplicate layer cross-fades in. */ .cag-shell .cag-race-stage.is-running .cag-barrier-image.barrier-cycle-a, .cag-shell .cag-race-stage.is-running .cag-barrier-image.barrier-cycle-b{ animation-duration:.78s!important; animation-timing-function:linear!important; } .cag-shell .cag-race-stage.is-boosting .cag-barrier-image.barrier-cycle-a, .cag-shell .cag-race-stage.is-boosting .cag-barrier-image.barrier-cycle-b{ animation-duration:.46s!important; } @keyframes cag-barrier-forward-a{ 0% {transform:scale(1) translateY(0);opacity:1} 62% {opacity:1} 100% {transform:scale(1.34) translateY(2.8%);opacity:0} } @keyframes cag-barrier-forward-b{ 0% {transform:scale(1.16) translateY(1.2%);opacity:0} 16% {opacity:1} 49% {transform:scale(1.34) translateY(2.8%);opacity:1} 50% {transform:scale(1) translateY(0);opacity:1} 100% {transform:scale(1.16) translateY(1.2%);opacity:1} } /* Keep the barrier canvases aligned to the exact same track container geometry. */ .cag-shell .cag-race-stage .cag-barrier-motion{ inset:0!important; } /* Make distant hurdle artwork fully visible but genuinely tiny only at the horizon; near hurdles remain opaque and anchored by their feet. */ .cag-shell .cag-race-stage .cag-race-hurdle, .cag-shell .cag-race-stage .cag-hurdle-asset{ opacity:1!important; } /* Collectibles use the JS ground plane; prevent legacy Core transforms from pulling them away from their projected lane coordinates. */ .cag-shell .cag-race-stage .cag-collectible{ margin:0!important; opacity:1!important; } /* ========================================================= v0.3.0 — HURDLE-ONLY CALIBRATION BUILD ========================================================= */ /* Strip all reward/barrier systems from view until hurdle geometry is approved. */ .cag-shell .cag-race-stage .cag-barrier-motion, .cag-shell .cag-race-stage .cag-collectible, .cag-shell .cag-race-stage .cag-reward-lanes, .cag-shell .cag-race-stage .cag-reward-hud{ display:none!important; } /* Critical centre lock: Core camera/lane rules must not translate the hurdle layer. */ .cag-shell .cag-race-stage .cag-race-lanes{ position:absolute!important; inset:0!important; left:0!important; right:0!important; width:100%!important; transform:none!important; translate:none!important; margin:0!important; padding:0!important; } /* Every hurdle row uses the same absolute centre anchor. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ left:50%!important; right:auto!important; margin-left:0!important; transform:translate(-50%,-100%)!important; transform-origin:50% 100%!important; } /* Lock Abi and her shadow to the same centre coordinate for visual calibration. */ .cag-shell .cag-race-stage .cag-runner, .cag-shell .cag-race-stage .cag-runner.lane-left, .cag-shell .cag-race-stage .cag-runner.lane-centre, .cag-shell .cag-race-stage .cag-runner.lane-right{ left:50%!important; } .cag-shell .cag-race-stage .cag-runner-shadow{ left:50%!important; } /* Disable visible side-lane feedback during calibration. */ .cag-shell .cag-race-controls [data-move="-1"], .cag-shell .cag-race-controls [data-move="1"]{ opacity:.45!important; } /* ========================================================= v0.3.1 — SINGLE COORDINATE SYSTEM CALIBRATION ========================================================= */ /* The supplied track already contains transparent sky above y=300. It must fill the complete stage; any Core top-offset would double-apply the horizon and make hurdles appear in the air. */ .cag-shell .cag-race-stage .cag-race-road.cag-photo-track{ position:absolute!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100%!important; height:100%!important; min-height:0!important; transform:none!important; perspective:none!important; background:transparent!important; overflow:hidden!important; } .cag-shell .cag-race-stage .cag-track-image-static{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:fill!important; object-position:50% 50%!important; transform:none!important; opacity:1!important; } /* Hide legacy decorative geometry that was built for the previous baked track. This leaves one authoritative perspective image and one hurdle layer. */ .cag-shell .cag-race-stage .cag-road-stripes, .cag-shell .cag-race-stage .cag-track-shadow, .cag-shell .cag-race-stage .cag-track-stitch, .cag-shell .cag-race-stage .cag-trackside, .cag-shell .cag-race-stage .cag-spectator-strip{ display:none!important; } /* The hurdle layer and runner share the exact full-stage coordinate box. */ .cag-shell .cag-race-stage .cag-race-lanes{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform:none!important; overflow:visible!important; } /* Centre hurdle: the CSS anchor is the centre of the stage, and the bottom centre of the actual PNG is the ground contact point. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ position:absolute!important; left:50%!important; right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; border:0!important; transform:translate(-50%,-100%)!important; transform-origin:50% 100%!important; overflow:visible!important; background:transparent!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-visual{ position:relative!important; display:block!important; width:100%!important; height:auto!important; left:0!important; top:0!important; margin:0!important; padding:0!important; transform:none!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-asset{ position:relative!important; display:block!important; width:100%!important; height:auto!important; margin:0!important; padding:0!important; transform:none!important; object-fit:contain!important; object-position:50% 100%!important; } /* For calibration the lead hurdle is deliberately drawn just above Abi so the complete bar is visible and its centre can be judged. After clearance the existing pass-behind class drops it behind Abi. */ .cag-shell .cag-race-stage .cag-race-hurdle[data-row="0"]:not(.cag-hurdle-pass-behind){ z-index:34!important; } .cag-shell .cag-race-stage .cag-runner{ z-index:30!important; } /* Nothing except the centre hurdle participates in this calibration. */ .cag-shell .cag-race-stage .cag-collectible, .cag-shell .cag-race-stage .cag-reward-lanes, .cag-shell .cag-race-stage .cag-reward-hud, .cag-shell .cag-race-stage .cag-barrier-motion{ display:none!important; } /* ========================================================= v0.3.2 — JS PIXEL-RECT HURDLE CALIBRATION ========================================================= */ /* JS now owns the hurdle rectangle completely. Remove all transforms from every historic hurdle rule so CSS cannot shift the calculated pixel geometry. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-centre-calibration{ transform:none!important; translate:none!important; transform-origin:0 0!important; box-sizing:border-box!important; overflow:visible!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-visual{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } .cag-shell .cag-race-stage .cag-centre-calibration .cag-hurdle-asset{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; object-fit:fill!important; opacity:1!important; } /* One authoritative centre line for this calibration. */ .cag-shell .cag-race-stage .cag-runner{ left:50%!important; transform:translateX(-50%)!important; } /* ========================================================= v0.3.3 — PHYSICAL JUMP + DISTANT GROUND CONTACT ========================================================= */ /* JS owns the jump transform frame-by-frame. This explicit rule prevents older Core sprite rules from substituting a static jump pose. */ .cag-shell .cag-race-stage .cag-runner.sprite-jump, .cag-shell .cag-race-stage .cag-runner.sprite-landing{ will-change:transform!important; transition:none!important; } /* Once the leap reaches its apex the hurdle genuinely travels behind Abi. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind{ z-index:17!important; } /* ========================================================= v0.3.4 — CONTINUOUS WORLD MOTION ========================================================= */ /* Distant rows now move continuously via JS world-distance projection. Keep every row fully opaque; size and spacing alone communicate depth. */ .cag-shell .cag-race-stage .cag-race-hurdle{ opacity:1!important; will-change:left,top,width,height!important; } /* The active hurdle remains above Abi during take-off, then JS applies cag-hurdle-pass-behind around the apex so it visibly travels underneath. */ .cag-shell .cag-race-stage .cag-race-hurdle[data-row="0"]:not(.cag-hurdle-pass-behind){ z-index:34!important; } .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind{ z-index:17!important; } /* ========================================================= v0.3.5 — HURDLE PASSES UNDER ABI AND EXITS VIEW ========================================================= */ /* Let the hurdle layer itself extend through the bottom edge; the stage clips the final object naturally at the game-frame boundary. */ .cag-shell .cag-race-stage .cag-race-lanes{ overflow:visible!important; } /* Once Abi is airborne, the passed hurdle remains behind her but fully opaque until its geometry carries it below the viewport. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind{ opacity:1!important; visibility:visible!important; z-index:17!important; pointer-events:none!important; } /* ========================================================= v0.3.6 — CONTINUOUS STREAM + THINKING TIME ========================================================= */ /* Rows no longer get rebuilt after a successful jump. Keep every distant hurdle stable and fully opaque while the world continuously advances. */ .cag-shell .cag-race-stage .cag-race-hurdle{ opacity:1!important; visibility:visible!important; } /* The recycled hurdle is placed at the far end by JS; no transition/pop-in. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-future{ pointer-events:none!important; } /* ========================================================= v0.3.7 — CONSECUTIVE JUMPS + KNOCKED HURDLE ========================================================= */ /* The hurdle element itself continues to follow the normal JS perspective. Only the artwork inside it tumbles, so the collision still travels naturally underneath and away from Abi instead of freezing on impact. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-knocked{ z-index:16!important; pointer-events:none!important; } .cag-shell .cag-race-stage .cag-hurdle-visual.cag-hurdle-knock-visual{ transform-origin:50% 82%!important; animation:cag-hurdle-knock-away .60s cubic-bezier(.2,.72,.34,1) forwards!important; will-change:transform,opacity!important; } @keyframes cag-hurdle-knock-away{ 0%{transform:rotateX(0deg) rotateZ(0deg) translateY(0) scale(1);opacity:1} 32%{transform:rotateX(30deg) rotateZ(-8deg) translateY(8%) scale(.98);opacity:1} 70%{transform:rotateX(64deg) rotateZ(-15deg) translateY(28%) scale(.92);opacity:.92} 100%{transform:rotateX(82deg) rotateZ(-20deg) translateY(58%) scale(.82);opacity:0} } /* ========================================================= v0.3.8 — BUFFERED CONSECUTIVE JUMPS + FULL KNOCK-AWAY ========================================================= */ /* A knocked hurdle remains visible while the world projection carries it past Abi. The inner artwork tumbles backwards; the stage clips it only when it actually exits the bottom of the viewport. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-knocked{ opacity:1!important; visibility:visible!important; z-index:16!important; } .cag-shell .cag-race-stage .cag-hurdle-visual.cag-hurdle-knock-visual{ animation-duration:.82s!important; } @keyframes cag-hurdle-knock-away{ 0%{transform:rotateX(0deg) rotateZ(0deg) translateY(0) scale(1);opacity:1} 28%{transform:rotateX(28deg) rotateZ(-7deg) translateY(10%) scale(.99);opacity:1} 62%{transform:rotateX(62deg) rotateZ(-14deg) translateY(38%) scale(.94);opacity:1} 100%{transform:rotateX(86deg) rotateZ(-22deg) translateY(92%) scale(.86);opacity:.75} } /* ========================================================= v0.3.9 — ALWAYS-JUMP + NON-BLOCKING HURDLE COLLISION ========================================================= */ /* A struck hurdle wobbles about its centre while JS keeps translating the parent hurdle through the same forward-motion projection. */ .cag-shell .cag-race-stage .cag-hurdle-wobble-through{ transform-origin:50% 70%!important; animation:cag-hurdle-central-wobble .64s ease-out 1!important; } @keyframes cag-hurdle-central-wobble{ 0%{transform:translateX(0) rotate(0deg)} 16%{transform:translateX(-11px) rotate(-4deg)} 32%{transform:translateX(10px) rotate(4deg)} 48%{transform:translateX(-7px) rotate(-3deg)} 64%{transform:translateX(6px) rotate(2deg)} 82%{transform:translateX(-3px) rotate(-1deg)} 100%{transform:translateX(0) rotate(0deg)} } /* Never disable the visible Jump control merely because a hurdle is being resolved. The only practical restriction is that Abi cannot begin a second physical jump before the current jump/landing animation has finished. */ .cag-shell .cag-race-controls [data-race-jump]{ pointer-events:auto!important; opacity:1!important; filter:none!important; } /* Cleared and hit hurdles stay visible as they pass underneath/behind Abi. */ .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind, .cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-knocked{ visibility:visible!important; opacity:1!important; pointer-events:none!important; } \n\n/* v0.4.0 — physical hurdle lifecycle */\n.cag-shell .cag-race-stage .cag-hurdle-wobble-through{\n transform-origin:50% 70%!important;\n animation:cag-hurdle-central-wobble .48s ease-out 1!important;\n}\n@keyframes cag-hurdle-central-wobble{\n 0%{transform:rotate(0deg) translateX(0)}\n 16%{transform:rotate(-7deg) translateX(-7px)}\n 34%{transform:rotate(7deg) translateX(7px)}\n 52%{transform:rotate(-5deg) translateX(-5px)}\n 70%{transform:rotate(4deg) translateX(4px)}\n 86%{transform:rotate(-2deg) translateX(-2px)}\n 100%{transform:rotate(0deg) translateX(0)}\n}\n.cag-shell .cag-race-stage .cag-race-hurdle.cag-hurdle-pass-behind{\n opacity:1!important;visibility:visible!important;pointer-events:none!important;\n}\n /* ========================================================= v0.4.1 — THREE-HURDLE ROW CALIBRATION ========================================================= */ /* Row wrapper occupies the full stage but has no geometry of its own. */ .cag-shell .cag-race-stage .cag-hurdle-row{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; pointer-events:none!important; overflow:visible!important; } /* JS owns exact pixel rectangles for all three supplied hurdle images. */ .cag-shell .cag-race-stage .cag-three-row-hurdle{ position:absolute!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; overflow:visible!important; opacity:1!important; } .cag-shell .cag-race-stage .cag-three-row-hurdle .cag-hurdle-visual{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; } .cag-shell .cag-race-stage .cag-three-row-hurdle .cag-hurdle-asset{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:fill!important; opacity:1!important; } /* The three lanes share the same scale/Y/depth. Their only difference is X. */ .cag-shell .cag-race-stage .cag-hurdle-left, .cag-shell .cag-race-stage .cag-hurdle-centre, .cag-shell .cag-race-stage .cag-hurdle-right{ visibility:visible!important; } /* Keep the locked v0.4.0 jump and momentum behaviours intact. */ /* ========================================================= v0.4.3 — RESTORED THREE-LANE RUNNER + ROW ALIGNMENT ========================================================= */ /* Override the old calibration centre-lock. These are the previously verified Abi positions and are symmetrical around the centre lane. */ .cag-shell .cag-race-stage .cag-runner.lane-left{ left:31%!important; } .cag-shell .cag-race-stage .cag-runner.lane-centre{ left:50%!important; } .cag-shell .cag-race-stage .cag-runner.lane-right{ left:69%!important; } .cag-shell .cag-race-stage .cag-runner{ transform:translateX(-50%)!important; } /* Re-enable the left/right controls after the centre-hurdle calibration build. */ .cag-shell .cag-race-controls [data-move="-1"], .cag-shell .cag-race-controls [data-move="1"]{ opacity:1!important; pointer-events:auto!important; cursor:pointer!important; } /* Three hurdle rows use exact JS pixel geometry. Remove any old single-centre left:50% rules which otherwise drag side hurdles back toward the centre. */ .cag-shell .cag-race-stage .cag-three-row-hurdle, .cag-shell .cag-race-stage .cag-three-row-hurdle.cag-centre-calibration, .cag-shell .cag-race-stage .cag-hurdle-left, .cag-shell .cag-race-stage .cag-hurdle-centre, .cag-shell .cag-race-stage .cag-hurdle-right{ right:auto!important; bottom:auto!important; margin:0!important; transform:none!important; translate:none!important; } /* IMPORTANT: do not force side hurdles to 50%. Inline JS left/top pixel values now remain authoritative. */ .cag-shell .cag-race-stage .cag-hurdle-left, .cag-shell .cag-race-stage .cag-hurdle-right{ transform:none!important; } /* Each row remains one depth plane. */ .cag-shell .cag-race-stage .cag-hurdle-row{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; pointer-events:none!important; overflow:visible!important; } /* ========================================================= v0.4.5 — COMPOSITE THREE-HURDLE ROW ========================================================= The supplied left+centre+right PNG is one visual/physics object. JS owns all x/y/width/height geometry. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ position:absolute!important; right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; overflow:visible!important; opacity:1!important; } .cag-shell .cag-race-stage .cag-composite-hurdle-row .cag-hurdle-visual{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; } .cag-shell .cag-race-stage .cag-composite-hurdle-row .cag-hurdle-asset{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:fill!important; opacity:1!important; } /* LOCKED: verified Abi lane movement from v0.4.3. */ .cag-shell .cag-race-stage .cag-runner.lane-left{left:31%!important} .cag-shell .cag-race-stage .cag-runner.lane-centre{left:50%!important} .cag-shell .cag-race-stage .cag-runner.lane-right{left:69%!important} /* ========================================================= v0.4.6 — FIXED CENTRE CAMERA + CLEAN SKY ========================================================= */ /* LOCKED: Abi still moves independently between the verified runner lanes. */ .cag-shell .cag-race-stage .cag-runner.lane-left{left:31%!important} .cag-shell .cag-race-stage .cag-runner.lane-centre{left:50%!important} .cag-shell .cag-race-stage .cag-runner.lane-right{left:69%!important} /* The track/world/hurdle coordinate system must remain centred even when Abi moves left or right. This neutralises any old Core camera-lane transforms. */ .cag-shell .cag-race-stage[data-camera-lane="0"] .cag-race-lanes, .cag-shell .cag-race-stage[data-camera-lane="1"] .cag-race-lanes, .cag-shell .cag-race-stage[data-camera-lane="2"] .cag-race-lanes, .cag-shell .cag-race-stage[data-camera-lane="0"] .cag-race-road, .cag-shell .cag-race-stage[data-camera-lane="1"] .cag-race-road, .cag-shell .cag-race-stage[data-camera-lane="2"] .cag-race-road{ transform:none!important; translate:none!important; } /* Remove the legacy speed-line overlay. It is not needed for the current perspective system and was producing the pale vertical streaks in the sky. */ .cag-shell .cag-race-stage .cag-speed-lines{ display:none!important; opacity:0!important; visibility:hidden!important; } /* Keep the composite hurdle row on the fixed stage coordinate system. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ transform:none!important; translate:none!important; } /* ========================================================= v0.4.7 — TRUE CENTRE-LINE COMPOSITE ANCHOR ========================================================= */ /* The composite row is positioned from the hurdle layer's own 50% point. Inline JS applies the transparent-art compensated translateX. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; translate:none!important; } /* Keep the hurdle layer itself exactly full-stage and centred. */ .cag-shell .cag-race-stage .cag-race-lanes{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } /* LOCKED runner movement. */ .cag-shell .cag-race-stage .cag-runner.lane-left{left:31%!important} .cag-shell .cag-race-stage .cag-runner.lane-centre{left:50%!important} .cag-shell .cag-race-stage .cag-runner.lane-right{left:69%!important} /* ========================================================= v0.4.8 — INTERNAL YELLOW-HURDLE ANCHOR ========================================================= */ /* JS now positions the composite by the centre of the yellow hurdle INSIDE the supplied PNG. No 50%-container centring or translateX is allowed. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } /* Keep locked runner movement/jump behaviour unchanged. */ .cag-shell .cag-race-stage .cag-runner.lane-left{left:31%!important} .cag-shell .cag-race-stage .cag-runner.lane-centre{left:50%!important} .cag-shell .cag-race-stage .cag-runner.lane-right{left:69%!important} /* ========================================================= v0.4.9 — CONTAINING-BLOCK CENTRE CALIBRATION ========================================================= */ /* The composite hurdle's inline left/top/width/height values are authoritative. Do not allow any historic left:50%, translateX or centre-calibration rule to replace the containing-block calculation. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } /* Keep the hurdle layer stable and full-size; Abi moves independently. */ .cag-shell .cag-race-stage .cag-race-lanes{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } /* ========================================================= v0.5.0 — TRACK-RECT CENTRE AUTHORITY ========================================================= */ /* JS calculates the centre from .cag-race-road.getBoundingClientRect(). No CSS horizontal centring rule may override the resulting local pixel X. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; } /* ========================================================= v0.5.1 — 1.5-LANE RIGHT PERSPECTIVE CALIBRATION ========================================================= Horizontal correction is calculated in JS from road width × depth. No fixed pixel or CSS translate offset is used. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; transform:none!important; translate:none!important; } /* ========================================================= v0.5.2 — THREE-LANE TRACK-SPAN PROJECTION ========================================================= Every composite hurdle row is centred on the same track centre line. Width is derived from projected three-lane track span, not single-hurdle size. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; transform:none!important; translate:none!important; opacity:1!important; } /* ========================================================= v0.5.3 — TRACK-LINE FITTING ========================================================= Composite hurdle rows are centred on the road rectangle and sized from the projected width of the middle three lanes at each row's ground-contact Y. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ right:auto!important; bottom:auto!important; transform:none!important; translate:none!important; opacity:1!important; } /* ========================================================= v0.6.0 — CLEAN HURDLE GEOMETRY RESET ========================================================= Hurdle x/y/width/height are now entirely controlled by JS using projected middle-three-lane boundaries from the track geometry. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ position:absolute!important; right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; opacity:1!important; } .cag-shell .cag-race-stage .cag-composite-hurdle-row .cag-hurdle-visual, .cag-shell .cag-race-stage .cag-composite-hurdle-row .cag-hurdle-asset{ transform:none!important; translate:none!important; opacity:1!important; } /* ========================================================= v0.6.1 — REAL CENTRE-THREE-LANE WIDTH ========================================================= JS maps the measured lane lines from the 1535×1024 track PNG into the live stage at every row depth. No percentage-based hurdle width remains. */ .cag-shell .cag-race-stage .cag-composite-hurdle-row{ position:absolute!important; right:auto!important; bottom:auto!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; opacity:1!important; } /* ========================================================= v0.6.3 — ROADSIDE CONE FORWARD-MOTION LAYER ========================================================= */ .cag-shell .cag-race-stage .cag-cone-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; z-index:6!important; } .cag-shell .cag-race-stage .cag-roadside-cone{ position:absolute!important; display:block!important; object-fit:contain!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; opacity:1!important; pointer-events:none!important; user-select:none!important; } /* ========================================================= v0.6.4 — TRACK-EDGE CONE PERSPECTIVE ========================================================= Cones use the exact hurdle world clock + trackProjection() curve. Their bases are positioned outside the supplied track's real outer lines. */ .cag-shell .cag-race-stage .cag-cone-layer{ position:absolute!important; inset:0!important; overflow:hidden!important; pointer-events:none!important; } .cag-shell .cag-race-stage .cag-roadside-cone{ position:absolute!important; display:block!important; object-fit:contain!important; opacity:1!important; pointer-events:none!important; transform:none!important; translate:none!important; } /* ========================================================= v0.6.5 — FIVE PAIRED CONE STREAM ========================================================= */ .cag-shell .cag-race-stage .cag-cone-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; } .cag-shell .cag-race-stage .cag-roadside-cone{ position:absolute!important; display:block!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; translate:none!important; pointer-events:none!important; } /* ========================================================= v0.6.6 — TRACK-EDGE CONE LOCK ========================================================= */ .cag-shell .cag-race-stage .cag-cone-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; } .cag-shell .cag-race-stage .cag-roadside-cone{ position:absolute!important; display:block; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; translate:none!important; pointer-events:none!important; } /* ========================================================= v0.6.7 — CONTINUOUS CONE STREAM ========================================================= Decorative cone world is independent of jumps/collisions/hurdle recycling. */ .cag-shell .cag-race-stage .cag-cone-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; } .cag-shell .cag-race-stage .cag-roadside-cone{ position:absolute!important; display:block!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; translate:none!important; pointer-events:none!important; } /* ========================================================= v0.6.8 — TREES + DAFFODILS FORWARD-MOTION SCENERY ========================================================= */ .cag-shell .cag-race-stage .cag-scenery-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; z-index:3!important; } .cag-shell .cag-race-stage .cag-roadside-scenery{ position:absolute!important; display:block!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; opacity:1!important; transform:none!important; translate:none!important; pointer-events:none!important; user-select:none!important; } /* ========================================================= v0.6.10 — VISIBLE MOVING SCENERY ========================================================= */ .cag-shell .cag-race-stage .cag-scenery-layer{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; overflow:hidden!important; pointer-events:none!important; z-index:5!important; /* above track image, below cones/hurdles/Abi */ visibility:visible!important; opacity:1!important; } .cag-shell .cag-race-stage .cag-roadside-scenery{ position:absolute!important; display:block!important; visibility:visible!important; opacity:1!important; object-fit:contain!important; object-position:center bottom!important; margin:0!important; padding:0!important; transform:none!important; translate:none!important; pointer-events:none!important; user-select:none!important; } /* ========================================================= v0.6.11 — LARGER, IRREGULAR FIELD SCENERY ========================================================= Motion remains unchanged from v0.6.10. Trees/flowers are now scattered through the grass rather than in a line. */ /* v0.6.12 — scenery perspective/depth correction */ .cag-shell .cag-race-stage .cag-scenery-layer{ isolation:isolate!important; } .cag-shell .cag-race-stage .cag-roadside-scenery{ transform-origin:center bottom!important; } /* v0.6.13 — remove static clouds; they weaken the forward-motion illusion */ .cag-shell .cag-race-stage .cag-cloud, .cag-shell .cag-race-stage [class*="cloud"], .cag-shell .cag-race-stage img[src*="cloud"]{ display:none!important; visibility:hidden!important; } /* ========================================================= v0.6.15 — ABI SHADOW FOLLOWS LANE ========================================================= */ .cag-shell .cag-race-stage .cag-race-shadow, .cag-shell .cag-race-stage .cag-runner-shadow, .cag-shell .cag-race-stage .cag-shadow{ right:auto!important; transform:none!important; translate:none!important; } /* ========================================================== v0.6.29 — ISOLATED FINISH ARCH Normal race movement remains the v0.6.26 baseline. ========================================================== */ .cag-race-finish-line{ position:absolute; pointer-events:none; opacity:0; transform-origin:center bottom; } .cag-race-finish-line.is-active{opacity:1;} .cag-race-finish-line img{ display:block; width:100%; height:100%; object-fit:contain; } .cag-race-finish-line.is-passed{ opacity:0; transition:opacity .65s ease; } /* v0.6.31 — finish arch sits behind Abi so she runs underneath it. */ .cag-shell .cag-race-stage .cag-race-finish-line{ z-index:24!important; transform:none!important; transform-origin:left top!important; } /* ========================================================== v0.6.32 — LARGE ABOVE-HURDLE BSL SIGN CARDS Finish-line system is deliberately untouched in this build. ========================================================== */ .cag-composite-hurdle-row .cag-hurdle-visual{ position:relative; overflow:visible!important; } .cag-composite-hurdle-row .cag-composite-sign-panel{ position:absolute; top:-27%; width:29.5%; height:76%; transform:translateX(-50%); transform-origin:center bottom; display:flex; align-items:center; justify-content:center; box-sizing:border-box; pointer-events:none; overflow:visible; background:rgba(255,250,247,.985); border:2px solid rgba(92,45,126,.92); border-radius:13px; padding:2%; box-shadow: 0 3px 8px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.72); } .cag-composite-hurdle-row .cag-composite-sign-0{ left:17.0%; } .cag-composite-hurdle-row .cag-composite-sign-1{ left:50%; } .cag-composite-hurdle-row .cag-composite-sign-2{ left:83.0%; } .cag-composite-hurdle-row .cag-composite-sign-panel img{ display:block; width:99%; height:99%; object-fit:contain; object-position:center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.13)); } .cag-composite-hurdle-row .cag-composite-sign-label{ position:absolute; left:50%; bottom:-12%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; min-width:27%; height:18%; padding:0 6%; box-sizing:border-box; background:#5b2a78; color:#fff; border:2px solid rgba(255,255,255,.95); border-radius:999px; box-shadow:0 2px 4px rgba(0,0,0,.24); font-weight:900; font-size:clamp(7px,.68em,13px); line-height:1; text-align:center; text-shadow:none; } .cag-hurdle-future .cag-composite-sign-panel{ border-width:1.5px; } /* ========================================================== v0.6.33 — BIGGER SIGN CARDS JUST ABOVE HURDLE + REWARD FX ========================================================== */ /* Slightly larger than v0.6.32, with the lower edge immediately above the physical top bar instead of overlapping the hurdle opening. */ .cag-composite-hurdle-row .cag-composite-sign-panel{ top:-75%!important; width:32.5%!important; height:82%!important; border-radius:14px!important; padding:1.6%!important; } .cag-composite-hurdle-row .cag-composite-sign-panel img{ width:100%!important; height:100%!important; } .cag-composite-hurdle-row .cag-composite-sign-label{ bottom:-10%!important; min-width:25%!important; height:16%!important; font-size:clamp(7px,.62em,12px)!important; } /* Correct-answer jewel: originates at the cleared sign and flies to the bank. */ .cag-answer-jewel{ position:absolute; z-index:100; font-size:clamp(22px,4.2vw,58px); line-height:1; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 5px rgba(70,23,96,.35)); } /* Wrong-answer coin spill from the reward bank. */ .cag-spill-coin{ position:absolute; z-index:105; width:clamp(23px,3.4vw,46px); height:clamp(23px,3.4vw,46px); pointer-events:none; transform:translate(-50%,-50%); } .cag-spill-coin img{ display:block; width:100%; height:100%; object-fit:contain; } /* Keep the bank visible throughout the race. */ .cag-reward-hud.show{ opacity:1!important; visibility:visible!important; } .cag-reward-hud.jewel-pulse{ animation:cagJewelBankPulse .58s ease; } @keyframes cagJewelBankPulse{ 0%,100%{transform:scale(1);} 42%{transform:scale(1.08);} } .cag-reward-hud.coin-spill{ animation:cagCoinBankShake .42s ease; } @keyframes cagCoinBankShake{ 0%,100%{transform:translateX(0);} 22%{transform:translateX(-6px) rotate(-1deg);} 48%{transform:translateX(6px) rotate(1deg);} 72%{transform:translateX(-3px);} }