/* ============================================================
   大富翁双人版 · 视图样式（全屏棋盘 · 中国水墨画风格）
   配色：宣纸米白底 / 墨黑 / 朱砂(红方) / 石绿(蓝方) / 石青·赭石点缀
   字体：毛笔楷书(Ma Shan Zheng) / 行书(Zhi Mang Xing) / 艺宋(ZCOOL XiaoWei)
   笔触：rough-ink 毛边滤镜 / 墨晕 / 不规则手绘圆角
   单位说明：棋盘用百分比定位(11×11网格)；字号/控件用 vmin 自适应
   ============================================================ */

:root {
  --orange: #9E3B32;        /* 朱砂 · 红方主色 */
  --orange-soft: #F3E2DC;
  --orange-tint: #F8EFEA;
  --purple: #3E9B6B;        /* 石绿 · 蓝方主色（清晰绿，与朱砂红形成明确归属对比） */
  --purple-soft: #E6EFE8;
  --cream: #F4EEDF;         /* 宣纸浅 */
  --board-bg: #EDE4D3;      /* 宣纸 */
  --dark: #2B2B2B;          /* 墨黑 */
  --gray: #6B665C;
  --gray-light: #9A9488;
  --line: rgba(43,43,43,.20);
  --ink-line: rgba(43,43,43,.42);
  --grad: linear-gradient(135deg, #9E3B32 0%, #B08439 100%);  /* 朱砂→赭石 */
  --azurite: #41617A;       /* 石青 */
  --ochre: #B08439;         /* 赭石 */
  --paper: #EDE4D3;
  --paper-2: #F4EEDF;
  /* 书法字体体系：毛笔楷 / 行书 / 艺宋（fallback 系统楷体·宋体） */
  --font-brush: "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", "Kaiti SC", serif;
  --font-xing: "Zhi Mang Xing", "Ma Shan Zheng", "STXingkai", "行楷", cursive;
  --font-body: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", "宋体", serif;
}

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

/* 宣纸纹理（feTurbulence 噪点叠加，淡墨感） */
:root { --paper-tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }

html, body {
  width: 100%; height: 100%;
  font-family: var(--font-body);
  background: var(--board-bg);
  background-image: var(--paper-tex);
  overflow: hidden;
}

/* 舞台直接撑满视口，不再等比缩放 */
#stage-wrap { position: fixed; inset: 0; background: var(--board-bg); }
#stage {
  width: 100vw; height: 100vh;
  position: relative; overflow: hidden;
  background: var(--board-bg);
  background-image: var(--paper-tex);
}

.screen { position: absolute; inset: 0; }
.hidden { display: none !important; }

/* ---------------- 状态栏（顶部细条，浮于棋盘之上） ---------------- */
.status-bar {
  position: absolute; top: 0; left: 0; width: 100%; height: 3.4vmin;
  background: rgba(237,228,211,.5); z-index: 12; pointer-events: none;
}
.status-time { position: absolute; left: 2.4vmin; top: 0.7vmin; font-size: 1.7vmin; font-weight: 600; color: var(--dark); }
.battery { position: absolute; right: 8vmin; top: 1vmin; width: 3.4vmin; height: 1.6vmin; border: 1.5px solid rgba(43,43,43,.85); border-radius: 0.4vmin; }
.battery-nub { position: absolute; right: 7.2vmin; top: 1.4vmin; width: 0.5vmin; height: 0.7vmin; background: var(--dark); border-radius: 0.2vmin; }

