/* Scoped to the catalog: the home page keeps its existing category component. */
.gg {
    --gg-bg:#f6f7fb;
    --gg-surface:#fff;
    --gg-soft:#eef0f7;
    --gg-text:#202235;
    --gg-muted:#62677d;
    --gg-line:#dfe3ee;
    --gg-primary:#415c0b;
    --gg-accent:#d0f65b;
    --gg-purple:#7041b5;
    --gg-shadow:0 12px 36px #27304b0a;
    color:var(--gg-text);
    text-align:right;
    padding:12px 18px 36px;
    max-width:1200px;
    margin:auto;
    isolation:isolate
}

.theme-dark .gg {
    --gg-bg:#12121c;
    --gg-surface:#1c1c29;
    --gg-soft:#242434;
    --gg-text:#f5f3eb;
    --gg-muted:#b2b2c5;
    --gg-line:#353547;
    --gg-primary:#d0f65b;
    --gg-accent:#d0f65b;
    --gg-purple:#c5a2f4;
    --gg-shadow:0 12px 36px #0000001a
}

.gg * {
    box-sizing:border-box
}

.gg [hidden] {
    display:none!important
}

.gg a {
    color:inherit;
    text-decoration:none
}

.gg a:hover {
    text-decoration:none
}

.gg button,.gg input,.gg select {
    font:inherit
}

.gg button,.gg select {
    cursor:pointer
}

.gg button {
    border:0
}

.gg :is(a,button,input,select,summary):focus-visible {
    outline:3px solid var(--gg-purple);
    outline-offset:4px
}

.gg h1,.gg h2,.gg h3,.gg p {
    color:inherit
}

.gg-sr {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
}

.gg-breadcrumb {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    color:var(--gg-muted);
    font-size:.76rem;
    margin:4px 0 12px
}

.gg .gg-breadcrumb a {
    font-size:.76rem!important
}

.gg-breadcrumb a:hover {
    color:var(--gg-purple)
}

