/* ==================== 未来科技风主题 ==================== */
/* 一句话游戏 - Cyberpunk / Futuristic Theme */

/* 全局变量 */
:root {
  /* 主色调 - 赛博朋克霓虹青色 */
  --primary-color: #00f0ff;
  --primary-hover: #00d4e0;
  --primary-light: rgba(0, 240, 255, 0.15);
  --primary-glow: rgba(0, 240, 255, 0.5);
  
  /* 辅助霓虹色 */
  --neon-pink: #ff00ff;
  --neon-purple: #bf00ff;
  --neon-blue: #00f0ff;
  --neon-green: #00ff88;
  --accent-gradient: linear-gradient(135deg, #00f0ff 0%, #bf00ff 100%);
  
  --secondary-color: #6a7a9a;
  --success-color: #00ff88;
  --danger-color: #ff3366;
  --warning-color: #ffaa00;
  
  /* 深邃太空背景 */
  --bg-color: #080810;
  --bg-secondary: #0e0e18;
  --bg-card: #12121e;
  --bg-hover: #1a1a2a;
  --bg-elevated: #16162a;
  --bg-input: #0a0a12;
  --bg-tertiary: #14142a;
  
  /* 文字颜色 */
  --text-primary: #e0e8ff;
  --text-secondary: #8090b0;
  --text-muted: #5a6a8a;
  
  /* 边框 - 带发光效果 */
  --border-color: #252540;
  --border-glow: rgba(0, 240, 255, 0.3);
  --border-radius: 12px;
  --border-radius-sm: 8px;
  
  /* 阴影 - 霓虹发光 */
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-neon: 0 0 20px var(--primary-glow);
  --shadow-neon-pink: 0 0 20px rgba(255, 0, 255, 0.3);
  
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* 安全区域 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--bg-color);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  line-height: 1.6;
  overflow-x: hidden;
  /* 动态网格背景 */
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.02) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(0, 240, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(191, 0, 255, 0.06) 0%, transparent 40%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* 导入科技字体 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

/* 下拉刷新指示器 */
.pull-refresh-indicator {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  z-index: 50;
}

.pull-refresh-indicator.pulling {
  opacity: 1;
}

.pull-refresh-indicator.refreshing .pull-refresh-icon {
  animation: spin 0.8s linear infinite;
}

.pull-refresh-indicator.refreshing .pull-refresh-text::after {
  content: '刷新中...';
}

.pull-refresh-indicator.ready .pull-refresh-icon {
  transform: rotate(180deg);
}

.pull-refresh-indicator.ready .pull-refresh-text::after {
  content: '释放刷新';
}

.pull-refresh-icon {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#app {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* App 布局 */
.app-layout {
  min-height: 100vh;
}

/* 顶部标签栏 */
.top-tabs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.tabs-container {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0 0.5rem;
}

.tabs-container::-webkit-scrollbar {
  display: none;
}

.tab-item {
  flex: 0 0 auto;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap;
}

.tab-item:hover {
  color: var(--text-primary);
}

.tab-item.active {
  color: var(--primary-color);
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px;
}

/* 主内容区 */
.main-content {
  padding-bottom: 80px; /* 为底部导航留空间 */
}

/* 标签页面板 */
.tab-panel {
  display: none;
  padding: 1rem;
}

.tab-panel.active {
  display: block;
}

/* 游戏列表样式 */
.game-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.game-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s ease;
}

.game-list-item:hover {
  background: var(--bg-hover);
}

.game-list-item:active {
  background: var(--bg-hover);
}

.game-list-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.game-list-rank.rank-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}

.game-list-rank.rank-2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #000;
}

.game-list-rank.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: #fff;
}

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

.game-list-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}

.game-list-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.game-list-stats {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.game-list-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.game-list-stat.highlight {
  color: var(--primary-color);
  font-weight: 600;
}

/* 列表加载更多 */
.list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.list-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.list-empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 0;
  padding-bottom: var(--safe-area-bottom);
  z-index: 1000;
  min-height: 65px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 60px;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
  background: var(--bg-hover);
}

.nav-item.active {
  color: var(--primary-color);
}

.nav-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.nav-label {
  font-weight: 500;
  font-size: 0.75rem;
}

/* 中间创作按钮 */
.nav-create {
  position: relative;
  flex: 1.2;
}

.nav-icon-create {
  font-size: 1.5rem;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  border-radius: 50%;
  margin-top: -18px;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  transition: all 0.2s ease;
}

.nav-create:active .nav-icon-create {
  transform: scale(0.95);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.nav-create .nav-label {
  margin-top: 0.125rem;
}

/* ==================== 创作页面样式 ==================== */
#create-page,
#profile-page {
  padding-bottom: 80px;
  min-height: 100vh;
}

.page-header {
  padding: 1.5rem 1rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.page-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

/* 创作页面 */
.create-page-body {
  padding: 1.5rem 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.create-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.create-icon-large {
  font-size: 4rem;
  margin-bottom: 0.75rem;
}

.create-hero h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.create-hero p {
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.create-input-area {
  margin-bottom: 1.5rem;
}

.create-input-area textarea {
  width: 100%;
  padding: 1rem;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 1rem;
  resize: none;
  outline: none;
  transition: var(--transition);
}

.create-input-area textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* 高级设置切换按钮 */
.btn-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.75rem;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.btn-advanced-toggle:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(139, 92, 246, 0.05);
}

.btn-advanced-toggle .toggle-arrow {
  transition: transform 0.3s ease;
}

.btn-advanced-toggle.active .toggle-arrow {
  transform: rotate(180deg);
}

/* 高级设置面板 */
.advanced-settings-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.advanced-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .advanced-settings-grid {
    grid-template-columns: 1fr;
  }
}

.advanced-settings-panel .setting-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.advanced-settings-panel .setting-group label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.advanced-settings-panel .setting-group input,
.advanced-settings-panel .setting-group select {
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.advanced-settings-panel .setting-group input:focus,
.advanced-settings-panel .setting-group select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 下拉选项深色背景 */
.advanced-settings-panel .setting-group select option {
  background: #1a1a2e;
  color: var(--text-primary);
  padding: 0.5rem;
}

.advanced-settings-panel .setting-group select option:hover,
.advanced-settings-panel .setting-group select option:checked {
  background: var(--primary-color);
  color: #fff;
}

/* LLM设置区域 */
.advanced-llm-section {
  margin-top: 1rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.75rem;
}

.llm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.875rem;
  border-radius: 6px;
  transition: var(--transition);
}

.llm-section-header:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.llm-section-header .toggle-arrow {
  transition: transform 0.3s ease;
}

.llm-section-header.active .toggle-arrow {
  transform: rotate(90deg);
}

.advanced-llm-content {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-elevated);
  border-radius: 6px;
}

.advanced-llm-content .setting-group {
  margin-bottom: 0.75rem;
}

.advanced-llm-content .setting-group:last-child {
  margin-bottom: 0;
}

/* 全宽设置项 */
.setting-group.full-width {
  flex: 1 1 100%;
}

/* 可选提示 */
.optional-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: normal;
}

.btn-create-generate {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  margin-top: 1rem;
  border-radius: var(--border-radius);
}

.create-quick-section {
  margin-bottom: 1.5rem;
}

.quick-chips-large {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.chip-large {
  padding: 0.625rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 25px;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: var(--transition);
}

.chip-large:hover,
.chip-large:active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--primary-color);
}

.create-credits-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem;
  background: var(--primary-light);
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.create-credits-info strong {
  color: var(--primary-color);
  font-weight: 700;
}

.create-credits-info a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.credits-icon {
  font-size: 1.125rem;
}

/* 订阅通知区域样式 */
.create-subscribe-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(34, 197, 94, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--border-radius-sm);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.create-subscribe-info strong {
  color: #10b981;
  font-weight: 700;
}

.create-subscribe-info a {
  color: #10b981;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.75rem;
}

.subscribe-icon {
  font-size: 1rem;
}

.subscribe-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.subscribe-status.enabled {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.subscribe-status.disabled {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ==================== 我的页面样式 ==================== */
.profile-page-header {
  padding: 1.25rem 1rem;
  text-align: left;
  position: relative;
}

.profile-user-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 50px; /* 为设置按钮留出空间 */
}

.profile-avatar-large {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.profile-user-details h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  text-align: left;
}

/* 账号ID显示 - 参考抖音风格 */
.profile-account-id {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.profile-account-id:hover {
  color: var(--text-secondary);
}

.profile-account-id::after {
  content: '复制';
  font-size: 0.625rem;
  padding: 0.125rem 0.25rem;
  background: var(--bg-secondary);
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-account-id:hover::after {
  opacity: 1;
}

.profile-mini-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.profile-mini-stats strong {
  color: var(--text-primary);
}

/* 可点击的统计项 */
.profile-mini-stats .stat-clickable {
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  margin: -0.25rem -0.5rem;
}

.profile-mini-stats .stat-clickable:hover {
  color: var(--primary-color);
  background: var(--bg-secondary);
}

.profile-mini-stats .stat-clickable:active {
  transform: scale(0.95);
}

/* 关注/粉丝统计 */
.profile-follow-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.follow-stat-item {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s;
  padding: 0.25rem 0;
}

.follow-stat-item:hover {
  color: var(--primary-color);
}

.follow-stat-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.follow-stat-divider {
  color: var(--border-color);
  font-size: 0.75rem;
}

/* 关注/粉丝列表弹窗 */
.modal-medium .modal-content {
  max-width: 420px;
}

.follow-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.follow-tab {
  flex: 1;
  padding: 0.75rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.follow-tab:hover {
  color: var(--text-primary);
}

.follow-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.follow-tab span {
  font-weight: 700;
  margin-left: 0.25rem;
}

.follow-list {
  max-height: 400px;
  overflow-y: auto;
}

.follow-user-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
  gap: 0.75rem;
}

.follow-user-item:last-child {
  border-bottom: none;
}

.follow-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

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

.follow-user-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.follow-user-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.follow-user-action {
  flex-shrink: 0;
}

.btn-follow {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--primary-color);
  background: var(--primary-color);
  color: white;
}

.btn-follow:hover {
  background: var(--primary-hover);
}

.btn-follow.following {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

.btn-follow.following:hover {
  border-color: #ef4444;
  color: #ef4444;
}

/* 我的页面标签 - 竖向布局 */
.profile-sections-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 80px;
}

.profile-section-row {
  border-bottom: 1px solid var(--border-color);
  padding: 1rem;
}

.profile-section-header-v {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.profile-section-header-v .section-icon {
  font-size: 1.125rem;
}

.profile-section-header-v .section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.profile-section-header-v .section-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
}

/* 横向滚动区域 */
.profile-horizontal-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -1rem;
  padding: 0 1rem;
}

.profile-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.profile-horizontal-list {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行，确保只显示一行 */
  gap: 0.75rem;
  min-height: 140px;
  padding-bottom: 0.5rem;
}

.profile-horizontal-list .loading-games,
.profile-horizontal-list .empty-games {
  width: 100%;
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* 横向游戏卡片 - 精致版 */
.profile-game-card-h {
  position: relative; /* 为徽章定位 */
  flex: 1 1 0;  /* 自动平分可用空间 */
  min-width: 80px;
  max-width: 160px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-touch-callout: none; /* 禁用长按默认菜单 */
  -webkit-user-select: none;
  user-select: none;
}

.profile-game-card-h:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border-color: rgba(99, 102, 241, 0.3);
}

.profile-game-card-h:active {
  transform: scale(0.97);
}

.profile-game-card-h .card-cover {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e1e32 0%, #2a2a45 100%);
  font-size: 2.25rem;
}

.profile-game-card-h .card-title {
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* 卡片统计数据 */
.profile-game-card-h .card-stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.5rem 0.5rem;
  font-size: 0.625rem;
  color: var(--text-secondary);
}

.profile-game-card-h .card-stat {
  display: flex;
  align-items: center;
  gap: 2px;
}

.profile-game-card-h .card-stat .stat-icon {
  font-size: 0.625rem;
  opacity: 0.8;
}

/* 草稿卡片样式 */
.profile-game-card-h.draft-card {
  position: relative;
  opacity: 1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.4);
  animation: draft-pulse 2s ease-in-out infinite;
}

@keyframes draft-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.98); }
}

