/**
 * 🏓 乒乓圈 (PingPong Circle) - 全屏幕响应式自适应现代移动端设计系统
 * 规范标准: iOS Human Interface Guidelines (HIG) + Android Material Design 3 (Material You)
 */

/* ==================== 1. 设计系统变量 (Design Tokens) ==================== */
:root {
  /* 基础字号与流式比例 */
  --pico-font-size: 100%;
  
  /* 品牌核心色彩 (Brand Palette) */
  --app-primary: #007aff;
  --app-primary-hover: #0062cc;
  --app-primary-subtle: #eff6ff;
  --app-primary-border: #bfdbfe;
  
  /* 辅助状态色 (Accent Palette) */
  --app-accent-green: #34c759;
  --app-accent-green-subtle: #f0fdf4;
  --app-accent-amber: #f59e0b;
  --app-accent-amber-subtle: #fffbeb;
  --app-accent-red: #ef4444;
  --app-accent-red-subtle: #fef2f2;

  /* 界面中性色彩 (Light Mode Surfaces) */
  --app-bg: #f2f2f7;
  --app-card-bg: #ffffff;
  --app-sheet-bg: #ffffff;
  --app-border: rgba(0, 0, 0, 0.07);
  --app-border-focus: #007aff;
  --app-text: #0f172a;
  --app-muted: #64748b;
  --app-input-bg: #f8fafc;
  --app-input-border: #cbd5e1;
  --app-tab-bg: rgba(255, 255, 255, 0.88);
  --app-tab-border: rgba(0, 0, 0, 0.08);

  /* 弥散阴影系统 (Bento Diffuse Shadows) */
  --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --app-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02);
  --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
  --app-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.16);

  /* 弹性阻尼缓动 */
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================== 2. 原生深色模式 (Dark Mode / Night Tournament) ==================== */
@media (prefers-color-scheme: dark) {
  :root {
    --app-primary: #0a84ff;
    --app-primary-hover: #409cff;
    --app-primary-subtle: rgba(10, 132, 255, 0.15);
    --app-primary-border: rgba(10, 132, 255, 0.3);

    --app-accent-green: #30d158;
    --app-accent-green-subtle: rgba(48, 209, 88, 0.15);
    --app-accent-amber: #fbbf24;
    --app-accent-amber-subtle: rgba(251, 191, 36, 0.15);
    --app-accent-red: #ff453a;
    --app-accent-red-subtle: rgba(255, 69, 58, 0.15);

    --app-bg: #000000;
    --app-card-bg: #1c1c1e;
    --app-sheet-bg: #1c1c1e;
    --app-border: rgba(255, 255, 255, 0.1);
    --app-border-focus: #0a84ff;
    --app-text: #f8fafc;
    --app-muted: #94a3b8;
    --app-input-bg: #2c2c2e;
    --app-input-border: #3a3a3c;
    --app-tab-bg: rgba(28, 28, 30, 0.88);
    --app-tab-border: rgba(255, 255, 255, 0.12);

    --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --app-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    --app-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.7);
  }

  body {
    background-color: var(--app-bg) !important;
    color: var(--app-text) !important;
  }

  /* 深色模式下的控件反色调和 */
  .native-card, .bottom-sheet, .auth-box {
    background: var(--app-card-bg) !important;
    color: var(--app-text) !important;
  }

  input[type="text"], input[type="password"], input[type="number"], input[type="date"], textarea, select {
    background-color: var(--app-input-bg) !important;
    border-color: var(--app-input-border) !important;
    color: var(--app-text) !important;
  }

  .quick-chip {
    background: #2c2c2e !important;
    color: #e2e8f0 !important;
    border-color: #3a3a3c !important;
  }

  .quick-chip.chip-primary {
    background: rgba(10, 132, 255, 0.2) !important;
    color: #60a5fa !important;
    border-color: rgba(10, 132, 255, 0.4) !important;
  }

  .quick-chip.chip-amber {
    background: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
  }

  .score-big {
    color: #f8fafc !important;
  }

  .segmented-control {
    background: #2c2c2e !important;
  }

  .seg-item input:checked + .seg-label {
    background: #3a3a3c !important;
    color: #ffffff !important;
  }

  .part-chip {
    background: #2c2c2e !important;
    color: #cbd5e1 !important;
  }

  .rank-item {
    border-bottom-color: #2c2c2e !important;
  }
}

