/* ==================================================================
   水果对对碰 · 样式表（奶白蜜桃奶油风主题）
   设计要点：
   1. 奶杏白 → 极淡蜜桃粉背景 + 纯白瓷面板，干净、轻盈、微立体、女性向；
   2. 所有页面共享同一套 token：背景渐变 / 主按钮渐变 / 输入框 /
      浮层圆角与阴影 / 字体层级全部由 :root 变量统一驱动；
   3. 棋盘用 CSS Grid + aspect-ratio + 容器查询，桌面与手机自动缩放；
   4. 翻牌 3D 翻转 240ms、消除缩放淡出 420ms，节奏与服务端常量一致。
   ================================================================== */

:root {
  /* ---- 背景：奶杏白 → 极淡蜜桃粉（竖向柔和渐变） ---- */
  --bg-1: #fff5f7;   /* 渐变末端：极淡蜜桃粉 */
  --bg-2: #fffbfa;   /* 中间过渡：奶杏 */
  --bg-3: #fff9f5;   /* 渐变起点：奶杏白 */

  /* ---- 文字：深棕灰 / 浅棕灰 ---- */
  --ink: #4a3e45;
  --ink-dim: #8c7a82;

  /* ---- 线与浮层：极浅粉描边，细且淡 ---- */
  --line: #ffe6ea;
  --line-soft: rgba(255, 230, 234, 0.6);
  --glass: rgba(255, 255, 255, 0.96);
  --panel: #ffffff;

  /* ---- 品牌色：蜜桃粉渐变（提饱和、去灰调，果冻通透） ---- */
  --brand: #ff8fae;          /* 主色 / 数字强调 */
  --brand-lit: #ffc2d8;      /* 顶部高光端 */
  --brand-2: #f06d97;        /* 深一档：active / 焦点环 / 滑块 */
  --brand-grad: linear-gradient(180deg, #ffc2d8 0%, #ff9dbd 40%, #ff8fae 70%, #ff7fa4 100%);
  --brand-grad-press: linear-gradient(180deg, #ff9dbd 0%, #ff7fa4 58%, #ee6b93 100%);
  --brand-ring: rgba(255, 110, 158, 0.28);

  /* ---- 功能色 ---- */
  --good: #ffe3a8;   /* 成功 / 匹配提示：奶油黄 */
  --warn: #ffb366;   /* 警告 / 时间提示：柔和橙 */
  --bad: #ff8a80;    /* 失败提示：柔和珊瑚红（不再用竞技红） */
  --mint: #5ed8b8;   /* 倒计时数字：参考图中青绿色 */
  --mint-soft: rgba(94, 216, 184, 0.14);

  /* ---- 统一圆角与阴影：轻量微立体白瓷（柔投影 + 顶部细高光） ---- */
  --radius: 16px;
  --radius-lg: 20px;
  --shadow-soft: 0 6px 18px rgba(255, 143, 171, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-float: 0 14px 36px rgba(255, 143, 171, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85);

  --cols: 8;
  --gap: clamp(3px, 0.7vmin, 8px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* 底层渐变放在 html 上，body 上的装饰图案才能叠在它上面 */
html {
  background: linear-gradient(165deg, var(--bg-3) 0%, var(--bg-2) 55%, var(--bg-1) 100%) fixed;
}

body {
  font-family: "PingFang SC", "Yuanti SC", "YouYuan", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  /* 仅在空白区域加极淡柔光与细碎光斑，不做明显图案，装饰透明度极低 */
  background-image:
    radial-gradient(80rem 40rem at 50% -5%, rgba(255, 235, 240, 0.55) 0%, rgba(255, 235, 240, 0) 55%),
    radial-gradient(60rem 34rem at -5% 105%, rgba(255, 230, 236, 0.18) 0%, rgba(255, 230, 236, 0) 55%),
    radial-gradient(40rem 26rem at 105% 65%, rgba(255, 245, 235, 0.12) 0%, rgba(255, 245, 235, 0) 55%);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

button {
  font-family: inherit;
  color: inherit;
}

/* 全局键盘焦点环：所有可交互元素统一 */
:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 通用隐藏类：任何元素加上 hidden 都应立刻消失。
   注：早期的 banner/countdown/modal 用的是「.xxx.hidden」特定规则，
   新加的 invite-hint / join-error 依赖这条通用规则才能隐藏。 */
.hidden {
  display: none !important;
}

/* ============ 屏幕切换 ============ */
.screen {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.screen.active {
  display: block;
}

/* ============ 首页 ============ */
#screen-home.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

.home-card {
  width: min(100%, 420px);
  padding: 26px 22px 20px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
}

.logo {
  margin: 0 0 6px;
  font-size: 25px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.5px;
  color: var(--brand-2);
}

.sub {
  margin: 0 0 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--ink-dim);
}

.input {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 3px rgba(255, 202, 214, 0.25),
    0 2px 6px rgba(255, 143, 171, 0.06);
}

.input::placeholder {
  color: #c9aebb;
}

.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #d9a8b8 50%),
    linear-gradient(135deg, #d9a8b8 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.code-input {
  text-align: center;
  font-size: 28px;
  letter-spacing: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 16px;
  padding: 4px;
  background: #fff0f5;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.tab {
  flex: 1;
  padding: 10px 0;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tab.active {
  background: #ffffff;
  border-color: var(--line);
  color: var(--brand-2);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 138, 162, 0.18);
}

.pane {
  display: none;
}

.pane.active {
  display: block;
}

/* 次要按钮：白底浅粉描边 */
/* 次要按钮：白瓷果冻——纯白到极浅粉的渐变 + 顶部高光 + 轻投影 */
.btn {
  padding: 12px 18px;
  font-size: 16px;
  color: var(--ink);
  border: 1px solid rgba(255, 179, 198, 0.6);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  box-shadow: 0 4px 10px rgba(255, 143, 171, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 5px rgba(255, 202, 214, 0.4);
  cursor: pointer;
  transition: transform 0.12s, filter 0.2s, opacity 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn:hover {
  border-color: var(--brand-2);
  box-shadow: 0 6px 14px rgba(255, 143, 171, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 5px rgba(255, 202, 214, 0.45);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  opacity: 0.5;
  filter: saturate(0.7);
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 6px rgba(255, 143, 171, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 主按钮 / 强调按钮：果冻质感——上亮下暗渐变 + 顶部弧形高光 +
   内外阴影叠加 + 半透明描边；默认 / 悬停 / 按下 / 禁用 同一套配色 */
.btn.primary,
.mini.highlight,
.btn-login-main {
  position: relative;
  /* 描边置空：半透明白描边在白色弹窗底上会显成一圈多余的白线 */
  border-color: transparent;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(214, 58, 108, 0.35);
  box-shadow: 0 6px 14px rgba(255, 110, 158, 0.32), 0 2px 4px rgba(255, 110, 158, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -3px 7px rgba(226, 60, 112, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* 顶部弧形高光层已移除：这层半透明白渐变在果冻底色上会显出一条亮带边界（用户看到的「白线」），
   且默认/悬停/按下/禁用各状态都带着它。果冻感改由上亮下暗渐变 + inset 顶部高光 + 内圈微光边承担。 */

/* 悬停：微微上浮、更鲜亮 */
.btn.primary:hover,
.mini.highlight:hover,
.btn-login-main:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 10px 20px rgba(255, 110, 158, 0.36), 0 3px 6px rgba(255, 110, 158, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -3px 7px rgba(226, 60, 112, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

/* 按下：下沉、内阴影加深，保持同色系 */
.btn.primary:active,
.mini.highlight:active,
.btn-login-main:active {
  transform: translateY(1px) scale(0.995);
  background: var(--brand-grad-press);
  box-shadow: 0 3px 8px rgba(255, 110, 158, 0.3), inset 0 2px 6px rgba(198, 38, 90, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* 禁用：质感与配色不变，仅降低饱和与明度 */
.btn.primary:disabled,
.mini.highlight:disabled,
.btn-login-main:disabled {
  transform: none;
  filter: saturate(0.72) brightness(1.02);
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: 0 3px 8px rgba(255, 110, 158, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(226, 60, 112, 0.2);
}

.btn.block {
  display: block;
  width: 100%;
  margin-top: 4px;
}

/* 小按钮：白底浅粉描边，与 .btn 同语言 */
.mini {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.15s;
}

.mini:hover {
  background: #fff0f5;
}

.mini.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.tips {
  margin: 16px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-dim);
}

/* ============ 对局页 ============ */
#screen-game.active {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.room-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room-label {
  font-size: 12px;
  color: var(--ink-dim);
}

.room-code {
  font-size: 20px;
  letter-spacing: 4px;
  font-weight: 800;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(255, 143, 171, 0.55);
  transition: background 0.2s, box-shadow 0.2s;
}

.conn-dot.off {
  background: var(--bad);
  box-shadow: 0 0 8px rgba(255, 138, 128, 0.7);
}

.conn-dot.wait {
  background: var(--warn);
  box-shadow: 0 0 8px rgba(255, 179, 102, 0.7);
}

/* 横幅提示 */
.banner {
  margin: 8px 14px 0;
  padding: 9px 14px;
  font-size: 13px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 227, 168, 0.28);
  border: 1px solid rgba(255, 205, 140, 0.5);
  color: #8a6430;
  font-weight: 600;
}

.banner.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.banner.hidden {
  display: none;
}

.banner.bad {
  background: rgba(255, 138, 128, 0.16);
  border-color: rgba(255, 138, 128, 0.45);
  color: #c05a52;
}

/* 玩家面板 */
.players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px 4px;
}

.player {
  flex: 1 1 0;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.player.active {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 2px rgba(255, 143, 171, 0.4), 0 10px 22px rgba(255, 143, 171, 0.2);
  transform: translateY(-2px);
}

.player.left {
  opacity: 0.5;
}

.p-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%);
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(255, 143, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(255, 202, 214, 0.25);
}

.p-main {
  flex: 1 1 auto;
  min-width: 0;
}

.p-name {
  display: flex;
  align-items: baseline;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}

/* 昵称本体：可被 ellipsis 截断；「（你）」拆在 .p-name-me 里，永不被切半 */
.p-name-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-name-me {
  flex: 0 0 auto;
  white-space: nowrap;
}

.p-tag {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-score {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
  color: var(--brand-2);
}

.p-score.bump {
  animation: scoreBump 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes scoreBump {
  0% { transform: scale(1); color: var(--brand-2); }
  35% { transform: scale(1.55); color: var(--good); }
  100% { transform: scale(1); color: var(--brand-2); }
}

/* 对手（player-1）镜像布局：以 VS 为中心左右对称——
   积分紧邻 VS 一侧，头像放到整栏最右边 */
#player-1 {
  flex-direction: row-reverse;
}

#player-1 .p-main {
  text-align: right;
}

#player-1 .p-score {
  text-align: left;
}

.vs {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  border-radius: 999px;
  background: var(--brand-grad);
  text-shadow: 0 1px 1px rgba(214, 58, 108, 0.25);
  box-shadow: 0 2px 5px rgba(255, 110, 158, 0.2);
}

/* 阶段条 + 倒计时 */
.phase-bar {
  position: relative;
  margin: 10px 14px 6px;
  padding: 10px 14px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.phase-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.phase-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
}

.phase-extra {
  font-size: 12px;
  color: var(--ink-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.countdown.hidden {
  display: none;
}

.cd-num {
  font-size: 46px;
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--mint);
  transition: color 0.2s;
  text-shadow: 0 2px 6px rgba(94, 216, 184, 0.18);
}

.cd-unit {
  font-size: 12px;
  color: var(--ink-dim);
}

.countdown.danger .cd-num {
  color: #ff7a45;
  animation: blink 0.6s steps(1, end) infinite;
}

.countdown.danger .cd-unit {
  color: #ff7a45;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

/* 倒计时暂停（对手离线）：不再闪烁，改用警示色提示 */
.countdown.paused .cd-num {
  color: var(--warn);
  animation: none;
  opacity: 1;
}

.cd-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255, 230, 234, 0.55);
}

.cd-track.hidden {
  display: none;
}

.cd-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #5ed8b8 0%, #b8e986 50%, #ffe3a8 100%);
  transition: width 0.2s linear, background 0.3s;
}

.cd-bar.danger {
  background: linear-gradient(90deg, #ffb366 0%, #ff8a7a 100%);
}

/* ============ 棋盘 ============ */
.board-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 14px 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 1fr;
  gap: var(--gap);
  width: min(96vw, 56vh, 600px);
  aspect-ratio: 1 / 1;
  padding: clamp(4px, 1.2vmin, 10px);
  margin: 0 auto;
  /* 棋盘托盘：比页面背景更明确的一层浅奶咖凹槽，
     一方面与背景拉开区分，另一方面给白色棋格一个「下沉」的立体基准 */
  background: linear-gradient(180deg, #f8e8e4 0%, #fdf2f0 55%, #fff9f8 100%);
  border-radius: 22px;
  box-shadow: inset 0 2px 8px rgba(198, 120, 130, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 8px 20px rgba(198, 120, 130, 0.1);
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  perspective: 800px;
  touch-action: manipulation;
  /* 移动端去掉点击时的灰色高亮块，点击反馈更干脆 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* 240ms：既看得出翻面过程，又不会让点击后等半天才有反馈 */
  transition: transform 240ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: clamp(10px, 2vmin, 20px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
  line-height: 1;
}

/* 牌背：白瓷卡背——纯白基底 + 极淡同色系爱心暗纹（不明显，保持干净） */
.card-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23f0c9d4' fill-opacity='0.22'%3E%3Cpath d='M10 12c-1.5-1.8-4.4-1.1-4.4 1.3 0 1.7 2.1 3.2 4.4 4.8 2.3-1.6 4.4-3.1 4.4-4.8 0-2.4-2.9-3.1-4.4-1.3z'/%3E%3Ccircle cx='31' cy='9' r='1.6'/%3E%3Cpath d='M28 30c-1.2-1.4-3.5-0.9-3.5 1 0 1.4 1.7 2.6 3.5 3.8 1.8-1.2 3.5-2.4 3.5-3.8 0-1.9-2.3-2.4-3.5-1z'/%3E%3Ccircle cx='9' cy='31' r='1.4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff 0%, #fffaf8 55%, #fff5f1 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #e8b6c4;
  font-weight: 800;
  /* 棋格立体：外投影悬浮 + 顶部高光 + 底部内暗 */
  box-shadow: 0 5px 12px rgba(198, 120, 130, 0.16), 0 2px 3px rgba(198, 120, 130, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -3px 6px rgba(198, 120, 130, 0.16);
}

.card-back::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1.5px dashed rgba(255, 168, 190, 0.3);
  border-radius: inherit;
}

/* 牌面：纯白瓷面 + 几乎不可见的浅粉描边 + 轻量微立体 */
.card-front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, #ffffff 0%, #fffafa 55%, #fff6f2 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  /* 翻开后浮起更高：投影更深、高光更亮，与未翻开的棋格形成明暗层次 */
  box-shadow: 0 7px 16px rgba(198, 120, 130, 0.18), 0 2px 4px rgba(198, 120, 130, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -3px 6px rgba(198, 120, 130, 0.14);
}

/* 牌面 emoji 随棋盘尺寸自适应（只作用于正面，避免影响牌背的问号） */
.board[data-size="4"] .card-front {
  font-size: clamp(26px, 7.5vmin, 62px);
}

.board[data-size="6"] .card-front {
  font-size: clamp(18px, 5vmin, 44px);
}

.board[data-size="8"] .card-front {
  font-size: clamp(14px, 3.6vmin, 34px);
}

.card-back {
  font-size: clamp(11px, 2.4vmin, 22px);
}

/* 消除动画：先放大再缩没 */
.card.matched {
  animation: cardRemove 420ms ease forwards;
  pointer-events: none;
}

@keyframes cardRemove {
  0% { transform: scale(1); opacity: 1; }
  35% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* 非法点击：轻微抖动提示 */
.card.shake {
  animation: cardShake 320ms ease;
}

@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* 新一局棋盘入场：只动棋盘这一个元素。
   之前是 64 张牌各自跑 scale+opacity，8×8 时一开局必卡一下；
   改成整体淡入上浮，视觉观感相近，代价只有一次合成。 */
.board.new-round {
  animation: boardIn 320ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

@keyframes boardIn {
  0% { transform: translateY(8px) scale(0.985); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 等待对手时棋盘略微变淡 */
.board.waiting {
  opacity: 0.55;
}

/* 非本人回合：光标提示不可点击 */
.board.blocked .card {
  cursor: not-allowed;
}

/* 本回合已翻开、等待配对的牌：蜜桃粉高亮，提示"还有一张要翻" */
.board.playing .card.flipped:not(.matched) .card-front {
  box-shadow: 0 0 0 2px rgba(255, 110, 158, 0.8), 0 8px 18px rgba(255, 110, 158, 0.32);
}

/* ============ 升级版：炸弹 ============ */

/* 创建页难度选项下方的说明 */
.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-dim);
}

.field-hint.warn {
  color: #b4462f;
}

/* 房间页炸弹状态条：只提示「有没有」，绝不提示「在哪」 */
.bomb-badge {
  margin: 8px auto 0;
  padding: 6px 14px;
  width: fit-content;
  max-width: 92vw;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #8a4a2f;
  background: rgba(255, 236, 214, 0.9);
  border: 1px solid rgba(230, 162, 60, 0.45);
}

.bomb-badge.armed {
  color: #a3231f;
  background: rgba(255, 226, 226, 0.92);
  border-color: rgba(226, 78, 78, 0.5);
  animation: bombPulse 1.6s ease-in-out infinite;
}

.bomb-badge.defused {
  color: #4b7a52;
  background: rgba(228, 245, 231, 0.92);
  border-color: rgba(96, 168, 112, 0.45);
}

@keyframes bombPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 78, 78, 0); }
  50% { box-shadow: 0 0 0 6px rgba(226, 78, 78, 0.12); }
}

/* 炸弹牌本体：翻开后是 💣，加一圈红光圈 */
.card.bomb .card-front {
  box-shadow: 0 0 0 3px rgba(226, 78, 78, 0.85), 0 10px 24px rgba(226, 78, 78, 0.4);
}

/* 被收回的牌：洗牌抖动（与翻回背面的 CSS 过渡叠加，观感就是「被打乱了」）
   只动 .card 自身的 transform，不碰 .card-inner 的 rotateY，两者互不干扰。 */
.card.reshuffling {
  animation: cardReshuffle 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes cardReshuffle {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(-6px, 2px) rotate(-4deg) scale(1.04); }
  50% { transform: translate(6px, -2px) rotate(4deg) scale(1.04); }
  75% { transform: translate(-3px, 1px) rotate(-2deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* 踩雷瞬间整块棋盘震动一下 */
.board.boom {
  animation: boardBoom 900ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes boardBoom {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-7px, 3px); }
  25% { transform: translate(7px, -3px); }
  40% { transform: translate(-5px, -2px); }
  55% { transform: translate(5px, 2px); }
  70% { transform: translate(-2px, 1px); }
  85% { transform: translate(2px, -1px); }
}

/* 踩雷全屏提示：只盖一层，不拦截任何点击 */
.bomb-flash {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 76, 76, 0.28), rgba(120, 12, 12, 0.42));
  animation: flashIn 220ms ease-out;
}

@keyframes flashIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bomb-flash-card {
  padding: 20px 26px;
  border-radius: 22px;
  text-align: center;
  color: #fff;
  background: rgba(38, 12, 12, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  animation: flashCardIn 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes flashCardIn {
  from { transform: scale(0.86); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.bomb-flash-emoji {
  font-size: 56px;
  line-height: 1.1;
}

.bomb-flash-title {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
}

.bomb-flash-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

/* 微信内置浏览器里的转发引导 */
.wechat-tip {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(7, 193, 96, 0.08);
  border: 1px solid rgba(7, 193, 96, 0.3);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.wechat-tip b {
  color: #07c160;
  font-size: 15px;
}

/* ============ 提示 Toast ============ */
.toast-wrap {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  max-width: 86vw;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(255, 138, 162, 0.3);
  animation: toastIn 0.24s ease;
}

.toast.error {
  background: #fff1f0;
  border-color: rgba(255, 138, 128, 0.5);
  color: #c05a52;
}

.toast.success {
  background: #fff4dd;
  border-color: rgba(255, 205, 140, 0.55);
  color: #8a6430;
}

.toast.out {
  animation: toastOut 0.28s ease forwards;
}

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

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

/* ============ 结算弹窗 ============ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 240, 243, 0.65);
  backdrop-filter: blur(6px);
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(100%, 380px);
  padding: 26px 22px 20px;
  text-align: center;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  animation: modalIn 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}

@keyframes modalIn {
  from { transform: scale(0.86) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.modal-emoji {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 6px;
}

.modal-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: var(--brand-2);
}

.modal-score {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

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

.modal-tip {
  margin: 12px 0 0;
  min-height: 16px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* ============ 手机适配 ============ */
@media (max-width: 560px) {
  .logo { font-size: 21px; }
  .home-card { padding: 20px 16px 16px; }
  .board { width: min(96vw, 52vh, 600px); }
  .player { padding: 7px 9px; gap: 7px; }
  .p-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 18px; }
  .p-score { font-size: 22px; }
  .cd-num { font-size: 40px; }
  .phase-title { font-size: 14px; }
}

/* ============ 声音开关 ============ */

/* 首页的声音开关（与顶栏那个共用同一份状态） */
.sound-row {
  margin: 0 0 14px;
  text-align: center;
}

.sound-row .mini {
  padding: 7px 14px;
  font-size: 13px;
}

/* 关掉时按钮变淡，一眼能看出当前状态 */
.mini.muted {
  opacity: 0.55;
}

/* ============ 账号区（匿名 / 邮箱登录） ============ */

.account-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.acct-badge {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff0f5;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-panel {
  margin-top: 4px;
}

.acct-line {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ink-dim);
  border-bottom: 1px dashed var(--line);
  word-break: break-all;
}

.acct-line b {
  color: var(--ink);
  font-weight: 600;
}

.acct-stats {
  margin: 12px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 227, 168, 0.2);
  border: 1px solid rgba(255, 179, 102, 0.35);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

/* 表单里的错误提示（邮箱格式 / 密码太短 / 密码错误等） */
.err-line {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 138, 128, 0.1);
  border: 1px solid rgba(255, 138, 128, 0.35);
  color: #c05a52;
  font-size: 13px;
  line-height: 1.5;
}

/* ============ 音量面板（音效 / 背景音乐两条通道） ============ */

.vol-row {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7fa;
  border: 1px solid var(--line-soft);
  text-align: left;
}

.vol-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink);
}

.vol-head b {
  color: var(--brand-2);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.vol-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* 滑块：两端都够大，手指好拖 */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffc9d6, var(--brand));
  opacity: 0.9;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-2);
  box-shadow: 0 2px 8px rgba(255, 143, 171, 0.3);
}

.slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffc9d6, var(--brand));
  opacity: 0.9;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-2);
}

/* ============ 准备区 ============ */

.ready-bar {
  margin: 0 14px 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.ready-sides {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.ready-side {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: #fff7fa;
  border: 1px solid var(--line-soft);
}

.ready-label {
  font-size: 12px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ready-state {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-dim);
  background: #fff0f5;
}

.ready-state.on {
  color: #6b4a10;
  background: var(--good);
}

.ready-tip {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
}

/* 已准备状态下按钮换成更深的珊瑚粉实底，避免「再点一次」的歧义 */
/* 已准备状态：换成更深的蜜桃粉实底，避免「再点一次」的歧义（质感与主按钮一致） */
.btn.ready-done {
  background: linear-gradient(180deg, #ff9dbd 0%, #ff7fa4 58%, #ee6b93 100%);
  border-color: rgba(255, 255, 255, 0.5);
}

/* 首页：离线座位接管开关 */
.switch-field {
  margin-bottom: 12px;
}

.switch {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.switch input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  accent-color: var(--brand-2);
  cursor: pointer;
}

.switch-text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* 横屏矮屏（手机横放）时进一步压缩棋盘 */
@media (max-height: 520px) {
  .board { width: min(96vw, 68vh, 600px); }
  .phase-bar { margin-top: 4px; padding: 6px 12px 10px; }
  .cd-num { font-size: 30px; }
}

/* ============ 邀请链接 ============ */

/* 顶栏「邀请好友」按钮：主色实底，强调这是全新的入口 */
.mini.highlight {
  border-color: transparent;
}

.mini.highlight:hover {
  background: var(--brand-grad);
}

/* 首页：通过邀请链接进入时的进行中提示 */
.invite-hint {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(255, 143, 171, 0.45);
  border-radius: 14px;
  background: rgba(255, 143, 171, 0.07);
  text-align: center;
}

.invite-hint-title {
  font-size: 14px;
  font-weight: 700;
}

.invite-hint-title b {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 2px;
  color: var(--brand-2);
}

.invite-hint-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-dim);
}

/* 登录页顶部的邀请上下文（复用 invite-hint 卡片，房间码醒目显示） */
#login-invite-note {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
}

#login-invite-note b {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 2px;
  color: var(--brand-2);
}

/* 首页：加入失败时的明确说明（比一闪而过的 toast 更醒目） */
.join-error {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(255, 138, 128, 0.45);
  border-radius: 14px;
  background: rgba(255, 138, 128, 0.1);
  text-align: center;
}

.je-title {
  font-size: 15px;
  font-weight: 700;
  color: #c05a52;
}

.je-msg {
  margin-top: 6px;
  font-size: 13px;
}

.je-hint {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.je-hint:empty {
  display: none;
}

.je-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.je-actions .btn {
  flex: 1;
  padding: 10px 8px;
  font-size: 14px;
}

/* 邀请弹窗里的链接框 */
.invite-row {
  margin: 14px 0 4px;
}

.invite-row .input {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  cursor: text;
  user-select: all;
}

/* 按钮多于两个时换行，避免挤成一排 */
.modal-actions.wrap {
  flex-wrap: wrap;
}

.modal-actions.wrap .btn {
  flex: 1 1 calc(50% - 5px);
  padding: 11px 10px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .modal-actions.wrap .btn {
    flex: 1 1 100%;
  }
}

/* ===================== 登录页（默认首屏） ===================== */

/* 登录卡片：比首页更聚焦，居中、留白更大 */
.login-card {
  width: min(420px, 92vw);
  margin: 0 auto;
  padding: 36px 28px 28px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.login-card .logo {
  font-size: 22px;
  margin-bottom: 6px;
}

.login-card .sub {
  margin-bottom: 22px;
}

.login-card .field {
  text-align: left;
}

/* 主登录按钮：页面最显眼的主按钮（比普通按钮更大更亮） */
.btn-login-main {
  margin-top: 18px;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 999px;
}

.btn-login-main.loading {
  opacity: 0.7;
  box-shadow: none;
}

/* 次要入口：弱化的文字按钮（注册 / 游客） */
.linklike {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 8px;
  background: none;
  border: none;
  color: var(--brand-2);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.15s;
}

.linklike:hover {
  color: #e2658a;
}

.linklike:disabled {
  color: #d3b6c0;
  cursor: default;
}

/* 游客入口：登录按钮下方单独一行，弱化但有呼吸感 */
.login-alt {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}

.login-alt .linklike {
  margin-top: 0;
  font-size: 15px;
  color: var(--ink-dim);
}

/* 登录页提示行（恢复登录中 / 验证码说明） */
.login-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff3f7;
  border: 1px solid var(--line-soft);
  color: #8a6b76;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}

.login-note b {
  color: #e08e2f;
}

/* 验证码输入 + 获取按钮同行 */
.code-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.code-row .input {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: 6px;
  text-align: center;
}

.code-row .code-send {
  flex: 0 0 auto;
  min-width: 108px;
  white-space: nowrap;
}

.code-row .code-send:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 登录页错误提示直接复用 .err-line，但保证登录页里也占满一行 */
.login-card .err-line {
  margin-top: 14px;
  text-align: left;
}

@media (max-width: 480px) {
  .login-card {
    padding: 28px 18px 22px;
  }
  .btn-login-main {
    font-size: 16px;
    padding: 14px 16px;
  }
  .code-row .code-send {
    min-width: 96px;
    font-size: 13px;
  }
}

/* ============ 设置页顶栏（左音效开关 / 右头像菜单） ============ */
.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

/* 首页顶栏左侧：连接灯 + 头像并排 */
.home-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.home-topbar-left .conn-dot {
  width: 10px;
  height: 10px;
}

.home-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--brand-2);
}

.icon-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--brand-2);
  font-size: 20px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, background 0.2s;
  box-shadow: 0 2px 8px rgba(255, 138, 162, 0.12);
}

.icon-btn:hover {
  background: #fff0f5;
}

.icon-btn:active {
  transform: scale(0.94);
}

/* 音效关闭：喇叭上叠加珊瑚色斜杠 */
.sound-btn.off::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--bad);
  transform: translateY(-50%) rotate(-45deg);
}

/* 右上角头像按钮 */
.avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.avatar-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  font-size: 22px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.2s;
  box-shadow: 0 3px 10px rgba(255, 143, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 5px rgba(255, 202, 214, 0.3);
}

.avatar-btn:hover {
  border-color: var(--brand-2);
}

.avatar-btn:active {
  transform: scale(0.94);
}

/* 头像下拉菜单 */
.avatar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 250px;
  padding: 12px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(255, 138, 162, 0.3);
  z-index: 30;
}

.menu-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.menu-profile:hover {
  background: #fff0f5;
  border-color: var(--line-soft);
}

.menu-avatar {
  font-size: 30px;
  line-height: 1;
}

.menu-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu-names b {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-names i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-nick-edit {
  margin-top: 8px;
}

.menu-nick-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.menu-nick-actions .btn {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
}

.menu-line {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink-dim);
  border-top: 1px solid var(--line-soft);
}

.menu-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.menu-actions .btn {
  flex: 1;
  padding: 9px 10px;
  font-size: 13px;
}

/* ============ 首次资料设置（昵称 + 头像） ============ */
.setup-head {
  text-align: center;
  margin-bottom: 16px;
}

.setup-head h2 {
  margin: 6px 0 6px;
  font-size: 19px;
  color: var(--brand-2);
}

.setup-emoji {
  font-size: 34px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.avatar-opt {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: #fff7fa;
  font-size: 30px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}

.avatar-opt:hover {
  background: #fff0f5;
}

.avatar-opt.selected {
  border-color: var(--brand-2);
  background: rgba(255, 143, 171, 0.14);
  transform: scale(1.05);
}

/* ============ 房间页底部栏（旧版结构，保留兼容） ============ */
.game-bottombar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
}

.room-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff7fa;
  cursor: pointer;
}

.room-chip:active {
  transform: scale(0.97);
}

.game-bottombar .conn-dot {
  flex: 0 0 auto;
}

.game-bottombar .btn.small {
  padding: 9px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.game-bottombar #btn-invite {
  flex: 1 1 auto;
}

@media (max-width: 380px) {
  .game-bottombar {
    flex-wrap: wrap;
  }

  .game-bottombar #btn-invite {
    flex: 1 1 100%;
    order: 3;
  }
}

/* ============ 本轮改版补充样式 ============ */

/* 登录页内容整体居中 */
#screen-login.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
#screen-login .login-card {
  width: min(100%, 400px);
}

/* 齿轮设置入口与下拉菜单的定位容器 */
.settings-wrap {
  position: relative;
  flex: 0 0 auto;
}

/* 齿轮菜单条目 */
.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.menu-item:hover {
  background: #fff0f5;
}

/* 资料设置页（独立 screen） */
.setup-card .setup-head {
  text-align: center;
  margin-bottom: 16px;
}

.setup-card .setup-head h2 {
  margin: 8px 0 4px;
  font-size: 20px;
}

.setup-head .modal-tip {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-dim);
}

