/* コンテナと中心リング */
.maker_wrapper {
  background-color: #333;
  padding:20px;
  padding-bottom:40px;
}
.gear-background {
  background-color: #333;       /* 全体の背景色 */
  display: inline-block;        /* 幅は中身に合わせて */
  padding: 20px;                /* 好きな余白を確保 */
  padding-bottom: 40px;
  border-radius: 6px;           /* お好みで角を丸く */
}

.gear-view {
  position: relative;
  width: 340px;
  height: 340px;
  background: #333;  /* お好みで背景色 */
}
.gear-view .center-ring {
  position: absolute;
  top: 40px;
  left: 35px;
  width: 260px;
  height: 260px;
  border: 3px solid #5e6165;
  border-radius: 50%;
}

/* アイコン共通 */
.gear-view .gear {
  background-color:#333;
  position: absolute;
  width: 44px !important;
  height: 44px !important;
  
}
.gear-view .gear img {
  width: 40px;
  height: 40px;
}

/* 装備スロットごとの座標 */
.gear-view .gear-h   { left: 92px;  top: 10px; }                /* ヘルム */
.gear-view .gear-a   { right:92px;  top: 10px; }                /* 上衣 */
.gear-view .gear-r1  { right:38px;  top: 36px; }                /* リング�@ */
.gear-view .gear-e1  { left: 38px;  top: 36px; }                /* イヤリング�@ */
.gear-view .gear-r2  { right:10px;  top: 90px; }                /* リング�A */
.gear-view .gear-e2  { left: 10px;  top: 90px; }                /* イヤリング�A */
.gear-view .gear-ar1 { left: 0;     top: calc(50% - 22px); }    /* 腕輪�@ */
.gear-view .gear-ar2 { right:0;     top: calc(50% - 22px); }    /* 腕輪�A */
.gear-view .gear-g   { bottom:90px; right:10px; }              /* 手袋 */
.gear-view .gear-s   { bottom:90px; left: 10px; }              /* 靴 */
.gear-view .gear-n   { bottom:36px; right:38px; }              /* ネックレス */
.gear-view .gear-b   { bottom:36px; left: 38px; }              /* ベルト */
.gear-view .gear-mw  { bottom:10px; left: 92px; }              /* メイン武器 */
.gear-view .gear-sw  { bottom:10px; right:92px; }              /* サブ武器 */
.gear-view .gear-aw  { bottom: 0;   left: calc(50% - 22px);}    /* 覚醒武器 */
.gear-view .gear-oa  { right:115px; top: 74px; }               /* 衣装上衣 */
.gear-view .gear-oh  { left: 115px; top: 74px; }               /* 衣装ヘルム */
.gear-view .gear-os  { left:  80px; top:125px; }               /* 衣装靴 */
.gear-view .gear-og  { right: 80px; top:125px; }               /* 衣装手袋 */
.gear-view .gear-bo  { bottom:-18px; left:  0; }               /* 本 */
.gear-view .gear-t   { bottom:-18px; right: 0; }               /* ツール */
.gear-view .gear-as  { right:calc(50% - 22px); top:calc(50% - 40px);} /* 錬金石 */

/* ノーマル〜低レアリティ（グレー） */
.border-rarity-0,
.border-rarity-1 {
  border: none !important;
  box-shadow: 0 0 0 2px #5e6165cc !important;
}

/* レア（グリーン） */
.border-rarity-2 {
  border: none !important;
  box-shadow: 0 0 0 2px rgb(72, 187, 120) !important;
}

/* エピック（ブルー） */
.border-rarity-3 {
  border: none !important;
  box-shadow: 0 0 0 2px rgb(66, 153, 225) !important;
}

/* レジェンド（イエロー） */
.border-rarity-4 {
  border: none !important;
  box-shadow: 0 0 0 2px rgb(236, 201, 75) !important;
}

/* ヒーロー（レッド） */
.border-rarity-5 {
  border: none !important;
  box-shadow: 0 0 0 2px rgb(245, 101, 101) !important;
}

/* アーティファクト（パープル） */
.border-rarity-6 {
  border: none !important;
  box-shadow: 0 0 0 2px rgb(159, 122, 234) !important;
}

/* プルダウンの<option>に適用する背景色 */
.gear-selectors select option.rarity-0,
.gear-selectors select option.rarity-1 {
  background-color: #5e6165; color: #fff;
}
.gear-selectors select option.rarity-2 {
  background-color: rgb(72, 187, 120); color: #000;
}
.gear-selectors select option.rarity-3 {
  background-color: rgb(66, 153, 225); color: #fff;
}
.gear-selectors select option.rarity-4 {
  background-color: rgb(236, 201, 75);  color: #000;
}
.gear-selectors select option.rarity-5 {
  background-color: rgb(245, 101, 101); color: #fff;
}
.gear-selectors select option.rarity-6 {
  background-color: rgb(159, 122, 234); color: #fff;
}

/* 全体の選択肢文字色は上書きしないように */
.gear-selectors select option {
  /* フォーカス時など見やすいようテキストシャドウ */
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* 強化レベル文字 */
.enhance-level {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size:20px;
  /* 赤い縁取り */
  -webkit-text-stroke: 1px #f56565;
  line-height: 10px;
  color: #fff;
}