/* ========== 核心 UI 样式修复 ==========
   该文件原本只剩少量补充样式，导致页面结构存在但视觉 UI 消失/塌陷。
   以下恢复应用基础布局、登录注册页、主页面、底部导航、卡片、表单与常用组件样式。 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #2d1b0e;
    background: #fef7f0;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
}

.app-container {
    width: 100%;
    max-width: 480px;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background: #fffaf5;
    box-shadow: 0 0 40px rgba(236, 72, 153, 0.08);
}

.page {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px 92px;
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf5 42%, #ffffff 100%);
    -webkit-overflow-scrolling: touch;
}

.page-header,
.home-header,
.section-header,
.racing-history-header,
.profile-header,
.assets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.page-title,
.section-title,
.section-name,
.auth-title {
    margin: 0;
    font-weight: 700;
    color: #2d1b0e;
}

.page-title {
    font-size: 22px;
}

.section-title,
.section-name {
    font-size: 17px;
}

.back-btn,
.icon-btn {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    color: #8b7355;
    box-shadow: 0 4px 14px rgba(141, 92, 42, 0.08);
}

/* ========== 登录 / 注册 ========== */
.login-page,
.register-page {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    background: radial-gradient(circle at 15% 12%, rgba(244, 114, 182, 0.26), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(251, 146, 60, 0.18), transparent 32%),
        linear-gradient(160deg, #fff7ed 0%, #fff0f5 52%, #ffffff 100%);
}

.auth-bg-decoration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-circle {
    position: absolute;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.24), rgba(251, 146, 60, 0.16));
    filter: blur(1px);
}

.auth-circle.c1 {
    width: 160px;
    height: 160px;
    left: -50px;
    top: 60px;
}

.auth-circle.c2 {
    width: 120px;
    height: 120px;
    right: -36px;
    top: 160px;
}

.auth-circle.c3 {
    width: 210px;
    height: 210px;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%);
}

.auth-container {
    width: min(100% - 32px, 388px);
    position: relative;
    z-index: 1;
    padding: 30px 22px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 60px rgba(236, 72, 153, 0.14);
    backdrop-filter: blur(16px);
}

.auth-header {
    text-align: center;
    margin-bottom: 26px;
}

.auth-logo {
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    border-radius: 24px;
    padding: 5px;
    background: linear-gradient(135deg, #f472b6, #fb923c);
    box-shadow: 0 16px 36px rgba(236, 72, 153, 0.25);
}

.auth-logo-inner {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.auth-logo-text {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: #ec4899;
}

.auth-title {
    font-size: 26px;
    margin-bottom: 8px;
}

.auth-subtitle,
.auth-footer,
.form-hint,
.muted {
    color: #9a8266;
    font-size: 14px;
}

.auth-form,
.form-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-input-group {
    width: 100%;
}

.input-wrapper,
.form-input-wrapper,
.auth-input-wrap {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #fde8d8;
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrapper:focus-within,
.form-input-wrapper:focus-within,
.auth-input-wrap:focus-within {
    border-color: #f472b6;
    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.12);
}

.input-wrapper input,
.form-input-wrapper input,
.auth-input-wrap input,
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #2d1b0e;
}

.auth-input {
    min-width: 0;
    height: 50px;
    flex: 1;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    color: #2d1b0e;
    font-size: 15px;
    line-height: 50px;
}

.auth-input::placeholder {
    color: #b8a08a;
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #2d1b0e;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0 1000px #fff inset;
}

.auth-input-icon,
.auth-eye-icon {
    width: 22px;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b8a08a;
    line-height: 1;
    user-select: none;
}

.auth-eye-icon {
    cursor: pointer;
}

.auth-code-wrap {
    padding-right: 8px;
}

.auth-code-btn {
    min-width: 92px;
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    background: #fff0f5;
    color: #ec4899;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    white-space: nowrap;
}

.form-input,
.form-select,
.form-textarea {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #fde8d8;
    border-radius: 14px;
    background: #fff;
}

.form-textarea {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}

/* ========== NFT ========== */
.nft-page {
    background: linear-gradient(180deg, #fff7ed 0%, #fdf2f8 48%, #eef2ff 100%);
}

.nft-content {
    padding: 16px;
}

.nft-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(236,72,153,0.14), rgba(99,102,241,0.14)), #fff;
    box-shadow: 0 18px 36px rgba(88, 28, 135, 0.12);
}

