/* 生成插畫只用於裝飾；學習字詞、注音、說明與操作全部保持真實文字。 */
:root {
  --green: #617d47;
  --deep: #456333;
  --bg: #f8f8f0;
}
body {
  background: #f8f8f0;
}
.simple-header {
  border-top-color: #a5b780;
  background: #fffef9;
}
.child-nav {
  background: #fffef9;
}
.child-nav > button {
  background: #f0f3e7;
  color: #75865f;
}
.child-nav > button.active {
  border-color: #94aa70;
  background: #eaf0da;
  color: #526f38;
}
.child-screen .word-card {
  border-color: #cfdbb6;
  background: #fffefa;
  box-shadow: 0 10px 28px #6c784115;
}
.child-screen .face-down {
  background: radial-gradient(
    ellipse at 50% 34%,
    #fffdf6 5%,
    #f6f6e8 55%,
    #edf1d9 100%
  );
  border-color: #c6d4a6;
}
.child-screen .face-down:before {
  border-color: #c4d09d;
  opacity: 0.85;
}
.generated-mascot,
.generated-garden {
  display: block;
  object-fit: contain;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.simple-brand .brand-mascot {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.avatar-mini,
.avatar-large {
  display: block;
  background: #edf1df;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}
.avatar-options .avatar-choice {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.avatar-options b {
  font-size: 18px;
  color: #62794a;
  margin-top: 10px;
}
.avatar-options span {
  background: #fafaf1;
}
.parent-screen .avatar-large {
  width: 60px;
  height: 60px;
}
.child-screen .card-back-decor {
  width: 220px;
  max-width: 74%;
}
.card-back-image {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 6px #786b3c09);
}
.child-screen .card-back-title {
  color: #6d8051;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 22px;
}
.child-screen .card-back-small {
  color: #8e9c75;
}
.child-screen .btn.draw-button {
  background: linear-gradient(145deg, #f5d28c, #e8b56a);
  color: #644920;
  text-shadow: none;
  box-shadow:
    0 0 0 3px #c8d5a0,
    0 7px 18px #9b7b321c;
}
.child-screen .btn.draw-button:hover {
  background: #ebbb72;
}
.draw-bar.study-heading {
  border-color: #e2e6d2;
  box-shadow: 0 5px 18px #6d794008;
}
.learn-scene {
  background:
    radial-gradient(ellipse at 3% 35%, #eef0d666, transparent 32%),
    radial-gradient(ellipse at 96% 68%, #e7edcf66, transparent 32%);
}
.child-screen .review-plant.illustrated-garden {
  width: min(460px, 100%);
  margin: 0 auto 20px;
}
.review-garden-image {
  width: 100%;
  border-radius: 22px;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.child-screen .review-intro:has(.illustrated-garden) {
  background: #fffdf6;
}
.completion-art {
  width: 190px;
  max-width: 45%;
  margin-bottom: 20px;
}
.completion-image {
  width: 100%;
}
.empty-mascot {
  width: 125px;
  margin: 0 auto 18px;
}
.parent-screen .hero {
  background: #faf5e9;
  border-color: #e8e4d3;
}
.parent-screen .hero .generated-garden {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 57%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 65% center;
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
.parent-screen .hero-copy {
  width: 58%;
}
.parent-screen .hero-copy > p {
  color: #83906e;
  max-width: 480px;
}
.parent-screen .hero h2 span {
  color: #a98a57;
}
.parent-screen .hero-number {
  color: #a69e83;
}
@media (min-width: 701px) and (max-height: 850px) {
  .child-screen .card-back-decor {
    width: 180px;
    max-width: 65%;
  }
  .child-screen .card-back-title {
    margin-top: 12px;
  }
  .child-screen .card-back-small {
    margin-top: 5px;
  }
}
@media (max-width: 700px) {
  .avatar-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
  }
  .avatar-options .avatar-choice {
    max-height: 140px;
  }
  .avatar-options b {
    font-size: 19px;
  }
  .child-screen .card-back-decor {
    width: 135px;
    max-width: 93%;
  }
  .child-screen .card-back-title {
    font-size: 19px;
    letter-spacing: 0.03em;
    margin-top: 21px;
  }
  .child-screen .card-back-small {
    font-size: 17px;
    margin-top: 9px;
  }
  .child-screen .review-plant.illustrated-garden {
    width: min(360px, 100%);
    margin-bottom: 22px;
  }
  .child-screen .review-intro:has(.illustrated-garden) {
    padding: 18px 17px 25px;
  }
  .review-garden-image {
    border-radius: 14px;
  }
  .completion-art {
    width: 155px;
    max-width: 55%;
  }
  .parent-screen .hero {
    min-height: 500px;
  }
  .parent-screen .hero-copy {
    width: 100%;
  }
  .parent-screen .hero .generated-garden {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 68%;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 24%);
  }
  .parent-screen .hero-copy > p {
    max-width: 100%;
  }
  .parent-screen .hero-actions {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 365px) {
  .child-screen .card-back-title {
    font-size: 17px;
  }
  .child-screen .card-back-decor {
    width: 122px;
  }
  .child-screen .card-back-small {
    font-size: 16px;
  }
}