.page-content {
    margin: 0 auto;
}

.page-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    background: var(--colour-paper);
    color: var(--colour-text);
    font-family: var(--font-header);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-md);
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow:
        0 2px 1px -1px var(--shadow-key-umbra),
        0 1px 1px 0    var(--shadow-key-penumbra),
        0 1px 3px 0    var(--shadow-key-ambient);
    margin: 0 0 var(--space-40);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.page-back:hover {
    color: var(--colour-secondary);
    transform: translateX(-2px);
    box-shadow:
        0 4px 6px -2px var(--shadow-key-umbra),
        0 2px 4px 0    var(--shadow-key-penumbra),
        0 2px 6px 0    var(--shadow-key-ambient);
}

.page-back:focus-visible {
    outline: 2px solid var(--colour-secondary);
    outline-offset: 2px;
}

.page-back-icon {
    display: block;
    transition: transform 0.2s ease;
}

.page-back:hover .page-back-icon {
    transform: translateX(-2px);
}

.exp-container{
    margin: var(--space-40) 0px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr);
    /* Row 1: logo (col 1, spans rows 1-2) | name/meta | progression
       Row 2: logo (continued)             | pricing   | search

       Logo fills column 1 across both rows; pricing sits directly
       under name/meta in col 2; search keeps its (2,3) corner under
       progression. */
    grid-template-rows: auto auto;
    grid-template-areas:
        "logo  name     progression"
        "logo  pricing  search";
    column-gap: var(--space-16);
    row-gap: var(--space-8);
    align-items: start;
}

a.exp-page-logo  { grid-area: 1 / 1 / 3 / 2; }
.exp-name        { grid-area: name; }
.exp-progression { grid-area: progression; }
.exp-pricing     { grid-area: pricing; }
.exp-search      { grid-area: search; }

/* .exp-info is a stub for a future checklist; hide it so it doesn't
   reserve grid space or perturb autoflow. */
.exp-info { display: none; }

a.exp-page-logo{
    text-decoration: none;
    color: inherit;
    width: 100%;
    /* Span both grid rows (set via grid-area 1/1/3/2 above) AND fill
       that spanned height — align-items:start on .exp-container would
       otherwise let the logo shrink to its image's natural size and
       sit at the top of column 1. align-self: stretch overrides that
       so the logo is the full (row1 + row-gap + row2) height. */
    height: 100%;
    align-self: stretch;
    display: grid;
    place-items: center;
    background-color: var(--colour-popup-bg);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 20px 30px rgba(0,0,0,0.15),
        0 8px 10px rgba(0,0,0,0.10);
    padding: var(--space-16);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

[data-theme="light"] a.exp-page-logo,
:root:not([data-theme="dark"]) a.exp-page-logo {
    border-color: rgba(0, 0, 0, 0.06);
}

/* Banner background behind logo */
.exp-logo-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.exp-logo-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: blur(1.75px);
}

/* Ensure logo stays on top of banner */
.exp-page-logo > picture:not(.exp-logo-banner) {
    position: relative;
    z-index: 2;
}

/* Logo image styling (not the banner). Scales up to the container
   while preserving aspect ratio. width:100% means landscape logos
   fill the card width; max-height keeps tall logos from running
   past the bottom of the card. */
.exp-page-logo > picture:not(.exp-logo-banner) img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

.exp-logo img{
    
	width: 100%;
}

.exp-checklist{
    justify-content: baseline;
}

.exp-checklist-title{
    font-size: 20px;
    margin: 5px 0;
}

.item-name {
    font-size: var(--text-sm);
    margin: 0;
}

/* ── Expansion page progression panel ──
   Unified card-style container (rgba bg + 1px border + 10px radius)
   so it matches .exp-name and .exp-pricing in the same header. */
