/* ============================================================================
   Events panel — three layouts, floating over the game.

   Anchored to the hero sidebar's right edge on desktop and out of the layout
   flow, so the main content keeps its full width: a schedule is worth a glance,
   not a permanent 236px tax on every tab. Translucent and blurred for the same
   reason — it reads as a layer over the world rather than a wall beside it, and
   it collapses to a rail of lamps when it is in the way.

   Not rendered at all on phones, where the bottom strip already carries the
   same signals.

   Tone classes carry the accent: it lights the node on the rail and the lamp
   on the collapsed strip, and nothing else, so a glance reads as colour rather
   than as decoration.
   ========================================================================== */

.evp {
  --evp-w: 236px;
  --tone: #ffc954;
  --tone-dim: rgba(255, 201, 84, 0.22);
  display: none;
}
.evp-col, .rsp { display: none; }

/* Desktop only. The column exists because there is room for it; on a phone
   there is not, and a squeezed version of this would be worse than the strip
   that is already there. */
@media (min-width: 1180px) {
  /* Out of flow: the main content keeps its full width and the panel sits over
     it. Anchored to the hero sidebar's edge rather than the viewport's, so it
     stays put when the window is resized. */
  #gameLayout { position: relative; }

  /* The column is what is anchored to the sidebar now; the panels inside are
     ordinary flex children. Position used to live on .evp, which worked while
     it was the only window here — but a second window has to sit underneath it,
     and nothing can know where an auto-height, internally-scrolling box ends.
     Full height on purpose: it is what lets the events panel shrink instead of
     pushing the resources off the bottom of the screen. */
  .evp-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    left: calc(var(--evp-left, 300px) + 12px);
    top: 12px;
    bottom: 12px;
    z-index: 120;
    /* The column is taller than its contents, so without this the empty space
       under the panels would swallow clicks meant for the game behind it. */
    pointer-events: none;
  }
  .evp-col > * { pointer-events: auto; }

  /* Chrome shared by both windows. Translucent rather than opaque: the game
     reads through them, so they feel like a layer over the world instead of a
     wall beside it. */
  .evp, .rsp {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--evp-w);
    border: 1px solid rgba(150, 115, 210, 0.22);
    border-radius: 13px;
    background: rgba(13, 9, 24, 0.58);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    transition: width 0.22s ease, padding 0.22s ease;
  }

  /* Only the events panel scrolls: it is the one whose length is set by how
     much happens to be running. `flex: 0 1 auto` with `min-height: 0` is what
     makes it give way first when the column runs short. */
  .evp {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 11px 9px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }
  .rsp {
    flex: 0 0 auto;
    padding: 10px 9px 11px;
  }

  /* Collapsed keeps the one thing each panel exists for - which lamps are lit -
     and gives back the rest of the width. They fold independently, so the
     column shrink-wraps whichever is wider. */
  .evp.is-collapsed { width: 46px; padding: 11px 6px 10px; }
  .rsp.is-collapsed { width: 46px; padding: 10px 6px 10px; }
}

/* Browsers without backdrop-filter would render the translucent fill over live
   game art and turn the text to mush, so those get a solid panel instead. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .evp, .rsp { background: rgba(11, 7, 20, 0.95); }
}

/* The panel is a fixed rail beside the content, so its own scrollbar should
   not announce itself until it is used. */
