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

ROOMI 2.0
MEMBER CENTER FINAL CSS

Only for member page

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


/* =========================
        MEMBER BANNER
========================= */


.member-banner{


    width:85%;


    max-width:1200px;


    margin:40px auto 35px;



    padding:35px;



    text-align:center;



    background:

    rgba(255,240,255,.9);



    border:

    5px solid #d19bf2;



    border-radius:30px;



    box-shadow:

    0 10px 0 #a978d6;



}






.member-banner h1{


    margin:0;



    font-family:

    "Pixelify Sans",
    sans-serif;



    font-size:42px;



    color:#934dcc;



}





.member-banner p{


    margin-top:15px;


    color:#80618f;


}









/* =========================
        MAIN LAYOUT
========================= */



.member-wrapper{


    width:85%;



    max-width:1200px;



    margin:

    0 auto 50px;



    display:flex;



    align-items:flex-start;



    gap:30px;



}








/* =========================
        LEFT MENU
========================= */


.member-menu{


    width:240px;



    flex-shrink:0;



    padding:20px;



    background:

    rgba(255,240,255,.9);



    border:

    5px solid #d19bf2;



    border-radius:25px;



    box-shadow:

    0 10px 0 #a978d6;



}





.menu-header{


    text-align:center;



    margin-bottom:20px;



    font-family:

    "Pixelify Sans";



    font-size:24px;



    color:#934dcc;



}







.member-menu ul{


    padding:0;



    margin:0;



    list-style:none;



}





.member-menu li{


    padding:14px;



    margin-bottom:12px;



    border-radius:15px;



    cursor:pointer;



    transition:.25s;



    color:#69448b;



}






.member-menu li:hover{


    background:#ead2ff;



    transform:

    translateX(8px);



}






.member-menu li.active{


    background:#cda0f3;



    color:white;



    box-shadow:

    0 5px 0 #9564c0;



}









/* =========================
        RIGHT CONTENT
========================= */


.member-content{


    flex:1;



    min-width:0;



}





.content-page{


    display:none;



}





.content-page.active-page{


    display:block;



}








/* =========================
        CARD
========================= */


.member-card{


    padding:30px;



    margin-bottom:30px;



    background:

    rgba(255,245,255,.92);



    border:

    5px solid #d19bf2;



    border-radius:25px;



    box-shadow:

    0 10px 0 #a978d6;



}





.member-card h2{


    margin-top:0;



    color:#934dcc;



    font-size:28px;



}





