/* pages/gold-fighter/gold-fighter.wxss - 金牌打手机甲风格（CSS变量版） */

/* ========== 全局 ========== */
page {
    background: #0B1A2F;
    min-height: 100vh;
    font-family: 'Avenir', 'PingFang SC', 'Helvetica Neue', sans-serif;
    color: #fff;
  }
  
  .bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      linear-gradient(rgba(0, 160, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 160, 255, 0.1) 1px, transparent 1px);
    background-size: 50rpx 50rpx;
    pointer-events: none;
    z-index: 0;
  }
  
  .bg-energy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(0,200,255,0.1) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(0,100,255,0.1) 0%, transparent 40%);
    animation: energyFlow 20s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  
  @keyframes energyFlow {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
  }
  
  .page-container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 30rpx 25rpx;
    box-sizing: border-box;
  }
  
  /* ========== 顶部栏 ========== */
  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    margin-top: 20rpx;
  }
  .jinpai-badge {
    display: flex;
    align-items: center;
  }
  .jinpai-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 15rpx;
  }
  /* 火苗图标燃烧动画 */
  .fire-icon {
    animation: fireBurn 0.8s infinite alternate ease-in-out;
    filter: drop-shadow(0 0 10rpx #ffaa00);
  }
  @keyframes fireBurn {
    0% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10rpx #ffaa00); }
    25% { transform: scale(1.1) rotate(2deg); filter: drop-shadow(0 0 20rpx #ff5500); }
    50% { transform: scale(1.05) rotate(-2deg); filter: drop-shadow(0 0 30rpx #ffaa00); }
    75% { transform: scale(1.15) rotate(3deg); filter: drop-shadow(0 0 40rpx #ffaa00); }
    100% { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 10rpx #ffaa00); }
  }
  .jinpai-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #ffaa00;
    text-shadow: 0 0 30rpx #ffaa00, 0 0 60rpx #ffaa00;
    letter-spacing: 2rpx;
  }
  .refresh-btn {
    display: flex;
    align-items: center;
    background: rgba(0,40,70,0.8);
    border: 2rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    padding: 8rpx 25rpx;
  }
  .refresh-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
  .refresh-text {
    font-size: 26rpx;
    color: #00a6ff;
  }
  .refresh-btn:active {
    opacity: 0.8;
  }
  
  /* ========== 用户信息 ========== */
  .user-section {
    display: flex;
    background: rgba(0,30,50,0.5);
    backdrop-filter: blur(20px);
    border: 2rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    padding: 30rpx;
    margin-bottom: 40rpx;
  }
  .avatar-wrap {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    margin-right: 30rpx;
  }
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4rpx solid #00a6ff;
    box-shadow: 0 0 50rpx #00a6ff;
    object-fit: cover;
  }
  .avatar-ring {
    position: absolute;
    top: -10rpx;
    left: -10rpx;
    right: -10rpx;
    bottom: -10rpx;
    border-radius: 50%;
    border: 2rpx solid #00a6ff;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: ringRotate 6s linear infinite;
  }
  @keyframes ringRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .user-info {
    flex: 1;
  }
  .name-row {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }
  .nickname {
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    margin-right: 15rpx;
    max-width: 250rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .status-tag {
    font-size: 22rpx;
    padding: 4rpx 16rpx;
    border-radius: 30rpx;
    background: rgba(255,255,255,0.1);
    border: 1rpx solid currentColor;
  }
  .status-tag.online { color: #00ff80; border-color: #00ff80; }
  .status-tag.offline { color: #aaa; border-color: #aaa; }
  .uid-row {
    display: flex;
    align-items: center;
    background: rgba(0,50,80,0.6);
    border-left: 4rpx solid #00a6ff;
    padding: 8rpx 20rpx;
    margin-bottom: 10rpx;
    width: fit-content;
  }
  .uid-label {
    font-size: 24rpx;
    color: #9cf;
    margin-right: 10rpx;
  }
  .uid-value {
    font-size: 24rpx;
    color: #fff;
    font-family: monospace;
    margin-right: 15rpx;
  }
  .copy-icon {
    width: 30rpx;
    height: 30rpx;
  }
  .order-status {
    display: flex;
    align-items: center;
  }
  .status-label {
    font-size: 24rpx;
    color: #9cf;
    margin-right: 8rpx;
  }
  .status-value {
    font-size: 24rpx;
    color: #aaa;
  }
  .status-value.active {
    color: #00ff80;
    text-shadow: 0 0 10rpx #00ff80;
  }
  
  /* ========== 核心资产卡 ========== */
  .asset-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #0A1F3A, #0B2A4A);
    border: 2rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    padding: 30rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 0 40rpx #00a6ff;
  }
  .asset-left {
    flex: 1;
  }
  .asset-label {
    font-size: 28rpx;
    color: #9cf;
    display: block;
    margin-bottom: 10rpx;
  }
  .asset-value-group {
    display: flex;
    align-items: baseline;
  }
  .asset-number {
    font-size: 68rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 30rpx #00a6ff, 0 0 60rpx #00a6ff;
  }
  .asset-unit {
    font-size: 32rpx;
    color: #00a6ff;
    margin-left: 10rpx;
  }
  .asset-right {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 2rpx solid #ffaa00;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    padding: 15rpx 30rpx;
    position: relative;
    overflow: hidden;
  }
  .withdraw-icon {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
  }
  .withdraw-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffaa00;
  }
  .withdraw-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: scan 2s infinite;
  }
  @keyframes scan {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  .asset-right:active {
    transform: scale(0.96);
  }
  
  /* ========== 统计网格 ========== */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 40rpx;
  }
  .stat-item {
    background: rgba(0,30,50,0.7);
    border: 1rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    padding: 20rpx 10rpx;
    text-align: center;
  }
  .stat-label {
    font-size: 24rpx;
    color: #9cf;
    display: block;
    margin-bottom: 10rpx;
  }
  .stat-value {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
  
  /* ========== 图形化数据（使用CSS变量） ========== */
  .graphic-panel {
    background: rgba(0,30,50,0.6);
    backdrop-filter: blur(15px);
    border: 2rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%);
    padding: 30rpx;
    margin-bottom: 40rpx;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .chart-item {
    width: 45%;
    text-align: center;
  }
  .chart-title {
    font-size: 28rpx;
    color: #9cf;
    margin-bottom: 15rpx;
    text-transform: uppercase;
    border-left: 4rpx solid #00a6ff;
    padding-left: 15rpx;
    text-align: left;
  }
  
  /* 环形进度条（使用CSS变量 --progress-angle） */
  .ring-chart {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 40rpx #00a6ff;
  }
  .ring-progress {
    width: 100%;
    height: 100%;
    background: conic-gradient(#00a6ff 0deg, #00a6ff var(--progress-angle), #1a3a5a var(--progress-angle), #1a3a5a 360deg);
    border-radius: 50%;
  }
  .ring-inner {
    position: absolute;
    top: 15rpx;
    left: 15rpx;
    right: 15rpx;
    bottom: 15rpx;
    background: #0a1a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #00a6ff;
    box-shadow: inset 0 0 20rpx rgba(0,0,0,0.5);
  }
  
  /* 提现进度条（使用CSS变量 --progress-width） */
  .progress-container {
    height: 30rpx;
    background: #1a3a5a;
    border-radius: 15rpx;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 20rpx;
  }
  .progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00a6ff, #80d4ff);
    border-radius: 15rpx;
    width: var(--progress-width);
    position: relative;
  }
  .flow-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: flow 1.5s infinite;
  }
  @keyframes flow {
    0% { left: -100%; }
    100% { left: 100%; }
  }
  .progress-label {
    position: absolute;
    right: 20rpx;
    top: -30rpx;
    font-size: 24rpx;
    color: #00a6ff;
  }
  .progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #9cf;
    margin-top: 15rpx;
  }
  
  /* ========== 功能按钮（图标强光效果） ========== */
  .function-panel {
    margin-bottom: 40rpx;
  }
  .function-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
  }
  .func-item {
    background: rgba(0,20,40,0.8);
    border: 1rpx solid #00a6ff;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    padding: 25rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
  }
  .func-item:active {
    transform: scale(0.96);
    box-shadow: 0 0 40rpx #00a6ff;
  }
  /* 图标超强发光 */
  .super-glow {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 15rpx;
    filter: drop-shadow(0 0 25rpx #00a6ff) drop-shadow(0 0 50rpx #00a6ff) drop-shadow(0 0 80rpx #00a6ff);
    animation: superGlow 1s infinite alternate;
  }
  @keyframes superGlow {
    0% { filter: drop-shadow(0 0 20rpx #00a6ff) drop-shadow(0 0 40rpx #00a6ff) drop-shadow(0 0 60rpx #00a6ff); }
    100% { filter: drop-shadow(0 0 30rpx #00a6ff) drop-shadow(0 0 60rpx #00a6ff) drop-shadow(0 0 100rpx #00a6ff); }
  }
  .func-label {
    font-size: 26rpx;
    color: #fff;
    z-index: 1;
  }
  
  /* ========== 加载遮罩 ========== */
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2,6,12,0.9);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .loading-core {
    width: 200rpx;
    height: 200rpx;
    border: 4rpx solid #00a6ff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading-core::after {
    content: '';
    width: 100rpx;
    height: 100rpx;
    border: 4rpx solid #ffaa00;
    border-radius: 50%;
    border-bottom-color: transparent;
    animation: spin 1.5s reverse infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }





  /* ========== 原有样式（完全不变） ========== */
/* ... 此处省略，切勿修改 ... */

/* ========== 联系管事胶囊（新增，适配机甲风格） ========== */
.inviter-capsule {
    margin: 30rpx 25rpx 30rpx;
    background: rgba(0, 20, 40, 0.85);
    backdrop-filter: blur(20px);
    border: 2rpx solid #00a6ff;
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 30rpx rgba(0, 166, 255, 0.4);
    position: relative;
    z-index: 1;
  }
  
  .capsule-body {
    display: flex;
    align-items: center;
    flex: 1;
  }
  
  .capsule-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 3rpx solid #00a6ff;
    box-shadow: 0 0 20rpx #00a6ff;
    margin-right: 20rpx;
    background: #0a1a2a;
  }
  
  .capsule-info {
    display: flex;
    flex-direction: column;
  }
  
  .capsule-name {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 15rpx #00a6ff;
    margin-bottom: 6rpx;
  }
  
  .capsule-uid {
    font-size: 24rpx;
    color: #9cf;
  }
  
  .capsule-contact {
    background: linear-gradient(135deg, #00a6ff, #0080ff);
    border-radius: 30rpx;
    padding: 12rpx 30rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 20rpx #00a6ff;
    letter-spacing: 2rpx;
    transition: all 0.3s;
  }
  
  .capsule-contact:active {
    transform: scale(0.95);
    box-shadow: 0 0 40rpx #00a6ff;
  }







  /* ========== 🆕 称号标签展示区 ========== */
.badge-area {
    width: 100%;
    margin: 20rpx 0 30rpx 0;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  
  .badge-scroll {
    width: 100%;
    max-height: 140rpx;
    overflow-y: auto;
    background: transparent;
  }
  
  .badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8rpx;
    padding: 6rpx 0;
    align-items: center;
    justify-content: flex-start;
  }
  
  .badge-item {
    flex-shrink: 0;
  }