/* Live events (js/18-events.js): an icon on the Home arena per running event,
   its time left underneath, a red dot when a task is ready to claim, and the
   task list sheet. */

/* A column under the idle stash pill, top-left of the arena. The container
   lets taps through between icons; the buttons catch their own. */
.eventIcons{position:absolute;left:14px;top:62px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.eventIcon{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:50px;padding:0;border:0;background:none;color:#f4d489;cursor:pointer;pointer-events:auto}
.eventArt{position:relative;display:grid;place-items:center;width:44px;height:44px;background:none;border:0;box-shadow:none}
.eventArt svg{width:26px;height:26px;fill:currentColor;filter:drop-shadow(0 1px 2px #0009)}
.eventArt .eventArtImage{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 2px 3px #080b0dcc)}
.eventTime{display:block;min-width:46px;padding:2px 5px;border:1px solid #454b7b;border-radius:7px;background:#151831e8;
  color:#f1eaff;font:700 10px/1.25 Outfit,system-ui,sans-serif;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
/* the same red dot the footer and the sub-tabs wear */
.eventIcon.alert .eventArt::after{content:'';position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;
  background:#ff5c6a;border:2px solid #fff;box-shadow:0 0 0 1px #111722;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.eventIcon.alert .eventArt::after{animation:pipnow 1.1s ease-in-out infinite}}

/* The task list sheet. */
.evSheet .eyebrow{color:#f4d489;text-align:left}
.evSheet h3{margin:0 0 4px;text-align:left}
.evSheet .mini{text-align:left}
.evTimer{display:inline-flex;align-items:center;gap:6px;margin:8px 0 14px;padding:5px 12px;border:1px solid #454b7b;border-radius:99px;
  background:#151831;color:#cfd5ee;font-size:12px}
.evTimer b{color:#f4d489;font-variant-numeric:tabular-nums}
.evTasks{display:grid;gap:9px;margin:0 0 14px;padding:0;list-style:none}
.evTask{min-width:0;padding:11px 12px;border:1px solid #414c78;border-radius:14px;background:#171e3c}
.evTask.ready{border:2px solid #c7a8ff;background:#302650}
.evTask.claimed{border-color:#3c7068;background:#192f35}
.evTaskHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.evTaskHead b{font-size:13px}
.evNums{flex:none;color:#b7bedb;font-size:11px;font-variant-numeric:tabular-nums}
.evBar{height:7px;margin:8px 0 9px;overflow:hidden;border-radius:4px;background:#10162f}
.evBar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#9b7fe0,#c4a6fa)}
.evTask.claimed .evBar i{background:#59c79f}
.evTaskFoot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.evReward{display:flex;flex-wrap:wrap;gap:3px 11px;min-width:0}
.evReward span{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.evDone{color:#95dfbc;font-size:12px;font-weight:700;white-space:nowrap}
.evNote{margin:0 0 12px;line-height:1.5}
.sheet[data-variant="live-event"] .btn.pri{border-color:#e8d7ff;background:#c4a6fa;color:#1c1744;box-shadow:0 3px #77629b;font-weight:600}
.sheet[data-variant="live-event"] .btn:disabled{opacity:.4;box-shadow:none}
.evSheet #evClose{margin-top:8px}