/* ============================================================ Picture Hunt — Sticker Book Styles 📕✨ Drop-in CSS for the Sticker Book feature. Add to index.html : Light "paper" theme — re-themed from the old dark navy modal onto the app's var(--*) design tokens (style.css) + the toy-button shadow recipe, so the Sticker Book reads as the same product as the rest of the app. ============================================================ */ /* ═══ STICKER BOOK OVERLAY ═══ */ .sticker-book-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(27,17,64,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: sticker-fade-in 0.3s ease; } @keyframes sticker-fade-in { from { opacity: 0; } to { opacity: 1; } } .sticker-book-modal { background: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(255,201,60,0.30) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(76,201,255,0.22) 0%, transparent 60%), var(--paper-warm); border-radius: var(--r-lg); width: 92%; max-width: 600px; max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 6px 0 var(--ink), 0 28px 60px rgba(27,17,64,0.30); border: 3px solid var(--ink); } /* ═══ HEADER ═══ */ .sticker-book-header { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px dashed rgba(27,17,64,0.18); } .sticker-book-title { font-size: 2rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; } .sticker-book-count { font-size: 1.4rem; color: var(--berry-deep); font-weight: 700; margin-bottom: 8px; } .sticker-book-progress-bar { width: 80%; margin: 0 auto; height: 12px; background: var(--shade); border-radius: 6px; overflow: hidden; } .sticker-book-progress-fill { height: 100%; background: linear-gradient(90deg, var(--berry), var(--sun), var(--mint)); border-radius: 6px; transition: width 0.5s ease; } /* ═══ CATEGORY SECTION ═══ */ .sticker-category-section { margin-bottom: 12px; } /* .sticker-cat-header gets cat.gradient set inline (sticker-book.js) — a saturated category gradient — so white text + a dark count pill is correct, matching the splash category tiles. */ .sticker-cat-header { width: 100%; display: flex; align-items: center; padding: 12px 16px; border: none; border-radius: 16px; cursor: pointer; color: #fff; font-size: 1.1rem; font-weight: 700; gap: 10px; box-shadow: var(--lift-1); transition: transform 0.1s; } .sticker-cat-header:active { transform: scale(0.97); } .sticker-cat-emoji { font-size: 1.8rem; flex-shrink: 0; } .sticker-cat-name { flex: 1; text-align: left; text-shadow: 0 1px 3px rgba(27,17,64,0.35); } .sticker-cat-count { font-size: 0.95rem; opacity: 0.95; background: rgba(27,17,64,0.28); padding: 4px 10px; border-radius: 12px; } /* ═══ STICKER GRID ═══ */ .sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; padding: 8px 4px 4px; transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease; max-height: 600px; opacity: 1; } .sticker-grid.collapsed { max-height: 0; opacity: 0; padding: 0 4px; overflow: hidden; } /* ═══ STICKER SLOT ═══ */ .sticker-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border-radius: 14px; transition: transform 0.15s; min-height: 90px; } .sticker-slot.found { background: #fff; border: 2px solid rgba(27,17,64,0.12); box-shadow: var(--lift-1); } .sticker-slot.found.uncommon { border-color: var(--sky); background: rgba(76,201,255,0.14); } .sticker-slot.found.rare { border-color: var(--sun-deep); background: rgba(255,201,60,0.20); animation: sticker-rare-glow 2s ease-in-out infinite; } @keyframes sticker-rare-glow { 0%, 100% { box-shadow: 0 0 5px rgba(255,201,60,0.40); } 50% { box-shadow: 0 0 16px rgba(255,201,60,0.75); } } .sticker-slot.unfound { background: rgba(27,17,64,0.04); border: 2px dashed rgba(27,17,64,0.18); opacity: 0.7; } .sticker-slot:active { transform: scale(0.92); } .sticker-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 4px; } .sticker-img { width: 3rem; height: 3rem; object-fit: contain; display: block; margin: 0 auto; } .sticker-slot.unfound .sticker-emoji { font-size: 1.8rem; opacity: 0.5; } .sticker-name { font-size: 0.7rem; color: var(--ink-soft); text-align: center; font-weight: 600; word-break: break-word; } .sticker-slot.unfound .sticker-name { color: rgba(27,17,64,0.40); } .sticker-rarity { font-size: 0.55rem; margin-top: 2px; } /* ═══ CLOSE BUTTON ═══ */ .sticker-close-btn { display: block; width: 100%; padding: 14px; margin-top: 16px; font-size: 1.2rem; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--grape) 0%, var(--grape-deep) 100%); border: none; border-radius: var(--r-md); cursor: pointer; box-shadow: 0 4px 0 #3A2A8C, 0 10px 20px rgba(111,75,255,0.30); transition: transform 0.1s, box-shadow 0.15s; } .sticker-close-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3A2A8C; } /* ═══ EARN ANIMATION — popup during gameplay ═══ */ .sticker-earn-popup { position: fixed; top: 15%; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; align-items: center; animation: sticker-earn-pop 2s ease forwards; pointer-events: none; } @keyframes sticker-earn-pop { 0% { opacity: 0; transform: translateX(-50%) scale(0.3) translateY(40px); } 15% { opacity: 1; transform: translateX(-50%) scale(1.2) translateY(0); } 25% { transform: translateX(-50%) scale(1) translateY(0); } 70% { opacity: 1; transform: translateX(-50%) scale(1) translateY(-10px); } 100% { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(-40px); } } .sticker-earn-icon { font-size: 2rem; animation: sticker-book-wiggle 0.5s ease; } @keyframes sticker-book-wiggle { 0% { transform: rotate(0deg); } 25% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .sticker-earn-emoji { font-size: 3rem; animation: sticker-emoji-bounce 0.6s ease; } .sticker-earn-img { width: 3.6rem; height: 3.6rem; object-fit: contain; display: block; } @keyframes sticker-emoji-bounce { 0% { transform: scale(0); } 50% { transform: scale(1.4); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } /* Earn label pops over bright gameplay screens — dark ink + white halo stays legible on any background. */ .sticker-earn-label { font-size: 1.1rem; font-weight: 800; color: var(--ink); text-shadow: 0 2px 8px rgba(255,255,255,0.7); margin-top: 4px; } /* ═══ SPLASH SCREEN — sticker count badge ═══ */ .sticker-count-badge { display: inline-block; font-size: 0.8rem; background: linear-gradient(180deg, var(--sun) 0%, var(--sun-deep) 100%); color: var(--ink); padding: 3px 10px; border-radius: 12px; margin-left: 8px; vertical-align: middle; font-weight: 700; cursor: pointer; border: 2px solid var(--sun-deep); animation: sticker-badge-pulse 2s ease-in-out infinite; } @keyframes sticker-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ═══ SPLASH 📕 BOOK BUTTON — live count bubble ═══ */ /* The reachable entry point to the album. The title badge above can be clipped off-screen by the vertically-centered splash, so the total count also rides here as an app-icon-style notification bubble. */ #sticker-book-btn { position: relative; overflow: visible; } .sticker-btn-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--berry) 0%, var(--berry-deep) 100%); color: #fff; font-size: 0.74rem; font-weight: 800; line-height: 1; border-radius: var(--r-full); border: 2px solid var(--paper-warm); box-shadow: 0 2px 6px rgba(214,42,135,0.40); pointer-events: none; } .sticker-btn-count[hidden] { display: none; } /* ═══ CATEGORY CARD — mini sticker badge ═══ */ /* Sits on a vibrant category tile — dark pill + gold text reads cleanly. */ .sticker-cat-badge { position: absolute; top: 6px; right: 8px; font-size: 0.7rem; font-weight: 700; color: var(--sun); background: rgba(27,17,64,0.45); padding: 2px 6px; border-radius: 8px; pointer-events: none; } .category-card { position: relative; /* needed for badge positioning */ } /* ═══ VICTORY — sticker row ═══ */ .victory-sticker-row { margin-top: 10px; font-size: 1rem; color: var(--tangerine-deep); font-weight: 700; } .victory-sticker-row.complete { animation: sticker-complete-glow 1.5s ease-in-out infinite; } @keyframes sticker-complete-glow { 0%, 100% { text-shadow: 0 0 5px rgba(255,201,60,0.35); } 50% { text-shadow: 0 0 18px rgba(255,201,60,0.85); } } .victory-sticker-icon { font-size: 1.2rem; } /* ═══ RESPONSIVE — wider grid on tablets ═══ */ @media (min-width: 500px) { .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .sticker-emoji { font-size: 2.6rem; } .sticker-img { width: 3.4rem; height: 3.4rem; } .sticker-slot { min-height: 100px; } }