/* ==========================================================================
   超级马里奥大富翁 · 联机版 — 音游风格 UI
   与「节奏打击」统一：深空渐变背景 / 霓虹青·金·粉·蓝 / 玻璃卡片 / 渐变标题
   --------------------------------------------------------------------------
   设计约束（不可破坏）：
   - 本文件加载顺序在 /game-shell.css、/game-ui.css 之后（见 index.html），
     同权重 !important 规则可覆盖外壳，保证本游戏专属视觉生效。
   - JS 里所有 className 依赖（char-card / pixel-btn / modal-* / board-* …）
     与动画类名（mp-token-float / mp-token-bounce-up / roll-btn …）全部保留。
   - 全局 CSS 变量名沿用旧版，JS 内联样式里 var(--sky) 等引用自动跟随新配色。
   ========================================================================== */

/* ===== 基础 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* === 音游霓虹主色（与节奏打击一致）=== */
  --neon-cyan: #7ef2ff;
  --neon-gold: #ffd700;
  --neon-pink: #ff9ad5;
  --neon-blue: #2196f3;
  --neon-amber: #ffb300;
  --neon-mint: #3df0a0;
  --neon-danger: #ff5c7a;

  /* === 沿用旧变量名，值改为霓虹深空配色 ===
     JS 内联样式引用的变量：--sky --sky-lt --gold --black --white --red --green --gray */
  --sky: #1a0a3a;            /* 深空紫（全屏背景顶色）*/
  --sky-lt: #0a0a1a;         /* 深空蓝（全屏背景底）*/
  --black: #05060f;          /* 近黑（文字阴影/描边）*/
  --white: #f2f6ff;          /* 冷白（正文）*/
  --gray: #9aa4bf;           /* 次级文字 */
  --gray-dk: #3a4058;        /* 暗灰（面板内衬）*/
  --red: var(--neon-danger); /* 危险/损失 */
  --red-dk: #c2185b;
  --gold: var(--neon-gold);  /* 金币/高亮 */
  --green: var(--neon-mint); /* 成功/就绪 */
  --green-dk: #0f9d6e;
  --green-lt: #a7f3d0;
  --blue: var(--neon-blue);
  --pink: var(--neon-pink);
  --orange: var(--neon-amber);
  --brick: var(--neon-blue); /* 面板强调边（原橙棕→霓虹蓝）*/
  --brick-dk: #0d47a1;
  --brick-lt: #64b5f6;
  --under: #141430;          /* 玻璃深底 */
  --under-lt: #23234a;
  --skin: #ffdab9;
  --brown: #4a3f6b;
  --brown-lt: #7b6f9e;

  /* 旧版区域色（兼容遗留样式，改为霓虹化版本）*/
  --region-grassland: #5ad87e;
  --region-pipe: #00c8a0;
  --region-lava: #ff5c7a;
  --region-desert: #ffd166;
  --region-ice: #7ef2ff;
  --region-castle: #8f8fd8;
}

html, body {
  /* 外壳 /game-shell.css 已用 !important 铺固定深空渐变；
     这里做兜底，保证单独打开本游戏时背景同样正确 */
  background: linear-gradient(180deg, #1a0a3a 0%, #0a0a1a 60%, #001a2a 100%);
  background-attachment: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  color: var(--white);
  font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 深空氛围光晕（固定装饰层）*/
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 400px at 12% 18%, rgba(126, 242, 255, .10), transparent 65%),
    radial-gradient(700px 500px at 88% 82%, rgba(255, 154, 213, .09), transparent 65%),
    radial-gradient(500px 380px at 78% 12%, rgba(33, 150, 243, .08), transparent 65%);
}

#root {
  position: relative;
  z-index: 1;
}

/* React 挂载前的加载占位（:empty 仅匹配空根节点）*/
#root:empty::after {
  content: '加载中…';
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, .45);
  animation: loadPulse 1.4s ease-in-out infinite alternate;
}

@keyframes loadPulse {
  from { opacity: .35; }
  to   { opacity: .9; }
}

