/* Retrofus Ascension — the two rows of a fight (server/local/combat-rows.js) and the ground marks.
   Top row = the game's foe bar (#rv-foe-bar, public/classic-ui.css) given room for name, life figures, resistances and states; second row = #rv-ally-bar (same cards).
   Loaded after the game's own styles: the selectors carry `html body` to win over the compact rules of classic-ui.css (which hid the name and the figures). */

/* ---- the two bars ---- */
html body #rv-foe-bar, html body #rv-ally-bar { max-width: calc(100vw - 24px); gap: 4px; padding: 4px 6px; border-radius: 11px; }
#rv-ally-bar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 44; display: flex; box-sizing: border-box; background: linear-gradient(180deg, #14201bdd, #0d1612cc); box-shadow: 0 0 0 1px #000, 0 0 0 2px #4f9a7a88, 0 6px 18px #0007; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #7fd0a855 transparent; overscroll-behavior: contain; animation: fb-in .25s ease-out; }
#rv-ally-bar[hidden] { display: none; }
#rv-ally-bar::-webkit-scrollbar { height: 4px; } #rv-ally-bar::-webkit-scrollbar-thumb { background: #7fd0a855; border-radius: 4px; }
/* the fight bar of the desktop goes under both rows (the rows push it by their own height; a bar the player moved stays where he put it) */
@media (min-width: 601px) { html body.rv-rows-on #fight-hud:not(.is-moved) { top: var(--rv-rows-bottom, 102px) !important; } }

/* ---- a card: portrait + name + figures, life bar, (mana bar), resistances, states ---- */
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "pic name" "pic num" "hp hp" "mp mp" "res res" "fx fx"; align-items: center; column-gap: 5px; row-gap: 2px; width: 104px; padding: 3px 5px 4px; text-align: left; border-radius: 9px; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card.is-target { width: 104px; transform: none; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-pic { grid-area: pic; width: 26px; height: 26px; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-pic img { width: 28px; height: 28px; margin-top: -3px; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-lvl { right: -6px; bottom: -4px; min-width: 14px; padding: 1px 2px; font-size: 8.5px; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card .fb-name { grid-area: name; display: block !important; width: auto; height: 12px; align-self: end; font: 800 10.5px/12px var(--font-ui, "Nunito Sans", sans-serif); text-align: left; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card .fb-num { grid-area: num; display: block !important; order: 0; width: auto; height: 11px; align-self: start; font: 700 10px/11px var(--font-ui, "Nunito Sans", sans-serif); color: #e7dcc0; text-align: left; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card:hover .fb-name, html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card:focus-visible .fb-name { display: block !important; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card .fb-hp { grid-area: hp; order: 0; height: 5px; }
.fb-mp { grid-area: mp; display: block; width: 100%; height: 3px; border-radius: 2px; background: #00000099; box-shadow: inset 0 0 0 1px #ffffff14; overflow: hidden; }
.fb-mp[hidden] { display: none; }
.fb-mp i { display: block; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(180deg, #8fd2ff, #2f7fcb); transition: width .25s ease-out; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-res { grid-area: res; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; width: 100%; font: 700 8.5px/1 var(--font-ui, "Nunito Sans", sans-serif); letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-res span { display: block; text-align: center; color: var(--c, #e7dcc0); border-top: 2px solid var(--c, #e7dcc0); padding-top: 1px; overflow: hidden; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-res span[data-sign="0"] { opacity: .6; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-fx { grid-area: fx; display: flex; gap: 2px; min-height: 11px; overflow: hidden; }
html body :is(#rv-foe-bar, #rv-ally-bar) .fb-fx[hidden] { display: flex; visibility: hidden; }   /* keeps its height: the rows do not jump when a state appears... */
html body :is(#rv-foe-bar, #rv-ally-bar).no-fx .fb-fx[hidden] { display: none; }   /* ...unless no card of the row has a state at all */
.fb-fx .fx { flex: none; padding: 1px 3px; border-radius: 6px; border: 1px solid #ffffff22; background: #ffffff12; color: #f4ead2; font: 700 8.5px/1 var(--font-ui, "Nunito Sans", sans-serif); font-style: normal; white-space: nowrap; }
.fb-fx .fx[data-tone="buff"] { border-color: #7fd37a88; } .fb-fx .fx[data-tone="debuff"] { border-color: #ff7a6aaa; color: #ffc9c0; } .fb-fx .fx[data-tone="shield"] { border-color: #7ab6ffaa; }
.fb-fx .fx[style*="--c"] { color: var(--c); }
.fb-fx .fx.more { color: #cfc4a6; }
.fb-tag { position: absolute; top: 2px; right: 3px; padding: 1px 3px; border-radius: 5px; font: 800 8px/1 var(--font-ui, sans-serif); font-style: normal; color: #fff; background: #2b6fa8; }
.fb-tag:empty { display: none; }
.ab-card[data-role="self"] .fb-tag { color: #3a2a06; background: #f3cf63; font-size: 9px; }

/* ---- who is who ---- */
#rv-ally-bar .ab-card.is-self { border-color: #e9c45c; background: linear-gradient(180deg, #e9c45c26, #e9c45c0a); box-shadow: 0 0 0 1px #e9c45c88; }
#rv-ally-bar .ab-card.is-companion { border-color: #58a6e8aa; background: linear-gradient(180deg, #58a6e81c, #58a6e808); }
#rv-ally-bar .ab-card.is-summon { width: 92px; opacity: .88; border-style: dashed; }
#rv-ally-bar .ab-card[data-role="player"] { border-color: #7fd37a88; }
html body #rv-ally-bar .fb-pic { box-shadow: inset 0 0 0 1px #7fd0a866; }
html body #rv-ally-bar .ab-card.is-self .fb-pic { box-shadow: inset 0 0 0 2px #f3cf63; }
html body #rv-ally-bar .ab-card.is-companion .fb-pic { box-shadow: inset 0 0 0 2px #62b7ff; }
#rv-ally-bar .fb-card.is-new { opacity: 0; transform: translateY(-6px); }
#rv-ally-bar .fb-card.is-gone { opacity: 0; width: 0; padding-inline: 0; margin-inline: -2px; border-width: 0; pointer-events: none; }

/* ---- a crowded fight (more than six per row): name, figures and life only; the tooltip keeps the rest ---- */
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-card { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "pic name" "pic num" "hp hp"; width: 92px; column-gap: 4px; }
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-card.is-target { width: 92px; }
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-pic { width: 22px; height: 22px; } html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-pic img { width: 24px; height: 24px; }
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-card .fb-num { font-size: 9.5px; letter-spacing: -.2px; }
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-res, html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-fx, #rv-ally-bar.is-many .fb-mp { display: none; }
html body :is(#rv-foe-bar, #rv-ally-bar).is-many .fb-card.is-gone { width: 0; }

/* ---- phones: portraits and bars only (no pointer to hover with) ---- */
@media (max-width: 600px) {
  html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card, html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card.is-target, html body #rv-ally-bar .ab-card.is-summon { display: flex; flex-direction: column; align-items: center; width: 46px; padding: 4px 3px; }
  html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card .fb-name, html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card .fb-num, html body :is(#rv-foe-bar, #rv-ally-bar) .fb-res, html body :is(#rv-foe-bar, #rv-ally-bar) .fb-fx, .fb-tag { display: none !important; }
  html body :is(#rv-foe-bar, #rv-ally-bar) .fb-card.is-gone { width: 0; }
}

/* ---- ground marks: the played character (gold) and the AI companions (blue, dashed); they never take a click ---- */
.rv-mark { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; border-radius: 50%; will-change: transform; }
.rv-mark.self { width: 58px; height: 26px; margin: -13px 0 0 -29px; border: 2px solid #f3cf63; box-shadow: 0 0 8px #f3cf63aa, inset 0 0 6px #f3cf6355; animation: rvMarkPulse 2.6s ease-in-out infinite; }
.rv-mark.companion { width: 50px; height: 22px; margin: -11px 0 0 -25px; border: 2px dashed #62b7ff; box-shadow: 0 0 6px #62b7ff77; opacity: .85; }
@keyframes rvMarkPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rv-mark.self { animation: none; opacity: .9; } }
/* on the fighters' plates: the main character's frame is already gold (combat-help.css), an AI companion carries its tag */
html body .monster-tag.in-fight.fight-plate.companion { border-color: #62b7ffcc !important; }
.monster-tag.in-fight.fight-plate.companion b::after { content: " · IA"; font-weight: 700; opacity: .75; }

/* ---- the detailed tooltip (the site's bubble, tooltip.js, with data-tip-html) ---- */
#rv-tip .ut { min-width: 190px; max-width: 300px; font: 600 12px/1.35 var(--font-ui, system-ui, sans-serif); white-space: normal; }
#rv-tip .ut-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#rv-tip .ut-head b { font-size: 13.5px; color: #ffd96a; } #rv-tip .ut-head span { color: #d8c9a4; font-size: 11px; white-space: nowrap; }
#rv-tip .ut-sub { margin-bottom: 3px; color: #d8c9a4; font-size: 11.5px; }
#rv-tip .ut-line { margin: 2px 0; }
#rv-tip .ut-sec { margin: 7px 0 2px; font: 800 10px/1 var(--font-ui, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #c9a95c; }
#rv-tip .ut-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; }
#rv-tip .ut-res span { color: var(--c); } #rv-tip .ut-res i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--c); }
#rv-tip .ut-fx { margin: 0; padding: 0; list-style: none; }
#rv-tip .ut-fx li { position: relative; padding-left: 11px; }
#rv-tip .ut-fx li::before { content: ""; position: absolute; left: 0; top: .5em; width: 5px; height: 5px; border-radius: 50%; background: #7fd37a; }
#rv-tip .ut-fx li[data-tone="debuff"]::before { background: #ff7a6a; } #rv-tip .ut-fx li[data-tone="shield"]::before { background: #7ab6ff; }
#rv-tip .ut-none { color: #a89b7d; }
#rv-tip .ut-note { margin-top: 5px; color: #d9b36a; font-size: 10.5px; }
#rv-tip .ut-hint { margin-top: 6px; color: #a89b7d; font-size: 10.5px; }