/*
 * Pokémon TCG SEO Engine — premium frontend design system.
 *
 * Pure CSS, token-driven, mobile-first, accessible, AdSense-ready.
 * Everything is scoped under .ptcg-app so it never bleeds into the theme.
 * No external fonts, icon fonts, frameworks or CDNs.
 *
 * Color tokens are semantic, so a future dark theme is a token flip only
 * (dark mode is intentionally NOT shipped here).
 */

/* ============================================================= Tokens */
.ptcg-app {
	/* Brand — premium futuristic dark UI (cyan primary, purple + teal accents). */
	--ptcg-accent: #00d4ff;
	--ptcg-accent-2: #a855f7;
	--ptcg-teal: #00ff9d;
	--ptcg-gradient: linear-gradient(135deg, #00d4ff, #a855f7);

	/* Semantic surfaces / text (dark neon theme). */
	--ptcg-bg: #050b1a;
	--ptcg-surface: rgba(10, 20, 45, 0.85);
	--ptcg-surface-2: rgba(8, 16, 38, 0.9);
	--ptcg-ink: #e0eaff;
	--ptcg-ink-2: #b9c6e6;
	--ptcg-muted: #8899bb;
	--ptcg-line: rgba(0, 212, 255, 0.12);
	--ptcg-line-2: rgba(255, 255, 255, 0.06);
	--ptcg-focus: rgba(0, 212, 255, 0.55);

	/* Spacing (8px system) */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
	--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

	/* Radius */
	--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

	/* Shadows — deep dark with a faint neon rim. */
	--sh-1: 0 4px 24px rgba(0,0,0,.45);
	--sh-2: 0 8px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,212,255,.06);
	--sh-3: 0 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(0,120,220,.08);

	/* Type scale */
	--fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.0625rem;
	--fs-xl: 1.15rem; --fs-2xl: clamp(1.4rem, 2.6vw, 1.9rem); --fs-3xl: clamp(1.9rem, 4vw, 2.75rem);

	/* Motion */
	--dur: 240ms;
	--ease: cubic-bezier(.23, 1, .32, 1);

	/* Layout */
	--ptcg-container: 1240px;
	--ptcg-radius: var(--r-lg);
	--ptcg-shadow: var(--sh-1);

	color: var(--ptcg-ink);
	font-family: inherit;
	max-width: var(--ptcg-container);
	margin: 0 auto;
	padding: var(--sp-8) var(--sp-5) var(--sp-16);
	box-sizing: border-box;
	line-height: 1.6;
	/* Self-contained dark neon canvas — layered radial glows over deep navy. */
	background:
		radial-gradient(ellipse 80% 50% at 15% 0%, rgba(0,120,220,.16) 0%, transparent 70%),
		radial-gradient(ellipse 70% 50% at 85% 18%, rgba(120,0,200,.12) 0%, transparent 70%),
		radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,255,157,.05) 0%, transparent 70%),
		linear-gradient(180deg, #050b1a 0%, #070e20 60%, #040810 100%);
	border: 1px solid var(--ptcg-line);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-3);
}
.ptcg-app *, .ptcg-app *::before, .ptcg-app *::after { box-sizing: border-box; }

/* Text-colour baseline: prevents the active WordPress theme from forcing black
 * (invisible-on-dark) text inside our container. Uses :where() so it carries only
 * the .ptcg-app weight — every component's own colour rule still wins — and it
 * inherits the container ink, so text stays readable in BOTH dark and light. */
.ptcg-app :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,thead,tbody,tr,th,td,caption,summary,figure,figcaption,blockquote,label,span,strong,em,b,small,time,code) { color: inherit; }

@media (min-width: 768px) {
	.ptcg-app { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}
@media (min-width: 1600px) {
	.ptcg-app { --ptcg-container: 1360px; }
}

/* ============================================================= Base a11y */
.ptcg-app a { color: var(--ptcg-accent); }
.ptcg-app :where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ptcg-focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
.ptcg-app .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reserved ad slot — fixed height reserves space so a future ad causes zero CLS.
 * Renders only when a site owner supplies markup; the plugin ships no ads. */
.ptcg-adslot {
	display: flex; align-items: center; justify-content: center;
	min-height: 100px; margin: var(--sp-8) auto; max-width: 100%; overflow: hidden;
}
@media (min-width: 768px) { .ptcg-adslot { min-height: 250px; } }

/* ============================================================= Breadcrumbs */
.ptcg-breadcrumbs {
	font-size: var(--fs-sm); color: var(--ptcg-muted);
	margin-bottom: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
}
.ptcg-breadcrumbs a { color: var(--ptcg-accent); text-decoration: none; }
.ptcg-breadcrumbs a:hover { text-decoration: underline; }
.ptcg-breadcrumbs .sep { opacity: .45; }

/* ============================================================= Page header / hero band */
.ptcg-head {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, #5b6ee6 0%, #764ba2 55%, #a855c9 100%);
	border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6);
	margin-bottom: var(--sp-8); box-shadow: var(--sh-3); color: #fff;
}
.ptcg-head::after {
	content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); pointer-events: none;
}
.ptcg-head h1 {
	font-size: var(--fs-3xl); line-height: 1.12; margin: 0 0 var(--sp-2);
	color: #fff; -webkit-text-fill-color: #fff; letter-spacing: -.02em; font-weight: 800;
}
.ptcg-count {
	display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
	color: #fff; font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-1) var(--sp-4); border-radius: var(--r-pill);
}
.ptcg-intro { color: var(--ptcg-ink-2); margin: 0 0 var(--sp-5); max-width: 72ch; line-height: 1.7; }
.ptcg-intro p { margin: 0 0 var(--sp-2); }
.ptcg-intro__meta { font-size: var(--fs-xs); color: #9aa0ac; margin-top: var(--sp-2); }

/* ============================================================= Layout */
.ptcg-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); margin-top: var(--sp-6); align-items: start; }
@media (max-width: 900px) { .ptcg-layout { grid-template-columns: 1fr; } .ptcg-app .ptcg-filters { position: static; top: auto; } }