.gg-hero {
    position:relative;
    display:grid;
    grid-template-columns:1.5fr 1fr;
    align-items:center;
    gap:24px;
    min-height:280px;
    padding:28px 32px;
    margin-bottom:20px;
    overflow:hidden;
    border:1px solid var(--gg-line);
    border-radius:28px;
    background:radial-gradient(ellipse at 9% 50%,#9c73df1c,transparent 58%),var(--gg-surface)
}

.gg-eyebrow {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.74rem;
    font-weight:700;
    color:var(--gg-purple);
    letter-spacing:0
}

.gg-eyebrow>span {
    width:7px;
    height:7px;
    background:var(--gg-purple);
    border-radius:50%
}

.gg-hero h1 {
    font-size:1rem!important;
    margin:14px 0 9px;
    color:var(--gg-muted)
}

.gg .gg-hero-question {
    font-size:clamp(1.8rem,3.8vw,3rem)!important;
    line-height:1.6;
    margin:0 0 10px;
    letter-spacing:-1px
}

.gg-hero-question span {
    color:var(--gg-primary)
}

.gg-hero-copy>p {
    max-width:520px;
    font-size:.94rem;
    line-height:2;
    margin:0 0 16px;
    color:var(--gg-muted)
}

.gg-hero-notes {
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    color:var(--gg-muted);
    font-size:.7rem
}

.gg-hero-notes span {
    display:flex;
    gap:6px;
    align-items:center
}

.gg-hero-notes i {
    color:var(--gg-purple)
}

.gg-hero-art {
    position:relative;
    height:240px;
    max-width:320px;
    width:100%;
    justify-self:center;
    pointer-events:none
}

.gg-orbit {
    position:absolute;
    border:1px solid var(--gg-line);
    border-radius:50%;
    width:230px;
    height:230px;
    top:0;
    left:30px;
    transform:rotate(-25deg) scaleY(.8)
}

.gg-orbit-two {
    transform:rotate(35deg) scaleY(.8);
    width:280px;
    left:5px
}

.gg-board-piece {
    position: absolute;
    width: 164px;
    height: 205px;
    top: 6px;
    left: 84px;
    transform: rotate(12deg);
    overflow: visible;
    filter: drop-shadow(9px 14px 12px #30234938);
}

.gg-die {
    position:absolute;
    width:74px;
    height:74px;
    border-radius:18px;
    background:linear-gradient(145deg,#e9ffa3,#aad534);
    box-shadow:inset -6px -6px 0 #7ea82555,8px 15px 20px #35392326;
    top:136px;
    left:54px;
    transform:rotate(-14deg);
    display:grid;
    grid-template:repeat(3,1fr)/repeat(3,1fr);
    padding:14px;
    gap:5px
}

.gg-die i {
    background:#334012;
    border-radius:50%;
    width:11px;
    height:11px
}

.gg-die i:nth-child(2) {
    grid-column:3
}

.gg-die i:nth-child(3) {
    grid-column:2;
    grid-row:2
}

.gg-die i:nth-child(4) {
    grid-row:3
}

.gg-die i:nth-child(5) {
    grid-row:3;
    grid-column:3
}

.gg-art-star {
    position:absolute;
    top:10px;
    left:230px;
    font-size:40px;
    color:var(--gg-purple)
}

.gg-art-caption {
    position:absolute;
    bottom:4px;
    left:24px;
    transform:rotate(-5deg);
    font-size:.82rem;
    color:var(--gg-purple)
}

.gg-finder {
    padding:22px;
    border:1px solid var(--gg-line);
    border-radius:22px;
    background:var(--gg-surface);
    box-shadow:var(--gg-shadow)
}

.gg-search-row {
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:18px
}

.gg-search {
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    background:var(--gg-bg);
    border:1px solid var(--gg-line);
    border-radius:14px;
    padding:0 16px;
    min-width:0
}

.gg-search:focus-within {
    border-color:var(--gg-purple);
    box-shadow:0 0 0 3px #a57bd91a
}

.gg-search>i {
    color:var(--gg-purple)
}

.gg-search input {
    background:transparent;
    color:var(--gg-text);
    border:0;
    outline:none!important;
    box-shadow:none;
    width:100%;
    height:54px;
    font-size:.9rem;
    min-width:0
}

.gg-search input::placeholder {
    color:var(--gg-muted);
    opacity:1
}

.gg-search input::-webkit-search-cancel-button {
    display:none
}

.gg-search button {
    background:var(--gg-soft);
    color:var(--gg-muted);
    border-radius:8px;
    flex:0 0 30px;
    height:30px;
    font-size:23px
}

.gg .gg-guide-link {
    font-size:.78rem!important;
    color:var(--gg-purple);
    white-space:nowrap;
    display:flex;
    gap:7px;
    align-items:center
}

.gg-filter-row {
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:14px;
    min-width:0
}

.gg-filter-row label,.gg-filter-label {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.8rem;
    min-width:105px;
    margin:0;
    font-weight:700;
    flex-shrink:0
}

.gg-filter-row label i,.gg-filter-label i {
    color:var(--gg-purple)
}

.gg-filter-row select {
    color:var(--gg-text);
    background:var(--gg-soft);
    border:1px solid var(--gg-line);
    border-radius:10px;
    padding:9px 12px;
    min-width:150px;
    font-size:.83rem
}

.gg-filter-hint {
    font-size:.72rem;
    color:var(--gg-muted)
}

.gg-chips {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    min-width:0
}

.gg .gg-chip {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border:1px solid var(--gg-line);
    background:var(--gg-bg);
    border-radius:10px;
    font-size:.75rem!important;
    color:var(--gg-muted);
    white-space:nowrap;
    transition:background .15s,color .15s
}

.gg .gg-chip:hover {
    border-color:var(--gg-purple);
    color:var(--gg-purple)
}

.gg .gg-chip.is-active {
    background:var(--gg-accent);
    border-color:var(--gg-accent);
    color:#253409
}

.gg-capacity-note {
    font-size:.75rem;
    line-height:1.9;
    margin:15px 0 0;
    padding-top:12px;
    border-top:1px solid var(--gg-line);
    color:var(--gg-muted)!important
}

.gg-results {
    margin-top:32px
}

.gg-section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px
}

.gg-section-heading h2 {
    font-size:1.25rem!important;
    line-height:1.8;
    margin:5px 0 0
}

.gg-section-heading>i {
    color:var(--gg-purple);
    font-size:1.5rem
}

.gg #gg-count {
    display:inline-flex;
    vertical-align:middle;
    font-size:.68rem;
    font-family:KalamehWebFaNum,sans-serif;
    font-weight:400;
    margin-right:8px;
    padding:3px 10px;
    border:1px solid var(--gg-line);
    border-radius:30px;
    color:var(--gg-muted);
    white-space:nowrap
}

.gg-reset {
    background:transparent;
    color:var(--gg-purple);
    padding:10px 0;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:.75rem;
    white-space:nowrap
}

.gg-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}

