/* =====================================================
   Crossword – screen + print (responsive)
   ===================================================== */
:root{
  --cell-px : 48px;     /* ▶ 画面セル寸法（JSで動的に縮める） */
  --cell-mm : 14mm;     /* ▶ 印刷セル寸法（JSで再計算するなら書換可） */
  --cell-font: 12pt;
  --focus-clr: #f44336;
  --hl-bg : #fff7c2;
  --hl-clue : #ffe082;
  --print-gap: 6mm;
}

/* ---------- 画面レイアウト ---------- */
.mc-wrap{
  max-width:1200px;margin:0 auto;
  font-family:Arial,sans-serif;text-align:center;
}
.mc-title{margin:0 0 8px;font-size:1.4rem;}
.mc-head{display:flex;justify-content:center;gap:1rem;margin-bottom:8px;}
#mc-timer{font-weight:bold;}
.mc-btns{margin:12px 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.mc-wrap button{
  cursor:pointer;padding:6px 12px;font-size:1rem;
  border:1px solid #888;border-radius:4px;background:#f0f0f0;
}
.mc-wrap button:hover{background:#e0e0e0;}
.mc-wrap button:active{background:#d5d5d5;}

/* ---------- プレイ領域：パズル＋ヒント ---------- */
#mc-play{
  display:flex;justify-content:center;align-items:flex-start;
  gap:24px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 12px;
}

/* ---------- グリッド ---------- */
.grid-area{display:inline-grid;gap:2px;}
/* ※ 列数は crossword.php 側または JS 側で grid-template-columns を設定してください */
.mc-cell{
  position:relative;width:var(--cell-px);height:var(--cell-px);
  border:1px solid #888; display:flex;justify-content:center;align-items:center;
  font:1.3rem/1 Arial,sans-serif;font-weight:bold;text-transform:uppercase;background:#fff;box-sizing:border-box;
}
.mc-cell.focus{border:2px solid var(--focus-clr);}
.mc-cell.hl{background:var(--hl-bg);}
.mc-cell.black{visibility:hidden;pointer-events:none;}
.mc-cell input{
  width:100%;height:100%;border:none;background:transparent;outline:none;text-align:center;
  font:1.3rem/var(--cell-px) Arial,sans-serif;caret-color:transparent;
}
.mc-cell input:focus{caret-color:#000;}
.mc-num{position:absolute;top:2px;left:4px;font-size:.6rem;font-weight:bold;color:#444;}
.mc-dir{position:absolute;top:2px;left:13px;font-size:.6rem;font-weight:bold;color:#444;}

/* ---------- ヒント（画面） ---------- */
#mc-clues{display:flex;flex-direction:column;gap:14px;min-width:260px;}
/* それぞれの列（Across/Down） */
.clue-row{display:flex;flex-direction:column;gap:10px;text-align:left;min-width:0;}
.clue-row h3{margin:0 0 4px;font-size:1rem;text-decoration:underline;text-align:left;}
.clue-row ol{margin:0;padding-left:24px;line-height:1.5;}
.clue-row li.hl{background:var(--hl-clue);}

/* ---------- スマホ：印刷と同じ配置（上にグリッド / 下にヒント2列） ---------- */
@media (max-width: 900px){
  #mc-play{flex-direction:column;align-items:center;gap:16px;}
  /* グリッドは横幅に収まるように：cell-px は JS が計算してくれる想定 */
  .grid-area{margin:0 auto;}
  /* ヒントは2カラムのカード風（印刷に近い見た目） */
  #mc-clues{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  .clue-row{
    border:1px solid #ddd;border-radius:8px;padding:10px;background:#fff;
  }
}
@media (max-width: 440px){
  #mc-clues{grid-template-columns: 1fr;} /* さすがに狭い端末は1列に */
}

/* ---------- オーバーレイ ---------- */
#mc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;justify-content:center;align-items:center;z-index:1000;}
.mc-ovl-box{background:#fff;padding:30px 38px;border-radius:10px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.3);}

/* ---------- スコアボード ---------- */
#mc-scoreboard{margin-top:28px;}
#mc-scoreboard table{margin:0 auto;border-collapse:collapse;max-width:320px;width:100%;}
#mc-scoreboard th,#mc-scoreboard td{border:1px solid #ccc;padding:4px 6px;font-size:.9rem;text-align:center;}
#scoreboard th{background:#f0f0f0;font-weight:700;}
#mc-clear-scores{margin-top:8px;padding:6px 12px;}

/* ---------- 印刷スタイル ---------- */
@media print{
  #mc-timer,#mc-mute,.mc-btns,#mc-overlay,#mc-scoreboard{display:none!important;}
  body{background:#fff!important;}
  .mc-title{margin-bottom:6mm;font-size:16pt;text-align:center;}
  .print-wrap{display:flex;flex-direction:column;align-items:center;gap:10mm;}

  .p-grid{border-collapse:collapse;}
  .p-grid td{
    width:var(--cell-mm);height:var(--cell-mm);border:1px solid #000;position:relative;
    font:var(--cell-font)/var(--cell-mm) Arial,sans-serif;font-weight:bold;text-align:center;vertical-align:top;box-sizing:border-box;
  }
  .p-grid td.blank{border:none;}
  .p-num{position:absolute;top:1pt;left:1pt;font-size:8pt;font-weight:bold;line-height:1;}
  .p-dir{position:absolute;top:1pt;left:10pt;font-size:8pt;font-weight:bold;line-height:1;}

  .print-clues{display:flex;justify-content:center;gap:var(--print-gap);flex-wrap:wrap;}
  .print-clues section{
    border:1px solid #000;padding:6pt 10pt;border-radius:6pt;min-width:60mm;max-width:80mm;
    box-sizing:border-box;page-break-inside:avoid;
  }
  .print-clues h3{margin:0 0 4pt;font-size:12pt;text-decoration:underline;text-align:center;}
  .print-clues ol{margin:0;padding-left:18pt;font-size:11pt;line-height:1.4;}
  .print-clues li{margin-bottom:2pt;}
}