/* 上書きの層：状態や種類の付け足し（.on・.ghost・.big・.del など）と、町の画面の札の見た目。
   部品のファイルの規則と同じ要素に当たり、後から勝つ必要がある規則（tools/css/regroup.mjs が、ぶつかる組から決めた）。中は部品ごとの見出しで区切る */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */

/* ===== base（土台）・2段目 ===== */
.btn.on {
  background: #3a2f1c;
  border-color: var(--torch);
  color: var(--torch);
}
.btn.big {
  font-size: 18px;
  padding-block: 14px;
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
  font-size: 13px;
}
.gi .spr {
  width: 100%;
  height: 100%;
}
.sel {
  user-select: all;
  font-size: 13px;
  color: var(--ink);
}
.btn.del {
  background: #6a1f1a;
  border-color: #c9493e;
  color: #fff;
}
.btn.main,
.btn.on {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAV0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg9Y1JGApENfLANBNcwadHGLgiQASsiAWm6+Gls7hshJhECBClCG7dhQt3cSqC+w7mSGTQseENRBGIIBROADiCIavHs3DWAAAAAElFTkSuQmCC") !important;
  color: #241505 !important;
  text-shadow: none;
}
.btn.ghost {
  border-image: none !important;
  border-color: transparent !important;
}
.btn.ghost {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAZUlEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg0CwvDAV2advANCNIEUhBwTI+DEUmXCcYZm17wMACE7h7+zqmIn0IzYTLLciAKEVw696/fYlFmgPhcBAjzUsBQwnI0WBFIIJQOAEAqjYdOqenZDAAAAAASUVORK5CYII=") 3 fill / 6px !important;
}
/* 音量のつまみ：へこんだ溝と金の四角 */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  background: none;
  border: 4px solid transparent;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQklEQVR4nGNkYGBgEOFh+c+AA7z58oeRCaTg0282Bmw4zUsBbAALTAcHJw8uwxiYcMoMnCKww0v8pfAqYgQRhMIJAHhfF9dO9f9EAAAAAElFTkSuQmCC") 3 fill / 4px;
  image-rendering: pixelated;
}

/* ===== shop（店）・2段目 ===== */
.doll .spr {
  width: 40px;
  height: 40px;
}
.doll .btn {
  flex: none;
  padding: 8px 16px;
}
/* ===== 金縁の札（ダンジョンのバナーと同じ作り）を、町の画面全体にそろえる =====
   地は上が少し明るい濃紺、細い金の縁、上辺に光の線、下辺と下に影。押すと2px沈む */
.town .item,
.town .dcard,
.town .evcard,
.town .bk,
.town .stabs button,
.town .btn {
  border: 1px solid #8a6a36;
  background: linear-gradient(#2a2e3a, #1a1d26);
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 160, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.5);
  transition:
    transform 0.06s,
    filter 0.12s;
}

/* ===== gems-login（ダイヤ・購入の履歴・ログインボーナス）・2段目 ===== */
.pk.on {
  border-color: var(--torch);
  background: #2a2415;
}
.gembrk .btn {
  padding: 6px 12px;
  font-size: 13px;
}
/* ダイヤで払うボタン：黄色の地だとダイヤの青い数字が読めないので、暗い地に青い枠と青い文字 */
.btn.gembtn {
  background: #162232;
  border: 2px solid var(--gem);
  color: var(--gem);
  font-weight: 700;
  white-space: nowrap;
}

/* ===== cosmetics（着せ替え）・2段目 ===== */
.cos.on {
  border-color: var(--torch);
}
.cos.on {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAV0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg9Y1JGApENfLANBNcwadHGLgiQASsiAWm6+Gls7hshJhECBClCG7dhQt3cSqC+w7mSGTQseENRBGIIBROADiCIavHs3DWAAAAAElFTkSuQmCC") !important;
  color: #241505;
}

/* ===== events（イベント）・2段目 ===== */
.tks .spr {
  width: 18px;
  height: 18px;
}

/* ===== missions（ミッション）・2段目 ===== */
.mini.on {
  border-color: var(--torch);
  color: var(--torch);
}

/* ===== book-records（図鑑・記録・冒険者の持ち物）・2段目 ===== */
.town .bk.no {
  filter: brightness(0.8);
}

/* ===== shelf（飾り棚・保管庫・品の札）・2段目 ===== */
.slot .life.perm {
  color: var(--gold);
}

/* ===== dungeon-select（ダンジョン選び）・2段目 ===== */
/* イベントは紫の地のまま、縁だけ金に寄せる */
.town .dcard.evd,
.town .evcard {
  border-color: #9a7a4a;
  background: linear-gradient(#302339, #1f1828);
}

/* ===== tutorial（練習）・2段目 ===== */
.tutbox .btn {
  justify-self: end;
  flex: none;
  padding: 8px 22px;
}
.tutbox .btn {
  padding: 6px 18px;
  font-size: 14px;
}
.btn.pointme {
  position: relative;
  border-color: var(--torch);
  color: var(--torch);
  background: #3a2f1c;
  box-shadow:
    0 0 0 2px var(--torch),
    0 0 22px 6px rgba(232, 163, 61, 0.55);
  animation: pm 1s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .btn.pointme,
  .btn.pointme::after {
    animation: none;
  }
}
.btn.pointme {
  position: relative;
}

/* ===== dialog（ダイアログ（窓）と、窓の中の共通の部品）・2段目 ===== */
.tg.on {
  background: var(--moss);
  border-color: var(--moss);
  color: #10180c;
  font-weight: 700;
}
.tg.on {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAW0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREaZg2bUODAVRWhVgmgWm4M6zRxiKtMJUGK6tugNRBALXbtzCZSMDE04ZUhXBrXt04w1ORXDfgRyJDkCOBisCEYTCCQDRXR0xjqvJyQAAAABJRU5ErkJggg==") !important;
  color: #10180c;
}

/* ===== board（盤面）・2段目 ===== */
.cell.me {
  background:
    linear-gradient(rgba(232, 163, 61, 0.18), rgba(232, 163, 61, 0.18)),
    var(--floor-img) center/100% 100%;
}
.btn.done {
  border-color: #7fb069;
  color: #7fb069;
}

/* ===== base（土台）・3段目 ===== */
.ti .spr {
  width: 100%;
  height: 100%;
  filter: none;
}

/* ===== merchant-guild（商人ギルド）・3段目 ===== */
.invnow .spr {
  width: 44px;
  height: 44px;
}
.invres .spr {
  width: 56px;
  height: 56px;
}

/* ===== daily-result（今日のダンジョンの結果と共有）・3段目 ===== */
.dvi .spr {
  width: 100%;
  height: 100%;
}

/* ===== shop（店）・3段目 ===== */
.psn-ic .spr {
  filter: hue-rotate(70deg) saturate(1.4);
}
.fire-ic .spr {
  filter: sepia(1) saturate(4) hue-rotate(-20deg);
}

/* ===== dialog（ダイアログ（窓）と、窓の中の共通の部品）・3段目 ===== */
.rs-got .spr {
  width: 32px;
  height: 32px;
}
.lsay .spr {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  margin-top: 1px;
}

/* ===== hud（上の帯（手持ち・ダイヤ・お知らせ・設定）と探索画面の上の欄）・3段目 ===== */
.purse2 .spr {
  width: 22px;
  height: 22px;
}
.sti .spr {
  width: 36px;
  height: 36px;
}