/* ==================== 开始菜单（全屏居中） ==================== */
#screen-start { background: var(--cream); background-image: var(--paper-tex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vmin; }
.start-title { font-family: var(--font-brush); font-weight: 400; font-size: 9vmin; color: var(--dark); line-height: 1; letter-spacing: 0.8vmin; }
.start-title::after { content: ''; display: block; width: 19vmin; height: 0.7vmin; margin: 1.4vmin auto 0; background: var(--orange); border-radius: 46% 54% 52% 48% / 60% 40% 60% 40%; filter: url(#rough-ink); opacity: .92; }
.start-sub { font-size: 2.6vmin; color: var(--gray); margin-top: -0.4vmin; letter-spacing: 0.4vmin; }
.start-hint { font-size: 1.9vmin; color: var(--gray-light); }
.start-section { font-size: 1.8vmin; font-weight: 400; color: var(--gray); margin-top: 1.5vmin; align-self: center; letter-spacing: 0.4vmin; font-family: var(--font-brush); }

.p-row {
  width: 78vmin; max-width: 86%; height: 8vmin; border-radius: 2.4vmin;
  background: #FDFBF4; display: flex; align-items: center;
  box-shadow: 0 0.8vmin 2vmin rgba(43,43,43,.10);
}
.p-row .avatar { width: 5.4vmin; height: 5.4vmin; border-radius: 50%; margin: 0 1.8vmin; color: #fff; font-weight: 700; font-size: 1.8vmin; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-brush); }
.p-row .pinput { flex: 1; height: 6vmin; border-radius: 1.4vmin; display: flex; align-items: center; padding: 0 2vmin; font-size: 2.1vmin; font-weight: 600; }
.p-row.p1 { border: 0.3vmin solid var(--orange); }
.p-row.p1 .avatar { background: var(--orange); }
.p-row.p1 .pinput { background: var(--orange-tint); color: var(--orange); }
.p-row.p2 { border: 0.3vmin solid var(--purple); }
.p-row.p2 .avatar { background: var(--purple); }
.p-row.p2 .pinput { background: var(--purple-soft); color: var(--purple); }
.p-row .pinput input { border: none; background: transparent; outline: none; font: inherit; color: inherit; width: 100%; }

.btn-grad {
  height: 7.5vmin; border-radius: 3.6vmin; min-width: 40vmin;
  background: var(--grad); border: none; color: #fff; font-size: 2.8vmin; font-weight: 400; font-family: var(--font-brush);
  display: flex; align-items: center; justify-content: center; cursor: pointer; letter-spacing: 0.4vmin;
  box-shadow: 0 1vmin 2.4vmin rgba(158,59,50,.30);
}
.btn-grad:active { transform: translateY(0.2vmin); }
.btn-grad:disabled { opacity: .55; box-shadow: none; cursor: default; }
#screen-start .btn-grad.start-btn { margin-top: 1.5vmin; }
/* AI 陪玩勾选 */
#screen-start .ai-row { display: flex; align-items: center; gap: 1.4vmin; width: 72vmin; max-width: 88%; margin-top: 1.2vmin; font-size: 2vmin; color: var(--dark); cursor: pointer; font-family: var(--font-body); }
#screen-start .ai-row input { width: 3vmin; height: 3vmin; accent-color: var(--ochre); cursor: pointer; flex: 0 0 auto; }
#screen-start .ai-row span { line-height: 1.3; }

/* ==================== 游戏主屏：棋盘撑满全屏 ==================== */
#screen-game { background: var(--board-bg); }

/* 棋盘铺满整个视口，宣纸 + 四角墨晕 + 散点墨韵 */
.board {
  position: absolute; inset: 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(43,43,43,.12), transparent 22%),
    radial-gradient(ellipse at 100% 100%, rgba(43,43,43,.09), transparent 22%),
    radial-gradient(circle at 83% 17%, rgba(43,43,43,.05) 0 1.4vmin, transparent 1.6vmin),
    radial-gradient(circle at 17% 85%, rgba(43,43,43,.045) 0 1.1vmin, transparent 1.3vmin),
    var(--paper-tex);
  border: none;
  transform-origin: 0 0;
  will-change: transform;
}
/* 棋盘外圈墨线描边（rough-ink 毛边），强化"卷轴棋盘"感 */
.board::after {
  content: ''; position: absolute; inset: 0;
  border: 0.55vmin solid rgba(43,43,43,.55); border-radius: 0.7vmin 1.1vmin 0.55vmin 0.95vmin;
  pointer-events: none; filter: url(#rough-ink);
}
/* 外圈第二层淡墨粗框，模拟毛笔双勾卷轴边 */
.board::before {
  content: ''; position: absolute; inset: 0.35vmin;
  border: 0.9vmin solid rgba(43,43,43,.13); border-radius: 1.1vmin 1.6vmin 1vmin 1.4vmin;
  pointer-events: none; filter: url(#rough-ink);
}

/* 格子：百分比定位，11×11 网格，米白宣纸 + 手绘墨线框 + 水墨晕染 */
.cell {
  position: absolute;
  width: 9.09%; height: 9.09%;
  background-color: #FCFAF2;
  background-image:
    radial-gradient(ellipse at 28% 18%, rgba(43,43,43,.055), transparent 58%),
    radial-gradient(ellipse at 82% 86%, rgba(43,43,43,.045), transparent 55%),
    var(--paper-tex);
  border-radius: 0.7vmin 1.1vmin 0.55vmin 0.95vmin;
  overflow: hidden;
  border: 0.22vmin solid rgba(43,43,43,.5);
  box-shadow: inset 0 0 0 0.12vmin rgba(255,255,255,.55), 0 0.3vmin 0.9vmin rgba(43,43,43,.10);
  filter: url(#grid-rough);
}
.cell .band { position: absolute; left: 0; top: 0; width: 100%; height: 22%; }
.cell .cname { position: absolute; left: 0; top: 23%; width: 100%; font-family: var(--font-brush); font-size: 1.6vmin; font-weight: 400; color: #3A352E; text-align: center; line-height: 1.12; padding: 0 0.2vmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.05vmin; }
.cell .houses { position: absolute; left: 0; bottom: 0.4vmin; width: 100%; display: flex; gap: 0.2vmin; justify-content: center; }
.cell .houses i { width: 0.9vmin; height: 0.9vmin; border-radius: 0.2vmin; background: var(--purple); display: inline-block; }
.cell .houses i.hotel { width: 1vmin; height: 1.4vmin; background: var(--orange); border-radius: 0.2vmin; }
.cell.corner { display: flex; align-items: center; justify-content: center; }
.cell.corner .clabel { color: #FBF6EC; font-family: var(--font-brush); font-size: 2.4vmin; font-weight: 400; text-align: center; line-height: 1.2; padding: 0 0.4vmin; letter-spacing: 0.2vmin; text-shadow: 0 0.2vmin 0.4vmin rgba(0,0,0,.25); }
.cell.corner.start  { background: var(--purple); }
.cell.corner.jail   { background: #3A352E; }
.cell.corner.parking{ background: var(--azurite); }
.cell.corner.gojail { background: var(--orange); }
.cell.corner.casino { background: #3A2E4F; }
.cell.corner.casino .c-icon { width: 5vmin; height: 5vmin; color: #FBF6EC; display: flex; align-items: center; justify-content: center; }
.cell.corner.casino .c-icon svg { width: 100%; height: 100%; }
/* 归属外框：用清晰的实心边框表示红方/绿方，红绿一目了然（不再依赖被滤镜扭曲的细 inset 阴影） */
.cell.owned-p1 { border: 0.34vmin solid var(--orange); box-shadow: inset 0 0 0 0.18vmin rgba(255,255,255,.6); background-color: #FCFAF2; background-image: linear-gradient(rgba(158,59,50,.20), rgba(158,59,50,.20)); }
.cell.owned-p2 { border: 0.34vmin solid var(--purple); box-shadow: inset 0 0 0 0.18vmin rgba(255,255,255,.6); background-color: #FCFAF2; background-image: linear-gradient(rgba(78,122,94,.20), rgba(78,122,94,.20)); }
.cell.mono-p1 { border: 0.34vmin solid var(--orange); box-shadow: inset 0 0 0 0.22vmin #fff, inset 0 0 0 0.55vmin var(--orange); background-color: #FCFAF2; background-image: linear-gradient(rgba(158,59,50,.26), rgba(158,59,50,.26)); }
.cell.mono-p2 { border: 0.34vmin solid var(--purple); box-shadow: inset 0 0 0 0.22vmin #fff, inset 0 0 0 0.55vmin var(--purple); background-color: #FCFAF2; background-image: linear-gradient(rgba(78,122,94,.26), rgba(78,122,94,.26)); }
.cell.item { background: var(--orange-tint); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cell.corner.pawn { background: #5A4A2E; }
.cell.corner.pawn .c-icon { width: 5vmin; height: 5vmin; color: #FBF6EC; display: flex; align-items: center; justify-content: center; }
.cell.corner.pawn .c-icon svg { width: 100%; height: 100%; }
/* 抵押徽标：倒计时回合数 */
.cell .pawn-badge {
  position: absolute; right: 0.3vmin; bottom: 0.3vmin; z-index: 6;
  font-family: var(--font-body); font-weight: 700; font-size: 1.5vmin; line-height: 1;
  color: #FBF6EC; background: #5A4A2E; border: 0.1vmin solid #FBF6EC;
  padding: 0.2vmin 0.5vmin; border-radius: 1vmin; box-shadow: 0 0.2vmin 0.6vmin rgba(0,0,0,.35);
}
.cell.mortgaged { box-shadow: inset 0 0 0 0.3vmin #5A4A2E; }
.cell.mortgaged .cname { text-decoration: line-through; opacity: .7; }
.cell.item .gift { width: 4.6vmin; height: 4.6vmin; display: flex; align-items: center; justify-content: center; color: var(--orange); }
.cell.item .gift svg { width: 100%; height: 100%; }
.cell.item .ilabel { font-family: var(--font-brush); font-size: 1.5vmin; font-weight: 400; color: var(--orange); margin-top: 0.2vmin; letter-spacing: 0.1vmin; }
.cell.clickable { cursor: pointer; }
.cell.clickable:active { filter: url(#grid-rough) brightness(.95); }

/* ==================== 棋盘中央：半透明宣纸面板承载全部 UI ==================== */
.center-panel {
  position: absolute;
  left: 9.09%; top: 9.09%; width: 81.82%; height: 81.82%;
  border-radius: 2vmin;
  background: rgba(252,250,242,.82);
  backdrop-filter: blur(1.5px);
  z-index: 8;
  box-shadow: 0 2vmin 6vmin rgba(43,43,43,.22);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6vmin; padding: 2vmin;
}
/* 中央面板毛边墨框 */
.center-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: 2vmin;
  border: 0.26vmin solid rgba(43,43,43,.22); pointer-events: none; filter: url(#rough-ink);
}
.cp-round { font-family: var(--font-brush); font-size: 2.4vmin; font-weight: 400; color: var(--gray); letter-spacing: 0.3vmin; }
.turn-chip {
  min-width: 22vmin; height: 5vmin; border-radius: 2.5vmin; padding: 0 3vmin;
  background: var(--orange-soft); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brush); font-size: 2.6vmin; font-weight: 400; color: var(--orange);
  border: 0.2vmin solid rgba(158,59,50,.35); letter-spacing: 0.2vmin;
}
.turn-chip.purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(78,122,94,.4); }
.turn-chip.jail { background: #3A352E; color: #FBF6EC; border-color: #3A352E; }

/* 玩家卡片：面板内左右并排 */
.players { display: flex; gap: 2vmin; align-items: stretch; width: 100%; max-width: 64vmin; justify-content: center; }
.pcard {
  flex: 1; min-width: 0; height: 12vmin; border-radius: 2.6vmin; background: #FDFBF4;
  border: 0.3vmin solid var(--line); position: relative;
  display: flex; align-items: center; padding: 0 1.6vmin; gap: 1.4vmin;
  transition: opacity .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  opacity: .5;
  box-shadow: 0 0.8vmin 2vmin rgba(43,43,43,.10);
}
.pcard .pavatar { width: 5vmin; height: 5vmin; border-radius: 50%; color: #fff; font-weight: 700; font-size: 1.7vmin; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-brush); }
.pcard .pinfo { display: flex; flex-direction: column; min-width: 0; }
.pcard .pname { font-family: var(--font-brush); font-size: 2.4vmin; font-weight: 400; color: var(--dark); line-height: 1.2; }
.pcard .pmoney { font-size: 2.6vmin; font-weight: 700; }
.pcard .pjail { position: absolute; right: 1.4vmin; top: 1.2vmin; font-size: 1.4vmin; font-weight: 700; color: #fff; background: #3A352E; border-radius: 1.2vmin; padding: 0.4vmin 1vmin; font-family: var(--font-brush); }
.pcard.p1 .pavatar { background: var(--orange); }
.pcard.p1 .pmoney { color: var(--orange); }
.pcard.p2 .pavatar { background: var(--purple); }
.pcard.p2 .pmoney { color: var(--purple); }
.pcard.active { opacity: 1; }
.pcard.p1.active { border-color: var(--orange); background: var(--orange-tint); box-shadow: 0 1.2vmin 3.2vmin rgba(158,59,50,.28); }
.pcard.p2.active { border-color: var(--purple); background: var(--purple-soft); box-shadow: 0 1.2vmin 3.2vmin rgba(78,122,94,.28); }

/* 骰子 */
.dice-area { display: flex; gap: 2.4vmin; }
.dice {
  width: 9vmin; height: 9vmin; border-radius: 1.8vmin; background: #FDFBF4; border: 0.18vmin solid var(--ink-line);
  box-shadow: 0 0.8vmin 2vmin rgba(43,43,43,.14); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 1.6vmin; gap: 0.4vmin;
}
.dice .pip { width: 1.4vmin; height: 1.4vmin; border-radius: 50%; background: var(--dark); align-self: center; justify-self: center; }
.dice .pip.off { background: transparent; }
.dice.rolling { animation: shake .5s ease; }
@keyframes shake { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-1vmin) rotate(-8deg)} 75%{transform:translateY(-1vmin) rotate(8deg)} }

/* 掷骰按钮 */
.roll-btn { width: 40vmin; height: 8.5vmin; font-size: 3.2vmin; font-family: var(--font-brush); font-weight: 400; letter-spacing: 0.6vmin; }
.h-tip { font-size: 1.5vmin; color: var(--gray-light); text-align: center; max-width: 70vmin; }

/* 棋子：水墨人物（ink-bleed 墨晕毛边），定位到格中心，两玩家左右错开避免重叠 */
.token {
  position: absolute; width: 3.6vmin; height: 4.6vmin; z-index: 10;
  filter: drop-shadow(0 0.4vmin 0.5vmin rgba(43,43,43,.35)) url(#ink-bleed); pointer-events: none;
  transform: translate(-50%, -66%);
  transition: left .45s cubic-bezier(.4,0,.2,1), top .45s cubic-bezier(.4,0,.2,1);
}
#token-0 { transform: translate(-92%, -68%); }
#token-1 { transform: translate(-8%, -68%); }

/* ==================== 结算页（全屏居中） ==================== */
#screen-result { background: var(--cream); background-image: var(--paper-tex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.result-title { font-family: var(--font-brush); font-weight: 400; font-size: 5vmin; color: var(--dark); letter-spacing: 1vmin; }
.winner-badge { width: 10vmin; height: 10vmin; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-family: var(--font-brush); font-weight: 400; font-size: 4.5vmin; color: #fff; box-shadow: 0 1vmin 2.6vmin rgba(158,59,50,.34); }
.winner-text { font-size: 3vmin; font-weight: 700; color: var(--orange); font-family: var(--font-body); }
.rcard { width: 64vmin; max-width: 88%; height: 13vmin; border-radius: 2.6vmin; background: #FDFBF4; display: flex; align-items: center; padding: 0 3vmin; gap: 2vmin; box-shadow: 0 0.8vmin 2vmin rgba(43,43,43,.12); }
.rcard .ravatar { width: 5.4vmin; height: 5.4vmin; border-radius: 50%; color: #fff; font-weight: 700; font-size: 1.8vmin; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--font-brush); }
.rcard .rinfo { display: flex; flex-direction: column; }
.rcard .rname { font-family: var(--font-brush); font-size: 2.6vmin; font-weight: 400; color: var(--dark); }
.rcard .rcash, .rcard .rprop { font-size: 1.7vmin; color: var(--gray); }
.rcard .rtotal { margin-left: auto; font-size: 3.4vmin; font-weight: 700; }
.rcard.p1 { border: 0.3vmin solid var(--orange); }
.rcard.p1 .ravatar { background: var(--orange); }
.rcard.p1 .rtotal { color: var(--orange); }
.rcard.p2 { border: 0.3vmin solid var(--purple); }
.rcard.p2 .ravatar { background: var(--purple); }
.rcard.p2 .rtotal { color: var(--purple); }
#screen-result .btn-grad.start-btn { margin-top: 1vmin; }
.back-text { font-size: 2vmin; font-weight: 500; color: var(--gray-light); cursor: pointer; font-family: var(--font-body); }

/* ==================== 弹窗（买地 / 建房 / 道具 / 事件 / 破产） ==================== */
#overlay { position: absolute; inset: 0; background: rgba(43,43,43,.5); display: flex; align-items: center; justify-content: center; z-index: 30; backdrop-filter: blur(1px); }
.modal {
  position: relative;
  width: 46vmin; max-width: 88%; border-radius: 3vmin; background: #FDFBF4; overflow: hidden;
  box-shadow: 0 2.4vmin 5.4vmin rgba(0,0,0,.3); transform: translateY(0); animation: pop .25s ease;
  border: none;
}
/* 弹窗毛边墨框 */
.modal::after {
  content: ''; position: absolute; inset: 0; border-radius: 3vmin;
  border: 0.28vmin solid rgba(43,43,43,.22); pointer-events: none; filter: url(#rough-ink);
}
@keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal .m-band { height: 14vmin; display: flex; align-items: center; justify-content: center; }
.modal .m-band .m-icon { width: 8vmin; height: 8vmin; border-radius: 50%; background: rgba(255,255,255,.26); display: flex; align-items: center; justify-content: center; color: #FBF6EC; }
.modal .m-band .m-icon svg { width: 5.4vmin; height: 5.4vmin; }
.modal .m-title { text-align: center; font-family: var(--font-brush); font-weight: 400; font-size: 3.4vmin; color: var(--dark); margin-top: 2vmin; letter-spacing: 0.4vmin; }
.modal .m-desc { text-align: center; font-size: 2vmin; color: var(--gray); padding: 1vmin 3.4vmin 0; line-height: 1.5; white-space: pre-line; }
.modal .m-rows { padding: 1.6vmin 3.4vmin 0; }
.modal .m-row { display: flex; justify-content: space-between; font-size: 2vmin; color: var(--dark); padding: 0.6vmin 0; }
.modal .m-row span:last-child { font-weight: 700; }
.modal .m-actions { padding: 2.4vmin 3.4vmin 3.4vmin; display: flex; flex-direction: column; gap: 1.4vmin; }
.modal .m-btn { height: 7vmin; border-radius: 3.5vmin; border: none; font-size: 2.4vmin; font-weight: 400; font-family: var(--font-brush); cursor: pointer; letter-spacing: 0.3vmin; }
.modal .m-btn.primary { background: var(--grad); color: #fff; box-shadow: 0 1vmin 2.4vmin rgba(158,59,50,.30); }
.modal .m-btn.ghost { background: #FDFBF4; color: var(--gray); border: 0.15vmin solid var(--line); }
.modal .m-btn:active { transform: translateY(0.2vmin); }
.modal .m-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.modal .m-countdown { text-align: center; font-size: 1.5vmin; color: var(--orange); padding: 0.8vmin 3.4vmin 0; font-weight: 600; }
.modal .m-note { text-align: center; font-size: 1.7vmin; color: var(--gray); padding: 0.4vmin 3.4vmin 0; font-style: normal; }
/* 规则弹窗：限制高度并允许内容滚动，保证底部"知道了"按钮始终可达；点击地图空白处亦可关闭 */
.modal-rules { max-height: 90vh; display: flex; flex-direction: column; }
.modal-rules .m-desc { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left; line-height: 1.6; }
.modal-rules .m-actions { flex: 0 0 auto; }
/* 自定义弹窗内容（当铺 / 变卖资产 / 规则列表） */
.modal .m-custom { max-height: 46vmin; overflow-y: auto; padding: 1vmin 3.4vmin 0; -webkit-overflow-scrolling: touch; }
.modal .m-custom .pawn-sec { margin-bottom: 1.4vmin; }
.modal .m-custom .pawn-h { font-family: var(--font-brush); font-size: 2vmin; color: var(--dark); border-bottom: 0.1vmin solid var(--line); padding-bottom: 0.4vmin; margin-bottom: 0.6vmin; letter-spacing: 0.2vmin; }
.modal .m-custom .pawn-empty { font-size: 1.7vmin; color: var(--gray-light); padding: 0.4vmin 0; }
.modal .m-custom .pawn-row { display: flex; align-items: center; gap: 1vmin; padding: 0.5vmin 0; border-bottom: 0.08vmin dashed var(--line); }
.modal .m-custom .pr-name { flex: 1 1 auto; font-size: 1.9vmin; color: var(--dark); }
.modal .m-custom .pr-val { flex: 0 0 auto; font-size: 1.7vmin; color: var(--gray); }
.modal .m-custom .pr-btns { flex: 0 0 auto; display: flex; gap: 0.6vmin; }
.modal .m-btn.small { height: 5.4vmin; min-width: 12vmin; padding: 0 1.6vmin; border-radius: 2.6vmin; border: none; font-size: 1.9vmin; font-weight: 400; font-family: var(--font-brush); cursor: pointer; letter-spacing: 0.2vmin; background: var(--grad); color: #fff; }
.modal .m-btn.small:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
/* 变卖资产勾选列表 */
.modal .m-custom .liq-head { font-family: var(--font-brush); font-size: 2.2vmin; color: var(--dark); text-align: center; padding: 0.4vmin 0 0.8vmin; letter-spacing: 0.15vmin; }
.modal .m-custom .liq-list { max-height: 34vmin; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal .m-custom .liq-group { margin-bottom: 1.2vmin; border: 0.1vmin solid var(--line); border-radius: 1.2vmin; padding: 0.6vmin 1vmin; background: rgba(244,238,223,.45); }
.modal .m-custom .liq-gname { font-family: var(--font-brush); font-size: 2vmin; color: var(--dark); border-bottom: 0.08vmin dashed var(--line); padding-bottom: 0.3vmin; margin-bottom: 0.4vmin; }
.modal .m-custom .liq-item { display: flex; align-items: center; gap: 1vmin; padding: 0.45vmin 0; font-size: 1.8vmin; color: var(--dark); cursor: pointer; }
.modal .m-custom .liq-item input { width: 2.2vmin; height: 2.2vmin; accent-color: var(--orange); cursor: pointer; flex: 0 0 auto; }
.modal .m-custom .liq-item input:disabled { opacity: .35; cursor: not-allowed; }
.modal .m-custom .liq-label { flex: 1 1 auto; }
.modal .m-custom .liq-price { flex: 0 0 auto; color: var(--orange); font-weight: 600; }
.modal .m-custom .liq-total { text-align: center; font-family: var(--font-brush); font-size: 2.2vmin; color: var(--dark); padding: 0.8vmin 0 0.2vmin; border-top: 0.1vmin solid var(--line); margin-top: 0.6vmin; }
.modal .m-custom .liq-total #liq-sum { color: var(--orange); }
.modal .m-custom .liq-note { text-align: center; font-size: 1.6vmin; color: var(--gray); padding-bottom: 0.4vmin; }
.conn-badge.reconnecting { background: rgba(176,132,57,.8); color: #FBF6EC; }
.conn-badge.offline { background: rgba(158,59,50,.8); color: #fff; }


/* ==================== 模式选择 ==================== */
#screen-mode { background: var(--cream); background-image: var(--paper-tex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vmin; }
.mode-title { font-family: var(--font-brush); font-weight: 400; font-size: 9vmin; color: var(--dark); line-height: 1; letter-spacing: 1vmin; }
.mode-title::after { content: ''; display: block; width: 21vmin; height: 0.7vmin; margin: 1.6vmin auto 0; background: var(--ink-line); border-radius: 50% 50% 45% 55% / 55% 45% 55% 45%; filter: url(#rough-ink); opacity: .9; }
.mode-sub { font-size: 2.4vmin; color: var(--gray); margin-top: -0.6vmin; letter-spacing: 0.4vmin; }
.mode-btn {
  width: 72vmin; max-width: 88%; height: 14vmin; border-radius: 3vmin; border: none; color: #fff;
  font-size: 3.4vmin; font-weight: 400; font-family: var(--font-brush); cursor: pointer; letter-spacing: 0.4vmin;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vmin;
  box-shadow: 0 1.2vmin 3vmin rgba(43,43,43,.18);
}
.mode-btn small { font-size: 1.6vmin; font-weight: 400; opacity: .92; letter-spacing: 0.2vmin; font-family: var(--font-body); }
.mode-btn.local { background: linear-gradient(135deg, #9E3B32 0%, #B08439 100%); }
.mode-btn.online { background: linear-gradient(135deg, #41617A 0%, #6BA081 100%); }
.mode-btn.rules { background: linear-gradient(135deg, #6E5A8C 0%, #41617A 100%); }
.mode-btn:active { transform: translateY(0.2vmin); }
.mode-tip { font-size: 1.7vmin; color: var(--gray-light); max-width: 72vmin; text-align: center; padding: 0 2vmin; }

/* ==================== 云端大厅 ==================== */
#screen-lobby { background: var(--cream); background-image: var(--paper-tex); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.lobby-title { font-family: var(--font-brush); font-weight: 400; font-size: 6vmin; color: var(--azurite); line-height: 1; letter-spacing: 1vmin; }
.lobby-sub { font-size: 1.9vmin; color: var(--gray); margin-top: -0.6vmin; }
.p-row.single { width: 72vmin; max-width: 88%; }
.lobby-btn { width: 72vmin; max-width: 88%; }
.lobby-divider { font-size: 1.7vmin; color: var(--gray-light); }
.join-row { display: flex; gap: 1.4vmin; align-items: center; }
.code-input {
  width: 24vmin; height: 7.5vmin; border-radius: 2vmin; border: 0.15vmin solid var(--ink-line);
  font-size: 3.4vmin; font-weight: 700; text-align: center; text-transform: uppercase;
  outline: none; font-family: var(--font-brush); letter-spacing: 0.6vmin; background: #FDFBF4;
}
.code-input:disabled { background: #EBE3D2; color: var(--gray-light); }
.btn-grad.small { min-width: 26vmin; height: 7.5vmin; font-size: 2.4vmin; }
.btn-grad.small:disabled { opacity: .5; box-shadow: none; }
.lobby-status { font-size: 1.8vmin; color: var(--gray); min-height: 2.4vmin; text-align: center; padding: 0 2vmin; }
.room-code-box { display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; margin-top: 1vmin; }
.rc-label { font-size: 1.7vmin; color: var(--gray); }
.rc-code { font-family: var(--font-brush); font-size: 7.5vmin; font-weight: 400; letter-spacing: 1.4vmin; color: var(--azurite); }
.rc-tip { font-size: 1.6vmin; color: var(--gray-light); }

/* ==================== 对战页：连接/角色/等待/提示 ==================== */
.conn-badge {
  position: absolute; left: 2.4vmin; top: 4.4vmin; z-index: 14;
  font-size: 1.5vmin; color: var(--gray); background: rgba(252,250,242,.78);
  padding: 0.5vmin 1.4vmin; border-radius: 1.4vmin; border: 0.12vmin solid var(--line);
}
.role-badge {
  position: absolute; right: 2.4vmin; top: 4.4vmin; z-index: 14;
  font-size: 1.7vmin; font-weight: 700; background: rgba(252,250,242,.78);
  padding: 0.5vmin 1.6vmin; border-radius: 1.4vmin; border: 0.12vmin solid var(--line);
}
.waiting-banner {
  position: absolute; left: 50%; bottom: 3vmin; transform: translateX(-50%); z-index: 14;
  font-size: 1.9vmin; font-weight: 600; color: #FBF6EC; background: rgba(43,43,43,.74);
  padding: 1vmin 2.6vmin; border-radius: 2vmin; white-space: nowrap;
}
.toast {
  position: absolute; left: 50%; top: 7vmin; transform: translateX(-50%) translateY(-2vmin); z-index: 22;
  font-size: 1.9vmin; font-weight: 600; color: #FBF6EC; background: rgba(43,43,43,.85);
  padding: 1vmin 2.8vmin; border-radius: 2vmin; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================== 背景音乐开关 ==================== */
.bgm-btn {
  position: fixed; right: 2.6vmin; bottom: 3vmin; z-index: 16;
  width: 6.4vmin; height: 6.4vmin; border-radius: 50%;
  background: rgba(252,250,242,.85); border: 0.2vmin solid var(--ink-line);
  color: var(--dark); font-size: 2.8vmin; cursor: pointer; font-family: var(--font-brush);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.6vmin 1.6vmin rgba(43,43,43,.22);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.bgm-btn:active { transform: scale(.92); }
.bgm-btn.playing { background: var(--orange); color: #fff; border-color: var(--orange); }
.bgm-btn.rules-game { right: 9.8vmin; background: rgba(110,90,140,.9); color: #FBF6EC; border-color: rgba(110,90,140,.9); }

/* ==================== 杂货铺 / 路障 / 道具 ==================== */
/* 杂货铺格（棋盘左侧，深绿） */
.cell.corner.shop { background: #4A6B53; }
.cell.corner.shop .c-icon { width: 5vmin; height: 5vmin; color: #FBF6EC; display: flex; align-items: center; justify-content: center; }
.cell.corner.shop .c-icon svg { width: 100%; height: 100%; }

/* 路障标记：居中放大的古代拒马 SVG */
.cell .block-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 5.4vmin; height: 5.4vmin; z-index: 8;
  display: none; pointer-events: none;
  filter: drop-shadow(0 0.3vmin 0.5vmin rgba(0,0,0,.5));
}
.cell.has-block {
  box-shadow: inset 0 0 0 0.45vmin #C0392B, inset 0 0 0 0.7vmin rgba(192,57,43,.35);
}

/* 路障布设模式：高亮全部格子，提示可点击落子 */
.board.placing .cell { cursor: pointer; box-shadow: inset 0 0 0 0.3vmin rgba(192,57,43,.55); }
.board.placing .cell:active { filter: brightness(.94); }

/* 中央道具按钮 */
.items-btn { width: 40vmin; height: 7.4vmin; font-size: 2.6vmin; font-family: var(--font-brush); font-weight: 400; letter-spacing: 0.4vmin; margin-top: -0.4vmin; background: linear-gradient(135deg, #41617A 0%, #6E5A8C 100%); }
.items-btn:disabled { opacity: .5; box-shadow: none; cursor: default; }

/* 指定骰子卡：点数选择 */
.modal .m-custom .dice-pick { padding: 1vmin 0 0.4vmin; }
.modal .m-custom .dp-row { display: flex; align-items: center; gap: 1.4vmin; margin: 1.2vmin 0; }
.modal .m-custom .dp-label { font-family: var(--font-brush); font-size: 2.2vmin; color: var(--dark); min-width: 12vmin; }
.modal .m-custom .dp-btns { display: flex; gap: 0.8vmin; flex-wrap: wrap; }
.modal .m-custom .dp-btn.on { background: var(--orange); color: #fff; border-color: var(--orange); }
.modal .m-custom .dp-btn:disabled { opacity: .5; }

/* ==================== 视口缩放 HUD（镜头跟随 + 手动缩放） ==================== */
.zoom-hud { position: absolute; left: 2.6vmin; bottom: 3vmin; z-index: 16;
  display: flex; flex-direction: column; gap: 0.8vmin; }
.zoom-btn { width: 6.4vmin; height: 6.4vmin; border-radius: 50%;
  background: rgba(252,250,242,.85); border: 0.2vmin solid var(--ink-line);
  color: var(--dark); font-size: 3vmin; cursor: pointer; font-family: var(--font-brush);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.6vmin 1.6vmin rgba(43,43,43,.22); }
.zoom-btn:active { transform: scale(.92); }