/* A small working preview of the app's player discovery and comparison tools. */
.tile-analysis{grid-column:span 4}
.tile-market{grid-column:span 2}
.tile-analysis .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.la-tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #ffffff12;padding-bottom:12px}
.la-tabs button{padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;color:#91a09a;transition:background .2s,color .2s}
.la-tabs button[aria-pressed=true]{color:#e8f3dd;background:#cdff5f14}
.tile-analysis button:focus-visible,.tile-analysis input:focus-visible,.tile-analysis select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.la-stage{min-height:314px}
.la-stage section[hidden]{display:none}
.la-compare-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums}
.la-compare-table caption{text-align:left;font-size:12px;font-weight:650;padding-bottom:13px;color:#d5ded8}
.la-compare-table caption span{font-size:10px;font-weight:400;color:#82918a;margin-left:8px}
.la-compare-table th:first-child{width:28%;text-align:left}
.la-compare-table thead th{vertical-align:top;padding:0 8px 12px}
.la-person{position:relative;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:2px 8px;text-align:left;font-weight:400;min-height:94px;border-bottom:2px solid var(--la-color);padding:0 17px 8px 0}
.la-person img{grid-row:span 2;width:38px;height:42px;object-fit:contain;object-position:bottom;background:#ffffff06;border-radius:8px}
.la-person strong{font-size:13px;font-weight:650;color:var(--la-color)}
.la-person small{font-size:10px;font-weight:400;color:#8e9a95}
.la-person>small:last-of-type{grid-column:1/-1}
.la-person>span{grid-column:1/-1;font-size:10px;color:#9ba59f;margin-top:3px}
.la-person>span>b{font-size:13px;color:#e9eee8}
.la-person button{position:absolute;right:0;top:0;width:23px;height:23px;font-size:17px;color:#88948f;border-radius:50%;background:#ffffff07}
.la-add-player{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;min-height:94px;border:1px dashed #ffffff1c;border-radius:10px;color:#939f98;font-size:11px}
.la-add-player b{font-size:22px;font-weight:400;color:var(--lime)}
.la-compare-table tbody th{font-size:11px;font-weight:450;color:#a2ada7;line-height:1.2}
.la-compare-table tbody tr{border-top:1px solid #ffffff08}
.la-compare-table td{padding:8px;color:#6c7771}
.la-metric{display:flex;align-items:center;gap:8px}
.la-metric>b{font-size:12px;font-weight:550;min-width:27px;color:#e9eee8}
.la-metric>span{height:3px;flex:1;background:#ffffff08;border-radius:2px;overflow:hidden}
.la-metric i{display:block;height:100%;background:var(--la-color);border-radius:2px;opacity:.7}
.la-section-line{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#ced8cf}
.la-section-line span:last-child{font-size:10px;color:#89958e}
.la-scatter{position:relative;height:226px;margin-top:12px}
.la-scatter-grid{position:absolute;inset:0}
.la-scatter-grid::before{content:'';position:absolute;left:10%;right:8%;top:13%;bottom:12%;background:repeating-linear-gradient(to top,#ffffff10 0 1px,transparent 1px 25%);border-bottom:1px solid #ffffff20}
.la-y{position:absolute;left:0;width:7%;text-align:right;translate:0 50%;font-size:10px;color:#77877e}
.la-x{position:absolute;bottom:4%;translate:-50% 0;font-size:10px;color:#77877e}
.la-axis-title{position:absolute;right:8%;bottom:-10px;font-size:10px;color:#a8b5aa}
.la-dot{position:absolute;translate:-50% -50%;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#65756d}
.la-dot i{display:block;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px #ffffff04}
.la-dot.is-picked{color:var(--lime)}
.la-dot[aria-pressed=true]{color:#73baff;box-shadow:0 0 0 1px #73baff70}
.la-dot span{position:absolute;bottom:28px;padding:4px 7px;border-radius:5px;font-size:11px;background:#1a2621;color:#e4eee5;white-space:nowrap}
.la-dot-detail{display:flex;align-items:center;justify-content:space-between;margin-top:19px;gap:10px}
.la-dot-person{display:flex;align-items:center;gap:9px}
.la-dot-person img{height:36px;width:30px;object-fit:contain}
.la-dot-person strong,.la-dot-person small{display:block;font-size:12px}
.la-dot-person small{font-size:10px;color:#8f9e95;margin-top:3px}
.la-dot-detail>button{font-size:11px;color:var(--lime);padding:8px 10px;border-radius:8px;background:#ffffff06}
.la-dot-detail>button:disabled{color:#829088}
.la-filters{display:flex;gap:10px;margin-bottom:10px}
.la-filters label{flex:1;min-width:0}
.la-filters input,.la-filters select{border:1px solid #ffffff12;border-radius:9px;background:#ffffff04;color:#c3cec5;padding:9px 11px;font-size:12px;min-width:0;width:100%}
.la-filters select{width:135px}
.la-filters input::placeholder{color:#7d8b82}
.la-catalog-scroll{height:268px;overflow:auto;scrollbar-width:thin;scrollbar-color:#38433b transparent}
.la-catalog{width:100%;border-collapse:collapse;font-size:12px;text-align:right;font-variant-numeric:tabular-nums}
.la-catalog thead{position:sticky;top:0;z-index:1;background:var(--panel)}
.la-catalog thead th{color:#88968d;font-size:10px;font-weight:500;padding:7px 5px 9px}
.la-catalog th:first-child{text-align:left}
.la-catalog tbody tr{border-top:1px solid #ffffff09}
.la-catalog td{padding:6px 5px;color:#d3ded4}
.la-catalog-person{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:550;padding:6px 0}
.la-catalog-person img{width:26px;height:30px;object-fit:contain}
.la-catalog-person small{display:block;font-size:9px;color:#7c8d81;font-weight:400;margin-top:3px}
.la-catalog td button{width:27px;height:27px;border-radius:7px;font-size:16px;background:#ffffff06;color:#d0ddce}
.la-catalog td button[aria-pressed=true]{color:var(--lime);background:#cdff5f10}
.la-catalog td button:disabled{opacity:.25}
.la-empty{padding:28px!important;text-align:center;color:#91a18e!important}
.tile-market .tile-head{flex-wrap:wrap;gap:14px}
.tile-market .market-meta{gap:12px}
.tile-market .market-value{text-align:left}
.tile-market .market-value strong{font-size:29px}
.tile-market .market-value span{font-size:11px}
.tile-market .chart{min-height:140px}
.tile-market .price-chart{min-height:120px}
@media(max-width:1060px){.tile-analysis{grid-column:span 6}.tile-market{grid-column:span 3}}
@media(max-width:760px){.tile-analysis,.tile-market{grid-column:auto}.la-tabs{gap:2px}.la-tabs button{padding:8px;font-size:10px}.la-stage{min-height:310px}.la-compare-table th:first-child{width:30%}.la-compare-table caption span{display:block;margin:5px 0 0}.la-compare-table thead th{padding-inline:3px}.la-person{display:flex;flex-direction:column;gap:3px;text-align:center;padding:0 0 8px;min-height:118px}.la-person strong{font-size:10px}.la-person small{font-size:9px}.la-person button{right:-3px;top:-5px;width:20px;height:20px}.la-compare-table tbody th{font-size:10px;overflow-wrap:anywhere}.la-compare-table td{padding:9px 4px}.la-metric{display:block}.la-metric>b{font-size:11px}.la-metric>span{display:block;margin-top:5px}.la-footer{font-size:9px;gap:5px}.la-filters select{width:118px;font-size:11px}.la-section-line{font-size:10px}.la-section-line span:last-child{font-size:9px}.tile-market .market-meta{flex-wrap:nowrap}.tile-market .market-value{margin-left:auto;text-align:right}.tile-market .market-value strong{font-size:26px}.tile-market .market-player{gap:8px}.tile-market .market-player small{font-size:10px}}
@media(max-width:360px){.tile-analysis{padding-inline:16px}.la-tabs button{padding-inline:6px;font-size:9px}.la-person>small:last-of-type{grid-column:1/-1}
.la-person>span{grid-column:1/-1;font-size:9px}.la-person>span>b{font-size:11px}.tile-market .market-meta{flex-wrap:wrap}.tile-market .market-value{margin-left:0;text-align:left}}
@media(max-width:760px){.tile-analysis .tile-head{position:relative}.tile-analysis .tile-head .tile-tag{position:absolute;top:0;right:0}.tile-analysis .tile-head>div{width:100%}}
/* The analysis itself fills the card; no detached promotional footer. */
.la-stage{min-height:420px}
.la-compare-table th:first-child{width:23%}
.la-compare-table caption{font-size:13px;padding-bottom:18px}
.la-person{grid-template-columns:52px minmax(0,1fr);min-height:146px;padding:0 0 14px;gap:4px 9px}
.la-person img{width:52px;height:64px;border-radius:10px}
.la-person strong{font-size:16px;overflow-wrap:anywhere}
.la-person small{font-size:11px}
.la-person button{top:-8px;right:-4px;width:20px;height:20px;font-size:15px}
.la-person>span{margin-top:7px;font-size:11px}
.la-person>span>b{font-size:24px;letter-spacing:-.04em}
.la-person .la-price{font-size:15px;color:#c3cdc5}
.la-price span{font-size:10px;color:#85958b}
.la-compare-table td{padding-block:12px}
.la-compare-table tbody th{font-size:12px}
.la-metric>b{font-size:14px}
.la-metric>span{height:4px}
.la-compare-table tfoot{border-top:1px solid #ffffff12}
.la-compare-table tfoot th{font-size:11px;font-weight:500;color:#b6c5b7;padding-top:13px}
.la-compare-table tfoot small{display:block;color:#74877a;font-size:9px;margin-top:4px;font-weight:400}
.la-compare-table tfoot td{font-size:17px;color:#e2ecdc}
.la-add-player{min-height:146px}
.la-plot-filters{display:flex;justify-content:flex-end;gap:6px;align-items:center;flex-wrap:wrap}
.la-plot-filters button{display:flex;gap:6px;align-items:center;padding:5px 8px;color:#8b9b91;font-size:10px;border-radius:6px}
.la-plot-filters button[aria-pressed=true]{background:#ffffff08;color:#e5ece4}
.la-plot-filters i{width:6px;height:6px;background:var(--la-color);border-radius:50%}
.la-scatter{height:400px;margin-top:4px}
.la-scatter-grid::before{left:8%;right:6%;top:10%;bottom:10%;background:repeating-linear-gradient(to top,#ffffff0c 0 1px,transparent 1px 16.666%)}
.la-scatter-grid::after{content:'';position:absolute;left:8%;right:6%;top:10%;bottom:10%;background:linear-gradient(130deg,#cdff5f08,transparent 55%);pointer-events:none}
.la-y{width:5%;font-size:9px}
.la-x{bottom:4%;font-size:9px}
.la-axis-y{position:absolute;left:0;top:0;font-size:10px;color:#91a698}
.la-axis-title{right:6%;bottom:-7px}
.la-value-hint{position:absolute;left:11%;top:14%;font-size:10px;color:#8ba078}
.la-dot{color:var(--la-color);z-index:1;width:22px;height:22px}
.la-dot i{width:7px;height:7px;box-shadow:0 0 0 3px #ffffff04}
.la-dot.is-picked i{box-shadow:0 0 0 3px #0f1511,0 0 0 4px currentColor}
.la-dot[aria-pressed=true]{color:var(--la-color);box-shadow:0 0 0 1px currentColor;z-index:3}
.la-dot span{bottom:19px;padding:1px 3px;font-size:9px;color:#a9b5ac;background:var(--panel);pointer-events:none}
.la-dot:nth-of-type(3n) span{top:21px;bottom:auto}
.la-dot:hover,.la-dot:focus-visible{z-index:4}
.la-dot:hover span,.la-dot:focus-visible span,.la-dot[aria-pressed=true] span{color:#f2f6ee;background:#253129;font-size:11px;padding:4px 6px;top:auto;bottom:24px}
.la-dot-detail{margin-top:22px;padding-top:14px;border-top:1px solid #ffffff0d;gap:12px}
.la-dot-person img{width:36px;height:42px}
.la-dot-person strong{font-size:14px}
.la-detail-stat b,.la-detail-stat small{display:block;white-space:nowrap}
.la-detail-stat b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.la-detail-stat small{font-size:9px;color:#87998b;margin-top:3px}
.la-dot-detail>button{font-size:10px}
.la-radar-layout{display:grid;grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:8px;min-height:379px}
.la-radar-svg{display:block;width:100%;overflow:visible}
.la-radar-grid{fill:none;stroke:#ffffff12;stroke-width:1}
.la-radar-svg text{fill:#9baea0;font-size:11px;font-family:inherit}
.la-radar-legend{display:flex;flex-direction:column;gap:12px}
.la-radar-legend button{display:flex;align-items:center;gap:9px;text-align:left;padding:8px;border-radius:9px;background:#ffffff03;transition:opacity .2s}
.la-radar-legend button[aria-pressed=false]{opacity:.35}
.la-radar-legend img{width:34px;height:44px;object-fit:contain}
.la-radar-legend strong{display:block;font-size:13px;color:var(--la-color)}
.la-radar-legend small{display:block;font-size:9px;color:#81958a;margin-block:3px 6px}
.la-radar-legend b{font-size:15px;font-weight:600}
.la-radar-legend em{font-size:9px;font-style:normal;font-weight:400;color:#91a497}
.la-radar-legend i{width:6px;height:6px;border-radius:50%;background:var(--la-color);margin-left:auto;flex-shrink:0}
.la-radar-legend p,.la-radar-note{font-size:10px;line-height:1.6;color:#7f9486}
.la-radar-note{margin-top:10px}
.la-radar-empty{display:grid;place-content:center;gap:20px;min-height:420px;text-align:center;color:#9bae9d}
.la-catalog-scroll{height:368px}
@media(max-width:760px){
 .la-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px}.la-tabs button{font-size:12px;padding:10px 7px;text-align:left}
 .la-stage{min-height:440px}.la-compare-table th:first-child{width:25%}.la-compare-table thead th{padding-inline:3px}
 .la-person{display:flex;min-height:165px;gap:4px;padding-bottom:12px}.la-person img{width:48px;height:58px}.la-person strong{font-size:12px}.la-person small{font-size:9px}.la-person>span{font-size:9px}.la-person>span>b{font-size:21px}.la-person .la-price{font-size:12px}.la-price span{display:block;font-size:9px}
 .la-compare-table tbody th{font-size:10px}.la-compare-table td{padding-block:11px}.la-metric>b{font-size:12px}.la-compare-table tfoot th{font-size:10px}.la-compare-table tfoot small{font-size:8px}.la-compare-table tfoot td{font-size:15px}
 .la-add-player{min-height:165px;font-size:10px}.la-scatter{height:390px}.la-value-hint{font-size:9px;max-width:110px;line-height:1.5}
 .la-dot span{display:none}.la-dot[aria-pressed=true] span,.la-dot:hover span,.la-dot:focus-visible span{display:block}
 .la-dot-detail{gap:8px;flex-wrap:wrap}.la-dot-person{margin-right:auto}.la-detail-stat b{font-size:16px}.la-dot-detail>button{margin-left:auto}.la-efficiency{display:none}
 .la-radar-layout{grid-template-columns:1fr;gap:0;min-height:0}.la-radar-svg{max-height:300px}.la-radar-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.la-radar-legend button{flex-direction:column;text-align:center;gap:4px;padding:8px 2px;position:relative}.la-radar-legend img{width:35px;height:40px}.la-radar-legend strong{font-size:11px;overflow-wrap:anywhere}.la-radar-legend i{position:absolute;top:8px;right:8px}.la-radar-legend p{grid-column:1/-1;font-size:9px}.la-radar-note{font-size:9px}
 .la-catalog-scroll{height:388px}
}


.la-dot span{left:50%;top:50%;bottom:auto;transform:translate(calc(-50% + var(--label-x,0px)),calc(-50% + var(--label-y,-20px)));padding:1px 3px;line-height:12px}
.la-dot:nth-of-type(3n) span{top:50%;bottom:auto}
.la-dot.la-label-on-hover span{display:none}
.la-dot:hover span,.la-dot:focus-visible span,.la-dot[aria-pressed=true] span{display:block;top:50%;bottom:auto;font-size:9px;padding:2px 4px}
.la-radar-svg{height:379px}
@media(max-width:760px){.la-radar-svg{height:auto}.la-dot:hover span,.la-dot:focus-visible span,.la-dot[aria-pressed=true] span{transform:translate(-50%,-150%);font-size:11px}}

.la-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#798e7950;stroke-width:.7;stroke-dasharray:2 3}
@media(max-width:760px){.la-leaders{display:none}.la-radar-svg text{font-size:14px}}

/* Bring the legend into the chart composition and give all six axes more room. */
.tile-analysis{container-type:inline-size}
.la-radar-layout{grid-template-columns:minmax(0,1fr) 160px;gap:20px;max-width:680px;margin-inline:auto;min-height:390px;padding-block:4px}
.la-radar-svg{height:390px}
.la-radar-legend{gap:10px}
.la-radar-legend button{gap:10px;padding:10px;border-radius:10px;min-width:0}
.la-radar-legend button>span{min-width:0}
.la-radar-legend img{width:38px;height:50px;flex:none}
.la-radar-legend strong{font-size:14px;overflow-wrap:anywhere}
.la-radar-legend small{font-size:10px;margin-block:3px 5px}
.la-radar-legend b{font-size:16px}
.la-radar-legend em{font-size:10px}
.la-radar-legend p,.la-radar-note{font-size:11px}
.la-radar-legend p{margin:2px 0 0}
.la-radar-note{max-width:680px;margin:8px auto 0;color:#8d9f92}
@container(max-width:560px){
 .la-radar-layout{grid-template-columns:minmax(0,1fr);gap:12px;min-height:0;padding:0}
 .la-radar-svg{height:auto;max-height:350px}
 .la-radar-svg text{font-size:20px}
 .la-radar-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .la-radar-legend button{position:relative;flex-direction:column;text-align:center;gap:5px;padding:10px 4px}
 .la-radar-legend img{width:38px;height:46px}
 .la-radar-legend strong{font-size:12px}
 .la-radar-legend i{position:absolute;top:9px;right:9px}
 .la-radar-legend p{grid-column:1/-1;font-size:11px;text-align:center}
 .la-radar-note{text-align:center;font-size:11px}
}
/* Compare table: no remove buttons or prices under the players; every row label stays on one line. */
.la-compare-table :is(tbody,tfoot) th{white-space:nowrap}
.la-compare-table tfoot th small{white-space:nowrap}
.la-person{min-height:0}
.la-compare-table :is(tbody,tfoot) th{padding-right:12px}
@media(max-width:760px){.la-compare-table th:first-child{width:112px}}
.la-person>span{white-space:nowrap}@media(max-width:380px){.la-person>span b{font-size:17px}.la-person>span{font-size:9px}}
/* Tabs: one row; on narrow screens it scrolls sideways (no scrollbar). Neutral selection, no lime frame. */
.la-tabs{display:flex!important;flex-wrap:nowrap!important;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.la-tabs::-webkit-scrollbar{display:none}
.la-tabs button{flex:none;white-space:nowrap;scroll-snap-align:start}
.la-tabs button[aria-pressed=true]{color:#fff;background:#ffffff14}
.la-tabs button:focus-visible{outline:1.5px solid #ffffff59;outline-offset:2px}
@media(max-width:760px){.la-tabs button{padding:9px 12px!important;font-size:12px!important;text-align:center}}
