.brawler-detail-page{padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-32);min-height:100vh}.bd-hero{position:relative;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-8);margin-bottom:var(--space-8);display:flex;align-items:center;gap:var(--space-8);overflow:hidden}.bd-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--brawler-color-dim,rgba(0,0,0,0)) 0,transparent 60%);pointer-events:none}.bd-hero__portrait{flex-shrink:0;width:140px;height:140px;border-radius:var(--radius-lg);background:var(--brawler-color,var(--bg-elevated));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:3.5rem;color:rgba(255,255,255,.9);box-shadow:0 0 40px var(--brawler-color-dim,rgba(0,0,0,.4));position:relative;overflow:hidden}.bd-hero__portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 100%)}.bd-hero__info{flex:1}.bd-hero__name{font-family:var(--font-display);font-style:italic;font-size:clamp(2.5rem, 6vw, 4.5rem);line-height:1;color:var(--text-primary);letter-spacing:var(--ls-display);margin-bottom:var(--space-3)}.bd-hero__meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}.bd-class-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-4);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);border-radius:var(--radius-full);background:var(--brawler-color-dim,var(--bg-hover));color:var(--brawler-color,var(--text-secondary));border:1px solid var(--brawler-color-border,var(--border-default));letter-spacing:var(--ls-wide)}.bd-rarity-badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);border-radius:var(--radius-full);background:var(--bg-hover);color:var(--text-secondary);letter-spacing:var(--ls-wide)}.bd-hero__tier{display:flex;align-items:center;gap:var(--space-4)}.bd-tier-label{font-family:var(--font-display);font-size:4rem;line-height:1;background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bd-tier-sub{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted);letter-spacing:var(--ls-wide)}.bd-hero__bg-name{position:absolute;right:-1rem;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:10rem;line-height:1;color:rgba(255,255,255,.025);pointer-events:none;user-select:none;white-space:nowrap}.bd-layout{display:grid;grid-template-columns:1fr 320px;gap:var(--space-6);align-items:start}.bd-main,.bd-sidebar{min-width:0}.bd-card{background:var(--bg-secondary);border:1px solid rgba(255,255,255,.06);border-top-color:rgba(255,255,255,.22);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-6);position:relative;box-shadow:0 8px 32px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}.bd-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:55%;height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,185,33,.7) 35%,rgba(0,165,249,.7) 65%,transparent 100%);pointer-events:none;z-index:1}.bd-card:last-child{margin-bottom:0}.bd-card__title{font-family:var(--font-display);font-style:italic;font-size:var(--fs-xl);letter-spacing:var(--ls-display);color:var(--text-primary);margin-bottom:var(--space-5);display:flex;align-items:center;gap:var(--space-3)}.bd-card__title-accent{background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-right:.12em}.bd-mode-list{display:flex;flex-direction:column;gap:var(--space-4)}.bd-mode-row{display:grid;grid-template-columns:110px 1fr 48px;align-items:center;gap:var(--space-3)}.bd-mode-name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-secondary);letter-spacing:var(--ls-wide);white-space:nowrap}.bd-mode-bar-track{height:10px;background:var(--bg-hover);border-radius:var(--radius-full);overflow:hidden}.bd-mode-bar-fill{height:100%;border-radius:var(--radius-full);background:var(--gradient-iridescent);transition:width .7s var(--ease-in-out);width:0}.bd-mode-bar-fill--s{background:linear-gradient(90deg,#ffd05b,#ffb921)}.bd-mode-bar-fill--a{background:linear-gradient(90deg,#86efac,#22c55e)}.bd-mode-bar-fill--b{background:linear-gradient(90deg,#93c5fd,#3b82f6)}.bd-mode-bar-fill--c{background:linear-gradient(90deg,#c4b5fd,#7f4fc9)}.bd-mode-bar-fill--f{background:var(--bg-hover)}.bd-mode-score{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);text-align:right}.bd-counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}.bd-counter-col__label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);margin-bottom:var(--space-3)}.bd-counter-col--beats .bd-counter-col__label{color:var(--success)}.bd-counter-col--loses .bd-counter-col__label{color:var(--error)}.bd-counter-list{display:flex;flex-direction:column;gap:var(--space-2)}.bd-counter-chip{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;transition:transform 160ms var(--ease-out),border-color 160ms ease;cursor:pointer}.bd-counter-chip:hover{transform:translateX(4px);border-color:var(--border-default)}.bd-counter-chip--beats:hover{border-color:var(--success)}.bd-counter-chip--loses:hover{border-color:var(--error)}.bd-counter-chip__avatar{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--bg-hover);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-xs);color:rgba(255,255,255,.7);flex-shrink:0}.bd-counter-chip__name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--ls-normal)}.bd-counter-chip__indicator{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-bold)}.bd-counter-chip--beats .bd-counter-chip__indicator{color:var(--success)}.bd-counter-chip--loses .bd-counter-chip__indicator{color:var(--error)}.bd-build-section{margin-bottom:var(--space-5)}.bd-build-section:last-child{margin-bottom:0}.bd-build-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);color:var(--text-muted);margin-bottom:var(--space-3);text-transform:uppercase}.bd-build-options{display:flex;flex-direction:column;gap:var(--space-2)}.bd-build-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:border-color 160ms}.bd-build-item--recommended{border-color:var(--accent-yellow);background:var(--accent-yellow-dim)}.bd-build-item__icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.bd-build-item__text{flex:1;min-width:0}.bd-build-item__name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-2)}.bd-build-item__desc{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:var(--space-1);line-height:var(--lh-normal)}.bd-recommended-tag{font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);color:var(--text-inverse);background:var(--gradient-iridescent);padding:1px 6px;border-radius:var(--radius-full);white-space:nowrap}.bd-gears-row{display:flex;gap:var(--space-3);flex-wrap:wrap}.bd-gear-chip{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-secondary)}.bd-gear-chip__icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor}.bd-gear-chip__icon svg{width:100%;height:100%;fill:currentColor}.bd-gear-chip--wide{width:fit-content;max-width:100%}.bd-gear-chip--recommended{border-color:transparent;color:var(--text-inverse);background:var(--gradient-iridescent)}.bd-map-list{display:flex;flex-direction:column;gap:var(--space-2)}.bd-map-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;transition:transform 160ms var(--ease-out),border-color 160ms ease}.bd-map-row:hover{transform:translateX(4px);border-color:var(--border-default)}.bd-map-name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}.bd-map-mode{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-muted)}.bd-map-score{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bd-synergy-list{display:flex;flex-direction:column;gap:var(--space-2)}.bd-synergy-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;transition:transform 160ms var(--ease-out),border-color 160ms ease;cursor:pointer}.bd-synergy-item:hover{transform:translateX(4px);border-color:var(--accent-blue)}.bd-synergy-avatar{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-xs);color:rgba(255,255,255,.8)}.bd-synergy-name{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-primary)}.bd-synergy-why{font-size:var(--fs-xs);color:var(--text-muted);margin-left:auto;text-align:right;flex-shrink:0}.bd-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}.bd-stat-pill{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3);text-align:center}.bd-stat-pill__value{font-family:var(--font-display);font-size:var(--fs-2xl);line-height:1;background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}.bd-stat-pill__label{font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-bold);color:var(--text-muted);letter-spacing:var(--ls-wide);text-transform:uppercase;display:block;margin-top:var(--space-1)}.bd-faq{margin-top:var(--space-8)}.bd-faq__title{font-family:var(--font-display);font-style:italic;font-size:var(--fs-3xl);letter-spacing:var(--ls-display);color:var(--text-primary);margin-bottom:var(--space-6)}.bd-faq__list{display:flex;flex-direction:column;gap:var(--space-3)}.bd-faq__item{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s}.bd-faq__item:hover{border-color:var(--border-default)}.bd-faq__question{width:100%;background:0 0;border:none;padding:var(--space-5) var(--space-6);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);cursor:pointer;text-align:left}.bd-faq__question-text{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-primary);letter-spacing:var(--ls-normal)}.bd-faq__chevron{flex-shrink:0;width:20px;height:20px;color:var(--text-muted);transition:transform 250ms var(--ease-out),color .2s ease}.bd-faq__item.open .bd-faq__chevron{transform:rotate(180deg);color:var(--accent-yellow)}.bd-faq__answer{max-height:0;overflow:hidden;transition:max-height 350ms var(--ease-out)}.bd-faq__item.open .bd-faq__answer{max-height:400px}.bd-faq__answer-inner{padding:0 var(--space-6) var(--space-5);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--text-secondary)}.bd-faq__answer-inner strong{color:var(--text-primary)}.bd-related{margin-top:var(--space-8)}.bd-related__title{font-family:var(--font-display);font-style:italic;font-size:var(--fs-2xl);letter-spacing:var(--ls-display);color:var(--text-primary);margin-bottom:var(--space-5)}.bd-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}.bd-related-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center;transition:transform .2s var(--ease-out),border-color .2s ease,box-shadow .2s ease}.bd-related-card:hover{transform:translateY(-4px);border-color:var(--border-default);box-shadow:var(--shadow-md)}.bd-related-card__avatar{width:56px;height:56px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-lg);color:rgba(255,255,255,.9);margin-bottom:var(--space-1)}.bd-related-card__name{font-family:var(--font-display);font-size:var(--fs-md);color:var(--text-primary);letter-spacing:var(--ls-display)}.bd-related-card__tier{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-muted)}.bd-pro-tips-list{display:flex;flex-direction:column;gap:var(--space-3)}.bd-pro-tip{position:relative;padding:var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 14px);background:var(--bg-elevated);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);overflow:hidden;transition:transform .2s var(--ease-out),box-shadow .2s ease}.bd-pro-tip:hover{transform:translateX(3px);box-shadow:0 4px 20px rgba(0,0,0,.3)}.bd-pro-tip::before{content:'';position:absolute;left:6px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,#ffb921 0,#00a5f9 50%,#a855f7 100%);border-radius:99px}.bd-pro-tip::after{content:'';position:absolute;left:0;top:0;bottom:0;width:44px;background:linear-gradient(90deg,rgba(255,185,33,.05) 0,transparent 100%);pointer-events:none}.bd-pro-tip__header{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.bd-pro-tip__title{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;color:var(--text-primary);letter-spacing:var(--ls-wide);text-transform:uppercase;background:var(--gradient-iridescent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-right:.05em}.bd-pro-tip__body{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.55;margin-bottom:var(--space-3)}.bd-pro-tip__tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:var(--ls-wide);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text-muted);text-transform:uppercase}.bd-breadcrumb{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text-muted)}.bd-breadcrumb a{color:var(--text-secondary);text-decoration:none;transition:color 160ms}.bd-breadcrumb a:hover{color:var(--accent-yellow)}.bd-breadcrumb__sep{color:var(--border-strong)}.bd-breadcrumb__current{color:var(--text-primary)}@media (max-width:900px){.bd-layout{grid-template-columns:1fr}.bd-sidebar{order:-1}.bd-hero{flex-direction:column;text-align:center}.bd-hero__meta,.bd-hero__tier{justify-content:center}.bd-hero__bg-name{display:none}.bd-related__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:600px){.bd-hero{padding:var(--space-6)}.bd-hero__portrait{width:100px;height:100px;font-size:2.5rem}.bd-counter-grid{grid-template-columns:1fr;gap:var(--space-4)}.bd-mode-row{grid-template-columns:90px 1fr 40px}.bd-related__grid,.bd-stat-grid{grid-template-columns:repeat(2,1fr)}}