/* HKGAY mobile v2 — scoped responsive layer for the existing Default theme. */

html.hkgay-mobile {
    background: #f3f4f5;
}

html.hkgay-mobile body {
    margin: 0;
    padding: 0 0 76px;
    background: #f3f4f5;
    color: #2d3035;
    font-family: Inter, "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    overflow-x: hidden;
}

html.hkgay-mobile *,
html.hkgay-mobile *::before,
html.hkgay-mobile *::after {
    box-sizing: border-box;
}

html.hkgay-mobile a {
    color: #d9530d;
}

html.hkgay-mobile img,
html.hkgay-mobile video,
html.hkgay-mobile iframe,
html.hkgay-mobile object,
html.hkgay-mobile embed {
    max-width: 100% !important;
    height: auto !important;
}

html.hkgay-mobile #container {
    width: min(100%, 430px);
    min-width: 0;
    margin: 0 auto;
    background: #f3f4f5;
    overflow: visible;
    box-shadow: 0 0 34px rgba(32, 35, 39, .1);
}

html.hkgay-mobile #header {
    background: transparent;
}

html.hkgay-mobile #logo {
    min-height: 64px;
    padding: 0;
    background: #202327 !important;
    border: 0;
    border-bottom: 3px solid #f26a21;
}

html.hkgay-mobile #logo .wrapper {
    width: auto;
    min-width: 0;
    padding: 0 15px;
    min-height: 61px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

html.hkgay-mobile #logo .wrapper > a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 0;
    letter-spacing: .08em;
    text-decoration: none;
}

html.hkgay-mobile #logo .wrapper > a::before {
    content: "";
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: #f26a21;
}

html.hkgay-mobile #logo .wrapper > a::after {
    content: "HKGAY.NET";
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

html.hkgay-mobile #logo .wrapper > a img {
    display: none !important;
}

html.hkgay-mobile #header ul.menu.top_links {
    display: none !important;
}

html.hkgay-mobile #panel {
    width: auto;
    min-width: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

html.hkgay-mobile #panel .upper {
    display: none;
}

html.hkgay-mobile #content {
    width: auto;
    min-width: 0;
    padding: 13px 14px 18px;
    background: #f3f4f5;
}

html.hkgay-mobile #content > .wrapper,
html.hkgay-mobile .wrapper {
    width: auto;
    min-width: 0;
    max-width: none;
}

