:root{--bg:#f4f1e9;--ink:#171717;--muted:#74716b;--line:#d8d3c8;--lime:#c8f25a;--coral:#ff765f;--violet:#8b78ff;--paper:#f5f1e8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.site-header{height:72px;padding:0 max(24px,5vw);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(244,241,233,.94);backdrop-filter:blur(12px);z-index:5}.logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800}.logo b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white}.search{margin-left:auto;width:min(340px,45vw);display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:white;padding:9px 13px;border-radius:7px}.search input{border:0;outline:0;background:transparent;width:100%;font:inherit}.sound{width:38px;height:38px;border:1px solid var(--line);background:transparent;border-radius:50%;cursor:pointer}main{width:min(1260px,90vw);margin:auto}.intro{padding:75px 0 50px;border-bottom:1px solid var(--line)}.intro p{font:10px 'Press Start 2P';color:var(--coral)}.intro h1{font-size:clamp(44px,7vw,88px);letter-spacing:-.06em;margin:15px 0 8px;line-height:1}.intro span{color:var(--muted);font-size:17px}.category-filters{display:flex;gap:8px;flex-wrap:wrap;padding:28px 0}.category-btn{padding:9px 15px;border-radius:20px;border:1px solid var(--line);background:transparent;cursor:pointer;font:600 13px 'DM Sans'}.category-btn.active{background:var(--ink);color:white;border-color:var(--ink)}.catalog-title{display:flex;justify-content:space-between;align-items:center;margin:12px 0 22px}.catalog-title h2{font-size:27px;margin:0}.catalog-title span{color:var(--muted);font-size:13px}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:70px}.game-card{min-height:240px;border:1px solid var(--line);background:white;border-radius:8px;overflow:hidden;cursor:pointer;transition:.18s transform,.18s box-shadow;position:relative}.game-card:hover,.game-card:focus{transform:translateY(-4px);box-shadow:0 12px 25px rgba(0,0,0,.08);outline:0}.game-visual{height:140px!important;display:grid;place-items:center;position:relative;overflow:hidden}.game-icon{font:38px 'Press Start 2P';color:var(--ink)}.game-info{padding:16px!important;min-height:100px!important;display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(0,0,0,.12)}.game-info .tag{font:8px 'Press Start 2P';opacity:.6}.game-info h3{font-size:19px!important;margin:8px 0 2px!important}.game-info p{font-size:12px!important;color:#474747;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.game-info button{width:34px!important;height:34px!important;font-size:16px!important;flex:none}.planned::after{content:'IN SVILUPPO';position:absolute;top:10px;right:10px;background:var(--ink);color:white;padding:6px 7px;border-radius:3px;font:7px 'Press Start 2P'}.empty{text-align:center;padding:70px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:35px 5vw;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}dialog{width:min(900px,94vw);padding:0;border:0;border-radius:8px;background:var(--paper);box-shadow:0 30px 100px rgba(0,0,0,.5)}dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(6px)}.modal-header{height:90px;padding:0 24px;display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line)}.modal-header h2{margin:2px 0}.modal-header>div:first-child{margin-right:auto}.modal-header span{font-size:9px;letter-spacing:.15em}.score{font-size:12px;color:var(--muted)}.score strong{font-size:20px;color:var(--ink);margin-left:7px}.close-btn{border:0;background:transparent;font-size:35px;cursor:pointer}.game-stage{min-height:460px;background:#101010;display:grid;place-items:center;position:relative}.game-stage canvas{max-width:100%;max-height:65vh}.game-controls{padding:16px 24px;text-align:center;color:var(--muted);font-size:13px}.hidden-card{display:none!important}
@media(max-width:1000px){.game-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.site-header{padding:0 18px}.logo span{display:none}.game-grid{grid-template-columns:repeat(2,1fr)}main{width:92vw}.intro{padding-top:50px}.game-info p{max-width:130px}}@media(max-width:440px){.game-grid{grid-template-columns:1fr}.search{width:auto}.game-info p{max-width:230px}}