:root {
  --fire: #FF6B35;
  --fire-light: #FFA552;
  --fire-deep: #E14D2A;
  --ice: #4CC9F0;
  --ice-light: #ADE8F4;
  --ice-deep: #2A9FD6;
  --bg: #FFF9F5;
  --card: #FFFFFF;
  --ink: #3A322E;
  --ink-soft: #8A7F78;
  --line: #F0E6DF;
  --online: #52C41A;
  --offline: #BFBFBF;
  --danger: #FF4D4F;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --radius-card: 20px;
  --radius-btn: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: var(--bg);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  min-height: 100vh;
  width: 100%;
}

.hidden {
  display: none !important;
}

/* ============ 启动页 ============ */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  padding-top: var(--safe-top);
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 56px;
  line-height: 1;
}

.logo.small {
  font-size: 40px;
  margin-bottom: 8px;
}

.logo .flame,
.logo .snow {
  display: inline-block;
  animation: breathe 2.4s ease-in-out infinite;
}

.logo .snow {
  animation-delay: 1.2s;
}

.title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--fire) 0%, var(--fire-light) 45%, var(--ice) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 15px;
  color: var(--ink-soft);
}

/* ============ 暗号页 / 身份选择 ============ */
.page-card {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  padding-top: var(--safe-top);
  padding-bottom: calc(12px + var(--safe-bottom));
  text-align: center;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
}

.page-sub {
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.input {
  width: 100%;
  max-width: 320px;
  font-size: 16px;
  padding: 14px 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--card);
  color: var(--ink);
  outline: none;
  text-align: center;
  transition: border-color 0.2s;
}

.input:focus {
  border-color: var(--fire);
}

.error-text {
  min-height: 20px;
  font-size: 14px;
  color: var(--danger);
}

.btn {
  width: 100%;
  max-width: 320px;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 20px;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: transform 0.15s;
  color: #fff;
}

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

.btn-primary {
  background: linear-gradient(90deg, var(--fire) 0%, var(--fire-light) 100%);
  box-shadow: var(--shadow);
}

/* 身份卡片 */
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}

.identity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px;
  border-radius: var(--radius-card);
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform 0.15s, border-color 0.2s;
}

.identity-card:active {
  transform: scale(0.96);
}

.identity-card.fire {
  border-color: #ffe1d1;
}

.identity-card.ice {
  border-color: #d7f1fb;
}

.identity-emoji {
  font-size: 48px;
  line-height: 1;
}

.identity-name {
  font-size: 16px;
  font-weight: 600;
}

.identity-card.fire .identity-name {
  color: var(--fire-deep);
}

.identity-card.ice .identity-name {
  color: var(--ice-deep);
}

/* ============ 大厅 ============ */
.lobby {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
  padding-top: calc(16px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
  gap: 16px;
}

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

.brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

.topbar-spacer {
  flex: 1;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.avatar.fire {
  background: linear-gradient(135deg, var(--fire), var(--fire-light));
}

.avatar.ice {
  background: linear-gradient(135deg, var(--ice), var(--ice-light));
}

.partner-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

.partner-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.partner-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.partner-name {
  font-size: 16px;
  font-weight: 600;
}

.partner-status {
  font-size: 13px;
  color: var(--ink-soft);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.online {
  background: var(--online);
  box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.5);
  animation: pulse 1.6s infinite;
}

.status-dot.offline {
  background: var(--offline);
}

/* 游戏卡片（M2：可点发起邀请，对方离线置灰） */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px 20px;
  background: var(--card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s, filter 0.2s;
}

.game-card:active:not(:disabled) {
  transform: scale(0.96);
}

.game-card.disabled,
.game-card:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.7);
}

/* 卡通插画（M7 替换 emoji 占位；纯内联 SVG，无外部请求） */
.game-art {
  width: 100%;
  max-width: 132px;
  height: auto;
  display: block;
  margin-bottom: 2px;
}

.game-name {
  font-size: 18px;
  font-weight: 600;
}

