/* Màn Bản đồ "Con đường lên lâu đài" (làn BẢN ĐỒ sở hữu file này). Kích thước hình chính nhân var(--ui), cỡ chữ theo rem.
   Hai tầng, tầng nào cũng vừa một màn, không cuộn:
   - Tầng chặng: ô 390x520 khít vùng còn lại (map.js fitTile đặt px), hoa và cổng đặt theo phần trăm, mũi tên sang chặng kề.
   - Tầng đường: khung .map-world, con đường vẽ bằng SVG qua 8 địa điểm (map.js layoutWorld), lâu đài ở cuối, công chúa của bé. */

.screen.map {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  gap: 12px;
  background: linear-gradient(180deg, #F3E9FF 0%, #FDE7F0 50%, #DFF5E1 100%);
  --hoa: max(64px, calc(76px * var(--ui)));      /* cỡ nút bông hoa, luôn đủ 64px để chạm */
  --cong: max(104px, calc(132px * var(--ui)));   /* bề rộng cổng chặng */
  --diem: max(64px, calc(84px * var(--ui)));     /* cỡ địa điểm trên cả con đường */
  --nut: max(64px, calc(60px * var(--ui)));      /* nút tròn của màn này: to hơn chuẩn 44px chung để bé chạm */
}
.screen.map > .map-bar { flex-shrink: 0; }
.screen.map > .map-bar h1 { font-size: 1.25rem; line-height: 1.1; }
.screen.map > .map-bar .btn-round { width: var(--nut); height: var(--nut); }
.screen.map > .map-bar .btn-round svg { width: 28px; height: 28px; }
.screen.map > .map-bar .spacer { width: var(--nut); }
.map-body { position: relative; flex: 1 1 0; min-height: 0; display: flex; }

/* ---------- Tầng chặng ---------- */
.map-fit { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.map-tile {
  position: relative;
  flex-shrink: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--sky-1, #F3E9FF) 0%, var(--sky-2, #DFF5E1) 100%);
  box-shadow: 0 10px 30px rgba(122, 62, 140, 0.16);
}
.map-tile > .map-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 22px; pointer-events: none; }
.map-tile > img.map-bg { object-fit: fill; }

/* Mũi tên sang chặng kề: dọc thì nằm hàng dưới ô, ngang thì kẹp hai bên ô */
.map-nav { display: flex; justify-content: space-between; width: var(--tile-w, 100%); flex-shrink: 0; }
.map-nav .btn-round { width: var(--nut); height: var(--nut); }
.map-nav .btn-round svg { width: 28px; height: 28px; }
.map-nav .spacer { width: var(--nut); height: var(--nut); }

/* Điểm đặt hoa hoặc cổng: tọa độ phần trăm theo mốc 390x520, tâm hình đúng vào mốc */
.map-spot, .map-gate { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }

/* Bông hoa: nút tròn trong suốt cỡ --hoa, hình bên trong không quá 19% bề rộng ô (--hoa-art do map.js đặt) */
.map-flower { position: relative; width: var(--hoa); height: var(--hoa); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.map-flower:active { transform: scale(0.94); }
.map-flower .art { position: absolute; left: 50%; top: 50%; width: min(100%, var(--hoa-art, 100%)); height: min(100%, var(--hoa-art, 100%)); margin: calc(min(100%, var(--hoa-art, 100%)) / -2) 0 0 calc(min(100%, var(--hoa-art, 100%)) / -2); transform-origin: 50% 70%; }
.map-flower .art > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(122, 62, 140, 0.18)); }
/* Hình minh họa của bài nằm trong vòng tròn tâm (48,48) bán kính 24 của hoa 96 → 50% cỡ hoa */
.map-flower .art > .mh { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; object-fit: contain; pointer-events: none; }
.map-flower.is-nu .art, .map-flower.is-hom_nay .art { transform: scale(0.82); }
.map-flower.is-ru .art { transform: scale(0.9); opacity: 0.9; }
.map-flower .art.is-bloom { transform-origin: 50% 50%; }

/* Bài hôm nay: nụ có hộp quà nhỏ nhún và phát sáng mời chạm */
.map-flower.is-hom_nay { animation: map-glow 1500ms ease-in-out infinite; }
.map-flower.is-hom_nay .gift { position: absolute; right: -14%; top: -16%; width: 62%; height: 50%; animation: bob 1100ms ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(242, 184, 75, 0.85)); }
.map-flower.is-hom_nay .gift svg { width: 100%; height: 100%; overflow: visible; }
@keyframes map-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0.55), 0 0 18px 4px rgba(255, 241, 214, 0.9); }
  50% { box-shadow: 0 0 0 14px rgba(242, 184, 75, 0), 0 0 26px 8px rgba(255, 241, 214, 1); }
}
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8%); } }

