@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#11110f;--panel:#1a1a17;--line:#30302a;--text:#f1efe8;--muted:#a19f94;--accent:#d6ff54}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:"Space Grotesk",sans-serif}
header{padding:34px 4vw 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;gap:20px;background:linear-gradient(110deg,#171714,#10100e)}
.eyebrow{font:11px "DM Mono";letter-spacing:3px;color:var(--accent);margin-bottom:7px}h1{font-size:52px;line-height:.8;margin:0;letter-spacing:-3px}.brand span{font:11px "DM Mono";letter-spacing:2px;color:var(--muted)}
.stats{display:flex;gap:24px;font:12px "DM Mono";color:var(--muted)}.stat b{display:block;font:22px "Space Grotesk";color:var(--text);margin-top:4px}
.controls{position:sticky;top:0;z-index:5;padding:14px 4vw;display:grid;grid-template-columns:minmax(250px,2fr) 1fr 1fr 1fr;gap:9px;background:#11110feF;backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.search,select{height:45px;border:1px solid var(--line);background:#191916;color:var(--text);border-radius:7px;font:13px "Space Grotesk";padding:0 13px}.search{display:flex;align-items:center;gap:10px}.search span{font-size:25px;color:var(--accent)}input{width:100%;border:0;outline:0;background:transparent;color:inherit;font:inherit}
.resultbar{padding:16px 4vw 8px;display:flex;justify-content:space-between;color:var(--muted);font:12px "DM Mono"}button{cursor:pointer}.resultbar button{background:none;border:0;color:var(--accent);font:12px "DM Mono"}
main{padding:12px 4vw 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;transition:.2s transform,.2s border}.card:hover{transform:translateY(-4px);border-color:#626257}
.visual{height:205px;background:linear-gradient(135deg,#22221d,#161614);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.visual img{width:100%;height:100%;object-fit:contain}.placeholder{font:42px "DM Mono";color:#4a4a40}.pill{position:absolute;top:10px;left:10px;background:#10100ee8;border:1px solid #414138;border-radius:20px;padding:5px 8px;font:10px "DM Mono";color:var(--accent)}
.info{padding:14px}.game{font:10px "DM Mono";letter-spacing:.8px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title{font-weight:600;font-size:16px;line-height:1.18;margin:7px 0 4px;min-height:38px}.exp{font:11px "DM Mono";color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);margin-top:13px;padding-top:11px}.value{font-size:18px;font-weight:600}.value small,.qty{font:10px "DM Mono";color:var(--muted);display:block}.qty b{color:var(--text);font-size:14px}
.modal{position:fixed;inset:0;background:#000a;z-index:20;display:grid;place-items:center;padding:20px}.modalBox{position:relative;max-width:800px;width:100%;max-height:90vh;overflow:auto;background:#191916;border:1px solid var(--line);border-radius:14px;padding:28px}.close{position:absolute;right:12px;top:10px;background:none;border:0;color:white;font-size:30px}.detail{display:grid;grid-template-columns:1fr 1fr;gap:24px}.detailImg{min-height:330px;background:#22221d;border-radius:9px;display:grid;place-items:center}.detailImg img{width:100%;max-height:420px;object-fit:contain}.detail h2{font-size:32px;line-height:1;margin:8px 0 20px}.rows{display:grid;gap:11px}.row{border-bottom:1px solid var(--line);padding-bottom:9px;color:var(--muted);font:12px "DM Mono"}.row b{display:block;color:var(--text);font:15px "Space Grotesk";margin-top:3px}.link{display:inline-block;margin-top:18px;background:var(--accent);color:#111;padding:11px 14px;border-radius:6px;text-decoration:none;font-weight:600}
@media(max-width:800px){header{align-items:start;flex-direction:column}.controls{grid-template-columns:1fr 1fr}.search{grid-column:span 2}.detail{grid-template-columns:1fr}main{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.visual{height:165px}}

/* Fix: l'attributo hidden deve vincere sul display:grid della modale */
.modal[hidden]{display:none!important}
