@font-face {
    font-family:"DM Sans";
    font-style:normal;
    font-weight:400 800;
    font-display:swap;
    src:url("fonts/dm-sans-latin-ext.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family:"DM Sans";
    font-style:normal;
    font-weight:400 800;
    font-display:swap;
    src:url("fonts/dm-sans-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    font:1rem/1.6 "DM Sans",system-ui,sans-serif;
    color:#17273b;
    background:#f0f4f8;
    --link:#185480;
    --muted:#475b72;
    --line:#dce5ef;
    --tint:#eef5fb;
}
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--link); text-underline-offset:.18em; }
:focus-visible { outline:3px solid #2372b8; outline-offset:3px; }
.icon { width:1.1em; height:1.1em; flex:none; }
.site { max-width:79rem; margin:auto; padding:1.25rem; }
.masthead, aside, main, .legal-page {
    background:white;
    border:1px solid var(--line);
    border-radius:1rem;
}
.masthead {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.8rem 1.5rem;
    padding:.65rem 1.5rem;
}
.site-logo { display:block; width:min(17rem, 100%); }
.site-logo img { display:block; width:100%; height:auto; }
.platforms, .sort, .pagination { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.platforms, .sort {
    width:fit-content;
    max-width:100%;
    padding:.25rem;
    border-radius:.65rem;
    background:#f0f5fa;
}
.platforms a, .sort a, .pagination a, .pagination span {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    border-radius:.45rem;
    padding:.38rem .7rem;
    font-size:.875rem;
    font-weight:650;
    text-decoration:none;
}
.platforms a:hover, .sort a:hover, .pagination a:hover, aside nav a:hover { background:#e7f0f8; }
nav a[aria-current], .pagination [aria-current] { background:#dbeaf8; color:#133e64; font-weight:750; }
.masthead label { display:block; margin-bottom:.2rem; font-size:.8rem; font-weight:700; color:var(--muted); }
.masthead form div { display:flex; gap:.35rem; }
input, button { padding:.48rem .7rem; border-radius:.5rem; font:inherit; font-size:.875rem; }
input { min-width:0; width:100%; border:1px solid #899cb1; }
button, .actions a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    background:#195987;
    color:white;
    border:0;
    font-weight:700;
    cursor:pointer;
}
button:hover, .actions a:hover { background:#123f64; }
.actions a { text-decoration:none; padding:.6rem .85rem; border-radius:.55rem; }

.layout { display:grid; grid-template-columns:13.5rem minmax(0,1fr); align-items:start; gap:1rem; margin-top:1rem; }
aside { padding:.75rem; }
aside summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.35rem .5rem;
    list-style:none;
    font-weight:800;
    cursor:pointer;
}
aside summary::-webkit-details-marker { display:none; }
aside details[open] summary .icon { transform:rotate(180deg); }
aside nav { display:grid; gap:.13rem; margin-top:.35rem; }
aside nav a {
    display:flex;
    align-items:center;
    gap:.58rem;
    min-width:0;
    padding:.26rem .45rem;
    border-radius:.55rem;
    font-size:.9rem;
    font-weight:600;
    line-height:1.28;
    text-decoration:none;
    overflow-wrap:anywhere;
}
.category-icon {
    display:grid;
    flex:none;
    place-items:center;
    width:1.72rem;
    height:1.72rem;
    border-radius:.43rem;
    color:#205681;
    background:#e6f0fa;
}
.category-icon .icon { width:1rem; height:1rem; }
.category-icon:is([data-icon="compass"],[data-icon="puzzle"],[data-icon="flag"]) { color:#196657; background:#e2f4ed; }
.category-icon:is([data-icon="zap"],[data-icon="trophy"],[data-icon="timer"]) { color:#875013; background:#fff0d9; }
.category-icon:is([data-icon="layers"],[data-icon="brain"],[data-icon="type"]) { color:#5d4495; background:#f0eafa; }
.category-icon:is([data-icon="circle-dot"],[data-icon="grid-3x3"]) { color:#8d3e63; background:#fae8f0; }
aside .partner-link { margin-top:.45rem; padding-top:.55rem; border-top:1px solid var(--line); }
main { min-width:0; overflow-wrap:anywhere; padding:clamp(1rem,2.5vw,1.85rem); }
h1, h2, h3 { line-height:1.18; text-wrap:pretty; }
h1 { font-size:clamp(1.7rem,3.3vw,2.65rem); letter-spacing:-.043em; margin:0 0 .9rem; }
h2 { font-size:clamp(1.18rem,2.3vw,1.5rem); letter-spacing:-.025em; margin:1.65rem 0 .7rem; }
.result-count { font-size:.9rem; color:var(--muted); margin-bottom:0; }
.cards {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.8rem;
    list-style:none;
    margin:.8rem 0 1.15rem;
    padding:0;
}
.cards a {
    display:block;
    height:100%;
    color:#203850;
    border:1px solid var(--line);
    border-radius:.75rem;
    overflow:hidden;
    text-decoration:none;
    font-size:.95rem;
    font-weight:700;
}
.cards a:hover { color:var(--link); background:#f4f8fc; border-color:#77a3c5; text-decoration:underline; }
.cards img { display:block; width:100%; height:auto; aspect-ratio:7/6; object-fit:cover; background:#e8ecf2; }
.cards span { display:block; padding:.58rem .7rem; line-height:1.35; }
.overview {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:1.1rem;
    padding:clamp(.75rem,2vw,1.2rem);
    border:1px solid var(--line);
    border-radius:.8rem;
    background:linear-gradient(125deg,#eaf3fb,#f7fafc);
}
.overview > div { flex:1 1 15rem; min-width:0; }
.overview p { max-width:65ch; margin:0 0 .85rem; }
.overview p:last-child { margin:.8rem 0 0; }
.overview img { display:block; max-width:100%; height:auto; border-radius:.62rem; }
.instructions { display:flex; gap:.45rem; align-items:baseline; font-size:.87rem; }
.instructions .icon { align-self:center; color:var(--link); }
.prose { max-width:68ch; }
.features { display:grid; gap:.48rem 1.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); list-style:none; margin:0; padding:0; }
.features li { display:flex; align-items:baseline; gap:.5rem; }
.features .icon { color:#1b715f; align-self:start; margin-top:.21em; }
.specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:.55rem; margin:0; }
.specs > div { padding:.65rem .72rem; border:1px solid var(--line); border-radius:.55rem; background:#f7f9fc; }
.specs dt { display:flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:750; color:var(--muted); }
.specs dd { margin:.28rem 0 0; font-size:.9rem; font-weight:650; line-height:1.4; }
.screens { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:.65rem; }
.screens a { display:block; border-radius:.65rem; overflow:hidden; }
.screens img { width:100%; display:block; height:auto; aspect-ratio:16/10; object-fit:contain; background:#101827; }
.advertisement { max-width:100%; overflow:clip; }
.adsbygoogle { display:block; margin-top:1rem; }
footer { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1rem; padding:1.25rem .5rem; font-size:.875rem; color:var(--muted); }
.legal-page { width:min(100% - 2rem, 50rem); margin:1rem auto; padding:clamp(1rem,4vw,2.75rem); overflow-wrap:anywhere; }
.legal-page .site-logo { margin-bottom:1.25rem; }
.legal-page .legal-nav { display:flex; flex-wrap:wrap; gap:.5rem 1rem; padding-bottom:1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); font-weight:700; }

@media(max-width:53rem) {
    .layout { grid-template-columns:minmax(0,1fr); }
    aside { order:1; }
    aside nav { grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); }
    aside .partner-link { margin:0; padding-top:.26rem; border:0; }
}
@media(max-width:36rem) {
    .site { padding:.55rem; }
    .masthead { padding:.7rem .85rem; }
    .masthead form { width:100%; }
    .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
    h1 { margin-bottom:.7rem; }
}