html.hkgay-mobile .navigation {
    margin: 0 0 11px;
    padding: 11px 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #6f747b;
    box-shadow: 0 5px 16px rgba(32, 35, 39, .06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.hkgay-mobile .navigation a {
    color: #6f747b;
}

html.hkgay-mobile .navigation .active {
    color: #202327;
}

html.hkgay-mobile .hkgay-global-source-heading,
html.hkgay-mobile .hkgay-global-source-row {
    display: none !important;
}

html.hkgay-mobile:not(.hkgay-page-index) .hkgay-global-source-table {
    display: none !important;
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table {
    display: block;
    width: auto !important;
    margin: 12px 14px;
    padding: 11px;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .06);
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table tbody,
html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table tr,
html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table td {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0;
    background: transparent !important;
    border: 0;
    text-align: left !important;
    white-space: normal;
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table tr {
    margin: 0 0 8px;
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table tr.hkgay-global-source-row {
    display: none !important;
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table marquee {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff1e8;
    color: #d9530d;
}

html.hkgay-mobile.hkgay-page-index .hkgay-global-source-table img {
    display: block;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50%;
}

html.hkgay-mobile .hkgay-promo-grid,
html.hkgay-mobile .hkgay-promo-grid tbody,
html.hkgay-mobile .hkgay-promo-grid tr,
html.hkgay-mobile .hkgay-promo-grid td {
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0;
}

html.hkgay-mobile .hkgay-promo-grid td {
    margin: 0 0 8px;
}

html.hkgay-mobile .hkgay-promo-grid img {
    display: block;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(32, 35, 39, .08);
}

html.hkgay-mobile:not(.hkgay-page-index) #content > .wrapper > .hkgay-promo-grid {
    display: none !important;
}

html.hkgay-mobile .thead {
    background: linear-gradient(135deg, #f26a21, #d9530d) !important;
    color: #fff !important;
    border: 0 !important;
}

html.hkgay-mobile .thead a {
    color: #fff !important;
}

html.hkgay-mobile .tfoot,
html.hkgay-mobile .tcat {
    border: 0;
}

html.hkgay-mobile table.tborder {
    max-width: 100%;
}

html.hkgay-mobile .hkgay-forum-table,
html.hkgay-mobile .hkgay-forum-table > tbody,
html.hkgay-mobile .hkgay-forum-table > thead,
html.hkgay-mobile .hkgay-forum-table > tbody > tr,
html.hkgay-mobile .hkgay-forum-table > thead > tr {
    display: block;
    width: 100% !important;
}

html.hkgay-mobile .hkgay-forum-table {
    border: 0;
    background: transparent;
}

html.hkgay-mobile .hkgay-forum-section {
    margin: 15px 0 9px;
}

html.hkgay-mobile .hkgay-forum-section > td {
    display: block;
    width: 100% !important;
    padding: 12px 13px;
    border-radius: 14px;
}

html.hkgay-mobile .hkgay-forum-columns {
    display: none !important;
}

html.hkgay-mobile .hkgay-forum-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0 11px;
    align-items: center;
    margin: 0 0 9px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .06);
}

html.hkgay-mobile .hkgay-forum-row > td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

html.hkgay-mobile .hkgay-forum-row > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 42px !important;
    height: 42px;
    border-radius: 13px !important;
    background: #fff0e6 !important;
    display: grid;
    place-items: center;
}

html.hkgay-mobile .hkgay-forum-row > td:nth-child(2) {
    grid-column: 2;
}

html.hkgay-mobile .hkgay-forum-row > td:nth-child(3),
html.hkgay-mobile .hkgay-forum-row > td:nth-child(4) {
    display: none;
}

html.hkgay-mobile .hkgay-forum-row > td:nth-child(5) {
    grid-column: 2;
    color: #6f747b;
    font-size: 12px;
    margin-top: 7px;
}

html.hkgay-mobile .hkgay-forum-row strong,
html.hkgay-mobile .hkgay-forum-row strong a {
    color: #202327;
    font-size: 15px;
}

html.hkgay-mobile .hkgay-forum-row .smalltext {
    color: #6f747b;
    font-size: 12px;
}

html.hkgay-mobile .hkgay-thread-table,
html.hkgay-mobile .hkgay-thread-table > tbody,
html.hkgay-mobile .hkgay-thread-table > thead,
html.hkgay-mobile .hkgay-thread-table > tbody > tr,
html.hkgay-mobile .hkgay-thread-table > thead > tr {
    display: block;
    width: 100% !important;
}

html.hkgay-mobile .hkgay-thread-table {
    border: 0;
    background: transparent;
}

html.hkgay-mobile .hkgay-thread-section > td {
    display: block;
    width: 100% !important;
    padding: 12px 13px;
    border-radius: 14px;
}

html.hkgay-mobile .hkgay-thread-columns {
    display: none !important;
}

html.hkgay-mobile .hkgay-thread-row {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0 10px;
    align-items: center;
    margin: 0 0 9px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .06);
}

html.hkgay-mobile .hkgay-thread-row > td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px !important;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px !important;
    background: #fff0e6 !important;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(2),
html.hkgay-mobile .hkgay-thread-row > td:nth-child(5),
html.hkgay-mobile .hkgay-thread-row > td:nth-child(6) {
    display: none;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(3) {
    grid-column: 2;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(4) {
    grid-column: 3;
    color: #6f747b;
    font-size: 12px;
    text-align: right !important;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(7) {
    grid-column: 2 / 4;
    color: #6f747b;
    font-size: 12px;
    margin-top: 7px;
}

html.hkgay-mobile .hkgay-thread-row > td:nth-child(3) a {
    color: #202327;
    font-weight: 600;
}

html.hkgay-mobile .pagination,
html.hkgay-mobile .pagination_breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

html.hkgay-mobile .pagination a,
html.hkgay-mobile .pagination .pagination_current,
html.hkgay-mobile .pagination_breadcrumb_link {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 0;
    border-radius: 11px;
    background: #fff;
    color: #6f747b;
}

html.hkgay-mobile .pagination .pagination_current {
    background: #f26a21;
    color: #fff;
}

html.hkgay-mobile input.textbox,
html.hkgay-mobile textarea,
html.hkgay-mobile select {
    max-width: 100%;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    background: #fff;
}

html.hkgay-mobile input.button,
html.hkgay-mobile a.button,
html.hkgay-mobile .button {
    border: 0;
    border-radius: 10px;
    background: #f26a21;
    color: #fff;
}

html.hkgay-mobile.hkgay-page-thread #content table.tborder.tfixed.clear {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
}

html.hkgay-mobile.hkgay-page-thread #content table.tborder.tfixed.clear > tbody,
html.hkgay-mobile.hkgay-page-thread #content table.tborder.tfixed.clear > tbody > tr {
    display: block;
    width: 100%;
}

html.hkgay-mobile.hkgay-page-thread #content table.tborder.tfixed.clear > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0;
    border: 0;
}

html.hkgay-mobile.hkgay-page-thread #content table.tborder.tfixed.clear > tbody > tr:first-child > td {
    padding: 13px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f26a21, #d9530d) !important;
    color: #fff;
}

html.hkgay-mobile.hkgay-page-thread #posts {
    display: block !important;
}

