/* Home and category discovery. Shared navigation and footer live in portal-layout.css. */
/* A small game is one square unit, a medium game 2x2 and a hero 3x3.
   Navigation and collection links share that unit instead of stretching rows. */
:is(.route-home,.route-categories,.route-category) .site-shell{container-type:inline-size;grid-template-columns:repeat(var(--portal-columns),minmax(0,1fr));column-gap:var(--portal-grid-gap)}
:is(.route-home,.route-categories,.route-category) .site-rail{grid-column:1}
:is(.route-home,.route-categories,.route-category) .site-main{grid-column:2/-1}
.route-home .site-main>.layout,.route-categories .site-main>.layout,.route-category .site-main>.layout{min-height:0}
.route-home .site-main main{padding:0 0 70px}
.route-home .site-footer{--footer-fold-top:-54px;--footer-fold-height:64px}
.route-home .home-intro{height:0}
.route-home .home-catalog-more{display:flex;justify-content:center;padding:12px 0 28px}
.route-home .home-catalog-more .empty-state-action{gap:8px;margin-top:0}
.catalog-guide{max-width:1050px;margin:24px auto 0;padding:clamp(18px,2vw,28px);border-radius:17px;background:#fff;color:#163e59;line-height:1.7;overflow-wrap:anywhere}
.catalog-guide h2{margin:0 0 12px;font-size:clamp(1.2rem,1.6vw,1.65rem);line-height:1.3}
.catalog-guide p{margin:0 0 12px}
.catalog-guide p:last-child{margin-bottom:0}
.catalog-guide a{color:#087bbb;text-underline-offset:3px}
.route-home .home-module{--discovery-tile:calc((100cqw - (var(--discovery-content-columns) - 1) * var(--discovery-gap)) / var(--discovery-content-columns));container-type:inline-size;margin:0 0 20px}
.route-home .site-rail{pointer-events:none}
.route-home .rail-head{pointer-events:auto}
.route-home .home-module--all>h2{margin:0 0 14px}
.route-home .home-module--all:first-of-type>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Explicit square tracks keep tall cards and the ad from inflating every row. */
.route-home .home-wall{--grid-columns:var(--discovery-content-columns);--home-gap:var(--discovery-gap);--home-tile:var(--discovery-tile);--home-ad-height:105px;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-auto-rows:var(--home-tile);gap:var(--home-gap);align-items:start;grid-auto-flow:dense}
.route-home .home-wall--lead{--grid-columns:var(--discovery-columns);width:calc(100% + var(--discovery-tile) + var(--discovery-gap));margin-left:calc(0px - var(--discovery-tile) - var(--discovery-gap))}
.route-home .home-rail-spacer{display:block;order:-2;grid-column:1;grid-row:1;min-height:0;visibility:hidden;pointer-events:none}
/* The enabled banner follows the mosaic, without splitting its packing rows. */
.route-home .home-wall--with-ad{padding-bottom:max(0px,calc(var(--home-ad-height) - var(--home-tile)))}
.route-home .home-wall--with-ad>.ad-slot--home-feed{order:1;grid-column:1/-1;grid-row:auto;align-self:start;width:100%;height:var(--home-ad-height);min-height:var(--home-ad-height);margin:0}
.route-home .home-wall .card{border:0;border-radius:clamp(11px,.8vw,17px);box-shadow:var(--game-card-shadow,0 6px 13px #075f6633)}
/* The static card sequence interleaves sizes; dense packing fills around them. */
.route-home :is(.home-wall,.category-group .cards) .card--hero{grid-column:span 3;grid-row:span 3}
.route-home :is(.home-wall,.category-group .cards) .card--medium{grid-column:span 2;grid-row:span 2}
.route-home .home-module--categories{width:100%;margin-left:0}
.route-home .home-module--categories:first-of-type{padding-left:0}
.route-home .home-module--categories:first-of-type ~ .home-module .home-rail-spacer{display:none}
.category-tiles,.category-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:clamp(10px,1vw,20px)}
.category-tile{display:flex;align-items:center;gap:10px;min-width:0;min-height:112px;padding:7px 11px 7px 7px;border-radius:17px;background:#fff;box-shadow:0 9px 17px #05607232;color:#163e59;text-decoration:none;transition:transform .17s ease,box-shadow .17s ease}
.category-tile:hover{transform:translateY(-3px);box-shadow:0 14px 24px #0560723a}
.category-tile-art{display:grid;place-items:center;flex:0 0 94px;width:94px;height:94px;overflow:hidden;border-radius:12px;background:transparent;color:#0c7ca5}
.category-tile-art>img{display:block;width:100%;height:100%;object-fit:contain}
.category-illustration{position:relative;display:block;width:100%;height:100%;overflow:hidden;aspect-ratio:1;background:transparent}
.category-tile strong{min-width:0;font-size:clamp(.78rem,.85vw,.94rem);line-height:1.3;overflow-wrap:anywhere}
.category-tile--all .category-tile-art--all{place-content:center;grid-template-columns:repeat(2,18px);grid-template-rows:repeat(2,18px);gap:7px;background:#e9f7ff}
.category-tile-art--all i{display:block;width:18px;height:18px;border:4px solid #0b91df;border-radius:5px}
.route-home .category-group{container-type:inline-size;margin:24px 0 0}
.route-home .category-group .cards{--grid-columns:var(--discovery-content-columns);grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-auto-rows:var(--discovery-tile);gap:var(--discovery-gap)}
.route-home .category-group .section-heading{margin-bottom:10px}
.route-home .category-group .section-heading h3{margin:0;font-size:1.1rem}
.route-home .ad-slot--home-feed{border:0;border-radius:0;background:#d8fff2b3;box-shadow:none}
.route-categories .site-main main,.route-category .site-main main{padding:0 0 150px}
.route-categories .category-index{min-height:0}
.route-categories .site-rail{pointer-events:none}
.route-categories .rail-head{pointer-events:auto}
.route-category .site-rail{pointer-events:none}
.route-category .rail-head{pointer-events:auto}
@media(min-width:901px){.route-home .site-main>.layout:has(>main>.empty-state){min-height:max(0px,calc(100svh - 40px - 330px))}}
/* Every selected category has a real directory link, including empty collections. */
/* Six square discovery cards lead into horizontal collection links. Both use
   the same square unit and gap as the surrounding game wall. */
.route-home .category-tiles--home{display:grid;grid-template-columns:repeat(var(--discovery-columns),minmax(0,1fr));grid-auto-rows:var(--discovery-tile);gap:var(--discovery-gap);width:calc(100% + var(--discovery-tile) + var(--discovery-gap));margin-left:calc(0px - var(--discovery-tile) - var(--discovery-gap));align-items:stretch}
.route-home .home-module--categories:first-of-type .category-tiles--home::before{content:"";grid-column:1;grid-row:1;pointer-events:none}
.route-home .category-tiles--home>.category-tile{grid-column:span 2;flex-direction:row;gap:10px;min-height:0;padding:6px;border-radius:15px;text-align:left}
.route-home .category-tiles--home>.category-tile .category-tile-art{flex:0 0 calc(var(--discovery-tile) - 12px);width:calc(var(--discovery-tile) - 12px);height:calc(var(--discovery-tile) - 12px);aspect-ratio:1;border-radius:10px}
.route-home .category-tiles--home>.category-tile strong{font-size:clamp(.8rem,.85vw,.94rem);line-height:1.3}
.route-home .category-tiles--home>.category-tile--featured{grid-row:span 2;flex-direction:column;align-items:stretch;justify-content:space-between;gap:6px;padding:10px 12px 12px}
.route-home .category-tiles--home>.category-tile--featured .category-tile-art{flex:1 1 0;width:100%;height:auto;min-height:0;aspect-ratio:auto;border-radius:0}
.route-home .category-tiles--home>.category-tile--featured .category-illustration{width:auto;max-width:100%;height:100%;aspect-ratio:1}
.route-home .category-tiles--home>.category-tile--featured strong{flex:none;padding-inline:3px}
/* The complete directory returns beneath the navigation after its first row.
   Its title occupies four units; every category keeps the 2x1 proportion. */
.route-categories .category-directory{--discovery-tile:calc((100cqw - (var(--discovery-columns) - 1) * var(--discovery-gap)) / var(--discovery-columns));grid-template-columns:repeat(var(--discovery-columns),minmax(0,1fr));grid-auto-rows:var(--discovery-tile);gap:var(--discovery-gap);width:calc(100% + var(--discovery-tile) + var(--discovery-gap));margin:0 0 0 calc(0px - var(--discovery-tile) - var(--discovery-gap));align-items:stretch}
.route-categories .category-directory-title{display:grid;place-items:center;grid-column:2/span 4;grid-row:1;min-width:0;min-height:0;margin:0;padding:10px;border-radius:18px;background:#fff;box-shadow:0 8px 18px #075f6629;text-align:center}
.route-categories .category-directory-title h1{margin:0;color:#0b3a55;font-size:clamp(1.5rem,2vw,2rem);font-weight:850;line-height:1.2;letter-spacing:-.03em;overflow-wrap:anywhere}
.route-categories .category-directory .category-tile{grid-column:span 2;gap:10px;min-height:0;padding:6px;border-radius:15px;box-shadow:0 7px 15px #0560722b}
.route-categories .category-directory .category-tile:hover{box-shadow:0 11px 21px #05607238}
.route-categories .category-directory .category-tile-art{flex-basis:calc(var(--discovery-tile) - 12px);width:calc(var(--discovery-tile) - 12px);height:calc(var(--discovery-tile) - 12px);border-radius:10px}
.route-categories .category-directory .category-tile strong{font-size:.9rem;font-weight:800;line-height:1.3}
.route-categories .category-directory-info{margin:32px 0 0;padding:28px 32px;border-radius:16px;background:#fff;color:#173e5b;box-shadow:0 6px 16px #075f661c}
.route-categories .category-directory-info .crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;color:#496a7e;font-size:.85rem}
.route-categories .category-directory-info h2{margin:0 0 12px;color:#0b3a55;font-size:1.25rem;line-height:1.3}
.route-categories .category-directory-info p{max-width:90ch;margin:0 0 10px;font-size:.98rem;line-height:1.7;overflow-wrap:anywhere}
.route-categories .category-directory-info p:last-child{margin-bottom:0}
.route-category .category-empty-heading{--category-tile:calc((100cqw - (var(--discovery-content-columns) - 1) * var(--discovery-gap)) / var(--discovery-content-columns));display:flex;align-items:center;gap:8px;width:calc(2 * var(--category-tile) + var(--discovery-gap));height:var(--category-tile);min-width:0;min-height:0;padding:6px;border-radius:16px;background:#fff;box-shadow:0 8px 18px #075f6629}
.route-category .category-empty-heading>.category-illustration{flex:0 0 calc(var(--category-tile) - 12px);width:calc(var(--category-tile) - 12px);height:calc(var(--category-tile) - 12px);border-radius:10px}
.route-category .category-empty-heading h1{min-width:0;margin:0;color:#0b3a55;font-size:clamp(.8rem,1.2vw,1.1rem);line-height:1.2;overflow-wrap:anywhere}
.route-category .category-list-page{container-type:inline-size;--category-columns:var(--discovery-columns);--category-gap:var(--discovery-gap)}
/* Match the homepage unit, then return the game wall beneath the navigation.
   Only the first cell belongs to the logo; lower cells contain real games. */
.route-category .category-mosaic{--category-tile:calc((100cqw - (var(--discovery-content-columns) - 1) * var(--category-gap)) / var(--discovery-content-columns));display:grid;grid-template-columns:repeat(var(--category-columns),minmax(0,1fr));grid-auto-rows:var(--category-tile);grid-auto-flow:dense;gap:var(--category-gap);min-width:0;width:calc(100% + var(--category-tile) + var(--category-gap));margin-left:calc(0px - var(--category-tile) - var(--category-gap))}
.route-category .category-mosaic::before{content:"";grid-column:1;grid-row:1;min-width:0;min-height:0;visibility:hidden;pointer-events:none}
.route-category .category-mosaic-title{container-type:inline-size;display:grid;place-items:center;grid-column:span 2;grid-row:span 1;min-width:0;min-height:0;padding:10px;border-radius:16px;background:#fff;box-shadow:0 8px 18px #075f6629;text-align:center}
.route-category .category-mosaic-title h1{width:100%;max-width:100%;margin:0;color:#0b3a55;font-size:clamp(1rem,1.8vw,1.6rem);font-size:clamp(1rem,12cqi,2.2rem);line-height:1.15;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
.route-category .category-mosaic-title--long,.route-category .category-mosaic-title--extended{grid-row:span 1}
.route-category .category-mosaic-title.category-mosaic-title--long h1{font-size:clamp(.75rem,1.25vw,1.1rem)}
.route-category .category-mosaic-title.category-mosaic-title--extended h1{font-size:clamp(.62rem,.9vw,.84rem);line-height:1.2}
.route-category .category-mosaic-game{grid-column:span 1;grid-row:span 1;min-width:0;min-height:0}
.route-category .category-mosaic-game--hero{grid-column:span 3;grid-row:span 3}
.route-category .category-mosaic-game--medium{grid-column:span 2;grid-row:span 2}
.route-category .category-mosaic-game>.card{display:block;width:100%;height:100%;aspect-ratio:1;border:0;border-radius:clamp(11px,.8vw,16px)}
.route-category .category-mosaic-game>.card .cover{overflow:hidden;border-radius:inherit}
.route-category .category-mosaic-game>.card:focus-visible{overflow:visible}
.route-category .category-mosaic-link{display:flex;align-items:center;grid-column:span 2;grid-row:span 1;gap:10px;min-width:0;min-height:0;padding:6px;border-radius:14px;background:#fff;box-shadow:0 6px 16px #075f6629;color:#173e5b;text-decoration:none;transition:transform .17s ease,box-shadow .17s ease}
.route-category .category-mosaic-art{display:grid;place-items:center;flex:0 0 calc(var(--category-tile) - 12px);width:calc(var(--category-tile) - 12px);height:calc(var(--category-tile) - 12px);overflow:hidden;border-radius:9px;background:transparent;color:#0b91df;font-size:1.8rem}
.route-category .category-mosaic-art>img{display:block;width:100%;height:100%;object-fit:contain}
.route-category .category-mosaic-link strong{min-width:0;font-size:clamp(.8rem,.9vw,1rem);line-height:1.3;overflow-wrap:anywhere}
.route-category .category-list-page .category-description{max-width:none;margin:24px 0 0;padding:28px 32px;border:0;border-radius:16px;background:#fff;box-shadow:0 6px 16px #075f661c}
.route-category .category-list-page .category-description h2{margin:0 0 12px;color:#0c3753;overflow-wrap:anywhere}
.route-category .category-list-page .category-description p{max-width:85ch;margin:0;line-height:1.7}
@media(hover:hover){.route-category .category-mosaic-game>.card:hover{overflow:visible}.route-category .category-mosaic-link:hover{transform:translateY(-2px);box-shadow:0 10px 20px #075f6638}}
/* All discovery routes reduce their column count together; card spans stay fixed. */
@media(max-width:650px){
  .route-category .category-mosaic-title{border-radius:12px}
  .route-category .category-mosaic-title h1{font-size:clamp(1rem,4.2vw,1.5rem)}
  .route-category .category-mosaic-link{gap:7px;padding:5px;border-radius:12px}
  .route-category .category-mosaic-art{flex-basis:calc(var(--category-tile) - 10px);width:calc(var(--category-tile) - 10px);height:calc(var(--category-tile) - 10px);border-radius:8px}
  .route-category .category-mosaic-link strong{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){.route-category .category-mosaic-link{transition:none}.route-category .category-mosaic-link:hover{transform:none}}
@media(max-width:900px){:is(.route-home,.route-categories,.route-category) .site-shell{--discovery-content-columns:var(--discovery-columns);display:block}.route-home .home-wall--lead,.route-home .category-tiles--home{width:100%;margin-left:0}.route-home .home-module--categories:first-of-type{padding-left:0}.route-home .home-rail-spacer{display:none}}
@media(max-width:900px){.route-home .home-module--categories:first-of-type .category-tiles--home::before{display:none}.route-categories .category-directory{width:100%;margin-left:0}.route-categories .category-directory-title{grid-column:1/span 4}}
@media(max-width:900px){.route-category .category-mosaic{width:100%;margin-left:0}.route-category .category-mosaic::before{display:none}}
@media(max-width:650px){.route-home .home-module{margin-bottom:18px}.category-tile{gap:7px;border-radius:12px}.category-tile strong{font-size:.76rem}.category-tile--all .category-tile-art--all{grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:5px}.category-tile-art--all i{width:12px;height:12px;border-width:3px;border-radius:3px}.route-category .category-list-page .category-description{margin-top:30px;padding:22px 18px}}
@media(max-width:650px){.route-home .site-main main{padding-bottom:58px}.route-home .site-footer{--footer-fold-top:-40px;--footer-fold-height:50px}.route-categories .site-main main,.route-category .site-main main{padding-bottom:100px}}
@media(max-width:650px){.route-home .home-wall{--home-ad-height:92px}}
@media(prefers-reduced-motion:reduce){.category-tile{transition:none}.category-tile:hover{transform:none}}

/* The full catalog is a text directory, separate from image game cards. */
.route-all-games .site-main>.site-header{display:none}
.route-all-games .site-main>.layout{min-height:max(0px,calc(100svh - 40px - 330px))}
.route-all-games .site-main main{padding:0 0 160px}
.all-games-directory{min-width:0}
.all-games-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:86px;margin:0 0 22px;padding:20px 26px;border-radius:18px;background:#fff;box-shadow:0 8px 18px #075f6629}
.all-games-heading h1{margin:0;color:#083d54;font-size:clamp(1.55rem,2.3vw,2rem);line-height:1.2;letter-spacing:-.03em}
.all-games-page-count{flex:none;margin:0;color:#628197;font-size:.94rem;font-weight:650;line-height:1.35;white-space:nowrap}
.all-games-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px;margin:0;padding:0;list-style:none}
.all-games-list>li{min-width:0}
.all-games-link{display:flex;align-items:center;width:100%;min-height:48px;height:100%;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 6px 14px #075f6629;color:#173e5b;font-size:.94rem;font-weight:650;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
.all-games-link:focus-visible{color:#118ee4}
@media(hover:hover){.all-games-link:hover{color:#118ee4}}
.catalog-pagination{--page-step:36px;display:grid;justify-items:center;gap:8px;width:fit-content;max-width:100%;margin:28px auto 0;padding:12px 16px;border:1px solid #d8eeef;border-radius:16px;background:#fff;box-shadow:0 6px 18px #075f661c}
.catalog-pagination-caption{margin:0;color:#6b8798;font-size:.76rem;line-height:1.3;white-space:nowrap}
.catalog-pagination-caption strong{color:#173e5b;font-weight:750}
.catalog-pagination-controls{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:4px;min-width:0}
.catalog-page,.catalog-pagination-gap{display:grid;place-items:center;flex:0 0 var(--page-step);min-width:var(--page-step);height:var(--page-step);padding:0;border-radius:9px;color:#50738b;font-size:.86rem;font-weight:700;line-height:1;text-decoration:none;font-variant-numeric:tabular-nums}
.catalog-page{background:#f0f8fb;transition:background-color .12s ease,color .12s ease}
.catalog-page--arrow{background:transparent;color:#1685bd}
.catalog-page[aria-current=page]{background:#119bd7;color:#fff;box-shadow:0 3px 7px #079bd62b}
.catalog-page:focus-visible{outline:2px solid #087dc3;outline-offset:2px}
.catalog-page.is-disabled{color:#bdd0d9;background:transparent;box-shadow:none}
.catalog-pagination-gap{flex-basis:16px;min-width:16px;color:#8aa0ae;background:transparent}
@media(hover:hover){.catalog-page[href]:hover{background:#e1f2fa;color:#087dc3}.catalog-page[aria-current=page]:hover{background:#0c8bc3;color:#fff}}
@media(prefers-reduced-motion:reduce){.catalog-page{transition:none}}
@media(max-width:900px){
  .route-all-games .site-main>.site-header{display:block}
  .route-all-games .site-main>.site-header .category-nav{display:none}
  .route-all-games .site-main>.site-header .header-inner{padding-bottom:12px}
  .all-games-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:650px){
  .route-all-games .site-main main{padding-bottom:100px}
  .all-games-heading{min-height:72px;margin-bottom:16px;padding:18px;border-radius:12px}
  .all-games-page-count{font-size:.8rem}
  .all-games-link{min-height:46px;padding:11px 13px;font-size:.88rem}
  .catalog-pagination{--page-step:30px;gap:7px;margin-top:22px;padding:10px 12px;border-radius:14px}
  .catalog-pagination-controls{gap:3px}
  .catalog-page,.catalog-pagination-gap{font-size:.8rem;border-radius:8px}
}
@media(max-width:480px){.all-games-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.catalog-pagination{--page-step:28px;padding-inline:10px}}

@media(max-width:650px){
  /* Phone category browsing uses two equal columns of its own. The game wall
     keeps its shared three-column unit; horizontal category cards fill the
     screen while the six lead cards form three tidy pairs of squares. */
  .route-home .category-tiles--home,.route-categories .category-directory{--discovery-tile:calc((100cqw - var(--discovery-gap)) / 2);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--discovery-tile);width:100%;margin-left:0}
  .route-home .category-tiles--home>.category-tile{gap:7px;padding:5px;border-radius:12px}
  .route-home .category-tiles--home>.category-tile .category-tile-art{flex-basis:calc(var(--discovery-tile) - 10px);width:calc(var(--discovery-tile) - 10px);height:calc(var(--discovery-tile) - 10px);border-radius:8px}
  .route-home .category-tiles--home>.category-tile strong{font-size:.78rem}
  .route-home .category-tiles--home>.category-tile--featured{grid-column:span 1;grid-row:span 1;gap:6px;padding:8px}
  .route-home .category-tiles--home>.category-tile--featured .category-tile-art{flex:1 1 0;width:100%;height:auto;min-height:0;border-radius:0}
  .route-categories .category-directory-title{grid-column:1/-1;padding:10px;border-radius:14px}
  .route-categories .category-directory-title h1{font-size:clamp(1rem,4.2vw,1.5rem)}
  .route-categories .category-directory .category-tile{gap:7px;padding:5px;border-radius:12px}
  .route-categories .category-directory .category-tile-art{flex-basis:calc(var(--discovery-tile) - 10px);width:calc(var(--discovery-tile) - 10px);height:calc(var(--discovery-tile) - 10px);border-radius:8px}
  .route-categories .category-directory .category-tile strong{font-size:.83rem}
  .route-categories .category-directory-info{margin-top:26px;padding:24px 20px}
  .route-categories .category-directory-info p{font-size:.92rem}
  .route-category .category-empty-heading{gap:7px;padding:5px;border-radius:12px}
  .route-category .category-empty-heading>.category-illustration{flex-basis:calc(var(--category-tile) - 10px);width:calc(var(--category-tile) - 10px);height:calc(var(--category-tile) - 10px);border-radius:8px}
}
@media(max-width:390px){
  .route-home .category-tiles--home>.category-tile strong{font-size:.76rem}
}