:root {
  --bg:#0e0c0a;
  --surface:#181410;
  --surface2:#231c16;
  --edge:#5a4a33;
  --gold:#e8c77a;
  --text:#d9cfbf;
  --muted:#a79a86;
  --display:Georgia,'Times New Roman',serif;
  color-scheme:dark;
  font-family:'Segoe UI',Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px
}
::selection {
  background:#745a30;
  color:#fff
}
.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  padding:12px;
  background:var(--bg)
}
.skip-link:focus {
  top:15px
}
.site-header {
  height:88px;
  display:flex;
  align-items:center;
  gap:40px;
  padding-inline:48px;
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  border-bottom:1px solid #e8c77a25;
  background:linear-gradient(#0e0c0ae6,#0e0c0a40)
}
.brand {
  width:124px;
  flex-shrink:0
}
.site-header nav {
  display:flex;
  gap:30px;
  margin-left:auto;
  font-size:13px
}
.site-header nav a {
  color:#d9cfbf
}
.site-header nav a:hover,.text-link:hover {
  color:var(--gold)
}
.header-community {
  font-size:13px;
  color:var(--gold);
  padding-left:32px;
  border-left:1px solid var(--edge)
}
.header-community span {
  margin-left:16px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:780px;
  height:min(920px,100svh);
  position:relative;
  display:flex;
  align-items:center;
  background:#15110c;
  isolation:isolate
}
.hero-art {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#0e0c0af5 0%,#0e0c0aba 38%,#0e0c0a22 78%),linear-gradient(0deg,#0e0c0a 0%,transparent 35%),url('assets/background.jpg') right 28% / cover no-repeat
}
.hero-content {
  padding-top:100px;
  padding-bottom:100px
}
.eyebrow {
  font-size:11px;
  font-weight:600;
  letter-spacing:2.4px;
  color:var(--gold);
  margin:0 0 24px;
  line-height:1.7
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:50%;
  margin:0 10px 1px 0
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:400
}
h1 {
  font-size:clamp(52px,5.6vw,82px);
  line-height:1.08;
  letter-spacing:-2.7px;
  margin-bottom:28px
}
em {
  font-style:normal;
  color:var(--gold)
}
.hero-description {
  max-width:465px;
  font-size:16px;
  line-height:1.9;
  color:#c5b9a6
}
.actions {
  display:flex;
  gap:12px;
  margin-top:34px
}
.button {
  min-height:49px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  padding:14px 22px;
  font-size:12px;
  letter-spacing:.3px;
  border:1px solid var(--edge);
  transition:background .2s,transform .2s
}
.button:hover {
  transform:translateY(-2px)
}
.primary {
  background:#e8c77a;
  color:#23180b;
  border-color:#e8c77a
}
.primary:hover {
  background:#f4d99b
}
.secondary {
  background:#0e0c0a80;
  color:var(--text)
}
.secondary:hover {
  background:var(--surface2)
}
.hero-note {
  font-size:11px;
  color:var(--muted);
  margin-top:22px
}
.hero-bottom {
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid #e8c77a28;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.hero-bottom a {
  letter-spacing:.5px
}
.hero-bottom time {
  color:var(--gold);
  margin-inline:15px
}
.intro {
  display:grid;
  grid-template-columns:1fr;
  padding-top:100px;
  padding-bottom:55px
}
h2 {
  font-size:clamp(34px,3.4vw,49px);
  line-height:1.2;
  letter-spacing:-1px;
  margin-bottom:0
}
.intro-copy {
  padding-top:40px;
  font-size:16px;
  line-height:1.9
}
.muted {
  color:var(--muted)
}
.intro-copy .muted {
  font-size:14px
}
.systems {
  padding-bottom:100px
}
.system-feature {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  border:1px solid var(--edge);
  background:var(--surface)
}
.system-art {
  position:relative;
  display:flex;
  align-items:center;
  background:#101113;
  border-right:1px solid var(--edge);
  min-width:0
}
.system-art img {
  width:100%
}
.image-label {
  position:absolute;
  left:22px;
  bottom:16px;
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--muted);
  background:#101113dd;
  padding:6px 8px
}
.system-copy {
  padding:52px 44px;
  align-self:center
}
.system-copy .eyebrow,.text-system .eyebrow {
  margin-bottom:18px
}
h3 {
  font-size:34px;
  line-height:1.18;
  margin-bottom:20px
}
.system-copy p:not(.eyebrow),.text-system p:not(.eyebrow) {
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
.tags {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:25px;
  font-size:10px;
  color:#c6ad7e
}
.tags span {
  border-top:1px solid var(--edge);
  padding-top:9px
}
.system-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:20px;
  gap:20px
}
.text-system {
  position:relative;
  overflow:hidden;
  padding:38px 40px;
  border:1px solid #5a4a3380;
  background:linear-gradient(120deg,#211a13,#14110e)
}
.text-system h3 {
  font-size:30px
}
.text-system p {
  max-width:420px
}
.system-number {
  position:absolute;
  right:24px;
  top:18px;
  font:100px var(--display);
  color:#e8c77a0c;
  pointer-events:none
}
.prophecy-strip {
  display:flex;
  align-items:center;
  gap:40px;
  padding:30px 0;
  border-bottom:1px solid var(--edge);
  margin-top:24px
}
.prophecy-strip .eyebrow {
  margin-bottom:8px;
  font-size:9px
}
.prophecy-strip h3 {
  font-size:26px;
  margin:0
}
.prophecy-strip>p {
  flex:1;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
  max-width:480px;
  margin:0 auto
}
.text-link {
  font-size:12px;
  color:var(--gold);
  white-space:nowrap
}
.text-link span {
  margin-left:18px
}
.journal {
  padding:85px 0;
  background:#181410;
  border-block:1px solid #5a4a3360
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px
}
.section-heading .muted {
  font-size:12px;
  line-height:1.8;
  margin:0
}
.journal-entry {
  display:grid;
  grid-template-columns:145px 1fr;
  gap:25px;
  padding:36px 0;
  border-top:1px solid #5a4a3380
}
.journal-entry time {
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.journal-entry time strong {
  display:block;
  font:48px var(--display);
  color:var(--gold);
  margin-bottom:6px
}
.entry-meta {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--muted);
  margin-bottom:18px
}
.release-label {
  color:#c7bd9e;
  letter-spacing:1px
}
.journal-entry h3 {
  font-size:27px;
  margin-bottom:12px
}
.journal-entry p {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
  max-width:770px;
  margin-bottom:18px
}
details {
  font-size:13px
}
summary {
  cursor:pointer;
  color:var(--gold);
  list-style:none;
  display:inline-flex;
  gap:35px;
  padding:6px 0
}
summary::-webkit-details-marker {
  display:none
}
.system-copy details[open] summary span, .journal-entry details[open] summary span {
  transform:rotate(45deg)
}
.detail-content {
  margin-top:16px;
  padding:20px 24px;
  background:#0e0c0a80;
  border-left:2px solid var(--edge);
  line-height:1.9;
  color:var(--muted);
  max-width:770px
}
.detail-content ul {
  padding-left:16px;
  margin:0
}
.journal-source {
  font-size:10px;
  color:var(--muted);
  margin:15px 0 0 170px
}
.gallery {
  padding-top:100px;
  padding-bottom:85px
}
.gallery-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.gallery-item {
  padding:0;
  background:transparent;
  border:1px solid #5a4a3380;
  text-align:left;
  transition:border-color .2s
}
.gallery-item:hover {
  border-color:var(--gold)
}
.gallery-item img {
  aspect-ratio:16/9;
  width:100%;
  object-fit:cover
}
.gallery-item>span {
  display:flex;
  justify-content:space-between;
  padding:19px 22px;
  font-size:12px
}
.gallery-item>span>span {
  color:var(--gold)
}
.community {
  text-align:center;
  border-top:1px solid var(--edge);
  padding:60px 0 85px
}
.ornament {
  font:36px var(--display);
  color:var(--gold);
  display:block;
  margin-bottom:25px
}
.community .eyebrow {
  font-size:10px
}
.community h2 {
  font-size:clamp(32px,3vw,44px)
}
.community>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
  margin:24px 0 28px
}
footer {
  border-top:1px solid #5a4a3370;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:28px 0;
  color:var(--muted);
  font-size:10px
}
footer>a:first-child {
  color:var(--gold);
  letter-spacing:2px
}
footer a span {
  color:var(--muted);
  letter-spacing:.5px
}
dialog {
  width:min(1200px,95vw);
  max-height:95svh;
  padding:45px 16px 16px;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--edge)
}
dialog::backdrop {
  background:#000d
}
dialog img {
  max-height:75svh;
  object-fit:contain;
  margin:auto
}
dialog p {
  text-align:center;
  font-size:12px;
  margin:16px 0 0
}
.dialog-close {
  position:absolute;
  right:16px;
  top:10px;
  border:0;
  background:transparent;
  padding:5px;
  font-size:13px
}

@media(min-width:1600px) {
  .hero-art {
  background-position:center,right 32%;
  background-size:cover
}

}

@media(max-width:1000px) {
  .site-header {
  padding-inline:28px;
  gap:25px
}
.site-header nav {
  gap:18px
}
.wrap {
  width:calc(100% - 56px)
}
.system-copy {
  padding:30px
}
.intro {
  gap:50px
}
.header-community {
  padding-left:20px
}
.prophecy-strip {
  gap:24px
}
h1 {
  font-size:64px
}

}

