/* GENERATED by make_widget_css.py from style.css on elementallegion.com — do not hand-edit. */
:root { --orange: #ff7a1a; --orange-soft: #ffa04d; --orange-deep: #e05f00; --el-panel: #1d1d21; --el-line: #2e2e34; }
/* the strip the widget mounts into: top-right, over the hero, the same nav classes the source site's widget looks for */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; }
.site-header .wrap { display: flex; justify-content: flex-end; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; }
.site-header .main-nav { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.site-header .main-nav a { text-decoration: none; }
.el-account {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 10px; padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,.14);
}
.el-account .el-acct-label { color: var(--orange); font-weight: 600; }
.el-account.in .el-acct-label { color: #cfcac2; font-weight: 500; max-width: 16ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none; letter-spacing: normal; font-size: 13.5px; }
.el-account:hover .el-acct-label { color: #fff; }
.el-account .el-acct-tag { color: #7d7973; font-size: 8.5px; font-weight: 600; letter-spacing: .04em;
  margin-left: -2px; align-self: center; text-transform: none; white-space: nowrap; opacity: .9; }
.el-account:hover .el-acct-tag { color: #a39e96; }
.el-acct-wrap { position: relative; flex: 0 0 26px; display: inline-flex; }
.el-acct-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
  background: #ff5f5f; border: 2px solid #121214; box-shadow: 0 0 6px rgba(255,95,95,.6); }
.el-account .el-acct-elm { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,.12); text-transform: none; letter-spacing: normal; white-space: nowrap; align-self: center; }
.el-account .el-acct-elm img { width: 16px; height: 16px; display: block; filter: drop-shadow(0 0 4px rgba(255,138,43,.45)); }
.el-account .el-acct-elm b { color: #ff8a2b; font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1; }
.el-acct-face {
  position: relative; width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--orange-deep), var(--orange));
  color: #1a1207; font-weight: 700; font-size: 13px; line-height: 1;
}
.el-acct-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.el-acct-icon {
  position: absolute; inset: 0; margin: auto; width: 72%; height: 72%;
  object-fit: contain;
}
.el-gift { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px;
  margin-left: 6px; text-decoration: none; font-size: 22px; line-height: 1; cursor: pointer;
  filter: drop-shadow(0 0 6px rgba(255,200,80,.65)); animation: elGiftBob 2.4s ease-in-out infinite; }
.el-gift:hover { animation: elGiftShake .55s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,210,90,.95)); }
.el-gift .el-gift-box { display: inline-block; }
.el-gift i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 6px #ffd257;
  opacity: 0; pointer-events: none; animation: elGlitter 2.2s ease-in-out infinite; }
