/* hunt.css — ОХОТА (4.2): сети и ловушки над полем ловли, окно «Руками / Ловушка», мини-игры.
   Логика — hunt.js. Стиль — как у карточки главной и модалки голубя. */

/* ===== вкладка охоты: ровно один экран, как главная ===== */
#hunt-tab{
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#hunt-tab.active{ display: flex; flex-direction: column; gap: 10px; }
#hunt-tab[hidden]{ display: none; }

/* карточка сверху: сети, ловушки, кошелёк */
.hunt-top{
  flex: 0 0 auto;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(28,36,62,.9);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.hunt-top__row{ display: flex; align-items: stretch; gap: 8px; }
.hunt-nets{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.hunt-nets__ico{
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg,#ffcf4d,#f5a623);
  box-shadow: inset 0 -3px 0 rgba(150,80,0,.35);
  color: #3a1d00;
}
.hunt-nets__txt{ display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.hunt-nets__num{ font-size: 17px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.hunt-nets__sub{ font-size: 11px; font-weight: 800; color: #a9adc9; font-variant-numeric: tabular-nums; }
.hunt-dots{ display: flex; gap: 3px; margin-top: 4px; }
.hunt-dots i{ width: 9px; height: 9px; border-radius: 3px; background: rgba(255,255,255,.15); }
.hunt-dots i.on{ background: #ffd35a; }
.hunt-top.is-empty .hunt-nets__num{ color: #ff8a95; }

.hunt-traps{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,211,90,.5);
  background: rgba(255,211,90,.12);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hunt-traps:active{ transform: scale(.97); }
.hunt-traps__plus{
  width: 22px; height: 22px; border-radius: 8px;
  display: grid; place-items: center;
  background: #ffd35a; color: #3a1d00; font-size: 16px; line-height: 1;
}
.hunt-top__chips{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.hunt-chip{
  height: 34px; box-sizing: border-box;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 14px; font-weight: 900; color: #fff;
  min-width: 0; white-space: nowrap; overflow: hidden;
}
.hunt-chip .chip-feather{ width: 16px; height: 16px; }
.hunt-chip--income{ background: rgba(74,222,128,.12); border-color: rgba(74,222,128,.3); color: #8ff0b4; font-size: 13px; }

/* ===== небо (поле ловли): на весь оставшийся экран, прозрачное — видно ферму ===== */
#hunt-tab .catch-area{
  flex: 1 1 auto;
  min-height: 200px;
  height: auto;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(120,190,255,.22), rgba(0,0,0,0) 60%);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
#hunt-tab .catch-area::after{ display: none; }
#hunt-tab .hunt-tip{
  flex: 0 0 auto;
  margin: 0 auto;
  max-width: 430px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(20,22,44,.78);
  color: #e7e9f7;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  font-style: normal;
  opacity: 1;
}

/* голубь в небе */
.hunt-flyer{
  position: absolute;
  left: 0; top: 0;
  width: 92px; height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 10;
  will-change: transform;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hunt-flyer img{
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.35));
  animation: huntFlap .35s ease-in-out infinite alternate;
  animation-delay: var(--flap-delay, 0s);
}
.hunt-flyer.to-left img{ scale: -1 1; }
.hunt-flyer.is-egg img{ width: 70%; height: 70%; margin: 15%; animation-name: huntFloat; animation-duration: 1.2s; }
.hunt-flyer.is-special img{ filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 0 4px var(--glow)); }
.hunt-flyer.is-poor{ opacity: .45; }
.hunt-flyer.is-poor img{ filter: grayscale(.5) drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.hunt-flyer.is-gone{ opacity: 0; transition: opacity .3s; pointer-events: none; }
.hunt-flyer.is-caught img{ animation: huntCaught .35s ease-out forwards; }
@keyframes huntFlap{ to{ translate: 0 -6px; } }
@keyframes huntFloat{ 50%{ translate: 0 -5px; rotate: 4deg; } }
@keyframes huntCaught{ to{ scale: 1.25; opacity: .2; } }

.hunt-pop{
  position: absolute;
  z-index: 20;
  transform: translate(-50%,-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(20,22,44,.88);
  color: #ffd35a;
  font-size: 13px; font-weight: 900; white-space: nowrap;
  pointer-events: none;
  animation: huntPop 1.1s ease-out forwards;
}
@keyframes huntPop{
  0%{ opacity: 0; transform: translate(-50%,-30%) scale(.7); }
  15%{ opacity: 1; transform: translate(-50%,-60%) scale(1.05); }
  100%{ opacity: 0; transform: translate(-50%,-170%); }
}

/* сети кончились — небо темнеет с подписью */
.catch-area.no-nets::before{
  content: attr(data-nets-msg);
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  white-space: pre-line;
  background: rgba(10,12,28,.66);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

/* ===== оверлей мини-игры ===== */
.hmg{
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: flex;
  justify-content: center;
  background: rgba(8,10,24,.66);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.hmg[hidden]{ display: none; }
body.hmg-open{ overflow: hidden; }

.hmg-chip{ display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; color: #1b1330; }

/* выбор: руками или ловушкой */
.hmg-choice{ width: 100%; max-width: 450px; display: flex; align-items: flex-end; }
.hmg-sheet{
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: #1c243e;
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  text-align: center;
  color: #fff;
  animation: hmgSheetIn .22s cubic-bezier(.25,1,.35,1);
}
@keyframes hmgSheetIn{ from{ transform: translateY(40px); opacity: 0; } }
.hmg-sheet__img{ width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 0 12px var(--glow, #fff)); }
.hmg-sheet__name{ font-size: 20px; font-weight: 900; margin-top: 2px; }
.hmg-price{ margin-top: 8px; font-size: 15px; font-weight: 900; color: #ffd35a; }
.hmg-price small{ display: block; font-size: 12px; font-weight: 800; color: #a9adc9; }
.hmg-opts{ display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hmg-opt{
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 16px;
  text-align: left;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hmg-opt:active:not(:disabled){ transform: scale(.985); }
.hmg-opt:disabled{ opacity: .45; cursor: default; }
.hmg-opt.is-busy{ opacity: 1; filter: brightness(1.2); }
.hmg-opt__ico{ width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: rgba(0,0,0,.25); }
.hmg-opt__txt{ display: flex; flex-direction: column; gap: 2px; }
.hmg-opt__txt b{ font-size: 17px; font-weight: 900; }
.hmg-opt__txt small{ font-size: 12.5px; font-weight: 800; color: #a9adc9; line-height: 1.3; }
.hmg-opt--hand{ border-color: rgba(74,222,128,.55); background: rgba(74,222,128,.10); }
.hmg-opt--trap{ border-color: rgba(255,211,90,.6); background: rgba(255,211,90,.10); }
.hmg-letgo{ margin-top: 12px; border: 0; background: none; color: #a9adc9; font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }

/* экран мини-игры */
.hmg-game{
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 100%;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
  background:
    linear-gradient(rgba(22,23,44,.25), rgba(22,23,44,.6)),
    var(--bg-image) 50% 100% / cover no-repeat;
}
.hmg-head{ display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(28,36,62,.92); border: 1px solid rgba(255,255,255,.14); }
.hmg-head img{ width: 44px; height: 44px; object-fit: contain; }
.hmg-head__txt{ flex: 1; min-width: 0; }
.hmg-head__name{ font-size: 16px; font-weight: 900; line-height: 1.15; }
.hmg-rule{ font-size: 12.5px; font-weight: 800; color: #dfe2f3; line-height: 1.35; padding: 8px 10px; border-radius: 12px; background: rgba(20,22,44,.82); }
.hmg-rule b{ color: #ffd35a; }
.hmg-scene{ position: relative; flex: 1 1 auto; min-height: 240px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.hmg-ground{ position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, rgba(60,120,40,0), rgba(40,90,30,.55)); }
.hmg-meter{ display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; }
.hmg-bar{ flex: 1; height: 10px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; border: 1px solid rgba(255,255,255,.14); }
.hmg-bar i{ display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#4db8ff,#4ade80); }
.hmg-bar i.is-warn{ background: linear-gradient(90deg,#ffcf4d,#ff8a3d); }
.hmg-big{
  height: 64px;
  border-radius: 18px;
  border: 1px solid #9fd3ff;
  background: linear-gradient(180deg,#00B318,#007D01);
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hmg-big.is-hold{ filter: brightness(1.15); transform: scale(.985); }
.hmg-big.is-danger{ background: linear-gradient(180deg,#ff6b6b,#c92a2a); border-color: #ffb3b3; }

/* ✋ руками */
.hmg-watch{ position: absolute; left: 50%; top: 22%; width: 150px; height: 150px; transform: translateX(-50%) scale(var(--s,.55)); transform-origin: 50% 100%; transition: transform .12s linear; }
.hmg-watch img{ width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; }
.hmg-watch.safe img{ animation: hmgPeck .34s ease-in-out infinite; }
.hmg-watch.warn img{ rotate: -8deg; translate: 0 -6px; }
.hmg-watch.look img{ scale: -1 1; }
.hmg-bubble{ position: absolute; left: 62%; top: -12px; padding: 4px 10px; border-radius: 14px; background: #fff; color: #1b1f3a; font-size: 22px; font-weight: 900; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .08s, transform .08s; }
.hmg-watch.warn .hmg-bubble, .hmg-watch.look .hmg-bubble{ opacity: 1; transform: scale(1); }
.hmg-vign{ position: absolute; inset: 0; pointer-events: none; transition: box-shadow .12s; }
.hmg-scene.looking .hmg-vign{ box-shadow: inset 0 0 70px 18px rgba(255,60,80,.55); }
.hmg-watch.flyaway{ transition: transform .8s ease-in, opacity .8s; transform: translate(-20%,-160%) scale(.4); opacity: 0; }
.hmg-steps{ position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(20,22,44,.85); font-size: 15px; font-weight: 900; white-space: nowrap; }
.hmg-steps.go{ background: #0f8a33; }
.hmg-steps.warn{ background: #f5a623; color: #3a1d00; }
.hmg-steps.stop{ background: #d62839; font-size: 17px; }

/* 📦 ловушка */
.hmg-boxwrap{ position: absolute; left: 50%; bottom: 34%; width: 150px; height: 0; transform: translateX(-50%); }
.hmg-box{ position: absolute; left: 0; bottom: 66px; width: 150px; height: 96px; transform-origin: 100% 100%; transform: rotate(-9deg);
  background: linear-gradient(180deg,#d9a05b,#b77a39); border: 3px solid #7a4d1e; border-radius: 8px 8px 4px 4px; box-shadow: 0 8px 16px rgba(0,0,0,.35); z-index: 3;
  transition: bottom .14s cubic-bezier(.5,0,1,1), transform .14s cubic-bezier(.5,0,1,1), box-shadow .1s, border-color .1s; }
.hmg-box::before{ content: ""; position: absolute; left: 10px; right: 10px; top: 18px; height: 4px; background: rgba(122,77,30,.55); border-radius: 2px; }
.hmg-box::after{ content: "ХРУПКОЕ"; position: absolute; left: 0; right: 0; top: 34px; text-align: center; font-size: 12px; font-weight: 900; color: rgba(122,77,30,.8); letter-spacing: 1px; }
.hmg-box.ready{ border-color: #2fd46e; box-shadow: 0 0 0 4px rgba(47,212,110,.5), 0 0 26px rgba(47,212,110,.8); }
.hmg-box.drop{ bottom: -4px; transform: rotate(0deg); }
.hmg-stick{ position: absolute; left: 6px; bottom: 0; width: 6px; height: 74px; background: #8a5a2b; border-radius: 3px; transform-origin: 50% 100%; transform: rotate(10deg); z-index: 2; transition: transform .15s; }
.hmg-stick.fall{ transform: rotate(80deg); }
.hmg-crumbs{ position: absolute; left: 28px; right: 28px; bottom: -2px; height: 10px; z-index: 1;
  background: radial-gradient(circle,#f3d7a0 0 2px,transparent 3px) 0 0/14px 8px, radial-gradient(circle,#e8c486 0 2px,transparent 3px) 7px 4px/14px 8px; }
.hmg-rope{ position: absolute; left: 6px; bottom: 36px; width: 40vw; max-width: 170px; height: 2px; background: #e8e1cf; transform-origin: 0 50%; transform: rotate(172deg); z-index: 2; opacity: .85; }
.hmg-bird{ position: absolute; bottom: calc(34% - 6px); width: 84px; height: 84px; z-index: 2; }
.hmg-bird img{ width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 90%; }
.hmg-bird.face-l img{ scale: -1 1; }
.hmg-bird.peck img{ animation: hmgPeck .32s ease-in-out infinite; }
.hmg-bird.face-l.peck img{ animation-name: hmgPeckL; }
.hmg-bird.flyaway{ transition: transform .8s ease-in, opacity .8s; transform: translate(160px,-320px) rotate(-15deg); opacity: 0; }
.hmg-now{ position: absolute; left: 50%; bottom: calc(34% + 172px); transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: #0f8a33; font-weight: 900; font-size: 15px; opacity: 0; transition: opacity .08s; z-index: 4; white-space: nowrap; }
.hmg-now.on{ opacity: 1; }
@keyframes hmgPeck{ 50%{ rotate: 14deg; translate: 4px 4px; } }
@keyframes hmgPeckL{ 50%{ rotate: -14deg; translate: -4px 4px; } }

/* результат */
.hmg-res{ position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(8,10,24,.55); }
.hmg-res[hidden]{ display: none; }
.hmg-card{ width: min(320px,100%); padding: 18px 16px 14px; border-radius: 22px; background: #1c243e; border: 2px solid rgba(255,255,255,.14); text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: hmgCardIn .25s cubic-bezier(.25,1,.35,1); }
@keyframes hmgCardIn{ from{ transform: translateY(14px) scale(.96); opacity: 0; } }
.hmg-card.is-win{ border-color: #ffd35a; }
.hmg-card img{ width: 130px; height: 130px; object-fit: contain; }
.hmg-card h3{ margin: 4px 0 2px; font-size: 22px; font-weight: 900; }
.hmg-card p{ margin: 0 0 12px; color: #a9adc9; font-weight: 800; }
.hmg-ok{ width: 100%; height: 48px; border: 0; border-radius: 14px; background: linear-gradient(180deg,#ffcf4d,#f5a623); color: #3a1d00; font-family: inherit; font-size: 16px; font-weight: 900; box-shadow: 0 3px 0 #b46f00; cursor: pointer; }

@media (prefers-reduced-motion: reduce){
  .hmg *, .hmg{ animation: none !important; }
}