/* スライム（16px × 16px） */
.pixel-character {
  /* ① キャンバス（基準点）のサイズを1pxにする */
  width: 1px;
  height: 1px;

  /* ② 全体を4倍（実質64px × 64px）に拡大する */
  transform: scale(4);

  /* ③ 拡大するときの「基準点」を左上に固定する */
  transform-origin: top left;

  /* ④ 画面の端から余白をとる */
  margin: 50px;

  box-shadow:
    /* ① 目（白目・黒目） */
    5px 6px #ffffff, 10px 6px #ffffff,
    5px 7px #000000, 10px 7px #000000,

    /* ② ハイライト（頭頂部） */
    7px 2px #aed6f1, 8px 2px #aed6f1,
    6px 3px #aed6f1, 7px 3px #aed6f1, 8px 3px #aed6f1, 9px 3px #aed6f1,

    /* ③ 体（青色） */
    7px 1px #3498db, 8px 1px #3498db,
    5px 2px #3498db, 6px 2px #3498db, 9px 2px #3498db, 10px 2px #3498db,
    4px 3px #3498db, 5px 3px #3498db, 10px 3px #3498db, 11px 3px #3498db,
    3px 4px #3498db, 4px 4px #3498db, 5px 4px #3498db, 6px 4px #3498db, 7px 4px #3498db, 8px 4px #3498db, 9px 4px #3498db, 10px 4px #3498db, 11px 4px #3498db, 12px 4px #3498db,
    2px 5px #3498db, 3px 5px #3498db, 4px 5px #3498db, 5px 5px #3498db, 6px 5px #3498db, 7px 5px #3498db, 8px 5px #3498db, 9px 5px #3498db, 10px 5px #3498db, 11px 5px #3498db, 12px 5px #3498db, 13px 5px #3498db,
    2px 6px #3498db, 3px 6px #3498db, 4px 6px #3498db, 6px 6px #3498db, 7px 6px #3498db, 8px 6px #3498db, 9px 6px #3498db, 11px 6px #3498db, 12px 6px #3498db, 13px 6px #3498db,
    2px 7px #3498db, 3px 7px #3498db, 4px 7px #3498db, 6px 7px #3498db, 7px 7px #3498db, 8px 7px #3498db, 9px 7px #3498db, 11px 7px #3498db, 12px 7px #3498db, 13px 7px #3498db,
    2px 8px #3498db, 3px 8px #3498db, 4px 8px #3498db, 5px 8px #3498db, 6px 8px #3498db, 7px 8px #3498db, 8px 8px #3498db, 9px 8px #3498db, 10px 8px #3498db, 11px 8px #3498db, 12px 8px #3498db, 13px 8px #3498db,

    /* ④ 底面の影（濃い青） */
    3px 9px #1b4f72, 4px 9px #1b4f72, 5px 9px #1b4f72, 6px 9px #1b4f72, 7px 9px #1b4f72, 8px 9px #1b4f72, 9px 9px #1b4f72, 10px 9px #1b4f72, 11px 9px #1b4f72, 12px 9px #1b4f72;
}