/* ══════════════════════════════════════════════════════════════
   css/home.css — homepage only (index.php sets $page_styles when
   $page === 'home'; body gets .page-home). Markup: index.php
   (.home), helpers: home_sections.php, behaviour: js/home.js.

   Everything is scoped under .home / body.page-home so no other
   page is affected.
   ══════════════════════════════════════════════════════════════ */


/* =========================================================
   HOMEPAGE VARIABLES
========================================================= */

body.page-home {
    --h-bg:        #f7f7f8;
    --h-surface:   #ffffff;
    --h-primary:   #ff4f64;
    --h-primary-d: #e8394f;
    --h-soft:      #ffe6e8;
    --h-text:      #111827;
    --h-muted:     #1e293b;
    --h-line:      #eceef1;
    --h-radius:    16px;
    --h-shadow:    0 1px 2px rgba(17, 24, 39, .04),
                   0 4px 14px rgba(17, 24, 39, .06);
    --h-shadow-up: 0 12px 28px rgba(17, 24, 39, .12);
    --h-display:  var(--ff-display, 'Poppins', system-ui, sans-serif);
}


/* =========================================================
   PAGE BACKGROUND
========================================================= */

/* Beats the admin theme's body background on this page only. */
html body.page-home {
    background: var(--h-bg) !important;
}


/* =========================================================
   PAGE OVERFLOW / SCROLL FIX
========================================================= */

/*
   main.css may use overflow-x:hidden on .layout/.main.
   That can turn the element into its own scrolling container.

   clip prevents horizontal overflow without creating an
   additional vertical scrolling box.
*/

body.page-home,
body.page-home .layout,
body.page-home .main {
    padding-bottom: 2px !important;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}


/* =========================================================
   HOMEPAGE ROOT
========================================================= */

.home {
    color: var(--h-text);
    padding-top: 4px;
    max-width: 1600px;
    margin: 0 auto;
}

.home a {
    text-decoration: none;
}

.home a:focus-visible,
.home button:focus-visible {
    outline: 2px solid var(--secondary, #1d8ef0);
    outline-offset: 2px;
}


/* =========================================================
   SECTION SHELL
========================================================= */

.hsec {
    margin: 0 0 var(--section-gap, 12px) !important;
}

.hsec__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: var(--heading-gap, 8px) !important;
    padding: 0 2px;
}

.hsec__titles {
    min-width: 0;
}

.hsec__title {
    display: block;
    margin: 0;
    font: 800 22px/1.2 var(--h-display);
    letter-spacing: -.3px;
    color: var(--h-text);
}

.hsec__emoji {
    font-size: .95em;
    margin-right: 4px;
}

.hsec__desc {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--h-muted);
}

.hsec__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.hsec__more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--h-surface);
    border: 1px solid #ffd3d9;
    color: var(--h-primary-d) !important;
    font: 700 13px/1 var(--h-display);
    white-space: nowrap;
    transition:
        background .15s ease,
        border-color .15s ease;
}

.hsec__more:hover {
    background: var(--h-soft);
    border-color: #ffc0c9;
}


/* =========================================================
   HORIZONTAL RAIL NAVIGATION
========================================================= */

/* CrazyGames-style: js/home.js moves the ‹ › buttons into .hrail-wrap and
   sets --hnav-top (the middle of the card artwork). They sit on the rail's
   left/right edges, invisible until the section is hovered. Shown/hidden
   with opacity + visibility only — no layout or position change on hover,
   so nothing under the pointer shifts (no flicker). */
.hrail-wrap {
    position: relative;
}

.hrail-nav {
    position: absolute;
    top: var(--hnav-top, 40%);
    z-index: 6;                       /* above cards, badges and hearts */
    width: 44px;
    height: 44px;
    margin-top: -22px;                /* centre on --hnav-top without transform */
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--h-text);
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease, background .15s ease, color .15s ease;
}
.hrail-nav--prev { left: 8px; }
.hrail-nav--next { right: 8px; }

/* Appear while the pointer is anywhere over the section (or on keyboard focus). */
.hsec:hover .hrail-nav,
.hrail-nav:focus-visible {
    opacity: 1;
    visibility: visible;
}

.hrail-nav:hover {
    background: var(--h-primary);
    color: #fff;
}

/* Nothing to scroll that way → keep that arrow hidden, even on hover. */
.hsec:hover .hrail-nav:disabled,
.hrail-nav:disabled {
    opacity: 0;
    visibility: hidden;
    cursor: default;
}

.hrail-nav[hidden] {
    display: none;
}


/* Arrows are for mouse users; touch screens swipe the rail. */

@media (max-width: 767px), (hover: none) {
    .hrail-nav {
        display: none !important;
    }
}


/* =========================================================
   HORIZONTAL GAME RAILS
========================================================= */

/*
   --n = cards visible.

   Fractional values on smaller screens intentionally allow the
   next card to peek in and indicate that the rail is swipeable.
*/

.hrail {
    --n: 2.15;
    --gap: 12px;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns:
        calc(
            (100% - (var(--n) - 1) * var(--gap))
            / var(--n)
        );

    gap: var(--gap);

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;

    /* NO scroll-snap, and no negative margins. With `x mandatory` plus the
       old -2px/-6px offsets, the rail's resting snap point was 2px off its
       natural position; Chrome re-snaps after every layout pass (hover, the
       header's animation…), so the rails twitched back and forth — the
       "shaking" on the homepage. Arrows (js/home.js) still scroll smoothly
       via scrollBy({behavior:'smooth'}); touch swiping is unaffected. */
    padding: 4px 0 12px;

    scrollbar-width: none;
}

.hrail::-webkit-scrollbar {
    display: none;
}

.hrail > * {
    min-width: 0;
}

.hrail--compact {
    --n: 2.5;
    --gap: 10px;
}

@media (min-width: 480px) {
    .hrail {
        --n: 3.2;
    }

    .hrail--compact {
        --n: 3.6;
    }
}

@media (min-width: 768px) {
    .hrail {
        --n: 4.2;
        --gap: 14px;
    }

    .hrail--compact {
        --n: 5.2;
    }
}

@media (min-width: 1024px) {
    .hrail {
        --n: 5;
        --gap: 16px;
    }

    .hrail--compact {
        --n: 6;
    }
}

@media (min-width: 1280px) {
    .hrail {
        --n: 6;
    }

    .hrail--compact {
        --n: 7;
    }
}

@media (min-width: 1440px) {
    .hrail {
        --n: 7;
    }

    .hrail--compact {
        --n: 8;
    }
}


/* =========================================================
   GAME CARD
========================================================= */

/*
   .hcard is the stationary hover target.

   .hcard__inner is the visible card and is what receives
   the visual lift/shadow.

   IMPORTANT:
   The .hcard itself does NOT move on hover.
   This prevents hover-edge flickering and shaking.
*/

.hcard {
    position: relative;
    display: flex;
    flex-direction: column;
}

.hcard__inner {
    position: relative;
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;

    background: var(--h-surface);
    border-radius: var(--h-radius);

    box-shadow: var(--h-shadow);

    overflow: hidden;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.hcard__media {
    position: relative;
}


/*
   render_card() output, restyled for this layout.

   No mosaic sizing.
   No own hover zoom/outline.
   Title shown below instead of overlaid.
*/

/* THE FLICKER FIX: main.css gives `.gcard:hover` z-index:4 (for the old
   mosaic grid). Inside these cards that lifted the image ABOVE the badge,
   overlay and ▶ Play (z-index 2–3) whenever the pointer was on the image,
   so the badge vanished/reappeared as the mouse moved. Pin the image link
   to the bottom layer of the card, hovered or not. */
.hcard .gcard,
.hcard .gcard:hover {
    position: relative;
    z-index: 1 !important;
    display: block;
    aspect-ratio: 1;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

.hcard .gcard::before {
    display: none;
}

.hcard .gcard .gcard-title {
    display: none;
}

/* No image zoom on hover: scaling the image put it on its own GPU layer,
   and the badge drawn over it then jittered by a sub-pixel on every repaint
   (rail cards have fractional widths, e.g. 203.8px). */
.hcard .gcard img {
    transform: none !important;
    transition: none;
}


/* Image overlay */

.hcard__media::after {
    content: '';

    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(17, 24, 39, 0) 45%,
            rgba(17, 24, 39, .38)
        );

    opacity: 0;

    transition: opacity .2s ease;

    pointer-events: none;
}


/* Play button */

.hcard__play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 16px;
    border-radius: 999px;

    background: #fff;
    color: var(--h-primary-d);

    font: 800 13px/1 var(--h-display);

    box-shadow: 0 6px 18px rgba(17, 24, 39, .22);

    opacity: 0;

    transform: translate(-50%, -50%);

    transition: opacity .2s ease;      /* fade only — nothing moves over the image */

    pointer-events: none;
}

.hcard__play i {
    font-size: 11px;
}


/* Desktop hover */

@media (hover: hover) {

    /*
       Cards do NOT move on hover.

       Shadow + dark overlay + Play cue provide the hover feedback.
       (No image zoom — see .hcard .gcard img above.)
    */

    .hcard:hover .hcard__inner {
        box-shadow: var(--h-shadow-up);
    }

    .hcard:hover .hcard__media::after {
        opacity: 1;
    }

    .hcard:hover .hcard__play {
        opacity: 1;
    }
}


/* Keyboard focus */

.hcard:focus-within .hcard__inner {
    box-shadow: var(--h-shadow-up);
}


/* Card badge */

.hcard__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;

    max-width: calc(100% - 52px);

    padding: 4px 9px;
    border-radius: 999px;

    font: 800 10.5px/1.25 var(--h-display);
    letter-spacing: .3px;
    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    box-shadow: 0 3px 8px rgba(17, 24, 39, .16);

    pointer-events: none;
}

.hcard__badge--new {
    background: #16a34a;
    color: #fff;
}

.hcard__badge--hot {
    background: #fff;
    color: #e11d48;
}

.hcard__badge--quick {
    background: #111827;
    color: #fde047;
}

.hcard__badge--feat {
    background: #fff7e0;
    color: #92400e;
}

.hcard__badge--friend {
    background: #1d4ed8;
    color: #fff;
}


/* Favorite button */

.hcard__fav {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .94);
    color: var(--h-text);

    font-size: 14px;
    cursor: pointer;

    box-shadow: 0 2px 8px rgba(17, 24, 39, .15);

    transition:
        color .15s ease,
        transform .15s ease;
}

.hcard__fav::before {
    content: '';
    position: absolute;
    inset: -6px;
}

.hcard__fav:hover {
    color: var(--h-primary);
    transform: scale(1.06);
}

.hcard__fav.is-on {
    color: var(--h-primary);
}

.hcard__fav.is-busy {
    opacity: .6;
    pointer-events: none;
}


/* Card text */

.hcard__body {
    position: relative;
    padding: 10px 12px 12px;
    min-width: 0;
}

.hcard__title {
    display: block;

    font: 700 14px/1.3 var(--h-display);
    color: var(--h-text) !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Whole text area is clickable without a second tab stop. */

.hcard__title::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hcard__meta {
    margin-top: 3px;

    font-size: 12px;
    color: var(--h-muted);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Compact rail */

.hrail--compact .hcard__body {
    padding: 8px 10px 10px;
}

.hrail--compact .hcard__title {
    font-size: 13px;
}


/* =========================================================
   CHOOSE YOUR VIBE
========================================================= */

.hvibes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hvibe {
    --tone: #e11d48;
    --tone-a: #fff1f2;
    --tone-b: #ffe4e6;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 128px;
    padding: 18px 170px 18px 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--tone-a),
            var(--tone-b)
        );

    border: 1px solid rgba(17, 24, 39, .05);

    color: var(--h-text) !important;

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}


/* Vibe colors */

.hvibe--red {
    --tone: #e11d48;
    --tone-a: #fff1f2;
    --tone-b: #ffe1e5;
}

.hvibe--violet {
    --tone: #7c3aed;
    --tone-a: #f5f3ff;
    --tone-b: #e9e3ff;
}

.hvibe--blue {
    --tone: #1d4ed8;
    --tone-a: #eff6ff;
    --tone-b: #dbe8ff;
}

.hvibe--amber {
    --tone: #b45309;
    --tone-a: #fffbeb;
    --tone-b: #fdefc3;
}

.hvibe--pink {
    --tone: #db2777;
    --tone-a: #fdf2f8;
    --tone-b: #fbe1f0;
}

.hvibe--teal {
    --tone: #0f766e;
    --tone-a: #f0fdfa;
    --tone-b: #cff5ec;
}


/* Vibe icon */

.hvibe__icon {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 14px;
    background: #fff;

    font-size: 24px;

    box-shadow: 0 2px 8px rgba(17, 24, 39, .08);

    position: relative;
    z-index: 1;
}


/* Vibe text */

.hvibe__text {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;
}

.hvibe__title {
    font: 800 17px/1.2 var(--h-display);
}

.hvibe__desc {
    margin-top: 3px;

    font-size: 13px;
    line-height: 1.35;

    color: #4b5563;
}

.hvibe__cta {
    margin-top: 8px;

    font: 700 13px/1 var(--h-display);
    color: var(--tone);
}

.hvibe__cta span {
    display: inline-block;
    transition: transform .2s ease;
}


/* =========================================================
   VIBE ARTWORK
========================================================= */

.htile__art {
    position: absolute;
    right: 14px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;

    pointer-events: none;
}

.htile__art-item {
    display: block;

    width: 64px;
    height: 64px;

    margin-left: -22px;

    border-radius: 14px;
    overflow: hidden;

    border: 3px solid #fff;

    box-shadow: 0 6px 14px rgba(17, 24, 39, .16);

    background: #fff;

    transition: transform .25s ease;
}

.htile__art-item img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.htile__art-item:nth-child(1) {
    transform: rotate(-8deg) translateY(4px);
}

.htile__art-item:nth-child(2) {
    transform: rotate(0deg) translateY(-4px);
    z-index: 1;
}

.htile__art-item:nth-child(3) {
    transform: rotate(8deg) translateY(4px);
}


@media (hover: hover) {

    /*
       No lift on tiles.
       Shadow, artwork movement and CTA arrow provide feedback.
    */

    .hvibe:hover {
        box-shadow: 0 12px 26px rgba(17, 24, 39, .10);
    }

    .hvibe:hover .hvibe__cta span {
        transform: translateX(3px);
    }

    .hvibe:hover .htile__art-item:nth-child(1) {
        transform: rotate(-12deg) translate(-4px, 4px);
    }

    .hvibe:hover .htile__art-item:nth-child(3) {
        transform: rotate(12deg) translate(4px, 4px);
    }
}


/* =========================================================
   FEATURED
========================================================= */

.hfeatured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 1fr);

    gap: 16px;

    align-items: stretch;
}

.hfeature {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    background: var(--h-surface);

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--h-shadow);
}

.hfeature__media {
    display: block;
    position: relative;

    background: var(--h-soft);

    min-height: 100%;
}

.hfeature__media picture,
.hfeature__media img {
    display: block;

    width: 100%;
    height: 100%;
}

.hfeature__media img {
    object-fit: cover;

    aspect-ratio: 1;
    max-height: 520px;

    transition: transform .35s ease;
}

.hfeature__body {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 22px 22px 20px;

    min-width: 0;
}

.hfeature__eyebrow {
    align-self: flex-start;

    padding: 5px 10px;

    border-radius: 999px;

    background: #fff7e0;
    color: #92400e;

    font: 800 11px/1 var(--h-display);

    letter-spacing: .5px;
    text-transform: uppercase;
}

.hfeature__title {
    margin: 2px 0 0;

    font: 800 24px/1.15 var(--h-display);

    letter-spacing: -.3px;
}

.hfeature__title a {
    color: var(--h-text) !important;
}

.hfeature__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hfeature__tag {
    padding: 3px 9px;

    border-radius: 999px;

    background: var(--h-soft);
    color: var(--h-primary-d);

    font-size: 12px;
    font-weight: 600;
}

.hfeature__desc {
    margin: 2px 0 0;

    font-size: 14px;
    line-height: 1.5;

    color: #4b5563;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.hfeature__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    font-size: 13px;
    color: var(--h-muted);
}

.hfeature__stats i {
    color: var(--h-primary);
    margin-right: 4px;
}

.hfeature__actions {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: auto;
    padding-top: 6px;
}

/* MUST stay `relative` (not static): .hcard__fav::before (the enlarged touch
   area, inset:-6px) is positioned against this button. With `static` it was
   positioned against the whole page instead — an invisible 1363×3352px login
   link over the entire homepage. That caused the cursor/badge flicker, and a
   click on empty space went to login.php. */
.hfeature__actions .hcard__fav {
    position: relative;

    width: 44px;
    height: 44px;

    font-size: 16px;

    border: 1px solid var(--h-line);
    box-shadow: none;
}

@media (hover: hover) {

    .hfeature:hover .hfeature__media img {
        transform: none;              /* no zoom — same sub-pixel jitter as cards */
    }

}

.hfeature__media {
    overflow: hidden;
}

.hfeatured__side {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    align-content: start;
}


/* Wider, shorter artwork beside lead card */

.hfeatured__side .gcard {
    aspect-ratio: 16 / 10;
}

.hfeatured__side .gcard img {
    aspect-ratio: auto;
    height: 100%;
}


/* =========================================================
   BRING A FRIEND
========================================================= */

