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

body {margin: 0; background: #242721}

#sg-gate {
  --gold: #f1c989;
  --ink: #f5ead8;
  --panel: #202225;
  --rim: #736d61;
  --rule: #cabb9f33;
  --edge: #736d61;
  --muted: #c8bdab;
  --table-heading: #35373b;
  --table-even: #2c2e31;
  --table-odd: #25272a;
  --control-edge: #827863;
  --interactive: #40433d;
  box-sizing: border-box;
  isolation: isolate;
  padding: clamp(48px, 7vw, 100px) max(12.2%, calc((100% - 1300px) / 2)) 60px;
  color: var(--ink);
  min-height: 100vh;
  background: #242721 url('assets/landscape.webp') center top / 100% clamp(760px, 76vw, 1120px) no-repeat;
  font: 600 15px/1.4 Spectral, Georgia, serif;
}
#sg-gate * {box-sizing: border-box}
#sg-gate :is(.mast p, .hero h1, .bar h1, .bar h2, h2.bar, .pad p, .sg-ranking h3) {margin: 0}
#sg-gate :is(nav, aside, .hero, .archive) a {color: inherit; text-decoration: none}
#sg-gate a:hover {text-decoration: underline; text-underline-offset: 3px}
#sg-gate :focus-visible {outline: 2px solid #df9d3d; outline-offset: 2px}
#sg-gate :is(.bar, .actions, .loot) img {image-rendering: pixelated; object-fit: contain; vertical-align: middle}
#sg-gate .frame {
  min-width: 0;
  border: 1px solid var(--rim);
  border-radius: 3px;
  background-color: var(--panel);
  box-shadow: 0 2px 5px #0009;
}
#sg-gate .mast {min-height: clamp(100px, 10vw, 158px); padding-bottom: 14px; text-align: center}
#sg-gate .sg-name {
  color: #ffdb92;
  font: 900 clamp(27px, 4.35vw, 52px)/1.05 Cinzel, Georgia, serif;
  letter-spacing: .025em;
  text-shadow: 0 2px #754724, 0 4px 5px #000;
}
#sg-gate .mast p {margin-top: 5px; color: #ffe9bf; font-weight: 800; text-shadow: 0 2px 3px #000}
#sg-gate > nav {display: flex; flex-wrap: wrap; justify-content: center; padding: 3px 5px; margin-bottom: 10px}
#sg-gate > nav > a, #sg-gate > nav summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 9px;
  font-weight: 700;
  list-style: none;
}
#sg-gate > nav > a[aria-current], #sg-gate > nav details[open] summary {
  color: var(--gold);
  box-shadow: inset 0 -2px #b99857;
}
#sg-gate > nav details {position: relative}
#sg-gate > nav summary {cursor: pointer}
#sg-gate > nav summary::-webkit-details-marker {display: none}
#sg-gate > nav summary::after {content: '▾'; color: inherit}
#sg-gate .menu {
  position: absolute;
  z-index: 4;
  top: 100%;
  left: 0;
  min-width: 180px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--rim);
  box-shadow: 0 4px 12px #0008;
}
#sg-gate > nav details:last-child .menu {left: auto; right: 0}
#sg-gate .menu a {display: block; padding: 6px 9px}
#sg-gate .layout {display: grid; grid-template-columns: minmax(136px, 1fr) minmax(0, 2.5fr) minmax(150px, 1.1fr); gap: 10px; align-items: start}
#sg-gate .layout > main {grid-column: 2; grid-row: 1}
#sg-gate .realm {grid-column: 1; grid-row: 1}
#sg-gate .competition {grid-column: 3; grid-row: 1}
#sg-gate.sg-interior .layout {display: block}
#sg-gate .stack {display: grid; gap: 10px; min-width: 0}
#sg-gate [hidden] {display: none !important}
#sg-gate :is(.sg-sr-only, .sg-skip:not(:focus)) {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
#sg-gate .sg-skip:focus {position: absolute; top: 10px; left: 10px; z-index: 5; padding: 8px; background: var(--panel); color: var(--gold)}
#sg-gate .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px 8px;
  border-bottom: 1px solid var(--rule);
  color: var(--gold);
  font-size: 16px;
  line-height: 1.2;
}
#sg-gate .bar img {flex: 0 0 17px; width: 17px; height: 17px}
#sg-gate .bar :is(h1,h2) {font: inherit}
#sg-gate .sg-content-panel .bar {padding: 12px 16px; font-size: 21px}
#sg-gate .pad {padding: 9px 10px}
#sg-gate .status {display: flex; align-items: center; gap: 7px; color: #edac9e; font-weight: 800}
#sg-gate .status.is-online {color: #bce583}
#sg-gate .status::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor}
#sg-gate :is(aside, .archive) .link {display: inline-flex; align-items: center; min-height: 32px; color: var(--gold); font-weight: 700}
#sg-gate .hero {
  min-height: 200px;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 8px;
  padding: 12px;
  background: url('assets/gate.webp') 56% 52% / cover;
}
#sg-gate .hero h1 {
  color: #fff0c6;
  font: 900 clamp(21px, 3.5vw, 34px)/1.12 Cinzel, Georgia, serif;
  text-shadow: 0 2px #292014, 0 3px 5px #080808;
}
#sg-gate .actions {display: flex; flex-wrap: wrap; gap: 6px}
#sg-gate :is(.hero, .realm) .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 35px;
  padding: 5px 9px;
  border: 1px solid #a38b61;
  border-radius: 2px;
  color: #fff3d8;
  background: #333639;
  font: 700 14px Spectral, Georgia, serif;
}
#sg-gate .action img {width: 18px; height: 18px}
#sg-gate :is(.hero, .realm) .action.green {background: #384924}
#sg-gate .hero .action.blue {background: #283e55}
#sg-gate .realm form {display: grid; gap: 6px}
#sg-gate :is(.realm input,.competition select) {min-width: 0; width: 100%; min-height: 35px; padding: 5px 6px; border: 1px solid #827863; border-radius: 2px; font: inherit}
#sg-gate .realm input {background: #f0e0bb; color: #2d2415}
#sg-gate .competition select {background: #303337; color: var(--ink)}
#sg-gate .paper {color: #362719; background: #ecd4a3}
#sg-gate .paper .bar {color: #492e17; border-color: #87613f57; font-size: 19px}

