@font-face {
  font-family: "Lumera Display";
  src: url("martel.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --lumera-night: #07121c;
  --lumera-deep: #0c1d2a;
  --lumera-stone: #132a37;
  --lumera-stone-soft: #193544;
  --lumera-moon: #68d4dc;
  --lumera-moon-soft: #a5edf0;
  --lumera-gold: #e5b957;
  --lumera-gold-bright: #ffd77a;
  --lumera-ink: #10212b;
  --lumera-parchment: #f1eadb;
  --lumera-parchment-deep: #e4d8c2;
  --lumera-canvas: #d8ccb6;
  --lumera-field: #fffcf5;
  --lumera-paper-muted: #574835;
  --lumera-field-border: #b8aa95;
  --lumera-muted: #91a7b3;
  --lumera-line: rgba(145, 192, 205, 0.18);
  --lumera-plum: #23152e;
  --lumera-frame: #a8859e;
  --lumera-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  background: var(--lumera-night);
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  color: #dbe7ea;
  background-color: var(--lumera-night) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
  background-image: none !important;
}

body::before {
  position: fixed;
  top: 0;
  left: 50%;
  /* The sword axis is x=1904 in the 3840x2160 artwork (952 in the original), not its midpoint.
     Overscan by 1920/(2*952) to cover both edges after centering that axis. */
  width: max(100.840337%, 179.271709vh);
  height: 100vh;
  transform: translateX(-49.583333%);
  z-index: 0;
  content: "";
  background-image: linear-gradient(180deg, rgba(7, 18, 28, .08) 0, transparent 52%, #07121c 100%), var(--lumera-background-image);
  background-size: 100% 100%, 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

#LumeraLoader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  place-content: center;
  gap: 24px;
  color: rgba(255, 255, 255, 0.72);
  background: #020305;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  transition: opacity 360ms ease, visibility 360ms ease;
}

#LumeraLoader.is-finished {
  visibility: hidden;
  opacity: 0;
}

html.lumera-loading #LumeraLoader { display: grid; }

.LumeraLoaderSprites {
  display: flex;
  min-width: 250px;
  align-items: end;
  justify-content: center;
  gap: 22px;
}

.LumeraLoaderSprites img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  image-rendering: pixelated;
  animation: lumera-loader-step 900ms steps(2, end) infinite alternate;
}

.LumeraLoaderSprites img:nth-child(2) {
  animation-delay: 140ms;
}

.LumeraLoaderSprites img:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes lumera-loader-step {
  from { transform: translateY(0); opacity: 0.62; }
  to { transform: translateY(-8px); opacity: 1; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--lumera-moon);
  outline-offset: 3px;
}

#ArtworkHelper,
#Bodycontainer {
  width: 100%;
  min-width: 0;
  height: auto;
}

#ArtworkHelper {
  position: relative;
  z-index: 1;
  padding: 22px clamp(16px, 3vw, 48px) 48px;
  text-align: left;
}

#Bodycontainer {
  display: block;
  max-width: 1480px;
  margin: 0 auto;
}

#LumeraHeader {
  position: relative;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  min-height: 92px;
  padding: 14px 18px 14px 22px;
  border: 4px double var(--lumera-frame);
  border-radius: 0;
  background: var(--lumera-plum);
  box-shadow: 0 4px 0 rgba(7, 18, 28, .55);
  overflow: hidden;
}

#LumeraHeader::after {
  position: absolute;
  top: 0;
  right: 25%;
  width: 300px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--lumera-moon), transparent);
  opacity: 0.8;
}

#LumeraHero {
  position: relative;
  display: flex;
  min-height: 500px;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 16px 24px 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

#LumeraHero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--lumera-gold), transparent);
  opacity: 0.78;
}

.LumeraHeroCopy {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62);
}

.LumeraHeroKicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--lumera-moon-soft);
  font-size: 12px;
  font-weight: 800;
}

.LumeraHeroKicker::before {
  width: 28px;
  height: 1px;
  content: "";
  background: var(--lumera-moon);
}

.LumeraHeroCopy h1 {
  max-width: 590px;
  margin: 10px 0 12px;
  color: #fff;
  font-family: "Lumera Display", Georgia, serif;
  font-size: clamp(40px, 5.4vw, 74px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.03;
}

.LumeraHeroCopy p {
  max-width: 540px;
  margin: 0;
  color: #c8d9df;
  font-size: clamp(14px, 1.35vw, 18px);
}

.LumeraHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.LumeraHeroActions a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  color: #fff;
  background: rgba(10, 25, 35, 0.58);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.LumeraHeroActions a:first-child {
  border-color: var(--lumera-gold-bright);
  color: var(--lumera-ink);
  background: var(--lumera-gold-bright);
  text-shadow: none;
}

.LumeraHeroActions a:hover {
  border-color: var(--lumera-moon-soft);
  color: var(--lumera-ink);
  background: var(--lumera-moon-soft);
}

.LumeraRelics {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  gap: 7px;
}

.LumeraRelics > span {
  display: grid;
  width: 108px;
  min-height: 128px;
  place-items: center;
  align-content: center;
  padding: 18px 8px 10px;
  border: 2px solid rgba(255, 255, 255, 0.74);
  color: #40372c;
  background: var(--lumera-parchment);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 0 3px rgba(19, 42, 55, 0.1);
}

.LumeraRelics > span:first-child {
  border-color: var(--lumera-moon);
}

.LumeraRelics img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  image-rendering: pixelated;
}

.LumeraRelics small {
  max-width: 92px;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
}

.LumeraBrand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
  color: #fff;
  text-decoration: none;
}

.LumeraBrand:hover {
  color: #fff;
  text-decoration: none;
}

.LumeraBrandMark {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(255, 215, 122, 0.45);
  border-radius: 50% 50% 50% 15%;
  color: var(--lumera-gold-bright);
  background: linear-gradient(145deg, #213e48, #0a1923);
  box-shadow: inset 0 0 0 5px rgba(229, 185, 87, 0.06), 0 8px 24px rgba(0, 0, 0, 0.28);
  font-family: "Lumera Display", Georgia, serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-4deg);
}

.LumeraBrandCopy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.LumeraBrandCopy strong {
  color: #fff;
  font-family: "Lumera Display", Georgia, serif;
  font-size: clamp(27px, 2.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.04em;
}

.LumeraBrandCopy small {
  margin-top: 7px;
  color: var(--lumera-moon-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.LumeraServerStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 165px;
  margin-right: 20px;
  color: #fff;
}

.LumeraServerStatus span:last-child {
  display: flex;
  flex-direction: column;
}

.LumeraServerStatus small {
  color: var(--lumera-muted);
  font-size: 11px;
}

.LumeraServerStatus strong {
  font-size: 13px;
  font-weight: 700;
}

.LumeraStatusLight {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e66c63;
  box-shadow: 0 0 0 5px rgba(230, 108, 99, 0.12);
}

.LumeraServerStatus.is-online .LumeraStatusLight {
  background: #66d49c;
  box-shadow: 0 0 0 5px rgba(102, 212, 156, 0.12), 0 0 18px rgba(102, 212, 156, 0.55);
}

.LumeraHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.LumeraHeaderActions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.LumeraHeaderLink {
  border: 1px solid var(--lumera-line);
  color: #dcebed;
  background: rgba(255, 255, 255, 0.025);
}

.LumeraHeaderLink:hover {
  border-color: rgba(104, 212, 220, 0.55);
  color: #fff;
  background: rgba(104, 212, 220, 0.08);
}

.LumeraHeaderCta {
  border: 1px solid var(--lumera-gold-bright);
  color: #172027;
  background: linear-gradient(180deg, var(--lumera-gold-bright), var(--lumera-gold));
  box-shadow: 0 8px 24px rgba(229, 185, 87, 0.16);
}

.LumeraHeaderCta:hover {
  color: #07121c;
  background: #ffe29b;
}

.LumeraMenuToggle,
.LumeraMenuBackdrop {
  display: none;
}

#ContentRow {
  position: relative;
  top: 0;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr) 238px;
  gap: 24px;
  align-items: start;
  margin-top: 22px;
}

#MenuColumn,
#ContentColumn,
#ThemeboxesColumn {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
}

#MenuColumn,
#ThemeboxesColumn {
  border: 4px double #bdb09b;
  border-radius: 0;
  color: var(--lumera-ink);
  background: var(--lumera-parchment);
  box-shadow: 0 4px 0 rgba(7, 18, 28, .4);
  overflow: visible;
}

#LeftArtwork {
  display: none;
}

#Loginbox,
.SmallMenuBox,
.SmallMenuBox#DownloadBox,
#Menu {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  margin: 0;
}

#Loginbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--lumera-line);
}

#Loginbox > div[style*="clear"] {
  display: none !important;
}

#LoginTop,
#LoginBottom,
#Loginbox .LoginBorder,
#LoginstatusText_2_2,
.SmallBoxTop,
.SmallBoxBorder,
.SmallBoxBottom,
#MenuTop,
#MenuBottom,
.Lights,
.Extend,
.LeftChain,
.RightChain,
.Label {
  display: none !important;
}

#LoginButtonContainer,
#Loginbox #LoginButton,
#Loginbox #LoginButton .Button,
#Loginbox #LoginButton #ButtonText,
#Loginbox #LoginstatusText_2,
#Loginbox .Loginstatus,
#Loginbox .LoginstatusText {
  position: static;
  width: 100%;
  height: 38px;
  margin: 0;
  background: none !important;
}

#Loginbox #LoginButton,
#Loginbox #LoginstatusText_2_1 {
  display: grid;
  place-items: center;
  border: 1px solid var(--lumera-line);
  border-radius: 9px;
  color: #dcebed;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: pointer;
}

#Loginbox #LoginButton #ButtonText,
#Loginbox #LoginstatusText_2_1 {
  display: grid;
  place-items: center;
}

#Loginbox #LoginButton .Button {
  display: none !important;
}

#Loginbox #LoginButton:hover,
#Loginbox #LoginstatusText_2_1:hover {
  border-color: rgba(104, 212, 220, 0.45);
  background: rgba(104, 212, 220, 0.08) !important;
}

.LumeraLoginLabel,
.LumeraAccountLabel {
  position: relative;
  z-index: 20;
  display: inline;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.SmallMenuBox#DownloadBox {
  padding: 0 14px 14px;
}

.SmallBoxButtonContainer,
#PlayNowContainer,
.MediumButtonBackground {
  position: static !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  background: none !important;
}

.MediumButtonBackground {
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 185, 87, 0.55);
  border-radius: 9px;
  color: var(--lumera-gold-bright);
  background: rgba(229, 185, 87, 0.08) !important;
}

