/* Dragon Forge: the guide parts that the Void 2.0 page's shared styles do not already cover. */
.dragon-forge { --df-glass:rgba(21,16,34,.72); --df-glass-hi:rgba(34,25,52,.78); --df-ember:#e8834a; --df-good:#7cd992; }
.dragon-forge .v2-hero h1 { margin-bottom:10px; }
.df-kicker-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 6px; }
.df-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--line-strong); border-radius:999px; background:var(--df-glass); color:var(--gold-hi); font:600 12px/1.4 var(--body); letter-spacing:.04em; }
.df-badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--df-ember); box-shadow:0 0 8px var(--df-ember); }
.df-badge.is-live::before { background:var(--df-good); box-shadow:0 0 8px var(--df-good); }

/* Section intro and the small "for min-maxers" panels. */
.df-lede { max-width:68ch; color:#d8cde6; font-size:17px; line-height:1.65; }
.df-tip { display:grid; gap:6px; max-width:68ch; margin:0; padding:13px 16px; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:8px; background:var(--df-glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.df-tip > b { color:var(--gold-hi); font:600 12px/1.3 var(--body); letter-spacing:.08em; text-transform:uppercase; }
.df-tip p, .df-tip li { color:#d2c7e1; font-size:14px; line-height:1.6; }
.df-tip ul { padding-left:18px; display:grid; gap:4px; }
.df-sub { display:grid; gap:18px; min-width:0; }
.df-sub + .df-sub { padding-top:26px; border-top:1px dashed rgba(143,85,223,.22); }
.df-sub > h3 { margin:0; }

/* Key numbers as small stat tiles. */
.df-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.df-stats li { display:grid; gap:2px; padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:var(--df-glass); }
.df-stats b { color:var(--gold-hi); font:400 24px/1.15 var(--display); }
.df-stats span { color:var(--muted); font-size:12px; line-height:1.4; }

/* Tables: wide ones scroll inside their frame on a phone instead of squeezing. */
.df-table-wrap { min-width:0; border:1px solid var(--article-rule); border-radius:8px; overflow-x:auto; overscroll-behavior-x:contain; background:rgba(16,12,25,.6); }
.df-table-wrap .v2-table { min-width:520px; }
.df-table-wrap.df-narrow .v2-table { min-width:0; }
.df-table-wrap .v2-table caption { padding:10px 12px; color:var(--text); background:var(--void-2); font:600 14px/1.4 var(--body); text-align:left; }
.v2-table td.df-num, .v2-table th.df-num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.v2-table .df-odds { color:var(--gold-hi); font-weight:600; }
.v2-table .df-dim { color:var(--muted); }
.df-ico { width:48px; height:32px; object-fit:contain; image-rendering:pixelated; vertical-align:middle; margin-right:8px; }
.df-cell { display:flex; align-items:center; gap:2px; min-width:0; }
.df-note-row td { color:var(--muted); font-size:12px; }

/* Item cards with the in-game sprite at 2x. */
.df-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.df-items .v2-item { grid-template-columns:84px minmax(0,1fr); align-items:start; background:var(--df-glass); }
.df-items .v2-icon { min-height:64px; }
.df-items .v2-item p + p { margin-top:4px; }
.df-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.df-tag { padding:1px 7px; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:11px; line-height:1.6; }
.df-tag.is-gold { color:var(--gold-hi); border-color:rgba(226,192,130,.4); }

/* Step-by-step guides. */
.df-steps { counter-reset:df-step; display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.df-steps > li { counter-increment:df-step; display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:var(--df-glass); }
.df-steps > li::before { content:counter(df-step); display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--gold); border-radius:50%; color:var(--gold-hi); font:400 18px/1 var(--display); }
.df-steps h4 { margin:2px 0 4px; color:var(--text); font:600 15px/1.4 var(--body); }
.df-steps p { color:#cfc4de; font-size:14px; line-height:1.6; }
.df-steps .v2-recipe { margin-top:9px; background:rgba(11,8,18,.55); }

/* The lair's five levels, top to bottom. */
.df-levels { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.df-level { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px 24px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--df-glass); }
.df-level-copy { display:grid; gap:8px; align-content:start; min-width:0; }
.df-level-copy h3 { margin:0; }
.df-level-copy h3 small { display:block; margin-bottom:2px; color:var(--purple-hi); font:600 11px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; }
.df-level-copy p, .df-level-copy li { color:#cfc4de; font-size:14px; line-height:1.6; }
.df-level-copy ul { padding-left:18px; display:grid; gap:5px; }
.df-level .v2-media { gap:10px; }

/* Before and after pairs reuse .v2-pair; this marks the two halves clearly. */
.df-pair-title { margin:0 0 4px; color:var(--text); font:600 14px/1.4 var(--body); }

/* Overview tiles: five across on a wide screen. */
.dragon-forge .v2-tiles { grid-template-columns:repeat(5,minmax(0,1fr)); }
.dragon-forge .v2-tile-copy > span { font-size:12.5px; }

.df-sources { margin-top:8px; color:var(--muted); font-size:12px; }

@media (max-width:1024px) {
  .dragon-forge .v2-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .df-level { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
  .dragon-forge .v2-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .df-lede { font-size:16px; }
  .df-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .df-stats b { font-size:21px; }
  .df-items { grid-template-columns:minmax(0,1fr); }
  .df-steps > li { grid-template-columns:30px minmax(0,1fr); gap:10px; padding:12px; }
  .df-steps > li::before { width:28px; height:28px; font-size:16px; }
  .df-level { padding:12px; }
}

/* Drop tables fold away on a phone; open, they read like any other table. */
.df-drops { min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--df-glass); }
.df-drops > summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 14px; cursor:pointer; list-style:none; color:var(--text); font:600 15px/1.4 var(--body); }
.df-drops > summary::-webkit-details-marker { display:none; }
.df-drops > summary::before { content:'+'; display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid var(--gold); border-radius:4px; color:var(--gold-hi); font:600 14px/1 var(--body); }
.df-drops[open] > summary::before { content:'\2212'; }
.df-drops > summary small { color:var(--muted); font-weight:400; font-size:12.5px; }
.df-drops > summary:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.df-drops-body { display:grid; gap:12px; padding:0 14px 14px; }
.df-drops-body > p { color:#cfc4de; font-size:14px; line-height:1.6; }
.df-drop-list { display:grid; gap:10px; }

/* The update video: a click-through thumbnail (our own poster), shown once a link is set. */
.df-video { display:grid; gap:14px; padding:26px 0 30px; border-top:1px solid var(--article-rule); }
.df-video[hidden] { display:none; }
.df-video-link { position:relative; display:block; max-width:860px; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; background:#100c19; text-decoration:none; }
.df-video-link img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.92; transition:opacity .2s; }
.df-video-link:hover img, .df-video-link:focus-visible img { opacity:1; }
.df-video-link:focus-visible { outline:2px solid var(--gold-hi); outline-offset:3px; }
.df-video-play { position:absolute; left:50%; top:50%; width:76px; height:76px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(11,8,18,.78); border:2px solid var(--gold-hi); box-shadow:0 4px 24px #000a; }
.df-video-play::after { content:''; position:absolute; left:30px; top:22px; border-style:solid; border-width:16px 0 16px 26px; border-color:transparent transparent transparent var(--gold-hi); }
.df-video-label { position:absolute; left:14px; bottom:12px; padding:5px 10px; border-radius:6px; background:rgba(11,8,18,.82); color:var(--gold-hi); font:600 14px/1.3 var(--body); }