/* CSS Document */
#wrapper{
    background-image: none;
    background-color: #2c2d2f;
}

.disabled {
    filter: grayscale(100%);
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

#header .panel-v1 {
    background-image: url(../images/live/header_background-2.png);
}

#header .panel-v1 .btn-back {
    background: url(../images/sty1_home/btn_back.svg) no-repeat center;
    background-size: 80%;
}

#header .panel-v1 .txt {
    font-weight: 500;
}

#header .header-right .viwers-info{
    display: flex;
    align-items: center;
    color:#FFF;
    gap: .1rem;
}

#header .header-right .viwers-info .img{
    width: .28rem;
}

#header .header-right .viwers-info .img img{
    width:100%;
}

.main-content {
    position: relative;
}

#main .subscription {
    all: unset;
    position: absolute;
    z-index: 10;
    top: 3.15rem;
    right: 8%;
    height: 1rem;
    width: 100%;
    max-width: 5.5rem;
    background-color: white;
    border-radius: 0.15rem;
    display: flex;
    justify-content: center;
    /* padding: 0.1rem 0.15rem; */
    box-sizing: border-box; /* padding、border 都算在 max-width 內 */
}

#main .subscription:after {
    content: "";
    position: absolute;
    top: 0.97rem; /* 三角距離底部距離 */
    left: 4.6rem; /* 三角水平位置，可微調 */
    border-width: 0.3rem 0.15rem 0 0.15rem;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

#main .subscription .left {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    margin-right: 0.3rem;
}

#main .subscription .left:first-child {
    margin-right: 0.5rem;
}

#main .subscription .left .text {
    display: flex;
}

#main .subscription .left .text .title {
    all: unset;
    font-weight: bold;
    font-size: 0.25rem;
}

#main .subscription .left .text .detail {
    all: unset;
    color: #ff50b7;
    font-size: 0.25rem;
}

#main .subscription .icon {
    all: unset;
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 15%;
}

#main .subscription .icon img {
    all: unset;
    width: 80%;
    height: auto;
    display: block;
}

#main .video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

#main .video .anchor {
    position: absolute;
    width: 20%;
    height: auto;
    bottom: 0;
    left: 2%;
}


#video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;

    /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

#main .video .bullet-screen{
    width: 100%;
    position: absolute;
    /* border: 2px solid red; */
    display: flex;
    align-items: end;
    flex-direction: column;
    gap: 0.2rem;
    color: white;
    overflow: hidden;
    height: 4rem;
}

#main .video .bullet-screen .bullet-content{
    background-color: #4d4e5164;
    border-radius: 2rem;


}

#main .video .bullet-screen .bullet-content p{
    padding: 0.1rem 0.3rem;
}


#main .main-content .video .click-sound-on {
    background-color: rgb(31, 31, 31);
    position: absolute;
    color: rgb(255, 255, 255);
    width: 23%;
    top: 20%;
    left: 1%;
    padding: 0.05rem 0.1rem;
    border-radius: 0.05rem;
    display: flex;
    justify-content: center;
    align-items: center;

     /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

#main .main-content .video .click-sound-on p {
    font-size: 0.15rem;
    pointer-events: none;
}

#main .main-content .video .click-sound-on img {
    width: 13%;
    height: auto;
    margin-right: 0.1rem;
}

#main .marquee {
    /* border: 2px solid rgb(38, 0, 255); */
    height: 0.3rem;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
}

#main .marquee p {
    margin-left: 1.6rem;
    font-size: 0.2rem;
}

#main .menu {
    /* border: 2px solid rgb(17, 255, 0); */
    background-color: #201c2a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.3rem;
}

#menu .right {
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu img {
    width: 0.4rem;
    height: auto;
    margin-right: 0.45rem;
    cursor: pointer;

    /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

#menu img:last-child {
    margin-right: 0rem;
}