.gg-card {
    --cover:#6949ad;
    --cover-deep:#302344;
    min-width:0;
    background:var(--gg-surface);
    border:1px solid var(--gg-line);
    border-radius:19px;
    overflow:hidden;
    box-shadow:var(--gg-shadow);
    transition:transform .18s,border-color .18s
}

.gg-card.group-game-category--hidden-role {
    --cover:#ab4667;
    --cover-deep:#351e37
}

.gg-card.group-game-category--party {
    --cover:#349a8d;
    --cover-deep:#143e45
}

.gg-card.group-game-category--two-player {
    --cover:#4377bd;
    --cover-deep:#202b4e
}

.gg-card.group-game-category--fantasy {
    --cover:#9d67ba;
    --cover-deep:#393054
}

.gg-card.group-game-category--bluff {
    --cover:#b88441;
    --cover-deep:#463022
}

.gg-card.group-game-category--solo {
    --cover:#7a9c42;
    --cover-deep:#2b402a
}

.gg-card:hover {
    transform:translateY(-4px);
    border-color:var(--gg-purple)
}

.gg .gg-card-link {
    display:block;
    height:100%;
    font-size:inherit!important
}

.gg-card-cover {
    position:relative;
    aspect-ratio:1.9;
    overflow:hidden;
    background:var(--cover-deep)
}

.gg-card-cover img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:none;
    transition:transform .25s
}

.gg-card:hover img {
    transform:scale(1.04)
}

.gg-card-cover:after {
    content:'';
    position:absolute;
    inset:40% 0 0;
    background:linear-gradient(transparent,#0b0c1855);
    pointer-events:none
}

.gg-cover-fallback {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:radial-gradient(ellipse at 80% 0%,var(--cover),transparent 80%),var(--cover-deep);
    color:#fff
}

.gg-cover-fallback>i {
    font-size:64px;
    transform:rotate(-12deg);
    opacity:.9;
    text-shadow:0 7px 20px #0004
}

.gg-cover-ring {
    position:absolute;
    width:140px;
    height:140px;
    border:1px solid #ffffff25;
    border-radius:35px;
    transform:rotate(25deg)
}

.gg-cover-ring:before {
    content:'';
    position:absolute;
    inset:16px;
    border:1px solid #ffffff20;
    border-radius:25px
}

.gg-cover-word {
    position:absolute;
    left:14px;
    top:12px;
    font:700 .65rem/1.3 sans-serif;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.65;
    max-width:70%
}

.gg-card-badge {
    position:absolute;
    z-index:1;
    right:12px;
    bottom:10px;
    background:#151522b8;
    backdrop-filter:blur(8px);
    border:1px solid #ffffff24;
    color:#fff;
    font-size:.65rem;
    padding:4px 9px;
    border-radius:7px
}

.gg-card-body {
    padding:16px
}

.gg-card h3 {
    font-size:1.02rem!important;
    line-height:1.7;
    margin:0 0 6px
}

.gg-card-body>p {
    font-size:.75rem;
    color:var(--gg-muted);
    line-height:1.95;
    margin:0 0 12px;
    min-height:2.9em;
    font-weight:400
}

.gg-card-meta {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--gg-muted);
    font-size:.7rem;
    min-height:21px;
    font-weight:400
}

.gg-card-meta i {
    color:var(--gg-purple);
    font-size:.74rem
}

.gg-card-action {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    background:var(--gg-soft);
    border:1px solid var(--gg-line);
    padding:10px 13px;
    border-radius:10px;
    font-size:.78rem;
    color:var(--gg-text);
    transition:background .18s
}

.gg-card-action i {
    font-size:.72rem;
    color:var(--gg-purple)
}

.gg-card:hover .gg-card-action,.gg-card-link:focus-visible .gg-card-action {
    background:var(--gg-accent);
    border-color:var(--gg-accent);
    color:#253409
}

.gg-card:hover .gg-card-action i {
    color:#253409
}

.gg-more-wrap {
    text-align:center;
    margin:24px 0 0
}

.gg-more-wrap p {
    font-size:.7rem;
    color:var(--gg-muted);
    margin:10px 0 0
}

