/* Mini game — khung chung cho trang danh sách và mọi game (nền vũ trụ, nút quay về, nút tiếng).
   Tự chứa: chỉ đọc token màu + phông của web, không dùng lớp nào của trang khác. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mg {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  color: #fff5f8;
  font-family: var(--f-doc, "Be Vietnam Pro", system-ui, sans-serif);
  font-size: 16px; line-height: 1.5;
  background:
    radial-gradient(120% 70% at 50% -10%, #4a1a3c 0%, rgba(74,26,60,0) 60%),
    radial-gradient(80% 50% at 100% 100%, #2a1440 0%, rgba(42,20,64,0) 70%),
    #120b12;
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Sao nền (mini-game.js / khung-game.js rắc các chấm) */
.mg-sao { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.mg-sao i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .5; animation: mg-nhay 3.6s ease-in-out infinite; }
.mg-sao i.to { width: 3px; height: 3px; background: #ffd3e6; }
@keyframes mg-nhay { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }

/* Thanh đầu + nút quay về */
.mg-dau {
  /* Dính đầu trang để nút lùi luôn ở góc trên trái, kể cả khi cuộn (cô dặn 06/10: nút lùi phải nổi bật, dễ tìm) */
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 6px;
  width: 100%; pointer-events: none;
}
.mg-ve, .mg-nut {
  display: inline-flex; align-items: center; gap: 8px; flex: none; pointer-events: auto;
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1.5px solid #ffc4dd; background: rgba(24,9,22,.92); box-shadow: 0 4px 16px rgba(0,0,0,.45);
  color: #fff5f8; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .15s;
}
.mg-ve:hover, .mg-nut:hover { background: #4a1a3c; border-color: #fff; }
.mg-ve:active, .mg-nut:active { transform: scale(.96); }
.mg-ve:focus-visible, .mg-nut:focus-visible, .mg-the:focus-visible { outline: 3px solid #f284b5; outline-offset: 3px; }
.mg-nut { margin-left: auto; padding: 0; width: 48px; justify-content: center; font-size: 18px; }
.mg-dau-ten { font-family: var(--f-hien, sans-serif); font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Thân trang danh sách */
.mg-than { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 20px 16px calc(48px + env(safe-area-inset-bottom)); text-align: center; }
.mg-tieu-de {
  margin: 4px 0 4px; font-family: var(--f-hien, sans-serif); font-weight: 800;
  font-size: clamp(40px, 11vw, 72px); line-height: 1.02; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 20%, #f6b3cf 70%, #f284b5); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mg-phu { margin: 0 0 28px; color: #e9cfdb; font-size: 16px; }

/* Lưới hành tinh game */
.mg-luoi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 28px; }
.mg-luoi > li { width: 50%; padding: 0 6px; }
@media (min-width: 640px) { .mg-luoi { row-gap: 40px; } .mg-luoi > li { width: 33.333%; padding: 0 12px; } }
@media (min-width: 900px) { .mg-luoi > li { width: 25%; } }
.mg-the { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 20px; color: inherit; text-decoration: none; }
.mg-cau {
  position: relative; display: block; width: min(150px, 40vw); aspect-ratio: 1; margin-bottom: 6px;
  animation: mg-troi 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s);
  transition: transform .25s;
}
.mg-cau img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(242,132,181,.4)); }
/* Chưa có hình riêng: hành tinh máy game chung, xoay màu cho mỗi game một sắc */
.mg-cau:not([data-rieng])[data-mau="tim"] img  { filter: hue-rotate(-55deg) drop-shadow(0 0 18px rgba(166,120,240,.45)); }
.mg-cau:not([data-rieng])[data-mau="xanh"] img { filter: hue-rotate(-120deg) drop-shadow(0 0 18px rgba(98,182,242,.45)); }
.mg-cau:not([data-rieng])[data-mau="ngoc"] img { filter: hue-rotate(-170deg) drop-shadow(0 0 18px rgba(95,214,180,.45)); }
.mg-cau:not([data-rieng])[data-mau="vang"] img { filter: hue-rotate(60deg) saturate(1.2) drop-shadow(0 0 18px rgba(245,197,90,.45)); }
.mg-cau:not([data-rieng])[data-mau="cam"] img  { filter: hue-rotate(35deg) drop-shadow(0 0 18px rgba(245,154,98,.45)); }
.mg-the:hover .mg-cau, .mg-the:focus-visible .mg-cau { transform: scale(1.07); }
.mg-the:active .mg-cau { transform: scale(.95); }
@keyframes mg-troi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.mg-ten { font-family: var(--f-hien, sans-serif); font-weight: 700; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.mg-mo-ta { color: #e9cfdb; font-size: 14px; line-height: 1.4; max-width: 22ch; overflow-wrap: anywhere; }

/* Khu riêng (Vườn Hành Tinh...): thẻ rộng, tách khỏi dãy game */
.mg-rieng { display: grid; gap: 12px; margin: 0 auto 32px; max-width: 560px; }
.mg-rieng[hidden] { display: none; }
.mg-rieng-the {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 10px; border-radius: 24px; text-align: left; text-decoration: none; color: inherit;
  background: linear-gradient(120deg, rgba(40,110,90,.55), rgba(60,30,80,.5)); border: 1.5px solid rgba(184,255,217,.55);
  box-shadow: 0 10px 34px -12px rgba(127,255,200,.55); transition: transform .2s, border-color .2s;
}
.mg-rieng-the:hover, .mg-rieng-the:focus-visible { transform: translateY(-2px); border-color: #b8ffd9; }
.mg-rieng-the:focus-visible { outline: 3px solid #b8ffd9; outline-offset: 3px; }
.mg-rieng-the img { flex: none; width: 112px; height: 112px; object-fit: contain; animation: mg-troi 6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(127,255,200,.45)); }
.mg-rieng-chu { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.mg-rieng-chu .mg-ten { font-size: 22px; }
.mg-rieng-chu .mg-mo-ta { max-width: none; }
.mg-rieng-chu .mg-nhan { margin: 0; border-color: #b8ffd9; color: #b8ffd9; }

/* Game chưa mở khóa */
button.mg-the { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; }
.mg-khoa .mg-cau { animation: none; }
.mg-khoa .mg-cau img { filter: grayscale(.75) brightness(.55) !important; }
.mg-khoa .mg-ten, .mg-khoa .mg-mo-ta { opacity: .7; }
.mg-nhan, .mg-chua-mo {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(246,179,207,.4); background: rgba(255,255,255,.08); color: #ffe3ef; font-size: 13px; font-weight: 500;
}
.mg-nhan { margin-top: 8px; }
.mg-chua-mo { margin: -12px 0 28px; font-size: 15px; padding: 8px 16px; border-color: #f284b5; }
.mg-chua-mo[hidden] { display: none; }
.mg-bao {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 5; translate: -50% 20px;
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 16px;
  background: #2a1226; border: 1px solid #f284b5; color: #fff5f8; font-size: 15px; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
}
.mg-bao.hien { opacity: 1; translate: -50% 0; }

/* Chưa có game */
.mg-trong { padding: 12px 0 24px; }
.mg-may { display: block; margin: 0 auto; width: min(230px, 60vw); height: auto; animation: mg-troi 6s ease-in-out infinite; filter: drop-shadow(0 0 28px rgba(242,132,181,.45)); }
.mg-co-game .mg-may { width: min(150px, 40vw); }
.mg-trong-chu { margin: 8px 0 4px; font-family: var(--f-hien, sans-serif); font-weight: 700; font-size: 24px; line-height: 1.2; }
.mg-trong-phu { margin: 0; color: #e9cfdb; }

/* Khung cho trang game: vùng chơi nằm dưới thanh đầu */
.mg-san { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .mg-sao i, .mg-cau, .mg-may, .mg-rieng-the img { animation: none; }
}