/* =================================

ROOMI 2.0
Forum Page CSS

================================= */




/* =========================
   討論版雙欄布局
========================= */


.forum-layout{

    width:1100px;

    max-width:90%;

    margin:40px auto;

    display:flex;

    gap:30px;

    align-items:flex-start;

}




.forum-main{

    width:780px;

}




.chat-box{

    width:280px;

}


/* ================================
   主容器
================================ */


.forum-container{

    width:90%;

    max-width:900px;

    margin:40px auto;

}



/* ================================
   標題區
================================ */


.forum-title{


    background:#fff8dc;


    border:

    6px solid #5b3a29;


    border-radius:20px;


    padding:25px;


    text-align:center;


    box-shadow:

    8px 8px 0px #3b2418;


}



.forum-title h1{


    font-family:

    "Pixelify Sans",
    "Zen Maru Gothic";


    font-size:42px;


    margin:0 0 10px;


    color:#542d15;


}




.forum-title p{


    font-size:18px;

    color:#6b5142;

}






/* ================================
   五大分類卡片區
================================ */


.forum-grid{

    display:grid;

    grid-template-columns:
    repeat(2, 1fr);

    gap:20px;

    margin-top:35px;

}




/* ================================
   分類卡片
================================ */



.forum-card{


    background:#ffffff;


    border:5px solid #67402b;


    border-radius:18px;


    height:230px;


    padding:20px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


    text-decoration:none;


    color:#402515;


    box-shadow:

    8px 8px 0px #d8b58a;


    transition:0.25s;

}


/* ICON */


.forum-icon{


    font-size:60px;


    margin-bottom:15px;


}





.forum-card h2{


    font-family:

    "Zen Maru Gothic";


    font-size:24px;


    margin:8px;


}





.forum-card p{


    font-size:14px;


    line-height:1.6;


    margin:8px 0;


}




/* 數量標籤 */


.forum-count{


    margin-top:15px;


    background:#f4d58d;


    padding:

    6px 18px;


    border-radius:20px;


    font-size:13px;


}







/* ================================
 最新文章
================================ */



.latest-post{


    margin-top:45px;


    background:#fff;


    border:

    5px solid #67402b;


    border-radius:18px;


    padding:25px;


    box-shadow:

    7px 7px 0px #d8b58a;


}




.latest-post h2{


    font-size:28px;


    color:#542d15;


}




.post{


    background:#fff8dc;


    border-left:

    8px solid #d49a38;


    margin:

    15px 0;


    padding:15px;


    border-radius:10px;


    font-size:17px;


}






.post span{


    margin-right:12px;


}







/* ================================
 Footer
================================ */


footer{


    text-align:center;


    margin-top:50px;


    padding:20px;


    color:#ffffff;


}




/* ================================
 手機版
================================ */

/*=================================================
        Official Page Mobile Fix
==================================================*/

@media screen and (max-width: 768px){

/*-------------------------
整體版面
-------------------------*/

.official-layout{

    width:100%;

    max-width:100%;

    padding:12px;

    margin:20px auto;

    display:block;

}

.official-main{

    width:100%;

}


/*-------------------------
Banner
-------------------------*/

.official-banner{

    padding:18px;

    margin-bottom:15px;

}

.official-banner h1{

    font-size:28px;

}

.official-banner p{

    font-size:14px;

}


/*-------------------------
Statistics
-------------------------*/

.forum-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.stat-card{

    padding:12px;

}

.stat-icon{

    font-size:24px;

}

.stat-value{

    font-size:22px;

}


/*-------------------------
置頂公告
-------------------------*/

.pin-post{

    display:block;

}

.pin-label{

    width:80px;

    margin-bottom:12px;

}

.pin-body h3{

    font-size:22px;

}

.pin-body p{

    font-size:14px;

}

.pin-meta{

    display:flex;

    flex-direction:column;

    gap:6px;

}


/*-------------------------
Toolbar
-------------------------*/

.forum-toolbar{

    display:block;

}

.toolbar-left{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:15px;

}

.tool-btn{

    font-size:13px;

    padding:8px 12px;

}

.toolbar-right{

    display:flex;

    width:100%;

}

.toolbar-right input{

    width:100%;

    flex:1;

}

.toolbar-right button{

    width:42px;

    flex-shrink:0;

}


/*-------------------------
公告列表
-------------------------*/

.notice-board{

    padding:15px;

}

.forum-topic{

    display:block;

    padding:14px;

}

.topic-tag{

    display:inline-block;

    width:auto;

    min-width:unset;

    margin-bottom:10px;

}

.topic-main{

    width:100%;

}

.topic-title{

    font-size:18px;

    line-height:1.5;

}

.topic-meta{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:8px;

    margin-top:10px;

}

.topic-arrow{

    display:none;

}


/*-------------------------
Pagination
-------------------------*/

.page-bar{

    flex-wrap:wrap;

    gap:10px;

}

.page-btn{

    width:120px;

}


/*-------------------------
Sidebar
-------------------------*/

.roomi-widget-side{

    width:100%;

    margin-top:20px;

}

.roomi-widget-side .side-box{

    margin-bottom:15px;

}


/*-------------------------
圖片
-------------------------*/

img{

    max-width:100%;

    height:auto;

}


/*-------------------------
避免任何元素超出版面
-------------------------*/

*{

    box-sizing:border-box;

}

}