.evp::-webkit-scrollbar { width: 6px; }
.evp::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.evp .tone-violet { --tone: #bf5fff; --tone-dim: rgba(191, 95, 255, 0.22); }
.evp .tone-teal   { --tone: #4fd8c4; --tone-dim: rgba(79, 216, 196, 0.22); }
.evp .tone-gold   { --tone: #ffc954; --tone-dim: rgba(255, 201, 84, 0.22); }
.evp .tone-ember  { --tone: #ff7a45; --tone-dim: rgba(255, 122, 69, 0.22); }
/* The new day is a ruler, not an event: neutral, so it never competes with
   something you can actually go and do. */
.evp .tone-slate  { --tone: #8fa3c4; --tone-dim: rgba(143, 163, 196, 0.18); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.evp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 4px 10px;
  border-bottom: 1px solid rgba(120, 90, 170, 0.16);
  margin-bottom: 12px;
}
.evp-head-t {
  font-family: Cinzel, serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #e8dcc4;
}
.evp-head-n {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(190, 175, 225, 0.45);
}
.evp-head-n.has-live { color: #ffc954; }

/* The collapse control. Quiet until pointed at - it is a preference, not an
   action anyone needs drawn to. */
.evp-toggle {
  flex-shrink: 0; margin-left: auto;
  width: 30px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 17px/1 system-ui, sans-serif; color: rgba(200, 185, 235, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(150, 115, 210, 0.28);
  border-radius: 7px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.evp-toggle:hover {
  color: #ffc954; border-color: rgba(255, 201, 84, 0.4);
  background: rgba(255, 201, 84, 0.08);
}
/* Collapsed the header is just the control and the live count, so it centres
   rather than spreading across a width that is no longer there. */
.evp-head.is-mini {
  flex-direction: column; align-items: center; gap: 6px;
  padding: 0 0 8px; margin-bottom: 9px;
}
.evp-head.is-mini .evp-toggle { margin-left: 0; width: 34px; height: 30px; }
.evp-head.is-mini .evp-head-n { font-size: 11px; }

/* ── The collapsed lamp rail ─────────────────────────────────────────────── */
.evp.is-collapsed .evp-list { align-items: center; gap: 7px; }
.evp-mini {
  position: relative;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(120, 90, 170, 0.18);
  border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.16s, background 0.16s;
}
.evp-mini:hover { border-color: rgba(160, 120, 220, 0.45); }
.evp-mini.is-live {
  border-color: var(--tone-dim);
  background:
    radial-gradient(circle at 50% 50%, var(--tone-dim), transparent 72%),
    rgba(255, 255, 255, 0.05);
}
.evp-mini-ic { width: 20px; height: 20px; object-fit: contain; opacity: 0.42; }
.evp-mini.is-live .evp-mini-ic { opacity: 1; }
.evp-mini-ic-glyph { font-size: 15px; line-height: 1; color: var(--tone); opacity: 0.42; }
.evp-mini.is-live .evp-mini-ic-glyph { opacity: 1; }
.evp-mini-lamp {
  position: absolute; top: -2px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(120, 90, 170, 0.5);
  border: 1.5px solid rgba(13, 9, 24, 0.9);
  box-sizing: content-box;
}
.evp-mini.is-live .evp-mini-lamp {
  background: var(--tone); box-shadow: 0 0 8px var(--tone);
  animation: evpPulse 2.2s ease-in-out infinite;
}
/* Collapsed, the lamp is all there is, so it has to say "and it is your turn"
   too — otherwise collapsing hides the one state worth not missing. */
.evp-mini.needs-act {
  border-color: var(--tone);
  box-shadow: 0 0 0 1px var(--tone-dim), 0 0 12px -2px var(--tone);
}
.evp-mini.needs-act .evp-mini-lamp {
  box-shadow: 0 0 0 2px rgba(13, 9, 24, 0.9), 0 0 10px var(--tone);
}

.evp-list { display: flex; flex-direction: column; }

/* Shared by the rail's live nodes and the collapsed lamps. */
@keyframes evpPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ══ (b) RAIL ══════════════════════════════════════════════════════════════
   One line down the panel with the events hanging off it. The lit part of the
   line runs from the top down to the last live event, so how much is running
   right now is legible before a single word is read. */
.evp-rail { position: relative; padding-left: 20px; }
.evp-rail::before {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(120, 90, 170, 0.22); border-radius: 1px;
}
.evp-rail::after {
  content: ''; position: absolute; left: 6px; top: 8px; width: 2px;
  height: var(--live-run, 0%);
  background: linear-gradient(180deg, #ffc954, rgba(191, 95, 255, 0.5));
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(255, 201, 84, 0.35);
}
.evp-node {
  position: relative; display: flex; width: 100%; padding: 7px 4px 9px;
  text-align: left; cursor: pointer; background: none; border: 0;
  border-bottom: 1px solid rgba(120, 90, 170, 0.1);
}
.evp-node:last-child { border-bottom: 0; }
.evp-node:hover .evp-node-name { color: #fff6e2; }
.evp-node-dot {
  position: absolute; left: -18px; top: 13px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #0b0714; border: 2px solid rgba(120, 90, 170, 0.45);
  box-sizing: border-box;
}
.evp-node.is-live .evp-node-dot {
  background: var(--tone); border-color: var(--tone);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 12px var(--tone);
  animation: evpPulse 2.2s ease-in-out infinite;
}
.evp-node-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.evp-node-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.evp-node-ic { width: 15px; height: 15px; object-fit: contain; opacity: 0.5; flex-shrink: 0; }
.evp-node.is-live .evp-node-ic { opacity: 1; }
.evp-node-ic-glyph { font-size: 12px; line-height: 1; color: var(--tone); }
.evp-node-name {
  font-size: 11px; font-weight: 700; color: #b6a8cf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.15s;
}
.evp-node.is-live .evp-node-name { color: #fff6e2; }
/* Pass level, weekly VP — a number the row is partly about, so it sits beside
   the name rather than competing with the countdown below it. */
.evp-node-stat {
  flex-shrink: 0; margin-left: auto;
  font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(190, 175, 225, 0.5);
}
.evp-node.is-live .evp-node-stat { color: var(--tone); opacity: 0.9; }
/* Something for you to do, and you have not done it. Filled rather than
   outlined: on a panel where everything else is a label, the one thing that is
   a prompt should not look like another label. */
.evp-node-act {
  flex-shrink: 0; margin-left: auto;
  padding: 2px 6px; border-radius: 5px;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: #14091f;
  background: var(--tone);
  box-shadow: 0 0 10px -2px var(--tone);
  animation: evpPulse 2.4s ease-in-out infinite;
}
/* The node itself: a halo rather than a bigger dot, so the rail's line stays
   straight and the row does not shift when the state flips. */
.evp-node.needs-act .evp-node-dot {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6), 0 0 0 6px var(--tone-dim), 0 0 14px var(--tone);
}
.evp-node.needs-act .evp-node-name { color: #fff; }
.evp-node.needs-act .evp-node-time { color: rgba(255, 255, 255, 0.8); }

.evp-node-time {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: rgba(190, 175, 225, 0.55); font-variant-numeric: tabular-nums;
}
.evp-node-time b { font-size: 12px; color: #e8dcc4; font-weight: 700; }
.evp-node.is-live .evp-node-time b { color: var(--tone); }
.evp-node-note {
  font-size: 9px; color: rgba(190, 175, 225, 0.38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Resources: the two pools, in their own window under the events ─────────
   Was a sticky footer inside the events panel; Mark wanted it separated, so it
   is a panel in its own right with its own frame and its own fold. */
.rsp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 4px 9px;
  border-bottom: 1px solid rgba(120, 90, 170, 0.16);
  margin-bottom: 10px;
}
.rsp-head.is-mini { justify-content: center; padding: 0 0 8px; margin-bottom: 9px; }
.rsp-head-t {
  font-family: Cinzel, serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: #e8dcc4;
}

.evp-res {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evp-res-row {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: 6px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  transition: background .15s, border-color .15s, transform .15s;
}
.evp-res-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.evp-res-row:focus-visible { outline: 2px solid var(--res-tone, #ffc954); outline-offset: 2px; }

.evp-res-top { display: flex; align-items: center; gap: 6px; }
.evp-res-ic { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; }
.evp-res-nm {
  flex: 1 1 auto; min-width: 0;
  font-size: 10.5px; color: #d8cdf0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evp-res-v {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums;
}
.evp-res-v em { font-style: normal; font-weight: 600; font-size: 9.5px; color: rgba(216, 205, 240, 0.5); }
.evp-res-v.is-full { color: #ffd98a; }

.evp-res-bar {
  position: relative; display: block;
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.evp-res-bar i {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--res-tone, #ffc954);
  box-shadow: 0 0 7px color-mix(in srgb, var(--res-tone, #ffc954) 55%, transparent);
  transition: width .3s ease;
}
/* Segment hairlines for the rift's three hundreds — the same division its own
   gauge draws, so the small copy is not telling a different story. */
.evp-res-bar u {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(13, 9, 24, 0.85);
}
.evp-res-bar.is-full i { box-shadow: 0 0 10px var(--res-tone, #ffc954); }

.evp-res-note { font-size: 9px; color: rgba(216, 205, 240, 0.45); font-variant-numeric: tabular-nums; }
.evp-res-note.is-full { color: #ffd98a; }

/* Folded to 46px. Two lamps used to live here and said only "full / not full";
   the count fits, so the count is what it shows. 34px of usable width takes a
   three-digit number comfortably, which is the widest either pool goes (300).
   The cap sits under it in small type rather than beside it — "78/300" on one
   line would have to shrink past reading size. */
.evp-res.is-mini { flex-direction: column; align-items: stretch; gap: 7px; }
.evp-res-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 3px 6px;
  border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font: inherit; color: inherit;
  transition: background .15s, border-color .15s;
}
.evp-res-chip:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.15); }
.evp-res-chip:focus-visible { outline: 2px solid var(--res-tone, #ffc954); outline-offset: 2px; }
.evp-res-chip img { width: 13px; height: 13px; object-fit: contain; }
.evp-res-chip b {
  font-size: 12px; font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.evp-res-chip em {
  font-style: normal; font-size: 8.5px; line-height: 1;
  color: rgba(216, 205, 240, 0.45); font-variant-numeric: tabular-nums;
}
.evp-res-chip.is-full b { color: #ffd98a; }
.evp-res-chip.is-full em { color: rgba(255, 217, 138, 0.6); }
.evp-res-bar.mini { width: 100%; height: 3px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .evp-res-row:hover { transform: none; }
  .evp-res-bar i { transition: none; }
}