.harc-page { overflow: hidden; }
.harc-page [id] { scroll-margin-top: 7rem; }
.harc-page .button:focus-visible { outline: 2px solid var(--color-graphite); outline-offset: 3px; }
.harc-page a { overflow-wrap: anywhere; }
.harc-hero { padding-block: var(--space-8) var(--space-9); background: linear-gradient(135deg, var(--color-ice-white) 0%, #fff 68%, var(--color-soft-lavender) 100%); }
.harc-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; }
.harc-hero__copy, .harc-hero__media { min-width: 0; width: 100%; }
.harc-hero__copy { max-width: 44rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.harc-hero__copy > * { margin: 0; }
.harc-breadcrumb { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.harc-hero h1 { max-width: 15ch; font-size: clamp(3.5rem, 5.5vw, 4rem); }
.harc-hero__lead { max-width: 38rem; font-size: var(--text-lead); line-height: 1.4; }
.harc-label-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); width: 100%; border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.harc-label-guide > div { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.harc-label-guide p, .harc-hero__note { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.45; }
.harc-hero__media { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-panel); aspect-ratio: 4 / 5; background: var(--color-royal-purple); }
.harc-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, transparent 40%, rgba(240,90,40,.18) 50%, transparent 62%); }
.harc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.harc-hero__media figcaption { position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-3); max-width: 14rem; padding: var(--space-2); background: rgba(247,249,252,.9); color: var(--color-graphite); font-size: var(--text-xs); line-height: 1.35; }
.harc-section-intro { width: min(100%, 44rem); margin-bottom: var(--space-6); }
.harc-section-intro p { max-width: 41rem; }
.harc-section-intro--combo { width: min(100%, 40rem); }
.harc-section-intro--defense { width: min(100%, 42rem); }
.harc-section-intro--classes { width: min(100%, 45rem); }
.harc-section-intro--plan { width: min(100%, 39rem); }
.harc-section-intro--paths { width: min(100%, 42rem); }
.harc-section-intro--glossary { width: min(100%, 40rem); }
.harc-mechanic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.harc-mechanic-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-top: 4px solid var(--color-electric-turquoise); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.harc-mechanic-card > * { margin: 0; }
.harc-mechanic-card--combo { border-top-color: var(--color-flame-orange); }
.harc-mechanic-card--power { border-top-color: var(--color-royal-purple); }
.harc-card-top { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); }
.harc-number { color: var(--color-royal-purple); font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; }
.harc-mechanic-card h3 { font-size: 1.75rem; }
.harc-mechanic-card p { font-size: .96rem; line-height: 1.55; }
.harc-mechanic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.harc-combo__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: stretch; }
.harc-combo__mechanics, .harc-combo__strategy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.harc-combo__mechanics > *, .harc-combo__strategy > * { margin: 0; }
.harc-combo__mechanics p { max-width: 37rem; }
.harc-counter { display: flex; min-width: 0; align-items: center; gap: var(--space-3); color: var(--color-electric-turquoise); font-family: var(--font-heading); font-size: 2rem; font-weight: 800; }
.harc-counter strong { color: var(--color-flame-orange); font-size: 3.25rem; line-height: .7; }
.harc-counter i { display: block; width: 2rem; height: .35rem; background: var(--color-flame-orange); transform: skewX(-28deg); }
.harc-practice-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding-left: 1.35rem; }
.harc-practice-list li { padding-left: var(--space-1); }
.harc-callout { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border-left: 4px solid var(--color-flame-orange); padding: var(--space-4); background: rgba(255,255,255,.66); }
.harc-callout > * { margin: 0; }
.harc-callout p { font-size: var(--text-sm); line-height: 1.5; }
.harc-defense__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.harc-defense-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-6); }
.harc-defense-card > * { margin: 0; }
.harc-defense-card--block { border-top: 5px solid var(--color-graphite); }
.harc-defense-card--dodge { border-top: 5px solid var(--color-electric-turquoise); }
.harc-defense-card p { max-width: 33rem; }
.harc-defense-summary { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-5); border: 1px solid var(--color-border); background: var(--color-ice-white); padding: var(--space-4) var(--space-5); }
.harc-defense-summary p { max-width: 60rem; margin: 0; }
.harc-special { background: linear-gradient(180deg, var(--color-ice-white), var(--color-soft-lavender)); }
.harc-special__panel { position: relative; overflow: hidden; border: 1px solid rgba(247,249,252,.58); border-radius: var(--radius-panel); background: var(--color-royal-purple); padding: var(--space-7); color: var(--color-ice-white); }
.harc-special__panel::after { content: ""; position: absolute; inset: auto -8% 9% 28%; height: 22%; background: linear-gradient(105deg, transparent 12%, rgba(240,90,40,.4) 46%, transparent 62%); transform: skewY(-7deg); pointer-events: none; }
.harc-special__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); }
.harc-special__main, .harc-special__side { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.harc-special__main > *, .harc-special__side > * { margin: 0; }
.harc-special h2, .harc-special h3 { color: var(--color-ice-white); }
.harc-special__main p { max-width: 42rem; }
.harc-special__strategy, .harc-champion-link { width: 100%; min-width: 0; }
.harc-special__strategy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--color-paper-white); color: var(--color-graphite); padding: var(--space-5); }
.harc-special__strategy > * { margin: 0; }
.harc-special__strategy h3 { color: var(--color-graphite); }
.harc-champion-link { display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid rgba(247,249,252,.72); padding: var(--space-5); color: var(--color-ice-white); text-decoration: none; }
.harc-champion-link:hover { color: var(--color-ice-white); background: rgba(247,249,252,.1); }
.harc-champion-link strong { font-size: 1.1rem; }
.harc-class-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.harc-class-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 10.5rem; border: 1px solid var(--color-border); border-left: 5px solid var(--class-accent); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); color: var(--color-graphite); text-decoration: none; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.harc-class-card:hover { color: var(--color-graphite); transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.harc-class-card > span { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; }
.harc-class-card small { color: var(--color-text-muted); }
.harc-class-card strong { margin-top: auto; color: var(--color-electric-turquoise); font-size: var(--text-sm); }
.harc-class-card--cosmic { --class-accent: var(--color-royal-purple); }.harc-class-card--tech { --class-accent: var(--color-electric-turquoise); }.harc-class-card--mutant { --class-accent: var(--color-flame-orange); }.harc-class-card--skill { --class-accent: var(--color-graphite); }.harc-class-card--science { --class-accent: #4b7b48; }.harc-class-card--mystic { --class-accent: #8a4da6; }
.harc-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-border); background: var(--color-paper-white); padding: var(--space-6); }
.harc-advantage__copy { min-width: 0; }
.harc-advantage__copy p { max-width: 40rem; }
.harc-advantage__chain { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-royal-purple); font-weight: 700; }
.harc-advantage__chain b { color: var(--color-electric-turquoise); }
.harc-cycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; padding: var(--space-4); background: var(--color-soft-lavender); }
.harc-cycle span { min-width: 0; border: 1px solid var(--color-line-silver); background: var(--color-paper-white); padding: var(--space-3); color: var(--color-royal-purple); font-size: var(--text-sm); font-weight: 700; text-align: center; }
.harc-class-note { display: flex; min-width: 0; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-5); background: var(--color-soft-lavender); padding: var(--space-5); }
.harc-class-note p { margin: 0; max-width: 65rem; }
.harc-plan__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-7); align-items: start; }
.harc-plan__timeline, .harc-next-card { min-width: 0; }
.harc-timeline { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.harc-timeline li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; border-left: 1px solid var(--color-electric-turquoise); padding-left: var(--space-4); }
.harc-timeline li > div { min-width: 0; }
.harc-timeline h3 { margin-top: var(--space-2); font-size: 1.75rem; }
.harc-timeline__number { display: flex; width: 3.25rem; height: 3.25rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-royal-purple); color: var(--color-ice-white); font-family: var(--font-heading); font-size: 1.8rem; font-weight: 800; }
.harc-next-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-top: 5px solid var(--color-flame-orange); background: var(--color-paper-white); padding: var(--space-5); }
.harc-next-card > * { margin: 0; }
.harc-path-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.harc-path-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-top: 4px solid var(--color-royal-purple); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.harc-path-card > * { margin: 0; }
.harc-path-card--alliance { border-top-color: var(--color-electric-turquoise); }.harc-path-card--battlegrounds { border-top-color: var(--color-flame-orange); }
.harc-path-card h3 { font-size: 1.7rem; }.harc-path-card p { font-size: var(--text-sm); line-height: 1.5; }.harc-path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); }
.harc-discovery-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-5); border: 1px solid var(--color-border); background: var(--color-paper-white); padding: var(--space-6); }
.harc-discovery-card > * { margin: 0; }.harc-discovery-card p { max-width: 60rem; }
.harc-glossary__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.harc-glossary__group { min-width: 0; border-top: 1px solid var(--color-border); }
.harc-glossary__group article { min-width: 0; padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.harc-glossary__group article > *:last-child { margin-bottom: 0; }.harc-glossary__group h3 { margin-top: var(--space-2); font-size: 1.5rem; }.harc-glossary__group p { max-width: 34rem; }
.harc-legend { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.harc-closing { background: linear-gradient(135deg, var(--color-soft-lavender), var(--color-ice-white)); }
.harc-closing__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: stretch; }
.harc-closing__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }.harc-closing__copy > * { margin: 0; }.harc-closing__copy p { max-width: 41rem; }
.harc-closing__actions { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-3); }.harc-closing__actions > * { min-width: 0; }.harc-secondary-cta { border-color: var(--color-electric-turquoise); }
.harc-disclaimer { border-top: 1px solid var(--color-border); padding-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.45; }
.harc-closing__decor { min-width: 0; background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(85,37,138,.08) 16px 18px), radial-gradient(circle at 65% 45%, rgba(240,90,40,.35), transparent 5%), radial-gradient(circle at 46% 52%, rgba(8,174,184,.25), transparent 20%); }
@media (max-width: 70rem) { .harc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.harc-hero h1 { font-size: clamp(3rem, 6.5vw, 3.7rem); } }
@media (max-width: 65rem) { .harc-mechanic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.harc-mechanic-card:nth-child(3) { grid-column: 1 / -1; }.harc-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 61.25rem) { .harc-combo__grid, .harc-special__grid { grid-template-columns: minmax(0, 1fr); }.harc-combo__mechanics p, .harc-special__main p { max-width: 45rem; }.harc-advantage { grid-template-columns: minmax(0, 1fr); }.harc-plan__grid { grid-template-columns: minmax(0, 1fr); }.harc-next-card { max-width: 40rem; } }
@media (max-width: 60rem) { .harc-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56.25rem) { .harc-hero__grid, .harc-closing__grid { grid-template-columns: minmax(0, 1fr); }.harc-hero__copy { max-width: 100%; }.harc-hero__media { max-width: 35rem; }.harc-closing__decor { display: none; } }
@media (max-width: 53.125rem) { .harc-defense__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 47.5rem) { .harc-glossary__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 45rem) { .harc-mechanic-grid { grid-template-columns: minmax(0, 1fr); }.harc-mechanic-card:nth-child(3) { grid-column: auto; } }
@media (max-width: 40rem) { .harc-path-grid, .harc-class-grid { grid-template-columns: minmax(0, 1fr); }.harc-cycle { grid-template-columns: minmax(0, 1fr); }.harc-advantage { padding: var(--space-5); } }
@media (max-width: 56.25rem) { .harc-hero { padding-block: var(--space-7); }.harc-hero h1 { max-width: 100%; font-size: 2.5rem; line-height: 1.05; }.harc-hero__lead { font-size: 1.125rem; line-height: 1.5; }.harc-hero__media { order: 2; width: 100%; }.harc-label-guide { grid-template-columns: minmax(0, 1fr); }.harc-special__panel { padding: var(--space-5); }.harc-defense-summary, .harc-class-note { flex-direction: column; gap: var(--space-3); }.harc-closing__actions { width: 100%; flex-direction: column; }.harc-closing__actions .button { width: 100%; min-height: 3rem; }.harc-timeline li { grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--color-electric-turquoise); padding-left: var(--space-3); }.harc-timeline__number { width: 2.75rem; height: 2.75rem; }.harc-section-intro { margin-bottom: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .harc-mechanic-card, .harc-class-card, .harc-path-card { transition: none; }.harc-mechanic-card:hover, .harc-class-card:hover, .harc-path-card:hover { transform: none; } }