/* ==========================================================================
   动物城动画风（兔朱迪 / 狐尼克）— 视觉规格 v1.0
   全部色值引用 :root 令牌，禁止硬编码
   ========================================================================== */

:root {
  /* ---------- 底与墨线 ---------- */
  --paper:        #FFFCF5;
  --paper-2:      #FFF4E2;
  --ink:          #241C14;
  --ink-2:        #6B5A48;
  --ink-3:        #A08A72;

  /* ---------- 动物城黄昏 ---------- */
  --dusk-1:       #FFE0AC;
  --dusk-2:       #FDC98A;
  --dusk-3:       #D9A882;
  --dusk-glow:    rgba(255, 214, 160, 0.6);

  /* ---------- 棋盘（蜜色，比木色更亮更干净） ---------- */
  --board-1:      #FBE7C6;
  --board-2:      #F3D5AA;
  --board-line:   rgba(150, 105, 60, .45);
  --board-edge:   #8A5A2B;

  /* ---------- 主角色 ---------- */
  /* 主题色（令牌名为历史命名，实际配色：黑座=粉 / 白座=红） */
  --judy-blue:    #EC6FA6;
  --judy-blue-d:  #C4467F;
  --nick-orange:  #E5484D;
  --nick-orange-d:#B32A2E;

  /* ---------- 角色毛色 ---------- */
  --judy-fur:     #8E9BA8;
  --judy-fur-l:   #C6CFD8;
  --judy-eye:     #6B4FB0;
  --judy-nose:    #E2789B;
  --nick-fur:     #D2622A;
  --nick-fur-l:   #F3A063;
  --nick-muzzle:  #FBE6CE;
  --nick-eye:     #4E7A34;
  --nick-nose:    #241C14;
  --nick-tie:     #4E8A5A;

  /* ---------- 功能色 ---------- */
  --ok:           #5FA463;
  --warn:         #E8A33D;
  --danger:       #D8543F;
  --shadow:       rgba(90, 60, 30, 0.18);
  --shadow-deep:  rgba(90, 60, 30, 0.32);

  /* ---------- 字体与缓动 ---------- */
  --font-round: 'DingTalk JinBuTi', 'MiSans', 'PingFang SC', 'Hiragino Sans GB',
                'Source Han Rounded', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-round);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  /* 动物城黄昏背景（AI 生成的城市黄昏图） */
  background: url('/img/city-dusk.png') center center / cover no-repeat fixed;
}

/* 可读性压暗层：让前景卡片/棋盘在背景图上始终清晰 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(30, 38, 60, .30) 0%,
    rgba(30, 38, 60, .10) 32%,
    rgba(40, 30, 20, .22) 100%
  );
}

/* 天际线剪影已并入背景图 city-dusk.png，不再使用伪元素 */

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 背景图无天际线预留 */
  padding: 14px 12px;
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hidden { display: none !important; }

/* ==========================================================================
   按钮
   ========================================================================== */

.btn {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  padding: 13px 24px;
  color: var(--ink);
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .09s var(--ease-out), box-shadow .14s var(--ease-out);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .7; cursor: default; transform: none; box-shadow: 0 4px 0 var(--ink); }

.btn-blue {
  color: var(--paper);
  background: var(--judy-blue);
  border-color: var(--judy-blue-d);
  box-shadow: 0 4px 0 var(--judy-blue-d);
}
.btn-blue:hover { box-shadow: 0 6px 0 var(--judy-blue-d); }
.btn-blue:active { box-shadow: 0 1px 0 var(--judy-blue-d); }
.btn-blue:disabled { box-shadow: 0 4px 0 var(--judy-blue-d); }

.btn-orange {
  color: var(--paper);
  background: var(--nick-orange);
  border-color: var(--nick-orange-d);
  box-shadow: 0 4px 0 var(--nick-orange-d);
}
.btn-orange:hover { box-shadow: 0 6px 0 var(--nick-orange-d); }
.btn-orange:active { box-shadow: 0 1px 0 var(--nick-orange-d); }
.btn-orange:disabled { box-shadow: 0 4px 0 var(--nick-orange-d); }

