/*
 * 見た目の切り替えのボタン
 * 絵はデザイナーの案（design/kurabe/kirikae-*-1.png）と、そこから描き出してもらった素材（kirikae-sozai.png）。
 * ボタンの地の絵は、左（印の絵）と右（矢じるし）を伸ばさず、まん中だけ伸ばす。字は本物の字をのせる
 */
.gb-skin-switch {
  display: flex;
  margin: 0 0 12px;
}
.gb-skin-switch .gb-skin-switch-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  background: none;
  box-shadow: none;
  border-style: solid;
  border-color: transparent;
  border-image-repeat: stretch;
  font-family: var(--font-jp, inherit);
  font-weight: 800;
  text-align: left;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.gb-skin-switch .gb-skin-switch-btn:active { transform: scale(0.97); }
.gb-skin-switch .gb-skin-switch-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ゲームセンターの見た目に出る、ゆうえんちへのボタン（右上、2行） */
.gb-skin-switch[data-skin="gamecenter"] { justify-content: flex-end; }
.gb-skin-switch[data-skin="gamecenter"] .gb-skin-switch-btn {
  width: 184px;
  height: 60px;
  padding: 0;
  border-width: 30px 29px 30px 56px;
  border-image-source: url(../images/kirikae/botan-gamecenter.png);
  border-image-slice: 60 58 60 112 fill;
  border-image-width: 30px 29px 30px 56px;
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(40, 0, 60, 0.45);
}
.gb-skin-switch[data-skin="gamecenter"] .gb-skin-switch-btn > span {
  /* 字の箱は高さ0（上下は地の絵の縁）。まん中にそろえて、はみ出して見せる */
  padding-left: 4px;
  white-space: nowrap;
}

/* ゆうえんちの見た目に出る、ゲームセンターへのボタン（はばいっぱい、1行） */
.gb-skin-switch[data-skin="yuenchi"] .gb-skin-switch-btn {
  width: 100%;
  height: 68px;
  padding: 0;
  border-width: 34px 30px 34px 65px;
  border-image-source: url(../images/kirikae/botan-yuenchi.png);
  border-image-slice: 68 60 68 129 fill;
  border-image-width: 34px 30px 34px 65px;
  color: #3a1e0c;
  /* せまい幅でも、字が右の矢じるしにかからない大きさ */
  font-size: clamp(15px, 4.7vw, 18px);
  line-height: 1.2;
}
.gb-skin-switch[data-skin="yuenchi"] .gb-skin-switch-btn > span {
  padding: 0 6px 0 8px;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}