/* ==========================================================
   Puzzle Common CSS (Word Search / Maze / Crossword 共有)
   2025-08 改訂：モダン UI + 印刷最適化 + 説明文スタイル追加
   ========================================================== */

/* ---------- グローバル変数 ---------- */
:root{
  --cell-mm:14mm;      /* 印刷用 (JS で上書き) */
  --cell-font:12pt;

  --clr-bg:          #ffffff;
  --clr-primary:     #137cbd;
  --clr-primary-dark:#0f5c8a;
  --clr-accent:      #ffd166;
  --clr-text:        #222;
  --clr-muted:       #6b7280;
  --clr-selected:    #d0e8ff;
}

/* ---------- ベースレイアウト ---------- */
body{background:var(--clr-bg); color:var(--clr-text);}

.game-container{
  display:flex; flex-direction:column; align-items:center;
  padding:28px 16px; max-width:960px; margin:0 auto;
  box-shadow:var(--shadow-card); background:#fff; border-radius:10px;
}

/* ---------- ヘッダー ---------- */
.header{text-align:center;margin-bottom:18px;}
.header h2{font-size:1.6rem;margin:0;color:var(--clr-primary-dark);}
#timer-container{margin-top:6px;font-size:20px;font-weight:600;}
#audio-control{margin-top:4px;}
#audio-control button{
  padding:6px 18px;font-size:14px;border:none;border-radius:6px;
  background:var(--clr-primary);color:#fff;cursor:pointer;
  transition:background .2s;
}
#audio-control button:hover{background:var(--clr-primary-dark);}

/* ---------- ボタン共通 ---------- */
button{
  font-family:inherit; line-height:1; border:none; border-radius:6px;
  cursor:pointer; transition:background .2s, box-shadow .2s;
}
button:focus-visible{outline:2px solid var(--clr-accent); outline-offset:2px;}

/* ---------- 印刷ボタン ---------- */
#print-buttons{margin:20px 0;display:flex;gap:12px;flex-wrap:wrap;}
#print-buttons button{
  padding:10px 20px;font-size:15px;
  background:var(--clr-primary);color:#fff;
}
#print-buttons button:hover{background:var(--clr-primary-dark);}
#print-buttons button:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.2);}

/* ---------- ゲームエリア ---------- */
.game-area{
  display:flex;flex-direction:row;align-items:flex-start;gap:36px;flex-wrap:wrap;
}

/* ---------- グリッド ---------- */
.grid-table{border-collapse:collapse;margin:auto;user-select:none;}
.grid-table td{
  width:40px;height:47.6px;             /* 指定サイズ */
  border:1px solid #555;
  text-align:center;vertical-align:middle;
  font-weight:700;font-size:22px;background:#fff;transition:background .1s;
}
.word-cell:hover{background:#eef6ff;}
.word-cell.selected{background:var(--clr-selected);}
.word-cell.found{background:var(--clr-accent);color:#000;}

/* ---------- 単語リスト ---------- */
#words-to-find{padding:10px;}
#words-to-find p{font-weight:700;margin-bottom:12px;font-size:1.1rem;}
#word-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;}
#word-list li{
  font-weight:600;padding:1px 6px;border-radius:5px;
  display:flex;align-items:center;gap:6px;
  background:#f2f2f2;transition:background .1s;
}
#word-list li.found{background:#dfe6e9;color:var(--clr-muted);text-decoration:line-through;}

/* 印刷用チェックボックス */
.print-box{
  display:inline-block;width:14px;height:14px;border:1px solid #000;
  background:transparent;border-radius:2px;flex-shrink:0;
}

/* ---------- オーバーレイ ---------- */
#overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);
  display:flex;justify-content:center;align-items:center;z-index:1000;
}
#overlay-content{
  background:#fff;padding:40px 50px;border-radius:14px;text-align:center;
  box-shadow:var(--shadow-card);
}
#overlay-content p{font-size:1.25rem;font-weight:700;margin:0 0 16px;}
#replay-button{
  padding:10px 26px;font-size:16px;background:var(--clr-primary);color:#fff;
}
#replay-button:hover{background:var(--clr-primary-dark);}

/* ---------- スコアボード ---------- */
#scoreboard-container{margin-top:36px;text-align:center;}
#scoreboard{width:100%;max-width:320px;margin:0 auto;border-collapse:collapse;font-size:15px;}
#scoreboard th,#scoreboard td{border:1px solid #ccc;padding:6px 10px;}
#scoreboard th{background:#f0f0f0;font-weight:700;}
#clear-scores-button{
  margin-top:12px;padding:8px 18px;background:#e63946;color:#fff;
}
#clear-scores-button:hover{background:#a62833;}