.profile-game-card-h.draft-card .card-cover {
  filter: none;
  animation: draft-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes draft-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.draft-badge {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-size: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.5rem;
  z-index: 1;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.draft-spinner {
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 草稿状态显示 */
.card-draft-status {
  font-size: 0.55rem;
  color: #8b5cf6;
  text-align: center;
  padding-top: 0.125rem;
}

.draft-dots .dots::after {
  content: '';
  animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}

/* 卡片上的订阅按钮 */
.card-subscribe-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.card-subscribe-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(255, 193, 7, 0.5);
}

.profile-game-card-h.draft-card {
  position: relative;
}

/* 草稿进度弹窗 */
.draft-progress-loader {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 危险按钮变体 */
.btn-danger-outline {
  background: transparent;
  color: #ef4444;
  border: 1px solid #ef4444;
  transition: all 0.2s ease;
}

.btn-danger-outline:hover {
  background: #ef4444;
  color: white;
}

/* 移动端一行显示3个 */
@media (max-width: 480px) {
  .profile-game-card-h {
    width: calc((100% - 1.5rem) / 3);
    min-width: 80px;
  }
}

/* 标题行内更多按钮 */
.btn-more-header {
  background: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  cursor: pointer;
  margin-left: auto;
  margin-right: 0.5rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-more-header:hover {
  background: var(--primary-color);
  color: white;
}

/* 可点击的折叠标题 */
.profile-section-clickable {
  cursor: pointer;
  user-select: none;
}

.profile-section-clickable:hover {
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
}

.section-arrow {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.section-arrow.expanded {
  transform: rotate(90deg);
}

/* 更多按钮 */
.btn-more-inline {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
  cursor: pointer;
  margin-top: 0.5rem;
}

.btn-more-inline:hover {
  text-decoration: underline;
}

/* 创作页面Tips横幅 */
.create-tips-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.tips-icon {
  font-size: 1.25rem;
}

.tips-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: opacity 0.3s ease;
}

/* 页面头部模型标签 */
.header-model-tag {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary-color);
  padding: 0.25rem 0.625rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 可点击的模型标签按钮 */
.header-model-btn {
  border: 1px solid rgba(99, 102, 241, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  -webkit-tap-highlight-color: transparent;
}

.header-model-btn:hover,
.header-model-btn:active {
  background: rgba(99, 102, 241, 0.25);
  border-color: var(--primary-color);
}

.header-model-btn .model-arrow {
  font-size: 0.625rem;
  opacity: 0.7;
  margin-left: 0.125rem;
}

/* 游戏详情页模型标签 */
.game-model-tag {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-color);
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  margin-top: 0.25rem;
}


/* 游戏详情页作者行 */
.game-author-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.author-follow-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.author-follow-btn:hover {
  background: var(--primary-hover);
  transform: scale(1.05);
}

.author-follow-btn.following {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.author-follow-btn.following:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}

/* 完整游戏列表弹窗 */
.full-game-list-content {
  max-width: 600px;
  width: 95%;
  max-height: 85vh;
}

.full-game-list-content .modal-body {
  padding: 1rem;
  overflow-y: auto;
  max-height: calc(85vh - 60px);
}

.full-game-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 480px) {
  .full-game-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 我的页面右上角设置按钮 - 使用绝对定位在我的页面内 */
.profile-settings-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(30, 30, 50, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--text-secondary);
  display: none; /* 默认隐藏，通过JS控制显示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.profile-settings-btn.visible {
  display: flex;
}

.profile-settings-btn:hover,
.profile-settings-btn:active {
  background: rgba(99, 102, 241, 0.3);
  border-color: var(--primary-color);
  color: var(--primary-light);
  transform: rotate(90deg);
}

.profile-settings-btn svg {
  width: 20px;
  height: 20px;
}

/* 我的页面头部需要relative以支持绝对定位按钮 */
.profile-page-header {
  position: relative;
}

/* 旧版标签页样式保留用于兼容 */
.profile-page-tabs {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.profile-page-tabs::-webkit-scrollbar {
  display: none;
}

.profile-page-tab {
  flex: 1;
  min-width: max-content;
  padding: 0.875rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.profile-page-tab:hover {
  color: var(--text-primary);
}

.profile-page-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* 我的页面内容 */
.profile-page-content {
  min-height: 300px;
}

.profile-page-panel {
  display: none;
  padding: 1rem;
}

.profile-page-panel.active {
  display: block;
}

.profile-list-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border-color);
}

/* 抖音风格竖向卡片 */
.tiktok-card {
  position: relative;
  aspect-ratio: 9 / 12;
  background: var(--bg-secondary);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tiktok-card:active {
  transform: scale(0.98);
}

.tiktok-card-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  font-size: 3rem;
}

.tiktok-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
}

.tiktok-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.tiktok-card-stats {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.85);
}

.tiktok-card-stats span {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* 空状态适配网格 */
.profile-list-container .empty-games {
  grid-column: 1 / -1;
  background: var(--bg-color);
}

/* 响应式：小屏幕变为2列 */
@media (max-width: 480px) {
  .profile-list-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .tiktok-card-title {
    font-size: 0.75rem;
  }
  
  .tiktok-card-cover {
    font-size: 2.5rem;
  }
}

/* 设置页面卡片 */
.settings-page-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.settings-page-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.25rem;
}

.settings-page-card h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.account-info-display {
  margin-bottom: 1rem;
}

.account-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

.account-label {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  min-width: 70px;
}

.account-value {
  font-size: 0.9375rem;
  color: var(--text-primary);
}

#settings-account-id {
  font-family: 'SF Mono', monospace;
  background: var(--primary-light);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  color: var(--primary-color);
  font-weight: 600;
}

.btn-copy-id {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-copy-id:hover {
  opacity: 1;
}

.status-tag {
  display: inline-block;
  padding: 0.1875rem 0.625rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-tag.guest {
  background: var(--bg-hover);
  color: var(--text-muted);
}

.status-tag.protected {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.btn-full {
  width: 100%;
  margin-top: 0.5rem;
}

/* 创作面板 */
.create-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.create-panel-overlay.show {
  opacity: 1;
  visibility: visible;
}

.create-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-radius: 20px 20px 0 0;
  z-index: 1002;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 80vh;
  overflow-y: auto;
}

.create-panel.show {
  transform: translateY(0);
}

.create-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.create-panel-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
}

.btn-close-panel {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border: none;
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
}

.create-panel-body {
  padding: 1.25rem;
}

.create-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.create-input-wrapper textarea {
  width: 100%;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  resize: none;
  outline: none;
}

.create-input-wrapper textarea:focus {
  border-color: var(--primary-color);
}

.btn-generate-large {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
}

.quick-prompts-panel {
  margin-top: 1.25rem;
}

.quick-label {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* 隐藏老式导航栏 */
.navbar {
  display: none;
}

/* 调整 home-page 样式 */
#home-page {
  display: none;
}

#home-page.page.active {
  display: block;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.logo {
  font-size: 1.5rem;
}

.brand-text {
  font-size: 1.125rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color), #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-actions {
  display: flex;
  gap: 0.5rem;
}

/* 按钮样式 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active {
  transform: scale(0.96);
}

/* 按钮内子元素不阻挡点击 */
.btn > * {
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  color: white;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--border-color);
}

.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border-radius: 50%;
}

.btn-icon:hover, .btn-icon:active {
  background: var(--border-color);
  color: var(--text-primary);
}

.btn-back {
  background: transparent;
  color: var(--text-primary);
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

.btn-close {
  font-size: 1.5rem;
  width: 36px;
  height: 36px;
  background: transparent;
}

.btn-action {
  background: var(--bg-hover);
  color: var(--text-primary);
  padding: 0.5rem 0.875rem;
  border-radius: 20px;
  font-size: 0.875rem;
}

.btn-cancel {
  margin-top: 1.5rem;
}

/* 页面容器 */
.page {
  display: none;
}

.page.active {
  display: block;
}

#game-page.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 2000;
  background: var(--bg-color);
}

/* Hero区域 */
.hero {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
  padding: 2rem 1rem 2.5rem;
  text-align: center;
}

.hero-content {
  max-width: 600px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 1.625rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
}

/* 生成表单 */
.generate-form {
  max-width: 500px;
  margin: 0 auto;
}

.input-wrapper {
  display: flex;
  gap: 0.5rem;
  background: var(--bg-card);
  padding: 0.375rem;
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  transition: var(--transition);
}

.input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-light);
}

.input-wrapper input,
.input-wrapper textarea {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
}

.input-wrapper textarea {
  resize: none;
  line-height: 1.5;
  min-height: 60px;
  max-height: 120px;
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
  color: var(--text-muted);
}

.btn-generate {
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  white-space: nowrap;
  border-radius: 12px;
}

.btn-generate .btn-loading {
  display: none;
}

.btn-generate.loading .btn-text {
  display: none;
}

.btn-generate.loading .btn-loading {
  display: flex;
  align-items: center;
}

.spinner {
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 快速提示 */
.quick-prompts {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.chip {
  padding: 0.5rem 0.875rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.chip:hover, .chip:active {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--primary-color);
}

/* 游戏列表区域 */
.games-section {
  padding: 1.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.games-block {
  margin-bottom: 2rem;
}

/* 排行榜滑动容器 */
.leaderboards-swiper {
  margin-bottom: 2rem;
  background: var(--bg-card);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* 榜单标签导航 */
.leaderboard-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.leaderboard-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.leaderboard-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.leaderboard-tab.active {
  color: var(--primary-color);
  background: rgba(139, 92, 246, 0.1);
}

.leaderboard-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px 3px 0 0;
}

/* 榜单滑动容器 */
.leaderboard-swiper-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.leaderboard-swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.leaderboard-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  min-height: 300px;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 加载更多指示器 */
.leaderboard-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.loading-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.leaderboard-list::-webkit-scrollbar {
  width: 4px;
}

.leaderboard-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: var(--transition);
}

.leaderboard-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.leaderboard-rank {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: bold;
  flex-shrink: 0;
}

.leaderboard-rank.rank-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
}

.leaderboard-rank.rank-2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #000;
}

.leaderboard-rank.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: #fff;
}

.leaderboard-rank.rank-other {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

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

.leaderboard-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.125rem;
}

.leaderboard-stats {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.leaderboard-stat {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.leaderboard-stat.highlight {
  color: var(--primary-color);
  font-weight: 600;
}

.leaderboard-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.section-header h2 {
  font-size: 1.125rem;
  font-weight: 700;
}

.view-more-link {
  color: #a78bfa;
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s;
}

.view-more-link:hover {
  color: #c4b5fd;
  text-decoration: underline;
}

/* 游戏网格 - 紧凑横向布局 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1280px) {
  .games-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 游戏卡片 - 紧凑横向布局（与主页一致） */
.game-card {
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.game-card:active {
  transform: scale(0.98);
}

.game-card:hover {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

/* 游戏卡片图标（左侧） */
.game-card-preview {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-secondary) 100%);
  border-radius: 8px;
  flex-shrink: 0;
}

/* 游戏卡片内容（右侧） */
.game-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: hidden;
  padding: 0;
}

.game-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin: 0;
}

.game-card-prompt {
  display: none; /* 隐藏prompt，让卡片更简洁 */
}

.game-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.game-card-author {
  font-size: 0.6875rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-card-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--text-muted);
  flex-wrap: nowrap;
}

.game-card-stats span {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
  color: var(--text-muted);
}

.game-card-stats span:first-child {
  color: var(--text-muted);
}

.load-more {
  text-align: center;
  margin-top: 1.5rem;
}

/* 空状态 */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

/* 页脚 */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  padding-bottom: calc(2rem + var(--safe-area-bottom));
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* 游戏页面 */
.game-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  overflow: hidden;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  padding-top: calc(0.625rem + var(--safe-area-top));
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  gap: 0.5rem;
  position: relative;
  z-index: 10;
}

/* 确保返回按钮始终可点击 */
.game-header .btn-back {
  position: relative;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
}

.game-info {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.game-info h2 {
  font-size: 1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-author {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.game-header-actions {
  display: flex;
  gap: 0.375rem;
}

.game-header-actions .btn-action {
  padding: 0.5rem 0.625rem;
  font-size: 1rem;
}

.game-frame-container {
  flex: 1;
  position: relative;
  background: #1a1a2e;
  min-height: 500px;
  height: calc(100vh - 80px);
  overflow: auto;
}

/* 草稿操作按钮覆盖层 */
.draft-actions-overlay {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.draft-actions-buttons {
  display: flex;
  gap: 15px;
  pointer-events: auto;
}

.draft-actions-buttons .btn {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 25px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.draft-actions-buttons .btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
}

.draft-actions-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.draft-actions-buttons .btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
}

.draft-actions-buttons .btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

#game-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #1a1a2e;
  display: block;
  z-index: 1;
}

/* 游戏加载状态 */
.game-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  z-index: 10;
}

.game-loading.active {
  display: flex;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.game-loading p {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.game-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-color);
  z-index: 10;
  gap: 1rem;
}

.game-error p {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

/* 调试面板 */
.debug-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  max-height: 200px;
  z-index: 50;
}

.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--bg-hover);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.debug-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
}

