.interior-page { background: var(--paper); }
.interior-page .site-header { position: sticky; }
.page-hero { position: relative; min-height: 450px; overflow: hidden; background: var(--forest-deep); color: #fff7e6; }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: var(--page-art); background-size: cover; background-position: center; opacity: .72; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,29,24,.97) 0%, rgba(8,29,24,.84) 40%, rgba(8,29,24,.18) 100%), linear-gradient(0deg, rgba(8,29,24,.45), transparent 45%); }
.page-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 450px; padding-block: 60px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 35px; color: #d3e2ce; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero .kicker { color: var(--gold); }
.page-hero h1 { max-width: 760px; margin: 17px 0 16px; font: 600 clamp(42px, 6.2vw, 75px)/1.04 var(--serif); letter-spacing: -.06em; }
.page-hero h1 em { color: var(--gold-light); font-weight: 500; }
.page-hero p { max-width: 650px; margin: 0; color: #d9e8d9; font-size: 15px; line-height: 1.8; }
.hero-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; }
.hero-metrics span { padding: 9px 12px; border: 1px solid rgba(241,228,171,.35); border-radius: 6px; background: rgba(10,40,31,.58); color: #f7edcb; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.resource-nav { background: #1c4233; color: #e5ecdc; }
.resource-nav__inner { display: flex; align-items: center; gap: 8px; min-height: 60px; overflow-x: auto; }
.resource-nav a { flex: 0 0 auto; padding: 10px 14px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.resource-nav a:hover, .resource-nav a[aria-current="page"] { background: var(--gold); color: var(--forest); }
.page-section { padding-block: 82px; }
.page-section--tint { background: #e9efe3; }
.page-section--dark { background: #102b23; color: #f7f2e0; }
.page-section--dark .kicker { color: var(--gold); }
.content-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 30px; }
.content-heading h2 { margin: 12px 0 0; font: 600 clamp(31px,4vw,46px)/1.1 var(--serif); letter-spacing: -.05em; }
.content-heading h2 em { color: #5b956c; font-weight: 500; }
.content-heading>p { max-width: 470px; margin: 0 0 3px; color: #627061; font-size: 13px; line-height: 1.75; }
.page-section--dark .content-heading>p { color: #cfddcb; }
.intro-copy { max-width: 830px; color: #536656; font-size: 15px; line-height: 1.9; }
.intro-copy strong { color: #244b32; }
.meta-note { margin: 16px 0 0; color: #667867; font-size: 11px; line-height: 1.7; }
.meta-note a { color: #35734c; text-decoration: underline; text-underline-offset: 3px; }
.utility-panel { padding: 28px; border: 1px solid #d2dfcf; border-radius: 16px; background: #fffdf4; box-shadow: 0 9px 25px rgba(24,59,35,.045); }
.utility-panel h3 { margin: 0 0 9px; font: 600 28px var(--serif); letter-spacing: -.04em; }
.utility-panel>p { margin: 0 0 23px; color: #657465; font-size: 13px; line-height: 1.75; }
.field-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.field { display: flex; flex-direction: column; gap: 8px; color: #4f6b56; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field select { width: 100%; min-height: 43px; padding: 9px 12px; border: 1px solid #bed0bd; border-radius: 7px; background: #fff; color: #213e2d; font-size: 13px; font-weight: 600; letter-spacing: 0; outline-color: #e1ac58; }
.result-panel { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 22px; padding: 21px 24px; border: 1px solid #446e50; border-radius: 10px; background: #1e4935; color: #f8f2dc; }
.result-panel__label { display: block; color: #b8d1b6; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.result-panel strong { display: block; margin-top: 5px; font: 600 27px var(--serif); }
.result-panel__number { font: 600 43px var(--serif); color: var(--gold); white-space: nowrap; }
.result-panel__sub { margin: 7px 0 0; color: #cde0ca; font-size: 12px; }
.type-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.type-score { margin-right: 12px; color: #345a3b; font-size: 12px; font-weight: 800; }
.type-pill { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 5px; background: var(--type-color,#617b65); color: white; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: capitalize; white-space: nowrap; }
.type-key { display: flex; flex-wrap: wrap; gap: 9px; margin: 19px 0; }
.type-key span { padding: 7px 9px; border-radius: 5px; color: #284635; font-size: 10px; font-weight: 800; }
.type-key .key-super { background: #cdeac7; }
.type-key .key-resist { background: #f4e5b9; }
.type-key .key-immune { background: #dfd2ec; }
.type-key .key-neutral { background: #e7e9dd; }
.matrix-wrap { overflow-x: auto; border: 1px solid #d2decf; border-radius: 12px; background: #fffdf7; box-shadow: 0 12px 30px rgba(26,65,37,.05); }
.matrix { width: 100%; min-width: 1050px; border-collapse: separate; border-spacing: 0; text-align: center; }
.matrix th, .matrix td { height: 44px; min-width: 48px; padding: 2px; border-right: 1px solid #e3e9dc; border-bottom: 1px solid #e3e9dc; font-size: 10px; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: #e4eadb; color: #3b6146; font-weight: 800; }
.matrix th:first-child { position: sticky; left: 0; z-index: 3; min-width: 115px; background: #edf1e7; color: #294534; text-align: left; padding-left: 14px; font-weight: 800; }
.matrix thead th:first-child { z-index: 4; background: #dbe6d4; }
.matrix td { background: #fffdf7; color: #a0ac9c; font-weight: 700; }
.matrix td[data-value="1.6"] { background: #d2ecd0; color: #22753c; }
.matrix td[data-value="0.6"] { background: #f5e6bd; color: #967026; }
.matrix td[data-value="0.3"] { background: #e9ddf0; color: #765393; }
.matrix tr.is-active td, .matrix td.is-active { outline: 2px solid #385d40; outline-offset: -2px; }
.matrix th.is-active { background: #f4d991; }
.weather-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.weather-card { padding: 20px; border: 1px solid #d4decf; border-radius: 11px; background: #fffdf4; }
.weather-card__icon { color: #568560; font-size: 28px; }
.weather-card h3 { margin: 9px 0 9px; font: 600 21px var(--serif); }
.weather-card p { margin: 0; color: #627264; font-size: 11px; line-height: 1.7; }
.insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.insight-card { padding: 26px; border: 1px solid #d7e2d4; border-radius: 13px; background: #fffdf4; }
.insight-card b { color: #538661; font: 600 25px var(--serif); }
.insight-card h3 { margin: 13px 0 9px; font: 600 24px var(--serif); }
.insight-card p { margin: 0; color: #647566; font-size: 12px; line-height: 1.8; }
.search-panel { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 12px; align-items: end; }
.search-panel.search-panel--legendary { grid-template-columns: 2fr repeat(2,1fr); }
.search-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 21px 0; color: #526855; font-size: 12px; }
.search-summary strong { color: #1e5234; }
.reset-button { border: 0; background: none; color: #2b7950; font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dex-grid, .legend-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.dex-card, .legend-card { position: relative; min-width: 0; padding: 20px; border: 1px solid #d5e0d0; border-radius: 13px; background: #fffdf6; text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s; }
.dex-card:hover, .legend-card:hover { transform: translateY(-3px); border-color: #9abc9a; box-shadow: 0 11px 26px rgba(37,76,49,.1); }
.dex-card__top, .legend-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #7b8e7a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.dex-card__sigil, .legend-card__sigil { display: grid; place-items: center; width: 70px; height: 70px; margin: 16px 0 13px; border: 1px solid color-mix(in srgb,var(--type-color,#75a57d) 35%,white); border-radius: 18px; background: color-mix(in srgb,var(--type-color,#75a57d) 14%,white); color: var(--type-color,#75a57d); font: 600 39px var(--serif); }
.dex-card h3, .legend-card h3 { overflow-wrap: anywhere; margin: 0 0 10px; color: #1c3a27; font: 600 22px/1.15 var(--serif); letter-spacing: -.035em; }
.dex-card__bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 19px; color: #6f806e; font-size: 10px; }
.dex-card__bottom button, .legend-card__bottom button { padding: 5px 0; border: 0; background: none; color: #26744a; font-size: 10px; font-weight: 800; }
.dex-card__bottom button:hover, .legend-card__bottom button:hover { text-decoration: underline; }
.badge { display: inline-flex; padding: 4px 6px; border-radius: 4px; background: #f4e4b4; color: #735821; font-size: 9px; font-weight: 800; }
.badge--legend { background: #e8dff2; color: #725293; }
.load-more { display: block; min-width: 180px; margin: 29px auto 0; padding: 13px 20px; border: 1px solid #42734f; border-radius: 6px; background: #244f36; color: #fff5dd; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.load-more:hover { background: #36714b; }
.empty-state { padding: 55px 20px; border: 1px dashed #a6bea5; border-radius: 12px; color: #557059; text-align: center; font: 500 20px var(--serif); }
.detail-panel { display: none; position: fixed; z-index: 100; inset: 0; padding: 20px; background: rgba(4,25,15,.7); overflow-y: auto; }
.detail-panel.is-open { display: flex; align-items: center; justify-content: center; }
.detail-panel__body { position: relative; width: min(580px,100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 35px; border: 1px solid #b7d0b0; border-radius: 17px; background: var(--paper); box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.detail-panel__close { position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b9cbb7; border-radius: 50%; background: #fff; color: #30563a; font-size: 23px; }
.detail-panel__eyebrow { color: #598767; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.detail-panel h2 { margin: 12px 0 15px; font: 600 42px var(--serif); letter-spacing: -.05em; }
.detail-panel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 25px; }
.stat-list { display: grid; gap: 14px; }
.stat-row { display: grid; grid-template-columns: 80px 1fr 60px; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; }
.stat-track { height: 8px; border-radius: 99px; background: #dfe8dc; overflow: hidden; }
.stat-track i { display: block; height: 100%; border-radius: 99px; background: #659c69; }
.detail-matchups { margin-top: 25px; padding-top: 22px; border-top: 1px solid #cfdbcb; }
.detail-matchups h3 { margin: 0 0 10px; font: 600 22px var(--serif); }
.detail-matchups p { margin: 0; color: #5d6f5d; font-size: 12px; line-height: 1.8; }
.compare-bar { position: fixed; z-index: 70; right: 18px; bottom: 17px; left: 18px; display: none; align-items: center; justify-content: space-between; gap: 16px; max-width: 800px; margin: auto; padding: 12px 16px; border: 1px solid #baad6b; border-radius: 10px; background: #163b2c; color: #fff5dc; box-shadow: 0 14px 40px rgba(0,0,0,.23); }
.compare-bar.is-visible { display: flex; }
.compare-bar p { margin: 0; font-size: 12px; }
.compare-bar a { color: #f3d889; font-size: 10px; font-weight: 800; white-space: nowrap; }
.compare-bar button { border: 0; background: none; color: var(--gold); font-size: 10px; font-weight: 800; white-space: nowrap; }
.compare-results { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 22px; }
.compare-results article { padding: 22px; border: 1px solid #d1dfce; border-radius: 11px; background: #fffdf5; }
.compare-results h3 { margin: 0 0 15px; font: 600 25px var(--serif); }
.compare-results p { margin: 6px 0; color: #526b56; font-size: 12px; }
.region-links { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.region-links a { padding: 20px; border: 1px solid #d3dfce; border-radius: 10px; background: #fffdf5; font: 600 19px var(--serif); }
.region-links a:hover { border-color: #78a87d; }
.region-links a small { display: block; margin-top: 6px; color: #677969; font: 700 10px var(--sans); letter-spacing: .08em; }
.arena-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.arena-card { padding: 22px; border: 1px solid #d5dfd0; border-radius: 12px; background: #fffdf4; }
.arena-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.arena-card__top b { color: #97aa95; font: 500 24px var(--serif); }
.arena-card h3 { margin: 20px 0 10px; font: 600 25px var(--serif); letter-spacing: -.035em; }
.arena-card p { min-height: 62px; margin: 0; color: #637565; font-size: 12px; line-height: 1.75; }
.arena-card a { display: inline-flex; gap: 7px; margin-top: 18px; color: #2a7750; font-size: 10px; font-weight: 800; }
.arena-card__count { display: block; margin-top: 10px; color: #718572; font-size: 10px; }
.legend-card__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; color: #7a8d77; font-size: 10px; }
.legend-card__bottom a { color: #26744a; font-size: 10px; font-weight: 800; }
.rift-prep { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; }
.rift-prep__result { padding: 25px; border: 1px solid #426b50; border-radius: 12px; background: #1e4935; color: #f7f2de; }
.rift-prep__result h3 { margin: 0 0 15px; font: 600 29px var(--serif); }
.rift-prep__result p { color: #d7e3d1; font-size: 12px; line-height: 1.75; }
.rift-prep__result strong { color: var(--gold); }
.rift-prep__link { display: inline-block; margin-top: 8px; color: #f3d889; font-size: 10px; font-weight: 800; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.guide-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 60px; align-items: start; margin-top: 42px; }
.guide-toc { position: sticky; top: 100px; padding: 23px; border: 1px solid #d5dfcf; border-radius: 11px; background: #edf2e8; }
.guide-toc strong { display: block; margin-bottom: 13px; color: #467451; font-size: 10px; letter-spacing: .18em; }
.guide-toc a { display: block; padding: 10px 0; border-top: 1px solid #d8e3d5; color: #344e37; font-size: 12px; font-weight: 700; }
.guide-toc a:hover { color: #26804b; }
.guide-article { min-width: 0; }
.guide-article section { padding: 0 0 42px; margin-bottom: 42px; border-bottom: 1px solid #d9e3d4; scroll-margin-top: 105px; }
.guide-article section:last-child { border: 0; }
.guide-article h2 { margin: 0 0 15px; font: 600 clamp(29px,4vw,42px) var(--serif); letter-spacing: -.05em; }
.guide-article h3 { margin: 24px 0 9px; font: 600 23px var(--serif); }
.guide-article p, .guide-article li { color: #576d5b; font-size: 14px; line-height: 1.9; }
.guide-article p { margin: 0 0 15px; }
.guide-article ul, .guide-article ol { padding-left: 21px; }
.guide-article li { margin-bottom: 8px; }
.guide-article strong { color: #254a32; }
.guide-article a { color: #2c8251; text-decoration: underline; text-underline-offset: 3px; }
.guide-callout { margin: 21px 0; padding: 20px 23px; border-left: 4px solid #d6b965; border-radius: 0 8px 8px 0; background: #f0f1df; }
.guide-callout p:last-child { margin-bottom: 0; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 20px 0; }
.control-grid article { padding: 20px; border: 1px solid #d4dfd0; border-radius: 10px; background: #fffdf4; }
.control-grid h3 { margin: 0 0 8px; }
.control-grid p { margin: 0; font-size: 12px; }
.checklist { display: grid; gap: 12px; margin: 20px 0; }
.checklist label { display: flex; align-items: start; gap: 12px; padding: 13px 15px; border: 1px solid #d5dfd0; border-radius: 8px; background: #fffdf6; color: #36543d; font-size: 13px; line-height: 1.55; cursor: pointer; }
.checklist input { width: 17px; height: 17px; margin-top: 1px; accent-color: #40744d; }
.checklist label:has(input:checked) { background: #e2eee0; text-decoration: line-through; color: #65846b; }
.page-next { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.page-next a { display: block; padding: 23px; border: 1px solid #4b7258; border-radius: 12px; background: #1e4935; color: #f8f1d8; }
.page-next a:hover { background: #2a5b41; }
.page-next span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.page-next strong { display: block; margin: 12px 0 8px; font: 600 23px var(--serif); }
.page-next p { margin: 0; color: #cfe0cd; font-size: 11px; line-height: 1.6; }
@media (max-width: 1000px) {
  .weather-grid { grid-template-columns: repeat(3,1fr); }
  .dex-grid, .legend-grid { grid-template-columns: repeat(3,1fr); }
  .guide-layout { gap: 35px; }
}
@media (max-width: 780px) {
  .page-hero, .page-hero__inner { min-height: 410px; }
  .page-hero::before { background-position: 65% center; }
  .page-hero::after { background: linear-gradient(90deg,rgba(8,29,24,.96),rgba(8,29,24,.7) 70%,rgba(8,29,24,.3)); }
  .page-section { padding-block: 65px; }
  .content-heading { display: block; }
  .content-heading>p { margin-top: 14px; }
  .search-panel, .search-panel.search-panel--legendary { grid-template-columns: 1fr 1fr; }
  .search-panel .field:first-child { grid-column: 1 / -1; }
  .dex-grid, .legend-grid { grid-template-columns: repeat(2,1fr); }
  .arena-grid { grid-template-columns: repeat(2,1fr); }
  .guide-layout { display: block; }
  .guide-toc { position: static; margin-bottom: 35px; }
  .guide-toc a { display: inline-block; margin-right: 14px; }
  .guide-toc a:last-child { margin-right: 0; }
  .rift-prep { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .page-hero h1 { font-size: 43px; }
  .page-hero p { font-size: 13px; }
  .breadcrumb { margin-bottom: 25px; }
  .page-hero, .page-hero__inner { min-height: 400px; }
  .field-grid, .search-panel, .search-panel.search-panel--legendary { grid-template-columns: 1fr; }
  .search-panel .field:first-child { grid-column: auto; }
  .result-panel { align-items: start; flex-direction: column; }
  .weather-grid, .insight-grid, .arena-grid, .region-links, .control-grid, .page-next { grid-template-columns: 1fr; }
  .dex-grid, .legend-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .dex-card, .legend-card { padding: 15px; }
  .dex-card__sigil, .legend-card__sigil { width: 55px; height: 55px; margin-block: 12px; font-size: 31px; }
  .dex-card h3, .legend-card h3 { font-size: 18px; }
  .dex-card__bottom, .legend-card__bottom { flex-wrap: wrap; }
  .detail-panel__body { padding: 28px 20px; }
  .detail-panel h2 { font-size: 35px; }
  .compare-results { grid-template-columns: 1fr; }
  .compare-bar { align-items: start; flex-direction: column; }
  .guide-article p, .guide-article li { font-size: 13px; }
}