/* dong_puzzle.css */

/* 全体フォント：M PLUS 1p を優先（HTML側でGoogle Fonts読み込み前提） */
body {
  font-family: 'M PLUS 1p', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 16px;
  line-height: 1.6;
}

/* ロゴヘッダー */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.site-logo {
  max-width: 180px;
  height: auto;
}

/* タイトル装飾 */
h1 {
  font-size: 1.6rem;
  margin: 0 0 8px;
  padding: 8px 16px;
  text-align: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffecc0, #fff6da);
  border: 2px solid #e0c48a;
  color: #5a3a10;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* タイトル直下のルール説明 */
.note {
  font-size: 0.85rem;
  color: #555;
  margin: 4px 0 12px;
}

.controls,
.hash-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.controls label,
.hash-controls label {
  font-size: 0.9rem;
}

.controls select,
.controls input,
.hash-controls input {
  padding: 2px 4px;
  font-size: 0.9rem;
}

.controls button,
.hash-controls button {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 0.9rem;
}

.controls button:hover,
.hash-controls button:hover {
  background: #e8e8e8;
}

.puzzles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.puzzle-wrapper {
  border: 1px solid #ccc;
  padding: 4px;
  box-sizing: border-box;
  background: #fafafa;
}

.puzzle-header {
  font-size: 0.75rem;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  white-space: nowrap;
}

.board {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 40px); /* 画面表示用 */
  gap: 2px;
  padding: 2px;
  box-sizing: border-box;
  background: #fff;
}

.cell {
  position: relative;
  width: 40px;   /* 画面表示用 */
  height: 40px;  /* 画面表示用 */
  box-sizing: border-box;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.cell-bg {
  position: absolute;
  inset: 0;
}

/* マス中の文字（数字・0・●）：太めゴシック */
.cell-symbol {
  position: relative;
  z-index: 1;
  font-family: 'M PLUS 1p', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

/* 答え用コンテナはデフォルト非表示（画面用） */
.puzzles.answers {
  display: none;
  margin-top: 24px;
}

/* 答えタイトル */
.answers-title {
  font-size: 0.9rem;
  margin-top: 24px;
  margin-bottom: 4px;
  font-weight: bold;
}

/* 画面では、最初は【答え】を隠す用クラス */
.answers-title.hidden-on-screen {
  display: none;
}

/* フッター（広告エリア：画面用） */
.site-footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
  font-size: 0.8rem;
}

.ad-block {
  min-width: 200px;
  max-width: 336px;
}

/* 印刷専用フッター（画面では非表示） */
.print-footer {
  display: none;
}

/* ---------- 印刷用レイアウト ---------- */
@media print {
  body {
    margin: 5mm;
    padding: 0;
  }

  .controls,
  .hash-controls,
  .site-footer {
    display: none;
  }

  /* 問題ページのあとに改ページして答えページ */
  .puzzles.questions {
    page-break-after: always;
  }

  /* 印刷時は答えは必ず表示（画面で隠していても出す） */
  .puzzles.answers {
    display: grid !important;
  }

  /* 印刷時は【答え】見出しを必ず表示 */
  .answers-title {
    display: block !important;
    font-size: 10pt;
    margin-top: 8mm;
    margin-bottom: 4mm;
  }

  /* ★印刷時のみ、ページ下部にフッターを表示（全ページ共通） */
  .print-footer {
    display: block;
    position: fixed;
    bottom: 5mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8pt;
    color: #555;
  }

  /* ----- 複数問題モード（multi） ----- */

  .puzzles.multi.size-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3mm;
    row-gap: 5mm;
  }

  .puzzles.multi.size-4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3mm;
    row-gap: 5mm;
  }

  .puzzles.multi.size-5 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6mm;
    row-gap: 10mm;
  }

  .puzzles.multi.size-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6mm;
    row-gap: 10mm;
  }

  .puzzles.multi .puzzle-wrapper {
    width: 100%;
    margin: 0;
    padding: 2mm;
  }

  .puzzles.multi .board {
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 0;
    padding: 0;
  }

  /* ★複数問題モードの数字を大きめに（印刷専用） */
  .puzzles.multi .board .cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    font-size: 24pt;  /* 印刷時の数字サイズ（複数問題） */
  }

  /* ----- ハッシュ1問モード（single） ----- */

  .puzzles.single {
    display: block;
  }

  .puzzles.single .puzzle-wrapper {
    width: 100%;
    max-width: 180mm;
    margin: 0 auto;
    padding: 4mm;
  }

  .puzzles.single .board {
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 0;
    padding: 0;
  }

  /* ★1問だけ拡大印刷するモードは、さらに大きく */
  .puzzles.single .board .cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    font-size: 36pt;  /* 印刷時の数字サイズ（1問拡大） */
  }

  .puzzle-header {
    font-size: 9pt;
  }
}