/* CSGO Matchmaking — market, skin database, tournaments, premium, buy MP */

/* loadout sub-nav (market / cases / upgrader / fire sale / skin database) */
.subnav{border-bottom:1px solid var(--line);background:var(--hull)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:14px 14px 12px;font-size:14px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--text)}
.subnav a[aria-current]{color:var(--text);border-bottom-color:var(--blue)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:32px;padding:0 12px;border:1px solid var(--line-hi);border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.chip:hover{color:var(--text);border-color:var(--ice)}
.chip[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
.chip .rd{width:8px;height:8px;border-radius:50%}

/* rarity colours (CS standard) */
.rd-consumer{background:#B0C3D9}.rd-industrial{background:#5E98D9}.rd-milspec{background:#4B69FF}.rd-restricted{background:#8847FF}
.rd-classified{background:#D32CE6}.rd-covert{background:#EB4B4B}.rd-extraordinary{background:#E4AE39}
.r-consumer{--rar:#B0C3D9}.r-industrial{--rar:#5E98D9}.r-milspec{--rar:#4B69FF}.r-restricted{--rar:#8847FF}.r-classified{--rar:#D32CE6}.r-covert{--rar:#EB4B4B}.r-extraordinary{--rar:#E4AE39}

/* market layout */
.market{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.mk-filters{position:sticky;top:88px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull);padding:18px}
.mk-filters h2{display:flex;justify-content:space-between;align-items:baseline;font:700 20px/1 var(--display);text-transform:uppercase}
.mk-filters h2 button{font:500 13px var(--body);color:var(--ice);text-transform:none}
.fgroup{margin-top:18px}
.fgroup>span,.fgroup>label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.inp{height:38px;width:100%;background:#000;border:1px solid var(--line-hi);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:14px;padding:0 10px}
.inp:focus{outline:none;border-color:var(--blue)}
select.inp{appearance:none}
.pair+.chips{margin-top:8px}
.mk-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.mk-toolbar .f-search{flex:1}
.mk-toolbar .inp{height:44px}
.mk-toolbar .f-search input{padding-left:38px}
.mk-count{font-size:13px;color:var(--muted);white-space:nowrap}
.filter-toggle{display:none}

/* skin cards */
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.skin{border:1px solid var(--line);border-top:2px solid var(--rar,var(--line-hi));border-radius:var(--r-md);background:var(--hull);padding:12px;display:flex;flex-direction:column}
.skin-img{position:relative;aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--r-sm);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--rar,#2F7BFF) 22%,transparent),transparent 70%)}
.skin-img img{max-width:88%;max-height:88%;object-fit:contain}
.skin-wear{position:absolute;left:6px;top:6px;font-size:11px;color:var(--muted);background:rgba(0,0,0,.6);padding:2px 6px;border-radius:3px}
.skin h3{font-size:14px;font-weight:600;margin-top:10px;line-height:1.3}
.skin-sub{font-size:12px;color:var(--muted);margin-top:3px}
.float-bar{position:relative;height:4px;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,#2F7BFF 0 7%,#5E98D9 7% 15%,#7C89A3 15% 38%,#4A5672 38% 45%,#24375A 45%)}
.float-bar i{position:absolute;top:-3px;width:2px;height:10px;background:#fff;border-radius:1px}
.skin-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.skin-foot .btn{height:32px;padding:0 10px;font-size:12px}
.skin-foot .who{font-size:13px}
.skin-foot .av{width:22px;height:22px;font-size:10px}
.price{font:800 20px/1 var(--display)}
.price small{font:600 11px var(--body);color:var(--muted)}
.note{font-size:12px;color:var(--dim);margin-top:16px}

/* tabs (simple underline) */
.utabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px}
.utabs [role=tab]{padding:12px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;gap:8px;align-items:center}
.utabs [role=tab][aria-selected=true]{color:var(--text);border-bottom-color:var(--blue)}
.utabs .n{font-size:12px;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--muted)}
.utabs [aria-selected=true] .n{background:var(--blue-deep);color:#fff}
.sd-tools{display:flex;gap:10px;margin-bottom:16px}
.sd-tools .f-search{flex:1}

/* tournaments */
.cups{display:grid;gap:14px}
.cup{display:grid;grid-template-columns:120px minmax(0,1fr) 300px;gap:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull)}
.cup-upcoming{border-color:var(--line-hi);background:linear-gradient(120deg,#0E2552 0%,var(--hull) 45%)}
.cup-art{width:120px;height:120px;border-radius:var(--r-md);background:#000 url(/assets/img/maps/inferno.jpg) center/cover;overflow:hidden}
.cup-art img{width:100%;height:100%;object-fit:cover}
.cup-tags{display:flex;gap:6px;flex-wrap:wrap}
.cup h3{font:800 32px/1 var(--display);text-transform:uppercase;margin-top:12px}
.cup-desc{color:#B7C3DA;margin-top:10px;max-width:60ch;font-size:15px}
.cup-req{font-size:13px;color:var(--muted);margin-top:10px}
.cup-side{display:flex;flex-direction:column;gap:8px}
.cup-prize{font:900 46px/1 var(--display)}
.cup-prize small{display:block;font:500 13px var(--body);color:var(--muted);margin-top:4px}
.cup .fill{height:6px;background:#000;border-radius:3px;overflow:hidden;margin-top:6px}
.cup .fill i{display:block;height:100%;background:var(--blue)}
.cup-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.cup-row b{color:var(--text);font-weight:600}
.cup-side .btn{margin-top:auto;height:44px}
.pill-live{border-color:#E5484D;color:#FF8A8D}

/* checkout (premium + buy MP) */
.co{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.co-summary{position:sticky;top:88px;border:1px solid var(--line-hi);border-radius:var(--r-md);background:var(--hull);padding:20px}
.co-summary h2{font:700 22px/1 var(--display);text-transform:uppercase}
.sum{display:grid;gap:10px;margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sum div{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.sum dd{color:var(--text);font-weight:600}
.sum .big dd{font:900 30px/1 var(--display)}
.consent{display:grid;grid-template-columns:18px 1fr;gap:10px;margin-top:14px;font-size:13px;color:#B7C3DA;cursor:pointer}
.consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--blue)}
.consent a{color:var(--ice);text-decoration:underline}
.methods{display:grid;gap:6px;margin-top:16px}
.methods>span{font-size:13px;color:var(--muted)}
.method{display:grid;text-align:left;gap:2px;padding:12px 14px;border:1px solid var(--line-hi);border-radius:var(--r-sm)}
.method b{font-weight:600;font-size:14px}
.method small{font-size:12px;color:var(--muted)}
.method[aria-pressed=true]{border-color:var(--blue);background:rgba(47,123,255,.1)}
.co-pay{width:100%;height:50px;margin-top:16px;font-size:15px}
.co-pay:disabled{opacity:.45;cursor:not-allowed}
.co-fine{font-size:12px;color:var(--dim);margin-top:10px}
.co-err{margin-top:10px;font-size:13px;color:#FFB3B5;padding:10px 12px;border:1px solid rgba(229,72,77,.4);border-radius:var(--r-sm);background:rgba(229,72,77,.1)}

.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pkg{display:grid;gap:6px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull)}
.pkg:hover{border-color:var(--line-hi)}
.pkg[aria-pressed=true]{border-color:var(--blue);background:linear-gradient(140deg,#0E2552,var(--hull) 80%)}
.pkg-bonus{font-size:12px;font-weight:700;color:var(--ice)}
.pkg-bonus.none{color:var(--dim);font-weight:500}
.pkg-mp{font:900 32px/1 var(--display)}
.pkg-mp small{font:600 13px var(--body);color:var(--muted)}
.pkg-eur{font-size:15px;font-weight:600;color:#B7C3DA}
.custom{margin-top:14px;padding:18px;border:1px dashed var(--line-hi);border-radius:var(--r-md)}
.custom label{font-weight:600;font-size:14px}
.custom p{font-size:13px;color:var(--muted);margin-top:2px}
.eur-in{position:relative;max-width:200px;margin-top:10px}
.eur-in span{position:absolute;left:12px;top:11px;color:var(--muted)}
.eur-in input{padding-left:26px;height:44px}
.uses{font-size:13px;color:var(--muted);margin-top:16px}
.uses a{color:var(--ice);text-decoration:underline}

.steps-nav{display:flex;gap:8px;list-style:none;margin-bottom:24px}
.steps-nav li{display:flex;gap:10px;align-items:center;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--muted)}
.steps-nav li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:12px;font-weight:700}
.steps-nav li.on{color:var(--text);border-color:var(--blue)}
.steps-nav li.on span{background:var(--blue);color:#fff}
.durs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dur{display:grid;gap:4px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull)}
.dur small{font-size:12px;color:var(--ice);font-weight:600}
.dur b{font:800 26px/1 var(--display);text-transform:uppercase}
.dur[aria-pressed=true]{border-color:var(--blue);background:linear-gradient(140deg,#0E2552,var(--hull) 80%)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.plan{position:relative;display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--hull)}
.plan-pro{border-color:var(--blue);background:linear-gradient(160deg,#0E2552 0%,var(--hull) 55%)}
.plan[aria-pressed=true]{box-shadow:0 0 0 2px var(--ice)}
.plan-flag{position:absolute;top:-11px;left:20px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--blue);color:#fff}
.plan h3{font:900 34px/1 var(--display);text-transform:uppercase}
.plan .tag-line{color:var(--muted);margin-top:6px;font-size:14px}
.plan-cost{display:flex;align-items:baseline;gap:8px;margin-top:18px}
.plan-price{font:900 44px/1 var(--display)}
.plan-per{color:var(--muted);font-size:14px}
.plan-mp{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:var(--ice)}
.plan ul{list-style:none;display:grid;gap:9px;margin:20px 0 22px}
.plan li{position:relative;padding-left:22px;font-size:14px;color:#C3CDE0}
.plan li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border-left:2px solid var(--ice);border-bottom:2px solid var(--ice);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;height:46px}
.review{margin-top:40px;scroll-margin-top:90px}

/* responsive */
@media (max-width:1100px){
  .cup{grid-template-columns:96px minmax(0,1fr)}
  .cup-art{width:96px;height:96px}
  .cup-side{grid-column:1/-1}
  .co{grid-template-columns:1fr}
  .co-summary{position:static}
}
@media (max-width:900px){
  .market{grid-template-columns:1fr}
  .mk-filters{position:static;display:none}
  .mk-filters.open,form.open .mk-filters{display:block}
  .filter-toggle{display:inline-flex}
  .plans{grid-template-columns:1fr}
  .durs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkg{padding:14px}
  .pkg-mp{font-size:24px}
  .cup{grid-template-columns:1fr}
  .cup-art{display:none}
  .mk-toolbar{flex-wrap:wrap}
  .mk-toolbar .f-search{flex-basis:100%}
  .steps-nav li{font-size:13px}
}

/* inventory + market actions (skins that work in game) */
.btn.btn-sm{height:30px;padding:0 10px;font-size:12px}
.iv-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pill-gift{border-color:#B98CFF;color:#D5BEFF}
.pill-st{border-color:#CF6A32;color:#F0A070}
.pill-eq{border-color:var(--blue,#2F7BFF);color:var(--ice,#9CC2FF)}
.skin.is-eq{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue,#2F7BFF) 60%,transparent)}
.iv-msg{font-style:italic}
.iv-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.iv-note{font-size:12px;color:var(--muted);margin-right:2px}
.iv-act .iv-sell{margin-left:auto}
.btn.iv-on{background:color-mix(in srgb,var(--blue,#2F7BFF) 25%,transparent);border:1px solid var(--blue,#2F7BFF);color:var(--text)}
.iv-out{margin:0 0 14px}
.out.bad{color:#FF8A8D}
.sk-dlg{border:1px solid var(--line-hi);border-radius:var(--r-md);background:var(--deck,#0d1117);color:var(--text);padding:0;width:min(420px,calc(100vw - 32px))}
.sk-dlg::backdrop{background:rgba(0,0,0,.7)}
.sk-dlg-body{display:grid;gap:12px;padding:20px}
.sk-dlg h2{font-size:18px}
.sk-dlg label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.sk-dlg-btns{display:flex;justify-content:flex-end;gap:8px}

/* inventory: clickable items + item menu */
.iv-item{cursor:pointer;text-align:left;color:inherit;font:inherit;transition:border-color .15s,transform .15s}
.iv-item:hover,.iv-item[aria-expanded]{border-color:var(--line-hi);transform:translateY(-2px)}
.iv-item:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.iv-item.is-locked .skin-img img{filter:saturate(.6)}
.iv-lock{position:absolute;right:6px;top:6px;width:24px;height:24px;display:grid;place-items:center;border-radius:4px;background:rgba(0,0,0,.65);color:#F5C451}
.iv-lock svg{width:14px;height:14px}
.iv-menu{position:absolute;z-index:900;width:300px;max-width:calc(100vw - 16px);border:1px solid var(--line-hi);border-radius:var(--r-md);background:#0B0F17;box-shadow:0 18px 44px rgba(0,0,0,.65);overflow:hidden;animation:ivIn .14s ease-out}
@keyframes ivIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.iv-mh{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 12px 16px;border-bottom:1px solid var(--line);position:relative}
.iv-mh::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--rar,var(--blue))}
.iv-mh div{flex:1;min-width:0;display:grid;gap:2px}
.iv-mh b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-mh small{font-size:12px;color:var(--muted)}
.iv-mx{background:none;border:0;color:var(--muted);cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:4px}
.iv-mx:hover{color:var(--text);background:rgba(255,255,255,.06)}
.iv-mx svg{width:16px;height:16px}
.iv-mb{padding:6px}
.iv-mb hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.iv-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:6px;background:none;color:var(--c,var(--text));font:600 14px/1.2 inherit;text-align:left;cursor:pointer}
.iv-mi:hover:not([disabled]),.iv-mi:focus-visible{background:rgba(255,255,255,.06);outline:none}
.iv-mi[disabled]{color:#56607A;cursor:not-allowed}
.iv-mi .ic{width:18px;height:18px;flex:none}
.iv-mi .ic svg{width:18px;height:18px}
.iv-mi em{margin-left:auto;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;font-style:normal;color:var(--muted)}
.iv-mi.c-t{--c:#F5A524}.iv-mi.c-ct{--c:#5B9BFF}.iv-mi.c-both{--c:#B490FF}.iv-mi.c-sell{--c:#E6EAF2}.iv-mi.c-burn{--c:#F59E0B}.iv-mi.c-tu{--c:#3CD3E8}.iv-mi.c-del{--c:#FF6B6E}
.iv-mi.on::after{content:"✓";margin-left:auto;font-size:13px}
.iv-mi.c-burn em{color:#F59E0B}.iv-mi.c-tu em,.iv-mi.c-sell em{color:#E6EAF2}
.iv-mi[disabled] em{color:#56607A}
.iv-mf{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.iv-mf b{color:var(--rar,var(--muted));font-weight:600}
.iv-menu.sheet{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:80vh;overflow:auto}

/* trade-up mode */
body.tu-on{padding-bottom:120px}
.iv-item.tu-no{opacity:.32}
.iv-item.tu-ok:not(.tu-pick){border-style:dashed;border-color:var(--line-hi)}
.iv-item.tu-pick{border-color:#3CD3E8;box-shadow:0 0 0 1px #3CD3E8 inset}
.iv-check{position:absolute;left:6px;bottom:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#3CD3E8;color:#001014;font-weight:800;font-size:13px}
.tu-bar{position:fixed;left:0;right:0;bottom:0;z-index:800;border-top:1px solid var(--line-hi);background:rgba(5,9,16,.96);backdrop-filter:blur(8px)}
.tu-in{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.tu-h{display:grid;gap:2px;min-width:200px}
.tu-h b{font:800 18px/1 var(--display);text-transform:uppercase;color:#3CD3E8}
.tu-h span{font-size:13px;color:var(--muted)}
.tu-slots{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.tu-slot{width:52px;height:40px;border:1px dashed var(--line-hi);border-radius:6px;background:var(--black);display:grid;place-items:center;padding:2px}
button.tu-slot{border-style:solid;border-color:var(--rar,var(--line-hi));cursor:pointer}
.tu-slot img{max-width:100%;max-height:100%;object-fit:contain}
.tu-btns{display:flex;gap:8px}
.tu-out{list-style:none;display:grid;gap:4px;max-height:44vh;overflow:auto;margin:10px 0 0;padding:0}
.tu-out li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.tu-out li span{display:flex;align-items:center;gap:8px;color:var(--text)}
.tu-out img{width:44px;height:32px;object-fit:contain}
.tu-out em{font-style:normal;color:#3CD3E8;font-weight:700}
.tu-out small{color:var(--muted)}
.tu-win{display:grid;justify-items:center;gap:6px;padding:12px;border-radius:var(--r-md);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rar,#2F7BFF) 30%,transparent),transparent 70%)}
.tu-win img{width:220px;max-width:100%}
.tu-win b{font-size:17px;color:var(--text)}
.tu-win small{color:var(--muted)}
@media (max-width:640px){.tu-slot{width:40px;height:32px}.tu-btns{width:100%}.tu-btns .btn{flex:1}}
.iv-sort select{height:42px;background:var(--black);border:1px solid var(--line-hi);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:14px;padding:0 12px}

/* favourite cases */
.ct-img{position:relative}
.ct-fav{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;color:rgba(255,255,255,.55);background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:color .15s,transform .15s}
.ct-fav:hover{color:#fff;transform:scale(1.08)}
.ct-fav.on{color:#f5c542;border-color:rgba(245,197,66,.6)}
.ct-favs .section-title{color:#f5c542}

.methods [hidden]{display:none!important}

.pr-mine{margin:0 0 18px;padding:12px 16px;border:1px solid rgba(232,184,74,.4);border-radius:var(--r-md);background:rgba(232,184,74,.07);font-size:14px;color:#D9E2F2}
.pr-mine b{color:var(--gold)}