#main .chatroom-menu {
    /* border: 2px solid rgb(255, 0, 136); */
    /* height: 0.6rem; */
    display: flex;
    background-color: #3d3d3d;
    padding: 0.15rem 0.7rem;
}

#chatroomMenu .col {
    /* border: 2px solid rgb(255, 0, 136); */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chatroomMenu .col img {
    width: 0.4rem;
    height: auto;
    cursor: pointer;
    user-select: none;

    /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

/* chatroom */
#main .chatroom{
    padding: 0.2rem 0.15rem;

}

/* 顯示訊息 ex聊天室連接中 已關閉等等... */
.chat-area-mask {
    position: absolute;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    font-weight: bold;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main .slide-down-area {
    position: absolute;
    bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#main .slide-down-area .slide-down-btn {
    font-size: 30px;
    color: #ab66a8;
    cursor: pointer;
}

.fa-chevron-circle-down:before {
    content: "\f13a";
}


#main .chatroom .list-msg {
    display: flex;
    align-items: center;
    margin: 0.15rem 0.2rem;
    line-height: 0.4rem;
    gap: 0.15rem;
}

/* === 別人的訊息 === */
#main .chatroom .list-msg:not(.self) {
    justify-content: flex-start;
}

/* 排序：名稱 → 內容 → 時間 */
#main .chatroom .list-msg:not(.self) .msg-name    { order: 1; }
#main .chatroom .list-msg:not(.self) .msg-content { order: 2; }
#main .chatroom .list-msg:not(.self) .msg-time    { order: 3; }

/* === 自己的訊息 === */
#main .chatroom .list-msg.self {
    justify-content: flex-end;
}

/* 自己的排序：時間 → 內容 */
#main .chatroom .list-msg.self .msg-time    { order: 1; }
#main .chatroom .list-msg.self .msg-content { order: 2; }
#main .chatroom .list-msg.self .msg-name    { display: none; } /* 自己不用顯示名字 */
#main .chatroom .list-msg.self .msg-user    { display: none; } /* 自己不用顯示身分 */

/* 時間樣式 */
#main .chatroom .list-msg .msg-time {
    font-size: 0.23rem;
    color: #969697;
    white-space: nowrap;
}

/* 氣泡 */
#main .chatroom .list-msg .msg-content {
    display: inline-block;
    word-break: break-all;
    background-color: #727176;
    padding: 0.1rem 0.23rem;
    border-radius: 0.1rem;
    color: white;
    position: relative;
    align-items: center;
    max-width: 65%;
}


/* 左邊氣泡尾巴 */
#main .chatroom .list-msg .msg-content:after {
    content: '';
    position: absolute;
    top: calc(50% - 0.2rem);
    left: -0.1rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.2rem 0.3rem 0.2rem 0;
    border-color: transparent #727176 transparent transparent;
}

/* 右邊氣泡尾巴 */
#main .chatroom .list-msg.self .msg-content:after {
    content: '';
    position: absolute;
    top: calc(50% - 0.2rem);
    right: -0.1rem;
    left: unset;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.2rem 0 0.2rem 0.3rem;
    border-color: transparent transparent transparent #727176;
}

#main .chatroom .list-msg .msg-user{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

#main .chatroom .list-msg .msg-user span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 0.5rem;
    height: 0.5rem;
    color: white;
    border-radius: 999px;
    text-align: center;
    vertical-align: middle;
    box-shadow: inset 0.005rem 0.005rem 0.02rem #FFF, 0 0.01rem 0rem #000;
    font-size: 0.3rem;
}


#main .chatroom .list-msg .msg-name{
    cursor: pointer;
    color: white;
    margin-right: 0.2rem;
}


.tag-name {
    color: #76eff6;
    padding: 0 0.1rem;
    display: inline-block;
    margin: 0;
}


#main .chatroom .list-msg .msg-content span.tag-name {
    cursor: pointer;
}

