/* ================= TAG ITEM ================= */
.tag-item {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    align-items: center;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    color: #000;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    padding: 7px 12px 7px 10px;
    white-space: nowrap;
}

html[dir="rtl"] .tag-item {
    padding: 7px 10px 7px 12px;
}

.tag-item:hover,
.tag-item:focus {
    transform: translate(0, -2px);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
    color: #000;
}

.tag-item:active {
    transform: translate(0, 0);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 1024px) {
    .tag-item.tag-item--category {
        transform: none;
    }
}

.tag-item.tag-item--category-page {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
    color: #29a7b4;
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 5px 12px;
}

.tag-item.tag-item--category-page i {
    display: none;
}

html[dir="rtl"] .tag-item.tag-item--category-page {
    margin: 0 0 6px 6px;
}

.tag-item.tag-item--category-page:hover {
    border-color: #29a7b4;
    box-shadow: none;
}

.tag-item.tag-item--category-page:focus,
.tag-item.tag-item--category-page:active {
    border-color: #29a7b4;
    box-shadow: none;
}

.tag-item:hover,
.tag-item:focus,
.tag-item:active {
    text-decoration: none;
}

.tag-item span,
.tag-item p {
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-item.tag-item--category-page-new {
    margin-right: 10px;
}

html[dir="rtl"] .tag-item.tag-item--category-page-new {
    margin-left: 10px;
    margin-right: 0;
}

.tag-item.tag-item--category-page-new.tag-item--title {
    background-color: transparent;
    border: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-style: normal;
}



.content-block__wrapper {
    align-items: center;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    min-height: 135px;
    overflow: hidden;
    padding: 20px;
    position: relative;
    width: 100%;
}

.content-block__wrapper--girls {
    background: linear-gradient(90deg,#fc6b9c,#fca9c6);
}

.content-block__icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 12px;
    height: 64px;
    margin-right: 20px;
    min-width: 64px;
    width: 64px;
    z-index: 2;
}

.content-block__icon--girls {
    background-image: url(https://img.y8.com/assets/y8/categories/girls-53cf2b1c7dbb176b6c40e276113399a097e68bcfce52a52c6ec74655bc5b8c5a.svg);
}

.content-block__aside-icon {
    z-index: 2;
}

.content-block__title {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
}

.content-block__desc {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.content-block__background {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.content-block__background--characters {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding: 20px;
}

/* ================= KEYS FOR GAME ================= */
.keys-for-game {
    text-align: left;
}

.keys-for-game ul {
    align-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.keys-for-game li {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    position: relative;
    text-align: left;
}

html[dir="rtl"] .keys-for-game li {
    text-align: right;
}

.keys-for-game .key-definition {
    background: none;
    color: rgba(0, 0, 0, 0.6);
    font-size: 10px;
    font-weight: 500;
    height: auto;
    padding: 15px 5px 5px;
    text-align: center;
    width: 85px;
}

.keys-for-game .key-definition:last-child {
    border: 0;
}

.keys-for-game .key-definition.key-definition-32,
.keys-for-game .key-definition.key-definition-pl1::after,
.keys-for-game .key-definition.key-definition-pl2::after {
    color: rgba(0, 0, 0, 0.35);
    display: block;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0;
    padding-top: 10px;
    text-align: left;
    text-transform: uppercase;
}

.keys-for-game .key-definition.key-definition-pl1 .action-text-container,
.keys-for-game .key-definition.key-definition-pl2 .action-text-container {
    display: none;
}

.keys-for-game .key-definition.key-definition-pl1::after {
    content: 'Player 1';
}

.keys-for-game .key-definition.key-definition-pl2::after {
    content: 'Player 2';
}

/* ================= KEYBOARD KEYS ================= */
.keyboard-key {
    display: inline-block;
    margin: 0 1px;
    vertical-align: middle;
}

.keyboard-key.key-pl1,
.keyboard-key.key-pl2,
.keyboard-key.key-32 {
    display: none;
}

.key-mouse,
.key-mouse1,
.key-mouse2,
.key-mouse3 {
    margin: 0;
}

[class*='key-'] {
    background: url(control-icons-improved-v2-e44158dfebe939385007c4d4e10f6bba48b963909101469b2d214892202324ac.png) no-repeat;
    height: 22px;
    position: relative;
    width: 22px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
    [class*='key-'] {
        background: url(control-icons-improved-v2@2x-4da0efe3c35d5c3ad394c7e3db69adeb0ea37d6eb436d6b2dec3b3f2c3b4ea8b.png) no-repeat;
        background-size: 100px 946px;
    }
}

/* === Key mapping 1 → 100 === */
.key-1   { background-position: 0 0; }
.key-2   { background-position: 0 -22px; }
.key-3   { background-position: 0 -44px; }
.key-32  { background-position: 0 -66px; }
.key-4   { background-position: 0 -88px; }
.key-5   { background-position: 0 -110px; }
.key-59  { background-position: 0 -132px; }
.key-6   { background-position: 0 -154px; }
.key-60  { background-position: 0 -176px; }
.key-62  { background-position: 0 -198px; }
.key-7   { background-position: 0 -220px; }
.key-8   { background-position: 0 -242px; }
.key-9   { background-position: 0 -264px; }
.key-10  { background-position: 0 -286px; }
.key-11  { background-position: 0 -308px; }
.key-12  { background-position: 0 -330px; }
.key-13  { background-position: 0 -352px; }
.key-14  { background-position: 0 -374px; }
.key-15  { background-position: 0 -396px; }
.key-16  { background-position: 0 -418px; }
.key-17  { background-position: 0 -440px; }
.key-18  { background-position: 0 -462px; }
.key-19  { background-position: 0 -484px; }
.key-20  { background-position: 0 -506px; }
.key-21  { background-position: 0 -528px; }
.key-22  { background-position: 0 -550px; }
.key-23  { background-position: 0 -572px; }
.key-24  { background-position: 0 -594px; }
.key-25  { background-position: 0 -616px; }
.key-26  { background-position: 0 -638px; }
.key-27  { background-position: 0 -660px; }
.key-28  { background-position: 0 -682px; }
.key-29  { background-position: 0 -704px; }
.key-30  { background-position: 0 -726px; }
.key-31  { background-position: 0 -748px; }
.key-33  { background-position: 0 -770px; }
.key-34  { background-position: 0 -792px; }
.key-35  { background-position: 0 -814px; }
.key-36  { background-position: 0 -836px; }
.key-37  { background-position: 0 -858px; }
.key-38  { background-position: 0 -880px; }
.key-39  { background-position: 0 -902px; }
.key-40  { background-position: 0 -924px; }
.key-41  { background-position: 0 -946px; }
.key-42  { background-position: 0 -968px; }
.key-43  { background-position: 0 -990px; }
.key-44  { background-position: 0 -1012px; }
.key-45  { background-position: 0 -1034px; }
.key-46  { background-position: 0 -1056px; }
.key-47  { background-position: 0 -1078px; }
.key-48  { background-position: 0 -1100px; }
.key-49  { background-position: 0 -1122px; }
.key-50  { background-position: 0 -1144px; }
.key-51  { background-position: 0 -1166px; }
.key-52  { background-position: 0 -1188px; }
.key-53  { background-position: 0 -1210px; }
.key-54  { background-position: 0 -1232px; }
.key-55  { background-position: 0 -1254px; }
.key-56  { background-position: 0 -1276px; }
.key-57  { background-position: 0 -1298px; }
.key-58  { background-position: 0 -1320px; }
.key-61  { background-position: 0 -1342px; }
.key-63  { background-position: 0 -1364px; }
.key-64  { background-position: 0 -1386px; }
.key-65  { background-position: 0 -1408px; }
.key-66  { background-position: 0 -1430px; }
.key-67  { background-position: 0 -1452px; }
.key-68  { background-position: 0 -1474px; }
.key-69  { background-position: 0 -1496px; }
.key-70  { background-position: 0 -1518px; }
.key-71  { background-position: 0 -1540px; }
.key-72  { background-position: 0 -1562px; }
.key-73  { background-position: 0 -1584px; }
.key-74  { background-position: 0 -1606px; }
.key-75  { background-position: 0 -1628px; }
.key-76  { background-position: 0 -1650px; }
.key-77  { background-position: 0 -1672px; }
.key-78  { background-position: 0 -1694px; }
.key-79  { background-position: 0 -1716px; }
.key-80  { background-position: 0 -1738px; }
.key-81  { background-position: 0 -1760px; }
.key-82  { background-position: 0 -1782px; }
.key-83  { background-position: 0 -1804px; }
.key-84  { background-position: 0 -1826px; }
.key-85  { background-position: 0 -1848px; }
.key-86  { background-position: 0 -1870px; }
.key-87  { background-position: 0 -1892px; }
.key-88  { background-position: 0 -1914px; }
.key-89  { background-position: 0 -1936px; }
.key-90  { background-position: 0 -1958px; }
.key-91  { background-position: 0 -1980px; }
.key-92  { background-position: 0 -2002px; }
.key-93  { background-position: 0 -2024px; }
.key-94  { background-position: 0 -2046px; }
.key-95  { background-position: 0 -2068px; }
.key-96  { background-position: 0 -2090px; }
.key-97  { background-position: 0 -2112px; }
.key-98  { background-position: 0 -2134px; }
.key-99  { background-position: 0 -2156px; }
.key-100 { background-position: 0 -2178px; }
.key-1 {
    background-position: 0 0
}

.key-2 {
    background-position: 0 -22px
}

.key-3 {
    background-position: 0 -44px
}

.key-32 {
    background-position: 0 -66px
}

.key-4 {
    background-position: 0 -88px
}

.key-5 {
    background-position: 0 -110px
}

.key-59 {
    background-position: 0 -132px
}

.key-6 {
    background-position: 0 -154px
}

.key-60 {
    background-position: 0 -176px
}

.key-62 {
    background-position: 0 -198px
}

.key-7 {
    background-position: 0 -220px
}

.key-8 {
    background-position: 0 -242px
}

.key-9 {
    background-position: 0 -264px
}

.key-92 {
    background-position: 0 -286px
}

.key-a {
    background-position: 0 -308px
}

.key-ad {
    background-position: 0 -330px
}

.key-al {
    background-position: 0 -352px
}

.key-ar {
    background-position: 0 -374px
}

.key-au {
    background-position: 0 -396px
}

.key-b {
    background-position: 0 -418px
}

.key-c {
    background-position: 0 -440px
}

.key-d {
    background-position: 0 -462px
}

.key-e {
    background-position: 0 -484px
}

.key-f {
    background-position: 0 -506px
}

.key-g {
    background-position: 0 -528px
}

.key-h {
    background-position: 0 -550px
}

.key-i {
    background-position: 0 -572px
}

.key-j {
    background-position: -22px 0
}

.key-k {
    background-position: -22px -22px
}

.key-l {
    background-position: -22px -44px
}

.key-m {
    background-position: -22px -66px
}

.key-mouse {
    background-position: -22px -88px;
    height: 22px;
    width: 22px
}

.key-mouse1 {
    background-position: -22px -132px;
    height: 22px;
    width: 22px
}

.key-mouse2 {
    background-position: -22px -110px;
    height: 22px;
    width: 22px
}

.key-mouse3 {
    background-position: -22px -154px;
    height: 22px;
    width: 22px
}

.key-mouse4 {
    background-position: -22px -176px;
    height: 22px;
    width: 22px
}

.key-n {
    background-position: -22px -198px
}

.key-o {
    background-position: -22px -220px
}

.key-p {
    background-position: -22px -242px
}

.key-q {
    background-position: -22px -264px
}

.key-r {
    background-position: -22px -286px
}

.key-s {
    background-position: -22px -308px
}

.key-t {
    background-position: -22px -330px
}

.key-u {
    background-position: -22px -352px
}

.key-v {
    background-position: -22px -374px
}

.key-w {
    background-position: -22px -396px
}

.key-x {
    background-position: -22px -418px
}

.key-y {
    background-position: -22px -440px
}

.key-z {
    background-position: -22px -462px
}

.key-0 {
    background-position: -22px -484px
}

.key-comma {
    background-position: -22px -506px;
    height: 22px;
    width: 22px
}

.key-dot {
    background-position: -22px -528px;
    height: 22px;
    width: 22px
}

.key-divide {
    background-position: -22px -550px;
    height: 22px;
    width: 22px
}

.key-ent {
    background-position: -22px -572px;
    height: 22px;
    width: 22px
}

.key-esc {
    background-position: 0 -594px;
    height: 22px;
    width: 44px
}

.key-ctrl {
    background-position: 0 -616px;
    height: 22px;
    width: 44px
}

.key-shift {
    background-position: 0 -638px;
    height: 22px;
    width: 44px
}

.key-pl1 {
    background-position: 0 -660px;
    height: 22px;
    width: 60px
}

.key-pl2 {
    background-position: 0 -682px;
    height: 22px;
    width: 60px
}

.key-space {
    background-position: 0 -704px;
    height: 22px;
    width: 66px
}

.key-keyboard {
    background-position: 0 -726px;
    height: 22px;
    width: 48px
}

.key-arrow {
    background-position: 0 -748px;
    height: 22px;
    width: 30px
}

.key-wasd {
    background-position: -30px -748px;
    height: 22px;
    width: 30px
}

.key-f11 {
    background-position: -44px -22px;
    height: 22px;
    width: 31px
}


/* kích thước mặc định ngoài fullscreen */
#TheGameDiv { background:#000; position:relative; }
#TheGameDiv .game-canvas,
#TheGameDiv iframe,
#TheGameDiv canvas {
    display:block;
    width:100%;
    height: clamp(360px, 62vh, 780px); /* tuỳ ý */
}

/* Khi vào fullscreen: phần tử và con phải 100% viewport */
#TheGameDiv:fullscreen,
#TheGameDiv:-webkit-full-screen,
#TheGameDiv:-moz-full-screen,
#TheGameDiv:-ms-fullscreen{
    width:100vw !important;
    height:100vh !important;
    margin:0 !important;
}

#TheGameDiv:fullscreen .game-canvas,
#TheGameDiv:-webkit-full-screen .game-canvas,
#TheGameDiv:-moz-full-screen .game-canvas,
#TheGameDiv:-ms-fullscreen .game-canvas,
#TheGameDiv:fullscreen iframe,
#TheGameDiv:-webkit-full-screen iframe,
#TheGameDiv:-moz-full-screen iframe,
#TheGameDiv:-ms-fullscreen iframe,
#TheGameDiv:fullscreen canvas,
#TheGameDiv:-webkit-full-screen canvas,
#TheGameDiv:-moz-full-screen canvas,
#TheGameDiv:-ms-fullscreen canvas{
    width:100% !important;
    height:100% !important;
}

/* Fallback “CSS fullscreen” cho thiết bị không hỗ trợ Fullscreen API */
body.fs-lock { overflow:hidden; }
#TheGameDiv.css-fs{
    position:fixed; inset:0; z-index:9999;
    width:100vw; height:100vh;
}
#TheGameDiv.css-fs .game-canvas,
#TheGameDiv.css-fs iframe,
#TheGameDiv.css-fs canvas{ width:100%; height:100%; }