.hcta-tile {
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: flex-start;

    gap: 6px;

    padding: 18px;

    border-radius: var(--h-radius);

    border: 2px dashed #ffc2cb;

    background: #fff7f8;

    color: var(--h-text) !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.hcta-tile:hover {
    background: var(--h-soft);
    border-color: var(--h-primary);
}

.hcta-tile__icon {
    font-size: 28px;
}

.hcta-tile__title {
    font: 800 16px/1.2 var(--h-display);
}

.hcta-tile__desc {
    font-size: 13px;
    color: var(--h-muted);
}

.hcta-tile__arrow {
    font: 800 18px/1 var(--h-display);
    color: var(--h-primary);
}


/* =========================================================
   GAME WORLDS
========================================================= */

.hworlds {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}

.hworld {
    --tone: #e11d48;
    --tint: #fff1f2;

    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    gap: 3px;

    min-height: 150px;

    padding: 16px 18px;

    border-radius: 18px;

    background: var(--h-surface);

    border: 1px solid var(--h-line);

    box-shadow: var(--h-shadow);

    color: var(--h-text) !important;

    transition:
        box-shadow .2s ease,
        border-color .2s ease;
}


/* World colors */

.hworld--action {
    --tone: #e11d48;
    --tint: #fff1f2;
}

.hworld--racing {
    --tone: #ea580c;
    --tint: #fff4ec;
}

.hworld--puzzle {
    --tone: #7c3aed;
    --tint: #f5f3ff;
}

.hworld--sports {
    --tone: #16a34a;
    --tint: #f0fdf4;
}

.hworld--adventure {
    --tone: #0f766e;
    --tint: #f0fdfa;
}

.hworld--arcade {
    --tone: #b45309;
    --tint: #fffbeb;
}

.hworld--shooting {
    --tone: #334155;
    --tint: #f1f5f9;
}

.hworld--casual {
    --tone: #db2777;
    --tint: #fdf2f8;
}


/* Soft tone wash */

.hworld::before {
    content: '';

    position: absolute;

    right: -40px;
    top: -40px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    background: var(--tint);

    pointer-events: none;
}


/* World icon */

.hworld__icon {
    position: relative;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: var(--tint);

    font-size: 22px;

    margin-bottom: 8px;
}

.hworld__name {
    position: relative;

    font: 800 15px/1.2 var(--h-display);

    letter-spacing: .06em;
    text-transform: uppercase;
}

.hworld__tag {
    position: relative;

    font-size: 13px;
    color: var(--h-muted);
}

.hworld__cta {
    position: relative;

    margin-top: auto;
    padding-top: 10px;

    font: 700 13px/1 var(--h-display);

    color: var(--tone);
}

.hworld__cta span {
    display: inline-block;
    transition: transform .2s ease;
}


/* World artwork */

.hworld__art {
    top: 16px;
    right: 16px;

    transform: none;
}

.hworld__art .htile__art-item {
    width: 58px;
    height: 58px;

    margin: 0;

    transform: rotate(6deg);
}


@media (hover: hover) {

    .hworld:hover {
        box-shadow: var(--h-shadow-up);
        border-color: transparent;
    }

    .hworld:hover .hworld__cta span {
        transform: translateX(3px);
    }

    .hworld:hover .hworld__art .htile__art-item {
        transform: rotate(0deg) scale(1.04);
    }

}


/* =========================================================
   SURPRISE ME - ENHANCED VISUAL BALANCE & ENLARGED ADVENTURE MAP
========================================================= */

body.page-home #game-worlds {
    margin-bottom: 2px !important;
}

.hsurprise {
    margin: 6px 0 6px !important;
    padding: 0 !important;
    width: 100%;
}

.hsurprise__card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(420px, 1.75fr) minmax(410px, 1.5fr) minmax(290px, 1.05fr);
    align-items: center;
    justify-items: center;
    gap: 16px;
    padding: 20px 22px 22px 14px;
    border-radius: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #fff7fb 25%, #fef2f8 65%, #f5f3ff 100%);
    border: 2px solid rgba(255, 60, 110, 0.22);
    box-shadow:
        0 10px 28px -10px rgba(255, 27, 109, 0.12),
        0 4px 16px -6px rgba(139, 92, 246, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    text-align: center;
    box-sizing: border-box;
}

/* -------------------------------------------------------------
   LEFT: 3D Category Adventure Map (Enlarged 25-35% + Far-Left Positioning)
------------------------------------------------------------- */
.hsurprise__map-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin-left: 0;
    padding-left: 6px;
    user-select: none;
    position: relative;
    box-sizing: border-box;
}

.hsurprise__map-glow {
    position: absolute;
    inset: -6% -10% -4% -12%;
    background: radial-gradient(circle at 45% 50%, rgba(244, 114, 182, 0.32) 0%, rgba(56, 189, 248, 0.22) 42%, transparent 72%);
    filter: blur(36px);
    pointer-events: none;
    z-index: 0;
}

.hsurprise__map-img {
    width: 100%;
    max-width: 680px;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter:
        drop-shadow(0 20px 42px rgba(236, 72, 153, 0.22))
        drop-shadow(0 6px 18px rgba(6, 182, 212, 0.16));
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hsurprise__card:hover .hsurprise__map-img {
    transform: scale(1.025);
}

/* Floating Gaming Decorations Around Far Left & Path */
.hsurprise__map-decorations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.hsurprise__mdec {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.hsurprise__mdec-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Golden Star near top-left */
.hsurprise__mdec--star-tl {
    top: 3%;
    left: 1%;
    width: 32px;
    height: 32px;
    animation: dec-float-1 3.4s ease-in-out infinite;
}

/* Lucky Coin along far-left edge */
.hsurprise__mdec--coin {
    top: 45%;
    left: 0;
    width: 34px;
    height: 34px;
    animation: dec-float-2 4.2s ease-in-out infinite;
}

/* Pink Sparkle near top-center */
.hsurprise__mdec--sparkle {
    top: 5%;
    left: 45%;
    width: 24px;
    height: 24px;
    animation: dec-float-3 3.8s ease-in-out infinite;
}

/* Cyan Controller at top-right of map */
.hsurprise__mdec--controller {
    top: 4%;
    right: 2%;
    width: 36px;
    height: 24px;
    animation: dec-float-4 4.5s ease-in-out infinite;
}

/* Purple Gem near bottom-left */
.hsurprise__mdec--gem {
    bottom: 6%;
    left: 2%;
    width: 30px;
    height: 30px;
    animation: dec-float-1 3.9s ease-in-out infinite 0.6s;
}

/* Glowing Waypoint Checkpoint on the winding trail */
.hsurprise__mdec--checkpoint {
    bottom: 27%;
    left: 15%;
    width: 18px;
    height: 18px;
    position: absolute;
}

.hsurprise__mdec-dot {
    width: 12px;
    height: 12px;
    background: #ff135b;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 12px #ff135b;
    display: block;
}

.hsurprise__mdec-ring {
    position: absolute;
    inset: -6px;
    border: 1.5px solid rgba(255, 19, 91, 0.7);
    border-radius: 50%;
    animation: dec-pulse 2.2s ease-out infinite;
}

@keyframes dec-float-1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(8deg); }
}

@keyframes dec-float-2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-6deg); }
}

@keyframes dec-float-3 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-7px) scale(1.12); }
}

@keyframes dec-float-4 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-9px) rotate(10deg); }
}

@keyframes dec-pulse {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* -------------------------------------------------------------
   MIDDLE: Center Unique Content & Glowing Action Button
------------------------------------------------------------- */
.hsurprise__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 530px;
    z-index: 2;
}

.hsurprise__badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 42, 109, 0.28);
    box-shadow: 0 4px 14px rgba(255, 42, 109, 0.12);
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e11d48;
    margin-bottom: 10px;
    position: relative;
}

.hsurprise__badge-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff135b;
    box-shadow: 0 0 8px #ff135b;
    animation: badge-dot-pulse 1.8s infinite;
}

@keyframes badge-dot-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

.hsurprise__title {
    position: relative;
    display: inline-block;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: clamp(42px, 4.2vw, 58px);
    font-weight: 950;
    line-height: 1.05;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.hsurprise__title-pink {
    background: linear-gradient(135deg, #ff0844 0%, #ff4e50 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 4px 14px rgba(255, 8, 68, 0.28));
}

.hsurprise__title-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-left: 8px;
    filter: drop-shadow(0 4px 14px rgba(139, 92, 246, 0.28));
}

.hsurprise__sparkle {
    position: absolute;
    color: #f59e0b;
    font-size: 18px;
    line-height: 1;
    animation: sparkle-twinkle 2s ease-in-out infinite alternate;
}

.hsurprise__sparkle--tl {
    top: -6px;
    left: -22px;
}

.hsurprise__sparkle--tr {
    top: -2px;
    right: -24px;
    animation-delay: 1s;
}

.hsurprise__sub {
    font-family: var(--h-body, 'Inter', sans-serif);
    font-size: clamp(15.5px, 1.3vw, 18px);
    line-height: 1.5;
    color: #0f172a !important;
    font-weight: 650;
    margin: 0 0 18px;
    max-width: 480px;
}

.hsurprise__highlight {
    color: #ff135b;
    font-weight: 850;
}

.hsurprise__btn-wrap {
    position: relative;
    margin-bottom: 18px;
}

.hsurprise__pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 50px;
    min-width: 250px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff1b6d 0%, #ff416c 48%, #ff4b2b 100%);
    color: #ffffff !important;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 850;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow:
        0 14px 34px rgba(255, 27, 109, 0.44),
        0 4px 14px rgba(255, 75, 43, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, filter 0.2s ease;
}

.hsurprise__pick-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 18px 40px rgba(255, 27, 109, 0.54),
        0 6px 16px rgba(255, 75, 43, 0.36);
    filter: brightness(1.03);
}

.hsurprise__pick-btn:active {
    transform: translateY(1px) scale(0.98);
}

.hsurprise__btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: btn-shine-sweep 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes btn-shine-sweep {
    0%, 65% { left: -100%; }
    100% { left: 200%; }
}

.hsurprise__dice-icon {
    font-size: 26px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.35s ease;
}

.hsurprise__pick-btn:hover .hsurprise__dice-icon {
    transform: rotate(24deg) scale(1.15);
}

.hsurprise__btn-arrow {
    font-size: 16px;
    transition: transform 0.25s ease;
}

.hsurprise__pick-btn:hover .hsurprise__btn-arrow {
    transform: translateX(4px);
}

.hsurprise__perks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 9px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(244, 114, 182, 0.26);
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.1);
}

.hsurprise__perk {
    display: flex;
    align-items: center;
    gap: 9px;
    transition: transform 0.2s ease;
}

.hsurprise__perk:hover {
    transform: translateY(-1px);
}

.hsurprise__perk-icon {
    font-size: 21px;
    line-height: 1;
}

.hsurprise__perk-info strong {
    display: block;
    font-size: 13.5px;
    font-weight: 850;
    color: #0f172a !important;
    line-height: 1.15;
}

.hsurprise__perk-info small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #1e293b !important;
}

.hsurprise__perk-divider {
    width: 1px;
    height: 26px;
    background: rgba(244, 114, 182, 0.28);
}

/* -------------------------------------------------------------
   DISCOVER PREVIEW: Database-Driven Compact Game Cards
------------------------------------------------------------- */
.hsurprise__discover {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.hsurprise__discover-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 12.5px;
    font-weight: 850;
    letter-spacing: 0.05em;
    color: #0f172a !important;
    text-transform: uppercase;
}

.hsurprise__discover-star {
    color: #f59e0b;
    font-size: 12px;
}

.hsurprise__preview-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.hsurprise__pcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 14px;
    background: #ffffff;
    border: 1.5px solid rgba(255, 60, 110, 0.2);
    box-shadow: 0 4px 12px rgba(255, 27, 109, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hsurprise__pcard:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: #ff2a6d;
    box-shadow: 0 8px 20px rgba(255, 42, 109, 0.2);
}

.hsurprise__pcard-thumb-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.hsurprise__pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hsurprise__pcard:hover .hsurprise__pcard-img {
    transform: scale(1.08);
}