/* 圆形头像编辑区：预览 + 从相册选择 */
.avatar-edit {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.avatar-preview {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  font-size: 36px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 12px rgba(255, 143, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(255, 202, 214, 0.25);
}

.avatar-preview.photo {
  border-color: var(--brand-2);
}

/* 图片头像统一按 cover 居中显示：同一张方形头像在主页按钮 / 房间栏 / 资料预览里
   呈现完全相同的取景（缺省 auto 会按原始像素渲染，小圆里只露出局部角） */
.p-avatar.photo,
.avatar-preview.photo {
  background-size: cover;
  background-position: center;
  font-size: 0;
}

/* 默认昵称 chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}

.chip:hover {
  border-color: var(--brand-2);
  background: rgba(255, 143, 171, 0.1);
}

.chip:active {
  transform: scale(0.94);
}

/* 头像弹层里的分区 */
.profile-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.section-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

/* 声音设置行：一键开关（关闭叠红斜杠） */
.sound-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.switch-btn {
  position: relative;
  min-width: 64px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--brand-2);
  background: rgba(255, 143, 171, 0.14);
  color: var(--brand-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.switch-btn[data-on='0'] {
  border-color: var(--line);
  background: #ffffff;
  color: var(--ink-dim);
}

.switch-btn.off::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: var(--bad);
  transform: translateY(-50%) rotate(-25deg);
}

/* 账号区 */
.menu-line {
  font-size: 13px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.menu-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.menu-actions .btn {
  flex: 1;
}

/* 左上角圆形头像按钮：自定义图片时直接铺满 */
.avatar-btn.photo {
  background-size: cover;
  background-position: center;
  font-size: 0;
}

/* 游戏规则弹窗 */
.rules-card {
  width: min(92vw, 480px);
  max-height: 86vh;
  overflow-y: auto;
}

.rules-body {
  margin: 4px 0 6px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink);
}

.rules-body p {
  margin: 0 0 10px;
}

/* 对局页顶部 VS 展示排 */
.game-toprow {
  margin: 0 14px;
  padding: 10px 12px 8px;
}

.game-toprow .players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.game-toprow .player {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 对局页主体改为纵向弹性布局：棋盘尽量占满剩余空间 */
#screen-game.active {
  display: flex;
  flex-direction: column;
}

#screen-game .board-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ============ 本轮改版：二级弹窗 / 返回按钮 / 页面滚动 ============ */

/* 屏幕层始终允许纵向滚动（内容超过一屏时可完整查看，含底部安全区） */
.screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 弹窗改为「居中 + 内容超出时整体滚动」，避免小屏上按钮被挤出视口 */
.modal {
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.modal-card.sheet-card {
  width: min(100%, 420px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  text-align: left;
  padding: 16px 18px 18px;
}

/* 二级弹窗顶部：左上返回按钮 + 居中标题 */
.sheet-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-bottom: 14px;
}

.sheet-top h2 {
  margin: 0;
  font-size: 18px;
  text-align: center;
  color: var(--brand-2);
}

.back-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 3px 8px rgba(255, 143, 171, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(255, 202, 214, 0.3);
}

.back-btn:hover {
  background: linear-gradient(180deg, #fffafb 0%, #ffeef4 100%);
  box-shadow: 0 4px 10px rgba(255, 143, 171, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(255, 202, 214, 0.35);
}

.back-btn:active {
  transform: translateY(-50%) scale(0.96);
}

/* 头像编辑区右侧按钮列 */
.avatar-edit-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* 资料弹窗里的账号信息行（只读展示） */
#modal-profile .menu-line {
  margin-top: 8px;
}

/* 头像菜单（左上下拉）与齿轮菜单（右上下拉）共用 .avatar-menu 的卡片样式 */
.avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

#avatar-menu {
  left: 0;
  right: auto;
  width: 190px;
  padding: 8px;
}

#avatar-menu .menu-item + .menu-item {
  margin-top: 2px;
}

/* 资料弹窗 / 声音弹窗里的确认按钮比关闭按钮更醒目 */
#modal-profile .modal-actions,
#modal-sound .modal-actions,
#modal-rules .modal-actions {
  margin-top: 16px;
}

/* ============ 头像编辑器（圆形框内拖拽 / 缩放 / 旋转） ============ */
.avatar-editor-card {
  text-align: center;
}

.avatar-editor-stage {
  position: relative;
  width: min(72vw, 240px);
  aspect-ratio: 1 / 1;
  margin: 4px auto 14px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(255, 143, 171, 0.14), 0 4px 12px rgba(255, 143, 171, 0.12);
  touch-action: none; /* 手势（拖拽 / 双指缩放）全部自己接管 */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.avatar-editor-stage:active {
  cursor: grabbing;
}

.avatar-editor-img {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none; /* 拖拽事件统一接在 stage 上 */
}

.editor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff7fa;
  border: 1px solid var(--line-soft);
}

.editor-label {
  flex: 0 0 3em;
  font-size: 13px;
  color: var(--ink);
}

.editor-row .slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.editor-tip {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
  line-height: 1.5;
}

#modal-avatar-edit .modal-actions {
  margin-top: 14px;
}

