/* Phong cách "sticker" sách tranh: viền mực đậm, bóng cứng phía dưới như đồ chơi bấm được. */
:root {
  --sky: #CFEAFF;
  --sky-deep: #A9D8FF;
  --paper: #FFFFFF;
  --ink: #263063;
  --ink-soft: #5A628F;
  --pink: #FF6B8B;
  --sun: #FFC23C;
  --leaf: #3DBE8B;
  --grape: #9B7BFF;
  --hill: #8FDCA8;
  --hill-2: #6CCB8E;

  --display: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
  --body: 'Be Vietnam Pro', system-ui, sans-serif;

  --line: 3px;
  --lift: 0 5px 0 var(--ink);
  --lift-sm: 0 3px 0 var(--ink);
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;

  --pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--grape); outline-offset: 4px; border-radius: 10px; }

/* ---------- Bầu trời ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(var(--sky) 55%, #E4F4FF); }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .9; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud.c1 { width: 140px; height: 42px; top: 9%; left: -160px; animation: drift 70s linear infinite; }
.cloud.c1::before { width: 64px; height: 64px; top: -32px; left: 22px; }
.cloud.c1::after { width: 46px; height: 46px; top: -20px; left: 74px; }
.cloud.c2 { width: 100px; height: 32px; top: 26%; left: -120px; animation: drift 95s linear -40s infinite; opacity: .7; }
.cloud.c2::before { width: 48px; height: 48px; top: -24px; left: 16px; }
.cloud.c2::after { width: 34px; height: 34px; top: -14px; left: 54px; }
.cloud.c3 { width: 180px; height: 50px; top: 46%; left: -200px; animation: drift 120s linear -80s infinite; opacity: .55; }
.cloud.c3::before { width: 80px; height: 80px; top: -40px; left: 30px; }
.cloud.c3::after { width: 58px; height: 58px; top: -26px; left: 96px; }
@keyframes drift { to { transform: translateX(calc(100vw + 260px)); } }
.hills { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 160px;
  background: radial-gradient(60% 120px at 25% 100%, var(--hill) 99%, transparent 100%),
              radial-gradient(55% 140px at 80% 100%, var(--hill-2) 99%, transparent 100%); }

/* ---------- Khung ---------- */
.topbar { position: sticky; top: 0; z-index: 5; padding: 12px 16px 10px;
  background: linear-gradient(var(--sky) 75%, rgba(207, 234, 255, 0));
  padding-top: max(12px, env(safe-area-inset-top)); }
.topbar-inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.app { position: relative; z-index: 1; flex: 1 0 auto; display: flex; flex-direction: column;
  width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 16px 32px; }
/* Màn hình ngắn hơn khung nhìn thì nằm giữa theo chiều dọc; màn hình dài (kết quả) cuộn bình thường. */
.screen { width: 100%; margin-top: auto; margin-bottom: auto; }

/* Thương hiệu */
.brand { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 6px; border-radius: 999px;
  border: var(--line) solid var(--ink); background: var(--paper); box-shadow: var(--lift-sm); cursor: pointer;
  transition: transform .12s, box-shadow .12s; }
.brand:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; padding-top: 3px; white-space: nowrap; }
.brand-mark .leaf { transform-box: fill-box; transform-origin: 50% 100%; }
.brand:hover .leaf.l { animation: sway .8s ease-in-out; }
.brand:hover .leaf.r { animation: sway .8s ease-in-out reverse; }
@keyframes sway { 30% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } }
.brand.compact { padding: 0 12px 0 4px; height: 44px; }
.brand.compact .brand-name { font-size: 19px; }
@media (max-width: 520px) { .brand.compact { padding: 0; width: 44px; justify-content: center; } .brand.compact .brand-name { display: none; } }

/* Ghi công */
.credit { position: relative; z-index: 1; flex: none; text-align: center; padding: 12px 16px max(20px, env(safe-area-inset-bottom));
  font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em; }
