.builds-page { max-width: 1280px; }
.builds-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); margin: 1rem 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(circle at 78% 20%, rgba(75, 199, 207, .16), transparent 34%), linear-gradient(135deg, rgba(11, 18, 25, .98), rgba(17, 30, 37, .92)); }
.builds-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 52%, rgba(214, 182, 109, .08)); clip-path: polygon(60% 0, 100% 0, 100% 100%, 36% 100%); }
.builds-hero > * { position: relative; z-index: 1; }
.builds-hero .section-kicker { color: var(--accent); }
.builds-hero h1 { max-width: 760px; margin: .3rem 0 .8rem; }
.builds-hero p { max-width: 720px; color: var(--text-dim); }
.build-filters { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.5rem; }
.build-filter { min-height: 44px; padding: .65rem 1rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-dim); background: var(--surface); font: 700 .74rem var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.build-filter:hover, .build-filter:focus-visible, .build-filter[aria-pressed="true"] { color: var(--text-primary); border-color: var(--accent); background: rgba(214, 182, 109, .08); }
.build-results { margin: 0 0 1rem; color: var(--text-dim); font-size: .82rem; }
.build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.build-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .2s ease, border-color .2s ease; }
.build-card:hover { transform: translateY(-2px); border-color: rgba(214, 182, 109, .45); }
.build-card:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 28px rgba(214, 182, 109, .13); }
.build-card[hidden] { display: none; }
.build-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #090d11; }
.build-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.82); transition: .25s ease; }
.build-card:hover .build-thumb img { filter: brightness(.86) saturate(1); transform: scale(1.015); }
.build-subclass { position: absolute; left: 1rem; top: 1rem; padding: .35rem .55rem; border: 1px solid currentColor; background: rgba(5, 8, 12, .82); color: var(--build-color, var(--accent)); font: 700 .68rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
.build-card-body { display: flex; flex: 1; flex-direction: column; gap: .85rem; padding: 1.15rem; }
.build-meta { display: flex; justify-content: space-between; gap: .8rem; color: var(--text-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.build-card h2 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.build-card p { margin: 0; color: var(--text-dim); }
.build-loadout { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0; }
.build-loadout div { padding: .75rem; border: 1px solid var(--border); background: rgba(255,255,255,.018); }
.build-loadout dt { color: var(--text-dim); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.build-loadout dd { margin: .25rem 0 0; color: var(--text-primary); font-weight: 700; }
.build-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.build-tags span { padding: .28rem .48rem; border: 1px solid var(--border); color: var(--text-dim); font-size: .68rem; }
.build-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: auto; }
.build-actions-single { grid-template-columns: 1fr; }
.build-card-reference { border-color: rgba(121, 226, 141, .28); }
.build-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: .65rem .8rem; border: 1px solid var(--border); color: var(--text-primary); font: 700 .72rem var(--display); letter-spacing: .07em; text-transform: uppercase; text-align: center; }
.build-action-primary { border-color: var(--accent); background: rgba(214, 182, 109, .1); }
.build-video { margin-top: .1rem; border-top: 1px solid var(--border); }
.build-video summary { min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; cursor: pointer; color: var(--text-primary); font: 700 .72rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.build-video summary::after { content: "+"; color: var(--accent); }
.build-video[open] summary::after { content: "−"; }
.build-video .yt-wrap { border-radius: 0; }
.build-source-note { margin: 1.5rem 0; padding: 1rem; border-left: 2px solid var(--accent); color: var(--text-dim); background: rgba(214, 182, 109, .04); font-size: .82rem; }
@media (max-width: 780px) { .build-grid { grid-template-columns: 1fr; } .builds-hero { padding: 1.5rem; } }
@media (max-width: 480px) { .build-loadout, .build-actions { grid-template-columns: 1fr; } }