/* Catch and move-preview animations in the Pokémon detail panel. */
.detail-art { height: 180px; }
.actions { margin-top: 18px; }
.detail-banner { position: sticky; top: -30px; z-index: 10; display: grid; grid-template-columns: 168px minmax(0, 1fr); column-gap: 14px; margin: -5px -12px 22px; padding: 14px 12px 8px; background: linear-gradient(#f4f3ee 88%, #f4f3eed9); border-bottom: 1px solid #d7d9d0; box-shadow: 0 8px 15px #2028200d; }
.detail-banner .detail-art { width: 168px; height: 174px; }
.detail-banner .pokemon-sprite { width: 158px; height: 158px; }
.detail-banner-info { min-width: 0; padding: 4px 30px 0 0; }
.detail-banner-info h2 { margin: 3px 0 7px; font-size: 27px; }
.banner-status { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.banner-status span { color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.banner-status strong { color: var(--green); font-size: 12px; }
.battle-stage { position: relative; overflow: hidden; isolation: isolate; }
.pokemon-sprite { position: relative; z-index: 2; transform-origin: 50% 88%; will-change: transform, filter, opacity; }
.battle-status { grid-column: 1 / -1; height: 18px; margin: 2px 0 0; text-align: center; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: .2px; }
#detailContent[aria-busy="true"] button { pointer-events: none; }
.regular-strike, .special-aura, .special-orb, .capture-flash, .capture-ball, .capture-result { pointer-events: none; position: absolute; opacity: 0; }
.regular-strike { z-index: 4; left: 40%; top: 34%; width: 72px; height: 82px; }
.regular-strike i { position: absolute; width: 62px; height: 6px; border-radius: 100%; background: linear-gradient(90deg, transparent, #fff 25%, #e4564f 70%, transparent); box-shadow: 0 0 9px #e4564f; transform: rotate(-38deg); }
.regular-strike i:nth-child(2) { top: 25px; left: 10px; }
.regular-strike i:nth-child(3) { top: 50px; left: 3px; }
.special-aura { z-index: 1; width: 138px; height: 138px; border: 5px solid var(--attack-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.2); box-shadow: 0 0 28px var(--attack-color), inset 0 0 25px var(--attack-color); }
.special-orb { z-index: 5; width: 42px; height: 42px; border-radius: 50%; left: 48%; top: 40%; background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--attack-color) 35%, transparent 72%); filter: drop-shadow(0 0 10px var(--attack-color)); }
.capture-flash { z-index: 4; inset: 0; background: radial-gradient(circle at 50% 42%, #fff 0 5%, #fff5a8 8%, transparent 38%); }
.capture-ball { z-index: 6; width: 38px; height: 38px; left: 5%; top: 88%; transform: translate(-50%, -50%); }
.capture-result { z-index: 8; inset: 0; display: grid; place-content: center; gap: 3px; color: #fff; background: #265c48e8; text-shadow: 0 1px 2px #17382c; transform: scale(.9); }
.capture-result span { margin: auto; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; font-size: 18px; }
.capture-result strong { font: 700 18px Georgia, serif; }

.ball-shell, .mini-ball { position: relative; display: inline-block; border-radius: 50%; background: linear-gradient(to bottom, var(--ball-top, #d93a4b) 0 44%, var(--ball-band, #25272b) 45% 57%, var(--ball-bottom, #f7f7f2) 58% 100%); border: 2px solid #25272b; box-shadow: inset -3px -3px 5px #0002, 0 3px 6px #0003; }
.ball-shell { width: 38px; height: 38px; }
.ball-shell i, .mini-ball i { position: absolute; width: 11px; height: 11px; border: 3px solid var(--ball-band, #25272b); border-radius: 50%; background: var(--ball-center, #fff); left: 50%; top: 51%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #fff8; }
.mini-ball { width: 34px; height: 34px; flex: 0 0 34px; }
.mini-ball i { width: 10px; height: 10px; }
.ball-poke { --ball-top: #df3f50; --ball-bottom: #f8f7f1; }
.ball-great { --ball-top: #3879ba; --ball-bottom: #f5f5ed; --ball-center: #e23e4e; }
.ball-ultra { --ball-top: #292b31; --ball-bottom: #f0d34a; --ball-center: #f0d34a; }
.ball-master { --ball-top: #9166b2; --ball-bottom: #ece4f2; --ball-center: #e97cab; }
.ball-premier { --ball-top: #f5f4ee; --ball-bottom: #f5f4ee; --ball-band: #ca3d4b; --ball-center: #fff; }
.ball-net { --ball-top: #4ca5a8; --ball-bottom: #dce77a; --ball-center: #5e76b6; }
.ball-dive { --ball-top: #5db9dc; --ball-bottom: #eef7f8; --ball-band: #276caa; --ball-center: #fff; }
.ball-luxury { --ball-top: #25262b; --ball-bottom: #b43a36; --ball-band: #e4bd42; --ball-center: #f5de7e; }

.catch-sequence .capture-ball { animation: ball-capture-path 2.15s ease-in-out forwards; }
.catch-sequence .ball-shell { animation: ball-spin-shake 2.15s ease-in-out forwards; }
.catch-sequence .pokemon-sprite { animation: pokemon-capture 2.15s ease-in-out forwards; }
.catch-sequence .capture-flash { animation: capture-flare 2.15s ease-out forwards; }
.catch-sequence.catch-error .capture-ball { animation: ball-escape .4s ease-out forwards; }
.catch-sequence.catch-error .pokemon-sprite { animation: pokemon-escape .4s ease-out forwards; }
.catch-success .capture-result { animation: capture-success .3s ease-out forwards; }
.attack-regular .pokemon-sprite { animation: regular-attack .8s cubic-bezier(.2, .8, .2, 1); }
.attack-regular .regular-strike { animation: regular-hit .8s ease-out; }
.attack-special .pokemon-sprite { animation: special-cast 1.35s ease-in-out; }
.attack-special .special-aura { animation: special-aura 1.35s ease-out; }
.attack-special .special-orb { animation: special-orb 1.35s ease-in forwards; }

.catch-controls { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.catch-button { width: 100%; font-weight: 700; }
.ball-picker { margin-top: 12px; border: 1px solid #d3d6cc; border-radius: 8px; background: #eaece5; padding: 14px; }
.ball-picker > .eyebrow { display: block; margin-bottom: 10px; color: var(--muted); }
.ball-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ball-option { min-width: 0; display: flex; align-items: center; gap: 9px; text-align: left; border: 1px solid #d4d8ce; background: #fafbf7; border-radius: 6px; padding: 9px; }
.ball-option > span:last-child { min-width: 0; font-size: 12px; font-weight: 700; }
.ball-option small { display: block; color: var(--muted); font-size: 10px; font-weight: 400; }
.empty-ball-message { font-size: 12px; color: var(--muted); margin: 4px; }
.move-panel { margin-top: 10px; padding-top: 8px; border-top: 1px solid #d3d7cc; }
.move-panel > .eyebrow { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.move-actions { display: grid; grid-template-columns: 1fr; gap: 5px; }
.move-button { min-width: 0; display: grid; grid-template-columns: 24px 1fr; column-gap: 4px; align-items: center; text-align: left; border: 1px solid #d0d5ca; border-radius: 6px; background: #fbfcf8; padding: 5px 7px; }
.move-button > span { grid-row: 1 / 3; font-size: 18px; text-align: center; color: var(--red); }
.special-move > span { color: var(--attack-color); }
.move-button strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.move-button small { font-size: 8px; color: var(--muted); letter-spacing: .4px; }

@keyframes ball-capture-path {
  0% { opacity: 1; left: 5%; top: 88%; }
  27% { opacity: 1; left: 50%; top: 15%; }
  36% { left: 50%; top: 43%; }
  45% { left: 50%; top: 72%; }
  55% { left: 43%; top: 70%; }
  64% { left: 57%; top: 70%; }
  73% { left: 46%; top: 71%; }
  82%, 100% { opacity: 1; left: 50%; top: 72%; }
}
@keyframes ball-spin-shake {
  0% { transform: rotate(0); }
  36% { transform: rotate(900deg); }
  45% { transform: rotate(900deg) scale(1.15); }
  55% { transform: rotate(875deg); }
  64% { transform: rotate(925deg); }
  73% { transform: rotate(880deg); }
  82%, 100% { transform: rotate(900deg); }
}
@keyframes pokemon-capture {
  0%, 27% { opacity: 1; transform: scale(1); filter: none; }
  33% { opacity: 1; transform: scale(1.08); filter: brightness(3) saturate(1.5); }
  42%, 100% { opacity: 0; transform: scale(.04); filter: brightness(4); }
}
@keyframes capture-flare { 0%, 25% { opacity: 0; } 32% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes capture-success { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ball-escape { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } }
@keyframes pokemon-escape { 0% { opacity: 0; transform: scale(.05); filter: brightness(4); } 100% { opacity: 1; transform: scale(1); filter: none; } }
@keyframes regular-attack {
  0%, 100% { transform: translateX(0) rotate(0); }
  22% { transform: translateX(-12px) rotate(-7deg); }
  48% { transform: translateX(28px) rotate(8deg) scale(1.08); filter: drop-shadow(0 0 9px #e4564f); }
  68% { transform: translateX(18px) rotate(2deg); }
  85% { transform: translateX(-4px); }
}
@keyframes regular-hit { 0%, 35% { opacity: 0; transform: translate(15px, -10px) scale(.4); } 48% { opacity: 1; transform: translate(0) scale(1); } 70%, 100% { opacity: 0; transform: translate(28px, -20px) scale(1.25); } }
@keyframes special-cast {
  0%, 100% { transform: translateY(0) scale(1); filter: none; }
  25% { transform: translateY(8px) scale(.92); filter: brightness(1.25); }
  55% { transform: translateY(-10px) scale(1.08); filter: drop-shadow(0 0 11px var(--attack-color)); }
  75% { transform: translateY(-4px) scale(1.03); }
}
@keyframes special-aura { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); } 35% { opacity: .8; transform: translate(-50%, -50%) scale(.75); } 65% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
@keyframes special-orb { 0%, 35% { opacity: 0; transform: translate(-24px, 30px) scale(.2); } 55% { opacity: 1; transform: translate(8px, -5px) scale(1); } 85% { opacity: 1; transform: translate(62px, -32px) scale(1.35); } 100% { opacity: 0; transform: translate(78px, -38px) scale(1.55); } }

@keyframes reduced-attack { 0%, 100% { filter: none; } 45% { filter: brightness(1.55) drop-shadow(0 0 12px var(--attack-color, #e4564f)); } }
@keyframes reduced-effect { 0%, 100% { opacity: 0; } 35%, 70% { opacity: 1; } }

@media (max-width: 760px) {
  .detail-banner { top: -30px; grid-template-columns: 132px minmax(0, 1fr); column-gap: 9px; margin-left: -15px; margin-right: -15px; padding-left: 10px; padding-right: 10px; }
  .detail-banner .detail-art { width: 132px; height: 166px; }
  .detail-banner .pokemon-sprite { width: 138px; height: 148px; transform: translateX(-3px); }
  .detail-banner-info { padding-right: 22px; }
  .detail-banner-info h2 { font-size: 22px; }
  .ball-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .attack-regular .pokemon-sprite, .attack-special .pokemon-sprite { animation: reduced-attack .6s ease !important; }
  .attack-regular .regular-strike, .attack-special .special-aura { animation: reduced-effect .6s ease !important; }
}