/* The games page in the kids world (GUI plan 2.6, approved on the mock
   2026-10-03). css/game.css lays the games out; this file is the kids
   skin on top of it, read only under body.kids-world. The colours, type
   and the top bar come from kids-english/css/styles.css. */

.kids-world .game-wrap { max-width: 1180px; padding: 0 16px 40px; font-family: "Baloo 2", var(--font-body); color: var(--k-ink); }
.kids-world .k-home { text-decoration: none; }

/* Bee and a speech bubble */
.g-hello { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.g-mascot { width: 96px; height: 96px; flex: none; }
.g-bubble { position: relative; margin: 0; padding: 10px 16px; border-radius: 22px; background: var(--k-card);
  font-size: 20px; font-weight: 800; line-height: 1.2; }
.g-bubble::before { content: ""; position: absolute; left: -10px; top: 22px; border: 8px solid transparent;
  border-right-color: var(--k-card); border-left: 0; }
.g-bubble small { display: block; margin-top: 3px; font: 600 13.5px/1.35 var(--font-body); color: var(--k-soft); }

/* 1 · topics, in the five colour groups */
.kids-world .pick-actions { margin: 0 0 4px; }
.kids-world .chip { padding: 8px 14px; border: 2px solid var(--k-dash); border-radius: 999px; background: var(--k-card);
  color: var(--k-ink); font: 700 14px/1 var(--font-body); }
.kids-world .pick-group { padding-top: 14px; }
.kids-world .pick-subject { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.kids-world .pick-subject i { width: 16px; height: 16px; border-radius: 6px; background: var(--c); }
.kids-world .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kids-world .pick-card { --tint: color-mix(in srgb, var(--c) var(--k-tile-mix), var(--k-tile-base));
  gap: 2px; padding: 8px 6px; border: 3px solid transparent; border-radius: 20px; background: var(--tint); color: var(--k-ink-warm); }
.kids-world .pick-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.kids-world .pick-card img, .kids-world .pick-card .k-art { width: 74px; height: 74px; object-fit: cover; border-radius: 16px; }
.kids-world .pick-card .k-art.is-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.kids-world .pick-title { font-size: 14.5px; font-weight: 800; line-height: 1.1; }
.kids-world .pick-count { font: 600 11.5px/1.2 var(--font-body); color: var(--k-soft-warm); }
.kids-world .pick-card.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, var(--k-paper)); }
.kids-world .pick-tick { top: -6px; right: -6px; width: 30px; height: 30px; background: var(--k-green); }
.kids-world .pick-tick svg { width: 20px; height: 20px; }
.kids-world .pick-foot { justify-content: space-between; flex-wrap: nowrap; margin-top: 14px; padding: 12px 0 16px;
  background: linear-gradient(to top, var(--k-bg) 75%, transparent); }
.kids-world .pick-sum { white-space: nowrap; font: 600 14px/1.3 var(--font-body); color: var(--k-soft); }
.kids-world .pick-sum b { font-size: 18px; color: var(--k-ink); }
.kids-world .btn-go { display: inline-flex; align-items: center; gap: 10px; padding: 12px 12px 12px 24px; border-radius: 999px;
  background: var(--k-green); color: var(--k-white); font: 800 24px/1 "Baloo 2", var(--font-body); white-space: nowrap; }
.kids-world .btn-go i { width: 42px; height: 42px; border-radius: 50%; background: var(--k-sheen-3); display: grid; place-items: center; }
.kids-world .btn-go i svg { width: 24px; height: 24px; }
/* A small phone: the go button and the count share one row without
   pushing the page sideways. */
@media (max-width: 380px) {
  .kids-world .pick-foot { gap: 10px; }
  .kids-world .pick-sum { white-space: normal; min-width: 0; }
  .kids-world .btn-go { gap: 8px; padding: 10px 10px 10px 18px; font-size: 20px; }
  .kids-world .btn-go i { width: 36px; height: 36px; }
}
.kids-world #toMenu:not(:disabled) { animation: g-nudge 2.4s ease-in-out infinite; }
@keyframes g-nudge { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.06); } 90% { transform: scale(.98); } }