.exp-progression {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow:
    0 2px 1px -1px var(--shadow-key-umbra),
    0 1px 1px 0    var(--shadow-key-penumbra),
    0 1px 3px 0    var(--shadow-key-ambient);
  width: 100%;
  min-width: 240px;
  max-width: 480px;
  box-sizing: border-box;
  justify-self: end;
}

.exp-progression-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.exp-progression-label {
  font-family: var(--font-header);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-md);
  color: var(--colour-text);
  display: flex;
  justify-content: space-between;
}

.exp-progression-label span {
  color: var(--colour-text-muted);
  font-weight: var(--font-weight-sm);
}

.exp-progression-track {
  position: relative;
  width: 100%;
  height: 18px;
  background: var(--bar-track);
  border-radius: 9px;
  overflow: hidden;
}

.exp-progression-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s ease;
}

.exp-progression-fill--base   { background: var(--colour-chart-1); }
.exp-progression-fill--master { background: var(--colour-chart-2); }
.exp-progression-fill--grand  { background: var(--colour-chart-3); }

.exp-progression-track:has(.exp-progression-fill--base) {
  background: color-mix(in srgb, var(--colour-chart-1) 50%, transparent);
}
.exp-progression-track:has(.exp-progression-fill--master) {
  background: color-mix(in srgb, var(--colour-chart-2) 50%, transparent);
}
.exp-progression-track:has(.exp-progression-fill--grand) {
  background: color-mix(in srgb, var(--colour-chart-3) 50%, transparent);
}

.exp-progression-legend {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.exp-progression-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-paragraph);
  font-size: 11px;
  color: var(--colour-text-muted);
}

.exp-progression-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}


@media (max-width: 900px) {
  .exp-progression {
    min-width: 0;
    max-width: none;
    width: 100%;
    padding: var(--space-12) var(--space-16);
  }
}

/* === Mobile stack: collapse the 3-col grid to a single-column flow.
   Below 768px the third column gets crushed to ~30px and the progression
   labels truncate ("Bas…", "Mas…", "Gra…"). Switch to a flex column so
   each block gets full width. === */
@media (max-width: 767px) {
  .exp-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    grid-template-columns: none;
    grid-template-rows: none;
    margin: var(--space-16) 0;
  }

  /* Banner/logo: keep its branded look but fill the row width. */
  a.exp-page-logo {
    width: 100%;
    max-width: 100%;
    height: clamp(140px, 38vw, 200px);
    padding: var(--space-12);
  }
  .exp-page-logo > picture:not(.exp-logo-banner) img {
    max-width: 220px;
    max-height: 120px;
  }

  /* Source-order matters when grid-area is overridden — make the search
     sit AFTER the progression on mobile rather than in some auto slot. */
  .exp-search {
    grid-area: auto;
    align-items: stretch;
    width: 100%;
  }
  .exp-search-label {
    text-align: left;
  }
  .exp-search-field {
    width: 100%;
  }

  /* Pricing block: drop grid placement, fill row width, follow source
     order alongside the other stacked blocks. */
  .exp-pricing {
    grid-area: auto;
    width: 100%;
  }
}

/* Progression labels must never truncate, regardless of viewport. */
.exp-progression-label {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  min-width: 0;
}
.exp-progression-label span {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .exp-progression-fill {
    transition: none;
  }
}

.exp-name{
    /* Styled-card container matching the pricing strip — rgba bg,
       1px hairline border, 10px radius, breathing-room padding.
       Capped to 480px and centred horizontally in column 2 so the
       middle column visually aligns with the progression/search
       column-3 blocks (which are also 480px max). */
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--space-8);
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