.card-line{


    width:100%;



    height:3px;



    background:#dfb5ff;



    margin:

    15px 0 25px;



}
/* =================================================

        PROFILE AREA

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



.profile-area{


    display:flex;


    align-items:center;


    gap:40px;



}







.avatar-box{


    width:150px;


    height:150px;



    flex-shrink:0;



    border:

    6px solid #c58bef;



    border-radius:25px;



    overflow:hidden;



    background:white;



}






.avatar-box img{


    width:100%;



    height:100%;



    object-fit:cover;



}







.profile-detail{


    flex:1;



}







.profile-row{


    display:flex;



    margin-bottom:15px;



    font-size:16px;



}







.profile-row span{


    width:120px;



    color:#a172c5;



}







.profile-row strong{


    color:#593878;



}







.profile-action{


    margin-top:25px;



}









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

        BUTTON

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





.pixel-button,


.dashboard-card button{


    padding:

    12px 22px;



    border:none;



    border-radius:15px;



    cursor:pointer;



    background:#ffe79a;



    color:#5b421d;



    font-weight:bold;



    border-bottom:

    5px solid #d0a447;



    transition:.2s;



}






.pixel-button:hover,


.dashboard-card button:hover{


    transform:

    translateY(-3px);



}









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

        SECURITY CENTER

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





.section-desc{


    color:#80618f;



    margin-bottom:25px;



}








.security-box{


    display:flex;



    align-items:center;



    justify-content:space-between;



    gap:20px;



    padding:20px;



    margin-bottom:18px;



    background:

    rgba(255,240,255,.8);



    border:

    3px solid #dfb5ff;



    border-radius:20px;



}







.security-icon{


    font-size:35px;



}







.security-info{


    flex:1;



}






.security-info h3{


    margin:0 0 8px;



    color:#934dcc;



}






.security-info p{


    margin:5px 0;



}






.status-success{


    color:#4d9b63;



    font-weight:bold;



}






.status-normal{


    color:#80618f;



}






.status-coming{


    color:#aa86c4;



}






.coming-soon{


    opacity:.75;



}








.disabled{


    cursor:not-allowed;



}









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

        WALLET

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





.wallet-main{


    display:flex;



    align-items:center;



    gap:25px;



    padding:25px;



    margin-bottom:30px;



    background:

    rgba(250,230,255,.8);



    border-radius:20px;



    border:

    3px solid #dfb5ff;



}







.wallet-icon{


    font-size:60px;



}







.wallet-info p{


    margin:0;



    color:#80618f;



}







.wallet-info h1{


    margin:5px 0;



    font-size:45px;



    color:#934dcc;



}








.wallet-list{


    display:grid;



    grid-template-columns:

    repeat(3,1fr);



    gap:20px;



}







.wallet-item{


    padding:25px;



    text-align:center;



    background:white;



    border:

    3px solid #dfb5ff;



    border-radius:20px;



}






.wallet-item h3{


    color:#934dcc;



}






.wallet-item strong{


    display:block;



    margin:15px;



    font-size:25px;



    color:#6d438d;



}





.coming-box{


    margin-top:25px;



    padding:20px;



    text-align:center;



    background:#f1ddff;



    border-radius:20px;



    border:

    3px dashed #cda0ef;



    color:#80618f;



}

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

        DASHBOARD

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



.member-dashboard{


    display:grid;


    grid-template-columns:

    repeat(4,1fr);



    gap:20px;



    margin-bottom:30px;



}







.dashboard-card{


    padding:25px;



    text-align:center;



    background:

    rgba(255,240,255,.9);



    border:

    4px solid #d19bf2;



    border-radius:20px;



    box-shadow:

    0 8px 0 #a978d6;



    transition:.25s;



}






.dashboard-card:hover{


    transform:

    translateY(-5px);



}






.dashboard-card h3{


    color:#934dcc;



    margin-top:0;



}






.dashboard-card strong{


    display:block;



    margin:15px;



    font-size:32px;



    color:#6d438d;



}









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

        HISTORY TABLE

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





.history-table{


    width:100%;



    border-collapse:collapse;



    overflow:hidden;



}







.history-table th{


    padding:15px;



    background:#ddb9fa;



    color:#593878;



}







.history-table td{


    padding:15px;



    text-align:center;



    border-bottom:

    2px dashed #e0baff;



}







.history-table tr:hover{


    background:#faf0ff;



}









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

        NOTICE CENTER

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





.notice-list{


    display:flex;



    flex-direction:column;



    gap:15px;



}







.notice-item{


    display:flex;



    align-items:flex-start;



    gap:20px;



    padding:20px;



    background:

    rgba(255,240,255,.85);



    border:

    3px solid #dfb5ff;



    border-radius:20px;



}







.notice-item span{


    font-size:30px;



}






.notice-item h3{


    margin:0 0 8px;



    color:#934dcc;



}






.notice-item p{


    margin:5px 0;



}









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

        SUPPORT CENTER

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





.support-box{


    padding:25px;



    margin-bottom:20px;



    background:

    rgba(255,240,255,.85);



    border:

    3px solid #dfb5ff;



    border-radius:20px;



}






.support-box h3{


    color:#934dcc;



    margin-top:0;



}









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

        ACCOUNT SETTING

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





.setting-item{


    display:flex;



    justify-content:space-between;



    align-items:center;



    gap:20px;



    padding:20px;



    margin-bottom:15px;



    background:

    rgba(255,240,255,.85);



    border:

    3px solid #dfb5ff;



    border-radius:20px;



}







.setting-item h3{


    margin:0 0 8px;



    color:#934dcc;



}






.setting-item p{


    margin:0;



    color:#80618f;



}







.setting-item.danger{


    border-color:#ffb5c5;



}







.setting-item.danger h3{


    color:#d65c7a;



}









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

        FOOTER PLACE HOLDER

        (不控制 footer)

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



/*
Footer 交由 style.css 控制

member.css 不干涉全站 Footer

*/







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

        RESPONSIVE

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






@media(max-width:1100px){



.member-wrapper{


    width:90%;



}



.member-dashboard{


    grid-template-columns:

    repeat(2,1fr);



}



.wallet-list{


    grid-template-columns:

    repeat(2,1fr);



}



}









