/*
  ============================================================
  ナンバープレース PWA - スタイルシート
  ============================================================
  概要:
    レスポンシブ対応の CSS ファイル。
    PC / タブレット / スマートフォン のすべてで快適に操作できるよう
    CSS カスタムプロパティ（変数）とメディアクエリで構成している。

  設計方針:
    - BEM 記法に近いクラス命名（.block__element--modifier）
    - CSS カスタムプロパティで色・サイズを一元管理
    - min() 関数でセルサイズを画面幅に連動させてレスポンシブ対応
    - user-select: none でテキスト選択を無効化（ゲーム UI 保護）
    - -webkit-tap-highlight-color: transparent でスマホのタップ時の
      青いハイライトを非表示にしてネイティブアプリらしい操作感を実現

  構成:
    1. リセット・基本設定
    2. CSS カスタムプロパティ（変数定義）
    3. ヘッダー
    4. ツールバー
    5. ボタン共通スタイル
    6. 盤面（テーブル）
    7. セル状態クラス
    8. メモ表示グリッド
    9. 数字入力パッド
    10. 操作ボタン
    11. クリアダイアログ
    12. アニメーション
    13. レスポンシブ対応（メディアクエリ）
  ============================================================
*/

/* ============================================================
   1. リセット・基本設定
   ============================================================ */

/*
  全要素に border-box を適用し、padding や border が
  要素の幅・高さに含まれるようにする。
  また、ブラウザのデフォルト margin / padding をゼロにリセットする。
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   2. CSS カスタムプロパティ（変数定義）
   ============================================================ */

:root {
  /* ---- カラーパレット ---- */

  /* プライマリカラー（Google Blue 系）: ボタン・選択枠・入力数字に使用 */
  --color-primary: #1a73e8;
  /* プライマリの薄い版: 選択セル背景・メモボタンオン状態の背景 */
  --color-primary-light: #e8f0fe;
  /* プライマリの濃い版: ホバー時・タイトルテキスト */
  --color-primary-dark: #1557b0;

  /* ページ背景: 薄いグレー */
  --color-bg: #f5f5f5;
  /* カード・盤面背景: 白 */
  --color-surface: #ffffff;

  /* メインテキスト: ほぼ黒 */
  --color-text: #202124;
  /* サブテキスト: グレー（タイマー・ラベル等） */
  --color-text-light: #5f6368;

  /* 細い罫線（セル間の境界線） */
  --color-border: #dadce0;
  /* 太い罫線（3×3 ブロック境界・盤面外枠） */
  --color-border-bold: #202124;

  /* エラー状態（重複数字）: 赤いテキスト */
  --color-error: #d93025;
  /* エラー状態の背景: 薄い赤 */
  --color-error-bg: #fce8e6;

  /* 選択セルの背景: 薄い青 */
  --color-selected: #e8f0fe;
  /* 同じ行・列・ブロックのハイライト: 薄い黄色 */
  --color-highlight: #fff9c4;
  /* 同じ数字のハイライト: 薄い緑 */
  --color-same-num: #c8e6c9;

  /* 初期配置（与えられた）数字の文字色: 黒 */
  --color-given: #202124;
  /* プレイヤー入力数字の文字色: 青 */
  --color-input: #1a73e8;
  /* メモ（候補数字）の文字色: グレー */
  --color-memo: #5f6368;

  /* ---- サイズ変数 ---- */

  /*
    セルサイズ: min() 関数でビューポート幅の 10% か 52px の小さい方を採用。
    スマートフォンでは画面幅に連動して自動縮小、
    PC では最大 52px に固定される。
  */
  --cell-size: min(10vw, 52px);

  /* ボーダーラジウス: ボタン・ダイアログの角丸 */
  --radius: 8px;
}

/* ============================================================
   html / body / #app
   ============================================================ */

html {
  font-size: 16px;
  /*
    スマートフォンでタップした際のデフォルトのハイライト（青い矩形）を無効化。
    ゲーム UI では独自のハイライトを実装しているため不要。
  */
  -webkit-tap-highlight-color: transparent;
}

body {
  /*
    フォントスタック:
      iOS    → -apple-system (San Francisco)
      macOS  → BlinkMacSystemFont
      Win    → Segoe UI
      Android → Roboto
      汎用日本語 → Noto Sans JP
  */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  /* 100dvh: アドレスバーを考慮した動的ビューポート高さ（iOS Safari 対応） */
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  /* テキスト選択を無効化（ゲームプレイ中に誤選択されるのを防ぐ） */
  user-select: none;
  -webkit-user-select: none;
}

/*
  アプリルートコンテナ:
    最大幅 480px でセンタリング、縦フレックスレイアウトで
    ヘッダー → ツールバー → 盤面 → 数字パッド → 操作ボタン と縦積みにする
*/
#app {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px 24px;
  gap: 10px;
}

