.events-page {background: #f0f4f8}
.events-container {max-width: 720px;margin: 0 auto;padding: 0 16px 48px}
.events-section-inner {max-width: 100%}
.event-card {background: #fff;border-radius: 18px;padding: 28px 24px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02)}
.event-section-heading {display: flex;align-items: center;gap: 8px;font-size: 1rem;font-weight: 700;color: #1a2b4a;margin: 0 0 20px}
.event-section-heading svg {flex-shrink: 0;color: #3b82f6}
.event-reveal {opacity: 0;transform: translateY(24px);transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)}
.event-reveal--visible {opacity: 1;transform: translateY(0)}
.event-show-hero {position: relative;text-align: center;padding: 48px 24px 56px;margin: 0 -16px;background: linear-gradient(160deg, #0f2744 0%, #1a4b8c 35%, #2563eb 70%, #3b82f6 100%);color: #fff;overflow: hidden}
.event-hero-bg-effects {position: absolute;inset: 0;overflow: hidden;pointer-events: none}
.event-hero-wave {position: absolute;bottom: -2px;left: -10%;width: 120%;height: 48px;background: #f0f4f8;border-radius: 50% 50% 0 0 / 100% 100% 0 0}
.event-hero-wave--1 {opacity: 0.35;animation: eventWave 6s ease-in-out infinite}
.event-hero-wave--2 {opacity: 1;animation: eventWave 8s ease-in-out infinite reverse;bottom: -6px}
@keyframes eventWave {0%, 100% { transform: translateX(-3%) scaleY(1); }
50% { transform: translateX(3%) scaleY(1.4); }}
.event-show-hero-inner {position: relative;z-index: 1;max-width: 720px;margin: 0 auto;animation: eventHeroFadeIn 0.8s ease-out}
@keyframes eventHeroFadeIn {from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }}
.event-show-hero .events-badge {margin-bottom: 14px}
.event-show-hero .events-badge--active {background: rgba(255, 255, 255, 0.2);color: #fff;backdrop-filter: blur(4px);animation: eventBadgePulse 2s ease-in-out infinite}
@keyframes eventBadgePulse {0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }}
.event-show-hero .events-badge--upcoming {background: rgba(255, 255, 255, 0.2);color: #fde68a;backdrop-filter: blur(4px)}
.event-show-hero .events-badge--finished {background: rgba(255, 255, 255, 0.15);color: rgba(255, 255, 255, 0.7)}
.event-show-title {font-size: 1.7rem;font-weight: 800;color: #fff;margin: 0 0 12px;letter-spacing: 0.02em;line-height: 1.3;text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)}
.event-show-period {display: inline-flex;align-items: center;gap: 6px;font-size: 0.85rem;color: rgba(255, 255, 255, 0.85);margin: 0}
.event-show-period svg {opacity: 0.7}
.event-hero-goal {margin: 24px auto 0;display: flex;flex-direction: column;align-items: center}
.event-hero-goal-label {font-size: 0.65rem;font-weight: 700;letter-spacing: 0.18em;color: rgba(255, 255, 255, 0.55);text-transform: uppercase;margin-bottom: 4px}
.event-hero-goal-amount {font-size: 2.8rem;font-weight: 900;color: #fff;line-height: 1;font-variant-numeric: tabular-nums;text-shadow: 0 2px 16px rgba(59, 130, 246, 0.5);animation: eventGoalGlow 3s ease-in-out infinite}
.event-hero-goal-amount small {font-size: 0.38em;font-weight: 700;opacity: 0.7;margin-left: 4px}
@keyframes eventGoalGlow {0%, 100% { text-shadow: 0 2px 16px rgba(59, 130, 246, 0.4); }
50% { text-shadow: 0 2px 32px rgba(59, 130, 246, 0.7), 0 0 48px rgba(96, 165, 250, 0.3); }}
.event-show-description {font-size: 0.88rem;color: rgba(255, 255, 255, 0.8);margin: 20px auto 0;line-height: 1.75;text-align: left;max-width: 540px}
.event-show-description p {margin: 0}
.events-badge {display: inline-block;padding: 4px 14px;border-radius: 20px;font-size: 0.72rem;font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase}
.events-badge--active {background: #dbeafe;color: #1d4ed8}
.events-badge--upcoming {background: #fef3c7;color: #b45309}
.events-badge--finished {background: #f3f4f6;color: #6b7280}
.event-countdown-section {margin-top: -28px;position: relative;z-index: 1;padding: 0 8px}
.event-countdown {background: #fff;border-radius: 18px;padding: 24px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);text-align: center}
.event-countdown-label {font-size: 0.78rem;font-weight: 700;color: #6b7280;margin: 0 0 14px;letter-spacing: 0.08em;text-transform: uppercase}
.event-countdown-units {display: flex;align-items: center;justify-content: center;gap: 6px}
.event-countdown-unit {display: flex;flex-direction: column;align-items: center}
.event-countdown-flip {perspective: 300px}
.event-countdown-value {display: flex;align-items: center;justify-content: center;font-size: 2.2rem;font-weight: 800;color: #1a2b4a;line-height: 1;background: linear-gradient(180deg, #f8fafc 0%, #e8ecf1 100%);border: 1px solid #dde3ea;border-radius: 12px;padding: 12px 14px;min-width: 58px;text-align: center;font-variant-numeric: tabular-nums;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);transition: transform 0.15s ease}
.event-countdown-unit-label {font-size: 0.65rem;font-weight: 700;color: #9ca3af;margin-top: 8px;letter-spacing: 0.04em}
.event-countdown-sep {font-size: 1.6rem;font-weight: 800;color: #cbd5e1;padding-bottom: 24px}
.event-participate-section {margin-top: 20px}
.event-participate-section .event-card {text-align: center;padding: 24px}
.event-participate-joined {display: inline-flex;align-items: center;gap: 6px;font-size: 0.9rem;font-weight: 600;color: #059669;margin-bottom: 8px}
.event-participate-joined svg {color: #10b981}
.event-participate-cta {font-size: 0.88rem;color: #6b7280;margin: 0 0 14px}
.event-participate-login {font-size: 0.88rem;color: #6b7280;margin: 0}
.event-participate-login a {color: #2563eb;font-weight: 600;text-decoration: none}
.event-btn {display: inline-flex;align-items: center;justify-content: center;padding: 14px 36px;border-radius: 12px;font-size: 0.95rem;font-weight: 700;border: none;cursor: pointer;transition: all 0.2s ease}
.event-btn--participate {background: linear-gradient(135deg, #2563eb, #3b82f6);color: #fff;box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3)}
.event-btn--participate:hover {background: linear-gradient(135deg, #1d4ed8, #2563eb);box-shadow: 0 6px 24px rgba(37, 99, 235, 0.4);transform: translateY(-2px)}
.event-btn--glow {animation: eventBtnGlow 2.5s ease-in-out infinite}
@keyframes eventBtnGlow {0%, 100% { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); }
50% { box-shadow: 0 4px 24px rgba(37, 99, 235, 0.5), 0 0 40px rgba(59, 130, 246, 0.15); }}
.event-btn--leave {background: #f3f4f6;color: #6b7280}
.event-btn--leave:hover {background: #e5e7eb}
.event-rules-section {margin-top: 16px}
.event-rules-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 0}
.event-rules-item {display: flex;align-items: flex-start;gap: 14px;padding: 16px 0;border-bottom: 1px solid #f3f4f6}
.event-rules-item:last-child {border-bottom: none;padding-bottom: 0}
.event-rules-item:first-child {padding-top: 0}
.event-rules-num {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;background: linear-gradient(135deg, #3b82f6, #2563eb);color: #fff;font-size: 0.82rem;font-weight: 800;margin-top: 1px;box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25)}
.event-rules-body {flex: 1;min-width: 0}
.event-rules-body strong {display: block;font-size: 0.9rem;font-weight: 700;color: #1a2b4a;margin-bottom: 4px}
.event-rules-body p {font-size: 0.82rem;color: #6b7280;line-height: 1.65;margin: 0}
.event-rules-body p strong {display: inline;font-size: inherit;color: #2563eb}
.event-rules-note {display: flex;align-items: flex-start;gap: 6px;margin-top: 16px;padding: 10px 12px;background: #f9fafb;border-radius: 8px;font-size: 0.75rem;color: #6b7280;line-height: 1.5}
.event-rules-note svg {flex-shrink: 0;color: #9ca3af;margin-top: 1px}
.event-rules-prohibited {margin-top: 16px;padding: 14px 16px;background: #fef2f2;border-radius: 10px;border: 1px solid #fecaca}
.event-rules-prohibited-heading {display: flex;align-items: center;gap: 6px;font-size: 0.82rem;font-weight: 700;color: #b91c1c;margin: 0 0 8px}
.event-rules-prohibited-heading svg {flex-shrink: 0;color: #dc2626}
.event-rules-prohibited-list {margin: 0;padding: 0 0 0 18px;display: flex;flex-direction: column;gap: 4px}
.event-rules-prohibited-list li {font-size: 0.8rem;color: #7f1d1d;line-height: 1.6}
.event-progress-section {margin-top: 16px}
.event-gauge-wrap {position: relative;width: 150px;height: 150px;margin: 0 auto 20px}
.event-gauge {width: 100%;height: 100%;transform: rotate(-90deg)}
.event-gauge-bg {fill: none;stroke: #e8ecf1;stroke-width: 10}
.event-gauge-fill {fill: none;stroke: url(#eventGaugeGrad);stroke: #3b82f6;stroke-width: 10;stroke-linecap: round;stroke-dashoffset: 0;animation: eventGaugeFill 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards}
@keyframes eventGaugeFill {from { stroke-dasharray: 0 326.73; }}
.event-gauge-center {position: absolute;inset: 0;display: flex;flex-direction: column;align-items: center;justify-content: center}
.event-gauge-pct {font-size: 2rem;font-weight: 900;color: #1a2b4a;line-height: 1;font-variant-numeric: tabular-nums}
.event-gauge-pct small {font-size: 0.5em;font-weight: 700;color: #6b7280}
.event-gauge-label {font-size: 0.7rem;font-weight: 600;color: #9ca3af;margin-top: 4px;letter-spacing: 0.05em}
.event-gauge-wrap--achieved {width: 180px;height: 180px}
.event-gauge-wrap--achieved .event-gauge-fill {stroke: #f59e0b;filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5))}
.event-gauge-wrap--achieved .event-gauge-pct {color: #f59e0b}
.event-gauge-wrap--achieved .event-gauge-label {font-size: 0.78rem;font-weight: 700;color: #f59e0b;letter-spacing: 0.06em}
.event-fireworks {position: absolute;inset: -60px;pointer-events: none;z-index: 1}
.event-firework {position: absolute;width: 6px;height: 6px;border-radius: 50%;opacity: 0}
.event-firework--1 {top: 8%;left: 15%;background: #f59e0b;box-shadow:
12px -8px 0 #ef4444,
-8px -14px 0 #f59e0b,
18px 4px 0 #ec4899,
-14px 6px 0 #8b5cf6;animation: eventFirework 2.4s ease-out 0.3s infinite}
.event-firework--2 {top: 5%;right: 18%;background: #3b82f6;box-shadow:
-10px -10px 0 #10b981,
14px -6px 0 #3b82f6,
-6px 12px 0 #f59e0b,
10px 10px 0 #ef4444;animation: eventFirework 2.4s ease-out 0.9s infinite}
.event-firework--3 {bottom: 12%;left: 10%;background: #ec4899;box-shadow:
8px -12px 0 #8b5cf6,
-12px -4px 0 #ec4899,
16px 8px 0 #f59e0b,
-8px 14px 0 #10b981;animation: eventFirework 2.4s ease-out 1.5s infinite}
.event-firework--4 {bottom: 8%;right: 12%;background: #10b981;box-shadow:
-14px -8px 0 #f59e0b,
10px -12px 0 #ef4444,
-10px 10px 0 #3b82f6,
14px 6px 0 #ec4899;animation: eventFirework 2.4s ease-out 2.0s infinite}
.event-firework--5 {top: 40%;left: 2%;background: #8b5cf6;box-shadow:
10px -10px 0 #ec4899,
-6px -14px 0 #f59e0b,
14px 6px 0 #10b981,
-12px 8px 0 #3b82f6;animation: eventFirework 2.4s ease-out 0.6s infinite}
.event-firework--6 {top: 35%;right: 4%;background: #ef4444;box-shadow:
-10px -12px 0 #3b82f6,
12px -4px 0 #f59e0b,
-8px 10px 0 #8b5cf6,
10px 12px 0 #10b981;animation: eventFirework 2.4s ease-out 1.2s infinite}
@keyframes eventFirework {0% {transform: scale(0);opacity: 1}
20% {transform: scale(1);opacity: 1}
60% {transform: scale(1.8);opacity: 0.6}
100% {transform: scale(2.5);opacity: 0}}
.event-stats-row {display: flex;justify-content: center;gap: 8px;flex-wrap: wrap;margin-bottom: 20px}
.event-stat {text-align: center;flex: 1;min-width: 90px;padding: 14px 8px;background: #f8fafc;border-radius: 14px;border: 1px solid #f0f2f5}
.event-stat-value {display: block;font-size: 1.5rem;font-weight: 800;color: #1a2b4a;line-height: 1.2;font-variant-numeric: tabular-nums}
.event-stat-value small {font-size: 0.6em;font-weight: 600;color: #6b7280;margin-left: 2px}
.event-stat-label {display: block;font-size: 0.72rem;font-weight: 500;color: #6b7280;margin-top: 4px}
.event-progress-bar-container {width: 100%;height: 10px;background: #e8ecf1;border-radius: 5px;overflow: hidden}
.event-progress-bar {height: 100%;background: linear-gradient(90deg, #3b82f6, #2563eb, #6366f1);background-size: 200% 100%;border-radius: 5px;transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);min-width: 0;animation: eventProgressShimmer 2.5s ease-in-out infinite}
@keyframes eventProgressShimmer {0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }}
.event-participants-section {margin-top: 16px}
.event-participants-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px}
.event-participant-card {display: flex;align-items: center;gap: 10px;padding: 10px 12px;background: #f8fafc;border: 1px solid #eef0f4;border-radius: 12px;text-decoration: none;color: inherit;transition: all 0.2s ease;min-width: 0}
.event-participant-card:hover {background: #eef2ff;border-color: #c7d2fe;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12)}
.event-participant-avatar-wrap {flex-shrink: 0}
.event-participant-avatar {border-radius: 50%;flex-shrink: 0}
.event-participant-info {display: flex;flex-direction: column;gap: 2px;min-width: 0}
.event-participant-name {font-size: 0.82rem;font-weight: 600;color: #1a2b4a;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.event-participant-achievement {font-size: 0.7rem;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.event-invite-section {margin-top: 16px}
.event-invite-card {text-align: center;background: linear-gradient(135deg, #f0f7ff 0%, #eef2ff 100%);border: 1px solid #c7d2fe}
.event-invite-inner {display: flex;flex-direction: column;align-items: center;gap: 12px;margin-bottom: 20px}
.event-invite-icon-wrap {width: 56px;height: 56px;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 50%;box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12)}
.event-invite-icon {color: #6366f1}
.event-invite-body {max-width: 400px}
.event-invite-heading {font-size: 1rem;font-weight: 700;color: #1a2b4a;margin: 0 0 6px}
.event-invite-text {font-size: 0.85rem;color: #64748b;margin: 0;line-height: 1.6}
.event-btn--invite {display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 12px 32px;background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);color: #fff;font-size: 0.9rem;font-weight: 600;border: none;border-radius: 12px;text-decoration: none;cursor: pointer;transition: all 0.2s ease;box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25)}
.event-btn--invite:hover {transform: translateY(-1px);box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35)}
.event-btn--invite:active {transform: translateY(0)}
.event-ranking-section {margin-top: 16px}
.event-podium {display: flex;align-items: flex-end;justify-content: center;gap: 8px;margin-bottom: 28px;padding: 0 8px}
.event-podium-slot {display: flex;flex-direction: column;align-items: center;flex: 1;max-width: 140px}
.event-podium-link {display: flex;flex-direction: column;align-items: center;text-decoration: none;color: inherit;margin-bottom: 8px}
.event-podium-avatar-wrap {position: relative;margin-bottom: 6px}
.event-podium-avatar {border-radius: 50%;border: 3px solid #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)}
.event-podium-avatar-wrap--1st .event-podium-avatar {border-color: #f59e0b;box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3)}
.event-podium-avatar-wrap--2nd .event-podium-avatar {border-color: #94a3b8}
.event-podium-avatar-wrap--3rd .event-podium-avatar {border-color: #c2956a}
.event-podium-crown {position: absolute;top: -14px;left: 50%;transform: translateX(-50%);color: #f59e0b;filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15))}
.event-podium-name {font-size: 0.78rem;font-weight: 600;color: #1a2b4a;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100px;text-align: center}
.event-podium-amount {font-size: 0.75rem;font-weight: 700;color: #374151;font-variant-numeric: tabular-nums;margin-top: 2px}
.event-podium-amount small {font-size: 0.8em;font-weight: 500;color: #6b7280}
.event-podium-bar {width: 100%;display: flex;align-items: flex-start;justify-content: center;padding-top: 10px;border-radius: 8px 8px 4px 4px;font-variant-numeric: tabular-nums}
.event-podium-bar--1st {height: 80px;background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25)}
.event-podium-bar--2nd {height: 60px;background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);box-shadow: 0 4px 12px rgba(148, 163, 184, 0.25)}
.event-podium-bar--3rd {height: 44px;background: linear-gradient(180deg, #d4b896 0%, #c2956a 100%);box-shadow: 0 4px 12px rgba(194, 149, 106, 0.25)}
.event-podium-rank {font-size: 1.2rem;font-weight: 900;color: rgba(255, 255, 255, 0.9);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)}
.event-ranking-list {display: flex;flex-direction: column;gap: 0;border-top: 1px solid #f3f4f6}
.event-ranking-item {display: flex;align-items: center;gap: 12px;padding: 10px 0;border-bottom: 1px solid #f3f4f6}
.event-ranking-item:last-child {border-bottom: none}
.event-ranking-rank {flex-shrink: 0;width: 32px;text-align: center;font-size: 0.85rem;font-weight: 600;color: #9ca3af;font-variant-numeric: tabular-nums}
.event-ranking-user {flex: 1;min-width: 0;display: flex;align-items: center;gap: 10px;text-decoration: none;color: inherit}
.event-ranking-avatar {border-radius: 50%;flex-shrink: 0}
.event-ranking-name {font-size: 0.88rem;font-weight: 500;color: #1a2b4a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.event-ranking-amount {flex-shrink: 0;font-size: 0.9rem;font-weight: 700;color: #1a2b4a;font-variant-numeric: tabular-nums}
.event-ranking-amount small {font-size: 0.75em;font-weight: 500;color: #6b7280;margin-left: 1px}
.events-empty {text-align: center;color: #9ca3af;padding: 32px 0;font-size: 0.9rem}
.events-hero {text-align: center;padding: 32px 0 24px}
.events-title {font-size: 1.8rem;font-weight: 700;color: #1a2b4a;margin: 0 0 4px}
.events-subtitle {font-size: 0.95rem;color: #6b7280;margin: 0}
.events-list {display: flex;flex-direction: column;gap: 12px}
.events-card {display: block;background: #fff;border: 1px solid #e5e7eb;border-radius: 14px;padding: 20px;text-decoration: none;color: inherit;transition: all 0.2s ease}
.events-card:hover {box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);transform: translateY(-1px)}
.events-card-title {font-size: 1.1rem;font-weight: 600;color: #1a2b4a;margin: 0 0 8px}
.events-card-period {font-size: 0.85rem;color: #6b7280;margin: 0 0 8px}
@media (max-width: 480px) {.events-container {padding: 0 12px 36px}
.event-show-hero {padding: 36px 16px 48px;margin: 0 -12px}
.event-show-title {font-size: 1.3rem}
.event-hero-goal-amount {font-size: 2.2rem}
.event-card {padding: 22px 16px;border-radius: 16px}
.event-countdown-value {font-size: 1.7rem;padding: 10px 10px;min-width: 48px}
.event-countdown-sep {font-size: 1.2rem}
.event-stats-row {gap: 6px}
.event-stat {padding: 10px 6px}
.event-stat-value {font-size: 1.2rem}
.event-gauge-wrap {width: 130px;height: 130px}
.event-gauge-wrap--achieved {width: 150px;height: 150px}
.event-gauge-pct {font-size: 1.7rem}
.event-podium {gap: 6px;padding: 0 4px}
.event-podium-bar--1st { height: 64px; }
.event-podium-bar--2nd { height: 48px; }
.event-podium-bar--3rd { height: 36px; }
.event-podium-name {font-size: 0.72rem;max-width: 80px}
.event-podium-amount {font-size: 0.7rem}
.event-ranking-item {gap: 8px}
.event-participants-grid {grid-template-columns: 1fr}}