/*=========================================
        ROOMI Forum V2
        Official.css
=========================================*/


/*=========================================
        Main Layout
=========================================*/

.official-layout{


    width:1100px;

    max-width:90%;

    margin:40px auto;

    display:flex;

    gap:30px;

    align-items:flex-start;

}


.official-main{


    width:780px;

}



/*=========================================
        共用區塊
=========================================*/

.board-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}


.board-header h2{

    margin:0;

    font-size:28px;

    color:#5b3a29;

}


.board-subtitle{

    color:#999;

    font-size:14px;

    letter-spacing:1px;

}



/*=========================================
        Banner
=========================================*/

.official-banner{

    background:#fff8dc;

    border:4px solid #6b4b34;

    border-radius:18px;

    padding:30px;

    text-align:center;

    box-shadow:7px 7px 0 #d8b58a;

    margin-bottom:28px;

}


.official-banner h1{

    margin:0;

    font-size:42px;

    color:#5b3a29;

    font-family:"Pixelify Sans","Zen Maru Gothic";

}


.official-banner p{

    margin-top:10px;

    color:#6b6b6b;

    font-size:17px;

}



/*=========================================
        Statistics
=========================================*/

.forum-stats{

    display:grid;

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

    gap:18px;

    margin-bottom:30px;

}



.stat-card{

    background:#ffffff;

    border:4px solid #6b4b34;

    border-radius:16px;

    padding:18px;

    text-align:center;

    box-shadow:6px 6px 0 #d8b58a;

    transition:.25s;

}


.stat-card:hover{

    transform:translateY(-6px);

    box-shadow:8px 10px 0 #b98b63;

}



.stat-icon{

    font-size:34px;

    margin-bottom:8px;

}



.stat-value{

    font-size:30px;

    font-weight:bold;

    color:#5b3a29;

    font-family:"Pixelify Sans";

}



.stat-label{

    margin-top:6px;

    font-size:14px;

    color:#777;

}
/*=========================================
        置頂公告
=========================================*/

.pin-board{

    background:#ffffff;

    border:4px solid #6b4b34;

    border-radius:18px;

    padding:25px;

    margin-bottom:28px;

    box-shadow:6px 6px 0 #d8b58a;

}



.pin-post{

    display:flex;

    gap:20px;

    align-items:flex-start;

}



.pin-label{

    width:80px;

    min-width:80px;

    background:#ffd75f;

    color:#6b4b34;

    font-weight:bold;

    text-align:center;

    padding:10px;

    border-radius:12px;

    border:2px solid #e3b63b;

    font-size:15px;

}



.pin-body{

    flex:1;

}



.pin-body h3{

    margin:0 0 10px;

    font-size:28px;

    color:#5b3a29;

}



.pin-body p{

    margin:0;

    color:#666;

    line-height:1.8;

}



.pin-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:18px;

    font-size:14px;

    color:#888;

}



/*=========================================
        Forum Toolbar
=========================================*/

.forum-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:#ffffff;

    border:4px solid #6b4b34;

    border-radius:18px;

    padding:18px 20px;

    margin-bottom:28px;

    box-shadow:6px 6px 0 #d8b58a;

}



.toolbar-left{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.tool-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:#5b3a29;

    background:#fff8dc;

    border:2px solid #d8b58a;

    border-radius:30px;

    padding:8px 16px;

    font-size:14px;

    font-weight:bold;

    transition:.25s;

}



.tool-btn:hover{

    background:#ffe8a3;

    transform:translateY(-2px);

}



.tool-btn.active{

    background:#32acd6;

    color:#ffffff;

    border-color:#32acd6;

}



/*=========================================
        Search
=========================================*/

.toolbar-right{

    display:flex;

    align-items:center;

    gap:10px;

}



.toolbar-right input{

    width:250px;

    padding:10px 14px;

    border:2px solid #d8b58a;

    border-radius:30px;

    outline:none;

    transition:.25s;

    font-size:14px;

}



.toolbar-right input:focus{

    border-color:#32acd6;

    box-shadow:0 0 0 4px rgba(50,172,214,.15);

}



.toolbar-right button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#32acd6;

    color:#ffffff;

    cursor:pointer;

    font-size:16px;

    transition:.25s;

}



.toolbar-right button:hover{

    background:#2498c2;

    transform:scale(1.08);

}
/*=========================================
        Forum List
=========================================*/

.notice-board{

    background:#ffffff;

    border:4px solid #6b4b34;

    border-radius:18px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:6px 6px 0 #d8b58a;

}



.forum-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}



/*=========================================
        Topic
=========================================*/

.forum-topic{

    display:flex;

    align-items:center;

    gap:18px;

    padding:16px 18px;

    border:2px solid #ead8c1;

    border-radius:14px;

    background:#fffdf7;

    transition:.25s;

}



.forum-topic:hover{

    transform:translateX(6px);

    background:#fff4cf;

    border-color:#f2c766;

    box-shadow:0 6px 14px rgba(0,0,0,.08);

}