/* ============================================================
   3. ヘッダー
   ============================================================ */

/*
  アプリタイトル（左）とタイマー（右）を横並びにする。
  justify-content: space-between で両端揃え。
*/
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
}

/* アプリタイトル: 濃い青・太字 */
.header__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

/*
  タイマー表示:
    font-variant-numeric: tabular-nums → 数字の幅を等幅にして
    秒数が変わっても文字がガタつかないようにする
*/
.timer {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-light);
  background: var(--color-surface);
  padding: 4px 12px;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ============================================================
   4. ツールバー
   ============================================================ */

/*
  難易度セレクト + 新しいゲームボタン + リセットボタン を横並びにする。
  セレクトは flex: 1 で残りスペースを埋める。
*/
.toolbar {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 難易度選択セレクトボックス */
.toolbar__select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  /* appearance: auto でブラウザデフォルトのドロップダウン矢印を表示 */
  appearance: auto;
}

/* ============================================================
   5. ボタン共通スタイル
   ============================================================ */

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}

/* タップ・クリック時に微小に縮小して押下感を演出 */
.btn:active {
  transform: scale(0.96);
}

/* プライマリボタン: 青背景・白テキスト（新しいゲームボタン等） */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

/* セカンダリボタン: グレー背景（リセットボタン等） */
.btn--secondary {
  background: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: #c0c0c0;
}

/* ============================================================
   6. 盤面（テーブル）
   ============================================================ */

/* 盤面を水平中央揃えにする外枠コンテナ */
.board-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

/*
  盤面テーブル本体:
    border-collapse: collapse → セル間の隙間をなくし罫線を共有させる
    border-radius + overflow: hidden → 角丸を適用（border-collapse との組み合わせ技）
*/
.board {
  border-collapse: collapse;
  border: 2.5px solid var(--color-border-bold);
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-radius: 4px;
  overflow: hidden;
}

/*
  各セル（<td>）:
    幅・高さは --cell-size で統一（正方形セル）。
    font-size はセルサイズの 50% を calc() で算出し、
    セルが縮小しても数字が収まるようにする。
    position: relative はメモグリッドの絶対配置基準として使用。
*/
.board td {
  width: var(--cell-size);
  height: var(--cell-size);
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: calc(var(--cell-size) * 0.5);
  font-weight: 500;
  position: relative;
  transition: background 0.1s;
  padding: 0;
}

/*
  3×3 ブロック境界の太線:
    列 2, 5 の右側 → .border-right
    行 2, 5 の下側 → .border-bottom
  これにより 9 つの 3×3 ブロックが視覚的に区別できる。
*/
.board td.border-right {
  border-right: 2.5px solid var(--color-border-bold);
}

.board td.border-bottom {
  border-bottom: 2.5px solid var(--color-border-bold);
}

/* ============================================================
   7. セル状態クラス
   ============================================================ */

/*
  初期配置セル（パズルで最初から与えられている数字）:
    黒・太字で表示し、プレイヤー入力と区別する。
    背景をわずかに灰色にして視覚的な重みを出す。
*/
.board td.given {
  color: var(--color-given);
  font-weight: 700;
  background: #fafafa;
}

/*
  プレイヤーが入力した数字:
    青文字で表示し、初期配置数字（黒）と区別する。
*/
.board td.input {
  color: var(--color-input);
}

/*
  選択中セル:
    !important でエラー背景等よりも優先して水色背景を適用。
    outline で青い枠線を内側に描画（outline-offset: -2px）。
    z-index: 1 で他の背景より前面に表示する。
*/
.board td.selected {
  background: var(--color-selected) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}

/*
  ハイライトセル:
    選択セルと同じ行・列・3×3 ブロックに属するセル。
    薄い黄色で範囲を視覚的に示す。
*/
.board td.highlighted {
  background: var(--color-highlight);
}

/*
  同じ数字のハイライト:
    選択セルの数字と同じ数字が入っている他のセル。
    薄い緑で強調表示する。
*/
.board td.same-number {
  background: var(--color-same-num);
}

/*
  エラー状態（重複あり）:
    同じ行・列・ブロックに同じ数字が存在する場合に付与。
    赤いテキストと薄い赤背景で警告を示す。
    !important で選択状態よりも優先して赤を表示する。
*/
.board td.error {
  color: var(--color-error);
  background: var(--color-error-bg) !important;
}

/* ============================================================
   8. メモ表示グリッド
   ============================================================ */

