/*
  WoW-style HUD layer. Loaded last; overrides look and default placement only.
  Positions you set in the HUD editor are inline styles and still win.
*/
:root {
  --wow-gold: #f0c860;
  --wow-gold-dim: #8a6a2a;
  --wow-stone: #26221e;
  --wow-num: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

/* ---------- Unit frames ---------- */
.unit-frame .bar.hp > i {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, #4ce04c, #12a012 50%, #086608);
}
.unit-frame .bar.power.mana > i {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, #4a78ff, #1438e0 50%, #081a90);
}
.unit-frame .bar.power.rage > i {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, #ff4a3a, #d01010 50%, #7a0606);
}
.unit-frame .bar.power.energy > i {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 40%, rgba(0,0,0,0.2) 100%),
    linear-gradient(180deg, #fff060, #e8c810 50%, #9a8008);
}
.unit-frame .bar > span {
  left: 0; right: 0; text-align: center;
  font: 700 11px var(--wow-num);
  color: #ffffff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  letter-spacing: 0.02em;
}
.unit-frame .name {
  padding: 1px 6px;
  margin: -2px -4px 1px;
  border-radius: 2px;
  color: #fff4d0;
  font-size: 14px;
}
/* Reaction color behind the name, as on WoW's target frame. */
.unit-frame.hostile .name { background: linear-gradient(90deg, rgba(190, 24, 20, 0.9), rgba(120, 10, 8, 0.25)); }
.unit-frame.friendly .name { background: linear-gradient(90deg, rgba(20, 90, 200, 0.85), rgba(8, 40, 110, 0.25)); }
.unit-frame.self .name { background: none; }
#target-frame.unit-frame.target {
  left: 300px; transform: none;
  flex-direction: row-reverse;
}
#target-frame.hostile .name { background: linear-gradient(270deg, rgba(190, 24, 20, 0.9), rgba(120, 10, 8, 0.25)); text-align: right; }
#target-frame.friendly .name { background: linear-gradient(270deg, rgba(20, 90, 200, 0.85), rgba(8, 40, 110, 0.25)); text-align: right; }
#target-frame .uf-class { text-align: right; }
#target-auras.aura-row.target-auras { left: 300px; transform: none; top: 106px; }
#target-cast-bar { left: 300px; transform: none; top: 146px; }

/* Arena opponents stack down the right edge, like WoW's arena frames. */
#enemy-frames { top: 13%; right: 16px; }
#player-auras.aura-row { top: 16px; left: auto; right: 16px; flex-direction: row-reverse; }