html.hkgay-mobile .post {
    display: block;
    margin: 10px 0;
    border: 0;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .07);
    overflow: hidden;
}

html.hkgay-mobile .post .post_author {
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-bottom: 1px solid #e2e4e7;
    background: #fff;
}

html.hkgay-mobile .post .author_avatar,
html.hkgay-mobile .post .author_avatar img {
    width: 48px !important;
    height: 48px !important;
    margin: 0;
    border-radius: 15px;
    object-fit: cover;
}

html.hkgay-mobile .post .author_information {
    min-width: 0;
}

html.hkgay-mobile .post .author_information .largetext,
html.hkgay-mobile .post .author_information .largetext a {
    color: #202327;
    font-size: 15px;
}

html.hkgay-mobile .post .author_statistics {
    display: none;
}

html.hkgay-mobile .post .post_content {
    margin: 0;
    padding: 13px;
    min-height: 0;
}

html.hkgay-mobile .post .post_head {
    min-height: 0;
    padding: 0 0 10px;
    margin: 0 0 12px;
    border-bottom: 1px solid #e2e4e7;
    color: #6f747b;
    overflow-wrap: anywhere;
}

html.hkgay-mobile .post .post_date {
    float: none;
}

html.hkgay-mobile .post .post_body,
html.hkgay-mobile .post .post_body * {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

html.hkgay-mobile .post .post_body img {
    display: block;
    margin: 10px auto;
    border-radius: 13px;
}

html.hkgay-mobile .post .post_controls {
    margin: 0;
    padding: 10px 13px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border-top: 1px solid #e2e4e7;
    background: #fafafa;
}

html.hkgay-mobile .post .postbit_buttons {
    float: none;
    display: flex;
    gap: 6px;
}

html.hkgay-mobile .attachment,
html.hkgay-mobile .attachments {
    max-width: 100%;
    overflow-wrap: anywhere;
}

html.hkgay-mobile .hkgay-post-ad-table,
html.hkgay-mobile .hkgay-post-ad-table tbody,
html.hkgay-mobile .hkgay-post-ad-table tr,
html.hkgay-mobile .hkgay-post-ad-table td {
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    border: 0;
}

html.hkgay-mobile .hkgay-post-ad-table img {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    border-radius: 12px;
}

html.hkgay-mobile.hkgay-page-profile #content fieldset {
    margin: 0 0 11px;
    padding: 15px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #202327, #3d4249);
    color: #fff;
}

html.hkgay-mobile.hkgay-page-profile #content fieldset > table,
html.hkgay-mobile.hkgay-page-profile #content fieldset > table > tbody,
html.hkgay-mobile.hkgay-page-profile #content fieldset > table > tbody > tr {
    display: block;
    width: 100% !important;
}

html.hkgay-mobile.hkgay-page-profile #content fieldset > table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 12px;
    align-items: center;
}

