/* Kids games on /play/kids (docs/kid-games.md). Builds on play.css (HUD, timer, feedback, result)
   and the site's tokens from site.css. Big targets, bright colours, playful motion. */

/* ── hub ───────────────────────────────────────────────────────────── */
.khero { position: relative; overflow: hidden; margin-top: 10px; padding: 26px 22px; border-radius: 24px; color: #fff;
    background: radial-gradient(circle at 15% 20%, #3aa36a, transparent 45%), radial-gradient(circle at 90% 80%, #e8b64c, transparent 40%), linear-gradient(135deg, #1f7a45, #14532d); }
.khero__t { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 7vw, 48px); margin: 0 0 6px; position: relative; }
.khero__p { margin: 0; max-width: 620px; font-size: 17px; color: #e6f2ea; position: relative; }
.khero__float { position: absolute; inset: 0; pointer-events: none; }
.khero__float span { position: absolute; font-size: 34px; opacity: .35; animation: kbob 4s ease-in-out infinite; }
.khero__float span:nth-child(1) { right: 6%; top: 12%; }
.khero__float span:nth-child(2) { right: 22%; top: 58%; animation-delay: .8s; }
.khero__float span:nth-child(3) { right: 38%; top: 8%; animation-delay: 1.6s; }
.khero__float span:nth-child(4) { right: 12%; bottom: 6%; animation-delay: 2.2s; }
.khero__float span:nth-child(5) { right: 30%; bottom: 30%; animation-delay: 3s; }

.kcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 18px; }
@media (min-width: 640px) { .kcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .kcards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.kcard { --kbg: #eaf1ec; --kfg: #1b4d2e; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; color: var(--ink);
    background: linear-gradient(180deg, var(--kbg), #fff 70%); border: 2px solid var(--kbg); box-shadow: 0 6px 0 var(--kbg), 0 10px 24px rgba(18,53,33,.10);
    transition: transform .12s, box-shadow .12s; }
.kcard:hover { color: var(--ink); transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 9px 0 var(--kbg), 0 14px 28px rgba(18,53,33,.14); }
.kcard__ic { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,.08)); }
.kcard__cover { display: block; margin: -8px -8px 4px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #fff; }
.kcard__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.kcard:hover .kcard__cover img { transform: scale(1.04); }
.khead { display: flex; align-items: center; gap: 12px; }
.khead__img { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; box-shadow: 0 4px 12px rgba(18,53,33,.15); }
.ktopic__e--img { overflow: hidden; background: #fff; }
.ktopic__e--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kcard__t { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--kfg); }
.kcard__s { font-weight: 700; color: var(--kfg); opacity: .8; font-size: 15px; }
.kcard__p { margin: 0; flex: 1; color: var(--ink-soft); font-size: 15px; }
.kcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kcard__go { background: var(--kfg); color: #fff; font-weight: 800; border-radius: 999px; padding: 8px 18px; }
.kcard__meta { display: flex; gap: 10px; font-size: 14px; color: var(--ink-muted); }
.kcard__stars { color: #c9962f; font-weight: 800; }
.kcard--off { opacity: .6; box-shadow: none; }

.ksec { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 28px 0 10px; }

/* topics: chips on the hub, radio chips on a game's setup */
.ktopics { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.ktopics input { position: absolute; opacity: 0; pointer-events: none; }
.ktopic { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--line-strong);
    color: var(--ink); font-weight: 700; cursor: pointer; transition: transform .1s, border-color .1s; }
.ktopic:hover { color: var(--ink); transform: translateY(-1px); border-color: var(--green); }
.ktopic__e { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: #f6f4ee; }
.ktopic__m { font-weight: 500; font-size: 13px; color: var(--ink-muted); }
.ktopics input:checked + .ktopic { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-deep); }
.ktopics input:checked + .ktopic .ktopic__m { color: #d6e3da; }
.ktopics input:checked + .ktopic .ktopic__e { background: rgba(255,255,255,.2); }
.ktopics input:focus-visible + .ktopic { outline: 3px solid var(--gold-line); outline-offset: 2px; }
.ktopics--hub .ktopic { padding-right: 18px; }

.khow { background: var(--gold-soft); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.khow summary { cursor: pointer; font-weight: 800; color: var(--gold-ink); }
.khow p { margin: 6px 0 0; }

/* ── in the game ───────────────────────────────────────────────────── */
.kchip { background: #fff1e0; color: #c2410c; font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.kchip--soft { background: #f1efe9; color: var(--ink-soft); }
/* Memory Match: no free wrong tries left (2026-10-20). */
.kchip--soft.is-warn { background: #fde2e2; color: #b42318; }
.kmem-hint { text-align: center; margin: 6px 0 2px; }
.kstage .gtimer { margin: 10px 0 12px; }
.kpic { display: block; margin: 0 auto 6px; }
.kpic--emoji { font-size: clamp(64px, 18vw, 92px); line-height: 1.1; animation: gpop .4s cubic-bezier(.2, 1.6, .4, 1); }
.kpic img { display: block; margin: 0 auto; max-width: 220px; max-height: 160px; border-radius: 14px; object-fit: contain; }
.kmeaning { font-size: 20px; font-weight: 700; color: var(--ink-soft); }
.kask { margin: 10px 0 4px; font-weight: 800; color: var(--gold-ink); }
.kextra { margin-top: 8px; font-size: 14px; font-weight: 700; color: #c2410c; }
.kfb { margin-top: 4px; }

/* letter slots (Word Builder, Balloon Rescue) */
.kslots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 4px; }
.kart { font-family: var(--serif); font-size: 26px; color: var(--green); margin-right: 6px; }
.kslot { width: clamp(34px, 9vw, 46px); height: clamp(42px, 11vw, 54px); border-radius: 10px; border: 2.5px dashed var(--gold-line); background: #fffdf7;
    display: grid; place-items: center; font-size: clamp(20px, 6vw, 28px); font-weight: 900; color: var(--ink); cursor: pointer; transition: transform .1s, background .15s; }
.kslot.is-filled { border-style: solid; border-color: #2b6cb0; background: #e6eef8; animation: gpop .25s cubic-bezier(.2, 1.6, .4, 1); }
.kslot.is-given { border-style: solid; border-color: var(--green); background: var(--green-soft); color: var(--green); cursor: default; }
.kslot.is-new { background: #fff3c4; border-color: #e8b64c; }
.kslot.is-ok { background: #d3eedc; border-color: #1f9d55; }
.kslot.is-reveal { background: #fde4e1; border-color: var(--red); color: var(--red-dark); }
.kslots.is-right .kslot { background: #d3eedc; border-color: #1f9d55; border-style: solid; }
.kslots.is-wrong .kslot { border-color: var(--red); }
.kpool { margin-top: 10px; }
.ktile { min-width: 48px; font-size: 24px; padding: 10px 14px; }
.ktile.is-used { visibility: hidden; }

/* Memory Match */
.kmem-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 12px); margin-top: 6px; perspective: 900px; }
.kmem { aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.kmem__in { position: relative; display: block; width: 100%; height: 100%; transition: transform .38s cubic-bezier(.3, 1.4, .5, 1); transform-style: preserve-3d; }
.kmem.is-up .kmem__in { transform: rotateY(180deg); }
.kmem__back, .kmem__face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; }
.kmem__back { background: linear-gradient(90deg, #1f7a45 0 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); box-shadow: inset 0 0 0 4px #fff, 0 4px 0 #14532d; }
.kmem__back::after { content: "?"; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15);
    display: grid; place-items: center; color: var(--green); font-family: var(--serif); font-size: clamp(22px, 6vw, 34px); }
.kmem__face { transform: rotateY(180deg); background: #fff; box-shadow: inset 0 0 0 3px #e6eef8, 0 4px 0 #cbd5e1; text-align: center; }
.kmem:hover:not(.is-up) .kmem__in { transform: translateY(-3px) rotate(-1deg); }
.kmem.is-loading { cursor: progress; }
.kmem__pic { font-size: clamp(30px, 9vw, 52px); line-height: 1; }
.kmem__pic img { max-width: 90%; max-height: 70px; object-fit: contain; }
.kmem__mean { font-size: clamp(11px, 2.8vw, 14px); color: var(--ink-muted); font-weight: 600; margin-top: 4px; line-height: 1.15; }
.kmem__word { font-family: var(--serif); font-size: clamp(15px, 4vw, 22px); line-height: 1.1; color: #1d4e82; word-break: break-word; }
.kmem.is-matched { animation: gright .5s ease-out; }
.kmem.is-matched .kmem__face { background: #e3f4e8; box-shadow: inset 0 0 0 3px #1f9d55, 0 4px 0 #14532d; }
.kmem.is-matched { cursor: default; }
/* Shake the button, never the face: the face's own transform keeps it on the back of the card. */
.kmem.is-miss { animation: gshake .45s; }
.kmem.is-miss .kmem__face { box-shadow: inset 0 0 0 3px var(--red), 0 4px 0 var(--red-dark); }
.kmem-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.kfinish { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kfinish__ask { font-size: 14px; color: var(--ink-soft); }
.ktoast { min-height: 28px; margin-top: 10px; text-align: center; font-size: 17px; color: #14532d; }
.ktoast.is-in { animation: gin .3s ease-out; }

/* Balloon Rescue */
.kballoons { display: flex; justify-content: center; gap: clamp(6px, 2vw, 14px); min-height: 92px; padding-top: 4px; }
.kballoon { --bc: #ce2b37; position: relative; width: 42px; height: 54px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.65), transparent 30%), var(--bc);
    box-shadow: inset -4px -6px 0 rgba(0,0,0,.12); animation: kbob 2.6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
.kballoon::before { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-bottom: 6px solid var(--bc); border-top: 0; }
.kballoon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 30px; background: #9ca3af; transform: translateX(-50%); }
.kballoon.is-pop { animation: kpop .38s ease-out forwards; }
.kballoon.is-gone { visibility: hidden; animation: none; }
.kballoon.is-fly { animation: kfly 1.6s ease-in forwards; }
.kleft { font-weight: 800; color: var(--ink-soft); margin: 4px 0 8px; font-size: 15px; }
.kkeys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
@media (min-width: 560px) { .kkeys { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.kkey { min-height: 48px; border: 0; border-radius: 12px; background: #2b6cb0; color: #fff; font: inherit; font-size: 20px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 #1d4e82; transition: transform .08s; }
.kkey:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #1d4e82; }
.kkey--rare { background: #64748b; box-shadow: 0 4px 0 #475569; }
.kkey.is-hit { background: #1f9d55; box-shadow: 0 4px 0 #14532d; }
.kkey.is-miss { background: #e5e7eb; color: #9ca3af; box-shadow: 0 4px 0 #d1d5db; }
.kkey:disabled { cursor: default; }
.kkey.is-used:not(.is-hit):not(.is-miss) { opacity: .4; }

/* Word Search */
.kws { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 4px; }
@media (min-width: 820px) { .kws { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.kgrid { --n: 8; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; padding: 8px; border-radius: 18px; background: #fff;
    box-shadow: 0 2px 0 var(--line-strong), 0 10px 28px rgba(18,53,33,.12); touch-action: none; user-select: none; -webkit-user-select: none; }
.kgrid.is-no { animation: gshake .4s; }
.kcell { --fc: #bfe8cf; aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; font-weight: 900; font-size: clamp(14px, calc(68vw / var(--n)), 26px); color: #1f2937; background: #f8f7f3; cursor: pointer; transition: background .12s, transform .12s; }
.kcell.is-found { background: var(--fc); }
.kcell.is-sel { background: #fde68a; transform: scale(1.08); box-shadow: 0 0 0 2px #e8b64c; }
.kws__side { background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 1px 0 var(--line-strong); }
.kws__side .kask { margin-top: 0; }
.kclues { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kclue { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #f8f7f3; }
.kclue__pic { font-size: 28px; line-height: 1; flex: none; }
.kclue__pic img { width: 36px; height: 36px; object-fit: contain; display: block; }
.kclue__txt { display: flex; flex-direction: column; min-width: 0; }
.kclue__txt b { letter-spacing: .08em; font-size: 15px; }
.kclue__txt small { color: var(--ink-muted); font-size: 12px; }
.kclue.is-found { background: #e3f4e8; }
.kclue.is-found b { color: #14532d; text-decoration: line-through; text-decoration-thickness: 2px; }

/* Basket Sort */
.kdrop { display: flex; justify-content: center; margin: 10px 0 4px; min-height: 150px; }
.kitem { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 26px; border-radius: 20px; background: #fff; cursor: grab; touch-action: none; user-select: none;
    box-shadow: 0 2px 0 var(--line-strong), 0 10px 26px rgba(18,53,33,.16); animation: kdropin .5s cubic-bezier(.2, 1.4, .4, 1); position: relative; z-index: 5; }
.kitem.is-drag { cursor: grabbing; box-shadow: 0 18px 34px rgba(18,53,33,.25); transition: none; }
.kitem.is-in-basket { animation: kinto .5s ease-in forwards; }
.kitem.is-shake { animation: gshake .45s; }
.kitem__pic { font-size: 54px; line-height: 1; }
.kitem__pic img { max-height: 90px; max-width: 160px; object-fit: contain; display: block; }
.kitem__w { font-family: var(--serif); font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
.kbaskets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (min-width: 640px) { .kbaskets { grid-template-columns: repeat(var(--b, 2), minmax(0, 1fr)); } }
.kbasket { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 120px; padding: 14px 8px 12px; border: 0; border-radius: 0 0 26px 26px; font: inherit; cursor: pointer; color: #5b3a12;
    background: repeating-linear-gradient(45deg, #e9c48a 0 10px, #deb072 10px 20px); box-shadow: inset 0 6px 0 #c58f45, 0 6px 0 #9a6a2c; transition: transform .1s, filter .15s; }
.kbasket:hover:not(:disabled), .kbasket.is-over { transform: translateY(-4px) scale(1.03); filter: brightness(1.06); }
.kbasket.is-over { box-shadow: inset 0 6px 0 #c58f45, 0 6px 0 #9a6a2c, 0 0 0 4px #fde68a; }
.kbasket__k { position: absolute; left: 10px; top: 8px; font-size: 12px; font-weight: 900; opacity: .6; }
.kbasket__e { font-size: 34px; line-height: 1; }
.kbasket__n { font-weight: 900; font-size: 18px; }
.kbasket__m { font-size: 13px; opacity: .8; }
.kbasket.is-right { background: #bfe8cf; color: #14532d; box-shadow: inset 0 6px 0 #1f9d55, 0 6px 0 #14532d; animation: gright .5s ease-out; }
.kbasket.is-wrong { background: #f8d3cf; color: var(--red-dark); box-shadow: inset 0 6px 0 var(--red), 0 6px 0 var(--red-dark); }
.kbasket.is-dim { opacity: .45; }
.kbasket:disabled { cursor: default; }

/* result list */
.krev { display: flex; align-items: center; gap: 10px; }
.krev__pic { font-size: 26px; line-height: 1; flex: none; }
.krev__pic img { width: 34px; height: 34px; object-fit: contain; display: block; }
.krev b { display: block; }

/* band on the free games page */
.kband { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0 0; padding: 16px 18px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #b83280, #c2410c); box-shadow: 0 6px 0 #8a1f5d; }
.kband:hover { color: #fff; transform: translateY(-1px); }
.kband__e { font-size: 34px; letter-spacing: 2px; }
.kband__txt { flex: 1; min-width: 220px; }
.kband__t { display: block; font-weight: 900; font-size: 19px; }
.kband__s { display: block; font-size: 14px; color: #fde7f0; }
.kband__go { background: #fff; color: #b83280; font-weight: 900; border-radius: 999px; padding: 8px 18px; }

/* Word Builder: every letter placed, Check is the next tap (2026-10-20). */
[data-check].is-ready { animation: kready 1.1s ease-in-out infinite; }
@keyframes kready { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,139,34,.0); transform: none; } 50% { box-shadow: 0 0 0 6px rgba(34,139,34,.25); transform: scale(1.04); } }
@keyframes kbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kpop { 0% { transform: scale(1); } 50% { transform: scale(1.35); opacity: .9; } 100% { transform: scale(0); opacity: 0; } }
@keyframes kfly { to { transform: translateY(-220px) rotate(8deg); opacity: 0; } }
@keyframes kdropin { 0% { transform: translateY(-80px) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kinto { to { transform: translateY(140px) scale(.3); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .khero *, .kcards *, .kstage * { animation: none !important; transition: none !important; }
}

/* Uploaded pictures (docs/kid-games.md → Pictures): give them room */
.ktopic__e--img { width: 44px; height: 44px; }
.kmem__pic { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.kmem__pic img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.kpic img { max-width: min(260px, 70vw); max-height: 190px; }
.kbasket__e--img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.12); }
.kbasket__e--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Basket Sort: the picture shows in the feedback, after the answer (2026-10-21). */
.kfb-pic { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 14px; margin: 0 auto 8px; }