/* 滚动条（霓虹青）*/
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(126, 242, 255, .35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 242, 255, .55); }

/* ===== 渐变标题（全局：标题/弹窗标题/面板标题）===== */
.game-title,
.modal-title,
.sidebar-title,
.board-myprops-title,
.boss-name {
  background: linear-gradient(90deg, #7ef2ff, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;   /* 覆盖外壳 [class*="title"] 的白色 */
  text-shadow: none !important;
  letter-spacing: 2px;
}

/* ===== 玻璃卡片 ===== */
.glass-card,
.modal-box,
.board-map-svg-wrap,
.board-hud-panel,
.sidebar,
.lobby-screen > div[style] {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ===== 按钮（玻璃底 + 白边 + 圆角 12px，hover 发光）=====
   覆盖外壳 [class*="btn"] 的统一玻璃底，让彩色变体生效 */
.pixel-btn {
  --btn-bg: rgba(255, 255, 255, .08);
  font-family: inherit !important;
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 600;
  letter-spacing: 1px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: var(--btn-bg) !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s, box-shadow .25s, filter .2s, border-color .2s !important;
}

.pixel-btn:hover { transform: translateY(1px) scale(0.99); }
.pixel-btn.fullscreen-btn {
  background: var(--gold, #e8b923); color: #241f00; font-weight: 700;
  margin-right: 8px; border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pixel-btn.fullscreen-btn:active { transform: scale(0.94); }
@media (max-width: 480px) {
  .pixel-btn.fullscreen-btn { font-size: 12px; padding: 8px 10px; }
}over {
  background: var(--btn-bg) !important;
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(33, 150, 243, .35), inset 0 0 12px rgba(255, 255, 255, .05) !important;
  border-color: rgba(126, 242, 255, .45) !important;
}

.pixel-btn:active { transform: scale(.96); }
.pixel-btn:focus-visible { outline: 2px solid rgba(126, 242, 255, .8); outline-offset: 2px; }

.pixel-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.5);
  box-shadow: none !important;
}

/* 主按钮：霓虹渐变（蓝→金）*/
.pixel-btn-yellow { --btn-bg: linear-gradient(90deg, rgba(33, 150, 243, .8), rgba(255, 179, 0, .8)); }
.pixel-btn-green  { --btn-bg: linear-gradient(90deg, rgba(61, 240, 160, .78), rgba(126, 242, 255, .78)); }
.pixel-btn-blue   { --btn-bg: linear-gradient(90deg, rgba(33, 150, 243, .85), rgba(126, 242, 255, .85)); }
.pixel-btn-red    { --btn-bg: linear-gradient(90deg, rgba(255, 92, 122, .85), rgba(255, 154, 213, .85)); }

/* ===== 输入框 ===== */
input[type="number"] {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 9px 12px !important;
  min-height: 40px;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}

input[type="number"]:focus {
  border-color: #7ef2ff !important;
  box-shadow: 0 0 14px rgba(126, 242, 255, .25) !important;
}

/* ===== 开始画面（单机遗留，保留样式）===== */
.start-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cloud {
  position: absolute;
  background: rgba(126, 242, 255, .08);
  border: 1px solid rgba(126, 242, 255, .22);
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 24px rgba(126, 242, 255, .12);
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border: inherit;
  border-radius: 50%;
}

.cloud::before { width: 60%; height: 120%; top: -60%; left: 10%; }
.cloud::after  { width: 50%; height: 100%; top: -40%; right: 10%; }

.game-title {
  font-size: clamp(20px, 4vw, 44px);
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.4;
  filter: drop-shadow(0 0 14px rgba(126, 242, 255, .35));
  animation: titleBeat 2.4s ease-in-out infinite;
}

/* 标题随节奏律动 */
@keyframes titleBeat {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(126, 242, 255, .25)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 215, 0, .45)); transform: scale(1.015); }
}

