.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}
.event-topcatches-section {margin-top: 16px}
.event-topcatches-section .event-section-heading svg {color: #d4a017}
.event-topcatches-sub {font-size: 0.82rem;color: #6b7280;margin: -12px 0 18px}
.event-spotlight {min-width: 0}
@media (min-width: 600px) {.event-spotlight {max-width: 480px;margin: 0 auto}}
.event-spotlight-stage {position: relative;aspect-ratio: 16 / 10;border-radius: 14px;overflow: hidden;background: #0c4a6e}
.event-spotlight-slide {position: absolute;inset: 0;opacity: 0;transform: scale(1.04);transition: opacity 0.7s ease;pointer-events: none}
.event-spotlight-slide.is-active {opacity: 1;transform: scale(1);pointer-events: auto;transition: opacity 0.7s ease, transform 5s linear}
.event-spotlight-link {position: absolute;inset: 0;display: block;text-decoration: none;color: inherit}
.event-spotlight-photo {position: absolute;inset: 0}
.event-spotlight-img {width: 100%;height: 100%;object-fit: cover;display: block}
.event-spotlight-noimage {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(160deg, #0c4a6e, #075985 45%, #0ea5e9);color: rgba(255, 255, 255, 0.85)}
.event-spotlight-slide::after {content: "";position: absolute;inset: 0;background: linear-gradient(to top, rgba(2, 23, 42, 0.75) 0%, rgba(2, 23, 42, 0) 48%);pointer-events: none}
.event-spotlight-overlay {position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;padding: 16px;display: flex;flex-direction: column;gap: 3px;color: #fff;min-width: 0}
.event-spotlight-rank {display: inline-flex;align-items: center;gap: 5px;align-self: flex-start;padding: 3px 10px;border-radius: 999px;font-size: 0.72rem;font-weight: 800;background: linear-gradient(135deg, #fbbf24, #d4a017);color: #422006;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25)}
.event-spotlight-rank--2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #1e293b; }
.event-spotlight-rank--3 { background: linear-gradient(135deg, #d9b99b, #b08968); color: #3d2b1f; }
.event-spotlight-rank--4,
.event-spotlight-rank--5 { background: rgba(2, 23, 42, 0.72); color: #fff; }
.event-spotlight-fish {font-size: 0.95rem;font-weight: 700;overflow-wrap: anywhere}
.event-spotlight-meta {display: flex;align-items: center;gap: 7px;font-size: 0.78rem;color: rgba(255, 255, 255, 0.88);min-width: 0}
.event-spotlight-avatar {flex-shrink: 0;border-radius: 50%}
.event-spotlight-username {overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.event-spotlight-grade {flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;min-width: 18px;height: 18px;padding: 0 4px;border-radius: 5px;font-size: 0.68rem;font-weight: 800;color: #fff;background: linear-gradient(135deg, #6b7280, #4b5563)}
.event-spotlight-grade[data-grade="S"] { background: linear-gradient(135deg, #f59e0b, #eab308); }
.event-spotlight-grade[data-grade="A"] { background: linear-gradient(135deg, #b0bec5, #78909c); }
.event-spotlight-grade[data-grade="B"] { background: linear-gradient(135deg, #d97706, #b45309); }
.event-spotlight-grade[data-grade="C"] { background: linear-gradient(135deg, #6b7280, #4b5563); }
.event-spotlight-grade[data-grade="D"] { background: linear-gradient(135deg, #374151, #1f2937); }
.event-spotlight-price {font-size: 2.2rem;line-height: 1.1;font-weight: 800;font-variant-numeric: tabular-nums;background: linear-gradient(90deg, #fef3c7, #fbbf24 40%, #fff7ed 60%, #fbbf24);background-size: 200% 100%;-webkit-background-clip: text;background-clip: text;color: transparent;animation: event-spotlight-shimmer 3s linear infinite}
.event-spotlight-price small {font-size: 0.42em;font-weight: 700;margin-left: 2px;-webkit-text-fill-color: #fde68a}
@keyframes event-spotlight-shimmer {from { background-position: 200% 0; }
to { background-position: 0 0; }}
.event-spotlight-progress {position: absolute;left: 0;bottom: 0;height: 3px;width: 0;z-index: 3;background: #fbbf24}
.event-spotlight-thumbs {display: grid;grid-template-columns: repeat(5, 1fr);gap: 8px;margin-top: 12px}
.event-spotlight-thumb {position: relative;aspect-ratio: 1;border: 2px solid transparent;border-radius: 10px;overflow: hidden;padding: 0;cursor: pointer;background: #0c4a6e}
.event-spotlight-thumb.is-active {border-color: #fbbf24}
.event-spotlight-thumb-img {width: 100%;height: 100%;object-fit: cover;display: block}
.event-spotlight-thumb-noimage {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(160deg, #075985, #0ea5e9);color: rgba(255, 255, 255, 0.8)}
.event-spotlight-thumb-rank {position: absolute;top: 3px;left: 3px;z-index: 2;width: 18px;height: 18px;border-radius: 50%;background: rgba(2, 23, 42, 0.78);color: #fff;font-size: 0.62rem;font-weight: 800;display: flex;align-items: center;justify-content: center}
@media (prefers-reduced-motion: reduce) {.event-spotlight-slide,
.event-spotlight-slide.is-active {transition: opacity 0.2s ease;transform: none}
.event-spotlight-price {animation: none}
.event-spotlight-progress {display: none}}
@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}
.event-spotlight-thumbs {gap: 6px}
.event-spotlight-price {font-size: 1.9rem}}
.event-bingo-section {margin-top: 16px}
.event-bingo-sprite {position: absolute;width: 0;height: 0;overflow: hidden}
.event-bingo-card {position: relative;overflow: hidden;border-radius: 26px;color: #fff;background:
radial-gradient(130% 90% at 50% -22%, rgba(103, 232, 249, 0.5) 0%, rgba(103, 232, 249, 0) 58%),
linear-gradient(180deg, #0e3c63 0%, #114b76 46%, #0a2a49 100%);box-shadow: 0 20px 44px rgba(8, 32, 56, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.09)}
.event-bingo-card::before {content: "";position: absolute;top: -32%;left: -15%;width: 130%;height: 78%;background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.07) 0 11px, rgba(255, 255, 255, 0) 11px 52px);transform: rotate(-5deg);pointer-events: none}
.event-bingo-deco {position: absolute;inset: 0;overflow: hidden;pointer-events: none}
.event-bingo-bubble {position: absolute;border-radius: 50%;background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.04) 62%);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);animation-name: eventBingoBubbleUp;animation-timing-function: linear;animation-iteration-count: infinite}
.event-bingo-bubble:nth-child(1) { left: 7%; top: 22%; width: 13px; height: 13px; animation-duration: 7s; animation-delay: -1s; }
.event-bingo-bubble:nth-child(2) { left: 23%; top: 76%; width: 9px; height: 9px; animation-duration: 9s; animation-delay: -4s; }
.event-bingo-bubble:nth-child(3) { left: 56%; top: 34%; width: 8px; height: 8px; animation-duration: 8s; animation-delay: -2s; }
.event-bingo-bubble:nth-child(4) { left: 81%; top: 64%; width: 12px; height: 12px; animation-duration: 10s; animation-delay: -6s; }
.event-bingo-bubble:nth-child(5) { left: 43%; top: 90%; width: 10px; height: 10px; animation-duration: 6s; animation-delay: -3s; }
.event-bingo-bubble:nth-child(6) { left: 93%; top: 20%; width: 7px; height: 7px; animation-duration: 11s; animation-delay: -8s; }
@keyframes eventBingoBubbleUp {0% { transform: translateY(0) scale(0.9); opacity: 0; }
18% { opacity: 0.85; }
100% { transform: translateY(-190px) scale(1.3); opacity: 0; }}
.event-bingo-swimmer {position: absolute;left: 0;width: 100%;color: rgba(186, 230, 253, 0.2);animation-name: eventBingoSwim;animation-timing-function: linear;animation-iteration-count: infinite}
.event-bingo-swimmer svg {position: absolute;left: -140px;display: block;height: auto}
.event-bingo-swimmer--fish-far { top: 1.6%; animation-duration: 34s; animation-delay: -21s; }
.event-bingo-swimmer--fish-far svg { width: 28px; }
.event-bingo-swimmer--fish-near { top: 6.8%; animation-duration: 26s; animation-delay: -5s; }
.event-bingo-swimmer--fish-near svg { width: 46px; }
.event-bingo-swimmer--whale { top: 89.5%; animation-duration: 46s; animation-delay: -17s; animation-direction: reverse; }
.event-bingo-swimmer--whale svg { width: 104px; }
@keyframes eventBingoSwim {from { transform: translateX(0); }
to { transform: translateX(calc(100% + 140px)); }}
.event-bingo-top {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 14px;padding: 20px 20px 0}
.event-bingo-heading {display: flex;align-items: center;gap: 11px;min-width: 0;margin: 0;font-size: 1rem;font-weight: 400}
.event-bingo-badge {flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;border-radius: 14px;background: linear-gradient(150deg, #7dd3fc, #0ea5e9);color: #06283d;box-shadow: 0 8px 16px rgba(14, 165, 233, 0.35)}
.event-bingo-badge svg {display: block;width: 24px;height: auto}
.event-bingo-heading b {display: block;font-size: 1.02rem;letter-spacing: 0.01em}
.event-bingo-heading small {display: block;margin-top: 3px;font-size: 0.68rem;color: rgba(255, 255, 255, 0.6)}
.event-bingo-score {flex-shrink: 0;margin: 0;line-height: 1;text-align: right}
.event-bingo-score b {font-size: 1.95rem;font-weight: 700;letter-spacing: -0.02em;text-shadow: 0 2px 10px rgba(8, 47, 73, 0.5)}
.event-bingo-score i {font-style: normal;font-size: 0.76rem;font-weight: 700;color: rgba(255, 255, 255, 0.55)}
.event-bingo-gauge {position: relative;padding: 15px 20px 0}
.event-bingo-gauge-track {position: relative;height: 10px;border-radius: 999px;background: rgba(255, 255, 255, 0.13);box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28)}
.event-bingo-gauge-fill {position: absolute;left: 0;top: 0;height: 100%;border-radius: 999px;background: linear-gradient(90deg, #22d3ee, #34d399);overflow: hidden}
.event-bingo-gauge-fill::after {content: "";position: absolute;inset: 0;background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.3) 0 7px, rgba(255, 255, 255, 0) 7px 17px);animation: eventBingoFlow 1.1s linear infinite}
@keyframes eventBingoFlow {to { background-position: 24px 0; }}
.event-bingo-gauge-knob {position: absolute;top: 50%;width: 17px;height: 17px;margin-left: -8.5px;border-radius: 50%;transform: translateY(-50%);background: linear-gradient(180deg, #f87171 0 50%, #ffffff 50% 100%);box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.14)}
.event-bingo-meta {position: relative;display: flex;flex-wrap: wrap;gap: 8px;padding: 14px 20px 16px}
.event-bingo-chip {display: inline-flex;align-items: center;gap: 6px;padding: 6px 12px;border-radius: 999px;background: rgba(255, 255, 255, 0.1);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);font-size: 0.72rem;font-weight: 700;color: rgba(255, 255, 255, 0.82)}
.event-bingo-chip b {font-size: 0.9rem;color: #fff}
.event-bingo-chip.is-line {background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(249, 115, 22, 0.22));box-shadow: inset 0 0 0 1px rgba(252, 211, 77, 0.6);color: #fde68a}
.event-bingo-chip.is-line b {color: #fff}
.event-bingo-guide {position: relative;margin: 0 20px 16px;padding: 10px 12px;border-radius: 10px;background: rgba(255, 255, 255, 0.1);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);font-size: 0.8rem;color: rgba(255, 255, 255, 0.82)}
.event-bingo-paper {position: relative;margin: 0 12px;padding: 12px 12px 14px;border-radius: 20px 20px 6px 6px;background: linear-gradient(180deg, #ffffff 0%, #f2f8fd 100%);box-shadow: 0 14px 30px rgba(4, 22, 40, 0.3)}
.event-bingo-letters {display: grid;grid-template-columns: repeat(5, 1fr);gap: 6px;margin-bottom: 8px}
.event-bingo-letters span {display: flex;align-items: center;justify-content: center;height: 30px;border-radius: 9px;font-size: 0.95rem;font-weight: 800;letter-spacing: 0.08em;color: #fff}
.event-bingo-letters span:nth-child(1) { background: linear-gradient(150deg, #38bdf8, #0284c7); }
.event-bingo-letters span:nth-child(2) { background: linear-gradient(150deg, #22d3ee, #0891b2); }
.event-bingo-letters span:nth-child(3) { background: linear-gradient(150deg, #34d399, #059669); }
.event-bingo-letters span:nth-child(4) { background: linear-gradient(150deg, #fbbf24, #d97706); }
.event-bingo-letters span:nth-child(5) { background: linear-gradient(150deg, #fb7185, #e11d48); }
.event-bingo-board {position: relative}
.event-bingo-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 6px}
.event-bingo-cell {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 2px;min-width: 0;aspect-ratio: 1 / 1;padding: 16px 5px 12px;border: 0;border-radius: 12px;background: #fff;box-shadow: inset 0 0 0 1px #dce8f3, 0 1px 2px rgba(15, 42, 68, 0.06);font-family: inherit;text-align: center;overflow: hidden;cursor: pointer;transition: transform 0.12s ease, box-shadow 0.12s ease}
.event-bingo-cell:hover {transform: translateY(-2px);box-shadow: inset 0 0 0 1px #bcd6ea, 0 7px 16px rgba(15, 42, 68, 0.18)}
.event-bingo-cell::after {content: "";position: absolute;left: 0;right: 0;bottom: 0;height: 3px;background: transparent}
.event-bingo-cell[data-category="fishing"]::after {background: #38bdf8}
.event-bingo-cell[data-category="activity"]::after {background: #34d399}
.event-bingo-cell[data-category="community"]::after {background: #fb923c}
.event-bingo-cell[data-category="record"]::after {background: #a78bfa}
.event-bingo-cell.is-achieved {background: linear-gradient(160deg, #e8fbf3, #c9f2e3);box-shadow: inset 0 0 0 1px #6ee7b7, 0 1px 2px rgba(15, 42, 68, 0.06)}
.event-bingo-cell.is-achieved .event-bingo-label {color: #065f46}
.event-bingo-cell.is-reach {background: linear-gradient(160deg, #fffbeb, #fdeec6);animation: eventBingoReach 2.2s ease-in-out infinite}
@keyframes eventBingoReach {0%, 100% { box-shadow: inset 0 0 0 1px #fbbf24, 0 0 0 3px rgba(251, 191, 36, 0.22); }
50% { box-shadow: inset 0 0 0 1px #f59e0b, 0 0 0 8px rgba(251, 191, 36, 0.04); }}
.event-bingo-coord {position: absolute;top: 5px;left: 6px;font-size: 0.58rem;font-weight: 800;letter-spacing: 0.06em;color: #9fb3c8}
.event-bingo-label {font-size: 0.76rem;font-weight: 700;line-height: 1.25;color: #1a2b4a;word-break: break-word}
.event-bingo-check {position: absolute;top: 5px;right: 5px;display: inline-flex;color: #059669}
.event-bingo-stamp {position: absolute;right: -7%;bottom: -7%;width: 56%;color: rgba(5, 150, 105, 0.2);pointer-events: none}
.event-bingo-stamp svg {display: block;width: 100%;height: auto}
.event-bingo-lines {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none}
.event-bingo-line-set {animation: eventBingoLineFade 0.45s ease-out both}
.event-bingo-line-wrap {fill: rgba(251, 191, 36, 0.07)}
.event-bingo-line-edge {fill: none;stroke-linejoin: round;filter: drop-shadow(0 2px 7px rgba(245, 158, 11, 0.45));animation: eventBingoLineDraw 1s cubic-bezier(0.22, 1, 0.36, 1) both;animation-delay: inherit}
@keyframes eventBingoLineFade {from { opacity: 0; }
to { opacity: 1; }}
@keyframes eventBingoLineDraw {from { stroke-dashoffset: var(--event-bingo-line-length); }
to { stroke-dashoffset: 0; }}
.event-bingo-achievers,
.event-bingo-rewards {position: relative;margin: 12px 12px 0;padding: 14px;border-radius: 16px;background: rgba(255, 255, 255, 0.96);box-shadow: 0 12px 26px rgba(4, 22, 40, 0.26)}
.event-bingo-achievers-heading {margin: 0 0 10px;font-size: 0.86rem;font-weight: 700;color: #1a2b4a}
.event-bingo-achievers-list {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 4px}
.event-bingo-achiever {display: flex;align-items: center;gap: 8px;padding: 6px 10px;border-radius: 10px;background: #f8fafc}
.event-bingo-achiever.is-me {background: #eff6ff;box-shadow: inset 0 0 0 1px #bfdbfe}
.event-bingo-achiever-rank {flex: none;min-width: 32px;font-size: 0.9rem;font-weight: 700;color: #64748b;font-variant-numeric: tabular-nums}
.event-bingo-achiever-rank small {font-size: 0.66rem;font-weight: 600;margin-left: 1px}
.event-bingo-achiever.is-rank-1 .event-bingo-achiever-rank {color: #d97706}
.event-bingo-achiever.is-rank-2 .event-bingo-achiever-rank {color: #94a3b8}
.event-bingo-achiever.is-rank-3 .event-bingo-achiever-rank {color: #b45309}
.event-bingo-achiever-user {flex: 1;min-width: 0;display: flex;align-items: center;gap: 0;text-decoration: none;color: inherit}
.event-bingo-achiever-avatar {flex: none;margin-right: 6px;border-radius: 50%}
.event-bingo-achiever-name {font-size: 0.82rem;color: #1a2b4a;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.event-bingo-achiever-lines {flex: none;padding: 2px 6px;border-radius: 999px;background: #ffedd5;color: #c2410c;font-size: 0.68rem;font-weight: 700}
.event-bingo-achiever-cells {flex: none;font-size: 0.9rem;font-weight: 700;color: #1a2b4a}
.event-bingo-achiever-cells small {font-size: 0.66rem;font-weight: 600;margin-left: 1px;color: #64748b}
.event-bingo-achievers-tied {margin: 8px 0 0;font-size: 0.72rem;color: #64748b}
.event-bingo-rewards-heading {display: flex;align-items: center;gap: 6px;margin: 0 0 8px;font-size: 0.86rem;font-weight: 700;color: #1a2b4a}
.event-bingo-rewards-icon {display: inline-flex;color: #0ea5e9}
.event-bingo-rewards-badge {padding: 2px 8px;border-radius: 999px;background: #e0f2fe;color: #0369a1;font-size: 0.66rem;font-weight: 700}
.event-bingo-rewards-text {margin: 0;font-size: 0.76rem;line-height: 1.6;color: #64748b}
.event-bingo-rewards-list {list-style: none;margin: 0 0 10px;padding: 0;display: flex;flex-direction: column;gap: 6px}
.event-bingo-reward {display: flex;align-items: center;gap: 9px;padding: 7px 10px;border-radius: 12px;background: #f8fafc}
.event-bingo-reward.is-granted {background: #ecfdf5;box-shadow: inset 0 0 0 1px #a7f3d0}
.event-bingo-reward-threshold {flex-shrink: 0;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 40px;padding: 3px 0;border-radius: 9px;background: #e0f2fe;color: #0369a1;font-size: 0.92rem;font-weight: 700;line-height: 1.1}
.event-bingo-reward.is-granted .event-bingo-reward-threshold {background: #d1fae5;color: #047857}
.event-bingo-reward-threshold-unit {font-size: 0.56rem;font-weight: 600}
.event-bingo-reward-body {flex: 1;min-width: 0;display: flex;flex-direction: column;gap: 1px}
.event-bingo-reward-name {font-size: 0.8rem;font-weight: 700;color: #1a2b4a}
.event-bingo-reward-note {font-size: 0.7rem;line-height: 1.5;color: #64748b}
.event-bingo-reward-state {flex-shrink: 0;display: inline-flex;align-items: center;gap: 3px;padding: 3px 8px;border-radius: 999px;background: #10b981;color: #fff;font-size: 0.64rem;font-weight: 700}
.event-bingo-reward-state-icon {display: inline-flex}
.event-bingo-foot {position: relative;padding: 15px 20px 20px}
.event-bingo-tip {display: flex;align-items: center;gap: 6px;margin: 0 0 11px;font-size: 0.74rem;color: rgba(255, 255, 255, 0.7)}
.event-bingo-tip svg {flex-shrink: 0}
.event-bingo-legend {display: flex;flex-wrap: wrap;gap: 9px 14px;margin-bottom: 11px}
.event-bingo-legend span {display: inline-flex;align-items: center;gap: 6px;font-size: 0.69rem;color: rgba(255, 255, 255, 0.68)}
.event-bingo-legend i {width: 14px;height: 4px;border-radius: 999px}
.event-bingo-legend i.is-fishing { background: #38bdf8; }
.event-bingo-legend i.is-activity { background: #34d399; }
.event-bingo-legend i.is-community { background: #fb923c; }
.event-bingo-legend i.is-record { background: #a78bfa; }
.event-bingo-legend i.is-reach { background: #fbbf24; }
.event-bingo-note {margin: 0;font-size: 0.68rem;color: rgba(255, 255, 255, 0.42)}
.event-bingo-scrim {position: fixed;inset: 0;z-index: var(--z-index-modal, 1100);display: none;background: rgba(6, 26, 46, 0.55);-webkit-backdrop-filter: blur(3px);backdrop-filter: blur(3px)}
.event-bingo-scrim.is-open {display: block}
.event-bingo-sheet {position: absolute;left: 50%;bottom: 0;width: 100%;max-height: 86vh;max-height: 86dvh;transform: translateX(-50%);border-radius: 24px 24px 0 0;background: #fff;box-shadow: 0 -10px 40px rgba(4, 22, 40, 0.35);overflow-x: hidden;overflow-y: auto;animation: eventBingoSheetUp 0.26s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes eventBingoSheetUp {from { transform: translate(-50%, 28px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }}
.event-bingo-sheet-hero {position: sticky;top: 0;z-index: 1;padding: 12px 20px 30px;background:
radial-gradient(120% 130% at 12% -20%, rgba(103, 232, 249, 0.55) 0%, rgba(103, 232, 249, 0) 58%),
linear-gradient(135deg, #0e3c63 0%, #12557f 100%);color: #fff;overflow: hidden}
.event-bingo-sheet-wave {position: absolute;left: 0;bottom: -1px;display: block;width: 100%;height: 20px;fill: #fff}
.event-bingo-sheet-handle {position: relative;display: block;width: 40px;height: 4px;margin: 0 auto 14px;border-radius: 999px;background: rgba(255, 255, 255, 0.42)}
.event-bingo-sheet-head {position: relative;display: flex;align-items: flex-start;justify-content: space-between;gap: 12px}
.event-bingo-sheet-title {margin: 0;font-size: 1.16rem;font-weight: 700;line-height: 1.4;letter-spacing: 0.01em;color: #fff;word-break: break-word}
.event-bingo-sheet-close {flex-shrink: 0;display: inline-flex;padding: 7px;border: 0;border-radius: 999px;background: rgba(255, 255, 255, 0.16);box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);color: #fff;cursor: pointer;transition: background 0.15s ease}
.event-bingo-sheet-close:hover {background: rgba(255, 255, 255, 0.28)}
.event-bingo-sheet-body {position: relative;padding: 18px 20px max(24px, env(safe-area-inset-bottom));overflow: hidden}
.event-bingo-sheet-watermark {position: absolute;right: -22px;bottom: -26px;width: 118px;color: rgba(14, 116, 144, 0.05);pointer-events: none}
.event-bingo-sheet-watermark svg {display: block;width: 100%;height: auto}
.event-bingo-sheet-cond {position: relative;margin: 0;font-size: 0.95rem;line-height: 1.95;color: #475569;word-break: break-word}
@media (min-width: 640px) {.event-bingo-sheet {top: 50%;bottom: auto;width: min(440px, calc(100% - 32px));border-radius: 22px;transform: translate(-50%, -50%);animation: eventBingoSheetPop 0.24s cubic-bezier(0.16, 1, 0.3, 1)}
@keyframes eventBingoSheetPop {from { transform: translate(-50%, -46%) scale(0.96); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }}
.event-bingo-sheet-handle { display: none; }
.event-bingo-sheet-hero { padding: 26px 24px 36px; }
.event-bingo-sheet-body { padding: 20px 24px 26px; }}
@media (max-width: 520px) {.event-bingo-card { border-radius: 22px; }
.event-bingo-top { padding: 16px 14px 0; }
.event-bingo-badge { width: 36px; height: 36px; border-radius: 12px; }
.event-bingo-badge svg { width: 21px; }
.event-bingo-heading b { font-size: 0.92rem; }
.event-bingo-score b { font-size: 1.6rem; }
.event-bingo-gauge { padding: 13px 14px 0; }
.event-bingo-meta { padding: 12px 14px 13px; }
.event-bingo-guide { margin: 0 14px 13px; }
.event-bingo-paper { margin: 0 8px; padding: 9px 9px 11px; border-radius: 16px 16px 5px 5px; }
.event-bingo-letters { gap: 5px; margin-bottom: 6px; }
.event-bingo-letters span { height: 24px; border-radius: 7px; font-size: 0.8rem; }
.event-bingo-grid { gap: 5px; }
.event-bingo-cell { padding: 13px 3px 9px; border-radius: 10px; }
.event-bingo-label {font-size: 0.65rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;line-clamp: 3;overflow: hidden}
.event-bingo-achievers,
.event-bingo-rewards { margin: 10px 8px 0; padding: 12px 10px; }
.event-bingo-foot { padding: 13px 14px 16px; }
.event-bingo-achiever {gap: 6px;padding: 6px 8px}
.event-bingo-achiever-rank {min-width: 28px}
.event-bingo-achiever-lines {padding: 2px 5px;font-size: 0.64rem}}
@media (prefers-reduced-motion: reduce) {.event-bingo-bubble,
.event-bingo-swimmer,
.event-bingo-gauge-fill,
.event-bingo-cell.is-reach,
.event-bingo-line-set,
.event-bingo-line-edge,
.event-bingo-sheet {animation: none}}