.hsurprise__pcard-play {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hsurprise__pcard:hover .hsurprise__pcard-play {
    opacity: 1;
}

.hsurprise__pcard-title {
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 850;
    color: #0f172a !important;
    text-align: center;
    max-width: 74px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.hsurprise__dcard {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1.5px solid rgba(15, 23, 42, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 11.5px;
    font-weight: 850;
    color: #0f172a !important;
    transition: all 0.2s ease;
}

/* -------------------------------------------------------------
   RIGHT COLUMN: Dual Mode (Robot Mascot OR Right-Side Result Card)
------------------------------------------------------------- */
.hsurprise__robot-col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 380px;
}

/* Strict hidden support so elements never collide */
.hsurprise__result[hidden],
.hsurprise__robot-stage[hidden] {
    display: none !important;
}

/* --- STATE 1: ROBOT MASCOT --- */
.hsurprise__robot-stage {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hsurprise__robot-stage:hover {
    transform: scale(1.04) translateY(-4px);
}

.hsurprise__robot-stage:active,
.hsurprise__robot-stage.is-picking {
    transform: scale(1.06) translateY(-8px);
}

.hsurprise__robot-aura {
    position: absolute;
    inset: -15% -25% -10% -25%;
    background: radial-gradient(circle at 50% 45%, rgba(6, 182, 212, 0.35) 0%, rgba(244, 114, 182, 0.22) 45%, transparent 72%);
    border-radius: 50%;
    filter: blur(24px);
    pointer-events: none;
    z-index: 0;
    animation: aura-pulse 3.6s ease-in-out infinite;
}

@keyframes aura-pulse {
    0%, 100% { transform: scale(0.95); opacity: 0.75; }
    50% { transform: scale(1.08); opacity: 1; }
}

.hsurprise__speech-bubble {
    align-self: center;
    margin-bottom: 6px;
    z-index: 5;
    background: #ffffff;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.18), 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1.5px solid #ffe4ed;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    color: #0f172a !important;
    text-align: center;
    position: relative;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.hsurprise__speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-right: 1.5px solid #ffe4ed;
    border-bottom: 1.5px solid #ffe4ed;
    transform: rotate(45deg);
}

.hsurprise__speech-bubble.is-pop {
    animation: speech-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes speech-pop {
    0% { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.hsurprise__robot-float {
    position: relative;
    width: 100%;
    display: inline-block;
    animation: robot-float 3.5s ease-in-out infinite;
    z-index: 2;
}

.hsurprise__robot-body {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 14px 28px rgba(236, 72, 153, 0.18));
    pointer-events: none;
    user-select: none;
}

.hsurprise__robot-arm {
    position: absolute;
    left: 2.56%;
    top: 21.62%;
    width: 32.05%;
    height: auto;
    display: block;
    transform-origin: 84% 93%;
    animation: robot-wave 2.2s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

.hsurprise__robot-thruster {
    position: absolute;
    bottom: 2%;
    left: 49%;
    transform: translateX(-50%);
    width: 80px;
    height: 32px;
    background: radial-gradient(ellipse at 50% 30%, rgba(255, 75, 140, 0.9) 0%, rgba(244, 114, 182, 0.4) 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    z-index: 1;
    animation: thruster-pulse 1.8s ease-in-out infinite;
}

@keyframes thruster-pulse {
    0%, 100% { transform: translateX(-50%) scale(0.9); opacity: 0.7; }
    50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}

/* --- STATE 2: RIGHT-SIDE GAME RESULT CARD (Robot disappears, Card takes spot!) --- */
.hsurprise__result {
    width: 100%;
    max-width: 320px;
    padding: 16px 16px 18px;
    border-radius: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #fff7fb 100%);
    border: 2px solid rgba(255, 60, 110, 0.28);
    box-shadow:
        0 16px 38px -8px rgba(255, 27, 109, 0.22),
        0 6px 16px rgba(139, 92, 246, 0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    animation: surprise-result-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hsurprise__result.is-refreshing {
    opacity: 0.7;
    filter: blur(1px);
    pointer-events: none;
}

@keyframes surprise-result-pop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.hsurprise__result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.hsurprise__result-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 800;
    color: #e11d48;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.hsurprise__result-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff135b;
    box-shadow: 0 0 6px #ff135b;
    animation: badge-dot-pulse 1.5s infinite;
}

.hsurprise__result-close {
    background: #f3f4f6;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #111827;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hsurprise__result-close:hover {
    background: #fee2e2;
    color: #ef4444;
    transform: rotate(90deg);
}

.hsurprise__result-game {
    display: flex;
    gap: 12px;
    text-decoration: none;
    background: #ffffff;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(255, 60, 110, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease;
    margin-bottom: 14px;
}

.hsurprise__result-game:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 60, 110, 0.4);
}

.hsurprise__result-thumb-box {
    position: relative;
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hsurprise__result-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hsurprise__result-game:hover .hsurprise__result-img {
    transform: scale(1.08);
}

.hsurprise__result-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hsurprise__result-game:hover .hsurprise__result-overlay {
    opacity: 1;
}

.hsurprise__result-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hsurprise__result-cat {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    color: #e11d48;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.hsurprise__result-name {
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 14px;
    font-weight: 800;
    color: #0f172a !important;
    margin: 0 0 3px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hsurprise__result-desc {
    font-size: 11px;
    color: #0f172a !important;
    font-weight: 650;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hsurprise__result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hsurprise__act-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff1b6d 0%, #ff416c 100%);
    color: #ffffff !important;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 27, 109, 0.35);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hsurprise__act-play:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 27, 109, 0.45);
}

.hsurprise__act-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a !important;
    font-family: var(--h-display, 'Poppins', sans-serif);
    font-size: 12px;
    font-weight: 850;
    border: 1.5px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hsurprise__act-again:hover {
    border-color: #ff2a6d;
    color: #e11d48 !important;
    background: #fff5f8;
    transform: translateY(-2px);
}

/* -------------------------------------------------------------
   KEYFRAME ANIMATIONS
------------------------------------------------------------- */
@keyframes robot-wave {
    0% { transform: rotate(0deg); }
    16% { transform: rotate(-14deg); }
    32% { transform: rotate(12deg); }
    48% { transform: rotate(-12deg); }
    64% { transform: rotate(10deg); }
    80% { transform: rotate(-4deg); }
    92% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

@keyframes robot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes sparkle-twinkle {
    0% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
    100% { transform: scale(1.25) rotate(15deg); opacity: 1; }
}

/* -------------------------------------------------------------
   RESPONSIVE LAYOUT BREAKPOINTS
------------------------------------------------------------- */
@media (max-width: 1180px) {
    .hsurprise__card {
        grid-template-columns: minmax(320px, 1.4fr) minmax(360px, 1.4fr) minmax(250px, 1fr);
        padding: 18px 16px;
        gap: 16px;
    }
    .hsurprise__map-img {
        max-width: 500px;
        max-height: 440px;
    }
    .hsurprise__robot-stage,
    .hsurprise__result {
        max-width: 270px;
    }
}

@media (max-width: 900px) {
    .hsurprise {
        margin: 6px 0 12px !important;
    }

    .hsurprise__card {
        grid-template-columns: 1fr;
        padding: 18px 14px 18px;
        gap: 16px;
        border-radius: 24px;
    }

    /* Mobile ordering: Center Content FIRST, then Mascot/Result, then Adventure Land */
    .hsurprise__center {
        order: 1;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 0 4px;
    }

    .hsurprise__robot-col {
        order: 2;
        min-height: auto;
        padding: 4px 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hsurprise__map-col {
        order: 3;
        margin: 6px auto 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding-left: 0;
    }

    .hsurprise__map-decorations {
        display: none !important;
    }

    .hsurprise__map-img {
        max-width: 340px;
        max-height: 300px;
    }

    .hsurprise__robot-stage {
        max-width: 220px;
        margin: 0 auto;
    }

    .hsurprise__result {
        max-width: 330px;
        margin: 0 auto;
        padding: 14px 14px 16px;
    }

    .hsurprise__title {
        font-size: clamp(30px, 6.8vw, 40px);
    }

    .hsurprise__perks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 6px;
        background: transparent;
        border: none;
        box-shadow: none;
        width: 100%;
        box-sizing: border-box;
    }

    .hsurprise__perk {
        flex: 1 1 85px;
        max-width: 110px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(244, 114, 182, 0.25);
        box-shadow: 0 2px 6px rgba(244, 114, 182, 0.08);
        border-radius: 12px;
        padding: 6px 4px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
    }

    .hsurprise__perk-divider {
        display: none;
    }

    .hsurprise__perk-icon {
        font-size: 16px;
    }

    .hsurprise__perk-info strong {
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
        word-break: break-word;
    }

    .hsurprise__preview-cards {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .hsurprise {
        margin: 4px 0 10px !important;
    }

    .hsurprise__card {
        padding: 14px 8px 16px;
        border-radius: 18px;
    }

    .hsurprise__pick-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 18px;
        font-size: 15px;
        min-width: 0;
    }

    .hsurprise__perks {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 2px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .hsurprise__perk {
        flex: 1 1 32% !important;
        min-width: 0 !important;
        max-width: 96px !important;
        padding: 4px 2px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(244, 114, 182, 0.25) !important;
        box-shadow: 0 2px 6px rgba(244, 114, 182, 0.06) !important;
        box-sizing: border-box !important;
    }

    .hsurprise__perk-icon {
        font-size: 13px !important;
    }

    .hsurprise__perk-info strong {
        font-size: 8.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .hsurprise__result {
        max-width: 100%;
        padding: 12px 12px 14px;
    }

    .hsurprise__result-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hsurprise__robot-arm,
    .hsurprise__robot-float,
    .hsurprise__robot-aura,
    .hsurprise__robot-thruster,
    .hsurprise__btn-shine,
    .hsurprise__sparkle,
    .hsurprise__mdec,
    .hsurprise__mdec-ring {
        animation: none !important;
    }
}

/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

    .hfeatured {
        grid-template-columns: minmax(0, 1fr);
    }

    .hfeatured__side {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — 1024px
========================================================= */

@media (max-width: 1024px) {

    .hvibes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hvibe {
        padding-right: 132px;
    }

    .hvibe .htile__art-item {
        width: 52px;
        height: 52px;

        margin-left: -18px;
    }

}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {

    .hworlds {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .hsurprise__card.has-result {
        grid-template-columns:
            minmax(0, 1fr);

        text-align: center;
    }

    .hsurprise__card.has-result .hsurprise__intro {
        align-items: center;
    }

}


/* =========================================================
   RESPONSIVE — 760px
========================================================= */

@media (max-width: 760px) {

    .hsec {
        margin-bottom: var(--section-gap, 10px) !important;
    }

    .hsec__title {
        font-size: 19px;
    }

    .hsec__desc {
        font-size: 13px;
    }

    .hfeature {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .hfeature__media img {
        aspect-ratio: 16 / 10;
    }

    .hfeature__title {
        font-size: 21px;
    }

    .hfeatured__side {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .hworlds {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .hsurprise__card {
        padding: 18px 14px;

        border-radius: 22px;
    }

    .hsurprise__title {
        font-size: 24px;
    }

}


/* =========================================================
   RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {

    .hvibes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    /*
       Tile becomes vertical:
       icon top, artwork top-right, text below.
    */

    .hvibe {
        flex-direction: column;

        align-items: flex-start;

        min-height: 168px;

        padding: 14px;

        gap: 10px;
    }

    .hvibe .htile__art-item {
        width: 40px;
        height: 40px;

        margin-left: -16px;
    }

    .hvibe__icon {
        width: 42px;
        height: 42px;

        font-size: 21px;
    }

    .hvibe__text {
        max-width: none;

        margin-top: auto;
    }

    .hvibe__title {
        font-size: 15px;
    }

    .hvibe__desc {
        font-size: 12.5px;
    }

    .htile__art {
        top: 14px;
        right: 12px;

        transform: none;
    }

    .htile__art-item {
        width: 40px;
        height: 40px;

        margin-left: -16px;

        border-width: 2px;
        border-radius: 10px;
    }

    .htile__art-item:nth-child(3) {
        display: none;
    }

    .hworld {
        min-height: 136px;

        padding: 14px;
    }

    .hworld__art .htile__art-item {
        width: 44px;
        height: 44px;
    }

    .hworld__name {
        font-size: 14px;
    }

}


/* =========================================================
   RESPONSIVE — 480px
========================================================= */

@media (max-width: 480px) {

    .hsec__head {
        align-items: flex-start;
    }

    .hsec__more {
        min-height: 36px;

        padding: 0 12px;

        font-size: 12px;
    }

    .hsec__more-long {
        display: none;
    }

    .hsec__title {
        font-size: 18px;
    }

    .hcard__body {
        padding: 8px 10px 10px;
    }

    .hcard__title {
        font-size: 13px;
    }

    .hcard__meta {
        font-size: 11.5px;
    }

    .hcard__fav {
        width: 34px;
        height: 34px;
    }

    .hfeature__body {
        padding: 16px;
    }

    .hfeature__desc {
        -webkit-line-clamp: 3;

        font-size: 13.5px;
    }

    .hsurprise__game img {
        width: 76px;
        height: 76px;
    }

    .hsurprise__actions .hbtn {
        flex: 1 1 auto;
    }

}


/* =========================================================
   RESPONSIVE — 360px
========================================================= */

@media (max-width: 360px) {

    .hvibe__desc {
        display: none;
    }

    .hworld__tag {
        font-size: 12px;
    }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes h-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes h-roll {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home *,
    .home *::before,
    .home *::after {
        transition: none !important;
        animation: none !important;
    }

    .hrail {
        scroll-behavior: auto;
    }

}
/* =========================================================
   GAME RAIL — SHOW 7 CARDS PER ROW on desktop (8 looked too small)
========================================================= */

/* Gaps between cards: tighter, CrazyGames-style (were 12 / 14 / 16px). */
.hrail {
    --n: 2.15;
    --gap: 6px;
}

@media (min-width: 480px) {
    .hrail {
        --n: 3.2;
    }
}

@media (min-width: 768px) {
    .hrail {
        --n: 4.2;
        --gap: 8px;
    }
}

@media (min-width: 1024px) {
    .hrail {
        --n: 5;
        --gap: 8px;
    }
}

@media (min-width: 1280px) {
    .hrail {
        --n: 7;
    }
}

@media (min-width: 1440px) {
    .hrail {
        --n: 7;
    }
}
/* =========================================================
   HEADER → FIRST HOME SECTION — 10px GAP
========================================================= */

body.page-home .home {
    padding-top: 10px !important;
}
/* ═════════════════════════════════════════════════════════════════
   NO-FLICKER LOCKDOWN — keep this block LAST in the file.

   Hovering a card image used to trigger main.css's old grid-tile
   rules (.gcard:hover → z-index:4, lift, zoom, outline, title slide).
   Inside these cards that lifted the image above the badge/overlay,
   so things over the image blinked as the mouse moved. Here every
   hover effect that touches the image or anything drawn on it is
   switched off. The only hover feedback left is the card's shadow.
   ═════════════════════════════════════════════════════════════════ */
.hcard .gcard,
.hcard .gcard:hover,
.hcard .gcard:focus,
.hcard:hover .gcard {
    position: relative;
    z-index: 1 !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}
.hcard .gcard::before,
.hcard .gcard:hover::before,
.hcard .gcard .gcard-title { display: none !important; }
.hcard .gcard img,
.hcard .gcard:hover img,
.hcard:hover .gcard img {
    transform: none !important;
    transition: none !important;
}
/* Nothing appears or animates over the artwork on hover. */
.hcard__media::after,
.hcard__play { display: none !important; }
.hcard__badge,
.hcard__fav { transition: none !important; }
.hcard__fav:hover { transform: none !important; }
.hcard__inner,
.hcard:hover .hcard__inner { transform: none !important; transition: box-shadow .15s ease !important; }

/* Featured image: no zoom. */
.hfeature__media img,
.hfeature:hover .hfeature__media img { transform: none !important; transition: none !important; }

/* Vibe / world tiles: artwork and arrows stay exactly where they are. */
.htile__art-item,
.hvibe__cta span,
.hworld__cta span { transition: none !important; }
.hvibe:hover .htile__art-item:nth-child(1) { transform: rotate(-8deg) translateY(4px) !important; }
.hvibe:hover .htile__art-item:nth-child(2) { transform: rotate(0deg) translateY(-4px) !important; }
.hvibe:hover .htile__art-item:nth-child(3) { transform: rotate(8deg) translateY(4px) !important; }
.hworld:hover .hworld__art .htile__art-item { transform: rotate(6deg) !important; }
.hvibe:hover .hvibe__cta span,
.hworld:hover .hworld__cta span { transform: none !important; }
.hbtn:active { transform: none !important; }

/* Safety: every heart must be a positioned element, otherwise its
   ::before touch area (inset:-6px) spans the whole page. */
.hcard__fav { position: absolute; }
.hfeature__actions .hcard__fav { position: relative !important; }
/* =========================================================
   ALL GAME IMAGES — NO ROUNDED CORNERS
========================================================= */

body.page-home img,
body.page-home .hcard img,
body.page-home .hcard__media,
body.page-home .hcard__inner,
body.page-home .hfeature__media,
body.page-home .hfeature__media img,
body.page-home .hfeatured__side img,
body.page-home .hworld__art-item,
body.page-home .htile__art-item,
body.page-home .hsurprise__game img {
    border-radius: 0 !important;
}

/* Game card containers */
body.page-home .hcard__inner {
    border-radius: 0 !important;
}

/* Game images */
body.page-home .hcard .gcard,
body.page-home .hcard .gcard img {
    border-radius: 0 !important;
}

/* Featured images */
body.page-home .hfeature__media,
body.page-home .hfeature__media img {
    border-radius: 0 !important;
}

/* Vibe/world artwork images */
body.page-home .htile__art-item,
body.page-home .htile__art-item img,
body.page-home .hworld__art .htile__art-item,
body.page-home .hworld__art img {
    border-radius: 0 !important;
}

/* Surprise Me image */
body.page-home .hsurprise__game img {
    border-radius: 0 !important;
}
/* =========================================================
   INDEX PAGE — REMOVE GAME INFO BELOW IMAGES
========================================================= */

body.page-home .hcard__body {
    display: none !important;
}

body.page-home .hcard__title,
body.page-home .hcard__meta {
    display: none !important;
}
 /* =========================================================
    HOME GAME CARDS — SMALL ROUNDED CORNERS
 ========================================================= */

body.page-home .hcard__inner,
body.page-home .hcard .gcard,
body.page-home .hcard .gcard img,
body.page-home .hcard__media,
body.page-home .hcard__media img {
    border-radius: 10px !important;
}
/* =========================================================
   CRAZYGAMES-STYLE HOVER — card pops out, title appears
   Keep this block after the NO-FLICKER block (it overrides it).

   Flicker-safe by design:
   - :hover is tracked on .hcard, which never moves; only the visual
     .hcard__inner scales, and growing can't slide out from under the
     pointer (the old shake came from things that moved AWAY).
   - The image link (.gcard) stays on its own low layer (z-index 1),
     so badge / heart stay on top — no layer swapping.
   - The title is render_card()'s own .gcard-title inside the image.
========================================================= */

/* Room inside each rail so a popped card isn't clipped by the rail's
   scroll box (15% of a 215px card ≈ 16px per side, ≈10px top/bottom).
   The negative margin keeps the cards lined up exactly where they were. */
body.page-home .hrail {
    padding: 16px 18px 20px;
    margin: -12px -18px -16px;
}

@media (hover: hover) and (pointer: fine) {
    body.page-home .hcard:hover {
        z-index: 5;                       /* float above neighbouring cards */
    }
    body.page-home .hcard .hcard__inner {
        transition: transform .2s ease, box-shadow .2s ease !important;
    }
    body.page-home .hcard:hover .hcard__inner {
        transform: scale(1.18) !important;       /* stronger pop (was 1.08) */
        box-shadow: 0 18px 38px rgba(17, 24, 39, .32) !important;
    }

    /* Title over the bottom of the artwork, shown on hover only */
    body.page-home .hcard .gcard .gcard-title {
        display: block !important;
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 2;
        padding: 26px 10px 9px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85) 70%);
        color: #fff;
        font: 700 13px/1.25 var(--h-display);
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0;
        transform: none !important;
        transition: opacity .18s ease;
        pointer-events: none;
    }
    body.page-home .hcard:hover .gcard .gcard-title {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard:hover .hcard__inner { transform: none !important; }
}

/* =========================================================
   LANDSCAPE CARD ARTWORK
   home_card() now uses each game's landscape thumb_1 (512×310).
   Card image box matches that ratio, so nothing is cropped.
========================================================= */
body.page-home .hcard .gcard {
    aspect-ratio: 512 / 310 !important;
}
body.page-home .hcard .gcard img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center;
}
/* =========================================================
   REMOVE LIKE / FAVORITE BUTTON FROM HOMEPAGE CARDS
========================================================= */

body.page-home .hcard__fav {
    display: none !important;
}
/* =========================================================
   GAME WORLDS — GRADIENT CARDS (matches the design reference)
   Markup: index.php → .gw-grid / .gw-card (Game Worlds section).
   Everything is scoped to body.page-home #game-worlds.
   4 × 2 grid of wide cards: soft per-category gradient, icon badge,
   uppercase name, subtitle, "Explore →", the category's top-game
   artwork fading in from the right, and a frosted "Play Now" pill.
========================================================= */
body.page-home #game-worlds .gw-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 14px;
}

body.page-home #game-worlds .gw-card {
    --gw-a: #7fd3e6;                 /* gradient start (left) */
    --gw-b: #6b8fd6;                 /* middle */
    --gw-c: #6f5bc9;                 /* end (right) */
    --gw-glow: rgba(90, 110, 210, .45);

    position: relative;
    overflow: hidden;
    min-height: 104px;
    border-radius: 10px;
    background: linear-gradient(115deg, var(--gw-a) 0%, var(--gw-b) 55%, var(--gw-c) 100%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .35) inset,
        0 8px 18px -8px var(--gw-glow),
        0 3px 0 -1px var(--gw-glow);        /* coloured bottom edge like the reference */
    transition: box-shadow .2s ease, filter .2s ease;
}

/* Per-category palettes (from the reference) */
body.page-home #game-worlds .gw-card--action    { --gw-a:#86d8e8; --gw-b:#7a9be0; --gw-c:#6d5cc9; --gw-glow:rgba(92,108,214,.5); }
body.page-home #game-worlds .gw-card--racing    { --gw-a:#f7b0a2; --gw-b:#ef8f82; --gw-c:#4f6fb6; --gw-glow:rgba(226,112,112,.5); }
body.page-home #game-worlds .gw-card--puzzle    { --gw-a:#76d7c6; --gw-b:#8fb6ea; --gw-c:#b38ce2; --gw-glow:rgba(96,176,190,.5); }
body.page-home #game-worlds .gw-card--sports    { --gw-a:#b39cf8; --gw-b:#8a68dc; --gw-c:#6445bf; --gw-glow:rgba(118,86,214,.5); }
body.page-home #game-worlds .gw-card--adventure { --gw-a:#80d9d1; --gw-b:#9dbbea; --gw-c:#caa9e8; --gw-glow:rgba(92,170,200,.5); }
body.page-home #game-worlds .gw-card--arcade    { --gw-a:#f8bb82; --gw-b:#f39289; --gw-c:#ea769d; --gw-glow:rgba(236,120,110,.5); }
body.page-home #game-worlds .gw-card--shooting  { --gw-a:#f7aa92; --gw-b:#ea706e; --gw-c:#6d7c92; --gw-glow:rgba(222,102,98,.5); }
body.page-home #game-worlds .gw-card--casual    { --gw-a:#a2e690; --gw-b:#bfe27e; --gw-c:#f0d983; --gw-glow:rgba(130,196,96,.5); }

/* Category link — covers the whole card (::after), text on the left. */
body.page-home #game-worlds .gw-card__link {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    max-width: 52%;
    padding: 12px 0 12px 12px;
    color: #1f2330 !important;
    text-decoration: none;
}
body.page-home #game-worlds .gw-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
}
body.page-home #game-worlds .gw-card__link > span {
    position: relative;
    z-index: 3;
}

body.page-home #game-worlds .gw-card__icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .38);
    border: 1px solid rgba(255, 255, 255, .5);
    font-size: 15px;
    line-height: 1;
}
body.page-home #game-worlds .gw-card__name {
    font: 800 13px/1.2 var(--h-display, 'Poppins', sans-serif);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #1f2330;
}
body.page-home #game-worlds .gw-card__tag {
    font-size: 11.5px;
    line-height: 1.3;
    color: rgba(31, 35, 48, .8);
    white-space: nowrap;
}
body.page-home #game-worlds .gw-card__cta {
    margin-top: 8px;
    font: 700 12px/1 var(--h-display, 'Poppins', sans-serif);
    color: #1f2330;
}

/* ── Larger type + a larger Explore CTA (same bump as Choose Your Vibe).
      .gw-card__tag is nowrap, so the text column is widened a little and
      the tag is ellipsised instead of being allowed to spill under the
      artwork. Overrides the sizes above. */
body.page-home #game-worlds .gw-card__link { max-width: 57%; }
body.page-home #game-worlds .gw-card__name { font-size: 15px; }
body.page-home #game-worlds .gw-card__tag {
    font-size: 13px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.page-home #game-worlds .gw-card__cta { margin-top: 10px; font-size: 13.5px; }
body.page-home #game-worlds .gw-card__cta .hx-compass { font-size: 1.15em; }
/* Section-head "Explore All Categories" — scoped to Game Worlds so the
   shared .hsec__more pill stays its original size in every other section. */
body.page-home #game-worlds .hsec__more { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
/* The 4-up cards are at their narrowest between these two breakpoints. */
@media (min-width: 1024px) and (max-width: 1199px) {
    body.page-home #game-worlds .gw-card__name { font-size: 14px; }
    body.page-home #game-worlds .gw-card__tag  { font-size: 12.5px; }
    body.page-home #game-worlds .gw-card__cta  { font-size: 13px; }
}
@media (max-width: 480px) {
    body.page-home #game-worlds .hsec__more { min-height: 38px; padding: 0 14px; font-size: 13px; }
}

/* Artwork on the right, fading into the gradient. */
body.page-home #game-worlds .gw-card__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    z-index: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
            mask-image: linear-gradient(to right, transparent 0%, #000 38%);
}
body.page-home #game-worlds .gw-card__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
}

/* Frosted "Play Now" pill — sits above the card link. */
body.page-home #game-worlds .gw-card__play {
    position: absolute;
    right: 10px;
    bottom: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: #fff !important;
    font: 700 11.5px/1 var(--h-display, 'Poppins', sans-serif);
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    white-space: nowrap;
    transition: background .15s ease;
}
body.page-home #game-worlds .gw-card__play:hover {
    background: rgba(255, 255, 255, .42);
}

/* Hover: shadow/brightness only (nothing moves → no flicker). */
@media (hover: hover) {
    body.page-home #game-worlds .gw-card:hover {
        filter: saturate(1.08) brightness(1.03);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, .35) inset,
            0 12px 24px -8px var(--gw-glow),
            0 3px 0 -1px var(--gw-glow);
    }
}
body.page-home #game-worlds .gw-card__link:focus-visible::after,
body.page-home #game-worlds .gw-card__play:focus-visible {
    outline: 2px solid #1d8ef0;
    outline-offset: -2px;
    border-radius: 10px;
}

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 1023px) {
    body.page-home #game-worlds .gw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 479px) {
    body.page-home #game-worlds .gw-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    body.page-home #game-worlds .gw-card {
        min-height: 100px;
    }
}