.debug-content {
  padding: 0.5rem 1rem;
  font-family: monospace;
  font-size: 0.6875rem;
  color: var(--success-color);
  max-height: 160px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 生成遮罩 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.overlay.active {
  display: flex;
}

/* 防止背景滚动 */
body.overlay-open,
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.overlay-content {
  text-align: center;
  color: var(--text-primary);
  width: 100%;
  max-width: 320px;
  touch-action: pan-y;
  position: relative;
}

/* 右上角操作按钮 */
.generating-header-actions {
  position: absolute;
  top: -10px;
  right: 0;
  display: flex;
  gap: 0.5rem;
}

.gen-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.gen-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.gen-action-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.overlay-content h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.generating-tip {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

/* 生成动画 */
.generating-animation {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 0.75rem;
}

.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

.emoji-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* 生成日志 */
.generating-log {
  background: var(--bg-secondary);
  border-radius: var(--border-radius-sm);
  padding: 0.5rem 0.75rem;
  text-align: left;
  max-height: 80px;
  overflow-y: auto;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
}

.log-item {
  color: var(--text-secondary);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.log-item:last-child {
  border-bottom: none;
}

.log-item.success {
  color: var(--success-color);
}

.log-item.error {
  color: var(--danger-color);
}

/* 弹窗 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 3000;
  overscroll-behavior: contain;
}

.modal.active {
  display: flex;
}

/* 防止弹窗打开时背景滚动 */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 弹窗打开时禁用主内容区域的点击 */
body.modal-open #app > *:not(.modal):not(.search-panel):not(.settings-fullpage) {
  pointer-events: none;
}

body.modal-open .modal,
body.modal-open .search-panel,
body.modal-open .settings-fullpage {
  pointer-events: auto;
}

/* 弹窗内容允许触摸滚动 */
body.modal-open .modal-content {
  touch-action: pan-y;
}

.modal-content {
  background: var(--bg-secondary);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: slideUp 0.3s ease;
  display: flex;
  flex-direction: column;
}

.modal-small {
  max-width: 400px;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (min-width: 640px) {
  .modal {
    align-items: center;
    padding: 1rem;
  }
  
  .modal-content {
    border-radius: var(--border-radius);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
}

.modal-header h2,
.modal-header h3 {
  font-size: 1.0625rem;
  font-weight: 600;
}

/* 模态框关闭按钮 */
.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.modal-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.modal-close:active {
  transform: scale(0.95);
}

.modal-body {
  padding: 1.25rem;
  padding-bottom: calc(1.25rem + var(--safe-area-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  padding-bottom: calc(1rem + var(--safe-area-bottom));
  border-top: 1px solid var(--border-color);
}

.modal-footer .btn {
  flex: 1;
}

/* 表单组 */
.form-group {
  margin-bottom: 1rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.input-with-toggle {
  position: relative;
}

.input-with-toggle input {
  padding-right: 3rem;
}

.btn-toggle-pwd {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.125rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* 开关样式 */
.form-switch label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.form-switch input {
  width: 44px;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}

.form-switch input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: var(--transition);
}

.form-switch input:checked {
  background: var(--primary-color);
}

.form-switch input:checked::before {
  transform: translateX(20px);
}

.form-switch span {
  font-size: 0.875rem;
  color: var(--text-primary);
}

/* 设置区块 */
.settings-section {
  margin-bottom: 1.5rem;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 账号管理区域 */
.account-id-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.account-id-label {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.account-id-value {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  color: var(--primary-color);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.account-actions-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.account-actions-row .btn {
  flex: 1;
  min-width: 120px;
}

/* 保存弹窗 - 大弹窗布局 */
.modal-large .modal-content,
.modal-content.modal-large {
  max-width: 900px;
  width: 95%;
}

.save-modal-body {
  display: flex;
  gap: 1.5rem;
  padding: 0 !important;
}

/* 左侧预览区 */
.preview-play-area {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 400px;
}

.preview-play-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-color);
}

.preview-badge {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color);
}

.preview-game-frame {
  flex: 1;
  position: relative;
  background: #000;
  min-height: 350px;
}

.preview-game-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

.preview-play-tip {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-hover);
}

/* 右侧保存表单 */
.save-form-area {
  flex: 0.8;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.save-form-area .form-group {
  margin-bottom: 1rem;
}

.save-form-area .form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

/* 保存提示 */
.save-tips {
  background: var(--primary-light);
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius-sm);
  margin-top: auto;
  margin-bottom: 1rem;
}

.save-tips p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.save-tips p:last-child {
  margin-bottom: 0;
}

/* 保存表单按钮 */
.save-form-actions {
  display: flex;
  gap: 0.75rem;
}

.save-form-actions .btn {
  flex: 1;
}

.btn-save-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* 移动端适配保存弹窗 */
@media (max-width: 768px) {
  .save-modal-body {
    flex-direction: column;
  }
  
  .preview-play-area {
    min-height: 280px;
  }
  
  .preview-game-frame {
    min-height: 250px;
  }
  
  .save-form-area {
    padding: 1rem;
  }
}

/* 全屏预览模式 */
.preview-play-area.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  border-radius: 0;
  min-height: 100vh;
}

.preview-play-area.fullscreen .preview-play-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
}

.preview-play-area.fullscreen .preview-game-frame {
  min-height: 100vh;
}

.preview-play-area.fullscreen .preview-play-tip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 复制字段 */
.copy-field {
  display: flex;
  gap: 0.5rem;
}

.copy-field input {
  flex: 1;
  min-width: 0;
}

.copy-field .btn {
  flex-shrink: 0;
}

/* 分享提示 */
.share-tips {
  text-align: center;
  padding-top: 0.75rem;
}

.share-tips p {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Toast提示 */
.toast {
  position: fixed;
  top: calc(60px + var(--safe-area-top) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0.75rem 1.25rem;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  z-index: 10100;
  opacity: 0;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  max-width: calc(100% - 2rem);
  text-align: center;
  pointer-events: none;
}

.toast.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.success {
  border-color: var(--success-color);
  background: rgba(34, 197, 94, 0.15);
}

.toast.error {
  border-color: var(--danger-color);
  background: rgba(239, 68, 68, 0.15);
}

/* 可点击跳转的成功提示 */
.success-action-toast {
  position: fixed;
  top: calc(60px + var(--safe-area-top) + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10200;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  max-width: calc(100% - 2rem);
  width: auto;
}

.success-action-toast.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.success-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.15) 0%, rgba(0, 240, 255, 0.1) 100%);
  border: 1px solid var(--success-color);
  border-radius: var(--border-radius);
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2), 0 0 30px rgba(0, 255, 136, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.success-toast-content:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 240, 255, 0.15) 100%);
  box-shadow: 0 6px 25px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.15);
  transform: scale(1.02);
}

.success-toast-content:active {
  transform: scale(0.98);
}

.success-toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  animation: bounce-gentle 1s ease-in-out infinite;
}

@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.success-toast-text {
  flex: 1;
  min-width: 0;
}

.success-toast-message {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.success-toast-action {
  font-size: 0.8125rem;
  color: var(--success-color);
  margin-top: 2px;
}

.success-toast-close {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.success-toast-close:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

/* PC端优化 */
@media (min-width: 768px) {
  .hero {
    padding: 3rem 2rem;
  }
  
  .hero h1 {
    font-size: 2.25rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
  
  .games-section {
    padding: 2rem;
  }
  
  .section-header h2 {
    font-size: 1.25rem;
  }
  
  /* 游戏卡片保持紧凑横向布局，图标尺寸稍大 */
  .game-card-preview {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 1.75rem;
  }
  
  .game-header {
    padding: 0.875rem 1.5rem;
    padding-top: calc(0.875rem + var(--safe-area-top));
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* 禁止选择 */
.game-card,
.chip,
.btn,
.nav-brand {
  user-select: none;
  -webkit-user-select: none;
}

/* 我的游戏按钮 */
.btn-my-games {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.btn-my-games:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

/* 积分按钮 */
.btn-credits {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-credits:hover {
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* 积分显示 */
.credits-display {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(135deg, var(--primary-light), rgba(139, 92, 246, 0.15));
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
}

.credits-number {
  font-size: 3.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.credits-label {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* 获取积分方式 */
.credits-ways {
  margin-bottom: 1.5rem;
}

.credits-ways h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.875rem;
}

.credit-way {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.625rem;
  cursor: pointer;
  transition: var(--transition);
}

.credit-way:hover {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.credit-way:last-child {
  margin-bottom: 0;
}

/* 已完成的积分方式 - 灰色禁用状态 */
.credit-way.completed {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-hover);
  border-color: var(--border-color);
}

.credit-way.completed:hover {
  border-color: var(--border-color);
  background: var(--bg-hover);
  transform: none;
}

.credit-way.completed .credit-way-icon {
  filter: grayscale(0.5);
}

.credit-way.completed .credit-way-reward {
  color: var(--text-muted);
  text-decoration: line-through;
}

.credit-way.completed::after {
  content: "✓ 已完成";
  font-size: 0.7rem;
  color: var(--success-color);
  background: rgba(16, 185, 129, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.credit-way-icon {
  font-size: 1.75rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border-radius: 12px;
  flex-shrink: 0;
}

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

.credit-way-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
}

.credit-way-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.credit-way-reward {
  font-size: 1rem;
  font-weight: 700;
  color: var(--success-color);
  flex-shrink: 0;
}

.credit-way-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.credit-way-progress {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.credit-way.completed .credit-way-progress {
  color: var(--text-muted);
}

/* 微信验证 */
.wechat-verify {
  background: var(--bg-color);
  border-radius: var(--border-radius-sm);
  padding: 1.25rem;
  text-align: center;
  border: 2px solid var(--primary-color);
  margin-top: 0;
  animation: expandIn 0.3s ease;
}

.wechat-verify.credit-way-expand {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

/* 文章验证码区域 */
.article-code-section {
  background: var(--bg-color);
  border-radius: var(--border-radius-sm);
  padding: 1rem;
  border: 1px solid var(--border-color);
  margin-top: 0;
}

.article-code-section.credit-way-expand {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid var(--primary-color);
  border-top: none;
}

.article-code-section h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  font-size: 0.9375rem;
}

@keyframes expandIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 高亮动画 */
.highlight-animation {
  animation: highlightPulse 1.5s ease;
}

@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.3); }
}

.wechat-verify p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.wechat-verify strong {
  color: var(--primary-color);
}

.verify-input {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.verify-input input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
}

.verify-input input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.credit-way.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.credit-way.disabled:hover {
  border-color: var(--border-color);
  background: var(--bg-color);
}

/* 游客模式横幅 */
.trial-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--success-color);
}

.trial-banner .trial-icon {
  font-size: 1rem;
}

.trial-banner strong {
  color: #22c55e;
  font-weight: 700;
}

/* 本周挑战 */
.weekly-challenge {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--border-radius);
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  transition: var(--transition);
}

.weekly-challenge:hover {
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-2px);
}

.challenge-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.challenge-theme {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
}

.challenge-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.5;
}

/* 排行榜样式 */
.leaderboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.leaderboard-tab {
  flex: 1;
  padding: 0.625rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--transition);
}

.leaderboard-tab.active {
  background: var(--primary-light);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.5rem;
}

.leaderboard-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.leaderboard-rank.top-1 { background: #ffd700; color: #000; }
.leaderboard-rank.top-2 { background: #c0c0c0; color: #000; }
.leaderboard-rank.top-3 { background: #cd7f32; color: #fff; }

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

.leaderboard-title {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.leaderboard-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* 积分获取方式包装器 */
.credit-way-wrapper {
  position: relative;
}

/* 展开区域通用样式 */
.credit-way-expand {
  margin-top: 0;
  margin-bottom: 0.75rem;
  animation: expandIn 0.3s ease;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.credit-way-wrapper .credit-way {
  transition: border-radius 0.2s ease;
}

.credit-way-wrapper .credit-way.expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* 邀请链接区域 */
.invite-section {
  margin-top: 0;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: var(--border-radius);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.invite-section.credit-way-expand {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* 积分弹窗中的入口样式 */
.credits-modal-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border-color);
}

.credits-modal-entry:last-child {
  border-bottom: none;
}

.credits-modal-entry:hover {
  background: rgba(99, 102, 241, 0.05);
}

.credits-modal-entry.completed {
  opacity: 0.6;
  cursor: default;
}

.credits-modal-entry.completed:hover {
  background: transparent;
}

.invite-section h4 {
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  font-size: 0.9375rem;
}

.invite-link-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.invite-link-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: monospace;
}

.invite-share-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.invite-share-buttons .btn-small {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* 兼容旧版邀请码样式 */
.invite-code-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-color);
  padding: 0.875rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 1px dashed var(--primary-color);
}

.invite-code-display code {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: monospace;
  color: var(--primary-color);
  letter-spacing: 0.1em;
}

.invite-input-group {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.invite-input-group input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* 分享海报 */
.share-poster {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
}

.share-poster-game {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.share-poster-author {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.share-poster-qr {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 8px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-poster-tip {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* 搜索框 */
.search-box {
  position: relative;
  margin-bottom: 1rem;
}

.search-box input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-primary);
  font-size: 1rem;
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.search-box-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

/* 标签页 */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.tab {
  padding: 0.75rem 1.25rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
}

.tab:hover {
  color: var(--text-primary);
}

.tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 1rem;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* 空状态增强 */
.empty-state-action {
  margin-top: 1rem;
}

/* ==================== 社交统计系统 ==================== */

/* 游戏统计条 */
.game-stats-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--bg-secondary), transparent);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}

.game-stats-bar .stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: var(--transition);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

.game-stats-bar .stat-item:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
}

/* 可点击的统计项 */
.game-stats-bar .stat-item.stat-clickable {
  cursor: pointer;
  user-select: none;
}

/* 统计项内子元素不阻挡点击 */
.game-stats-bar .stat-item > * {
  pointer-events: none;
}

.game-stats-bar .stat-item.stat-clickable:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.game-stats-bar .stat-item.stat-clickable:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 点赞按钮已点赞状态 */
.game-stats-bar #stat-like-btn.liked {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

.game-stats-bar #stat-like-btn.liked:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}

.game-stats-bar .stat-icon {
  font-size: 0.875rem;
  pointer-events: none;
}

.game-stats-bar .stat-value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  pointer-events: none;
}

.game-stats-bar .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0;
  pointer-events: none;
}

.game-stats-bar .stat-hot {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.1));
  border-color: rgba(245, 158, 11, 0.3);
}

.game-stats-bar .stat-hot .stat-value {
  color: #f59e0b;
}

/* ==================== TikTok风格左下角作者信息 ==================== */

.tiktok-author-info {
  position: absolute;
  left: 16px;
  bottom: 80px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: auto;
  /* 无背景色，抖音风格 */
  padding: 0;
}

.tiktok-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tiktok-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tiktok-author-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.tiktok-author-details {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.tiktok-author-name {
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: opacity 0.2s;
}

.tiktok-publish-time {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  margin-left: 54px; /* 与作者名字对齐 */
}

.tiktok-author-name:hover {
  opacity: 0.8;
}

.tiktok-follow-btn {
  background: #fe2c55;
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  text-shadow: none;
}

.tiktok-follow-btn:hover {
  background: #e6284d;
  transform: scale(1.02);
}

.tiktok-follow-btn:active {
  transform: scale(0.95);
}

.tiktok-follow-btn .follow-icon {
  font-size: 0.875rem;
  font-weight: bold;
}

.tiktok-follow-btn.following {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.tiktok-follow-btn.following:hover {
  background: rgba(254, 44, 85, 0.3);
  border-color: #fe2c55;
}

/* 如果是自己的游戏，隐藏关注按钮 */
.tiktok-author-info.is-self .tiktok-follow-btn {
  display: none;
}

/* ==================== TikTok风格右侧互动栏 ==================== */

.tiktok-sidebar {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 100;
  pointer-events: auto;
}

.tiktok-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tiktok-action:active {
  transform: scale(0.9);
}

.tiktok-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: all 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tiktok-action:hover .tiktok-icon {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

.tiktok-count {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* 点赞按钮状态 */
#stat-like-btn.liked .tiktok-icon {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
  animation: likePopTiktok 0.3s ease;
}

@keyframes likePopTiktok {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* 收藏按钮状态 */
#stat-fav-btn.favorited .tiktok-icon {
  background: rgba(251, 191, 36, 0.8);
  border-color: #fbbf24;
}

/* 编辑按钮（仅作者可见） */
#stat-edit-btn {
  display: none !important;
}
#stat-edit-btn.visible {
  display: flex !important;
}

/* 修复按钮（仅作者可见） */
#stat-repair-btn {
  display: none !important;
}
#stat-repair-btn.visible {
  display: flex !important;
}
#stat-repair-btn .tiktok-icon {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.5);
}
#stat-repair-btn:hover .tiktok-icon {
  background: rgba(16, 185, 129, 0.5);
  border-color: rgba(16, 185, 129, 0.8);
}
/* 修复中旋转动画 */
#stat-repair-btn.repairing .tiktok-icon {
  animation: repairSpin 1s linear infinite;
  background: rgba(16, 185, 129, 0.5);
}
@keyframes repairSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 信息类按钮（不可点击感） */
.tiktok-action.tiktok-info {
  cursor: default;
  opacity: 0.8;
}

