/* Nền các màn bản đồ, môn học, chủ đề và màn chơi + lưới chủ đề.
   Nền chỉ là màu nhạt và họa tiết trắng mờ thưa (backdrops.css, tự sinh) nên không giành chỗ của nội dung.
   Màn nào có data-scene (router đặt) và data-subject (màn tự đặt) sẽ dùng màu --accent của môn. */

.screen[data-scene] { position: relative; isolation: isolate; overflow-x: clip; }
.screen[data-scene]::before,
.screen[data-scene]::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }

/* ---- Mọi màn dùng chung một nền như bản đồ: bầu trời, mây trôi chậm, đồi mềm ở đáy ----
   Màu của từng môn chỉ hiện ở thẻ, nút và hình (qua --accent), nền thì thống nhất. */
.screen[data-scene] { background: linear-gradient(180deg, #BDE8FF 0%, #DCF1FF 42%, #F0EBFF 100%); }
.screen[data-scene]::before {
  top: 0; left: -6%; right: -6%; height: min(46vh, 22rem);
  background: var(--bd-clouds) center top / cover no-repeat;
  animation: pp-cloud-drift 70s ease-in-out infinite alternate;
}
.screen[data-scene]::after {
  bottom: 0; height: min(30vh, 14rem);
  background: var(--bd-hills) center bottom / 100% 100% no-repeat;
}
@keyframes pp-cloud-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }

/* Màn chơi và màn thưởng: mây và đồi nhạt hơn để bé tập trung vào câu hỏi. */
.screen[data-scene="play"]::before { opacity: .55; }
.screen[data-scene="play"]::after { opacity: .6; height: min(22vh, 10rem); }

/* Giảm chuyển động: mây đứng yên. */
:root[data-motion="reduced"] .screen[data-scene]::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion]) .screen[data-scene]::before { animation: none; } }

/* ================= Lưới chủ đề trên màn môn học ================= */
.topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 34rem) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.topics__item { display: flex; min-width: 0; }

.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 var(--edge) 0 var(--accent-deep, var(--c-line));
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.topic-card:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--accent-deep, var(--c-line)); }
.topic-card__art { display: block; background: var(--accent-soft, var(--c-bg)); aspect-ratio: 4 / 3; }
.topic-card__art svg { width: 100%; height: 100%; }
.topic-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-3); min-height: 5.25rem; }
.topic-card__name { font-size: var(--fs-md); font-weight: var(--fw-black); line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.topic-card__meta { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; }
.topic-card__bar { flex: 1; height: .5rem; overflow: hidden; border-radius: var(--r-pill); background: var(--c-line); }
.topic-card__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent, var(--c-violet)); }
.topic-card__count { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.topic-card__badge {
  position: absolute; top: var(--s-2); right: var(--s-2);
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--c-teal); color: #fff; box-shadow: 0 3px 0 var(--c-teal-deep);
}
.topic-card__badge svg { width: 1.1rem; height: 1.1rem; }

/* ================= Màn một chủ đề ================= */
.topic-page__head { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.topic-page__art { width: min(62%, 15rem); overflow: hidden; border-radius: var(--r-lg); background: var(--accent-soft); box-shadow: 0 var(--edge) 0 var(--accent-deep); }
.topic-page__art svg { width: 100%; height: auto; }
.topic-page__meta { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }
.topic-page__count { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--c-ink-2); }

