.rs-wordmark,
.rs-tagline,
.rs-treasury,
.rs-wallet,
#wallet-connect,
.rs-wallet-status {
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

#logo {
  background-image: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: auto !important;
  width: auto !important;
  margin-left: 0 !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
}

#logo #logosparks {
  display: none !important;
}

.rs-wordmark {
  color: #f6e27a;
  text-shadow: 0 2px 0 #3b2208, 0 0 18px rgba(246, 226, 122, 0.45);
  letter-spacing: 0.08em;
  line-height: 1;
  font-size: 42px;
}

.rs-tagline {
  margin-top: 8px;
  color: #f3e6c5;
  font-size: 13px;
  max-width: 360px;
}

.rs-treasury {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 400;
  width: min(320px, calc(100vw - 20px));
  padding: 10px 12px;
  background: rgba(12, 8, 4, 0.78);
  border: 1px solid #c9a35a;
  color: #f3e6c5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.rs-treasury-brand {
  color: #f6e27a;
  font-size: 16px;
}

.rs-treasury-label {
  font-size: 11px;
  opacity: 0.85;
  margin: 2px 0 6px;
}

.rs-treasury-addr {
  display: block;
  font-size: 10px;
  word-break: break-all;
  color: #fff4cc;
}

.rs-treasury-mint {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.8;
}

html:not(.rs-site-page):not(.rs-docs-page):not(.rs-market-page):not(:has(body.rs-site)),
body.intro:not(.rs-site):not(.rs-docs-page):not(.rs-market-page) {
  overflow: hidden !important;
  height: 100%;
  background: #070503;
}

html.rs-site-page,
html:has(body.rs-site) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100%;
  background: #0c0804;
}

body.intro #intro {
  position: relative;
  z-index: 6;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

body.intro #logo,
body.intro #parchment,
body.intro #portrait,
body.intro footer,
body.intro .rs-treasury,
body.intro .rs-hud,
body.intro #rs-hud,
body.intro .rs-panel,
body.intro #rs-howto,
body.intro #instructions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.rs-selecting body > *:not(#intro),
html.rs-selecting #rs-hud,
html.rs-selecting #rs-treasury,
html.rs-selecting #rs-econ-notice,
html.rs-selecting #rs-howto,
html.rs-selecting #rs-spectate-badge,
html.rs-selecting #rs-spectate-gate,
html.rs-selecting #container,
html.rs-selecting footer,
html.rs-selecting .rs-panel,
html.rs-selecting .rs-treasury,
html.rs-selecting .rs-hud,
html.rs-selecting .rs-gate-bar,
html.rs-selecting #rs-enter-bg,
html.rs-selecting .rs-enter-bg,
html.rs-selecting #rs-screen-hero,
html.rs-selecting #wallet-connect,
html.rs-selecting #rs-spectate-start,
html.rs-selecting #wallet-status,
html.rs-selecting #logo,
html.rs-selecting #parchment,
html.rs-selecting #portrait,
#rs-hud[hidden],
.rs-hud[hidden],
.rs-panel[hidden],
.rs-treasury[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.rs-gate-art,
.rs-gate-veil,
.rs-enter-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.rs-gate-art {
  z-index: 0;
  background:
    url("../img/docs/docs-world-walk.png") center / cover no-repeat,
    url("../img/2/wood.png") center / 256px repeat,
    #0a0704;
  transform: scale(1.08);
  filter: saturate(1.2) contrast(1.1);
}

.rs-enter-bg {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #070503;
}

.rs-enter-bg[hidden] {
  display: none !important;
}

.rs-gate-veil {
  z-index: 2;
  background:
    radial-gradient(
      ellipse at 50% 40%,
      rgba(10, 7, 4, 0.28) 0%,
      rgba(6, 4, 2, 0.62) 48%,
      rgba(3, 2, 1, 0.9) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.55) 0%,
      transparent 22%,
      transparent 58%,
      rgba(0, 0, 0, 0.7) 100%
    );
}

.rs-gate-bar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 22px 0;
}

.rs-gate-spacer {
  flex: 1 1 auto;
}

body.rs-selecting .rs-gate-bar {
  display: none !important;
  pointer-events: none !important;
}

.rs-gate-links {
  display: none;
}

.rs-gate-connect {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.78;
}

.rs-gate-connect:hover {
  opacity: 1;
  color: #f6e27a;
}

.rs-gate-connect {
  border: 1px solid rgba(201, 163, 90, 0.45);
  padding: 6px 10px;
  opacity: 1;
}

.rs-gate-connect.connected {
  color: #f6e27a;
}

.rs-screen-hero {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 20px 40px;
  pointer-events: none;
}

.rs-hero-ctas {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
  width: min(720px, calc(100vw - 28px));
}

.rs-hero-ctas a,
.rs-hero-ctas button {
  appearance: none;
  pointer-events: auto;
  flex: 1 1 180px;
  min-width: 168px;
  min-height: 64px;
  padding: 18px 20px;
  border: 1px solid #f6e27a;
  background: rgba(12, 8, 4, 0.82);
  color: #fff4cc;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.rs-hero-ctas a:hover,
.rs-hero-ctas button:hover {
  color: #f6e27a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 28px rgba(246, 226, 122, 0.28);
}

.rs-screen-hero[hidden],
.rs-screen-select[hidden] {
  display: none !important;
}

.rs-screen-hero .rs-wordmark {
  font-size: clamp(56px, 10vw, 92px);
  pointer-events: none;
}

.rs-lead {
  margin: 14px 0 36px;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: clamp(16px, 2.6vw, 24px);
  font-weight: normal;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 0 #3b2208, 0 0 24px rgba(246, 226, 122, 0.35);
}

.rs-enter {
  pointer-events: auto;
  appearance: none;
  min-width: min(280px, calc(100vw - 48px));
  padding: 18px 36px 16px;
  border: 1px solid #f6e27a;
  background: linear-gradient(180deg, #6b4318 0%, #3d2710 100%);
  color: #fff4cc;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 32px rgba(246, 226, 122, 0.22);
}

.rs-enter:hover {
  color: #fff8dc;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(246, 226, 122, 0.38);
}

.rs-enter-sm {
  min-width: 200px;
  margin-top: 14px;
  padding: 12px 28px 10px;
  font-size: 18px;
}

.rs-screen-select {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 12px 16px 16px;
  box-sizing: border-box;
  overflow: auto;
  pointer-events: auto;
}

.rs-select-back {
  position: relative;
  top: auto;
  left: auto;
  z-index: 13;
  align-self: flex-start;
  appearance: none;
  background: rgba(10, 7, 4, 0.55);
  border: 1px solid rgba(201, 163, 90, 0.45);
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 13px;
  cursor: pointer;
  opacity: 1;
  min-height: 36px;
  padding: 8px 14px;
  margin: 0 0 10px;
  pointer-events: auto;
}

.rs-select-back:hover {
  color: #f6e27a;
  opacity: 1;
}

.rs-select-card {
  width: min(420px, calc(100vw - 24px));
  margin: auto;
  padding: 22px 20px 18px;
  background: rgba(10, 7, 4, 0.72);
  border: 1px solid rgba(201, 163, 90, 0.55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  backdrop-filter: blur(6px);
}

.rs-select-card #nameinput {
  width: 80%;
  margin: 12px auto 0;
  height: 36px;
  font-size: 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid #c9a35a;
  color: #fff4cc;
}

.rs-select-card #nameinput[readonly],
.rs-select-card #nameinput:disabled {
  cursor: default;
  opacity: 0.92;
  border-color: rgba(201, 163, 90, 0.4);
}

#rs-preset-picker.is-locked .rs-preset {
  pointer-events: none;
  cursor: default;
  opacity: 0.72;
}

