/* Styles for the block games, the word games and the reading games (version 1.4), and for the shelves of the games hub. */

/* ---------- what every game here shares: the card, the row of dots, the question, the answers, the ending ---------- */
.g3 { max-width: 100%; }
.g3-card { display: grid; gap: calc(8px * var(--k)); justify-items: center; padding-top: calc(12px * var(--k)); }
.g3-card > * { min-width: 0; max-width: 100%; }
.g3-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.g3-dots { display: flex; gap: 6px; align-items: center; }
.g3-dots i { width: calc(14px * var(--k)); height: calc(14px * var(--k)); border-radius: 50%; background: var(--panel3, #dfe6f5); box-shadow: inset 0 0 0 2px var(--line2); }
.g3-dots i.now { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 40%, transparent); }
.g3-dots i.ok { background: #1fb863; box-shadow: none; } .g3-dots i.done { background: #8fb4e8; box-shadow: none; }
.g3-level { font-size: calc(12.5px * var(--k)); font-weight: 700; color: var(--muted, #5b6785); background: var(--panel2); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.g3-q { margin: 0; text-align: center; font-weight: 800; font-size: calc(21px * var(--k)); line-height: 1.25; text-wrap: balance; }
.g3-q[hidden] { display: none; }
.g3-area { width: 100%; display: grid; justify-items: center; gap: calc(10px * var(--k)); }
.g3-msg { margin: 2px 0; min-height: 1.5em; } .g3-msg.ok { color: #0e8a47; } .g3-msg.soft { color: #a45a00; }
[data-theme="dark"] .g3-msg.ok { color: #7dffb5; } [data-theme="dark"] .g3-msg.soft { color: #ffd08a; }
.g3-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; min-height: calc(48px * var(--k)); }
.g3-acts:empty { display: none; }
.g3-cv { display: block; width: 100%; touch-action: none; outline: none; border-radius: 16px; -webkit-user-select: none; user-select: none; }
.g3-cv:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.g3-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(84px * var(--k)), 1fr)); gap: 10px; width: min(100%, 560px); }
.g3-choice { min-height: max(60px, calc(60px * var(--k))); font-size: calc(22px * var(--k)); line-height: 1.15; overflow-wrap: anywhere; }
.g3-choices.words { grid-template-columns: repeat(auto-fit, minmax(calc(130px * var(--k)), 1fr)); } .g3-choices.words .g3-choice { font-size: calc(18px * var(--k)); }
.g3-choices.long { grid-template-columns: minmax(0, 1fr); } .g3-choices.long .g3-choice { font-size: calc(16.5px * var(--k)); text-align: left; padding: 10px 16px; }
.g3-choice .pic { display: block; font-size: calc(40px * var(--k)); line-height: 1.1; }
.g3-choice[disabled] { opacity: .45; cursor: default; } .g3-choice.right[disabled] { opacity: 1; }
.g3-choice.dim { opacity: .4; }
.g3-fin { display: grid; gap: 8px; justify-items: center; text-align: center; padding: calc(10px * var(--k)) 0; }
.g3-fin-e { font-size: calc(64px * var(--k)); line-height: 1; }
.g3-stars { display: flex; gap: 4px; font-size: calc(30px * var(--k)); } .g3-stars span { filter: grayscale(1); opacity: .28; } .g3-stars span.on { filter: none; opacity: 1; }
.g3-pic { font-size: calc(72px * var(--k)); line-height: 1.1; text-align: center; }

/* ---------- a toy block made of a word or a letter (letter blocks, train cars, word parts) ---------- */
.g3-blk { --bc: #3d9dff; position: relative; display: inline-grid; place-items: center; min-width: max(48px, calc(50px * var(--k))); min-height: max(52px, calc(54px * var(--k))); padding: 4px 12px 8px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: calc(24px * var(--k)); line-height: 1.1; color: #fff; text-shadow: 0 2px 0 rgba(0,0,40,.22);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 78%, #fff) 0 16%, var(--bc) 17% 70%, color-mix(in srgb, var(--bc) 78%, #2a1a5e) 100%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bc) 62%, #2a1a5e), 0 8px 10px rgba(30,30,90,.18), inset 0 2px 0 rgba(255,255,255,.55), inset 3px 0 0 rgba(255,255,255,.14); transition: transform .12s; }
.g3-blk::after { content: ""; position: absolute; left: 12%; top: 9%; width: 30%; height: 9%; border-radius: 999px; background: rgba(255,255,255,.6); pointer-events: none; }
.g3-blk:active { transform: translateY(3px); } .g3-blk:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.g3-blk[disabled], .g3-blk.used { opacity: .25; cursor: default; }
.g3-blk.c0 { --bc: #ff5a66; } .g3-blk.c1 { --bc: #ff9a3c; } .g3-blk.c2 { --bc: #f2b705; } .g3-blk.c3 { --bc: #2fbf62; } .g3-blk.c4 { --bc: #3d9dff; } .g3-blk.c5 { --bc: #a273ff; } .g3-blk.c6 { --bc: #f564ad; } .g3-blk.c7 { --bc: #12b5b0; }
.g3-blk.word { font-size: calc(19px * var(--k)); padding: 6px 14px 9px; }
.g3-slot { display: inline-grid; place-items: center; min-width: max(48px, calc(50px * var(--k))); min-height: max(52px, calc(54px * var(--k))); border-radius: 14px; border: 3px dashed var(--line2); background: color-mix(in srgb, var(--panel2) 70%, transparent); font-weight: 800; font-size: calc(24px * var(--k)); color: var(--muted, #5b6785); padding: 0 6px; }
.g3-slot.fixed { border-style: solid; background: var(--panel2); color: var(--text); }
@keyframes g3-wob { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.g3-wob { animation: g3-wob .4s 2; }
@keyframes g3-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
.g3-pop { animation: g3-pop .32s; }
body.calm .g3-wob, body.calm .g3-pop { animation: none; }
@media (prefers-reduced-motion: reduce) { .g3-wob, .g3-pop { animation: none; } .g3-blk { transition: none; } }

/* ---------- Free Blocks ---------- */
.fb-main { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
#view .kcard.fb-table { padding: 8px; }
.fb-cv { width: min(100%, max(260px, calc((100 * var(--dvh) - 270px) * 1.14))); margin: 0 auto; cursor: pointer; }
.fb-tools { display: grid; gap: 10px; align-content: start; }
.fb-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fb-tool { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 56px; padding: 4px 2px; border-radius: 16px; border: 3px solid var(--line2); background: var(--panel2); color: var(--text); font: inherit; cursor: pointer; }
.fb-tool span { font-size: calc(22px * var(--k)); line-height: 1.15; } .fb-tool b { font-size: calc(12.5px * var(--k)); line-height: 1.15; }
.fb-tool.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink, #2a1a00); } .fb-tool[disabled] { opacity: .4; cursor: default; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.fb-pick { display: grid; place-items: center; min-height: 52px; padding: 2px; border-radius: 14px; border: 3px solid var(--line2); background: var(--panel2); cursor: pointer; color: var(--text); font: inherit; }
.fb-pick canvas { display: block; pointer-events: none; }
.fb-pick.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 26%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.fb-turn span { font-size: 22px; line-height: 1; } .fb-turn small { font-size: 11.5px; font-weight: 700; line-height: 1; } .fb-turn[disabled] { opacity: .35; cursor: default; }
.fb-color i { display: block; width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 3px 0 rgba(255,255,255,.5), inset 0 -4px 0 rgba(0,0,40,.18), 0 0 0 1px rgba(0,0,40,.12); }
.fb-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fb-acts .kbtn { padding-left: 8px; padding-right: 8px; min-width: 0; white-space: normal; text-align: center; line-height: 1.15; }
.fb-row:not(.fb-acts) { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); }
.fb-msg { margin: 0; min-height: 1.4em; font-size: calc(15px * var(--k)); }
.fb-tool:focus-visible, .fb-pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (min-width: 900px) { .fb-main { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; } .fb-cv { width: min(100%, max(320px, calc((100 * var(--dvh) - 250px) * 1.14))); } }
@media (max-height: 520px) and (orientation: landscape) { .fb-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .fb-cv { width: min(100%, max(240px, calc((100 * var(--dvh) - 120px) * 1.14))); } }

/* ---------- Copy the Build ---------- */
.cp-wrap { width: 100%; display: grid; gap: calc(10px * var(--k)); justify-items: center; }
.cp { display: grid; gap: 10px; width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.cp-pane { position: relative; width: 100%; border-radius: 18px; padding: 26px 8px 8px; background: linear-gradient(180deg, #e9f5ff, #f7fbff); box-shadow: inset 0 0 0 2px #cfe2fb; }
.cp-build { background: linear-gradient(180deg, #fff6e2, #fffcf3); box-shadow: inset 0 0 0 2px #f5dca6; }
[data-theme="dark"] .cp-pane { background: linear-gradient(180deg, #dcecff, #eef6ff); }
.cp-tag { position: absolute; left: 10px; top: 5px; font-size: calc(13px * var(--k)); color: #24407a; }
.cp-pane .g3-cv { margin: 0 auto; }
.cp-flat .cp-pane .g3-cv { width: min(100%, 460px, max(170px, calc((100 * var(--dvh) - 420px) / 2 * var(--cp-r, 1.4)))); }
.cp-iso .cp-model .g3-cv { width: min(100%, 360px, max(170px, calc((100 * var(--dvh) - 420px) * 0.546))); }
.cp-iso .cp-build .g3-cv { width: min(100%, 440px, max(230px, calc((100 * var(--dvh) - 420px) * 0.754))); }
.cp-views .cp-model .g3-cv { width: min(100%, 460px); }
.cp-pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.cp-color { display: grid; place-items: center; width: max(52px, calc(52px * var(--k))); height: max(52px, calc(52px * var(--k))); padding: 0; border-radius: 16px; border: 3px solid var(--line2); background: var(--panel2); cursor: pointer; font-size: calc(24px * var(--k)); }
.cp-color i { display: block; width: 66%; height: 66%; border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 76%, #fff) 0 22%, var(--bc) 23% 72%, color-mix(in srgb, var(--bc) 76%, #2a1a5e)); box-shadow: 0 3px 0 color-mix(in srgb, var(--bc) 60%, #2a1a5e), inset 0 2px 0 rgba(255,255,255,.55); }
.cp-color.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 26%, var(--panel)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent); }
.cp-color[disabled], .cp-check[disabled] { opacity: .4; cursor: default; }
.cp-color:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cp-check { margin-left: 6px; }
@media (min-width: 640px) { .cp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .cp-pane { display: grid; align-items: center; }
  .cp-flat .cp-pane .g3-cv { width: min(100%, 380px, max(200px, calc((100 * var(--dvh) - 330px) * var(--cp-r, 1.4)))); } .cp-iso .cp-model .g3-cv, .cp-iso .cp-build .g3-cv { width: min(100%, 400px, max(200px, calc((100 * var(--dvh) - 330px) * 1.25))); } .cp-views .cp-model .g3-cv { width: min(100%, 400px); } }
@media (max-height: 520px) and (orientation: landscape) { .cp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cp-pane .g3-cv, .cp-flat .cp-pane .g3-cv, .cp-iso .cp-model .g3-cv, .cp-iso .cp-build .g3-cv { width: min(100%, max(170px, calc((100 * var(--dvh) - 150px) * 1.2))); } }

/* ---------- Shape Puzzle ---------- */
.sp-wrap { width: 100%; display: grid; gap: 10px; justify-items: center; }
.sp-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; overflow: visible; }
.sp-table { fill: #f4f8ff; stroke: #cfdff8; stroke-width: 0.08; } .sp-tray { fill: #fff6df; stroke: #f3dba2; stroke-width: 0.06; stroke-dasharray: 0.3 0.22; }
.sp-sil polygon { fill: #7d8fc9; stroke: #7d8fc9; stroke-width: 0.14; stroke-linejoin: round; }
.sp-out polygon { fill: none; stroke: #fff; stroke-width: 0.07; stroke-dasharray: 0.24 0.2; stroke-linejoin: round; }
.sp-piece { cursor: grab; outline: none; filter: url(#sp-shadow); transform-box: fill-box; transform-origin: center; touch-action: none; }
.sp-piece.held { cursor: grabbing; } .sp-piece.locked { cursor: default; }
.sp-body { stroke-width: 0.09; stroke-linejoin: round; } .sp-gloss { fill: rgba(255,255,255,.2); pointer-events: none; }
.sp-piece:focus-visible .sp-body { stroke: #f5a800; stroke-width: 0.2; }
.sp-ask { width: 100%; display: grid; gap: 8px; justify-items: center; } .sp-ask:empty { display: none; } .sp-q { font-size: calc(18px * var(--k)); }

/* ---------- Block Count ---------- */
.bm { width: 100%; display: grid; gap: calc(12px * var(--k)); justify-items: center; }
.bm-cv { width: min(100%, 560px, max(230px, calc((100 * var(--dvh) - 420px) * 1.6))); }
.bm .g3-choices { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); width: min(100%, 480px); }

/* ---------- places and blocks (letters, word parts, train cars, story cards) ---------- */
.tr { width: 100%; display: grid; gap: calc(14px * var(--k)); justify-items: center; }
.tr-places, .tr-blocks { display: flex; flex-wrap: wrap; gap: calc(8px * var(--k)); justify-content: center; align-items: flex-end; max-width: 100%; }
.tr-blocks { padding: calc(10px * var(--k)); border-radius: 18px; background: color-mix(in srgb, var(--panel2) 80%, transparent); box-shadow: inset 0 0 0 2px var(--line); min-height: calc(76px * var(--k)); align-items: center; }
.tr-place.g3-slot[disabled] { cursor: default; } .tr-place.g3-blk { cursor: pointer; }
.tr-cell { display: grid; justify-items: center; gap: 2px; } .tr-cell small { font-size: calc(12px * var(--k)); font-weight: 700; color: var(--muted, #5b6785); }
.tr-item { display: grid; gap: 6px; justify-items: center; }
/* Letter Blocks */
.sl-wrap { width: 100%; display: grid; gap: calc(10px * var(--k)); justify-items: center; }
.sl-clue { margin: 0; text-align: center; font-size: calc(18px * var(--k)); font-weight: 600; }
.sl .g3-blk, .sl .g3-slot { width: max(52px, calc(56px * var(--k))); min-height: max(56px, calc(60px * var(--k))); padding: 2px 4px 6px; font-size: calc(28px * var(--k)); }
.sl-long .g3-blk, .sl-long .g3-slot { width: max(44px, calc(44px * var(--k))); min-width: 44px; min-height: max(50px, calc(50px * var(--k))); font-size: calc(22px * var(--k)); border-radius: 11px; }
.sl-long .tr-places, .sl-long .tr-blocks { gap: 5px; }
@media (max-width: 420px) { .sl .g3-blk, .sl .g3-slot { width: 50px; min-width: 44px; } .sl-long .g3-blk, .sl-long .g3-slot { width: 44px; font-size: 20px; } .sl .tr-places, .sl .tr-blocks { gap: 6px; } }

/* ---------- Word Hunt ---------- */
.wh { width: 100%; display: grid; gap: calc(12px * var(--k)); justify-items: center; }
.wh-list { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; }
.wh-word { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--line2); font-size: calc(16px * var(--k)); text-transform: uppercase; letter-spacing: .04em; }
.wh-word i { font-style: normal; font-size: 1.4em; line-height: 1; } .wh-list.pics .wh-word { font-size: calc(20px * var(--k)); padding: 6px 14px; }
.wh-word.found { background: #1fb863; color: #fff; box-shadow: none; text-decoration: line-through; text-decoration-thickness: 2px; }
.wh-grid { --n: 6; --w: min(100%, 520px, max(250px, calc(100 * var(--dvh) - 390px))); width: var(--w); display: grid; grid-template-rows: repeat(var(--n), 1fr); gap: 0; padding: 6px; border-radius: 18px; background: linear-gradient(180deg, #eaf4ff, #f8fbff); box-shadow: inset 0 0 0 2px #cfe2fb; touch-action: none; -webkit-user-select: none; user-select: none; outline: none; container-type: inline-size; aspect-ratio: 1; box-sizing: border-box; }
.wh-grid:focus-visible { box-shadow: inset 0 0 0 2px #cfe2fb, 0 0 0 3px var(--gold); }
.wh-row { display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.wh-cell { display: grid; place-items: center; font-weight: 800; color: #1a2a5c; font-size: calc(min(88 * var(--vw), 500px) / var(--n) * 0.5); border-radius: 30%; line-height: 1; }
@supports (width: 1cqw) { .wh-cell { font-size: calc(100cqw / var(--n) * 0.54); } }
.wh-cell.sel { background: #ffe08a; } .wh-cell.anchor { background: #ffcb3d; box-shadow: inset 0 0 0 3px #f59a00; } .wh-cell.cur { box-shadow: inset 0 0 0 3px #2f8fff; }
.wh-cell.found { color: #fff; } .wh-cell.k0 { background: #ff5a66; } .wh-cell.k1 { background: #3d9dff; } .wh-cell.k2 { background: #2fbf62; } .wh-cell.k3 { background: #ff9a3c; } .wh-cell.k4 { background: #a273ff; } .wh-cell.k5 { background: #12b5b0; } .wh-cell.k6 { background: #f564ad; } .wh-cell.k7 { background: #d9a400; }
.wh-cell.found.sel { background: #ffe08a; color: #1a2a5c; }
@keyframes wh-hint { 0%, 100% { box-shadow: inset 0 0 0 0 #f59a00; } 50% { box-shadow: inset 0 0 0 5px #f59a00; background: #fff1c2; } }
.wh-cell.hint { animation: wh-hint 1s 3; box-shadow: inset 0 0 0 3px #f59a00; }
body.calm .wh-cell.hint { animation: none; }
/* the very first step: the first letter of each word glows until the word is found (a steady ring in calm mode) */
@keyframes wh-glow { 0%, 100% { box-shadow: inset 0 0 0 3px #f59a00; background: #fff1c2; } 50% { box-shadow: inset 0 0 0 5px #f59a00, 0 0 12px 2px rgba(245, 154, 0, .55); background: #ffe08a; } }
.wh-cell.glow { box-shadow: inset 0 0 0 3px #f59a00; background: #fff1c2; animation: wh-glow 1.8s ease-in-out infinite; }
.wh-cell.glow.sel, .wh-cell.glow.anchor { background: #ffcb3d; }
body.calm .wh-cell.glow { animation: none; }
@media (prefers-reduced-motion: reduce) { .wh-cell.hint, .wh-cell.glow { animation: none; } }
@media (min-width: 700px) { .wh-grid { --w: min(100%, 560px, max(280px, calc(100 * var(--dvh) - 360px))); } }
@media (max-height: 520px) and (orientation: landscape) { .wh { grid-template-columns: minmax(120px, 1fr) auto; align-items: start; } .wh-grid { --w: max(220px, calc(100 * var(--dvh) - 150px)); } }

/* ---------- Sentence Train ---------- */
.tn .g3-blk.word, .tn .g3-slot { min-width: max(56px, calc(56px * var(--k))); min-height: max(50px, calc(50px * var(--k))); font-size: calc(20px * var(--k)); padding: 6px 12px 12px; border-radius: 12px 12px 8px 8px; }
.tn .tr-places .g3-blk.word::before, .tn .tr-places .g3-slot::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -7px; height: 12px; background: radial-gradient(circle at 6px 6px, #39405f 5.5px, transparent 6px) left / 12px 12px no-repeat, radial-gradient(circle at 6px 6px, #39405f 5.5px, transparent 6px) right / 12px 12px no-repeat; }
.tn .g3-slot { position: relative; } .tn .g3-slot.fixed { background: #e9eef9; color: #1a2a5c; border: 0; box-shadow: 0 5px 0 #c3cde6, inset 0 2px 0 #fff; font-size: calc(20px * var(--k)); }
.tn-track { position: relative; padding: 6px 8px 16px; row-gap: calc(22px * var(--k)); align-items: flex-end; background: repeating-linear-gradient(90deg, #b9a48a 0 6px, transparent 6px 22px) bottom / 100% 6px no-repeat; border-bottom: 3px solid #8d99b8; }
.tn-engine { position: relative; display: inline-block; width: calc(54px * var(--k)); height: calc(50px * var(--k)); flex: none; }
.tn-engine i { position: absolute; inset: 30% 0 0 0; border-radius: 10px 14px 8px 8px; background: linear-gradient(180deg, #ff7a85 0 18%, #ff5a66 19% 72%, #d43d54); box-shadow: 0 5px 0 #b8324a, inset 0 2px 0 rgba(255,255,255,.5); }
.tn-engine i::before { content: ""; position: absolute; left: 12%; top: -55%; width: 34%; height: 60%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #ffd75c, #f2b705); box-shadow: inset 0 2px 0 rgba(255,255,255,.6); }
.tn-engine i::after { content: ""; position: absolute; right: 10%; top: -36%; width: 22%; height: 40%; border-radius: 4px 4px 0 0; background: #5b6485; }
.tn-engine::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -7px; height: 12px; background: radial-gradient(circle at 6px 6px, #39405f 5.5px, transparent 6px) left / 12px 12px no-repeat, radial-gradient(circle at 6px 6px, #39405f 5.5px, transparent 6px) right / 12px 12px no-repeat; }
@keyframes tn-go { 0% { transform: translateX(0); } 30% { transform: translateX(-6px); } 65% { transform: translateX(10px); } 100% { transform: translateX(0); } }
.tn-track.go { animation: tn-go .9s ease-in-out; }
body.calm .tn-track.go { animation: none; }
@media (prefers-reduced-motion: reduce) { .tn-track.go { animation: none; } }
.tn-pick .tr-places .g3-slot:not(.fixed) { min-width: max(48px, calc(48px * var(--k))); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--panel)); }
@media (max-width: 420px) { .tn .g3-blk.word, .tn .g3-slot, .tn .g3-slot.fixed { font-size: 17px; min-width: 48px; padding-left: 9px; padding-right: 9px; } .tn-track { column-gap: 5px; } .tn-engine { width: 44px; } }

/* ---------- Story Steps ---------- */
.st-wrap { width: 100%; display: grid; gap: calc(12px * var(--k)); justify-items: center; }
.st .tr-places, .st .tr-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; align-items: stretch; gap: 8px; }
.st-4 .tr-places, .st-4 .tr-blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-5 .tr-places, .st-5 .tr-blocks { grid-template-columns: repeat(5, minmax(0, 1fr)); } .st-6 .tr-places, .st-6 .tr-blocks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.st .tr-cell { align-content: start; grid-template-rows: auto 1fr; } .st .tr-item { grid-template-rows: 1fr auto; align-items: stretch; }
.st .g3-blk.card, .st .g3-slot { width: 100%; min-width: 0; min-height: calc(120px * var(--k)); padding: 8px 6px 10px; border-radius: 16px; --bc: #ffffff; color: #14204a; text-shadow: none; font-size: calc(14.5px * var(--k)); font-weight: 600; line-height: 1.25;
  background: linear-gradient(180deg, #ffffff, #f1f6ff); box-shadow: 0 5px 0 #c3cde6, 0 8px 12px rgba(30,30,90,.14), inset 0 0 0 2px #d5e2f8; align-content: start; }
.st .g3-blk.card::after { display: none; }
.st-face { display: grid; gap: 4px; justify-items: center; text-align: center; overflow-wrap: anywhere; } .st-face i { font-style: normal; font-size: calc(44px * var(--k)); line-height: 1.1; }
.st-say { justify-self: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line2); background: var(--panel2); font-size: 18px; cursor: pointer; padding: 0; }
.st-q { font-size: calc(18px * var(--k)); }
@media (max-width: 699px) {
  .st-4 .tr-places, .st-4 .tr-blocks, .st-5 .tr-places, .st-5 .tr-blocks, .st-6 .tr-places, .st-6 .tr-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-5 .tr-places, .st-6 .tr-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st .g3-blk.card, .st .g3-slot { min-height: 96px; font-size: 13.5px; } .st-face i { font-size: 34px; }
  .st-5 .tr-places .g3-blk.card, .st-6 .tr-places .g3-blk.card, .st-5 .tr-places .g3-slot, .st-6 .tr-places .g3-slot { min-height: 70px; font-size: 11.5px; } .st-5 .tr-places .st-face i, .st-6 .tr-places .st-face i { font-size: 26px; }
}

/* ---------- Rhyme Time ---------- */
.rh { width: 100%; display: grid; gap: calc(12px * var(--k)); justify-items: center; }
.rh-target { display: grid; justify-items: center; gap: 2px; } .rh-target b { font-size: calc(26px * var(--k)); } .rh-word { padding: 6px 22px; border-radius: 16px; background: color-mix(in srgb, var(--gold) 30%, var(--panel)); }
.rh-verse { width: min(100%, 520px); padding: 12px 16px; border-radius: 16px; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--line); font-size: calc(18px * var(--k)); line-height: 1.45; }
.rh-verse p { margin: 0; } .rh-verse small { display: inline-block; width: 1.5em; font-weight: 800; color: var(--muted, #5b6785); }
.g3-choices.pics { grid-template-columns: repeat(auto-fit, minmax(calc(96px * var(--k)), 1fr)); } .g3-choices.pics .g3-choice { font-size: calc(20px * var(--k)); padding: 10px 6px; }

/* ---------- Word Builder ---------- */
.wb-wrap { width: 100%; display: grid; gap: calc(10px * var(--k)); justify-items: center; }
.wb .g3-blk.word, .wb .g3-slot { min-width: max(64px, calc(70px * var(--k))); min-height: max(54px, calc(56px * var(--k))); font-size: calc(22px * var(--k)); }
.wb .tr-places { gap: 4px; } .wb.snap .tr-places { gap: 0; } .wb.snap .tr-places > * { border-radius: 0; } .wb.snap .tr-places > *:first-child { border-radius: 14px 0 0 14px; } .wb.snap .tr-places > *:last-child { border-radius: 0 14px 14px 0; }
.wb .g3-slot.fixed { background: #3d9dff; color: #fff; border: 0; box-shadow: 0 5px 0 #2a6fc0, inset 0 2px 0 rgba(255,255,255,.5); }
.wb-face { display: grid; justify-items: center; line-height: 1.1; } .wb-face small { font-size: calc(12px * var(--k)); font-weight: 600; opacity: .95; text-shadow: none; }
.wb-gloss .g3-blk.word { padding-top: 6px; padding-bottom: 10px; }
.tr-place.g3-blk[disabled] { opacity: 1; cursor: default; }

/* ---------- the games hub: six shelves with big picture tabs ---------- */
body[data-page="games"] .gh-tabs[data-skills] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 0; overflow: visible; flex-wrap: wrap; }
.kchip.gh-tab { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: calc(72px * var(--k)); min-width: 0; padding: 6px 4px; border-radius: 18px; border-width: 3px; font-weight: 700; font-size: calc(13px * var(--k)); line-height: 1.12; text-align: center; white-space: normal; }
.gh-tab .e { font-size: calc(28px * var(--k)); line-height: 1.1; }
.gh-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.gh-grid .ktile .tag { font-size: 12px; }
@media (max-width: 699px) {
  body[data-page="games"] .gh-tabs[data-skills] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
  .kchip.gh-tab { min-height: 58px; font-size: 11.5px; border-width: 2px; border-radius: 14px; padding: 4px 2px; overflow-wrap: anywhere; } .gh-tab .e { font-size: 22px; }
  .gh-grid .kgrid.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gh-grid .ktile { min-height: 112px; padding: 10px 6px; } .gh-grid .ktile small { font-size: 12px; line-height: 1.2; }
}
@media (max-width: 340px) { .kchip.gh-tab { font-size: 10.5px; } }
@media (max-width: 420px) { .rh-verse { font-size: 15.5px; padding: 10px 12px; } .rh-verse p { padding-left: 1.5em; text-indent: -1.5em; } }
/* Free Blocks on a tablet held upright: the table leaves room for the tools under it */
@media (min-width: 700px) and (max-width: 899px) { .fb-cv { width: min(100%, max(360px, calc((100 * var(--dvh) - 600px) * 1.14))); } }

/* ---------- a phone on its side (844 × 390 and the like): everything a child must reach is on the screen — nothing to scroll ----------
   The question, the dots and “Help me” share ONE row (the pause button and the stars of the game's own bar sit in the same row, at its two ends);
   under it the picture or the model is on the LEFT and the answers are on the RIGHT; the word of praise or help is one line at the bottom. */
@media (max-height: 520px) and (orientation: landscape) {
  .gk-dom:has(.g3-card) { position: relative; }
  .gk-dom:has(.g3-card) > .gk-bar { position: absolute; left: 10px; right: 8px; top: 5px; margin: 0; min-height: 44px; z-index: 3; pointer-events: none; }
  .gk-dom:has(.g3-card) > .gk-bar > * { pointer-events: auto; }
  .gk-dom:has(.g3-card) > .gk-bar .gk-pausebtn { min-height: 44px; height: 44px; min-width: 48px; padding: 0 10px; } .gk-dom:has(.g3-card) > .gk-bar .gk-pausebtn span { display: none; }
  .gk-dom:has(.g3-card) > .gk-under { margin-top: 6px; }
  #view .g3-card { grid-template-columns: 58px minmax(0, 1fr) auto auto 50px; grid-template-areas: ". q top acts ." "area area area area area" "msg msg msg msg msg"; column-gap: 8px; row-gap: 4px; padding: 5px 10px 6px; align-items: center; justify-items: stretch; }
  .g3-card > .g3-q { grid-area: q; text-align: left; font-size: min(18px, calc(18px * var(--k))); line-height: 1.15; min-height: 44px; display: grid; align-items: center; }
  .g3-card > .g3-top { grid-area: top; width: auto; gap: 8px; } .g3-dots i { width: 12px; height: 12px; } .g3-dots { gap: 4px; }
  .g3-card > .g3-acts { grid-area: acts; min-height: 44px; flex-wrap: nowrap; } .g3-card > .g3-acts .kbtn { min-height: 44px; padding: 2px 12px; font-size: 15px; white-space: nowrap; }
  .g3-card > .g3-area { grid-area: area; gap: 6px; } .g3-card > .g3-fin, .g3-card > :not(.g3-q):not(.g3-top):not(.g3-acts):not(.g3-area):not(.g3-msg) { grid-column: 1 / -1; }
  .g3-card > .g3-msg { grid-area: msg; margin: 0; min-height: 19px; font-size: 14px; line-height: 1.3; text-align: center; }
  .g3-pic { font-size: 54px; } .g3-fin { padding: 0; gap: 4px; } .g3-fin-e { font-size: 40px; } .g3-stars { font-size: 24px; }
  /* Block Tower (a game on one picture): its “let go” button and “Say it again” stand BESIDE the picture, not under it */
  body[data-page="game-tower"] .gk { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
  body[data-page="game-tower"] .gk > .gk-under { margin-top: 0; gap: 14px; } body[data-page="game-tower"] .gk-tools .gk-again span, body[data-page="game-tower"] .gk-tools .talk-again span { display: none; } body[data-page="game-tower"] .gk-tools .kbtn { min-width: 52px; padding-left: 12px; padding-right: 12px; }
  /* picture left, answers right */
  .rh, .bm, .sl-wrap, .wb-wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; column-gap: 14px; }
  .sl-wrap > .tr, .wb-wrap > .tr { grid-column: 2; grid-row: 1 / span 3; } .sl-wrap > :not(.tr), .wb-wrap > :not(.tr) { grid-column: 1; } .sl-wrap > .tr:only-child, .wb-wrap > .tr:only-child { grid-column: 1 / -1; grid-row: auto; }   /* a step without a picture: the blocks take the whole width */
  .rh .g3-choices, .bm .g3-choices { width: 100%; } .rh .g3-choices.pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rh .g3-choice { min-height: 62px; padding: 4px 6px; } .g3-choice .pic { font-size: 34px; }
  .rh-target b { font-size: 22px; } .rh-verse { font-size: 15px; padding: 8px 12px; line-height: 1.35; }
  .bm-cv { width: min(100%, max(170px, calc((100 * var(--dvh) - 250px) * 1.3))); } .bm .g3-choice { min-height: 56px; }
  .tr { gap: 8px; } .tr-blocks { padding: 6px; min-height: 0; } .tr-item { grid-auto-flow: column; align-items: center; gap: 4px; }
  .sl .g3-blk, .sl .g3-slot { width: 48px; min-width: 44px; min-height: 50px; font-size: 24px; } .sl-long .g3-blk, .sl-long .g3-slot { width: 44px; min-height: 46px; font-size: 20px; } .sl-clue { font-size: 15px; }
  .wb .g3-blk.word, .wb .g3-slot { min-height: 50px; min-width: 56px; font-size: 19px; }
  .tn { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .tn .g3-blk.word, .tn .g3-slot, .tn .g3-slot.fixed { min-width: 44px; min-height: 44px; font-size: 17px; padding: 4px 9px 10px; } .tn-track { row-gap: 16px; padding-bottom: 12px; } .tn-engine { width: 44px; height: 44px; }
  /* Story Steps: the places in one row, the cards in a row under it, each with its “read it to me” button below */
  .st-wrap { gap: 6px; } .st .tr-places, .st .tr-blocks { gap: 6px; } .st .g3-blk.card, .st .g3-slot { min-height: 72px; font-size: 12.5px; line-height: 1.2; padding: 4px 5px 7px; } .st-face i { font-size: 26px; } .st-face { gap: 1px; }
  .st .tr-item { grid-auto-flow: row; gap: 2px; } .st .tr-blocks { padding: 4px; } .st .tr-cell small { font-size: 11px; line-height: 1.1; }
  .st-4 .tr-places, .st-4 .tr-blocks { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-5 .tr-places, .st-5 .tr-blocks { grid-template-columns: repeat(5, minmax(0, 1fr)); } .st-6 .tr-places, .st-6 .tr-blocks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .st-q { font-size: 15px; }
  /* Word Hunt: the list left, the letters right, as tall as the screen allows */
  .wh { grid-template-columns: minmax(120px, 1fr) auto; align-items: center; } .wh-grid { --w: max(190px, calc(100 * var(--dvh) - 124px)); padding: 3px; border-radius: 12px; }
  .g3-card:has(.wh) > .g3-msg { grid-area: 2 / 1 / 3 / -1; align-self: end; justify-self: start; max-width: 44%; text-align: left; z-index: 1; }   /* the kind word sits under the list of words, so the letters can be as tall as the screen */ .wh-word { font-size: 14px; padding: 3px 10px; } .wh-list.pics .wh-word { font-size: 18px; }
  /* Copy the Build: the model, your build, and the colors in a column beside them */
  .cp-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; } .cp { gap: 8px; } .cp-pane { padding: 22px 6px 6px; }
  .cp-pane .g3-cv, .cp-flat .cp-pane .g3-cv, .cp-iso .cp-model .g3-cv, .cp-iso .cp-build .g3-cv, .cp-views .cp-model .g3-cv { width: min(100%, max(150px, calc((100 * var(--dvh) - 185px) * 1.2))); }
  .cp-pal { flex-direction: column; flex-wrap: wrap; max-height: calc(100 * var(--dvh) - 150px); gap: 6px; } .cp-color { width: 44px; height: 44px; border-radius: 13px; } .cp-check { margin: 0; min-height: 44px; padding: 2px 10px; }
  .sp-wrap { gap: 4px; } .sp-q { font-size: 15px; }
  /* Free Blocks: the table left; the tools right, packed closely; the buddy's idea is one line over the table */
  .fb .buddy-row .who { display: none; } .fb .buddy-row .kbubble { padding: 3px 10px; font-size: 13.5px; line-height: 1.25; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .fb .buddy-row { min-height: 0; }
  .fb-main { margin-top: 4px; gap: 8px; } #view .kcard.fb-table { padding: 4px; } #view .kcard.fb-tools { padding: 6px 8px; } .fb-tools { gap: 5px; }
  .fb-cv { width: min(100%, max(200px, calc((100 * var(--dvh) - 112px) * 1.14))); }
  .fb-tool { min-height: 44px; grid-auto-flow: column; gap: 4px; padding: 2px; border-width: 2px; border-radius: 12px; } .fb-tool span { font-size: 18px; } .fb-tool b { font-size: 11.5px; }
  .fb-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; } .fb-pick { min-height: 44px; border-width: 2px; border-radius: 11px; padding: 0; } .fb-pick canvas { width: 34px; height: 34px; } .fb-color i { width: 24px; height: 24px; } 
  .fb-tools { gap: 3px; } .fb-grid { gap: 3px; }   /* 12.8: four pixels tighter, so the last row of buttons stays on a phone on its side */
  .fb-acts .kbtn { min-height: 44px; padding-top: 2px; padding-bottom: 2px; font-size: 14px; } .fb-msg { min-height: 0; font-size: 13px; } .fb-msg:empty { display: none; } .fb-tools .gk-tools .kbtn { min-height: 44px; padding: 2px 12px; font-size: 14px; }
}