/* 記事本文の画像を、押すと画面いっぱいに拡大表示する。
   動きは js/image-zoom.js が担当し、ここでは見た目だけを指定する */

/* 押せることが分かるようにカーソルを変える。
   対象は本文（#theme）の画像だけで、ヘッダーの家画像や目次の絵は含めない */
#theme img {
  cursor: zoom-in;
}

/* 拡大表示の土台。画面全体を覆う灰色の背景。

   position: fixed で画面に固定するため、記事のどこまでスクロールしていても
   常に画面の中央へ画像が出る。
   z-index は、右下に固定表示している「Comeback to Home」（z-index: 999）より
   手前へ出すために大きい値にしている */
.image-zoom {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(60, 60, 60, 0.94);
  cursor: zoom-out;
}

/* 拡大した画像。

   表示する大きさ（元の画素数の何倍か）は js/image-zoom.js が width で指定する。
   ここでは画面からはみ出さないための上限だけを決める。

   height: auto と max-width / max-height の組み合わせにより、
   画面に収まらない場合は縦横比を保ったまま縮む。

   image-rendering: pixelated は、元より大きく引き伸ばしたときに
   ドット絵やスクリーンショットの輪郭をぼかさないための指定である */
.image-zoom__img {
  height: auto;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  /* 記事本文の指定（#theme img）より後に読み込まれるが、
     こちらは本文の外に置く要素のため干渉しない */
}

/* 閉じ方の案内。押しても閉じるが、初見で分かるように文字でも示す */
.image-zoom__hint {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-family: "Press Start 2P", cursive;
  line-height: 1.6;
  pointer-events: none;
}

/* 狭い画面では余白と案内の文字を詰め、画像に使える面積を広げる */
@media screen and (max-width: 768px) {
  .image-zoom {
    padding: 8px;
  }

  .image-zoom__hint {
    right: 8px;
    bottom: 6px;
    font-size: 8px;
  }
}