/* Hoa đã thuộc: ba tia vàng nhỏ đứng yên (chỉ bài hôm nay được động đậy, để mắt bé không bị kéo đi nhiều chỗ) */
.map-flower.is-thuoc .sparkle { position: absolute; width: 20%; height: 20%; color: var(--gold-400); pointer-events: none; }
.map-flower.is-thuoc .sparkle svg { width: 100%; height: 100%; filter: drop-shadow(0 0 3px #FFF1D6); }
.map-flower.is-thuoc .sparkle.s0 { left: -8%; top: 4%; transform: scale(0.8); }
.map-flower.is-thuoc .sparkle.s1 { right: -10%; top: 14%; }
.map-flower.is-thuoc .sparkle.s2 { left: 14%; bottom: -6%; transform: scale(0.7) rotate(20deg); }

/* Chữ của bài dưới hoa đã nở (tên chữ, không phải con số tiến độ) */
.map-flower .glyph { position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%); min-width: 1.7em; height: 1.7em; padding: 0 0.4em; border-radius: 999px; background: var(--paper); color: var(--pink-600); font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; line-height: 1.7em; text-align: center; box-shadow: var(--shadow-btn); pointer-events: none; }
.map-flower.is-thuoc .glyph { color: var(--gold-700); }
.map-flower.is-ru .glyph { color: var(--violet-300); }

/* Cánh ngoài canh-1..canh-4 của hoa nở mặc định mờ, code bật sáng từng cánh theo petals(id) (thêm is-on và opacity 1) */
.map-flower .art .canh-1, .map-flower .art .canh-2, .map-flower .art .canh-3, .map-flower .art .canh-4 { opacity: 0.3; transition: opacity 300ms ease; }
.map-flower .art .is-on { opacity: 1; }

/* Cổng cuối chặng */
.map-gate { width: var(--cong); pointer-events: none; }
.map-gate::before { content: ''; display: block; padding-top: 87.5%; } /* 140/160 */
.map-gate > .img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(122, 62, 140, 0.2)); }

/* Khoảnh khắc nụ nở: khóa chạm trên bản đồ (nút nhà vẫn bấm được) */
.screen.map.is-blooming .map-body { pointer-events: none; }

/* ---------- Tầng đường ---------- */
.map-world {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, #DFF0FF 0%, #F3E9FF 38%, #DFF5E1 70%, #CDE7A6 100%);
  box-shadow: 0 10px 30px rgba(122, 62, 140, 0.16);
  overflow: hidden;
}
.map-road { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.map-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-road .vach { opacity: 0.9; }
.map-road .bong { opacity: 0.12; }

/* Địa điểm: nút tròn cỡ --diem, hình bên trong, tên bên dưới. Bốn trạng thái: xong (sáng, sao đứng yên), đang học (to hơn,
   vòng sáng, chỉ điểm này nhún), kế tiếp (sáng, đứng yên), chưa tới (xám mờ). Nền và đường im lặng, chỉ điểm đang học "nói to". */
.map-mark { position: absolute; transform: translate(-50%, -50%); width: var(--diem); height: var(--diem); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.map-mark:active { transform: translate(-50%, -50%) scale(0.94); }
.map-mark .img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 5px 8px rgba(122, 62, 140, 0.22)); }
.map-mark .name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: var(--violet-600); font-family: var(--font-display); font-weight: 800; font-size: 0.8125rem; white-space: nowrap; pointer-events: none; }
/* Chưa tới: hình xám và mờ như mức chưa mở của các app trẻ em, không mây, không ổ khóa */
.map-mark.is-far .img { filter: grayscale(1) opacity(0.45); }
.map-mark.is-far .name { opacity: 0.55; }
.map-mark.is-now { z-index: 2; width: calc(var(--diem) * 1.18); height: calc(var(--diem) * 1.18); }
.map-mark.is-now::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; box-shadow: 0 0 0 0 rgba(242, 184, 75, 0.6), 0 0 22px 6px rgba(255, 241, 214, 0.95); animation: map-ring 1500ms ease-out infinite; }
.map-mark.is-now .img { animation: bob 1100ms ease-in-out infinite alternate; }
@keyframes map-ring { 0% { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0.6), 0 0 22px 6px rgba(255, 241, 214, 0.95); } 100% { box-shadow: 0 0 0 16px rgba(242, 184, 75, 0), 0 0 22px 6px rgba(255, 241, 214, 0.95); } }
.map-mark.is-done .sparkle { position: absolute; right: -10%; top: -10%; width: 30%; height: 30%; color: var(--gold-400); pointer-events: none; }
.map-mark.is-done .sparkle svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px #FFF1D6); }

