.dragonfire-guide {
    --df-ink: #f7f1e8;
    --df-muted: #b8b1aa;
    --df-cinder: #17191f;
    --df-slate: #22252d;
    --df-ember: #f06432;
    --df-gold: #f3b84b;
    --df-aether: #6fc7c5;
    --df-danger: #e15b64;
    color: var(--df-ink);
}

.dragonfire-guide .df-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
    gap: 24px;
    margin: 0 0 22px;
    padding: clamp(22px, 4vw, 42px);
    border: 1px solid rgba(243, 184, 75, .32);
    border-radius: 12px;
    background:
        radial-gradient(circle at 88% 20%, rgba(240, 100, 50, .2), transparent 28%),
        linear-gradient(135deg, #211d1d 0%, #171a21 58%, #172424 100%);
}

.dragonfire-guide .df-hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -110px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(243, 184, 75, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(240, 100, 50, .04), 0 0 0 70px rgba(111, 199, 197, .025);
    pointer-events: none;
}

.dragonfire-guide .df-hero-copy,
.dragonfire-guide .df-hero-aside { position: relative; z-index: 1; }
.dragonfire-guide .df-hero h2 { margin: 0 0 12px; color: #fff; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.18; }
.dragonfire-guide .df-hero p { max-width: 720px; margin: 0; color: #d0c8c0; line-height: 1.75; word-break: keep-all; }
.dragonfire-guide .df-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #ffd995; font-weight: 800; font-size: 13px; }
.dragonfire-guide .df-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--df-ember); box-shadow: 0 0 0 5px rgba(240, 100, 50, .14); }
.dragonfire-guide .df-hero-aside { align-self: stretch; display: grid; align-content: center; gap: 10px; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.1); }
.dragonfire-guide .df-hero-aside strong { color: #fff; font-size: 15px; }
.dragonfire-guide .df-hero-aside span { color: var(--df-muted); font-size: 13px; line-height: 1.55; }

.dragonfire-guide .df-path {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: df-step;
}
.dragonfire-guide .df-path li { position: relative; min-height: 112px; padding: 18px 16px 16px 48px; border-top: 1px solid #3b3e46; border-bottom: 1px solid #3b3e46; background: #20232a; color: #c6c0b9; font-size: 13px; line-height: 1.55; counter-increment: df-step; }
.dragonfire-guide .df-path li:first-child { border-left: 1px solid #3b3e46; border-radius: 10px 0 0 10px; }
.dragonfire-guide .df-path li:last-child { border-right: 1px solid #3b3e46; border-radius: 0 10px 10px 0; }
.dragonfire-guide .df-path li + li { border-left: 1px solid #3b3e46; }
.dragonfire-guide .df-path li::before { content: counter(df-step); position: absolute; left: 14px; top: 17px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--df-gold); color: #221a0c; font-weight: 900; }
.dragonfire-guide .df-path strong { display: block; margin-bottom: 5px; color: #fff; font-size: 14px; }

.dragonfire-guide .df-section { margin: 0 0 26px; padding: clamp(18px, 3vw, 30px); border: 1px solid #363943; border-radius: 10px; background: var(--df-slate); }
.dragonfire-guide .df-section > h2,
.dragonfire-guide .df-section > .section-subtitle { margin: 0 0 8px; color: #fff; font-size: clamp(20px, 2.5vw, 28px); line-height: 1.3; }
.dragonfire-guide .df-lead { max-width: 760px; margin: 0 0 20px; color: var(--df-muted); line-height: 1.75; word-break: keep-all; }
.dragonfire-guide .df-rule { padding: 16px 18px; border-left: 4px solid var(--df-gold); background: rgba(243,184,75,.07); color: #e7ded3; line-height: 1.7; }
.dragonfire-guide .df-rule.is-danger { border-left-color: var(--df-danger); background: rgba(225,91,100,.08); }
.dragonfire-guide .df-rule.is-info { border-left-color: var(--df-aether); background: rgba(111,199,197,.07); }

.dragonfire-guide .df-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dragonfire-guide .df-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dragonfire-guide .df-card { min-width: 0; padding: 18px; border: 1px solid #3b3e48; border-radius: 8px; background: #1c1f26; }
.dragonfire-guide .df-card h3 { margin: 0 0 8px; color: #fff; font-size: 17px; line-height: 1.35; }
.dragonfire-guide .df-card p { margin: 0; color: #bcb7b2; font-size: 14px; line-height: 1.7; word-break: keep-all; }
.dragonfire-guide .df-card ul { margin: 10px 0 0; padding-left: 18px; color: #c8c2bb; line-height: 1.7; }
.dragonfire-guide .df-card li + li { margin-top: 5px; }
.dragonfire-guide .df-card.is-fire { border-top: 3px solid var(--df-ember); }
.dragonfire-guide .df-card.is-aether { border-top: 3px solid var(--df-aether); }
.dragonfire-guide .df-card.is-gold { border-top: 3px solid var(--df-gold); }

.dragonfire-guide .df-item { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; align-items: start; }
.dragonfire-guide .df-item img { width: 68px; height: 68px; object-fit: contain; border-radius: 10px; background: #14161b; }
.dragonfire-guide .df-item h3 { margin-top: 2px; }
.dragonfire-guide .df-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.dragonfire-guide .df-tag { padding: 3px 8px; border: 1px solid #4a4d56; border-radius: 999px; color: #c7c1ba; font-size: 11px; }

.dragonfire-guide .df-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dragonfire-guide .df-table th { padding: 11px 12px; border-bottom: 2px solid rgba(243,184,75,.45); color: #ffd995; text-align: left; vertical-align: bottom; }
.dragonfire-guide .df-table td { padding: 12px; border-bottom: 1px solid #3a3d46; color: #ccc6bf; vertical-align: top; line-height: 1.6; }
.dragonfire-guide .df-table tr:last-child td { border-bottom: 0; }
.dragonfire-guide .df-table strong { color: #fff; }

.dragonfire-guide .df-decision { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 17px 0; border-top: 1px solid #393c45; }
.dragonfire-guide .df-decision:first-of-type { border-top: 0; }
.dragonfire-guide .df-decision dt { color: #ffd995; font-weight: 850; }
.dragonfire-guide .df-decision dd { margin: 0; color: #c4beb8; line-height: 1.7; }

.dragonfire-guide .df-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.dragonfire-guide .df-checklist li { position: relative; padding: 11px 12px 11px 38px; border-bottom: 1px solid #393c45; color: #cdc7bf; line-height: 1.55; }
.dragonfire-guide .df-checklist li::before { content: "✓"; position: absolute; left: 10px; top: 10px; color: var(--df-aether); font-weight: 900; }

.dragonfire-guide .df-faq details { border-top: 1px solid #3b3e47; }
.dragonfire-guide .df-faq details:last-child { border-bottom: 1px solid #3b3e47; }
.dragonfire-guide .df-faq summary { cursor: pointer; padding: 15px 4px; color: #f2ece5; font-weight: 800; }
.dragonfire-guide .df-faq details p { margin: -4px 0 16px; padding-right: 10px; color: #bdb7b0; line-height: 1.75; }

.dragonfire-guide .df-links { display: flex; flex-wrap: wrap; gap: 9px; }
.dragonfire-guide .df-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid #4a4d57; border-radius: 7px; color: #e9e2da; text-decoration: none; font-weight: 800; font-size: 13px; }
.dragonfire-guide .df-link:hover,
.dragonfire-guide .df-link:focus-visible { border-color: var(--df-gold); color: #ffd995; outline: none; }
.dragonfire-guide .df-source-list { margin: 0; padding-left: 20px; color: #bdb7b0; line-height: 1.75; }
.dragonfire-guide .df-source-list a { color: #8bd8d5; }

@media (max-width: 900px) {
    .dragonfire-guide .df-hero { grid-template-columns: 1fr; }
    .dragonfire-guide .df-hero-aside { padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
    .dragonfire-guide .df-path { grid-template-columns: 1fr; }
    .dragonfire-guide .df-path li { min-height: 0; border: 1px solid #3b3e46; border-bottom: 0; }
    .dragonfire-guide .df-path li:first-child { border-radius: 10px 10px 0 0; }
    .dragonfire-guide .df-path li:last-child { border-bottom: 1px solid #3b3e46; border-radius: 0 0 10px 10px; }
    .dragonfire-guide .df-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 660px) {
    .dragonfire-guide .df-grid,
    .dragonfire-guide .df-checklist { grid-template-columns: 1fr; }
    .dragonfire-guide .df-decision { grid-template-columns: 1fr; gap: 6px; }
    .dragonfire-guide .df-item { grid-template-columns: 54px minmax(0, 1fr); }
    .dragonfire-guide .df-item img { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    .dragonfire-guide *, .dragonfire-guide *::before, .dragonfire-guide *::after { scroll-behavior: auto !important; }
}