/* 上の帯（手持ち・ダイヤ・お知らせ・設定）と探索画面の上の欄 */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
/* HUD */
.hud {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: center;
}
.floor {
  grid-row: span 2;
  font-size: 30px;
  line-height: 1;
  color: var(--torch);
  text-shadow: 0 0 12px rgba(232, 163, 61, 0.45);
}
.floor small {
  display: block;
  font-size: 11px;
  color: var(--dim);
  text-shadow: none;
  margin-top: 4px;
}
.stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.stats b {
  color: var(--ink);
  font-weight: 400;
}
.purse {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-block: 1px dashed var(--wall-hi);
  padding-block: 6px;
  font-variant-numeric: tabular-nums;
}
.purse .carry {
  color: var(--gold);
  font-size: 20px;
}
.purse .carry small,
.purse .bank small {
  font-size: 11px;
  color: var(--dim);
  margin-right: 4px;
}
.purse .bank {
  color: var(--gold);
  font-size: 14px;
}
.town .bankbig {
  font-size: 26px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.town .bankbig small {
  font-size: 12px;
  color: var(--dim);
  margin-right: 6px;
}
.newsbtn {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 88px;
  z-index: 3;
  background: #1e222d;
  border: 1px solid var(--wall-hi);
  color: var(--dim);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.newsbtn .dot,
.nw-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b5e;
  box-shadow: 0 0 6px #ff6b5e;
}
.newsbtn .dot {
  position: absolute;
  top: -4px;
  right: -4px;
}
.setbtn .dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b5e;
  box-shadow: 0 0 6px #ff6b5e;
}
/* 上のボタン（ミッション・イベント開催中・お知らせ・設定）もバナーと同じ作り：金の細い縁・内側の光の線・下の影 */
.qbtn,
.newsbtn,
.setbtn {
  background: linear-gradient(#2b303d, #1a1d26) !important;
  border: 1px solid #b08a45 !important;
  color: #f3e8cc !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 160, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(0, 0, 0, 0.5);
  text-shadow: 1px 1px 0 #000;
  transition:
    transform 0.06s,
    filter 0.12s;
}
.qbtn {
  min-height: 38px;
  font-size: 13px;
}
.qbtn.ev {
  background: linear-gradient(#352944, #211a2b) !important;
}
.qbtn:active,
.newsbtn:active,
.setbtn:active {
  transform: translateY(2px);
  filter: brightness(1.15);
}
.newsbtn,
.setbtn {
  font-size: 12px;
  padding: 5px 10px;
}
.qbtn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  border: 1px solid var(--wall);
  background: #1d2130;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.qbtn.ev {
  border-color: #6b4a86;
  color: #e3b8ff;
}
.qbtn .dot {
  position: absolute;
  top: 6px;
  right: 8px;
}
.hudhl {
  display: inline-block;
  outline: 2px solid var(--torch);
  outline-offset: 4px;
  box-shadow: 0 0 18px rgba(232, 163, 61, 0.6);
  animation: pm 1s ease-in-out infinite alternate;
}
.xbtn {
  text-align: center;
  text-decoration: none;
  background: #000;
  border-color: #333;
  color: #fff;
}
.xbtn .xlogo {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
}
.bar.hudhl {
  outline: none;
  box-shadow:
    inset 0 0 0 2px var(--torch),
    0 0 12px rgba(232, 163, 61, 0.55);
}
.setbtn {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 3;
  background: #1e222d;
  border: 1px solid var(--wall-hi);
  color: var(--dim);
  font-size: 12px;
  padding: 6px 12px;
}
.stgmark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  padding: 2px 8px;
  font-size: 11px;
  background: #7fa6c9;
  color: #10151d;
  pointer-events: none;
  opacity: 0.9;
}
.purse2 {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  align-items: center;
  font-size: 16px;
  color: var(--gold);
  padding-right: 64px;
  min-height: 30px;
}
.purse2 span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.purse2 span:last-child {
  color: var(--gem);
}
/* 上の帯：ゴールド・ダイヤ・設定を1行に（どのタブでも） */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0 8px;
  border-bottom: 1px dashed var(--wall-hi);
  margin-bottom: 6px;
}
.topbar .tb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: var(--gold);
}
.topbar .tb .spr {
  width: 22px;
  height: 22px;
}
.topbar .tb.gm {
  color: var(--gem);
}
.topbar .setbtn {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
}
.topbar .newsbtn {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
}
.topbar .newsbtn + .setbtn {
  margin-left: -6px;
}
.town .bankbig.gm {
  color: var(--gem);
}
.sti {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 2px 4px;
  background: var(--wall);
  border: 1px solid var(--wall-hi);
  color: var(--dim);
  font-size: 11px;
}
.sti.sel {
  border-color: var(--torch);
  box-shadow: 0 0 8px rgba(232, 163, 61, 0.35);
}
.sti.r1 {
  border-color: #3c5a3a;
}
.sti.r2 {
  border-color: #3b4e66;
}
.sti.r3 {
  border-color: #6a5220;
}
.sti .up {
  position: absolute;
  top: 2px;
  right: 4px;
  font-style: normal;
  color: var(--moss);
  font-size: 10px;
}
.evp .bankbig {
  color: #e3b8ff;
}
/* ===== ドットの札：枠は /ui/*.png（tools/make_ui_plates.py で1ドットずつ描いた物）を2倍で使う。なめらかな線や段階の色は使わない ===== */
.qbtn,
.newsbtn,
.setbtn,
.town .btn,
.town .stabs button,
.town .item,
.town .dcard,
.town .bk,
.gotr,
.town .evcard,
.town .dcard.evd {
  border: 6px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAZUlEQVR4nGNkYGBgEOFh+c+AA7z58oeREabg0CwvDAV2advANCNIEUhBwTI+DEUmXCcYZm17wMACE7h7+zqmIn0IzYTLLciAKEVw696/fYlFmgPhcBAjzUsBQwnI0WBFIIJQOAEAqjYdOqenZDAAAAAASUVORK5CYII=") 3 fill / 6px !important;
  background: none !important;
  box-shadow: none !important;
  image-rendering: pixelated;
}
.qbtn.ev,
.town .evcard,
.town .dcard.evd {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAY0lEQVR4nGNkYGBgEOFh+c+AA7z58oeREaZgy5QYDAU+OUvANCNIEUhBxwIWDEVyAkcYlu25wwCXufPwChZFEJoJl1uQAVGK4Na9ev8MizQXwuEgRpSLCoYSkKPBikAEoXACAIFCHQOnU/S4AAAAAElFTkSuQmCC") !important;
}
.newsbtn,
.setbtn {
  padding: 1px 6px !important;
}
.qbtn {
  min-height: 40px;
}
/* ヘッダー（ゴールド・ダイヤ・お知らせ・設定）は上に固定して、いつでも残高が見えるように */
.town .topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-inline: -16px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 8px;
  /* 画面全体（:root）も上に安全領域の分の余白を取っているので、その分だけ引き上げる（2重になって、アプリで上に大きな隙間ができていた）。
     帯の地はステータスバーの裏まで届き、スクロールしても文字がステータスバーに重ならない */
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  background: #15171f;
  border-bottom: 0 !important;
  box-shadow: none;
}
.town .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGklEQVR4nGMQ4WH5z3Btmd9/piUbrjEwgLgASAgHPOlo6HwAAAAASUVORK5CYII=") top left/2px 8px repeat-x;
  image-rendering: pixelated;
  pointer-events: none;
}
/* 残高の行：ラベルの幅をそろえ、印と数字を同じ高さ・同じ大きさで並べる */
.town .bankbig {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  line-height: 1;
  margin: 6px 0;
}
.town .bankbig small {
  min-width: 6.5em;
  margin: 0;
  font-size: 12px;
}
.town .bankbig .gi,
.town .bankbig .gi .spr {
  width: 26px !important;
  height: 26px !important;
  margin: 0 4px 0 0;
}
.town .bankbig .goldamt,
.town .bankbig .gemamt {
  display: inline-flex;
  align-items: center;
}
@media (max-height: 620px) {
  .runapp .floor {
    font-size: 24px;
  }
  .runapp .floor small {
    margin-top: 2px;
  }
  .runapp .purse {
    padding-block: 2px;
  }
  .runapp .purse .carry {
    font-size: 17px;
  }
}