body:has(.hk-app-host) .content.hk-app-host#ajaxer {
    inset: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    scrollbar-color: #927d55 transparent !important;
    scrollbar-gutter: stable !important
}

body:has(.hk-app-host) .content.hk-app-host#ajaxer > .hk-app-page {
    display: flow-root !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    overscroll-behavior: initial !important;
    touch-action: pan-y !important
}

body:has(.hk-app-host) .content.hk-app-host#ajaxer .hk-app-wrap {
    display: flow-root !important;
    width: min(100% - 32px, 1160px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 22px 0 calc(34px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important
}

body:has(.hk-app-host) .content.hk-app-host#ajaxer .hk-app-page,
body:has(.hk-app-host) .content.hk-app-host#ajaxer .hk-app-page * {
    box-sizing: border-box !important
}

body:has(.hk-app-host) .hk-app-page {
    min-height: 100dvh !important;
    background: radial-gradient(ellipse at 18% 0%, #1b544632, transparent 42%), linear-gradient(145deg, #081611, #0b171b 48%, #111620) !important;
    color: #edf2e8 !important;
    font-family: "iran", IRANSans, IRANSansWeb, Tahoma, sans-serif !important;
    direction: rtl !important
}

body:has(.hk-app-host) .hk-app-page .hk-page-top {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important
}

body:has(.hk-app-host) .hk-wordmark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #f5edda !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: .03em !important
}

body:has(.hk-app-host) .hk-wordmark small {
    display: block !important;
    margin-top: 2px !important;
    color: #83c7b1 !important;
    font-size: 9px !important;
    letter-spacing: .16em !important
}

body:has(.hk-app-host) .hk-wordmark-mark {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid #ddc37b7a !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #1b3a32, #111d20) !important;
    color: #f0d581 !important;
    font-size: 21px !important;
    box-shadow: inset 0 1px #fff2 !important
}

body:has(.hk-app-host) .hk-back-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 9px 14px !important;
    border: 1px solid #ffffff22 !important;
    border-radius: 13px !important;
    background: #ffffff09 !important;
    color: #e9dfc9 !important;
    font: 800 13px/1.2 inherit !important;
    cursor: pointer !important;
    transition: background .18s, border-color .18s, transform .18s !important
}

body:has(.hk-app-host) .hk-back-action:hover {
    transform: translateY(-1px) !important;
    border-color: #d4bd7c88 !important;
    background: #d4bd7c12 !important
}

body:has(.hk-app-host) .hk-page-kicker {
    display: block !important;
    margin-bottom: 7px !important;
    color: #8bd4b5 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .13em !important
}

body:has(.hk-app-host) .hk-page-title {
    margin: 0 !important;
    color: #fff4d8 !important;
    font-size: clamp(23px, 4vw, 34px) !important;
    font-weight: 950 !important;
    line-height: 1.3 !important
}

body:has(.hk-app-host) .hk-page-subtitle {
    margin: 5px 0 0 !important;
    color: #aabbb1 !important;
    font-size: 13px !important;
    line-height: 1.8 !important
}

body:has(.hk-app-host) .hk-panel {
    position: relative !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: clamp(15px, 2.4vw, 23px) !important;
    overflow: visible !important;
    border: 1px solid #b8a77731 !important;
    border-radius: 21px !important;
    background: linear-gradient(145deg, #14241fee, #10191ceb) !important;
    box-shadow: 0 12px 34px #0003, inset 0 1px #ffffff10 !important;
    color: #ecf0e6 !important
}

body:has(.hk-app-host) .hk-panel h2 {
    color: #f7e8bd !important
}

body:has(.hk-app-host) .hk-stat-grid {
    display: grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important
}

body:has(.hk-app-host) .hk-stat {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #ffffff1b !important;
    border-radius: 16px !important;
    background: #ffffff08 !important
}

body:has(.hk-app-host) .hk-stat-icon {
    font-size: 22px !important
}

body:has(.hk-app-host) .hk-stat small {
    display: block !important;
    color: #aabbb1 !important;
    font-size: 11px !important
}

body:has(.hk-app-host) .hk-stat strong {
    display: block !important;
    margin-top: 3px !important;
    color: #f5e6bd !important;
    font-size: 17px !important
}

body:has(.hk-app-host) .hk-form {
    display: grid !important;
    gap: 14px !important;
    width: 100% !important
}

body:has(.hk-app-host) .hk-field {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #d6e2d8 !important;
    font-size: 12px !important;
    font-weight: 800 !important
}

body:has(.hk-app-host) .hk-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 10px 13px !important;
    border: 1px solid #ffffff24 !important;
    border-radius: 13px !important;
    background: #081310 !important;
    color: #fff5de !important;
    font: 600 14px/1.5 inherit !important;
    outline: none !important
}

body:has(.hk-app-host) .hk-input:focus {
    border-color: #78c8aa !important;
    box-shadow: 0 0 0 3px #78c8aa24 !important
}

body:has(.hk-app-host) .hk-form-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 48px !important;
    padding: 11px 19px !important;
    border: 1px solid #d8c17c !important;
    border-radius: 13px !important;
    background: linear-gradient(110deg, #d8c17c, #a88548) !important;
    color: #181812 !important;
    font-weight: 950 !important;
    cursor: pointer !important
}

body:has(.hk-app-host) .hk-form-submit:disabled {
    opacity: .58 !important;
    cursor: wait !important
}

body:has(.hk-app-host) .hk-back-action:focus-visible,
body:has(.hk-app-host) .hk-form-submit:focus-visible,
body:has(.hk-app-host) .hk-input:focus-visible {
    outline: 2px solid #83d8b6 !important;
    outline-offset: 3px !important
}

/* Salon */
body:has(.hk-home-hero) .hk-app-page {
    background: radial-gradient(ellipse at 76% 0%, #184e3d52, transparent 37%), radial-gradient(ellipse at 0% 55%, #243b312d, transparent 35%), linear-gradient(145deg, #07110f, #0b141a 56%, #11141b) !important
}

body:has(.hk-home-hero) .hk-app-wrap {
    width: min(100% - 36px, 1200px) !important;
    padding-top: clamp(14px, 2.4vw, 28px) !important
}

body:has(.hk-home-hero) .hk-page-top {
    min-height: 48px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    z-index: 80 !important
}

body:has(.hk-home-hero) .hk-side-menu[hidden] {
    display: none !important
}

body:has(.hk-home-hero) .hk-side-menu > a,
body:has(.hk-home-hero) .hk-side-menu > button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 10px 12px !important;
    border: 1px solid #ffffff15 !important;
    border-radius: 12px !important;
    background: #ffffff08 !important;
    color: #e9eddf !important;
    text-align: right !important;
    text-decoration: none !important;
    font: 750 12px/1.45 inherit !important;
    cursor: pointer !important
}

body:has(.hk-home-hero) .hk-side-menu > a:hover,
body:has(.hk-home-hero) .hk-side-menu > button:hover {
    border-color: #d5bc7866 !important;
    background: #d5bc7812 !important
}

