.coin-chip {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 6px 0 8px;
    color: #16324a;
    background: #fff4d4;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
}
.coin-chip strong { font-size: .78rem; }
.coin-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe38a, #e8ad36 55%, #c98a16);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.4);
}
.coin-add {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #2f6ff2;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1;
}
.brand-book { display: none; }
.home-mobile { display: none; }

@media (min-width: 821px) {
    .coin-chip { display: inline-flex; background: #ffe9b0; }
}

@media (max-width: 820px) {
    .home-desktop { display: none !important; }
    .home-mobile { display: block; background: #fff; padding-bottom: 76px; }
    .page-home,
    .page-home body { background: #fff; }

    .page-home .site-header {
        color: #f5d77a;
        background: #071528;
        box-shadow: none;
        border-bottom: 0;
    }
    .page-home .header-inner {
        min-height: 62px;
        padding: 6px 12px 6px 10px;
        gap: 8px;
    }
    .page-home .brand { gap: 8px; }
    .page-home .brand-mark {
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        filter: none;
    }
    .page-home .brand-emoji { display: none; }
    .page-home .brand-book {
        display: block;
        width: 36px;
        height: 36px;
    }
    .page-home .brand-copy { color: #f0c75a; }
    .page-home .brand-copy strong {
        font-family: "Playfair Display", serif;
        font-size: .84rem;
        letter-spacing: .05em;
    }
    .page-home .brand-copy > span { font-size: .48rem; letter-spacing: .14em; }
    .page-home .brand-copy small { display: none; }
    .page-home .header-search,
    .page-home .icon-button,
    .page-home .font-button,
    .page-home .profile-chip > span:last-child { display: none !important; }
    .page-home .header-actions { gap: 6px; }
    .page-home .coin-chip {
        display: inline-flex !important;
        order: 1;
        color: #f3c453;
        background: transparent;
        padding: 0 2px;
        gap: 5px;
    }
    .page-home .profile-chip { display: flex !important; order: 2; margin-left: 0; }
    .page-home .menu-button { order: 3; display: block; }
    .page-home .avatar {
        width: 34px;
        height: 34px;
        border: 2px solid #fff;
        background: #e8c4a8;
        color: #5a3a28;
        font-size: .75rem;
    }
    .page-home .menu-button span { background: #fff; }
    .page-home .mobile-menu { background: #071528; }
    .page-home .mobile-menu a { color: #fff; background: #12304c; }

    .bottom-nav {
        color: #9aa3af;
        background: #fff;
        border-top: 1px solid #eef1f4;
        box-shadow: 0 -6px 18px rgba(16, 32, 48, .06);
        min-height: 70px;
        padding: 6px 4px max(8px, env(safe-area-inset-bottom));
    }
    .bottom-nav a {
        min-height: 54px;
        gap: 3px;
        color: #9aa3af;
        font-size: .58rem;
        font-weight: 700;
    }
    .bottom-nav a svg { width: 22px; height: 22px; }
    .bottom-nav a.active { color: #10243a; }
    .page-home .site-footer { display: none; }

    .mh { width: 100%; overflow-x: hidden; background: #fff; color: #1a2744; }
    .mh-hero {
        position: relative;
        overflow: hidden;
        background: #c8e8f4;
    }
    .mh-banner {
        display: block;
        width: 100%;
        height: auto;
    }

    .mh-cats {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        margin-top: 10px;
        padding: 0 8px 6px;
    }
    .mh-cat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        color: #6b7280;
        font-weight: 800;
    }
    .mh-cat-ico {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        background: #f3f4f6;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(16,32,48,.06);
    }
    .mh-cat-ico svg { width: 22px; height: 22px; }
    .mh-cat small { font-size: .5rem; letter-spacing: -.02em; }
    .mh-cat.is-active { color: #10243a; }
    .mh-cat.is-active .mh-cat-ico { color: #fff; background: #10243a; }

    .mh-block { padding: 10px 14px 4px; }
    .mh-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .mh-head h2 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        color: #1a2744;
        font-size: .95rem;
        font-weight: 800;
    }
    .mh-head-ico { font-size: .95rem; }
    .mh-head a {
        color: #9aa3af;
        font-size: .7rem;
        font-weight: 700;
    }
    .mh-head b { font-size: .95rem; }

    .mh-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .mh-feature {
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(16,32,48,.08);
    }
    .mh-feature-art { height: 92px; }
    .mh-feature-art svg { display: block; width: 100%; height: 92px; }
    .mh-feature-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 58px;
        padding: 8px 10px 9px;
        background: #fff;
    }
    .mh-feature-bar strong {
        display: block;
        color: #1a2744;
        font-size: .68rem;
        font-weight: 800;
        line-height: 1.25;
    }
    .mh-feature-bar small { color: #9aa3af; font-size: .52rem; }
    .mh-feature-bar i {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        color: #7a5a12;
        background: #f2c44c;
        border-radius: 50%;
        font-style: normal;
        font-weight: 800;
    }

    .mh-tiles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 6px;
        padding-bottom: 8px;
    }
    .mh-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 8px 4px 6px;
        color: #1a2744;
        background: #fff;
        border-radius: 16px;
    }
    .mh-tile-art {
        width: 100%;
        max-width: 96px;
        height: 64px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: #f7f8fa;
        box-shadow: inset 0 0 0 1px #f0f1f4;
    }
    .mh-tile-art svg { width: 78px; height: 60px; }
    .mh-tile strong {
        min-height: 2.3em;
        color: #1a2744;
        font-size: .58rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
    }
}

/* Full game artwork, including the title printed on each supplied PNG. */
.home-game-png { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-coming-soon { display: block; width: fit-content; margin: 6px auto 0; padding: 3px 10px; border-radius: 20px; background: #fff3d4; color: #805b16; font-size: 11px; font-weight: 600; }
@media (max-width: 820px) {
    .mh-feature-art { height: auto; aspect-ratio: 1.23; padding: 6px; background: #f8fafc; }
    .mh-tile .mh-tile-art { max-width: none; height: auto; aspect-ratio: 1.23; border-radius: 0; background: transparent; box-shadow: none; }
    .mh-tile .home-coming-soon { font-size: 10px; }
}