:root {
  /* 보드(칸 15개 + 좌우 패딩 0.7칸)와 body 좌우 패딩이 화면 폭을 넘지 않게 계산 */
  --cell: clamp(17px, min(calc((100vw - 32px) / 15.7), 5.6vh), 44px);
  --line: #6b4f27;
  --wood: #dcb35c;
  --wood-dark: #c89b45;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", "Malgun Gothic", sans-serif;
  background: #f4efe6;
  color: #2b2419;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100vh;
  padding: 20px 12px 40px;
}

header {
  text-align: center;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.tagline {
  color: #7a6a4f;
  font-size: 0.9rem;
  margin-top: 2px;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: calc(var(--cell) * 15 + 32px);
}

.mode-tabs {
  display: flex;
  gap: 6px;
}

.mode-tabs button {
  background: #fffdf7;
  color: #55401f;
  border: 1px solid #cbbd9f;
}

.mode-tabs button.active {
  background: #6b4f27;
  color: #fff;
  border-color: #8a744e;
}

#online-panel,
#ai-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fffdf7;
  border: 1px solid #cbbd9f;
  border-radius: 10px;
  padding: 12px 16px;
  width: 100%;
}

#online-panel.show,
#ai-panel.show {
  display: flex;
}

#ai-panel {
  flex-direction: row;
  justify-content: center;
  font-size: 0.9rem;
}

#ai-panel > span {
  color: #7a6a4f;
  font-weight: 700;
}

#ai-panel label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.online-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.online-actions .or {
  color: #a1906f;
  font-size: 0.85rem;
}

#join-code {
  font: inherit;
  font-size: 16px; /* iOS 포커스 자동 줌 방지 (16px 미만이면 줌됨) */
  width: 7.5em;
  padding: 6px 10px;
  border: 1px solid #cbbd9f;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
}

#room-info {
  font-size: 0.95rem;
}

#room-code {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  margin: 0 4px;
}

#room-info button {
  padding: 3px 10px;
  font-size: 0.8rem;
  margin-left: 4px;
}

#net-status {
  font-size: 0.85rem;
  color: #7a6a4f;
  min-height: 1.2em;
}

#board.waiting .cell {
  cursor: default;
}

#board.waiting .cell.empty:hover .stone {
  display: none;
}

.status-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 1.4em;
}

#status {
  font-weight: 700;
  font-size: 1.1rem;
}

#message {
  color: #b0483a;
  font-size: 0.85rem;
}

.option-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

fieldset {
  border: 1px solid #cbbd9f;
  border-radius: 8px;
  padding: 4px 12px 6px;
  display: flex;
  gap: 12px;
  background: #fffdf7;
}

legend {
  font-size: 0.75rem;
  color: #7a6a4f;
  padding: 0 4px;
}

fieldset label {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

button {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 16px;
  border: 1px solid #8a744e;
  border-radius: 8px;
  background: #6b4f27;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}

fieldset label,
input[type="radio"],
input[type="checkbox"] {
  touch-action: manipulation;
}

button:hover {
  background: #55401f;
}

.board-wrap {
  position: relative;
}

#board {
  touch-action: manipulation;
  display: grid;
  grid-template-columns: repeat(15, var(--cell));
  grid-template-rows: repeat(15, var(--cell));
  background: linear-gradient(135deg, var(--wood), var(--wood-dark));
  padding: calc(var(--cell) * 0.35);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(60, 40, 10, 0.35);
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  position: relative;
  width: var(--cell);
  height: var(--cell);
}

/* 격자선: 가로(::before), 세로(::after) */
.cell::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
  background: var(--line);
}

.cell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--line);
}

.cell.edge-left::before { left: 50%; }
.cell.edge-right::before { right: 50%; }
.cell.edge-top::after { top: 50%; }
.cell.edge-bottom::after { bottom: 50%; }

.stardot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.stone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: none;
}

.cell.black .stone,
.cell.white .stone {
  display: block;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.45);
}

