/* Sổ sticker (#/album), ăn mừng sticker (.sticker-pop), lễ đăng quang (#/coronation). Làn A sở hữu. Cỡ hình nhân var(--ui), chữ rem. */

/* ---------- Sticker: hình thật từ svg/sticker hoặc hình thay thế (minh họa + viền trắng bằng drop-shadow) ---------- */
.sticker { position: relative; display: block; flex-shrink: 0; }
.sticker > svg, .sticker > img { width: 100%; height: 100%; display: block; }
.sticker.is-fallback { display: flex; align-items: center; justify-content: center; }
.sticker.is-fallback .illus { width: 76%; height: 76%; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 4px rgba(122, 62, 140, 0.25)); }
.sticker.is-fallback .illus .word { display: none; }
.sticker.is-fallback .icon-badge { width: 70%; height: 70%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 4px 8px rgba(122, 62, 140, 0.25); display: flex; align-items: center; justify-content: center; color: var(--gold-600); }
.sticker.is-fallback .icon-badge svg { width: 62%; height: 62%; }
/* Bóng mờ của sticker chưa có: xám, nhạt, để bé biết chỗ này sẽ có gì */
.sticker.is-ghost { filter: grayscale(1); opacity: 0.28; }

/* ---------- Màn sổ ---------- */
.screen.album { height: 100vh; height: 100dvh; min-height: 0; gap: 10px; background: linear-gradient(180deg, #F3E9FF 0%, #FDE7F0 60%, #FFF6E3 100%); }
.screen.album > .topbar { flex-shrink: 0; position: relative; z-index: 1; }
.album-book { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; }
.album-pages { flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.album-pages::-webkit-scrollbar { display: none; }
.album-page { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; min-height: 0; padding: 6px 4px; }
.album-title { align-self: center; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--violet-600); background: rgba(255, 255, 255, 0.75); border-radius: 999px; padding: 6px 16px; margin-bottom: 8px; }
/* Trang giấy: hai cột ba hàng, ô vuông; trang Đặc biệt 7 ô thì ba cột */
.album-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; padding: 14px; background: #FFF8EC; border-radius: 18px; box-shadow: inset 0 0 0 3px #F1DFC6, var(--shadow-card); align-content: stretch; }
.album-grid.is-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-slot { position: relative; min-width: 0; min-height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 6px; transition: transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.st-slot:active { transform: scale(0.94); }
.st-slot .sticker { width: min(100%, calc(120px * var(--ui))); aspect-ratio: 1; height: auto; max-height: 100%; }
.st-slot.is-off { border: 2px dashed #E3CFB4; border-radius: 16px; }
.st-slot.is-on .sticker { transform: rotate(var(--tilt, -3deg)); }
.st-slot:nth-child(2n) { --tilt: 3deg; }
.st-slot:nth-child(3n) { --tilt: -2deg; }
.st-slot.is-fresh { animation: st-fresh 1400ms ease-in-out 3; }
@keyframes st-fresh { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0); } 50% { box-shadow: 0 0 0 6px rgba(242, 184, 75, 0.55); } }
.album-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 6px; flex-shrink: 0; }
.album-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(122, 62, 140, 0.25); }
.album-dots i.is-on { background: var(--violet-600); transform: scale(1.3); }

/* Máy tính bảng dọc: ba cột, sticker to hơn */
@media (min-width: 600px) and (orientation: portrait) {
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px; }
}
/* Nằm ngang: sổ chiếm chiều cao, ba cột hai hàng */
@media (min-width: 820px) and (orientation: landscape) and (min-height: 500px) {
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .album-grid.is-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Ăn mừng sticker mới: phủ toàn màn, sticker to giữa vầng sáng ---------- */
.sticker-pop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(74, 44, 90, 0.45); pointer-events: none; }
.sticker-pop .halo { position: absolute; width: calc(300px * var(--ui)); height: calc(300px * var(--ui)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 241, 214, 0.95) 0%, rgba(255, 241, 214, 0.5) 45%, rgba(255, 241, 214, 0) 70%); animation: halo-spin 6s linear infinite; }
.sticker-pop .sticker.flying { position: relative; width: calc(200px * var(--ui)); height: calc(200px * var(--ui)); }
.sticker-pop .cluster { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: calc(340px * var(--ui)); }
.sticker-pop .cluster .sticker.flying { width: calc(96px * var(--ui)); height: calc(96px * var(--ui)); }
.sticker-pop .cluster .sticker:nth-child(odd) { transform: rotate(-6deg); }
.sticker-pop .cluster .sticker:nth-child(even) { transform: rotate(5deg); }
@keyframes halo-spin { to { transform: rotate(360deg); } }