@media(max-width:800px){





.member-wrapper{


    flex-direction:column;



}





.member-menu{


    width:100%;



}





.member-content{


    width:100%;



}





.profile-area{


    flex-direction:column;



    text-align:center;



}





.profile-row{


    flex-direction:column;



}



.profile-row span{


    width:auto;



    margin-bottom:5px;



}







.security-box{


    flex-direction:column;



    text-align:center;



}







.wallet-list{


    grid-template-columns:

    1fr;



}






.member-dashboard{


    grid-template-columns:

    1fr;



}






.setting-item{


    flex-direction:column;



    text-align:center;



}



}









@media(max-width:500px){





.member-banner{


    width:90%;



    padding:25px 15px;



}






.member-banner h1{


    font-size:30px;



}






.member-card{


    padding:20px;



}





.history-table{


    display:block;



    overflow-x:auto;



    white-space:nowrap;



}



}

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

ROOMI MEMBER PIXEL UI UPGRADE

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


/* =========================
        PIXEL CARD EFFECT
========================= */


.member-card,
.member-menu,
.member-banner,
.dashboard-card{


    position:relative;


}



/* 四角像素裝飾 */


.member-card::before,
.member-menu::before,
.member-banner::before{


    content:"";


    position:absolute;


    top:-5px;


    left:-5px;


    width:18px;


    height:18px;


    border-top:5px solid #934dcc;


    border-left:5px solid #934dcc;


}



.member-card::after,
.member-menu::after,
.member-banner::after{


    content:"";


    position:absolute;


    right:-5px;


    bottom:-5px;


    width:18px;


    height:18px;


    border-right:5px solid #934dcc;


    border-bottom:5px solid #934dcc;


}







/* =========================
        BANNER PIXEL STYLE
========================= */


.member-banner{


    overflow:hidden;


}



.member-banner h1{


    text-shadow:


    3px 3px 0 #cda0f3;


    letter-spacing:2px;


}






.member-banner p{


    letter-spacing:1px;


}








/* =========================
        RPG MENU STYLE
========================= */


.member-menu{


    background:


    linear-gradient(

    145deg,

    rgba(255,240,255,.95),

    rgba(245,220,255,.9)

    );


}






.menu-header{


    border-bottom:


    3px dashed #d19bf2;


    padding-bottom:15px;


}





.member-menu li{


    position:relative;


    font-size:16px;


}





.member-menu li::before{


    content:"";


    opacity:0;


    margin-right:8px;


}





.member-menu li:hover::before{


    content:"▶";


    opacity:1;


}






.member-menu li.active{


    animation:

    menuGlow 1.8s infinite alternate;


}






@keyframes menuGlow{


from{


box-shadow:

0 5px 0 #9564c0;


}



to{


box-shadow:

0 5px 0 #9564c0,

0 0 15px #d8aaff;


}


}









/* =========================
        CONTENT CARD RPG
========================= */


.member-card{


    transition:.25s;


}





.member-card:hover{


    transform:


    translateY(-5px);


}









/* =========================
        PIXEL BUTTON
========================= */



.pixel-button,
.dashboard-card button{


    position:relative;


    overflow:hidden;


}





.pixel-button:active,
.dashboard-card button:active{


    transform:


    translateY(4px);


    border-bottom:


    1px solid #d0a447;


}









/* =========================
        DASHBOARD CARD
========================= */


.dashboard-card{


    transition:.25s;


}




.dashboard-card:hover{


    transform:


    translateY(-8px);


    box-shadow:


    0 12px 0 #a978d6,

    0 0 20px rgba(210,150,255,.5);


}





.dashboard-card h3{


    letter-spacing:1px;


}









/* =========================
        TABLE RPG
========================= */


.history-table th{


    font-family:


    "Pixelify Sans";


    letter-spacing:1px;


}






.history-table tr{


    transition:.2s;


}




.history-table tr:hover{


    transform:


    scale(1.01);


}
/* =================================================

        MEMBER PROFILE RPG CARD

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


/* =========================
        PROFILE AREA
========================= */


.profile-area{


    position:relative;


    padding:25px;


    background:


    linear-gradient(

    135deg,

    rgba(255,240,255,.8),

    rgba(245,220,255,.6)

    );


    border-radius:20px;


}







/* =========================
        AVATAR RPG FRAME
========================= */


.avatar-box{


    position:relative;


    width:160px;


    height:160px;



    border:


    6px solid #b878e8;



    background:


    linear-gradient(

    45deg,

    #fff,

    #f7e8ff

    );



}





