/* 斗词场 · 公共组件样式（简洁科技风）
 * 只放跨视图复用的原子类与外壳布局；视图专有样式写在 js/views/<name>.css。
 * 动效统一使用 tokens 里的 --tr-* / --dur-*，保持平滑一致。
 */

/* ---------- 外壳 ---------- */
.stage {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--g-bg);
  background-attachment: fixed;
}
.phone {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  max-height: 920px;
  background:
    var(--g-grid) 0 0 / 34px 34px,
    var(--g-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
@media (min-width: 500px) and (min-height: 700px) {
  .stage { padding: 22px 0; }
  .phone {
    height: min(880px, calc(100dvh - 44px));
    border-radius: 32px;
    border: 1px solid var(--c-line-strong);
    box-shadow: var(--sh-2), 0 0 80px rgba(56, 189, 248, .10);
  }
  .phone__notch {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 88px; height: 4px; border-radius: 999px;
    background: var(--c-surface-3); z-index: 30; pointer-events: none;
  }
}

/* ---------- iOS 实机（「添加到主屏幕」后全屏运行）----------
 * 1) 真机上不要那层"手机壳"：占满整屏、去掉圆角与描边
 * 2) 用 safe-area 让内容避开刘海与底部小横条
 * 3) 关掉长按选中 / 双击缩放带来的"网页感"，更像原生 App
 */
@media (max-width: 499px) {
  .stage { padding: 0; background: var(--g-bg); }
  .phone {
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .phone__notch { display: none; }
  .view {
    padding-top: env(safe-area-inset-top, 0px);
    scroll-padding-top: env(safe-area-inset-top, 0px);
  }
  .tabbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    height: auto;
  }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* 独立运行（已添加到主屏幕）时，连 440px 的桌面预览壳也一并去掉 */
@media (display-mode: standalone) {
  .stage { padding: 0; }
  .phone { border: 0; border-radius: 0; box-shadow: none; max-height: none; height: 100dvh; }
  .phone__notch { display: none; }
}

/* 触屏设备去掉 tap 高亮，避免 iOS 上点一下闪一块灰 */
html { -webkit-tap-highlight-color: transparent; }
body { -webkit-text-size-adjust: 100%; }
.phone { -webkit-user-select: none; user-select: none; }
.phone input, .phone textarea, .phone [contenteditable] { -webkit-user-select: text; user-select: text; }

.view {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.view::-webkit-scrollbar { width: 0; height: 0; }

/* 视图切换入场（平滑，不干扰布局） */
.view > .page { animation: pageIn var(--dur-3) var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 顶部栏（玻璃） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--top-h);
  padding: 0 var(--s-4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .72) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--c-line);
}
.topbar__back {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  transition: background var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
}
.topbar__back:hover { background: var(--c-glass); color: var(--c-text); }
.topbar__back:active { transform: scale(.92); }
.topbar__title { font-size: var(--f-lg); font-weight: 700; letter-spacing: .6px; }
.topbar__spacer { flex: 1 1 auto; }

/* ---------- 底部导航 ---------- */
.tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--c-line);
  z-index: var(--z-tab);
}
.tabbar[hidden] { display: none; }
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: var(--f-xs);
  letter-spacing: .4px;
  color: var(--c-text-3);
  transition: color var(--tr-base), transform var(--tr-fast);
}
.tab__ico { width: 21px; height: 21px; transition: transform var(--tr-base), filter var(--tr-base); }
.tab.is-active { color: var(--c-primary); }
.tab.is-active .tab__ico { transform: translateY(-1px); filter: drop-shadow(0 0 9px rgba(94, 234, 212, .55)); }
.tab.is-active::after {
  content: ''; position: absolute; top: 4px;
  width: 22px; height: 2px; border-radius: 999px;
  background: var(--g-primary);
  box-shadow: 0 0 10px rgba(94, 234, 212, .7);
  animation: tabIn var(--dur-3) var(--ease-out) both;
}
@keyframes tabIn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
.tab:active { transform: scale(.93); }

