/* Event schedule cards. Each event sets --ev (its colour) through its modifier class. */
.events-clock {
    font-size: 0.82rem !important;
    color: var(--faint) !important;
    margin-top: 0.4rem !important;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.event-card {
    --ev: var(--accent);
    position: relative;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.1rem 1.2rem 1.2rem;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.event-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ev);
    opacity: 0.8;
}

.event-card.is-soon {
    border-color: color-mix(in srgb, var(--ev) 45%, transparent);
}

.event-card.is-live {
    border-color: color-mix(in srgb, var(--ok) 55%, transparent);
    box-shadow: 0 0 24px rgba(52, 211, 153, 0.12);
}

.event-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-sigil {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--ev);
    background: color-mix(in srgb, var(--ev) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--ev) 40%, transparent);
}

.event-title { flex: 1; min-width: 0; }

.event-name {
    font-family: var(--font-head);
    font-size: 1.02rem;
    font-weight: 600;
    color: #fff;
}

.event-meta {
    font-size: 0.76rem;
    color: var(--muted);
}

.event-state { flex-shrink: 0; }

.event-body {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1rem;
}

.event-countdown {
    flex: 0 0 auto;
    min-width: 150px;
}

.countdown-number {
    font-family: var(--font-head);
    font-size: 1.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ev);
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-shadow: 0 0 22px color-mix(in srgb, var(--ev) 35%, transparent);
}

.is-live .countdown-number { color: var(--ok); text-shadow: 0 0 22px rgba(52, 211, 153, 0.35); }

.countdown-label {
    font-size: 0.7rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-top: 4px;
}

.event-yourtime {
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 6px;
}
.event-yourtime b { color: var(--text); font-weight: 600; }

.event-timetable {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.event-time-badge.more {
    cursor: help;
    color: var(--faint);
    border: 1px dashed var(--line-strong);
    background: transparent;
}

.event-time-badge {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.event-time-badge.next {
    background: color-mix(in srgb, var(--ev) 18%, transparent);
    color: var(--ev);
    border: 1px solid color-mix(in srgb, var(--ev) 40%, transparent);
    font-weight: 700;
}

.event-red-dragon   { --ev: #f87171; }
.event-golden       { --ev: #fcd34d; }
.event-blood-castle { --ev: #60a5fa; }
.event-chaos-castle { --ev: #c084fc; }
.event-devil-square { --ev: #2dd4bf; }
.event-happy-hour   { --ev: #f472b6; }
.event-white-wizard { --ev: #e2e8f0; }
.event-kanturu      { --ev: #a3e635; }
.event-castle-siege { --ev: #fb923c; }

@media (max-width: 600px) {
    .events-grid { grid-template-columns: 1fr; }
    .event-body { flex-direction: column; align-items: stretch; }
    .event-timetable { justify-content: flex-start; }
}

/* Banner art behind the three mini-game cards (VEYLMU art), darkened on the text side. */
.event-card.event-blood-castle,
.event-card.event-devil-square,
.event-card.event-chaos-castle {
    background-size: cover;
    background-position: right center;
}
.event-card.event-blood-castle {
    background-image: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.78) 55%, rgba(8, 8, 12, 0.45) 100%), url("/img/brand/event-bloodcastle.jpg");
}
.event-card.event-devil-square {
    background-image: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.78) 55%, rgba(8, 8, 12, 0.45) 100%), url("/img/brand/event-devilsquare.jpg");
}
.event-card.event-chaos-castle {
    background-image: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.78) 55%, rgba(8, 8, 12, 0.45) 100%), url("/img/brand/event-chaoscastle.jpg");
}

/* Night of the Veil (Halloween), shown only while it runs: its art behind the card like the
   mini-games, the pumpkin instead of a sigil, and what the event is (events.js veilAbout).
   Ember orange is its colour; the violet of the site stays around it. */
.event-night-veil { --ev: #fb923c; }
.event-card.event-night-veil {
    background-image: linear-gradient(90deg, rgba(8, 8, 12, 0.94) 0%, rgba(8, 8, 12, 0.8) 55%, rgba(8, 8, 12, 0.42) 100%), url("/img/brand/event-nightoftheveil.jpg");
    background-size: cover;
    background-position: right center;
    border-color: rgba(143, 123, 255, 0.3);
    box-shadow: 0 0 26px rgba(251, 146, 60, 0.08), 0 0 34px rgba(143, 123, 255, 0.08);
}
.event-card.event-night-veil.is-live { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }

.event-icon {
    padding: 3px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ev) 45%, transparent));
}

.event-about {
    margin: 0.85rem 0 0;
    max-width: 34em;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #cfcbe0;
}

.event-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.6rem;
}
.event-chip {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    color: #fed7aa;
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.32);
}

/* While it runs, an ember glow rises under the events banner too (html.season-halloween, js/site.js). */
.season-halloween .page-head.art-events::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(55% 70% at 50% 115%, rgba(251, 146, 60, 0.16), transparent 70%);
}