[data-theme="light"] .exp-name,
:root:not([data-theme="dark"]) .exp-name {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

.exp-name-header{
    display: flex;
    align-items: center;
}

.exp-name-header img{
    height: 36px;
    margin-left: 10px;
}

.exp-name-header p{
    line-height: 30px;
    margin: 0;
}

.exp-rd p{
    font-size: var(--text-xs);
    color: var(--colour-text);
    margin: 0;
}

.exp-nocards p{
    font-size: var(--text-xs);
    margin: 0;
    color: var(--colour-text);
}

.exp-search{
    /* grid-area set via grid-template-areas on .exp-container.
       .exp-progression has a hard max-width: 480px + justify-self: end
       (line ~181) — without matching constraints here, the search
       expands to the full grid cell while progression stays capped at
       480px, breaking width parity. Mirror those constraints exactly. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    max-width: 480px;
    justify-self: end;
    box-sizing: border-box;
}

/* ── Phase 5: Expansion-header pricing block ────────────────────────
   grid-area is set on .exp-container via grid-template-areas. The
   block sits directly under .exp-name in column 2, snug against it
   thanks to the small row-gap. Capped at 480px and centred to match
   the .exp-name block above it. */
.exp-pricing {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    max-width: 480px;
    justify-self: center;
}

[data-theme="light"] .exp-pricing,
:root:not([data-theme="dark"]) .exp-pricing {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

.exp-pricing__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Allow the cell to shrink past its nowrap content if the grid
       column can't accommodate. Without this, the three cells'
       intrinsic widths sum could push col 2 wider than col 3, breaking
       the search ↔ progression width parity. */
    flex: 1 1 0;
    overflow: hidden;
}

.exp-pricing__value,
.exp-pricing__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-pricing__label {
    font-family: var(--font-header);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colour-text-muted);
    white-space: nowrap;
}

.exp-pricing__value {
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--font-weight-md);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.exp-pricing__value--muted { color: var(--colour-text-muted); }
.exp-pricing__value--gold  { color: var(--colour-pricing-gold); }
.exp-pricing__value--up    { color: var(--colour-trend-positive); }
.exp-pricing__value--down  { color: var(--colour-trend-negative); }

.exp-search-label{
    font-size: var(--text-xs);
    font-weight: var(--font-weight-md);
    color: var(--colour-text);
}

.exp-search-field{
    position: relative;
    /* Fill the column so the input matches the progression panel
       width above it (was previously capped at 360px). */
    width: 100%;
}

.exp-search-input{
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-xs);
    background: var(--colour-paper);
    color: var(--colour-text);
    font-family: var(--font-paragraph);
    font-size: var(--text-sm);
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.exp-search-input:hover{
    border-color: var(--colour-secondary);
}

.exp-search-input:focus-visible{
    background-color: var(--colour-popup-paper);
    border-color: var(--colour-secondary);
    outline: 3px solid var(--colour-secondary);
    outline-offset: 0;
}

.exp-search-icon{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--colour-secondary);
    pointer-events: none;
}

.exp-search-input::placeholder{
    color: var(--colour-text-muted);
}

@media (max-width: 480px) {
    .exp-search{
        align-items: stretch;
    }

    .exp-search-label{
        text-align: left;
    }

    .exp-search-field{
        width: 100%;
    }
}

.card-info{
	    margin-top: var(--space-12);
		height: 100px;
	    background: var(--colour-paper);
	    border-radius: var(--radius-sm);
	    padding: 4px;
	    position: relative;
	    z-index: 2;
	    box-shadow:
	    0 20px 30px rgba(0,0,0,0.15),
	    0 8px 10px rgba(0,0,0,0.10);
}

.card-tracking{
	position: relative;
	z-index: 1;
}

.card-tracking.dropdown-open{
	z-index: 20;
}

.card-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(auto-fill, var(--card-width-sm));
	gap: var(--space-32);
	justify-content: center;
}