body.intro .rs-preset-preview-name {
  color: #f6e27a;
}

body.intro .rs-preset-preview {
  width: 144px;
  height: 144px;
}

body.intro .rs-preset-preview-art {
  width: 128px;
  height: 128px;
  background-size: 640px 1152px;
}

body.intro .rs-preset-preview .rs-preset-armor,
body.intro .rs-preset-preview .rs-preset-weapon {
  background-size: 640px 1152px;
  background-position: 0 -1024px;
}

.game .rs-gate-art,
.game .rs-gate-veil,
.game .rs-gate-bar,
.game .rs-enter-bg,
.game #rs-enter-bg,
.game .rs-screen-hero,
.game .rs-screen-select,
body.game #intro,
body:not(.intro) #intro,
html.rs-playing #intro,
html.rs-playing #rs-screen-hero,
html.rs-playing #rs-screen-select,
html.rs-playing #rs-enter-bg,
html.rs-playing .rs-enter-bg,
html.rs-playing .rs-gate-art,
html.rs-playing .rs-gate-veil,
html.rs-playing .rs-gate-bar,
html.rs-playing #rs-spectate-gate,
html.rs-playing #rs-hero-enter,
body.rs-playing #intro,
body.rs-playing #rs-screen-hero,
body.rs-playing #rs-screen-select,
body.rs-playing #rs-enter-bg,
body.rs-playing .rs-enter-bg,
body.rs-playing .rs-gate-art,
body.rs-playing .rs-gate-veil,
body.rs-playing .rs-gate-bar,
body.rs-playing #rs-spectate-gate,
body.rs-playing #rs-hero-enter,
html.rs-selecting #rs-enter-bg,
body.rs-selecting #rs-enter-bg {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.rs-playing,
html.rs-playing body,
body.rs-playing,
body.game {
  overflow: hidden !important;
  background: #000;
}

#rs-stage,
.rs-stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
}

html.rs-playing #rs-stage,
body.rs-playing #rs-stage,
body.game #rs-stage {
  pointer-events: none;
}

#rs-stage > #container,
#rs-stage > #rs-hud,
#rs-stage > #rs-treasury,
#rs-stage > #rs-chat-toggle,
#rs-stage > #rs-chat-log,
#rs-stage > #rs-spectate-badge {
  pointer-events: auto;
}

html.rs-playing #container,
body.rs-playing #container,
body.intro.rs-playing #container,
body.rs-playing.game #container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.rs-preset-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 6px auto 2px;
  max-width: 380px;
}

.rs-preset-preview {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3d2710;
  border: 2px solid #c9a35a;
  box-shadow: inset 0 0 0 2px #f6e27a;
  box-sizing: border-box;
}

.rs-preset-preview-art {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.rs-preset-preview .rs-preset-armor,
.rs-preset-preview .rs-preset-weapon {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 480px 864px;
  background-position: 0 -768px;
}

.rs-preset-preview[data-preset="scout"] .rs-preset-armor {
  background-image: url("../img/3/clotharmor.png");
}

.rs-preset-preview[data-preset="scout"] .rs-preset-weapon {
  background-image: url("../img/3/sword1.png");
}

.rs-preset-preview[data-preset="warrior"] .rs-preset-armor {
  background-image: url("../img/3/mailarmor.png");
}

.rs-preset-preview[data-preset="warrior"] .rs-preset-weapon {
  background-image: url("../img/3/sword2.png");
}

.rs-preset-preview[data-preset="mage"] .rs-preset-armor {
  background-image: url("../img/3/redarmor.png");
}

.rs-preset-preview[data-preset="mage"] .rs-preset-weapon {
  background-image: url("../img/3/bluesword.png");
}

.rs-preset-preview[data-preset="ranger"] .rs-preset-armor {
  background-image: url("../img/3/leatherarmor.png");
}

.rs-preset-preview[data-preset="ranger"] .rs-preset-weapon {
  background-image: url("../img/3/axe.png");
}

.rs-preset-preview-name {
  margin: 6px 0 8px;
  color: #3b2208;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 18px;
  line-height: 1;
}

.rs-preset-picker {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}

.rs-preset {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 3px 4px;
  border: 2px solid #c9a35a;
  background: #3d2710;
  color: #f6e27a;
  cursor: pointer;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  line-height: 1.1;
}

.rs-preset.is-selected {
  background: #5a3a16;
  box-shadow: inset 0 0 0 2px #f6e27a;
}

.rs-preset-art {
  display: block;
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto 3px;
  overflow: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.rs-preset-art .rs-preset-armor,
.rs-preset-art .rs-preset-weapon {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 0 -256px;
}

.rs-preset[data-preset="scout"] .rs-preset-armor {
  background-image: url("../img/1/clotharmor.png");
}

.rs-preset[data-preset="scout"] .rs-preset-weapon {
  background-image: url("../img/1/sword1.png");
}

.rs-preset[data-preset="warrior"] .rs-preset-armor {
  background-image: url("../img/1/mailarmor.png");
}

.rs-preset[data-preset="warrior"] .rs-preset-weapon {
  background-image: url("../img/1/sword2.png");
  background-size: 160px 288px;
  background-position: 0 -256px;
}

.rs-preset[data-preset="mage"] .rs-preset-armor {
  background-image: url("../img/1/redarmor.png");
}

.rs-preset[data-preset="mage"] .rs-preset-weapon {
  background-image: url("../img/1/bluesword.png");
  background-size: 160px 288px;
  background-position: 0 -256px;
}

.rs-preset[data-preset="ranger"] .rs-preset-armor {
  background-image: url("../img/1/leatherarmor.png");
}

.rs-preset[data-preset="ranger"] .rs-preset-weapon {
  background-image: url("../img/1/axe.png");
  background-size: 160px 288px;
  background-position: 0 -256px;
}

.rs-preset-label {
  display: block;
  font-size: 11px;
  text-align: center;
}

.rs-preset-need {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #d8c48a;
  opacity: 0.9;
}

.rs-preset.is-gated {
  opacity: 0.42;
  cursor: not-allowed;
}

.rs-hold-hint {
  margin: 10px 0 0;
  color: #d8c48a;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.88;
}

.rs-hold-hint.is-error {
  color: #f0b67a;
  opacity: 1;
}

#rs-preset-picker.is-spectate .rs-preset:not([data-preset="scout"]) {
  display: none !important;
}

#rs-preset-picker.is-spectate .rs-hold-hint {
  display: none;
}

#rs-wallet {
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rs-wallet-line {
  margin: 0 0 8px;
  color: #f6e27a;
  font-size: 14px;
  text-shadow: 0 1px 0 #3b2208;
}

.rs-splash-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#rs-spectate-start {
  grid-column: auto;
}