/* ==================================================================
   本轮改版：微信扫码入口 / 战绩弹窗 / 房间页房间码与一键邀请
   ================================================================== */

/* 登录页「或」分隔线 + 微信按钮（微信品牌绿，仅此处保留品牌色） */
.login-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--ink-dim);
  font-size: 12px;
}

.login-or::before,
.login-or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.wechat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #07c160;
  border: 1px solid #07c160;
  color: #fff;
  font-weight: 600;
}

.wechat-btn:hover {
  background: #06ad56;
  border-color: #06ad56;
}

.wechat-btn:active {
  background: #059a4c;
}

/* 战绩弹窗：2 × 3 数据格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 6px 0 4px;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: #fff7fa;
}

.stat-cell b {
  font-size: 20px;
  line-height: 1.1;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
}

.stat-cell span {
  font-size: 12px;
  color: var(--ink-dim);
}

/* 房间页底栏：房间码行 + 邀请按钮行 + 离开房间 */
.game-bottombar {
  flex-wrap: wrap;
}

.room-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.room-code-label {
  font-size: 12px;
  color: var(--ink-dim);
}

.room-code {
  font-size: 18px;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.small-link {
  font-size: 12px;
  padding: 2px 4px;
}

.invite-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.invite-actions .btn.small {
  padding: 9px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.invite-expire-tip {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--ink-dim);
}

.bottombar-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 420px) {
  .invite-actions {
    flex: 1 1 100%;
    order: 3;
  }

  .invite-actions .btn.small {
    flex: 1 1 auto;
  }
}