.MediumButtonText,
.MediumButtonOver {
  display: none !important;
}

.LumeraDownloadLabel {
  font-size: 12px;
  font-weight: 900;
}

#Menu {
  padding: 2px 8px 12px;
}

.menuitem {
  margin-top: 6px;
}

.MenuButton {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent !important;
}

.MenuButton > div {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 12px;
}

.MenuButton .Button {
  display: none;
}

.Icon {
  position: static;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: contain;
  filter: none;
}

.LumeraMenuLabel {
  display: block;
  color: #edf5f6;
  font-size: 12px;
  font-weight: 850;
}

.MenuButton:hover {
  background: rgba(104, 212, 220, 0.08) !important;
}

.Submenu {
  width: auto;
  margin: 2px 0 7px 40px;
  border-left: 1px solid rgba(104, 212, 220, 0.18);
  background: transparent !important;
}

.Submenuitem {
  min-height: 30px;
  border-radius: 0 7px 7px 0;
  background: transparent !important;
}

.Submenuitem:hover {
  background: rgba(104, 212, 220, 0.07) !important;
}

.SubmenuitemLabel {
  padding: 6px 8px 6px 12px;
  border: 0;
  color: var(--lumera-muted) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.Submenu a:hover .SubmenuitemLabel,
.Submenuitem[style*="color: white"] .SubmenuitemLabel {
  color: var(--lumera-moon-soft) !important;
}

.ActiveSubmenuItemIcon {
  top: 12px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lumera-moon) !important;
  box-shadow: 0 0 9px rgba(104, 212, 220, 0.7);
}

#ContentColumn {
  min-width: 0;
}

.Content,
#ContentHelper {
  position: static;
  width: 100%;
}

.Content .Box {
  position: relative;
  margin: 0 0 18px;
  border: 4px double #bdb09b;
  border-radius: 0;
  color: var(--lumera-ink);
  background: var(--lumera-parchment);
  box-shadow: 0 4px 0 rgba(7, 18, 28, .4);
  overflow: hidden;
}

.Content .Corner-tl,
.Content .Corner-tr,
.Content .CornerWrapper-b,
.Content .Border_1,
.Content .BorderTitleText,
.Content .Title {
  display: none;
}

.LumeraPageTitle {
  position: relative;
  display: block;
  margin: 0;
  padding: 24px 28px 17px;
  border-bottom: 1px solid rgba(16, 33, 43, 0.12);
  color: var(--lumera-ink);
  font-family: "Lumera Display", Georgia, serif;
  font-size: clamp(23px, 2.2vw, 34px);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.LumeraPageTitle.LumeraReadableTitle { font-family: Inter, "Segoe UI", Arial, sans-serif; font-weight: 600; }

.LumeraPageTitle::after {
  position: absolute;
  bottom: -1px;
  left: 28px;
  width: 64px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--lumera-gold), transparent);
}

.Content .Border_2,
.Content .Border_3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.Content .BoxContent,
.Content #News .BoxContent,
.Content #NewsTicker .BoxContent,
.Content #FeaturedArticle .BoxContent {
  min-height: 0;
  padding: clamp(18px, 2.4vw, 30px);
  color: #493c2d;
  background: var(--lumera-parchment) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
}

.Content .BoxContent td,
.Content .BoxContent p,
.Content .BoxContent li,
.Content .BoxContent div {
  font-family: inherit;
}

.Content .BoxContent td {
  color: #493c2d;
  font-size: 13px;
}

.Content a {
  color: #176874;
  font-family: inherit;
  font-weight: 750;
}

.Content a:hover {
  color: #0b4d57;
  font-family: inherit;
}

.Content table {
  max-width: 100%;
}

.Content th {
  padding: 10px 12px;
  color: #fff;
  background: var(--lumera-stone);
  font-family: inherit;
  font-size: 12px;
}

.Content .BoxContent .Odd {
  background-color: #e2d6c1;
}

.Content .BoxContent .Even {
  background-color: #f3ecdf;
}

.Content input[type="text"],
.Content input[type="email"],
.Content input[type="password"],
.Content input[type="number"],
.Content select,
.Content textarea {
  min-height: 40px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lumera-field-border);
  border-radius: 7px;
  color: var(--lumera-ink);
  background: var(--lumera-field);
  font: inherit;
}

.Content input[type="submit"],
.Content button,
.Content .btn {
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid #1a5863;
  border-radius: 7px;
  color: #fff;
  background: #176874;
  font-family: inherit;
  font-weight: 800;
}

.Content .nav-tabs,
.Content [role="tablist"] {
  display: flex;
  width: 100%;
  margin: 0 0 20px;
  padding: 2px;
  border: 1px solid #cfc4b2;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.32);
  overflow-x: auto;
}

.Content .nav-tabs .nav-link,
.Content [role="tablist"] [role="tab"] {
  min-width: max-content;
  flex: 1 0 auto;
  padding: 11px 18px;
  border: 1px solid #d8cdbc;
  border-radius: 0;
  color: #5b554d;
  background: transparent;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.Content .nav-tabs .nav-link:first-child,
.Content [role="tablist"] [role="tab"]:first-child {
  border-radius: 22px 0 0 22px;
}

.Content .nav-tabs .nav-link:last-child,
.Content [role="tablist"] [role="tab"]:last-child {
  border-radius: 0 22px 22px 0;
}

.Content .nav-tabs .nav-link.active,
.Content [role="tablist"] [role="tab"][aria-selected="true"] {
  color: #fff;
  background: #555149;
}

.carousel-control-prev,
.carousel-control-next {
  width: 48px;
  border: 2px solid rgba(73, 60, 45, 0.18);
  background: rgba(241, 234, 219, 0.88);
}

.Content .NewsHeadlineBackground,
.Content #News .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground {
  min-height: 42px;
  height: auto;
  margin: 0 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--lumera-stone) !important;
}

.Content #News .NewsHeadlineDate,
.Content #FeaturedArticle .NewsHeadlineDate {
  top: 13px;
  color: var(--lumera-muted);
}

.Content #News .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText {
  top: 10px;
  color: #fff;
  font-size: 13px;
}

#Footer {
  padding: 6px 16px 20px;
  color: var(--lumera-muted);
  font-family: inherit;
  font-size: 10px;
}

#Footer a,
#Footer a:link,
#Footer a:visited {
  color: var(--lumera-moon-soft);
}

#ThemeboxesColumn {
  padding: 14px;
}

#RightArtwork {
  position: relative;
  top: auto;
  right: auto;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  min-height: 190px;
  padding: 78px 10px 12px;
  border: 1px solid var(--lumera-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 10%, rgba(104, 212, 220, 0.15), transparent 45%),
    rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

#RightArtwork #Creature,
#RightArtwork #Boss {
  position: absolute;
  top: 10px;
  width: 64px;
  height: 64px;
  cursor: help;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.55));
}

#RightArtwork #Creature {
  left: calc(50% - 70px);
}

#RightArtwork #Boss {
  left: calc(50% + 6px);
}

#PedestalAndOnline {
  display: none;
}

.LumeraDailyHeader {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.LumeraDailyHeader span {
  color: var(--lumera-moon);
  font-size: 10px;
  font-weight: 800;
}

.LumeraDailyHeader strong {
  margin-top: 2px;
  color: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.LumeraDailyNames {
  display: contents;
}

.LumeraDailyNames > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 0;
  color: #433b31;
  background: var(--lumera-parchment);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.LumeraDailyNames small {
  margin-bottom: 3px;
  color: var(--lumera-muted);
  font-size: 8px;
}

#Themeboxes {
  margin-top: 14px;
}

#Themeboxes .Themebox {
  top: auto;
  width: 100%;
  max-width: 180px;
  margin: 0 auto 12px;
  overflow: hidden;
}

.scrollToTop {
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(104, 212, 220, 0.4);
  border-radius: 50%;
  background: var(--lumera-stone);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.scrollToTop img {
  width: 42px;
  opacity: 0;
}

.scrollToTop::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--lumera-moon-soft);
  content: "↑";
  font-size: 20px;
}

#HelperDivContainer {
  border-color: var(--lumera-line);
  border-radius: 10px;
  color: #493c2d;
  background: var(--lumera-parchment) !important;
  box-shadow: var(--lumera-shadow);
}

@media (max-width: 1180px) {
  #ContentRow {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  #ThemeboxesColumn {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 14px;
  }

  #Themeboxes {
    display: flex;
    gap: 12px;
    margin: 0;
    overflow-x: auto;
  }

  #Themeboxes .Themebox {
    flex: 0 0 180px;
    margin: 0;
  }
}

