:root {
  --night: #090807;
  --panel: rgba(17, 14, 12, .91);
  --panel-soft: rgba(26, 20, 16, .82);
  --gold: #d9a84e;
  --gold-bright: #f2cd79;
  --ember: #c84b22;
  --ivory: #efe7d5;
  --muted: #b7aa95;
  --line: rgba(217, 168, 78, .28);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background-color: var(--night);
  background-image:
    linear-gradient(180deg, rgba(5,4,3,.2) 0%, rgba(7,6,5,.58) 58%, #090807 100%),
    url("images/oblivion-city-bg.png");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body {
  min-height: 100vh;
  color: var(--ivory);
  background: transparent;
  font-family: "Segoe UI", Arial, sans-serif;
}

#ArtworkHelper {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  height: auto;
  background: transparent !important;
}

#Bodycontainer {
  width: min(1380px, 100%);
  min-width: 0;
  max-width: 1380px;
  min-height: 100vh;
  height: auto;
  display: block;
  padding: 0 28px 60px;
}

#ContentRow { position: relative; top: 0; padding-top: 190px; min-height: 100vh; height: auto; }
#ContentRow::after { content: ""; display: table; clear: both; }

#MenuColumn {
  position: absolute;
  top: 190px;
  left: 28px;
  width: 238px;
  margin: 0;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(18,14,11,.95), rgba(9,8,7,.86));
  box-shadow: 0 22px 65px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  font-family: "Segoe UI", Arial, sans-serif;
}

#LeftArtwork {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 620px;
  height: 142px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none;
}

.OblivionLogoImage {
  display: block;
  width: min(590px, 100%);
  height: auto;
  max-height: 142px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .8));
}

#ContentColumn {
  position: relative;
  margin: 0 0 0 278px;
  max-width: 920px;
}

#ThemeboxesColumn { display: none; }

#Loginbox {
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.AccountAction {
  display: grid;
  place-items: center;
  height: 38px;
  color: var(--gold-bright) !important;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-decoration: none !important;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 0 8px;
  transition: transform .2s, border-color .2s, background .2s;
}
.DownloadClientAction {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  grid-column: 1 / -1;
  height: 44px;
  margin-top: 4px;
  color: #e9dfce !important;
  border-color: rgba(217,168,78,.72);
  background: linear-gradient(180deg, #5a1411, #2a0908);
  box-shadow: inset 0 1px rgba(255,236,194,.1), 0 5px 13px rgba(0,0,0,.3);
  padding: 0 14px;
  font-size: 10px;
  letter-spacing: .9px;
}
.DownloadClientAction:hover {
  color: #fff4d6 !important;
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #7a1a14, #3a0c0a);
  box-shadow: inset 0 1px rgba(255,236,194,.16), 0 7px 16px rgba(0,0,0,.38);
}
.DownloadClientIcon {
  display: grid;
  flex: 0 0 17px;
  place-items: center;
  width: 17px;
  height: 17px;
  color: #e7b956 !important;
}
.DownloadClientIcon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.AccountAction:hover { transform: translateY(-1px); border-color: var(--gold); background: rgba(217,168,78,.08); }
.AccountActionPrimary {
  color: #fff7e2 !important;
  background: linear-gradient(#b3261e, #5e0d0b);
  border-color: #d9a84e;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 14px rgba(0,0,0,.35);
}

#Loginbox #LoginTop, #Loginbox #LoginBottom, #Loginbox .LoginBorder,
#Loginbox .Loginstatus:first-of-type { display: none; }
#Loginbox .Loginstatus:has(#LoginstatusText_1) { display: none; }

#Loginbox #LoginButtonContainer, #Loginbox .Loginstatus {
  position: static;
  width: auto;
  height: 38px;
  margin: 0;
  background: none !important;
}

#Loginbox #LoginButton {
  position: static;
  width: 100%;
  height: 38px;
  background: linear-gradient(#b3261e, #5e0d0b) !important;
  border: 1px solid #d9a84e;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 14px rgba(0,0,0,.35);
}

#Loginbox #LoginButton #ButtonText { position: static; width: 100%; height: 100%; }
#Loginbox #LoginButton #ButtonText { background: none !important; }
#Loginbox #LoginButton #ButtonText::after {
  content: "Log in";
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff7e2;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#LoginstatusText_2 { position: static !important; width: 100% !important; height: 38px !important; }
#LoginstatusText_2::after {
  content: "Create account";
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--gold-bright);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
}
#Loginbox #LoginstatusText_2_1, #Loginbox #LoginstatusText_2_2 { display: none !important; background: none !important; }

#Menu, .menuitem, .Submenu { width: 100%; }
#MenuTop, #MenuBottom, .LeftChain, .RightChain, .Lights, .Icon, .Extend { display: none !important; }

.MenuButton {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  background: none !important;
}
.MenuButton > div { height: 100%; display: flex; align-items: center; }
.MenuButton .Button { display: none; }
.MenuButton .Label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  background: none !important;
  color: var(--gold-bright);
  font: 600 12px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
#news_Label::after { content: "News"; }
#account_Label::after { content: "Account"; }
#community_Label::after { content: "Community"; }
#forum_Label::after { content: "Forum"; }
#library_Label::after { content: "World"; }
#shops_Label::after { content: "Shop"; }

