:root{--bg:#14110f;--card:rgba(18,16,14,.8);--line:rgba(255,255,255,.12);--txt:#f4efe8;--mute:#b9b0a5;--accent:#dff6ff;--ice:#bfeaff;--ok:#3ecf8e;--warn:#ffd166;--bad:#ff5d5d}
*{box-sizing:border-box}
html{background:var(--bg)}
body{background:transparent}
html,body{margin:0;min-height:100%;color:var(--txt);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Background: rotating art layer (parallax + slow drift) under a dark shade so cards stay readable.
   Fallback when /bg images are missing: dark hardwood + center-circle court lines. Neutral colors only. */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background-color:#15110e;
  background-image:
   radial-gradient(circle at 50% 50%,transparent 0 118px,rgba(255,235,210,.14) 119px 121px,transparent 122px),
   linear-gradient(90deg,transparent calc(50% - 1px),rgba(255,235,210,.12) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
   radial-gradient(ellipse at 50% 0%,rgba(255,220,170,.14),transparent 60%),
   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 46px),
   linear-gradient(180deg,#241a13,#120e0b);
  background-size:cover;background-position:center}
#bg .art{position:absolute;left:0;right:0;top:-6vh;height:118vh;will-change:transform;transform:translate3d(0,var(--py,0px),0)}
#bg .drift{position:absolute;inset:0;background:var(--bgimg) var(--bgpos,50% 50%)/cover no-repeat;opacity:0;transition:opacity 1.2s ease;
  transform:scale(1.06);animation:drift 70s ease-in-out infinite alternate;will-change:transform}
#bg.img .drift{opacity:1}
@keyframes drift{from{transform:scale(1.06) translate3d(-1.2%,0,0)}to{transform:scale(1.14) translate3d(1.2%,-1%,0)}}
#bg .shade{position:absolute;inset:0;background:
  radial-gradient(ellipse 120% 85% at 50% 40%,rgba(8,7,6,.05),rgba(8,7,6,.45) 75%,rgba(8,7,6,.7)),
  linear-gradient(180deg,rgba(8,7,6,.15),rgba(8,7,6,.3) 45%,rgba(8,7,6,.55))}
