:root { --ink:#243131; --muted:#64706d; --paper:#fffdf8; --soft:#f5f0e6; --yellow:#f6c86e; --coral:#e98e72; --line:#e5ddd0; --radius:1.25rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:ui-rounded, "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif; line-height:1.5; } a { color:inherit; text-underline-offset:.18em; } .site-header, main, .site-footer { width:min(1120px, calc(100% - 2.5rem)); margin-inline:auto; } .site-header { position:sticky; top:0; z-index:100; min-height:5.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--paper); } .wordmark { color:var(--ink); font-size:1.65rem; font-weight:780; letter-spacing:-.07em; text-decoration:none; } nav { display:flex; flex-wrap:wrap; gap:1.2rem; } nav a { color:#485452; font-size:.95rem; text-decoration:none; } nav a:hover, nav a:focus-visible { text-decoration:underline; } .intro { max-width:730px; padding:5.5rem 0 4.25rem; } .eyebrow { margin:0 0 .8rem; color:#a55b46; font-size:.78rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:600px; margin-bottom:1.7rem; font-size:clamp(3rem, 8vw, 5.6rem); letter-spacing:-.075em; line-height:.96; } h2 { margin-bottom:.35rem; font-size:1.65rem; letter-spacing:-.045em; } .search { display:flex; align-items:center; width:min(100%, 480px); padding:0 .9rem; border:1px solid var(--line); border-radius:999px; background:#fff; } .search:focus-within { outline:3px solid #f8dca4; outline-offset:2px; } .search svg { width:1.25rem; fill:none; stroke:#75817e; stroke-width:1.8; } .search input { width:100%; padding:.85rem .75rem; border:0; outline:0; background:transparent; font:inherit; } .content-section { padding:1.2rem 0 5rem; } .section-heading { margin-bottom:1.55rem; } .section-heading p { margin:0; color:var(--muted); } .game-grid { display:grid; grid-template-columns:minmax(0, 410px); } .game-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 8px 30px rgb(82 71 51 / .06); } .game-image { aspect-ratio:3/2; background:#f3e6c9; } .game-image img { width:100%; height:100%; display:block; object-fit:cover; } .game-content { padding:1.2rem 1.25rem 1.35rem; } .card-topline { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; color:var(--muted); font-size:.8rem; } .coming-soon { color:#9e513d; font-weight:700; } h3 { margin-bottom:.45rem; font-size:1.55rem; letter-spacing:-.04em; } .game-content > p:not(.ai-note) { color:var(--muted); } .ai-note { margin:1.25rem 0 0; color:#78827e; font-size:.78rem; } .categories { padding-bottom:6.5rem; } .category-list { display:flex; flex-wrap:wrap; gap:.65rem; } .category { padding:.6rem .9rem; border:1px solid var(--line); border-radius:999px; color:#495552; background:#fff; font:inherit; font-size:.93rem; cursor:pointer; } .category:hover { border-color:#ccb98f; } .category.active { border-color:var(--yellow); background:#fff2cf; color:#664716; font-weight:700; } .no-results { color:var(--muted); } .site-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; padding:2rem 0 2.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; } .site-footer p { max-width:330px; margin:0; } .legal-page { max-width:760px; padding:4rem 0 6rem; } .legal-page h1 { font-size:clamp(2.8rem, 6vw, 4.5rem); } .lead { max-width:630px; margin-bottom:3rem; color:#52605d; font-size:1.2rem; } .text-columns { display:grid; gap:1.2rem; } .text-columns section, .legal-copy { padding:1.25rem; border-radius:var(--radius); background:var(--soft); } .text-columns h2, .legal-copy h2 { margin:0 0 .45rem; font-size:1.2rem; } .text-columns p, .legal-copy p { margin-bottom:0; color:#56615f; } .legal-copy { display:grid; gap:1.6rem; background:transparent; padding:0; } .legal-copy h2 { margin-bottom:.35rem; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:620px) { .site-header { min-height:6.5rem; align-items:flex-start; padding-top:1.25rem; flex-direction:column; } .site-header nav { gap:1rem; } .intro { padding:4.25rem 0 3rem; } .site-footer { align-items:flex-start; flex-direction:column; } }
.game-grid{grid-template-columns:repeat(2,minmax(0,410px));gap:1.2rem}.fangmich-cover{background:radial-gradient(circle at 50% 50%,#fff6d8 0 13%,#e9bd4c 14% 15%,transparent 16%),radial-gradient(circle at 33% 31%,#e9655a 0 6%,transparent 6.5%),radial-gradient(circle at 67% 31%,#8064bc 0 6%,transparent 6.5%),radial-gradient(circle at 31% 70%,#52a56d 0 6%,transparent 6.5%),radial-gradient(circle at 69% 70%,#4e9fbe 0 6%,transparent 6.5%),linear-gradient(145deg,#d8efe7,#b3d7dc)}@media(max-width:700px){.game-grid{grid-template-columns:minmax(0,410px)}}