/* 主播 && 管理員 */
.administrator .msg-user span,
.livehost .msg-user span {
    background: unset !important;
}

#main .chatroom .livehost .msg-user span {
    font-size: unset;
    box-shadow: none;
    color: #969697;
}


#main .chatroom .livehost .msg-name {
    color: #ff50b7;
}

/* 管理員 */
#main .chatroom .administrator .msg-user span{
    font-size: unset;
    box-shadow: none;
    color: #969697;
    width: 0.75rem;
}

#main .chatroom .administrator .msg-name {
    color: #f1df55;
}

/* donate */
#main .chatroom .col .donate {
    background-color: #4d4e51;
    color: black;
    border-radius: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.1rem;
    position: relative;
    min-width: 60%;
    margin: 0.25rem 0 0.25rem 1.4rem;
}

#main .chatroom .col .donate .msg-user{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-right: 0.1rem;
}

#main .chatroom .col .donate .msg-user span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 0.4rem;
    height: 0.4rem;
    color: white;
    border-radius: 999px;
    text-align: center;
    vertical-align: middle;
    box-shadow: inset 0.005rem 0.005rem 0.02rem #FFF, 0 0.01rem 0rem #000;
    font-size: 0.24rem;
}


#main .chatroom .col .donate .name {
    color: white;
}

#main .chatroom .col .donate .sendyou {
    color: #a6a7a8;
}

#main .chatroom .col .donate .live-host-name {
    color: #ff50b7;
}

#main .chatroom .col .donate .gift {
    position: absolute;
    right: 0.1rem;
    width: 1rem;
}
/* ==donate end== */

/* 公告 */
#main .chatroom .col{
    display: flex;
}

#main .chatroom .col .announcement {
    background-color: #ffefa0;
    color: black;
    border-radius: 0.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.2rem;
    margin-left: 1.1rem;

     /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

/* noAnchorroom , liveroom 共用 */
#main .noAnchorroom,
#main .liveroom {
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    width: 100%;
}
#main .noAnchorroom .row,
#main .liveroom .row {
    /* border: 2px solid red; */
    display: flex;
    width: 100%;
}

#main .noAnchorroom .col,
#main .liveroom .col {
    /* border: 2px solid red; */
    max-width: 50%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    color: white;
    position: relative;
    /* cursor: pointer; */
}

#main .noAnchorroom .col img,
#main .liveroom .col img {
    width: 100%;
    border-radius: 0.3rem;
    cursor: pointer;
}

#main .liveroom .col .onlive {
    min-width: 0%;
    padding: 0rem 0.2rem;
    min-height: 0.3rem;
    /* background-color: #e0904a; */
    position: absolute;
    color: black;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10%;
    top: 71%;
}

#main .liveroom .col .onlive p {
    font-size: 0.18rem;
    background-color: #e0904a;
    padding: 0.05rem 0.2rem;
    border-radius: 0.2rem;
    cursor: pointer;
}

#main .liveroom .col .name {
    position: absolute;
    left: 15%;
    top: 83%;
    font-size: 0.15rem;
    min-width: 28%;
    background-color: #f67fa9;
    padding: 0.03rem 0.15rem;
    border-radius: 5rem;
    border: 1px solid white;
    z-index: 0;
    text-align: center;
}

#main .liveroom .col .country_icon {
    position: absolute;
    width: 10%;
    left: 8%;
    bottom: 9%;
    z-index: 1;
}



#main .noAnchorroom .toggle-btn {
    all: unset;
    width: 40%;
    margin: 0.3rem 0.3rem 0rem 0.3rem;
    padding: 0 1.1rem;
    background-color: #2c2d2f;
    color: #c4c4c4;
    font-size: 0.3rem;
    cursor: pointer;
}

#main .noAnchorroom .col .ballicon {
    width: 8%;
    height: auto;
    position: absolute;
    top: 12%;
    left: 10%;
}