/* ==================== 3. 基础全屏重置与安全区避让 ==================== */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  margin: 0;
  padding: 0;
  font-size: clamp(15px, 2.5vw, 16.5px);
  line-height: 1.5;
  
  /* 严格遵循全面屏手势与刘海安全区 */
  padding-top: max(0.5rem, env(safe-area-inset-top));
  padding-bottom: calc(85px + max(16px, env(safe-area-inset-bottom)));
  min-height: 100vh;
  min-height: -webkit-fill-available;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}

/* 响应式自适应容器 (弹性流式宽度) */
.app-container {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 3.5vw, 1.25rem);
}

/* ==================== 4. 沉浸式顶部 App Bar ==================== */
.mobile-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.2rem clamp(0.75rem, 2.5vw, 1.15rem);
}

.brand-title {
  font-size: clamp(1.4rem, 4.5vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.user-pill {
  background: var(--app-card-bg);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), background-color 0.15s;
}

.user-pill:active {
  transform: scale(0.95);
  background: rgba(0, 0, 0, 0.05);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-accent-green);
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.2);
  transition: background-color 0.2s;
}

/* ==================== 5. Bento 现代卡片设计系统 ==================== */
.native-card {
  background: var(--app-card-bg);
  border-radius: clamp(16px, 3.5vw, 22px);
  padding: clamp(0.95rem, 3vw, 1.25rem);
  margin-bottom: clamp(0.85rem, 2.5vw, 1.2rem);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-md);
  position: relative;
  overflow: visible;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s ease;
}

/* ==================== 6. 悬浮操作大按钮 (FAB) ==================== */
.fab-btn {
  position: fixed;
  right: max(1.15rem, env(safe-area-inset-right));
  bottom: calc(76px + max(16px, env(safe-area-inset-bottom)));
  background: linear-gradient(135deg, var(--app-primary), #0056b3);
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.8rem 1.45rem !important;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem) !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(0, 122, 255, 0.42);
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  min-height: 48px !important;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s ease !important;
}

.fab-btn:active {
  transform: scale(0.92) !important;
  box-shadow: 0 3px 12px rgba(0, 122, 255, 0.3) !important;
}

/* ==================== 7. 原生底部抽屉弹窗 (Bottom Sheet) ==================== */
.sheet-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.sheet-backdrop.active {
  display: flex;
}

.bottom-sheet {
  background: var(--app-sheet-bg);
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  border-radius: clamp(20px, 4.5vw, 28px) clamp(20px, 4.5vw, 28px) 0 0;
  padding: 0 clamp(1rem, 3.5vw, 1.5rem) calc(90px + max(20px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: slideUp 0.28s var(--ease-smooth) forwards;
  box-shadow: var(--app-shadow-sheet);
}

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

.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #cbd5e1;
  margin: 12px auto 16px;
  opacity: 0.8;
}

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

.sheet-title {
  font-size: clamp(1.15rem, 3.5vw, 1.35rem);
  font-weight: 800;
  margin: 0;
}

.sheet-close-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--app-muted) !important;
  cursor: pointer;
  padding: 0 !important;
  min-height: unset !important;
  transition: transform 0.15s ease;
}

.sheet-close-btn:active {
  transform: scale(0.9);
}

/* ==================== 8. 对战卡片与竞技对决 UI ==================== */
.match-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  font-weight: 600;
  color: var(--app-muted);
}

.match-arena {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem 0 0.85rem;
}

