@font-face { font-family: 'Andika'; src: url('../fonts/Andika-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url('../fonts/Andika-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --purple: #9B5DE5;
  --purple-dk: #6A35B8;
  --pink: #FF5C9D;
  --yellow: #FFD54F;
  --ink: #3B2A5A;
  --card: #ffffffee;
  --radius: 22px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Andika', 'Comic Sans MS', sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 20% 10%, #FFE3F3, transparent 50%),
              radial-gradient(circle at 90% 80%, #DCCBFF, transparent 50%), #F8F0FF;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: none; touch-action: manipulation; }
button:active { transform: scale(0.95); }
.hidden { display: none !important; }
#app { height: 100%; display: flex; flex-direction: column; }
#screen { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; }

/* ---- Thanh trên ---- */
#topbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: linear-gradient(90deg, var(--purple), var(--pink)); color: #fff; box-shadow: 0 3px 10px #0002; z-index: 5; }
.icon-btn { background: #ffffff33; border-radius: 16px; font-size: 28px; width: 52px; height: 52px; }
.mini-avatar { width: 48px; height: 48px; border-radius: 50%; background: #fff; overflow: hidden; border: 3px solid #fff; }
.mini-avatar svg { width: 100%; height: 100%; }
.player-name { font-weight: 700; font-size: 22px; text-shadow: 0 2px 0 #0002; }
.spacer { flex: 1; }
.star-box { background: #fff; color: var(--ink); font-weight: 700; font-size: 24px; padding: 6px 16px; border-radius: 30px; box-shadow: inset 0 -3px 0 #0001; }
.star-box.pop { animation: pop .4s; }

/* ---- Nút chung ---- */
.big-btn { background: linear-gradient(var(--pink), #E8407F); color: #fff; font-size: 24px; font-weight: 700; padding: 14px 28px; border-radius: 40px; box-shadow: 0 6px 0 #B8205F; }
.big-btn.secondary { background: linear-gradient(#B98CFF, var(--purple)); box-shadow: 0 6px 0 var(--purple-dk); }
.big-btn:active { box-shadow: 0 2px 0 #B8205F; transform: translateY(4px); }
.small-btn { background: #fff; border-radius: 16px; padding: 10px 16px; font-size: 18px; font-weight: 700; box-shadow: 0 3px 0 #0002; }
.small-btn.danger { color: #D32F2F; }
.title { text-align: center; margin: 10px 0; font-size: clamp(26px, 4vw, 40px); color: var(--purple-dk); }
.en { color: var(--pink); font-size: 1.15em; letter-spacing: 1px; }

/* ---- Mở đầu ---- */
.splash { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; }
.splash-title { font-size: clamp(32px, 6vw, 60px); font-weight: 700; text-align: center; color: var(--purple-dk); line-height: 1.15; }
.splash-title span { color: var(--pink); font-size: 1.2em; text-shadow: 0 4px 0 #FFD1E6; }
.splash-chars { display: flex; gap: 6px; }
.splash-char { width: clamp(90px, 18vw, 170px); animation: float 3s ease-in-out infinite; }
.splash-char:nth-child(2) { animation-delay: .5s; } .splash-char:nth-child(3) { animation-delay: 1s; }
.play-btn { font-size: 32px; padding: 18px 48px; animation: pulse 1.6s infinite; }

/* ---- Chọn nhân vật ---- */
.char-select { padding: 16px; }
.char-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.char-card { background: var(--card); border-radius: var(--radius); padding: 12px; width: clamp(150px, 28vw, 240px); box-shadow: 0 6px 0 #0001; border: 4px solid transparent; }
.char-card.selected { border-color: var(--pink); }
.char-av svg { width: 100%; height: auto; max-height: 300px; }
.char-name { font-size: 28px; font-weight: 700; color: var(--purple-dk); }
.char-desc { font-size: 16px; }

/* ---- Nhà ---- */
.home { display: flex; gap: 16px; padding: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.home-left { display: flex; flex-direction: column; align-items: center; width: clamp(180px, 30vw, 300px); }
.home-avatar svg { width: 100%; max-height: 50vh; }
.bubble { background: #fff; border-radius: var(--radius); padding: 12px 16px; font-size: 20px; box-shadow: 0 4px 0 #0001; position: relative; }
.home-left .bubble::after { content: ''; position: absolute; bottom: -14px; left: 50%; border: 10px solid transparent; border-top: 14px solid #fff; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; flex: 1; min-width: 300px; max-width: 700px; }
.room-card { background: #fff; border-radius: var(--radius); padding: 16px 8px; box-shadow: 0 6px 0 #0002; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.room-icon { font-size: 54px; }
.room-name { font-size: 20px; font-weight: 700; display: flex; flex-direction: column; }
.room-name small { font-size: 14px; color: #999; }
.room-kitchen { background: linear-gradient(#FFF4D6, #FFD9A8); }
.room-fashion { background: linear-gradient(#FDE2FF, #E3C8FF); }
.room-dress { background: linear-gradient(#E0F7FF, #B9E6FF); }
.room-book { background: linear-gradient(#E6FFE9, #BDF0C6); }
.room-card.locked { opacity: .55; filter: grayscale(.6); }
.home-foot { display: flex; justify-content: center; gap: 12px; padding: 0 0 20px; }

/* ---- Phòng nhiệm vụ ---- */
.room { min-height: 100%; padding: 12px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.decor { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-around; align-items: flex-end; font-size: 60px; opacity: .25; padding-bottom: 6px; }
.room-bubble { display: block; padding-left: 70px; min-height: 72px; z-index: 1; }
.room-bubble .speak-btn { position: absolute; left: 10px; top: 10px; }
.quest-title { font-weight: 700; color: var(--purple-dk); font-size: 22px; }
.room-stage { display: flex; gap: 12px; align-items: center; z-index: 1; flex: 1; }
.room-avatar { width: clamp(110px, 22vw, 220px); flex-shrink: 0; }
.room-avatar svg { width: 100%; }
.shelf { flex: 1; background: #ffffffaa; border: 6px solid #C68B59; border-radius: var(--radius); padding: 10px; }
.shelf-label { font-weight: 700; color: #8B5A2B; margin-bottom: 6px; }
.shelf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.item { background: #fff; border-radius: 20px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 5px 0 #0002; transition: opacity .3s; }
.item-emoji { font-size: clamp(48px, 8vw, 70px); line-height: 1.1; }
.item-word { font-size: 24px; font-weight: 700; color: var(--purple-dk); letter-spacing: 1px; }
.item.taken { opacity: .3; }
.basket { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius); padding: 10px 16px; z-index: 1; box-shadow: 0 4px 0 #0001; flex-wrap: wrap; }
.basket-label { font-weight: 700; font-size: 20px; }
.basket-slot { width: 72px; height: 72px; border-radius: 18px; border: 3px dashed #C9B3EE; display: grid; place-items: center; font-size: 44px; }
.basket-slot span { filter: grayscale(1) opacity(.3); transition: .3s; }
.basket-slot.got { border: 3px solid #5ED6B4; background: #E6FFF7; animation: pop .4s; }
.basket-slot.got span { filter: none; }

/* ---- Thử thách ---- */
.overlay { position: fixed; inset: 0; background: #2A1745aa; display: grid; place-items: center; z-index: 50; padding: 12px; }
.challenge-card, .ask-card { background: #fff; border-radius: 28px; padding: 18px; width: min(760px, 100%); max-height: 96vh; overflow-y: auto; position: relative; box-shadow: 0 10px 0 #0003; }
.ask-card { width: min(520px, 100%); text-align: center; }
.close-btn { position: absolute; right: 10px; top: 10px; width: 46px; height: 46px; border-radius: 50%; background: #F1E9FF; font-size: 22px; }
.level-badge { font-size: 22px; color: #FFB300; }
.level-badge span { color: #DDD; }
.prompt-row { display: flex; gap: 12px; align-items: center; margin: 8px 50px 12px 0; }
.speak-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); font-size: 28px; box-shadow: 0 4px 0 #D9A400; flex-shrink: 0; }
.prompt-text { font-size: 24px; font-weight: 700; }
.ch-body { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.choice-grid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pic-choice { width: clamp(120px, 26vw, 190px); aspect-ratio: 1; background: #F7F1FF; border-radius: 26px; font-size: clamp(64px, 13vw, 110px); box-shadow: 0 6px 0 #DCCBFF; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pic-choice small { font-size: 22px; color: #999; }
.pic-choice.right, .word-choice.right { background: #D7FFEF; box-shadow: 0 6px 0 #5ED6B4; }
.pic-choice:disabled, .word-choice:disabled { opacity: .5; }
.big-emoji { font-size: clamp(90px, 18vw, 150px); line-height: 1; }
.mid-emoji { font-size: 70px; line-height: 1; }
.word-choices { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.word-choice { font-size: clamp(30px, 6vw, 46px); font-weight: 700; padding: 14px 30px; background: #F7F1FF; border-radius: 22px; box-shadow: 0 6px 0 #DCCBFF; color: var(--purple-dk); letter-spacing: 2px; }
.word-choice small { font-size: .7em; }
.slots { display: flex; gap: 10px; }
.slot { width: clamp(60px, 13vw, 90px); height: clamp(70px, 15vw, 100px); border-bottom: 6px solid var(--purple); background: #F7F1FF; border-radius: 14px 14px 4px 4px; display: grid; place-items: center; font-size: clamp(44px, 9vw, 64px); font-weight: 700; }
.slot .ghost { color: #D9CBF3; }
.slot .placed { color: var(--purple-dk); animation: pop .3s; }
.slot.filled { background: #EFFFF8; border-color: #5ED6B4; }
.tiles { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.tile { width: clamp(64px, 13vw, 88px); height: clamp(64px, 13vw, 88px); background: var(--yellow); border-radius: 18px; font-size: clamp(40px, 8vw, 56px); font-weight: 700; box-shadow: 0 6px 0 #D9A400; }
.tile.used { visibility: hidden; }
.tile.hint { animation: pulse 0.9s infinite; background: #FFB3D1; box-shadow: 0 6px 0 var(--pink); }
.trace-top { display: flex; align-items: center; gap: 20px; }
.trace-wrap { width: 100%; display: flex; justify-content: center; }
.trace-canvas { background: #fff; border: 4px solid #E6D9FF; border-radius: 20px; touch-action: none; }
.win-box { text-align: center; }
.win-emoji, .result-emoji { font-size: 120px; line-height: 1.1; }
.win-word { font-size: 56px; font-weight: 700; color: var(--pink); letter-spacing: 3px; }
.win-vi { font-size: 24px; }
.ask-text { font-size: 26px; font-weight: 700; margin: 16px 30px; }
.ask-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.reward { font-size: 34px; font-weight: 700; color: #FFB300; }

/* ---- Phòng thay đồ ---- */
.dressing { display: flex; gap: 14px; padding: 14px; height: 100%; }
.dress-preview { width: clamp(150px, 32vw, 340px); flex-shrink: 0; background: radial-gradient(#fff, #F3E8FF); border-radius: var(--radius); display: grid; place-items: center; padding: 10px; }
.dress-preview svg { width: 100%; max-height: 78vh; }
.dress-panel { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.tab { background: #fff; border-radius: 16px; padding: 8px 12px; font-size: 26px; display: flex; flex-direction: column; align-items: center; min-width: 84px; box-shadow: 0 3px 0 #0001; }
.tab span { font-size: 14px; font-weight: 700; white-space: nowrap; }
.tab.active { background: var(--purple); color: #fff; }
.dress-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; overflow-y: auto; padding: 4px; }
.dress-item { background: #fff; border-radius: 18px; padding: 8px; position: relative; box-shadow: 0 4px 0 #0001; border: 4px solid transparent; }
.dress-item.wearing { border-color: var(--pink); }
.dress-item.locked .thumb, .dress-item.locked .swatch { filter: grayscale(.5) opacity(.6); }
.thumb svg { width: 100%; height: 110px; }
.swatch { width: 80px; height: 80px; border-radius: 50%; margin: 10px auto; border: 4px solid #fff; box-shadow: 0 0 0 2px #ddd; }
.dress-name { font-size: 15px; font-weight: 700; }
.tag { position: absolute; top: 4px; right: 4px; border-radius: 12px; padding: 2px 8px; font-weight: 700; font-size: 15px; }
.tag.ok { background: var(--pink); color: #fff; }
.tag.price { background: var(--yellow); }

/* ---- Sổ từ vựng ---- */
.book { padding: 14px; max-width: 900px; margin: 0 auto; }
.book-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.book-room { color: var(--purple-dk); margin: 16px 0 8px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.book-card { background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 5px 0 #0001; }
.book-en { font-size: 28px; font-weight: 700; color: var(--pink); letter-spacing: 1px; }
.book-vi { font-size: 17px; }
.book-stars { color: #FFB300; font-size: 16px; }

/* ---- Bố mẹ ---- */
.parents { padding: 14px; max-width: 760px; margin: 0 auto; font-size: 17px; }
.parents section { background: #fff; border-radius: 18px; padding: 12px 16px; margin-bottom: 12px; }
.parents h3 { margin: 4px 0 8px; color: var(--purple-dk); }
.parents .row { display: flex; gap: 10px; flex-wrap: wrap; }
.parents input { font: inherit; font-size: 20px; padding: 8px 12px; border-radius: 12px; border: 2px solid #DCCBFF; flex: 1; }
.parents table { width: 100%; border-collapse: collapse; }
.parents td, .parents th { padding: 6px; border-bottom: 1px solid #eee; text-align: left; }
.hint { color: #777; font-size: 15px; }

/* ---- Hiệu ứng ---- */
.toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: #fff; padding: 12px 22px; border-radius: 30px; font-size: 22px; box-shadow: 0 6px 20px #0003; z-index: 100; animation: drop .3s; }
.fly-star { position: fixed; left: 50%; top: 50%; font-size: 60px; z-index: 120; pointer-events: none; animation: fly 1.2s ease-in forwards; }
.confetti { position: fixed; top: -20px; width: 12px; height: 18px; border-radius: 3px; z-index: 110; pointer-events: none; animation: fall 2.6s linear forwards; }
.pop-in { animation: popIn .35s cubic-bezier(.3, 1.6, .5, 1); }
.bounce { animation: bounce 1s infinite; }
.idle svg { animation: float 3.2s ease-in-out infinite; }
.shake { animation: shake .45s; }
.wiggle { animation: shake .45s; }

@keyframes pop { 50% { transform: scale(1.25); } }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
@keyframes bounce { 50% { transform: translateY(-14px); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes pulse { 50% { transform: scale(1.07); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes drop { from { transform: translate(-50%, -30px); opacity: 0; } }
@keyframes fly { 0% { transform: translate(-50%, -50%) scale(.5); } 30% { transform: translate(-50%, -50%) scale(1.4); } 100% { left: calc(100% - 60px); top: 30px; transform: translate(-50%, -50%) scale(.4); opacity: .6; } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* Điện thoại dọc */
@media (max-width: 640px) {
  .room-stage { flex-direction: column; align-items: center; }
  .room-avatar { width: 110px; }
  .shelf { width: 100%; }
  .shelf-items { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .item-word { font-size: 20px; }
  .dressing { flex-direction: column; height: auto; }
  .dress-preview { width: 100%; height: 42vh; }
  .dress-preview svg { height: 100%; }
  .player-name { font-size: 18px; }
}


/* =================== BẢN 2 =================== */

/* ---- Nhân vật phụ: Hổ con Bông ---- */
.guide { background: none; padding: 0; position: relative; flex-shrink: 0; }
.guide svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 0 #0001); }
.guide-sm { width: 56px; } .guide-md { width: 76px; } .guide-lg { width: clamp(76px, 10vw, 104px); }
.guide-ear { position: absolute; right: -4px; top: -4px; background: var(--yellow); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; font-size: 16px; box-shadow: 0 2px 0 #D9A400; }
.guide.hop { animation: hop .4s; }
.tts-talking .guide svg { animation: talkBob .5s ease-in-out infinite; }
.tts-talking .guide .tiger-mouth { animation: talk .25s ease-in-out infinite alternate; transform-origin: 60px 88px; transform-box: view-box; }
.tiger-mouth { transform: scaleY(.35); transform-origin: 60px 88px; transform-box: view-box; }
.guide-box { display: flex; align-items: center; gap: 10px; z-index: 2; position: relative; }
.guide-bubble { flex: 1; position: relative; }
.guide-bubble::before { content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); border: 10px solid transparent; border-right: 16px solid #fff; border-left: 0; }
.hint-small { font-size: 14px; color: #9A8BB5; margin-top: 4px; font-weight: 400; }
.prompt-row .guide { margin-right: 6px; }
.prompt-text .bubble-tail { background: #F7F1FF; border-radius: 18px; padding: 10px 14px; position: relative; }
.prompt-text .bubble-tail::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-right: 14px solid #F7F1FF; border-left: 0; }
@keyframes hop { 40% { transform: translateY(-12px) scale(1.06); } }
@keyframes talkBob { 50% { transform: translateY(-3px) rotate(-2deg); } }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1.2); } }

/* ---- Chọn hồ sơ ---- */
.profiles, .new-profile { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 14px; }
.profile-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.profile-card { background: #fff; border-radius: 28px; padding: 14px; width: clamp(140px, 22vw, 190px); box-shadow: 0 6px 0 #0002; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.profile-av { width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(#FFE3F3, #E8D9FF); overflow: hidden; display: grid; place-items: center; border: 4px solid #fff; box-shadow: 0 0 0 3px #E2D2FF; }
.profile-av svg { width: 100%; height: 100%; }
.profile-av span { font-size: 54px; }
.profile-name { font-size: 24px; font-weight: 700; color: var(--purple-dk); }
.profile-stars { font-size: 18px; }
.profile-card.add { background: #ffffff99; border: 3px dashed #C9B3EE; box-shadow: none; }
.new-profile input { font: inherit; font-size: 32px; padding: 12px 20px; border-radius: 20px; border: 3px solid #DCCBFF; text-align: center; width: min(420px, 90vw); color: var(--purple-dk); font-weight: 700; }

/* ---- Ngôi nhà ---- */
.world { position: absolute; inset: 0; overflow: hidden; touch-action: none; background: #CDB8A0; }
.scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hall { position: absolute; background: repeating-linear-gradient(90deg, #E8C9A0 0 60px, #E0BE92 60px 120px); }
.hall::after { content: ''; position: absolute; inset: 22% 6%; border-radius: 40px; background: repeating-linear-gradient(45deg, #FFB3D1 0 18px, #FF9CC4 18px 36px); opacity: .55; }
.wroom { position: absolute; box-shadow: inset 0 0 0 16px #8B6B4E, inset 0 0 0 20px #6E5038; }
.wroom-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; }
.wroom-icon { font-size: 110px; line-height: 1; filter: drop-shadow(0 6px 0 #0002); }
.wroom-name { font-size: 42px; font-weight: 700; color: #5A3E8C; background: #ffffffd9; padding: 4px 22px; border-radius: 30px; text-align: center; display: flex; flex-direction: column; }
.wroom-name small { font-size: 26px; color: #999; }
.wroom.locked { filter: grayscale(.8); opacity: .75; }
.wdoor { position: absolute; background: #F6D9A8; border: 6px dashed #FFB347; border-radius: 8px; }
.door-bottom .wdoor { bottom: 0; left: 30%; width: 40%; height: 26px; }
.door-top .wdoor { top: 0; left: 30%; width: 40%; height: 26px; }
.door-right .wdoor { right: 0; top: 30%; height: 40%; width: 26px; }
.door-left .wdoor { left: 0; top: 30%; height: 40%; width: 26px; }
.walker { position: absolute; left: 0; top: 0; width: 140px; height: 210px; z-index: 3; pointer-events: none; will-change: transform; }
.walker-body { width: 100%; height: 100%; transform-origin: 50% 100%; }
.walker-body svg { width: 100%; height: 100%; }
.walker-shadow { position: absolute; left: 25%; bottom: -6px; width: 50%; height: 18px; border-radius: 50%; background: #0003; }
.walker.walking .walker-body svg { animation: walkBob .32s ease-in-out infinite; }
.walker.enter { transition: opacity .28s; opacity: .2; }
@keyframes walkBob { 50% { transform: translateY(-10px) rotate(2deg); } }
.stick { position: absolute; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%; background: #ffffff55; border: 4px solid #ffffffcc; z-index: 6; pointer-events: none; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--pink)); box-shadow: 0 4px 10px #0004; }
.world-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.world-ui > * { pointer-events: auto; }
.world-guide { position: absolute; left: 10px; top: 10px; max-width: min(560px, 70%); }
.world-btns { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; }

/* ---- Phòng có nhiệm vụ ---- */
.room-guide { z-index: 2; }
.room-guide .guide-bubble { min-height: 72px; }

/* ---- Phòng vẽ tranh ---- */
.art-room { background: linear-gradient(#E6F7FF 0 70%, #CDEBFA 70%); }
.art-wall { flex: 1; display: flex; align-items: center; justify-content: center; gap: 20px; z-index: 1; min-height: 0; }
.art-avatar { width: clamp(100px, 18vw, 200px); flex-shrink: 0; align-self: flex-end; }
.art-avatar svg { width: 100%; }
.art-frame-box { flex: 0 1 auto; display: flex; justify-content: center; }
.art-frame { padding: 18px; background: linear-gradient(135deg, #F7D774, #C9962B, #F7D774); border-radius: 12px; box-shadow: 0 10px 0 #0002, inset 0 0 0 4px #FFF3C4; width: min(60vw, 560px); aspect-ratio: 1000 / 700; position: relative; }
.art-frame img { width: 100%; height: 100%; object-fit: cover; display: block; border: 4px solid #8B6B2E; background: #fff; }
.art-frame::before { content: ''; position: absolute; left: 50%; top: -34px; width: 4px; height: 34px; background: #8B6B2E; }
.art-empty { width: 100%; height: 100%; background: #fff; border: 4px dashed #C9A85A; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 70px; }
.art-empty span { font-size: 26px; font-weight: 700; color: var(--purple-dk); animation: pulse 1.6s infinite; }
.art-gallery-wrap { background: #ffffffcc; border-radius: var(--radius); padding: 10px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.art-gallery { display: flex; gap: 10px; overflow-x: auto; padding: 4px; }
.art-thumb { flex-shrink: 0; width: 110px; height: 77px; border-radius: 10px; background: #fff; border: 4px solid #E6D9FF; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.art-thumb img { width: 100%; height: 100%; object-fit: cover; }
.art-thumb.on { border-color: var(--pink); }
.art-thumb.add { background: #FFF5FA; border-style: dashed; font-size: 28px; }
.art-thumb.add small { font-size: 14px; font-weight: 700; }
.art-del { align-self: flex-start; font-size: 15px; }

/* ---- Màn hình vẽ ---- */
.paint { position: fixed; inset: 0; z-index: 60; background: #FFF8E7; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
.paint-top, .paint-bottom { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.paint-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ptool { background: #fff; border-radius: 16px; font-size: 30px; padding: 4px 10px; min-width: 70px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 #0002; border: 3px solid transparent; }
.ptool small { font-size: 13px; font-weight: 700; }
.ptool.on { border-color: var(--purple); background: #F3EAFF; }
.ptool.done { background: #D7FFEF; box-shadow: 0 4px 0 #5ED6B4; }
.paint-mid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.paint-stage { box-shadow: 0 6px 20px #0002; border-radius: 10px; overflow: hidden; }
.paint-canvas { width: 100%; height: 100%; display: block; touch-action: none; background: #fff; }
.paint-sizes { display: flex; gap: 6px; }
.psize { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #0002; border: 3px solid transparent; }
.psize span { background: var(--ink); border-radius: 50%; display: block; }
.psize.on { border-color: var(--purple); }
.paint-palette { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.pcolor { width: 50px; height: 50px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px #ddd, 0 3px 0 #0002; }
.pcolor.on { transform: scale(1.18); box-shadow: 0 0 0 4px var(--purple); }
.psticker { width: 54px; height: 54px; border-radius: 14px; background: #fff; font-size: 32px; box-shadow: 0 3px 0 #0002; border: 3px solid transparent; }
.psticker.on { border-color: var(--purple); background: #F3EAFF; }

/* ---- Khác ---- */
.dress-left { display: flex; flex-direction: column; gap: 10px; align-items: center; flex-shrink: 0; width: clamp(150px, 32vw, 340px); }
.dress-left .dress-preview { width: 100%; flex: 1; }
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }

@media (max-width: 640px) {
  .world-guide { max-width: calc(100% - 20px); }
  .world-guide .guide-bubble { font-size: 16px; }
  .art-wall { flex-direction: column; }
  .art-avatar { display: none; }
  .art-frame { width: 88vw; }
  .dress-left { width: 100%; }
  .dress-left .dress-preview { height: 38vh; }
  .ptool { min-width: 56px; font-size: 24px; }
  .pcolor { width: 40px; height: 40px; }
  .psize { width: 46px; height: 46px; }
  .room-guide .guide-bubble { font-size: 16px; }
}

.guide-bubble.collapsed { display: none; }

/* =================== BẢN 3: Gia đình =================== */
.guide { display: flex; flex-direction: column; align-items: center; }
.guide-face { width: 100%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(#FFF3D6, #FFD9EC); border: 4px solid #fff; box-shadow: 0 0 0 3px #FFB3D1, 0 4px 0 #0002; overflow: hidden; }
.guide-face svg { width: 100%; height: 100%; display: block; filter: none; }
.guide-name { margin-top: 4px; background: var(--purple); color: #fff; font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 12px; white-space: nowrap; }
.guide-ear { top: -2px; right: -6px; }
.tts-talking .guide .guide-face svg { animation: talkBob .5s ease-in-out infinite; }

.npc { position: absolute; left: 0; top: 0; cursor: pointer; will-change: transform; }
.npc .walker-body { width: 100%; height: 100%; transform-origin: 50% 100%; }
.npc .walker-body svg { width: 100%; height: 100%; }
.npc.walking .walker-body svg { animation: walkBob .4s ease-in-out infinite; }
.npc.doing .walker-body svg { animation: float 2.4s ease-in-out infinite; }
.npc.hop { animation: hop .4s; }
.npc-name { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); background: #ffffffe6; color: #5A3E8C; font-weight: 700; font-size: 24px; padding: 0 12px; border-radius: 14px; white-space: nowrap; box-shadow: 0 2px 0 #0002; }
.npc-act { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); font-size: 48px; line-height: 1; filter: drop-shadow(0 3px 0 #0002); }
.npc-act:not(:empty) { background: #fff; border-radius: 50%; width: 76px; height: 76px; display: grid; place-items: center; box-shadow: 0 4px 0 #0002; animation: pop .4s; }
.npc-act:not(:empty)::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top: 12px solid #fff; border-bottom: 0; }
.tv-corner { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 1; pointer-events: none; }
.tv-corner.portrait { flex-direction: row; }
.tv-corner .tv { font-size: 90px; line-height: 1; }
.tv-corner .sofa { font-size: 100px; line-height: 1; }

.family-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fam-row { display: flex; align-items: center; gap: 8px; background: #F7F1FF; border-radius: 14px; padding: 6px 8px; }
.fam-face { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #fff; flex-shrink: 0; }
.fam-face svg { width: 100%; height: 100%; }
.fam-role { font-weight: 700; min-width: 34px; white-space: nowrap; }
.fam-row input { min-width: 0; font-size: 17px !important; padding: 6px 8px !important; }
.room-npc { width: clamp(100px, 19vw, 210px); flex-shrink: 0; position: relative; background: none; cursor: pointer; margin-left: -20px; }
.room-npc.kid { width: clamp(80px, 15vw, 170px); align-self: flex-end; }
.room-npc svg { width: 100%; }
.room-npc .npc-name { font-size: 16px; bottom: -8px; }
@media (max-width: 640px) {
  .room-stage { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .room-npc { width: 90px; margin-left: 0; }
  .room-npc.kid { width: 75px; }
}

/* =================== BẢN 4: Thế giới 3D =================== */
.world3d { background: #BFE6FF; }
.world3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.enter-btn { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 7; font-size: 26px; font-weight: 700; color: #fff; padding: 14px 30px; border-radius: 40px; background: linear-gradient(var(--pink), #E8407F); box-shadow: 0 6px 0 #B8205F, 0 8px 20px #0003; animation: pulse 1.4s infinite; white-space: nowrap; }
.enter-btn.locked { background: linear-gradient(#BDBDBD, #9E9E9E); box-shadow: 0 6px 0 #757575; animation: none; }
.enter-btn:active { transform: translateX(-50%) translateY(4px); }
.zoom-btns { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.zoom-btns button { width: 52px; height: 52px; border-radius: 50%; background: #ffffffdd; font-size: 22px; box-shadow: 0 3px 0 #0002; }
@media (max-width: 640px) {
  .enter-btn { font-size: 20px; padding: 12px 22px; bottom: 70px; }
}

/* =================== BẢN 5: Đồng hồ, Phòng ngủ, Tivi & Đố Toán =================== */
.clock-pill {
  background: linear-gradient(135deg, #FFF8E1, #FFE082);
  color: #4A2C00;
  font-weight: 700;
  font-size: 18px;
  padding: 6px 14px;
  border-radius: 26px;
  box-shadow: 0 3px 0 #0002, inset 0 1px 0 #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.clock-pill[data-period="noon"] {
  background: linear-gradient(135deg, #FFF59D, #FFB300);
  color: #3E2723;
}
.clock-pill[data-period="afternoon"] {
  background: linear-gradient(135deg, #FFCCBC, #FF8A65);
  color: #3E1F14;
}
.clock-pill[data-period="night"] {
  background: linear-gradient(135deg, #283593, #1A237E);
  color: #FFF59D;
  box-shadow: 0 3px 0 #0005, 0 0 12px #7986CB88;
}
.world-clock {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  font-size: 20px;
  padding: 10px 18px;
  border: 3px solid #fff;
  pointer-events: auto;
}
.math-world-btn {
  background: linear-gradient(135deg, #FFF59D, #FFD54F);
  color: #4A2C00;
  border: 2px solid #fff;
}

/* Hộp người lớn nhắc đi ngủ khi trời tối */
.bedtime-banner {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1A237E, #311B92);
  color: #fff;
  border: 3px solid #FFD54F;
  border-radius: 26px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 95;
  box-shadow: 0 8px 24px #0006;
  width: min(680px, 94vw);
}
.bt-face {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  border: 3px solid #FFD54F;
  flex-shrink: 0;
}
.bt-face svg { width: 100%; height: 100%; }
.bt-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.bt-title { font-weight: 700; color: #FFD54F; font-size: 18px; }
.bt-text { font-size: 18px; line-height: 1.3; }
.bt-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bt-go {
  background: linear-gradient(#FFD54F, #FFA000);
  color: #3E2723;
  font-size: 18px;
}
.bt-later {
  background: #ffffff22;
  color: #fff;
  font-size: 16px;
}

/* Bảng Đố Toán */
.math-card {
  width: min(700px, 100%);
  padding: 16px 20px 20px;
}
.math-head {
  margin-bottom: 6px;
}
.math-badge {
  display: inline-block;
  background: linear-gradient(90deg, #F3E5F5, #FCE4EC);
  color: var(--purple-dk);
  font-size: 20px;
  padding: 6px 16px;
  border-radius: 20px;
}
.math-act {
  font-size: 18px;
  color: #6A35B8;
  margin-bottom: 4px;
}
.math-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  margin: 6px 0 10px;
  flex-wrap: wrap;
}
.math-tok {
  font-size: clamp(36px, 7.5vw, 56px);
  font-weight: 700;
  color: var(--purple-dk);
  background: #F7F1FF;
  padding: 6px 18px;
  border-radius: 20px;
  box-shadow: 0 4px 0 #DCCBFF;
}
.math-slot {
  min-width: clamp(76px, 15vw, 114px);
  height: clamp(68px, 14vw, 92px);
  border-radius: 22px;
  border: 4px dashed var(--pink);
  background: #FFF0F6;
  color: #E8407F;
  font-size: clamp(38px, 8vw, 58px);
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 14px;
  box-shadow: inset 0 2px 6px #0001;
}
.math-slot.filled {
  border-style: solid;
  background: #FFF9C4;
  color: #D84315;
}
.math-slot.right {
  border-color: #26A69A;
  background: #E0F2F1;
  color: #00796B;
  animation: pop .4s;
}
.math-cmp-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
  opacity: 0.65;
  transition: opacity 0.2s, transform 0.2s;
}
.math-cmp-row.active-pad {
  opacity: 1;
  transform: scale(1.03);
}
.math-cmp-btn {
  width: clamp(92px, 24vw, 136px);
  padding: 10px 10px;
  border-radius: 22px;
  background: linear-gradient(#E1F5FE, #81D4FA);
  box-shadow: 0 5px 0 #0288D1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.math-cmp-btn .sym {
  font-size: clamp(38px, 8vw, 54px);
  font-weight: 700;
  color: #01579B;
  line-height: 1;
}
.math-cmp-btn small {
  font-size: 15px;
  font-weight: 700;
  color: #0277BD;
}
.math-numpad {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 520px;
  margin-top: 6px;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.math-numpad.active-pad {
  opacity: 1;
}
.math-num-btn {
  width: clamp(56px, 12vw, 76px);
  height: clamp(56px, 11vw, 72px);
  border-radius: 20px;
  background: linear-gradient(#FFF9C4, #FFD54F);
  box-shadow: 0 5px 0 #D9A400;
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 700;
  color: var(--ink);
}
.math-num-btn.del {
  background: linear-gradient(#FFCDD2, #EF9A9A);
  box-shadow: 0 5px 0 #C62828;
  color: #B71C1C;
}

/* Phòng ngủ & Hoạt động (Đi ngủ, Đánh răng, Chải tóc, Xem tivi) */
.bedroom-screen {
  background: linear-gradient(180deg, #E8EAF6 0%, #F3E5F5 60%, #FCE4EC 100%);
  transition: background 0.6s ease;
}
.bedroom-screen.is-night {
  background: linear-gradient(180deg, #0D153A 0%, #1A237E 55%, #311B92 100%);
  color: #fff;
}
.bedroom-screen.is-night .guide-bubble {
  color: var(--ink);
}
.bedroom-tabs {
  justify-content: center;
  z-index: 2;
}
.bedroom-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.act-card {
  background: #fffffff2;
  color: var(--ink);
  border-radius: 28px;
  padding: 18px 22px;
  width: min(680px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px #0002;
  text-align: center;
}
.bedroom-screen.is-night .sleep-card {
  background: #1A237Eee;
  color: #fff;
  border: 3px solid #7986CB;
}
.sleep-sky {
  font-size: 20px;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 20px;
  background: #E8EAF6;
  color: #283593;
}
.bedroom-screen.is-night .sleep-sky {
  background: #0D153A;
  color: #FFD54F;
}
.bed-scene {
  position: relative;
  width: min(360px, 82vw);
  height: 220px;
  background: linear-gradient(180deg, #FFF3E0, #FFE0B2);
  border: 5px solid #8D6E63;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.bedroom-screen.is-night .bed-scene {
  background: linear-gradient(180deg, #1E2749, #283593);
  border-color: #5C6BC0;
}
.bed-avatar {
  width: 145px;
  margin-bottom: -18px;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.bed-avatar.sleeping {
  transform: translateY(18px) rotate(-8deg) scale(0.95);
  filter: brightness(0.9);
}
.bed-zzz {
  position: absolute;
  top: 14px;
  right: 22px;
  font-size: 32px;
  animation: float 2s ease-in-out infinite;
}
.bed-blanket {
  width: 100%;
  background: linear-gradient(90deg, #FF80AB, #CE93D8);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 12px;
  border-top: 4px solid #fff;
  z-index: 2;
}
.mirror-box {
  position: relative;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #FFFFFF, #E0F7FA 70%, #B2EBF2 100%);
  border: 8px solid #FFB300;
  box-shadow: 0 6px 0 #FFA000, inset 0 0 18px #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.mirror-avatar {
  width: 165px;
  height: 165px;
}
.mirror-avatar svg { width: 100%; height: 100%; }
.brush-foam {
  position: absolute;
  bottom: 12px;
  font-size: 38px;
  background: #ffffffdd;
  padding: 2px 12px;
  border-radius: 20px;
  box-shadow: 0 3px 8px #0002;
}
.scrub-anim {
  animation: shake 0.45s;
}
.act-status {
  font-size: 20px;
  font-weight: 700;
  color: var(--purple-dk);
}
.act-words {
  font-size: 18px;
  background: #F7F1FF;
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 16px;
}

/* Màn hình Xem Tivi */
.tv-modal {
  text-align: center;
  width: min(640px, 96vw);
}
.tv-frame {
  width: 100%;
  background: linear-gradient(180deg, #263238, #37474F);
  border: 10px solid #455A64;
  border-radius: 28px;
  padding: 22px 16px;
  color: #fff;
  box-shadow: inset 0 0 24px #0008, 0 8px 0 #1C262B;
  margin-bottom: 12px;
}
.tv-scene {
  font-size: clamp(54px, 11vw, 86px);
  line-height: 1.2;
  margin: 10px 0;
}
.tv-sub {
  font-size: 20px;
  background: #00000055;
  padding: 8px 14px;
  border-radius: 16px;
}
.tv-channels {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.tv-ch-btn.active {
  background: var(--pink);
  color: #fff;
}

/* Chế độ sáng/trưa/chiều/tối cho bản 2D dự phòng */
body[data-time="afternoon"] .world:not(.world3d) { filter: sepia(0.22) saturate(1.15); }
body[data-time="night"] .world:not(.world3d) { filter: brightness(0.72) saturate(0.85) hue-rotate(-15deg); }

/* =================== BẢN 6: Kỹ Năng Sống & Khu Giải Trí =================== */
.ls-world-btn {
  background: linear-gradient(135deg, #B9F6CA, #69F0AE);
  color: #004D40;
  border: 2px solid #fff;
}
.fun-world-btn {
  background: linear-gradient(135deg, #F8BBD0, #FF80AB);
  color: #4A0E2E;
  border: 2px solid #fff;
}
.ls-switch-btn {
  margin-left: 8px;
  background: linear-gradient(135deg, #B9F6CA, #69F0AE);
  color: #004D40;
  font-size: 16px;
  padding: 6px 12px;
}
.ls-card, .fun-card {
  width: min(760px, 98vw);
  padding: 14px 18px 18px;
}
.ls-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: 48px;
}
.ls-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ls-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F3E5F5;
  font-size: 20px;
  display: grid;
  place-items: center;
}
.ls-dot.active {
  background: var(--pink);
  transform: scale(1.15);
  box-shadow: 0 3px 8px #0003;
}

/* Khung hiệu ứng tình huống Kỹ năng sống */
.ls-stage {
  width: 100%;
  min-height: 118px;
  border-radius: 22px;
  padding: 10px 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: inset 0 0 18px #0002;
}
.ls-stage.fx-water {
  background: linear-gradient(180deg, #E1F5FE 0%, #81D4FA 55%, #0288D1 100%);
  color: #01579B;
}
.fx-sun { position: absolute; top: 6px; right: 14px; font-size: 32px; animation: pulse 1.5s infinite; }
.fx-shore { font-size: 20px; background: #FFF9C4dd; padding: 2px 12px; border-radius: 14px; z-index: 1; }
.fx-wave { font-size: 30px; line-height: 1.1; animation: waveSlide 2.2s ease-in-out infinite alternate; }
.fx-wave.w2 { animation-direction: alternate-reverse; font-size: 34px; }
@keyframes waveSlide { from { transform: translateX(-14px); } to { transform: translateX(14px); } }

.ls-stage.fx-fire {
  background: linear-gradient(180deg, #37474F 0%, #5D4037 50%, #BF360C 100%);
  color: #fff;
}
.fx-smoke { font-size: 28px; opacity: 0.85; animation: float 1.6s ease-in-out infinite; }
.fx-flames { display: flex; gap: 18px; font-size: 44px; line-height: 1; }
.fx-flames span { display: inline-block; animation: flameFlicker 0.45s ease-in-out infinite alternate; }
.fx-flames span:nth-child(2) { animation-delay: 0.15s; font-size: 52px; }
@keyframes flameFlicker { from { transform: scale(0.92) rotate(-5deg); } to { transform: scale(1.14) rotate(5deg); } }
.fx-rescue { background: #FFD54F; color: #3E2723; padding: 3px 14px; border-radius: 14px; font-size: 18px; }

.ls-stage.fx-storm {
  background: linear-gradient(180deg, #1A237E 0%, #283593 60%, #3949AB 100%);
  color: #fff;
  animation: stormFlash 3s infinite;
}
@keyframes stormFlash { 0%, 90%, 100% { filter: brightness(1); } 93%, 96% { filter: brightness(1.45); } }
.fx-clouds { font-size: 32px; }
.fx-bolt { font-size: 38px; animation: pulse 0.6s infinite; }
.fx-rain { font-size: 22px; letter-spacing: 6px; animation: waveSlide 0.8s linear infinite; }
.fx-house { background: #FFF59D; color: #1A237E; padding: 3px 14px; border-radius: 14px; font-size: 18px; }

.ls-stage.fx-quake {
  background: linear-gradient(180deg, #EFEBE9, #D7CCC8);
  animation: quakeShake 0.6s ease-in-out infinite;
}
@keyframes quakeShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-0.6deg); } 75% { transform: translateX(4px) rotate(0.6deg); } }
.fx-quake-room { display: flex; align-items: center; gap: 20px; font-size: 26px; }
.q-table { background: #8D6E63; color: #fff; padding: 8px 18px; border-radius: 16px; font-size: 22px; }

.ls-stage.fx-stranger, .ls-stage.fx-lost, .ls-stage.fx-electric {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
}
.fx-stranger-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.fx-big { font-size: 46px; }
.fx-stop { background: #E53935; color: #fff; padding: 6px 16px; border-radius: 18px; font-size: 20px; }

.ls-stage.fx-traffic {
  background: linear-gradient(180deg, #CFD8DC, #546E7A);
  color: #fff;
}
.fx-traffic { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.tl-box { background: #263238; padding: 6px 10px; border-radius: 16px; display: flex; gap: 8px; border: 2px solid #fff; }
.tl { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }
.tl.r { background: #FF5252; opacity: 0.4; }
.tl.y { background: #FFD740; opacity: 0.4; }
.tl.g { background: #69F0AE; box-shadow: 0 0 10px #69F0AE; animation: pulse 1s infinite; }
.zebra { background: repeating-linear-gradient(90deg, #ffffffdd 0 18px, #455A64 18px 32px); color: #1A237E; font-weight: 700; font-size: 24px; padding: 6px 18px; border-radius: 14px; }

/* Danh sách đáp án Kỹ năng sống */
.ls-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.ls-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #F7F1FF;
  border: 3px solid #E1BEE7;
  border-radius: 20px;
  padding: 10px 14px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 4px 0 #CE93D8;
}
.ls-ch-icon {
  font-size: 32px;
  flex-shrink: 0;
  background: #fff;
  padding: 4px 10px;
  border-radius: 14px;
}
.ls-choice-btn.right {
  background: #E0F2F1;
  border-color: #26A69A;
  box-shadow: 0 4px 0 #00897B;
  color: #004D40;
}
.ls-choice-btn.wrong {
  background: #FFEBEE;
  border-color: #EF5350;
}
.ls-spell {
  width: 100%;
  background: #FFFDE7;
  border: 3px dashed #FFB300;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: popIn 0.35s ease;
}
.ls-spell-title {
  font-size: 19px;
  font-weight: 700;
  color: #4A2C00;
  text-align: center;
}

/* Khu Giải trí (Nghe nhạc, Nhảy Dance, Tập thể dục) */
.fun-stage {
  width: 100%;
  border-radius: 24px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.music-stage {
  background: linear-gradient(180deg, #E1F5FE, #F3E5F5);
}
.disco-stage {
  background: radial-gradient(circle at 50% 20%, #4A148C, #1A237E 85%);
  color: #fff;
}
.disco-stage .act-status {
  color: #FFF59D;
}
.gym-stage {
  background: linear-gradient(180deg, #E0F7FA 0%, #C8E6C9 100%);
}
.floating-notes, .disco-lights {
  font-size: 30px;
  letter-spacing: 6px;
  animation: waveSlide 1.4s ease-in-out infinite alternate;
}
.fun-avatar {
  width: 165px;
}
.fun-avatar svg, .fun-dancer svg {
  width: 100%;
  height: auto;
}
.dancers-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}
.fun-dancer {
  width: 125px;
}
.fun-dancer.main-dancer {
  width: 155px;
}
.dance-bob { animation: bounce 0.75s ease-in-out infinite; }
.dance-move-1 { animation: talkBob 0.65s ease-in-out infinite; }
.dance-move-2 { animation: bounce 0.65s ease-in-out infinite; }
.dance-clap { animation: hop 0.55s ease-in-out infinite; }
.dance-spin { animation: danceSpin 0.8s ease-in-out infinite; }
.dance-jump { animation: bounce 0.48s ease-in-out infinite; }
.dance-pose { animation: pulse 0.6s ease-in-out infinite; }
.gym-move { animation: bounce 0.8s ease-in-out infinite; }
@keyframes danceSpin {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.08) translateY(-10px); }
}
.fun-move-btn {
  font-size: 18px;
  padding: 10px 18px;
}

/* ===== Chế độ Tự động ẩn hình (Đọc chữ tiếng Anh) & Nhiệm vụ từ trong nhà ra ngoài vườn ===== */
.garden-world-btn {
  background: linear-gradient(180deg, #E8F5E9, #C8E6C9);
  border-color: #66BB6A;
  color: #1B5E20;
}

.quest-area-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 3;
  margin-bottom: 4px;
}

.quest-area-btn {
  background: rgba(255, 255, 255, 0.92);
  border: 2.5px solid #E1BEE7;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(155, 93, 229, 0.2);
}

.quest-area-btn.active {
  background: linear-gradient(135deg, #FF5C9D, #9B5DE5);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 4px 10px rgba(155, 93, 229, 0.38);
}

.quest-mode-btn {
  background: #FFF9C4;
  border: 2.5px solid #FBC02D;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #5D4037;
  box-shadow: 0 3px 0 rgba(251, 192, 45, 0.35);
}

.quest-mode-btn.all-text {
  background: #E8F5E9;
  border-color: #43A047;
  color: #1B5E20;
}

.quest-diff {
  font-size: 15px;
  font-weight: 700;
  color: #D81B60;
  background: #FCE4EC;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 6px;
}

/* Món đồ trên kệ khi đã quen -> Ẩn hình, chỉ hiện chữ tiếng Anh to rõ */
.item.text-only-item {
  background: linear-gradient(180deg, #FFFDF7, #FFF3E0);
  border: 3px dashed #FF8A65;
  min-width: 112px;
  min-height: 92px;
  justify-content: center;
  gap: 6px;
}

.item-read-tag {
  font-size: 12px;
  font-weight: 700;
  color: #E65100;
  background: #FFE0B2;
  padding: 2px 8px;
  border-radius: 999px;
}

.item-word-big {
  font-size: 28px;
  font-weight: 700;
  color: #6A1B9A;
  letter-spacing: 1px;
}

/* Ô giỏ đồ bên dưới khi ẩn hình */
.basket-slot.text-slot {
  width: auto;
  min-width: 78px;
  height: 62px;
  padding: 4px 12px;
  border-radius: 18px;
  flex-direction: column;
  gap: 2px;
  background: #FFF8E1;
  border: 2.5px dashed #FFB300;
}

.basket-slot {
  flex-direction: column;
  width: auto;
  min-width: 66px;
  padding: 4px 10px;
  border-radius: 18px;
}

.basket-word {
  font-size: 20px;
  font-weight: 700;
  color: #6A1B9A;
  line-height: 1.1;
}

.basket-vi {
  font-size: 12px;
  font-weight: 700;
  color: #5D4037;
  line-height: 1.1;
}

/* Khóa bấm vội khi câu thoại đang bắt đầu đọc */
.listening-lock {
  opacity: 0.72;
  filter: saturate(0.8);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.listen-banner {
  background: #FFF3E0;
  border: 2px solid #FFB74D;
  color: #E65100;
  font-size: 15px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  text-align: center;
}

.listen-banner.done {
  background: #E8F5E9;
  border-color: #81C784;
  color: #1B5E20;
}

.mode-tag {
  font-size: 14px;
  color: #6A1B9A;
  margin-left: 6px;
}

/* Hộp ẩn hình trong thử thách để bé tự đọc mặt chữ */
.mystery-word-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #F3E5F5, #E1F5FE);
  border: 3px dashed #8E24AA;
  border-radius: 22px;
  padding: 12px 18px;
  width: 100%;
  max-width: 560px;
}

.mystery-word-box.compact {
  padding: 8px 16px;
}

.mystery-icon {
  font-size: 44px;
  background: #fff;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.mystery-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.mystery-vi {
  font-size: 22px;
  color: #3B234A;
}

.mystery-vi b {
  color: #D81B60;
  font-size: 25px;
}

.mystery-sub {
  font-size: 15px;
  font-weight: 700;
  color: #5E35B1;
}

.pic-choice.with-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
}

.pic-word {
  font-size: 28px;
  font-weight: 700;
  color: #6A1B9A;
}

.pic-sub-emoji {
  font-size: 36px;
}

.trace-meaning {
  font-size: 22px;
  color: #4A148C;
  background: #F3E5F5;
  padding: 6px 16px;
  border-radius: 999px;
}

/* ===== Thanh nút Icon gọn trên đầu & Bảng Toán / Kỹ năng sống gọn nhẹ ===== */
#topbar {
  gap: 6px;
  padding: 4px 10px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.top-act-btn {
  width: 38px;
  height: 38px;
  font-size: 20px;
  border-radius: 50%;
  background: #ffffffeb;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
  display: grid;
  place-items: center;
  padding: 0;
}

#topClock {
  padding: 4px 10px;
  font-size: 14px;
}

.quest-area-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* Thu gọn bảng Toán & Kỹ năng sống để không che kín màn hình */
.challenge-card.math-card,
.challenge-card.ls-card {
  width: min(540px, 95vw);
  padding: 12px 16px 14px;
}

.math-card .prompt-row,
.ls-card .prompt-row {
  margin: 4px 42px 8px 0;
}

.math-card .prompt-text,
.ls-card .prompt-text {
  font-size: 18px;
}

.math-body,
.ls-body {
  gap: 10px;
}

.math-eq {
  font-size: clamp(32px, 7vw, 46px);
  padding: 6px 14px;
  gap: 8px;
}

.math-slot {
  min-width: 58px;
  height: 54px;
  font-size: clamp(30px, 6.5vw, 44px);
}

.ls-stage {
  min-height: 86px;
  padding: 6px 12px;
}

.ls-choice-btn {
  padding: 8px 12px;
  font-size: 17px;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ls-ch-text {
  flex: 1;
}

.ls-ch-listen {
  font-size: 18px;
  opacity: 0.65;
  flex-shrink: 0;
}

.ls-choice-btn.selected {
  background: #FFF9C4;
  border-color: #FF8F00;
  box-shadow: 0 4px 0 #FFB300;
  transform: scale(1.015);
}

.ls-choice-btn.selected .ls-ch-listen {
  opacity: 1;
  transform: scale(1.15);
}

.ls-confirm-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2px;
}

.ls-confirm-btn {
  width: 100%;
  max-width: 340px;
  padding: 10px 20px;
  font-size: 20px;
  background: #CFD8DC;
  box-shadow: 0 4px 0 #90A4AE;
  color: #546E7A;
  transition: all 0.2s ease;
}

.ls-confirm-btn.ready {
  background: linear-gradient(135deg, #00C853, #2E7D32);
  box-shadow: 0 5px 0 #1B5E20;
  color: #fff;
  animation: pulse 1.2s infinite;
}

@media (max-width: 600px) {
  .player-name {
    display: none;
  }
  .top-act-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

/* ===== Phòng Game & Màn Hình Máy Tính PC (Poki, Playhop, CrazyGames, Desura, YouTube) ===== */
.pc-overlay {
  padding: 8px;
  background: rgba(12, 16, 36, 0.82);
  backdrop-filter: blur(6px);
}

.pc-monitor {
  width: min(1020px, 97vw);
  height: min(670px, 93vh);
  background: linear-gradient(145deg, #1E243B, #101322);
  border: 4px solid #00E5FF;
  border-radius: 26px;
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.35), 0 18px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}

.pc-bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(90deg, #14192D, #231942, #14192D);
  border-bottom: 2px solid rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
}

.pc-cam-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
}

.pc-bezel-title {
  font-size: 17px;
  font-weight: 700;
  color: #E0F7FA;
  letter-spacing: 0.3px;
}

.pc-power-btn {
  background: linear-gradient(135deg, #FF1744, #D50000);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #8E0000;
}

.pc-screen-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 20% 20%, #3A1C71, #283593 52%, #0F172A 100%);
}

/* Màn hình Desktop với các Icon Game & YouTube */
.pc-desktop {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.pc-desktop-banner {
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  padding: 8px 14px;
  font-size: 15px;
  text-align: center;
  color: #FFF9C4;
}

.pc-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  flex: 1;
  align-content: center;
}

.pc-desktop-icon {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.pc-desktop-icon:hover,
.pc-desktop-icon:active {
  transform: translateY(-3px) scale(1.03);
  background: rgba(255, 255, 255, 0.22);
  border-color: #00E5FF;
}

.pc-icon-box {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 38px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.35);
}

.pc-icon-name {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.pc-icon-tag {
  font-size: 12px;
  font-weight: 700;
  color: #B2EBF2;
  background: rgba(0, 0, 0, 0.32);
  padding: 2px 9px;
  border-radius: 999px;
}

/* Cửa sổ ứng dụng bên trong màn hình PC */
.pc-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #F8FAFC;
  color: #1E293B;
  overflow: hidden;
}

.pc-url-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #1E293B;
  color: #F8FAFC;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pc-win-dots {
  display: inline-flex;
  gap: 5px;
}

.pc-win-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.pc-win-dots i:nth-child(1) { background: #FF5252; }
.pc-win-dots i:nth-child(2) { background: #FFD740; }
.pc-win-dots i:nth-child(3) { background: #69F0AE; }

.pc-address {
  flex: 1;
  min-width: 150px;
  background: #0F172A;
  color: #38BDF8;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-launch-pill {
  background: linear-gradient(135deg, #00C853, #009624);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.pc-launch-pill.secondary {
  background: #334155;
  color: #E2E8F0;
}

.pc-launch-pill.yt-ext {
  background: #FF0000;
}

.pc-win-close {
  background: #EF4444;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

/* Nội dung cổng game (Poki, Playhop, CrazyGames, Desura) */
.pc-portal-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  align-items: center;
}

.pc-portal-hero {
  width: 100%;
  max-width: 780px;
  border-radius: 22px;
  padding: 16px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.pc-portal-icon {
  font-size: 56px;
  background: rgba(255, 255, 255, 0.22);
  width: 82px;
  height: 82px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pc-portal-info h2 {
  margin: 0 0 4px;
  font-size: 24px;
}

.pc-portal-info p {
  margin: 0 0 6px;
  font-size: 15px;
  opacity: 0.95;
}

.pc-portal-note {
  font-size: 13px;
  background: rgba(0, 0, 0, 0.22);
  padding: 5px 10px;
  border-radius: 10px;
}

.pc-open-ext-btn {
  text-decoration: none;
  text-align: center;
  width: 100%;
  max-width: 640px;
  background: linear-gradient(135deg, #FF5C9D, #9B5DE5);
}

.pc-sub-heading {
  font-size: 16px;
  font-weight: 700;
  color: #334155;
  margin-top: 2px;
}

.pc-mini-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 780px;
}

.pc-mini-card {
  background: #fff;
  border: 2.5px solid #CBD5E1;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 4px 0 #E2E8F0;
}

.pc-mini-card b {
  color: #7C3AED;
  white-space: nowrap;
}

.pc-iframe-tip {
  width: 100%;
  background: #FEF3C7;
  color: #92400E;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pc-web-iframe {
  width: 100%;
  flex: 1;
  min-height: 360px;
  border: 2px solid #CBD5E1;
  border-radius: 14px;
  background: #fff;
}

/* Ứng dụng YouTube trực tuyến trong màn hình PC */
.pc-yt-input {
  width: 210px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1.5px solid #475569;
  background: #0F172A;
  color: #fff;
  font-size: 13px;
}

.pc-yt-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 10px;
  padding: 10px;
  background: #0F172A;
  color: #fff;
  overflow: hidden;
}

.pc-yt-player-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.pc-yt-frame-wrap {
  flex: 1;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #334155;
  position: relative;
  min-height: 220px;
}

.pc-yt-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.pc-yt-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #1E293B;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.pc-yt-direct {
  color: #38BDF8;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pc-yt-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.pc-yt-cats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.pc-yt-cat-btn {
  flex: 1;
  background: #1E293B;
  color: #CBD5E1;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.pc-yt-cat-btn.active {
  background: #FF0000;
  color: #fff;
}

.pc-yt-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.pc-yt-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1E293B;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.pc-yt-item.playing {
  border-color: #FF5252;
  background: #2D1B2E;
}

.pc-yt-thumb {
  width: 76px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #000;
}

.pc-yt-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.pc-yt-vtitle {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.pc-yt-ven {
  font-size: 11px;
  color: #94A3B8;
}

/* Mini-Game trực tiếp trong màn hình PC */
.pc-minigame-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #0F172A;
  color: #fff;
  gap: 8px;
  overflow: hidden;
}

.pc-mg-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pc-mg-tab {
  background: #1E293B;
  color: #CBD5E1;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
}

.pc-mg-tab.active {
  background: #7C3AED;
  color: #fff;
}

.pc-mg-hud {
  font-size: 15px;
  font-weight: 700;
  color: #FDE047;
}

.pc-canvas {
  width: min(560px, 92vw);
  height: auto;
  max-height: 52vh;
  aspect-ratio: 560 / 320;
  border-radius: 16px;
  border: 3px solid #38BDF8;
  background: #0B1026;
  touch-action: none;
}

.pc-mg-controls {
  display: flex;
  gap: 14px;
}

.pc-ctrl-btn {
  background: #2563EB;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #1D4ED8;
}

/* Thanh Taskbar dưới cùng của màn hình PC */
.pc-taskbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #090D16;
  border-top: 1.5px solid rgba(255, 255, 255, 0.15);
  overflow-x: auto;
  flex-shrink: 0;
}

.pc-start-btn {
  background: linear-gradient(135deg, #00E5FF, #2979FF);
  color: #001E3C;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 10px;
  white-space: nowrap;
}

.pc-task-item {
  background: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 9px;
  white-space: nowrap;
}

.pc-task-clock {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .pc-yt-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .pc-yt-frame-wrap {
    min-height: 200px;
  }
  .pc-icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.reward.muted {
  background: #ECEFF1;
  color: #546E7A;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}

.claim-pill {
  background: rgba(255, 213, 79, 0.25);
  color: #B45309;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.ls-stage.fx-hygiene {
  background: linear-gradient(135deg, #E0F7FA, #B2EBF2);
}
.ls-stage.fx-pet {
  background: linear-gradient(135deg, #FFF8E1, #FFE082);
}
.ls-stage.fx-health {
  background: linear-gradient(135deg, #FCE4EC, #F8BBD0);
}
.ls-stage.fx-sharp,
.ls-stage.fx-height {
  background: linear-gradient(135deg, #FFF3E0, #FFCC80);
}
.ls-stage.fx-green {
  background: linear-gradient(135deg, #E8F5E9, #A5D6A7);
}
.ls-stage.fx-polite {
  background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
}
.ls-stage.fx-sun {
  background: linear-gradient(135deg, #FFFDE7, #FFF59D);
}
.ls-stage.fx-eyes {
  background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
}

/* ===== BẢN 15: Giới Hạn Phòng Game (30p Chơi / 1h Nghỉ), YouTube Bàn Phím Ảo + Micro + Chặn QC, Khách Thăm Nhà ===== */
.pc-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.9);
  border: 2px solid #00E676;
  color: #E2E8F0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.28);
}

.pc-timer-badge.warn {
  border-color: #FFB300;
  color: #FFF8E1;
  box-shadow: 0 0 12px rgba(255, 179, 0, 0.4);
}

.pc-timer-badge.danger,
.pc-timer-badge.locked {
  border-color: #FF5252;
  background: rgba(127, 29, 29, 0.92);
  color: #FFEBEE;
  animation: pulse 1s infinite;
}

.pc-timer-clock {
  font-family: monospace;
  font-size: 15px;
  font-weight: 700;
  color: #69F0AE;
}

.pc-timer-badge.warn .pc-timer-clock { color: #FFD54F; }
.pc-timer-badge.danger .pc-timer-clock,
.pc-timer-badge.locked .pc-timer-clock { color: #FF8A80; }

.pc-timer-track {
  width: 64px;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
}

.pc-timer-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00E676, #00B0FF);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.pc-welcome-banner {
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 14px;
  color: #FFF9C4;
  text-align: center;
}

.pc-icon-label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.pc-icon-sub {
  font-size: 12px;
  color: #B2EBF2;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Màn hình khóa nghỉ ngơi 1 tiếng sau 30 phút chơi */
.pc-cooldown-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 30%, #1E293B, #0F172A 80%);
  overflow-y: auto;
}

.pc-cooldown-card {
  max-width: 560px;
  width: 100%;
  background: rgba(30, 41, 59, 0.95);
  border: 3px solid #38BDF8;
  border-radius: 26px;
  padding: 20px 24px;
  text-align: center;
  color: #F8FAFC;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pc-cooldown-illustration {
  font-size: 56px;
  line-height: 1.1;
}

.pc-cooldown-card h2 {
  margin: 0;
  color: #FDE047;
  font-size: 24px;
}

.pc-cooldown-msg {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #E2E8F0;
}

.pc-cooldown-timer-box {
  background: #0F172A;
  border: 2px dashed #F59E0B;
  border-radius: 20px;
  padding: 10px 22px;
  width: 100%;
}

.pc-cooldown-timer-label {
  font-size: 13px;
  color: #FCD34D;
}

.pc-cooldown-clock {
  font-family: monospace;
  font-size: 42px;
  font-weight: 700;
  color: #38BDF8;
  letter-spacing: 2px;
  margin: 2px 0;
}

.pc-cooldown-sub {
  font-size: 12px;
  color: #94A3B8;
}

.pc-cooldown-tips {
  font-size: 14px;
  background: rgba(56, 189, 248, 0.12);
  border-radius: 14px;
  padding: 8px 12px;
  color: #BAE6FD;
}

.pc-cooldown-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.parent-unlock-btn {
  background: #334155 !important;
  color: #CBD5E1 !important;
}

/* Bàn phím ảo & Micro & Chặn Quảng Cáo trên YouTube PC */
.yt-brand {
  flex: 0 0 auto;
  min-width: auto;
  background: #FF0000;
  color: #fff;
}

.pc-yt-input {
  flex: 1;
  min-width: 170px;
}

.yt-kb-btn {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
}

.yt-mic-btn {
  background: linear-gradient(135deg, #EC4899, #DB2777);
}

.yt-mic-btn.listening {
  background: linear-gradient(135deg, #EF4444, #B91C1C);
  animation: pulse 0.8s infinite;
}

.yt-adshield-btn {
  background: #475569;
}

.yt-adshield-btn.active-shield {
  background: linear-gradient(135deg, #059669, #10B981);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}

.pc-adshield-pill {
  display: inline-block;
  margin-left: 8px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10B981;
  color: #6EE7B7;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.pc-yt-keyboard {
  background: #1E293B;
  border-bottom: 2px solid #334155;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.pc-yt-keyboard.hidden {
  display: none;
}

.pc-kb-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 2px;
}

.pc-kb-chip-label {
  font-size: 12px;
  color: #FDE047;
  font-weight: 700;
}

.pc-kb-chip {
  background: #334155;
  color: #38BDF8;
  border: 1px solid #475569;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pc-kb-chip:hover {
  background: #0284C7;
  color: #fff;
}

.pc-kb-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}

.pc-kb-key {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: #0F172A;
  color: #F8FAFC;
  border: 1.5px solid #475569;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 0 #020617;
  cursor: pointer;
}

.pc-kb-key:active {
  transform: translateY(1px);
  background: #38BDF8;
  color: #0F172A;
}

.pc-kb-key.wide {
  min-width: 110px;
}

.pc-kb-key.go {
  background: linear-gradient(135deg, #00C853, #009624);
  border-color: #69F0AE;
  color: #fff;
}

.pc-yt-search-header {
  width: 100%;
  font-size: 12px;
  color: #FDE047;
  padding: 2px 4px;
}

.pc-yt-loading {
  padding: 16px;
  text-align: center;
  color: #38BDF8;
  font-size: 14px;
}

/* Thông báo khách ghé thăm nhà bất ngờ (Apple, Cô Cúa, Cậu Phúng Súc, Bà nội A Mà, Doraemon, Saja Boys, HUNTR/X) */
.visitor-toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFFDF7, #FCE4EC);
  border: 3px solid #FF5C9D;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #3B234A;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  animation: popIn 0.35s ease;
}

/* ===== BẢN 16: Trang Phục Halloween, Đủ 5 Thành Viên Saja Boys + 3 Nữ Chính HUNTR/X, Nhạc Nền KPop Demon Hunters & Nhạc Sôi Động ===== */
#topBgmBtn.bgm-on {
  background: linear-gradient(135deg, #E040FB, #00E5FF);
  color: #fff;
  box-shadow: 0 3px 0 #7B1FA2, 0 0 12px rgba(224, 64, 251, 0.45);
}

.bgm-modal-card {
  max-width: 580px;
  width: 94vw;
  gap: 12px;
}

.bgm-modal-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  color: #6A1B9A;
  text-align: center;
}

.bgm-modal-head p {
  margin: 0;
  font-size: 14px;
  color: #5C446E;
  text-align: center;
}

.bgm-track-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 48vh;
  overflow-y: auto;
  padding: 2px;
}

.bgm-track-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #F8F0FF;
  border: 2.5px solid #E1BEE7;
  color: #3B234A;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.bgm-track-btn:hover {
  transform: translateY(-1px);
  background: #F3E5F5;
}

.bgm-track-btn.active {
  background: linear-gradient(135deg, #FCE4EC, #E0F7FA);
  border-color: #FF4081;
  box-shadow: 0 4px 12px rgba(255, 64, 129, 0.22);
}

.bgm-tr-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.bgm-tr-name {
  flex: 1;
}

.bgm-tr-status {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(155, 93, 229, 0.15);
  color: #6A1B9A;
  white-space: nowrap;
}

.bgm-track-btn.active .bgm-tr-status {
  background: #FF4081;
  color: #fff;
}

/* ===== BẢN 17: Phòng Trang Điểm Công Chúa (Mini-Game), Túi Xách Thời Trang, Toán Nâng Cao & Không Gian Lễ Hội Halloween + Bóng Ma Bay Lờn Vờn ===== */
#topMakeupBtn {
  background: linear-gradient(135deg, #FF80AB, #F50057);
  color: #fff;
  box-shadow: 0 3px 0 #AD1457;
}

.makeup-open-btn {
  background: linear-gradient(135deg, #FF4081, #AB47BC) !important;
  color: #fff !important;
}

.makeup-card {
  max-width: 880px;
  width: 96vw;
  max-height: 92vh;
  background: linear-gradient(160deg, #FFF0F6, #F3E5F5);
  border: 4px solid #FF80AB;
  gap: 10px;
  padding: 14px 18px;
}

.makeup-header {
  display: flex;
  justify-content: center;
}

.makeup-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items: stretch;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.makeup-mirror-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.makeup-mirror-frame {
  width: 100%;
  background: linear-gradient(180deg, #FCE4EC, #F8BBD0);
  border: 5px solid #FFD54F;
  border-radius: 28px;
  padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(236, 64, 122, 0.25), inset 0 0 18px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.makeup-mirror-bulbs {
  font-size: 16px;
  letter-spacing: 3px;
  filter: drop-shadow(0 0 6px #FFD54F);
}

.makeup-face-stage {
  position: relative;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, #FFFFFF 55%, #FCE4EC 100%);
  border-radius: 50%;
  border: 4px solid #FFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.makeup-face-svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.makeup-face-svg svg {
  width: 100%;
  height: 100%;
}

.makeup-sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mk-sparkle {
  position: absolute;
  font-size: 20px;
  transform: translate(-50%, -50%);
  animation: mkSparklePop 0.65s ease-out forwards;
  pointer-events: none;
}

@keyframes mkSparklePop {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -110%) scale(1.35); opacity: 0; }
}

.makeup-brush-cursor {
  position: absolute;
  font-size: 36px;
  transform: translate(-30%, -70%) rotate(-15deg);
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  z-index: 5;
}

.makeup-zone-hint {
  font-size: 12.5px;
  font-weight: 700;
  color: #880E4F;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 10px;
  border-radius: 12px;
}

.makeup-mirror-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

.makeup-clean-btn {
  background: #E1F5FE !important;
  color: #0277BD !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
}

.makeup-done-btn {
  font-size: 15px !important;
  padding: 8px 16px !important;
  background: linear-gradient(135deg, #FF4081, #7C4DFF) !important;
}

.makeup-palette-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  padding: 10px 12px;
  border: 2px solid #F8BBD0;
  overflow-y: auto;
  min-height: 0;
}

.makeup-tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mk-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 14px;
  background: #FCE4EC;
  border: 2px solid transparent;
  color: #880E4F;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.mk-tab-btn.active {
  background: linear-gradient(135deg, #FF4081, #EC407A);
  color: #fff;
  box-shadow: 0 3px 10px rgba(236, 64, 122, 0.35);
}

.mk-tab-ic {
  font-size: 18px;
}

.makeup-sub-palette {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.mk-sec-title {
  font-size: 13px;
  font-weight: 700;
  color: #6A1B9A;
  margin-top: 2px;
}

.mk-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.mk-swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 16px;
  background: #FFF;
  border: 2.5px solid #F8BBD0;
  color: #4A148C;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.mk-swatch-btn:hover {
  transform: scale(1.03);
}

.mk-swatch-btn.selected {
  border-color: #FF4081;
  background: #FFF0F6;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.22);
}

.mk-color-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.mk-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F3E5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.mk-mini-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 2px 4px;
}

.mk-color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.mk-color-dot.selected {
  outline: 3px solid #FF4081;
  transform: scale(1.12);
}

@media (max-width: 720px) {
  .makeup-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .makeup-face-stage {
    width: 175px;
    height: 175px;
  }
}

/* Ông Già Noel cưỡi tuần lộc bay qua bầu trời phát quà Giáng Sinh */
.roaming-santa {
  position: fixed;
  z-index: 38;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 248, 225, 0.92), rgba(211, 47, 47, 0.35));
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.78);
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 6px 12px rgba(183, 28, 28, 0.45));
}

.roaming-santa .rs-body {
  font-size: 36px;
  line-height: 1;
  animation: santaBob 1.6s ease-in-out infinite;
}

.roaming-santa .rs-trail {
  font-size: 20px;
  opacity: 0.95;
}

.roaming-santa.from-left {
  left: -160px;
  animation: santaFlyRight 11.5s linear forwards;
}

.roaming-santa.from-right {
  right: -160px;
  animation: santaFlyLeft 11.5s linear forwards;
}

@keyframes santaBob {
  0%, 100% { transform: translateY(-5px) rotate(-4deg); }
  50% { transform: translateY(6px) rotate(4deg); }
}

@keyframes santaFlyRight {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.96; }
  35% { transform: translate(36vw, -22px); }
  65% { transform: translate(72vw, 18px); }
  90% { opacity: 0.96; }
  100% { transform: translate(118vw, -16px); opacity: 0; }
}

@keyframes santaFlyLeft {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.96; }
  35% { transform: translate(-36vw, 20px); }
  65% { transform: translate(-72vw, -18px); }
  90% { opacity: 0.96; }
  100% { transform: translate(-118vw, 16px); opacity: 0; }
}

/* ============================================================================
   TRUNG TÂM THƯƠNG MẠI GIÁNG SINH (MEGA MALL)
   ============================================================================ */
.mall-card {
  width: 97vw;
  max-width: 980px;
  height: 92vh;
  max-height: 760px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFDF9 0%, #FFF3E0 100%);
  border: 4px solid #D32F2F;
  box-shadow: 0 18px 48px rgba(183, 28, 28, 0.35);
}

.mall-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #B71C1C, #D32F2F 50%, #1B5E20);
  color: #fff;
  flex-shrink: 0;
}

.mall-title-box {
  font-size: 20px;
  font-weight: 800;
  color: #FFF9C4;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.mall-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mall-star-pill {
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid #FFD54F;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  color: #FFF9C4;
}

.mall-nav-btn,
.mall-close-btn {
  background: #FFD54F;
  color: #5D4037;
  font-weight: 800;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 3px 0 #F57F17;
  cursor: pointer;
}

.mall-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mall-lobby-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #FFEBEE, #E8F5E9);
  border: 3px solid #EF5350;
  border-radius: 22px;
  padding: 12px 18px;
}

.mall-hero-av {
  width: 78px;
  height: 104px;
  flex-shrink: 0;
}

.mall-hero-av svg {
  width: 100%;
  height: 100%;
}

.mall-hero-text h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #B71C1C;
}

.mall-hero-text p {
  margin: 0;
  font-size: 14.5px;
  color: #2E7D32;
}

.mall-hero-decor {
  font-size: 32px;
  margin-left: auto;
  white-space: nowrap;
}

.mall-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.mall-zone-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  color: #fff;
  text-align: left;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: transform 0.14s ease;
}

.mall-zone-card:hover,
.mall-zone-card:active {
  transform: translateY(-3px) scale(1.02);
}

.mz-icon {
  font-size: 44px;
  background: rgba(255, 255, 255, 0.24);
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mz-info {
  flex: 1;
}

.mz-name {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 3px;
}

.mz-badge {
  font-size: 13px;
  opacity: 0.94;
}

.mz-go {
  background: rgba(0, 0, 0, 0.24);
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.mall-zone-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.mall-panel {
  background: #FFFFFF;
  border: 2.5px solid #FFCDD2;
  border-radius: 22px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mall-panel-title {
  font-size: 16px;
  font-weight: 800;
  color: #B71C1C;
  text-align: center;
}

/* 1. Shop Đồ Chơi & Máy Gắp Thú */
.toy-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.toy-item-card {
  background: #FFF8E1;
  border: 2px solid #FFE082;
  border-radius: 16px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.toy-ic { font-size: 34px; }
.toy-vi { font-size: 12.5px; font-weight: 700; color: #4E342E; }
.toy-en { font-size: 12px; font-weight: 800; color: #D81B60; }

.toy-stage-msg {
  background: #FFF3E0;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  font-size: 14.5px;
  color: #4E342E;
}

.claw-machine {
  position: relative;
  height: 195px;
  background: linear-gradient(180deg, #E1F5FE 0%, #FFF9C4 78%, #F8BBD0 100%);
  border: 4px solid #FF4081;
  border-radius: 20px;
  overflow: hidden;
}

.claw-rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: #AD1457;
}

.claw-arm {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 0.22s ease;
}

.claw-cable {
  width: 4px;
  height: 18px;
  background: #37474F;
  transition: height 0.5s ease;
}

.claw-gripper {
  font-size: 30px;
  line-height: 1;
}

.claw-held {
  font-size: 32px;
  margin-top: -6px;
}

.claw-prizes {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 54px;
}

.claw-prize-item {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 42px;
  transition: opacity 0.25s;
}

.claw-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.claw-drop-btn {
  background: linear-gradient(135deg, #FF4081, #FF9100) !important;
}

/* 2. Shop Trang Phục & Salon */
.boutique-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  min-height: 0;
}

.boutique-preview-col {
  background: linear-gradient(180deg, #FCE4EC, #F3E5F5);
  border: 3px solid #F48FB1;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.boutique-avatar-stage {
  width: 170px;
  height: 240px;
}

.boutique-avatar-stage svg {
  width: 100%;
  height: 100%;
}

.boutique-quick-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.boutique-catalog-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 2.5px solid #F8BBD0;
  border-radius: 22px;
  padding: 10px 12px;
  overflow-y: auto;
}

.boutique-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.boutique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 8px;
  overflow-y: auto;
}

.boutique-item-card {
  background: #FFF9FB;
  border: 2.5px solid #F8BBD0;
  border-radius: 16px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.boutique-item-card.equipped {
  border-color: #FF4081;
  background: #FCE4EC;
}

.bi-preview {
  width: 74px;
  height: 98px;
}

.bi-preview svg {
  width: 100%;
  height: 100%;
}

.bi-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #4A148C;
  text-align: center;
}

.bi-tag {
  font-size: 12px;
  font-weight: 800;
  color: #D81B60;
  background: #FFF0F6;
  padding: 2px 8px;
  border-radius: 999px;
}

/* 3. Khu Ẩm Thực (Food Court) */
.food-customer-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFF8E1;
  border: 2px solid #FFD54F;
  border-radius: 18px;
  padding: 10px 14px;
  flex-wrap: wrap;
}

.fc-av {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #FFB300;
  overflow: hidden;
  flex-shrink: 0;
}

.fc-av svg { width: 100%; height: 100%; }
.fc-speech { flex: 1; min-width: 180px; }
.fc-name { font-size: 15px; margin-bottom: 4px; color: #BF360C; }
.fc-items { display: flex; gap: 6px; flex-wrap: wrap; }

.food-need-pill {
  background: #FFFFFF;
  border: 2px solid #FFB74D;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
}

.food-need-pill.done {
  background: #E8F5E9;
  border-color: #4CAF50;
  color: #1B5E20;
}

.food-tray-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #FCE4EC;
  padding: 8px 14px;
  border-radius: 14px;
  font-weight: 700;
}

.tray-slot {
  font-size: 28px;
  margin: 0 4px;
}

.food-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.food-menu-card {
  background: #FFFDE7;
  border: 2px solid #FFE082;
  border-radius: 16px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.fm-icon { font-size: 36px; }
.fm-vi { font-size: 13px; font-weight: 700; color: #3E2723; }
.fm-en { font-size: 12px; font-weight: 800; color: #E65100; }

/* 4. Phòng Tập Gym */
.gym-tabs, .tini-sub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.gym-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: linear-gradient(180deg, #E0F7FA, #E8F5E9);
  border: 3px solid #26A69A;
  border-radius: 22px;
  padding: 14px;
  flex-wrap: wrap;
}

.gym-avatar-box {
  width: 135px;
  height: 190px;
}
.gym-avatar-box svg { width: 100%; height: 100%; }
.gym-avatar-box.gym-bounce {
  animation: gymJump 0.42s ease;
}
@keyframes gymJump {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-22px) scale(1.06); }
}

.gym-equip-badge { font-size: 56px; }
.gym-tree-lights {
  font-size: 22px;
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid #80CBC4;
}

.gym-progress-bar {
  height: 18px;
  background: #ECEFF1;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #B0BEC5;
}

.gym-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00C853, #FFD600, #FF4081);
  transition: width 0.25s ease;
}

.gym-counter-txt {
  text-align: center;
  font-size: 15px;
}

.gym-action-btn {
  align-self: center;
  background: linear-gradient(135deg, #00C853, #0097A7) !important;
}

/* 5. Khu Vui Chơi TiniWorld */
.ballpit-arena {
  position: relative;
  min-height: 220px;
  background: linear-gradient(180deg, #FFF9C4 0%, #E1F5FE 100%);
  border: 4px solid #29B6F6;
  border-radius: 24px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.ballpit-avatar {
  width: 110px;
  height: 155px;
  margin-bottom: -28px;
  z-index: 2;
  transition: transform 0.35s ease;
}
.ballpit-avatar svg { width: 100%; height: 100%; }
.ballpit-avatar.dive {
  animation: pitDive 0.65s ease;
}
@keyframes pitDive {
  0% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-48px) rotate(-12deg) scale(1.08); }
  80% { transform: translateY(18px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.ballpit-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  z-index: 3;
}

.pit-ball {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
  font-size: 22px;
  cursor: pointer;
}
.pit-ball.treasure {
  background: #FFF9C4 !important;
  border-color: #FFD600;
  transform: scale(1.12);
}

.ballpit-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Cầu tuột */
.slide-park {
  position: relative;
  height: 220px;
  background: linear-gradient(180deg, #E1F5FE, #FFF9C4);
  border: 3px solid #FF80AB;
  border-radius: 22px;
  overflow: hidden;
}
.slide-tower {
  position: absolute;
  top: 10px;
  left: 16px;
  background: #AD1457;
  color: #fff;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 12px;
}
.slide-chute {
  position: absolute;
  top: 42px;
  left: 60px;
  width: 68%;
  height: 36px;
  background: repeating-linear-gradient(45deg, #FF4081 0 20px, #FFD54F 20px 40px, #00E5FF 40px 60px);
  border-radius: 20px;
  transform: rotate(20deg);
  transform-origin: left center;
  border: 3px solid #fff;
}
.slide-pool {
  position: absolute;
  bottom: 10px;
  right: 16px;
  background: #0288D1;
  color: #fff;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
}
.slide-avatar {
  position: absolute;
  width: 86px;
  height: 124px;
  transition: all 0.75s cubic-bezier(0.35, 0.8, 0.4, 1);
}
.slide-avatar svg { width: 100%; height: 100%; }
.slide-avatar.at-top {
  top: 6px;
  left: 38px;
}
.slide-avatar.sliding-down {
  top: 86px;
  left: 68%;
  transform: rotate(16deg);
}

/* Leo dốc núi đá */
.climb-wall {
  position: relative;
  height: 245px;
  background: linear-gradient(180deg, #D7CCC8, #A1887F);
  border: 4px solid #6D4C41;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  overflow: hidden;
}
.climb-summit {
  background: #FFD600;
  color: #3E2723;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 999px;
  z-index: 2;
}
.climb-holds {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 240px;
  z-index: 2;
}
.climb-hold-btn {
  padding: 5px 12px;
  border-radius: 999px;
  background: #EFEBE9;
  color: #4E342E;
  font-weight: 800;
  font-size: 13px;
  border: 2px solid #8D6E63;
  cursor: pointer;
}
.climb-hold-btn.next-hold {
  background: #FFD600;
  border-color: #FF6D00;
  box-shadow: 0 0 14px #FFD600;
  transform: scale(1.06);
}
.climb-hold-btn.done-hold {
  background: #A5D6A7;
  border-color: #2E7D32;
}
.climb-avatar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 104px;
  transition: all 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.climb-avatar svg { width: 100%; height: 100%; }

/* Tô tượng thạch cao */
.statue-models {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.active-pill {
  background: linear-gradient(135deg, #FF4081, #7C4DFF) !important;
  color: #fff !important;
}
.statue-workspace {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 14px;
  align-items: center;
}
.statue-canvas-box {
  background: #F8FAFC;
  border: 3px solid #CBD5E1;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.statue-svg {
  width: 175px;
  height: 205px;
}
.statue-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-align: center;
}
.statue-palette-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.statue-colors {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.statue-color-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}
.statue-color-btn.selected {
  outline: 4px solid #FF4081;
  transform: scale(1.12);
}

/* 6. Phòng Game Squid Game Nhí */
.rlgl-track {
  position: relative;
  height: 205px;
  background: linear-gradient(90deg, #C8E6C9 0%, #FFF9C4 82%, #FFCDD2 100%);
  border: 4px solid #388E3C;
  border-radius: 22px;
  overflow: hidden;
}
.rlgl-light-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  z-index: 3;
}
.rlgl-light-badge.green { background: #00C853; color: #fff; }
.rlgl-light-badge.yellow { background: #FFD600; color: #3E2723; }
.rlgl-light-badge.red { background: #D50000; color: #fff; box-shadow: 0 0 18px #FF1744; }
.rlgl-start-line, .rlgl-finish-line {
  position: absolute;
  bottom: 10px;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
}
.rlgl-start-line { left: 10px; }
.rlgl-finish-line { right: 12px; color: #C62828; }
.rlgl-doll {
  position: absolute;
  right: 18px;
  top: 52px;
  font-size: 54px;
  transition: transform 0.25s ease;
}
.rlgl-doll.facing-away { transform: scaleX(-1); opacity: 0.85; }
.rlgl-doll.facing-player { transform: scale(1.14); filter: drop-shadow(0 0 10px #FF1744); }
.rlgl-runner {
  position: absolute;
  bottom: 18px;
  width: 82px;
  height: 118px;
  transition: left 0.22s ease;
}
.rlgl-runner svg { width: 100%; height: 100%; }
.rlgl-run-btn {
  background: linear-gradient(135deg, #00C853, #00B0FF) !important;
}

/* Cầu kính pha lê */
.bridge-arena {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #1A237E, #311B92);
  padding: 12px 16px;
  border-radius: 22px;
  border: 3px solid #00E5FF;
}
.bridge-step-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.bridge-step-row.current-row {
  transform: scale(1.03);
}
.bridge-step-num {
  color: #FFF59D;
  font-weight: 800;
  width: 68px;
}
.bridge-glass-pane {
  flex: 1;
  max-width: 210px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(179, 229, 252, 0.28);
  border: 2.5px solid #80D8FF;
  color: #E0F7FA;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.bridge-glass-pane.hint-safe {
  background: rgba(255, 245, 157, 0.45);
  border-color: #FFD600;
  color: #FFF9C4;
  box-shadow: 0 0 14px #FFD600;
}
.bridge-glass-pane.passed {
  background: rgba(105, 240, 174, 0.45);
  border-color: #00E676;
  color: #fff;
}
.bridge-glass-pane.cracked {
  background: rgba(255, 82, 82, 0.45);
  border-color: #FF5252;
}

/* Kẹo đường Dalgona */
.dalgona-board-wrap {
  display: flex;
  justify-content: center;
  padding: 8px;
}
.dalgona-cookie {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFCC80 55%, #F57C00 100%);
  border: 6px solid #E65100;
  box-shadow: 0 8px 20px rgba(230, 81, 0, 0.3), inset 0 0 18px rgba(255, 255, 255, 0.45);
}
.dalgona-svg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dalgona-svg-layer svg {
  width: 100%;
  height: 100%;
}
.dalgona-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFF9C4;
  border: 2.5px solid #D84315;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dalgona-dot.done {
  background: #00E676;
  border-color: #1B5E20;
  color: #fff;
}

@media (max-width: 720px) {
  .boutique-wrap,
  .statue-workspace,
  .dentist-stage-row,
  .nails-main-row {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   VORTELLA'S DRESS UP 3D CONTROLS & TỐI ƯU MÁY TÍNH BẢNG XIAOMI PAD 5 PRO (2560x1600 120Hz)
   ========================================================================= */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.world3d canvas {
  will-change: contents;
  transform: translateZ(0);
}
.vortella-dock {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 25;
}
.vortella-dock button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(34, 24, 48, 0.84);
  color: #FFFFFF;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.14s, background 0.14s;
}
.vortella-dock button:active {
  transform: scale(0.9);
  background: #EC407A;
}

.stick {
  position: absolute;
  width: 118px;
  height: 118px;
  margin: -59px 0 0 -59px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.48) 0%, rgba(244, 143, 177, 0.42) 100%);
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(136, 14, 79, 0.24);
  z-index: 24;
  pointer-events: none;
  will-change: left, top;
}
.stick .stick-knob {
  background: linear-gradient(135deg, #FF80AB, #EC407A);
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(216, 27, 96, 0.45);
  will-change: transform;
}

/* =========================================================================
   DIVA HAIR SALON & MAKEUP STUDIO
   ========================================================================= */
.salon-makeup-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.salon-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-right: 36px;
}
.salon-mode-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 2.5px solid #F48FB1;
  background: #FFF0F5;
  color: #880E4F;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s;
}
.salon-mode-btn.active {
  background: linear-gradient(135deg, #EC407A, #7C4DFF);
  color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(236, 64, 122, 0.4);
  transform: scale(1.03);
}
.hair-foam-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hair-soap-bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: soapPop 1.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(0, 176, 255, 0.35));
}
@keyframes soapPop {
  from { transform: translate(-50%, -50%) scale(0.92); }
  to   { transform: translate(-50%, -55%) scale(1.12); }
}

/* =========================================================================
   PHÒNG KHÁM NHA KHOA NHÍ (BECOME A DENTIST)
   ========================================================================= */
.dentist-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dentist-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #E0F7FA;
  border: 2px solid #80DEEA;
  border-radius: 18px;
  padding: 8px 12px;
}
.dentist-patients {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dentist-pt-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #4DD0E1;
  background: #FFFFFF;
  color: #006064;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dentist-pt-btn.active {
  background: linear-gradient(135deg, #00ACC1, #26A69A);
  color: #FFFFFF;
  border-color: #004D40;
}
.dentist-status-pill {
  background: #FFF9C4;
  border: 2px solid #FBC02D;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #5D4037;
}
.dentist-stage-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px;
  align-items: start;
}
.dentist-mouth-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dentist-speech {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF8E1;
  border: 2px solid #FFE082;
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 14px;
  color: #4E342E;
}
.dentist-pt-av {
  font-size: 34px;
}
.dentist-mouth-frame {
  position: relative;
  background: radial-gradient(circle at 50% 50%, #880E4F 0%, #4A0E2E 100%);
  border: 14px solid #F06292;
  border-radius: 90px;
  padding: 16px 22px;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(233, 30, 99, 0.25);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.dentist-jaw {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  z-index: 3;
  padding: 4px 10px;
  background: rgba(244, 143, 177, 0.35);
  border-radius: 26px;
}
.dentist-tooth {
  position: relative;
  height: 58px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F8E9 100%);
  border: 2.5px solid #CFD8DC;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.14s, background 0.2s;
}
.dentist-tooth:hover,
.dentist-tooth:active {
  transform: scale(1.07);
}
.dentist-tooth.upper-tooth {
  border-radius: 8px 8px 18px 18px;
}
.dentist-tooth.lower-tooth {
  border-radius: 18px 18px 8px 8px;
}
.dentist-tooth.plaque-heavy {
  background: linear-gradient(180deg, #FFF59D 0%, #FBC02D 100%);
  border-color: #F57F17;
}
.dentist-tooth.plaque-light {
  background: linear-gradient(180deg, #FFFDE7 0%, #FFF176 100%);
}
.dentist-tooth.tooth-rotten {
  background: linear-gradient(180deg, #616161 0%, #263238 100%);
  border-color: #212121;
  animation: wiggleTooth 0.6s ease-in-out infinite alternate;
}
.dentist-tooth.tooth-empty {
  background: rgba(255, 255, 255, 0.18);
  border: 2.5px dashed #80DEEA;
}
@keyframes wiggleTooth {
  from { transform: rotate(-4deg); }
  to   { transform: rotate(4deg); }
}
.tooth-cavity {
  font-size: 22px;
  animation: pulse 0.9s infinite alternate;
}
.tooth-filling {
  font-size: 11px;
  font-weight: 800;
  color: #0277BD;
  background: #E1F5FE;
  padding: 2px 5px;
  border-radius: 8px;
}
.tooth-food {
  position: absolute;
  bottom: 2px;
  right: 2px;
  font-size: 19px;
}
.tooth-gem {
  font-size: 20px;
}
.tooth-shine {
  font-size: 14px;
  opacity: 0.75;
}
.tooth-slot-hint {
  font-size: 11px;
  font-weight: 800;
  color: #E0F7FA;
  text-align: center;
}
.dentist-throat {
  position: relative;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.dentist-uvula {
  position: absolute;
  top: 0;
  width: 24px;
  height: 30px;
  background: #EC407A;
  border-radius: 0 0 14px 14px;
}
.dentist-tongue {
  width: 66%;
  height: 58px;
  background: radial-gradient(circle at 50% 30%, #FF80AB 0%, #D81B60 100%);
  border-radius: 50% 50% 24px 24px;
  border-top: 3px solid #F8BBD0;
}
.dentist-droplet-layer,
.dentist-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dentist-droplet {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: rgba(225, 245, 254, 0.85);
  border: 2px solid #00B0FF;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 18px;
  cursor: pointer;
  animation: floatDrop 1.1s ease-in-out infinite alternate;
}
@keyframes floatDrop {
  from { transform: translate(-50%, -50%) scale(0.95); }
  to   { transform: translate(-50%, -58%) scale(1.08); }
}
.dentist-sparkle {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 24px;
  pointer-events: none;
  animation: mkSparklePop 0.65s ease-out forwards;
}
.dentist-floating-tool {
  position: absolute;
  transform: translate(-30%, -30%);
  font-size: 34px;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}
.dentist-hint-banner {
  background: #E0F2F1;
  border: 2px solid #4DB6AC;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 14px;
  color: #004D40;
  text-align: center;
}
.dentist-tools-col {
  background: #FFFFFF;
  border: 2.5px solid #B2EBF2;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dentist-tray-title {
  font-size: 16px;
  font-weight: 800;
  color: #006064;
  text-align: center;
}
.dentist-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dentist-tool-btn {
  position: relative;
  background: #F0FDF4;
  border: 2.5px solid #A7F3D0;
  border-radius: 16px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.dentist-tool-btn.active {
  background: linear-gradient(135deg, #00B0FF, #00BFA5);
  color: #FFFFFF;
  border-color: #004D40;
  transform: scale(1.03);
}
.dentist-tool-btn.needed {
  border-color: #FF4081;
}
.dt-ic { font-size: 30px; }
.dt-nm { font-size: 13.5px; font-weight: 800; }
.dt-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  background: #FF4081;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}
.dentist-gem-bar {
  background: #FCE4EC;
  border-radius: 14px;
  padding: 8px 10px;
}
.gem-bar-label {
  font-size: 13px;
  font-weight: 800;
  color: #880E4F;
  margin-bottom: 6px;
}
.gem-bar-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gem-pick-btn {
  padding: 5px 10px;
  border-radius: 999px;
  border: 2px solid #F48FB1;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.gem-pick-btn.active {
  background: #EC407A;
  color: #FFFFFF;
}
.dentist-action-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================================================================
   TIỆM LÀM NAIL NGHỆ THUẬT (NAILS DIY: MANICURE MASTER)
   ========================================================================= */
.nails-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nails-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #FCE4EC;
  border: 2px solid #F48FB1;
  border-radius: 18px;
  padding: 8px 12px;
}
.nails-mode-toggle {
  display: flex;
  gap: 6px;
}
.nails-mode-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #F06292;
  background: #FFFFFF;
  color: #880E4F;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
.nails-mode-btn.active {
  background: #EC407A;
  color: #FFFFFF;
}
.nails-uv-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 2px solid #7C4DFF;
  background: linear-gradient(135deg, #B388FF, #7C4DFF);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(124, 77, 255, 0.35);
}
.nails-main-row {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr;
  gap: 14px;
  align-items: start;
}
.nails-hand-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nails-hand-pillow {
  position: relative;
  background: radial-gradient(circle at 50% 45%, #FFF0F5 0%, #F8BBD0 100%);
  border: 5px solid #F06292;
  border-radius: 28px;
  padding: 10px;
  min-height: 295px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 4px 16px rgba(255, 255, 255, 0.8), 0 8px 20px rgba(236, 64, 122, 0.2);
  overflow: hidden;
}
.nails-hand-svg-wrap {
  width: 100%;
  max-width: 390px;
}
.nails-hand-svg {
  width: 100%;
  height: auto;
  display: block;
}
.nail-finger-group {
  cursor: pointer;
  transition: filter 0.15s;
}
.nail-finger-group:hover {
  filter: drop-shadow(0 0 6px rgba(255, 64, 129, 0.55));
}
.nails-uv-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(179, 136, 255, 0.52) 0%, rgba(124, 77, 255, 0.72) 100%);
  z-index: 8;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16px;
  animation: pulse 0.5s infinite alternate;
}
.uv-lamp-bar {
  background: #311B92;
  color: #E0F7FA;
  border: 2px solid #00E5FF;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 0 20px #00E5FF;
}
.nails-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}
.nails-finger-bar {
  display: flex;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}
.nails-finger-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid #F48FB1;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 800;
  color: #880E4F;
  cursor: pointer;
}
.nails-finger-chip.active {
  background: #D81B60;
  color: #FFFFFF;
}
.nails-hint-box {
  background: #FFF8E1;
  border: 2px solid #FFE082;
  border-radius: 14px;
  padding: 7px 10px;
  font-size: 13.5px;
  color: #5D4037;
  text-align: center;
}
.nails-palette-col {
  background: #FFFFFF;
  border: 2.5px solid #F8BBD0;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nails-step-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nails-sub-panel {
  max-height: 310px;
  overflow-y: auto;
  padding-right: 4px;
}
.nails-prep-desc {
  font-size: 14px;
  color: #880E4F;
  margin: 0 0 8px;
  text-align: center;
  font-weight: 700;
}








/* =========================================================================
   NHÂN VẬT CHIBI 3D TRÊN GIAO DIỆN (tủ đồ, shop thời trang)
   ========================================================================= */
.avatar3d-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
  cursor: grab;
}
.dress-preview:has(.avatar3d-canvas) {
  padding: 0;
  min-height: 360px;
  overflow: hidden;
}
.boutique-avatar-stage {
  width: 200px;
  height: 300px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 40%, #FFFFFF, #FCE4EC 75%);
  overflow: hidden;
}
.avatar-3d image { image-rendering: auto; }


/* =========================================================================
   KHU SINH HOẠT GIA ĐÌNH · SPA THÚ CƯNG · LÂU ĐÀI MINI-GAME · NHÀ HÁT PIANO
   ========================================================================= */
.new-feat-btn {
  background: linear-gradient(135deg, #FFF3E0, #FCE4EC) !important;
  border: 2px solid #FF80AB !important;
  box-shadow: 0 3px 10px rgba(255, 64, 129, 0.25);
}

.liferoom-card, .mg-card, .ms-card {
  width: min(96vw, 980px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF9FC 0%, #F3F8FF 100%);
}

.liferoom-head, .mg-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 40px;
}

.liferoom-title, .mg-title {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 800;
  color: #6A1B9A;
}

.liferoom-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.liferoom-tab-btn {
  background: #FFFFFF;
  border: 2px solid #E1BEE7;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 800;
  color: #4A148C;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.14s ease, background 0.15s;
}

.liferoom-tab-btn.active {
  background: linear-gradient(135deg, #EC407A, #7C4DFF);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3);
}

.liferoom-body, .mg-body, .ms-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.lr-banner, .mg-sub-hud {
  background: linear-gradient(90deg, #FCE4EC, #E8EAF6);
  border: 2px solid #F8BBD0;
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #311B92;
}

.lr-star-pill, .mg-stars-now {
  background: #FFF9C4;
  border: 2px solid #FFD54F;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 800;
  color: #E65100;
  white-space: nowrap;
}

/* 1. Phòng Tắm Bong Bóng */
.bath-stage {
  position: relative;
  height: 240px;
  background: linear-gradient(180deg, #E1F5FE 0%, #FCE4EC 100%);
  border: 3px solid #80DEEA;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.bath-shower-rain {
  position: absolute;
  top: 8px;
  font-size: 26px;
  letter-spacing: 8px;
  animation: rainDrop 0.6s infinite linear;
  z-index: 6;
}
@keyframes rainDrop {
  0% { transform: translateY(-6px); opacity: 0.7; }
  100% { transform: translateY(22px); opacity: 1; }
}

.bath-avatar-wrap {
  position: relative;
  width: 126px;
  height: 175px;
  margin-bottom: -36px;
  z-index: 2;
}
.bath-char, .bath-char svg { width: 100%; height: 100%; }

.bath-shampoo-crown {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  white-space: nowrap;
  z-index: 5;
}

.bath-towel-wrap {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFF9C4;
  border: 2px solid #FFB300;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  z-index: 5;
}

.bath-tub {
  position: relative;
  width: min(86%, 460px);
  height: 92px;
  background: #FFFFFF;
  border: 4px solid #F48FB1;
  border-radius: 20px 20px 44px 44px;
  z-index: 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(236, 64, 122, 0.18);
}

.bath-water {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(79, 195, 247, 0.65), rgba(41, 182, 246, 0.85));
  transition: height 0.6s ease;
}
.bath-water.filled { height: 82%; }

.bath-duck {
  position: absolute;
  right: 26px;
  top: 6px;
  font-size: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 4;
}

.bath-tub-front {
  position: relative;
  z-index: 4;
  font-weight: 800;
  color: #AD1457;
  background: rgba(255, 255, 255, 0.86);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13.5px;
}

.bath-bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.soap-bubble {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(224,247,250,0.55));
  border: 2.5px solid #FF80AB;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  animation: floatBub 2.4s ease-in-out infinite alternate;
}
@keyframes floatBub {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-14px) scale(1.08); }
}

.lr-status-msg {
  background: #FFF8E1;
  border: 2px solid #FFE082;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  font-size: 14.5px;
  color: #4E342E;
}

.lr-tools-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.lr-tool-btn {
  background: #FFFFFF;
  border: 2.5px solid #CE93D8;
  border-radius: 18px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 128px;
  cursor: pointer;
  transition: transform 0.14s;
}
.lr-tool-btn.ready:hover, .lr-tool-btn.active-tool {
  border-color: #FF4081;
  background: #FCE4EC;
  transform: translateY(-2px);
}
.lr-tool-btn.disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.lr-tool-ic { font-size: 28px; }
.lr-tool-lbl { font-size: 13px; font-weight: 800; color: #4A148C; }

/* 2. Spa Thú Cưng */
.pet-picker-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.pet-chip {
  background: #FFFFFF;
  border: 2px solid #F48FB1;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: #880E4F;
  cursor: pointer;
}
.pet-chip.active {
  background: #FF4081;
  color: #FFFFFF;
  border-color: #FF4081;
}

.pet-care-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 680px) {
  .pet-care-grid, .photo-studio-grid { grid-template-columns: 1fr; }
}

.pet-avatar-card {
  background: radial-gradient(circle at 50% 45%, #FFFFFF, #FCE4EC);
  border: 3px solid #F48FB1;
  border-radius: 22px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pet-svg-box {
  width: 165px;
  height: 175px;
  cursor: pointer;
}
.pet-svg-box svg { width: 100%; height: 100%; }

.pet-name-tag { font-size: 14px; color: #4A148C; text-align: center; }

.pet-acc-bar {
  display: flex;
  gap: 6px;
}
.pet-acc-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #CE93D8;
  background: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
}
.pet-acc-btn.active {
  background: #FFF59D;
  border-color: #FF9800;
  transform: scale(1.1);
}

.pet-actions-card {
  background: #FFFFFF;
  border: 2.5px solid #E1BEE7;
  border-radius: 22px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.pet-meters { display: flex; flex-direction: column; gap: 7px; }
.pet-meter-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; }
.pm-lbl { width: 108px; color: #37474F; }
.pm-bar { flex: 1; height: 14px; background: #ECEFF1; border-radius: 999px; overflow: hidden; }
.pm-fill { height: 100%; border-radius: 999px; transition: width 0.35s ease; }
.pm-val { width: 42px; text-align: right; color: #6A1B9A; }

.pet-care-msg {
  background: #F3E5F5;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  text-align: center;
  color: #4A148C;
}

.pet-station-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 8px;
}
.pet-act-btn {
  background: #FFF9FB;
  border: 2px solid #F8BBD0;
  border-radius: 16px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s;
}
.pet-act-btn:active { transform: scale(0.97); }
.pa-ic { font-size: 28px; }

/* 3. Gian Bếp Đầu Bếp Nhí */
.chef-bowl-box {
  background: #FFFFFF;
  border: 3px solid #FFCC80;
  border-radius: 22px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.chef-step-tag { font-size: 15px; font-weight: 800; color: #E65100; }
.chef-bowl {
  font-size: 48px;
  background: #FFF8E1;
  border: 3px dashed #FFB74D;
  border-radius: 999px;
  padding: 10px 28px;
}
.chef-ings-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chef-ing-btn {
  background: #FFFDE7;
  border: 2.5px solid #FFD54F;
  border-radius: 18px;
  padding: 10px 14px;
  min-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.chef-ing-btn.done { opacity: 0.42; background: #E8F5E9; border-color: #81C784; }
.ci-ic { font-size: 34px; }

.chef-oven-emoji { font-size: 52px; }
.chef-heat-track {
  position: relative;
  width: min(90%, 420px);
  height: 36px;
  background: linear-gradient(90deg, #81D4FA 0%, #FFE082 28%, #00E676 50%, #FFE082 72%, #FF8A80 100%);
  border: 3px solid #5D4037;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chef-heat-gold {
  width: 40%;
  height: 100%;
  border-left: 3px dashed #1B5E20;
  border-right: 3px dashed #1B5E20;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: #1B5E20;
}
.chef-heat-needle {
  position: absolute;
  top: -18px;
  transform: translateX(-50%);
  font-size: 26px;
}

.chef-plate {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 58%, #FFE0B2 100%);
  border: 4px solid #FFB74D;
  display: grid;
  place-items: center;
}
.chef-main-dish { font-size: 68px; }
.chef-toppings-layer { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.chef-top-sp { position: absolute; font-size: 24px; }
.chef-top-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chef-top-btn {
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 2px solid #F48FB1;
  background: #FFF9FB;
  font-size: 24px;
  cursor: pointer;
}
.chef-guest-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chef-guest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FCE4EC;
  border: 2px solid #F48FB1;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13.5px;
}
.cg-face { width: 34px; height: 34px; border-radius: 50%; background: #fff; overflow: hidden; display: inline-block; }
.cg-face svg { width: 100%; height: 100%; }
.cg-big-face { width: 92px; height: 92px; margin: 0 auto; }
.cg-big-face svg { width: 100%; height: 100%; }
.chef-win-dish { font-size: 46px; }

/* 4. Nhà Kính Trồng Cây */
.farm-controls { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.farm-seed-bag, .farm-tool-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lr-tool-btn.compact { flex-direction: row; min-width: auto; padding: 7px 14px; gap: 6px; }

.farm-pots-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .farm-pots-grid { grid-template-columns: repeat(2, 1fr); }
}

.farm-pot-card {
  position: relative;
  background: linear-gradient(180deg, #E8F5E9, #FFFDE7);
  border: 3px solid #A5D6A7;
  border-radius: 20px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 155px;
  justify-content: flex-end;
}
.farm-pot-card.stage-3 { border-color: #FFB300; background: linear-gradient(180deg, #FFF9C4, #FCE4EC); }
.fp-plant { font-size: 40px; min-height: 50px; display: grid; place-items: center; }
.fp-pot { font-size: 20px; font-weight: 800; color: #6D4C41; }
.fp-hint { font-size: 12px; color: #2E7D32; font-weight: 700; }
.fp-bug {
  position: absolute;
  top: 8px;
  background: #FFCDD2;
  border: 2px solid #E53935;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
  color: #B71C1C;
}
.farm-basket-bar {
  background: #E8F5E9;
  border: 2px solid #81C784;
  border-radius: 14px;
  padding: 8px 14px;
  text-align: center;
  color: #1B5E20;
}

/* =========================================================================
   LÂU ĐÀI SIÊU MINI-GAME & TÚI MÙ
   ========================================================================= */
.mg-lobby-hero {
  background: linear-gradient(90deg, #FFF3E0, #F3E5F5);
  border: 2px solid #CE93D8;
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 14.5px;
  color: #4A148C;
  text-align: center;
}

.mg-lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 12px;
}

.mg-game-card {
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  padding: 14px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  transition: transform 0.14s ease;
}
.mg-game-card:hover, .mg-game-card:active { transform: translateY(-3px) scale(1.015); }
.mgg-ic {
  font-size: 42px;
  width: 68px; height: 68px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.mgg-name { font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.mgg-desc { font-size: 12.5px; opacity: 0.95; margin-bottom: 6px; }
.mgg-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.26);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.active-mode {
  background: #7C4DFF !important;
  color: #FFFFFF !important;
}

/* 1. Hứng Quà Giáng Sinh */
.cg-arena {
  position: relative;
  height: 310px;
  background: linear-gradient(180deg, #1A237E 0%, #3949AB 65%, #E8EAF6 92%, #FFFFFF 100%);
  border: 3px solid #7986CB;
  border-radius: 22px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.cg-santa {
  position: absolute;
  top: 8px;
  font-size: 32px;
  transform: translateX(-50%);
  pointer-events: none;
}
.cg-player {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.cg-player.frozen { filter: hue-rotate(160deg) brightness(1.2); }
.cg-basket { font-size: 36px; margin-bottom: -10px; z-index: 2; }
.cg-av { width: 58px; height: 58px; }
.cg-av svg { width: 100%; height: 100%; }
.cg-drop-item {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 34px;
  pointer-events: none;
}

.mg-win-overlay {
  position: absolute;
  inset: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #FF80AB;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  z-index: 10;
}
.mg-win-big { font-size: 52px; }

/* 2. Lật Thẻ Siêu Trí Nhớ */
.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.mem-card {
  position: relative;
  height: 92px;
  border-radius: 16px;
  border: 3px solid #B39DDB;
  background: linear-gradient(135deg, #7C4DFF, #EC407A);
  cursor: pointer;
  padding: 4px;
  overflow: hidden;
}
.mem-card-back {
  font-size: 34px;
  color: #FFF59D;
  display: grid;
  place-items: center;
  height: 100%;
}
.mem-card-front {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #FFFFFF;
  border-radius: 11px;
}
.mem-card.flipped .mem-card-back, .mem-card.matched .mem-card-back { display: none; }
.mem-card.flipped .mem-card-front, .mem-card.matched .mem-card-front { display: flex; }
.mem-card.matched { border-color: #00C853; box-shadow: 0 0 12px rgba(0, 200, 83, 0.35); }
.mc-ic { font-size: 32px; line-height: 1.05; }
.mg-win-banner {
  grid-column: 1 / -1;
  background: #FFF9C4;
  border: 2px solid #FFB300;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
}

/* 3. Đập Bóng Bay Màu Sắc */
.balloon-target-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-weight: 900;
  margin-left: 4px;
}
.balloon-sky {
  position: relative;
  height: 300px;
  background: linear-gradient(180deg, #81D4FA 0%, #E1F5FE 70%, #FFF9C4 100%);
  border: 3px solid #4FC3F7;
  border-radius: 22px;
  overflow: hidden;
}
.floating-balloon {
  position: absolute;
  width: 58px;
  height: 70px;
  border-radius: 50% 50% 48% 48%;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset -6px -8px 12px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.14);
  cursor: pointer;
}
.bl-shine {
  position: absolute;
  top: 12px; left: 12px;
  width: 12px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  transform: rotate(-20deg);
}
.bl-knot {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 8px;
  background: inherit;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.floating-balloon.popped {
  background: transparent !important;
  border: none;
  box-shadow: none;
  font-size: 32px;
}

/* 4. Xếp Tháp Bánh Ngọt */
.cake-stage {
  position: relative;
  height: 270px;
  background: linear-gradient(180deg, #FFF0F6 0%, #FFF8E1 100%);
  border: 3px solid #F48FB1;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
}
.cake-moving-tier, .cake-stacked-tier {
  position: absolute;
  height: 24px;
  width: 168px;
  transform: translateX(-50%);
  border-radius: 10px;
  border: 2px solid #880E4F;
  border-top: 6px solid #FFFFFF;
}
.cake-moving-tier { top: 14px; }
.cake-stacked-tier.perfect { box-shadow: 0 0 12px #FFD600; }
.cake-tower-box { position: absolute; inset: 0; pointer-events: none; }
.cake-top-cherry { position: absolute; transform: translateX(-50%); font-size: 28px; }
.cake-base-plate {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFD54F;
  border: 2px solid #F57F17;
  border-radius: 999px;
  padding: 2px 26px;
  font-size: 12px;
  font-weight: 800;
}
.cake-drop-btn { align-self: center; }

/* 5. Ghép Tranh Chibi 3x3 */
.puz-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.puz-grid {
  width: 276px;
  height: 276px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #F8BBD0;
  padding: 6px;
  border-radius: 18px;
  border: 3px solid #EC407A;
}
.puz-tile {
  padding: 0;
  border: 2.5px solid #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}
.puz-tile svg { width: 100%; height: 100%; display: block; }
.puz-tile.selected { border-color: #FFD600; transform: scale(0.94); box-shadow: 0 0 12px #FFD600; }
.puz-tile.correct-spot { border-color: #00E676; }
.puz-preview-card {
  width: 185px;
  background: #FFFFFF;
  border: 2.5px solid #CE93D8;
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.puz-prev-svg { width: 140px; height: 140px; border-radius: 12px; overflow: hidden; border: 2px solid #E1BEE7; }
.puz-prev-svg svg { width: 100%; height: 100%; display: block; }
.puz-tip { font-size: 12px; color: #6A1B9A; }

/* 6. Xé Túi Mù Thú Bông */
.bb-wrap {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .bb-wrap { grid-template-columns: 1fr; }
}
.bb-stage-panel {
  background: linear-gradient(180deg, #FFF8E1, #FCE4EC);
  border: 3px solid #FF80AB;
  border-radius: 22px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.bb-bag-icon { font-size: 68px; }
.bb-bag-title { font-size: 17px; font-weight: 800; color: #AD1457; }
.bb-bag-sub { font-size: 13.5px; color: #4E342E; }
.bb-tear-btn {
  background: linear-gradient(135deg, #FFD54F, #FF4081);
  color: #FFFFFF;
  border: 4px solid #FFFFFF;
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.bb-tear-ic { font-size: 64px; }
.bb-reveal-card {
  width: 100%;
  border-radius: 20px;
  padding: 14px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}
.bb-reveal-card.is-ssr { box-shadow: 0 0 22px #EA80FC; border-color: #FFD600; }
.bb-rarity-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #6A1B9A;
}
.bb-plush-big { font-size: 58px; margin: 6px 0; }
.bb-plush-name { font-size: 18px; font-weight: 900; color: #311B92; }

.bb-shelf-panel {
  background: #FFFFFF;
  border: 2.5px solid #E1BEE7;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bb-shelf-head { font-size: 15px; color: #4A148C; text-align: center; }
.bb-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.bb-shelf-item {
  border-radius: 16px;
  border: 2px solid #E0E0E0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  background: #FAFAFA;
}
.bb-shelf-item.owned { border-color: #F48FB1; }
.bb-shelf-item.locked { opacity: 0.62; }
.bbs-ic { font-size: 28px; }
.bbs-name { font-size: 12px; font-weight: 800; color: #311B92; text-align: center; }
.bbs-cnt { font-size: 11px; color: #616161; }

/* =========================================================================
   NHÀ HÁT ĐÀN PIANO · BAN NHẠC IDOL · STUDIO CHỤP ẢNH
   ========================================================================= */
.piano-toolbar, .piano-songbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.piano-note-display {
  background: #FFF9C4;
  border: 2px solid #FFD54F;
  border-radius: 14px;
  padding: 8px 12px;
  text-align: center;
  font-size: 14.5px;
  color: #4A148C;
}
.piano-keyboard {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
  height: 195px;
  padding: 8px;
  background: #263238;
  border-radius: 22px;
}
.piano-key {
  position: relative;
  border: none;
  border-bottom: 7px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 16px 16px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 14px;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
.piano-key.dark-txt { color: #212121; }
.piano-key.pressed { transform: translateY(5px); border-bottom-width: 2px; filter: brightness(1.15); }
.pk-sol { font-size: 18px; font-weight: 900; }
.pk-num { font-size: 13px; opacity: 0.88; font-weight: 800; }
.pk-guide-star {
  display: none;
  position: absolute;
  top: 10px;
  font-size: 28px;
  animation: gymJump 0.55s infinite;
}
.piano-key.guide-next { box-shadow: 0 0 18px #FFFFFF, inset 0 0 14px rgba(255,255,255,0.8); }
.piano-key.guide-next .pk-guide-star { display: block; }
.piano-float-note {
  position: absolute;
  top: -16px;
  background: #FFFFFF;
  color: #D81B60;
  font-size: 12px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}

/* Ban Nhạc Thần Tượng */
.band-stage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: linear-gradient(180deg, #1A1A2E 0%, #311B92 75%, #4A148C 100%);
  border-radius: 22px;
  padding: 14px 10px;
}
@media (max-width: 680px) {
  .band-stage { grid-template-columns: repeat(3, 1fr); }
}
.band-member {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 8px 4px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  overflow: hidden;
}
.band-member.performing {
  background: radial-gradient(circle at 50% 20%, rgba(255, 214, 0, 0.38), rgba(236, 64, 122, 0.35));
  border-color: #FFD600;
}
.bm-avatar { width: 82px; height: 118px; opacity: 0.55; transition: opacity 0.2s; }
.band-member.performing .bm-avatar { opacity: 1; }
.bm-avatar svg { width: 100%; height: 100%; }
.dance-loop { animation: gymJump 0.56s infinite ease-in-out; }
.bm-name { font-size: 13.5px; font-weight: 800; }
.bm-role { font-size: 11px; color: #FFF59D; }
.bm-toggle {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 999px;
}
.band-drumpads { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.band-pad-btn {
  border: none;
  border-radius: 16px;
  padding: 10px 18px;
  color: #FFFFFF;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}
.band-pad-btn.dark-txt { color: #212121; }
.band-pad-btn.pressed { transform: scale(0.94); }

/* Studio Chụp Ảnh Polaroid */
.photo-studio-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: center;
}
.polaroid-card {
  position: relative;
  height: 270px;
  border: 10px solid #FFFFFF;
  border-bottom-width: 40px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.pol-flash {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  z-index: 12;
}
.pol-sky-deco {
  position: absolute;
  top: 10px; left: 14px; right: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  pointer-events: none;
}
.pol-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54px;
}
.pol-chars {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
}
.pol-char-item { width: 108px; height: 166px; }
.pol-char-item svg { width: 100%; height: 100%; }
.pol-stickers-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pol-st { position: absolute; font-size: 26px; }
.pol-caption {
  position: absolute;
  bottom: -33px;
  left: 0; right: 0;
  text-align: center;
  font-weight: 800;
  color: #AD1457;
  font-size: 14px;
}
.photo-controls-col {
  background: #FFFFFF;
  border: 2.5px solid #F8BBD0;
  border-radius: 20px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-sec-lbl { font-size: 13.5px; font-weight: 800; color: #6A1B9A; }
.photo-chip-list { display: flex; gap: 6px; flex-wrap: wrap; max-height: 78px; overflow-y: auto; }
.photo-sticker-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-snap-btn { background: linear-gradient(135deg, #FF4081, #7C4DFF) !important; }