/* ---------- Auras ---------- */
.aura { width: 30px; height: 30px; border-radius: 2px; margin-bottom: 12px; }
.aura.has-icon { background-size: cover; background-position: center; }
.aura.has-icon .al { display: none; }
.aura .ad {
  bottom: -14px; right: 0; left: 0; text-align: center;
  font: 700 10px var(--wow-num);
  color: #ffd84a;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

/* ---------- Action bar ---------- */
#action-bar {
  flex-wrap: nowrap;
  gap: 5px;
  padding: 9px 58px 9px;
  border: none;
  border-radius: 6px 6px 3px 3px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 230, 170, 0.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #3a332c 0%, #221d19 42%, #15120f 100%);
  box-shadow:
    0 0 0 1px #0a0806,
    0 0 0 2px var(--wow-gold-dim),
    0 0 0 3px #0a0806,
    inset 0 1px 0 rgba(255, 220, 150, 0.25),
    inset 0 -2px 6px rgba(0, 0, 0, 0.6),
    0 12px 24px rgba(0, 0, 0, 0.55);
}
/* Crest end caps stand in for WoW's gryphons. */
#action-bar::before,
#action-bar::after {
  content: "";
  position: absolute; bottom: -4px;
  width: 64px; height: 64px;
  background: url("../textures/ui/crest.jpg") center/cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0a0806, 0 0 0 4px var(--wow-gold-dim), 0 0 0 5px #0a0806, 0 6px 12px rgba(0,0,0,0.6);
  pointer-events: none;
}
#action-bar::before { left: -40px; }
#action-bar::after { right: -40px; transform: scaleX(-1); }
#action-bar .bar-break { display: none; }
.slot {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px #0a0806,
    0 0 0 2px #6a5a40,
    inset 0 2px 4px rgba(0,0,0,0.65);
}
.slot .icon { inset: 2px; border-radius: 2px; }
.slot .key {
  left: auto; right: 4px; top: 2px;
  font: 700 11px var(--wow-num);
  color: #e8e8e8;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.slot .cd-num { font: 700 18px var(--wow-num); color: #ffe068; }
.slot.passive { width: 36px; height: 36px; flex: 0 0 36px; align-self: center; opacity: 0.85; }
/* Out of range: WoW tints the icon red. Not enough resource: blue. */
.slot.oor .icon img.spell-art,
.slot.oor .icon { filter: grayscale(1) sepia(1) saturate(9) hue-rotate(-38deg) brightness(0.62); }
.slot.oom .icon img.spell-art,
.slot.oom .icon { filter: grayscale(0.85) sepia(1) hue-rotate(175deg) saturate(3.2) brightness(0.55); }
.slot.passive .icon, .slot.passive .icon img.spell-art { filter: none; }
.slot.cd .icon { filter: brightness(0.5); }

/* ---------- Cast bars ---------- */
#gcd-bar { display: none !important; }
#cast-bar {
  bottom: 96px; width: 300px; gap: 6px; padding: 4px 6px;
  border: 1px solid #0a0806; border-radius: 3px;
  background: rgba(10, 8, 6, 0.85);
  box-shadow: 0 0 0 2px var(--wow-gold-dim), 0 0 0 3px #0a0806, 0 8px 18px rgba(0,0,0,0.5);
}
#cast-bar .cast-icon, #target-cast-bar .cast-icon { width: 26px; height: 26px; border-radius: 2px; }
#cast-bar .cast-name, #target-cast-bar .cast-name {
  position: absolute; left: 0; right: 0; top: 0; line-height: 18px; text-align: center; margin: 0;
  font: 600 12px var(--wow-num); color: #fff; letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  z-index: 2; pointer-events: none;
}
#cast-bar .cast-body, #target-cast-bar .cast-body { position: relative; align-self: center; }
#cast-bar .cast-track, #target-cast-bar .cast-track { height: 18px; border-color: #000; }
#cast-bar .cast-track > i {
  position: relative;
  background: linear-gradient(180deg, #ffe680, #f0b010 55%, #b07006);
}
#cast-bar.channel .cast-track > i { background: linear-gradient(180deg, #8af078, #30b828 55%, #18700e); }
/* The bright spark riding the leading edge of the fill. */
#cast-bar .cast-track > i::after,
#target-cast-bar .cast-track > i::after {
  content: ""; position: absolute; right: -6px; top: -4px; bottom: -4px; width: 12px;
  background: radial-gradient(ellipse at center, rgba(255,255,230,0.95), rgba(255,220,120,0.35) 45%, transparent 70%);
  filter: blur(0.5px);
}
#cast-bar .cast-time, #target-cast-bar .cast-time { font: 700 12px var(--wow-num); color: #fff; width: 30px; }
#cast-bar.interrupted .cast-track > i { width: 100% !important; background: linear-gradient(180deg, #ff6a5a, #d01818 55%, #700808); }
#cast-bar.interrupted .cast-track > i::after { display: none; }
#cast-bar.succeeded .cast-track > i { width: 100% !important; background: linear-gradient(180deg, #fff8c0, #ffe060 55%, #c09018); }
#target-cast-bar {
  width: 268px; padding: 4px 6px; border-radius: 3px;
  background: rgba(10, 8, 6, 0.85);
}

