/* Player, target and group frames of the "Esprit" theme, in the shape of the original game's (owner's references) and the look of the Bag and Character windows:
   a big rounded portrait framed like an item tile, two small square buttons (class icon top left, level bottom left), and beside it a lavender plate in the windows'
   steel ring holding the name plate of the Character sheet, the life and mana bars and the 5 charge points. The target and the group show only that plate (no
   portrait: owner). DOM: ui/UnitFrames.js, ui/PartyFrames.js. Loaded after theme-spirit-hud.css. */
html .frame { gap: 0; align-items: center; padding: 8px 4px 8px 10px; border-radius: 0; background: none; box-shadow: none; }
html .frame.target.enemy, html .frame.target.ally { box-shadow: none; }
html .frame .fbody { gap: 2px; justify-content: center; min-width: 140px; margin-left: -4px; padding: 3px 8px 4px 10px; border-radius: 3px; color: #23222b; /* lower than the portrait, a thin ring: refined */
  background: linear-gradient(#f3f2f8, #e2e1ec); box-shadow: 0 0 0 1px #14131a, 0 0 0 2px #8e8aac, 0 0 0 3px #14131a, inset 0 0 0 1px #fff, 0 3px 8px rgba(0, 0, 0, 0.45); }
html .portrait { position: relative; z-index: 1; width: 70px; height: 70px; margin: 4px; flex: none; }
html .portrait .pt-ring { display: none; }
html .pt-img { inset: 0; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #55526e, #17161e 80%);
  box-shadow: 0 0 0 1px #14131a, 0 0 0 3px #585374, 0 0 0 4px #cac7e0, 0 0 0 5px #14131a, inset 0 0 8px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5); }
html .pt-img img, html .pt-img .pt-face { width: 100% !important; height: 100% !important; border-radius: 11px; object-fit: cover; }
html .pt-lv, html .pt-knob { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 3px;
  background: linear-gradient(#5e5b78, #383649); box-shadow: 0 0 0 1px #0c0b11, inset 0 0 0 1px rgba(205, 202, 230, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6); }
html .pt-lv { left: -7px; bottom: -7px; top: auto; transform: none; min-width: 22px; height: 18px; padding: 0 3px; font-size: var(--fs-caption); font-weight: 800; line-height: 1; color: #f5f4fa; text-shadow: 0 1px 2px #000; }
html .pt-knob.k-cls { left: -7px; top: -7px; width: 22px; height: 22px; overflow: hidden; }
html .pt-knob.k-cls img { width: 18px; height: 18px; border-radius: 2px; }
html .pt-knob.k-cls:empty { display: none; }
html .nameplate { justify-content: center; padding: 0 4px 1px; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 rgba(88, 83, 116, 0.25); } /* the name as plain text over a fine line: no capsule, no rounding */
html .nameplate b { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.3px; color: #34324a; text-shadow: none; }
html .frame.player .tinfo { display: none; } html .frame .tinfo { font-size: var(--fs-micro); font-weight: 600; color: #5e5b76; text-shadow: none; }
html .frame.target.enemy .nameplate { background: none; box-shadow: inset 0 -1px 0 rgba(140, 58, 68, 0.35); } html .frame.target.enemy .nameplate b { color: #7a2a36; }
html .frame.target.ally .nameplate { background: none; box-shadow: inset 0 -1px 0 rgba(63, 138, 90, 0.35); } html .frame.target.ally .nameplate b { color: #2f6a46; }
html .frame.target { padding: 6px 4px; } html .frame.target .fbody { margin-left: 0; min-width: 210px; }
/* bars: spirit rose for life, periwinkle for mana, a lilac cast; white numbers outlined in black on a dark rail */
html .frame .bar { height: 9px; border-radius: 1px; background: #2a2933; box-shadow: 0 0 0 1px #14131a, inset 0 1px 2px rgba(0, 0, 0, 0.8); }
html .frame .bar::before { display: none; }
html .frame .bar::after { left: 0; right: 0; top: 0; height: 1px; border-radius: 0; background: rgba(255, 255, 255, 0.28); } /* one fine light line, no toy gloss */
html .frame .bar i { border-radius: 0; box-shadow: none; }
html .frame .bar.hp i { background: linear-gradient(#b9819f, #8c4f72 55%, #6e3a5a); } /* a muted spirit rose: deep, serious */
html .frame .bar.mp i { background: linear-gradient(#9ea4cf, #6a72a8 55%, #535a8c); }
html .frame .bar.cast i { background: linear-gradient(#c7b8e6, #8c76bd 55%, #6d5a9c); }
html .frame .bar .btxt { font-size: calc(8.5px * var(--ui-text)); font-weight: 600; letter-spacing: 0.3px; color: #f5f4fa; text-shadow: 0 0 2px #000, 0 0 2px #000; }
html .frame .bar.mp, html .frame .bar.cast { height: 8px; } html .frame .bar.mp .btxt, html .frame .bar.cast .btxt { font-size: calc(8px * var(--ui-text)); }
html .frame .resline { min-height: 0; margin-top: 1px; }
html .frame .pips { flex: 1; gap: 2px; }
html .frame .pips i { flex: 1; width: auto; height: 5px; border-radius: 1px; background: #c9c6da; box-shadow: inset 0 1px 2px rgba(35, 34, 43, 0.45), 0 1px 0 #fff; transition: background 0.12s, box-shadow 0.12s; }
html .frame .pips i svg { display: none; }
/* a lit charge point: a solid deep violet with a sharp light edge and a short glow, steady (no pulse); lighting one pops it once */
html .frame .pips i.on { background: linear-gradient(#a97bff, #6d36d8 60%, #4c1fa8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 0 0 1px #2e1466, 0 0 6px 1px rgba(160, 110, 255, 0.95), 0 0 14px 3px rgba(139, 92, 246, 0.6); animation: chargePop 0.25s ease-out; }
@keyframes chargePop { from { transform: scaleY(1.6); filter: brightness(1.6); } }
html .frames .frame.target { width: auto; min-width: 250px; }
/* the effect squares glued under the frame: right under the portrait and the plate, no gap */
html .frame.player .fbody { position: relative; }
html .frame.player .fbody > .buffs { position: absolute; left: 0; right: auto; top: calc(100% + 3px); gap: 1px; display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; } /* a row: this box is a child of .fbody, so the `.frame > .buffs` flex rule of ui-frames.css does not reach it (it was a block: the squares stacked in a column); glued under the rectangular plate itself (a child of it), never under the square portrait */
html .frame > .buffs { left: 6px; right: auto; top: calc(100% - 6px); gap: 1px; }
html .frame.target > .buffs, html .frame.pm > .buffs { left: 4px; top: calc(100% - 3px); }
html .frames .frame:not(.player):has(> .buffs:not(:empty)), html .partyframes .frame:has(> .buffs:not(:empty)) { margin-bottom: 14px; }
html .frame > .buffs .fx { box-shadow: 0 0 0 1px #14131a; border-radius: 1px; }
/* the group: only the plate with its information (no portrait head) */
html .frame.pm { padding: 4px 6px; }
html .frame.pm .pm-portrait { display: none; }
html .frame.pm .fbody { margin-left: 0; min-width: 160px; border-radius: 3px; padding: 3px 8px 4px; }
html .frame.pm .bar { height: 8px; } html .frame.pm .bar.mp { height: 7px; } html .frame.pm .bar .btxt { font-size: calc(8px * var(--ui-text)); }
html .frame.pm.sel { box-shadow: none; } html .frame.pm.sel .fbody { box-shadow: 0 0 0 1px #14131a, 0 0 0 2px #5f9a74, 0 0 0 3px #14131a, inset 0 0 0 1px #fff, 0 3px 8px rgba(0, 0, 0, 0.45); }/* the level of a target or a group member in a small square, as the player's (ui/UnitFrames.js, ui/PartyFrames.js); a creature's is coloured by how hard it is */
html .f-lv { position: absolute; z-index: 2; left: -4px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 18px; padding: 0 3px; display: flex; align-items: center; justify-content: center; border-radius: 3px;
  font-size: var(--fs-caption); font-weight: 800; line-height: 1; color: #f5f4fa; text-shadow: 0 1px 2px #000; background: linear-gradient(#5e5b78, #383649); box-shadow: 0 0 0 1px #0c0b11, inset 0 0 0 1px rgba(205, 202, 230, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6); }
html .f-lv[hidden] { display: none; }
html .f-lv.lv-grey { color: #c4c7cf; } html .f-lv.lv-green { color: #9af0b4; } html .f-lv.lv-yellow { color: #fde68a; } html .f-lv.lv-orange { color: #fdba74; } html .f-lv.lv-red { color: #fca5a5; }
html .frame.target .fbody, html .frame.pm .fbody { padding-left: 20px; }
html .frame.pm .pm-lvl { right: auto; bottom: auto; }