/* ===== 顶部品牌栏(新葡京 logo 图,固定顶部) ===== */
.brand-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 480px;
    height: 44px;
    padding: 0 16px;
    background: #ff4941;
    box-sizing: border-box;
    transition: all 0.3s;
    overflow: visible;
}

.brand-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.brand-logo {
    height: 74px;
    width: auto;
    max-width: 100%;
    display: block;
    margin-top: -15px;
}

/* ===== 宣传横幅(左右平移轮播) ===== */
.hero-banner {
    background: #000;
    line-height: 0;
    position: relative;
    overflow: hidden;
}

.hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.8s ease-in-out;
    will-change: transform;
}

.hero-track img {
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    display: block;
}

/* ===== 顶部四个功能按钮 ===== */
.top-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    padding: 18px 10px 20px;
    gap: 6px;
}

.action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.action-icon {
    width: 48px;
    height: 48px;
    display: block;
    object-fit: contain;
}

.action span {
    font-size: 13px;
    color: #444;
}

/* ===== 滚动通知(悬浮在宣传图底部) ===== */
.notice {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    padding: 6px 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.notice-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-icon svg {
    width: 22px;
    height: 22px;
}

.notice-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 20px;
}

.notice-content {
    display: inline-flex;
    gap: 40px;
    white-space: nowrap;
    animation: noticeScroll 22s linear infinite;
    font-size: 13px;
    color: #e53935;
    font-weight: 600;
    line-height: 20px;
    padding-left: 100%;
}

@keyframes noticeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* ===== 面板区块 ===== */
.panel {
    background: #fff;
    margin-top: 10px;
    padding: 12px 12px 16px;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 12px;
}

.panel-title .dot {
    width: 14px;
    height: 14px;
    border: 2px solid #ff5a3c;
    border-radius: 50%;
}

.panel-title h2 {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

/* ===== 彩球网格(白底方块 + 分隔线) ===== */
.ball-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e6e6e6;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
    padding: 0;
    margin-top: 4px;
}

.ball-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 12px;
    background: #fff;
}

.ball-item img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    display: block;
}

.ball-item p {
    font-size: 13px;
    color: #333;
}

/* 3D 彩球基础样式 */
.ball {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset -6px -8px 14px rgba(0, 0, 0, 0.18),
        inset 6px 8px 14px rgba(255, 255, 255, 0.35),
        0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 高光点 */
.ball::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 14px;
    width: 20px;
    height: 14px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    filter: blur(1px);
}

/* 球面文字 */
.ball-text {
    font-size: 11px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.ball-text b {
    font-size: 13px;
    display: inline-block;
    margin-top: 2px;
}

/* ===== 各色彩球 ===== */
.ball-green {
    background: radial-gradient(circle at 32% 30%, #b7f4b0, #4bcf3e 55%, #1f9a16);
}
.ball-pink {
    background: radial-gradient(circle at 32% 30%, #ffd4e0, #ff77a3 55%, #d94075);
}
.ball-cyan {
    background: radial-gradient(circle at 32% 30%, #b9f3f0, #3ccfc8 55%, #1a9c95);
}
.ball-orange {
    background: radial-gradient(circle at 32% 30%, #ffd7ad, #ff9033 55%, #cc6608);
}
.ball-rose {
    background: radial-gradient(circle at 32% 30%, #ffc9d9, #ff4d88 55%, #c7205a);
}
.ball-brown {
    background: radial-gradient(circle at 32% 30%, #e2b994, #b1764b 55%, #814a26);
}
.ball-blue {
    background: radial-gradient(circle at 32% 30%, #bcc9ff, #4d61e0 55%, #243bb3);
}
.ball-yellow {
    background: radial-gradient(circle at 32% 30%, #fff3a6, #f1cf2e 55%, #b89a10);
}
.ball-magenta {
    background: radial-gradient(circle at 32% 30%, #ffc3e8, #e84db1 55%, #a51c7a);
}
.ball-red {
    background: radial-gradient(circle at 32% 30%, #ffc1ba, #ef3a2c 55%, #b01609);
}
.ball-sky {
    background: radial-gradient(circle at 32% 30%, #c7dcff, #4a8bee 55%, #1e5dbe);
}
.ball-mint {
    background: radial-gradient(circle at 32% 30%, #c8ecd1, #6ec48a 55%, #3a8e57);
}

/* ===== 悬浮客服 ===== */
.floating-service {
    position: fixed;
    right: calc(50% - 230px);
    bottom: 160px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #c79cf0, #8a43d1 65%, #5f2196);
    box-shadow: 0 6px 14px rgba(93, 33, 150, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-service svg {
    width: 28px;
    height: 28px;
}

/* ===== 底部导航栏 ===== */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 0 10px;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
    z-index: 10;
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #8a8a8a;
    font-size: 12px;
}

.tab img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: grayscale(0.4) opacity(0.75);
    transition: filter 0.15s ease;
}

.tab.active {
    color: #ff4d4f;
}

.tab.active img {
    filter: none;
}

/* ===== 按压反馈 ===== */
.ball-item:active img,
.action:active .action-icon,
.floating-service:active {
    transform: scale(0.94);
    transition: transform 0.08s ease;
}

.ball-item img,
.action-icon,
.floating-service {
    transition: transform 0.15s ease;
}

/* ===== 其它 tab 页占位 ===== */
.page {
    display: none;
    padding: 40px 20px;
    text-align: center;
    color: #888;
    font-size: 14px;
    min-height: 60vh;
}

.page.active {
    display: block;
}

.page h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    .floating-service {
        right: 12px;
    }
}