/* ---------- Error text and floating combat text ---------- */
#ui-error {
  top: 17%;
  color: #ff2a1e;
  font: 700 19px var(--ui-label, Georgia), Georgia, serif;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 0 10px rgba(0,0,0,0.9);
}
#ui-error.pop { animation: wowerr 1.6s ease-out; }
@keyframes wowerr {
  0% { opacity: 0; }
  8% { opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; }
}
.fct {
  font-family: "Arial Black", "Arial Narrow", Arial, sans-serif;
  font-weight: 900;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.fct.dmg { color: #ffffff; }
/* WoW's "Immune" / "Resist" words: smaller, pale gold, no number. */
.fct.word { color: #fff1b8; font-size: 18px; letter-spacing: 0.02em; }
.fct.word.distract { color: #ffe27a; font-size: 26px; font-weight: 700; }
.fct.crit { color: #ffe23a; font-size: 30px; animation: fctcrit 1.15s ease-out forwards; }
@keyframes fctcrit {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  10% { opacity: 1; transform: translate(-50%, -55%) scale(1.15); }
  20% { transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -125%) scale(1); }
}

/* ---------- Nameplates ---------- */
.nameplate { min-width: 120px; }
.nameplate .np-name {
  font: 700 13px var(--wow-num);
  color: #ff5a4a;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 0 0 6px rgba(0,0,0,0.8);
}
.nameplate.ally .np-name { color: #6ad4ff; }
.nameplate .np-bar {
  height: 9px; border: 1px solid #000; border-radius: 1px;
  background: rgba(20, 0, 0, 0.75);
  box-shadow: 0 0 0 1px #5a5a5a, 0 2px 3px rgba(0,0,0,0.8);
}
.nameplate .np-bar > i { background: linear-gradient(180deg, #ff3a2a, #c00a0a); }
.nameplate.ally .np-bar > i { background: linear-gradient(180deg, #3ae03a, #0a9a0a); }
.nameplate.sel .np-name { color: #ffffff; font-size: 14px; }
.nameplate.sel .np-bar { box-shadow: 0 0 0 1px #fff, 0 0 8px rgba(255,255,255,0.6); }
.np-cast { height: 7px; border: 1px solid #000; border-radius: 1px; box-shadow: 0 0 0 1px #5a5a5a; }
.np-cast > i { background: linear-gradient(180deg, #ffe060, #e0a010); }

/* ---------- Combat log as a chat frame; meter bottom right ---------- */
#combat-log {
  left: 16px; right: auto; bottom: 16px;
  width: 400px; height: 170px;
  text-align: left;
  padding: 6px 8px;
  font: 600 12px/1.35 var(--wow-num);
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.42));
  border-radius: 3px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#combat-log .cl-dmg { color: #ffffff; }
#combat-log .cl-heal { color: #4cff4c; }
#combat-log .cl-cc { color: #ff9a2a; }
#combat-log .cl-kill { color: #ff4a3a; }
#combat-log .cl-cast { color: #ffd84a; }
#combat-log .cl-int { color: #8ab4ff; }
#combat-log .cl-spell { color: #ffd84a; }
#combat-meter { left: auto; right: 16px; bottom: 16px; width: 360px; height: 300px; }

/* Loading screen: painted art, crest, tip and a gold bar, like WoW's. */
#load-curtain { position: fixed; inset: 0; z-index: 9000; background: #0a0705; opacity: 1; transition: opacity 0.35s ease; pointer-events: auto; }
#load-curtain.hidden { display: none; }
#load-curtain.lc-out { opacity: 0; pointer-events: none; }
#load-curtain .lc-art { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 5, 3, 0.15), rgba(8, 5, 3, 0.75)), url("../textures/ui/login_courtyard.jpg") center / cover no-repeat; }
#load-curtain .lc-crest { position: absolute; left: 50%; top: 18%; width: 180px; height: 180px; transform: translateX(-50%); background: url("../textures/ui/crest.jpg") center / contain no-repeat; border-radius: 50%; box-shadow: 0 0 60px rgba(255, 170, 60, 0.35); }
#load-curtain .lc-foot { position: absolute; left: 50%; bottom: 7%; width: min(820px, 80vw); transform: translateX(-50%); text-align: center; }
#load-curtain .lc-tip { color: #f0dcb0; font: italic 600 18px/1.4 var(--ui-body, Georgia, serif); text-shadow: 0 2px 4px #000; margin-bottom: 14px; }
#load-curtain .lc-bar { height: 14px; border: 2px solid #8a6a2a; border-radius: 3px; background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 1px #000, inset 0 0 6px #000; overflow: hidden; }
#load-curtain .lc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #ffe08a, #c88a1a 60%, #8a5a10); transition: width 0.25s ease; }
#load-curtain .lc-label { margin-top: 8px; color: #c8a868; font: 600 13px var(--ui-display, Georgia, serif); letter-spacing: 0.2em; text-transform: uppercase; }

/* Tutorial: a compact WoW-style help panel at the left, clear of targets and error text. */
#tutorial-overlay { left: 16px; top: 212px; transform: none; width: min(410px, 42vw); }
#tutorial-card { padding: 0 14px 12px; }
#tutorial-card h2 { font-size: 20px; margin: 6px 0 4px; }
#tutorial-card #tutorial-body { font-size: 14px; line-height: 1.4; }
#tutorial-step { gap: 3px; }
#tutorial-step .tut-page { width: 20px; height: 20px; min-width: 20px; font-size: 10px; line-height: 18px; padding: 0; }
@media (max-width: 900px) { #tutorial-overlay { left: 50%; transform: translateX(-50%); width: min(560px, 94vw); top: 108px; } }

/* Ascent racers carry a name only: health means nothing in a race, and the
   bars sat over the middle of the view. */
#screen-match.jump-quest .nameplate { min-width: 0; padding: 2px 6px; pointer-events: none; }
#screen-match.jump-quest .nameplate::before { display: none; }
#screen-match.jump-quest .nameplate .np-bar,
#screen-match.jump-quest .nameplate .np-cast { display: none; }
#screen-match.jump-quest .nameplate .np-name { font-size: 12px; opacity: 0.8; }

/* Ascent: the event banner. */
#ascent-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 30; transition: opacity 0.6s ease; }
#ascent-banner.hidden { display: none; }
#ascent-banner.ab-out { opacity: 0; }
#ascent-banner .ab-name { font: 700 46px var(--ui-display, Georgia, serif); color: #ffe7a0; letter-spacing: 0.08em; text-shadow: 0 0 2px #000, 0 3px 0 #5a3a08, 0 0 22px rgba(255, 190, 80, 0.7); animation: abpop 0.5s ease-out; }
#ascent-banner .ab-desc { font: italic 600 18px var(--ui-body, Georgia, serif); color: #f0e0c0; text-shadow: 0 2px 4px #000; margin-top: 4px; }
@keyframes abpop { 0% { transform: scale(1.6); opacity: 0; } 60% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); } }
/* Ascent: the pop when you reach a flag (client-ascent-flag.js). */
#ascent-flag-toast { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 30; transition: opacity 0.5s ease; font-variant-ligatures: none; }
#ascent-flag-toast.hidden { display: none; }
#ascent-flag-toast.aft-out { opacity: 0; }
#ascent-flag-toast .aft-title { font: 700 34px var(--ui-display, Georgia, serif); color: #ffe7a0; letter-spacing: 0.08em; text-shadow: 0 0 2px #000, 0 3px 0 #5a3a08, 0 0 18px rgba(255, 200, 80, 0.75); animation: aftpop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
#ascent-flag-toast .aft-count { font: 600 16px var(--ui-body, Georgia, serif); color: #f6ead0; letter-spacing: 0.14em; text-shadow: 0 2px 4px #000; margin-top: 2px; animation: aftpop 0.45s 0.08s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
@keyframes aftpop { 0% { transform: scale(0.4) rotate(-6deg); opacity: 0; } 70% { transform: scale(1.12) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
html.touch-play #ascent-flag-toast { top: 26%; }
html.touch-play #ascent-flag-toast .aft-title { font-size: 26px; }