/* 下のタブ・町のタブ・メニューの一覧 */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
.stabs.st4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stabs.st5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stabs.st5 button {
  font-size: 13px;
  padding: 0 2px;
}
.stabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 12px;
}
.stabs button {
  min-height: 40px;
  border: 1px solid var(--wall);
  background: #1d2130;
  color: var(--dim);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.stabs button.on {
  border-color: var(--torch);
  background: #2a2412;
  color: var(--torch);
}
.menu-list {
  display: grid;
  gap: 8px;
  margin: 6px 0;
}
.menu-list .btn {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
}
.menu-list .danger-soft {
  border-color: #5a2a26;
}
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #11141b;
  border-top: 1px solid var(--wall-hi);
  padding: 6px calc(8px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
}
.tabbar .spr {
  width: 30px;
  height: 30px;
  opacity: 0.45;
  filter: grayscale(0.7);
}
.tabbar button.on {
  color: var(--torch);
}
.tabbar button.on .spr {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(232, 163, 61, 0.5));
}
.tabbar {
  grid-template-columns: repeat(5, 1fr);
}
/* 下のタブは中身と同じ幅にそろえる（広い画面で横いっぱいに広がらないように） */
.tabbar {
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: 440px;
}
.tabbar button {
  position: relative;
}
.twhead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.town .stabs button.on,
.town .btn.main {
  background: linear-gradient(#f3c66a, #c98a2a);
  border-color: #5a3a10;
  color: #241505;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.7),
    inset 0 -2px 0 rgba(90, 58, 16, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.6);
}
/* 下のタブ：金の線で区切り、選んでいるタブの下に金の光 */
.tabbar {
  background: linear-gradient(#1c1f28, #0f1117);
  border-top: 1px solid #8a6a36;
  box-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 225, 160, 0.15);
}
.tabbar button.on::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f3c66a, transparent);
}
.town .stabs button.on,
.town .btn.main {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAV0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg9Y1JGApENfLANBNcwadHGLgiQASsiAWm6+Gls7hshJhECBClCG7dhQt3cSqC+w7mSGTQseENRBGIIBROADiCIavHs3DWAAAAAElFTkSuQmCC") !important;
  color: #241505;
  text-shadow: none;
}
/* 下のタブバー：上の線もドット */
.tabbar {
  border-top: 0 !important;
  box-shadow: none !important;
  background:
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGklEQVR4nGMQ4WH5z3Btmd9/piUbrjEwgLgASAgHPOlo6HwAAAAASUVORK5CYII=") top left/2px 8px repeat-x,
    #15171f !important;
  padding-top: 12px !important;
  image-rendering: pixelated;
}
/* 真ん中のダンジョンだけ、タブバーの上へはみ出す大きな札 */
.tabbar button.big {
  overflow: visible;
}
.tabbar button.big .bigic {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: -30px 0 -2px;
  border: 6px solid transparent;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAZUlEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg0CwvDAV2advANCNIEUhBwTI+DEUmXCcYZm17wMACE7h7+zqmIn0IzYTLLciAKEVw696/fYlFmgPhcBAjzUsBQwnI0WBFIIJQOAEAqjYdOqenZDAAAAAASUVORK5CYII=") 3 fill / 6px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6));
}
.tabbar button.big .bigic .spr {
  width: 40px;
  height: 40px;
  opacity: 0.85;
  filter: none;
}
.tabbar button.big.on .bigic {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAV0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg9Y1JGApENfLANBNcwadHGLgiQASsiAWm6+Gls7hshJhECBClCG7dhQt3cSqC+w7mSGTQseENRBGIIBROADiCIavHs3DWAAAAAElFTkSuQmCC");
}
.tabbar button.big.on .bigic .spr {
  opacity: 1;
}
.tabbar button.big.on::after {
  display: none;
}
.tabbar button.big .dot {
  top: -24px;
  right: calc(50% - 32px);
}
.stabs.st2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stabs button {
  position: relative;
}
/* ===== tabs（下のタブ・町のタブ・メニューの一覧）・2段目 ===== */
.menu-list small {
  font-size: 11px;
  color: var(--dim);
  line-height: 1.5;
}
.tabbar button {
  background: none;
  border: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 4px 0;
  color: var(--dim);
  font-size: 11px;
}
.tabbar .dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b5e;
  box-shadow: 0 0 6px #ff6b5e;
}
/* 選んでいるタブと、いちばん押してほしいボタンは金の板（▶と同じ色） */
.town .stabs button {
  color: #cfc3a4;
  text-shadow: 1px 1px 0 #000;
}
.tabbar button {
  text-shadow: 1px 1px 0 #000;
}
.tabbar button.on {
  color: #ffd77a;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(232, 163, 61, 0.28), transparent 70%);
}
.town .stabs button {
  min-height: 38px;
  padding: 0 2px;
}
.stabs .dot {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ff6b5e;
  box-shadow: 0 0 0 2px #140a04;
}
/* プレオープンで使えないタブ（town-tabs.js の TAB_LOCK）：絵を薄くして錠前を重ねる */
.tabbar button.lock { position: relative; }
.tabbar button.lock .spr, .tabbar button.lock > span { opacity: 0.4; filter: grayscale(1); }
.tabbar button.lock .tlock { position: absolute; top: 6px; left: 50%; margin-left: 6px; image-rendering: pixelated; }
.btn .tlock { vertical-align: -3px; margin-left: 6px; image-rendering: pixelated; }