/* Danh sách unit của chủ đề: lưới thẻ (1 cột trên điện thoại, 2-3 cột trên màn rộng). */
.page.topic-page { width: min(100%, 64rem); }
.units { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (min-width: 40rem) { .units { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .units { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-page .unit { height: 100%; box-shadow: 0 var(--edge) 0 var(--accent-deep, var(--c-line)); }
.topic-page .unit__head { flex-wrap: nowrap; align-items: flex-start; }
.topic-page .unit__title { font-size: var(--fs-md); line-height: 1.15; text-wrap: balance; }
.unit__count { flex: none; padding: .1rem .6rem; border-radius: var(--r-pill); background: var(--accent-soft, var(--c-bg)); font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.unit--done .unit__count { background: var(--c-teal); color: #fff; }
.topic-page .path { grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); }

/* ================= Màu thẻ: nổi lên khỏi nền trời mà vẫn dễ đọc ================= */
/* Thẻ chủ đề: nền đặc theo màu môn, chữ đậm màu mực trên nền sáng (hoặc trắng trên tím), con số nằm trong viên thuốc trắng. */
.topic-card { background: var(--accent); color: var(--accent-ink, var(--c-ink)); border: 3px solid var(--accent-deep); box-shadow: 0 var(--edge) 0 var(--accent-deep); }
.topic-card__art { margin: var(--s-2) var(--s-2) 0; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .85); }
.topic-card__body { padding: var(--s-2) var(--s-3) var(--s-3); }
.topic-card__name { color: var(--accent-ink, var(--c-ink)); }
.topic-card__bar { background: rgba(255, 255, 255, .7); }
.topic-card__fill { background: var(--c-ink); }
.topic-card__count { padding: .05rem .5rem; border-radius: var(--r-pill); background: #fff; color: var(--c-ink); }
.topic-card__badge { background: var(--c-sun); color: var(--c-ink); box-shadow: 0 3px 0 var(--c-sun-deep); }
@media (hover: hover) { .topic-card:hover { transform: translateY(-2px); } }

/* Thẻ unit trên trang chủ đề: dải đầu đặc màu môn kèm hình minh họa, thân trắng chứa lưới ô bài. */
.topic-page .unit { padding: 0; gap: 0; overflow: hidden; border: 3px solid var(--accent-deep); background: #fff; }
.topic-page .unit__head { flex-wrap: nowrap; justify-content: flex-start; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--accent); color: var(--accent-ink, var(--c-ink)); align-items: center; }
.unit__art { flex: none; width: 3.4rem; overflow: hidden; border-radius: .9rem; background: #fff; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 0 var(--accent-deep); }
.unit__art svg { display: block; width: 100%; height: auto; }
.unit__titles { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: .2rem; }
.topic-page .unit__title { color: inherit; font-size: var(--fs-md); line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.topic-page .unit__age { padding: .05rem .6rem; background: #fff; color: var(--c-ink); font-size: var(--fs-xs); }
.topic-page .unit__count { flex: none; margin-left: auto; padding: .1rem .6rem; border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font-size: var(--fs-xs); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.topic-page .unit--done .unit__count { background: var(--c-sun); }
.topic-page .path { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-4); }
.topic-page .path__item { display: block; }

/* Ô bài: gạch đặc màu môn, số trong huy hiệu trắng, ba sao nằm riêng trong viên thuốc trắng bên dưới (có khoảng cách). */
.node {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  width: 100%; height: auto; padding: .6rem .3rem .55rem;
  border: 3px solid var(--accent-deep); border-radius: 1.15rem;
  background: var(--accent); color: var(--accent-ink, var(--c-ink));
  box-shadow: 0 var(--edge) 0 var(--accent-deep);
}
.node:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--accent-deep); }
@media (hover: hover) { .node:hover { transform: translateY(-2px); } .node:active { transform: translateY(var(--edge)); } }
.node__num {
  display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%;
  background: #fff; color: var(--c-ink); font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1;
  box-shadow: inset 0 0 0 3px rgba(46, 34, 87, .12), 0 3px 0 rgba(0, 0, 0, .16);
}
.node__stars { display: flex; justify-content: center; gap: 2px; padding: .2rem .5rem; border-radius: var(--r-pill); background: #fff; color: #C9C3E4; box-shadow: inset 0 0 0 2px rgba(46, 34, 87, .08); }
.node__stars svg { width: .95rem; height: .95rem; }
.node__stars .is-on { color: var(--c-sun-deep); filter: drop-shadow(0 1px 0 rgba(46, 34, 87, .25)); }
.node--done .node__num { background: var(--c-sun); }
.node--next { border-color: var(--c-sun-deep); background: var(--c-sun); color: var(--c-ink); box-shadow: 0 var(--edge) 0 var(--c-sun-deep); }
.node--next .node__num { background: #fff; box-shadow: inset 0 0 0 3px var(--c-sun-deep), 0 3px 0 rgba(0, 0, 0, .16); }
.node__ping { position: absolute; inset: -5px; border: 4px solid var(--c-sun-deep); border-radius: 1.4rem; pointer-events: none; }
.node__check {
  position: absolute; top: -.45rem; right: -.4rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--c-teal); color: #fff; box-shadow: 0 2px 0 var(--c-teal-deep), 0 0 0 2px #fff;
}
.node__check svg { width: 1rem; height: 1rem; }

/* Nhóm tuổi: bốn nút (kể cả "Mọi lứa tuổi") nên chữ nhỏ hơn một chút và cho phép xuống dòng. */
.seg--age .seg__btn { white-space: normal; padding-inline: .4rem; font-size: var(--fs-sm); line-height: 1.1; text-wrap: balance; }
.topic-page .seg--age, .subject-page .seg--age { align-self: center; width: min(100%, 30rem); }

/* Các khối còn lại trên nền trời (chọn bé, form, phụ huynh, thông tin): viền xanh đậm hơn nền để tách rõ. */
.screen[data-scene="sky"] .panel,
.screen[data-scene="sky"] .player:not(.player--add) { border: 3px solid #8FA8EC; box-shadow: 0 var(--edge) 0 #6E8AE0; }
.screen[data-scene="sky"] .player--add { background: rgba(255, 255, 255, .7); border-color: #6E8AE0; }
.subject-page__badge { border: 3px solid #8FA8EC; }

.donate__text { margin: 0; line-height: 1.5; font-weight: var(--fw-bold, 700); }
.donate__qr { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin: 0; }
.donate__qr img { display: block; width: min(100%, 15rem); height: auto; padding: var(--s-3); border: 3px solid #FFB020; border-radius: var(--r-lg); background: #fff; image-rendering: pixelated; box-shadow: 0 var(--edge) 0 #E08A00; }
.donate__hint { max-width: 22rem; font-size: var(--fs-sm); font-weight: var(--fw-bold, 700); color: var(--c-ink-2); text-align: center; text-wrap: balance; }
.donate__thanks { margin: 0; font-weight: var(--fw-black); text-align: center; text-wrap: balance; }