.tiktok-action.tiktok-info:active {
  transform: none;
}

.tiktok-action.tiktok-info .tiktok-icon {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 移动端适配 */
@media (max-width: 640px) {
  .tiktok-sidebar {
    right: 8px;
    gap: 12px;
  }
  
  .tiktok-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  
  .tiktok-count {
    font-size: 11px;
  }
  
  /* 移动端隐藏游戏页面顶部的模型标签 */
  .game-model-tag {
    display: none !important;
  }
  
  /* 移动端作者信息调整 */
  .tiktok-author-info {
    left: 12px;
    bottom: 70px;
  }
  
  .tiktok-author-avatar {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .tiktok-author-name {
    font-size: 0.9375rem;
  }
  
  .tiktok-follow-btn {
    padding: 5px 14px;
    font-size: 0.75rem;
  }
}

/* 点赞按钮状态 */
.btn-like {
  transition: all 0.3s ease;
}

.btn-like.liked {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(244, 63, 94, 0.15));
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.btn-like .like-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}

.btn-like.liked .like-icon {
  animation: likeHeart 0.5s ease;
}

@keyframes likeHeart {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 收藏按钮状态 */
.btn-favorite {
  transition: all 0.3s ease;
}

.btn-favorite.favorited {
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(245, 158, 11, 0.15));
  border: 1px solid rgba(250, 204, 21, 0.4);
}

.btn-favorite .favorite-icon {
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 1.1em;
}

.btn-favorite.favorited .favorite-icon {
  animation: favoriteStar 0.5s ease;
}

@keyframes favoriteStar {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.3) rotate(-15deg); }
  50% { transform: scale(0.9) rotate(10deg); }
  75% { transform: scale(1.1) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 分享面板 */
/* 分享弹窗美化 */
.share-modal-body {
  padding: 1.5rem;
}

.share-stats-preview {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.share-game-emoji {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.share-game-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.share-mini-stats {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.share-mini-stats strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* 分享链接区域 */
.share-link-section {
  margin-bottom: 1.25rem;
}

.share-link-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.share-link-box {
  display: flex;
  gap: 0.5rem;
}

.share-link-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  min-width: 0;
}

.share-copy-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 分享文案预览区域 */
.share-content-preview {
  margin-bottom: 0.75rem;
}

.share-text-area {
  width: 100%;
  min-height: 80px;
  padding: 0.75rem 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.5;
  resize: none;
  font-family: inherit;
}

.share-copy-btn-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.share-tips {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.share-tips p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0.25rem 0;
}

/* 分享渠道按钮 */
.share-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.share-channel-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 0.5rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.share-channel-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.share-channel-btn:active {
  transform: translateY(0) scale(0.96);
}

.share-channel-btn .channel-icon {
  font-size: 1.5rem;
}

.share-channel-btn .channel-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* 主要分享按钮样式 */
.share-channel-btn.share-channel-primary {
  flex-direction: row;
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  border: none;
  gap: 0.75rem;
}

.share-channel-btn.share-channel-primary .channel-icon {
  font-size: 1.25rem;
}

.share-channel-btn.share-channel-primary .channel-name {
  font-size: 1rem;
  color: white;
  font-weight: 500;
}

.share-channel-btn.share-channel-primary:hover {
  background: linear-gradient(135deg, var(--primary-hover), #7c3aed);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

/* 分享奖励提示 */
.share-reward-hint {
  color: var(--success-color) !important;
  font-weight: 500;
  margin-top: 0.5rem !important;
}

/* 游戏卡片增强 - 显示统计 */
.game-card-stats {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 0 0 calc(var(--border-radius) - 2px) calc(var(--border-radius) - 2px);
}

.game-card-stats .stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.game-card-stats .stat-icon {
  font-size: 0.6875rem;
}

/* 热门徽章 */
.hot-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  animation: hotPulse 2s ease-in-out infinite;
}

@keyframes hotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* 数字滚动动画 */
.stat-value.animating {
  animation: statPop 0.4s ease;
}

@keyframes statPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); color: var(--success-color); }
  100% { transform: scale(1); }
}

/* 分享成功动画 */
.share-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.share-success-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.share-success-content {
  text-align: center;
  animation: successBounce 0.5s ease;
}

@keyframes successBounce {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.share-success-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.share-success-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* 移动端适配 */
@media (max-width: 480px) {
  .game-stats-bar {
    padding: 0.5rem;
    gap: 0.375rem;
  }
  
  .game-stats-bar .stat-item {
    padding: 0.375rem 0.625rem;
  }
  
  .game-stats-bar .stat-value {
    font-size: 0.8125rem;
  }
  
  .game-stats-bar .stat-label {
    display: none;
  }
  
  .share-channels {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
  
  .share-channel-btn {
    padding: 0.75rem 0.25rem;
  }
  
  .share-channel-btn .channel-icon {
    font-size: 1.25rem;
  }
}

/* 生成动画增强 */
.pulse-ring {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.generating-animation {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.emoji-center {
  font-size: 3rem;
  animation: emojiFloat 2s ease-in-out infinite;
}

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==================== 公众号推广系统 ==================== */

/* 首页公众号推广区域 */
.wechat-promo-section {
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.wechat-promo-card {
  display: flex;
  gap: 2rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  align-items: center;
}

/* 横向 Banner 样式（使用搜一搜引导图） */
.wechat-promo-banner {
  flex-direction: column;
  padding: 1.5rem;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(7, 193, 96, 0.08), rgba(99, 102, 241, 0.08));
  border-color: rgba(7, 193, 96, 0.2);
}

.wechat-banner-img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.promo-benefits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.benefit-item {
  font-size: 0.875rem;
  color: var(--text-secondary);
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.benefit-item strong {
  color: var(--primary);
}

.promo-qrcode {
  flex-shrink: 0;
}

.qrcode-placeholder {
  width: 140px;
  height: 140px;
  background: white;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px dashed var(--border-color);
}

.qrcode-placeholder .qrcode-text {
  font-size: 3rem;
}

.qrcode-placeholder p {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* 放置实际二维码图片时使用 */
.qrcode-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.promo-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.promo-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.promo-benefits li {
  padding: 0.375rem 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
}

.promo-benefits li strong {
  color: var(--primary-color);
}

.promo-action {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.wechat-id {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.wechat-id strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* ==================== 生成状态增强样式 ==================== */

/* 生成时间显示 */
.generating-time {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* 生成进度条 */
.generating-progress {
  width: 100%;
  max-width: 300px;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 0 auto 1rem;
}

.generating-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* 生成过程中的提示框 */
.generating-tips-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  max-width: 320px;
  animation: tipsFadeIn 0.5s ease;
}

.generating-tips-box .tips-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.generating-tips-box .tips-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

@keyframes tipsFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== 生成弹窗订阅区域 ==================== */
.generating-subscribe-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.75rem auto;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 152, 0, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 24px;
}

.btn-subscribe-notify {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  border: none;
  border-radius: 16px;
  color: #1a1a2e;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-subscribe-notify:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.btn-subscribe-notify:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-subscribe-notify.subscribed {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.btn-subscribe-notify .subscribe-icon {
  font-size: 0.9rem;
}

.btn-subscribe-notify .subscribe-badge {
  font-size: 0.65rem;
  background: rgba(0,0,0,0.15);
  padding: 2px 6px;
  border-radius: 8px;
}

.subscribe-hint {
  font-size: 0.7rem;
  color: rgba(255, 193, 7, 0.9);
  white-space: nowrap;
}

.subscribe-hint strong {
  color: #ffc107;
  font-weight: 700;
}

/* ==================== 切换模型区域 ==================== */
.model-switch-section {
  margin: 0.75rem 0;
  text-align: center;
}

.model-switch-tip {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.btn-model-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-model-switch:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

@keyframes turboFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.turbo-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.turbo-hint-icon {
  animation: pulse 2s infinite;
}

.btn-turbo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  border: none;
  border-radius: 25px;
  color: #1a1a2e;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

.btn-turbo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 193, 7, 0.5);
}

.btn-turbo:active {
  transform: translateY(0);
}

.turbo-icon {
  font-size: 1.25rem;
  animation: flash 1.5s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.turbo-label {
  font-size: 1rem;
}

.turbo-cost {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-left: 0.25rem;
}

.turbo-credits {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.turbo-credits span {
  color: var(--primary-color);
  font-weight: 600;
}

/* 加速模型选择弹窗 */
.turbo-modal .modal-content {
  max-width: 420px;
}

.turbo-modal-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.turbo-models-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.turbo-model-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--card-bg);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.turbo-model-item:hover {
  border-color: var(--primary-color);
  background: rgba(var(--primary-rgb), 0.1);
}

.turbo-model-item.recommended {
  border-color: rgba(255, 193, 7, 0.5);
  background: rgba(255, 193, 7, 0.05);
}

.turbo-model-item.recommended::before {
  content: '推荐';
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #1a1a2e;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
}

.turbo-model-item {
  position: relative;
}

.turbo-model-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.turbo-model-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.turbo-model-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.turbo-model-speed {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

/* 速度等级颜色 */
.turbo-model-speed.speed-ultra {
  color: #ec4899;
}

.turbo-model-speed.speed-fast {
  color: #6366f1;
}

.turbo-model-speed.speed-normal {
  color: #10b981;
}

.turbo-model-speed.speed-slow {
  color: #f59e0b;
}

.turbo-model-speed.speed-very-slow {
  color: #94a3b8;
}

.turbo-model-quality {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.turbo-model-quality::before {
  content: '✨';
}

.turbo-model-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.turbo-model-cost-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
}

.turbo-model-cost-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* 需要用户自备Key的模型样式 */
.turbo-model-item.needs-user-key {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.05);
}

.turbo-model-item.needs-user-key:hover {
  border-color: rgba(245, 158, 11, 0.6);
  background: rgba(245, 158, 11, 0.1);
}

.turbo-model-cost.free .turbo-model-cost-value {
  font-size: 1rem;
}

.turbo-model-cost.needs-key .turbo-model-cost-value {
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: right;
}

.turbo-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(255, 193, 7, 0.1);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.turbo-warning .warning-icon {
  font-size: 1rem;
}

/* 加速状态指示 */
.generating-overlay.turbo-mode .generating-animation .pulse-ring {
  border-color: rgba(255, 193, 7, 0.3);
}

.generating-overlay.turbo-mode .generating-animation .emoji-center {
  animation: turboEmoji 0.5s ease infinite alternate;
}

@keyframes turboEmoji {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.turbo-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #ffc107, #ff9800);
  color: #1a1a2e;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 12px;
  margin-left: 0.5rem;
}

/* 生成操作按钮组 */
.generating-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.generating-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 100px;
  height: 38px;
  padding: 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 19px;
  transition: all 0.2s ease;
}

.generating-actions .btn span {
  font-size: 0.9rem;
}

.btn-minimize {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--primary-color);
}

.btn-minimize:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.btn-cancel {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.btn-cancel:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: white;
}

/* 浮动生成状态条 - 改为顶部显示，避免遮挡底部菜单 */
.generating-float {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border: 1px solid var(--primary-color);
  border-radius: 50px;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.generating-float.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.float-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  transition: background 0.2s;
}

.float-content:hover {
  background: var(--bg-hover);
}

.float-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--primary-light);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.float-text {
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 500;
}

.float-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}

.float-restore,
.float-cancel {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 50%;
  transition: all 0.2s;
  line-height: 1;
}

.float-restore:hover {
  background: var(--primary-light);
}

.float-cancel {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.float-cancel:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-color);
}

/* 生成完成通知 */
.generation-notify {
  position: fixed;
  top: 80px;
  right: 20px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-radius: var(--border-radius);
  padding: 0;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  transform: translateX(120%);
  opacity: 0;
  pointer-events: none; /* 隐藏时不拦截点击事件 */
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.generation-notify.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto; /* 显示时恢复点击 */
}

.notify-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.notify-icon {
  font-size: 1.25rem;
}

.notify-text {
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
}

.notify-content .btn {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border: none;
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

.notify-content .btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.notify-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.notify-close:hover {
  color: white;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .generating-float {
    top: calc(10px + var(--safe-area-top));
    left: 10px;
    right: 10px;
    transform: translateX(0) translateY(-100px);
    border-radius: var(--border-radius);
    justify-content: space-between;
  }
  
  .generating-float.active {
    transform: translateX(0) translateY(0);
  }
  
  .generation-notify {
    top: calc(60px + var(--safe-area-top));
    right: 10px;
    left: 10px;
    transform: translateX(0) translateY(-100%);
  }
  
  .generation-notify.active {
    transform: translateX(0) translateY(0);
  }
  
  .notify-content {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  
  .generating-actions {
    flex-direction: column;
  }
  
  .generating-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* 页脚增强 */
.footer {
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.footer-logo {
  font-size: 1.5rem;
}

.footer-brand span:last-child {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.footer p {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin: 0.25rem 0;
}

.footer-wechat {
  margin-top: 0.75rem !important;
  padding: 0.5rem 1rem;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 20px;
  display: inline-block;
}

.footer-wechat strong {
  color: var(--primary-color);
}

/* 游戏页品牌水印（不可交互）- 已隐藏，避免与浮动提示重复 */
.brand-watermark {
  display: none !important; /* 隐藏，只保留浮动提示按钮 */
}

/* 全屏模式悬浮操作按钮 */
.fullscreen-floating-btns {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 200;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.fullscreen-floating-btns:hover {
  opacity: 1;
}

.floating-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: white;
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.floating-btn:hover {
  background: var(--primary-color);
  transform: scale(1.1);
}

.floating-btn svg {
  width: 20px;
  height: 20px;
}

.floating-btn-back {
  background: rgba(239, 68, 68, 0.8);
}

.floating-btn-back:hover {
  background: #ef4444;
}

.floating-btn-share {
  background: rgba(59, 130, 246, 0.8);
}

.floating-btn-share:hover {
  background: #3b82f6;
}

.floating-btn-expand {
  background: rgba(99, 102, 241, 0.8);
}

.floating-btn-expand:hover {
  background: var(--primary-color);
}

/* 全屏模式样式 */
.game-page-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  background: #000 !important;
}

.game-page-fullscreen .game-container {
  height: 100vh !important;
  max-width: none !important;
  padding: 0 !important;
}

.game-page-fullscreen .game-header {
  display: none !important; /* 全屏时隐藏顶部栏 */
}

.game-page-fullscreen .game-frame-container {
  height: 100vh !important;
  border-radius: 0 !important;
}

.game-page-fullscreen #game-frame {
  border-radius: 0 !important;
}

.game-page-fullscreen .fullscreen-floating-btns {
  display: flex !important; /* 全屏时显示悬浮按钮 */
  opacity: 0.3;
}

.game-page-fullscreen .fullscreen-floating-btns:hover {
  opacity: 1;
}

/* 全屏模式只保留退出按钮 */
.game-page-fullscreen .floating-btn-share,
.game-page-fullscreen .floating-btn-expand {
  display: none !important;
}

.game-page-fullscreen .tiktok-sidebar {
  display: none !important; /* 全屏时隐藏侧边栏 */
}

.game-page-fullscreen .tiktok-author-info {
  display: none !important; /* 全屏时隐藏作者信息 */
}

.game-page-fullscreen .game-promo-float {
  display: none !important; /* 全屏时隐藏公众号推广 */
}

.game-page-fullscreen .comments-section {
  display: none !important; /* 全屏时隐藏留言板 */
}

.game-page-fullscreen .brand-watermark {
  display: none !important; /* 全屏时隐藏水印 */
}

/* 非全屏模式下隐藏悬浮操作按钮（使用顶部栏和侧边栏） */
.game-container:not(.game-page-fullscreen) .fullscreen-floating-btns {
  display: none;
}

.watermark-logo {
  font-size: 0.875rem;
}

.watermark-text {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

/* 底部固定公众号提示（不随屏幕滚动） */
.game-promo-float {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 500;
  cursor: pointer;
  opacity: 0;
  animation: promoFloatIn 0.4s ease 2s forwards;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@keyframes promoFloatIn {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.game-promo-float:hover {
  background: rgba(99, 102, 241, 0.9);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.promo-float-icon {
  font-size: 1rem;
}

.promo-float-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  white-space: nowrap;
}

.promo-float-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 0.25rem;
  transition: var(--transition);
}

.promo-float-close:hover {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

/* 隐藏推广浮动 */
.game-promo-float.hidden {
  display: none !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .game-promo-float {
    bottom: 15px;
    padding: 0.4rem 0.875rem;
    max-width: calc(100% - 24px);
  }
  
  .promo-float-text {
    font-size: 0.6875rem;
  }
}

/* 公众号推广弹窗 - 美化版 */
.brand-promo-body {
  text-align: center;
  padding: 1.5rem;
}

.promo-qr-large {
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  padding: 1.5rem;
  border-radius: var(--border-radius);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* 横向 Banner 图片样式 */
.promo-banner-modal {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.promo-qr-large .qr-placeholder {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  background: white;
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
}

.promo-qr-large .qr-emoji {
  font-size: 4rem;
}

.promo-qr-large p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.promo-modal-info h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.promo-slogan {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.promo-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(99, 102, 241, 0.1));
  border-radius: var(--border-radius-sm);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.promo-list li {
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.promo-list li strong {
  color: var(--success-color);
}

.promo-wechat-id {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.promo-wechat-id code {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 15px;
  font-family: inherit;
  font-weight: 600;
  margin-left: 0.5rem;
}

.btn-block {
  width: 100%;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .wechat-promo-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1.5rem;
  }
  
  .qrcode-placeholder {
    width: 120px;
    height: 120px;
  }
  
  .promo-action {
    justify-content: center;
  }
  
  .brand-watermark {
    padding: 0.25rem 0.5rem;
  }
  
  .watermark-text {
    font-size: 0.625rem;
  }
  
  .game-promo-bar {
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
  }
  
  .game-promo-bar .promo-text {
    font-size: 0.6875rem;
    flex-basis: 100%;
    order: 2;
    margin-top: 0.5rem;
  }
  
  .btn-promo {
    font-size: 0.6875rem;
    padding: 0.25rem 0.625rem;
  }
}

/* ==================== 全部游戏弹窗 ==================== */
.all-games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

@media (min-width: 640px) {
  .all-games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .all-games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ==================== 个人中心 ==================== */
.modal-xlarge {
  max-width: 1000px;
  width: 95%;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.profile-name-area h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
}

.profile-stats-mini {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.profile-stats-mini strong {
  color: var(--text-primary);
}

/* 标签页导航 */
.profile-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  overflow-x: auto;
}

.profile-tab {
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--transition);
}

.profile-tab:hover {
  color: var(--text-primary);
  background: rgba(99, 102, 241, 0.05);
}

.profile-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* 标签页内容 */
.profile-body {
  padding: 0 !important;
}

.profile-tab-content {
  display: none;
  padding: 1.5rem;
  min-height: 400px;
  max-height: 60vh;
  overflow-y: auto;
}

.profile-tab-content.active {
  display: block;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.tab-stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.games-list-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 设置卡片 */
.settings-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.settings-card {
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.25rem;
}

.settings-card h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.settings-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}

/* 积分迷你显示 */
.credits-mini-display {
  text-align: center;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
  border-radius: var(--border-radius-sm);
  margin-bottom: 1rem;
}

.credits-mini-display .credits-value {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.credits-mini-display .credits-label {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.credits-actions {
  text-align: center;
}

/* 个人中心按钮样式 */
.btn-profile {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}

.btn-profile:hover {
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

/* 积分徽章（显示在"我的"按钮上） */
.nav-credits-badge {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 10px;
  margin-left: 0.25rem;
  min-width: 1.5rem;
  text-align: center;
}

/* ==================== 我的游戏管理 ==================== */
.my-games-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

#my-games-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

#my-games-stats .stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

#my-games-list {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.my-game-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  margin-bottom: 0.75rem;
  transition: var(--transition);
}

.my-game-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

/* 制作中的游戏样式 */
.my-game-item.my-game-draft {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-color: rgba(99, 102, 241, 0.3);
  animation: pulse-draft 2s ease-in-out infinite;
}

.my-game-item.my-game-draft.stale {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(239, 68, 68, 0.1));
  border-color: rgba(245, 158, 11, 0.5);
  animation: none;
}

@keyframes pulse-draft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.draft-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: 500;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
}

.my-game-draft.stale .draft-badge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}

/* 私密游戏样式 */
.my-game-item.private-game {
  background: linear-gradient(135deg, rgba(100, 116, 139, 0.1), rgba(71, 85, 105, 0.1));
  border-color: rgba(100, 116, 139, 0.3);
}

.private-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 6px;
  font-weight: 500;
  background: rgba(100, 116, 139, 0.3);
  color: #94a3b8;
}

/* 我的游戏条目封面 */
.my-game-cover {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-right: 1rem;
}

/* 完整列表容器样式 */
.full-game-list-container {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.full-game-list-container .my-game-item {
  margin-bottom: 0.75rem;
}

.full-game-list-container .my-game-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* 纯图标按钮 */
.btn-icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .full-game-list-container .my-game-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .full-game-list-container .my-game-cover {
    display: none;
  }
  
  .full-game-list-container .my-game-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .full-game-list-container .my-game-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

.making-hint {
  color: #6366f1;
  font-style: italic;
}

.stale-hint {
  color: #f59e0b;
  font-weight: 500;
}

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

.my-game-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-game-prompt {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

.my-game-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.my-game-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: 1rem;
}

.btn-small {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.75rem !important;
  min-width: auto !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
}

.btn-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
}

.empty-games,
.loading-games,
.error-games {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.empty-games .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-games .empty-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.empty-games .empty-hint {
  font-size: 0.875rem;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .my-game-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .my-game-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
  
  .my-game-prompt {
    max-width: 100%;
  }
  
  #my-games-stats {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ==================== 内测横幅 ==================== */
.beta-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem; /* 增大上下内边距，更易点击 */
  padding-right: 2.5rem; /* 为关闭按钮留空间 */
  min-height: 44px; /* 确保最小高度满足移动端点击需求 */
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(139, 92, 246, 0.95) 100%);
  color: white;
  font-size: 0.8125rem;
  position: sticky; /* 改为 sticky 定位，确保始终在顶部且不被覆盖 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000; /* 提高 z-index，确保在其他元素之上 */
  backdrop-filter: blur(4px);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  touch-action: manipulation; /* 优化触摸响应 */
  /* 确保整个区域可点击 */
  pointer-events: auto !important;
}

.beta-banner:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(139, 92, 246, 1) 100%);
}

.beta-banner:active {
  background: linear-gradient(135deg, rgba(79, 82, 221, 1) 0%, rgba(119, 72, 226, 1) 100%);
}

/* 内部元素不阻止点击 - 点击会穿透到父元素 */
.beta-banner .beta-icon,
.beta-banner .beta-text {
  pointer-events: none !important;
  cursor: inherit;
  position: relative;
  z-index: 1;
}

/* 横幅内所有非关闭按钮的子元素都不阻挡点击 */
.beta-banner > *:not(.beta-close) {
  pointer-events: none !important;
}

/* 确保beta-banner不会遮挡其他元素 - display:none时不占空间 */
.beta-banner[style*="display: none"],
.beta-banner[style*="display:none"] {
  pointer-events: none !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.beta-icon {
  font-size: 1rem;
}

.beta-text {
  font-weight: 500;
}

.beta-close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  border: none;
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s ease;
  pointer-events: auto !important; /* 确保可点击 */
  z-index: 10;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.beta-close:hover {
  background: rgba(255, 255, 255, 0.4);
}

.beta-close:active {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(0.95);
}

/* ==================== 游戏卡片时间和统计样式 ==================== */
.game-card-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.game-card-stats-row {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

.game-card-stats-row span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.game-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

/* ==================== 账号设置奖励标签 ==================== */
.bonus-tag {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  font-weight: 600;
  vertical-align: middle;
}

.bonus-tag.verified {
  background: linear-gradient(135deg, var(--primary-color) 0%, #8b5cf6 100%);
}

/* ==================== 表单提示改进 ==================== */
.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}

/* ==================== 积分显示样式 ==================== */
.credits-info-tip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary-light);
  border-radius: var(--border-radius-sm);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.credits-info-tip .tip-icon {
  font-size: 1.25rem;
}

/* ==================== 移动端内测横幅适配 ==================== */
@media (max-width: 640px) {
  .beta-banner {
    font-size: 0.75rem;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem; /* 保持足够的点击区域 */
    min-height: 44px; /* 确保最小点击高度 */
  }
  
  .beta-text {
    text-align: center;
  }
  
  .beta-close {
    right: 0.5rem;
    min-width: 36px;
    min-height: 36px;
  }
}

/* ==================== 游戏列表页面 ==================== */
#game-list-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-color);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#game-list-page.active {
  display: flex;
}

.list-page-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  z-index: 100;
  height: 56px;
  position: relative;
}

/* 列表页返回按钮 - 增大点击区域 */
.list-page-header .btn-back {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.3);
  flex-shrink: 0;
}

.list-page-header .btn-back:hover {
  background: var(--bg-hover);
}

.list-page-header .btn-back:active {
  background: rgba(99, 102, 241, 0.2);
  transform: scale(0.92);
}

.list-page-header .btn-back svg {
  pointer-events: none;
  width: 22px;
  height: 22px;
}

.list-page-header h2 {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-page-actions {
  display: flex;
  gap: 0.5rem;
}

.list-page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
  position: relative;
}

/* 游戏列表网格 - 每行2个 */
.game-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

/* 列表页游戏卡片 */
.list-game-card {
  position: relative;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-color);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.list-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.list-game-card:active {
  transform: scale(0.98);
}

.list-game-card.pressing {
  transform: scale(0.95);
  opacity: 0.8;
}

.list-game-card.private-card {
  opacity: 0.85;
}

.list-game-card .private-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.875rem;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  z-index: 2;
}

.list-card-cover {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

.list-card-info {
  padding: 0.75rem;
}

.list-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-card-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.list-card-author {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 加载更多指示器 */
.list-loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.list-loading-more .loading-spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.list-no-more {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* 回到顶部按钮 */
.scroll-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: all 0.3s ease;
  z-index: 100;
}

.scroll-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.scroll-to-top-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}

.scroll-to-top-btn:active {
  transform: scale(0.95);
}


/* 响应式 - 小屏幕 */
@media (max-width: 360px) {
  .game-list-grid {
    gap: 0.5rem;
  }
  
  .list-card-cover {
    height: 80px;
    font-size: 2.5rem;
  }
  
  .list-card-info {
    padding: 0.5rem;
  }
  
  .list-card-title {
    font-size: 0.875rem;
  }
}

/* 响应式 - 平板 */
@media (min-width: 768px) {
  .game-list-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  
  .list-card-cover {
    height: 120px;
    font-size: 3.5rem;
  }
}

/* 响应式 - 桌面 */
@media (min-width: 1024px) {
  .game-list-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

/* ==================== 长按操作菜单 ==================== */
.game-action-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: none;
}

.game-action-menu.active {
  display: block;
}

.action-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}

.action-menu-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-radius: 1rem 1rem 0 0;
  padding: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.action-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.action-menu-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

.action-menu-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-tertiary);
  border-radius: 50%;
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.action-menu-close:hover {
  background: var(--bg-color);
}

.action-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: none;
  background: transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  width: 100%;
}

.action-menu-item:hover,
.action-menu-item:active {
  background: var(--bg-tertiary);
}

.action-menu-item .action-icon {
  font-size: 1.25rem;
  width: 2rem;
  text-align: center;
}

.action-menu-item .action-text {
  font-size: 1rem;
  color: var(--text-primary);
}

.action-menu-item.action-danger .action-text {
  color: var(--danger-color, #ef4444);
}

.action-menu-cancel {
  margin-top: 0.5rem;
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}

.action-menu-cancel:hover,
.action-menu-cancel:active {
  background: var(--bg-color);
}

/* 卡片长按效果 */
.profile-game-card-h.pressing {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 私密游戏标记 */
.profile-game-card-h.private-card {
  opacity: 0.85;
}

.private-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  z-index: 2;
}

/* ==================== 账号系统样式 ==================== */
.account-info-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: 0.875rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.account-id-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.account-label {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.account-id {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.btn-copy-account {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-copy-account:hover {
  opacity: 1;
}

.account-password-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.checkbox-label span {
  transition: color 0.2s;
}

.checkbox-label:hover span {
  color: var(--text-primary);
}

.password-input-row {
  margin-top: 0.75rem;
}

.password-input-row input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.password-input-row input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.password-hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ==================== 登录弹窗样式 ==================== */
.login-modal-body {
  text-align: center;
}

.login-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}

.login-tab {
  flex: 1;
  padding: 0.625rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s;
}

.login-tab.active {
  background: var(--primary-light);
  color: var(--primary-color);
}

.login-tab:hover:not(.active) {
  color: var(--text-primary);
}

.login-form {
  text-align: left;
}

.login-tip {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
}

.login-tip a {
  color: var(--primary-color);
  text-decoration: none;
}

.login-tip a:hover {
  text-decoration: underline;
}

/* ==================== 个人中心账号卡片样式 ==================== */
.account-card {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.account-display {
  margin: 0.75rem 0;
}

.account-display-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.account-display-label {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  min-width: 70px;
}

.account-display-value {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-color);
  background: var(--primary-light);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
}

.btn-copy-small {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.btn-copy-small:hover {
  opacity: 1;
}

.account-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-badge.status-guest {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.status-badge.status-protected {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.account-actions {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

/* ==================== 源代码编辑器弹窗 ==================== */

.source-code-modal-content {
  max-width: 95vw !important;
  width: 95vw !important;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.source-code-modal-content .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.source-code-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.source-code-body {
  flex: 1;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
}

.source-code-editor {
  width: 100%;
  height: 100%;
  background: #1a1a2e;
  color: #e0e0e0;
  border: none;
  padding: 1rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  white-space: pre;
  overflow: auto;
  tab-size: 2;
}

.source-code-editor:focus {
  outline: none;
}

.source-code-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

@media (max-width: 640px) {
  .source-code-modal-content {
    height: 100vh;
    border-radius: 0 !important;
  }

  .source-code-editor {
    font-size: 0.75rem;
  }
}

/* ==================== 用户主页弹窗 ==================== */

.user-profile-body {
  padding: 1.5rem;
}

.user-profile-loading,
.user-profile-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--text-secondary);
}

.user-profile-error .error-icon {
  font-size: 2.5rem;
}

.user-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
}

.user-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

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

.user-profile-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
}

.user-profile-account {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

.user-profile-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.user-stat-item {
  cursor: pointer;
  transition: color 0.2s;
}

.user-stat-item:hover {
  color: var(--primary-color);
}

.user-stat-item strong {
  color: var(--text-primary);
  font-weight: 600;
}

.user-stat-divider {
  color: var(--border-color);
}

.user-profile-follow-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
}

.user-profile-games h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.user-games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.user-game-card {
  background: var(--bg-color);
  border-radius: var(--border-radius-sm);
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.user-game-card:hover {
  background: var(--bg-hover);
  transform: translateY(-2px);
}

.user-game-emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.user-game-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.375rem;
}

.user-game-stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.user-games-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.user-games-scroll-container {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.user-games-scroll-container::-webkit-scrollbar {
  width: 4px;
}

.user-games-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.user-games-scroll-container::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.user-games-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.user-games-load-more {
  text-align: center;
  padding: 1rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.user-games-more {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .user-games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 关注列表用户项可点击样式 */
.follow-user-avatar,
.follow-user-info {
  cursor: pointer;
}

.follow-user-item:hover .follow-user-avatar,
.follow-user-item:hover .follow-user-info {
  opacity: 0.8;
}

/* ==================== 首页分类展示样式 ==================== */
.home-sections {
  padding: 0 1rem 2rem;
}

.home-section {
  margin-bottom: 1.5rem;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0 0.25rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.btn-more {
  background: transparent;
  border: none;
  color: var(--primary-color);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius-sm);
  transition: all 0.2s;
}

.btn-more:hover {
  background: var(--primary-light);
  color: var(--primary-hover);
}

/* 首页游戏网格 - 自适应宽度 */
.games-grid-home {
  display: grid;
  /* 使用 auto-fit 和 minmax 实现自适应 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  width: 100%;
}

/* 首页游戏卡片 - 紧凑样式 */
.game-card-home {
  background: var(--bg-card);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  min-width: 0; /* 防止内容溢出 */
  overflow: hidden;
}

.game-card-home:active {
  transform: scale(0.98);
}

.game-card-home:hover {
  border-color: var(--primary-color);
  background: var(--bg-hover);
}

.game-card-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-hover) 0%, var(--bg-secondary) 100%);
  border-radius: 8px;
  flex-shrink: 0;
}

.game-card-info {
  flex: 1;
  min-width: 0; /* 关键：允许flex子项收缩 */
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow: hidden;
}

.game-card-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.game-card-home .game-card-author {
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-card-home .game-card-stats {
  display: flex;
  gap: 0.5rem;
  font-size: 0.625rem;
  color: var(--text-muted);
  flex-wrap: nowrap;
}

.game-card-home .game-card-stats span {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  white-space: nowrap;
}

/* 加载中状态 */
.games-grid-home .list-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--text-muted);
}

.games-grid-home .list-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.games-grid-home .list-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

/* 小屏手机优化 */
@media (max-width: 359px) {
  .games-grid-home {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .game-card-home {
    padding: 0.625rem;
  }
  
  .game-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.75rem;
  }
  
  .game-card-name {
    font-size: 0.875rem;
  }
  
  .home-sections {
    padding: 0 0.75rem 2rem;
  }
}

/* 平板优化 */
@media (min-width: 640px) {
  .games-grid-home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  
  .game-card-home {
    padding: 0.625rem;
  }
  
  .game-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 1.75rem;
  }
  
  .game-card-name {
    font-size: 0.875rem;
  }
  
  .home-sections {
    padding: 0 1.5rem 2rem;
  }
}

/* 桌面端优化 */
@media (min-width: 1024px) {
  .games-grid-home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  
  .game-card-home {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .game-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    font-size: 2rem;
  }
  
  .game-card-name {
    font-size: 0.9375rem;
  }
  
  .home-section {
    margin-bottom: 2rem;
  }
  
  .section-title {
    font-size: 1.125rem;
  }
}

/* ==================== 游戏留言板样式 ==================== */
.comments-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 1.25rem;
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.2s;
}

.comments-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* 评论区切换按钮 */
.comments-toggle-btn {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: var(--primary);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.comments-toggle-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--primary);
}

.comments-toggle-btn.expanded {
  background: var(--primary);
  color: white;
}

/* 评论区展开状态 */
.comments-section.expanded {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  margin: 0;
  border-radius: 0;
  overflow-y: auto;
  animation: commentSlideUp 0.3s ease;
}

@keyframes commentSlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.comments-section.expanded .comments-header {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 10;
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0;
}

.comments-section.expanded .comments-header:hover {
  background: var(--bg-secondary);
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 0;
}

.comments-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comments-count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: normal;
}

/* 留言输入区域 */
.comment-input-area {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.comment-input-area textarea {
  flex: 1;
  min-height: 60px;
  max-height: 120px;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.9375rem;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.comment-input-area textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.comment-input-area textarea::placeholder {
  color: var(--text-muted);
}

.comment-submit-btn {
  align-self: flex-end;
  padding: 0.625rem 1.25rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.comment-submit-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.comment-submit-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

/* 留言列表 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.comment-item {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 1rem;
  transition: background 0.2s;
}

.comment-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.comment-author-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.comment-author-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* 可点击的评论者头像和名称 */
.comment-avatar.comment-clickable,
.comment-author-name.comment-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-avatar.comment-clickable:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.comment-author-name.comment-clickable:hover {
  color: var(--primary);
  text-decoration: underline;
}

.comment-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

.comment-actions {
  display: flex;
  gap: 0.5rem;
}

.comment-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.comment-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.comment-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: break-word;
}

/* 空留言状态 */
.comments-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}

.comments-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.comments-empty-text {
  font-size: 0.9375rem;
}

/* 加载更多留言 */
.comments-load-more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.comments-load-more-btn {
  padding: 0.5rem 1.5rem;
  background: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
}

.comments-load-more-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* 留言登录提示 */
.comment-login-hint {
  text-align: center;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.comment-login-hint p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.comment-login-hint .btn {
  font-size: 0.875rem;
}

/* 移动端适配 */
@media (max-width: 640px) {
  .comments-section {
    padding: 1rem;
    margin-top: 0.75rem;
    border-radius: 8px;
  }
  
  .comment-input-area {
    flex-direction: column;
  }
  
  .comment-submit-btn {
    align-self: flex-end;
  }
  
  .comment-item {
    padding: 0.875rem;
  }
  
  .comment-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  
  .comment-author-name {
    font-size: 0.875rem;
  }
  
  .comment-content {
    font-size: 0.875rem;
  }
}

/* ==================== 我的评论区块样式 ==================== */
.profile-comments-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
  -webkit-overflow-scrolling: touch;
}

.profile-comments-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.profile-comments-list .loading-games,
.profile-comments-list .empty-games {
  width: 100%;
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

/* 我的评论卡片 */
.my-comment-card {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.my-comment-card:hover {
  border-color: rgba(99, 102, 241, 0.2);
}

.my-comment-card.comment-hidden {
  opacity: 0.6;
  background: var(--bg-secondary);
}

.my-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.my-comment-game {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-comment-game:hover {
  text-decoration: underline;
}

.my-comment-status {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 0.125rem 0.375rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.my-comment-content {
  font-size: 0.8125rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.my-comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.my-comment-date {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.my-comment-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-comment-action {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-comment-action:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.btn-comment-action.btn-comment-delete {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-comment-action.btn-comment-delete:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* 移动端适配 */
@media (max-width: 640px) {
  .profile-comments-scroll {
    max-height: 250px;
  }
  
  .my-comment-card {
    padding: 0.625rem;
  }
  
  .my-comment-game {
    font-size: 0.75rem;
  }
  
  .my-comment-content {
    font-size: 0.75rem;
  }
}

/* ==================== 未来科技风增强样式 ==================== */

/* 扫描线效果（可选背景装饰） */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 240, 255, 0.01) 2px,
    rgba(0, 240, 255, 0.01) 4px
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanline 8s linear infinite;
}

@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 100vh; }
}

/* 底部导航栏 - 科技感 */
.bottom-nav {
  background: rgba(14, 14, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 240, 255, 0.2);
  box-shadow: 0 -5px 30px rgba(0, 240, 255, 0.1);
}

.nav-item.active {
  color: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-glow);
}

.nav-icon-create {
  background: var(--accent-gradient);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4), 0 0 30px rgba(191, 0, 255, 0.3);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 240, 255, 0.4), 0 0 30px rgba(191, 0, 255, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(0, 240, 255, 0.6), 0 0 50px rgba(191, 0, 255, 0.5); }
}

/* 顶部标签栏 - 科技感 */
.top-tabs-header {
  background: rgba(14, 14, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

.tab-item.active {
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-glow);
}

.tab-item.active::after {
  background: var(--accent-gradient);
  box-shadow: 0 0 10px var(--primary-glow);
}

/* 游戏卡片 - 霓虹边框效果 */
.game-list-item {
  background: rgba(18, 18, 30, 0.8);
  border-bottom: 1px solid rgba(0, 240, 255, 0.08);
  transition: all 0.3s ease;
}

.game-list-item:hover {
  background: rgba(26, 26, 42, 0.9);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.05);
}

/* 游戏排名徽章 - 霓虹效果 */
.game-list-rank.rank-1 {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.game-list-rank.rank-2 {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.4);
}

.game-list-rank.rank-3 {
  background: linear-gradient(135deg, #cd7f32, #b87333);
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.4);
}

/* 按钮 - 霓虹风格 */
.btn-primary,
button.btn-primary,
.btn-create-generate {
  background: var(--accent-gradient);
  border: none;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
.btn-create-generate:hover {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(191, 0, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 次要按钮 - 科技边框风格 */
.btn-secondary,
button.btn-secondary {
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.4);
  color: #00f0ff;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* Ghost 按钮 - 低调风格 */
.btn-ghost,
button.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #64748b;
  font-weight: 400;
  transition: all 0.3s ease;
}

.btn-ghost:hover,
button.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #94a3b8;
}

/* 关闭按钮 - 圆角风格 */
.btn-close,
button.btn-close,
.modal-close {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-close:hover,
button.btn-close:hover,
.modal-close:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* 输入框 - 科技边框 */
input, textarea, select {
  background: rgba(10, 10, 18, 0.8) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.05) !important;
  outline: none;
}

/* 模态框 - 科技面板 */
.modal-content {
  background: rgba(14, 14, 24, 0.98);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.2), 0 0 100px rgba(191, 0, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--border-radius);
}

.modal-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.modal-header h2,
.modal-header h3 {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 页面标题 - 渐变科技字体 */
.page-header h2,
.create-hero h3,
.profile-user-details h2 {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 创作图标 - 科技动画 */
.create-icon-large {
  animation: float-glow 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5));
}

@keyframes float-glow {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)); }
  50% { transform: translateY(-10px); filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.8)); }
}

/* 卡片 - 霓虹边框发光 */
.profile-game-card-h,
.tiktok-card {
  background: rgba(18, 18, 30, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.15);
  transition: all 0.3s ease;
}

.profile-game-card-h:hover,
.tiktok-card:hover {
  border-color: rgba(0, 240, 255, 0.5);
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.2), 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* 设置卡片 - 科技面板 */
.settings-page-card {
  background: rgba(18, 18, 30, 0.9);
  border: 1px solid rgba(0, 240, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.settings-page-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--accent-gradient);
  animation: border-scan 4s linear infinite;
}

@keyframes border-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Toast 提示 - 科技风 */
.toast {
  background: rgba(14, 14, 24, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.toast-success {
  border-color: rgba(0, 255, 136, 0.5);
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
}

.toast-error {
  border-color: rgba(255, 51, 102, 0.5);
  box-shadow: 0 0 30px rgba(255, 51, 102, 0.2);
}

/* 加载动画 - 科技风 */
.loading-spinner,
.spinner,
.draft-spinner {
  border-color: rgba(0, 240, 255, 0.2);
  border-top-color: var(--primary-color);
}

/* 标签芯片 - 霓虹效果 */
.chip-large {
  background: rgba(18, 18, 30, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.chip-large:hover {
  background: rgba(0, 240, 255, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

/* 积分信息 - 科技面板 */
.create-credits-info {
  background: rgba(0, 240, 255, 0.08);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

/* 高级设置面板 */
.advanced-settings-panel {
  background: rgba(14, 14, 24, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

/* 模型标签 */
.header-model-tag,
.header-model-btn,
.game-model-tag {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--primary-color);
}

/* 用户头像 - 霓虹光环 */
.profile-avatar-large {
  background: var(--accent-gradient);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), 0 0 60px rgba(191, 0, 255, 0.2);
  animation: avatar-glow 3s ease-in-out infinite;
}

@keyframes avatar-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), 0 0 60px rgba(191, 0, 255, 0.2); }
  50% { box-shadow: 0 0 40px rgba(0, 240, 255, 0.5), 0 0 80px rgba(191, 0, 255, 0.3); }
}

/* 游戏详情页顶部栏 */
.game-detail-top-bar {
  background: rgba(14, 14, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

/* 关注按钮 */
.btn-follow,
.author-follow-btn {
  background: var(--accent-gradient);
  color: #000;
  font-weight: 600;
  border: none;
}

.btn-follow.following,
.author-follow-btn.following {
  background: transparent;
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: var(--text-secondary);
}

/* 数据高亮 */
.game-list-stat.highlight {
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-glow);
}

/* 搜索框 */
.search-input-wrapper {
  background: rgba(10, 10, 18, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.2);
}

.search-input-wrapper:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

/* 空状态 */
.empty-games,
.list-empty {
  color: var(--text-muted);
}

.list-empty-icon {
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.3));
}

/* 草稿卡片 - 特殊科技感 */
.profile-game-card-h.draft-card {
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(191, 0, 255, 0.1));
  border: 1px solid rgba(0, 240, 255, 0.4);
  animation: draft-pulse-tech 2s ease-in-out infinite;
}

@keyframes draft-pulse-tech {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.2); }
  50% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.4), 0 0 40px rgba(191, 0, 255, 0.2); }
}

