:root {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --text: #1f2328;
  --muted: #6a6f76;
  --border: #ddd6c8;
  --accent: #2f6fd6;
  --danger: #c4352b;
  --sea: #4a90b8;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
h1, h2, h3 { margin: 0 0 8px; }
h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); font-weight: 600; }

button, select, input {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: 5px 10px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.active { background: #e3edff; border-color: var(--accent); }
button.big { width: 100%; padding: 10px; font-size: 16px; font-weight: 600; }

/* Lobby */
.lobby { max-width: 560px; margin: 48px auto; padding: 0 16px; }
.lobby form { display: grid; gap: 12px; background: var(--panel); padding: 20px; border-radius: 10px; border: 1px solid var(--border); }
.lobby label { display: grid; gap: 4px; font-weight: 600; }
.link-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 8px; align-items: center; margin: 8px 0; }
.link-row input { width: 100%; font-size: 12px; }

/* Game */
.game { display: grid; grid-template-columns: 1fr 380px; grid-template-rows: 100vh; }
.board-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; }
.status { min-height: 44px; font-size: 17px; font-weight: 600; padding: 8px 4px; }
#board { flex: 1 1 0; width: 100%; min-height: 0; }
aside { background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto; padding: 12px; }
aside section { padding: 10px 0; border-bottom: 1px solid var(--border); }
aside section.highlight { background: #fff8e1; margin: 0 -12px; padding: 10px 12px; }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }

.players { display: grid; gap: 6px; }
.player { display: grid; grid-template-columns: 16px 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.player.current { background: #eef3fb; outline: 2px solid var(--accent); }
.player .small, .player .tag { grid-column: 2 / 4; }
.player .pts { font-weight: 700; }
.tag { display: inline-block; font-size: 11px; background: #fff1c7; border-radius: 4px; padding: 1px 6px; width: fit-content; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #0003; vertical-align: -1px; margin-right: 4px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: color-mix(in srgb, var(--c) 30%, white); border: 1px solid var(--c); font-size: 13px; }
.hand { display: flex; flex-wrap: wrap; gap: 6px; }
.hand .chip { font-size: 15px; padding: 4px 10px; }
.steppers { display: grid; gap: 4px; margin-bottom: 8px; }
.stepper { display: grid; grid-template-columns: 1fr 30px 24px 30px; align-items: center; gap: 4px; text-align: center; }
.stepper button { padding: 2px 0; }
.stepper .chip { justify-self: start; }
.dev { margin: 6px 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding-top: 6px; }
.dice { font-size: 18px; margin-bottom: 6px; }
.log ol { margin: 0; padding-left: 0; list-style: none; font-size: 13px; max-height: 260px; overflow-y: auto; }

/* Board */
.sea { fill: var(--sea); }
.hex-shape { stroke: #f4ead0; stroke-width: 0.06; }
.hex-shape.target { stroke: #fff; stroke-width: 0.12; cursor: pointer; filter: brightness(1.12); }
.token { fill: #fbf6e8; stroke: #0004; stroke-width: 0.02; }
.token-text { font-size: 0.34px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: #222; }
.token-text.hot, .pip.hot { fill: var(--danger); }
.pip { fill: #222; }
.robber { fill: #222; stroke: #fff; stroke-width: 0.04; }
.harbor line { stroke: #f4ead0; stroke-width: 0.07; }
.harbor circle { stroke: #333; stroke-width: 0.03; }
.harbor-text { font-size: 0.26px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: #222; }
.road-outline { stroke: #222; stroke-width: 0.2; stroke-linecap: round; }
.road { stroke-width: 0.13; stroke-linecap: round; }
.building { stroke: #222; stroke-width: 0.04; }
.edge-target { stroke: #fff; stroke-width: 0.18; stroke-linecap: round; opacity: 0.75; cursor: pointer; animation: pulse 1s infinite alternate; }
.vertex-target { fill: #fff; stroke: #222; stroke-width: 0.03; opacity: 0.85; cursor: pointer; animation: pulse 1s infinite alternate; }
.edge-target:hover, .vertex-target:hover { opacity: 1; stroke: var(--accent); }
@keyframes pulse { from { opacity: 0.45; } to { opacity: 0.95; } }

@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; grid-template-rows: auto; }
  #board { flex: none; }
  #board { height: 70vh; }
  aside { border-left: 0; border-top: 1px solid var(--border); }
}