#wallet-connect:not(.rs-gate-connect),
.rs-cta-lg,
#rs-wallet .rs-buy-cta {
  appearance: none;
  border: 2px solid #c9a35a;
  background: #3d2710;
  color: #f6e27a;
  padding: 10px 12px;
  cursor: pointer;
  width: 100%;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .rs-gate-bar {
    padding: 12px 14px 0;
  }

  .rs-hero-ctas {
    gap: 10px;
    width: calc(100vw - 24px);
  }

  .rs-hero-ctas a,
  .rs-hero-ctas button {
    min-height: 52px;
    font-size: 15px;
  }

  .rs-enter {
    font-size: 18px;
    padding: 14px 28px 12px;
  }
}

@media (max-height: 700px) {
  body.intro .rs-preset-preview {
    width: 112px;
    height: 112px;
  }

  body.intro .rs-preset-preview-art {
    width: 96px;
    height: 96px;
  }
}

#wallet-connect:not(.rs-gate-connect).connected {
  border-color: #c9a35a;
  background: #3d2710;
}

.rs-wallet-status {
  margin-top: 6px;
  font-size: 11px;
  color: #efe0b8;
}

.rs-wallet-status.error {
  color: #ffb4a2;
}

.game .rs-treasury {
  width: min(240px, calc(100vw - 16px));
  opacity: 0.92;
}

.rs-treasury-gldx {
  display: none;
}

.rs-hud {
  position: fixed;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 2147482500;
  width: 252px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 20px);
  overflow-x: visible;
  overflow-y: auto;
  padding: 10px 12px;
  background: rgba(12, 8, 4, 0.78);
  border: 1px solid #c9a35a;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  box-sizing: border-box;
  transform: none;
  pointer-events: auto;
}

.rs-gold strong {
  display: block;
  color: #f6e27a;
  font-size: 22px;
  line-height: 1.1;
}

.rs-gold em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.75;
}

.rs-hud-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.rs-hud button,
.rs-panel button,
.rs-invite {
  appearance: none;
  border: 1px solid #7a5318;
  background: #2b1a08;
  color: #f6e27a;
  padding: 7px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}

.rs-hud-actions button {
  flex: 1 1 auto;
  min-width: 64px;
}

.rs-hud button.rs-hud-disabled,
#rs-teleport-home.rs-hud-disabled,
#rs-open-inv.rs-hud-disabled,
#rs-open-trade.rs-hud-disabled,
#rs-open-quests.rs-hud-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  color: #c9b48a;
}

#rs-tour,
.rs-tour {
  pointer-events: none !important;
}

#rs-tour.open .rs-tour-card,
#rs-tour.open .rs-tour-actions,
#rs-tour.open .rs-tour-actions button {
  pointer-events: auto !important;
}

html.rs-touring #rs-hud,
html.rs-touring #rs-hud button,
html.rs-touring #rs-hud a,
body.rs-touring #rs-hud,
body.rs-touring #rs-hud button {
  pointer-events: auto !important;
}

.rs-hud-wallet {
  margin-bottom: 4px;
}

.rs-inv-balances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.rs-inv-balances div {
  padding: 8px 6px;
  background: rgba(43, 26, 8, 0.7);
  border: 1px solid #7a5318;
  text-align: center;
}

.rs-inv-balances span {
  display: block;
  color: #f6e27a;
  font-size: 11px;
}

.rs-inv-balances strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 14px;
  color: #fff4cc;
}

.rs-inv-balances em {
  display: block;
  font-style: normal;
  font-size: 9px;
  opacity: 0.7;
}

.rs-inv-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.rs-inv-slot {
  position: relative;
  min-height: 64px;
  padding: 6px 5px 16px;
  background: rgba(18, 11, 5, 0.92);
  border: 2px solid #7a5318;
  box-shadow: inset 0 0 0 1px #3b2208;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

button.rs-inv-slot {
  cursor: pointer;
  width: 100%;
}

.rs-inv-slot.is-empty {
  background: rgba(12, 8, 4, 0.45);
  border-color: #4a3314;
}

.rs-inv-name {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: #f3e6c5;
}

.rs-inv-qty {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: #f6e27a;
  font-size: 11px;
}

.rs-inv-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 4px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  pointer-events: none;
}

.rs-panel.open button,
.rs-panel.open a,
.rs-panel.open input,
.rs-panel.open select,
.rs-panel.open textarea,
.rs-panel.open label,
.rs-panel.open [data-pay],
.rs-panel.open [data-buy],
.rs-panel.open [data-cancel],
.rs-panel.open [data-offer-item],
.rs-panel.open .rs-inv-slot,
.rs-panel.open .rs-shop-buy,
.rs-panel.open .rs-invite {
  pointer-events: auto !important;
  position: relative;
  z-index: 3;
}

.rs-tour {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  pointer-events: none;
}

.rs-tour.open,
#rs-tour.open {
  display: block !important;
}

.rs-tour-spot {
  position: fixed;
  border: 2px solid #f6e27a;
  box-shadow: 0 0 0 9999px rgba(4, 2, 1, 0.72);
  pointer-events: none;
  z-index: 2147483601;
}

.rs-tour-card {
  position: fixed;
  z-index: 2147483602;
  pointer-events: auto;
  padding: 16px 16px 14px;
  background: #120b05;
  border: 4px solid #c9a35a;
  box-shadow: 0 0 0 4px #3b2208, 8px 8px 0 #000;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

.rs-tour-step {
  margin: 0 0 6px;
  color: #c9a35a;
  font-size: 11px;
}

.rs-tour-card h2 {
  margin: 0 0 8px;
  color: #f6e27a;
  font-size: 18px;
}

.rs-tour-card p {
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.4;
}

.rs-tour-actions {
  display: flex;
  gap: 8px;
}

.rs-tour-actions button {
  flex: 1;
  padding: 8px;
  border: 1px solid #c9a35a;
  background: #2b1a08;
  color: #f6e27a;
  font-family: inherit;
  cursor: pointer;
}

#rs-tour-skip {
  background: transparent;
  color: #f3e6c5;
}

@media (max-width: 720px) {
  .rs-inv-balances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rs-inv-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rs-fee-line {
  font-size: 11px;
  margin-bottom: 8px;
}

#rs-open-fees,
#rs-open-market {
  width: 100%;
  margin-top: 6px;
}

#rs-reward-mint {
  display: block;
  word-break: break-all;
  color: #fff4cc;
  margin-top: 4px;
}

#rs-gldx-claim {
  width: 100%;
}

.rs-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(4, 2, 1, 0.45);
  pointer-events: none;
}

.rs-panel-backdrop.open,
#rs-panel-backdrop.open {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rs-panel {
  display: none;
  position: fixed;
  z-index: 450;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  max-height: min(92vh, calc(100vh - 16px));
  overflow: auto;
  padding: 14px;
  background: rgba(12, 8, 4, 0.94);
  border: 1px solid #c9a35a;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

.rs-panel:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.rs-playing .rs-panel:not(.open),
body.game .rs-panel:not(.open),
html.rs-playing .rs-panel:not(.open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.rs-panel.open,
.rs-panel.open *,
html.rs-playing .rs-panel.open,
html.rs-playing .rs-panel.open *,
body.rs-playing .rs-panel.open,
body.rs-playing .rs-panel.open *,
body.game .rs-panel.open,
body.game .rs-panel.open *,
body.intro .rs-panel.open,
body.intro .rs-panel.open *,
body.intro.rs-playing .rs-panel.open,
body.intro.rs-playing .rs-panel.open *,
body.intro.game .rs-panel.open,
body.intro.game .rs-panel.open *,
html.rs-selecting .rs-panel.open,
html.rs-selecting .rs-panel.open * {
  pointer-events: auto !important;
}

.rs-panel.open,
html.rs-playing .rs-panel.open,
body.rs-playing .rs-panel.open,
body.game .rs-panel.open,
body.intro.rs-playing .rs-panel.open,
body.intro.game .rs-panel.open,
body.intro .rs-panel.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483003 !important;
  width: min(560px, calc(100vw - 16px)) !important;
  max-height: min(80vh, 640px) !important;
}

