/* Lõi giao diện: biến màu, nền trời, thanh trên, nút 3D, hình, Gấu Mì, bong bóng lời nói, bố cục màn hoạt động, lớp phủ phần thưởng. */
/* Little English World – phong cách hoạt hình 3D: nút "đất sét" nổi khối, bóng mềm, màu tươi */
:root {
  --ink: #3b3355;
  --ink-soft: #6b6585;
  --sky-1: #7fd0ff;
  --sky-2: #dff4ff;
  --grass-1: #8fe06a;
  --grass-2: #52b947;
  --card: #ffffff;
  --card-edge: #d6e2f0;
  --good: #2fcf6a;
  --bad: #ff6b6b;
  --radius: 28px;
  --font: 'Baloo 2', 'Nunito', 'Segoe UI Rounded', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--sky-1);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- Bầu trời, mây, đồi ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-1) 0%, #a9e0ff 45%, var(--sky-2) 100%);
}
.sun {
  position: absolute; top: 4vmin; right: 8vmin; width: 16vmin; height: 16vmin; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7c2, #ffd93b 55%, #ffb81f);
  box-shadow: 0 0 0 3vmin rgba(255, 228, 92, .25), 0 0 0 6vmin rgba(255, 228, 92, .12);
  animation: sun 6s ease-in-out infinite;
}
@keyframes sun { 50% { transform: scale(1.06); } }
.cloud {
  position: absolute; width: 22vmin; height: 7vmin; border-radius: 99px;
  background: linear-gradient(#fff, #eaf5ff);
  box-shadow: 0 1.2vmin 0 rgba(150, 190, 230, .25);
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 9vmin; height: 9vmin; left: 3vmin; top: -4.5vmin; }
.cloud::after { width: 12vmin; height: 12vmin; left: 9vmin; top: -6.5vmin; }
.cloud.c1 { top: 10%; animation-duration: 70s; animation-delay: -10s; }
.cloud.c2 { top: 24%; transform: scale(.7); animation-duration: 95s; animation-delay: -50s; }
.cloud.c3 { top: 6%; transform: scale(.55); animation-duration: 120s; animation-delay: -80s; }
@keyframes drift { from { left: -30vmin; } to { left: 110vw; } }
.hill { position: absolute; border-radius: 50%; }
.hill.h1 { width: 90vw; height: 40vh; left: -15vw; bottom: -24vh; background: radial-gradient(ellipse at 50% 20%, var(--grass-1), var(--grass-2)); }
.hill.h2 { width: 100vw; height: 46vh; right: -30vw; bottom: -30vh; background: radial-gradient(ellipse at 40% 20%, #a6ea7e, #5cc14d); }

/* ---------- Thanh trên cùng ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 16px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
body[data-screen="splash"] .topbar { display: none; }
body[data-screen="home"] #btnHome, body[data-screen="parent"] #btnHome { visibility: hidden; }
.star-count {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 18px 4px 8px; border-radius: 99px;
  background: linear-gradient(#fff, #fff4cf); font-size: clamp(22px, 4vmin, 34px); font-weight: 800;
  box-shadow: 0 5px 0 #e8c25a, 0 10px 18px rgba(0, 0, 0, .12);
}
.star-count.bump { animation: bump .6s ease; }
@keyframes bump { 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(.95); } }

/* ---------- Khung màn hình ---------- */
#app { position: relative; z-index: 1; height: 100%; }
.screen {
  position: absolute; inset: 0;
  padding: calc(max(10px, env(safe-area-inset-top)) + clamp(56px, 10vmin, 80px)) 16px max(14px, env(safe-area-inset-bottom));
  transition: opacity .35s, transform .35s;
}
.screen.enter { opacity: 0; transform: scale(.97) translateY(10px); }

/* ---------- Nút 3D dạng đất sét ---------- */
/* thuộc tính hidden luôn thắng các lớp đặt display (vd .btn3d.round dùng grid) */
[hidden] { display: none !important; }
.btn3d {
  --c: #ff9f1c; --d: #d97706;
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, white) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 88%, black) 100%);
  color: #fff; font-weight: 800;
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--d), 0 14px 22px rgba(0, 0, 0, .18), inset 0 4px 0 rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(0, 0, 0, .1);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.btn3d::after { /* vệt bóng sáng */
  content: ''; position: absolute; left: 14%; right: 14%; top: 7%; height: 22%;
  border-radius: 99px; background: rgba(255, 255, 255, .3); pointer-events: none;
}
.btn3d > * { position: relative; z-index: 1; }
.btn3d:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--d), 0 4px 8px rgba(0, 0, 0, .15), inset 0 4px 0 rgba(255, 255, 255, .5); }
.btn3d.round {
  width: clamp(64px, 13vmin, 96px); height: clamp(64px, 13vmin, 96px); border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(26px, 6vmin, 44px);
}
.btn3d.round.sm { width: clamp(48px, 10vmin, 70px); height: clamp(48px, 10vmin, 70px); font-size: clamp(20px, 4.5vmin, 30px); }
.btn3d.round.big { width: clamp(84px, 17vmin, 120px); height: clamp(84px, 17vmin, 120px); font-size: clamp(34px, 7vmin, 54px); }
.btn3d.pill { padding: 10px 22px; border-radius: 99px; font-size: 17px; }
.btn3d.pill::after { display: none; }
.next { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(5px) scale(1.06); } 90% { transform: translateX(-2px); } }

