/* ════════════════════════════════════════
   INITIATIVE TRACKER
════════════════════════════════════════ */
#initiative-modal-overlay {
  position:fixed; inset:0; z-index:350; background:rgba(0,0,0,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
#initiative-modal-overlay.open { opacity:1; pointer-events:all; }
#initiative-modal {
  background:var(--color-bg-panel); border:1px solid var(--color-border-h); border-radius:10px;
  width:420px; max-width:95vw; max-height:80vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.init-modal-header {
  display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem .8rem;
  border-bottom:1px solid var(--color-border);
}
.init-modal-title { font-family:'Cinzel',serif; font-size:1rem; letter-spacing:.08em; color:var(--color-accent-primary); flex:1; }
.init-token-list { flex:1; overflow-y:auto; padding:.6rem; display:flex; flex-direction:column; gap:.4rem; }
.init-token-row {
  display:flex; align-items:center; gap:.75rem; padding:.55rem .8rem;
  background:var(--color-bg-elevated); border:1px solid var(--color-border); border-radius:6px;
  transition:border-color .2s, opacity .2s;
}
.init-token-row.excluded { opacity:.38; }
.init-token-avatar {
  width:32px; height:32px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  background:var(--color-bg-primary); border:1px solid var(--color-border);
}
.init-token-avatar img { width:100%; height:100%; object-fit:cover; }
.init-token-name { flex:1; font-size:.85rem; color:var(--color-text-primary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.init-value-input {
  width:58px; background:var(--color-bg-primary); border:1px solid var(--color-border);
  color:var(--color-text-primary); border-radius:5px; padding:.28rem .4rem;
  font-size:.85rem; text-align:center; transition:border-color .2s;
}
.init-value-input:focus { outline:none; border-color:var(--color-accent-primary); }
.init-value-input:disabled { visibility:hidden; }
.init-token-check { cursor:pointer; accent-color:var(--color-accent-primary); width:16px; height:16px; flex-shrink:0; }
.init-modal-footer {
  padding:.85rem 1.2rem; border-top:1px solid var(--color-border);
  display:flex; justify-content:flex-end; gap:.6rem;
}
/* Tracker HUD */
#initiative-tracker {
  position:fixed; top:48px; right:272px; z-index:90;
  background:var(--color-bg-panel); border:1px solid var(--color-border-h);
  border-radius:0 0 8px 8px; width:240px;
  box-shadow:0 4px 20px rgba(0,0,0,.5); display:none;
}
#initiative-tracker.visible { display:block; }
.init-hud-header {
  display:flex; align-items:center; gap:.4rem; padding:.45rem .65rem;
  background:var(--color-bg-elevated); border-bottom:1px solid var(--color-border);
}
.init-hud-title { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.1em; color:var(--color-accent-primary); flex:1; }
.init-hud-round { font-size:.68rem; color:var(--color-text-muted); font-family:'Cinzel',serif; white-space:nowrap; }
.init-hud-next {
  padding:.22rem .45rem; background:var(--color-accent-primary); color:#000;
  border:none; border-radius:4px; font-size:.68rem; font-family:'Cinzel',serif;
  cursor:pointer; font-weight:700; white-space:nowrap; transition:filter .15s;
}
.init-hud-next:hover { filter:brightness(1.12); }
.init-hud-end {
  padding:.22rem .38rem; background:transparent; color:var(--color-danger);
  border:1px solid var(--color-danger); border-radius:4px; font-size:.68rem; cursor:pointer; transition:background .15s;
}
.init-hud-end:hover { background:rgba(245,101,101,.12); }
.init-order-list { display:flex; flex-direction:column; max-height:260px; overflow-y:auto; }
.init-order-row {
  display:flex; align-items:center; gap:.55rem; padding:.4rem .65rem;
  border-bottom:1px solid var(--color-border); font-size:.78rem; transition:background .2s;
}
.init-order-row:last-child { border-bottom:none; }
.init-order-row.active-turn {
  background:rgba(90,169,255,.1); border-left:3px solid var(--color-accent-primary);
  padding-left:calc(.65rem - 2px);
}
.init-order-rank { width:16px; text-align:center; font-size:.68rem; color:var(--color-text-muted); font-family:'Cinzel',serif; flex-shrink:0; }
.init-order-avatar {
  width:22px; height:22px; border-radius:50%; overflow:hidden; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg-primary); border:1px solid var(--color-border); flex-shrink:0;
}
.init-order-avatar img { width:100%; height:100%; object-fit:cover; }
.init-order-name { flex:1; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.init-order-val { color:var(--color-accent-primary); font-family:'Cinzel',serif; font-size:.78rem; font-weight:700; flex-shrink:0; }
/* Active-turn glow on the canvas token */
.canvas-token.init-active .ring-circle { stroke:var(--color-accent-primary) !important; stroke-width:4 !important; }
.canvas-token.init-active { filter:drop-shadow(0 0 8px rgba(90,169,255,.7)) drop-shadow(0 0 18px rgba(90,169,255,.35)); animation:initGlow 1.4s ease-in-out infinite; }
@keyframes initGlow { 0%,100%{filter:drop-shadow(0 0 8px rgba(90,169,255,.7)) drop-shadow(0 0 18px rgba(90,169,255,.35))} 50%{filter:drop-shadow(0 0 14px rgba(90,169,255,1)) drop-shadow(0 0 28px rgba(90,169,255,.55))} }