/* ==================================================================
   房间页紧凑布局（本轮改版）
   ------------------------------------------------------------------
   目标：房间码 + 一键邀请移到最顶部并缩小，整页在一屏内看完不滚动。
   做法：屏幕层锁高 100dvh + 纵向 flex，棋盘吃掉剩余高度（按容器算尺寸），
   其余各条（顶栏 / VS / 准备区 / 状态条）都压到最小必要高度。
   ================================================================== */

/* 房间页：锁一屏高，禁止滚动，纵向弹性分配 */
#screen-game.active {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 顶部紧凑条：房间码 · 一键邀请 · 离开 · 连接点，全部单行 */
.game-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 230, 234, 0.45);
  min-width: 0;
}

.game-head .room-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.game-head .room-code-label {
  font-size: 11px;
  color: var(--ink-dim);
  flex: 0 0 auto;
}

/* 房间码：缩小字母间距与字号，4 位数字一眼看完又不抢视线 */
.game-head .room-code {
  font-size: 17px;
  line-height: 1;
  letter-spacing: 1.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: 0 0 auto;
}

.game-head .small-link {
  font-size: 11px;
  padding: 1px 3px;
  flex: 0 0 auto;
}

.game-head .invite-btn,
.game-head .leave-btn {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 999px;
  white-space: nowrap;
}

