body {
  margin: 0;
  padding: 12px 16px;
  background: #111;
  color: #ddd;
  font-family: "Consolas", "Meiryo", monospace;
}

h1 {
  font-size: 20px;
  margin: 0 0 10px;
  text-align: center;
}

/* ---------- 画面の配置：左にステータスとログ、右にゲーム画面 ---------- */
#layout {
  display: flex;
  flex-wrap: wrap; /* 画面が狭い時は縦に並ぶ */
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
}

#side {
  width: 330px;
  flex: 0 0 330px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 660px; /* ゲーム画面（最大 27マス × 24px ＋ 枠）とだいたい同じ高さ */
}

#main {
  flex: 0 1 auto;
  min-width: 0;
}

canvas {
  background: #000;
  border: 2px solid #444;
  outline: none;
  max-width: 100%;
  display: block;
}

/* ---------- ステータス ---------- */
#hud {
  background: #16161c;
  border: 1px solid #333;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: bold;
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.hud-row[hidden] { display: none; }

#hud-floor { color: #8ab4ff; }
#hud-lv { color: #ffe08a; }
#hud-atk { color: #ffb0b0; }
.hp-label { width: 2.4em; }

.hp-bar {
  width: 170px;
  height: 12px;
  background: #400;
  border: 1px solid #555;
}

#hp-fill {
  height: 100%;
  background: #4caf50;
  transition: width 0.15s;
}

#hp-fill.warn { background: #e0b030; }
#hp-fill.danger { background: #e04040; }