.Submenu { background: none !important; }
.Submenu a { text-decoration: none !important; }
.Submenuitem {
  min-height: 34px;
  border-radius: 3px;
  background: transparent !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.SubmenuitemLabel {
  padding: 8px 10px 8px 15px;
  border: 0;
  border-left: 1px solid rgba(217,168,78,.16);
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.Submenuitem:hover {
  background: linear-gradient(90deg, rgba(179,38,30,.34), rgba(217,168,78,.07)) !important;
  box-shadow: inset 3px 0 #d9a84e, 0 3px 10px rgba(0,0,0,.16);
  transform: translateX(3px);
}
.Submenuitem:hover .SubmenuitemLabel {
  color: #fff1cf !important;
  border-left-color: transparent;
  background: transparent !important;
}
.Submenuitem:hover .SubmenuitemLabel * { color: #fff1cf !important; }

.Content { top: 0; }
.Content .Box {
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.48));
}
.Content .Corner-tl, .Content .Corner-tr, .Content .Border_1,
.Content .BorderTitleText, .Content .Border_2, .Content .Border_3,
.Content .Border_4, .Content .CornerWrapper-b, .Content .Corner-bl,
.Content .Corner-br, .Content .Border_5 { background-image: none !important; }
.Content .Corner-tl, .Content .Corner-tr, .Content .Border_1,
.Content .BorderTitleText, .Content .CornerWrapper-b { display: none !important; }
.Content .Border_2, .Content .Border_3, .Content .Border_4 { border: 0; margin: 0; padding: 0; }
.Content .BoxContent {
  min-height: 520px;
  padding: 30px !important;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #d8d0c1;
  background: linear-gradient(145deg, rgba(24,19,16,.95), rgba(10,9,8,.94)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(15px);
  font: 14px/1.6 "Segoe UI", Arial, sans-serif;
}
.Content .BoxContent td { color: #d8d0c1; font: 14px/1.55 "Segoe UI", Arial, sans-serif; }
.Content .BoxContent p,
.Content .BoxContent div:not(.BigButtonOver),
.Content .BoxContent span:not([class*="green"]):not([class*="red"]),
.Content .BoxContent label,
.Content .BoxContent li,
.Content .BoxContent .ff_info,
.Content .BoxContent .ff_infotext,
.Content .BoxContent .ff_smallinfo,
.Content .BoxContent .ff_large,
.Content .BoxContent .ff_pagetext,
.Content .BoxContent .ff_pagetextgrey {
  color: #d8d0c1 !important;
}
.Content .BoxContent .ff_white,
.Content .BoxContent .ff_whitelarge { color: var(--ivory) !important; }
.Content .BoxContent .ff_red,
.Content .BoxContent .ff_pagetextred { color: #e17a55 !important; }
.Content .BoxContent .ff_correct { color: #8fbd83 !important; }
.Content h1, .Content h2, .Content h3 { color: var(--gold-bright); font-family: Georgia, serif; }
.Content a, .Content a:link, .Content a:visited { color: #e5b85f; }
.Content input[type="text"], .Content input[type="password"], .Content input[type="email"], .Content select, .Content textarea {
  max-width: 100%;
  padding: 9px 11px;
  color: var(--ivory);
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(217,168,78,.32);
  border-radius: 3px;
  outline: none;
}
.Content input:not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.Content select, .Content textarea {
  height: 40px;
  width: min(360px, 100%);
  padding: 11px 13px !important;
  font-size: 15px !important;
  line-height: 1.35;
  color: var(--ivory) !important;
  background: rgba(0,0,0,.48) !important;
  border: 1px solid rgba(217,168,78,.34) !important;
}
.Content textarea {
  width: min(640px, 100%);
  min-height: 150px;
  resize: vertical;
}
.Content select { cursor: pointer; }
.Content input[type="submit"], .Content button {
  min-width: 135px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #c28c3c;
  border-radius: 3px;
  color: #fff3d5 !important;
  background: linear-gradient(#b3261e, #5e0d0b) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}
.Content input[type="submit"]:hover, .Content button:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(#d0362a, #761410) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 7px 16px rgba(0,0,0,.38), 0 0 0 1px rgba(242,205,121,.08);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.Content input[type="submit"]:active, .Content button:active {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28);
  transform: translateY(1px);
}
.Content input[type="submit"]:focus-visible, .Content button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
.Content input[type="submit"]:disabled, .Content button:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.45);
  transform: none;
}
.Content input[type="checkbox"], .Content input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  vertical-align: middle;
}
.Content input:focus, .Content select:focus, .Content textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,168,78,.1); }

.TableContainer, .InnerTableContainer, .TableContentContainer { max-width: 100%; }
.TableContainer {
  border: 1px solid var(--line) !important;
  border-radius: 3px;
  overflow: hidden;
  font-size: inherit !important;
  background: rgba(0,0,0,.18) !important;
}
.TableContainer .CaptionContainer,
.TableContainer .CaptionInnerContainer {
  height: auto !important;
  min-height: 36px;
  background: linear-gradient(90deg, #5c1310, #2a0a08) !important;
}
.TableContainer .CaptionInnerContainer { display: flex; align-items: center; padding: 8px 12px !important; }
.TableContainer .CaptionContainer .Text {
  padding: 0 !important;
  color: var(--gold-bright) !important;
  font: 700 13px/1.2 "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .5px;
}
.CaptionContainer span[class^="Caption"] { display: none !important; }
.TableContentContainer { height: auto !important; margin: 0 !important; border-color: var(--line) !important; background: rgba(0,0,0,.22) !important; }
.TableContent, .Table1, .Table2, .Table3, .Table4, .Table5,
.TableContainer table { border-color: var(--line) !important; background: rgba(0,0,0,.16) !important; }
.TableContainer .Odd, .TableContainer tr.Odd,
.BoxContent tr[bgcolor]:nth-child(odd), .BoxContent td[bgcolor]:nth-child(odd) {
  background: rgba(217,168,78,.09) !important;
}
.TableContainer .Even, .TableContainer tr.Even,
.BoxContent tr[bgcolor]:nth-child(even), .BoxContent td[bgcolor]:nth-child(even) {
  background: rgba(255,255,255,.035) !important;
}
.BoxContent td[bgcolor], .BoxContent tr[bgcolor] { background-color: rgba(217,168,78,.07) !important; }
.TableContainer td, .TableContainer th {
  padding: 9px 10px !important;
  border-color: rgba(217,168,78,.18) !important;
  color: #ddd3c2 !important;
  vertical-align: middle;
}
.TableContainer .LabelV { color: var(--gold-bright) !important; vertical-align: middle; }
.TableContainer .LabelH, .BoxContent tr.LabelH {
  color: var(--gold-bright) !important;
  background: rgba(217,168,78,.15) !important;
}
.Content a, .Content a:link, .Content a:visited { color: #e5b85f !important; }
.Content font[color="red"], .Content .red { color: #e17a55 !important; }
.Content font[color="green"], .Content .green { color: #8fbd83 !important; }
.Content font[color="blue"], .Content .blue { color: #83aeca !important; }
.Content font[color="white"], .Content .white { color: var(--ivory) !important; }

.BigButton {
  width: 160px !important;
  height: 42px !important;
  margin: 8px auto;
  border: 1px solid #c28c3c;
  border-radius: 3px;
  background: linear-gradient(#b3261e, #5e0d0b) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.3);
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.BigButton > div { width: 100%; height: 100%; display: grid; place-items: center; }
.BigButtonOver { display: none !important; }
.BigButton:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(#d0362a, #761410) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 7px 16px rgba(0,0,0,.38);
  transform: translateY(-1px);
}
.BigButton:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28); }
.BigButton .ButtonText {
  position: static !important;
  width: 135px !important;
  height: 25px !important;
  object-fit: none;
  object-position: center;
  filter: sepia(1) saturate(.65) brightness(1.75);
  cursor: pointer;
}

.Content input[type="image"]:not(.ButtonText) {
  width: 150px !important;
  height: 38px !important;
  padding: 9px 14px;
  border: 1px solid #c28c3c !important;
  border-radius: 4px;
  background: linear-gradient(#b3261e, #5e0d0b) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.3);
  object-fit: contain;
  filter: sepia(.35) brightness(1.18);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, filter .16s ease;
}
.Content input[type="image"]:not(.ButtonText):hover {
  border-color: var(--gold-bright) !important;
  background: linear-gradient(#d0362a, #761410) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 7px 16px rgba(0,0,0,.38);
  filter: sepia(.2) brightness(1.3);
  transform: translateY(-1px);
}
.Content input[type="image"]:not(.ButtonText):active { transform: translateY(1px); }
.Content input[type="image"]:not(.ButtonText):focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

#Footer {
  clear: both;
  width: 100%;
  margin: 28px auto 0;
  padding: 18px 12px 4px;
  border-top: 1px solid rgba(217, 168, 78, .18);
  color: #8f8372;
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}
.FooterCopyright { color: #d9bd87; font-size: 12px; font-weight: 700; }
.FooterLegal { color: #a99b86; }
.FooterStats { margin-top: 3px; color: #766d61; font-size: 9px; }

.CharacterSearch {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(29, 22, 17, .94), rgba(10, 8, 7, .96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.CharacterSearch h2 {
  margin: 0;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--gold-bright);
  background: linear-gradient(90deg, #5c1310, #2a0a08);
  font-size: 14px;
  letter-spacing: .4px;
}
.CharacterSearch form {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) 140px;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.CharacterSearch label {
  color: #d9bd87 !important;
  font-size: 12px;
  font-weight: 700;
}
.CharacterSearch input {
  width: 100% !important;
  min-height: 42px !important;
}
.CharacterSearch button {
  width: 100%;
  min-height: 42px;
}

.HousesHeader { margin: -3px 0 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.HousesHeader > span { color: #b8893d !important; font-size: 10px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
.HousesHeader h2 { margin: 4px 0 2px; color: var(--gold-bright); font-size: 28px; }
.HousesHeader p { margin: 0; color: var(--muted) !important; }
.HouseFilters {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr auto;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}
.HouseFilters fieldset {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, .24);
}
.HouseFilters legend { padding: 0 6px; color: var(--gold-bright); font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.HouseFilters label { margin-left: 6px; color: #d8cdbb !important; line-height: 1.9; cursor: pointer; }
.HouseFilters button { align-self: end; min-width: 135px; min-height: 42px; margin-bottom: 1px; }
.HouseResults { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .22); }
.HouseResults table { width: 100%; border-collapse: collapse; background: transparent !important; }
.HouseResults th { padding: 11px 13px; color: #f3cf7a; background: linear-gradient(180deg, #7a1a14, #420b09); text-align: left; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.HouseResults td { padding: 10px 13px !important; border-top: 1px solid rgba(217, 168, 78, .12); color: #ddd3c2 !important; background: rgba(255, 255, 255, .025) !important; }
.HouseResults tr:nth-child(even) td { background: rgba(217, 168, 78, .06) !important; }
.HouseResults tr:hover td { background: rgba(217, 168, 78, .12) !important; }

@media (max-width: 560px) {
  .CharacterSearch form { grid-template-columns: 1fr; gap: 8px; }
  .HouseFilters { grid-template-columns: 1fr; }
  .HouseFilters button { width: 100%; }
  .HouseResults { overflow-x: auto; }
}

@media (max-width: 900px) {
  #Bodycontainer { padding: 0 14px 35px; }
  #ContentRow { padding-top: 145px; }
  #LeftArtwork { top: 20px; left: 50%; width: calc(100% - 16px); height: 105px; }
  .OblivionLogoImage { width: min(500px, 100%); max-height: 105px; }
  #MenuColumn { position: relative; top: 0; left: 0; width: 100%; padding: 14px; margin-bottom: 14px; }
  #ContentColumn { margin: 0; max-width: none; }
  #Menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
  #Loginbox { margin-bottom: 8px; }
  .Content .BoxContent { padding: 18px !important; overflow-x: auto; }
  #Footer { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  #Menu { grid-template-columns: 1fr; }
  #Loginbox { grid-template-columns: 1fr; }
  .OblivionLogoImage { width: 100%; }
}

/* Create account */
#createaccount .BoxContent {
  min-height: 0;
  padding: 34px !important;
}
.CreateAccountPage {
  width: min(680px, 100%);
  margin: 4px auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(34,25,19,.94), rgba(11,9,8,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}
.CreateAccountHeader {
  padding: 24px 28px 19px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.CreateAccountHeader > span {
  color: #b8893d !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.CreateAccountHeader h2 { margin: 5px 0 3px; font-size: 27px; }
.CreateAccountHeader p { margin: 0; color: var(--muted) !important; font-size: 12px; }
.CreateAccountIntro {
  padding: 20px 28px;
  border-bottom: 1px solid rgba(217,168,78,.14);
  color: #bdb19f !important;
  font-size: 12px;
  line-height: 1.6;
}
.CreateAccountPage > form { padding: 22px 28px 26px; }
.CreateAccountPage > form > table:first-of-type {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.14) !important;
  overflow: hidden;
}
.CreateAccountPage > form table { width: 100%; background: transparent !important; }
.CreateAccountPage > form tr[bgcolor] > td { background: transparent !important; }
.CreateAccountPage > form > table:first-of-type > tbody > tr:first-child > td {
  padding: 10px 14px !important;
  color: var(--gold-bright) !important;
  background: linear-gradient(90deg, #5c1310, #2a0a08) !important;
  font-size: 12px;
  letter-spacing: .5px;
}
.CreateAccountPage > form td { padding: 5px 7px !important; vertical-align: middle; }
.CreateAccountPage > form td[width="150"] {
  width: 155px !important;
  color: #d8c5a6 !important;
  font-size: 11px;
  text-transform: uppercase;
}
.CreateAccountPage > form input:not([type="image"]):not([type="checkbox"]),
.CreateAccountPage > form select { width: 100% !important; max-width: 390px; }
.CreateAccountPage > form font[size="1"] { color: #8f8372 !important; font-size: 10px; }
.CreateAccountPage #acc_name_check,
.CreateAccountPage #email_check { color: #c7baa6 !important; font-size: 11px; }
.CreateAccountPage textarea { width: 100% !important; min-height: 190px; }
.CreateAccountPage input[type="image"] {
  width: 160px !important;
  height: 42px !important;
  padding: 11px 20px;
  border: 1px solid #c28c3c !important;
  border-radius: 3px;
  background: linear-gradient(#b3261e, #5e0d0b) !important;
  object-fit: contain;
  filter: sepia(1) saturate(.7) brightness(1.55);
}
.CreateAccountActions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 24px 0 2px;
}
.CreateAccountActions .CreateAccountSubmit,
.CreateAccountActions .CreateAccountCancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-height: 46px;
  margin: 0;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s, filter .18s, border-color .18s;
}
.CreateAccountActions .CreateAccountSubmit {
  border: 1px solid #e0aa50;
  color: #fff7e5 !important;
  background: linear-gradient(180deg, #b3261e, #5e0d0b) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 7px 18px rgba(0,0,0,.35);
}
.CreateAccountActions .CreateAccountCancel {
  border: 1px solid rgba(217,168,78,.38);
  color: #dbc9a9 !important;
  background: rgba(217,168,78,.07);
}
.CreateAccountActions .CreateAccountSubmit:hover,
.CreateAccountActions .CreateAccountCancel:hover {
  transform: translateY(-1px);
  filter: brightness(1.13);
  border-color: var(--gold);
}

@media (max-width: 680px) {
  #createaccount .BoxContent { padding: 16px !important; }
  .CreateAccountHeader, .CreateAccountIntro, .CreateAccountPage > form { padding-left: 18px; padding-right: 18px; }
  .CreateAccountPage > form td { display: block; width: 100% !important; }
  .CreateAccountPage > form td[width="150"] { padding: 12px 7px 2px !important; }
  .CreateAccountActions { flex-direction: column; }
  .CreateAccountActions .CreateAccountSubmit,
  .CreateAccountActions .CreateAccountCancel { width: 100%; }
}

/* Download page */
.DownloadPage { padding: 4px 2px; }
.DownloadEyebrow {
  color: #b8893d !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.DownloadPage h2 { margin: 6px 0 8px; font-size: 30px; }
.DownloadPage > p { max-width: 680px; color: #c9bead !important; }
.DownloadCard {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(217,168,78,.1), rgba(0,0,0,.2));
}
.DownloadIcon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(217,168,78,.4);
  border-radius: 50%;
  color: var(--gold-bright) !important;
  background: rgba(0,0,0,.25);
  font-size: 28px;
}
.DownloadIcon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.DownloadDetails { display: flex; flex-direction: column; gap: 4px; }
.DownloadDetails strong { color: var(--ivory); font: 700 18px Georgia, serif; }
.DownloadDetails span { color: var(--muted) !important; font-size: 12px; }
.DownloadPageButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid rgba(226,177,83,.72);
  border-radius: 4px;
  color: #fff4d6 !important;
  background: linear-gradient(180deg, #5a1411, #2a0908);
  box-shadow: inset 0 1px rgba(255,236,194,.12), 0 4px 10px rgba(0,0,0,.28);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.DownloadPageButton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.DownloadPageButton:hover {
  border-color: var(--gold-bright);
  color: #fff8e8 !important;
  background: linear-gradient(180deg, #7a1a14, #3a0c0a);
  box-shadow: inset 0 1px rgba(255,236,194,.18), 0 7px 16px rgba(0,0,0,.38);
  transform: translateY(-1px);
}
.DownloadPageButton:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28); }
.DownloadPageButton:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.DownloadHint { margin-top: 18px; font-size: 12px; color: #928673 !important; }

@media (max-width: 620px) {
  .DownloadCard { grid-template-columns: 48px 1fr; }
  .DownloadIcon { width: 48px; height: 48px; }
  .DownloadPageButton { grid-column: 1 / -1; }
}

/* Account management login */
#accountmanagement .BoxContent {
  min-height: 0;
  padding: 34px !important;
}
.AccountLoginPage {
  width: min(500px, 100%);
  margin: 4px auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(34,25,19,.94), rgba(11,9,8,.96));
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}
.AccountLoginHeader {
  padding: 24px 28px 19px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.AccountLoginHeader > span {
  color: #b8893d !important;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.AccountLoginHeader h2 { margin: 5px 0 3px; font-size: 27px; }
.AccountLoginHeader p { margin: 0; color: var(--muted) !important; font-size: 12px; }
.AccountLoginForm {
  display: grid;
  gap: 16px;
  padding: 23px 28px 25px;
}
.AccountLoginForm label { display: grid; gap: 7px; }
.AccountLoginForm label > span {
  color: #d8c5a6 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.AccountLoginForm input {
  width: 100% !important;
  min-height: 46px !important;
}
.AccountLoginForm button { width: 100%; margin-top: 3px; }
.AccountLoginFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 13px;
  padding: 15px 20px;
  border-top: 1px solid rgba(217,168,78,.14);
  background: rgba(0,0,0,.2);
  font-size: 11px;
}
.AccountLoginFooter span { color: var(--muted) !important; }
.AccountLoginFooter a:last-child {
  padding-left: 13px;
  border-left: 1px solid var(--line);
}

@media (max-width: 560px) {
  #accountmanagement .BoxContent { padding: 18px !important; }
  .AccountLoginHeader, .AccountLoginForm { padding-left: 20px; padding-right: 20px; }
  .AccountLoginFooter a:last-child { width: 100%; padding: 4px 0 0; border: 0; text-align: center; }
}

/* Compact logged-in account overview */
#accountmanagement .BoxContent:has(> .SmallBox) {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 10px;
  padding: 20px !important;
}
#accountmanagement .BoxContent:has(> .SmallBox) > br,
#accountmanagement .BoxContent:has(> .SmallBox) > a[name] {
  display: none;
}
#accountmanagement .BoxContent:has(> .SmallBox) > .SmallBox,
#accountmanagement .BoxContent:has(> .SmallBox) > center {
  grid-column: 1 / -1;
}
#accountmanagement .BoxContent > .SmallBox:first-child {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: max-content;
  max-width: 100%;
  margin: 0 0 10px auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, .22);
  overflow: hidden;
}
#accountmanagement .BoxContent > .SmallBox:first-child .Message {
  min-height: 0 !important;
  height: auto !important;
  padding: 5px !important;
  background: transparent !important;
}
#accountmanagement .BoxContent > .SmallBox:first-child .Message > table,
#accountmanagement .BoxContent > .SmallBox:first-child .Message > table > tbody > tr {
  display: block;
  width: auto !important;
}
#accountmanagement .BoxContent > .SmallBox:first-child .Message > table > tbody > tr > td:first-child:empty {
  display: none;
}
#accountmanagement .BoxContent > .SmallBox:first-child .Message td,
#accountmanagement .BoxContent > .SmallBox:first-child .Message table {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#accountmanagement .BoxContent > .SmallBox:first-child [class^="BoxFrame"] {
  display: none !important;
}
#accountmanagement .BoxContent > .SmallBox:first-child + br {
  display: none;
}
#accountmanagement .BoxContent > center {
  margin: 0;
}
#accountmanagement .BoxContent > .SmallBox:first-child + br + center {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  text-align: left;
}
#accountmanagement .BoxContent > center table,
#accountmanagement .BoxContent > center td {
  background: transparent !important;
}
#accountmanagement .TopButtonContainer {
  display: none;
}
#accountmanagement .TableContainer {
  margin: 0;
}
#accountmanagement .TableContainer .InnerTableContainer {
  margin: 0 !important;
  padding: 8px !important;
}
#accountmanagement .TableContainer td,
#accountmanagement .TableContainer th {
  padding: 7px 9px !important;
}
#accountmanagement .InnerTableButtonRow {
  margin-top: 6px !important;
}
#accountmanagement a[name="Characters"] + .TopButtonContainer + .TableContainer {
  grid-column: 1 / -1;
  order: 30;
}
#accountmanagement a[name="Public+Information"] + .TopButtonContainer + .TableContainer {
  grid-column: 1 / -1;
  order: 10;
}
#accountmanagement a[name="General+Information"] + .TopButtonContainer + .TableContainer {
  grid-column: 1 / -1;
  order: 20;
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) {
  margin: 0;
  border: 1px solid rgba(200, 75, 34, .38);
  border-radius: 4px;
  background: rgba(110, 38, 20, .16);
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) .Message {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px !important;
  background: transparent !important;
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) [class^="BoxFrame"] {
  display: none !important;
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) h3 {
  margin: 0;
  color: #e4b071;
  font-size: 11px;
  line-height: 1.35;
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) td {
  padding: 0 5px !important;
  background: transparent !important;
}
#accountmanagement .BoxContent > .SmallBox:not(:first-child) .LabelV {
  width: 42px;
  color: var(--gold-bright) !important;
}
#accountmanagement .InnerTableButtonRow td:has(form[action*="registeraccount"]) {
  display: none;
}
#accountmanagement .TableShadowContainer,
#accountmanagement .TableShadowContainerRightTop {
  display: none !important;
}
#accountmanagement tr[style*="background-color"] {
  background: rgba(217, 168, 78, .055) !important;
}
#accountmanagement tr[style*="background-color"]:nth-child(even) {
  background: rgba(255, 255, 255, .025) !important;
}
#accountmanagement .TableContent,
#accountmanagement .TableContent > tbody,
#accountmanagement .TableContentContainer,
#accountmanagement .TableContentAndRightShadow {
  background: rgba(5, 4, 3, .38) !important;
}
#accountmanagement .TableContent td {
  color: #ded4c3 !important;
  border-color: rgba(217, 168, 78, .12) !important;
}
#accountmanagement .TableContent .LabelV,
#accountmanagement .TableContent tr.LabelH td {
  color: #e5bd6d !important;
}
#accountmanagement .TableContent tr.LabelH {
  background: linear-gradient(180deg, #5c1310, #2a0a08) !important;
}
#accountmanagement .TableContent tr.LabelH td {
  color: #f3cf7a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .45px;
  text-shadow: 0 1px rgba(255, 221, 155, .2);
}
#accountmanagement font[color="green"] {
  color: #91c783 !important;
}
#accountmanagement font[color="red"] {
  color: #e67b58 !important;
}
#accountmanagement .BigButton {
  width: 150px !important;
  height: 38px !important;
  margin: 4px auto !important;
  border-color: rgba(226, 177, 83, .72) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, #5a1411, #2a0908) !important;
  box-shadow: inset 0 1px rgba(255, 236, 194, .12), 0 4px 10px rgba(0, 0, 0, .28);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