@media (max-width: 820px) {
  #ArtworkHelper {
    padding: 10px 10px 30px;
  }

  #LumeraHeader {
    position: sticky;
    top: 8px;
    grid-template-columns: 1fr auto;
    min-height: 70px;
    padding: 9px 10px 9px 14px;
    border-radius: 14px;
  }

  .LumeraBrand {
    gap: 9px;
  }

  .LumeraBrandMark {
    width: 44px;
    height: 44px;
    font-size: 25px;
  }

  .LumeraBrandCopy strong {
    font-size: 25px;
  }

  .LumeraBrandCopy small {
    margin-top: 4px;
    font-size: 8px;
  }

  #LumeraHero {
    min-height: 500px;
    flex-direction: column;
    align-items: stretch;
    justify-content: end;
    padding: 120px 18px 26px;
    background:
      linear-gradient(180deg, rgba(7, 18, 28, 0.05) 8%, rgba(7, 18, 28, 0.88) 63%, rgba(7, 18, 28, 0.98) 100%);
  }

  .LumeraHeroCopy {
    width: 100%;
  }

  .LumeraHeroCopy h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .LumeraRelics {
    width: 100%;
    gap: 5px;
  }

  .LumeraRelics > span {
    width: 33.333%;
    min-height: 108px;
    padding: 12px 4px 8px;
  }

  .LumeraRelics img {
    width: 50px;
    height: 50px;
  }

  .LumeraServerStatus,
  .LumeraHeaderActions {
    display: none;
  }

  .LumeraMenuToggle {
    display: grid;
    width: 44px;
    height: 44px;
    place-content: center;
    gap: 5px;
    border: 1px solid var(--lumera-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
  }

  .LumeraMenuToggle span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #dcebed;
    transition: transform 160ms ease, opacity 160ms ease;
  }

  .lumera-menu-open .LumeraMenuToggle span:first-child {
    transform: translateY(7px) rotate(45deg);
  }

  .lumera-menu-open .LumeraMenuToggle span:nth-child(2) {
    opacity: 0;
  }

  .lumera-menu-open .LumeraMenuToggle span:last-child {
    transform: translateY(-7px) rotate(-45deg);
  }

  #ContentRow {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
  }

  #ContentColumn {
    order: 1;
    width: 100%;
  }

  #ThemeboxesColumn {
    order: 2;
    display: block;
    width: 100%;
  }

  #MenuColumn {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    width: min(86vw, 330px);
    border: 0;
    border-right: 1px solid var(--lumera-line);
    border-radius: 0 18px 18px 0;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 200ms ease;
  }

  .lumera-menu-open {
    overflow: hidden;
  }

  .lumera-menu-open #MenuColumn {
    transform: translateX(0);
  }

  .LumeraMenuBackdrop {
    position: fixed;
    inset: 0;
    z-index: 450;
    display: block;
    border: 0;
    background: rgba(2, 8, 13, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  .lumera-menu-open .LumeraMenuBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #Loginbox {
    margin-top: 14px;
  }

  #ThemeboxesColumn {
    padding: 12px;
  }

  #RightArtwork {
    max-width: 420px;
    margin: 0 auto;
  }

  #Themeboxes {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  #Themeboxes .Themebox {
    flex: 0 0 180px;
    scroll-snap-align: start;
  }

  .LumeraPageTitle {
    padding: 19px 18px 14px;
    font-size: 24px;
  }

  .LumeraPageTitle::after {
    left: 18px;
  }

  .Content .BoxContent,
  .Content #News .BoxContent,
  .Content #NewsTicker .BoxContent,
  .Content #FeaturedArticle .BoxContent {
    padding: 16px;
    font-size: 13px;
    overflow-x: auto;
  }

  .Content .NewsHeadlineBackground,
  .Content #News .NewsHeadlineBackground,
  .Content #FeaturedArticle .NewsHeadlineBackground {
    min-width: 0;
  }

  .Content #News .NewsHeadlineText,
  .Content #FeaturedArticle .NewsHeadlineText {
    left: 120px;
    width: calc(100% - 130px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .Content .Box {
    border-radius: 12px;
  }

  .Content .BoxContent img {
    max-width: 100%;
    height: auto;
  }

  .Content .BoxContent table {
    width: 100% !important;
  }

  .Content .BoxContent table[style*="display: grid"],
  .Content .BoxContent table[style*="display:grid"] {
    display: block !important;
  }
}