/* ============================================================= Chips / pills / badges */
.ptcg-active { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ptcg-chip {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: #eef0ff; color: var(--ptcg-accent-2); border-radius: var(--r-pill);
	padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.ptcg-chip .x { font-weight: 700; opacity: .6; }
.ptcg-chip:hover .x { opacity: 1; }

/* ============================================================= Filters / link groups */
.ptcg-filters {
	position: sticky; top: var(--sp-5);
	background: var(--ptcg-surface); border: 1px solid var(--ptcg-line);
	border-radius: var(--ptcg-radius); padding: var(--sp-2) var(--sp-4) var(--sp-4);
}
.ptcg-filters--flat { position: static; }
.ptcg-fgroup { border-bottom: 1px solid var(--ptcg-line-2); padding: var(--sp-3) 0; }
.ptcg-fgroup:last-child { border-bottom: 0; }
.ptcg-fgroup > h3 {
	font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
	color: var(--ptcg-muted); margin: 0 0 var(--sp-3); font-weight: 700;
}
.ptcg-flist { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ptcg-flist a {
	font-size: var(--fs-sm); text-decoration: none; color: var(--ptcg-ink);
	border: 1px solid var(--ptcg-line); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
	background: var(--ptcg-surface-2); line-height: 1.5;
}
.ptcg-flist a:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); background: #fff; box-shadow: 0 4px 12px rgba(91,110,230,.14); transform: translateY(-1px); }
.ptcg-flist a.is-active { border-color: var(--ptcg-accent); color: var(--ptcg-accent); background: #fff; font-weight: 600; }
.ptcg-flist a .n { color: var(--ptcg-accent-2); background: #eef0ff; font-size: var(--fs-xs); font-weight: 600; margin-left: var(--sp-2); padding: 1px var(--sp-2); border-radius: var(--r-pill); }

/* ============================================================= Card grid */
.ptcg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-5); }
@media (min-width: 640px) { .ptcg-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }

.ptcg-card {
	background: var(--ptcg-surface); border: 1px solid var(--ptcg-line-2); border-radius: var(--ptcg-radius);
	box-shadow: var(--sh-1); overflow: hidden; display: flex; flex-direction: column;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ptcg-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #e3ddf5; }
.ptcg-card:hover .ptcg-card__name { color: var(--ptcg-accent-2); }
.ptcg-card a { text-decoration: none; color: inherit; display: block; }
.ptcg-card__img {
	display: block; width: 100%; height: auto; aspect-ratio: 63/88; object-fit: contain;
	background: radial-gradient(circle at 50% 35%, #f7f9ff, #eef1f8); padding: var(--sp-3);
	transition: transform var(--dur) var(--ease);
}
.ptcg-card:hover .ptcg-card__img { transform: scale(1.03); }
.ptcg-card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
.ptcg-card__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; margin-bottom: var(--sp-2); }
.ptcg-card__meta { font-size: var(--fs-xs); color: var(--ptcg-muted); }

/* ============================================================= Type badges (data-driven colors kept) */
.ptcg-types { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.ptcg-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; padding: 3px 9px; border-radius: var(--r-pill); }
.ptcg-type-fire { background: linear-gradient(135deg,#F08030,#dd6610); }
.ptcg-type-water { background: linear-gradient(135deg,#6890F0,#4870d0); }
.ptcg-type-grass { background: linear-gradient(135deg,#78C850,#58a830); }
.ptcg-type-lightning, .ptcg-type-electric { background: linear-gradient(135deg,#F8D030,#dbb010); }
.ptcg-type-psychic { background: linear-gradient(135deg,#F85888,#d83868); }
.ptcg-type-fighting { background: linear-gradient(135deg,#C03028,#a01008); }
.ptcg-type-darkness, .ptcg-type-dark { background: linear-gradient(135deg,#705848,#503028); }
.ptcg-type-metal, .ptcg-type-steel { background: linear-gradient(135deg,#B8B8D0,#9898b0); }
.ptcg-type-dragon { background: linear-gradient(135deg,#7038F8,#5018d8); }
.ptcg-type-fairy { background: linear-gradient(135deg,#EE99AC,#ce798c); }
.ptcg-type-colorless, .ptcg-type-normal { background: linear-gradient(135deg,#A8A878,#8a8a5e); }

/* ============================================================= Empty state */
.ptcg-empty { text-align: center; padding: var(--sp-16) var(--sp-5); color: var(--ptcg-muted); }
.ptcg-empty .ico { font-size: 3rem; opacity: .4; }

/* ============================================================= Pagination */
.ptcg-pagination { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-10); flex-wrap: wrap; }
.ptcg-pagination a, .ptcg-pagination span {
	padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); text-decoration: none;
	border: 1px solid var(--ptcg-line); color: var(--ptcg-ink); font-size: var(--fs-sm); min-height: 40px; display: inline-flex; align-items: center;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ptcg-pagination a:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); }
.ptcg-pagination .current { background: var(--ptcg-accent); color: #fff; border-color: var(--ptcg-accent); }

/* ============================================================= Single card */
.ptcg-single { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-top: var(--sp-5); align-items: start; }
@media (min-width: 760px) { .ptcg-single { grid-template-columns: 360px 1fr; gap: var(--sp-10); } }
.ptcg-single__img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-2); cursor: zoom-in; }
.ptcg-single h1 { margin: 0 0 var(--sp-4); font-size: clamp(1.5rem,2.5vw,2.1rem); }
.ptcg-specs { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.ptcg-specs li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--ptcg-line-2); font-size: var(--fs-sm); }
.ptcg-specs li strong { color: var(--ptcg-muted); font-weight: 600; }
.ptcg-flavor { font-style: italic; color: var(--ptcg-ink-2); line-height: 1.6; margin: var(--sp-3) 0 var(--sp-5); }

/* ============================================================= Set header media */
.ptcg-set__logo { max-width: 280px; height: auto; margin-bottom: var(--sp-3); }
.ptcg-set__symbol { height: 1em; width: auto; vertical-align: middle; margin-right: var(--sp-2); }
.ptcg-single .ptcg-types { margin-bottom: var(--sp-4); }

/* ============================================================= Related */
.ptcg-related { margin-top: var(--sp-10); }
.ptcg-related h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); font-weight: 800; letter-spacing: -.01em; }

/* ============================================================= Disclaimer */
.ptcg-disclaimer { margin-top: var(--sp-12); padding-top: var(--sp-5); border-top: 1px solid var(--ptcg-line); font-size: var(--fs-xs); color: #9aa0ac; line-height: 1.6; }

/* ============================================================= Lightbox */
.ptcg-lightbox { position: fixed; inset: 0; background: rgba(10,12,24,.85); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: var(--sp-6); cursor: zoom-out; }
.ptcg-lightbox[hidden] { display: none; }
.ptcg-lightbox img { max-width: 92vw; max-height: 90vh; border-radius: var(--r-md); }

/* ============================================================= Language switch */
.ptcg-langswitch { display: flex; justify-content: flex-end; margin: var(--sp-1) 0 var(--sp-3); }
.ptcg-langswitch a {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	border: 1px solid var(--ptcg-line); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm); font-weight: 600; color: var(--ptcg-accent-2); text-decoration: none; background: #fff;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ptcg-langswitch a::before { content: "\1F310"; font-size: 14px; }
.ptcg-langswitch a:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); }

/* ============================================================= Buttons: card actions */
.ptcg-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); justify-content: center; flex-wrap: wrap; }
.ptcg-act {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	border: 1px solid var(--ptcg-line); background: #fff; color: var(--ptcg-ink);
	border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: 600;
	cursor: pointer; font-family: inherit; min-height: 44px;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-act:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); transform: translateY(-2px); }
.ptcg-act:active { transform: translateY(0); }
.ptcg-act .ic { font-size: 15px; line-height: 1; }

/* ============================================================= Price box (info box) */
.ptcg-price {
	display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
	background: linear-gradient(135deg, #f5f7ff, #eef0ff); border: 1px solid #e0e4ff;
	border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5);
}
.ptcg-price .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ptcg-muted); }
.ptcg-price .val { font-size: 22px; font-weight: 800; color: var(--ptcg-accent-2); }
.ptcg-price .buy { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; background: var(--ptcg-accent); color: #fff; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm); min-height: 40px; display: inline-flex; align-items: center; transition: background var(--dur) var(--ease); }
.ptcg-price .buy:hover { background: var(--ptcg-accent-2); }

/* ============================================================= Attacks / abilities */
.ptcg-moves { margin: var(--sp-5) 0; }
.ptcg-moves > h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.ptcg-move { border: 1px solid var(--ptcg-line); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3); }
.ptcg-move .hd { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.ptcg-move .nm { font-weight: 700; }
.ptcg-move .dmg { font-weight: 800; color: var(--ptcg-accent-2); font-size: 1.1rem; }
.ptcg-move .tg { font-size: 11px; text-transform: uppercase; color: var(--ptcg-muted); }
.ptcg-move .cost { font-size: var(--fs-xs); color: var(--ptcg-muted); margin-top: var(--sp-1); }
.ptcg-move p { margin: var(--sp-2) 0 0; color: var(--ptcg-ink-2); line-height: 1.55; font-size: var(--fs-sm); }
.ptcg-rule { background: var(--ptcg-surface-2); border-left: 3px solid var(--ptcg-accent); padding: var(--sp-2) var(--sp-3); color: var(--ptcg-ink-2); font-size: var(--fs-sm); margin: var(--sp-2) 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ============================================================= Embedded shortcode block */
.ptcg-embed { padding: 0; }
.ptcg-embed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.ptcg-embed-head h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.01em; }
.ptcg-embed-foot { text-align: center; margin-top: var(--sp-8); }

/* ============================================================= Buttons: primary CTA */
.ptcg-cta {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
	background: var(--ptcg-gradient); color: #fff !important; text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
	padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); min-height: 44px;
	box-shadow: 0 8px 22px rgba(91,110,230,.32);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.ptcg-cta::after { content: "→"; transition: transform var(--dur) var(--ease); }
.ptcg-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(118,75,162,.4); filter: brightness(1.04); }
.ptcg-cta:hover::after { transform: translateX(3px); }
.ptcg-cta:active { transform: translateY(0); }
.ptcg-cta--lg { font-size: var(--fs-md); padding: var(--sp-4) var(--sp-8); }

/* ============================================================= Search */
.ptcg-searchwrap { margin: 0 0 var(--sp-6); }
.ptcg-search {
	position: relative; display: flex; align-items: center; gap: var(--sp-2);
	background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-pill);
	padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4); box-shadow: var(--sh-1);
	max-width: 720px; margin: 0 auto;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ptcg-search:focus-within { border-color: var(--ptcg-accent); box-shadow: 0 8px 26px rgba(91,110,230,.20); }
.ptcg-search__icon { font-size: 16px; opacity: .6; }
.ptcg-search__input { flex: 1; border: 0; outline: 0; background: transparent; font-size: var(--fs-md); font-family: inherit; color: var(--ptcg-ink); padding: var(--sp-3) var(--sp-1); min-width: 0; }
.ptcg-search__btn {
	border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: var(--fs-sm);
	color: #fff; background: var(--ptcg-gradient); border-radius: var(--r-pill); padding: var(--sp-3) var(--sp-6); min-height: 44px;
	transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-search__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ptcg-search--hero { max-width: 760px; padding-left: var(--sp-5); }
.ptcg-search--hero .ptcg-search__input { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-1); }
.ptcg-search--hero .ptcg-search__btn { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-md); }

.ptcg-search__results {
	position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0; z-index: 50;
	background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-lg);
	box-shadow: var(--sh-2); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.ptcg-search__results[hidden] { display: none; }
.ptcg-search__item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); text-decoration: none; color: var(--ptcg-ink); border-bottom: 1px solid var(--ptcg-line-2); }
.ptcg-search__item:last-child { border-bottom: 0; }
.ptcg-search__item:hover { background: var(--ptcg-surface-2); color: var(--ptcg-accent-2); }
.ptcg-search__item img { width: 34px; height: 47px; object-fit: contain; border-radius: 4px; background: #f4f6fb; }
.ptcg-search__item span { font-weight: 600; font-size: var(--fs-sm); }
.ptcg-search__empty { padding: var(--sp-4); text-align: center; color: var(--ptcg-muted); font-size: var(--fs-sm); }

/* ============================================================= Generator */
.ptcg-gen { background: linear-gradient(135deg, #f7f8ff, #f1f0fb); border: 1px solid #e6e8fb; border-radius: var(--r-xl); padding: var(--sp-6); margin-bottom: var(--sp-2); }
.ptcg-gen__title { margin: 0 0 var(--sp-5); font-size: var(--fs-2xl); font-weight: 800; text-align: center; }
.ptcg-gen__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.ptcg-gen__sel {
	appearance: none; -webkit-appearance: none; width: 100%; padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);
	font-size: var(--fs-sm); font-family: inherit; color: var(--ptcg-ink); background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-md); cursor: pointer; min-height: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23764ba2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--sp-3) center;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ptcg-gen__sel:hover { border-color: var(--ptcg-accent); }
.ptcg-gen__sel:focus { outline: 0; border-color: var(--ptcg-accent-2); box-shadow: 0 0 0 3px rgba(118,75,162,.12); }
.ptcg-gen__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.ptcg-gen__results { margin-top: var(--sp-6); transition: opacity var(--dur) var(--ease); }
.ptcg-gen__results:empty { display: none; }
.ptcg-gen__help { margin-top: var(--sp-4); background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-4); }
.ptcg-gen__help summary { cursor: pointer; font-weight: 700; padding: var(--sp-3) 0; color: var(--ptcg-accent-2); }
.ptcg-gen__help ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); color: var(--ptcg-ink-2); line-height: 1.6; font-size: var(--fs-sm); }
.ptcg-gen__help li { margin-bottom: var(--sp-2); }

/* ============================================================= FAQ */
.ptcg-faq { margin-top: var(--sp-10); }
.ptcg-faq details { border: 1px solid var(--ptcg-line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); background: var(--ptcg-surface); transition: border-color var(--dur) var(--ease); }
.ptcg-faq details[open] { border-color: #dcd6f2; }
.ptcg-faq summary { cursor: pointer; font-weight: 600; }
.ptcg-faq details p { margin: var(--sp-2) 0 0; color: var(--ptcg-ink-2); }

/* ============================================================= E-E-A-T blocks */
.ptcg-eeat { margin: var(--sp-8) 0; background: var(--ptcg-surface); border: 1px solid var(--ptcg-line); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); }
.ptcg-eeat > h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); font-weight: 800; }
.ptcg-eeat__dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
.ptcg-eeat__dl dt { font-weight: 600; color: var(--ptcg-ink); }
.ptcg-eeat__dl dd { margin: 0; color: var(--ptcg-ink-2); }
.ptcg-eeat__note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--ptcg-muted); }
.ptcg-eeat__meta { margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--ptcg-muted); }
.ptcg-eeat__meta time { color: inherit; }

/* ============================================================= Compare */
.ptcg-cmp__actions { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.ptcg-cmp__cards { grid-template-columns: 1fr 1fr; max-width: 520px; }
.ptcg-cmp__cards .ptcg-card { margin: 0; }
.ptcg-cmp__scroll { overflow-x: auto; border: 1px solid var(--ptcg-line); border-radius: var(--r-md); }
.ptcg-cmp__table { width: 100%; border-collapse: collapse; }
.ptcg-cmp__table th, .ptcg-cmp__table td { text-align: left; padding: var(--sp-3); vertical-align: top; font-size: var(--fs-sm); }
.ptcg-cmp__table thead th { border-bottom: 2px solid var(--ptcg-line); background: var(--ptcg-surface-2); position: sticky; top: 0; }
.ptcg-cmp__table tbody tr:nth-child(even) { background: var(--ptcg-surface-2); }
.ptcg-cmp__table tbody th, .ptcg-cmp__table tbody td { border-bottom: 1px solid var(--ptcg-line-2); }
.ptcg-cmp__table tbody th { font-weight: 600; }
.ptcg-cmp__links { margin-top: var(--sp-4); }

.ptcg-cmp__picker { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin: var(--sp-5) 0; }
@media (min-width: 560px) { .ptcg-cmp__picker { grid-template-columns: 1fr 1fr; } }
.ptcg-cmp__slot { position: relative; }
.ptcg-cmp__label { display: block; font-weight: 600; margin-bottom: var(--sp-2); }
.ptcg-cmp__results { position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-md); max-height: 280px; overflow: auto; box-shadow: var(--sh-2); }
.ptcg-cmp__results[hidden] { display: none; }
.ptcg-cmp__option { display: flex; gap: var(--sp-2); align-items: center; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); background: none; border: 0; border-bottom: 1px solid var(--ptcg-line-2); cursor: pointer; font: inherit; color: var(--ptcg-ink); min-height: 44px; }
.ptcg-cmp__option:last-child { border-bottom: 0; }
.ptcg-cmp__option:hover, .ptcg-cmp__option.is-active { background: var(--ptcg-surface-2); }
.ptcg-cmp__option img { width: 28px; flex: 0 0 auto; }
.ptcg-cmp__chosen { margin: var(--sp-2) 0 0; color: var(--ptcg-ink-2); font-size: .95em; }
.ptcg-cmp__go[disabled] { opacity: .55; cursor: not-allowed; }

