/* Relaxera World classic layout, built around the original MyAAC page structure. */

html { min-width: 320px; background: #171819; }
body.relaxera-site {
  min-width: 320px;
  margin: 0;
  padding: 0;
  color: #33291d;
  background: #171819 url("images/header/background-artwork.jpg") center top / 1600px auto no-repeat;
  font: 13px/1.5 Verdana, Arial, sans-serif;
}

body.relaxera-site a { color: #164887; }
body.relaxera-site a:hover { color: #2865aa; }
body.relaxera-site img { max-width: 100%; height: auto; }

#ArtworkHelper.relaxera-artwork {
  width: 100%;
  min-width: 0;
  height: auto;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(17, 18, 17, .08), rgba(20, 20, 19, .22) 390px, #171819 760px),
    url("images/header/background-artwork.jpg") center top / 1600px auto no-repeat !important;
}

#Bodycontainer {
  display: block;
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  height: auto;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

#ContentRow {
  position: relative;
  top: 162px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  gap: 14px;
  width: 100%;
  padding: 0 16px 34px;
  box-sizing: border-box;
}

#MenuColumn, #ContentColumn, #ThemeboxesColumn {
  position: relative;
  inset: auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#MenuColumn { grid-column: 1; z-index: 4; }
#ContentColumn { grid-column: 2; z-index: 1; }
#ThemeboxesColumn { grid-column: 3; z-index: 2; text-align: left; }

/* The artwork spans the central column, like the classic Tibia portal masthead. */
#LeftArtwork {
  position: absolute;
  top: -151px;
  left: 204px;
  z-index: 5;
  width: min(calc(100vw - 470px), 970px);
  min-width: 0;
  height: 132px;
  padding: 13px 18px;
  overflow: hidden;
  box-sizing: border-box;
  border: 4px solid #5e584d;
  background:
    linear-gradient(90deg, rgba(18, 18, 17, .48), rgba(18, 18, 17, .18) 50%, rgba(18, 18, 17, .48)),
    url("images/header/background-artwork.jpg") center 34% / cover no-repeat;
  box-shadow: 0 5px 0 #252525, 0 12px 26px rgba(0, 0, 0, .54), inset 0 0 0 1px #c0a977;
  text-align: center;
}
.rw-brand {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #ffe189 !important;
  text-decoration: none !important;
}
.rw-brand-mark { display: none; }
.rw-brand-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rw-brand-copy strong {
  display: inline-block;
  padding: 5px 28px 7px;
  border: 3px solid #e4d6b4;
  border-radius: 15px;
  color: #ffce27;
  background: linear-gradient(180deg, #5a1118, #250e13 78%);
  box-shadow: 0 0 0 3px #151313, inset 0 0 0 1px #8f7251, 0 4px 7px rgba(0, 0, 0, .65);
  font: 700 clamp(28px, 3.2vw, 43px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: .3px;
  text-shadow: 2px 2px 0 #681017, -1px -1px 0 #fff0a6, 2px 3px 2px #15100b;
}
.rw-brand-copy small {
  margin-top: 5px;
  color: #f7e9c8;
  font: bold 11px/1.25 Arial, sans-serif;
  letter-spacing: 1.1px;
  text-shadow: 1px 2px 2px #17120d;
  text-transform: uppercase;
}
.rw-brand-note { margin: 7px 0 0; color: #f1e5cd; font: 11px/1.25 Arial, sans-serif; text-shadow: 1px 1px 2px #17120d; }

/* Login, navigation, and sidebar cards use a compact stone-panel treatment. */
#Loginbox.rw-account-card {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 2px solid #625e56;
  color: #e8dfc9;
  background: linear-gradient(145deg, #454544, #2d2e2e 66%, #393836);
  box-shadow: inset 0 0 0 1px #222, 0 4px 10px rgba(0, 0, 0, .38);
  font: 11px/1.4 Arial, sans-serif;
}
.rw-account-card p { margin: 5px 0 8px; color: #eee4d0; }
.rw-eyebrow { display: block; color: #e5c76b; font: bold 10px/1.4 Georgia, "Times New Roman", serif; letter-spacing: .8px; }
.rw-account-card a {
  display: block;
  margin-top: 5px;
  padding: 4px 7px;
  border: 1px solid #a18b5a;
  color: #ffe7a0 !important;
  background: linear-gradient(#46443d, #282925);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}
.rw-account-card a:hover { color: #fff !important; background: #59513c; }

#Menu {
  position: relative;
  left: 0;
  padding: 5px 5px 7px;
  border: 2px solid #55524c;
  background: linear-gradient(145deg, #414141, #292a2b 55%, #353330);
  box-shadow: inset 0 0 0 1px #202020, 0 6px 14px rgba(0, 0, 0, .42);
}
#MenuTop, #MenuBottom { display: none; }
.MenuButton {
  position: relative;
  display: block;
  width: 100%;
  height: 35px;
  border: 1px solid #4c4b47;
  background: linear-gradient(180deg, #595955, #393a39) !important;
  box-sizing: border-box;
}
.MenuButton:hover { border-color: #b1985c; background: linear-gradient(180deg, #696551, #444238) !important; }
.MenuButton > .Button { display: block; width: 100%; height: 100%; }
.MenuButton .Icon { display: block; top: 2px; left: 5px; width: 30px; height: 30px; }
.MenuButton .Lights { display: none; }
.MenuButton .Label {
  position: absolute;
  top: 8px;
  left: 39px;
  width: calc(100% - 58px);
  height: auto;
  color: #e8d4a8;
  font: bold 12px/16px Georgia, "Times New Roman", serif;
  letter-spacing: .1px;
  text-shadow: 1px 1px #201d19;
}
.MenuButton .Extend { top: 11px; right: 4px; opacity: .9; }
.Submenu {
  position: relative;
  width: auto;
  margin: 0 4px 6px;
  border: 1px solid #5e6854;
  border-top: 0;
  background: #173c36;
}
.LeftChain, .RightChain { display: none; }
.ActiveSubmenuItemIcon { display: block; }
.SubmenuitemLabel {
  min-height: 20px;
  padding: 3px 6px 3px 17px;
  border-bottom: 1px solid rgba(225, 212, 173, .22);
  color: #eee3cb;
  font: 11px/1.35 Arial, sans-serif;
  overflow-wrap: anywhere;
}
.Submenu a { color: #eee3cb; text-decoration: none; }
.Submenu a:hover .SubmenuitemLabel { color: #fff2bd; background: #265047; }

/* Homepage welcome panel and account actions. */
.rw-welcome {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 2px solid #756142;
  color: #352b1f;
  background: #f3e8d0 url("images/content/scroll.gif") repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .32), inset 0 0 0 1px #fff6dc;
}
.rw-welcome-mark {
  flex: 0 0 38px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid #6b5b40;
  color: #f6df98;
  background: linear-gradient(145deg, #536245, #26382e);
  font-size: 20px;
}
.rw-welcome .rw-eyebrow { color: #705423; }
.rw-welcome h1 { margin: 4px 0 6px; color: #284238; font: 700 clamp(20px, 2.2vw, 27px)/1.16 Georgia, "Times New Roman", serif; }
.rw-welcome p { max-width: 720px; margin: 0; color: #51412d; font: 13px/1.48 Arial, sans-serif; }
.rw-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rw-button {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #6b583c;
  font: bold 11px Arial, sans-serif;
  text-decoration: none !important;
}
.rw-button-primary { color: #fff1c7 !important; background: linear-gradient(#7e261b, #50130f); }
.rw-button-primary:hover { color: #fff !important; background: linear-gradient(#96352a, #681a14); }
.rw-button-secondary { color: #f6e7c1 !important; background: linear-gradient(#465643, #26372e); }
.rw-button-secondary:hover { background: #52654b; }

/* Every MyAAC page shares a parchment content frame and a readable title bar. */
.Content { position: relative; top: 0; width: 100%; min-width: 0; }
#ContentHelper { position: relative; min-width: 0; }
.Content .Box {
  position: relative;
  margin: 0 0 15px;
  overflow: visible;
  border: 0;
  border-left: 2px solid #4a4033;
  border-right: 2px solid #4a4033;
  color: #3d2c1b;
  background: #493a2e;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  font-size: 13px;
}
.Content .Corner-tl, .Content .Corner-tr, .Content .Border_1,
.Content .BorderTitleText, .Content .CornerWrapper-b { display: block !important; }
.Content .Corner-tl, .Content .Corner-tr { z-index: 5; }
.Content .Border_1 { height: 6px; background-repeat: repeat-x !important; }
.Content .BorderTitleText {
  height: 25px;
  background-image: url("images/content/title-background-green.gif") !important;
  background-repeat: repeat-x !important;
}
.rw-page-title {
  position: relative;
  z-index: 2;
  height: 25px;
  margin-top: -25px;
  padding: 3px 14px 4px;
  color: #f3e4bb;
  background: transparent;
  font: bold 15px/18px Georgia, "Times New Roman", serif;
  letter-spacing: .3px;
  text-shadow: 1px 1px #27382b;
}
.Content .Box .Border_2 { margin: 3px 4px 4px; padding: 0; background: #5a4633; }
.Content .Box .Border_3 { margin: 1px; border: 1px solid #8d7651; background: #f3e8d0; }
.Content .Box .Title { display: none; }
.Content .BoxContent {
  min-width: 0;
  min-height: 95px;
  height: auto !important;
  padding: 15px;
  overflow-x: auto;
  color: #352b20;
  background: #f3e8d0 url("images/content/scroll.gif") repeat !important;
  font: 13px/1.5 Verdana, Arial, sans-serif;
  overflow-wrap: normal;
}
.Content .BoxContent h1, .Content .BoxContent h2, .Content .BoxContent h3,
.Content .BoxContent h4, .Content .BoxContent h5 { color: #324637; font-family: Georgia, "Times New Roman", serif; line-height: 1.25; }
.Content .BoxContent h1 { font-size: 23px; }
.Content .BoxContent h2 { font-size: 19px; }
.Content .BoxContent h3 { font-size: 16px; }
.Content .BoxContent p { margin: 0 0 10px; }
.Content .BoxContent ul, .Content .BoxContent ol { padding-left: 24px; }
.Content .BoxContent table { max-width: 100%; border-collapse: collapse; }
.Content .BoxContent td, .Content .BoxContent th {
  overflow-wrap: normal;
  word-break: normal;
}
.Content .BoxContent p, .Content .BoxContent li { overflow-wrap: anywhere; }
.Content .BoxContent th { padding: 6px 7px; color: #f5ebd3; background: #465442; font-size: 12px; text-align: left; }
.Content .BoxContent td { padding: 4px 6px; color: #352b20; }
.Content .BoxContent .Odd { background-color: rgba(118, 88, 49, .10); }
.Content .BoxContent .Even { background-color: rgba(255, 250, 230, .55); }
.Content .BoxContent tr[bgcolor] { background-color: #f7ecd5 !important; }
.Content .BoxContent tr[bgcolor]:nth-child(even) { background-color: #ebdec3 !important; }
.Content .BoxContent td.white, .Content .BoxContent th.white,
.Content .BoxContent .LabelH td, .Content .BoxContent .LabelH th {
  color: #f5ebd3 !important;
  background: #465442 !important;
  font-weight: bold;
}
.Content .BoxContent input, .Content .BoxContent select, .Content .BoxContent textarea {
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #a69472;
  color: #342b20;
  background: #fff9ea;
}
.Content .BoxContent button, .Content .BoxContent input[type="submit"], .Content .BoxContent input[type="button"] {
  padding: 5px 10px;
  border: 1px solid #756142;
  color: #fff1c7;
  background: linear-gradient(#465643, #26372e);
  cursor: pointer;
}
.Content .BoxContent button:hover, .Content .BoxContent input[type="submit"]:hover, .Content .BoxContent input[type="button"]:hover { background: #52654b; }
.Content a { color: #164887; text-decoration: none; }
.Content a:hover { color: #2865aa; text-decoration: underline; }

/* MyAAC form, result, table, and legacy page helpers. */
.Content .BoxContent .TableContainer,
.Content .BoxContent .TableContentContainer,
.Content .BoxContent .TableContent { max-width: 100%; }
.Content .BoxContent .TableContainer { overflow-x: auto; }
.Content .BoxContent .TableContent { color: #352b20; }
.Content .BoxContent .TableContentContainer { color: #352b20; }
.Content .BoxContent .TableContentContainer table { margin: 0 auto; }
.Content .BoxContent .SmallBox, .Content .BoxContent .BigBox { max-width: 100%; }
.Content .BoxContent .SmallBox table, .Content .BoxContent .BigBox table { width: 100%; }
.Content .BoxContent .FormFieldInfo, .Content .BoxContent .HelpLink { color: #65543c; font-size: 11px; }
.Content .BoxContent .ErrorMessage, .Content .BoxContent .error { color: #8b231a; }
.Content .BoxContent .SuccessMessage, .Content .BoxContent .success { color: #285b2a; }
.Content .BoxContent .white, .Content .BoxContent .whites { color: #5b4a31; }
.Content .BoxContent .green { color: #287532; }
.Content .BoxContent .yellow { color: #8a6813; }
.Content .BoxContent .red { color: #9c251b; }
.Content .BoxContent .grey { color: #625d54; }
.Content .BoxContent .orange { color: #a54f0d; }

/* Keep classic table-based pages readable at the narrow widths used by MyAAC. */
.Content .BoxContent .TableContentAndRightShadow,
.Content .BoxContent .TableContentContainer { background: transparent !important; }
.Content .BoxContent .TableContent { width: 100%; color: #352b20; }
.Content .BoxContent .TableContent tr[bgcolor] td { background: transparent !important; }

/* Highscores used to squeeze its ranking table beside two duplicate filter panels.
   The dropdown filters remain above the table, so let rankings use the full card. */
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:first-child,
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(n+3) {
  display: none;
}
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) {
  width: 100% !important;
  padding: 0;
}
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) {
  width: 100% !important;
  table-layout: fixed;
}
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(1) { width: 5% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(2) { width: 7% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(3) { width: 9% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(4) { width: 48% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(5) { width: 15% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td:nth-child(6) { width: 16% !important; }
.page-highscores .Content .BoxContent > table:first-of-type > tbody > tr > td:nth-child(2) > table:nth-of-type(2) tr:first-child td { color: #f5ebd3 !important; background: #465442 !important; }

/* Spell reference tables can be wider than a phone; keep columns legible and scroll inside the card. */
.page-spells .Content .BoxContent #tb_instantSpells,
.page-spells .Content .BoxContent #tb_conjureSpells,
.page-spells .Content .BoxContent #tb_runeSpells { min-width: 610px; width: 100%; }
.page-spells .ts_Spells > label {
  margin-right: 4px;
  border: 1px solid #a18a60;
  color: #473a2a !important;
  background: #e6d7b8;
}
.page-spells .ts_Spells > input:checked + label {
  color: #fff1c7 !important;
  background: #465442;
}

/* Right column: explicitly undo the original fixed, floating themebox position. */
#RightArtwork {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  min-height: 0;
  margin: 0 0 12px;
  background: none;
  text-align: left;
  z-index: auto;
}
#RightArtwork #Monster, #PedestalAndOnline, #RightArtwork #PlayersOnline { display: none; }
#Themeboxes { position: static; width: auto; margin: 0; text-align: left; }
#Themeboxes .Themebox { position: relative; top: auto; width: auto; height: auto; margin: 0 0 12px; }
#Themeboxes .ThemeboxButton, #Themeboxes .Bottom { position: static; }
#Themeboxes .Themebox img { max-width: 100%; }

.rw-status-card, .rw-sidecard {
  margin: 0 0 12px;
  padding: 10px;
  border: 2px solid #59544b;
  color: #e9dfc8;
  background: linear-gradient(145deg, #4b4b48, #303131 54%, #42403c);
  box-shadow: inset 0 0 0 1px #202020, 0 4px 11px rgba(0, 0, 0, .38);
  font: 11px/1.45 Arial, sans-serif;
}
.rw-status-card > strong, .rw-status-card > span:not(.rw-eyebrow) { display: block; margin-top: 5px; }
.rw-status-card > strong { font: bold 13px Georgia, serif; }
.rw-status-online { color: #92dc83; }
.rw-status-offline { color: #f09a7e; }
.rw-status-card > span:not(.rw-eyebrow) { color: #e5ddca; }
.rw-status-card a, .rw-sidecard a { display: inline-block; margin-top: 8px; font-weight: bold; text-decoration: none; }
.rw-status-card a { color: #ffe39a; }
.rw-sidecard {
  color: #3a3023;
  background: #f0e3c9 url("images/content/scroll.gif") repeat;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 0 0 1px #fff8e5;
}
.rw-sidecard .rw-eyebrow { color: #705423; }
.rw-sidecard h2 { margin: 4px 0; color: #2f4536; font: bold 15px/1.2 Georgia, "Times New Roman", serif; }
.rw-sidecard p { margin: 6px 0 0; color: #51412d; }
.rw-sidecard a { color: #174987; }
.rw-sidecard-soft { background-color: #e9ddc1; }
#Themeboxes .rw-sidecard { font-size: 11px; }

/* Guide pages */
.rw-command-intro {
  margin: 0 0 13px;
  padding: 10px 12px;
  border: 1px solid #a18a60;
  border-left: 4px solid #526445;
  color: #473a2a;
  background: rgba(255, 249, 231, .66);
}
.rw-command-group { margin: 15px 0 0; border: 1px solid #9e8966; background: rgba(255, 249, 231, .4); }
.Content .BoxContent .rw-command-group h2 {
  margin: 0;
  padding: 6px 10px;
  color: #f1e4c0 !important;
  background: url("images/content/title-background-green.gif") repeat-x center;
  font: bold 14px/1.4 Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px #29342a;
}
.rw-command-list { padding: 3px 10px; }
.rw-command-item {
  display: grid;
  grid-template-columns: minmax(155px, 215px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 3px;
  border-bottom: 1px solid rgba(111, 86, 54, .22);
}
.rw-command-item:last-child { border-bottom: 0; }
.rw-command-item code { color: #74251a; font: bold 12px/1.5 Consolas, "Courier New", monospace; overflow-wrap: anywhere; }
.rw-command-item p { margin: 0; color: #463827; }
.rw-command-note { margin: 10px 0 0; color: #65543c; font-size: 11px; }
.rw-rook-start {
  margin: 11px 0;
  padding: 9px 11px;
  border: 1px solid #9d895f;
  border-left: 4px solid #526445;
  color: #3c3325;
  background: rgba(255, 249, 231, .72);
}

#Footer {
  width: auto;
  margin: 10px 4px 0;
  padding: 10px 4px 18px;
  border-top: 1px solid rgba(220, 203, 162, .36);
  color: #ddd1b4;
  font: 10px/1.55 Arial, sans-serif;
  text-align: center;
  text-shadow: 1px 1px #181614;
}
#Footer a { color: #f5d77c; }

@media (max-width: 1040px) {
  #ContentRow { grid-template-columns: 174px minmax(0, 1fr); gap: 12px; padding-right: 14px; padding-left: 14px; }
  #MenuColumn { grid-column: 1; }
  #ContentColumn { grid-column: 2; }
  #ThemeboxesColumn { grid-column: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  #ThemeboxesColumn > #RightArtwork, #Themeboxes { display: contents; }
  .rw-status-card, .rw-sidecard { margin-bottom: 0; }
  #LeftArtwork { left: 188px; width: min(calc(100vw - 420px), 860px); }
}

@media (max-width: 700px) {
  #ContentRow { top: 151px; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 10px 24px; }
  #MenuColumn, #ContentColumn, #ThemeboxesColumn { grid-column: 1; }
  #MenuColumn { grid-row: 1; }
  #ContentColumn { grid-row: 2; }
  #ThemeboxesColumn { grid-row: 3; display: block; }
  #ThemeboxesColumn > #RightArtwork, #Themeboxes { display: block; }
  #LeftArtwork { top: -141px; left: 0; width: calc(100vw - 20px); max-width: none; height: 122px; padding: 11px 7px; }
  .rw-brand-copy strong { padding: 6px 17px; font-size: clamp(25px, 8vw, 36px); }
  .rw-brand-copy small { font-size: 9px; letter-spacing: .7px; }
  .rw-brand-note { margin-top: 7px; font-size: 10px; }
  .rw-welcome { gap: 10px; padding: 12px; }
  .rw-welcome-mark { flex-basis: 32px; width: 32px; height: 32px; font-size: 17px; }
  .Content .BoxContent { padding: 11px; }
  .rw-command-item { grid-template-columns: 1fr; gap: 2px; }
  .Content .BoxContent img { max-width: 100%; }
}