@font-face{
  font-family:'OpenDyslexic';
  src:url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-regular-webfont.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap
}
@font-face{
  font-family:'OpenDyslexic';
  src:url('https://cdn.jsdelivr.net/gh/madjeek-web/open-dyslexic@main/OpenDyslexic-2025/opendyslexic-bold-webfont.woff2') format('woff2');
  font-weight:700 900;font-style:normal;font-display:swap
}
.cag-shell,.cag-shell *{box-sizing:border-box}
.cag-shell{
  --cag-ink:#17223b;--cag-blue:#149ce5;--cag-yellow:#fff200;--cag-purple:#7b2cbf;
  --cag-border:#cfd9ef;--cag-paper:#fff;--cag-good:#208847;
  font-family:'OpenDyslexic',Arial,sans-serif!important;
  max-width:1120px!important;margin:24px auto!important;padding:24px!important;background:#fff!important;
  border-radius:28px!important;box-shadow:0 8px 30px rgba(0,0,0,.13)!important;color:var(--cag-ink)!important;
}
.cag-head{text-align:center!important}.cag-head p{font-family:inherit!important;font-weight:700!important;color:#17223b!important}
.cag-brand{display:inline-flex!important;align-items:flex-start!important;max-width:min(560px,90%)!important;gap:4px!important}
.cag-brand img{display:block!important;max-width:100%!important;height:auto!important}
.cag-brand sup{font-family:Arial,sans-serif!important;font-size:16px!important;font-weight:900!important;color:#111!important;line-height:1!important}
.cag-a11ybar,.cag-game-topbar{display:flex!important;flex-wrap:wrap!important;gap:10px!important;justify-content:center!important;align-items:center!important;margin:14px 0!important}
.cag-control,.cag-back,.cag-btn,.cag-select{
  font-family:inherit!important;border:2px solid #aebddd!important;background:#fff!important;color:#17223b!important;
  border-radius:14px!important;padding:10px 14px!important;font-weight:800!important;line-height:1.25!important;
}
.cag-control,.cag-back,.cag-btn{cursor:pointer!important}
.cag-control:hover,.cag-control:focus-visible,.cag-back:hover,.cag-back:focus-visible,.cag-btn:hover,.cag-btn:focus-visible{
  background:#eef5ff!important;border-color:#5589cc!important;outline:3px solid rgba(20,156,229,.25)!important;outline-offset:2px!important
}

/* Launcher tiles: essential information is visible at all times. */
.cag-menu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;margin-top:18px!important}
.cag-shell .cag-tile{
  all:unset;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:100%!important;
  min-height:390px!important;border:4px solid #819fd4!important;border-radius:24px!important;overflow:hidden!important;
  cursor:pointer!important;background:#149ce5!important;color:#111!important;box-shadow:0 6px 16px rgba(0,0,0,.14)!important;
  font-family:'OpenDyslexic',Arial,sans-serif!important;
}
.cag-shell .cag-tile-bsl{background:#7b2cbf!important}
.cag-shell .cag-tile-art{display:flex!important;align-items:center!important;justify-content:center!important;min-height:245px!important;background:#fff!important;padding:12px!important}
.cag-shell .cag-tile-art img{display:block!important;width:100%!important;height:235px!important;object-fit:contain!important}
.cag-shell .cag-tile-copy{display:block!important;padding:18px 20px 20px!important;color:#fff!important}
.cag-shell .cag-tile-copy strong{display:block!important;font-size:1.35rem!important;line-height:1.25!important;color:#fff!important;font-weight:900!important;margin:0 0 7px!important}
.cag-shell .cag-tile-copy span{display:block!important;color:#fff!important;font-size:1rem!important;line-height:1.45!important;font-weight:700!important}
.cag-shell .cag-tile-copy em{display:inline-block!important;margin-top:12px!important;background:#fff200!important;color:#111!important;border-radius:12px!important;padding:8px 12px!important;font-style:normal!important;font-weight:900!important}
.cag-shell .cag-tile:hover,.cag-shell .cag-tile:focus-visible{
  transform:translateY(-2px)!important;box-shadow:0 12px 26px rgba(0,0,0,.20)!important;outline:4px solid #fff200!important;outline-offset:3px!important
}

/* Selected game expands beyond the normal content column on desktop. */
.cag-shell.cag-expanded{
  width:min(95vw,1680px)!important;max-width:min(95vw,1680px)!important;
  margin-left:50%!important;transform:translateX(-50%)!important;padding:22px!important
}
.cag-panel{margin-top:8px!important}
.cag-tools{display:flex!important;flex-wrap:wrap!important;gap:10px!important;justify-content:center!important;align-items:center!important;margin:10px 0 14px!important}
.cag-status{text-align:center!important;font-weight:900!important;min-height:26px!important;margin:8px!important}
.cag-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
.cag-grid.cag-dense{grid-template-columns:repeat(8,minmax(0,1fr))!important}
.cag-card{position:relative!important;aspect-ratio:3/4!important;border:0!important;background:transparent!important;padding:0!important;perspective:900px!important;cursor:pointer!important;min-width:0!important}
.cag-inner{position:absolute!important;inset:0!important;transform-style:preserve-3d!important;transition:transform .38s ease!important}
.cag-card.flip .cag-inner,.cag-card.match .cag-inner{transform:rotateY(180deg)!important}
.cag-face{position:absolute!important;inset:0!important;border-radius:14px!important;overflow:hidden!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;border:2px solid #d4dceb!important;box-shadow:0 3px 10px rgba(0,0,0,.16)!important;background:#fff!important}
.cag-face.back img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.cag-face.front{transform:rotateY(180deg)!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:6px!important}
.cag-face.front img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important}
.cag-name{position:absolute!important;left:5px!important;right:5px!important;bottom:5px!important;background:rgba(255,255,255,.93)!important;color:#111!important;border-radius:8px!important;padding:3px 5px!important;font-size:.76rem!important;font-weight:900!important;text-align:center!important}
.cag-letter{font-family:'OpenDyslexic',Arial,sans-serif!important;font-size:clamp(38px,5vw,68px)!important;font-weight:900!important;color:#111!important;line-height:1!important}
.cag-card.match .cag-face{box-shadow:0 0 0 4px #45a665,0 4px 12px rgba(0,0,0,.14)!important}
.cag-card.cag-correct-pop{animation:cag-pop .36s ease}
@keyframes cag-pop{0%{transform:scale(1)}45%{transform:scale(1.075)}100%{transform:scale(1)}}
.cag-done{background:#eefaf2!important;border:2px solid #8fc4a0!important;border-radius:15px!important;padding:12px!important;color:#173a26!important}
.cag-celebrate{position:fixed!important;inset:0!important;pointer-events:none!important;z-index:999999!important;overflow:hidden!important}
.cag-star{position:absolute!important;font-size:28px!important;animation:cag-star 900ms ease-out forwards!important}
@keyframes cag-star{0%{opacity:0;transform:translateY(10px) scale(.5) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-140px) scale(1.25) rotate(160deg)}}
.cag-learn{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
.cag-learn>div{border:2px solid #dbe3ef!important;border-radius:15px!important;padding:8px!important;text-align:center!important;background:#fff!important}
.cag-learn img{display:block!important;width:100%!important;aspect-ratio:1!important;object-fit:contain!important}
.cag-learn b{font-size:1.35rem!important;color:#111!important}
.cag-shell:fullscreen,.cag-shell:-webkit-full-screen{width:100vw!important;max-width:none!important;height:100vh!important;overflow:auto!important;margin:0!important;transform:none!important;border-radius:0!important;padding:18px!important}

@media(max-width:1100px){
  .cag-grid,.cag-learn{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .cag-grid.cag-dense{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(max-width:800px){
  .cag-menu{grid-template-columns:1fr!important}
  .cag-shell.cag-expanded{width:96vw!important;max-width:96vw!important}
  .cag-grid,.cag-learn{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .cag-grid.cag-dense{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .cag-shell{padding:14px!important;border-radius:18px!important}
  .cag-shell .cag-tile{min-height:330px!important}
  .cag-shell .cag-tile-art{min-height:205px!important}.cag-shell .cag-tile-art img{height:195px!important}
  .cag-grid,.cag-grid.cag-dense,.cag-learn{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:400px){.cag-grid,.cag-grid.cag-dense,.cag-learn{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(prefers-reduced-motion:reduce){
  .cag-inner{transition:none!important}.cag-card.cag-correct-pop{animation:none!important}.cag-star{display:none!important}
}


/* ===== Version 7.2: Abi's BSL Word Race prototype ===== */
.cag-menu{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cag-shell .cag-tile-race{background:#ed3d8f!important}

.cag-race-wrap{max-width:1500px!important;margin:0 auto!important}
.cag-race-hud{display:grid!important;grid-template-columns:auto 1fr auto!important;gap:12px!important;align-items:center!important;margin-bottom:10px!important}
.cag-race-score,.cag-race-wordbox,.cag-race-level{
  background:#fff!important;border:3px solid #d5def0!important;border-radius:18px!important;
  padding:10px 14px!important;font-weight:900!important;box-shadow:0 3px 10px rgba(0,0,0,.08)!important
}
.cag-race-score,.cag-race-level{white-space:nowrap!important}
.cag-race-wordbox{text-align:center!important}
.cag-race-word{font-size:clamp(25px,3vw,48px)!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:#54238b!important}
.cag-race-word .done{color:#228a47!important}
.cag-race-word .current{text-decoration:underline!important;text-decoration-thickness:5px!important;text-decoration-color:#f0b400!important}

.cag-race-stage{
  position:relative!important;overflow:hidden!important;min-height:610px!important;border-radius:26px!important;
  border:4px solid #c8d5ef!important;background:
    linear-gradient(#53bdf2 0 24%,#bfe78d 24% 42%,#c8753a 42% 100%)!important;
  box-shadow:inset 0 0 80px rgba(255,255,255,.24),0 8px 25px rgba(0,0,0,.14)!important;
  touch-action:none!important
}
.cag-race-stage:before{
  content:""!important;position:absolute!important;left:7%!important;right:7%!important;top:37%!important;bottom:-4%!important;
  background:linear-gradient(90deg,transparent 0 31.7%,rgba(255,255,255,.75) 31.7% 32.5%,transparent 32.5% 66%,
    rgba(255,255,255,.75) 66% 66.8%,transparent 66.8%)!important;
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)!important;opacity:.95!important
}
.cag-race-banner{
  position:absolute!important;top:15px!important;left:50%!important;transform:translateX(-50%)!important;
  background:rgba(255,255,255,.94)!important;border-radius:16px!important;padding:8px 16px!important;
  font-weight:900!important;color:#51227f!important;z-index:6!important;text-align:center!important
}
.cag-race-lanes{position:absolute!important;inset:0!important;z-index:3!important}
.cag-race-hurdle{
  position:absolute!important;top:175px!important;width:22%!important;max-width:270px!important;min-width:135px!important;
  transform:translateX(-50%) scale(.82)!important;transition:transform .12s linear,top .12s linear!important;
  border:0!important;background:transparent!important;padding:0!important;z-index:4!important
}
.cag-race-hurdle[data-lane="0"]{left:24%!important}
.cag-race-hurdle[data-lane="1"]{left:50%!important}
.cag-race-hurdle[data-lane="2"]{left:76%!important}
.cag-hurdle-frame{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:145px!important;background:#fff!important;border:11px solid #e34d73!important;border-bottom-width:18px!important;
  border-radius:12px!important;box-shadow:0 8px 12px rgba(0,0,0,.18)!important;padding:6px!important
}
.cag-race-hurdle:nth-child(2) .cag-hurdle-frame{border-color:#f3b12c!important}
.cag-race-hurdle:nth-child(3) .cag-hurdle-frame{border-color:#6532a5!important}
.cag-hurdle-frame img{width:100%!important;height:120px!important;object-fit:contain!important;display:block!important}
.cag-hurdle-label{
  display:block!important;margin:5px auto 0!important;width:max-content!important;max-width:100%!important;
  padding:4px 9px!important;background:#fff!important;border-radius:10px!important;color:#111!important;font-weight:900!important
}

.cag-runner{
  position:absolute!important;bottom:42px!important;left:50%!important;width:190px!important;height:230px!important;
  transform:translateX(-50%)!important;transition:left .18s ease,transform .18s ease!important;z-index:5!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important
}
.cag-runner[data-lane="0"]{left:31%!important}.cag-runner[data-lane="1"]{left:50%!important}.cag-runner[data-lane="2"]{left:69%!important}
.cag-runner img{display:block!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;filter:drop-shadow(0 8px 4px rgba(0,0,0,.18))!important}
.cag-runner.running img{animation:cag-run-bob .32s ease-in-out infinite alternate!important}
.cag-runner.jumping{animation:cag-jump .58s cubic-bezier(.2,.75,.35,1)!important}
.cag-runner.stumble{animation:cag-stumble .62s ease!important}
.cag-runner.boost img{animation:cag-boost .22s ease-in-out infinite alternate!important;filter:drop-shadow(0 8px 4px rgba(0,0,0,.18)) drop-shadow(0 0 16px #ffe600)!important}
@keyframes cag-run-bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
@keyframes cag-jump{0%{bottom:42px}45%{bottom:205px;transform:translateX(-50%) scale(1.06)}100%{bottom:42px}}
@keyframes cag-stumble{0%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(-14deg) translateY(10px)}55%{transform:translateX(-50%) rotate(8deg) translateY(14px)}100%{transform:translateX(-50%) rotate(0)}}
@keyframes cag-boost{from{transform:translateY(-2px) scale(1.01)}to{transform:translateY(-10px) scale(1.05)}}

.cag-race-feedback{
  position:absolute!important;left:50%!important;bottom:275px!important;transform:translateX(-50%)!important;
  z-index:8!important;background:rgba(255,255,255,.95)!important;border-radius:15px!important;padding:8px 14px!important;
  font-weight:900!important;font-size:1.15rem!important;opacity:0!important;transition:opacity .2s!important
}
.cag-race-feedback.show{opacity:1!important}
.cag-race-feedback.good{color:#18753b!important;border:3px solid #5db77a!important}
.cag-race-feedback.bad{color:#a12c3a!important;border:3px solid #e4818d!important}

.cag-race-controls{display:flex!important;justify-content:center!important;gap:12px!important;flex-wrap:wrap!important;margin-top:12px!important}
.cag-race-control{
  min-width:115px!important;min-height:54px!important;border:3px solid #7b91bd!important;border-radius:16px!important;
  background:#fff!important;color:#17223b!important;font-family:inherit!important;font-weight:900!important;font-size:1rem!important;cursor:pointer!important
}
.cag-race-control:hover,.cag-race-control:focus-visible{background:#fff6b8!important;outline:3px solid rgba(20,156,229,.25)!important}
.cag-race-instructions{text-align:center!important;font-weight:700!important;margin:9px 0!important}
.cag-race-meters{display:flex!important;justify-content:center!important;gap:14px!important;flex-wrap:wrap!important;margin:10px 0!important}
.cag-meter{display:flex!important;gap:7px!important;align-items:center!important;font-weight:900!important}
.cag-meter-track{width:150px!important;height:16px!important;border-radius:99px!important;background:#e5eaf4!important;overflow:hidden!important;border:2px solid #bcc8df!important}
.cag-meter-fill{height:100%!important;width:0;background:#73c93e!important;transition:width .25s!important}
.cag-meter-stumble .cag-meter-fill{background:#ef765d!important}

@media(max-width:1050px){.cag-menu{grid-template-columns:1fr 1fr!important}.cag-race-stage{min-height:550px!important}}
@media(max-width:760px){
  .cag-menu{grid-template-columns:1fr!important}
  .cag-race-hud{grid-template-columns:1fr 1fr!important}.cag-race-wordbox{grid-column:1/-1!important;grid-row:1!important}
  .cag-race-stage{min-height:500px!important}
  .cag-runner{width:145px!important;height:185px!important}
  .cag-hurdle-frame{min-height:115px!important}.cag-hurdle-frame img{height:92px!important}
  .cag-race-hurdle{min-width:105px!important;top:170px!important}
}
@media(max-width:520px){
  .cag-race-stage{min-height:440px!important}
  .cag-race-hurdle{width:27%!important;min-width:88px!important;top:150px!important}
  .cag-hurdle-frame{border-width:7px!important;border-bottom-width:12px!important;min-height:90px!important}.cag-hurdle-frame img{height:70px!important}
  .cag-runner{width:115px!important;height:150px!important;bottom:35px!important}
  .cag-race-control{min-width:90px!important}
}
@media(prefers-reduced-motion:reduce){
  .cag-runner.running img,.cag-runner.jumping,.cag-runner.stumble,.cag-runner.boost img{animation:none!important}
}

/* Version 7.2.1 Catrin voice playback */
.cag-catrin-audio{position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important}
.cag-voice-status{display:inline-block!important;min-height:1.2em!important;margin-left:6px!important;font-size:.9rem!important;font-weight:800!important;color:#283452!important}