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

.otk-color { display: inline-block; padding: .1em .65em; margin: 0 .3em .2em 0; border-radius: 999px; background: var(--otk-color); color: #fff; font-size: .8em; font-weight: 600; line-height: 1.6; }

.otk-tcg.otk-card{ display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); 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-tcg .otk-card__media img{ display: block; width: 100%; height: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.otk-tcg .otk-card__code{ margin: 0; opacity: .7; font-weight: 600; }
.otk-tcg .otk-card__name{ margin: .1em 0 .6em; font-size: 1.6em; font-weight: 700; line-height: 1.2; }
.otk-tcg .otk-facts{ width: 100%; border-collapse: collapse; }
.otk-tcg .otk-facts th, .otk-tcg .otk-facts td{ text-align: left; padding: .35em .5em .35em 0; border-bottom: 1px solid var(--otk-border); vertical-align: top; }
.otk-tcg .otk-facts th{ width: 1%; white-space: nowrap; padding-right: 1em; font-weight: 600; }

.otk-tcg.otk-effect p{ margin: 0 0 .8em; padding: .9em 1em; border-left: 3px solid currentColor; background: var(--otk-soft); border-radius: 0 8px 8px 0; }
.otk-tcg .otk-effect__en{ opacity: .75; font-size: .92em; }
.otk-kw { font-weight: 700; white-space: nowrap; }

.otk-tcg .otk-cards{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
.otk-tcg .otk-cards li{ margin: 0; }
.otk-tcg .otk-cards a, .otk-tcg .otk-cards li > span{ display: flex; flex-direction: column; gap: .15em; text-decoration: none; }
.otk-tcg .otk-cards img{ width: 100%; height: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 2px 8px rgba(0,0,0,.15); margin-bottom: .3em; transition: transform .15s; }
.otk-tcg .otk-cards a:hover img{ transform: translateY(-3px); }
.otk-tcg .otk-cards__code{ font-size: .8em; opacity: .7; }
.otk-tcg .otk-cards__name{ font-weight: 600; font-size: .95em; line-height: 1.3; }

.otk-article { margin-top: 2rem; }
.otk-tcg.otk-set__meta{ opacity: .75; }
.otk-tcg.otk-notice{ font-size: .8em; opacity: .7; margin-top: 2rem; }


@media (max-width: 640px) {
	.otk-tcg.otk-card{ grid-template-columns: 1fr; padding: 1rem; }
	.otk-tcg .otk-card__media img{ max-width: 320px; margin: 0 auto; }
	.otk-tcg .otk-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pokémon TCG */
.otk-tcg .otk-move{ margin: 0 0 .8em; padding: .8em 1em; background: var(--otk-soft); border-radius: 8px; }
.otk-tcg .otk-move p{ margin: 0; padding: 0; border: 0; background: none; }
.otk-tcg .otk-move p + p{ margin-top: .35em; }
.otk-tcg .otk-move__head{ display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.otk-tcg .otk-move__tag{ font-size: .75em; font-weight: 700; text-transform: uppercase; padding: .1em .5em; border-radius: 4px; background: #c0392b; color: #fff; }
.otk-tcg .otk-move__damage{ margin-left: auto; font-weight: 700; font-size: 1.1em; }
.otk-energy { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: var(--otk-color); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.otk-tcg.otk-flavor{ font-style: italic; opacity: .75; }

/* ---------- 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; } }

/* Yu-Gi-Oh! */
.otk-tcg.otk-ygo{ border-top: 4px solid var(--otk-frame); }
.otk-tcg .otk-ygo-link{ display: inline-grid; grid-template-columns: repeat(3, 1.5em); gap: 2px; margin-left: .6em; vertical-align: middle; }
.otk-tcg .otk-ygo-link span{ display: grid; place-items: center; height: 1.5em; border-radius: 4px; background: var(--otk-soft); border: 1px solid var(--otk-border); font-size: .8em; opacity: .35; }
.otk-tcg .otk-ygo-link span.is-on{ background: #d8432f; border-color: #d8432f; color: #fff; opacity: 1; }
.otk-tcg .otk-ygo-link .otk-ygo-link__mid{ visibility: hidden; }
.otk-tcg .otk-ygo-vi{ margin: 0 0 .8em; padding: .9em 1em; border-left: 3px solid #8b74ff; background: var(--otk-soft); border-radius: 0 8px 8px 0; }
.otk-tcg .otk-ygo-vi p{ margin: 0 0 .5em; padding: 0; border: 0; background: none; }
.otk-tcg .otk-ygo-vi p:last-child{ margin-bottom: 0; }
.otk-tcg .otk-cards .otk-ygo-ban{ align-self: flex-start; padding: 0 .55em; border-radius: 999px; background: var(--otk-color); color: #fff; font-size: .72em; font-weight: 700; line-height: 1.6; }
.otk-tcg .otk-table-wrap{ overflow-x: auto; }
.otk-tcg.otk-ygo-prints thead th{ width: auto; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.otk-tcg.otk-ygo-prints td:first-child{ white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Market prices ---------- */

.otk-prices__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; margin: 0 0 .9rem; }
.otk-prices__main strong { font-size: 1.6rem; line-height: 1.2; background: linear-gradient(90deg, var(--brand, #8b74ff), var(--brand-2, #ff5c93)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.otk-prices__main span { color: var(--muted, #6b7280); }
.otk-prices__range { color: var(--muted, #6b7280); font-size: .85em; white-space: nowrap; }
.otk-prices__table td:nth-child(n+2) { white-space: nowrap; }
.otk-prices__note { margin: .6rem 0 0; font-size: .85rem; color: var(--muted, #6b7280); font-style: italic; }

/* Price history chart */
.otk-pchart { margin: 0 0 1.1rem; padding: .9rem 1rem 1rem; border: 1px solid var(--otk-border, rgba(127,127,127,.25)); border-radius: 14px; background: var(--otk-soft, rgba(127,127,127,.06)); }
.otk-pchart h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.otk-pchart__summary, .otk-pchart__empty { margin: 0 0 .6rem; color: var(--muted, #6b7280); font-size: .92rem; }
.otk-pchart__change { font-weight: 700; }
.otk-pchart__change.is-up { color: #16a34a; }
.otk-pchart__change.is-down { color: #e5484d; }
.otk-pchart__ranges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
.otk-pchart__ranges button { padding: .3rem .75rem; border: 1px solid var(--otk-border, rgba(127,127,127,.3)); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.otk-pchart__ranges button[aria-pressed="true"] { border-color: transparent; background: var(--brand, #8b74ff); color: #fff; font-weight: 700; }
.otk-pchart__plot { position: relative; }
.otk-pchart__plot svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.otk-pchart__plot text { fill: var(--muted, #6b7280); font-size: 11px; }
.otk-pchart__plot .grid { stroke: currentColor; stroke-opacity: .12; }
.otk-pchart__plot .line { fill: none; stroke: var(--brand, #8b74ff); stroke-width: 2.5; stroke-linejoin: round; }
.otk-pchart__plot .area { fill: var(--brand, #8b74ff); fill-opacity: .12; }
.otk-pchart__plot .cursor { stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 3 3; }
.otk-pchart__plot .dot { fill: var(--brand-2, #ff5c93); stroke: #fff; stroke-width: 2; }
.otk-pchart__tip { position: absolute; top: -.4rem; transform: translate(-50%, -100%); padding: .35rem .6rem; border-radius: 10px; background: #111827; color: #fff; font-size: .8rem; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.otk-pchart__tip strong, .otk-pchart__tip span { display: block; }
.otk-pchart__tip span { opacity: .75; }
.otk-pchart [hidden] { display: none !important; }