/* ============================================================
   LỚP PHỦ "CHƠI TIẾP"
   ------------------------------------------------------------
   Hiện lên khi người chơi rời khung game — lúc ý định chơi tiếp
   cao nhất trong cả phiên. Xem templates/silk/js/game-continue.js.

   Thẻ game trong lớp phủ là BẢN SAO của thẻ trong khối "Game
   liên quan" sẵn có, nên phần lớn định dạng đã do CSS gốc của
   thẻ đó lo. Ở đây chỉ chỉnh những gì khác đi trong ngữ cảnh
   lớp phủ (kích thước, lưới).

   Bảng màu dùng lại token của site:
     nền chìm #1a1b28   viền #2f3148   nhấn #a48eff
     chữ chính #f9faff  chữ phụ #aaadbe
   ============================================================ */

/*
 * Phủ ĐÚNG khung game, không phủ cả trang. Người dùng vẫn cuộn được, vẫn bấm
 * được mọi thứ khác — lớp phủ là gợi ý, không phải cửa chặn.
 */
.game-continue {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: rgba(12, 13, 20, .88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: game-continue-in .18s ease-out;
}

@keyframes game-continue-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Người dùng bật "giảm chuyển động" thì bỏ hiệu ứng, không bỏ chức năng. */
@media (prefers-reduced-motion: reduce) {
    .game-continue {
        animation: none;
    }
}

.game-continue__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 100%;
    overflow-y: auto;
    padding: 18px;
    border-radius: 14px;
    background: #1a1b28;
    border: 1px solid #2f3148;
    text-align: center;
}

.game-continue__title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 800;
    color: #f9faff;
}

.game-continue__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Dưới 480px, 4 thẻ một hàng thì mỗi thẻ chỉ còn ~70px — ảnh nhỏ tới mức
   không nhận ra game. Xuống 2 hàng 2 cột. */
@media (max-width: 480px) {
    .game-continue__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Thẻ trong lớp phủ do JS tự dựng (xem collectCards), nên định dạng ở đây là
   đầy đủ — không phụ thuộc CSS của thẻ gốc. */
.game-continue__card {
    display: block;
    text-decoration: none;
}

.game-continue__card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    border: 1px solid #2f3148;
    background: #242531;
    transition: border-color .2s ease, transform .2s ease;
}

.game-continue__card:hover img {
    border-color: #6842ff;
    transform: translateY(-2px);
}

.game-continue__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: #cfd2e3;
    text-align: center;
}

.game-continue__card:hover .game-continue__name {
    color: #a48eff;
}

.game-continue__back {
    margin-top: 14px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6842ff, #a48eff);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .2s ease;
}

.game-continue__back:hover {
    filter: brightness(1.12);
}

.game-continue__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #aaadbe;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.game-continue__close:hover {
    color: #fff;
    background: #2f3148;
}

/* ============================================================
   DÒNG TRỢ GIÚP DƯỚI KHUNG GAME
   ------------------------------------------------------------
   Đi kèm partials/game-help-link.php. Đặt ở file này vì đây là
   CSS duy nhất được nạp trên đúng hai template trang game.
   ============================================================ */

.game-help-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 13px;
    color: #8b8fa3;
}

.game-help-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: 0 0 auto;
}

.game-help-link a {
    color: #a48eff;
    font-weight: 700;
}

.game-help-link a:hover {
    text-decoration: underline !important;
}