.card3d {
  background: linear-gradient(180deg, #ffffff, #f2f7fd);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--card-edge), 0 16px 28px rgba(40, 80, 140, .16), inset 0 3px 0 #fff;
  transition: transform .12s, box-shadow .12s;
}
button.card3d:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--card-edge), 0 8px 14px rgba(40, 80, 140, .14); }

/* ---------- Hình ảnh (ảnh 3D / emoji dự phòng / quả cầu màu / số) ---------- */
.pic { --s: 64px; width: var(--s); height: var(--s); display: inline-grid; place-items: center; flex: none; }
.pic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); pointer-events: none; }
.pic .emo { font-size: calc(var(--s) * .82); line-height: 1; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.pic.xs { --s: 26px; }
.pic.sm { --s: clamp(28px, 6vmin, 42px); }
.pic.md { --s: clamp(44px, 10vmin, 72px); }
.pic.lg { --s: clamp(70px, 17vmin, 130px); }
.pic.ch { --s: clamp(84px, 21vmin, 170px); }
.pic.xl { --s: clamp(140px, 36vmin, 290px); }

.pic.ball i {
  width: 82%; height: 82%; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 5%, color-mix(in srgb, var(--c) 55%, white) 13%, var(--c) 48%, color-mix(in srgb, var(--c) 65%, black) 100%);
  box-shadow: 0 calc(var(--s) * .07) calc(var(--s) * .08) rgba(0, 0, 0, .22);
}
.pic.ball.trio { display: flex; align-items: center; justify-content: center; }
.pic.ball.trio i { width: 42%; height: 42%; margin: 0 -4%; }
.pic.ball.trio i:nth-child(2) { transform: translateY(-22%); }

.pic.num b {
  font-size: calc(var(--s) * .86); line-height: 1; font-weight: 800;
  color: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, white) 15%, var(--c) 60%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(var(--s) * .045) 0 color-mix(in srgb, var(--c) 72%, black)) drop-shadow(0 calc(var(--s) * .06) calc(var(--s) * .05) rgba(0, 0, 0, .25));
}
.pic.num.small b { font-size: calc(var(--s) * .5); }
.pic.shadow img, .pic.shadow .emo { filter: brightness(0) opacity(.75); }
.pic.revealed { animation: reveal .6s ease; }
.pic.revealed img, .pic.revealed .emo { transition: filter .5s; }
@keyframes reveal { 40% { transform: scale(1.18) rotate(-5deg); } }

/* ---------- Gấu Mì ---------- */
/* Kích thước theo chiều cao vì nhân vật cao hơn rộng (tỉ lệ ~0.6) */
.bear-wrap { height: clamp(150px, 31vmin, 250px); flex: none; cursor: pointer; display: flex; justify-content: center; }
.bear-wrap.lg { height: clamp(160px, 32vmin, 260px); }
.bear-wrap.xl { height: clamp(240px, 58vmin, 470px); }
.bear { position: relative; height: 100%; display: inline-block; }
.bear .gm-body { display: block; height: 100%; transform-origin: 50% 96%; animation: breathe 3.2s ease-in-out infinite; }
.bear img { display: block; height: 100%; width: auto; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(30, 60, 100, .18)); }
.bear .gm-shadow {
  position: absolute; left: 14%; right: 14%; bottom: -2%; height: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 60, 100, .28), transparent); animation: shadow 3.2s ease-in-out infinite;
}
.bear .gm-zzz { display: none; position: absolute; right: -4%; top: 0; font-weight: 800; font-size: clamp(22px, 5vmin, 40px); color: #5b9be0; line-height: 1; }
.bear .gm-zzz small { font-size: .7em; display: inline-block; margin-left: 2px; transform: translateY(-.6em); }

.bear.talking .gm-body { animation: talk .34s ease-in-out infinite alternate; }
.bear.happy .gm-body { animation: hop .55s ease 3; }
.bear.happy .gm-shadow { animation: shadow-hop .55s ease 3; }
.bear.wave .gm-body { animation: sway .4s ease-in-out 6 alternate; }
.bear.think .gm-body { transform: rotate(-6deg); transition: transform .3s; animation: none; }
.bear.sleepy .gm-body { transform: rotate(7deg); animation: breathe 5s ease-in-out infinite; filter: saturate(.85); }
.bear.sleepy .gm-zzz { display: block; animation: zzz 2s ease-in-out infinite; }
/* tư thế vẫy tay: ảnh đã giơ tay sẵn, cả thân đung đưa nhẹ liên tục như đang vẫy chào */
.bear.pose-wave .gm-body { animation: greet 1.5s ease-in-out infinite; }

@keyframes breathe { 50% { transform: scale(1.012, .988); } }
@keyframes shadow { 50% { transform: scaleX(.94); } }
@keyframes talk { from { transform: rotate(-1.5deg) scale(1, 1); } to { transform: rotate(1.5deg) scale(1.015, .985) translateY(-2px); } }
@keyframes hop { 40% { transform: translateY(-9%) scale(.98, 1.03); } 70% { transform: translateY(0) scale(1.04, .95); } }
@keyframes shadow-hop { 40% { transform: scale(.7); opacity: .6; } }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes zzz { 50% { transform: translate(6px, -8px); opacity: .5; } }
@keyframes greet { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(-1.5%); } }