.game-subtitle {
  font-size: clamp(12px, 1.6vw, 15px);
  color: rgba(255, 255, 255, .6);
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.boss-preview {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  max-width: 500px;
  color: var(--white);
}

.boss-preview-title {
  color: var(--neon-pink);
  font-weight: 700;
  margin-bottom: 4px;
  font-size: 14px;
}

/* ===== 角色选择 ===== */
.character-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
  max-width: 700px;
}

.char-card {
  width: 96px;
  min-height: 44px;
  padding: 12px 6px 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .15s, box-shadow .25s, border-color .2s;
}

.char-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(33, 150, 243, .32);
}

.char-card.disabled {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.char-card.selected {
  border-color: rgba(255, 215, 0, .8) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, .35) !important;
  background: rgba(255, 215, 0, .08) !important;
}

.char-pixel {
  width: 48px;
  height: 32px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px rgba(126, 242, 255, .25));
}

.char-name {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

.char-hp {
  font-size: 10px;
  color: var(--neon-mint) !important;
  margin-top: 2px;
}

/* ===== 人数选择（单机遗留）===== */
.player-count-select {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.count-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  width: 48px;
  height: 48px;
  min-height: 44px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

.count-btn:hover { border-color: var(--neon-gold); color: var(--neon-gold); }
.count-btn.active { background: rgba(255, 215, 0, .18); border-color: var(--neon-gold); color: var(--neon-gold); }

.current-player-label {
  font-size: 12px;
  color: var(--neon-gold);
  margin-bottom: 6px;
}

.confirmed-players {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0;
  min-height: 30px;
}

.confirmed-player {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--white);
}

/* ===== 大厅（联机）===== */
.lobby-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px;
  overflow-y: auto;
}

/* 大厅左右两个面板 → 玻璃卡片 */
.lobby-panel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.lobby-players {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
  min-height: 40px;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
  padding: 6px 12px !important;
  font-size: 12px;
  color: var(--white);
  transition: box-shadow .2s, border-color .2s;
}

.lobby-player.current {
  border-color: rgba(126, 242, 255, .55) !important;
  box-shadow: 0 0 12px rgba(126, 242, 255, .18) !important;
}

/* 联机玩家小卡片（旧版 .multi-player-card 兼容保留）*/
.multi-player-card {
  padding: 6px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-left: 3px solid transparent;
  border-radius: 10px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--white);
}

.room-info {
  font-size: 12px;
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 6px 14px;
  margin-bottom: 8px;
}

.room-info code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13px;
  color: var(--neon-gold);
  background: rgba(0, 0, 0, .3);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ===== 游戏面板（联机棋盘）===== */
.game-screen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: transparent;   /* 深空渐变由 body 承担 */
}

/* 顶部霓虹扫描光带（节奏打击感）*/
.game-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #7ef2ff, #ffd700, #ff9ad5, transparent);
  animation: beatSweep 3s ease-in-out infinite;
  opacity: .7;
}

@keyframes beatSweep {
  0%, 100% { transform: translateX(-25%); opacity: .35; }
  50%      { transform: translateX(25%);  opacity: .85; }
}

/* 效果横幅容器 */
.mp-effect-toast-wrap {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.mp-effect-banner {
  max-width: min(92vw, 520px);
  padding: 12px 18px;
  background: rgba(20, 22, 50, .9);
  border: 1px solid rgba(255, 215, 0, .5);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(255, 215, 0, .18), 0 8px 30px rgba(0, 0, 0, .4);
  color: var(--neon-gold);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: mp-toast-in .3s ease-out;
}

@keyframes mp-toast-in {
  from { transform: translateY(-12px) scale(.92); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== 顶部栏 ===== */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 10px 12px 0;
  min-height: 44px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 12px;
  color: var(--white);
}

.game-screen .game-header { letter-spacing: 1px !important; } /* 覆盖外壳的 2px 大字距 */

.game-header-left,
.game-header .header-left {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.game-header-right,
.game-header .header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.help-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  min-height: 36px;
  padding: 5px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  color: var(--white);
  cursor: pointer;
  transition: box-shadow .2s, transform .15s, border-color .2s;
}

.help-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(33, 150, 243, .3);
  border-color: rgba(126, 242, 255, .45);
}

.round-info { color: var(--neon-cyan); font-size: 12px; font-weight: 600; }
.turn-indicator { display: flex; align-items: center; gap: 6px; }

/* ===== 游戏主体布局 ===== */
.game-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 12px;
  padding: 10px 12px 12px;
}