body:has(.hk-home-hero) .hk-home-hero {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(245px, 300px) !important;
    align-items: stretch !important;
    gap: clamp(17px, 2.5vw, 30px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(19px, 3vw, 34px) !important;
    overflow: visible !important;
    border: 1px solid #ad9e704e !important;
    border-radius: 28px !important;
    background: linear-gradient(140deg, #172e26f5, #101a20f7 58%, #171922f5) !important;
    box-shadow: 0 24px 65px #0006, inset 0 1px #ffffff1c !important
}

body:has(.hk-home-hero) .hk-home-welcome {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: visible !important
}

body:has(.hk-home-hero) .hk-home-welcome > .hk-eyebrow {
    display: inline-flex !important;
    align-self: flex-start !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 0 10px !important;
    padding: 6px 10px !important;
    border: 1px solid #8bd4b546 !important;
    border-radius: 99px !important;
    background: #8bd4b50d !important;
    color: #9bdec1 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important
}

body:has(.hk-home-hero) .hk-home-welcome h1 {
    margin: 0 !important;
    color: #fff1d0 !important;
    font-size: clamp(28px, 4.2vw, 44px) !important;
    font-weight: 950 !important;
    line-height: 1.23 !important
}

body:has(.hk-home-hero) .hk-home-name {
    display: block !important;
    margin-top: 4px !important;
    color: #d9bd79 !important;
    font-size: .75em !important
}

body:has(.hk-home-hero) .hk-home-welcome > p {
    max-width: 600px !important;
    margin: 10px 0 0 !important;
    color: #b6c4bb !important;
    font-size: 13px !important;
    line-height: 1.9 !important
}

body:has(.hk-home-hero) .hk-game-launch-grid {
    display: grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 0 !important;
    overflow: visible !important
}

body:has(.hk-home-hero) .hk-game-launch {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
    min-height: 158px !important;
    padding: 17px !important;
    overflow: hidden !important;
    border: 1px solid #ffffff24 !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, #1c302c, #111c20) !important;
    color: #f6f0df !important;
    text-align: right !important;
    box-shadow: 0 11px 25px #0003, inset 0 1px #ffffff18 !important;
    cursor: pointer !important;
    transition: transform .2s ease, border-color .2s ease, filter .2s ease !important
}

body:has(.hk-home-hero) .hk-game-launch:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    width: 4px !important;
    background: #8bc8a9 !important;
    opacity: .8 !important
}

body:has(.hk-home-hero) .hk-game-launch--cards {
    background: linear-gradient(140deg, #3c3322, #1b2925 76%) !important;
    border-color: #d7bd785c !important
}

body:has(.hk-home-hero) .hk-game-launch--warsix {
    background: linear-gradient(140deg, #173b30, #11231f) !important
}

body:has(.hk-home-hero) .hk-game-launch--rps {
    background: linear-gradient(140deg, #18334a, #14212c) !important
}

body:has(.hk-home-hero) .hk-game-launch--tank {
    background: linear-gradient(140deg, #3b2925, #211c1d) !important
}

body:has(.hk-home-hero) .hk-game-launch--knight {
    background: linear-gradient(140deg, #263d36, #1b2724) !important
}

body:has(.hk-home-hero) .hk-game-launch:hover {
    transform: translateY(-3px) !important;
    border-color: #dfc477aa !important;
    filter: brightness(1.08) !important
}

body:has(.hk-home-hero) .hk-game-launch:active {
    transform: translateY(-1px) scale(.995) !important
}

body:has(.hk-home-hero) .hk-game-launch-art {
    position: absolute !important;
    top: 14px !important;
    left: 15px !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 1px solid #ffffff28 !important;
    border-radius: 14px !important;
    background: #050b0b55 !important;
    color: #f4d783 !important;
    font-size: 26px !important;
    filter: none !important
}

body:has(.hk-home-hero) .hk-game-launch-label {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    align-self: flex-start !important;
    max-width: calc(100% - 48px) !important;
    padding: 5px 9px !important;
    border: 1px solid #ffffff24 !important;
    border-radius: 99px !important;
    background: #07100d66 !important;
    color: #c8d7cd !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    white-space: nowrap !important
}

body:has(.hk-home-hero) .hk-game-launch > div {
    position: relative !important;
    margin-top: auto !important;
    min-width: 0 !important
}

body:has(.hk-home-hero) .hk-game-launch h2 {
    margin: 0 !important;
    color: #fff1d0 !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    line-height: 1.45 !important;
    font-weight: 950 !important
}

body:has(.hk-home-hero) .hk-game-launch p {
    margin: 4px 0 0 !important;
    color: #bec9be !important;
    font-size: 11px !important;
    line-height: 1.7 !important
}

body:has(.hk-home-hero) .hk-game-launch-cta {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 9px !important;
    margin-top: 2px !important;
    color: #e4d091 !important;
    font-size: 11px !important;
    font-weight: 900 !important
}

body:has(.hk-home-hero) .hk-game-launch-cta b {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    background: #ffffff13 !important;
    color: inherit !important
}

body:has(.hk-home-hero) .hk-home-account {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important
}

body:has(.hk-home-hero) .hk-home-account .hk-home-player {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 13px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 116px !important;
    padding: 15px !important;
    overflow: hidden !important;
    border: 1px solid #82c9ab3d !important;
    border-radius: 19px !important;
    background: linear-gradient(145deg, #17342d, #101c20) !important;
    color: #f5efd9 !important;
    text-align: right !important;
    box-shadow: inset 0 1px #ffffff16 !important;
    cursor: pointer !important
}

body:has(.hk-home-hero) .hk-home-player > img {
    flex: 0 0 66px !important;
    width: 66px !important;
    height: 66px !important;
    object-fit: cover !important;
    border: 2px solid #d6bd7c !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 4px #d6bd7c1c !important
}

body:has(.hk-home-hero) .hk-home-player > span {
    display: grid !important;
    justify-items: start !important;
    gap: 3px !important;
    min-width: 0 !important
}

body:has(.hk-home-hero) .hk-home-player small {
    color: #9bb5a8 !important;
    font-size: 10px !important
}

body:has(.hk-home-hero) .hk-home-player strong {
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fff0cc !important;
    font-size: 17px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important
}

body:has(.hk-home-hero) .hk-home-player b {
    color: #92dabb !important;
    font-size: 10px !important
}

body:has(.hk-home-hero) .hk-home-player > i {
    position: absolute !important;
    top: 13px !important;
    left: 14px !important;
    color: #d9bd79 !important;
    font-size: 17px !important
}

body:has(.hk-home-hero) .hk-home-wallet {
    display: grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important
}

body:has(.hk-home-hero) .hk-wallet-chip {
    display: grid !important;
    grid-template-columns:32px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 65px !important;
    padding: 10px !important;
    border: 1px solid #ffffff1d !important;
    border-radius: 15px !important;
    background: #ffffff08 !important;
    color: #f4ead1 !important;
    text-align: right !important;
    cursor: pointer !important
}

body:has(.hk-home-hero) .hk-wallet-chip > span:first-child {
    font-size: 20px !important
}

body:has(.hk-home-hero) .hk-wallet-chip > span:nth-child(2) {
    min-width: 0 !important
}

body:has(.hk-home-hero) .hk-wallet-chip small {
    display: block !important;
    color: #9cb1a5 !important;
    font-size: 9px !important
}

body:has(.hk-home-hero) .hk-wallet-chip strong {
    display: block !important;
    margin-top: 2px !important;
    color: #f6e8c4 !important;
    font-size: 15px !important
}

body:has(.hk-home-hero) .hk-wallet-chip > b {
    display: grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid #ffffff20 !important;
    border-radius: 50% !important;
    color: #9cdbb9 !important;
    font-size: 15px !important
}

body:has(.hk-home-hero) .hk-invite-tools {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 !important;
    padding: 15px 18px !important;
    overflow: visible !important;
    border: 1px solid #ffffff1c !important;
    border-radius: 18px !important;
    background: linear-gradient(110deg, #12231e, #10191d) !important;
    box-shadow: inset 0 1px #ffffff0c !important
}

body:has(.hk-home-hero) .hk-invite-entry {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 !important
}

body:has(.hk-home-hero) .hk-invite-entry > label {
    color: #eee1be !important;
    font-size: 12px !important;
    font-weight: 900 !important
}

body:has(.hk-home-hero) .hk-invite-entry > div {
    display: flex !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important
}

body:has(.hk-home-hero) .hk-invite-entry input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid #ffffff25 !important;
    border-radius: 12px !important;
    background: #09130f !important;
    color: #fff3dc !important;
    font: 700 13px/1.4 inherit !important;
    text-align: center !important;
    direction: ltr !important
}

body:has(.hk-home-hero) .hk-invite-entry button {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 17px !important;
    border: 1px solid #dac27d !important;
    border-radius: 12px !important;
    background: linear-gradient(120deg, #d8c17c, #9d7e42) !important;
    color: #1b1a12 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    cursor: pointer !important
}

body:has(.hk-home-hero) .hk-invite-entry small {
    color: #9eaea5 !important;
    font-size: 10px !important;
    line-height: 1.7 !important
}

body:has(.hk-home-hero) .hk-save-prompt {
    position: fixed !important;
    z-index: 60 !important;
    right: 16px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(560px, calc(100vw - 32px)) !important;
    margin-inline: auto !important;
    padding: 12px 14px !important;
    border: 1px solid #d3bd7a66 !important;
    border-radius: 16px !important;
    background: #10201df2 !important;
    box-shadow: 0 12px 35px #0008 !important;
    color: #ece5d2 !important
}

body:has(.hk-home-hero) .hk-save-prompt[hidden] {
    display: none !important
}

body:has(.hk-home-hero) .hk-permission-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 12px 0 !important;
    padding: 14px !important;
    border: 1px solid #ffffff19 !important;
    border-radius: 16px !important;
    background: #101c1b !important;
    color: #e7eadf !important
}

body:has(.hk-home-hero) .hk-permission-card[hidden] {
    display: none !important
}

body:has(.hk-home-hero) .hk-permission-card p {
    margin: 4px 0 !important;
    color: #aab7ac !important;
    font-size: 11px !important;
    line-height: 1.6 !important
}

body:has(.hk-home-hero) main.hk-app-page > .hk-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 14px 0 !important;
    overflow: visible !important;
    transform: none !important
}

body:has(.hk-home-hero) .hk-stat-grid {
    margin-top: 12px !important
}

body:has(.hk-home-hero) #hk-home-extras-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 14px !important;
    background: #050a0be8 !important;
    backdrop-filter: blur(8px) !important
}

body:has(.hk-home-hero) #hk-home-extras-modal[hidden] {
    display: none !important
}

body:has(.hk-home-hero) #hk-home-extras-modal .hk-home-extras-card {
    width: min(720px, 100%) !important;
    max-height: min(88dvh, 760px) !important;
    border: 1px solid #cdb77888 !important;
    border-radius: 20px !important;
    background: #111d1b !important;
    color: #f3eddd !important
}

body:has(.hk-home-hero) #hk-home-extras-modal .hk-home-extras-content {
    min-height: 0 !important;
    overflow: auto !important;
    padding: 12px !important;
    overscroll-behavior: contain !important
}

@keyframes hk-app-pop {
    from {
        opacity: 0;
        transform: translateY(-5px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Mobile layout: keep the controls in one row and make all game cards tap-friendly. */
@media (max-width: 760px) {
    body:has(.hk-app-host) .content.hk-app-host#ajaxer .hk-app-wrap {
        width: min(100% - 24px, 640px) !important;
        padding: 12px 0 calc(26px + env(safe-area-inset-bottom)) !important
    }

    body:has(.hk-app-host) .hk-app-page .hk-page-top {
        gap: 10px !important;
        margin-bottom: 13px !important
    }

    body:has(.hk-app-host) .hk-stat-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }

    body:has(.hk-home-hero) .hk-app-wrap {
        width: calc(100% - 22px) !important;
        padding-top: 10px !important
    }

    body:has(.hk-home-hero) .hk-page-top {
        min-height: 44px !important;
        margin-bottom: 10px !important
    }

    body:has(.hk-home-hero) .hk-home-hero {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 13px !important;
        padding: 14px !important;
        border-radius: 21px !important
    }

    body:has(.hk-home-hero) .hk-home-account {
        grid-row: 1 !important;
        grid-template-columns:minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important
    }

    body:has(.hk-home-hero) .hk-home-account .hk-home-player {
        min-height: 65px !important;
        padding: 8px 10px !important;
        gap: 9px !important;
        border-radius: 15px !important
    }

    body:has(.hk-home-hero) .hk-home-player > img {
        flex-basis: 46px !important;
        width: 46px !important;
        height: 46px !important
    }

    body:has(.hk-home-hero) .hk-home-player strong {
        font-size: 13px !important
    }

    body:has(.hk-home-hero) .hk-home-player small {
        font-size: 9px !important
    }

    body:has(.hk-home-hero) .hk-home-player b, body:has(.hk-home-hero) .hk-home-player > i {
        display: none !important
    }

    body:has(.hk-home-hero) .hk-home-wallet {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip {
        grid-template-columns:22px minmax(0, 1fr) !important;
        min-height: 48px !important;
        gap: 5px !important;
        padding: 7px !important;
        border-radius: 12px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip > span:first-child {
        font-size: 16px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip > span:nth-child(2) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip small, body:has(.hk-home-hero) .hk-wallet-chip strong {
        margin: 0 !important;
        font-size: 10px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip > b {
        display: none !important
    }

    body:has(.hk-home-hero) .hk-home-welcome {
        grid-row: 2 !important
    }

    body:has(.hk-home-hero) .hk-home-welcome h1 {
        font-size: 27px !important
    }

    body:has(.hk-home-hero) .hk-home-welcome > p {
        margin-top: 6px !important;
        font-size: 11px !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 14px !important
    }

    body:has(.hk-home-hero) .hk-game-launch {
        min-height: 140px !important;
        padding: 11px !important;
        border-radius: 15px !important
    }

    body:has(.hk-home-hero) .hk-game-launch-art {
        top: 9px !important;
        left: 9px !important;
        width: 33px !important;
        height: 33px !important;
        border-radius: 11px !important;
        font-size: 20px !important
    }

    body:has(.hk-home-hero) .hk-game-launch-label {
        max-width: calc(100% - 37px) !important;
        padding: 4px 6px !important;
        font-size: 8px !important
    }

    body:has(.hk-home-hero) .hk-game-launch h2 {
        font-size: 14px !important
    }

    body:has(.hk-home-hero) .hk-game-launch p {
        font-size: 9px !important
    }

    body:has(.hk-home-hero) .hk-game-launch-cta {
        font-size: 9px !important
    }

    body:has(.hk-home-hero) .hk-invite-tools {
        margin: 10px 0 !important;
        padding: 11px !important;
        border-radius: 15px !important
    }

    body:has(.hk-home-hero) .hk-invite-entry > div {
        display: grid !important;
        grid-template-columns:minmax(0, 1fr) auto !important;
        gap: 6px !important
    }

    body:has(.hk-home-hero) .hk-invite-entry input {
        height: 44px !important;
        font-size: 12px !important
    }

    body:has(.hk-home-hero) .hk-invite-entry button {
        min-height: 44px !important;
        padding-inline: 10px !important;
        font-size: 10px !important
    }

    body:has(.hk-home-hero) .hk-invite-entry small {
        font-size: 9px !important
    }

    }

@media (max-width: 380px) {
    body:has(.hk-home-hero) .hk-home-account {
        grid-template-columns:minmax(0, 1fr) !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid {
        grid-template-columns:minmax(0, 1fr) !important
    }

    body:has(.hk-home-hero) .hk-game-launch {
        min-height: 126px !important
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.hk-app-host) *, body:has(.hk-app-host) *:before, body:has(.hk-app-host) *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

/* Mobile home: remove the reserved RTL scrollbar gutter and keep the full page width. */
@media (max-width: 760px) {
    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer {
        width: 100vw !important;
        scrollbar-gutter: auto !important;
        scrollbar-width: none !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer::-webkit-scrollbar {
        display: none !important;
        width: 0 !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page {
        width: 100% !important;
        padding: 0 !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
        width: calc(100% - 16px) !important;
        max-width: 640px !important;
        padding-top: calc(8px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important
    }

    body:has(.hk-home-hero) .hk-home-hero {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: clamp(12px, 3.5vw, 18px) !important
    }

    body:has(.hk-home-hero) .hk-home-account {
        grid-row: 1 !important;
        grid-template-columns:minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 8px !important
    }

    body:has(.hk-home-hero) .hk-home-account .hk-home-player {
        width: 100% !important;
        min-height: 76px !important;
        padding: 10px 12px !important
    }

    body:has(.hk-home-hero) .hk-home-player > img {
        flex-basis: 50px !important;
        width: 50px !important;
        height: 50px !important
    }

    body:has(.hk-home-hero) .hk-home-player b, body:has(.hk-home-hero) .hk-home-player > i {
        display: initial !important
    }

    body:has(.hk-home-hero) .hk-home-player > i {
        top: 8px !important;
        left: 10px !important
    }

    body:has(.hk-home-hero) .hk-home-wallet {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip {
        grid-template-columns:26px minmax(0, 1fr) 20px !important;
        min-height: 54px !important;
        padding: 8px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip > span:nth-child(2) {
        display: block !important;
        text-align: right !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip small, body:has(.hk-home-hero) .hk-wallet-chip strong {
        display: block !important;
        margin-top: 2px !important;
        font-size: 10px !important
    }

    body:has(.hk-home-hero) .hk-wallet-chip > b {
        display: grid !important
    }

    body:has(.hk-home-hero) .hk-home-progress {
        display: grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important
    }

    body:has(.hk-home-hero) .hk-home-stat {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-width: 0 !important;
        min-height: 58px !important;
        padding: 9px 11px !important;
        border: 1px solid #ffffff20 !important;
        border-radius: 14px !important;
        background: #ffffff08 !important
    }

    body:has(.hk-home-hero) .hk-home-stat > span:last-child {
        display: grid !important;
        justify-items: end !important;
        min-width: 0 !important
    }

    body:has(.hk-home-hero) .hk-home-stat small {
        font-size: 9px !important
    }

    body:has(.hk-home-hero) .hk-home-stat strong {
        font-size: 14px !important
    }

    body:has(.hk-home-hero) .hk-home-welcome {
        grid-row: 2 !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid {
        display: grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 1fr !important;
        gap: 10px !important;
        overflow: visible !important;
        padding: 0 !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch {
        display: flex !important;
        flex: initial !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 166px !important;
        max-height: none !important;
        padding: 12px !important
    }

    body:has(.hk-home-hero) .hk-game-launch h2 {
        font-size: clamp(13px, 3.7vw, 17px) !important;
        overflow-wrap: anywhere !important
    }

    body:has(.hk-home-hero) .hk-game-launch p {
        font-size: clamp(9px, 2.7vw, 11px) !important;
        overflow-wrap: anywhere !important
    }

    body:has(.hk-home-hero) .hk-game-slider-hint {
        gap: 8px !important;
        flex-wrap: wrap !important
    }
}

@media (max-width: 480px) {
    body:has(.hk-home-hero) .hk-game-launch-grid {
        grid-template-columns:minmax(0, 1fr) !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch {
        min-height: 138px !important
    }
}

/* Final shell contract: html/body never scroll; AJAX content owns vertical scroll. */
html:has(body .content.hk-app-host#ajaxer), body:has(.content.hk-app-host#ajaxer) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a58d58 transparent !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page {
    display: flow-root !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
    display: flow-root !important;
    width: min(100% - 32px, 1160px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 18px 0 calc(34px + env(safe-area-inset-bottom)) !important;
    overflow: visible !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page .hk-panel {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    overflow: visible !important
}

@media (max-width: 760px) {
    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page {
        padding: 0 10px !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
        width: 100% !important;
        padding-top: 10px !important
    }
}

/* Final override for the salon scroller: keep the route page in normal flow. */
html:has(body .content.hk-app-host#ajaxer), body:has(.content.hk-app-host#ajaxer) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: auto !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-width: auto !important;
    scrollbar-gutter: stable !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page {
    position: relative !important;
    display: flow-root !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    touch-action: pan-y !important
}

body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
    display: flow-root !important;
    width: min(100% - 32px, 1240px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    overflow: visible !important
}

@media (max-width: 760px) {
    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
        width: calc(100% - 20px) !important
    }
}

/* Mobile alignment, readable navigation, and predictable menu placement. */
body:has(.hk-home-hero) .hk-page-top {
    position: relative !important
}

body:has(.hk-home-hero) .hk-side-menu > a,
body:has(.hk-home-hero) .hk-side-menu > button {
    display: grid !important;
    grid-template-columns:28px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    justify-content: initial !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: right !important;
    writing-mode: horizontal-tb !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important
}

body:has(.hk-home-hero) .hk-side-menu-icon {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 8px !important;
    background: #ffffff10 !important;
    color: #d8c17c !important
}

body:has(.hk-home-hero) .hk-side-menu-label {
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
    line-height: 1.5 !important
}

body:has(.hk-home-hero) .hk-side-menu-arrow {
    justify-self: end !important;
    color: #8bd4b5 !important
}

body:has(.hk-home-hero) .hk-nav-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important
}

body:has(.hk-home-hero) .hk-nav-card {
    display: grid !important;
    grid-template-columns:40px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important
}

body:has(.hk-home-hero) .hk-nav-card--knight {
    border-color: #d1a64f66 !important;
    background: linear-gradient(145deg, #203b34, #142321) !important
}

@media (max-width: 700px) {
    }

body:has(.hk-home-hero) .hk-nav-card > span:nth-child(2) {
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important
}

body:has(.hk-home-hero) .hk-nav-card strong, body:has(.hk-home-hero) .hk-nav-card small {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
    line-height: 1.5 !important
}

body:has(.hk-home-hero) .hk-nav-card .hk-nav-arrow {
    margin: 0 !important;
    justify-self: end !important
}

@media (max-width: 760px) {
    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        scrollbar-gutter: auto !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        overflow-x: clip !important
    }

    body:has(.content.hk-app-host#ajaxer) .content.hk-app-host#ajaxer > .hk-app-page > .hk-app-wrap {
        width: min(640px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    body:has(.hk-home-hero) .hk-home-hero, body:has(.hk-home-hero) .hk-page-top {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important
    }

    body:has(.hk-home-hero) .hk-nav-grid {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 8px !important
    }

    body:has(.hk-home-hero) .hk-nav-card {
        min-height: 70px !important;
        padding: 11px !important
    }

    body:has(.hk-app-host) .hk-page-top {
        min-width: 0 !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important
    }

    body:has(.hk-app-host) .hk-page-top > div {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important
    }

    body:has(.hk-app-host) .hk-page-title, body:has(.hk-app-host) .hk-page-subtitle {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important
    }

    body:has(.hk-app-host) .hk-panel, body:has(.hk-app-host) .hk-form, body:has(.hk-app-host) .hk-stat-grid {
        min-width: 0 !important;
        max-width: 100% !important
    }
}

@media (max-width: 420px) {
    body:has(.hk-home-hero) .hk-home-hero {
        padding: 12px !important
    }

    body:has(.hk-home-hero) .hk-home-account {
        grid-template-columns:minmax(0, 1fr) !important
    }

    body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch {
        flex-basis: calc(100vw - 40px) !important
    }
}

/* Keep the home menu attached to its trigger on every viewport. */
body:has(.hk-home-hero) .hk-page-top {
    position: relative !important;
    z-index: 10000 !important;
    overflow: visible !important;
}

body:has(.hk-home-hero) .hk-app-wrap,
body:has(.hk-home-hero) .hk-app-page {
    overflow: visible !important;
}

/* Home menu: single requested placement rule. */
body:has(.hk-home-hero) .hk-side-menu:not([hidden]) {
    position: absolute;
    top: calc(5% + 8px) !important;
    bottom: unset !important;
    left: 10% !important;
    right: unset !important;
    z-index: 10001 !important;
    display: grid !important;
    width: min(340px, calc(100vw - 28px)) !important;
    max-height: min(72vh, 620px) !important;
    overflow-y: auto !important;
}

body:has(.hk-home-hero) .hk-game-launch--knight {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
body:has(.hk-home-hero) .hk-game-launch--knight > .hk-knight-card-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    opacity: .38 !important;
    pointer-events: none !important;
}
body:has(.hk-home-hero) .hk-game-launch--knight::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(115deg, #061410dd, #0b1e1a88 55%, #071016cc) !important;
}
body:has(.hk-home-hero) .hk-game-launch--knight > *:not(.hk-knight-card-video) {
    position: relative !important;
    z-index: 2 !important;
}

/* Responsive game chooser, readable invite codes and phone verification dialog. */
@media (max-width: 760px) {
  body:has(.hk-app-host) .hk-picker-grid { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  body:has(.hk-app-host) .hk-picker-card { width:100% !important; min-width:0 !important; min-height:150px !important; padding:16px !important; }
  body:has(.hk-app-host) .hk-picker-card strong, body:has(.hk-app-host) .hk-picker-card p { overflow-wrap:anywhere !important; }
  body:has(.hk-app-host) .hk-invite-entry > div { flex-wrap:wrap !important; }
  body:has(.hk-app-host) .hk-invite-entry button { flex:1 0 100% !important; }
  body:has(.hk-app-host) .hk-invite-entry input { width:100% !important; }
}
.hk-purchase-phone-modal[hidden] { display:none !important; }
.hk-purchase-phone-modal { position:fixed; inset:0; z-index:20000; display:grid; place-items:center; padding:16px; background:#020a08c9; backdrop-filter:blur(7px); }
.hk-purchase-phone-card { position:relative; width:min(460px,100%); display:grid; gap:10px; padding:24px; border:1px solid #e2c46d; border-radius:24px; background:linear-gradient(145deg,#16392f,#081a15); color:#f6efd8; box-shadow:0 24px 70px #000b; }
.hk-purchase-phone-card h2 { margin:0; color:#ffe39a; font-size:21px; }
.hk-purchase-phone-card p { margin:0 0 6px; color:#c9d8cc; line-height:1.8; }
.hk-purchase-phone-card label { color:#e4d7b5; font-weight:800; font-size:13px; }
.hk-purchase-phone-row { display:flex; gap:8px; min-width:0; }
.hk-purchase-phone-row input { flex:1; min-width:0; height:48px; padding:0 12px; border:1px solid #ffffff30; border-radius:12px; background:#06130f; color:#fff; font:700 15px system-ui; }
.hk-purchase-phone-row button { flex:0 0 auto; min-height:48px; padding:0 14px; border:1px solid #f0d47a; border-radius:12px; background:linear-gradient(130deg,#f2d986,#c29a47); color:#17241d; font-weight:900; cursor:pointer; }
.hk-purchase-phone-row button:disabled { opacity:.6; }
#hk-purchase-phone-status { min-height:24px; color:#a9e6c7; font-weight:700; line-height:1.6; }
.hk-purchase-phone-close { position:absolute; top:9px; left:12px; width:36px; height:36px; border:0; border-radius:50%; background:#ffffff12; color:#f4d987; font-size:26px; cursor:pointer; }
.hk-purchase-phone-icon { color:#f4d987; font-size:25px; }
@media(max-width:420px) { .hk-purchase-phone-card { padding:20px 14px; } .hk-purchase-phone-row { flex-wrap:wrap; } .hk-purchase-phone-row button { flex:1 0 100%; } }
/* Home refresh: horizontal, kinetic game rail with bright, high-contrast cards. */
body:has(.hk-home-hero) .hk-app-page {
    background: radial-gradient(ellipse at 78% 4%, #27795b38, transparent 38%), radial-gradient(ellipse at 8% 72%, #3976542b, transparent 35%), linear-gradient(145deg, #0b1714, #101e22 52%, #171b25) !important;
}
body:has(.hk-home-hero) .hk-home-hero {
    background: radial-gradient(ellipse at 82% 0%, #70d4a51b, transparent 38%), linear-gradient(135deg, #1b382f, #14262a 58%, #1a1e2b) !important;
    border-color: #b8d5b75c !important;
    box-shadow: 0 26px 76px #0007, inset 0 1px #ffffff26 !important;
}
body:has(.hk-home-hero) .hk-game-slider-hint {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important; margin: 22px 0 8px !important; color: #d7e8dc !important;
    font-size: 12px !important; font-weight: 800 !important;
}
body:has(.hk-home-hero) .hk-game-slider-controls { display:flex !important; gap:7px !important; }
body:has(.hk-home-hero) .hk-game-slider-controls button {
    width:38px !important; height:38px !important; border:1px solid #d8c27699 !important; border-radius:13px !important;
    background:linear-gradient(145deg,#254c3e,#12251f) !important; color:#ffe49a !important;
    box-shadow:0 6px 16px #0005,inset 0 1px #fff3 !important; cursor:pointer !important;
    transition:transform .28s cubic-bezier(.2,.8,.2,1), background .25s ease !important;
}
body:has(.hk-home-hero) .hk-game-slider-controls button:hover { transform:translateY(-2px) scale(1.04) !important; background:linear-gradient(145deg,#39705a,#1c3c31) !important; }
body:has(.hk-home-hero) .hk-game-launch-grid {
    display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:14px !important;
    width:100% !important; max-width:none !important; overflow-x:auto !important; overflow-y:hidden !important;
    padding:9px 3px 18px !important; margin:6px 0 0 !important; direction:rtl !important;
    scroll-snap-type:x mandatory !important; scroll-padding-inline:12px !important; overscroll-behavior-inline:contain !important;
    scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid::-webkit-scrollbar { display:none !important; }
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch {
    flex:0 0 clamp(238px,30vw,310px) !important; width:auto !important; min-width:0 !important; min-height:232px !important;
    padding:19px !important; border-radius:23px !important; scroll-snap-align:center !important; scroll-snap-stop:always !important;
    background-color:#203d35 !important; border-color:#d8e5d534 !important;
    box-shadow:0 14px 34px #0005,inset 0 1px #ffffff25 !important;
    transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease,filter .3s ease !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch.is-active { transform:translateY(-3px) scale(1.015) !important; border-color:#e9d27cbb !important; box-shadow:0 19px 42px #0006,0 0 28px #83d9ae1c,inset 0 1px #fff4 !important; }
body:has(.hk-home-hero) .hk-game-launch-label { color:#ecf6ed !important; background:#0918159c !important; border-color:#d3e9d54a !important; }
body:has(.hk-home-hero) .hk-game-launch h2 { color:#fff4d8 !important; text-shadow:0 2px 12px #0005 !important; }
body:has(.hk-home-hero) .hk-game-launch p { color:#d1e1d7 !important; }
body:has(.hk-home-hero) .hk-game-launch-cta { color:#ffe49a !important; font-size:12px !important; }
body:has(.hk-home-hero) .hk-game-launch-art { background:linear-gradient(145deg,#ffffff25,#07130f85) !important; border-color:#ffffff55 !important; box-shadow:0 7px 18px #0004,inset 0 1px #fff4 !important; }
body:has(.hk-home-hero) .hk-home-player, body:has(.hk-home-hero) .hk-wallet-chip, body:has(.hk-home-hero) .hk-home-stat {
    border-color:#c9e7d33b !important; background-color:#ffffff0c !important;
}
@media (max-width:760px) {
    body:has(.hk-home-hero) .hk-home-hero { padding:clamp(13px,3.5vw,20px) !important; }
    body:has(.hk-home-hero) .hk-game-launch-grid { gap:11px !important; margin-top:5px !important; }
    body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch { flex-basis:min(78vw,310px) !important; min-height:204px !important; padding:15px !important; }
    body:has(.hk-home-hero) .hk-game-slider-hint { margin-top:16px !important; font-size:11px !important; }
}
@media (max-width:480px) {
    body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch { flex-basis:84vw !important; min-height:190px !important; }
}
@media (prefers-reduced-motion:reduce) {
    body:has(.hk-home-hero) .hk-game-launch-grid, body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch,
    body:has(.hk-home-hero) .hk-game-slider-controls button { scroll-behavior:auto !important; transition-duration:.01ms !important; }
}


/* Per-game salon backplates, loaded after the general theme rules. */
body:has(.hk-home-hero) .hk-game-launch--henhouse{background:radial-gradient(ellipse at 82% 24%,#b1dc6680 0 3%,transparent 18%),radial-gradient(ellipse at 72% 75%,#356e4e 0 2%,transparent 22%),repeating-linear-gradient(135deg,transparent 0 26px,#d9eca00a 27px 29px),linear-gradient(135deg,#163e2e,#09251f 72%)!important;border-color:#97c97966!important}
body:has(.hk-home-hero) .hk-game-launch--rift{background:radial-gradient(ellipse at 78% 27%,#d76aff35,transparent 31%),linear-gradient(135deg,#271540,#101827 78%)!important}
body:has(.hk-home-hero) .hk-game-launch--warsix{background:radial-gradient(ellipse at 84% 35%,#7bd88926,transparent 31%),linear-gradient(135deg,#174538,#101f25 78%)!important}
body:has(.hk-home-hero) .hk-game-launch--rps{background:radial-gradient(circle at 82% 28%,#80eeff27,transparent 25%),linear-gradient(135deg,#213b59,#101c2b 78%)!important}
body:has(.hk-home-hero) .hk-game-launch--tank{background:radial-gradient(ellipse at 82% 35%,#ff9d532a,transparent 30%),linear-gradient(135deg,#47302b,#171d23 78%)!important}
body:has(.hk-home-hero) .hk-game-launch--knight{background:radial-gradient(ellipse at 84% 25%,#ffe29a28,transparent 29%),linear-gradient(135deg,#394636,#151d1d 80%)!important}
@media(max-width:760px){body:has(.hk-home-hero) .hk-game-launch-grid>.hk-game-launch{min-height:156px!important;padding:16px 17px!important}body:has(.hk-home-hero) .hk-game-launch-grid>.hk-game-launch h2{max-width:72%;line-height:1.5}body:has(.hk-home-hero) .hk-game-launch-grid>.hk-game-launch p{max-width:82%;line-height:1.8}}

body:has(.hk-home-hero) .hk-game-launch--football{background:radial-gradient(circle at 82% 34%,#b7f4bc2e 0 8%,transparent 30%),linear-gradient(135deg,#215e3d,#101f1a 76%)!important;border-color:#8ed39a77!important}
body:has(.hk-home-hero) .hk-game-launch--football .hk-game-launch-art{color:#e4f6d5;text-shadow:0 0 24px #8de4a988;filter:drop-shadow(0 8px 14px #0008)}
body:has(.hk-home-hero) .hk-nav-card--football .hk-nav-icon{color:#b9f0c0;text-shadow:0 0 14px #79d98b77}

@media(max-width:760px){body:has(.hk-home-hero) .hk-game-launch--football{min-height:156px!important}}

/* The game rail spans the whole salon card; pointer movement follows the drag direction. */
@media (min-width: 761px) {
    body:has(.hk-home-hero) .hk-home-hero { grid-template-columns:minmax(0,1fr) !important; }
    body:has(.hk-home-hero) .hk-home-welcome,
    body:has(.hk-home-hero) .hk-home-account { grid-column:1 !important; min-width:0 !important; }
    body:has(.hk-home-hero) .hk-home-account {
        grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.75fr) !important;
        align-items:stretch !important;
    }
    body:has(.hk-home-hero) .hk-game-slider-hint,
    body:has(.hk-home-hero) .hk-game-launch-grid { width:100% !important; max-width:none !important; }
}
body:has(.hk-home-hero) .hk-game-launch-grid { scroll-snap-type:x proximity !important; scroll-padding-inline:12px !important; }
body:has(.hk-home-hero) .hk-game-launch-grid.is-dragging { scroll-snap-type:none !important; user-select:none !important; }
@media (prefers-reduced-motion: no-preference) {
    body:has(.hk-home-hero) .hk-game-launch-grid:not(.is-dragging) { scroll-behavior:smooth !important; }
}
/* Account and wallet summary sits above the salon greeting and game rail. */
@media (min-width: 761px) {
    body:has(.hk-home-hero) .hk-home-hero { grid-template-columns:minmax(0,1fr) !important; }
    body:has(.hk-home-hero) .hk-home-account {
        grid-column:1 !important;
        grid-row:1 !important;
        grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,.82fr)) !important;
        align-items:stretch !important;
        gap:10px !important;
        margin:0 0 4px !important;
    }
    body:has(.hk-home-hero) .hk-home-account > .hk-home-player { grid-column:1 !important; grid-row:1 !important; min-height:88px !important; }
    body:has(.hk-home-hero) .hk-home-account > .hk-home-wallet,
    body:has(.hk-home-hero) .hk-home-account > .hk-home-progress { display:contents !important; }
    body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip,
    body:has(.hk-home-hero) .hk-home-account .hk-home-stat {
        min-width:0 !important;
        min-height:82px !important;
        padding:12px !important;
        border:1px solid #d8e5d534 !important;
        border-radius:17px !important;
        background:linear-gradient(145deg,#ffffff0d,#0c191b80) !important;
        box-shadow:0 9px 22px #0002,inset 0 1px #ffffff12 !important;
    }
    body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip { grid-template-columns:auto minmax(0,1fr) auto !important; }
    body:has(.hk-home-hero) .hk-home-account .hk-home-stat { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; }
    body:has(.hk-home-hero) .hk-home-account .hk-home-stat > span:last-child { display:grid !important; gap:3px !important; }
    body:has(.hk-home-hero) .hk-home-welcome { grid-column:1 !important; grid-row:2 !important; min-width:0 !important; }
}
@media (min-width: 761px) and (max-width: 980px) {
    body:has(.hk-home-hero) .hk-home-account { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:7px !important; }
    body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip,
    body:has(.hk-home-hero) .hk-home-account .hk-home-stat { padding:9px 7px !important; }
}

/* Keep the profile and balances compact beside the salon greeting. */
@media (min-width: 761px) {
  body:has(.hk-home-hero) .hk-home-hero {
    display:grid !important; grid-template-columns:minmax(0,1fr) minmax(250px,300px) !important;
    align-items:start !important; gap:18px !important;
  }
  body:has(.hk-home-hero) .hk-home-welcome { grid-column:1 !important; grid-row:1 !important; min-width:0 !important; }
  body:has(.hk-home-hero) .hk-home-account {
    grid-column:2 !important; grid-row:1 !important; align-self:start !important;
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important; margin:0 !important; padding:12px !important;
    border:1px solid #c9e7d344 !important; border-radius:20px !important;
    background:linear-gradient(145deg,#18382f,#101e20) !important;
    box-shadow:0 12px 30px #0003,inset 0 1px #ffffff16 !important;
  }
  body:has(.hk-home-hero) .hk-home-account > .hk-home-player {
    grid-column:1 / -1 !important; grid-row:auto !important; min-height:72px !important;
    padding:9px 11px !important; border-radius:15px !important;
  }
  body:has(.hk-home-hero) .hk-home-account > .hk-home-wallet,
  body:has(.hk-home-hero) .hk-home-account > .hk-home-progress { display:contents !important; }
  body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip,
  body:has(.hk-home-hero) .hk-home-account .hk-home-stat {
    min-width:0 !important; min-height:60px !important; padding:8px 9px !important;
    border:1px solid #c9e7d333 !important; border-radius:14px !important;
    background:linear-gradient(145deg,#ffffff0e,#0816128c) !important;
  }
  body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip { grid-template-columns:auto minmax(0,1fr) !important; }
  body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip > b { display:none !important; }
  body:has(.hk-home-hero) .hk-home-account .hk-home-stat { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:5px !important; }
  body:has(.hk-home-hero) .hk-home-account .hk-home-stat > span:last-child { display:grid !important; gap:2px !important; }
}
@media (max-width: 760px) {
  body:has(.hk-home-hero) .hk-home-hero { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
  body:has(.hk-home-hero) .hk-home-account {
    grid-column:1 !important; grid-row:1 !important; display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important;
    margin:0 !important; padding:10px !important; border:1px solid #c9e7d344 !important;
    border-radius:18px !important; background:linear-gradient(145deg,#18382f,#101e20) !important;
  }
  body:has(.hk-home-hero) .hk-home-account > .hk-home-player { grid-column:1 / -1 !important; min-height:66px !important; }
  body:has(.hk-home-hero) .hk-home-account > .hk-home-wallet,
  body:has(.hk-home-hero) .hk-home-account > .hk-home-progress { display:contents !important; }
  body:has(.hk-home-hero) .hk-home-account .hk-wallet-chip,
  body:has(.hk-home-hero) .hk-home-account .hk-home-stat {
    min-width:0 !important; min-height:56px !important; padding:7px 8px !important;
    border-radius:13px !important; background:#ffffff0d !important;
  }
  body:has(.hk-home-hero) .hk-home-welcome { grid-column:1 !important; grid-row:2 !important; min-width:0 !important; }
}


/* Responsive salon game catalog: a normal grid, never a drag rail. */
body:has(.hk-home-hero) .hk-game-launch-grid {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:16px !important;
  grid-column:1 / -1 !important;
  width:100% !important; max-width:none !important;
  overflow:visible !important; overflow-x:visible !important; overflow-y:visible !important;
  padding:10px 2px 4px !important; margin:12px 0 0 !important;
  direction:rtl !important; scroll-snap-type:none !important; touch-action:pan-y !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid::-webkit-scrollbar { display:none !important; }
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch {
  position:relative !important; display:flex !important; flex-direction:column !important;
  flex:initial !important; width:100% !important; min-width:0 !important; min-height:220px !important;
  overflow:hidden !important; isolation:isolate !important;
  padding:16px !important; border-radius:22px !important;
  border:1px solid #d9e9d244 !important;
  background-color:#102a22 !important; background-size:cover !important; background-position:center !important;
  box-shadow:0 15px 34px #0005,inset 0 1px #ffffff30 !important;
  scroll-snap-align:none !important; scroll-snap-stop:normal !important;
  transform:none !important; cursor:pointer !important;
  animation:hk-game-card-arrive .48s both !important; animation-delay:calc(var(--hk-card-order, 0) * 45ms) !important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease !important;
}
@keyframes hk-game-card-arrive {
  from { opacity:0; translate:0 10px; }
  to { opacity:1; translate:0 0; }
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch::before {
  content:"" !important; position:absolute !important; z-index:-1 !important; inset:0 !important;
  pointer-events:none !important; opacity:1 !important;
  background:linear-gradient(180deg,#07100c10 0%,#07100c30 38%,#06120fdf 100%) !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch::after {
  content:"" !important; position:absolute !important; z-index:-1 !important;
  inset:8px !important; border:1px solid #ffffff16 !important; border-radius:15px !important;
  pointer-events:none !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch:hover,
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch:focus-visible {
  transform:translateY(-4px) !important; border-color:#f1d77eaa !important;
  box-shadow:0 22px 44px #0007,0 0 24px #d6bd6e18,inset 0 1px #ffffff44 !important;
}
body:has(.hk-home-hero) .hk-game-launch-art { z-index:1 !important; }
body:has(.hk-home-hero) .hk-game-launch-label { z-index:1 !important; max-width:calc(100% - 48px) !important; }
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch > div,
body:has(.hk-home-hero) .hk-game-launch-cta { z-index:1 !important; }
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch > div { margin-top:auto !important; }
body:has(.hk-home-hero) .hk-game-launch h2 { font-size:clamp(15px,1.15vw,19px) !important; line-height:1.55 !important; }
body:has(.hk-home-hero) .hk-game-launch p { font-size:11px !important; line-height:1.8 !important; }
body:has(.hk-home-hero) .hk-game-launch-cta { margin-top:10px !important; }
body:has(.hk-home-hero) .hk-game-launch--cards { background-image:radial-gradient(ellipse at 78% 28%,#f0d78348,transparent 26%),repeating-linear-gradient(45deg,transparent 0 18px,#ffffff08 19px 20px),linear-gradient(145deg,#4b261c,#182b29 62%,#0d1b1b) !important; }
body:has(.hk-home-hero) .hk-game-launch--warsix { background-image:radial-gradient(ellipse at 77% 27%,#65c88765,transparent 30%),linear-gradient(155deg,#176349,#0b332d 54%,#111c24) !important; }
body:has(.hk-home-hero) .hk-game-launch--rps { background-image:radial-gradient(circle at 78% 27%,#85e4f34a,transparent 27%),linear-gradient(145deg,#354d76,#172d48 58%,#111b29) !important; }
body:has(.hk-home-hero) .hk-game-launch--football { background-image:radial-gradient(ellipse at 77% 29%,#d9f5ad35,transparent 24%),repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 26px),linear-gradient(145deg,#267348,#145034 58%,#10251d) !important; }
body:has(.hk-home-hero) .hk-game-launch--knight { background-image:radial-gradient(ellipse at 76% 20%,#f4d78b40,transparent 25%),linear-gradient(145deg,#4b4b37,#283b34 48%,#101918) !important; }
body:has(.hk-home-hero) .hk-game-launch--rift { background-image:radial-gradient(ellipse at 78% 25%,#ce7aff69,transparent 28%),linear-gradient(145deg,#3c275d,#1a2140 58%,#101923) !important; }
body:has(.hk-home-hero) .hk-game-launch--henhouse { background-image:radial-gradient(ellipse at 78% 25%,#d6ea8060,transparent 26%),linear-gradient(145deg,#386d3b,#1a4936 54%,#122820) !important; }
body:has(.hk-home-hero) .hk-game-launch--tank { background-image:radial-gradient(ellipse at 78% 25%,#ffad5c5c,transparent 27%),linear-gradient(145deg,#75503b,#3c3330 52%,#172027) !important; }
body:has(.hk-home-hero) .hk-game-launch--knight .hk-knight-card-video { z-index:-2 !important; }
@media (max-width:1440px) { body:has(.hk-home-hero) .hk-game-launch-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:1120px) { body:has(.hk-home-hero) .hk-game-launch-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:13px !important; } }
@media (max-width:760px) {
  body:has(.hk-home-hero) .hk-game-launch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:11px !important; margin-top:9px !important; }
  body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch { min-height:190px !important; padding:14px !important; border-radius:18px !important; }
  body:has(.hk-home-hero) .hk-game-launch h2 { font-size:15px !important; }
  body:has(.hk-home-hero) .hk-game-launch p { font-size:10px !important; }
}
@media (max-width:420px) {
  body:has(.hk-home-hero) .hk-game-launch-grid { grid-template-columns:minmax(0,1fr) !important; gap:10px !important; }
  body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch { min-height:164px !important; padding:15px 16px !important; }
}
@media (prefers-reduced-motion:reduce) {
  body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch { transition:none !important; animation:none !important; }
}


/* Final home-card artwork layer: this file loads after style.css, so these
   declarations intentionally win over the older gradient-only card themes. */
body:has(.hk-home-hero) .hk-game-launch--catdog{background:linear-gradient(180deg,#07120f28 0%,#07120f58 40%,#07120ff0 100%),url('/public/Hokmland/Styles/hk-menu-catdog.png') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--football{background:linear-gradient(180deg,#06130e16 0%,#06130e32 38%,#06130ff0 100%),url('/public/Hokmland/Styles/hk-menu-football.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--rps{background:linear-gradient(180deg,#10112616 0%,#10112636 38%,#09121bf0 100%),url('/public/Hokmland/Styles/hk-menu-rps.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--cards{background:linear-gradient(180deg,#07151014 0%,#07151032 38%,#06130ff0 100%),url('/public/Hokmland/Styles/hk-menu-cards.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--warsix{background:linear-gradient(180deg,#08130f14 0%,#08130f38 40%,#08130ff0 100%),url('/public/Hokmland/Styles/hk-menu-warsix.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--football-cup{background:linear-gradient(180deg,#0b111514 0%,#0b111538 40%,#07120ff0 100%),url('/public/Hokmland/Styles/hk-menu-football-cup.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--snakes{background:linear-gradient(180deg,#07130e14 0%,#07130e32 38%,#07130ff0 100%),url('/public/Hokmland/Styles/hk-menu-snakes.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--ludo{background:linear-gradient(180deg,#07130e14 0%,#07130e32 38%,#07130ff0 100%),url('/public/Hokmland/Styles/hk-menu-ludo.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--tictactoe{background:linear-gradient(180deg,#07130e14 0%,#07130e32 38%,#07130ff0 100%),url('/public/Hokmland/Styles/hk-menu-tictactoe.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--tank{background:linear-gradient(180deg,#0b111514 0%,#0b111538 40%,#07120ff0 100%),url('/public/Hokmland/Styles/hk-menu-tank.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--henhouse{background:linear-gradient(180deg,#07130e14 0%,#07130e32 38%,#07130ff0 100%),url('/public/Hokmland/Styles/hk-menu-henhouse.jpg') center/cover no-repeat!important}
body:has(.hk-home-hero) .hk-game-launch--rift{background:linear-gradient(180deg,#080d1714 0%,#080d1738 40%,#080d17f0 100%),url('/public/Hokmland/Styles/hk-menu-rift.jpg') center/cover no-repeat!important}

/* Explicit artwork fallbacks for the three board-game cards. The href selectors
   keep these cards covered even if a Blade class changes during menu updates. */
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch[href*="type=ludo"] {
  background-image:linear-gradient(180deg,rgba(6,19,14,.08) 0%,rgba(6,19,14,.2) 42%,rgba(6,19,14,.72) 100%),url('/public/Hokmland/Styles/hk-menu-ludo-crop.jpg') !important;
  background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch[href*="type=tictactoe"] {
  background-image:linear-gradient(180deg,rgba(6,19,14,.08) 0%,rgba(6,19,14,.2) 42%,rgba(6,19,14,.72) 100%),url('/public/Hokmland/Styles/hk-menu-tictactoe-crop.jpg') !important;
  background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch[href*="type=snakes"] {
  background-image:linear-gradient(180deg,rgba(6,19,14,.08) 0%,rgba(6,19,14,.2) 42%,rgba(6,19,14,.72) 100%),url('/public/Hokmland/Styles/hk-menu-snakes-crop.jpg') !important;
  background-position:center !important;background-size:cover !important;background-repeat:no-repeat !important;
}

/* Dark frosted-glass panels: the artwork remains visible underneath. */
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch > div {
  background:linear-gradient(105deg,rgba(5,16,13,.76),rgba(8,23,19,.68)) !important;
  border-color:rgba(231,239,226,.27) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(125%) !important;
}
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch .hk-game-launch-label,
body:has(.hk-home-hero) .hk-game-launch-grid > .hk-game-launch .hk-game-launch-cta {
  background:rgba(5,17,14,.68) !important;
  border-color:rgba(236,222,173,.4) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
}