#sg-gate .archive {text-align: right; padding: 3px 12px}
#sg-gate .archive a.link {color: #3d5121}
#sg-gate .muted {font-size: 13px; color: #d2c6ad; margin-top: 6px}
#sg-gate .competition table {width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 4px}
#sg-gate .competition :is(th,td) {text-align: left; padding: 4px 1px; border-bottom: 1px solid var(--rule)}
#sg-gate .competition :is(th,td):last-child {text-align: right; font-variant-numeric: tabular-nums}
#sg-gate .competition th {color: #ded1b7; font-size: 12px}
#sg-gate .competition tbody tr:first-child {color: var(--gold)}
#sg-gate .competition td:first-child {overflow-wrap: anywhere}
#sg-gate .competition td:last-child {white-space: nowrap}
#sg-gate .sg-ranking h3 {margin-top: 7px; font-size: 15px}
#sg-gate .sg-ranking + .sg-ranking:not([hidden]) {margin-top: 7px; border-top: 1px solid var(--rule)}
#sg-gate .base {margin-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 12px; font-size: 12px; color: #d5cab5}
#sg-gate .loot {display: flex; align-items: center; gap: 5px}
#sg-gate .loot img {width: 33px; height: 33px}

@media (max-width: 850px) {
  #sg-gate {padding-inline: 8%}
  #sg-gate .layout {grid-template-columns: minmax(0, 2.1fr) minmax(145px, 1fr)}
  #sg-gate .layout > main {grid-column: 1; grid-row: 2}
  #sg-gate .competition {grid-column: 2; grid-row: 2}
  #sg-gate .realm {grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr))}
}
@media (max-width: 570px) {
  #sg-gate {padding: clamp(30px,8vw,46px) 12px 24px; background-position: center top; background-size: 100% auto}
  #sg-gate .mast {min-height: 78px}
  #sg-gate .layout {grid-template-columns: minmax(0,1fr)}
  #sg-gate .layout > :is(main, aside) {grid-column: 1; grid-row: auto}
  #sg-gate .realm {grid-template-columns: 1fr 1fr}
  #sg-gate .realm section:last-child {grid-column: 1 / -1}
  #sg-gate .menu {position: static; min-width: 0}
   #sg-gate > nav {display: grid; grid-template-columns: 1fr 1fr}
  #sg-gate .loot img {width: 26px; height: 26px}
}

/* Core pages retain MyAAC controls, DataTables and character equipment. */
#sg-gate .Content {padding: 12px; overflow-x: auto; font: 14px/1.55 system-ui, sans-serif}
#sg-gate .Content a {color: var(--gold)}
#sg-gate .Content :is(input, select, textarea, img) {max-width: 100%}
#sg-gate .paper .Content a {color: #415222}
#sg-gate .sg-dispatch {padding: 12px 0; border-bottom: 1px solid #87613f57}
#sg-gate .sg-dispatch:first-child {padding-top: 2px}
#sg-gate .sg-dispatch header {display: flex; align-items: flex-start; gap: 8px}
#sg-gate .sg-dispatch header img {image-rendering: pixelated}
#sg-gate .sg-dispatch h3 {margin: 2px 0 0; font: 700 19px/1.2 Spectral, Georgia, serif}
#sg-gate .sg-dispatch time, #sg-gate .sg-dispatch footer {font-size: 12px; color: #714b2e}
#sg-gate .sg-dispatch-body {margin-top: 7px; overflow-wrap: anywhere}
#sg-gate .sg-dispatch footer {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px}
#sg-gate .paper .Content :is([bgcolor="#35373b"], [bgcolor="#2c2e31"], [bgcolor="#25272a"]) {
  background: transparent;
  color: inherit;
  border-bottom: 1px solid #87613f40;
}
#sg-gate .paper .Content .NewsHeadline {margin: 0 0 9px; border-block-end: 1px solid #87613f57}
#sg-gate .paper .Content .NewsHeadlineBackground {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 7px;
  padding: 5px 0;
  background-image: none !important;
}
#sg-gate .NewsHeadlineIcon {width: 18px; height: 18px}
#sg-gate .NewsHeadlineText {font: 700 18px/1.2 Spectral, Georgia, serif}
#sg-gate :is(.NewsHeadlineDate,.NewsHeadlineAuthor) {color: #714b2e; font-size: 12px}

.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; }
}