.nft-hero-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #fce7f3);
    font-size: 32px;
    box-shadow: 0 12px 0 rgba(236,72,153,0.12);
}

.nft-hero-title {
    margin: 0 0 6px;
    font-size: 18px;
    color: #2d1b0e;
}

.nft-hero-desc {
    margin: 0;
    color: #8b7355;
    font-size: 13px;
    line-height: 1.5;
}

.nft-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0 18px;
}

.nft-stat {
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.86);
    box-shadow: 0 10px 24px rgba(88, 28, 135, 0.08);
}

.nft-stat-label {
    display: block;
    color: #8b7355;
    font-size: 12px;
    margin-bottom: 6px;
}

.nft-stat-value {
    color: #ec4899;
    font-size: 18px;
    font-weight: 800;
}

.nft-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 24px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 18px 34px rgba(88, 28, 135, 0.12);
}

.nft-art {
    position: relative;
    width: 96px;
    min-width: 96px;
    height: 126px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 32%), linear-gradient(145deg, #fce7f3, #c7d2fe);
    box-shadow: 0 14px 0 rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

.nft-art-icon {
    font-size: 42px;
    filter: drop-shadow(0 10px 8px rgba(88,28,135,0.18));
}

.nft-rarity {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    font-size: 11px;
    font-weight: 700;
}

.nft-info {
    min-width: 0;
    flex: 1;
}

.nft-title-row,
.nft-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.nft-name {
    margin: 0;
    color: #2d1b0e;
    font-size: 16px;
}

.nft-chain {
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #6366f1;
    font-size: 11px;
    font-weight: 700;
}

.nft-desc {
    margin: 8px 0;
    color: #8b7355;
    font-size: 12px;
    line-height: 1.5;
}

.nft-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #f3e8ff;
}

.nft-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
}

.nft-progress-text {
    margin-top: 5px;
    color: #8b7355;
    font-size: 11px;
}

.nft-footer {
    margin-top: 12px;
}

.nft-price {
    color: #8b7355;
    font-size: 12px;
}

.nft-price span {
    color: #ec4899;
    font-size: 18px;
    font-weight: 800;
}

.auth-icon {
    color: #b8a08a;
    flex-shrink: 0;
}

.auth-options,
.form-row,
.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #8b7355;
}

.auth-remember,
.auth-agreement {
    display: flex;
    align-items: center;
    gap: 7px;
}

.auth-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #ec4899;
}

.auth-forgot {
    color: #ec4899;
    font-weight: 600;
    cursor: pointer;
}

.auth-link,
.link {
    color: #ec4899;
    font-weight: 600;
    cursor: pointer;
}

.btn,
.auth-btn,
.primary-btn,
.action-btn,
.submit-btn,
.pool-upgrade-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 15px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    box-shadow: 0 10px 24px rgba(236, 72, 153, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:active,
.auth-btn:active,
.primary-btn:active,
.action-btn:active,
.submit-btn:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.18);
}

.btn-full,
.auth-btn,
.submit-btn {
    width: 100%;
}

.btn.secondary,
.secondary-btn,
.outline-btn {
    color: #ec4899;
    background: #fff;
    border: 1px solid #fbcfe8;
    box-shadow: none;
}

/* ========== 首页与通用卡片 ========== */
.home-page {
    padding-top: 18px;
}

.home-top,
.home-hero,
.asset-card,
.balance-card,
.profile-card,
.mining-card,
.task-card,
.promo-card,
.ecology-card,
.finance-card,
.airdrop-card,
.governance-card,
.wallet-card,
.form-card,
.content-card,
.announcement-item,
.pool-item,
.game-card,
.market-card,
.racing-card {
    border: 1px solid #fde8d8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(141, 92, 42, 0.07);
}

.home-hero,
.balance-card,
.asset-card.primary,
.profile-card.primary {
    padding: 20px;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #ec4899 0%, #f472b6 48%, #fb923c 100%);
    box-shadow: 0 18px 44px rgba(236, 72, 153, 0.22);
}

