#zem-ban-overlay{
  position:fixed; inset:0; z-index:9999999;
  background: radial-gradient(1200px 600px at 50% -10%, #fee2e2 0%, #fff 45%, #fef3c7 100%), #0f172a;
  display:flex; align-items:center; justify-content:center;
  padding:20px; font-family:'Quicksand', system-ui, sans-serif;
}
#zem-ban-overlay .ban-card{
  width:min(520px, 92vw); background:#fff; border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  padding:28px 22px; text-align:center; animation:banPop .4s ease;
}
@keyframes banPop{ from{transform:scale(.92) translateY(10px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }
#zem-ban-overlay .ban-icon{ font-size:64px; margin-bottom:8px; filter:drop-shadow(0 4px 12px rgba(239,68,68,.3))}
#zem-ban-overlay h2{ font-family:'Baloo 2'; font-size:26px; color:#dc2626; margin:6px 0 8px; font-weight:800; letter-spacing:.3px}
#zem-ban-overlay .ban-reason{
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  padding:10px 14px; border-radius:12px; font-size:13px; font-weight:600; margin:14px 0;
  word-break:break-word;
}
#zem-ban-overlay p{ color:#4b5563; font-size:13.5px; line-height:1.5; margin:8px 0}
#zem-ban-overlay .ban-note{ text-align:left;background:#f9fafb; border:1px dashed #e5e7eb; padding:10px; border-radius:10px; font-size:12px}
#zem-ban-overlay button{
  margin-top:16px; width:100%; height:44px; border-radius:999px; border:0;
  background:#111827; color:#fff; font-weight:700; font-size:14px; cursor:pointer;
}
#zem-warn-overlay{
  position:fixed; inset:0; z-index:9999998;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:10px; font-family:'Quicksand', sans-serif;
}
#zem-warn-overlay .warn-card{
  width:min(480px, 92vw); background:#fffbeb; border:2px solid #f59e0b; border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.2); padding:24px 20px; text-align:center;
  animation:banPop .35s ease;
}
#zem-warn-overlay .warn-icon{ font-size:46px; margin-bottom:6px}
#zem-warn-overlay h2{ font-family:'Baloo 2'; font-size:16px; color:#d97706; margin:4px 0 8px; font-weight:800}
#zem-warn-overlay .warn-reason{
  background:#fff; border:1px solid #fde68a; color:#92400e;
  padding:10px 14px; border-radius:12px; font-size:11px; font-weight:600; margin:12px 0;
}
#zem-warn-overlay p{ color:#57534e; font-size:11px; line-height:1.5; margin:6px 0}
#zem-warn-overlay button{
  margin-top:14px; width:100%; height:42px; border-radius:999px; border:0;
  background:#f59e0b; color:#fff; font-weight:800; font-size:14px; cursor:pointer;
}
#zem-warn-toast{
  position:fixed; left:50%; top:18px; transform:translateX(-50%);
  z-index:9999998; background:#111827; color:#fff; padding:12px 18px;
  border-radius:999px; font-family:'Quicksand'; font-size:13px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.25); display:none; align-items:center; gap:8px;
}
#zem-warn-toast.show{ display:flex; animation:toastIn .3s ease}
@keyframes toastIn{ from{transform:translateX(-50%) translateY(-20px); opacity:0} to{transform:translateX(-50%) translateY(0); opacity:1} }
#zem-verify-overlay{
  position:fixed; inset:0; z-index:9999997;
  background:rgba(255,255,255,0.85); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  font-family:'Quicksand', sans-serif;
}
#zem-verify-overlay .verify-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); text-align:center; font-weight:700; color:#374151;
}

