/* The guild fire: one canvas band at the foot of the guild chat card. hearth.js draws the fire, writes data-fire and data-mood on the band and sets --fire-glow (0 to 1) on #guild-chat; these rules place the band, light the card and colour the event lines. */
/* Class colours as in game; the shaman blue is lifted a little so small names stay readable on the dark card. */
/* The card is lit by one more shadow layer whose strength is --fire-glow. Nothing here sets a height or clips the card, the list or a line. */
.guild-chat-shell { --class-warrior: #c69b6d; --class-paladin: #f48cba; --class-hunter: #aad372; --class-rogue: #fff468; --class-priest: #ffffff; --class-shaman: #2e86ea; --class-mage: #3fc7eb; --class-warlock: #8788ee; --class-druid: #ff7c0a; --fire-tint: 255 128 24; box-shadow: inset 0 1px 0 #b1a782, inset 1px 0 0 #526047, inset 0 -1px 0 #293221, 0 0 0 1px #080b08, 0 0 0 3px rgba(132,128,96,.1), 0 24px 50px -30px #000, 0 14px 70px -18px rgb(var(--fire-tint) / calc(var(--fire-glow, 0) * .55)); transition: box-shadow .25s linear; }
/* A mourning fire casts a cold light (browsers without :has keep the warm one). */
.guild-chat-shell:has(.guild-fire[data-mood="mourning"]) { --fire-tint: 132 124 255; }
/* The band is 7rem of card; the canvas stands 11rem tall from the band's foot, so a tall flare rises behind the last lines. */
.guild-fire { position: relative; z-index: 0; height: 7rem; margin: 0; pointer-events: none; background: radial-gradient(ellipse 58% 135% at 50% 100%, rgb(var(--fire-tint) / calc(var(--fire-glow, 0) * .2)), transparent 72%); }
.guild-fire canvas { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 11rem; }
/* Event lines share the chat list: gold for a level, pale blue for a death, orange for a guild DING, each with a small drawn mark. */
.guild-message.guild-event { color: #ffd96b; }
.guild-message.guild-event::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; vertical-align: .06em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.guild-message.guild-event[data-kind="death"] { color: #b9c7e6; }
.guild-message.guild-event[data-kind="death"]::before { border-radius: 50%; background: none; box-shadow: inset 0 0 0 .11em currentColor; clip-path: none; }
.guild-message.guild-event[data-kind="ding"] { color: #ffb454; font-weight: 700; }
.guild-message.guild-event[data-kind="ding"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.guild-message.guild-event .guild-message-author { color: inherit; }
.guild-message.guild-event[data-class="warrior"] .guild-message-author { color: var(--class-warrior); }
.guild-message.guild-event[data-class="paladin"] .guild-message-author { color: var(--class-paladin); }
.guild-message.guild-event[data-class="hunter"] .guild-message-author { color: var(--class-hunter); }
.guild-message.guild-event[data-class="rogue"] .guild-message-author { color: var(--class-rogue); }
.guild-message.guild-event[data-class="priest"] .guild-message-author { color: var(--class-priest); }
.guild-message.guild-event[data-class="shaman"] .guild-message-author { color: var(--class-shaman); }
.guild-message.guild-event[data-class="mage"] .guild-message-author { color: var(--class-mage); }
.guild-message.guild-event[data-class="warlock"] .guild-message-author { color: var(--class-warlock); }
.guild-message.guild-event[data-class="druid"] .guild-message-author { color: var(--class-druid); }
/* The relay cue and its one link, in the card footer. */
.guild-chat-relay { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .7rem; }
.guild-relay-link { color: #e7ce90; font-size: .76rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.guild-relay-link:hover { color: #ffd96b; }
.guild-relay-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .guild-chat-shell { transition: none; } }
@media (max-width: 43rem) {
  .guild-fire { height: 6rem; }
  .guild-fire canvas { height: 10rem; }
  .guild-relay-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* How the guild fire works: one collapsed line under the invitation. */
.guild-how { max-width: 43ch; margin: 1.1rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.guild-how-toggle { display: inline-flex; align-items: center; min-height: 44px; color: #e7ce90; font-weight: 700; cursor: pointer; }
.guild-how-toggle:hover { color: #ffd96b; }
.guild-how-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.guild-how-steps { margin: .35rem 0 .6rem; padding-left: 1.25rem; }
.guild-how-steps li { margin-bottom: .45rem; }
.guild-how-steps strong { color: var(--text); }
.guild-how code { color: #ffd96b; font-size: .92em; overflow-wrap: anywhere; }
.guild-how-note { margin: 0; color: var(--subtle); font-size: .82rem; }
.guild-relay-note { display: block; color: var(--subtle); font-size: .78rem; }