/* Sticker Book (stickers.js) and free-play Menu (menuplay.js). */
.pages-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; scrollbar-width: none; overscroll-behavior: contain; }
.pages-scroll::-webkit-scrollbar { display: none; }
.pages-scroll.menu { padding-bottom: 120px; }
.pages-count { text-align: center; margin-bottom: 16px; }
.pages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 24px; }
.pages-sticker { min-height: 136px; padding: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; animation: pages-pop .4s var(--spring) both; }
@keyframes pages-pop { from { transform: scale(.7); opacity: 0; } }
.pages-sticker-star { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.pages-star-shape { position: absolute; inset: 0; transform: rotate(12deg); background: #D9D4C8; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pages-sticker.got .pages-star-shape { background: linear-gradient(#FFEFA8, #FFD94F); }
.pages-star-disc { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: #F1EEE7; }
.pages-sticker.got .pages-star-disc { background: radial-gradient(circle at 38% 30%, #fff, #fdf6e2); box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.pages-sticker-star span { position: relative; font-size: 28px; line-height: 1; filter: grayscale(1); opacity: .35; }
.pages-sticker.got .pages-sticker-star span { filter: none; opacity: 1; }
.pages-sticker.got .pages-sticker-star { animation: pages-bob 2.4s ease-in-out infinite alternate; }
@keyframes pages-bob { to { transform: translateY(-3px) rotate(3deg); } }
.pages-sticker-label { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--muted); }
.pages-sticker.got .pages-sticker-label { font-weight: 900; color: var(--cabbage-dark); }

.pages-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
.pages-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pages-row-name { flex: 1; font-size: 17px; font-weight: 600; }
.pages-row-price { color: var(--muted); font-weight: 600; }
.pages-badge { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: linear-gradient(#6d9a5d, var(--cabbage)); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 2px 4px rgba(63,99,53,.35); }
.pages-foot { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.pages-tray { position: absolute; left: 16px; right: 16px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 16px; display: flex; align-items: center; gap: 12px; transform: translateY(140%); opacity: 0; transition: transform .4s var(--spring), opacity .25s; z-index: 6; }
.pages-tray.up { transform: none; opacity: 1; }
.pages-tray-count { font-size: 17px; font-weight: 900; } .pages-tray-total { font-size: 15px; color: var(--muted); font-weight: 600; }
.pages-clear { font-size: 15px; font-weight: 800; color: var(--muted); padding: 8px 4px; }
.pages-send { padding: 12px 18px; border-radius: 999px; color: #fff; font-size: 17px; font-weight: 900; background: linear-gradient(#ffa3b4, var(--strawberry)); box-shadow: 0 3px 0 #d96b80, 0 8px 10px rgba(255,143,163,.4), inset 0 0 0 1.5px rgba(255,255,255,.35); white-space: nowrap; }

.pages-sheet-layer { background: rgba(0,0,0,.35); animation: game-fade .25s ease both; display: flex; align-items: flex-end; }
.pages-sheet-layer.out { opacity: 0; transition: opacity .3s; }
.pages-sheet { width: 100%; max-height: 88%; min-height: 55%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; border-radius: 28px 28px 0 0; background: linear-gradient(#fffdf7, var(--cream)); box-shadow: 0 -8px 30px rgba(0,0,0,.25); animation: pages-sheet-up .45s var(--spring) both; overflow-y: auto; }
.pages-sheet-layer.out .pages-sheet { transform: translateY(100%); transition: transform .3s ease-in; }
@keyframes pages-sheet-up { from { transform: translateY(100%); } }
.pages-sheet-critters { display: flex; align-items: flex-end; } .pages-sheet-critters > * + * { margin-left: -8px !important; }
.pages-sheet-title { font-size: 28px; font-weight: 900; color: var(--cabbage-dark); } .pages-sheet-sub { color: var(--muted); font-weight: 600; }
.pages-sheet-lines { width: 100%; padding: 8px 24px 0; }
.pages-sheet-line { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 17px; font-weight: 600; }
.pages-sheet-line span:first-of-type { flex: 1; }
.pages-sheet-total { display: flex; justify-content: space-between; padding-top: 12px; font-size: 17px; font-weight: 900; }
.pages-sheet-button { width: 100%; padding: 24px; margin-top: auto; }