/* Bong bóng lời nói */
.bubble {
  position: relative; background: #fff; border-radius: 22px;
  padding: 10px 16px; max-width: 340px;
  box-shadow: 0 6px 0 var(--card-edge), 0 10px 20px rgba(40, 80, 140, .15);
  font-size: clamp(14px, 2.4vmin, 18px); line-height: 1.35; color: var(--ink-soft);
}
.bubble b { display: block; color: var(--ink); font-size: clamp(20px, 3.6vmin, 28px); line-height: 1.2; }
.bubble.pop { animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.05); } }

/* ---------- Bố cục hoạt động: Gấu Mì một bên, nội dung một bên ---------- */
.act {
  height: 100%;
  display: grid; grid-template-columns: minmax(150px, 24vw) 1fr; grid-template-areas: "guide main";
  gap: 12px;
}
.act .main { grid-area: main; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vmin, 18px); min-height: 0; }
.guide { grid-area: guide; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 6px; }
.guide .bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -12px;
  border: 12px solid transparent; border-bottom: 0; border-top-color: #fff;
}
@media (orientation: portrait) {
  .act { grid-template-columns: 1fr; grid-template-rows: 1fr auto; grid-template-areas: "main" "guide"; }
  .guide { flex-direction: row-reverse; justify-content: flex-end; align-self: stretch; }
  .guide .bear-wrap { height: clamp(120px, 19vh, 180px); }
  .guide .bubble { flex: 1; }
  .guide .bubble::after { left: -12px; bottom: auto; top: 50%; margin: -12px 0 0; border: 12px solid transparent; border-left: 0; border-right-color: #fff; }
}


.act .main { min-width: 0; }

/* ---------- Lớp phủ phần thưởng ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 16px; background: rgba(40, 70, 120, .45); backdrop-filter: blur(4px); }
#overlay.open { display: grid; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.reward { width: min(560px, 100%); padding: 22px 20px 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: pop .45s ease; }
.reward-stars { display: flex; gap: 6px; align-items: flex-end; }
.reward-stars .rs { filter: grayscale(1) opacity(.3); transform: scale(.8); }
.reward-stars .rs:nth-child(2) { margin-bottom: 18px; }
.reward-stars .rs.on { filter: none; transform: none; animation: star-in .55s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(.45s + var(--k) * .3s); }
@keyframes star-in { from { transform: scale(0) rotate(-120deg); } }
.reward-trophy, .sticker-new { animation: star-in .7s cubic-bezier(.2, 1.6, .4, 1); }
.sticker-new .bg-thumb, .sticker-new .page-thumb { width: clamp(130px, 28vmin, 210px); }
.sticker-new .bg-thumb .pic { --s: clamp(70px, 14vmin, 110px); }
.reward-row { display: flex; align-items: center; gap: 12px; }
.reward-row .bubble::after { content: ''; position: absolute; left: -12px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-left: 0; border-right-color: #fff; }
.break-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }

.spark { position: fixed; z-index: 60; font-size: 26px; pointer-events: none; transform: translate(-50%, -50%); animation: spark .85s ease-out forwards; }
@keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); opacity: 0; } }
.confetti { position: fixed; z-index: 55; top: -20px; width: 12px; height: 18px; border-radius: 3px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r)); } }


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