/* =========================================================
   ANIMATED CARD BADGES (top-left ✨ 🔥 ⚡ ⭐ 👥)
   Small looping motion per badge type. transform-only (GPU, no
   layout/repaint of the page) and the badge ignores the pointer,
   so it can't cause hover loops or flicker. Neighbouring cards are
   offset in time so a row doesn't pulse in sync.
========================================================= */
body.page-home .hcard__badge {
    will-change: transform;
    transform-origin: 50% 60%;
}

/* ✨ New — twinkle */
body.page-home .hcard__badge--new    { animation: hb-twinkle 2.4s ease-in-out infinite; }
/* 🔥 Trending — flame flicker (grows upward from the bottom) */
body.page-home .hcard__badge--hot    { animation: hb-flicker 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
/* ⚡ Quick Play — a short zap every couple of seconds */
body.page-home .hcard__badge--quick  { animation: hb-zap 2.2s ease-in-out infinite; }
/* ⭐ Featured — slow wobble */
body.page-home .hcard__badge--feat   { animation: hb-wobble 3s ease-in-out infinite; }
/* 👥 Multiplayer — small bounce */
body.page-home .hcard__badge--friend { animation: hb-bounce 1.8s ease-in-out infinite; }

/* Stagger so cards in the same row aren't in lock-step */
body.page-home .hcard:nth-child(3n+2) .hcard__badge { animation-delay: -.6s; }
body.page-home .hcard:nth-child(3n+3) .hcard__badge { animation-delay: -1.2s; }

@keyframes hb-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30%      { transform: scale(1.14) rotate(-8deg); }
    60%      { transform: scale(.96) rotate(6deg); }
}
@keyframes hb-flicker {
    0%, 100% { transform: scale(1, 1); }
    25%      { transform: scale(.96, 1.1) translateY(-1px); }
    50%      { transform: scale(1.04, .95); }
    75%      { transform: scale(.98, 1.08) translateY(-1px); }
}
@keyframes hb-zap {
    0%, 70%, 100% { transform: rotate(0deg) scale(1); }
    74%           { transform: rotate(-12deg) scale(1.12); }
    80%           { transform: rotate(10deg) scale(1.12); }
    86%           { transform: rotate(-6deg) scale(1.05); }
    92%           { transform: rotate(0deg) scale(1); }
}
@keyframes hb-wobble {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-12deg) scale(1.06); }
    50%      { transform: rotate(0deg) scale(1); }
    75%      { transform: rotate(12deg) scale(1.06); }
}
@keyframes hb-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-3px); }
    60%      { transform: translateY(-1px); }
}

/* People who ask their system for less motion get still badges. */
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge { animation: none !important; }
}

/* =========================================================
   CARD BADGES — PLAIN ICONS IN THE IMAGE'S TOP-LEFT CORNER
   No pill: background, border, shadow and padding removed; the
   emoji sits right in the corner of the artwork. A soft text-shadow
   keeps it readable on bright images. The animations above still
   apply (they only use transform).
========================================================= */
body.page-home .hcard__badge,
body.page-home .hcard__badge--new,
body.page-home .hcard__badge--hot,
body.page-home .hcard__badge--quick,
body.page-home .hcard__badge--feat,
body.page-home .hcard__badge--friend {
    top: 5px !important;
    left: 6px !important;
    max-width: none !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 1px rgba(0, 0, 0, .35);
}

/* =========================================================
   MEET THE HEROES (index.php #meet-the-heroes) — character cards
   Like the Jio Games character row: no background picture. Each card
   is a coloured rounded panel; the character cut-out stands on it and
   pops out above the panel's top edge. No text — the game's name is
   the link's accessible label. Same .hrail as the other rows (cards per row, arrows,
   swipe). Until a cut-out is uploaded (admin-heroes.php), the game's
   square artwork stands in, tilted like a sticker (.hchar--art).
========================================================= */
/* Bigger cards than the other rows — fewer per screen, like the Jio row. */
body.page-home #meet-the-heroes .hrail { --n: 2.3; }
@media (min-width: 480px)  { body.page-home #meet-the-heroes .hrail { --n: 3.3; } }
@media (min-width: 768px)  { body.page-home #meet-the-heroes .hrail { --n: 4.3; } }
/* Desktop: exactly six whole cards across (more heroes scroll with the arrows). */
@media (min-width: 1024px) { body.page-home #meet-the-heroes .hrail { --n: 6; } }
body.page-home #meet-the-heroes .hrail {
    align-items: end;
    padding: 22px 18px 18px;   /* room for heads that rise above the panel */
    margin: -8px -18px -14px;
}
body.page-home .hchar {
    --hc1: #6b2bd9; --hc2: #a35bff;
    position: relative; isolation: isolate;
    display: block;
    aspect-ratio: 1 / 1.08;
    text-decoration: none; color: #fff;
    border-radius: 22px;
    outline-offset: 3px;
}
body.page-home .hchar--t1 { --hc1: #0a6fd1; --hc2: #23a8ff; }
body.page-home .hchar--t2 { --hc1: #c27c00; --hc2: #f4bd2a; }
body.page-home .hchar--t3 { --hc1: #11934a; --hc2: #34d074; }
body.page-home .hchar--t4 { --hc1: #cf1f39; --hc2: #ff5a6a; }
body.page-home .hchar--t5 { --hc1: #0b8f97; --hc2: #2fd3d8; }

/* The coloured panel — the lower ~68% of the card. */
body.page-home .hchar__panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: 32%; z-index: -1;
    border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .28), transparent 60%),
        linear-gradient(160deg, var(--hc2) 0%, var(--hc1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(0, 0, 0, .45);
    transition: filter .2s ease, box-shadow .2s ease;
}

/* The character: stands on the panel, head well above its top edge. */
/* --hx: horizontal nudge (in % of the image's own width) set by the
   index.php "same-size characters" script so the visible character,
   not the PNG's transparent canvas, is centred. */
body.page-home .hchar__fig {
    position: absolute; left: 50%; bottom: 6%;
    height: 96%; width: auto; max-width: 112%;
    object-fit: contain; object-position: center bottom;
    transform: translateX(calc(-50% + var(--hx, 0%)));
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.2);
}
/* No cut-out yet: the square game art, tilted like a sticker. */
body.page-home .hchar--art .hchar__fig {
    bottom: 12%;
    width: 72%; height: auto; max-width: none; aspect-ratio: 1;
    object-fit: cover;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, .9);
    transform: translateX(-50%) rotate(-5deg);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35));
}

/* Hover / focus: the character hops up a little, the panel brightens. */
@media (hover: hover) and (pointer: fine) {
    body.page-home .hchar:hover .hchar__fig { transform: translateX(calc(-50% + var(--hx, 0%))) translateY(-6px) scale(1.04); }
    body.page-home .hchar--art:hover .hchar__fig { transform: translateX(-50%) translateY(-6px) rotate(-2deg) scale(1.04); }
    body.page-home .hchar:hover .hchar__panel { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 28px -12px rgba(0, 0, 0, .5); }
}
body.page-home .hchar:focus-visible { outline: 3px solid var(--h-primary, #e62327); }
@media (prefers-reduced-motion: reduce) {
    body.page-home .hchar__fig, body.page-home .hchar__panel { transition: none; }
}

/* =========================================================
   3D WORLDS (index.php section #three-d-worlds) — 🧊 corner icon
   Same .hrail / home_card() as the other rows; only the badge
   animation is new: a slow 3D turn (transform-only).
========================================================= */
body.page-home .hcard__badge--webgl {
    animation: hb-turn3d 3.2s ease-in-out infinite;
}
@keyframes hb-turn3d {
    0%, 100% { transform: perspective(120px) rotateY(0deg) rotateX(0deg); }
    30%      { transform: perspective(120px) rotateY(35deg) rotateX(10deg); }
    60%      { transform: perspective(120px) rotateY(-30deg) rotateX(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge--webgl { animation: none !important; }
}

/* =========================================================
   KIDS CORNER (index.php section #kids-corner) — 🧸 corner icon
   Same .hrail / home_card() as the other rows; only the badge
   animation is new: a playful sway (transform-only).
========================================================= */
body.page-home .hcard__badge--kids {
    animation: hb-sway 2.4s ease-in-out infinite;
    transform-origin: 50% 90%;
}
@keyframes hb-sway {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(-10deg) translateY(-2px); }
    50%      { transform: rotate(0deg) translateY(0); }
    75%      { transform: rotate(10deg) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge--kids { animation: none !important; }
}

/* =========================================================
   CAR / FUN / GUN GAMES (index.php #car-games, #fun-games, #gun-games)
   Same .hrail / home_card() as the other rows; only the corner-icon
   animations are new (transform-only, like the others).
========================================================= */
/* 🏎️ drives forward and back */
body.page-home .hcard__badge--car { animation: hb-drive 2.2s ease-in-out infinite; }
@keyframes hb-drive {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    30%      { transform: translateX(4px) rotate(-3deg); }
    60%      { transform: translateX(-2px) rotate(2deg); }
}
/* 😂 giggles */
body.page-home .hcard__badge--fun { animation: hb-giggle 1.6s ease-in-out infinite; }
@keyframes hb-giggle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20%      { transform: translateY(-2px) rotate(-8deg); }
    40%      { transform: translateY(0) rotate(6deg); }
    60%      { transform: translateY(-2px) rotate(-6deg); }
    80%      { transform: translateY(0) rotate(4deg); }
}
/* 🔫 short recoil every couple of seconds */
body.page-home .hcard__badge--gun { animation: hb-recoil 2.4s ease-in-out infinite; transform-origin: 70% 60%; }
@keyframes hb-recoil {
    0%, 78%, 100% { transform: translateX(0) rotate(0deg); }
    82%           { transform: translateX(-3px) rotate(-14deg); }
    90%           { transform: translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge--car,
    body.page-home .hcard__badge--fun,
    body.page-home .hcard__badge--gun { animation: none !important; }
}

/* =========================================================
   CASUAL GAMES (#casual-games) + CARD GAMES (#card-games)
   Same .hrail / home_card() as the other rows; only the corner-icon
   animations are new (transform-only).
========================================================= */
/* ☕ gentle steaming float */
body.page-home .hcard__badge--casual { animation: hb-steam 2.8s ease-in-out infinite; }
@keyframes hb-steam {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-5deg); }
}
/* 🃏 card flip */
body.page-home .hcard__badge--card { animation: hb-flip 3s ease-in-out infinite; }
@keyframes hb-flip {
    0%, 60%, 100% { transform: perspective(120px) rotateY(0deg); }
    75%           { transform: perspective(120px) rotateY(180deg); }
    90%           { transform: perspective(120px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge--casual,
    body.page-home .hcard__badge--card { animation: none !important; }
}


/* =========================================================
   LEADERBOARDS (#leaderboards, below Choose Your Vibe)
   Wider cards than the 7-per-row rails: artwork, top 3 players,
   the viewer's own best, Play button. Scoped to #leaderboards.
========================================================= */
body.page-home #leaderboards .hlb-rail {
    grid-auto-columns: calc((100% - 3 * 14px) / 4);
    gap: 14px;
}
@media (max-width: 1100px) { body.page-home #leaderboards .hlb-rail { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; } }
@media (max-width: 760px)  { body.page-home #leaderboards .hlb-rail { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (max-width: 480px)  { body.page-home #leaderboards .hlb-rail { grid-auto-columns: 78%; } }

body.page-home #leaderboards .hlb-guest {
    margin: -4px 0 12px;
    font-size: 14px;
    color: var(--h-muted);
}
body.page-home #leaderboards .hlb-guest a { color: var(--h-primary); font-weight: 700; }

body.page-home #leaderboards .hlb {
    display: flex; flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(165deg, #2b2f5c 0%, #1a1c38 100%);
    color: #fff;
    box-shadow: var(--h-shadow);
    transition: box-shadow .2s ease;
}
body.page-home #leaderboards .hlb:hover { box-shadow: var(--h-shadow-up); }

body.page-home #leaderboards .hlb__media {
    position: relative; display: block;
    aspect-ratio: 512 / 310;
    overflow: hidden;
    background: #14162c;
}
body.page-home #leaderboards .hlb__media img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
body.page-home #leaderboards .hlb__badge {
    position: absolute; top: 8px; left: 8px;
    font-size: 22px; line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
    animation: hlb-shine 3.2s ease-in-out infinite;
    transform-origin: 50% 90%;
}
@keyframes hlb-shine {
    0%, 70%, 100% { transform: rotate(0) scale(1); }
    78%           { transform: rotate(-12deg) scale(1.15); }
    86%           { transform: rotate(10deg) scale(1.15); }
    94%           { transform: rotate(0) scale(1); }
}

body.page-home #leaderboards .hlb__body {
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 12px 12px;
}
body.page-home #leaderboards .hlb__title {
    margin: 0;
    font: 800 15px/1.25 var(--h-display);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #leaderboards .hlb__title a { color: inherit; text-decoration: none; }
body.page-home #leaderboards .hlb__top { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
body.page-home #leaderboards .hlb__row {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; padding: 4px 6px; border-radius: 6px;
    font-size: 13px;
    background: rgba(255, 255, 255, .05);
}
body.page-home #leaderboards .hlb__medal { flex: 0 0 auto; }
body.page-home #leaderboards .hlb__name  { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-home #leaderboards .hlb__score { flex: 0 0 auto; font-weight: 800; color: #ffd54a; font-variant-numeric: tabular-nums; }
body.page-home #leaderboards .hlb__empty,
body.page-home #leaderboards .hlb__locked,
body.page-home #leaderboards .hlb__me { margin: 0; font-size: 13px; opacity: .85; }
body.page-home #leaderboards .hlb__me b { color: #ffd54a; }
body.page-home #leaderboards .hlb__play {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 0 14px;
    border-radius: 999px;
    font-weight: 800; font-size: 14px;
    color: #1a1300; text-decoration: none;
    background: linear-gradient(135deg, #ffd54a, #ffab1a);
}
body.page-home #leaderboards .hlb__play:hover { filter: brightness(1.07); }
body.page-home #leaderboards .hlb__play:focus-visible,
body.page-home #leaderboards .hlb__title a:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    body.page-home #leaderboards .hlb__badge { animation: none; }
}

/* =========================================================
   HOME HERO (#home-hero — home_hero.php, js/home-hero.js)
   Spotlight carousel · Daily Challenge · Continue Playing /
   This Week's Top · search with quick chips.
========================================================= */
body.page-home #home-hero {
    margin: 0 0 var(--section-gap, 12px) !important;
    --hh-h: 340px;
    --hh-gap: 14px;
}
body.page-home #home-hero .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.page-home #home-hero .hh__grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: var(--hh-gap);
}

/* ── Spotlight ─────────────────────────────────────────── */
body.page-home #home-hero .hh-spot {
    position: relative;
    height: var(--hh-h);
    border-radius: 18px;
    overflow: hidden;
    background: #14162c;
    box-shadow: var(--h-shadow-up);
    isolation: isolate;
}
body.page-home #home-hero .hh-slide {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 20px;
    padding: 28px 30px 44px;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s linear .6s;
}
body.page-home #home-hero .hh-slide.is-on {
    opacity: 1; visibility: visible;
    transition: opacity .6s ease, visibility 0s;
    z-index: 1;
}
body.page-home #home-hero .hh-slide__bg { position: absolute; inset: 0; z-index: -1; }
body.page-home #home-hero .hh-slide__bg img {
    width: 100%; height: 100%; object-fit: cover;
    filter: blur(22px) saturate(1.3) brightness(.5);
    transform: scale(1.25);
}
body.page-home #home-hero .hh-slide::before {                 /* readable text side */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(10, 12, 30, .82) 0%, rgba(10, 12, 30, .35) 60%, rgba(10, 12, 30, .1) 100%);
}
body.page-home #home-hero .hh-slide__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.page-home #home-hero .hh-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0; border-radius: 0;
    font: 800 12px/1.2 var(--h-display); letter-spacing: .02em;
    background: none;
    border: 0;
}
body.page-home #home-hero .hh-slide__title {
    margin: 2px 0 0;
    font: 900 clamp(26px, 3.2vw, 40px)/1.08 var(--h-display);
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.page-home #home-hero .hh-slide__title a { color: inherit; text-decoration: none; }
body.page-home #home-hero .hh-slide__meta { margin: 0; font-size: 14px; font-weight: 600; opacity: .9; }
body.page-home #home-hero .hh-slide__desc {
    margin: 0; font-size: 14px; line-height: 1.45; opacity: .8;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.page-home #home-hero .hh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px; font-weight: 800; text-decoration: none;
}
body.page-home #home-hero .hh-btn--play {
    margin-top: 6px;
    min-height: 46px; padding: 0 26px; font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--h-primary), var(--h-primary-d));
    box-shadow: 0 8px 22px rgba(255, 79, 100, .45);
    transition: filter .15s ease;
}
body.page-home #home-hero .hh-btn--play:hover { filter: brightness(1.08); }
body.page-home #home-hero .hh-slide__art { display: block; justify-self: center; width: 100%; max-width: 440px; }
body.page-home #home-hero .hh-slide__pic img {
    display: block; width: 100%; height: auto; aspect-ratio: 512 / 310; object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 255, 255, .12);
    transform: rotate(-2deg);
}
body.page-home #home-hero .hh-slide.is-on .hh-slide__pic img { animation: hh-float 6s ease-in-out both; }
@keyframes hh-float {
    from { transform: rotate(-2deg) translateY(8px) scale(.97); }
    to   { transform: rotate(-1deg) translateY(0) scale(1.02); }
}