/* Framed game navigation and compact legacy tables, shared by every page. */
.LumeraHeroLogo { display: block; width: min(420px, 100%); height: auto; margin: 0 auto; }
.LumeraHeroCopy h1 { margin: 0; max-width: none; width: 100%; }
.LumeraHeroActions { justify-content: center; }
.LumeraHeroActions a, .LumeraHeaderLink, .LumeraHeaderCta {
  border-radius: 0; box-shadow: none; border: 3px double #b79b6d;
}
.LumeraHeroActions a { background: var(--lumera-parchment); color: var(--lumera-ink); }
.LumeraRelics { position: absolute; right: 20px; bottom: 38px; display: flex; gap: 6px; width: auto; }
.LumeraRelics span { width: 76px; min-height: 92px; padding: 7px 3px; border: 3px double #bdb09b; border-radius: 0; background: var(--lumera-parchment); box-shadow: none; }
.LumeraRelics img { width: 48px; height: 48px; filter: none; }
.LumeraRelics small { color: #493c2d; font-weight: 500; font-size: 9px; }
.LumeraBrandCopy strong { font-size: 27px; }
.LumeraBrandCopy small { color: #e9dac3; font-weight: 500; }
#LumeraHeader::after { display: none; }
.LumeraHeaderActions { gap: 0; align-self: stretch; }
#LumeraHeader { display: block; padding: 16px 36px; min-height: 94px; overflow: visible; }
.LumeraBrand { justify-content: flex-start; align-self: stretch; }
.LumeraBrandIcon { display: block; width: 76px; height: 76px; object-fit: contain; }
.LumeraPrimaryNav { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) minmax(170px,1.25fr) repeat(3, minmax(0,1fr)); gap: 0; align-items: center; max-width: 1360px; margin: 0 auto; }
.LumeraPrimaryNav a { min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: center; padding: 14px 20px; border: 0; border-left: 1px solid #775a765c; color: #f7eddf; font-size: 13px; font-weight: 600; }
.LumeraPrimaryNav a:first-child { border-left: 0; }
.LumeraPrimaryNav a.LumeraServerStatus { padding: 8px 12px; }
.LumeraPrimaryNav a:hover { background: #3e3047; }
.LumeraPrimaryNav .LumeraWikiLink {
  color: #f6d898;
  animation: lumera-wiki-glow 3.6s ease-in-out infinite;
}
.LumeraPrimaryNav .LumeraWikiLink:is(:hover, :focus-visible) { color: #ffe8b3; }
.LumeraServerStatus { position: static; transform: none; justify-content: center; min-width: 0; min-height: 54px; margin: 0; padding: 8px 12px; border: 0; border-left: 1px solid #775a765c; background: transparent; box-shadow: none; }
.LumeraServerStatus strong { font-size: 10px; font-weight: 600; }
.LumeraServerStatus .LumeraStatusLight { width: 6px; height: 6px; }
.LumeraHeaderActions a { min-width: 128px; padding: 18px 24px; border: 0; border-left: 1px solid #775a76; }
.LumeraHeaderActions a { border-radius: 0; }
.LumeraPrimaryNav a, .LumeraHeaderActions a, #Loginbox a, .LumeraDownloadLink, .LumeraRankingAll { text-decoration: none; }
.LumeraHeaderLink { background: transparent; }
.LumeraHeaderCta { background: #f0d298; }
.LumeraPrimaryNav .LumeraAccountEntry { position: relative; overflow: hidden; isolation: isolate; border: 3px double #b08b45; color: #23152e; background: #f0d298; font-weight: 700; }
.LumeraAccountEntry::after { content: ""; pointer-events: none; position: absolute; inset: -20% auto -20% 0; width: 50%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation: lumera-light-sweep 3s ease-in-out infinite; }
.LumeraPrimaryNav .LumeraAccountEntry:hover { background: #ffe0a0; }
.LumeraServerStatus.is-online .LumeraStatusLight { animation: lumera-online-pulse 2.4s ease-in-out infinite; }
.LumeraHeroLogo { animation: lumera-logo-float 5s ease-in-out infinite; }
.LumeraHeroActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(336px, 100%); gap: 16px; margin: 36px auto 0; }
.LumeraHeroActions a { position: relative; min-height: 50px; padding: 0 24px; animation: lumera-cta-glow 3s ease-in-out infinite; text-shadow: none; }
.LumeraHeroActions a:first-child { background: #ffd77a; border-color: #c69c42; color: #23152e; }
.LumeraHeroActions a:last-child { animation-delay: 1.5s; border-color: #d6bd8d; }
#LumeraHero { min-height: 560px; }
.LumeraPodium { position: absolute; bottom: 28px; z-index: 2; }
.LumeraGuildPodium { left: 18px; }
.LumeraPlayerPodium { right: 18px; }
.LumeraPodium h2 { margin: 0 0 12px; text-align: center; font: 600 13px/1.5 Inter, sans-serif; }
.LumeraPodium h2 a { color: #fff4db; text-shadow: 0 2px 5px #23152e; text-decoration: none; }
.LumeraPodium ol { display: flex; align-items: end; gap: 8px; list-style: none; margin: 0; padding: 0; }
.LumeraPodiumCard { position: relative; width: 94px; background: var(--lumera-parchment); box-shadow: 0 5px 12px rgba(7,18,28,.3); }
.LumeraPodiumCard a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-height: 144px; padding: 22px 6px 10px; color: #493c2d; text-align: center; text-decoration: none; }
.LumeraPlace1 { border: 4px double #d6ac54; }
.LumeraPlace2 { border: 4px double #bfc5ce; }
.LumeraPlace3 { border: 0; padding: 4px; }
.LumeraPodiumPlace { position: absolute; top: 5px; left: 7px; font: 600 10px/1 Inter, sans-serif; color: #806742; }
.LumeraPodiumCard img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.LumeraGuildPodium .LumeraPodiumCard img { width: 56px; height: 56px; margin: 4px; }
.LumeraPodiumCard strong { min-height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.LumeraPodiumCard small { font-size: 9px; line-height: 1.4; color: var(--lumera-paper-muted); }
.LumeraUnknownGuild { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin: 4px; color: #9a7940; font: 600 32px/1 Inter, "Segoe UI", sans-serif; }
.LumeraUnknownGuild::before { content: ""; position: absolute; inset: 9px; border: 3px double #b8a079; transform: rotate(45deg); }
.LumeraAccountWelcome { margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid #c7bca7; }
.Content .LumeraAccountWelcome h2 { font: 600 22px/1.4 Inter, sans-serif; margin: 0 0 8px; }
.LumeraAccountWelcome p { margin: 0; color: var(--lumera-paper-muted); font-size: 13px; }
.Content .LumeraAccountOverview { border: 4px double #c4a56a; }
.Content .LumeraAccountOverview .CaptionInnerContainer { background: #e9dfca; }
.Content .LumeraAccountOverview .InnerTableContainer { padding: 16px; }
.Content .LumeraAccountOverview .InnerTableContainer .InnerTableContainer { padding: 0; }
.Content .LumeraAccountStatusSummary > tbody > tr { display: grid; grid-template-columns: 60px minmax(0,1fr) 142px; align-items: center; gap: 18px; padding: 6px 0 20px; }
.Content .LumeraAccountStatusSummary > tbody > tr > td { padding: 0; width: auto; }
.Content .LumeraAccountOverview .AccountStatusImage { display: block; width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.LumeraAccountPlan { display: block; margin-bottom: 8px; color: #87683c; font-size: 13px; font-weight: 600; }
.Content .LumeraAccountPlanDays, .Content .LumeraAccountPlanDays span { color: #493c2d !important; font-size: 24px; line-height: 1.4; font-weight: 600; }
.LumeraAccountActions { display: grid; gap: 8px; }
.LumeraAccountActions > div { display: none; }
.Content .LumeraAccountButton { display: inline-block; margin: 3px 0; padding: 10px 14px; border: 3px double #a98d5f; background: #3e3047; color: #fff8e7; font: 600 12px/1.4 Inter, sans-serif; cursor: pointer; }
.Content .LumeraAccountButton:hover { background: #584361; }
.Content .LumeraAccountSettingsActions > tbody > tr { display: flex; flex-wrap: wrap; gap: 12px; }
.Content .LumeraAccountSettingsActions > tbody > tr > td { width: auto !important; padding: 0; }
.Content .LumeraAccountSettingsActions > tbody > tr > td[width="100%"] { display: none; }
.Content .LumeraAccountSettingsButton { min-width: 140px; padding: 11px 22px; white-space: nowrap; text-align: center; }
.LumeraSexCurrencyNote { color: var(--lumera-paper-muted); font-size: 12px; }
.LumeraSexFields { display: grid; grid-template-columns: max-content minmax(0, 240px); gap: 14px 18px; align-items: center; padding: 8px; }
.LumeraSexFields label { font-weight: 600; }
.LumeraSexFields select { width: 100%; }
.LumeraSexActions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.LumeraSexActions .LumeraAccountButton { min-width: 140px; text-align: center; }
@media (max-width: 480px) {
  .LumeraSexFields { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; }
}
.Content .LumeraAccountCoins, .Content .LumeraAccountLogout { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 3px double #b39a6b; text-align: center; text-decoration: none; font: 600 12px/1.4 Inter, sans-serif; cursor: pointer; }
.Content .LumeraAccountCoins { background: #f0d298; color: #23152e; }
.Content .LumeraAccountLogout { background: transparent; color: var(--lumera-paper-muted); }
.Content .LumeraAccountOverview .premiumbenefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 14px 0 0; border-top: 1px solid #c7bca7; }
.Content .LumeraAccountOverview .premiumbenefits > div { display: flex; align-items: center; gap: 8px; justify-content: flex-start !important; font-size: 11px; line-height: 1.5; }
.Content .LumeraAccountOverview .premiumbenefits img { flex: 0 0 32px; width: 32px; height: 32px; margin: 0 !important; image-rendering: pixelated; }
.Content [id="account/manage"] .TableContainer:not(.LumeraAccountOverview) { border: 3px double #c7bca7; }
.Content [id="account/manage"] .BigButtonText { border: 3px double #a98d5f; padding: 10px 14px !important; }
.Content [id="account/manage"] .TableContent td { line-height: 1.6; }
@keyframes lumera-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lumera-online-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 4px rgba(93,210,157,.14); } 50% { opacity: .5; box-shadow: 0 0 0 8px rgba(93,210,157,0); } }
@keyframes lumera-light-sweep { 0%,55% { transform: translateX(-180%) skewX(-20deg); opacity: 0; } 60% { opacity: 1; } 85%,100% { transform: translateX(350%) skewX(-20deg); opacity: 0; } }
@keyframes lumera-cta-glow { 0%,100% { box-shadow: 0 0 0 rgba(255,215,122,0); } 50% { box-shadow: 0 0 16px rgba(255,215,122,.55), inset 0 0 8px rgba(255,255,255,.25); } }
@keyframes lumera-wiki-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(244, 203, 118, 0); }
  50% { text-shadow: 0 0 7px rgba(244, 203, 118, .78), 0 0 14px rgba(244, 203, 118, .32); }
}
#Loginbox { display: flex; gap: 0; padding: 0; border-bottom: 1px solid #c7bca7; }
#Loginbox a { flex: 1; padding: 13px 6px; color: #493c2d; font-size: 12px; font-weight: 700; text-align: center; }
#Loginbox a + a { border-left: 1px solid #c7bca7; }
#DownloadBox.SmallMenuBox { padding: 12px; }
.LumeraDownloadLink { display: block; border: 3px double #9d8562; padding: 10px; text-align: center; color: #fff8e7; background: #3e3047; font-size: 12px; font-weight: 700; }
.LumeraDownloadLink:hover { color: #fff; background: #584361; }
#Menu { padding: 0 0 10px; }
.menuitem { margin: 0 0 12px; border: 4px double #b39a6d; background: var(--lumera-parchment); box-shadow: 0 4px 0 #0004; }
.MenuButton { height: 60px; border-radius: 0; border: 0; background: var(--lumera-parchment) !important; }
.MenuButton:hover { background: #dcd0bb !important; }
.MenuButton > div { padding: 0 12px; }
.MenuButton .Icon { flex-basis: 42px; width: 42px; height: 42px; margin-right: 10px; }
.LumeraMenuLabel { color: #493c2d; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 600; }
.MenuButton { cursor: pointer; }
.LumeraMenuLabel { flex: 1; }
.LumeraMenuLabel::after { content: "+"; float: right; font-family: Inter, sans-serif; font-size: 15px; font-weight: 400; color: #897348; }
[aria-expanded="true"] > .MenuButton .LumeraMenuLabel::after { content: "−"; }
.Submenu { margin: 0; padding: 6px 0; border-left: 0; border-top: 1px solid #c7bca7; }
.Submenuitem { min-height: 32px; border-radius: 0; }
.Submenuitem:hover { background: #e5dccb !important; }
.SubmenuitemLabel { color: #584e40 !important; font-weight: 500; font-size: 12px; padding: 7px 14px 7px 48px; }
.Submenu a:hover .SubmenuitemLabel { color: #155760 !important; }
.Submenu .Submenuitem[style*="color: white"] .SubmenuitemLabel { color: #493c2d !important; font-weight: 700; }
.ActiveSubmenuItemIcon { top: 13px; left: 28px; width: 6px; height: 6px; border-radius: 0; transform: rotate(45deg); background: #87683c !important; box-shadow: none; }
#ThemeboxesColumn { padding: 0; border: 0; background: transparent; box-shadow: none; }
#RightArtwork, .LumeraRanking, .LumeraWorldUtilities { border: 4px double #bdb09b; background: var(--lumera-parchment); box-shadow: 0 4px 0 rgba(7, 18, 28, .4); }
#RightArtwork { border-radius: 0; color: var(--lumera-ink); }
#RightArtwork .LumeraDailyHeader strong, #RightArtwork .LumeraDailyNames { color: #493c2d; }
#RightArtwork .LumeraDailyHeader span, #RightArtwork .LumeraDailyNames small { color: var(--lumera-paper-muted); }
#Themeboxes { margin-top: 18px; }
.LumeraRanking { margin-bottom: 18px; }
.LumeraRanking h2, .LumeraWorldUtilities h2 { margin: 0; padding: 14px 14px 11px; border-bottom: 1px solid #c7bca7; color: #493c2d; font: 700 20px/1.35 "Lumera Display", Georgia, serif; }
.LumeraRanking ol { list-style: none; margin: 0; padding: 0 10px; }
.LumeraRanking li + li { border-top: 1px solid #d8cebc; }
.LumeraRanking li a { display: flex; align-items: center; gap: 4px; min-height: 64px; color: #493c2d; text-decoration: none; }
.LumeraRankNumber { width: 18px; color: #897348; font-size: 11px; }
.LumeraRanking li img { flex: 0 0 58px; width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.LumeraRankPlayer { display: grid; gap: 3px; min-width: 0; }
.LumeraRankPlayer strong { font-size: 12px; overflow-wrap: anywhere; }
.LumeraRankPlayer small { color: var(--lumera-paper-muted); font-size: 11px; }
.LumeraRankingAll { display: block; margin: 0 10px 12px; padding: 10px 2px; border: 3px double #b8aa95; color: #493c2d; font-size: 11px; font-weight: 700; text-align: center; }
.LumeraWorldUtilities { margin-bottom: 18px; color: #493c2d; }
.LumeraWorldUtilities section { padding: 12px 14px; }
.LumeraWorldUtilities section + section { border-top: 1px solid #c7bca7; }
.LumeraWorldUtilities h3 { margin: 0 0 8px; font: 600 15px/1.5 Inter, "Segoe UI", Arial, sans-serif; color: #493c2d; }
.LumeraWorldUtilities p { margin: 0; font-size: 12px; }
.LumeraWorldUtilities a { color: #176874; font-size: 12px; }
.LumeraWorldUtilities input { width: 100%; padding: 9px; border: 1px solid var(--lumera-field-border); background: var(--lumera-field); color: #493c2d; font: inherit; font-size: 12px; }
.LumeraWorldUtilities button { width: 100%; margin-top: 7px; padding: 8px; border: 3px double #b8aa95; background: #e5dccb; font: inherit; font-size: 12px; color: #493c2d; }
.LumeraRashid { display: flex; align-items: center; gap: 10px; }
.LumeraRashid img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
#LumeraServerSave { display: block; font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.Content .TableContainer { margin-bottom: 18px; border: 1px solid #c7bca7; background: var(--lumera-parchment); }
.Content .TableContainer .CaptionContainer, .Content .TableContainer .CaptionInnerContainer {
  height: auto !important; min-height: 0; background: #e5dccb !important;
}
.Content .TableContainer .CaptionInnerContainer { padding: 12px 14px; border-bottom: 1px solid #c7bca7; }
.Content .TableContainer .CaptionContainer .Text { margin: 0; padding: 0; color: #493c2d; font: 600 16px/1.5 Inter, "Segoe UI", Arial, sans-serif; }
.Content .CaptionContainer span[class^="Caption"], .Content [class^="TableShadow"] { display: none; }
.Content .TableContainer .InnerTableContainer { padding: 12px; }
.Content .TableContainer table { font-size: 13px; }
.Content .TableContainer .TableContentContainer { border: 0; }
.Content .TableContainer .TableContentContainer { height: auto; margin: 0; background: transparent; box-shadow: none; }
.Content .TableContainer :is(.Table1,.Table2,.Table3,.Table4,.Table5) { border: 0; background: transparent; }
.Content .TableContainer .TableContentAndRightShadow { margin: 0; background: none !important; }
.Content .TableContainer .InnerTableContainer { margin: 0; }
.Content .TableContainer .TableContent { border: 0 !important; }
.Content .TableContainer td { padding: 6px; }
.Content .BigButton { width: auto; min-width: 125px; height: auto; margin: 3px 0; background: none !important; }
.Content .BigButton > div { height: auto; }
.Content .BigButtonOver { display: none; }
.Content .BigButtonText { position: static; display: block; width: 100%; height: auto; min-height: 40px; padding: 10px 14px !important; border: 3px double #a98d5f; cursor: pointer; border-radius: 0 !important; font: 600 12px/1.4 Inter, sans-serif; color: #fff8e7; text-shadow: none; background: #3e3047 !important; }
.Content .TableContainer img { max-width: 100%; }
.Content .BoxContent :is(p,td,span,div,a,li) { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.Content .BoxContent :is(h1,h2,h3,h4) { font-family: "Lumera Display", Georgia, serif; }
.Content .BoxContent h1 { font-size: 28px; }
.Content .BoxContent .CaptionContainer .Text { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.Content .LumeraCharacterVitals > tbody > tr > .LumeraCharacterEquipment { width: 216px; min-width: 216px; vertical-align: top; }
.LumeraInventory { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; width: max-content; margin: 10px auto; }
.LumeraInventorySlot, .LumeraInventoryStat { width: 48px; height: 48px; background: #292929; border: 1px solid #808080; display: flex; align-items: center; justify-content: center; }
.Content .LumeraInventorySlot img { display: block; width: 32px !important; height: 32px !important; min-width: 32px; max-width: none; object-fit: contain; image-rendering: pixelated; }
.LumeraInventoryStat { flex-direction: column; gap: 3px; padding: 2px; color: #fff8e7; font-size: 10px; line-height: 1.2; }
.LumeraInventoryStat strong { font-size: 11px; font-weight: 600; }
.Content .BoxContent, #HelperDivContainer, [style*="scroll.gif"] {
  background-image: none !important; background-color: var(--lumera-parchment) !important;
}
/* The darker canvas belongs outside panels, never to menus or inner cards. */
.Content #ContentHelper > .Box { background-color: var(--lumera-canvas); }
.Content #ContentHelper > .Box > .Border_2 > .Border_3 > .BoxContent { background-color: var(--lumera-canvas) !important; }
#HelperDivContainer { color: #493c2d; }
.Content :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea),
.LumeraWorldUtilities input { background-color: var(--lumera-field) !important; border-color: var(--lumera-field-border); }
.Content input:-webkit-autofill, .LumeraWorldUtilities input:-webkit-autofill {
  -webkit-text-fill-color: #493c2d; caret-color: #493c2d;
  box-shadow: inset 0 0 0 1000px var(--lumera-field);
}
.Content .BoxContent :is(.TableContent, .TableContentContainer, .InnerTableContainer) { background-image: none !important; }
.Content .NewsHeadlineBackground, .Content #News .NewsHeadlineBackground, .Content #FeaturedArticle .NewsHeadlineBackground { border-radius: 0; background: #3e3047 !important; }
.Content #News .NewsHeadlineText, .Content #News .NewsHeadlineDate { position: static; display: inline-block; padding: 10px 8px; }
.Content .SmallBox .Message, .Content .SmallBox .MessageContainer { height: auto; }
.Content .SmallBox { margin: 12px 0; }
.LumeraScoreFilters { display: flex; gap: 18px; margin: 20px 0; }
.LumeraScoreFilters label { flex: 1; font-size: 12px; }
.LumeraScoreFilters select { display: block; width: 100%; margin-top: 6px; }
.LumeraScoreTable { overflow-x: auto; border: 1px solid #c7bca7; }
.LumeraScoreTable table { width: 100%; min-width: 510px; border-collapse: collapse; }
.LumeraScoreTable th { background: #3e3047; font-size: 11px; padding: 10px 8px; text-align: left; }
.LumeraScoreTable td { padding: 8px; border-bottom: 1px solid #d8cebc; vertical-align: middle; }
.LumeraScoreTable tr:nth-child(even) { background: var(--lumera-parchment-deep); }
.LumeraScoreTable small { display: block; font-size: 11px; color: var(--lumera-paper-muted); }
.LumeraScoreTable .LumeraScoreValue { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.LumeraScoreTable .LumeraScorePoints { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.LumeraScoreOutfit img { position: static !important; margin: 0 !important; width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.LumeraScorePagination { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0; font-size: 12px; }
.LumeraScoreShortcuts { padding: 12px 0; border-top: 1px solid #c7bca7; font-size: 12px; }
.LumeraScoreShortcuts a { display: inline-block; padding: 8px 12px 8px 0; }
.Content .eventscheduleheadertop { min-width: 0; gap: 12px; align-items: center; }
.Content .eventscheduleheaderblockleft { flex: 1; margin: 0; }
.Content .eventscheduleheaderdateblock { position: static; width: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.Content .eventscheduleheaderdateblock a { color: #493c2d !important; text-decoration: none; padding: 4px 8px; }
.Content .eventscheduleheaderblockright { font-size: 11px; color: var(--lumera-paper-muted); }
.Content #eventscheduletable { box-shadow: none; background: var(--lumera-parchment-deep); }
.Content #eventscheduletable td { padding: 4px; }
.LumeraWorldUtilities label { display: block; margin-bottom: 6px; font-size: 11px; color: var(--lumera-paper-muted); }
.Content input[type="text"], .Content input[type="email"], .Content input[type="password"], .Content input[type="number"], .Content select, .Content textarea, .Content button, .Content input[type="submit"] { border-radius: 0; }
@media (max-width: 1180px) {
  #LumeraHeader { padding: 16px 24px; }
  .LumeraPrimaryNav { display: grid; gap: 0; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(150px,1.25fr) repeat(3,minmax(0,1fr)); }
  .LumeraPrimaryNav a { font-size: 12px; padding: 12px 6px; }
  #ContentRow { grid-template-columns: 200px minmax(0,1fr); }
  #ThemeboxesColumn { grid-column: 2; display: grid; grid-template-columns: 1fr; gap: 0; }
  #Themeboxes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  #LumeraHero { min-height: 0; flex-wrap: wrap; gap: 24px; }
  .LumeraHeroCopy { flex: 0 0 100%; }
  .LumeraPodium { position: static; }
  .LumeraRelics { display: none; }
}
@media (max-width: 820px) {
  #LumeraHeader { padding: 10px 56px; border-radius: 0; min-height: 78px; }
  .LumeraPrimaryNav { display: flex; justify-content: center; }
  .LumeraPrimaryNav > a:not(.LumeraAccountEntry):not(.LumeraServerStatus):not(.LumeraHomeLink) { display: none; }
  .LumeraPrimaryNav .LumeraAccountEntry { min-width: 124px; min-height: 46px; }
  .LumeraMenuToggle { border-radius: 0; }
  .LumeraBrand { justify-content: flex-start; }
  .LumeraBrandIcon { width: 58px; height: 58px; }
  #LumeraHero { min-height: 370px; padding: 12px 4px 28px; }
  #LumeraHero { gap: 22px; align-items: center; }
  .LumeraHeroCopy { flex: auto; }
  .LumeraPodium h2 { margin-bottom: 9px; }
  .LumeraPodiumCard { width: 96px; }
  .LumeraPodiumCard a { min-height: 138px; }
  .LumeraAccountWelcome { margin-bottom: 18px; }
  .Content .LumeraAccountWelcome h2 { font-size: 19px; }
  .Content .LumeraAccountOverview .InnerTableContainer { padding: 10px; }
  .Content .LumeraAccountStatusSummary > tbody > tr { grid-template-columns: 48px minmax(0,1fr); gap: 12px; }
  .Content .LumeraAccountStatusSummary .LumeraAccountActions { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .Content .LumeraAccountOverview .AccountStatusImage { width: 44px; height: 44px; }
  .Content .LumeraAccountPlanDays, .Content .LumeraAccountPlanDays span { font-size: 20px; }
  .Content .LumeraAccountOverview .premiumbenefits { grid-template-columns: 1fr; gap: 12px; }
  .LumeraHeroLogo { width: min(280px, 100%); }
  .LumeraHeroCopy { width: 100%; }
  #ContentRow { display: block; }
  #ThemeboxesColumn { display: block; margin-top: 20px; }
  #Themeboxes { display: block; }
  #MenuColumn { border-radius: 0; color: #493c2d; background: var(--lumera-parchment); }
  .Content .Box { border-radius: 0; }
  #ThemeboxesColumn { padding: 0; }
  .LumeraScoreFilters { flex-direction: column; gap: 12px; }
  .LumeraScoreTable table { min-width: 0; }
  .LumeraScoreTable thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
  .LumeraScoreTable tbody tr { display: grid; grid-template-columns: 22px 48px minmax(0,1fr); gap: 2px 6px; padding: 12px 8px; border-bottom: 1px solid #d8cebc; }
  .LumeraScoreTable td { padding: 0; border: 0; }
  .LumeraScoreTable .LumeraScoreRank { grid-column: 1; grid-row: 1; font-size: 11px; color: #897348; }
  .LumeraScoreTable .LumeraScoreCountry { grid-column: 1; grid-row: 2; }
  .LumeraScoreTable .LumeraScoreOutfit { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .LumeraScoreTable .LumeraScoreName { grid-column: 3; grid-row: 1; overflow-wrap: anywhere; }
  .LumeraScoreTable .LumeraScoreValue { grid-column: 3; grid-row: 2; }
  .LumeraScoreTable .LumeraScorePoints { grid-column: 3; grid-row: 3; }
  .LumeraScoreTable .LumeraScoreValue, .LumeraScoreTable .LumeraScorePoints { text-align: left; font-size: 11px; color: var(--lumera-paper-muted); }
  .LumeraScoreValue::before, .LumeraScorePoints::before { content: attr(data-label) ": "; }
  .Content .eventscheduleheaderblockright { display: none; }
  .Content #eventscheduletable tr:first-child td { font-size: 9px; padding: 3px 1px; }
  .LumeraHeroActions a { padding: 10px 14px; min-height: 44px; }
  .Content .TableContainer .InnerTableContainer { padding: 6px; overflow-x: auto; }
  .Content .TableContainer td { padding: 5px; }
  .Content .TableContainer .BigButton { min-width: 94px; }
  .Content .BigButtonText { font-size: 10px; padding: 7px !important; }
}

@media (max-width: 680px) {
  .Content .LumeraCharacterVitals,
  .Content .LumeraCharacterVitals > tbody { display: block; width: 100% !important; }
  .Content .LumeraCharacterVitals > tbody > tr { display: block; }
  .Content .LumeraCharacterVitals > tbody > tr > td,
  .Content .LumeraCharacterVitals > tbody > tr > .LumeraCharacterEquipment { display: block; width: 100%; min-width: 0; }
}

/* Framed, separate navigation and community panels. */
#MenuColumn { padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
#Loginbox, #DownloadBox { border: 4px double #b39a6d; background: var(--lumera-parchment); margin-bottom: 12px; }
#Menu { padding: 0; }
.LumeraEventCallout, .LumeraDiscordCallout { padding: 22px 16px; margin: 0 0 20px; border: 4px double #b39a6d; background: var(--lumera-parchment); color: #493c2d; text-align: center; box-shadow: 0 4px 0 #0004; }
.LumeraEventCallout h2, .LumeraDiscordCallout h2 { margin: 10px 0; font: 600 17px/1.35 Inter, "Segoe UI", sans-serif; }
.LumeraEventCallout h2 { font-size: 12px; color: var(--lumera-paper-muted); }
.LumeraEventCallout img { filter: drop-shadow(0 3px 5px #b4894340); }
.LumeraEventCallout strong { display: block; margin: 12px 0; font-size: 23px; font-weight: 700; line-height: 1.25; color: #3e3047; }
.LumeraEventCallout p { margin: 8px 0 0; font-size: 12px; }
.LumeraEventCallout small { display: block; margin: 5px 0 16px; font-size: 10px; color: var(--lumera-paper-muted); }
.LumeraEventCallout.is-active { border-color: #ae9149; }
.LumeraEventCallout.is-active h2::before { content: ""; display: inline-block; margin: 0 7px 2px 0; width: 7px; height: 7px; border-radius: 50%; background: #39865f; }
.LumeraEventCallout a { display: block; padding: 10px 6px; border-top: 1px solid #c7bca7; color: #64476d; font-size: 11px; font-weight: 700; text-decoration: none; }
.LumeraDiscordCallout { background: var(--lumera-plum); color: #f1eadb; border-color: var(--lumera-frame); }
.LumeraDiscordCallout img { filter: brightness(0) invert(1); opacity: .92; }
.LumeraDiscordCallout p { margin: 10px 0 18px; font-size: 12px; color: #c8bace; }
.LumeraDiscordCallout a, .LumeraCoinsCallout a { display: block; padding: 12px 8px; border: 3px double #b99759; background: #efd398; color: #23152e; font-size: 12px; font-weight: 700; text-decoration: none; }
.LumeraDiscordCallout a:hover, .LumeraCoinsCallout a:hover { background: #ffe1a0; }
.LumeraCoinsCallout { padding: 22px 16px; border: 4px double #b39a6d; background: var(--lumera-parchment); color: #493c2d; text-align: center; }
.LumeraCoinsCallout > img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.LumeraCoinsCallout h2 { margin: 5px 0; font: 600 17px/1.35 Inter, sans-serif; }
.LumeraCoinsCallout p { margin: 6px 0 16px; font-size: 12px; }
.LumeraCoinsCallout a { animation: lumera-cta-glow 3s ease-in-out infinite; }
.Content .LumeraUiHeading { font-family: Inter, "Segoe UI", Arial, sans-serif !important; font-weight: 600 !important; letter-spacing: normal !important; }
.Content [id="account/manage"] .InnerTableButtonRow div[style*="inline-flex"] { flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) {
  #LumeraHeader { padding: 14px 12px 22px; min-height: 122px; }
  .LumeraPrimaryNav { display: flex; justify-content: flex-start; }
  .LumeraPrimaryNav > a.LumeraHomeLink { display: flex; padding: 10px 0; min-height: 44px; font-size: 11px; }
  .LumeraPrimaryNav .LumeraAccountEntry { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 124px; min-width: 0; font-size: 11px; }
  .LumeraServerStatus { display: flex; }
  .LumeraServerStatus strong { font-size: 9px; }
  .LumeraPrimaryNav a.LumeraServerStatus { position: absolute; right: 6px; bottom: 0; min-height: 44px; padding: 4px 6px; gap: 7px; border-left: 0; }
  .LumeraMenuToggle { position: absolute; right: 12px; top: 14px; }
  #MenuColumn { background: var(--lumera-parchment); padding: 16px; }
}
/* Keep all sidebar gaps in the layout, not in competing legacy margins. */
#MenuColumn, #Menu, #ThemeboxesColumn, #Themeboxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#MenuColumn > *, #Menu > .menuitem, #ThemeboxesColumn > *, #Themeboxes > * { margin: 0; }
#MenuColumn > *, #ThemeboxesColumn > *, #Themeboxes > * { flex-shrink: 0; }
#MenuColumn #DownloadBox.SmallMenuBox { margin: 0; }
#Menu { width: 100%; }
#Themeboxes { margin-top: 0; }

/* The original 64px outfit GIF places the 32px sprite in its lower-right cell. */
.LumeraPodiumOutfit { position: relative; display: block; width: 64px; height: 64px; flex: 0 0 64px; }
.LumeraPodiumOutfit img { position: absolute; left: -16px; top: -16px; }

/* Double-line, stepped-corner frames, matching the supplied game-site reference. */
:is(#LumeraHeader, #Loginbox, #DownloadBox, #Menu .menuitem, #RightArtwork,
    .LumeraEventCallout, .LumeraCoinsCallout, .LumeraDiscordCallout,
    .LumeraWorldUtilities, .Content > .Box, .LumeraPlace1, .LumeraPlace2) {
  border: 10px solid transparent;
  border-image: url("images/frame.svg") 14 / 24px stretch;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px,
    100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px),
    0 calc(100% - 6px), 0 6px, 6px 6px);
}
#LumeraHeader, .LumeraDiscordCallout { border-image-source: url("images/frame-plum.svg"); }
.LumeraPlace1 { border-image-source: url("images/frame-gold.svg"); }
.LumeraPlace2 { border-image-source: url("images/frame-silver.svg"); }
#Bodycontainer #LumeraHeader, #LumeraHero .LumeraPlace1, #LumeraHero .LumeraPlace2 { border-image-width: 10px; }
.LumeraPlace3 { padding: 10px; }
.LumeraPodiumCard a { padding-left: 4px; padding-right: 4px; }
#Loginbox a { padding-inline: 4px; }
.menuitem .MenuButton > div { padding-inline: 20px; }
.menuitem .MenuButton { background: transparent !important; }
.menuitem .MenuButton:hover { background: #dcd0bb66 !important; }
#MenuColumn #Loginbox, #MenuColumn #DownloadBox, #Menu .menuitem { border-image: url("images/frame-thin.svg") 14 / 10px stretch; }
#Menu .menuitem:has(> [aria-expanded="true"]) { border-image: url("images/frame.svg") 14 / 24px stretch; }
#Menu .menuitem:not(:has(> [aria-expanded="true"])) .MenuButton > div { padding-inline: 8px; }

/* Shared news headings work for every article, including new publications. */
.Content .LumeraNewsArticle { margin: 24px 0 32px; }
.Content #News .LumeraNewsHeader, .Content .LumeraNewsHeader {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px;
  align-items: center; padding: 16px 18px; margin: 0 0 20px; min-height: 0;
}
.Content #News .LumeraNewsHeader .NewsHeadlineIcon,
.Content .LumeraNewsHeader .NewsHeadlineIcon {
  position: static; width: 32px; height: 32px; margin: 0; image-rendering: pixelated;
}
.Content #News .LumeraNewsHeader .NewsHeadlineDate,
.Content .LumeraNewsHeader .NewsHeadlineDate {
  position: static; display: block; margin: 0 0 4px; padding: 0;
  color: #c9b9cc; font: 400 11px/1.4 Inter, sans-serif;
}
.Content #News .LumeraNewsHeader .NewsHeadlineText,
.Content .LumeraNewsHeader .NewsHeadlineText {
  position: static; display: block; width: auto; height: auto; margin: 0; padding: 0;
  color: #fff8e7; font: 600 19px/1.4 Inter, sans-serif;
  white-space: normal; overflow-wrap: anywhere;
}
.Content #News .LumeraNewsHeader .NewsHeadlineAuthor,
.Content .LumeraNewsHeader .NewsHeadlineAuthor {
  position: static; grid-column: 2; padding: 0; margin: -4px 0 0;
  color: #c9b9cc; font: 400 11px/1.5 Inter, sans-serif;
}
.Content .LumeraNewsBody { padding: 0 8px; }
.LumeraNewsComments { padding: 14px 8px 0; text-align: right; font-size: 12px; }
.Content .NewsHeadline:not(:has(.LumeraNewsHeader)) .NewsHeadlineBackground {
  display: flex; align-items: center; justify-content: center; padding: 14px 18px;
  margin: 12px 0 16px; min-height: 58px; height: auto;
}
.Content .NewsHeadlineBackground > table { width: 100%; margin: 0; }
.Content .NewsHeadlineBackground > table td { padding: 0; font: 600 17px/1.4 Inter, sans-serif; }

.Content .LumeraAccountDownload {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center;
  gap: 16px; padding: 22px; margin: 24px 0;
  border: 10px solid transparent; border-image: url("images/frame.svg") 14 / 24px stretch;
  background: var(--lumera-parchment);
}
.Content .LumeraAccountDownload > img { width: 56px; height: 56px; image-rendering: pixelated; }
.Content .LumeraAccountDownload h2 { margin: 0 0 8px; font: 600 19px/1.4 Inter, sans-serif; }
.Content .LumeraAccountDownload p { margin: 0; font-size: 13px; color: var(--lumera-paper-muted); }
.Content .LumeraAccountDownload > a { grid-column: 2; justify-self: start; margin: 0; padding: 12px 20px; }
.LumeraDownloadTerms { padding: 12px 16px; font-size: 13px; line-height: 1.75; }
.LumeraDownloadAgreement { display: flex; justify-content: center; margin: 24px 0 8px; }
.LumeraDownloadPage { padding: 8px; color: #493c2d; }
.LumeraDownloadIntro {
  display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); align-items: center;
  gap: 34px; padding: 34px; border: 10px solid transparent;
  border-image: url("images/frame.svg") 14 / 24px stretch; background: var(--lumera-parchment);
}
.LumeraDownloadLogoCrop {
  width: min(330px, 100%); aspect-ratio: 436 / 300; margin: 0 auto;
  background: url("images/lumera-logo.png") left center / auto 100% no-repeat;
}
.LumeraDownloadCopy { min-width: 0; }
.LumeraDownloadEyebrow, .LumeraDownloadDialogEyebrow {
  display: block; margin-bottom: 8px; color: #8a682f; font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.Content .LumeraDownloadCopy h2, .Content .LumeraDownloadDialog h2 {
  margin: 0 0 10px; color: #34243d; font: 700 24px/1.25 Inter, "Segoe UI", sans-serif;
}
.LumeraDownloadCopy p { margin: 0 0 20px; max-width: 500px; font-size: 13px; line-height: 1.7; }
.Content .LumeraDownloadButton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px;
  border: 3px double #b08b45; background: #3e3047; color: #fff8e7; font: 700 13px/1.4 Inter, sans-serif;
  text-decoration: none;
}
.Content .LumeraDownloadButton:is(:hover, :focus-visible) { background: #584361; color: #fff; }
.LumeraDownloadCopy > small { display: block; margin-top: 9px; color: #786a55; font-size: 10px; }
.LumeraDownloadSummary {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; align-items: center;
  margin: 16px 0 0; padding: 16px 18px; border-left: 3px solid #ad8c58; background: #e5dac4;
  font-size: 12px; line-height: 1.55;
}
.LumeraDownloadSummary strong { color: #3e3047; }
.LumeraDownloadDialog {
  width: min(560px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; box-sizing: border-box;
  padding: 32px; border: 4px double #b08b45; color: #493c2d; background: #f1eadb;
  box-shadow: 0 24px 80px rgba(15, 8, 20, .55); font-family: Inter, "Segoe UI", sans-serif;
}
.LumeraDownloadDialog::backdrop { background: rgba(15, 8, 20, .74); backdrop-filter: blur(2px); }
.LumeraDownloadDialog:not([open]) { display: none; }
.LumeraDownloadDialogClose { position: absolute; top: 10px; right: 10px; margin: 0; }
.LumeraDownloadDialogClose button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
  color: #5d4a35; background: transparent; font: 400 28px/1 Inter, sans-serif; cursor: pointer;
}
.LumeraDownloadDialog > p { margin: 0; font-size: 13px; line-height: 1.65; }
.LumeraDownloadSteps { display: grid; gap: 12px; margin: 22px 0; padding: 0; list-style: none; }
.LumeraDownloadSteps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.LumeraDownloadSteps li > span {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #b08b45;
  color: #f0d298; background: #3e3047; font-size: 12px; font-weight: 700;
}
.LumeraDownloadSteps strong, .LumeraDownloadSteps small { display: block; }
.LumeraDownloadSteps strong { margin: 1px 0 3px; color: #34243d; font-size: 13px; }
.LumeraDownloadSteps small { color: #6f604c; font-size: 11px; line-height: 1.5; }
.LumeraDownloadSteps code { padding: 1px 4px; background: #ded1b9; color: #34243d; font-size: 10px; }
.LumeraDownloadDialogActions { display: flex; align-items: stretch; gap: 10px; }
.LumeraDownloadDialogActions form { display: flex; margin: 0; }
.Content .LumeraDownloadCancel {
  min-height: 48px; padding: 10px 18px; border: 1px solid #a99a81; color: #493c2d;
  background: transparent; font: 600 12px/1.4 Inter, sans-serif; cursor: pointer;
}
.Content .LumeraDownloadCancel:is(:hover, :focus-visible) { background: #e3d7c0; }
.LumeraDownloadDialog .LumeraDownloadNotice { margin-top: 16px; color: #786a55; font-size: 10px; }

@media (max-width: 820px) {
  .Content #News .LumeraNewsHeader, .Content .LumeraNewsHeader { padding: 14px 12px; gap: 10px; }
  .Content #News .LumeraNewsHeader .NewsHeadlineText,
  .Content .LumeraNewsHeader .NewsHeadlineText { font-size: 17px; }
  .Content .LumeraAccountDownload { padding: 16px 12px; gap: 12px; }
  .Content .LumeraAccountDownload h2 { font-size: 17px; }
  .Content .LumeraAccountDownload > a { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .LumeraDownloadIntro { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 18px; text-align: center; }
  .LumeraDownloadLogoCrop { width: min(260px, 82%); }
  .LumeraDownloadCopy p { margin-inline: auto; }
  .Content .LumeraDownloadButton { width: 100%; box-sizing: border-box; }
  .LumeraDownloadSummary { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .LumeraDownloadDialog { padding: 28px 18px 20px; }
  .Content .LumeraDownloadDialog h2 { padding-right: 26px; font-size: 20px; }
  .LumeraDownloadDialogActions { flex-direction: column; }
  .LumeraDownloadDialogActions form, .Content .LumeraDownloadCancel { width: 100%; }
}
.LumeraPodium ol { gap: 12px; }
.LumeraPodiumCard { width: 132px; }
#LumeraHero .LumeraPlace1 { border-image-source: url("images/frame-gold.svg"); background: #f3e7cb; }
#LumeraHero .LumeraPlace2 { border-image-source: url("images/frame-silver.svg"); background: #eeece3; }
#LumeraHero .LumeraPlace3 {
  padding: 0; border: 10px solid transparent;
  border-image: url("images/frame-bronze.svg") 14 / 10px stretch;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px,
    100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px),
    0 calc(100% - 6px), 0 6px, 6px 6px);
}
.LumeraPodiumCard a {
  display: grid; grid-template-rows: 16px 44px minmax(28px, auto) minmax(14px, auto);
  justify-items: center; align-items: center; justify-content: stretch;
  min-height: 148px; padding: 10px 6px 18px; gap: 6px;
}
.LumeraPodiumPlace { position: static; transform: none; padding: 0 5px; font-size: 12px; line-height: 16px; z-index: 3; }
.LumeraPodiumCard strong { width: 100%; min-height: 28px; font-size: 11px; line-height: 1.3; }
.LumeraPodiumCard small { width: 100%; line-height: 14px; white-space: normal; }
.LumeraPlace1 .LumeraPodiumPlace { color: #785520; font-weight: 700; }
.LumeraPlace2 .LumeraPodiumPlace { color: #687280; }
.LumeraPodiumOutfit { width: 44px; height: 44px; flex-basis: 44px; }
.LumeraPodiumOutfit img { left: -26px; top: -26px; }
.LumeraGuildPodium .LumeraPodiumCard img, .LumeraUnknownGuild { width: 44px; height: 44px; margin: 0; }
.LumeraPodiumCard::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: .28;
  border: 12px solid transparent; border-image: url("images/frame-ornaments.svg") 28 / 12px stretch;
}
#RightArtwork { padding: 20px 14px; }
#RightArtwork #Creature, #RightArtwork #Boss {
  position: static; top: auto; left: auto; align-self: center; justify-self: center;
}
#RightArtwork #Creature { transform: translateX(-16px); }
.LumeraEventCallout, .LumeraCoinsCallout, .LumeraDiscordCallout { position: relative; padding: 26px 18px; }
.LumeraPlace1::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, #ffd66a55 42%, #fff6cba6 50%, #ffd66a55 58%, transparent 75%);
  animation: lumera-podium-sweep 4s ease-in-out infinite;
}
.LumeraPodiumGlow {
  position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
  pointer-events: none; z-index: 2; overflow: visible;
}
.LumeraPodiumGlow path { fill: none; stroke: #e9bd62; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.LumeraPodiumGlow .LumeraPodiumGlowRunner {
  stroke: #fff3b0; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 14 86;
  filter: drop-shadow(0 0 3px #ffc94d); animation: lumera-podium-contour 4s linear infinite;
}
@keyframes lumera-podium-contour { to { stroke-dashoffset: -100; } }
@keyframes lumera-podium-sweep {
  0%, 50% { transform: translateX(-110%); }
  85%, 100% { transform: translateX(110%); }
}
.Content .LumeraRegistrationWelcome {
  display: flex; align-items: center; gap: 16px; margin: 22px 0; padding: 20px;
  background: var(--lumera-plum); color: #fff8e7;
}
.Content .LumeraRegistrationWelcome h2 { margin: 0 0 6px; font: 600 23px/1.35 Inter, sans-serif; }
.Content .LumeraRegistrationWelcome p { margin: 0; color: #d4c7d8; font-size: 13px; }
.LumeraRegistrationWelcome img { width: 56px; height: 56px; flex: 0 0 56px; image-rendering: pixelated; }
.Content .LumeraRegistration .TableContainer { border: 10px solid transparent; border-image: url("images/frame.svg") 14 / 10px stretch; }
.Content .LumeraRegistration .TableContent { background: transparent; }
.Content .LumeraRegistration .TableContent > tbody > tr { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 8px; }
.Content .LumeraRegistration .TableContent > tbody > tr > td { width: auto !important; min-width: 0; padding: 6px 4px; }
.Content .LumeraRegistration .TableContent > tbody > tr > td[colspan="2"] { grid-column: 1 / -1; }
.LumeraRegistration :is(input[type="text"], input[type="password"], input:not([type]), select) {
  width: calc(100% - 24px); max-width: 380px; min-height: 42px; padding: 9px 10px;
  border: 1px solid var(--lumera-field-border); border-radius: 0; background: var(--lumera-field); color: #493c2d; font: 400 13px/1.5 Inter, sans-serif;
}
.LumeraRegistration input:focus, .LumeraRegistration select:focus { outline: 2px solid #9d7b47; outline-offset: 2px; }
.Content .LumeraRegistration .LabelV { padding-top: 16px; font-size: 12px; }
.LumeraRegistration .FormFieldError { display: block; color: #973e36; font: 400 11px/1.5 Inter, sans-serif; }
.LumeraRegistration .FormFieldError:empty { display: none; }
.Content .LumeraRegistrationSubmit { padding: 13px 28px; background: #efd398; color: #23152e; font-size: 14px; }
.Content .LumeraFeedback {
  margin: 20px 0; padding: 20px 24px; border: 1px solid #c7bca7;
  border-left: 4px solid #987b46; background: #f3ebd8; color: #493c2d;
  font-size: 13px; line-height: 1.65; height: auto; min-height: 0;
}
.Content .LumeraFeedback h2 { margin: 0 0 10px; font: 600 18px/1.4 Inter, sans-serif; }
.Content .LumeraFeedback ul { margin: 0; padding-left: 20px; }
.Content .LumeraFeedback.is-error { border-left-color: #a9574f; background: #f7e9df; }
.Content .LumeraFeedback.is-success { border-left-color: #5a8867; background: #eaf0e3; }
.LumeraFeedbackActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.Content .LumeraFeedbackSecondary { color: #493c2d; background: transparent; }
.Content .SmallBox, .Content .SmallBox :is(.MessageContainer, .ErrorMessage, .Message) { height: auto !important; min-height: 0 !important; }
.Content .SmallBox :is(.ErrorMessage, .Message) { padding: 18px 18px 18px 48px; font-size: 13px; line-height: 1.6; }
.Content .SmallBox [class^="BoxFrame"] { display: none; }
@media (max-width: 820px) {
  .LumeraPodiumCard { width: min(112px, calc((100vw - 64px) / 3)); }
  .LumeraPodium ol { gap: 8px; }
  .LumeraPodiumCard a { padding-inline: 3px; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
  .LumeraPodiumCard { width: 112px; }
  .LumeraPodium ol { gap: 10px; }
  .LumeraPodiumCard a { padding-inline: 3px; }
}
@media (max-width: 680px) {
  .Content .LumeraRegistration .TableContent > tbody > tr { grid-template-columns: 1fr; gap: 0; }
  .Content .LumeraRegistration .TableContent > tbody > tr > td:empty { display: none; }
  .Content .LumeraRegistration .LabelV { padding-top: 12px; }
  .Content .LumeraRegistration .TableContent > tbody > tr > td[colspan="2"] { grid-column: 1; }
  .LumeraRegistration :is(input[type="text"], input[type="password"], input:not([type]), select) { max-width: none; }
  .Content .LumeraRegistrationWelcome { padding: 16px 12px; gap: 12px; }
  .Content .LumeraRegistrationWelcome h2 { font-size: 19px; }
  .Content .LumeraFeedback { padding: 16px; }
}
/* Individual scale preserves the centered mobile Login transform and layout gaps. */
:is(#Loginbox a, .LumeraPrimaryNav .LumeraAccountEntry, .LumeraHeroActions a,
    .LumeraPodiumCard, .LumeraDownloadLink, .LumeraCoinsCallout a,
    .LumeraDiscordCallout a, .LumeraAccountDownload > a, .LumeraFeedbackActions a,
    button, input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText),
    [role="button"], .LumeraAccountButton, .BigButton) {
  transition: scale 180ms ease, background-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  transform-origin: center;
}
#Loginbox a:is(:hover, :focus-visible) {
  color: #23152e; background-color: #e7d7b7; box-shadow: inset 0 -2px 0 #b08b45;
}
:is(#Loginbox a, .LumeraPrimaryNav .LumeraAccountEntry, .LumeraHeroActions a,
    .LumeraPodiumCard, .LumeraDownloadLink, .LumeraCoinsCallout a,
    .LumeraDiscordCallout a, .LumeraAccountDownload > a, .LumeraFeedbackActions a,
    button, input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText),
    [role="button"], .LumeraAccountButton, .BigButton):focus-visible,
.LumeraPodiumCard:has(a:focus-visible), .BigButton:has(:focus-visible) { scale: 1.035; }
.Content .BigButton:is(:hover, :focus-within) .BigButtonText { background: #584361 !important; color: #fff8e7; }
:is(button, input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText)):is(:hover, :focus-visible) { filter: brightness(1.12); }
@media (hover: hover) and (pointer: fine) {
  :is(#Loginbox a, .LumeraPrimaryNav .LumeraAccountEntry, .LumeraHeroActions a,
      .LumeraPodiumCard, .LumeraDownloadLink, .LumeraCoinsCallout a,
      .LumeraDiscordCallout a, .LumeraAccountDownload > a, .LumeraFeedbackActions a,
      button, input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText),
      [role="button"], .LumeraAccountButton, .BigButton):hover { scale: 1.035; }
}
:is(#Loginbox a, .LumeraPrimaryNav .LumeraAccountEntry, .LumeraHeroActions a,
    .LumeraDownloadLink, .LumeraCoinsCallout a, .LumeraDiscordCallout a,
    .LumeraAccountDownload > a, .LumeraFeedbackActions a, button,
    input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText),
    [role="button"], .LumeraAccountButton, .BigButton):active { scale: .98; }
/* Compact news index and one full publication at a time. */
.Content .LumeraLatestUpdates { margin: 0 0 28px; border: 1px solid #a88d62; background: var(--lumera-parchment); }
.Content .LumeraUpdatesHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--lumera-plum); color: #f0d298; }
.Content .LumeraUpdatesHeader h2 { margin: 0; font: 600 16px/1.4 Inter, sans-serif; }
.Content .LumeraUpdatesHeader a { flex-shrink: 0; color: #f0d298; font-size: 11px; text-decoration: none; }
.Content .LumeraUpdatesHeader a:is(:hover, :focus-visible) { color: #ffe1a0; text-decoration: underline; }
.LumeraUpdatesList { list-style: none; padding: 0; margin: 0; }
.LumeraUpdatesList li + li { border-top: 1px solid #b4a17f; }
.LumeraUpdatesList li:nth-child(even) { background: var(--lumera-parchment-deep); }
.Content a.LumeraUpdateLink { display: grid; grid-template-columns: 24px 86px minmax(0, 1fr) 12px; gap: 12px; align-items: center; min-height: 62px; padding: 12px 16px; color: #493c2d; font-weight: 400; text-decoration: none; transition: background-color 180ms ease; }
.LumeraUpdateLink img { object-fit: contain; image-rendering: pixelated; }
.LumeraUpdateLink time { color: var(--lumera-paper-muted); font-size: 11px; }
.LumeraUpdateSummary { display: block; min-width: 0; }
.LumeraUpdateSummary strong, .LumeraUpdateSummary > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.LumeraUpdateSummary strong { margin-bottom: 3px; font-size: 13px; font-weight: 600; }
.LumeraUpdateSummary > span { font-size: 12px; color: var(--lumera-paper-muted); }
.LumeraUpdateArrow { color: #7b5b2c; font-size: 22px; }
.Content a.LumeraUpdateLink:is(:hover, :focus-visible) { background: #dfc697; color: #23152e; }
#LumeraCurrentNews { scroll-margin-top: 24px; }
.Content [data-home-preview] .LumeraNewsBody { --lumera-news-preview-height: 1100px; }
.Content [data-home-preview] .LumeraNewsBody.is-truncated { max-height: var(--lumera-news-preview-height); overflow: hidden; mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent); }
.LumeraNewsReadMore { margin: 20px 0 8px; text-align: center; }
.LumeraNewsReadMore[hidden] { display: none; }
.Content .LumeraNewsReadMore button { display: inline-block; padding: 12px 30px; border: 3px double #b39a6b; background: #3e3047; color: #f0d298; font: 600 14px/1.4 Inter, sans-serif; cursor: pointer; transition: scale 180ms ease, background-color 180ms ease; }
.Content .LumeraNewsReadMore button:is(:hover, :focus-visible) { background: #584361; }
.Content .LumeraNewsReadMore button:active { scale: .98; }
.Content #LumeraCurrentNews .LumeraNewsArticle { margin-top: 0; }
.LumeraNewsEmpty { padding: 20px 18px; }
.Content .LumeraNewsPagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; padding-top: 20px; border-top: 1px solid #b4a17f; }
.Content .LumeraNewsPagination > :is(a, span[aria-disabled]) { display: block; padding: 12px 10px; text-align: center; font: 600 12px/1.4 Inter, sans-serif; }
.Content .LumeraNewsPagination a { border: 1px solid #ad8c58; background: #3e3047; color: #f0d298; text-decoration: none; transition: scale 180ms ease, background-color 180ms ease; }
.Content .LumeraNewsPagination a:is(:hover, :focus-visible) { background: #584361; }
.LumeraNewsPagination [aria-disabled] { color: var(--lumera-paper-muted); border: 1px solid #b4a17f; }
.LumeraNewsPageCount { font-size: 12px; color: var(--lumera-paper-muted); }
@media (hover: hover) and (pointer: fine) {
  .Content .LumeraNewsPagination a:hover { scale: 1.035; }
  .Content .LumeraNewsReadMore button:hover { scale: 1.035; }
}
@media (max-width: 600px) {
  .Content .LumeraUpdatesHeader { padding: 12px; }
  .Content .LumeraUpdatesHeader h2 { font-size: 14px; }
  .Content a.LumeraUpdateLink { grid-template-columns: 20px minmax(0, 1fr) 12px; gap: 8px; padding: 12px; }
  .LumeraUpdateLink img { grid-column: 1; grid-row: 1 / 3; width: 20px; height: 20px; }
  .LumeraUpdateLink time { grid-column: 2; grid-row: 1; }
  .LumeraUpdateSummary { grid-column: 2; grid-row: 2; }
  .LumeraUpdateArrow { grid-column: 3; grid-row: 1 / 3; }
  .Content .LumeraNewsPagination { gap: 8px; }
  .Content .LumeraNewsPagination > :is(a, span[aria-disabled]) { padding: 12px 6px; font-size: 10px; }
}

.LumeraPurchaseHistory > section { margin-top: 28px; }
.Content .LumeraPurchaseHistory h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; background: #23152e; color: #f0d298; font: 600 16px/1.5 Inter, sans-serif; }
.LumeraPurchaseHistory h2 small { font: 400 12px/1.5 Inter, sans-serif; }
.LumeraHistoryHelp { padding: 14px 18px; border-left: 3px solid #ad8c58; background: #e5dac4; }
.LumeraHistoryHelp strong { display: block; margin-top: 6px; }
.Content .LumeraHistoryCard { margin-top: 14px; padding: 18px; border: 1px solid #b4a17f; background: #f1eadb; }
.LumeraHistoryCard header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #c9bba1; }
.LumeraHistoryStatus { padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.LumeraHistoryStatus.is-paid { background: #dce6d0; color: #2e542e; }
.LumeraHistoryStatus.is-pending { background: #edddb5; color: #69501e; }
.LumeraHistoryStatus.is-failed { background: #edd0c5; color: #79342c; }
.LumeraHistoryStatus.is-closed { background: #e0d8cc; color: #51483e; }
.LumeraHistoryCard dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 16px 0 0; }
.LumeraHistoryCard dt { color: #766851; font-size: 11px; margin-bottom: 3px; }
.LumeraHistoryCard dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
.LumeraHistoryReference { grid-column: 1 / -1; }
.LumeraHistoryReference dd { font-family: monospace; }
.LumeraHistoryEmpty { padding: 18px; background: #f1eadb; border: 1px solid #b4a17f; }
@media (max-width: 480px) { .LumeraHistoryCard dl { grid-template-columns: minmax(0, 1fr); } }

/* The shop leads the sidebar with the theme's plum and warm gold, not white. */
#ThemeboxesColumn .LumeraCoinsCallout { background: linear-gradient(145deg, #38223f, #23152e 75%); border-image-source: url("images/frame-plum.svg"); color: #f0d298; padding: 26px 18px; }
.LumeraCoinsEyebrow { display: block; margin-bottom: 14px; color: #d8c4ac; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.LumeraCoinsCallout > img { width: 64px; height: 64px; filter: drop-shadow(0 0 12px #d5a74070); }
.LumeraCoinsCallout h2 { margin: 10px 0; color: #f0d298; font-size: 24px; font-weight: 700; }
.LumeraCoinsCallout p { margin: 0 0 22px; color: #d8c4ac; font-size: 12px; line-height: 1.65; }
.LumeraCoinsCallout a { padding: 14px 8px; background: #e4b867; font-size: 12px; }
.LumeraCoinsCallout a span { margin-left: 4px; }

@media (prefers-reduced-motion: reduce) {
  .Content .LumeraNewsReadMore button, .Content .LumeraNewsPagination a { scale: none !important; }
  :is(#Loginbox a, .LumeraPrimaryNav .LumeraAccountEntry, .LumeraHeroActions a,
      .LumeraPodiumCard, .LumeraDownloadLink, .LumeraCoinsCallout a,
      .LumeraDiscordCallout a, .LumeraAccountDownload > a, .LumeraFeedbackActions a,
      button, input:is([type="submit"], [type="button"], [type="image"]):not(.BigButtonText),
      [role="button"], .LumeraAccountButton, .BigButton) { scale: none !important; }
  .LumeraPlace1::after, .LumeraPodiumGlowRunner { animation: none !important; }
  .LumeraHeroLogo, .LumeraStatusLight, .LumeraAccountEntry::after, .LumeraHeroActions a, .LumeraWikiLink { animation: none !important; }
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}