/* ========================================================= */
/* 🎯 PHÉP THUẬT GIẢ LẬP NATIVE APP (CHỐNG LỖI WEB SPAM) 🎯 */
/* ========================================================= */

html, body {
    /* 1. Chặn hiệu ứng kéo giãn cao su (Overscroll/Bounce) ở mép màn hình */
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    
    /* 2. Chặn bôi đen text khi user vô tình double-tap hoặc đè ngón tay */
    -webkit-user-select: none;
    user-select: none;
    
    /* 3. Chặn hiện popup menu (Copy, Paste, Save Image) khi đè lâu trên màn hình */
    -webkit-touch-callout: none;
    
    /* 4. Tắt cái chớp nháy màu xám/xanh mặc định của Android khi chạm vào bất cứ đâu */
    -webkit-tap-highlight-color: transparent;
    
    /* Mở rộng thêm để chặn hành vi mặc định của con trỏ */
    touch-action: pan-y; 
}

/* ⚠️ LƯU Ý TỬ HUYỆT: Phải mở lại quyền gõ phím cho ô Tìm Kiếm (Search) */
/* Nếu không có đoạn này, user bấm vào ô Search sẽ không gõ được chữ nào! */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

/* Chặn luôn việc kéo thả hình ảnh (làm lòi ra bóng mờ của hình) */
img {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ========================================================= */
/* 🔓 GIẢI BÙA: MỞ KHÓA CHO Ô TÌM KIẾM VÀ NHẬP LIỆU          */
/* ========================================================= */
input, textarea {
    /* Trả lại quyền bôi đen, copy/paste và gõ phím cho thẻ input */
    -webkit-user-select: auto !important;
    user-select: auto !important;
    
    /* Trả lại menu ngữ cảnh (Copy/Paste) mặc định của bàn phím */
    -webkit-touch-callout: default !important;
}

/* (Tuỳ chọn) Nếu mày muốn chỉ đích danh cái ô Search của mày cho chắc ăn: */
#searchInput {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

:root{ --bg:#f5f6fb; --card:#ffffff; --primary:#5b6cff; --primary-soft:#eef0ff; --primary-dark:#3f4fd8; --secondary:#8b5cf6; --secondary-soft:#f3e8ff; --hot:#ff4d4f; --new:#22c55e; --played:#64748b; --border:#e5e7eb; --text-main:#111827; --text-sub:#6b7280; } /* ================= RESET ================= */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; width: 100%; background: #f5f6fb; font-family: system-ui, -apple-system, BlinkMacSystemFont; color: #222; } /* ================= HEADER ================= */ .header{ height:56px; display:flex; align-items:center; justify-content:space-between; /* 👈 QUAN TRỌNG */ padding:0 14px; /* 👈 thêm padding */ background:#fff; border-bottom:1px solid #eee; } .logo-small{ height:30px; object-fit:contain; } /* Nút Nhà Tôi */ .header-profile-btn{ padding:6px 14px; font-size:13px; font-weight:700; border-radius:14px; border:none; background:var(--primary); color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(91,108,255,.3); } /* ================= GRID & CARD ================= */ .grid{ padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .card{ background:#fff; border-radius:16px; padding:10px; text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.06); position:relative; } .card img{ width:100%; border-radius:12px; } .card span{ display:block; margin-top:6px; font-size:14px; font-weight:600; } /* ================= CATEGORY ================= */ .category-bar{ padding:10px 14px; display:flex; gap:10px; overflow-x:auto; } .category-chip{ padding:8px 14px; border-radius:18px; background:#fff; border:1px solid #ddd; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; } .category-chip.active{ background:#5b6cff; color:#fff; border-color:#5b6cff; } /* ================= SEARCH ================= */ .search-box{ padding:0 14px 10px; } .search-box input{ width:100%; padding:12px 14px; border-radius:14px; border:1px solid #ddd; font-size:15px; outline:none; } .search-box input:focus{ border-color:#5b6cff; } /* ================= HORIZONTAL SCROLL ================= */ .h-scroll { display: flex; gap: 14px; overflow-x: auto; padding: 0 14px 14px; scroll-snap-type: x mandatory; } .h-scroll::-webkit-scrollbar { display: none; } .h-scroll .card { flex: 0 0 auto; scroll-snap-align: start; } /* Featured ICON 1:1 */ .card-featured{ width: clamp(140px, 42vw, 180px); box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 0 0 2px var(--primary-soft); } .card-featured img{ width: 100%; aspect-ratio: 1 / 1; /* ✅ ICON 1:1 */ object-fit: cover; border-radius: 16px; } .card-featured::after{ content:''; position:absolute; inset:0; border-radius:16px; box-shadow:0 0 0 2px rgba(91,108,255,.15) inset; } /* Recent small card */ .card-recent { width: 120px; } /* Recent games: chỉ icon, ẩn tên */ .card-recent span{ display: none; } /* ================= CORNER LABEL (IN ICON) ================= */ .corner-label{ position:absolute; top:0; left:0; padding:5px 10px; font-size:12px; font-weight:700; color:#fff; z-index:5; line-height:1; /* ăn theo bo góc icon */ border-top-left-radius:12px; border-bottom-right-radius:12px; pointer-events:none; } /* Featured */ .corner-featured{ background:#2f54eb; } /* Hot */ .corner-hot{ background:#ff4d4f; } /* New */ .corner-new{ background:#52c41a; } /* ================= SIMPLE FOOTER ================= */ .simple-footer{ margin-top:24px; padding:16px 14px 20px; background:#0f172a; /* xanh dương đậm hơn Game hay */ color:#c7d2fe; font-size:12px; line-height:1.5; text-align:center; } .simple-footer strong{ color:#ffffff; font-size:13px; } /* ================= FLOAT MENU ================= */ .float-menu-btn{ position:fixed; right:12px; top:120px; width:56px; height:56px; border-radius:28px; background:rgba(0,0,0,.75); color:#fff; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:9999; touch-action:none; user-select:none; } /* ================= QUICK PANEL ================= */ .quick-panel{ position:fixed; left:0; right:0; bottom:-100%; height:48%; background:#111827; color:#fff; border-top-left-radius:20px; border-top-right-radius:20px; z-index:9998; display:flex; flex-direction:column; transition:bottom .28s ease; } .quick-panel.show{ bottom:0; } .quick-header{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-size:16px; font-weight:700; } .quick-header button{ background:none; border:none; color:#fff; font-size:20px; } .quick-games{ flex:1; } .quick-games .card{ background:#1f2937; color:#fff; } .quick-actions{ display:flex; border-top:1px solid rgba(255,255,255,.1); } .quick-actions button{ flex:1; padding:14px 0; background:none; border:none; color:#fff; font-size:14px; font-weight:600; } .quick-actions button.disabled{ opacity:.4; } /* ================= BANNER SLIDER ================= */ .banner-wrapper{ margin: 12px 14px 6px; position: relative; display: block; } /* ===== SLIDER ===== */ .banner-slider{ display:flex; gap:14px; height: 22vh; min-height: 170px; max-height: 240px; padding:0; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; touch-action:pan-x; } /* ===== IMAGE ===== */ .banner-slider img{ flex:0 0 94%; max-width:94%; height:100%; object-fit:cover; border-radius:18px; scroll-snap-align:center; cursor:pointer; } .banner-slider::-webkit-scrollbar{ display: none; } /* ===== INDICATOR ===== */ .banner-dots{ display: flex; justify-content: center; gap: 6px; margin-top: 6px; } .banner-dots span{ width: 6px; height: 6px; border-radius: 50%; background: #ccc; opacity: .5; } .banner-dots span.active{ width: 14px; border-radius: 6px; background: var(--primary); opacity: 1; } .btn-close-game{ position:fixed; top:12px; right:12px; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.75); color:#fff; font-size:22px; font-weight:700; display:none; align-items:center; justify-content:center; z-index:9999; touch-action:none; } .exit-confirm{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:999999; /* 🔥 cao hẳn lên */ pointer-events:auto; } .exit-box{ background:#fff; padding:20px; border-radius:14px; width:260px; text-align:center; animation: fadeScale .2s ease; } .exit-actions{ display:flex; justify-content:space-between; margin-top:14px; gap:10px; } .exit-actions button{ flex:1; padding:8px 0; border:none; border-radius:8px; } #exitCancel{ background:#eee; } #exitOk{ background:#ff4d4f; color:#fff; } @keyframes fadeScale{ from{ transform:scale(.9); opacity:0; } to{ transform:scale(1); opacity:1; } }
.profile-page{
position:fixed;
pointer-events:auto;
inset:0;
background:#0f172a;
z-index:99999;
display:none;
flex-direction:column;
overflow:hidden;
}
.profile-header{ 
    padding:14px; display:flex; justify-content:space-between; align-items:center; background:#1e293b; color:#fff; font-weight:700; }
.profile-content{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:14px;
  color:#fff;
  min-height:0;
}
.profile-content::-webkit-scrollbar{
  display:none;
}
.profile-box{ background:#1e293b; padding:12px; border-radius:12px; margin-bottom:10px; font-size:14px; line-height:1.45; } .mono{ font-family:monospace; word-break:break-all; font-size:12px; margin-top:6px; } .profile-close-floating{ position: fixed; top: 90px; /* 👈 xuống dưới header */ right: 16px; width: 38px; height: 38px; border-radius: 50%; border: none; background: #1e293b; color: #fff; font-size: 18px; z-index: 9999; } .help-circle{ width:22px; height:22px; border-radius:50%; background:#334155; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer; }
.character-wrapper img{ position:relative; }
/* ================= CHARACTER STAGE ================= */
.character-box{

display:flex;
justify-content:center;

padding:20px 0;
border:none !important;

box-shadow:none !important;

}

.gender-select{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:4px;
  z-index:5;
}

#selectCharacterBox{
  text-align:center;
  flex:none;
  display:flex;
  flex-direction:column;
  padding:10px 12px;
}

.gender-card img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
  max-height:120px;
}

.gender-card span{
  display:block;
  margin-top:6px;
  font-weight:600;
  color:#fff;
  font-size:13px;
}
.profile-box.character-box{

background:transparent !important;

padding:0;

margin-bottom:0;

border-radius:0;

}

.exit-box{ pointer-events:auto; } .exit-actions button{ pointer-events:auto; } /* ===== MOBILE TAP EFFECT ===== */
.gender-card{
position:relative;

overflow:hidden;
border:2px solid transparent;

transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;

cursor:pointer;          /* 👈 cho phép click */
z-index:5;               /* 👈 nổi lên trên */
pointer-events:auto;     /* 👈 đảm bảo nhận click */
}
.gender-card:active{ transform:scale(.96); } /* trạng thái đã chọn */ .gender-card.selected{ border-color:#facc15; box-shadow: 0 0 20px rgba(250,204,21,.6), 0 8px 25px rgba(250,204,21,.35); } /* glow nhẹ nhịp thở */ .gender-card.selected::after{ content:''; position:absolute; inset:0; border-radius:16px; box-shadow:0 0 25px rgba(250,204,21,.5); animation:pulseGlow 2s infinite ease-in-out; pointer-events:none; } @keyframes pulseGlow{ 0% { opacity:.6; } 50% { opacity:1; } 100% { opacity:.6; } } /* ===== PROFILE BOX HEADER FIX ===== */ .profile-box-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; } .help-circle{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#334155; display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:transform .15s ease, background .2s ease; } .help-circle:active{ transform:scale(.9); background:#475569; } 
.star-row{ display:flex; align-items:center; gap:2px; margin:6px 0 4px; font-size:16px; } .star-filled{ color:#FFD700; text-shadow: 0 0 4px rgba(255,215,0,.8), 0 0 8px rgba(255,200,0,.6); animation:starGlow 2s infinite ease-in-out; } .star-empty{ color:#555; opacity:.5; } .star-count{ margin-left:6px; font-size:14px; opacity:.7; } @keyframes starGlow{ 0%{ text-shadow: 0 0 4px rgba(255,215,0,.6), 0 0 6px rgba(255,200,0,.4); } 50%{ text-shadow: 0 0 6px rgba(255,215,0,1), 0 0 12px rgba(255,200,0,.8); } 100%{ text-shadow: 0 0 4px rgba(255,215,0,.6), 0 0 6px rgba(255,200,0,.4); } } 
/* ===== PROFILE INFO ===== */
.profile-rank{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  opacity:.9;
}
.rank-label{ opacity:.7; }
.rank-value{
  font-size:18px;
  font-weight:700;
}
.rank-title{
  font-size:15px;
  color:#facc15;
}
.profile-id{ font-size:12px; opacity:.6; margin-bottom:8px; font-family:monospace; } 
.profile-tier{ font-size:17px; font-weight:700; margin-bottom:4px; } .char-name{ margin-left:6px; } 
.profile-progress{ margin-top:8px; font-size:13px; opacity:.85; }
/* ===== STATS ===== */
.profile-stats-grid{
  display:grid;
  grid-template-columns:100px auto;
  row-gap:6px;
  column-gap:10px;
}
.stat-item{ display:contents; }
.stat-item span{ opacity:.7; }
.stat-item b{
  font-weight:600;
}
/* ===== HELP MODAL ===== */ /* ===== HELP MODAL (PROFILE STYLE) ===== */ .help-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:99999; padding:20px; } .help-box{ width:100%; max-width:360px; background:#1e293b; border-radius:16px; padding:18px 16px; color:#e5e7eb; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation:fadeScale .18s ease; } /* ===== HEADER ===== */ .help-header{ font-size:16px; font-weight:700; text-align:center; margin-bottom:14px; } /* ===== CONTENT ===== */ .help-content{ font-size:14px; line-height:1.3; } .help-item{ margin-bottom:10px; } .help-item b{ display:block; font-weight:700; color:#93c5fd; margin-bottom:3px; } .help-item p{ margin:0; opacity:.9; } /* ===== CLOSE BUTTON ===== */ .help-close-btn{ width:100%; margin-top:16px; padding:9px 0; border:none; border-radius:10px; background:#334155; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:.15s; } .help-close-btn:active{ transform:scale(.96); background:#475569; } /* ===== MENU ===== */ .bottom-menu{ position:fixed; bottom:0; left:0; right:0; height:60px; background:#fff; border-top:1px solid #eee; display:flex; justify-content:space-around; align-items:center; z-index:9999; transition:transform .25s ease; } .bottom-menu.hide{ transform:translateY(100%); } .menu-item{ flex:1; border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:12px; color:#555; } .menu-item span{ font-size:18px; } .menu-item b{ font-weight:600; }
.profile-bottom-menu {
    height: 60px;
    background: #1e293b;
    border-top: 1px solid #334155;
    display: flex;
    position: absolute;
    bottom: 0; left: 0; right: 0; /* Ép nó dính chặt đáy */
    flex-shrink: 0;
    z-index: 100005 !important; /* 🔥 Cao nhất để Drawer trượt phía SAU nó */
}

.profile-menu-item{
  flex:1;

  border:none;
  background:none;

  color:#94a3b8;
  font-size:14px;
  font-weight:600;

  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.profile-menu-item.active{
  color:#fff;
  background:#0f172a;
}
.profile-menu-item.active::before{
  content:"";
  position:absolute;
  top:0;
  left:30%;
  width:40%;
  height:3px;
  background:#5b6cff;
  border-radius:3px;
}

.mission-tabs{
display:flex;
gap:6px;
padding:10px 12px 0;
margin-bottom:10px;
}

.mission-tab{
flex:1;
border:none;
background:#334155;
color:#94a3b8;
padding:10px;
border-radius:10px;
font-weight:600;
}

.mission-tab.active{
background:#5b6cff;
color:#fff;
}

.mission-card{
background:#1e293b;
padding:8px 10px;
border-radius:10px;
margin-bottom:6px;
display:flex;
justify-content:space-between;
align-items:center;
}

.mission-title{
font-size:13px;
line-height:1.2;
}

.mission-reward{
font-size:12px;
color:#94a3b8;
opacity:1;
}

.mission-btn{
background:#475569;
border:none;
color:#fff;
padding:4px 8px;
border-radius:8px;
font-size:12px;
}

.mission-btn.ready{
background:#22c55e;
}

.mission-btn.done{
background:#64748b;
}

.mission-btn:disabled{
opacity:.4;
cursor:not-allowed;
}

#missionList{
flex:1;
overflow-y:auto;

padding:8px 12px 80px; /* tránh đụng bottom menu */

-webkit-overflow-scrolling:touch;
}

#missionList::-webkit-scrollbar{
display:none;
}


/* MISSION DRAWER */
#missionPage{
position:fixed;
left:0;
right:0;
bottom:60px;

height:360px;
max-height:65vh;   /* 🔥 FIX */

background:#0f172a;

transform:translateY(100%);
transition:transform .25s ease;

z-index:10000;

display:none;
flex-direction:column;
}

#missionPage.show{
transform:translateY(0);
}

.diamond-fly{
position:fixed;
font-size:22px;
z-index:999999;

transition:
transform .8s cubic-bezier(.22,.8,.3,1),
opacity .8s;

pointer-events:none;
}

.reward-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    
    /* 🎯 FIX THEO YÊU CẦU CỦA MÀY */
    background: transparent; /* Xóa sổ cái nền đen */
    color: #ff4d4f;          /* Chữ màu đỏ */
    white-space: nowrap;     /* Ép cứng nằm trên đúng 1 dòng */
    
    /* 🎯 HIỆU ỨNG CHỮ NỔI CHO GAME (Rất quan trọng) */
    font-size: 14px;         /* Thu nhỏ tí xíu để dòng dài không tràn màn hình */
    font-weight: 900;
    text-align: center;
    /* Tạo viền đen bao quanh chữ đỏ + Bóng đổ để nổi bật trên mọi loại phông nền */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 4px 12px rgba(0,0,0,0.8);
    
    z-index: 999999;
    pointer-events: none; /* Không che các nút bấm bên dưới */
    
    /* Hiệu ứng nảy (Bounce) nhẹ nhàng lúc xuất hiện */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reward-toast.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.select-class-title{
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
  color:#94a3b8;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* ================= HERO CARD ================= */

.hero-card{
position:relative;
width:100%;
max-width:260px;
aspect-ratio:3/4;
margin:0 auto;
transform:translateZ(0);
will-change:transform;
display:flex;
align-items:center;
justify-content:center;
padding:6px;
overflow:visible;
}

.hero-card::after{

content:"";
position:absolute;
bottom:-25px;
left:50%;

width:70%;
height:40px;

transform:translateX(-50%);

background:radial-gradient(
ellipse,
rgba(0,0,0,.45),
transparent 70%
);

z-index:-1;

}
/* ===== TIER LABEL ===== */

.hero-tier{

position:absolute;
top:10px;
left:12px;

background:rgba(0,0,0,.55);

padding:4px 10px;

border-radius:5px;

font-size:12px;
font-weight:700;

color:#facc15;

z-index:3;

}

/* ===== HERO STAGE ===== */

.hero-stage{
pointer-events:none;
height:100%;
width:100%;

display:flex;
align-items:center;
justify-content:center;
z-index:5;
}

.hero-stage img{

position:absolute;

bottom:-6px;

height:110%;
max-height:95%;

object-fit:contain;

z-index:4;

filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));

}