/* Lâu đài ở cuối con đường và công chúa của bé đứng ở địa điểm đang học (đi bộ khi xong chặng) */
.map-castle { position: absolute; transform: translate(-50%, -50%); width: max(130px, calc(160px * var(--ui))); z-index: 1; }
/* Giai đoạn 3: sao thử thách dưới tên khu; nút Thử thách/Lễ hội ở góc dưới ô chặng; vương miện trên lâu đài khi đã đăng quang */
.map-mark .name { display: inline-flex; align-items: center; gap: 3px; }
.map-mark .name .stars { display: inline-flex; gap: 0; }
.map-mark .name .stars svg { width: 12px; height: 12px; }
.map-thu { position: absolute; left: 4%; bottom: 3%; z-index: 3; min-height: var(--tap); padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--violet-600); box-shadow: var(--shadow-btn); display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; transition: transform 120ms ease; }
.map-thu:active { transform: scale(0.94); }
.map-thu > svg { width: 22px; height: 22px; }
.map-thu.is-hoi { left: auto; right: 4%; color: var(--pink-600); }
.stars-row { display: inline-flex; gap: 2px; }
.stars-row svg { width: 20px; height: 20px; }
.map-castle .crown-badge { position: absolute; right: 2%; top: -6%; width: 30%; height: 30%; pointer-events: none; filter: drop-shadow(0 0 6px #FFF1D6); animation: bob 1100ms ease-in-out infinite alternate; }
.map-castle.is-ready { animation: cta-bounce 1500ms ease-in-out infinite; }
.map-thu.is-new { box-shadow: 0 0 0 3px var(--gold-400), var(--shadow-btn); animation: cta-bounce 1500ms ease-in-out infinite; }
.map-castle .crown-badge svg { width: 100%; height: 100%; }
.map-castle .img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 14px rgba(122, 62, 140, 0.25)); }
.map-cc { position: absolute; transform: translate(-50%, -92%); z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(122, 62, 140, 0.25)); }
.map-cc .cong-chua { position: relative; }
.map-cc .cong-chua > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Đang đi (map.js walkPrincess): .map-cc chỉ dịch chuyển theo đường, còn nhún chân là hoạt hình riêng của hình công chúa,
   3px mỗi bước, 190ms một nhịp lên hay xuống (khoảng 2,6 bước/giây, như đi bộ nhẹ); will-change chỉ trong lúc đi */
.map-cc.is-walking { will-change: transform; }
.map-cc.is-walking .cong-chua { animation: map-step 190ms ease-in-out infinite alternate; will-change: transform; }
@keyframes map-step { from { transform: translateY(0); } to { transform: translateY(calc(-3px * var(--ui))); } }

/* ---------- Thẻ nghe lại và chơi lại, nổi ở đáy màn ---------- */
.map-card[hidden] { display: none; }
.map-card {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  width: min(100% - 28px, 560px);
  z-index: 5;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: 'mh text speaker close' 'replay replay replay replay';
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  animation: map-card-in 260ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes map-card-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.map-card .mh { grid-area: mh; width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); object-fit: contain; }
.map-card .text { grid-area: text; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.map-card .glyph { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--pink-600); }
.map-card .word { font-size: 1.0625rem; font-weight: 800; color: var(--violet-600); }
.map-card .speaker { grid-area: speaker; }
.map-card .close { grid-area: close; width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(255,255,255,0.7); color: var(--violet-300); display: flex; align-items: center; justify-content: center; }
.map-card .close svg { width: 22px; height: 22px; }
.map-card .replay { grid-area: replay; height: max(56px, calc(60px * var(--ui))); font-size: 1.25rem; }

/* ---------- Cỡ màn ---------- */
@media (max-height: 760px) and (orientation: portrait) {
  .screen.map { gap: 8px; }
  .map-card { padding: 10px 12px; }
}
/* Điện thoại hẹp: thanh trên có BỐN nút (nhà, sổ sticker, bảng chữ cái, cả con đường) — ở 320px bốn nút 64px cộng khe
   đã rộng hơn cả màn nên nút và tiêu đề thu lại (vẫn trên 44px để bé chạm), cùng cách đã dùng cho thanh trang chủ. */
@media (max-width: 400px) {
  .screen.map { --nut: 48px; }
  .screen.map > .map-bar { gap: 6px; }
  .screen.map > .map-bar .row { gap: 6px !important; }
  .screen.map > .map-bar h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .screen.map > .map-bar .btn-round svg { width: 24px; height: 24px; }
}
/* Máy tính bảng ngang: mũi tên kẹp hai bên ô chặng, thẻ nằm góc phải dưới để không che ô */
@media (min-width: 820px) and (orientation: landscape) and (min-height: 500px) {
  .map-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--tile-w, 400px) + 2 * (var(--nut) + 16px)); pointer-events: none; }
  .map-nav > * { pointer-events: auto; }
  .map-card { left: auto; right: 40px; transform: none; width: min(100% - 80px, 520px); animation-name: map-card-in-row; }
  @keyframes map-card-in-row { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .map-flower.is-hom_nay, .map-flower.is-hom_nay .gift, .map-mark.is-now::before, .map-mark.is-now .img, .map-cc.is-walking .cong-chua, .map-card { animation: none; }
}