/* ============================================================
   깨알툴즈 - 오목 게임
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: #f5f6f8;
  color: #202124;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', Arial,
    sans-serif;
}

/* ============================================================
   PAGE
   ============================================================ */

.omok-page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

/* ============================================================
   HEADER
   ============================================================ */

.tool-header {
  margin-bottom: 14px;
}

.tool-title-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 13px;

  background: #ffffff;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);

  font-size: 24px;
}

.tool-header h1 {
  margin: 0;

  font-size: 22px;
  line-height: 1.3;

  color: #111827;
}

.tool-header p {
  margin: 3px 0 0;

  font-size: 13px;

  color: #6b7280;
}

/* ============================================================
   CARD
   ============================================================ */

.game-card {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 18px;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.055);
}

/* ============================================================
   SETTINGS
   ============================================================ */

.game-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  padding: 14px;

  border-bottom: 1px solid #eceff3;

  background: #fafbfc;
}

.setting-item {
  min-width: 0;
}

.setting-item label {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;
  font-weight: 700;

  color: #6b7280;
}

.setting-item select {
  width: 100%;
  height: 38px;

  padding: 0 30px 0 10px;

  border: 1px solid #d7dce3;

  border-radius: 9px;

  outline: none;

  background: #ffffff;

  color: #222222;

  font-size: 13px;
  font-weight: 600;
}

.setting-item select:focus {
  border-color: #818cf8;

  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ============================================================
   STATUS
   ============================================================ */

.game-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 70px;

  padding: 11px 15px;

  border-bottom: 1px solid #eceff3;
}

.turn-info {
  display: flex;
  align-items: center;

  min-width: 0;

  gap: 10px;
}

.turn-stone {
  flex: 0 0 auto;

  width: 30px;
  height: 30px;

  border-radius: 50%;
}

.turn-stone.black,
.small-stone.black {
  background: radial-gradient(
    circle at 32% 27%,
    #5d5d5d 0%,
    #202020 28%,
    #050505 72%,
    #000000 100%
  );

  box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.09);
}

.turn-stone.white,
.small-stone.white {
  background: radial-gradient(
    circle at 30% 25%,
    #ffffff 0%,
    #ffffff 35%,
    #e5e5e5 78%,
    #c8c8c8 100%
  );

  border: 1px solid #bfc3c8;

  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.08);
}

.status-main {
  overflow: hidden;

  color: #1f2937;

  font-size: 14px;

  font-weight: 800;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.status-sub {
  overflow: hidden;

  margin-top: 2px;

  max-width: 390px;

  color: #8a919d;

  font-size: 11px;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.move-info {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #666e78;

  font-size: 11px;
}

.move-info > div {
  display: flex;
  align-items: center;

  gap: 4px;

  white-space: nowrap;
}

.move-info strong {
  color: #222222;

  font-size: 13px;
}

.small-stone {
  width: 12px;
  height: 12px;

  border-radius: 50%;
}

/* ============================================================
   BOARD
   ============================================================ */

.board-section {
  padding: 14px;

  background: #f8f4ec;
}

.board-wrap {
  position: relative;

  width: 100%;
  max-width: 650px;

  margin: 0 auto;

  border: 1px solid #ad8250;

  border-radius: 10px;

  overflow: hidden;

  background: #d7a65e;

  box-shadow:
    inset 0 0 18px rgba(75, 43, 13, 0.15),
    0 5px 16px rgba(0, 0, 0, 0.1);

  user-select: none;

  touch-action: manipulation;
}

#omokBoard {
  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  cursor: pointer;

  touch-action: manipulation;
}

/* ============================================================
   THINKING
   ============================================================ */

.thinking-overlay {
  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.12);

  pointer-events: all;
}

.thinking-overlay[hidden] {
  display: none;
}

.thinking-box {
  display: flex;
  align-items: center;

  gap: 8px;

  padding: 9px 14px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.95);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

  color: #333333;

  font-size: 12px;

  font-weight: 700;
}

.thinking-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #111827;

  animation: thinkingPulse 0.8s infinite alternate;
}

@keyframes thinkingPulse {
  from {
    opacity: 0.25;
    transform: scale(0.75);
  }

  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* ============================================================
   CONTROLS
   ============================================================ */

.game-controls {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 9px;

  padding: 13px 14px;

  border-top: 1px solid #eceff3;
}

.control-btn {
  height: 42px;

  border: 1px solid #d8dde4;

  border-radius: 10px;

  background: #ffffff;

  color: #374151;

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.1s ease,
    background 0.15s ease;
}

.control-btn:hover {
  background: #f7f8fa;
}

.control-btn:active {
  transform: scale(0.98);
}

.control-btn.primary {
  border-color: #111827;

  background: #111827;

  color: #ffffff;
}

.control-btn.primary:hover {
  background: #252c38;
}

/* ============================================================
   GUIDE
   ============================================================ */

.game-guide {
  padding: 13px 15px 16px;

  border-top: 1px solid #eceff3;

  background: #fafbfc;
}

.guide-title {
  margin-bottom: 6px;

  font-size: 12px;

  font-weight: 800;

  color: #4b5563;
}

.game-guide p {
  margin: 3px 0;

  color: #7a818c;

  font-size: 11px;

  line-height: 1.55;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .omok-page {
    padding: 10px 8px 28px;
  }

  .tool-header {
    margin: 4px 4px 11px;
  }

  .tool-icon {
    width: 39px;
    height: 39px;

    border-radius: 11px;

    font-size: 21px;
  }

  .tool-header h1 {
    font-size: 19px;
  }

  .game-card {
    border-radius: 14px;
  }

  .game-settings {
    grid-template-columns: 1fr 1fr;

    padding: 10px;

    gap: 7px;
  }

  .setting-item:first-child {
    grid-column: 1 / -1;
  }

  .game-status-panel {
    padding: 9px 11px;
  }

  .turn-stone {
    width: 26px;

    height: 26px;
  }

  .status-main {
    font-size: 13px;
  }

  .status-sub {
    max-width: 190px;

    font-size: 10px;
  }

  .move-info {
    gap: 6px;

    font-size: 10px;
  }

  .board-section {
    padding: 8px;
  }

  .game-controls {
    padding: 10px;
  }
}