/* ミッション */
/* 読み込む順番に意味がある（後のファイルが前の規則を上書きする）。並べ方は tools/css/regroup.mjs が決める */
.mini {
  font-size: 12px;
  padding: 4px 8px;
  background: #1b2330;
  border: 1px solid var(--wall-hi);
}
.mini:disabled {
  opacity: 0.4;
}
.mis {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #4a3a1c;
  background: #221c12;
  display: grid;
  gap: 6px;
}
.mis .dh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mis .dh .px {
  color: var(--torch);
  font-size: 16px;
}
.mrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  padding: 4px 0;
  border-top: 1px dashed #3a3020;
}
.mrow.done {
  opacity: 0.45;
}
.mrow .mg {
  color: var(--gem);
  font-variant-numeric: tabular-nums;
}
.mrow .mst {
  font-size: 11px;
  color: var(--dim);
  min-width: 5.5em;
  text-align: right;
}
.mrow .mini {
  min-width: 5.5em;
}
.claimall {
  flex: none;
  width: 100%;
  padding: 10px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.mrow .mn {
  display: grid;
  gap: 3px;
}
.mrow.bonus {
  border-top: 1px solid #4a3a1c;
}
.dbtn .mini {
  padding: 6px 12px;
}
.mis {
  padding: 8px;
}
/* ミッションの行：名前と数を1行、その下に棒。右に報酬と受け取る */
.mrow {
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-top: 0 !important;
  background: repeating-linear-gradient(90deg, #3a3f4f 0 4px, transparent 4px 8px) left top/100% 2px no-repeat;
}
.mrow .mn {
  display: grid;
  gap: 4px;
}
.mrow .mt {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.mrow .mt small {
  white-space: nowrap;
}
/* ===== 残りの部品もドットに：枠は /ui の画像、棒や線は段差のある色（ぼかしなし） ===== */
.mis,
.recs div,
.cos {
  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;
}
.mini.on,
.seg button.on,
.cos-tabs button.on {
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQUlEQVR4nGNkYGBgEOFh+Q+ikcGbL38YGUESr29MQpHorWhi6NjwhoEFJvDwyHp0zQxMGCLESoKNBdmBDTDicy0A+V4TDpXTTDEAAAAASUVORK5CYII=") !important;
  color: #241505 !important;
  font-weight: 700;
}
/* ===== missions（ミッション）・3段目 ===== */
.mini,
.seg button,
.cos-tabs button,
.chip {
  border: 4px solid transparent !important;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAASklEQVR4nGNkYGBgEOFh+Q+ikcGbL38YGUESR2Z5okhs2XefoWPFDQYWmIBN3vk3MHZFgIAIiGZCNw4Z4JUEGwuyA2YUMmDE51oAvE0VwRr+EREAAAAASUVORK5CYII=") 2 fill / 4px !important;
  background: none !important;
  box-shadow: none !important;
  image-rendering: pixelated;
  color: #f3e8cc;
}