body.page-home #home-hero .hh-spot__nav {
    position: absolute; top: 50%; z-index: 3;
    width: 40px; height: 40px; margin-top: -30px;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    color: #fff; background: rgba(0, 0, 0, .4);
    cursor: pointer;
    opacity: 0; transition: opacity .2s ease, background .2s ease;
}
body.page-home #home-hero .hh-spot__nav--prev { left: 10px; }
body.page-home #home-hero .hh-spot__nav--next { right: 10px; }
body.page-home #home-hero .hh-spot:hover .hh-spot__nav,
body.page-home #home-hero .hh-spot__nav:focus-visible { opacity: 1; }
body.page-home #home-hero .hh-spot__nav:hover { background: rgba(0, 0, 0, .65); }

body.page-home #home-hero .hh-dots {
    position: absolute; left: 30px; bottom: 16px; z-index: 3;
    display: flex; gap: 6px;
}
body.page-home #home-hero .hh-dot {
    width: 26px; height: 16px; padding: 6px 0; border: 0; background: none; cursor: pointer;
}
body.page-home #home-hero .hh-dot span {
    display: block; height: 4px; border-radius: 4px;
    background: rgba(255, 255, 255, .35);
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
body.page-home #home-hero .hh-dot.is-on { width: 44px; }
body.page-home #home-hero .hh-dot.is-on span { animation: hh-progress 6s linear forwards; }
body.page-home #home-hero .hh-spot.is-paused .hh-dot.is-on span { animation-play-state: paused; }
@keyframes hh-progress { to { background-size: 100% 100%; } }

/* ── Side tiles ────────────────────────────────────────── */
body.page-home #home-hero .hh-side {
    display: grid; grid-template-rows: 1fr 1fr; gap: var(--hh-gap);
    height: var(--hh-h); min-width: 0;
}
body.page-home #home-hero .hh-tile {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0; min-height: 0;
    padding: 14px 16px;
    border-radius: 16px; overflow: hidden;
    color: #fff; text-decoration: none;
    background: linear-gradient(160deg, #2b2f5c 0%, #1a1c38 100%);
    box-shadow: var(--h-shadow);
    transition: box-shadow .2s ease;
}
body.page-home #home-hero a.hh-tile:hover { box-shadow: var(--h-shadow-up); }
body.page-home #home-hero .hh-tile__bg { position: absolute; inset: 0; z-index: -1; }
body.page-home #home-hero .hh-tile__bg img { width: 100%; height: 100%; object-fit: cover; }
body.page-home #home-hero .hh-tile--daily::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(20, 12, 50, .92) 0%, rgba(20, 12, 50, .7) 55%, rgba(20, 12, 50, .25) 100%);
}
body.page-home #home-hero .hh-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.page-home #home-hero .hh-tile__label { font: 800 13px/1.2 var(--h-display); text-transform: uppercase; letter-spacing: .04em; opacity: .95; }
body.page-home #home-hero .hh-count {
    flex: 0 0 auto;
    padding: 3px 9px; border-radius: 999px;
    font: 800 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, .16);
}

/* ── Daily Challenge clock ─────────────────────────────────────────
   A segmented flip-clock instead of a plain pill (index.php): one
   glass slab per unit, blinking separators, a flip animation on each
   digit change, amber in the final hour, pulsing in the final minute,
   and a hairline along the tile's bottom edge that drains all day.
   Driven by js/home-hero.js — note .hh-clock must stay position:static
   so __bar keeps resolving against .hh-tile. */
body.page-home #home-hero .hh-clock {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 3px;
}
body.page-home #home-hero .hh-clock__v {
    position: relative;
    display: inline-grid; place-items: center;
    min-width: 20px; padding: 3px 4px;
    border-radius: 6px;
    font: 800 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: #fff3d0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
body.page-home #home-hero .hh-clock__v::after {        /* flip-clock hinge seam */
    content: ""; position: absolute; left: 2px; right: 2px; top: 50%;
    border-top: 1px solid rgba(0, 0, 0, .22);
}
body.page-home #home-hero .hh-clock__sep {
    font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: .5;
    animation: hh-colon 2s steps(1, end) infinite;
}
@keyframes hh-colon { 0%, 49% { opacity: .62; } 50%, 100% { opacity: .14; } }
body.page-home #home-hero .hh-clock__v.is-tick { animation: hh-flip .34s ease; }
@keyframes hh-flip {
    0%   { transform: translateY(-4px) scale(.96); filter: brightness(1.6); }
    60%  { transform: translateY(1px) scale(1.03); }
    100% { transform: none; filter: none; }
}
/* Final hour — the slabs turn amber so the deadline reads at a glance. */
body.page-home #home-hero .hh-clock.is-low .hh-clock__v {
    color: #1d1200;
    background: linear-gradient(180deg, #ffd977, #f5a623);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(255, 176, 32, .6);
    text-shadow: none;
}
body.page-home #home-hero .hh-clock.is-low .hh-clock__sep { opacity: .45; color: #ffd977; }
/* Final minute — the whole clock breathes. */
body.page-home #home-hero .hh-clock.is-final .hh-clock__v { animation: hh-final 1s ease-in-out infinite; }
@keyframes hh-final { 50% { transform: scale(1.07); box-shadow: 0 0 18px rgba(255, 120, 60, .85); } }
/* Drain bar — sits on the tile's bottom edge, empties with the day. */
body.page-home #home-hero .hh-tile--daily .hh-clock__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
    background: rgba(255, 255, 255, .14);
}
body.page-home #home-hero .hh-tile--daily .hh-clock__bar > i {
    display: block; height: 100%; width: 100%;
    background: linear-gradient(90deg, #ffe082, #ffab1a);
    box-shadow: 0 0 10px rgba(255, 190, 40, .8);
    transition: width 1s linear;
}
body.page-home #home-hero .hh-clock.is-low .hh-clock__bar > i {
    background: linear-gradient(90deg, #ff9d4a, #ff4d3d);
    box-shadow: 0 0 12px rgba(255, 90, 60, .85);
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hh-clock__sep,
    body.page-home #home-hero .hh-clock.is-final .hh-clock__v,
    body.page-home #home-hero .hh-clock__v.is-tick { animation: none; }
    body.page-home #home-hero .hh-tile--daily .hh-clock__bar > i { transition: none; }
    body.page-home #home-hero .hh-clock__sep { opacity: .6; }
}
body.page-home #home-hero .hh-tile__game {
    font: 900 20px/1.15 var(--h-display);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #home-hero .hh-tile__line { font-size: 13px; opacity: .88; line-height: 1.35; }
body.page-home #home-hero .hh-tile__line b { color: #ffd54a; }
body.page-home #home-hero .hh-tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.page-home #home-hero .hh-tile__hint { font-size: 12px; opacity: .75; }
body.page-home #home-hero .hh-streak { font-weight: 800; font-size: 13px; color: #ffb35a; }
body.page-home #home-hero .hh-btn--sm {
    margin-left: auto; min-height: 32px; padding: 0 14px; font-size: 13px;
    color: #1a1300; background: linear-gradient(135deg, #ffd54a, #ffab1a);
}

body.page-home #home-hero .hh-list { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; min-height: 0; }
body.page-home #home-hero .hh-list__item {
    display: flex; align-items: center; gap: 10px;
    min-width: 0; padding: 4px 6px; border-radius: 10px;
    color: inherit; text-decoration: none;
}
body.page-home #home-hero a.hh-list__item:hover { background: rgba(255, 255, 255, .08); }
body.page-home #home-hero .hh-list__pic { flex: 0 0 auto; }
body.page-home #home-hero .hh-list__pic img { display: block; width: 52px; height: 32px; object-fit: cover; border-radius: 6px; }
body.page-home #home-hero .hh-list__medal { flex: 0 0 22px; text-align: center; font-size: 16px; }
body.page-home #home-hero .hh-list__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.page-home #home-hero .hh-list__name { font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-home #home-hero .hh-list__sub  { font-size: 12px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-home #home-hero .hh-list__score { flex: 0 0 auto; color: #ffd54a; font-variant-numeric: tabular-nums; }
body.page-home #home-hero .hh-list__go { flex: 0 0 auto; font-size: 11px; opacity: .7; }

body.page-home #home-hero :focus-visible { outline: 3px solid #8fb4ff; outline-offset: 2px; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.page-home #home-hero { --hh-h: 310px; }
    body.page-home #home-hero .hh-slide { padding: 24px 24px 42px; }
}
@media (max-width: 900px) {
    body.page-home #home-hero .hh__grid { grid-template-columns: minmax(0, 1fr); }
    body.page-home #home-hero .hh-side { height: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.page-home #home-hero .hh-tile { min-height: 170px; }
}
@media (max-width: 640px) {
    body.page-home #home-hero { --hh-h: 330px; }
    body.page-home #home-hero .hh-slide { grid-template-columns: minmax(0, 1fr); align-items: end; padding: 18px 18px 38px; }
    body.page-home #home-hero .hh-slide__art { display: none; }
    body.page-home #home-hero .hh-slide__bg img { filter: none; transform: none; }
    body.page-home #home-hero .hh-slide::before { background: linear-gradient(180deg, rgba(10, 12, 30, .05) 20%, rgba(10, 12, 30, .92) 78%); }
    body.page-home #home-hero .hh-slide__desc { display: none; }
    body.page-home #home-hero .hh-dots { left: 18px; bottom: 12px; }
    body.page-home #home-hero .hh-spot__nav { display: none; }
    body.page-home #home-hero .hh-side { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hh-slide,
    body.page-home #home-hero .hh-slide.is-on { transition: none; }
    body.page-home #home-hero .hh-slide.is-on .hh-slide__pic img,
    body.page-home #home-hero .hh-dot.is-on span { animation: none; }
    body.page-home #home-hero .hh-dot.is-on span { background-size: 100% 100%; }
}
/* Daily Challenge: keep the text readable over busy artwork. */
body.page-home #home-hero .hh-tile--daily .hh-tile__bg img { filter: blur(3px) brightness(.55) saturate(1.2); transform: scale(1.06); }
body.page-home #home-hero .hh-tile--daily::before {
    background: linear-gradient(100deg, rgba(20, 12, 50, .95) 0%, rgba(20, 12, 50, .8) 60%, rgba(20, 12, 50, .45) 100%);
}
body.page-home #home-hero .hh-tile--daily .hh-tile__game { text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
    body.page-home #home-hero .hh-slide::before {
        background: linear-gradient(180deg, rgba(10, 12, 30, 0) 10%, rgba(10, 12, 30, .6) 40%, rgba(10, 12, 30, .95) 70%);
    }
    body.page-home #home-hero .hh-slide__meta { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
}
/* Overlay (::before) must sit above the background artwork. */
body.page-home #home-hero .hh-slide__bg,
body.page-home #home-hero .hh-tile__bg { z-index: -2; }
/* Continue Playing / weekly list: 3 rows must fit the half-height tile. */
body.page-home #home-hero .hh-tile--list { padding: 12px 14px; gap: 4px; }
body.page-home #home-hero .hh-list { gap: 2px; margin: 0; }
body.page-home #home-hero .hh-list__item { padding: 3px 6px; gap: 9px; }
body.page-home #home-hero .hh-list__pic img { width: 46px; height: 28px; }
body.page-home #home-hero .hh-list__name { font-size: 13px; line-height: 1.2; }
body.page-home #home-hero .hh-list__sub  { font-size: 11.5px; line-height: 1.2; }
/* Spotlight slide with an uploaded wide banner (admin-hero.php):
   the banner fills the slide, sharp, with a fade behind the text. */
body.page-home #home-hero .hh-slide--banner { grid-template-columns: minmax(0, 1fr); }
body.page-home #home-hero .hh-slide--banner .hh-slide__body { max-width: 52%; }
body.page-home #home-hero .hh-slide--banner .hh-slide__bg img { filter: none; transform: none; object-position: center; }
body.page-home #home-hero .hh-slide--banner::before {
    background: linear-gradient(90deg, rgba(10, 12, 30, .85) 0%, rgba(10, 12, 30, .45) 45%, rgba(10, 12, 30, 0) 75%);
}
body.page-home #home-hero .hh-slide--banner.is-on .hh-slide__bg img { animation: hh-banner-zoom 6s ease-out both; }
@keyframes hh-banner-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (max-width: 640px) {
    body.page-home #home-hero .hh-slide--banner .hh-slide__body { max-width: none; }
    body.page-home #home-hero .hh-slide--banner::before {
        background: linear-gradient(180deg, rgba(10, 12, 30, 0) 10%, rgba(10, 12, 30, .6) 40%, rgba(10, 12, 30, .95) 70%);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hh-slide--banner.is-on .hh-slide__bg img { animation: none; }
}
/* =========================================================
   LEADERBOARDS — artwork-only cards (4 per row, set above).
   Title + highest score slide up over the image on hover or
   keyboard focus; always visible on touch screens.
========================================================= */
body.page-home #leaderboards .hlb { background: none; box-shadow: none; border-radius: 12px; overflow: visible; }
body.page-home #leaderboards .hlb__media {
    border-radius: 12px; overflow: hidden;
    box-shadow: var(--h-shadow);
    transition: box-shadow .2s ease;
    text-decoration: none; color: #fff;
}
body.page-home #leaderboards .hlb__media:hover,
body.page-home #leaderboards .hlb__media:focus-visible { box-shadow: var(--h-shadow-up); }
body.page-home #leaderboards .hlb__hover {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 3px;
    padding: 34px 12px 10px;
    background: linear-gradient(180deg, rgba(8, 10, 24, 0) 0%, rgba(8, 10, 24, .88) 55%);
    opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
body.page-home #leaderboards .hlb__media:hover .hlb__hover,
body.page-home #leaderboards .hlb__media:focus-visible .hlb__hover { opacity: 1; transform: none; }
body.page-home #leaderboards .hlb__hover .hlb__title {
    margin: 0; font: 800 15px/1.2 var(--h-display);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #leaderboards .hlb__best {
    font-size: 13px; line-height: 1.3; opacity: .92;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #leaderboards .hlb__best b { color: #ffd54a; font-variant-numeric: tabular-nums; }
@media (hover: none) {
    body.page-home #leaderboards .hlb__hover { opacity: 1; transform: none; padding-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #leaderboards .hlb__hover { transition: none; transform: none; }
}
/* Leaderboards — hover effect: card lifts and pops, artwork zooms,
   gold glow ring, trophy wiggles. Mouse devices only; the rail's
   padding (GAME RAIL block) leaves room so nothing is clipped. */
@media (hover: hover) and (pointer: fine) {
    body.page-home #leaderboards .hlb { position: relative; transition: z-index 0s .25s; }
    body.page-home #leaderboards .hlb:hover { z-index: 5; transition-delay: 0s; }
    body.page-home #leaderboards .hlb__media {
        transition: transform .25s cubic-bezier(.2, .8, .3, 1.2), box-shadow .25s ease;
        will-change: transform;
    }
    body.page-home #leaderboards .hlb__media img { transition: transform .5s ease; }
    body.page-home #leaderboards .hlb__media:hover {
        transform: translateY(-6px) scale(1.06);
        box-shadow: 0 0 0 3px #ffc53d, 0 18px 38px rgba(17, 24, 39, .32), 0 0 28px rgba(255, 197, 61, .45);
    }
    body.page-home #leaderboards .hlb__media:hover img { transform: scale(1.08); }
    body.page-home #leaderboards .hlb__media:hover .hlb__badge { animation: hlb-wiggle .6s ease; }
}
@keyframes hlb-wiggle {
    0%, 100% { transform: rotate(0) scale(1); }
    25%      { transform: rotate(-16deg) scale(1.25); }
    50%      { transform: rotate(12deg) scale(1.25); }
    75%      { transform: rotate(-6deg) scale(1.1); }
}
body.page-home #leaderboards .hlb__media:focus-visible { outline: 3px solid #ffc53d; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    body.page-home #leaderboards .hlb__media,
    body.page-home #leaderboards .hlb__media img { transition: box-shadow .2s ease; }
    body.page-home #leaderboards .hlb__media:hover { transform: none; }
    body.page-home #leaderboards .hlb__media:hover img { transform: none; }
    body.page-home #leaderboards .hlb__media:hover .hlb__badge { animation: none; }
}

/* Choose Your Vibe — animated GIF icons (images/*.gif, index.php $vibes).
   Same rounded box as the emoji icon, a little larger so the animation
   reads; the GIF fills it (cropped to the centre if it isn't square). */
body.page-home .hvibe__icon--gif {
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    background: #fff;
}
body.page-home .hvibe__icon--gif img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}
@media (max-width: 640px) {
    body.page-home .hvibe__icon--gif { width: 48px; height: 48px; }
}
/* Hero spotlight — Casual slide badge: no container, plain text. */
/* Choose Your Vibe — bigger GIF, text nudged right (layout unchanged). */
body.page-home .hvibe { gap: 20px; }
body.page-home .hvibe__icon--gif { width: 76px; height: 76px; border-radius: 18px; }
@media (max-width: 1024px) {
    body.page-home .hvibe__icon--gif { width: 68px; height: 68px; }
}
@media (max-width: 600px) {
    body.page-home .hvibe { gap: 10px; }
    body.page-home .hvibe__icon--gif { width: 58px; height: 58px; border-radius: 14px; }
}
/* Choose Your Vibe — larger type + a larger Explore CTA (index.php
   .hvibe__title / .hvibe__desc / .hvibe__cta). Overrides the base
   .hvibe__* sizes above. .hvibes is 3-up above 1024px and 2-up below,
   so the 3-up band in the middle is where the tiles are narrowest and
   the type steps back down a notch to keep the same line count. */
