.matchup-page{padding-top:calc(var(--nav-height) + var(--space-8));padding-bottom:var(--space-32);min-height:100vh}.matchup-header{text-align:center;margin-bottom:var(--space-12)}.matchup-header__eyebrow{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent-blue);letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:var(--space-3)}.matchup-title{font-family:var(--font-display);font-style:italic;font-size:clamp(3rem, 8vw, 6rem);color:var(--text-primary);letter-spacing:var(--ls-display);line-height:var(--lh-tight);margin:0 0 var(--space-4)}.matchup-subtitle{color:var(--text-secondary);font-size:var(--fs-md);max-width:500px;margin:0 auto;line-height:var(--lh-normal)}.matchup-arena{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-6);align-items:start;margin-bottom:var(--space-8)}.brawler-picker{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--duration-normal) var(--ease-out)}.brawler-picker.has-brawler{border-color:var(--border-strong)}.picker-search-wrap{padding:var(--space-4);border-bottom:1px solid var(--border-default);position:relative}.picker-search{width:100%;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-sm);padding:var(--space-2) var(--space-3);outline:0;transition:border-color var(--duration-fast) var(--ease-out);box-sizing:border-box}.picker-search:focus{border-color:var(--accent-blue)}.picker-search::placeholder{color:var(--text-muted)}.picker-dropdown{position:absolute;top:calc(100% + var(--space-1));left:var(--space-4);right:var(--space-4);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-md);max-height:240px;overflow-y:auto;z-index:var(--z-dropdown);box-shadow:var(--shadow-lg);display:none}.picker-dropdown.open{display:block}.picker-option{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);cursor:pointer;font-size:var(--fs-sm);font-family:var(--font-body);color:var(--text-secondary);transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.picker-option:hover{background:var(--bg-hover);color:var(--text-primary)}.picker-option__dot{width:32px;height:32px;border-radius:var(--radius-sm);flex-shrink:0;position:relative;overflow:hidden}.picker-option__dot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.picker-option__name{flex:1;font-weight:var(--fw-medium);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.05em}.picker-option__class{font-size:var(--fs-xs);color:var(--text-muted)}.picker-display{padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);min-height:220px;justify-content:center}.picker-display.empty{opacity:.4}.picker-display__avatar{width:80px;height:80px;border-radius:var(--radius-lg);position:relative;overflow:hidden;transition:transform var(--duration-normal) var(--ease-out)}.picker-display__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.picker-display__avatar:hover{transform:scale(1.05)}.picker-display__name{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text-primary);letter-spacing:.04em;text-align:center}.picker-display__class{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--bg-hover);color:var(--text-secondary)}.picker-display__placeholder{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--text-muted);text-align:center;letter-spacing:.03em}.picker-clear{background:0 0;border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-muted);font-size:var(--fs-xs);padding:var(--space-1) var(--space-3);cursor:pointer;font-family:var(--font-mono);transition:color var(--duration-fast),border-color var(--duration-fast);display:none}.picker-clear:hover{color:var(--error);border-color:var(--error)}.has-brawler .picker-clear{display:inline-flex;align-items:center;gap:var(--space-1)}.vs-divider{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:var(--space-12);gap:var(--space-4)}.vs-label{font-family:var(--font-display);font-size:clamp(2.5rem, 5vw, 4rem);background:linear-gradient(135deg,var(--accent-yellow),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.04em;line-height:1}.vs-line{display:none}.matchup-results{margin-top:var(--space-4);opacity:0;transform:translateY(16px);transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out);pointer-events:none}.matchup-results.visible{opacity:1;transform:translateY(0);pointer-events:auto}.verdict-banner{background:var(--bg-secondary);border:2px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);text-align:center;margin-bottom:var(--space-6);position:relative;overflow:hidden}.verdict-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}.verdict-banner.advantage-a::before{background:linear-gradient(90deg,var(--accent-yellow),transparent)}.verdict-banner.advantage-b::before{background:linear-gradient(90deg,transparent,var(--accent-blue))}.verdict-banner.advantage-none::before{background:linear-gradient(90deg,var(--accent-yellow),var(--accent-blue))}.verdict-label{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:var(--space-2)}.verdict-result{font-family:var(--font-display);font-size:clamp(1.5rem, 4vw, 2.5rem);color:var(--text-primary);letter-spacing:.04em;line-height:1.1;margin-bottom:var(--space-3)}.verdict-detail{color:var(--text-secondary);font-size:var(--fs-sm);max-width:480px;margin:0 auto;line-height:var(--lh-normal)}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4)}.comparison-card{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5)}.comparison-card__title{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default)}.mode-scores{background:var(--bg-secondary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}.mode-scores__title{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:var(--ls-wide);text-transform:uppercase;margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default)}.mode-row{display:grid;grid-template-columns:28px 32px 1fr 1fr 32px;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}.mode-row:last-child{margin-bottom:0}.mode-row__icon{font-size:var(--fs-md);text-align:center}.mode-row__score{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:var(--fw-bold)}.mode-row__score--a{text-align:right}.mode-row__score--b{text-align:left}.mode-row__bar-wrap{display:flex;align-items:center}.mode-row__bar-wrap--a{justify-content:flex-end}.mode-row__bar-wrap--b{justify-content:flex-start}.mode-row__bar{height:8px;border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out);flex-shrink:0}.mode-row__score.better{color:var(--success)}.mode-row__score.worse{color:var(--text-muted)}.mode-row__score.tied{color:var(--text-secondary)}.counter-list{display:flex;flex-direction:column;gap:var(--space-2)}.counter-item{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);color:var(--text-secondary);padding:var(--space-2) var(--space-3);background:var(--bg-elevated);border-radius:var(--radius-sm);border-left:3px solid transparent}.counter-item.counters{border-left-color:var(--success);color:var(--text-primary)}.counter-item.countered{border-left-color:var(--error)}.counter-item.synergy{border-left-color:var(--accent-blue)}.counter-item__icon{font-size:var(--fs-md);flex-shrink:0}.counter-item__text{flex:1;line-height:var(--lh-snug)}.matchup-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.04em;margin-bottom:var(--space-2)}.matchup-badge.win{background:var(--success-dim);color:var(--success);border:1px solid var(--success)}.matchup-badge.loss{background:var(--error-dim);color:var(--error);border:1px solid var(--error)}.matchup-badge.neutral{background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border-strong)}.matchup-prompt{text-align:center;padding:var(--space-16) var(--space-8);background:var(--bg-secondary);border:1px dashed var(--border-strong);border-radius:var(--radius-lg)}.matchup-prompt__icon{font-size:3rem;margin-bottom:var(--space-4);opacity:.5}.matchup-prompt__text{font-family:var(--font-display);font-size:var(--fs-xl);color:var(--text-muted);letter-spacing:.03em}.empty-list{padding:var(--space-4);text-align:center;color:var(--text-muted);font-size:var(--fs-sm)}@media (max-width:860px){.matchup-arena{grid-template-columns:1fr;gap:var(--space-4)}.vs-divider{flex-direction:row;padding-top:0;justify-content:center}.vs-line{display:none}.comparison-grid{grid-template-columns:1fr}.mode-row{grid-template-columns:28px 1fr auto;gap:var(--space-2)}.mode-row__bar-b,.mode-row__score:last-child{display:none}}@media (max-width:480px){.matchup-title{font-size:3rem}}