/* Button styling, event cosmetics, and skin-shift active animations */
.score-display { font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; color: #ffd700; }
.stats-display { font-size: 1rem; color: #aaa; margin-bottom: 30px; text-align: center; line-height: 1.5; }

.coin { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #ffe066, #f5b041); border: 8px solid #d35400; font-size: 1.5rem; font-weight: bold; color: #7e5109; cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.3); transition: transform 0.05s ease; user-select: none; }
.coin:active { transform: scale(0.95); }
.coin.alchemy-active { background: radial-gradient(circle, #a569bd, #5b2c6f); border-color: #4a235a; color: #fff; animation: pulse 0.5s infinite alternate; }

.golden-coin { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd700); border: 4px solid #b7950b; cursor: pointer; z-index: 10; animation: spin 1s infinite linear; box-shadow: 0 0 15px #ffd700; }

.upgrade-btn { background: #3a3a45; border: 2px solid #555; border-radius: 8px; padding: 12px; color: #fff; text-align: left; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 4px; }
.upgrade-btn:hover:not(:disabled) { background: #4a4a55; border-color: #ffd700; }
.upgrade-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: #333; }
.upgrade-name { font-weight: bold; font-size: 1.1rem; display: flex; justify-content: space-between; }
.upgrade-count { color: #ffd700; font-size: 0.9rem; }
.upgrade-cost { font-size: 0.9rem; color: #2ecc71; font-weight: bold; }
.upgrade-desc { font-size: 0.8rem; color: #bbb; margin-top: 2px; }

@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes spin { 100% { transform: rotate(360deg); } }