.rs-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
}

.rs-panel-close,
button.rs-panel-close,
[data-rs-close] {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 2147483646 !important;
  background: #2b1a08;
  border: 1px solid #c9a35a;
  color: #f6e27a;
}

html.rs-panel-open #foreground,
html.rs-panel-open #container,
html.rs-panel-open #canvas,
html.rs-panel-open #background,
html.rs-panel-open #entities,
html.rs-panel-open #canvasborder,
body.rs-panel-open #foreground,
body.rs-panel-open #container,
body.rs-panel-open #canvas,
body.rs-panel-open #background,
body.rs-panel-open #entities,
body.rs-panel-open #canvasborder {
  pointer-events: none !important;
}

.rs-panel-one {
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

.rs-inv-slot.is-on {
  border-color: #f6e27a;
  box-shadow: inset 0 0 0 1px #f6e27a;
}

.rs-trade-more {
  margin-top: 10px;
}

.rs-trade-more summary {
  cursor: pointer;
  color: #f6e27a;
  margin-bottom: 8px;
}

.rs-panel h2,
.rs-panel h3,
.rs-panel h4 {
  margin: 0 0 8px;
  color: #f6e27a;
}

.rs-panel-copy,
.rs-empty,
.rs-status,
.rs-progress {
  font-size: 12px;
  line-height: 1.4;
}

.rs-table-wrap {
  overflow: auto;
}

.rs-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rs-panel th,
.rs-panel td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(201, 163, 90, 0.35);
}

.rs-bag-row,
.rs-quest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(201, 163, 90, 0.25);
}

.rs-quest {
  display: block;
}

.rs-invite {
  display: block;
  width: 100%;
  margin: 4px 0;
  text-align: left;
}

.rs-gold-offer {
  display: block;
  margin: 8px 0;
}

.rs-gold-offer input {
  width: 100%;
  margin-top: 4px;
  background: #1b1006;
  color: #fff4cc;
  border: 1px solid #7a5318;
  padding: 6px;
}

.rs-trade-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.rs-econ-notice {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 455;
  display: none;
  padding: 8px 12px;
  background: rgba(12, 8, 4, 0.92);
  border: 1px solid #c9a35a;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

.rs-econ-notice.show {
  display: block;
}

.rs-howto {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 480;
  background: rgba(8, 5, 2, 0.72);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.rs-howto.open,
.rs-howto:not([hidden]) {
  display: flex;
}

.rs-howto[hidden] {
  display: none !important;
}

.rs-howto-card {
  width: min(420px, calc(100vw - 24px));
  padding: 20px 18px;
  background: rgba(12, 8, 4, 0.96);
  border: 1px solid #c9a35a;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  text-align: left;
}

.rs-howto-card h2 {
  margin: 0 0 12px;
  color: #f6e27a;
}

.rs-howto-card ol {
  margin: 0 0 16px;
  padding-left: 20px;
  line-height: 1.45;
}

.rs-buy-cta,
.rs-howto-card button {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 8px 12px;
  border: 1px solid #7a5318;
  background: #2b1a08;
  color: #f6e27a;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.rs-buy-cta-inline,
.rs-license-link {
  color: #f6e27a;
  text-decoration: none;
}

.rs-license-link {
  font-size: 11px;
  opacity: 0.7;
}

#howto-credits-copy,
#about #game-desc {
  max-width: 70%;
  margin: 24px auto;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .rs-wordmark {
    font-size: 28px;
  }

  .rs-tagline {
    font-size: 11px;
  }

  .rs-treasury {
    top: 6px;
    right: 6px;
    padding: 8px;
    width: min(200px, calc(50vw - 10px));
  }

  .rs-hud {
    top: auto;
    bottom: 86px;
    left: 6px;
    width: min(220px, calc(100vw - 12px));
  }

  #rs-chat-toggle {
    top: 6px;
    right: 6px;
  }

  #chatbox.active,
  body.rs-playing #chatbox.active,
  body.game #chatbox.active,
  html.rs-chat-composer #chatbox {
    bottom: 78px !important;
    width: min(560px, calc(100vw - 16px)) !important;
  }

  #rs-chat-log,
  .rs-chat-log {
    top: 38px;
    right: 6px;
    width: min(220px, calc(100vw - 16px));
    max-height: 140px;
  }

  html.rs-chat-on body.rs-playing #rs-treasury,
  html.rs-chat-on body.game #rs-treasury {
    top: auto;
    bottom: 86px;
    right: 6px;
    width: min(200px, calc(50vw - 10px));
  }
}

.rs-hud-links {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
}

.rs-hud-links a,
.rs-panel-copy a,
.rs-site a {
  color: #f6e27a;
}

.rs-credit-line {
  margin-top: 6px;
  font-size: 11px;
}

.rs-credit-line em,
.rs-fee-line em {
  font-style: normal;
  opacity: 0.75;
}

.rs-credit-line strong {
  color: #f6e27a;
}

.rs-hud-connect {
  display: block;
  width: 100%;
  margin: 10px 0 8px;
  padding: 12px 10px;
  border: 2px solid #c9a35a !important;
  background: #3d2710 !important;
  color: #f6e27a;
  font-size: 16px;
  line-height: 1.2;
}

body.intro .rs-hud-connect,
body.rs-spectating .rs-hud-connect,
.rs-hud-connect[hidden] {
  display: none !important;
}

@font-face {
  font-family: "GraphicPixel";
  src: url("../fonts/graphicpixel-webfont.woff") format("woff"),
    url("../fonts/graphicpixel-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body.rs-site {
  margin: 0;
  min-height: 100vh;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto !important;
  background: #0c0804;
  color: #f3e6c5;
  font-family: "GraphicPixel", Georgia, serif;
}

.rs-site-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  height: auto;
  max-height: none;
  overflow: visible;
}

.rs-site header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid #c9a35a;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.rs-site h1 {
  margin: 0;
  color: #f6e27a;
}

.rs-site h2 {
  color: #f6e27a;
  margin: 28px 0 8px;
}

.rs-site p,
.rs-site li {
  line-height: 1.45;
}

.rs-site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rs-site table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rs-site th,
.rs-site td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(201, 163, 90, 0.35);
}

.rs-item-cell {
  vertical-align: middle;
}

.rs-item-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.rs-shop-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
  flex: 0 0 48px;
  background: #0a0804;
  border: 2px solid #1a1208;
  box-shadow: inset 0 0 0 1px #3d2710;
  border-radius: 3px;
}

.rs-item-name {
  line-height: 1.2;
}

html.rs-market-page .rs-shop-icon,
body.rs-market-page .rs-shop-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

html.rs-market-page .rs-item-label,
body.rs-market-page .rs-item-label {
  min-height: 48px;
}

.rs-panel .rs-shop-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.rs-panel .rs-item-label {
  gap: 8px;
  min-height: 32px;
}

html.rs-market-page .rs-site-wrap,
body.rs-market-page .rs-site-wrap {
  max-width: 1080px;
}

