.layout {
  max-width: 1720px;
  grid-template-columns: minmax(860px, 1fr) 400px;
  align-items: start;
}

.board-wrap {
  /* Jalur tepi dibuat lebih tebal agar kartu perimeter lebih memanjang. */
  grid-template-columns: minmax(0, 1.8fr) repeat(9, minmax(0, 1fr)) minmax(0, 1.8fr);
  grid-template-rows: minmax(0, 1.8fr) repeat(9, minmax(0, 1fr)) minmax(0, 1.8fr);
  width: 100%;
  min-height: 820px;
}

.board-wrap .tile {
  min-width: 0;
  min-height: 0;
  padding: 7px;
  line-height: 1.08;
}

.board-wrap .tile.land:has(.crop-badge) { padding-bottom: 20px; }
.board-wrap .tile.player-owned > small { display: none; }

.board-wrap .pawn {
  width: 19px;
  height: 19px;
  right: 3px;
  bottom: 20px;
  border-width: 2px;
}

.board-wrap .pawn::before {
  left: 3px;
  top: -8px;
  width: 8px;
  height: 8px;
  border-width: 1px;
}

.board-wrap .tile > b {
  font-size: clamp(12px, .9vw, 15px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.board-wrap .tile > small,
.board-wrap .tile > .num {
  font-size: clamp(8px, .58vw, 10px);
  line-height: 1.15;
}

.board-wrap .tile-icon {
  font-size: clamp(18px, 1.35vw, 24px);
}

.board-wrap .crop-badge {
  font-size: clamp(7px, .52vw, 9px) !important;
  min-height: 15px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 4px;
}

.board-wrap .center {
  left: calc(14.285% + 13px);
  right: calc(14.285% + 13px);
  top: calc(14.285% + 13px);
  bottom: calc(14.285% + 13px);
}

.tile-status-stack {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 2px;
  max-width: calc(100% - 4px);
  pointer-events: none;
}

/* Petak tanah boleh menampilkan status ke arah area tengah papan. */
.tile.land { overflow: visible; }

.tile-status-stack i {
  display: block;
  padding: 2px 3px;
  border-radius: 2px;
  color: #fff;
  font: 900 7px/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 1px 2px #0003;
}

.tile-status-stack .status-survey { background: #08736e; }
.tile-status-stack .status-document { background: #654384; }
.tile-status-stack .status-owned { background: #9a6717; }

/* Seluruh badan badge berada di luar kotak, menghadap area tengah papan. */
.side-bottom .tile-status-stack { top: -4px; left: 2px; transform: translateY(-100%); }
.side-top .tile-status-stack { bottom: -4px; left: 2px; transform: translateY(100%); }
.side-right .tile-status-stack { left: -4px; top: 50%; flex-direction: column; transform: translate(-100%,-50%); }
.side-left .tile-status-stack { right: -4px; top: 50%; flex-direction: column; transform: translate(100%,-50%); }
.side-right .tile-status-stack,
.side-left .tile-status-stack { max-width: none; max-height: calc(100% - 4px); }
.side-right .tile-status-stack i,
.side-left .tile-status-stack i { writing-mode: horizontal-tb; padding: 3px 4px; overflow: hidden; }

.tile.player-owned { outline: 1px solid #c28b2d; outline-offset: -2px; }

@media (max-width: 700px) {
  .board-wrap .center {
    left: calc(14.285% + 7px);
    right: calc(14.285% + 7px);
    top: calc(14.285% + 7px);
    bottom: calc(14.285% + 7px);
  }
  .tile-status-stack { gap: 1px; }
  .tile-status-stack i { font-size: 6px; padding: 2px 3px; }
  .tile-status-stack .status-owned { max-width: 34px; overflow: hidden; }
  .side-bottom .tile-status-stack { top: -3px; }
  .side-top .tile-status-stack { bottom: -3px; }
  .side-right .tile-status-stack { left: -3px; }
  .side-left .tile-status-stack { right: -3px; }
}

@media (max-width: 1300px) {
  .layout { grid-template-columns: 1fr; }
  .board-wrap { min-width: 900px; min-height: 780px; }
  main { overflow-x: auto; }
  aside { width: min(100%, 860px); }
}

@media (max-width: 900px) {
  .board-wrap { min-width: 820px; min-height: 710px; }
  .board-wrap .tile > b { font-size: 12px; }
  .board-wrap .tile > small,
  .board-wrap .tile > .num { font-size: 8px; }
}