/* Otakuchar Pokedex: neutral styles that inherit the theme's fonts and colors. */
.otk-pdx { --otk-border: rgba(127,127,127,.25); --otk-soft: rgba(127,127,127,.08); box-sizing: border-box; }
.otk-pdx *, .otk-pdx *::before, .otk-pdx *::after { box-sizing: inherit; }
.otk-pdx h2 { margin: 1.5em 0 .6em; }

.otk-type { display: inline-block; padding: .15em .7em; margin: 0 .3em .3em 0; border-radius: 999px; background: var(--otk-type); color: #fff; font-size: .8em; font-weight: 600; line-height: 1.6; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

.otk-pdx.otk-card{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.25rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); margin-bottom: 1.5rem; }
.otk-pdx .otk-card__media img{ display: block; width: 100%; height: auto; max-width: 420px; margin: 0 auto; }
.otk-pdx .otk-card__number{ margin: 0; opacity: .7; font-weight: 600; }
.otk-pdx .otk-card__names{ margin: .2em 0 .6em; display: flex; flex-wrap: wrap; gap: .2em .7em; align-items: baseline; }
.otk-pdx .otk-card__names strong{ font-size: 1.6em; line-height: 1.2; }
.otk-pdx .otk-card__names span{ opacity: .75; }
.otk-pdx .otk-facts{ width: 100%; border-collapse: collapse; margin: .5em 0 0; }
.otk-pdx .otk-facts th, .otk-pdx .otk-facts td{ text-align: left; padding: .35em .5em .35em 0; border-bottom: 1px solid var(--otk-border); vertical-align: top; }
.otk-pdx .otk-facts th{ width: 1%; white-space: nowrap; padding-right: 1em; font-weight: 600; }
.otk-shiny summary { cursor: pointer; text-align: center; margin-top: .5em; }

.otk-pdx .otk-stats__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.otk-pdx .otk-stat{ display: grid; grid-template-columns: 2rem minmax(7rem, 11rem) 3rem 1fr; align-items: center; gap: .6rem; margin: 0; }
.otk-pdx .otk-stat__icon{ display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; color: var(--otk-stat); background: color-mix(in srgb, var(--otk-stat) 16%, transparent); }
.otk-pdx .otk-stat__label{ font-weight: 600; font-size: .95em; }
.otk-pdx .otk-stat__value{ font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.otk-pdx .otk-stat__bar{ display: block; height: .65rem; border-radius: 999px; background: var(--otk-soft); overflow: hidden; }
.otk-pdx .otk-stat__bar span{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--otk-stat) 70%, transparent), var(--otk-stat)); }
.otk-pdx .otk-stats__total{ display: flex; justify-content: space-between; align-items: baseline; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--otk-border); font-weight: 600; }
.otk-pdx .otk-stats__total strong{ font-size: 1.3em; }