.rs-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin: 16px 0 28px;
}

.rs-shop-card {
  display: flex;
  flex-direction: column;
  background: #1b1006;
  border: 3px solid #7a5318;
  box-shadow: 4px 4px 0 #000;
  color: #f3e6c5;
}

.rs-shop-card-art {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #0a0804;
  border-bottom: 2px solid #3d2710;
  box-shadow: inset 0 0 0 2px #1a1208, inset 0 0 28px rgba(0, 0, 0, 0.45);
}

.rs-shop-card-img {
  width: 100%;
  height: 100%;
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
}

.rs-shop-card-fallback {
  display: block;
  width: 48px;
  height: 48px;
}

.rs-shop-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: 12px 12px 14px;
}

.rs-shop-card-name {
  margin: 0;
  color: #f6e27a;
  font-size: 15px;
  line-height: 1.25;
}

.rs-shop-card-stock {
  margin: 0;
  font-size: 12px;
  opacity: 0.85;
}

.rs-shop-card-price {
  margin: 0;
  color: #fff4cc;
  font-size: 16px;
}

.rs-shop-card-price span {
  color: #c9a35a;
  font-size: 12px;
}

.rs-shop-buy {
  appearance: none;
  margin-top: 6px;
  border: 3px solid #c9a35a;
  background: #3d2710;
  color: #f6e27a;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}

.rs-shop-buy:hover,
.rs-shop-buy:focus {
  background: #4e3314;
}

.rs-shop-card.is-soldout {
  opacity: 0.72;
}

.rs-shop-card-sold {
  margin: 6px 0 0;
  font-size: 12px;
  color: #c9a35a;
}

.rs-shop-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid #c9a35a;
  background: rgba(61, 39, 16, 0.45);
  padding: 14px 12px;
}

@media (max-width: 560px) {
  .rs-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rs-shop-card-art {
    padding: 10px;
  }

  .rs-shop-card-name {
    font-size: 13px;
  }
}

.rs-site .rs-note {
  border: 1px solid #c9a35a;
  background: rgba(61, 39, 16, 0.45);
  padding: 10px 12px;
}

.rs-pay-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.rs-pay-toggle [data-pay] {
  appearance: none;
  border: 3px solid #7a5318;
  background: #2b1a08;
  color: #efe0b8;
  padding: 10px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  box-shadow: 3px 3px 0 #000;
}

.rs-pay-toggle [data-pay].is-on {
  background: #3d2710;
  color: #f6e27a;
  border-color: #c9a35a;
}

.rs-site input,
.rs-site select {
  background: #1b1006;
  color: #fff4cc;
  border: 1px solid #7a5318;
  padding: 6px;
  font-family: inherit;
}

.rs-buy-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.rs-spectate-badge {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 860;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(12, 8, 4, 0.88);
  border: 1px solid #c9a35a;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.rs-spectate-badge[hidden],
.rs-spectate-gate[hidden],
body:not(.rs-spectating) #rs-spectate-badge,
body:not(.rs-spectating) #rs-spectate-gate,
body.rs-selecting #rs-spectate-badge,
body.rs-selecting #rs-spectate-gate,
html.rs-selecting #rs-spectate-badge,
html.rs-selecting #rs-spectate-gate {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.rs-spectate-gate {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 5, 2, 0.72);
  padding: 16px;
}

.rs-spectate-card {
  width: min(420px, 100%);
  padding: 20px 18px;
  background: rgba(12, 8, 4, 0.94);
  border: 1px solid #c9a35a;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  text-align: center;
}

.rs-spectate-card h2 {
  margin: 0 0 10px;
  color: #f6e27a;
}

.rs-spectate-card p {
  margin: 0 0 16px;
  line-height: 1.4;
}

.rs-spectate-card .rs-cta-lg {
  margin-top: 10px;
}

body.rs-spectating #rs-open-trade,
body.rs-spectating #rs-open-quests {
  opacity: 0.45;
}

.rs-docs-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px 0 8px;
}

.rs-docs-hero {
  margin-top: 20px;
  margin-bottom: 20px;
}

@media (min-width: 720px) {
  .rs-docs-media {
    grid-template-columns: 1fr 1fr;
  }

  .rs-docs-one {
    grid-template-columns: 1fr;
  }
}

.rs-docs-media figure {
  margin: 0;
}

.rs-docs-media img,
.rs-docs-media video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c9a35a;
  background: #1b1006;
}

.rs-docs-media figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #efe0b8;
}

html.rs-selecting #rs-hud,
html.rs-selecting #rs-hud *,
body.rs-selecting #rs-hud,
body.rs-selecting #rs-hud *,
html.rs-selecting #rs-open-fees,
html.rs-selecting #rs-open-market,
body.rs-selecting #rs-open-fees,
body.rs-selecting #rs-open-market,
html.rs-selecting button#rs-open-fees,
html.rs-selecting button#rs-open-market,
body.rs-selecting button#rs-open-fees,
body.rs-selecting button#rs-open-market {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.rs-playing #container,
body.rs-playing #container,
body.game #container,
html.rs-playing #canvasborder,
body.rs-playing #canvasborder,
html.rs-playing #canvas,
body.rs-playing #canvas,
html.rs-playing #background,
body.rs-playing #background,
html.rs-playing #entities,
body.rs-playing #entities {
  pointer-events: none !important;
  z-index: 1 !important;
}

html.rs-playing #foreground,
body.rs-playing #foreground,
body.game #foreground {
  pointer-events: auto !important;
  z-index: 1 !important;
}

html:not(.rs-playing) aside#rs-hud,
html:not(.rs-playing) #rs-treasury,
body.intro:not(.game) aside#rs-hud,
body.intro:not(.game) #rs-treasury,
body.intro:not(.rs-playing) aside#rs-hud,
body.intro:not(.rs-playing) #rs-treasury {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.rs-playing body.game aside#rs-hud,
html.rs-playing body.rs-playing:not(.intro) aside#rs-hud,
html.rs-playing body:not(.intro) aside#rs-hud.rs-hud,
body.rs-playing:not(.intro) aside#rs-hud,
body.rs-playing:not(.intro) aside#rs-hud.rs-hud,
body.rs-playing:not(.intro) aside#rs-hud[hidden],
body.game:not(.intro) aside#rs-hud {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: auto !important;
  left: 16px !important;
  right: auto !important;
  bottom: 18px !important;
  transform: none !important;
  width: 252px !important;
  max-width: calc(100vw - 20px) !important;
  z-index: 2147482500 !important;
  font-size: 11px !important;
  overflow: visible !important;
}

html.rs-playing aside#rs-hud *,
html.rs-playing aside#rs-hud button,
html.rs-playing aside#rs-hud a,
body.rs-playing aside#rs-hud *,
body.rs-playing aside#rs-hud button,
body.rs-playing aside#rs-hud a,
body.game aside#rs-hud * {
  pointer-events: auto !important;
}

/* HUD / chat / panels own their clicks. Map walk stays on #foreground. */
body.rs-playing #rs-hud,
body.game #rs-hud,
body.rs-playing #rs-hud *,
body.game #rs-hud *,
body.rs-playing #rs-treasury,
body.game #rs-treasury,
body.rs-playing .rs-panel.open,
body.game .rs-panel.open,
body.rs-playing .rs-panel.open *,
body.game .rs-panel.open *,
body.rs-playing #bar-container,
body.game #bar-container,
body.rs-playing #bar-container *,
body.game #bar-container *,
body.rs-playing #rs-howto,
body.game #rs-howto,
body.rs-playing #population,
body.game #population {
  pointer-events: auto;
}

