/* Giao diện các màn hình: chào, chọn bé, tạo hồ sơ, bản đồ (tạm).
   Dùng token ở tokens.css. Kích thước theo rem/vmin để co giãn từ điện thoại tới máy tính. */

.screen { min-height: 100vh; min-height: 100dvh; }

/* ================= Màn chào ================= */
.welcome {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--safe-t) + var(--s-4)) calc(var(--safe-r) + var(--gutter)) calc(var(--safe-b) + var(--s-4)) calc(var(--safe-l) + var(--gutter));
  overflow: hidden;
  background: #C4ECFF;
  isolation: isolate;
}

.welcome__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.welcome__sun   { position: absolute; top: 17%; right: 7%; width: clamp(5rem, 16vmin, 9rem); height: auto; }
.welcome__cloud { position: absolute; height: auto; opacity: .95; }
.welcome__cloud--a { top: 14%; left: 6%;  width: clamp(5rem, 18vmin, 10rem); --drift: 3vw;  --drift-time: 26s; }
.welcome__cloud--b { top: 21%; right: 30%; width: clamp(4rem, 13vmin, 7rem);  --drift: -4vw; --drift-time: 32s; }
.welcome__cloud--c { top: 12%; left: 48%;  width: clamp(3.5rem, 11vmin, 6rem); --drift: 5vw;  --drift-time: 38s; }
.welcome__hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; }
.welcome__flower { position: absolute; height: auto; width: clamp(2rem, 6vmin, 3.25rem); bottom: 30%; }
.welcome__flower--a { left: 9%; }
.welcome__flower--b { left: 47%; bottom: 27%; }
.welcome__flower--c { right: 11%; bottom: 31%; }

.welcome__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: 0 4px 0 var(--c-line);
}
.lang-switch > svg { width: 1.5rem; height: 1.5rem; flex: none; margin-right: var(--s-1); }
.lang-switch button {
  min-width: 3.5rem;
  min-height: 3rem;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-black);
  cursor: pointer;
  transition: background-color var(--dur-1) linear, transform var(--dur-1) var(--ease-out);
}
.lang-switch button:active { transform: scale(.95); }
.lang-switch button[aria-pressed="true"] { background: var(--c-violet); color: #fff; }

.welcome__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  text-align: center;
}
.welcome__title {
  font-size: var(--fs-3xl);
  color: var(--c-violet-deep);
  letter-spacing: .01em;
  text-shadow: 0 var(--edge) 0 rgba(255, 255, 255, .85);
}
.welcome__tagline { font-size: var(--fs-lg); color: var(--c-ink); }
.welcome__start { margin-top: var(--s-3); }

.player-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-5) var(--s-1) var(--s-1);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 4px 0 var(--c-line);
  text-align: left;
  cursor: pointer;
}
.player-chip:active { transform: translateY(4px); box-shadow: none; }
.player-chip__avatar { width: 3.25rem; height: 3.25rem; flex: none; border-radius: 50%; background: var(--c-sky-soft); }
.player-chip__avatar svg { width: 100%; height: 100%; }
.player-chip__text { display: flex; flex-direction: column; line-height: 1.15; }
.player-chip__name { font-size: var(--fs-md); font-weight: var(--fw-black); }
.player-chip__switch { font-size: var(--fs-sm); color: var(--c-ink-2); }

.welcome__pals {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(.25rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pal {
  width: clamp(4.5rem, 20vw, 9rem);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 100%;
}
.pal svg { width: 100%; height: auto; }

/* Màn thấp (điện thoại nằm ngang): xếp lại cho vừa. */
@media (max-height: 520px) {
  .welcome { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: var(--s-5); }
  .welcome__top { grid-column: 1 / -1; }
  .welcome__hero { grid-column: 1; grid-row: 2; align-items: flex-start; text-align: left; padding: 0; gap: var(--s-2); }
  .welcome__title { font-size: var(--fs-2xl); }
  .welcome__tagline { font-size: var(--fs-md); }
  .welcome__start { margin-top: var(--s-1); min-height: var(--tap); font-size: var(--fs-lg); padding: 0 var(--s-6); }
  .welcome__pals { grid-column: 2; grid-row: 2; align-self: end; }
  .pal { width: clamp(3.25rem, 11vw, 5rem); }
  .welcome__sun { top: 24%; right: 5%; width: 4.5rem; }
  .welcome__flower { display: none; }
  .welcome__cloud--a { top: 4%; left: 40%; }
  .welcome__cloud--c { top: 26%; left: 62%; }
}

/* ================= Trang thường (chọn bé, tạo hồ sơ, bản đồ) ================= */
.page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  width: min(100%, 44rem);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(var(--safe-t) + var(--s-4)) calc(var(--safe-r) + var(--gutter)) calc(var(--safe-b) + var(--s-6)) calc(var(--safe-l) + var(--gutter));
}
.page--center { align-items: center; text-align: center; }
.page--center .page__top { align-self: stretch; }
.page__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); }
.page__title { font-size: var(--fs-2xl); text-align: center; }
.page__note { font-size: var(--fs-sm); color: var(--c-ink-2); text-align: center; }
.page__title, .page__note { text-wrap: balance; }