.gg-empty {
    text-align:center;
    padding:45px 18px;
    border:1px dashed var(--gg-line);
    border-radius:18px;
    background:var(--gg-surface)
}

.gg-empty>i {
    font-size:30px;
    color:var(--gg-purple);
    margin-bottom:18px
}

.gg-empty h3 {
    font-size:1.1rem!important
}

.gg-empty p {
    font-size:.84rem;
    line-height:2;
    color:var(--gg-muted);
    max-width:480px;
    margin:12px auto 20px
}

.gg-primary {
    background:var(--gg-accent);
    color:#253409;
    padding:12px 20px;
    border-radius:10px
}

.gg-noscript {
    font-size:.84rem;
    line-height:2
}

.gg-guide {
    margin-top:44px;
    padding:26px;
    border:1px solid var(--gg-line);
    border-radius:24px;
    background:var(--gg-surface);
    scroll-margin-top:90px
}

.gg-guide-intro,.gg-category-intro p {
    font-size:.84rem;
    line-height:2.2;
    color:var(--gg-muted)!important;
    margin:0 0 24px;
    max-width:920px
}

.gg-category-intro {
    padding:18px;
    background:var(--gg-bg);
    border-radius:12px;
    margin-bottom:24px
}

.gg-category-intro h3 {
    font-size:1rem!important;
    margin-bottom:10px
}

.gg-category-intro p {
    margin:0
}

.gg-guide-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:23px
}

.gg-guide-grid article+article {
    border-right:1px solid var(--gg-line);
    padding-right:23px
}

.gg-guide-icon {
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--gg-line);
    border-radius:12px;
    color:var(--gg-purple);
    background:var(--gg-bg);
    margin-bottom:12px
}

.gg-guide-grid h3 {
    font-size:.95rem!important;
    line-height:1.9;
    margin-bottom:10px
}

.gg-guide-grid p {
    font-size:.78rem;
    line-height:2.2;
    color:var(--gg-muted);
    margin-bottom:14px
}

.gg .gg-guide-grid a {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--gg-purple);
    font-size:.74rem!important;
    padding:7px 0;
    gap:8px
}

.gg-guide-grid a:hover {
    text-decoration:underline
}

.gg-how {
    border-top:1px solid var(--gg-line);
    margin-top:24px;
    padding-top:20px;
    display:flex;
    align-items:center;
    gap:18px
}

.gg-how-label {
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap
}

.gg-how ol {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:14px 22px;
    margin:0;
    padding:0
}

.gg-how li {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.74rem;
    color:var(--gg-muted)
}

.gg-how b {
    display:grid;
    place-items:center;
    background:var(--gg-soft);
    color:var(--gg-purple);
    border-radius:50%;
    width:25px;
    height:25px;
    font-weight:400
}

.gg-faq {
    margin-top:32px
}

.gg-faq details {
    border:1px solid var(--gg-line);
    border-radius:14px;
    background:var(--gg-surface);
    margin-bottom:10px;
    overflow:hidden
}

.gg-faq summary {
    position:relative;
    cursor:pointer;
    padding:18px 20px 18px 45px;
    font-size:.88rem;
    font-weight:700;
    list-style:none;
    color:var(--gg-text)
}

.gg-faq summary::-webkit-details-marker {
    display:none
}

.gg-faq summary:after {
    content:'+';
    position:absolute;
    left:20px;
    font-family:sans-serif;
    font-size:21px;
    font-weight:400;
    color:var(--gg-purple);
    top:13px
}

.gg-faq details[open] summary:after {
    content:'−'
}

.gg-faq details[open] summary {
    color:var(--gg-purple)
}

.gg-faq details p {
    border-top:1px solid var(--gg-line);
    padding:16px 20px;
    margin:0;
    color:var(--gg-muted);
    font-size:.82rem;
    line-height:2.2
}

.gg-end-note {
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    margin-top:32px;
    padding-top:18px;
    border-top:1px solid var(--gg-line);
    color:var(--gg-muted);
    font-size:.75rem
}

.gg-end-note>i {
    color:var(--gg-purple)
}

.gg .gg-end-note a {
    margin-right:auto;
    color:var(--gg-purple);
    font-size:.72rem!important
}

@media(min-width:1400px) {
    .gg {
        padding-inline:10px
    }
}