.btn-ghost {
  color: var(--ink-2);
  background: transparent;
  border-color: var(--ink-3);
  box-shadow: 0 4px 0 var(--ink-3);
}
.btn-ghost:hover { box-shadow: 0 6px 0 var(--ink-3); }
.btn-ghost:active { box-shadow: 0 1px 0 var(--ink-3); }
.btn-ghost:disabled { box-shadow: 0 4px 0 var(--ink-3); }

/* ==========================================================================
   玩家面板（上下分栏）
   ========================================================================== */

.player-panel {
  width: min(94vmin, 520px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 6px 14px var(--shadow);
  animation: panel-in .32s var(--ease-bounce) both;
}

.panel-avatar {
  width: 52px;
  height: 52px;
  flex: none;
}
.panel-avatar .avatar-img {
  width: 100%; height: 100%;
  border-radius: 24%;
  object-fit: cover;
  display: block;
}

.panel-body { flex: 1; min-width: 0; }

.panel-name {
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.seat-tag {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
}
.seat-tag--black { color: var(--judy-blue-d); background: rgba(236,111,166,.12); }
.seat-tag--white { color: var(--nick-orange-d); background: rgba(229,72,77,.12); }

.panel-status {
  margin-top: 3px;
  font-size: clamp(13px, 3.2vw, 15px);
  font-weight: 600;
  color: var(--ink-2);
  min-height: 20px;
}

/* 轮到我：我的面板描边亮起、头像浮动 */
.player-panel--me.is-turn {
  border-color: var(--my-color, var(--judy-blue));
  box-shadow: 0 0 0 4px var(--my-glow, rgba(236,111,166,.2)), 0 6px 14px var(--shadow);
}
.player-panel--me.is-turn .panel-avatar {
  animation: avatar-float 1.6s var(--ease-out) infinite;
}

/* 离线：头像灰度 + 角标 */
.player-panel.is-offline .panel-avatar { filter: grayscale(.9) opacity(.7); }
.offline-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--paper);
  background: var(--ink-3);
  padding: 2px 8px;
  border-radius: 999px;
}

/* 思考中的跳动圆点 */
.dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.dots i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: dot-bounce 1s var(--ease-out) infinite;
}
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }

/* 占位剪影（对方没来） */
.placeholder-avatar {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  border: 2.5px dashed var(--ink-3);
  background: var(--paper-2);
}

/* ==========================================================================
   倒计时
   ========================================================================== */

.timer-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 8px;
}
.timer-big {
  font-family: var(--font-mono);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 96px;
  text-align: center;
}
.timer-big.urgent { color: var(--warn); animation: timer-pulse 1s var(--ease-out) infinite; }
.timer-cap { font-size: 14px; font-weight: 700; color: var(--ink-2); }

/* 顶部连接状态小字 */
.conn-info {
  width: min(94vmin, 520px);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  min-height: 18px;
  margin-bottom: 2px;
}
.conn-info.bad { color: var(--danger); }

/* ==========================================================================
   棋盘（视觉主角）
   ========================================================================== */

.board-wrap {
  position: relative;
  width: min(94vmin, 520px);
}

.board {
  --size: min(94vmin, 520px);
  --frame-w: 3px;
  /* 外框与最外线之间留一个完整格：padding = 半格 */
  --pad: calc((var(--size) - 2 * var(--frame-w)) / 32);
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  padding: var(--pad);
  border: 4px solid var(--ink);
  border-radius: 24px;
  background-color: var(--board-1);
  background-image:
    linear-gradient(to right,
      transparent calc(50% - 0.6px),
      var(--board-line) calc(50% - 0.6px),
      var(--board-line) calc(50% + 0.6px),
      transparent calc(50% + 0.6px)),
    linear-gradient(to bottom,
      transparent calc(50% - 0.6px),
      var(--board-line) calc(50% - 0.6px),
      var(--board-line) calc(50% + 0.6px),
      transparent calc(50% + 0.6px)),
    linear-gradient(150deg, var(--board-1), var(--board-2));
  background-size:
    calc(100% / 15) calc(100% / 15),
    calc(100% / 15) calc(100% / 15),
    100% 100%;
  background-origin: content-box, content-box, border-box;
  /* 厚度感：顶部内高光 + 底部内阴影 + 落地投影 */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 8px rgba(150, 105, 60, .2),
    0 8px 0 rgba(36, 28, 20, .3);
}

