/* WoW-style unit frames and cast bars (Frostcall Arena HUD). Sizes follow --uo (orb px); phones shrink it. */
.uf-row { --uo: 74px; --uw: 214px; }
@media (max-width: 900px) { .uf-row { --uo: 52px; --uw: 150px; } }
@media (max-width: 560px) { .uf-row { --uo: 44px; --uw: 122px; }
  .uf-row .uf-num { font-size: 9px; }
  .uf-row .uf-bar + .uf-bar .uf-num { font-size: 8px; }
  .uf-row .uf-name { font-size: 11px; } }
@media (max-height: 460px) and (min-width: 561px) { .uf-row { --uo: 46px; --uw: 150px; } }

.uf { position: relative; width: calc(var(--uo) + var(--uw) - 10px); color: #fff; }
.uf-main { display: flex; align-items: center; }
.uf.mirror .uf-main { flex-direction: row-reverse; }

/* portrait orb */
.uf-orb { position: relative; flex: none; width: var(--uo); height: var(--uo); z-index: 2; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.7)); }
.uf-face { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 30%, #2a3a52, #0b1118); box-shadow: inset 0 0 8px #000; }
.uf-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uf-ph { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--cc) 40%, #0b1118), #0b1118 70%); }
.uf-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.uf-orb.elite { filter: drop-shadow(0 0 5px rgb(242 193 78 / 0.55)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.7)); }
.uf-orb.dead .uf-face { filter: grayscale(1) brightness(0.55); }
.uf-lvl {
  position: absolute; right: -2px; bottom: -3px; min-width: 20px; height: 20px; padding: 0 4px; display: grid; place-items: center;
  font: 800 11px/1 var(--font-sans), system-ui, sans-serif; color: #ffe9a8; text-shadow: 0 1px 1px #000;
  background: radial-gradient(circle at 35% 30%, #4a4f63, #14182a 75%); border: 2px solid #c89a3a; border-radius: 12px;
  box-shadow: 0 1px 3px #000, inset 0 0 3px rgb(255 255 255 / 0.25);
}
.uf-lvl svg { width: 12px; height: 12px; color: #f2c14e; }
.uf-orb.mirror .uf-lvl { right: auto; left: -2px; }

/* name plate: dark glass in a gold-edged bevel, joined to the orb */
.uf-plate {
  position: relative; flex: 1; min-width: 0; margin-left: -12px; padding: 4px 8px 5px 18px; display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg, rgb(30 36 56 / 0.94), rgb(10 13 24 / 0.94));
  border: 1.5px solid #b98a2e; border-left-width: 0; border-radius: 0 9px 9px 0;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 232 150 / 0.35), inset 0 -1px 0 rgb(0 0 0 / 0.6);
}
.uf.mirror .uf-plate { margin-left: 0; margin-right: -12px; padding: 4px 18px 5px 8px; border-left-width: 1.5px; border-right-width: 0; border-radius: 9px 0 0 9px; }
.uf.hostile .uf-plate { border-color: #a43a3a; }
.uf.elite .uf-plate { border-color: #f2c14e; box-shadow: 0 2px 6px rgb(0 0 0 / 0.6), 0 0 8px rgb(242 193 78 / 0.35), inset 0 1px 0 rgb(255 232 150 / 0.5); }
.uf-name { display: flex; align-items: center; gap: 4px; min-width: 0; font: 700 13px/1.1 var(--font-serif), Georgia, serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; letter-spacing: 0.01em; }
.uf.mirror .uf-name { flex-direction: row-reverse; justify-content: flex-start; }
.uf-state { flex: none; width: 13px; height: 13px; color: #ff6b6b; filter: drop-shadow(0 0 3px rgb(255 80 80 / 0.7)); }
.uf-state.rest { width: auto; font: 800 10px/1 var(--font-sans), sans-serif; color: #9fd8ff; filter: none; }
.uf-state.combat { animation: uf-pulse 0.9s ease-in-out infinite alternate; }
@keyframes uf-pulse { from { opacity: 0.55; } to { opacity: 1; } }

/* bars */
.uf-bar { position: relative; height: 17px; border-radius: 3px; overflow: hidden; background: #05070d; border: 1px solid #000; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 2px 4px rgb(0 0 0 / 0.8); }
.uf-bar + .uf-bar { height: 13px; }
.uf-bar > i, .uf-bar > b, .uf-bar > u { position: absolute; top: 0; bottom: 0; left: 0; display: block; }
.uf-bar > i { z-index: 1; transition: width 110ms linear; }
.uf-bar > b { background: #f4f1e6; opacity: 0.8; transition: width 650ms ease-out 260ms; }
.uf-bar > u { z-index: 1; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.85) 0 3px, rgb(190 235 255 / 0.7) 3px 6px); opacity: 0.8; }
.uf-bar > i::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 6px); mix-blend-mode: overlay; }
.uf-bar > i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.04)); }
.uf-hp > i { background: linear-gradient(180deg, #7bf26f, #1fae33 55%, #0d6a1d); }
.uf-mana > i { background: linear-gradient(180deg, #7fb0ff, #1f6fe5 55%, #0f3e9c); }
.uf-rage > i { background: linear-gradient(180deg, #ff7c7c, #d3202a 55%, #7c0d14); }
.uf-energy > i { background: linear-gradient(180deg, #fff59a, #f2d20a 55%, #a88a00); }
.uf-none { visibility: hidden; }
.uf-num { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font: 800 11px/1 var(--font-sans), system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.uf-bar + .uf-bar .uf-num { font-size: 10px; }
.uf-num > span { grid-area: 1 / 1; }
.n-pct { opacity: 0; }
@media (hover: hover) { .uf:hover .n-abs { opacity: 0; } .uf:hover .n-pct { opacity: 1; } }

/* dead: the whole plate greys */
.uf.dead .uf-plate { filter: grayscale(1) brightness(0.7); }

/* buffs and debuffs */
.uf-buffs { display: flex; flex-wrap: wrap; gap: 3px; min-height: 30px; padding: 4px 0 0 calc(var(--uo) - 4px); }
.uf-buffs.mirror { padding: 4px calc(var(--uo) - 4px) 0 0; justify-content: flex-end; }
.uf-buffs.empty { min-height: 0; padding: 0; }
.uf-aura {
  position: relative; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #243148, #0a0f20); border: 2px solid #3fbf5a; color: #bfe9ff; box-shadow: 0 1px 3px #000;
}
.uf-aura.bad { border-color: #d9363e; color: #ffb0b8; }
.uf-aura > svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.uf-sweep { position: absolute; inset: 0; z-index: 2; background: conic-gradient(rgb(4 6 14 / 0.72) calc(var(--p, 0) * 360deg), transparent 0); pointer-events: none; }
.uf-aura small { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; text-align: center; font: 800 9px/1 var(--font-sans), sans-serif; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.uf-stack { position: absolute; top: 0; right: 2px; z-index: 3; font: 800 10px/1 var(--font-sans), sans-serif; color: #ffe08a; text-shadow: 0 1px 2px #000; }

/* big cast bars */
.cb { display: flex; align-items: center; gap: 6px; width: 100%; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.6)); }
.cb-player { width: min(360px, 92vw); height: 26px; }
.cb-target { width: 100%; height: 22px; }
.cb-icon {
  position: relative; flex: none; width: 1.3em; height: 1.3em; font-size: 26px; display: grid; place-items: center; overflow: hidden;
  background: #0a0f20; border: 2px solid #c89a3a; border-radius: 4px; color: #ffd47a;
}
.cb-player .cb-icon { width: 34px; height: 34px; margin-top: -4px; }
.cb-target .cb-icon { width: 26px; height: 26px; }
.cb-icon svg { width: 100%; height: 100%; }
.cb-target .cb-icon svg { width: 70%; height: 70%; }
.cb-lock { position: absolute; right: 0; bottom: 0; width: 12px !important; height: 12px !important; color: #fff; background: #4b5163; border-radius: 3px; padding: 1px; }
.cb-track {
  position: relative; flex: 1; height: 100%; overflow: hidden; border-radius: 4px; background: linear-gradient(180deg, #0a0d18, #151a2c);
  border: 2px solid #c89a3a; box-shadow: inset 0 2px 5px #000, 0 0 0 1px #000;
}
.cb-track > i { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(180deg, #ffe48a, #f0b429 50%, #b87812); transition: width 90ms linear; }
.cb-track > i::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.02)); }
.cb-track > em { position: absolute; top: -30%; bottom: -30%; width: 14px; margin-left: -7px; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, #fff 0 18%, rgb(255 244 190 / 0.85) 30%, transparent 70%); transition: left 90ms linear; }
.cb-frost .cb-track > i { background: linear-gradient(180deg, #d9f7ff, #5fe0ff 50%, #1b86b4); }
.cb-arcane .cb-track > i { background: linear-gradient(180deg, #f1d7ff, #b87bff 50%, #6b3bb0); }
.cb-fire .cb-track > i { background: linear-gradient(180deg, #ffd08a, #ff8a2a 50%, #b3430c); }
.cb-shadow .cb-track > i { background: linear-gradient(180deg, #d9b8ff, #8e4fe0 50%, #4a1f8e); }
.cb-holy .cb-track > i { background: linear-gradient(180deg, #fffbd0, #ffe36b 50%, #c79a1a); }
.cb-physical .cb-track > i { background: linear-gradient(180deg, #ffd6a6, #e0a15a 50%, #8f5a22); }
.cb.chan .cb-track > i { filter: saturate(1.2) brightness(1.08); }
.cb-name, .cb-time { position: absolute; top: 0; bottom: 0; z-index: 3; display: flex; align-items: center; font: 800 13px/1 var(--font-sans), system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.cb-name { left: 8px; right: 54px; overflow: hidden; text-overflow: ellipsis; }
.cb-time { right: 8px; font-variant-numeric: tabular-nums; }
.cb-target .cb-name, .cb-target .cb-time { font-size: 12px; }
.cb.locked .cb-track { border-color: #7b8196; }
.cb.locked .cb-track > i { background: linear-gradient(180deg, #c3c8d6, #858ba0 50%, #4f566b); }
.cb.locked .cb-icon { border-color: #7b8196; color: #c3c8d6; }
.cb-track > i.push { animation: cb-push 220ms ease-out; }
@keyframes cb-push { from { filter: brightness(2.4); } to { filter: brightness(1); } }
.cb.ok .cb-track { animation: cb-ok 380ms ease-out forwards; }
@keyframes cb-ok { 0% { box-shadow: inset 0 2px 5px #000, 0 0 0 1px #000, 0 0 0 0 rgb(80 255 120 / 0.9); border-color: #7dff9a; } 100% { opacity: 0; box-shadow: inset 0 2px 5px #000, 0 0 0 1px #000, 0 0 16px 6px rgb(80 255 120 / 0); border-color: #7dff9a; } }
.cb.ok .cb-track > i { background: linear-gradient(180deg, #b8ffc8, #3fd45f 50%, #1a8a35); }
.cb.fail { animation: cb-shake 360ms ease-in-out, cb-away 1100ms ease-in forwards; }
.cb.fail .cb-track { border-color: #ff4a4a; }
.cb.fail .cb-track > i { background: linear-gradient(180deg, #ff9a9a, #e02b2b 50%, #7c1010); }
.cb.fail .cb-name { left: 0; right: 0; justify-content: center; color: #ffd0d0; }
@keyframes cb-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(3px); } }
@keyframes cb-away { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 560px), (max-height: 460px) {
  .cb-player { width: min(300px, 70vw); height: 22px; }
  .cb-player .cb-icon { width: 28px; height: 28px; }
  .cb-name, .cb-time { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .cb.fail, .cb.ok .cb-track, .uf-state.combat { animation: none; } }
.uf-tcast { width: calc(var(--uo) + var(--uw) - 10px); }
.uf-tcast .cast-hint { margin-top: 3px; padding: 2px 5px; font-size: 11px; line-height: 1.25; background: rgb(8 10 20 / 0.7); border-radius: 4px; }