/* ===== SVG 节点地图棋盘 ===== */
.board-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.board-container-map {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 12px;
  padding: 0;
  background: transparent;
}

.board-map-svg-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  position: relative;
  min-width: 0;
}

.board-map-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  image-rendering: pixelated;
}

.map-node { cursor: pointer; }

/* 节点 hover：霓虹青描边发光（原金色改为音游青）*/
.map-node:hover .node-bg {
  filter: brightness(1.18) drop-shadow(0 0 4px rgba(126, 242, 255, .9));
  stroke: #7ef2ff;
  stroke-width: 0.06;
}

/* 格子上陷阱标记（旧版 .tile-trap 兼容保留）*/
.tile-trap {
  position: absolute;
  right: 2px;
  bottom: 2px;
  font-size: 12px;
  line-height: 1;
  z-index: 4;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .8));
  pointer-events: none;
}

.map-node-corner .node-bg {
  stroke: #ffd700 !important;
}

.node-label,
.node-icon,
.node-houses,
.node-owner,
.node-tokens {
  pointer-events: none;
}

/* 节点中文名用无衬线字体（覆盖 JS 内联的像素字体）*/
.map-node .node-label {
  font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 600;
}

/* ===== 玩家 token 悬浮/弹跳动画（JS 依赖，保持类名与关键帧）===== */
.mp-token-float {
  animation: mpTokenFloat 1.2s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes mpTokenFloat {
  0%   { transform: translateY(-0.02px); }
  100% { transform: translateY(0.05px); }
}

.mp-token-bounce {
  animation: mpTokenBounce 0.3s ease-in-out;
}

@keyframes mpTokenBounce {
  0%   { transform: scaleY(1) scaleX(1); }
  30%  { transform: scaleY(1.2) scaleX(0.85); }
  70%  { transform: scaleY(0.85) scaleX(1.15); }
  100% { transform: scaleY(1) scaleX(1); }
}

.mp-token-bounce-up,
.mp-token-bounce-air,
.mp-token-bounce-land {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 0.08s ease-out;
}

.mp-token-bounce-up .mp-token-float   { animation: walkHopUp 0.08s ease-out forwards; }
.mp-token-bounce-air .mp-token-float  { animation: walkHopAir 0.12s linear forwards; }
.mp-token-bounce-land .mp-token-float { animation: walkHopLand 0.05s ease-in forwards; }

@keyframes walkHopUp {
  0%   { transform: translateY(-0.02px) scale(1, 1); }
  100% { transform: translateY(0px) scale(0.92, 1.12); }
}

@keyframes walkHopAir {
  0%   { transform: translateY(0px) scale(0.92, 1.12); }
  50%  { transform: translateY(0px) scale(1.05, 0.95); }
  100% { transform: translateY(0px) scale(1, 1); }
}

@keyframes walkHopLand {
  0%   { transform: translateY(0px) scale(1, 1); }
  100% { transform: translateY(0px) scale(1.18, 0.82); }
}

/* ===== HUD 面板（棋盘右侧）===== */
.board-hud-panel {
  width: clamp(200px, 20vw, 260px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  overflow-y: auto;
}

.board-center-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
}

.board-center-map .center-avatar { margin-bottom: 4px; }

.board-center-map .center-name {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.board-center-map .center-dice {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  justify-content: center;
}

.board-center-map .pixel-dice {
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
}

.board-center-map .center-msg {
  font-size: 12px;
  color: var(--white);
  text-align: center;
  padding: 8px 10px;
  line-height: 1.6;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  width: 100%;
}

.board-center-map .roll-btn {
  margin-top: 8px;
  font-size: 14px;
  padding: 10px 18px;
  width: 100%;
  min-height: 48px;
  animation: pulse 1.5s infinite;
}

/* 掷骰脉冲（霓虹青）*/
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 242, 255, .4); }
  50%      { box-shadow: 0 0 0 10px rgba(126, 242, 255, 0); }
}

