.living-room{height:640px;background:url(../../img/banner.jpg) center/cover no-repeat;position:relative}.living-room:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000026,#0000000d 40%,#0000004d)}.video-section{position:relative;padding-top:var(--header-height);padding-bottom:20px}.video-container{display:flex;border-radius:var(--radius-md);overflow:visible}.video-main{flex:1;aspect-ratio:16 / 9;background:#000;position:relative;border-radius:var(--radius-md) 0 0 var(--radius-md);overflow:hidden}.video-main .video-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.video-main .video-placeholder img{width:120px;height:120px;opacity:.8;cursor:pointer;transition:all var(--transition-fast)}.video-main .video-placeholder:hover img{opacity:1;transform:scale(1.05)}.video-main .video-placeholder p{color:#aaa;font-size:14px}.video-main .video-gradient{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(180deg,#0000,#000c);display:flex;align-items:flex-end;padding:0 16px 12px;z-index:3;pointer-events:none}.video-main .video-info{display:flex;align-items:center;gap:8px}.video-main .live-tag-inline{display:inline-block;background:var(--color-live);color:#fff;font-size:12px;padding:2px 8px;border-radius:2px}.video-main .video-title{color:#fff;font-size:16px;font-weight:500}.video-main .enter-room{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-block;padding:0 25px;height:60px;line-height:60px;border:1px solid var(--color-primary);border-radius:var(--radius-md);color:var(--color-primary);font-size:20px;font-weight:600;cursor:pointer;opacity:.5;transition:all var(--transition-slow);background:#000;z-index:4;text-decoration:none}.video-main:hover .enter-room{opacity:1;background:var(--color-primary);color:#fff}.room-list{width:185px;background:#000c;border-radius:0 var(--radius-md) var(--radius-md) 0;padding:7px 2px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:7px;flex-shrink:0;transform:translateZ(0)}.room-list::-webkit-scrollbar{width:3px}.room-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.room-item{padding:0 0 0 5px;flex-shrink:0}.room-item a{display:block;width:170px;height:105px;border-radius:var(--radius-md);overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative;transition:border-color var(--transition-fast)}.room-item a:hover,.room-item a.active{border-color:var(--color-primary)}.room-item a:hover .left-arrow,.room-item a.active .left-arrow{position:absolute;top:43px;left:0;margin-left:-15px}.room-item a:hover .left-arrow:after,.room-item a.active .left-arrow:after{position:absolute;content:"";border-top:6px transparent dashed;border-left:7px transparent dashed;border-bottom:6px transparent dashed;border-right:7px var(--color-primary) solid}.room-item a img,.room-item a .cover-placeholder{display:block;width:167px;height:102px;border-radius:var(--radius-md)}.room-item .room-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000b3);color:#fff;font-size:12px;padding:14px 6px 4px}.appointment-section{margin-top:40px;position:relative}.match-slider{background:var(--color-bg-card);border-radius:var(--radius-md);border:1px solid var(--color-border);height:132px;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;position:relative}.match-slider::-webkit-scrollbar{height:0}.match-slider .match-card{scroll-snap-align:start}.appointment-section .swiper-btn{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast);user-select:none;z-index:5;background:#ffffffe6;border-radius:50%;box-shadow:0 2px 6px #0000001a}.appointment-section .swiper-btn i{font-size:20px;color:#979797}.appointment-section .swiper-btn:hover{background:var(--color-primary)}.appointment-section .swiper-btn:hover i{color:#fff}.appointment-section .swiper-prev{left:8px}.appointment-section .swiper-next{right:8px}.hot-section{margin-top:50px}.hot-section .section-header .hot-live-icon{vertical-align:middle}.hot-section .section-header .hot-live-icon img{margin-top:2px;width:183px}.hot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;font-size:0}.hot-grid .live-card{height:auto;border-radius:6px}.hot-grid .live-card .card-cover{height:160px;border-radius:6px 6px 0 0}.hot-grid .live-card .card-title{height:40px;line-height:40px;padding:0 14px;font-size:14px;border-radius:0 0 6px 6px}.hot-grid .live-card .card-cover .bottom-title{font-weight:400;position:absolute;bottom:0;width:100%;height:28px;line-height:20px;font-size:14px;color:#fff;padding:0 14px 8px;letter-spacing:1px;background:linear-gradient(180deg,#0000,#000c);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.hot-grid .live-card .card-cover .bottom-title .num{display:flex;align-items:center;gap:2px;flex-shrink:0}.hot-grid .live-card .card-cover .bottom-title .num img{width:14px;height:auto}.anchor-section{margin-top:58px;background:var(--color-bg-card);position:relative;border-radius:var(--radius-md);overflow:visible}.anchor-title-banner{position:absolute;top:-33px;left:0;width:100%;z-index:10}.anchor-title-banner img{width:100%;display:block}.anchor-slider{padding:48px 50px 38px;display:flex;gap:10px;overflow-x:auto;justify-content:center}.anchor-slider::-webkit-scrollbar{height:0}.anchor-card .anchor-avatar img{width:80px;height:80px;border-radius:50%;margin-bottom:5px}.category-section{margin-top:50px;padding-bottom:60px}.category-block{margin-bottom:40px}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:15px}.category-grid .category-card{height:191px}.category-grid .cat-cover{height:127px}.category-grid .category-card h6{padding:1px 12px;color:var(--color-text-secondary);line-height:25px;font-weight:400;font-size:12px;display:flex;justify-content:space-between}.category-grid .category-card h6 .name{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}.category-grid .category-card h6 .name .head-img{width:20px;height:20px;border-radius:50%}.category-grid .category-card h6 .num{display:flex;align-items:center;gap:4px}.category-grid .category-card h6 .num img{width:12px;height:auto}