/* ================= TIER BACKGROUND ================= */

@keyframes heroLegend{

from{

box-shadow:
0 0 25px rgba(249,115,22,.6),
0 0 40px rgba(249,115,22,.4);

}

to{

box-shadow:
0 0 45px rgba(249,115,22,1),
0 0 80px rgba(249,115,22,.7);

}

}

.hero-frame{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
z-index:2;

transform:scale(.96);   /* thu frame vào */
}

#heroCard{
display:none;
}


/* ===== HERO GLOW BY TIER ===== */

.hero-card.tier-common{
box-shadow:
0 0 10px rgba(148,163,184,.3);
}

.hero-card.tier-rare{
box-shadow:
0 0 20px rgba(59,130,246,.6),
0 0 60px rgba(59,130,246,.35);
}

.hero-card.tier-epic{
box-shadow:
0 0 30px rgba(168,85,247,.7),
0 0 70px rgba(168,85,247,.45);
}

.hero-card.tier-legend{
box-shadow:
0 0 35px rgba(249,115,22,.9),
0 0 90px rgba(249,115,22,.55);

animation:legendGlow 2.5s infinite alternate;
}

.hero-card.tier-legend::before{
content:"";
position:absolute;
inset:8px;

background:radial-gradient(
circle,
rgba(255,180,80,.15) 0%,
transparent 70%
);

pointer-events:none;
z-index:1;
}

