@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Marcellus&display=swap');


/* Globaler L2-Darkmoon-Schriftstil: dekorative, logo-nahe Versalien für alle Überschriften */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');

html body h1,
html body h2,
html body h3,
html body h4,
html body .section-mark,
html body .eyebrow,
html body .chapter-label,
html body .region-eyebrow{
  font-family:"Cinzel Decorative","Cinzel",serif !important;
  font-weight:700;
  letter-spacing:.012em;
}

html body .lore-hero h1,
html body .hero h1,
html body .visual-stage h1,
html body h1{
  color:#f5e7df;
  background:linear-gradient(180deg,#fff8ed 0%,#e8d8d2 20%,#fffaf2 36%,#b5a2a5 50%,#f8e1d5 66%,#a94a53 82%,#ffe0c9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 0 #310712) drop-shadow(0 0 7px rgba(255,45,65,.48));
}
html body h1 em,
html body h2 em,
html body h3 em{
  font-family:"Cinzel Decorative","Cinzel",serif !important;
  font-style:normal;
  background:linear-gradient(180deg,#fff1e6 0%,#ffb1a7 25%,#ff536c 52%,#a70d31 78%,#ff9b8d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #450817) drop-shadow(0 0 8px rgba(255,35,65,.62));
}
:root{--night:#090309;--wine:#250713;--red:#d51c38;--hot:#ff5361;--gold:#f3c18b;--silver:#e8d8d7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--night);color:#f4e8e5;font:17px Marcellus,Georgia,serif}a{color:inherit;text-decoration:none}
.mobile-head{display:none}.visual-stage{position:relative;width:100%;line-height:0;background:#10040a;overflow:hidden}.world-art{display:block;width:100%;height:auto}.hotspots{position:absolute;inset:0;line-height:normal}.hotspot{position:absolute;display:block;z-index:3;outline:none;border:0;border-radius:42%;cursor:pointer;background:transparent;transition:background .18s,box-shadow .18s}
.hotspot:hover{background:radial-gradient(ellipse at center,rgba(255,72,63,.18) 0%,rgba(255,42,60,.10) 48%,transparent 76%);box-shadow:0 0 18px rgba(255,54,69,.22)}
.hotspot:focus-visible{background:radial-gradient(ellipse at center,rgba(255,72,63,.22) 0%,rgba(255,42,60,.12) 48%,transparent 76%);box-shadow:0 0 20px rgba(255,174,112,.42)}
.hotspot:active{background:radial-gradient(ellipse at center,rgba(255,205,145,.22),transparent 72%);box-shadow:inset 0 0 18px rgba(255,90,70,.2)}.nav-home{left:23.3%;top:.5%;width:11.3%;height:6.5%}.nav-lore{left:34.5%;top:.5%;width:11.8%;height:6.5%}.nav-world{left:46.2%;top:.5%;width:9.5%;height:6.5%}.nav-server{left:55.5%;top:.5%;width:11%;height:6.5%}.nav-community{left:66.3%;top:.5%;width:11.8%;height:6.5%}.nav-skynet{left:85.3%;top:1%;width:13.3%;height:6%}
.action-account{left:9.4%;top:44.8%;width:19.2%;height:9.2%}.action-download{left:29.5%;top:44.8%;width:19.5%;height:9.2%}.action-server{left:50.1%;top:44.8%;width:19.2%;height:9.2%}.action-community{left:71%;top:44.8%;width:19%;height:9.2%}.lore-more{left:17%;top:79.7%;width:12.5%;height:4.7%}

.below-intro,.world-section,.server-section,.community-section,.coming-soon{padding:90px max(7vw,24px);text-align:center}.below-intro{background:radial-gradient(ellipse at 50% 0,#4a0c21,#10040a 65%);border-top:1px solid #702839}.section-mark{color:#f29a83;font:10px Cinzel;letter-spacing:3px}.below-intro h1,.world-section h2,.server-section h2,.community-section h2,.coming-soon h2{font:600 clamp(30px,4.5vw,52px) Cinzel;margin:18px 0}.below-intro em,.world-section em,.community-section em{font-style:normal;color:#ff626e}.below-intro p,.server-section>p,.community-section>p,.coming-soon p{max-width:900px;margin:0 auto;color:#d2b9bd;font-size:19px;line-height:1.7}
.world-section{background:linear-gradient(180deg,#10040a,#2b0818 52%,#10040a);border-block:1px solid #6d293a}.section-lead{color:#c9aeb4;margin:0 0 35px}.world-cards{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.world-cards article{padding:28px 24px;text-align:left;background:linear-gradient(145deg,#3a0b20,#12050d);border:2px double #984553;box-shadow:inset 0 0 30px #e5234022,0 12px 25px #0006}.crest{display:block;font-size:38px;color:#ffc18a;text-shadow:0 0 18px #ff304e;margin-bottom:15px}.world-cards small{font:9px Cinzel;letter-spacing:2px;color:#e58a85}.world-cards h3{font:600 18px Cinzel;color:#f5dcd4;margin:9px 0}.world-cards p{color:#c6aeb3;line-height:1.55;margin:0}
.server-section{background:radial-gradient(ellipse at 50% 50%,#3a0a1d,#10040a 70%)}.server-section>p{max-width:800px}.server-facts{max-width:950px;margin:38px auto 0;display:grid;grid-template-columns:repeat(4,1fr);border:3px double #93404e;background:#1a0610;box-shadow:0 0 25px #d91e3c33}.server-facts div{padding:20px 12px;border-right:1px solid #6d2b3a}.server-facts div:last-child{border:0}.server-facts small{display:block;color:#bd7b82;font:9px Cinzel;letter-spacing:2px;margin-bottom:8px}.server-facts b{font:600 12px Cinzel;color:#f2d8cf}
.community-section{background:radial-gradient(ellipse at 50% 0,#5b1026,#17050f 68%);border-top:1px solid #7d2c40}.community-actions{display:flex;justify-content:center;gap:12px;margin-top:25px;flex-wrap:wrap}.community-actions a{padding:14px 20px;border:1px solid #e66a6d;background:linear-gradient(110deg,#4b0718,#a9152b,#4b0718);font:600 10px Cinzel;letter-spacing:1px;box-shadow:0 0 20px #d51e3d44}.coming-soon{padding-top:65px;padding-bottom:65px;background:#0c0309;border-top:1px solid #57202d}.coming-soon>span{color:#d47a7f;font:9px Cinzel;letter-spacing:3px}.coming-soon h2{font-size:32px}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:24px 5vw;background:#070207;border-top:1px solid #59202e;color:#a87a82;font:9px Cinzel;letter-spacing:1.5px}footer b{color:#f0d2ca;font-size:13px}footer a{color:#efb9ad}
@media(max-width:700px){.mobile-head{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#0a030af5;border-bottom:1px solid #7a2b3b;position:sticky;top:0;z-index:10}.mobile-brand{font:700 14px Cinzel;letter-spacing:1px}.mobile-brand small{display:block;color:#d77a80;font:8px Cinzel;letter-spacing:2px;margin-top:3px}.mobile-head button{background:#210713;border:1px solid #98404e;color:#ffd0b0;padding:7px 12px;font-size:20px}.mobile-head nav{display:none;position:absolute;top:68px;left:0;right:0;background:#0b030af7;border-bottom:1px solid #773041;padding:15px 20px}.mobile-head nav.open{display:grid;gap:0}.mobile-head nav a{padding:12px;border-bottom:1px solid #572332;color:#f1d7d0}.visual-stage{overflow:hidden}.world-art{width:150%;max-width:none;margin-left:-25%}.hotspots{display:none}.status-live{left:97.5%;top:96%;display:none}.below-intro,.world-section,.server-section,.community-section,.coming-soon{padding:65px 20px}.below-intro p,.server-section>p,.community-section>p,.coming-soon p{font-size:17px}.world-cards{grid-template-columns:1fr}.server-facts{grid-template-columns:repeat(2,1fr)}.server-facts div:nth-child(2){border-right:0}.server-facts div:nth-child(-n+2){border-bottom:1px solid #6d2b3a}footer{justify-content:center;text-align:center}}


/* Transparent hit areas are positioned over the five labels inside the artwork's own top menu.
   Coordinates are relative to the actual menu plate, not the full hero image. */
.desktop-nav{
 position:absolute; z-index:5;
 left:22.75%; top:.7%; width:54.7%; height:6.2%;
 display:flex; align-items:stretch; justify-content:flex-start;
 padding:0; margin:0; background:transparent; overflow:visible;
}
.desktop-nav a{
 position:relative; display:block; flex:0 0 auto; height:100%;
 background:transparent; border:0; border-radius:48%;
 transition:background .18s ease,box-shadow .18s ease;
}
.desktop-nav a:nth-child(1){width:19%}
.desktop-nav a:nth-child(2){width:17.5%}
.desktop-nav a:nth-child(3){width:17%}
.desktop-nav a:nth-child(4){width:20%}
.desktop-nav a:nth-child(5){width:26.5%}
.desktop-nav a:hover,.desktop-nav a:focus-visible{
 background:radial-gradient(ellipse at center,rgba(255,72,63,.22) 0%,rgba(255,42,60,.10) 48%,transparent 76%);
 box-shadow:0 0 13px rgba(255,54,69,.18);
 outline:none;
}
.desktop-nav a.active{
 background:radial-gradient(ellipse at center,rgba(255,56,66,.22) 0%,rgba(255,42,60,.08) 55%,transparent 80%);
}
.desktop-nav a.active:after{
 content:"";position:absolute;left:23%;right:23%;bottom:8%;height:2px;
 background:linear-gradient(90deg,transparent,#ffcf9b,#ff3e4d,#ffcf9b,transparent);
 box-shadow:0 0 8px #ff344d;
}
#mobileNav a.active{color:#ff8585;text-shadow:0 0 10px #ed243d}
@media(max-width:700px){.desktop-nav{display:none}}

/* === THE LEGEND: full Bloodmoon chronicle page === */
.lore-page{position:relative;overflow:hidden;padding:0 7vw 82px;background:radial-gradient(ellipse at 50% 0%,#641329 0%,#2a0818 34%,#10040b 78%);border-top:1px solid #9b4550;border-bottom:1px solid #6e2639}
.lore-page:before,.lore-page:after{content:"";position:absolute;pointer-events:none;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#9b4a56,#ffd1a0,#e72c47,#ffd1a0,#9b4a56,transparent);opacity:.8;box-shadow:0 0 18px #e92b4b}
.lore-page:before{top:0}.lore-page:after{bottom:0}
.lore-hero{max-width:1000px;margin:0 auto;text-align:center;padding:86px 20px 48px;position:relative}
.lore-eyebrow{font:10px Cinzel;letter-spacing:4px;color:#e6a18f;margin:26px 0 12px}
.lore-hero h1{font:700 clamp(38px,6vw,72px) Cinzel;margin:0 0 18px;color:#f7e3dc;text-shadow:0 3px 0 #430b1b,0 0 28px #ef344b55}
.lore-hero h1 em,.lore-chronicle h2 em{font-style:normal;color:#ff6571}
.lore-lead{max-width:760px;margin:0 auto;color:#dfc5c5;font-size:20px;line-height:1.7}
.lore-divider{height:1px;max-width:540px;margin:42px auto 0;background:linear-gradient(90deg,transparent,#b95c68,#ffcc9b,#b95c68,transparent);position:relative}
.lore-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 18px;background:#3a0b1c;color:#ffbd8c;font-size:25px}
.lore-story{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lore-chapter{position:relative;padding:30px 32px 32px;background:linear-gradient(145deg,rgba(54,9,26,.94),rgba(13,4,11,.96));border:3px double #88404d;box-shadow:inset 0 0 28px #d71e3b1c,0 14px 32px #0007}
.lore-chapter:before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#ffd09b,#ef334d,transparent)}
.chapter-index{font:10px Cinzel;letter-spacing:2.5px;color:#e79b82;margin-bottom:15px}.chapter-index b{color:#ff4e60}
.lore-chapter h2{font:600 clamp(20px,2.4vw,27px) Cinzel;color:#f5dcd4;margin:0 0 16px}
.lore-chapter p{font-size:16px;line-height:1.75;color:#cdb6ba;margin:0 0 12px}.lore-chapter p:last-child{margin-bottom:0}
.chapter-three{grid-column:1/-1;max-width:100%;background:linear-gradient(110deg,rgba(55,8,25,.96),rgba(25,5,15,.96))}
.lore-prophecy{max-width:1000px;margin:62px auto 76px;padding:38px 8%;text-align:center;position:relative;border:3px double #9b4b57;background:radial-gradient(ellipse at 50% 0,#4b0c20,#15050f 72%);box-shadow:inset 0 0 35px #e52b4b22,0 0 28px #0008}
.prophecy-symbol{font-size:35px;color:#ffc18c;text-shadow:0 0 20px #ff304e}.prophecy-label{font:10px Cinzel;letter-spacing:3px;color:#e79b82;margin:12px 0 18px}
.lore-prophecy blockquote{font:clamp(19px,2.4vw,27px) Marcellus,Georgia,serif;line-height:1.7;color:#f1dcd6;margin:0 auto 18px;max-width:820px}
.lore-prophecy>span{font:italic 13px Georgia;color:#c58b8c}
.lore-chronicle{max-width:1100px;margin:0 auto;text-align:center}.lore-chronicle h2{font:600 clamp(28px,4vw,42px) Cinzel;margin:15px 0 42px;color:#f3ded8}
.chronicle-line{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:left;position:relative}
.chronicle-line:before{content:"";position:absolute;top:22px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#a84b59,#f7b78e,#a84b59,transparent)}
.chronicle-line>div{position:relative;padding:0 18px}
.chronicle-line i{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 18px 0;border:2px solid #c66a70;border-radius:50%;background:#260817;color:#ffd0a0;font:16px Cinzel;font-style:normal;box-shadow:0 0 18px #e72c4740}
.chronicle-line b{font:600 15px Cinzel;color:#f2d4cc}.chronicle-line p{font-size:14px;line-height:1.6;color:#c3a9af}
.lore-cta{margin:78px auto 0;max-width:850px;text-align:center;padding:45px 20px;background:radial-gradient(ellipse at 50% 0,#4c0c20,#17050f 72%);border-top:1px solid #a34a58;border-bottom:1px solid #a34a58}
.lore-cta h2{font:600 clamp(25px,3.5vw,38px) Cinzel;color:#f5dfd8;margin:17px 0 10px}.lore-cta p{color:#d1b4b8;font-size:17px}
.lore-cta a{display:inline-block;margin-top:14px;padding:14px 24px;border:3px double #c36a70;background:linear-gradient(110deg,#39091b,#8d1029,#39091b);font:600 10px Cinzel;letter-spacing:1.5px;color:#ffe1c8;box-shadow:0 0 20px #e12a453d;transition:filter .2s,box-shadow .2s}
.lore-cta a:hover{filter:brightness(1.25);box-shadow:0 0 26px #f23850}
@media(max-width:760px){.lore-page{padding:0 18px 55px}.lore-hero{padding:60px 5px 36px}.lore-lead{font-size:17px}.lore-story{grid-template-columns:1fr}.chapter-three{grid-column:auto}.lore-chapter{padding:24px 22px}.chronicle-line{grid-template-columns:1fr 1fr;row-gap:22px}.chronicle-line:before{display:none}.lore-prophecy{margin:45px auto 55px;padding:28px 20px}}
@media(max-width:430px){.chronicle-line{grid-template-columns:1fr}.chronicle-line>div{padding:0 8px}.chronicle-line i{margin-left:auto;margin-right:auto}.chronicle-line{text-align:center}}

/* Illustrated chapter panels and prophecy relic */
.lore-chapter{overflow:hidden}
.chapter-art{display:block;width:100%;height:150px;object-fit:cover;object-position:center 44%;margin:0 0 20px;border:1px solid #b65a60;box-shadow:0 0 18px #e32b482c, inset 0 0 12px #000}
.lore-chapter:after{content:"";display:block;position:absolute;left:32px;right:32px;top:calc(30px + 10px + 15px + 150px);height:1px;background:linear-gradient(90deg,transparent,#ffbd91,#e52c48,transparent);opacity:.75}
.prophecy-art{display:block;width:min(280px,80%);height:160px;object-fit:cover;object-position:center 44%;margin:0 auto 24px;border:2px solid #9c4c56;box-shadow:0 0 24px #e52b4938}
@media(max-width:760px){.chapter-art{height:180px}.lore-chapter:after{display:none}.prophecy-art{height:150px}}

/* Bloodmoon visual refresh: atmospheric illustrated backdrop and sharper artwork */
.lore-page{
 background-color:#10030b;
 background-image:
   linear-gradient(180deg,rgba(12,2,9,.52) 0%,rgba(18,3,12,.70) 42%,rgba(10,2,8,.88) 100%),
   url("lore-atmosphere.jpg");
 background-position:center top;
 background-size:cover;
 background-attachment:fixed;
}
.lore-page:before{
 height:4px;
}
.lore-hero{
 text-shadow:0 2px 12px #000;
}
.lore-chapter{
 background:
   linear-gradient(145deg,rgba(43,6,20,.91),rgba(9,2,8,.94)),
   url("lore-atmosphere.jpg") center/cover;
 border:3px double #a34e5b;
 box-shadow:inset 0 0 34px rgba(255,40,66,.13),0 16px 42px rgba(0,0,0,.62),0 0 18px rgba(211,32,60,.10);
 transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.lore-chapter:hover{
 transform:translateY(-4px);
 border-color:#d17b78;
 box-shadow:inset 0 0 38px rgba(255,40,66,.18),0 20px 48px rgba(0,0,0,.72),0 0 24px rgba(255,40,66,.20);
}
.chapter-art{
 height:190px;
 object-fit:cover;
 object-position:center 48%;
 border:1px solid #d17a78;
 outline:1px solid rgba(255,191,151,.22);
 outline-offset:3px;
 box-shadow:0 7px 22px rgba(0,0,0,.55),0 0 20px rgba(232,39,64,.24);
 image-rendering:auto;
}
.chapter-index{
 text-shadow:0 0 12px rgba(255,53,72,.30);
}
.lore-chapter h2{
 text-shadow:0 2px 12px rgba(244,54,77,.20);
}
.lore-prophecy{
 background:
  linear-gradient(90deg,rgba(15,2,9,.92),rgba(50,7,22,.90),rgba(15,2,9,.92)),
  url("lore-atmosphere.jpg") center/cover;
 border-color:#bd6670;
 box-shadow:inset 0 0 42px rgba(255,37,64,.18),0 15px 38px rgba(0,0,0,.6),0 0 26px rgba(230,35,62,.12);
}
.prophecy-art{
 width:min(360px,85%);
 height:190px;
 object-fit:cover;
 object-position:center 48%;
 border:2px solid #c77778;
 box-shadow:0 0 0 4px rgba(50,5,18,.9),0 0 28px rgba(235,35,65,.32);
}
.lore-chronicle{
 position:relative;
 padding:34px 24px 28px;
 background:linear-gradient(180deg,rgba(30,4,16,.68),rgba(8,2,8,.82));
 border-top:1px solid rgba(203,91,103,.6);
 border-bottom:1px solid rgba(203,91,103,.6);
 box-shadow:0 15px 36px rgba(0,0,0,.35);
}
.chronicle-line i{
 border-radius:12px 12px 12px 2px;
 transform:rotate(45deg);
 box-shadow:0 0 20px rgba(255,38,63,.36),inset 0 0 12px rgba(255,255,255,.08);
}
.chronicle-line i::first-letter{transform:rotate(-45deg)}
@media(max-width:760px){
 .lore-page{background-attachment:scroll}
 .chapter-art{height:205px}
}

/* Chapter III: use the complete new Bloodmoon scene without the previous zoomed crop */
.chapter-three .chapter-art{
  width:100%;
  height:190px;
  object-fit:cover;
  object-position:center 48%;
  border:1px solid #d17a78;
  outline:1px solid rgba(255,191,151,.22);
  outline-offset:3px;
  box-shadow:0 7px 22px rgba(0,0,0,.55),0 0 20px rgba(232,39,64,.24);
}
.chapter-three:after{display:none}
@media(max-width:760px){.chapter-three .chapter-art{height:205px}}

/* Bloodmoon chronicle timeline – rune medallions and illuminated path */
.lore-chronicle{
  max-width:1160px;
  margin:0 auto;
  padding:48px 34px 42px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(173,75,91,.65);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(117,13,39,.42),transparent 62%),
    linear-gradient(180deg,rgba(24,4,15,.94),rgba(8,2,9,.96));
  box-shadow:inset 0 0 42px rgba(235,39,65,.10),0 18px 42px rgba(0,0,0,.45);
}
.lore-chronicle:before,.lore-chronicle:after{
  content:"✦";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  color:#ffbd8b;
  font-size:21px;
  text-shadow:0 0 10px #ff304e,0 0 22px #ff304e;
}
.lore-chronicle:before{top:8px}
.lore-chronicle:after{bottom:5px}
.chronicle-line{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  position:relative;
  margin-top:8px;
  padding-top:2px;
}
.chronicle-line:before{
  content:"";
  position:absolute;
  top:39px;
  left:11%;
  right:11%;
  height:2px;
  background:linear-gradient(90deg,transparent,#7d263b 8%,#ffb17e 48%,#e72b49 75%,transparent);
  box-shadow:0 0 12px rgba(242,43,67,.45);
}
.chronicle-step{
  min-width:0;
  position:relative;
  text-align:center;
  padding:0 10px 10px;
  z-index:1;
}
.chronicle-node{
  width:76px;height:76px;
  margin:0 auto 18px;
  position:relative;
  display:grid;place-items:center;
  transform:rotate(45deg);
  border:2px solid #c87979;
  background:linear-gradient(135deg,#4b0a20,#16030d 55%,#650e25);
  box-shadow:0 0 0 4px rgba(49,5,19,.92),0 0 18px rgba(255,47,68,.42),inset 0 0 18px rgba(255,80,80,.22);
}
.chronicle-node:before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(255,198,151,.65);
}
.chronicle-node i{
  transform:rotate(-45deg);
  font-style:normal;
  color:#ffd2a0;
  font-size:30px;
  line-height:1;
  text-shadow:0 0 8px #ff4058,0 0 18px #ff304e;
}
.chronicle-node span{
  position:absolute;
  right:-9px;bottom:-9px;
  width:25px;height:25px;
  display:grid;place-items:center;
  transform:rotate(-45deg);
  border:1px solid #f0aa83;
  border-radius:50%;
  color:#fff0d7;
  background:#39091c;
  font:11px Cinzel,serif;
  box-shadow:0 0 10px rgba(255,47,68,.5);
}
.chronicle-step small{
  display:block;
  margin:0 0 8px;
  color:#dc8c79;
  font:9px Cinzel,serif;
  letter-spacing:2px;
}
.chronicle-step b{
  display:block;
  color:#f8dfd3;
  font:600 17px Cinzel,serif;
  text-shadow:0 0 12px rgba(245,53,75,.2);
}
.chronicle-step p{
  margin:10px auto 0;
  max-width:220px;
  color:#cdb5b9;
  font-size:14px;
  line-height:1.65;
}
.chronicle-step:hover .chronicle-node{
  border-color:#ffe0b2;
  box-shadow:0 0 0 4px rgba(49,5,19,.92),0 0 28px rgba(255,47,68,.68),inset 0 0 22px rgba(255,80,80,.34);
}
@media(max-width:760px){
  .lore-chronicle{padding:40px 16px 34px}
  .chronicle-line{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .chronicle-line:before{display:none}
}
@media(max-width:430px){
  .chronicle-line{grid-template-columns:1fr;gap:24px}
  .chronicle-step p{max-width:290px}
}

/* Alignment correction: keep the rune centered inside its diamond.
   The previous generic timeline icon rule was leaking into the new medallions. */
.chronicle-node{
  width:76px;height:76px;
  margin:0 auto 22px;
  position:relative;
  display:grid;place-items:center;
  transform:none;
  border:0;
  background:transparent;
  box-shadow:none;
}
.chronicle-node:before{
  content:"";
  position:absolute;
  width:66px;height:66px;
  left:5px;top:5px;
  inset:auto;
  transform:rotate(45deg);
  border:2px solid #c87979;
  background:linear-gradient(135deg,#4b0a20,#16030d 55%,#650e25);
  box-shadow:0 0 0 4px rgba(49,5,19,.92),0 0 18px rgba(255,47,68,.42),inset 0 0 18px rgba(255,80,80,.22);
}
.chronicle-node:after{
  content:"";
  position:absolute;
  width:52px;height:52px;
  left:12px;top:12px;
  transform:rotate(45deg);
  border:1px solid rgba(255,198,151,.65);
  pointer-events:none;
}
.chronicle-node i{
  display:block;
  position:relative;
  z-index:1;
  width:auto;height:auto;
  margin:0;padding:0;
  border:0;border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  font-style:normal;
  color:#ffd2a0;
  font-size:30px;
  line-height:1;
  text-shadow:0 0 8px #ff4058,0 0 18px #ff304e;
}
.chronicle-node span{
  position:absolute;
  z-index:2;
  left:50%;right:auto;bottom:-9px;
  transform:translateX(-50%);
  width:27px;height:27px;
  display:grid;place-items:center;
  border:1px solid #f0aa83;
  border-radius:50%;
  color:#fff0d7;
  background:#39091c;
  font:11px Cinzel,serif;
  box-shadow:0 0 10px rgba(255,47,68,.5);
}
.chronicle-step:hover .chronicle-node:before{
  border-color:#ffe0b2;
  box-shadow:0 0 0 4px rgba(49,5,19,.92),0 0 28px rgba(255,47,68,.68),inset 0 0 22px rgba(255,80,80,.34);
}
.chronicle-step:hover .chronicle-node i{
  color:#fff0d7;
  text-shadow:0 0 10px #ff4058,0 0 24px #ff304e;
}
@media(max-width:760px){
  .chronicle-line:before{display:none}
}

/* Clickable chronicle milestones */
.chronicle-step[role="button"]{cursor:pointer;outline:none;border-radius:8px;transition:transform .22s ease,background .22s ease}
.chronicle-step[role="button"]:hover,.chronicle-step[role="button"]:focus-visible{
 transform:translateY(-4px);
 background:radial-gradient(ellipse at 50% 24%,rgba(215,37,64,.13),transparent 72%);
}
.chronicle-step[role="button"]:focus-visible .chronicle-node:before{border-color:#ffe2b8;box-shadow:0 0 0 4px rgba(49,5,19,.92),0 0 28px rgba(255,47,68,.7)}
.chronicle-step[role="button"]:after{content:"CHRONIK ÖFFNEN";display:block;margin:12px auto 0;color:#e99b88;font:9px Cinzel,serif;letter-spacing:1.8px;opacity:0;transform:translateY(4px);transition:.2s}
.chronicle-step[role="button"]:hover:after,.chronicle-step[role="button"]:focus-visible:after{opacity:1;transform:none}

/* Modal overlay */
body.chronicle-modal-open{overflow:hidden}
.chronicle-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.chronicle-modal.open{opacity:1;visibility:visible}
.chronicle-modal-backdrop{position:absolute;inset:0;background:rgba(5,1,6,.86);backdrop-filter:blur(7px)}
.chronicle-dialog{position:relative;z-index:1;width:min(1040px,100%);max-height:min(88vh,850px);overflow:auto;padding:38px;background:linear-gradient(145deg,#35091d 0%,#16040f 50%,#090208 100%);border:3px double #a95762;box-shadow:inset 0 0 45px rgba(241,40,67,.14),0 0 0 1px rgba(255,199,157,.18),0 24px 90px #000;transform:translateY(18px) scale(.985);transition:transform .25s ease}
.chronicle-modal.open .chronicle-dialog{transform:none}
.chronicle-dialog:before,.chronicle-dialog:after{content:"✦";position:absolute;left:50%;transform:translateX(-50%);color:#ffca98;text-shadow:0 0 12px #ff294d,0 0 25px #ff294d;font-size:22px}
.chronicle-dialog:before{top:7px}.chronicle-dialog:after{bottom:5px}
.chronicle-dialog-ornament{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);color:#ff5b67;text-shadow:0 0 20px #ff1f43;font-size:30px}
.chronicle-close{position:absolute;right:16px;top:14px;z-index:3;width:42px;height:42px;border:1px solid #c36a73;background:linear-gradient(145deg,#5a0d25,#16030d);color:#ffe0cb;font-size:29px;line-height:1;cursor:pointer;box-shadow:0 0 14px rgba(255,43,68,.3)}
.chronicle-close:hover{background:#8c1530;box-shadow:0 0 22px rgba(255,43,68,.6)}
.chronicle-dialog-grid{display:grid;grid-template-columns:minmax(260px,.88fr) minmax(0,1.12fr);gap:34px;align-items:center}
.chronicle-dialog-art-wrap{position:relative;border:2px solid #a95762;padding:6px;background:#10030b;box-shadow:0 0 24px rgba(232,35,64,.2)}
.chronicle-dialog-art{display:block;width:100%;height:390px;object-fit:cover}
.chronicle-dialog-caption{padding:12px 8px 5px;text-align:center;color:#e9a28c;font:10px Cinzel,serif;letter-spacing:2px}
.chronicle-dialog-copy{padding:22px 8px}
.chronicle-dialog-copy h2{margin:12px 0 18px;color:#f6dfd7;font:600 clamp(26px,3.2vw,40px) Cinzel,serif}
.chronicle-dialog-divider{height:1px;background:linear-gradient(90deg,transparent,#a64b5a,#ffc08e,#a64b5a,transparent);position:relative;margin:24px 0}
.chronicle-dialog-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 12px;background:#230615;color:#ffc08e}
#chronicleModalText p{color:#d9c0c2;font-size:16px;line-height:1.8;margin:0 0 15px}
.chronicle-dialog-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(180,83,99,.45)}
.chronicle-dialog-navigation button{border:1px solid #9c4c58;background:linear-gradient(110deg,#310819,#691027,#310819);padding:12px 14px;color:#f6d8c8;font:10px Cinzel,serif;letter-spacing:1px;cursor:pointer}
.chronicle-dialog-navigation button:hover:not(:disabled){box-shadow:0 0 18px rgba(255,45,67,.38);border-color:#e4a184}
.chronicle-dialog-navigation button:disabled{opacity:.32;cursor:not-allowed}
#chronicleModalCount{color:#d99a88;font:11px Cinzel,serif;white-space:nowrap}
@media(max-width:760px){
 .chronicle-modal{padding:12px}
 .chronicle-dialog{padding:32px 18px 25px;max-height:92vh}
 .chronicle-dialog-grid{grid-template-columns:1fr;gap:14px}
 .chronicle-dialog-art{height:220px}
 .chronicle-dialog-copy{padding:10px 2px}
 .chronicle-dialog-navigation button{padding:10px 8px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .chronicle-modal,.chronicle-dialog,.chronicle-step[role="button"]{transition:none}
}

/* Chapter artwork refresh: panoramic, distinct, high-resolution illustrations */
.chronicle-dialog-grid{display:block}
.chronicle-dialog-art-wrap{
  width:100%;
  max-width:none;
  margin:0 auto 24px;
  padding:5px;
  border:2px solid #a95762;
  background:#10030b;
  box-shadow:0 0 24px rgba(232,35,64,.22),inset 0 0 16px #000;
}
.chronicle-dialog-art{
  display:block;
  width:100%;
  height:clamp(190px,25vw,270px);
  object-fit:cover;
  object-position:center 48%;
}
.chronicle-dialog-caption{
  padding:10px 8px 5px;
  text-align:center;
  color:#e9a28c;
  font:10px Cinzel,serif;
  letter-spacing:2px;
}
.chronicle-dialog-copy{padding:8px 10px 14px}
.chronicle-dialog-copy h2{margin:10px 0 16px}
#chronicleModalText{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;
}
#chronicleModalText p{margin:0 0 15px}
@media(max-width:760px){
  .chronicle-dialog-art{height:190px}
  #chronicleModalText{grid-template-columns:1fr}
  .chronicle-dialog-copy{padding:6px 2px}
}

/* The legacy portal: cinematic close to the lore page */
.lore-cta.legacy-portal{position:relative;isolation:isolate;overflow:hidden;width:min(1240px,calc(100% - 24px));max-width:1240px;margin:82px auto 12px;padding:72px 26px 0;border:3px double #a95762;background:radial-gradient(ellipse at 50% 38%,rgba(104,12,37,.72),rgba(24,4,15,.92) 48%,rgba(7,2,8,.98) 100%),url("lore-atmosphere.jpg") center/cover;box-shadow:inset 0 0 65px rgba(255,35,66,.17),0 20px 55px rgba(0,0,0,.65),0 0 28px rgba(228,35,63,.16)}
.legacy-portal:before,.legacy-portal:after{content:"✦";position:absolute;left:50%;transform:translateX(-50%);color:#ffd0a0;text-shadow:0 0 12px #ff304e,0 0 28px #ff304e;font-size:26px;z-index:3}
.legacy-portal:before{top:8px}.legacy-portal:after{bottom:8px}
.legacy-portal-art{position:absolute;z-index:-1;top:0;bottom:0;width:37%;background-repeat:no-repeat;background-size:cover;opacity:.78;filter:saturate(1.08);pointer-events:none}
.legacy-portal-left{left:0;background-image:linear-gradient(90deg,rgba(8,2,8,.06),rgba(10,2,9,.25) 55%,#10030b 100%),url("legacy-warrior-left.jpg");background-position:center 28%}
.legacy-portal-right{right:0;background-image:linear-gradient(270deg,rgba(8,2,8,.06),rgba(10,2,9,.25) 55%,#10030b 100%),url("legacy-elf-right.jpg");background-position:center 28%}
.legacy-portal-content{position:relative;z-index:1;max-width:760px;margin:0 auto;text-align:center;padding:6px 18px 34px;text-shadow:0 2px 8px #000}
.legacy-portal-content h2{font:600 clamp(28px,4vw,46px) Cinzel,serif;color:#f6e0d5;margin:18px 0 14px;line-height:1.2}
.legacy-portal-content h2 em{font-style:normal;color:#ff6471;text-shadow:0 0 18px rgba(255,44,75,.36)}
.legacy-portal-content p{max-width:720px;margin:0 auto;color:#ead1ce;font-size:17px;line-height:1.75}
.legacy-portal-button{display:inline-flex!important;align-items:center;justify-content:center;gap:16px;min-width:min(470px,100%);margin-top:26px!important;padding:17px 28px!important;border:3px double #f09a7e!important;outline:1px solid rgba(255,206,166,.28);outline-offset:4px;background:linear-gradient(100deg,#350817,#8d102b 48%,#350817)!important;color:#fff0d9!important;font:600 12px Cinzel,serif!important;letter-spacing:1.6px;box-shadow:0 0 18px rgba(255,37,65,.38),inset 0 0 18px rgba(255,94,88,.2)!important;transition:filter .2s,box-shadow .2s,transform .2s}
.legacy-portal-button:hover{filter:brightness(1.24);transform:translateY(-2px);box-shadow:0 0 30px rgba(255,37,65,.65),inset 0 0 22px rgba(255,94,88,.25)!important}
.legacy-pillars{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -26px;padding:20px 18px 24px;border-top:1px solid rgba(211,99,108,.65);background:linear-gradient(180deg,rgba(12,2,9,.80),rgba(7,2,8,.96));box-shadow:0 -12px 35px rgba(0,0,0,.3)}
.legacy-pillars>div{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 16px;border-right:1px solid rgba(164,69,83,.45)}
.legacy-pillars>div:last-child{border-right:0}
.legacy-pillars i{font-style:normal;font-size:30px;line-height:1.2;color:#ffc18e;text-shadow:0 0 16px #ff304e;margin-bottom:8px}
.legacy-pillars b{font:600 11px Cinzel,serif;color:#f4d9ce;letter-spacing:1px;margin-bottom:7px}
.legacy-pillars span{font-size:13px;line-height:1.5;color:#c9aeb3;max-width:210px}
@media(max-width:760px){.lore-cta.legacy-portal{width:100%;padding:54px 14px 0;margin-top:55px}.legacy-portal-art{width:48%;opacity:.38}.legacy-portal-content{padding:4px 4px 28px}.legacy-portal-content p{font-size:15px}.legacy-portal-button{min-width:0;width:100%;font-size:10px!important;padding:15px 10px!important;gap:8px}.legacy-pillars{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -14px;padding:14px 8px 18px}.legacy-pillars>div{padding:14px 8px;border-right:0}.legacy-pillars>div:nth-child(odd){border-right:1px solid rgba(164,69,83,.45)}.legacy-pillars>div:nth-child(-n+2){border-bottom:1px solid rgba(164,69,83,.35)}}

/* L2 Darkmoon world atlas – expanded Bloodmoon region guide */
.world-section{position:relative;overflow:hidden;padding:76px max(4vw,22px) 82px;background:radial-gradient(ellipse at 50% 0%,#5b1028 0%,#260817 38%,#0d0309 100%);border-block:2px solid #8e3c4b}
.world-section:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:radial-gradient(circle at 12% 18%,#ff5b63 0 1px,transparent 2px),radial-gradient(circle at 82% 32%,#ffb47e 0 1px,transparent 2px);background-size:120px 130px,170px 190px}
.world-hero,.world-divider,.world-subtitle,.region-grid,.challenge-grid,.world-feature-grid,.world-bottom-note{position:relative;z-index:1}
.world-hero{max-width:1240px;margin:0 auto 28px;text-align:center}
.world-hero h2{font:700 clamp(36px,5vw,60px) Cinzel,serif;color:#f6e3d7;margin:14px 0 4px;text-shadow:0 0 24px #ef334d55}
.world-hero h2 em{font-style:normal;color:#ff6673}
.world-kicker{font:10px Cinzel,serif;letter-spacing:3px;color:#e5a18c;margin:0 0 30px}
.world-intro{display:grid;grid-template-columns:minmax(250px,.75fr) minmax(0,1.4fr);align-items:center;gap:26px;text-align:left;padding:18px;background:linear-gradient(110deg,rgba(17,3,11,.96),rgba(48,8,25,.7));border:3px double #a44d5b;box-shadow:inset 0 0 35px #ef2e4822,0 16px 35px #0008}
.world-intro>div{padding:14px 18px}
.world-intro h3{font:600 27px Cinzel,serif;color:#f8dfd1;margin:0 0 12px}
.world-intro p{font-size:16px;line-height:1.7;color:#d7bec0;margin:0}
.world-intro img{display:block;width:100%;height:260px;object-fit:cover;border:1px solid #bc6269;box-shadow:0 0 22px #e42b493b}
.world-divider{display:flex;align-items:center;justify-content:center;gap:20px;margin:48px auto 8px;max-width:850px}
.world-divider:before,.world-divider:after{content:"";height:2px;flex:1;background:linear-gradient(90deg,transparent,#b64e5b,#ffb17f)}
.world-divider:after{transform:scaleX(-1)}
.world-divider span{color:#ffc18e;text-shadow:0 0 14px #ff304e;font-size:20px}
.world-divider h3{margin:0;color:#f3d8c7;font:600 clamp(22px,3vw,31px) Cinzel,serif;letter-spacing:3px;text-transform:uppercase;white-space:nowrap}
.world-subtitle{text-align:center;color:#d69a8b;font:10px Cinzel,serif;letter-spacing:2px;margin:0 auto 24px}
.region-grid{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.world-card{overflow:hidden;background:linear-gradient(160deg,#3b0a1d,#10030b);border:3px double #a54c59;box-shadow:inset 0 0 24px #e52b4522,0 12px 28px #0008;transition:transform .25s,box-shadow .25s}
.world-card:hover{transform:translateY(-5px);box-shadow:inset 0 0 24px #e52b4535,0 0 24px #f13a5266}
.world-card img{display:block;width:100%;height:142px;object-fit:cover;border-bottom:1px solid #b65a63}
.world-card-copy{padding:15px 16px 18px;text-align:center}
.world-card h4,.challenge-card h4{margin:0 0 8px;color:#f8dfce;font:600 18px Cinzel,serif}
.world-card p,.challenge-card p{margin:0;color:#d0b7bb;font-size:14px;line-height:1.55}
.challenge-divider{margin-top:56px}
.challenge-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.challenge-card{overflow:hidden;border:3px double #a64e5c;background:linear-gradient(145deg,#3c0b20,#10030b);box-shadow:0 14px 28px #0008,inset 0 0 25px #ef2c4722}
.challenge-card img{display:block;width:100%;height:180px;object-fit:cover;border-bottom:1px solid #a9505d}
.challenge-card>div{padding:16px 18px 19px;text-align:center}
.challenge-card h4{font-size:19px}
.world-feature-grid{max-width:1180px;margin:42px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.world-feature-grid article{padding:20px 14px;text-align:center;background:linear-gradient(150deg,rgba(60,9,30,.92),rgba(13,3,10,.96));border:2px double #8f414f;box-shadow:inset 0 0 20px #e62c4420}
.world-feature-grid i{font-style:normal;display:block;color:#ffc18e;font-size:31px;text-shadow:0 0 16px #ff304e;margin-bottom:9px}
.world-feature-grid h4{margin:0 0 8px;color:#f2d8ce;font:600 13px Cinzel,serif}
.world-feature-grid p{margin:0;color:#cbb0b5;font-size:13px;line-height:1.5}
.world-bottom-note{display:flex;justify-content:center;align-items:center;gap:18px;margin:38px auto 0;color:#e6b49d;text-align:center}
.world-bottom-note p{margin:0;font:500 16px Cinzel,serif;letter-spacing:1px}
.world-bottom-note span{color:#ffb984;text-shadow:0 0 12px #ff304e}
@media(max-width:900px){.region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-intro{grid-template-columns:1fr}.world-intro img{height:230px}}
@media(max-width:620px){.world-section{padding:54px 16px}.world-intro{padding:10px;gap:12px}.world-intro>div{padding:14px 8px}.world-intro img{height:180px}.world-divider{gap:10px;margin-top:38px}.world-divider h3{letter-spacing:1px}.world-subtitle{font-size:9px;line-height:1.6}.region-grid,.challenge-grid{grid-template-columns:1fr;max-width:440px}.world-card img{height:180px}.challenge-card img{height:190px}.world-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.world-feature-grid article{padding:16px 9px}.world-bottom-note p{font-size:13px}}

/* Region cards are actual interactive controls */
.world-card[role="button"]{cursor:pointer;outline:none;position:relative}
.world-card[role="button"]:focus-visible{outline:2px solid #ffd0a0;outline-offset:4px;box-shadow:0 0 28px #ff344f88}
.region-open-label{display:block;margin-top:14px;padding-top:10px;border-top:1px solid rgba(204,91,105,.45);color:#f0a38b;font:10px Cinzel,serif;letter-spacing:1.5px;opacity:.85}
.world-card:hover .region-open-label,.world-card:focus-visible .region-open-label{color:#ffe0b8;text-shadow:0 0 12px #ff304e;opacity:1}

/* Bloodmoon region dialog – bespoke CSS ornamentation (no raster frame overlay) */
body.region-modal-open{overflow:hidden}
.region-modal{position:fixed;inset:0;z-index:10010;display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.region-modal.open{opacity:1;visibility:visible}
.region-modal-backdrop{position:absolute;inset:0;background:rgba(3,1,5,.91);backdrop-filter:blur(9px)}
.region-dialog{position:relative;isolation:isolate;box-sizing:border-box;width:min(1320px,calc(100vw - 64px));max-height:calc(100vh - 54px);overflow:auto;overflow-x:hidden;padding:72px 78px 112px;background:radial-gradient(ellipse at 50% 0%,rgba(120,8,35,.36),transparent 56%),linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%);border:0;outline:0;box-shadow:inset 0 0 55px rgba(240,25,58,.15),0 25px 100px #000,0 0 34px rgba(220,24,55,.2);transform:translateY(14px) scale(.99);transition:transform .25s ease}
.region-modal.open .region-dialog{transform:none}
/* Four metallic corner brackets and restrained central crests create the frame in CSS. */
.region-dialog:before,.region-dialog:after{content:none}
.region-frame-overlay{position:absolute;z-index:7;inset:0;background:url("region-frame-overlay.png") center/100% 100% no-repeat;pointer-events:none}

.region-dialog-ornament{position:absolute;z-index:5;top:10px;left:16px;color:#ffe1c8;font-size:17px;text-shadow:0 0 10px #ff3151,0 0 20px #ff3151;pointer-events:none}
.region-dialog:after{content:""}
.region-close{position:absolute;right:42px;top:35px;z-index:9;width:46px;height:46px;border:1px solid #ff8879;background:linear-gradient(145deg,#5b0d25,#10030b);color:#ffe5d6;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 0 16px #ff1d3e88,inset 0 0 12px #ff314233}
.region-close:hover{background:#8c1530;box-shadow:0 0 24px #ff2b44bb}
.region-dialog-image{position:relative;z-index:2;display:block;box-sizing:border-box;width:100%;height:clamp(155px,23vh,235px);object-fit:cover;object-position:center 48%;border:2px solid #d65b61;padding:3px;background:#10030b;box-shadow:0 0 0 1px #ffbd8b55,0 0 25px #fa254c55}
.region-dialog-content{position:relative;z-index:2;padding:21px 10px 8px;text-align:center}
.region-dialog-content .section-mark{margin:2px 0 7px;color:#e9a18d;letter-spacing:4px;font-size:11px;text-shadow:0 0 12px #ff3d50}
.region-dialog-content h2{position:relative;margin:8px 0 16px;color:#f8e3d9;font:600 clamp(34px,4.5vw,60px) Cinzel,serif;letter-spacing:1px;line-height:1.12;text-shadow:0 3px 0 #2b0715,0 0 22px #e9274a66}
.region-dialog-content h2:after{content:"";display:block;width:min(420px,65%);height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,#ff4b54,#ffc18e,#ff4b54,transparent);box-shadow:0 0 12px #ff304e}
.region-description{max-width:1040px;margin:0 auto;color:#e8d0cf;font-size:clamp(15px,1.35vw,19px);line-height:1.7}
.region-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px;margin:19px 0 17px}
.region-detail-grid article{position:relative;display:flex;box-sizing:border-box;min-width:0;min-height:132px;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 17px 22px;background:radial-gradient(ellipse at 50% 0%,rgba(113,12,39,.34),transparent 70%),linear-gradient(160deg,rgba(28,5,16,.96),rgba(7,2,8,.98));border:1px solid #b84b5b;box-shadow:inset 0 0 22px rgba(245,36,66,.13),0 0 14px rgba(220,24,55,.12)}
.region-detail-grid article:before,.region-detail-grid article:after{content:"";position:absolute;width:25px;height:25px;border-color:#ff806c;border-style:solid;filter:drop-shadow(0 0 6px #ff334c)}
.region-detail-grid article:before{left:-1px;top:-1px;border-width:2px 0 0 2px}.region-detail-grid article:after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.region-detail-grid article>span{font-size:31px;color:#ffc18e;text-shadow:0 0 8px #ff4b55,0 0 18px #ff304e}
.region-detail-grid small{color:#e9a18d;font:10px Cinzel,serif;letter-spacing:2px;line-height:1.4;text-align:center}
.region-detail-grid b{display:block;width:100%;color:#f0dcda;font:500 15px Marcellus,serif;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.region-modal-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 0;border-top:1px solid #a84d5b}
.region-modal-navigation button{min-width:220px;min-height:48px;padding:13px 22px;border:1px solid #ff766d;background:linear-gradient(100deg,#210513,#650e27 48%,#210513);color:#ffe1cf;font:11px Cinzel,serif;letter-spacing:1.5px;cursor:pointer;box-shadow:inset 0 0 13px #ff334022,0 0 12px #ff304022;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%)}
.region-modal-navigation button:hover:not(:disabled){border-color:#ffd09c;background:linear-gradient(100deg,#41091b,#9b1734 48%,#41091b);box-shadow:0 0 24px #ff304e88,inset 0 0 15px #ffb07a33}
.region-modal-navigation button:disabled{opacity:.32;cursor:not-allowed}
#regionCount{color:#f2c09e;font:13px Cinzel,serif;letter-spacing:2px;text-shadow:0 0 10px #ff334c66;white-space:nowrap}
.region-data-note{max-width:850px;margin:16px auto 0;color:#bd9ca5;font-size:12px;line-height:1.55;text-align:center}
@media(max-width:760px){
 .region-modal{padding:12px}
 .region-dialog{width:calc(100vw - 36px);max-height:calc(100vh - 36px);padding:42px 28px 40px;outline-offset:0}
 .region-dialog:before,.region-dialog:after{width:22px;height:22px}
 .region-dialog:before{top:-13px}.region-dialog:after{bottom:-13px}
 .region-dialog-image{height:clamp(150px,24vh,220px)}
 .region-dialog-content{padding:16px 2px 5px}
 .region-description{font-size:14px;line-height:1.55}
 .region-detail-grid{grid-template-columns:1fr;gap:10px;margin:16px 0}
 .region-detail-grid article{min-height:0;padding:14px}
 .region-modal-navigation{flex-wrap:wrap;justify-content:center}
 .region-modal-navigation button{min-width:0;flex:1 1 40%;padding:11px 8px;font-size:9px}
 #regionCount{order:-1;width:100%;text-align:center}
 .region-close{top:25px;right:25px;width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){.region-modal,.region-dialog{transition:none}}

/* Fit the ornate frame around the content instead of letting its lower ornament cross the cards. */
@media (max-width: 900px){
  .region-dialog{padding:58px 48px 86px;width:calc(100vw - 28px)}
  .region-dialog-image{height:clamp(145px,24vh,210px)}
  .region-detail-grid{grid-template-columns:1fr;gap:12px;margin:16px 0}
  .region-detail-grid article{min-height:105px}
}
@media (max-width: 560px){
  .region-dialog{padding:48px 28px 70px}
  .region-dialog-content h2{font-size:clamp(27px,8vw,38px)}
  .region-modal-navigation{flex-wrap:wrap;justify-content:center}
  .region-modal-navigation button{min-width:0;flex:1 1 100%}
}


/* Final region dialog layout: frame follows the content; overflow stays inside its opening. */
.region-dialog{
  width:min(1320px,calc(100vw - 36px)) !important;
  height:auto !important;
  max-height:calc(100vh - 28px) !important;
  padding:0 !important;
  overflow:hidden !important;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,8,35,.36),transparent 56%),linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%);
}
.region-dialog-scroll{
  position:relative; z-index:2;
  box-sizing:border-box;
  max-height:calc(100vh - 190px);
  margin:76px 76px 86px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:#b94758 rgba(18,3,10,.75);
  overscroll-behavior:contain;
  padding:0 8px 4px;
}
.region-dialog-scroll::-webkit-scrollbar{width:9px}
.region-dialog-scroll::-webkit-scrollbar-track{background:rgba(18,3,10,.78);border-left:1px solid #5e2032}
.region-dialog-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f0a17d,#8f203e);border:2px solid #240817;border-radius:8px}
.region-frame-overlay{z-index:7;pointer-events:none}
.region-close{
  top:35px !important; right:48px !important; z-index:10 !important;
  width:42px !important; height:42px !important;
  display:grid; place-items:center;
  border:2px solid #ff9b83 !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 28%,#a52a43 0%,#4b0a20 48%,#13030b 100%) !important;
  color:#ffe6d3 !important;
  font: bold 25px/1 Georgia,serif !important;
  box-shadow:0 0 0 3px rgba(30,3,12,.9),inset 0 0 0 1px #ffd0a0,0 0 16px #ff244f !important;
  text-shadow:0 0 8px #ffb08a;
}
.region-close:hover{transform:scale(1.06);background:radial-gradient(circle,#d63c50,#51091d) !important}
@media(max-width:760px){
 .region-dialog{width:calc(100vw - 24px) !important;max-height:calc(100vh - 20px) !important}
 .region-dialog-scroll{max-height:calc(100vh - 132px);margin:54px 38px 64px;padding:0 5px 4px}
 .region-close{top:23px !important;right:27px !important;width:36px !important;height:36px !important;font-size:22px !important}
}
@media(max-width:480px){
 .region-dialog-scroll{max-height:calc(100vh - 110px);margin:48px 28px 58px}
 .region-close{top:17px !important;right:19px !important}
}

/* Transparent outside the ornamental frame; the content panel remains dark inside it. */
.region-dialog{
  background:transparent !important;
  box-shadow:none !important;
}
.region-dialog-scroll{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(105,8,34,.42), transparent 58%),
    linear-gradient(145deg, rgba(35,7,21,.98) 0%, rgba(15,3,11,.99) 58%, rgba(7,2,8,.99) 100%) !important;
  box-shadow: inset 0 0 34px rgba(240,25,58,.10);
}
.region-frame-overlay{
  background-image:url("region-frame-overlay.png") !important;
  background-position:center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
}

/* Bloodmoon chapter cards: framed tiles that open the matching chronicle chapter. */
.lore-chapter{
  position:relative;
  isolation:isolate;
  cursor:pointer;
  border:1px solid rgba(210,83,101,.88);
  outline:1px solid rgba(255,185,145,.20);
  outline-offset:4px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(130,10,39,.28),transparent 65%),
    linear-gradient(145deg,rgba(47,7,24,.97),rgba(10,2,10,.98));
  box-shadow:inset 0 0 30px rgba(240,28,63,.12),0 12px 32px rgba(0,0,0,.5);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.lore-chapter:before,.lore-chapter:after{
  content:"";
  position:absolute;
  z-index:3;
  width:30px;height:30px;
  border:solid #ff806e;
  filter:drop-shadow(0 0 6px #ff294d);
  pointer-events:none;
}
.lore-chapter:before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.lore-chapter:after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.lore-chapter:hover,.lore-chapter:focus-visible{
  transform:translateY(-4px);
  border-color:#ff8790;
  box-shadow:inset 0 0 36px rgba(240,28,63,.18),0 0 22px rgba(255,35,73,.22),0 18px 38px rgba(0,0,0,.6);
}
.lore-chapter:focus-visible{outline:2px solid #ffc18e;outline-offset:6px}
.lore-chapter .chapter-art{
  border:2px solid #b84b5b;
  padding:4px;
  background:#10030b;
  box-shadow:0 0 0 1px rgba(255,190,145,.28),0 0 18px rgba(255,35,73,.18);
}
.lore-chapter h2{ text-shadow:0 0 14px rgba(255,55,82,.16) }
.lore-chapter .chapter-index{ text-shadow:0 0 10px rgba(255,55,82,.18) }
.lore-chapter .chapter-open-hint{
  display:block;margin-top:18px;text-align:right;
  color:#e9a18d;font:10px Cinzel,serif;letter-spacing:1.8px;
  opacity:.82;transition:opacity .2s ease,color .2s ease;
}
.lore-chapter:hover .chapter-open-hint,.lore-chapter:focus-visible .chapter-open-hint{opacity:1;color:#ffe0bc}

/* Reuse the same transparent ornamental frame as the region window for the chronicle reader. */
.chronicle-dialog{
  box-sizing:border-box;
  padding:66px 76px 78px;
  background:radial-gradient(ellipse at 50% 0%,rgba(110,7,34,.24),transparent 60%),linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%);
  border:0;
  outline:0;
  box-shadow:none;
  isolation:isolate;
}
.chronicle-dialog:before,.chronicle-dialog:after{content:none}
.chronicle-frame-overlay{
  position:absolute;z-index:5;inset:0;
  background:url("region-frame-overlay.png") center/100% 100% no-repeat;
  pointer-events:none;
}
.chronicle-dialog-grid,.chronicle-close,.chronicle-dialog-ornament{
  position:relative;z-index:6;
}
.chronicle-close{
  position:absolute;right:54px;top:38px;
  width:46px;height:46px;border-radius:50%;
  border:2px solid #ff9a83;
  background:radial-gradient(circle at 35% 30%,#8f1a35,#250511 72%);
  color:#ffe7d6;font-size:27px;line-height:1;
  box-shadow:0 0 0 3px rgba(20,3,12,.85),0 0 16px #ff244e99,inset 0 0 9px #ff8b7355;
}
.chronicle-close:hover{background:radial-gradient(circle at 35% 30%,#c02b49,#3a0718 72%);box-shadow:0 0 0 3px rgba(20,3,12,.85),0 0 24px #ff244ecc}
.chronicle-dialog-grid{position:relative;z-index:6}
@media(max-width:900px){
  .chronicle-dialog{padding:58px 48px 68px}
  .chronicle-close{right:36px;top:26px}
}
@media(max-width:640px){
  .chronicle-dialog{padding:48px 28px 58px}
  .chronicle-dialog-grid{grid-template-columns:1fr;gap:12px}
  .chronicle-dialog-art{height:220px}
  .chronicle-close{right:24px;top:20px;width:40px;height:40px}
}


/* Chapter reader: match the ornamental frame proportions and inner safe area of the region dialog. */
.chronicle-modal{
  padding:18px !important;
}
.chronicle-dialog{
  box-sizing:border-box !important;
  width:min(1320px,calc(100vw - 48px)) !important;
  aspect-ratio:1672 / 941;
  max-height:calc(100vh - 40px) !important;
  height:auto !important;
  overflow:hidden !important;
  padding:76px 82px 94px !important;
  border:0 !important;
  outline:0 !important;
  background:radial-gradient(ellipse at 50% 0%,rgba(110,7,34,.24),transparent 60%),linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  box-shadow:none !important;
  isolation:isolate;
}
.chronicle-frame-overlay{
  position:absolute !important;
  z-index:5 !important;
  inset:0 !important;
  background:url("region-frame-overlay.png") center / 100% 100% no-repeat !important;
  pointer-events:none !important;
}
.chronicle-dialog-grid{
  position:relative !important;
  z-index:6 !important;
  box-sizing:border-box;
  width:100%;
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-color:#a83b50 rgba(18,3,12,.65);
  scrollbar-width:thin;
  padding:4px 8px 10px;
}
.chronicle-dialog-grid::-webkit-scrollbar{width:9px}
.chronicle-dialog-grid::-webkit-scrollbar-track{background:rgba(18,3,12,.65);border-left:1px solid rgba(225,90,105,.3)}
.chronicle-dialog-grid::-webkit-scrollbar-thumb{background:linear-gradient(#d65b61,#641329);border:1px solid #f0a18a;border-radius:8px}
.chronicle-close{
  position:absolute !important;
  z-index:9 !important;
  top:38px !important;
  right:52px !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:2px solid #ff9a83 !important;
  background:radial-gradient(circle at 35% 30%,#8f1a35,#250511 72%) !important;
  color:#ffe7d6 !important;
  font-size:27px !important;
  line-height:1 !important;
  box-shadow:0 0 0 3px rgba(20,3,12,.85),0 0 16px #ff244e99,inset 0 0 9px #ff8b7355 !important;
}
.chronicle-dialog-ornament{z-index:8 !important;pointer-events:none}
@media(max-width:900px){
  .chronicle-dialog{
    width:calc(100vw - 28px) !important;
    aspect-ratio:auto;
    max-height:calc(100vh - 24px) !important;
    padding:62px 54px 78px !important;
  }
  .chronicle-dialog-grid{max-height:calc(100vh - 164px)}
  .chronicle-close{top:28px !important;right:34px !important}
}
@media(max-width:640px){
  .chronicle-dialog{
    aspect-ratio:auto;
    padding:50px 34px 66px !important;
  }
  .chronicle-dialog-grid{max-height:calc(100vh - 132px)}
  .chronicle-close{top:22px !important;right:25px !important;width:38px !important;height:38px !important}
}


/* Chapter reader: transparent outside the ornamental frame, dark fill only inside it. */
.chronicle-dialog{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
}
.chronicle-dialog-grid{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(105,8,34,.42), transparent 58%),
    linear-gradient(145deg, rgba(35,7,21,.98) 0%, rgba(15,3,11,.99) 58%, rgba(7,2,8,.99) 100%) !important;
  box-shadow:inset 0 0 34px rgba(240,25,58,.10);
}


/* Keep the chapter content safely inside the ornamental frame opening. */
.chronicle-dialog{
  overflow:hidden !important;
}
.chronicle-dialog-grid{
  box-sizing:border-box !important;
  width:calc(100% - 28px) !important;
  height:calc(100% - 30px) !important;
  max-height:calc(100% - 30px) !important;
  margin:0 14px 30px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable;
}
@media(max-width:900px){
  .chronicle-dialog-grid{
    width:calc(100% - 18px) !important;
    height:auto !important;
    max-height:calc(100vh - 210px) !important;
    margin:0 9px 20px !important;
  }
}
@media(max-width:640px){
  .chronicle-dialog-grid{
    width:calc(100% - 8px) !important;
    max-height:calc(100vh - 175px) !important;
    margin:0 4px 14px !important;
  }
}


/* Final small bottom clearance: keep the chapter reader above the lower frame ornament. */
.chronicle-dialog-grid{
  height:calc(100% - 44px) !important;
  max-height:calc(100% - 44px) !important;
  margin-bottom:44px !important;
}
@media(max-width:900px){
  .chronicle-dialog-grid{
    max-height:calc(100vh - 224px) !important;
    margin-bottom:28px !important;
  }
}
@media(max-width:640px){
  .chronicle-dialog-grid{
    max-height:calc(100vh - 190px) !important;
    margin-bottom:20px !important;
  }
}


/* =========================================================
   BLOODMOON SITE-WIDE CONTENT SKIN
   Applies to page panels and tiles; modal frame styles stay separate.
   ========================================================= */
:root{
  --bm-red:#ff4058;
  --bm-red-soft:#b84b60;
  --bm-silver:#d9c4c5;
  --bm-gold:#ffc18e;
  --bm-deep:#10030b;
}

/* Large lore and world tiles */
.lore-chapter,
.world-card,
.challenge-card{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(205,91,111,.92) !important;
  outline:1px solid rgba(255,190,151,.22);
  outline-offset:3px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(125,9,39,.34),transparent 66%),
    linear-gradient(145deg,rgba(47,7,24,.98),rgba(9,2,9,.99)) !important;
  box-shadow:
    inset 0 0 28px rgba(238,35,66,.12),
    0 12px 30px rgba(0,0,0,.48),
    0 0 12px rgba(255,35,70,.08) !important;
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.lore-chapter:before,.lore-chapter:after,
.world-card:before,.world-card:after,
.challenge-card:before,.challenge-card:after{
  content:"";
  position:absolute;
  z-index:4;
  width:28px;height:28px;
  border:solid #ff806e;
  filter:drop-shadow(0 0 5px rgba(255,35,72,.8));
  pointer-events:none;
}
.lore-chapter:before,.world-card:before,.challenge-card:before{
  top:-1px;left:-1px;border-width:2px 0 0 2px;
}
.lore-chapter:after,.world-card:after,.challenge-card:after{
  right:-1px;bottom:-1px;border-width:0 2px 2px 0;
}
.lore-chapter:hover,.world-card:hover,.challenge-card:hover{
  transform:translateY(-4px);
  border-color:#ff8a7b !important;
  box-shadow:inset 0 0 34px rgba(238,35,66,.18),0 0 24px rgba(255,35,72,.30),0 16px 34px rgba(0,0,0,.55) !important;
}

/* Artwork gets its own restrained metallic inset */
.world-card img,.challenge-card img,.chapter-art{
  border:1px solid rgba(221,126,129,.8);
  box-shadow:0 0 0 3px rgba(12,2,9,.9),0 0 12px rgba(255,40,72,.22);
  box-sizing:border-box;
}

/* Smaller information panels: same palette, quieter ornament */
.world-feature-grid article,
.server-facts,
.lore-prophecy,
.coming-soon,
.community-section{
  position:relative;
  isolation:isolate;
  border:1px solid rgba(176,73,91,.78);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(91,8,31,.24),transparent 68%),
    linear-gradient(145deg,rgba(32,6,19,.96),rgba(8,2,8,.98));
  box-shadow:inset 0 0 24px rgba(229,38,67,.09),0 10px 26px rgba(0,0,0,.30);
}
.world-feature-grid article:before,
.lore-prophecy:before,
.coming-soon:before{
  content:"";
  position:absolute;
  top:-1px;left:18px;width:34px;height:2px;
  background:linear-gradient(90deg,#ffb08a,#ff4058);
  box-shadow:0 0 9px #ff4058;
}
.world-feature-grid article:hover{
  border-color:#e77b7e;
  box-shadow:inset 0 0 28px rgba(229,38,67,.16),0 0 18px rgba(255,40,72,.18);
  transform:translateY(-3px);
  transition:transform .22s ease,box-shadow .22s ease;
}

/* Server information cells */
.server-facts{
  overflow:hidden;
  border:1px solid rgba(195,82,100,.9) !important;
  box-shadow:inset 0 0 26px rgba(230,35,65,.12),0 0 22px rgba(0,0,0,.35);
}
.server-facts div{
  position:relative;
  background:linear-gradient(180deg,rgba(94,10,36,.18),rgba(10,2,9,.12));
}
.server-facts div+div{border-left:1px solid rgba(180,75,91,.45)}
.server-facts b{color:#f4dfd4;text-shadow:0 0 10px rgba(255,70,91,.18)}

/* Timeline and chronology markers */
.chronicle-step{
  position:relative;
  transition:transform .22s ease,filter .22s ease;
}
.chronicle-step:hover{transform:translateY(-3px);filter:drop-shadow(0 0 10px rgba(255,45,76,.38))}
.chronicle-node{
  border-color:#d76b72 !important;
  box-shadow:0 0 0 4px rgba(16,3,11,.9),0 0 16px rgba(255,40,72,.35) !important;
}

/* Legacy portal and community actions — unified Bloodmoon frame */
.lore-cta.legacy-portal{
  border:1px solid rgba(194,79,97,.82);
  box-shadow:inset 0 0 35px rgba(233,34,65,.13),0 18px 40px rgba(0,0,0,.4);
}
.legacy-pillars>div{position:relative}
.legacy-pillars>div+div{border-left:1px solid rgba(164,69,83,.45)}
.community-section{
  position:relative;
  isolation:isolate;
  overflow:visible;
  max-width:1600px;
  margin:34px auto 48px;
  padding:112px clamp(42px,8vw,132px) 112px;
  border:0 !important;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(92,8,31,.40),rgba(13,2,10,.96) 72%),
    linear-gradient(145deg,#210613,#090208) !important;
  box-shadow:none !important;
}
.community-section:before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  background:url("world-intro-frame.png") center / 100% 100% no-repeat;
  pointer-events:none;
}
.community-section>*{position:relative;z-index:2}
.community-section .section-mark{margin-bottom:18px;text-shadow:0 0 12px rgba(255,70,86,.55)}
.community-section h2{
  margin:12px auto 20px;
  color:#f3dfd6;
  text-shadow:0 2px 0 #270711,0 0 18px rgba(255,50,72,.22);
}
.community-section>p{max-width:930px;margin:0 auto;color:#ead5d0}
.community-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin:30px auto 0;
  flex-wrap:wrap;
}
.community-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:clamp(260px,32vw,430px);
  min-height:92px;
  padding:0 76px 0 82px;
  border:0 !important;
  background:url("region-nav-button.png") center / 100% 100% no-repeat !important;
  color:#ffe3b5 !important;
  font:700 12px Cinzel,serif !important;
  letter-spacing:1px;
  text-align:center;
  text-shadow:0 1px 4px #24030b,0 0 9px rgba(255,172,92,.28);
  box-shadow:none !important;
  transition:transform .22s ease,filter .22s ease;
}
.community-actions a:hover{
  transform:translateY(-2px) scale(1.015);
  filter:brightness(1.18) drop-shadow(0 0 12px rgba(255,35,67,.35));
}
.community-actions a:focus-visible{outline:2px solid #ffc18e;outline-offset:3px}

/* Keep the ornamentation restrained on smaller screens */
@media(max-width:760px){
  .lore-chapter:before,.lore-chapter:after,
  .world-card:before,.world-card:after,
  .challenge-card:before,.challenge-card:after{width:20px;height:20px}
  .world-feature-grid article{padding:16px 12px}
  .server-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .server-facts div{border-bottom:1px solid rgba(180,75,91,.4)}
  .server-facts div+div{border-left:0}
}
@media(prefers-reduced-motion:reduce){
  .lore-chapter,.world-card,.challenge-card,.world-feature-grid article,
  .chronicle-step,.community-actions a{transition:none !important}
}


/* =========================================================
   BLOODMOON FRAMEWORK V2 — clearly visible ornamental panels
   ========================================================= */
.lore-chapter,
.world-card,
.challenge-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden;
  border:1px solid #b85a68 !important;
  outline:1px solid rgba(236,167,151,.42) !important;
  outline-offset:4px !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(157,13,47,.34),transparent 58%),
    linear-gradient(155deg,rgba(58,8,29,.98) 0%,rgba(25,4,17,.99) 48%,rgba(7,2,9,1) 100%) !important;
  box-shadow:
    inset 0 0 0 3px rgba(15,2,10,.95),
    inset 0 0 0 4px rgba(185,75,91,.42),
    inset 0 0 36px rgba(255,30,66,.16),
    0 0 0 1px rgba(255,185,145,.16),
    0 14px 34px rgba(0,0,0,.58) !important;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease !important;
}
.lore-chapter > *,
.world-card > *,
.challenge-card > *{
  position:relative;
  z-index:2;
}
.lore-chapter:before,.world-card:before,.challenge-card:before{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  inset:0 0 auto 0;
  height:31px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(255,65,86,.95) 0 2px,rgba(255,65,86,.32) 3px,transparent 17px),
    linear-gradient(90deg,transparent 0 5%,#ff9b82 5.2%,#692034 11%,transparent 18% 82%,#692034 89%,#ff9b82 94.8%,transparent 95%),
    linear-gradient(180deg,rgba(255,55,79,.17),transparent);
  opacity:.95;
}
.lore-chapter:after,.world-card:after,.challenge-card:after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
  inset:auto 0 0 0;
  height:27px;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(255,65,86,.8) 0 2px,rgba(255,65,86,.25) 3px,transparent 16px),
    linear-gradient(90deg,transparent 0 5%,#ff9b82 5.2%,#692034 11%,transparent 18% 82%,#692034 89%,#ff9b82 94.8%,transparent 95%),
    linear-gradient(0deg,rgba(255,55,79,.14),transparent);
}
.lore-chapter:hover,.world-card:hover,.challenge-card:hover,
.lore-chapter:focus-visible,.world-card:focus-visible,.challenge-card:focus-visible{
  transform:translateY(-5px) !important;
  filter:brightness(1.12);
  outline-color:rgba(255,190,151,.72) !important;
  box-shadow:
    inset 0 0 0 3px rgba(15,2,10,.95),
    inset 0 0 0 4px rgba(255,115,119,.62),
    inset 0 0 42px rgba(255,30,66,.22),
    0 0 0 1px rgba(255,185,145,.3),
    0 0 26px rgba(255,35,72,.38),
    0 18px 38px rgba(0,0,0,.62) !important;
}

/* Stronger metallic picture mounts, not a plain thin image border */
.lore-chapter .chapter-art,
.world-card img,
.challenge-card img{
  box-sizing:border-box !important;
  border:2px solid #c16a72 !important;
  outline:1px solid rgba(255,193,142,.35);
  outline-offset:3px;
  padding:4px !important;
  background:linear-gradient(135deg,#481023,#10030b 45%,#7c263d) !important;
  box-shadow:0 0 0 2px rgba(7,2,8,.92),0 0 18px rgba(255,35,72,.28) !important;
}

/* More depth and a consistent ornamental treatment for compact feature panels */
.world-feature-grid article,
.server-facts,
.lore-prophecy,
.coming-soon{
  border:1px solid #9e4c5d !important;
  outline:1px solid rgba(231,151,139,.22);
  outline-offset:3px;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(125,10,39,.30),transparent 62%),
    linear-gradient(150deg,rgba(43,7,25,.98),rgba(8,2,9,.99)) !important;
  box-shadow:
    inset 0 0 0 2px rgba(16,3,12,.85),
    inset 0 0 26px rgba(255,35,72,.13),
    0 10px 25px rgba(0,0,0,.42) !important;
}
.world-feature-grid article{
  position:relative;
  transition:transform .22s ease,box-shadow .22s ease;
}
.world-feature-grid article:before{
  content:"✦";
  position:absolute;
  top:7px;left:50%;
  transform:translateX(-50%);
  color:#ffc18e;
  font-size:12px;
  text-shadow:0 0 9px #ff304e;
}
.world-feature-grid article:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 28px rgba(255,35,72,.2),0 0 20px rgba(255,35,72,.25) !important;
}

/* Server facts: each metric becomes its own framed compartment */
.server-facts{
  gap:1px;
  padding:5px;
  background:linear-gradient(135deg,#a94b60,#250817 25%,#090209 70%,#a94b60) !important;
}
.server-facts div{
  padding:22px 12px;
  background:linear-gradient(155deg,rgba(57,8,30,.98),rgba(11,2,10,.99)) !important;
  border:0 !important;
}

/* Smaller viewport: retain the visual frame without crowding text */
@media(max-width:760px){
  .lore-chapter,.world-card,.challenge-card{
    outline-offset:2px !important;
    box-shadow:inset 0 0 0 2px rgba(15,2,10,.95),inset 0 0 0 3px rgba(185,75,91,.42),inset 0 0 24px rgba(255,30,66,.13),0 10px 24px rgba(0,0,0,.5) !important;
  }
  .lore-chapter:before,.world-card:before,.challenge-card:before{height:22px}
  .lore-chapter:after,.world-card:after,.challenge-card:after{height:20px}
}


/* V3: make the homepage panels unmistakably framed; use explicit selectors and cache-busted stylesheet. */
.lore-story .lore-chapter,
.world-section .world-card,
.world-section .challenge-card{
  border:2px solid #b95b68 !important;
  outline:1px solid rgba(255,194,157,.52) !important;
  outline-offset:4px !important;
  background:
    linear-gradient(135deg,rgba(255,168,135,.12),transparent 16% 84%,rgba(255,168,135,.08)),
    radial-gradient(ellipse at 50% 0%,rgba(150,12,47,.38),transparent 62%),
    linear-gradient(145deg,#3b0924 0%,#170511 52%,#080208 100%) !important;
  box-shadow:
    inset 0 0 0 3px #10030b,
    inset 0 0 0 4px rgba(193,91,105,.62),
    inset 0 0 32px rgba(255,30,66,.20),
    0 0 0 1px rgba(255,195,160,.18),
    0 12px 32px rgba(0,0,0,.58) !important;
}
.lore-story .lore-chapter:before,
.world-section .world-card:before,
.world-section .challenge-card:before{
  content:"" !important;
  position:absolute !important;
  z-index:8 !important;
  inset:0 !important;
  width:auto !important;height:auto !important;
  border:0 !important;
  background:
    linear-gradient(#ffb18f,#ff465e) left 0 top 0/48px 3px no-repeat,
    linear-gradient(#ffb18f,#ff465e) left 0 top 0/3px 48px no-repeat,
    linear-gradient(#ffb18f,#ff465e) right 0 bottom 0/48px 3px no-repeat,
    linear-gradient(#ffb18f,#ff465e) right 0 bottom 0/3px 48px no-repeat,
    radial-gradient(circle at 0 0,#fff0d0 0 2px,#ff465e 3px,transparent 12px),
    radial-gradient(circle at 100% 100%,#fff0d0 0 2px,#ff465e 3px,transparent 12px) !important;
  filter:drop-shadow(0 0 5px rgba(255,35,72,.9)) !important;
  opacity:1 !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter:after,
.world-section .world-card:after,
.world-section .challenge-card:after{
  content:"✦" !important;
  position:absolute !important;
  z-index:8 !important;
  right:13px !important;bottom:8px !important;
  left:auto !important;top:auto !important;
  width:auto !important;height:auto !important;
  border:0 !important;
  color:#ffc18e !important;
  font:17px Cinzel,serif !important;
  text-shadow:0 0 7px #ff304e,0 0 15px #ff304e !important;
  background:none !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter .chapter-art,
.world-section .world-card img,
.world-section .challenge-card img{
  border:2px solid #d0787d !important;
  outline:1px solid rgba(255,198,160,.5) !important;
  outline-offset:3px !important;
  padding:4px !important;
  background:linear-gradient(135deg,#e29a82,#531326 45%,#17040d) !important;
  box-shadow:0 0 0 2px #080208,0 0 20px rgba(255,35,72,.32) !important;
}


/* Use the exact ornamental Bloodmoon frame artwork from the working chapter dialog. */
.lore-story .lore-chapter{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(91,8,30,.22),transparent 60%),
    linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  box-shadow:none !important;
  padding:58px 42px 58px !important;
}
.lore-story .lore-chapter:before{
  content:"" !important;
  position:absolute !important;
  z-index:10 !important;
  inset:-9px !important;
  width:auto !important;height:auto !important;
  border:0 !important;
  background:url("bloodmoon-card-frame-portrait.png") center/100% 100% no-repeat !important;
  filter:none !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter:after{content:none !important}
.lore-story .lore-chapter > *{
  position:relative;
  z-index:2;
}
.lore-story .lore-chapter .chapter-art{
  width:100%;
  box-sizing:border-box;
  border:2px solid #b85b69 !important;
  outline:1px solid rgba(255,190,145,.3);
  outline-offset:3px;
  padding:3px !important;
  background:#10030b !important;
  box-shadow:0 0 14px rgba(255,35,72,.22) !important;
}

/* The landscape tiles use the same original artwork as the dialog frame, not a CSS imitation. */
.world-section .world-card,
.world-section .challenge-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(91,8,30,.22),transparent 60%),
    linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  box-shadow:none !important;
}
.world-section .world-card:before,
.world-section .challenge-card:before{
  content:"" !important;
  position:absolute !important;
  z-index:10 !important;
  inset:0 !important;
  width:auto !important;height:auto !important;
  border:0 !important;
  background:url("region-frame-overlay.png") center/100% 100% no-repeat !important;
  filter:none !important;
  pointer-events:none !important;
}
.world-section .world-card:after,
.world-section .challenge-card:after{content:none !important}
.world-section .world-card > *,
.world-section .challenge-card > *{position:relative;z-index:2}
.world-section .world-card img,
.world-section .challenge-card img{
  border:1px solid rgba(212,117,125,.85) !important;
  outline:0 !important;
  padding:2px !important;
  background:#10030b !important;
  box-shadow:0 0 12px rgba(255,35,72,.2) !important;
}

/* Other homepage information panels receive the same frame as a subtle outer skin. */
.lore-prophecy,
.world-feature-grid article,
.server-facts{
  border:0 !important;
  outline:0 !important;
  background:
    url("region-frame-overlay.png") center/100% 100% no-repeat,
    radial-gradient(ellipse at 50% 0%,rgba(91,8,30,.24),transparent 62%),
    linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  box-shadow:none !important;
}
.lore-prophecy{padding:52px 8% !important}
.world-feature-grid article{padding:32px 22px !important}
.server-facts{padding:34px 42px !important}
@media(max-width:760px){
  .lore-story .lore-chapter{padding:48px 34px 50px !important}
  .lore-prophecy{padding:42px 8% !important}
  .world-feature-grid article{padding:26px 16px !important}
  .server-facts{padding:28px 30px !important}
}


/* Portrait frame alignment: place all card content inside the actual clear opening. */
.lore-story .lore-chapter{
  box-sizing:border-box !important;
  padding:92px 68px 94px !important;
}
.lore-story .lore-chapter .chapter-index,
.lore-story .lore-chapter .chapter-art,
.lore-story .lore-chapter h2,
.lore-story .lore-chapter p,
.lore-story .lore-chapter .chapter-open-hint{
  position:relative !important;
  z-index:2 !important;
}
.lore-story .lore-chapter .chapter-index{margin-bottom:18px !important}
.lore-story .lore-chapter .chapter-art{
  display:block;
  margin:0 auto 20px !important;
  width:100% !important;
}
.lore-story .lore-chapter h2{margin-top:0 !important}
@media(max-width:900px){
  .lore-story .lore-chapter{padding:78px 54px 82px !important}
}
@media(max-width:640px){
  .lore-story .lore-chapter{padding:66px 42px 72px !important}
}


/* FINAL CLEAN PORTRAIT FRAME LAYOUT — one intact frame per chapter tile. */
.lore-story{
  align-items:stretch !important;
  gap:34px !important;
}
.lore-story .lore-chapter{
  position:relative !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:700px !important;
  aspect-ratio:720 / 1000 !important;
  padding:96px 76px 100px !important;
  margin:0 !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  background:
    radial-gradient(ellipse at 50% 12%,rgba(91,8,30,.24),transparent 58%),
    linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  box-shadow:none !important;
}
.lore-story .lore-chapter:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:10 !important;
  inset:-12px !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  outline:0 !important;
  background-image:url("bloodmoon-card-frame-portrait.png") !important;
  background-position:center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  filter:none !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter:after{content:none !important;display:none !important}
.lore-story .lore-chapter > *{
  position:relative !important;
  z-index:2 !important;
  max-width:100% !important;
}
.lore-story .lore-chapter .chapter-index{
  margin:0 0 15px !important;
  font-size:9px !important;
  letter-spacing:2px !important;
  line-height:1.5 !important;
}
.lore-story .lore-chapter .chapter-art{
  display:block !important;
  width:100% !important;
  height:150px !important;
  object-fit:cover !important;
  box-sizing:border-box !important;
  margin:0 0 18px !important;
  padding:3px !important;
  border:1px solid #c16b76 !important;
  outline:1px solid rgba(255,190,145,.28) !important;
  outline-offset:2px !important;
  background:#10030b !important;
  box-shadow:0 0 12px rgba(255,35,72,.18) !important;
}
.lore-story .lore-chapter h2{
  margin:0 0 13px !important;
  font-size:clamp(18px,1.9vw,25px) !important;
  line-height:1.28 !important;
}
.lore-story .lore-chapter p{
  margin:0 0 10px !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
.lore-story .lore-chapter .chapter-open-hint{
  display:block !important;
  margin:12px 0 0 !important;
  text-align:right !important;
  font-size:9px !important;
}
@media(max-width:900px){
  .lore-story{gap:28px !important}
  .lore-story .lore-chapter{
    min-height:650px !important;
    padding:82px 60px 88px !important;
  }
  .lore-story .lore-chapter .chapter-art{height:130px !important}
}
@media(max-width:700px){
  .lore-story{grid-template-columns:1fr !important;gap:30px !important}
  .lore-story .lore-chapter{
    width:min(100%,540px) !important;
    justify-self:center !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    padding:92px 76px 100px !important;
  }
  .lore-story .lore-chapter .chapter-art{height:clamp(130px,34vw,180px) !important}
}


/* Fix clipped top edge: keep the complete frame inside its own layout area. */
.lore-story{
  box-sizing:border-box !important;
  padding:28px 18px 34px !important;
  overflow:visible !important;
  align-items:stretch !important;
}
.lore-story .lore-chapter{
  box-sizing:border-box !important;
  overflow:visible !important;
  isolation:isolate !important;
  aspect-ratio:720 / 1000 !important;
  min-height:700px !important;
  padding:96px 76px 100px !important;
}
.lore-story .lore-chapter:before{
  inset:0 !important;
  background-size:100% 100% !important;
  transform:none !important;
}
@media(max-width:900px){
  .lore-story{padding:24px 14px 30px !important}
  .lore-story .lore-chapter{min-height:650px !important;padding:82px 60px 88px !important}
}
@media(max-width:700px){
  .lore-story{padding:22px 12px 28px !important}
  .lore-story .lore-chapter{
    min-height:0 !important;
    aspect-ratio:auto !important;
    padding:92px 76px 100px !important;
  }
}


/* CORNER DUPLICATION FIX:
   The card itself must not draw a second frame underneath the PNG overlay.
   Only the single transparent portrait-frame asset draws the ornament. */
.lore-story .lore-chapter{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  overflow:visible !important;
}
.lore-story .lore-chapter:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:10 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background-image:url("bloodmoon-card-frame-portrait.png") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  transform:none !important;
  filter:none !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter:after{
  content:none !important;
  display:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
}


/* Single continuous frame artwork: all four corners and edge transitions
   come from the same unbroken source image, with no separately layered pieces. */
.lore-story .lore-chapter{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:linear-gradient(145deg,#260817 0%,#10030b 58%,#070207 100%) !important;
  overflow:visible !important;
}
.lore-story .lore-chapter:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:10 !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:url("bloodmoon-card-frame-portrait.png") center center / 100% 100% no-repeat !important;
  transform:none !important;
  filter:none !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter:after{
  content:none !important;
  display:none !important;
}


/* Transparent outside the frame; retain a dark panel only inside its opening. */
.lore-story .lore-chapter{
  background:transparent !important;
  isolation:isolate !important;
}
.lore-story .lore-chapter:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  inset:9% 9.5% 9% !important;
  border:0 !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(88,7,29,.34),transparent 62%),
    linear-gradient(145deg,rgba(29,5,18,.98),rgba(8,2,9,.99)) !important;
  box-shadow:inset 0 0 30px rgba(255,35,72,.08) !important;
  pointer-events:none !important;
}
.lore-story .lore-chapter > *{
  position:relative !important;
  z-index:2 !important;
}
.lore-story .lore-chapter:before{
  z-index:10 !important;
}


/* Chapter III: fit the frame to the actual content and keep all text inside the opening. */
.lore-story .lore-chapter.chapter-three{
  box-sizing:border-box !important;
  width:min(100%, 900px) !important;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:auto !important;
  justify-self:center !important;
  grid-column:1 / -1 !important;
  padding:88px 112px 96px !important;
  overflow:visible !important;
}
.lore-story .lore-chapter.chapter-three .chapter-art{
  width:100% !important;
  height:160px !important;
  object-fit:cover !important;
  margin:0 auto 18px !important;
}
.lore-story .lore-chapter.chapter-three .chapter-index,
.lore-story .lore-chapter.chapter-three h2,
.lore-story .lore-chapter.chapter-three p,
.lore-story .lore-chapter.chapter-three .chapter-open-hint{
  max-width:100% !important;
  overflow-wrap:break-word !important;
}
.lore-story .lore-chapter.chapter-three p{
  font-size:14px !important;
  line-height:1.55 !important;
  margin:0 0 12px !important;
}
.lore-story .lore-chapter.chapter-three:before{
  inset:0 !important;
  background-size:100% 100% !important;
}
.lore-story .lore-chapter.chapter-three:after{
  inset:9% 10.5% !important;
}
@media(max-width:900px){
  .lore-story .lore-chapter.chapter-three{
    width:100% !important;
    padding:78px 88px 86px !important;
  }
}
@media(max-width:700px){
  .lore-story .lore-chapter.chapter-three{
    grid-column:auto !important;
    width:100% !important;
    padding:76px 62px 84px !important;
  }
  .lore-story .lore-chapter.chapter-three .chapter-art{height:clamp(125px,32vw,165px) !important}
}


/* Prophecy panel: transparent outside the ornamental frame, protected text area inside. */
.lore-prophecy{
  position:relative !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:url("region-frame-overlay.png") center center / 100% 100% no-repeat !important;
  padding:54px 11% 112px !important;
  min-height:0 !important;
}
.lore-prophecy:before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  inset:9% 8.5% 9% !important;
  width:auto !important;
  height:auto !important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(91,7,29,.28),transparent 62%),
    linear-gradient(145deg,rgba(29,5,18,.97),rgba(8,2,9,.985)) !important;
  box-shadow:inset 0 0 28px rgba(255,35,72,.08) !important;
  pointer-events:none !important;
}
.lore-prophecy > *{
  position:relative !important;
  z-index:1 !important;
}
.lore-prophecy .prophecy-symbol{
  margin:0 0 8px !important;
}
.lore-prophecy .prophecy-art{
  margin:0 auto 20px !important;
}
.lore-prophecy .prophecy-label{
  margin:8px 0 16px !important;
}
.lore-prophecy blockquote{
  margin:0 auto 12px !important;
  line-height:1.55 !important;
}
.lore-prophecy > span{
  display:block !important;
  position:relative !important;
  margin:0 auto !important;
  padding-bottom:8px !important;
  line-height:1.4 !important;
}
@media(max-width:760px){
  .lore-prophecy{padding:42px 9% 88px !important}
  .lore-prophecy:before{inset:8% 7% 8% !important}
  .lore-prophecy blockquote{line-height:1.45 !important}
}


/* Prophecy: remove the visible rectangular inner panel.
   The interior is now softly shaded and fades into the transparent frame opening. */
.lore-prophecy{
  background: url("region-frame-overlay.png") center center / 100% 100% no-repeat !important;
  padding:50px 10% 96px !important;
}
.lore-prophecy:before{
  inset:7% 6% 7% !important;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(8,2,9,.985) 0%,
      rgba(12,2,10,.96) 58%,
      rgba(18,3,12,.78) 78%,
      rgba(18,3,12,0) 100%) !important;
  box-shadow:none !important;
  border-radius:28px !important;
}
.lore-prophecy .prophecy-symbol{
  margin:0 0 5px !important;
  line-height:1 !important;
}
.lore-prophecy .prophecy-art{
  width:min(300px,72%) !important;
  height:150px !important;
  margin:0 auto 16px !important;
}
.lore-prophecy .prophecy-label{
  margin:6px 0 14px !important;
}
.lore-prophecy blockquote{
  max-width:760px !important;
  font-size:clamp(18px,2.15vw,25px) !important;
  line-height:1.48 !important;
  margin:0 auto 10px !important;
}
.lore-prophecy > span{
  padding:0 0 4px !important;
}
@media(max-width:760px){
  .lore-prophecy{padding:40px 9% 82px !important}
  .lore-prophecy:before{inset:7% 5% !important}
  .lore-prophecy .prophecy-art{height:130px !important}
}


/* Keep the top and bottom center ornaments clear of the inner panel. */
.lore-prophecy:before{
  inset:13% 6% 13% !important;
  border-radius:24px !important;
}
@media(max-width:760px){
  .lore-prophecy:before{
    inset:12% 6% 12% !important;
  }
}


/* Keep the top and bottom center jewels completely outside the prophecy's inner shade.
   The shade has concave cut-outs aligned with both center ornaments. */
.lore-prophecy:before{
  inset:7% 6% !important;
  border-radius:0 !important;
  clip-path:polygon(
    0 0,
    42% 0,
    50% 13%,
    58% 0,
    100% 0,
    100% 100%,
    58% 100%,
    50% 87%,
    42% 100%,
    0 100%
  ) !important;
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(8,2,9,.985) 0%,
      rgba(12,2,10,.96) 58%,
      rgba(18,3,12,.78) 78%,
      rgba(18,3,12,0) 100%) !important;
}
.lore-prophecy .prophecy-symbol{
  position:relative !important;
  z-index:2 !important;
  margin:18px 0 8px !important;
}
@media(max-width:760px){
  .lore-prophecy:before{
    inset:8% 6% !important;
    clip-path:polygon(
      0 0, 40% 0, 50% 12%, 60% 0, 100% 0,
      100% 100%, 60% 100%, 50% 88%, 40% 100%, 0 100%
    ) !important;
  }
}


/* Chronicle timeline: same transparent Bloodmoon metal frame as the prophecy window. */
.lore-chronicle{
  box-sizing:border-box !important;
  position:relative !important;
  isolation:isolate !important;
  max-width:1160px !important;
  margin:34px auto 52px !important;
  padding:58px 66px 66px !important;
  border:0 !important;
  outline:0 !important;
  overflow:visible !important;
  background-image:
    url("region-frame-overlay.png"),
    radial-gradient(ellipse at 50% 12%,rgba(82,7,28,.34),transparent 62%),
    linear-gradient(180deg,rgba(18,3,12,.97),rgba(7,2,8,.985)) !important;
  background-position:center center,center center,center center !important;
  background-size:100% 100%,100% 100%,100% 100% !important;
  background-repeat:no-repeat !important;
  background-origin:border-box,border-box,content-box !important;
  background-clip:border-box,border-box,content-box !important;
  box-shadow:none !important;
}
.lore-chronicle:before,
.lore-chronicle:after{
  content:none !important;
  display:none !important;
}
.lore-chronicle > *{
  position:relative !important;
  z-index:1 !important;
}
.lore-chronicle .section-mark{
  margin-top:0 !important;
}
.lore-chronicle h2{
  margin-top:14px !important;
}
@media(max-width:760px){
  .lore-chronicle{
    padding:54px 44px 64px !important;
    margin:28px auto 40px !important;
    background-size:100% 100%,100% 100%,100% 100% !important;
  }
}
@media(max-width:430px){
  .lore-chronicle{
    padding:48px 34px 58px !important;
  }
}


/* Legacy portal: use the same continuous transparent Bloodmoon frame as the prophecy/chronicle. */
.lore-cta.legacy-portal{
  position:relative !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  width:min(100%,1320px) !important;
  margin:58px auto 72px !important;
  padding:68px 54px 74px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:
    url("region-frame-overlay.png") center center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 0%,rgba(78,7,28,.32),transparent 65%),
    linear-gradient(180deg,rgba(17,3,12,.96),rgba(7,2,8,.98)) !important;
  overflow:visible !important;
}
.lore-cta.legacy-portal:before,
.lore-cta.legacy-portal:after{
  content:none !important;
  display:none !important;
}
.lore-cta.legacy-portal .legacy-portal-art{
  z-index:0 !important;
  top:8% !important;
  bottom:22% !important;
  width:36% !important;
  opacity:.68 !important;
  filter:saturate(1.08) !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:7% !important;
  background-image:linear-gradient(90deg,rgba(8,2,8,.05),rgba(10,2,9,.18) 55%,rgba(10,2,9,.96) 100%),url("legacy-warrior-left.jpg") !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:7% !important;
  background-image:linear-gradient(270deg,rgba(8,2,8,.05),rgba(10,2,9,.18) 55%,rgba(10,2,9,.96) 100%),url("legacy-elf-right.jpg") !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  max-width:760px !important;
  padding:0 18px 30px !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  margin:0 !important;
  padding:22px 12px 18px !important;
  background:linear-gradient(180deg,rgba(8,2,9,.76),rgba(7,2,8,.9)) !important;
  border-top:1px solid rgba(211,99,108,.58) !important;
  box-shadow:none !important;
}
.lore-cta.legacy-portal .legacy-pillars>div{
  padding:8px 14px !important;
}
@media(max-width:760px){
  .lore-cta.legacy-portal{
    width:100% !important;
    margin:42px auto 52px !important;
    padding:58px 38px 64px !important;
  }
  .lore-cta.legacy-portal .legacy-portal-art{
    top:7% !important;
    bottom:35% !important;
    width:42% !important;
    opacity:.36 !important;
  }
  .lore-cta.legacy-portal .legacy-pillars{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    padding:14px 6px !important;
  }
}
@media(max-width:430px){
  .lore-cta.legacy-portal{padding:50px 30px 58px !important}
  .lore-cta.legacy-portal .legacy-portal-content{padding:0 4px 22px !important}
}


/* Legacy portal refinement: remove the baked-in mini frames/banners from the character art.
   The portal now has one clear outer frame and clean character artwork on each side. */
.lore-cta.legacy-portal{
  padding:74px 58px 76px !important;
  background:
    url("region-frame-overlay.png") center center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 42%,rgba(7,2,9,.94) 0%,rgba(10,2,9,.82) 43%,rgba(12,2,9,.35) 72%,rgba(12,2,9,.08) 100%),
    linear-gradient(180deg,rgba(17,3,12,.84),rgba(7,2,8,.92)) !important;
}
.lore-cta.legacy-portal .legacy-portal-art{
  top:10% !important;
  bottom:24% !important;
  width:34% !important;
  opacity:.58 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.02) !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:8% !important;
  background-image:linear-gradient(90deg,rgba(8,2,8,.02),rgba(10,2,9,.10) 48%,rgba(10,2,9,.98) 100%),url("legacy-warrior-clean.jpg") !important;
  background-position:center 42% !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:8% !important;
  background-image:linear-gradient(270deg,rgba(8,2,8,.02),rgba(10,2,9,.10) 48%,rgba(10,2,9,.98) 100%),url("legacy-elf-clean.jpg") !important;
  background-position:center 42% !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  max-width:760px !important;
  padding:0 24px 26px !important;
}
.lore-cta.legacy-portal .legacy-portal-content h2{
  margin:16px 0 14px !important;
}
.lore-cta.legacy-portal .legacy-portal-content p{
  max-width:700px !important;
  line-height:1.65 !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  position:relative !important;
  z-index:2 !important;
  background:linear-gradient(180deg,rgba(7,2,8,.88),rgba(7,2,8,.94)) !important;
  border-top:1px solid rgba(211,99,108,.58) !important;
  padding:20px 12px 16px !important;
}
@media(max-width:760px){
  .lore-cta.legacy-portal{padding:62px 40px 66px !important}
  .lore-cta.legacy-portal .legacy-portal-art{
    top:9% !important;
    bottom:36% !important;
    width:40% !important;
    opacity:.34 !important;
  }
}


/* Final legacy portal composition: portrait-only crops, no nested artwork frames. */
.lore-cta.legacy-portal{
  isolation:isolate !important;
  overflow:hidden !important;
  background:
    url("region-frame-overlay.png") center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 42%,rgba(8,2,9,.97) 0%,rgba(8,2,9,.91) 40%,rgba(8,2,9,.55) 72%,rgba(8,2,9,.12) 100%),
    linear-gradient(180deg,#10030d,#080208) !important;
}
.lore-cta.legacy-portal::before{
  content:"";
  position:absolute;
  inset:7% 7% 8%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,2,9,.03) 0%,rgba(8,2,9,.16) 25%,rgba(8,2,9,.92) 49%,rgba(8,2,9,.16) 75%,rgba(8,2,9,.03) 100%);
}
.lore-cta.legacy-portal .legacy-portal-art{
  top:13% !important;
  bottom:28% !important;
  width:29% !important;
  opacity:.82 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(.94) contrast(1.03) !important;
  z-index:1 !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:8.5% !important;
  background-image:linear-gradient(90deg,rgba(8,2,9,.00),rgba(8,2,9,.10) 60%,rgba(8,2,9,.95) 100%),url("legacy-warrior-portrait.jpg") !important;
  background-position:center 36% !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:8.5% !important;
  background-image:linear-gradient(270deg,rgba(8,2,9,.00),rgba(8,2,9,.10) 60%,rgba(8,2,9,.95) 100%),url("legacy-elf-portrait.jpg") !important;
  background-position:center 34% !important;
}
.lore-cta.legacy-portal .legacy-portal-content,
.lore-cta.legacy-portal .legacy-pillars{
  position:relative !important;
  z-index:2 !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  max-width:760px !important;
  padding:0 30px 24px !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  margin-top:0 !important;
  background:linear-gradient(180deg,rgba(7,2,8,.91),rgba(7,2,8,.97)) !important;
}
@media(max-width:760px){
 .lore-cta.legacy-portal .legacy-portal-art{width:39% !important;opacity:.38 !important;top:12% !important;bottom:37% !important}
 .lore-cta.legacy-portal::before{background:linear-gradient(90deg,rgba(8,2,9,.1),rgba(8,2,9,.82) 50%,rgba(8,2,9,.1))}
}


/* Legacy portal: rebuilt composition using clean portraits from one coherent scene.
   Keep the site's real typography/buttons as HTML; no artwork text or nested frames. */
.lore-cta.legacy-portal{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  padding:72px 54px 74px !important;
  background:
    url("region-frame-overlay.png") center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 40%,rgba(10,2,10,.98) 0%,rgba(10,2,10,.91) 42%,rgba(10,2,10,.54) 72%,rgba(10,2,10,.18) 100%),
    linear-gradient(180deg,#10030d,#080208) !important;
  border:0 !important;
  box-shadow:none !important;
}
.lore-cta.legacy-portal::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:9% 8% 9% !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:linear-gradient(90deg,
    rgba(8,2,9,.02) 0%,
    rgba(8,2,9,.28) 25%,
    rgba(8,2,9,.96) 48%,
    rgba(8,2,9,.96) 52%,
    rgba(8,2,9,.28) 75%,
    rgba(8,2,9,.02) 100%) !important;
}
.lore-cta.legacy-portal .legacy-portal-art{
  position:absolute !important;
  top:13% !important;
  bottom:25% !important;
  width:31% !important;
  z-index:1 !important;
  opacity:.82 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(.95) contrast(1.04) !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:8.5% !important;
  background-image:linear-gradient(90deg,rgba(8,2,9,0) 58%,rgba(8,2,9,.98) 100%),url("legacy-warrior-scene.jpg") !important;
  background-position:center 30% !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:8.5% !important;
  background-image:linear-gradient(270deg,rgba(8,2,9,0) 58%,rgba(8,2,9,.98) 100%),url("legacy-elf-scene.jpg") !important;
  background-position:center 28% !important;
}
.lore-cta.legacy-portal .legacy-portal-content,
.lore-cta.legacy-portal .legacy-pillars{
  position:relative !important;
  z-index:2 !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  max-width:760px !important;
  margin:0 auto !important;
  padding:0 24px 26px !important;
}
.lore-cta.legacy-portal .legacy-portal-content h2{
  text-shadow:0 3px 18px rgba(0,0,0,.95) !important;
}
.lore-cta.legacy-portal .legacy-portal-content p{
  max-width:700px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 2px 12px rgba(0,0,0,.98) !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  margin:0 !important;
  background:linear-gradient(180deg,rgba(7,2,8,.88),rgba(7,2,8,.97)) !important;
  border-top:1px solid rgba(211,99,108,.58) !important;
  box-shadow:none !important;
}
@media(max-width:760px){
  .lore-cta.legacy-portal{padding:58px 40px 64px !important}
  .lore-cta.legacy-portal .legacy-portal-art{
    top:12% !important;bottom:35% !important;width:39% !important;opacity:.42 !important;
  }
  .lore-cta.legacy-portal::before{
    background:linear-gradient(90deg,rgba(8,2,9,.18),rgba(8,2,9,.9) 50%,rgba(8,2,9,.18)) !important;
  }
}
@media(max-width:430px){
  .lore-cta.legacy-portal{padding:50px 32px 58px !important}
  .lore-cta.legacy-portal .legacy-portal-content{padding:0 4px 20px !important}
}


/* Definitive legacy portal correction: no baked-in typography or nested frame artwork. */
.lore-cta.legacy-portal{
  position:relative !important;
  display:block !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  width:min(100%,1320px) !important;
  max-width:1320px !important;
  margin:58px auto 72px !important;
  padding:86px 54px 86px !important;
  border:0 !important;
  outline:0 !important;
  overflow:hidden !important;
  box-shadow:none !important;
  background-image:url("region-frame-overlay.png") !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
}
.lore-cta.legacy-portal::before,
.lore-cta.legacy-portal::after{content:none !important;display:none !important}
.lore-cta.legacy-portal .legacy-portal-art{
  position:absolute !important;
  top:15% !important;
  bottom:24% !important;
  width:29% !important;
  z-index:1 !important;
  opacity:.94 !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  filter:saturate(1.04) contrast(1.04) !important;
  pointer-events:none !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:7.5% !important;
  background-image:linear-gradient(90deg,rgba(8,2,9,0) 58%,rgba(8,2,9,.98) 100%),url("legacy-warrior-portrait.jpg") !important;
  background-position:center 34% !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:7.5% !important;
  background-image:linear-gradient(270deg,rgba(8,2,9,0) 58%,rgba(8,2,9,.98) 100%),url("legacy-elf-portrait.jpg") !important;
  background-position:center 30% !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  position:relative !important;
  z-index:3 !important;
  max-width:760px !important;
  margin:0 auto !important;
  padding:0 18px 24px !important;
  text-align:center !important;
}
.lore-cta.legacy-portal .legacy-portal-content .section-mark,
.lore-cta.legacy-portal .legacy-portal-content h2,
.lore-cta.legacy-portal .legacy-portal-content p,
.lore-cta.legacy-portal .legacy-portal-button{
  position:relative !important;
  z-index:4 !important;
}
.lore-cta.legacy-portal .legacy-portal-content h2{
  text-shadow:0 3px 18px rgba(0,0,0,.98) !important;
}
.lore-cta.legacy-portal .legacy-portal-content p{
  max-width:700px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 2px 12px rgba(0,0,0,.98) !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  margin:0 !important;
  padding:20px 12px 16px !important;
  background:linear-gradient(180deg,rgba(7,2,8,.94),rgba(7,2,8,.98)) !important;
  border-top:1px solid rgba(211,99,108,.72) !important;
  box-shadow:none !important;
}
.lore-cta.legacy-portal .legacy-pillars>div{padding:8px 14px !important}
.lore-cta.legacy-portal .legacy-pillars>div+div{border-left:1px solid rgba(164,69,83,.55) !important}
@media(max-width:760px){
 .lore-cta.legacy-portal{padding:70px 40px 72px !important}
 .lore-cta.legacy-portal .legacy-portal-art{top:13% !important;bottom:37% !important;width:38% !important;opacity:.48 !important}
 .lore-cta.legacy-portal .legacy-pillars{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
 .lore-cta.legacy-portal .legacy-pillars>div+div{border-left:0 !important}
 .lore-cta.legacy-portal .legacy-pillars>div:nth-child(even){border-left:1px solid rgba(164,69,83,.45) !important}
 .lore-cta.legacy-portal .legacy-pillars>div:nth-child(n+3){border-top:1px solid rgba(164,69,83,.35) !important}
}
@media(max-width:430px){
 .lore-cta.legacy-portal{padding:58px 30px 62px !important}
 .lore-cta.legacy-portal .legacy-portal-art{top:12% !important;bottom:42% !important;width:43% !important;opacity:.32 !important}
 .lore-cta.legacy-portal .legacy-portal-content{padding:0 4px 20px !important}
}


/* L2 Darkmoon – final composition correction based on the user's latest screenshot */
.lore-cta.legacy-portal{
  width:min(100%,1320px) !important;
  min-height:0 !important;
  padding:78px 58px 78px !important;
  background-image:url("region-frame-overlay.png"),
    radial-gradient(ellipse at 50% 43%,rgba(9,2,10,.97) 0%,rgba(9,2,10,.88) 38%,rgba(9,2,10,.46) 70%,rgba(9,2,10,.08) 100%),
    linear-gradient(180deg,#10030d,#080208) !important;
  background-position:center,center,center !important;
  background-size:100% 100%,100% 100%,100% 100% !important;
  background-repeat:no-repeat !important;
}
.lore-cta.legacy-portal .legacy-portal-art{
  top:13% !important;
  bottom:24% !important;
  width:25% !important;
  opacity:.88 !important;
  background-size:cover !important;
  filter:saturate(1.02) contrast(1.02) !important;
}
.lore-cta.legacy-portal .legacy-portal-left{
  left:6.2% !important;
  background-image:linear-gradient(90deg,rgba(8,2,9,0) 35%,rgba(8,2,9,.18) 60%,rgba(8,2,9,.98) 100%),url("legacy-warrior-portrait.jpg") !important;
  background-position:center 30% !important;
}
.lore-cta.legacy-portal .legacy-portal-right{
  right:6.2% !important;
  background-image:linear-gradient(270deg,rgba(8,2,9,0) 35%,rgba(8,2,9,.18) 60%,rgba(8,2,9,.98) 100%),url("legacy-elf-portrait.jpg") !important;
  background-position:center 28% !important;
}
.lore-cta.legacy-portal .legacy-portal-content{
  max-width:700px !important;
  padding:0 12px 22px !important;
}
.lore-cta.legacy-portal .legacy-portal-content h2{
  font-size:clamp(30px,3.1vw,42px) !important;
  line-height:1.16 !important;
  margin:16px 0 14px !important;
  text-wrap:balance;
}
.lore-cta.legacy-portal .legacy-portal-content p{
  max-width:660px !important;
  font-size:16px !important;
  line-height:1.65 !important;
}
.lore-cta.legacy-portal .legacy-portal-button{
  margin-top:22px !important;
  min-width:min(440px,100%) !important;
}
.lore-cta.legacy-portal .legacy-pillars{
  padding:18px 10px 14px !important;
  background:linear-gradient(180deg,rgba(7,2,8,.94),rgba(7,2,8,.985)) !important;
}
.lore-cta.legacy-portal .legacy-pillars>div{padding:8px 12px !important}
@media(max-width:760px){
 .lore-cta.legacy-portal{padding:68px 38px 70px !important}
 .lore-cta.legacy-portal .legacy-portal-art{width:38% !important;top:12% !important;bottom:38% !important;opacity:.38 !important}
 .lore-cta.legacy-portal .legacy-portal-content h2{font-size:clamp(26px,5vw,36px) !important}
}


/* Freshly rebuilt legacy call-to-action: isolated from all former portal rules. */
.legacy-rebuild{
  --lr-red:#ff334f; --lr-gold:#ffd09a;
  position:relative; isolation:isolate; overflow:hidden;
  width:min(1240px,calc(100% - 48px)); margin:78px auto 24px;
  border:1px solid rgba(220,91,112,.82);
  background:#090208; color:#f5e1d7;
  box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 28px rgba(230,35,62,.14),inset 0 0 42px rgba(255,34,65,.09);
}
.legacy-rebuild:before{content:"";position:absolute;inset:7px;z-index:5;pointer-events:none;border:1px solid rgba(255,155,139,.38)}
.legacy-rebuild:after{content:"✦";position:absolute;z-index:6;top:-12px;left:50%;transform:translateX(-50%);font-size:27px;color:var(--lr-gold);text-shadow:0 0 12px var(--lr-red),0 0 25px var(--lr-red)}
.legacy-rebuild-hero{
  min-height:430px; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  background:linear-gradient(90deg,rgba(8,2,9,.05),rgba(8,2,9,.38) 31%,rgba(8,2,9,.56) 50%,rgba(8,2,9,.38) 69%,rgba(8,2,9,.05)),url("lore-atmosphere.jpg") center 43%/cover no-repeat;
}
.legacy-rebuild-hero:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at center,rgba(9,2,9,.12) 0%,rgba(9,2,9,.28) 45%,rgba(9,2,9,.04) 78%),linear-gradient(180deg,rgba(7,1,7,.15),transparent 35%,rgba(7,1,7,.35))}
.legacy-rebuild-character{position:absolute;z-index:1;top:0;bottom:0;width:34%;background-repeat:no-repeat;background-size:cover;pointer-events:none}
.legacy-rebuild-warrior{left:0;background-image:linear-gradient(90deg,rgba(8,2,9,0) 45%,rgba(8,2,9,.72) 100%),url("legacy-warrior-clean.jpg");background-position:38% 22%}
.legacy-rebuild-elf{right:0;background-image:linear-gradient(270deg,rgba(8,2,9,0) 45%,rgba(8,2,9,.72) 100%),url("legacy-elf-clean.jpg");background-position:62% 22%}
.legacy-rebuild-copy{position:relative;z-index:2;width:min(680px,58%);padding:52px 18px 42px;text-align:center;text-shadow:0 2px 9px #000}
.legacy-rebuild-kicker{display:block;font:600 10px Cinzel,serif;letter-spacing:3px;color:#ffb48f;text-shadow:0 0 12px rgba(255,48,74,.65)}
.legacy-rebuild-copy h2{font:600 clamp(30px,3.6vw,48px)/1.18 Cinzel,serif;letter-spacing:.2px;color:#f8e8dc;margin:22px 0 18px;text-wrap:balance}
.legacy-rebuild-copy h2 em{font-style:normal;color:#ff5268;text-shadow:0 0 18px rgba(255,38,69,.42)}
.legacy-rebuild-copy p{max-width:650px;margin:0 auto;color:#f0deda;font-size:16px;line-height:1.75}
.legacy-rebuild-button{display:flex!important;align-items:center;justify-content:center;gap:17px;width:min(460px,100%);min-height:60px;margin:26px auto 0!important;padding:15px 20px!important;border:1px solid #f0a18b!important;outline:1px solid rgba(255,199,164,.42);outline-offset:4px;background:linear-gradient(100deg,#300713,#80102a 50%,#300713)!important;color:#fff0dc!important;font:600 11px Cinzel,serif!important;letter-spacing:1.5px;box-shadow:0 0 22px rgba(255,35,65,.35),inset 0 0 18px rgba(255,93,94,.16)!important;transition:filter .2s,box-shadow .2s,transform .2s}
.legacy-rebuild-button:hover{filter:brightness(1.2);transform:translateY(-2px);box-shadow:0 0 30px rgba(255,35,65,.6),inset 0 0 20px rgba(255,93,94,.2)!important}
.legacy-rebuild-pillars{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:linear-gradient(180deg,rgba(12,3,10,.97),rgba(5,1,6,.99));border-top:1px solid rgba(225,73,94,.78);padding:22px 18px 26px}
.legacy-rebuild-pillars>div{display:flex;min-width:0;flex-direction:column;align-items:center;text-align:center;padding:8px 18px;border-right:1px solid rgba(190,61,83,.58)}
.legacy-rebuild-pillars>div:last-child{border-right:0}
.legacy-rebuild-pillars i{font-style:normal;font-size:29px;line-height:1.15;color:#ffc18e;text-shadow:0 0 13px #ff304e,0 0 24px rgba(255,48,78,.5);margin-bottom:9px}
.legacy-rebuild-pillars b{font:600 11px Cinzel,serif;letter-spacing:1px;color:#f7e1d3;margin-bottom:8px}
.legacy-rebuild-pillars span{max-width:220px;color:#d8c0c0;font-size:13px;line-height:1.55}
@media(max-width:820px){.legacy-rebuild{width:calc(100% - 24px);margin:54px auto 18px}.legacy-rebuild-hero{min-height:450px}.legacy-rebuild-character{width:42%;opacity:.65}.legacy-rebuild-copy{width:min(650px,76%);padding:52px 12px 38px}.legacy-rebuild-copy h2{font-size:clamp(27px,5vw,38px)}.legacy-rebuild-pillars{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px 10px 18px}.legacy-rebuild-pillars>div{padding:14px 10px;border-right:0}.legacy-rebuild-pillars>div:nth-child(odd){border-right:1px solid rgba(190,61,83,.58)}.legacy-rebuild-pillars>div:nth-child(-n+2){border-bottom:1px solid rgba(190,61,83,.4)}}
@media(max-width:520px){.legacy-rebuild-hero{min-height:500px}.legacy-rebuild-character{width:48%;opacity:.42}.legacy-rebuild-copy{width:94%;padding:50px 18px 32px}.legacy-rebuild-copy h2{font-size:29px}.legacy-rebuild-copy p{font-size:14px;line-height:1.65}.legacy-rebuild-button{font-size:9px!important;gap:9px;padding:13px 8px!important}.legacy-rebuild-pillars b{font-size:10px}.legacy-rebuild-pillars span{font-size:12px}}

/* Bloodmoon ornamental outer frame for the rebuilt legacy portal. */
.legacy-rebuild{
  overflow:visible !important;
  border:0 !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,rgba(24,3,13,.22),rgba(8,1,7,.32));
  margin-top:88px !important;
  margin-bottom:48px !important;
}
.legacy-rebuild:before{
  content:"" !important;
  position:absolute !important;
  inset:-28px !important;
  z-index:8 !important;
  pointer-events:none !important;
  border:0 !important;
  background:url("region-frame-overlay.png") center center / 100% 100% no-repeat !important;
}
.legacy-rebuild:after{content:none !important;display:none !important}
.legacy-rebuild-hero,.legacy-rebuild-pillars{position:relative;z-index:2}
@media(max-width:820px){.legacy-rebuild:before{inset:-18px !important}}
@media(max-width:520px){.legacy-rebuild:before{inset:-12px !important}}


/* Bloodmoon CTA: ornate forged-metal button matching the supplied reference */
.legacy-rebuild-button{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:min(470px,100%)!important;height:112px!important;min-height:112px!important;
  margin:22px auto 0!important;padding:0 72px!important;box-sizing:border-box!important;
  border:0!important;outline:0!important;border-radius:0!important;
  background: url("legacy-cta-button.png") center / 100% 100% no-repeat!important;
  box-shadow:none!important;color:transparent!important;font-size:0!important;letter-spacing:0!important;
  text-shadow:none!important;filter:drop-shadow(0 0 10px rgba(255,25,48,.28));
  transition:filter .2s ease,transform .2s ease!important;
}
.legacy-rebuild-button span{display:none!important}
.legacy-rebuild-button:hover{filter:brightness(1.16) drop-shadow(0 0 16px rgba(255,35,55,.55))!important;transform:translateY(-2px)!important;box-shadow:none!important}
.legacy-rebuild-button:focus-visible{outline:2px solid #ffd39a!important;outline-offset:4px!important}
@media(max-width:640px){.legacy-rebuild-button{width:min(390px,100%)!important;height:94px!important;min-height:94px!important;padding:0 48px!important}}


/* BLOODMOON – Regionenauswahl als eigenständiger, sauber gerahmter Abschnitt */
.world-section .world-divider:not(.challenge-divider){
  max-width:1120px;
  margin:64px auto 12px;
  gap:24px;
}
.world-section .world-subtitle{
  max-width:900px;
  margin:0 auto 34px;
  color:#d8a7a3;
  letter-spacing:2.2px;
  font:10px Cinzel,serif;
  text-align:center;
}
.world-section .region-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}
.world-section .region-grid .world-card{
  min-width:0;
  min-height:390px;
  padding:42px 24px 46px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(135,10,39,.25),transparent 62%),
    linear-gradient(160deg,rgba(38,7,23,.94),rgba(8,2,9,.98)) !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}
.world-section .region-grid .world-card:before{
  inset:0 !important;
  background:url("bloodmoon-card-frame-portrait.png") center/100% 100% no-repeat !important;
  z-index:5 !important;
  pointer-events:none !important;
}
.world-section .region-grid .world-card:after{content:none !important}
.world-section .region-grid .world-card img{
  width:100%;
  height:148px;
  flex:0 0 148px;
  object-fit:cover;
  box-sizing:border-box;
  padding:3px !important;
  border:1px solid rgba(218,139,135,.9) !important;
  outline:1px solid rgba(255,190,145,.35) !important;
  outline-offset:3px;
  background:#10030b !important;
  box-shadow:0 0 16px rgba(255,35,72,.24) !important;
}
.world-section .region-grid .world-card .world-card-copy{
  padding:17px 0 0;
  text-align:center;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
}
.world-section .region-grid .world-card h4{
  margin:0 0 10px;
  color:#f8dfce;
  font:600 17px Cinzel,serif;
  line-height:1.35;
  text-shadow:0 0 12px rgba(255,65,82,.2);
}
.world-section .region-grid .world-card p{
  margin:0;
  color:#d3b9bd;
  font-size:13px;
  line-height:1.55;
}
.world-section .region-grid .world-card .region-open-label{
  display:block;
  margin-top:auto;
  padding-top:16px;
  color:#d98d83;
  font:9px Cinzel,serif;
  letter-spacing:1.7px;
  opacity:.9;
  transition:color .2s,text-shadow .2s;
}
.world-section .region-grid .world-card:hover .region-open-label,
.world-section .region-grid .world-card:focus-visible .region-open-label{
  color:#ffe0b8;
  text-shadow:0 0 12px #ff304e;
}
@media(max-width:1000px){
  .world-section .region-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;gap:24px}
  .world-section .region-grid .world-card{min-height:380px}
}
@media(max-width:620px){
  .world-section .world-divider:not(.challenge-divider){margin-top:46px;gap:10px}
  .world-section .region-grid{grid-template-columns:minmax(0,1fr);max-width:390px;gap:22px}
  .world-section .region-grid .world-card{min-height:390px;padding:42px 30px 48px}
  .world-section .region-grid .world-card img{height:170px;flex-basis:170px}
}

/* WORLD INTRO — ornate Bloodmoon frame around the complete welcome panel */
.world-section .world-intro{
  position:relative !important;
  isolation:isolate;
  box-sizing:border-box;
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:78px 88px 84px !important;
  gap:28px;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.world-section .world-intro:before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  background:url("region-frame-overlay.png") center / 100% 100% no-repeat;
  pointer-events:none;
}
.world-section .world-intro > div,
.world-section .world-intro > img{
  position:relative;
  z-index:2;
  min-width:0;
}
.world-section .world-intro > div{padding:8px 12px !important}
.world-section .world-intro > img{height:250px;object-fit:cover}
@media(max-width:900px){
  .world-section .world-intro{padding:70px 64px 76px !important;gap:18px}
  .world-section .world-intro > img{height:220px}
}
@media(max-width:620px){
  .world-section .world-intro{padding:58px 42px 66px !important;gap:10px}
  .world-section .world-intro > div{padding:6px 4px !important}
  .world-section .world-intro > img{height:170px}
}

/* WORLD SECTION – Außenbereich transparent, einzelne Karten behalten ihre eigene Fläche */
.world-section{
  background:transparent !important;
  border-block:0 !important;
}
.world-section .region-grid{
  background:transparent !important;
}


/* FINAL FIX: Der Bereich um die vier Regionskacheln ist vollständig durchsichtig.
   Keine eigene Farbfläche und keine atmosphärische Overlay-Ebene hinter den Kacheln. */
#world.world-section{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
#world.world-section::before,
#world.world-section::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#world.world-section .region-grid{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}


/* HARD OVERRIDE – wirklich transparenter Freiraum um die vier Regionskarten */
html body main #world.world-section,
html body main #world.world-section .world-hero,
html body main #world.world-section .world-divider,
html body main #world.world-section .world-subtitle,
html body main #world.world-section .region-grid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body main #world.world-section::before,
html body main #world.world-section::after,
html body main #world.world-section .region-grid::before,
html body main #world.world-section .region-grid::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* Die Karten behalten ausdrücklich ihre eigene dunkle Innenfläche. */
html body main #world.world-section .region-grid .world-card {
  background: radial-gradient(ellipse at 50% 18%,rgba(135,10,39,.25),transparent 62%),
              linear-gradient(160deg,rgba(38,7,23,.94),rgba(8,2,9,.98)) !important;
}


/* BLOODMOON REGION CARDS – äußeren dunklen Schlagschatten entfernen.
   Rahmen, rote Lichtkanten und dezentes inneres Leuchten bleiben erhalten. */
html body main #world.world-section .region-grid .world-card {
  box-shadow: inset 0 0 22px rgba(229,43,69,.12) !important;
  filter: none !important;
}
html body main #world.world-section .region-grid .world-card:hover,
html body main #world.world-section .region-grid .world-card:focus-visible {
  box-shadow: inset 0 0 28px rgba(229,43,69,.18) !important;
  filter: none !important;
}


/* FINAL REGION CARD FIX: remove the rectangular backplate visible through
   the transparent corners of the ornamental frame. Keep the dark fill only
   inside the frame silhouette. */
html body main #world.world-section .region-grid .world-card {
  position:relative !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  isolation:isolate !important;
}
html body main #world.world-section .region-grid .world-card::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  inset:10px 9px 10px 9px !important;
  background:linear-gradient(160deg,rgba(38,7,23,.96),rgba(8,2,9,.985)) !important;
  clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%) !important;
  pointer-events:none !important;
}
html body main #world.world-section .region-grid .world-card::before {
  z-index:5 !important;
}
html body main #world.world-section .region-grid .world-card > * {
  position:relative !important;
  z-index:2 !important;
}
html body main #world.world-section .region-grid .world-card:hover,
html body main #world.world-section .region-grid .world-card:focus-visible {
  box-shadow:none !important;
  filter:none !important;
}

/* BLOODMOON CHALLENGE CARDS – matching the finished region-card treatment.
   The ornamental frame is an independent transparent overlay; the dark
   backplate is inset so it cannot show outside the metal silhouette. */
html body main #world.world-section .challenge-grid .challenge-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  min-height:390px !important;
  height:auto !important;
  box-sizing:border-box !important;
  padding:0 !important;
  overflow:visible !important;
  isolation:isolate !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}
html body main #world.world-section .challenge-grid .challenge-card::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  inset:13px 11px 13px 11px !important;
  background:linear-gradient(160deg,rgba(38,7,23,.97),rgba(8,2,9,.99)) !important;
  clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%) !important;
  pointer-events:none !important;
}
html body main #world.world-section .challenge-grid .challenge-card::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  background:url("region-frame-overlay.png") center/100% 100% no-repeat !important;
  filter:none !important;
  pointer-events:none !important;
}
html body main #world.world-section .challenge-grid .challenge-card > img{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:84% !important;
  height:148px !important;
  flex:0 0 148px !important;
  margin:42px auto 8px !important;
  box-sizing:border-box !important;
  object-fit:cover !important;
  border:2px solid #bd6974 !important;
  outline:1px solid rgba(255,190,145,.34) !important;
  outline-offset:2px !important;
  padding:2px !important;
  background:#10030b !important;
  box-shadow:0 0 12px rgba(255,35,72,.18) !important;
}
html body main #world.world-section .challenge-grid .challenge-card > div{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  padding:8px 34px 48px !important;
  margin:0 !important;
  text-align:center !important;
}
html body main #world.world-section .challenge-grid .challenge-card h4{
  margin:0 0 9px !important;
  color:#f8dfce !important;
  font:600 19px Cinzel,serif !important;
  line-height:1.35 !important;
  text-shadow:0 0 9px rgba(255,48,78,.18) !important;
}
html body main #world.world-section .challenge-grid .challenge-card p{
  margin:0 !important;
  color:#d0b7bb !important;
  font-size:14px !important;
  line-height:1.55 !important;
}
html body main #world.world-section .challenge-grid .challenge-card:hover,
html body main #world.world-section .challenge-grid .challenge-card:focus-visible{
  transform:translateY(-3px) !important;
  box-shadow:none !important;
  filter:brightness(1.06) !important;
}
@media(max-width:620px){
  html body main #world.world-section .challenge-grid .challenge-card{min-height:370px !important}
  html body main #world.world-section .challenge-grid .challenge-card > img{height:150px !important;flex-basis:150px !important;margin-top:40px !important}
  html body main #world.world-section .challenge-grid .challenge-card > div{padding:8px 30px 44px !important}
}


/* REGION DETAIL PANELS + MATCHING BLOODMOON NAVIGATION BUTTONS */
.region-detail-grid article{
  isolation:isolate; overflow:visible; border:0; border-radius:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(111,10,35,.42),transparent 72%),linear-gradient(160deg,rgba(25,4,14,.98),rgba(6,2,8,.99));
  box-shadow:inset 0 0 24px rgba(255,35,67,.12);
  padding:22px 20px 24px;
}
.region-detail-grid article:before{
  content:""; position:absolute; z-index:3; pointer-events:none;
  inset:-8px; width:auto; height:auto; border:0; filter:none;
  background:url("region-frame-overlay.png") center/100% 100% no-repeat;
}
.region-detail-grid article:after{content:none}
.region-detail-grid article>span,
.region-detail-grid article>small,
.region-detail-grid article>b{position:relative;z-index:1}
.region-detail-grid article>span{margin-top:1px}
.region-detail-grid small{font-size:9px;letter-spacing:1.8px}
.region-detail-grid b{font-size:14px;line-height:1.5}
.region-modal-navigation{border-top:1px solid rgba(194,70,91,.45);padding:20px 4px 0;}
.region-modal-navigation button{
  position:relative; isolation:isolate; flex:0 1 285px; min-width:245px; min-height:66px;
  box-sizing:border-box; padding:0; border:0; border-radius:0; clip-path:none;
  background:url("region-nav-button.png") center/100% 100% no-repeat;
  box-shadow:none; color:#ffe5c9; cursor:pointer;
}
.region-modal-navigation button span{
  position:absolute; left:31%; right:18%; top:50%; transform:translateY(-50%);
  display:block; text-align:center; white-space:nowrap;
  color:#ffe2bd; font:700 10px Cinzel,serif; letter-spacing:1.15px;
  text-shadow:0 1px 2px #26030b,0 0 8px rgba(255,111,65,.45);
}
.region-modal-navigation button:hover:not(:disabled){
  background-image:url("region-nav-button.png");
  filter:brightness(1.18) drop-shadow(0 0 8px rgba(255,40,65,.35));
  box-shadow:none;
}
.region-modal-navigation button:disabled{opacity:.34;filter:saturate(.55);cursor:not-allowed}
@media(max-width:760px){
 .region-detail-grid article:before{inset:-6px}
 .region-modal-navigation{gap:8px;padding-top:14px}
 .region-modal-navigation button{flex:1 1 100%;min-width:0;max-width:330px;min-height:62px}
 .region-modal-navigation button span{font-size:9px}
}

/* FINAL FIX: Region navigation buttons must retain their image on hover.
   Override earlier generic button hover backgrounds explicitly. */
html body .region-modal .region-modal-navigation button,
html body .region-modal .region-modal-navigation button:hover,
html body .region-modal .region-modal-navigation button:focus,
html body .region-modal .region-modal-navigation button:focus-visible,
html body .region-modal .region-modal-navigation button:active {
  background: url("region-nav-button.png") center center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: filter .18s ease, transform .18s ease !important;
}
html body .region-modal .region-modal-navigation button:hover:not(:disabled),
html body .region-modal .region-modal-navigation button:focus-visible:not(:disabled) {
  background: url("region-nav-button.png") center center / 100% 100% no-repeat !important;
  filter: brightness(1.16) drop-shadow(0 0 9px rgba(255,40,65,.42)) !important;
}
html body .region-modal .region-modal-navigation button span {
  opacity: 1 !important;
  visibility: visible !important;
  color: #ffe2bd !important;
}
html body .region-modal .region-modal-navigation button:disabled {
  opacity: .34 !important;
  filter: saturate(.55) !important;
}

/* Interactive challenge cards */
.challenge-card{position:relative;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;outline:none}
.challenge-card:hover,.challenge-card:focus-visible{transform:translateY(-5px);border-color:#ff8a78;box-shadow:0 0 0 1px #ff9b7855,0 0 28px #ff244b66,inset 0 0 28px #ef2c4733}
.challenge-card img{transition:transform .35s ease,filter .35s ease}
.challenge-card:hover img,.challenge-card:focus-visible img{transform:scale(1.035);filter:saturate(1.15) brightness(1.08)}
.challenge-card>div{position:relative}
.challenge-open-label{display:block;margin:13px auto 0;padding-top:10px;width:max-content;max-width:100%;border-top:1px solid #9e4655;color:#e8b99e;font:600 10px Cinzel,serif;letter-spacing:1.6px;text-shadow:0 0 10px #ff304e55}
.challenge-card:hover .challenge-open-label,.challenge-card:focus-visible .challenge-open-label{color:#fff0d9;text-shadow:0 0 12px #ff304e}
.challenge-modal .region-dialog{max-width:1120px}
.challenge-modal .region-dialog-image{height:clamp(190px,30vh,300px)}
.challenge-modal .region-dialog-navigation{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:30px auto 0;max-width:760px;color:#e5b39b;font:600 11px Cinzel,serif;letter-spacing:2px}
.challenge-modal .region-dialog-navigation button{border:1px solid #a84b5b;background:linear-gradient(135deg,#4b0b20,#16040d);color:#f4d8c7;padding:12px 18px;font:600 10px Cinzel,serif;letter-spacing:1px;cursor:pointer}
.challenge-modal .region-dialog-navigation button:hover:not(:disabled){background:linear-gradient(135deg,#8c1733,#310817);box-shadow:0 0 18px #ff254b66}
.challenge-modal .region-dialog-navigation button:disabled{opacity:.35;cursor:default}
@media(max-width:900px){.challenge-grid{grid-template-columns:1fr;max-width:520px}}


/* Challenge dialog navigation: use the same transparent Bloodmoon button artwork as region navigation. */
html body .challenge-modal .challenge-dialog-navigation button,
html body .challenge-modal .challenge-dialog-navigation button:hover,
html body .challenge-modal .challenge-dialog-navigation button:focus,
html body .challenge-modal .challenge-dialog-navigation button:focus-visible,
html body .challenge-modal .challenge-dialog-navigation button:active {
  position:relative;
  isolation:isolate;
  flex:0 1 285px;
  min-width:245px;
  min-height:66px;
  box-sizing:border-box;
  padding:0;
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  background:url("region-nav-button.png") center center / 100% 100% no-repeat !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:#ffe5c9;
  cursor:pointer;
  filter:none;
  transform:none;
  transition:filter .18s ease;
}
html body .challenge-modal .challenge-dialog-navigation button:hover:not(:disabled),
html body .challenge-modal .challenge-dialog-navigation button:focus-visible:not(:disabled) {
  background:url("region-nav-button.png") center center / 100% 100% no-repeat !important;
  filter:brightness(1.16) drop-shadow(0 0 9px rgba(255,40,65,.42));
}
html body .challenge-modal .challenge-dialog-navigation button span {
  position:absolute;
  left:31%;
  right:18%;
  top:50%;
  transform:translateY(-50%);
  display:block;
  text-align:center;
  white-space:nowrap;
  color:#ffe2bd !important;
  font:700 10px Cinzel,serif;
  letter-spacing:1.05px;
  text-shadow:0 1px 2px #26030b,0 0 8px rgba(255,111,65,.45);
  opacity:1 !important;
  visibility:visible !important;
}
html body .challenge-modal .challenge-dialog-navigation button:disabled {
  opacity:.34 !important;
  filter:saturate(.55) !important;
  cursor:not-allowed;
}
@media(max-width:760px){
  html body .challenge-modal .challenge-dialog-navigation {gap:8px;padding-top:14px}
  html body .challenge-modal .challenge-dialog-navigation button {flex:1 1 100%;min-width:0;max-width:330px;min-height:62px}
  html body .challenge-modal .challenge-dialog-navigation button span {font-size:9px}
}

@media(max-width:760px){
  .community-section{margin:22px 8px 34px;padding:82px 28px 88px;}
  .community-section:before{inset:0;background-size:100% 100%;}
  .community-actions{gap:8px;margin-top:22px;}
  .community-actions a{width:min(100%,390px);min-height:76px;padding:0 58px 0 62px;font-size:10px;}
}

/* Bloodmoon-Abschluss-/Hinweisbereich: derselbe transparente Metallrahmen wie bei "Willkommen in Aden" */
html body .coming-soon{
  position:relative !important;
  isolation:isolate;
  box-sizing:border-box;
  width:min(94%,1640px);
  margin:54px auto 72px !important;
  min-height:370px;
  padding:94px clamp(26px,8vw,150px) 100px !important;
  overflow:visible !important;
  border:0 !important;
  outline:0 !important;
  background:radial-gradient(ellipse at 50% 38%,rgba(78,8,29,.72),rgba(13,3,11,.97) 72%) !important;
  box-shadow:none !important;
  text-align:center;
}
html body .coming-soon:before{display:none !important;content:none !important;}
html body .coming-soon:after{
  content:"";
  position:absolute;
  inset:-18px -12px;
  z-index:2;
  pointer-events:none;
  background:url("world-intro-frame.png") center center / 100% 100% no-repeat;
}
html body .coming-soon > *{position:relative;z-index:1;}
html body .coming-soon > span{
  display:block;
  color:#e98c83;
  font:10px Cinzel,serif;
  letter-spacing:3.2px;
  margin-bottom:18px;
  text-shadow:0 0 10px rgba(255,55,75,.35);
}
html body .coming-soon h2{
  margin:0 0 22px !important;
  color:#f5dfd5;
  font:600 clamp(28px,3.2vw,44px) Cinzel,serif !important;
  text-shadow:0 2px 14px rgba(255,40,65,.2);
}
html body .coming-soon p{
  max-width:960px;
  margin:0 auto;
  color:#e0c9c8;
  font-size:clamp(16px,1.35vw,20px);
  line-height:1.75;
}
@media(max-width:760px){
  html body .coming-soon{
    width:96%;min-height:300px;margin:34px auto 48px !important;
    padding:78px 28px 84px !important;
  }
  html body .coming-soon:after{inset:-10px -5px;}
  html body .coming-soon > span{font-size:8px;letter-spacing:2px;}
  html body .coming-soon h2{font-size:clamp(24px,7vw,32px) !important;}
  html body .coming-soon p{font-size:15px;line-height:1.6;}
}


/* Community-Abschluss: metallische L2-Schrift wie in der Designreferenz */
html body .community-section .section-mark{
  color:#ffc08f !important;font:700 10px Cinzel,serif !important;letter-spacing:3px !important;
  text-shadow:0 0 8px rgba(255,75,68,.9),0 0 18px rgba(255,30,55,.45) !important;margin:0 auto 10px !important;
}
html body .community-section h2{
  font-family:"Cinzel",serif !important;font-weight:800 !important;font-size:clamp(38px,4.6vw,58px) !important;
  line-height:1.12 !important;letter-spacing:-.035em !important;margin:8px 0 14px !important;color:#f8e9df !important;
  background:linear-gradient(180deg,#fff8ee 0%,#e6d8d2 22%,#fffaf3 38%,#b5a5a7 52%,#f9ded0 68%,#a84a50 83%,#f9c4ad 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #390817) drop-shadow(0 0 7px rgba(255,40,65,.55));text-shadow:none !important;
}
html body .community-section h2 em{
  font-style:normal !important;background:linear-gradient(180deg,#fff0e8 0%,#ffb6a7 24%,#ff536a 53%,#b30e31 78%,#ff9b8d 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #4b0617) drop-shadow(0 0 9px rgba(255,32,62,.7));
}
html body .community-section>p{
  max-width:820px !important;margin:18px auto 0 !important;color:#f0dfd8 !important;
  font-family:"Marcellus",serif !important;font-size:clamp(14px,1.15vw,17px) !important;line-height:1.65 !important;
  text-shadow:0 2px 5px #000,0 0 9px rgba(0,0,0,.8) !important;
}
html body .community-section .community-actions{gap:16px !important;margin-top:20px !important}
html body .community-section .community-actions a{
  width:275px !important;height:62px !important;min-height:62px !important;box-sizing:border-box !important;
  padding:0 46px 0 58px !important;display:flex !important;align-items:center !important;justify-content:center !important;
  border:0 !important;background:url("legacy-cta-button.png") center / 100% 100% no-repeat !important;
  box-shadow:none !important;color:#ffe5c4 !important;font:700 9px Cinzel,serif !important;letter-spacing:.65px !important;
  text-shadow:0 1px 2px #26030b,0 0 7px rgba(255,140,75,.45) !important;transition:filter .2s ease,transform .2s ease !important;
}
html body .community-section .community-actions a:hover{
  background:url("legacy-cta-button.png") center / 100% 100% no-repeat !important;
  filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,35,60,.55)) !important;transform:translateY(-2px) !important;
}
@media(max-width:760px){html body .community-section h2{font-size:clamp(30px,7vw,42px)!important}html body .community-section .community-actions a{width:min(275px,100%)!important;height:62px!important;min-height:62px!important}}


/* Originale Lineage-II-Schriftdatei lokal einbinden */
@font-face{
  font-family:"L2Font";
  src:url("./49_la2font.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

/* Logo-nahe L2-Schrift für alle dekorativen UI-Texte */
html body h1,
html body h2,
html body h3,
html body h4,
html body .section-mark,
html body .eyebrow,
html body .chapter-label,
html body .region-eyebrow,
html body .region-open-label,
html body nav a,
html body button,
html body .btn,
html body .community-actions a,
html body .region-nav a,
html body .region-nav button,
html body .challenge-card a,
html body .challenge-card button{
  font-family:"L2Font","Cinzel Decorative",serif !important;
}


/* FIX: emphasized headline words must use the same original Lineage II font.
   Earlier generic h1/h2 em rules forced Cinzel Decorative and caused mixed typography. */
html body h1 em,
html body h2 em,
html body h3 em,
html body h4 em,
html body .below-intro em,
html body .world-section em,
html body .community-section em,
html body .lore-hero em,
html body .lore-chronicle em,
html body .world-hero em{
  font-family:"L2Font",serif !important;
}


/* FINAL TYPOGRAPHY NORMALIZATION
   One typeface across every visible text node: the bundled Lineage II display font.
   High-specificity selectors intentionally override old per-section Cinzel/Marcellus
   declarations and nested <em>/<strong> rules, preventing mixed-font words. */
@font-face{
  font-family:"L2Font";
  src:url("./49_la2font.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
html body :not(svg):not(path){
  font-family:"L2Font",serif !important;
}
html body :not(svg):not(path)::before,
html body :not(svg):not(path)::after{
  font-family:"L2Font",serif !important;
}
html body input,
html body textarea,
html body select,
html body option{
  font-family:"L2Font",serif !important;
}




/* Community-Abschluss: einheitliche L2-Schrift und Buttontext ohne Doppelung */
html body .community-section h2,
html body .community-section h2 em{
  font-family:"L2Font",serif !important;
  font-style:normal !important;
  letter-spacing:0 !important;
}
html body .community-section h2 em{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#ff6576 !important;
  color:#ff6576 !important;
  filter:drop-shadow(0 0 8px rgba(255,45,70,.48)) !important;
}
html body .community-section>p{
  font-family:"L2Font",serif !important;
  font-size:clamp(16px,1.35vw,19px) !important;
  line-height:1.75 !important;
  max-width:900px !important;
}
html body .community-section .community-actions a{
  position:relative !important;
  overflow:hidden !important;
  background:url("legacy-cta-button.png") center / 100% 100% no-repeat !important;
  border:0 !important;box-shadow:none !important;
  width:min(310px,44vw) !important;height:76px !important;min-height:76px !important;
  padding:0 60px 0 78px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  text-align:center !important;color:#ffe7c9 !important;
  font-family:"L2Font",serif !important;font-size:12px !important;font-weight:700 !important;
  line-height:1.12 !important;letter-spacing:.3px !important;
  text-shadow:0 1px 3px #21030a,0 0 8px rgba(255,155,90,.35) !important;
}
html body .community-section .community-actions a span{
  position:relative !important;z-index:1 !important;display:block !important;
  width:67% !important;margin-left:8% !important;padding:3px 2px !important;
  background:linear-gradient(180deg,rgba(34,0,6,.98),rgba(48,0,8,.98) 52%,rgba(67,0,9,.98)) !important;
  border-radius:2px !important;
  font-family:"L2Font",serif !important;white-space:normal !important;
}
html body .community-section .community-actions a:hover{
  background:url("legacy-cta-button.png") center / 100% 100% no-repeat !important;
  filter:brightness(1.16) drop-shadow(0 0 10px rgba(255,35,60,.48)) !important;
  transform:translateY(-2px) !important;
}
@media(max-width:760px){
 html body .community-section .community-actions a{
   width:min(330px,100%) !important;height:76px !important;min-height:76px !important;
   padding:0 58px 0 76px !important;font-size:11px !important;
 }
 html body .community-section .community-actions a span{width:65%!important;margin-left:9%!important}
}


/* Coming-soon heading: match the already-correct L2 body typography */
html body section.coming-soon h2{
  font-family:"L2Font",serif !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:0 !important;
}


/* Community CTA: use the clean, text-free button artwork.
   The labels are rendered only once as live HTML text. */
html body .community-section .community-actions a{
  background-image:url("legacy-cta-button.png") !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  padding:0 !important;
}
html body .community-section .community-actions a span{
  position:absolute !important;
  left:34% !important;
  right:18% !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:auto !important;
  margin:0 !important;
  padding:0 2px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:center !important;
  white-space:normal !important;
  font-family:"L2Font",serif !important;
  font-size:11px !important;
  line-height:1.15 !important;
  letter-spacing:.15px !important;
  color:#ffe7c9 !important;
  text-shadow:0 1px 3px #21030a,0 0 6px rgba(255,155,90,.4) !important;
}
html body .community-section .community-actions a:hover{
  background-image:url("legacy-cta-button.png") !important;
}
@media(max-width:760px){
  html body .community-section .community-actions a span{
    left:33% !important;right:17% !important;font-size:10px !important;
  }
}


/* Fine alignment of the two live labels inside the CTA artwork */
html body .community-section .community-actions a{
  position:relative !important;
}
html body .community-section .community-actions a span{
  left:35% !important;
  right:16% !important;
  top:53% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:2.4em !important;
  line-height:1.12 !important;
  text-align:center !important;
  padding:0 4px !important;
}
@media(max-width:760px){
  html body .community-section .community-actions a span{
    left:34% !important;
    right:15% !important;
    top:53% !important;
  }
}