#main .noAnchorroom .col .racetitle {
    position: absolute;
    top: 13%;
    left: 20%;
    color: white;
    pointer-events: none;
    font-size: 0.2rem;
}

#main .noAnchorroom .col .team1 {
    position: absolute;
    top: 72%;
    left: 12%;
    color: white;
    pointer-events: none;
    font-size: 0.2rem;
}

#main .noAnchorroom .col .team2 {
    position: absolute;
    top: 80%;
    left: 12%;
    color: white;
    pointer-events: none;
    font-size: 0.2rem;
}

/* ==donate排行榜== */
#main .rank {
    /* border: 2px solid red; */
    background-color: #2c2d2f;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 0.2rem;
}

#main .rank .row {
    /* border: 2px solid red; */
    display: flex;
    min-height: 1rem;
    border-bottom: 2px solid rgb(77, 77, 77);
}

#main .rank .row .corwn {
    /* border: 2px solid red; */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    margin-right: 0.2rem;
}

#main .rank .row .corwn p {
    position: absolute;
    top: 45%;
}

#main .rank .row .corwn img {
    width: 80%;
}

#main .rank .row .user {
    /* border: 2px solid red; */
    /* flex: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.2rem;
    color: white;
}

#main .rank .row .user span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 0.6rem;
    height: 0.6rem;
    color: white;
    border-radius: 999px;
    text-align: center;
    margin-right: 0.1rem;
    vertical-align: middle;
    box-shadow: inset 0.005rem 0.005rem 0.02rem #FFF, 0 0.01rem 0rem #000;
    font-size: 0.3rem;
}


#main .rank .row .name {
    /* border: 2px solid red; */
    flex: 4;
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
}

#main .rank .row .money {
    /* border: 2px solid red; */
    /* flex: 1; */
    display: flex;
    justify-content: right;
    align-items: center;
    color: #fff155;
    min-width: 30%;
}
/* ==donate排行榜 end== */

/* footer */
#footer {
    all: unset;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 500px;
}

#footer .message {
    background: linear-gradient(to top, #2a2b2d, #232427);
    display: flex;
    padding: 0.2rem 0.3rem;
    gap: 0.15rem;
    align-items: center;
}

#footer .message img {
    width: 80%;
    height: auto;
     -webkit-user-drag: none; /* Safari */
    user-select: none;
}

#footer .message .gift {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#footer .message .lightning {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#footer .message .send-msg-input {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 5px 0 15px;
    overflow: hidden;
    border-radius: 50px;
    background-color: #3d3d3d;
    height: 0.6rem;
    position: relative;
}

#footer .message .send-msg-content {
    flex: 1;
    position: relative;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    /* -moz-user-select: text; */
    -webkit-user-select: text;
    /* -ms-user-select: text;
    -khtml-user-select: text; */
    user-select: text;
    resize: none;
    padding: 1px 0;
    color: white;
}

#footer .message .send-msg-content:empty:before {
    content: attr(placeholder);
    color: #9e9e9e; 
    pointer-events: none; 
}

#footer .send-msg-content input.tag-name {
    background-color: #a2a2a2;
    color: #76eff6;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 15px;
    text-shadow: none;
    margin: 0 2px;
    cursor: default;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: 0;
}


#footer .message .show-emoji-btn {
    width: 0.4rem;
    height:0.4rem;
    background: url(../images/live/emotion-icon.png) no-repeat center;
    background-size: 100% auto;
    margin: 0 0.1rem;
    cursor: pointer;
}

#footer .message .end-msg-content {
    display: none;
}

#footer .message .tips-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -600%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

#footer .message .tips-area .tips-txt {
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    font-weight: bold;
    font-size: 0.25rem;
    text-align: center;
    border-radius: 100px;
    white-space: nowrap;
    padding: 0.2rem 0.5rem; 
}



#footer .message .send .emotion {
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0.3rem;
}

#footer .message .send-icon {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