/* ===== 玻璃骰子 ===== */
.pixel-dice {
  width: clamp(52px, 5vw, 68px);
  height: clamp(52px, 5vw, 68px);
  background: rgba(10, 14, 30, .75);
  border: 1px solid rgba(126, 242, 255, .4);
  border-radius: 14px;
  box-shadow: 0 0 14px rgba(126, 242, 255, .16), inset 0 0 14px rgba(126, 242, 255, .08);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px;
  gap: 4px;
  transition: transform .1s;
}

.pixel-dice.rolling { animation: shake .1s infinite; }

@keyframes shake {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(5deg) scale(1.05); }
  50%  { transform: rotate(-5deg) scale(.95); }
  75%  { transform: rotate(3deg) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}

.dice-dot { width: 100%; height: 100%; }

.dice-dot.filled {
  background: radial-gradient(circle at 35% 35%, #b8f8ff, #7ef2ff 55%, #2196f3);
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(126, 242, 255, .65);
}

.center-msg {
  font-size: 12px;
  color: var(--white);
  text-align: center;
  padding: 6px;
  max-width: 90%;
  line-height: 1.6;
}

/* ===== 我的地产（HUD 内）===== */
.board-myprops {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .18);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.board-myprops-title {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.board-myprops-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
}

.board-myprops-empty {
  text-align: center;
  color: rgba(255, 255, 255, .4);
  font-size: 12px;
  padding: 8px 0;
}

.board-myprops-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 10px !important;
}

.board-myprops-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-myprops-sell {
  font-size: 11px;
  padding: 5px 10px;
  min-height: 32px;
  flex-shrink: 0;
}

/* ===== 侧边栏（排名/道具/银行/日志）===== */
.sidebar {
  width: clamp(280px, 26vw, 340px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--white);
}

.sidebar-section {
  padding: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
}

.sidebar-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* 玩家卡片 */
.player-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px !important;
  margin: 6px 0 !important;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 12px !important;
  transition: box-shadow .25s, border-color .25s, transform .15s;
}

.player-card:hover { transform: translateX(2px); }

.player-card.is-active {
  background: rgba(33, 150, 243, .12) !important;
  border-color: rgba(126, 242, 255, .6) !important;
  box-shadow: 0 0 14px rgba(126, 242, 255, .22) !important;
  animation: cardGlow 1.6s ease-in-out infinite alternate;
}

@keyframes cardGlow {
  from { box-shadow: 0 0 6px rgba(126, 242, 255, .08); }
  to   { box-shadow: 0 0 16px rgba(126, 242, 255, .3); }
}

.player-card.bankrupt-player {
  opacity: .55;
  background: rgba(255, 92, 122, .06) !important;
}

.player-card.bankrupt { opacity: .4; text-decoration: line-through; }

.player-rank-badge {
  font-family: inherit !important;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .09) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.player-avatar-box {
  width: 44px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  transition: all .3s;
}

.player-card.is-active .player-avatar-box {
  border-color: var(--neon-cyan);
  animation: avatarPulse 1s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgba(126, 242, 255, .3);
}

@keyframes avatarPulse {
  from { transform: scale(1); border-color: var(--neon-cyan); }
  to   { transform: scale(1.08); border-color: var(--neon-gold); }
}

.player-detail { flex: 1; line-height: 1.6; }
.player-money { color: var(--neon-gold); font-weight: 700; font-size: 12px; }

.hp-bar-bg {
  width: 100px;
  height: 8px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 99px;
  margin-top: 3px;
  overflow: hidden;
}

.hp-bar-fill { height: 100%; transition: width .3s; background: var(--neon-mint); }
.hp-text { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* 资产列表（单机遗留）*/
.property-list { max-height: 120px; overflow-y: auto; }

.property-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  font-size: 12px;
  transition: background .2s;
}

