/* ============================================================
 * pixel-theme.css  —  QUEST ドット絵テーマ (Pixellab素材)
 * ------------------------------------------------------------
 * ★ index.html の style.css の "後" に読み込むこと。
 *   <link rel="stylesheet" href="css/style.css" />
 *   <link rel="stylesheet" href="css/pixel-theme.css" />   ← これを足す
 *
 * 使う画像 (assets/pixel/ に置く):
 *   floor.png       … ページ背景の石床タイル
 *   frame.png       … パネルのドラクエ風ウィンドウ枠(装飾コーナー)
 *   frame-plain.png … 装飾なしのシンプル枠(使いたい場合に差し替え)
 * ============================================================ */

/* ピクセルアートを滲ませない (背景・枠) */
body,
.status-panel,
.panel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* グラフ・アバターは滲ませたくないので通常描画に戻す */
.panel canvas,
.panel img,
.avatar-slot svg {
  image-rendering: auto;
}

/* ===== 背景: ドラクエ風 石床タイル ===== */
body {
  background-color: #060912;
  background-image: url("../assets/pixel/floor.png");
  background-repeat: repeat;
  /* タイルの大きさ。好みで 200〜280px に調整可 */
  background-size: 228px 228px;
}

/* 既存の装飾(グリッド/グロー)は石床と喧嘩するので弱める
   ※完全に消したい場合は opacity を 0 に */
.bg-grid { opacity: 0.06; }
.bg-glow { opacity: 0.45; }

/* ===== パネルをドラクエ風ウィンドウに ===== */
/* 枠 = border-image / 中身 = navy。角は装飾コーナーが固定で出る */
.status-panel,
.panel {
  background-color: #0b123e;
  border: 16px solid transparent;
  border-image-source: url("../assets/pixel/frame.png");
  border-image-slice: 16 fill;
  border-image-repeat: stretch;
  border-radius: 0;                 /* ドラクエ窓は角ばっている */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

/* 枠の内側に少し余白 (中身が縁に寄りすぎないように) */
.status-panel { padding: 10px 18px; }
.panel        { padding: 6px 18px 18px; }

/* ===== お好みの微調整メモ =====
 * ・枠を太く/細く     → border-width と border-image-slice を一緒に変える
 *                       (例: どちらも 12 / どちらも 20)
 * ・装飾なしのシンプル枠にしたい
 *     → 上の border-image-source を frame-plain.png に変更し、slice を 10 に
 * ・石床をもっと暗く  → body の background-color を濃く、または
 *                       .bg-glow { opacity: 0 } で発光を消す
 * ・パネル内のカードが浮いて見える場合は、その色を navy 寄りに調整
 *   (.stat-card / .chart-card / .task-item など。希望があれば対応します)
 */