.game-head .invite-btn {
  position: relative;
  font-weight: 700;
  color: #fff;
  border-color: transparent; /* 同主按钮：白描边在浅底上会显成白线 */
  background: var(--brand-grad);
  text-shadow: 0 1px 1px rgba(214, 58, 108, 0.3);
  box-shadow: 0 4px 10px rgba(255, 110, 158, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 5px rgba(226, 60, 112, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* 顶部弧形高光层同步移除（同主按钮的白线问题），果冻感由渐变 + inset 高光承担 */

.game-head .leave-btn {
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(255, 143, 171, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(255, 202, 214, 0.35);
}

.game-head .conn-dot {
  flex: 0 0 auto;
  margin-left: 2px;
}

/* VS 展示排：压缩上下留白，头像与字号略收 */
#screen-game .game-toprow {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px 6px;
}

#screen-game .game-toprow .p-avatar {
  width: 34px;
  height: 34px;
  font-size: 18px;
  flex: 0 0 34px;
}

#screen-game .game-toprow .p-name {
  font-size: 13px;
}

#screen-game .game-toprow .p-tag {
  font-size: 11px;
}

#screen-game .game-toprow .p-score {
  font-size: 17px;
}

#screen-game .game-toprow .vs {
  font-size: 10px;
  padding: 2px 6px;
}