.otk-pdx.otk-slider{ margin-top: 2rem; }
.otk-pdx .otk-slider__head{ display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.otk-pdx .otk-slider__head h2{ margin: 0; margin-right: auto; }
.otk-pdx .otk-slider__all{ font-size: .9em; font-weight: 600; text-decoration: none; }
.otk-pdx .otk-slider__nav{ display: inline-flex; gap: .3rem; }
.otk-pdx .otk-slider__nav[hidden]{ display: none; }
.otk-pdx .otk-slider__btn{ width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; border: 1px solid var(--otk-border); background: var(--otk-soft); color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.otk-pdx .otk-slider__track{ list-style: none; margin: 0; padding: .2rem .1rem .8rem; display: grid; grid-auto-flow: column; grid-auto-columns: 9.5rem; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.otk-pdx .otk-slider__track li{ margin: 0; scroll-snap-align: start; }
.otk-pdx .otk-slider__track a{ display: flex; flex-direction: column; align-items: center; height: 100%; padding: .7rem .5rem .8rem; text-align: center; text-decoration: none; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); transition: transform .15s; }
.otk-pdx .otk-slider__track a:hover{ transform: translateY(-3px); }
.otk-pdx .otk-slider__track img{ width: 96px; height: 96px; object-fit: contain; }
.otk-pdx .otk-slider__number{ font-size: .78em; opacity: .7; }
.otk-pdx .otk-slider__name{ font-weight: 600; margin-bottom: .25em; }

.otk-pdx .otk-evo__branch{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.otk-pdx .otk-evo__next{ display: flex; flex-direction: column; gap: .5rem; }
.otk-pdx .otk-evo__step{ display: flex; align-items: center; gap: .5rem; }
.otk-pdx .otk-evo__how{ font-size: .85em; opacity: .75; max-width: 9em; }
.otk-pdx .otk-evo__stage > a, .otk-pdx .otk-evo__stage > span{ display: flex; flex-direction: column; align-items: center; padding: .4rem .6rem; border: 1px solid var(--otk-border); border-radius: 10px; text-decoration: none; min-width: 7rem; }
.otk-pdx .otk-evo__stage.is-current > a, .otk-pdx .otk-evo__stage.is-current > span{ background: var(--otk-soft); border-color: currentColor; }
.otk-pdx .otk-evo__name{ font-weight: 600; font-size: .9em; }

.otk-article { margin-top: 2rem; }
.otk-pdx.otk-nav{ display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--otk-border); }
.otk-pdx.otk-notice{ font-size: .8em; opacity: .7; margin-top: 1.5rem; }

.otk-pdx .otk-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.otk-pdx .otk-grid li{ border: 1px solid var(--otk-border); border-radius: 10px; padding: .6rem; text-align: center; background: var(--otk-soft); margin: 0; }
.otk-pdx .otk-grid a{ display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.otk-pdx .otk-grid img{ width: 100%; max-width: 120px; height: auto; }
.otk-pdx .otk-grid__number{ font-size: .8em; opacity: .7; }
.otk-pdx .otk-grid__name{ font-weight: 600; }
.otk-pdx .otk-grid .otk-types{ display: block; margin-top: .3em; }

@media (max-width: 640px) {
	.otk-pdx.otk-card{ grid-template-columns: 1fr; padding: 1rem; }
	.otk-pdx .otk-stat{ grid-template-columns: 2rem 1fr 2.5rem; }
	.otk-pdx .otk-stat__bar{ grid-column: 2 / -1; }
	.otk-pdx .otk-evo__branch, .otk-pdx .otk-evo__step{ flex-direction: column; }
	.otk-pdx .otk-evo__how{ max-width: none; }
}

/* ---------- Filter form (shared with the other Otakuchar plugin; keep in sync) ---------- */
.otk-fx{ margin: 0 0 1rem; }
.otk-fx__bar{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.otk-fx__search{ flex: 1 1 18rem; display: flex; align-items: center; gap: .5rem; padding: 0 .9rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); }
.otk-fx__search svg{ opacity: .6; flex: 0 0 auto; }
.otk-fx__search input{ flex: 1; min-width: 0; border: 0 !important; background: transparent !important; padding: .7em 0 !important; font: inherit; color: inherit; outline: none; box-shadow: none; }
.otk-fx__sort{ display: flex; align-items: center; gap: .5rem; padding: 0 .3rem 0 .9rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); font-size: .9em; }
.otk-fx__sort span{ opacity: .7; white-space: nowrap; }
.otk-fx__sort select{ border: 0 !important; background: transparent !important; padding: .6em .4em !important; font: inherit; color: inherit; max-width: 15rem; }
.otk-fx__sort select option{ color: #111; }
.otk-fx__submit{ padding: .6em 1.4em; border: 0; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.otk-fx__panel{ margin-top: .6rem; border: 1px solid var(--otk-border); border-radius: 14px; background: var(--otk-soft); }
.otk-fx__panel > summary{ display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; cursor: pointer; font-weight: 700; list-style: none; user-select: none; }
.otk-fx__panel > summary::-webkit-details-marker{ display: none; }
.otk-fx__panel > summary::after{ content: "▾"; margin-left: auto; opacity: .6; transition: transform .15s; }
.otk-fx__panel[open] > summary::after{ transform: rotate(180deg); }
.otk-fx__badge{ display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: currentColor; font-size: .75em; }
.otk-fx__badge{ background: #8b74ff; color: #fff; }
.otk-fx__groups{ display: grid; gap: .9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); padding: .2rem 1rem 1rem; }
.otk-fx__group{ margin: 0; padding: 0; border: 0; min-width: 0; }
.otk-fx__group--chips:has(.otk-chip:nth-child(8)){ grid-column: 1 / -1; }
.otk-fx__group legend{ padding: 0; margin-bottom: .45rem; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.otk-fx__group select, .otk-fx__group input[type="text"], .otk-fx__range input{ box-sizing: border-box; width: 100%; min-width: 0; padding: .5em .7em; border: 1px solid var(--otk-border); border-radius: 10px; background: transparent; color: inherit; font: inherit; }
.otk-fx__group select option{ color: #111; }
.otk-fx__range{ display: flex; align-items: center; gap: .4rem; }
.otk-fx__chips{ display: flex; flex-wrap: wrap; gap: .35rem; }
.otk-chip{ position: relative; margin: 0; cursor: pointer; }
.otk-chip input{ position: absolute; opacity: 0; pointer-events: none; }
.otk-chip span{ display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em; border: 1px solid var(--otk-border); border-radius: 999px; font-size: .88em; font-weight: 600; line-height: 1.4; transition: background .12s, border-color .12s, color .12s; }
.otk-chip.has-color span::before{ content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--chip); }
.otk-chip:hover span{ border-color: currentColor; }
.otk-chip input:checked + span{ background: var(--chip, #8b74ff); border-color: var(--chip, #8b74ff); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.otk-chip.has-color input:checked + span::before{ background: #fff; }
.otk-chip input:focus-visible + span{ outline: 3px solid rgba(139,116,255,.6); outline-offset: 2px; }
.otk-fx__status{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1rem; }
.otk-fx__count{ margin: 0; opacity: .85; }
.otk-fx__active{ list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.otk-fx__active li{ margin: 0; }
.otk-fx__active a{ display: inline-flex; gap: .35em; padding: .2em .75em; border-radius: 999px; background: rgba(139,116,255,.16); border: 1px solid rgba(139,116,255,.4); font-size: .85em; text-decoration: none; }
.otk-fx__active a:hover{ background: rgba(139,116,255,.3); }
.otk-fx__active .otk-fx__clear{ background: transparent; border-color: transparent; text-decoration: underline; }
.otk-fx__empty{ padding: 2rem 1rem; text-align: center; border: 1px dashed var(--otk-border); border-radius: 14px; }
.otk-pages{ display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; margin: 1.5rem 0; }
.otk-pages a, .otk-pages span{ min-width: 2.3rem; padding: .35em .75em; text-align: center; border: 1px solid var(--otk-border); border-radius: 10px; text-decoration: none; }
.otk-pages span[aria-current]{ font-weight: 700; background: #8b74ff; border-color: #8b74ff; color: #fff; }
.otk-pages .otk-pages__gap{ border: 0; min-width: 0; }
@media (max-width: 600px){ .otk-fx__sort{ flex: 1 1 100%; } .otk-fx__sort select{ max-width: none; flex: 1; } }
.otk-pdx .otk-grid li{ position: relative; }
.otk-pdx .otk-grid__stat{ display: block; margin-top: .3em; font-size: .8em; font-weight: 700; opacity: .85; }
.otk-pdx .otk-grid__flag{ position: absolute; top: .45rem; right: .45rem; padding: .05em .5em; border-radius: 999px; background: linear-gradient(90deg, #f5b301, #ff7a00); color: #fff; font-size: .68em; font-weight: 700; }

/* Link to the "Đoán bóng Pokémon" mini game above the listing. */
.otk-pdx.otk-game-cta{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); }
.otk-pdx.otk-game-cta p{ margin: 0; }
.otk-pdx.otk-game-cta a{ font-weight: 700; white-space: nowrap; }

/* Generation tabs above the listing. */
.otk-gens{ margin: 0 0 1rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.otk-gens ul{ display: flex; gap: .5rem; margin: 0; padding: 0 0 .3rem; list-style: none; }
.otk-gens li{ flex: 0 0 auto; margin: 0; }
.otk-gens a{ display: flex; flex-direction: column; align-items: center; min-width: 5.2rem; padding: .45rem .7rem; border: 1px solid var(--otk-border); border-radius: 12px; background: var(--otk-soft); color: inherit; text-decoration: none; line-height: 1.25; transition: border-color .12s, background .12s; }
.otk-gens a:hover{ border-color: currentColor; }
.otk-gens a[aria-current]{ border-color: var(--brand, #e3350d); background: color-mix(in srgb, var(--brand, #e3350d) 14%, transparent); }
.otk-gens small{ font-size: .72em; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.otk-gens strong{ font-size: .95em; }
.otk-gens span{ font-size: .75em; opacity: .75; }