/* HERO ROLES -- DPS / TANK / HEAL (js/hero-roles.js). Decorative: the role
   picker, the party line-up, role badges beside names and the Shadow
   Broker's session switch. DPS red blade, TANK silver shield, HEAL green
   cross. Desktop first. */
.hero-role-dock {
  --hr: #9b5de0;
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 60;
  width: 296px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--hr) 45%, rgba(255, 255, 255, .08));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 14, 26, .96), rgba(8, 6, 11, .97));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 20px color-mix(in srgb, var(--hr) 18%, transparent);
  color: #ece4f4;
  font-family: var(--font-machine, monospace);
}
.hero-role-dock[hidden] { display: none !important; }
.hero-role-dock[data-role="dps"] { --hr: #ff2e43; }
.hero-role-dock[data-role="tank"] { --hr: #c9d2dc; }
.hero-role-dock[data-role="heal"] { --hr: #2fe06f; }
.hero-role-dock header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-role-dock header b { font-size: 12px; letter-spacing: .24em; }
.hero-role-dock header small { color: #8d8198; font-size: 9px; letter-spacing: .16em; }
.hero-role-dock header > i { width: 22px; height: 22px; color: var(--hr); display: inline-grid; }
.hero-role-dock svg { width: 100%; height: 100%; display: block; }
.role-dps { --hr: #ff2e43; }
.role-tank { --hr: #c9d2dc; }
.role-heal { --hr: #2fe06f; }

.hr-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hr-pick {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border: 1px solid color-mix(in srgb, var(--hr) 35%, rgba(255, 255, 255, .06));
  border-radius: 10px;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--hr) 16%, transparent), rgba(10, 8, 14, .9));
  color: #ece4f4;
  font: inherit;
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.hr-pick:hover { transform: translateY(-1px); border-color: var(--hr); }
.hr-pick.is-picked { border-color: var(--hr); box-shadow: 0 0 0 1px var(--hr), 0 0 18px color-mix(in srgb, var(--hr) 35%, transparent); }
.hr-pick > i { width: 26px; height: 26px; color: var(--hr); display: inline-grid; }
.hr-pick b { font-size: 12px; letter-spacing: .2em; }
.hr-pick small { color: var(--hr); font-size: 8.5px; letter-spacing: .12em; }

.hr-team { display: flex; gap: 6px; margin-top: 10px; }
.hr-team-role { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 0; border-radius: 8px; background: rgba(255, 255, 255, .03); color: #ddd2ea; font-size: 11px; font-weight: 800; }
.hr-team-role i { width: 13px; height: 13px; color: var(--hr); display: inline-grid; }
.hr-note { margin: 8px 0 0; color: #ffb3c0; font-size: 10px; letter-spacing: .1em; }

/* Role sigil beside a hero's name. */
.hero-role-sigil { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; color: var(--hr); font-style: normal; }
.hero-role-sigil svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hr) 55%, transparent)); }

/* Shadow Broker session switch. */
.battle-controls-utility-row .hero-roles-toggle { border-color: rgba(98, 240, 160, .45) !important; color: #c9f5dc !important; letter-spacing: .18em; }
.battle-controls-utility-row .hero-roles-toggle.is-off { border-color: rgba(255, 255, 255, .15) !important; color: #8d8198 !important; }


/* On the summon ritual screen: centred under the ritual, above its veil. */
.hero-role-dock.in-ritual { left: 50%; bottom: 28px; width: min(460px, 92vw); transform: translateX(-50%); z-index: 5; }

/* Battle live: a slim badge of your role and the party line-up. */
.hero-role-dock.is-live { width: auto; min-width: 210px; padding: 10px 12px; }
.hero-role-dock.is-live header { margin-bottom: 8px; }
.hero-role-dock.is-live .hr-team { margin-top: 0; }
.hr-pick > i, .hero-role-dock header > i { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hr) 55%, transparent)); }

/* LOCK IN prompt: the picker pulses until the hero has chosen a class. */
.hero-role-dock:not(.is-live) header { flex-wrap: wrap; row-gap: 3px; }
.hero-role-dock:not(.is-live) header small { flex-basis: 100%; }
.hero-role-dock.is-prompt { animation: hr-prompt 1.6s ease-in-out infinite; }
@keyframes hr-prompt { 50% { box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 34px rgba(196, 134, 239, .55); border-color: rgba(196, 134, 239, .8); } }

/* Shadow Broker: START GAME reads LOCK IN while a full ritual awaits priming. */
.timer-start-btn.is-lock-in { background: linear-gradient(180deg, #f0b432, #b9790f) !important; border-color: #ffd36a !important; color: #1a1005 !important; letter-spacing: .22em; box-shadow: 0 0 18px rgba(240, 180, 50, .45); }
@media (prefers-reduced-motion: reduce) { .hero-role-dock.is-prompt { animation: none; } }


/* LIVE PLAYER ROLE // keep it in the Battle Comms status rail, never over the board. */
.hero-role-dock.in-status {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 2;
  width: auto;
  min-width: 0;
  margin: 6px 8px 8px;
  padding: 6px 8px;
  border-radius: 7px;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.28);
}
.hero-role-dock.in-status.is-live {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-role-dock.in-status.is-live header {
  flex: 0 0 auto;
  margin: 0;
  gap: 5px;
}
.hero-role-dock.in-status.is-live header > i { width: 17px; height: 17px; }
.hero-role-dock.in-status.is-live header b { font-size: 10px; letter-spacing: .16em; }
.hero-role-dock.in-status.is-live header small { display: none; }
.hero-role-dock.in-status.is-live .hr-team {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  gap: 4px;
}
.hero-role-dock.in-status.is-live .hr-team-role {
  padding: 4px 3px;
  font-size: 9px;
}
.hero-role-dock.in-status.is-live .hr-team-role i { width: 11px; height: 11px; }