.credit span { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.screen { animation: screenIn .45s var(--pop) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.icon-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: var(--line) solid var(--ink);
  background: var(--paper); box-shadow: var(--lift-sm); font-size: 20px; cursor: pointer; display: grid; place-items: center;
  transition: transform .12s, box-shadow .12s; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.icon-btn[aria-pressed="false"] { opacity: .55; }

/* Đường đá: mỗi viên là một chặng */
.path { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; }
.stone { flex: 1; height: 12px; border-radius: 99px; background: rgba(38, 48, 99, .14); position: relative; transition: background .3s; }
.stone.done { background: var(--leaf); }
.stone.game { flex: .7; }
.stone.game.done { background: var(--sun); }
.stone.now { background: var(--paper); box-shadow: inset 0 0 0 2.5px var(--ink); }
/* Thanh "Bông hiểu con" */
.meter-wrap { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.meter-steps { display: flex; gap: 4px; }
.meter-steps .ms { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: rgba(38, 48, 99, .12); border: 2px solid transparent; }
.meter-steps .ms.done { background: var(--leaf); }
.meter-steps .ms.now { background: var(--paper); border-color: var(--ink); animation: hop 1.4s ease-in-out infinite; }
.meter { flex: 1; height: 14px; border-radius: 99px; background: rgba(38, 48, 99, .14); overflow: hidden; border: 2px solid var(--ink); }
.meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sun), var(--leaf)); transition: width .6s var(--pop); }
.meter-label { font-family: var(--display); font-weight: 800; font-size: 15px; min-width: 38px; text-align: right; }
@media (max-width: 420px) { .meter-steps { display: none; } }
.know { text-align: left; max-width: 420px; margin: 0 auto; }
.know b { display: block; font-family: var(--display); font-size: 16px; margin-bottom: 6px; }
.center-chips { justify-content: center; }
.chip.static { cursor: default; box-shadow: none; min-height: 36px; font-size: 14px; }
.chip.static.ok { background: #CFF3DD; }
.chip.static.ask { background: #FFF2C2; }
.stone.parent { flex: 3; overflow: visible; }
.stone.parent > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--leaf); transition: width .3s; }
.phase-sep { flex: none; width: 3px; height: 20px; margin: 0 4px; border-radius: 2px; background: var(--ink); opacity: .35; }
.stone.now::after { content: attr(data-me); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%);
  font-size: 22px; animation: hop 1.4s ease-in-out infinite; }
@keyframes hop { 50% { transform: translate(-50%, -95%); } }

/* ---------- Chữ ---------- */
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.title-xl { font-size: clamp(40px, 10vw, 64px); font-weight: 800; }
.title-lg { font-size: clamp(28px, 7vw, 40px); font-weight: 800; }
.title-md { font-size: clamp(22px, 5.4vw, 28px); font-weight: 700; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 36ch; text-wrap: pretty; }
.small { font-size: 14px; color: var(--ink-soft); }
.center { text-align: center; }
.center .lead, .hero .lead, .loading .lead { margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }

/* ---------- Nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 28px;
  border-radius: 999px; border: var(--line) solid var(--ink); background: var(--pink); color: #fff;
  font-family: var(--display); font-size: 22px; font-weight: 700; box-shadow: var(--lift); cursor: pointer;
  transition: transform .12s, box-shadow .12s, filter .12s; text-decoration: none; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.sun { background: var(--sun); color: var(--ink); }
.btn.leaf { background: var(--leaf); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 8px; color: var(--ink-soft); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; cursor: pointer; font-size: 15px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }

/* ---------- Thẻ giấy ---------- */
.paper { background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--lift);
  padding: 24px 20px; }