.card {
		width: var(--card-width-sm);
		height: var(--card-hight-sm);
		overflow: hidden;
		border-radius: var(--radius-sm);
		cursor: pointer;
		position: relative;
		z-index: 1;
		box-shadow:
	    0 20px 30px rgba(0,0,0,0.15),
	    0 8px 10px rgba(0,0,0,0.10);
		transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(150, 150, 150, 0.40);
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.card-unowned .card {
	filter: grayscale(20%);
}

.card-unowned .card::after {
	opacity: 1;
}

/* User opt-out: when <html> carries .no-dim-unowned the dim treatment is
   suppressed (toggled in settings → Appearance, mirrored to the
   dim_unowned_pref cookie by the front controller, applied pre-paint
   by /js/shared/dimUnowned.js). */
html.no-dim-unowned .card-unowned .card {
	filter: none;
}

html.no-dim-unowned .card-unowned .card::after {
	opacity: 0;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 24px 38px rgba(0, 0, 0, 0.20),
		0 12px 16px rgba(0, 0, 0, 0.14);
}
.card img{
	width: calc(var(--card-width-sm) + 2px);
	height: auto;
	position: relative;
	top: -1px;
	left: -1px;
}

.card img.is-placeholder-image {
	filter: grayscale(0.72) saturate(0.72) brightness(0.84) contrast(0.95);
	opacity: 0.9;
}

.card-tracking-info{
	padding: 0px 0px var(--space-4) 0px;
	height: 45px;
    display: flex;
    flex-direction: row;
	position: relative;
}
.card-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	width: 100%;
}

.card-name {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.18em;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	font-weight: var(--font-weight-bold);
	line-height: 1.18;
	padding-bottom: 3px;
	overflow: visible;
}

.card-name:has(.card-name-part--annotation) {
	padding-right: 34px;
	box-sizing: border-box;
}

.card-name-part {
	display: inline-block;
	min-width: 0;
	line-height: inherit;
	vertical-align: baseline;
}

.card-name-part--normal {
	flex: 0 0 auto;
	white-space: nowrap;
}

.card-name-part.name-symbol--ex-era {
	color: inherit;
	font-family: Arial, Helvetica, var(--font-main, sans-serif);
	font-size: inherit;
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	letter-spacing: 0;
	padding-left: 0.08em;
	transform: skewX(-7deg) scaleX(0.9);
	transform-origin: left center;
	text-shadow: 0.018em 0 currentColor;
}

.card-name-part--small {
	font-size: 0.72em;
	font-weight: var(--font-weight-bold);
	line-height: inherit;
	align-self: baseline;
}

.card-name-part--small:has(+ .name-symbol--lv-x) {
	font-size: 0.52em;
}

