.overwatch-page {
  --food-accent: #ef6f78;
  background: #fff8f5;
}

.overwatch-page .fast-food-intro h1::after { color: #ef6f78; }
.overwatch-page .fast-food-trust span { border-color: #f0d5d1; background: #fff; color: #884d51; }
.overwatch-page .fast-food-maker { border-top-color: var(--food-accent); }
.overwatch-page .fast-food-guide { background: #f5eded; }
.overwatch-page .fast-food-criteria { max-width: 1300px; }
.overwatch-section { padding-top: 78px; padding-bottom: 78px; }
.overwatch-section + .overwatch-section { border-top: 1px solid var(--line); }
.overwatch-pending { max-width: 860px; margin: 0 auto; padding: 16px 18px; border-left: 4px solid var(--food-accent); background: #fff0ed; color: #7f4b4e; font-size: 13px; line-height: 1.65; }
.overwatch-snapshot-metrics { max-width: 900px; margin: -4px auto 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.overwatch-snapshot-metric { padding: 16px 14px; border: 1px solid #f0d5d1; border-radius: 12px; background: #fff; text-align: center; }
.overwatch-snapshot-metric strong { display: block; color: #17201b; font: 800 19px/1.15 Manrope, sans-serif; }
.overwatch-snapshot-metric span { display: block; margin-top: 6px; color: #884d51; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.overwatch-source-note { max-width: 900px; margin: auto; padding: 13px 16px; border: 1px solid #f0d5d1; border-radius: 10px; background: #fff0ed; color: #75474b; font-size: 12px; line-height: 1.55; }
.overwatch-source-note span { margin-right: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.overwatch-source-note a { color: #75474b; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.overwatch-source-note small { display: block; margin-top: 4px; color: #8c6062; font-size: 11px; }
.overwatch-table-wrap { max-width: 1150px; margin: auto; overflow-x: auto; }
.overwatch-tier-table { width: 100%; min-width: 840px; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.overwatch-tier-table th,
.overwatch-tier-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; line-height: 1.55; }
.overwatch-tier-table th { background: #f5eded; color: #75474b; font: 800 11px Manrope, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.overwatch-tier-table tr:last-child td { border-bottom: 0; }
.overwatch-tier-table td:first-child { width: 82px; color: #17201b; font: 800 20px Manrope, sans-serif; }
.overwatch-tier-table td:nth-child(2) { width: 58%; }
.overwatch-tier-table td:nth-child(3) { width: 30%; color: var(--muted); }
.overwatch-tier-badge,
.overwatch-role-tier-label { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px; background: #f4d8d8; color: #17201b; font: 800 18px/1 Manrope, sans-serif; }
.overwatch-tier-badge[data-tier="S"], .overwatch-role-tier-label[data-tier="S"] { background: #ff7d6d; }
.overwatch-tier-badge[data-tier="A"], .overwatch-role-tier-label[data-tier="A"] { background: #ffbd62; }
.overwatch-tier-badge[data-tier="B"], .overwatch-role-tier-label[data-tier="B"] { background: #f4dc68; }
.overwatch-tier-badge[data-tier="C"], .overwatch-role-tier-label[data-tier="C"] { background: #91d0a3; }
.overwatch-tier-badge[data-tier="D"], .overwatch-role-tier-label[data-tier="D"] { background: #81b9d3; }
.overwatch-hero-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.overwatch-hero-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 112px; padding: 5px 8px 5px 5px; border: 1px solid #f0d5d1; border-radius: 9px; background: #fff8f5; color: #17201b; font-size: 11px; font-weight: 800; line-height: 1.2; }
.overwatch-hero-chip img { width: 44px; height: 58px; border-radius: 6px; object-fit: cover; background: #f5eded; }
.overwatch-tier-count { display: block; margin-top: 9px; color: #976b6d; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.overwatch-no-placement { display: block; padding: 12px; border: 1px dashed #e4c7c5; border-radius: 8px; background: #fff8f5; color: #805456; font-size: 12px; }
.overwatch-role-grid { max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.overwatch-role-card { padding: 25px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.overwatch-role-card h3 { margin: 0 0 10px; font: 800 18px/1.25 Manrope, sans-serif; }
.overwatch-role-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.overwatch-role-roster { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.overwatch-role-roster-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; }
.overwatch-role-roster-heading strong { color: #884d51; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.overwatch-role-roster-heading span { color: #976b6d; font-size: 10px; font-weight: 800; }
.overwatch-role-tier { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: start; margin-top: 12px; }
.overwatch-role-tier:first-of-type { margin-top: 0; }
.overwatch-role-tier-label { width: 32px; height: 32px; border-radius: 8px; font-size: 13px; }
.overwatch-role-heroes { display: flex; flex-wrap: wrap; gap: 7px; }
.overwatch-hero-chip.compact { flex-direction: column; justify-content: flex-start; gap: 4px; width: 58px; min-width: 58px; padding: 4px 3px 5px; border-radius: 8px; text-align: center; font-size: 9px; font-weight: 700; }
.overwatch-hero-chip.compact img { width: 32px; height: 44px; border-radius: 5px; }
.overwatch-step-grid { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.overwatch-step-grid article { min-height: 210px; padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.overwatch-step-grid article > b { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #f4d8d8; color: #884d51; font-size: 10px; }
.overwatch-step-grid h3 { margin: 19px 0 9px; font: 800 18px/1.25 Manrope, sans-serif; }
.overwatch-step-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.overwatch-change-grid { max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.overwatch-change-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.overwatch-change-grid strong { display: block; margin-bottom: 9px; color: #17201b; font: 800 17px/1.25 Manrope, sans-serif; }
.overwatch-change-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.overwatch-official-link { display: block; width: fit-content; margin: 22px auto 0; color: #75474b; font-size: 12px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.overwatch-empty-state { display: grid; place-items: center; min-height: 150px; padding: 24px; border: 1px dashed #e4c7c5; border-radius: 10px; background: #fff8f5; color: #805456; text-align: center; }
.overwatch-empty-state[hidden] { display: none; }
.overwatch-empty-state strong { display: block; margin-bottom: 6px; font: 800 15px Manrope, sans-serif; }
.overwatch-empty-state span { font-size: 12px; line-height: 1.6; }

@media (max-width: 900px) {
  .overwatch-snapshot-metrics { grid-template-columns: repeat(2, 1fr); }
  .overwatch-role-grid { grid-template-columns: 1fr; }
  .overwatch-step-grid { grid-template-columns: repeat(2, 1fr); }
  .overwatch-change-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .overwatch-section { padding-top: 60px; padding-bottom: 60px; }
  .overwatch-snapshot-metrics { grid-template-columns: 1fr 1fr; }
  .overwatch-step-grid { grid-template-columns: 1fr; }
  .overwatch-tier-table th,
  .overwatch-tier-table td { padding: 13px 12px; }
  .overwatch-tier-table td:nth-child(2) { width: auto; }
}