/* aitism learn: Cards and games: pairs, bingo, dominoes and a board game. Classes start gm-.
   Every size is in em of the sheet base. Cards are cells of the kit's .cutgrid (dashed cut lines, the ✂ mark);
   a picture grows to fill its card through container units, so few cards always means bigger pictures. */

/* ---------- shared ---------- */
.gm-fill { flex: 1 1 auto; min-height: 0; }
.gm-k { font-weight: 700; font-size: .62em; line-height: 1.2; }
.gm-ghost { font-size: .6em; }
.gm-pic { display: block; font-family: var(--emoji); line-height: 1; text-align: center; }
.gm-pic .em { display: block; line-height: 1; }
.gm-word, .gm-a { display: block; font-weight: 700; line-height: 1.12; text-align: center; text-wrap: balance; }
.gm-cw { display: block; font-weight: 700; line-height: 1.1; text-align: center; text-wrap: balance; }

/* ---------- pairs: one card per cell, the picture as big as the card allows ---------- */
.gm-card { container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06em;
  padding: .25em .35em; text-align: center; overflow: hidden; }
.gm-card .gm-pic { font-size: min(2.9em, 60cqh, 64cqw); }
.gm-card .gm-pic:only-child { font-size: min(3.3em, 72cqh, 70cqw); }
.gm-card .gm-cw { font-size: min(var(--fs), 19cqh); }
.gm-card .gm-word { font-size: min(var(--fs), 34cqh); }
.gm-card .gm-a { font-size: min(var(--fs), 30cqh); }
.gm-q { font-size: min(.78em, 15cqh); line-height: 1.25; text-wrap: balance; }
.gm-qem { font-size: min(1.15em, 22cqh); line-height: 1; margin-bottom: .1em; }

/* ---------- bingo: two boards with solid squares, caller cards under them ---------- */
.gm-bb { display: flex; flex-direction: column; gap: .15em; padding: .2em .4em .4em; min-height: 0; }
.gm-bh { font-weight: 700; font-size: .62em; text-align: center; }
.gm-bgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
  gap: 2px; background: #111; border: 3px solid #111; border-radius: .3em; overflow: hidden; }
.gm-bgrid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gm-cell { container-type: size; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .04em; padding: .12em; overflow: hidden; }
.gm-cell .gm-pic { font-size: min(2.6em, 70cqh, 72cqw); }
.gm-cell .gm-pic:has(+ .gm-cw) { font-size: min(2.2em, 56cqh, 64cqw); }
.gm-cell .gm-cw { font-size: min(var(--fs), 20cqh); }
.gm-cell .gm-word { font-size: min(var(--fs), 30cqh); }
.gm-callw { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-top: .1em; }
.gm-callw .cut-k { text-align: right; }
.gm-callers { flex: none; grid-auto-rows: 2.9em; margin-top: .15em; }
.gm-call { container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04em; padding: .1em; overflow: hidden; }
.gm-call .gm-pic { font-size: min(1.6em, 58cqh, 60cqw); }
.gm-call .gm-pic:only-child { font-size: min(2em, 76cqh, 70cqw); }
.gm-call .gm-cw { font-size: min(var(--fs), 22cqh); }

