.capture-dialog {
  width: min(760px, calc(100% - 28px));
  margin: auto;
  padding: 0;
  border: 1px solid #bbcddd;
  border-radius: 20px;
  background: #f9fbfd;
  color: #294762;
  box-shadow: 0 28px 100px #081b3980;
}
.capture-dialog::backdrop { background: #0e2039bf; backdrop-filter: blur(7px); }
html:has(.capture-dialog[open]) { overflow: hidden; }
.capture-dialog .modal-close { width: 34px; height: 34px; top: 12px; right: 12px; }
.capture-card { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.capture-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 22px 24px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 42%, #2d7180, #1c475e 48%, #153149 85%);
  color: #f1fcff;
  overflow: hidden;
}
.capture-badge { display: flex; align-items: center; gap: 9px; color: #c5f4da; font-size: 13px; font-weight: 800; }
.capture-badge .pokeball { width: 20px; height: 20px; border-width: 2px; box-shadow: none; }
.capture-badge .pokeball::after { width: 7px; height: 7px; border-width: 2px; }
.capture-stage { position: relative; display: grid; place-items: center; width: 100%; height: 220px; isolation: isolate; }
.capture-stage::before {
  content: '';
  position: absolute;
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid #bef5e22e;
  border-radius: 50%;
  background: radial-gradient(circle, #c2ffe72b, #b5ffe808 62%, transparent 63%);
  box-shadow: 0 0 0 18px #c8fff706, 0 0 0 40px #c8fff704;
  z-index: -1;
}
.capture-stage > .sprite { width: 200px; height: 200px; object-fit: contain; filter: drop-shadow(0 12px 10px #071d3c55); animation: capture-arrive .5s cubic-bezier(.2,.8,.3,1) both; }
.capture-number { color: #b4d7e1; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.capture-identity h2 { margin: 10px 0 13px; color: #fff; font-size: clamp(24px, 3.5vw, 32px); line-height: 1.15; letter-spacing: -.8px; overflow-wrap: anywhere; max-width: 100%; }
.capture-identity h2:focus { outline: none; }
.capture-types { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.capture-types .type { padding: 5px 10px; font-size: 10px; }
.capture-destination { display: flex; align-items: center; gap: 7px; margin-top: 24px; padding: 7px 14px; border: 1px solid #c4f7e83b; border-radius: 30px; background: #c2ffe70d; color: #d7f9ec; font-size: 12px; font-weight: 750; }
.capture-destination .icon { width: 15px; height: 15px; }
.capture-origin { margin: 12px 0 0; color: #b4d7e1; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.capture-data { min-width: 0; padding: 48px 26px 24px; }
.capture-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.capture-data h3 { color: #294762; font-size: 15px; letter-spacing: -.25px; }
.capture-stat-modes { display: flex; gap: 3px; padding: 3px; border: 1px solid #d9e5eb; border-radius: 9px; background: #eaf1f5; }
.capture-stat-modes button { min-height: 36px; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #516a80; font-size: 11px; font-weight: 750; white-space: nowrap; }
.capture-stat-modes button[aria-pressed="true"] { background: #fff; color: #226855; box-shadow: 0 1px 4px #213e591a; }
.capture-stat-modes button:hover { color: #1f5c4e; }
.capture-stat-modes button:focus-visible, .capture-help summary:focus-visible { outline: 2px solid #277fc0; outline-offset: 2px; }
.capture-total { text-align: right; font-variant-numeric: tabular-nums; }
.capture-total > span { display: block; color: #60768b; font-size: 10px; font-weight: 700; margin-bottom: 3px; }
.capture-total > strong { color: #237760; font-size: 24px; line-height: 1.1; }
.capture-total small { color: #60768b; font-size: 11px; font-weight: 600; }
.capture-stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.capture-stats th, .capture-stats td { border-bottom: 1px solid #e0e8ee; padding: 10px 0; text-align: left; }
.capture-stats thead th { padding: 0 0 9px; color: #60768b; font-size: 9px; font-weight: 700; }
.capture-stats tbody th { font-size: 11px; font-weight: 650; width: 39%; }
.capture-stats tbody th.capture-nature-up { color: #bd3043; }
.capture-stats tbody th.capture-nature-down { color: #246cb0; }
.capture-stats td:nth-child(2), .capture-stats th:nth-child(2) { text-align: right; padding-right: 14px; }
.capture-stats td:nth-child(2) { color: #294762; font-size: 13px; font-weight: 800; }
.capture-stats thead th:last-child { padding-left: 4px; }
.capture-iv { position: relative; display: flex; align-items: center; gap: 8px; padding-left: 4px; }
.capture-iv-track { display: block; flex: 1; min-width: 28px; height: 5px; overflow: hidden; background: #dce8eb; border-radius: 8px; }
.capture-iv-track > i { display: block; height: 100%; border-radius: inherit; background: #458f91; }
.capture-iv > strong { min-width: 44px; text-align: right; color: #376a72; font-size: 12px; white-space: nowrap; }
.capture-iv small { color: #667d90; font-size: 9px; font-weight: 500; }
.capture-base-stats .capture-iv > strong { min-width: 26px; }
.capture-base-stats .capture-iv-track > i { background: #6888af; }
.capture-perfect .capture-iv > strong { color: #8b6616; }
.capture-perfect .capture-iv-track > i { background: #bd8c2b; }
.capture-perfect-label { position: absolute; right: 0; bottom: -8px; color: #8b6616; font-size: 7px; font-weight: 800; }
.capture-perfect-count { margin: 10px 0 0; color: #8b6616; font-size: 10px; font-weight: 750; text-align: right; }
.capture-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; margin: 20px 0; }
.capture-facts > div { min-width: 0; }
.capture-facts > div:last-child { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; }
.capture-facts dt { color: #60768b; font-size: 10px; }
.capture-facts dd { margin: 4px 0 0; color: #294762; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.capture-facts > div:last-child dd { margin: 0; }
.capture-help { position: relative; }
.capture-help summary { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; list-style: none; cursor: help; }
.capture-help summary::-webkit-details-marker { display: none; }
.capture-help-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 13px; height: 13px; border: 1px solid #9eb4c5; border-radius: 50%; color: #607c91; font-size: 9px; line-height: 1; }
.capture-tooltip { display: none; position: absolute; bottom: calc(100% + 8px); z-index: 10; width: 260px; max-width: calc(100vw - 70px); max-height: 220px; overflow-y: auto; padding: 12px 14px; border: 1px solid #577a96; border-radius: 9px; background: #203f58; color: #f2faff; font-size: 12px; font-weight: 500; line-height: 1.6; box-shadow: 0 7px 24px #102c4340; }
.capture-help-nature .capture-tooltip { left: 0; }
.capture-help-ability .capture-tooltip { right: 0; }
.capture-help[open] .capture-tooltip { display: block; }
.capture-moves h3 { color: #60768b; font-size: 10px; font-weight: 500; letter-spacing: 0; margin-bottom: 8px; }
.capture-moves > div { display: flex; flex-wrap: wrap; gap: 5px; }
.capture-moves span { border: 1px solid #dbe5ee; border-radius: 5px; background: #f0f5f9; padding: 5px 7px; color: #47627a; font-size: 10px; font-weight: 650; }
.capture-continue { margin-top: 22px; min-height: 43px; font-size: 12px; }
@keyframes capture-arrive { from { opacity: 0; transform: translateY(12px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
  .capture-dialog { width: calc(100% - 20px); border-radius: 16px; }
  .capture-card { grid-template-columns: 1fr; }
  .capture-identity { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 12px; position: relative; padding: 20px 18px 18px; }
  .capture-badge { grid-column: 1 / -1; justify-content: center; margin-bottom: 16px; font-size: 12px; }
  .capture-stage { grid-column: 1; grid-row: 2 / span 4; height: 130px; margin: 0; }
  .capture-stage::before { width: 100px; box-shadow: 0 0 0 12px #c8fff706; }
  .capture-stage > .sprite { width: 120px; height: 120px; }
  .capture-number { grid-column: 2; text-align: left; font-size: 10px; }
  .capture-identity h2 { grid-column: 2; margin: 7px 0 10px; font-size: 25px; text-align: left; }
  .capture-types { grid-column: 2; justify-content: flex-start; }
  .capture-destination { grid-column: 2; justify-self: start; margin-top: 12px; padding: 5px 12px; font-size: 11px; }
  .capture-origin { grid-column: 1 / -1; margin-top: 16px; }
  .capture-data { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { .capture-stage > .sprite { animation: none; } }