@media(max-width:720px) {
  html {
  scroll-padding-top:20px
}
.wrap {
  width:calc(100% - 40px)
}
.site-header {
  height:74px;
  padding-inline:20px;
  gap:18px
}
.brand {
  width:100px
}
.menu-toggle {
  display:flex;
  gap:12px;
  align-items:center;
  background:transparent;
  border:1px solid var(--edge);
  padding:8px 10px;
  margin-left:auto;
  font-size:12px
}
.header-community {
  display:none
}
.site-header nav {
  display:none;
  position:absolute;
  top:73px;
  left:0;
  right:0;
  background:#181410;
  flex-direction:column;
  padding:20px;
  border-bottom:1px solid var(--edge);
  gap:0
}
.site-header nav.is-open {
  display:flex
}
.site-header nav a {
  padding:14px 5px
}
.hero {
  min-height:720px;
  height:auto
}
.hero-art {
  background:linear-gradient(90deg,#0e0c0ae0,#0e0c0a78),linear-gradient(0deg,#0e0c0a,transparent 70%),url('assets/background.jpg') 60% top / auto 100% no-repeat
}
.hero-content {
  padding-top:145px;
  padding-bottom:140px
}
h1 {
  font-size:clamp(43px,9.8vw,64px);
  letter-spacing:-1.8px
}
.hero-description {
  font-size:14px;
  max-width:380px
}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px
}
.actions {
  gap:10px;
  flex-wrap:wrap
}
.button {
  font-size:11px;
  padding:13px 17px;
  gap:20px
}
.hero-note {
  max-width:280px;
  line-height:1.7;
  font-size:10px
}
.hero-bottom {
  bottom:24px;
  font-size:8px;
  letter-spacing:.7px;
  gap:15px
}
.hero-bottom a {
  max-width:135px;
  line-height:2;
  text-align:right
}
.hero-bottom time {
  margin-inline:4px
}
.intro {
  padding-top:60px;
  padding-bottom:30px;
  grid-template-columns:1fr;
  gap:24px
}
.intro-copy {
  padding-top:0;
  font-size:14px
}
.intro-copy p:last-child {
  margin-bottom:0
}
.system-feature {
  grid-template-columns:1fr
}
.system-art {
  border-right:0;
  border-bottom:1px solid var(--edge)
}
.system-copy {
  padding:30px 25px
}
.system-copy h3 br {
  display:none
}
.system-copy h3 {
  font-size:30px
}
.system-pair {
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px
}
.text-system {
  padding:30px 25px
}
.prophecy-strip {
  align-items:start;
  flex-wrap:wrap;
  gap:20px
}
.prophecy-strip>p {
  flex-basis:100%;
  order:1
}
.prophecy-strip .text-link {
  margin-left:auto;
  align-self:center
}
.systems {
  padding-bottom:60px
}
.journal {
  padding:55px 0
}
.section-heading {
  display:block;
  margin-bottom:30px
}
.section-heading>.muted {
  display:block;
  margin-top:20px
}
.section-heading h2 {
  font-size:34px
}
.journal-entry {
  grid-template-columns:55px 1fr;
  gap:20px;
  padding:28px 0
}
.journal-entry time {
  font-size:8px;
  letter-spacing:.2px;
  line-height:1.9
}
.journal-entry time strong {
  font-size:36px
}
.entry-meta {
  gap:8px;
  font-size:9px;
  line-height:1.7
}
.journal-entry h3 {
  font-size:23px
}
.journal-entry p {
  font-size:13px
}
.detail-content {
  padding:15px;
  font-size:12px
}
.journal-source {
  margin:15px 0 0;
  font-size:9px;
  line-height:1.8
}
.gallery {
  padding-top:60px;
  padding-bottom:55px
}
.gallery-grid {
  grid-template-columns:1fr;
  gap:16px
}
.community {
  padding:45px 0 60px
}
.community h2 {
  font-size:34px
}
footer {
  flex-wrap:wrap;
  gap:20px;
  font-size:9px
}
footer>span {
  order:1;
  flex-basis:100%
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  transition:none!important;
  animation:none!important
}

}

