/* =========================================================
 * 活動 + 限定徽章（/events）
 * 顏色一律使用 app.css 的變數，亮 / 暗色自動切換
 * ========================================================= */

/* ---------- 列表頁 Hero ---------- */
.ev-hero { position: relative; overflow: hidden; border-radius: 24px; padding: 1.5rem 1.4rem; background: var(--gq-grad-soft); border: 1px solid var(--gq-border); }
.ev-hero p { color: var(--gq-text-2); }
.ev-hero-emoji { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(-8deg); font-size: 3.4rem; opacity: .9; }
@media (max-width: 575.98px) { .ev-hero { padding-right: 4.2rem; } .ev-hero-emoji { font-size: 2.4rem; right: .8rem; top: 1.1rem; transform: rotate(-8deg); } }

/* ---------- 卡片 ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.ev-card { display: flex; flex-direction: column; overflow: hidden; color: var(--gq-text); transition: transform .18s ease, box-shadow .18s ease; }
.ev-card:hover { color: var(--gq-text); transform: translateY(-2px); box-shadow: var(--gq-shadow-lg); }
.ev-cover { position: relative; aspect-ratio: 1200 / 630; background: var(--gq-surface-3); }
.ev-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-phase { position: absolute; left: .7rem; top: .7rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(20, 20, 30, .6); backdrop-filter: blur(6px); }
.ev-phase.static { position: static; }
.ev-phase.is-active { background: var(--gq-mint); }
.ev-phase.is-upcoming { background: var(--gq-primary); }
.ev-phase.is-ended { background: #8a8a96; }
.ev-badge-float { position: absolute; z-index: 1; right: .7rem; bottom: -1.1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--gq-surface); border: 2px solid var(--gq-sun); box-shadow: var(--gq-shadow); }
.ev-card-body { padding: 1rem 1.1rem 1rem; display: flex; flex-direction: column; flex: 1; gap: .4rem; }
.ev-card-title { font-size: 1.02rem; font-weight: 800; margin: 0; padding-right: 2.2rem; line-height: 1.4; }
.ev-card-summary { font-size: .85rem; color: var(--gq-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .78rem; color: var(--gq-muted); }
.ev-meta i { margin-right: .15rem; }
.ev-card-foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .4rem; }

.ev-countdown { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--gq-accent-soft); color: var(--gq-accent); font-variant-numeric: tabular-nums; }
.ev-countdown.is-upcoming { background: var(--gq-primary-soft); color: var(--gq-primary); }
.ev-countdown.is-ended { background: var(--gq-surface-3); color: var(--gq-muted); }
.ev-joined { display: inline-block; padding: .15rem .55rem; border-radius: 999px; background: var(--gq-primary-soft); color: var(--gq-primary); font-weight: 700; }
.ev-joined.is-done { background: rgba(34, 199, 169, .15); color: var(--gq-mint); }

/* ---------- 內頁 ---------- */
.ev-show-hero { overflow: hidden; }
.ev-show-cover { aspect-ratio: 1200 / 630; max-height: 300px; width: 100%; background: var(--gq-surface-3); overflow: hidden; }
.ev-show-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-show-head { padding: 1.1rem 1.25rem 1.2rem; }
.ev-show-title { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 900; letter-spacing: -.01em; margin: 0 0 .35rem; }

.ev-side { position: sticky; top: 84px; }
@media (max-width: 1199.98px) { .ev-side { position: static; } }
.ev-progress { height: 12px; border-radius: 999px; background: var(--gq-surface-3); }
.ev-progress .progress-bar { background: var(--gq-grad); border-radius: 999px; }
.ev-progress .progress-bar.is-done { background: linear-gradient(135deg, #22c7a9, #7ad97a); }

.ev-badge-card { position: relative; overflow: hidden; padding-right: 2.4rem; display: flex; align-items: center; gap: .9rem; background: linear-gradient(135deg, rgba(255, 176, 32, .12), rgba(255, 107, 154, .1)); }
.ev-badge-medal { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--gq-surface); border: 3px solid var(--gq-sun); box-shadow: 0 6px 18px rgba(255, 176, 32, .3); filter: grayscale(.35); }
.ev-badge-medal.is-owned { filter: none; animation: ev-pop .6s ease; }
.ev-ribbon { position: absolute; top: 10px; right: -30px; transform: rotate(35deg); width: 110px; text-align: center; font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: #fff; background: var(--gq-grad); padding: .15rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
@keyframes ev-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }

.ev-leaderboard { list-style: none; padding-left: 0; }
.ev-rank { flex: none; width: 1.6rem; text-align: center; font-weight: 800; color: var(--gq-muted); font-variant-numeric: tabular-nums; }
.ev-rank.top1 { color: #e6a100; }
.ev-rank.top2 { color: #8f9aa8; }
.ev-rank.top3 { color: #c47a3a; }

.ev-rules { padding-left: 1.1rem; display: grid; gap: .45rem; line-height: 1.7; }
.ev-body { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-badge-medal.is-owned { transition: none; animation: none; }
}