: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;   /* 👈 thêm dòng này */
}


.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;
  overflow-y:auto;      /* 🔥 nếu nội dung dài thì scroll */
}

.profile-box{
  background:#1e293b;
  padding:12px;
  border-radius:12px;
  margin-bottom:14px;
  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;
}

.help-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.help-box{
  background:#0f172a;
  padding:20px;
  border-radius:14px;
  width:85%;
  max-width:300px;
  color:#fff;
}



.character-wrapper img{
  position:relative;
}

/* ================= CHARACTER STAGE ================= */

.character-box{
  flex:0 0 auto;          /* ❗ KHÔNG chiếm full */
  min-height:200px;       /* đủ để chứa nhân vật */
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-top:10px;
  position:relative;
}

.character-wrapper{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}


/* ===== GENDER SELECT ===== */

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

#selectCharacterBox{
  text-align:center;
}

.gender-card{
  width:100%;
  background:#334155;
  border-radius:16px;
  padding:8px;                /* 🔥 giảm padding */
  text-align:center;
  cursor:pointer;
  transition:.25s;
}

.gender-card img{
  width:100%;
  height:200px;               /* 🔥 cố định cao */
  object-fit:cover;           /* 🔥 full khung */
  border-radius:12px;
}

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

.profile-box.character-box{
  background: transparent !important;
}

/* ===== CHARACTER LAYER FIXED ===== */

.character-wrapper{
  position:relative;
}

.character-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:0;

  /* nền sắc nét */
  filter: brightness(.85) contrast(1.05);
}

#charBody{
  display:none;
  position:relative;
  z-index:2;
  height:95%;
  max-height:520px;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 12px 25px rgba(0,0,0,.4));
  transition: opacity .2s ease;
}

.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;
}

/* hiệu ứng nhấn xuống */
.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:8px;

  font-size:15px;
  font-weight:600;

  margin-bottom:8px;
}

.rank-label{
  opacity:.7;
}

.rank-value{
  font-weight:700;
}

.rank-title{
  color:#ffd700;
  font-weight:700;
}

.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:90px auto;
  row-gap:8px;
  column-gap:12px;
}

.stat-item{
  display:contents;
}

.stat-item span{
  opacity:.7;
}

.stat-item b{
  text-align:left;
  font-weight:700;
}