.ca-colour-game,
.ca-colour-game * { box-sizing: border-box; }
.ca-colour-game {
  --purple:#6847ad;
  --ink:#222;
  --paper:#fff;
  width:min(100%, 1900px);
  margin:0 auto;
  padding:16px;
  color:var(--ink);
  font-family:'OpenDyslexic','OpenDyslexia',Arial,sans-serif;
  background:#fff;
  border-radius:30px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  overflow:hidden;
}
.ca-colour-topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:4px 4px 12px; }
.ca-levels { display:flex; flex-wrap:wrap; gap:7px; }
.ca-level { min-width:48px; min-height:43px; border:3px solid var(--purple); border-radius:11px; background:#fff; color:#50368b; font:700 16px/1 inherit; }
.ca-level.is-active { background:var(--purple); color:#fff; }
.ca-level:disabled { opacity:.52; }
.ca-jewel-card { min-width:265px; display:flex; align-items:center; gap:12px; border:2px solid #d9def2; border-radius:16px; padding:8px 16px; }
.ca-jewel { font:700 42px/1 serif; color:#96c9ff; transform:rotate(45deg); display:inline-block; }
.ca-jewel-card strong,.ca-jewel-card small { display:block; }
.ca-jewel-card small { margin-top:2px; color:#666; }
.ca-colour-shell { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:18px; align-items:stretch; }
.ca-workspace { min-width:0; }
.ca-table { position:relative; width:100%; aspect-ratio: 2048/1330; border-radius:24px; overflow:hidden; background:center/cover no-repeat; }
.ca-paper-wrap { position:absolute; inset:7% 8% 7% 8%; display:flex; align-items:center; justify-content:center; transform-origin:center center; transition:transform 1.7s cubic-bezier(.2,.8,.2,1), inset 1.7s cubic-bezier(.2,.8,.2,1); }
.ca-paper-wrap.is-intro { inset:15% 20% 12% 21%; transform:rotate(11deg) scale(.87); }
.ca-paper-wrap.is-playing { inset:2.5% 3.5% 2.5% 3.5%; transform:rotate(0deg) scale(1); }
.ca-paper { position:relative; width:100%; aspect-ratio:2048/1448; background:#fff; box-shadow:0 9px 24px rgba(0,0,0,.28); overflow:hidden; touch-action:none; }
.ca-paint-canvas,.ca-line-overlay { position:absolute; inset:0; width:100%; height:100%; display:block; }
.ca-paint-canvas { background:#fff; cursor:pointer; touch-action:none; }
.ca-line-overlay { pointer-events:none; user-select:none; object-fit:fill; }
.ca-intro-card { position:absolute; left:50%; bottom:4%; transform:translateX(-50%); z-index:10; width:min(88%,620px); padding:14px 18px; border-radius:18px; background:rgba(255,255,255,.95); box-shadow:0 8px 25px rgba(0,0,0,.22); text-align:center; }
.ca-intro-card p { margin:0 0 10px; font-weight:700; }
.ca-intro-card small { display:block; margin-top:7px; color:#666; }
.ca-start,.ca-tools button { min-height:44px; border:0; border-radius:12px; padding:9px 16px; font:700 15px/1.2 inherit; cursor:pointer; }
.ca-start,.ca-finish { background:var(--purple); color:#fff; }
.ca-sign-panel { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:18px 12px; background:#fff; border-radius:20px; min-width:0; }
.ca-target-word { font-size:clamp(28px,3vw,48px); font-weight:800; letter-spacing:.12em; margin:22px 0 14px; color:#7A431D; }
.ca-prompt { text-align:center; font-weight:700; margin:14px 2px 7px; }
.ca-status { min-height:42px; text-align:center; color:#55446f; }
.ca-tools { margin-top:14px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px; border:2px solid #ece8f6; border-radius:18px; }
.ca-palette { display:flex; flex-wrap:wrap; gap:9px; }
.ca-swatch { width:46px; height:46px; padding:0 !important; border:3px solid #fff !important; outline:2px solid #aaa; border-radius:50% !important; background:var(--swatch) !important; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.ca-swatch[data-colour-key="white"] { outline-color:#777; }
.ca-swatch.is-selected { outline:5px solid var(--purple); transform:scale(1.08); }
.ca-swatch.is-wrong { animation:ca-shake .36s linear; }
.ca-brush-tools { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ca-brush-tools label { display:flex; align-items:center; gap:7px; font-weight:700; }
.ca-brush-tools button:not(.ca-finish) { background:#eee9f8; color:#44306d; }
.ca-tools button:disabled { opacity:.45; cursor:not-allowed; }
.ca-colour-game.is-complete .ca-jewel-card { background:#f4fbff; box-shadow:0 0 0 3px #bfe4ff inset; }
@keyframes ca-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@media (max-width:900px){
  .ca-colour-shell { grid-template-columns:1fr; }
  .ca-sign-panel { display:flex; flex-direction:column; gap:10px; align-items:center; }
  .ca-target-word { margin:0; }
  .ca-table { aspect-ratio:4/3; }
}
@media (max-width:620px){
  .ca-colour-game { padding:9px; border-radius:18px; }
  .ca-colour-topbar { align-items:flex-start; }
  .ca-jewel-card { min-width:0; padding:6px 9px; }
  .ca-jewel { font-size:30px; }
  .ca-level { min-width:38px; min-height:38px; font-size:13px; }
  .ca-sign-panel { display:flex; flex-direction:column; }
  .ca-swatch { width:40px; height:40px; }
}

.ca-fill-hint { font-weight:700; color:#44306d; padding:7px 4px; }

/* v0.1.2: separate, non-reward Free Play mode. */
.ca-free-play-mode { min-width:112px; margin-left:8px; }
.ca-free-play-mode.is-active { background:#4d7b62; border-color:#4d7b62; color:#fff; }
.ca-colour-game[data-mode="free"] .ca-colour-shell { grid-template-columns:1fr; }
.ca-colour-game[data-mode="free"] .ca-sign-panel { display:none !important; }
.ca-colour-game[data-mode="free"] .ca-jewel-card { background:#faf8ff; }
.ca-colour-game[data-mode="free"] .ca-jewel { transform:none; color:var(--purple); }
.ca-download { background:var(--purple) !important; color:#fff !important; }
.ca-free-status { flex:1 0 100%; text-align:center; font-weight:700; color:#55446f; padding:4px 8px 0; }
.ca-free-status[hidden], .ca-download[hidden], .ca-finish[hidden] { display:none !important; }
.ca-level:disabled:not(.ca-free-play-mode) { cursor:not-allowed; }

@media (max-width:620px){
  .ca-free-play-mode { min-width:92px; margin-left:0; }
}

/* v0.2.0 guided multi-task level and support-removal progression. */
.ca-target-word.is-empty { min-height:1.15em; }
.ca-next-task { background:#4d7b62 !important; color:#fff !important; }
.ca-new-session { background:#eee9f8 !important; color:#44306d !important; }
.ca-next-task[hidden], .ca-new-session[hidden] { display:none !important; }
.ca-colour-game[data-support="sign-only"] .ca-target-word { visibility:hidden; }
.ca-colour-game[data-support="unreliable"] .ca-target-word { text-decoration:underline dotted; text-underline-offset:.18em; }

/* v0.2.1: media-free build baseline. */
.ca-word-panel { justify-content:center; min-height:320px; }
.ca-word-panel .ca-target-word { margin:0 0 22px; font-size:clamp(38px,5vw,70px); }

/* v0.3.0: multi-colour guided play and full Free Play shade palette. */
.ca-palette-area { flex:1 1 100%; display:flex; flex-direction:column; gap:12px; min-width:0; }
.ca-palette-group { display:flex; flex-direction:column; gap:7px; min-width:0; }
.ca-palette-title { color:#44306d; font-size:15px; }
.ca-palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; width:100%; }
.ca-swatch {
  width:auto;
  height:auto;
  min-height:46px;
  padding:6px 9px !important;
  border:2px solid #ddd !important;
  outline:0;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 4px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  text-align:left;
  color:#28222f;
}
.ca-swatch-dot {
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:var(--swatch);
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.ca-swatch-name { font-weight:700; line-height:1.1; }
.ca-swatch.is-selected { outline:4px solid var(--purple); transform:none; border-color:transparent !important; }
.ca-swatch.is-wrong { border-color:#c64242 !important; }
.ca-shade-group[hidden] { display:none !important; }
.ca-word-panel .ca-target-word.is-light-colour {
  text-shadow:-1px -1px 0 #555, 1px -1px 0 #555, -1px 1px 0 #555, 1px 1px 0 #555;
}
.ca-colour-game[data-mode="free"] .ca-tools { align-items:flex-start; }
.ca-colour-game[data-mode="free"] .ca-palette-title { font-size:16px; }

@media (max-width:760px){
  .ca-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ca-swatch { min-height:44px; padding:5px 7px !important; }
  .ca-swatch-dot { width:26px; height:26px; flex-basis:26px; }
  .ca-swatch-name { font-size:13px; }
}

/* v0.4.0: complete 10-level progression, locking and media-ready support modes. */
.ca-level { position:relative; }
.ca-level-mark { position:absolute; right:3px; top:2px; font-size:10px; line-height:1; }
.ca-level.is-complete:not(.is-active) { border-color:#4d7b62; color:#315941; background:#f1faf4; }
.ca-level.is-locked { opacity:.42; filter:grayscale(.35); }
.ca-level-title { display:block; font-weight:800; color:#6b5a7c; letter-spacing:.03em; margin-bottom:12px; text-align:center; }
.ca-decoy-chip { width:96px; height:96px; border-radius:22px; background:var(--decoy-colour,#7A431D); border:5px solid #fff; outline:3px solid #8b8296; box-shadow:0 6px 16px rgba(0,0,0,.16); margin:4px auto 18px; }
.ca-colour-game[data-support="plain_word"] .ca-target-word { color:#2d2d2d !important; text-shadow:none !important; }
.ca-colour-game[data-support="letter_sign"] .ca-target-word { color:#2d2d2d !important; text-shadow:none !important; font-size:clamp(54px,7vw,92px); }
.ca-colour-game[data-support="sign_only"] .ca-target-word,
.ca-colour-game[data-support="decoy_sign"] .ca-target-word { display:none; }
.ca-colour-game[data-intended-support="letter_sign"] .ca-sign-panel,
.ca-colour-game[data-intended-support="sign_only"] .ca-sign-panel,
.ca-colour-game[data-intended-support="decoy_sign"] .ca-sign-panel { min-height:320px; }
.ca-swatch[hidden] { display:none !important; }
.ca-jewel-card .ca-jewel { transition:transform .2s ease, color .2s ease; }
.ca-colour-game.is-complete .ca-jewel { color:#5fa8e8; transform:rotate(45deg) scale(1.08); }
@media (max-width:620px){
  .ca-level-mark { font-size:8px; }
  .ca-decoy-chip { width:72px; height:72px; }
}

/* v0.5.0: curriculum-ordered story sheets and full Free Play sheet picker. */
.ca-current-sheet {
  display:inline-block;
  margin:0 0 10px;
  padding:5px 10px;
  border-radius:999px;
  background:#f2eef9;
  color:#4c3973;
  font-weight:800;
  font-size:14px;
}
.ca-sheet-picker[hidden], .ca-change-sheet[hidden] { display:none !important; }
.ca-sheet-picker {
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:8px 0 12px;
}
.ca-sheet-choice {
  min-height:0 !important;
  padding:5px !important;
  border:2px solid #ddd !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#332747 !important;
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:stretch;
  text-align:center;
  overflow:hidden;
}
.ca-sheet-choice img {
  width:100%;
  aspect-ratio:2048/1448;
  object-fit:cover;
  background:#fff;
  border-radius:8px;
}
.ca-sheet-choice span {
  display:block;
  font-size:11px;
  line-height:1.15;
  font-weight:800;
}
.ca-sheet-choice.is-selected {
  border-color:var(--purple) !important;
  box-shadow:0 0 0 3px rgba(104,71,173,.18);
}
.ca-colour-game[data-mode="free"] .ca-intro-card {
  width:min(94%,980px);
  max-height:86%;
  overflow:auto;
}
.ca-change-sheet { background:#f0ebf8 !important; color:#44306d !important; }
@media (max-width:900px){
  .ca-sheet-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:620px){
  .ca-sheet-picker { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .ca-sheet-choice span { font-size:10px; }
  .ca-current-sheet { font-size:12px; }
}

/* v0.6.0: Cloudflare-backed BSL sign video delivery. */
.ca-sign-media {
  width:100%;
  max-width:240px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0 auto 10px;
}
.ca-sign-media[hidden] { display:none !important; }
.ca-sign-video {
  display:block;
  width:100%;
  max-height:330px;
  aspect-ratio:9/16;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
}
.ca-replay-sign {
  min-height:44px;
  padding:9px 14px;
  border:2px solid #6847ad;
  border-radius:12px;
  background:#f4f0fb;
  color:#44306d;
  font:700 14px/1.2 inherit;
  cursor:pointer;
  touch-action:manipulation;
}
.ca-replay-sign[hidden], .ca-sign-media-note[hidden] { display:none !important; }
.ca-sign-media-note { color:#665b70; text-align:center; }
.ca-word-panel { justify-content:flex-start; }
.ca-word-panel .ca-target-word { margin:0 0 12px; }
@media (max-width:900px){
  .ca-sign-media { max-width:210px; }
  .ca-sign-video { max-height:300px; }
}
@media (max-width:620px){
  .ca-sign-media { max-width:180px; }
  .ca-sign-video { max-height:260px; }
}


/* v0.6.1: larger precision workspace, protected clue area, and sound-ready sign panel. */
@media (min-width:1100px){
  .ca-colour-game {
    width:min(96vw,1900px);
    max-width:none;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
  .ca-colour-shell {
    grid-template-columns:minmax(0,1fr) 360px;
    gap:22px;
  }
}
.ca-sign-panel {
  padding:18px 16px 22px;
  overflow:visible;
}
.ca-word-panel .ca-level-title {
  margin-bottom:8px;
}
.ca-word-panel .ca-target-word {
  position:relative;
  z-index:3;
  width:100%;
  max-width:100%;
  margin:0 0 14px;
  padding:5px 2px 7px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:keep-all;
  line-height:1.05;
  letter-spacing:.025em;
  font-size:clamp(28px,2.35vw,48px);
  box-sizing:border-box;
  padding-inline:12px;
  background:#fff;
}
.ca-sign-media {
  position:relative;
  z-index:1;
  max-width:300px;
  margin:0 auto 12px;
}
.ca-sign-video {
  width:100%;
  max-height:470px;
  border-radius:18px;
}
.ca-replay-sign {
  min-height:50px;
  min-width:190px;
  padding:11px 18px;
  font-size:15px;
}
.ca-prompt {
  font-size:17px;
  line-height:1.45;
  margin-top:15px;
}
.ca-status {
  font-size:16px;
  line-height:1.45;
}
@media (max-width:1099px){
  .ca-colour-game { width:100%; left:auto; transform:none; }
  .ca-colour-shell { grid-template-columns:minmax(0,1fr) 310px; }
  .ca-sign-media { max-width:255px; }
  .ca-sign-video { max-height:410px; }
}
@media (max-width:900px){
  .ca-colour-shell { grid-template-columns:1fr; }
  .ca-sign-panel { width:100%; }
  .ca-sign-media { max-width:300px; }
  .ca-sign-video { max-height:470px; }
  .ca-word-panel .ca-target-word { font-size:clamp(32px,7vw,52px); }
}
@media (max-width:620px){
  .ca-paper-wrap.is-playing { inset:3.5% 3.5% 3.5% 3.5%; }
  .ca-sign-media { max-width:240px; }
  .ca-sign-video { max-height:390px; }
  .ca-word-panel .ca-target-word { font-size:clamp(30px,9vw,46px); letter-spacing:.02em; }
}

/* v0.6.2: Cloudflare-backed Catrin narration controls. */
.ca-replay-catrin {
  min-height:44px;
  padding:9px 14px;
  margin:0 0 10px;
  border:2px solid #6847ad;
  border-radius:12px;
  background:#fff7df;
  color:#44306d;
  font:700 14px/1.2 inherit;
  cursor:pointer;
  touch-action:manipulation;
}
.ca-replay-catrin[hidden] { display:none !important; }
.ca-catrin-audio { display:none !important; }

/* v0.6.3: Games Core reward integration and cinematic sheet entry. */
.ca-table{
  background:none!important;
  isolation:isolate;
  perspective:1200px;
}
.ca-table-bg{
  position:absolute;
  z-index:0;
  inset:-9%;
  background:center/cover no-repeat;
  transform:scale(1) rotate(0deg);
  transform-origin:center center;
  will-change:transform,filter;
}
.ca-paper-wrap{
  z-index:2;
  transition:transform 3.9s cubic-bezier(.18,.76,.18,1),inset 3.9s cubic-bezier(.18,.76,.18,1)!important;
  will-change:transform,inset;
}
.ca-table.is-cinematic .ca-table-bg{
  animation:ca-table-camera 3.9s cubic-bezier(.18,.76,.18,1) both;
}
.ca-table.has-entered .ca-table-bg{
  transform:scale(1.13) rotate(-5.5deg);
  filter:saturate(.96) brightness(.94);
}
.ca-table.is-cinematic .ca-paper{
  animation:ca-paper-camera 3.9s cubic-bezier(.18,.76,.18,1) both;
}
.ca-table::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.18),rgba(255,255,255,0) 48%,rgba(21,11,4,.12) 100%);
}
.ca-table.is-cinematic::after{animation:ca-camera-vignette 3.9s ease both}
@keyframes ca-table-camera{
  0%{transform:scale(1) rotate(0deg);filter:saturate(1) brightness(1)}
  22%{transform:scale(1.025) rotate(-1.3deg);filter:saturate(1.03) brightness(1.02)}
  62%{transform:scale(1.085) rotate(-3.8deg);filter:saturate(1) brightness(.98)}
  100%{transform:scale(1.13) rotate(-5.5deg);filter:saturate(.96) brightness(.94)}
}
@keyframes ca-paper-camera{
  0%{box-shadow:0 8px 18px rgba(0,0,0,.24)}
  38%{box-shadow:0 15px 34px rgba(0,0,0,.34)}
  100%{box-shadow:0 5px 18px rgba(0,0,0,.18)}
}
@keyframes ca-camera-vignette{
  0%{opacity:0}
  30%{opacity:.35}
  72%{opacity:.18}
  100%{opacity:0}
}
.ca-jewel{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid!important;
  place-items:center;
  transform:none!important;
}
.ca-jewel img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.16));
}
.ca-jewel.is-free::before{content:"✦";font-size:34px;color:var(--purple)}
.ca-jewel.is-free img{display:none!important}
.ca-jewel-card:has(.ca-jewel.is-earned){border-color:#65ad78;background:#f4fbf6}
.ca-shared-reward{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:14px;
  padding:10px 12px;
  border:3px solid #f0b43c;
  border-radius:17px;
  background:#fff8dc;
  text-align:left;
}
.ca-shared-reward[hidden]{display:none!important}
.ca-shared-reward img{width:62px;height:62px;object-fit:contain;flex:0 0 62px}
.ca-shared-reward strong{font-size:14px;line-height:1.3;color:#604913}
@media(max-width:620px){
  .ca-jewel{width:40px;height:40px;flex-basis:40px}
  .ca-shared-reward img{width:52px;height:52px;flex-basis:52px}
}
@media(prefers-reduced-motion:reduce){
  .ca-paper-wrap{transition-duration:.65s!important}
  .ca-table.is-cinematic .ca-table-bg{animation-duration:.65s!important}
  .ca-table.is-cinematic .ca-paper{animation-duration:.65s!important}
  .ca-table.is-cinematic::after{animation-duration:.65s!important}
}

/* v0.6.8: contained palette labels, stable muted video, and centred responsive gameplay. */
.ca-palette { grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
.ca-swatch {
  min-width:0;
  max-width:100%;
  overflow:hidden;
  justify-content:flex-start;
}
.ca-swatch-name {
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:center;
  font-size:clamp(11px,1vw,15px);
  line-height:1.08;
  letter-spacing:.02em;
}
.ca-sign-media { background:#fff; min-height:180px; }
.ca-sign-video { background:#fff!important; visibility:visible; }
.ca-sign-media-note { min-height:1.3em; }

@media (min-width:1100px){
  .ca-colour-game {
    width:min(1500px,calc(100vw - 32px));
    max-width:1500px;
    left:auto;
    transform:none;
    margin-inline:auto;
  }
  .ca-colour-shell {
    grid-template-columns:minmax(0,1fr) minmax(250px,290px);
    gap:24px;
    width:100%;
    margin-inline:auto;
  }
  .ca-workspace { min-width:0; width:100%; overflow:hidden; }
  .ca-table { min-width:0; width:100%; overflow:hidden; }
  .ca-sign-panel { min-width:0; width:100%; max-width:290px; justify-self:center; }
}
@media (max-width:1099px){
  .ca-colour-shell { grid-template-columns:1fr; }
  .ca-sign-panel { width:100%; max-width:100%; }
}
@media (max-width:700px){
  .ca-colour-game { width:min(100%,calc(100vw - 16px)); }
  .ca-palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ca-swatch-name { font-size:12px; }
}


/* v0.6.14: target colour/shade labels stay on one line; JS shrinks only when needed. */
.ca-word-panel .ca-target-word { white-space:nowrap!important; overflow-wrap:normal!important; word-break:keep-all!important; }