#accountmanagement .BigButton:hover {
  border-color: var(--gold-bright) !important;
  background: linear-gradient(180deg, #7a1a14, #3a0c0a) !important;
  transform: translateY(-1px);
}
#accountmanagement .BigButton .ButtonText {
  filter: brightness(1.22) sepia(.12);
}
#accountmanagement .AccountModernButton {
  width: 150px;
  height: 38px;
  margin: 4px auto;
  border: 1px solid rgba(226,177,83,.72);
  border-radius: 4px;
  color: #f3e5ca !important;
  background: linear-gradient(180deg, #5a1411, #2a0908) !important;
  box-shadow: inset 0 1px rgba(255,236,194,.12), 0 4px 10px rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
#accountmanagement .AccountModernButton > div { position: relative; }
#accountmanagement .AccountModernButton .ButtonText {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}
#accountmanagement .AccountModernButtonLabel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 8px 13px;
  color: #f3e5ca !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .55px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
#accountmanagement .AccountModernButton:hover {
  border-color: var(--gold-bright);
  color: #fff8e8 !important;
  background: linear-gradient(180deg, #7a1a14, #3a0c0a) !important;
  box-shadow: inset 0 1px rgba(255,236,194,.18), 0 7px 16px rgba(0,0,0,.38);
  transform: translateY(-1px);
}
#accountmanagement .AccountModernButton:hover .AccountModernButtonLabel { color: #fff8e8 !important; }
#accountmanagement .AccountModernButton:active {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28);
  transform: translateY(1px);
}
#accountmanagement .AccountModernButton:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
#accountmanagement .InnerTableButtonRow {
  width: auto !important;
}
#accountmanagement .InnerTableButtonRow > tbody > tr {
  display: flex;
  align-items: center;
  gap: 8px;
}
#accountmanagement .InnerTableButtonRow td {
  width: auto !important;
  padding: 0 !important;
}
#accountmanagement .InnerTableButtonRow td:empty {
  display: none;
}
#accountmanagement .CaptionContainer .Text {
  color: #f0ca7b !important;
}
#accountmanagement form[action*="action=createcharacter"] .TableContent tr.LabelH td,
#accountmanagement form[action*="action=createcharacter"] .TableContent tr.LabelH td span {
  color: #f3cf7a !important;
  text-shadow: none !important;
}
#accountmanagement .BoxContent > center td {
  color: #e8decc !important;
}