#footer .emotion-option,
#main .giftoption,
#main .canmessage {
    background: linear-gradient(to top, #44494f, black);
    width: 100%;
    height: 4.5rem;
    position: absolute;
    left: 0;
    bottom: 8%;
    color: white;
}

#main .giftoption {
    background: linear-gradient(to top, #44494f, black);
    width: 100%;
    height: 5.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    color: white;
    z-index: 3;
}


#main .giftoption .giftheader,
#main .canmessage .canheader {
    background-color: #4d4e51;
    width: 100%;
    padding: 0.15rem 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}


#main .giftoption .giftheader .title,
#main .canmessage .canheader .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main .giftoption .giftheader p,
#main .canmessage .canheader p {
    font-size: 0.25rem;
}

#main .giftoption .giftheader .cross,
#main .canmessage .canheader .cross {
    cursor: pointer;
}

#main .canmessage .cancontent {
    /* border: 2px solid red; */
    width: 100%;
    height: 3.9rem;
    overflow-y: auto;
}

#main .canmessage .cancontent .col {
    border-bottom: 2px solid #3a3a3a;
    width: 100%;
    padding: 0.2rem;
    cursor: pointer;
}

#main .canmessage .cancontent .col:hover {
    background-color: #4a4a4a;
}

#main .giftoption .giftcontent {
    /* border: 2px solid red; */
    width: 100%;
    height: 3.83rem;
    display: flex;
    flex-wrap: wrap;
    padding: 0.2rem 0.1rem 0.2rem 0.1rem;
}

#main .giftoption .giftcontent .col {
    /* border: 2px solid red; */
    display: flex;
    flex: 0 0 20%; 
    max-width: 20%;
}

#main .giftoption .giftcontent .col:hover {
    background-color: rgb(79, 79, 79);
}

#main .giftoption .giftcontent .col .subrow {
    /* padding: 0.2rem; */
    /* border: 2px solid red; */
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

#main .giftoption .giftcontent .col .subrow .subimage {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 50%;
}


#main .giftoption .giftcontent .col .subrow .subimage img {
width: 1rem;
}



#main .giftoption .giftcontent .col .subrow .subtext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.03rem;
}

#main .subtext .imagename {
    font-size: 0.22rem;
    color: #7b828e;
}

#main .subtext .number {
    font-size: 0.22rem;
    color: white;
}

#main .giftoption .giftfooter {
    /* border: 2px red solid; */
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 500px;
}

#main .giftoption .giftfooter .giftfootercontent {
    background: linear-gradient(to top, #2a2b2d, #232427);
    display: flex;
    padding: 0.2rem 0.29rem;
    gap: 0.15rem;
    min-height: 1.07rem;
}

#main .giftoption .giftfooter .gift {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#main .giftoption .giftfooter img {
    width: 75%;
    height: auto;
}

#main .giftoption .giftfooter .money {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#main .giftoption .giftfooter .money .remaining {
    color: #949495;
}

#main .giftoption .giftfooter .transfermoney {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: auto;
}
#main .giftoption .giftfooter .transfermoney button {
    all: unset;
    padding: 0.15rem 0.2rem;
    background: linear-gradient(to top, #367bd1, #56c2fc);
    border-radius: 0.1rem;
}

.video-ctrl{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* 浮水印LOGO */
.video-ctrl .watermark-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: calc(0.2rem + var(--black_bar_x, 0px));
    top: calc(0.15rem + var(--black_bar_y, 0px));
    width: 2rem;
    padding: 0.02rem;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    /* 20260612 C LOGO改小、X軸改到畫面中間 */
    /* right: calc(var(--center_x, 0px));
    width: 1rem;
    transform: translateX(50%); */
    /* 20260612 C 位置改到左下角 */
    right: unset;
    top: unset;
    left: calc(0.2rem + var(--black_bar_x, 0px));
    bottom: calc(0.15rem + var(--black_bar_y, 0px));
}