/* ============================================================= Homepage */
.ptcg-home__section { margin: var(--sp-12) 0; }
/* Inside homepage sections, separate with whitespace, not divider rules. */
.ptcg-home__section .ptcg-fgroup { border-bottom: 0; padding: 0; }
.ptcg-home__more { margin: var(--sp-5) 0 0; }
.ptcg-home__more a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--ptcg-accent-2); text-decoration: none; }
.ptcg-home__more a::after { content: "→"; transition: transform var(--dur) var(--ease); }
.ptcg-home__more a:hover { color: var(--ptcg-accent); }
.ptcg-home__more a:hover::after { transform: translateX(3px); }

/* Hero shares the same left content rail as every section below — no centre→left
 * jump. Existing container width is unchanged; only alignment and rhythm move. */
.ptcg-hero { text-align: left; margin: var(--sp-2) 0 var(--sp-12); padding: var(--sp-6) 0 var(--sp-2); }
.ptcg-hero__title { font-size: var(--fs-3xl); font-weight: 800; margin: 0 0 var(--sp-4); letter-spacing: -.02em; line-height: 1.1; max-width: 20ch; }
.ptcg-hero__intro { max-width: 60ch; margin: 0 0 var(--sp-6); color: var(--ptcg-ink-2); font-size: var(--fs-lg); line-height: 1.65; }
.ptcg-hero .ptcg-searchwrap { max-width: 720px; margin-left: 0; margin-right: 0; }
.ptcg-hero .ptcg-search { margin-left: 0; margin-right: 0; }
.ptcg-hero__cta { margin: var(--sp-5) 0 0; }
/* Secondary CTA: a legible, lower-weight companion to the primary Search button.
 * This anchor would otherwise inherit the accent link colour from `.ptcg-app a`
 * (higher specificity than `.ptcg-search__btn`), rendering near-invisible purple
 * text on the purple gradient. We give it a solid AA-contrast secondary style so
 * it reads clearly and no longer competes with Search. */