/* Thanh trên trang chủ có ba nút (sổ, bản đồ, Góc phụ huynh): máy hẹp thì nút và tiêu đề nhỏ lại để tên app nằm một dòng
   (không thu thì tiêu đề bị ép còn vài chục px và xuống bốn dòng, đẩy cả màn tràn ở máy 320px) */
@media (max-width: 400px) {
  .screen.home > .topbar { gap: 6px; }
  .screen.home > .topbar .btn-round { width: 38px; height: 38px; }
  .screen.home > .topbar .btn-round svg { width: 20px; height: 20px; }
  .screen.home > .topbar h1 { font-size: 1.0625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* Nút sổ sticker ở trang chủ và bản đồ: có chấm vàng khi có sticker mới chưa xem */
.btn-round.is-album { background: var(--pink-100); color: var(--pink-700); position: relative; }
.btn-round.is-album.is-new::after { content: ''; position: absolute; right: -2px; top: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 2px #fff; animation: pulse 700ms ease-in-out infinite alternate; }

/* ---------- Lễ đăng quang ---------- */
.screen.coronation { background: linear-gradient(180deg, #2B1B4A 0%, #5A2E7A 45%, #F3A0C4 100%); color: #fff; }
.screen.coronation > .topbar h1 { color: #FFE1A8; }
.coronation-stage { position: relative; flex: 0 0 auto; height: calc(420px * var(--ui)); display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.coronation-stage .scene { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; }
.coronation-stage .scene svg { width: 100%; height: 100%; display: block; }
.coronation-stage .cong-chua { position: relative; z-index: 2; }
.coronation-stage .fireworks { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 24px; }
.coronation-stage .fireworks svg { width: 100%; height: 100%; }
.coronation-stage .fireworks .tia { transform-origin: center; transform-box: fill-box; animation: fw-burst 1800ms ease-out infinite; opacity: 0; }
.coronation-stage .fireworks .tia:nth-child(2) { animation-delay: 400ms; }
.coronation-stage .fireworks .tia:nth-child(3) { animation-delay: 800ms; }
.coronation-stage .fireworks .tia:nth-child(4) { animation-delay: 1200ms; }
.coronation-stage .fireworks .tia:nth-child(5) { animation-delay: 1500ms; }
@keyframes fw-burst { 0% { transform: scale(0.1); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.coronation-stage .big-crown { position: absolute; z-index: 3; left: 50%; top: 6%; width: calc(120px * var(--ui)); height: calc(120px * var(--ui)); margin-left: calc(-60px * var(--ui)); filter: drop-shadow(0 0 14px rgba(255, 225, 168, 0.9)); }
.coronation-stage .big-crown svg { width: 100%; height: 100%; }
.coronation-card { background: rgba(255, 255, 255, 0.92); color: var(--ink); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; box-shadow: var(--shadow-card); }
.coronation-card .title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--violet-600); display: flex; gap: 8px; align-items: center; }
.coronation-card .title svg { width: 22px; height: 22px; flex-shrink: 0; }
.coronation-card .name { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--pink-600); }
.coronation-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.coronation-actions .btn-primary svg { width: 22px; height: 22px; }
/* Giấy khen hiện trong hộp như ảnh chụp */
.photo-card img.is-cert { max-height: 50vh; }
/* Máy thấp (điện thoại nhỏ nằm dọc, máy tính bảng nằm ngang): sân khấu và thẻ thu lại, hai nút nằm cùng hàng,
   để lễ đăng quang vừa một màn không phải cuộn (fit.js chỉ hạ được --ui tới 0,6) */
@media (max-height: 700px) {
  .coronation-stage { height: calc(330px * var(--ui)); }
  .coronation-card { padding: 10px 12px; gap: 4px; }
  .coronation-card .title { font-size: 1rem; }
  .coronation-card .name { font-size: 1.375rem; }
  .coronation-card .sub { display: none; }
  .coronation-actions { flex-wrap: nowrap; }
  .coronation-actions .btn-primary { height: 48px; font-size: 1rem; padding: 0 14px; flex: 1 1 0; min-width: 0; }
}