.time-event-prompt {
    --time-event-gold: #ffe095;
    --time-event-text: #fff8ed;
    --time-event-muted: #f2c3be;
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: calc(var(--time-event-offset, 24px) + env(safe-area-inset-bottom));
    z-index: 1035;
    width: 340px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    border: 2px solid #f6cd69;
    border-radius: 1.1rem;
    color: var(--time-event-text);
    background: #681321;
    box-shadow: 0 12px 32px #21050d55, 0 0 22px #edb34c28;
    font-size: .85rem;
    animation: time-event-arrive .4s ease-out both;
}
.time-event-prompt *, .time-event-prompt *::before { box-sizing: border-box; }
.time-event-prompt[hidden], .time-event-prompt [hidden] { display: none !important; }
.time-event-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .8rem .85rem;
    overflow: hidden;
    color: inherit;
    border: 0;
    border-radius: .95rem;
    background: linear-gradient(125deg, #f33c48 0%, #cc1b36 48%, #97152c 100%);
    text-align: left;
    cursor: pointer;
}
.time-event-toggle::before {
    content: "";
    position: absolute;
    inset: -50% -30%;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 40%, #fff4b426 48%, #fff5cf40 50%, transparent 58%);
    transform: translateX(-110%);
}
.time-event-prompt:not(.is-open):not(.is-completed) { animation: time-event-arrive .4s ease-out both, time-event-glow 6s ease-in-out .5s infinite; }
.time-event-prompt:not(.is-open):not(.is-completed) .time-event-toggle::before { animation: time-event-shine 7s ease-in-out 1s infinite; }
.time-event-toggle:hover { background: linear-gradient(125deg, #fc4652, #d6223e 48%, #a91830); }
.time-event-toggle:focus-visible, .time-event-heading button:focus-visible { outline: 2px solid var(--time-event-gold); outline-offset: 3px; }
.time-event-logo { position: relative; display: block; flex-shrink: 0; width: 106px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 2px #45020c55); }
.time-event-toggle-content { position: relative; display: flex; flex: 1; align-items: center; gap: .5rem; min-width: 0; }
.time-event-resource-icon { flex-shrink: 0; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px #35081066); }
.time-event-summary { display: grid; flex: 1; gap: .1rem; min-width: 0; }
.time-event-summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffe1ce; font-size: .72rem; font-weight: 600; }
.time-event-summary strong { color: #fff9e7; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; font-size: .9rem; }
.time-event-toggle-content > i { flex-shrink: 0; margin-left: auto; color: var(--time-event-gold); transition: transform .2s; }
.time-event-toggle[aria-expanded="true"] .time-event-toggle-content > i { transform: rotate(180deg); }
.time-event-prompt.is-open { width: min(360px, calc(100vw - 32px)); }
.time-event-prompt.is-open .time-event-toggle { border-top: 1px solid #ffd58055; border-radius: 0 0 .95rem .95rem; }
.time-event-prompt.is-completed .time-event-toggle { background: linear-gradient(125deg, #c62d3e, #881429); }
.time-event-panel {
    padding: 1.1rem;
    border-radius: .95rem .95rem 0 0;
    background: linear-gradient(145deg, #821828, #4c101c);
    max-height: max(110px, calc(100dvh - var(--time-event-offset, 24px) - 155px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #d6ac59 #4c101c;
    scrollbar-width: thin;
    transform-origin: right bottom;
    animation: time-event-expand .25s ease-out both;
}
.time-event-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.time-event-eyebrow { font-size: .62rem; font-weight: 800; letter-spacing: .1em; color: var(--time-event-gold); }
.time-event-heading h2 { color: var(--time-event-text); margin: .3rem 0 .7rem; font-size: 1.15rem; line-height: 1.3; }
.time-event-heading button { padding: .1rem .2rem; color: var(--time-event-muted); border: 0; background: transparent; }
.time-event-heading button:hover { color: var(--time-event-gold); }
.time-event-objective { color: var(--time-event-muted); margin: 0 0 1rem; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }
.time-event-objective strong { color: var(--time-event-text); }
.time-event-ranking-heading { display: flex; justify-content: space-between; gap: .6rem; font-size: .75rem; margin-bottom: .5rem; }
.time-event-ranking-heading > span { color: var(--time-event-muted); font-size: .62rem; align-self: center; }
.time-event-ranking { display: grid; gap: .35rem; list-style: none; padding: 0; margin: 0; }
.time-event-ranking li { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .55rem .6rem; border: 1px solid #ffd5801c; border-radius: .6rem; background: #ffd7a90c; }
.time-event-rank { display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; font-size: .7rem; border: 1px solid #ffd58038; border-radius: .4rem; color: var(--time-event-muted); }
.time-event-ranking li:first-child { background: #ffd57b13; border-color: #ffd57b50; }
.time-event-ranking li:first-child .time-event-rank { color: #ffe095; border-color: #ffe09575; background: #ffe09516; }
.time-event-island { min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 650; font-size: .75rem; }
.time-event-score { flex-shrink: 0; color: var(--time-event-gold); font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.time-event-empty { color: var(--time-event-muted); line-height: 1.6; padding: .7rem; margin: 0; border: 1px dashed #ffd58055; border-radius: .6rem; text-align: center; }
.time-event-next { margin: .8rem 0 0; color: var(--time-event-gold); font-size: .75rem; line-height: 1.6; }
.time-event-footer { margin: .7rem 0 0; color: var(--time-event-muted); font-size: .68rem; line-height: 1.5; }
@media (max-width: 575.98px) {
    .time-event-prompt { width: min(320px, calc(100vw - 32px)); right: max(16px, env(safe-area-inset-right)); --time-event-offset: 16px; }
    .time-event-toggle { padding: .7rem; gap: .5rem; }
    .time-event-toggle-content { gap: .5rem; }
    .time-event-logo { width: 92px; }
    .time-event-resource-icon { width: 30px; height: 30px; }
    .time-event-panel { padding: .9rem; }
}
@media (max-width: 359.98px) {
    .time-event-logo { width: 80px; }
    .time-event-resource-icon { width: 26px; height: 26px; }
    .time-event-summary strong { font-size: .85rem; }
}
@keyframes time-event-arrive { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes time-event-expand { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes time-event-glow { 0%, 25%, 100% { box-shadow: 0 12px 32px #21050d55, 0 0 22px #edb34c28; } 12% { box-shadow: 0 12px 32px #21050d66, 0 0 0 4px #ffcc5220, 0 0 32px #ffc44b66; } }
@keyframes time-event-shine { 0% { transform: translateX(-110%); } 18%, 100% { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
    .time-event-prompt, .time-event-prompt:not(.is-open):not(.is-completed), .time-event-panel, .time-event-prompt:not(.is-open):not(.is-completed) .time-event-toggle::before { animation: none; }
    .time-event-toggle-content > i { transition: none; }
}