pointer-events:none;
}

@keyframes legendGlow{
from{
box-shadow:
0 0 25px rgba(249,115,22,.7),
0 0 70px rgba(249,115,22,.5);
}
to{
box-shadow:
0 0 45px rgba(249,115,22,1),
0 0 110px rgba(249,115,22,.8);
}
}

/* ===== FRAME SHINE ===== */

@keyframes frameShine{

0%{
background-position:-250% 0;
}

100%{
background-position:250% 0;
}

}

/* ===== BACKGROUND PARTICLES ===== */

.hero-card::before{

content:"";

position:absolute;

inset:6px;

background-image:

radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px);

background-size:40px 40px,60px 60px;

background-position:0 0,20px 20px;

animation:particleMove 40s linear infinite;

opacity:.18;

z-index:0;

pointer-events:none;

}

@keyframes particleMove{

from{
background-position:0 0,20px 20px;
}

to{
background-position:0 400px,20px 420px;
}

}

@keyframes shineTop{
0%{background-position:-200px}
100%{background-position:200px}
}

@keyframes shineBottom{
0%{background-position:200px}
100%{background-position:-200px}
}

@keyframes shineLeft{
0%{background-position:-200px}
100%{background-position:200px}
}

@keyframes shineRight{
0%{background-position:200px}
100%{background-position:-200px}
}

