/* Only the original Coco catch game is affected. */
.learning-game-page[data-game="icecream-catch"] .question-stem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 18px;
  padding: 13px 17px;
  color: #352b2f;
  background: #fffaf5;
  border: 1px solid #f0d2c6;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child > span {
  color: #765d54 !important;
  font-size: 12px;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child > strong {
  color: #302a2b !important;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.45;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 9px;
  direction: ltr;
  white-space: nowrap;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > span {
  color: #285846;
  font-family: "Noto Sans SC Local", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 800;
  line-height: 1.25;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > small {
  color: #725f54;
  font-size: clamp(13px, 1.8vw, 16px);
  font-weight: 650;
}

.learning-game-page[data-game="icecream-catch"] .question-stem > .hint-button {
  grid-column: 1 / -1;
  justify-self: start;
  color: #714c53;
  background: #fff6f1;
  border-color: #e6c9c0;
}

/* Keep the falling choices visual: the Persian prompt and Chinese answer live above. */
.learning-game-page[data-game="icecream-catch"] .falling-cone > span:not(.falling-fruit-sprite),
.learning-game-page[data-game="icecream-catch"] .falling-cone > small {
  display: none !important;
}

@media (max-width: 700px) {
  .learning-game-page[data-game="icecream-catch"] .question-stem {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 11px 13px;
  }

  .learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child,
  .learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"],
  .learning-game-page[data-game="icecream-catch"] .question-stem > .hint-button {
    grid-column: 1;
    grid-row: auto;
  }

  .learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] {
    justify-self: start;
  }
}


/* The question is Chinese with pinyin; its Persian gloss appears after a choice. */
.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child {
  grid-row: 1;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child > strong {
  display: none !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] {
  grid-row: 1;
  align-self: center;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > span {
  display: inline;
}

/* Keep the falling picture choices and the numbered lane controls free of labels. */
.learning-game-page[data-game="icecream-catch"] .lane-options button > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.learning-game-page[data-game="icecream-catch"] .lane-options button > kbd {
  font-size: 17px;
}

/* Show both answers clearly during the longer feedback pause. */
.learning-game-page[data-game="icecream-catch"] .falling-cone.is-target {
  border: 4px solid #249653 !important;
  background: #ecfff1 !important;
  box-shadow: 0 0 0 4px #24965355, 0 8px 20px #1e754744 !important;
  filter: none !important;
  opacity: 1 !important;
}
.learning-game-page[data-game="icecream-catch"] .falling-cone.is-wrong {
  border: 4px solid #d94141 !important;
  background: #fff0ef !important;
  box-shadow: 0 0 0 4px #d9414155, 0 8px 20px #9c252544 !important;
  filter: none !important;
  opacity: 1 !important;
}
@media (max-width: 700px) {
  .learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child,
  .learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] {
    grid-row: auto;
  }
}


/* Keep the Chinese target and pinyin visible as one clear prompt above the game. */
.learning-game-page[data-game="icecream-catch"] .question-stem {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  min-height: 0 !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child > span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div:first-child > strong {
  display: none !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  align-self: flex-start !important;
  justify-self: start !important;
  grid-column: auto !important;
  grid-row: auto !important;
  gap: 11px !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: 100% !important;
  direction: ltr !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > span,
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > small {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > span {
  color: #164d36 !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > small {
  color: #4f5d70 !important;
  font-size: clamp(16px, 2vw, 20px) !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* A correct answer gets an unmistakably green answer card. */
.learning-game-page[data-game="icecream-catch"] .answer-feedback:not(.is-wrong) {
  color: #17452a !important;
  background: #e4f7e9 !important;
  border: 3px solid #258a48 !important;
  box-shadow: 0 0 0 3px #258a4826, 0 8px 28px #235f3226 !important;
}
.learning-game-page[data-game="icecream-catch"] .answer-feedback:not(.is-wrong) strong,
.learning-game-page[data-game="icecream-catch"] .answer-feedback:not(.is-wrong) .feedback-symbol,
.learning-game-page[data-game="icecream-catch"] .answer-feedback:not(.is-wrong) .learned-word span {
  color: #17452a !important;
}
.learning-game-page[data-game="icecream-catch"] .answer-feedback.is-wrong {
  color: #762222 !important;
  background: #ffe9e7 !important;
  border: 3px solid #d94141 !important;
  box-shadow: 0 0 0 3px #d9414126, 0 8px 28px #9c252526 !important;
}
.learning-game-page[data-game="icecream-catch"] .answer-feedback.is-wrong strong,
.learning-game-page[data-game="icecream-catch"] .answer-feedback.is-wrong .feedback-symbol,
.learning-game-page[data-game="icecream-catch"] .answer-feedback.is-wrong .learned-word span {
  color: #762222 !important;
}


/* Bundle the CJK glyphs used by the word game so the target is readable without a system font. */
@font-face {
  font-family: "Aio Icecream CJK";
  src: url("/assets/fonts/NotoSansSC-Icecream.b06325b4f47025ff.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
.learning-game-page[data-game="icecream-catch"] .question-stem > div[role="group"] > span,
.learning-game-page[data-game="icecream-catch"] .answer-feedback .learned-word > span:first-child {
  font-family: "Aio Icecream CJK", "Noto Sans SC Local", "Noto Sans CJK SC", sans-serif !important;
  font-synthesis: weight !important;
}