/* =============================================================================
 * Events & Marathon System Stylesheet (events.css)
 * Modern glassmorphic theme matching Fung Wan Legends & FWO Comeback
 * ========================================================================== */

.events-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}
.events-hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.events-hero p {
  color: #94a3b8;
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Filter Bar */
.events-nav-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.events-tab {
  padding: 0.5rem 1.2rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  text-decoration: none;
}
.events-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(201, 162, 75, 0.4);
  text-decoration: none;
}
.events-tab.active {
  color: #221c0a;
  background: linear-gradient(180deg, var(--gold2), var(--gold));
  border-color: var(--gold);
}

/* Category Sections */
.events-category-block {
  margin-bottom: 3rem;
}
.events-category-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.events-cat-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 162, 75, 0.15);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 8px;
  color: var(--gold2);
}
.events-category-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
}

/* Grid of Cards */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

/* Event Card */
.event-card {
  background: rgba(14, 19, 32, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 15px rgba(201, 162, 75, 0.15);
  text-decoration: none;
}
.event-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.event-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}
.event-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.event-status-badge.live {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}
.event-status-badge.live .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}
.event-status-badge.upcoming {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}
.event-status-badge.upcoming .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
}
.event-status-badge.ended {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.event-desc {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Metadata List */
.event-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #cbd5e1;
  margin-bottom: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.event-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-meta-item svg {
  color: #38bdf8;
  flex-shrink: 0;
}
.event-meta-item.timer svg {
  color: #a855f7;
}
.event-meta-item.participants svg {
  color: #eab308;
}

/* Rewards preview */
.event-rewards-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold2);
  margin-bottom: 1rem;
}

/* Card Action */
.event-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #38bdf8;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: all 0.2s ease;
}
.event-card:hover .event-card-btn {
  background: #38bdf8;
  color: #0c1220;
}

/* =============================================================================
 * Single Event Detail View
 * ============================================================================= */
.event-detail-wrap {
  margin-top: 1rem;
}
.event-breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.88rem;
  color: #64748b;
}
.event-breadcrumb a {
  color: #94a3b8;
}
.event-breadcrumb a:hover {
  color: var(--gold2);
}

.event-detail-hero {
  background: rgba(14, 19, 32, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}
.event-detail-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.event-detail-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}
.event-detail-info-bar {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.95rem;
  color: #94a3b8;
}
.event-detail-info-bar strong {
  color: #f1f5f9;
}

/* Detail Split Grid */
.event-split-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}
@media (max-width: 860px) {
  .event-split-layout {
    grid-template-columns: 1fr;
  }
}

.event-section-box {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.8rem;
}
.event-section-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold2);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.event-rules-content {
  line-height: 1.7;
  color: #cbd5e1;
  white-space: pre-line;
  font-size: 0.95rem;
}

/* Rewards Tier List */
.reward-tier-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  margin-bottom: 0.75rem;
}
.reward-tier-card.tier-1 {
  border-color: rgba(212, 175, 55, 0.5);
  background: linear-gradient(90deg, rgba(201, 162, 75, 0.12), transparent);
}
.reward-tier-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.reward-tier-info {
  flex: 1;
}
.reward-tier-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--gold2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
.reward-tier-prize {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.reward-tier-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  margin-top: 0.15rem;
}

/* Event Leaderboard Table */
.event-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.event-lb-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  color: #64748b;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.event-lb-table td {
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.event-lb-rank {
  font-weight: 800;
  width: 40px;
}
.event-lb-name {
  font-weight: 700;
  color: #f1f5f9;
}
.event-lb-score {
  font-weight: 800;
  color: var(--gold2);
  text-align: right;
}

/* Empty State */
.events-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #94a3b8;
}

/* Admin Action Buttons & Table Polish */
.btn-action-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fde047;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.btn-action-edit:hover {
  background: #eab308;
  color: #1a1608;
  border-color: #eab308;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.35);
  transform: translateY(-1px);
}
.btn-action-del {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.2;
}
.btn-action-del:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
  transform: translateY(-1px);
}
.admin-table-row:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* =============================================================================
 * Admin Event & Reward Tables Polish
 * ============================================================================= */

