dopamine effects

2026-08-28 16:57:34 +02:00
parent 02bca7c34a
commit 16bc48ab34
5 changed files with 489 additions and 8 deletions
@@ -1417,19 +1417,139 @@ body, html {
 /* Event Ticker Message */
 .event-ticker {
    position: absolute;
-    bottom: 210px;
+    bottom: calc(var(--card-height) + 65px);
    left: 50%;
    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.7);
-    border: 1px solid rgba(245, 176, 65, 0.4);
+    background: rgba(0, 0, 0, 0.75);
+    border: 1px solid rgba(245, 176, 65, 0.5);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
-    padding: 5px 16px;
+    padding: 6px 18px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 40;
    transition: opacity 0.3s ease;
+    backdrop-filter: blur(6px);
+}
+
+/* --- DOPAMINE POPUP BANNER --- */
+.dopamine-banner {
+    position: absolute;
+    top: 38%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 500;
+    pointer-events: none;
+    animation: dopamine-pop-in 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.35) forwards;
+}
+
+.dopamine-content {
+    position: relative;
+    padding: 12px 32px;
+    border-radius: 40px;
+    background: rgba(10, 15, 25, 0.92);
+    border: 3px solid #ffd700;
+    box-shadow: 0 0 50px rgba(255, 215, 0, 0.6), inset 0 0 25px rgba(255, 215, 0, 0.3);
+    text-align: center;
+    backdrop-filter: blur(12px);
+}
+
+.dopamine-title {
+    font-family: 'Cinzel', serif;
+    font-size: 2.2rem;
+    font-weight: 900;
+    letter-spacing: 2px;
+    color: #fff;
+    text-shadow: 0 0 20px #ffd700, 0 4px 10px rgba(0,0,0,0.8);
+    white-space: nowrap;
+}
+
+.dopamine-sub {
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: #ffd700;
+    letter-spacing: 1px;
+    margin-top: 2px;
+    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
+}
+
+/* Types */
+.dopamine-double .dopamine-content {
+    border-color: #00e5ff;
+    box-shadow: 0 0 45px rgba(0, 229, 255, 0.7), inset 0 0 20px rgba(0, 229, 255, 0.3);
+}
+.dopamine-double .dopamine-title {
+    text-shadow: 0 0 25px #00e5ff, 0 0 40px #00e5ff;
+}
+
+.dopamine-triple .dopamine-content {
+    border-color: #ff4500;
+    box-shadow: 0 0 55px rgba(255, 69, 0, 0.8), inset 0 0 25px rgba(255, 140, 0, 0.4);
+}
+.dopamine-triple .dopamine-title {
+    text-shadow: 0 0 30px #ff4500, 0 0 50px #ff8c00;
+}
+
+.dopamine-quad .dopamine-content, .dopamine-mega .dopamine-content {
+    border-color: #ffd700;
+    background: linear-gradient(135deg, rgba(30, 20, 5, 0.95), rgba(15, 10, 0, 0.95));
+    box-shadow: 0 0 80px rgba(255, 215, 0, 0.9), inset 0 0 35px rgba(255, 215, 0, 0.5);
+    transform: scale(1.15);
+}
+.dopamine-quad .dopamine-title {
+    font-size: 2.7rem;
+    text-shadow: 0 0 35px #ffd700, 0 0 60px #ff8c00, 0 0 90px #ffd700;
+}
+
+.dopamine-freeze .dopamine-content {
+    border-color: #00ffff;
+    box-shadow: 0 0 60px rgba(0, 255, 255, 0.8), inset 0 0 25px rgba(0, 255, 255, 0.4);
+}
+
+.dopamine-revive .dopamine-content {
+    border-color: #ff0055;
+    box-shadow: 0 0 65px rgba(255, 0, 85, 0.9), inset 0 0 30px rgba(255, 215, 0, 0.5);
+}
+
+.dopamine-jackpot .dopamine-content {
+    border-color: #ffd700;
+    box-shadow: 0 0 90px rgba(255, 215, 0, 1), inset 0 0 40px rgba(255, 215, 0, 0.6);
+}
+
+.dopamine-fadeout {
+    opacity: 0;
+    transform: translate(-50%, -70%) scale(1.2);
+    transition: all 0.35s ease;
+}
+
+@keyframes dopamine-pop-in {
+    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
+    60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
+    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
+
+/* HOLOGRAPHIC FOIL SHINE ON CARDS */
+.game-card.playable::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: var(--card-radius);
+    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 215, 0, 0.5) 50%, rgba(0, 229, 255, 0.4) 60%, transparent 80%);
+    background-size: 200% 200%;
+    animation: holo-shine 2.8s infinite linear;
+    pointer-events: none;
+    z-index: 10;
+    opacity: 0.6;
+}
+
+@keyframes holo-shine {
+    0% { background-position: -200% -200%; }
+    100% { background-position: 200% 200%; }
 }

@keyframes fadeIn {