/*
 * ChouChou Condo · 共享设施房间组件
 * 从原 [chouchou_room_links] 视觉样式提取，供多个 Makers 页面共用。
 */

/*
     * =========================================
     * 基础隔离
     * =========================================
     */

    .ccrl-room-links,
    .ccrl-room-links *,
    .ccrl-room-links *::before,
    .ccrl-room-links *::after {
        box-sizing: border-box;
    }

    .ccrl-room-links {
        --ccrl-wine: #6f2947;
        --ccrl-wine-deep: #542036;
        --ccrl-wine-dark: #42172d;
        --ccrl-rose: #ae5d7e;
        --ccrl-rose-bright: #c86f94;
        --ccrl-rose-light: #f8dce7;
        --ccrl-pink-soft: #fff4f8;
        --ccrl-cream: #fffaf5;
        --ccrl-gold: #c9a25f;
        --ccrl-gold-light: #ead6a5;
        --ccrl-text: #593746;
        --ccrl-muted: #9a7a88;
        --ccrl-border: rgba(197, 151, 86, 0.52);

        position: relative;
        width: 100%;
        max-width: 330px;
        margin: 18px 0;
        color: var(--ccrl-text);
        font-family:
            "Microsoft YaHei",
            "PingFang SC",
            "Noto Sans SC",
            Arial,
            sans-serif;
        line-height: 1.5;
        isolation: isolate;
    }

    .ccrl-room-links a,
    .ccrl-room-links button {
        -webkit-tap-highlight-color: transparent;
    }

    .ccrl-room-links [hidden] {
        display: none !important;
    }

    /*
     * =========================================
     * 与公寓公告统一的外框
     * =========================================
     */

    .ccrl-room-links .ccrl-shell {
        position: relative;
        overflow: hidden;
        padding: 11px;
        border: 1px solid rgba(194, 149, 81, 0.72);
        border-radius: 23px;
        background:
            radial-gradient(
                circle at 12% 0%,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0) 31%
            ),
            linear-gradient(
                150deg,
                #fffdf9 0%,
                #fff4f8 49%,
                #f9e3ec 100%
            );
        box-shadow:
            0 18px 42px rgba(91, 34, 61, 0.16),
            inset 0 0 0 4px rgba(255, 255, 255, 0.58);
    }

    .ccrl-room-links .ccrl-shell::before {
        content: "";
        position: absolute;
        top: -76px;
        right: -58px;
        width: 145px;
        height: 145px;
        border-radius: 50%;
        pointer-events: none;
        background:
            radial-gradient(
                circle,
                rgba(217, 133, 168, 0.28),
                rgba(217, 133, 168, 0)
            );
    }

    .ccrl-room-links .ccrl-shell::after {
        content: "";
        position: absolute;
        bottom: -92px;
        left: -78px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        pointer-events: none;
        background:
            radial-gradient(
                circle,
                rgba(232, 203, 143, 0.18),
                rgba(232, 203, 143, 0)
            );
    }

    .ccrl-room-links .ccrl-inner {
        position: relative;
        z-index: 1;
        padding: 17px 15px 15px;
        border: 1px solid rgba(199, 159, 96, 0.42);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.58);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    /*
     * =========================================
     * 标题
     * =========================================
     */

    .ccrl-room-links .ccrl-heading {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-bottom: 13px;
        text-align: center;
    }

    .ccrl-room-links .ccrl-heading-line {
        width: 32px;
        height: 1px;
        flex: 0 1 32px;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(197, 154, 88, 0.85)
            );
    }

    .ccrl-room-links .ccrl-heading-line:last-child {
        background:
            linear-gradient(
                90deg,
                rgba(197, 154, 88, 0.85),
                transparent
            );
    }

    .ccrl-room-links .ccrl-heading-symbol {
        flex: 0 0 auto;
        color: var(--ccrl-gold);
        font-size: 15px;
        line-height: 1;
        filter:
            drop-shadow(
                0 2px 4px rgba(130, 87, 29, 0.14)
            );
    }

    .ccrl-room-links .ccrl-heading-copy {
        min-width: 0;
    }

    .ccrl-room-links .ccrl-heading-title {
        display: block;
        color: var(--ccrl-wine);
        font-family:
            "Noto Serif SC",
            "Songti SC",
            "Times New Roman",
            serif;
        font-size: 19px;
        font-weight: 700;
        letter-spacing: 0.12em;
        line-height: 1.2;
    }

    /*
     * =========================================
     * 通用图片横幅
     * =========================================
     */

    .ccrl-room-links .ccrl-banner {
        position: relative;
        display: block;
        width: 100%;
        min-height: 105px;
        margin: 0 0 10px;
        overflow: hidden;
        color: #fff !important;
        border: 1px solid rgba(205, 169, 105, 0.7);
        border-radius: 8px;
        outline: none;
        background-color: var(--ccrl-wine-deep);
        background-image: var(--ccrl-image);
        background-repeat: no-repeat;
        background-position: var(--ccrl-position, center);
        background-size: cover;
        box-shadow:
            0 8px 18px rgba(91, 34, 61, 0.17),
            inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        text-decoration: none !important;
        transform: translateZ(0);
        transition:
            transform 0.24s ease,
            border-color 0.24s ease,
            box-shadow 0.24s ease,
            filter 0.24s ease;
    }

    .ccrl-room-links .ccrl-banner::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: transparent;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    .ccrl-room-links .ccrl-banner::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: -92%;
        left: -44%;
        width: 25%;
        height: 290%;
        pointer-events: none;
        opacity: 0;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.68),
                transparent
            );
        filter: blur(0.5px);
        transform: rotate(19deg);
    }

    .ccrl-room-links .ccrl-banner:hover {
        border-color: rgba(185, 103, 139, 0.72);
        box-shadow:
            0 12px 24px rgba(91, 34, 61, 0.23),
            inset 0 0 0 1px rgba(255, 255, 255, 0.25);
        filter:
            brightness(1.025)
            saturate(1.04);
        transform: translateY(-2px);
    }

    .ccrl-room-links .ccrl-banner:hover::after {
        animation: ccrlLuxuryShine 0.92s ease;
    }

    .ccrl-room-links .ccrl-banner-copy {
        position: absolute;
        z-index: 4;
        right: 13px;
        bottom: 12px;
        left: 13px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        pointer-events: none;
    }

    .ccrl-room-links .ccrl-banner-text {
        display: block;
        width: auto;
        max-width: calc(100% - 34px);
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ccrl-room-links .ccrl-banner-title {
        display: block;
        margin: 0;
        color: #fff !important;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.045em;
        line-height: 1.25;
        text-shadow:
            0 2px 2px rgba(43, 11, 29, 0.98),
            0 0 7px rgba(43, 11, 29, 0.96),
            0 0 14px rgba(43, 11, 29, 0.62);
    }

    .ccrl-room-links .ccrl-banner-arrow {
        display: inline-flex;
        width: auto;
        height: auto;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        padding: 0 1px 1px 0;
        color: #ffe6ad;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-family: Arial, sans-serif;
        font-size: 25px;
        line-height: 1;
        text-shadow:
            0 2px 3px rgba(45, 10, 29, 0.96),
            0 0 7px rgba(45, 10, 29, 0.78);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: transform 0.22s ease;
    }

    .ccrl-room-links .ccrl-banner:hover .ccrl-banner-arrow {
        transform: translateX(3px);
    }

    /*
     * =========================================
     * 全部房间
     * =========================================
     */

    .ccrl-room-links .ccrl-all {
        min-height: 107px;
        border-color: rgba(191, 139, 82, 0.76);
        box-shadow:
            0 9px 20px rgba(91, 34, 61, 0.19),
            inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    .ccrl-room-links .ccrl-all::before {
        background: transparent;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    .ccrl-room-links .ccrl-all-mark {
        position: absolute;
        z-index: 5;
        top: 9px;
        left: 9px;
        right: auto;
        display: inline-flex;
        width: 27px;
        height: 27px;
        align-items: center;
        justify-content: center;
        color: var(--ccrl-gold-light);
        border: 1px solid rgba(231, 203, 145, 0.68);
        border-radius: 6px;
        background:
            linear-gradient(
                145deg,
                rgba(116, 49, 77, 0.88),
                rgba(77, 25, 48, 0.9)
            );
        box-shadow:
            0 5px 11px rgba(44, 12, 28, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
        font-size: 11px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /*
     * =========================================
     * 泳池：视觉稍弱
     * =========================================
     */

    .ccrl-room-links .ccrl-pool {
        min-height: 92px;
        border-color: rgba(193, 148, 90, 0.58);
        border-radius: 7px;
        box-shadow:
            0 7px 16px rgba(91, 34, 61, 0.14),
            inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    }

    .ccrl-room-links .ccrl-pool::before {
        background: transparent;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }

    .ccrl-room-links .ccrl-pool .ccrl-banner-title {
        font-size: 17px;
    }

    /*
     * =========================================
     * 四个平级房间卡片
     * =========================================
     */

    .ccrl-room-links .ccrl-room-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0 0 10px;
    }

    .ccrl-room-links .ccrl-room-card {
        position: relative;
        display: block;
        min-width: 0;
        min-height: 82px;
        overflow: hidden;
        color: #fff !important;
        border: 1px solid rgba(197, 151, 86, 0.56);
        border-radius: 7px;
        outline: none;
        background-color: var(--ccrl-wine-deep);
        background-image: var(--ccrl-image);
        background-repeat: no-repeat;
        background-position: var(--ccrl-position, center);
        background-size: cover;
        box-shadow:
            0 6px 14px rgba(91, 34, 61, 0.13),
            inset 0 0 0 1px rgba(255, 255, 255, 0.17);
        text-decoration: none !important;
        transform: translateZ(0);
        transition:
            transform 0.22s ease,
            border-color 0.22s ease,
            box-shadow 0.22s ease,
            filter 0.22s ease;
    }

    .ccrl-room-links .ccrl-room-card::before {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: transparent;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    }

    .ccrl-room-links .ccrl-room-card::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: -90%;
        left: -55%;
        width: 29%;
        height: 280%;
        pointer-events: none;
        opacity: 0;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.58),
                transparent
            );
        transform: rotate(19deg);
    }

    .ccrl-room-links .ccrl-room-card:hover {
        border-color: rgba(180, 97, 132, 0.72);
        box-shadow:
            0 9px 19px rgba(91, 34, 61, 0.19),
            inset 0 0 0 1px rgba(255, 255, 255, 0.22);
        filter:
            brightness(1.035)
            saturate(1.05);
        transform: translateY(-2px);
    }

    .ccrl-room-links .ccrl-room-card:hover::after {
        animation: ccrlLuxuryShine 0.82s ease;
    }

    .ccrl-room-links .ccrl-room-name {
        position: absolute;
        z-index: 4;
        right: 9px;
        bottom: 8px;
        left: 9px;
        display: flex;
        width: auto;
        max-width: none;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0;
        color: #fff;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.035em;
        line-height: 1.2;
        text-shadow:
            0 2px 2px rgba(43, 10, 28, 0.98),
            0 0 7px rgba(43, 10, 28, 0.94),
            0 0 12px rgba(43, 10, 28, 0.58);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ccrl-room-links .ccrl-room-name::after {
        content: "›";
        flex: 0 0 auto;
        color: #ffe6ad;
        font-family: Arial, sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        text-shadow:
            0 2px 3px rgba(43, 10, 28, 0.96),
            0 0 6px rgba(43, 10, 28, 0.72);
        transition: transform 0.2s ease;
    }

    .ccrl-room-links .ccrl-room-card:hover .ccrl-room-name::after {
        transform: translateX(2px);
    }

    /*
     * =========================================
     * 更多房间
     * =========================================
     */

    .ccrl-room-links .ccrl-more {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(197, 151, 86, 0.5);
        border-radius: 13px;
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.98),
                rgba(255, 243, 248, 0.95)
            );
        box-shadow:
            0 6px 14px rgba(101, 41, 67, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
    }

    .ccrl-room-links .ccrl-more::before {
        content: "";
        position: absolute;
        top: -48px;
        right: -42px;
        width: 102px;
        height: 102px;
        border-radius: 50%;
        pointer-events: none;
        background:
            radial-gradient(
                circle,
                rgba(208, 124, 160, 0.15),
                rgba(208, 124, 160, 0)
            );
    }

    .ccrl-room-links .ccrl-more-button {
        position: relative;
        z-index: 2;
        display: grid;
        width: 100%;
        min-height: 48px;
        grid-template-columns: 33px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 9px;
        margin: 0;
        padding: 7px 10px;
        appearance: none;
        -webkit-appearance: none;
        color: var(--ccrl-wine);
        border: 0;
        border-radius: 12px;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-align: left;
        cursor: pointer;
    }

    .ccrl-room-links .ccrl-more-button::after {
        content: "";
        position: absolute;
        top: -90%;
        left: -45%;
        width: 25%;
        height: 270%;
        pointer-events: none;
        opacity: 0;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.75),
                transparent
            );
        transform: rotate(18deg);
    }

    .ccrl-room-links .ccrl-more-button:hover::after {
        animation: ccrlLuxuryShine 0.82s ease;
    }

    .ccrl-room-links .ccrl-more-symbol {
        display: inline-flex;
        width: 33px;
        height: 33px;
        align-items: center;
        justify-content: center;
        color: #fff;
        border: 1px solid rgba(226, 196, 133, 0.6);
        border-radius: 10px;
        background:
            linear-gradient(
                145deg,
                #8a3b5b,
                #bd6e90
            );
        box-shadow:
            0 5px 11px rgba(104, 42, 69, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.35);
        font-size: 11px;
        line-height: 1;
    }

    .ccrl-room-links .ccrl-more-copy {
        min-width: 0;
    }

    .ccrl-room-links .ccrl-more-title {
        display: block;
        color: var(--ccrl-wine);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.025em;
        line-height: 1.35;
    }

    .ccrl-room-links .ccrl-more-hint {
        display: block;
        margin-top: 2px;
        overflow: hidden;
        color: var(--ccrl-muted);
        font-family: Georgia, serif;
        font-size: 9.5px;
        letter-spacing: 0.07em;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ccrl-room-links .ccrl-more-arrow {
        display: inline-flex;
        width: 22px;
        height: 22px;
        align-items: center;
        justify-content: center;
        color: var(--ccrl-gold);
        border-radius: 50%;
        background: rgba(255, 248, 231, 0.92);
        font-family: Arial, sans-serif;
        font-size: 15px;
        line-height: 1;
        transition: transform 0.22s ease;
    }

    .ccrl-room-links .ccrl-more-button:hover {
        color: var(--ccrl-wine-deep);
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.86),
                rgba(255, 234, 242, 0.76)
            );
    }

    .ccrl-room-links .ccrl-more-button[aria-expanded="true"]
    .ccrl-more-arrow {
        transform: rotate(180deg);
    }

    /*
     * =========================================
     * 展开菜单：无滚动条，完整显示
     * =========================================
     */

    .ccrl-room-links .ccrl-more-menu {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 13px;
        row-gap: 0;
        width: 100%;
        max-height: 0;
        padding: 0 11px;
        overflow: hidden;
        opacity: 0;
        border-top: 1px solid transparent;
        transition:
            max-height 0.36s ease,
            padding 0.36s ease,
            opacity 0.25s ease,
            border-color 0.36s ease;
    }

    .ccrl-room-links .ccrl-more-menu.is-open {
        max-height: var(--ccrl-more-menu-height, 1600px);
        padding-top: 5px;
        padding-bottom: 9px;
        opacity: 1;
        border-top-color: rgba(199, 157, 93, 0.22);
    }

    .ccrl-room-links .ccrl-more-link {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 34px;
        align-items: center;
        gap: 7px;
        padding: 6px 1px;
        color: #724057 !important;
        border: 0;
        border-bottom: 1px solid rgba(166, 105, 132, 0.14);
        outline: none;
        background: transparent;
        font-size: 13px;
        font-weight: 650;
        letter-spacing: 0.025em;
        line-height: 1.35;
        text-decoration: none !important;
        transition:
            color 0.2s ease,
            padding-left 0.2s ease,
            background 0.2s ease;
    }

    .ccrl-room-links .ccrl-more-link::before {
        content: "◆";
        flex: 0 0 auto;
        color: var(--ccrl-gold);
        font-size: 6px;
    }

    .ccrl-room-links .ccrl-more-link::after {
        content: "›";
        margin-left: auto;
        color: #bd7895;
        font-family: Arial, sans-serif;
        font-size: 15px;
        line-height: 1;
    }

    .ccrl-room-links .ccrl-more-link:hover {
        padding-left: 4px;
        color: var(--ccrl-wine) !important;
        background:
            linear-gradient(
                90deg,
                rgba(255, 222, 235, 0.24),
                transparent
            );
    }

    /*
 * 只有总数为奇数时，
 * 最后一项才横跨两列。
 * 总数为偶数时自动保持两列整齐排列。
 */