html.hkgay-mobile.hkgay-page-profile #content fieldset td {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 0;
    color: #fff;
    overflow-wrap: anywhere;
}

html.hkgay-mobile.hkgay-page-profile #content fieldset img {
    width: 66px !important;
    height: 66px !important;
    border-radius: 20px;
    object-fit: cover;
}

html.hkgay-mobile.hkgay-page-profile #content > .wrapper > table[align="center"],
html.hkgay-mobile.hkgay-page-profile #content > .wrapper > table[align="center"] > tbody,
html.hkgay-mobile.hkgay-page-profile #content > .wrapper > table[align="center"] > tbody > tr {
    display: block;
    width: 100% !important;
}

html.hkgay-mobile.hkgay-page-profile #content > .wrapper > table[align="center"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 10px;
    background: transparent;
}

html.hkgay-mobile.hkgay-page-profile #content table.tborder {
    display: table;
    width: 100% !important;
    table-layout: auto;
    margin: 0 0 10px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .06);
    overflow: hidden;
}

html.hkgay-mobile.hkgay-page-profile #content table.tborder tbody {
    display: table-row-group;
}

html.hkgay-mobile.hkgay-page-profile #content table.tborder tr {
    display: table-row;
}

html.hkgay-mobile.hkgay-page-profile #content table.tborder td {
    display: table-cell;
    width: auto !important;
    max-width: 0;
    padding: 9px 10px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    vertical-align: top;
}

html.hkgay-mobile.hkgay-page-profile #content table.tborder .thead {
    max-width: none;
    padding: 12px 13px;
}

html.hkgay-mobile #hkgay-mobile-global-spots {
    margin: 15px 0 0;
}

html.hkgay-mobile .hkgay-mobile-section-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin: 0 2px 9px;
    color: #202327;
}

html.hkgay-mobile .hkgay-mobile-section-title span {
    color: #d9530d;
    font-size: 12px;
}

html.hkgay-mobile .hkgay-mobile-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 35, 39, .06);
}

html.hkgay-mobile .hkgay-mobile-topic-chip {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: #fff1e8;
    color: #d9530d;
    text-decoration: none;
    white-space: nowrap;
}

html.hkgay-mobile #hkgay-mobile-nav {
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 430px);
    min-height: 64px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 7px 8px 9px;
    border-top: 1px solid #e2e4e7;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -7px 22px rgba(32, 35, 39, .08);
    backdrop-filter: blur(12px);
}

html.hkgay-mobile #hkgay-mobile-nav a {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px 2px;
    color: #6f747b;
    font-size: 11px;
    text-decoration: none;
}

html.hkgay-mobile #hkgay-mobile-nav a.is-current {
    color: #d9530d;
}

html.hkgay-mobile .hkgay-mobile-nav-icon {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    font-size: 21px;
    line-height: 1;
}

html.hkgay-mobile #hkgay-mobile-nav .hkgay-mobile-compose {
    width: 44px;
    height: 44px;
    min-width: 44px;
    align-self: start;
    justify-self: center;
    margin-top: -20px;
    padding: 0;
    border-radius: 15px;
    background: #f26a21;
    color: #fff;
    box-shadow: 0 9px 22px rgba(242, 106, 33, .33);
}

html.hkgay-mobile #footer {
    padding-bottom: 14px;
}

html.hkgay-mobile #footer .upper,
html.hkgay-mobile #footer .lower {
    width: auto;
    min-width: 0;
}

html.hkgay-mobile #hkgay-view-switch a {
    color: #f26a21;
    font-weight: 600;
}

@media (max-width: 360px) {
    html.hkgay-mobile body {
        font-size: 14px;
    }

    html.hkgay-mobile #content {
        padding-left: 11px;
        padding-right: 11px;
    }

    html.hkgay-mobile .hkgay-thread-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    html.hkgay-mobile .hkgay-thread-row > td:nth-child(4) {
        grid-column: 2;
        text-align: left !important;
    }

    html.hkgay-mobile .hkgay-thread-row > td:nth-child(7) {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.hkgay-mobile * {
        scroll-behavior: auto !important;
    }
}