/* CSGO Matchmaking — upgrader: skins + MP on the left, the wheel in the middle, the target on the right,
   your inventory and the target list underneath. */
.ux-page{--ux-acc:#F5C451;--ux-win:#3DD68C;padding-top:20px}
.ux-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.ux-title h1{display:flex;align-items:center;gap:10px;font:900 clamp(34px,4.4vw,52px)/1 var(--display);text-transform:uppercase}
.ux-title h1 svg{width:38px;height:38px;fill:none;stroke:var(--ux-acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ux-wallet{font-size:14px;color:var(--muted);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--hull)}
.ux-wallet b{color:var(--text);margin-left:4px}

/* ---------- top: stake | wheel | target ---------- */
.ux-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1.05fr) minmax(0,1fr);gap:16px;align-items:stretch}
.ux-panel{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;
  background:radial-gradient(70% 60% at 50% 55%,rgba(245,196,81,.10),rgba(245,196,81,0) 70%),var(--hull)}
.ux-panel h2{font:800 18px/1 var(--display);text-transform:uppercase;text-align:center}
.ux-sub{font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
.ux-art{flex:1;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px 0}
.ux-art img{max-width:78%;max-height:150px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.ux-art b{font-size:15px;line-height:1.25}
.ux-art small{color:var(--muted);font-size:13px}
.ux-art .ux-val{color:var(--ux-acc);font-weight:700;font-size:15px}
.ux-ph{display:grid;place-items:center;gap:10px;color:var(--muted);font-size:13px}
.ux-ph svg{width:74px;height:74px;fill:none;stroke:var(--ux-acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ux-ph svg path:nth-child(2){opacity:.55}.ux-ph svg path:nth-child(3){opacity:.3}
.ux-multi{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.ux-multi img{width:62px;height:46px;object-fit:contain;border-radius:6px;background:rgba(0,0,0,.3);border-bottom:2px solid var(--rar,var(--line-hi));padding:3px}
.ux-multi em{align-self:center;font-style:normal;color:var(--muted);font-size:13px}
.ux-clear{margin-top:4px;background:none;border:0;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.ux-clear:hover{color:var(--text)}

/* MP slider */
.ux-mp{border-top:1px solid var(--line);padding-top:12px}
.ux-mp-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted)}
.ux-mp-top small{font-size:11px}
.ux-mp-in{display:flex;align-items:center;gap:6px;font-size:12px}
.ux-mp-in input{width:110px;height:32px;text-align:right;background:rgba(0,0,0,.35);border:1px solid var(--line-hi);border-radius:var(--r-sm);color:var(--ux-acc);font:700 14px/1 var(--body);padding:0 8px}
.ux-mp-in input:focus{outline:none;border-color:var(--ux-acc)}
.ux-mp input[type=range]{width:100%;margin-top:10px;accent-color:var(--ux-acc)}

/* presets */
.ux-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:12px}
.ux-pre{height:38px;border:1px solid var(--line-hi);border-radius:var(--r-sm);background:rgba(0,0,0,.35);color:var(--text);font:700 14px/1 var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.ux-pre:hover{border-color:var(--ux-acc)}
.ux-pc.lo{border-color:rgba(255,107,107,.55)}.ux-pc.mid{border-color:rgba(245,196,81,.55)}.ux-pc.hi{border-color:rgba(61,214,140,.55)}
.ux-pre.on{background:var(--ux-acc);border-color:var(--ux-acc);color:#0B0F17}

/* centre: wheel + upgrade button */
.ux-center{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0}
.ux-center .uw{width:250px;height:250px}
.ux-center .uw-mid{padding-top:30px}
.ux-center .uw-mid b{font-size:38px;color:var(--ux-win)}
.ux-center .uw-mid b.none{color:var(--muted)}
.ux-center .uw-mid em{display:block;font-style:normal;font-size:13px;color:var(--ux-acc);margin-top:6px;font-weight:700}
.ux-zone{width:100%;max-width:330px;display:grid;gap:6px;font-size:12px;color:var(--muted)}
.ux-zone-top{display:flex;justify-content:space-between;align-items:center}
.ux-zone-top b{color:var(--ux-win);font-family:ui-monospace,Menlo,Consolas,monospace}
.ux-zone input{width:100%;accent-color:var(--ux-win)}
.ux-zone-q{display:flex;gap:4px;justify-content:center}
.ux-zone-q button{height:26px;padding:0 10px;border:1px solid var(--line-hi);border-radius:999px;background:transparent;color:var(--muted);font:600 12px/1 var(--body);cursor:pointer}
.ux-zone-q button:hover{color:var(--text);border-color:var(--ux-win)}
.ux-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:330px;height:56px;border:0;border-radius:var(--r-md);
  background:linear-gradient(180deg,#F8D06B,#E3A92C);color:#0B0F17;font:900 20px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(245,196,81,.65);transition:transform .12s,filter .15s}
.ux-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ux-go:hover:not(:disabled){filter:brightness(1.07)}
.ux-go:active:not(:disabled){transform:translateY(1px)}
.ux-go:disabled{background:#3a3423;color:#8b7d55;box-shadow:none;cursor:not-allowed}
.ux-note{font-size:12px;color:var(--muted);text-align:center;max-width:330px;min-height:16px}
.ux-stats{display:flex;gap:16px;justify-content:center;font-size:12px;color:var(--muted)}
.ux-stats b{color:var(--text);font-weight:700}

/* ---------- lists: inventory | targets ---------- */
.ux-lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ux-list{border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull);overflow:hidden}
.ux-lh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 0}
.ux-lh h2{font:800 18px/1 var(--display);text-transform:uppercase}
.ux-count{font-size:12px;color:var(--muted);text-align:right}
.ux-count b{color:var(--ux-acc)}
.ux-filters{display:grid;grid-template-columns:38px minmax(0,1fr) 92px 92px;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ux-filters .inp{height:38px;min-width:0}
.ux-sort{height:38px;border:1px solid var(--line-hi);border-radius:var(--r-sm);background:rgba(0,0,0,.35);color:var(--text);font:700 16px/1 var(--body);cursor:pointer}
.ux-sort:hover{border-color:var(--ux-acc)}
.ux-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:8px;padding:12px 16px 16px;max-height:600px;overflow-y:auto;align-content:start}
.ux-grid>p{grid-column:1/-1;color:var(--muted);font-size:14px;padding:18px 4px;text-align:center}
.ux-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:150px;padding:8px 8px 10px;border:1px solid var(--line);border-bottom:3px solid var(--rar,var(--line-hi));
  border-radius:var(--r-sm);background:radial-gradient(80% 60% at 50% 40%,color-mix(in srgb,var(--rar,#4B69FF) 16%,transparent),transparent 75%),rgba(255,255,255,.02);
  color:var(--text);font:inherit;text-align:center;cursor:pointer;transition:border-color .12s,transform .12s}
.ux-it:hover{border-color:var(--line-hi);transform:translateY(-1px)}
.ux-it.on{border-color:var(--ux-acc);box-shadow:inset 0 0 0 1px var(--ux-acc)}
.ux-it .ux-p{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.ux-it .ux-p b{color:var(--ux-acc)}
.ux-it .ux-p i{font-style:normal;color:var(--muted);font-size:11px}
.ux-it img{width:100%;height:68px;object-fit:contain;margin:4px 0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.ux-it .ux-w{font-size:11px;color:var(--muted);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-it .ux-n{font-size:12.5px;font-weight:700;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ux-it .ux-c{position:absolute;top:30px;right:6px;font-size:11px;font-weight:700;color:var(--ux-win);background:rgba(0,0,0,.55);border-radius:4px;padding:1px 4px}
.ux-it .ux-chk{position:absolute;top:28px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--ux-acc);color:#0B0F17;display:none;place-items:center;font-size:12px;font-weight:900}
.ux-it.on .ux-chk{display:grid}
.ux-more{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:10px}

@media (max-width:1080px){
  .ux-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-center{grid-column:1/-1;order:-1}
}
@media (max-width:720px){
  .ux-top,.ux-lists{grid-template-columns:1fr}
  .ux-art{min-height:150px}
  .ux-filters{grid-template-columns:38px repeat(2,minmax(0,1fr))}
  .ux-filters>input[type=search]{grid-column:2/4}.ux-filters>.ux-num:nth-of-type(2){grid-column:1/3}
  .ux-presets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ux-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));max-height:480px}
}
@media (prefers-reduced-motion:reduce){.ux-it,.ux-go{transition:none}}
/* the needle is a pointer that rides the rim, so it never covers the chance in the middle */
.ux-needle path{fill:var(--ux-acc);stroke:#0B0F17;stroke-width:1.5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ux-needle line{stroke:var(--ux-acc);stroke-width:3;stroke-linecap:round}
.ux-st{display:inline-block;font-style:normal;font-size:10px;font-weight:800;color:#CF6A32;border:1px solid rgba(207,106,50,.6);border-radius:3px;padding:0 3px;margin-right:4px;line-height:14px;vertical-align:1px}
.ux-more .btn{min-width:140px}
.ux-sv{color:#FFD700;border-color:rgba(255,215,0,.6)}
/* title: "CSGO Matchmaking Upgrader" centred above the wheel, wallet on the right of that row */
.ux-title{position:relative;justify-content:center;margin:4px 0 18px}
.ux-title h1{flex-direction:column;gap:6px;text-align:center;font:900 clamp(26px,3.2vw,40px)/1 var(--display);letter-spacing:.01em}
.ux-title h1 .ux-t1{display:flex;align-items:center;gap:10px}
.ux-title h1 .ux-t1 span{color:var(--ux-acc)}
.ux-title h1 svg{width:30px;height:30px}
.ux-title .ux-wallet{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (max-width:1080px){.ux-title{flex-direction:column;gap:12px}.ux-title .ux-wallet{position:static;transform:none}}
@media (max-width:720px){.ux-title h1 .ux-t1{flex-wrap:wrap;justify-content:center}}

/* stickers / name tag on your skins in the upgrader */
.ux-stk{display:flex;gap:2px;justify-content:center;margin:-2px 0 2px}
.ux-stk img{width:22px;height:16px;object-fit:contain;margin:0;filter:none}
.ux-tag{max-width:100%;font-size:10px;color:#FFD45C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}