.property-item:hover { background: rgba(255, 255, 255, .05); }

.property-color-dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 3px;
  flex-shrink: 0;
}

/* 日志 */
.game-log,
.mp-game-log {
  flex: 1;
  overflow-y: auto;
  font-size: 12px !important;
  color: #dde3f0 !important;
  line-height: 1.6 !important;
}

.log-entry {
  padding: 3px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: var(--gray);
}

.log-entry.important { color: var(--neon-gold); }
.log-entry.danger { color: var(--neon-danger); }
.log-entry.boss { color: var(--neon-amber); }

/* ===== 弹窗 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 18, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-box {
  background: rgba(18, 20, 46, .92) !important;
  border: 1px solid rgba(126, 242, 255, .28) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 24px rgba(33, 150, 243, .12) !important;
  padding: 22px 24px;
  max-width: 520px;
  width: 92%;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  max-height: 82vh;
  overflow-y: auto;
  color: var(--white);
}

.modal-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 10px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.modal-actions .pixel-btn { min-width: 96px; }

/* ===== Boss 战斗（单机遗留，保留样式）===== */
.boss-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 18, .92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: bossIn .5s ease-out;
}

@keyframes bossIn {
  from { opacity: 0; transform: scale(1.2); }
  to   { opacity: 1; transform: scale(1); }
}

.boss-stage {
  background: rgba(20, 22, 50, .92);
  border: 1px solid rgba(255, 92, 122, .45);
  border-radius: 16px;
  padding: 20px 30px;
  max-width: 520px;
  width: 90%;
  text-align: center;
  color: var(--white);
}

.boss-name {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 800;
  margin-bottom: 8px;
  animation: glow 1.5s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px rgba(255, 92, 122, .3); }
  to   { text-shadow: 0 0 20px rgba(255, 92, 122, .6); }
}

.boss-icon-box {
  width: clamp(52px, 8vw, 80px);
  height: clamp(52px, 8vw, 80px);
  background: rgba(255, 92, 122, .15);
  border: 1px solid rgba(255, 92, 122, .5);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto;
  animation: idle 1s ease-in-out infinite alternate;
}

@keyframes idle {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

.boss-hp-bg {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 99px;
  margin: 8px 0;
  position: relative;
  overflow: hidden;
}

.boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5c7a, #ff9ad5);
  transition: width .5s;
  position: relative;
}

.boss-atk-info { font-size: 12px; color: var(--neon-amber); margin: 8px 0; }

.boss-player-box {
  margin: 12px 0;
  padding: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  font-size: 13px;
}

.boss-player-hp-bg {
  width: 120px;
  height: 8px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 99px;
  margin: 4px auto;
  overflow: hidden;
}

.boss-player-hp-fill { height: 100%; transition: width .3s; background: var(--neon-mint); }

.boss-log {
  font-size: 12px;
  color: var(--gray);
  margin-top: 6px;
  max-height: 60px;
  overflow-y: auto;
}

.boss-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.boss-defeated { color: var(--neon-gold); font-size: 20px; animation: bounce .5s ease infinite alternate; }
.boss-reward { color: var(--neon-mint); margin: 8px 0; }

/* ===== 帮助 ===== */
.help-content {
  text-align: left;
  font-size: 13px;
  line-height: 2;
  color: var(--white);
}

.help-content h3 {
  color: var(--neon-cyan);
  margin: 10px 0 4px;
  font-size: 14px;
  letter-spacing: 1px;
}

.help-content ul { padding-left: 18px; margin: 4px 0; }

/* ===== 旧版蛇形棋盘（兼容保留）===== */
.board-container-comb { position: relative; }

.board.board-comb { gap: 2px; }

.board-comb .tile {
  font-size: 11px;
  min-height: 0;
  min-width: 0;
}

.board-comb .tile-name {
  font-size: 10px;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
}

.board-void {
  background: transparent;
  border: none;
  min-height: 0;
  pointer-events: none;
}

.board-hud-inset {
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
  padding: 2px;
}

