/* TalentJR learning games, batch 6 (2026-10-12): Sudoku for Kids, Maths Cage Puzzle, ABC Letter Game, Fraction Match,
   Times Table Snake. Loaded by views/playgames/game.php for these games only (versioned by file time), on top of the
   .tj-gm-* rules in talentjr-ds.css. Play screens: assets/js/tj-gameplay.js. */

/* sudoku: thick lines between boxes */
.tj-gm-sudo { display: grid; max-width: 300px; margin: 0 auto; border: 3px solid var(--tj-ink); border-radius: 10px; overflow: hidden; background: #fff; }
.tj-gm-sudo.s4 { grid-template-columns: repeat(4, 1fr); }
.tj-gm-sudo.s6 { grid-template-columns: repeat(6, 1fr); max-width: 360px; }
.tj-gm-scell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1;
  font: 800 clamp(1.2rem, 6vw, 1.7rem) var(--tj-font-heading); color: var(--tj-ink); }
.tj-gm-scell.br { border-right: 3px solid var(--tj-ink); }
.tj-gm-scell.bb { border-bottom: 3px solid var(--tj-ink); }
.tj-gm-sudo .tj-gm-cellin, .tj-gm-cage .tj-gm-cellin { border-radius: 0; }
.tj-gm-cellin.clash { background: #FEE2E2; color: var(--tj-danger); }

/* cage puzzle: thick borders round each cage, target + sign in the top-left corner */
.tj-gm-cage { display: grid; max-width: 340px; margin: 0 auto; border-right: 3px solid var(--tj-ink); border-bottom: 3px solid var(--tj-ink); background: #fff; }
.tj-gm-cage.s3 { grid-template-columns: repeat(3, 1fr); max-width: 270px; }
.tj-gm-cage.s4 { grid-template-columns: repeat(4, 1fr); }
.tj-gm-cage.s5 { grid-template-columns: repeat(5, 1fr); max-width: 380px; }
.tj-gm-ccell { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-top: 1px dashed #CBD5E1; border-left: 1px dashed #CBD5E1;
  font: 800 clamp(1.2rem, 6vw, 1.7rem) var(--tj-font-heading); color: var(--tj-ink); }
.tj-gm-ccell.ct { border-top: 3px solid var(--tj-ink); }
.tj-gm-ccell.cl { border-left: 3px solid var(--tj-ink); }
.tj-gm-ccell .tj-gm-cellin { padding-top: 12px; }
.tj-gm-clbl { position: absolute; top: 2px; left: 4px; z-index: 1; pointer-events: none; font: 700 .72rem/1 var(--tj-font-body); font-style: normal; color: var(--tj-accent-text); }

/* ABC letter game */
.tj-gm-abcq { text-align: center; min-height: 120px; font: 700 1.2rem var(--tj-font-heading); }
.tj-gm-abcq b { display: block; margin-top: 4px; }
.tj-gm-abcbig { display: block; font: 800 5rem/1.1 var(--tj-font-heading); color: var(--tj-action); }
.tj-gm-abcseq { display: block; font: 800 3rem/1.2 var(--tj-font-heading); letter-spacing: 6px; color: var(--tj-ink); }
.tj-gm-abcseq u { color: var(--tj-action); text-decoration: none; }
.tj-gm-abco button { min-height: 76px; font-size: 2.4rem; }

/* fraction match: face-up cards */
.tj-gm-fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 540px; margin: 0 auto; }
.tj-gm-fcard { min-height: 84px; padding: 6px 4px; border: 2px solid var(--tj-line); border-radius: 14px; background: var(--tj-card); cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; color: var(--tj-ink); font: 800 1.3rem var(--tj-font-heading); }
.tj-gm-fcard.sel { border-color: var(--tj-accent); background: #EEF2FF; box-shadow: 0 0 0 3px rgba(108, 99, 255, .25); }
.tj-gm-fcard.match { border-color: var(--tj-success); background: #DCFCE7; color: #14532D; cursor: default; }
.tj-gm-fcard.bad { border-color: var(--tj-danger); animation: tjGmShake .4s; }
.tj-gm-fcard:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 2px; }
.tj-gm-fr { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.tj-gm-fr span:first-child { padding: 0 6px 2px; border-bottom: 3px solid currentColor; }
.tj-gm-fr span:last-child { padding-top: 2px; }
.tj-gm-ftxt.w { font: 700 .85rem/1.25 var(--tj-font-body); text-align: center; }

/* times-table snake */
.tj-gm-snk { display: grid; gap: 3px; max-width: 360px; margin: 6px auto 10px; padding: 6px; border-radius: 14px; background: #ECFCCB; }
.tj-gm-snk > span, .tj-gm-food { aspect-ratio: 1; border-radius: 7px; }
.tj-gm-snk > span { background: rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.tj-gm-snk > span.tj-gm-sb { background: #22C55E; }
.tj-gm-snk > span.tj-gm-sh { background: #15803D; }
.tj-gm-food { padding: 0; border: 2px solid #F59E0B; background: #FFF7ED; color: var(--tj-ink); font: 800 clamp(.8rem, 3.6vw, 1.05rem) var(--tj-font-heading); cursor: pointer; touch-action: manipulation; }
.tj-gm-food:focus-visible { outline: 3px solid var(--tj-action); outline-offset: 1px; }
.tj-gm-dpad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-areas: ". u ." "l . r" ". d ."; gap: 6px; justify-content: center; }
.tj-gm-dpad button { height: 52px; border: 2px solid var(--tj-line); border-radius: 14px; background: var(--tj-card); font-size: 1.3rem; color: var(--tj-ink); cursor: pointer; touch-action: manipulation; }
.tj-gm-dpad button:active { background: var(--tj-brand-50); }
.tj-gm-dpad .up { grid-area: u; } .tj-gm-dpad .left { grid-area: l; } .tj-gm-dpad .right { grid-area: r; } .tj-gm-dpad .down { grid-area: d; }

@media (max-width: 420px) { .tj-gm-fgrid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tj-gm-fcard.bad { animation: none; } }