@media (prefers-reduced-motion:reduce){#bg .drift{animation:none}#bg .art{transform:none}}
main{max-width:1100px;margin:0 auto;padding:24px max(14px,env(safe-area-inset-right)) 40px max(14px,env(safe-area-inset-left))}
.hero h1{margin:8px 0 4px;text-shadow:0 2px 18px rgba(0,0,0,.6);font-size:clamp(28px,6vw,44px);letter-spacing:.5px}
.hero h1::after{content:"";display:block;width:72px;height:3px;background:linear-gradient(90deg,#fff,rgba(191,234,255,.6),transparent);border-radius:2px;margin-top:10px;box-shadow:0 0 12px rgba(191,234,255,.5)}
.tag{color:var(--mute);margin:8px 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hint{font-size:12px;color:var(--mute);margin:8px 0 0}
.hidden{display:none}
#status .bar{height:8px;background:#2a2420;border-radius:6px;overflow:hidden;margin-top:8px}
#status .bar i{display:block;height:100%;background:linear-gradient(90deg,#9fdcff,#fff);width:0;transition:width .3s}
#status.err{border-color:var(--bad)}
.asof{font-size:13px;color:var(--mute);margin:0 0 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.side{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35);min-width:0}
.side h2{margin:0;font-size:18px;font-weight:700;color:var(--txt)}
.side h2 .who{color:#fff;font-weight:800;font-size:26px;letter-spacing:.01em}
.sub{margin:4px 0 10px;color:var(--mute);font-size:13px}
.sub .who{color:#fff;font-weight:800;font-size:16px}
.list{list-style:none;margin:0;padding:0}
.series{margin:20px 0 10px;padding:2px 0 8px;font-size:30px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:#5CF2FF;font-weight:800;border-bottom:2px solid rgba(92,242,255,.45)}
.list .series:first-child{margin-top:4px}
.row{border-top:1px solid var(--line);padding:10px 2px}
.row .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.row .name{font-weight:700}
.row .name a{color:var(--txt);text-decoration:none}
.row .name a:hover{text-decoration:underline}
.ask{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ask.none{color:var(--mute);font-weight:400}
.ask.unv{color:var(--warn);font-weight:400}
.meta{font-size:13px;color:var(--mute)}
.badge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:999px;margin:4px 4px 0 0;border:1px solid var(--line)}
.badge.ok{color:var(--ok);border-color:rgba(62,207,142,.4)}
.badge.fit{color:#1a0d02;background:var(--warn);border-color:var(--warn);font-weight:700}
.empty{color:var(--mute);padding:6px 2px 12px;font-size:13px;font-style:italic}
footer{margin-top:26px;font-size:12px;color:var(--mute)}
footer p{margin:6px 0}
/* Compare button spinner */
@keyframes spin{to{transform:rotate(360deg)}}
/* Per-column total of exact-edition lowest asks */
.total{margin:-4px 0 10px;font-size:14px;color:var(--txt)}
.total b{font-variant-numeric:tabular-nums}
.total .m{color:var(--mute);font-size:12px}
.asof .upd{color:var(--txt);font-weight:600}
/* Phone polish (~390px) */
@media (max-width:560px){
  main{padding-top:14px}
  .tag{font-size:14px;margin-bottom:12px}
  .card,.side{padding:12px;border-radius:12px}
  .cols{gap:12px}
  .side h2 .who{overflow-wrap:anywhere}
  .series{overflow-wrap:anywhere}
  .row .name{overflow-wrap:anywhere}
  .badge{font-size:12px}
  .asof{font-size:12px}
}
/* Rows are tappable to build a trade */
.row{cursor:pointer;border-radius:8px;transition:background .15s}
.row:hover{background:rgba(255,255,255,.04)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row .top::before{content:"";display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;line-height:1;color:#111;flex:0 0 20px;height:20px;border:2px solid rgba(255,255,255,.35);border-radius:6px;margin-top:2px;order:-1}
.row .top{justify-content:flex-start}
.row .name{flex:1}
.row.sel{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 #fff}
.row.sel .top::before{content:"\2713";background:#fff;border-color:#fff}
.row .meta,.row>div:last-child{padding-left:28px}
/* Trade builder tray (sticky at the bottom of the results) */
.trade{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));margin-top:14px;background:rgba(16,14,12,.94);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:12px 14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -6px 30px rgba(0,0,0,.5);z-index:5}
.trade .m{color:var(--mute);font-size:12px}
.tr-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.clear{margin:0 0 0 auto;width:auto;padding:4px 12px;font-size:13px;background:transparent;color:var(--txt);border:1px solid var(--line)}
.tr-sides{display:none;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.trade.active .tr-sides{display:grid}
.tr-who{font-weight:800;color:#fff;overflow-wrap:anywhere}
.tr-sum{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.verdict{margin-top:6px;font-size:16px}
.verdict.even b{color:var(--ok)} .verdict.slight b{color:var(--warn)} .verdict.lop b{color:var(--bad)}
.tr-note{margin:6px 0 0}
.trade:not(.active) .tr-note{display:none}
@media (max-width:560px){.trade{padding:10px 12px}.tr-sum{font-size:19px}.tr-head .m{display:none}.trade:not(.active) .tr-head .m{display:inline}.verdict{font-size:15px}}
/* v0.3 search panel: compact frosted glass, side-by-side fields, neutral ice/white pill button (no orange, no team colors) */
button{font:inherit;cursor:pointer}
.search{margin-bottom:16px;padding:14px 16px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 12px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.sbar{display:flex;align-items:flex-end;gap:10px}
.fld{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px}
.lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-left:14px}
.box{display:flex;align-items:center;height:46px;border-radius:999px;background:rgba(8,8,10,.55);border:1px solid rgba(255,255,255,.14);padding:0 16px;transition:border-color .15s,box-shadow .15s}
.box:focus-within{border-color:rgba(191,234,255,.75);box-shadow:0 0 0 3px rgba(191,234,255,.15),0 0 18px rgba(191,234,255,.18)}
.at{color:rgba(255,255,255,.45);font-weight:700;margin-right:4px}
.box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--txt);font:inherit;font-size:16px;padding:0}
.box input::placeholder{color:rgba(255,255,255,.35)}
.vs{flex:0 0 auto;width:34px;height:34px;margin-bottom:6px;display:grid;place-items:center;border-radius:50%;font-size:12px;font-weight:800;letter-spacing:.04em;
  color:#e9f7ff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
#go{flex:0 0 auto;height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;border:0;border-radius:999px;
  font-weight:800;font-size:15px;letter-spacing:.02em;color:#0d1418;background:linear-gradient(180deg,#ffffff,#d6efff);
  box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.12);transition:transform .12s,box-shadow .2s,filter .2s}
#go:hover{box-shadow:0 0 0 3px rgba(191,234,255,.22),0 0 24px rgba(191,234,255,.45),0 4px 14px rgba(0,0,0,.35)}
#go:active{transform:scale(.97);box-shadow:0 0 0 4px rgba(191,234,255,.3),0 0 30px rgba(191,234,255,.6)}
#go:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* disabled styles are with the league chips below */
#go .ico{flex:0 0 auto}
.spin{display:none;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(13,20,24,.25);border-top-color:#0d1418;animation:spin .8s linear infinite}
#go.busy .spin{display:inline-block}
#go.busy .ico{display:none}
.search .hint{margin:8px 0 0 14px;font-size:12px;color:var(--mute)}
/* League filter chips: clearly visible, large tap targets, frosted panel, no orange */
.leagues{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0 2px}
.lg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 16px 6px 10px;border-radius:999px;
  background:rgba(8,8,10,.5);border:1px solid rgba(255,255,255,.22);cursor:pointer;user-select:none;
  transition:border-color .15s,box-shadow .15s,background .15s}
.lg:hover{border-color:rgba(191,234,255,.55);background:rgba(8,8,10,.65)}
.lg:focus-within{border-color:rgba(191,234,255,.8);box-shadow:0 0 0 3px rgba(191,234,255,.18)}
.lg input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:0 0 22px;border-radius:6px;
  border:2px solid rgba(255,255,255,.65);background:rgba(255,255,255,.08);cursor:pointer;display:grid;place-items:center}
.lg input:checked{background:#fff;border-color:#fff}
.lg input:checked::after{content:"\2713";color:#0d1418;font-size:15px;font-weight:900;line-height:1}
.lg span{font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.leagues .league-hint{margin:0 0 0 4px;color:var(--warn);font-weight:600}
#go:disabled{filter:saturate(.6) brightness(.92)}
#go:disabled:not(.busy){cursor:not-allowed;opacity:.55}
#go.busy{cursor:wait}
@media (max-width:560px){
  .search{padding:12px 12px 10px;border-radius:18px}
  .sbar{flex-direction:column;align-items:stretch;gap:6px}
  .vs{align-self:center;margin:2px 0 -2px}
  #go{width:100%;margin-top:6px;height:48px}
  .search .hint{margin-left:6px}
  .leagues{margin-left:0;gap:8px}
  .lg{flex:1 1 auto;justify-content:center;min-width:140px}
}