@media (max-width: 560px) {
  #accountmanagement .BoxContent:has(> .SmallBox) { padding: 12px !important; }
  #accountmanagement .BoxContent:has(> .SmallBox) { grid-template-columns: 1fr; }
  #accountmanagement .BoxContent > .SmallBox:first-child { grid-column: 1; grid-row: auto; margin-left: 0; width: 100%; }
  #accountmanagement .BoxContent > .SmallBox:first-child + br + center { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; }
  #accountmanagement .BoxContent > .SmallBox:first-child .BigButton { margin: 0 auto; }
  #accountmanagement .BoxContent > .SmallBox:not(:first-child) .Message { grid-template-columns: 1fr; }
}

/* Highscores */
#highscores .BoxContent { padding: 34px !important; }
#highscores h2 {
  margin: 0 0 24px;
  color: var(--gold-bright);
  font-size: 27px;
  letter-spacing: -.3px;
}
#highscores .BoxContent table { border-collapse: separate; border-spacing: 0; }
#highscores .BoxContent tr[bgcolor] td {
  padding: 13px 12px !important;
  border-right: 1px solid rgba(217,168,78,.1);
  border-bottom: 1px solid rgba(217,168,78,.1);
  background: rgba(255,255,255,.035) !important;
}
#highscores .BoxContent tr[bgcolor]:nth-child(odd) td { background: rgba(217,168,78,.075) !important; }
#highscores .BoxContent tr[bgcolor]:first-child td {
  color: var(--gold-bright) !important;
  background: linear-gradient(180deg, #4a100d, #220807) !important;
  border-top: 1px solid rgba(217,168,78,.25);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
#highscores .BoxContent tr[bgcolor] td:first-child { border-left: 1px solid rgba(217,168,78,.12); }
#highscores .BoxContent tr[bgcolor]:hover td { background: rgba(217,168,78,.13) !important; }
#highscores .BoxContent td img { vertical-align: middle; }
#highscores .BoxContent td img[title^="Country"] { margin-left: 7px; border-radius: 2px; }
#highscores .BoxContent small { color: #8f8372 !important; }
#highscores .BoxContent font[color="red"] { color: #d7c7ae !important; font-weight: 700; }
#highscores .BoxContent font[color="green"] { color: #91c783 !important; font-weight: 700; }
#highscores .BoxContent a.size_xs {
  display: block;
  margin: 2px 0;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(217,168,78,.06);
  white-space: nowrap;
}
#highscores .BoxContent a.size_xs:hover { background: rgba(217,168,78,.16); }
#highscores .BoxContent a.size_xxs {
  display: inline-flex;
  margin-top: 16px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(217,168,78,.07);
}