/* System illustrations and simplified section headings. */
.hero-divider { position:absolute; bottom:28px; left:0; right:0; border-top:1px solid #e8c77a28; }
.text-system { padding:0 0 32px; }
.text-system > .eyebrow, .text-system > h3, .text-system > p { margin-left:32px; margin-right:32px; }
.card-visual { height:245px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid #5a4a3380; margin-bottom:30px; }
.rune-visual { background:radial-gradient(ellipse at center,#123c4b 0%,#10232b 30%,#12100f 72%); }
.rune-visual img { width:96px; height:96px; z-index:1; filter:drop-shadow(0 0 26px #3388a866); }
.rune-ring { position:absolute; border:1px solid #ac864670; border-radius:50%; }
.ring-outer { width:205px; height:205px; outline:1px solid #ac864625; outline-offset:10px; }
.ring-inner { width:155px; height:155px; border-style:dashed; transform:rotate(20deg); }
.xetass-visual { background:radial-gradient(ellipse at center,#30261b,#14110e 70%); }
.island-grid { display:grid; grid-template-columns:repeat(5,31px); gap:8px; transform:rotate(-12deg); }
.island { width:31px; height:27px; display:grid; place-items:center; color:#a98d5b; background:#211c15; border:1px solid #655133; font-size:12px; }
.island-boss { color:#efb4a0; background:#43221c; border-color:#a16647; }
.island-start { color:var(--gold); background:#3c3220; border-color:var(--gold); }
.diagram-caption { position:absolute; bottom:12px; font-size:8px; letter-spacing:1.2px; color:var(--muted); }
.gallery-item img { object-fit:contain; background:#10100e; }
@media(max-width:720px) { .text-system { padding:0 0 25px; } .text-system > .eyebrow, .text-system > h3, .text-system > p { margin-left:25px; margin-right:25px; } .card-visual { height:220px; } }

/* Chapter navigation and visual system explanations. */
.chapter-nav { position:sticky; top:0; z-index:4; background:#13100df5; border-bottom:1px solid var(--edge); backdrop-filter:blur(12px); }
.chapter-nav > div { display:flex; align-items:center; gap:30px; overflow-x:auto; scrollbar-width:thin; }
.chapter-nav span { font-size:9px; letter-spacing:2px; color:var(--muted); margin-right:auto; }
.chapter-nav a { font-size:12px; white-space:nowrap; padding:23px 0; border-bottom:2px solid transparent; }
.chapter-nav a:hover, .chapter-nav a[aria-current="location"] { color:var(--gold); border-bottom-color:var(--gold); }
.system-chapter { margin-bottom:32px; scroll-margin-top:90px; }
.system-chapter:last-child { margin-bottom:0; }
.system-chapter h3 { font-size:34px; }
.system-chapter .system-art { min-height:430px; }
.system-chapter .system-copy { padding:40px; }
.art-button { border:0; padding:0; background:transparent; width:100%; cursor:zoom-in; }
.reverse-chapter .system-art { order:2; border-right:0; border-left:1px solid var(--edge); }
.reverse-chapter { grid-template-columns:1fr 1.35fr; }
.mechanic-list { margin:25px 0; }
.mechanic-list > div { padding:12px 0; border-top:1px solid #5a4a3350; }
.mechanic-list dt { font-size:12px; color:var(--gold); margin-bottom:6px; }
.mechanic-list dd { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.system-copy .chapter-detail { font-size:12px; margin-top:15px; }
.rune-panel { justify-content:center; background:radial-gradient(ellipse,#173340 0%,#111416 62%,#100f0d 100%); }
.rune-demo { width:80%; text-align:center; padding:50px 0; }
.rune-core { width:140px; height:140px; border:1px solid #ad8757; border-radius:50%; display:grid; place-items:center; margin:0 auto 45px; outline:1px solid #ad875730; outline-offset:12px; box-shadow:0 0 60px #2f759a20; }
.rune-core img { width:82px; }
.passive-slots { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.passive-slots span { border:1px solid #927440; aspect-ratio:1; display:grid; place-items:center; color:var(--gold); background:#161510; font:20px Georgia,serif; }
.rune-demo > p { font-size:9px; letter-spacing:2px; color:var(--muted); margin:24px 0 0; }
.xetass-panel { justify-content:center; background:radial-gradient(ellipse,#3c3021,#12100e 75%); }
.xetass-panel .island-grid { grid-template-columns:repeat(5,50px); gap:16px; }
.xetass-panel .island { width:50px; height:44px; font-size:18px; box-shadow:0 10px 16px #0005; }
.difficulty-switch { display:flex; gap:0; border-bottom:1px solid var(--edge); margin-top:25px; }
.difficulty-switch button { background:transparent; border:0; border-bottom:2px solid transparent; padding:12px 16px; font-size:12px; color:var(--muted); }
.difficulty-switch button[aria-pressed="true"] { color:var(--gold); border-bottom-color:var(--gold); background:#e8c77a09; }
.difficulty-description { min-height:140px; padding:20px 0 10px; }
.difficulty-description h4 { font:18px Georgia,serif; color:var(--gold); margin:0 0 10px; }
.difficulty-description p { margin-bottom:0; font-size:12px!important; }
@media(max-width:1000px) { .system-chapter .system-copy { padding:28px; } .passive-slots { gap:6px; } .chapter-nav > div { gap:22px; } }
@media(max-width:720px) { html { scroll-padding-top:85px; } .chapter-nav span { display:none; } .chapter-nav a { padding:18px 0; font-size:11px; } .system-chapter, .reverse-chapter { grid-template-columns:1fr; } .system-chapter .system-art { min-height:310px; } .reverse-chapter .system-art { order:0; border-left:0; border-bottom:1px solid var(--edge); } .system-chapter h3 { font-size:29px; } .xetass-panel .island-grid { grid-template-columns:repeat(5,36px); gap:10px; } .xetass-panel .island { width:36px; height:32px; } .rune-core { width:110px; height:110px; margin-bottom:30px; } .rune-demo { padding:38px 0 55px; } .image-label { font-size:8px; } }

/* Additional Arven systems. */
.chapter-nav > div { gap:24px; }
.chapter-nav span { margin-right:12px; flex-shrink:0; }
.prophecy-panel { background:#11100e; }
.prophecy-panel .art-button { padding:24px; }
.prestige-panel { justify-content:center; background:radial-gradient(ellipse,#3c242d,#161013 70%); }
.prestige-diagram { width:75%; text-align:center; }
.prestige-emblems { display:flex; align-items:center; justify-content:center; gap:28px; }
.prestige-emblems figure { margin:0; }
.prestige-emblems img { width:80px; height:80px; object-fit:contain; margin:0 auto 18px; }
.prestige-emblems figcaption { font:19px Georgia,serif; color:var(--gold); }
.prestige-emblems > span { color:var(--edge); }
.ascension-gauge { height:9px; background:#110d10; border:1px solid #765b42; margin:45px auto 20px; }
.ascension-gauge span { display:block; width:72%; height:100%; background:linear-gradient(90deg,#805f3c,#e8c77a); }
.prestige-diagram > p { color:var(--muted); font-size:9px; letter-spacing:2px; }
.blackhole-panel { justify-content:center; background:radial-gradient(ellipse,#272038,#121013 70%); }
.loot-diagram { width:75%; }
.loot-diagram > img { width:80px; height:80px; object-fit:contain; margin:0 auto 35px; }
.loot-path { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #5a4a3370; padding:20px 0; }
.loot-path span { color:var(--muted); font-size:12px; }
.loot-path strong { font-weight:400; color:var(--gold); font-size:12px; white-space:nowrap; }
.loot-path.rejected strong { color:#ba9ab8; }
@media(max-width:720px) { .prestige-emblems { gap:18px; } .prestige-emblems img { width:64px; height:64px; } .prestige-emblems figcaption { font-size:17px; } .loot-diagram { padding:35px 0; } .loot-path span, .loot-path strong { font-size:10px; } .prophecy-panel .art-button { padding:15px; } }

/* Compact system chooser instead of a full-width navigation strip. */
.chapter-nav { position:fixed; top:auto; left:auto; right:24px; bottom:24px; width:225px; z-index:8; border:1px solid var(--edge); background:#181410f5; box-shadow:0 8px 28px #0007; border-radius:4px; }
.chapter-nav summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 18px; font-size:12px; }
.chapter-nav summary span { margin:0; letter-spacing:0; color:var(--gold); font-size:12px; }
.chapter-nav nav { display:flex; flex-direction:column; padding:4px 10px 12px; max-height:60svh; overflow:auto; }
.chapter-nav a { padding:11px 10px; border:0; font-size:12px; }
.chapter-nav a:hover,.chapter-nav a[aria-current="location"] { border:0; background:#e8c77a0c; }
.atlas-web-panel { background:radial-gradient(ellipse,#202018,#10100d 80%); }
.atlas-web-panel svg { display:block; width:100%; height:auto; }
.web-game-ui { width:92%; margin:35px auto 60px; background:linear-gradient(145deg,#292219,#12110e); border:1px solid #77603d; box-shadow:0 18px 38px #0006,inset 0 0 0 4px #0c0b09; color:var(--text); }
.web-ui-title { padding:14px 20px; border-bottom:1px solid var(--edge); font:20px Georgia,serif; color:var(--gold); display:flex; justify-content:space-between; background:linear-gradient(90deg,#392b1b,#211a13); }
.prophecy-overview { padding:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:10px; color:var(--muted); border-bottom:1px solid var(--edge); }
.prophecy-overview strong { color:var(--gold); font-weight:400; }
.web-ui-progress { height:4px; background:#080908; flex-basis:100%; width:100%; }
.web-ui-progress i { display:block; width:38%; height:100%; background:linear-gradient(90deg,#715f39,#c5a86b); }
.web-ui-columns { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; padding:18px; }
.prophecy-row { display:flex; align-items:center; gap:10px; padding:12px 8px; border:1px solid #5a4a3350; margin-bottom:10px; background:#12120f; }
.prophecy-row.selected { border-color:#9a7e4c; background:#2b2419; }
.prophecy-row>div { flex:1; min-width:0; }
.prophecy-row strong { font-size:10px; font-weight:400; }
.prophecy-row small { display:block; font-size:8px; color:#a3b085; margin:6px 0 8px; }
.prophecy-row>span:last-child { font-size:13px; color:var(--gold); }
.prophecy-orb { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border:1px solid #ad956d; border-radius:50%; background:radial-gradient(circle at 35% 30%,#b7cfba,#787592 45%,#211d35 75%); color:#eee8b9; }
.prophecy-info { text-align:center; padding-top:10px; }
.large-orb { width:50px; height:50px; font-size:26px; margin:0 auto 18px; }
.prophecy-info h4 { font:16px Georgia,serif; color:var(--gold); margin:0 0 12px; }
.prophecy-info p { font-size:10px; line-height:1.8; color:var(--muted); }
.web-ui-action { display:block; padding:9px 4px; margin-top:18px; border:1px solid var(--edge); color:var(--gold); font-size:9px; }
@media(max-width:720px) { .chapter-nav { right:14px; bottom:14px; width:190px; } .chapter-nav summary { padding:12px 14px; } .web-game-ui { width:94%; } .web-ui-columns { gap:10px; padding:12px; } .prophecy-row { gap:7px; padding:10px 6px; } .prophecy-row strong { font-size:9px; } .prophecy-orb { width:24px; height:24px; } .large-orb { width:42px; height:42px; } }

.chapter-nav summary span { display:inline; }

/* Language names stay in their native spelling for easy discovery. */
.language-switch { display:flex; align-items:center; gap:8px; flex-shrink:0; color:var(--gold); }
.language-switch select { max-width:112px; font:12px 'Segoe UI',Arial,sans-serif; color:var(--text); border:1px solid var(--edge); border-radius:3px; background:var(--surface); padding:9px 7px; cursor:pointer; }
.language-switch select:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.site-header { gap:24px; }
.site-header nav { gap:22px; }
.header-community { padding-left:20px; }
.chapter-current { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-label { max-width:calc(100% - 40px); line-height:1.5; }
@media(max-width:1150px) and (min-width:721px) { .header-community { display:none; } .site-header { padding-inline:28px; } }
@media(max-width:720px) { .site-header { gap:12px; } .language-switch { order:1; margin-left:auto; } .language-switch > span { display:none; } .language-switch select { max-width:96px; font-size:11px; } .menu-toggle { order:2; margin-left:0; } .prophecy-row strong { overflow-wrap:anywhere; } }
h1 { overflow-wrap:break-word; hyphens:auto; }
/* Presentation panels adapted from desktop references, without screenshot embeds. */
.rune-web-ui,.prestige-web-ui,.filter-web-ui,.xetass-web-ui { max-width:520px; }
.ui-kicker { margin:0 0 18px; font-size:9px; letter-spacing:1.7px; color:var(--muted); text-align:center; }
.rune-web-body,.prestige-web-body,.filter-web-body,.xetass-web-body { padding:24px; }
.rune-web-slots { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; margin-bottom:24px; }
.rune-slot { display:flex; flex-direction:column; align-items:center; gap:8px; padding:7px 2px 10px; border:1px solid #956b4a70; background:linear-gradient(#4e29241a,#16120e); border-bottom:2px solid #a14c37; }
.rune-slot small { font:9px Georgia,serif; color:var(--muted); align-self:flex-start; padding-left:4px; }
.rune-slot img { width:32px; height:32px; }
.rune-slot.dimmed { opacity:.3; border-bottom-color:var(--edge); }
.ui-tabs { display:flex; border-bottom:1px solid var(--edge); margin-bottom:20px; }
.ui-tabs > span { flex:1; padding:12px 8px; text-align:center; font-size:11px; color:var(--muted); }
.ui-tabs .active { color:var(--gold); border-bottom:2px solid var(--gold); background:#e8c77a08; }
.passive-web-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.passive-web-row { display:flex; align-items:center; gap:8px; padding:10px 7px; background:#10100e; border:1px solid #5a4a3340; min-width:0; }
.passive-web-row > img { width:28px; height:28px; }
.passive-web-row > span { font-size:10px; line-height:1.5; min-width:0; overflow-wrap:anywhere; }
.passive-web-row small,.rune-web-foot small { display:block; font-size:8px; color:var(--muted); margin-top:5px; line-height:1.6; }
.passive-web-row .passive-marker { margin-left:auto; color:var(--gold); font-size:10px; }
.rune-web-foot { margin-top:22px; border-top:1px solid var(--edge); padding-top:18px; display:flex; gap:12px; align-items:center; font-size:10px; color:var(--gold); }
.prestige-medallion { width:88px; height:88px; margin:0 auto 18px; display:grid; place-items:center; border:1px solid #bc9254; border-radius:50%; outline:1px solid #8e694333; outline-offset:8px; background:radial-gradient(#98724450,#211510 70%); box-shadow:0 0 40px #bd814517; }
.prestige-medallion span { font:46px Georgia,serif; color:var(--gold); }
.prestige-effect { display:flex; align-items:center; gap:18px; padding:18px 0; border-top:1px solid #5a4a3360; }
.prestige-effect img { width:48px; height:48px; object-fit:contain; }
.prestige-effect > div { flex:1; min-width:0; }
.prestige-effect strong { font:18px Georgia,serif; color:var(--gold); }
.prestige-effect small { display:block; font-size:9px; color:var(--muted); margin-top:8px; }
.prestige-effect .ascension-gauge { margin:12px 0 0; height:6px; }
.shadow-effect > span { color:#b191c0; font-size:25px; }
.prestige-stages { display:flex; align-items:center; justify-content:center; margin:20px 0 0; color:var(--muted); font:14px Georgia,serif; }
.prestige-stages > span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--edge); transform:rotate(45deg); }
.prestige-stages > span.active { color:var(--gold); border-color:var(--gold); background:#a8773017; }
.prestige-stages i { height:1px; width:55px; background:var(--edge); }
.filter-web-ui .web-ui-title { align-items:center; }
.filter-hint { font-size:10px; color:var(--muted); line-height:1.8; margin:0 0 20px; }
.filter-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:8px; font-size:11px; margin-bottom:20px; }
.filter-grid > span:not(.filter-value) { color:var(--muted); font-size:9px; padding:0 3px 4px; }
.filter-grid strong,.filter-value { background:#11100d; border:1px solid #5a4a3370; padding:10px; font-weight:400; }
.filter-value { color:var(--gold); display:flex; align-items:center; gap:8px; }
.filter-value i { height:2px; width:45%; background:#816d4a; }
.filter-outcome { display:flex; align-items:center; gap:12px; border-top:1px solid #5a4a3370; padding:14px 0 0; margin-top:14px; }
.filter-outcome > span { color:#9ab481; font-size:16px; }
.filter-outcome > div { flex:1; }
.filter-outcome strong { font-size:10px; font-weight:400; }
.filter-outcome small { display:block; margin-top:6px; color:var(--gold); font-size:9px; }
.filter-outcome.rejected > span { color:#bd8e81; }
.xetass-web-ui { max-width:440px; }
.web-island-map { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; padding:2px; background:radial-gradient(ellipse,#42534a30,transparent 80%); }
.web-island { position:relative; aspect-ratio:1; border:1px solid #68664455; background:#2b3730; display:grid; place-items:center; box-shadow:0 6px 10px #0003; }
.island-terrain { width:78%; height:78%; background:repeating-linear-gradient(130deg,transparent 0 9px,#0c180c22 10px 12px),radial-gradient(ellipse at 40% 45%,#182019 0 14%,transparent 16%),var(--terrain); border-radius:var(--shape); box-shadow:inset 0 0 0 3px #ac956027,inset 0 0 0 6px #171e1733; }
.web-island .island-rank { position:absolute; left:3px; top:2px; font:8px Georgia,serif; color:var(--gold); background:#101610bd; padding:2px; }
.web-island img { position:absolute; top:2px; right:2px; width:15px; height:15px; }
.island-gate { position:absolute; bottom:-3px; left:calc(50% - 2px); width:5px; height:5px; background:#a75743; box-shadow:0 0 0 2px #191914; }
.island-gate.open { background:#91b778; }
.boss-island { border-color:#b35b49; box-shadow:0 0 14px #b35b4920; }
.start-island { border-color:var(--gold); }
.start-island b { position:absolute; color:var(--gold); font-size:24px; text-shadow:0 1px 6px #000; }
.island-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; font-size:8px; color:var(--muted); margin-top:24px; }
.island-legend span { display:flex; gap:5px; align-items:center; }
.island-legend i { width:5px; height:5px; display:inline-block; }
.legend-open { background:#91b778; } .legend-closed { background:#a75743; }
@media(max-width:720px) { .rune-web-body,.prestige-web-body,.filter-web-body,.xetass-web-body { padding:18px; } .rune-web-slots { gap:5px; } .rune-slot img { width:27px; height:27px; } .passive-web-list { gap:6px; } .passive-web-row { padding:9px 5px; gap:6px; } .passive-web-row > img { width:24px; height:24px; } .passive-web-row .passive-marker { display:none; } .web-island-map { gap:10px; } .prestige-web-ui { max-width:320px; } .web-ui-title { font-size:18px; } }
.rune-web-foot > img { width:30px; height:30px; flex-shrink:0; }
.filter-web-ui .web-ui-title > img { width:28px; height:28px; flex-shrink:0; }
.web-game-ui { margin-bottom:35px; }
@media(max-width:360px) { .site-header { padding-inline:14px; gap:8px; } .brand { width:88px; } .menu-toggle { gap:8px; padding:8px; } }
/* Compact flag menu. Native details keeps keyboard and touch behavior predictable. */
.language-switch { position:relative; display:block; color:var(--text); }
.language-switch summary { display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid #5a4a3380; background:#17130dcc; border-radius:3px; font-size:12px; list-style:none; cursor:pointer; }
.language-switch summary::-webkit-details-marker { display:none; }
.language-switch summary img,.language-options img { width:22px; height:15px; object-fit:cover; border-radius:2px; border:1px solid #ffffff20; flex-shrink:0; }
.language-chevron { font-size:11px; color:var(--muted); margin-left:2px; }
.language-switch[open] summary { border-color:#b19660; background:var(--surface); }
.language-options { position:absolute; top:calc(100% + 9px); right:0; width:178px; padding:5px; border:1px solid var(--edge); background:#181410fa; border-radius:4px; box-shadow:0 12px 32px #0008; }
.language-options button { display:flex; align-items:center; gap:10px; width:100%; padding:10px; background:none; border:0; border-radius:2px; color:var(--text); font-size:12px; text-align:left; }
.language-options button:hover,.language-options button[aria-pressed="true"] { background:#e8c77a0c; color:var(--gold); }
.language-check { margin-left:auto; visibility:hidden; font-size:11px; }
.language-options button[aria-pressed="true"] .language-check { visibility:visible; }
/* Interactions use the same bronze, dark stone and muted gold as the game UI. */
.demo-caption { font-size:9px; letter-spacing:1.2px; color:var(--muted); text-align:center; margin:0 0 18px; }
.prophecy-panel .demo-caption { margin:18px 0 0; }
.demo-help { font-size:10px; line-height:1.7; color:var(--muted); margin:20px 0 14px; }
.demo-feedback { font-size:10px; line-height:1.5; color:var(--gold); margin:12px 0 0; min-height:15px; }
.demo-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.demo-actions button,.filter-toggle button { background:linear-gradient(#393024,#201b14); border:1px solid #7b6544; padding:8px 10px; font-size:10px; color:var(--gold); }
.demo-actions button:hover,.filter-toggle button:hover { background:#3d3223; }
button:disabled { opacity:.4; cursor:default; }
.rune-slot { cursor:pointer; }
.rune-slot.dimmed { opacity:.55; }
.rune-slot[aria-pressed="true"] { outline:1px solid var(--gold); outline-offset:3px; background:#563d25; }
.empty-rune { display:grid; place-items:center; width:32px; height:32px; font-size:24px; color:var(--muted); }
.ui-tabs > button { flex:1; padding:12px 8px; text-align:center; font-size:11px; color:var(--muted); background:transparent; border:0; border-bottom:2px solid transparent; }
.ui-tabs > button[aria-pressed="true"] { color:var(--gold); border-bottom-color:var(--gold); background:#e8c77a08; }
.passive-web-row { width:100%; text-align:left; color:var(--text); }
.passive-web-row[aria-pressed="true"] { border-left:2px solid #b3904b; background:#302719; }
.passive-web-row:hover { border-color:#a48753; background:#302719; }
.prophecy-row { width:100%; text-align:left; color:var(--text); }
.prophecy-row-text { flex:1; min-width:0; }
.prophecy-row-text .web-ui-progress { display:block; width:100%; }
.prophecy-info .web-ui-action { width:100%; background:#302719; cursor:pointer; }
.filter-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.filter-grid > label,.filter-grid input { min-width:0; width:100%; background:#11100d; border:1px solid #5a4a3370; padding:10px; font:11px 'Segoe UI',Arial,sans-serif; color:var(--text); }
.filter-grid label { overflow-wrap:anywhere; }
.filter-grid input:focus-visible { outline:1px solid var(--gold); }
.sample-artifact { border:1px solid #8d744747; padding:12px; background:#b4964a09; }
.sample-artifact strong { font-size:11px; color:var(--gold); font-weight:400; }
.sample-artifact p { margin:7px 0 0; font-size:9px; line-height:1.7; color:var(--muted); }
.filter-toggle { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:18px; }
.filter-toggle label,.blacklist-options label { display:flex; align-items:center; gap:8px; font-size:11px; }
.filter-toggle input,.blacklist-options input { accent-color:var(--gold); }
.blacklist-options { display:grid; gap:15px; min-height:180px; padding:20px 8px; background:#11100d; border:1px solid #5a4a3370; }
.web-island { padding:0; cursor:pointer; }
.web-island:hover,.web-island[aria-pressed="true"] { outline:1px solid var(--gold); outline-offset:2px; }
.island-detail { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; border-top:1px solid var(--edge); margin-top:20px; padding-top:15px; font-size:10px; }
.island-detail strong { color:var(--gold); font-weight:400; }
.island-detail > span { color:var(--muted); }
.prestige-effect strong { overflow-wrap:anywhere; }
.prestige-medallion:has(+ .prestige-effect [aria-valuenow="100"]) { box-shadow:0 0 35px #bd814560; }
@media(max-width:720px) { .language-switch summary { font-size:11px; gap:6px; padding:8px; } .language-options { width:166px; } .demo-actions button { padding:8px; font-size:9px; } .prophecy-row-text strong { font-size:9px; } .web-ui-columns { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } }
@media(max-width:360px) { .language-current-name { display:none; } .language-switch summary { padding:9px 8px; } }
.passive-description { border:1px solid #99764190; background:linear-gradient(#201a12,#10100d); padding:14px; margin-top:15px; min-height:110px; }
.passive-description strong { font:15px Georgia,serif; color:var(--gold); }
.passive-description p { font-size:10px; line-height:1.8; color:var(--text); margin:8px 0 0; }
.system-art,.system-copy,.web-game-ui { min-width:0; }
.system-copy h3,.web-game-ui { overflow-wrap:anywhere; hyphens:auto; }
@media(max-width:720px) { .system-chapter,.reverse-chapter { grid-template-columns:minmax(0,1fr); } .empty-rune { width:27px; height:27px; } }
.journal-entry > div { min-width:0; }
.journal-entry h3 { overflow-wrap:anywhere; hyphens:auto; }
.language-switch[open] .language-chevron { transform:rotate(180deg); }
/* Source-driven system previews */
.showcase-body { padding:22px; }
.showcase-body h4 { font:20px Georgia,serif; color:var(--gold); margin:14px 0; }
.showcase-body p { font-size:11px; line-height:1.8; }
.branch-tabs,.build-specs,.prestige-milestones { display:flex; flex-wrap:wrap; gap:6px; }
.branch-tabs button,.build-specs button,.prestige-milestones button { padding:9px 11px; background:#181611; border:1px solid #5a4a33; color:var(--muted); font-size:11px; }
.branch-tabs button[aria-pressed=true],.build-specs button[aria-pressed=true],.prestige-milestones button[aria-pressed=true] { color:var(--gold); border-color:var(--gold); background:#302719; }
.atlas-live-ui { width:96%; }
.atlas-stats { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:16px 0; color:var(--muted); font-size:10px; }
.atlas-stats b { color:var(--gold); font-weight:400; }
.atlas-scroll { overflow:auto; border:1px solid #5a4a3350; background:radial-gradient(ellipse,#3e382d65,transparent 75%); }
.atlas-canvas { position:relative; width:100%; min-width:450px; aspect-ratio:620/390; }
.atlas-canvas svg { width:100%; height:100%; }
.atlas-canvas path { stroke:#5b5142; fill:none; stroke-width:1.5; }
.atlas-canvas path.allocated { stroke:var(--branch-color); }
.atlas-node { position:absolute; transform:translate(-50%,-50%); background:#0f0e0b; border:1px solid #5b5142; width:34px; height:34px; padding:0; border-radius:50%; opacity:.65; }
.atlas-node.available { opacity:1; border-color:var(--branch-color); box-shadow:0 0 12px #b79b4220; }
.atlas-node.allocated { opacity:1; box-shadow:0 0 10px #e8c77a45; }
.atlas-node[aria-pressed=true] { outline:2px solid var(--gold); outline-offset:3px; }
.atlas-node img { width:100%; height:100%; object-fit:contain; }
.atlas-node small { position:absolute; left:50%; top:100%; transform:translateX(-50%); color:var(--gold); background:#16120b; font:8px 'Segoe UI',sans-serif; white-space:nowrap; }
.atlas-node-detail { padding:8px 0 14px; border-bottom:1px solid var(--edge); }
.atlas-node-detail p { white-space:pre-line; }
.atlas-node-detail .demo-feedback { min-height:28px; }
.atlas-mastery { padding-top:20px; font-size:11px; }
.atlas-mastery > span { display:block; color:var(--gold); margin:9px 0; }
.atlas-mastery > div { display:flex; flex-wrap:wrap; gap:8px; }
.atlas-mastery > div span { padding:7px; border:1px solid #5a4a33; color:var(--muted); font-size:9px; }
.atlas-mastery .reached { color:var(--gold); background:#e8c77a0d; }
.build-showcase { margin:70px 0; padding:48px 0; border-block:1px solid var(--edge); }
.build-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.build-heading h2 { font:42px Georgia,serif; margin:10px 0; color:var(--gold); }
.build-heading > p { max-width:350px; color:var(--muted); font-size:13px; line-height:1.9; }
.build-stage { display:grid; grid-template-columns:260px minmax(0,1fr); gap:35px; margin-top:28px; padding:30px; background:radial-gradient(ellipse at 10% 50%,#5c462b22,transparent 70%),#14110d; border:1px solid #5a4a3370; }
.build-pair { display:grid; gap:14px; align-content:start; }
.build-pair button { padding:22px; display:grid; grid-template-columns:54px minmax(0,1fr); gap:5px 15px; background:#16130e; border:1px solid #5a4a33; color:var(--text); text-align:left; }
.build-pair button[aria-pressed=true] { border-color:#c4a35e; background:#332719; }
.build-pair img { width:54px; height:54px; grid-row:span 2; image-rendering:auto; }
.build-pair span { font:25px Georgia,serif; color:var(--gold); }
.build-pair small { color:var(--muted); font-size:10px; }
.build-detail-heading { display:flex; align-items:center; gap:18px; }
.build-detail-heading img { width:64px; height:64px; }
.build-detail-heading h3 { margin:0; font:32px Georgia,serif; color:var(--gold); }
.build-detail-heading em { font-size:18px; color:var(--muted); }
.build-detail-heading p { color:var(--muted); font-size:11px; margin:0 0 8px; }
.build-rune-colors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:25px 0; }
.build-rune-colors button { background:#15130e; border:1px solid #5a4a33; padding:10px 4px; color:var(--muted); font-size:10px; }
.build-rune-colors button[aria-pressed=true] { border-color:var(--gold); color:var(--gold); background:#332719; }
.build-rune-colors img { display:block; width:32px; height:32px; margin:0 auto 10px; }
.build-description { white-space:pre-line; color:var(--text); font-size:13px; line-height:1.7; min-height:165px; }
.build-detail .demo-help { max-width:500px; }
.xetass-web-ui { max-width:480px; }
.web-island-map { gap:10px; }
.web-island { opacity:.6; }
.web-island.reachable { opacity:1; border-color:#8a9e70; }
.web-island.cleared { border-color:#b7bc7a; }
.web-island b { position:absolute; color:#e8c77a; text-shadow:0 1px 6px black; font-size:23px; }
.island-number { position:absolute; bottom:2px; right:3px; font:9px 'Segoe UI',sans-serif; color:#e3d3ac; }
.island-choice { margin-top:20px; border-top:1px solid var(--edge); }
.island-choice h4 span { float:right; color:var(--muted); }
.prestige-web-ui { border:0; background:none; max-width:470px; }
.prestige-editorial > h4 { font-size:45px; margin:30px 0; }
.prestige-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:22px 0; border-block:1px solid var(--edge); }
.prestige-facts > div { min-width:0; }
.prestige-facts img { display:block; width:45px; height:45px; margin-bottom:12px; }
.prestige-facts strong { color:var(--gold); font:21px Georgia,serif; }
.prestige-facts p { font-size:11px; color:var(--muted); }
.prestige-facts b { color:var(--text); }
.prestige-description { margin-top:25px; min-height:95px; }
.prophecy-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:15px; padding-bottom:18px; }
.prophecy-header strong { font-size:11px; font-weight:400; }
.prophecy-header small { color:var(--gold); font-size:10px; }
.prophecy-header .demo-actions { margin:0; display:grid; align-content:start; }
.prophecy-meter { display:block; position:relative; height:17px; border:1px solid #76684a; background:#0b0b09; margin:6px 0; }
.prophecy-meter > i { display:block; height:100%; background:linear-gradient(90deg,#96762d,#e2bf68); }
.prophecy-meter > span { position:absolute; inset:0; text-align:center; font-size:9px; line-height:15px; color:#f1e1bf; text-shadow:0 1px 2px #000; }
.prophecy-game-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:10px; }
.prophecy-game-columns > div { border:1px solid #62543d; min-width:0; background:linear-gradient(100deg,#1c1914,#100f0c); }
.game-panel-title { background:linear-gradient(#3b3931,#27251e); border-bottom:1px solid #62543d; margin:0!important; font:12px 'Segoe UI',sans-serif!important; text-align:center; padding:8px; color:var(--text)!important; }
.prophecy-game-list { padding:5px; }
.prophecy-game-row { display:flex; align-items:center; min-height:52px; border-bottom:1px solid #5a4a332a; }
.prophecy-game-row.selected { background:#483a22; box-shadow:inset 2px 0 var(--gold); }
.prophecy-game-row > button { display:flex; align-items:center; gap:7px; min-width:0; flex:1; border:0; background:none; color:var(--muted); text-align:left; padding:7px; font-size:10px; }
.prophecy-game-row > button > span:last-child { flex:1; min-width:0; }
.prophecy-game-row strong { font-size:10px; font-weight:400; color:var(--gold); display:block; }
.prophecy-game-row small { display:block; font-size:8px; color:#9ab478; }
.prophecy-stone { font-size:27px; color:#c0b6dd; text-shadow:0 0 12px #99b09c; }
.prophecy-quick { display:flex; gap:2px; padding-right:3px; }
.prophecy-quick button { border:0; background:none; padding:0; }
.prophecy-quick img { width:20px; height:20px; display:block; }
.prophecy-game-row .prophecy-meter { height:12px; }
.prophecy-game-row .prophecy-meter > span { font-size:8px; line-height:10px; }
.prophecy-detail-copy { padding:12px; display:flex; flex-direction:column; min-height:355px; }
.prophecy-detail-copy h4 { font:13px 'Segoe UI',sans-serif; }
.prophecy-detail-copy small { color:var(--muted); font-size:9px; }
.prophecy-detail-copy > p { white-space:pre-line; font-size:10px; }
.prophecy-detail-bottom { margin-top:auto; padding-top:18px; border-top:1px solid #5a4a33; }
.prophecy-detail-bottom p { font-size:9px; }
.prophecy-detail-bottom .demo-actions { margin-top:10px; }
.prophecy-catalog-entry { padding:12px; border-bottom:1px solid #5a4a33; }
.prophecy-catalog-entry strong { font-size:11px; color:var(--gold); }
.prophecy-catalog-entry p { font-size:9px; white-space:pre-line; }
.prophecy-simulation { margin-top:18px; border-top:1px solid #5a4a33; padding-top:15px; }
.prophecy-simulation > span { font-size:11px; color:var(--gold); }
.prophecy-simulation .demo-actions { margin-top:10px; }
.prophecy-inventory { display:grid; gap:5px; margin-top:15px; }
.prophecy-inventory strong { font-size:11px; color:var(--gold); }
.prophecy-inventory button { border:1px solid #5a4a33; background:#201a12; color:var(--text); padding:8px; font-size:10px; text-align:left; }
@media(max-width:900px) { .build-stage { grid-template-columns:200px minmax(0,1fr); gap:20px; padding:20px; } .prophecy-game-columns { grid-template-columns:minmax(0,1fr); } .prophecy-detail-copy { min-height:220px; } }
@media(max-width:720px) { .showcase-body { padding:16px; } .build-heading { display:block; } .build-heading h2 { font-size:32px; } .build-stage { grid-template-columns:minmax(0,1fr); padding:16px; } .build-pair { grid-template-columns:1fr 1fr; gap:8px; } .build-pair button { display:block; padding:14px 10px; } .build-pair img { width:42px; height:42px; margin-bottom:10px; } .build-pair span,.build-pair small { display:block; } .build-pair span { font-size:23px; margin-bottom:7px; } .build-specs button { font-size:10px; flex:1 1 40%; } .build-description { min-height:0; } .build-rune-colors { gap:4px; } .build-rune-colors button { font-size:8px; } .build-rune-colors img { width:27px; height:27px; } .atlas-canvas { min-width:400px; } .atlas-node { width:28px; height:28px; } .prophecy-game-columns { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } }
@media(max-width:420px) { .prophecy-game-columns,.prophecy-header { grid-template-columns:minmax(0,1fr); } .prophecy-header .demo-actions { grid-template-columns:1fr 1fr; } .prophecy-quick img { width:22px; height:22px; } .prestige-milestones button { padding:8px; } .build-detail-heading h3 { font-size:27px; } .build-detail-heading em { display:block; font-size:16px; } }
.prophecy-game-row .prophecy-stone { width:28px; height:28px; flex:0 0 28px; object-fit:contain; }
.companion-showcase { margin:45px 0; padding:45px 0; border-top:1px solid var(--edge); }
.companion-heading { display:flex; align-items:center; gap:22px; margin-bottom:30px; }
.companion-heading > img { width:58px; height:58px; object-fit:contain; flex-shrink:0; }
.companion-heading h2 { font:36px Georgia,serif; color:var(--gold); margin:0 0 12px; }
.companion-heading p { color:var(--muted); font-size:13px; line-height:1.8; max-width:750px; margin:0; }
.companion-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); border:1px solid var(--edge); background:radial-gradient(ellipse at 70% 0%,#66502918,transparent 70%),#14110d; }
.companion-story,.companion-preview { min-width:0; padding:30px; }
.companion-preview { border-left:1px solid var(--edge); }
.companion-story p { color:var(--text); font-size:12px; line-height:1.9; margin:23px 0; }
.companion-story > small { display:block; font-size:10px; color:var(--muted); margin-top:14px; line-height:1.7; }
.companion-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.companion-facts strong { display:block; color:var(--gold); font:30px Georgia,serif; margin-bottom:8px; }
.companion-facts span { font-size:10px; color:var(--muted); line-height:1.6; display:block; }
.companion-preview h3 { font:24px Georgia,serif; color:var(--gold); margin:0 0 22px; }
.companion-preview h4 { font:18px Georgia,serif; color:var(--gold); margin:24px 0 14px; }
.companion-steps,.companion-rune-tabs { display:flex; flex-wrap:wrap; gap:7px; }
.companion-steps button,.companion-rune-tabs button { padding:9px 11px; background:#17140e; border:1px solid var(--edge); color:var(--muted); font-size:11px; }
.companion-steps button[aria-pressed=true],.companion-rune-tabs button[aria-pressed=true] { color:var(--gold); border-color:var(--gold); background:#332719; }
.artifact-preview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:25px 0; }
.artifact-preview > div { padding:12px 4px; display:grid; justify-items:center; gap:5px; border:1px solid var(--edge); background:#10100b; }
.artifact-preview .unlocked { border-color:#b99a54; background:radial-gradient(#5c4d2938,#17130c); }
.artifact-preview span { color:var(--gold); font-size:30px; }
.artifact-preview .locked span { color:#7b7260; }
.artifact-preview strong { font-size:10px; font-weight:400; color:var(--text); }
.artifact-preview small { font-size:9px; color:var(--muted); text-align:center; }
.companion-range { display:block; color:var(--muted); font-size:11px; line-height:1.8; }
.companion-range output { float:right; color:var(--gold); }
.companion-range input { display:block; width:100%; margin:14px 0 25px; accent-color:var(--gold); }
.companion-bonus-result { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; border-top:1px solid var(--edge); padding-top:20px; }
.companion-bonus-result span { color:var(--muted); font-size:10px; display:block; margin-bottom:8px; }
.companion-bonus-result strong { font:27px Georgia,serif; color:var(--gold); }
.cap-trail { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.cap-trail span { border:1px solid var(--edge); padding:7px; color:var(--gold); font-size:10px; }
.cap-trail i { color:var(--muted); font-style:normal; font-size:10px; }
.mount-equipment { display:flex; flex-wrap:wrap; gap:7px; }
.mount-equipment span { border:1px solid var(--edge); color:var(--gold); padding:10px; font-size:11px; }
.mount-base-bonuses { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:24px 0; }
.mount-base-bonuses > div { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid #5a4a3350; color:var(--muted); font-size:11px; }
.mount-base-bonuses strong { color:var(--gold); font-weight:400; }
.mount-rune-description { color:var(--text); font-size:12px; line-height:1.9; min-height:70px; }
.merc-preview-roster { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.merc-preview-roster label { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; padding:12px; gap:8px; border:1px solid var(--edge); }
.merc-preview-roster label > span { color:var(--muted); font-size:10px; }
.merc-preview-roster select { width:100%; min-width:0; background:#231d13; color:var(--text); padding:8px 4px; border:1px solid var(--edge); font-size:11px; }
.merc-preview-roster strong { color:var(--gold); font:23px Georgia,serif; grid-column:2; }
.merc-preview-roster small { color:var(--muted); font-size:10px; grid-column:2; }
.merc-power-result { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--edge); padding-top:20px; margin-top:20px; }
.merc-power-result span { color:var(--muted); font-size:12px; }
.merc-power-result strong { color:var(--gold); font:32px Georgia,serif; }
.systems > .build-showcase:first-child { margin-top:0; padding-top:0; border-top:0; }
@media(max-width:720px) { .companion-layout { grid-template-columns:minmax(0,1fr); } .companion-preview { border-left:0; border-top:1px solid var(--edge); } .companion-story,.companion-preview { padding:20px; } .companion-heading { gap:14px; align-items:start; } .companion-heading h2 { font-size:29px; overflow-wrap:anywhere; } .companion-heading > img { width:42px; height:42px; } .companion-heading p { font-size:12px; } .companion-facts strong { font-size:25px; } .companion-bonus-result strong { font-size:22px; } .mount-base-bonuses { grid-template-columns:1fr; } .companion-rune-tabs button { font-size:10px; } }

/* Game-window presentation */
.systems { padding-top:65px; }
.build-heading { margin-bottom:25px; }
.build-heading h2 { font-size:38px; }
.web-game-ui { background:linear-gradient(125deg,#22221e,#11120f 60%,#20201b); border:3px ridge #817b68; border-radius:5px; box-shadow:inset 0 0 0 2px #090a08,0 12px 35px #0008; padding:5px; }
.web-ui-title { background:linear-gradient(#4c2b1b,#714524 45%,#2b1e13); border:2px ridge #8b8064; padding:5px 12px; font:12px Tahoma,sans-serif; text-align:center; justify-content:center; color:#e3ddcc; text-shadow:1px 1px #000; }
.game-panel-title { background:linear-gradient(#383934,#242622); border:1px solid #6a6859; padding:5px; font:11px Tahoma,sans-serif!important; color:#cbc9ba!important; }
.rune-web-ui { max-width:640px; }
.rune-web-body { padding:9px; }
.passive-glyph { width:32px; height:32px; flex:none; display:block; }
.rune-web-slots { gap:0; padding:9px 0 5px; margin:0 0 12px; border:1px solid #626051; background:#10110e; }
.rune-slot { border:0; border-bottom:3px solid #5f5946; border-radius:0; background:#171713; padding:7px 3px; min-height:87px; }
.rune-slot:not(.dimmed) { border-bottom-color:#bf6d39; }
.rune-slot .passive-glyph { margin:0 auto 8px; }
.rune-slot[aria-pressed=true] { background:#393121; outline:1px solid #cba651; outline-offset:-2px; }
.rune-slot small { top:3px; left:5px; font-size:8px; }
.rune-slot-name { display:block; font:9px Tahoma,sans-serif; color:#d9d5c7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rune-web-ui .ui-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid #686553; padding:3px; margin:8px 0; }
.rune-web-ui .ui-tabs button { width:100%; border:0; border-bottom:2px solid transparent; background:#11120f; padding:9px; font:11px Tahoma,sans-serif; }
.rune-web-ui .ui-tabs button[aria-pressed=true] { background:#322a1e; border-bottom-color:#e5b140; }
.passive-web-list { grid-auto-flow:column; grid-template-rows:repeat(5,auto); gap:3px 6px; padding:9px 5px; border:1px solid #656351; background:#14150f; }
.passive-web-row { border:0; border-left:3px solid #514d3d; background:#191912; padding:6px; min-height:51px; gap:8px; font:11px Tahoma,sans-serif; }
.passive-web-row[aria-pressed=true] { border-left-color:#b1683b; background:#252219; }
.passive-web-row small { font:9px Tahoma,sans-serif; margin-top:6px; }
.passive-marker { display:none; }
.passive-description { margin-top:12px; font:11px/1.6 Tahoma,sans-serif; background:#191914; border:1px solid #6c6550; padding:12px; }
.rune-web-ui .demo-help,.demo-caption { display:none; }
#atlas { display:block; }
#atlas > .system-copy { margin-bottom:25px; max-width:620px; }
#atlas .system-art { background:none; min-height:0; padding:0; }
.atlas-live-ui { width:100%; max-width:none; margin:0; }
.atlas-game-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:8px; padding:8px; }
.atlas-game-layout > div { min-width:0; position:relative; }
.atlas-scroll { overflow:auto; max-height:750px; background:#0b0e0c; border:1px solid #6b6552; }
.atlas-canvas.full-atlas { min-width:0; aspect-ratio:1; background:url('assets/game/atlas-backdrop.png') center/100% 100% no-repeat; }
.full-atlas svg { display:block; }
.full-atlas path { stroke-width:2; opacity:.75; }
.full-atlas .atlas-node { width:2.4%; height:2.4%; border:0; background:transparent; opacity:.8; }
.full-atlas .atlas-node.notable { width:3%; height:3%; }
.full-atlas .atlas-node.keystone { width:3.8%; height:3.8%; }
.full-atlas .atlas-node.available { opacity:1; }
.full-atlas .atlas-node small { font-size:7px; background:transparent; top:85%; color:#ddc791; }
.atlas-root { position:absolute; width:6%; height:6%; left:47%; top:47%; }
.atlas-zoom { position:absolute; top:34px; left:8px; z-index:2; display:flex; align-items:center; gap:4px; background:#12140fe6; padding:5px; color:#bdb79d; font:10px Tahoma,sans-serif; }
.atlas-zoom button { background:#353125; color:#e3c77f; border:1px solid #847553; width:27px; height:25px; }
.atlas-sidebar { min-width:0; border:1px solid #6b6552; background:#151611; }
.atlas-branch-list { display:grid; gap:2px; padding:5px; }
.atlas-branch-list button { display:grid; gap:4px; text-align:left; padding:9px; background:#171813; border:1px solid #34362a; color:#d1c7a4; font:11px Tahoma,sans-serif; }
.atlas-branch-list button[aria-pressed=true] { background:#302c1d; border-color:#a2894c; }
.atlas-branch-list i { display:inline-block; width:8px; height:8px; margin-right:6px; background:var(--branch-color); }
.atlas-branch-list small { font-size:9px; color:#b0ad9d; }
.atlas-branch-list meter { width:100%; height:9px; accent-color:var(--branch-color); }
.atlas-node-detail,.atlas-mastery { padding:12px; font:11px/1.6 Tahoma,sans-serif; }
.atlas-node-detail h4 { font:15px Georgia,serif; margin:0; color:#e1bd69; }
.atlas-node-detail p { font-size:11px; }
.atlas-mastery strong,.atlas-mastery span { display:block; }
.atlas-mastery { margin:0; }
#atlas > .system-copy .mechanic-list,#atlas > .system-copy details { display:none; }
.companion-preview { background:linear-gradient(110deg,#20211b,#13140f); border:3px ridge #77715d; padding:18px; box-shadow:inset 0 0 0 3px #0c0e0b; }
.companion-preview h3 { background:linear-gradient(#393a33,#25261f); border:1px solid #6a6756; padding:7px; text-align:center; font:13px Tahoma,sans-serif; color:#ddd6bf; }
.mount-base-bonuses { grid-template-columns:1fr; gap:4px; }
.mount-base-bonuses > div { background:#090b08; border:1px solid #5a594c; padding:7px 12px; font:11px Tahoma,sans-serif; }
.artifact-preview > div { aspect-ratio:1; padding:8px 4px; border:2px ridge #817358; background:#11120d; clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%); }
.companion-bonus-result strong { font:19px Tahoma,sans-serif; }
.demo-actions button { background:linear-gradient(#48483c,#24261e); border:2px ridge #77745d; color:#d5d0bd; font:10px Tahoma,sans-serif; }
@media(max-width:720px) { .atlas-game-layout { grid-template-columns:minmax(0,1fr); } .atlas-branch-list { grid-template-columns:1fr 1fr; } .atlas-scroll { max-height:500px; } .rune-slot-name { font-size:7px; } .rune-slot { min-height:74px; } .rune-web-body { padding:6px; } .passive-web-row { font-size:9px; } .passive-web-row .passive-glyph { width:25px;height:25px; } .full-atlas .atlas-node { min-width:0; } .build-heading h2 { font-size:30px; } }

.full-atlas > .atlas-root { width:6%!important; height:6%!important; object-fit:contain; }
.atlas-canvas.full-atlas { margin-inline:auto; }
.atlas-canvas.full-atlas .atlas-node img { width:100%; height:100%; }

.pet-game-milestones { display:grid; gap:4px; margin:15px 0; }
.pet-game-milestones > div { display:flex; justify-content:space-between; gap:10px; background:#0b0d09; border:1px solid #5b5e4d; padding:8px; font:10px Tahoma,sans-serif; color:#bbb9a8; }
.pet-game-milestones > .unlocked { color:#d2b770; }
.companion-preview > .game-panel-title { font-size:11px; }
.artifact-preview { max-width:330px; margin:15px 0; }
.artifact-preview span { font-family:Tahoma,sans-serif; }
.companion-heading p { max-width:640px; }
#atlas { border-top:1px solid var(--edge); padding-top:45px; }
#atlas .system-copy { padding:25px 0 0; }
.build-detail .demo-help { font-size:10px; }

.prestige-web-ui { border:3px ridge #817b68; background:linear-gradient(125deg,#22221e,#11120f); max-width:430px; }
.prestige-game-stats { display:grid; gap:5px; margin:25px 0; }
.prestige-game-stats > div { display:grid; grid-template-columns:1fr 110px; align-items:center; gap:8px; font:11px Tahoma,sans-serif; color:#c8c5b5; }
.prestige-game-stats strong { border:2px ridge #696858; background:#090b08; padding:5px; text-align:center; font-weight:400; }
.prestige-description { font-size:11px; min-height:0; }
.native-section{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:60px;align-items:center;padding:30px 0}
.native-intro h2{font:38px/1.15 Georgia,serif;color:var(--gold);margin:0 0 24px}.native-intro p{font-size:13px;line-height:1.9;color:var(--muted);max-width:390px}.native-preview-note{display:block;margin-top:20px;font-size:10px;color:#8e8773}.native-levels{display:flex;flex-wrap:wrap;gap:6px;margin-top:25px}.native-levels button{border:1px solid #5f5139;padding:8px 10px;background:#1b1710;color:#a99a75;font-size:10px}.native-levels button[aria-pressed=true]{color:#e6c566;border-color:#c29b4e}
.native-window{width:372px;max-width:100%;justify-self:center;padding:6px;border:4px ridge #827b65;border-radius:9px;background:repeating-linear-gradient(127deg,#171914 0,#1b1d18 1px,#121410 3px,#191b16 5px);box-shadow:inset 0 0 0 2px #070907,0 18px 45px #0008;font:11px/1.35 Tahoma,sans-serif;color:#d7d2bc}
.native-window *{box-sizing:border-box}.native-title{text-align:center;font:11px/19px Tahoma,sans-serif;background:linear-gradient(#31190e,#81502b 45%,#352316);border:2px ridge #817559;border-radius:3px;margin-bottom:5px;color:#ddd9ca;text-shadow:1px 1px #000}.native-page{border:1px solid #777561;padding:3px;min-height:340px;background:#11130f88}.native-panel-title{background:linear-gradient(#3a3b35,#252822);border:1px solid #656754;margin:0 0 6px;padding:4px;font:11px Tahoma,sans-serif;color:#cdcbbd;text-align:center}.native-panel-title em{float:right;color:#60cb58;font-style:normal;font-size:10px}
.native-cells{display:grid;grid-template-columns:90fr 150fr 90fr;gap:4px;margin:5px 0}.native-cells>div{display:grid;gap:3px;min-width:0}.native-cells span,.native-cells strong{display:block;min-width:0;font:10px/17px Tahoma,sans-serif;color:#e4d6ad;text-align:center;border:1px solid #555a48;background:#070a06;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.native-cells strong>span{border:0;background:linear-gradient(90deg,#58451d,#262619)}
.native-bonus-rows{display:grid;gap:3px;padding:0 0 5px}.native-bonus-rows>div{font:10px/18px Tahoma,sans-serif;color:#d8d7c9;text-align:center;border:1px solid #515544;background:#050804;min-height:20px}.native-good{color:#73b967}
.native-tabs{display:flex;border:1px solid #74715d;padding:3px;margin-top:5px;gap:1px}.native-tabs button{flex:1;min-width:0;background:#11130f;color:#999b8c;border:0;border-bottom:2px solid transparent;padding:8px 3px;font:10px Tahoma,sans-serif}.native-tabs button[aria-selected=true]{background:#30281b;border-bottom-color:#e9b12f;color:#e8bf52}.native-window button:focus-visible{outline:2px solid #e4b751;outline-offset:2px}.native-window button:disabled{opacity:.4;cursor:default}.native-window button:not(:disabled){cursor:pointer}
.native-slot-row{display:flex;gap:6px;justify-content:center}.native-slot{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:2px ridge #615b40;background:radial-gradient(#0a100a,#050705);clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%);color:#bca35b;flex:none}.native-slot>img{width:28px!important;height:28px!important;object-fit:contain}.native-slot[aria-pressed=true]{border-color:#e0b65b}.slot-lock:before,.slot-lock:after{content:'';position:absolute;width:36px;height:7px;background:linear-gradient(#80704a,#3c3422);border:1px solid #9b8755;left:-4px;top:11px;transform:rotate(45deg)}.slot-lock:after{transform:rotate(-45deg)}
.pet-native-artifacts{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0 10px}.native-button-stack{display:grid;gap:5px}.native-button-stack button,.native-op-footer button,.native-forge-actions button,.native-roster-tools button,.native-team-body>button,.native-mission-slots button{border:2px ridge #6d725c;border-radius:2px;background:linear-gradient(#4a4d40,#25291f);color:#d6d5c7;font:10px Tahoma,sans-serif;padding:4px 7px}
.native-op-description{text-align:center;font:10px/1.5 Tahoma,sans-serif;margin:12px 0;min-height:30px}.native-op-slots{display:flex;gap:70px;justify-content:center;margin:10px 0 20px}.native-artifact-attrs{display:grid;gap:3px;min-height:180px}.native-artifact-attrs button{background:#141710;border:0;border-bottom:1px solid #23271d;color:#d1c4a6;font:10px Tahoma,sans-serif;padding:4px 7px;text-align:left;min-height:20px}.native-artifact-attrs button[aria-pressed=true]{box-shadow:inset 2px 0 #c7a352;background:#29291a}.native-op-footer{display:flex;justify-content:space-between;margin:15px 0 8px}.artifact-sigil{font:26px Georgia,serif;color:#c69c43}
.mount-native-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mount-native-slots p{text-align:center;margin:5px 0 8px;font:10px Tahoma,sans-serif}.mount-native-slots .native-slot-row{gap:4px}.mount-native-slots small{display:block;font-size:9px;padding:6px 0;text-align:center;color:#a7a997}.native-inspection{min-height:65px;border-top:1px solid #5e614c;padding:9px 5px 2px;margin-top:8px}.native-inspection strong{font-size:10px;font-weight:400;color:#d7b96d}.native-inspection p{font:10px/1.5 Tahoma,sans-serif;margin:5px 0;color:#a7aa98}
.native-forge-item{display:grid;justify-items:center;padding:15px 5px;min-height:150px;align-content:start}.native-forge-item p{margin-top:12px;font:10px Tahoma,sans-serif}.native-forge-materials{display:flex;gap:20px;justify-content:center;padding:15px 0}.native-forge-materials small{display:block;text-align:center;margin-top:5px}.native-forge-facts{display:grid;gap:5px;font-size:10px;text-align:center;margin:5px 0 14px}.native-forge-actions{display:flex;gap:5px;justify-content:center;margin-bottom:10px}
.native-wide{width:680px}#expeditions .native-section{grid-template-columns:minmax(220px,.5fr) minmax(0,1.5fr);gap:35px}.native-mission-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:8px 2px}.native-mission-slots>div{min-height:76px;background:#171911;border:1px solid #4c5140;padding:8px;text-align:center;font-size:10px;display:grid;align-content:center;gap:5px}.native-mission-slots small{font-size:8px;color:#818875}.native-mission-slots p{font-size:9px;margin:0}.native-mission-slots strong{font-size:10px;font-weight:400;color:#d0b576}.native-lock{font-size:18px;color:#807151}
.native-expedition-columns{display:grid;grid-template-columns:42% minmax(0,1fr);gap:7px}.native-subpanel{border:1px solid #6c705b;padding:3px;min-width:0}.native-dungeon-list{height:365px;overflow:auto;display:grid;align-content:start;gap:3px}.native-dungeon-list button{display:flex;align-items:center;gap:8px;width:100%;background:#171911;border:0;border-left:2px solid #404737;text-align:left;padding:7px 5px;color:#cbcaba;font:10px Tahoma,sans-serif}.native-dungeon-list button[aria-pressed=true]{background:#302b1d;border-left-color:#c9a350}.native-dungeon-list img{width:28px;height:28px;object-fit:contain}.native-dungeon-list small{display:block;color:#8e9781;font-size:8px;margin-top:5px}.native-team-body{padding:5px}.native-team-body h5{margin:2px 0 8px;font:12px Tahoma,sans-serif;color:#d4b575}.native-team-body p{font:9px Tahoma,sans-serif;color:#adad99;margin:5px 0}.native-team-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:12px 0}.native-team-card{background:#1d1e14;border:1px solid #54533e;padding:5px 2px;color:#babca6;font:8px Tahoma,sans-serif;min-height:65px}.native-team-card img{width:28px;height:28px;border:1px solid #998257;display:block;margin:0 auto 4px}.native-team-card span,.native-team-card small{display:block;font-size:8px}.native-team-results{padding:9px 5px;background:#0b1008;border:1px solid #525940;color:#8bbe73;font-size:10px}.native-idle-title{padding-top:7px}.native-idle-list{display:grid;gap:3px;height:110px;overflow:auto;margin:8px 0;align-content:start}.native-idle-list button{display:flex;align-items:center;gap:6px;padding:3px;font:9px Tahoma,sans-serif;background:#191b13;border:0;text-align:left;color:#79a2c6}.native-idle-list img{width:21px;height:21px}.native-team-body>button{display:block;margin:10px auto 5px}
.native-roster-columns{display:grid;grid-template-columns:57% minmax(0,1fr);gap:7px;min-height:445px}.native-roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px 2px;align-content:start}.native-roster-grid button{background:#181b12;border:1px solid #454b37;border-left:3px solid #658cc1;color:#c9cbb7;padding:7px 3px;min-height:94px;font:9px Tahoma,sans-serif;text-align:center}.native-roster-grid button[aria-pressed=true]{border-color:#b99a4f;background:#302b1c}.native-roster-grid img{width:30px;height:30px;display:block;margin:0 auto 5px}.native-roster-grid span,.native-roster-grid small{display:block;font-size:8px;margin:4px 0}.native-roster-grid .native-mini-exp{height:5px;border:1px solid #53593e;background:#15190e;margin-top:7px}.native-merc-detail{padding:10px 5px;text-align:center}.native-merc-detail>img{width:34px;height:34px;border:1px solid #9b834d}.native-merc-detail h5{font:12px Tahoma,sans-serif;margin:8px 0;color:#c9b374}.native-merc-detail p{font:10px/1.5 Tahoma,sans-serif;color:#b3b7a0}.native-roster-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px}.native-roster-tools button{font-size:8px;padding:5px 2px}.native-merc-detail .native-tool-description{text-align:left;color:#a8ae93;font-size:9px}
@media(max-width:900px){.native-section,#expeditions .native-section{grid-template-columns:minmax(0,1fr);gap:25px}.native-intro{max-width:650px}.native-intro p{max-width:none}.native-intro h2{font-size:32px;margin-bottom:15px}}
@media(max-width:520px){.native-window{font-size:10px}.native-cells span,.native-cells strong{font-size:9px}.native-expedition-columns,.native-roster-columns{grid-template-columns:minmax(0,1fr)}.native-dungeon-list{height:180px}.native-page{min-height:320px}.native-slot-row{gap:3px}.native-slot{width:28px;height:28px}.native-slot>img{width:24px!important;height:24px!important}.mount-native-slots{gap:4px}.pet-native-artifacts{gap:4px}.native-button-stack button{font-size:8px;padding:4px}.native-mission-slots{gap:3px}.native-mission-slots>div{padding:5px 3px;font-size:8px}.native-mission-slots small{font-size:7px}}
.native-team-results{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px}.native-team-results span{border:1px solid #49503d;background:#11170c;padding:5px;font-size:8px}
.native-bounty{width:420px}.native-bounty .native-page{min-height:0}.native-bounty-columns{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:6px;margin-bottom:9px}.native-bounty-columns>div>p,.native-bounty-columns .native-subpanel p{font:10px/1.5 Tahoma,sans-serif;color:#d9b969;text-align:center;padding:9px 3px;margin:0}.native-bounty-columns .native-subpanel{margin-bottom:6px}.native-bounty-tasks{display:grid;gap:4px}.native-bounty-tasks button{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#151a10;border:0;border-left:2px solid #78734c;color:#d3d0bc;font:9px Tahoma,sans-serif;text-align:left;padding:8px 4px;min-height:30px}.native-bounty-tasks small{font-size:8px;white-space:nowrap}.native-bounty-tasks button.completed{opacity:.45;color:#87ad6b}.native-bounty-options{display:flex;justify-content:space-around;gap:10px;padding:6px;font-size:10px}.native-bounty-options label{display:flex;align-items:center;gap:5px}.native-bounty-options input{accent-color:#c1ab69}.native-bounty-mini{border-top:1px solid #5f634d;padding:10px;text-align:center;font-size:10px;color:#cfbd82}
@media(max-width:400px){.native-bounty-columns{grid-template-columns:minmax(0,1fr)}.native-bounty-tasks button{font-size:9px}.native-team-results{grid-template-columns:1fr 1fr}}

/* Atlas is a full-width game window, with its heading outside the frame. */
#atlas.system-feature{display:block;background:transparent;border:0;border-top:1px solid var(--edge);padding:40px 0 0}
.atlas-section-heading{padding:0 0 24px}.atlas-section-heading h3{margin:0;font:38px/1.2 Georgia,serif;color:var(--gold)}
#atlas .system-art{border:0;background:transparent;overflow:visible}
.native-merc-stats{display:grid;gap:4px;margin:12px 0}.native-merc-stats>div{padding:5px;border:1px solid #555b47;background:#0c1009;font:10px/1.5 Tahoma,sans-serif;color:#c7cbb4}
.native-merc-stats .native-merc-exp{background:linear-gradient(90deg,#655322,#28291b);color:#e0c985}
.native-merc-detail .native-no-attrs{padding:6px;border:1px solid #555b47;color:#8e9781;font-size:10px}
.native-roster-grid .busy{color:#d6ab64}.native-roster-grid .native-mini-exp.maxed{background:#796631}
.native-dungeon-list .native-heroic{font:9px Tahoma,sans-serif;color:#e17b68;margin-left:4px}.native-dungeon-list .native-dungeon-meta{line-height:1.5}
@media(max-width:720px){.atlas-section-heading h3{font-size:30px}#atlas.system-feature{padding-top:28px}.atlas-section-heading{padding-bottom:20px}}

.prophecy-bulk-actions{padding:12px 0 0;justify-content:center}.prophecy-bulk-actions button{font-size:10px}

.native-roster-grid button{border-left-color:var(--rarity-color,#658cc1)}.native-merc-bonuses{display:grid;gap:4px;margin:5px 0 24px}.native-merc-bonuses>div{border:1px solid #555b47;background:#0c1009;padding:5px;text-align:left;font:10px/1.5 Tahoma,sans-serif}.native-merc-bonuses .rolled,.native-bonus-tooltip .rolled{color:#83c27b}.native-merc-bonuses .maximum,.native-bonus-tooltip .maximum{color:#e3b655}.native-bonus-header{position:relative}.native-bonus-header h4{padding-right:28px}.native-bonus-help{position:absolute;right:4px;top:2px;z-index:3}.native-bonus-help summary{display:grid;place-items:center;width:16px;height:16px;padding:0;border:1px solid #9b9d83;border-radius:50%;color:#d0cfba;font:11px Tahoma,sans-serif;cursor:pointer;list-style:none}.native-bonus-help summary::-webkit-details-marker{display:none}.native-bonus-tooltip{position:absolute;right:0;top:23px;width:290px;max-width:70vw;padding:12px;border:2px ridge #777a62;background:#080c07f5;box-shadow:0 7px 18px #000a;text-align:left}.native-bonus-tooltip p{font:10px/1.6 Tahoma,sans-serif;margin:4px 0;color:#b7baa9}.native-merc-detail .native-roster-tools{margin-top:28px}

.native-merc-bonuses>div{display:flex;justify-content:space-between;gap:8px}.native-merc-bonuses span{color:#c3c5b4}.native-merc-bonuses strong{font:inherit;white-space:nowrap}

.pet-milestone-rows>div{position:relative;padding:0 23px 0 3px}.pet-milestone-rows strong{font-weight:400;color:#e4b251}.pet-milestone-rows button{position:absolute;right:3px;top:2px;width:16px;height:16px;padding:0;border:1px solid #8d7945;border-radius:50%;background:#252617;color:#c9aa56;font:13px/13px Tahoma,sans-serif}.pet-material-count{font:9px/1.5 Tahoma,sans-serif;color:#b8b39b;padding:4px 2px}.pet-artifact-cell{position:relative}.pet-item-tooltip{display:none;position:absolute;z-index:8;top:38px;left:50%;transform:translateX(-50%);width:240px;padding:12px;border:2px ridge #7a7a5f;background:#080c07f7;box-shadow:0 8px 20px #000b;text-align:center}.pet-artifact-cell:hover .pet-item-tooltip,.pet-artifact-cell:focus-within .pet-item-tooltip{display:block}.pet-item-tooltip strong{font:11px Tahoma,sans-serif;color:#e6bc56}.pet-item-tooltip p{font:10px/1.5 Tahoma,sans-serif;margin:4px 0;color:#b9cfaf}.pet-item-tooltip>div{margin-top:9px;border-top:1px solid #52593c;padding-top:6px}.pet-item-tooltip .maximum{color:#e2b754}.pet-sample-select{background:#20251a;border:1px solid #676a4f;color:#c9c8b3;padding:5px;font:9px Tahoma,sans-serif;margin:0 0 6px}.native-op-footer .pet-material-count{align-self:center;padding:0}.pet-native-artifacts{overflow:visible}
@media(max-width:520px){.pet-item-tooltip{left:0;transform:none;width:220px}.pet-artifact-cell:nth-child(n+2) .pet-item-tooltip{left:auto;right:-70px}.pet-artifact-cell:nth-child(n+3) .pet-item-tooltip{right:-40px}.pet-artifact-cell:last-child .pet-item-tooltip{right:-14px}.pet-milestone-rows>div{font-size:9px}}

@media(max-width:520px){.pet-native-artifacts{position:relative}.pet-artifact-cell{position:static}.pet-native-artifacts .pet-artifact-cell:nth-child(n) .pet-item-tooltip{left:0;right:auto;top:55px;transform:none;width:min(260px,calc(100vw - 72px))}}

.companion-unlock-control{display:grid;justify-items:start;gap:9px;margin-top:18px}.companion-unlock-control button{display:flex;align-items:center;gap:9px;border:1px solid #777153;background:#22251a;color:#dcc285;padding:7px 10px;font:11px/1.4 Tahoma,sans-serif}.companion-unlock-control button img{width:28px;height:28px;object-fit:contain}.companion-unlock-control button:disabled{opacity:.45}.companion-unlock-control button[aria-pressed="true"]{border-color:#cfb865;background:#3a3220}.companion-unlock-control small{font:10px/1.6 Tahoma,sans-serif;color:#b4a27a;max-width:300px}.slot-requirement{display:block;font:8px/1.4 Tahoma,sans-serif;color:#c5a865;text-align:center;margin-top:4px;max-width:38px;overflow-wrap:anywhere}.pet-item-tooltip>img{width:32px;height:32px;margin-top:10px}.mount-native-slots .native-slot-row{position:relative;overflow:visible}.mount-native-slots .pet-item-tooltip{left:auto;right:0;transform:none;width:240px}.native-forge-item>button{font:9px Tahoma,sans-serif;padding:4px;border:1px solid #777153;color:#d5c381;background:#22251a}
@media(max-width:520px){.mount-native-slots .pet-artifact-cell{position:static}.mount-native-slots .pet-item-tooltip{top:36px;left:auto;right:0;width:min(260px,calc(100vw - 72px))}}

.site-header{justify-content:space-between}.site-header .language-switch{margin-left:auto}

/* Login temple entrance: decorative, brief, and only on the first visit of a session. */
.opening-scene{display:none;position:fixed;inset:0;z-index:1000;overflow:hidden;background:#0e0c0a;opacity:1;transition:opacity .7s ease;isolation:isolate}
.opening-active .opening-scene,.opening-finished .opening-scene{display:grid;place-items:center}
.opening-active{overflow:hidden}.opening-finished .opening-scene{opacity:0;pointer-events:none}
.opening-temple{position:absolute;inset:0 0 -34%;background:url('assets/background.jpg') center top/cover no-repeat;animation:opening-temple 3s ease-out both;z-index:-2}
.opening-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#0e0c0a12 0%,#0e0c0a55 52%,#0e0c0acf 100%),linear-gradient(#0e0c0a33,#0e0c0a66);z-index:-1}
.opening-logo{width:min(480px,68vw);height:auto;filter:drop-shadow(0 5px 24px #000b);animation:opening-logo .95s ease-out both;transform-origin:center}
@keyframes opening-temple{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes opening-logo{from{opacity:0;transform:translateY(10px) scale(.96);filter:blur(4px) drop-shadow(0 5px 24px #000b)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 5px 24px #000b)}}
@media(prefers-reduced-motion:reduce){.opening-scene{display:none!important}.opening-active{overflow:auto}}

/* The entrance and hero share one living scene, so the scenery never cuts away. */
.hero{min-height:max(760px,100svh);height:auto;overflow:hidden}
.hero-art.temple-scene{background:#171610;overflow:hidden;z-index:-1}
.temple-backdrop{position:absolute;inset:0 0 -34%;background:url('assets/background.jpg') center top/cover no-repeat;animation:temple-breathe 24s ease-in-out infinite alternate;transform-origin:53% 43%}
.temple-sunlight{position:absolute;inset:0;background:radial-gradient(ellipse at 73% 12%,#ffcf6e28,transparent 57%);mix-blend-mode:screen;animation:temple-light 13s ease-in-out infinite alternate}
.temple-mist{position:absolute;pointer-events:none;width:145%;height:45%;left:-25%;background:radial-gradient(ellipse at 22% 55%,#d8dbc130,transparent 40%),radial-gradient(ellipse at 65% 45%,#e5d7b629,transparent 43%);filter:blur(22px);will-change:transform}
.mist-distant{top:27%;opacity:.7;animation:temple-mist 24s ease-in-out infinite alternate}
.mist-near{top:58%;height:37%;opacity:.5;animation:temple-mist 31s ease-in-out -13s infinite alternate-reverse}
.temple-leaves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.temple-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0e0c0ae8 0%,#0e0c0a9c 37%,#0e0c0a0a 83%),linear-gradient(0deg,#0e0c0a,transparent 30%);transition:opacity 1.1s ease}
.opening-active .temple-shade{opacity:.25}
.opening-scene{background:radial-gradient(ellipse at 50% 42%,transparent 20%,#0e0c0a70 100%)}
.hero-content,.site-header{transition:opacity .9s ease,transform .9s ease}
.opening-active .hero-content{opacity:0;transform:translateY(18px);pointer-events:none}
.opening-active .site-header{opacity:0;pointer-events:none}
.opening-finished .hero-content{transition-delay:.2s}
.scene-paused *{animation-play-state:paused!important}
.build-specs button{display:flex;align-items:center;justify-content:center;gap:9px}
.build-spec-face{width:28px;height:28px;object-fit:contain;border:1px solid #6c573a;border-radius:50%}
.build-detail-heading>img{filter:drop-shadow(0 0 14px var(--rune-glow,#d8b35a55));animation:rune-reveal .55s ease-out both}
.build-pair button,.build-rune-colors button{transition:background .2s,border-color .2s,transform .2s}
.build-pair button:hover,.build-rune-colors button:hover{transform:translateY(-2px)}
@keyframes temple-breathe{from{transform:scale(1.015) translateX(-.3%)}to{transform:scale(1.045) translateX(.3%)}}
@keyframes temple-mist{from{transform:translate3d(-5%,-2%,0)}to{transform:translate3d(12%,3%,0)}}
@keyframes temple-light{from{opacity:.35}to{opacity:.95}}
@keyframes rune-reveal{from{opacity:.4;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@media(max-width:720px){.hero{min-height:max(740px,100svh)}.temple-backdrop{background-position:52% top}.temple-shade{background:linear-gradient(90deg,#0e0c0ace,#0e0c0a59),linear-gradient(0deg,#0e0c0a,transparent 42%)}.temple-mist{filter:blur(14px)}.build-spec-face{width:24px;height:24px}.build-specs button{gap:6px}}
@media(prefers-reduced-motion:reduce){.temple-leaves{display:none}.temple-mist,.temple-backdrop,.temple-sunlight,.build-detail-heading>img{animation:none!important}.hero-content,.site-header,.temple-shade{transition:none!important}.opening-active .hero-content,.opening-active .site-header{opacity:1;transform:none}}

/* Persistent identity after the entrance fades. */
.hero-logo{display:block;width:clamp(360px,40vw,540px);max-width:100%;height:auto;margin:0 0 25px;filter:drop-shadow(0 5px 14px #0008)}
@media(max-width:720px){.hero-logo{width:340px;max-width:100%;margin-bottom:22px}.hero-content{padding-top:115px;padding-bottom:95px}}

/* Center the temple introduction around the Arven identity. */
.hero-content{text-align:center;padding-top:125px;padding-bottom:100px}
.hero-logo{width:clamp(400px,52vw,700px);max-width:100%;margin:0 auto 24px}
.hero-content h1{max-width:1000px;margin-left:auto;margin-right:auto}
.hero-description{max-width:580px;margin-left:auto;margin-right:auto}
.hero-content .actions{justify-content:center}
.temple-shade{background:radial-gradient(ellipse at 50% 48%,#0e0c0a80 0%,#0e0c0a35 60%,#0e0c0a10 85%),linear-gradient(0deg,#0e0c0af5,transparent 38%)}
@media(max-width:720px){.hero-content{padding-top:115px;padding-bottom:95px}.hero-logo{width:360px;margin-bottom:25px}.hero-description{max-width:380px}.temple-shade{background:linear-gradient(0deg,#0e0c0af5,#0e0c0a65 45%,#0e0c0a40)}}

/* Gentle motion and warm light for the persistent hero logo. */
.hero-logo{animation:arven-logo-float 7s ease-in-out infinite,arven-logo-glow 5s ease-in-out infinite}
@keyframes arven-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes arven-logo-glow{0%,100%{filter:drop-shadow(0 5px 14px #0009) drop-shadow(0 0 5px #e5b85022)}50%{filter:drop-shadow(0 7px 16px #0009) drop-shadow(0 0 18px #e5b85077)}}
.scene-paused~.hero-content .hero-logo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-logo{animation:none;transform:none;filter:drop-shadow(0 5px 14px #0008)}}