/* ---------- 页面 / 卡片 ---------- */
.page { padding: var(--s-4) var(--s-4) var(--s-7); }
.card {
  position: relative;
  background: var(--c-surface);
  background-image: var(--g-glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--sh-1);
  backdrop-filter: blur(10px);
  transition: border-color var(--tr-base), transform var(--tr-base), box-shadow var(--tr-base);
}
.card + .card { margin-top: var(--s-3); }
.card__title {
  font-size: var(--f-md); font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.card__title::before {
  content: ''; width: 3px; height: 14px; border-radius: 999px;
  background: var(--g-primary);
  box-shadow: 0 0 8px rgba(94, 234, 212, .6);
}
.muted { color: var(--c-text-3); }
.muted-2 { color: var(--c-text-2); }
.tiny { font-size: var(--f-xs); }
.small { font-size: var(--f-sm); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* 浅底上直接当文字用的强调色，统一走 -ink 深色版本 */
.u-ok { color: var(--c-ok-ink); }
.u-danger { color: var(--c-danger-ink); }
.u-warn { color: var(--c-gold-ink); }
.u-primary { color: var(--c-primary-ink); }
.u-violet { color: var(--c-violet-ink); }

/* ---------- 按钮 ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--f-md); font-weight: 700;
  letter-spacing: .4px;
  background: var(--c-surface-2);
  color: var(--c-text);
  border: 1px solid var(--c-line);
  overflow: hidden;
  transition: transform var(--tr-fast), filter var(--tr-base), opacity var(--tr-base),
              box-shadow var(--tr-base), background var(--tr-base);
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.975); }
.btn--primary {
  background: var(--g-primary);
  /* 青蓝深色渐变上必须用白字，不能用 --c-primary-ink（那是给浅底文字用的深色） */
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--glow-primary);
  text-shadow: 0 1px 2px rgba(6, 40, 70, .18);
}
.btn--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-120%);
}
.btn--primary:hover::after { animation: sheen 900ms var(--ease-out); }
@keyframes sheen { to { transform: translateX(120%); } }
.btn--ghost { background: var(--c-glass); }
.btn--danger { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); border-color: transparent; color: #fff; }
.btn--gold { background: var(--g-gold); color: #3a2600; border-color: transparent; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 34px; font-size: var(--f-sm); padding: 0 var(--s-4); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- 标签 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--f-xs); font-weight: 600;
  letter-spacing: .3px;
  background: var(--c-glass);
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
  transition: border-color var(--tr-base), color var(--tr-base), background var(--tr-base);
}
.chip--peer { background: rgba(37, 99, 235, .10); color: var(--c-peer-ink); border-color: rgba(37, 99, 235, .26); }
.chip--rival { background: rgba(249, 115, 22, .12); color: var(--c-rival-ink); border-color: rgba(249, 115, 22, .28); }
.chip--gold { background: rgba(245, 158, 11, .14); color: var(--c-gold-ink); border-color: rgba(245, 158, 11, .30); }
.chip--ok { background: rgba(22, 163, 74, .12); color: var(--c-ok-ink); border-color: rgba(22, 163, 74, .28); }
.chip--danger { background: rgba(220, 38, 38, .10); color: var(--c-danger-ink); border-color: rgba(220, 38, 38, .26); }
.chip--primary { background: rgba(20, 184, 166, .12); color: var(--c-primary-ink); border-color: rgba(20, 184, 166, .30); }
.chip--violet { background: rgba(124, 92, 255, .12); color: var(--c-violet-ink); border-color: rgba(124, 92, 255, .28); }

/* ---------- 进度条 ---------- */
.bar { height: 7px; border-radius: var(--r-pill); background: var(--c-surface-3); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: inherit;
  transition: width var(--dur-3) var(--ease-out);
}
.bar--peer .bar__fill { background: var(--g-peer); box-shadow: var(--glow-peer); }
.bar--rival .bar__fill { background: var(--g-rival); box-shadow: var(--glow-rival); }

.divider { height: 1px; background: var(--c-line); margin: var(--s-3) 0; }

.empty {
  padding: var(--s-7) var(--s-4);
  text-align: center;
  color: var(--c-text-3);
  font-size: var(--f-sm);
  line-height: 1.9;
}

/* ---------- 遮罩 / 弹层 ---------- */
.overlay {
  position: absolute; inset: 0; z-index: var(--z-overlay);
  background: rgba(15, 23, 42, .38);
  backdrop-filter: blur(9px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  animation: fadeIn var(--dur-2) var(--ease-out);
}
.modal {
  width: 100%;
  max-width: 350px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--sh-2);
  animation: popIn var(--dur-4) var(--ease-spring);
}
.modal__title { font-size: var(--f-lg); font-weight: 800; margin-bottom: var(--s-3); letter-spacing: .4px; }
.modal__actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.modal__actions .btn { flex: 1 1 0; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(10px) } to { opacity: 1; transform: none } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.rise { animation: riseIn var(--dur-3) var(--ease-out) both; }

/* 列表逐项入场 */
.stagger > * { animation: riseIn var(--dur-3) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(7) { animation-delay: 240ms; }
.stagger > *:nth-child(8) { animation-delay: 280ms; }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; bottom: calc(var(--tab-h) + 22px);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: 84%;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
  font-size: var(--f-sm);
  box-shadow: var(--sh-2);
  animation: riseIn var(--dur-2) var(--ease-out) both;
  text-align: center;
  backdrop-filter: blur(10px);
}
.toast.is-out { animation: toastOut var(--dur-2) var(--ease-in-out) both; }
@keyframes toastOut { to { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- 段位徽章 ---------- */
.rank-badge {
  --badge: var(--c-primary);
  position: relative;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), transparent 62%), var(--badge);
  color: #12233a;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(16, 24, 40, .16), inset 0 0 0 2px rgba(255, 255, 255, .55);
  flex: 0 0 auto;
  transition: transform var(--tr-spring);
}
.rank-badge--lg { width: 74px; height: 74px; font-size: 25px; }
.rank-badge--md { width: 50px; height: 50px; font-size: 17px; }
.rank-badge--sm { width: 32px; height: 32px; font-size: 12px; }
.rank-badge__sub {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 20px; height: 20px; padding: 0 4px;
  border-radius: var(--r-pill);
  background: #ffffff; color: var(--c-text);
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  border: 1px solid var(--c-line-strong);
}

/* ---------- 音频按钮 ---------- */
.speaker {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--g-primary);
  color: var(--c-primary-ink);
  box-shadow: var(--glow-primary);
  flex: 0 0 auto;
  transition: transform var(--tr-fast), filter var(--tr-base);
}
.speaker:active { transform: scale(.94); }
.speaker.is-playing { animation: pulse 1.1s var(--ease-in-out) infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.07) } }

/* ---------- 环形进度（倒计时） ---------- */
.ring { transform: rotate(-90deg); }
.ring__track { stroke: var(--c-surface-3); }
.ring__bar { transition: stroke-dashoffset 120ms linear, stroke var(--tr-base); stroke-linecap: round; }