/* Reference direction: an illustrated RPG chronicle, with real accessible UI. */
:root { --chronicle-bg: #031316; --chronicle-panel: #061d20; --chronicle-gold: #e8c779; --chronicle-border: #927542; }
html { scroll-padding-top: 88px; }
body { background: var(--chronicle-bg); }
main { display: flex; flex-direction: column; }
main > section { min-width: 0; }
.site-header { height: 72px; background: #031416f5; border-bottom: 1px solid var(--chronicle-border); }
.site-header .brand { color: var(--chronicle-gold); font-family: Georgia, serif; letter-spacing: .08em; }
.site-header nav a { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.button { border-radius: 3px; min-height: 48px; }
.button-gold { background: linear-gradient(#f1d793, #bf913d); border: 1px solid #fae3a6; box-shadow: inset 0 0 0 3px #62491450, 0 3px 18px #0008; color: #201706; }
.hero.hero { order: 0; min-height: 700px; padding: 120px 24px 70px; background: linear-gradient(0deg,#031316 0%,#03131618 35%),url('/assets/noxios/environments/forest-ancestral-background-v4.png') center/cover; }
.hero .hero-shade { background: radial-gradient(ellipse at 50% 45%,#031316e8 0%,#031316a0 35%,#03131615 75%); }
.hero .hero-inner { display: block; width: 100%; max-width: 920px; margin: auto; position: relative; z-index: 2; }
.hero .hero-copy { text-align: center; max-width: 760px; margin: auto; }
.hero h1 { font: 500 clamp(64px,8vw,118px)/1.1 Georgia,serif; letter-spacing: .075em; color: #f4d17d; text-shadow: 0 3px 0 #715224, 0 8px 30px #000; margin: 18px 0; }
.hero h2 { font: 500 clamp(24px,2.6vw,36px)/1.25 Georgia,serif; color: #ffe6a5; max-width: 690px; margin: 0 auto 16px; text-wrap: balance; }
.hero .hero-copy > p:not(.eyebrow) { margin: auto; max-width: 630px; color: #e3e6cf; }
.hero .hero-actions { justify-content: center; flex-wrap: wrap; }
.hero .hero-facts { justify-content: center; max-width: 590px; margin: 28px auto 0; border-color: #d6b67040; }
.hero .hero-combat { display: none; }
.hero .scroll-cue { bottom: 20px; }
.journey-features { order: 1; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); width: min(1360px,calc(100% - 48px)); margin: 0 auto 28px; padding: 24px 12px; background: linear-gradient(110deg,#0c292b,#031416); border: 1px solid var(--chronicle-border); box-shadow: inset 0 0 0 5px #031316, inset 0 0 0 6px #92754250; }
.journey-features article { text-align: center; padding: 8px 16px; border-right: 1px solid #92754240; }
.journey-features article:last-child { border: 0; }
.journey-features span { display: block; font: 26px Georgia,serif; color: #d9b55e; margin-bottom: 12px; }
.journey-features h2 { color: #f1d68b; font: 17px/1.3 Georgia,serif; text-transform: uppercase; margin: 0 0 10px; }
.journey-features p { color: #c3d0ca; font: 14px/1.6 "Segoe UI",sans-serif; margin: 0; }
.classes-section { order: 2; }
.gameplay { order: 3; }
.world-section { order: 4; }
.collection-section { order: 5; }
main > section:not(.hero):not(.journey-features):not(.classes-section):not(.gameplay):not(.world-section):not(.collection-section) { order: 6; }
.classes-section,.gameplay,.collection-section,.domain-section { width: min(1360px,calc(100% - 48px)); box-sizing: border-box; margin: 0 auto 28px; padding: 32px; border: 1px solid #92754280; background: linear-gradient(120deg,#082226,#031416); }
.section-heading { text-align: left; max-width: none; margin: 0 0 24px; }
.section-heading h2 { text-transform: uppercase; color: #f0d48b; font-size: clamp(26px,2.6vw,36px); letter-spacing: .035em; }
.section-heading p:not(.eyebrow) { margin-inline: 0; }
.paper-section .section-heading h2 { color: #f0d48b; }
.paper-section .section-heading > p:last-child { color: #c3d0ca; }
.offline-copy h2 { color: #f0d48b; }
.class-grid.expanded .class-hidden { background: #092226; color: #f0d48b; }
.class-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.class-card { border: 1px solid #92754280; border-radius: 3px; background: radial-gradient(ellipse at center,#143c3b,#041519 75%); min-width: 0; padding: 16px 10px; }
.class-card img { height: 160px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.class-card h3 { font-size: 19px; overflow-wrap: anywhere; }
.classes-toggle { margin-top: 24px; }
.gameplay .gameplay-demo { max-width: none; border-radius: 3px; border-color: #ba9453; }
.gameplay .gameplay-notes { margin-bottom: 0; flex-wrap: wrap; }
.world-section { width: min(1360px,calc(100% - 48px)); height: auto; min-height: 0; margin: 0 auto 28px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; overflow: visible; }
.world-section .world-panel { position: relative; inset: auto; min-height: 310px; opacity: 1 !important; border: 1px solid #92754280; overflow: hidden; }
.world-panel h2 { font-size: 34px; }
.final-cta { padding: 64px 24px; border-color: #927542; }
@media(max-width:1000px) { .journey-features { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 0; }.journey-features article:nth-child(3) { border-right: 0; }.class-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) {
  .site-header { height: 68px; }.hero.hero { min-height: 640px; padding: 100px 20px 60px; }.hero h1 { font-size: clamp(54px,14vw,80px); }.hero .hero-facts { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }.hero .eyebrow { font-size:10px; }
  .journey-features,.classes-section,.gameplay,.collection-section,.domain-section,.world-section { width: calc(100% - 24px); }
  .journey-features { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 18px 8px; }.journey-features article { padding: 8px; }.journey-features article:nth-child(3) { border-right:1px solid #92754240; }.journey-features article:nth-child(even) { border-right:0; }
  .classes-section,.gameplay,.collection-section,.domain-section { padding: 20px 14px; }.class-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.class-card img { height:130px; }.world-section { grid-template-columns:1fr; }.world-section .world-panel { min-height:260px; }
}

/* Conversion-first landing hierarchy */
.hero.hero { min-height: 900px; padding-bottom: 58px; }
.hero .hero-inner { max-width: 1360px; display:grid; grid-template-columns:minmax(390px,.78fr) minmax(560px,1.22fr); gap:56px; align-items:center; }
.hero .hero-copy { text-align:left; max-width:620px; margin:0; }
.hero h1 { font-size:clamp(58px,6.7vw,104px); margin:12px 0; }
.hero h2 { margin-inline:0; }
.hero .hero-copy > p:not(.eyebrow) { margin-inline:0; }
.hero .hero-actions,.hero .hero-facts { justify-content:flex-start; margin-inline:0; }
.hero .hero-combat { display:block; transform:none; background:#06170ded; box-shadow:0 30px 90px #000d,0 0 0 1px #f1cc7160; }
.hero .combat-field { height:370px; }
.hero .preview-unit.preview-hero { left:20%; width:19%; }
.hero .preview-unit.preview-lyra { left:8%; width:16%; }
.hero .preview-unit.preview-orin { left:34%; width:16%; }
.hero .preview-unit.preview-boss { left:59%; width:35%; }
.journey-features { order:1; }
.gameplay { order:2; }
.race-hook { order:3; }
.classes-section { order:4; }
.world-section { order:5; }
.collection-section { order:6; }
.offline-section { order:7; }
.social-section { order:8; }
main > #como-jogar,main > #despertar,main > #dominio,main > #boss { display:none; }
.race-hook { width:min(1360px,calc(100% - 48px)); margin:0 auto 28px; padding:46px 40px; border:1px solid #92754280; background:linear-gradient(125deg,#0b2728,#041618); color:#dbe5d9; }
.rarity-path { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid #92754270; background:#031416; }
.rarity-path span { padding:16px 8px; text-align:center; border-right:1px solid #92754250; font-weight:800; font-size:12px; color:#cdd7cf; }
.rarity-path span:last-child { border:0; }.rarity-path [data-tier="rare"]{color:#6fb8ff}.rarity-path [data-tier="epic"]{color:#c08cff}.rarity-path [data-tier="legendary"]{color:#f1b94f}.rarity-path [data-tier="mythic"]{color:#ff7575}.rarity-path [data-tier="celestial"]{color:#fff0a5;text-shadow:0 0 14px #f7ce68}
.race-lineup { display:grid; grid-template-columns:repeat(6,1fr); align-items:end; margin-top:22px; min-height:210px; padding:10px 18px 0; background:radial-gradient(ellipse at center bottom,#24473b 0,#06191c 68%); border-bottom:4px solid #8c7040; }
.race-lineup img { width:100%; height:210px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 10px 7px #000); }
.world-section { display:block; padding:38px; background:linear-gradient(120deg,#082226,#031416); border:1px solid #92754280; }
.world-carousel { position:relative; min-height:520px; overflow:hidden; border:1px solid #a8874d; background:#020d0f; }
.world-card { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .45s ease; }
.world-card.is-active { opacity:1; visibility:visible; }
.world-card img { width:100%; height:100%; object-fit:cover; filter:brightness(.62) saturate(1.1); }
.world-card:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#031416e8 0%,#03141655 48%,transparent 80%),linear-gradient(0deg,#031416aa,transparent 45%); }
.world-card div { position:absolute; z-index:2; left:6%; bottom:12%; max-width:520px; }
.world-card small { color:#e4be68; letter-spacing:.12em; font-weight:900; }.world-card h3 { margin:10px 0; color:#ffe7a8; font:900 clamp(34px,5vw,64px)/1 Georgia,serif; }.world-card p { color:#d8e2d6; font-size:16px; }
.world-controls { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:14px; color:#e9cb83; }.world-controls button { width:46px;height:42px;border:1px solid #9d8048;background:#06191c;color:#f4d98f;cursor:pointer }.world-controls button:hover { background:#173534; }
.battle-pet { position:absolute; z-index:3; left:43%; bottom:15%; width:8%; height:18%; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 7px 4px #000); }
.battle-drops { position:absolute; z-index:4; right:8%; bottom:22%; display:flex; gap:7px; }.battle-drops span { padding:7px 9px; border:1px solid #caa557; background:#071713e8; color:#f2ce70; font-size:11px; font-weight:900; box-shadow:0 5px 14px #0008; }
.battle-skills .auto-combat { width:auto; min-width:68px; border-radius:3px; padding:5px 9px; color:#c9d3cb; background:#182021; font-size:10px; }.battle-skills .auto-combat small{font-size:8px}.battle-skills .auto-combat.is-on{color:#9dffac;border-color:#55b96b;background:#0b2919;box-shadow:0 0 14px #48de6d33}
.social-section { width:min(1360px,calc(100% - 48px)); margin:0 auto 28px; padding:52px; display:grid; grid-template-columns:1fr 1fr; gap:70px; border:1px solid #92754280; }
.social-section h2 { color:#f0d48b; font:900 clamp(28px,3vw,44px)/1.08 Georgia,serif; }.social-section p { color:#b9cbc2; line-height:1.65; }
.ranking-list { display:grid; gap:8px; margin-top:24px; }.ranking-list span { display:grid; grid-template-columns:48px 1fr auto; align-items:center; padding:14px 16px; border:1px solid #92754260; background:#06191c; color:#e8d7ae; }.ranking-list b { color:#e3bd64; }.ranking-list small { color:#8fb7a8; }
@media(max-width:1100px){.hero .hero-inner{grid-template-columns:1fr;max-width:800px}.hero .hero-copy{text-align:center;margin:auto}.hero .hero-actions,.hero .hero-facts{justify-content:center;margin-inline:auto}.hero .hero-copy>p:not(.eyebrow),.hero h2{margin-inline:auto}.hero.hero{padding-top:110px}.hero .combat-field{height:320px}.site-header nav{gap:12px}.site-header nav a{font-size:10px}}
@media(max-width:700px){.hero.hero{min-height:auto;padding-bottom:80px}.hero .hero-inner{display:block}.hero .hero-combat{margin-top:34px}.hero .combat-field{height:220px}.race-hook,.social-section{width:calc(100% - 24px);padding:24px 14px}.rarity-path{grid-template-columns:repeat(4,1fr)}.rarity-path span{border-bottom:1px solid #92754250}.race-lineup{grid-template-columns:repeat(3,1fr)}.race-lineup img{height:130px}.world-section{padding:20px 14px}.world-carousel{min-height:390px}.world-card div{left:7%;right:7%;bottom:9%}.social-section{grid-template-columns:1fr;gap:34px}.battle-pet{width:12%;left:42%}.battle-drops{display:none}.battle-skills .auto-combat{min-width:50px}}