/* 准备区：收紧内边距与按钮高度 */
#screen-game .ready-bar {
  flex: 0 0 auto;
  margin: 0 12px 6px;
  padding: 7px 10px 8px;
  gap: 6px;
}

#screen-game .ready-bar .btn {
  padding: 8px 12px;
  font-size: 14px;
}

#screen-game .ready-tip {
  font-size: 11px;
  margin-top: 2px;
}

/* 状态条：压低高度，倒计时数字缩小 */
#screen-game .phase-bar {
  flex: 0 0 auto;
  margin: 0 12px 6px;
  padding: 6px 10px;
  min-height: 0;
}

#screen-game .phase-title {
  font-size: 14px;
}

#screen-game .phase-extra {
  font-size: 11px;
}

#screen-game .cd-num {
  font-size: 20px;
}

/* 棋盘：吃掉剩余高度，正方形按「容器可用高」与「宽度」取小 */
#screen-game .board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px 8px;
}

#screen-game .board {
  width: min(100%, 100cqh, 620px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

/* 用容器查询让棋盘能拿到「父容器高度」来算正方形边长 */
#screen-game .board-wrap {
  container-type: size;
}

/* 超窄屏（小手机）：隐藏房间码文字标签，把空间让给按钮 */
@media (max-width: 360px) {
  .game-head {
    gap: 6px;
    padding: 5px 8px;
  }

  .game-head .room-code-label {
    display: none;
  }

  .game-head .room-code {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .game-head .invite-btn,
  .game-head .leave-btn {
    padding: 5px 8px;
    font-size: 11.5px;
  }
}

/* 横屏手机：顶部条与 VS 再压一点，保证棋盘完整 */
@media (max-height: 480px) and (orientation: landscape) {
  #screen-game .game-toprow {
    padding: 4px 12px;
  }

  #screen-game .game-toprow .p-avatar {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  #screen-game .ready-bar {
    margin-bottom: 4px;
    padding: 5px 10px 6px;
  }

  #screen-game .phase-bar {
    margin-bottom: 4px;
    padding: 4px 10px;
  }
}

/* 旧底栏（房间码 + 邀请）已移到顶部，这些类不再使用，保留空规则以免误用 */

/* 移动端昵称：隐藏「（你）」独占的 .p-name-me，把「你」并入 .p-tag（由 renderPlayers 追加），
   昵称宽度全部让给 .p-name-text，避免窄屏下昵称被「（你）」挤到只剩一个字 */
@media (max-width: 560px) {
  #screen-game .game-toprow .p-name-me {
    display: none;
  }
}