.champions-page { overflow: hidden; }
.champions-page .champions-hero { padding-block: var(--space-8) var(--space-9); background: linear-gradient(135deg, var(--color-ice-white) 0%, var(--color-soft-lavender) 100%); position: relative; }
.champions-page .champions-hero::after { content: ""; position: absolute; inset: auto -8% 8% 50%; height: 2px; background: var(--color-flame-orange); transform: rotate(-8deg); opacity: .55; pointer-events: none; }
.champions-page .champions-hero__container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; position: relative; z-index: 1; }
.champions-page .champions-hero__copy, .champions-page .champions-hero__visual, .champions-page .champions-section-intro, .champions-page .champions-iconic__intro, .champions-page .champions-combat__intro, .champions-page .champions-team__heading, .champions-page .champions-closing__copy, .champions-page .champions-closing__actions { min-width: 0; }
.champions-page .champions-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.champions-page .champions-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.champions-page .champions-hero h1 { max-width: 23ch; margin: 0; font-size: clamp(3.25rem, 5vw, 4rem); }
.champions-page .champions-hero__lead { max-width: 60ch; margin: 0; font-size: var(--text-lead); line-height: 1.4; }
.champions-page .champions-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); width: 100%; }
.champions-page .champions-page__action { min-height: 3rem; }
.champions-page .champions-text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-1); font-weight: 700; }
.champions-page .champions-hero__visual { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.champions-page .champions-image-frame { overflow: hidden; border: 1px solid var(--color-line-silver); border-radius: var(--radius-panel); background: var(--color-royal-purple); width: 100%; }
.champions-page .champions-image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.champions-page .champions-image-frame:hover img { transform: scale(1.03); }
.champions-page .champions-image-frame--hero { aspect-ratio: 16 / 10; }
.champions-page .champions-image-frame--roster { aspect-ratio: 3 / 2; }
.champions-page .champions-hero__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-line-silver); border-top: 4px solid var(--color-electric-turquoise); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); }
.champions-page .champions-hero__note p { max-width: 40ch; margin: 0; }
.champions-page .champions-section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.champions-page .champions-section-intro h2, .champions-page .champions-section-intro p { margin: 0; }
.champions-page .champions-roster__intro, .champions-page .champions-classes__intro, .champions-page .champions-groups__intro, .champions-page .champions-modes__intro, .champions-page .champions-route__intro { max-width: 66ch; }
.champions-page .champions-roster__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-5); margin-top: var(--space-7); align-items: stretch; }
.champions-page .champions-discovery-card, .champions-page .champions-class-card, .champions-page .champions-name-card, .champions-page .champions-group-card, .champions-page .champions-team-panel, .champions-page .champions-mode-card, .champions-page .champions-step-card { min-width: 0; border: 1px solid var(--color-line-silver); border-radius: var(--radius-card); background: var(--color-paper-white); }
.champions-page .champions-discovery-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
.champions-page .champions-discovery-card h3, .champions-page .champions-discovery-card p { margin: 0; }
.champions-page .champions-discovery-card--narrative { border-top: 4px solid var(--color-flame-orange); }
.champions-page .champions-discovery-card--combat { border-top: 4px solid var(--color-electric-turquoise); }
.champions-page .champions-mechanics-rail { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-3); border-left: 2px solid var(--color-electric-turquoise); padding: var(--space-4); }
.champions-page .champions-mechanics-rail p { margin: 0; max-width: 32ch; }
.champions-page .champions-classes { background: var(--color-paper-white); }
.champions-page .champions-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }
.champions-page .champions-class-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-top-width: 5px; }
.champions-page .champions-class-card > span { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.champions-page .champions-class-card h3, .champions-page .champions-class-card p { margin: 0; }
.champions-page .champions-class-card--cosmic { border-top-color: var(--color-royal-purple); }.champions-page .champions-class-card--tech { border-top-color: var(--color-electric-turquoise); }.champions-page .champions-class-card--mutant { border-top-color: #9870c4; }.champions-page .champions-class-card--skill { border-top-color: var(--color-flame-orange); }.champions-page .champions-class-card--science { border-top-color: #4e8c72; }.champions-page .champions-class-card--mystic { border-top-color: #70549a; }
.champions-page .champions-advantage { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; margin-top: var(--space-6); border: 1px solid var(--color-line-silver); border-radius: var(--radius-card); background: var(--color-soft-lavender); padding: var(--space-6); }
.champions-page .champions-advantage > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }.champions-page .champions-advantage h3, .champions-page .champions-advantage p { margin: 0; }.champions-page .champions-advantage > a { justify-self: end; max-width: 29ch; }
.champions-page .champions-iconic__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: center; }
.champions-page .champions-iconic__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }.champions-page .champions-iconic__intro h2, .champions-page .champions-iconic__intro p { margin: 0; }.champions-page .champions-iconic__intro p { max-width: 62ch; }
.champions-page .champions-name-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-7); }
.champions-page .champions-name-card { display: flex; min-height: 15rem; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); transition: transform var(--transition-fast), box-shadow var(--transition-fast); }.champions-page .champions-name-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }.champions-page .champions-name-card h3, .champions-page .champions-name-card p { margin: 0; }.champions-page .champions-name-card p { max-width: 32ch; }.champions-page .champions-name-card__type, .champions-page .champions-name-card > span:last-child { font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }.champions-page .champions-name-card > span:last-child { margin-top: auto; color: var(--color-royal-purple); }
.champions-page .champions-strategy-caption { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-6); border-radius: var(--radius-card); background: var(--color-soft-lavender); padding: var(--space-5); }.champions-page .champions-strategy-caption p { max-width: 72ch; margin: 0; }
.champions-page .champions-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }.champions-page .champions-group-card { display: flex; min-height: 19rem; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); position: relative; overflow: hidden; }.champions-page .champions-group-card::after { content: ""; position: absolute; top: 0; right: 12%; width: 1px; height: 100%; background: currentColor; opacity: .14; transform: rotate(22deg); }.champions-page .champions-group-card h3, .champions-page .champions-group-card p { margin: 0; }.champions-page .champions-group-card p { max-width: 43ch; }.champions-page .champions-group-card a { margin-top: auto; }.champions-page .champions-group-card--avengers { border-top: 4px solid var(--color-flame-orange); }.champions-page .champions-group-card--xmen { border-top: 4px solid var(--color-electric-turquoise); }.champions-page .champions-group-card--fantastic { border-top: 4px solid var(--color-royal-purple); }.champions-page .champions-group-card--guardians { border-top: 4px solid #9870c4; }
.champions-page .champions-view-explainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); border: 1px solid var(--color-line-silver); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-6); }.champions-page .champions-view-explainer > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }.champions-page .champions-view-explainer h3, .champions-page .champions-view-explainer p { margin: 0; }
.champions-page .champions-combat { position: relative; background: var(--color-royal-purple); color: var(--color-ice-white); }.champions-page .champions-combat::before { content: ""; position: absolute; inset: 12% -5% auto 55%; height: 3px; background: var(--color-electric-turquoise); opacity: .45; transform: rotate(-9deg); }.champions-page .champions-combat h2 { color: var(--color-ice-white); }.champions-page .champions-combat__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 62ch; position: relative; }.champions-page .champions-combat__intro h2, .champions-page .champions-combat__intro p { margin: 0; }.champions-page .champions-combat .eyebrow { color: var(--color-ice-white); }.champions-page .champions-combat__cards { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: calc(var(--space-7) + var(--space-6)); margin-top: var(--space-7); }.champions-page .champions-combat-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; border-radius: var(--radius-card); background: var(--color-paper-white); color: var(--color-graphite); padding: var(--space-6); }.champions-page .champions-combat-card h3, .champions-page .champions-combat-card p { margin: 0; }.champions-page .champions-combat-card--defence { border-top: 4px solid var(--color-electric-turquoise); }.champions-page .champions-combat-card--offence { border-top: 4px solid var(--color-flame-orange); }.champions-page .champions-combat__cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; margin-top: var(--space-6); border: 1px solid rgba(247,249,252,.55); border-radius: var(--radius-card); padding: var(--space-5); }.champions-page .champions-combat__cta > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; }.champions-page .champions-combat__cta p { max-width: 48ch; margin: 0; }.champions-page .champions-combat__cta .button { justify-self: end; }
.champions-page .champions-team__heading { max-width: 66ch; }.champions-page .champions-team__heading h2 { margin: 0; }.champions-page .champions-team__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--space-5); margin-top: var(--space-6); }.champions-page .champions-team-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }.champions-page .champions-team-panel h3, .champions-page .champions-team-panel p { margin: 0; }.champions-page .champions-team-panel--strategy { grid-column: 1; grid-row: 1 / span 2; background: var(--color-soft-lavender); }.champions-page .champions-team-panel--mechanic { grid-column: 2; grid-row: 1; border-top: 4px solid var(--color-electric-turquoise); }.champions-page .champions-team-panel--progress { grid-column: 2; grid-row: 2; border-top: 4px solid var(--color-flame-orange); }.champions-page .champions-team-panel a { margin-top: auto; }
.champions-page .champions-modes { background: var(--color-paper-white); }.champions-page .champions-modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }.champions-page .champions-mode-card { display: flex; min-height: 22rem; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }.champions-page .champions-mode-card h3, .champions-page .champions-mode-card p { margin: 0; }.champions-page .champions-mode-card p { max-width: 38ch; }.champions-page .champions-mode-card a { margin-top: auto; }.champions-page .champions-mode-card--quests { border-top: 4px solid var(--color-royal-purple); }.champions-page .champions-mode-card--wars { border-top: 4px solid var(--color-flame-orange); }.champions-page .champions-mode-card--incursions { border-top: 4px solid var(--color-electric-turquoise); }
.champions-page .champions-route__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-7); }.champions-page .champions-step-card { display: flex; min-height: 22rem; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); position: relative; }.champions-page .champions-step-card__number { color: var(--color-royal-purple); font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; line-height: 1; }.champions-page .champions-step-card h3, .champions-page .champions-step-card p { margin: 0; }.champions-page .champions-step-card p { max-width: 42ch; }.champions-page .champions-step-card > a, .champions-page .champions-inline-links { margin-top: auto; }.champions-page .champions-inline-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.champions-page .champions-closing { padding-top: var(--space-8); }.champions-page .champions-disclaimer { max-width: 90ch; margin: 0; border-top: 1px solid var(--color-line-silver); padding-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }.champions-page .champions-closing__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; margin-top: var(--space-5); border: 1px solid rgba(247,249,252,.5); border-radius: var(--radius-panel); background: var(--color-royal-purple); padding: var(--space-7); color: var(--color-ice-white); }.champions-page .champions-closing__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }.champions-page .champions-closing__copy h2, .champions-page .champions-closing__copy p { margin: 0; }.champions-page .champions-closing__copy h2 { color: var(--color-ice-white); }.champions-page .champions-closing__copy .eyebrow { color: var(--color-ice-white); }.champions-page .champions-closing__copy p { max-width: 56ch; }.champions-page .champions-closing__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }.champions-page .champions-closing__actions .button { width: 100%; }.champions-page .champions-closing__actions .champions-text-link { color: var(--color-ice-white); }
@media (max-width: 65.625rem) { .champions-page .champions-hero__container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }.champions-page .champions-hero h1 { font-size: clamp(3rem, 6vw, 3.5rem); }.champions-page .champions-iconic__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
@media (max-width: 61.25rem) { .champions-page .champions-roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.champions-page .champions-mechanics-rail { grid-column: 1 / -1; border-left: 0; border-top: 2px solid var(--color-electric-turquoise); }.champions-page .champions-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }.champions-page .champions-team-panel--strategy { grid-column: 1 / -1; grid-row: 1; }.champions-page .champions-team-panel--mechanic { grid-column: 1; grid-row: 2; }.champions-page .champions-team-panel--progress { grid-column: 2; grid-row: 2; } }
@media (max-width: 57.5rem) { .champions-page .champions-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.champions-page .champions-combat__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }.champions-page .champions-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.champions-page .champions-mode-card--incursions { grid-column: 1 / -1; }.champions-page .champions-advantage, .champions-page .champions-combat__cta, .champions-page .champions-closing__panel { grid-template-columns: 1fr; }.champions-page .champions-advantage > a, .champions-page .champions-combat__cta .button { justify-self: start; } }
@media (max-width: 53.75rem) { .champions-page .champions-iconic__top { grid-template-columns: 1fr; }.champions-page .champions-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.champions-page .champions-image-frame--roster { aspect-ratio: 16 / 10; } }
@media (max-width: 47.5rem) { .champions-page .champions-route__grid { grid-template-columns: 1fr; }.champions-page .champions-step-card { min-height: 0; }.champions-page .champions-step-card > a, .champions-page .champions-inline-links { margin-top: var(--space-2); } }
@media (max-width: 43.75rem) { .champions-page .champions-roster__grid, .champions-page .champions-team__grid { grid-template-columns: 1fr; }.champions-page .champions-team-panel--strategy, .champions-page .champions-team-panel--mechanic, .champions-page .champions-team-panel--progress { grid-column: 1; grid-row: auto; }.champions-page .champions-group-grid { grid-template-columns: 1fr; }.champions-page .champions-view-explainer { grid-template-columns: 1fr; }.champions-page .champions-combat__cards { grid-template-columns: 1fr; }.champions-page .champions-combat-card { min-height: 0; }.champions-page .champions-modes__grid { grid-template-columns: 1fr; }.champions-page .champions-mode-card--incursions { grid-column: 1; }.champions-page .champions-mode-card { min-height: 0; } }
@media (max-width: 40rem) { .champions-page .champions-hero { padding-block: var(--space-7); }.champions-page .champions-hero__container { grid-template-columns: 1fr; gap: var(--space-5); }.champions-page .champions-hero h1 { max-width: 20ch; font-size: 2.5rem; line-height: 1.05; }.champions-page .champions-hero__lead { font-size: 1.125rem; }.champions-page .champions-hero__actions { flex-direction: column; align-items: stretch; }.champions-page .champions-hero__actions .button { width: 100%; }.champions-page .champions-hero__visual { gap: var(--space-4); }.champions-page .champions-hero__note, .champions-page .champions-discovery-card, .champions-page .champions-class-card, .champions-page .champions-group-card, .champions-page .champions-combat-card, .champions-page .champions-team-panel, .champions-page .champions-mode-card, .champions-page .champions-step-card { padding: var(--space-5); }.champions-page .champions-class-grid, .champions-page .champions-name-grid { grid-template-columns: 1fr; }.champions-page .champions-name-card { min-height: 0; }.champions-page .champions-advantage, .champions-page .champions-view-explainer, .champions-page .champions-combat__cta, .champions-page .champions-closing__panel { padding: var(--space-5); }.champions-page .champions-combat__cta .button, .champions-page .champions-closing__actions .button { width: 100%; }.champions-page .champions-closing__panel { gap: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .champions-page .champions-image-frame img, .champions-page .champions-name-card { transition: none; }.champions-page .champions-image-frame:hover img, .champions-page .champions-name-card:hover { transform: none; } }