.avatar-box::before{


    content:"";


    position:absolute;


    top:-12px;


    left:50%;


    transform:

    translateX(-50%);



    padding:

    4px 15px;



    background:#cda0f3;



    color:white;



    border-radius:10px;



    font-size:12px;



    content:"ROOMI AVATAR";


}









/* =========================
        PROFILE DETAIL
========================= */



.profile-detail{


    padding:15px 20px;


    background:


    rgba(255,255,255,.35);



    border-radius:15px;


}








.profile-row{


    padding:


    8px 0;



    border-bottom:


    1px dashed #dfb5ff;


}







.profile-row:last-child{


    border-bottom:none;


}






.profile-row span{


    font-family:


    "Pixelify Sans",
    "Zen Maru Gothic";



    color:#a172c5;


}







.profile-row strong{


    background:


    #f1ddff;



    padding:


    4px 10px;



    border-radius:8px;


}









/* =========================
        RESIDENT BADGE

        預留遊戲系統
========================= */


.profile-detail::before{


    content:


    "⭐ ROOMI RESIDENT  Lv.1";


    display:inline-block;


    margin-bottom:15px;



    padding:


    8px 15px;



    background:


    #ffe79a;



    color:#704d1d;



    border-radius:15px;



    border-bottom:


    4px solid #d0a447;



    font-weight:bold;


}









/* =========================
        PROFILE BUTTON
========================= */


.profile-action{


    text-align:right;


}






.profile-action .pixel-button{


    box-shadow:


    0 5px 0 #d0a447;


}





.profile-action .pixel-button:hover{


    box-shadow:


    0 8px 0 #d0a447;



}









/* =========================
        FUTURE EXP BAR

        預留遊戲資料
========================= */


.profile-detail::after{


    content:


    "EXP 40%  ████░░░░";


    display:block;


    margin-top:20px;


    padding:


    10px;



    background:


    rgba(220,180,255,.5);



    border-radius:12px;



    color:#704d8c;



    font-family:


    "Pixelify Sans";


}

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

        RPG MENU UPGRADE

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


/* =========================
        MENU FRAME
========================= */


.member-menu{


    position:relative;


    overflow:hidden;


    background:


    linear-gradient(

    180deg,

    rgba(255,245,255,.95),

    rgba(245,220,255,.9)

    );


}





.member-menu::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:6px;


    background:#934dcc;


}









/* =========================
        MENU TITLE
========================= */


.menu-header{


    position:relative;


    padding-bottom:18px;


    margin-bottom:20px;


    letter-spacing:2px;


}




.menu-header::after{


    content:"";


    position:absolute;


    left:15%;


    bottom:0;


    width:70%;


    height:3px;


    background:


    repeating-linear-gradient(

    90deg,

    #d19bf2 0,

    #d19bf2 8px,

    transparent 8px,

    transparent 14px

    );


}









/* =========================
        MENU ITEM
========================= */


.member-menu li{


    position:relative;


    display:flex;


    align-items:center;


    gap:8px;


    padding:


    15px 18px;



    margin-bottom:10px;



    border-radius:12px;



    border:


    2px solid transparent;



    transition:.25s;



}








/* 左側箭頭預留 */


.member-menu li::before{


    content:"";


    width:14px;


    opacity:0;


    color:white;


    font-family:


    "Pixelify Sans";


}






.member-menu li:hover::before{


    content:"▶";


    opacity:1;


}








.member-menu li:hover{


    background:


    rgba(220,180,255,.45);



    border:


    2px solid #d19bf2;



    transform:


    translateX(8px);



}









/* =========================
        ACTIVE ITEM
========================= */


.member-menu li.active{


    background:


    linear-gradient(

    90deg,

    #cda0f3,

    #b77ce5

    );



    border:


    2px solid #934dcc;



    color:white;



    transform:


    translateX(5px);



    box-shadow:


    0 5px 0 #9564c0;



}








.member-menu li.active::before{


    content:"▶";


    opacity:1;



    color:white;



}









/* =========================
        RPG SELECT EFFECT
========================= */


.member-menu li.active::after{


    content:"SELECT";


    position:absolute;


    right:12px;


    top:50%;


    transform:


    translateY(-50%);



    font-size:10px;


    font-family:


    "Pixelify Sans";



    color:


    rgba(255,255,255,.8);



}









/* =========================
        MOBILE MENU
========================= */