.cell.black .stone {
  background: radial-gradient(circle at 32% 30%, #5a5a5a, #111 65%);
}

.cell.white .stone {
  background: radial-gradient(circle at 32% 30%, #ffffff, #cfcfcf 70%);
}

/* 직전 수 마커 */
.cell.last .stone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cell.last.black .stone::after { background: #e8e8e8; }
.cell.last.white .stone::after { background: #333; }

/* 빈 칸 호버 미리보기 */
#board.turn-black .cell.empty:not(.dest):not(.forbidden):not(.pending):hover .stone {
  display: block;
  background: rgba(0, 0, 0, 0.35);
}

#board.turn-white .cell.empty:not(.dest):not(.pending):hover .stone {
  display: block;
  background: rgba(255, 255, 255, 0.55);
}

/* 33 금수 칸 표시 (✕) */
.cell.forbidden {
  cursor: not-allowed;
}

.cell.forbidden .stone {
  display: block;
  background: none;
  box-shadow: none;
}

.cell.forbidden .stone::before,
.cell.forbidden .stone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 2px;
  border-radius: 1px;
  background: rgba(190, 50, 35, 0.85);
}

.cell.forbidden .stone::before { transform: translate(-50%, -50%) rotate(45deg); }
.cell.forbidden .stone::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* 밀 수 있는 상대 돌 */
.cell.pushable {
  cursor: pointer;
}

.cell.pushable:hover .stone {
  outline: 2px solid rgba(255, 200, 60, 0.9);
  outline-offset: 2px;
}

/* 선택된 돌 */
.cell.selected .stone {
  outline: 3px solid #ffb020;
  outline-offset: 2px;
}

/* 밀기 목적지 */
.cell.dest .stone {
  display: block;
  border: 2px dashed rgba(40, 30, 10, 0.75);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  animation: pulse 1s ease-in-out infinite;
}

#board.turn-black .cell.dest .stone { background: rgba(0, 0, 0, 0.18); }
#board.turn-white .cell.dest .stone { background: rgba(255, 255, 255, 0.35); }

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.88); }
}

/* 착수 확인 대기 (한 번 더 탭하면 확정) */
.cell.pending .stone {
  display: block;
  border: none;
  animation: none;
  opacity: 0.65;
  box-shadow: none;
  outline: 2px solid #ffb020;
  outline-offset: 2px;
}

#board.turn-black .cell.pending .stone {
  background: radial-gradient(circle at 32% 30%, #5a5a5a, #111 65%);
}

#board.turn-white .cell.pending .stone {
  background: radial-gradient(circle at 32% 30%, #ffffff, #cfcfcf 70%);
}

/* 승리 라인 */
.cell.win .stone {
  outline: 3px solid #d43c2a;
  outline-offset: 1px;
}

#board.over .cell {
  pointer-events: none;
}

/* 승리 배너 · 스왑/무르기 오버레이 */
#banner,
#swap-overlay,
#undo-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(30, 22, 8, 0.45);
  border-radius: 8px;
  z-index: 5;
}

#banner.show,
#swap-overlay.show,
#undo-overlay.show {
  display: flex;
}

#swap-text,
#undo-text {
  font-size: 1.05rem;
  font-weight: 600;
}

.swap-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#swap-no,
#undo-no,
#undo {
  background: #fffdf7;
  color: #55401f;
  border-color: #cbbd9f;
}

#swap-no:hover,
#undo-no:hover,
#undo:hover {
  background: #f0e8d8;
}

.banner-box {
  background: #fffdf7;
  border-radius: 12px;
  padding: 24px 36px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#banner-text {
  font-size: 1.3rem;
  font-weight: 700;
}

footer {
  width: 100%;
  max-width: calc(var(--cell) * 15 + 32px);
  font-size: 0.85rem;
  color: #5c4f38;
}

footer summary {
  cursor: pointer;
  font-weight: 600;
}

footer ul {
  margin: 8px 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 터치 기기: 호버가 없으므로 '직전 수만' 모드에서 밀 수 있는 돌을 항상 표시
   ('모든 돌' 모드는 상대 돌 전부가 대상이라 표시하면 노이즈만 됨) */
@media (hover: none) {
  #board.mode-last .cell.pushable .stone {
    outline: 2px dashed rgba(255, 200, 60, 0.7);
    outline-offset: 1px;
  }
}

/* 좁은 화면(폰) 최적화 */
@media (max-width: 480px) {
  :root {
    --cell: clamp(17px, min(calc((100vw - 12px) / 15.7), 5.6vh), 44px);
  }

  body {
    padding: 10px 4px 28px;
    gap: 10px;
  }

  h1 {
    font-size: 1.5rem;
  }

  .tagline {
    font-size: 0.8rem;
  }

  fieldset {
    gap: 8px;
    padding: 4px 8px 6px;
  }

  .option-group {
    gap: 6px;
  }

  .banner-box {
    padding: 18px 22px;
  }

  #banner-text {
    font-size: 1.1rem;
  }
}