.home-content,
.page-content,
.card-list,
.section-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quick-grid,
.asset-grid,
.ecology-grid,
.game-grid,
.profile-menu,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-item,
.asset-item,
.ecology-grid-card,
.profile-menu-item,
.stat-card {
    min-height: 88px;
    padding: 14px;
    border: 1px solid #fde8d8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(141, 92, 42, 0.06);
}

.quick-icon,
.menu-icon,
.stat-icon,
.section-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff0f5;
    color: #ec4899;
    margin-bottom: 8px;
}

.card-title,
.item-title,
.quick-title,
.menu-title {
    font-weight: 700;
    color: #2d1b0e;
}

.card-subtitle,
.item-desc,
.quick-desc,
.menu-desc,
.empty-text {
    font-size: 12px;
    color: #9a8266;
}

.price-value,
.balance-value,
.asset-value,
.number-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.price-label,
.balance-label,
.asset-label {
    font-size: 13px;
    opacity: 0.78;
}

.tag,
.badge,
.status-tag,
.pool-status,
.withdraw-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #fff0f5;
    color: #ec4899;
}

/* ========== 底部导航 ========== */
.bottom-nav {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    height: 68px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(253, 232, 216, 0.9);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 40px rgba(141, 92, 42, 0.14);
    backdrop-filter: blur(18px);
}

.nav-item {
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 18px;
    color: #a58b70;
    transition: all 0.2s ease;
}

.nav-item.active {
    color: #ec4899;
    background: #fff0f5;
}

.nav-icon {
    font-size: 20px;
    line-height: 1;
}

.nav-label {
    font-size: 11px;
    font-weight: 700;
}

/* ========== 列表、弹窗、游戏页基础 ========== */
.list-item,
.record-item,
.order-item,
.announcement-card,
.team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #fde8d8;
    border-radius: 16px;
    background: #fff;
}

.empty-state {
    padding: 26px 16px;
    text-align: center;
    color: #b8a08a;
}

.modal,
.racing-result-modal,
.ad-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(45, 27, 14, 0.42);
}

.modal-content,
.racing-result-content {
    width: min(100%, 380px);
    padding: 22px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(45, 27, 14, 0.18);
}

.pool-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.pool-number {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

.pool-info {
    flex: 1;
    min-width: 0;
}

.pool-name {
    display: block;
    font-weight: 700;
}

.pool-details {
    font-size: 12px;
    color: #9a8266;
}

.racing-track,
.game-board,
.kline-chart,
canvas {
    width: 100%;
    border-radius: 18px;
    background: #fff7ed;
}

@media (min-width: 481px) {
    .app-container {
        border-radius: 28px;
    }
}

/* ========== 全游戏轻量 3D 视觉系统 ========== */
.lucky-spin-page,
.scratch-card-page,
.dice-game-page,
.treasure-box-page,
.battle-royale-page,
.flip-match-page,
.red-packet-page,
.guess-number-page,
.horse-racing-page {
    --game-primary: #ec4899;
    --game-secondary: #fb923c;
    --game-deep: #3b1d4a;
    --game-glow: rgba(236, 72, 153, 0.26);
    background:
        radial-gradient(circle at 16% 9%, rgba(244, 114, 182, 0.24), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(251, 146, 60, 0.22), transparent 28%),
        linear-gradient(180deg, #fff7ed 0%, #fff0f7 48%, #fffaf5 100%);
    perspective: 1100px;
}

.game-content,
.horse-racing-content,
.br-game-scene,
.br-bottom-panel,
.br-info-panel {
    transform-style: preserve-3d;
}

.game-balance-card,
.spin-cost-info,
.treasure-cost-info,
.racing-balance-card,
.race-countdown-card,
.racing-bet-section,
.racing-rules-card,
.game-history-section,
.game-rules-section,
.racing-history-section,
.racing-mybets-section,
.flip-stat,
.br-info-panel,
.br-bottom-panel {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.74);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 245, 0.82)),
        linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(251, 146, 60, 0.08));
    box-shadow:
        0 18px 34px rgba(88, 45, 73, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -10px 22px rgba(236, 72, 153, 0.04);
    transform: translateZ(0);
}