.player-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.player-avatar {
  width: clamp(48px, 12vw, 56px);
  height: clamp(48px, 12vw, 56px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  font-weight: 900;
  background: #e0f2fe;
  color: #0284c7;
  margin-bottom: 0.4rem;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
}

.player-avatar.opponent {
  background: #fef2f2;
  color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.player-name {
  font-size: clamp(0.95rem, 2.8vw, 1.1rem);
  font-weight: 800;
  color: var(--app-text);
  text-align: center;
  word-break: break-word;
}

.player-outcome {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-top: 0.35rem;
}

.outcome-win { background: #dcfce7; color: #15803d; }
.outcome-loss { background: #fee2e2; color: #b91c1c; }

.score-center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(0.5rem, 2vw, 0.95rem);
}

.score-big {
  font-size: clamp(1.9rem, 7vw, 2.5rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #0f172a;
  line-height: 1;
}

.format-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--app-muted);
  margin-top: 0.45rem;
}

/* ==================== 9. 触控大输入框与按钮规范 (Apple HIG / Material 3) ==================== */
label {
  font-size: clamp(0.88rem, 2.4vw, 0.96rem);
  font-weight: 700;
  color: var(--app-text);
  margin-bottom: 0.35rem;
  display: block;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
  font-size: 16px !important; /* 强制 16px 彻底消除 iOS Safari 软键盘聚焦缩放 */
  min-height: 48px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--app-input-border) !important;
  background-color: var(--app-input-bg) !important;
  color: var(--app-text) !important;
  padding: 10px 14px !important;
  margin-bottom: 0.65rem !important;
  width: 100%;
  line-height: 1.4;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

input:focus, textarea:focus, select:focus {
  background-color: var(--app-card-bg) !important;
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px var(--app-primary-subtle) !important;
  outline: none;
}

/* 原生按钮大触控区 */
button, [role="button"], input[type="submit"] {
  min-height: 48px !important;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem) !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  padding: 0.75rem 1.25rem !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s var(--ease-spring), opacity 0.12s ease;
}

button:active, [role="button"]:active {
  transform: scale(0.96) !important;
}

/* 分段控制器 (Segmented Controls) */
.segmented-control {
  display: flex;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 4px;
  user-select: none;
  margin-bottom: 0.9rem;
  min-height: 46px;
}

.seg-item { flex: 1; margin: 0; cursor: pointer; }
.seg-item input { display: none !important; }
.seg-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: clamp(0.85rem, 2.4vw, 0.95rem);
  font-weight: 600;
  color: var(--app-muted);
  transition: all 0.2s var(--ease-smooth);
  text-align: center;
  min-height: 38px;
}

.seg-item input:checked + .seg-label {
  background: var(--app-card-bg);
  color: var(--app-primary);
  font-weight: 800;
  box-shadow: var(--app-shadow-sm);
}

/* ==================== 10. 免打字点选气泡体系 (全景自适应流式平铺) ==================== */
.chips-scroll-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap; /* 💡 自动换行全景展开，绝不产生隐藏与右侧溢出截断 */
  padding: 0.2rem 0 0.55rem 0;
  margin-bottom: 0.65rem;
  overflow: visible;
}

.chips-scroll-row::-webkit-scrollbar { display: none; }

.quick-chip {
  display: inline-flex;
  align-items: center;
  white-space: normal;
  word-break: break-word;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  font-weight: 600;
  background: var(--app-card-bg);
  color: var(--app-text);
  border: 1px solid var(--app-border);
  cursor: pointer;
  min-height: 36px;
  box-shadow: var(--app-shadow-sm);
  line-height: 1.25;
  transition: transform 0.12s var(--ease-spring), background-color 0.15s;
}

.quick-chip:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.08);
}

.quick-chip.chip-primary {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.quick-chip.chip-amber {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

/* ==================== 11. 底部原生加高 Tab 导航栏 ==================== */
.bottom-tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(64px + max(12px, env(safe-area-inset-bottom)));
  background: var(--app-tab-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--app-tab-border);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 6px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}

.b-tab-btn {
  background: none !important;
  border: none !important;
  padding: 3px 2px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--app-muted) !important;
  cursor: pointer;
  flex: 1;
  height: 48px;
  min-height: unset !important;
  transition: transform 0.12s var(--ease-spring);
}

.b-tab-btn:active { transform: scale(0.9) !important; }
.b-tab-icon { font-size: clamp(1.25rem, 3.8vw, 1.45rem); line-height: 1.1; display: block; }
.b-tab-title { font-size: clamp(0.68rem, 2vw, 0.76rem); font-weight: 600; margin-top: 2px; white-space: nowrap; }
.b-tab-btn.active { color: var(--app-primary) !important; }
.b-tab-btn.active .b-tab-title { font-weight: 800; }

.tab-view { display: none; }
.tab-view.active { display: block; animation: fadeIn 0.18s ease-out; }

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

/* ==================== 12. 极窄屏响应式微调 (<= 360px 如 iPhone SE) ==================== */
@media (max-width: 360px) {
  .brand-title { font-size: 1.3rem; }
  .user-pill { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
  .native-card { padding: 0.85rem; border-radius: 14px; }
  .fab-btn { padding: 0.7rem 1.15rem !important; font-size: 0.9rem !important; }
  .score-big { font-size: 1.7rem; }
}

/* ==================== 13. Toast 状态微通知与段位标签 ==================== */
#app-toast {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.34, 1.45, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

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

.elo-tier-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.tier-king { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tier-master { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.tier-pro { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.tier-rookie { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.tactical-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  display: inline-block;
  margin-top: 0.2rem;
}