/* ---------- Mascot ---------- */
.mascot { display: block; margin: 0 auto; overflow: visible; }
.mascot .body { transform-origin: 50% 90%; animation: breathe 3.2s ease-in-out infinite; }
.mascot .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.5s infinite; }
.mascot.happy .body { animation: joy .7s var(--pop); }
.mascot.sad .body { animation: droop .8s ease; }
@keyframes breathe { 50% { transform: scale(1.03, .97); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes joy { 30% { transform: translateY(-18px) scale(.95, 1.08); } 60% { transform: translateY(0) scale(1.08, .92); } }
@keyframes droop { 40% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } }

/* ---------- Trang chào ---------- */
.hero { padding: 12px 0 8px; text-align: center; }
.hero .title-xl { margin-top: 4px; }
.hero .row .btn { min-width: 260px; }
.hero-cards { display: flex; justify-content: center; margin: 22px 0 6px; }
.hero-cards span { width: 62px; height: 62px; margin: 0 -6px; border-radius: 18px; border: var(--line) solid var(--ink);
  display: grid; place-items: center; font-size: 34px; box-shadow: var(--lift-sm); animation: cardIn .6s var(--pop) both; }
/* Xòe đều như một tay bài: nghiêng đối xứng quanh tâm, hai thẻ giữa cao nhất. */
.hero-cards { align-items: flex-end; }
.hero-cards span:nth-child(1) { transform: rotate(-12deg) translateY(8px); }
.hero-cards span:nth-child(2) { transform: rotate(-7deg) translateY(2px); }
.hero-cards span:nth-child(3) { transform: rotate(-2deg); }
.hero-cards span:nth-child(4) { transform: rotate(2deg); }
.hero-cards span:nth-child(5) { transform: rotate(7deg) translateY(2px); }
.hero-cards span:nth-child(6) { transform: rotate(12deg) translateY(8px); }
@keyframes cardIn { from { opacity: 0; translate: 0 30px; } }
.facts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.fact { background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 15px; }

/* ---------- Form thiết lập ---------- */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.choice-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
/* 5 lựa chọn: điện thoại xếp 3 + 2 căn giữa, màn rộng xếp 1 hàng 5. */
.choice-grid.wrap5 { display: flex; flex-wrap: wrap; justify-content: center; }
.choice-grid.wrap5 .choice { flex: 0 0 calc((100% - 24px) / 3); }
@media (min-width: 600px) { .choice-grid.wrap5 .choice { flex-basis: calc((100% - 48px) / 5); } }
.choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 96px; padding: 14px 10px; border-radius: var(--r-md); border: var(--line) solid var(--ink); background: var(--paper);
  box-shadow: var(--lift-sm); cursor: pointer; text-align: center; font-weight: 600; line-height: 1.25;
  transition: transform .15s var(--pop), box-shadow .12s, background .15s; }
.choice:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 var(--ink); }
.choice .emo { font-size: 40px; line-height: 1; }
.choice.on { background: #FFF2C2; transform: scale(1.03); }
.choice.on::after { content: '✓'; position: absolute; top: -12px; right: -10px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--leaf); color: #fff; border: var(--line) solid var(--ink); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.age { aspect-ratio: 1; border-radius: 50%; font-family: var(--display); font-size: 40px; font-weight: 800; flex-direction: column; gap: 0; }
.age small { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field { display: block; }
.field input { width: 100%; height: 60px; border-radius: var(--r-md); border: var(--line) solid var(--ink); padding: 0 18px;
  font: 600 22px var(--display); color: var(--ink); background: var(--paper); box-shadow: inset 0 3px 0 rgba(38, 48, 99, .08); }
.field input::placeholder { color: #A5AACB; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.swatch { width: 46px; height: 46px; border-radius: 50%; border: var(--line) solid var(--ink); cursor: pointer; box-shadow: var(--lift-sm);
  transition: transform .15s var(--pop); }
.swatch.on { transform: scale(1.18); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--ink); }
/* Thanh bước của phần thiết lập: chấm tiến độ ở giữa, nút quay lại bên trái. */
.steps { position: relative; display: flex; justify-content: center; align-items: center; min-height: 40px; }
.steps .back { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); }
.step-dots { display: flex; gap: 8px; }
.step-dots span { width: 12px; height: 12px; border-radius: 99px; background: rgba(38, 48, 99, .16); transition: width .3s var(--pop), background .3s; }
.step-dots .done { background: var(--leaf); }
.step-dots .now { width: 32px; background: var(--pink); }
.setup .label, .setup .field .small { display: block; text-align: center; }
.setup .field input { text-align: center; }
.setup .chips { justify-content: center; }
.setup .hint { text-align: center; text-wrap: balance; }
.label { font-family: var(--display); font-weight: 700; font-size: 20px; margin-bottom: 10px; display: block; }
.hint { background: rgba(255, 255, 255, .65); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: var(--line) solid var(--ink); background: var(--paper);
  font-weight: 600; cursor: pointer; box-shadow: var(--lift-sm); }
.chip.on { background: var(--sun); }

.consent label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; }
.consent input { width: 26px; height: 26px; flex: none; accent-color: var(--leaf); margin-top: 1px; }
.consent ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.consent li + li { margin-top: 6px; }

/* ---------- Màn chuyển lượt ---------- */
.turn { text-align: center; padding: 12px 0; }
.turn .lead, .turn .hint { margin-left: auto; margin-right: auto; max-width: 420px; }
.turn-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px;
  border: var(--line) solid var(--ink); background: var(--paper); font-weight: 700; font-size: 15px; }
.turn-badge.phase { background: var(--ink); color: #fff; }
.phase-done { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--leaf); }
.phase-tips { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; padding: 16px 18px 16px 38px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--lift-sm); font-size: 16px; }
.phase-tips li + li { margin-top: 6px; }
.turn.child .title-xl { color: var(--pink); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }

