.builds-page { overflow-wrap: anywhere; }
.builds-page .section { position: relative; }
.builds-hero { padding-block: var(--space-10) var(--section-space); }
.builds-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(22.5rem, 5fr); gap: var(--space-8); align-items: end; }
.builds-hero__grid > * { min-width: 0; width: 100%; }
.builds-hero__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.builds-hero__copy > * { min-width: 0; margin: 0; }
.builds-hero__copy h1 { max-width: 17ch; }
.builds-hero__copy .lead { max-width: 54ch; }
.builds-hero__actions { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.builds-hero__actions > * { min-width: 0; }
.builds-text-link { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; }
.builds-hero__plaque { width: min(100%, 42ch); padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-relic-gold); }
.builds-hero__media { width: 100%; min-width: 0; margin: 0; border: var(--border-default); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-basalt-panel); }
.builds-hero__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.builds-hero__media figcaption { padding: var(--space-3) var(--space-4); }
.builds-styles__intro { max-width: 62ch; }
.builds-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.builds-style-grid > * { min-width: 0; width: 100%; }
.builds-style-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-left: 3px solid var(--color-rune-outline); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); color: var(--color-arcane-text); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.builds-style-card > * { min-width: 0; margin: 0; }
.builds-style-card h3 { font-size: 1.25rem; }
.builds-style-card p { color: var(--color-muted-text); }
.builds-style-card > span:last-child { margin-top: auto; color: var(--color-spell-cyan); font-size: var(--text-small); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.builds-style-card:hover { border-color: var(--color-spell-cyan); box-shadow: var(--shadow-cyan); color: var(--color-arcane-text); }
.builds-style-card--start { border-left-color: var(--color-ember-scarlet); }.builds-style-card--combo { border-left-color: var(--color-spell-cyan); }.builds-style-card--control { border-left-color: #8066a5; }.builds-style-card--boss { border-left-color: var(--color-boss-red); }
.builds-catalog { background: linear-gradient(180deg, rgba(17,14,21,.4), transparent); }
.builds-catalog__head { max-width: 68ch; }.builds-filter-status { color: var(--color-muted-text); font-size: var(--text-small); }
.builds-filter-bar { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5) var(--space-6); }
.builds-filter-bar > * { min-width: 0; }
.builds-filter { min-height: 2.75rem; border: var(--border-default); border-radius: var(--radius-pill); padding: .5rem .75rem; background: var(--color-basalt-panel); color: var(--color-arcane-text); font-size: var(--text-small); font-weight: 700; }
.builds-filter.is-active { border-color: var(--color-spell-cyan); background: rgba(0,240,255,.08); color: var(--color-spell-cyan); }
.builds-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.builds-catalog__grid > * { min-width: 0; width: 100%; }
.build-card { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); border: var(--border-default); border-radius: var(--radius-sm); border-top: 2px solid var(--color-rune-outline); padding: var(--space-5); background: var(--color-basalt-panel); }
.build-card > * { min-width: 0; margin: 0; }.build-card h3 { margin: 0; }.build-card p { margin: 0; }.build-card .cluster { margin: 0; }.build-card a { align-self: flex-start; font-weight: 700; }
.build-card--featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, .85fr); gap: var(--space-6); border-top-color: var(--color-ember-scarlet); border-top-width: 2px; background: var(--color-basalt-raised); box-shadow: var(--shadow-raised); }
.build-card--featured > * { min-width: 0; width: 100%; }.build-card__body,.build-card__plan { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }.build-card__body > *,.build-card__plan > * { min-width: 0; margin: 0; }
.build-card__plan { border-left: 1px solid var(--color-rune-outline); padding-left: var(--space-5); }.build-card__plan h4 { margin: 0; }.build-card__plan .content-list { margin: 0; }
.builds-process__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(17.5rem, 4fr); gap: var(--space-8); align-items: start; }.builds-process__grid > * { min-width: 0; width: 100%; }.builds-process__content { max-width: 70ch; }.builds-steps { display: grid; gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }.builds-steps > li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-rune-outline); }.builds-steps > li > * { min-width: 0; }.builds-steps > li > span { color: var(--color-relic-gold); font-family: var(--font-heading); font-weight: 700; }.builds-steps h3 { margin-bottom: var(--space-2); }.builds-checklist { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }.builds-checklist > * { min-width: 0; margin: 0; }.builds-checklist__items { display: grid; gap: var(--space-2); }.builds-checklist__items label { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-3); margin: 0; color: var(--color-muted-text); }.builds-checklist__items input { flex: 0 0 auto; }
.builds-boss__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20.625rem, 5fr); gap: var(--space-8); align-items: start; }.builds-boss__grid > * { min-width: 0; width: 100%; }.builds-boss__content { max-width: 60ch; }.builds-boss__rules { display: grid; gap: var(--space-5); }.builds-boss__rules article { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; }.builds-boss__rules article > * { min-width: 0; }.builds-boss__rules article > span { color: var(--color-boss-red); font-family: var(--font-heading); font-weight: 700; }.builds-boss__rules h3 { margin-bottom: var(--space-2); }.builds-boss__rail { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }.builds-boss__rail > * { min-width: 0; width: 100%; }.builds-boss__media { margin: 0; border: var(--border-default); border-radius: var(--radius-sm); overflow: hidden; }.builds-boss__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }.builds-observations { padding: var(--space-5); }.builds-observations h3 { margin-bottom: var(--space-4); }.builds-observations dl { display: grid; gap: var(--space-3); margin: 0; }.builds-observations dl > div { display: grid; grid-template-columns: 5rem minmax(0,1fr); gap: var(--space-3); min-width: 0; }.builds-observations dt { color: var(--color-relic-gold); font-size: var(--text-small); font-weight: 700; }.builds-observations dd { min-width: 0; margin: 0; color: var(--color-muted-text); font-size: var(--text-small); }
.builds-synergy__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; }.builds-synergy__grid > * { min-width: 0; width: 100%; }.builds-synergy__copy { max-width: 60ch; }.builds-synergy__copy .notice { margin-top: var(--space-6); }.builds-synergy__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-5); }.builds-synergy__links > * { min-width: 0; }.builds-synergy__diagram { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-basalt-panel); }.builds-synergy__diagram > * { min-width: 0; margin: 0; }.builds-synergy__diagram img { width: min(100%, 11.25rem); border: var(--border-default); border-radius: var(--radius-sm); aspect-ratio: 1; object-fit: cover; }.builds-synergy__diagram ol { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }.builds-synergy__diagram li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; border-left: 2px solid var(--color-spell-cyan); padding: var(--space-3) var(--space-4); background: rgba(34,28,43,.65); }.builds-synergy__diagram li > * { min-width: 0; }.builds-synergy__diagram li strong { color: var(--color-arcane-text); }.builds-synergy__diagram li span { color: var(--color-muted-text); font-size: var(--text-small); }
.builds-beginners__intro { max-width: 60ch; }.builds-beginners__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }.builds-beginners__grid > * { min-width: 0; width: 100%; }.builds-beginners__grid article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); }.builds-beginners__grid article > * { min-width: 0; margin: 0; }.builds-beginners__grid article > span { color: var(--color-rune-outline); font-family: var(--font-heading); font-size: 2rem; font-weight: 700; }.builds-beginners__route { margin-top: var(--space-5); }
.builds-faq__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); }.builds-faq__grid > * { min-width: 0; width: 100%; }.builds-faq__content { max-width: 66ch; }.builds-accordion { display: grid; gap: var(--space-3); margin-top: var(--space-6); }.builds-accordion > * { min-width: 0; width: 100%; border: var(--border-default); border-radius: var(--radius-sm); background: var(--color-basalt-panel); }.builds-accordion h3 { margin: 0; }.builds-accordion button { display: flex; width: 100%; min-height: 3.25rem; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-4); background: transparent; color: var(--color-arcane-text); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-align: left; }.builds-accordion button span { flex: 0 0 auto; color: var(--color-spell-cyan); font-family: var(--font-body); font-size: 1.5rem; transition: transform var(--transition-fast); }.builds-accordion button[aria-expanded="true"] span { transform: rotate(45deg); }.builds-accordion [role="region"] { padding: 0 var(--space-4) var(--space-4); }.builds-accordion [role="region"] p { max-width: 66ch; margin: 0; color: var(--color-muted-text); }.builds-faq__space { min-height: 100%; opacity: .08; background: repeating-linear-gradient(45deg, transparent 0 20px, var(--color-rune-outline) 20px 21px); }
.builds-routes__intro { max-width: 64ch; }.builds-routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }.builds-routes__grid > * { min-width: 0; width: 100%; }.builds-route { display: flex; min-width: 0; min-height: 100%; flex-direction: column; gap: var(--space-3); border: var(--border-default); border-left: 3px solid var(--color-rune-outline); border-radius: var(--radius-sm); padding: var(--space-5); background: var(--color-basalt-panel); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }.builds-route > * { min-width: 0; margin: 0; }.builds-route > span { color: var(--color-muted-text); font-family: var(--font-heading); font-weight: 700; }.builds-route p { color: var(--color-muted-text); }.builds-route > a,.builds-route > div { margin-top: auto; }.builds-route > div { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }.builds-route > div > * { min-width: 0; }.builds-route a { font-weight: 700; }.builds-route:hover { border-color: var(--color-spell-cyan); box-shadow: var(--shadow-cyan); }.builds-route--cyan { border-left-color: var(--color-spell-cyan); }.builds-route--gold { border-left-color: var(--color-relic-gold); }.builds-route--ember { border-left-color: var(--color-ember-scarlet); }
.builds-note { background: var(--color-violet-ash); border-top: 1px solid var(--color-rune-outline); }.builds-note__content { display: flex; width: min(100%, 43.75rem); min-width: 0; flex-direction: column; gap: var(--space-5); margin-inline: auto; }.builds-note__content > * { min-width: 0; margin: 0; }.builds-note__content h2 { text-align: center; }.builds-note__links { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }.builds-note__links > * { min-width: 0; }
@media (max-width: 65rem) { .builds-style-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.builds-catalog__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.build-card--featured { grid-column: span 1; grid-template-columns: minmax(0,1fr); }.build-card__plan { border-top: 1px solid var(--color-rune-outline); border-left: 0; padding-top: var(--space-4); padding-left: 0; } }
@media (max-width: 61.25rem) { .builds-hero__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }.builds-hero__media { max-width: 45rem; }.builds-boss__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }.builds-boss__rail { order: 1; }.builds-boss__content { order: 2; max-width: 70ch; } }
@media (max-width: 56.25rem) { .builds-process__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }.builds-process__content { max-width: 70ch; }.builds-checklist { max-width: 42rem; }.builds-faq__grid { grid-template-columns: minmax(0,1fr); }.builds-faq__space { display: none; } }
@media (max-width: 53.75rem) { .builds-synergy__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-6); }.builds-synergy__diagram { max-width: 42rem; } .builds-routes__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 55rem) { .builds-beginners__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 35rem) { .builds-hero { padding-top: var(--space-8); }.builds-hero__copy h1 { max-width: 100%; font-size: clamp(2rem,10vw,2.65rem); }.builds-hero__copy .lead { max-width: 34ch; }.builds-hero__actions { flex-direction: column; align-items: stretch; }.builds-hero__actions > * { width: 100%; }.builds-hero__plaque { width: 100%; }.builds-style-grid,.builds-catalog__grid,.builds-beginners__grid,.builds-routes__grid { grid-template-columns: minmax(0,1fr); }.builds-style-card,.build-card,.builds-beginners__grid article,.builds-route { padding: var(--space-4); }.builds-filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); }.builds-filter { flex: 0 0 auto; }.builds-steps > li { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }.builds-steps > li > span { font-size: var(--text-small); }.builds-observations dl > div { grid-template-columns: minmax(0,1fr); gap: var(--space-1); }.builds-synergy__diagram { padding: var(--space-4); }.builds-synergy__diagram li { grid-template-columns: minmax(0,1fr); gap: var(--space-1); }.builds-note__content { width: 100%; margin: 0; }.builds-note__content h2 { text-align: left; }.builds-note__links { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .builds-style-card,.builds-route,.builds-accordion button span { transition: none; } }