/* 2 · the two games */
.kids-world .menu-head { flex-wrap: nowrap; gap: 12px; margin: 4px 0 12px; padding: 8px 14px 8px 8px; border-radius: 22px;
  background: color-mix(in srgb, var(--k-purple) 16%, var(--k-card)); }
.kids-world .back-link { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%;
  background: var(--k-card); color: var(--k-ink); }
.kids-world .back-link svg { width: 26px; height: 26px; }
.kids-world .menu-sum { min-width: 0; font: 600 13.5px/1.25 var(--font-body); color: var(--k-soft); }
.kids-world .menu-sum b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 800 18px/1.15 "Baloo 2", var(--font-body); color: var(--k-ink); }
.kids-world .star-bar { margin: 0 0 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--k-card); color: var(--k-star-edge);
  font-size: 18px; white-space: nowrap; }
.kids-world .star-bar .star { color: var(--k-star); }
.kids-world .menu-grid { grid-template-columns: 1fr; }
.kids-world .game-card { flex-direction: row; gap: 14px; padding: 16px; border-radius: 26px; background: var(--k-card); color: var(--k-ink);
  border: 3px solid color-mix(in srgb, var(--m) 40%, var(--k-card)); text-align: left; }
.kids-world .game-art { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 22px; background: var(--m); }
.kids-world .game-art svg { width: 60px; height: 60px; }
.kids-world .game-title { display: block; font-size: 24px; line-height: 1.1; }
.kids-world .game-hint { display: block; margin-top: 4px; font: 600 14px/1.3 var(--font-body); color: var(--k-soft); text-align: inherit; }

/* 3 + 4 · playing */
.kids-world .view#view-play { padding-top: 14px; }
.kids-world .quit { width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: var(--k-card); color: var(--k-ink); }
.kids-world .quit svg { width: 22px; height: 22px; }
.kids-world .pips { flex: 1; flex-wrap: wrap; gap: 2px; }
.kids-world .pip { flex: none; height: auto; background: none; font-style: normal; font-size: 24px; line-height: 1;
  color: color-mix(in srgb, var(--k-ink) 16%, transparent); }
.kids-world .pip.on { color: var(--k-star); -webkit-text-stroke: 1.5px var(--k-star-edge); }
.kids-world .big-speaker { width: 116px; height: 116px; background: var(--m); box-shadow: none; animation: g-pulse 1.8s ease-in-out infinite; }
.kids-world .big-speaker svg { width: 62px; height: 62px; }
@keyframes g-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--m) 45%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }
.kids-world .tap-card { position: relative; padding: 10px; border: 3px solid color-mix(in srgb, var(--m) 38%, var(--k-white));
  border-radius: 24px; background: var(--k-paper); }
.kids-world .tap-card img { object-fit: contain; border-radius: 16px; }
.tap-tick { display: none; }
.kids-world .tap-card.is-right { border-color: var(--k-green); background: var(--k-green-soft); }
.kids-world .tap-card.is-right .tap-tick { position: absolute; right: -7px; top: -7px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--k-green); display: grid; place-items: center; }
.kids-world .tap-tick svg { width: 20px; height: 20px; }
.kids-world .tap-card.is-wrong { border-color: var(--k-wrong); background: var(--k-wrong-soft); }
/* pairs: 2 x 4 landscape cards on a phone, so each is big enough to tap */
.kids-world .pairs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kids-world .flip-card { aspect-ratio: 5 / 4; }
.kids-world .flip-back { background-color: var(--k-honey);
  background-image: radial-gradient(circle at 25% 25%, var(--k-sheen-2) 0 12%, transparent 13%),
    radial-gradient(circle at 75% 75%, var(--k-sheen-2) 0 12%, transparent 13%);
  background-size: 36px 36px; }