.game-desc {
  font-size: 13px;
  color: var(--ink-soft);
}

.lobby-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: auto;
}

/* ============ 开局设置页 ============ */
.setup {
  gap: 14px;
}

.versus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 320px;
  margin-top: 8px;
}

.versus-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  flex: 1;
  position: relative;
}

.versus-side.fire {
  background: linear-gradient(160deg, #fff3ec, #ffe1d1);
}

.versus-side.ice {
  background: linear-gradient(160deg, #ecfaff, #d7f1fb);
}

.versus-emoji {
  font-size: 40px;
  line-height: 1;
}

.versus-name {
  font-size: 16px;
  font-weight: 700;
}

.versus-side.fire .versus-name {
  color: var(--fire-deep);
}

.versus-side.ice .versus-name {
  color: var(--ice-deep);
}

.versus-tag {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--ink-soft);
  padding: 2px 10px;
  border-radius: 999px;
  min-height: 20px;
}

.versus-vs {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-soft);
}

.setup-question {
  font-size: 17px;
  font-weight: 600;
  margin-top: 10px;
}

.side-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

.side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

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

.side-emoji {
  font-size: 32px;
  line-height: 1;
}

.side-label {
  font-size: 15px;
  font-weight: 600;
}

.side-btn.selected {
  border-color: var(--fire);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15), var(--shadow);
}

body[data-identity='ice'] .side-btn.selected {
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(76, 201, 240, 0.18), var(--shadow);
}

.setup-partner-choice {
  font-size: 14px;
  color: var(--ink-soft);
  min-height: 20px;
}

/* ============ 对局页（五子棋） ============ */
.match-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  padding-top: calc(14px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
}

.match-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.match-opponent {
  display: flex;
  align-items: center;
  gap: 12px;
}

.match-opp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-partner-name {
  font-size: 16px;
  font-weight: 700;
}

.match-turn-hint {
  font-size: 13px;
  color: var(--ink-soft);
}

.match-turn-hint.my-turn {
  color: var(--fire);
  font-weight: 600;
}

.chat-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  font-size: 20px;
  cursor: pointer;
  color: var(--ink-soft);
  opacity: 0.55;
}

.match-board-wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.board {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.board-bg {
  fill: #FDF3E7;
  stroke: #8B6F47;
  stroke-width: 2;
}

.board-line {
  stroke: #C9A227;
  stroke-width: 2;
}

.board-star {
  fill: #C9A227;
}

.stone-fire {
  fill: #FF6B35;
  stroke: #E14D2A;
  stroke-width: 1.5;
}

.stone-ice {
  fill: #4CC9F0;
  stroke: #2A9FD6;
  stroke-width: 1.5;
}

.last-move-ring {
  fill: none;
  stroke: #3A322E;
  stroke-width: 2;
  opacity: 0.6;
}

.win-ring {
  fill: none;
  stroke: #FFD166;
  stroke-width: 3;
}

/* ============ 象棋棋盘（M4） ============ */
.xq-board-wrap {
  aspect-ratio: 460 / 520;
}

.board-river {
  fill: #8B6F47;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.xq-disc {
  stroke-width: 2;
}

.xq-piece-fire .xq-disc {
  fill: #FF6B35;
  stroke: #E14D2A;
}

.xq-piece-ice .xq-disc {
  fill: #4CC9F0;
  stroke: #2A9FD6;
}

.xq-char {
  fill: #fff;
  font-size: 20px;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
}

.xq-last-move {
  fill: none;
  stroke: #3A322E;
  stroke-width: 2;
  opacity: 0.5;
  pointer-events: none;
}

.xq-check-ring {
  fill: none;
  stroke: #FF4D4F;
  stroke-width: 3;
  pointer-events: none;
}

.xq-selected-ring {
  fill: none;
  stroke: #3A322E;
  stroke-width: 2.5;
  pointer-events: none;
}

.xq-move-dot {
  fill: rgba(58, 50, 46, 0.35);
  pointer-events: none;
}

.xq-capture-ring {
  fill: none;
  stroke: #FF4D4F;
  stroke-width: 2.5;
  pointer-events: none;
}

.match-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: auto;
}

