:root {
  color-scheme: dark;
  --ink: #d0d4d4;
  --gold: #e3cfa9;
  --steel: #222d34;
  --edge: #080b0c;
}
* { box-sizing: border-box; }
body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--page-background);
  font: 14px/1.5 Arial, sans-serif;
}
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(380px, 42vw, 760px);
  pointer-events: none;
  background: linear-gradient(180deg, #19151955, #171316bf 55%, var(--page-background)),
    url("../tibiacom/images/header/background-artwork.jpg") center top / cover no-repeat;
}
a { color: #9fc9df; }
a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .6rem; background: #111; z-index: 10; }
.skip-link:focus { top: 0; }
.masthead { background: #101213; border-bottom: 1px solid #465359; }
.masthead-inner, .realm { max-width: 1280px; margin: auto; padding-inline: clamp(12px, 2vw, 24px); }
.masthead-inner, .realm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; }
.masthead-inner { min-height: 52px; padding-block: 8px; }
.masthead a { color: #e0e3e3; text-decoration: none; font-weight: bold; }
.masthead a:hover { color: var(--gold); }
.brand { border-right: 1px solid #3b4246; padding-right: 24px; }
.banner { min-height: clamp(158px, 20vw, 260px); display: flex; align-items: center; justify-content: center; gap: 16px; }
.banner-title { margin: 0; color: #f3d7a6; font: 700 clamp(36px, 7vw, 76px)/.98 Georgia, serif; text-transform: uppercase; text-shadow: 0 3px 4px #000, 0 0 20px #000; }
.eyebrow { margin: 10px 0 0; padding: 2px 9px; background: #101417e8; color: var(--gold); text-align: center; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.realm-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; align-items: start; gap: 14px; }
.realm-nav, .paper, .realm-side section { border: 2px solid var(--edge); background: #141718; box-shadow: 0 2px 9px #0009; }
.realm-nav summary, .paper-heading, .realm-side h2 { background: linear-gradient(#28343c, #1a2228); color: var(--gold); font-family: Georgia, serif; text-transform: uppercase; border-bottom: 2px solid var(--edge); }
.realm-nav summary { display: flex; align-items: center; gap: 8px; padding: 9px; cursor: pointer; font-weight: bold; }
.realm-nav summary::after { content: "+"; margin-left: auto; }
.realm-nav details[open] summary::after { content: "−"; }
.realm-nav a, .realm-side a { display: block; padding: 4px 10px; }
.realm-nav a { margin: 0 8px; border-bottom: 1px solid #343b3e; color: #dce1e2; text-decoration: none; }
.realm-nav a:hover, .realm-nav a[aria-current="page"] { color: var(--gold); background: #262d30; }
.paper-heading h1 { margin: 0; padding: 9px 13px; font-size: 1.18rem; }
.Content { padding: 12px; overflow-x: auto; }
.Content th { text-align: left; }
.Content input, .Content select, .Content textarea { max-width: 100%; }
.Content img { max-width: 100%; }
.realm-side section { margin-bottom: 12px; }
.realm-side h2 { margin: 0; padding: 8px; font-size: .92rem; }
.realm-status { margin: 8px; }
.realm-status::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; border-radius: 50%; background: #e09577; }
.realm-status.online::before { background: #a8ce8c; }
.realm-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 20px 0; font-size: .8rem; }
@media (max-width: 970px) {
  .realm-layout { grid-template-columns: 158px minmax(0, 1fr); }
  .realm-side { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 620px) {
  .realm-layout { grid-template-columns: minmax(0, 1fr); }
  .realm-nav { order: 2; }
  .realm-side { grid-column: 1; }
  .banner img { width: 48px; height: auto; }
}
:root {
  --page-background: #121012;
  --gold: #ead2a3;
  --table-heading: #46262c;
  --table-even: #302529;
  --table-odd: #241d21;
  --interactive: #54303a;
  --control-edge: #997d6a;
  --muted: #cfbdac;
  --edge: #372c28;
}
.masthead { background: #171315; border-bottom-color: #5d493c; }
.brand { border-right-color: #624b40; }
.banner {
  position: relative;
  isolation: isolate;
  min-height: clamp(190px, 24vw, 300px);
  padding: 24px 12px;
  background: radial-gradient(ellipse at center, #130e10a0, transparent 72%);
}
.banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("banner-brush.svg") center / min(90%, 790px) 100% no-repeat;
  opacity: .72;
  filter: drop-shadow(0 6px 12px #090607);
  pointer-events: none;
}
.banner > img { filter: drop-shadow(0 4px 6px #090607); }
.banner-title { text-shadow: 0 2px 3px #10090b, 0 4px 16px #10090b, 0 0 3px #10090b; }
.eyebrow {
  width: fit-content;
  margin: 10px auto 0;
  padding: 4px 14px;
  border: 1px solid #806552;
  background: #1b1417ed;
}
.realm-nav, .paper, .realm-side section { background: #1a1719; }
.realm-nav summary, .paper-heading, .realm-side h2 {
  background: linear-gradient(105deg, #3e242a, #282226 70%);
  border-bottom-color: #5d4439;
}
.realm-nav a { border-bottom-color: #403338; }
.realm-nav a:hover, .realm-nav a[aria-current="page"] { background: #40232d; }
@media (max-width: 620px) {
  .banner { gap: 10px; }
  .banner-title { font-size: clamp(28px, 7vw, 42px); }
  .eyebrow { padding-inline: 7px; letter-spacing: .11em; }
  .banner::before { background-size: 100% 100%; }
}

/* Shared trim for navigation, content panels and dispatches. */
.realm-nav, .paper, .realm-side section {
  border: 1px solid #68503e;
  box-shadow: inset 0 0 0 2px #100e10, 0 6px 18px #08060780;
}
.realm-nav summary, .paper-heading, .realm-side h2, .NewsHeadlineBackground {
  background: url("guard-ornament.svg") right center / auto 100% no-repeat,
    linear-gradient(105deg, #46262c, #292124 74%);
  border-bottom: 1px solid #72533e;
}
.paper-heading h1 { padding: 12px 16px; letter-spacing: .08em; }
.realm-nav details + details { border-top: 1px solid #36282b; }
.realm-nav summary img { filter: drop-shadow(0 1px 2px #0c0708); }
.realm-status { border-left: 2px solid #8b423e; padding-left: 8px; }
.realm-status.online { border-left-color: #889664; }
.NewsHeadline {
  margin: 8px 0 12px;
  border: 1px solid #68503e;
  border-left: 3px solid #96384a;
}
.NewsHeadlineBackground {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  min-height: 42px;
  padding: 6px 12px;
}
.NewsHeadlineIcon { flex: none; width: 18px; height: 18px; object-fit: contain; }
.NewsHeadlineDate, .NewsHeadlineAuthor { color: #cfbdac; font-size: .82rem; }
.NewsHeadlineText { color: #f0d5a4; font: bold 1.04rem Georgia, serif; }
.NewsHeadlineAuthor { margin-inline-start: auto; }
.Content input:not([type="checkbox"]):not([type="radio"]), .Content select, .Content textarea {
  color: var(--ink);
  background: var(--table-odd);
  border: 1px solid var(--control-edge);
  padding: 4px 6px;
}
.Content input::placeholder, .Content textarea::placeholder { color: var(--muted); }
.Content button,
.Content input:is([type="submit"], [type="button"], [type="reset"]) {
  color: var(--gold);
  background: var(--table-heading);
  border: 1px solid var(--control-edge);
}
.Content button:hover,
.Content input:is([type="submit"], [type="button"], [type="reset"]):hover {
  background: var(--interactive);
}
.Content :is(input, button, textarea, th):focus-visible,
.Content .ts_Spells > input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* DataTables loads its light stylesheet inside the page content. */
.Content th,
.Content .dataTables_wrapper table.dataTable thead th {
  background-color: var(--table-heading);
  color: var(--gold);
}
.Content .dataTables_wrapper table.dataTable tbody tr { background-color: var(--table-even); }
.Content .dataTables_wrapper table.dataTable tbody tr:nth-child(odd) { background-color: var(--table-odd); }
.Content .dataTables_wrapper table.dataTable tbody tr:hover { background-color: var(--interactive); }
.Content .dataTables_wrapper table.dataTable tbody tr > td,
.Content .dataTables_wrapper table.dataTable tbody tr > :is(.sorting_1, .sorting_2, .sorting_3) {
  background-color: inherit;
}
.Content .dataTables_wrapper table.dataTable :is(thead th, tbody td),
.Content .dataTables_wrapper table.dataTable.no-footer { border-bottom: 1px solid var(--edge); }
.Content .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) {
  color: var(--ink);
}
.Content .dataTables_wrapper .dataTables_processing {
  color: var(--ink);
  background: var(--table-odd);
}
.Content .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--gold) !important;
  background: var(--table-odd);
  border: 1px solid var(--control-edge);
}
.Content .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--interactive);
}
.Content .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: var(--table-odd) !important;
  background: var(--gold);
}
.Content .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--muted) !important;
  background: transparent;
  border-color: transparent;
}
.Content .ts_Spells > input:checked + label {
  color: var(--gold);
  background: var(--interactive);
  box-shadow: inset 0 -2px var(--gold);
}
.Content .ts_Spells td:last-child span { font-size: .875rem !important; }

.character-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  overflow-wrap: anywhere;
}
.character-name.is-online { color: #b3d69a; }
.character-name.is-offline { color: #eeaa9f; }
.character-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--table-odd);
}
.character-avatar img {
  display: block;
  width: 32px;
  height: 32px;
  /* The outfit service anchors the player sprite at the bottom right. */
  object-fit: none;
  object-position: right bottom;
  image-rendering: pixelated;
}
.character-details { table-layout: fixed; }
.character-details > tbody > tr > td { width: auto; }
.character-equipment {
  --equipment-trim: var(--control-edge);
  --equipment-slot: var(--table-odd);
}
.character-equipment img { display: block; }
@media (max-width: 620px) {
  .character-details > tbody > tr > td { display: block; }
  .character-details > tbody > tr > td + td { margin-top: 8px; }
}
.realm-footer {
  border-top: 1px solid #543c35;
  margin-top: 18px;
  color: #b8a694;
}
@media (max-width: 620px) {
  .NewsHeadlineAuthor { margin-inline-start: 0; }
  .realm-footer { flex-wrap: wrap; }
}

/* Cover the legacy inline image while cached news markup is still in use. */
.NewsHeadlineBackground {
  background-image: url("guard-ornament.svg"), linear-gradient(105deg, #46262c, #292124 74%) !important;
}