.video-ctrl .watermark-logo-img {
    width: 100%;
    object-fit: contain;
}

/* 全螢幕 */
.full-screen{
    all: unset;
    top:0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    /* 禁用手機雙擊放大 */
    touch-action: manipulation;
}

.full-screen.portrait-to-landscape {
    width: calc(100vmax - (100vmax - 100dvh));
    height: 100vmin;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
}

/* 縮小全螢幕的按鈕 */
.small-screen-icon{
    position: fixed;
    z-index: 1100;
    right: 2%;
    bottom: 2%;
    cursor: pointer;

    opacity: 1;
    transition: opacity .5s ease;
}

.small-screen-icon img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.small-screen-icon.portrait-to-landscape {
    left: 2%;
    bottom: 2%;
}

/* 閒置時隱藏 */
.small-screen-icon.is-idle{
    opacity: 0;
    /* 隱藏時避免誤點 */
    pointer-events: none; 
}

/* 使用者滑到或用鍵盤聚焦時要顯示 */
.small-screen-icon:hover,
.small-screen-icon:focus,
.small-screen-icon:focus-visible{
    opacity: 1;
}

/* iframe訊息 */
.stream-status{
    position: absolute;
    color:white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 以自身中心對齊 */
    font-size: 0.3rem;
    pointer-events: none;
    display: flex;
    gap: 0.1rem;
    justify-content: center;
    align-items: center;

     /* 禁止拖曳 */
    -webkit-user-drag: none; /* Chrome / Safari */
    -khtml-user-drag: none;
    -moz-user-drag: none;    /* Firefox */
    -o-user-drag: none;
    
    /* 禁止選取 */
    user-select: none;
    -webkit-user-select: none; /* Chrome / Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE / Edge */
}

/* spinner動態 */
.spinner{
    display:inline-block;
    width:1em;     
    height:1em;
    border:.18em solid currentColor;
    /* 圓圈缺口 */
    border-right-color: transparent;
    border-radius:50%;
    /* 調整速度 */
    animation:spin 1.3s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


.float-div1 {
    position: absolute;
    z-index: 800;
    width: 1.1rem;
    touch-action: none;
    left: calc(100% - 1.1rem);
}

.float-div1 img {
    width: 100%;
    pointer-events: none;
    user-select: none;
    vertical-align: middle;
}


/* 滾動卷軸main */
#main .scrollbar {
    overflow-y: auto;
    position: relative;
}

/* 滾動條整體寬度 */
.scrollbar::-webkit-scrollbar {
    width: 5px; /* 寬度可調整 */
}

/* 滾動條軌道（背景） */
.scrollbar::-webkit-scrollbar-track {
    /* 上下縮減 50px，等於滾動條縮短 */
    /* margin: 10px;  */
    background: #312644; /* 軌道顏色 */
    border-radius: 31px;
}

/* 滾動條滑塊 */
.scrollbar::-webkit-scrollbar-thumb {
    background: #8f59a7; /* 滑塊顏色 */
    border-radius: 31px;
}

/* 滑塊 hover 時 */
.scrollbar::-webkit-scrollbar-thumb:hover {
    background: #7a4c8e;
}

/* 滾動卷軸footer */
/* 滾動條整體寬度 */
.cancontent::-webkit-scrollbar {
    width: 10px; /* 寬度可調整 */
}

/* 滾動條軌道（背景） */
.cancontent::-webkit-scrollbar-track {
    /* 上下縮減 50px，等於滾動條縮短 */
    margin: 5px;
    background: #383838; /* 軌道顏色 */
    border-radius: 31px;
}

/* 滾動條滑塊 */
.cancontent::-webkit-scrollbar-thumb {
    background: #646464; /* 滑塊顏色 */
    border-radius: 31px;
}

/* 滑塊 hover 時 */
.cancontent::-webkit-scrollbar-thumb:hover {
    background: #d6d6d6;
}