.game-balance-card::after,
.racing-balance-card::after,
.race-countdown-card::after,
.spin-wheel-area::after,
.dice-stage::after,
.scratch-card-area::after,
.treasure-boxes::after,
.rp-scene::after,
.gn-stage::after,
.racing-track-animated::after,
.br-game-scene::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14px;
    height: 22px;
    border-radius: 999px;
    background: radial-gradient(ellipse, rgba(60, 20, 55, 0.22), transparent 70%);
    filter: blur(7px);
    pointer-events: none;
    z-index: -1;
}

.btn-racing,
.btn-dice-small,
.btn-dice-big,
.br-buy-btn,
.br-result-btn,
.quick-amt,
.horse-btn {
    transform: translateZ(18px);
    box-shadow:
        0 12px 0 rgba(161, 38, 104, 0.24),
        0 20px 32px rgba(236, 72, 153, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.btn-racing:active,
.btn-dice-small:active,
.btn-dice-big:active,
.br-buy-btn:active,
.br-result-btn:active,
.quick-amt:active,
.horse-btn:active {
    transform: translateY(5px) translateZ(8px);
    box-shadow:
        0 6px 0 rgba(161, 38, 104, 0.22),
        0 12px 22px rgba(236, 72, 153, 0.18);
}

.ecology-grid-card {
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ecology-grid-card:hover,
.ecology-grid-card:active {
    transform: rotateX(7deg) rotateY(-6deg) translateY(-4px);
    box-shadow: 0 18px 34px rgba(236, 72, 153, 0.18);
}

.grid-card-icon {
    display: inline-flex;
    transform: translateZ(24px);
    filter: drop-shadow(0 10px 10px rgba(236, 72, 153, 0.2));
}

/* 幸运转盘 3D */
.spin-wheel-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 330px;
    margin: 18px 0;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), transparent 24%),
        radial-gradient(circle at 50% 54%, rgba(236, 72, 153, 0.18), transparent 55%),
        linear-gradient(180deg, #fff7ed, #ffe4ef);
    box-shadow: inset 0 -18px 34px rgba(236, 72, 153, 0.09);
    perspective: 900px;
}

.spin-wheel-area canvas {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    transform: rotateX(16deg) translateZ(28px);
    box-shadow:
        0 18px 0 #d9468f,
        0 34px 45px rgba(107, 33, 94, 0.28),
        inset 0 0 0 10px rgba(255, 255, 255, 0.45);
    animation: gameFloat3d 4.8s ease-in-out infinite;
}

.spin-pointer-wrap {
    transform: translateZ(76px);
    filter: drop-shadow(0 10px 8px rgba(120, 30, 90, 0.25));
}

.preview-chip {
    display: inline-flex;
    transform: translateZ(14px);
    box-shadow: 0 8px 0 rgba(236, 72, 153, 0.12);
}

/* 刮刮乐 3D */
.scratch-card-area {
    position: relative;
    padding: 24px 12px 36px;
    border-radius: 30px;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,228,239,0.75)),
        radial-gradient(circle at 50% 35%, rgba(251, 146, 60, 0.22), transparent 46%);
    perspective: 900px;
}

.scratch-card {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    transform: rotateX(14deg) translateZ(30px);
    background: linear-gradient(145deg, #fff, #ffe4ef);
    box-shadow:
        0 16px 0 #f9a8d4,
        0 32px 45px rgba(157, 23, 77, 0.22),
        inset 0 0 0 2px rgba(255,255,255,0.75);
}

.scratch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.42) 38%, transparent 58%);
    transform: translateX(-120%);
    animation: shineSweep 3.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}