@media(max-width:900px) {
    .gg-hero {
        padding:25px;
        gap:10px;
        grid-template-columns:1.6fr 1fr
    }
    .gg-hero-art {
        transform:scale(.85)
    }
    .gg-search-row {
        gap:14px
    }
    .gg-finder {
        padding:18px
    }
    .gg-filter-row {
        align-items:flex-start
    }
    .gg-filter-row label,.gg-filter-label {
        padding-top:9px
    }
    .gg-filter-hint {
        padding-top:9px
    }
    .gg-grid {
        gap:13px
    }
    .gg-card-body {
        padding:13px
    }
    .gg-card h3 {
        font-size:.93rem!important
    }
    .gg-guide {
        padding:22px
    }
    .gg-guide-grid {
        gap:17px
    }
    .gg-guide-grid article+article {
        padding-right:17px
    }
}

@media(max-width:640px) {
    .gg {
        padding:8px 10px 30px
    }
    .gg-breadcrumb {
        font-size:.69rem;
        margin-bottom:10px
    }
    .gg .gg-breadcrumb a {
        font-size:.69rem!important
    }
    .gg-hero {
        min-height:0;
        display:block;
        padding:22px 19px 20px;
        border-radius:21px;
        margin-bottom:13px
    }
    .gg-hero-copy {
        position:relative;
        z-index:1
    }
    .gg-hero h1 {
        font-size:.83rem!important;
        max-width:75%;
        margin-top:13px
    }
    .gg .gg-hero-question {
        font-size:1.8rem!important;
        letter-spacing:-.7px;
        margin-bottom:8px;
        max-width:90%
    }
    .gg-hero-copy>p {
        font-size:.82rem;
        max-width:95%;
        line-height:2;
        margin-bottom:12px
    }
    .gg-hero-notes {
        gap:8px 12px;
        font-size:.62rem
    }
    .gg-hero-art {
        position:absolute;
        left:-50px;
        top:-45px;
        transform:scale(.4);
        transform-origin:top left;
        opacity:.22;
        width:320px;
        height:240px;
        left:80px;
        top:5px
    }
    .gg-art-caption {
        display:none
    }
    .gg-finder {
        padding:14px;
        border-radius:17px
    }
    .gg-search-row {
        display:block;
        margin-bottom:12px
    }
    .gg-search {
        padding:0 11px;
        gap:9px
    }
    .gg-search input {
        height:48px;
        font-size:.76rem
    }
    .gg .gg-guide-link {
        font-size:.67rem!important;
        margin:10px 2px 0;
        width:fit-content
    }
    .gg-filter-row {
        gap:9px;
        align-items:center;
        flex-wrap:wrap;
        margin-top:12px
    }
    .gg-filter-row label,.gg-filter-label {
        min-width:93px;
        font-size:.74rem;
        padding:0
    }
    .gg-filter-row select {
        font-size:.76rem;
        padding:8px 10px;
        min-width:132px;
        flex:1
    }
    .gg-filter-hint {
        display:none
    }
    .gg-categories {
        display:block;
        padding-top:12px;
        border-top:1px solid var(--gg-line)
    }
    .gg-chips {
        margin-top:9px;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding:3px 2px 9px;
        scrollbar-width:thin;
        scrollbar-color:var(--gg-line) transparent
    }
    .gg .gg-chip {
        font-size:.7rem!important;
        padding:8px 10px;
        flex-shrink:0
    }
    .gg-results {
        margin-top:23px
    }
    .gg-section-heading {
        gap:8px;
        margin-bottom:13px
    }
    .gg-section-heading h2 {
        font-size:1.05rem!important;
        margin-top:3px
    }
    .gg-eyebrow {
        font-size:.65rem
    }
    .gg #gg-count {
        font-size:.6rem;
        margin-right:4px;
        padding:2px 7px
    }
    .gg-reset {
        font-size:.63rem;
        gap:4px
    }
    .gg-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:11px
    }
    .gg-card {
        border-radius:14px
    }
    .gg-card-cover {
        aspect-ratio:1.35
    }
    .gg-cover-fallback>i {
        font-size:48px
    }
    .gg-cover-word {
        font-size:.5rem;
        letter-spacing:1px;
        top:8px;
        left:8px
    }
    .gg-cover-ring {
        width:105px;
        height:105px;
        border-radius:23px
    }
    .gg-card-badge {
        right:7px;
        bottom:7px;
        font-size:.54rem;
        padding:3px 6px;
        max-width:calc(100% - 14px)
    }
    .gg-card-body {
        padding:11px
    }
    .gg-card h3 {
        font-size:.87rem!important;
        line-height:1.8;
        min-height:1.8em;
        margin-bottom:5px
    }
    .gg-card-body>p {
        font-size:.67rem;
        line-height:1.9;
        min-height:3.8em;
        margin-bottom:9px
    }
    .gg-card-meta {
        font-size:.6rem;
        gap:5px;
        align-items:flex-start;
        line-height:1.8;
        min-height:2.6em
    }
    .gg-card-meta i {
        font-size:.6rem;
        margin-top:4px
    }
    .gg-card-action {
        font-size:.7rem;
        padding:9px;
        margin-top:10px;
        border-radius:8px
    }
    .gg-card-action i {
        font-size:.65rem
    }
    .gg-more-wrap {
        margin-top:20px
    }
    .gg-guide {
        margin-top:30px;
        padding:18px;
        border-radius:18px
    }
    .gg-guide .gg-section-heading h2 {
        font-size:1.02rem!important
    }
    .gg-section-heading>i {
        font-size:1.2rem;
        flex-shrink:0
    }
    .gg-guide-intro,.gg-category-intro p {
        font-size:.78rem;
        margin-bottom:20px
    }
    .gg-guide-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .gg-guide-grid article+article {
        border-right:0;
        border-top:1px solid var(--gg-line);
        padding-right:0;
        padding-top:20px
    }
    .gg-guide-grid h3 {
        font-size:.9rem!important
    }
    .gg-guide-grid p {
        font-size:.76rem;
        margin-bottom:8px
    }
    .gg-guide-icon {
        width:35px;
        height:35px;
        margin-bottom:9px
    }
    .gg .gg-guide-grid a {
        font-size:.72rem!important
    }
    .gg-how {
        display:block;
        margin-top:20px;
        padding-top:16px
    }
    .gg-how ol {
        display:grid;
        gap:11px;
        margin-top:13px
    }
    .gg-faq {
        margin-top:26px
    }
    .gg-faq summary {
        font-size:.78rem;
        line-height:1.9;
        padding:15px 14px 15px 38px
    }
    .gg-faq summary:after {
        left:14px;
        top:12px
    }
    .gg-faq details p {
        font-size:.76rem;
        padding:14px;
        line-height:2.1
    }
    .gg-end-note {
        font-size:.68rem;
        gap:7px;
        margin-top:22px
    }
    .gg .gg-end-note a {
        width:100%;
        margin:5px 0 0;
        font-size:.68rem!important
    }
    .gg-capacity-note {
        font-size:.68rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .gg * {
        transition:none!important;
        scroll-behavior:auto!important
    }
    .gg-card:hover,.gg-card:hover img {
        transform:none
    }
}