/* Experience table */
.ExperienceHeader {
  margin: -4px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ExperienceHeader span {
  color: #b8893d !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}
.ExperienceHeader h2 { margin: 5px 0 3px; font-size: 28px; }
.ExperienceHeader p { margin: 0; color: var(--muted) !important; }
.ExperienceIntro {
  max-width: 720px;
  margin-bottom: 18px;
  color: #c9bead !important;
}
.ExperiencePage > table {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.22) !important;
  overflow: hidden;
}
.ExperiencePage table { border-collapse: separate; border-spacing: 1px; background: transparent !important; }
.ExperiencePage td { color: #d8d0c1 !important; }
.ExperiencePage tr[bgcolor] td {
  padding: 7px 12px !important;
  background: rgba(255,255,255,.035) !important;
  border: 0 !important;
}
.ExperiencePage tr[bgcolor]:nth-child(even) td { background: rgba(217,168,78,.075) !important; }
.ExperiencePage tr[bgcolor]:hover td { background: rgba(217,168,78,.15) !important; }
.ExperiencePage table table tr:first-child td,
.ExperiencePage > table > tbody > tr:first-child > td {
  color: var(--gold-bright) !important;
  background: linear-gradient(180deg, #4a100d, #220807) !important;
  font-size: 11px;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.ExperiencePage table table td:first-child { width: 35%; color: var(--gold-bright) !important; font-weight: 700; }

@media (max-width: 760px) {
  #highscores .BoxContent { padding: 18px !important; }
  #highscores .BoxContent > table > tbody > tr { display: block; }
  #highscores .BoxContent > table > tbody > tr > td { display: block; width: 100% !important; }
  .ExperiencePage > table > tbody > tr > td { display: block; width: 100%; }
}

/* Shared presentation for legacy content pages */
.RulesPage { color: #d8d0c1; }
.RulesHero { position: relative; margin: -4px 0 22px; padding: 4px 0 24px; border-bottom: 1px solid var(--line); overflow: hidden; }
.RulesHero::after { content: ""; position: absolute; top: -65px; right: -30px; width: 210px; height: 210px; border: 1px solid rgba(217,168,78,.12); border-radius: 50%; box-shadow: 0 0 70px rgba(200,75,34,.09), inset 0 0 50px rgba(217,168,78,.04); pointer-events: none; }
.RulesEyebrow { color: #b8893d; font-size: 10px; font-weight: 800; letter-spacing: 2.6px; text-transform: uppercase; }
.RulesHero h2 { margin: 6px 0 7px; color: var(--ivory); font-size: 30px; line-height: 1.1; }
.RulesHero > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.RulesNotice { display: inline-block; margin-top: 17px; padding: 10px 14px; border-left: 3px solid var(--gold); background: rgba(217,168,78,.07); color: #cfc3b0; font-size: 12px; }
.RulesNotice strong { color: var(--gold-bright); }
.RulesIndex { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 22px; }
.RulesIndex a { min-width: 0; padding: 10px 9px; border: 1px solid rgba(217,168,78,.17); border-radius: 4px; background: rgba(0,0,0,.2); color: #d7cbb8 !important; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.RulesIndex a span { display: block; margin-bottom: 3px; color: #a87b36; font-size: 9px; letter-spacing: 1.5px; }
.RulesIndex a:hover { border-color: rgba(242,205,121,.55); background: rgba(217,168,78,.09); transform: translateY(-1px); }
.RulesSections { display: grid; gap: 14px; }
.RulesSection { scroll-margin-top: 20px; border: 1px solid rgba(217,168,78,.2); border-radius: 5px; background: linear-gradient(145deg, rgba(23,18,14,.82), rgba(9,8,7,.48)); overflow: hidden; }
.RulesSectionHeading { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid rgba(217,168,78,.14); background: rgba(217,168,78,.045); }
.RulesSectionHeading > span { color: rgba(242,205,121,.35); font-family: Georgia, serif; font-size: 28px; line-height: 1; }
.RulesSectionHeading h3 { margin: 0 0 3px; color: var(--gold-bright); font-size: 17px; }
.RulesSectionHeading p { margin: 0; color: var(--muted); font-size: 11px; }
.RulesList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.RuleItem { display: flex; gap: 11px; padding: 15px 17px; border-bottom: 1px solid rgba(217,168,78,.09); }
.RuleItem:nth-child(odd) { border-right: 1px solid rgba(217,168,78,.09); }
.RuleLetter { flex: 0 0 24px; width: 24px; height: 24px; padding-top: 4px; border: 1px solid rgba(217,168,78,.3); border-radius: 50%; color: #c99745; font-size: 9px; font-weight: 800; text-align: center; }
.RuleItem h4 { margin: 1px 0 4px; color: #eadfcd; font-size: 12px; }
.RuleItem p { margin: 0; color: #aa9e8c; font-size: 11px; line-height: 1.55; }
.RulesFooter { margin-top: 18px; padding: 17px 19px; border: 1px solid rgba(200,75,34,.26); border-radius: 4px; background: rgba(91,31,17,.12); }
.RulesFooter strong { color: #e7b96a; font-size: 13px; }
.RulesFooter p { margin: 7px 0 0; color: #b9ad9b; font-size: 11px; line-height: 1.6; }

@media (max-width: 760px) {
  .RulesIndex { grid-template-columns: repeat(2, 1fr); }
  .RulesList { grid-template-columns: 1fr; }
  .RuleItem:nth-child(odd) { border-right: 0; }
  .RulesHero h2 { font-size: 25px; }
}

:is(#latestnews, #archive, #lostaccount, #tibiarules, #download, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo, #experiencetable) .BoxContent { color: #d8d0c1; }
:is(#latestnews, #archive, #lostaccount, #tibiarules, #download, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo, #experiencetable) .BoxContent > center:first-child h2,
:is(#latestnews, #archive, #lostaccount, #tibiarules, #download, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo, #experiencetable) .BoxContent > h2:first-child {
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  color: var(--gold-bright); font-size: 27px; text-align: left;
}
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent table {
  max-width: 100%; border-color: rgba(217,168,78,.16) !important; border-collapse: separate;
  border-spacing: 0; color: #d8d0c1; background-color: transparent !important;
}
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent tr[bgcolor],
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent tr[style*="background-color"] { background: rgba(255,255,255,.025) !important; }
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent tr[bgcolor]:nth-child(even),
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent tr[style*="background-color"]:nth-child(even) { background: rgba(217,168,78,.065) !important; }
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent table[width="100%"] > tbody > tr:first-child[bgcolor] { background: linear-gradient(180deg, #5c1310, #2a0a08) !important; }
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent table[width="100%"] > tbody > tr:first-child[bgcolor] > td,
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent table[width="100%"] > tbody > tr:first-child[bgcolor] a,
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent table[width="100%"] > tbody > tr:first-child[bgcolor] font {
  color: #f1ca79 !important; font-weight: 700;
}
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent td,
:is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent th { border-color: rgba(217,168,78,.13) !important; }
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent form > table[width="100%"],
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent form > table[width="100%"] > tbody { background: rgba(7,6,5,.28) !important; }
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent input:not([type="image"]):not([type="hidden"]),
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent select,
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent textarea {
  border-color: rgba(217,168,78,.34) !important; background: rgba(5,4,3,.72) !important; color: var(--ivory) !important;
}
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent input[type="image"]:not(.ButtonText) {
  width: 150px !important; height: 38px !important; padding: 9px 14px;
  border: 1px solid rgba(226,177,83,.7) !important; border-radius: 4px;
  background: linear-gradient(180deg, #5a1411, #2a0908) !important; object-fit: contain;
  filter: brightness(1.2) sepia(.12); transition: transform .16s ease, border-color .16s ease;
}
:is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent input[type="image"]:not(.ButtonText):hover { border-color: var(--gold-bright) !important; transform: translateY(-1px); }
:is(#fraggers, #killstatistics, #team, #serverinfo, #whoisonline) .BoxContent > table[width="100%"],
#serverinfo .BoxContent > table { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
#serverinfo .BoxContent > table { width: 100% !important; margin: 0 !important; }
#fraggers .BoxContent > div:first-child { margin-bottom: 14px; color: var(--gold-bright); font-size: 20px; }
#team .BoxContent font[color="red"], #whoisonline .BoxContent font[color="red"] { color: #e67b58 !important; }
#team .BoxContent font[color="green"], #whoisonline .BoxContent font[color="green"] { color: #91c783 !important; }
#forum .BoxContent img { max-width: 100%; height: auto; }
#forum .BoxContent textarea { width: 100% !important; min-height: 150px; }

/* Guilds */
#guilds .BoxContent > h2,
#guilds .BoxContent > center h2 {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--gold-bright);
  font-size: 27px;
  text-align: left;
}
#guilds .BoxContent > table[width="100%"] {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, .22) !important;
  overflow: hidden;
}
#guilds .BoxContent > table[width="100%"] > tbody > tr > td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(217, 168, 78, .12) !important;
  color: #ddd3c2 !important;
}
#guilds .BoxContent > table[width="100%"] > tbody > tr:nth-child(even) > td {
  background: rgba(217, 168, 78, .055) !important;
}
#guilds .BoxContent > table[width="100%"] > tbody > tr:hover > td {
  background: rgba(217, 168, 78, .11) !important;
}
#guilds .BoxContent form input[type="image"]:not(.ButtonText) {
  width: 150px !important;
  height: 38px !important;
  padding: 9px 14px;
  border: 1px solid rgba(226, 177, 83, .72) !important;
  border-radius: 4px;
  background: linear-gradient(180deg, #5a1411, #2a0908) !important;
  box-shadow: inset 0 1px rgba(255, 236, 194, .12), 0 4px 10px rgba(0, 0, 0, .28);
  object-fit: contain;
  filter: brightness(1.22) sepia(.12);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#guilds .BoxContent form input[type="image"]:not(.ButtonText):hover {
  border-color: var(--gold-bright) !important;
  background: linear-gradient(180deg, #7a1a14, #3a0c0a) !important;
  box-shadow: inset 0 1px rgba(255, 236, 194, .18), 0 7px 16px rgba(0, 0, 0, .38);
  transform: translateY(-1px);
}
#guilds .BoxContent form input[type="image"]:not(.ButtonText):active {
  transform: translateY(1px);
}
#guilds .BoxContent form input[type="image"]:not(.ButtonText):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}
#guilds .BoxContent form select,
#guilds .BoxContent form input:not([type="image"]):not([type="hidden"]) {
  min-height: 42px;
}

@media (max-width: 700px) {
  :is(#archive, #lostaccount, #tibiarules, #characters, #whoisonline, #fraggers, #killstatistics, #guilds, #team, #forum, #serverinfo) .BoxContent { overflow-x: auto; }
  :is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  :is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent select,
  :is(#lostaccount, #characters, #whoisonline, #guilds, #forum) .BoxContent textarea { max-width: 100%; }
}