body.rs-playing #chatbox,
body.game #chatbox,
html.rs-playing #chatbox {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 12px !important;
  top: auto !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 18;
  display: block !important;
  box-sizing: border-box !important;
}

#chatbox.active,
body.rs-playing #chatbox.active,
body.game #chatbox.active,
html.rs-playing #chatbox.active,
html.rs-chat-composer #chatbox,
body.rs-chat-composer #chatbox {
  top: auto !important;
  right: auto !important;
  bottom: 88px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100vw - 24px)) !important;
  height: auto !important;
  min-height: 92px !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  background: #140c04 !important;
  background-image: none !important;
  border: 2px solid #f6e27a !important;
  box-shadow: 0 0 0 2px #000, 0 12px 28px rgba(0, 0, 0, 0.72) !important;
  pointer-events: auto !important;
  z-index: 70 !important;
  display: block !important;
}

#chatbox.rs-chat-pop,
body.rs-playing #chatbox.rs-chat-pop,
body.game #chatbox.rs-chat-pop {
  animation: rs-chat-pulse 0.55s ease-out 2;
}

@keyframes rs-chat-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(246, 226, 122, 0.95), 0 12px 28px rgba(0, 0, 0, 0.72);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(246, 226, 122, 0), 0 12px 28px rgba(0, 0, 0, 0.72);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(246, 226, 122, 0), 0 12px 28px rgba(0, 0, 0, 0.72);
  }
}

body.rs-playing #chatbox form,
body.game #chatbox form {
  display: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
}

body.rs-playing #chatbox.active form,
body.game #chatbox.active form,
html.rs-chat-composer #chatbox form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.rs-chat-label {
  display: none;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
}

#chatbox.active .rs-chat-label,
html.rs-chat-composer .rs-chat-label {
  display: block;
}

.rs-chat-row {
  display: none;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

#chatbox.active .rs-chat-row,
html.rs-chat-composer .rs-chat-row {
  display: flex;
}

body.rs-playing #chatinput,
body.game #chatinput {
  pointer-events: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff6d2;
  width: 100%;
  height: 0;
  padding: 0;
}

body.rs-playing #chatbox.active #chatinput,
body.game #chatbox.active #chatinput,
html.rs-chat-composer #chatinput,
body.rs-chat-composer #chatinput {
  pointer-events: auto !important;
  display: block !important;
  flex: 1 1 auto;
  width: auto !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 12px !important;
  background: #0a0602 !important;
  border: 1px solid #c9a35a !important;
  color: #fff6d2 !important;
  font-size: 18px !important;
  line-height: 48px !important;
  caret-color: #f6e27a;
}

#rs-chat-toggle {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 40;
  min-width: 92px;
  padding: 10px 14px;
  border: 2px solid #f6e27a;
  background: #2b1a08;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto !important;
  box-shadow: 0 4px 0 #000;
}

body.rs-playing #rs-chat-toggle,
body.game #rs-chat-toggle,
html.rs-playing #rs-chat-toggle {
  display: block !important;
}

#rs-chat-toggle[aria-pressed="false"] {
  color: #f3e6c5;
  background: rgba(18, 11, 5, 0.86);
}

#rs-chat-log,
.rs-chat-log {
  display: none;
  position: fixed;
  top: 42px;
  right: 10px;
  width: min(268px, calc(100vw - 280px));
  max-height: 178px;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: none !important;
  z-index: 25;
  box-sizing: border-box;
  padding: 6px 8px;
  background: rgba(12, 8, 4, 0.58);
  border: 1px solid rgba(201, 163, 90, 0.45);
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}

html.rs-chat-on #rs-chat-log,
html.rs-chat-on .rs-chat-log,
body.rs-playing.rs-chat-on #rs-chat-log,
body.game.rs-chat-on #rs-chat-log {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.rs-chat-composer #rs-chat-log,
body.rs-chat-composer #rs-chat-log {
  top: 42px;
}

html.rs-chat-off #chatbox:not(.active),
body.rs-chat-off #chatbox:not(.active) {
  display: none !important;
}

html.rs-chat-on #rs-chat-log,
html.rs-playing #rs-chat-log,
body.rs-playing #rs-chat-log,
body.game #rs-chat-log {
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
}

#rs-chat-log p,
.rs-chat-log p {
  margin: 0 0 3px;
  pointer-events: none !important;
}

#rs-chat-log strong,
.rs-chat-log strong {
  color: #f6e27a;
  font-weight: normal;
}

#rs-chat-log .rs-chat-empty {
  opacity: 0.7;
  margin: 0;
}

body.intro:not(.rs-playing):not(.game) #rs-chat-log,
body.intro:not(.rs-playing):not(.game) #rs-chat-toggle,
body.intro:not(.rs-playing):not(.game) #rs-tour,
html.rs-selecting #rs-chat-log,
html.rs-selecting #rs-chat-toggle,
html.rs-selecting #rs-tour {
  display: none !important;
}

html.rs-chat-on body.rs-playing #rs-treasury,
html.rs-chat-on body.game #rs-treasury {
  top: 228px;
  right: 10px;
}

html.rs-chat-off body.rs-playing #rs-treasury,
html.rs-chat-off body.game #rs-treasury {
  top: 48px;
  right: 10px;
}

#chatsend {
  appearance: none;
  display: none;
  position: static;
  right: auto;
  top: auto;
  transform: none;
  height: 48px;
  min-width: 84px;
  padding: 0 14px;
  border: 1px solid #f6e27a;
  background: #2b1a08;
  color: #f6e27a;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
  flex: 0 0 auto;
}

body.rs-playing #chatbox.active #chatsend,
body.game #chatbox.active #chatsend,
html.rs-chat-composer #chatsend {
  display: block;
  pointer-events: auto !important;
}

#chatsend:active {
  transform: translate(1px, 1px);
}

html.rs-chat-lock #foreground,
html.rs-chat-lock #background,
html.rs-chat-lock #entities,
html.rs-chat-lock #canvas,
body.rs-chat-lock #foreground,
body.rs-chat-lock #background,
body.rs-chat-lock #entities,
body.rs-chat-lock #canvas {
  pointer-events: none !important;
}

html.rs-chat-lock #chatbox,
html.rs-chat-lock #chatinput,
html.rs-chat-lock #chatsend,
html.rs-chat-lock #rs-hud,
html.rs-chat-lock .rs-panel,
html.rs-chat-lock #bar-container,
body.rs-chat-lock #chatbox,
body.rs-chat-lock #chatinput,
body.rs-chat-lock #chatsend,
body.rs-chat-lock #rs-hud,
body.rs-chat-lock .rs-panel {
  pointer-events: auto !important;
}

body.rs-playing #bar-container,
body.game #bar-container,
html.rs-playing #bar-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

body.rs-playing #healthbar,
body.game #healthbar,
body.rs-playing #hitpoints,
body.game #hitpoints,
body.rs-playing #weapon,
body.game #weapon,
body.rs-playing #armor,
body.game #armor,
body.rs-playing #barbuttons,
body.game #barbuttons,
body.rs-playing .barbutton,
body.game .barbutton,
body.rs-playing #playercount,
body.game #playercount,
body.rs-playing #notifications,
body.game #notifications {
  visibility: visible !important;
  pointer-events: auto !important;
}