.hero-frame-light{

position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent 48%,
rgba(255,255,255,.45) 50%,
transparent 52%
);

background-size:250% 250%;

animation:frameShine 8s ease-in-out infinite;

pointer-events:none;

z-index:1;

/* 🔥 CHỈ GIỮ PHẦN VIỀN */

clip-path:polygon(
0% 0%,100% 0%,100% 100%,0% 100%,
0% 0%,

6% 6%,
6% 94%,
94% 94%,
94% 6%,
6% 6%
);

}


#appSplash {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff; /* Nền màu trắng theo yêu cầu */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999999; /* Luôn nằm trên cùng */
        opacity: 1;
        transition: opacity 0.6s ease-out; /* Mượt mà lúc ẩn đi */
    }

    #appSplash.hide {
        opacity: 0;
        pointer-events: none; /* User không thể tương tác khi đã ẩn */
    }

    /* Hiệu ứng mượt mà lúc mới mở: Logo hiện dần lên + Pulse nhẹ */
    #splashLogo {
        width: 240px; /* Bạn có thể chỉnh lại kích thước logo */
        opacity: 0;
        animation: splashIn 1s ease-out forwards, pulseSplash 2.5s infinite ease-in-out 1s;
    }

    @keyframes splashIn {
        0% { opacity: 0; transform: scale(0.9); }
        100% { opacity: 1; transform: scale(1); }
    }

    @keyframes pulseSplash {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.05); opacity: 0.9; }
        100% { transform: scale(1); opacity: 1; }
    }

    /* ===== INVENTORY STYLES ===== */
