/* ============================================================
   GBK Games — Game Page Redesign (v2, iteration 3)
   Test scope: gamepage/1on1soccer/

   Sizes below are pulled directly from pizzaedition.win/g/clusterrush
   (fetched HTML/CSS on 2026-07-10), not guessed:
   - Player container:   924x642 desktop / 728x534 / 640x424
   - Left ad:             160x600  (IAB "Wide Skyscraper")
   - Right ad:             300x250  (IAB "Medium Rectangle")
   - In-strip banner ad:   728x90   (IAB "Leaderboard")
   All three are standard IAB sizes — confirmed by cross-checking
   pizzaedition.win's actual ad-slot CSS AND poki.com's page data,
   which reference the same 160x600 / 300x250 / 728x90 set. GBK's
   existing custom "Square Ads GBK ORG" unit is 348x348, a non-standard
   size — that's very likely why it gets little/no fill: most ad
   demand only bids on standard IAB creative sizes. Recommend
   recreating that unit at 300x250 instead of resizing it.
   - Mosaic small tile:    94x94, large tile: 204x204, gap 16px
   Ad slots are FIXED PIXEL sizes on purpose — AdSense/most demand only
   fills reliably at standard IAB sizes; a fluid vw box (what the
   previous iteration did) tends to get little or no fill in practice.
   Ad slots are hidden via media query when a column can't fit them,
   same strategy the reference site uses, rather than shrinking them
   (shrinking a real ad creative isn't possible).
   ============================================================ */

.game-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    max-width: 1524px;
    margin: 0 auto;
    padding: 6.5vw 24px 0;
    box-sizing: border-box;
    flex-wrap: wrap;
}

/* ---------- Ad slot (real AdSense unit, fixed IAB size) ----------
   Structure mirrors the reference site 1:1: a dark frame with an
   inset yellow border sized to the ad's exact pixel dimensions, plus
   a small uppercase "ADVERTISEMENT" label. Swap the data-ad-slot
   placeholders for real slot IDs from the AdSense dashboard. */

.ad-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ad-slot .ad-slot-frame {
    background: #1c1c1c;
    box-shadow: inset 0 0 0 1px #f0d210;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ad-slot .ad-slot-frame .adsbygoogle {
    display: inline-block;
}

.ad-slot .ad-slot-label {
    color: #fff;
    opacity: 0.7;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

.ad-slot-160 .ad-slot-frame {
    width: 160px;
    height: 600px;
}

.ad-slot-300 .ad-slot-frame {
    width: 300px;
    height: 250px;
}

.ad-slot-728 .ad-slot-frame {
    width: 728px;
    height: 90px;
}

/* Left rail: just the 160x600 ad, centered in its column. Hidden
   below 1211px — same breakpoint the reference uses, since a 160px
   ad plus a shrinking player plus the right column stops fitting
   comfortably before that. */

.rail-left-ad {
    flex: 0 0 160px;
    display: none;
}

@media (min-width: 1211px) {
    .rail-left-ad {
        display: flex;
        justify-content: center;
    }
}

/* ---------- Center: player ----------
   924x642 is the reference's desktop size (a ~1.44:1 ratio, not
   16:9). It scales down fluidly by width, capped at that size on
   large screens instead of growing without bound. */

.game-main {
    flex: 1 1 480px;
    max-width: 924px;
    min-width: 320px;
}

.game-main .embed-container {
    width: 100%;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #f0d210;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.embed-frame-wrap {
    position: relative;
}

.game-main .embed-container iframe {
    width: 100%;
    aspect-ratio: 924 / 642;
    height: auto;
    border: none;
    display: block;
}

/* Play-gate: covers the iframe only (not .bottom-div below it) until
   the visitor clicks Play, so the heavy game engine doesn't start
   loading before then. */

.play-gate {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #1a1a1a;
    z-index: 2;
}

.play-gate-thumb {
    width: 35%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.play-gate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    color: #fff;
    border: 2px solid #f0d210;
    border-radius: 10px;
    padding: 10px 22px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.play-gate-btn svg {
    width: 20px;
    height: 20px;
    color: #f0d210;
}

.play-gate-btn:hover {
    background: #f0d210;
    color: #1a1a1a;
    transform: scale(1.04);
}

.play-gate-btn:hover svg {
    color: #1a1a1a;
}

.bottom-div {
    display: flex;
    align-items: center;
    background-color: #1e1e1e;
    padding: 10px 14px;
    gap: 10px;
}

.bottom-div img.game-thumb {
    height: 42px;
    width: 42px;
    object-fit: cover;
    border-radius: 6px;
}

.bottom-div .text-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 2px;
    min-width: 0;
}

.bottom-div .website-name {
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.bottom-div .meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.bottom-div .developer-name {
    font-size: 12px;
    color: #ccc;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(240, 210, 16, 0.14);
    color: #f0d210;
    border: 1px solid rgba(240, 210, 16, 0.5);
    border-radius: 16px;
    padding: 2px 10px;
    font-size: 11px;
    font-family: Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #999;
    font-size: 11px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.stat-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ---------- Like / Dislike / Share ---------- */

.vote-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.vote-btn,
.share-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    border-radius: 20px;
    padding: 6px 10px;
    color: #cfcfcf;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Hover tooltip — small pill above the button, reads its label from
   data-tip so the same rule covers like/dislike/share (and share's
   "Link copied!" swap) with no extra markup. */
.vote-btn::after,
.share-btn::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 4px);
    background: #111;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}

.vote-btn:hover::after,
.share-btn:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vote-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.vote-btn svg,
.share-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.vote-btn:hover,
.share-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.vote-btn.active {
    color: #f0d210;
    background: rgba(240, 210, 16, 0.14);
}

.vote-btn[data-vote="dislike"].active {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.14);
}

.share-btn.copied {
    color: #f0d210;
}

.bottom-div .buttons-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bottom-div .buttons-container img {
    height: 28px;
    width: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#refresh-btn:hover {
    transform: scale(1.1) rotate(360deg);
    transition: transform 0.7s ease;
}

#fullscreen-btn:hover {
    transform: scale(1.1) rotate(15deg);
}

