/* Sao của bé: album hình dán + hình nền */
/* ---------- Sao & hình dán ---------- */
.stars-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.star-total { display: flex; align-items: center; gap: 8px; padding: 8px 22px 8px 12px; }
.star-total b { font-size: clamp(36px, 7vmin, 56px); color: #e0a200; }
.to-next { display: flex; align-items: center; gap: 4px; padding: 10px 16px; }
.to-next .slot { opacity: .25; filter: grayscale(1); }
.to-next .slot.on { opacity: 1; filter: none; }
.to-next .arrow { font-size: 24px; color: var(--ink-soft); margin: 0 4px; }

.album { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 2vmin, 16px); width: min(820px, 100%); }
@media (orientation: portrait) { .album { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sticker { padding: clamp(6px, 1.5vmin, 12px); display: grid; place-items: center; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .04s); }
.sticker .pic { --s: clamp(44px, 10vmin, 96px); }
.sticker.locked .pic img, .sticker.locked .pic .emo { filter: brightness(0) opacity(.18); }
.sticker.got { background: linear-gradient(180deg, #fffdf2, #fff1c4); box-shadow: 0 8px 0 #f2cf6b, 0 14px 24px rgba(0, 0, 0, .14); }
.sticker.boing { animation: boing .6s ease; }
@keyframes boing { 30% { transform: scale(1.25) rotate(-8deg); } 60% { transform: scale(.92) rotate(5deg); } }


/* ---------- Hình nền (mở khoá bằng sao) ---------- */
.tabs { display: flex; gap: 12px; }
.tabs .btn3d.on { box-shadow: 0 8px 0 var(--d), 0 0 0 5px #fff, 0 14px 22px rgba(0, 0, 0, .2); transform: translateY(-3px); }
.bg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 2.4vmin, 20px); width: min(860px, 100%); }
@media (orientation: portrait) { .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bg-card { position: relative; padding: 8px; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .05s); }
.bg-card.on { box-shadow: 0 8px 0 #22a454, 0 0 0 6px var(--good), 0 16px 28px rgba(47, 207, 106, .35); }
.bg-card.locked .bg-thumb { filter: grayscale(1) opacity(.45); }
.bg-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; position: relative; }
.bg-thumb::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -12%; height: 34%; border-radius: 50%; background: var(--g, #6fd35a); }
.bg-thumb .pic { position: relative; z-index: 1; }
.bg-day { background: linear-gradient(#7fd0ff, #dff4ff); --g: #6fd35a; }
.bg-sunset { background: linear-gradient(#ff8a7a, #ffc48a 55%, #ffe8b8); --g: #7fbf4a; }
.bg-night { background: linear-gradient(#1d2a6b, #3b4fa8 60%, #6d7fd0); --g: #2f6b4f; }
.bg-sea { background: linear-gradient(#79d6ff, #c8f1ff); --g: #2fb3e6; }
.bg-snow { background: linear-gradient(#a9d8f5, #eef8ff); --g: #ffffff; }

body[data-bg="sunset"] .sky { background: linear-gradient(180deg, #ff8a7a 0%, #ffb38a 45%, #ffe2b0 100%); }
body[data-bg="sunset"] .sun { top: auto; bottom: 22vh; right: 14vmin; background: radial-gradient(circle at 40% 40%, #fff1c9, #ff9b4a 60%, #ff6a3d); box-shadow: 0 0 0 4vmin rgba(255, 150, 80, .25), 0 0 0 8vmin rgba(255, 150, 80, .12); }
body[data-bg="sunset"] .hill.h1 { background: radial-gradient(ellipse at 50% 20%, #9fd16a, #5e9e3c); }
body[data-bg="sunset"] .hill.h2 { background: radial-gradient(ellipse at 40% 20%, #b4dc7c, #6aa846); }

body[data-bg="night"] .sky { background: linear-gradient(180deg, #16215a 0%, #2c3d8f 55%, #5a6ec4 100%); }
body[data-bg="night"] .sun { background: radial-gradient(circle at 35% 35%, #fffbe6, #ffeaa0 60%, #f2d36b); box-shadow: 0 0 0 3vmin rgba(255, 240, 180, .12), 0 0 6vmin rgba(255, 240, 180, .5); }
body[data-bg="night"] .sun::after { content: ''; position: absolute; width: 85%; height: 85%; right: -18%; top: -10%; border-radius: 50%; background: #23317a; }
body[data-bg="night"] .cloud { opacity: .25; }
body[data-bg="night"] .sky::before {
  content: ''; position: absolute; inset: 0 0 40% 0; animation: twinkle 3s ease-in-out infinite;
  background-image: radial-gradient(2px 2px at 10% 20%, #fff, transparent), radial-gradient(2px 2px at 30% 8%, #fff, transparent),
    radial-gradient(3px 3px at 52% 26%, #fff, transparent), radial-gradient(2px 2px at 68% 12%, #fff, transparent),
    radial-gradient(2px 2px at 84% 34%, #fff, transparent), radial-gradient(3px 3px at 20% 44%, #fff, transparent),
    radial-gradient(2px 2px at 44% 52%, #fff, transparent), radial-gradient(2px 2px at 92% 8%, #fff, transparent);
}
body[data-bg="night"] .hill.h1 { background: radial-gradient(ellipse at 50% 20%, #3f8a5e, #22573b); }
body[data-bg="night"] .hill.h2 { background: radial-gradient(ellipse at 40% 20%, #4c9a6a, #2a6444); }
body[data-bg="night"] .hint, body[data-bg="night"] .p-head h2 { color: #fff; }
@keyframes twinkle { 50% { opacity: .5; } }

body[data-bg="sea"] .sky { background: linear-gradient(180deg, #6fd0ff 0%, #a8e6ff 50%, #e6fbff 100%); }
body[data-bg="sea"] .hill.h1 { background: radial-gradient(ellipse at 50% 15%, #ffe9b0, #f2c879); bottom: -28vh; }
body[data-bg="sea"] .hill.h2 { width: 160vw; right: -30vw; border-radius: 45%; background: linear-gradient(#45c4f2, #1d8fd1); bottom: -34vh; animation: wave 4s ease-in-out infinite; }
@keyframes wave { 50% { transform: translateY(8px) rotate(-1deg); } }

body[data-bg="snow"] .sky { background: linear-gradient(180deg, #9fd2f2 0%, #cfe9fa 55%, #f2faff 100%); }
body[data-bg="snow"] .hill.h1 { background: radial-gradient(ellipse at 50% 20%, #ffffff, #dbe9f5); }
body[data-bg="snow"] .hill.h2 { background: radial-gradient(ellipse at 40% 20%, #ffffff, #e3eef8); }
body[data-bg="snow"] .sky::before {
  content: ''; position: absolute; inset: -100% 0 0 0; animation: snow 14s linear infinite;
  background-image: radial-gradient(4px 4px at 10% 10%, #fff, transparent), radial-gradient(5px 5px at 30% 30%, #fff, transparent),
    radial-gradient(3px 3px at 50% 15%, #fff, transparent), radial-gradient(4px 4px at 70% 40%, #fff, transparent),
    radial-gradient(5px 5px at 90% 20%, #fff, transparent), radial-gradient(3px 3px at 20% 45%, #fff, transparent),
    radial-gradient(4px 4px at 60% 5%, #fff, transparent), radial-gradient(3px 3px at 80% 48%, #fff, transparent);
  background-size: 100% 50%;
}
@keyframes snow { to { transform: translateY(50%); } }