@media(max-width:800px){



.member-menu li{


    justify-content:center;



}



.member-menu li.active::after{


    display:none;


}



}
/* =================================================

        SECURITY RPG PANEL

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



.security-box{


    position:relative;


    overflow:hidden;



    background:


    linear-gradient(

    135deg,

    rgba(255,245,255,.95),

    rgba(240,215,255,.85)

    );



    border:


    3px solid #d19bf2;



    box-shadow:


    0 5px 0 #b182d8;



    transition:.25s;



}






.security-box:hover{


    transform:


    translateX(6px);



    box-shadow:


    0 8px 0 #a978d6,

    0 0 15px rgba(210,150,255,.5);



}







.security-box::before{


    content:"SYSTEM";


    position:absolute;


    top:8px;


    right:15px;



    font-size:10px;



    font-family:


    "Pixelify Sans";



    color:#b182d8;



}









.security-icon{


    width:55px;


    height:55px;



    display:flex;


    align-items:center;


    justify-content:center;



    background:


    #f1ddff;



    border-radius:15px;



    border:


    3px solid #c58bef;



}








.status-success{


    display:inline-block;


    padding:


    4px 12px;



    background:


    #d7f5df;



    border-radius:12px;



    font-size:13px;



}








.status-coming{


    display:inline-block;


    padding:


    4px 12px;



    background:


    #eee;



    border-radius:12px;



}









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

        WALLET SHOP STYLE

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



.wallet-main{


    position:relative;


    overflow:hidden;



    border:


    4px solid #d19bf2;



    box-shadow:


    0 8px 0 #a978d6;



}






.wallet-main::before{


    content:"ROOMI WALLET";


    position:absolute;


    top:10px;


    right:15px;



    font-family:


    "Pixelify Sans";



    font-size:12px;



    color:#b182d8;



}








.wallet-icon{


    width:90px;


    height:90px;



    display:flex;


    align-items:center;


    justify-content:center;



    background:


    #ffe79a;



    border-radius:25px;



    border:


    4px solid #d0a447;



}








.wallet-list{


    margin-top:25px;



}








.wallet-item{


    position:relative;


    overflow:hidden;



    transition:.25s;



}







.wallet-item::before{


    content:"ITEM";


    position:absolute;


    top:8px;


    right:12px;



    font-size:10px;



    color:#b182d8;



    font-family:


    "Pixelify Sans";



}







.wallet-item:hover{


    transform:


    translateY(-8px);



    box-shadow:


    0 10px 0 #d19bf2;



}








.wallet-item h3{


    margin-top:10px;



}








.wallet-item strong{


    background:


    #f1ddff;



    padding:


    8px 15px;



    border-radius:12px;



}









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

        COMING SOON SYSTEM BOX

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



.coming-box{


    position:relative;


    overflow:hidden;



}



.coming-box::before{


    content:"LOCKED";


    position:absolute;


    top:8px;


    right:15px;



    font-family:


    "Pixelify Sans";



    font-size:12px;



    color:#a172c5;



}

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

        HISTORY RPG LOG

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



.history-table{


    background:


    rgba(255,245,255,.7);



    border-radius:20px;



    overflow:hidden;



}






.history-table th{


    font-family:


    "Pixelify Sans";



    letter-spacing:2px;



    text-transform:


    uppercase;



}





.history-table tbody tr{


    transition:.25s;



}






.history-table tbody tr:hover{


    background:


    #f5e4ff;



    transform:


    translateX(5px);



}







.history-table td{


    color:#684889;



}







.history-table td:last-child{


    font-weight:bold;



}








.status-success{


    background:


    #d7f5df;



    padding:


    5px 14px;



    border-radius:12px;



    border:


    2px solid #82c997;



}









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

        NOTICE SYSTEM MAIL

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



.notice-list{


    gap:20px;



}






.notice-item{


    position:relative;


    overflow:hidden;



    background:


    linear-gradient(

    135deg,

    rgba(255,245,255,.95),

    rgba(245,225,255,.8)

    );



    border:


    4px solid #d19bf2;



    box-shadow:


    0 6px 0 #a978d6;



    transition:.25s;



}







.notice-item::before{


    content:"SYSTEM MAIL";


    position:absolute;


    top:8px;


    right:15px;



    font-size:10px;



    font-family:


    "Pixelify Sans";



    color:#b182d8;



}








.notice-item:hover{


    transform:


    translateX(8px);



}








.notice-item span{


    width:55px;


    height:55px;



    display:flex;



    justify-content:center;


    align-items:center;



    background:


    #ffe79a;



    border-radius:15px;



    border:


    3px solid #d0a447;



}









.notice-item h3{


    color:#934dcc;



}








.notice-item small{


    color:#a172c5;



}











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

        GM SUPPORT TERMINAL

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





.support-box{


    position:relative;


    overflow:hidden;



    background:


    linear-gradient(

    135deg,

    rgba(255,245,255,.95),

    rgba(240,215,255,.8)

    );



    border:


    4px solid #d19bf2;



    box-shadow:


    0 6px 0 #a978d6;



    transition:.25s;



}







.support-box::before{


    content:"GM SYSTEM";


    position:absolute;


    top:10px;


    right:15px;



    font-family:


    "Pixelify Sans";



    font-size:11px;



    color:#b182d8;



}






.support-box:hover{


    transform:


    translateY(-5px);



}







.support-box h3{


    padding-left:10px;



    border-left:


    5px solid #c58bef;



}








.support-box .pixel-button{


    margin-top:15px;



}









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

        SETTING SYSTEM PANEL

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





.setting-item{


    position:relative;


    overflow:hidden;



    background:


    rgba(255,240,255,.9);



    transition:.25s;



}







.setting-item::before{


    content:"SYSTEM";


    position:absolute;


    top:8px;


    right:15px;



    font-size:10px;



    font-family:


    "Pixelify Sans";



    color:#b182d8;



}







.setting-item:hover{


    transform:


    translateX(8px);



    border-color:#c58bef;



}







.setting-item button{


    min-width:100px;



}








.setting-item.danger{


    background:


    rgba(255,230,240,.8);



    border-color:#ffb5c5;



}







.setting-item.danger::before{


    content:"WARNING";


    color:#d65c7a;



}

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

        PIXEL DECORATION SYSTEM

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


/* =========================
        全部卡片小星星
========================= */