body.page-home .hvibe__title { font-size: 20px; line-height: 1.25; }
body.page-home .hvibe__desc  { font-size: 14.5px; line-height: 1.4; }
body.page-home .hvibe__cta   { margin-top: 10px; font-size: 15px; }
body.page-home .hvibe__cta .hx-compass { font-size: 1.15em; }
@media (min-width: 1025px) and (max-width: 1399px) {   /* narrow 3-up tiles */
    body.page-home .hvibe__title { font-size: 18.5px; }
    body.page-home .hvibe__desc  { font-size: 13.5px; }
    body.page-home .hvibe__cta   { font-size: 14px; }
}
@media (max-width: 1024px) {                           /* 2-up: wide tiles again */
    body.page-home .hvibe__title { font-size: 20px; }
    body.page-home .hvibe__desc  { font-size: 14.5px; }
    body.page-home .hvibe__cta   { font-size: 15px; }
}
@media (max-width: 600px) {                            /* stacked tile, 2-up */
    body.page-home .hvibe__title { font-size: 17.5px; }
    body.page-home .hvibe__desc  { font-size: 13.5px; }
    body.page-home .hvibe__cta   { margin-top: 8px; font-size: 14.5px; }
}
/* Explore buttons — compass icon instead of the → arrow (index.php
   .hx-compass). The needle turns a quarter turn when the button,
   vibe tile or world card is hovered. */
body.page-home .hx-compass {
    display: inline-block;
    margin-left: 5px;
    font-size: 1.05em;
    line-height: 1;
    vertical-align: -0.08em;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
@media (hover: hover) {
    body.page-home .hsec__more:hover .hx-compass,
    body.page-home .hsec__more:focus-visible .hx-compass,
    body.page-home .hvibe:hover .hx-compass,
    body.page-home .gw-card:hover .hx-compass {
        transform: rotate(90deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hx-compass { transition: none; }
}
/* =========================================================
   CARD ICONS — SMALL WHITE SQUARE IN THE TOP-LEFT CORNER
   Every game card's top-left icon (all rows) and the Leaderboards
   🏆 now sit on a small white rounded square. The square stays
   still; the per-row animation moves to the icon inside it
   (.hcard__badge-i / .hlb__badge-i, markup in home_sections.php
   and leaderboard.php). Overrides "CARD BADGES — PLAIN ICONS".
========================================================= */
body.page-home .hcard .hcard__badge {
    top: 6px !important;
    left: 6px !important;
    width: 28px;
    height: 28px;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .28) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
}
body.page-home .hcard__badge-i { display: block; line-height: 1; }

body.page-home .hcard__badge--new    .hcard__badge-i { animation: hb-twinkle 2.4s ease-in-out infinite; }
body.page-home .hcard__badge--hot    .hcard__badge-i { animation: hb-flicker 1.3s ease-in-out infinite; transform-origin: 50% 100%; }
body.page-home .hcard__badge--quick  .hcard__badge-i { animation: hb-zap 2.2s ease-in-out infinite; }
body.page-home .hcard__badge--feat   .hcard__badge-i { animation: hb-wobble 3s ease-in-out infinite; }
body.page-home .hcard__badge--friend .hcard__badge-i { animation: hb-bounce 1.8s ease-in-out infinite; }
body.page-home .hcard__badge--hero   .hcard__badge-i { animation: hb-hero 2.6s ease-in-out infinite; }
body.page-home .hcard__badge--webgl  .hcard__badge-i { animation: hb-turn3d 3.2s ease-in-out infinite; }
body.page-home .hcard__badge--kids   .hcard__badge-i { animation: hb-sway 2.4s ease-in-out infinite; }
body.page-home .hcard__badge--car    .hcard__badge-i { animation: hb-drive 2.2s ease-in-out infinite; }
body.page-home .hcard__badge--fun    .hcard__badge-i { animation: hb-giggle 1.6s ease-in-out infinite; }
body.page-home .hcard__badge--gun    .hcard__badge-i { animation: hb-recoil 2.4s ease-in-out infinite; transform-origin: 70% 60%; }
body.page-home .hcard__badge--casual .hcard__badge-i { animation: hb-steam 2.8s ease-in-out infinite; }
body.page-home .hcard__badge--card   .hcard__badge-i { animation: hb-flip 3s ease-in-out infinite; }

/* Leaderboards 🏆 — same white square. */
body.page-home #leaderboards .hlb__badge {
    top: 6px; left: 6px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .28);
    font-size: 18px;
    filter: none;
    animation: none !important;
    transform: none !important;
}
body.page-home #leaderboards .hlb__badge-i {
    display: block; line-height: 1;
    transform-origin: 50% 90%;
    animation: hlb-shine 3.2s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
    body.page-home #leaderboards .hlb__media:hover .hlb__badge-i { animation: hlb-wiggle .6s ease; }
}

@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard__badge-i,
    body.page-home #leaderboards .hlb__badge-i { animation: none !important; }
}

/* =========================================================
   CARD ICONS — ANIMATED GIFS (images/badges/, home_badge_gif())
   Each row's top-left icon is now its own small animated GIF in the
   same white corner square. The GIF animates itself, so the square
   and the image don't get the old CSS wiggle.
========================================================= */
body.page-home .hcard .hcard__badge.hcard__badge--gif {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    overflow: hidden !important;
}
body.page-home .hcard__badge-gif {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
    animation: none !important;
}
body.page-home #leaderboards .hlb__badge.hlb__badge--gif { width: 34px; height: 34px; overflow: hidden; }
body.page-home #leaderboards .hlb__badge-gif { display: block; width: 30px; height: 30px; object-fit: contain; }
@media (max-width: 600px) {
    body.page-home .hcard .hcard__badge.hcard__badge--gif { width: 28px; height: 28px; }
    body.page-home .hcard__badge-gif { width: 24px; height: 24px; }
}
/* Homepage fills the screen width at every size (the 1600px cap left
   empty space at the sides on wide screens). Side padding stays from .main. */
body.page-home .home { max-width: none; }
/* =========================================================
   CARD ICONS — FLUSH IN THE CORNER, HIDDEN ON HOVER
   The GIF badge sits right in the image's top-left corner (its
   corner curve matches the artwork's 10px radius) and fades out
   while the card is hovered / focused so the artwork is clear.
========================================================= */
body.page-home .hcard .hcard__badge.hcard__badge--gif,
body.page-home #leaderboards .hlb__badge.hlb__badge--gif {
    top: 0 !important;
    left: 0 !important;
    border-radius: 10px 0 12px 0 !important;
    box-shadow: 2px 2px 8px rgba(17, 24, 39, .22) !important;
    opacity: 1;
    transition: opacity .15s ease !important;
}
@media (hover: hover) {
    body.page-home .hcard:hover .hcard__badge.hcard__badge--gif,
    body.page-home #leaderboards .hlb__media:hover .hlb__badge.hlb__badge--gif {
        opacity: 0 !important;
    }
}
body.page-home .hcard:focus-within .hcard__badge.hcard__badge--gif,
body.page-home #leaderboards .hlb__media:focus-visible .hlb__badge.hlb__badge--gif {
    opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    body.page-home .hcard .hcard__badge.hcard__badge--gif,
    body.page-home #leaderboards .hlb__badge.hlb__badge--gif { transition: none !important; }
}
/* =========================================================
   SURPRISE ME — the dice rolls when the section comes into view
   js/home.js adds .is-rolling to .hsurprise__dice every time
   #surprise-me scrolls into view (and on page load if it's already
   visible): the 🎲 (inner .hsurprise__die) is thrown — a quick
   tumble with a hop that slows and lands upright — then stays still.
   Pressing the button (.is-loading) rolls it fast while picking.
========================================================= */
body.page-home .hsurprise__die {
    display: inline-block;
    line-height: 1;
    transform-origin: 50% 60%;
}
body.page-home .hsurprise__dice.is-rolling .hsurprise__die {
    animation: h-dice-throw 1.5s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes h-dice-throw {
    0%   { transform: translateY(0)     rotate(0deg); }
    14%  { transform: translateY(-12px) rotate(210deg); }
    30%  { transform: translateY(0)     rotate(420deg); }
    44%  { transform: translateY(-6px)  rotate(560deg); }
    58%  { transform: translateY(0)     rotate(660deg); }
    70%  { transform: translateY(-2px)  rotate(705deg); }
    82%  { transform: translateY(0)     rotate(726deg); }
    92%  { transform: translateY(0)     rotate(717deg); }
    100% { transform: translateY(0)     rotate(720deg); }
}
/* Fast roll while a random game is being picked (the box itself stays still). */
body.page-home .hsurprise__card.is-loading .hsurprise__dice { animation: none; }
body.page-home .hsurprise__card.is-loading .hsurprise__die { animation: h-dice-spin .5s linear infinite; }
@keyframes h-dice-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    body.page-home .hsurprise__dice.is-rolling .hsurprise__die,
    body.page-home .hsurprise__card.is-loading .hsurprise__die { animation: none; }
}

/* =========================================================
   ONE HEADING GAP (--head-gap, css/main.css) — keep LAST
   Heading → first card is 12px in every section. Card rails start
   4px lower than their box (hover room: -12px margin + 16px padding,
   heroes -22/+26), so a heading above a rail keeps 8px itself.
========================================================= */
body.page-home .hsec__head { margin-bottom: var(--heading-gap, 8px) !important; }
body.page-home .hsec__head:has(+ .hrail),
body.page-home .hsec__head:has(+ .hrail-wrap) { margin-bottom: var(--heading-gap, 8px) !important; }
body.page-home #leaderboards .hlb-guest { margin: 0 0 var(--heading-gap, 8px) !important; }

/* =========================================================
   HOMEPAGE H1 — slim, visible title line above the hero
   (index.php). "Free Online Games" + the brand for search.
========================================================= */
body.page-home .home-h1 {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    margin: 0 0 var(--heading-gap, 8px) !important;
    padding: 0 2px;
    font-family: var(--h-display, var(--ff-display));
    font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
    color: var(--h-text, #111827);
}
body.page-home .home-h1__sub {
    font-family: var(--h-body, inherit);
    font-size: 14px; font-weight: 500; letter-spacing: 0;
    color: var(--h-muted, #6b7280);
}
@media (max-width: 600px) {
    body.page-home .home-h1 { font-size: 19px; }
    body.page-home .home-h1__sub { font-size: 13px; }
}

/* =========================================================
   HOVER TITLES ON EVERY HOVER-CAPABLE DEVICE
   The card name used to fade in only under (hover: hover) AND
   (pointer: fine). Laptops with a touchscreen, or a mouse paired with
   a tablet, can report a coarse primary pointer — there the name never
   appeared on hover. Any device that can hover now gets it.
========================================================= */
@media (hover: hover) {
    body.page-home .hcard .gcard .gcard-title {
        display: block !important;
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 2;
        padding: 26px 10px 9px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .85) 70%);
        color: #fff;
        font: 700 13px/1.25 var(--h-display);
        text-align: left;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        opacity: 0;
        transform: none !important;
        transition: opacity .18s ease;
        pointer-events: none;
    }
    body.page-home .hcard:hover .gcard .gcard-title,
    body.page-home .hcard:focus-within .gcard .gcard-title { opacity: 1; }
    /* Meet the Heroes shows the character + game name instead. */
    body.page-home #meet-the-heroes .hcard .gcard .gcard-title { display: none !important; }
}
/* Keyboard users get the name too. */
body.page-home .hcard:focus-within .gcard .gcard-title { opacity: 1; }

/* =========================================================
   HERO — MOVE TEXT AWAY FROM LEFT NAV ARROW
========================================================= */

body.page-home #home-hero .hh-slide__body {
    padding-left: 18px;
}

/* Keep banner hero aligned nicely as well */
body.page-home #home-hero .hh-slide--banner .hh-slide__body {
    padding-left: 18px;
}

/* Mobile — smaller adjustment */
@media (max-width: 640px) {
    body.page-home #home-hero .hh-slide__body {
        padding-left: 6px;
    }

    body.page-home #home-hero .hh-slide--banner .hh-slide__body {
        padding-left: 6px;
    }
}

/* AD STRIP styles moved to css/promo-strip.css (also used on game pages). */


/* Descriptions show WHOLE sentences (sentence_excerpt() in games_data.php
   shortens them server-side) — no line clamp, so no trailing "…". */
body.page-home #home-hero .hh-slide__desc,
.hfeature__desc,
.hsurprise__desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ── Daily Challenge clock — BIG ODOMETER (overrides the slab look above) ──
   Each digit has its own window; on change the old digit slides UP and out
   while the new one slides up in from below (js/home-hero.js rollDigit). */
body.page-home #home-hero .hh-tile--daily .hh-tile__head { align-items: flex-start; }
body.page-home #home-hero .hh-clock { gap: 4px; align-items: flex-start; }
body.page-home #home-hero .hh-clock__u { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
body.page-home #home-hero .hh-clock__v {
    display: inline-flex; gap: 2px;
    min-width: 0; padding: 0;
    background: none; box-shadow: none; text-shadow: none;
    font: 800 22px/1 var(--h-display, 'Poppins', system-ui, sans-serif);
}
body.page-home #home-hero .hh-clock__v::after { display: none; }
body.page-home #home-hero .hh-dig {
    position: relative;
    display: inline-block;
    width: 21px; height: 30px;
    overflow: hidden;
    border-radius: 7px;
    color: #fff3d0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .18) 50.5%, rgba(255, 255, 255, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .4);
}
body.page-home #home-hero .hh-dig__n {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
body.page-home #home-hero .hh-dig__n.is-out { animation: hh-dig-out .55s cubic-bezier(.5, 0, .2, 1) forwards; }
body.page-home #home-hero .hh-dig__n.is-in  { animation: hh-dig-in  .55s cubic-bezier(.3, 1.35, .5, 1) forwards; }
@keyframes hh-dig-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-110%); opacity: 0; } }
@keyframes hh-dig-in  { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* The seconds window glows a little on each roll. */
body.page-home #home-hero [data-hh-unit="s"] .hh-dig:last-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 12px rgba(255, 214, 110, .35), 0 3px 8px rgba(0, 0, 0, .4); }
body.page-home #home-hero .hh-clock__sep {
    font: 800 20px/30px var(--h-display, 'Poppins', system-ui, sans-serif);
    height: 30px; color: #ffe39a;
}
body.page-home #home-hero .hh-clock__cap {
    font: 700 9px/1 system-ui, sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
/* Final hour: amber windows. Final minute: they pulse. */
body.page-home #home-hero .hh-clock.is-low .hh-clock__v { background: none; box-shadow: none; }
body.page-home #home-hero .hh-clock.is-low .hh-dig {
    color: #1d1200;
    background: linear-gradient(180deg, #ffe08a, #ffc24a 50%, #f5a623 50.5%, #f0961a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(255, 176, 32, .55);
}
body.page-home #home-hero .hh-clock.is-low .hh-dig__n { text-shadow: none; }
body.page-home #home-hero .hh-clock.is-final .hh-clock__v { animation: none; }
body.page-home #home-hero .hh-clock.is-final .hh-dig { animation: hh-final 1s ease-in-out infinite; }
@media (max-width: 380px) {
    body.page-home #home-hero .hh-dig { width: 18px; height: 26px; border-radius: 6px; }
    body.page-home #home-hero .hh-clock__v { font-size: 19px; }
    body.page-home #home-hero .hh-clock__sep { font-size: 17px; line-height: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hh-dig__n.is-out,
    body.page-home #home-hero .hh-dig__n.is-in,
    body.page-home #home-hero .hh-clock.is-final .hh-dig { animation: none; }
}

/* ── Daily Challenge clock — LARGER + HIGHLIGHTED ─────────────────────
   Bright brand-colour windows with a soft glow so the time left is the
   first thing you see on the tile. */
body.page-home #home-hero .hh-clock {
    gap: 5px;
    padding: 6px 8px 5px;
    border-radius: 12px;
    background: rgba(10, 8, 30, .55);
    box-shadow: 0 0 0 1px rgba(255, 214, 110, .35), 0 0 22px rgba(255, 120, 80, .35);
}
body.page-home #home-hero .hh-clock__v { gap: 3px; font-size: 27px; }
body.page-home #home-hero .hh-dig {
    width: 25px; height: 36px; border-radius: 8px;
    color: #fff;
    background: linear-gradient(180deg, #ff6a7d 0%, #ff4f64 49.5%, #e23a50 50.5%, #c92d44 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25),
                0 0 14px rgba(255, 79, 100, .55), 0 3px 8px rgba(0, 0, 0, .45);
}
body.page-home #home-hero .hh-dig__n { text-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
body.page-home #home-hero [data-hh-unit="s"] .hh-dig:last-child {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25),
                0 0 20px rgba(255, 200, 90, .75), 0 3px 8px rgba(0, 0, 0, .45);
}
body.page-home #home-hero .hh-clock__sep {
    font-size: 24px; line-height: 36px; height: 36px;
    color: #ffd166; text-shadow: 0 0 10px rgba(255, 209, 102, .8);
}
body.page-home #home-hero .hh-clock__cap { font-size: 9.5px; color: #ffd98a; letter-spacing: .14em; }
/* Final hour: amber. */
body.page-home #home-hero .hh-clock.is-low .hh-dig {
    color: #1d1200;
    background: linear-gradient(180deg, #ffe38f 0%, #ffc54d 49.5%, #f5a623 50.5%, #ee9214 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 18px rgba(255, 176, 32, .75), 0 3px 8px rgba(0, 0, 0, .4);
}
/* Size follows the TILE's width (container query), not the screen:
   wide tile → large, normal → medium, narrow → small. "Daily Challenge"
   stays on one line whenever the tile has room for both. */