/* Keep games visible early, especially above the mobile navigation dock. */
.gg-filter-row select {
    width:180px;
    flex:0 0 180px
}

@media(min-width:641px) {
    .gg-hero {
        min-height:250px;
        padding-block:22px
    }
    .gg-hero-art {
        height:220px
    }
    .gg-art-caption {
        bottom:-3px
    }
    .gg-filter-hint {
        white-space:nowrap
    }
}

@media(max-width:640px) {
    .gg-hero {
        padding:16px 17px
    }
    .gg .gg-hero-question {
        font-size:1.6rem!important;
        line-height:1.6;
        margin-bottom:5px
    }
    .gg-hero h1 {
        margin:8px 0 5px
    }
    .gg-hero-copy>p {
        font-size:.78rem;
        line-height:1.9;
        margin-bottom:8px
    }
    .gg-hero-notes {
        font-size:.59rem
    }
    .gg-hero-notes span:last-child {
        display:none
    }
    .gg .gg-guide-link {
        display:none
    }
    .gg-search-row {
        margin-bottom:8px
    }
    .gg-filter-row select {
        width:auto;
        flex:1 1 100px;
        min-width:0
    }
    .gg-categories {
        display:flex;
        flex-wrap:nowrap;
        gap:8px;
        padding-top:10px
    }
    .gg-categories .gg-filter-label {
        min-width:72px;
        font-size:.68rem
    }
    .gg-chips {
        margin-top:0;
        padding-bottom:5px
    }
    .gg-results .gg-section-heading .gg-eyebrow {
        display:none
    }
    .gg-results {
        margin-top:18px
    }
    .gg-section-heading {
        margin-bottom:11px
    }
}