/* ---- Danh sách bé ---- */
.players {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 12rem;
  padding: var(--s-4) var(--s-3);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 var(--edge) 0 var(--c-line);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.player:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--c-line); }
.player--active { box-shadow: 0 var(--edge) 0 var(--c-violet-deep); background: var(--c-violet-soft); }
.player__avatar { width: 6rem; height: 6rem; border-radius: 50%; background: var(--c-sky-soft); }
.player__avatar svg { width: 100%; height: 100%; }
.player__avatar--add { display: grid; place-items: center; background: var(--c-sun-soft); }
.player__avatar--add svg { width: 2.75rem; height: 2.75rem; }
.player__name { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.1; overflow-wrap: anywhere; }
.player__stars { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.player__stars svg { width: 1.25rem; height: 1.25rem; }
.player--add { background: transparent; box-shadow: none; border: 4px dashed var(--c-ink-3); justify-content: center; }
.player--add:active { transform: none; background: var(--c-sun-soft); }

/* ---- Form tạo hồ sơ ---- */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 var(--edge) 0 var(--c-line);
}
.panel__submit { align-self: center; padding: 0 var(--s-6); font-size: var(--fs-lg); }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { padding: 0; font-size: var(--fs-md); font-weight: var(--fw-black); }
.field__hint { font-size: var(--fs-sm); color: var(--c-ink-2); }
.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 4px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-ink);
  font: inherit;
  font-size: max(16px, var(--fs-lg));          /* >= 16px để iOS không tự phóng to */
  font-weight: var(--fw-black);
  -webkit-user-select: text;
  user-select: text;
}
.field__input:focus { border-color: var(--c-violet); outline: none; background: var(--c-surface); }
.field__input::placeholder { color: var(--c-ink-3); font-weight: var(--fw-regular); }

.avatars { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--s-3); }
.ages    { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }

/* Ô chọn dùng radio thật (ẩn bằng cách phủ lên) để bàn phím và đọc màn hình hoạt động. */
.opt { position: relative; display: block; cursor: pointer; }
.opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.opt__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap);
  height: 100%;
  padding: var(--s-3) var(--s-2);
  border: 4px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  text-align: center;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) linear, background-color var(--dur-1) linear;
}
.opt:active .opt__body { transform: scale(.96); }
.opt input:checked + .opt__body { border-color: var(--c-violet); background: var(--c-violet-soft); }
.opt input:focus-visible + .opt__body { outline: 4px solid var(--c-sky-deep); outline-offset: 3px; }
.opt__art { width: 4.25rem; height: 4.25rem; }
.opt__art svg { width: 100%; height: 100%; }
.opt__name { font-size: var(--fs-md); font-weight: var(--fw-black); line-height: 1.1; }
.opt--age .opt__name { font-size: var(--fs-lg); }
.opt__check {
  position: absolute; top: -.6rem; right: -.6rem;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--c-violet); color: #fff;
  transform: scale(0);
  transition: transform var(--dur-2) var(--ease-bounce);
}
.opt__check svg { width: 1.1rem; height: 1.1rem; }
.opt input:checked + .opt__body .opt__check { transform: scale(1); }

@media (max-height: 520px) {
  .page { gap: var(--s-3); }
  .page__title { font-size: var(--fs-xl); }
  .player { min-height: 9rem; }
  .player__avatar { width: 4.25rem; height: 4.25rem; }
  .subject { min-height: 8.5rem; }
  .subject__art { width: 3.75rem; }
}

/* ================= Bản đồ môn học ================= */
.page.map { width: min(100%, 56rem); }
.map__top { gap: var(--s-3); }
.map .player-chip { margin-top: 0; min-width: 0; }
.player-chip__stars { display: inline-flex; align-items: center; gap: var(--s-1); }
.player-chip__stars svg, .player__stars svg { color: var(--c-sun-deep); }
.player-chip__stars svg { width: 1.1rem; height: 1.1rem; }

.subjects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }

.subject {
  --meta-bg: rgba(255, 255, 255, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 12rem;
  padding: var(--s-4) var(--s-3);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 var(--edge) 0 var(--accent-deep);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.subject[data-subject="stem"] { --meta-bg: rgba(46, 34, 87, .3); }
.subject:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 var(--accent-deep); }
.subject__art { width: 6rem; }
.subject__art svg { width: 100%; height: auto; }
.subject__name { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.1; text-align: center; }
.subject__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: var(--meta-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
}
.subject__meta svg { width: 1.1rem; height: 1.1rem; }

/* Môn chưa có bài: nền nhạt, nhãn "Sắp có" */
.subject--soon { background: var(--accent-soft); color: var(--c-ink); box-shadow: 0 var(--edge) 0 var(--accent); }
.subject--soon:active { box-shadow: 0 0 0 var(--accent); }
.subject--soon .subject__meta { background: var(--accent); color: var(--accent-ink); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + var(--s-5));
  z-index: var(--z-toast);
  max-width: calc(100vw - 2rem);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-md);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 160%);
  transition: transform var(--dur-3) var(--ease-bounce), opacity var(--dur-2) linear;
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

