/* Shared, finite pages of large tiles. Compatibility classes keep native game adapters intact. */
.tile-layout{display:flex;flex-direction:column;min-height:0;gap:12px}
.tile-viewport{flex:1;min-height:0;width:100%;display:block;overflow:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tile-grid{--tile-columns:2;display:grid!important;grid-template-columns:repeat(var(--tile-columns),minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:100%!important;height:100%!important;min-height:0;max-width:none!important;margin:0!important;padding:6px!important;box-sizing:border-box;transform:none!important;transition:none!important;will-change:auto!important}
.tile-grid>*{grid-area:auto!important;min-width:0!important;min-height:0!important;width:auto!important;height:100%!important;max-height:none!important;position:relative!important;inset:auto!important;margin:0!important;transform:none!important;translate:none!important;animation:none;transition:none!important;box-sizing:border-box}
:is(.tile-controls,html[data-game-id] #sections .tile-controls){display:flex;flex:none;align-items:center;justify-content:center;gap:20px;height:56px;min-height:56px;padding:3px 0}
:is(.tile-controls,html[data-game-id] #sections .tile-controls)[hidden]{display:none!important}
:is(.tile-controls,html[data-game-id] #sections .tile-controls)>button{width:60px;height:48px;min-height:44px;padding:5px;display:grid;place-items:center;border:3px solid #fff3d5;border-radius:18px;background:linear-gradient(#fff7df,#eed09a);box-shadow:0 4px #ac7e4b;color:#78522e;cursor:pointer}
:is(.tile-controls,html[data-game-id] #sections .tile-controls)>button:disabled{opacity:.3;box-shadow:none;cursor:default}
:is(.tile-controls,html[data-game-id] #sections .tile-controls)>button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
:is(.tile-pages,html[data-game-id] #section-dots.tile-pages){display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;max-width:360px}
:is(.tile-pages,html[data-game-id] #section-dots.tile-pages) button{width:32px;height:32px;min-height:32px;padding:0;border:2px solid #80b6ab;border-radius:50%;background:#fff9e8;color:#367e70;box-shadow:0 2px #679f9166;font:900 14px Nunito,'Trebuchet MS',sans-serif;cursor:pointer}
:is(.tile-pages,html[data-game-id] #section-dots.tile-pages) button[aria-pressed=true]{background:#c7ee64;border-color:#75a63d;box-shadow:0 2px #5b8b35}
.tile-grid>*:focus-visible,:is(.tile-controls,html[data-game-id] #sections .tile-controls) button:focus-visible{outline:4px solid #ffbf34;outline-offset:3px}
/* Four familiar covers, all visible at once in the launcher. */
.hub-carousel.tile-layout{height:84cqh;gap:8px;padding:2px 0 6px}
.hub-carousel .cards.tile-grid .game-card{display:flex;flex-direction:column;overflow:hidden!important;border:3px solid #70bca5;border-radius:20px;background:#fff8e8;box-shadow:0 4px #328c76}
.hub-carousel .cards.tile-grid .game-card .cover-wrap{flex:1 1 0;min-height:0;width:100%;border-radius:16px 16px 0 0}
.hub-carousel .cards.tile-grid .game-card .cover-entry{height:100%}
.hub-carousel .cards.tile-grid .game-card .card-cover{width:100%;height:100%;object-fit:contain;transform:none!important;transition:none;background:#fff8e8}
.hub-carousel .cards.tile-grid .game-card .card-body{flex:0 0 38px;min-height:0;height:38px;padding:2px 8px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:4px;border-radius:0 0 16px 16px;background:#fff8e8}
.hub-carousel .cards.tile-grid .game-card .card-body h3{font-size:clamp(15px,3.7cqh,24px);line-height:1.05;color:#307a70}
.hub-carousel .cards.tile-grid .game-card .play{width:36px;height:34px;min-width:36px;min-height:34px;padding:6px;border-radius:50%;border-width:2px;font-size:0;gap:0;box-shadow:0 2px #328c76}
.hub-carousel .cards.tile-grid .game-card .play img{width:20px;height:20px}
.hub-carousel .cards.tile-grid .game-card .lock-button{top:7px;right:7px;bottom:auto;width:36px;height:36px;min-height:0;transform:none;border-width:2px}
/* The island palettes and completed/progress marks stay familiar across games. */
html[data-game-id] :is(#app,#app-shell){--gallery-rail:clamp(52px,9cqh,76px);--gallery-border:4px;--gallery-pad:5px;--gallery-radius:20px}
html[data-igroteka-embed="gravera"] :is(#sections,#catalog){inset:0;padding:0;max-width:none;width:auto;height:auto}
html[data-game-id] #gallery,html[data-game-id] .ig-choice{padding:0}
html[data-game-id] :is(.gallery-layout,#sections>.section-carousel){position:absolute;left:calc(var(--gallery-rail) + 32px);right:16px;top:clamp(42px,12cqh,64px);bottom:12px;width:auto;height:auto;max-width:none;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
html[data-game-id] :is(.gallery-viewport,#section-viewport){width:100%;margin:0;flex:1;min-height:0;overflow:visible;display:block}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card){--gallery-edge:#79b32b;--gallery-shadow:#5c962e;--gallery-top:#e7ff92;--gallery-bottom:#94ce32;--caption-top:#f1fbdc;--caption-bottom:#d5edac;--caption-ink:#35591e;--caption-edge:#9dbc68;display:flex;flex-direction:column;gap:5px;padding:5px;border:4px solid var(--gallery-edge);border-radius:20px;background:linear-gradient(var(--gallery-top),var(--gallery-bottom));box-shadow:inset 0 2px #fff9,0 4px var(--gallery-shadow);overflow:visible;cursor:pointer}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)::before{display:none}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-art,.section-art){display:block;position:relative;inset:auto;flex:1 1 0;width:100%;height:0;min-height:0;max-height:none;margin:0;border:0;border-radius:12px;object-fit:contain;background:#fffdf3;pointer-events:none}
html[data-game-id] #section-track .section-art img{display:block;width:100%;height:100%;object-fit:contain}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-caption,.section-label){position:static;inset:auto;flex:0 0 auto;width:100%;height:auto;min-height:28px;max-height:none;margin:0;padding:3px 7px;display:flex;align-items:center;justify-content:center;border:2px solid var(--caption-edge);border-radius:10px;background:linear-gradient(var(--caption-top),var(--caption-bottom));box-shadow:inset 0 1px #fff8;color:var(--caption-ink);text-shadow:none;font:900 clamp(12px,2.9cqh,19px)/1.12 Nunito,'Trebuchet MS',sans-serif;text-align:center;white-space:normal;overflow:visible;pointer-events:none;box-sizing:border-box}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-play,.section-play){position:absolute;z-index:5;left:auto;top:auto;right:10px;bottom:43px;width:34px;height:32px;min-height:0;margin:0;padding:3px;display:grid;place-items:center;border:2px solid #fff8;border-radius:11px;background:linear-gradient(#ffffe7,#fff0a1);box-shadow:0 2px #9c762f88;color:#649d28;font-size:19px;line-height:1;pointer-events:none;animation:none}
html[data-game-id] .gallery-play.lock::before,html[data-game-id] .gallery-play.lock::after{display:none}
html[data-game-id] :is(.gallery-play,.section-play) img{width:75%;height:75%;object-fit:contain}
html[data-game-id] .gallery-card>:is(.gallery-progress,.preview-progress){position:absolute;left:10px;bottom:43px;top:auto;max-width:55%;margin:0;padding:3px 5px;border:0;border-radius:7px;background:#fff9e9e8;color:#426652;font-size:10px;line-height:1.2;pointer-events:none}
html[data-game-id] .gallery-card>.build-progress{bottom:44px;left:10px}
html[data-game-id] .gallery-card>.completed-star{position:absolute;z-index:7;left:auto;right:8px;top:8px;bottom:auto;width:38px;height:38px;padding:2px;border:2px solid #fff3c7;border-radius:11px;background:#397e68ed;box-shadow:0 2px #265d4b66;pointer-events:none;line-height:1}
html[data-game-id] .gallery-card>.completed-star svg{display:block;width:100%;height:100%;pointer-events:none}
html[data-game-id] #gallery>header,html[data-game-id] .ig-choice-head{position:absolute;left:calc(var(--gallery-rail) + 32px);right:16px;top:6px;height:clamp(28px,9cqh,44px);padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:2}
html[data-game-id] #gallery>header h1,html[data-game-id] .ig-choice-head h2{font-size:clamp(16px,4cqh,28px);line-height:1.1;margin:0}
html[data-game-id] .ig-choice-head>img{width:70px;height:36px;object-fit:contain}
html[data-game-id] .ig-choice-head h2{flex:1;padding-right:80px;text-align:center}
@container(max-height:430px){.tile-grid{gap:12px!important;padding:4px!important}:is(.tile-controls,html[data-game-id] #sections .tile-controls){height:48px;min-height:48px;gap:14px}:is(.tile-controls,html[data-game-id] #sections .tile-controls)>button{width:54px;height:44px}:is(.tile-pages,html[data-game-id] #section-dots.tile-pages) button{width:28px;height:28px;min-height:28px;font-size:12px}html[data-game-id] :is(.gallery-layout,#sections>.section-carousel){left:calc(var(--gallery-rail) + 28px);right:12px;bottom:9px;gap:5px}}

/* Matching palette families; native Gravera section palettes remain recognizable. */
html[data-game-id] :is(.gallery-track>.gallery-card[data-gallery-palette="honey"],#section-track>.farm-card){--gallery-edge:#d69739;--gallery-shadow:#b77b30;--gallery-top:#fff0a2;--gallery-bottom:#ffbb52;--caption-top:#fff4d9;--caption-bottom:#ffe1a4;--caption-ink:#70451c;--caption-edge:#d3a762;--caption-shadow:#98652e33}
html[data-game-id] :is(.gallery-track>.gallery-card[data-gallery-palette="lilac"],#section-track>.coming-card){--gallery-edge:#a18bd0;--gallery-shadow:#8970b8;--gallery-top:#eee5ff;--gallery-bottom:#c2a6ef;--caption-top:#f4edff;--caption-bottom:#e0d0f5;--caption-ink:#654782;--caption-edge:#baa0d4;--caption-shadow:#8970b833}
html[data-game-id] #section-track>.birds-card{--gallery-edge:#508ec1;--gallery-shadow:#3976a6;--gallery-top:#c8f5ff;--gallery-bottom:#70c5ef}
html[data-game-id] #section-track>.sea-card{--gallery-edge:#209eac;--gallery-shadow:#187a91;--gallery-top:#a4fff2;--gallery-bottom:#29c5d2}
html[data-game-id] #section-track>.dino-card{--gallery-edge:#82a53b;--gallery-shadow:#647f2f33;--gallery-top:#eaffae;--gallery-bottom:#9fcb5a}
html[data-game-id] #section-track>.bugs-card{--gallery-edge:#c7a138;--gallery-shadow:#a4822a;--gallery-top:#fff4b0;--gallery-bottom:#f3c847}
html[data-game-id] #section-track>.winter-card{--gallery-edge:#80a9d5;--gallery-shadow:#5b87b4;--gallery-top:#f3fcff;--gallery-bottom:#b8d8ff}
html[data-game-id] #section-track>.space-card{--gallery-edge:#9670bc;--gallery-shadow:#735095;--gallery-top:#ebcdff;--gallery-bottom:#bb8de8}
html[data-game-id] #section-track>.pets-card{--gallery-edge:#bd8250;--gallery-shadow:#99643c;--gallery-top:#ffdfbc;--gallery-bottom:#eca66b}
html[data-game-id] #section-track>.newyear-card{--gallery-edge:#c14843;--gallery-shadow:#93332e;--gallery-top:#fff0a8;--gallery-bottom:#f4b14e}


/* Compact illustrated tiles: sections/scenes fit together; only the growing launcher scrolls. */
.tile-grid{grid-template-rows:repeat(var(--tile-rows,1),minmax(0,1fr))!important;gap:10px!important}
.compact-gallery>*{border-radius:14px!important}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card){display:flex;flex-direction:column;gap:3px;padding:4px;border-width:3px;border-radius:14px}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-art,.section-art){flex:1 1 0;height:0;border-radius:9px}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-caption,.section-label){min-height:20px;height:auto;flex:0 0 auto;padding:2px 3px;font-size:clamp(10px,2.7cqh,17px);line-height:1.1;border:0;box-shadow:none;background:none;color:var(--caption-ink)}
/* Picture sheets show their illustration, with an accessible title on the native button. */
html[data-game-id] :is(#pictures.tile-grid,#cards.tile-grid,.tile-grid)>:is(.picture-card,.cell,.card)>.gallery-caption{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%)}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-play,.section-play):not(.lock):not(.section-lock){display:none}
html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card)>:is(.gallery-play.lock,.section-lock){top:5px;bottom:auto;right:5px;width:30px;height:30px;padding:3px;border-radius:9px}
html[data-game-id] :is(.gallery-play.lock,#section-track .section-lock) img{width:85%;height:85%;filter:invert(37%) sepia(76%) saturate(638%) hue-rotate(358deg);pointer-events:none}
.lock-button img{width:75%;height:75%;pointer-events:none}
html[data-game-id] .gallery-card>.completed-star{top:5px;right:5px;width:30px;height:30px;border-radius:9px}
html[data-game-id] .gallery-card>:is(.gallery-progress,.preview-progress,.build-progress){bottom:7px;left:7px;max-width:65%;font-size:9px;padding:2px 4px}
html[data-game-id] .gallery-card>.build-progress{height:8px;padding:0}
/* The home catalog grows downwards; normal touch scrolling keeps its native inertia. */
.hub-carousel.tile-layout{height:84cqh}
.catalog-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#65ab94 #fff8;touch-action:pan-y;padding:4px 8px 12px;box-sizing:border-box}
.catalog-grid{grid-template-columns:repeat(var(--tile-columns),minmax(0,150px))!important;grid-template-rows:none!important;grid-auto-rows:clamp(130px,38cqh,190px);height:auto!important;min-height:100%;justify-content:center;align-content:start;gap:14px!important;padding:4px!important}
.hub-carousel .cards.tile-grid .game-card{display:flex;flex-direction:column;overflow:hidden!important;border-radius:16px;cursor:pointer}
.hub-carousel .cards.tile-grid .game-card .cover-wrap{flex:1 1 0;height:0;min-height:0;width:100%;border-radius:12px 12px 0 0}
.hub-carousel .cards.tile-grid .game-card .cover-entry{height:0}
.hub-carousel .cards.tile-grid .game-card .card-body{flex:0 0 28px;height:28px;min-height:0;padding:2px 4px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0;border-radius:0 0 12px 12px}
.hub-carousel .cards.tile-grid .game-card .card-body h3{font-size:clamp(13px,3.5cqh,19px);text-align:center;line-height:1.1}
.hub-carousel .cards.tile-grid .game-card .play{display:none}
.hub-carousel .cards.tile-grid .game-card .lock-button{width:32px;height:32px;top:5px;right:5px}
@container(max-height:360px){.tile-grid{gap:7px!important}html[data-game-id] :is(.gallery-track>.gallery-card,#section-track>.section-card){padding:3px;border-width:3px}html[data-game-id] .gallery-card>.completed-star{width:25px;height:25px}}
@media(prefers-reduced-motion:reduce){.catalog-scroll{scroll-behavior:auto}}

/* Native pop must not restart when an idle cue ends and briefly hide its first tile. */
.tile-grid>*:not(.entry-pulse){animation:none!important;opacity:1}

/* Fit the sheet to its illustrations instead of stretching cards down the screen.
   The existing full-height grid still limits it on short landscape phones. */
.gallery-fit{container-type:inline-size}
.compact-gallery{--art-ratio:1.5;--caption-space:0px;--fit-gap:10px;max-height:calc(((100cqw - (var(--tile-columns) - 1)*var(--fit-gap) - 12px)/var(--tile-columns) - 14px)/var(--art-ratio)*var(--tile-rows) + (14px + var(--caption-space))*var(--tile-rows) + (var(--tile-rows) - 1)*var(--fit-gap) + 12px)}
.compact-gallery:has(>.section-card){--caption-space:40px}
/* Section labels may wrap; their reserved space must not stretch the cover. */
html[data-game-id] #section-track>.section-card>.section-art{flex:0 1 auto;height:auto;aspect-ratio:3/2;max-height:calc(100% - 40px);background:transparent}
html[data-game-id] #section-track>.section-card>.section-art img{background:transparent}
/* Unused space beside construction previews follows the tile's own palette. */
html[data-game-id="blocks"] #pictures.gallery-track>.gallery-card>.gallery-art{background:transparent}
/* Coloring section covers keep their own proportions over the colored tile. */
html[data-game-id="raskraska"] .gallery-track>.gallery-card>.gallery-art{background:transparent!important}
/* Native coloring cells derive width from height via aspect-ratio. The shared
   grid owns both dimensions; otherwise a tall row overflows its next column. */
html[data-game-id="raskraska"] .tile-grid>.cell.gallery-card{aspect-ratio:auto!important;width:100%!important;max-width:100%!important;justify-self:stretch}
html[data-game-id="raskraska"] .tile-grid>.cell.gallery-card>.gallery-art{min-width:0;max-width:100%;box-sizing:border-box}
html[data-game-id="raskraska"] .compact-gallery{--art-ratio:1}
html[data-game-id="raskraska"] .compact-gallery:has(>.card){--caption-space:28px}
.hub-carousel .cards.tile-grid .game-card .cover-entry{padding:0;border:0;line-height:0;display:flex;align-items:stretch}
.hub-carousel .cards.tile-grid .game-card .card-cover{display:block;flex:1;min-height:0}
.catalog-grid{grid-auto-rows:auto}
.hub-carousel .cards.tile-grid .game-card{height:auto!important}
.hub-carousel .cards.tile-grid .game-card .cover-wrap{flex:none;height:auto;aspect-ratio:1}
@container(max-height:360px){.compact-gallery{--fit-gap:7px}}