/* =========================================================
   首頁：遊戲列表 / 村子卡片   
========================================================= */

.room-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
}

.room-card{
    position:relative;
    display:block;
    overflow:hidden;

    padding:0;

    border-radius:15px;
    text-decoration:none;
    color:#1f2937 !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.78),
            rgba(255,255,255,.56)
        );

    border:1px solid rgba(255,255,255,.72);

    box-shadow:
        0 8px 22px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.82);

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

/* 整張卡片的淡淡玻璃反光 */
.room-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.34),
            rgba(255,255,255,0) 42%,
            rgba(255,255,255,.12)
        );
}

/* 左側狀態色條 */
.room-card::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
}

.room-card:hover{
    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.88),
            rgba(255,255,255,.66)
        );

    border-color:rgba(255,255,255,.88);

    box-shadow:
        0 14px 32px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* 狀態色條：募集中 */
.room-card.is-waiting::after{
    background:linear-gradient(
        180deg,
        rgba(249,115,22,.88),
        rgba(253,186,116,.38)
    );
}

/* 狀態色條：進行中 */
.room-card.is-playing::after{
    background:linear-gradient(
        180deg,
        rgba(220,38,38,.88),
        rgba(248,113,113,.38)
    );
}

/* 上半部 */
.room-head{
    position:relative;
    z-index:1;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:13px 16px 8px 18px;
}

/* 左側：狀態 + 番地 */
.room-meta{
    display:flex;
    align-items:center;
    gap:7px;

    flex:0 0 auto;
    min-width:0;
}

/* 狀態標籤：Flat badge */
.room-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:22px;
    padding:0 9px;

    border-radius:6px;

    font-size:12px;
    font-weight:900;
    line-height:1;
    letter-spacing:.04em;

    white-space:nowrap;
}

/* 募集中 badge */
.room-card.is-waiting .room-status-badge{
    color:#9a3412;
    background:#ffedd5;
    border:1px solid #fed7aa;
}

/* 進行中 badge */
.room-card.is-playing .room-status-badge{
    color:#991b1b;
    background:#fee2e2;
    border:1px solid #fecaca;
}

/* 番地 */
.room-no{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:22px;
    padding:0 8px;

    border-radius:6px;

    color:#475569;
    background:#f1f5f9;
    border:1px solid #e2e8f0;

    font-size:12px;
    font-weight:700;
    line-height:1;
    letter-spacing:.02em;

    white-space:nowrap;
}

/* 村名 */
.room-title{
    min-width:0;
    flex:1 1 auto;

    font-size:17px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.02em;
    text-align:right;

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

/* 募集中村名 */
.room-card.is-waiting .room-title{
    color:#7c2d12;
}

/* 進行中村名 */
.room-card.is-playing .room-title{
    color:#7f1d1d;
}


.room-title::after{
    content:none !important;
}

/* 村子說明 */
.room-sub{
    position:relative;
    z-index:1;

    margin:0 16px 0 18px;
    padding:3px 0 3px;

    border-top:1px solid rgba(203,213,225,.68);

    color:#475569;
    font-size:13px;
    line-height:1.4;
    font-weight:600;

    word-break:break-word;
}

.room-sub::before{
    content:none !important;
}

/* 下方圖示區 */
.room-foot{
    position:relative;
    z-index:1;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    padding:7px 16px 10px 18px;

    border-top:1px solid rgba(226,232,240,.78);
    background:rgba(248,250,252,.42);
}

.room-icons{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;

    gap:2px;
}

.room-icons img{
    display:block;
}