.inventory-drawer {
    position: fixed !important;  /* 🔥 Chuyển sang fixed để nó ăn theo màn hình */
    left: 0; 
    right: 0; 
    bottom: 60px;              /* 🔥 Đẩy lên trên Menu giống hệt Nhiệm vụ */
    height: 360px;
    background: #0f172a !important;
    z-index: 100001 !important; /* 🔥 Cho cao hơn hẳn để không bị thằng nào đè */
    display: none;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .25s ease;
    border-top: 2px solid #334155;
}

.inventory-drawer.show {
    display: flex;
    transform: translateY(0);
}

.inventory-header {
    padding: 12px 15px;
    border-bottom: 1px solid #334155;
    font-weight: 700;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

/* 🎯 Lưới 5 cột chuẩn 30 ô */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 15px;
    overflow-y: auto;
    flex: 1; /* Chiếm hết phần còn lại */
}

.inventory-slot {
    aspect-ratio: 1 / 1;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-slot.active {
    border-color: #5b6cff;
    box-shadow: inset 0 0 10px rgba(91,108,255,0.2);
}

.inventory-slot img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* Các ngăn kéo */
#missionPage, #inventoryPage {
    z-index: 10000; /* Thấp hơn menu một chút để menu luôn hiện */
}

/* Pop-up chi tiết item phải cao hơn cả Menu */
#itemDetailModal {
    z-index: 100010 !important;
}