/* ---------- Câu hỏi bố mẹ ---------- */
.q-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.q-parent .q-text { font-family: var(--display); font-size: clamp(22px, 5.6vw, 27px); font-weight: 600; line-height: 1.3; margin: 10px 0 20px; }
.scale { display: grid; gap: 10px; }
.scale button { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 18px; border-radius: var(--r-sm);
  border: var(--line) solid var(--ink); background: var(--paper); text-align: left; font-weight: 600; font-size: 17px; cursor: pointer;
  box-shadow: var(--lift-sm); transition: transform .12s, background .15s; }
.scale button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.scale .dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; }
.scale .dot i { display: block; border-radius: 50%; background: var(--grape); border: 2px solid var(--ink); }
.scale button.on { background: #EDE7FF; }
.scale button.unknown { min-height: 44px; justify-content: center; border-style: dashed; box-shadow: none; font-weight: 500;
  font-size: 15px; color: var(--ink-soft); background: transparent; margin-top: 4px; }
.scale button.unknown.on { background: #EEF1FA; color: var(--ink); }
.scale button.on .dot i { background: var(--pink); }
.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.q-nav .link-btn { margin-left: -8px; }

/* ---------- Câu hỏi của con ---------- */
.q-child { text-align: center; }
.q-child .q-text { font-family: var(--display); font-size: clamp(25px, 6.6vw, 34px); font-weight: 700; line-height: 1.22; margin: 6px auto 22px; max-width: 26ch; }
.speak { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: var(--line) solid var(--ink);
  background: var(--sun); font-weight: 700; cursor: pointer; box-shadow: var(--lift-sm); }
.speak.talking { animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scale(1.06); } }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.two { grid-template-columns: repeat(2, 1fr); max-width: 420px; margin: 0 auto; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 16px 10px;
  border-radius: var(--r-lg); border: var(--line) solid var(--ink); background: var(--paper); box-shadow: var(--lift);
  font-weight: 700; font-size: 16px; line-height: 1.25; cursor: pointer; transition: transform .18s var(--pop), box-shadow .12s;
  animation: tileIn .5s var(--pop) both; }
.tile:nth-child(2) { animation-delay: .06s; } .tile:nth-child(3) { animation-delay: .12s; } .tile:nth-child(4) { animation-delay: .18s; }
.tile:nth-child(5) { animation-delay: .22s; } .tile:nth-child(6) { animation-delay: .26s; } .tile:nth-child(7) { animation-delay: .3s; }
.tile:nth-child(8) { animation-delay: .34s; } .tile:nth-child(9) { animation-delay: .38s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(24px) scale(.85); } }
.tile .emo { font-size: 58px; line-height: 1; transition: transform .25s var(--pop); }
.tile:hover .emo { transform: scale(1.1) rotate(-6deg); }
.tile:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.tile.on { background: #FFF2C2; animation: wiggle .5s ease; }
.tile.on .emo { transform: scale(1.18); }
.tile.dim { opacity: .4; transform: scale(.95); }
@keyframes wiggle { 25% { transform: rotate(-5deg) scale(1.05); } 50% { transform: rotate(4deg) scale(1.05); } 75% { transform: rotate(-2deg); } }
.tiles.grid9 { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tiles.grid9 .tile { min-height: 110px; font-size: 14px; }
.tiles.grid9 .tile .emo { font-size: 44px; }
.pick-count { font-family: var(--display); font-size: 20px; font-weight: 700; margin: 16px 0 10px; }

/* ---------- Hiệu ứng ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.spark { position: absolute; font-size: 26px; animation: spark 900ms ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(.4); opacity: 0; } }

/* ---------- Trò chơi ---------- */
.game { text-align: center; }
.game-stage { position: relative; height: min(56vh, 420px); border-radius: var(--r-lg); border: var(--line) solid var(--ink);
  background: linear-gradient(#2D3A7A, #4A3E8F); box-shadow: var(--lift); overflow: hidden; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; cursor: pointer; }
.game-stage .stars-bg { position: absolute; inset: 0; background-image:
  radial-gradient(2px 2px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 70% 20%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 40% 70%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 85% 65%, #fff 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 10% 85%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 45%, #fff 50%, transparent 51%);
  opacity: .7; }
.stim { position: absolute; left: 50%; top: 50%; font-size: 120px; line-height: 1; transform: translate(-50%, -50%) scale(0); }
.stim.sleep::after { content: '💤'; position: absolute; right: -34px; top: -26px; font-size: 44px; animation: zz 1.2s ease-in-out infinite alternate; }
@keyframes zz { to { transform: translate(6px, -8px) rotate(10deg); } }
.stim.show { animation: stimIn .25s var(--pop) forwards; }
.stim.hit { animation: stimHit .35s ease forwards; }
@keyframes stimIn { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes stimHit { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.game-hud { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 20px; }
.game-msg { position: absolute; bottom: 16px; left: 0; right: 0; color: #fff; font-weight: 700; font-size: 17px; }
.legend { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.legend .paper { padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; border-radius: var(--r-md); }
.legend .paper span { font-size: 40px; }

.pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 380px; margin: 0 auto; }
.pad { aspect-ratio: 1; border-radius: 32px; border: var(--line) solid var(--ink); box-shadow: var(--lift); font-size: 64px; cursor: pointer;
  transition: transform .1s, filter .1s, box-shadow .1s; filter: saturate(.75) brightness(.95); }
.pad.lit { transform: translateY(3px) scale(1.04); filter: saturate(1.3) brightness(1.15); box-shadow: 0 2px 0 var(--ink), 0 0 0 8px rgba(255, 255, 255, .7); }
.pad[disabled] { cursor: default; }
.lives { font-size: 24px; letter-spacing: 4px; }

.chests { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 460px; margin: 0 auto; }
.chest { min-height: 190px; }
.chest .emo { font-size: 76px; }
.chest .sub { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.reveal { font-family: var(--display); font-size: 34px; font-weight: 800; min-height: 54px; }
.bank { font-family: var(--display); font-size: 22px; font-weight: 700; }
.countdown { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.countdown svg { transform: rotate(-90deg); }
.countdown .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 72px; font-weight: 800; }

/* ---------- Kết quả ---------- */
.result-hero { text-align: center; }
.char-card { position: relative; margin: 0 auto; max-width: 380px; border-radius: 32px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink);
  padding: 22px 22px 20px; text-align: center; overflow: hidden; animation: cardReveal 1s var(--pop) both; }
@keyframes cardReveal { 0% { transform: rotateY(90deg) scale(.6); opacity: 0; } 60% { transform: rotateY(-10deg) scale(1.03); opacity: 1; } }
.char-card::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .7) 0 30px, transparent 31px),
  radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .5) 0 18px, transparent 19px),
  radial-gradient(circle at 75% 85%, rgba(255, 255, 255, .45) 0 40px, transparent 41px); pointer-events: none; }
.char-card > * { position: relative; }
.char-card .kid { font-weight: 700; font-size: 15px; }
.char-card .animal { font-size: 120px; line-height: 1.1; margin: 4px 0; animation: float 3s ease-in-out infinite; display: inline-block; }
@keyframes float { 50% { transform: translateY(-8px) rotate(3deg); } }
.char-card .name { font-family: var(--display); font-size: 36px; font-weight: 800; }
.char-card .blurb { font-size: 15px; margin-top: 6px; }
.char-card .badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.char-card .badges span { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.char-card .likes { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.char-card .likes span { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; background: rgba(255, 255, 255, .7);
  border: 2px solid var(--ink); border-radius: 50%; }

.section-title { font-family: var(--display); font-size: 26px; font-weight: 800; margin: 0 0 12px; }
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; }
.bar-head > span:first-child { white-space: nowrap; }
.bar-head .pole { font-weight: 600; font-size: 14px; color: var(--ink-soft); text-align: right; }
.bar { position: relative; height: 18px; border-radius: 99px; background: #EEF1FA; border: 2px solid var(--ink); overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; width: 0; transition: width 1s var(--pop); }
.bar::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(38, 48, 99, .2); }
.bar-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); }

.radar-wrap { display: grid; place-items: center; }
.radar .shape { transform-box: view-box; transform-origin: 50% 50%; animation: grow 1s var(--pop) .3s both; }
@keyframes grow { from { transform: scale(0); } }
.radar text { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--ink); }

.list-cards { display: grid; gap: 12px; }
.note { display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: var(--line) solid var(--ink);
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--lift-sm); }
.note .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; border: 2px solid var(--ink); }
.note b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.25; }
.note p { margin: 2px 0 0; font-size: 15px; }
.play-bars { display: grid; gap: 10px; }
.play-row { display: grid; grid-template-columns: 40px 1fr 44px; gap: 10px; align-items: center; font-weight: 700; }
.play-row .emo { font-size: 28px; }
.interest-row { display: flex; gap: 10px; flex-wrap: wrap; }
.interest-row span { background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.care-title { font-family: var(--display); font-size: 21px; font-weight: 800; margin: 0 0 12px; }
.care .care-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 2px dashed rgba(38, 48, 99, .18); }
.care .care-row:first-of-type { border-top: 0; padding-top: 0; }
.care .care-row .ic { flex: none; font-size: 24px; line-height: 1.2; }
.care .care-row b, .care-say b, .care-avoid b, .do-avoid b { display: block; font-family: var(--display); font-size: 17px; }
.care .care-row p { margin: 2px 0 0; font-size: 15px; }
.care-say, .care-avoid { margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(38, 48, 99, .18); }
.care-say .chips { margin-top: 6px; }
.quote { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 6px 12px; font-weight: 600; font-size: 15px; }
.care-avoid ul, .do-avoid ul { margin: 6px 0 0; padding-left: 20px; font-size: 15px; }
.care-avoid li + li, .do-avoid li + li { margin-top: 4px; }
.do-avoid { padding: 18px; }
.do-avoid .cols { display: grid; gap: 14px; }
.do-avoid .col { border-radius: var(--r-sm); padding: 12px 14px; }
.do-avoid .do { background: #E3F7EC; }
.do-avoid .avoid { background: #FFE6EB; }
@media (min-width: 720px) { .do-avoid .cols { grid-template-columns: 1fr 1fr; } }
.conf-title { font-family: var(--display); font-size: 20px; }
.conf-bars { display: grid; gap: 8px; }
.conf-row { display: grid; grid-template-columns: 36px 1fr 48px; gap: 10px; align-items: center; }
.conf-row .emo { font-size: 26px; text-align: center; }
.conf-pct { font-weight: 700; text-align: right; }
.watch { background: #FFF6E0; }
.reco-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .reco-grid { grid-template-columns: 1fr 1fr; } }
.reco { background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--lift-sm); }
.reco-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.reco-head .ic { font-size: 22px; }
.reco-head b { font-family: var(--display); font-size: 17px; }
.reco-value { margin: 0; font-weight: 600; font-size: 15px; }
.reco-why { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.reli { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--ink); }
.reli.cao { background: #CFF3DD; } .reli.kha { background: #FFF2C2; } .reli.thap { background: #FFD6DE; }
.disclaimer { font-size: 13px; color: var(--ink-soft); max-width: 46ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
details.method summary { cursor: pointer; font-weight: 700; }
details.method table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
details.method td, details.method th { border-bottom: 1px solid #E1E5F2; padding: 6px 4px; text-align: left; }

.loading { text-align: center; padding: 12px 0; }
.dots span { display: inline-block; width: 14px; height: 14px; margin: 0 4px; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink);
  animation: bounce 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; background: var(--sun); } .dots span:nth-child(3) { animation-delay: .3s; background: var(--leaf); }
@keyframes bounce { 50% { transform: translateY(-14px); } }

/* ---------- Màn hình rộng ---------- */
@media (min-width: 720px) {
  body { font-size: 18px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tiles.three { grid-template-columns: repeat(3, 1fr); }
  .tiles.grid9 .tile { min-height: 130px; }
  .app { padding-top: 20px; }
}
@media (max-width: 380px) {
  .tiles.three { grid-template-columns: repeat(2, 1fr); }
  .tile { min-height: 130px; }
  .tile .emo { font-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cloud { display: none; }
}

/* Suy luận */
.lead.think { font-style: normal; background: rgba(255, 255, 255, .7); border-radius: var(--r-md); padding: 14px 16px; }
.followup-grid { grid-template-columns: repeat(2, 1fr); }
.followup-grid .choice { min-height: 110px; font-size: 15px; }
.followup-grid .choice .emo { font-size: 34px; }
@media (max-width: 380px) { .followup-grid { grid-template-columns: 1fr; } .followup-grid .choice { min-height: 72px; flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; } }
.note.hyp .ic { background: #EEF1FA; }
.note.hyp.supported .ic { background: #FFE6EB; }
.note.hyp.not .ic { background: #E3F7EC; }
.hyp-status { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 2px solid var(--ink); margin: 4px 0; }
.hyp-status.supported { background: #FFD6DE; } .hyp-status.not { background: #CFF3DD; } .hyp-status.unclear { background: #FFF2C2; }
.insight-list { margin: 0; padding-left: 4px; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.insight-list li { padding-left: 28px; text-indent: -28px; }