body.page-home #home-hero .hh-tile--daily { container-type: inline-size; }
@container (min-width: 360px) {
    body.page-home #home-hero .hh-tile--daily .hh-tile__label { white-space: nowrap; }
}
@container (max-width: 459px) {
    body.page-home #home-hero .hh-clock { padding: 5px 6px 4px; gap: 4px; }
    body.page-home #home-hero .hh-clock__v { font-size: 23px; gap: 2px; }
    body.page-home #home-hero .hh-dig { width: 20px; height: 31px; border-radius: 7px; }
    body.page-home #home-hero .hh-clock__sep { font-size: 20px; line-height: 31px; height: 31px; }
}
@container (max-width: 359px) {
    body.page-home #home-hero .hh-clock { padding: 4px 5px 3px; gap: 3px; }
    body.page-home #home-hero .hh-clock__v { font-size: 20px; }
    body.page-home #home-hero .hh-dig { width: 18px; height: 27px; border-radius: 6px; }
    body.page-home #home-hero .hh-clock__sep { font-size: 17px; line-height: 27px; height: 27px; }
    body.page-home #home-hero .hh-clock__cap { font-size: 8.5px; }
}
@container (min-width: 390px) and (max-width: 459px) {
    body.page-home #home-hero .hh-clock__v { font-size: 25px; }
    body.page-home #home-hero .hh-dig { width: 22px; height: 33px; }
    body.page-home #home-hero .hh-clock__sep { font-size: 22px; line-height: 33px; height: 33px; }
}
/* Keep the tile's content from being pushed down: no frame padding around
   the clock (the glow is on the digit windows themselves). */
body.page-home #home-hero .hh-clock { padding: 0; background: none; box-shadow: none; }
@container (max-width: 459px) {
    body.page-home #home-hero .hh-dig { height: 29px; }
    body.page-home #home-hero .hh-clock__sep { line-height: 29px; height: 29px; }
}
@container (max-width: 359px) {
    body.page-home #home-hero .hh-dig { height: 26px; }
    body.page-home #home-hero .hh-clock__sep { line-height: 26px; height: 26px; }
}

/* ════════════════════════════════════════════════════════════════
   DAILY CHALLENGE TILE (index.php .hdc — first tile of #home-hero .hh-side)
   The "Daily Challenge" design scaled into the tile's own box: sky card,
   title + today's game on the left, a dark tilted panel on the right with
   the TIME REMAINING badge, red flip digits that roll up every second
   (js/home-hero.js) and Play Now. Everything is sized in cqw/cqh units
   of the tile, so it fits the same box at every screen size.
   ════════════════════════════════════════════════════════════════ */
body.page-home #home-hero .hh-side { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }

body.page-home #home-hero .hdc {
    container-type: size;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    height: 100%; min-height: 0;
    padding: 10px 10px 10px 14px;      /* px: an element can't size itself in its own cq units */
    border-radius: 18px;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(120, 190, 255, .55), transparent 70%),
        linear-gradient(100deg, #f3f8ff 0%, #e6f1ff 45%, #cfe6ff 100%);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 22px -10px rgba(40, 90, 170, .3);
    color: #151a3d;
}
body.page-home #home-hero .hdc__cloud { position: absolute; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .7); }
body.page-home #home-hero .hdc__cloud--1 { width: 40cqw; height: 45cqh; left: 25%; top: 45%; background: rgba(210, 232, 255, .55); }
body.page-home #home-hero .hdc__cloud--2 { width: 26cqw; height: 34cqh; right: -8cqw; top: 8%; }
body.page-home #home-hero .hdc__hill { position: absolute; z-index: -1; right: 0; bottom: 0; width: 22cqw; height: 26cqh; }

/* ── Left ── */
body.page-home #home-hero .hdc__left { display: grid; gap: 5cqh; min-width: 0; align-content: center; }
body.page-home #home-hero .hdc__head { display: flex; align-items: center; gap: 2cqw; min-width: 0; }
body.page-home #home-hero .hdc__cal { flex: none; width: clamp(22px, min(8cqw, 22cqh), 40px); aspect-ratio: 1; transform: rotate(-8deg); filter: drop-shadow(0 3px 5px rgba(255, 77, 94, .3)); }
body.page-home #home-hero .hdc__cal svg { width: 100%; height: 100%; display: block; }
body.page-home #home-hero .hdc__title {
    margin: 0; min-width: 0;
    font: 900 clamp(14px, min(5cqw, 13cqh), 26px)/1.05 var(--h-display, 'Poppins', system-ui, sans-serif);
    letter-spacing: -.02em;
}
body.page-home #home-hero .hdc__t1 { color: #151a3d; }
body.page-home #home-hero .hdc__t2 {
    background: linear-gradient(90deg, #1f7bff 0%, #13b8d8 55%, #36d04d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.page-home #home-hero .hdc__game { display: flex; align-items: center; gap: 2.4cqw; min-width: 0; text-decoration: none; color: inherit; }
body.page-home #home-hero .hdc__icon {
    flex: none; width: clamp(34px, min(12cqw, 30cqh), 60px); aspect-ratio: 1; height: auto; object-fit: cover;
    border-radius: 10px; box-shadow: 0 4px 10px rgba(20, 40, 90, .25);
    transition: transform .2s ease;
}
body.page-home #home-hero .hdc__game:hover .hdc__icon { transform: scale(1.06) rotate(-2deg); }
body.page-home #home-hero .hdc__gtext { display: grid; gap: 2px; min-width: 0; }
body.page-home #home-hero .hdc__gname { font: 800 clamp(12.5px, min(3.9cqw, 10cqh), 19px)/1.15 var(--h-display, 'Poppins', system-ui, sans-serif); color: #151a3d; }
body.page-home #home-hero .hdc__gdesc { font: 500 clamp(10.5px, 2.6cqw, 13px)/1.35 system-ui, sans-serif; color: #4a5070; }
body.page-home #home-hero .hdc__pill {
    justify-self: start; max-width: 100%;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font: 600 clamp(10px, 2.5cqw, 12.5px)/1.25 system-ui, sans-serif;
    color: #4a3aa8; background: rgba(230, 226, 255, .9);
    white-space: nowrap;
}
body.page-home #home-hero .hdc__pill svg { width: clamp(16px, 4.4cqw, 24px); height: auto; flex: none; }
body.page-home #home-hero .hdc__pill a { color: #3d2bd1; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* ── Right: tilted dark panel ── */
body.page-home #home-hero .hdc__panel {
    --dw: clamp(14px, min(6cqw, 17cqh), 30px);      /* one digit window's width: limited by the tile's width AND height */
    position: relative;
    display: grid; justify-items: center; align-content: center; gap: 5cqh;
    height: 100%; min-height: 0;
    padding: 5cqh 2cqw 5cqh 3cqw;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .05) 0 30%, transparent 30% 70%, rgba(255, 255, 255, .04) 70%),
        #1d1f4d;
    clip-path: polygon(5% 4%, 97% 0, 100% 100%, 0 96%);
    border-radius: 14px;
}
body.page-home #home-hero .hdc__badge { display: flex; align-items: center; margin-left: 3cqw; }
body.page-home #home-hero .hdc__watch { position: relative; z-index: 1; width: calc(var(--dw) * 1.35); aspect-ratio: 1; margin-right: calc(var(--dw) * -.45); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
body.page-home #home-hero .hdc__watch svg { width: 100%; height: 100%; display: block; }
body.page-home #home-hero .hdc__badge-text {
    white-space: nowrap;
    padding: calc(var(--dw) * .22) calc(var(--dw) * .7) calc(var(--dw) * .22) calc(var(--dw) * .65);
    font: 800 calc(var(--dw) * .46)/1 var(--h-display, 'Poppins', system-ui, sans-serif);
    letter-spacing: .05em; text-transform: uppercase;
    background: linear-gradient(90deg, #6c3cff 0%, #3f7dff 55%, #17c8f0 100%);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    border-radius: 4px;
}
body.page-home #home-hero .hdc .hh-clock { gap: calc(var(--dw) * .22); padding: 0; background: none; box-shadow: none; align-items: flex-start; }
body.page-home #home-hero .hdc .hh-clock__u { gap: calc(var(--dw) * .18); }
body.page-home #home-hero .hdc .hh-clock__v { gap: calc(var(--dw) * .1); font-size: calc(var(--dw) * 1.02); }
body.page-home #home-hero .hdc .hh-dig {
    width: var(--dw); height: calc(var(--dw) * 1.4);
    border-radius: calc(var(--dw) * .2);
    color: #fff;
    background: linear-gradient(180deg, #ff5f73 0%, #f33c55 49.4%, #d92a44 50.6%, #e8354f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(120, 0, 20, .35),
                0 3px 0 #a3172f, 0 5px 10px rgba(0, 0, 0, .35);
}
body.page-home #home-hero .hdc .hh-dig::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 2; border-top: 1px solid rgba(110, 0, 25, .4); }
body.page-home #home-hero .hdc .hh-dig__n { font-family: var(--h-display, 'Poppins', system-ui, sans-serif); text-shadow: 0 2px 0 rgba(140, 10, 35, .45); }
body.page-home #home-hero .hdc [data-hh-unit="s"] .hh-dig:last-child {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(120, 0, 20, .35),
                0 3px 0 #a3172f, 0 5px 10px rgba(0, 0, 0, .35), 0 0 14px rgba(255, 90, 110, .55);
}
body.page-home #home-hero .hdc .hh-clock__sep {
    display: grid; place-items: center;
    height: calc(var(--dw) * 1.4);
    font: 900 calc(var(--dw) * .9)/1 var(--h-display, 'Poppins', system-ui, sans-serif);
    color: #fff; text-shadow: none; opacity: 1; animation: none;
}
body.page-home #home-hero .hdc .hh-clock__cap {
    font: 800 calc(var(--dw) * .36)/1 var(--h-display, 'Poppins', system-ui, sans-serif);
    letter-spacing: .06em; color: #aab0d6;
}
body.page-home #home-hero .hdc__play {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--dw) * .35);
    padding: calc(var(--dw) * .32) calc(var(--dw) * 1.1);
    border-radius: 999px;
    font: 800 calc(var(--dw) * .55)/1 var(--h-display, 'Poppins', system-ui, sans-serif);
    color: #151a3d; text-decoration: none; white-space: nowrap;
    background: linear-gradient(180deg, #ffe15a 0%, #ffc928 60%, #f5b50f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #d39200, 0 6px 12px rgba(0, 0, 0, .3);
    transition: transform .15s ease;
}
body.page-home #home-hero .hdc__play:hover { transform: translateY(-1px); }
body.page-home #home-hero .hdc__play:active { transform: translateY(2px); }
body.page-home #home-hero .hdc__star {
    position: absolute; right: 1cqw; top: 2cqh; z-index: 2;
    width: clamp(16px, 5cqw, 30px); height: auto;
    filter: drop-shadow(0 2px 4px rgba(245, 160, 0, .45));
    animation: hdc-star 3.2s ease-in-out infinite;
}
@keyframes hdc-star { 50% { transform: rotate(12deg) scale(1.1); } }
@media (max-width: 900px) {
    body.page-home #home-hero .hdc { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hdc__star { animation: none; }
    body.page-home #home-hero .hdc__play, body.page-home #home-hero .hdc__icon { transition: none; }
}
/* Narrow tiles: drop the pill's controller icon so the text stays on one line. */
@container (max-width: 330px) {
    body.page-home #home-hero .hdc__pill { padding: 4px 8px; }
    body.page-home #home-hero .hdc__pill svg { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PLAY TILE (index.php .hpt — second tile of #home-hero .hh-side)
   Pairs with the Daily Challenge tile above it: same box, radius and
   heading scale, but calm and light — a white card with a faint
   lavender glow.
     .hpt--continue  "Jump back in": the player's recent games as
                     compact rows, each with a red ▶ button.
     .hpt--week      "Players are loving": this week's top 3 with
                     gold / silver / bronze rank chips and scores.
   Desktop: the hero has a fixed height, so the rows share the tile's
   height (thumbnails as big as a row allows). ≤900px: the tile grows
   with its content and thumbnails are a full 52px.
   ════════════════════════════════════════════════════════════════ */
body.page-home #home-hero .hpt {
    --hpt-red: var(--primary, #e62327);
    --hpt-ink: #151a3d;
    --hpt-muted: #6b7280;
    --hpt-line: rgba(21, 26, 61, .07);
    container-type: size;
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    height: 100%; min-height: 0;
    padding: 12px 14px;
    border-radius: 18px;                         /* = .hdc */
    color: var(--hpt-ink);
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(139, 124, 246, .10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
    border: 1px solid rgba(109, 77, 255, .08);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 22px -12px rgba(60, 50, 140, .22);
    font-family: var(--ff-body, 'Inter', system-ui, sans-serif);
}
/* Decoration, all behind the content: a faint dot field top-right and a
   thin gradient line along the top edge. */
body.page-home #home-hero .hpt::before {
    content: ""; position: absolute; z-index: -1; top: 0; right: 0;
    width: 46%; height: 60%;
    background-image: radial-gradient(rgba(109, 77, 255, .16) 1px, transparent 1.4px);
    background-size: 12px 12px;
    -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%);
}
body.page-home #home-hero .hpt::after {
    content: ""; position: absolute; z-index: -1; left: 14px; right: 14px; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(109, 77, 255, .35), rgba(230, 35, 39, .25), transparent);
}
body.page-home #home-hero .hpt__glow {
    position: absolute; z-index: -1; right: -40px; bottom: -60px;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(139, 124, 246, .14); filter: blur(30px);
}
body.page-home #home-hero .hpt--week .hpt__glow { background: rgba(255, 190, 70, .16); }

/* ── Header ── */
body.page-home #home-hero .hpt__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.page-home #home-hero .hpt__ico {
    flex: none; display: grid; place-items: center;
    width: 32px; height: 32px; border-radius: 10px;
    color: #6d4dff; background: #efebff;
    box-shadow: inset 0 0 0 1px rgba(109, 77, 255, .12);
}
body.page-home #home-hero .hpt--week .hpt__ico { color: #e8a317; background: #fff4dc; box-shadow: inset 0 0 0 1px rgba(232, 163, 23, .2); }
body.page-home #home-hero .hpt__ico svg { width: 20px; height: 20px; display: block; }
body.page-home #home-hero .hpt__heading { flex: 1 1 auto; min-width: 0; }
body.page-home #home-hero .hpt__title {
    margin: 0;
    font: 800 clamp(14px, min(4.4cqw, 11cqh), 19px)/1.1 var(--ff-display, 'Poppins', system-ui, sans-serif);
    letter-spacing: .01em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #home-hero .hpt__t1 { color: var(--hpt-ink); }
body.page-home #home-hero .hpt__t2 { color: var(--hpt-red); }
body.page-home #home-hero .hpt__lead { margin: 2px 0 0; font: 500 12px/1.25 var(--ff-body, 'Inter', system-ui, sans-serif); color: var(--hpt-muted); }
body.page-home #home-hero .hpt__count.hh-count {
    flex: none; align-self: flex-start;
    padding: 3px 8px; border-radius: 999px;
    font: 600 11px/1.3 var(--ff-body, 'Inter', system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
    color: var(--hpt-muted); background: rgba(21, 26, 61, .05);
}

/* ── Rows ── */
body.page-home #home-hero .hpt__list {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-auto-rows: minmax(0, 1fr); gap: 4px;
    margin: 0; padding: 0; list-style: none;
}
body.page-home #home-hero .hpt__list > li { min-height: 0; display: flex; }
body.page-home #home-hero .hpt__row {
    flex: 1; min-width: 0; min-height: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 2px 4px 2px 2px;
    border-radius: 12px;
    text-decoration: none; color: inherit;
    border: 1px solid transparent;
    transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}
body.page-home #home-hero .hpt__row:hover { background: rgba(230, 35, 39, .04); transform: translateX(2px); }
body.page-home #home-hero .hpt__row:focus-visible { outline: 2px solid var(--hpt-red); outline-offset: 1px; }

body.page-home #home-hero .hpt__pic {
    flex: none; align-self: stretch;
    height: auto; max-height: 52px; aspect-ratio: 1; width: auto;
    object-fit: cover; border-radius: 9px;
    box-shadow: 0 2px 6px rgba(20, 30, 70, .18);
    transition: transform .18s ease;
}
body.page-home #home-hero .hpt__row:hover .hpt__pic { transform: scale(1.03); }
body.page-home #home-hero .hpt__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
body.page-home #home-hero .hpt__name {
    font: 700 clamp(12.5px, min(3.4cqw, 8.6cqh), 14.5px)/1.2 var(--ff-display, 'Poppins', system-ui, sans-serif);
    color: var(--hpt-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #home-hero .hpt__sub {
    display: flex; align-items: center; gap: 6px; min-width: 0;
    font: 500 11px/1.25 var(--ff-body, 'Inter', system-ui, sans-serif); color: var(--hpt-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #home-hero .hpt__meta b { color: var(--hpt-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
body.page-home #home-hero .hpt__go {
    flex: none; display: grid; place-items: center;
    width: 34px; height: 34px; max-height: 100%; aspect-ratio: 1; border-radius: 50%;
    color: var(--hpt-red); background: #ffecec;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body.page-home #home-hero .hpt__go svg { width: 15px; height: 15px; margin-left: 2px; }
body.page-home #home-hero .hpt__row:hover .hpt__go,
body.page-home #home-hero .hpt__row:focus-visible .hpt__go { color: #fff; background: var(--hpt-red); transform: translateX(1px); }

/* ── Weekly ranking ── */
body.page-home #home-hero .hpt--week .hpt__list { gap: 0; }
body.page-home #home-hero .hpt--week .hpt__list > li + li .hpt__row { border-top-color: var(--hpt-line); border-radius: 0; }
body.page-home #home-hero .hpt--week .hpt__row { padding: 2px 4px; border-radius: 10px; }
body.page-home #home-hero .hpt--week .hpt__list > li:first-child .hpt__row { background: linear-gradient(90deg, rgba(255, 196, 61, .14), rgba(255, 196, 61, 0) 70%); }
body.page-home #home-hero .hpt__medal {
    flex: none; display: grid; place-items: center;
    width: 24px; height: 24px; border-radius: 50%;
    font: 800 12px/1 var(--ff-display, 'Poppins', system-ui, sans-serif);
}
body.page-home #home-hero .hpt__medal--1 { color: #9a6200; background: #ffefc2; box-shadow: inset 0 0 0 1.5px #f0b429; }
body.page-home #home-hero .hpt__medal--2 { color: #4b5563; background: #eef1f5; box-shadow: inset 0 0 0 1.5px #b8c0cc; }
body.page-home #home-hero .hpt__medal--3 { color: #8a4b1c; background: #fbeadb; box-shadow: inset 0 0 0 1.5px #d49563; }
body.page-home #home-hero .hpt__score {
    flex: none; margin-left: auto;
    font: 700 13px/1 var(--ff-display, 'Poppins', system-ui, sans-serif);
    font-variant-numeric: tabular-nums; color: var(--hpt-ink);
}