.ptcg-hero__cta .ptcg-search__btn {
	display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none;
	background: var(--ptcg-surface); color: var(--ptcg-accent-2);
	border: 1px solid var(--ptcg-line); box-shadow: var(--sh-1);
	padding: var(--sp-3) var(--sp-6);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-hero__cta .ptcg-search__btn::after { content: "→"; transition: transform var(--dur) var(--ease); }
.ptcg-hero__cta .ptcg-search__btn:hover { color: var(--ptcg-accent); border-color: var(--ptcg-accent); box-shadow: var(--sh-2); transform: translateY(-1px); }
.ptcg-hero__cta .ptcg-search__btn:hover::after { transform: translateX(3px); }

.ptcg-stats { margin: var(--sp-8) 0; }
.ptcg-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin: 0; }
@media (min-width: 640px) { .ptcg-stats__grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-4); } }
.ptcg-stat { text-align: center; background: var(--ptcg-surface); border: 1px solid var(--ptcg-line); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-4); box-shadow: var(--sh-1); }
.ptcg-stat__num { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.15rem); font-weight: 800; color: var(--ptcg-accent-2); line-height: 1.05; letter-spacing: -.01em; }
.ptcg-stat__label { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: var(--ptcg-ink-2); text-transform: uppercase; letter-spacing: .06em; }

/* Balanced grid: 3×2 on desktop, 2×3 on tablet, 1 column on mobile — no lonely
 * sixth card and no dead gutter (the old auto-fit produced a 5+1 row). */