.mind-bar { background: #201030; }
#mind-fill { height: 100%; background: #9a6cff; transition: width 0.15s; }
#mind-fill.warn { background: #c060d0; }
#mind-fill.danger { background: #ff40a0; }

#hud-boss { color: #ff8080; }
.boss-bar { width: 120px; height: 10px; background: #300; border: 1px solid #733; }
.boss-fill { height: 100%; background: #e04040; }

#status {
  color: #ffb070;
  font-weight: normal;
  font-size: 13px;
}

/* ---------- 仲間の一覧 ---------- */
#party {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
}

.party-title { color: #8ab4ff; font-weight: bold; width: 100%; }
.party-none { color: #666; }
.party-member {
  background: #1d3f6e;
  padding: 1px 8px;
  border-radius: 3px;
}
.party-stars { color: #f0c850; letter-spacing: -1px; }

/* ---------- ログ（新しい行が上。スクロールで古い行も見られる） ---------- */
#log-title { font-size: 11px; color: #777; }

#log {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 6px 10px;
  box-sizing: border-box;
  background: #1a1a1a;
  border: 1px solid #333;
  font-size: 13px;
  line-height: 1.4;
}

#log div { border-bottom: 1px solid #222; padding: 1px 0; }
#log div:first-child { background: #222a38; } /* 一番新しい行 */

.log-info { color: #ccc; }
.log-good { color: #8fd18f; }
.log-bad  { color: #ff8080; }
.log-miss { color: #888; }
.log-warn { color: #ffd24a; font-weight: bold; }
.log-ally { color: #7cc8ff; font-weight: bold; }

/* クリックすると説明が出る技名 */
.skill-link, .skill-link-sample {
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

/* ---------- 操作説明と凡例（画面右） ---------- */
#info {
  width: 250px;
  flex: 0 0 250px;
}

.help {
  color: #999;
  font-size: 12px;
  line-height: 1.5;
  background: #16161c;
  border: 1px solid #333;
  padding: 6px 10px;
}

.help-title { color: #8ab4ff; font-weight: bold; margin-top: 4px; }
.help ul { margin: 2px 0 6px; padding-left: 1.1em; }
.help li { margin: 1px 0; }

/* 拠点にいる間は拠点用、ダンジョンではダンジョン用の説明を出す */
.help-base { display: none; }
body.in-base .help-base { display: block; }
body.in-base .help-dungeon { display: none; }

/* ---------- ゲーム画面の上に出るウィンドウ ---------- */
#game-wrap {
  position: relative;
}

#dialog {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  max-height: 90%;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(12, 14, 28, 0.96);
  border: 2px solid #ffe08a;
  font-size: 14px;
}

#dialog[hidden] { display: none; }
#dialog, #inventory, #savecode { z-index: 2; }

/* 3D表示：後ろに動く背景（backdrop.js）を重ね、3Dの画面の何もない所から透けて見せる */
#game3d { position: relative; z-index: 0; background: transparent; }
#backdrop3d {
  position: absolute;
  z-index: 0;
  border: none;
  background: #000;
  pointer-events: none;
  image-rendering: auto;
}

/* 左上に重ねる全体マップ（minimap.js。2D・3D共通） */
#minimap {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  border: none;
  background: transparent;
  pointer-events: none;
  image-rendering: pixelated;
}
#dialog ul { list-style: none; margin: 6px 0; padding: 0; }
#dialog li { padding: 2px 6px; }
#dialog li.selected { background: #2a3f70; }
#dialog li.selected::before { content: "▶ "; }
#dialog .dialog-image { display: block; margin: 6px auto; border: 1px solid #334; background: #1a1d2c; max-width: 100%; }

#inventory {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 300px;
  max-height: 90%;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(12, 14, 28, 0.95);
  border: 2px solid #8ab4ff;
  font-size: 14px;
}

#inventory[hidden] { display: none; }
#inventory ul { list-style: none; margin: 6px 0; padding: 0; }
#inventory li { padding: 2px 6px; }
#inventory li.selected { background: #2a3f70; }
#inventory li.selected::before { content: "▶ "; }
#inventory li.inv-group { color: #8a8aa0; font-size: 12px; padding: 4px 6px 0; background: none; }
#inventory li.inv-group::before { content: none; }

.inv-title { font-weight: bold; color: #8ab4ff; }
.inv-icon { display: inline-block; width: 1.6em; text-align: center; font-weight: bold; margin-right: 2px; }
.inv-empty { color: #888; margin: 8px 0; }
.inv-desc { border-top: 1px solid #334; padding-top: 6px; color: #ccc; font-size: 13px; }
.inv-help { margin-top: 6px; color: #888; font-size: 12px; }

/* 記録の呪文（セーブ用パスワード）の画面 */
#savecode {
  position: absolute;
  inset: 10px;
  padding: 12px 16px;
  background: rgba(12, 14, 28, 0.97);
  border: 2px solid #9a6cff;
  font-size: 13px;
  overflow-y: auto;
}

#savecode[hidden] { display: none; }
#savecode textarea {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  background: #0b0b12;
  color: #cfe;
  border: 1px solid #446;
  font-family: "Consolas", monospace;
  font-size: 12px;
  word-break: break-all;
}

#savecode button {
  margin: 6px 8px 0 0;
  padding: 4px 12px;
  background: #2a3f70;
  color: #fff;
  border: 1px solid #8ab4ff;
  cursor: pointer;
  font-family: inherit;
}

#savecode .sc-msg { margin-top: 6px; color: #ffd24a; min-height: 1.2em; }

/* 画面下のお知らせ（notice.js）：精神力・HPの警告、レベルアップなど。薄い帯で数秒だけ出す */
#notice {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(90%, 620px);
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#notice[hidden] {
  display: none;
}
.notice-line {
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(10, 10, 20, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #eee;
  font-size: 14px;
  text-align: center;
  animation: notice-in 0.25s ease-out;
}
.notice-warn {
  border-color: rgba(255, 200, 80, 0.55);
  color: #ffe08a;
}
.notice-danger {
  border-color: rgba(255, 90, 90, 0.7);
  color: #ffb0b0;
  background: rgba(40, 0, 10, 0.66);
}
.notice-good {
  border-color: rgba(120, 220, 140, 0.6);
  color: #b8f5c4;
}
@keyframes notice-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 画面右上の最低限の操作（半透明の白。クリックの邪魔をしない） */
.keyhint-dungeon, .keyhint-base {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}
.keyhint-base { display: none; }
body.in-base .keyhint-base { display: block; }
body.in-base .keyhint-dungeon { display: none; }

/* 文章の中の小さなドット絵アイコン（icons.js） */
canvas.icon {
  display: inline-block;
  border: none;
  background: transparent;
  image-rendering: pixelated;
  vertical-align: middle;
  margin: 0 2px;
}

/* ページの一番下の小さな注意書き（訪問者数の計測について） */
#privacy-note {
  color: #666;
  font-size: 11px;
  text-align: center;
  margin: 12px 0 8px;
}

/* タイトルの横の版（どの版を開いているか確かめる用） */
#version {
  font-size: 12px;
  font-weight: normal;
  color: #777;
  margin-left: 10px;
}