/* aitism learn: more Cards and games activities. Every class starts .g2-; sizes in em so --k and Bigger text scale them.
   Cards size their pictures and words with container units, so fewer cards always means bigger pictures.
   Black on white only; solid lines for boards, dashed lines only where something is cut, dotted only where it is folded. */

/* ---------- shared ---------- */
.g2-fill { flex: 1 1 0; min-height: 0; }
.g2-k { margin: 0; font-weight: 700; font-size: .62em; line-height: 1.2; }
.g2-ghost { font-size: .6em; }
.g2-note { margin: 0; font-size: .62em; line-height: 1.25; text-wrap: pretty; }
.g2-row { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: .2em 1em; }
.g2-row .cut-k { margin: 0; max-width: 72%; text-align: right; }
.g2-pic { display: block; font-family: var(--emoji); font-style: normal; line-height: 1; text-align: center; }
.g2-pic .em { display: block; line-height: 1; }
.g2-w, .g2-word { display: block; max-width: 100%; font-weight: 700; line-height: 1.12; text-align: center; text-wrap: balance; }
.g2-name { display: flex; align-items: baseline; gap: .35em; min-width: 0; font-weight: 400; }
.g2-nline { flex: 1; min-width: 3em; height: 1.1em; border-bottom: 2px solid #111; }
.g2-bx { display: inline-block; flex: none; width: 1.6em; height: 1.25em; border: 2px solid #111; border-radius: .15em; background: #fff; vertical-align: middle; }

/* a cut-out grid: dashed cut lines and the scissors mark, like the kit's .cutgrid; its rows share the height they are given */
.g2-cut { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  border-top: 2px dashed #666; border-left: 2px dashed #666; margin-top: .3em; }
.g2-cut::before { content: "\2702"; position: absolute; top: -.6em; left: .5em; font: 400 .7em/1 "Segoe UI Symbol", var(--ui); background: #fff; padding: 0 .15em; color: #444; z-index: 1; }
.g2-cut > * { border-right: 2px dashed #666; border-bottom: 2px dashed #666; min-width: 0; min-height: 0; }

/* a card or a square: one picture, or a picture and its word, as big as the card allows */
.g2-card { container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06em;
  min-width: 0; min-height: 0; padding: .25em .35em; text-align: center; overflow: hidden; }
.g2-card .g2-pic { font-size: min(2.6em, 56cqh, 64cqw); }
.g2-card .g2-pic:only-child { font-size: min(3.2em, 72cqh, 70cqw); }
.g2-card .g2-w { font-size: min(var(--fs), 19cqh, 100cqw / var(--wl, 1.84)); }
.g2-card .g2-word { font-size: min(var(--fs), 34cqh, 100cqw / var(--wl, 1.84)); }

/* a board: solid squares, drawn as a grid on black with white cells */
.g2-lgrid, .g2-rgrid, .g2-gb { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 2px; background: #111; border: 3px solid #111; border-radius: .3em; overflow: hidden; }
.g2-lgrid > .g2-card, .g2-rgrid > .g2-card, .g2-gb > .g2-card { background: #fff; padding: .12em .15em; }

/* ---------- lotto: two boards to cut apart, and a card for every square ---------- */
.g2-lboards { flex: 1.15 1 0; min-height: 0; }
.g2-lb { display: flex; flex-direction: column; gap: .15em; padding: .2em .4em .4em; }
.g2-lh { margin: 0; flex: none; font-weight: 700; font-size: .62em; line-height: 1.2; text-align: center; }
.g2-lgrid { flex: 1 1 0; min-height: 0; }
.g2-calls { flex: 1 1 0; min-height: 0; }

/* ---------- roll and colour: a key from the dice to the pictures, and a board to colour ---------- */
.g2-rkey { flex: none; display: flex; flex-direction: column; gap: .2em; }
.g2-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25em .4em; }
.g2-keys.two { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g2-kc { display: flex; align-items: center; justify-content: center; gap: .25em; min-width: 0; padding: .15em .3em; border: 2px solid #111; border-radius: .3em; }
.g2-die { display: block; flex: none; width: 1.45em; height: 1.45em; }
.g2-die rect { fill: #fff; stroke: #111; stroke-width: 2.4; }
.g2-die circle { fill: #111; }
.g2-kn { min-width: 1.1em; font-size: 1.05em; line-height: 1; text-align: center; }
.g2-keq { font: 400 .75em/1 var(--ui); }
.g2-kc .g2-pic { font-size: 1.45em; }
.g2-keys.two .g2-kc { padding: .1em .2em; }
.g2-keys.two .g2-pic { font-size: 1.25em; }
.g2-rgrid { flex: 1 1 0; min-height: 0; }
.g2-rsq .g2-pic:only-child { font-size: min(1.8em, 46cqh, 46cqw); }

/* ---------- spinner: the disc and how to spin it, beside the table that keeps count ---------- */
.g2-sp { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .6em; }
.g2-spl { display: flex; flex-direction: column; gap: .35em; min-width: 0; min-height: 0; }
.g2-spw { flex: 1 1 0; min-height: 4em; container-type: size; display: grid; place-items: center; }
.g2-spc { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); container-type: size; }
.g2-spsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g2-spo { fill: #fff; stroke: #111; stroke-width: 3; }
.g2-spsvg line { stroke: #111; stroke-width: 2; }
.g2-hub { fill: #111; }
.g2-spp, .g2-dbp { position: absolute; transform: translate(-50%, -50%); font-family: var(--emoji); line-height: 1; }
.g2-spp .em, .g2-dbp .em { display: block; line-height: 1; }
.g2-howw { flex: none; display: flex; flex-direction: column; gap: .15em; }
.g2-how { margin: 0; padding: 0; list-style: none; display: grid; gap: .2em; font-size: .58em; line-height: 1.2; }
.g2-how li { display: flex; align-items: baseline; gap: .35em; }
.g2-how .em { flex: none; }
.g2-tab { display: grid; grid-auto-rows: 1fr; min-width: 0; border-top: 2px solid #111; border-left: 2px solid #111; }
.g2-tr { display: contents; }
.g2-td { display: flex; align-items: center; justify-content: center; gap: .2em; min-width: 0; padding: .15em .25em;
  border-right: 2px solid #111; border-bottom: 2px solid #111; }
.g2-th .g2-td, .g2-tall .g2-td:first-child { font-weight: 700; font-size: .55em; line-height: 1.15; text-align: center; padding: .25em .3em; }
.g2-gate { display: inline-block; width: 1.5em; height: 1.05em; vertical-align: middle; }
.g2-gate path { fill: none; stroke: #111; stroke-width: 2.2; stroke-linecap: round; }
.g2-tp { flex-direction: column; gap: .05em; }
.g2-tp .g2-pic { font-size: 1.05em; }
.g2-tw { font-size: .5em; font-weight: 700; line-height: 1.1; text-align: center; }
.g2-tbx { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .15em; align-content: center; }
.g2-cb { display: block; aspect-ratio: 1; max-height: 1.3em; border: 2px solid #111; border-radius: .12em; }
.g2-spins { flex: none; display: flex; align-items: center; gap: .5em; }
.g2-ticks { display: grid; grid-template-columns: repeat(var(--n), 1.05em); gap: .2em; }
.g2-tk { display: block; width: 1.05em; height: 1.05em; border: 2px solid #111; border-radius: .15em; }

/* ---------- noughts and crosses: a picture for each player, and a grid for every game ---------- */
.g2-key { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.g2-np { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .45em; min-width: 0; padding: .3em .5em; border: 2px solid #111; border-radius: .35em; font-size: .7em; }
.g2-mk { display: inline-block; flex: none; width: 1.3em; height: 1.3em; vertical-align: middle; }
.g2-mk path, .g2-mk circle { fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; }
.g2-npp { display: inline-flex; align-items: center; gap: .25em; min-width: 0; font-weight: 700; }
.g2-npp .g2-pic { font-size: 1.5em; }
.g2-np .g2-name { flex-basis: 100%; }
.g2-ways { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .2em .9em; }
.g2-ways .g2-k { margin-right: .2em; }
.g2-way { display: inline-flex; align-items: center; gap: .3em; font-size: .6em; font-weight: 700; }
.g2-ng { display: block; overflow: visible; }
.g2-ng path { fill: none; stroke: #111; stroke-width: 3; stroke-linecap: round; }
.g2-way .g2-ng { width: 2.4em; height: 2.4em; }
.g2-way .g2-ng path { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.g2-way .g2-ng .g2-win { stroke-width: 4px; }
.g2-games { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .45em .7em; }
.g2-game { display: flex; flex-direction: column; gap: .2em; min-width: 0; min-height: 0; }
.g2-gh { margin: 0; flex: none; display: flex; align-items: center; justify-content: center; gap: .35em; font-size: .58em; font-weight: 700; line-height: 1.2; }
.g2-gh .g2-mk { width: 1.2em; height: 1.2em; }
.g2-gw { flex: 1 1 0; min-width: 0; min-height: 0; position: relative; }
.g2-gw > .g2-ng { position: absolute; inset: 0; width: 100%; height: 100%; }
.g2-one { display: flex; align-items: stretch; gap: .8em; }
.g2-starts { margin: 0; padding: 0; list-style: none; flex: none; display: flex; flex-direction: column; justify-content: center; gap: .5em; font-size: .62em; font-weight: 700; }
.g2-ctrs { flex: none; width: max-content; grid-template-columns: repeat(var(--cols), 2.3em); grid-auto-rows: 2.3em; }

/* ---------- dots and boxes: a square of dots, and a score box for each player ---------- */
.g2-dbw { min-height: 5em; container-type: size; display: grid; place-items: center; }
.g2-db { position: relative; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); container-type: size; }
.g2-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.g2-dots circle { fill: #111; }
.g2-score { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.g2-sc { display: grid; gap: .25em; min-width: 0; padding: .3em .5em; border: 2px solid #111; border-radius: .35em; font-size: .62em; }
.g2-sc p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2em .4em; }
.g2-sc .g2-name { flex: 1; }
.g2-sc .g2-bx { width: 2.4em; height: 1.7em; }

/* ---------- treasure hunt: clue cards with a topic picture in the corner, the treasure, and a list to tick ---------- */
.g2-clue { position: relative; padding: 1em .4em .35em; }
.g2-ck { position: absolute; top: .3em; left: .45em; font-size: min(.55em, 13cqh); font-weight: 700; line-height: 1.1; }
.g2-stamp { position: absolute; top: .2em; right: .3em; font-family: var(--emoji); font-size: min(1em, 18cqh); line-height: 1; }
.g2-stamp .em { display: block; line-height: 1; }
.g2-cf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12em; width: 100%; min-height: 0; }
.g2-clue .g2-pic { font-size: min(2.4em, 44cqh, 52cqw); }
.g2-clue .g2-pic.g2-sm { font-size: min(1.2em, 20cqh); }
.g2-hs { display: block; font-size: min(.66em, 12cqh); line-height: 1.2; text-wrap: balance; }
.g2-tre .g2-hs { font-weight: 700; }
.g2-list { justify-content: flex-start; align-items: stretch; position: relative; padding: 1.15em .45em .35em; }
.g2-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: .2em .6em;
  font-size: min(.62em, 10cqh); line-height: 1.2; }
.g2-list li { display: flex; align-items: center; gap: .3em; min-width: 0; text-align: left; }
.g2-list li .g2-pic { flex: none; font-size: 1.3em; }
.g2-list li > span:not(.g2-pic) { flex: 1; min-width: 0; }
.g2-tb { flex: none; width: 1.05em; height: 1.05em; border: 2px solid #111; border-radius: .15em; }
.g2-gu { margin: 0; flex: none; }

/* ---------- snap ---------- */
.g2-snc { padding: .2em .3em; }

/* ---------- guess the picture: a board to cover, and question cards that take only the room they need ---------- */
.g2-qs { flex: none; grid-auto-rows: auto; }
.g2-q { container-type: normal; flex-direction: row; justify-content: flex-start; gap: .4em; padding: .3em .5em; text-align: left; font-size: .62em; line-height: 1.2; }
.g2-q .em { flex: none; font-size: 1.15em; line-height: 1; }
.g2-yn { justify-content: center; font-weight: 700; font-size: .75em; }

/* ---------- flash cards: two halves split by a dotted fold line ---------- */
.g2-fc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g2-fh { container-type: size; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06em;
  min-width: 0; min-height: 0; padding: .85em .3em .2em; text-align: center; overflow: hidden; }
.g2-fh + .g2-fh { border-left: 2px dotted #111; }
.g2-fl { position: absolute; top: .3em; left: .4em; font-size: .52em; font-weight: 700; line-height: 1.1; color: #333; }
.g2-fh .g2-pic { font-size: min(2.4em, 52cqh, 60cqw); }
.g2-fh .g2-pic:last-child { font-size: min(3em, 64cqh, 70cqw); }
.g2-fh .g2-w { font-size: min(var(--fs), 19cqh, 100cqw / var(--wl, 1.84)); }
.g2-fh .g2-word { font-size: min(var(--fs), 34cqh, 100cqw / var(--wl, 1.84)); }