.member-card::before{


    content:"✦";


    position:absolute;


    top:15px;


    right:25px;


    color:#d19bf2;


    font-size:18px;


    animation:

    sparkle 2s infinite;


}





.member-card::after{


    content:"✦";


    position:absolute;


    bottom:15px;


    left:25px;


    color:#c58bef;


    font-size:14px;


    animation:

    sparkle 2.5s infinite;


}






@keyframes sparkle{


0%{


opacity:.3;


transform:scale(.8);


}



50%{


opacity:1;


transform:scale(1.2);


}



100%{


opacity:.3;


transform:scale(.8);


}


}









/* =========================
        Banner 裝飾
========================= */


.member-banner::before{


    content:"✦ ✧ ✦";


    position:absolute;


    top:12px;


    left:25px;



    color:#d19bf2;



    font-size:18px;



}



.member-banner::after{


    content:"✦ ✧ ✦";


    position:absolute;


    bottom:12px;


    right:25px;



    color:#d19bf2;



}









/* =========================
        Menu 像素點
========================= */


.member-menu li{


    overflow:hidden;


}





.member-menu li::after{


    content:"";


    position:absolute;


    right:-30px;


    top:0;



    width:20px;


    height:100%;



    background:


    rgba(255,255,255,.35);



    transform:


    skewX(-20deg);



    transition:.4s;



}






.member-menu li:hover::after{


    right:120%;


}









/* =========================
        Button 像素閃光
========================= */


.pixel-button{


    overflow:hidden;


}





.pixel-button::after{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:50%;


    height:100%;



    background:


    rgba(255,255,255,.5);



    transform:


    skewX(-25deg);



    transition:.5s;



}






.pixel-button:hover::after{


    left:150%;


}









/* =========================
        Avatar 像素框
========================= */


.avatar-box{


    box-shadow:


    0 0 0 5px #f0d5ff,

    0 0 0 10px rgba(193,139,239,.4);



}







.avatar-box::after{


    content:"♥";


    position:absolute;


    right:-12px;


    bottom:-12px;



    width:35px;


    height:35px;



    display:flex;


    justify-content:center;


    align-items:center;



    background:#ffb6d9;



    border-radius:50%;



    border:3px solid white;



    font-size:18px;



}









/* =========================
        SYSTEM LABEL 裝飾
========================= */


.security-box::after,
.wallet-item::after,
.notice-item::after,
.support-box::after{


    content:"◆";


    position:absolute;


    bottom:10px;


    right:15px;



    color:#dfb5ff;


    font-size:12px;


}