.act-btn {
  font-size: 15px;
  font-weight: 600;
  padding: 14px 8px;
  border: 2px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s;
  white-space: nowrap;
}

.act-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.act-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.act-btn.danger {
  color: var(--danger);
  border-color: #ffd6d6;
}

/* ============ 结算页 ============ */
.match-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 8px;
  margin-top: auto;
}

.result-emoji {
  font-size: 64px;
  line-height: 1;
}

.result-title {
  font-size: 26px;
  font-weight: 700;
}

.result-meta {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}

.result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--ink-soft);
}

.result-row span:last-child {
  color: var(--ink);
  font-weight: 600;
}

.match-result .btn {
  max-width: 300px;
}

/* ============ 大厅入口行（聊天） ============ */
.lobby-entries {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entry-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  transition: transform 0.15s;
}

.entry-row:active {
  transform: scale(0.97);
}

.entry-emoji {
  font-size: 22px;
  line-height: 1;
}

.entry-label {
  flex: 1;
  text-align: left;
}

.entry-arrow {
  font-size: 22px;
  color: var(--ink-soft);
  line-height: 1;
}

/* 未读红点数字 */
.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* ============ 聊天页（大厅全屏） ============ */
.chat-page {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  background: var(--bg);
}

.chat-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.chat-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-title {
  font-size: 17px;
  font-weight: 700;
}

.chat-partner-status {
  font-size: 12px;
  color: var(--ink-soft);
}

.icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s;
}

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

.icon-btn.ghost {
  opacity: 0.25;
  cursor: default;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-load-more {
  display: flex;
  justify-content: center;
  padding-bottom: 6px;
}

.chat-load-more-btn {
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}

/* 消息行 */
.msg-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 82%;
}

.msg-row.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-row.theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  animation: bubbleIn 0.2s ease;
}

/* 圆角方向按左右对齐（视角相关） */
.msg-row.mine .msg-bubble {
  border-bottom-right-radius: 6px;
}

.msg-row.theirs .msg-bubble {
  border-bottom-left-radius: 6px;
}

/* 气泡颜色永远按「发送者身份」（铁律 3）：火娃=火色、冰娃=冰色，不随视角变化 */
.msg-row.from-fire .msg-bubble {
  background: linear-gradient(135deg, var(--fire), var(--fire-light));
  color: #fff;
}

.msg-row.from-ice .msg-bubble {
  background: linear-gradient(135deg, var(--ice), var(--ice-light));
  color: #0b3a4a;
}

.msg-meta {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 0 4px;
}

/* 系统消息（灰底小字） */
.msg-system {
  align-self: center;
  max-width: 88%;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  background: rgba(58, 50, 46, 0.07);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1.4;
}

/* 表情面板 */
.emoji-panel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 10px 12px;
  background: var(--card);
  border-top: 1px solid var(--line);
  max-height: 168px;
  overflow-y: auto;
  animation: sheetUp 0.18s ease;
}

.emoji-item {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  padding: 7px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

.emoji-item:active {
  transform: scale(1.2);
  background: var(--line);
}

/* 输入栏 */
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border-top: 1px solid var(--line);
}

.chat-input {
  flex: 1;
  min-height: 44px;
  max-height: 110px;
  padding: 11px 16px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 22px;
  outline: none;
  resize: none;
  line-height: 1.4;
}

.chat-input:focus {
  border-color: var(--fire);
}

body[data-identity='ice'] .chat-input:focus {
  border-color: var(--ice);
}

.chat-send {
  flex-shrink: 0;
  min-width: 64px;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, var(--fire), var(--fire-light));
  cursor: pointer;
  transition: transform 0.15s;
}

body[data-identity='ice'] .chat-send {
  background: linear-gradient(90deg, var(--ice), var(--ice-light));
  color: #0b3a4a;
}