.kids-world .flip-back i { font-style: normal; font-size: 30px; color: var(--k-white); -webkit-text-stroke: 2px var(--k-star-edge); }
.kids-world .flip-front { background: var(--k-paper); border: 3px solid color-mix(in srgb, var(--m) 40%, var(--k-white)); }
.kids-world .flip-front img { object-fit: contain; border-radius: 12px; }
.kids-world .flip-front:has(.card-speaker) { background: var(--k-blue-soft); border-color: var(--k-blue-line); }
.kids-world .card-speaker { width: 56%; height: 56%; }
.kids-world .flip-card.is-done { opacity: .55; }
.kids-world .flip-card.is-done .flip-front { border-color: var(--k-green); background: var(--k-green-soft); }

/* 5 · the result: Bee and stars, not a sentence */
.kids-world .reward { position: relative; display: grid; justify-items: center; gap: 8px; padding: 30px 12px 0; overflow: hidden; }
.kids-world .reward .g-mascot { width: 180px; height: 180px; }
.kids-world .reward-stars { display: flex; gap: 8px; font-size: 64px; }
.kids-world .rs { color: var(--k-star); -webkit-text-stroke: 2.5px var(--k-star-edge); }
.kids-world .rs:nth-child(2) { margin-top: -12px; }
.kids-world .rs.off { color: transparent; -webkit-text-stroke: 2.5px color-mix(in srgb, var(--k-ink) 25%, transparent); }
.reward-plus { margin: 0; font-size: 34px; font-weight: 800; color: var(--k-star-edge); }
.reward-plus span { color: var(--k-star); -webkit-text-stroke: 1.5px var(--k-star-edge); }
.kids-world .reward-sum { margin: 0; font: 600 15px/1.3 var(--font-body); color: var(--k-soft); }
.kids-world .reward-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; margin-top: 10px; }
.kids-world .reward-actions .btn-go, .kids-world .btn-plain { justify-content: center; gap: 6px; padding: 14px; border-radius: 20px;
  font: 800 20px/1 "Baloo 2", var(--font-body); }
.kids-world .reward-actions .btn-go svg { width: 24px; height: 24px; }
.kids-world .btn-plain { display: flex; align-items: center; border: 0; background: color-mix(in srgb, var(--k-ink) 7%, var(--k-card)); color: var(--k-ink); }
/* the reward's Bee dances when it is three stars */
.kids-world .reward .g-mascot[src$="cheer.svg"] { animation: k-dance 1.2s ease-in-out infinite; transform-origin: 50% 90%; }

@media (min-width: 600px) {
  .kids-world .pick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kids-world .menu-grid { grid-template-columns: 1fr 1fr; }
  .kids-world .game-card { flex-direction: column; padding: 26px 18px; text-align: center; }
  .kids-world .game-art { width: 120px; height: 120px; }
  .kids-world .game-art svg { width: 84px; height: 84px; }
  .kids-world #view-menu, .kids-world #view-play { max-width: 760px; margin-inline: auto; }
  .kids-world .tap-grid { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .kids-world .pairs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 700px; gap: 14px; }
  .kids-world .flip-card { aspect-ratio: 3 / 4; }
  .kids-world .pip { font-size: 28px; }
  .kids-world .reward { padding-top: 50px; gap: 12px; }
  .kids-world .reward .g-mascot { width: 240px; height: 240px; }
  .kids-world .reward-stars { font-size: 92px; }
  .reward-plus { font-size: 44px; }
  .kids-world .reward-actions { max-width: 460px; }
}
@media (min-width: 1000px) {
  .kids-world .pick-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .kids-world #view-play { max-width: 1000px; }
  .kids-world .tap-grid { gap: 22px; }
  .kids-world .pairs-grid { max-width: none; grid-template-columns: repeat(4, 180px); justify-content: center; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kids-world #toMenu:not(:disabled), .kids-world .big-speaker, .kids-world .reward .g-mascot { animation: none !important; }
}