.card-name-part--annotation {
	font-size: 0.72em;
	font-style: italic;
	font-weight: var(--font-weight-bold);
	line-height: inherit;
	align-self: baseline;
	flex: 0 1 auto;
	margin-left: auto;
	padding-left: 0.35em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-name-part--symbol {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	max-width: 32px;
	overflow: hidden;
}

.card-name-part--symbol img {
	display: block;
	width: auto;
	height: 0.96em;
	max-width: 100%;
	max-height: 17px;
	object-fit: contain;
}

.card-name-part--symbol.name-symbol--mega img,
.card-name-part--symbol.name-symbol--primal img {
	height: 1.06em;
}

.card-name-part--symbol.name-symbol--lv-x {
	max-width: none;
	overflow: visible;
	color: #b88916;
	font-family: "Arial Black", Arial, var(--font-main, sans-serif);
	font-size: 1.16em;
	font-weight: 900;
	font-style: normal;
	line-height: 1;
	padding: 0 0.03em 0.05em;
	text-shadow: none;
	transform: skewX(-5deg) scaleX(1.04);
	transform-origin: center;
	-webkit-text-stroke: 0;
}

.card-number{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* Rarity icon now lives INSIDE .card-number (right after the number
   text) — populated at runtime by cardPopup.js / updateCardGridRarityIcon,
   which writes a composite of <span class="rarity-symbol"> + image into
   the .card-rarety wrapper. Override the absolute-positioned defaults
   (kept lower in this stylesheet) so it sits inline at a card-number-
   appropriate size. */
.card-number .card-rarety,
.card-number .card-rarity{
    position: static;
    top: auto;
    right: auto;
    min-width: 0;
    flex: 0 0 auto;
    align-self: center;
    margin-left: 0;
}
.card-number .card-rarety img,
.card-number .card-rarity img{
    width: 18px;
    height: 18px;
}
.card-number .card-rarety .rarity-composite,
.card-number .card-rarity .rarity-composite{
    --rarity-icon-size: 18px;
}
/* Empty wrapper (JS hasn't rendered yet, or this card has no rarity)
   collapses to zero so the row doesn't have a phantom gap. */
.card-number .card-rarety:empty,
.card-number .card-rarity:empty{
    display: none;
}

.card-expansion-image{
    width: 30px;
}

/* Phase 4 — tile price + 7d delta. Positioned absolutely at the
   bottom-right of .card-tracking-info so it sits directly above the
   variant-icons fan in the .card-tracking-container row below. The
   number/rarity row keeps its natural left-aligned flow; price
   floats clear of it. */
.card-price-group{
    position: absolute;
    right: 8px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: var(--font-weight-md);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.card-price{
    /* Inherit font-size from .card-price-group → .card-number so the
       price reads at exactly the same scale as the "001/088" number. */
    color: var(--colour-text);
}

.card-price-delta{
    /* One step smaller than the price so the delta reads as a
       secondary indicator. */
    font-size: 0.85em;
    font-weight: var(--font-weight-md);
}

.card-price-delta.is-up{
    color: var(--colour-trend-positive);
}

.card-price-delta.is-down{
    color: var(--colour-trend-negative);
}

/* Sparkline is off by default (pricing_tile_sparklines preference).
   When enabled, paints in trend colour via currentColor on the path. */
.card-price-sparkline{
    width: 48px;
    height: 16px;
    overflow: visible;
}

.card-price-sparkline.is-up{
    color: var(--colour-trend-positive);
}

.card-price-sparkline.is-down{
    color: var(--colour-trend-negative);
}

.card-rarety,
.card-rarity{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 13px;
    right: 0;
    margin-left: 0;
    min-width: 34px;
    flex: 0 0 34px;
}

.card-rarety img,
.card-rarity img{
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

[data-theme="dark"] .card-rarety img:not(.rarity-symbol-image),
[data-theme="dark"] .card-rarity img:not(.rarity-symbol-image){
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.55))
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}

.card-rarety .rarity-composite,
.card-rarity .rarity-composite{
    --rarity-icon-size: 32px;
}

.card-rarety .rarity-composite--long,
.card-rarity .rarity-composite--long{
    --rarity-suffix-size: calc(var(--rarity-icon-size) * 0.48);
}

.card-tracking-container{
    display: grid;
    grid-template-columns: 69.5px 139px 69.5px;
	height: 50px;
	align-items: center;
}

.popup-icon img{
	height: 30px;
}

.card-counter{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
}

.card-counter button{
	height: auto;
	width: auto;
	padding: 0;
	border: none;
	background: none;
	color: var(--colour-secondary); /*Colour of the -/+*/
    cursor: pointer;
	transition: color 0.3s ease, opacity 0.3s ease;
	/* Expand touch target without affecting layout */
	position: relative;
}

.card-counter button .fa-solid {
	-webkit-text-stroke: 1.5px currentColor;
}

/* Expanded touch target via pseudo-element */
.card-counter button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 8px;
}

.card-counter button:focus-visible {
	outline: 2px solid var(--colour-primary);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Disabled state styles */
.card-counter button:disabled,
.card-counter button.disabled {
  color: var(--colour-text-muted);       /* Gray out the icons/text */
  cursor: not-allowed;  /* Show disabled cursor */
  opacity: 0.5;         /* Slightly transparent */
  pointer-events: none; /* Prevent clicks */
}

.card-count{
    text-align: center;
    line-height: 14px;
    font-size: 30px;
}

.card-type-container{
	right: 0px;
	position: relative;
	align-items: right;
}

/* ========================================
   VARIANT FAN BUTTON
   ======================================== */

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Button — must fit within the 69.5px grid column */
.dropbtn {
    border: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    color: var(--colour-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 44px;
    width: 69.5px;
    border-radius: 6px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.dropbtn:focus-visible {
    outline: 2px solid var(--colour-primary);
    outline-offset: 2px;
}

/* Completion state: gold stroke on each card (not the button box) */
.dropbtn.variant-complete .icon.fan-owned .cls-1 {
    stroke: var(--fan-complete-glow);
    stroke-width: 14px;
}

/* Fan container — constrained to button width */
.variant-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size);
    gap: 0;
    width: 69.5px;
}

/* Individual fan card */
.variant-icons .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: 34px;
    margin-left: var(--overlap);
    position: relative;
    z-index: 1;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform;
    pointer-events: auto;
}

/* First fan card has no negative margin */
.variant-icons .icon:first-child {
    margin-left: 0;
}

/* Middle card gets highest z-index */
.variant-icons .icon.middle {
    z-index: 5;
}
.variant-icons .icon.left,
.variant-icons .icon.right {
    z-index: 3;
}
.variant-icons .icon.far-left,
.variant-icons .icon.far-right {
    z-index: 1;
}

/* SVG scaling */
.variant-icons svg {
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
}

/* --- Fan card ownership states --- */

/* Unowned: gray + muted */
.icon.fan-unowned .cls-1 {
    fill: var(--fan-gray);
    stroke: var(--fan-gray-stroke);
    opacity: 0.6;
    transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
}

/* Owned: uses the variant's dropdown colour via --fan-color */
.icon.fan-owned .cls-1 {
    fill: var(--fan-color, var(--fan-owned-fill));
    stroke: var(--fan-color, var(--fan-owned-stroke));
    stroke-width: 14px;
    opacity: 1;
    transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
}

/* --- Completion magnifying glass overlay (centered on each card) --- */
.icon .fan-complete-badge {
    display: none;
}

.variant-complete .icon .fan-complete-badge {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.variant-complete .icon .fan-complete-badge svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

/* --- Hover effects --- */

/* Each fan card is individually hoverable */
.variant-icons .icon:hover {
    transform: translateY(-3px) scale(1.1);
    z-index: 10;
}

/* Owned cards get a brighter highlight on hover */
.variant-icons .icon.fan-owned:hover .cls-1 {
    filter: brightness(1.2);
}

/* Unowned cards become slightly less muted on hover */
.variant-icons .icon.fan-unowned:hover .cls-1 {
    opacity: 0.8;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .card,
    .dropbtn,
    .variant-icons .icon,
    .icon.fan-unowned .cls-1,
    .icon.fan-owned .cls-1 {
        transition: none !important;
    }
}

/* --- Small screen adjustments --- */
@media (max-width: 480px) {
    :root {
        --icon-size: 36px;
        --overlap: -12px;
    }

    .dropbtn {
        height: calc(var(--icon-size) + 6px);
        padding: 4px 8px;
    }
}

/* ========================================
   VARIANT DROPDOWN CONTENT
   ======================================== */

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--colour-paper);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: var(--z-dropdown);
    top: 30px;
    left: 21.35px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--colour-text);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Hover state for dropdown options */
.dropdown-option:hover {
    background-color: var(--dropdown-color, var(--colour-bg));
}

/* Divider between variants and report link */
.dropdown-divider {
    height: 1px;
    background-color: var(--colour-border, #e0e0e0);
    margin: 4px 0;
}

/* "Missing variant?" report link */
.dropdown-report-link {
    color: var(--colour-text-muted, #888);
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    text-align: center;
}

.dropdown-report-link:hover {
    color: var(--colour-primary);
    background-color: var(--colour-bg);
}

/* Show the dropdown menu */
.dropdown .dropdown-content.show {
    display: block;
}