/*
 * 관전용 판. `table.css` 위에 얹는 얇은 한 겹이다.
 *
 * 지휘탁자는 일하는 자리라 여러 판이 고르게 서 있다. 이 화면은 보는 자리다.
 * 그래서 딱 두 가지만 바꾼다: 전장을 화면의 주인으로 만들고, 손댈 수 없는
 * 자리라는 것을 칩이 스스로 말하게 한다.
 *
 * 색·글자·띠는 한 글자도 새로 정하지 않는다. 같은 전쟁이 같은 지도판 위에
 * 있어야 하고, 두 번째 시각 언어를 들이는 순간 그 전제가 조용히 깨진다.
 */

.view-onlooker {
  display: grid;
  gap: 0;
  max-width: 92rem;
  padding: 1.6rem 1.4rem 3rem;
  margin-inline: auto;
}

/* 전역이 맨 위에 서고, 그 위에는 아무것도 없다. */
.view-onlooker > .panel-campaign {
  border-top: 0;
  padding-top: 0.6rem;
}

/*
 * 전장. 이 화면에서 가장 큰 것.
 *
 * 지휘탁자에서는 칩 하나가 누를 것이지만 여기서는 누를 것이 없다. 그래서
 * 칩을 조금 키우고, 한 화면에 전선 마흔다섯이 한꺼번에 들어오도록 둔다.
 * 전장을 스크롤해서 봐야 하는 순간 그것은 더 이상 전장이 아니라 목록이다.
 */
.panel-battlefield {
  border-bottom: 0;
  padding-bottom: 0.4rem;
}

.panel-battlefield .board {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.35rem;
  min-height: 26rem;
  align-content: start;
}

/* 볼 뿐이라 손가락이 바뀌지 않고, 눌러도 아무 일이 없으니 들뜨지도 않는다. */
.view-onlooker .tile {
  min-height: 4.4rem;
  cursor: default;
}

.view-onlooker .tile:hover,
.view-onlooker .tile:focus-visible {
  transform: none;
  box-shadow: 0 1px 0 rgb(0 0 0 / 45%);
  border-color: #24393b;
}

/* 딛고 선 곳만은 눈에 띄어야 한다. 그것이 이 단이 실제로 쥔 전부다. */
.view-onlooker .tile[data-held="held"] {
  border-color: var(--chinagraph);
}

/* 둔 수. 한 줄에 하나씩, 최근 것이 위에. */
.view-onlooker .scrolls {
  display: grid;
  gap: 0;
}

.view-onlooker .generation {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: var(--rule-hair);
}

.view-onlooker .generation .said {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

@media (width <= 40rem) {
  .view-onlooker {
    padding: 1rem 0.8rem 2rem;
  }

  .panel-battlefield .board {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    min-height: 0;
  }

  .view-onlooker .generation {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}