/* =========================
        TABLE 像素線
========================= */


.history-table{


    position:relative;


}





.history-table::before{


    content:"";


    display:block;


    height:4px;


    background:


    repeating-linear-gradient(

    90deg,

    #d19bf2 0px,

    #d19bf2 10px,

    transparent 10px,

    transparent 18px

    );


}









/* =========================
        滾動小提示
========================= */


.member-content{


    position:relative;


}





.member-content::before{


    content:"ROOMI SYSTEM ONLINE";


    position:absolute;


    top:-25px;


    right:10px;



    font-family:


    "Pixelify Sans";



    font-size:11px;



    color:#b182d8;



    opacity:.7;



}

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

        ROOMI PIXEL WORLD BACKGROUND

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



/* =========================
        浮動裝飾容器
========================= */


/*
使用既有區塊，不新增 HTML
*/


.member-page{

    position:relative;

}





/* =========================
        背景像素光點
========================= */


.member-page::before{


    content:

    "✦      ✧          ✦        ✧";


    position:fixed;


    top:80px;


    left:8%;



    font-size:22px;



    color:


    rgba(209,155,242,.65);



    letter-spacing:80px;



    pointer-events:none;



    animation:

    floatStar 6s infinite ease-in-out;


}






.member-page::after{


    content:

    "✧          ✦       ✧";


    position:fixed;


    bottom:100px;


    right:10%;



    font-size:20px;



    color:


    rgba(197,139,239,.55);



    letter-spacing:60px;



    pointer-events:none;



    animation:

    floatStarReverse 8s infinite ease-in-out;


}









/* =========================
        星星浮動動畫
========================= */


@keyframes floatStar{


0%{


transform:

translateY(0px);



opacity:.4;


}



50%{


transform:

translateY(-20px);



opacity:1;


}



100%{


transform:

translateY(0px);



opacity:.4;


}


}







@keyframes floatStarReverse{


0%{


transform:

translateY(0px);



opacity:.5;


}



50%{


transform:

translateY(20px);



opacity:1;


}



100%{


transform:

translateY(0px);



opacity:.5;


}


}









/* =========================
        內容區微光
========================= */


.member-wrapper{


    position:relative;


}





.member-wrapper::before{


    content:"";


    position:absolute;


    width:120px;


    height:120px;



    top:-50px;


    right:80px;



    background:


    radial-gradient(

    circle,

    rgba(255,220,255,.8),

    transparent 70%

    );



    pointer-events:none;



}









/* =========================
        RPG PANEL LIGHT
========================= */


.member-card,


.member-menu{


    backdrop-filter:

    blur(4px);



}







/* =========================
        小像素分隔點
========================= */


.card-line{


    background:


    repeating-linear-gradient(

    90deg,

    #d19bf2 0px,

    #d19bf2 12px,

    transparent 12px,

    transparent 18px

    );



}









/* =========================
        Menu 小標記
========================= */


.menu-header::before{


    content:"✦";


    margin-right:8px;


    color:#d19bf2;


}



.menu-header::after{


    content:"✦";


    margin-left:8px;


    color:#d19bf2;


}









/* =========================
        系統文字閃爍
========================= */


.member-content::before{


    animation:


    systemBlink 2s infinite;


}






@keyframes systemBlink{


0%,100%{


opacity:.4;


}



50%{


opacity:1;


}


}

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

        MEMBER MENU SIZE BALANCE

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



/* =========================
        MENU SIZE
========================= */


.member-menu{


    width:220px;


    padding:18px;



}







.menu-header{


    font-size:22px;


    margin-bottom:15px;


}








/* =========================
        MENU ITEM HEIGHT
========================= */


.member-menu li{


    min-height:42px;


    padding:


    10px 14px;



    margin-bottom:8px;



    font-size:15px;



    border-radius:12px;



}







.member-menu li.active{


    transform:


    translateX(4px);



}









/* =========================
        MENU ICON ALIGN
========================= */


.member-menu li{


    display:flex;


    align-items:center;


}







.member-menu li span{


    width:18px;


}









/* =========================
        MENU COMPACT MODE

        避免空白過大
========================= */


.member-menu ul{


    display:flex;


    flex-direction:column;


    gap:3px;



}









/* =========================
        MENU與內容比例
========================= */


.member-wrapper{


    align-items:flex-start;



}






.member-menu{


    position:sticky;


    top:30px;



}









