/* assets/style.css */
body { font-family: system-ui, sans-serif; background:#111; color:#eee; margin:0; }
.wrap { max-width: 860px; margin: 0 auto; padding: 24px; }
.scene { border:1px solid #333; border-radius:12px; padding:20px; background:#181818; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.narrative { line-height:1.7; white-space:pre-wrap; }
.hud { display:flex; gap:16px; margin-bottom:12px; font-weight:bold; }
h3,h4 { margin: 16px 0 8px; }
.btn { background:#3a66ff; color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; margin:6px 6px 0 0; }
.btn:hover { opacity:.9; }
.quests .quest { display:block; width:100%; text-align:left; margin-bottom:8px; }
.battlelog { background:#101010; border:1px solid #333; border-radius:8px; padding:10px; margin:10px 0; }
.stats, .equip { list-style:none; padding-left:0; }
.stats li, .equip li { margin:4px 0; }
.compare { margin:8px 0; }

/* 1) 全体の box-sizing を border-box にする（パディングで幅が増えないように） */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* 2) 画像を確実に親幅内に収める（縦横比を維持） */
img {
  max-width: 100%;   /* 親の幅を超えない */
  width: auto;       /* 不要な拡大を防ぐ */
  height: auto;      /* アスペクト比を保持 */
  display: block;    /* 下の余白やインライン挙動を防ぐ */
  box-sizing: border-box;
  object-fit: contain; /* 余白ができても縦横比を保つ（任意） */
}

/* 3) 画像が flex コンテナ内で溢れる場合に備えて「縮められる」ようにする */
.hud > *, .quests .quest, .scene > * {
  min-width: 0; /* flex 子が親に収まるようにするトリック */
}

* {
  min-width: 0; /* flexやgridの子要素が縮むのを妨げないようにする */
}

.scene img {
  margin: 0 auto; /* 中央寄せ */
  display: block; /* ブロック化して扱いやすく */
}