/* ================= Cổng phụ huynh và hộp thoại ================= */
.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + var(--s-4)) calc(var(--safe-r) + var(--s-4)) calc(var(--safe-b) + var(--s-4)) calc(var(--safe-l) + var(--s-4));
  background: rgba(46, 34, 87, .6);
  overflow-y: auto;
}
.gate__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: min(100%, 27rem);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: 0 var(--edge) 0 var(--c-line);
  text-align: center;
}
.gate__close { position: absolute; top: var(--s-2); right: var(--s-2); }
.gate__icon { width: 3.5rem; height: 3.5rem; color: var(--c-violet); }
.gate__icon svg { width: 100%; height: 100%; }
.gate__title { font-size: var(--fs-xl); }
.gate__prompt { font-size: var(--fs-sm); color: var(--c-ink-2); }
.gate__q { font-size: var(--fs-lg); font-weight: var(--fw-black); line-height: 1.2; text-wrap: balance; }
.gate__form { display: flex; gap: var(--s-3); width: 100%; margin-top: var(--s-2); }
.gate__input { flex: 1; min-width: 0; text-align: center; letter-spacing: .12em; }
.gate__submit { flex: none; padding: 0 var(--s-5); }
.gate__msg { min-height: 1.4em; font-size: var(--fs-sm); }
.dialog { padding-top: var(--s-5); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-2); }

/* ================= Khu vực phụ huynh ================= */
.parent { gap: var(--s-4); }
.panel--adult { gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.panel__title { font-size: var(--fs-md); }
.row { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap-adult); }
.row__icon { flex: none; width: 2rem; height: 2rem; }
.row__icon svg { width: 100%; height: 100%; }
.row__label { flex: 1; font-size: var(--fs-md); font-weight: var(--fw-black); }
.row__label--sub { flex: 0 0 auto; min-width: 6rem; font-weight: var(--fw-bold); color: var(--c-ink-2); }

.switch {
  position: relative;
  flex: none;
  width: 5rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-ink-3);
  cursor: pointer;
  transition: background-color var(--dur-2) linear;
}
.switch[aria-checked="true"] { background: var(--c-teal-deep); }
.switch__knob {
  position: absolute;
  top: .25rem;
  left: .25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(46, 34, 87, .25);
  transition: transform var(--dur-2) var(--ease-bounce);
}
.switch[aria-checked="true"] .switch__knob { transform: translateX(2rem); }

.seg { display: flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-bg); }
.seg__btn {
  flex: 1;
  min-height: var(--tap-adult);
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: clamp(.95rem, 4.2vw, 1.25rem);
  white-space: nowrap;
  font-weight: var(--fw-black);
  cursor: pointer;
}
.seg__btn[aria-pressed="true"] { background: var(--c-violet); color: #fff; }

.range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 3rem; margin: 0; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: .875rem; border-radius: var(--r-pill); background: var(--c-line); }
.range::-moz-range-track { height: .875rem; border-radius: var(--r-pill); background: var(--c-line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 2.25rem; height: 2.25rem; margin-top: calc((.875rem - 2.25rem) / 2); border: 4px solid #fff; border-radius: 50%; background: var(--c-violet); box-shadow: 0 4px 0 var(--c-violet-deep); }
.range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border: 4px solid #fff; border-radius: 50%; background: var(--c-violet); box-shadow: 0 4px 0 var(--c-violet-deep); }
.range:disabled { opacity: .45; cursor: default; }

.kids { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.kid { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--c-bg); }
.kid--edit { background: var(--c-surface); border: 4px solid var(--c-violet-soft); }
.kid__head { display: flex; align-items: center; gap: var(--s-3); }
.kid__avatar { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-sky-soft); }
.kid__avatar svg { width: 100%; height: 100%; }
.kid__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.kid__name { font-size: var(--fs-lg); font-weight: var(--fw-black); overflow-wrap: anywhere; }
.kid__sub { font-size: var(--fs-sm); color: var(--c-ink-2); }
.kid__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.kid__actions .btn { padding: 0 var(--s-3); }
.kid__actions .btn--coral { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .kid__actions { grid-template-columns: repeat(3, auto); justify-content: end; }
  .kid__actions .btn--coral { grid-column: auto; }
}
.kid__form .kid__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kid__form { display: flex; flex-direction: column; gap: var(--s-4); }
.panel__add { align-self: flex-start; }
.parent__version { margin-top: var(--s-2); }

/* ================= Trang thông tin (Giới thiệu, Ghi công, Chính sách) ================= */
.info-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.info-link { flex: 1 1 10rem; }
.info__body { gap: var(--s-4); max-width: 42rem; margin-inline: auto; width: 100%; text-align: left; }
.info__title { text-align: left; }
.info__date { font-size: var(--fs-sm); color: var(--c-ink-2); margin-top: calc(var(--s-2) * -1); }
.info__sec { display: flex; flex-direction: column; gap: var(--s-2); }
.info__h { font-size: var(--fs-md); }
.info__p, .info__ul { font-weight: 500; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-ink); text-wrap: pretty; overflow-wrap: anywhere; }
.info__ul { padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--s-2); }