/* 仄梦的岛屿开拓 —— 深海图底 + 羊皮纸面板 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: radial-gradient(ellipse at 50% 30%, #14425c 0%, #0b2a3d 70%);
  color: #f2e8d5;
}
.hidden { display: none !important; }
button {
  font: inherit;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  background: #2c5a74;
  color: #f2e8d5;
  cursor: pointer;
}
button:hover:not(:disabled) { filter: brightness(1.15); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: #c78f3d; color: #24170a; font-weight: 700; }
button.warn { background: #8a4a3a; }
button.big { padding: 10px 18px; font-size: 16px; }
button.linkish { background: none; color: #9fc3d8; text-decoration: underline; padding: 4px; }
button.active { outline: 3px solid #ffd97a; }
input, select {
  font: inherit;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #4a7a90;
  background: #10344a;
  color: #f2e8d5;
  width: 100%;
}
.err { color: #ff9d8a; min-height: 1.2em; }
.hint { color: #a8c4d4; font-size: 14px; }

/* 首页 / 大厅 */
.screen { min-height: 100vh; }
#home, #lobby { display: grid; place-items: center; padding: 20px; }
.card {
  background: #f2e8d5;
  color: #2a2018;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card h1 { margin: 0; font-size: 26px; }
.card h2 { margin: 0; }
.card .hint { color: #6b5a45; }
.card input, .card select {
  background: #fff;
  color: #2a2018;
  border: 1px solid #c9b89a;
}
.tagline { margin: 0 0 6px; color: #6b5a45; }
.join-row { display: flex; gap: 8px; }
.join-row input { flex: 1; text-transform: uppercase; letter-spacing: 2px; }
.room-code { font-family: ui-monospace, monospace; letter-spacing: 4px; color: #a3551f; }
#lobby-players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#lobby-players li { display: flex; align-items: center; gap: 8px; background: #e6d9bd; border-radius: 8px; padding: 8px 12px; }
.tag { background: #c78f3d; color: #24170a; font-size: 12px; border-radius: 6px; padding: 1px 6px; }
.tag.bot { background: #8a9db0; }
.bot-rm { font-size: 12px; padding: 2px 8px; background: #a05a4a; color: #fff; }
#lobby-players li .bot-rm { margin-left: auto; }
#host-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#host-panel .vp-label { flex: 1 1 100%; }
.vp-label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid rgba(0,0,0,0.35); flex: none; }
.conn { width: 8px; height: 8px; border-radius: 50%; background: #b09a7a; display: inline-block; }
.conn.on { background: #4caf50; }

/* 对局布局 */
#game { display: flex; height: 100vh; gap: 10px; padding: 10px; }
#board-wrap { flex: 1; display: grid; place-items: center; min-width: 0; position: relative; }

/* 建造面板:一行一个可造项,资源点实心=已有、空心=缺 */
#build-panel { display: flex; flex-direction: column; gap: 5px; }
.build-row {
  display: grid;
  grid-template-columns: 60px minmax(88px, auto) 1fr 42px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: #f2e8d5;
  color: #2a2018;
  text-align: left;
  border-radius: 10px;
}
.build-row:disabled { opacity: 0.55; cursor: default; }
.build-row.active { outline: 3px solid #ffd97a; }
.b-name { font-weight: 700; white-space: nowrap; }
.b-name em { font-style: normal; font-size: 11px; color: #a3551f; margin-left: 3px; }
.b-pips { display: inline-flex; gap: 3.5px; flex-wrap: wrap; }
.bpip {
  width: 13px; height: 13px; border-radius: 3.5px; display: inline-block;
  background: var(--c); border: 1.5px solid rgba(0, 0, 0, 0.3);
}
.bpip.lack {
  background: transparent;
  border: 1.5px dashed var(--c);
  opacity: 0.75;
}
.b-status { font-size: 11px; line-height: 1.35; }
.b-status.lackText { color: #b03a2e; }
.b-status.okText { color: #2e7d46; font-weight: 700; }
.b-left { font-size: 11px; color: #8a7a5f; text-align: right; }

/* 交易提议面板 */
#trade-panel:not(:empty) {
  background: rgba(255, 217, 122, 0.14);
  border: 1px solid #c78f3d;
  border-radius: 10px;
  padding: 8px 10px;
}
.tp-offer { font-size: 13.5px; line-height: 1.9; }
.tp-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.tp-hint { font-size: 12.5px; color: #c4d6e0; }
.chip.small { font-size: 12.5px; padding: 2px 6px; }

/* 港口 */
.pier { stroke: #b09a6a; stroke-width: 2.5; }
.port-disc { stroke: #7a6845; stroke-width: 1.5; }
.port-label { font-size: 10.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
.port-label.any { fill: #6b5a45; }
#board { width: 100%; height: 100%; max-height: 96vh; }
#side {
  width: 340px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  background: rgba(10, 32, 45, 0.75);
  border-radius: 12px;
  padding: 12px;
}
#banner { font-size: 15px; min-height: 40px; padding: 8px 10px; border-radius: 8px; background: #10344a; }
#banner.mine { background: #7a5a1d; color: #ffe9b0; font-weight: 700; }
/* 盘面大骰子 */
#board-dice {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; gap: 12px;
  z-index: 5; pointer-events: none;
}
.bdie {
  width: 54px; height: 54px;
  background: #faf6ec;
  border: 2px solid #b09a6a;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  padding: 8px;
}
.bdie i { border-radius: 50%; }
.bdie i.on { background: #2a2018; }
#bdice-sum {
  min-width: 50px; height: 50px;
  border-radius: 50%;
  background: #c78f3d; color: #24170a;
  font-size: 27px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
}
#bdice-sum.seven { background: #b03a2e; color: #fff; }
#board-dice.rolling .bdie { animation: bdie-shake 0.18s ease-in-out infinite; }
#board-dice.rolling .bdie:last-of-type { animation-delay: 0.09s; }
@keyframes bdie-shake {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(11deg) translateY(-6px); }
}
#board-dice.settle .bdie, #board-dice.settle #bdice-sum { animation: settle-pop 0.5s ease; }
@keyframes settle-pop {
  40% { transform: scale(1.22); }
}
@media (max-width: 760px) {
  .bdie { width: 42px; height: 42px; padding: 6px; }
  #bdice-sum { min-width: 40px; height: 40px; font-size: 22px; }
}
#players { display: flex; flex-direction: column; gap: 4px; }
.player {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.06);
  font-size: 14px;
}
.player.active { background: rgba(255, 217, 122, 0.18); box-shadow: inset 0 0 0 1px #ffd97a; }
.pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { display: flex; gap: 2px; align-items: center; }
.mini { font-size: 11px; color: #d8c9a8; }
.pstat { font-size: 12px; color: #c4d6e0; }
.pvp { font-weight: 700; color: #ffd97a; }

.hand-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f2e8d5; color: #2a2018;
  border-radius: 8px; padding: 4px 8px; font-size: 14px;
}
.chip.empty { opacity: 0.45; }
.chip i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
#hand .chip { position: relative; }
.chip.gain-pop { animation: chip-pop 0.55s ease; }
.pstat.bump { display: inline-block; animation: chip-pop 0.55s ease; }
@keyframes chip-pop {
  30% { transform: scale(1.22); box-shadow: 0 0 0 3px rgba(255, 217, 122, 0.85); }
}
.gain-float {
  position: absolute; top: -15px; right: 0;
  color: #2e7d46; font-weight: 700; font-size: 13px;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  animation: float-up 0.95s ease forwards;
}
@keyframes float-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-16px); }
}
.chip.big { cursor: pointer; border: 2px solid transparent; }
.chip.big.sel, .chip.big:hover { border-color: #a3551f; }
.bank-row { font-size: 12px; color: #9db8c6; margin-top: 4px; }

.devs-title { font-size: 13px; color: #c4d6e0; margin-bottom: 4px; }
.dev-card { margin: 0 4px 4px 0; background: #5a4a7a; }

#actions { display: flex; flex-wrap: wrap; gap: 6px; }
#log {
  flex: 1; min-height: 120px; overflow-y: auto;
  background: rgba(0, 0, 0, 0.28); border-radius: 8px;
  padding: 8px; font-size: 13px; line-height: 1.55; color: #d9e5ec;
}
#chat-row input { background: #10344a; border-color: #2c5a74; }

/* 棋盘元素 */
.tile { stroke: #e8dcc0; stroke-width: 3; stroke-linejoin: round; }
.tile-name { font-size: 12.5px; fill: rgba(255, 255, 255, 0.92); text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,0.35); stroke-width: 2px; }
.disc { fill: #f6eed8; stroke: #b09a6a; stroke-width: 1.5; }
.disc-num { font-size: 15px; font-weight: 700; fill: #33291c; text-anchor: middle; }
.disc-num.red { fill: #c0392b; }
.pip { fill: #33291c; }
.pip.red { fill: #c0392b; }
.road-outline { stroke: #1d1610; stroke-width: 10.5; stroke-linecap: round; }
.road { stroke-width: 7; stroke-linecap: round; }
.building { stroke: #1d1610; stroke-width: 1.6; stroke-linejoin: round; }
.robber-body { fill: #2b2b33; stroke: #f2e8d5; stroke-width: 1.5; opacity: 0.95; }

.fx-produced {
  fill: rgba(255, 217, 122, 0.13);
  stroke: #ffd97a; stroke-width: 3.5; stroke-linejoin: round;
  pointer-events: none;
  animation: produced-pulse 1.7s ease-in-out infinite;
}
@keyframes produced-pulse {
  50% { opacity: 0.4; }
}

.fx-flash {
  fill: #fff3c4; stroke: #ffd97a; stroke-width: 4; stroke-linejoin: round;
  pointer-events: none; opacity: 0;
  animation: tile-flash 1.3s ease forwards;
}
@keyframes tile-flash {
  0% { opacity: 0; }
  22% { opacity: 0.85; }
  100% { opacity: 0; }
}

.hl { cursor: pointer; }
.hl-vertex { fill: rgba(255, 255, 255, 0.55); stroke: #ffd97a; stroke-width: 2.5; }
.hl-vertex:hover { fill: #ffd97a; }
.hl-edge { stroke: rgba(255, 255, 255, 0.55); stroke-width: 9; stroke-linecap: round; }
.hl-edge:hover { stroke: #ffd97a; }
.hl-tile { fill: rgba(255, 255, 255, 0.18); stroke: #ffd97a; stroke-width: 2.5; }
.hl-tile:hover { fill: rgba(255, 217, 122, 0.35); }
.hl-vertex, .hl-edge, .hl-tile { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* 弹窗与提示 */
#modal-layer {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: grid; place-items: center; z-index: 20;
}
#modal { max-height: 85vh; overflow-y: auto; }
#modal h3 { margin: 0 0 6px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper b { min-width: 20px; text-align: center; }
.stepper button { padding: 2px 10px; background: #d8c9a8; color: #2a2018; font-weight: 700; }
.res-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-status { color: #6b5a45; margin: 4px 0; }
.victim { display: flex; align-items: center; gap: 8px; }
table.result { border-collapse: collapse; width: 100%; }
table.result th, table.result td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #d8c9a8; }
table.result td:first-child { text-align: left; }

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #3a2c20; color: #ffe9b0; border: 1px solid #c78f3d;
  padding: 10px 18px; border-radius: 10px; z-index: 30;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* 手机竖屏:上棋盘下面板 */
@media (max-width: 760px) {
  #game { flex-direction: column; height: auto; min-height: 100vh; }
  #board { max-height: 54vh; }
  #side { width: auto; flex: 1; }
}