.el-gift i.g1 { top: 2px; left: 3px; }
.el-gift i.g3 { bottom: 3px; left: 7px; animation-delay: 1.1s; }
.el-gift .el-gift-n { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: #ff5f5f;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px; }
@keyframes elGiftBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes elGiftShake { 0%,100% { transform: rotate(0) scale(1.05); } 20% { transform: rotate(-14deg) scale(1.15); } 40% { transform: rotate(12deg) scale(1.15); } 60% { transform: rotate(-9deg) scale(1.1); } 80% { transform: rotate(9deg) scale(1.1); } }
@keyframes elGlitter { 0%,100% { opacity: 0; transform: translate(0,0) scale(.4); } 30% { opacity: 1; transform: translate(-3px,-7px) scale(1); } 60% { opacity: .6; transform: translate(4px,-12px) scale(.7); } }
.el-giftcard-wrap { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: elFade .25s ease; }
.el-giftcard { position: relative; width: min(540px, 100%); background: linear-gradient(160deg, #26262c, #141416); border: 1px solid rgba(255,200,80,.5);
  border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 44px rgba(255,190,60,.2); color: #ececef; overflow: hidden; }
.el-giftcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 90% -20%, rgba(255,190,60,.2), transparent 60%); pointer-events: none; }
.el-giftcard h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .9px; color: #a2a2ab; }
.el-giftcard .from { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; margin-bottom: 18px; }
.el-giftcard .from .el-acct-face { width: 42px; height: 42px; flex: 0 0 42px; font-size: 19px; }
.el-giftcard .from .el-acct-tag { font-size: 13px; color: #7d7973; font-weight: 600; }
.el-giftcard .prod { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; background: rgba(0,0,0,.28); margin-bottom: 16px; }
.el-giftcard .prod b { display: block; font-size: 18px; margin-bottom: 3px; }
.el-giftcard .prod span { color: #a2a2ab; font-size: 13.5px; line-height: 1.5; }
.el-giftcard .ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 6px; }
.el-giftcard .ask button { background: #1d1d21; border: 1px solid #3a3a42; color: #ececef; border-radius: 999px; padding: 6px 16px; cursor: pointer; font: inherit; font-size: 13px; }
.el-giftcard .ask button.on { border-color: #4fd18a; background: rgba(79,209,138,.18); }
.el-giftcard .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 12px; }
.el-giftcard .note { color: #a2a2ab; font-size: 12px; line-height: 1.5; max-width: 58%; }
.el-giftcard .accept { background: linear-gradient(180deg, #34d27c, #1f9f58); color: #04170c; border: 0; border-radius: 14px; padding: 16px 34px;
  font-size: 19px; font-weight: 800; letter-spacing: 1.5px; cursor: pointer; font-family: inherit; animation: elAcceptPulse 1.5s ease-in-out infinite; }
.el-giftcard .accept:hover { filter: brightness(1.08); transform: translateY(-1px); }
.el-giftcard .accept[disabled] { opacity: .6; animation: none; cursor: default; transform: none; }
.el-giftcard .x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: #a2a2ab; font-size: 18px; cursor: pointer; }
.el-giftcard .x:hover { color: #fff; }
.el-giftcard .err { color: #ff8b6b; font-size: 13px; min-height: 16px; }
@keyframes elAcceptPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,210,124,.6); } 50% { box-shadow: 0 0 0 12px rgba(52,210,124,0); } }
@keyframes elFade { from { opacity: 0; } to { opacity: 1; } }
.el-giftcard.dust { animation: elDust 1.1s ease-in forwards; }
@keyframes elDust { 0% { opacity: 1; filter: blur(0); transform: scale(1); } 55% { opacity: .55; filter: blur(3px); transform: scale(1.04) translateY(-6px); } 100% { opacity: 0; filter: blur(16px); transform: scale(1.14) translateY(-34px); } }
.el-giftcard .mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 6px #ffd257; pointer-events: none; animation: elMote 1.1s ease-out forwards; }
@keyframes elMote { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.el-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1d1d21; border: 1px solid #4fd18a; color: #ececef;
  padding: 12px 18px; border-radius: 12px; z-index: 9999; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: elFade .3s ease; }
.el-toast a { color: #4fd18a; font-weight: 700; }
.el-staff { display: inline-block; width: 18px; height: 18px; border-radius: 5px; vertical-align: -4px; margin-left: 5px;
  background: url("https://elementallegion.com/assets/img/badges/staff.png") center / contain no-repeat;   /* the 256px file: the 64px URL got a 404 edge-cached on 09-18 */ cursor: help; flex: none; }
.el-staff.lg { width: 24px; height: 24px; border-radius: 6px; vertical-align: -6px; }
.el-staff.sm { width: 14px; height: 14px; border-radius: 4px; vertical-align: -3px; margin-left: 4px; }
.el-account .el-staff { margin-left: 2px; vertical-align: middle; align-self: center; }
/* this site's own pill for the widget - AFTER the copied rules so it wins their margins and borders */
.site-header .el-account { font-family: var(--body); font-size: 13.5px; text-transform: none; letter-spacing: normal; color: var(--stone-hi);
  margin: 0; padding: 6px 14px 6px 8px; background: rgba(6, 18, 36, .55); border: 1px solid rgba(243, 239, 228, .18);
  border-radius: 999px; backdrop-filter: blur(6px); }
.site-header .el-account:hover { border-color: rgba(233, 189, 124, .6); }