/* 骰子 3D */
.dice-stage {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background:
        radial-gradient(ellipse at 50% 70%, rgba(55, 20, 45, 0.18), transparent 38%),
        linear-gradient(160deg, #fff7ed, #ffe4ef);
    perspective: 900px;
}

.dice-table {
    width: min(100%, 310px);
    min-height: 162px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,240,245,0.84));
    transform: rotateX(18deg) translateZ(34px);
    box-shadow:
        0 20px 0 #f9a8d4,
        0 38px 42px rgba(112, 26, 117, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

.dice-display {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 58px;
    background: linear-gradient(145deg, #fff, #ffe4ef);
    box-shadow:
        9px 9px 0 rgba(236, 72, 153, 0.18),
        0 18px 24px rgba(236, 72, 153, 0.2),
        inset -8px -8px 16px rgba(236, 72, 153, 0.08);
    transform: rotateX(-12deg) rotateY(18deg) translateZ(26px);
    animation: diceIdle3d 2.6s ease-in-out infinite;
}

.dice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* 宝箱 3D */
.treasure-boxes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 8px 28px;
    border-radius: 30px;
    background: radial-gradient(circle at 50% 38%, rgba(251, 191, 36, 0.18), transparent 45%);
    perspective: 1000px;
}

.treasure-box {
    position: relative;
    min-height: 160px;
    padding: 16px 8px;
    border-radius: 22px;
    transform-style: preserve-3d;
    transform: rotateX(12deg) translateZ(18px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:
        0 14px 0 rgba(120, 53, 15, 0.18),
        0 26px 32px rgba(120, 53, 15, 0.18);
}

.treasure-box:hover,
.treasure-box:active {
    transform: rotateX(2deg) translateY(-8px) translateZ(35px);
}

.treasure-box.bronze { background: linear-gradient(145deg, #fcd7aa, #b87333); }
.treasure-box.silver { background: linear-gradient(145deg, #f8fafc, #94a3b8); }
.treasure-box.gold { background: linear-gradient(145deg, #fde68a, #f59e0b); }

.box-icon {
    font-size: 44px;
    transform: translateZ(42px);
    filter: drop-shadow(0 12px 8px rgba(0,0,0,0.2));
}

.box-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.38), transparent);
    transform: translateX(-120%);
    animation: shineSweep 4s ease-in-out infinite;
}

/* 大逃杀 3D */
.battle-royale-page {
    --game-primary: #ef4444;
    --game-secondary: #f97316;
    background: linear-gradient(180deg, #2a1631 0%, #5f243d 44%, #fff7ed 100%);
}

.br-game-scene {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 18px 12px 28px;
    background:
        linear-gradient(180deg, rgba(47, 20, 48, 0.88), rgba(111, 49, 55, 0.84)),
        radial-gradient(circle at 50% 30%, rgba(255, 193, 7, 0.12), transparent 50%);
    box-shadow:
        0 28px 52px rgba(39, 12, 32, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.22);
    perspective: 1000px;
}

.br-rooms-grid {
    transform-style: preserve-3d;
    transform: rotateX(12deg) translateZ(18px);
}

.br-room-item {
    transform-style: preserve-3d;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.br-room-item:hover,
.br-room-item.selected {
    transform: translateY(-6px) translateZ(30px) rotateX(-4deg);
    filter: drop-shadow(0 16px 12px rgba(255, 193, 7, 0.24));
}

.br-door-body {
    transform-style: preserve-3d;
    box-shadow: 0 12px 0 rgba(0,0,0,0.22), 0 20px 24px rgba(0,0,0,0.22);
}

.br-door-panel {
    transform: translateZ(12px);
}

.br-monkey-sprite {
    display: inline-block;
    transform: translateZ(28px);
    animation: gameFloat3d 3s ease-in-out infinite;
}

/* 翻牌 3D */
.flip-board {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.flip-card {
    perspective: 900px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 12px 10px rgba(120, 40, 110, 0.15));
}

.flip-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1);
}

.flip-card.flipped .flip-card-inner,
.flip-card.matched .flip-card-inner {
    transform: rotateY(180deg) translateZ(18px);
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
    box-shadow:
        0 10px 0 rgba(236, 72, 153, 0.16),
        0 18px 22px rgba(112, 26, 117, 0.16);
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* 红包 3D */
.rp-scene {
    position: relative;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 34%, rgba(251, 191, 36, 0.35), transparent 38%),
        linear-gradient(180deg, #fff7ed, #ffe4e6);
    perspective: 900px;
}

.rp-packet {
    transform-style: preserve-3d;
    transform: rotateX(10deg) translateZ(36px);
    filter: drop-shadow(0 26px 18px rgba(185, 28, 28, 0.24));
    animation: packetPulse3d 2.4s ease-in-out infinite;
}

.rp-packet-body,
.rp-packet-top,
.rp-packet-bottom {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

.rp-circle {
    transform: translateZ(34px);
    box-shadow: 0 10px 0 rgba(146, 64, 14, 0.22), 0 16px 20px rgba(251, 191, 36, 0.26);
}

/* 猜数字 3D */
.gn-stage {
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 36%, rgba(99, 102, 241, 0.18), transparent 44%),
        linear-gradient(160deg, #fff7ed, #eef2ff);
    perspective: 900px;
}

.gn-display {
    transform-style: preserve-3d;
    transform: rotateX(14deg) translateZ(30px);
}

.gn-number {
    min-width: 116px;
    min-height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background: linear-gradient(145deg, #ffffff, #f5d0fe);
    box-shadow:
        0 18px 0 #d8b4fe,
        0 34px 42px rgba(88, 28, 135, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.82);
    transform: translateZ(28px);
}

.gn-input-wrap,
.bet-input-wrapper {
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.78),
        0 8px 16px rgba(141, 92, 42, 0.08);
}

/* 赛马 3D */
.racing-track-animated {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,0.8), transparent 18%),
        linear-gradient(180deg, #bfdbfe 0%, #dcfce7 44%, #86efac 100%);
    perspective: 1100px;
    box-shadow:
        inset 0 -18px 30px rgba(34, 197, 94, 0.16),
        0 22px 42px rgba(34, 94, 54, 0.16);
}

.track-scene {
    transform-style: preserve-3d;
    transform: rotateX(9deg) translateZ(10px);
}

.track-ground {
    transform: translateZ(-30px) rotateX(70deg);
    transform-origin: bottom;
}

.track-lane-anim {
    transform-style: preserve-3d;
    transform: translateZ(20px);
    box-shadow: 0 10px 18px rgba(22, 101, 52, 0.12);
}

.runner-sprite {
    display: inline-block;
    transform: translateZ(34px) scale(1.08);
    filter: drop-shadow(0 12px 8px rgba(22, 101, 52, 0.25));
    animation: runnerBounce3d 0.85s ease-in-out infinite;
}

.horse-btn {
    transform-style: preserve-3d;
}

.horse-btn-icon {
    display: inline-block;
    transform: translateZ(20px);
    filter: drop-shadow(0 8px 6px rgba(236, 72, 153, 0.18));
}

/* 3D 结果弹窗 */
.game-result-modal,
.br-result-modal {
    perspective: 1000px;
}

.game-result-content,
.br-result-card {
    transform-style: preserve-3d;
    transform: rotateX(3deg) translateZ(32px);
    background:
        radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.22), transparent 35%),
        linear-gradient(160deg, #fff, #fff0f5);
    box-shadow:
        0 24px 0 rgba(236, 72, 153, 0.12),
        0 42px 70px rgba(88, 28, 135, 0.24);
}

.game-result-icon,
.br-result-icon {
    transform: translateZ(46px);
    filter: drop-shadow(0 14px 10px rgba(236, 72, 153, 0.24));
    animation: gameFloat3d 2.4s ease-in-out infinite;
}

@keyframes gameFloat3d {
    0%, 100% { transform: translateY(0) translateZ(28px); }
    50% { transform: translateY(-8px) translateZ(42px); }
}

@keyframes diceIdle3d {
    0%, 100% { transform: rotateX(-12deg) rotateY(18deg) translateZ(26px); }
    50% { transform: rotateX(8deg) rotateY(-16deg) translateZ(36px); }
}

@keyframes packetPulse3d {
    0%, 100% { transform: rotateX(10deg) translateZ(36px) scale(1); }
    50% { transform: rotateX(2deg) translateZ(48px) scale(1.04); }
}

@keyframes runnerBounce3d {
    0%, 100% { transform: translateY(0) translateZ(34px) scale(1.08); }
    50% { transform: translateY(-5px) translateZ(44px) scale(1.12); }
}

@keyframes shineSweep {
    0% { transform: translateX(-120%); }
    45%, 100% { transform: translateX(120%); }
}

/* ========== 基础工具类 ========== */
.hidden {
    display: none !important;
}

.page {
    min-height: 100vh;
    width: 100%;
}

/* ========== 广告容器 ========== */
.ad-container {
    margin: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #fef7f0;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== 价格动态效果 ========== */
.price-up {
    color: #10b981 !important;
    animation: pricePulse 0.5s ease;
}

.price-down {
    color: #ef4444 !important;
    animation: pricePulse 0.5s ease;
}

@keyframes pricePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.price-arrow {
    font-size: 11px;
    margin-left: 3px;
}

.price-change-up {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.price-change-down {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* 价格闪烁效果 */
.price-flash-up {
    animation: flashGreen 0.6s ease;
}

.price-flash-down {
    animation: flashRed 0.6s ease;
}

@keyframes flashGreen {
    0% { background-color: rgba(16, 185, 129, 0.3); }
    100% { background-color: transparent; }
}

@keyframes flashRed {
    0% { background-color: rgba(239, 68, 68, 0.3); }
    100% { background-color: transparent; }
}

/* 实时标签脉冲 */
.realtime-tag {
    animation: realtimePulse 2s ease-in-out infinite;
}

@keyframes realtimePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========== 公告增强样式 ========== */
.announcement-item {
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.announcement-item:hover {
    background: #fff8f5;
    transform: translateX(4px);
}

.announcement-item:active {
    transform: translateX(2px);
}

.announcement-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.3s ease;
}

.announcement-item:hover::after {
    background: linear-gradient(180deg, #f472b6, #ec4899);
}

.announcement-tag {
    transition: all 0.3s ease;
}

.announcement-item:hover .announcement-tag {
    transform: scale(1.1);
}

.announcement-arrow {
    transition: all 0.3s ease;
}

.announcement-item:hover .announcement-arrow {
    transform: translateX(4px);
    color: #ec4899;
}

/* 公告图片样式 */
.announcement-image {
    width: 100%;
    border-radius: 8px;
    margin: 12px 0;
    max-height: 200px;
    object-fit: cover;
}

.detail-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 10px 0;
}

/* 公告空状态 */
.announcement-empty {
    text-align: center;
    padding: 40px 20px;
    color: #b8a08a;
}

.announcement-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ========== 管理后台公告管理样式 ========== */
.admin-announcement-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.admin-announcement-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #fde8d8;
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
}

.admin-announcement-card:hover {
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.12);
    transform: translateY(-2px);
    border-color: #f9a8d4;
}

.admin-announcement-card.selected {
    border-color: #ec4899;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.15);
}

.announcement-card-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #fef5ee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.announcement-card-image img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.announcement-card-content {
    flex: 1;
    min-width: 0;
}

.announcement-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #2d1b0e;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.announcement-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.announcement-card-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.announcement-card-tag.top {
    background: #ec4899;
    color: white;
}

.announcement-card-tag.new {
    background: #10b981;
    color: white;
}

.announcement-card-tag.hot {
    background: #f59e0b;
    color: white;
}

.announcement-card-date {
    font-size: 12px;
    color: #b8a08a;
}

.announcement-card-preview {
    font-size: 13px;
    color: #8b7355;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.announcement-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.announcement-card-actions .admin-btn {
    padding: 6px 12px;
    font-size: 12px;
}

/* 公告编辑模态框 */
.announcement-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.announcement-image-upload {
    border: 2px dashed #fde8d8;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fef7f0;
}

.announcement-image-upload:hover {
    border-color: #f472b6;
    background: #fff0f5;
}

.announcement-image-upload.has-image {
    border-style: solid;
    border-color: #ec4899;
    padding: 12px;
}

.announcement-image-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
}

.announcement-image-placeholder {
    font-size: 36px;
    margin-bottom: 8px;
}

.announcement-image-hint {
    font-size: 12px;
    color: #b8a08a;
}

/* 公告管理工具栏 */
.announcement-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.announcement-filter-tabs {
    display: flex;
    gap: 8px;
}

.announcement-filter-tab {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #fde8d8;
    background: white;
    color: #8b7355;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.announcement-filter-tab.active {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    color: white;
    border-color: transparent;
}

/* 隐藏登录注册页面的底部导航 */

/* ========== 默认头像样式 ========== */
.avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
}

.avatar-img-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}