/* ---------- 🆕 説明文（本文） ---------- */
.puzzle-description{
  max-width:800px;
  margin:40px auto 0;          /* スコアボードと分離 */
  padding:0 6px;
  font-size:1rem; line-height:1.7;
  text-align:left;             /* 左寄せで自然に */
  color:var(--clr-text);
}
.puzzle-description h2,
.puzzle-description h3,
.puzzle-description h4{color:var(--clr-primary-dark);}
.puzzle-description img{max-width:100%;height:auto;border-radius:6px;margin:16px 0;}

/* ==== Related Puzzles ==== */
.related-puzzles-wrap{
  margin:48px auto 0;
}
.related-puzzles-ttl{
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:1rem;
  color:var(--clr-primary-dark);
  text-align:center;
}
.related-puzzles-grid{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
}
.related-puzzle-card{
  flex:1 1 240px;
  max-width:240px;
  background:#fff;
  border:1px solid var(--border,#d0d5dd);
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  text-decoration:none;
  transition:transform .2s;
}
.related-puzzle-card:hover{transform:translateY(-4px);}
.related-puzzle-card img{
  display:block;width:100%;height:140px;object-fit:cover;
}
.rpc-title{
  display:block;
  padding:.75rem .85rem;
  font-weight:600;
  line-height:1.4;
  color:var(--clr-text);
}

#maze-canvas{max-width:100%;height:auto;display:block;margin:auto}
.legend{margin-top:10px;font-weight:bold;text-align:center}
.legend-item{margin-right:14px}


/* ---------- レスポンシブ ---------- */
@media (max-width:600px){
  .game-area{flex-direction:column;align-items:center;}
  .grid-table td{font-size:20px;width:38px;height:44px;}
}

/* ===== Maze Legend (Start / Goal) – screen & print 共通 ===== */
.legend-box{
  display:inline-block;
  width:14px;height:14px;
  border:1px solid #000;
  margin-right:4px;
  vertical-align:middle;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.legend-box.start{background:#8ef;}   /* 水色 = Start */
.legend-box.goal {background:#f88;}   /* 朱色 = Goal */

/* ================================
 * Print only — タグや周辺要素を非表示
 * ================================ */
@media print {
  /* タグ系（テーマ/プラグインでクラス名が異なる可能性を網羅） */
  .puzzle-tags,
  .post-tags,
  .entry-tags,
  .tagcloud,
  .p-entryTags,
  .p-article__termLinks,
  .c-tags,
  .term-links,
  .tag-links,
  .entry-footer,
  .p-entryFooter,
  .entry-meta { display: none !important; }

  /* 回遊エリア・関連記事・パンくず等も印刷対象から除外 */
  .related-puzzles-wrap,
  .phr-inline-related,
  #breadcrumb,
  .p-breadcrumb,
  .l-header, header,
  .l-footer, footer,
  .l-sidebar, .sidebar,
  .p-shareBtns, .share, .sns-share,
  .comments-area, .p-comments { display: none !important; }

  /* パズル本体を中央に */
  .game-container { margin: 0 auto !important; }
}

/* Crossword – screen/print 切替 */
#mc-grid-static{ display:none; }
@media print{
  #mc-grid{ display:none !important; }
  #mc-grid-static{ display:table !important; }
}

/* =========================
   Taxonomy chips (global)
   ========================= */
.puzzle-tax-chips{ display:flex; justify-content:center; margin:10px auto 14px; padding:0 8px; }
.puzzle-tax-chips ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.puzzle-tax-chips .chip{ margin:0; padding:0; }
.puzzle-tax-chips .chip-link{
  display:inline-block; padding:6px 10px; border:1px solid #d0d5dd; border-radius:999px;
  background:#fff; color:#344054; text-decoration:none; font-weight:600; font-size:.9rem; line-height:1;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.puzzle-tax-chips .chip-link:hover{ transform:translateY(-1px); background:#f8fafc; box-shadow:0 2px 6px rgba(0,0,0,.06); }

/* タクソノミー別の色味（控えめに差別化） */
.chip-puzzle_type .chip-link{ border-color:#b3d4ff; background:#f0f7ff; }
.chip-grade       .chip-link{ border-color:#c6f0c2; background:#f6fff4; }
.chip-post_tag    .chip-link{ border-color:#fbd4a8; background:#fff7ec; }

/* Print: hide taxonomy chips everywhere (fallback for Ctrl+P) */
@media print{
  .no-print,
  .puzzle-tax-chips{ display:none !important; }
}


/* ---------- 印刷に影響しないのでここで終わり ---------- */