#zem-ban-countdown{ animation: pulseBan 1.2s infinite; }
@keyframes pulseBan{ 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* ===== NEXT STYLE BLOCK ===== */

/* ===== SHOP TABS - DO AN VAT ===== */
.shop-tabs{
  display:flex; gap:6px; padding:10px 14px 8px; background:#fff; border-bottom:1px solid #f3e8ff; position:relative; z-index:5;
}
.shop-tab{
  flex:1; height:36px; border-radius:999px; border:1px solid #e9d5ff; background:#f9f5ff; color:#6d28d9; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:.18s;
}
.shop-tab.active{
  background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(139,92,246,.25);
}
.shop-tab-badge{
  background:#fff; color:#6d28d9; padding:1px 6px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid #e9d5ff;
}
.shop-tab.active .shop-tab-badge{ background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.3); }
.shop-tab-badge.snack{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
.shop-tab.active .shop-tab-badge.snack{ background:rgba(255,255,255,.22); color:#fff; }

/* Snack cards */
.snack-card{
  position:relative; background:#fff; border:1px solid #fde68a; border-radius:16px; padding:10px 10px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; box-shadow:0 2px 10px rgba(245,158,11,.08);
}
.snack-card-icon{
  width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; display:grid; place-items:center; font-size:30px;
}
.snack-card-name{ font-family:'Baloo 2'; font-weight:800; font-size:13px; color:#92400e; line-height:1.1; }
.snack-card-desc{ font-size:11px; color:#a16207; font-weight:700; background:#fffbeb; border:1px solid #fef3c7; padding:2px 8px; border-radius:999px; }
.snack-card-price{ font-size:12px; font-weight:800; color:#d97706; margin-top:2px; }
.snack-card-owned{ font-size:10.5px; font-weight:800; color:#6b7280; background:#f9fafb; border:1px solid #e5e7eb; padding:2px 8px; border-radius:999px; }
.snack-card-buy{
  width:100%; height:32px; border-radius:999px; border:0; background:linear-gradient(135deg,#f59e0b,#ec4899); color:#fff; font-weight:800; font-size:12.5px; cursor:pointer; margin-top:4px;
}
.snack-card-buy:disabled{ opacity:.5; cursor:not-allowed; }
#snack-inventory-badge .inv-chip{
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; background:#fff; border:1px solid #fde68a; color:#92400e;
}

/* Pet snack popup - nho xinh */
.pet-snack-popup{
  position:absolute; left:50%; bottom:62px; transform:translateX(-50%); z-index:20;
  background:#fff; border:1px solid #fde68a; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(245,158,11,.12);
  padding:8px 8px 6px; min-width:220px; max-width:320px; width:max-content; max-width:min(320px, calc(100vw - 20px), calc(100% + 80px));
  animation:snackPop .28s ease; display:flex; flex-direction:column; gap:6px;
  will-change:transform, left, top;
}
.pet-snack-popup.flipped{
  bottom:auto; top:68px;
}
.pet-snack-popup::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:10px; height:10px; background:#fff; border-left:1px solid #fde68a; border-top:1px solid #fde68a;
  bottom:-6px; rotate:45deg;
}
.pet-snack-popup.flipped::after{
  bottom:auto; top:-6px; rotate:225deg;
}
@keyframes snackPop{ from{ transform:translateX(-50%) scale(.86) translateY(8px); opacity:0 } to{ transform:translateX(-50%) scale(1) translateY(0); opacity:1 } }
.pet-snack-popup-head{
  display:flex; align-items:center; justify-content:space-between; gap:6px; font-family:'Baloo 2'; font-size:11px; font-weight:800; color:#92400e; padding:0 2px;
}
.pet-snack-popup-head button{
  width:20px; height:20px; border-radius:999px; border:1px solid #f3e8ff; background:#f9f5ff; color:#6b7280; font-size:12px; cursor:pointer; display:grid; place-items:center;
}
.pet-snack-list{ display:flex; gap:6px; justify-content:center; }
.pet-snack-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:12px; border:1px solid #fef3c7; background:linear-gradient(180deg,#fff,#fffbeb); cursor:pointer; transition:.15s;
}
.pet-snack-item:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,158,11,.18); border-color:#fde68a; }
.pet-snack-item.disabled{ opacity:.35; pointer-events:none; filter:grayscale(.4); }
.pet-snack-item-icon{ font-size:20px; line-height:1; }
.pet-snack-item-name{ font-size:10px; font-weight:800; color:#92400e; line-height:1; }
.pet-snack-item-count{ font-size:9px; font-weight:700; color:#a16207; background:#fef3c7; border:1px solid #fde68a; padding:1px 5px; border-radius:999px; }
.pet-snack-item-reduce{ font-size:9px; font-weight:800; color:#059669; }

/* Pet happy animation */
.house-pet.happy{
  animation:petHappy .6s ease;
}
@keyframes petHappy{
  0%{ transform:scale(1) translateY(0); }
  20%{ transform:scale(1.12) translateY(-6px); }
  40%{ transform:scale(1.08) translateY(-2px) rotate(-3deg); }
  60%{ transform:scale(1.15) translateY(-8px) rotate(3deg); }
  80%{ transform:scale(1.05) translateY(-2px); }
  100%{ transform:scale(1) translateY(0); }
}
.house-pet.happy .pet-avatar{
  filter: drop-shadow(0 0 10px rgba(245,158,11,.45));
}

/* ===== NEXT STYLE BLOCK ===== */

/* ===== CUTE KAWAII CLAW - HOẠT HÌNH ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800;900&family=Quicksand:wght@600;700;800&display=swap');
@keyframes cuteFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg)} 50%{ transform:translateY(-8px) rotate(2deg)} }
@keyframes cuteWiggle{ 0%,100%{ transform:rotate(-2deg)} 50%{ transform:rotate(3deg)} }
@keyframes cuteBob{ 0%,100%{ transform:translateX(-50%) translateY(0)} 50%{ transform:translateX(-50%) translateY(-4px)} }
@keyframes shine{ 0%{ transform:translateX(-130%) } 100%{ transform:translateX(130%) } }
@keyframes heartPop{ 0%{ transform:translateY(0) scale(0); opacity:0} 50%{ opacity:1} 100%{ transform:translateY(-60px) scale(1.4); opacity:0} }
@keyframes boxShakeCute{ 0%,100%{ transform:translateX(-50%) rotate(0)} 15%{ transform:translateX(-54%) rotate(-4deg)} 30%{ transform:translateX(-46%) rotate(4deg)} 45%{ transform:translateX(-54%) rotate(-3deg)} 60%{ transform:translateX(-46%) rotate(3deg)} 75%{ transform:translateX(-52%) rotate(-2deg)} }
@keyframes lidPopCute{ 0%{ transform:translateX(-50%) translateY(0) rotate(0) scale(1); opacity:1} 50%{ transform:translateX(-50%) translateY(-45px) rotate(-12deg) scale(1.1)} 100%{ transform:translateX(-50%) translateY(-90px) rotate(-28deg) scale(0.85); opacity:0} }
@keyframes prizePopCute{ 0%{ transform:translateX(-50%) scale(0.2) rotate(-20deg); opacity:0} 60%{ transform:translateX(-50%) scale(1.35) rotate(15deg); opacity:1} 100%{ transform:translateX(-50%) scale(1) rotate(0deg); opacity:1} }
@keyframes confettiFallCute{ 0%{ transform:translateY(-10vh) rotate(0) translateX(0); opacity:1} 100%{ transform:translateY(110vh) rotate(600deg) translateX(20px); opacity:0} }
@keyframes blink{ 0%,90%,100%{ transform:scaleY(1)} 92%{ transform:scaleY(0.1)} }

#panel-gapqua{ max-width:420px; margin:0 auto; font-family:'Quicksand', sans-serif; }

.cute-machine-wrap{
  position:relative; width:100%; max-width:410px; margin:0 auto;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 18%, #ffedd5 100%);
  border-radius:32px; overflow:hidden;
  border:3px solid #fecdd3;
  box-shadow:0 0 0 4px #fff, 0 0 0 7px #fecdd3, 0 20px 50px rgba(251,113,133,.25), inset 0 2px 0 rgba(255,255,255,.9);
}
.cute-machine-wrap::before{
  content:'✧ ♡ ✧'; position:absolute; top:8px; right:14px; z-index:20; font-size:11px; color:#fb7185; font-weight:800; letter-spacing:.2em; opacity:.7;
}

.cute-topbar{
  height:56px; background:linear-gradient(135deg, #ffe4e6 0%, #fecdd3 50%, #fda4af 100%);
  display:flex; align-items:center; padding:0 14px; gap:10px; position:relative; z-index:6;
  border-bottom:3px dashed #fff;
}
.cute-topbar::after{ content:''; position:absolute; left:12px; right:12px; bottom:-3px; height:6px; background:repeating-linear-gradient(90deg, #fff 0 10px, transparent 10px 18px); opacity:.8; }
.cute-logo{
  width:40px; height:40px; border-radius:14px; background:#fff; border:2.5px solid #fda4af;
  display:grid; place-items:center; font-size:22px; box-shadow:0 3px 10px rgba(251,113,133,.2), inset 0 1px 0 #fff;
  animation:cuteWiggle 2.2s ease-in-out infinite;
}
.cute-title{ font-family:'Baloo 2'; font-weight:900; font-size:14px; color:#881337; line-height:1; letter-spacing:.02em; }
.cute-sub{ font-size:10px; font-weight:800; color:#be123c; opacity:.7; letter-spacing:.08em; margin-top:2px; }

.cute-rail{
  height:18px; background:linear-gradient(180deg, #fff1f2, #ffe4e6); position:relative; overflow:hidden; border-bottom:2.5px solid #fecdd3;
}
.cute-rail-track{ position:absolute; inset:3px 10px; background:#fff; border-radius:999px; border:2px solid #fecdd3; overflow:hidden; box-shadow:inset 0 2px 6px rgba(251,113,133,.15); }
.cute-rail-fill{
  position:absolute; top:0; bottom:0; width:62px; border-radius:999px;
  background:linear-gradient(90deg,#fda4af,#fb7185,#f472b6); box-shadow:0 0 12px rgba(251,113,133,.6);
  transition:left .06s linear;
}
.cute-rail-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); width:40%; animation:shine 1.4s linear infinite; }

#gapqua-claw{
  position:absolute; top:74px; left:50%; width:72px; height:104px; transform:translateX(-50%); z-index:7;
  transition:left .06s linear; pointer-events:none; filter:drop-shadow(0 8px 14px rgba(251,113,133,.25));
}
.claw-cable{ width:6px; height:36px; background:repeating-linear-gradient(#fecdd3, #fecdd3 4px, #fff 4px, #fff 8px); margin:0 auto; border-radius:999px; border:2px solid #fda4af; }
.claw-head{ width:72px; height:72px; position:relative; margin-top:-8px; }
.claw-base{
  width:42px; height:20px; background:linear-gradient(180deg,#fff,#fecdd3 70%, #fda4af); border-radius:12px;
  margin:0 auto; border:2.5px solid #fb7185; box-shadow:0 4px 12px rgba(0,0,0,.08), inset 0 1px 0 #fff; position:relative; z-index:2;
  display:grid; place-items:center; font-size:12px;
}
.claw-base::before{ content:'(◕‿◕)'; font-size:10px; color:#881337; font-weight:800; }
.claw-pincer{
  position:absolute; top:16px; width:30px; height:46px;
  background:linear-gradient(180deg,#fff7ed,#fed7aa 30%, #fda4af 80%);
  border:2.5px solid #fb7185; transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  box-shadow:inset 0 2px 0 #fff, 0 3px 10px rgba(0,0,0,.08);
}
#gapqua-pincer-left{ left:7px; border-radius:6px 6px 0 18px; border-right:0; transform-origin:top right; }
#gapqua-pincer-right{ right:7px; border-radius:6px 6px 18px 0; border-left:0; transform-origin:top left; }

#gapqua-glass{
  position:relative; margin:0 12px 12px; height:380px; margin-top:92px;
  background:
    radial-gradient(100% 70% at 20% 20%, rgba(251,207,232,.5) 0%, transparent 60%),
    radial-gradient(100% 70% at 80% 80%, rgba(167,243,208,.45) 0%, transparent 60%),
    radial-gradient(100% 100% at 50% 0%, rgba(196,181,253,.35) 0%, transparent 70%),
    linear-gradient(180deg, #fff7ed 0%, #ffedd5 30%, #fff 100%);
  border-radius:24px; border:2.5px solid #fff;
  box-shadow:inset 0 0 0 2px #fecdd3, inset 0 20px 40px rgba(255,255,255,.8), inset 0 -20px 30px rgba(251,113,133,.08);
  overflow:hidden;
}
#gapqua-glass::before{
  content:'♡ ♡ ♡'; position:absolute; top:8px; left:12px; font-size:10px; color:#fda4af; letter-spacing:.4em; z-index:5; opacity:.6;
}
.glass-deco{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(108deg, transparent 0%, rgba(255,255,255,.6) 12%, transparent 24%);
}
.glass-bottom{
  position:absolute; left:0; right:0; bottom:0; height:10px; background:repeating-linear-gradient(90deg, #fecdd3 0 12px, #fff 12px 24px, #a7f3d0 24px 36px, #fff 36px 48px); opacity:.9; border-top:2.5px solid #fff;
}
#gapqua-prizes{ position:absolute; inset:12px; z-index:2; }

/* MYSTERY BOX CUTE */
.mystery-box-cute{
  position:absolute; width:58px; height:58px; display:grid; place-items:center;
  animation:cuteFloat 3s ease-in-out infinite; cursor:pointer; user-select:none;
  filter:drop-shadow(0 6px 12px rgba(251,113,133,.18));
}
.mystery-box-cute .box-core{
  width:50px; height:50px; border-radius:16px; position:relative;
  background:linear-gradient(145deg,#ffffff 0%, #fff1f2 55%, #ffe4e6 100%);
  border:2.5px solid #fecdd3; box-shadow:0 4px 0 #fecdd3, 0 8px 18px rgba(251,113,133,.18), inset 0 1px 0 #fff;
  display:grid; place-items:center; overflow:hidden;
}
.mystery-box-cute .box-core::after{
  content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(135deg, rgba(255,255,255,.8) 0%, transparent 45%);
}
.mystery-box-cute .ribbon-v{
  position:absolute; left:50%; top:0; bottom:0; width:14px; transform:translateX(-50%);
  background:linear-gradient(180deg,#fda4af,#fb7185); border-left:1.5px solid #fff; border-right:1.5px solid #fff; z-index:1;
}
.mystery-box-cute .ribbon-h{
  position:absolute; top:50%; left:0; right:0; height:14px; transform:translateY(-50%);
  background:linear-gradient(90deg,#fda4af,#fb7185); border-top:1.5px solid #fff; border-bottom:1.5px solid #fff; z-index:1;
}
.mystery-box-cute .bow{
  position:absolute; left:50%; top:50%; width:26px; height:20px; transform:translate(-50%,-65%);
  z-index:3; display:grid; place-items:center;
}
.mystery-box-cute .bow::before, .mystery-box-cute .bow::after{
  content:''; position:absolute; width:14px; height:14px; background:#fff; border:2px solid #fb7185; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}
.mystery-box-cute .bow::before{ left:0; transform:rotate(-15deg); } 
.mystery-box-cute .bow::after{ right:0; transform:rotate(15deg); }
.mystery-box-cute .bow-center{
  width:10px; height:10px; background:linear-gradient(135deg,#fda4af,#fb7185); border:1.5px solid #fff; border-radius:4px; position:relative; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.mystery-box-cute .q-cute{
  position:absolute; z-index:4; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#fef3c7,#fde68a); border:2px solid #f59e0b; display:grid; place-items:center;
  font-family:'Baloo 2'; font-weight:900; font-size:18px; color:#92400e; box-shadow:0 2px 8px rgba(0,0,0,.1);
  top:50%; left:50%; transform:translate(-50%,-10%);
}
.mystery-box-cute .q-cute::after{ content:'?'; }
.mystery-box-cute.grabbed{ z-index:20 !important; animation:none !important; }

/* START OVERLAY CUTE */
#gapqua-start-overlay{
  position:absolute; inset:0; z-index:20; display:grid; place-items:center;
  background:radial-gradient(800px 400px at 50% 0%, rgba(253,164,175,.25) 0%, rgba(196,181,253,.18) 30%, rgba(255,255,255,.75) 70%);
  backdrop-filter:blur(8px);
}
.cute-start-btn{
  position:relative; width:min(310px,88vw); padding:22px 18px 16px; border-radius:28px; border:0;
  background:linear-gradient(135deg,#fff 0%, #ffe4e6 40%, #fecdd3 100%);
  border:3px solid #fda4af; box-shadow:0 0 0 4px #fff, 0 14px 32px rgba(251,113,133,.28), inset 0 2px 0 #fff;
  cursor:pointer; overflow:hidden; transform:translateZ(0);
}
.cute-start-btn::before{ content:''; position:absolute; inset:0; background:linear-gradient(108deg, transparent 0%, rgba(255,255,255,.9) 18%, transparent 36%); animation:shine 2.2s ease-in-out infinite; }
.cute-start-btn:active{ transform:scale(.97); }

/* REVEAL OVERLAY CUTE */
#gapqua-reveal-overlay{
  position:fixed; inset:0; z-index:99999; display:none; place-items:center;
  background:radial-gradient(1000px 500px at 50% 0%, rgba(253,164,175,.3) 0%, rgba(196,181,253,.22) 30%, rgba(255,247,237,.88) 70%);
  backdrop-filter:blur(14px); padding:16px;
}
#gapqua-reveal-overlay.show{ display:grid; }
.reveal-stage-cute{
  position:relative; width:min(320px, 92vw); min-height:320px;
  background:linear-gradient(180deg,#ffffff 0%, #fff7ed 60%, #ffe4e6 100%);
  border-radius:32px; border:3px solid #fecdd3;
  box-shadow:0 0 0 5px #fff, 0 0 0 8px #fecdd3, 0 24px 60px rgba(251,113,133,.3), inset 0 2px 0 #fff;
  overflow:hidden; display:flex; flex-direction:column; align-items:center; padding:20px 18px 18px;
}
.reveal-glow-cute{
  position:absolute; top:-30%; left:50%; width:130%; height:70%; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(253,164,175,.25) 0%, rgba(167,243,208,.18) 40%, transparent 70%); pointer-events:none;
}
.reveal-box-wrap-cute{ position:relative; width:130px; height:130px; margin:16px 0 8px; display:grid; place-items:center; }
.reveal-mystery-box-cute{
  width:96px; height:96px; border-radius:20px; position:relative;
  background:linear-gradient(145deg,#fff,#ffe4e6); border:3px solid #fda4af;
  box-shadow:0 6px 0 #fecdd3, 0 12px 28px rgba(251,113,133,.2);
  display:grid; place-items:center;
}
.reveal-mystery-box-cute.shaking{ animation:boxShakeCute .5s ease-in-out infinite; }
.reveal-mystery-box-cute .r-v{ position:absolute; left:50%; top:0; bottom:0; width:18px; transform:translateX(-50%); background:linear-gradient(180deg,#fda4af,#fb7185); border-left:2px solid #fff; border-right:2px solid #fff; }
.reveal-mystery-box-cute .r-h{ position:absolute; top:50%; left:0; right:0; height:18px; transform:translateY(-50%); background:linear-gradient(90deg,#fda4af,#fb7185); border-top:2px solid #fff; border-bottom:2px solid #fff; }
.reveal-mystery-box-cute .r-knot{ position:absolute; left:50%; top:50%; width:30px; height:24px; transform:translate(-50%,-60%); }
.reveal-mystery-box-cute .r-knot::before, .reveal-mystery-box-cute .r-knot::after{ content:''; position:absolute; width:16px; height:16px; background:#fff; border:2px solid #fb7185; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
.reveal-mystery-box-cute .r-knot::before{ left:0; transform:rotate(-15deg);} .reveal-mystery-box-cute .r-knot::after{ right:0; transform:rotate(15deg);}
.reveal-mystery-box-cute .q-big-cute{ position:absolute; font-family:'Baloo 2'; font-weight:900; font-size:34px; color:#f59e0b; text-shadow:0 2px 0 #fff; z-index:2; top:55%; left:50%; transform:translate(-50%,-50%); }
.reveal-lid-cute{
  position:absolute; top:-6px; left:50%; width:104px; height:28px; transform:translateX(-50%);
  background:linear-gradient(180deg,#ffffff,#fecdd3); border-radius:14px 14px 6px 6px; border:3px solid #fda4af;
  z-index:5; box-shadow:0 4px 0 #fecdd3, 0 6px 12px rgba(0,0,0,.08);
}
.reveal-lid-cute.pop{ animation:lidPopCute .65s cubic-bezier(.34,1.56,.64,1) forwards; }
.reveal-prize-cute{
  position:absolute; left:50%; top:50%; transform:translateX(-50%) scale(0); opacity:0; z-index:6;
  width:82px; height:82px; border-radius:24px; display:grid; place-items:center;
  background:linear-gradient(135deg,#fff,#fef3c7 20%, #fde68a 100%);
  border:3px solid #fff; box-shadow:0 0 0 3px #fde68a, 0 10px 28px rgba(0,0,0,.12), 0 0 24px rgba(250,204,21,.3);
}
.reveal-prize-cute.show{ animation:prizePopCute .7s cubic-bezier(.34,1.56,.64,1) forwards; }
.reveal-prize-cute.legend{ background:linear-gradient(135deg,#fff,#fef08a 20%, #facc15 100%); box-shadow:0 0 0 3px #facc15, 0 12px 32px rgba(0,0,0,.15), 0 0 36px rgba(234,179,8,.5); }
.reveal-prize-cute.rare{ background:linear-gradient(135deg,#fff,#e9d5ff 20%, #c4b5fd 100%); border-color:#ddd6fe; box-shadow:0 0 0 3px #c4b5fd, 0 10px 28px rgba(0,0,0,.12), 0 0 24px rgba(168,85,247,.4); }

.reveal-text-cute{ text-align:center; margin-top:8px; transition:all .4s ease; }
.reveal-label-cute{ font-family:'Baloo 2'; font-weight:900; font-size:20px; color:#881337; letter-spacing:.02em; }
.reveal-amount-cute{ font-family:'Baloo 2'; font-weight:900; font-size:18px; color:#f59e0b; margin-top:1px; text-shadow:0 2px 0 #fff; }
.reveal-desc-cute{ font-size:12.5px; font-weight:700; color:#9f1239; margin-top:6px; background:#fff; border:2px solid #fecdd3; padding:6px 14px; border-radius:999px; box-shadow:0 2px 0 #fecdd3; }

.confetti-cute{ position:absolute; width:10px; height:10px; border-radius:3px; top:-10px; animation:confettiFallCute linear forwards; }

.cute-controls{
  padding:14px; background:linear-gradient(180deg,#fff,#fff7ed);
  border:3px solid #fecdd3; border-top:0; border-radius:0 0 28px 28px; max-width:400px; margin:-10px auto 0;
  display:flex; flex-direction:column; gap:10px; position:relative; z-index:2;
  box-shadow:0 0 0 4px #fff, 0 0 0 7px #fecdd3, 0 12px 28px rgba(251,113,133,.2);
}
.cute-btn-primary{
  height:54px; padding:0 26px; border-radius:999px; border:0; font-weight:900; font-family:'Baloo 2'; font-size:16px;
  background:linear-gradient(135deg,#fecdd3,#fda4af 50%, #fb7185); color:#fff;
  border:3px solid #fff; box-shadow:0 0 0 3px #fda4af, 0 8px 20px rgba(251,113,133,.3), inset 0 1px 0 rgba(255,255,255,.8);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.cute-btn-primary:active{ transform:scale(.96); }
.cute-btn-ghost{
  height:42px; padding:0 18px; border-radius:999px; border:2.5px solid #fecdd3; background:#fff; color:#fb7185;
  font-weight:800; font-size:12px; cursor:pointer; box-shadow:0 3px 0 #fecdd3;
}
.cute-hud-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:11px; font-weight:900;
  background:#fff; border:2.5px solid #fecdd3; color:#be123c; box-shadow:0 3px 0 #fecdd3;
}
#gapqua-msg{ text-align:center; font-size:12px; font-weight:800; color:#be123c; min-height:18px; }
#gapqua-recent{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; min-height:28px; }
.recent-pill-cute{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; background:#fff; border:2px solid #fecdd3; font-size:11px; font-weight:800; color:#881337; box-shadow:0 2px 0 #fecdd3; }
.game-start-overlay.hidden, #gapqua-start-overlay.hidden{ display:none !important; }

/* ===== NEXT STYLE BLOCK ===== */

/* ===== FIX: GẮP QUÀ FULLSCREEN - ẨN HEADER/MENU KHI BẤM GẮP HỘP KUTE ===== */
body.gapqua-fullscreen-active header,
body.gapqua-fullscreen-active .phone-topbar,
body.gapqua-fullscreen-active #game-menu-overlay,
body.gapqua-fullscreen-active #music-overlay,
body.gapqua-fullscreen-active #yt-persistent-root,
body.gapqua-fullscreen-active #pet-shop-modal,
body.gapqua-fullscreen-active #decor-shop-modal,
body.gapqua-fullscreen-active #reward-footer,
body.gapqua-fullscreen-active .card#reward-footer {
  display:none !important;
}
body.gapqua-fullscreen-active {
  overflow:hidden !important;
}
body.gapqua-fullscreen-active .container {
  max-width:100vw !important;
  padding:0 !important;
  margin:0 !important;
}
body.gapqua-fullscreen-active #game-area {
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
}
body.gapqua-fullscreen-active #panel-gapqua {
  position:fixed !important;
  inset:0 !important;
  z-index:99991 !important;
  max-width:100vw !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  margin:0 !important;
  padding:10px 10px max(12px, env(safe-area-inset-bottom)) !important;
  background: radial-gradient(1000px 600px at 50% -10%, #ffe4e6 0%, #fff7ed 45%, #fef3c7 100%) !important;
  overflow:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  -webkit-overflow-scrolling: touch;
}
body.gapqua-fullscreen-active .cute-machine-wrap {
  max-width:420px;
  width:100%;
  margin:0 auto;
  flex-shrink:0;
  max-height:none !important;
}
body.gapqua-fullscreen-active .cute-controls {
  max-width:420px;
  width:100%;
  margin:0 auto;
  flex-shrink:0;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
body.gapqua-fullscreen-active #gapqua-glass {
  min-height:320px;
  max-height:none !important;
}
#btn-close-gapqua-fullscreen {
  cursor:pointer !important;
  user-select:none;
  transition:transform .12s, box-shadow .12s;
  pointer-events:auto !important;
  position:relative;
  z-index:100002 !important;
}
#btn-close-gapqua-fullscreen:active {
  transform:scale(.92);
}
body.gapqua-fullscreen-active #btn-close-gapqua-fullscreen {
  position:sticky !important;
  top:0 !important;
  z-index:100002 !important;
}
#gapqua-exit-fullscreen-fab {
  position:fixed !important;
  top:12px;
  right:12px;
  z-index:100005 !important;
  display:none !important;
  font-size:11px;
  color:#be123c;
  font-weight:900;
  background:#fff;
  border:2.5px solid #fecdd3;
  padding:7px 14px;
  border-radius:999px;
  box-shadow:0 2px 0 #fecdd3, 0 8px 20px rgba(0,0,0,.18);
  cursor:pointer;
  font-family:'Quicksand', sans-serif;
  pointer-events:auto !important;
}
body.gapqua-fullscreen-active #gapqua-exit-fullscreen-fab {
  display:inline-flex !important;
  align-items:center;
  gap:6px;
}
/* Fix che phần dưới: đảm bảo máy co giãn vừa màn hình */
body.gapqua-fullscreen-active .cute-machine-wrap #gapqua-glass {
  height:auto !important;
  min-height:360px;
}

/* ===== NEXT STYLE BLOCK ===== */

html {
    touch-action: manipulation; /* cho phep scroll, chan double-tap zoom */
    -webkit-text-size-adjust: 100% !important;
    overscroll-behavior-y: none;
  }
  body {
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none;
    user-select: none;
    position: relative; /* KHONG fixed de con scroll duoc */
    width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Khu vuc game - khong cho scroll/zoom de dieu khien game muot */
  canvas, #game, #gameContainer, .game-canvas, #zem-game-root {
    touch-action: none !important;
  }
  /* Khu vuc can scroll nhu shop, inventory, popup - cho phep scroll doc */
  .shop-tabs, .shop-content, #shop-overlay, #inventory, .scrollable, .modal-content {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  /* chong iOS auto zoom khi focus input */
  input, textarea, select {
    font-size: 16px !important;
  }

/* ===== NEXT STYLE BLOCK ===== */

#zem-auth-modal{
  position:fixed; inset:0; z-index:9999995;
  display:none; align-items:center; justify-content:center;
  padding:16px; font-family:'Quicksand', system-ui, sans-serif;
}
#zem-auth-modal .zem-auth-overlay{
  position:absolute; inset:0; background:rgba(15,23,42,.65); backdrop-filter:blur(8px);
}
#zem-auth-modal .zem-auth-card{
  position:relative; width:min(420px, 94vw); background:#fff;
  border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  padding:0; overflow:hidden; animation:zemAuthPop .35s cubic-bezier(.34,1.56,.64,1);
  max-height:92vh; overflow-y:auto;
}
@keyframes zemAuthPop{ from{transform:scale(.92) translateY(12px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }
.zem-auth-header{
  padding:22px 22px 14px; text-align:center; position:relative;
  background: radial-gradient(400px 200px at 50% -20%, #f5f3ff 0%, #fff 60%);
  border-bottom:1px solid #f3f0ff;
}
.zem-auth-close{
  position:absolute; right:12px; top:12px; width:32px; height:32px; border-radius:999px;
  border:1px solid #e9e7f5; background:#fff; cursor:pointer; display:grid; place-items:center;
  font-size:16px; color:#6b7280; transition:.18s;
}
.zem-auth-close:hover{ background:#f9f5ff; color:#111827; transform:rotate(90deg); }
.zem-auth-logo{
  width:56px; height:56px; border-radius:16px; margin:0 auto 10px;
  background:linear-gradient(135deg,#8b5cf6,#ec4899); display:grid; place-items:center;
  font-size:28px; box-shadow:0 8px 20px rgba(139,92,246,.3);
}
.zem-auth-title{ font-family:'Baloo 2', sans-serif; font-size:22px; font-weight:800; color:#1f2937; margin:0; }
.zem-auth-subtitle{ font-size:13px; color:#6b7280; margin:4px 0 0; font-weight:600; }
.zem-auth-tabs{
  display:flex; gap:6px; padding:10px; background:#f9f5ff; margin:0 12px; border-radius:999px; margin-top:14px;
}
.zem-auth-tab{
  flex:1; height:36px; border-radius:999px; border:0; background:transparent; color:#6d28d9;
  font-family:'Baloo 2', sans-serif; font-weight:800; font-size:13.5px; cursor:pointer; transition:.18s;
}
.zem-auth-tab.active{ background:#fff; color:#4c1d95; box-shadow:0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
.zem-auth-body{ padding:16px 20px 20px; }
.zem-auth-form{ display:flex; flex-direction:column; gap:12px; }
.zem-auth-field{ display:flex; flex-direction:column; gap:6px; }
.zem-auth-field label{ font-size:12.5px; font-weight:700; color:#374151; padding-left:2px; }
.zem-auth-input-wrap{
  position:relative; display:flex; align-items:center;
}
.zem-auth-input{
  width:100%; height:42px; border-radius:12px; border:1.5px solid #e9d5ff; background:#fcfbff;
  padding:0 40px 0 14px; font-size:14px; font-family:'Quicksand', sans-serif; font-weight:600;
  color:#111827; outline:none; transition:.18s;
}
.zem-auth-input:focus{ border-color:#8b5cf6; background:#fff; box-shadow:0 0 0 4px rgba(139,92,246,.12); }
.zem-auth-input::placeholder{ color:#9ca3af; font-weight:500; }
.zem-auth-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px;
  border-radius:8px; border:0; background:transparent; cursor:pointer; font-size:16px; display:grid; place-items:center;
}
.zem-auth-btn-primary{
  width:100%; height:44px; border-radius:999px; border:0;
  background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff;
  font-weight:800; font-size:14.5px; font-family:'Baloo 2', sans-serif;
  cursor:pointer; box-shadow:0 8px 20px rgba(139,92,246,.25); transition:.18s; margin-top:4px;
}
.zem-auth-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(139,92,246,.3); }
.zem-auth-btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.zem-auth-divider{
  display:flex; align-items:center; gap:10px; margin:14px 0 6px; color:#9ca3af; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.zem-auth-divider::before, .zem-auth-divider::after{ content:''; flex:1; height:1px; background:#f3f0ff; }
.zem-auth-btn-google{
  width:100%; height:44px; border-radius:999px; border:1.5px solid #e5e7eb; background:#fff;
  color:#111827; font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:.18s; font-family:'Quicksand', sans-serif;
}
.zem-auth-btn-google:hover{ background:#f9fafb; border-color:#d1d5db; transform:translateY(-1px); }
.zem-auth-btn-google:disabled{ opacity:.6; cursor:not-allowed; }
.zem-auth-footer-links{
  display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:12.5px;
}
.zem-auth-link{ color:#7c3aed; font-weight:700; text-decoration:none; cursor:pointer; }
.zem-auth-link:hover{ text-decoration:underline; color:#6d28d9; }
.zem-auth-hint{ font-size:11.5px; color:#6b7280; text-align:center; margin-top:12px; line-height:1.5; background:#f9fafb; padding:8px 10px; border-radius:10px; border:1px dashed #e5e7eb; }
.zem-auth-error{ font-size:12px; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; padding:8px 10px; border-radius:10px; display:none; }

/* ===== NEXT STYLE BLOCK ===== */

/* ===== MARQUEE CHỮ CHẠY - ADMIN CONTROLLED ===== */
#zem-marquee-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  height:38px;
  background:linear-gradient(90deg,#fffbeb 0%,#fef3c7 50%,#fffbeb 100%);
  border-bottom:2.5px solid #fde68a;
  overflow:hidden;
  display:none; /* ẩn mặc định, JS sẽ bật */
  align-items:center;
  font-family:'Quicksand',sans-serif;
  z-index:40;
  box-shadow:0 2px 8px rgba(245,158,11,.08);
}
#zem-marquee-wrap.show{ display:flex; }
#zem-marquee-label{
  flex-shrink:0;
  background:linear-gradient(135deg,#f59e0b,#ec4899);
  color:#fff;
  font-weight:900;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  margin-left:12px;
  margin-right:10px;
  letter-spacing:.3px;
  box-shadow:0 2px 6px rgba(245,158,11,.25);
  display:inline-flex;
  align-items:center;
  gap:4px;
  z-index:2;
}
#zem-marquee-track{
  flex:1;
  overflow:hidden;
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}
#zem-marquee-text{
  white-space:nowrap;
  display:inline-block;
  padding-left:100%;
  font-weight:800;
  font-size:13.5px;
  color:#92400e;
  letter-spacing:.2px;
  animation:zemMarqueeScroll linear infinite;
  will-change:transform;
}
@keyframes zemMarqueeScroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}
#zem-marquee-wrap:hover #zem-marquee-text{ animation-play-state:paused; }

/* ===== LOCK THƯỞNG TUẦN ===== */
#btn-bxh-notif{
  position:relative;
  transition:.2s !important;
}
#btn-bxh-notif.locked{
  background:#f3f4f6 !important;
  border-color:#e5e7eb !important;
  color:#9ca3af !important;
  cursor:not-allowed !important;
  opacity:.85;
  box-shadow:none !important;
}
#btn-bxh-notif.locked #notif-badge{ display:none !important; }
#btn-bxh-notif .lock-icon{
  display:none;
  margin-left:2px;
  font-size:13px;
}
#btn-bxh-notif.locked .lock-icon{ display:inline; }
#btn-bxh-notif.locked::after{
  content:'🔒';
  position:absolute;
  top:-7px;
  right:-7px;
  width:20px;
  height:20px;
  background:#fff;
  border:1.5px solid #fecaca;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
#zem-weekly-lock-toast{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:100000;
  background:#fff;
  border:2.5px solid #fecdd3;
  border-radius:20px;
  padding:18px 20px;
  width:min(340px,90vw);
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.18), 0 0 0 6px #fff;
  font-family:'Quicksand',sans-serif;
  display:none;
}
#zem-weekly-lock-toast.show{ display:block; animation:lockPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes lockPop{ from{transform:translate(-50%,-50%) scale(.9); opacity:0} to{transform:translate(-50%,-50%) scale(1); opacity:1} }

/* ===== NEXT STYLE BLOCK ===== */

@keyframes bxhFade{ from{opacity:0} to{opacity:1} }
    @keyframes bxhPop{ from{transform:scale(.96) translateY(8px); opacity:0} to{transform:scale(1) translateY(0); opacity:1} }
    .bxh-menu-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
    }
    .bxh-game-tile{
      background:#fff;
      border:1.5px solid #f3e8ff;
      border-radius:16px;
      padding:8px 4px 7px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      cursor:pointer;
      transition:.18s;
      box-shadow:0 2px 10px rgba(109,40,217,.06);
      position:relative;
      overflow:hidden;
    }
    .bxh-game-tile:hover{
      transform:translateY(-2px) scale(1.02);
      border-color:#d8b4fe;
      box-shadow:0 8px 20px rgba(109,40,217,.15);
    }
    .bxh-game-tile:active{ transform:scale(.97); }
    .bxh-tile-img-wrap{
      width:54px; height:54px;
      border-radius:13px;
      background:linear-gradient(135deg,#f9f5ff,#fdf2f8);
      border:1px solid #f5f3ff;
      display:grid; place-items:center;
      overflow:hidden;
      position:relative;
    }
    .bxh-tile-img-wrap img{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .bxh-tile-emoji-fallback{
      width:100%; height:100%; display:grid; place-items:center;
      font-size:26px;
      background:linear-gradient(135deg,#f9f5ff,#fdf2f8);
    }
    .bxh-tile-label{
      font-family:'Baloo 2', system-ui;
      font-weight:800;
      font-size:11px;
      color:#4c1d95;
      line-height:1.1;
      text-align:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:100%;
    }
    .bxh-tile-label span{
      background:linear-gradient(135deg,#6d28d9,#ec4899);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    /* fallback for browsers not support clip */
    @supports not (-webkit-background-clip: text){
      .bxh-tile-label span{ color:#4c1d95; background:none; }
    }
    .bxh-back-btn{
      display:inline-flex; align-items:center; gap:5px;
      padding:6px 12px; border-radius:999px;
      border:1px solid #e9d5ff; background:#fff;
      color:#6d28d9; font-weight:800; font-size:12px;
      cursor:pointer; font-family:'Quicksand',sans-serif;
      transition:.18s;
    }
    .bxh-back-btn:hover{ background:#f5f3ff; transform:translateX(-1px); }
.game-start-overlay{
  position:absolute; inset:0; z-index:20;
  display:grid; place-items:center;
  background:
    radial-gradient(600px 400px at 50% 40%, rgba(30,41,59,.55) 0%, rgba(15,23,42,.82) 65%, rgba(2,6,23,.92) 100%);
  backdrop-filter: blur(7px) saturate(1.25);
  -webkit-backdrop-filter: blur(7px) saturate(1.25);
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.game-start-overlay.hidden{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.04);
}
.game-start-btn{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  border:0; background:transparent; padding:0; margin:0;
  cursor:pointer; outline:none;
  font-family:'Baloo 2', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  animation: gamingFloat 2.8s ease-in-out infinite;
  transition: transform .18s cubic-bezier(.22,1.15,.32,1), filter .18s ease;
  transform-origin:center;
}
@keyframes gamingFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
}
.game-start-btn:hover{ transform: scale(1.05) translateY(-2px); filter: brightness(1.08); }
.game-start-btn:active{ transform: scale(.94); animation:none; }

.game-start-btn-inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:176px; padding:18px 30px 14px;
  border-radius:20px;
  border:2.5px solid #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(145deg, #1e293b 0%, #0f172a 55%, #020617 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.12),
    0 8px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 8px rgba(0,0,0,.4);
  overflow:hidden; isolation:isolate;
}
.game-start-btn-inner::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.35) 30%, rgba(255,255,255,.15) 32%, transparent 50%);
  transform: translateX(-120%) skewX(-18deg);
  animation: gamingShine 2.6s ease-in-out infinite;
  z-index:2; pointer-events:none;
}
@keyframes gamingShine{
  0%{ transform: translateX(-130%) skewX(-18deg); }
  55%{ transform: translateX(130%) skewX(-18deg); }
  100%{ transform: translateX(130%) skewX(-18deg); }
}
.game-start-btn-inner::after{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  background: radial-gradient(200px 120px at 50% 0%, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none; z-index:1;
}

.game-start-icon-wrap{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  margin-bottom:6px;
  background: linear-gradient(135deg, #fde047 0%, #facc15 35%, #eab308 100%);
  border:2px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 14px rgba(250,204,21,.45), inset 0 1px 0 rgba(255,255,255,.7);
  position:relative; z-index:3;
}
.game-start-icon{
  font-size:24px; line-height:1; margin-left:3px; color:#422006; font-weight:900;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.game-start-title{
  position:relative; z-index:3;
  font-size:20px; font-weight:900; letter-spacing:.8px; line-height:1;
  color:#fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,255,255,.25);
}
.game-start-meta{
  position:relative; z-index:3;
  margin-top:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:rgba(255,255,255,.78);
  background: rgba(0,0,0,.32);
  padding:3px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
}
.game-start-glow{
  position:absolute; inset:-14px; z-index:-1; border-radius:28px;
  background: radial-gradient(180px 90px at 50% 50%, currentColor 0%, transparent 70%);
  opacity:.55; filter: blur(14px);
  animation: glowPulse 2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{ transform:scale(1); opacity:.45; }
  50%{ transform:scale(1.18); opacity:.72; }
}

/* Racing theme - Yellow Neon */
.racing-theme .game-start-btn-inner{
  border-color:#fef08a;
  box-shadow:
    0 0 0 4px rgba(250,204,21,.22),
    0 0 22px rgba(250,204,21,.55),
    0 0 46px rgba(250,204,21,.22),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.racing-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #fef08a 0%, #facc15 20%, #eab308 55%, #ca8a04 100%);
}
.racing-theme{ color:#facc15; }
.racing-theme .game-start-title{ color:#fff; }
.racing-theme .game-start-meta{ color:#fef08a; background: rgba(202,138,4,.22); border-color: rgba(254,240,138,.28); }

/* Fappy theme - Pink Orange Neon */
.fappycat-theme .game-start-btn-inner{
  border-color:#fecdd3;
  box-shadow:
    0 0 0 4px rgba(236,72,153,.18),
    0 0 24px rgba(236,72,153,.55),
    0 0 52px rgba(249,115,22,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.fappycat-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #fed7aa 0%, #fb923c 18%, #f97316 38%, #ec4899 78%, #db2777 100%);
}
.fappycat-theme{ color:#fb7185; }
.fappycat-theme .game-start-icon{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.fappycat-theme .game-start-meta{ color:#ffe4e6; background: rgba(236,72,153,.20); border-color: rgba(253,164,175,.32); }

/* decorative corner ticks */
.game-start-btn-inner .corner{ position:absolute; width:14px; height:14px; border:2.5px solid rgba(255,255,255,.85); z-index:3; }
.corner.tl{ top:6px; left:6px; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.corner.tr{ top:6px; right:6px; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.corner.bl{ bottom:6px; left:6px; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.corner.br{ bottom:6px; right:6px; border-left:0; border-top:0; border-bottom-right-radius:8px; }

/* PRESS START text effect */
.game-start-press{
  margin-top:10px; font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color: rgba(255,255,255,.62); animation: pressBlink 1.4s steps(2) infinite;
}
@keyframes pressBlink{ 0%, 60%{opacity:1} 61%,100%{opacity:.18} }

/* === EXTENDED THEMES FOR ALL GAMES === */
.bubble-theme .game-start-btn-inner{
  border-color:#a5f3fc;
  box-shadow:
    0 0 0 4px rgba(6,182,214,.18),
    0 0 24px rgba(6,182,214,.55),
    0 0 52px rgba(139,92,246,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.bubble-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #a5f3fc 0%, #06b6d4 20%, #22d3ee 45%, #8b5cf6 85%);
}
.bubble-theme{ color:#22d3ee; }
.bubble-theme .game-start-meta{ color:#cffafe; background: rgba(6,182,214,.20); border-color: rgba(165,243,252,.32); }

.fruit-theme .game-start-btn-inner{
  border-color:#fed7aa;
  box-shadow:
    0 0 0 4px rgba(249,115,22,.18),
    0 0 24px rgba(249,115,22,.55),
    0 0 52px rgba(239,68,68,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.fruit-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #fef08a 0%, #fdba74 20%, #fb923c 40%, #f97316 60%, #ef4444 90%);
}
.fruit-theme{ color:#fb923c; }
.fruit-theme .game-start-meta{ color:#ffedd5; background: rgba(249,115,22,.20); border-color: rgba(254,215,170,.32); }

.caro-theme .game-start-btn-inner{
  border-color:#c4b5fd;
  box-shadow:
    0 0 0 4px rgba(99,102,241,.18),
    0 0 24px rgba(99,102,241,.55),
    0 0 52px rgba(139,92,246,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.caro-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #e0e7ff 0%, #a5b4fc 18%, #818cf8 35%, #6366f1 60%, #8b5cf6 85%);
}
.caro-theme{ color:#818cf8; }
.caro-theme .game-start-meta{ color:#ede9fe; background: rgba(99,102,241,.20); border-color: rgba(196,181,253,.32); }

.fish-theme .game-start-btn-inner{
  border-color:#7dd3fc;
  box-shadow:
    0 0 0 4px rgba(6,182,214,.18),
    0 0 24px rgba(14,165,233,.55),
    0 0 52px rgba(2,132,199,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.fish-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 15%, #38bdf8 35%, #0ea5e9 60%, #0284c7 85%);
}
.fish-theme{ color:#38bdf8; }
.fish-theme .game-start-meta{ color:#e0f2fe; background: rgba(14,165,233,.20); border-color: rgba(125,211,252,.32); }

.candy-theme .game-start-btn-inner{
  border-color:#f9a8d4;
  box-shadow:
    0 0 0 4px rgba(236,72,153,.18),
    0 0 24px rgba(236,72,153,.55),
    0 0 52px rgba(245,158,11,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.candy-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #fce7f3 0%, #f9a8d4 18%, #ec4899 38%, #f59e0b 75%, #fbbf24 90%);
}
.candy-theme{ color:#ec4899; }
.candy-theme .game-start-meta{ color:#fce7f3; background: rgba(236,72,153,.20); border-color: rgba(249,168,212,.32); }

.whack-theme .game-start-btn-inner{
  border-color:#fecaca;
  box-shadow:
    0 0 0 4px rgba(239,68,68,.18),
    0 0 24px rgba(239,68,68,.55),
    0 0 52px rgba(185,28,28,.28),
    0 12px 32px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.whack-theme .game-start-icon-wrap{
  background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 15%, #f87171 35%, #ef4444 60%, #b91c1c 85%);
}
.whack-theme{ color:#ef4444; }
.whack-theme .game-start-meta{ color:#fee2e2; background: rgba(239,68,68,.20); border-color: rgba(254,202,202,.32); }


.menu-overlay.closing{ opacity:0; pointer-events:none; transition: opacity .2s ease; }
.menu-drawer{ transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.menu-overlay.closing .menu-drawer{ transform: translateX(-100%); }


.fappycat-wrap{
  /* pretty version */
  position:relative;
  width:100%;
  max-width:380px;
  margin:0 auto;
  background: linear-gradient(180deg,#87CEEB 0%, #B0E0E6 40%, #E0F6FF 100%);
  border-radius:18px;
  overflow:hidden;
  border:2px solid #0f172a;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
#fappycat-canvas{
  display:block;
  width:100%;
  background: transparent;
  touch-action:none;
}
.fappycat-btn{
  transition:transform .12s ease, background .12s ease;
}
.fappycat-btn:active{
  transform:scale(.92);
  background:rgba(15,23,42,.85) !important;
}
@keyframes fappyShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.fappy-shake{ animation:fappyShake .2s ease 2; }
.fappycat-cloud-anim{
  animation: cloudMove linear infinite;
}
@keyframes cloudMove{
  from{ transform: translateX(400px); }
  to{ transform: translateX(-100px); }
}
.racing-wrap{
  position:relative;
  width:100%;
  max-width:380px;
  margin:0 auto;
  background:#0f172a;
  border-radius:18px;
  overflow:hidden;
  border:2px solid #1e293b;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
#racing-canvas{
  display:block;
  width:100%;
  background:linear-gradient(180deg,#334155 0%, #1e293b 100%);
  touch-action:none;
}
.racing-btn{
  transition:transform .12s ease, background .12s ease;
}
.racing-btn:active{
  transform:scale(.92);
  background:rgba(15,23,42,.85) !important;
}
.racing-road-lines{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:4px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 22px, transparent 22px 44px);
  opacity:.7;
  pointer-events:none;
  z-index:2;
}
@keyframes racingShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
.racing-shake{ animation:racingShake .18s ease 2; }

/* === ARCADE HUD V3 - No blur, no nháy, 1 dòng siêu nhẹ === */
.arcade-hud{
  position:absolute; top:6px; left:6px; right:6px; z-index:30;
  display:flex; justify-content:space-between; align-items:center; gap:4px;
  pointer-events:none; font-family:'Baloo 2', system-ui, sans-serif;
}
.arcade-hud-left, .arcade-hud-right{ display:flex; gap:4px; align-items:center; }
.hud-chip{
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
  padding:3px 7px; border-radius:999px; font-size:10.5px; font-weight:800; line-height:1;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
  color:#fff; min-height:19px; letter-spacing:.01em;
  transform:none !important; animation:none !important; /* cấm nháy */
}
.hud-chip.timer{ background:#1f2937; }
.hud-chip.timer.warn{ background:#dc2626; color:#fff; transform:none !important; animation:none !important; }
.hud-chip.score{ background:#16a34a; }
.hud-chip.combo{ background:#7c3aed; }
.hud-chip.meta{ background:rgba(0,0,0,.35); color:#fff; font-size:10px; }
.fish-wrap, .candy-wrap, .bubble-wrap, .fruit-wrap, .whack-grid, .memory-grid{ position:relative; }
.fish-wrap, .candy-wrap, .bubble-wrap, .fruit-wrap, .whack-grid{ padding-top:34px !important; }
.memory-grid{ padding-top:36px !important; margin-top:0 !important; }
.quiz-head.arcade{
  background:#111827 !important; border-radius:10px !important; padding:5px 8px !important;
  margin-bottom:8px !important; display:flex !important; justify-content:space-between !important;
  align-items:center !important; gap:6px !important; min-height:32px !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.quiz-head.arcade .timer-wrap{
  height:5px !important; background:rgba(255,255,255,.18) !important; border-radius:999px !important;
  max-width:68px !important; flex:1 !important; overflow:hidden !important;
}
.quiz-head.arcade #timer-text{ color:rgba(255,255,255,.75) !important; font-size:10px !important; min-width:24px !important; font-weight:700 !important; }
#panel-memory .mem-hud-bar, #panel-whack .whack-hud-bar, #panel-candy .candy-hud-bar, #panel-fish .fish-hud-bar, #panel-bubble .bubble-hud-bar, #panel-fruit .fruit-hud-bar{
  background:#111827; border-radius:10px; padding:5px 8px; margin-bottom:2px;
  display:flex; justify-content:space-between; align-items:center; gap:6px; min-height:32px;
  border:1px solid rgba(255,255,255,.08);
}

/* === FIX: Bỏ lớp nền màu của bộ đếm thời gian ở Bóng Bay và Lật Thẻ === */
#panel-memory .mem-hud-bar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}
#panel-bubble .arcade-hud .hud-chip.timer,
#panel-memory .hud-chip.timer{
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-weight: 800 !important;
}
#panel-bubble .arcade-hud .hud-chip.timer #bubble-time,
#panel-memory .hud-chip.timer #mem-time{
  background: transparent !important;
  color: inherit !important;
}



/* --- block --- */


@font-face {
  font-family: "Optimistic";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/OptimisticAI_VF_Optimized.woff2") format("woff2");
}
@font-face {
  font-family: "Optimistic Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/OptimisticMono_W_TextRegular.woff2") format("woff2");
}
:where(html) {
  font-family: "Optimistic", system-ui, sans-serif;
}
:where(code, pre, kbd, samp) {
  font-family: "Optimistic Mono", ui-monospace, monospace;
}

@keyframes bumpWall{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.house-pet.bump-wall{ animation: bumpWall .22s ease; }
.house-pet.bump-wall .pet-avatar img{ filter: drop-shadow(0 0 8px rgba(239,68,68,.45)) !important; }


/* === 9 VÁCH MỚI - Hiển thị ảnh sắc nét, không nền xấu === */
.furniture-item[data-decor-id^="vach_"]{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.furniture-item[data-decor-id^="vach_"] img,
.furniture-item.wall-block img{
  width:100% !important; height:100% !important;
  object-fit: contain !important;
  display:block !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)) !important;
  background: transparent !important;
  border-radius: 8px;
}
.decor-card[data-wall="1"] .d-icon.has-img{
  background: #fff !important;
  border-color:#fde68a !important;
  padding:2px;
}
.decor-card[data-wall="1"] .d-icon img{
  width:100%; height:100%; object-fit:contain;
}



/* --- block --- */


@font-face {
  font-family: "Optimistic";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/OptimisticAI_VF_Optimized.woff2") format("woff2");
}
@font-face {
  font-family: "Optimistic Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/OptimisticMono_W_TextRegular.woff2") format("woff2");
}
:where(html) {
  font-family: "Optimistic", system-ui, sans-serif;
}
:where(code, pre, kbd, samp) {
  font-family: "Optimistic Mono", ui-monospace, monospace;
}

/* ===== PET IMAGE OVERRIDE - NEW CUTE IMAGES EQUAL TO OLD ICON SIZE ===== */
.pet-avatar{ display:grid; place-items:center; overflow:hidden; }
.pet-avatar img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:-webkit-optimize-contrast; }
.shop-mini-icon{ display:grid; place-items:center; overflow:hidden; padding:4px; }
.shop-mini-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.detail-icon{ display:grid; place-items:center; overflow:hidden; }
.detail-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.house-pet .pet-avatar img{ width:32px; height:32px; } /* bằng icon cũ 28-32px */
.shop-mini-icon img{ width:32px; height:32px; } /* bằng 26px cũ nhưng padding */
@media(max-width:480px){ .shop-mini-icon img{ width:28px; height:28px; } .house-pet .pet-avatar img{ width:28px; height:28px; } }
/* fallback icon span hidden when img loads */
.pet-img-fallback{ font-size:inherit; line-height:1; }


/* --- block --- */



:root{
  --purple:#8b5cf6; --purple-dark:#6d28d9; --pink:#ec4899; --bg:#fdf2ff;
  --glass: rgba(255,255,255,0.72); --glass-border: rgba(255,255,255,0.6);
  --shadow: 0 12px 32px rgba(109,40,217,0.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:'Quicksand',system-ui,sans-serif; background: radial-gradient(1200px 600px at 20% -10%, #fde68a 0, transparent 60%), radial-gradient(900px 500px at 100% 0%, #c4b5fd 0, transparent 60%), var(--bg); color:#1f2937; min-height:100dvh; }
a{color:inherit; text-decoration:none}
header{position:sticky; top:0; z-index:20; backdrop-filter: blur(16px) saturate(1.4); background: rgba(255,255,255,0.72); border-bottom:1px solid rgba(0,0,0,0.06);}
.h-wrap{max-width:980px; margin:0 auto; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-ring{width:42px; height:42px; border-radius:14px; background: linear-gradient(135deg, #a78bfa, #ec4899); display:grid; place-items:center; box-shadow: var(--shadow); color:#fff; text-decoration:none; cursor:pointer; transition: transform .18s ease, filter .18s ease;}
.logo-ring:hover{transform: translateY(-1px) scale(1.03); filter:brightness(1.05);}
.logo-ring:active{transform: scale(0.97);}
.logo-ring svg{display:block;}
.shop-title{font-family:'Baloo 2'; font-weight:800; font-size:18px; line-height:1; color:#4c1d95;}
.shop-sub{font-size:11px; font-weight:700; letter-spacing:.18em; color:#a78bfa; margin-top:2px;}
.user-pill{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #eee; padding:6px 10px 6px 6px; border-radius:999px; box-shadow: var(--shadow);}
.user-pill img{width:34px; height:34px; border-radius:50%; object-fit:cover; background:#ede9fe}
.user-meta b{font-size:13px; display:block; line-height:1}
.wallet-line{display:flex; gap:10px; font-size:12px; font-weight:800; color:#4b5563}
.wallet-line span{display:flex; align-items:center; gap:3px}
.btn{border:none; cursor:pointer; font-family:inherit; font-weight:800; border-radius:12px; padding:10px 16px; transition:.2s; display:inline-flex; align-items:center; justify-content:center; gap:6px}
.btn-primary{background: linear-gradient(135deg, #8b5cf6, #ec4899); color:#fff; box-shadow: 0 8px 20px rgba(139,92,246,.35);}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:#fff; border:1px solid #e9d5ff; color:#6d28d9;}
.btn-small{padding:8px 12px; font-size:13px; border-radius:10px}
.container{max-width:980px; margin:0 auto; padding:18px 14px 80px;}
.hero{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; margin-bottom:18px;}
@media(max-width:780px){ .hero{grid-template-columns:1fr} }
.card{background: var(--glass); backdrop-filter: blur(14px); border:1px solid var(--glass-border); border-radius:22px; box-shadow: var(--shadow); padding:10px;}
.hero-title{font-family:'Baloo 2'; font-size:28px; line-height:1.1; color:#4c1d95; margin:4px 0 6px;}
.hero-desc{font-size:13px; color:#6b7280; line-height:1.5}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px}
.stat{background:#fff; border-radius:16px; padding:10px 12px; border:1px solid #f5e9ff; text-align:center}
.stat b{font-size:18px; display:block; color:#6d28d9; font-family:'Baloo 2'}
.stat span{font-size:11px; color:#9ca3af; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.tabs{display:flex; gap:8px; overflow:auto; padding-bottom:8px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{white-space:nowrap; border:2px solid transparent; background:#fff; padding:10px 16px; border-radius:999px; font-weight:800; font-size:13.5px; cursor:pointer; transition:.2s; box-shadow:0 4px 12px rgba(0,0,0,.04)}
.tab-btn.active{background: linear-gradient(135deg, #ede9fe, #fce7f3); border-color:#c4b5fd; color:#6d28d9;}
.game-area{min-height:420px}
.quiz-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px}
.timer-wrap{flex:1; height:12px; background:#ede9fe; border-radius:999px; overflow:hidden; position:relative; border:1px solid #ddd6fe}
.timer-bar{height:100%; width:100%; background: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b); transform-origin:left; transition: width .1s linear;}
.timer-text{font-weight:800; font-size:13px; min-width:44px; text-align:right; color:#6d28d9}
.question{font-family:'Baloo 2'; font-size:22px; line-height:1.25; color:#1e1b4b; margin:8px 0 8px; min-height:56px}
.options{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:560px){ .options{grid-template-columns:1fr} }
.opt{padding:14px 14px; border-radius:16px; border:2px solid #ede9fe; background:#fff; font-weight:700; font-size:14px; text-align:left; cursor:pointer; transition:.18s; position:relative; overflow:hidden}
.opt:hover{border-color:#c4b5fd; transform: translateY(-1px)}
.opt.correct{background:#dcfce7 !important; border-color:#22c55e !important; color:#065f46}
.opt.wrong{background:#fee2e2 !important; border-color:#ef4444 !important; color:#7f1d1d}
.opt:disabled{opacity:.9; cursor:not-allowed}
.badge{display:inline-flex; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800}
.badge-green{background:#dcfce7; color:#15803d}
.badge-red{background:#fee2e2; color:#b91c1c}
.badge-purple{background:#ede9fe; color:#6d28d9}
/* ===== MEMORY GAME V2 - 5 COLS FIX BLANK ===== */
#panel-memory{
  background: linear-gradient(180deg, #ffffff 0%, #fdfaff 100%);
  border: 1.5px solid #f3e8ff;
  border-radius: 22px;
  padding: 16px 14px 18px;
  box-shadow: 0 10px 30px rgba(109,40,217,.07), 0 1px 0 rgba(255,255,255,.9) inset;
  position: relative;
  overflow: hidden;
}
#panel-memory::before{
  content:'';
  position:absolute; inset:0 0 auto 0; height:96px;
  background: radial-gradient(420px 140px at 20% 0%, rgba(168,85,247,.14), transparent 70%),
              radial-gradient(360px 120px at 90% 0%, rgba(236,72,153,.12), transparent 70%);
  pointer-events:none;
}
.memory-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:560px;
  margin:18px auto 8px;
}
@media(max-width:420px){
  .memory-grid{ gap:9px; max-width:100%; }
}
@media(min-width:700px){
  .memory-grid{ gap:14px; max-width:580px; }
}

.mem-card{
  width: calc(20% - 9.6px);
  max-width: 98px;
  aspect-ratio: 0.88 / 1;
  cursor:pointer;
  position:relative;
  flex: 0 0 auto;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  background: transparent;
}
@media(max-width:420px){
  .mem-card{ width: calc(20% - 7.2px); aspect-ratio: 0.84 / 1; }
}
.mem-card-inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition: transform .6s cubic-bezier(.34,1.2,.64,1);
  border-radius:18px;
}
.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.mem-card:active .mem-card-inner{ transform: rotateY(0deg) scale(.96); }
.mem-card.flipped:active .mem-card-inner,
.mem-card.matched:active .mem-card-inner{ transform: rotateY(180deg) scale(.96); }

.mem-card-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1.6px solid;
  box-shadow: 0 6px 18px rgba(109,40,217,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

.mem-front{
  background: radial-gradient(220px 140px at 30% 10%, #fff 0%, #faf5ff 38%, #f5f3ff 68%, #ede9fe 100%);
  border-color:#e9d5ff;
}
.mem-front::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(2px 2px at 22% 28%, rgba(139,92,246,.22) 0, transparent 100%),
    radial-gradient(2.2px 2.2px at 68% 62%, rgba(236,72,153,.18) 0, transparent 100%),
    radial-gradient(1.6px 1.6px at 48% 84%, rgba(109,40,217,.14) 0, transparent 100%);
  opacity:.9;
}
.mem-front::after{
  content:'';
  position:absolute; inset:7px;
  border-radius:12px;
  border:1px dashed rgba(167,139,250,.28);
  pointer-events:none;
}
.mem-front b{
  position:relative; z-index:1;
  font-family:'Baloo 2', sans-serif;
  font-weight:800; font-size:26px; line-height:1;
  background: linear-gradient(135deg,#8b5cf6 0%, #a78bfa 45%, #ec4899 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.mem-back{
  background: linear-gradient(135deg,#ffffff 0%, #fffbeb 55%, #fef9c3 100%);
  border-color:#fde68a;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.mem-emoji{
  font-size:34px;
  line-height:1;
  display:block;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", system-ui, sans-serif;
  /* QUAN TRỌNG: không dùng filter / will-change / transform ở đây để tránh lỗi trắng thẻ trên Android */
}
@media(max-width:420px){ .mem-emoji{ font-size:28px; } .mem-front b{ font-size:22px; } }

@keyframes memEnter{
  from{ opacity:0; transform: translateY(12px) scale(.92); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes memPopIn{
  0%{ transform: scale(.2) rotate(-8deg); }
  60%{ transform: scale(1.22) rotate(4deg); }
  100%{ transform: scale(1) rotate(0); }
}
.mem-card.flipped .mem-back .mem-emoji{ animation: memPopIn .42s cubic-bezier(.34,1.2,.64,1) both; }

.mem-card.matched .mem-card-face.mem-back{
  background: linear-gradient(135deg,#dcfce7 0%, #f0fdf4 55%, #ffffff 100%);
  border-color:#86efac;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 12px 26px rgba(34,197,94,.22);
}
.mem-card.matched{ pointer-events:none; }
@keyframes memMatched{
  0%,100%{ transform: rotateY(180deg) scale(1); }
  50%{ transform: rotateY(180deg) scale(1.10); }
}
.mem-card.matched .mem-card-inner{ animation: memMatched .5s ease; }

@keyframes memShake{
  0%,100%{ transform: rotateY(180deg) translateX(0); }
  25%{ transform: rotateY(180deg) translateX(-5px); }
  75%{ transform: rotateY(180deg) translateX(5px); }
}
.mem-card.shake .mem-card-inner{ animation: memShake .28s ease; }

/* Header badges polish */
#panel-memory .badge{
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.01em;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.float-xu{position:absolute; font-weight:800; font-size:14px; pointer-events:none; animation: floatUp .9s ease-out forwards; text-shadow:0 1px 0 #fff}
@keyframes floatUp{0%{transform:translateY(0) scale(1); opacity:1} 100%{transform:translateY(-42px) scale(1.15); opacity:0}}
.toast-box{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:999999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{background:#1f2937; color:#fff; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:700; box-shadow:0 8px 20px rgba(0,0,0,.2); transition:.3s; max-width:90vw; text-align:center}
.login-wall{position:absolute; inset:0; background:rgba(255,255,255,.82); backdrop-filter:blur(8px); display:grid; place-items:center; text-align:center; padding:20px; border-radius:22px}
.muted{color:#6b7280; font-size:13px}
.stun{filter:grayscale(1) blur(1px); pointer-events:none}

/* ===== PHONE MENU STYLE ===== */
.phone-topbar{display:flex; align-items:center; gap:12px; background: rgba(255,255,255,0.88); backdrop-filter: blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,0.6); border-radius:18px; padding:10px 12px; box-shadow: var(--shadow); margin-bottom:14px; position:sticky; top:4px; z-index:15}
.phone-menu-btn{width:44px; height:44px; border-radius:12px; border:1px solid #e9d5ff; background: linear-gradient(135deg,#fff,#faf5ff); display:grid; place-items:center; cursor:pointer; box-shadow:0 4px 12px rgba(109,40,217,.12); flex-shrink:0}
.phone-menu-btn:active{transform:scale(.96)}
.phone-menu-icon{display:flex; flex-direction:column; gap:4px; width:18px}
.phone-menu-icon i{display:block; height:2.5px; background:#6d28d9; border-radius:99px; width:100%; transition:.2s}
.phone-menu-icon i:nth-child(2){width:70%}
.phone-title-wrap{flex:1; min-width:0}
.phone-current-title{font-family:'Baloo 2'; font-weight:800; font-size:16px; color:#4c1d95; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone-current-sub{font-size:11px; color:#9ca3af; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone-badge{font-size:10px; font-weight:800; letter-spacing:.08em; background:#ede9fe; color:#6d28d9; padding:6px 10px; border-radius:999px; border:1px solid #ddd6fe}

.menu-overlay{position:fixed; inset:0; z-index:40; background: rgba(15,10,30,.42); backdrop-filter: blur(6px); display:flex; justify-content:flex-start; align-items:stretch; animation: fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.menu-drawer{width:86%; max-width:340px; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); border-right:1px solid #ede9fe; box-shadow: 12px 0 32px rgba(0,0,0,.18); padding:8px; display:flex; flex-direction:column; gap:14px; animation: slideIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{transform:translateX(-100%)} to{transform:translateX(0)}}
.drawer-header{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding-bottom:4px; border-bottom:1px dashed #e9d5ff}
.close-drawer{width:36px; height:36px; border-radius:10px; border:1px solid #ede9fe; background:#fff; cursor:pointer; font-weight:800; color:#6b7280}
.menu-drawer{width:92%; max-width:400px;}
.drawer-list{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:8px 2px 4px}
.drawer-item{
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:9px; padding:14px 8px 12px; border-radius:18px;
  border:1.6px solid #f3e8ff; background:#fff;
  cursor:pointer; text-align:center; transition:.22s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 4px 12px rgba(109,40,217,.06); position:relative; overflow:hidden;
  min-height:96px; aspect-ratio:1/1;
}
.drawer-item::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(220px 120px at 50% 0%, rgba(255,255,255,.9), transparent 70%);
  pointer-events:none; opacity:.9;
}
.drawer-item:hover{border-color:#c4b5fd; transform: translateY(-2px); box-shadow:0 10px 22px rgba(109,40,217,.14)}
.drawer-item:active{transform:scale(.96)}
.drawer-item.active{border-color:#a78bfa; background: linear-gradient(135deg,#ede9fe 0%, #fae8ff 55%, #ffe4f0 100%); box-shadow:0 10px 24px rgba(139,92,246,.22), inset 0 1px 0 rgba(255,255,255,.9)}
.drawer-item.active::after{
  content:'✓'; position:absolute; top:7px; right:7px; width:18px; height:18px; border-radius:999px;
  background:#8b5cf6; color:#fff; font-size:11px; font-weight:900; display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(139,92,246,.4);
}
.drawer-icon{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:26px; color:#fff; flex-shrink:0; box-shadow:0 6px 14px rgba(0,0,0,.14); position:relative; z-index:1}
.drawer-icon img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.drawer-icon.has-img{
  background: #fff !important;
  border:1px solid #f3e8ff;
}

.drawer-text{display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0; min-width:0; width:100%; position:relative; z-index:1}
.drawer-text b{font-size:12.5px; font-weight:800; color:#1f2937; line-height:1.25; text-align:center; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:30px}
.drawer-text span, .drawer-arrow{display:none !important}
.drawer-footer{margin-top:auto; padding-top:10px; border-top:1px dashed #f3e8ff}
@media(max-width:360px){ .drawer-list{gap:8px} .drawer-item{min-height:88px; padding:12px 6px} .drawer-icon{width:46px; height:46px; font-size:23px} .drawer-text b{font-size:11.5px} }
@media(min-width:780px){ .menu-drawer{width:360px} }


/* ===== PET HOUSE GAME V3 - DI CHUYỂN TRÊN NỀN GẠCH NÂU ===== */
.pet-house-wrap{margin-top:12px; position:relative;}
.furni-edit-panel{
  position:absolute; z-index:70; width:300px; max-width:calc(100% - 16px);
  background:linear-gradient(180deg,#fff 96%,#fdfaff);
  border:1.6px solid #e9d5ff; border-radius:18px; padding:12px 12px 10px;
  box-shadow:0 16px 36px rgba(109,40,217,.22), 0 0 0 1px rgba(255,255,255,.8) inset;
  animation:fepPop .26s cubic-bezier(.22,1.15,.32,1); pointer-events:auto;
}
.furni-edit-panel::before{
  content:''; position:absolute; top:-7px; left:24px; width:12px; height:12px;
  background:#fff; border-left:1.6px solid #e9d5ff; border-top:1.6px solid #e9d5ff;
  transform:rotate(45deg); border-radius:2px 0 0 0;
}
.furni-edit-panel.above::before{ top:auto; bottom:-7px; transform:rotate(225deg); }
@keyframes fepPop{ from{opacity:0; transform:translateY(8px) scale(.96);} to{opacity:1; transform:translateY(0) scale(1);} }
@media(max-width:380px){ .furni-edit-panel{width:calc(100% - 12px); left:6px !important; right:6px; max-width:none;} .furni-edit-panel::before{left:50%; margin-left:-6px;} }
.pet-house{
  position:relative; width:100%; height:420px; border-radius:22px;
  border:3px solid #7f5539; overflow:hidden;
  background-color:#bc8a5f;
  background-image:
    repeating-linear-gradient(0deg, rgba(101,67,33,0.38) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(90deg, rgba(101,67,33,0.38) 0 2px, transparent 2px 52px),
    radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,0.26), transparent 62%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), inset 0 32px 44px rgba(255,255,255,0.20), inset 0 -26px 34px rgba(0,0,0,0.18), 0 14px 30px rgba(101,67,33,0.22);
  isolation:isolate;
}
@media(min-width:700px){ .pet-house{height:420px} }
.pet-house::before{
  content:''; position:absolute; inset:0 0 auto 0; height:70px;
  background: linear-gradient(180deg, #ede0d4 0%, #e6ccb2 58%, rgba(230,204,178,0) 100%);
  border-bottom:2px solid rgba(127,85,57,0.18);
  z-index:1; pointer-events:none;
}
.pet-house::after{
  content:'🏠 Nhà của tôi'; position:absolute; top:10px; left:14px;
  font-family:'Baloo 2'; font-weight:800; font-size:12px; letter-spacing:.04em;
  color:#7f5539; background:rgba(255,255,255,0.84); padding:4px 10px; border-radius:999px; border:1px solid rgba(127,85,57,0.14);
  z-index:2; backdrop-filter:blur(6px);
}
.house-deco{display:none !important; pointer-events:none;}
.house-deco i{display:none !important;}
.house-pet{
  position:absolute; width:74px; display:flex; flex-direction:column; align-items:center;
  will-change:left, top, transform; z-index:3; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition: filter .22s;
}
.pet-avatar{
  width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:30px;
  background: linear-gradient(135deg,#fff,#fef9c3); border:2px solid #fff;
  box-shadow:0 6px 14px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.9);
  position:relative; transition: transform .22s, box-shadow .22s, border-color .22s, filter .22s;
}
.house-pet:active .pet-avatar{transform:scale(.93)}
.pet-name-tag{
  margin-top:6px; font-family:'Baloo 2'; font-size:11px; font-weight:800; line-height:1;
  color:#4a2c12; background:rgba(255,255,255,0.94); padding:3px 7px; border-radius:999px;
  border:1px solid rgba(127,85,57,0.16); white-space:nowrap; max-width:92px; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.pet-mini-bar{
  width:48px; height:5px; background:rgba(255,255,255,0.82); border-radius:999px; overflow:hidden; margin-top:4px;
  border:1px solid rgba(127,85,57,0.16); box-shadow:inset 0 1px 2px rgba(0,0,0,.06)
}
.pet-mini-bar > i{display:block; height:100%; width:0%; background:linear-gradient(90deg,#8b5cf6,#ec4899); border-radius:999px; transition:width .4s linear}
.pet-bubble{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  background:#fff; color:#4c1d95; font-size:11px; font-weight:700; line-height:1.35;
  padding:6px 9px; border-radius:12px; border:1px solid #e9d5ff; white-space:normal; width:max-content; max-width:136px; text-align:center;
  box-shadow:0 8px 18px rgba(109,40,217,.13); pointer-events:none; z-index:6;
  opacity:0; animation: bubbleIn .28s ease forwards;
}
.pet-bubble::after{
  content:''; position:absolute; top:100%; left:50%; margin-left:-5px; width:10px; height:10px;
  background:#fff; border-right:1px solid #e9d5ff; border-bottom:1px solid #e9d5ff; transform:rotate(45deg) translateY(-5px);
}
@keyframes bubbleIn{from{opacity:0; transform:translateX(-50%) translateY(2px) scale(.96)} to{opacity:1; transform:translateX(-50%) translateY(-6px) scale(1)}}
/* TRẠNG THÁI THEO YÊU CẦU */
.house-pet.hungry .pet-avatar{
  border-color:#fecaca; animation: redPulse 1.18s ease-in-out infinite alternate;
  box-shadow:0 0 0 3px rgba(239,68,68,.18), 0 0 18px 9px rgba(239,68,68,.62), 0 8px 18px rgba(0,0,0,.12);
}
.house-pet.ready .pet-avatar{
  border-color:#bbf7d0; animation: greenPulse 1.05s ease-in-out infinite alternate;
  box-shadow:0 0 0 3px rgba(34,197,94,.22), 0 0 24px 11px rgba(34,197,94,.74), 0 10px 22px rgba(0,0,0,.12);
}
.house-pet.working .pet-avatar{
  border-color:#ddd6fe; box-shadow:0 4px 12px rgba(0,0,0,.10); filter:saturate(.92) brightness(.98);
}
.house-pet.working::after{
  content:'🩷'; position:absolute; top:-6px; right:-4px; font-size:12px; background:#fff; border-radius:999px; width:20px; height:20px; display:grid; place-items:center; border:1px solid #e9d5ff; box-shadow:0 2px 6px rgba(0,0,0,.08); z-index:7;
}
.house-pet.ready::before{
  content:'💰'; position:absolute; top:-8px; right:-6px; font-size:11px; background:#dcfce7; border:1px solid #86efac; width:22px; height:22px; display:grid; place-items:center; border-radius:999px; z-index:7; animation: coinBounce .9s ease infinite;
}
@keyframes redPulse{0%{box-shadow:0 0 0 3px rgba(239,68,68,.12), 0 0 14px 6px rgba(239,68,68,.48)}100%{box-shadow:0 0 0 5px rgba(239,68,68,.20), 0 0 28px 13px rgba(239,68,68,.82)}}
@keyframes greenPulse{0%{box-shadow:0 0 0 3px rgba(34,197,94,.16), 0 0 16px 8px rgba(34,197,94,.56)}100%{box-shadow:0 0 0 6px rgba(34,197,94,.28), 0 0 32px 16px rgba(34,197,94,.88)}}
@keyframes coinBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.house-pet.moving .pet-avatar{transform:translateY(-1px)}
.house-pet.flip .pet-avatar{transform:scaleX(-1)}
.house-pet.flip.moving .pet-avatar{transform:scaleX(-1) translateY(-1px)}

.pet-timer{
  /* FIX: đối xứng với zzz - góc trái trên avatar */
  position:absolute; top:-8px; left:-8px; bottom:auto; right:auto; transform:none !important;
  font-family:'Baloo 2'; font-size:11px; font-weight:800; line-height:1;
  padding:4px 8px; border-radius:999px; white-space:nowrap; z-index:7;
  background:#fff; border:1.2px solid #e9d5ff; box-shadow:0 2px 6px rgba(0,0,0,.08);
  pointer-events:none; transition:all .2s;
  min-height:18px; display:inline-flex; align-items:center;
}
.pet-timer.working{ color:#7c3aed; border-color:#ddd6fe; background:#f5f3ff; }
.pet-timer.ready{ color:#15803d; border-color:#86efac; background:#dcfce7; animation: timerPulse .9s ease infinite alternate; }
.pet-timer.hungry{ color:#b91c1c; border-color:#fecaca; background:#fff5f5; }
@keyframes timerPulse{0%{transform:scale(1)}100%{transform:scale(1.06)}}
.house-pet.working .pet-timer{ transform:none !important; }


.house-pet.expired .pet-avatar{
  border-color:#444; background: linear-gradient(135deg,#e5e7eb,#9ca3af);
  animation: blackPulse 1.2s ease-in-out infinite alternate;
  box-shadow:0 0 0 3px rgba(0,0,0,.18), 0 0 18px 10px rgba(0,0,0,.58), 0 8px 16px rgba(0,0,0,.18);
  filter: grayscale(0.85) brightness(0.9);
}
.house-pet.expired::after{
  content:'🥺'; position:absolute; top:-6px; right:-4px; font-size:11px; background:#111; color:#fff; border-radius:999px; width:18px; height:18px; display:grid; place-items:center; border:1px solid #333; z-index:7;
}
@keyframes blackPulse{0%{box-shadow:0 0 0 2px rgba(0,0,0,.12), 0 0 12px 6px rgba(0,0,0,.42)}100%{box-shadow:0 0 0 4px rgba(0,0,0,.20), 0 0 22px 12px rgba(0,0,0,.72)}}
.pet-timer.expired{ color:red; border-color:#333; background:#111; }

.house-toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center}
.house-stat{font-size:12px; font-weight:800; background:#fff; border:1px solid #f3e8ff; padding:6px 11px; border-radius:999px; color:#6d28d9; box-shadow:0 2px 8px rgba(109,40,217,.06)}
/* shop grid vẫn dùng */
.pet-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:12px}
#pet-grid{display:block !important;}
@media(max-width:480px){ .pet-grid{grid-template-columns:1fr 1fr} }


/* ==== SHOP 5 PET / DÒNG - FIX SCROLL CHE CUỐI ==== */
#shop-grid.pet-grid{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap:8px !important;
  padding-bottom: 32px !important;
  padding-bottom: calc(32px + 72px) !important;
}
@media(max-width:680px){
  #shop-grid.pet-grid{
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap:6px !important;
  }
}
@media(max-width:420px){
  #shop-grid.pet-grid{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap:6px !important;
  }
}
@media(min-width:421px) and (max-width:560px){
  #shop-grid.pet-grid{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
}

.shop-mini-card{
  background: #fff;
  border: 1.2px solid #f3e8ff;
  border-radius: 14px;
  padding: 8px 5px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow: 0 4px 12px rgba(139,92,246,0.06);
  cursor:pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.shop-mini-card:active{ transform: scale(.97); }
.shop-mini-card:hover{ border-color:#d8b4fe; box-shadow: 0 10px 24px rgba(139,92,246,0.14); transform: translateY(-2px); }
.shop-mini-icon{
  width:46px; height:46px;
  border-radius:12px;
  background: linear-gradient(135deg,#fef9c3,#fce7f3);
  display:grid; place-items:center;
  font-size:26px;
  margin-bottom:6px;
  border:1px solid #fde68a;
  flex-shrink:0;
}
@media(max-width:480px){
  .shop-mini-icon{ width:40px; height:40px; font-size:22px; border-radius:10px; }
}
.shop-mini-name{
  font-family:'Baloo 2'; font-weight:800; font-size:12px; color:#4c1d95; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
@media(max-width:480px){ .shop-mini-name{ font-size:11px; } }
.shop-mini-price{
  margin-top:3px; font-weight:800; font-size:10.5px; color:#d97706;
  background:#fffbeb; border:1px solid #fde68a; padding:2px 6px; border-radius:999px;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shop-mini-buy{
  margin-top:6px; width:100%;
  background: linear-gradient(135deg,#f59e0b,#ec4899);
  color:#fff; border:none; border-radius:8px; padding:6px 4px;
  font-weight:800; font-size:11px; cursor:pointer;
  box-shadow: 0 4px 10px rgba(245,158,11,.22);
  transition:.18s;
  white-space:nowrap;
}
.shop-mini-buy:active{ transform: scale(.96); }

/* Detail modal */
#pet-detail-modal{
  display:none; position:fixed; inset:0; z-index:95;
  background: rgba(18,8,33,.55); backdrop-filter: blur(8px);
  padding:12px; align-items:center; justify-content:center;
}
#pet-detail-modal.show{ display:flex; }
.detail-card{
  background:#fff; width:100%; max-width:380px; border-radius:22px;
  overflow:hidden; box-shadow:0 24px 56px rgba(0,0,0,.32);
  animation: detailPop .32s cubic-bezier(.22,1.15,.32,1);
}
@keyframes detailPop{ from{transform:translateY(16px) scale(.96); opacity:0} to{transform:translateY(0) scale(1); opacity:1} }
.detail-head{ padding:16px 16px 12px; display:flex; gap:12px; align-items:center; border-bottom:1px solid #f3e8ff; }
.detail-icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; font-size:36px; background:linear-gradient(135deg,#fef9c3,#f5d0fe); border:1px solid #fde68a; }
.detail-rows{ padding:12px; display:grid; gap:8px; }
.detail-row{ display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid #f3e8ff; border-radius:12px; padding:9px 11px; font-size:13px; }
.detail-row span:first-child{ color:#6b7280; font-weight:700 }
.detail-row b{ color:#1f2937 }


/* ===== FIX POPUP CỬA HÀNG & CHI TIẾT PET - SCROLL ĐƯỢC ===== */
/* ==== FIX: CỬA HÀNG THÚ CƯNG - ĐẨY LÊN CAO NHẤT + LƯỚT MƯỢT ==== */
#pet-shop-modal.pet-shop-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:90;
  background: rgba(18,8,33,.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:0;
  margin:0;
  overflow:hidden; /* scroll nằm trong card, không phải overlay */
  align-items:flex-start;
  justify-content:center;
  /* đảm bảo full viewport trên iOS/Android */
  height:100dvh;
  height:100svh;
  min-height:100dvh;
}
#pet-shop-modal.pet-shop-overlay[style*="flex"]{
  display:flex !important;
}
.pet-shop-card{
  background:#fff;
  width:100%;
  max-width:640px;
  height:100dvh;
  height:100svh;
  max-height:100dvh;
  max-height:100svh;
  margin:0 auto;
  border-radius:0 0 20px 20px;
  box-shadow:0 24px 56px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.6) inset;
  animation: shopPopTop .34s cubic-bezier(.22,1.15,.32,1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-self:flex-start;
  padding-top: env(safe-area-inset-top, 0px);
}

.pet-shop-card .shop-scroll{
  padding:12px 10px 32px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  overscroll-behavior-y: contain;
  touch-action:pan-y;
  min-height:0;
  position:relative;
  scroll-padding-bottom: 100px;
}
.pet-shop-card .shop-scroll::after{
  content:'';
  display:block;
  height: 84px;
  flex-shrink:0;
}
#shop-grid.pet-grid::after{
  content:'';
  display:block;
  grid-column: 1 / -1;
  height: 1px;
}

/* custom scrollbar đẹp */
.pet-shop-card .shop-scroll::-webkit-scrollbar{width:6px}
.pet-shop-card .shop-scroll::-webkit-scrollbar-thumb{background:#e9d5ff; border-radius:999px}


/* Detail modal fix */
/* ==== FIX: PET DETAIL - CŨNG ĐẨY CAO ==== */
#pet-detail-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:95;
  background: rgba(18,8,33,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:0;
  overflow:hidden;
  align-items:flex-start;
  justify-content:center;
  height:100dvh;
  height:100svh;
}
#pet-detail-modal.show{
  display:flex !important;
}
#pet-detail-modal .detail-card{
  background:#fff;
  width:100%;
  max-width:380px;
  max-height:100dvh;
  max-height:100svh;
  height:auto;
  border-radius:0 0 22px 22px;
  overflow:hidden;
  box-shadow:0 24px 56px rgba(0,0,0,.32);
  animation: detailPop .32s cubic-bezier(.22,1.15,.32,1);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-self:flex-start;
  padding-top: env(safe-area-inset-top,0px);
}
#pet-detail-modal .detail-rows{
  overflow-y:auto;
  flex:1 1 auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  min-height:0;
}
#pet-detail-modal .detail-card > div:last-child{
  flex-shrink:0;
}

@keyframes shopPopTop{from{transform:translateY(-18px) scale(.98); opacity:0} to{transform:translateY(0) scale(1); opacity:1}} @keyframes shopPop{from{transform:scale(.94) translateY(14px); opacity:0} to{transform:scale(1) translateY(0); opacity:1}}




/* === CUSTOM CURRENCY ICONS === */
.currency-icon{ width:18px; height:18px; display:inline-block; vertical-align:-3px; object-fit:contain; }
.currency-icon.lg{ width:20px; height:20px; vertical-align:-4px; }
.currency-icon.sm{ width:16px; height:16px; }
.wallet-line span img{ width:18px; height:18px; }

/* ===== WHACK A MOLE ===== */
.whack-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:360px; margin:12px auto}
.whack-hole{aspect-ratio:1; background: radial-gradient(60% 40% at 50% 30%, #fef3c7 0, #fde68a 18%, #a16207 19%, #78350f 100%); border-radius:18px; border:2px solid #fcd34d; position:relative; overflow:hidden; cursor:pointer; box-shadow: inset 0 -8px 16px rgba(0,0,0,.25), 0 6px 14px rgba(0,0,0,.08); transition: transform .12s}
.whack-hole:active{ transform:scale(.97)}
.whack-hole{ touch-action:manipulation; user-select:none; -webkit-user-select:none }
.whack-hole-inner{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:68%; height:28%; background:#422006; border-radius:50%; box-shadow: inset 0 4px 8px rgba(0,0,0,.6)}
.whack-creature{position:absolute; bottom:18%; left:50%; transform:translateX(-50%) translateY(90%); font-size:34px; transition: transform .22s cubic-bezier(.2,.9,.3,1.2); filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); z-index:2; pointer-events:none; will-change:transform}
.whack-hole.active .whack-creature{ transform:translateX(-50%) translateY(0)}
.whack-hole.hit{ animation: whackHit .22s ease}
.whack-hole.miss{ animation: whackMiss .22s ease}
.whack-hole.bomb-hit{ animation: whackBomb .32s ease}
@keyframes whackHit{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes whackMiss{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes whackBomb{0%{transform:scale(1)}30%{transform:scale(1.12) rotate(-2deg)}60%{transform:scale(.98) rotate(2deg)}100%{transform:scale(1)}}

/* ===== FISHING LUCKY - GAME 7 - FIXED HƯỚNG BƠI ĐẸP ===== */
.fish-wrap{position:relative; height:380px; background: linear-gradient(180deg,#bae6fd 0%,#7dd3fc 18%,#0ea5e9 18.1%,#0284c7 45%,#0369a1 100%); border-radius:18px; border:1px solid #7dd3fc; overflow:hidden; margin-top:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6)}
.fish-sky{position:absolute; top:0; left:0; right:0; height:18%; background: linear-gradient(180deg,#f0f9ff,#bae6fd); border-bottom:2px dashed #fde68a}
.fish-boat{position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:34px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); z-index:5; pointer-events:none}
.fish-line{position:absolute; top:42px; left:50%; width:2px; background: linear-gradient(180deg,#44403c,#a8a29e); transform-origin:top center; border-radius:2px; z-index:4; margin-left:-1px}
.fish-hook{position:absolute; top:100%; left:50%; transform:translate(-50%,0); font-size:22px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); z-index:4; line-height:1}
.fish-water-overlay{position:absolute; inset:18% 0 0 0; background: radial-gradient(400px 120px at 50% 0%, rgba(255,255,255,.22), transparent 70%); pointer-events:none; z-index:2}
/* --- ITEM FIX --- */
.fish-item{position:absolute; line-height:1; user-select:none; pointer-events:none; will-change:transform,left,top; z-index:3; display:flex; align-items:center; justify-content:center; transition: filter .15s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.fish-item-inner{display:block; will-change:transform; transform-origin:center center; animation: fishSwim 0.42s ease-in-out infinite alternate; font-size:28px}
.fish-item.small .fish-item-inner{font-size:24px; animation-duration:0.32s}
.fish-item.big .fish-item-inner{font-size:36px; animation-duration:0.52s}
.fish-item.gold .fish-item-inner{font-size:32px; animation-duration:0.28s}
.fish-item.boot .fish-item-inner{font-size:26px; opacity:.9; animation-duration:0.6s}
.fish-item.gold{filter: drop-shadow(0 0 8px rgba(251,191,36,.85)) drop-shadow(0 3px 6px rgba(0,0,0,.18)); animation: goldFishGlow 1s infinite}
.fish-item.boot{opacity:.88}
.fish-item.flipped .fish-item-inner{transform: scaleX(-1)}
.fish-item.caught{filter: drop-shadow(0 0 0 3px #facc15) brightness(1.18); z-index:6}
.fish-item.caught .fish-item-inner{transform:scale(1.18); animation: fishCaughtPop .28s ease}
.fish-item.flipped.caught .fish-item-inner{transform: scaleX(-1) scale(1.18)}
@keyframes fishSwim{0%{transform: translateY(0) rotate(-1.2deg)} 100%{transform: translateY(-1.6px) rotate(1.2deg)}}
@keyframes fishCaughtPop{0%{transform:scale(1)} 50%{transform:scale(1.35)} 100%{transform:scale(1.18)}}
@keyframes goldFishGlow{0%,100%{filter: drop-shadow(0 0 6px rgba(251,191,36,.7))}50%{filter: drop-shadow(0 0 14px rgba(251,191,36,1))}}
.bubble{position:absolute; width:8px; height:8px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15)); border:1px solid rgba(255,255,255,.6); pointer-events:none; animation: bubbleUp linear infinite; z-index:2}
@keyframes bubbleUp{from{transform:translateY(0) translateX(0); opacity:.8} to{transform:translateY(-360px) translateX(10px); opacity:0}}



/* ===== CANDY MATCH 3 - GAME 8 ===== */
.candy-wrap{position:relative; background: linear-gradient(180deg,#fffbeb 0%, #fce7f3 18%, #fef9c3 100%); border-radius:18px; border:1px solid #fbcfe8; padding:12px; margin-top:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 20px rgba(236,72,153,.08)}
.candy-board{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; max-width:360px; margin:0 auto; background: rgba(255,255,255,.78); padding:8px; border-radius:16px; border:1px solid #fde68a; box-shadow:0 8px 20px rgba(0,0,0,.06); position:relative}
.candy-cell{aspect-ratio:1; border-radius:12px; display:grid; place-items:center; font-size:26px; background:#fff; border:1.6px solid #fde7f7; cursor:pointer; transition: transform .14s, filter .14s, border-color .14s, box-shadow .14s; user-select:none; -webkit-user-select:none; position:relative; box-shadow:0 3px 8px rgba(0,0,0,.06); touch-action:manipulation}
.candy-cell:active{transform:scale(.96)}
.candy-cell.selected{border-color:#a78bfa; box-shadow:0 0 0 3px #ddd6fe, 0 8px 18px rgba(139,92,246,.28); transform:scale(1.08); z-index:3; background:linear-gradient(135deg,#fff,#fdf4ff)}
.candy-cell.pop{animation:candyPop .38s cubic-bezier(.22,1.2,.32,1) forwards}
@keyframes candyPop{0%{transform:scale(1.08); opacity:1} 25%{transform:scale(1.22)} 100%{transform:scale(0) rotate(12deg); opacity:0}}
.candy-cell.swap{animation:candySwap .24s ease}
@keyframes candySwap{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.candy-cell.invalid{animation:candyShake .28s ease}
@keyframes candyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.candy-cell.fall{animation:candyFall .28s cubic-bezier(.2,.8,.32,1)}
@keyframes candyFall{from{transform:translateY(-18px); opacity:.2} to{transform:translateY(0); opacity:1}}
.candy-cell.hint{animation:candyHint 1s ease-in-out infinite}
@keyframes candyHint{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.0)}50%{box-shadow:0 0 0 6px rgba(236,72,153,.18)}}



/* ===== CARO X-O - GAME 9 - FIXED GRID NO OVERLAP ===== */

/* ===== FRUIT NINJA - CHÉM HOA QUẢ ===== */
.fruit-wrap{position:relative; width:100%; max-width:380px; height:380px; max-height:380px; margin:12px auto; background: radial-gradient(ellipse at 50% 0%, #fffbeb 0%, #fef3c7 12%, #fed7aa 26%, #fdba74 45%, #fb923c 68%, #f97316 85%, #ea580c 100%); border-radius:18px; border:1.5px solid #fb923c; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(249,115,22,.18); }
.fruit-canvas{display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none; position:relative; z-index:2;}
.fruit-vignette{position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.08) 100%); z-index:3;}
.fruit-flash{position:absolute; inset:0; background: radial-gradient(circle at center, rgba(255,255,255,.9) 0%, rgba(239,68,68,.25) 45%, transparent 75%); opacity:0; pointer-events:none; z-index:5; transition: opacity .2s;}
.fruit-flash.show{opacity:1;}

.caro-wrap{position:relative; background: linear-gradient(180deg,#fff 0%, #f0f9ff 65%, #fefce8 100%); border-radius:18px; border:1px solid #c4b5fd; padding:12px; margin-top:10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 20px rgba(109,40,217,.08); display:flex; flex-direction:column; align-items:center; width:100%; box-sizing:border-box}
.caro-board{display:grid; gap:6px; background:#c4b5fd; padding:10px; border-radius:18px; border:2px solid #a78bfa; box-shadow:0 8px 18px rgba(0,0,0,.08); width:100%; max-width:500px; margin:0 auto; grid-template-columns:repeat(10, minmax(0,1fr)); box-sizing:border-box; place-content:center}
.caro-cell{width:100%; aspect-ratio:1/1; min-width:0; min-height:0; background:#fff; border-radius:12px; display:grid; place-items:center; font-family:'Baloo 2'; font-weight:800; font-size:clamp(20px, 5vw, 28px); cursor:pointer; user-select:none; transition:.14s; box-shadow:0 1px 0 rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.06); position:relative; line-height:1; box-sizing:border-box; border:1.5px solid transparent}
@media(max-width:480px){ .caro-board{gap:5px; padding:8px; max-width:100%} .caro-cell{border-radius:10px; font-size:clamp(18px, 6vw, 24px)} }
.caro-cell:hover{background:#f5f3ff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(109,40,217,.14)}
.caro-cell:active{transform:scale(.96)}
.caro-cell.x{color:#6d28d9; background:linear-gradient(135deg,#ede9fe,#fff); border-color:#c4b5fd}
.caro-cell.o{color:#db2777; background:linear-gradient(135deg,#fce7f3,#fff); border-color:#f9a8d4}
.caro-cell.win{animation:caroWin .6s ease-in-out infinite alternate; background:linear-gradient(135deg,#fef9c3,#fde68a) !important; border-color:#f59e0b !important; box-shadow:0 0 0 2.5px #f59e0b, 0 6px 14px rgba(245,158,11,.32) !important; z-index:2}
@keyframes caroWin{0%{transform:scale(1)}100%{transform:scale(1.06)}}
.caro-status{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:center; margin-bottom:8px}

.caro-bet-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:center; background:#fff; border:1px solid #e9d5ff; border-radius:12px; padding:8px 10px; margin:10px 0; box-shadow:0 2px 8px rgba(109,40,217,.06)}
.caro-bet-label{font-family:'Baloo 2'; font-weight:800; color:#6d28d9; font-size:13px}
.caro-bet-input{width:86px; text-align:center; font-weight:800; font-family:'Baloo 2'; font-size:16px; color:#4c1d95; background:#f5f3ff; border:1.5px solid #c4b5fd; border-radius:10px; padding:6px 8px; outline:none}
.caro-bet-input:focus{border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.caro-bet-btn{width:32px; height:32px; border-radius:9px; border:1px solid #ddd6fe; background:#fff; font-weight:900; cursor:pointer; display:grid; place-items:center; transition:.14s}
.caro-bet-btn:hover{background:#ede9fe; transform:translateY(-1px)}
.caro-bet-quick{padding:5px 9px; border-radius:999px; border:1px solid #e9d5ff; background:#faf5ff; color:#7c3aed; font-weight:700; font-size:12px; cursor:pointer; transition:.14s}
.caro-bet-quick:hover{background:#ede9fe; border-color:#c4b5fd; transform:translateY(-1px)}
.caro-bet-quick.active{background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border-color:#6366f1; box-shadow:0 4px 10px rgba(99,102,241,.28)}
.caro-turn-dot{width:10px; height:10px; border-radius:50%; display:inline-block; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); animation:dotPulse 1s infinite}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* --- block --- */

/* ==== PLAY SYSTEM - FIXED COMPACT 4 PER ROW - FIXED AFTER SEPARATION ==== */
.play-shop-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999; /* tăng cao hơn các overlay khác */
  background:rgba(18,8,33,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:12px;
  align-items:center;
  justify-content:center;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.play-shop-overlay.show{
  display:flex !important; /* !important để ghi đè inline style display:none sau khi tách file */
}
.play-shop-card{
  background:#fff;
  width:100%;
  max-width:560px;
  max-height:min(90dvh,720px);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.6) inset;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation:shopPop .28s cubic-bezier(.22,1.15,.32,1);
  margin:auto;
  position:relative;
}

.play-shop-head{padding:12px 14px 10px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:1px solid #f3e8ff; background:linear-gradient(135deg,#faf5ff,#fdf2ff); flex-shrink:0}
.play-shop-body{padding:10px 12px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; overscroll-behavior:contain; flex:1 1 auto; min-height:0; scrollbar-width:thin}
.play-stat-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.play-stat{background:#f9f5ff; border:1px solid #ede9fe; border-radius:12px; padding:8px 10px; text-align:center}
.play-stat b{display:block; font-family:'Baloo 2'; font-size:18px; color:#4c1d95; line-height:1}
.play-stat span{font-size:10px; font-weight:700; color:#8b5cf6; text-transform:uppercase; letter-spacing:.06em}
.play-buy-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.play-buy-card{border:1.25px solid #f3e8ff; border-radius:12px; padding:8px 6px; background:#fff; display:flex; flex-direction:column; gap:5px; transition:.15s; min-width:0}
.play-buy-card:hover{border-color:#d8b4fe; transform:translateY(-1px); box-shadow:0 6px 14px rgba(139,92,246,.10)}
.play-buy-price{font-family:'Baloo 2'; font-weight:800; font-size:13px; color:#4c1d95; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
.play-buy-desc{font-size:10px; color:#6b7280; line-height:1.3; min-height:22px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center}
.play-buy-btn{margin-top:auto; width:100%; padding:6px 4px; border:none; border-radius:8px; font-weight:800; font-size:12px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; justify-content:center; gap:4px; line-height:1}
.play-buy-btn.xu{background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; box-shadow:0 4px 10px rgba(245,158,11,.22)}
.play-buy-btn.zem{background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; box-shadow:0 4px 10px rgba(139,92,246,.22)}
.play-buy-btn:active{transform:scale(.96)}
.play-shop-foot{padding:8px 12px 10px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fcfbff; border-top:1px solid #f5f3ff; flex-shrink:0}
.play-input{width:72px; padding:6px 8px; border-radius:8px; border:1.25px solid #e9d5ff; font-weight:800; text-align:center; font-family:inherit; font-size:13px}
@media (max-width:520px){.play-shop-card{max-width:100%; max-height:min(92dvh,680px); border-radius:16px} .play-buy-grid{gap:6px} .play-buy-card{padding:7px 5px} .play-buy-price{font-size:12px} .play-buy-desc{font-size:9px} .play-buy-btn{font-size:11px; padding:5px 3px}}
@keyframes shopPop{from{transform:scale(.94) translateY(10px); opacity:0} to{transform:scale(1) translateY(0); opacity:1}}


.drawer-icon img{
  width:100%; height:100%; object-fit:contain; display:block;
  border-radius:14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}
.drawer-icon.has-img{
  background: #fff !important;
  border:1px solid #f3e8ff;
}


/* --- block --- */


/* === ICON IMAGE OVERRIDE - FIXED === */
.drawer-icon.img-icon{
  width:56px; height:56px;
  background:#fff !important;
  border:1.5px solid #f3e8ff;
  border-radius:18px;
  padding:6px;
  box-shadow:0 6px 14px rgba(109,40,217,.08), inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
}
.drawer-icon.img-icon img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  border-radius:10px;
  transition: transform .2s ease;
}
.drawer-item:hover .drawer-icon.img-icon img{
  transform: scale(1.08);
}
.drawer-item.active .drawer-icon.img-icon{
  border-color:#c4b5fd;
  box-shadow:0 8px 18px rgba(139,92,246,.22);
}


/* --- block --- */


/* ===== NEW GAME GRID - 4 PER ROW - CHỈ ACTIVE MỚI BỎ CHỮ + RÕ ICON ===== */
.drawer-list.four-col{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:10px !important;
  padding:10px 4px 6px !important;
}

.drawer-item.game-tile{
  width:100%;
  aspect-ratio:1/1;
  min-height:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
  box-shadow:0 4px 14px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04) !important;
  position:relative;
  display:block;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* KHÔNG CHỌN: giữ nguyên như cũ */
.drawer-item.game-tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
  transition: transform .22s ease, filter .22s ease;
}
.drawer-item.game-tile:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(109,40,217,.16) !important;
}
.drawer-item.game-tile:hover img{
  transform: scale(1.06);
}
.drawer-item.game-tile:active{
  transform: scale(.97);
}

/* Label giữ nguyên như cũ cho các game chưa chọn */
.tile-label{
  position:absolute;
  left:0; right:0; bottom:0;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:7px 4px 7px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.7);
  border-radius:0 0 18px 18px;
  transition: opacity .22s ease, transform .28s ease, visibility .22s;
}
.tile-label span{
  font-family:'Baloo 2','Quicksand',sans-serif;
  font-size:11.5px;
  font-weight:800;
  color:#111827;
  line-height:1.1;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.01em;
}

/* ĐÃ CHỌN: bỏ làm mờ + bỏ chữ = thấy rõ icon full */
.drawer-item.game-tile.active{
  box-shadow:0 0 0 2.5px #8b5cf6, 0 8px 20px rgba(139,92,246,.28) !important;
}
.drawer-item.game-tile.active img{
  filter: none !important;
  transform: scale(1.08);
  border-radius:18px;
}
.drawer-item.game-tile.active .tile-label{
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(100%);
  pointer-events: none;
}
.drawer-item.game-tile.active::after{
  content:'✓';
  position:absolute;
  top:6px; right:6px;
  width:20px; height:20px;
  border-radius:999px;
  background:#8b5cf6;
  color:#fff;
  font-size:12px; font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  z-index:2;
}

.drawer-item.game-tile .drawer-icon,
.drawer-item.game-tile .drawer-text{display:none !important}

@media(max-width:360px){
  .drawer-list.four-col{gap:8px !important}
  .drawer-item.game-tile{border-radius:15px !important}
  .drawer-item.game-tile img{border-radius:15px}
  .tile-label{padding:5px 3px}
  .tile-label span{font-size:10.5px}
}
@media(min-width:480px){
  .drawer-list.four-col{gap:12px !important}
  .tile-label span{font-size:12px}
}


/* --- block --- */


/* ===== DECOR SYSTEM PHASE 1 ===== */
.house-furniture-layer{position:absolute; inset:0; z-index:2; pointer-events:none;}
.furniture-item{
  position:absolute; display:grid; place-items:center;
  width:var(--fw,64px); height:var(--fh,48px);
  font-size:34px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor:grab; pointer-events:auto; user-select:none; touch-action:none;
  transition: transform .12s, filter .12s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.22)) drop-shadow(0 1px 2px rgba(0,0,0,.18));
  line-height:1;
}
.furniture-item:active{cursor:grabbing; z-index:10; filter: drop-shadow(0 10px 16px rgba(0,0,0,.32)) brightness(1.05);}
/* FIX: không dùng transform:scale ở dragging để không đè rotate */
.furniture-item.dragging{opacity:1; z-index:20; filter: drop-shadow(0 12px 20px rgba(0,0,0,.38)) brightness(1.08); transform-origin:center center; }
.furniture-item.editing{ touch-action:none; }
.furniture-item .f-resize, .furniture-item .f-rotate{ touch-action:none; }

/* ==== SUPPORT IMG DECOR ==== */
.decor-card .d-icon img{width:100%; height:100%; object-fit:contain; display:block; border-radius:10px;}
.decor-card .d-icon.has-img{background:#fff !important; padding:4px;}
.furniture-item img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));}
.furniture-item.has-img{background: transparent !important; border:none !important; box-shadow:none !important;}

/* ==== RESIZE FREE FEATURE ==== */
.furniture-item{ touch-action:none; }
.furniture-item.selected{
  outline:2px dashed #8b5cf6;
  outline-offset:3px;
  border-radius:10px;
  z-index:11 !important;
}
.furniture-item .f-resize{
  position:absolute; bottom:-9px; right:-9px;
  width:22px; height:22px; border-radius:999px;
  background:#fff; border:2px solid #8b5cf6;
  box-shadow:0 3px 10px rgba(109,40,217,.22);
  display:none; place-items:center;
  cursor:nwse-resize; z-index:12;
  font-size:12px; font-weight:900; color:#6d28d9;
  user-select:none; touch-action:none;
}
.furniture-item .f-resize::after{ content:'⤢'; line-height:1; transform:translateY(-1px); display:block; }
.furniture-item:hover .f-resize,
.furniture-item.selected .f-resize,
.furniture-item.dragging .f-resize{ display:grid; }
.furniture-item:hover .f-del,
.furniture-item.selected .f-del{ opacity:1 !important; pointer-events:auto !important; }
.furniture-item .f-size-badge{
  position:absolute; left:50%; top:-20px; transform:translateX(-50%);
  background:rgba(17,17,17,.86); color:#fff; font-size:10px; font-weight:800;
  padding:2px 6px; border-radius:999px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:.15s; z-index:13;
}
.furniture-item.resizing .f-size-badge,
.furniture-item.selected .f-size-badge{ opacity:1; }

/* ==== EDIT MODE + SLIDER PANEL ==== */
.furniture-item{ cursor:default; }
.furniture-item.editing{ cursor:grab; outline:2.5px dashed #8b5cf6; outline-offset:3px; border-radius:12px; z-index:12 !important; }
.furniture-item.editing:active{ cursor:grabbing; }
.furniture-item .f-del, .furniture-item .f-resize, .furniture-item .f-size-badge{ display:none !important; }
.furniture-item.editing .f-del,
.furniture-item.editing .f-resize,
.furniture-item.editing .f-size-badge{ display:grid !important; }

/* ===== VÁCH NGĂN - PET KHÔNG XUYÊN QUA ===== */
.furniture-item.wall-block{
  z-index:4 !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}
.furniture-item.wall-block .f-icon, .furniture-item[data-decor-id^="vach_"] .f-icon, .furniture-item[data-decor-id="hang_rao_go"] .f-icon, .furniture-item[data-decor-id="tuong_kinh"] .f-icon{
  width:100%; height:100%; display:grid; place-items:center;
}
.decor-card[data-wall="1"] .d-icon{
  background: linear-gradient(135deg,#fef3c7,#fde68a) !important;
  border-color:#f59e0b !important;
}

.furniture-item .f-del{ opacity:1; }
/* replaced by floating version above */
.fep-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fep-row{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.fep-row label{ font-size:12px; font-weight:800; min-width:98px; color:#4c1d95; display:flex; gap:6px; align-items:center; }
.fep-row label span{ background:#f5f3ff; border:1px solid #ede9fe; padding:1px 6px; border-radius:999px; min-width:36px; text-align:center; display:inline-block; }
.fep-row input[type=range]{ flex:1; accent-color:#8b5cf6; height:6px; }
.fep-plus{ width:28px; height:28px; border-radius:9px; border:1.2px solid #e9d5ff; background:#faf5ff; font-weight:900; font-size:14px; color:#6d28d9; cursor:pointer; display:grid; place-items:center; transition:.15s; }
.fep-plus:active{ transform:scale(.92); background:#ede9fe; }
.fep-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
#fep-lock{ flex:1; }

.furniture-item .f-rotate{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:999px;
  background:#fff; border:2px solid #f59e0b;
  box-shadow:0 3px 10px rgba(245,158,11,.28);
  display:none; place-items:center;
  cursor:grab; z-index:13; font-size:14px; font-weight:900; color:#d97706;
  user-select:none; touch-action:none;
}

/* FIX DOUBLE-CLICK EDIT VISIBLE - FORCE SHOW */
.furniture-item.editing .f-del,
.furniture-item.editing .f-resize,
.furniture-item.editing .f-rotate,
.furniture-item.editing .f-size-badge{
  display:grid !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.furniture-item.editing{
  outline:2.5px dashed #8b5cf6 !important;
  outline-offset:3px !important;
  border-radius:12px !important;
  z-index:50 !important;
}
.furniture-item.editing .f-resize{
  bottom:-12px !important; right:-12px !important;
  width:26px !important; height:26px !important;
  background:#8b5cf6 !important; color:#fff !important; border-color:#fff !important;
}
.furniture-item.editing .f-rotate{
  top:-34px !important;
  background:#fef3c7 !important; border-color:#f59e0b !important;
}

.furniture-item .f-rotate::after{ content:'↻'; display:block; line-height:1; }
.furniture-item.editing .f-rotate{ display:grid !important; }
.furniture-item.rotating .f-rotate{ cursor:grabbing; background:#fef3c7; transform:translateX(-50%) scale(1.12); }
.furniture-item{ transform-origin:center center; will-change: left, top, width, height, transform; }
.fep-row input#fep-rot{ accent-color:#f59e0b; }




.furniture-item .f-del{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:999px; background:#111; color:#fff; font-size:11px; display:grid; place-items:center; border:1px solid #333; opacity:0; pointer-events:none; transition:.15s;}
.furniture-item:hover .f-del, .furniture-item.dragging .f-del{opacity:1; pointer-events:auto;}
.pet-house.skin-brick{background-color:#bc8a5f; background-image: repeating-linear-gradient(0deg, rgba(101,67,33,0.38) 0 2px, transparent 2px 34px), repeating-linear-gradient(90deg, rgba(101,67,33,0.38) 0 2px, transparent 2px 52px), radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,0.26), transparent 62%);}
.pet-house.skin-wood{background-color:#d2a679; background-image: repeating-linear-gradient(90deg, rgba(101,50,20,0.18) 0 3px, transparent 3px 18px, rgba(0,0,0,0.06) 18px 19px), linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%);}
.pet-house.skin-stone{background-color:#b8bcc3; background-image: radial-gradient(12px 12px at 20% 30%, rgba(0,0,0,0.12) 0 40%, transparent 41%), radial-gradient(10px 10px at 70% 60%, rgba(0,0,0,0.10) 0 38%, transparent 39%), linear-gradient(180deg, rgba(255,255,255,0.22), transparent 55%);}
.pet-house.skin-grass{background-color:#a7f3d0; background-image: repeating-linear-gradient(0deg, rgba(34,139,34,0.12) 0 2px, transparent 2px 22px), repeating-linear-gradient(90deg, rgba(34,139,34,0.10) 0 2px, transparent 2px 28px), radial-gradient(100% 70% at 50% 0%, rgba(255,255,255,0.32), transparent 60%);}
.pet-house.skin-pink{background-color:#fbcfe8; background-image: repeating-linear-gradient(0deg, rgba(236,72,153,0.14) 0 2px, transparent 2px 30px), repeating-linear-gradient(90deg, rgba(236,72,153,0.12) 0 2px, transparent 2px 36px);}
#decor-shop-modal.decor-shop-overlay{display:none; position:fixed; inset:0; z-index:92; background: rgba(18,8,33,.52); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding:0; overflow:hidden; align-items:flex-start; justify-content:center; height:100dvh;}
#decor-shop-modal.show{display:flex !important;}
.decor-shop-card{background:#fff; width:100%; max-width:640px; height:100dvh; max-height:100dvh; margin:0 auto; border-radius:0 0 20px 20px; box-shadow:0 24px 56px rgba(0,0,0,.28); overflow:hidden; display:flex; flex-direction:column;}
.decor-shop-head{padding:12px 14px; border-bottom:1px solid #f3e8ff; background:linear-gradient(135deg,#faf5ff,#fdf2ff); flex-shrink:0;}
.decor-shop-body{padding:12px 10px 32px; padding-bottom: calc(32px + env(safe-area-inset-bottom,0px)); overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-padding-bottom:90px;} .decor-shop-body::after{content:''; display:block; height:68px;}
.decor-tabs{display:flex; gap:8px; margin:10px 0 12px; flex-wrap:wrap;}
.decor-tab{padding:7px 12px; border-radius:999px; border:1.2px solid #e9d5ff; background:#fff; font-weight:800; font-size:12px; cursor:pointer; color:#6d28d9;}
.decor-tab.active{background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; border-color:#8b5cf6; box-shadow:0 4px 12px rgba(139,92,246,.24);}
/* ==== DECOR 5 VẬT PHẨM / DÒNG ==== */
.decor-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding-bottom:18px;}
@media(max-width:680px){ .decor-grid{grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px;} }
@media(max-width:560px){ .decor-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;} }
@media(max-width:420px){ .decor-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;} }

.decor-card{background:#fff; border:1.2px solid #f3e8ff; border-radius:12px; padding:7px 5px 6px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.05); transition:.18s; cursor:pointer; position:relative; min-width:0; overflow:hidden;}
.decor-card:hover{transform:translateY(-2px); border-color:#c4b5fd; box-shadow:0 10px 20px rgba(109,40,217,.12);}
.decor-card.owned{border-color:#86efac; background:linear-gradient(180deg,#f0fdf4,#fff);}
.decor-card .d-icon{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-size:22px; background:linear-gradient(135deg,#fef9c3,#fce7f3); border:1px solid #fde68a; margin-bottom:6px; flex-shrink:0;}
.decor-card .d-name{font-family:'Baloo 2'; font-weight:800; font-size:11px; color:#4c1d95; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.decor-card .d-price{margin-top:3px; font-weight:800; font-size:10px; padding:2px 6px; border-radius:999px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.decor-card .d-btn{margin-top:5px; width:100%; padding:5px 4px; border:none; border-radius:7px; font-weight:800; font-size:10.5px; cursor:pointer; background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; box-shadow:0 3px 8px rgba(139,92,246,.18); white-space:nowrap;}
.decor-card .d-btn:disabled{background:#e5e7eb; color:#9ca3af; box-shadow:none; cursor:default;}
.decor-card .d-badge{position:absolute; top:6px; right:6px; font-size:10px; font-weight:800; padding:3px 6px; border-radius:999px; background:#dcfce7; color:#15803d; border:1px solid #bbf7d0;}


/* ===== THU NHỎ PET + NHÀ 420px + FLOAT XU TỪ PET ===== */
.pet-house{ height:420px; max-height:1000px; min-height:420px; transition: height .35s ease; } @media(min-width:700px){ .pet-house{height:420px; max-height:1000px;} }

.house-pet{
  width:50px !important;
}
.pet-avatar{
  width:38px !important; height:38px !important;
  border-radius:12px !important;
  font-size:20px !important;
}
.pet-name-tag{
  margin-top:3px !important;
  font-size:9px !important;
  font-weight:800;
  padding:2px 5px !important;
  max-width:62px !important;
  line-height:1 !important;
}
.pet-mini-bar{
  width:32px !important; height:3px !important; margin-top:2px !important;
}
.pet-mini-bar > i{ border-radius:999px; }

.pet-bubble{
  font-size:9px !important;
  padding:4px 6px !important;
  border-radius:9px !important;
  max-width:88px !important;
  line-height:1.25 !important;
  transform:translateX(-50%) translateY(-4px) !important;
  bottom:100% !important;
}
.pet-bubble::after{ width:7px !important; height:7px !important; margin-left:-3.5px !important; }

.pet-timer{
  font-size:8.5px !important;
  padding:2px 5px !important;
  border-radius:999px !important;
  top:-8px !important;
  left:-8px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  line-height:1 !important;
  background:#fff !important;
  border:1.2px solid #e9d5ff !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08) !important;
  z-index:7 !important;
}
@keyframes timerPulseMini{0%{transform:scale(1)}100%{transform:scale(1.05)}}
.house-pet.ready .pet-timer, .pet-timer.ready{ animation: timerPulseMini .9s ease infinite alternate !important; }

.house-pet.working::after{ width:16px !important; height:16px !important; font-size:9px !important; top:-4px !important; right:-3px !important; }
.house-pet.ready::before{ width:18px !important; height:18px !important; font-size:9px !important; top:-5px !important; right:-4px !important; }

/* Float xu từ pet */
.pet-float-xu{
  position:absolute;
  left:0; top:0;
  font-family:'Baloo 2','Quicksand',sans-serif;
  font-weight:800;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.96);
  border:1.2px solid currentColor;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  pointer-events:none;
  z-index:12;
  white-space:nowrap;
  transform: translateX(-50%);
  animation: petFloatUp 1.08s cubic-bezier(.22,.75,.28,1) forwards;
  will-change: transform, opacity;
}
.pet-float-xu.coin{ background: linear-gradient(135deg,#fef9c3,#fff); }
@keyframes petFloatUp{
  0%{ transform: translateX(-50%) translateY(0) scale(.6); opacity:0; filter: blur(1px); }
  12%{ transform: translateX(-50%) translateY(-8px) scale(1.05); opacity:1; filter: blur(0); }
  75%{ opacity:1; }
  100%{ transform: translateX(-50%) translateY(-52px) scale(1.08); opacity:0; }
}
.pet-float-xu.speech{
  font-size:10.5px;
  background:#fff;
  color:#6d28d9 !important;
  border-color:#e9d5ff !important;
  padding:4px 7px;
  max-width:140px;
  text-align:center;
  line-height:1.2;
  white-space:normal;
  word-break:break-word;
}

/* === OVERRIDE FINAL FIX FOR 5 COLS + SCROLL CHE === */
#shop-grid.pet-grid{ padding-bottom: 110px !important; }
#shop-grid{ padding-bottom: 110px !important; }
.pet-shop-card .shop-scroll{ padding-bottom: 140px !important; }
.decor-shop-body{ padding-bottom: 120px !important; }
#decor-grid-floor, #decor-grid-furni, #decor-grid-my{ padding-bottom: 80px; }



/* --- block --- */


/* ===== FIX 2: BỎ Ô VUÔNG, GIỮ PHÁT SÁNG, FIX NHẤP NHÁY NHANH ===== */
.pet-avatar{
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  padding:4px !important;
  display:grid !important;
  place-items:center !important;
}
.pet-avatar img{
  width:56px !important;
  height:56px !important;
  object-fit:contain !important;
  display:block !important;
  background:transparent !important;
  border-radius:0 !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)) drop-shadow(0 2px 4px rgba(0,0,0,.12)) !important;
  transition: transform .35s cubic-bezier(.22,1,.32,1), filter .45s ease !important;
  will-change: transform, filter !important;
}
@media(max-width:480px){
  .pet-avatar img{ width:48px !important; height:48px !important; }
}
.house-pet.hungry .pet-avatar,
.house-pet.ready .pet-avatar,
.house-pet.working .pet-avatar,
.house-pet.expired .pet-avatar{
  animation:none !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.house-pet.hungry .pet-avatar img{
  filter: drop-shadow(0 0 10px rgba(239,68,68,.55)) drop-shadow(0 0 22px rgba(239,68,68,.32)) drop-shadow(0 6px 12px rgba(0,0,0,.18)) !important;
  animation: softRedGlow 2.8s ease-in-out infinite alternate !important;
}
.house-pet.ready .pet-avatar img{
  filter: drop-shadow(0 0 12px rgba(34,197,94,.6)) drop-shadow(0 0 26px rgba(34,197,94,.38)) drop-shadow(0 6px 14px rgba(0,0,0,.16)) !important;
  animation: softGreenGlow 2.6s ease-in-out infinite alternate !important;
}
.house-pet.working .pet-avatar img{
  filter: drop-shadow(0 0 10px rgba(139,92,246,.38)) drop-shadow(0 6px 12px rgba(0,0,0,.16)) !important;
  animation: softWorkFloat 3.2s ease-in-out infinite !important;
}
.house-pet.expired .pet-avatar img{
  filter: grayscale(.85) brightness(.92) drop-shadow(0 0 10px rgba(0,0,0,.35)) !important;
  animation: softGrayPulse 3s ease-in-out infinite alternate !important;
  opacity:.9 !important;
}
@keyframes softRedGlow{
  0%{ filter: drop-shadow(0 0 8px rgba(239,68,68,.38)) drop-shadow(0 0 18px rgba(239,68,68,.22)) drop-shadow(0 6px 10px rgba(0,0,0,.16)); transform: scale(1); }
  100%{ filter: drop-shadow(0 0 14px rgba(239,68,68,.62)) drop-shadow(0 0 28px rgba(239,68,68,.36)) drop-shadow(0 8px 14px rgba(0,0,0,.18)); transform: scale(1.04); }
}
@keyframes softGreenGlow{
  0%{ filter: drop-shadow(0 0 9px rgba(34,197,94,.42)) drop-shadow(0 0 20px rgba(34,197,94,.26)) drop-shadow(0 6px 12px rgba(0,0,0,.14)); transform: scale(1); }
  100%{ filter: drop-shadow(0 0 15px rgba(34,197,94,.68)) drop-shadow(0 0 32px rgba(34,197,94,.42)) drop-shadow(0 8px 16px rgba(0,0,0,.16)); transform: scale(1.05); }
}
@keyframes softWorkFloat{
  0%,100%{ transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px rgba(139,92,246,.28)) drop-shadow(0 6px 10px rgba(0,0,0,.14)); }
  50%{ transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 0 12px rgba(139,92,246,.42)) drop-shadow(0 8px 14px rgba(0,0,0,.16)); }
}
@keyframes softGrayPulse{
  0%{ filter: grayscale(.85) brightness(.92) drop-shadow(0 0 8px rgba(0,0,0,.28)); }
  100%{ filter: grayscale(.85) brightness(.96) drop-shadow(0 0 14px rgba(0,0,0,.42)); }
}
.pet-timer.ready{ animation: timerPulseSlow 2.2s ease-in-out infinite alternate !important; }
@keyframes timerPulseSlow{ 0%{ transform: scale(1); } 100%{ transform: scale(1.06); } }
.house-pet.ready::before{ animation: coinBounceSlow 1.8s ease-in-out infinite !important; }
@keyframes coinBounceSlow{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }
.house-pet.moving .pet-avatar{ transform:none !important; }
.house-pet.moving .pet-avatar img{ animation: moveBob 1.6s ease-in-out infinite !important; }
@keyframes moveBob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }


/* --- block --- */


/* ===== FIX: Rộng/Cao/Xoay - chữ và thanh không bị co nhỏ ===== */
.furni-edit-panel{
  width: min(320px, calc(100% - 12px)) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  isolation: isolate;
  transform: none !important; /* đảm bảo không bị scale theo item */
}
.furni-edit-panel *{ box-sizing: border-box; }

.fep-head{ margin-bottom:10px !important; }
.fep-head b{ font-size:14px !important; white-space:nowrap; }

.fep-row{
  display: grid !important;
  grid-template-columns: 108px 1fr 32px 32px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}
.fep-row label{
  min-width: 0 !important;
  width: 108px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color:#4c1d95 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap:6px !important;
}
.fep-row label span{
  min-width: 44px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  padding: 2px 8px !important;
  background:#f5f3ff !important;
  border:1px solid #ede9fe !important;
  border-radius:999px !important;
  text-align:center !important;
  display:inline-block !important;
  flex-shrink:0 !important;
}
.fep-row input[type=range]{
  width:100% !important;
  min-width:0 !important;
  height:32px !important;
  margin:0 !important;
  flex:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  cursor:pointer;
  touch-action: manipulation;
}
.fep-row input[type=range]::-webkit-slider-runnable-track{
  height:8px !important;
  border-radius:999px !important;
  background:#ede9fe !important;
}
.fep-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:20px !important; height:20px !important;
  margin-top:-6px !important;
  border-radius:50% !important;
  background:#8b5cf6 !important;
  border:2px solid #fff !important;
  box-shadow:0 2px 8px rgba(109,40,217,.32) !important;
  cursor:pointer;
}
.fep-row input[type=range]#fep-rot::-webkit-slider-runnable-track{ background:#fef3c7 !important; }
.fep-row input[type=range]#fep-rot::-webkit-slider-thumb{ background:#f59e0b !important; }

.fep-row input[type=range]::-moz-range-track{ height:8px !important; border-radius:999px !important; background:#ede9fe !important; border:none !important; }
.fep-row input[type=range]::-moz-range-thumb{ width:20px !important; height:20px !important; border-radius:50% !important; background:#8b5cf6 !important; border:2px solid #fff !important; box-shadow:0 2px 8px rgba(109,40,217,.32) !important; }
.fep-row input[type=range]#fep-rot::-moz-range-track{ background:#fef3c7 !important; }
.fep-row input[type=range]#fep-rot::-moz-range-thumb{ background:#f59e0b !important; }

.fep-plus{
  width:32px !important; height:32px !important;
  min-width:32px !important;
  border-radius:10px !important;
  font-size:16px !important;
  font-weight:900 !important;
  flex-shrink:0 !important;
  display:grid !important; place-items:center !important;
}
.fep-actions{ gap:8px !important; margin-top:12px !important; flex-wrap:wrap !important; }
.fep-actions .btn{ font-size:13px !important; height:36px !important; }

@media(max-width:380px){
  .furni-edit-panel{ left:6px !important; right:6px !important; width:auto !important; padding:10px !important; }
  .fep-row{ grid-template-columns: 92px 1fr 30px 30px !important; gap:6px !important; }
  .fep-row label{ width:92px !important; font-size:12px !important; }
  .fep-row label span{ min-width:38px !important; font-size:11px !important; padding:1px 6px !important; }
  .fep-plus{ width:30px !important; height:30px !important; min-width:30px !important; font-size:15px !important; }
}

/* Đảm bảo item nhỏ thì icon vẫn rõ, không làm ảnh hưởng panel */
.furniture-item{ font-size: clamp(18px, calc(var(--fw,64px) * 0.55), 34px) !important; }
.furniture-item img{ width:100% !important; height:100% !important; object-fit:contain !important; }


/* --- block --- */


/* ===== SUPER MINI - Cả khối bé siêu nhỏ ===== */
.furni-edit-panel{
  width: 188px !important;
  max-width: 188px !important;
  min-width: 188px !important;
  padding: 7px 8px 6px !important;
  border-radius: 13px !important;
  border-width: 1.2px !important;
  box-shadow: 0 8px 18px rgba(109,40,217,.18), 0 0 0 1px rgba(255,255,255,.9) inset !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.furni-edit-panel::before{ width:8px !important; height:8px !important; top:-5px !important; border-width:1.2px !important; }

.fep-head{ margin-bottom: 4px !important; gap:4px !important; }
.fep-head b{ font-size: 11px !important; letter-spacing:-.01em; max-width:128px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#fep-close{ min-width:20px !important; width:20px !important; height:20px !important; font-size:11px !important; border-radius:6px !important; }

.fep-row{
  display:grid !important;
  grid-template-columns: 52px 1fr 20px 20px !important;
  gap:4px !important;
  margin:5px 0 !important;
  align-items:center !important;
}
.fep-row label{
  width:52px !important; min-width:0 !important;
  font-size:10px !important; font-weight:800 !important;
  gap:2px !important; white-space:nowrap !important;
}
.fep-row label span{
  min-width:26px !important; max-width:32px !important;
  font-size:9px !important; font-weight:800 !important;
  padding:1px 4px !important; line-height:1.1 !important;
  border-radius:999px !important;
}
.fep-row input[type=range]{
  height:18px !important;
  -webkit-appearance:none !important; appearance:none !important;
  background:transparent !important;
}
.fep-row input[type=range]::-webkit-slider-runnable-track{ height:4px !important; border-radius:999px !important; }
.fep-row input[type=range]::-webkit-slider-thumb{
  width:12px !important; height:12px !important; margin-top:-4px !important;
  border-width:1.5px !important; box-shadow:0 1px 4px rgba(109,40,217,.28) !important;
}
.fep-row input[type=range]::-moz-range-track{ height:4px !important; }
.fep-row input[type=range]::-moz-range-thumb{ width:12px !important; height:12px !important; border-width:1.5px !important; }

.fep-plus{
  width:20px !important; height:20px !important; min-width:20px !important;
  border-radius:6px !important; font-size:11px !important; font-weight:900 !important;
  border-width:1px !important;
}

.fep-actions{ gap:4px !important; margin-top:6px !important; }
.fep-actions .btn{ height:24px !important; padding:0 6px !important; font-size:10px !important; border-radius:8px !important; font-weight:800 !important; }
#fep-lock{ flex:1 !important; }
#fep-reset, #fep-del{ padding:0 6px !important; }

.furni-edit-panel .muted{ font-size:8.5px !important; margin-top:4px !important; line-height:1.2 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media(max-width:380px){
  .furni-edit-panel{ width:182px !important; max-width:182px !important; min-width:182px !important; left:auto !important; }
}


/* --- block --- */


/* ===== FINAL: Siêu nhỏ - Toàn bộ chữ 10px ===== */
.furni-edit-panel{
  width: 172px !important;
  max-width: 172px !important;
  min-width: 172px !important;
  padding: 6px 7px 5px !important;
  border-radius: 11px !important;
  font-size: 10px !important;
}
.furni-edit-panel *{
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.furni-edit-panel::before{ width:7px !important; height:7px !important; top:-4px !important; }

.fep-head{ margin-bottom:3px !important; }
.fep-head b{ font-size:10px !important; font-weight:800 !important; max-width:120px; }
#fep-close{ width:18px !important; height:18px !important; min-width:18px !important; font-size:10px !important; border-radius:5px !important; }

.fep-row{
  grid-template-columns: 44px 1fr 18px 18px !important;
  gap:3px !important;
  margin:4px 0 !important;
}
.fep-row label{ width:44px !important; font-size:10px !important; font-weight:700 !important; gap:2px !important; }
.fep-row label span{
  min-width:22px !important; max-width:28px !important;
  font-size:10px !important; padding:0px 3px !important; height:14px !important; line-height:14px !important;
}

.fep-row input[type=range]{ height:16px !important; }
.fep-row input[type=range]::-webkit-slider-runnable-track{ height:3px !important; }
.fep-row input[type=range]::-webkit-slider-thumb{ width:10px !important; height:10px !important; margin-top:-3.5px !important; border-width:1px !important; }
.fep-row input[type=range]::-moz-range-track{ height:3px !important; }
.fep-row input[type=range]::-moz-range-thumb{ width:10px !important; height:10px !important; }

.fep-plus{ width:18px !important; height:18px !important; min-width:18px !important; border-radius:5px !important; font-size:10px !important; }

.fep-actions{ gap:3px !important; margin-top:5px !important; }
.fep-actions .btn{ height:20px !important; padding:0 5px !important; font-size:10px !important; border-radius:6px !important; line-height:1 !important; }

.furni-edit-panel .muted{ font-size:9px !important; margin-top:3px !important; }


/* --- block --- */


/* === BXH Weekly Reward Notif Badge === */
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#notif-badge.has-notif{animation:badgePulse 1.15s ease-in-out infinite}
#btn-bxh-notif:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(109,40,217,.14); border-color:#ddd6fe !important}
#btn-bxh-notif:active{transform:scale(.96)}
/* Reward modal */
@keyframes rewardFade{from{opacity:0; transform:scale(.96) translateY(8px)} to{opacity:1; transform:scale(1) translateY(0)}}
.bxh-reward-card{animation:rewardFade .32s cubic-bezier(.22,1.15,.32,1)}
.bxh-reward-item{transition:.18s}
.bxh-reward-item:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08)}


/* --- block --- */


/* === TEST MODE: BỎ TẠM LỚP MỜ ĐĂNG NHẬP === */
#login-wall{ display:none !important; visibility:hidden !important; pointer-events:none !important; }
.login-wall{ display:none !important; }


/* --- block --- */


/* ===== BUBBLE SHOOTER GAME ===== */
.bubble-wrap{position:relative; width:100%; max-width:380px; margin:12px auto; background: linear-gradient(180deg,#f0f9ff 0%,#e0f2fe 8%,#bae6fd 18%,#7dd3fc 60%,#38bdf8 100%); border-radius:18px; border:1.5px solid #7dd3fc; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 20px rgba(14,165,233,.15); }
.bubble-canvas{display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; user-select:none; -webkit-user-select:none;}
.bubble-pet-select{display:flex; gap:8px; overflow-x:auto; padding:8px 4px 10px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
.bubble-pet-select::-webkit-scrollbar{height:6px}
.bubble-pet-select::-webkit-scrollbar-thumb{background:#e9d5ff; border-radius:999px}
.bubble-pet-option{flex:0 0 auto; width:62px; text-align:center; background:#fff; border:1.8px solid #f3e8ff; border-radius:14px; padding:7px 4px 6px; cursor:pointer; transition: all .18s ease; position:relative; box-shadow:0 2px 8px rgba(139,92,246,.06);}
.bubble-pet-option:hover{transform:translateY(-2px); border-color:#d8b4fe; box-shadow:0 8px 18px rgba(139,92,246,.12);}
.bubble-pet-option.active{border-color:#8b5cf6; background:linear-gradient(180deg,#faf5ff,#f3e8ff); box-shadow:0 0 0 3px rgba(139,92,246,.18),0 10px 22px rgba(139,92,246,.18); transform:translateY(-2px) scale(1.02);}
.bubble-pet-option img{width:38px; height:38px; object-fit:contain; border-radius:10px; display:block; margin:0 auto 4px; background:linear-gradient(135deg,#fef9c3,#fce7f3); border:1px solid #fde68a;}
.bubble-pet-option .pet-opt-name{font-size:10px; font-weight:800; color:#4c1d95; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bubble-pet-option.active .pet-opt-name{color:#6d28d9}
.bubble-pet-option .pet-opt-badge{position:absolute; top:-6px; right:-6px; width:18px; height:18px; background:#22c55e; color:#fff; border-radius:999px; display:grid; place-items:center; font-size:11px; border:2px solid #fff; box-shadow:0 2px 6px rgba(34,197,94,.35); opacity:0; transform:scale(.6); transition:.18s;}
.bubble-pet-option.active .pet-opt-badge{opacity:1; transform:scale(1);}
.bubble-shooter-info{display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid #e0f2fe; border-radius:12px; padding:8px 10px; margin-top:8px;}
.bubble-next-preview{display:flex; align-items:center; gap:6px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:999px; padding:4px 10px 4px 6px; font-size:11px; font-weight:700; color:#0369a1;}
.bubble-next-dot{width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.8); box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 -3px 6px rgba(0,0,0,.15);}
@keyframes bubblePop{0%{transform:scale(1)}30%{transform:scale(1.25)}100%{transform:scale(0); opacity:0}}
.bubble-popping{animation:bubblePop .24s ease forwards}


/* --- block --- */


.hud-chip, .hud-chip * { animation:none !important; transition:none !important; transform:none !important; will-change:auto !important; }
.hud-chip.timer span { display:inline-block; min-width:28px; text-align:center; }
#timer-bar { transition: width .1s linear !important; } /* chỉ giữ lại bar */


/* --- block --- */

@keyframes shopPopTop{from{transform:translateY(-18px) scale(.98); opacity:0} to{transform:translateY(0) scale(1); opacity:1}} @keyframes shopPop{from{transform:scale(.94) translateY(14px); opacity:0} to{transform:scale(1) translateY(0); opacity:1}}
/* === SHOP XỊN - BÉ ĐÃ SỞ HỮU XẾP CUỐI === */
.shop-mini-card.owned{
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%);
  border: 1.5px dashed #e9d5ff !important;
  position:relative;
  overflow:hidden;
}
.shop-mini-card.owned.in-house{
  border-style: solid !important;
  border-color: #c4b5fd !important;
  box-shadow: 0 6px 18px rgba(139,92,246,0.12);
}
.shop-mini-card.owned.in-storage{
  opacity:0.96;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a !important;
}
/* tagline removed per request */
#shop-grid.pet-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap:10px;
}
@media(max-width:480px){
  #shop-grid.pet-grid{ grid-template-columns: repeat(2, 1fr); }
}



/* --- block --- */

@keyframes bxhFade{from{opacity:0}to{opacity:1}} #bxh-tabs-row::-webkit-scrollbar{display:none}

/* --- block --- */


      @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap');
      #bxh-reward-overlay *{box-sizing:border-box}
      #bxh-reward-overlay .wr-header{
        background:linear-gradient(135deg,#6d28d9 0%,#a855f7 35%,#ec4899 68%,#f59e0b 100%);
        color:#fff; padding:16px 16px 18px; position:relative; overflow:hidden; flex-shrink:0;
      }
      #bxh-reward-overlay .wr-header::before{
        content:''; position:absolute; inset:-40%; background:radial-gradient(ellipse at 20% 20%, rgba(255,255,255,.22) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(255,255,255,.18) 0%, transparent 50%);
      }
      #bxh-reward-overlay .wr-header-inner{position:relative; z-index:1}
      #bxh-reward-overlay .wr-topbar{display:flex; align-items:center; justify-content:space-between; gap:12px}
      #bxh-reward-overlay .wr-title-wrap{display:flex; align-items:center; gap:12px}
      #bxh-reward-overlay .wr-icon{
        width:44px; height:44px; border-radius:14px; background:rgba(255,255,255,.2);
        border:1px solid rgba(255,255,255,.3); display:grid; place-items:center; font-size:24px;
        backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(0,0,0,.15)
      }
      #bxh-reward-overlay .wr-h1{font-weight:800; font-size:20px; line-height:1.1; letter-spacing:-.2px}
      #bxh-reward-overlay .wr-sub{font-size:12px; opacity:.9; margin-top:3px; font-weight:600; display:flex; gap:6px; flex-wrap:wrap}
      #bxh-reward-overlay .wr-sub span{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); padding:2px 8px; border-radius:999px; backdrop-filter:blur(4px)}
      #bxh-reward-overlay .wr-close{
        width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
        background:rgba(0,0,0,.18); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:16px; font-weight:800; flex-shrink:0;
      }
      #bxh-reward-overlay .wr-rules{
        margin-top:12px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; position:relative; z-index:1
      }
      #bxh-reward-overlay .wr-rule{
        padding:7px 4px !important;
      }
      #bxh-reward-overlay .wr-rule b{
        font-size:11.5px !important;
      }
      #bxh-reward-overlay .wr-rule small{
        font-size:9.5px !important;
        line-height:1.2;
      }
      #bxh-reward-overlay .wr-rule.top4 b{color:#6b7280}
      #bxh-reward-overlay .wr-rule{
        background:rgba(255,255,255,.94); border-radius:14px; padding:9px 8px; text-align:center;
        box-shadow:0 6px 20px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.6)
      }
      #bxh-reward-overlay .wr-rule b{display:block; font-size:13px; line-height:1.1; font-weight:800}
      #bxh-reward-overlay .wr-rule small{display:block; font-size:10.5px; color:#6b7280; font-weight:700; margin-top:2px}
      #bxh-reward-overlay .wr-rule.top1 b{color:#a16207}
      #bxh-reward-overlay .wr-rule.top2 b{color:#059669}
      #bxh-reward-overlay .wr-rule.top3 b{color:#2563eb}
      #bxh-reward-overlay .wr-status{
        background:#fff; border-bottom:1px solid #f3f4f6; padding:10px 16px; display:flex; align-items:center; gap:10px;
        position:sticky; top:0; z-index:2; flex-shrink:0;
      }
      #bxh-reward-overlay .wr-status-dot{width:8px; height:8px; border-radius:50%; background:#10b981; box-shadow:0 0 0 4px #dcfce7; flex-shrink:0}
      #bxh-reward-overlay .wr-status-text{font-size:12.5px; color:#374151; font-weight:600; line-height:1.35; flex:1}
      #bxh-reward-overlay .wr-refresh{
        font-size:11px; padding:6px 12px; border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#6b7280; cursor:pointer; font-weight:700; flex-shrink:0
      }
      #bxh-reward-overlay .wr-body{flex:1; overflow:auto; background:#f8f7ff; padding:14px 12px 90px}
      #bxh-reward-overlay .wr-section-title{
        font-size:13px; font-weight:800; margin:18px 4px 10px; display:flex; align-items:center; gap:8px; letter-spacing:-.1px;
      }
      #bxh-reward-overlay .wr-section-title:first-child{margin-top:2px}
      #bxh-reward-overlay .wr-badge{font-size:10px; padding:3px 9px; border-radius:999px; font-weight:800; border:1px solid}
      #bxh-reward-overlay .wr-card{
        background:#fff; border-radius:18px; padding:12px; display:flex; align-items:center; gap:12px;
        border:1px solid #f3f4f6; box-shadow:0 4px 18px rgba(17,24,39,.05); margin-bottom:10px; transition:all .15s;
      }
      #bxh-reward-overlay .wr-card.pending{
        border-color:#e9d5ff; box-shadow:0 8px 24px rgba(139,92,246,.12); background:linear-gradient(135deg,#fff 0%,#fdf4ff 100%);
      }
      #bxh-reward-overlay .wr-card.muted{opacity:.9; background:#fff; border-style:dashed}
      #bxh-reward-overlay .wr-rank{
        width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-weight:900; font-size:15px; flex-shrink:0
      }
      #bxh-reward-overlay .wr-rank.r1{background:linear-gradient(135deg,#fde047,#f59e0b); color:#713f12; box-shadow:0 4px 12px rgba(245,158,11,.35)}
      #bxh-reward-overlay .wr-rank.r2{background:linear-gradient(135deg,#dcfce7,#86efac); color:#14532d; box-shadow:0 3px 10px rgba(34,197,94,.25)}
      #bxh-reward-overlay .wr-rank.r3{background:linear-gradient(135deg,#dbeafe,#93c5fd); color:#1e3a8a; box-shadow:0 3px 10px rgba(59,130,246,.25)}
      #bxh-reward-overlay .wr-rank.r4{background:linear-gradient(135deg,#f3f4f6,#d1d5db); color:#374151; font-size:13px}
      #bxh-reward-overlay .wr-game-icon{
        width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; flex-shrink:0; background:#f5f3ff; border:1px solid #ede9fe
      }
      #bxh-reward-overlay .wr-info{flex:1; min-width:0}
      #bxh-reward-overlay .wr-name{font-weight:800; font-size:14px; color:#111827; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
      #bxh-reward-overlay .wr-meta{font-size:11.5px; color:#6b7280; margin-top:2px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
      #bxh-reward-overlay .wr-reward-label{font-weight:800}
      #bxh-reward-overlay .wr-btn{
        padding:9px 16px; border-radius:999px; border:0; font-weight:800; font-size:12.5px; cursor:pointer; flex-shrink:0; line-height:1; transition:transform .12s;
      }
      #bxh-reward-overlay .wr-btn:active{transform:scale(.96)}
      #bxh-reward-overlay .wr-btn-primary{background:linear-gradient(135deg,#7c3aed,#ec4899); color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.35)}
      #bxh-reward-overlay .wr-btn-done{background:#f3f4f6; color:#9ca3af; border:1px solid #e5e7eb}
      #bxh-reward-overlay .wr-btn-wait{background:#f3f4f6; color:#9ca3af; border:1px solid #e5e7eb; font-size:11px; line-height:1.2; text-align:center; min-width:92px}
      #bxh-reward-overlay .wr-empty{
        background:#fff; border-radius:24px; padding:28px 20px; text-align:center; border:1px solid #f3f4f6; box-shadow:0 8px 30px rgba(0,0,0,.06); margin-top:10px
      }
      #bxh-reward-overlay .wr-foot{
        position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
        border-top:1px solid #f3f4f6; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center; z-index:5
      }
      #bxh-reward-overlay .wr-foot-hint{flex:1; font-size:11px; color:#6b7280; line-height:1.35; font-weight:600}
      #bxh-reward-overlay .wr-foot-btn{padding:11px 22px; border-radius:999px; background:#111827; color:#fff; border:0; font-weight:800; font-size:13px; cursor:pointer}
      #bxh-reward-overlay .wr-note{
        background:#fffbeb; border:1px dashed #fde68a; border-radius:14px; padding:10px 12px; font-size:11.5px; color:#92400e; line-height:1.5; margin-top:12px
      }
      @keyframes bxhFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
    

/* --- block --- */


#music-overlay{position:fixed; inset:0; background:rgba(17,24,39,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:9999; display:none; place-items:center; padding:16px; animation:ytFade .2s ease}
#music-overlay.open{display:grid}
@keyframes ytFade{from{opacity:0}to{opacity:1}}
#music-modal{width:min(520px, 100%); max-height:min(82vh, 720px); background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; animation:ytPop .28s cubic-bezier(.22,1.15,.32,1)}
@keyframes ytPop{from{transform:translateY(12px) scale(.96); opacity:0}to{transform:translateY(0) scale(1); opacity:1}}
.yt-m-head{padding:16px 18px; background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 50%,#fed7aa 100%); border-bottom:1px solid #ffedd5; display:flex; align-items:center; justify-content:space-between; gap:12px}
.yt-m-head-left{display:flex; align-items:center; gap:10px}
.yt-m-icon{width:36px; height:36px; border-radius:12px; background:#ea580c; color:#fff; display:grid; place-items:center; font-size:18px; box-shadow:0 4px 12px rgba(234,88,12,.25)}
.yt-m-title{font-family:'Baloo 2',system-ui; font-weight:800; font-size:17px; color:#9a3412; line-height:1.1}
.yt-m-sub{font-size:11px; color:#c2410c; font-weight:600; margin-top:2px; opacity:.9}
.yt-m-close{width:32px; height:32px; border-radius:999px; border:1px solid #fed7aa; background:#fff; color:#9a3412; display:grid; place-items:center; cursor:pointer; font-weight:800; font-size:14px}
.yt-m-body{padding:14px; overflow:auto; flex:1; background:#fffcf8}
.yt-player-wrap{width:100%; aspect-ratio:16/9; background:#111827; border-radius:16px; overflow:hidden; position:relative; margin-bottom:14px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.yt-player-wrap #yt-placeholder{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:13px; text-align:center; padding:20px; background:radial-gradient(ellipse at 50% 30%, #374151 0%, #111827 70%); z-index:2}
.yt-input-row{display:flex; gap:8px; margin-bottom:12px}
.yt-input-row input{flex:1; padding:10px 14px; border-radius:999px; border:1.5px solid #ffedd5; background:#fff; font-size:13px; outline:none; font-family:inherit}
.yt-input-row input:focus{border-color:#fb923c; box-shadow:0 0 0 3px rgba(251,146,60,.18)}
.yt-btn{padding:10px 16px; border-radius:999px; border:0; font-weight:800; font-size:13px; cursor:pointer; white-space:nowrap; transition:.15s}
.yt-btn:active{transform:scale(.96)}
.yt-btn-add{background:#ea580c; color:#fff; box-shadow:0 4px 14px rgba(234,88,12,.3)}
.yt-btn-paste{background:#fff7ed; color:#c2410c; border:1px solid #ffedd5}
.yt-playlist{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.yt-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#fff; border:1px solid #ffedd5; transition:.15s; cursor:pointer}
.yt-item:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(234,88,12,.08); border-color:#fed7aa}
.yt-item.active{background:linear-gradient(135deg,#fff7ed,#ffedd5); border-color:#fb923c; box-shadow:0 6px 18px rgba(234,88,12,.18)}
.yt-item-thumb{width:42px; height:42px; border-radius:10px; background:#111827; flex-shrink:0; overflow:hidden; display:grid; place-items:center; font-size:18px; position:relative}
.yt-item-thumb img{width:100%; height:100%; object-fit:cover}
.yt-item-info{flex:1; min-width:0}
.yt-item-title{font-weight:700; font-size:13px; color:#7c2d12; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
.yt-item-url{font-size:11px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px}
.yt-item-actions{display:flex; gap:6px; flex-shrink:0}
.yt-icon-btn{width:28px; height:28px; border-radius:999px; border:1px solid #ffedd5; background:#fff; display:grid; place-items:center; cursor:pointer; font-size:12px; transition:.15s}
.yt-icon-btn:hover{background:#fff7ed}
.yt-icon-btn.play{background:#ea580c; color:#fff; border-color:#ea580c}
/* === MICRO PLAYER - GOC PHAI SIEU NHO - CHI HIEN KHI BAT NHAC === */
.yt-mini-bar{position:fixed; right:8px; bottom:10px; left:auto; top:auto; width:auto; min-width:0; max-width:none; margin:0; background:rgba(17,24,39,0.88); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); color:#fff; border-radius:999px; padding:3px 4px; display:none; align-items:center; gap:2px; z-index:9998; box-shadow:0 4px 16px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); animation:ytSlideUp .28s cubic-bezier(.22,1.15,.32,1)}
.yt-mini-bar.show{display:flex}
@keyframes ytSlideUp{from{transform:translateY(12px); opacity:0}to{transform:translateY(0); opacity:1}}
.yt-micro-btn{width:26px; height:26px; border-radius:999px; border:0; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; cursor:pointer; font-size:12px; font-weight:800; line-height:1; transition:.15s; flex-shrink:0; user-select:none; -webkit-user-select:none}
.yt-micro-btn:hover{background:rgba(255,255,255,.24); transform:scale(1.06)}
.yt-micro-btn:active{transform:scale(.92)}
.yt-micro-btn.play{background:#ea580c; color:#fff; width:28px; height:28px; font-size:11px}
.yt-micro-btn.play:hover{background:#f97316}
.yt-micro-btn.stop{background:rgba(239,68,68,.28); font-size:9px}
.yt-micro-btn.stop:hover{background:rgba(239,68,68,.45)}
.yt-persistent-root{position:fixed; left:-10px; top:-10px; width:1px; height:1px; opacity:0; pointer-events:none; z-index:-1; overflow:hidden; background:#000; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.yt-persistent-root #yt-player{width:100%; height:100%}
.yt-empty{padding:22px 16px; text-align:center; background:#fff7ed; border:1px dashed #fed7aa; border-radius:16px; color:#9a3412; font-size:13px; line-height:1.5}


/* === SHOP TABS - ĐỒ ĂN VẶT v1.0 === */
.shop-tabs{display:flex; gap:6px; padding:10px 12px 8px; background:#fff; border-bottom:1px solid #f3e8ff; overflow-x:auto}
.shop-tab{padding:8px 14px; border-radius:999px; border:1.2px solid #e9d5ff; background:#fff; color:#6d28d9; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:.18s; font-family:'Baloo 2', system-ui}
.shop-tab:hover{border-color:#d8b4fe; background:#faf5ff; transform:translateY(-1px)}
.shop-tab.active{background:linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; border-color:transparent; box-shadow:0 4px 12px rgba(139,92,246,.25)}
.shop-tab:active{transform:scale(.96)}
.snack-card{border-color:#fde68a !important; background:linear-gradient(180deg,#fff,#fffbeb) !important}
.snack-card:hover{border-color:#f59e0b !important; box-shadow:0 8px 18px rgba(245,158,11,.18) !important}
.pet-snack-actions{display:flex; gap:4px; margin-top:6px; justify-content:center; flex-wrap:wrap}
.pet-snack-btn{padding:4px 8px; border-radius:999px; border:1px solid #fde68a; background:#fffbeb; color:#92400e; font-size:11px; font-weight:800; cursor:pointer; transition:.15s}
.pet-snack-btn:hover{background:#fef3c7; transform:scale(1.05)}
.pet-snack-btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.pet-snack-btn.corn{background:#f0fdf4; border-color:#bbf7d0; color:#15803d}
.pet-snack-btn.corn:hover{background:#dcfce7}
.house-pet .pet-snack-float{position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:5; background:rgba(255,255,255,.92); padding:3px 6px; border-radius:999px; border:1px solid #f3e8ff; box-shadow:0 4px 10px rgba(0,0,0,.12)}
/* Top snack inventory in pet panel */
.top-snack-bar{display:flex; align-items:center; gap:8px; margin-left:auto; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#92400e}


/* === SNACK FEED MODAL - BẤM 1 LẦN VÀO PET === */
.snack-feed-overlay{position:fixed; inset:0; background:rgba(17,24,39,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:9999; display:none; place-items:center; padding:16px; animation:petFade .2s ease}
.snack-feed-overlay.show{display:grid}
@keyframes petFade{from{opacity:0}to{opacity:1}}
.snack-feed-card{width:min(420px, 100%); max-height:min(78vh, 620px); background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; animation:petPop .3s cubic-bezier(.22,1.15,.32,1); border:1.5px solid #fde68a}
@keyframes petPop{from{transform:translateY(14px) scale(.96); opacity:0}to{transform:translateY(0) scale(1); opacity:1}}
.snack-feed-head{padding:14px 16px; background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 50%,#fde68a 100%); border-bottom:1px solid #fde68a; display:flex; align-items:center; gap:12px}
.snack-feed-pet-icon{width:48px; height:48px; border-radius:14px; background:#fff; border:1.5px solid #fde68a; display:grid; place-items:center; font-size:26px; flex-shrink:0; box-shadow:0 4px 12px rgba(245,158,11,.15)}
.snack-feed-body{padding:12px; overflow:auto; flex:1; background:#fffcf8; display:flex; flex-direction:column; gap:10px}
.snack-feed-item{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:#fff; border:1.5px solid #f3e8ff; transition:.18s; cursor:pointer}
.snack-feed-item:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(139,92,246,.08); border-color:#fde68a}
.snack-feed-item.has-stock{border-color:#fde68a; background:linear-gradient(135deg,#fff,#fffbeb)}
.snack-feed-item.no-stock{opacity:.6; background:#f9fafb; border-style:dashed}
.snack-feed-item-icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:24px; flex-shrink:0; background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a}
.snack-feed-item-info{flex:1; min-width:0}
.snack-feed-item-name{font-family:'Baloo 2'; font-weight:800; font-size:13.5px; color:#4c1d95; line-height:1.1}
.snack-feed-item-desc{font-size:11px; color:#6b7280; margin-top:2px}
.snack-feed-item-meta{display:flex; gap:6px; margin-top:5px; flex-wrap:wrap}
.snack-feed-badge{font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; border:1px solid}
.snack-feed-badge.stock{background:#dcfce7; color:#15803d; border-color:#bbf7d0}
.snack-feed-badge.empty{background:#fee2e2; color:#b91c1c; border-color:#fecaca}
.snack-feed-badge.time{background:#fffbeb; color:#92400e; border-color:#fde68a}
.snack-feed-item-actions{display:flex; gap:6px; flex-shrink:0}
.snack-feed-btn{padding:8px 14px; border-radius:999px; border:0; font-weight:800; font-size:12.5px; cursor:pointer; transition:.15s; font-family:inherit}
.snack-feed-btn:active{transform:scale(.96)}
.snack-feed-btn.feed{background:linear-gradient(135deg,#f59e0b,#ec4899); color:#fff; box-shadow:0 4px 12px rgba(245,158,11,.25)}
.snack-feed-btn.feed:disabled{background:#e5e7eb; color:#9ca3af; box-shadow:none; cursor:not-allowed}
.snack-feed-btn.buy{background:#fff; border:1.2px solid #fde68a; color:#92400e}
.snack-feed-foot{padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; border-top:1px solid #fef3c7; position:sticky; bottom:0}
.pet-happy{animation:petHappy .6s ease}
@keyframes petHappy{0%{transform:scale(1)}30%{transform:scale(1.15) rotate(-4deg)}60%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}