Session 5: Prestige System with Stellar Essence

2026-08-20 13:43:23 +00:00
parent f18ef5c396
commit 3ee33ee43f
7 changed files with 769 additions and 88 deletions
@@ -626,3 +626,152 @@ h2, h3 {
        text-align: center;
    }
 }
+
+/* ============================================
+   PRESTIGE SYSTEM STYLES
+   ============================================ */
+
+.prestige-btn {
+    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
+    color: var(--text-primary);
+    border: none;
+    border-radius: 6px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 10px rgba(155, 89, 182, 0.3);
+}
+
+.prestige-btn:hover:not(:disabled) {
+    background: linear-gradient(135deg, #a569bd 0%, #9b59b6 100%);
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.5);
+}
+
+.prestige-btn:disabled {
+    background: var(--text-muted);
+    cursor: not-allowed;
+    opacity: 0.5;
+    box-shadow: none;
+}
+
+.prestige-btn.can-prestige {
+    animation: prestigeGlow 2s ease-in-out infinite;
+}
+
+@keyframes prestigeGlow {
+    0%, 100% {
+        box-shadow: 0 2px 10px rgba(155, 89, 182, 0.3);
+    }
+    50% {
+        box-shadow: 0 2px 20px rgba(155, 89, 182, 0.6), 0 0 30px rgba(155, 89, 182, 0.4);
+    }
+}
+
+/* Prestige Tab Styles */
+#prestige-info {
+    background: var(--bg-card);
+    border-radius: 8px;
+    padding: 15px;
+    border: 1px solid var(--border-color);
+    margin-bottom: 15px;
+}
+
+.prestige-essence {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: var(--accent-gold);
+    margin-bottom: 10px;
+}
+
+.essence-icon {
+    font-size: 1.5rem;
+    color: #9b59b6;
+}
+
+.prestige-multiplier {
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+}
+
+.prestige-multiplier span {
+    color: var(--accent-green);
+    font-weight: bold;
+}
+
+.prestige-next {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.prestige-next span {
+    color: var(--accent-purple);
+    font-weight: bold;
+}
+
+/* Prestige Upgrade Cards */
+#prestige-upgrades-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.prestige-upgrade-card {
+    background: var(--bg-card);
+    border-radius: 8px;
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.prestige-upgrade-card:hover:not(.purchased):not(.locked) {
+    background: var(--bg-hover);
+    border-color: var(--accent-purple);
+}
+
+.prestige-upgrade-card.purchased {
+    opacity: 0.6;
+    border-color: var(--accent-green);
+}
+
+.prestige-upgrade-card.locked {
+    opacity: 0.4;
+    pointer-events: none;
+}
+
+.prestige-upgrade-name {
+    font-weight: bold;
+    color: var(--text-primary);
+}
+
+.prestige-upgrade-desc {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-top: 3px;
+}
+
+.prestige-upgrade-cost {
+    color: #9b59b6;
+    font-size: 0.9rem;
+    margin-top: 5px;
+    font-weight: bold;
+}
+
+/* Prestige Particle Effects */
+.particle.prestige-particle {
+    background: radial-gradient(circle, #ffd700 0%, #9b59b6 50%, transparent 100%);
+    box-shadow: 0 0 10px #ffd700, 0 0 20px #9b59b6;
+}
+
+/* Stats Panel Prestige Info */
+.stat-item.prestige-stat {
+    border-color: var(--accent-purple);
+    background: linear-gradient(135deg, var(--bg-card) 0%, #2a1a3e 100%);
+}