/* Topic-specific styles moved out of topics/shared/generic-topic.css. */
.ca-receipt,
.ca-cash,
.ca-people,
.ca-stock,
.ca-score,
.ca-book,
.ca-budget,
.ca-stickers,
.ca-bricks,
.ca-data {
  display: grid;
  gap: 8px;
  min-height: 110px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
}

.ca-receipt b,
.ca-cash b,
.ca-people b,
.ca-stock b,
.ca-score b,
.ca-book b,
.ca-budget b,
.ca-stickers b,
.ca-bricks b,
.ca-data b {
  padding: 6px 8px;
  border-radius: 10px;
  background: #edf4ff;
}

.ca-receipt strong,
.ca-cash strong,
.ca-people strong,
.ca-stock strong,
.ca-book strong,
.ca-budget strong,
.ca-stickers strong,
.ca-bricks strong,
.ca-data strong {
  color: #4c83f0;
  font-size: 1.1rem;
}

.ca-road {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
}

.ca-road span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: #4c83f0;
}

.ca-road span:nth-child(2) {
  background: #16a394;
}

.ca-place-challenge {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(90px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
}

.ca-place-challenge span,
.ca-place-challenge label {
  color: #344054;
  font-weight: 900;
}

.ca-scene {
  display: grid;
  gap: 8px;
  min-height: 126px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(120, 139, 168, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    linear-gradient(90deg, rgba(76, 131, 240, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(76, 131, 240, 0.08) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

.ca-scene strong {
  align-self: end;
  padding: 8px 10px;
  border-radius: 10px;
  color: #263244;
  background: rgba(22, 163, 148, 0.1);
  font-weight: 950;
}

.ca-scene i {
  font-style: normal;
}

.ca-shop {
  grid-template-columns: 1fr 1fr;
}

.ca-shop section {
  display: grid;
  place-items: center;
  min-height: 54px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 -4px 0 rgba(76, 131, 240, 0.12);
}

.ca-shop section:first-child::before {
  content: "";
  width: 34px;
  height: 18px;
  border-radius: 4px;
  background: #4c83f0;
}

.ca-shop section:nth-child(2)::before {
  content: "";
  width: 28px;
  height: 34px;
  border-left: 7px solid #16a394;
  border-radius: 4px 8px 8px 4px;
  background: #dff6f2;
}

.ca-shop strong,
.ca-change strong,
.ca-classroom strong,
.ca-warehouse strong,
.ca-route strong,
.ca-scoreboard strong,
.ca-reading strong,
.ca-budget-scene strong,
.ca-sticker-album strong,
.ca-data-table strong,
.ca-check strong {
  grid-column: 1 / -1;
}

.ca-change {
  grid-template-columns: 0.8fr 0.8fr 1.2fr;
  align-items: center;
}

.ca-change .bill,
.ca-change .price {
  display: grid;
  place-items: center;
  min-height: 52px;
  border-radius: 10px;
  color: #fff;
  font-weight: 950;
}

.ca-change .bill {
  background: #16a394;
}

.ca-change .price {
  background: #e25442;
}

.ca-change .coins,
.ca-classroom > div,
.ca-warehouse .shelf,
.ca-warehouse .truck,
.ca-sticker-album section,
.ca-brick-wall div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ca-scene i.coin {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #d19a28;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.36);
}

.ca-classroom {
  grid-template-columns: 1fr 1fr;
}

.ca-classroom i {
  width: 16px;
  height: 24px;
  border-radius: 999px 999px 6px 6px;
}

.ca-classroom i.boy {
  background: #4c83f0;
}

.ca-classroom i.girl {
  background: #e25442;
}

.ca-warehouse {
  grid-template-columns: 1.1fr 0.9fr;
}

.ca-warehouse .shelf {
  padding: 8px;
  border: 4px solid #8a5a32;
  border-radius: 8px;
  background: rgba(138, 90, 50, 0.08);
}

.ca-warehouse .truck {
  align-content: end;
  padding: 8px;
  border-bottom: 12px solid #667085;
  border-radius: 12px;
  background: rgba(76, 131, 240, 0.1);
}

.ca-warehouse i.box,
.ca-warehouse i.ship {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #d19a28;
}

.ca-warehouse i.ship {
  opacity: 0.45;
}

.ca-scene-bars {
  display: grid;
  gap: 5px;
}

.ca-scene-bars span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: #4c83f0;
}

.ca-scene-bars span:nth-child(2) {
  background: #16a394;
}

.ca-scene-bars span.is-minus {
  background: #e25442;
}

.ca-route .road-line {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 5px;
}

.ca-route .road-line i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: #4c83f0;
  font-weight: 950;
}

.ca-route .road-line span {
  height: 5px;
  border-radius: 999px;
  background: #98a2b3;
}

.ca-scoreboard {
  grid-template-columns: 1fr 1fr;
  align-items: end;
}

.ca-scoreboard section {
  display: grid;
  align-content: end;
  justify-items: center;
  height: 88px;
  border-radius: 10px;
  background: linear-gradient(to top, rgba(76, 131, 240, 0.28) var(--h), rgba(255, 255, 255, 0.7) var(--h));
}

.ca-scoreboard section:nth-child(2) {
  background: linear-gradient(to top, rgba(226, 84, 66, 0.28) var(--h), rgba(255, 255, 255, 0.7) var(--h));
}

.ca-scoreboard b,
.ca-scoreboard i {
  font-weight: 950;
}

.ca-reading .book-progress,
.ca-budget-scene .wallet {
  height: 34px;
  padding: 5px;
  border-radius: 999px;
  background: #e6edf8;
}

.ca-reading .book-progress span,
.ca-budget-scene .wallet span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #4c83f0;
}

.ca-reading .book-pages {
  display: flex;
  align-items: end;
  gap: 3px;
  min-height: 46px;
}

.ca-reading i.page {
  width: 22px;
  height: 34px;
  border: 1px solid rgba(120, 139, 168, 0.28);
  border-radius: 4px;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(76, 131, 240, 0.14);
}

.ca-budget-scene {
  grid-template-columns: 1fr 1fr;
}

.ca-budget-scene .wallet {
  grid-column: 1 / -1;
  height: 44px;
  border: 3px solid #667085;
  border-radius: 12px;
  background: #f8fafc;
}

.ca-budget-scene .wallet span {
  background: #e25442;
}

.ca-budget-scene section {
  padding: 7px;
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
}

.ca-sticker-album {
  grid-template-columns: 1fr 1fr;
}

.ca-sticker-album section {
  align-content: start;
  min-height: 72px;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
}

.ca-sticker-album b {
  width: 100%;
  color: #667085;
  font-size: 0.74rem;
}

.ca-sticker-album i.sticker {
  width: 18px;
  height: 18px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: #4c83f0;
}

.ca-sticker-album i.sticker.alt {
  background: #16a394;
}

.ca-brick-wall div {
  padding: 8px;
  border-radius: 8px;
  background: #fff3ef;
}

.ca-brick-wall i.brick {
  width: 26px;
  height: 14px;
  border-radius: 3px;
  background: #c05642;
}

.ca-brick-wall section {
  color: #c05642;
  font-weight: 950;
}

.ca-data-table,
.ca-check {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.ca-data-table section,
.ca-check section {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
}

.ca-data-table section span,
.ca-check section span {
  color: #4c83f0;
  font-size: 1.3rem;
  font-weight: 950;
}

.ca-data-table::before {
  content: "+";
  grid-column: 2;
  grid-row: 1;
  color: #667085;
  font-size: 1.5rem;
  font-weight: 950;
}

.ca-check > i {
  color: #667085;
  font-size: 1.5rem;
  font-weight: 950;
}

.ca-place-challenge input {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  border: 1px solid rgba(190, 202, 222, 0.9);
  border-radius: 10px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
}