/* 木纹：保留极淡纹理，去掉颗粒噪点（噪点会显得脏） */
.board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .05;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(92deg, #5A3C1E 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, #5A3C1E 0 1px, transparent 1px 14px);
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell.clickable { cursor: pointer; }
.cell:not(.clickable) { cursor: default; }
.cell.clickable.empty-turn { cursor: not-allowed; }

/* 爪印星位 */
.paw {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 角色棋子（贴纸图片） */
.piece {
  position: relative;
  width: 86%;
  height: 86%;
  display: block;
  border-radius: 22%;
  object-fit: cover;
  filter: drop-shadow(0 3px 4px rgba(90,60,30,.35));
}

/* 落子预览（悬停） */
.preview {
  position: absolute;
  width: 86%;
  height: 86%;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .12s var(--ease-out), transform .12s var(--ease-out);
  pointer-events: none;
}
.cell.clickable:hover .preview { opacity: .35; transform: scale(1); }

/* 涟漪 */
.ripple {
  position: absolute;
  width: 86%;
  height: 86%;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  opacity: 0;
  pointer-events: none;
}
.just-played.jp-black .ripple { border-color: var(--judy-blue); animation: ripple-out .42s var(--ease-out) both; }
.just-played.jp-white .ripple { border-color: var(--nick-orange); animation: ripple-out .42s var(--ease-out) both; }

/* 落子一拍 */
.just-played .piece { animation: piece-drop .43s var(--ease-out) both; }

/* 爪爪棒冰贴纸（最后一手标记） */
.last-mark {
  position: absolute;
  top: -14%;
  right: -14%;
  width: 48%;
  height: 48%;
  z-index: 2;
  pointer-events: none;
  transform: rotate(16deg);
  filter: drop-shadow(0 2px 2px rgba(90,60,30,.3));
}
.just-played .last-mark { animation: mark-in .3s var(--ease-bounce) .35s both; }

/* 获胜棋子：光晕 + 上跳 */
.cell.win .piece {
  filter:
    drop-shadow(0 0 3px var(--dusk-glow))
    drop-shadow(0 0 7px var(--dusk-glow))
    drop-shadow(0 3px 4px rgba(90,60,30,.35));
  animation: win-hop .26s var(--ease-out) both;
}

/* 金色光带 */
.win-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.win-band path {
  fill: none;
  stroke: var(--dusk-1);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
  animation: band-draw .48s var(--ease-out) forwards,
             band-breath 1.2s ease-in-out .48s 2;
}

/* ==========================================================================
   结果卡片
   ========================================================================== */

/* 结果卡片：贴在棋盘底部，横向排布 —— 不遮挡获胜连线 */
.result-card {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%) translateY(14px);
  width: min(94%, 430px);
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 5px 0 rgba(36, 28, 20, .28), 0 14px 28px rgba(36, 28, 20, .22);
  text-align: left;
}
/* 文字区优先占位，禁止被按钮压成竖排 */
.result-card .rc-text { flex: 1 1 auto; min-width: 0; }
.result-card.show { display: flex; animation: card-rise .42s var(--ease-bounce) both; }
.result-card.rc-timeout.show { animation: card-rise .42s var(--ease-out) both; }

/* ==========================================================================
   获胜纸屑（纯装饰，pointer-events:none；reduced-motion 下整体不生成）
   ========================================================================== */

.confetti {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.confetti i {
  position: absolute;
  top: -8%;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(430px) rotate(540deg); }
}

/* ==========================================================================
   关键帧
   ========================================================================== */

@keyframes card-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(26px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 棋盘上空间紧张，头像与按钮都收紧 */
.result-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.result-avatar .piece { width: 100%; height: 100%; }
/* 和棋：两枚贴纸并排 */
.result-avatar.dual { display: flex; gap: 2px; align-items: center; }
.result-avatar.dual .piece { width: calc(50% - 1px); height: 100%; }

.result-title {
  margin: 0;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.result-actions .btn {
  /* 触控目标：移动端按钮高度需 ≥44px */
  padding: 14px 12px 13px;
  font-size: 13px;
  border-radius: 13px;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--ink);
}
.result-actions .btn.btn-blue { box-shadow: 0 3px 0 var(--judy-blue-d); }

/* 结果卡片整体收紧，抵消按钮长高带来的增量，避免撑破棋盘高度 */
.result-card { padding: 9px 11px; }
.result-avatar { width: 38px; height: 38px; flex: 0 0 38px; }

/* ==========================================================================
   读屏专用（视觉不可见，但仍会被屏幕阅读器朗读）
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   底部按钮区 / 选色
   ========================================================================== */

.controls {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: min(94vmin, 520px);
}

.color-picker { display: flex; gap: 10px; }
.color-picker .btn { padding: 11px 22px; }
#btn-color-black.active {
  color: var(--paper);
  background: var(--judy-blue);
  border-color: var(--judy-blue-d);
  box-shadow: 0 4px 0 var(--judy-blue-d);
}
#btn-color-white.active {
  color: var(--paper);
  background: var(--nick-orange);
  border-color: var(--nick-orange-d);
  box-shadow: 0 4px 0 var(--nick-orange-d);
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  margin-left: auto; margin-right: auto;
  max-width: 88vw;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 11px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 8px 20px var(--shadow-deep);
  animation: toast-in .28s var(--ease-out) both, toast-shake .36s ease-in-out .28s 2;
}
.toast.hidden { display: none; }

