/* ===== Play Page (fill parent, responsive height) ===== */
:root{
    --play-border:rgba(13,38,76,.12);
    --play-ink:#0b3558;
}

/* Khung ngoài */
.game-wrapper{
    background:#fff;
    border:1px solid var(--play-border);
    border-radius:1rem;
    padding:.75rem;
    box-shadow:0 12px 28px rgba(13,38,76,.10);
}

/* STAGE: luôn full phần tử cha */
#TheGameDiv{
    position:relative;
    width:100%;
    height:min(68vh, calc(100vw * 9 / 16));
    overflow:hidden;
    border-radius:.75rem;
    background:linear-gradient(180deg,#101827,#0b1220);
    border:1px solid rgba(255,255,255,.08);
}
@media (max-width: 992px){ #TheGameDiv{ height:min(72vh, calc(100vw * 9 / 16)); } }
@media (max-width: 576px){ #TheGameDiv{ height:75vh; } }
@media (max-width: 380px){ #TheGameDiv{ height:70vh; } }

.game-canvas,
#flash-container,
#game_frame{
    position:absolute; inset:0; width:100%!important; height:100%!important; display:block; border:0; background:transparent;
}

/* ===== META BAR (chống tràn) ===== */
.meta-bar{
    border:1px solid var(--play-border);
    border-radius:.75rem;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9));
    padding:.6rem .75rem;
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:.75rem 1rem;
    box-sizing:border-box;
    overflow:hidden; /* chặn mọi tràn viền */
}
.meta-left{
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap; min-width:0;
}
.meta-left strong{font-weight:900;color:var(--play-ink);display:block;line-height:1.1}
.meta-left small{color:#5b7089;display:block}

.meta-right{
    display:flex; align-items:center; gap:.5rem;
    flex-wrap:wrap; justify-content:flex-end;
    max-width:100%; min-width:0; /* cho phép co lại */
}
.meta-right > *{ flex:0 1 auto; }

/* Nút co giãn, tránh to quá gây tràn */
.meta-right .btn{
    white-space:nowrap;
    padding:.35rem .65rem;
    font-size:.92rem;
}
.fullscreen-btn{width:36px;height:36px;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));transition:transform .15s ease}
.fullscreen-btn:hover{transform:scale(1.06)}

.like-btn,.dislike-btn{border-radius:999px;font-weight:800;padding:.32rem .7rem;line-height:1}
.like-btn{--bs-btn-color:#0b5d2a; --bs-btn-border-color:#8ce99a}
.dislike-btn{--bs-btn-color:#7a1d1d; --bs-btn-border-color:#ffb3b3}

.rate-box{display:flex; align-items:center; gap:.45rem; width:auto; min-width:0}
.rate-box .form-range{width:140px;min-width:110px}
.rate-btn{border-radius:999px;font-weight:800;padding:.28rem .75rem}

/* Tablet: gom về 1 cột sớm để không ép nút ra ngoài */
@media (max-width: 768px){
    .meta-bar{ grid-template-columns:1fr; row-gap:.6rem; }
    .meta-right{ justify-content:flex-start; }
    .rate-box .form-range{ width:120px; }
}

/* Mobile: sắp xếp dọc, nút nhỏ gọn, không tràn */
@media (max-width: 576px){
    .meta-bar{ padding:.55rem .6rem; row-gap:.55rem; }
    .meta-left{ flex-direction:column; align-items:flex-start; gap:.5rem; }
    .meta-right{
        justify-content:space-between;
        gap:.45rem;
    }
    .meta-right .btn{
        padding:.28rem .55rem; font-size:.9rem;
        flex:1 1 calc(50% - .25rem); /* hai nút 50/50 khi thiếu chỗ */
    }
    .fullscreen-btn{ width:32px; height:32px; }
    .rate-box{ width:100%; justify-content:space-between; }
    .rate-box .form-range{ flex:1; max-width:200px; }
}

/* Màn rất nhỏ: ẩn rate nếu cần cực gọn */
@media (max-width:380px){
    .rate-box{ display:none; }
}

/* Boxes dưới player (như cũ) */
.box{border:1px solid var(--play-border);border-radius:1rem;padding:1rem;background:#fff;box-shadow:0 6px 16px rgba(13,38,76,.06)}
.box h2{font-family:'Baloo 2',cursive;font-weight:900;font-size:1.15rem;margin:0 0 .5rem}
.box-primary{border-top:4px solid var(--brand-2)}
.box-info{border-top:4px solid var(--brand)}
.box-warning{border-top:4px solid var(--brand-3)}
.box-success{border-top:4px solid var(--brand-4)}

.centered-list{display:flex;flex-wrap:wrap;gap:.5rem}
.centered-list>*{border-radius:.6rem;padding:.35rem .6rem;font-weight:800}

.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .6rem;border-radius:999px;font-weight:800;font-size:.82rem;background:#eef6ff;color:#0b3558;border:1px solid rgba(13,38,76,.10);text-decoration:none}
.chip:hover{background:#e4f1ff}

#newGamesCarousel .item .game-tile,
#relatedCarousel .item .game-tile{border-radius:1rem}
.overlay-meta{font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.ad-box{display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed var(--play-border);border-radius:.75rem;min-height:90px}