#site-header{background:transparent; padding:5px 30px; position:sticky; top:0; z-index:999; transition:background .3s ease;}
#site-header.scrolled{background:#e86200;backdrop-filter:blur(8px);}
.episode-page {max-width:1366px; margin-inline:max(5%,(100% - 1366px)/2); margin-block:60px;}
.episode-header {display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.episode-header h1 {font-size:14px; font-weight:600;}
.back-btn {width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#1a1d24; color:#fff; text-decoration:none;}
.vip-block{background:#111; color:#fff; padding:40px; text-align:center; border-radius:8px; margin:40px; font-weight:700;}
.vip-actions{margin-top:10px;}
#toast-container{position:fixed; top:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:10px;}
.toast{min-width:260px; padding:14px 18px; border-radius:8px; color:#fff; font-size:14px; display:flex; align-items:center; gap:10px; box-shadow:0 4px 12px rgba(0,0,0,0.3); animation:toast-in .3s ease;}
.toast.success{background:#2ecc71;}
.toast.error{background:#e74c3c;}
.toast.info{background:#3498db;}
.toast-close{margin-left:auto; cursor:pointer; font-weight:bold;}
@keyframes toast-in{from{opacity:0; transform:translateX(50px);} to{opacity:1; transform:translateX(0);}}
.section-player {display:grid; grid-template-columns:1fr 350px; gap:20px;}
.section-plright {display:block;}
.episode-reactions{max-width:100%; max-height:370px; background-color: #FFFFFF08; border:2px solid #FFFFFF08; border-radius:8px; padding:10px 20px; min-width:0; margin-bottom:10px; text-align: center;}
.episode-reactions legend {font-weight: bold; color: #f5c518; padding: 0 10px;}
.episode-reactions button{width:42px; height:42px; font-size:22px; border:none; border-radius:10px; background:#111; color:#fff; cursor:pointer; transition:all .2s;}
.episode-reactions button.active{transform: scale(1.15); filter: brightness(1.2); box-shadow: 0 0 10px rgba(255,255,255,0.4); transition: all 0.2s ease;}
.episode-metas{display:grid; grid-template-columns:1fr 350px; gap:20px; margin-top:20px;}
.episode-list {max-width:100%; max-height:370px; background-color: #FFFFFF08; border:2px solid #FFFFFF08; border-radius:8px; padding:10px 20px; min-width:0; margin-bottom:10px;}
.episode-list legend {font-weight: bold; color: #f5c518; padding: 0 10px;}
.episode-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:15px; max-height:300px; overflow-y:auto;}
.episode-tabs::-webkit-scrollbar{width:6px;}
.episode-tabs::-webkit-scrollbar-thumb{background:#ffffff33; border-radius:10px;}
.episode-tab{background:#2b2f3a; border:none; color:#fff; padding:6px 12px; border-radius:6px; cursor:pointer;}
.episode-tab.active{background:#f5c518; color:#000;}
.episode-tab:hover{background:#2c3143;}
.episode-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.episode-item{position:relative; display:flex; align-items:center; justify-content:center; background:#2b2f3a; padding:10px; text-align:center; border-radius:6px; text-decoration:none; color:#fff; font-weight:500;}
.episode-item:hover{background:#2c3143;}
.episode-item.active{background:#f5c518; color:#000; font-weight:600;}
.vip-badge{position:absolute; top:2px; left:2px; z-index:2; pointer-events:none;}
.vip-crown{fill:#ff0000; animation: vipGlow 1.2s infinite ease-in-out;}
@keyframes vipGlow{0%{opacity:1;transform:scale(1);} 50%{opacity:0.5;transform:scale(1.1);} 100%{opacity:1;transform:scale(1);}}
.hidden{display:none;}
.episode-comments {max-width: 100%; background-color: #FFFFFF08; border: 2px solid #FFFFFF08; border-radius: 8px; padding: 10px 20px; min-width:0; margin-bottom:10px;}
.episode-comments legend {font-weight: bold; color: #f5c518; padding: 0 10px;}
/* EPISODE INFO */
.episode-info {display:grid; grid-template-columns:1fr 350px; gap:20px;}
.episode-info-left {display:grid; grid-template-columns:250px 1fr; gap:20px;}
.movie-poster img{width:250px; height:375px; border-radius:12px; object-fit:cover;}
.broadcast-status{width:215px;background-color:#ff83001a; color:#ff8300; display:inline-flex; align-items:center; gap:6px; font-size:14px; border-radius:10px; padding:0.5rem 0.8rem; font-weight:500; margin:5px;}
.spinner{width: 1em; height: 1em; border: 2px solid rgba(255,165,0,0.3); border-top-color: orange; border-radius: 50%; animation: spin 0.8s linear infinite;}
@keyframes spin{to{transform: rotate(360deg);}}
.movie-info {max-height:480px; overflow-y:auto;}
.movie-title {font-size:24px; font-weight: 800; margin-top:0px;}
.movie-desc {font-size:14px; color:#b9b9b9; margin-bottom:15px;}
.movie-meta {display:flex; flex-direction:column; gap:6px;}
.meta-row {font-size:14px;}
.movie-tags {display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.movie-tags .tag{background:#2b2f3a; color:#fff; padding:6px 10px; border-radius:6px; font-size:13px; text-decoration:none; transition:0.2s;}
.movie-tags .tag:hover{background:#3b4150;}
.meta-label{font-weight:600; color:#f5c518; margin-right:6px; display:flex; align-items:center; gap:5px; width:126px;}
/* Reaction Stats */
.episode-info-right{}
.reaction-stats{background:linear-gradient(180deg,#2a3444,#1e2736); padding:20px; border-radius:14px;}
.reaction-stats h3{font-size:18px; font-weight:bold; margin:0 0 10px 0; text-align:center;}
.reaction-stats{position:relative; overflow:hidden;}
.reaction-stats::after{content:""; position:absolute; top:0; left:-120%; width:100%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent); pointer-events:none;}
.reaction-stats.animate::after{animation:statsSmoke .6s ease;}
@keyframes statsSmoke{0%{left:-120%;} 100%{left:120%;}}
.emoji-pop{position:fixed; font-size:40px; transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none; z-index:999999; transition:all .6s ease;}
.emoji-pop.show{transform:translate(-50%,-200%) scale(1.3); opacity:1;}
.reaction-row{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:12px 14px; margin-bottom:5px;}
.row-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.icon{font-size:20px; transition:transform .2s ease;}
.reaction-stats.animate .icon{animation:iconJump .25s ease;}
@keyframes iconJump{0%{transform:translateY(0);} 50%{transform:translateY(-6px);} 100%{transform:translateY(0);}}
.label{flex:1; font-weight:500; color:#d7dce6;}
.percent{font-weight:600; color:#fff;}
.bar{height:6px; background:#3c4655; border-radius:6px; overflow:hidden;}
.fill{height:100%; width:0; transition:width .4s ease; border-radius:6px;}
.reaction-row[data-type="haha"] .fill{background:#ffd54a;}
.reaction-row[data-type="wow"] .fill{background:#ff9f43;}
.reaction-row[data-type="sad"] .fill{background:#58a6ff;}
.reaction-row[data-type="love"] .fill{background:#ff4d6d;}
.reaction-row[data-type="poop"] .fill{background:#b26a2b;}
.reaction-row[data-type="fire"] .fill{background:#ff6a6a;}
/* COMMENTS AND PERSON */
.comment-list{display:flex; flex-direction:column; max-height:280px; overflow-y:auto;}
.comment-list::-webkit-scrollbar{width:6px;}
.comment-list::-webkit-scrollbar-thumb{background:#ffffff33; border-radius:10px;}
#ajax-comment-form textarea{width:calc(100% - 20px); min-height:80px; background:#111; border:1px solid #333; border-radius:8px; padding:10px; color:#fff;}
#ajax-comment-form button{margin-top:10px; background:#e50914; border:none; padding:8px 16px; color:#fff; border-radius:6px; cursor:pointer;}
.comment-item{display:block; padding-bottom:4px;}
.comment-main{display:flex; gap:12px;}
.comment-avatar img{border-radius:10px; width:40px; height:40px;}
.comment-body{background:#1c1c1c; padding:10px 12px; border-radius:10px; flex:1;}
.comment-author{font-weight:600; margin-bottom:4px;}
.comment-text{font-size:14px; line-height:1.6; color:#ddd;}
.comment-meta{margin-top:6px; font-size:12px; color:#aaa;}
.comment-reply-btn{background:none; border:none; color:#4a8cff; cursor:pointer; font-size:12px;}
.comment-item.reply .comment-avatar img{width:36px; height:36px;}
.comment-children{margin-left:60px; margin-top:12px; border-left:2px solid #2a2a2a; display:flex; flex-direction:column; gap:12px;}
.person-column {display:flex; align-items:center; background-color:#FFFFFF08; border:2px solid #FFFFFF08; border-radius:8px; padding:10px 20px; min-width:0; margin-bottom:10px;}
.person-column legend {font-weight: bold; color: #f5c518; padding: 0 10px;}
.person-list{display:flex; gap:16px; margin-top:10px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%;}
.person-list::-webkit-scrollbar{height:6px;}
.person-list::-webkit-scrollbar-thumb{background:#ffffff33; border-radius:10px;}
.person-widget-avatar img{width: 70px; height: 70px; border-radius: 10px; object-fit: cover;}
.person-widget-name {font-size: 14px; margin: 0; margin-left: 15px;}
.person-widget-name a{text-decoration:none; color:inherit; display:block;}
.person-item{text-align:center; width:80px; flex:0 0 auto;}
.person-item a{text-decoration:none; color:inherit; display:block;}
.person-item img{width:70px; height:70px; border-radius:10px; object-fit:cover;}
.person-item span{font-size:12px; display:block; margin-top:6px;}
.person-empty, .comment-empty{color:#bbb; font-style:italic; font-size:14px; padding:10px 0;}
.related-movies {max-width: 100%; background-color: #FFFFFF08; border: 2px solid #FFFFFF08; border-radius: 8px; padding: 10px 20px; min-width:0;}
.related-movies legend {font-weight: bold; color: #f5c518; padding: 0 10px;}
/** MOBILE LAYOUT **/
@media (max-width:900px){
	.section-player{display:block;}
	.vidrelax-player-controls{display:contents;}
	.episode-info{display:block;}
	.episode-info-left{display:none;}
	.episode-info-right{max-height:300px; overflow-x:auto;}
	.episode-metas{display:block;}
	.episode-grid{display:grid; grid-template-columns:repeat(7,1fr);gap:10px;}
	.related-movies{display:none;}
	#site-footer{display:none;}
}