/*=========================================
        Topic Tag
=========================================*/

.topic-tag{

    width:90px;

    min-width:90px;

    text-align:center;

    padding:8px 10px;

    border-radius:10px;

    font-size:14px;

    font-weight:bold;

    color:#ffffff;

}



/* 系統公告 */

.topic-tag.system{

    background:#32acd6;

}



/* 活動 */

.topic-tag.event{

    background:#ff9f43;

}



/* 更新 */

.topic-tag.update{

    background:#52b788;

}



/* 維護 */

.topic-tag.maintain{

    background:#d9534f;

}



/*=========================================
        Topic Main
=========================================*/

.topic-main{

    flex:1;

}



.topic-title{

    display:inline-block;

    text-decoration:none;

    color:#5b3a29;

    font-size:20px;

    font-weight:bold;

    transition:.2s;

}



.topic-title:hover{

    color:#32acd6;

}



/*=========================================
        Topic Meta
=========================================*/

.topic-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:8px;

    font-size:13px;

    color:#888;

}



.topic-meta span{

    display:flex;

    align-items:center;

}



/*=========================================
        Arrow
=========================================*/

.topic-arrow{

    font-size:26px;

    color:#999;

    transition:.25s;

}



.forum-topic:hover .topic-arrow{

    color:#32acd6;

    transform:translateX(6px);

}



/*=========================================
        Pagination
=========================================*/

.page-bar{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin:35px 0;

}



.page-btn{

    padding:10px 22px;

    border:none;

    border-radius:12px;

    background:#32acd6;

    color:#ffffff;

    cursor:pointer;

    font-weight:bold;

    transition:.25s;

}



.page-btn:hover{

    background:#2395be;

    transform:translateY(-2px);

}



.page-number{

    font-size:16px;

    font-weight:bold;

    color:#5b3a29;

}



.current-page{

    color:#32acd6;

    font-size:20px;

}

/*=========================================
        Sidebar
=========================================*/

.roomi-widget-side{

    width:300px;

    flex-shrink:0;

}



.roomi-widget-side .side-box{

    margin-bottom:22px;

}



/*=========================================
        Sidebar Animation
=========================================*/

.side-box{

    transition:.25s;

}



.side-box:hover{

    transform:translateY(-4px);

}



/*=========================================
        Forum Animation
=========================================*/

.pin-board,
.forum-toolbar,
.notice-board{

    transition:.25s;

}



.pin-board:hover,
.forum-toolbar:hover,
.notice-board:hover{

    box-shadow:10px 10px 0 #c8a170;

}



/*=========================================
        Scrollbar
=========================================*/

::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#f6e8d3;

}



::-webkit-scrollbar-thumb{

    background:#cda274;

    border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

    background:#b88856;

}



/*=========================================
        Selection
=========================================*/

::selection{

    background:#32acd6;

    color:#ffffff;

}



/*=========================================
        Responsive
=========================================*/

@media (max-width:1200px){

    .official-layout{

        flex-direction:column;

    }

    .roomi-widget-side{

        width:100%;

    }

}



/* 平板 */

@media (max-width:900px){

    .forum-stats{

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

    }

    .forum-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .toolbar-right{

        width:100%;

    }

    .toolbar-right input{

        width:100%;

    }

}



/* 手機 */

@media (max-width:768px){

    .official-layout{

        width:95%;

    }

    .official-banner{

        padding:22px;

    }

    .official-banner h1{

        font-size:30px;

    }

    .official-banner p{

        font-size:15px;

    }

    .forum-stats{

        grid-template-columns:1fr;

    }

    .pin-post{

        flex-direction:column;

    }

    .pin-label{

        width:100%;

    }

    .forum-topic{

        flex-direction:column;

        align-items:flex-start;

    }

    .topic-tag{

        width:100%;

    }

    .topic-meta{

        gap:10px;

    }

    .topic-arrow{

        display:none;

    }

    .page-bar{

        flex-direction:column;

    }

}




}
/* ==========================
 ROOMI RIGHT WIDGET
========================== */


.forum-container{

display:flex;

gap:35px;

align-items:flex-start;

}



.roomi-widget-side{

width:230px;

flex-shrink:0;

}





.side-box{

background:#fffdf0;

border:4px solid #68452f;

border-radius:15px;

padding:10px;

margin-bottom:30px;   /* 增加間距 */

box-shadow:5px 5px #d9b985;

}




.side-title{

background:#68452f;

color:white;

text-align:center;

padding:8px;

border-radius:10px;

font-weight:bold;

}




.assistant-box{

text-align:center;

}



.assistant-cat img{

width:80px;

height:80px;

object-fit:contain;

image-rendering:auto ;

}

/* =====================
 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;

}


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

footer{

    margin-top:50px;

    padding:25px;

    text-align:center;

    color:#ffffff;

    font-size:15px;

}