html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    box-sizing: border-box;
    overflow: hidden;
    background: #160b07;
    color: #f5dfb5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

* { box-sizing: border-box; }

.event-calendar {
    height: 425px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(69, 36, 20, .98), rgba(31, 15, 9, .98));
    border: 1px solid #8e652c;
    box-shadow: inset 0 0 0 2px rgba(8, 4, 2, .75);
}

.event-calendar__summary {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    margin-bottom: 7px;
    border: 1px solid rgba(174, 128, 61, .45);
    background: rgba(8, 4, 2, .55);
    color: #d9bb82;
}

.event-calendar__summary strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    color: #fff0cb;
}

.event-calendar__summary time {
    margin-left: auto;
    color: #a98959;
    font-size: 10px;
    white-space: nowrap;
}

.event-calendar__pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #7b6a56;
    box-shadow: 0 0 0 3px rgba(123, 106, 86, .15);
}

.event-calendar__pulse.is-active {
    background: #8fbb45;
    box-shadow: 0 0 0 3px rgba(143, 187, 69, .15), 0 0 8px rgba(143, 187, 69, .7);
}

.event-calendar__list {
    height: 365px;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #8d6330 #1b0d08;
    scrollbar-width: thin;
}

.event-calendar__list::-webkit-scrollbar { width: 7px; }
.event-calendar__list::-webkit-scrollbar-track { background: #1b0d08; }
.event-calendar__list::-webkit-scrollbar-thumb { background: #8d6330; border: 1px solid #2c160c; }

.event-card {
    position: relative;
    padding: 9px 10px;
    margin-bottom: 7px;
    border: 1px solid rgba(171, 130, 34, .48);
    background: linear-gradient(180deg, rgba(80, 43, 24, .92), rgba(49, 25, 14, .95));
    box-shadow: inset 0 1px 0 rgba(255, 231, 184, .05);
}

.event-card:last-child { margin-bottom: 0; }

.event-card.is-active {
    border-color: #91a84a;
    background: linear-gradient(180deg, rgba(76, 76, 31, .92), rgba(48, 43, 18, .96));
    box-shadow: inset 3px 0 0 #91a84a, inset 0 1px 0 rgba(255, 244, 177, .09);
}

.event-card__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.event-card__head h2 {
    flex: 1;
    margin: 0;
    color: #f6dfb0;
    font: 700 13px/16px Georgia, "Times New Roman", serif;
}

.event-card.is-active .event-card__head h2 { color: #fff2b3; }

.event-card__status {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid #85602f;
    background: #2a160d;
    color: #c9a76f;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.event-card.is-active .event-card__status {
    border-color: #879b48;
    background: #59652e;
    color: #fff4c4;
}

.event-card__schedule {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #b99a69;
    line-height: 15px;
}

.event-card__type {
    flex: 0 0 auto;
    padding: 1px 5px;
    background: rgba(8, 4, 2, .5);
    border: 1px solid rgba(171, 130, 34, .32);
    color: #e1c28c;
    font-size: 9px;
    font-weight: 700;
}

.event-card__timing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(201, 170, 113, .18);
    color: #d6b77d;
    font-size: 10px;
}

.event-countdown {
    color: #f5d387;
    white-space: nowrap;
    font-size: 10px;
}

.event-card.is-active .event-countdown { color: #dff19e; }

.event-calendar__message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 18px;
    border: 1px dashed rgba(171, 130, 34, .55);
    background: rgba(8, 4, 2, .3);
    color: #c8a875;
    text-align: center;
    line-height: 18px;
}

.event-calendar__message.is-error {
    border-color: #8b4036;
    color: #e6a99f;
}

@media (max-width: 260px) {
    .event-calendar { padding: 5px; }
    .event-calendar__summary time { display: none; }
    .event-card__schedule, .event-card__timing { display: block; }
    .event-countdown { display: block; margin-top: 4px; }
}