/* =========================================================================
 * 三国大富翁 · 样式（羊皮纸 / 朱红 / 鎏金 主题）
 * ========================================================================= */
:root{
  --paper:#f3e4c6;
  --paper-2:#e9d4ac;
  --ink:#3a2a1a;
  --red:#b3261e;
  --red-2:#d6443a;
  --gold:#c8932b;
  --gold-2:#e7b84b;
  --line:#a8895a;
  --shadow:rgba(58,42,26,.25);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden;}
body{
  font-family:"PingFang SC","Microsoft YaHei","KaiTi","STKaiti",serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #f7ecd2 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, #efe0bf 0%, transparent 45%),
    var(--paper);
  background-attachment:fixed;
  min-height:100vh;
}
#app{max-width:1420px;margin:0 auto;padding:16px;}

/* ---------- 通用按钮 ---------- */
.btn{
  font-family:inherit;font-size:15px;cursor:pointer;
  border:2px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,#fff7e6,#f0dcb4);
  color:var(--ink);padding:10px 16px;margin:4px;transition:.15s;
  box-shadow:0 2px 0 var(--shadow);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.btn:active{transform:translateY(1px);box-shadow:none;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn.primary{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff7e6;border-color:#7d1812;}
.btn.big{font-size:18px;padding:14px 22px;width:100%;}
.btn.tiny{font-size:13px;padding:6px 10px;margin:3px;}

/* ---------- 设置界面 ---------- */
.setup-card{
  max-width:760px;margin:24px auto;background:linear-gradient(180deg,#fbf2da,#f0ddb6);
  border:3px solid var(--line);border-radius:18px;padding:24px 28px;
  box-shadow:0 10px 30px var(--shadow);
}
.setup-card h1{text-align:center;margin:.2em 0;font-size:34px;color:var(--red);letter-spacing:4px;text-shadow:1px 1px 0 var(--gold-2);}
.subtitle{text-align:center;color:#7a6243;margin-top:0;}
.setup-card h3{margin:18px 0 8px;color:var(--red);border-left:5px solid var(--gold);padding-left:8px;}
.row{display:flex;flex-wrap:wrap;gap:10px;}
.opt{
  font-family:inherit;cursor:pointer;border:2px solid var(--line);border-radius:12px;
  background:#fff7e6;color:var(--ink);padding:12px 18px;font-size:16px;line-height:1.4;
  box-shadow:0 2px 0 var(--shadow);transition:.15s;text-align:center;
}
.opt small{display:block;color:#8a724f;font-size:12px;margin-top:2px;}
.opt.small{padding:8px 16px;font-size:15px;}
.opt.on{background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:#8a6a1f;color:#3a2a1a;font-weight:bold;}
.round-input{
  width:72px;font-family:inherit;font-size:15px;text-align:center;
  border:2px solid var(--line);border-radius:10px;padding:7px 6px;background:#fffdf6;color:var(--ink);
  box-shadow:0 2px 0 var(--shadow);
}
.round-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(180,140,40,.3);}
.round-hint{font-size:13px;color:#8a724f;align-self:center;}
#setup-slots{display:flex;flex-direction:column;gap:12px;}
.slot{border:2px dashed var(--line);border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.35);}
.slot-head{font-weight:bold;margin-bottom:6px;}
.ai-tag{background:var(--ink);color:#fff;border-radius:6px;font-size:12px;padding:1px 7px;margin-left:6px;}
.char-pool{display:flex;flex-wrap:wrap;gap:8px;}
.char-chip{
  font-family:inherit;cursor:pointer;border:2px solid var(--line);border-radius:10px;
  background:#fff7e6;padding:6px 10px;display:flex;flex-direction:column;align-items:center;
  min-width:64px;transition:.12s;font-size:14px;
}
.char-chip .ce{font-size:24px;}
.char-chip.on{background:linear-gradient(180deg,var(--red-2),var(--red));color:#fff;border-color:#7d1812;}
.char-chip.disabled{opacity:.35;cursor:not-allowed;}
.tip{margin-top:16px;color:#7a6243;font-size:13px;text-align:center;}

/* ---------- 游戏顶栏（已移入左栏底部，竖排融合） ---------- */
#topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,#fff7e6,#ecd6ab);border:2px solid var(--line);
  border-radius:12px;padding:10px 16px;margin-bottom:12px;box-shadow:0 3px 0 var(--shadow);
}
/* 左栏内的顶栏：改为一列，与标题/玩家信息同属一个面板 */
#leftbar #topbar{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  background:rgba(255,255,255,.22);border:none;border-top:2px solid var(--line);
  border-radius:0;padding:12px 12px 14px;margin:0;box-shadow:none;
}
#leftbar #topbar .btn.tiny{
  width:100%;margin:0;text-align:center;font-size:14px;padding:9px 10px;
}
#leftbar #topbar .hud-item{font-size:14px;justify-content:center;}
#leftbar #topbar .dice-wrap{justify-content:center;}
.hint-bar{font-size:12px;color:#7a5a2a;background:rgba(231,184,75,.22);border:1px dashed rgba(138,106,31,.5);border-radius:10px;padding:6px 10px;line-height:1.4;}

/* 右栏底部开关：音乐 / 音效 / 战报 + 音量 */
#sidebar #settings-bar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:linear-gradient(180deg,#fff7e6,#f0ddb6);
  border:2px solid var(--line);border-radius:12px;padding:10px 12px;
  box-shadow:0 3px 0 var(--shadow);margin-top:auto;
}
#sidebar #settings-bar .toggle-chip{flex:1 1 auto;min-width:84px;}
#music-vol-wrap{
  display:flex;align-items:center;gap:6px;width:100%;
  padding-top:8px;margin-top:2px;border-top:1px dashed var(--line);
}
#music-vol-wrap .vol-ico{font-size:15px;}
#music-vol{flex:1 1 auto;accent-color:var(--red);cursor:pointer;height:6px;}

.toggle-chip{
  flex:1 1 0;min-width:0;font-family:inherit;font-size:13px;cursor:pointer;
  border:2px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#3a2a1a;font-weight:bold;
  box-shadow:0 2px 0 var(--shadow);transition:.15s;white-space:nowrap;
}
.toggle-chip:active{transform:translateY(1px);box-shadow:none;}
.toggle-chip::after{content:" · 开";font-size:11px;opacity:.8;}
.toggle-chip.off{
  background:linear-gradient(180deg,#cdbfa0,#b8a884);color:#6b5a3e;
  border-color:#9c886a;box-shadow:none;opacity:.9;
}
.toggle-chip.off::after{content:" · 关";}
.hud-item{font-size:16px;font-weight:bold;display:flex;align-items:center;gap:6px;}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid rgba(0,0,0,.2);}
.dice-wrap{display:flex;gap:8px;}
.die{
  width:38px;height:38px;background:#fff;border:2px solid var(--line);border-radius:8px;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:5px;
}
.die span{display:block;}
.die span.on{background:var(--red);border-radius:50%;margin:3px;}

/* ---------- 主区域 ---------- */
#main{display:flex;gap:18px;align-items:flex-start;min-width:0;width:100%;}
#board{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;flex:1 1 auto;min-width:0;
  background:linear-gradient(180deg,#e9d4ac,#dcc191);border:4px solid var(--line);
  border-radius:18px;padding:10px;box-shadow:inset 0 0 0 3px #fff7e655,0 8px 0 var(--shadow);
  position:relative;
}
.cell{aspect-ratio:1/1;position:relative;min-height:78px;}
.tile{
  position:absolute;inset:0;border-radius:10px;border:2px solid var(--line);
  background:linear-gradient(180deg,#fbf2da,#f0ddb6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3px;text-align:center;overflow:hidden;box-shadow:0 2px 0 #fff8;font-size:13px;
  transition:transform .12s,border-color .15s,box-shadow .15s;
}
.tile-city.owned{border-color:var(--owner-color);box-shadow:0 0 0 1px var(--owner-color),0 2px 0 #fff8;}
.tile-start{background:linear-gradient(180deg,#f6d36b,#e7b84b);border-color:#8a6a1f;}
.tile-jail{background:linear-gradient(180deg,#d9c7a6,#c3ab7e);}
.tile-tax{background:linear-gradient(180deg,#e7b6a6,#d08b73);}
.tile-card{background:linear-gradient(180deg,#cfe3c9,#aecfa6);}
.tile-fate{background:linear-gradient(180deg,#d8c9ec,#bda9dd);}
.tile-event{background:linear-gradient(180deg,#f6e0a6,#eccb6b);}
.tile-treasure{background:linear-gradient(180deg,#bfe3ef,#8fc9df);}
.tile-rest{background:linear-gradient(180deg,#e9dcc2,#d8c4a0);}
.t-name{font-weight:bold;line-height:1.1;font-size:13px;color:var(--ink);padding:0 2px;z-index:2;}
.t-price{font-size:11px;color:#7d1812;font-weight:bold;margin-top:1px;z-index:2;}
.t-icon{font-size:24px;z-index:2;}
.t-citylv{font-size:10px;color:var(--red);font-weight:bold;line-height:1;z-index:2;min-height:12px;}
.t-owner{position:absolute;top:0;left:0;right:0;height:0;border-radius:8px 8px 0 0;transition:.2s;z-index:1;}
.tile-city.owned .t-owner{height:8px;}
.t-builds{position:absolute;bottom:2px;left:3px;display:flex;gap:1px;z-index:3;}
.t-builds .bld{font-size:13px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
.tokens{position:absolute;right:3px;bottom:3px;display:flex;flex-wrap:wrap;gap:2px;max-width:62%;justify-content:flex-end;z-index:4;}
.t-info{position:absolute;left:2px;top:2px;font-size:11px;opacity:.5;z-index:3;pointer-events:none;transition:opacity .15s;}
.tile:hover .t-info,.tile.open .t-info{opacity:1;}
.token{width:26px;height:26px;border-radius:50%;border:2px solid #fff;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.45);transition:transform .15s;}
.token.active{outline:3px solid var(--gold-2);outline-offset:2px;transform:scale(1.12);}

/* 中央场景大图 */
#board-center{
  grid-row:2 / 8;grid-column:2 / 8;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px;position:relative;pointer-events:none;
}
#board-center .center-map{
  max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;
  border:3px solid var(--line);box-shadow:0 6px 0 var(--shadow),inset 0 0 0 2px #fff7e655;
  background:var(--paper-2);opacity:.96;
}
#board-center .center-title{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  background:rgba(58,42,26,.78);color:#f3e4c6;padding:5px 16px;border-radius:20px;
  font-size:14px;font-weight:bold;letter-spacing:1px;white-space:nowrap;
  border:1px solid var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* ---------- 侧栏 ---------- */
#leftbar{flex:0 0 300px;display:flex;flex-direction:column;min-width:0;}

/* 左栏统一面板：标题 + 玩家信息合在一起 */
.side-panel{
  background:linear-gradient(180deg,#fff7e6,#f0ddb6);
  border:3px solid var(--line);border-radius:16px;
  box-shadow:0 6px 0 var(--shadow);overflow:hidden;
}

/* 游戏标题横幅（左栏最上方） */
#game-title{
  position:relative;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,#7d1812,#b3261e);
  border:none;border-bottom:3px solid var(--gold);
  padding:14px 12px 12px;
}
#game-title::before{
  content:"";position:absolute;inset:6px;border:1px solid #e7b84b66;pointer-events:none;
}
#game-title .gt-emoji{font-size:30px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));}
#game-title .gt-main{
  font-size:32px;font-weight:bold;color:#f3e4c6;letter-spacing:3px;line-height:1.12;
  margin:4px 0 2px;text-shadow:2px 2px 0 #3a0a06,0 0 10px rgba(231,184,75,.55);
}
#game-title .gt-seal{
  position:absolute;top:9px;right:10px;width:32px;height:32px;border-radius:5px;
  background:var(--gold);color:#7d1812;font-weight:bold;font-size:16px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #fff7e6;transform:rotate(-8deg);box-shadow:0 2px 4px rgba(0,0,0,.4);
}
#game-title .gt-sub{
  font-size:12px;color:#f3e4c6;opacity:.9;letter-spacing:2px;
  border-top:1px solid #e7b84b55;padding-top:5px;margin-top:6px;
}

#sidebar{flex:0 0 320px;display:flex;flex-direction:column;gap:10px;min-width:0;}
#players-panel{display:flex;flex-direction:column;}
.pcard{
  padding:10px 12px;font-size:13px;
  border-bottom:1px dashed var(--line);
  background:transparent;box-shadow:none;border-radius:0;
}
.pcard:last-child{border-bottom:none;}
.pcard.cur{
  background:rgba(179,38,30,.08);
  border-left:4px solid var(--red);border-bottom-color:transparent;
}
.pcard.dead{opacity:.5;filter:grayscale(.6);}
.pc-top{font-weight:bold;display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.pc-row{color:#5a4630;font-size:12px;}
.pc-skill{color:#7d1812;font-size:11px;margin-top:3px;line-height:1.3;}
.controls{background:rgba(255,255,255,.4);border:2px solid var(--line);border-radius:10px;padding:10px;min-height:54px;}
.hint{color:#7a6243;text-align:center;padding:8px;}
.mod-btns{display:flex;align-items:center;flex-wrap:wrap;margin-bottom:6px;justify-content:center;}
.mod-label{font-size:13px;color:var(--red);font-weight:bold;}
.build-panel{border-top:1px dashed var(--line);padding-top:8px;margin-bottom:6px;}
.bp-title{font-size:12px;color:#5a4630;margin-bottom:4px;}
#sidebar h4{margin:4px 0;color:var(--red);border-left:5px solid var(--gold);padding-left:8px;}
.log{background:rgba(255,255,255,.5);border:2px solid var(--line);border-radius:10px;padding:8px;height:220px;overflow-y:auto;font-size:12px;line-height:1.5;}
.log-line{border-bottom:1px dotted #c9b288;padding:3px 0;}
.log-move{color:#3a2a1a;}
.log-good{color:#1f7a3d;}
.log-warn{color:#b37400;}
.log-pay{color:#b3261e;}
.log-fate{color:#6a4c93;}
.log-event{color:#9a6a00;}
.log-bad{color:#b3261e;font-weight:bold;}
.log-win{color:var(--red);font-weight:bold;font-size:13px;}

/* ---------- 弹窗 ---------- */
#overlay{position:fixed;inset:0;background:rgba(40,28,16,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;}
#overlay-box{position:relative;background:linear-gradient(180deg,#fbf2da,#f0ddb6);border:3px solid var(--line);border-radius:18px;max-width:440px;width:100%;padding:26px 24px;box-shadow:0 12px 40px rgba(0,0,0,.4);max-height:86vh;overflow-y:auto;}
#ov-close{position:absolute;top:8px;right:10px;border:none;background:transparent;font-size:22px;color:#7a6243;cursor:pointer;}
.ov-emoji{font-size:46px;text-align:center;}
.ov-title{font-size:22px;font-weight:bold;text-align:center;color:var(--red);margin:6px 0;}
.ov-text{font-size:15px;line-height:1.6;margin:10px 0;text-align:center;}
.ov-knowledge{background:rgba(200,147,43,.18);border-left:4px solid var(--gold);padding:8px 10px;border-radius:6px;font-size:13px;color:#5a4630;margin-top:10px;}
.rank{padding-left:22px;line-height:1.9;font-size:15px;}
.rank li{margin:2px 0;}

/* ---------- 战役（场景）选择 ---------- */
.sc-list{display:flex;flex-direction:column;gap:10px;}
.sc-card{
  display:flex;gap:12px;cursor:pointer;border:2px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.4);padding:8px;transition:.15s;align-items:center;overflow:hidden;
}
.sc-card:hover{filter:brightness(1.03);}
.sc-card.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red-2),0 2px 0 var(--shadow);background:#fff7e6;}
.sc-map{width:120px;height:80px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex:0 0 auto;background:#e9d4ac;}
.sc-info{flex:1 1 auto;min-width:0;}
.sc-name{font-weight:bold;font-size:17px;color:var(--red);}
.sc-name small{color:#8a724f;font-size:12px;font-weight:normal;margin-left:4px;}
.sc-intro{font-size:12px;color:#5a4630;line-height:1.4;margin-top:3px;}

/* 人物立绘 */
.char-img{width:30px;height:30px;border-radius:6px;object-fit:cover;border:1px solid var(--line);}
.char-chip.on .char-img{border-color:#fff;}

/* 弹窗图片 */
.ov-img{width:100%;max-height:200px;object-fit:cover;border-radius:10px;border:2px solid var(--line);margin-bottom:8px;}

/* ---------- 大字悬浮战报 ---------- */
#battle-report{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:80;display:none;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,#7d1812,#b3261e);color:#fff7e6;
  border:4px solid var(--gold);border-radius:16px;padding:22px 32px;max-width:78vw;
  cursor:pointer;box-shadow:0 16px 50px rgba(0,0,0,.55);animation:brpop .25s ease-out;
}
#battle-report .br-head{font-size:32px;font-weight:bold;margin-bottom:10px;text-shadow:2px 2px 0 #3a0a06;letter-spacing:1px;}
#battle-report .br-detail{font-size:19px;line-height:1.7;white-space:pre-line;}
#battle-report .br-tip{font-size:12px;opacity:.85;margin-top:10px;}
@keyframes brpop{from{transform:translate(-50%,-50%) scale(.7);opacity:0;}to{transform:translate(-50%,-50%) scale(1);opacity:1;}}

/* ---------- 领地面板 ---------- */
.terr-title{font-weight:bold;color:var(--red);margin-bottom:4px;}
.terr-info{font-size:12px;color:#5a4630;margin-bottom:6px;}
.terr-sec{border-top:1px dashed var(--line);padding-top:6px;margin-top:6px;}
.terr-sec>b{color:#5a4630;font-size:13px;}
.terr-note{font-size:11px;color:#8a724f;margin-left:4px;}
.terr-btns{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.terr-btns .btn small{font-size:10px;opacity:.8;}
.gen-row{display:flex;align-items:center;gap:6px;font-size:12px;padding:4px 5px;border:1px solid transparent;border-radius:6px;cursor:pointer;margin-top:3px;}
.gen-row.sel{border-color:var(--red);background:rgba(179,38,30,.1);}
.gen-name{font-weight:bold;}
.gen-stat{color:#5a4630;}
.gen-loc{color:#8a724f;margin-left:auto;}
.gen-row .btn{margin:0;}

/* 棋盘守军 / 寻访标记 */
.t-gar{position:absolute;left:2px;top:2px;font-size:10px;background:rgba(58,42,26,.72);color:#f3e4c6;padding:0 4px;border-radius:6px;z-index:3;display:none;}
.t-search{position:absolute;right:2px;top:2px;font-size:12px;z-index:3;display:none;}

/* ---------- 地图位置介绍浮层（点击显示 / 再点击关闭） ---------- */
.tile-tip{
  position:fixed;z-index:80;max-width:260px;pointer-events:auto;
  background:linear-gradient(180deg,#fbf2da,#f0ddb6);border:2px solid var(--line);
  border-radius:12px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  font-size:13px;color:var(--ink);line-height:1.5;
}
.tile-tip .tt-name{font-size:15px;font-weight:bold;color:#3a2a1a;}
.tile-tip .tt-type{display:inline-block;font-size:11px;color:#fff;background:var(--gold);border-radius:6px;padding:1px 7px;margin:2px 0 4px;}
.tile-tip .tt-line{margin-top:2px;color:#5a4630;}
.tile-tip .tt-desc{margin-top:4px;color:#3a2a1a;}
.tile-tip .tt-fact{margin-top:4px;color:#7a5a2a;font-size:12px;border-top:1px dashed rgba(138,106,31,.4);padding-top:4px;}
.tile-tip .tt-close{
  margin-top:8px;text-align:center;font-size:12px;color:#fff;background:var(--red);
  border-radius:8px;padding:4px 0;cursor:pointer;user-select:none;
}
.tile-tip .tt-close:active{opacity:.85;}

/* ---------- 玩家详细信息面板 ---------- */
.pd-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.pd-emoji{font-size:30px;line-height:1;}
.pd-name{font-size:18px;font-weight:bold;color:#3a2a1a;}
.pd-name small{font-weight:normal;color:#8a724f;font-size:12px;}
.pd-skill{font-size:12px;color:#7a5a2a;margin-top:2px;}
.pd-stats{font-size:13px;color:#5a4630;background:rgba(255,255,255,.4);border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin-bottom:6px;}
.pd-sec{border-top:1px dashed var(--line);padding-top:8px;margin-top:8px;}
.pd-sec>b{color:#5a4630;font-size:13px;}
.pd-note{display:block;font-size:12px;color:#8a724f;margin-top:4px;}
.pd-cities{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.pd-city{font-size:12px;background:rgba(179,38,30,.12);border:1px solid rgba(179,38,30,.3);border-radius:6px;padding:2px 7px;color:#7a2018;}
.pcard{cursor:pointer;}
.pcard:hover{box-shadow:0 0 0 2px rgba(180,140,40,.4);}

/* ---------- 响应式：窄屏堆叠 ---------- */
@media (max-width:900px){
  #main{flex-direction:column;min-width:0;width:100%;}
  #leftbar{flex:1 1 auto;width:100%;min-width:0;}
  #sidebar{flex:1 1 auto;width:100%;min-width:0;}
  #game-title .gt-main{font-size:26px;}
  #board{gap:4px;padding:6px;min-width:0;width:100%;}
  .cell{min-height:52px;}
  .tile{font-size:11px;}
  .t-name{font-size:11px;}
  .t-icon{font-size:18px;}
  .token{width:20px;height:20px;font-size:11px;}
  #board-center{padding:4px;}
  #board-center .center-title{font-size:11px;padding:3px 10px;bottom:10px;}
}

/* 超窄屏（手机竖屏）：棋盘进一步压缩，避免任何横向溢出 */
@media (max-width:560px){
  #app{padding:8px;}
  #board{padding:5px;gap:3px;border-width:3px;}
  .cell{min-height:40px;}
  .t-name{font-size:10px;}
  .t-price{font-size:9px;}
  .t-icon{font-size:15px;}
  .t-info{font-size:9px;}
  .token{width:16px;height:16px;font-size:9px;}
}