.events-section { padding-bottom: 6rem; scroll-margin-top: 6rem; }
.events-section .section-title { margin-bottom: 1rem; }
.events-note { color: #b4a7a0; font: .8rem/1.5 'Segoe UI', sans-serif; }
.events-panel { overflow: hidden; border: 1px solid #64242a; border-radius: 6px; background: #110f10; }
.events-table { width: 100%; table-layout: fixed; text-align: center; }
.events-table thead { background: radial-gradient(ellipse at top, #403020, #160f0d 80%); color: #ffe0aa; }
.events-table thead th { padding: 12px; font-size: 1.25rem; }
.events-table th + th, .event-details { border-left: 1px solid #492628; }
.event-row { border-top: 1px solid #4b2023; }
.event-instance { padding: 9px 12px; width: 50%; background: linear-gradient(110deg, #250f1240, transparent); }
.event-banner { width: 256px; max-width: 100%; height: 76px; position: relative; overflow: hidden; margin: auto; border: 1px solid #684137; background: #191215; display: grid; place-items: center; }
.event-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.event-name { position: relative; color: #fff; text-shadow: 0 2px 5px #000; font: italic 800 clamp(.8rem, 2vw, 1.35rem)/1.15 'Segoe UI', sans-serif; text-transform: uppercase; padding: 5px; }
.event-world-boss .event-art { object-position: center 25%; }
.event-master-lair .event-art { object-position: 80% 30%; filter: brightness(.65) sepia(.6) saturate(2); }
.event-invasion .event-art { object-position: center 30%; filter: brightness(.6) sepia(.3); }
.event-details { padding: 8px 12px; font-family: 'Segoe UI', sans-serif; }
.event-boss { color: #efe0b6; font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin-bottom: 3px; }
.event-countdown { color: #ff824a; font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.15; font-weight: 750; font-variant-numeric: tabular-nums; }
.event-location, .event-date { display: block; font-size: .75rem; color: #d7926d; line-height: 1.4; }
.event-row[data-state='live'] .event-countdown::before { content: ''; display: inline-block; height: 8px; width: 8px; border-radius: 50%; background: #ff824a; margin-right: 8px; box-shadow: 0 0 10px #ff824a80; vertical-align: middle; }
.event-row[data-state='ended'] .event-countdown { color: #a49a96; }
@media(max-width: 575px) { .event-details, .event-instance { padding: 9px 6px; } .event-boss { font-size: .9rem; } .event-date { font-size: .65rem; } .event-banner { height: 83px; } }