.item-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #ef4444; /* Màu đỏ nổi bật */
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 8px;
    border: 2px solid #1e293b;
    z-index: 2;
}
.inventory-slot { position: relative; } /* Thêm cái này để số x2 nó nằm đúng góc */

/* ===== SHOP STYLES ===== */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cột cho to rõ */
    gap: 12px;
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.shop-item {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.shop-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 8px;
}

.shop-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: 4px;
}

.shop-item-price {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.price-diamond { color: #22d3ee; }
.price-coin { color: #facc15; }

.shop-item-limit {
    font-size: 11px;
    color: #94a3b8;
    background: #0f172a;
    padding: 2px 8px;
    border-radius: 6px;
    width: 100%;
}

.shop-item-desc {
    font-size: 11px;
    color: #94a3b8;
    margin: 4px 0 8px 0;
    line-height: 1.4;
    flex-grow: 1; /* 🎯 Cực kỳ quan trọng: Đẩy các đoạn text giãn ra để nút MUA luôn chốt ở đáy */
    display: flex;
    align-items: center;
}

.shop-btn-buy {
    margin-top: 10px;
    width: 100%;
    background: #5b6cff;
    color: #fff;
    border: none;
    padding: 6px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
}
.shop-btn-buy:active { transform: scale(0.95); }
.shop-btn-buy.disabled { 
    background: #475569; 
    color: #94a3b8; 
}

/* ===== ICONS STYLES ===== */
.icon-diamond {
    color: #22d3ee; /* Màu xanh kim cương */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px; /* Khoảng cách giữa số và icon */
}

.icon-coin {
    color: #facc15; /* Màu vàng xu */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 4px; /* Khoảng cách giữa số và icon */
}

.icon-coin img, .icon-diamond img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* ===== ✨ [VISUAL UPGRADE] PHÌNH TO PET TRÊN CARD ✨ ===== */

.hero-pet-slot {
    position: absolute;
    /* Neo Pet ở góc trên bên phải, khi to ra nó sẽ phình xuống dưới và sang trái */
    top: 5px; 
    right: 5px;
    width: auto; /* Gỡ bỏ size cố định */
    height: auto; /* Gỡ bỏ size cố định */
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-pet-slot img {
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floatingPet 3s ease-in-out infinite; 
}

/* Lưới hiển thị Pet trong ngăn kéo */
.pets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 cột cho gọn */
    gap: 8px;
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.pet-slot {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}
.pet-slot:active { transform: scale(0.95); }
.pet-slot.equipped { border-color: #facc15; box-shadow: 0 0 5px rgba(250, 204, 21, 0.5); } /* Viền vàng con đang xài */

/* 🎯 CSS Cập nhật Tinh Linh trong Rương đồ (Để tạo cảm giác "Wow" lúc nhìn rương) */
.pet-slot img {
    width: 45px;    /* 🎯 Tăng nhẹ trong rương (Cũ: 40px) */
    height: 45px;   /* 🎯 Tăng nhẹ trong rương (Cũ: 40px) */
    object-fit: contain;
    transition: transform 0.2s ease-in-out; /* Thêm hiệu ứng mượt khi hover/click */
}

/* 🎯 HIỆU ỨNG TRUYỀN THÔNG: Khi di chuột hoặc chạm vào Rương đồ, Pet sẽ to lên! */
.pet-slot:hover img, .pet-slot:active img {
    transform: scale(1.2); /* Phóng to 20% tạo cảm giác vật phẩm giá trị */
}

/* Màu sắc độ hiếm (Rarity) */
.pet-slot.common { border-color: #94a3b8; } /* Xám */
.pet-slot.rare { border-color: #34d399; }   /* Xanh lá */
.pet-slot.epic { border-color: #a78bfa; }   /* Tím */
.pet-slot.legend { border-color: #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } /* Vàng phát sáng */

/* UI Ghép thú */
.pets-merge-zone {
    padding: 15px;
    background: #0f172a;
    border-top: 1px solid #334155;
}
.merge-slots {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.merge-slot {
    width: 50px;
    height: 50px;
    background: #1e293b;
    border: 2px dashed #475569;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.merge-slot img { width: 40px; height: 40px; object-fit: contain; }

/* Animation Pet bay lơ lửng */
@keyframes floatingPet {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* ===== ✨ ✨ ✨ ✨ VFX PET HAROQUANG (BẢN FIX NEON CHUẨN) ✨ ✨ ✨ ✨ ===== */

.hero-pet-slot img, .pet-slot img {
    padding: 2px;
}

/* 🎯 Fallback mặc định nếu chưa có độ hiếm */
.hero-pet-slot img {
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

/* 🟢 Common - Trắng */
.hero-pet-slot.common img, .pet-slot.common img {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.9)) drop-shadow(0 0 12px rgba(255,255,255,0.5));
}

/* 🔵 Rare - Xanh lá */
.hero-pet-slot.rare img, .pet-slot.rare img {
    filter: drop-shadow(0 0 4px rgba(52,211,153,0.9)) drop-shadow(0 0 14px rgba(52,211,153,0.7));
}

/* 🟣 Epic - Tím */
.hero-pet-slot.epic img, .pet-slot.epic img {
    filter: drop-shadow(0 0 5px rgba(167,139,250,0.9)) drop-shadow(0 0 16px rgba(167,139,250,0.7));
}

/* 🟡 Legend - Vàng Rực (Đã Đổi tên Keyframe để không bị đè) */
.hero-pet-slot.legend img, .pet-slot.legend img {
    filter: drop-shadow(0 0 6px rgba(255,215,0,1)) drop-shadow(0 0 20px rgba(255,215,0,0.8));
    animation: floatingPet 2s ease-in-out infinite, petLegendGlow 3s ease-in-out infinite;
}

/* 🎯 HÀM PHÌNH TO THEO ĐỘ HIẾM */

.hero-pet-slot.common img {
    width: 80px;
    height: 80px;
}

.hero-pet-slot.rare img {
    width: 100px;
    height: 100px;
}

.hero-pet-slot.epic img {
    width: 130px;
    height: 130px;
}

.hero-pet-slot.legend img {
    width: 145px; /* Khổng lồ, chiếm gần hết chiều ngang thẻ bài */
    height: 145px;
}

/* 🎯 Đổi tên thành petLegendGlow để an toàn */
@keyframes petLegendGlow {
    0% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)) drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
    50% { filter: drop-shadow(0 0 8px rgba(255,215,0,1)) drop-shadow(0 0 28px rgba(255,215,0,0.9)); }
    100% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)) drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
}

/* Nhãn Đang Dùng cho Pet */
.pet-equipped-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: #22c55e;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 6px;
    border: 2px solid #1e293b; /* Viền tiệp màu nền để tạo độ nổi */
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Nút LOG cạnh Label thống kê */
.btn-stats-log {
    background: #475569;
    color: #fff;
    border: 1px solid #1e293b;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 5px;
    transition: background 0.2s;
}
.btn-stats-log:hover { background: #64748b; }

/* Cấu trúc Modal Log */
.log-modal {
    width: 80%; /* 🎯 FIX: Ép nó bung rộng ra bằng 92% màn hình điện thoại */
    max-width: 450px; /* Tối đa 450px nếu mở trên iPad/PC */
    max-height: 80vh; 
    background: #1e293b;
    border: 2px solid #a78bfa; 
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
}

.log-modal .modal-header h3 { color: #fff; margin: 0; font-size: 16px; }
.log-modal .modal-body { padding: 10px; overflow-y: auto; flex: 1; }

/* Thanh cuộn scroll (cho nó tàng hình bớt) */
.scrollable::-webkit-scrollbar { width: 4px; }
.scrollable::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }

/* Từng dòng Log Item */
.log-item {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 6px;
    border-left: 3px solid #64748b; /* Viền xám mặc định */
}

/* Các loại log khác nhau (optional) */
.log-item.log-game { border-left-color: #22c55e; } /* Game viền xanh */
.log-item.log-ad { border-left-color: #3b82f6; }   /* Ad viền xanh dương */

.log-top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.log-time { color: #94a3b8; font-size: 10px; }
.log-diamond-add { color: #3b82f6; font-size: 11px; font-weight: bold; } /* Diamond xanh dương */

.log-desc { color: #fff; font-size: 12px; font-weight: bold; margin-bottom: 4px; }

/* Dòng chi tiết Buff (Tâm điểm) */
.log-details { font-size: 10px; color: #cbd5e1; display: flex; flex-wrap: wrap; gap: 5px; }
.log-base { color: #fff; font-weight: bold; } /* Điểm gốc trắng */
.log-total-add { color: #22c55e; font-weight: bold; font-size: 12px;} /* Điểm tổng xanh lá */

/* Màu xanh Epic cho Buff Pet và Buff VIP */
.bonus-green { color: #34d399; }

/* ================================================= */
/* 🔥 FIX: LỚP PHỦ OVERLAY VÀ HEADER CỦA BẢNG LOG 🔥 */
/* ================================================= */

/* Lớp màn đen mờ bao phủ toàn màn hình */
.modal-overlay {
    position: fixed;
    inset: 0; /* Ép tràn 4 viền top, left, right, bottom */
    background: rgba(0, 0, 0, 0.75);
    z-index: 100100; /* Nâng siêu cao để đè lên mọi menu/ngăn kéo */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Chỉnh lại Header của bảng Log (Chữ bên trái, dấu X bên phải) */
.log-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #334155;
    margin-bottom: 10px;
}

/* Nút X đóng mượt mà */
.close-btn {
    color: #94a3b8;
    font-size: 26px;
    cursor: pointer;
    font-weight: bold;
    line-height: 0.8;
    transition: color 0.2s;
}

.close-btn:active, .close-btn:hover {
    color: #ef4444; /* Bấm vào chớp đỏ */
}

/* ===== THANH KINH NGHIỆM & NÚT ĐỘT PHÁ ===== */
.exp-container {
    margin-top: 12px;
    background: #0f172a;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #334155;
}

.exp-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    color: #94a3b8;
    margin-bottom: 6px;
}

.exp-bar-bg {
    width: 100%;
    height: 10px;
    background: #1e293b;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.exp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 5px;
    width: 0%; /* JS sẽ tự fill % vào đây */
    transition: width 0.4s ease;
}

/* NÚT ĐỘT PHÁ (Khi Max Level) */
.btn-limit-break {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: linear-gradient(45deg, #ef4444, #f97316); /* Đỏ cam bốc lửa */
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    border: 2px solid #facc15;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    animation: pulseBreak 1.5s infinite;
}

.btn-limit-break:active { transform: scale(0.95); }

@keyframes pulseBreak {
    0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 25px rgba(249, 115, 22, 0.9); }
    100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
}