/* Pokémon Sun & Moon: Ultra Beast tracker (ultra-beasts.js). Loaded only on the page whose body contains h2#ub-tracker.
   Reuses theme.css tokens, .sm-band, .sm-version, .sm-dex-guide and type chips (.sm-type, .t-*). */
.sm-ub { --ub-ink: #252d42; --ub-frame: #0b0f1d; --ub-gold: #ffcd3f; --ub-pink: #ff5fa2; max-width: 1400px; margin: 0 auto; padding: 18px 20px 22px; border: 4px solid var(--ub-frame); border-radius: 28px; background: radial-gradient(90% 80% at 90% 0%, rgba(255, 95, 162, .28), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(80, 200, 255, .22), transparent 60%), linear-gradient(160deg, #1a1440 0%, #241a55 50%, #102a4a 100%); box-shadow: 0 0 0 3px #060911, 0 30px 60px -30px rgba(0, 0, 0, .8); color: #ffffff; }
.sm-ub-title h1 { margin: 0; color: #ffffff; font-family: var(--sm-display); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 0 #0b0730, 0 0 14px rgba(0, 0, 0, .35); }
.sm-ub .sm-dex-guide span { color: #e2dcff; }
.sm-ub-status { margin: 14px 0 0; color: #e2dcff; font-weight: 800; }

.sm-ub-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px 0; }
.sm-ub-progress { flex: 1 1 280px; min-width: 0; }
.sm-ub-count { margin: 0 0 6px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sm-ub-bar { height: 12px; border: 2px solid var(--ub-frame); border-radius: 99px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sm-ub-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ub-pink), var(--ub-gold)); transition: width .25s ease; }

.sm-ub-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.sm-ub-missions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sm-ub-mission { display: grid; grid-template-columns: 34px 80px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border: 3px solid var(--ub-frame); border-radius: 16px; background: #fdfcf9; color: var(--ub-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.sm-ub-mission.is-done { background: #fff6d6; }
.sm-ub-mission.is-locked { opacity: .72; }
.sm-ub-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ub-ink); color: #ffffff; font-weight: 900; }
.sm-ub-mission.is-done .sm-ub-num { background: #2f9e5a; }
.sm-ub-art { width: 80px; height: 80px; object-fit: contain; }
.sm-ub-info { min-width: 0; }
.sm-ub-info h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; font-weight: 900; }
.sm-ub-excl { padding: 2px 8px; border-radius: 99px; background: var(--ub-gold); color: #3a2a00; font-size: .72rem; font-weight: 900; }
html[data-sm-version="moon"] .sm-ub-excl { background: #7c6cff; color: #ffffff; }
.sm-ub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 0; color: #4a5370; font-size: .85rem; font-weight: 700; }
.sm-ub-types { display: inline-flex; gap: 4px; }
.sm-ub-where { margin: 4px 0 0; font-size: .9rem; font-weight: 700; }
.sm-ub-where a { color: #1b5fc1; }
.sm-ub-swap { margin: 4px 0 0; color: #6a7290; font-size: .8rem; }
.sm-ub-catches { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; max-width: 150px; }
.sm-ub-ball { position: relative; width: 30px; height: 30px; padding: 0; border: 3px solid var(--ub-frame); border-radius: 50%; background: linear-gradient(#d9dde6 0 46%, var(--ub-frame) 46% 54%, #ffffff 54%); cursor: pointer; }
.sm-ub-ball::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 8px; height: 8px; border: 2px solid var(--ub-frame); border-radius: 50%; background: #ffffff; transform: translate(-50%, -50%); }
.sm-ub-ball[aria-pressed="true"] { background: linear-gradient(#2a6fe0 0 46%, var(--ub-frame) 46% 54%, #ffffff 54%); }
.sm-ub-ball[aria-pressed="true"]::before { content: ""; position: absolute; top: 3px; left: 4px; right: 4px; height: 6px; border-radius: 4px; background: var(--ub-gold); }
.sm-ub-ball:focus-visible { outline: 3px solid var(--ub-pink); outline-offset: 2px; }
.sm-ub-tally { flex-basis: 100%; text-align: right; font-size: .8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.sm-ub-necrozma { border-style: dashed; }

.sm-ub-calc { position: sticky; top: 16px; padding: 14px 16px; border: 3px solid var(--ub-frame); border-radius: 18px; background: rgba(253, 252, 249, .97); color: var(--ub-ink); }
.sm-ub-calc h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 900; }
.sm-ub-field { display: grid; gap: 4px; margin: 0 0 10px; font-size: .82rem; font-weight: 900; }
.sm-ub-field select, .sm-ub-field input[type="range"] { width: 100%; font: inherit; font-weight: 700; }
.sm-ub-field select { height: 36px; padding: 0 8px; border: 2px solid #c8cfdc; border-radius: 10px; background: #ffffff; color: var(--ub-ink); }
.sm-ub-field input[type="range"] { accent-color: var(--ub-pink); }
.sm-ub-result { margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--ub-ink); color: #ffffff; }
.sm-ub-result strong { display: block; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sm-ub-result p { margin: 2px 0 0; color: #d6dbea; font-size: .82rem; }
.sm-ub-cmp { width: 100%; border-collapse: collapse; font-size: .84rem; }
.sm-ub-cmp th, .sm-ub-cmp td { padding: 4px 6px; border-bottom: 1px solid #e3e7ef; text-align: left; }
.sm-ub-cmp td:last-child, .sm-ub-cmp th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.sm-ub-cmp tr.is-current td { background: #fff1c2; font-weight: 900; }
.sm-ub-note { margin: 8px 0 0; color: #6a7290; font-size: .75rem; }

@media (max-width: 900px) {
  .sm-ub-body { grid-template-columns: 1fr; }
  .sm-ub-calc { position: static; }
}
@media (max-width: 560px) {
  .sm-ub { padding: 14px 12px 16px; border-radius: 20px; }
  .sm-ub-mission { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 10px; padding: 10px; }
  .sm-ub-num { display: none; }
  .sm-ub-art { width: 56px; height: 56px; }
  .sm-ub-catches { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .sm-ub-tally { flex-basis: auto; margin-left: 6px; }
}