/*
  セル内に 3×3 の小さなグリッドを作り、
  候補数字（1〜9）の位置に対応した小さな数字を表示する。

  絶対配置でセル全体を覆い、通常の数字表示と切り替わる。
    数字 1 → グリッド左上
    数字 5 → グリッド中央
    数字 9 → グリッド右下
*/
.board td .memo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*
  メモの各数字:
    セルサイズの 25% のフォントサイズで小さく表示。
    メモが入っていない位置は空文字列なので何も表示されない。
*/
.board td .memo-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell-size) * 0.25);
  color: var(--color-memo);
  line-height: 1;
}

/* ============================================================
   9. 数字入力パッド
   ============================================================ */

/*
  1〜9 のボタンを横一列に 9 等分で配置する。
  gap で隙間を設けて各ボタンを見やすくする。
*/
.numpad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 420px;
}

/*
  各数字ボタン:
    aspect-ratio: 1 で正方形を保つ（幅 = 高さ）。
    文字は大きめの太字で視認性を高める。
*/
.numpad__btn {
  aspect-ratio: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.1s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* タップ時の押下アニメーション（縮小 + 背景色変化） */
.numpad__btn:active {
  transform: scale(0.92);
  background: var(--color-primary-light);
}

/*
  完了済み数字ボタン（9 個全て配置済み）:
    opacity を下げて薄く表示し、pointer-events: none で入力不可にする。
    これによりプレイヤーは残りの入力可能な数字を把握しやすくなる。
*/
.numpad__btn.completed {
  opacity: 0.3;
  pointer-events: none;
}

/* ============================================================
   10. 操作ボタン（メモ・消去・戻す）
   ============================================================ */

/*
  3 つの操作ボタンを横並びで等幅に配置する。
  各ボタンはアイコンとラベルを縦積みにする。
*/
.actions {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  justify-content: center;
}

/*
  操作ボタン共通スタイル:
    flex-direction: column でアイコン → テキストの縦積みレイアウト。
    border-radius は .btn から継承。
*/
.btn--action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-light);
}

/*
  メモボタンオン状態（aria-pressed="true" のとき）:
    青い背景・青い枠線・青いテキストで有効状態を示す。
    aria-pressed 属性を使うことでアクセシビリティも担保する。
*/
.btn--action[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--action:active {
  transform: scale(0.96);
}

/* ボタン内アイコン部分: テキストより大きく表示 */
.btn__icon {
  font-size: 1.2rem;
}

/* ============================================================
   11. クリアダイアログ
   ============================================================ */

/*
  モーダルオーバーレイ:
    position: fixed; inset: 0 で画面全体を覆う半透明の黒背景。
    z-index: 100 で盤面より前面に表示する。
*/
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

/* hidden 属性が付いているときは display: none で非表示にする */
.dialog-overlay[hidden] {
  display: none;
}

/*
  ダイアログ本体:
    画面幅の 90% または最大 320px の白いカード。
    大きな角丸でモダンな見た目にする。
*/
.dialog {
  background: var(--color-surface);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  animation: scaleIn 0.25s ease;
}

.dialog__title {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.dialog__message {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

/* ダイアログ内のボタンは横幅いっぱいに広げる */
.dialog .btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

/* ============================================================
   12. アニメーション
   ============================================================ */

/* ダイアログ表示時のオーバーレイのフェードイン */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ダイアログ本体のスケールアップ + フェードイン */
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   13. レスポンシブ対応（メディアクエリ）
   ============================================================ */

/*
  大きめの画面（幅 500px 以上: タブレット・PC）:
    セルサイズを 52px 固定にし盤面を大きく表示する。
    全体の余白と要素間の gap を広げて余裕のある見た目にする。
*/
@media (min-width: 500px) {
  :root {
    --cell-size: 52px;
  }
  #app {
    padding: 16px 16px 32px;
    gap: 14px;
  }
  .header__title {
    font-size: 1.5rem;
  }
}

/*
  小さい画面（幅 374px 以下: iPhone SE・Android 小型機種）:
    セルサイズを画面幅の 9% に設定してすべての列が収まるようにする。
    ボタンのフォントサイズと余白を小さめに調整する。
*/
@media (max-width: 374px) {
  :root {
    --cell-size: 9vw;
  }
  .header__title {
    font-size: 1rem;
  }
  .numpad__btn {
    font-size: 1.1rem;
  }
  .btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }
}

/*
  横向き（ランドスケープ）かつ高さが 500px 以下の場合:
    スマートフォンを横向きにしたとき盤面が縦に収まらない問題に対応。
    セルサイズをビューポート高さの 7% か 42px の小さい方にして
    全要素が 1 画面に収まるよう余白も縮小する。
*/
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --cell-size: min(7vh, 42px);
  }
  #app {
    gap: 6px;
    padding: 4px 12px 12px;
  }
}