/* Reset */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;background:#F5F5F5;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang SC','Microsoft YaHei',sans-serif;font-size:14px;color:#333;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{border:none;outline:none;background:none;cursor:pointer;font-family:inherit}
#app{width:100%;max-width:750px;margin:0 auto;position:relative;min-height:100vh;background:#F5F5F5;padding-top:0}
.page-wrapper{width:100%;position:relative;margin-top:0}
.status_bar{width:100%;height:0;background:transparent;display:none}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 16px;background:linear-gradient(135deg,#FF5E00,#FF8C00)}
.header .user{display:flex;align-items:center;gap:10px}
.header .avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,0.5)}
.header .avatar img{width:100%;height:100%;object-fit:cover}
.header .welcome{display:flex;flex-direction:column}
.header .tip{color:#fff;font-size:13px;line-height:1.4}
.header .tip:last-child{font-size:16px;font-weight:600}
.header .icons{display:flex;gap:20px}
.header .item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.header .item .i{width:22px;height:22px}
.header .item .i-search{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat center/contain}
.header .item .i-customerservice{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E") no-repeat center/contain}
.header .item .text{color:#fff;font-size:11px}

/* Download Banner */
.download-banner{background:#FFF8F0;padding:10px 16px;position:relative;border-bottom:1px solid #FFE8D0;display:none}
.download-banner .banner-content{display:flex;align-items:center;gap:10px}
.download-banner .banner-logo{width:40px;height:40px;border-radius:8px}
.download-banner .banner-text{flex:1}
.download-banner .banner-title{font-size:14px;font-weight:600;color:#333}
.download-banner .banner-desc{font-size:12px;color:#999;margin-top:2px}
.download-banner .banner-btn{background:linear-gradient(135deg,#FF5E00,#FF8C00);color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;white-space:nowrap;cursor:pointer}
.download-banner .banner-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center/contain;cursor:pointer}

/* Function Icons */
.function-icons{display:flex;justify-content:space-around;padding:24px 0;background:#fff;margin:0 16px 16px 16px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.func-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:all 0.2s}
.func-item:active{transform:scale(0.95)}
.func-item img{width:48px;height:48px}
.func-item span{font-size:13px;color:#333;font-weight:500}

/* Category */
.category{background:#fff;padding:16px 0;margin:0 16px 16px 16px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.category-tabs{display:flex;gap:12px;margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.category-tabs::-webkit-scrollbar{display:none}
.category-tabs .tab{padding:8px 16px;border-radius:20px;font-size:14px;color:#666;cursor:pointer;background:#f5f5f5;transition:all 0.3s;white-space:nowrap}
.category-tabs .tab.active{background:linear-gradient(135deg,#FF5E00,#FF8C00);color:#fff;box-shadow:0 2px 8px rgba(255,94,0,0.3)}
.category-tabs .tab.more{margin-left:auto;background:transparent;box-shadow:none}
.category-tabs .tab.more .arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #999}
@media(max-width:350px){.goods-card .thumb{width:100px;height:75px}.goods-card .title{font-size:13px}.goods-card .price{font-size:16px}}
/* 首页游戏分类样式 - 可滑动 */
.category {
    background: #fff;
    padding: 12px;
    margin-bottom: 12px;
}

.category-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.category-tabs .tab {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    background: #f5f5f5;
    transition: all 0.2s;
}

.category-tabs .tab.active {
    background: #ff5e00;
    color: #fff;
}

.category-tabs .tab.more {
    margin-left: auto;
}

.category-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 8px;
    overflow-x: unset;
    white-space: normal;
    padding: 12px 8px;
    cursor: default;
}

.category-list-old {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.category-list::-webkit-scrollbar {
    display: none;
}

.category-list:active {
    cursor: grabbing;
}

.game-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: unset;
    min-width: unset;
    transition: transform 0.2s;
    justify-content: center;
    padding: 8px 4px;
}

.game-item-old {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 64px;
    transition: transform 0.2s;
}

.game-item:active {
    transform: scale(0.95);
}

.game-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.game-item-old img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.game-item span {
    font-size: 11px;
    color: #666;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.game-item-old span {
    font-size: 12px;
    color: #666;
    text-align: center;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tabbar */
/* Tabbar */
.tabbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
}

.tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    flex: 1;
}

.tabbar-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tabbar-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tabbar-label {
    font-size: 11px;
    color: #666;
}

.tabbar-item.active .tabbar-label {
    color: #FF5E00;
}

.tabbar-mid-item {
    position: relative;
}

.tabbar-mid-item .tabbar-mid {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF5E00, #FF8C00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -20px;
    box-shadow: 0 4px 12px rgba(255, 94, 0, 0.4);
}

.tabbar-mid-item .tabbar-mid img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.tabbar-placeholder {
    height: 60px;
}

/* Demo Notice - 显眼样式（不可关闭）*/
.demo-notice {
    background: linear-gradient(135deg, #FF5E00, #FF8C00);
    color: #fff;
    padding: 16px 20px;
    margin: 0 16px 16px 16px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(255, 94, 0, 0.35);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.demo-notice .demo-icon {
    font-size: 20px;
}
.demo-notice .demo-text {
    flex: 1;
    text-align: center;
    line-height: 1.5;
}