* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #1d2b1f; --panel: #f4f0e1; --ink: #26221a; --accent: #c8102e;
  --line: #b8ad91; --btn: #2e5e34; --btn2: #6b6353;
}
body {
  background: radial-gradient(circle at 30% 20%, #2c4230, #17221422), #1d2b1f;
  color: #f4f0e1; font-family: system-ui, "Segoe UI", sans-serif;
  min-height: 100vh; padding: 12px;
}
header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 10px 12px; }
h1 { font-size: 26px; letter-spacing: 3px; color: #f9f4e0; text-shadow: 2px 2px 0 #00000066; }
h1 .sub { font-size: 12px; letter-spacing: 1px; color: #a8c5a0; margin-left: 10px; font-weight: 400; }
#topbar { display: flex; align-items: center; gap: 14px; font-size: 14px; }
#turninfo { background: #00000033; padding: 4px 10px; border-radius: 6px; }
#bank-info { color: #cdddc7; font-size: 12px; }

main { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
#boardwrap { background: #f4f0e1; border: 3px solid #0e1510; border-radius: 10px; padding: 6px; box-shadow: 0 8px 30px #00000088; }
canvas { display: block; }

#sidebar { width: 380px; display: flex; flex-direction: column; gap: 10px; }
section {
  background: #26352a; border: 1px solid #3c5342; border-radius: 10px; padding: 10px;
}
section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: #a8c5a0; margin-bottom: 8px; }

/* players */
.player {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 6px;
  border-radius: 8px; background: #f4f0e1; color: var(--ink); border-left: 8px solid #999;
}
.player.active { outline: 3px solid #ffd34d; }
.player.dead { opacity: .45; filter: grayscale(1); }
.player .tok { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #26221a; flex: none; }
.player .pname { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .pcash { font-variant-numeric: tabular-nums; font-weight: 700; color: #1e6b2c; }
.player .pprops { font-size: 11px; color: #5c554a; flex-basis: 100%; }
.player .row { display: flex; flex-wrap: wrap; gap: 10px; }

/* dice */
#dicebox { display: flex; gap: 12px; justify-content: center; padding: 6px; }
.die {
  width: 52px; height: 52px; background: #faf7ec; border: 2px solid #26221a; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #26221a;
}

/* actions */
#promptmsg { font-size: 14px; margin-bottom: 8px; color: #ffe9a8; min-height: 20px; }
#actions { display: flex; flex-wrap: wrap; gap: 8px; }
button {
  font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #00000055;
  padding: 8px 14px; background: var(--btn); color: #fff; font-weight: 600;
}
button:hover { filter: brightness(1.15); }
button.secondary { background: var(--btn2); }
button.danger { background: #8a1c1c; }
button.primary { background: #c8102e; padding: 10px 18px; font-size: 15px; }
button:disabled { opacity: .4; cursor: not-allowed; }

/* log */
#logbox { flex: 1; min-height: 140px; }
#log { max-height: 260px; overflow-y: auto; font-size: 12.5px; line-height: 1.45; }
#log .turn { color: #ffd34d; font-weight: 700; }
#log .money { color: #9fe0a8; }
#log div { padding: 1px 2px; }

/* modals */
.modal {
  position: fixed; inset: 0; background: #000000a8; display: flex; align-items: center;
  justify-content: center; z-index: 50;
}
.modal.hidden { display: none; }
.dialog {
  background: var(--panel); color: var(--ink); border-radius: 12px; padding: 22px;
  width: min(420px, 92vw); box-shadow: 0 12px 40px #000; border: 3px solid #0e1510;
}
.dialog.wide { width: min(640px, 95vw); }
.dialog h2 { margin-bottom: 14px; letter-spacing: 1px; }
.dialog label { display: block; margin: 10px 0; font-size: 14px; }
.dialog input[type="text"], .dialog input[type="number"], .dialog select {
  font: inherit; padding: 6px 8px; border: 1px solid #7a7261; border-radius: 6px; width: 100%;
  background: #fff; color: var(--ink);
}
.dialog .checkline { display: flex; align-items: center; gap: 8px; }
.dialog .checkline input { width: auto; }
.dialog .row { display: flex; gap: 10px; margin-top: 14px; justify-content: flex-end; }
#cardtext { font-size: 17px; font-style: italic; margin: 10px 0 16px; }

/* property management rows */
.prop-row {
  display: flex; align-items: center; gap: 8px; padding: 6px; border-bottom: 1px solid #cfc6b2;
  font-size: 13px;
}
.prop-row .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid #0006; }
.prop-row .pname2 { flex: 1; font-weight: 600; }
.prop-row .pdetail { color: #5c554a; font-size: 12px; }
.prop-row button { padding: 4px 8px; font-size: 12px; }
.prop-row .mort { background: #8a6d1c; }
.prop-row .unmort { background: #1e6b2c; }
.prop-row .sell { background: #8a1c1c; }