.board-hud-inset .board-center-snake {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px 7px;
  grid-column: auto;
  grid-row: auto;
  border: 1px solid rgba(255, 92, 122, .4);
  border-radius: 12px;
  background: rgba(20, 22, 50, .92);
}

.board-hud-inset .center-name,
.board-center-snake .center-name {
  font-size: 12px;
  margin-bottom: 1px;
}

.board-hud-inset .center-dice,
.board-center-snake .center-dice {
  gap: 6px;
  margin: 3px 0;
  flex-shrink: 0;
}

.board-hud-inset .pixel-dice,
.board-center-snake .pixel-dice {
  width: 40px;
  height: 40px;
  padding: 5px;
}

.board-hud-inset .center-msg,
.board-center-snake .center-msg {
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
  color: var(--white);
}

.board-hud-inset .roll-btn,
.board-center-snake .roll-btn {
  font-size: 11px;
  padding: 3px 6px;
  margin-top: 3px;
  white-space: nowrap;
}

/* 旧版 grid 棋盘 */
.board {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 2px;
  width: min(96vw, calc(82vh * 18 / 12));
  aspect-ratio: 18/12;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}

/* 旧版格子 */
.tile {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-align: center;
  padding: 2px 1px;
  overflow: visible;
  cursor: pointer;
  transition: filter .15s, transform .1s, box-shadow .15s;
}

.tile:hover { filter: brightness(1.12); transform: translateY(-1px); }
.tile:active { filter: brightness(.9); transform: translateY(0); }

.tile-pixel-icon { margin-bottom: 1px; line-height: 0; }
.tile-name { line-height: 1.2; word-break: break-all; }
.tile-price { margin-top: 1px; font-weight: bold; }
.tile-toll { margin-top: 1px; font-size: 10px; font-weight: bold; color: var(--neon-gold); }

.tile-corner {
  border-color: var(--neon-gold) !important;
  box-shadow: 0 0 0 1px rgba(255, 215, 0, .5), 0 0 12px rgba(255, 215, 0, .15);
}

.tile.active-tile {
  box-shadow: 0 0 0 3px var(--neon-cyan), 0 0 16px rgba(126, 242, 255, .35);
  z-index: 2;
}

.tile-char-wrap {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  z-index: 5;
}

.tile-char {
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(10, 14, 30, .8);
  border-radius: 6px;
  transition: transform .2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.tile-char.hop { animation: hop .3s ease; }

@keyframes hop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px) scale(1.15); }
  100% { transform: translateY(0) scale(1); }
}

.tile-houses { position: absolute; bottom: 2px; right: 2px; display: flex; gap: 1px; }
.tile-house { width: 6px; height: 6px; background: var(--neon-mint); border-radius: 1px; }
.tile-hotel { width: 10px; height: 6px; background: var(--neon-danger); border-radius: 2px; font-size: 6px; color: #fff; display: flex; align-items: center; justify-content: center; }
.tile-owner { position: absolute; bottom: 2px; left: 2px; width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 2px; }

/* 旧版棋盘中央 */
.board-center {
  grid-column: 2/11;
  grid-row: 2/7;
  background: rgba(20, 22, 50, .88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .4);
}

.brick-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .06;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 14px, var(--neon-blue) 14px, var(--neon-blue) 16px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, var(--neon-blue) 22px, var(--neon-blue) 24px);
  pointer-events: none;
}

.brick-question {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--neon-gold);
  background: rgba(255, 215, 0, .2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--neon-gold);
  font-weight: bold;
  animation: questionBounce 2s ease-in-out infinite alternate;
  box-shadow: 0 0 12px rgba(255, 215, 0, .25);
}

@keyframes questionBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

.pipe-deco {
  position: absolute;
  width: 16px;
  height: 24px;
  background: #00c8a0;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 4px 4px 0 0;
}

.center-avatar {
  margin-bottom: 4px;
  animation: avatarFloat 2s ease-in-out infinite alternate;
}

@keyframes avatarFloat {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-4px) scale(1.03); }
}

.center-name {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
  color: var(--white);
}

