/* 专题列表样式（保留搜索条/左侧分类/宫格列表/下拉刷新样式） */
*{margin:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box;scrollbar-width:none;}
html,body{height:100%;}
body{background-color:#f1f1f1;font-size:14px;color:#333;font-family:Helvetica Neue,Helvetica,sans-serif;-webkit-user-select:none;user-select:none;overflow:hidden;}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
a,img{-webkit-user-drag:none;}
::-webkit-scrollbar{display:none;width:0!important;height:0!important;-webkit-appearance:none;background:transparent;}
html {height: auto;background: linear-gradient(to bottom, #e7f3ff, #f6f7f8) fixed;}

/* App 面板：500px 居中、固定视口 */
.zt-app{position:fixed;top:0;left:0;right:0;bottom:0;margin:0 auto;max-width:500px;background:#f1f1f1;display:flex;flex-direction:column;overflow:hidden;background-image: url(/assets/template/img/background.jpg);background-position: center;background-repeat: no-repeat;}
.zt-body{flex:1;display:flex;min-height:0;}

/* 顶部：logo + 搜索 + 宫格/列表切换 */
.top-warp{flex-shrink:0;display:flex;align-items:center;height:46px;padding:5px;font-size:14px;text-align:center;background-color:#fff;z-index:11}
.flex{display:flex;flex-direction:row;align-items:center;}
.icon{display:inline-flex;align-items:center;}
.icon-right{width:32px;height:46px;line-height:46px;margin-left: 4px;}
.icon-right a{display:inline-flex;width:30px;height:30px;background-color:#f3f3f3;border-radius:4px;overflow:hidden;}
.icon-right a img{width:100%;height:100%;object-fit:cover;}
.p-l-15{padding-left:8px!important;}
.p-r-15{padding-right:8px!important;}
.p-15{padding:8px!important;}
.text-right{text-align:right;}
.search{display:flex;flex-direction:row;align-items:center;flex:1;}
.search .content{display:flex;flex-direction:row;align-items:center;padding:0 9px;flex:1;background-color:#f2f2f2;border-radius:53px;height:34px;}
.icon-wrap{display:flex;align-items:center;}
.clear-icon{display:flex;flex-direction:row;align-items:center;}
.so-input{width:100%;position:relative;display:block;height:100%;background:none;color:#909399;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;text-indent:inherit;text-transform:inherit;text-shadow:inherit;}
.so-input:disabled{-webkit-text-fill-color:currentcolor;}
.so-form,.so-wrapper{outline:none;border:none;padding:0;margin:0;text-decoration:inherit;display:flex;position:relative;width:100%;height:100%;flex-direction:column;justify-content:center;}
.so-input input{flex:1;font-size:14px;line-height:1;margin:0 5px;color:#909399;background:none;outline:none;border:none;width:100%;text-align:left;}
.so-action{font-size:14px;color:#303133;width:0;overflow:hidden;transition:all .3s;white-space:nowrap;text-align:center;cursor:pointer;}
.so-action-active{width:40px;margin-left:5px;}
#toggleIcon{width:36px;cursor:pointer;}
#toggleIcon i{font-size:20px;color:#303133;}
#ztShareBtn{width:36px;cursor:pointer;}
#ztShareBtn i{font-size:20px;color:#303133;}

/* 左侧分类竖排窄条 */
.left-warp{flex-shrink:0;width:64px;height:100%;overflow-y:auto;/*background:rgba(242,242,242,.62);*/}
.tab-view{height:100%;}
.tab-item{height:58px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:12px;color:#444;font-weight:400;line-height:1;background:transparent;cursor:pointer;text-align:center;}
.tab-item:hover{background-color:rgb(0 149 255 / 10%);}
.tab-item-active{position:relative;color:#000;font-size:13px;font-weight:600;background:rgb(0 149 255 / 10%);}
.tab-item-active::before{content:"";position:absolute;border-left:4px solid #ff5473;height:17px;left:0;top:50%;transform:translateY(-50%);}
.line-1{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;}
.line-2{overflow:hidden;word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

/* 内容滚动区（下拉刷新/上拉加载骨架） */
.zt-content{flex:1;min-width:0;display:flex;flex-direction:column;/*background:#fff;*/}
.yl-paging-container{position:relative;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top: -3.2rem;padding-top: 3.2rem;}
.yl-paging-main{position:relative;}
.refresher-view{margin-top:-42px;background:transparent;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.refresher-container{overflow:hidden;height:42px;display:flex;align-items:center;justify-content:center;background:transparent;}
.refresher-refresh{display:flex;height:100%;width:100%;align-items:center;justify-content:center;}
.r-container{display:inline-flex;height:30px;min-width:0;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:0 13px;background:rgba(255,255,255,.86);border:1px solid rgba(31,45,61,.08);border-radius:999px;box-shadow:0 2px 10px rgba(31,45,61,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.r-left{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.r-left-image{transition:transform .2s ease,opacity .2s ease;color:#8a94a6;}
.r-left-image-pre{overflow:hidden;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
.r-arrow-down{transform:rotate(180deg);}
.r-arrow-top{transform:rotate(0deg);}
.r-arrow-ico{width:14px;height:14px;flex:0 0 14px;background-image:url('/assets/template/img/arrow.png');background-position:0% 0%;background-size:100% 100%;background-repeat:no-repeat;opacity:.72;}
.r-arrow-ico.loading{background-image:url('/assets/template/img/loading.png');animation:spin .8s linear infinite;opacity:1;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.r-right{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.r-right-text{color:#8a94a6;font-size:12px;line-height:1;letter-spacing:0;white-space:nowrap;}
.d-image{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.text-rpx{font-size:14px;margin:0 3px;color:#a4a4a4;}
.yl-l-container{clear:both;display:flex;flex-direction:row;align-items:center;justify-content:center;height:42px;font-size:14px;}

/* 宫格显示 */
.games-container.grid-view{display:flex;flex-wrap:wrap;justify-content:flex-start;width:100%;/*padding:10px 6px 0;*/}
.grid-view .game-card{flex:0 0 calc(100% / 4);max-width:calc(100% / 4);text-align:center;background-color:rgba(255, 255, 255, 0.73);padding:10px;overflow:hidden;cursor:pointer;}
.grid-view .game-card:hover{background-color:rgb(0 149 255 / 10%);border-radius: 10px;transform: translateY(-1px);}
.grid-view .game-card:hover .game-image img{transform:scale(1.04);}
.grid-view .game-image{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:.9rem;}
.grid-view .game-image img{width:100%;height:100%;object-fit:contain;}
.grid-view .game-title{margin-top:5px;font-weight:400;font-size:12px;line-height:15px;color:#303133;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;height:30px;}

/* 横向列表显示 */
.games-container.list-view{display:flex;flex-direction:column;width:100%;/*padding:6px 0;*/}
.list-view .game-item{display:flex;align-items:center;background:#fff;padding:8px;border-radius:5px;border:1px solid #e4e7ed57;cursor:pointer;/*margin:6px 8px;*/}
.list-view .game-item:hover{background-color:rgb(0 149 255 / 10%);transform: translateY(-1px)}
.list-view .game-item:hover .game-image img{transform:scale(1.04);}
.list-view .game-image{width:60px;height:60px;border-radius:5px;overflow:hidden;flex-shrink:0;}
.list-view .game-image img{width:100%;height:100%;object-fit:cover;}
.list-view .game-info{flex-grow:1;margin-left:10px;display:flex;flex-direction:column;gap:5px;overflow-x:auto;}
.list-view .game-title-tags{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;min-width:100%;}
.list-view .game-title{font-size:14px;font-weight:bold;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;}
.list-view .game-title i{margin-right:3px;color:#ff00004d;}
.game-subtitle{font-size:12px;color:#767676;margin-left:3px;}
.list-view .game-tags{display:flex;gap:5px;flex-wrap:nowrap;flex-shrink:0;}
.list-view .game-tag{border-radius:3px;font-size:10px;padding:0 6px;height:16px;background-color:#f1f1f1;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.list-view .game-desc{font-size:12px;color:#8799a3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}

/* 空数据 */
#no-data .container{display:flex;align-items:center;justify-content:center;}
#no-data .main{display:flex;flex-direction:column;align-items:center;padding:25px 0;}
#no-data .main-image-rpx{width:120px;height:120px;}
#no-data .main-image-rpx img{width:100%;}
#no-data .main-title{color:#aaa;text-align:center;}
#no-data .main-title-rpx{font-size:14px;margin-top:5px;padding:0 10px;}

/* 回到顶部 */
@font-face{font-family:'iconfont';src:url('/assets/fonts/font_2490965_zrofp936lbj.ttf') format('truetype');}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.scroll-top{font-family:iconfont!important;font-size:22px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:rgba(51,51,51,.8);width:38px;height:38px;border-radius:35px;text-align:center;line-height:38px;color:#fff;position:absolute;right:20px;bottom:50px;opacity:0;transform:translateY(100px);transition:all .4s ease 0;transform-origin:center;z-index:600;cursor:pointer;}
.scroll-top:before{content:"\e637";}
.scroll-top.active{opacity:.7;transform:translateY(-25px);}
.scroll-top.active:hover{opacity:.5;}
/* ===== 首页：横向 tab + 推荐板块（轮播/热门/精选） ===== */
.home-tabs{flex-shrink: 0;display: flex;background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-bottom: 1px solid rgba(0, 0, 0, 0.08);overflow-x: auto;position: relative;z-index: 11;}
.home-tab{flex:1;min-width:0;text-align:center;font-size:14px;color:#555;padding:10px 4px;white-space:nowrap;position:relative;font-weight:400;cursor:pointer;}
.home-tab-active{color:#ff5473;font-weight:600;}
.home-tab-active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:28px;height:3px;border-radius:2px;background:#ff5473;}
.section-title{font-size:15px;font-weight:600;color:#222;margin:12px 8px 8px;padding-left:10px;position:relative;}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:14px;border-radius:2px;background:#ff5473;}
/*#homeSections{background-color: #ffffffba;}*/
.home-carousel{padding:10px 8px 0;}
.home-swiper{border-radius:12px;overflow:hidden;position:relative;}
.home-swiper .swiper-slide a{display:block;width:100%;position:relative;cursor:pointer;}
.home-swiper .slide-name{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 12px 8px;font-size:15px;font-weight:600;line-height:20px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-swiper .swiper-slide img{display:block;width:100%;height:150px;object-fit:cover;transition:transform .3s ease;}
.home-swiper .swiper-slide a:hover img{transform:scale(1.02);}
.home-swiper .swiper-pagination{opacity:.7;text-align:right;padding-right:12px;pointer-events:none;}
.home-swiper .swiper-pagination-bullet{background:#fff;opacity:.6;pointer-events:auto;}
.home-swiper .swiper-pagination-bullet-active{background:#ff5473;opacity:1;}


/* 预约标签（宫格卡片/横向列表通用） */
.reserve-badge{position:absolute;top:4px;left:4px;z-index:2;display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;font-size:10px;line-height:14px;color:#fff;background:#8b5cf6;border-radius:6px;white-space:nowrap;}
.grid-view .game-image{position:relative;}
.list-view .reserve-badge{position:static;margin-left:4px;vertical-align:middle;font-size:9px;padding:0 4px;}

/* 排行榜占位 */
.rank-placeholder{padding:40px 0;text-align:center;color:#aaa;}
.rank-placeholder .main-image-rpx{width:120px;height:120px;margin:0 auto;}
.rank-placeholder .main-image-rpx img{width:100%;}
.rank-placeholder-text{margin-top:8px;font-size:14px;}

/* 分享弹窗（二维码 + 链接复制） */
.zt-share-body{text-align:center;}
.zt-share-qr{margin:0 auto;width:200px;height:200px;background:#fff;border:1px solid #e4e7ed;border-radius:8px;padding:8px;display:flex;align-items:center;justify-content:center;}
.zt-share-qr img{width:100%;height:100%;object-fit:contain;display:block;}
.zt-share-url{display:flex;align-items:center;gap:6px;margin-top:14px;}
.zt-share-url input{flex:1;min-width:0;border:1px solid #e4e7ed;border-radius:6px;padding:7px 10px;font-size:12px;color:#303133;background:#f7f8fa;outline:none;-webkit-user-select:text;user-select:text;}
.zt-share-copy{flex-shrink:0;border:none;background:#5460ff;color:#fff;border-radius:6px;padding:6px 13px;font-size:13px;cursor:pointer;}
.zt-share-copy:active{opacity:.8;}
/* 小屏适配：左侧分类与页面内容统一缩小 */
@media (max-width: 575.98px) {
    .grid-view .game-image{border-radius:12px;}
}

@media (max-width: 479.98px) {
    .top-warp{height:42px;padding:4px;font-size:13px;}
    .icon-right{width:28px;height:42px;line-height:42px;margin-left:2px;}
    .icon-right a{width:26px;height:26px;}
    .search .content{height:30px;padding:0 8px;}
    .so-input input{font-size:13px;}
    .so-action{font-size:13px;}
    .p-l-15{padding-left:5px!important;}
    .p-r-15{padding-right:5px!important;}
    .p-15{padding:5px!important;}
    #toggleIcon,#ztShareBtn{width:32px;}
    #toggleIcon i,#ztShareBtn i{font-size:18px;}
    .left-warp{width:52px;}
    .tab-item{height:46px;font-size:11px;}
    .tab-item-active{font-size:12px;}
    .tab-item-active::before{border-left-width:3px;height:14px;}
    .home-tab{font-size:13px;padding:8px 3px;}
    .home-tab-active::after{width:24px;}
    .home-carousel{padding:8px 5px 0;}
    .section-title{font-size:14px;margin:18px 6px 7px;}
    .home-swiper .swiper-slide img{height:128px;}
    .grid-view .game-card{padding:7px;}
    .grid-view .game-title{margin-top:4px;font-size:11px;line-height:14px;height:28px;}
    .list-view .game-item{padding:6px;}
    .list-view .game-image{width:52px;height:52px;border-radius:4px;}
    .list-view .game-title{font-size:13px;}
    .game-subtitle,.list-view .game-desc{font-size:11px;}
    .list-view .game-tag{font-size:9px;height:14px;padding:0 5px;}
    .list-view .reserve-badge{font-size:8px;padding:0 3px;}
}

@media (max-width: 359.98px) {
    .left-warp{width:46px;}
    .grid-view .game-card{padding:5px;}
}