.ptcg-hubs__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 560px) { .ptcg-hubs__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (min-width: 960px) { .ptcg-hubs__grid { grid-template-columns: repeat(3, 1fr); } }
.ptcg-hub {
	display: flex; flex-direction: column; gap: var(--sp-1); text-decoration: none;
	padding: var(--sp-5) var(--sp-5); border: 1px solid var(--ptcg-line); border-radius: var(--r-lg);
	background: #fff; color: var(--ptcg-ink); box-shadow: var(--sh-1);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-hub:hover { border-color: var(--ptcg-accent-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ptcg-hub:hover .ptcg-hub__label { color: var(--ptcg-accent-2); }
.ptcg-hub__label { font-weight: 700; transition: color var(--dur) var(--ease); }
.ptcg-hub__desc { font-size: var(--fs-sm); color: var(--ptcg-muted); line-height: 1.5; }

/* Category colour anchors: a thin per-hub accent stripe gives each of the six
 * entity cards an instantly-readable visual identity. CSS only — no images, no
 * icons, no extra requests — using the existing type palette. */
.ptcg-hub { position: relative; overflow: hidden; padding-left: var(--sp-6); }
.ptcg-hub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ptcg-accent); }
.ptcg-hubs__grid > .ptcg-hub:nth-child(1)::before { background: #5b6ee6; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(2)::before { background: #F85888; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(3)::before { background: #78C850; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(4)::before { background: #F8B030; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(5)::before { background: #7038F8; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(6)::before { background: #F08030; }
.ptcg-hubs__grid > .ptcg-hub:nth-child(7)::before { background: #26c6da; }

/* Latest sets — real dataset set logos in fixed-height, CLS-safe cards. Logos are
 * lazy-loaded below the fold, so LCP and INP are unaffected. */
.ptcg-sets__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 560px) { .ptcg-sets__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 900px) { .ptcg-sets__grid { grid-template-columns: repeat(4, 1fr); } }
.ptcg-setcard {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
	text-decoration: none; color: var(--ptcg-ink);
	background: #fff; border: 1px solid var(--ptcg-line); border-radius: var(--r-lg);
	padding: var(--sp-4) var(--sp-3); box-shadow: var(--sh-1);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-setcard:hover { border-color: var(--ptcg-accent-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ptcg-setcard:hover .ptcg-setcard__name { color: var(--ptcg-accent-2); }
.ptcg-setcard__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; }
.ptcg-setcard__logo img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.ptcg-setcard__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; transition: color var(--dur) var(--ease); }
.ptcg-setcard__count { font-size: var(--fs-xs); color: var(--ptcg-muted); }

/* Homepage footer band */
.ptcg-home__footer { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--ptcg-line); text-align: center; }
.ptcg-home__footer .ptcg-flist { justify-content: center; margin-bottom: var(--sp-3); }
.ptcg-home__footer .ptcg-flist a { border-color: transparent; background: transparent; padding: var(--sp-1) var(--sp-2); }
.ptcg-home__footer .ptcg-flist a:hover { color: var(--ptcg-accent); box-shadow: none; transform: none; text-decoration: underline; }

/* =============================================================
 * Phase 25 — Homepage premium visual experience.
 * Everything below is scoped to `.ptcg-home` so no other page is affected.
 * Pure CSS: soft layered surfaces, section identity, richer components. No
 * images beyond the existing dataset set logos, no JS, no external assets.
 * ============================================================= */

/* Soft layered canvas — the page is no longer flat white. */
.ptcg-home {
	background:
		radial-gradient(1100px 460px at 82% -6%, rgba(118,75,162,.10), transparent 60%),
		radial-gradient(900px 420px at -4% 2%, rgba(91,110,230,.10), transparent 55%),
		linear-gradient(180deg, #f6f7ff 0%, #ffffff 20%);
	border-radius: var(--r-xl);
}

/* Roomier, calmer vertical rhythm between sections. */
.ptcg-home .ptcg-home__section,
.ptcg-home .ptcg-stats,
.ptcg-home .ptcg-eeat,
.ptcg-home .ptcg-faq { margin-top: var(--sp-16); margin-bottom: var(--sp-16); }

/* Unified premium section headings with a per-section colour accent. */
.ptcg-home .ptcg-home__section > h2,
.ptcg-home .ptcg-eeat > h2,
.ptcg-home .ptcg-faq > h2 {
	position: relative; padding-left: var(--sp-4); margin: 0 0 var(--sp-6);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.ptcg-home .ptcg-home__section > h2::before,
.ptcg-home .ptcg-eeat > h2::before,
.ptcg-home .ptcg-faq > h2::before {
	content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px;
	border-radius: var(--r-pill); background: var(--ptcg-gradient);
}
.ptcg-home [aria-labelledby="ptcg-home-browse"] > h2::before { background: #5b6ee6; }
.ptcg-home [aria-labelledby="ptcg-home-pokemon"] > h2::before { background: #F85888; }
.ptcg-home [aria-labelledby="ptcg-home-sets"] > h2::before { background: #F8B030; }
.ptcg-home [aria-labelledby="ptcg-home-types"] > h2::before { background: #78C850; }
.ptcg-home [aria-labelledby="ptcg-home-artists"] > h2::before { background: #7038F8; }
.ptcg-home [aria-labelledby="ptcg-home-compare"] > h2::before { background: #764ba2; }
.ptcg-home [aria-labelledby="ptcg-home-recent"] > h2::before { background: #F08030; }
.ptcg-home [aria-labelledby="ptcg-home-decks"] > h2::before { background: #26c6da; }

/* ---- Hero: a contained premium stage (no overflow clip — search dropdown stays free). */
.ptcg-home .ptcg-hero {
	position: relative;
	margin: 0 0 var(--sp-16);
	padding: clamp(var(--sp-8), 6vw, var(--sp-20)) clamp(var(--sp-5), 5vw, var(--sp-12));
	border: 1px solid var(--ptcg-line); border-radius: var(--r-xl);
	background:
		radial-gradient(560px 300px at 90% 8%, rgba(248,88,136,.12), transparent 60%),
		radial-gradient(560px 320px at 6% 112%, rgba(91,110,230,.14), transparent 60%),
		linear-gradient(135deg, #f4f6ff 0%, #f7f3fb 55%, #fdf3f8 100%);
	box-shadow: var(--sh-1);
}
.ptcg-home .ptcg-hero__title { font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.06; max-width: 18ch; }
.ptcg-home .ptcg-hero__title::before {
	content: ""; display: block; width: 48px; height: 4px; border-radius: var(--r-pill);
	background: var(--ptcg-gradient); margin-bottom: var(--sp-4);
}
.ptcg-home .ptcg-hero__intro { max-width: 56ch; color: var(--ptcg-ink-2); font-size: clamp(1.02rem, 2.1vw, 1.2rem); }
.ptcg-home .ptcg-hero .ptcg-searchwrap { margin-top: var(--sp-6); }

/* ---- Explore: premium navigation panels. */
.ptcg-home .ptcg-hub {
	padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
	background: linear-gradient(180deg, #ffffff, #fbfbff);
}
.ptcg-home .ptcg-hub__label { font-size: var(--fs-lg); }
.ptcg-home .ptcg-hub::after {
	content: "→"; position: absolute; right: var(--sp-5); top: var(--sp-5);
	color: var(--ptcg-accent-2); opacity: 0; transform: translateX(-4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.ptcg-home .ptcg-hub:hover::after { opacity: 1; transform: translateX(0); }

/* ---- Statistics: a "proof" dashboard band with gradient numerals. */
.ptcg-home .ptcg-stats {
	background: linear-gradient(135deg, #ffffff, #f6f4fd);
	border: 1px solid var(--ptcg-line); border-radius: var(--r-xl);
	padding: clamp(var(--sp-5), 3vw, var(--sp-8)); box-shadow: var(--sh-1);
}
.ptcg-home .ptcg-stat { background: #fff; box-shadow: var(--sh-1); }
.ptcg-home .ptcg-stat__num { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ptcg-home .ptcg-stat__num {
		background: var(--ptcg-gradient); -webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent; color: transparent;
	}
}

/* ---- Featured link sections: tactile white chips instead of flat grey pills. */
.ptcg-home .ptcg-flist a { background: #fff; border-color: var(--ptcg-line); box-shadow: var(--sh-1); padding: var(--sp-2) var(--sp-4); }
.ptcg-home .ptcg-flist a:hover { box-shadow: var(--sh-2); }

/* ---- Popular comparisons: distinct "versus" chips. */
.ptcg-home [aria-labelledby="ptcg-home-compare"] .ptcg-flist { gap: var(--sp-3); }
.ptcg-home [aria-labelledby="ptcg-home-compare"] .ptcg-flist a {
	font-weight: 600; padding: var(--sp-3) var(--sp-5);
	background: linear-gradient(135deg, #ffffff, #f7f4fd);
}

/* ---- About: comfortable reading panel. */
.ptcg-home .ptcg-eeat--about {
	max-width: 820px; background: linear-gradient(180deg, #ffffff, #fafaff);
	border-radius: var(--r-xl); padding: clamp(var(--sp-5), 3vw, var(--sp-8));
}
.ptcg-home .ptcg-eeat--about .ptcg-eeat__dl dd { line-height: 1.7; }

/* ---- FAQ: premium accordion with a CSS chevron (no icon library). */
.ptcg-home .ptcg-faq details {
	border: 1px solid var(--ptcg-line); border-radius: var(--r-lg);
	padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-3);
	background: #fff; box-shadow: var(--sh-1);
}
.ptcg-home .ptcg-faq summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
	font-size: var(--fs-lg); font-weight: 700;
}
.ptcg-home .ptcg-faq summary::-webkit-details-marker { display: none; }
.ptcg-home .ptcg-faq summary::after {
	content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: var(--sp-1);
	border-right: 2px solid var(--ptcg-accent-2); border-bottom: 2px solid var(--ptcg-accent-2);
	transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.ptcg-home .ptcg-faq details[open] { border-color: #dcd6f2; box-shadow: var(--sh-2); }
.ptcg-home .ptcg-faq details[open] summary::after { transform: rotate(-135deg); }

/* ---- Mobile: first-class paddings. */
@media (max-width: 560px) {
	.ptcg-home .ptcg-hero { padding: var(--sp-8) var(--sp-5); }
	.ptcg-home .ptcg-stats { padding: var(--sp-5) var(--sp-4); }
	.ptcg-home .ptcg-home__section,
	.ptcg-home .ptcg-stats,
	.ptcg-home .ptcg-eeat,
	.ptcg-home .ptcg-faq { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
}

/* ============================================================= Small screens */
@media (max-width: 560px) {
	.ptcg-head { padding: var(--sp-6) var(--sp-5); }
	.ptcg-embed-head { flex-direction: column; align-items: flex-start; }
	.ptcg-gen { padding: var(--sp-5) var(--sp-4); }
	.ptcg-gen__filters { grid-template-columns: 1fr 1fr; }
	.ptcg-gen__actions { flex-direction: column; }
	.ptcg-gen__actions .ptcg-cta, .ptcg-gen__actions .ptcg-act { width: 100%; }
	.ptcg-eeat { padding: var(--sp-4); }
	.ptcg-eeat__dl { grid-template-columns: 1fr; gap: 2px 0; }
	.ptcg-eeat__dl dd { margin: 0 0 var(--sp-2); }
}
@media (max-width: 380px) {
	.ptcg-app { padding-left: var(--sp-3); padding-right: var(--sp-3); }
	.ptcg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
}

/* ============================================================= Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ptcg-app *, .ptcg-app *::before, .ptcg-app *::after {
		transition: none !important; animation: none !important; scroll-behavior: auto !important;
	}
	.ptcg-app :where(.ptcg-card, .ptcg-hub, .ptcg-setcard, .ptcg-act, .ptcg-cta, .ptcg-flist a, .ptcg-search__btn):hover { transform: none !important; }
}

/* =============================================================================
 * DARK NEON THEME — surface overrides (applies to every frontend page).
 *
 * The design tokens above already flipped the palette to the dark neon system.
 * This layer re-skins the few components that still carried hardcoded light
 * surfaces/gradients (including the homepage panels) so the whole frontend
 * matches the premium futuristic reference. It changes ONLY colour, background,
 * border, shadow, blur and glow — never layout, structure or class names.
 *
 * Pokémon type badges (.ptcg-type-*) are intentionally NOT touched: their
 * official data-driven colours remain exactly as they were.
 * ============================================================================= */

/* ---- Page hero band (entity pages). */
.ptcg-app .ptcg-head {
	background: linear-gradient(135deg, #071a3a 0%, #0a1230 55%, #1a0b3a 100%);
	border: 1px solid var(--ptcg-line);
	box-shadow: var(--sh-2), 0 0 40px rgba(0,212,255,.08);
}

/* ---- Glass cards / surfaces get a subtle blur + neon rim. */
.ptcg-app .ptcg-card,
.ptcg-app .ptcg-filters,
.ptcg-app .ptcg-eeat,
.ptcg-app .ptcg-hub,
.ptcg-app .ptcg-setcard,
.ptcg-app .ptcg-stat,
.ptcg-app .ptcg-faq details,
.ptcg-app .ptcg-move,
.ptcg-app .ptcg-search,
.ptcg-app .ptcg-search__results,
.ptcg-app .ptcg-cmp__results {
	background: var(--ptcg-surface);
	border-color: var(--ptcg-line);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.ptcg-app .ptcg-card:hover,
.ptcg-app .ptcg-setcard:hover,
.ptcg-app .ptcg-hub:hover { border-color: var(--ptcg-accent); box-shadow: var(--sh-2), 0 0 24px rgba(0,212,255,.12); }
.ptcg-app .ptcg-card:hover .ptcg-card__name,
.ptcg-app .ptcg-setcard:hover .ptcg-setcard__name,
.ptcg-app .ptcg-hub:hover .ptcg-hub__label { color: var(--ptcg-accent); }

/* Card image plates — dark so transparent PNG corners don't flash white. */
.ptcg-app .ptcg-card__img { background: radial-gradient(circle at 50% 35%, #0b1730, #060d1e); }
.ptcg-app .ptcg-search__item img { background: #0b1730; }

/* ---- Chips, pills, count badges, list links. */
.ptcg-app .ptcg-chip,
.ptcg-app .ptcg-flist a .n { background: rgba(0,212,255,.12); color: var(--ptcg-accent); }
.ptcg-app .ptcg-flist a { background: rgba(255,255,255,.04); border-color: var(--ptcg-line); color: var(--ptcg-ink); }
.ptcg-app .ptcg-flist a:hover { background: rgba(0,212,255,.1); border-color: var(--ptcg-accent); color: var(--ptcg-accent); box-shadow: 0 0 16px rgba(0,212,255,.18); }
.ptcg-app .ptcg-flist a.is-active { background: rgba(0,212,255,.14); border-color: var(--ptcg-accent); color: var(--ptcg-accent); }

/* ---- Inputs & selects. */
.ptcg-app .ptcg-search { box-shadow: var(--sh-1); }
.ptcg-app .ptcg-search:focus-within { border-color: var(--ptcg-accent); box-shadow: 0 0 0 3px rgba(0,212,255,.12), 0 0 24px rgba(0,212,255,.12); }
.ptcg-app .ptcg-search__input { color: var(--ptcg-ink); }
.ptcg-app .ptcg-search__input::placeholder { color: var(--ptcg-muted); }
.ptcg-app .ptcg-gen__sel { background: rgba(0,0,0,.4); border-color: rgba(0,212,255,.2); color: var(--ptcg-ink); }
.ptcg-app .ptcg-gen__sel:hover { border-color: var(--ptcg-accent); }
.ptcg-app .ptcg-gen__sel:focus { border-color: var(--ptcg-accent); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }
.ptcg-app .ptcg-search__item { border-bottom-color: var(--ptcg-line-2); color: var(--ptcg-ink); }
.ptcg-app .ptcg-search__item:hover { background: rgba(0,212,255,.07); color: var(--ptcg-accent); }

/* ---- Buttons: gradient primary + secondary actions. */
.ptcg-app .ptcg-cta { box-shadow: 0 4px 20px rgba(0,120,200,.35); }
.ptcg-app .ptcg-cta:hover { box-shadow: 0 6px 30px rgba(0,212,255,.45), 0 0 0 1px rgba(0,212,255,.4); }
.ptcg-app .ptcg-search__btn { box-shadow: 0 4px 20px rgba(0,120,200,.3); }
.ptcg-app .ptcg-search__btn:hover { box-shadow: 0 6px 30px rgba(0,212,255,.45); }
.ptcg-app .ptcg-act,
.ptcg-app .ptcg-langswitch a { background: rgba(255,255,255,.04); border-color: var(--ptcg-line); color: var(--ptcg-ink); }
.ptcg-app .ptcg-act:hover,
.ptcg-app .ptcg-langswitch a:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); box-shadow: 0 0 16px rgba(0,212,255,.18); }
/* Hero secondary CTA (v1.23) — keep it a quiet ghost button on the dark stage. */
.ptcg-app .ptcg-hero__cta .ptcg-search__btn { background: rgba(255,255,255,.04); color: var(--ptcg-accent); border-color: var(--ptcg-line); box-shadow: none; }
.ptcg-app .ptcg-hero__cta .ptcg-search__btn:hover { color: var(--ptcg-accent); border-color: var(--ptcg-accent); box-shadow: 0 0 20px rgba(0,212,255,.2); }

/* ---- Info-ish boxes. */
.ptcg-app .ptcg-price { background: linear-gradient(135deg, rgba(0,80,150,.22), rgba(0,30,80,.4)); border-color: rgba(0,212,255,.25); }
.ptcg-app .ptcg-price .buy { background: var(--ptcg-accent); color: #041018; }
.ptcg-app .ptcg-price .buy:hover { background: var(--ptcg-accent-2); color: #fff; }
.ptcg-app .ptcg-rule { background: rgba(0,212,255,.05); border-left-color: var(--ptcg-accent); }
.ptcg-app .ptcg-gen { background: linear-gradient(135deg, rgba(10,20,45,.85), rgba(30,10,60,.6)); border-color: var(--ptcg-line); }
.ptcg-app .ptcg-gen__help { background: var(--ptcg-surface-2); border-color: var(--ptcg-line); }

/* ---- Pagination. */
.ptcg-app .ptcg-pagination a, .ptcg-app .ptcg-pagination span { border-color: var(--ptcg-line); color: var(--ptcg-ink); }
.ptcg-app .ptcg-pagination a:hover { border-color: var(--ptcg-accent); color: var(--ptcg-accent); box-shadow: 0 0 14px rgba(0,212,255,.16); }
.ptcg-app .ptcg-pagination .current { background: var(--ptcg-gradient); color: #041018; border-color: transparent; }

/* ---- Tables (compare + set breakdowns). */
.ptcg-app .ptcg-cmp__scroll { border-color: var(--ptcg-line); }
.ptcg-app .ptcg-cmp__table thead th { background: #0a1430; border-bottom: 1px solid var(--ptcg-line); color: var(--ptcg-muted); }
.ptcg-app .ptcg-cmp__table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
.ptcg-app .ptcg-cmp__table tbody th, .ptcg-app .ptcg-cmp__table tbody td { border-bottom-color: var(--ptcg-line-2); color: var(--ptcg-ink); }
.ptcg-app .ptcg-cmp__table tbody tr:hover td { background: rgba(0,212,255,.07); }
.ptcg-app .ptcg-cmp__option { border-bottom-color: var(--ptcg-line-2); color: var(--ptcg-ink); }
.ptcg-app .ptcg-cmp__option:hover, .ptcg-app .ptcg-cmp__option.is-active { background: rgba(0,212,255,.07); }

/* ---- Specs / dividers / FAQ open state. */
.ptcg-app .ptcg-specs li { border-bottom-color: var(--ptcg-line-2); }
.ptcg-app .ptcg-faq details[open] { border-color: var(--ptcg-accent); }

/* =============================================================================
 * Homepage (.ptcg-home) — re-skin the Phase 25 panels to the dark theme.
 * ============================================================================= */
.ptcg-home {
	background:
		radial-gradient(1100px 460px at 82% -6%, rgba(0,120,220,.18), transparent 60%),
		radial-gradient(900px 420px at -4% 2%, rgba(120,0,200,.14), transparent 55%),
		linear-gradient(180deg, #050b1a 0%, #060d1e 40%, #040810 100%);
}
.ptcg-home .ptcg-hero {
	border-color: var(--ptcg-line);
	background:
		radial-gradient(560px 300px at 90% 8%, rgba(168,85,247,.16), transparent 60%),
		radial-gradient(560px 320px at 6% 112%, rgba(0,212,255,.16), transparent 60%),
		linear-gradient(135deg, #071633 0%, #0a1030 55%, #170a34 100%);
	box-shadow: var(--sh-2);
}
/* Gradient hero headline for a premium neon feel (with a safe solid fallback). */
.ptcg-home .ptcg-hero__title { color: var(--ptcg-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ptcg-home .ptcg-hero__title {
		background: linear-gradient(120deg, #ffffff 0%, #00d4ff 45%, #a855f7 85%, #ffffff 100%);
		-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
	}
}
.ptcg-home .ptcg-hero__intro { color: var(--ptcg-ink-2); }
.ptcg-home .ptcg-hub { background: linear-gradient(180deg, rgba(12,22,48,.9), rgba(8,16,38,.9)); }
.ptcg-home .ptcg-hub::after { color: var(--ptcg-accent); }
.ptcg-home .ptcg-stats { background: linear-gradient(135deg, rgba(10,20,45,.85), rgba(30,10,60,.55)); border-color: var(--ptcg-line); }
.ptcg-home .ptcg-stat { background: rgba(0,0,0,.28); border-color: var(--ptcg-line); }
.ptcg-home .ptcg-flist a { background: rgba(255,255,255,.04); }
.ptcg-home [aria-labelledby="ptcg-home-compare"] .ptcg-flist a { background: linear-gradient(135deg, rgba(0,60,120,.35), rgba(40,10,90,.4)); }
.ptcg-home .ptcg-eeat--about { background: linear-gradient(180deg, rgba(10,20,45,.8), rgba(8,14,34,.85)); }
.ptcg-home .ptcg-faq details { background: var(--ptcg-surface); }
.ptcg-home .ptcg-faq summary::after { border-color: var(--ptcg-accent); }
/* Section-heading accent bars: swap the two darkest palette colours for neon so
 * each section still reads clearly on the dark canvas. */
.ptcg-home [aria-labelledby="ptcg-home-browse"] > h2::before { background: #00d4ff; }
.ptcg-home [aria-labelledby="ptcg-home-compare"] > h2::before { background: #a855f7; }

/* =============================================================================
 * HEADER — centered, professional  +  STRONGER hover on every clickable tab.
 * Colour / alignment / glow only. No layout, structure or functional change.
 * ============================================================================= */

/* ---- Entity-page header band: centered. */
.ptcg-app .ptcg-head { text-align: center; }
.ptcg-app .ptcg-head .ptcg-set__logo { margin-left: auto; margin-right: auto; }
.ptcg-app .ptcg-head h1 { text-align: center; }

/* ---- Homepage hero: centered and balanced. */
.ptcg-home .ptcg-hero { text-align: center; }
.ptcg-home .ptcg-hero__title { margin-left: auto; margin-right: auto; }
.ptcg-home .ptcg-hero__title::before { margin-left: auto; margin-right: auto; }
.ptcg-home .ptcg-hero__intro { margin-left: auto; margin-right: auto; }
.ptcg-home .ptcg-hero .ptcg-searchwrap { margin-left: auto; margin-right: auto; }
.ptcg-home .ptcg-hero .ptcg-search { margin-left: auto; margin-right: auto; }
.ptcg-home .ptcg-hero__cta { text-align: center; }

/* ---- STRONGER hover: any tab / pill / facet link lights up clearly. */
.ptcg-app .ptcg-flist a:hover {
	background: rgba(0,212,255,.2);
	border-color: var(--ptcg-accent);
	color: #eaffff;
	box-shadow: 0 0 22px rgba(0,212,255,.4);
	transform: translateY(-2px);
}
.ptcg-app .ptcg-flist a.is-active {
	background: rgba(0,212,255,.22);
	border-color: var(--ptcg-accent);
	color: #eaffff;
	box-shadow: 0 0 18px rgba(0,212,255,.3);
}

/* Nav-style "browse all / view all" links also glow on hover. */
.ptcg-app .ptcg-home__more a:hover,
.ptcg-app .ptcg-breadcrumbs a:hover { color: var(--ptcg-accent); text-shadow: 0 0 12px rgba(0,212,255,.5); }

/* Cards / navigation panels: stronger cyan rim + lift. */
.ptcg-app .ptcg-hub:hover,
.ptcg-app .ptcg-setcard:hover,
.ptcg-app .ptcg-card:hover {
	border-color: var(--ptcg-accent);
	box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 26px rgba(0,212,255,.28);
	transform: translateY(-4px);
}

/* Buttons, action chips, language switch, pagination, compare rows/options. */
.ptcg-app .ptcg-act:hover,
.ptcg-app .ptcg-langswitch a:hover,
.ptcg-app .ptcg-pagination a:hover {
	background: rgba(0,212,255,.14);
	border-color: var(--ptcg-accent);
	color: #eaffff;
	box-shadow: 0 0 18px rgba(0,212,255,.32);
}
.ptcg-app .ptcg-search__item:hover,
.ptcg-app .ptcg-cmp__option:hover,
.ptcg-app .ptcg-cmp__table tbody tr:hover td { background: rgba(0,212,255,.14); color: #eaffff; }
.ptcg-app .ptcg-cta:hover { box-shadow: 0 8px 34px rgba(0,212,255,.55), 0 0 0 1px rgba(0,212,255,.5); }
.ptcg-app .ptcg-search__btn:hover { box-shadow: 0 8px 34px rgba(0,212,255,.55); }

/* =============================================================================
 * HERO 3D  +  CARD THUMBNAILS  +  THEME TOGGLE  +  EXTRA-STRONG HOVER
 * ============================================================================= */

/* ---- Hero: two columns when a real card image is present. */
.ptcg-home .ptcg-hero--media { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: center; text-align: left; }
@media (min-width: 860px) { .ptcg-home .ptcg-hero--media { grid-template-columns: 1.25fr .75fr; } }
.ptcg-home .ptcg-hero--media .ptcg-hero__content { text-align: left; }
.ptcg-home .ptcg-hero--media .ptcg-hero__title,
.ptcg-home .ptcg-hero--media .ptcg-hero__intro,
.ptcg-home .ptcg-hero--media .ptcg-searchwrap,
.ptcg-home .ptcg-hero--media .ptcg-search { margin-left: 0; margin-right: 0; }
.ptcg-home .ptcg-hero--media .ptcg-hero__title::before { margin-left: 0; margin-right: 0; }
.ptcg-home .ptcg-hero--media .ptcg-hero__cta { text-align: left; }

/* Floating, gently tilting 3D card. */
.ptcg-hero__media { display: flex; justify-content: center; perspective: 1000px; }
.ptcg-hero__card { display: inline-block; border-radius: var(--r-lg); transform-style: preserve-3d; animation: ptcg-float 6s ease-in-out infinite; will-change: transform; }
.ptcg-hero__card img { display: block; width: min(260px, 68vw); aspect-ratio: 63 / 88; height: auto; object-fit: contain; border-radius: var(--r-lg); box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 44px rgba(0,212,255,.28); }
.ptcg-hero__card:hover { animation-play-state: paused; }
@keyframes ptcg-float {
	0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(-9deg); }
	50%      { transform: translateY(-14px) rotateX(5deg) rotateY(9deg); }
}

/* Subtle 3D motion on the main heading. */
.ptcg-home .ptcg-hero__title { transform-style: preserve-3d; animation: ptcg-title3d 7s ease-in-out infinite; }
@keyframes ptcg-title3d {
	0%, 100% { transform: perspective(700px) rotateX(0deg) translateY(0); }
	50%      { transform: perspective(700px) rotateX(6deg) translateY(-4px); }
}

/* ---- Card-thumbnail sections (Featured Pokémon, Recently updated). */
.ptcg-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 480px) { .ptcg-thumbs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .ptcg-thumbs { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
@media (min-width: 1000px) { .ptcg-thumbs { grid-template-columns: repeat(6, 1fr); } }
.ptcg-thumb {
	display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
	text-decoration: none; color: var(--ptcg-ink);
	background: var(--ptcg-surface); border: 1px solid var(--ptcg-line); border-radius: var(--r-md);
	padding: var(--sp-3); box-shadow: var(--sh-1);
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ptcg-thumb__img { position: relative; width: 100%; aspect-ratio: 63 / 88; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); overflow: hidden; background: radial-gradient(circle at 50% 35%, #0b1730, #060d1e); }
.ptcg-thumb__img img { width: 100%; height: 100%; object-fit: contain; }
.ptcg-thumb__ph { font-size: 1.7rem; font-weight: 800; color: var(--ptcg-accent); }
.ptcg-thumb__name { font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.25; }
.ptcg-thumb__count { font-size: var(--fs-xs); color: var(--ptcg-muted); }
.ptcg-thumb:hover { transform: translateY(-5px) scale(1.03); border-color: var(--ptcg-accent); box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 24px rgba(0,212,255,.28); }
.ptcg-thumb:hover .ptcg-thumb__name { color: var(--ptcg-accent); }

/* ---- Theme toggle button (injected by JS; fixed, always reachable). */
.ptcg-app .ptcg-theme-toggle {
	position: fixed; bottom: 22px; right: 22px; z-index: 9999;
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--ptcg-line); background: var(--ptcg-gradient); color: #04121e;
	font-size: 1.25rem; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 20px rgba(0,212,255,.35);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ptcg-app .ptcg-theme-toggle:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 30px rgba(0,212,255,.5); }

/* ---- EXTRA-STRONG hover: tabs clearly light up AND move a little. */
.ptcg-app .ptcg-flist a { transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.ptcg-app .ptcg-flist a:hover { transform: translateY(-3px) scale(1.05) rotate(-.6deg); box-shadow: 0 0 24px rgba(0,212,255,.45); }
.ptcg-app .ptcg-hub:hover,
.ptcg-app .ptcg-setcard:hover { transform: translateY(-6px) scale(1.02); }

/* =============================================================================
 * LIGHT THEME — activated when JS adds .ptcg-theme-light (toggle).
 * Re-flips the tokens and repaints the few hardcoded-dark surfaces, so no text
 * is ever invisible in light mode either.
 * ============================================================================= */
.ptcg-app.ptcg-theme-light {
	--ptcg-accent: #0a95bd;
	--ptcg-accent-2: #7c3aed;
	--ptcg-gradient: linear-gradient(135deg, #0aa2c7, #7c3aed);
	--ptcg-bg: #eef2f9;
	--ptcg-surface: #ffffff;
	--ptcg-surface-2: #f2f5fc;
	--ptcg-ink: #0f1830;
	--ptcg-ink-2: #33415c;
	--ptcg-muted: #5b6883;
	--ptcg-line: rgba(10,90,140,.18);
	--ptcg-line-2: #e6ebf3;
	--ptcg-focus: rgba(10,120,200,.5);
	--sh-1: 0 1px 2px rgba(16,24,48,.06), 0 4px 16px rgba(16,24,48,.06);
	--sh-2: 0 10px 30px rgba(16,24,48,.12);
	--sh-3: 0 20px 50px rgba(16,24,48,.14);
	background:
		radial-gradient(1000px 420px at 85% -6%, rgba(10,160,200,.12), transparent 60%),
		radial-gradient(900px 400px at -4% 2%, rgba(124,58,237,.10), transparent 55%),
		linear-gradient(180deg, #eef2f9 0%, #ffffff 30%);
}
/* Header band + its text. */
.ptcg-theme-light .ptcg-head { background: linear-gradient(135deg, #e6f4ff 0%, #eef0ff 55%, #f6ecff 100%); box-shadow: var(--sh-2); }
.ptcg-theme-light .ptcg-head h1 { color: #0f1830; -webkit-text-fill-color: #0f1830; }
.ptcg-theme-light .ptcg-count { background: rgba(10,90,140,.1); border-color: rgba(10,90,140,.2); color: #0f1830; }
/* Image plates → light. */
.ptcg-theme-light .ptcg-card__img,
.ptcg-theme-light .ptcg-thumb__img { background: radial-gradient(circle at 50% 35%, #f7f9ff, #eef1f8); }
.ptcg-theme-light .ptcg-search__item img { background: #eef1f8; }
/* Pills / chips / list links → light surfaces with dark text. */
.ptcg-theme-light .ptcg-flist a { background: #fff; border-color: var(--ptcg-line); color: var(--ptcg-ink); }
.ptcg-theme-light .ptcg-flist a:hover,
.ptcg-theme-light .ptcg-flist a.is-active { background: rgba(10,160,200,.12); color: #06485c; border-color: var(--ptcg-accent); box-shadow: 0 0 18px rgba(10,160,200,.25); }
.ptcg-theme-light .ptcg-chip,
.ptcg-theme-light .ptcg-flist a .n { background: rgba(10,160,200,.12); color: #06576e; }
/* Hover text that was near-white in dark → dark in light. */
.ptcg-theme-light .ptcg-search__item:hover,
.ptcg-theme-light .ptcg-cmp__option:hover,
.ptcg-theme-light .ptcg-cmp__table tbody tr:hover td,
.ptcg-theme-light .ptcg-act:hover,
.ptcg-theme-light .ptcg-langswitch a:hover,
.ptcg-theme-light .ptcg-pagination a:hover { background: rgba(10,160,200,.12); color: #06485c; }
/* Info-ish surfaces. */
.ptcg-theme-light .ptcg-price { background: linear-gradient(135deg, #f5f7ff, #eef0ff); border-color: #e0e4ff; }
.ptcg-theme-light .ptcg-gen { background: linear-gradient(135deg, #f7f8ff, #f1f0fb); border-color: #e6e8fb; }
.ptcg-theme-light .ptcg-cmp__table thead th { background: #eef2fb; color: var(--ptcg-muted); }
.ptcg-theme-light .ptcg-disclaimer,
.ptcg-theme-light .ptcg-eeat__note,
.ptcg-theme-light .ptcg-intro__meta { color: var(--ptcg-muted); }
/* Homepage panels → light. */
.ptcg-theme-light.ptcg-home {
	background:
		radial-gradient(1100px 460px at 82% -6%, rgba(10,160,200,.12), transparent 60%),
		radial-gradient(900px 420px at -4% 2%, rgba(124,58,237,.10), transparent 55%),
		linear-gradient(180deg, #eef2f9 0%, #ffffff 28%);
}
.ptcg-theme-light .ptcg-hero { background: linear-gradient(135deg, #e9f5ff 0%, #eef0ff 55%, #f9edff 100%); border-color: var(--ptcg-line); box-shadow: var(--sh-2); }
.ptcg-theme-light .ptcg-hero__intro { color: var(--ptcg-ink-2); }
.ptcg-theme-light .ptcg-hero__title { background: linear-gradient(120deg, #0a95bd, #7c3aed); }
.ptcg-theme-light .ptcg-hub { background: linear-gradient(180deg, #ffffff, #f6f8ff); }
.ptcg-theme-light .ptcg-stats { background: linear-gradient(135deg, #ffffff, #f4f2fd); border-color: var(--ptcg-line); }
.ptcg-theme-light .ptcg-stat { background: #fff; }
.ptcg-theme-light [aria-labelledby="ptcg-home-compare"] .ptcg-flist a { background: linear-gradient(135deg, #eef6ff, #f3ecff); }
.ptcg-theme-light .ptcg-eeat--about { background: linear-gradient(180deg, #ffffff, #f7f8ff); }
.ptcg-theme-light .ptcg-thumb__img { background: radial-gradient(circle at 50% 35%, #f7f9ff, #eef1f8); }
.ptcg-theme-light .ptcg-hero__card img { box-shadow: 0 20px 46px rgba(16,24,48,.22), 0 0 30px rgba(10,160,200,.18); }

/* =============================================================================
 * BUGFIXES
 * ============================================================================= */

/* FIX 1 — Hero title was rendering as a solid gradient block (invisible text),
 * especially in light mode where a later `background` shorthand reset the text
 * clipping. Use a solid, always-visible colour that flips with the theme. */
.ptcg-home .ptcg-hero__title {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--ptcg-ink);
	text-shadow: 0 0 20px rgba(0,212,255,.22);
}
.ptcg-app.ptcg-theme-light .ptcg-hero__title { color: var(--ptcg-ink); text-shadow: none; }

/* FIX 2 — Search / compare autocomplete dropdowns were translucent (content
 * behind bled through) and sat too low. Make them fully opaque and on top. */
.ptcg-app .ptcg-search { position: relative; z-index: 100; }
.ptcg-app .ptcg-search__results,
.ptcg-app .ptcg-cmp__results {
	background: #0a1430;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	z-index: 400;
	box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.ptcg-app.ptcg-theme-light .ptcg-search__results,
.ptcg-app.ptcg-theme-light .ptcg-cmp__results {
	background: #ffffff;
	border-color: var(--ptcg-line);
	box-shadow: 0 18px 50px rgba(16,24,48,.18);
}
.ptcg-app .ptcg-cmp__slot { position: relative; z-index: 5; }