/* Explorer Shop — uses the Expedition palette already loaded by the hub */ .shop-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; position: relative; } .shop-title { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 22px; color: var(--deep-field, #1B3A2F); } .shop-sub { margin: 4px 0 0; font-size: 13px; color: rgba(31, 26, 20, 0.65); } .shop-coins { background: linear-gradient(135deg, #C8A24B 0%, #e2bf6c 100%); color: #fff; font-weight: 700; font-size: 16px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(200, 162, 75, 0.4); } .shop-flash { position: absolute; top: 100%; right: 0; margin-top: 6px; background: #A8432A; color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; animation: shopFlash 1.5s ease-out forwards; } @keyframes shopFlash { 0% { opacity: 0; transform: translateY(-4px); } 15% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } } .shop-section { margin-bottom: 22px; } .shop-section-head h4 { margin: 0 0 2px; font-family: "Playfair Display", Georgia, serif; font-size: 16px; color: var(--deep-field, #1B3A2F); } .shop-section-head p { margin: 0 0 10px; font-size: 12px; color: rgba(31, 26, 20, 0.6); } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; } .shop-card { background: #EEE6D3; border: 2px solid transparent; border-radius: 12px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .shop-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(31, 26, 20, 0.12); } .shop-card.is-active { border-color: #C8A24B; background: linear-gradient(135deg, #fef8e8 0%, #f9eecc 100%); box-shadow: 0 0 0 3px rgba(200, 162, 75, 0.18); } .shop-card.is-owned:not(.is-active) { border-color: rgba(27, 58, 47, 0.2); } .shop-card.just-bought { animation: shopPop 0.85s cubic-bezier(0.2, 0.8, 0.2, 1.2); } @keyframes shopPop { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200, 162, 75, 0); } 30% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(200, 162, 75, 0.35); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(200, 162, 75, 0); } } .shop-emoji { font-size: 32px; line-height: 1; } .shop-name { font-weight: 700; font-size: 13px; color: #1F1A14; } .shop-desc { font-size: 11px; color: rgba(31, 26, 20, 0.6); line-height: 1.3; min-height: 28px; } .shop-btn { margin-top: 4px; padding: 6px 12px; border: none; border-radius: 999px; font-weight: 700; font-size: 12px; cursor: pointer; width: 100%; font-family: inherit; transition: filter 0.15s ease; } .shop-btn.buy { background: #1B3A2F; color: #fff; } .shop-btn.buy:hover { filter: brightness(1.15); } .shop-btn.buy.disabled, .shop-btn.buy:disabled { background: rgba(31, 26, 20, 0.25); color: rgba(255, 255, 255, 0.85); cursor: not-allowed; } .shop-btn.equip { background: #C8A24B; color: #1F1A14; } .shop-btn.equip:hover { filter: brightness(1.08); } .shop-btn.active { background: rgba(27, 58, 47, 0.1); color: #1B3A2F; cursor: default; } /* ===== Stamp style variants ===== */ /* These swap the colors used in .stamp-cell.stamped to match the chosen stamp. The active class is applied to by shop bootstrap. */ body.stamp-classic .stamp-cell.stamped .stamp-ring { border-color: #1B3A2F; background: rgba(27, 58, 47, 0.08); box-shadow: inset 0 0 0 1px rgba(27, 58, 47, 0.2), 0 4px 14px rgba(27, 58, 47, 0.18); } body.stamp-classic .stamp-cell.stamped .stamp-vol { color: #1B3A2F; } body.stamp-classic .stamp-cell.stamped .stamp-inner { color: #1B3A2F; } body.stamp-gold .stamp-cell.stamped .stamp-ring { border-color: #C8A24B; background: linear-gradient(135deg, rgba(200,162,75,0.18), rgba(255,215,120,0.28)); box-shadow: inset 0 0 0 1px rgba(200,162,75,0.35), 0 4px 14px rgba(200,162,75,0.35); } body.stamp-gold .stamp-cell.stamped .stamp-vol { color: #8a6a1d; } body.stamp-gold .stamp-cell.stamped .stamp-inner { color: #8a6a1d; } body.stamp-rust .stamp-cell.stamped .stamp-ring { border-color: #A8432A; background: rgba(168, 67, 42, 0.12); box-shadow: inset 0 0 0 1px rgba(168, 67, 42, 0.3), 0 4px 14px rgba(168, 67, 42, 0.3); } body.stamp-rust .stamp-cell.stamped .stamp-vol { color: #A8432A; } body.stamp-rust .stamp-cell.stamped .stamp-inner { color: #A8432A; } body.stamp-sky .stamp-cell.stamped .stamp-ring { border-color: #6B8CAE; background: rgba(107, 140, 174, 0.12); box-shadow: inset 0 0 0 1px rgba(107, 140, 174, 0.3), 0 4px 14px rgba(107, 140, 174, 0.3); } body.stamp-sky .stamp-cell.stamped .stamp-vol { color: #4a6a8c; } body.stamp-sky .stamp-cell.stamped .stamp-inner { color: #4a6a8c; } /* Sophie outfit accessories — overlay rendered in chat header */ .sophie-outfit-overlay { position: absolute; top: -10px; right: -2px; font-size: 22px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); } /* Home rank chip */ .rank-chip { position: fixed; top: 12px; left: 12px; background: rgba(31, 26, 20, 0.78); color: #F5F1E8; border-radius: 999px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; z-index: 20; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .rank-chip .rank-emoji { font-size: 16px; line-height: 1; } .rank-chip .rank-coins { color: #C8A24B; margin-left: 4px; } .rank-chip .rank-bar { width: 60px; height: 4px; background: rgba(255,255,255,0.18); border-radius: 999px; overflow: hidden; margin-left: 6px; } .rank-chip .rank-bar-fill { height: 100%; background: linear-gradient(90deg, #C8A24B, #e2bf6c); width: 0%; transition: width 0.4s ease; } @media (max-width: 600px) { .rank-chip { font-size: 12px; padding: 5px 10px; } .rank-chip .rank-bar { width: 40px; } }