/* ---------- dominoes: two halves split by a solid bar; the Start domino wears a line-colour ring ---------- */
.gm-dom { container-type: size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: .2em .25em; overflow: hidden; }
.gm-dom::after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; border-left: 3px solid #111; margin-left: -1.5px; }
.gm-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04em; min-width: 0; min-height: 0; padding: 0 .3em; }
.gm-pp { display: flex; flex-direction: column; align-items: center; gap: .04em; }
.gm-dom .gm-pic { font-size: min(3.2em, 66cqh, 34cqw); }
.gm-dom .gm-pp:has(.gm-cw) .gm-pic { font-size: min(3em, 52cqh, 32cqw); }
.gm-dom .gm-cw { font-size: min(var(--fs), 17cqh); }
.gm-dom .gm-word { font-size: min(var(--fs), 30cqh); }
.gm-startk { position: absolute; top: .45em; left: .5em; z-index: 1; font-weight: 700; font-size: min(.55em, 16cqh); line-height: 1.2;
  padding: .02em .6em; border: .16em solid var(--line); border-radius: 999px; background: #fff; }
.gm-num { font-weight: 700; font-size: min(1.8em, 50cqh); line-height: 1; }
.gm-sum { display: flex; flex-direction: column; align-items: center; gap: .12em; }
.gm-cnt { display: flex; align-items: center; gap: .15em; }
.gm-cnt .op { font-size: .7em; }
.gm-grp { font-size: min(.62em, 13cqh); }
.gm-sem { font-size: min(1.25em, 30cqh); line-height: 1; }
.gm-st { font-size: min(1.05em, 26cqh); line-height: 1.1; white-space: nowrap; }

/* ---------- board game: squares on a rail in the line colour, Start to Finish ---------- */
.gm-board { --gx: .55em; --gy: .5em; position: relative; display: grid; gap: var(--gy) var(--gx); align-content: center; }
.gm-sq { container-type: size; position: relative; min-width: 0; min-height: 0; background: #fff; border: 2px solid #111; border-radius: .3em;
  display: grid; place-items: center; }
/* the rail runs across each gap, from the outer edge of one square to the next */
.gm-sq::after, .gm-start::after { content: ""; position: absolute; background: var(--line); }
.gm-r::after { left: calc(100% + 1px); top: 50%; width: calc(var(--gx) + 2px); height: .24em; margin-top: -.12em; }
.gm-l::after { right: calc(100% + 1px); top: 50%; width: calc(var(--gx) + 2px); height: .24em; margin-top: -.12em; }
.gm-d::after { top: calc(100% + 1px); left: 50%; height: calc(var(--gy) + 2px); width: .24em; margin-left: -.12em; }
.gm-n { position: absolute; top: .28em; left: .32em; font: 700 min(.42em, 17cqh)/1 var(--ui); }
.gm-sq .gm-pic { font-size: min(2.2em, 60cqh, 56cqw); margin-top: .1em; }
.gm-mo { font-weight: 700; font-size: min(.62em, 23cqh, 17cqw); line-height: 1.1; text-align: center; padding: .85em .1em 0; text-wrap: balance; }
.gm-arr { font-family: var(--ui); white-space: nowrap; }
.gm-start { position: relative; display: grid; place-items: center; background: #fff; border: .14em solid var(--line); border-radius: 999px; }
.gm-start span { font-weight: 700; font-size: .62em; line-height: 1; }
.gm-fin { align-self: center; height: 1.9em; display: flex; align-items: center; gap: .3em; min-width: 0; padding: 0 .7em 0 .18em; border-radius: 999px;
  background: var(--line); color: var(--line-ink); white-space: nowrap; overflow: hidden; }
.gm-fin.gm-fr { justify-content: flex-end; }
.gm-fin .em { flex: none; font-size: 1.05em; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; display: grid; place-items: center; line-height: 1; }
.gm-fin b { font-size: .66em; }
.gm-fin span:not(.em) { font-size: .62em; }
.gm-fin.done { background: #fff; color: #111; border: .14em solid var(--line); }
.gm-kit { display: flex; align-items: flex-end; gap: .4em 1.1em; }
.gm-kp { display: grid; gap: .15em; justify-items: start; }
.gm-ctrs { grid-template-columns: repeat(var(--cols), 2.3em); grid-auto-rows: 2.3em; margin-top: .25em; }
.gm-ctr { display: grid; place-items: center; }
.gm-ctr .gm-pic { font-size: 1.45em; }
.gm-spin { display: block; width: 4.4em; height: 4.4em; overflow: visible; }
.gm-cut { fill: #fff; stroke: #666; stroke-width: 1.5; stroke-dasharray: 4 3; }
.gm-spk { fill: none; stroke: #111; stroke-width: 1.2; }
.gm-sn text { font: 700 15px var(--ui); fill: #111; text-anchor: middle; dominant-baseline: central; }
.gm-hub { fill: var(--line); stroke: #111; stroke-width: 1.2; }
.gm-hint { flex: 1; align-self: center; }