body.rs-playing #rs-hud,
body.game #rs-hud,
html.rs-playing aside#rs-hud {
  z-index: 2147482500 !important;
}

.rs-death {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 1, 0.72);
  pointer-events: auto;
}

.rs-death.rs-open,
.rs-death:not([hidden]),
html.rs-playing #rs-death.rs-open,
html.rs-playing #rs-death:not([hidden]),
html.rs-dead #rs-death,
html.rs-dead #rs-death.rs-open,
body.rs-playing #rs-death.rs-open,
body.rs-playing #rs-death:not([hidden]),
body.death #rs-death,
body.death #rs-death:not([hidden]),
body.game.death #rs-death,
body.game.death #rs-death:not([hidden]),
body.rs-dead #rs-death {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483646 !important;
}

html.rs-dead aside#rs-hud,
body.rs-dead aside#rs-hud,
body.death aside#rs-hud,
html.rs-dead #chatbox,
body.rs-dead #chatbox,
body.death #chatbox,
html.rs-dead #bar-container,
body.rs-dead #bar-container {
  pointer-events: none !important;
}

html.rs-dead #rs-death,
html.rs-dead #rs-death *,
body.rs-dead #rs-death,
body.rs-dead #rs-death *,
body.death #rs-death,
body.death #rs-death * {
  pointer-events: auto !important;
}

.rs-death-card {
  width: min(420px, calc(100vw - 24px));
  padding: 28px 22px 24px;
  text-align: center;
  background: #1b1006;
  border: 4px solid #c9a35a;
  box-shadow: 0 0 0 4px #3b2208, 8px 8px 0 #000;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

.rs-death-card p {
  margin: 0 0 18px;
  color: #f6e27a;
  font-size: 22px;
  line-height: 1.4;
}

.rs-death-card em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: #efe0b8;
}

#rs-respawn {
  appearance: none;
  border: 3px solid #7a5318;
  background: #2b1a08;
  color: #f6e27a;
  padding: 10px 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  box-shadow: 4px 4px 0 #000;
}

#rs-respawn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

#rs-respawn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.rs-death-hint {
  margin: -8px 0 16px !important;
  font-size: 13px !important;
  color: #efe0b8 !important;
  line-height: 1.45;
}

.rs-boot {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(40, 24, 8, 0.35), rgba(4, 2, 1, 0.92)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0,
      rgba(0, 0, 0, 0.18) 2px,
      transparent 2px,
      transparent 4px
    ),
    #070503;
  pointer-events: auto;
  image-rendering: pixelated;
}

.rs-boot.open,
html.rs-selecting #rs-boot.open,
body.rs-selecting #rs-boot.open,
html.rs-playing #rs-boot.open,
body.rs-playing #rs-boot.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rs-boot[hidden]:not(.open) {
  display: none !important;
}

.rs-onboard-modal {
  position: fixed;
  inset: 0;
  z-index: 960;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 2, 1, 0.72);
  pointer-events: auto;
}

.rs-onboard-modal.open,
#rs-play-gate.open,
#rs-spectate-warn.open {
  display: flex !important;
  visibility: visible !important;
}

.rs-onboard-modal[hidden]:not(.open) {
  display: none !important;
}

.rs-onboard-card {
  width: min(460px, calc(100vw - 24px));
  padding: 26px 22px 20px;
  background: #120b05;
  border: 4px solid #c9a35a;
  box-shadow: 0 0 0 4px #3b2208, 8px 8px 0 #000;
  text-align: center;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  color: #f3e6c5;
}

.rs-onboard-card h2 {
  margin: 0 0 12px;
  color: #f6e27a;
  font-size: 22px;
  line-height: 1.25;
}

.rs-onboard-card p {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
}

.rs-onboard-card .rs-cta-lg,
.rs-onboard-card .rs-cta-ghost {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 10px;
  border: 1px solid #c9a35a;
  background: #2b1a08;
  color: #f6e27a;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.rs-onboard-card .rs-cta-ghost {
  background: transparent;
  color: #f3e6c5;
}

.rs-onboard-back {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  border: 0;
  background: none;
  color: #c9a35a;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

html.rs-playing #rs-play-gate,
html.rs-playing #rs-spectate-warn,
body.rs-playing #rs-play-gate,
body.rs-playing #rs-spectate-warn,
body.game #rs-play-gate,
body.game #rs-spectate-warn {
  display: none !important;
}

.rs-boot-card {
  width: min(460px, calc(100vw - 24px));
  padding: 28px 22px 22px;
  background: #120b05;
  border: 4px solid #c9a35a;
  box-shadow: 0 0 0 4px #3b2208, 8px 8px 0 #000;
  text-align: center;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
  color: #f3e6c5;
}

.rs-boot-wordmark {
  margin: 0 0 8px;
  color: #f6e27a;
  font-size: 42px;
  letter-spacing: 0.1em;
  text-shadow: 3px 3px 0 #3b2208;
}

#rs-boot-title {
  margin: 0 0 18px;
  color: #fff4cc;
  font-size: 16px;
  font-weight: normal;
}

.rs-boot-track {
  height: 18px;
  border: 3px solid #7a5318;
  background: #2b1a08;
  box-shadow: inset 2px 2px 0 #000;
  overflow: hidden;
}

.rs-boot-bar-fill {
  height: 100%;
  width: 12%;
  background:
    repeating-linear-gradient(
      90deg,
      #f6e27a 0,
      #f6e27a 8px,
      #c9a35a 8px,
      #c9a35a 16px
    );
  image-rendering: pixelated;
}

.rs-boot-pct {
  margin: 8px 0 14px;
  color: #c9a35a;
  font-size: 12px;
}

.rs-boot-tip {
  min-height: 3.2em;
  margin: 0 0 16px;
  color: #efe0b8;
  font-size: 13px;
  line-height: 1.45;
}

.rs-boot-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.rs-boot-actions button {
  appearance: none;
  border: 3px solid #7a5318;
  background: #2b1a08;
  color: #f6e27a;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  box-shadow: 3px 3px 0 #000;
}

.rs-boot-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
}

#rs-boot-retry[hidden] {
  display: none !important;
}

#rs-boot[data-kind="retry"] #rs-boot-title {
  color: #f6e27a;
}

.rs-afk {
  position: fixed;
  inset: 0;
  z-index: 860;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 1, 0.78);
  pointer-events: auto;
}

.rs-afk.open,
html.rs-afk #rs-afk.open,
body.rs-afk #rs-afk.open,
html.rs-playing #rs-afk.open,
body.rs-playing #rs-afk.open {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.rs-afk[hidden]:not(.open) {
  display: none !important;
}

.rs-afk-card {
  width: min(420px, calc(100vw - 24px));
  padding: 28px 22px 24px;
  text-align: center;
  background: #120b05;
  border: 4px solid #c9a35a;
  box-shadow: 0 0 0 4px #3b2208, 8px 8px 0 #000;
  color: #f3e6c5;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

.rs-afk-wordmark {
  margin: 0 0 10px;
  color: #f6e27a;
  font-size: 36px;
  letter-spacing: 0.1em;
}

#rs-afk-copy {
  margin: 0 0 18px;
  color: #fff4cc;
  font-size: 22px;
  font-weight: normal;
}