.draft-badge {
  background: var(--accent-gradient);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

/* 滚动条美化 - 科技风 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(10, 10, 18, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-color), var(--neon-purple));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--primary-color), var(--neon-pink));
}

/* 选中文字颜色 */
::selection {
  background: rgba(0, 240, 255, 0.3);
  color: #fff;
}

/* 链接颜色 */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  text-shadow: 0 0 10px var(--primary-glow);
}

/* 页面部分标题 */
.profile-section-header-v .section-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 底部安全区域适配 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 8px);
  }
}

/* 减少动画 - 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  
  .nav-icon-create,
  .profile-avatar-large,
  .create-icon-large,
  .settings-page-card::before,
  .profile-game-card-h.draft-card {
    animation: none;
  }
}

/* ==================== 确认关闭对话框样式 ==================== */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease;
}

.confirm-dialog {
  background: linear-gradient(145deg, var(--card-bg), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  width: 90%;
  max-width: 320px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.confirm-dialog-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
  animation: bounce 1s ease-in-out infinite;
  pointer-events: none; /* 不阻挡点击 */
}

.confirm-dialog-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.confirm-dialog-message {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.confirm-dialog-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.confirm-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.confirm-btn-desc {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
  margin-top: 0.25rem;
}

.confirm-btn-minimize {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.confirm-btn-minimize:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.confirm-btn-cancel {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.confirm-btn-cancel:hover {
  background: rgba(239, 68, 68, 0.25);
}

.confirm-dialog-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.confirm-dialog-close:hover,
.confirm-dialog-close:active {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: scale(1.1);
}

/* ==================== 全屏设置页面 ==================== */
.settings-fullpage {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0f0f1a;
  z-index: 4000;
  display: none;
  animation: fadeIn 0.2s ease;
}

.settings-fullpage.active {
  display: block;
}

/* 确保设置页面内的元素可以交互 */
.settings-fullpage * {
  pointer-events: auto;
}

.settings-fullpage-container {
  background: #0f0f1a;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-fullpage-container {
  display: flex;
  flex-direction: row;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 左侧导航栏 */
.settings-sidebar {
  width: 220px;
  min-width: 220px;
  background: #1a1a2e;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100%;
}

.settings-sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.settings-back-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.settings-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.settings-back-btn svg {
  color: var(--text-secondary);
}

.settings-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  overflow-y: auto;
  gap: 0.25rem;
}

.settings-nav-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
  text-align: left;
}

.settings-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.settings-nav-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
  color: var(--text-primary);
}

.settings-nav-icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
}

.settings-nav-text {
  font-weight: 500;
}

/* 右侧内容区 */
.settings-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0f0f1a;
}

