@font-face{font-family:Monocraft;src:url("../assets/fonts/Monocraft.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Monocraft;src:url("../assets/fonts/Monocraft-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Monocraft;src:url("../assets/fonts/Monocraft-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Monocraft;src:url("../assets/fonts/Monocraft-Bold-Italic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}

.market{padding-block:40px 90px}
.market-lag{border:1px solid var(--accent);background:#26291f;padding:18px 22px;margin-bottom:30px}
.market-lag p{margin:0;font-size:1.125rem}
.market-lag p+p{margin-top:8px;color:var(--muted)}
.market-tools{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:end;margin-bottom:14px}
.market-tools label{font-size:1.125rem}
.market-search{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.market-search span,.market-sort span{font-weight:650}
.market-tools input[type=search],.market-tools select{font:inherit;font-size:1.125rem;color:var(--ink);background:#161915;border:1px solid var(--line);border-radius:3px;padding:11px 13px;min-height:48px}
.market-tools input[type=search]:focus-visible,.market-tools select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.market-check{display:flex;align-items:center;gap:10px;min-height:48px}
.market-check input{width:22px;height:22px;accent-color:var(--accent)}
.market-sort{display:flex;flex-direction:column;gap:6px}
.market-count{color:var(--muted);font-size:1.125rem;margin-bottom:26px}

.market-shops{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr));gap:18px;align-items:start}
.shop{border:1px solid var(--line);background:#23261f;min-width:0}
.shop[open]{grid-column:1/-1;border-color:var(--green)}
.shop-head{list-style:none;cursor:pointer;padding:14px 16px 12px;position:relative}
.shop-head::-webkit-details-marker{display:none}
.shop-head::after{content:"+";position:absolute;top:10px;right:14px;font:700 1.5rem/1 var(--font-sans);color:var(--green)}
.shop[open]>.shop-head::after{content:"\2212"}
.shop[open]>.shop-head{border-bottom:1px solid var(--line)}
.shop-head:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.shop-head:hover .shop-name{background:rgba(0,0,0,.6)}
.shop-name{display:inline-block;font-family:Monocraft,ui-monospace,monospace;font-size:1.125rem;font-weight:400;letter-spacing:0;line-height:1.5;background:rgba(0,0,0,.45);padding:2px 8px;margin:0 28px 8px 0;text-shadow:2px 2px 0 rgba(0,0,0,.35);overflow-wrap:anywhere;color:#fff}
.shop-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:1.125rem;color:var(--muted);margin:0 0 8px}
.shop-meta strong{color:var(--ink);font-weight:650}
.shop-coords{display:inline-flex;align-items:center;gap:8px}
.shop-coords code{font-size:1.125rem;color:var(--ink)}
.copy-coords{font:inherit;font-size:1.125rem;background:transparent;border:1px solid var(--line);color:var(--green);border-radius:3px;padding:0 8px;min-height:32px}
.copy-coords:hover{border-color:var(--green)}
.shop-tag{font-size:1.125rem;color:#203329;background:var(--accent);padding:0 8px;border-radius:2px}
.shop-peek{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-peek-icons{display:flex;gap:2px}
.shop-peek-icons img{width:32px;height:32px;image-rendering:pixelated}
.shop-summary{font-size:1.125rem;color:var(--muted)}
.listings{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,265px),1fr));gap:8px}
.listing{display:flex;gap:12px;align-items:flex-start;padding:8px;background:#1b1e18;border:1px solid #34382d;min-width:0}
.listing.is-out{opacity:.62}
.listing-body{display:flex;flex-direction:column;min-width:0;gap:2px}
.listing-name{font-size:1.125rem;line-height:1.35;overflow-wrap:anywhere;font-weight:650}
.listing-price{font-size:1.125rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.listing-stock{font-size:1.125rem;color:var(--muted)}
.listing-stock .in{color:var(--green)}
.listing-stock .out{color:#e0a080}
.listing-discount{color:var(--accent);font-weight:650}
.listing.market-empty{grid-column:1/-1;background:none;border:0}

/* inventory slot */
.slot{position:relative;width:56px;height:56px;padding:4px;background:#8b8b8b;border:2px solid;border-color:#373737 #fff #fff #373737;flex:none;cursor:help;font:inherit;color:inherit}
.slot:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.slot.small{width:40px;height:40px;padding:2px;cursor:help}
.slot img,.slot .head{width:100%;height:100%;display:block;image-rendering:pixelated;object-fit:contain}
.slot .count{position:absolute;right:2px;bottom:-1px;font:400 1.125rem/1 Monocraft,ui-monospace,monospace;color:#fff;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none}
.slot.small .count{font-size:1.125rem;right:1px;bottom:-3px}
.slot .glint{position:absolute;inset:4px;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 30%,rgba(190,110,255,.75) 45%,transparent 60%) 0 0/250% 250%;-webkit-mask:var(--sprite) center/contain no-repeat;mask:var(--sprite) center/contain no-repeat;animation:glint 3.2s linear infinite}
@keyframes glint{from{background-position:120% 0}to{background-position:-120% 0}}
.head3d{--s:26px;position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;perspective:none}
.slot.small .head3d{--s:18px}
.shop-peek-icons .head3d{--s:17px;width:32px;height:32px}
.head3d .cube{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-45deg)}
.head3d i{--k:1;position:absolute;left:50%;top:50%;width:calc(var(--s)*var(--k));height:calc(var(--s)*var(--k));margin:calc(var(--s)*var(--k)/-2) 0 0 calc(var(--s)*var(--k)/-2);background-repeat:no-repeat;image-rendering:pixelated;backface-visibility:hidden;
  background-size:calc(var(--s)*var(--k)*8) calc(var(--s)*var(--k)*8);background-position:calc(var(--s)*var(--k)*var(--u)/-8) calc(var(--s)*var(--k)*var(--v)/-8)}
.head3d.legacy i{background-size:calc(var(--s)*var(--k)*8) calc(var(--s)*var(--k)*4)}
.head3d i.hat{--k:1.125}
.head3d .f-front{transform:translateZ(calc(var(--s)*var(--k)/2));filter:brightness(.8)}
.head3d .f-side{transform:rotateY(90deg) translateZ(calc(var(--s)*var(--k)/2));filter:brightness(.6)}
.head3d .f-top{transform:rotateX(90deg) translateZ(calc(var(--s)*var(--k)/2))}

/* in-game tooltip */
.mc-tooltip{position:fixed;z-index:50;max-width:min(420px,calc(100vw - 24px));padding:7px 10px 8px;background:rgba(16,0,16,.94);border:2px solid #100010;box-shadow:inset 0 0 0 2px #2a0a60;outline:2px solid transparent;font:400 1.125rem/1.45 Monocraft,ui-monospace,monospace;color:#fff;text-shadow:2px 2px 0 #3f3f3f;pointer-events:none;overflow-wrap:anywhere}
.mc-tooltip::before{content:"";position:absolute;inset:2px;border:2px solid;border-image:linear-gradient(#5000ff,#28007f) 1;pointer-events:none}
.mc-tooltip .line{display:block;min-height:1.45em}
.mc-tooltip .sep{display:block;height:8px}
.mc-tooltip .trade{border-top:1px solid #3c2a5c;margin-top:6px;padding-top:6px}


.market-noscript{font-size:1.125rem}
.market-empty{font-size:1.125rem;color:var(--muted)}

@media(max-width:700px){
.market{padding-block:25px 60px}
.listings{padding:8px}
}
@media(prefers-reduced-motion:reduce){.slot .glint{animation:none;background-position:50% 0}}
