.article-content video.bb_img,
.entry-content video.bb_img,
article video.bb_img,
.article-content video.yxf-steam-about-video,
.entry-content video.yxf-steam-about-video,
article video.yxf-steam-about-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.yxf-geili-ad {
    position: relative;
    display: block;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 900 / 150;
    margin: 18px auto 24px;
    overflow: hidden;
    border-radius: 18px;
    background: #050505;
    color: #fff;
    text-decoration: none !important;
    box-sizing: border-box;
    container-type: inline-size;
    transition: transform .2s ease, box-shadow .2s ease;
}

.yxf-geili-ad:hover,
.yxf-geili-ad:focus-within {
    color: #fff;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px rgba(255, 199, 44, .88), 0 10px 28px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
    .yxf-geili-ad { transition: none; }
}

.yxf-geili-ad__link {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    border-radius: inherit;
}

.yxf-geili-ad > p:has(> .yxf-geili-ad__link) { display: contents; margin: 0; }

.yxf-geili-ad__background-wrap,
.yxf-geili-ad__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.yxf-geili-ad__background { display: block; width: 100%; height: 100%; object-fit: cover; }
.yxf-geili-ad__shade { z-index: 1; background: rgba(0, 0, 0, .85); }

.yxf-geili-ad__body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 3cqw;
    height: 100%;
    padding: 2cqw 3cqw;
    box-sizing: border-box;
}

.yxf-geili-ad__game-icon-wrap {
    align-self: center;
    justify-self: center;
    width: 60px;
    height: 90px;
}
.yxf-geili-ad__game-icon {
    display: block;
    width: 60px;
    height: 90px;
    border-radius: 10px;
    object-fit: contain;
    background: #171717;
}

.yxf-geili-ad__copy { position: relative; min-width: 0; align-self: center; padding: 0 8cqw 0 0; box-sizing: border-box; }
.yxf-geili-ad .yxf-geili-ad__copy,
.yxf-geili-ad .yxf-geili-ad__title,
.yxf-geili-ad .yxf-geili-ad__subtitle { text-align: left !important; }
.yxf-geili-ad__copy > p { margin: 0; }
.yxf-geili-ad__copy > p:has(> .yxf-geili-ad__title) { display: contents; }
.yxf-geili-ad__copy > p:empty,
.yxf-geili-ad__copy > p:has(> br:only-child) { display: none; }
.yxf-geili-ad__title {
    display: block;
    margin: 0 0 10px;
    color: #fff;
    font-size: 3.8cqw;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: .02em;
    white-space: nowrap;
}

.yxf-geili-ad__title + p:empty { display: none; margin: 0; }

.yxf-geili-ad__subtitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: .6cqw .8cqw;
    color: rgba(255, 255, 255, .92);
    font-size: 2cqw;
    line-height: 1.5;
}

.yxf-geili-ad__code {
    display: inline-flex;
    align-items: center;
    min-height: 1.75em;
    padding: 0 .42em;
    border-radius: 5px;
    background: #ffc72c;
    color: #080808;
    font-weight: 700;
    line-height: 1.75;
}

.yxf-geili-ad__pending {
    display: inline-flex;
    padding: 0 .55em;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 5px;
    color: rgba(255, 255, 255, .58);
    font-size: .86em;
}

.yxf-geili-ad__logo-wrap {
    position: absolute;
    top: calc(20px - .36cqw);
    right: calc(20px - 3.9cqw);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}

.yxf-geili-ad__logo {
    display: block;
    width: 16.25cqw;
    height: auto;
    content: url('./geili-logo.svg?original=180');
}

.yxf-geili-ad__download,
.yxf-geili-ad__copy:not(:has(.yxf-geili-ad__download))::after {
    position: absolute;
    top: auto;
    right: calc(20px - 3cqw);
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 199, 44, .55);
    border-radius: 50%;
    background-color: rgba(8, 8, 8, .62);
    color: #ffc72c;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px) scale(.92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(6px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
}

.yxf-geili-ad:hover .yxf-geili-ad__download,
.yxf-geili-ad:focus-within .yxf-geili-ad__download,
.yxf-geili-ad:hover .yxf-geili-ad__copy:not(:has(.yxf-geili-ad__download))::after,
.yxf-geili-ad:focus-within .yxf-geili-ad__copy:not(:has(.yxf-geili-ad__download))::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    background-color: rgba(255, 199, 44, .16);
    border-color: rgba(255, 199, 44, .9);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .34), 0 0 14px rgba(255, 199, 44, .16);
}

/* TinyMCE can remove empty spans and inline SVG; keep the arrow without changing saved content. */
.yxf-geili-ad__copy:not(:has(.yxf-geili-ad__download))::after {
    content: "";
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='%23ffc72c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
}

.yxf-geili-ad__body > p:has(> .yxf-geili-ad__download) { display: contents; margin: 0; }
.yxf-geili-ad__copy > p:has(> .yxf-geili-ad__download) { display: contents; margin: 0; }

.yxf-geili-ad__download svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 760px) {
    .yxf-geili-ad { min-height: 168px; aspect-ratio: auto; border-radius: 18px; }
    .yxf-geili-ad__body { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 44px 18px; }
    .yxf-geili-ad__game-icon-wrap { width: 54px; height: 81px; }
    .yxf-geili-ad__game-icon { width: 54px; height: 81px; border-radius: 9px; }
    .yxf-geili-ad__copy { padding: 0; }
    .yxf-geili-ad__title { margin-bottom: 10px; font-size: clamp(19px, 5.7vw, 27px); white-space: normal; }
    .yxf-geili-ad__subtitle { gap: 5px 7px; font-size: clamp(12px, 3.5vw, 16px); }
    .yxf-geili-ad__logo-wrap { top: 17.6px; right: -5.9px; width: auto; padding: 0; }
    .yxf-geili-ad__logo { width: 108px; }
    .yxf-geili-ad__download { display: none; }
    .yxf-geili-ad__copy:not(:has(.yxf-geili-ad__download))::after { display: none; }
}