/* Game feel and group play: damage numbers, low-health edge, cast bars over the
   mobs, the word over a refused button, party frames, quick-message wheel,
   party marker, death recap, sound options. Loaded after skin.css.
   loot feed, upgrade card and Bag button marks.
   Scripts: js/feel.js, js/targeting.js, js/comms.js, js/recap.js, js/lootfeed.js. */

/* ---------- damage numbers (feel.js) ---------- */
.fn { position: absolute; left: 0; top: 0; font: bold 19px/1 system-ui, sans-serif; white-space: nowrap; pointer-events: none; color: #fff; opacity: 0;
  text-shadow: 0 1px 0 #000, 0 2px 3px #000, 0 0 4px #000; will-change: transform, opacity; }
.fn.crit { font-size: 31px; text-shadow: 0 2px 0 #000, 0 0 3px #000, 0 0 10px #ffb02a; }
.fn.dmg.s-fire { color: #ffb060; } .fn.dmg.s-frost { color: #a8e2ff; } .fn.dmg.s-arcane { color: #e6a8ff; } .fn.dmg.s-holy { color: #fff2a0; }
.fn.dmg.s-shadow { color: #c79aff; } .fn.dmg.s-nature { color: #b0f48a; }
.fn.in { color: #ff5a4a; } .fn.heal { color: #6cff7a; } .fn.misc { color: #ffe9a0; font-size: 13px; }

/* ---------- red edge at low health ---------- */
#lowhp { position: fixed; inset: 0; pointer-events: none !important; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse at center, #0000 54%, #d0100a55 84%, #a00000a8 100%); }
#lowhp.on { opacity: 1; animation: lowhp .85s ease-in-out infinite alternate; }
#lowhp.on.still { animation: none; opacity: .7; }
@keyframes lowhp { from { opacity: .3; } to { opacity: 1; } }

/* ---------- cast bar over a casting mob ---------- */
.lbl .wcb { position: relative; width: 88px; height: 12px; margin: 2px auto 0; background: #0c0805e0; border: 1px solid #000; box-shadow: 0 0 0 1px #c9962c; border-radius: 2px; overflow: hidden; }
.lbl .wcb i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(#ffe27a, #d99a1a); }
.lbl .wcb span { position: relative; display: block; padding: 0 2px; font: 600 9.5px/12px system-ui, sans-serif; color: #fff; text-shadow: 0 1px 1px #000, 0 0 2px #000; overflow: hidden; text-overflow: ellipsis; }
.lbl .wcb.kick { overflow: visible; animation: wcbk .4s infinite alternate; } .lbl .wcb.kick i { background: linear-gradient(#ff8a5a, #c0281a); }
@keyframes wcbk { from { box-shadow: 0 0 0 1.5px #ff5a4a; } to { box-shadow: 0 0 0 2.5px #ffe14a, 0 0 9px #ffe14a; } }

/* ---------- skull of the party on a mob (comms.js) ---------- */
.lbl .pmk { width: 30px; height: 30px; margin: 0 auto 1px; filter: drop-shadow(0 0 4px #ff3020); }

/* ---------- word over a button: why it was refused, who gets the heal ---------- */
#why { position: fixed; left: 0; top: 0; z-index: 6; opacity: 0; pointer-events: none !important; white-space: nowrap; padding: 2px 8px; border-radius: 4px;
  font: bold 13px/1.35 system-ui, sans-serif; background: #2a0d08f2; color: #ffc0b0; border: 1px solid #c22a22; box-shadow: 0 2px 4px #000a; transform: translate(-50%, -100%); }
#why.ok { background: #0f2a12f2; color: #c0ffb8; border-color: #2fc03a; }

/* ---------- party frames (targeting.js) ---------- */
#party .pm { position: relative; box-sizing: border-box; width: 152px; min-height: 56px; padding: 1px 4px 2px; font-size: 11.5px; touch-action: none; }
.pm .pmh { display: flex; align-items: center; gap: 3px; height: 18px; line-height: 18px; white-space: nowrap; }
.pm .pmc { flex: none; font-size: 0; } .pm .pmc .ic.inl { width: 17px; height: 17px; margin: 0; vertical-align: top; }
.pm .pmh b { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px #000; }
.pm .pml { flex: none; color: #cdbb94; font-size: 10.5px; }
.pm .pmk { flex: none; font-size: 0; } .pm .pmk .ic.inl { width: 18px; height: 18px; margin: 0; vertical-align: top; }
.pm .bar.hp { height: 13px; margin-top: 1px; } .pm .bar.hp span { font-size: 10px; line-height: 11px; font-weight: 600; }
.pm .bar.res { height: 5px; margin-top: 2px; }
.pm .pmx { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 0; margin-top: 1px; font-size: 10px; line-height: 15px; color: #cdbb94; white-space: nowrap; overflow: hidden; }
.pm .pms { overflow: hidden; text-overflow: ellipsis; } .pm .pmf { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 0; white-space: nowrap; } .pm .pmf .fxi { width: 14px; height: 14px; margin: 0 0 0 1px; }
/* friend target: kept (tapped) or for a moment (last ally healed) */
.pm.sel { border-image-source: var(--bevel); box-shadow: 0 0 0 1.5px #6cff7a, 0 0 9px #3fd04a; }
.pm.soft { box-shadow: 0 0 0 1px #6cff7a99; }
.pm.tgt { border-image-source: var(--bevel); }
.pm.aggro { background: linear-gradient(#55201ae6, #2c0f0be6); }
.pm.hurt .bar.hp i { background: linear-gradient(#ff7a4a, #b0241a); }
.pm.oor { opacity: .5; } .pm.far { opacity: .55; } .pm.off { opacity: .6; filter: grayscale(1); }
.pm.dead .bar.hp i { transform: scaleX(0) !important; } .pm.dead .bar.hp span { color: #ff8a7a; }
/* Short screens: three frames or more go on two columns, and the chat log moves under them. */
@media (max-height: 420px) {
  #hud[data-party="3"] #party, #hud[data-party="4"] #party { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 3px; width: max-content; }
  #hud[data-party="1"] #chatlog, #hud[data-party="2"] #chatlog, #hud[data-party="3"] #chatlog, #hud[data-party="4"] #chatlog { top: calc(198px + var(--sat)); transform: none; }
}
@media (min-height: 421px) {
  #hud[data-party="1"] #chatlog, #hud[data-party="2"] #chatlog, #hud[data-party="3"] #chatlog, #hud[data-party="4"] #chatlog { left: calc(170px + var(--sal)); }
}

/* ---------- wheel of quick messages (comms.js) ---------- */
#qwheel { position: fixed; z-index: 7; width: 0; height: 0; }
#qwheel::before { content: ""; position: absolute; left: -118px; top: -118px; width: 236px; height: 236px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #17100ad8 30%, #17100aa8 86%, #0000 100%); }
#qwheel button { position: absolute; width: 56px; height: 56px; margin: -28px; padding: 0; border: none; background: none; border-radius: 50%; touch-action: none; transition: transform .08s; }
#qwheel button .ic { width: 46px; height: 46px; margin: 0 auto; }
#qwheel button span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -9px); white-space: nowrap; padding: 0 5px; border-radius: 3px;
  font: 600 11px/1.35 system-ui, sans-serif; color: #fff3cf; background: #17100ae0; text-shadow: 0 1px 1px #000; }
#qwheel button.sel { transform: scale(1.2); filter: brightness(1.3) drop-shadow(0 0 6px #ffd24a); z-index: 1; }
#qwheel .qc { position: absolute; left: 0; top: 0; width: 74px; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font: 11px/1.15 system-ui, sans-serif; color: #e9dcba; text-shadow: 0 1px 2px #000; }

/* ---------- death recap (recap.js) ---------- */
#dead:has(#recap) { gap: 6px; } #dead:has(#recap) h2 { font-size: 24px; letter-spacing: 2px; } #dead:has(#recap) #dead-hint { font-size: 12px; }
#recap { box-sizing: border-box; width: min(410px, 88vw); padding: 2px 8px 4px; text-align: left; font: 12.5px/1.3 system-ui, sans-serif;
  background: linear-gradient(#2e2216f4, #17100af4); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; box-shadow: 0 3px 8px #000a; }
#recap .rc-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--gold); font-weight: bold; }
#recap .rc-t small { color: #cdbb94; font-weight: normal; font-size: 11px; }
#recap .rc-r { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 50px; gap: 6px; line-height: 17px; white-space: nowrap; color: #e9dcba; padding: 0 2px; }
#recap .rc-r span { overflow: hidden; text-overflow: ellipsis; } #recap .rc-r i { font-style: normal; font-size: 11px; color: #a8987a; }
#recap .rc-r b { text-align: right; color: #ff9a8a; } #recap .rc-r.last { background: #a0181a4d; color: #fff; border-radius: 2px; }
#recap .k-zone { color: #ffa050; } #recap .k-cast { color: #ffd24a; } #recap .k-spell { color: #d0b8ff; }
#recap .rc-h { margin-top: 3px; padding-top: 3px; border-top: 1px solid #0007; color: #ffe9a8; white-space: normal; line-height: 1.25; }

/* ---------- options: volumes ---------- */
.fsl { flex: none; display: flex; flex-direction: column; } .fsl label { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 44px; font-size: 12px; color: #d9c8a0; }
.fsl input { width: min(170px, 34vw); height: 44px; margin: 0; accent-color: #d9a93a; }

/* ---------- loot feed, upgrade card, flying icons (lootfeed.js) ---------- */
/* Right of the middle, left of the action buttons, above the cast bar. The box takes no touch: only its lines and buttons do. */
#lootfeed { position: absolute; right: calc(262px + var(--sar)); bottom: calc(90px + var(--sab)); width: 206px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; pointer-events: none !important; z-index: 3; }
#hud:has(#interact:not(.hidden)) #lootfeed { bottom: calc(118px + var(--sab)); }
#hud.tuto-on #lootfeed { bottom: calc(92px + var(--tuto-h, 50px) + var(--sab)); }
#lootlines { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#lootfeed .ll { pointer-events: auto; display: flex; align-items: center; gap: 4px; max-width: 206px; min-height: 24px; box-sizing: border-box; padding: 1px 8px 1px 3px;
  font: 600 12.5px/1.2 system-ui, sans-serif; color: #e9dcba; text-shadow: 0 1px 1px #000; white-space: nowrap;
  background: linear-gradient(#2e2216e6, #17100ae6); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6b5230; border-radius: 4px; animation: llin .18s ease-out; transition: opacity .3s, transform .3s; }
#lootfeed .ll .ic { width: 20px; height: 20px; flex: none; margin: 0; }
#lootfeed .ll .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#lootfeed .ll .cnt { flex: none; color: #fff3cf; } #lootfeed .ll small { flex: none; font-weight: normal; font-size: 11px; color: #cdbb94; }
#lootfeed .ll.out { opacity: 0; transform: translateX(16px); }
#lootfeed .ll.r0l { opacity: .85; }
#lootfeed .ll.glow { animation: llin .18s ease-out, llglow 1.1s ease-in-out 3 alternate; }
#lootfeed .ll.g3 { --lg: #4a9bff; box-shadow: inset 0 0 0 1px #4a9bff, 0 0 8px #4a9bff88; }
#lootfeed .ll.g4 { --lg: #c66bff; box-shadow: inset 0 0 0 1px #c66bff, 0 0 9px #c66bff99; }
#lootfeed .ll.g5 { --lg: #ff9a2e; box-shadow: inset 0 0 0 1px #ff9a2e, 0 0 10px #ff9a2eaa; }
#lootfeed .ll.full { white-space: normal; max-width: 206px; color: #ffd0c0; background: linear-gradient(#5a1a12f0, #2c0c08f0); box-shadow: inset 0 0 0 1px #ff5a4a, 0 0 8px #ff3a2a88; line-height: 1.25; padding: 3px 8px 3px 4px; }
#lootfeed .ll.full b { color: #ff8a7a; }
@keyframes llin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes llglow { to { box-shadow: inset 0 0 0 1px var(--lg), 0 0 16px 3px var(--lg); } }
#upcard { pointer-events: auto; box-sizing: border-box; width: 206px; padding: 3px 7px 5px; font: 12px/1.3 system-ui, sans-serif; color: #e9dcba;
  background: linear-gradient(#2e2216f4, #17100af4); border: 4px solid transparent; border-image: var(--bevel) 4 / 4px stretch; border-radius: 5px; box-shadow: 0 0 10px #3fe04a55, 0 3px 6px #000; animation: llin .2s ease-out; }
#upcard .uh { color: #7fe07a; font-weight: bold; font-size: 12.5px; }
#upcard .ui { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; } #upcard .ui span { overflow: hidden; text-overflow: ellipsis; }
#upcard .ui .ic { width: 22px; height: 22px; flex: none; margin: 0; }
#upcard .ud { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 11.5px; } #upcard .cmp { color: #7fe07a; } #upcard .cmp.neg { color: #ff6a5a; }
#upcard .un { font-size: 10.5px; color: #a8987a; }
#upcard .ua { display: flex; gap: 6px; margin-top: 4px; } #upcard .ua .btn { min-height: 40px; } #upcard .ua .btn:first-child { flex: 1; }
/* Short landscape screens (812x375): the middle is the hero. The feed goes left of
   him, right of the joystick, above the menu; the tutorial card goes up, under the target frame. */
@media (max-height: 420px) {
  #lootfeed, #hud:has(#interact:not(.hidden)) #lootfeed, #hud.tuto-on #lootfeed { right: auto; left: calc(156px + var(--sal)); bottom: calc(58px + var(--sab)); width: 196px; align-items: flex-start; }
  #hud:not(.tuto-on):has(#interact:not(.hidden)) #lootfeed { bottom: calc(116px + var(--sab)); } /* above the button "Parler à …" */
  #lootfeed .ll, #lootfeed .ll.full { max-width: 196px; } #upcard { width: 196px; } #lootlines { align-items: flex-start; }
  #upcard .ua .btn { min-height: 36px; }
  #tuto { top: max(calc(64px + var(--sat)), calc(var(--tframe-b, 0px) + 6px)); bottom: auto; left: calc(184px + var(--sal)); right: calc(282px + var(--sar)); max-width: none; margin: 0; }
  /* the zone banner and the warnings never cover the card (--tuto-b: its bottom, set by tutorial.js) */
  #hud.tuto-on #banner { top: calc(var(--tuto-b, 152px) + 4px); }
  #hud.tuto-on #warn { top: max(34%, calc(var(--tuto-b, 152px) + 8px)); }
  #hud.tuto-on #castbar { bottom: calc(64px + var(--sab)); }
}
#lootfly { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
#lootfly .lf { position: absolute; left: 0; top: 0; width: 26px; height: 26px; will-change: transform, opacity; filter: drop-shadow(0 0 3px #000); }
#lootfly .lf .ic { width: 26px; height: 26px; margin: 0; }
#lootfly .lf.r3 { filter: drop-shadow(0 0 5px #4a9bff); } #lootfly .lf.r4 { filter: drop-shadow(0 0 6px #c66bff); } #lootfly .lf.r5 { filter: drop-shadow(0 0 7px #ff9a2e); }
/* Bag button: upgrades waiting (green, top right) and fill (on the icon) */
#menu button .bagup { position: absolute; right: -7px; top: -9px; z-index: 1; padding: 0 4px; border-radius: 8px; font: bold 11px/15px system-ui, sans-serif; color: #fff;
  background: linear-gradient(#3fc04a, #1d7a24); border: 1px solid #000; box-shadow: 0 0 6px #3fe04a; white-space: nowrap; }
#menu button .bagfill { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); padding: 0 3px; border-radius: 3px; font: bold 10px/12px system-ui, sans-serif;
  color: #f3e6c4; background: #000a; text-shadow: 0 1px 1px #000; white-space: nowrap; pointer-events: none; }
#menu button .bagfill.warn { color: #ffb040; } #menu button .bagfill.full { color: #fff; background: #c0201a; box-shadow: 0 0 6px #ff3a2a; }
/* the bag: upgrades first, in green */
.slot.upg { border-color: #3fe04a !important; box-shadow: 0 0 0 1px #3fe04a, 0 0 8px #3fe04a99; background: radial-gradient(circle, #2a5a1a, #102a0a); }
.junkbtn { display: flex; align-items: center; gap: 6px; margin: 0 0 8px auto; } .junkbtn small { color: #d9c8a0; font-size: 11px; } .junkbtn .ic { width: 20px; height: 20px; margin: 0; }
/* map panel: + and − need less room than "◐ Transparente" */
.mapbtns #map-in, .mapbtns #map-out { flex: 0.6 1 0; } .mapbtns #map-ov { flex: 1.6 1 auto; white-space: nowrap; }
/* quest log: Suivre / Partager / Abandonner stay at the bottom of the panel when the text is long (ui.js renderQuests) */
.qacts { position: sticky; bottom: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; padding: 6px 0 2px; background: linear-gradient(#1c150d00, #1c150d 35%); }
#panel-body h5 .bad { color: #ff5a4a; } #panel-body h5 .warnc { color: #ffb040; }
/* order to one's own mercenary: attack the target (targeting.js) */
.pm .pmcmd { flex: none; width: 30px; height: 22px; margin: -2px 0 -2px 2px; padding: 0; font-size: 13px; line-height: 20px; border-radius: 5px; border: 1px solid #e8c86a88; background: #3a2410cc; color: #ffe0a0; touch-action: manipulation; }
.pm .pmcmd:active { background: #7a4a18; }
/* names on a short phone screen (main.js): the title only up close */
#labels .noti .ti { display: none; }