/* Video Farm Mode. Everything here lives inside a VideoOverlayEngine host
   (overlay/video-overlay.css), which is sized to the rendered picture.

   Motion rule: JS positions things with `transform` (once per frame for a
   monster, once ever for a number); CSS animates the separate `translate`,
   `scale`, `rotate` and `opacity` properties, which compose with it. So no
   animation here ever fights the placement, and nothing animates layout. */

/* ---- ⚔ Mob Mode button, directly under the player (#watchMobSlot) -------- */

.mob-slot { margin: 10px 0 2px; }
.mob-slot[hidden] { display: none; }
.mob-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mob-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: #ffd84a;
  color: #111;
  font: 800 14px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 2px 0 #b8900f;
  touch-action: manipulation;
}
.mob-btn:hover { background: #ffe27a; }
.mob-btn:active { translate: 0 1px; box-shadow: 0 1px 0 #b8900f; }
.mob-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.mob-btn--on { background: #1f2430; color: #fff; box-shadow: 0 2px 0 #000; }
.mob-btn--on:hover { background: #2b3242; }
.mob-bar__note { font: 600 13px/1.2 system-ui, sans-serif; opacity: .85; }
.mob-bar__note:empty { display: none; }

/* ---- HUD ---------------------------------------------------------------- */

.farm-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  background: rgba(10, 12, 20, .74);
  color: #fff;
  font: 700 12px/1 system-ui, sans-serif;
  backdrop-filter: blur(6px);
}
.farm-hud__title { color: #ffd84a; letter-spacing: .06em; white-space: nowrap; }
.farm-hud__badge {
  padding: 3px 6px;
  border-radius: 4px;
  background: #f97316;
  color: #111;
  font-size: 10px;
  letter-spacing: .08em;
}
.farm-hud__level:empty, .farm-hud__kills:empty { display: none; }
.farm-hud__bar {
  flex: 0 0 auto;
  width: 84px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
.farm-hud__fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #6ee7ff, #b388ff);
  transition: transform .35s ease;
}
.farm-hud__kills { color: rgba(255, 255, 255, .75); font-weight: 600; white-space: nowrap; }
.farm-hud__bag { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.farm-hud__bagcount { font-weight: 800; }
.farm-hud__bag--bump { animation: farm-bump .32s ease-out; }
@keyframes farm-bump { 40% { scale: 1.35; } }
.farm-hud__status { color: rgba(255, 255, 255, .88); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.farm-hud__status:empty { display: none; }
.farm-hud__close {
  pointer-events: auto;
  flex: 0 0 auto;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
.farm-hud__close:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 520px) {
  .farm-hud { gap: 6px; font-size: 11px; }
  .farm-hud__bar { width: 52px; }
  .farm-hud__kills { display: none; }
}

.farm-watermark {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 4px 8px;
  border: 2px solid #f97316;
  border-radius: 6px;
  color: #f97316;
  font: 900 12px/1 system-ui, sans-serif;
  letter-spacing: .1em;
  background: rgba(0, 0, 0, .45);
}

.farm-banner {
  position: absolute;
  left: 50%;
  top: 32%;
  translate: -50% -50%;
  color: #ffd84a;
  font: 900 clamp(22px, 6vw, 46px)/1 system-ui, sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 3px 0 #7a4b00, 0 0 18px rgba(255, 200, 60, .7);
  opacity: 0;
  white-space: nowrap;
}
.farm-banner--show { animation: farm-banner 1.8s ease-out; }
@keyframes farm-banner {
  0% { opacity: 0; scale: .6; }
  15% { opacity: 1; scale: 1.08; }
  75% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; translate: -50% -90%; }
}

/* ---- Monsters ----------------------------------------------------------- */

/* Placed by JS: transform = translate3d(left of box, top of box). */
.farm-mon {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.farm-mon__body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: scaleX(var(--flip, 1));
  transform-origin: 50% 100%;
  pointer-events: none;
}
.farm-mon__img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45));
  pointer-events: none;
  transform-origin: 50% 100%;
}
.farm-mon--noart .farm-mon__img { visibility: hidden; }
.farm-mon--noart .farm-mon__body::after { content: '👾'; font-size: 48px; }

/* The hit area: its own element so it can stop above the control bar. */
.farm-mon__hit {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.farm-mon__hit:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; border-radius: 8px; }
.farm-mon__hit[hidden] { display: none; }

.farm-mon[data-state="idle"] .farm-mon__img { animation: farm-bob 1.6s ease-in-out infinite; }
.farm-mon[data-state="walk"] .farm-mon__img,
.farm-mon[data-state="entering"] .farm-mon__img { animation: farm-waddle .42s ease-in-out infinite; }
.farm-mon[data-movement="fly"] .farm-mon__img { animation: farm-flap .5s ease-in-out infinite; }
.farm-mon[data-state="attack"] .farm-mon__img { animation: farm-lunge .62s ease-out; }
.farm-mon[data-state="hit"] .farm-mon__img { animation: farm-recoil .26s ease-out; }

@keyframes farm-bob { 50% { translate: 0 -2%; scale: 1 1.02; } }
@keyframes farm-waddle { 0%, 100% { rotate: -3deg; } 50% { translate: 0 -5%; rotate: 3deg; } }
@keyframes farm-flap { 50% { scale: 1.03 .96; translate: 0 -3%; } }
@keyframes farm-lunge { 35% { translate: -8% 0; scale: .96 1.04; } 60% { translate: 16% 0; scale: 1.06 .95; } }
@keyframes farm-recoil { 40% { translate: -12% 0; rotate: -6deg; } }

/* Server-confirmed hit: flash + shake. */
.farm-mon--hit .farm-mon__body { animation: farm-flash .22s steps(2) 1, farm-shake .22s linear 1; }
@keyframes farm-flash { 50% { filter: brightness(3) saturate(0); } }
@keyframes farm-shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

/* Local click acknowledgement, before the server answers. */
.farm-mon--ack .farm-mon__body { animation: farm-ack .14s ease-out 1; }
@keyframes farm-ack { 50% { scale: .95 1.05; } }

.farm-mon--dying .farm-mon__body { animation: farm-die .95s ease-in forwards; }
.farm-mon--dying .farm-mon__tag, .farm-mon--dying .farm-mon__bubble { display: none; }
@keyframes farm-die {
  0% { opacity: 1; }
  30% { opacity: 1; translate: 0 -12%; rotate: -8deg; }
  100% { opacity: 0; translate: 0 20%; rotate: 80deg; scale: .7; }
}

.farm-mon__tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  translate: -50% 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 5px;
  width: max-content;
  max-width: 160px;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.farm-mon__name { font: 800 11px/1.1 system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.farm-mon__lv { font: 700 10px/1 system-ui, sans-serif; color: #fde68a; }
.farm-mon__hp {
  flex-basis: 100%;
  height: 5px;
  max-width: 70px;
  margin: 0 auto;
  border-radius: 3px;
  background: rgba(0, 0, 0, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
  overflow: hidden;
}
.farm-mon__hpfill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  background: #4ade80;
  transition: transform .2s ease;
}
.farm-mon--low .farm-mon__hpfill { background: #f87171; }
.farm-mon--boss .farm-mon__hp { max-width: 120px; height: 7px; }

.farm-mon__bubble {
  position: absolute;
  right: -6px;
  top: -4px;
  padding: 3px 7px;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font: 800 13px/1 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
}
.farm-mon__bubble--show { animation: farm-bubble 1.5s ease-out; }
@keyframes farm-bubble {
  0% { opacity: 0; translate: 0 6px; scale: .6; }
  15%, 80% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 -4px; }
}

/* ---- Effects ------------------------------------------------------------ */

.farm-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 6px;
  margin: -3px 0 0 -32px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff 45%, #ffe27a 55%, transparent);
  pointer-events: none;
  animation: farm-spark .34s ease-out forwards;
}
@keyframes farm-spark {
  0% { scale: .2 1; opacity: 1; }
  40% { scale: 1.1 1; opacity: 1; }
  100% { scale: 1.3 1; opacity: 0; }
}

/* Placed by JS at the monster's head: transform = translate3d(x, y). */
.farm-float {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  font: 900 20px/1 system-ui, sans-serif;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7), 0 0 4px rgba(0, 0, 0, .8);
  opacity: 0;
  translate: -50% 0;
  animation: farm-float 1.2s ease-out forwards;
}
@keyframes farm-float {
  0% { opacity: 0; translate: -50% 6px; scale: .7; }
  12% { opacity: 1; translate: -50% -8px; scale: 1.15; }
  70% { opacity: 1; }
  100% { opacity: 0; translate: -50% -56px; scale: 1; }
}
.farm-float--dmg { color: #ffb347; }
.farm-float--crit { color: #ff4d6d; font-size: 26px; }
.farm-float--miss { color: #cbd5e1; font-size: 16px; }
.farm-float--exp { color: #c4b5fd; font-size: 17px; }
.farm-float--note { color: #fde68a; font-size: 14px; }

.farm-loot {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 5px;
  border-radius: 999px;
  background: rgba(10, 12, 20, .78);
  color: #fde68a;
  font: 800 12px/1 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.farm-loot__icon { font-size: 15px; }
.farm-loot--rare { color: #5eead4; box-shadow: 0 0 0 1px #5eead4, 0 0 12px rgba(94, 234, 212, .6); }

@media (prefers-reduced-motion: reduce) {
  .farm-mon__img, .farm-mon__body { animation: none !important; }
}