halanam/ncaa-rapm
0
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<meta name="description" content="College basketball roster-building dashboard powered by RAPM player data.">7<title>College Basketball RAPM Lab</title>8<link rel="preconnect" href="https://fonts.googleapis.com">9<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@400;500;600;700&family=Teko:wght@500;600;700&display=swap" rel="stylesheet">10<style>11 :root{12 --game-bg:#060b14;13 --panel-bg:#0b1420;14 --neon-green:#39ff88;15 --neon-cyan:#00e5ff;16 --neon-red:#ff2d55;17 --neon-amber:#f59e0b;18 --border-dim:rgba(57,255,136,0.14);19 }20 *{box-sizing:border-box;}21 body{margin:0;background:var(--game-bg);color:#c8dcd4;font-family:'Rajdhani',sans-serif;height:100vh;overflow:hidden;}22 .app{display:flex;flex-direction:column;height:100vh;}23 24 .topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border-dim);background:var(--panel-bg);flex-shrink:0;}25 .brand{display:flex;align-items:center;gap:10px;}26 .brand-mark{width:32px;height:32px;border-radius:4px;background:rgba(57,255,136,0.10);border:1px solid rgba(57,255,136,0.3);display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-weight:800;color:var(--neon-green);font-size:13px;}27 .brand-title{font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:0.07em;font-size:13px;color:var(--neon-green);text-shadow:0 0 10px rgba(57,255,136,0.35);}28 .brand-sub{font-size:10.5px;color:rgba(57,255,136,0.4);letter-spacing:0.04em;}29 .mock-tag{font-size:11px;font-weight:700;padding:5px 10px;border-radius:4px;background:rgba(245,158,11,0.08);color:#f5c26b;border:1px solid rgba(245,158,11,0.25);letter-spacing:0.04em;}30 31 .board{flex:1;display:flex;overflow:hidden;}32 .squad-panel{width:360px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border-dim);background:var(--panel-bg);}33 .market-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;}34 35 .squad-head{padding:14px 16px;border-bottom:1px solid var(--border-dim);flex-shrink:0;}36 .squad-head .row1{display:flex;justify-content:space-between;align-items:baseline;}37 .team-name{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--neon-green);letter-spacing:0.05em;}38 .fill-count{font-size:11px;color:rgba(57,255,136,0.4);font-weight:700;}39 40 .stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-dim);flex-shrink:0;}41 .stat-card{background:rgba(6,11,20,0.6);border:1px solid var(--border-dim);border-radius:4px;padding:8px 6px;text-align:center;}42 .stat-card .v{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;}43 .stat-card .l{font-size:9px;font-weight:700;letter-spacing:0.06em;color:rgba(57,255,136,0.4);text-transform:uppercase;margin-top:2px;}44 .stat-card.off .v{color:var(--neon-green);}45 .stat-card.def .v{color:var(--neon-cyan);}46 .stat-card.net .v{color:#e8f5ee;}47 48 .slots-scroll{flex:1;overflow-y:auto;padding:10px 16px;}49 .group-label{font-size:10px;font-weight:700;letter-spacing:0.1em;color:rgba(57,255,136,0.35);text-transform:uppercase;margin:12px 0 6px;}50 .group-label:first-child{margin-top:0;}51 .slot{border-radius:4px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--border-dim);cursor:pointer;transition:border-color .15s;}52 .slot:hover{border-color:rgba(57,255,136,0.35);}53 .slot.selected{border-color:var(--neon-green);background:rgba(57,255,136,0.05);}54 .slot.empty{display:flex;align-items:center;justify-content:space-between;color:rgba(57,255,136,0.3);font-size:12px;font-weight:600;}55 .slot.filled{display:flex;align-items:center;justify-content:space-between;gap:12px;}56 .slot .info{min-width:0;flex:1 1 auto;}57 .slot .pname{font-weight:700;font-size:13px;color:#e8f5ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}58 .slot .meta{font-size:10.5px;color:#9ab8a8;}59 .slot .metrics{text-align:right;flex-shrink:0;font-family:'Orbitron',sans-serif;font-size:11px;}60 .slot .metrics .r{color:#e8f5ee;font-weight:700;}61 .slot .metrics .sub{font-size:9px;color:rgba(57,255,136,0.4);font-weight:600;}62 .slot-remove{background:none;border:none;color:rgba(255,45,85,0.5);cursor:pointer;font-size:14px;padding:2px 4px;flex-shrink:0;}63 .slot-remove:hover{color:var(--neon-red);}64 .slot-plus{color:rgba(57,255,136,0.35);font-weight:700;}65 66 .warn-banner{margin:0 16px 12px;padding:8px 10px;border-radius:4px;font-size:11px;font-weight:700;flex-shrink:0;}67 .warn-banner.bad{background:rgba(255,45,85,0.07);color:#ff8a9d;border:1px solid rgba(255,45,85,0.25);}68 .warn-banner.good{background:rgba(57,255,136,0.07);color:var(--neon-green);border:1px solid rgba(57,255,136,0.25);}69 70 .market-toolbar{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-dim);flex-shrink:0;flex-wrap:wrap;}71 input[type=text]{background:rgba(6,11,20,0.9);border:1px solid rgba(57,255,136,0.18);color:#e8f5ee;border-radius:4px;padding:8px 10px;font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;}72 input[type=text]:focus{outline:none;border-color:rgba(57,255,136,0.5);}73 #marketSearch{flex:1;min-width:160px;}74 .pos-filter-row{display:flex;gap:6px;}75 .chip{padding:6px 11px;border-radius:4px;font-family:'Rajdhani',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.02em;background:transparent;color:rgba(57,255,136,0.5);border:1px solid rgba(57,255,136,0.16);cursor:pointer;transition:all .15s;white-space:nowrap;}76 .chip:hover{border-color:rgba(57,255,136,0.4);color:rgba(57,255,136,0.8);}77 .chip.active{background:rgba(57,255,136,0.12);color:var(--neon-green);border-color:rgba(57,255,136,0.4);}78 .scout-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:4px;background:rgba(0,229,255,0.08);color:var(--neon-cyan);border:1px solid rgba(0,229,255,0.3);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.04em;cursor:pointer;}79 .scout-btn:hover{background:rgba(0,229,255,0.14);}80 81 .slotting-banner{padding:7px 16px;font-size:11.5px;font-weight:700;color:var(--neon-green);background:rgba(57,255,136,0.05);border-bottom:1px solid var(--border-dim);display:flex;align-items:center;gap:10px;flex-shrink:0;}82 .slotting-banner a{color:rgba(255,45,85,0.7);cursor:pointer;font-size:10.5px;text-decoration:underline;}83 84 .table-scroll{flex:1;overflow-y:auto;}85 table{width:100%;border-collapse:collapse;}86 thead th{position:sticky;top:0;background:var(--panel-bg);text-align:left;padding:9px 14px;font-size:10px;font-weight:700;letter-spacing:0.07em;color:rgba(57,255,136,0.45);text-transform:uppercase;border-bottom:1px solid var(--border-dim);white-space:nowrap;}87 thead th.num{text-align:right;}88 tbody td{padding:9px 14px;font-size:13px;border-bottom:1px solid rgba(57,255,136,0.06);white-space:nowrap;}89 tbody tr:hover{background:rgba(57,255,136,0.03);}90 tbody td.num{text-align:right;font-family:'Orbitron',sans-serif;font-weight:600;font-size:12px;}91 .pname2{font-weight:700;color:#e8f5ee;}92 .team-cell{color:#9ab8a8;font-size:12px;}93 .pos-pill{display:inline-block;padding:2px 7px;border-radius:3px;font-size:10px;font-weight:700;background:rgba(0,229,255,0.08);color:var(--neon-cyan);border:1px solid rgba(0,229,255,0.2);}94 .add-btn{padding:6px 11px;border-radius:4px;font-size:10.5px;font-weight:700;background:rgba(57,255,136,0.10);color:var(--neon-green);border:1px solid rgba(57,255,136,0.3);cursor:pointer;letter-spacing:0.03em;}95 .add-btn:hover{background:rgba(57,255,136,0.18);}96 .add-btn:disabled{background:rgba(57,255,136,0.03);color:rgba(57,255,136,0.2);border-color:rgba(57,255,136,0.08);cursor:not-allowed;}97 98 .overlay{position:fixed;inset:0;background:rgba(2,5,10,0.85);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:30px 20px;overflow-y:auto;}99 .overlay.open{display:flex;}100 .modal{width:100%;max-width:960px;background:var(--panel-bg);border:1px solid rgba(57,255,136,0.25);border-radius:4px;overflow:hidden;}101 .modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-dim);}102 .modal-head .t{font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;color:var(--neon-green);letter-spacing:0.06em;display:flex;align-items:center;gap:8px;}103 .modal-close{background:none;border:1px solid rgba(57,255,136,0.2);color:rgba(57,255,136,0.6);width:28px;height:28px;border-radius:4px;cursor:pointer;font-size:14px;}104 .modal-close:hover{color:var(--neon-green);border-color:rgba(57,255,136,0.5);}105 .modal-body{display:flex;max-height:78vh;}106 .modal-filters{width:320px;flex-shrink:0;border-right:1px solid var(--border-dim);overflow-y:auto;padding:14px;}107 .modal-results{flex:1;overflow-y:auto;display:flex;flex-direction:column;}108 109 .m-section{background:rgba(6,11,20,0.5);border:1px solid var(--border-dim);border-radius:4px;padding:12px;margin-bottom:12px;}110 .m-section-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-family:'Orbitron',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:0.06em;color:var(--neon-green);}111 112 .metric-row{padding:9px 0;border-bottom:1px solid rgba(57,255,136,0.06);}113 .metric-row:last-child{border-bottom:none;}114 .metric-row-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}115 .metric-row-head .name{font-size:12.5px;font-weight:700;color:#9ab8a8;}116 .metric-vals{display:flex;justify-content:space-between;font-size:10.5px;color:rgba(57,255,136,0.5);font-family:'Orbitron',sans-serif;margin-top:4px;}117 118 .dual-range{position:relative;height:16px;}119 .dual-range-track{position:absolute;top:6.5px;left:0;right:0;height:3px;background:rgba(57,255,136,0.15);border-radius:2px;}120 .dual-range-fill{position:absolute;top:6.5px;height:3px;background:var(--neon-green);border-radius:2px;}121 .dual-range input[type=range]{position:absolute;top:0;left:0;width:100%;margin:0;height:16px;background:transparent;-webkit-appearance:none;pointer-events:none;}122 .dual-range input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--neon-green);box-shadow:0 0 6px rgba(57,255,136,.6);cursor:pointer;margin-top:1px;}123 .dual-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--neon-green);border:none;cursor:pointer;}124 .dual-range input[type=range]::-webkit-slider-runnable-track{background:transparent;}125 .dual-range input[type=range]::-moz-range-track{background:transparent;}126 127 .calc-btn{width:100%;padding:11px;border-radius:4px;background:rgba(57,255,136,0.12);color:var(--neon-green);border:1px solid rgba(57,255,136,0.4);font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:0.06em;cursor:pointer;}128 .calc-btn:hover{background:rgba(57,255,136,0.2);}129 130 .results-summary{padding:10px 16px;border-bottom:1px solid var(--border-dim);font-size:12px;color:#9ab8a8;flex-shrink:0;}131 .results-summary b{color:var(--neon-green);}132 .results-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:rgba(57,255,136,0.3);font-size:12.5px;font-weight:600;padding:40px;text-align:center;}133 134 .search-result-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(57,255,136,0.06);background:rgba(6,11,20,0.6);cursor:pointer;}135 .search-result-row:hover{background:rgba(57,255,136,0.06);}136 .search-result-row .name{font-size:12.5px;font-weight:700;color:#e8f5ee;}137 .search-result-row .full{font-size:9.5px;color:rgba(57,255,136,0.4);}138 .search-result-row .add-icon{color:rgba(57,255,136,0.5);font-size:15px;font-weight:700;flex-shrink:0;}139 .no-match{padding:10px;text-align:center;font-size:10.5px;color:rgba(57,255,136,0.3);font-weight:700;}140 141 .mode-toggle{display:flex;gap:4px;}142 .mode-toggle button{padding:3px 8px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:0.04em;background:transparent;color:rgba(57,255,136,0.3);border:1px solid rgba(57,255,136,0.1);cursor:pointer;}143 .mode-toggle button.active{background:rgba(57,255,136,0.12);color:var(--neon-green);border-color:rgba(57,255,136,0.35);}144 .match-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}145 .match-row label{font-size:10px;color:rgba(57,255,136,0.4);font-weight:700;white-space:nowrap;}146 .match-input{width:60px;background:rgba(6,11,20,0.9);border:1px solid rgba(57,255,136,0.18);color:#e8f5ee;border-radius:4px;padding:5px 6px;font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:700;text-align:center;}147 .match-input:focus{outline:none;border-color:rgba(57,255,136,0.5);}148 .match-range-readout{font-size:10px;color:rgba(57,255,136,0.35);font-family:'Orbitron',sans-serif;margin-top:2px;}149 .remove-metric{background:none;border:none;color:inherit;cursor:pointer;font-size:11px;margin-left:4px;}150</style>151<style>152 :root{153 --game-bg:#080b12;--panel-bg:#101722;--panel-deep:#0b1019;154 --ink:#eef4fb;--muted:#8393a8;--muted-2:#53647a;155 --blue:#2d7dff;--blue-bright:#59a6ff;--gold:#f3b63f;--gold-hot:#ffd36a;156 --red:#ef5b60;--green:#45d39b;--border-dim:rgba(159,181,211,.16);157 }158 html{background:var(--game-bg);}159 body{160 background:radial-gradient(circle at 74% 12%,rgba(45,125,255,.13),transparent 28rem),161 radial-gradient(circle at 16% 98%,rgba(239,91,96,.08),transparent 24rem),var(--game-bg);162 color:var(--ink);font-family:'Inter',sans-serif;163 }164 button,input{font:inherit;}165 button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}166 .app{position:relative;isolation:isolate;overflow:hidden;}167 .app::before{168 content:"";position:absolute;inset:0;z-index:-2;opacity:.46;pointer-events:none;169 background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 74px),170 repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 74px),171 linear-gradient(112deg,transparent 0 42%,rgba(255,255,255,.04) 42.1% 42.45%,transparent 42.55%);172 }173 .app::after{174 content:"";position:absolute;right:-8vw;bottom:-20vh;width:64vw;height:50vh;z-index:-1;175 opacity:.17;pointer-events:none;transform:skewX(-22deg) rotate(-8deg);176 background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(243,182,63,.24) 49px 50px,transparent 51px 99px),177 linear-gradient(90deg,transparent,rgba(243,182,63,.18),transparent);178 border-top:1px solid rgba(243,182,63,.36);179 }180 .topbar{181 padding:15px 22px 14px;background:linear-gradient(105deg,rgba(16,23,34,.98),rgba(12,18,29,.95));182 border-bottom:1px solid var(--border-dim);box-shadow:0 8px 28px rgba(0,0,0,.28);position:relative;183 }184 .topbar::after{185 content:"";position:absolute;left:0;bottom:-1px;width:42%;height:3px;186 background:linear-gradient(90deg,var(--gold),var(--blue),transparent);clip-path:polygon(0 0,100% 0,94% 100%,0 100%);187 }188 .brand{gap:12px;}189 .brand-mark{190 width:38px;height:38px;border-radius:7px 2px 7px 2px;background:linear-gradient(145deg,var(--blue),#17469d);191 border:1px solid rgba(130,188,255,.6);font-family:'Teko',sans-serif;font-size:26px;line-height:1;192 box-shadow:inset 0 1px rgba(255,255,255,.3),0 5px 18px rgba(45,125,255,.24);193 }194 .brand-title{font-family:'Oswald',sans-serif;font-size:17px;color:var(--ink);letter-spacing:.09em;text-shadow:none;}195 .brand-sub{font-size:10px;color:var(--muted);letter-spacing:.11em;text-transform:uppercase;margin-top:3px;}196 .mock-tag{font-family:'Oswald',sans-serif;color:var(--gold-hot);background:rgba(243,182,63,.09);border-color:rgba(243,182,63,.3);letter-spacing:.08em;text-transform:uppercase;transform:skewX(-10deg);}197 .squad-panel{background:linear-gradient(180deg,rgba(16,23,34,.96),rgba(11,16,25,.94));}198 .squad-head{199 padding:16px 18px 13px;background:linear-gradient(135deg,rgba(45,125,255,.16),transparent 52%),200 repeating-linear-gradient(120deg,transparent 0 20px,rgba(255,255,255,.025) 21px 22px);201 }202 .team-name{font-family:'Oswald',sans-serif;font-size:18px;color:var(--ink);letter-spacing:.08em;}203 .team-name::before{content:"// ";color:var(--gold);}204 .fill-count{font-family:'Teko',sans-serif;font-size:17px;color:var(--gold-hot);}205 .stat-cards{padding:13px 18px 15px;background:rgba(6,10,17,.22);}206 .stat-card{207 background:linear-gradient(160deg,rgba(33,46,65,.72),rgba(9,14,22,.9));border-color:var(--border-dim);208 border-radius:5px;box-shadow:inset 0 1px rgba(255,255,255,.04);position:relative;overflow:hidden;209 }210 .stat-card::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;background:var(--blue);}211 .stat-card .v{font-family:'Teko',sans-serif;font-size:29px;line-height:.88;color:var(--gold-hot);}212 .stat-card .l{font-family:'Oswald',sans-serif;font-size:9px;color:var(--muted);letter-spacing:.11em;margin-top:7px;}213 .stat-card.def .v{color:var(--blue-bright);}214 .stat-card.net .v{color:var(--green);}215 .stat-card.net::after{background:var(--green);}216 .slots-scroll{padding:12px 18px;}217 .group-label{font-family:'Oswald',sans-serif;font-size:11px;color:var(--gold);letter-spacing:.15em;margin:14px 0 7px;display:flex;gap:8px;align-items:center;}218 .group-label::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(243,182,63,.35),transparent);}219 .slot{padding:9px 10px;background:rgba(21,30,43,.65);border-color:rgba(159,181,211,.13);transition:transform .16s,border-color .16s,background .16s;}220 .slot:hover{border-color:rgba(74,143,255,.7);background:rgba(32,49,74,.7);transform:translateX(2px);}221 .slot.selected{border-color:var(--gold);background:linear-gradient(90deg,rgba(243,182,63,.13),rgba(45,125,255,.08));}222 .slot.empty{color:var(--muted-2);}223 .slot .pname{font-size:12px;color:var(--ink);}224 .slot .meta{font-size:10px;color:var(--muted);margin-top:3px;}225 .slot .metrics{font-family:'Teko',sans-serif;font-size:17px;line-height:.9;}226 .slot .metrics .r{color:var(--gold-hot);}227 .slot .metrics .sub{font-family:'Oswald',sans-serif;font-size:8px;color:var(--muted);letter-spacing:.08em;margin-top:3px;}228 .slot-plus{color:var(--blue-bright);font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.08em;}229 .warn-banner{margin:0 18px 14px;padding:9px 11px;font-size:10px;letter-spacing:.03em;}230 .warn-banner.bad{background:rgba(239,91,96,.1);color:#ff9a9d;border-color:rgba(239,91,96,.28);}231 .warn-banner.good{background:rgba(69,211,155,.1);color:var(--green);border-color:rgba(69,211,155,.28);}232 .market-toolbar{padding:15px 18px 13px;background:rgba(13,19,29,.86);}233 input[type=text]{background:rgba(5,9,15,.8);border-color:rgba(159,181,211,.2);color:var(--ink);font-family:'Inter',sans-serif;font-size:12px;}234 input[type=text]::placeholder{color:#607087;}235 input[type=text]:focus{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(45,125,255,.12);}236 .chip{border-radius:3px;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.07em;background:rgba(255,255,255,.02);color:var(--muted);border-color:rgba(159,181,211,.2);}237 .chip:hover{border-color:var(--blue-bright);color:var(--ink);}238 .chip.active{background:rgba(45,125,255,.18);color:#d8eaff;border-color:rgba(89,166,255,.7);box-shadow:inset 0 -2px var(--blue);}239 .scout-btn{padding:9px 15px;border-radius:3px;background:linear-gradient(135deg,#2b72dd,#17469d);color:#fff;border-color:rgba(118,183,255,.62);font-family:'Oswald',sans-serif;letter-spacing:.1em;box-shadow:0 5px 16px rgba(45,125,255,.22);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}240 .scout-btn:hover{background:linear-gradient(135deg,#3d8aff,#1e57bb);}241 .slotting-banner{padding:8px 18px;font-family:'Oswald',sans-serif;font-size:11px;color:var(--gold-hot);background:rgba(243,182,63,.08);border-color:rgba(243,182,63,.2);letter-spacing:.08em;}242 .slotting-banner a{color:var(--red);}243 .table-scroll{overflow:auto;}244 table{border-collapse:separate;border-spacing:0;}245 thead th{z-index:2;background:linear-gradient(180deg,#1a2636,#131c29);padding:10px 14px;font-family:'Oswald',sans-serif;color:#8fa8c5;letter-spacing:.12em;border-bottom-color:rgba(89,166,255,.3);box-shadow:0 3px 10px rgba(0,0,0,.16);}246 tbody td{padding:10px 14px;font-size:12px;background:rgba(10,15,23,.2);border-bottom-color:rgba(159,181,211,.08);}247 tbody tr:hover{background:linear-gradient(90deg,rgba(45,125,255,.12),rgba(243,182,63,.04));}248 tbody tr:hover td{background:transparent;}249 tbody td.num{font-family:'Teko',sans-serif;font-size:17px;}250 .pname2{color:var(--ink);}251 .team-cell{color:var(--muted);font-size:11px;}252 .pos-pill{min-width:25px;padding:3px 7px;border-radius:3px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.07em;background:rgba(45,125,255,.13);color:var(--blue-bright);border-color:rgba(89,166,255,.3);}253 .market-panel table tbody td:nth-child(7),.modal-results table tbody td:nth-last-child(2){254 color:var(--gold-hot);background:linear-gradient(90deg,rgba(69,211,155,.13),rgba(243,182,63,.12),rgba(239,91,96,.08));255 text-shadow:0 0 12px rgba(243,182,63,.22);256 }257 .add-btn{border-radius:3px;font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.08em;background:rgba(69,211,155,.1);color:var(--green);border-color:rgba(69,211,155,.34);}258 .add-btn:hover{background:rgba(69,211,155,.2);border-color:var(--green);}259 .add-btn:disabled{background:rgba(159,181,211,.03);color:#53647a;border-color:rgba(159,181,211,.12);}260 .overlay{background:rgba(2,5,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:34px 14px;}261 .modal{max-width:1400px;background:linear-gradient(145deg,rgba(24,34,49,.96),rgba(10,15,23,.97));border-color:rgba(89,166,255,.42);border-radius:7px;box-shadow:0 18px 55px rgba(0,0,0,.34),0 0 0 1px rgba(243,182,63,.08);}262 .modal-head{padding:15px 19px;background:linear-gradient(105deg,rgba(45,125,255,.18),transparent 70%);}263 .modal-head .t{font-family:'Oswald',sans-serif;font-size:16px;color:var(--ink);letter-spacing:.1em;}264 .modal-close{background:rgba(239,91,96,.08);border-color:rgba(239,91,96,.35);color:#ff9a9d;width:30px;height:30px;font-size:18px;}265 .modal-close:hover{color:#fff;background:rgba(239,91,96,.2);border-color:var(--red);}266 .modal-filters{width:338px;padding:15px;background:rgba(6,10,17,.3);}267 .modal-results{overflow:hidden;}268 .m-section{background:rgba(12,18,28,.64);border-color:rgba(159,181,211,.15);border-radius:5px;padding:13px;box-shadow:inset 0 1px rgba(255,255,255,.03);}269 .m-section-head{font-family:'Oswald',sans-serif;font-size:12px;color:var(--gold-hot);letter-spacing:.12em;margin-bottom:10px;}270 .m-section-head::before{content:"";display:inline-block;width:4px;height:14px;background:var(--blue);transform:skewX(-18deg);margin-right:7px;vertical-align:-2px;}271 .metric-row{padding:10px 0;border-bottom-color:rgba(159,181,211,.1);}272 .metric-row-head .name{font-family:'Oswald',sans-serif;font-size:13px;color:#c0cede;letter-spacing:.05em;}273 .metric-vals{font-family:'Teko',sans-serif;color:var(--blue-bright);letter-spacing:.04em;}274 .dual-range-track{height:4px;top:6px;background:#26354b;}275 .dual-range-fill{top:6px;height:4px;background:linear-gradient(90deg,var(--blue),var(--gold));box-shadow:0 0 10px rgba(45,125,255,.34);}276 .dual-range input[type=range]::-webkit-slider-thumb{width:15px;height:15px;margin-top:0.5px;background:var(--gold-hot);border:2px solid #182333;box-shadow:0 0 0 1px var(--gold),0 0 8px rgba(243,182,63,.52);}277 .dual-range input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--gold-hot);border:2px solid #182333;box-shadow:0 0 0 1px var(--gold),0 0 8px rgba(243,182,63,.52);}278 .calc-btn{padding:12px;border-radius:3px;background:linear-gradient(135deg,#2b72dd,#17469d);color:#fff;border:1px solid rgba(118,183,255,.62);font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:.12em;box-shadow:0 7px 17px rgba(45,125,255,.22);clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}279 .calc-btn:hover{background:linear-gradient(135deg,#3d8aff,#1e57bb);}280 .results-summary{padding:11px 17px;background:rgba(45,125,255,.05);color:var(--muted);}281 .results-summary b{color:var(--gold-hot);font-family:'Teko',sans-serif;font-size:18px;}282 .results-empty{color:var(--muted-2);}283 .search-result-row{padding:9px 10px;background:rgba(6,11,20,.56);border-bottom-color:rgba(159,181,211,.08);}284 .search-result-row:hover{background:rgba(45,125,255,.12);}285 .search-result-row .name{color:var(--ink);}.search-result-row .full{color:var(--muted);}.search-result-row .add-icon{color:var(--gold);}286 .mode-toggle button{font-family:'Oswald',sans-serif;color:var(--muted-2);border-color:rgba(159,181,211,.14);}287 .mode-toggle button.active{background:rgba(45,125,255,.17);color:var(--blue-bright);border-color:rgba(74,143,255,.38);}288 .match-row label{font-family:'Oswald',sans-serif;color:var(--muted);letter-spacing:.06em;}289 .match-input{background:rgba(5,9,15,.8);border-color:rgba(159,181,211,.2);color:var(--ink);font-family:'Teko',sans-serif;font-size:15px;}290 .match-range-readout{font-family:'Teko',sans-serif;color:var(--blue-bright);}291 @media (max-width:820px){292 body{overflow:auto}.app{height:auto;min-height:100vh;overflow:visible}.topbar{padding:13px 15px}.mock-tag{display:none}293 .board{flex-direction:column;overflow:visible}.squad-panel{width:100%;min-height:390px;border-right:0;border-bottom:1px solid var(--border-dim)}294 .market-panel{height:620px}.modal-body{flex-direction:column;max-height:none}.modal-filters{width:100%;max-height:48vh;border-right:0;border-bottom:1px solid var(--border-dim)}.modal-results{min-height:380px}295 }296 @media (max-width:520px){297 .brand-title{font-size:14px}.brand-sub{font-size:8px}.market-toolbar{padding:12px}.market-toolbar #marketSearch{flex-basis:100%}298 thead th,tbody td{padding-left:10px;padding-right:10px}.table-scroll{overflow-x:auto}.overlay{padding:12px 8px}299 }300</style>301<style>302 /* Final polish and resilient states. The original hooks and layout remain intact. */303 :root{304 --surface-line:rgba(159,181,211,.13);305 --status-live:#45d39b;306 --status-warn:#ffd36a;307 }308 .board,.market-panel,.squad-panel,.table-scroll,.slots-scroll{min-height:0;min-width:0;}309 .topbar{z-index:3;}310 .topbar-actions{display:flex;align-items:center;gap:12px;}311 .data-status{312 display:inline-flex;align-items:center;gap:7px;min-height:27px;padding:5px 9px;313 color:var(--muted);border:1px solid var(--surface-line);background:rgba(5,9,15,.42);314 font:600 10px/1 'Oswald',sans-serif;letter-spacing:.09em;text-transform:uppercase;315 }316 .status-dot{width:7px;height:7px;border-radius:50%;background:var(--status-warn);box-shadow:0 0 0 3px rgba(255,211,106,.09);}317 .data-status.ready{color:#b8f4df;border-color:rgba(69,211,155,.3);}318 .data-status.ready .status-dot{background:var(--status-live);box-shadow:0 0 0 3px rgba(69,211,155,.12);}319 .data-status.error{color:#ffb1b1;border-color:rgba(239,91,96,.35);}320 .data-status.error .status-dot{background:var(--red);box-shadow:0 0 0 3px rgba(239,91,96,.12);}321 .market-toolbar{position:relative;}322 .market-toolbar::before{323 content:"PLAYER MARKETPLACE";position:absolute;left:18px;top:-8px;padding:0 5px;324 color:var(--muted-2);background:var(--game-bg);font:600 9px/1 'Oswald',sans-serif;letter-spacing:.16em;325 }326 .table-scroll{scrollbar-color:#30445f #0b1019;scrollbar-width:thin;}327 .slots-scroll{scrollbar-color:#30445f #0b1019;scrollbar-width:thin;}328 .modal-filters{scrollbar-color:#30445f #0b1019;scrollbar-width:thin;}329 .modal-results{scrollbar-color:#30445f #0b1019;scrollbar-width:thin;}330 .state-row td{padding:44px 20px!important;text-align:center;color:var(--muted);font:600 12px/1.6 'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;}331 .state-row .state-title{display:block;color:var(--gold-hot);font-size:15px;letter-spacing:.1em;margin-bottom:5px;}332 .state-row .state-detail{display:block;color:var(--muted);font:400 11px/1.5 'Inter',sans-serif;letter-spacing:0;text-transform:none;}333 .warn-banner.bad{line-height:1.5;}334 .warn-banner.bad strong{color:#ffd1d1;}335 .modal[role="dialog"]{outline:none;}336 .modal-close{line-height:1;}337 .brand-mark.brand-logo{338 width:78px;height:58px;padding:0;border:0;border-radius:0;background:transparent;339 box-shadow:none;overflow:visible;flex-shrink:0;340 }341 .brand-logo img{display:block;width:100%;height:100%;object-fit:contain;}342 .theme-toggle{343 min-height:27px;padding:5px 9px;border:1px solid var(--surface-line);border-radius:3px;344 background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;345 font:600 10px/1 'Oswald',sans-serif;letter-spacing:.09em;346 }347 .theme-toggle:hover{color:var(--ink);border-color:var(--blue-bright);}348 .topbar-select{349 min-height:27px;padding:5px 9px;border:1px solid var(--surface-line);border-radius:3px;350 background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;351 font:600 10px/1 'Oswald',sans-serif;letter-spacing:.07em;max-width:170px;352 }353 .topbar-select:hover{color:var(--ink);border-color:var(--blue-bright);}354 .topbar-select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}355 body.light-theme .topbar-select{background:#fff;color:var(--muted);border-color:var(--surface-line);}356 body.light-theme .topbar-select:hover{color:var(--ink);border-color:var(--blue-bright);}357 body.light-theme{358 --game-bg:#edf1f6;--panel-bg:#ffffff;--panel-deep:#f6f8fb;359 --ink:#172234;--muted:#617087;--muted-2:#8795a8;360 --blue:#245baa;--blue-bright:#2f74d0;--gold:#ad690f;--gold-hot:#8b5100;361 --red:#bd4650;--green:#17835f;--border-dim:rgba(35,61,94,.17);362 --neon-green:#17835f;--neon-cyan:#2364b8;--neon-red:#bd4650;363 --surface-line:rgba(35,61,94,.18);--status-live:#17835f;--status-warn:#ad690f;364 background:radial-gradient(circle at 74% 8%,rgba(74,132,211,.15),transparent 28rem),365 radial-gradient(circle at 12% 100%,rgba(189,70,80,.08),transparent 24rem),var(--game-bg);366 color:var(--ink);367 }368 body.light-theme .app::before{369 opacity:.5;370 background:repeating-linear-gradient(90deg,rgba(30,58,91,.045) 0 1px,transparent 1px 74px),371 repeating-linear-gradient(0deg,rgba(30,58,91,.035) 0 1px,transparent 1px 74px),372 linear-gradient(112deg,transparent 0 42%,rgba(30,58,91,.06) 42.1% 42.45%,transparent 42.55%);373 }374 body.light-theme .app::after{375 opacity:.2;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(173,105,15,.22) 49px 50px,transparent 51px 99px),376 linear-gradient(90deg,transparent,rgba(173,105,15,.12),transparent);377 border-top-color:rgba(173,105,15,.3);378 }379 body.light-theme .topbar{380 background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(244,247,251,.97));381 border-bottom-color:var(--border-dim);box-shadow:0 8px 28px rgba(30,49,74,.12);382 }383 body.light-theme .brand-mark.brand-logo{384 width:92px;height:62px;padding:5px 8px;border:1px solid rgba(54,101,163,.38);385 border-radius:6px 2px 6px 2px;background:linear-gradient(145deg,#1d477e,#102746);386 box-shadow:inset 0 1px rgba(255,255,255,.25),0 5px 16px rgba(30,71,126,.18);387 }388 body.light-theme .brand-title{color:var(--ink);}389 body.light-theme .brand-sub{color:var(--muted);}390 body.light-theme .mock-tag{color:#7a4800;background:rgba(173,105,15,.1);border-color:rgba(173,105,15,.3);}391 body.light-theme .data-status{color:var(--muted);background:rgba(255,255,255,.62);}392 body.light-theme .data-status.ready{color:#116d50;}393 body.light-theme .data-status.error{color:#a1323a;}394 body.light-theme .squad-panel{background:linear-gradient(180deg,#ffffff,#f7f9fc);border-right-color:var(--border-dim);}395 body.light-theme .squad-head{396 background:linear-gradient(135deg,rgba(47,116,208,.13),transparent 52%),397 repeating-linear-gradient(120deg,transparent 0 20px,rgba(35,61,94,.035) 21px 22px);398 }399 body.light-theme .team-name{color:var(--ink);}400 body.light-theme .fill-count{color:var(--gold-hot);}401 body.light-theme .stat-cards{background:rgba(231,237,245,.5);}402 body.light-theme .stat-card{403 background:linear-gradient(160deg,#ffffff,#edf2f8);border-color:var(--border-dim);404 box-shadow:inset 0 1px rgba(255,255,255,.8),0 3px 9px rgba(30,49,74,.06);405 }406 body.light-theme .stat-card .v{color:var(--gold-hot);}407 body.light-theme .stat-card.def .v{color:var(--blue);}408 body.light-theme .stat-card.net .v{color:var(--green);}409 body.light-theme .stat-card .l{color:var(--muted);}410 body.light-theme .group-label{color:var(--gold);}411 body.light-theme .slot{background:rgba(255,255,255,.84);border-color:rgba(35,61,94,.14);box-shadow:0 2px 5px rgba(30,49,74,.035);}412 body.light-theme .slot:hover{border-color:rgba(47,116,208,.65);background:#f0f6ff;box-shadow:0 4px 12px rgba(47,116,208,.1);}413 body.light-theme .slot.selected{border-color:var(--gold);background:linear-gradient(90deg,rgba(173,105,15,.13),rgba(47,116,208,.08));}414 body.light-theme .slot.empty{color:var(--muted-2);}415 body.light-theme .slot .pname,.light-theme .pname2{color:var(--ink);}416 body.light-theme .slot .meta,.light-theme .team-cell{color:var(--muted);}417 body.light-theme .slot .metrics .r{color:var(--gold-hot);}418 body.light-theme .slot-plus{color:var(--blue);}419 body.light-theme .warn-banner.bad{background:rgba(189,70,80,.08);color:#a1323a;border-color:rgba(189,70,80,.28);}420 body.light-theme .warn-banner.good{background:rgba(23,131,95,.08);color:#116d50;border-color:rgba(23,131,95,.28);}421 body.light-theme .market-toolbar{background:rgba(255,255,255,.9);border-bottom-color:var(--border-dim);}422 body.light-theme .market-toolbar::before{background:var(--game-bg);color:var(--muted-2);}423 body.light-theme input[type=text],body.light-theme .match-input{background:#fff;color:var(--ink);border-color:rgba(35,61,94,.22);}424 body.light-theme input[type=text]::placeholder{color:#8290a3;}425 body.light-theme input[type=text]:focus,body.light-theme .match-input:focus{border-color:var(--blue-bright);box-shadow:0 0 0 3px rgba(47,116,208,.12);}426 body.light-theme .chip{background:rgba(35,61,94,.025);color:var(--muted);border-color:rgba(35,61,94,.2);}427 body.light-theme .chip:hover{border-color:var(--blue-bright);color:var(--ink);}428 body.light-theme .chip.active{background:rgba(47,116,208,.13);color:#17477f;border-color:rgba(47,116,208,.58);}429 body.light-theme .scout-btn{background:linear-gradient(135deg,#2f74d0,#1d4f99);box-shadow:0 5px 16px rgba(47,116,208,.18);}430 body.light-theme .calc-btn{background:linear-gradient(135deg,#2f74d0,#1d4f99);box-shadow:0 5px 16px rgba(47,116,208,.18);color:#fff;border-color:rgba(118,183,255,.62);}431 body.light-theme .slotting-banner{background:rgba(173,105,15,.09);border-color:rgba(173,105,15,.22);color:#7a4800;}432 body.light-theme thead th{background:linear-gradient(180deg,#f1f5fa,#e5ebf3);color:#526984;border-bottom-color:rgba(47,116,208,.28);box-shadow:0 3px 10px rgba(30,49,74,.1);}433 body.light-theme tbody td{background:rgba(255,255,255,.7);border-bottom-color:rgba(35,61,94,.09);}434 body.light-theme tbody tr:hover{background:linear-gradient(90deg,rgba(47,116,208,.1),rgba(173,105,15,.05));}435 body.light-theme tbody tr:hover td{background:transparent;}436 body.light-theme .pos-pill{background:rgba(47,116,208,.1);color:#2364b8;border-color:rgba(47,116,208,.28);}437 body.light-theme .market-panel table tbody td:nth-child(7),body.light-theme .modal-results table tbody td:nth-last-child(2){438 color:#7a4b00;background:linear-gradient(90deg,rgba(23,131,95,.1),rgba(173,105,15,.12),rgba(189,70,80,.06));439 text-shadow:none;440 }441 body.light-theme .add-btn{background:rgba(23,131,95,.09);color:#116d50;border-color:rgba(23,131,95,.3);}442 body.light-theme .add-btn:hover{background:rgba(23,131,95,.16);border-color:var(--green);}443 body.light-theme .add-btn:disabled{background:rgba(35,61,94,.035);color:#8795a8;border-color:rgba(35,61,94,.12);}444 body.light-theme .overlay{background:rgba(21,35,54,.46);}445 body.light-theme .modal{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(241,245,249,.98));border-color:rgba(47,116,208,.42);box-shadow:0 18px 55px rgba(30,49,74,.25),0 0 0 1px rgba(173,105,15,.1);}446 body.light-theme .modal-head{background:linear-gradient(105deg,rgba(47,116,208,.13),transparent 70%);}447 body.light-theme .modal-head .t{color:var(--ink);}448 body.light-theme .modal-close{background:rgba(189,70,80,.07);color:#a1323a;}449 body.light-theme .modal-filters{background:rgba(231,237,245,.42);border-color:var(--border-dim);}450 body.light-theme .m-section{background:rgba(255,255,255,.72);border-color:rgba(35,61,94,.15);box-shadow:inset 0 1px rgba(255,255,255,.8);}451 body.light-theme .m-section-head{color:#7a4b00;}452 body.light-theme .metric-row{border-bottom-color:rgba(35,61,94,.1);}453 body.light-theme .metric-row-head .name{color:#43566f;}454 body.light-theme .metric-vals,.light-theme .match-range-readout{color:#2364b8;}455 body.light-theme .dual-range-track{background:#c7d3e2;}456 body.light-theme .dual-range-fill{background:linear-gradient(90deg,var(--blue),var(--gold));box-shadow:0 0 8px rgba(47,116,208,.22);}457 body.light-theme .mode-toggle button{color:#8795a8;border-color:rgba(35,61,94,.16);}458 body.light-theme .mode-toggle button.active{background:rgba(47,116,208,.12);color:#2364b8;border-color:rgba(47,116,208,.38);}459 body.light-theme .results-summary{background:rgba(47,116,208,.06);color:var(--muted);}460 body.light-theme .results-empty{color:var(--muted-2);}461 body.light-theme .search-result-row{background:rgba(255,255,255,.56);border-bottom-color:rgba(35,61,94,.08);}462 body.light-theme .search-result-row:hover{background:rgba(47,116,208,.1);}463 body.light-theme .search-result-row .name{color:var(--ink);}464 body.light-theme .search-result-row .full{color:var(--muted);}465 body.light-theme .search-result-row .add-icon{color:var(--gold);}466 body.light-theme .state-row .state-title{color:var(--gold-hot);}467 body.light-theme .state-row .state-detail{color:var(--muted);}468 /* Light scouting-screen treatment: clear rails and outlined data zones. */469 body.light-theme .board{background:#e6ecf3;}470 body.light-theme .squad-panel{471 background:linear-gradient(180deg,#fbfcfe,#eef3f8);472 border-right:1px solid #b8c6d6;473 box-shadow:inset -1px 0 rgba(255,255,255,.8);474 }475 body.light-theme .squad-head{476 border:1px solid #c0cedd;border-bottom:0;margin:12px 12px 0;padding:13px 14px 11px;477 background:linear-gradient(135deg,rgba(47,116,208,.11),rgba(255,255,255,.86) 68%);478 }479 body.light-theme .stat-cards{480 margin:0 12px;padding:10px 10px 12px;border:1px solid #c0cedd;border-top:1px dashed #c0cedd;481 background:#f4f7fb;482 }483 body.light-theme .stat-card{484 border-color:#c0cedd;border-radius:2px;box-shadow:none;485 background:linear-gradient(180deg,#fff,#edf2f7);486 }487 body.light-theme .slots-scroll{488 margin:0 12px;padding:10px 10px 12px;border:1px solid #c0cedd;border-top:0;489 background:rgba(246,249,252,.78);490 }491 body.light-theme .group-label{492 margin-top:13px;color:#8a570d;font-size:10px;493 }494 body.light-theme .slot{495 border-radius:2px;border-color:#c1cedc;background:#fff;box-shadow:none;496 }497 body.light-theme .slot:hover{transform:none;border-color:#5b91d3;background:#f4f8fe;box-shadow:none;}498 body.light-theme .slot.selected{499 border-color:#b17818;background:linear-gradient(90deg,rgba(173,105,15,.12),rgba(47,116,208,.08));500 box-shadow:inset 3px 0 #b17818;501 }502 body.light-theme .warn-banner{margin:0 12px 12px;border-radius:2px;}503 body.light-theme .market-panel{504 background:linear-gradient(180deg,#f3f6fa,#e8eef5);505 }506 body.light-theme .market-toolbar{507 margin:12px 14px 0;border:1px solid #bdcad9;border-bottom:0;border-radius:2px 2px 0 0;508 box-shadow:0 1px 0 rgba(255,255,255,.9) inset;509 }510 body.light-theme .market-toolbar::before{background:#f3f6fa;}511 body.light-theme .slotting-banner{512 margin:0 14px;border-left:1px solid #bdcad9;border-right:1px solid #bdcad9;513 }514 body.light-theme .table-scroll{515 margin:0 14px 14px;border:1px solid #bdcad9;background:#fff;516 box-shadow:0 2px 8px rgba(30,49,74,.06);scrollbar-color:#9dafc2 #edf2f7;517 }518 body.light-theme .slots-scroll,519 body.light-theme .modal-filters,520 body.light-theme .modal-results{521 scrollbar-color:#9dafc2 #edf2f7;522 }523 body.light-theme .table-scroll table{min-width:760px;}524 body.light-theme thead th{525 border-bottom:1px solid #9eb4cf;526 background:linear-gradient(180deg,#e9eff6,#dce5ef);527 }528 body.light-theme tbody tr{background:#fff;}529 body.light-theme tbody td{530 border-bottom:1px solid #cbd6e0;531 background:#fff;532 }533 body.light-theme tbody tr:nth-child(even) td{background:#f8fafc;}534 body.light-theme tbody tr:hover td{background:#eef5ff;}535 body.light-theme .market-panel table tbody td:nth-child(7){536 background:linear-gradient(90deg,rgba(23,131,95,.08),rgba(173,105,15,.12),rgba(189,70,80,.06));537 }538 body.light-theme .data-status,539 body.light-theme .theme-toggle{background:#fff;}540 .sortable{cursor:pointer;user-select:none;transition:color .15s,background .15s;}541 .sortable:hover{color:var(--ink);background:rgba(47,116,208,.08);}542 .sort-indicator{display:inline-block;min-width:11px;margin-left:5px;color:var(--blue-bright);font-size:10px;opacity:.72;}543 .sortable[aria-sort="none"] .sort-indicator{color:var(--muted-2);opacity:.55;}544 body.light-theme .sortable:hover{background:#dceafd;}545 @media (max-width:820px){546 .topbar-actions{gap:8px}.data-status{font-size:9px}.market-toolbar::before{left:12px}547 }548 @media (max-width:520px){549 .topbar-actions{width:100%;justify-content:flex-end}.data-status{flex:1;justify-content:center}550 .market-toolbar::before{left:12px}551 }552</style>553<style>554 /* Franchise HUD treatment — keeps the blue / gold palette, but gives the555 dashboard the visual language of a basketball video game interface. */556 :root{557 --hud-black:#070b12;558 --hud-panel:#0e1622;559 --hud-panel-2:#121e2d;560 --hud-line:rgba(128,164,210,.2);561 --hud-blue:#2d7dff;562 --hud-blue-hot:#67adff;563 --hud-gold:#f3b63f;564 --hud-gold-hot:#ffd36a;565 }566 html{background:var(--hud-black);}567 body{568 background:569 radial-gradient(ellipse at 78% 20%,rgba(45,125,255,.18),transparent 34rem),570 radial-gradient(ellipse at 18% 96%,rgba(239,91,96,.08),transparent 28rem),571 linear-gradient(135deg,#080d15 0%,#070b12 48%,#0c1420 100%);572 }573 body::before{574 content:"";575 position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.075;576 background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.16) 4px,transparent 5px);577 mix-blend-mode:screen;578 }579 .app{580 border:1px solid rgba(128,164,210,.14);581 box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 20px 80px rgba(0,0,0,.3);582 }583 .app::before{584 opacity:.7;585 background:586 linear-gradient(90deg,transparent 0 5%,rgba(103,173,255,.08) 5.1% 5.18%,transparent 5.3% 94%,rgba(103,173,255,.06) 94.1% 94.18%,transparent 94.3%),587 repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 72px),588 repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 72px);589 }590 .app::after{591 right:-4vw;bottom:-24vh;width:60vw;height:63vh;opacity:.24;592 transform:skewX(-22deg) rotate(-8deg);593 background:594 linear-gradient(90deg,transparent 0 18%,rgba(243,182,63,.1) 18.2% 18.4%,transparent 18.6% 44%,rgba(45,125,255,.14) 44.2% 44.4%,transparent 44.6%),595 repeating-linear-gradient(90deg,transparent 0 48px,rgba(243,182,63,.24) 49px 50px,transparent 51px 99px);596 border-top:1px solid rgba(243,182,63,.5);597 }598 .topbar{599 min-height:72px;padding:10px 20px 9px;600 background:linear-gradient(110deg,rgba(17,28,43,.98),rgba(8,13,21,.98) 72%);601 border-bottom:1px solid rgba(103,173,255,.27);602 box-shadow:0 10px 30px rgba(0,0,0,.34);603 }604 .topbar::before{605 content:"FRONT OFFICE / ROSTER BUILDER";606 position:absolute;right:22px;top:5px;607 color:rgba(131,157,190,.45);font:600 8px/1 'Oswald',sans-serif;letter-spacing:.18em;608 }609 .topbar::after{610 width:48%;height:4px;611 background:linear-gradient(90deg,var(--hud-gold) 0 26%,var(--hud-blue-hot) 26% 58%,transparent 100%);612 }613 .brand{gap:13px;padding-top:4px;}614 .brand-mark.brand-logo{615 width:74px;height:52px;616 filter:drop-shadow(0 6px 12px rgba(45,125,255,.25));617 }618 .brand-title{619 font-size:18px;letter-spacing:.11em;620 text-shadow:0 1px 0 #000,0 0 18px rgba(103,173,255,.14);621 }622 .brand-sub{font-family:'Oswald',sans-serif;letter-spacing:.17em;}623 .topbar-actions{gap:8px;align-items:flex-end;padding-top:8px;}624 .data-status{625 min-height:30px;padding:6px 10px;626 background:rgba(5,9,15,.72);border-color:rgba(69,211,155,.25);627 box-shadow:inset 0 0 16px rgba(69,211,155,.04);628 }629 .status-dot{animation:hudPulse 1.8s ease-in-out infinite;}630 @keyframes hudPulse{631 0%,100%{box-shadow:0 0 0 3px rgba(69,211,155,.08),0 0 0 rgba(69,211,155,0);}632 50%{box-shadow:0 0 0 4px rgba(69,211,155,.12),0 0 10px rgba(69,211,155,.45);}633 }634 .topbar-select{635 min-height:30px;padding:6px 25px 6px 10px;636 background:rgba(17,29,45,.86);border-color:rgba(128,164,210,.3);637 color:#d7e5f6;box-shadow:inset 0 1px rgba(255,255,255,.05);638 }639 .board{background:rgba(5,9,15,.2);}640 .squad-panel{641 width:380px;642 background:linear-gradient(180deg,rgba(15,25,38,.98),rgba(8,13,21,.98));643 border-right:1px solid rgba(103,173,255,.25);644 box-shadow:8px 0 28px rgba(0,0,0,.16);645 }646 .squad-head{647 padding:18px 20px 15px;648 background:649 linear-gradient(135deg,rgba(45,125,255,.22),transparent 57%),650 linear-gradient(90deg,transparent 0 66%,rgba(243,182,63,.07) 66% 66.3%,transparent 66.5%),651 repeating-linear-gradient(120deg,transparent 0 20px,rgba(255,255,255,.035) 21px 22px);652 border-bottom-color:rgba(103,173,255,.24);653 }654 .squad-head .row1{align-items:center;}655 .team-name{font-size:19px;letter-spacing:.1em;text-shadow:0 2px 0 #000;}656 .team-name::before{content:"// ";color:var(--hud-gold-hot);}657 .fill-count{658 padding:4px 7px;background:rgba(243,182,63,.09);659 border:1px solid rgba(243,182,63,.24);font-size:18px;660 line-height:1;color:var(--hud-gold-hot);661 }662 .stat-cards{663 gap:9px;padding:14px 20px 16px;664 background:linear-gradient(180deg,rgba(5,9,15,.4),rgba(5,9,15,.12));665 border-bottom-color:rgba(103,173,255,.18);666 }667 .stat-card{668 min-height:70px;padding:11px 6px 9px;669 background:linear-gradient(160deg,rgba(32,49,73,.72),rgba(8,13,21,.96));670 border-color:rgba(128,164,210,.25);border-radius:3px;671 box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.16);672 }673 .stat-card::before{674 content:"";position:absolute;top:0;left:0;width:18px;height:3px;background:var(--hud-gold);675 }676 .stat-card::after{left:9%;right:9%;height:3px;background:var(--hud-blue);}677 .stat-card .v{font-size:31px;text-shadow:0 2px 0 #000,0 0 12px rgba(255,211,106,.18);}678 .stat-card .l{font-size:9px;letter-spacing:.15em;}679 .stat-card.def::before{background:var(--hud-blue-hot);}680 .stat-card.net::before,.stat-card.net::after{background:var(--green);}681 .slots-scroll{padding:13px 20px 12px;}682 .group-label{683 margin:14px 0 8px;font-size:11px;letter-spacing:.18em;684 text-shadow:0 1px 0 #000;685 }686 .group-label::before{687 content:"";width:4px;height:13px;background:var(--hud-gold);688 transform:skewX(-18deg);display:inline-block;689 }690 .group-label::after{background:linear-gradient(90deg,rgba(243,182,63,.42),transparent);}691 .slot{692 min-height:47px;padding:10px 11px;margin-bottom:7px;693 background:linear-gradient(100deg,rgba(24,38,57,.86),rgba(10,16,25,.85));694 border-color:rgba(128,164,210,.16);border-radius:2px;695 box-shadow:inset 0 1px rgba(255,255,255,.035);696 }697 .slot::before{698 content:"";width:3px;align-self:stretch;background:rgba(128,164,210,.25);699 margin:-10px 3px -10px -11px;700 }701 .slot:hover{702 border-color:rgba(103,173,255,.75);background:linear-gradient(100deg,rgba(32,56,88,.9),rgba(11,20,32,.9));703 transform:translateX(3px);box-shadow:0 5px 16px rgba(0,0,0,.22);704 }705 .slot.selected{706 border-color:var(--hud-gold);background:linear-gradient(100deg,rgba(243,182,63,.14),rgba(45,125,255,.13));707 box-shadow:inset 3px 0 var(--hud-gold),0 0 14px rgba(243,182,63,.08);708 }709 .slot.selected::before{background:var(--hud-gold);}710 .slot.empty{color:rgba(103,173,255,.55);}711 .slot .pname{font-size:13px;color:var(--ink);}712 .slot .meta{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:.04em;}713 .slot .metrics{font-size:18px;}714 .slot .metrics .r{color:var(--hud-gold-hot);}715 .slot .metrics .sub{font-size:8px;letter-spacing:.12em;}716 .slot-plus{font-family:'Oswald',sans-serif;letter-spacing:.1em;color:var(--hud-blue-hot);}717 .slot-remove{font-size:16px;}718 .warn-banner{margin:0 20px 14px;border-radius:2px;letter-spacing:.03em;}719 .market-panel{720 background:linear-gradient(180deg,rgba(10,17,27,.86),rgba(7,11,18,.98));721 }722 .market-toolbar{723 position:relative;padding:19px 22px 14px;724 background:linear-gradient(180deg,rgba(17,29,45,.82),rgba(9,15,24,.76));725 border-bottom-color:rgba(103,173,255,.23);726 }727 .roster-context{728 display:flex;gap:7px;align-items:center;margin-top:12px;padding-top:11px;729 border-top:1px solid rgba(47,116,208,.17);730 }731 .roster-context-label{732 color:var(--muted);font:600 9px/1 'Oswald',sans-serif;letter-spacing:.14em;733 white-space:nowrap;734 }735 .roster-context .topbar-select{flex:1;min-width:0;max-width:none;}736 .market-filter{737 min-height:34px;flex:0 1 150px;max-width:170px;738 font:600 10px/1 'Oswald',sans-serif;letter-spacing:.07em;739 }740 .roster-context-note{741 margin-top:7px;color:var(--muted);font:500 9px/1.3 'Oswald',sans-serif;742 letter-spacing:.08em;text-transform:uppercase;743 }744 .roster-context-note.ready{color:var(--green);}745 .roster-context-note.warn{color:var(--gold-hot);}746 .market-toolbar::before{747 left:22px;top:-7px;color:rgba(160,184,216,.5);background:var(--hud-black);748 font-size:9px;letter-spacing:.2em;749 }750 input[type=text]{751 min-height:34px;padding:8px 12px;background:rgba(4,8,14,.86);752 border-color:rgba(128,164,210,.28);box-shadow:inset 0 2px 8px rgba(0,0,0,.24);753 }754 input[type=text]:focus{border-color:var(--hud-blue-hot);box-shadow:0 0 0 3px rgba(45,125,255,.14),inset 0 2px 8px rgba(0,0,0,.24);}755 #marketSearch{font-family:'Inter',sans-serif;}756 .chip{757 min-height:32px;padding:7px 12px;border-radius:2px;758 background:rgba(255,255,255,.025);border-color:rgba(128,164,210,.24);759 font-family:'Oswald',sans-serif;letter-spacing:.08em;760 }761 .chip:hover{border-color:var(--hud-blue-hot);background:rgba(45,125,255,.08);}762 .chip.active{763 background:linear-gradient(180deg,rgba(45,125,255,.3),rgba(23,67,139,.28));764 color:#e2f0ff;border-color:rgba(103,173,255,.8);765 box-shadow:inset 0 -3px var(--hud-blue),0 0 12px rgba(45,125,255,.1);766 }767 .scout-btn,.calc-btn{768 min-height:34px;background:linear-gradient(135deg,#347fe8,#17469d);769 border-color:rgba(128,196,255,.75);font-family:'Oswald',sans-serif;770 letter-spacing:.14em;text-shadow:0 1px 0 #123;771 box-shadow:inset 0 1px rgba(255,255,255,.23),0 6px 16px rgba(25,82,172,.24);772 }773 .scout-btn{padding:9px 17px;}774 .scout-btn:hover,.calc-btn:hover{background:linear-gradient(135deg,#4a95ff,#2161c0);transform:translateY(-1px);}775 .slotting-banner{776 padding:8px 22px;background:rgba(243,182,63,.09);777 border-color:rgba(243,182,63,.24);font-size:11px;778 }779 .table-scroll{scrollbar-color:#304c72 #080d15;}780 table{min-width:850px;}781 thead th{782 padding:11px 14px;background:linear-gradient(180deg,#1b2b42,#111c2b);783 color:#9bb6d7;border-bottom-color:rgba(103,173,255,.44);784 font-size:10px;letter-spacing:.14em;box-shadow:0 4px 14px rgba(0,0,0,.24);785 }786 tbody tr{background:rgba(10,17,27,.42);}787 tbody tr:nth-child(even){background:rgba(18,29,44,.38);}788 tbody td{padding:11px 14px;border-bottom-color:rgba(128,164,210,.1);}789 tbody tr:hover{background:linear-gradient(90deg,rgba(45,125,255,.18),rgba(243,182,63,.06));}790 tbody td.num{font-size:18px;}791 .pname2{font-size:13px;color:#f3f7fc;}792 .team-cell{font-family:'Oswald',sans-serif;font-size:11px;color:#8ea6c3;letter-spacing:.03em;}793 .pos-pill{794 min-width:28px;padding:3px 8px;border-radius:2px;795 background:rgba(45,125,255,.16);color:var(--hud-blue-hot);796 border-color:rgba(103,173,255,.34);font-family:'Oswald',sans-serif;letter-spacing:.1em;797 }798 .add-btn{799 border-radius:2px;background:rgba(69,211,155,.12);color:#70e5bb;800 border-color:rgba(69,211,155,.42);font-family:'Oswald',sans-serif;letter-spacing:.1em;801 }802 .add-btn:hover{background:rgba(69,211,155,.23);box-shadow:0 0 12px rgba(69,211,155,.12);}803 .remove-player-btn{804 background:rgba(239,91,96,.1);color:#ff8d92;border-color:rgba(239,91,96,.36);805 }806 .remove-player-btn:hover{background:rgba(239,91,96,.19);border-color:var(--red);}807 .state-row td{padding:80px 20px!important;}808 .state-row .state-title{font-size:17px;letter-spacing:.14em;}809 .state-row .state-detail{color:#8298b3;}810 .overlay{background:rgba(2,5,10,.83);backdrop-filter:blur(10px);padding:42px 20px;}811 .modal{812 max-width:1400px;background:linear-gradient(145deg,rgba(19,32,49,.98),rgba(7,12,20,.99));813 border-color:rgba(103,173,255,.52);border-radius:3px;814 box-shadow:0 24px 80px rgba(0,0,0,.58),0 0 0 1px rgba(243,182,63,.1),0 0 34px rgba(45,125,255,.08);815 }816 .modal-head{padding:16px 20px;background:linear-gradient(105deg,rgba(45,125,255,.2),transparent 70%);border-bottom-color:rgba(103,173,255,.28);}817 .modal-head .t{font-size:17px;letter-spacing:.13em;text-shadow:0 1px 0 #000;}818 .modal-close{border-radius:2px;color:#ff9a9d;}819 .modal-filters{width:350px;background:rgba(5,9,15,.34);}820 .m-section{821 background:linear-gradient(160deg,rgba(21,35,53,.72),rgba(8,13,21,.72));822 border-color:rgba(128,164,210,.19);border-radius:2px;823 }824 .m-section-head{font-size:12px;letter-spacing:.14em;}825 .m-section-head::before{width:4px;height:15px;background:var(--hud-gold);transform:skewX(-18deg);}826 .metric-row{border-bottom-color:rgba(128,164,210,.13);}827 .metric-row-head .name{color:#bdcde1;}828 .metric-vals{color:var(--hud-blue-hot);}829 .dual-range-track{background:#293c57;}830 .dual-range-fill{background:linear-gradient(90deg,var(--hud-blue),var(--hud-gold));box-shadow:0 0 12px rgba(45,125,255,.4);}831 .dual-range input[type=range]::-webkit-slider-thumb{background:var(--hud-gold-hot);}832 .dual-range input[type=range]::-moz-range-thumb{background:var(--hud-gold-hot);}833 .results-summary{background:rgba(45,125,255,.08);border-bottom-color:rgba(103,173,255,.2);}834 .results-summary b{color:var(--hud-gold-hot);}835 .results-empty{color:#6d84a0;}836 .search-result-row{background:rgba(5,9,15,.62);border-bottom-color:rgba(128,164,210,.1);}837 .search-result-row:hover{background:rgba(45,125,255,.16);}838 .search-result-row .add-icon{color:var(--hud-gold-hot);}839 @media (max-width:820px){840 .topbar::before{display:none}.squad-panel{width:100%}.market-toolbar{padding-top:18px}841 .market-filter{flex:1;max-width:none}842 }843 @media (max-width:520px){844 .roster-context{flex-wrap:wrap}.roster-context-label{width:100%}845 .roster-context .topbar-select{flex:1 1 45%}846 }847 @media (prefers-reduced-motion:reduce){848 .status-dot{animation:none}.slot,.scout-btn,.calc-btn{transition:none}849 }850</style>851<style>852 /* Light mode is the default presentation: the HUD treatment stays, but853 surfaces return to the original light blue / white game-board palette. */854 body.light-theme{855 background:856 radial-gradient(ellipse at 78% 12%,rgba(47,116,208,.16),transparent 34rem),857 radial-gradient(ellipse at 16% 96%,rgba(189,70,80,.07),transparent 28rem),858 linear-gradient(135deg,#f7f9fc 0%,#e9eff6 52%,#dfe8f2 100%);859 color:var(--ink);860 }861 body.light-theme::before{opacity:.055;mix-blend-mode:multiply;}862 body.light-theme .app{863 border-color:rgba(35,61,94,.16);864 box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 20px 80px rgba(30,49,74,.14);865 }866 body.light-theme .app::before{867 opacity:.52;868 background:869 linear-gradient(90deg,transparent 0 5%,rgba(47,116,208,.08) 5.1% 5.18%,transparent 5.3% 94%,rgba(47,116,208,.06) 94.1% 94.18%,transparent 94.3%),870 repeating-linear-gradient(90deg,rgba(30,58,91,.035) 0 1px,transparent 1px 72px),871 repeating-linear-gradient(0deg,rgba(30,58,91,.028) 0 1px,transparent 1px 72px);872 }873 body.light-theme .app::after{874 opacity:.2;875 background:876 linear-gradient(90deg,transparent 0 18%,rgba(173,105,15,.08) 18.2% 18.4%,transparent 18.6% 44%,rgba(47,116,208,.1) 44.2% 44.4%,transparent 44.6%),877 repeating-linear-gradient(90deg,transparent 0 48px,rgba(173,105,15,.22) 49px 50px,transparent 51px 99px);878 border-top-color:rgba(173,105,15,.36);879 }880 body.light-theme .topbar{881 background:linear-gradient(110deg,rgba(255,255,255,.99),rgba(239,244,250,.98) 72%);882 border-bottom-color:rgba(47,116,208,.28);883 box-shadow:0 10px 30px rgba(30,49,74,.16);884 }885 body.light-theme .topbar::before{color:rgba(83,100,122,.58);}886 body.light-theme .topbar-select{887 background:rgba(255,255,255,.9);border-color:rgba(35,61,94,.27);color:var(--ink);888 box-shadow:inset 0 1px rgba(255,255,255,.9);889 }890 body.light-theme .market-filter{891 background:rgba(255,255,255,.92);border-color:rgba(35,61,94,.24);color:var(--ink);892 }893 body.light-theme .roster-context{border-top-color:rgba(47,116,208,.18);}894 body.light-theme .roster-context-note.ready{color:#116d50;}895 body.light-theme .roster-context-note.warn{color:#8b5100;}896 body.light-theme .data-status{897 background:rgba(255,255,255,.8);border-color:rgba(23,131,95,.3);898 box-shadow:inset 0 0 16px rgba(23,131,95,.04);899 }900 body.light-theme .squad-panel{901 background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,244,249,.98));902 border-right-color:rgba(47,116,208,.25);box-shadow:8px 0 28px rgba(30,49,74,.08);903 }904 body.light-theme .squad-head{905 background:906 linear-gradient(135deg,rgba(47,116,208,.14),transparent 57%),907 linear-gradient(90deg,transparent 0 66%,rgba(173,105,15,.06) 66% 66.3%,transparent 66.5%),908 repeating-linear-gradient(120deg,transparent 0 20px,rgba(35,61,94,.035) 21px 22px);909 border-bottom-color:rgba(47,116,208,.22);910 }911 body.light-theme .team-name{color:var(--ink);text-shadow:0 1px 0 #fff;}912 body.light-theme .fill-count{913 background:rgba(173,105,15,.09);border-color:rgba(173,105,15,.25);color:var(--gold-hot);914 }915 body.light-theme .stat-cards{916 background:linear-gradient(180deg,rgba(231,237,245,.65),rgba(246,249,252,.7));917 border-bottom-color:rgba(47,116,208,.18);918 }919 body.light-theme .stat-card{920 background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(232,239,247,.98));921 border-color:rgba(35,61,94,.22);922 box-shadow:inset 0 1px rgba(255,255,255,.95),0 4px 12px rgba(30,49,74,.1);923 }924 body.light-theme .stat-card .v{text-shadow:0 1px 0 #fff,0 0 12px rgba(173,105,15,.12);}925 body.light-theme .stat-card .l{color:var(--muted);}926 body.light-theme .slots-scroll{background:rgba(246,249,252,.6);}927 body.light-theme .group-label{text-shadow:0 1px 0 #fff;}928 body.light-theme .slot{929 background:linear-gradient(100deg,rgba(255,255,255,.98),rgba(237,243,249,.96));930 border-color:rgba(35,61,94,.18);931 box-shadow:inset 0 1px rgba(255,255,255,.95),0 3px 8px rgba(30,49,74,.06);932 }933 body.light-theme .slot::before{background:rgba(47,116,208,.28);}934 body.light-theme .slot:hover{935 border-color:rgba(47,116,208,.7);936 background:linear-gradient(100deg,#f7fbff,#e8f1fc);937 box-shadow:0 5px 16px rgba(47,116,208,.13);938 }939 body.light-theme .slot.selected{940 background:linear-gradient(100deg,rgba(173,105,15,.13),rgba(47,116,208,.1));941 box-shadow:inset 3px 0 var(--gold),0 0 14px rgba(173,105,15,.08);942 }943 body.light-theme .slot .pname{color:var(--ink);}944 body.light-theme .slot .meta{color:var(--muted);}945 body.light-theme .slot .metrics .r{color:var(--gold-hot);}946 body.light-theme .slot.empty{color:var(--blue);}947 body.light-theme .slot-plus{color:var(--blue);}948 body.light-theme .market-panel{949 background:linear-gradient(180deg,rgba(243,246,250,.92),rgba(230,237,245,.98));950 }951 body.light-theme .market-toolbar{952 background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,244,249,.9));953 border-bottom-color:rgba(47,116,208,.23);954 }955 body.light-theme .market-toolbar::before{background:#f3f6fa;color:var(--muted-2);}956 body.light-theme input[type=text]{957 background:rgba(255,255,255,.95);border-color:rgba(35,61,94,.24);958 color:var(--ink);box-shadow:inset 0 2px 8px rgba(30,49,74,.06);959 }960 body.light-theme .chip{961 background:rgba(255,255,255,.48);border-color:rgba(35,61,94,.22);color:var(--muted);962 }963 body.light-theme .chip:hover{background:#eef5ff;border-color:var(--blue-bright);}964 body.light-theme .chip.active{965 background:linear-gradient(180deg,rgba(47,116,208,.18),rgba(47,116,208,.08));966 color:#17477f;border-color:rgba(47,116,208,.68);967 box-shadow:inset 0 -3px var(--blue),0 0 12px rgba(47,116,208,.08);968 }969 body.light-theme .scout-btn,body.light-theme .calc-btn{970 background:linear-gradient(135deg,#397dcc,#1d4f99);971 border-color:rgba(55,110,177,.7);box-shadow:inset 0 1px rgba(255,255,255,.28),0 6px 16px rgba(47,116,208,.2);972 }973 body.light-theme .slotting-banner{974 background:rgba(173,105,15,.09);border-color:rgba(173,105,15,.24);color:#7a4800;975 }976 body.light-theme .table-scroll{scrollbar-color:#9dafc2 #edf2f7;}977 body.light-theme thead th{978 background:linear-gradient(180deg,#edf3f9,#dce6f0);979 color:#526984;border-bottom-color:rgba(47,116,208,.4);box-shadow:0 4px 14px rgba(30,49,74,.12);980 }981 body.light-theme tbody tr,body.light-theme tbody tr:nth-child(even){background:rgba(255,255,255,.72);}982 body.light-theme tbody tr:nth-child(even){background:rgba(246,249,252,.9);}983 body.light-theme tbody td{background:transparent;border-bottom-color:rgba(35,61,94,.11);}984 body.light-theme tbody tr:hover{background:linear-gradient(90deg,rgba(47,116,208,.12),rgba(173,105,15,.06));}985 body.light-theme tbody tr:hover td{background:transparent;}986 body.light-theme .pname2{color:var(--ink);}987 body.light-theme .team-cell{color:var(--muted);}988 body.light-theme .pos-pill{989 background:rgba(47,116,208,.12);color:#2364b8;border-color:rgba(47,116,208,.34);990 }991 body.light-theme .add-btn{992 background:rgba(23,131,95,.1);color:#116d50;border-color:rgba(23,131,95,.36);993 }994 body.light-theme .add-btn:hover{background:rgba(23,131,95,.2);}995 body.light-theme .remove-player-btn{996 background:rgba(189,70,80,.08);color:#a1323a;border-color:rgba(189,70,80,.3);997 }998 body.light-theme .remove-player-btn:hover{background:rgba(189,70,80,.16);border-color:var(--red);}999 body.light-theme .state-row .state-title{color:var(--gold-hot);}1000 body.light-theme .state-row .state-detail{color:var(--muted);}1001 body.light-theme .modal{1002 background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(238,243,248,.99));1003 border-color:rgba(47,116,208,.46);1004 box-shadow:0 24px 80px rgba(30,49,74,.3),0 0 0 1px rgba(173,105,15,.1);1005 }1006 body.light-theme .modal-head{1007 background:linear-gradient(105deg,rgba(47,116,208,.14),transparent 70%);1008 border-bottom-color:rgba(47,116,208,.25);1009 }1010 body.light-theme .modal-head .t{color:var(--ink);text-shadow:0 1px 0 #fff;}1011 body.light-theme .modal-filters{background:rgba(231,237,245,.48);}1012 body.light-theme .m-section{1013 background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(237,243,249,.86));1014 border-color:rgba(35,61,94,.17);box-shadow:inset 0 1px rgba(255,255,255,.9),0 3px 8px rgba(30,49,74,.05);1015 }1016 body.light-theme .m-section-head{color:#7a4b00;}1017 body.light-theme .metric-row{border-bottom-color:rgba(35,61,94,.11);}1018 body.light-theme .metric-row-head .name{color:#43566f;}1019 body.light-theme .metric-vals{color:#2364b8;}1020 body.light-theme .dual-range-track{background:#c7d3e2;}1021 body.light-theme .dual-range-fill{box-shadow:0 0 10px rgba(47,116,208,.3);}1022 body.light-theme .results-summary{background:rgba(47,116,208,.07);}1023 body.light-theme .results-empty{color:var(--muted-2);}1024 body.light-theme .search-result-row{background:rgba(255,255,255,.72);border-bottom-color:rgba(35,61,94,.1);}1025 body.light-theme .search-result-row:hover{background:rgba(47,116,208,.12);}1026 body.light-theme .search-result-row .name{color:var(--ink);}1027 body.light-theme .search-result-row .full{color:var(--muted);}1028 1029 /* Logo: sit flush with the topbar (no card/box), with a soft1030 gradient halo behind the mark instead of a hard-edged container. */1031 .brand-mark.brand-logo,1032 body.light-theme .brand-mark.brand-logo{1033 position:relative;1034 width:auto;height:52px;1035 padding:0;margin-right:2px;border:0;border-radius:0;1036 background:transparent;box-shadow:none;overflow:visible;1037 filter:none;1038 }1039 .brand-logo img{1040 position:relative;z-index:1;1041 display:block;height:100%;width:auto;object-fit:contain;1042 filter:drop-shadow(0 2px 5px rgba(23,34,52,.18))1043 drop-shadow(0 0 7px rgba(47,116,208,.35))1044 drop-shadow(0 0 3px rgba(47,116,208,.25));1045 }1046 body.light-theme .brand-logo img{1047 filter:drop-shadow(0 2px 5px rgba(23,34,52,.14))1048 drop-shadow(0 0 7px rgba(173,105,15,.22))1049 drop-shadow(0 0 3px rgba(47,116,208,.2));1050 }1051</style>1052</head>1053<body class="light-theme">1054<div class="app">1055 1056 <div class="topbar">1057 <div class="brand">1058 <div class="brand-mark brand-logo">1059 <img src="assets/logo.png" alt="Portal Machine">1060 </div>1061 <div>1062 <div class="brand-title">COLLEGE BASKETBALL // RAPM LAB</div>1063 <div class="brand-sub">Construct. Evaluate. Dominate.</div>1064 </div>1065 </div>1066 <div class="topbar-actions">1067 <div class="data-status" id="dataStatus" aria-live="polite">1068 <span class="status-dot"></span>1069 <span id="dataStatusText">CONNECTING TO PLAYER FEED</span>1070 </div>1071 </div>1072 </div>1073 1074 <div class="board">1075 <div class="squad-panel">1076 <div class="squad-head">1077 <div class="row1">1078 <span class="team-name">YOUR ROSTER</span>1079 <span class="fill-count" id="fillCount">0/15 FILLED</span>1080 </div>1081 <div class="roster-context">1082 <span class="roster-context-label">PRELOAD ROSTER</span>1083 <select class="topbar-select" id="seasonFilterSelect" aria-label="Preload roster by season">1084 <option value="">All Seasons</option>1085 </select>1086 <select class="topbar-select" id="teamFilterSelect" aria-label="Preload roster by team">1087 <option value="">All Teams</option>1088 </select>1089 </div>1090 1091 </div>1092 1093 <div class="stat-cards">1094 <div class="stat-card off"><div class="v" id="offRtg">--</div><div class="l">Off rating</div></div>1095 <div class="stat-card def"><div class="v" id="defRtg">--</div><div class="l">Def rating</div></div>1096 <div class="stat-card net"><div class="v" id="netRtg">--</div><div class="l">Net rating</div></div>1097 </div>1098 1099 <div class="slots-scroll" id="slotsScroll"></div>1100 <div id="warnBanner"></div>1101 </div>1102 1103 <div class="market-panel">1104 <div class="market-toolbar">1105 <input type="text" id="marketSearch" placeholder="Search players..." aria-label="Search players">1106 <select class="topbar-select market-filter" id="marketSeasonSelect" aria-label="Filter player market by season">1107 <option value="">All Seasons</option>1108 </select>1109 <select class="topbar-select market-filter" id="marketTeamSelect" aria-label="Filter player market by team">1110 <option value="">All Teams</option>1111 </select>1112 <div class="pos-filter-row" id="posFilterRow"></div>1113 <button class="scout-btn" id="scoutBtn">▲ SCOUT</button>1114 </div>1115 <div class="slotting-banner" id="slottingBanner" style="display:none;"></div>1116 <div class="table-scroll">1117 <table>1118 <thead>1119 <tr>1120 <th class="sortable" data-market-sort="name" tabindex="0" role="button" aria-sort="none">Player<span class="sort-indicator">↕</span></th>1121 <th class="sortable" data-market-sort="team" tabindex="0" role="button" aria-sort="none">Team<span class="sort-indicator">↕</span></th>1122 <th class="sortable" data-market-sort="position" tabindex="0" role="button" aria-sort="none">Pos<span class="sort-indicator">↕</span></th>1123 <th class="sortable" data-market-sort="class_year" tabindex="0" role="button" aria-sort="none">Cls<span class="sort-indicator">↕</span></th>1124 <th class="sortable" data-market-sort="season" tabindex="0" role="button" aria-sort="none">Season<span class="sort-indicator">↕</span></th>1125 <th class="num sortable" data-market-sort="ORAPM" tabindex="0" role="button" aria-sort="none">ORAPM<span class="sort-indicator">↕</span></th>1126 <th class="num sortable" data-market-sort="DRAPM" tabindex="0" role="button" aria-sort="none">DRAPM<span class="sort-indicator">↕</span></th>1127 <th class="num sortable" data-market-sort="RAPM" tabindex="0" role="button" aria-sort="descending">RAPM<span class="sort-indicator">▼</span></th>1128 <th class="num sortable" data-market-sort="n_poss" tabindex="0" role="button" aria-sort="none">Poss<span class="sort-indicator">↕</span></th>1129 <th></th>1130 </tr>1131 </thead>1132 <tbody id="marketBody">1133 <tr class="state-row">1134 <td colspan="10">1135 <span class="state-title">CONNECTING TO PLAYER FEED</span>1136 <span class="state-detail">Loading the latest roster database…</span>1137 </td>1138 </tr>1139 </tbody>1140 </table>1141 </div>1142 </div>1143 </div>1144</div>1145 1146<div class="overlay" id="scoutOverlay">1147 <div class="modal" role="dialog" aria-modal="true" aria-labelledby="scoutTitle" tabindex="-1">1148 <div class="modal-head">1149 <span class="t" id="scoutTitle">▲ SCOUT — SEARCH BY METRIC</span>1150 <button class="modal-close" id="scoutClose" aria-label="Close scouting panel">×</button>1151 </div>1152 <div class="modal-body">1153 <div class="modal-filters">1154 <div class="m-section">1155 <div class="m-section-head">PERFORMANCE METRICS</div>1156 <div class="pos-filter-row" id="metricChips" style="flex-wrap:wrap;margin-bottom:8px;"></div>1157 <input type="text" id="metricSearch" placeholder="Search additional metrics..." style="width:100%;">1158 <div id="metricSearchResults" style="margin-top:6px;max-height:170px;overflow-y:auto;border-radius:4px;"></div>1159 </div>1160 <div class="m-section" id="selectedMetricsSection" style="display:none;">1161 <div class="m-section-head">SELECTED METRICS</div>1162 <div id="metricRows"></div>1163 </div>1164 <div class="m-section">1165 <div class="m-section-head">CATEGORICAL FILTERS</div>1166 <div style="font-size:11px;font-weight:700;color:#9ab8a8;margin-bottom:6px;">POSITION</div>1167 <div class="pos-filter-row" id="scoutPosChips" style="flex-wrap:wrap;margin-bottom:12px;"></div>1168 <div style="font-size:11px;font-weight:700;color:#9ab8a8;margin-bottom:6px;">CLASS</div>1169 <div class="pos-filter-row" id="scoutClassChips" style="flex-wrap:wrap;margin-bottom:12px;"></div>1170 <div style="font-size:11px;font-weight:700;color:#9ab8a8;margin-bottom:6px;">SEASON</div>1171 <select class="topbar-select" id="scoutSeasonSelect" style="width:100%;max-width:none;">1172 <option value="">All Seasons</option>1173 </select>1174 </div>1175 <button class="calc-btn" id="calcBtn">CALCULATE →</button>1176 </div>1177 <div class="modal-results">1178 <div class="results-summary" id="resultsSummary" style="display:none;"></div>1179 <div id="resultsBody" style="flex:1;overflow-y:auto;">1180 <div class="results-empty">Set your filters and hit Calculate<br><span style="font-size:11px;opacity:.7;">Players ranked by average of selected metrics</span></div>1181 </div>1182 </div>1183 </div>1184 </div>1185</div>1186 1187<script>1188// Add or update this line at the top of your script block1189const PREDICTION_API_BASE = "https://portal-machine-api-876845359085.us-central1.run.app";1190const PLAYERS_URL = "https://pub-1790ace34ae1468f9d12be4c2f2e45e1.r2.dev/players.json";1191const PREDICTION_DEBOUNCE_MS = 450;1192let predictionRequestToken = 0;1193let predictionDebounceTimer = null;1194let PLAYERS = [];1195 1196function escapeHtml(value){1197 return String(value ?? "")1198 .replace(/&/g,"&")1199 .replace(/</g,"<")1200 .replace(/>/g,">")