.settings-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  background: #0f0f1a;
}

.settings-panel.active {
  display: flex;
}

.settings-panel-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: #1a1a2e;
}

.settings-panel-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.settings-panel-desc {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.settings-panel-body {
  flex: 1;
  padding: 1.5rem 2rem;
  overflow-y: auto;
  background: #0f0f1a;
}

.settings-group {
  background: #1a1a2e;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
}

.settings-group h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.settings-group-hint {
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* LLM Keys 列表 */
.llm-keys-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.llm-key-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--bg-tertiary);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.llm-key-item:hover {
  border-color: var(--primary-color);
}

.llm-key-item.is-default {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}

.llm-key-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.llm-default-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  flex-shrink: 0;
}

.llm-default-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.llm-default-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.llm-key-item.is-default .llm-default-label {
  color: var(--primary-color);
}

/* 高亮脉冲动画 */
.llm-key-item.highlight-pulse {
  animation: highlightPulse 0.5s ease-in-out 3;
}

@keyframes highlightPulse {
  0%, 100% {
    border-color: var(--border-color);
    box-shadow: none;
  }
  50% {
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
  }
}

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

.llm-key-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.llm-key-name .badge {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-weight: 500;
}

.llm-key-name .badge.free {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

.llm-key-name .badge.need-key {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.llm-key-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.llm-key-status.configured {
  color: #10b981;
}

.llm-key-input {
  width: 100%;
}

.llm-key-input input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.llm-key-input input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.llm-key-input input::placeholder {
  color: var(--text-muted);
}

/* 账号信息卡片 */
.account-info-card {
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid var(--border-color);
}

.account-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.account-info-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.account-info-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.account-info-value code {
  background: var(--bg-primary);
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--primary-color);
}

/* 设置操作列表 */
.settings-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-action-btn:hover {
  background: var(--bg-primary);
  border-color: var(--primary-color);
}

.settings-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

.settings-action-icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
}

