/* hunting : chasse, centre, sac (styles propres à ce module, thème de style.css) */

/* ---------- chasse ---------- */
.pball.net{background:linear-gradient(180deg,#2fbf9b 0 45%,#1a1530 45% 55%,#fff 55%)}
.pball.quick{background:linear-gradient(180deg,#4aa8ff 0 45%,#1a1530 45% 55%,#ffe36b 55%)}
.pball.shinyb{background:linear-gradient(180deg,#ffd84a 0 45%,#1a1530 45% 55%,#ff8bd0 55%)}
.cdline{margin:-10px 0 18px;font-size:14px}
.cdline b{color:var(--text);font-variant-numeric:tabular-nums}
.flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle,#fff 0,#ffe27a88 40%,transparent 70%);animation:flashout 1.3s forwards}
@keyframes flashout{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.field-empty{position:absolute;inset:0;z-index:3;display:grid;place-content:center;text-align:center;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 8px #0008;padding:20px}
.field-empty span{font-size:15px;font-weight:500;opacity:.9}
.panel + .panel,.event,.pve,.rollbox,.catchres,.incense{margin-bottom:18px}
.stage,.ballbar,.log{margin-top:0}
#stage{margin-bottom:0}
.stage + .ballbar{margin-top:14px}
.ballpick .pct{font-size:12px;color:var(--muted)}
.ballpick{cursor:pointer;color:inherit;font:inherit}
.ballpick:focus-visible,.choice .btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.scan{margin-top:8px;font-size:12px;line-height:1.5}

.event{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border:2px solid var(--rc,var(--gold));background:linear-gradient(135deg,var(--panel),#2a1f5c);box-shadow:0 0 30px -8px var(--rc,var(--gold))}
.event img.sprite{width:120px;height:120px;image-rendering:pixelated;object-fit:contain;animation:float 3s ease-in-out infinite}
.event h2{font-size:24px;margin-bottom:6px}
.event p{margin-bottom:6px}
.pve{border-left:5px solid var(--red)}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.choice{--rc:#8d96b8;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:16px;border-radius:20px;background:linear-gradient(160deg,#120e30,var(--panel));border:2px solid var(--rc);box-shadow:0 12px 30px -16px var(--rc);transition:transform .2s}
.choice:hover{transform:translateY(-4px)}
.choice.shiny{background:linear-gradient(160deg,#3a2b00,var(--panel));animation:pulse 2s infinite}
.choice .pic{align-self:center;width:130px;height:130px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--rc),transparent 70%)}
.choice .pic img{width:110px;height:110px;image-rendering:pixelated;object-fit:contain;animation:idle 2.4s ease-in-out infinite}
.choice h3{font-size:20px}
.choice .types{display:flex;gap:5px;flex-wrap:wrap}
.choice .dexb{font-size:13px;color:var(--muted);line-height:1.4}
.choice .btn{margin-top:auto;width:100%;justify-content:center}

.catchres{display:grid;grid-template-columns:minmax(180px,230px) 1fr;gap:24px;align-items:center}
.catchres.shiny{border-color:var(--gold);box-shadow:0 0 36px -10px var(--gold)}
.cr-card .card{max-width:230px}
.cr-txt h2{font-size:28px;margin-bottom:8px}
.cr-txt p{margin-bottom:8px}
.rewards{background:#0e0b26;border:1px dashed var(--gold);border-radius:12px;padding:10px 14px;color:var(--gold)}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.incense .btn b{margin-left:4px}

/* ---------- centre ---------- */
.hurtlist{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.hurt{display:grid;grid-template-columns:auto 48px 1fr minmax(110px,150px);gap:12px;align-items:center;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:#120e30;cursor:pointer;color:inherit;font:inherit;text-align:left;width:100%}
button.hurt{grid-template-columns:48px 1fr minmax(110px,150px)}
.hurt.on{border-color:var(--gold);background:var(--panel2)}
.hurt input{width:20px;height:20px;accent-color:var(--gold)}
.hurt .ico{width:48px;height:48px;image-rendering:pixelated;object-fit:contain}
.hurt .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hurt .hp{display:flex;flex-direction:column;gap:4px}
.hurt .hp .bar{height:8px}
.hurt:hover,.hurt:focus-within{border-color:var(--gold)}
.egg{padding:10px 12px;border-radius:16px;background:#120e30;border:1px solid var(--line)}
.egg .bar{height:10px}
.hatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.hatchbox{text-align:center;padding:10px 4px;min-width:min(78vw,340px)}
.hatchbox h2{font-size:26px;margin-bottom:8px}
.hatch-stage{position:relative;height:210px;display:grid;place-items:center;margin:6px 0 10px;overflow:hidden;border-radius:20px;background:radial-gradient(circle at 50% 55%,#2b1f78,transparent 70%)}
.hatch-egg{justify-content:center;animation:hatchshake .45s infinite}
.hatch-egg .e{width:96px;height:120px}
@keyframes hatchshake{20%{transform:rotate(-12deg) scale(1.04)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg) scale(1.08)}80%{transform:rotate(6deg)}}
.hatch-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff,#ffe27a 40%,transparent 75%);animation:flashout .6s forwards}
.hatch-pic{width:170px;height:170px;image-rendering:pixelated;object-fit:contain;animation:wildin .7s cubic-bezier(.2,1.3,.4,1)}

/* ---------- sac ---------- */
.stack{display:flex;flex-direction:column;gap:18px}
.bagsec h2{font-size:24px;margin-bottom:10px}
.itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.itemcard{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:#120e30;border:1px solid var(--line)}
.itemcard.none{opacity:.5}
.itemcard .ic{font-size:32px;text-align:center}
.itemcard .tx{min-width:0}
.itemcard .tx .muted{font-size:13px;margin-top:2px}
.itemcard .qty{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.bagsec .incense.on{display:flex;gap:14px;align-items:center;margin-bottom:12px;padding:12px 14px;border-radius:16px;border:2px solid var(--gold);background:var(--panel2)}
.bagsec .incense .ic{font-size:34px}
.lootlist{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0}
.lootrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 14px;border-radius:14px;background:#120e30;border:1px solid var(--line)}
.lootrow.new{border-color:var(--gold)}
.lootrow .when{font-size:12px;color:var(--muted);min-width:90px}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .event{grid-template-columns:1fr;text-align:center;justify-items:center}
  .catchres{grid-template-columns:1fr;justify-items:center}
  .cr-txt{text-align:center}
  .acts{justify-content:center}
  .stage{min-height:360px}
  .stage .banner{position:static;max-width:none;margin:10px;animation:none}
  .stage .wild{left:50%;bottom:10%}
  .stage .wild img{width:120px;height:120px}
  .stage .pball{left:10%}
  .hurt{grid-template-columns:auto 40px 1fr}
  button.hurt{grid-template-columns:40px 1fr}
  .hurt .hp{grid-column:1/-1}
  .hurt .ico{width:40px;height:40px}
  .itemgrid{grid-template-columns:1fr}
  .itemcard{grid-template-columns:40px 1fr}
  .itemcard>.btn{grid-column:1/-1}
  .choices{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .choice,.choice .pic img,.event img.sprite,.hatch-egg,.hatch-pic{animation:none!important;transition:none!important}
}