/* Dark Mage of Mossfen — fire mastery (v0.26): Leaping Flame, Dragon's Breath, Cremate,
   Burning Soul, Emberfall. Same world as the HUD: moss-black glass, brass edges. */

/* the Skill Tree is a little wider and has a fifth row: fourteen spells */
#skilltree { width: min(480px, calc(100% - 24px)); }

/* notes that float over a creature */
.dmg-note.note-fire { color: #ffb347; }

/* orange flash for a burst of fire; red for a soul catching light */
.screen-flash.fire-flash {
  background: radial-gradient(circle at 50% 58%, rgba(255, 244, 214, 0.9), rgba(255, 138, 40, 0.5) 45%, rgba(150, 30, 6, 0.26));
}
.screen-flash.soul-flash {
  background: radial-gradient(circle at 50% 60%, rgba(255, 226, 190, 0.85), rgba(255, 74, 30, 0.5) 42%, rgba(110, 10, 6, 0.3));
}

/* Emberfall: the top of the sky catches fire while the stones are called and fall */
.sky-burn {
  position: absolute; left: 0; right: 0; top: 0; height: 46%; opacity: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -18%, rgba(255, 214, 140, 0.78), rgba(255, 110, 30, 0.5) 34%, rgba(170, 30, 8, 0.22) 60%, rgba(120, 14, 4, 0) 82%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .sky-burn { display: none; } }

/* the Skill Tree's names stay on one line ("Dragon's Breath"), so a name never pushes into the
   gate tag of the spell below it */
.sk-name { white-space: nowrap; }

/* with room to spare, the Dark Mage's tree (five rows) stands beside the spell's details
   instead of above them, so nothing has to be scrolled */
@media (min-width: 1180px) and (min-height: 700px) {
  #app[data-class="darkMage"] #skilltree:not([hidden]) {
    width: 812px; display: grid; grid-template-columns: 468px minmax(0, 1fr); column-gap: 18px; align-content: start;
  }
  #app[data-class="darkMage"] #skilltree > header { grid-column: 1 / -1; }
  #app[data-class="darkMage"] #skilltree .sk-tree { grid-column: 1; grid-row: 2 / span 2; }
  #app[data-class="darkMage"] #skilltree .sk-detail { grid-column: 2; grid-row: 2; border-top: 0; padding-top: 4px; align-content: start; }
  #app[data-class="darkMage"] #skilltree .sk-hint { grid-column: 2; grid-row: 3; align-self: end; }
}