.chat-send:active:not(:disabled) {
  transform: scale(0.95);
}

.chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-input-hint {
  font-size: 12px;
  color: var(--danger);
  text-align: center;
  padding: 4px 0 8px;
  background: var(--card);
}

/* ============ 对局内聊天半屏弹层 ============ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 50, 46, 0.35);
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.chat-sheet {
  width: 100%;
  max-width: 480px;
  height: 62vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  padding-bottom: var(--safe-bottom);
  animation: sheetUp 0.25s ease;
  overflow: hidden;
}

.sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.chat-sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 8px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.chat-list-sheet {
  padding: 12px;
}

/* 对局页聊天按钮上的未读红点 */
.chat-btn {
  position: relative;
}

.chat-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

/* 对局中弹层打开时棋盘微缩，保留局面可见（说明书 4.12） */
.match-wrap.sheet-open .match-board-wrap {
  transform: scale(0.86);
  transform-origin: top center;
  transition: transform 0.25s ease;
}

.match-board-wrap {
  transition: transform 0.25s ease;
}

@keyframes sheetUp {
  0% { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes bubbleIn {
  0% { transform: translateY(6px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ============ 对局中新消息轻提示（不遮挡棋盘） ============ */
/* 固定高度的槽位：提示条出现/消失都不改变总高度 → 棋盘位置恒定，绝不被挤动。
   高度 44px = 提示条自然高度（内容 26 + 内边距 16 + 边框 2，全局 border-box）。 */
.match-notice-slot {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.match-msg-notice {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  animation: noticeIn 0.25s ease;
  transition: transform 0.15s;
  max-width: 100%;
}

.match-msg-notice:active {
  transform: scale(0.98);
}

.match-msg-notice.from-fire {
  border-color: #ffd6bf;
  background: linear-gradient(90deg, #fff8f4, var(--card));
}

.match-msg-notice.from-ice {
  border-color: #cdeffb;
  background: linear-gradient(90deg, #f3fcff, var(--card));
}

.notice-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.match-msg-notice.from-fire .notice-avatar {
  background: linear-gradient(135deg, var(--fire), var(--fire-light));
}

.match-msg-notice.from-ice .notice-avatar {
  background: linear-gradient(135deg, var(--ice), var(--ice-light));
}

.notice-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes noticeIn {
  0% { transform: translateY(-8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ============ 弹窗（邀请 / 等待） ============ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 50, 46, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
}

.invite-card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 28px 24px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  animation: popIn 0.25s ease;
}

.invite-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.invite-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--fire-deep);
  border: 4px solid var(--fire);
  box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.3);
  animation: pulseFire 1s infinite;
}

.invite-actions {
  display: flex;
  gap: 12px;
  width: 100%;
}

.invite-actions .btn {
  flex: 1;
  max-width: none;
}

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: none;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--line);
  border-top-color: var(--fire);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* ============ Toast ============ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(48px + var(--safe-bottom));
  transform: translateX(-50%);
  background: rgba(58, 50, 46, 0.92);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  max-width: 86%;
  text-align: center;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
}

/* ============ 五子棋冰火皮肤（M6） ============
   火娃棋子：橙红径向渐变 + 白色小火苗剪影（约 45%）
   冰娃棋子：蓝青径向渐变 + 白色小雪花剪影（约 45%）
   ⚠️ 纹理用「极简剪影」：单一纯色、无多层渐变、无描边细节、无投影，辨识度优先。
   ⚠️ 颜色由绝对身份决定（fire/ice），不随先后手或视角变化（铁律 3）。 */
.stone-fire {
  fill: #FF6B35;
  stroke: #E14D2A;
  stroke-width: 1.5;
}

.stone-ice {
  fill: #4CC9F0;
  stroke: #2A9FD6;
  stroke-width: 1.5;
}

/* 棋子表面的火苗/雪花剪影（纯白纯色，一眼可辨） */
.stone-mark {
  fill: #fff;
  opacity: 0.92;
  pointer-events: none;
}

/* 雪花用线条（无填充），火苗用实心水滴 —— 剪影区分度更高 */
.stone-mark-line {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.95;
}

/* 棋子本体（与 .stone-fire / .stone-ice 同用） */
.stone-body {
  stroke-width: 1.5;
}
.stone-fire .stone-body {
  fill: #FF6B35;
  stroke: #E14D2A;
}
.stone-ice .stone-body {
  fill: #4CC9F0;
  stroke: #2A9FD6;
}

.stone-spawn {
  transform-box: fill-box;
  transform-origin: center;
  animation: stoneIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ 待落子标记（五子棋两步确认落子的第一步） ============
   只标出「你刚点的位置」，还没真正落子；再点同一位置才落子。
   颜色跟随落子方的绝对身份（火=橙红 / 冰=蓝青，铁律 3）。 */
.pending-ring {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.pending-fire .pending-ring { stroke: var(--fire-deep); }
.pending-fire .pending-dot { fill: var(--fire); }
.pending-ice .pending-ring { stroke: var(--ice-deep); }
.pending-ice .pending-dot { fill: var(--ice); }

.pending-mark {
  animation: pendingPulse 1.2s ease-in-out infinite;
}

@keyframes pendingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes stoneIn {
  0% { transform: scale(0.4); opacity: 0.4; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* 吃子消散（象棋） */
.xq-eaten {
  transform-box: fill-box;
  transform-origin: center;
  animation: eatenOut 0.4s ease forwards;
  pointer-events: none;
}

@keyframes eatenOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* 将军闪烁（象棋） */
.xq-check-ring.pulse {
  animation: checkPulse 0.6s ease-in-out 2;
}

@keyframes checkPulse {
  0%, 100% { stroke-opacity: 0.35; stroke-width: 3; }
  50% { stroke-opacity: 1; stroke-width: 5; }
}

/* 五子连珠光带 */
.win-band {
  stroke: #FFD166;
  stroke-width: 7;
  stroke-linecap: round;
  fill: none;
  opacity: 0.85;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: bandDraw 1.2s ease forwards;
  pointer-events: none;
}

@keyframes bandDraw {
  to { stroke-dashoffset: 0; }
}

/* 落子粒子（火苗 / 雪花） */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.fx-particle {
  position: absolute;
  font-size: 15px;
  line-height: 1;
  will-change: transform, opacity;
  animation: fxFloat 0.62s ease-out forwards;
  pointer-events: none;
}

@keyframes fxFloat {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}

/* 撒花（胜利） */
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 300;
}

.confetti-piece {
  position: absolute;
  top: -24px;
  font-size: 18px;
  animation: confettiFall 1.9s linear forwards;
  will-change: transform, opacity;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

/* 按钮点击回弹 */
.btn:active,
.game-card:active:not(:disabled),
.entry-row:active,
.act-btn:active:not(:disabled),
.side-btn:active,
.setting-row:active {
  transform: scale(0.96);
}

/* 对方上线：头像呼吸光晕 */
.avatar.online-glow {
  animation: avatarGlow 0.8s ease-in-out 2;
}

@keyframes avatarGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); }
  50% { box-shadow: 0 0 0 8px rgba(82, 196, 26, 0.28); }
}

/* 页面切换淡入 + 轻微上移 */
.screen.fade-in {
  animation: pageIn 0.25s ease;
}

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

/* ============ 断线重连横幅（文档流内，不遮挡棋盘） ============ */
.conn-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  padding: 8px 14px;
  padding-top: calc(8px + var(--safe-top));
  background: #FFF4E0;
  color: #8A5A00;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #FFE4B5;
}

.conn-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid #f0d9a8;
  border-top-color: #C98411;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* 对手网络不好时，本地提示也复用这个横幅 */
.conn-banner.partner {
  background: #F1F7FF;
  color: #2A5F9E;
  border-bottom-color: #D6E6FA;
}

.conn-banner.partner .conn-spinner {
  border-color: #cfe0f5;
  border-top-color: #3B7DD8;
}

/* ============ 对方离开：10 分钟保留倒计时（文档流内元素） ============ */
.suspend-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: #FFF6E8;
  border: 1px solid #FFE2B8;
  animation: noticeIn 0.25s ease;
}

.suspend-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.suspend-emoji {
  font-size: 18px;
  line-height: 1;
}

.suspend-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #8A5A00;
}

.suspend-giveup {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

/* ============ 结算页：战绩条 ============ */
.result-score {
  width: 100%;
  max-width: 300px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(90deg, #fff3ec, #ecfaff);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  line-height: 1.5;
}

/* 结算页结束原因（认输 / 超时 / 将死…） */
.result-reason {
  margin: -4px 0 4px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

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

.sound-btn {
  font-size: 18px;
}

.sound-btn.muted {
  opacity: 0.4;
}

/* ============ 战绩页 ============ */
.score-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: calc(24px + var(--safe-bottom));
  background: var(--bg);
}

.score-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 顶部汇总条 */
.score-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, #fff3ec 0%, #ffffff 50%, #ecfaff 100%);
  box-shadow: var(--shadow);
  text-align: center;
}

.score-summary-main {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.score-summary-sub {
  font-size: 12px;
  color: var(--ink-soft);
}

/* 按游戏分区 */
.score-games {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.score-game-card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.score-game-head {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 「共 N 局」靠右 */
.sg-total {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* 胜平负比例条（火=橙红、平=灰、冰=蓝青；绝对身份上色） */
.sg-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line);
}

.sg-bar i {
  display: block;
  height: 100%;
  transition: width 0.4s ease;
}

.sg-bar-fire { background: #FF6B35; }
.sg-bar-draw { background: #C9CDD4; }
.sg-bar-ice { background: #4CC9F0; }

.score-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
}

.score-line-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.score-line-name.fire { color: var(--fire-deep); }
.score-line-name.ice { color: var(--ice-deep); }

.score-line-nums {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.score-line-nums b {
  color: var(--ink);
  font-weight: 700;
}

/* 最近 10 局 */
.score-block {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-block-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.score-recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}

.score-recent-row:last-child {
  border-bottom: none;
}

.score-recent-game {
  flex-shrink: 0;
  font-weight: 600;
}

.score-recent-result {
  flex: 1;
  font-weight: 700;
}

.score-recent-result.fire { color: var(--fire-deep); }
.score-recent-result.ice { color: var(--ice-deep); }
.score-recent-result.draw { color: var(--ink-soft); }

.score-recent-meta {
  flex-shrink: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.35;
}

.score-empty {
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
  padding: 8px 0;
}

/* 彩蛋统计区（粉色卡片柔和呈现） */
.score-easter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, #FFF0F5, #FFE7F0);
  border: 1px solid #FFD9E6;
  box-shadow: var(--shadow);
}

.score-easter-title {
  font-size: 14px;
  font-weight: 700;
  color: #C2185B;
}

.score-easter-line {
  font-size: 14px;
  color: #8E3B5E;
  line-height: 1.6;
}

.score-easter-line b {
  color: #C2185B;
  font-weight: 700;
}

.score-clear {
  align-self: center;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  background: var(--card);
  border: 2px solid #ffd6d6;
  border-radius: 999px;
  padding: 12px 28px;
  cursor: pointer;
}

/* 大厅战绩入口的迷你摘要 */
.entry-summary {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ============ 设置页 ============ */
.settings-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: calc(24px + var(--safe-bottom));
  background: var(--bg);
}

.settings-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.setting-row.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.setting-label {
  flex-shrink: 0;
}

.setting-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}

.settings-about {
  margin-top: auto;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.settings-about-sub {
  font-size: 12px;
}

.settings-danger {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  background: var(--card);
  border: 1px solid #ffd6d6;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}

/* ============ 动画 ============ */
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(82, 196, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); }
}

@keyframes pulseFire {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.3); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

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

@keyframes popIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes shakeAnim {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.shake {
  animation: shakeAnim 0.3s;
}