.gamewrap{max-width:min(1280px,96vw);margin:0 auto;padding:10px;display:grid;grid-template-columns:1fr 300px;gap:14px;align-items:start}
.gamewrap>div{min-width:0}                 /* 關鍵：grid 欄可收縮，手牌再多也不撐寬棋盤 */
@media(max-width:960px){.gamewrap{grid-template-columns:1fr}}

/* board — 用視窗高度收斂，整盤盡量免捲動 */
#board{
  display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);
  gap:3px;aspect-ratio:1/1;background:#e7c98f;padding:6px;border-radius:14px;
  border:4px solid #c99a4e;max-width:min(860px,calc(100vh - 210px));margin:0 auto;width:100%
}
.cell{
  background:var(--paper);border-radius:6px;font-size:10px;padding:3px;position:relative;
  display:flex;flex-direction:column;overflow:hidden;border:1px solid #e6cfa8;min-height:0
}
.cell .cn{font-weight:700;line-height:1.15;color:#4a3520}
.cell .ct{font-size:9px;color:#9a7c50;margin-top:auto}
.cell.corner{justify-content:center;align-items:center;text-align:center;font-weight:800;font-size:13px}
.cell .ownbar{height:6px;border-radius:3px;margin-bottom:2px}
.cell .house{font-size:11px}
.cell .pawns{position:absolute;inset:0;display:flex;gap:2px;flex-wrap:wrap;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.cell .pawn{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:#fff;box-shadow:0 2px 6px #0006}
.cell .pawn-active{width:60px;height:60px;border-width:4px;box-shadow:0 0 0 3px #ffd54f,0 5px 14px #0008;z-index:9}
.cell .pawn-bob{animation:bob .8s ease-in-out infinite}
.cell .pawn-hop{animation:hop .13s ease-out}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hop{0%{transform:translateY(-16px) scale(1.12)}100%{transform:translateY(0) scale(1)}}
.cell.hascur{outline:3px solid #ffb300;outline-offset:-3px;box-shadow:inset 0 0 14px #ffb30099}
/* 現在輪到誰 */
#turnbanner{display:flex;align-items:center;gap:10px;background:#fff1c2;border:2px solid var(--gold);border-radius:12px;padding:8px 10px;margin-bottom:10px}
#turnbanner img{width:46px;height:46px;border-radius:50%;border:3px solid var(--gold)}
#turnbanner small{color:#9a7c50}
#turnbanner b{font-size:18px;color:#7a3c00}
#boardcenter{grid-column:2/11;grid-row:2/11;background:url(../assets/board.png) center/cover;border-radius:10px;
  display:flex;align-items:flex-end;justify-content:center}
/* 已被擁有的產權格：地主色暈染 + 過路費徽章 */
.cell.owned{background:color-mix(in srgb,var(--own) 16%,#fff);border-color:var(--own);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--own) 35%,#fff)}
.cell.owned .cn{color:#3a2a16}
.cell .tollbadge{position:absolute;top:2px;right:2px;background:#7a3c00;color:#ffd54f;font-size:9px;font-weight:800;padding:1px 4px;border-radius:8px;z-index:4;box-shadow:0 1px 3px #0005}
.cell.prop{cursor:pointer}
/* 產權資訊卡 */
.propsheet{margin:6px 0;text-align:left}
.ps-owner{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;border-radius:10px;padding:8px 12px;margin-bottom:10px}
.ps-owner img{width:34px;height:34px;border-radius:50%;border:2px solid #fff}
.ps-owner.none{background:#bda;color:#3a2a16;justify-content:center;background:#efe2c4}
.ps-row{display:flex;justify-content:space-between;align-items:center;padding:7px 4px;border-bottom:1px dashed #e0cfa6;font-size:15px}
.ps-row span{color:#9a7c50}
.ps-row b{color:#4a3520}
.ps-row.hot{background:#fff1c2;border-radius:8px;border-bottom:0;margin:2px 0}
.ps-row.hot b{color:#b53a26;font-size:20px}
.ps-row.up b{color:#357a38}
.tolltable{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.tolltable th{background:#7a3c00;color:#ffe9a8;padding:5px}
.tolltable td{border:1px solid #e0cfa6;padding:5px 6px;text-align:center;color:#4a3520}
.tolltable tr:nth-child(even) td{background:#fffaf0}
.cell.chance{background:#fff3d6}.cell.destiny{background:#ffe0e0}
.cell.go{background:#ffe9a8}.cell.charge{background:#d6f5ea}.cell.blackhole{background:#e6dcff}.cell.jail{background:#ffd9c2}

/* sidebar */
.panel{background:var(--paper);border:3px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
.timer{font-size:30px;font-weight:900;text-align:center;color:var(--red)}
.players .pblock{padding:6px;border-radius:10px;margin-bottom:6px;border:2px solid transparent}
.players .pblock.active{background:#fff1c2;border-color:var(--gold)}
.players .prow{display:flex;align-items:center;gap:8px;font-size:13px}
.players .prow img{width:30px;height:30px;border-radius:50%}
.players .prow .pts{margin-left:auto;font-weight:800}
.players .prow small{color:#9a7c50}
/* 具象化手牌 */
.minihand{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.mini{width:46px;border:2px solid;border-radius:6px;overflow:hidden;background:#fff;text-align:center}
.mini .mb{color:#fff;font-size:10px;font-weight:800;line-height:14px}
.mini .mn{font-size:9px;font-weight:700;color:#4a3520;padding:2px 1px;line-height:1.1;height:24px;display:flex;align-items:center;justify-content:center}
#rollbtn{width:100%}
.dice{display:flex;gap:8px;justify-content:center;font-size:34px;margin:8px 0}
#log{height:150px;overflow:auto;font-size:12px;line-height:1.6;background:#fffdf7;border:2px solid var(--line);border-radius:10px;padding:8px}
#log .me{color:#b53a26;font-weight:700}

/* hand：固定一排、限制在欄寬內橫向捲動，手牌再多也不爆版 */
.hand{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:6px 2px 10px;max-width:100%;
  scrollbar-width:thin;scrollbar-color:var(--gold) #eadfc6;scroll-snap-type:x proximity}
.hand::-webkit-scrollbar{height:8px}
.hand::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px}
.hand::-webkit-scrollbar-track{background:#eadfc6;border-radius:8px}
.hcard{min-width:92px;width:92px;border-radius:10px;border:2px solid var(--line);background:#fff;cursor:pointer;overflow:hidden;flex:0 0 auto;scroll-snap-align:start}
.hcard .hb{color:#fff;font-size:11px;font-weight:800;padding:3px 5px}
.hcard .hn{font-size:13px;font-weight:800;padding:4px 5px 2px}
.hcard .hd{font-size:10px;color:#6b5436;padding:0 5px 6px;line-height:1.3}
.hcard.sel{outline:3px solid var(--gold)}
.hcard:hover{transform:translateY(-2px)}

/* modal */
.modal{position:fixed;inset:0;background:#0007;display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal.on{display:flex}
.box{background:var(--paper);border-radius:18px;padding:22px;max-width:600px;width:100%;max-height:92vh;overflow-y:auto;text-align:center;border:5px solid var(--gold)}
/* 答題手牌：自動換行，不用左右拉 */
#mhand{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;overflow:visible;padding:2px;max-height:42vh;overflow-y:auto}
#mhand .hcard{min-width:0;flex:initial}
.box h3{margin:0 0 8px;color:#7a3c00}
.scenebox{background:#fff;border:2px dashed var(--line);border-radius:12px;padding:14px;font-size:17px;font-weight:700;margin:10px 0}
.sitart{width:180px;height:180px;margin:6px auto 0;border-radius:14px;overflow:hidden;border:3px solid var(--line)}
.sitart img{width:100%;height:100%;object-fit:cover;display:block}
.wheel{width:120px;height:120px;border-radius:50%;margin:14px auto;
  background:conic-gradient(#4caf50 0 252deg,#e8513a 252deg 360deg);position:relative;transition:transform 2.4s cubic-bezier(.1,.5,.1,1)}
.wheel::after{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:16px solid #4a3520}
.result{font-size:22px;font-weight:900;margin:10px 0}
.result.ok{color:#357a38}.result.no{color:#b53a26}
.rsub{font-size:16px;font-weight:700;color:#4a3520;margin:6px 0}
.whybox{margin-top:10px;background:#fff7e0;border:2px dashed var(--gold);border-radius:12px;
  padding:10px 12px;font-size:14px;font-weight:600;line-height:1.6;color:#6b4e1e;text-align:left}
.setup{max-width:560px;margin:30px auto;text-align:center}
.charpick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.charpick .cp{border:3px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;background:#fff}
.charpick .cp.on{border-color:var(--gold);background:#fff1c2}
.charpick .cp img{width:60px;height:60px;border-radius:50%}
.charpick .cp div{font-size:12px;font-weight:700;margin-top:4px}
/* 開局選項：獲勝條件 / 時間 */
.optgroup{margin:14px 0}
.optlabel{font-size:13px;color:#9a7c50;font-weight:700;margin-bottom:6px}
.seg{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.seg button{flex:1 1 auto;min-width:88px;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:#7a5a30;cursor:pointer}
.seg button.on{background:var(--gold);border-color:#c99a4e;color:#5a2c00;box-shadow:0 2px 6px #0002}
/* 玩家清單（命名 + 人類/電腦） */
#roster{margin:12px 0}
.seatrow{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:7px 10px;margin-bottom:8px}
.seatrow img{width:40px;height:40px;border-radius:50%}
.seatname{flex:1 1 auto;min-width:0;font-size:15px;font-weight:800;color:#4a3520;border:2px solid var(--line);border-radius:8px;padding:7px 9px}
.seg.mini2{flex:0 0 auto;gap:6px}
.seg.mini2 button{min-width:0;padding:7px 10px;font-size:13px}
/* 思考倒數徽章 */
#think{display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;
  background:#2b6a3a;color:#fff;font-size:16px;font-weight:800;padding:8px 18px;border-radius:22px;box-shadow:0 4px 12px #0005}
#think.urgent{background:#b53a26;animation:thinkpulse .5s ease-in-out infinite}
@keyframes thinkpulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.08)}}
/* 答錯扣分標記 */
.penalty{display:inline-block;margin-top:8px;background:#b53a26;color:#fff;font-weight:800;font-size:15px;padding:4px 14px;border-radius:20px}
/* 情境：直接點習慣作答 */
.hbtns{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}
@media(max-width:520px){.hbtns{grid-template-columns:repeat(4,1fr)}}
.hbtn{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:2px solid var(--hc);border-radius:10px;background:#fff;cursor:pointer;line-height:1.1}
.hbtn b{color:var(--hc);font-size:15px}
.hbtn small{font-size:9px;color:#6b5436;font-weight:700}
.hbtn:hover{background:var(--hc);color:#fff}
.hbtn:hover b,.hbtn:hover small{color:#fff}

/* ===== 手機響應式 ===== */
@media(max-width:640px){
  .gamewrap{padding:8px;gap:10px}
  #board{max-width:96vw;gap:2px;padding:4px;border-width:3px}     /* 直式手機以寬度為準、填滿 */
  .cell{font-size:8px;padding:2px;border-radius:4px}
  .cell .cn{line-height:1.1}
  .cell .ct,.cell .house{font-size:7px}
  .cell .pawn{width:30px;height:30px;border-width:2px}
  .cell .pawn-active{width:40px;height:40px;border-width:3px}
  .cell .tollbadge{font-size:7px;padding:0 3px}
  #turnbanner b{font-size:16px}
  .timer{font-size:24px}
  .charpick{grid-template-columns:repeat(3,1fr);gap:8px}
  .charpick .cp img{width:48px;height:48px}
  .seg button{min-width:0;flex:1 1 44%;padding:10px 8px;font-size:13px}
  .box{padding:16px}
  #mhand{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
  .hand{flex-wrap:nowrap}                                          /* 下方手牌列維持可橫滑 */
}

/* ===== 對戰模式（2 人面對面，上方倒轉 180°） ===== */
#vswrap{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:760px;margin:0 auto;padding:6px}
.vszone{width:100%;background:var(--paper);border:3px solid var(--line);border-radius:14px;padding:8px 10px}
.vszone.active{border-color:var(--gold);background:#fff8e6;box-shadow:0 0 0 3px #ffd54f66}
.vszone.flip{transform:rotate(180deg)}
.vsbar{display:flex;align-items:center;gap:10px}
.vsinfo{flex:1 1 auto;min-width:0}
.vsname{display:flex;align-items:center;gap:8px;color:#7a3c00}
.vsname img{width:36px;height:36px;border-radius:50%;border:3px solid var(--gold)}
.vsname b{font-size:17px}
.vsnow{color:#b53a26;font-weight:800;font-size:13px}
.vsstat{font-size:14px;font-weight:700;color:#4a3520;margin-top:3px}
.vstimer{font-size:22px;font-weight:900;color:var(--red);flex:0 0 auto}
.vsthink{font-size:18px;font-weight:900;color:#2b6a3a;flex:0 0 auto;min-width:60px;text-align:center}
.vsthink.urgent{color:#b53a26}
.vsroll{flex:0 0 auto;font-size:15px;padding:10px 18px;box-shadow:0 4px 0 #b53a26}
.vsroll:disabled{opacity:.4;box-shadow:none;cursor:not-allowed}
.vshand{padding:4px 2px}
.vshand .hcard.mini{min-width:74px;width:74px}
.vshand .hcard.mini .hd{display:none}
#vsmid{width:100%;display:flex;justify-content:center}
#vswrap #board{max-width:min(560px,calc(100vh - 330px))}
.modal.flip .box{transform:rotate(180deg)}
#think.flip{transform:translateX(-50%) rotate(180deg)}
/* 續玩橫幅 */
.resumecard{background:#fff1c2;border:3px solid var(--gold);border-radius:14px;padding:12px 14px;margin-bottom:14px;text-align:center}
.resumecard b{display:block;font-size:16px;color:#7a3c00;margin-bottom:4px}
.resumecard span{display:block;font-size:13px;color:#9a7c50;margin-bottom:8px}
@media(max-width:640px){
  #vswrap #board{max-width:min(94vw,calc(100vh - 300px))}
  .vsname b{font-size:15px}
  .vsroll{padding:9px 12px;font-size:14px}
}