* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #1b2a4a; color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; padding: 3vmin; }
.screen.active { display: flex; }
button { font: inherit; border: 0; cursor: pointer; color: inherit; }

/* Màn hình chính */
.robots { display: flex; justify-content: center; gap: 3vmin; width: min(94vw, 640px); }
.robot-btn {
  flex: 1; max-width: 240px; aspect-ratio: 1; min-height: 64px; padding: 0; border-radius: 28px;
  background: radial-gradient(circle at 50% 85%, #34507f 0, #243759 70%); box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
.robot-btn:active { transform: translateY(3px); }
@keyframes bob { 50% { transform: translateY(-1.5vmin) rotate(2deg); } }
.zones { display: flex; flex-wrap: wrap; justify-content: center; gap: 3vmin; width: min(94vw, 640px); }
.zone {
  width: calc((100% - 6vmin) / 3 - 1px); aspect-ratio: 1; min-width: 64px; min-height: 64px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: min(16vmin, 90px); box-shadow: 0 6px 0 rgba(0,0,0,.3);
  transition: transform .08s;
}
.zone:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.z-build { background: #f4c20d; } .z-paint { background: #ab47bc; } .z-dance { background: #26a69a; }
.z-heart { background: #ef5350; } .z-race { background: #1e88e5; }
@media (min-aspect-ratio: 5/4) { .zones { width: min(94vw, 900px); } .zone { width: calc((100% - 12vmin) / 5 - 1px); } .robots { height: 38vmin; } .robot-btn { flex: 0 0 38vmin; } }
.parent-btn { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 28px; opacity: .5; }

/* Màn hình tạm */
.soon-icon { font-size: min(40vmin, 220px); animation: bob 2s ease-in-out infinite; }
.soon-dots { font-size: min(10vmin, 56px); }
.back-btn { position: absolute; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); width: 72px; height: 72px; border-radius: 50%; background: #f4c20d; font-size: 36px; box-shadow: 0 5px 0 rgba(0,0,0,.3); }

/* Robot SVG + biến hình */
.rb svg { width: 100%; height: 100%; display: block; overflow: visible; animation: bob 3s ease-in-out infinite; }
.rb .part, .rb .spin, .rb .eyes, .rb .head-in, .rb .mouth { transform-box: fill-box; transform-origin: center; }
.rb .part { transform: var(--r); transition: transform .8s cubic-bezier(.6,-0.35,.3,1.35) var(--d, 0s); }
.rb.car .part { transform: var(--c); }
.rb .car-only { opacity: 0; transition: opacity .3s; }
.rb.car .car-only { opacity: 1; transition-delay: .8s; }
.rb.car svg { animation: drive .35s ease-in-out infinite alternate; }
.rb.car .spin { animation: spin .7s linear .9s infinite; }
.rb.morph svg { animation: morph 1s ease-in-out; }
.rb .eyes { animation: blink 4s infinite; }
.rb.talking .head-in { animation: talk .28s ease-in-out infinite alternate; }
.rb.talking .mouth { animation: mouth .18s steps(2) infinite; }
.rb.talking .eyes { filter: brightness(1.4) drop-shadow(0 0 2px #5ce1ff); }
.rb.car.talking svg { animation: drive .18s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drive { from { transform: translateY(0); } to { transform: translateY(-1.5%); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes talk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
@keyframes mouth { 50% { transform: scaleY(2.2); } }
@keyframes morph {
  0% { filter: none; transform: none; }
  20% { filter: brightness(1.8) drop-shadow(0 0 8px #9fe6ff); transform: translateY(-6%) scale(1.06); }
  50% { filter: brightness(1.5) drop-shadow(0 0 12px #9fe6ff); transform: translateY(-4%) rotate(-3deg); }
  80% { filter: brightness(1.2); transform: translateY(0) rotate(2deg); }
  100% { filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rb svg, .rb.car svg, .rb .eyes { animation: none; } }

/* Khu Ba Mẹ */
#parent { justify-content: flex-start; }
.parent-box { background: #243759; border-radius: 20px; padding: 20px 14px; width: min(96vw, 520px); text-align: center; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.parent-box h3 { margin: 22px 0 6px; font-size: 19px; }
.hint { font-size: 14px; opacity: .8; margin: 4px 0; }
.stepper { align-items: center; }
.stepper .btn { min-width: 64px; font-size: 28px; }
.mins { font-size: 26px; font-weight: 700; min-width: 110px; }
.voice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; text-align: left; }
.vrow { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.07); border-radius: 14px; padding: 6px 6px 6px 12px; }
.vtext { flex: 1; font-size: 15px; line-height: 1.3; }
.vtext small { display: block; opacity: .6; font-size: 12px; }
.vstat { font-size: 20px; }
.vbtn { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.14); font-size: 22px; flex: none; }
.vbtn:disabled { opacity: .3; }
.vbtn.rec-on { background: #e53935; animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.1); } }
.parent-box h2 { margin: 0 0 12px; }
.sum { font-size: 40px; font-weight: 700; margin: 8px 0; }
#answer { width: 140px; height: 64px; font-size: 32px; text-align: center; border-radius: 12px; border: 0; margin-bottom: 12px; user-select: text; -webkit-user-select: text; }
.row { display: flex; gap: 12px; justify-content: center; }
.btn { min-width: 110px; min-height: 64px; padding: 0 18px; border-radius: 14px; background: #f4c20d; color: #1b2a4a; font-weight: 700; font-size: 18px; }
.btn.ghost { background: rgba(255,255,255,.15); color: #fff; }
.msg { color: #ffab91; min-height: 1.4em; }
.ver { opacity: .6; font-size: 13px; }