/* ── Week, no scores yet ── */
body.page-home #home-hero .hpt__empty {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(21, 26, 61, .03); border: 1px dashed rgba(21, 26, 61, .1);
}
body.page-home #home-hero .hpt__empty p { margin: 0; display: grid; gap: 2px; font: 500 12.5px/1.35 var(--ff-body, 'Inter', system-ui, sans-serif); color: var(--hpt-muted); }
body.page-home #home-hero .hpt__empty p b { font: 700 14px/1.2 var(--ff-display, 'Poppins', system-ui, sans-serif); color: var(--hpt-ink); }
body.page-home #home-hero .hpt__cta {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 16px; border-radius: 999px;
    font: 700 13px/1 var(--ff-display, 'Poppins', system-ui, sans-serif);
    color: var(--hpt-red); background: #ffecec; text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body.page-home #home-hero .hpt__cta:hover,
body.page-home #home-hero .hpt__cta:focus-visible { color: #fff; background: var(--hpt-red); transform: translateX(1px); }
body.page-home #home-hero .hpt__cta:focus-visible { outline: 2px solid var(--hpt-red); outline-offset: 2px; }

/* ── Tablet / phone: the tile grows with its content ── */
@media (max-width: 900px) {
    body.page-home #home-hero .hpt { container-type: inline-size; height: auto; min-height: 170px; gap: 10px; padding: 14px; }
    body.page-home #home-hero .hpt__title { font-size: clamp(15px, 4.6cqw, 19px); }
    body.page-home #home-hero .hpt__name { font-size: 14px; }
    body.page-home #home-hero .hpt__list { grid-auto-rows: auto; gap: 6px; }
    body.page-home #home-hero .hpt__row { padding: 4px 6px 4px 4px; }
    body.page-home #home-hero .hpt__pic { align-self: center; width: 52px; height: 52px; max-height: none; }
    body.page-home #home-hero .hpt--week .hpt__row { padding: 8px 6px; }
    body.page-home #home-hero .hpt__go { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hpt__row, body.page-home #home-hero .hpt__pic,
    body.page-home #home-hero .hpt__go, body.page-home #home-hero .hpt__cta { transition: none; }
    body.page-home #home-hero .hpt__row:hover, body.page-home #home-hero .hpt__row:hover .hpt__pic { transform: none; }
}
/* Desktop: give the thumbnails every pixel the fixed-height rows have. */
body.page-home #home-hero .hpt__list { gap: 3px; }
body.page-home #home-hero .hpt__row { padding-top: 1px; padding-bottom: 1px; }
body.page-home #home-hero .hpt__head { margin-bottom: 1px; }
@media (max-width: 900px) {
    /* The tile grows with its content here, so the side column's rows must
       size to their own tile — otherwise the Daily Challenge tile is
       stretched to this tile's height with empty space inside. (On tablets
       the two tiles share one row and stay the same height.) */
    body.page-home #home-hero .hh-side { grid-template-rows: none; grid-auto-rows: auto; }
    body.page-home #home-hero .hpt__row { padding-top: 4px; padding-bottom: 4px; }
    /* Narrow phones: the title may wrap rather than be cut off. */
    body.page-home #home-hero .hpt__title { white-space: normal; overflow: visible; }
}

/* ════════════════════════════════════════════════════════════════
   JUMP BACK IN (.hpt--continue) — the most recent game as a large
   artwork card with a Continue button, the others as compact rows
   beside it (.hpt--solo: only one game, so the card spans the tile).
   Desktop: everything shares the tile's fixed height.
   ≤900px: the tile grows with its content; the card stacks above the
   rows when the tile is narrow (container query on .hpt).
   ════════════════════════════════════════════════════════════════ */
body.page-home #home-hero .hpt--continue .hpt__head { margin-bottom: 0; }
body.page-home #home-hero .hpt__all {
    flex: none; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 9px; border-radius: 999px;
    font: 600 12px/1 var(--ff-body, 'Inter', system-ui, sans-serif);
    color: var(--hpt-red); text-decoration: none; white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}
body.page-home #home-hero .hpt__all:hover,
body.page-home #home-hero .hpt__all:focus-visible { background: #ffecec; }
body.page-home #home-hero .hpt__all:focus-visible { outline: 2px solid var(--hpt-red); outline-offset: 1px; }

/* The featured card always has the artwork's own shape (thumb_1 is
   512×310, see hh_picture()), so the art fills it edge to edge with
   nothing cropped. Desktop: the card takes the row's full height and
   its width follows from that; the rows get the rest. */
body.page-home #home-hero .hpt__body {
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 10px;
}
body.page-home #home-hero .hpt__body > .hpt__list { flex: 1 1 0; min-width: 0; }

/* ── Featured card ── */
body.page-home #home-hero .hpt__feat {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    flex: none; height: 100%; aspect-ratio: 512 / 310;
    min-width: 0; min-height: 0;
    border-radius: 14px;
    color: #fff; text-decoration: none;
    background: #1a1c38;
    box-shadow: 0 0 0 1px rgba(21, 26, 61, .06), 0 6px 16px -8px rgba(20, 30, 70, .45);
    transition: transform .22s ease, box-shadow .22s ease;
}
/* Shown whole (contain). The card matches the art's ratio, so this
   fills it exactly; the blurred copy behind only shows if a game's art
   has an unusual shape (and in the one-game layout). */
body.page-home #home-hero .hpt__art { position: absolute; inset: 0; z-index: -2; }
body.page-home #home-hero .hpt__art img {
    display: block; width: 100%; height: 100%; object-fit: contain;
}
body.page-home #home-hero .hpt__fill { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
body.page-home #home-hero .hpt__fill .hpt__art img {
    object-fit: cover;
    filter: blur(14px) saturate(1.2) brightness(.8);
    transform: scale(1.15);
    transition: transform .25s ease;
}
/* Darkens the bottom of the art so the text stays readable. */
body.page-home #home-hero .hpt__feat::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(10, 12, 30, 0) 20%, rgba(10, 12, 30, .5) 55%, rgba(10, 12, 30, .86) 100%);
    transition: opacity .22s ease;
}
/* Same gradient, a touch stronger — faded in on hover. */
body.page-home #home-hero .hpt__feat::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: linear-gradient(180deg, rgba(10, 12, 30, .1) 0%, rgba(10, 12, 30, .35) 100%);
    transition: opacity .22s ease;
}
body.page-home #home-hero .hpt__ready {
    position: absolute; top: 6px; left: 6px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px 2px 6px; border-radius: 999px;
    font: 600 10px/1.1 var(--ff-body, 'Inter', system-ui, sans-serif);
    color: rgba(255, 255, 255, .92); background: rgba(10, 12, 30, .45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
body.page-home #home-hero .hpt__ready i {
    width: 6px; height: 6px; border-radius: 50%;
    background: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, .25);
}
body.page-home #home-hero .hpt__fbody {
    display: grid; justify-items: start; gap: 1px;
    min-width: 0; padding: 7px 10px 8px;
}
body.page-home #home-hero .hpt__fname {
    max-width: 100%;
    font: 700 13.5px/1.2 var(--ff-display, 'Poppins', system-ui, sans-serif);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
body.page-home #home-hero .hpt__fmeta {
    max-width: 100%;
    font: 500 11px/1.25 var(--ff-body, 'Inter', system-ui, sans-serif);
    color: rgba(255, 255, 255, .8);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.page-home #home-hero .hpt__fmeta b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
body.page-home #home-hero .hpt__fcta {
    display: inline-flex; align-items: center; gap: 5px;
    height: 22px; margin-top: 4px; padding: 0 11px 0 9px; border-radius: 999px;
    font: 700 10.5px/1 var(--ff-display, 'Poppins', system-ui, sans-serif);
    letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: var(--hpt-red);
    box-shadow: 0 4px 10px -3px rgba(230, 35, 39, .55);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.page-home #home-hero .hpt__fcta svg { width: 11px; height: 11px; }

body.page-home #home-hero .hpt__feat:hover,
body.page-home #home-hero .hpt__feat:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(230, 35, 39, .18), 0 12px 22px -10px rgba(20, 30, 70, .5);
}
body.page-home #home-hero .hpt__feat:focus-visible { outline: 2px solid var(--hpt-red); outline-offset: 2px; }
body.page-home #home-hero .hpt__feat:hover .hpt__fill .hpt__art img { transform: scale(1.2); }
body.page-home #home-hero .hpt__feat:hover::before { opacity: 1; }
body.page-home #home-hero .hpt__feat:hover .hpt__fcta,
body.page-home #home-hero .hpt__feat:focus-visible .hpt__fcta {
    background: #c81d21; transform: scale(1.05);
    box-shadow: 0 6px 14px -4px rgba(230, 35, 39, .7);
}
/* Short desktop tile (≤1100px wide screens): drop the status chip so it
   never collides with the title. */
@container (max-height: 125px) {   /* content box: 148px tile − padding */
    body.page-home #home-hero .hpt__ready { display: none; }
}

/* ── Secondary rows ── */
body.page-home #home-hero .hpt--continue .hpt__list { gap: 6px; }
body.page-home #home-hero .hpt--continue .hpt__row {
    gap: 8px; padding: 4px 6px 4px 4px;
    background: #fff;
    border-color: var(--hpt-line);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
    transition: background-color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.page-home #home-hero .hpt--continue .hpt__row:hover {
    background: #fff; transform: translateX(3px);
    border-color: rgba(230, 35, 39, .22);
    box-shadow: 0 4px 12px -6px rgba(230, 35, 39, .35);
}
body.page-home #home-hero .hpt--continue .hpt__pic { border-radius: 8px; box-shadow: none; object-fit: contain; background: #f1f3f8; }
body.page-home #home-hero .hpt--continue .hpt__row:hover .hpt__pic { transform: scale(1.05); }
body.page-home #home-hero .hpt--continue .hpt__name { font-size: 13px; }
body.page-home #home-hero .hpt--continue .hpt__go { width: 26px; height: 26px; opacity: .75; transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease; }
body.page-home #home-hero .hpt--continue .hpt__go svg { width: 12px; height: 12px; }
body.page-home #home-hero .hpt--continue .hpt__row:hover .hpt__go,
body.page-home #home-hero .hpt--continue .hpt__row:focus-visible .hpt__go { opacity: 1; }
/* Narrow desktop tile (~1024px screens): the whole row is the link, so
   the ▶ circle gives its room to the game name. */
@media (min-width: 901px) {
    /* One game: the card spans the tile (the blurred art fills the sides). */
    body.page-home #home-hero .hpt--solo .hpt__feat { flex: 1 1 auto; aspect-ratio: auto; }
    @container (max-width: 340px) {
        body.page-home #home-hero .hpt--continue .hpt__go { display: none; }
        body.page-home #home-hero .hpt__body { gap: 8px; }
    }
}

/* ── Tablet / phone ── */
@media (max-width: 900px) {
    /* Tablets: with "Jump back in" the side tiles stack full width, so
       the card + rows have room instead of being squeezed beside the
       Daily Challenge tile. */
    body.page-home #home-hero .hh-side:has(.hpt--continue) { grid-template-columns: minmax(0, 1fr); }

    /* Stacked: the card spans the tile; its height follows the art ratio. */
    body.page-home #home-hero .hpt__body { flex-direction: column; gap: 8px; }
    body.page-home #home-hero .hpt__feat { width: 100%; height: auto; }
    body.page-home #home-hero .hpt__body > .hpt__list { flex: none; }
    body.page-home #home-hero .hpt__ready { top: 10px; left: 10px; font-size: 11px; }
    body.page-home #home-hero .hpt__fbody { padding: 10px 12px 12px; gap: 2px; }
    body.page-home #home-hero .hpt__fname { font-size: 16px; }
    body.page-home #home-hero .hpt__fmeta { font-size: 12px; }
    body.page-home #home-hero .hpt__fcta { height: 30px; margin-top: 6px; padding: 0 14px 0 12px; font-size: 12px; }
    body.page-home #home-hero .hpt__fcta svg { width: 13px; height: 13px; }
    body.page-home #home-hero .hpt--continue .hpt__list { align-content: start; }
    body.page-home #home-hero .hpt--continue .hpt__row { padding: 6px 8px 6px 6px; }
    body.page-home #home-hero .hpt--continue .hpt__pic { width: 48px; height: 48px; }
    body.page-home #home-hero .hpt--continue .hpt__name { font-size: 14px; }
    body.page-home #home-hero .hpt--continue .hpt__go { width: 34px; height: 34px; }
    body.page-home #home-hero .hpt--continue .hpt__go svg { width: 14px; height: 14px; }

    /* Wide enough: card on the left, rows on the right. */
    @container (min-width: 520px) {
        body.page-home #home-hero .hpt__body { flex-direction: row; align-items: center; gap: 12px; }
        body.page-home #home-hero .hpt__feat { flex: 1.25 1 0; width: auto; }
        body.page-home #home-hero .hpt__body > .hpt__list { flex: 1 1 0; }
        body.page-home #home-hero .hpt--continue .hpt__list { align-content: center; }
        /* One game: keep the card a sensible size instead of a giant banner. */
        body.page-home #home-hero .hpt--solo .hpt__feat { flex: none; width: min(100%, 460px); }
    }
}
@media (prefers-reduced-motion: reduce) {
    body.page-home #home-hero .hpt__feat, body.page-home #home-hero .hpt__art img,
    body.page-home #home-hero .hpt__fcta, body.page-home #home-hero .hpt__feat::before { transition: none; }
    body.page-home #home-hero .hpt__feat:hover, body.page-home #home-hero .hpt__feat:focus-visible,
    body.page-home #home-hero .hpt__feat:hover .hpt__art img,
    body.page-home #home-hero .hpt__feat:hover .hpt__fcta,
    body.page-home #home-hero .hpt--continue .hpt__row:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE PASS — no cropped artwork, readable text on phones.
   (Measured page by page at 320–1920px; see the notes per rule.)
   ════════════════════════════════════════════════════════════════ */

/* ── Hero spotlight, phones (≤640px) ──
   The artwork used to fill the whole fixed-height slide (cover), cutting
   ~40% of it off, with the text printed over it. Now each slide is a
   card: the art on top at its own 512×310 shape (whole, nothing cut),
   the text below it. The slides are stacked in one grid cell instead of
   absolutely positioned, so the hero is as tall as its tallest slide and
   the crossfade (opacity on .is-on) works as before. */
@media (max-width: 640px) {
    body.page-home #home-hero .hh-spot { height: auto; display: grid; }
    body.page-home #home-hero .hh-slide {
        position: relative; inset: auto; grid-area: 1 / 1;
        display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; padding: 0 0 34px;
    }
    body.page-home #home-hero .hh-slide__bg {
        position: relative; inset: auto; z-index: 0;
        width: 100%; aspect-ratio: 512 / 310; overflow: hidden;
    }
    body.page-home #home-hero .hh-slide__bg img,
    body.page-home #home-hero .hh-slide--banner .hh-slide__bg img {
        object-fit: contain; filter: none; transform: none; animation: none;
    }
    /* Soft fade from the bottom of the art into the slide colour. */
    body.page-home #home-hero .hh-slide__bg::after {
        content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
        background: linear-gradient(180deg, rgba(20, 22, 44, 0), #14162c);
    }
    body.page-home #home-hero .hh-slide::before,
    body.page-home #home-hero .hh-slide--banner::before { display: none; }
    body.page-home #home-hero .hh-slide__body,
    body.page-home #home-hero .hh-slide--banner .hh-slide__body {
        position: relative; z-index: 1;
        gap: 6px; margin-top: -18px; padding: 0 16px;
    }
}

/* ── Choose Your Vibe GIFs ──
   Fit edge-to-edge in the container with no left/right padding or letterboxing. */
body.page-home .hvibe__icon--gif {
    padding: 0;
    overflow: hidden;
    width: 100px;
    height: auto;
    aspect-ratio: 16 / 9;
}
body.page-home .hvibe__icon--gif img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    padding: 0;
    margin: 0;
}
@media (max-width: 1024px) { body.page-home .hvibe__icon--gif { width: 88px; } }
@media (max-width: 600px)  { body.page-home .hvibe__icon--gif { width: 80px; height: auto; } }

/* ── Game Worlds cards ──
   The art box was 58% of the card × its full height — a different shape
   at every width, so the art was cropped. It now keeps the art's own
   512×310 shape at the card's height. */
body.page-home #game-worlds .gw-card__art { width: auto; height: 100%; aspect-ratio: 512 / 310; }

/* ── Phones: nothing under 12px in the hero tiles ── */
@media (max-width: 600px) {
    body.page-home #home-hero .hdc .hh-clock__cap { font-size: max(10px, calc(var(--dw) * .36)); }
    body.page-home #home-hero .hdc__badge-text   { font-size: max(11px, calc(var(--dw) * .46)); }
    body.page-home #home-hero .hdc__play         { font-size: max(13px, calc(var(--dw) * .5)); }
    body.page-home #home-hero .hdc__gdesc        { font-size: 12.5px; }
    body.page-home #home-hero .hdc__pill,
    body.page-home #home-hero .hdc__pill span,
    body.page-home #home-hero .hdc__pill a       { font-size: 12px; }
    body.page-home #home-hero .hpt__count.hh-count { font-size: 12px; }
}

/* =========================================================
   AD CARD IN HORIZONTAL RAILS (.hcard--ad)
   Exact same dimensions, aspect-ratio (512/310), border-radius, and hover lift as game cards.
========================================================= */
.hcard--ad .hcard__inner {
    background: #141824 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
}
.hcard--ad .hcard__media {
    aspect-ratio: 512 / 310 !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #131722 0%, #1e2436 100%) !important;
    border-radius: 10px !important;
    display: block !important;
}
.hcard--ad .hcard__media ins.adsbygoogle {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    display: block !important;
    min-height: 0 !important;
}
.hcard-ad-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: linear-gradient(135deg, #131722 0%, #1e2436 100%) !important;
}
.hcard-ad-logo {
    display: block !important;
    height: 42px !important;
    max-height: 42px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)) !important;
    margin: 0 auto !important;
}
.hcard-ad-tag {
    display: block !important;
    align-self: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6) !important;
}
.hcard-ad-icons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
}
.hcard-ad-icon-link {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: transform .15s ease !important;
    flex-shrink: 0 !important;
}
.hcard-ad-icon-link:hover {
    transform: scale(1.15) !important;
}
.hcard-ad-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}