/* ==========================================================================
   局内聊天
   ========================================================================== */

/* 棋盘上的聊天浮层：不拦截棋盘点击，只显示最近若干条 */
.chat-layer {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: min(62%, 220px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
  pointer-events: none;
  /* 5 秒无新消息后整体淡出（.settled 由 client.js 加/移除） */
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s var(--ease-out, ease), transform .35s var(--ease-out, ease);
}
.chat-layer.settled {
  opacity: 0;
  transform: translateY(6px);
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  animation: bubble-in .28s var(--ease-bounce) both;
}
.bubble-row.mine { justify-content: flex-end; }
.bubble-row.other { justify-content: flex-start; }
.bubble-row.no-anim { animation: none; }

.b-avatar {
  width: 22px;
  height: 22px;
  flex: none;
}
.b-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 22%;
  object-fit: cover;
  display: block;
}

.b-text {
  max-width: 60%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  padding: 6px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 2px 0 rgba(36, 28, 20, .2);
  word-break: break-word;
}
.bubble-row.mine .b-text { background: var(--paper-2); }

/* 表情消息：大 emoji，无气泡底 */
.bubble-row.is-emoji .b-emoji {
  font-size: 27px;
  line-height: 1;
  display: inline-block;
  animation: emoji-pop .32s var(--ease-bounce) both;
}
.bubble-row.is-emoji.no-anim .b-emoji { animation: none; }

/* 底部聊天栏：占满 controls 一整行 */
.chat-bar {
  position: relative;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(36, 28, 20, .22);
}

.chat-emoji-wrap { position: static; flex: none; }
.chat-phrase-wrap { position: static; flex: none; }

.chat-icon-btn {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
.chat-icon-btn:active { transform: scale(.92); }

.chat-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-round);
  font-size: 15px;
  font-weight: 600;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  outline: none;
}
.chat-input::placeholder { color: var(--ink-3); }
.chat-input:focus { border-color: var(--nick-orange); }