/* =====================
 ROOMI CAT MESSAGE
===================== */


.assistant-cat{

position:relative;

display:inline-block;

cursor:pointer;

}





.cat-message{

position:absolute;

bottom:90px;

left:50%;

transform:translateX(-50%);


width:180px;


background:#fffdf0;


border:3px solid #68452f;


border-radius:12px;


padding:10px;


font-size:13px;


line-height:1.6;


color:#68452f;


text-align:center;


box-shadow:4px 4px #d9b985;



/* 預設隱藏 */

opacity:0;

visibility:hidden;


transition:.25s;


}





/* 小箭頭 */

.cat-message::after{


content:"";


position:absolute;


bottom:-10px;


left:50%;


transform:translateX(-50%);



border-width:10px 10px 0 10px;


border-style:solid;


border-color:#68452f transparent transparent transparent;


}






/* 滑鼠移入 */


.assistant-cat:hover .cat-message{


opacity:1;

visibility:visible;


}

.assistant-cat img{

animation:catFloat 2s infinite ease-in-out;

}

/* 飄飄貓咪 */

@keyframes catFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


}

.side-box button{

background:#ffd77a;

border:2px solid #68452f;

border-radius:15px;

padding:6px 20px;

cursor:pointer;

}




.visitor-count{

text-align:center;

padding:15px;

}



.visitor-count strong{

font-size:22px;

color:#e8874f;

}


/* =====================
 ROOMI RADIO
===================== */




.radio-player{

background:#3b2a22;

border-radius:12px;

padding:12px;

overflow:hidden;

margin-top:8px;

color:#fff5d7;

font-size:12px;

border:2px solid #68452f;

}



.radio-now{

font-size:11px;

color:#ffd86b;

letter-spacing:1px;

margin-bottom:10px;

}




.radio-song{

background:#fff5d7;

color:#68452f;

text-align:center;

padding:8px;

border-radius:8px;

font-size:14px;

margin-bottom:12px;

}





.radio-progress{

height:8px;

background:#5c4638;

border-radius:10px;

overflow:hidden;

}



.radio-progress span{

display:block;

width:65%;

height:100%;

background:#ffd86b;

}





.radio-control{

display:flex;

justify-content:center;

gap:8px;

margin:12px 0;

}





.radio-control button{

width:35px;

height:28px;

background:#8a5a3c;

color:white;

border:2px solid #c28b52;

border-radius:6px;

cursor:pointer;

}



.radio-control button:hover{

background:#ffd86b;

color:#68452f;

}




.playlist-title{

border-top:1px solid #8a5a3c;

padding-top:8px;

color:#ffd86b;

}





.playlist p{

margin:5px 0;

font-size:12px;

color:#fff;

}


@keyframes musicProgress{


from{

width:10%;

}


to{

width:90%;

}


}

.radio-song::after{

content:" ♫ ♪";

animation:music 1s infinite;

}


@keyframes music{

50%{

opacity:.3;

}

}


.playlist{

border-top:1px solid #555;

padding-top:8px;

line-height:1.8;

color:#ddd;

}

/* =====================
 天氣
===================== */


.weather-box{

text-align:center;

padding:15px;

}



/* =====================
 公告
===================== */

.notice-box{

background:#fff1a8;

padding:8px;

font-size:13px;

overflow:hidden;

}

.notice-box{

background:#fff5b8;

border:2px solid #d8b26d;

border-radius:8px;

padding:8px;

height:80px;

overflow:hidden;

font-size:13px;

line-height:1.5;

color:#68452f;

}