.settings-action-text {
  flex: 1;
  text-align: left;
  font-weight: 500;
}

.settings-action-arrow {
  font-size: 1.25rem;
  color: var(--text-muted);
}

/* 开关样式 */
.settings-toggle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.settings-toggle-info {
  flex: 1;
}

.settings-toggle-label {
  display: block;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

.settings-toggle-desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 28px;
  transition: all 0.3s ease;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-color: transparent;
}

.toggle-switch input:checked + .toggle-slider:before {
  background: #fff;
  transform: translateX(20px);
}

/* 底部保存按钮 */
.settings-footer {
  display: flex;
  gap: 1rem;
  padding: 1rem 2rem;
  background: #1a1a2e;
  border-top: 1px solid var(--border-color);
}

.settings-footer .btn {
  flex: 1;
  max-width: 200px;
}

/* 移动端响应式 - 仅在真正的小屏幕上应用 */
@media (max-width: 640px) {
  .settings-fullpage-container {
    flex-direction: column;
  }
  
  .settings-sidebar {
    width: 100%;
    min-width: unset;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
  
  .settings-sidebar-header {
    padding: 0.75rem 1rem;
  }
  
  .settings-nav {
    flex-direction: row;
    overflow-x: visible;
    padding: 0.25rem;
    gap: 0;
  }
  
  .settings-nav-item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    min-width: 0;
    border-radius: 8px;
  }
  
  .settings-nav-icon {
    font-size: 1.25rem;
  }
  
  .settings-nav-text {
    font-size: 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  .settings-panel-header {
    padding: 1.25rem 1rem 0.75rem;
  }
  
  .settings-panel-header h2 {
    font-size: 1.25rem;
  }
  
  .settings-panel-body {
    padding: 1rem;
  }
  
  .settings-group {
    padding: 1rem;
  }
  
  .llm-key-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .llm-key-input {
    width: 100%;
  }
  
  .settings-footer {
    padding: 1rem;
  }
  
  .settings-footer .btn {
    max-width: none;
  }
}
  
/* ==================== ��Ϸ�༭��ҳ����ʽ ==================== */ 
/* ==================== 游戏编辑器页面样式 ==================== */
#game-editor-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-color);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#game-editor-page:not(.active) {
  display: none;
}

