:root { color-scheme: dark; }
* { box-sizing: border-box; touch-action: manipulation; }
html, body {
  margin: 0; padding: 0; height: 100dvh; overflow: hidden;
  background: #0a0a0a; color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none;
}
main {
  height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column;
  padding: max(60px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); gap: 12px;
}
.score-bar { display: flex; gap: 8px; align-items: stretch; }
.score-box { flex: 1; background: #161616; border: 1px solid #2a2a2a; border-radius: 12px; padding: 8px 12px; text-align: center; min-width: 0; }
.score-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #a0a0a0; }
.score-val, .best-val { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #f5f5f5; margin-top: 2px; line-height: 1.1; }
.new-btn { flex: 0 0 auto; font: inherit; color: #fff; background: #4f9eff; border: none; border-radius: 12px; padding: 0 18px; min-height: 56px; cursor: pointer; font-weight: 700; font-size: 14px; -webkit-tap-highlight-color: transparent; }
.new-btn:active { background: #3d8ae8; }

#game { flex: 1; display: flex; min-height: 0; }
.ch-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 0; min-width: 0; position: relative; }

/* 보드는 정사각. 폭과 남은 높이 중 작은 쪽에 맞춘다 (세로 짧은 기기에서 잘리지 않도록). */
.ch-board {
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  width: min(100%, 360px); aspect-ratio: 1; border-radius: 8px; overflow: hidden;  /* layout()이 화면에 맞춰 덮어쓴다 */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); flex: 0 0 auto;
}
.ch-sq {
  display: flex; align-items: center; justify-content: center; position: relative;
  font-size: clamp(20px, 8.2vw, 40px); line-height: 1; cursor: pointer;
}
.ch-sq.light { background: #e6e2cf; }
.ch-sq.dark  { background: #6f8f5a; }
/* 유니코드 체스 글리프는 '검은 말' 모양(U+265x) 하나만 쓰고 색으로 구분한다.
   폰트마다 흰 말(U+2654)의 속이 빈 모양이 배경과 섞여 안 보이는 일이 있어서다. */
.ch-sq.w { color: #ffffff; text-shadow: 0 0 1px #14161a, 0 1px 2px rgba(0,0,0,0.45), 1px 0 0 #14161a, -1px 0 0 #14161a, 0 1px 0 #14161a, 0 -1px 0 #14161a; }
.ch-sq.b { color: #16181d; text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.ch-sq.last::before { content: ''; position: absolute; inset: 0; background: rgba(255, 209, 102, 0.32); }
.ch-sq.sel::before  { content: ''; position: absolute; inset: 0; background: rgba(79, 158, 255, 0.45); }
.ch-sq.check::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,80,80,0.75), rgba(255,80,80,0) 70%); }
/* 빈 칸 목적지는 점, 잡는 수는 테두리 — 말 그림을 가리지 않는다. */
.ch-sq.dest::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(20, 30, 45, 0.42); }
.ch-sq.cap::after  { content: ''; position: absolute; inset: 6%; border: 3px solid rgba(20, 30, 45, 0.45); border-radius: 50%; }
.ch-sq > * { position: relative; z-index: 1; }

.ch-status { flex: 0 0 auto; min-height: 22px; font-size: 14px; font-weight: 700; text-align: center; color: #f5f5f5; }
.ch-status.dim { color: #9aa3b2; }
.ch-status.warn { color: #ff8080; }

.ch-promo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  background: #161616; border: 1px solid #3a3a3a; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.ch-promo-t { font-size: 12px; font-weight: 700; color: #a0a0a0; margin-right: 2px; }
.ch-promo-b {
  font: inherit; font-size: 30px; line-height: 1; width: 48px; height: 48px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #6f8f5a; border: none; border-radius: 8px;
  color: #ffffff; text-shadow: 1px 0 0 #14161a, -1px 0 0 #14161a, 0 1px 0 #14161a, 0 -1px 0 #14161a;
  -webkit-tap-highlight-color: transparent;
}
.ch-promo-b:active { background: #5d7a4a; }

.overlay-sub { margin: -4px 0 4px; font-size: 14px; font-weight: 600; color: #a0a0a0; }
.overlay-howto { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: #b8b8b8; }
.overlay-card .start-btn, .overlay-card .cont-btn { background: #4f9eff; border-color: #4f9eff; }

.home-link, .hof-link {
  position: fixed; top: max(12px, env(safe-area-inset-top)); z-index: 10;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #fff; text-decoration: none;
  font-size: 20px; font-weight: 600; line-height: 1; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s ease; border: none; cursor: pointer; font-family: inherit;
}
.home-link { left: max(12px, env(safe-area-inset-left)); }
.hof-link { right: max(12px, env(safe-area-inset-right)); }
@media (hover: hover) { .home-link:hover, .hof-link:hover { background: rgba(0, 0, 0, 0.55); } }

.overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.overlay[hidden] { display: none; }
.overlay-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; min-width: 240px; max-width: 320px; width: 100%; }
.overlay-card h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.overlay-card button { font: inherit; color: #fff; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 12px 20px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; width: 100%; -webkit-tap-highlight-color: transparent; }
.overlay-card button:active { background: rgba(255, 255, 255, 0.18); }
.overlay-card .save-btn { background: #4f9eff; border-color: #4f9eff; }
.overlay-card .save-btn:active { background: #3d8ae8; }

/* 잡은 기물 줄. 높이를 항상 차지하게 두어(빈 줄이어도) 보드 크기가 판 도중에 안 바뀐다 —
   보드가 리사이즈되면 layout()을 다시 부를 때까지 탭 좌표가 흔들린다. */
.ch-taken {
  flex: 0 0 auto; min-height: 24px; width: min(100%, 360px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: 19px; line-height: 1;
}
.ch-taken .w { color: #ffffff; text-shadow: 1px 0 0 #14161a, -1px 0 0 #14161a, 0 1px 0 #14161a, 0 -1px 0 #14161a; margin-right: -4px; }
.ch-taken .b { color: #6d7480; margin-right: -4px; }
.ch-taken em { font-style: normal; font-size: 13px; font-weight: 800; color: #9aa3b2; margin-left: 10px; }