.center-dice { display: flex; gap: 14px; margin: 6px 0; }

/* 旧版标题弹跳（bounce 复用）*/
@keyframes bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.roll-btn {
  margin-top: 8px;
  font-size: 14px;
  padding: 10px 22px;
  min-height: 48px;
  animation: pulse 1.5s infinite;
}

/* ===== 联机：地产出售行（遗留兼容）===== */
.mp-property-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mp-property-name { flex: 1; min-width: 0; font-size: 12px; }
.mp-property-lv { color: var(--neon-mint); font-size: 11px; }

.mp-sell-btn {
  flex-shrink: 0;
  font-size: 11px !important;
  padding: 5px 8px !important;
  min-width: 72px;
  line-height: 1.2;
}

/* ===== 响应式 ===== */
@media (max-width: 900px) {
  .game-body { flex-direction: column; }
  .sidebar {
    width: 100%;
    max-height: 32vh;
  }
  .board-hud-panel {
    width: 100%;
    max-height: 34vh;
  }
}

@media (max-width: 480px) {
  /* 手机紧凑布局 */
  .game-header { margin: 8px 8px 0; padding: 6px 10px; font-size: 11px; gap: 6px; }
  .game-header-left, .game-header-right { gap: 6px; }
  .game-body { padding: 8px 8px 10px; gap: 8px; }
  .board-map-svg-wrap { padding: 6px; border-radius: 12px; }
  .board-hud-panel { padding: 10px; border-radius: 12px; }
  .sidebar { padding: 8px; border-radius: 12px; }
  .sidebar-section { padding: 10px; }
  .modal-box { padding: 16px; width: 94%; border-radius: 14px; }
  .char-card { width: 84px; padding: 10px 4px; }
  .pixel-dice { width: 46px; height: 46px; padding: 5px; gap: 3px; }
  .board-center-map .pixel-dice { width: 46px; height: 46px; }
  .pixel-btn { font-size: 12px; padding: 9px 14px; }
  .lobby-screen { padding: 14px 10px; gap: 10px; }
  .game-title { font-size: clamp(18px, 6vw, 26px); }
  .game-subtitle { font-size: 11px; letter-spacing: 2px; }
  .player-card { padding: 8px !important; gap: 8px; }
  .board-myprops-sell { min-height: 30px; }
  .help-btn { padding: 5px 10px; font-size: 11px; }
}

/* 触屏设备去掉 hover 粘滞 */
@media (hover: none) {
  .char-card:hover { transform: none; }
  .pixel-btn:hover { transform: none; }
}


/* ===== v2 手机端增强: 棋盘优先 ===== */
@media (max-width: 480px) {
  /* 棋盘占满宽度, 高度优先 */
  .board-map-svg-wrap {
    flex: 1 1 auto;
    min-height: 40vh;
    padding: 4px;
    order: 1;
  }
  /* HUD 面板改底部紧凑抽屉 */
  .board-hud-panel {
    width: 100%;
    max-height: 26vh;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    order: 2;
    overflow-y: auto;
  }
  .board-hud-panel .board-center-map {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .board-hud-panel .board-center-map .center-dice { margin: 2px; }
  /* 侧边栏可滚动压缩 */
  .sidebar {
    max-height: 24vh;
    overflow-y: auto;
    order: 3;
  }
  .sidebar-section { padding: 6px; }
  /* 玩家卡紧凑 */
  .player-card { padding: 5px !important; gap: 4px; }
  /* 地图节点触控放大: 扩大命中区 */
  .map-node {
    position: relative;
  }
  .map-node::after {
    content: '';
    position: absolute;
    left: -6px; top: -6px; right: -6px; bottom: -6px;
  }
  /* 主要操作按钮触控达标 */
  .pixel-btn { min-height: 42px; }
  .board-myprops-sell { min-height: 34px; }
  /* 骰子按钮可点区 */
  .pixel-dice { cursor: pointer; }
  /* 棋盘 SVG 缩放适配小屏 */
  .board-map-svg { width: 100%; height: auto; }
}