/* Matchups: a head-to-head field report in the Atlas visual language. */
.matchup-shell{--side-a:#e9f400;--side-b:#ff466e;--side-a-ink:#697000;--side-b-ink:#c21e48;display:flex;flex-direction:column;gap:28px;max-width:1280px;margin:0 auto;padding-bottom:52px}.matchup-builder{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:visible}.matchup-modes{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}.scope-lock{display:flex;align-items:baseline;gap:8px;padding:0 4px}.scope-lock>span{color:var(--muted);font-size:10px}.scope-lock strong{font-size:12px;font-weight:650}.segmented{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--surface-alt)}.segmented button{min-height:34px;padding:6px 12px;border-radius:6px;color:var(--muted);font-size:12px;font-weight:650}.segmented button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0001}.segmented.scenario button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.matchup-pickers{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:16px;align-items:end;padding:22px}.matchup-side-field{display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:2px;border-top:3px solid var(--side-a)}.matchup-side-field.side-b{border-color:var(--side-b)}.matchup-side-field>label{padding-top:7px;color:var(--muted);font-size:11px;font-weight:650}.matchup-side-search{position:relative;min-width:0}.matchup-side-search>input{width:100%;min-width:0;min-height:46px;padding:8px 90px 8px 12px;background:var(--bg);font-size:14px;font-weight:650}.matchup-side-search>span{position:absolute;right:12px;top:23px;translate:0 -50%;pointer-events:none;color:var(--muted);font-size:9px}.matchup-side-options,.target-attacker-options{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:310px;padding:5px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 14px 36px #0006}.matchup-side-options[hidden],.target-attacker-options[hidden]{display:none}.matchup-side-options button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:8px 10px;border-radius:7px;text-align:left}.matchup-side-options button:hover,.matchup-side-options button[aria-selected=true],.target-attacker-options button:hover,.target-attacker-options button[aria-selected=true]{background:var(--row-hover)}.matchup-side-options button[aria-selected=true],.target-attacker-options button[aria-selected=true]{box-shadow:inset 3px 0 var(--accent)}.matchup-side-options strong,.matchup-side-options span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.matchup-side-options strong{font-size:12px}.matchup-side-options span{flex:none;color:var(--muted);font-size:9px}.matchup-side-options p,.target-attacker-options p{padding:16px;color:var(--muted);font-size:11px;text-align:center}.swap-sides{display:grid;place-items:center;width:42px;height:42px;margin-bottom:2px;border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:21px}.swap-sides:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.matchup-context{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:12px 22px;border-top:1px solid var(--line);background:var(--surface-alt);border-radius:0 0 16px 16px;font-size:10px;color:var(--muted)}.matchup-context span{display:flex;align-items:center;gap:6px}.matchup-context .ico{width:13px;height:13px}.matchup-context i{width:7px;height:7px;border-radius:50%;background:var(--positive)}
.matchup-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;padding:0 4px}.matchup-versus>span{font-size:11px;color:var(--muted)}.matchup-versus>.matchup-identity:last-child{text-align:right;align-items:flex-end}.matchup-identity{display:flex;flex-direction:column;gap:4px;min-width:0}.matchup-identity strong{font-size:22px;line-height:1.1;letter-spacing:-.45px;overflow-wrap:anywhere}.matchup-identity>span{font-size:11px;color:var(--muted)}.matchup-summary{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}.matchup-metric{display:grid;grid-template-columns:72px minmax(40px,1fr) 150px minmax(40px,1fr) 72px;gap:10px;align-items:center;min-height:50px;padding:8px 16px;border-bottom:1px solid var(--line)}.matchup-metric:last-child{border-bottom:0}.matchup-metric>strong{text-align:center;font-size:11px;font-weight:550;color:var(--muted)}.metric-value{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}.metric-value.side-a{text-align:right;color:var(--side-a-ink)}.metric-value.side-b{color:var(--side-b-ink)}.metric-track{display:flex;height:7px;border-radius:9px;background:var(--surface-alt);overflow:hidden}.metric-track.left,.rung-bar.left{justify-content:flex-end}.metric-track i{height:100%;background:var(--side-a);border-radius:9px}.metric-track.right i{background:var(--side-b)}
.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.panel-heading h2{font-size:19px;font-weight:650;letter-spacing:-.3px}.panel-heading p{max-width:72ch;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.55}.observed-pill,.rule-chip{flex:none;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-alt);color:var(--muted);font-size:10px;font-weight:650}.observed-pill{border-color:color-mix(in srgb,var(--positive),transparent 60%);color:var(--positive)}.battle-line,.matchup-section,.matchup-trend,.target-finder{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px}.battle-line-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;padding:0 40px 10px;font-size:11px}.battle-line-head strong:first-child{color:var(--side-a-ink)}.battle-line-head strong:last-child{text-align:right;color:var(--side-b-ink)}.battle-line-head span{color:var(--muted)}.level-rungs,.power-rungs{display:flex;flex-direction:column;gap:5px}.level-rung{display:grid;grid-template-columns:28px minmax(0,1fr) 38px minmax(0,1fr) 28px;gap:8px;align-items:center;min-height:19px}.level-rung>strong{text-align:center;color:var(--muted);font-size:10px}.rung-count{font-size:10px;font-variant-numeric:tabular-nums}.rung-count.side-a{text-align:right;color:var(--side-a-ink)}.rung-count.side-b{color:var(--side-b-ink)}.rung-bar{display:flex;height:9px;border-radius:2px;background:var(--surface-alt);overflow:hidden}.rung-bar i{height:100%;background:var(--side-a)}.rung-bar.right i{background:var(--side-b)}.power-rungs{gap:8px}.power-rung{display:grid;grid-template-columns:112px minmax(0,1fr) 76px minmax(0,1fr) 112px;gap:10px;align-items:center;min-height:24px}.power-rung>strong{text-align:center;color:var(--muted);font-size:9px}.power-rung .rung-bar{height:12px}.power-rung-value{font-size:10px;font-weight:650;white-space:nowrap}.power-rung-value.side-a{text-align:right;color:var(--side-a-ink)}.power-rung-value.side-b{color:var(--side-b-ink)}
.exposure-grid,.frontline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.exposure-card{padding:18px;border:1px solid var(--line);border-top:4px solid var(--side-a);border-radius:12px;background:var(--bg)}.exposure-card.side-b{border-top-color:var(--side-b)}.exposure-card>header{display:flex;align-items:center;gap:12px;padding-bottom:16px}.exposure-card>header>.ico{width:22px;height:22px;color:var(--side-a-ink)}.exposure-card.side-b>header>.ico{color:var(--side-b-ink)}.exposure-card .matchup-identity strong,.frontline-card .matchup-identity strong{font-size:16px}.exposure-card dl,.frontline-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}.exposure-card dl>div,.frontline-card dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:13px 8px 0 0}.exposure-card dt,.frontline-card dt{font-size:10px;color:var(--muted)}.exposure-card dd,.frontline-card dd{margin:0;font-size:15px;font-weight:700}.frontline-count{display:flex;align-items:center;gap:8px}.frontline-count>span{color:var(--muted);font-size:10px}.frontline-count .segmented button{min-height:30px;padding:4px 8px;font-size:10px}.frontline-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.frontline-card:first-child{box-shadow:inset 0 4px var(--side-a)}.frontline-card:last-child{box-shadow:inset 0 4px var(--side-b)}.frontline-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;padding:12px 0;border-top:1px solid var(--line)}.frontline-stat span{font-size:10px;color:var(--muted)}.frontline-stat strong{font-size:18px}.frontline-portraits{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:8px;padding:8px 0 16px}.frontline-portraits button{position:relative;justify-self:start;border-radius:50%}.frontline-portraits .avatar{display:block;width:38px;height:38px;border:2px solid var(--bg);border-radius:50%}.frontline-portraits button>span{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:8px;font-weight:700}.frontline-card dl{grid-template-columns:repeat(3,minmax(0,1fr))}.frontline-card dl>div{flex-direction:column}.frontline-card dd{font-size:13px}
.target-count{flex:none;padding:6px 9px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:700}.target-controls{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:14px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-alt)}.target-controls .segmented{background:var(--surface)}.target-controls .segmented button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}.target-controls .target-kind button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.target-attacker-field{display:flex;flex-direction:column;gap:6px;min-width:0}.target-attacker-field>label{color:var(--muted);font-size:9px;font-weight:650}.target-attacker-search{position:relative;min-width:0}.target-attacker-search>input{width:100%;min-width:0;min-height:40px;background:var(--surface);font-size:12px}.target-attacker-options button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;width:100%;min-height:48px;padding:8px 10px;border-radius:7px;text-align:left}.target-attacker-options strong,.target-attacker-options span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.target-attacker-options strong{font-size:12px}.target-attacker-options span{grid-column:1;color:var(--muted);font-size:9px}.target-attacker-options small{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted);font-size:9px}.target-rule{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center;padding:16px 4px}.target-attacker{display:flex;align-items:center;gap:9px;min-width:0;text-align:left}.target-rule .avatar{width:32px;height:32px;border-radius:9px}.target-rule b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.target-rule>strong{padding:6px 10px;border-radius:5px;background:var(--surface-alt);font-size:11px}.target-rule>small{text-align:right;color:var(--muted);font-size:9px}.target-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}.target-table{width:100%;border-collapse:collapse;min-width:560px}.target-table th{height:34px;padding:7px 12px;background:var(--surface-alt);border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;text-align:left}.target-table td{height:56px;padding:7px 12px;border-bottom:1px solid var(--line);font-size:11px}.target-table tr:last-child td{border-bottom:0}.target-table tbody tr:hover{background:var(--row-hover)}.target-player{display:flex;align-items:center;gap:9px;text-align:left}.target-player .avatar{width:34px;height:34px;border-radius:9px}.target-player>span{display:flex;flex-direction:column;gap:3px}.target-player strong{font-size:11px}.target-player small{font-size:9px;color:var(--muted)}.target-map{display:flex;align-items:center;gap:6px;color:var(--accent)}.target-map .ico{width:13px;height:13px}.target-location-missing,.target-foot{color:var(--muted);font-size:9px}.target-empty{text-align:center;color:var(--muted);padding:28px!important}.target-foot{padding:10px 4px 0}
.trend-periods{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--surface-alt)}.trend-periods button{min-width:42px;min-height:30px;padding:5px 7px;border-radius:5px;color:var(--muted);font-size:10px;font-weight:650}.trend-periods button[aria-pressed=true]{background:var(--surface);color:var(--ink)}.trend-legend{display:flex;justify-content:center;gap:24px;margin-bottom:4px;font-size:10px;color:var(--muted)}.trend-legend span{display:flex;align-items:center;gap:6px}.trend-legend i{width:18px;height:3px;border-radius:2px;background:var(--side-a)}.trend-legend .side-b i{background:var(--side-b)}.trend-chart{position:relative;min-height:220px}.trend-chart svg{display:block;width:100%;height:auto}.trend-grid line{stroke:var(--line);stroke-width:1}.trend-grid text{fill:var(--muted);font-size:9px}.trend-line{fill:none;stroke:var(--side-a);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.trend-line.side-b{stroke:var(--side-b)}.trend-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:200px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:11px;text-align:center}.trend-empty strong{color:var(--ink);font-size:13px}.player-peek{position:fixed;z-index:100;width:270px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);box-shadow:0 16px 44px #0006;pointer-events:none}.player-peek[hidden]{display:none}.player-peek-head{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--line)}.player-peek-head .avatar{width:42px;height:42px;border-radius:11px}.player-peek-head>div{display:flex;flex-direction:column;gap:3px;min-width:0}.player-peek-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.player-peek-head span{color:var(--muted);font-size:9px}.player-peek dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:12px 0}.player-peek dt{color:var(--muted);font-size:8px}.player-peek dd{margin:3px 0 0;font-size:11px;font-weight:650}.player-peek>small{display:block;padding-top:9px;border-top:1px solid var(--line);color:var(--accent);font-size:9px;font-weight:650}.matchup-shell button:focus-visible,.matchup-shell input:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px}
@container content (max-width:560px){.matchup-shell{gap:20px}.matchup-modes{flex-direction:column;align-items:flex-start}.scope-lock{width:100%;justify-content:space-between}.matchup-pickers{grid-template-columns:1fr auto;padding:18px 14px}.matchup-side-field{grid-column:1/-1}.matchup-pickers .side-a{grid-row:1}.matchup-pickers .side-b{grid-row:3}.swap-sides{grid-column:2;grid-row:2;margin:-10px 0;background:var(--surface)}.matchup-versus{gap:8px}.matchup-versus .matchup-identity strong{font-size:16px}.matchup-metric{grid-template-columns:45px minmax(16px,1fr) 92px minmax(16px,1fr) 45px;gap:6px;padding:6px 8px}.matchup-metric>strong,.metric-value{font-size:9px}.battle-line,.matchup-section,.matchup-trend,.target-finder{padding:17px}.panel-heading{flex-wrap:wrap}.power-rung{grid-template-columns:76px minmax(0,1fr) 58px minmax(0,1fr) 76px;gap:5px}.power-rung-value{font-size:8px}.target-controls{grid-template-columns:1fr}.target-controls .segmented{width:100%}.target-controls .segmented button{flex:1}.target-rule{grid-template-columns:1fr auto}.target-rule>small{grid-column:1/-1;text-align:left}.exposure-grid,.frontline-grid{grid-template-columns:1fr}.frontline-count{width:100%;justify-content:space-between}.frontline-count .segmented{width:auto}}
@media(prefers-reduced-motion:reduce){.matchup-shell *{scroll-behavior:auto!important}}

.app[data-theme=dark] .matchup-shell{--side-a-ink:var(--side-a);--side-b-ink:var(--side-b)}
.matchup-error{padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface-alt);color:var(--danger,#ff6577);font-size:12px}