/* Shared illustrated pages: Game, Heroes and FAQ. */
.lore-page .world { background-image: linear-gradient(180deg, #03101585, #061214e8 430px, #061214 750px), url("assets/citadel-1920.webp"); background-size: 100% 100%, 100% auto; }
.lore-main { padding-top: 27px; }
.breadcrumbs { display: flex; gap: 12px; align-items: center; font-size: 13px; color: #a9b8b7; margin-bottom: 40px; }
.breadcrumbs a { color: #d9bd83; text-decoration: none; }.breadcrumbs a:hover { color: #fff0ca; }.breadcrumbs > span:last-child { color: #ced6cc; }
.lore-eyebrow { font-family: var(--display); text-transform: uppercase; color: #cba970; font-size: 11px; font-weight: 500; letter-spacing: .2em; line-height: 1.7; margin: 0 0 16px; }
.lore-main h1 { font-size: clamp(32px, 3.35vw, 51px); font-weight: 500; line-height: 1.22; letter-spacing: .018em; text-transform: none; text-wrap: balance; }
.lore-main h1 em { font-style: normal; color: #e8c680; }
.lore-main h2 { font-size: clamp(24px, 2.5vw, 35px); font-weight: 500; line-height: 1.35; text-wrap: balance; color: #f0dfb8; }
.lore-main p { line-height: 1.8; color: #bac9c6; font-size: 17px; }.lore-main .lore-eyebrow { color: #cba970; font-size: 11px; }
.lore-main .lore-lead { color: #e0e3d2; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.7; margin: 23px 0 14px; }
.lore-masthead { display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 45px; padding-bottom: 42px; }
.lore-masthead > div { min-width: 0; }.lore-masthead > div > p:not(.lore-eyebrow) { max-width: 540px; }
.lore-screenshot { min-width: 0; position: relative; margin: 0; border: 1px solid #9c7944; background: #071519; padding: 7px; box-shadow: 0 0 0 4px #0b1618, 0 0 0 5px #5d482766, 0 20px 45px #0006; }
.lore-screenshot::before { content: ""; position: absolute; top: -6px; left: calc(50% - 5px); width: 9px; height: 9px; background: #c79950; border: 1px solid #f3d59c; transform: rotate(45deg); }
.lore-shot { position: relative; }
.lore-shot > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lore-screenshot figcaption { padding: 10px 6px 4px; color: #9caaa3; font-size: 11px; letter-spacing: .09em; text-align: center; }
.lore-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 25px; }
.lore-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 46px; padding: 11px 19px; border: 1px solid #9e7845; background: linear-gradient(145deg, #25312d, #091619); font-family: var(--display); font-size: 12px; font-weight: 500; color: #efddb3; text-decoration: none; transition: background .2s, border-color .2s; }
.lore-button:hover { border-color: #ebc986; background: #243834; }.lore-button span { font: 19px Georgia, serif; }
.lore-stats { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; margin: 12px 0 65px; padding: 23px 0; border-block: 1px solid #90714977; background: linear-gradient(90deg, transparent, #18302b66, transparent); }
.lore-stats > div + div { border-left: 1px solid #90714955; }.lore-stats dt { font-family: var(--display); font-size: 35px; color: #e8cb8f; line-height: 1.4; }.lore-stats dd { margin: 4px 0 0; font-size: 13px; color: #b8c4ba; }
.lore-section { margin: 70px 0; }.lore-section-heading { max-width: 730px; margin: 0 auto 32px; text-align: center; }.lore-section-heading h2 { margin: 0 0 14px; }.lore-section-heading > p { margin-top: 0; }.lore-section-heading .ornament { margin-top: 20px; max-width: 180px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { position: relative; padding: 29px 27px; border: 1px solid #80633d77; border-top-color: #be9553; background: radial-gradient(ellipse at top, #22413933, transparent 75%), #09181bcc; }
.feature-number { display: block; font-family: var(--display); font-size: 32px; color: #a58754; margin-bottom: 18px; }.feature-card h3 { font-size: 18px; font-weight: 500; color: #ead3a5; margin: 0 0 14px; line-height: 1.5; }.feature-card p { font-size: 16px; margin: 0; }.feature-card .lore-eyebrow { margin-bottom: 18px; }.feature-footnote { display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid #aa864733; font-size: 12px; font-style: italic; color: #d9c69c; }
.boss-grid > :nth-child(2) { border-top-color: #85cace; background: radial-gradient(ellipse at top, #20474e44, transparent 75%), #09181bcc; }.boss-grid > :nth-child(3) { border-top-color: #c37147; background: radial-gradient(ellipse at top, #612d2344, transparent 75%), #09181bcc; }
.lore-feature { display: grid; grid-template-columns: 1.18fr 1fr; gap: 50px; align-items: center; margin: 85px 0; }.lore-feature h2 { margin: 0 0 20px; }.lore-feature p { margin-bottom: 15px; }.lore-feature.reverse > figure { grid-column: 2; grid-row: 1; }.lore-feature.reverse > div { grid-column: 1; grid-row: 1; }
.text-link { display: inline-block; color: #e8c78b; text-decoration: underline; text-underline-offset: 5px; line-height: 1.7; padding-block: 7px; }.text-link:hover { color: #fff3d8; }
.lore-main .alpha-note { font-size: 13px; color: #a1b1ad; padding-left: 15px; border-left: 2px solid #aa864788; }
.lore-cta { padding: 45px 25px; margin: 60px 0 35px; text-align: center; border-block: 1px solid #a17c484d; background: radial-gradient(ellipse at center, #253d2e55, transparent 74%); }.lore-cta h2 { margin: 0 0 13px; }.lore-cta p { margin: 0; }.lore-cta .lore-eyebrow { margin: 0 0 14px; }.lore-cta .lore-actions { justify-content: center; }
.lore-heading { margin: 8px auto 45px; max-width: 840px; text-align: center; }.lore-heading .ornament { margin-top: 27px; width: 180px; }
.champion-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 65px; }
.ember { --hero-accent: #d7a36c; --hero-glow: #5f261d; }.verdant { --hero-accent: #a6c891; --hero-glow: #143e32; }.bronze { --hero-accent: #d8b879; --hero-glow: #45331c; }.arcane { --hero-accent: #c69ce7; --hero-glow: #382343; }
.champion-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #94744799; color: #f4e8cc; text-decoration: none; background: #0c1a1d; }
.champion-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 37% top; transition: transform .4s; }.champion-tile:hover { border-color: var(--hero-accent); }.champion-tile:hover img { transform: scale(1.035); }.champion-tile > span { position: absolute; inset: auto 0 0; padding: 38px 10px 19px; text-align: center; background: linear-gradient(transparent, #030c10ec 35%, #030c10); font-family: var(--display); }.champion-tile small { display: block; font-size: 11px; color: var(--hero-accent); letter-spacing: .15em; margin-bottom: 5px; }.champion-tile strong { font-weight: 500; font-size: 17px; }
.champion-profile { display: grid; grid-template-columns: 31% 1fr; gap: 35px; padding: 30px; margin-bottom: 35px; scroll-margin-top: 25px; border: 1px solid #81673f77; background: radial-gradient(ellipse at top left, var(--hero-glow), transparent 52%), #08161a; }
.champion-portrait { position: relative; align-self: start; border: 1px solid #9a795266; background: #071215; overflow: hidden; }.champion-portrait > img { width: 100%; height: auto; object-fit: cover; aspect-ratio: .85; object-position: 37% top; }.champion-portrait > div { position: relative; text-align: center; margin-top: -45px; padding: 45px 10px 20px; background: linear-gradient(transparent, #061013 45%); }.champion-portrait svg { color: var(--hero-accent); width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 1.5; }.champion-portrait p { margin: 10px 0 0; color: var(--hero-accent); font-style: italic; font-size: 15px; }
.champion-content { min-width: 0; }.champion-content > .lore-eyebrow { color: var(--hero-accent); margin-bottom: 8px; }.champion-content h2 { margin: 0 0 15px; font-size: 33px; }.champion-content > p { font-size: 16px; margin-block: 12px; }.champion-content > .champion-intro { color: #d6ded1; }
.trait-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 20px; list-style: none; }.trait-list li { font-size: 11px; border: 1px solid #a5b4a433; color: #c4d0c6; padding: 5px 9px; background: #0002; }
.lore-main .minor-heading { font-size: 13px; font-weight: 500; color: var(--hero-accent); letter-spacing: .08em; margin: 27px 0 14px; }
.ability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin: 0; }.ability-list dt { font-size: 15px; color: #ecdfc8; line-height: 1.6; }.ability-list dt span { display: inline-grid; place-items: center; width: 23px; height: 23px; color: var(--hero-accent); border: 1px solid #c2ac7355; margin-right: 9px; font-size: 12px; }.ability-list dd { margin: 5px 0 0 32px; color: #aebfbb; font-size: 14px; line-height: 1.7; }
.talent-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.talent-paths > div { border-top: 1px solid #ccb98555; padding-top: 12px; }.talent-paths h4 { font-family: var(--display); font-size: 12px; font-weight: 500; color: #ded2b9; line-height: 1.65; margin: 0 0 5px; }.talent-paths p { font-size: 13px; color: #aabcb6; line-height: 1.65; margin: 0; }.lore-main .content-note { text-align: center; color: #91a7a0; font-size: 13px; }
.release-banner { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 32px 45px; margin: 0 0 55px; border: 1px solid #a9874f; background: radial-gradient(ellipse at left, #4c412038, transparent), #07171c; }.release-banner h2 { font-size: clamp(28px, 3vw, 43px); margin: 0 0 6px; color: #efd193; }.release-banner h2 span { color: #fff0c7; }.release-banner p { margin: 0; font-size: 15px; }.release-banner > div:first-child p:last-child { font-size: 13px; }.release-banner .lore-eyebrow { margin-bottom: 8px; }.release-banner > div:last-child { align-self: center; }.release-banner .lore-button { margin-top: 15px; }
.faq-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 55px; }.faq-sidebar { align-self: start; position: sticky; top: 30px; }.faq-sidebar nav { display: flex; flex-direction: column; }.faq-sidebar nav a { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; color: #dcd6bf; font-size: 15px; text-decoration: none; border-bottom: 1px solid #a3834c33; }.faq-sidebar nav a:hover { color: #edca89; }.faq-contact { margin-top: 35px; padding-top: 20px; }.faq-contact h2 { font-size: 19px; margin: 0 0 10px; }.faq-contact p { font-size: 15px; }.faq-contact a { color: #d7bc89; font-size: 13px; overflow-wrap: anywhere; text-underline-offset: 4px; }
.faq-group { margin-bottom: 40px; scroll-margin-top: 25px; }.faq-group > h2 { font-size: 24px; margin: 0 0 18px; }.faq-item { border: 1px solid #80683e70; background: #0a1a1de0; margin-bottom: 11px; }.faq-item[open] { border-color: #a2854caa; background: linear-gradient(120deg, #19302aaa, #07191c); }.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; min-height: 65px; padding: 18px 23px; font-size: 17px; line-height: 1.5; color: #e3dcc6; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary:focus-visible { outline: 2px solid #ffe9aa; outline-offset: 3px; }.faq-item summary > span { width: 12px; height: 12px; position: relative; flex-shrink: 0; }.faq-item summary > span::before, .faq-item summary > span::after { content: ''; background: #d2af71; position: absolute; inset: 5px 0; height: 1px; }.faq-item summary > span::after { transform: rotate(90deg); }.faq-item[open] summary > span::after { transform: none; }.faq-item > div { padding: 0 23px 20px; }.faq-item > div p { margin: 0; font-size: 16px; }.faq-item .text-link { font-size: 14px; margin-top: 6px; }
@media (max-width: 1100px) { .lore-masthead, .lore-feature { gap: 30px; }.champion-profile { grid-template-columns: 28% 1fr; gap: 25px; padding: 25px; }.feature-card { padding: 24px 20px; }.faq-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }.champion-tile strong { font-size: 14px; } }
@media (max-width: 850px) { .lore-masthead { grid-template-columns: 1fr; gap: 35px; }.lore-masthead > div > p:not(.lore-eyebrow) { max-width: 680px; }.lore-masthead .lore-screenshot { max-width: 720px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { padding: 25px; }.feature-number { float: left; margin: 0 24px 10px 0; }.lore-feature { gap: 25px; }.champion-profile { grid-template-columns: 1fr; }.champion-portrait { max-width: 310px; margin: 0 auto; width: 100%; }.champion-portrait > img { aspect-ratio: 1.1; }.champion-content h2 { font-size: 30px; }.faq-layout { grid-template-columns: 1fr; gap: 30px; }.faq-sidebar { position: static; }.faq-sidebar nav { flex-direction: row; gap: 18px; flex-wrap: wrap; }.faq-sidebar nav a { font-size: 14px; }.faq-contact { display: none; } }
@media (max-width: 760px) { .lore-page .world { background-size: 100% 100%, auto 640px; background-position: center top; }.lore-main { padding-top: 22px; }.breadcrumbs { margin-bottom: 30px; }.lore-main h1 { font-size: clamp(30px, 7vw, 44px); }.lore-main p { font-size: 16px; }.lore-main .lore-eyebrow { font-size: 10px; }.lore-main .lore-lead { font-size: 18px; }.lore-masthead { padding-bottom: 28px; }.lore-stats { margin-bottom: 40px; }.lore-stats dt { font-size: 27px; }.lore-stats dd { font-size: 11px; }.lore-section { margin: 45px 0; }.lore-feature { grid-template-columns: 1fr; margin: 45px 0; gap: 30px; }.lore-feature.reverse > figure, .lore-feature.reverse > div { grid-column: auto; grid-row: auto; }.lore-feature > div { text-align: left; }.lore-feature h2 br { display: none; }.lore-cta { margin-top: 40px; padding: 35px 10px; }.champion-nav { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 35px; }.champion-tile strong { font-size: 16px; }.champion-profile { padding: 21px; }.champion-content > p { font-size: 15px; }.talent-paths { gap: 14px; }.lore-main .talent-paths p { font-size: 13px; }.release-banner { grid-template-columns: 1fr; gap: 20px; padding: 25px; }.release-banner > div + div { padding-top: 20px; border-top: 1px solid #a9874f55; }.faq-item summary { font-size: 16px; padding: 17px; }.faq-item > div { padding: 0 17px 18px; }.lore-heading { margin-bottom: 30px; } }
@media (max-width: 460px) { .lore-stats { grid-template-columns: 1fr 1fr; gap: 24px 0; }.lore-stats > div:nth-child(3) { border-left: none; }.lore-button { padding-inline: 15px; font-size: 11px; }.lore-actions { gap: 10px; }.ability-list, .talent-paths { grid-template-columns: 1fr; }.ability-list { gap: 15px; }.champion-profile { padding: 17px; }.champion-content h2 { font-size: 26px; }.champion-tile strong { font-size: 13px; }.champion-tile > span { padding-bottom: 12px; }.champion-tile small { font-size: 10px; }.champion-portrait { max-width: 100%; }.faq-sidebar nav { flex-direction: column; gap: 0; }.release-banner { padding: 23px 20px; }.lore-heading .lore-lead br { display: none; } }