/* 编辑器顶部导航栏 */
.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  min-height: 56px;
  gap: 0.75rem;
}

/* 编辑器返回按钮 - 玻璃拟态风格 */
.editor-header .btn-back {
  width: 40px;
  height: 40px;
  border: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.editor-header .btn-back::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.editor-header .btn-back:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
  color: var(--primary-color);
  transform: translateX(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
}

.editor-header .btn-back:active {
  transform: translateX(0) scale(0.95);
}

.editor-header .btn-back svg {
  transition: transform 0.3s ease;
}

.editor-header .btn-back:hover svg {
  transform: translateX(-2px);
}

.editor-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}

.editor-title-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-status {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--primary-light);
  color: var(--primary-color);
  border-radius: 10px;
  flex-shrink: 0;
}

.editor-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

/* 编辑器设置按钮 - 现代玻璃拟态风格 */
.btn-editor-settings {
  width: 40px;
  height: 40px;
  border: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-editor-settings::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-editor-settings:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.btn-editor-settings:active {
  transform: translateY(0) scale(0.95);
}

.btn-editor-settings svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-editor-settings:hover svg {
  transform: rotate(45deg);
}

/* 编辑器保存按钮 - 玻璃拟态风格 */
.btn-editor-save {
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  border: none;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-editor-save::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-editor-save:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.btn-editor-save:active {
  transform: translateY(0) scale(0.95);
}

/* 编辑器模型选择按钮 */
.btn-editor-model {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  max-width: 140px;
}

.btn-editor-model:hover {
  background: var(--bg-hover);
  border-color: var(--primary-color);
}

.btn-editor-model .editor-model-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.btn-editor-model .editor-model-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
}

.btn-editor-model svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* 模型选择项选中状态 */
.turbo-model-item.selected {
  border-color: var(--primary-color);
  background: var(--primary-light);
}

.turbo-model-item.selected .turbo-model-name {
  color: var(--primary-color);
  font-weight: 600;
}

/* 预览区域 */
.editor-preview-section {
  flex: 0 0 45%;
  position: relative;
  background: #000;
  overflow: hidden;
}

.editor-preview-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 内嵌游戏容器（替代 iframe） */
.editor-game-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  background: #1a1a2e;
}

/* 兼容性：如果还有 iframe 的情况 */
#editor-preview-frame {
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* 确保游戏样式容器不显示 */
#editor-game-styles {
  display: none;
}

.editor-preview-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: white;
  font-size: 0.875rem;
}

.editor-preview-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* AI 建议标签区域 */
.editor-suggestions-section {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.suggestions-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.suggestions-scroll {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.suggestions-scroll::-webkit-scrollbar {
  display: none;
}

/* AI建议标签 - 玻璃胶囊风格 */
.suggestion-tag {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 20px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.suggestion-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(0, 180, 216, 0.15));
  opacity: 0;
  transition: opacity 0.3s;
}

.suggestion-tag:hover {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(0, 180, 216, 0.15));
  border-color: rgba(0, 217, 255, 0.4);
  color: #00d9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 217, 255, 0.2);
}

.suggestion-tag:active {
  transform: translateY(0) scale(0.98);
}

/* 对话区域 */
.editor-chat-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-message {
  display: flex;
  gap: 0.75rem;
  max-width: 90%;
}

.chat-message.user {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.chat-message.assistant {
  align-self: flex-start;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.chat-bubble {
  padding: 0.75rem 1rem;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  word-break: break-word;
}

.chat-message.user .chat-bubble {
  background: var(--primary-color);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-message.assistant .chat-bubble {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

/* 聊天气泡内的积分提示 */
.chat-credit-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8125rem;
}

.chat-credit-notice.free {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.chat-credit-notice.cost {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.chat-credit-notice .credit-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.chat-credit-notice .credit-text {
  flex: 1;
}

.chat-credit-notice .credit-balance {
  padding: 0.125rem 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

/* 输入区域 */
.editor-input-section {
  padding: 0.75rem 1rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.editor-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 24px;
  padding: 0.5rem;
  padding-left: 1rem;
}

.editor-input-wrapper textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
  max-height: 120px;
  min-height: 24px;
  outline: none;
  padding: 0.25rem 0;
}

.editor-input-wrapper textarea::placeholder {
  color: var(--text-muted);
}

/* 发送按钮 - 玻璃拟态风格 */
.btn-send-edit {
  width: 44px;
  height: 44px;
  border: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-send-edit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-send-edit:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.25));
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
}

.btn-send-edit:active {
  transform: translateY(0) scale(0.95);
}

.btn-send-edit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: rgba(100, 100, 100, 0.1);
  color: var(--text-muted);
}

.btn-send-edit:disabled::before {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.2), rgba(100, 100, 100, 0.2));
}

/* 取消状态的发送按钮 - 玻璃拟态红色风格 */
.btn-send-edit.canceling {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.15));
  color: #ef4444;
  animation: pulse-border-cancel 1.5s ease-in-out infinite;
}

.btn-send-edit.canceling::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(220, 38, 38, 0.4));
}

.btn-send-edit.canceling:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.25));
  color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}

.btn-send-edit.canceling:active {
  transform: translateY(0) scale(0.95);
}

@keyframes pulse-border-cancel {
  0%, 100% { 
    box-shadow: none;
  }
  50% { 
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
  }
}

/* 保存选项弹窗 */
.save-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 保存选项按钮 - 玻璃卡片风格 */
.save-option-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.save-option-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.1), transparent);
  transition: left 0.5s;
}

.save-option-btn:hover {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(0, 180, 216, 0.1));
  border-color: rgba(0, 217, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 217, 255, 0.15);
}

.save-option-btn:hover::before {
  left: 100%;
}

.save-option-btn:active {
  transform: translateY(0) scale(0.98);
}

.save-option-icon {
  font-size: 1.5rem;
}

.save-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.save-option-text strong {
  font-size: 1rem;
  color: var(--text-primary);
}

.save-option-text small {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

/* 移动端适配 */
@media (max-width: 640px) {
  .editor-preview-section {
    flex: 0 0 40%;
  }
  
  .chat-message {
    max-width: 95%;
  }
  
  .chat-bubble {
    font-size: 0.875rem;
    padding: 0.625rem 0.875rem;
  }
}

/* 横屏适配 */
@media (max-height: 500px) and (orientation: landscape) {
  .editor-preview-section {
    flex: 0 0 35%;
  }
  
  .editor-suggestions-section {
    padding: 0.5rem 1rem;
  }
  
  .editor-input-section {
    padding: 0.5rem 1rem;
  }
}