/* ---------- Right rail: 300x250 ad on top, mosaic below (centered,
   since the 314px-wide mosaic is slightly wider than the 300px ad
   above it). Hidden below 991px, matching the reference. */

.game-rail-right {
    flex: 0 0 314px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

@media (min-width: 991px) {
    .game-rail-right {
        display: flex;
    }
}

.more-games-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 94px);
    grid-auto-rows: 94px;
    gap: 16px;
    justify-content: center;
}

.more-games-mosaic .mg-item {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

.more-games-mosaic .mg-item.mg-large {
    grid-column: span 2;
    grid-row: span 2;
}

.more-games-mosaic .mg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.more-games-mosaic .mg-item:hover img {
    transform: scale(1.06);
    filter: brightness(0.6);
}

.more-games-mosaic .mg-name {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    padding: 10px 5px 4px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.more-games-mosaic .mg-item:hover .mg-name {
    opacity: 1;
}

/* ---------- Full-width thumbnail strip (below player row) ---------- */

.more-games-strip-wrap {
    width: 100%;
    max-width: 1524px;
    margin: 20px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
}

.more-games-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.more-games-strip .st-item {
    position: relative;
    display: block;
    width: 94px;
    height: 94px;
    border-radius: 16px;
    overflow: hidden;
}

.more-games-strip .st-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.more-games-strip .st-item:hover img {
    transform: scale(1.07);
    filter: brightness(0.6);
}

.more-games-strip .st-name {
    position: absolute;
    inset: auto 0 0 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.15;
    padding: 8px 4px 3px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.more-games-strip .st-item:hover .st-name {
    opacity: 1;
}

/* 728x90 banner embedded inline in the thumbnail strip — same idea
   as the original site's .ad1/.adTXT1 (rotated "ADVERTISEMENT"
   label), now at the real fixed IAB size instead of a vw box. Hidden
   under 800px, where 728px no longer comfortably fits the row. */

.more-games-strip .st-ad {
    display: none;
}

@media (min-width: 800px) {
    .more-games-strip .st-ad {
        display: flex;
    }
}

.more-games-strip .st-ad .ad-slot-frame {
    margin-right: 20px;
}

.more-games-strip .st-ad .ad-slot-label {
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    white-space: nowrap;
    font-size: 10px;
}

.more-games-strip .st-ad {
    position: relative;
}

/* ---------- Description: plain, unboxed ---------- */

.desc-wrap {
    max-width: 1524px;
    margin: 26px auto 0;
    padding: 0 24px;
    box-sizing: border-box;
}

.desc {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
}

.desc-title {
    font-weight: bold;
    font-size: 1.7vw;
    margin: 1.3vw 0 0.45vw;
    color: #f0d210;
}

.desc-title:first-child {
    margin-top: 0;
}

.desc p {
    text-align: left;
    margin: 0 0 0.55vw;
    font-size: 1vw;
    line-height: 1.55;
    color: #d9d9d9;
    font-family: Arial, sans-serif;
}

.desc a {
    color: #f0d210;
}

.desc ul {
    margin: 0 0 0.55vw;
    padding-left: 1.3vw;
    color: #d9d9d9;
    font-family: Arial, sans-serif;
    font-size: 1vw;
    line-height: 1.6;
}

.desc ul li {
    margin-bottom: 0.3vw;
}

.desc ul li strong {
    color: #f0d210;
}

.meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8vw 2.2vw;
    margin-top: 0.5vw;
    padding-top: 0.8vw;
    border-top: 0.06vw solid #2a2a2a;
}

.meta-grid div {
    font-family: Arial, sans-serif;
    font-size: 0.9vw;
    color: #ccc;
}

.meta-grid strong {
    display: block;
    font-size: 0.72vw;
    text-transform: uppercase;
    letter-spacing: 0.04vw;
    color: #f0d210;
    margin-bottom: 0.15vw;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .game-layout {
        padding-top: 10vw;
    }
    .desc p,
    .desc ul {
        font-size: 2.4vw;
    }
    .desc-title {
        font-size: 3.4vw;
    }
}

@media (max-width: 550px) {
    .more-games-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Scroll to top ---------- */

#scrollToTopContainer {
    display: none;
    position: fixed;
    bottom: 1.042vw;
    right: 1.042vw;
    z-index: 99;
}

#scrollToTop {
    background-color: #303030;
    padding: 0.521vw;
    border-radius: 1.042vw;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 0.104vw solid #303030;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollToTop:hover {
    background-color: #222222;
    border-color: #f0d210;
}

#scrollToTop img {
    width: 2.292vw;
    height: auto;
    transition: transform 0.3s ease;
}

#scrollToTop:hover img {
    transform: translateY(-0.26vw);
}