/* =========================
        TABLET
========================= */


@media(max-width:900px){


.member-menu{


    width:100%;


    position:relative;


}



.member-menu ul{


    display:grid;


    grid-template-columns:


    repeat(2,1fr);



    gap:8px;



}


}








/* =========================
        MOBILE
========================= */


@media(max-width:600px){



.member-menu ul{


    grid-template-columns:1fr;



}



.member-menu li{


    justify-content:center;


}



}

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

        MEMBER CONTENT BALANCE

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


/* =========================
        CONTENT WIDTH
========================= */


.member-content{


    padding-top:0;


}






/* =========================
        CARD COMPACT MODE
========================= */


.member-card{


    padding:25px;


    margin-bottom:22px;



}





.member-card h2{


    font-size:26px;


    margin-bottom:10px;


}









/* =========================
        PROFILE BALANCE
========================= */


.profile-area{


    padding:20px;


    gap:25px;



}







.avatar-box{


    width:130px;


    height:130px;



}







.profile-detail{


    padding:10px 15px;



}






.profile-row{


    margin-bottom:10px;


    font-size:15px;



}









/* =========================
        DASHBOARD COMPACT
========================= */


.member-dashboard{


    gap:15px;


}







.dashboard-card{


    padding:18px;


    min-height:150px;



    display:flex;


    flex-direction:column;


    justify-content:center;



}







.dashboard-card h3{


    font-size:18px;


    margin-bottom:8px;



}







.dashboard-card strong{


    font-size:28px;


    margin:10px;



}








.dashboard-card button{


    margin-top:auto;



}









/* =========================
        TABLE SIZE
========================= */


.history-table th{


    padding:12px;



}





.history-table td{


    padding:12px;


    font-size:14px;



}









/* =========================
        NOTICE COMPACT
========================= */


.notice-item{


    padding:16px;


    gap:15px;



}







.notice-item span{


    width:45px;


    height:45px;


    font-size:22px;



}









/* =========================
        SUPPORT PANEL
========================= */


.support-box{


    padding:20px;


    margin-bottom:15px;



}









/* =========================
        SETTING PANEL
========================= */


.setting-item{


    padding:16px;


    margin-bottom:12px;



}









/* =========================
        LARGE SCREEN BALANCE
========================= */


@media(min-width:1200px){



.member-content{


    max-width:900px;



}




}




/* =========================
        TABLET
========================= */


@media(max-width:900px){



.member-card{


    padding:20px;



}





.profile-area{


    gap:15px;



}



}









/* =========================
        MOBILE
========================= */


@media(max-width:600px){



.member-card{


    padding:18px;



}






.dashboard-card{


    min-height:auto;



}







.member-card h2{


    font-size:22px;



}




}
/* =================================================

        ROOMI MEMBER MOBILE OPTIMIZE

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


/* =========================
        TABLET
========================= */


@media(max-width:900px){



.member-wrapper{


    width:92%;


    gap:20px;



}





.member-menu{


    width:100%;


    padding:15px;



}







.member-menu ul{


    display:grid;


    grid-template-columns:


    repeat(2,1fr);



    gap:10px;



}







.member-menu li{


    justify-content:center;


    text-align:center;


    min-height:45px;



}







.member-content{


    width:100%;



}







.member-banner{


    width:92%;


    padding:25px;



}







.member-banner h1{


    font-size:34px;



}





}
/* =================================================
        FINAL MOBILE FIX
        ROOMI MEMBER CENTER
================================================= */


@media(max-width:600px){


.member-wrapper{

    width:92%;

    flex-direction:column;

}



/* MENU */

.member-menu{

    width:100%;

    position:relative;

}



.member-menu ul{

    display:flex;

    flex-direction:column;

}



.member-menu li{

    width:100%;

    justify-content:center;

}





/* CONTENT */


.member-content{

    width:100%;

}





.member-card{

    width:100%;

    padding:18px;

}





/* Avatar */


.profile-area{

    flex-direction:column;

    text-align:center;

}



.avatar-box{

    width:130px;

    height:130px;

}



.profile-detail{

    width:100%;

}





/* Dashboard */


.member-dashboard{

    grid-template-columns:1fr;

}





/* Wallet */


.wallet-main{

    flex-direction:column;

    text-align:center;

}



.wallet-list{

    grid-template-columns:1fr;

}





/* Setting */


.setting-item{

    flex-direction:column;

    text-align:center;

}



}