#rs-afk-resume {
  appearance: none;
  border: 3px solid #7a5318;
  background: #2b1a08;
  color: #f6e27a;
  padding: 14px 28px;
  cursor: pointer;
  font-family: inherit;
  font-size: 20px;
  box-shadow: 4px 4px 0 #000;
}

#rs-afk-resume:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

.rs-afk-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: #efe0b8;
}

.rs-afk-exit {
  margin: 0 0 12px;
  color: #f6e27a;
  text-align: center;
  font-family: "GraphicPixel", "Advocut", Georgia, serif;
}

html.rs-docs-page,
html.rs-market-page,
html.rs-site-page,
html.rs-docs-page body,
html.rs-market-page body,
body.rs-docs-page,
body.rs-market-page,
body.rs-site {
  overflow: auto !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  height: auto !important;
  max-height: none !important;
  min-height: 100% !important;
  position: static !important;
}

html.rs-docs-page .rs-site-wrap,
html.rs-market-page .rs-site-wrap,
body.rs-docs-page .rs-site-wrap,
body.rs-market-page .rs-site-wrap {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}

html.rs-playing aside#rs-hud,
html.rs-playing aside#rs-hud[hidden],
html.rs-playing body.game aside#rs-hud,
html.rs-playing body.game aside#rs-hud[hidden],
html.rs-playing body.rs-playing aside#rs-hud,
body.rs-playing aside#rs-hud,
body.rs-playing aside#rs-hud[hidden],
body.game aside#rs-hud,
body.game aside#rs-hud[hidden] {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: auto !important;
  left: 16px !important;
  bottom: 18px !important;
  z-index: 2147482500 !important;
  isolation: isolate;
}

html.rs-playing aside#rs-hud button,
html.rs-playing aside#rs-hud a,
body.rs-playing aside#rs-hud button,
body.rs-playing aside#rs-hud a,
body.game aside#rs-hud button,
body.game aside#rs-hud a {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2147482501 !important;
}

html.rs-playing #foreground,
body.rs-playing #foreground,
body.game #foreground {
  z-index: 1 !important;
}

#rs-tour:not(.open),
#rs-tour[hidden],
html:not(.rs-touring) #rs-tour,
body:not(.rs-touring) #rs-tour {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

#rs-tour:not(.open) *,
#rs-tour[hidden] *,
html:not(.rs-touring) #rs-tour * {
  pointer-events: none !important;
  display: none !important;
}

/* Full-bleed play surface: canvas fills the viewport; chrome overlays it. */
html.rs-playing.rs-fit,
html.rs-playing.rs-fit body,
body.rs-playing.rs-fit,
body.game.rs-fit {
  overflow: hidden !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #000 !important;
}

html.rs-playing.rs-fit #rs-stage,
html.rs-playing.rs-fit .rs-stage,
body.rs-playing.rs-fit #rs-stage,
body.game.rs-fit #rs-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  transform: none !important;
}

html.rs-playing #container,
html.rs-playing body #container,
html.rs-playing body.upscaled #container,
html.rs-playing body.game #container,
html.rs-playing.rs-fit #container,
html.rs-playing.rs-fit #rs-stage > #container,
body.rs-playing #container,
body.game #container,
body.game.upscaled #container,
body.rs-playing.rs-fit #container,
body.game.rs-fit #container {
  position: absolute !important;
  left: 5vw !important;
  top: calc(6vh + 52px) !important;
  right: auto !important;
  bottom: auto !important;
  width: 90vw !important;
  height: calc(78vh - 52px) !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

html.rs-playing #canvasborder,
html.rs-playing.rs-fit #canvasborder,
body.rs-playing #canvasborder,
body.game #canvasborder,
body.game.upscaled #canvasborder {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  box-sizing: border-box !important;
}

html.rs-playing #canvas,
html.rs-playing #background,
html.rs-playing #entities,
html.rs-playing #foreground,
html.rs-playing.rs-fit #canvas,
html.rs-playing.rs-fit #background,
html.rs-playing.rs-fit #entities,
html.rs-playing.rs-fit #foreground,
body.rs-playing #canvas,
body.rs-playing #background,
body.rs-playing #entities,
body.rs-playing #foreground,
body.game #canvas,
body.game #background,
body.game #entities,
body.game #foreground,
body.game.upscaled #canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}

html.rs-playing #bar-container,
html.rs-playing.rs-fit #bar-container,
body.rs-playing #bar-container,
body.game #bar-container {
  position: fixed !important;
  top: 8px !important;
  bottom: auto !important;
  left: 5vw !important;
  right: auto !important;
  width: 90vw !important;
  height: auto !important;
  max-height: 56px !important;
  margin: 0 !important;
  z-index: 40 !important;
  transform: none !important;
}

html.rs-playing.rs-fit aside#rs-hud,
html.rs-playing.rs-fit aside#rs-hud.rs-hud,
html.rs-playing.rs-fit aside#rs-hud[hidden],
html.rs-playing aside#rs-hud,
body.rs-playing.rs-fit aside#rs-hud,
body.game.rs-fit aside#rs-hud,
body.rs-playing aside#rs-hud,
body.game aside#rs-hud {
  position: fixed !important;
  top: auto !important;
  left: 16px !important;
  right: auto !important;
  bottom: 18px !important;
  width: 252px !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}

html.rs-playing.rs-fit #rs-treasury,
html.rs-playing.rs-fit .rs-treasury,
html.rs-chat-on.rs-fit body.rs-playing #rs-treasury,
html.rs-chat-off.rs-fit body.rs-playing #rs-treasury,
html.rs-playing #rs-treasury,
body.rs-playing.rs-fit #rs-treasury,
body.game.rs-fit #rs-treasury,
body.rs-playing #rs-treasury,
body.game #rs-treasury {
  position: fixed !important;
  top: calc(6vh + 60px) !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 240px !important;
  max-width: none !important;
  transform: none !important;
}

html.rs-playing.rs-fit.rs-chat-on #rs-treasury,
html.rs-playing.rs-chat-on #rs-treasury,
body.rs-playing.rs-fit.rs-chat-on #rs-treasury,
body.rs-playing.rs-chat-on #rs-treasury {
  top: calc(6vh + 60px) !important;
}

html.rs-playing.rs-fit #rs-chat-toggle,
html.rs-playing #rs-chat-toggle,
body.rs-playing.rs-fit #rs-chat-toggle,
body.rs-playing #rs-chat-toggle,
body.game #rs-chat-toggle {
  position: fixed !important;
  top: 12px !important;
  right: 5vw !important;
  left: auto !important;
  transform: none !important;
}

html.rs-playing.rs-fit #rs-chat-log,
html.rs-playing.rs-fit .rs-chat-log,
html.rs-playing #rs-chat-log,
body.rs-playing.rs-fit #rs-chat-log,
body.rs-playing #rs-chat-log {
  position: fixed !important;
  top: 10px !important;
  right: calc(5vw + 108px) !important;
  left: auto !important;
  width: 240px !important;
  max-height: 44px !important;
  max-width: none !important;
  transform: none !important;
}

html.rs-playing.rs-fit #rs-spectate-badge,
html.rs-playing #rs-spectate-badge,
body.rs-playing.rs-fit #rs-spectate-badge,
body.rs-playing #rs-spectate-badge {
  position: absolute !important;
  transform: none !important;
}

html.rs-playing footer,
body.rs-playing footer,
body.game footer {
  display: none !important;
}