.play-card-page{margin:0;font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg)}
.play-card-page .page{padding:24px}
.play-card-page .title{color:var(--text);font-size:28px;font-weight:600;margin-bottom:16px}
.play-card-page .card{display:flex;background:var(--bg-card);border-radius:4px;overflow:hidden;max-width:1200px;height:420px;position:relative}
.play-card-page .topbar{display:none;width:100%;height:80px;background:var(--bg-card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:4px solid var(--brand);flex-direction:row;position:relative;z-index:3}
.play-card-page .top-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:background .2s,color .2s;user-select:none}
.play-card-page .top-item:hover{background:rgba(var(--rgb-text),.08);color:var(--text)}
.play-card-page .top-item.active{background:var(--bg-card);color:var(--text);font-weight:600;border-radius:4px 4px 0 0;margin-bottom:-4px;height:calc(100% + 4px)}
.play-card-page .top-item span{margin-top:4px;font-size:14px}
.play-card-page .sidebar{width:160px;background:var(--bg-card);display:flex;flex-direction:column;border-right:4px solid var(--brand);position:absolute;left:0;top:0;bottom:0;z-index:2}
.play-card-page .side-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;transition:background .2s,color .2s;user-select:none}
.play-card-page .side-item:hover{background:rgba(var(--rgb-text),.08);color:var(--text)}
.play-card-page .side-item.active{position:relative;background:var(--bg-card);color:var(--text);font-weight:600;border-radius:0 4px 4px 0}
.play-card-page .side-item.active::after{content:"";position:absolute;left:100%;top:0;width:4px;height:100%;background:var(--bg-card)}
.play-card-page .side-item span{margin-top:8px;font-size:14px}
.play-card-page .main{flex:1;display:flex;flex-direction:row;margin-left:160px;position:relative}
.play-card-page .content{flex:1;padding:24px 32px;position:relative;opacity:0;animation:fadeIn .3s forwards}
@keyframes fadeIn{to{opacity:1}
}
.play-card-page .content h2{margin:0;font-size:26px;color:var(--text)}
.play-card-page .content p{margin-top:12px;color:var(--text2);max-width:420px;line-height:1.6}
.play-card-page .center-image{position:absolute;bottom:24px;left:32px;height:80px}
.play-card-page .right{width:420px;overflow:hidden;position:relative}
.play-card-page .right img{width:100%;height:100%;object-fit:cover;opacity:0;animation:fadeIn .3s forwards}
@media (max-width:768px){.play-card-page .card{flex-direction:column;height:auto}
.play-card-page .topbar{display:flex}
.play-card-page .sidebar{display:none}
.play-card-page .main{margin-left:0;flex-direction:column}
.play-card-page .right{width:100%;height:200px}
.play-card-page .center-image{display:none}
}