.ccrl-room-links
.ccrl-more-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

    /*
     * =========================================
     * 底部装饰
     * =========================================
     */

    .ccrl-room-links .ccrl-footer-decoration {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        color: var(--ccrl-gold);
        font-size: 10px;
    }

    .ccrl-room-links .ccrl-footer-decoration::before,
    .ccrl-room-links .ccrl-footer-decoration::after {
        content: "";
        width: 47px;
        height: 1px;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(197, 154, 88, 0.62)
            );
    }

    .ccrl-room-links .ccrl-footer-decoration::after {
        background:
            linear-gradient(
                90deg,
                rgba(197, 154, 88, 0.62),
                transparent
            );
    }

    /*
     * =========================================
     * 焦点
     * =========================================
     */

    .ccrl-room-links .ccrl-banner:focus-visible,
    .ccrl-room-links .ccrl-room-card:focus-visible,
    .ccrl-room-links .ccrl-more-button:focus-visible,
    .ccrl-room-links .ccrl-more-link:focus-visible {
        outline: 3px solid rgba(216, 137, 172, 0.3);
        outline-offset: 2px;
    }

    /*
     * =========================================
     * 动画
     * =========================================
     */


    @keyframes ccrlLuxuryShine {
        0% {
            left: -48%;
            opacity: 0;
        }

        18% {
            opacity: 0.92;
        }

        100% {
            left: 128%;
            opacity: 0;
        }
    }

    /*
     * =========================================
     * 响应式
     * =========================================
     */

    @media (max-width: 767px) {
        .ccrl-room-links {
            max-width: 100%;
        }
    }

    @media (max-width: 380px) {
        .ccrl-room-links .ccrl-inner {
            padding-right: 12px;
            padding-left: 12px;
        }

        .ccrl-room-links .ccrl-heading {
            gap: 7px;
        }

        .ccrl-room-links .ccrl-heading-line {
            width: 24px;
            flex-basis: 24px;
        }

        .ccrl-room-links .ccrl-banner {
            min-height: 98px;
        }


        .ccrl-room-links .ccrl-all {
            min-height: 101px;
        }

        .ccrl-room-links .ccrl-pool {
            min-height: 88px;
        }

        .ccrl-room-links .ccrl-banner-copy {
            right: 11px;
            bottom: 10px;
            left: 11px;
        }

        .ccrl-room-links .ccrl-banner-title {
            font-size: 16px;
        }


        .ccrl-room-links .ccrl-room-grid {
            gap: 7px;
        }

        .ccrl-room-links .ccrl-room-card {
            min-height: 76px;
        }

        .ccrl-room-links .ccrl-room-name {
            font-size: 13px;
        }

        .ccrl-room-links .ccrl-more-menu {
            column-gap: 8px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ccrl-room-links *,
        .ccrl-room-links *::before,
        .ccrl-room-links *::after {
            scroll-behavior: auto !important;
            animation: none !important;
            transition: none !important;
        }
    }

/* Makers 公共资料载入状态 */
.ccrl-room-links .ccrl-directory-status {
  margin: 10px 0 0;
  color: var(--ccrl-muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.ccrl-room-links .ccrl-directory-status[hidden] {
  display: none !important;
}

.ccrl-room-links.is-loading .ccrl-shell {
  opacity: 0.72;
}

/* 分类 archive 公共问候语中的玩家名字。 */
[data-p1000-room-message] .player,
.ccrl-room-links .player {
  color: #8a2f55;
  font-weight: 800;
}