.chat-send {
  flex: none;
  font-family: var(--font-round);
  font-size: 14px;
  font-weight: 800;
  padding: 10px 15px;
  color: var(--paper);
  background: var(--nick-orange);
  border: 2px solid var(--nick-orange-d);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--nick-orange-d);
  cursor: pointer;
}
.chat-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--nick-orange-d); }

/* 表情弹层：在表情按钮上方弹出 */
.emoji-panel {
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: min(92vw, 300px);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 8px 18px var(--shadow-deep);
  z-index: 20;
  animation: card-rise .26s var(--ease-bounce) both;
}
.emoji-panel.hidden { display: none; }
.emoji-panel button {
  font-size: 19px;
  line-height: 1;
  padding: 6px 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.emoji-panel button:hover { background: var(--paper-2); }
.emoji-panel button:active { transform: scale(.85); }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes emoji-pop {
  0%   { transform: scale(.2); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   登录页
   ========================================================================== */

/* 登录页整屏撑满，避免出现超长滚动页与中部大片空白 */
body:has(.login-screen) {
  overflow-y: auto;
}
body:has(.login-screen) #app {
  padding: 20px 16px;
  justify-content: center;
}

.login-screen {
  justify-content: center;
  gap: 15px;
  width: min(94vw, 460px);
  position: relative;
  z-index: 2;
}

.login-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.login-title-row .mini { width: 40px; height: 40px; flex: 0 0 40px; }
.login-title-row .mini img {
  width: 100%; height: 100%;
  border-radius: 24%;
  object-fit: cover;
  display: block;
}

.login-title {
  margin: 0;
  font-size: clamp(24px, 6.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(36, 28, 20, .35);
}
.login-sub {
  margin: 0;
  text-align: center;
  color: var(--paper);
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 700;
  opacity: .92;
  text-shadow: 0 1px 0 rgba(36, 28, 20, .3);
}

.account-cards {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  justify-content: center;
}

.account-card {
  flex: 1 1 0;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 12px 13px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 rgba(36, 28, 20, .28);
  cursor: pointer;
  text-align: center;
  font-family: var(--font-round);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
  animation: panel-in .32s var(--ease-bounce) both;
}
.account-card:nth-child(2) { animation-delay: .06s; }
.account-card:hover { transform: translateY(-2px); }

.card-avatar { width: 62px; height: 62px; }
.card-avatar img {
  width: 100%; height: 100%;
  border-radius: 24%;
  object-fit: cover;
  display: block;
}
.card-name { font-size: 16px; font-weight: 800; }
.card-sub { font-size: 12px; font-weight: 700; color: var(--ink-2); }

.account-card.selected {
  transform: translateY(-4px);
  border-color: var(--sel-color, var(--judy-blue));
  box-shadow: 0 0 0 4px var(--sel-glow, rgba(236,111,166,.3)), 0 7px 0 rgba(36, 28, 20, .28);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

.pw-input {
  width: 100%;
  font-family: var(--font-round);
  font-size: 17px;
  padding: 14px 18px;
  color: var(--ink);
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.pw-input::placeholder { color: var(--ink-3); }
.pw-input:focus {
  border-color: var(--sel-color, var(--judy-blue));
  box-shadow: 0 0 0 4px var(--sel-glow, rgba(236,111,166,.22));
}
.pw-input.shake { animation: input-shake .36s ease-in-out 2; }

.btn-enter { width: 100%; padding: 15px; font-size: 18px; }

/* 爪印小径：登录页中段的留白填充，兼作动物城氛围 */
.paw-trail {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: rotate(-9deg);
  color: rgba(36, 28, 20, .22);
}
.paw-trail svg { width: 22px; height: 22px; display: block; }
.paw-trail svg:nth-child(2) { transform: translateY(-9px) scale(.92); }
.paw-trail svg:nth-child(3) { transform: translateY(4px) scale(.98); }
.paw-trail svg:nth-child(4) { transform: translateY(-7px) scale(.88); }

.login-error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
  min-height: 20px;
  text-align: center;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

/* 落子：落下 → 砸扁 → 回弹 → 归位（430ms） */
@keyframes piece-drop {
  0%   { opacity: 0; transform: translateY(-22px) scale(1.18); }
  32%  { opacity: 1; transform: translateY(0) scale(1.18); }
  51%  { transform: scale(.88); }
  79%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* 涟漪：半径 → 2.6 倍，描边淡出（420ms） */
@keyframes ripple-out {
  0%   { opacity: .5; transform: scale(.5); border-width: 3px; }
  100% { opacity: 0; transform: scale(2.6); border-width: 1px; }
}

/* 萝卜叶十字已替换为爪爪棒冰贴纸 */
@keyframes mark-in {
  0%   { opacity: 0; transform: rotate(-30deg) scale(.4); }
  100% { opacity: 1; transform: rotate(16deg) scale(1); }
}

/* 获胜棋子上跳 */
@keyframes win-hop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}

/* 光带描出 */
@keyframes band-draw {
  from { stroke-dashoffset: var(--band-len, 600); }
  to   { stroke-dashoffset: 0; }
}

/* 光带呼吸 */
@keyframes band-breath {
  0%, 100% { opacity: .8; }
  50%      { opacity: .45; }
}

/* 面板入场 */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 我的头像浮动 */
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* 思考圆点 */
@keyframes dot-bounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* 倒计时脉冲 */
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* 结果卡片弹出 */
@keyframes card-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 超时结果卡：下方滑入 + 轻抖 */
@keyframes card-slide {
  0%   { opacity: 0; transform: translate(-50%, 30%) scale(.96); }
  70%  { opacity: 1; transform: translate(-50%, -52%) scale(1.02); }
  85%  { transform: translate(-50%, -48%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Toast 入场 + 抖动 */
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes toast-shake {
  0%, 100% { transform: translate(-50%, 0); }
  25%      { transform: translate(calc(-50% - 6px), 0); }
  75%      { transform: translate(calc(-50% + 6px), 0); }
}

/* 密码框抖动 */
@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  75%      { transform: translateX(7px); }
}

/* ==========================================================================
   小屏适配（棋子最小约 16px：轮廓优先，细节隐藏）
   ========================================================================== */

@media (max-width: 420px) {
  /* 贴纸图片无需细节隐藏，仅收细光带 */
  .win-band path { stroke-width: 3; }
}

/* 超小屏：登录卡片纵向堆叠 */
@media (max-width: 360px) {
  .account-cards { flex-direction: column; align-items: center; }
  .account-card { width: 100%; max-width: 360px; }
}

/* ==========================================================================
   桌面端：棋盘放大（手机上仍是 94vmin，桌面上把空间用起来）
   ========================================================================== */

@media (min-width: 760px) {
  /* 桌面上天际线只占很窄一条：收掉底部预留，并给棋盘一个"能塞进常见视口"的上限 */
  #app { padding: 10px 12px; }
  .board-wrap,
  .board { --size: min(58vh, 540px); }
  .board-wrap { width: var(--size); }
}

/* ==========================================================================
   无障碍：减少动态效果（停全部动画，功能正常）
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .just-played .piece,
  .piece { opacity: 1 !important; transform: none !important; }
  .ripple { display: none !important; }
}

/* 快捷短语面板（v4 追加） */
.phrase-panel {
  position: absolute;
  bottom: 52px;
  left: 50%;
  width: min(92vw, 340px);
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 8px 18px var(--shadow-deep);
  z-index: 20;
  animation: card-rise .26s var(--ease-bounce) both;
}
.phrase-panel.hidden { display: none; }
.phrase-chip {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 11px;
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.phrase-chip:hover { background: rgba(236,111,166,.16); }
.phrase-chip:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }