/* The catalogue uses the same scenic world as the movie, with intact square art. */
body{display:block;font-family:'Trebuchet MS',sans-serif;background:linear-gradient(#123c5815,#072b4c80),url('assets/intro-v7.webp') center 42%/cover fixed no-repeat}
.game{--tile:clamp(90px,calc((100dvh - 390px)/3),190px);width:max-content;max-width:100%;min-height:100dvh;aspect-ratio:auto;margin:auto;padding:18px 24px;display:grid;grid-template-columns:180px auto;grid-template-rows:76px auto 52px;gap:16px 22px;align-content:center;align-items:start;container-type:normal}
.game-skin{display:none}.mobile-brand{grid-column:1/-1;justify-self:center;display:flex;align-items:center;justify-content:center;gap:12px;width:auto;height:76px;aspect-ratio:auto;background:none;border:0;mask-image:none;padding:0 20px;filter:drop-shadow(0 3px 5px #052948);color:#fff0b3}
.brand-gem{font-size:55px;color:#43d8ff;text-shadow:0 0 2px white,2px 3px #075185,-2px -2px #ffe7a4}.brand-words{font:700 40px/.9 Georgia,serif;letter-spacing:3px;text-shadow:0 2px #71450b}.brand-words small{display:block;font-size:17px;letter-spacing:4px;margin-top:9px}
.categories{position:static;grid-column:1;grid-row:2;width:100%;height:auto;display:flex;flex-direction:column;gap:10px;padding:16px 12px 120px;background:linear-gradient(145deg,#123f64f5,#092d50f5);border:1px solid #e4c47c;border-radius:24px;box-shadow:0 8px 24px #082b4c55}
.categories .nav-sprite,.parents.nav-sprite{background:#19486c;border:1px solid #779aa9;border-radius:14px;min-height:54px;aspect-ratio:auto;padding:10px;font:700 16px 'Trebuchet MS',sans-serif;box-shadow:inset 0 1px #ffffff25;filter:none;transition:background .15s}
.nav-label{display:block}.categories .nav-sprite.active,.categories .active:not(:first-child){color:#11394d;background:linear-gradient(#fff0c7,#e9c67b);border-color:#fff0bc;box-shadow:0 3px 0 #061c35}.categories:has(.active:not(:first-child)) .nav-sprite:first-child{background:#19486c;filter:none}
#my-colors{grid-column:1;grid-row:2;align-self:start;position:relative;inset:auto;width:156px;justify-self:center;height:76px;margin-top:278px;padding:12px;display:grid;grid-template-columns:1fr auto;gap:9px;background:#082b4b;border:1px solid #67899a;border-radius:14px;color:#fff1ce}
.progress-title{position:static;visibility:visible;font-size:13px;white-space:nowrap}.collection-track{position:static;grid-row:2;grid-column:1/-1;width:100%;height:7px;padding:0;background:#031a30;border:0}#game #collection-count{position:static;width:auto;opacity:1;background:none;font:700 13px 'Trebuchet MS',sans-serif;text-shadow:none}
.parents.nav-sprite{position:static;grid-column:1;grid-row:3;align-self:center;width:100%;height:44px;min-height:44px;font-size:13px;background:#0c3556ed}
.catalog,.catalog.filtered{position:relative;inset:auto;grid-column:2;grid-row:2;width:calc(var(--tile)*3 + 56px);height:auto;min-height:0;background:linear-gradient(145deg,#123f64f5,#092c4ef7);border:1px solid #e4c47c;border-radius:25px;padding:15px;box-shadow:0 10px 35px #06284966}
.catalog-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 3px 13px}.catalog-title h2{margin:0;color:#fff1c8;font:700 23px Georgia,serif}.catalog-title span{font:700 10px 'Trebuchet MS',sans-serif;white-space:nowrap;color:#bbdfeb}
.grid,.catalog.filtered .grid{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;gap:12px;align-content:start}
.art-card,.catalog:not(.filtered) .art-card{position:relative;display:flex;flex-direction:column;width:100%;height:auto;aspect-ratio:auto;min-width:0;min-height:0;overflow:hidden;background:#fff2ce;border:2px solid #f1d38d;border-radius:16px;box-shadow:0 3px 0 #031c32;padding:0;isolation:isolate}
.card-art{position:relative;inset:auto;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#fff8e9;border-radius:0}.card-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.card-name{position:static;display:flex;align-items:center;justify-content:center;height:29px;width:100%;padding:0 2px;background:linear-gradient(#fff2d2,#edd394);color:#153d55;font:700 15px 'Trebuchet MS',sans-serif;white-space:nowrap}
.card-progress{left:0;bottom:29px;width:100%;height:4px;border:0;border-radius:0;background:#11385635}.card-percent{top:6px;right:6px;padding:3px 6px;font:700 10px 'Trebuchet MS',sans-serif}.art-card:hover{transform:translateY(-2px);filter:brightness(1.035)}
.pager{position:static;grid-column:2;grid-row:3;justify-self:center;display:flex;align-items:center;gap:15px;width:260px;height:48px;font-size:17px}.pager button,.pager #next{position:static;aspect-ratio:auto;min-width:64px;width:64px;height:48px;border:1px solid #ffe2a1;border-radius:15px;background:linear-gradient(#24638a,#113d61);color:#fff0c5;font-size:22px;box-shadow:0 3px 0 #052642}.pager button:disabled{opacity:.4}.pager span,#game[data-pages="1"] #page-count{position:static;opacity:1;flex:1;width:auto;font:700 16px 'Trebuchet MS',sans-serif;background:#103b5dee;padding:12px;border:1px solid #bdac7a;border-radius:12px}
#empty{padding:30px 12px;text-align:center;font-size:15px}#empty h2{font-size:23px}
@media(max-width:900px){
 .game{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:470px;min-height:100dvh;padding:10px 10px 16px;gap:10px}
 .mobile-brand{order:0;height:56px;min-height:56px;gap:8px}.brand-gem{font-size:36px}.brand-words{font-size:28px}.brand-words small{font-size:12px;letter-spacing:3px;margin-top:5px}
 .categories{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr;gap:5px;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
 .categories .nav-sprite{min-height:44px;padding:5px 2px;font-size:12px;border-radius:12px;background:#123b5ef5}
 .catalog,.catalog.filtered{order:2;width:100%;padding:10px;border-radius:20px}
 .catalog-title{margin:1px 1px 10px;gap:5px}.catalog-title h2{font-size:19px}.catalog-title span{font-size:9px}
 .grid,.catalog.filtered .grid{gap:8px}.art-card,.catalog:not(.filtered) .art-card{border-radius:12px}.card-name{font-size:clamp(9px,2.7vw,13px);height:25px}.card-progress{bottom:25px;height:3px}.card-percent{top:4px;right:4px;font-size:9px;padding:2px 4px}
 .pager{order:3;width:240px;height:48px;flex-shrink:0}
 #my-colors{order:4;display:flex;align-items:center;gap:10px;width:100%;height:40px;margin:0;padding:8px 12px;border-radius:12px}.collection-track{flex:1;width:auto}.progress-title,#game #collection-count{font-size:12px}
 .parents.nav-sprite{order:5;width:130px;min-height:44px;height:44px;align-self:center;background:#0b3455e8}
}
@media(prefers-reduced-motion:reduce){.art-card{transition:none}}

/* Reuse the movie identity instead of introducing a second logo. */
.mobile-brand{width:200px;background:url('assets/catalog-v11-logo-alpha.webp') center/contain no-repeat;mask-image:none}
.brand-gem,.brand-words{visibility:hidden}
.catalog-title span{background:none;padding:0;color:#c3e2eb}
#game #collection-count{display:block;visibility:visible;opacity:1}
@media(max-width:900px){.mobile-brand{width:145px;height:64px;min-height:64px}.catalog-title span{background:none;padding:0}}

#game[data-completed] #collection-count{opacity:1!important}

@media(min-width:901px){.card-name{font-size:clamp(10px,calc(var(--tile)*.085),15px)}}
/* Scene previews show the actual coloring sheet; saved pictures show the child's colors. */
.card-art.saved-preview{isolation:isolate;background:white}
.card-art .saved-paint{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.scene-card .card-art{background:#fffdfa}
#my-colors[aria-pressed="true"]{outline:2px solid #ffdc87;outline-offset:2px;background:#164863}
@media(min-width:901px){.game{grid-template-columns:160px auto;gap:14px 18px}.categories{padding-inline:10px}.categories .nav-sprite{min-height:50px}#my-colors{margin-top:262px;width:138px;padding:10px}.progress-title,#game #collection-count{font-size:11px}.card-name{font-size:clamp(9px,calc(var(--tile)*.077),14px)}}
@media(max-width:900px){.card-name{font-size:clamp(8px,2.5vw,12px)}.scene-card .card-name{font-size:clamp(8px,2.4vw,12px)}}

#game[data-pages="1"] .pager{visibility:hidden;pointer-events:none}