/* Expand main container width for admin console */
body:has(.events-admin-container) main,
main:has(.events-admin-container) {
  max-width: 1200px;
}

.events-admin-container {
  width: 100%;
}

.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}

.admin-data-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.85rem 1rem;
  color: #94a3b8;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.admin-data-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

.admin-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.admin-table-title {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s ease;
}

.admin-table-title:hover {
  color: var(--gold2);
  text-decoration: none;
}

.admin-table-title .ext-link {
  color: #38bdf8;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

.admin-table-title:hover .ext-link {
  transform: translate(2px, -2px);
}


/* Community event catalogue: featured beta and balanced category columns. */
body[data-page="events.php"] .comic-banner{min-height:200px;margin-bottom:28px}
body[data-page="events.php"] .events-hero{text-align:left;margin-bottom:25px}
body[data-page="events.php"] .events-hero p.realm-eyebrow{font-size:10px;color:var(--gold2);text-align:left;max-width:none;margin:0 0 14px}
body[data-page="events.php"] .events-hero h1{font:400 clamp(34px,4.5vw,52px) Georgia,serif;margin:0 0 12px;color:var(--ink);letter-spacing:-.03em}
body[data-page="events.php"] .events-hero p:not(.realm-eyebrow){font-size:14px;line-height:1.8;color:var(--muted);max-width:720px;margin:0}
body[data-page="events.php"] .events-nav-tabs{justify-content:flex-start;gap:8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 32px}
body[data-page="events.php"] .events-tab{border-radius:2px;padding:9px 15px;font-size:11px;font-weight:600;background:var(--panel);border-color:var(--line);color:var(--muted)}
body[data-page="events.php"] .events-tab.active{background:#7b3027;border-color:#ae5645;color:#f4e5d2}
.realm-events-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:stretch}
.realm-events-catalog .events-featured-category{grid-column:1/-1}
.realm-events-catalog .events-category-block{margin:0;min-width:0;display:flex;flex-direction:column}.realm-events-catalog .events-category-head{margin:0 0 15px}.realm-events-catalog .events-category-title{font-size:23px;font-weight:400}
.realm-events-catalog .events-cat-icon{border-radius:2px;width:28px;height:28px;font-size:13px}
.realm-events-catalog .events-grid{grid-template-columns:1fr;gap:18px;flex:1}
body[data-page="events.php"] .event-card{padding:25px;border-radius:2px;background:#1c1c17;border-color:var(--line);backdrop-filter:none;box-shadow:none}
body[data-page="events.php"] .event-card:hover{border-color:#9b855b;transform:translateY(-2px);box-shadow:none}
body[data-page="events.php"] .event-title{font-size:24px;font-weight:400;line-height:1.3;color:var(--ink)}
body[data-page="events.php"] .event-status-badge{border-radius:2px;font-size:9px;letter-spacing:.08em;white-space:nowrap}
body[data-page="events.php"] .event-desc{font-size:13px;line-height:1.8;color:var(--muted);margin:8px 0 20px}
body[data-page="events.php"] .is-beta-event{border-color:#756340;border-top:3px solid #a14333;background:linear-gradient(115deg,#28251b,#1b1b17 75%)}
.is-beta-event .event-title{font-size:34px!important}.is-beta-event .event-desc{display:block;max-width:780px;-webkit-line-clamp:unset}
.beta-title-highlights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:5px 0 16px}
.beta-title-highlights>div{background:#15161199;border:1px solid #4f4732;padding:22px;min-width:0}.beta-title-highlights .realm-eyebrow{font-size:9px;margin-bottom:10px;color:#cbb585}
.beta-title-highlights h4{font:400 23px Georgia,serif;margin:0 0 9px;color:var(--gold2)}.beta-title-highlights p{font-size:12px;color:var(--muted);line-height:1.8;margin:0}
.beta-stat-announcement{font-size:12px;line-height:1.8;color:#c8bea7;background:#372f1d66;border-left:2px solid #b29859;padding:12px 15px;margin:0 0 20px}
body[data-page="events.php"] .event-meta-list{padding:15px 0;border-color:var(--line);display:flex;flex-wrap:wrap;gap:15px 28px}.event-meta-item{font-size:11px}
body[data-page="events.php"] .event-card-btn{border-radius:2px;background:transparent;border:1px solid #6b5940;color:var(--gold2);font-size:11px;padding:12px;box-shadow:none}
body[data-page="events.php"] .event-card:hover .event-card-btn{background:#713027;color:#f4e5d2;border-color:#a95b46}
body[data-page="events.php"] .event-rewards-pill{margin:0 0 15px;font-size:10px}
body[data-page="events.php"] .event-detail-hero{background:#222018;border:1px solid #6d5e3d;border-radius:2px;padding:30px}
body[data-page="events.php"] .event-detail-title{font:400 clamp(32px,4vw,48px) Georgia,serif;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
body[data-page="events.php"] .event-section-box{border-radius:2px;background:var(--panel);border-color:var(--line);padding:24px}
body[data-page="events.php"] .event-section-box h3{font-size:23px;font-weight:400}
body[data-page="events.php"] .event-section-box .beta-title-highlights{grid-template-columns:1fr}.event-section-box .beta-title-highlights>div{padding:18px}
@media(max-width:700px){
 .realm-events-catalog{grid-template-columns:1fr;gap:26px}.realm-events-catalog .events-featured-category{grid-column:auto}
 .beta-title-highlights{grid-template-columns:1fr;gap:10px}.beta-title-highlights>div{padding:18px}.beta-title-highlights h4{font-size:21px}
 body[data-page="events.php"] .event-card{padding:20px}.event-card-head{flex-wrap:wrap;gap:10px}.is-beta-event .event-title{font-size:30px!important}
 body[data-page="events.php"] .events-nav-tabs{gap:6px;padding:15px 0}.events-nav-tabs .events-tab{padding:8px 10px;font-size:10px}
 body[data-page="events.php"] .comic-banner{min-height:145px}.realm-events-catalog .events-category-title{font-size:21px}
 body[data-page="events.php"] .event-detail-hero{padding:20px}.event-detail-header-row{flex-wrap:wrap}.event-detail-info-bar{flex-wrap:wrap;gap:12px}
}

/* Events trial: homepage duel continues into the banner's desktop wings. */
body[data-page="events.php"] .events-fight-panorama{position:relative;isolation:isolate;margin:0 0 28px}
body[data-page="events.php"] .events-fight-panorama .comic-banner{margin-bottom:0}
.events-fight-wings{position:absolute;z-index:-1;pointer-events:none;left:50%;top:-24px;bottom:-24px;width:100vw;transform:translateX(-50%);overflow:hidden;background:url('assets-wallpaper-duel.jpg') center 42%/cover no-repeat;opacity:.65;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 72%,transparent)}
.events-fight-video{display:block;position:absolute;top:0;left:0;width:calc((100vw - 1200px)/2 + 60px);height:100%;object-fit:cover;object-position:40% center;filter:saturate(.72) brightness(.85)}
.events-fight-right{left:auto;right:0;object-position:65% center}
.events-fight-wings::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#12121066,transparent 20%,#12121088 38%,#12121088 62%,transparent 80%,#12121066)}
@media(min-width:1281px){body[data-page="events.php"] .events-fight-panorama .comic-banner{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}}
@media(max-width:1280px){.events-fight-wings{display:none}}
@media(prefers-reduced-motion:reduce){.events-fight-video{display:none}}

/* Video sambungan fight */
.comic-banner.comic-video{display:block;width:100%;padding:0;background:none;object-fit:cover}
@media(prefers-reduced-motion:reduce){.comic-banner.comic-video{display:none}}