/* Dwarven Mine — V2 page-specific stylesheet.
   Common layout and header use the existing shared CSS.
   No CSS gap property. */
/* Hero background */
body.site-ui-page.dm-visual {
  --page-visual-image: url("../assets/bg/dwarven-mine-hero.webp");
  --page-visual-position: center top;
  --page-visual-height: 30svh;
}

.dm-main {
  margin-top: 0;
  padding-bottom: .8125rem;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .8125rem;
  line-height: 1.55;
}

.dm-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: max(0px, calc(30svh - 96px - env(safe-area-inset-top, 0px)));
  padding: 8px 2.4px 9.6px;
}

/* Fade from Hero image into the opaque article background. */
.dm-intro::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 100vw;
  height: 100px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0), #050505);
  pointer-events: none;
}

.dm-intro > * {
  position: relative;
  z-index: 1;
}

.dm-intro .section-kicker {
  margin: 0;
}

.dm-page-title {
  margin: .32rem 0 0;
  color: #f0eee9;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
}

.dm-page-text {
  margin: .48rem 0 0;
  color: #c0c7c0;
  font-size: .79rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Full-width opaque article surface, without new outer cards. */
.dm-section, .dm-details {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--glass-line-soft);
  background: #050505;
  box-shadow: 0 0 0 100vmax #050505;
  clip-path: inset(0 -100vmax);
}

/* Chapter headings (01–09): gold, bold, same-size numbers, underline. */
.dm-section h2, .dm-details summary {
  display: flex;
  align-items: center;
  margin: 0 0 .9rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(214, 170, 79, .45);
  color: #f2f2f2;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.45;
}

/* Chapter image: 25% of the heading row, maintaining a square image box. */
.dm-chapter-icon {
  flex: 0 0 25%;
  width: 25%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-right: .45rem;
  object-fit: contain;
}

/* White bold chapter name, compact enough for handset widths when possible. */
.dm-heading-label {
  flex: 1;
  min-width: 0;
  color: #f2f2f2;
  font-size: clamp(.7rem, 3.2vw, .8125rem);
  font-weight: 700;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

/* The number retains its own line and gold colour. */
.dm-num {
  display: block;
  margin: 0 0 .15rem;
  color: var(--gold-2);
  font-size: 1.1em;
  font-weight: 700;
}

.dm-section h3 {
  margin: 1.4rem 0 .55rem;
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
}

.dm-section h4 {
  margin: 1.12rem 0 .3rem;
  color: var(--gold-2);
  font-size: .8125rem;
  font-weight: 500;
}

.dm-section p, .dm-detail-body p {
  margin: .7rem 0;
  color: var(--text);
  font-size: inherit;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.dm-section p strong, .dm-detail-body p strong {
  color: var(--gold-2);
}

.dm-section .dm-note {
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.55;
}

.dm-kpis {
  display: flex;
  justify-content: space-between;
  margin: .9rem 0 1rem;
}

.dm-kpis > div {
  width: calc(50% - .24rem);
  min-width: 0;
  padding: .95rem .3rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  text-align: center;
}

.dm-kpis > .dm-kpi-max {
  background: #17130a;
}

.dm-kpis small, .dm-daily small {
  display: block;
  color: var(--muted);
  font-size: .75rem;
}

.dm-kpis strong {
  display: block;
  margin: .15rem 0;
  color: var(--gold-2);
  font-size: 1.4375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dm-details summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

.dm-details summary::-webkit-details-marker {
  display: none;
}


.dm-chevron {
  width: .5rem;
  height: .5rem;
  margin: 0 .25rem 0 .5rem;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg);
}

.dm-details[open] .dm-chevron {
  transform: rotate(225deg);
}

.dm-details summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.dm-detail-body {
  padding-top: .7rem;
}

.dm-table {
  width: 100%;
  margin: .85rem 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.dm-table th, .dm-table td {
  padding: .65rem .28rem;
  border-bottom: 1px solid var(--glass-line-soft);
  font-size: .75rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}

.dm-table th {
  color: var(--muted);
  font-weight: 500;
}

.dm-table td:last-child {
  color: var(--gold-2);
  font-weight: 500;
}

.dm-table th:last-child, .dm-table td:last-child {
  text-align: right;
}

.dm-table-compact th, .dm-table-compact td {
  font-size: .71875rem;
}

.dm-calculation {
  margin: 1rem 0;
  padding: .75rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
}

.dm-calculation small {
  color: var(--muted);
  font-size: .75rem;
}

.dm-calculation p {
  margin: .35rem 0 .75rem;
  font-variant-numeric: tabular-nums;
}

.dm-calculation p:last-child {
  margin-bottom: 0;
}

.dm-daily {
  display: flex;
  align-items: center;
  margin-top: .9rem;
  padding: .75rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
}

.dm-daily img {
  width: 3rem;
  height: 3rem;
  margin-right: .9rem;
  object-fit: contain;
}

.dm-daily strong {
  display: block;
  color: var(--gold-2);
  font-size: 1.4375rem;
  font-weight: 500;
}

.dm-task-list, .dm-reward-list, .dm-special-list {
  margin: .85rem 0;
  padding: 0;
  list-style: none;
}

.dm-task-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px solid var(--glass-line-soft);
}

.dm-task-list li strong {
  margin-left: .6rem;
  color: var(--gold-2);
  white-space: nowrap;
  font-weight: 500;
}

.dm-reward-list li {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: .65rem 0;
  border-bottom: 1px solid var(--glass-line-soft);
}

.dm-floor {
  flex: 0 0 2.75rem;
  color: var(--gold-2);
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dm-floor small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: .6875rem;
}

.dm-reward-list img {
  width: 3rem;
  height: 3rem;
  margin: 0 .7rem 0 .3rem;
  object-fit: contain;
}

.dm-reward-copy {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dm-reward-copy strong {
  display: block;
  font-weight: 500;
}

.dm-reward-copy small {
  display: block;
  margin-top: .25rem;
  color: var(--muted);
  font-size: .6875rem;
}

.dm-simple-list {
  padding-left: 1.3rem;
  line-height: 1.85;
}

.dm-special-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  margin-top: .75rem;
}

.dm-special-list li {
  min-width: 0;
  margin: .25rem;
  padding: .75rem .3rem;
  border-radius: var(--radius-sm);
  background: var(--glass-strong);
  text-align: center;
}

.dm-special-list img {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto .35rem;
  object-fit: contain;
}

.dm-special-list span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
}

.dm-special-list strong {
  display: block;
  margin-top: .3rem;
  color: var(--gold-2);
  font-size: 1rem;
  font-weight: 500;
}

/* Chapter 09: subsection labels and compact item icons. */
.dm-section .dm-subheading {
  margin-top: 1.6rem;
  margin-bottom: .85rem;
  padding-left: .6rem;
  border-left: 3px solid var(--gold-2);
  color: var(--gold-2);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.45;
}

.dm-item-heading {
  display: flex;
  align-items: center;
}

.dm-item-icon {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .45rem;
  object-fit: contain;
}

/* Purple only behind the SSR herb image, not the whole reward card. */
.dm-herb-icon {
  background: #68408b;
  border-radius: .375rem;
}
/* 第03章：補給箱のサブタイトルを金色に */
.dm-section[aria-labelledby="dm3"] > h3 {
  color: var(--gold-2);
}