/* ================= 基础 ================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #2b2d5e 0%, #14162d 45%, #0d0e1f 100%);
  color: #eaeaea;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font-family: inherit; }

.hidden { display: none !important; }

.view {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 毛玻璃面板 */
.glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.panel h2 {
  font-size: 15px; font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  color: rgba(255,255,255,.92);
}

/* ================= 通用控件 ================= */
.btn-primary, .btn-ghost, .btn-small {
  border: none; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 700;
  transition: transform .08s ease, opacity .15s, box-shadow .15s;
  touch-action: manipulation;
}
.btn-primary:active, .btn-ghost:active, .btn-small:active { transform: scale(.95); }
.btn-primary {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff; padding: 12px 20px;
  box-shadow: 0 6px 18px rgba(238, 90, 36, .4);
}
.btn-primary:disabled { opacity: .45; box-shadow: none; }
.btn-ghost {
  background: rgba(255,255,255,.08); color: #eaeaea;
  padding: 10px 18px; border: 1px solid rgba(255,255,255,.15);
}
.btn-small {
  background: rgba(255,255,255,.12); color: #eaeaea;
  padding: 6px 12px; font-size: 13px; border-radius: 9px;
}

input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color: #fff; font-size: 16px;
  outline: none; margin-bottom: 10px;
  transition: border-color .15s;
}
input::placeholder { color: rgba(255,255,255,.4); }
input:focus { border-color: #ff6b6b; }

/* ================= 登录页 ================= */
#view-auth { justify-content: center; align-items: center; padding: 20px; }
.auth-card {
  width: 100%; max-width: 400px;
  border-radius: 24px; padding: 30px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  animation: riseIn .3s ease;
}
@keyframes riseIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.auth-hero { text-align: center; margin-bottom: 20px; }
.auth-logo {
  font-size: 46px; display: inline-block; margin-bottom: 4px;
  filter: drop-shadow(0 6px 16px rgba(255,180,50,.5));
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.logo { font-size: 26px; letter-spacing: 1px; background: linear-gradient(90deg, #ffd54f, #ff8a65);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 6px; }
.tabs { display: flex; background: rgba(255,255,255,.08); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.tab {
  flex: 1; padding: 10px 0; border: none; border-radius: 11px;
  background: transparent; color: rgba(255,255,255,.6);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.tab.active { background: linear-gradient(135deg, #ffd54f, #ff9f1a); color: #3a2d00; box-shadow: 0 4px 14px rgba(255,180,50,.35); }
.auth-form .btn-primary { width: 100%; margin-top: 6px; }
.msg { text-align: center; font-size: 13px; margin-top: 12px; min-height: 18px; color: #ffb3b3; }
.msg.ok { color: #7bed9f; }

/* ================= 大厅 ================= */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: rgba(0,0,0,.3);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-title { font-size: 16px; font-weight: 800; }
.topbar-user { flex: 1; text-align: right; font-size: 13px; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lobby {
  flex: 1; overflow-y: auto; padding: 16px;
  max-width: 620px; width: 100%; margin: 0 auto;
}
.room-list { max-height: 200px; overflow-y: auto; }
.empty-tip { color: rgba(255,255,255,.4); font-size: 13px; text-align: center; padding: 14px 0; }
.room-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px; margin-bottom: 8px;
  background: rgba(255,255,255,.06); cursor: pointer;
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, transform .1s;
}
.room-item:active { background: rgba(255,255,255,.14); transform: scale(.98); }
.room-item .r-name { flex: 1; font-size: 14px; font-weight: 600; }
.room-item .r-count { font-size: 12px; color: rgba(255,255,255,.55); }
.room-create { display: flex; gap: 8px; margin-top: 10px; }
.room-create input { margin-bottom: 0; flex: 1; }
.room-create .btn-primary { padding: 12px 14px; white-space: nowrap; }

.room-no { color: #ffd32a; font-weight: 800; }
.room-name { font-size: 13px; color: rgba(255,255,255,.6); margin: 4px 0 8px; }
.invite-hint { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 12px; line-height: 1.6; }
.room-players { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.player-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  font-size: 14px;
}
.player-chip .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.player-chip .p-name { flex: 1; }
.player-chip .p-status { font-size: 12px; color: rgba(255,255,255,.55); }
.player-chip .p-status.me { color: #ffd32a; }
.player-chip .p-status.off { color: #ff6b6b; }
.room-actions { display: flex; gap: 10px; }
.room-actions .btn-primary { flex: 1; }
.join-row { display: flex; gap: 8px; }
.join-row input { margin-bottom: 0; flex: 1; }
.rule-card ul { padding-left: 18px; font-size: 13px; line-height: 2; color: rgba(255,255,255,.75); }
.rule-card b { color: #ffd54f; }

/* ================= 游戏 ================= */
.game-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.room-tag {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  flex-shrink: 0;
}
.turn-tip {
  flex: 1; text-align: right; font-size: 12.5px;
  color: #ffd54f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 玩家横条（手机） */
.players-bar {
  display: flex; gap: 6px; padding: 8px 10px;
  overflow-x: auto; flex-shrink: 0;
  scrollbar-width: none;
}
.players-bar::-webkit-scrollbar { display: none; }
.player-mini {
  flex: 1; min-width: 88px; text-align: center;
  padding: 6px 6px 5px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.08);
  transition: border-color .2s, background .2s;
}
.player-mini.active { border-color: #ffd54f; background: rgba(255,211,42,.1); box-shadow: 0 0 12px rgba(255,211,42,.25); }
.player-mini .pm-head { display: flex; align-items: center; justify-content: center; gap: 4px; }
.player-mini .pm-icon { font-size: 15px; }
.player-mini .pm-name { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-mini .pm-money { font-size: 12.5px; font-weight: 800; }
.player-mini .pm-money.minus { color: #ff7675; }
.player-mini .pm-tags { font-size: 9.5px; color: rgba(255,255,255,.55); white-space: nowrap; }
.player-mini.bankrupt { opacity: .35; }

/* 主区域：棋盘 + 侧栏 */
.game-main {
  flex: 1; display: flex; gap: 12px;
  padding: 10px 12px; min-height: 0;
}
.board-host {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
}
#board-canvas {
  display: block; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  touch-action: none;  /* 关键：禁止浏览器拦截触摸手势，否则手机拖不动地图 */
}

/* 侧栏（桌面） */
.side-panel {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; overflow-y: auto;
}
.mini-panel { margin-bottom: 0; padding: 13px; flex-shrink: 0; }
.log-panel { flex: 1; display: flex; flex-direction: column; min-height: 120px; }
.quick-log {
  flex: 1; overflow-y: auto; font-size: 12.5px; line-height: 1.9;
  color: rgba(255,255,255,.8);
}
.quick-log .chat-line { color: #7bed9f; }

/* 玩家详情卡片（侧栏） */
.players-panel { display: flex; flex-direction: column; gap: 8px; }
.p-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid transparent;
}
.p-card.active { border-color: #ffd54f; background: rgba(255,211,42,.09); }
.p-card.bankrupt { opacity: .35; }
.p-card .p-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  border: 2px solid rgba(255,255,255,.25);
}
.p-card .p-info { flex: 1; min-width: 0; }
.p-card .p-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.p-card .p-meta { font-size: 10.5px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-card .p-money { font-size: 15px; font-weight: 800; color: #ffd54f; }
.p-card .p-money.minus { color: #ff7675; }

/* 相机工具按钮 */
.board-tools {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 7px;
  z-index: 6;
}
.tool-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(16,18,42,.78);
  color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: transform .08s, background .15s;
}
.tool-btn:active { transform: scale(.92); background: rgba(255,255,255,.2); }
.tool-btn.hl { border-color: #ffd54f; }

/* 交易表单 */
.trade-form { display: flex; flex-direction: column; gap: 6px; }
.trade-form label { font-size: 12.5px; color: rgba(255,255,255,.6); }
.trade-form select {
  width: 100%; padding: 11px 12px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color: #fff; font-size: 14px;
  outline: none; margin-bottom: 10px;
  -webkit-appearance: none; appearance: none;
}
.trade-form select option { background: #22223a; color: #fff; }
.trade-form input { margin-bottom: 10px; }

/* 机器人移除按钮 */
.bot-remove { background: rgba(255,107,107,.25); color: #ffb3b3; }
.bot-remove:active { background: rgba(255,107,107,.45); }

/* 骰子 */
.dice-box {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 8px;
  background: rgba(10,12,30,.72);
  padding: 8px; border-radius: 14px;
  backdrop-filter: blur(6px);
  z-index: 5;
  border: 1px solid rgba(255,255,255,.1);
}
.die {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(145deg, #fff, #e8e8f0);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 7px;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.4);
}
.die i {
  display: block; border-radius: 50%;
  background: transparent; width: 8px; height: 8px; align-self: center; justify-self: center;
}
.die i.on { background: radial-gradient(circle at 35% 35%, #4a4a55, #22222a); }
.die.rolling { animation: dieShake .32s linear infinite; }
@keyframes dieShake {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(14deg) scale(1.06) translateY(-2px); }
  50% { transform: rotate(-12deg) scale(.97); }
  75% { transform: rotate(9deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1); }
}

/* 操作栏 */
.action-bar {
  flex-shrink: 0; min-height: 66px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,12,30,.65);
  border-top: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.action-tip { color: rgba(255,255,255,.65); font-size: 14px; text-align: center; }
.action-bar .btn-primary { flex: 1; max-width: 250px; padding: 14px; border-radius: 14px; }
.action-bar .btn-primary:disabled { opacity: .4; }
.action-bar .btn-ghost { flex: 1; max-width: 210px; padding: 12px; border-radius: 14px; }
/* 常驻操作：认输 / 解散房间（不被拉伸，保持小巧） */
.action-bar .btn-quit {
  flex: 0 0 auto; padding: 9px 13px; font-size: 13.5px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.action-bar .btn-quit:active { transform: scale(.95); }
.action-bar .btn-quit.danger { background: rgba(255,107,107,.16); border-color: rgba(255,107,107,.38); color: #ffb3b3; }

/* ================= 聊天栏（游戏底部常驻） ================= */
.log-sheet {
  flex-shrink: 0; height: 150px;
  display: flex; flex-direction: column;
  background: rgba(14,16,38,.88);
  border-top: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
.log-head { display: flex; align-items: center; padding: 7px 14px 2px; font-size: 12.5px; color: rgba(255,255,255,.65); flex-shrink: 0; }
.log-list { flex: 1; overflow-y: auto; padding: 2px 14px 4px; font-size: 12.5px; line-height: 1.85; }
.log-line { color: rgba(255,255,255,.8); }
.log-line.system { color: #ffd32a; }
.log-line.chat { color: #7bed9f; }
.chat-form { display: flex; gap: 8px; padding: 6px 12px 8px; flex-shrink: 0; }
.chat-form input { margin-bottom: 0; height: 36px; }

/* ================= 弹窗 / Toast ================= */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6,8,20,.68);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-card {
  width: 100%; max-width: 370px;
  border-radius: 22px; padding: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.65);
  animation: popIn .18s ease;
}
@keyframes popIn { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-card h3 { text-align: center; margin-bottom: 14px; font-size: 18px; }
.modal-body { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.92); max-height: 46vh; overflow-y: auto; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn-primary, .modal-actions .btn-ghost { flex: 1; }

.card-badge {
  display: block; margin: 0 auto 14px; text-align: center;
  background: linear-gradient(135deg, #ffd32a, #ff9f1a);
  color: #3a2d00; font-weight: 800;
  width: 130px; padding: 15px 10px; border-radius: 18px;
  box-shadow: 0 8px 20px rgba(255, 159, 26, .45);
  animation: cardFlip .25s ease;
}
.card-badge.chance { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; }
@keyframes cardFlip { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.card-badge .card-kind { font-size: 12px; font-weight: 400; display: block; }
.card-badge .card-text { font-size: 13px; display: block; margin-top: 6px; }

/* 升级详情（再次停留自家地块时） */
.upgrade-detail { text-align: center; padding: 4px 0; }
.upgrade-detail .u-level { font-size: 17px; margin-bottom: 10px; letter-spacing: 2px; }
.upgrade-detail .u-row { font-size: 13.5px; line-height: 2; color: rgba(255,255,255,.85); }
.upgrade-detail .u-cost { margin-top: 8px; font-size: 14px; font-weight: 700; }
.upgrade-detail .u-warn { color: #ff7675; font-size: 12.5px; margin-top: 6px; }

/* 资产面板（抵押/赎回） */
.asset-list { display: flex; flex-direction: column; gap: 7px; }
.asset-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 11px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}
.asset-item .a-color { width: 7px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.asset-item .a-info { flex: 1; min-width: 0; }
.asset-item .a-name { font-size: 13px; font-weight: 600; }
.asset-item .a-meta { font-size: 10.5px; color: rgba(255,255,255,.55); }
.asset-item .a-btn { font-size: 12px; padding: 6px 11px; border-radius: 9px; border: none; cursor: pointer; font-weight: 700; }
.asset-item .a-btn.mort { background: #ff9f1a; color: #3a2d00; }
.asset-item .a-btn.unmort { background: #51cf66; color: #083d16; }
.asset-item .a-btn:disabled { opacity: .4; }

.toast {
  position: fixed; left: 50%; bottom: calc(150px + 70px); transform: translateX(-50%);
  background: rgba(10,12,30,.92); color: #fff;
  padding: 11px 20px; border-radius: 24px; font-size: 14px;
  z-index: 100; max-width: 82vw; text-align: center;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: popIn .18s ease;
}

.win-banner { text-align: center; font-size: 20px; font-weight: 800; padding: 8px 0; }
.win-banner .trophy { font-size: 52px; display: block; margin-bottom: 10px; animation: floaty 2.4s ease-in-out infinite; }

/* ================= 响应式 ================= */
/* 手机竖屏：隐藏侧栏，用顶部玩家条；压缩各处高度，把空间留给棋盘 */
@media (max-width: 780px) {
  .side-panel { display: none; }
  .game-main { padding: 6px; }
  .players-bar { display: flex; }

  /* 顶栏压缩 */
  .game-topbar { padding: 6px 10px; gap: 6px; }
  .topbar-title { font-size: 14px; }
  .turn-tip { font-size: 11.5px; }
  .btn-log { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }

  /* 玩家条压缩 */
  .players-bar { padding: 5px 8px; gap: 5px; }
  .player-mini { min-width: 72px; padding: 4px 4px 3px; border-radius: 10px; }
  .player-mini .pm-icon { font-size: 13px; }
  .player-mini .pm-name { font-size: 9.5px; }
  .player-mini .pm-money { font-size: 11.5px; }
  .player-mini .pm-tags { font-size: 8.5px; }

  /* 棋盘工具与骰子缩小 */
  .board-host { border-radius: 14px; }
  .board-tools { top: 8px; right: 8px; gap: 6px; }
  .tool-btn { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
  .dice-box { top: 8px; left: 8px; padding: 6px; gap: 6px; border-radius: 12px; }
  .die { width: 40px; height: 40px; padding: 6px; }
  .die i { width: 7px; height: 7px; }

  /* 操作栏压缩 */
  .action-bar { min-height: 58px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .action-bar .btn-primary { padding: 12px; border-radius: 13px; }
  .action-bar .btn-ghost { padding: 11px; border-radius: 13px; }
  .action-tip { font-size: 13px; }

  /* 聊天栏：竖屏压低高度，把空间留给棋盘 */
  .log-sheet { height: 118px; }

  /* 弹窗适配窄屏 */
  .modal-card { padding: 18px; }
  .toast { bottom: calc(118px + 62px); font-size: 13px; }
}

/* 超小屏手机（≤380px，如 iPhone SE / 旧安卓）进一步压缩 */
@media (max-width: 380px) {
  .player-mini { min-width: 62px; }
  .player-mini .pm-name { font-size: 9px; }
  .player-mini .pm-money { font-size: 11px; }
  .die { width: 34px; height: 34px; padding: 5px; }
  .die i { width: 6px; height: 6px; }
  .tool-btn { width: 32px; height: 32px; font-size: 15px; }
  .action-bar .btn-primary { font-size: 15px; padding: 11px; }
  .action-bar .btn-ghost { font-size: 14px; padding: 10px; }
  .dice-box { top: 6px; left: 6px; }
  .board-tools { top: 6px; right: 6px; }
}
/* 桌面：显示侧栏，隐藏顶部玩家条 */
@media (min-width: 781px) {
  .players-bar { display: none; }
  .dice-box { top: 10px; left: 10px; }
}
/* 小高度横屏 */
@media (orientation: landscape) and (max-height: 560px) {
  .dice-box { top: 6px; left: 6px; padding: 6px; gap: 6px; }
  .die { width: 34px; height: 34px; padding: 5px; }
  .die i { width: 6px; height: 6px; }
  .action-bar { min-height: 54px; padding: 6px 10px; }
  .game-main { padding: 6px; }
  .log-sheet { height: 84px; }
  .toast { bottom: calc(84px + 56px); }
}