*{
    touch-action: manipulation !important;
    user-select: none !important;
}
.game_box{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: auto;
    height: auto;
    background-image: url("../img/bgpikachu.jpg?v=1.0.1");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.game{
    position: relative;
    height: 100%;
    border: 5px solid transparent;
}
.game_header, .game_content{
    position: absolute;
    left: 0px;
    right: 0px;
    width: auto;
}
.game_header{
    top: 0px;
    background-color: #f5dddb;
}
.game_content{
    right: 40px;
    bottom: 0px;
    height: auto;
}
.game_layer{
    width: 100%;
    height: 100%;
}
.game_cell_box{
    position: relative;
    height: 100%;
}
.game_cell{
    position: absolute;
    display: inline-block;
    border: 2px solid #ffffff;
    border-left-color: #ffcccc;
    border-bottom-color: #ffcccc;
}
@keyframes game_cell_hint {
    0%   {
        border-left-color: #ff9933;
        border-bottom-color: #ff33ff;
        border-right-color: #ffcc00;
        border-top-color: #00cccc;
    }
    25%  {
        border-left-color: #00cccc;
        border-bottom-color: #ff9933;
        border-right-color: #ff33ff;
        border-top-color: #ffcc00;
    }
    50%  {
        border-left-color: #ffcc00;
        border-bottom-color: #00cccc;
        border-right-color: #ff9933;
        border-top-color: #ff33ff;
    }
    75%  {
        border-left-color: #ff33ff;
        border-bottom-color: #ffcc00;
        border-right-color: #00cccc;
        border-top-color: #ff9933;
    }
    100% {
        border-left-color: #ff9933;
        border-bottom-color: #ff33ff;
        border-right-color: #ffcc00;
        border-top-color: #00cccc;
    }
}
.game_cell.hint:not(.open){
    animation: game_cell_hint 0.4s infinite linear;
    border-radius: 50%;
}
.game_cell.open{
    border-color: #ff9933;
}
.game_cell.matched{
    border-color: #00cc33;
}
.game_cell.not_matched{
    border-color: #ff0000;
}
.game_cell.complete{
    opacity: 0;
    border: none;
    visibility: hidden;
}

/* For run time */
.game_runtime{
    position: absolute;
    right: -40px;
    width: 25px;
    bottom: 0px;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #00cc66;
    background-image: linear-gradient(180deg, #a2f800, #bd2003);
}.game_runtime_running{
    position: absolute;
    top: 0px;
    height: 0%;
    left: 0px;
    width: 100%;
    background-color: #cccccc;
}

/* Căn chỉnh các khối trong header */
.game_header_block {
	flex-wrap: nowrap; /* không cho xuống dòng */
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

/* Style chung cho các nút hành động */
.game_header_block .stt_action {
    color: #26a1dd; /* nâu đậm */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Khi hover, sáng màu hơn */
.game_header_block .stt_action:hover {
    color: #a86432; /* nâu sáng */
}

/* Riêng nút reset có hiệu ứng xoay khi hover */
.btn_reset i {
    transition: transform 0.3s ease;
}

.btn_reset:hover i {
    transform: rotate(180deg);
}

.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px 30px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    font-size: 16px;
    color: #333;
    min-width: 240px;
}

.popup-buttons {
    margin-top: 15px;
}

.popup-buttons button {
    margin: 0 10px;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.btn-yes { background: #4caf50; color: white; }
.btn-no { background: #f44336; color: white; }
.btn-ok { background: #2196f3; color: white; }

/* ==== Popup Top 20 (Dark Glass + Metallic Rank Text) ==== */
.popup-top20 {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.45); /* nền trong hơn */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.popup-top20 .popup-inner {
  background: rgba(15, 20, 40, 0.72);
  border: 2px solid gold;
  border-radius: 14px;
  padding: 25px 35px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
  text-align: center;
  max-width: 420px;
  width: 90%;
  color: #f5f5f5;
  font-family: "Trebuchet MS", sans-serif;
  animation: fadeInPop 0.35s ease;
}

@keyframes fadeInPop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.popup-top20 table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 16px;
  color: #fff;
}

.popup-top20 table th {
  background: rgba(255, 215, 0, 0.15);
  color: gold;
  border-bottom: 1px solid gold;
  padding: 8px;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.popup-top20 table tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.popup-top20 table td {
  padding: 7px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.15);
  text-align: center;
}

.popup-top20 {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4); /* nền trong suốt hơn */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

.popup-top20 .popup-inner {
  background: rgba(15, 20, 40, 0.7);
  border: 2px solid gold;
  border-radius: 14px;
  padding: 25px 35px;  
  text-align: center;
  max-width: 440px;
  width: 90%;
  color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Đậm */
  animation: fadeInPop 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* ✨ ánh sáng mờ vàng tỏa xung quanh bảng (không còn khung quay) */
.popup-top20 .popup-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(
    circle at center,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(255, 215, 0, 0.15) 40%,
    rgba(255, 215, 0, 0.05) 70%,
    transparent 100%
  );
  filter: blur(12px);
  z-index: -1;
  animation: haloPulse 4s ease-in-out infinite;
}

/* ✨ Hiệu ứng nhấp nháy nhẹ kiểu "halo thở" */
@keyframes haloPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

.popup-top20 table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 16px;
  color: #fff;
}

.popup-top20 table th {
  background: rgba(255, 215, 0, 0.15);
  color: #ff002d;
  border-bottom: 1px solid gold;
  padding: 8px;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
  font-weight: 700;
}

.popup-top20 table tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.04);
}

.popup-top20 table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  text-align: center;
  font-weight: 500;
}

/* ==== 3 hạng đầu có viền kim loại và hiệu ứng shine ==== */
.popup-top20 table tr.rank-1 td,
.popup-top20 table tr.rank-2 td,
.popup-top20 table tr.rank-3 td {
  font-weight: 900;
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* Đậm */
  font-size: 20px;
  color: #111; /* chữ đen đậm rõ */
  position: relative;
  overflow: hidden;
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineMove 4s linear infinite;
}

/* 🥇 Rank 1 - Gold */
.popup-top20 table tr.rank-1 td {
  background-image: linear-gradient(45deg, #fbfbf9 0%, #ebd20b 50%, #fbfbf9 100%);  
}

/* 🥈 Rank 2 - Silver */
.popup-top20 table tr.rank-2 td {
  background-image: linear-gradient(132deg, #fbf7f7 0%, #8b8989 50%, #fdfdfd 100%);  
}

/* 🥉 Rank 3 - Bronze */
.popup-top20 table tr.rank-3 td {
  background-image: linear-gradient(45deg, #cd7f32 0%, #fafafa 50%, #cd7f32 100%);  
}

/* ✨ Hiệu ứng ánh sáng quét qua text */
@keyframes shineMove {
  from { background-position: 0% center; }
  to { background-position: 200% center; }
}

/* ✨ Tiêu đề ánh kim */
.shine-text {
  background: linear-gradient(90deg, #ffd700, #ffffff, #ffd700);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  animation: shineMove 3s linear infinite;
  font-weight: 900;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* 🔘 Nút đóng */
#btnCloseTop20 {
  margin-top: 15px;
  padding: 8px 20px;
  background: linear-gradient(90deg, #ffd700, #ffb400);
  color: #222;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.25s ease;
}
#btnCloseTop20:hover {
  transform: scale(1.05);
  background: gold;
}

.btn_reset {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap; /* không bao giờ tách chữ Reset khỏi icon */
  vertical-align: middle;
}

.btn_reset i {
  display: inline-block;
  vertical-align: middle;
}

/* Ngăn layout co lại khi click (nếu có animation hoặc class active) */
.btn_reset:active {
  transform: none !important;
}

/* Nếu vẫn bị do hiệu ứng hover làm to icon */
.btn_reset:hover i {
  transform: none !important;
}

body.final-bg {
  background-color: #000;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed;
  overflow: hidden;
}

.final-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  padding: 40px 60px;
  border-radius: 20px;
  border: 2px solid #ffd700;
  animation: fadeIn 1s ease-in-out;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

.final-message .final-title {
  margin-bottom: 20px;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.final-message .final-gif {
  width: 300px;
  max-width: 80%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}