.tactical-page { overflow: hidden; }
.tactical-page .section { position: relative; }
.tactical-page .tactical-section-head { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-2); }
.tactical-page .tactical-section-head > * { margin: 0; }
.tactical-hero { padding-block: var(--space-8) var(--space-9); background: linear-gradient(180deg, rgba(24,33,49,.45), transparent 70%); }
.tactical-hero__grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; gap: var(--space-7); }
.tactical-hero__copy { width: 100%; max-width: 35.625rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tactical-hero__copy > * { margin: 0; }
.tactical-hero__lead { color: var(--color-parchment-100); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.tactical-hero__media { width: 100%; min-width: 0; margin: 0; }
.tactical-hero__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 74% center; filter: saturate(.85) contrast(1.04); }
.tactical-hero__markers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: var(--space-3); }
.tactical-marker { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-inline-start: 3px solid var(--color-rune-500); background: var(--surface-raised); }
.tactical-marker:nth-child(2) { border-inline-start-color: var(--color-ember-500); }
.tactical-marker:nth-child(3) { border-inline-start-color: var(--color-moss-500); }
.tactical-marker span { color: var(--color-rune-300); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; }
.tactical-marker strong { font-family: var(--font-heading); font-size: var(--text-sm); }
.tactical-marker small { color: var(--color-parchment-300); line-height: 1.4; }
.tactical-hero__actions { width: 100%; }
.tactical-decisions__head { width: 100%; max-width: 40rem; margin-block-end: var(--space-6); }
.tactical-decisions__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.tactical-decision { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-decision > * { margin: 0; }
.tactical-decision__number { color: var(--color-rune-300); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: 1; }
.tactical-decision--danger { border-inline-start-color: var(--color-danger-500); }
.tactical-classes__head, .tactical-builds__head { width: 100%; max-width: 42.5rem; margin-block-end: var(--space-6); }
.tactical-classes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tactical-class-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-class-card > * { margin: 0; }
.tactical-class-card--duelist { grid-column: span 2; }
.tactical-synergy__head { width: 100%; max-width: 43rem; margin-block-end: var(--space-6); }
.tactical-synergy__stack, .tactical-consumables__stack { display: flex; flex-direction: column; gap: var(--space-5); }
.tactical-layer { display: grid; grid-template-columns: minmax(0, 65fr) minmax(16.25rem, 35fr); gap: var(--space-6); align-items: start; border-inline-start: 3px solid var(--color-ember-500); }
.tactical-layer > div, .tactical-layer > aside { min-width: 0; }
.tactical-layer > div { display: flex; flex-direction: column; gap: var(--space-3); }
.tactical-layer > div > *, .tactical-layer aside > * { margin: 0; }
.tactical-layer aside { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-color); background: var(--surface-primary); }
.tactical-layer--rune { border-inline-start-color: var(--color-rune-500); }
.tactical-layer--moss { border-inline-start-color: var(--color-moss-500); }
.tactical-layer ol { margin: 0; }
.tactical-builds__media { width: 100%; margin: 0 0 var(--space-6); }
.tactical-builds__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 62%; }
.tactical-builds__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tactical-build { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-build > * { margin: 0; }
.tactical-warning { color: var(--color-danger-ink) !important; }
.tactical-zones__head { width: 100%; max-width: 40.625rem; margin-block-end: var(--space-6); }
.tactical-zones__list { display: flex; flex-direction: column; border-top: 1px solid var(--border-color); }
.tactical-zones__list > article { display: grid; grid-template-columns: minmax(13.75rem, 24fr) minmax(0, 76fr); gap: var(--space-6); padding-block: var(--space-5); border-bottom: 1px solid var(--border-color); }
.tactical-zones__list > article > div { min-width: 0; }
.tactical-zone-label { display: flex; align-items: flex-start; gap: var(--space-3); }
.tactical-zone-label span { color: var(--color-rune-300); font-family: var(--font-heading); font-weight: 700; }
.tactical-zone-label h3, .tactical-zones__list h4, .tactical-zones__list p { margin: 0; }
.tactical-zones__list > article > div:last-child { display: flex; flex-direction: column; gap: var(--space-2); }
.tactical-danger { color: var(--color-danger-500); font-weight: 700; }
.tactical-safe { color: var(--color-moss-500); font-weight: 700; }
.tactical-boss__column { width: 100%; max-width: 45rem; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.tactical-boss__column > * { margin: 0; }
.tactical-boss__column header { display: flex; flex-direction: column; gap: var(--space-3); }
.tactical-boss__column header > * { margin: 0; }
.tactical-checklist { width: 100%; margin: 0; padding: 0; list-style: none; }
.tactical-checklist li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--border-color); }
.tactical-checklist li > span { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--color-rune-500); border-radius: 50%; color: var(--color-rune-300); font-family: var(--font-heading); font-weight: 700; }
.tactical-checklist li > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tactical-checklist h3, .tactical-checklist p { margin: 0; }
.tactical-consumables__head { width: 100%; max-width: 40.625rem; margin-block-end: var(--space-6); }
.tactical-consumable { display: grid; grid-template-columns: minmax(0, 60fr) minmax(18.75rem, 40fr); gap: var(--space-6); align-items: start; }
.tactical-consumable > div, .tactical-consumable > aside { min-width: 0; }
.tactical-consumable > div { display: flex; flex-direction: column; gap: var(--space-3); }
.tactical-consumable > div > * { margin: 0; }
.tactical-consumable > aside { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-color); background: var(--surface-primary); }
.tactical-consumable--rune { border-inline-start: 3px solid var(--color-rune-500); }
.tactical-consumable--ember { border-inline-start: 3px solid var(--color-ember-500); }
.tactical-consumable--moss { border-inline-start: 3px solid var(--color-moss-500); }
.tactical-compare { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tactical-compare > div { min-width: 0; }
.tactical-compare h4, .tactical-compare p { margin: 0; }
.tactical-learning__head { width: 100%; max-width: 43rem; margin-block-end: var(--space-6); }
.tactical-learning__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.tactical-learning__grid .panel { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-learning__grid .panel > * { margin: 0; }
.tactical-learning__takeaway { width: 100%; max-width: 42.5rem; margin-block: var(--space-6) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-learning__takeaway > * { margin: 0; }
.tactical-table-section__head { width: 100%; max-width: 38.75rem; margin-block-end: var(--space-3); }
.tactical-table-hint { display: none; }
.tactical-page .table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--surface-primary); }
.tactical-page .table-scroll:focus-visible { outline: 2px solid var(--color-ember-300); outline-offset: 3px; }
.tactical-page .table-scroll table { min-width: 61.25rem; margin: 0; }
.tactical-page .table-scroll th:first-child, .tactical-page .table-scroll td:first-child { min-width: 11.25rem; background: rgba(24,33,49,.62); }
.tactical-next__summary { width: 100%; max-width: 38.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-next__summary > * { margin: 0; }
.tactical-next__cards { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: var(--space-5); margin-block: var(--space-6); }
.tactical-next__cards .card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tactical-next__cards .card > * { margin: 0; }
.tactical-next__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--color-ember-500); border-inline-start: 3px solid var(--color-ember-500); border-radius: var(--radius-lg); background: var(--surface-raised); }
.tactical-next__cta > div { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tactical-next__cta h3, .tactical-next__cta p { margin: 0; }
.tactical-next__cta .button { min-height: 3rem; }
.tactical-next__media { width: 100%; margin: var(--space-6) 0 0; }
.tactical-next__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% center; }
@media (max-width: 68.75rem) { .tactical-decisions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 65rem) { .tactical-builds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tactical-builds__grid > article:last-child { grid-column: span 2; } }
@media (max-width: 61.25rem) { .tactical-classes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tactical-class-card--duelist { grid-column: span 1; } }
@media (max-width: 58.75rem) { .tactical-hero__grid, .tactical-layer, .tactical-consumable, .tactical-learning__grid { grid-template-columns: minmax(0, 1fr); } .tactical-hero__copy { max-width: 100%; } .tactical-hero__media { order: 2; } .tactical-layer aside, .tactical-consumable > aside { width: 100%; } }
@media (max-width: 53.75rem) { .tactical-zones__list > article { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .tactical-next__cards, .tactical-next__cta { grid-template-columns: minmax(0, 1fr); } .tactical-next__cta .button { width: 100%; } }
@media (max-width: 43.75rem) { .tactical-builds__grid { grid-template-columns: minmax(0, 1fr); } .tactical-builds__grid > article:last-child { grid-column: span 1; } }
@media (max-width: 40rem) { .tactical-decisions__grid, .tactical-classes__grid { grid-template-columns: minmax(0, 1fr); } .tactical-hero { padding-block: var(--space-7) var(--space-8); } .tactical-hero__markers { grid-template-columns: minmax(0, 1fr); } .tactical-hero__actions { align-items: stretch; flex-direction: column; } .tactical-hero__actions > * { width: 100%; min-height: 3rem; } .tactical-hero .display-title { font-size: clamp(2rem, 9vw, 2.7rem); } .tactical-layer, .tactical-consumable { gap: var(--space-4); padding: var(--space-5); } .tactical-compare { grid-template-columns: minmax(0, 1fr); } .tactical-table-hint { display: block; margin-block: 0 var(--space-3); color: var(--color-rune-300); font-size: var(--text-sm); } .tactical-page .table-scroll th:first-child, .tactical-page .table-scroll td:first-child { min-width: 9.375rem; } }
@media (prefers-reduced-motion: reduce) { .tactical-page .card:hover, .tactical-page .button:hover { transform: none; } }