:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #081013;
  color: #f4f0df;
  --ink: #080c0f;
  --panel: rgba(8, 13, 15, 0.78);
  --panel-strong: rgba(8, 12, 14, 0.92);
  --line: rgba(255, 243, 168, 0.14);
  --muted: #b6c0ad;
  --gold: #ffdc73;
  --green: #80b360;
  --blue: #8ed8ff;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 15%, rgba(94, 133, 121, 0.22), transparent 32%),
    linear-gradient(140deg, #0f2225 0%, #10171e 55%, #070b0e 100%);
}
button { font: inherit; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 358px;
  min-height: 100vh;
}

.stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
    radial-gradient(circle at 50% 55%, rgba(114, 146, 100, 0.08), transparent 42%);
}

.stage canvas.waystone-canvas {
  display: block;
  width: 100%;
  height: 100vh;
  outline: none;

  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
}

.topbar {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}
.realm-title,
.action-strip,
.tooltip-card {
  pointer-events: auto;
  border: 1px solid rgba(255, 243, 168, 0.14);
  background: rgba(7, 11, 13, 0.78);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
}
.realm-title {
  width: min(430px, 44vw);
  padding: 16px 18px;
  border-radius: 18px;
}
.eyebrow {
  margin: 0 0 5px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.realm-title h1 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2.15rem); line-height: 1; }
.realm-title p { margin: 9px 0 0; color: #d7dfcf; line-height: 1.45; }

.action-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 500px;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
}
.action-strip button,
.realm-switch button,
.primary-action {
  min-height: 38px;
  border: 1px solid rgba(255, 243, 168, 0.15);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(73, 91, 91, .92), rgba(39, 53, 55, .95));
  color: #f5f2de;
  cursor: pointer;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 18px rgba(0,0,0,.24);
}
.action-strip button { padding: 0 13px; }
.action-strip button:hover,
.realm-switch button:hover,
.realm-switch button.is-active,
.primary-action:hover { filter: brightness(1.18); transform: translateY(-1px); }
.primary-action {
  width: 100%;
  background: linear-gradient(180deg, #866e2d, #4a3c19);
  color: #fff3a8;
}

.side-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border-left: 1px solid rgba(255, 243, 168, 0.1);
  background: linear-gradient(180deg, rgba(7, 11, 13, 0.90), rgba(5, 8, 9, 0.96));
  box-shadow: -18px 0 70px rgba(0,0,0,.28);
  overflow-y: auto;
}
.panel {
  padding: 15px;
  border: 1px solid rgba(255, 243, 168, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 42px rgba(0,0,0,.18);
}
.brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: radial-gradient(circle at 32% 20%, #ffe98b, #bf7b25 72%);
  color: #2b1905;
  font-weight: 1000;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 8px 24px rgba(0,0,0,.32);
}
.panel h2 { margin: 0 0 10px; font-size: .96rem; }
.panel p,
.panel li { color: #d7decf; line-height: 1.45; }
.panel p { margin: 0; }
.subtle { color: var(--muted); font-size: .86rem; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 11px; border-radius: 14px; background: rgba(0,0,0,.23); border: 1px solid rgba(255,255,255,.05); }
.label { display: block; margin-bottom: 4px; color: #aab9a4; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stat strong { font-size: 1.25rem; }
.realm-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.minimap { width: 100%; height: 188px; border: 1px solid rgba(255, 243, 168, 0.12); border-radius: 15px; background: rgba(0,0,0,.24); }
.nearby-card { min-height: 52px; padding: 11px 12px; border: 1px solid rgba(255, 243, 168, 0.18); border-radius: 14px; background: rgba(255, 243, 168, 0.075); color: #f4f0df; line-height: 1.4; }
.log-list { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.log-list li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.075); color: #d4dccd; }
.hotbar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,243,168,.12);
  border-radius: 18px;
  background: rgba(7, 11, 13, .72);
  box-shadow: 0 16px 48px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08);
}
.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(51,61,64,.95), rgba(25,31,34,.95));
  border: 1px solid rgba(255,255,255,.08);
  color: #f4f0df;
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255,255,255,.1);
}
.slot small {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 6px;
  background: #f4f0df;
  color: #1e2527;
  font-size: .68rem;
}
.slot.is-active { outline: 2px solid #58d977; }

.mobile-help {
  display: none;
  position: absolute;
  left: 18px;
  bottom: 95px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(7,11,13,.68);
  border: 1px solid rgba(255,255,255,.1);
  color: #d7dfcf;
}

@media (max-width: 980px) {
  body { overflow: auto; }
  .app-shell { grid-template-columns: 1fr; }
  .stage canvas.waystone-canvas { height: 66vh; }
  .topbar { position: static; padding: 12px; background: #101719; }
  .realm-title { width: auto; max-width: none; }
  .side-panel { border-left: 0; border-top: 1px solid rgba(255, 243, 168, 0.1); }
  .mobile-help { display: block; }
}



.move-hint {
  position: fixed;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  padding: 6px 9px;
  border: 1px solid rgba(255, 226, 116, .18);
  border-radius: 9px;
  background: rgba(8, 12, 14, .74);
  color: #fff2b0;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
  transform: translateY(2px);
  transition: opacity .08s ease, transform .08s ease;
}

.move-hint.is-visible {
  opacity: .82;
  transform: translateY(0);
}



.diagnostics-panel[hidden] {
  display: none;
}

.diagnostics-panel {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  gap: 4px;
  min-width: 220px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 226, 116, .22);
  border-radius: 14px;
  background: rgba(5, 9, 10, .84);
  color: #dce6dc;
  font: 700 .72rem/1.35 system-ui, -apple-system, Segoe UI, sans-serif;
  box-shadow: 0 18px 45px rgba(0,0,0,.38);
  backdrop-filter: blur(12px);
}

.diagnostics-panel strong {
  color: #ffe274;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
}

.diagnostics-panel span {
  display: block;
  opacity: .86;
}


/* V11: lock game viewport so HUD text/click state never changes camera aspect. */
html,
body,
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#app {
  min-width: 0;
  min-height: 0;
}

.stage {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: size layout paint;
}

.side-panel {
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  contain: layout paint;
}

.panel,
.nearby-card,
.log-list,
.stat {
  overflow-wrap: break-word;
  word-break: normal;
}

.waystone-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: auto;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
}



/* V13: cleaner game view after removing the old top-left info panel. */
.topbar {
  justify-content: flex-end;
}

.action-strip {
  max-width: 470px;
}

.action-tooltip {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: 168px;
  max-width: 230px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 226, 116, .30);
  border-radius: 13px;
  background: rgba(6, 10, 12, .90);
  color: #f5f2de;
  box-shadow: 0 16px 46px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 12px) scale(.98);
  transition: opacity .08s ease, transform .08s ease;
}

.action-tooltip.is-visible {
  opacity: 1;
  transform: translate(12px, 12px) scale(1);
}

.action-tooltip__eyebrow {
  color: #ffdc73;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.action-tooltip__title {
  display: block;
  font-size: .88rem;
  line-height: 1.12;
  color: #fff4bd;
}

.action-tooltip__body {
  color: #d7dfcf;
  font-size: .76rem;
  line-height: 1.25;
}

.action-toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 18;
  min-width: 260px;
  max-width: min(560px, 54vw);
  transform: translateX(-50%);
  padding: 9px 14px;
  border: 1px solid rgba(255, 226, 116, .18);
  border-radius: 14px;
  background: rgba(7, 11, 13, .72);
  color: #f5f2de;
  font-size: .82rem;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 16px 44px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.action-toast[data-state="nearby"] {
  border-color: rgba(88, 217, 119, .34);
  color: #dfffe7;
}

.action-toast[data-state="walking"] {
  border-color: rgba(142, 216, 255, .30);
  color: #dff6ff;
}

@media (max-width: 980px) {
  .action-toast {
    display: none;
  }

  .action-strip {
    max-width: none;
  }
}



/* V14 gameplay action progress. */
.action-progress {
  position: absolute;
  left: 50%;
  bottom: 142px;
  z-index: 22;
  width: min(420px, 46vw);
  transform: translateX(-50%);
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 226, 116, .24);
  border-radius: 14px;
  background: rgba(6, 10, 12, .82);
  box-shadow: 0 18px 48px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
}

.action-progress[hidden] {
  display: none;
}

.action-progress__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #fff1b5;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.action-progress__top span {
  color: #d7dfcf;
}

.action-progress__track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(10, 14, 16, .86);
  border: 1px solid rgba(255,255,255,.08);
}

.action-progress__track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ade80, #ffe274);
  box-shadow: 0 0 18px rgba(88, 217, 119, .42);
  transition: width .08s linear;
}

.action-toast[data-state="working"] {
  border-color: rgba(255, 226, 116, .36);
  color: #fff1b5;
}

@media (max-width: 980px) {
  .action-progress {
    display: none;
  }
}



/* V14.1 OSRS-style object context menu. */
.context-menu {
  position: fixed;
  z-index: 60;
  min-width: 172px;
  padding: 5px;
  border: 1px solid rgba(255, 226, 116, .34);
  border-radius: 10px;
  background: rgba(6, 9, 10, .94);
  box-shadow: 0 18px 48px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  color: #f5f2de;
  user-select: none;
}

.context-menu[hidden] {
  display: none;
}

.context-menu__title {
  padding: 7px 9px 6px;
  color: #ffe274;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 3px;
}

.context-menu button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f5f2de;
  font: 850 .78rem/1.1 system-ui, -apple-system, Segoe UI, sans-serif;
  text-align: left;
  cursor: pointer;
}

.context-menu button:hover {
  background: rgba(255, 226, 116, .13);
  color: #fff4bd;
}

.context-menu button[data-action="primary"] {
  color: #b9ffd0;
}

.context-menu button[data-action="examine"] {
  color: #d9e4d2;
}

.context-menu kbd {
  opacity: .55;
  font: 800 .62rem/1 system-ui;
}



/* V15: OSRS-inspired in-game HUD. Removes external browser-style sidebar. */
html,
body,
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.app-shell {
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: size layout paint;
}

.stage canvas.waystone-canvas,
.waystone-canvas {
  display: block;
  width: 100vw !important;
  height: 100vh !important;
  outline: none;
  image-rendering: auto;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.topbar,
.side-panel,
.panel,
.brand-card,
.realm-switch {
  display: none !important;
}

.osrs-hud {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 18;
  width: 294px;
  display: grid;
  gap: 10px;
  pointer-events: none;
  color: #f5f2de;
}

.osrs-hud > * {
  pointer-events: auto;
}

.osrs-orb-panel,
.osrs-minimap-panel,
.osrs-stats-panel,
.osrs-info-panel,
.osrs-chatbox {
  border: 1px solid rgba(255, 226, 116, .14);
  background: rgba(7, 10, 11, .80);
  box-shadow: 0 18px 58px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
}

.osrs-orb-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 17px;
}

.osrs-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 20%, #ffe98b, #bf7b25 72%);
  color: #2b1905;
  font-weight: 1000;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 8px 24px rgba(0,0,0,.32);
}

.osrs-orb-panel strong,
.osrs-orb-panel span {
  display: block;
}

.osrs-orb-panel strong {
  font-size: .92rem;
}

.osrs-orb-panel span {
  color: #d7decf;
  font-size: .74rem;
}

.osrs-minimap-panel {
  padding: 9px;
  border-radius: 20px;
}

.osrs-minimap-panel .minimap {
  display: block;
  width: 100%;
  height: 166px;
  border-radius: 14px;
  border: 1px solid rgba(255, 226, 116, .14);
  background: rgba(0,0,0,.30);
}

.osrs-action-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 7px;
  border-radius: 16px;
  border: 1px solid rgba(255, 226, 116, .14);
  background: rgba(7, 10, 11, .78);
  box-shadow: 0 14px 42px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.osrs-action-tabs button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 35px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(63,75,77,.96), rgba(28,34,36,.96));
  color: #fff2b0;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 6px 16px rgba(0,0,0,.23);
}

.osrs-action-tabs button:hover {
  filter: brightness(1.16);
  transform: translateY(-1px);
}

.osrs-stats-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 9px;
  border-radius: 18px;
}

.osrs-stat {
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.30);
}

.osrs-stat span {
  display: block;
  margin-bottom: 4px;
  color: #aab9a4;
  font-size: .64rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.osrs-stat strong {
  display: block;
  color: #fff5c8;
  font-size: 1.16rem;
  line-height: 1;
}

.osrs-info-panel {
  padding: 10px 11px;
  border-radius: 16px;
}

.osrs-info-panel h2 {
  margin: 0 0 7px;
  color: #f5f2de;
  font-size: .78rem;
  font-weight: 1000;
}

.osrs-info-panel p,
.osrs-info-panel .nearby-card {
  margin: 0;
  color: #d7decf;
  font-size: .78rem;
  line-height: 1.35;
}

.osrs-info-panel .nearby-card {
  min-height: 0;
  padding: 8px 9px;
  border-radius: 11px;
  border: 1px solid rgba(255, 226, 116, .16);
  background: rgba(255, 243, 168, .065);
}

.osrs-chatbox {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 19;
  width: min(430px, 34vw);
  max-height: 160px;
  padding: 11px 13px;
  border-radius: 16px;
  pointer-events: auto;
  overflow: hidden;
}

.osrs-chatbox .log-list {
  display: grid;
  gap: 6px;
  max-height: 136px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.osrs-chatbox .log-list li {
  padding: 0;
  border-bottom: 0;
  color: #d7decf;
  font-size: .78rem;
  line-height: 1.32;
}

.hotbar {
  bottom: 18px;
}

.action-toast {
  bottom: 92px;
}

.action-progress {
  bottom: 136px;
}

@media (max-width: 1050px) {
  .osrs-hud {
    width: 258px;
  }

  .osrs-info-panel {
    display: none;
  }

  .osrs-chatbox {
    width: min(380px, 46vw);
  }
}



/* V16 inventory + bank panel. */
.osrs-inventory-panel {
  padding: 8px;
  border: 1px solid rgba(255, 226, 116, .14);
  border-radius: 18px;
  background: rgba(7, 10, 11, .80);
  box-shadow: 0 18px 58px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
}

.osrs-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.osrs-panel-tabs button,
.bank-actions button {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(63,75,77,.96), rgba(28,34,36,.96));
  color: #d7decf;
  font: 900 .72rem/1 system-ui, -apple-system, Segoe UI, sans-serif;
  padding: 8px 9px;
  cursor: pointer;
}

.osrs-panel-tabs button.is-active {
  color: #fff4bd;
  border-color: rgba(255, 226, 116, .32);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, .10);
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.inventory-slot,
.bank-slot {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.32);
  color: #f5f2de;
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}

.inventory-slot {
  cursor: pointer;
}

.inventory-slot:hover {
  border-color: rgba(255, 226, 116, .26);
  background: rgba(255, 226, 116, .08);
}

.inventory-slot.is-empty {
  opacity: .62;
}

.inventory-slot.is-selected {
  border-color: rgba(74, 222, 128, .78);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, .20), inset 0 1px rgba(255,255,255,.08);
}

.inventory-slot__icon {
  font-size: 1.12rem;
  line-height: 1;
}

.inventory-slot__qty {
  position: absolute;
  right: 5px;
  bottom: 3px;
  color: #ffe274;
  font-size: .62rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 #000;
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  min-height: 84px;
}

.bank-empty {
  grid-column: 1 / -1;
  padding: 16px 8px;
  color: #aab9a4;
  text-align: center;
  font-size: .74rem;
}

.bank-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.bank-actions[hidden],
.inventory-grid[hidden],
.bank-grid[hidden] {
  display: none;
}

@media (max-width: 1050px) {
  .osrs-inventory-panel {
    display: none;
  }
}



/* V17 UI polish, item context actions and real-world minimap styling. */
.osrs-hud {
  width: 306px;
}

.osrs-minimap-panel {
  padding: 10px;
  border-color: rgba(255, 226, 116, .18);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,226,116,.06), transparent 58%),
    rgba(7, 10, 11, .82);
}

.osrs-minimap-panel .minimap {
  height: 178px;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 5px rgba(61, 91, 65, .55),
    inset 0 0 28px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.22);
}

.osrs-inventory-panel {
  background:
    linear-gradient(180deg, rgba(11, 16, 17, .88), rgba(5, 8, 9, .82)),
    rgba(7, 10, 11, .80);
}

.inventory-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.inventory-slot,
.bank-slot {
  height: 43px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.055), transparent 52%),
    rgba(0,0,0,.34);
}

.bank-slot {
  cursor: pointer;
}

.bank-slot:hover {
  border-color: rgba(255, 226, 116, .26);
  background: rgba(255, 226, 116, .08);
}

.context-menu button[data-item-action="drop"] {
  color: #ffb4a8;
}

.context-menu button[data-item-action="deposit"],
.context-menu button[data-bank-menu-action^="withdraw"] {
  color: #b9ffd0;
}

.context-menu button[data-item-action="examine"],
.context-menu button[data-bank-menu-action="examine"] {
  color: #d9e4d2;
}

.bank-actions {
  grid-template-columns: 1.15fr .85fr;
}

.bank-actions button:first-child {
  color: #b9ffd0;
  border-color: rgba(74, 222, 128, .22);
}

.osrs-info-panel {
  border-color: rgba(255, 226, 116, .12);
}

.action-toast {
  max-width: min(560px, 42vw);
}



/* V17.2: left-side status panels and exact-click object targeting. */
.osrs-left-info {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 18;
  width: min(360px, 27vw);
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.osrs-left-info .osrs-info-panel {
  display: block;
  padding: 10px 12px;
  border: 1px solid rgba(255, 226, 116, .14);
  border-radius: 16px;
  background: rgba(7, 10, 11, .78);
  box-shadow: 0 18px 58px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.075);
  backdrop-filter: blur(14px);
}

.osrs-left-info .nearby-card,
.osrs-left-info #objective {
  color: #d7decf;
}

.osrs-hud {
  width: 292px;
}

.osrs-chatbox {
  bottom: 14px;
}

@media (max-width: 1050px) {
  .osrs-left-info {
    display: none;
  }
}



/* V18: OSRS-inspired dialogue box and quest foundation. */
.dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 70;
  width: min(860px, calc(100vw - 340px));
  transform: translateX(-50%);
  pointer-events: auto;
}

.dialogue-box[hidden] {
  display: none;
}

.dialogue-frame {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-columns: 1fr 124px;
  gap: 18px;
  padding: 18px 18px 14px 22px;
  border: 4px solid #24282d;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(238,233,221,.98), rgba(204,200,190,.98));
  box-shadow:
    0 22px 80px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(255,255,255,.42),
    inset 0 0 0 5px rgba(112,113,111,.24);
  color: #151210;
}

.dialogue-content {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 108px;
  padding-right: 8px;
}

.dialogue-content h2 {
  margin: 0 0 10px;
  color: #7c271f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.dialogue-content p {
  max-width: 580px;
  min-height: 42px;
  margin: 0;
  color: #1a130f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.42;
}

.dialogue-continue {
  margin-top: 13px;
  border: 0;
  background: transparent;
  color: #1b29b8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  cursor: pointer;
}

.dialogue-continue:hover {
  text-decoration: underline;
}

.dialogue-choices {
  width: min(520px, 100%);
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.dialogue-choices[hidden] {
  display: none;
}

.dialogue-choices button {
  padding: 8px 12px;
  border: 1px solid rgba(54, 46, 34, .24);
  border-radius: 6px;
  background: rgba(255,255,255,.42);
  color: #1b29b8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .98rem;
  cursor: pointer;
}

.dialogue-choices button:hover {
  background: rgba(255,255,255,.72);
  text-decoration: underline;
}

.dialogue-portrait {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(52,56,58,.18), rgba(255,255,255,.14));
  overflow: hidden;
}

.dialogue-portrait i,
.dialogue-portrait span {
  position: absolute;
  display: block;
}

.dialogue-portrait i {
  width: 74px;
  height: 76px;
  border-radius: 34% 36% 42% 40%;
  background: #d5a06f;
  box-shadow:
    inset -12px -8px rgba(0,0,0,.12),
    inset 8px 5px rgba(255,255,255,.12);
}

.dialogue-portrait span {
  width: 78px;
  height: 28px;
  top: 14px;
  border-radius: 12px 12px 6px 6px;
  background: #202326;
  box-shadow: 0 12px 0 -4px rgba(0,0,0,.20);
}

.dialogue-portrait::before,
.dialogue-portrait::after {
  content: "";
  position: absolute;
  z-index: 3;
}

.dialogue-portrait::before {
  width: 9px;
  height: 9px;
  top: 48px;
  left: 36px;
  border-radius: 50%;
  background: #101112;
  box-shadow: 28px 0 #101112;
}

.dialogue-portrait::after {
  width: 22px;
  height: 5px;
  top: 72px;
  left: 42px;
  border-radius: 999px;
  background: rgba(70,32,24,.55);
}

.dialogue-portrait[data-portrait="guide"] span {
  background: #4e7434;
}

.dialogue-portrait[data-portrait="banker"] span {
  background: #1d2e3b;
}

.dialogue-portrait[data-portrait="miner"] span {
  background: #5b3b22;
}

.dialogue-portrait[data-portrait="player"] span {
  background: #1d2022;
}

.dialogue-portrait[data-portrait="miner"]::after {
  height: 9px;
  background: #5d3a25;
}

.dialogue-portrait[data-portrait="banker"] i {
  background: #c9966d;
}

.dialogue-portrait[data-portrait="player"] i {
  background: #e2b882;
}

.dialogue-box:not([hidden]) ~ .action-toast {
  display: none;
}

@media (max-width: 1050px) {
  .dialogue-box {
    width: calc(100vw - 24px);
    bottom: 76px;
  }

  .dialogue-frame {
    grid-template-columns: 1fr 86px;
    min-height: 126px;
    padding: 14px;
  }

  .dialogue-portrait {
    width: 82px;
    height: 82px;
  }
}



/* V19: generated asset integration + dialogue/minimap/chat polish. */
.osrs-orb-panel,
.osrs-stats-panel,
.osrs-inventory-panel,
.osrs-info-panel,
.osrs-chatbox,
.osrs-action-tabs,
.context-menu {
  border-color: rgba(218, 177, 88, .26);
  box-shadow:
    0 18px 58px rgba(0,0,0,.36),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,0,0,.24);
}

.osrs-minimap-panel {
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,226,116,.10), transparent 54%),
    linear-gradient(145deg, rgba(35, 39, 36, .95), rgba(6, 10, 11, .88));
  border: 2px solid rgba(192, 155, 83, .48);
  box-shadow:
    0 18px 58px rgba(0,0,0,.42),
    inset 0 0 0 5px rgba(10, 16, 16, .80),
    inset 0 0 0 8px rgba(192, 155, 83, .22);
}

.osrs-minimap-panel .minimap {
  width: 214px;
  height: 214px;
  border-radius: 999px;
  border: 3px solid rgba(192, 155, 83, .70);
  background: #173329;
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,.35),
    inset 0 0 34px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.25);
}

.hotbar {
  gap: 7px;
  padding: 8px;
  border-radius: 19px;
  border-color: rgba(218, 177, 88, .28);
  background:
    linear-gradient(180deg, rgba(14, 21, 22, .84), rgba(4, 7, 8, .84));
}

.slot {
  width: 54px;
  height: 54px;
  overflow: visible;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), transparent 52%),
    linear-gradient(180deg, rgba(37,49,49,.96), rgba(12,18,20,.96));
}

.slot img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.42));
}

.inventory-slot__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.osrs-chatbox {
  width: min(455px, 36vw);
  max-height: 182px;
  padding: 9px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(9, 13, 14, .90), rgba(4, 7, 8, .86));
}

.chat-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 7px;
}

.chat-tabs button {
  min-width: 58px;
  padding: 5px 8px;
  border: 1px solid rgba(218, 177, 88, .20);
  border-radius: 8px;
  background: rgba(30, 38, 38, .82);
  color: #b9c4b2;
  font-size: .67rem;
  font-weight: 900;
  cursor: default;
}

.chat-tabs button.is-active {
  color: #fff1b5;
  background: rgba(111, 88, 35, .55);
}

.chat-input-shell {
  margin-top: 7px;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(218, 177, 88, .18);
  background: rgba(0,0,0,.36);
  color: rgba(245,242,222,.55);
  font-size: .74rem;
}

.osrs-chatbox .log-list {
  max-height: 106px;
  overflow: hidden;
  padding: 5px 6px;
  border-radius: 11px;
  background: rgba(0,0,0,.20);
}

.osrs-chatbox .log-list li {
  color: #d8dece;
  font-size: .75rem;
}

.dialogue-box {
  bottom: 78px;
  width: min(980px, calc(100vw - 360px));
}

.dialogue-frame {
  grid-template-columns: 132px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 18px;
  min-height: 164px;
  padding: 15px 18px;
  border: 3px solid #25282b;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(238,233,221,.98), rgba(206,202,191,.98));
}

.dialogue-content {
  min-height: 126px;
  padding: 0 10px;
}

.dialogue-content h2 {
  color: #7c271f;
  font-size: 1.02rem;
}

.dialogue-content p {
  font-size: 1.05rem;
  max-width: 620px;
}

.dialogue-portrait {
  width: 118px;
  height: 128px;
  padding: 7px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20,31,32,.96), rgba(6,9,10,.96));
  border: 2px solid rgba(192,155,83,.58);
  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.10);
  opacity: .58;
  transform: scale(.95);
  transition: opacity .12s ease, transform .12s ease, filter .12s ease;
}

.dialogue-portrait.is-speaking {
  opacity: 1;
  transform: scale(1);
  filter: drop-shadow(0 0 12px rgba(255,226,116,.22));
}

.dialogue-portrait img {
  width: 100%;
  height: calc(100% - 21px);
  object-fit: cover;
  border-radius: 13px;
  background: #ece7dc;
  display: block;
}

.dialogue-portrait-name {
  display: block;
  height: 18px;
  margin-top: 4px;
  color: #ffe274;
  font-size: .63rem;
  line-height: 18px;
  font-weight: 1000;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogue-portrait i,
.dialogue-portrait span:not(.dialogue-portrait-name),
.dialogue-portrait::before,
.dialogue-portrait::after {
  display: none;
}

.dialogue-portrait--player {
  order: 3;
}

.dialogue-choices button {
  color: #2036c4;
}

.action-toast {
  bottom: 94px;
}

.dialogue-box:not([hidden]) ~ .hotbar {
  opacity: .28;
  pointer-events: none;
}

@media (max-width: 1050px) {
  .dialogue-box {
    width: calc(100vw - 24px);
  }

  .dialogue-frame {
    grid-template-columns: 84px minmax(0,1fr) 84px;
    gap: 8px;
  }

  .dialogue-portrait {
    width: 76px;
    height: 92px;
  }
}



/* V19.1 UI repair: clean SVG icons, responsive right HUD, single-speaker dialogue. */
.osrs-hud {
  top: 12px;
  right: 12px;
  width: clamp(236px, 17vw, 292px);
  max-height: calc(100vh - 24px);
  gap: 8px;
  overflow: visible;
}

.osrs-orb-panel {
  min-height: 50px;
  padding: 8px 10px;
}

.osrs-minimap-panel {
  padding: 8px;
  transform: none;
}

.osrs-minimap-panel .minimap {
  width: clamp(154px, 11.5vw, 206px);
  height: clamp(154px, 11.5vw, 206px);
}

.osrs-action-tabs {
  gap: 5px;
  padding: 6px;
}

.osrs-action-tabs button {
  height: 31px;
  min-width: 0;
  font-size: .72rem;
}

.osrs-stats-panel {
  gap: 6px;
  padding: 7px;
}

.osrs-stat {
  min-height: 48px;
  padding: 7px 8px;
}

.osrs-stat strong {
  font-size: 1.02rem;
}

.osrs-inventory-panel {
  padding: 7px;
  max-height: min(318px, calc(100vh - 455px));
  overflow: hidden;
}

.inventory-grid,
.bank-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.inventory-slot,
.bank-slot {
  height: clamp(32px, 3.65vh, 41px);
  border-radius: 9px;
}

.osrs-panel-tabs button,
.bank-actions button {
  padding: 6px 7px;
  font-size: .66rem;
}

.bank-actions {
  gap: 5px;
  margin-top: 6px;
}

.hotbar {
  bottom: 14px;
  gap: 6px;
  padding: 7px;
  border-radius: 18px;
}

.slot {
  width: clamp(43px, 3.2vw, 52px);
  height: clamp(43px, 3.2vw, 52px);
  display: grid;
  place-items: center;
  padding: 0;
}

.slot svg {
  width: 34px;
  height: 34px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.46));
}

.slot small {
  right: 4px;
  bottom: -5px;
}

.icon-metal { fill: #c5ced0; stroke: #21292c; stroke-width: 3; stroke-linejoin: round; }
.icon-handle { fill: #875531; stroke: #2d1a0d; stroke-width: 3; stroke-linejoin: round; }
.icon-gold { fill: #ffd86d; stroke: #5a3a0b; stroke-width: 2.5; stroke-linejoin: round; }
.icon-leather { fill: #8b5a35; stroke: #2c190e; stroke-width: 3; stroke-linejoin: round; }
.icon-stitch { fill: none; stroke: #e9c37b; stroke-width: 4; stroke-linecap: round; }
.icon-glass { fill: #9bdff1; stroke: #1b4654; stroke-width: 3; stroke-linejoin: round; opacity: .92; }
.icon-liquid { fill: #46d77c; stroke: #14572d; stroke-width: 2; stroke-linejoin: round; }
.icon-blue { fill: #304f70; }
.icon-crystal { fill: #bcefff; stroke: #275c75; stroke-width: 3; stroke-linejoin: round; }
.icon-glow { fill: #ffffff; opacity: .55; }
.icon-shadow { fill: rgba(0,0,0,.22); }

.dialogue-box {
  bottom: 86px;
  width: min(870px, calc(100vw - 390px));
}

.dialogue-frame {
  grid-template-columns: 116px minmax(0, 1fr) 116px;
  min-height: 140px;
  padding: 13px 16px;
  gap: 14px;
}

.dialogue-portrait[hidden] {
  visibility: hidden;
  display: block !important;
  opacity: 0;
}

.dialogue-portrait {
  width: 104px;
  height: 112px;
  opacity: 1;
  transform: none;
}

.dialogue-portrait img {
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  background: transparent;
}

.dialogue-portrait-name {
  display: none !important;
}

.dialogue-content {
  min-height: 104px;
}

.dialogue-content h2 {
  margin-bottom: 8px;
}

.dialogue-content p {
  min-height: 36px;
  font-size: 1.02rem;
}

.dialogue-continue {
  margin-top: 9px;
}

.osrs-left-info {
  top: 12px;
  left: 12px;
  width: min(340px, 25vw);
}

.osrs-left-info .osrs-info-panel {
  padding: 8px 10px;
}

.osrs-left-info .osrs-info-panel h2 {
  margin-bottom: 5px;
}

.osrs-chatbox {
  left: 12px;
  bottom: 12px;
  width: min(420px, 31vw);
  max-height: 160px;
}

.osrs-chatbox .log-list {
  max-height: 88px;
}

.chat-input-shell {
  padding: 6px 8px;
}

.action-toast {
  bottom: 80px;
  max-width: min(520px, 40vw);
}

@media (max-height: 840px) {
  .osrs-hud {
    gap: 6px;
    width: clamp(225px, 16vw, 270px);
  }

  .osrs-minimap-panel .minimap {
    width: clamp(138px, 10vw, 176px);
    height: clamp(138px, 10vw, 176px);
  }

  .osrs-inventory-panel {
    max-height: 270px;
  }

  .inventory-slot,
  .bank-slot {
    height: 32px;
  }

  .dialogue-box {
    bottom: 72px;
  }

  .dialogue-frame {
    min-height: 124px;
  }

  .dialogue-portrait {
    width: 92px;
    height: 98px;
  }
}

@media (max-width: 1180px) {
  .dialogue-box {
    width: calc(100vw - 300px);
  }

  .osrs-chatbox {
    width: min(390px, 36vw);
  }
}



/* V19.2 clean asset PNG icon pass. */
.slot img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: transparent !important;
  border: 0;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.46));
  image-rendering: auto;
}

.slot svg {
  display: none;
}

.slot {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.06), transparent 52%),
    linear-gradient(180deg, rgba(37,49,49,.96), rgba(12,18,20,.96)) !important;
}

.inventory-slot img,
.bank-slot img {
  background: transparent !important;
}


/* V19.3 restored old-style clean PNG icons. */
.slot img {
  display: block !important;
  width: 39px;
  height: 39px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.52));
  image-rendering: auto;
}

.slot svg {
  display: none !important;
}

.slot {
  overflow: visible;
}


/* V20.4 UI cleanup: pure chat, right-side helper, larger enter indicators. */
.osrs-left-info {
  display: none !important;
}

.world-helper {
  position: absolute;
  top: 12px;
  right: clamp(258px, 19vw, 330px);
  z-index: 19;
  width: min(365px, 28vw);
  min-height: 54px;
  padding: 10px 13px;
  border: 2px solid rgba(204, 169, 91, .45);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(17, 25, 24, .92), rgba(5, 8, 9, .88));
  box-shadow:
    0 18px 58px rgba(0,0,0,.34),
    inset 0 1px rgba(255,255,255,.10);
  color: #f5f2de;
  pointer-events: none;
}

.world-helper strong {
  display: block;
  margin-bottom: 4px;
  color: #ffe274;
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.world-helper span {
  display: block;
  color: #d7decf;
  font-size: .78rem;
  line-height: 1.35;
}

.osrs-chatbox {
  width: min(470px, 33vw);
  max-height: 172px;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid rgba(74, 67, 50, .92);
  background:
    linear-gradient(180deg, rgba(11, 12, 11, .93), rgba(4, 6, 6, .91));
  box-shadow:
    0 18px 58px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.chat-tabs {
  gap: 4px;
  margin-bottom: 6px;
}

.chat-tabs button {
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid rgba(214, 178, 93, .28);
  background: linear-gradient(180deg, rgba(67, 61, 39, .95), rgba(24, 29, 25, .95));
  color: #f5f2de;
  font-size: .65rem;
}

.chat-tabs button.is-active {
  color: #fff4bd;
  background: linear-gradient(180deg, rgba(114, 88, 37, .96), rgba(48, 41, 25, .96));
}

.osrs-chatbox .log-list {
  height: 94px;
  max-height: 94px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.045);
}

.osrs-chatbox .log-list li {
  color: #e5e2d5;
  font-size: .73rem;
  line-height: 1.42;
}

.chat-input-shell {
  margin-top: 6px;
  height: 25px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid rgba(214, 178, 93, .20);
  background: rgba(0,0,0,.35);
  color: rgba(245,242,222,.48);
}

.action-toast {
  background: rgba(9, 13, 13, .94);
  border: 2px solid rgba(204, 169, 91, .48);
}

/* Make in-world tiny ENTER/EXIT helper signs more readable without changing building labels. */
.sprite-label,
canvas + .sprite-label {
  image-rendering: auto;
}

@media (max-width: 1180px) {
  .world-helper {
    display: none;
  }

  .osrs-chatbox {
    width: min(410px, 38vw);
  }
}



/* V20.4.1 emergency render visibility guard. */
canvas {
  display: block !important;
  visibility: visible !important;
}

#app,
.game-root,
.viewport,
body {
  background: #071317;
}


/* V25: OSRS-style right sidebar tabs, cleaner testing HUD, minimal helper noise. */
.world-helper,
#world-helper,
#action-toast,
.action-toast,
#action-progress,
.action-progress,
.osrs-action-tabs,
.osrs-stats-panel,
.osrs-info-panel {
  display: none !important;
}

.osrs-hud.osrs-hud--v25 {
  top: 10px;
  right: 10px;
  width: 270px;
  gap: 6px;
}

.osrs-hud--v25 .osrs-orb-panel {
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 2px solid rgba(195, 155, 80, .34);
  background: linear-gradient(180deg, rgba(10, 15, 16, .96), rgba(5, 8, 9, .96));
}

.osrs-hud--v25 .osrs-brand-mark {
  width: 40px;
  height: 40px;
}

.osrs-hud--v25 .osrs-minimap-panel {
  padding: 8px;
}

.osrs-hud--v25 .osrs-minimap-panel .minimap {
  width: 194px;
  height: 194px;
}

.osrs-side-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  border: 2px solid rgba(74, 67, 50, .92);
  background: linear-gradient(180deg, rgba(18, 21, 18, .96), rgba(8, 10, 9, .96));
  box-shadow: 0 16px 34px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07);
}

.osrs-side-tabs button {
  display: grid;
  place-items: center;
  height: 32px;
  border: 1px solid rgba(181, 148, 75, .28);
  border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, #6a6044, #3d3626 48%, #25211a);
  color: #efe6c6;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -1px rgba(0,0,0,.35);
}

.osrs-side-tabs button span {
  font-size: 1rem;
  line-height: 1;
  filter: saturate(.7);
}

.osrs-side-tabs button.is-active,
.osrs-side-tabs button:hover {
  background: linear-gradient(180deg, #8d7b52, #59492c 50%, #342a1b);
  color: #fff3c4;
  transform: translateY(-1px);
}

.osrs-side-panel-shell {
  min-height: 344px;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid rgba(74, 67, 50, .92);
  background: linear-gradient(180deg, rgba(77, 66, 47, .92), rgba(48, 39, 28, .94));
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04);
}

.osrs-side-tab-panel {
  display: none;
  height: 100%;
  min-height: 326px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(29, 24, 17, .92);
  background: linear-gradient(180deg, rgba(73, 61, 43, .96), rgba(60, 49, 34, .97));
  color: #f3e8c8;
}

.osrs-side-tab-panel.is-active {
  display: block;
}

.osrs-side-panel-title {
  margin-bottom: 10px;
  color: #ffdf75;
  font-size: .78rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}

.osrs-skill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.osrs-skill-cell {
  min-height: 68px;
  padding: 10px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.28);
  background: linear-gradient(180deg, rgba(99, 84, 59, .55), rgba(44, 35, 23, .66));
  text-align: center;
}

.osrs-skill-cell span {
  display: block;
  margin-bottom: 6px;
  color: #dbcba0;
  font-size: .63rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.osrs-skill-cell strong {
  font-size: 1.2rem;
  color: #fff4c8;
}

.osrs-quest-summary,
.osrs-quest-objective {
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.24);
  background: rgba(0,0,0,.16);
  color: #e6dcc2;
}

.osrs-quest-summary {
  margin-bottom: 8px;
  color: #ffe78e;
  font-weight: 900;
}

.osrs-quest-objective {
  margin-bottom: 10px;
  font-size: .75rem;
  line-height: 1.35;
}

.osrs-quest-list {
  display: grid;
  gap: 3px;
  max-height: 222px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(0,0,0,.26);
  background: rgba(0,0,0,.18);
  overflow: auto;
}

.osrs-quest-list li {
  color: #86db55;
  font-size: .78rem;
  line-height: 1.3;
}

.osrs-quest-list li.is-active {
  color: #ffe274;
}

.osrs-quest-list li.is-complete {
  color: #bdb7a2;
}

.osrs-hud--v25 .osrs-panel-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.osrs-hud--v25 .osrs-panel-tabs button,
.osrs-hud--v25 .bank-actions button,
.osrs-logout-button,
.osrs-world-switcher {
  min-height: 30px;
  border: 1px solid rgba(181, 148, 75, .28);
  border-radius: 6px;
  background: linear-gradient(180deg, #6b6045, #4a3e2b 50%, #30281d);
  color: #f3e8c8;
  font-weight: 900;
  cursor: pointer;
}

.osrs-hud--v25 .osrs-panel-tabs button.is-active,
.osrs-hud--v25 .bank-actions button:hover,
.osrs-hud--v25 .osrs-panel-tabs button:hover,
.osrs-logout-button:hover {
  background: linear-gradient(180deg, #8d7b52, #5d4d31 50%, #3b2f20);
}

.osrs-hud--v25 .inventory-grid,
.osrs-hud--v25 .bank-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.osrs-hud--v25 .inventory-slot,
.osrs-hud--v25 .bank-slot {
  height: 44px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.40);
  background: linear-gradient(180deg, rgba(84, 71, 49, .72), rgba(45, 37, 25, .9));
}

.osrs-hud--v25 .inventory-slot.is-selected {
  outline: 2px solid rgba(255, 226, 116, .72);
}

.osrs-hud--v25 .inventory-slot__icon,
.osrs-hud--v25 .inventory-slot__qty {
  color: #fff4bd;
}

.osrs-hud--v25 .bank-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.osrs-equipment-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}

.osrs-equip-slot {
  position: relative;
  min-height: 58px;
  border: 1px solid rgba(0,0,0,.34);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(88, 73, 50, .55), rgba(42, 34, 22, .75));
}

.osrs-equip-slot.is-body {
  min-height: 88px;
  grid-row: span 2;
}

.osrs-equip-slot::after {
  content: attr(data-slot-label);
  position: absolute;
  inset: auto 0 6px;
  text-align: center;
  color: #d8caa3;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.osrs-settings-list {
  display: grid;
  gap: 7px;
}

.osrs-setting-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.26);
  background: rgba(0,0,0,.14);
  color: #e6dcc2;
  font-size: .75rem;
}

.osrs-logout-card {
  display: grid;
  gap: 10px;
  text-align: center;
}

.osrs-logout-card p {
  margin: 0;
  color: #f0e0a8;
  font-size: .88rem;
  line-height: 1.38;
}

.osrs-world-switcher[disabled] {
  opacity: .72;
  cursor: default;
}

.osrs-chatbox {
  left: 10px;
  bottom: 10px;
  width: 345px;
  max-height: none;
  padding: 8px;
  border-radius: 10px;
  border: 2px solid rgba(74, 67, 50, .92);
  background: linear-gradient(180deg, rgba(15, 16, 14, .95), rgba(5, 6, 6, .94));
}

.osrs-chatbox .log-list {
  height: 96px;
  max-height: 96px;
  overflow: auto;
  padding: 8px;
  border-radius: 5px;
  background: rgba(0,0,0,.24);
}

.osrs-chatbox .log-list li {
  padding: 0;
  border-bottom: 0;
  color: #f0ead9;
  font-size: .73rem;
  line-height: 1.42;
}

.osrs-chatbox .log-list li.is-placeholder {
  color: rgba(240,234,217,.55);
}

.chat-input-shell {
  height: 24px;
  padding: 4px 7px;
}

.dialogue-box {
  width: min(820px, calc(100vw - 360px));
}

@media (max-width: 1180px) {
  .osrs-chatbox {
    width: 310px;
  }

  .osrs-hud.osrs-hud--v25 {
    width: 250px;
  }

  .osrs-hud--v25 .osrs-minimap-panel .minimap {
    width: 176px;
    height: 176px;
  }
}


/* V26: asset-based classic fantasy MMO sidebar. */
.osrs-hud.osrs-hud--v26 {
  top: 10px;
  right: 10px;
  width: 312px;
  gap: 7px;
}

.osrs-hud--v26 .osrs-orb-panel {
  min-height: 60px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 2px solid rgba(183, 144, 73, .32);
  background: linear-gradient(180deg, rgba(12, 15, 15, .96), rgba(4, 7, 8, .96));
}

.v26-minimap-shell {
  position: relative;
  width: 242px;
  height: 242px;
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.v26-minimap-shell .minimap {
  position: absolute;
  inset: 26px;
  width: 190px !important;
  height: 190px !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 1;
}

.v26-minimap-frame {
  position: absolute;
  inset: 0;
  width: 242px;
  height: 242px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 15px 28px rgba(0,0,0,.55));
}

.v26-side-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 5px;
  border-radius: 12px;
  border: 2px solid rgba(74, 67, 50, .92);
  background: linear-gradient(180deg, rgba(18, 21, 18, .96), rgba(8, 10, 9, .96));
}

.v26-side-tabs button {
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(0,0,0,.12);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 7px 14px rgba(0,0,0,.22);
}

.v26-side-tabs button img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  opacity: .86;
  transform: scale(1.15);
  transition: transform .14s ease, opacity .14s ease, filter .14s ease;
}

.v26-side-tabs button.is-active img,
.v26-side-tabs button:hover img {
  opacity: 1;
  transform: scale(1.22);
  filter: saturate(1.12) brightness(1.08) drop-shadow(0 0 8px rgba(255, 206, 96, .25));
}

.v26-panel-shell {
  position: relative;
  width: 312px;
  min-height: 470px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.v26-tab-panel {
  position: relative;
  display: none;
  width: 312px;
  min-height: 470px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.v26-tab-panel.is-active {
  display: block;
}

.v26-panel-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.45));
}

.v26-panel-bg--stats { background-image: url("/client/assets/ui/generated/panels/stats-panel.png"); }
.v26-panel-bg--inventory { background-image: url("/client/assets/ui/generated/panels/inventory-panel.png"); }
.v26-panel-bg--equipment { background-image: url("/client/assets/ui/generated/panels/equipment-panel.png"); }
.v26-panel-bg--quest { background-image: url("/client/assets/ui/generated/panels/quest-panel.png"); }
.v26-panel-bg--settings { background-image: url("/client/assets/ui/generated/panels/settings-panel.png"); }
.v26-panel-bg--account { background-image: url("/client/assets/ui/generated/panels/account-panel.png"); }

.v26-skill-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 76px 24px 0;
}

.v26-skill-cell {
  min-width: 0;
  height: 77px;
  padding: 4px 2px 3px;
  border: 0;
  background: transparent;
  cursor: default;
  color: #f5d992;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
}

.v26-skill-cell img {
  display: block;
  width: 37px;
  height: 37px;
  margin: 0 auto 1px;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.62));
}

.v26-skill-cell span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #e4c071;
  font-size: .49rem;
  font-weight: 1000;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.v26-skill-cell strong {
  display: block;
  margin-top: -1px;
  color: #fff1c6;
  font-size: 1rem;
  font-weight: 1000;
}

.v26-total-level {
  position: absolute;
  z-index: 2;
  left: 70px;
  right: 70px;
  bottom: 24px;
  color: #f0cf80;
  font-size: .62rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 2px 3px rgba(0,0,0,.9);
}

.v26-total-level strong {
  display: inline-block;
  margin-left: 5px;
  color: #fff2c6;
  font-size: .95rem;
}

.v26-inventory-grid {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 90px 29px 0;
}

.v26-inventory-grid .inventory-slot {
  height: 48px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.v26-inventory-grid .inventory-slot__icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.7));
}

.v26-inventory-grid .inventory-slot__qty {
  color: #fff5c8;
  text-shadow: 0 2px 2px #000;
}

.v26-quest-overlay {
  position: relative;
  z-index: 2;
  padding: 152px 27px 0;
  color: #ead19a;
}

.v26-quest-overlay strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe090;
  font-size: .84rem;
  font-weight: 1000;
}

.v26-quest-overlay span {
  display: block;
  min-height: 24px;
  margin-bottom: 19px;
  color: #d8c49a;
  font-size: .64rem;
  line-height: 1.25;
}

.v26-quest-overlay ul {
  display: grid;
  gap: 5px;
  height: 218px;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
  overflow: hidden;
}

.v26-quest-overlay li {
  overflow: hidden;
  color: #d6be82;
  font-size: .68rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v26-quest-overlay li.is-active {
  color: #ffe274;
}

.v26-quest-overlay li.is-complete {
  color: #7ee856;
}

.v26-equipment-click-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 470px;
  pointer-events: none;
}

.v26-bank-window {
  position: absolute;
  top: 120px;
  right: 342px;
  z-index: 48;
  width: 360px;
  min-height: 330px;
  padding: 14px;
  border: 2px solid rgba(193, 151, 71, .55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 17, 15, .97), rgba(6, 8, 8, .96));
  box-shadow: 0 28px 80px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.08);
  color: #f4e5bd;
}

.v26-bank-window header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  color: #ffe274;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.v26-bank-window header button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 226, 116, .35);
  border-radius: 8px;
  background: rgba(120, 36, 28, .9);
  color: #fff2c6;
  cursor: pointer;
}

.v26-bank-window p {
  margin: 0 0 10px;
  color: #d6c6a0;
  font-size: .76rem;
}

.v26-bank-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  min-height: 174px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
}

.v26-bank-grid .bank-slot {
  height: 45px;
  border: 1px solid rgba(193, 151, 71, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(70, 54, 33, .7), rgba(24, 20, 15, .85));
}

.v26-bank-window .bank-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.v26-bank-window .bank-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(193, 151, 71, .35);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(96, 76, 44, .9), rgba(48, 38, 25, .95));
  color: #fff1c6;
  font-weight: 900;
  cursor: pointer;
}

.v26-chatbox {
  width: 345px;
}

.osrs-action-tabs,
.osrs-stats-panel,
.osrs-panel-tabs,
.world-helper,
#world-helper,
.action-toast,
#action-toast,
.action-progress,
#action-progress {
  display: none !important;
}

@media (max-width: 1180px) {
  .osrs-hud.osrs-hud--v26 {
    width: 292px;
  }

  .v26-panel-shell,
  .v26-tab-panel {
    width: 292px;
    min-height: 442px;
  }

  .v26-skill-grid {
    padding: 72px 22px 0;
  }

  .v26-bank-window {
    right: 315px;
  }
}


/* V26.1 hotfix: keep generated icons, but make sidebar panels real DOM frames instead of missing CSS-image backgrounds. */
.osrs-hud.osrs-hud--v26 {
  width: 292px !important;
  gap: 7px !important;
}

.osrs-hud--v26 .osrs-orb-panel {
  min-height: 58px !important;
  padding: 9px 12px !important;
}

.v26-minimap-shell {
  width: 220px !important;
  height: 220px !important;
}

.v26-minimap-shell .minimap {
  inset: 24px !important;
  width: 172px !important;
  height: 172px !important;
}

.v26-minimap-frame {
  width: 220px !important;
  height: 220px !important;
}

.v26-side-tabs {
  width: 292px !important;
  box-sizing: border-box !important;
  padding: 5px !important;
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(16, 18, 16, .98), rgba(7, 8, 7, .98)) !important;
  border: 2px solid rgba(184, 142, 65, .54) !important;
  border-radius: 13px !important;
}

.v26-side-tabs button {
  height: 36px !important;
  background: radial-gradient(circle at 50% 35%, rgba(94, 78, 45, .9), rgba(18, 17, 14, .95) 72%) !important;
  border: 1px solid rgba(212, 166, 82, .30) !important;
}

.v26-side-tabs button img {
  transform: scale(1.06) !important;
}

.v26-side-tabs button.is-active {
  border-color: rgba(255, 220, 112, .78) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 112, .24), 0 0 14px rgba(255, 200, 72, .18) !important;
}

.v26-side-tabs button.is-active img,
.v26-side-tabs button:hover img {
  transform: scale(1.12) !important;
}

.v26-panel-shell {
  width: 292px !important;
  min-height: 425px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border: 3px solid rgba(43, 31, 17, .98) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(118, 93, 53, .35), rgba(28, 22, 15, .72)),
    radial-gradient(circle at 50% 8%, rgba(255, 220, 118, .10), transparent 38%),
    #20180f !important;
  box-shadow:
    0 24px 52px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(188, 143, 62, .42),
    inset 0 0 0 5px rgba(0,0,0,.34) !important;
}

.v26-tab-panel {
  width: auto !important;
  min-height: 405px !important;
  height: 405px !important;
  padding: 0 !important;
  border: 1px solid rgba(212, 166, 82, .22) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(65, 50, 31, .92), rgba(34, 26, 17, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}

.v26-panel-bg {
  display: none !important;
}

.v26-tab-panel::before {
  content: attr(data-v26-title);
  display: block;
  height: 34px;
  line-height: 34px;
  color: #ffe274;
  font-size: .76rem;
  font-weight: 1000;
  letter-spacing: .10em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 2px rgba(0,0,0,.85);
  border-bottom: 1px solid rgba(212, 166, 82, .24);
  background: linear-gradient(180deg, rgba(72, 54, 28, .94), rgba(24, 19, 13, .95));
}

.v26-skill-grid {
  position: relative !important;
  z-index: 2 !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
  padding: 8px 8px 0 !important;
}

.v26-skill-cell {
  height: 74px !important;
  padding: 5px 1px 4px !important;
  border: 1px solid rgba(212, 166, 82, .22) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 116, .08), transparent 42%),
    linear-gradient(180deg, rgba(57, 46, 31, .95), rgba(21, 18, 14, .98)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.5) !important;
}

.v26-skill-cell img {
  width: 32px !important;
  height: 32px !important;
  margin-bottom: 1px !important;
}

.v26-skill-cell span {
  font-size: .45rem !important;
  max-width: 58px !important;
  margin: 0 auto !important;
}

.v26-skill-cell strong {
  font-size: .94rem !important;
}

.v26-total-level {
  left: 28px !important;
  right: 28px !important;
  bottom: 9px !important;
  height: 24px !important;
  line-height: 24px !important;
  border: 1px solid rgba(212, 166, 82, .28) !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.25) !important;
}

.v26-inventory-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 7px !important;
  padding: 12px 12px 0 !important;
}

.v26-inventory-grid .inventory-slot {
  height: 49px !important;
  border: 1px solid rgba(212, 166, 82, .22) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(50, 41, 29, .92), rgba(17, 15, 13, .96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.55) !important;
}

.v26-inventory-grid .inventory-slot.is-empty {
  opacity: .82 !important;
}

.v26-quest-overlay {
  padding: 12px !important;
}

.v26-quest-overlay strong {
  padding: 9px 10px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(212, 166, 82, .24) !important;
  border-radius: 7px !important;
  background: rgba(0,0,0,.24) !important;
  font-size: .78rem !important;
}

.v26-quest-overlay span {
  padding: 8px 10px !important;
  min-height: 30px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(212, 166, 82, .18) !important;
  border-radius: 7px !important;
  background: rgba(0,0,0,.18) !important;
}

.v26-quest-overlay ul {
  height: 252px !important;
  padding: 9px !important;
  border: 1px solid rgba(212, 166, 82, .18) !important;
  border-radius: 7px !important;
  background: rgba(0,0,0,.20) !important;
}

.v26-quest-overlay li {
  font-size: .72rem !important;
}

.v26-equipment-click-layer {
  height: 360px !important;
  margin: 13px auto 0 !important;
  width: 234px !important;
  border: 1px solid rgba(212, 166, 82, .20) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,.10), rgba(0,0,0,.42)),
    url("/client/assets/ui/generated/panels/equipment-panel.png") center / cover no-repeat !important;
}

/* V83.1: the old "Coming soon" stamp on the Settings/Account panels is gone —
   both tabs are fully functional now. */

.v26-bank-window {
  right: 322px !important;
}


/* V26.2: clean HUD hotfix. Remove header/hotbar and un-crop sidebar tabs. */
.osrs-hud.osrs-hud--v26 {
  top: 8px !important;
  right: 8px !important;
  width: 312px !important;
  gap: 6px !important;
}

.osrs-hud--v26 .osrs-orb-panel,
.hotbar,
.mobile-help {
  display: none !important;
}

.v26-minimap-shell {
  width: 230px !important;
  height: 230px !important;
  margin: 0 auto 4px !important;
}

.v26-minimap-shell .minimap {
  inset: 25px !important;
  width: 180px !important;
  height: 180px !important;
}

.v26-minimap-frame {
  width: 230px !important;
  height: 230px !important;
}

.v26-side-tabs {
  height: 47px !important;
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
}

.v26-side-tabs button {
  position: relative !important;
  height: 39px !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.v26-side-tabs button img {
  width: 35px !important;
  height: 35px !important;
  max-width: 35px !important;
  max-height: 35px !important;
  object-fit: contain !important;
  transform: none !important;
  margin: 0 !important;
  opacity: .92 !important;
}

.v26-side-tabs button.is-active img,
.v26-side-tabs button:hover img {
  transform: none !important;
  opacity: 1 !important;
  filter: saturate(1.12) brightness(1.08) drop-shadow(0 0 7px rgba(255, 211, 96, .35)) !important;
}

.v26-side-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 226, 116, .8);
  box-shadow: 0 0 7px rgba(255, 226, 116, .55);
}

.v26-panel-shell,
.v26-tab-panel {
  width: 312px !important;
}

.v26-chatbox .log-list:empty::before {
  content: "" !important;
}


/* V26.5: sidebar containment + real equipment panel cleanup. */
.osrs-hud.osrs-hud--v26 {
  top: 10px !important;
  right: 22px !important;
  width: 286px !important;
  gap: 6px !important;
}

.v26-minimap-shell {
  width: 214px !important;
  height: 214px !important;
  margin: 0 auto 6px !important;
}

.v26-minimap-shell .minimap {
  inset: 24px !important;
  width: 166px !important;
  height: 166px !important;
}

.v26-minimap-frame {
  width: 214px !important;
  height: 214px !important;
}

.v26-side-tabs {
  width: 286px !important;
  height: 43px !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
  margin: 0 0 6px !important;
  overflow: visible !important;
}

.v26-side-tabs button {
  height: 35px !important;
  min-width: 0 !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}

.v26-side-tabs button img {
  width: 31px !important;
  height: 31px !important;
  max-width: 31px !important;
  max-height: 31px !important;
  object-fit: contain !important;
  transform: none !important;
  margin: 0 !important;
}

.v26-side-tabs button.is-active img,
.v26-side-tabs button:hover img {
  transform: none !important;
}

.v26-panel-shell {
  width: 286px !important;
  min-height: 405px !important;
  padding: 8px !important;
}

.v26-tab-panel {
  width: auto !important;
  /* V57 fix: the 28-slot backpack (7 rows x 4 cols) needs ~432px of content
     height, but this was fixed at 385px with hidden overflow, silently
     clipping the last row. Bumped to fit with a small buffer. */
  min-height: 435px !important;
  height: 435px !important;
}

.v26-tab-panel::before {
  height: 32px !important;
  line-height: 32px !important;
}

.v26-skill-grid {
  gap: 5px !important;
  padding: 7px 7px 0 !important;
}

.v26-skill-cell {
  height: 67px !important;
  padding: 4px 1px 3px !important;
}

.v26-skill-cell img {
  width: 29px !important;
  height: 29px !important;
}

.v26-skill-cell span {
  max-width: 54px !important;
  font-size: .42rem !important;
}

.v26-skill-cell strong {
  font-size: .88rem !important;
}

.v26-total-level {
  left: 24px !important;
  right: 24px !important;
  bottom: 8px !important;
}

.v26-panel-bg--equipment,
[data-side-panel="equipment"] .v26-panel-bg {
  display: none !important;
  background-image: none !important;
}

.v26-equipment-layout {
  position: relative;
  height: calc(100% - 32px);
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 116, .06), transparent 36%),
    linear-gradient(180deg, rgba(66, 50, 30, .92), rgba(31, 24, 16, .96));
}

.v26-equipment-layout::before {
  content: "";
  position: absolute;
  left: 84px;
  top: 62px;
  width: 100px;
  height: 190px;
  border-radius: 46% 46% 34% 34%;
  background:
    radial-gradient(circle at 50% 10%, rgba(0,0,0,.36) 0 18px, transparent 19px),
    linear-gradient(180deg, rgba(8,8,7,.45), rgba(0,0,0,.22));
  opacity: .65;
  clip-path: polygon(42% 0, 58% 0, 68% 19%, 86% 28%, 74% 48%, 82% 82%, 64% 100%, 50% 88%, 36% 100%, 18% 82%, 26% 48%, 14% 28%, 32% 19%);
  pointer-events: none;
}

.v26-equipment-layout::after {
  content: "";
  position: absolute;
  inset: 26px 22px 24px;
  border: 1px solid rgba(205, 158, 72, .17);
  border-radius: 14px;
  pointer-events: none;
  box-shadow: inset 0 0 32px rgba(0,0,0,.26);
}

.v26-equip-slot {
  position: absolute;
  z-index: 2;
  width: 60px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(209, 165, 85, .30);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 226, 116, .06), transparent 43%),
    linear-gradient(180deg, rgba(60, 48, 31, .95), rgba(19, 16, 12, .98));
  color: #ead08e;
  box-shadow: inset 0 1px rgba(255,255,255,.05), inset 0 -1px rgba(0,0,0,.55), 0 8px 15px rgba(0,0,0,.18);
  cursor: default;
  text-shadow: 0 2px 2px rgba(0,0,0,.85);
}

.v26-equip-slot img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.6));
}

.v26-equip-slot span {
  align-self: end;
  font-size: .47rem;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.v26-equip-slot--head { left: 104px; top: 28px; }
.v26-equip-slot--cape { left: 28px; top: 82px; }
.v26-equip-slot--neck { right: 28px; top: 82px; }
.v26-equip-slot--weapon { left: 28px; top: 154px; height: 74px; }
.v26-equip-slot--body { left: 104px; top: 138px; height: 74px; }
.v26-equip-slot--shield { right: 28px; top: 154px; height: 74px; }
.v26-equip-slot--hands { left: 28px; top: 245px; }
.v26-equip-slot--legs { left: 104px; top: 230px; }
.v26-equip-slot--ring { right: 28px; top: 245px; }
.v26-equip-slot--feet { left: 104px; top: 304px; }

.v26-quest-overlay strong:empty,
.v26-quest-overlay span:empty {
  display: none;
}

@media (max-width: 1180px) {
  .osrs-hud.osrs-hud--v26 {
    right: 16px !important;
    width: 274px !important;
  }

  .v26-side-tabs,
  .v26-panel-shell {
    width: 274px !important;
  }
}



/* V28: OSRS-style context menu and browser menu suppression. */
.stage,
.waystone-canvas,
.context-menu {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.context-menu {
  z-index: 9999 !important;
  min-width: 276px !important;
  padding: 0 !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 0 !important;
  background: rgba(83, 78, 66, .96) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.50) !important;
  backdrop-filter: none !important;
  color: #ffffff !important;
  font-family: ui-monospace, "Courier New", monospace !important;
}

.context-menu__title {
  margin: 0 !important;
  padding: 4px 7px !important;
  border-bottom: 2px solid #111 !important;
  background: #050505 !important;
  color: #bdb7a2 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
}

.context-menu button {
  min-height: 24px !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  font: 900 1.05rem/1.05 ui-monospace, "Courier New", monospace !important;
  text-shadow: 1px 1px 0 #000 !important;
}

.context-menu button:hover {
  background: rgba(255,255,255,.13) !important;
  color: #ffff66 !important;
}

.context-menu button[data-tone="attack"],
.context-menu button[data-action="primary"] {
  color: #ffffff !important;
}

.context-menu button[data-tone="attack"] span,
.context-menu button[data-action="primary"] span {
  color: #ffffff !important;
}

.context-menu button[data-tone="attack"] span::first-letter {
  color: #ffffff;
}

.context-menu button[data-tone="examine"] {
  color: #ffffff !important;
}

.context-menu kbd {
  display: none !important;
}


/* V29: OSRS-style combat options tab + skill progress refinements.
   V58 fix: OSRS's real tab bar is a 2-row grid (7 over 7); with our 8 tabs
   that's 4 over 4. height:auto lets the grid size itself to exactly 2 rows
   regardless of which of the several breakpoint blocks above set the actual
   button size, and margin:0 removes the gap before the panel below. */
.v26-side-tabs {
  grid-template-columns: repeat(4, 1fr) !important;
  height: auto !important;
  margin: 0 !important;
}

/* V59.2 fix: the sidebar's own grid `gap` (6px, set on .osrs-hud--v26)
   applied uniformly between every child, leaving a visible sliver between
   each tab row and the panel between them. Zeroed here so the two tab rows
   sit flush against the panel; the minimap keeps its own explicit
   margin-bottom (set directly on .v26-minimap-shell), so spacing above the
   first tab row is unaffected. */
.osrs-hud.osrs-hud--v26 {
  gap: 0 !important;
}

.v26-skill-cell {
  position: relative;
  display: block !important;
}

.v29-skill-progress {
  display: block;
  width: 48px;
  height: 4px;
  margin: 3px auto 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.04);
}

.v29-skill-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5fcf62, #baff78);
  box-shadow: 0 0 8px rgba(127, 235, 82, .28);
}

.v29-skill-hover {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 40px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 166, 82, .24);
  border-radius: 8px;
  background: rgba(0,0,0,.26);
  color: #ecd7a2;
  font-size: .63rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.85);
}

.v29-skill-hover strong {
  color: #fff1c6;
}

.v29-combat-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  color: #ecd7a2;
}

.v29-combat-header {
  display: grid;
  gap: 2px;
  justify-items: center;
  text-align: center;
}

.v29-combat-header strong {
  color: #ffe090;
  font-size: 1.05rem;
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0,0,0,.85);
}

.v29-combat-header span,
.v29-combat-meta span {
  color: #dbc79d;
  font-size: .72rem;
  font-weight: 900;
  text-shadow: 0 2px 2px rgba(0,0,0,.8);
}

.v29-combat-style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.v29-combat-style,
.v29-combat-toggle {
  min-height: 68px;
  padding: 9px 8px;
  border: 1px solid rgba(212, 166, 82, .24);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(94, 74, 46, .86), rgba(32, 25, 17, .95));
  color: #f4e4bf;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.06), inset 0 -1px rgba(0,0,0,.45);
}

.v29-combat-style strong,
.v29-combat-style span,
.v29-combat-style em {
  display: block;
  text-align: center;
}

.v29-combat-style strong {
  color: #ffe090;
  font-size: .95rem;
  font-weight: 1000;
}

.v29-combat-style span {
  margin-top: 4px;
  color: #fff0c1;
  font-size: .72rem;
  font-weight: 900;
}

.v29-combat-style em {
  margin-top: 3px;
  color: #d2c29c;
  font-size: .64rem;
  font-style: normal;
  font-weight: 900;
}

.v29-combat-style:hover,
.v29-combat-toggle:hover,
.v29-combat-style.is-active,
.v29-combat-toggle.is-active {
  border-color: rgba(255, 220, 112, .78);
  background: linear-gradient(180deg, rgba(127, 42, 38, .92), rgba(64, 22, 20, .96));
  box-shadow: inset 0 0 0 1px rgba(255, 220, 112, .18), 0 0 15px rgba(255, 183, 77, .12);
}

.v29-combat-toggle {
  min-height: 44px;
  font-size: .82rem;
  font-weight: 1000;
  text-transform: none;
}

.v29-combat-special {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(209, 179, 75, .58);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(71, 61, 29, .96), rgba(27, 22, 12, .98));
  color: #fff2bb;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 7px rgba(0,0,0,.38);
}

.v29-combat-special[hidden] { display: none; }
.v29-combat-special > span { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; }
.v29-combat-special > span strong { color: #ffe08a; }
.v29-combat-special > span b { color: #fff7d2; }
.v29-combat-special > i { display: block; height: 9px; overflow: hidden; border: 1px solid rgba(0,0,0,.8); border-radius: 2px; background: #241b0d; box-shadow: inset 0 1px 3px rgba(0,0,0,.75); }
.v29-combat-special > i > em { display: block; height: 100%; background: linear-gradient(180deg, #fff16c, #c5a51a 58%, #806207); box-shadow: 0 0 8px rgba(255,225,71,.5); transition: width .18s ease; }
.v29-combat-special:hover, .v29-combat-special.is-active { border-color: #fff078; background: linear-gradient(180deg, rgba(117, 77, 25, .98), rgba(55, 31, 14, .98)); }
.v29-combat-special.is-active { box-shadow: inset 0 0 0 1px rgba(255,240,120,.3), 0 0 16px rgba(255,213,54,.25); }
.v29-combat-special.is-low:not(.is-active) { filter: saturate(.55); opacity: .78; }

.v29-combat-info {
  min-height: 74px;
  padding: 9px 10px;
  border: 1px solid rgba(212, 166, 82, .18);
  border-radius: 8px;
  background: rgba(0,0,0,.22);
  color: #e6d6ad;
  font-size: .72rem;
  line-height: 1.4;
}

.v29-combat-info strong {
  color: #fff1c6;
}

.v29-combat-meta {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 166, 82, .18);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}


/* V30: weapon combat polish and XP drops. */
.v30-xp-drop-list {
  position: fixed;
  right: 332px;
  top: 92px;
  z-index: 44;
  display: grid;
  gap: 4px;
  pointer-events: none;
}

.v30-xp-drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  min-width: 74px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 226, 116, .28);
  border-radius: 9px;
  background: rgba(6, 9, 10, .72);
  color: #fff2c6;
  box-shadow: 0 10px 26px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07);
  text-shadow: 0 2px 2px rgba(0,0,0,.8);
  animation: v30-xp-rise 2.2s ease-out both;
}

.v30-xp-drop img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.65));
}

.v30-xp-drop strong {
  font-size: .86rem;
  font-weight: 1000;
}

@keyframes v30-xp-rise {
  from { transform: translateY(10px); }
  to { transform: translateY(-14px); }
}

.v29-combat-header strong::after {
  content: "";
  display: block;
  width: 82px;
  height: 3px;
  margin: 5px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,226,116,.66), transparent);
}

.v29-combat-style.is-active em {
  color: #fff3a8;
}

@media (max-width: 1180px) {
  .v30-xp-drop-list {
    right: 304px;
  }
}

/* V31: combat feel polish. */
.v31-combat-target-info {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 166, 82, .20);
  border-radius: 8px;
  background: rgba(0,0,0,.24);
  color: #e6d6ad;
  font-size: .70rem;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 2px rgba(0,0,0,.8);
}

.v31-combat-target-info strong {
  color: #fff1c6;
}

.v30-xp-drop-list {
  top: 118px;
}


/* V31.1 hotfix: compact skills panel, instant custom skill tooltips, stronger combat selection. */
[data-side-panel="stats"] .v26-skill-grid {
  gap: 4px !important;
  padding: 7px 7px 0 !important;
}

[data-side-panel="stats"] .v26-skill-cell {
  height: 56px !important;
  padding: 3px 1px 2px !important;
  overflow: visible !important;
}

[data-side-panel="stats"] .v26-skill-cell img {
  width: 23px !important;
  height: 23px !important;
  margin-bottom: 0 !important;
}

[data-side-panel="stats"] .v26-skill-cell span {
  max-width: 52px !important;
  font-size: .37rem !important;
  line-height: 1.05 !important;
}

[data-side-panel="stats"] .v26-skill-cell strong {
  font-size: .76rem !important;
  line-height: 1 !important;
}

[data-side-panel="stats"] .v29-skill-progress {
  width: 43px !important;
  height: 3px !important;
  margin-top: 2px !important;
}

[data-side-panel="stats"] .v29-skill-hover {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  min-height: 42px !important;
  margin: 5px 8px 0 !important;
  padding: 7px 8px !important;
  font-size: .58rem !important;
  line-height: 1.22 !important;
}

[data-side-panel="stats"] .v26-total-level {
  bottom: 7px !important;
}

.v26-skill-cell[data-skill-tooltip]:hover::after {
  content: attr(data-skill-tooltip);
  position: fixed;
  z-index: 10000;
  right: 330px;
  top: 156px;
  max-width: 260px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 226, 116, .34);
  border-radius: 6px;
  background: rgba(16, 12, 8, .96);
  color: #fff0bd;
  font-size: .70rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: none;
  text-align: left;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
}

.v29-combat-style.is-active {
  border-color: rgba(255, 226, 116, .95) !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 226, 116, .18), transparent 42%),
    linear-gradient(180deg, rgba(150, 45, 42, .98), rgba(74, 23, 20, .98)) !important;
  transform: translateY(-1px);
}

.v29-combat-style:active {
  transform: translateY(1px);
}

/* V31.2 status orbs + player HP polish. */
.v31-status-orbs {
  position: absolute;
  inset: 8px 6px auto auto;
  z-index: 4;
  display: grid;
  gap: 5px;
  pointer-events: auto;
}

.v31-status-orb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 34px;
  border: 2px solid rgba(42, 30, 14, .92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, rgba(109, 83, 41, .94), rgba(30, 22, 12, .98));
  color: #fff2c6;
  font-size: .72rem;
  font-weight: 1000;
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
  box-shadow: 0 8px 18px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,226,116,.22);
}

.v31-status-orb--hp {
  color: #ffe8df;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, #a83b31, #3b1411);
}

.v31-status-orb--prayer {
  color: #dff4ff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.25), transparent 36%),
    linear-gradient(180deg, #3d78b8, #162338);
}

.v31-status-orb--stamina {
  color: #eaffc5;
  font-size: .62rem;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(180deg, #639b3a, #1e3515);
}

/* V32.2 target status + OSRS-like combat readout. */
.v32-target-status {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 35;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  width: 150px;
  padding: 4px 5px 5px;
  border: 1px solid rgba(15, 15, 12, .92);
  background: rgba(21, 17, 11, .78);
  color: #f9f4df;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.08;
  text-shadow: 0 1px 1px rgba(0,0,0,.92);
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.08);
}

.v32-target-status[hidden] {
  display: none;
}

.v32-target-status__action {
  grid-column: 1 / -1;
  color: #fff9d9;
  font-weight: 800;
}

.v32-target-status strong {
  color: #fff7c7;
  font-size: 12px;
  font-weight: 900;
}

.v32-target-status__level {
  align-self: end;
  color: #e9dcc3;
  font-weight: 800;
}

.v32-target-status__bar {
  grid-column: 1 / 2;
  display: block;
  height: 14px;
  border: 1px solid rgba(0,0,0,.95);
  background: #8e1717;
  box-shadow: inset 0 1px rgba(255,255,255,.16);
  overflow: hidden;
}

.v32-target-status__bar i {
  display: block;
  height: 100%;
  background: #18de38;
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.v32-target-status__hp {
  align-self: center;
  min-width: 28px;
  color: #fff0d0;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.v31-status-orb {
  z-index: 5;
}


/* V33: open-bank concept implementation + larger OSRS-style bank window. */
.v33-bank-window {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 62;
  width: min(940px, calc(100vw - 34px));
  max-height: min(760px, calc(100vh - 34px));
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 12px;
  border: 3px solid #1d140c;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(76, 53, 28, .98), rgba(25, 18, 12, .98)),
    radial-gradient(circle at 50% 0%, rgba(255, 226, 116, .12), transparent 45%);
  box-shadow:
    0 34px 120px rgba(0,0,0,.68),
    inset 0 0 0 2px rgba(255,226,116,.20),
    inset 0 0 0 6px rgba(0,0,0,.28);
  color: #f5df9a;
  pointer-events: auto;
}

.v33-bank-window[hidden] {
  display: none;
}

.v33-bank-header {
  display: grid;
  grid-template-columns: 92px 1fr 44px;
  align-items: center;
  min-height: 52px;
  padding: 4px 6px;
  border: 2px solid rgba(0,0,0,.75);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(43,31,19,.96), rgba(21,16,11,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.v33-bank-header strong {
  text-align: center;
  color: #ffd86b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 196, 67, .18);
}

.v33-bank-header button {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(0,0,0,.75);
  border-radius: 5px;
  background: linear-gradient(180deg, #8e6230, #3b2414);
  color: #ffd88a;
  font-size: 1.8rem;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

.v33-bank-counts {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-self: start;
  gap: 3px;
  min-width: 70px;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(0,0,0,.28);
  color: #ffe274;
  font-weight: 900;
  text-align: center;
}

.v33-bank-counts small {
  color: #9c8457;
}

.v33-bank-tabs {
  display: grid;
  grid-template-columns: repeat(7, 54px) 1fr;
  gap: 7px;
  align-items: center;
}

.v33-bank-tabs button,
.v33-bank-search {
  height: 46px;
  border: 2px solid rgba(0,0,0,.65);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(63,45,25,.96), rgba(31,22,14,.98));
  color: #d9c691;
  font-size: 1.22rem;
  font-weight: 1000;
  box-shadow: inset 0 1px rgba(255,255,255,.09);
}

.v33-bank-tabs button.is-active {
  color: #ffe274;
  border-color: rgba(255, 216, 107, .55);
  background: linear-gradient(180deg, rgba(98,65,28,.98), rgba(37,25,13,.98));
}

.v33-bank-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.v33-bank-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #b79c72;
  font: 900 1rem/1.1 system-ui, sans-serif;
  outline: 0;
}

.v33-bank-grid {
  grid-template-columns: repeat(8, minmax(54px, 1fr)) !important;
  gap: 7px !important;
  min-height: 390px;
  max-height: min(470px, 52vh);
  overflow: hidden auto;
  padding: 8px;
  border: 2px solid rgba(0,0,0,.70);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(32,25,17,.98), rgba(17,13,9,.98));
  box-shadow: inset 0 0 34px rgba(0,0,0,.36);
}

.v33-bank-slot {
  height: 62px !important;
  border: 2px solid rgba(92, 66, 35, .76) !important;
  border-radius: 6px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.06), transparent 44%),
    rgba(20, 15, 10, .76) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 1px 0 rgba(255,226,116,.05);
}

.v33-bank-slot:hover:not(.is-empty) {
  border-color: rgba(255, 216, 107, .64) !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,226,116,.13), transparent 48%),
    rgba(33, 23, 12, .92) !important;
}

.v33-bank-slot.is-empty {
  opacity: .58;
  pointer-events: none;
}

.v33-bank-slot .inventory-slot__icon {
  font-size: 1.9rem;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.7));
}

.v33-bank-slot .inventory-slot__qty {
  top: 4px;
  left: 6px;
  right: auto;
  bottom: auto;
  color: #fff145;
  font-size: .72rem;
}

.v33-bank-actions {
  display: grid !important;
  grid-template-columns: 1.2fr 1.2fr repeat(4, 66px);
  gap: 8px;
  margin-top: 0 !important;
  padding: 4px 0 0;
}

.v33-bank-actions button {
  min-height: 44px;
  border: 2px solid rgba(0,0,0,.70);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(69,48,24,.98), rgba(28,19,11,.98));
  color: #e7d09c;
  font-weight: 1000;
  cursor: pointer;
}

.v33-bank-actions button.is-active,
.v33-bank-actions button:hover {
  color: #ffe274;
  border-color: rgba(255, 216, 107, .45);
}

@media (max-width: 760px) {
  .v33-bank-tabs {
    grid-template-columns: repeat(4, 1fr);
  }

  .v33-bank-search {
    grid-column: 1 / -1;
  }

  .v33-bank-grid {
    grid-template-columns: repeat(5, minmax(48px, 1fr)) !important;
  }

  .v33-bank-actions {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   V60: OSRS-parity bank rework — search, item/note toggle, X qty,
   deposit-worn, drag-to-rearrange, tiered quantity colours.
   ============================================================ */

.v60-bank-toolbar {
  grid-template-columns: 74px 1fr !important;
}

.v60-bank-search {
  padding: 0 10px 0 12px !important;
}

.v60-bank-search__icon {
  font-size: 1.05rem;
  opacity: .7;
}

.v60-bank-search__icon::before {
  content: "🔍";
}

.v60-bank-search input {
  color: #f0dfae !important;
}

.v60-bank-search input::placeholder {
  color: #8a7452;
}

.v60-bank-search__clear {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  color: #e7d09c;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.v60-bank-search__clear:hover {
  background: rgba(0, 0, 0, .55);
  color: #ffe274;
}

.v60-bank-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
}

.v60-bank-group {
  display: flex;
  gap: 6px;
}

.v60-bank-group--deposit button {
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
}

.v60-bank-group--deposit button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

.v60-bank-group--note {
  border-radius: 6px;
  overflow: hidden;
}

.v60-bank-group--note button {
  min-width: 58px;
}

.v60-bank-group--qty {
  flex: 1;
  justify-content: flex-end;
}

.v60-bank-group--qty button {
  min-width: 44px;
  flex: 1;
  max-width: 58px;
}

/* Tiered OSRS quantity colours: white under 100k, green in the
   hundred-thousands/millions (shown as K), gold at 10m+ (shown as M). */
.v60-bank-qty--white {
  color: #f2ede0 !important;
}

.v60-bank-qty--green {
  color: #5ed34a !important;
}

.v60-bank-qty--gold {
  color: #ffe274 !important;
}

/* Drag-to-rearrange within the bank grid, same contract as the backpack. */
.bank-slot.is-drag-source {
  opacity: .35;
}

.bank-slot.is-drop-target {
  border-color: rgba(255, 226, 116, .9) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 226, 116, .55), 0 0 10px rgba(255, 226, 116, .35);
}

/* Noted item badge in the backpack: a small folded-corner "N" ribbon. */
.inventory-slot.is-noted {
  position: relative;
}

.inventory-slot__noted {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: linear-gradient(180deg, #f5e6b8, #c7a45a);
  color: #3a2a10;
  font-size: .58rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  pointer-events: none;
}

/* Custom "X" quantity overlay: a small centred dialog inside the bank window. */
.v60-bank-x-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 4, .58);
  border-radius: 8px;
}

.v60-bank-x-overlay[hidden] {
  display: none;
}

.v60-bank-x-overlay__card {
  display: grid;
  gap: 10px;
  min-width: 220px;
  padding: 16px 18px;
  border: 2px solid rgba(255, 216, 107, .45);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(63, 45, 25, .98), rgba(28, 19, 11, .99));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
  text-align: center;
}

.v60-bank-x-overlay__card label {
  color: #ffe274;
  font-weight: 900;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.v60-bank-x-overlay__card input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 2px solid rgba(0, 0, 0, .7);
  border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  color: #f5df9a;
  font: 900 1.3rem/1.1 system-ui, sans-serif;
  text-align: center;
}

.v60-bank-x-overlay__card input:focus {
  outline: 2px solid rgba(255, 216, 107, .7);
}

.v60-bank-x-overlay__actions {
  display: flex;
  gap: 8px;
}

.v60-bank-x-overlay__actions button {
  flex: 1;
  min-height: 38px;
  border: 2px solid rgba(0, 0, 0, .7);
  border-radius: 5px;
  background: linear-gradient(180deg, #8e6230, #3b2414);
  color: #ffd88a;
  font-weight: 900;
  cursor: pointer;
}

.v60-bank-x-overlay__actions button:hover {
  border-color: rgba(255, 216, 107, .6);
  color: #ffe274;
}

@media (max-width: 760px) {
  .v60-bank-toolbar {
    grid-template-columns: 60px 1fr !important;
  }

  .v60-bank-actions {
    flex-wrap: wrap;
  }

  .v60-bank-group--qty {
    justify-content: space-between;
  }
}

/* ============================================================
   V35: OSRS-feel polish pass.
   Sky/lighting done in Three.js; this section covers the 2D shell:
   top-left hover action line, OSRS click cross, minimap orbs,
   chatbox, context menu, xp drops, vignette and settings.
   ============================================================ */

/* --- Stage vignette + atmosphere --------------------------- */
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(8, 14, 16, 0.26) 100%),
    linear-gradient(180deg, rgba(10, 18, 22, 0.10), transparent 12%);
}

/* --- OSRS click cross --------------------------------------- */
.click-marker {
  position: absolute;
  z-index: 24;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  opacity: 0;
}

.click-marker i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 4px;
  margin: -2px 0 0 -50%;
  border-radius: 2px;
  background: #ffe83e;
  box-shadow: 0 0 0 1px rgba(40, 28, 0, 0.85);
}

.click-marker i:first-child { transform: rotate(45deg); }
.click-marker i:last-child { transform: rotate(-45deg); }

.click-marker[data-tone="interact"] i {
  background: #ff4b3a;
  box-shadow: 0 0 0 1px rgba(52, 8, 0, 0.85);
}

.click-marker.is-live {
  animation: v35-click-pop 0.42s ease-out both;
}

@keyframes v35-click-pop {
  0% { opacity: 1; transform: scale(1.15); }
  60% { opacity: 1; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(0.42); }
}

/* --- Top-left hover action line (OSRS style) ----------------- */
.action-tooltip {
  left: 10px !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  align-items: baseline;
  gap: 5px;
  min-width: 0 !important;
  max-width: min(440px, 46vw) !important;
  padding: 5px 10px 6px !important;
  border: 1px solid rgba(12, 10, 6, 0.9) !important;
  border-radius: 3px !important;
  background: rgba(23, 19, 13, 0.82) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 226, 116, 0.10) !important;
  backdrop-filter: none !important;
  transform: none !important;
  transition: opacity 0.05s ease !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
}

.action-tooltip.is-visible { transform: none !important; }

.action-tooltip__eyebrow {
  color: #f4f0e2 !important;
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

.action-tooltip__title {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #58e0e0 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-tooltip__title[data-tone="npc"] { color: #ffe83e !important; }
.action-tooltip__title[data-tone="attack"] { color: #ffe83e !important; }
.action-tooltip__title[data-tone="item"] { color: #ffa54a !important; }
.action-tooltip__title[data-tone="object"] { color: #58e0e0 !important; }

.action-tooltip__body {
  color: #b9b29a !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

/* Combat readout drops below the hover line so both stay readable. */
.v32-target-status {
  top: 44px;
}

/* --- OSRS context menu --------------------------------------- */
.context-menu {
  min-width: 168px;
  padding: 0 !important;
  border: 1px solid #0c0a06 !important;
  border-radius: 4px !important;
  background: rgba(24, 20, 14, 0.97) !important;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(122, 99, 62, 0.55) !important;
  backdrop-filter: none !important;
  overflow: hidden;
}

.context-menu__title {
  margin: 0 !important;
  padding: 6px 10px 5px !important;
  border-bottom: 1px solid rgba(12, 10, 6, 0.9) !important;
  background: linear-gradient(180deg, #6c5b3c, #4a3c25);
  color: #f7e8bb !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
}

.context-menu button {
  padding: 6px 10px !important;
  border-radius: 0 !important;
  color: #f4f0e2 !important;
  font: 800 0.8rem/1.2 Inter, ui-sans-serif, system-ui, sans-serif !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

.context-menu button:hover {
  background: rgba(255, 226, 116, 0.16) !important;
  color: #fff4bd !important;
}

.context-menu button[data-action="primary"] { color: #fff4bd !important; }
.context-menu button[data-tone="attack"] { color: #ffb0a6 !important; }
.context-menu button[data-action="examine"],
.context-menu button[data-action="cancel"] { color: #cfc7ad !important; }

/* --- Minimap orbs -------------------------------------------- */
.v31-status-orbs {
  inset: 14px auto auto -12px;
  gap: 7px;
}

.v31-status-orb {
  position: relative;
  width: 42px;
  height: 42px;
  border: 3px solid transparent;
  font-size: 0.78rem;
  cursor: default;
}

.v31-status-orb--hp {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.20), transparent 40%) padding-box,
    linear-gradient(180deg, #7e2c24, #38100c) padding-box,
    conic-gradient(from 180deg, #e93c2c calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v31-status-orb--prayer {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 40%) padding-box,
    linear-gradient(180deg, #2c5d92, #101c2c) padding-box,
    conic-gradient(from 180deg, #5cc3ff calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v31-status-orb--stamina {
  font-size: 0.72rem;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.20), transparent 40%) padding-box,
    linear-gradient(180deg, #55832f, #1a2c11) padding-box,
    conic-gradient(from 180deg, #a7e34d calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v31-status-orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 32%);
  pointer-events: none;
}

.v31-status-orb.is-low {
  animation: v35-orb-pulse 0.9s ease-in-out infinite;
}

@keyframes v35-orb-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) saturate(1.3); }
}

/* --- XP drops -------------------------------------------------- */
.v30-xp-drop {
  min-width: 0;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: rgba(10, 8, 5, 0.55);
  box-shadow: none;
  animation: v35-xp-rise 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.v30-xp-drop strong {
  color: #f7e8bb;
  font-size: 0.82rem;
}

@keyframes v35-xp-rise {
  0% { transform: translateY(16px); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 1; }
}

/* --- Chatbox (OSRS parchment-on-dark) --------------------------- */
.osrs-chatbox.v26-chatbox {
  width: min(470px, 38vw);
  max-height: 190px;
  padding: 0;
  border: 1px solid #0d0b07;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 24, 17, 0.93), rgba(16, 13, 9, 0.95));
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(122, 99, 62, 0.45);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.v26-chatbox .chat-tabs {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px 5px 3px;
  background: linear-gradient(180deg, rgba(58, 47, 30, 0.9), rgba(34, 27, 17, 0.9));
  border-bottom: 1px solid rgba(12, 10, 6, 0.9);
}

.v26-chatbox .chat-tabs button {
  min-width: 58px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(12, 10, 6, 0.85);
  border-radius: 4px;
  background: linear-gradient(180deg, #5a4a2e, #382c19);
  color: #d9c691;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.10);
}

.v26-chatbox .chat-tabs button.is-active {
  background: linear-gradient(180deg, #8a6f40, #57431f);
  color: #fff2c6;
  border-color: rgba(255, 216, 107, 0.4);
}

.v26-chatbox .log-list {
  display: grid;
  align-content: end;
  gap: 3px;
  height: 118px;
  max-height: 118px;
  margin: 0;
  padding: 7px 11px 6px;
  overflow: hidden;
}

.v26-chatbox .log-list li {
  color: #f2ead1;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

.v26-chatbox .log-list li:last-child {
  color: #fff4bd;
}

.v26-chatbox .chat-input-shell {
  margin: 0;
  padding: 6px 11px 7px;
  border-top: 1px solid rgba(122, 99, 62, 0.35);
  color: #8d8467;
  font-size: 0.76rem;
  font-weight: 700;
  font-style: italic;
}

.v26-chatbox .chat-input-shell::before {
  content: "Wayfarer: ";
  color: #cbbd93;
  font-style: normal;
  font-weight: 900;
}

/* --- Settings panel ------------------------------------------- */
.v35-settings {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 92px 34px 0;
}

.v35-settings__toggle {
  min-height: 40px;
  border: 2px solid rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(84, 62, 32, 0.98), rgba(40, 28, 15, 0.98));
  color: #ffe9ad;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.v35-settings__toggle.is-off {
  color: #c9b78d;
  filter: saturate(0.6) brightness(0.85);
}

.v35-settings__hint {
  margin: 0;
  color: #d8c49a;
  font-size: 0.68rem;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- Small cleanups -------------------------------------------- */
.mobile-help { display: none !important; }

.move-hint {
  padding: 3px 8px;
  border: 1px solid rgba(12, 10, 6, 0.9);
  border-radius: 3px;
  background: rgba(58, 16, 10, 0.88);
  color: #ffd6cd;
  font-size: 0.72rem;
  font-weight: 800;
}

/* ============================================================
   V36: quarry overhaul, OSRS input, ambient life, PNG item icons.
   ============================================================ */

.inventory-slot__img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.v33-bank-slot .inventory-slot__img {
  width: 46px;
  height: 46px;
}

.v26-inventory-grid .inventory-slot {
  display: grid;
  place-items: center;
}

/* ============================================================
   V38: cooking/fishing loops, use-item flow, bank modes, tab icons.
   ============================================================ */

.v33-bank-tabs button img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
  opacity: 0.85;
}

.v33-bank-tabs button.is-active {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.v33-bank-search span {
  color: #b79c72;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.v33-bank-actions button.is-active {
  border-color: rgba(255, 216, 107, 0.75) !important;
  background: linear-gradient(180deg, rgba(122, 84, 36, 0.98), rgba(56, 38, 18, 0.98)) !important;
  color: #ffe274 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, 0.25);
}

/* Armed "Use item ->" state: highlight the source slot. */
.inventory-slot.is-selected {
  outline: 2px solid rgba(255, 226, 116, 0.85);
  outline-offset: -2px;
  border-radius: 8px;
}

/* ============================================================
   V39: OSRS minimap cluster, inventory drag, woodcutting.
   ============================================================ */

/* --- Compass on the minimap frame --- */
.v39-compass {
  position: absolute;
  top: 2px;
  left: 6px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(24, 17, 10, 0.95);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, #5d503c, #2c251a);
  color: #ffe8a8;
  font-size: 0.8rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 226, 116, 0.18);
  pointer-events: none;
}

.v39-compass i {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid #e33b2e;
}

/* --- Orb stack: number pill + icon disc, curved down the frame's left --- */
.v39-orb-stack {
  position: absolute;
  top: 34px;
  left: -34px;
  z-index: 5;
  display: grid;
  gap: 5px;
}

.v39-orb {
  display: flex;
  align-items: center;
  gap: 0;
}

.v39-orb--xp { transform: translateX(14px); }
.v39-orb--hp { transform: translateX(4px); }
.v39-orb--prayer { transform: translateX(0); }
.v39-orb--run { transform: translateX(4px); }

.v39-orb__num {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid rgba(12, 9, 5, 0.95);
  border-radius: 5px 0 0 5px;
  background: linear-gradient(180deg, rgba(38, 32, 22, 0.95), rgba(18, 14, 9, 0.97));
  color: #a7e34d;
  font-size: 0.72rem;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.v39-orb__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -2px;
  border: 3px solid transparent;
  border-radius: 50%;
  color: #ffe8a8;
  font-size: 0.62rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.v39-orb__disc img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
}

.v39-orb__ic {
  width: 19px;
  height: 19px;
  fill: #eef7d6;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.7));
}

.v39-orb--xp .v39-orb__disc {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.2), transparent 42%) padding-box,
    linear-gradient(180deg, #4c4436, #211c12) padding-box,
    conic-gradient(from 180deg, #d8c06a 360deg, rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--hp .v39-orb__disc {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.2), transparent 42%) padding-box,
    linear-gradient(180deg, #7e2c24, #38100c) padding-box,
    conic-gradient(from 180deg, #e93c2c calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--prayer .v39-orb__disc {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.22), transparent 42%) padding-box,
    linear-gradient(180deg, #2c5d92, #101c2c) padding-box,
    conic-gradient(from 180deg, #5cc3ff calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--run .v39-orb__disc {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.2), transparent 42%) padding-box,
    linear-gradient(180deg, #55832f, #1a2c11) padding-box,
    conic-gradient(from 180deg, #a7e34d calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--hp .v39-orb__num { color: #ff9c8f; }
.v39-orb--prayer .v39-orb__num { color: #9fd8ff; }
.v39-orb--xp .v39-orb__num { color: #ffe8a8; min-width: 40px; }

.v39-orb.is-low .v39-orb__disc {
  animation: v35-orb-pulse 0.9s ease-in-out infinite;
}

/* --- XP drops fall from the XP orb, OSRS style --- */
.v30-xp-drop-list {
  right: 348px !important;
  top: 64px !important;
  gap: 2px;
}

@media (max-width: 1180px) {
  .v30-xp-drop-list {
    right: 322px !important;
  }
}

/* --- Inventory drag --- */
.slot-drag-ghost {
  position: fixed;
  z-index: 200;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  opacity: 0.9;
}

.slot-drag-ghost img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.inventory-slot.is-drop-target {
  outline: 2px dashed rgba(255, 226, 116, 0.85);
  outline-offset: -2px;
  border-radius: 8px;
  background: rgba(255, 226, 116, 0.10) !important;
}

/* ============================================================
   V40: equip panel, firemaking/smelting, world map, OSRS XP drops.
   ============================================================ */

/* --- OSRS equipment panel: stone tiles in the classic layout --- */
.v40-equip-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-areas:
    ".      head   ."
    "cape   neck   ammo"
    "weapon body   shield"
    ".      legs   ."
    "hands  feet   ring";
  gap: 14px 22px;
  justify-content: center;
  align-content: start;
  padding: 66px 0 0;
}

.v40-equip-slot {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(14, 11, 7, 0.95);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, #4a4038, #2b2520);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(122, 99, 62, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.4);
  cursor: default;
}

.v40-equip-slot.is-filled {
  cursor: pointer;
  border-color: rgba(255, 216, 107, 0.4);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 226, 116, 0.12), transparent 55%),
    linear-gradient(180deg, #514538, #2e2620);
}

.v40-equip-slot.is-filled:hover {
  filter: brightness(1.15);
}

.v40-equip-slot__ghost {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.35;
}

.v40-equip-slot__item {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}

/* --- OSRS XP drops: solid, long rise from below up past the XP orb --- */
.v30-xp-drop-list {
  display: block !important;
  width: 110px;
  height: 240px;
  overflow: hidden;
}

.v40-xp-drop {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  animation: v40-xp-rise 2.9s linear both;
  pointer-events: none;
}

.v40-xp-drop img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

.v40-xp-drop strong {
  color: #f8f4e8;
  font-size: 0.95rem;
  font-weight: 900;
  text-shadow:
    0 2px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
}

@keyframes v40-xp-rise {
  0% { transform: translateY(215px); opacity: 0; }
  6% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translateY(0px); opacity: 0; }
}

/* --- Map orb --- */
.v39-orb--map {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(14px);
}

.v39-orb--map .v39-orb__disc {
  font-size: 0.5rem;
  letter-spacing: 0.05em;
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.2), transparent 42%) padding-box,
    linear-gradient(180deg, #2c5d70, #10222c) padding-box,
    conic-gradient(from 180deg, #6ecfe0 360deg, rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--map:hover .v39-orb__disc {
  filter: brightness(1.2);
}

/* --- World map overlay --- */
.v40-worldmap {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(6, 8, 9, 0.72);
  backdrop-filter: blur(3px);
}

.v40-worldmap[hidden] { display: none; }

.v40-worldmap__panel {
  border: 3px solid #1d140c;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(52, 40, 25, 0.98), rgba(24, 18, 12, 0.98));
  box-shadow:
    0 40px 130px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(255, 226, 116, 0.2);
  overflow: hidden;
}

.v40-worldmap__panel header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, rgba(43, 31, 19, 0.96), rgba(21, 16, 11, 0.98));
}

.v40-worldmap__panel header strong {
  color: #ffd86b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  text-shadow: 0 2px 0 #000;
}

.v40-worldmap__panel header span {
  flex: 1;
  color: #b9a678;
  font-size: 0.76rem;
  font-weight: 700;
}

.v40-worldmap__panel header button {
  width: 34px;
  height: 34px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  background: linear-gradient(180deg, #8e6230, #3b2414);
  color: #ffd88a;
  font-size: 1.4rem;
  font-weight: 1000;
  cursor: pointer;
}

#world-map-canvas {
  display: block;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 140px);
  cursor: crosshair;
}

/* ============================================================
   V41: equip panel fit + bonuses, Sten's arms shop.
   ============================================================ */

/* Compact equipment doll: everything fits inside the 470px panel. */
.v40-equip-grid {
  grid-template-areas:
    ".      head   ."
    "cape   neck   ammo"
    "weapon body   shield"
    ".      legs   ."
    "hands  feet   ring"
    "bonus  bonus  bonus" !important;
  gap: 9px 18px !important;
  padding: 54px 0 0 !important;
}

.v40-equip-slot {
  width: 46px !important;
  height: 46px !important;
}

.v40-equip-slot__ghost {
  width: 30px !important;
  height: 30px !important;
}

.v40-equip-slot__item {
  width: 36px !important;
  height: 36px !important;
}

.v41-equip-bonuses {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
  padding: 7px 10px;
  border: 1px solid rgba(122, 99, 62, 0.4);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: #cbb98a;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.v41-equip-bonuses strong {
  color: #ffe8a8;
  font-size: 0.76rem;
}

/* --- Sten's Arms shop window --- */
.v41-shop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 60;
  width: min(520px, calc(100vw - 34px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid #1d140c;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(76, 53, 28, 0.98), rgba(25, 18, 12, 0.98));
  box-shadow:
    0 34px 120px rgba(0, 0, 0, 0.68),
    inset 0 0 0 2px rgba(255, 226, 116, 0.2);
  color: #f5df9a;
}

.v41-shop[hidden] { display: none; }

.v41-shop__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(43, 31, 19, 0.96), rgba(21, 16, 11, 0.98));
}

.v41-shop__header strong {
  color: #ffd86b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  text-shadow: 0 2px 0 #000;
}

.v41-shop__header span {
  flex: 1;
  color: #b9a678;
  font-size: 0.7rem;
  font-weight: 700;
}

.v41-shop__header button {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  background: linear-gradient(180deg, #8e6230, #3b2414);
  color: #ffd88a;
  font-size: 1.3rem;
  font-weight: 1000;
  cursor: pointer;
}

.v41-shop__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: min(360px, 48vh);
  overflow-y: auto;
  padding-right: 4px;
}

.v41-shop__grid::-webkit-scrollbar {
  width: 8px;
}

.v41-shop__grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.26);
  border-radius: 999px;
}

.v41-shop__grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b4833f, #5b351b);
  border-radius: 999px;
}

.v41-shop__item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid rgba(92, 66, 35, 0.76);
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05), transparent 50%),
    rgba(20, 15, 10, 0.8);
  color: #f0e2bb;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.v41-shop__item:hover {
  border-color: rgba(255, 216, 107, 0.64);
  background: rgba(33, 23, 12, 0.92);
}

.v41-shop__item img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}

.v41-shop__name { font-size: 0.8rem; }

.v41-shop__price {
  color: #ffe274;
  font-size: 0.78rem;
  font-weight: 900;
}

.v41-shop__item.is-poor .v41-shop__price { color: #e07a6a; }

.v41-shop__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: #cbb98a;
  font-size: 0.78rem;
  font-weight: 800;
}

.v41-shop__footer strong { color: #ffe274; font-size: 0.95rem; }

/* ============================================================
   V42: deterministic worn-equipment layout.
   The doll is its own fixed grid and the bonuses bar sits below it
   in a flex column, so nothing can clip or stretch the columns.
   ============================================================ */

.v42-equip-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 10px 0;
}

.v42-equip-doll {
  display: grid;
  grid-template-areas:
    ".      head   ."
    "cape   neck   ammo"
    "weapon body   shield"
    ".      legs   ."
    "hands  feet   ring";
  grid-template-columns: repeat(3, 56px);
  grid-auto-rows: 50px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 8px 14px;
}

.v42-equip-panel .v41-equip-bonuses {
  width: min(256px, 100%);
  justify-content: space-evenly;
  gap: 6px;
  margin-top: 0;
  box-sizing: border-box;
}

/* ============================================================
   V43: OSRS parchment chatbox, smithing window, goblin bog.
   ============================================================ */

/* --- Chatbox rework: light parchment, readable dark text, OSRS
       stone tab strip along the BOTTOM, input line above it. --- */
.osrs-chatbox.v26-chatbox.v43-chat {
  display: flex;
  flex-direction: column;
  width: min(519px, 41vw);
  max-height: none;
  padding: 0;
  border: 2px solid #241a10;
  border-radius: 4px;
  background: linear-gradient(180deg, #dcd2b2, #cfc3a0);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 252, 240, 0.55),
    inset 0 0 26px rgba(120, 96, 60, 0.18);
  overflow: hidden;
  backdrop-filter: none;
}

.v43-chat .v43-chat__scroll {
  height: 126px;
  padding: 6px 10px 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #6d6152 rgba(120, 96, 60, 0.18);
}

.v43-chat .log-list {
  display: grid;
  align-content: end;
  gap: 2px;
  min-height: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
}



.v43-chat .v43-chat__scroll::-webkit-scrollbar {
  width: 8px;
}

.v43-chat .v43-chat__scroll::-webkit-scrollbar-track {
  background: rgba(120, 96, 60, 0.16);
}

.v43-chat .v43-chat__scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6d6152, #3a2f20);
  border: 1px solid #241a10;
  border-radius: 8px;
}

.v43-chat .log-list li {
  padding: 0;
  border: 0;
  color: #211c12;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.32;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v43-chat .log-list li:last-child {
  color: #211c12;
}

.v43-chat .log-list li.v43-chat__quiet {
  color: #6d6350;
  font-style: italic;
}

/* Input line: "Wayfarer: *" with a softly blinking cursor star. */
.v43-chat .chat-input-shell {
  order: 0;
  margin: 0;
  padding: 5px 10px 6px;
  border-top: 1px solid rgba(96, 78, 48, 0.55);
  color: #163a68;
  font-size: 0.78rem;
  font-weight: 700;
  font-style: normal;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.30), rgba(210, 197, 162, 0.30));
}

.v43-chat .chat-input-shell::before {
  content: "Wayfarer: ";
  color: #1c1812;
  font-weight: 900;
  font-style: normal;
}

.v43-chat .chat-input-shell::after {
  content: "*";
  color: #163a68;
  animation: v43-cursor-blink 1.1s steps(1) infinite;
}

@keyframes v43-cursor-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.1; }
}

/* Stone tab strip pinned along the bottom, like the OSRS chatbox. */
.v43-chat .chat-tabs.v43-chat__tabs {
  order: 1;
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 4px 5px;
  border-top: 2px solid #241a10;
  border-bottom: 0;
  background: linear-gradient(180deg, #3a2f20, #241c12);
}

.v43-chat .chat-tabs button {
  flex: 1;
  min-width: 0;
  height: 23px;
  padding: 0 4px;
  border: 1px solid #14100a;
  border-radius: 3px;
  background: linear-gradient(180deg, #6d6152, #453b2e);
  color: #e8dcbc;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), inset 0 -2px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.v43-chat .chat-tabs button:hover {
  filter: brightness(1.14);
}

.v43-chat .chat-tabs button.is-active {
  background: linear-gradient(180deg, #8d7a54, #5c4b2c);
  border-color: rgba(255, 216, 107, 0.55);
  color: #ffe9ae;
  box-shadow:
    inset 0 1px rgba(255, 236, 170, 0.35),
    inset 0 -2px rgba(0, 0, 0, 0.25),
    0 0 8px rgba(255, 216, 107, 0.18);
}

.v43-chat .chat-tabs button.v43-chat__report {
  flex: 0 0 auto;
  padding: 0 9px;
  margin-left: 2px;
  color: #ffb9a1;
}

/* --- Smithing window: same premium frame as the shop, steel accent --- */
.v43-smith .v41-shop__header strong {
  color: #cfd7e2;
}

.v43-smith .v41-shop__price {
  color: #cfd7e2;
}

.v43-smith .v41-shop__item.is-poor .v41-shop__price {
  color: #e07a6a;
}

/* ============================================================
   V44: settings reset-save button.
   ============================================================ */

.v44-settings__danger {
  border-color: rgba(220, 90, 70, 0.5) !important;
  color: #ffb9a1 !important;
}

.v44-settings__danger:hover {
  filter: brightness(1.15);
}

/* ===== V53: Prayer panel ===== */

.v53-prayer-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  height: 100%;
}

.v53-prayer-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #f3e6c8;
}

.v53-prayer-header strong {
  font-size: 15px;
  letter-spacing: 0.4px;
}

.v53-prayer-header span {
  font-size: 12px;
  color: #cfe3f7;
}

.v53-prayer-bar {
  height: 9px;
  border-radius: 5px;
  background: #1c1710;
  border: 1px solid #0d0a06;
  overflow: hidden;
}

.v53-prayer-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #59c6e8, #8fe0f7);
  transition: width 0.25s ease;
}

.v53-prayer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.v53-prayer-cell {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid #4a3b26;
  background: linear-gradient(180deg, #3a2f1e, #2a2114);
  color: #f3e6c8;
  cursor: pointer;
  text-align: left;
}

.v53-prayer-cell img {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  image-rendering: auto;
}

.v53-prayer-cell span {
  font-size: 12.5px;
  font-weight: 800;
}

.v53-prayer-cell em {
  font-style: normal;
  font-size: 10.5px;
  color: #cbb98f;
}

.v53-prayer-cell:hover {
  filter: brightness(1.12);
}

.v53-prayer-cell.is-active {
  border-color: #8fe0f7;
  background: linear-gradient(180deg, #274b5e, #1a3547);
  box-shadow: 0 0 10px rgba(120, 210, 245, 0.35), inset 0 0 6px rgba(143, 224, 247, 0.25);
}

.v53-prayer-cell.is-active em {
  color: #bfe6f5;
}

.v53-prayer-cell.is-locked {
  opacity: 0.48;
  filter: saturate(0.35);
}

.v53-prayer-cell.is-locked em {
  color: #b98f8f;
}

.v53-prayer-info {
  margin-top: auto;
  font-size: 11.5px;
  line-height: 1.45;
  color: #d9cba8;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid #4a3b26;
  border-radius: 8px;
  padding: 8px 9px;
  min-height: 52px;
}

/* ===== V54: chat input ===== */

.v54-chat-input-shell {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-top: 1px solid rgba(74, 59, 38, 0.65);
  background: rgba(28, 22, 14, 0.35);
}

.v54-chat-input-name {
  font-size: 12px;
  font-weight: 800;
  color: #2b3aa8;
}

.v54-chat-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: #1d1812;
  padding: 3px 0;
}

.v54-chat-input::placeholder {
  color: rgba(60, 48, 30, 0.55);
}


/* V56: allow OSRS chat history to be reviewed by scrolling up. */
.v43-chat .v43-chat__scroll .log-list {
  overflow: visible;
}


/* V61: OSRS-style bank tabs, scrollable bank grid, and empty-slot drag targets. */
.v60-bank-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

.v61-bank-tab-strip {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: thin;
}

.v61-bank-tab {
  position: relative;
  flex: 0 0 38px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(0,0,0,.72);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, rgba(55,43,28,.98), rgba(18,13,9,.98));
  color: #e9d4a2;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.v61-bank-tab img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
  pointer-events: none;
}

.v61-bank-tab small {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: #f6e3a6;
  font-size: .48rem;
  line-height: 1;
  text-shadow: 0 1px #000;
  pointer-events: none;
}

.v61-bank-tab__main,
.v61-bank-tab__label,
.v61-bank-tab__icon {
  font-size: 1rem;
  font-weight: 1000;
  pointer-events: none;
}

.v61-bank-tab.is-active,
.v61-bank-tab:hover {
  color: #ffe274;
  border-color: rgba(255, 216, 107, .55);
  background: linear-gradient(180deg, rgba(86,65,35,.98), rgba(35,25,13,.98));
}

.v61-bank-tab.is-drop-target {
  border-color: rgba(94, 211, 74, .9);
  box-shadow: inset 0 0 0 2px rgba(94,211,74,.32), 0 0 10px rgba(94,211,74,.28);
}

.v61-bank-tab--add {
  color: #b9ffd0;
  font-size: 1.35rem;
}

.v33-bank-grid {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: #8a6330 rgba(0,0,0,.35);
}

.v33-bank-grid::-webkit-scrollbar {
  width: 8px;
}

.v33-bank-grid::-webkit-scrollbar-track {
  background: rgba(0,0,0,.35);
  border-radius: 999px;
}

.v33-bank-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b4833f, #5b351b);
  border-radius: 999px;
}

.v33-bank-slot.is-empty[data-bank-empty-index] {
  pointer-events: auto;
  cursor: default;
}

.v33-bank-slot.is-empty[data-bank-empty-index].is-drop-target {
  opacity: 1;
  border-color: rgba(255, 226, 116, .75) !important;
  background: rgba(255, 226, 116, .075) !important;
}


/* V61.1: bank tab behaviour polish — plus first, infinity/all tab always visible. */
.v61-bank-tab-strip {
  align-items: flex-end;
  padding: 0 2px 5px !important;
  border-bottom: 2px solid rgba(0,0,0,.65);
}

.v61-bank-tab {
  flex-basis: 41px;
  height: 38px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(58,49,37,.98), rgba(23,18,13,.98));
}

.v61-bank-tab.is-active {
  height: 42px;
  margin-bottom: -2px;
  color: #fff2b5;
  background: linear-gradient(180deg, rgba(91,72,43,.98), rgba(38,28,15,.98));
  border-bottom-color: rgba(38,28,15,.98);
}

.v61-bank-tab__main {
  font-size: 1.35rem;
  line-height: 1;
}

.v61-bank-tab--add {
  order: -2;
  font-size: 1.45rem;
  color: #d2c8aa;
}

.v61-bank-tab[data-bank-tab-id="main"] {
  order: -1;
}

/* ---- V71: Barrows-style loot chest window ------------------------------ */

.v71-loot {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 62;
  width: min(430px, calc(100vw - 34px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border: 3px solid #120d0a;
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(64, 52, 38, 0.55), rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg, rgba(58, 50, 42, 0.98), rgba(24, 20, 16, 0.99));
  box-shadow:
    inset 0 0 0 1px rgba(214, 190, 132, 0.16),
    0 18px 44px rgba(0, 0, 0, 0.66);
  color: #e8dbb8;
}

.v71-loot.is-open {
  animation: v71-loot-pop 0.28s cubic-bezier(0.2, 1.35, 0.4, 1);
}

@keyframes v71-loot-pop {
  0% { transform: translate(-50%, -50%) scale(0.72); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.v71-loot__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 6px;
  border-bottom: 2px solid rgba(20, 14, 9, 0.9);
}

.v71-loot__header strong {
  font-size: 17px;
  letter-spacing: 0.04em;
  color: #f0c75e;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85);
}

.v71-loot__header button {
  width: 26px;
  height: 26px;
  border: 2px solid #17100a;
  border-radius: 5px;
  background: linear-gradient(180deg, #7c3328, #4b1d16);
  color: #f5e9cf;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.v71-loot__header button:hover { filter: brightness(1.18); }

.v71-loot__body {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: center;
  padding: 2px 4px;
}

/* Small opened-chest illustration built from gradients, no assets. */
.v71-loot__chest {
  position: relative;
  width: 92px;
  height: 74px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
}

.v71-loot__chest-base {
  position: absolute;
  bottom: 0;
  width: 92px;
  height: 44px;
  border: 2px solid #14100b;
  border-radius: 5px 5px 7px 7px;
  background:
    linear-gradient(180deg, #6d4a26 0%, #4a3117 55%, #33210f 100%);
  box-shadow: inset 0 0 0 2px rgba(240, 199, 94, 0.22), inset 0 -8px 12px rgba(0, 0, 0, 0.45);
}

.v71-loot__chest-base::after {
  content: "";
  position: absolute;
  inset: 6px 34px auto;
  height: 14px;
  border: 2px solid #14100b;
  border-radius: 3px;
  background: linear-gradient(180deg, #f0c75e, #8a6a1e);
}

.v71-loot__chest-lid {
  position: absolute;
  top: 0;
  left: 4px;
  width: 84px;
  height: 34px;
  border: 2px solid #14100b;
  border-radius: 7px 7px 3px 3px;
  transform-origin: bottom center;
  transform: perspective(160px) rotateX(38deg);
  background:
    linear-gradient(180deg, #7a5530 0%, #563a1c 70%, #3d2913 100%);
  box-shadow: inset 0 0 0 2px rgba(240, 199, 94, 0.20);
}

.v71-loot__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  min-height: 74px;
  align-content: start;
}

.v71-loot__item {
  position: relative;
  height: 58px;
  border: 2px solid rgba(15, 11, 8, 0.95);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(94, 82, 64, 0.55), rgba(38, 32, 25, 0.85));
  cursor: pointer;
  display: grid;
  place-items: center;
}

.v71-loot__item:hover {
  border-color: rgba(240, 199, 94, 0.85);
  background:
    linear-gradient(180deg, rgba(122, 106, 78, 0.6), rgba(52, 43, 32, 0.9));
}

.v71-loot__item img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  pointer-events: none;
}

.v71-loot__qty {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #f9f16b;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

.v71-loot__note {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fd8ff;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

.v71-loot__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 0;
  border-top: 2px solid rgba(20, 14, 9, 0.9);
}

.v71-loot__hint {
  font-size: 11px;
  opacity: 0.75;
}

.v71-loot__take-all {
  padding: 7px 16px;
  border: 2px solid #17100a;
  border-radius: 6px;
  background: linear-gradient(180deg, #2e6b46, #1c4029);
  color: #eaf6df;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

.v71-loot__take-all:hover { filter: brightness(1.15); }

.v71-loot[hidden] { display: none; }

/* ---- Account / cloud-save modal ---------------------------------------- */

/* The account modal opens from the sidebar; it no longer adds a floating
   username/login button over the game view. */
.v76-auth {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(900px 420px at 50% 30%, rgba(240, 199, 94, 0.07), transparent 70%), rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(3px);
  animation: v76-auth-fade 0.22s ease-out;
}

@keyframes v76-auth-fade { from { opacity: 0; } to { opacity: 1; } }

.v76-auth[hidden] { display: none; }

.v76-auth__card {
  position: relative;
  width: min(380px, 100%);
  display: grid;
  gap: 12px;
  padding: 26px 24px 20px;
  border: 1px solid rgba(214, 190, 132, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, #2c2218 0%, #1d1712 60%, #171210 100%);
  box-shadow: inset 0 1px 0 rgba(255, 235, 185, 0.09), 0 26px 60px rgba(0, 0, 0, 0.7);
  color: #e8dbb8;
  animation: v76-auth-pop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes v76-auth-pop { from { transform: translateY(14px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

.v76-auth__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(214, 190, 132, 0.2);
  border-radius: 7px;
  background: rgba(240, 199, 94, 0.06);
  color: #cbbc98;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s;
}
.v76-auth__close:hover { background: rgba(240, 199, 94, 0.14); color: #f5ecd2; }

.v76-auth__brand { text-align: center; display: grid; gap: 6px; justify-items: center; padding-bottom: 2px; }
.v76-auth__brand strong {
  font-size: 20px;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff3d0 25%, #ffd76b 60%, #c89035);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.v76-auth__sub { font-size: 12px; color: #b9a988; margin: 0; max-width: 300px; }

.v76-auth__login-view,
.v76-auth__account-view {
  display: grid;
  gap: 12px;
}

.v76-auth__login-view[hidden],
.v76-auth__account-view[hidden] { display: none; }

.v76-auth__account-details {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(214, 190, 132, 0.22);
  border-radius: 10px;
  background: rgba(12, 9, 7, 0.46);
}

.v76-auth__account-details > div {
  display: grid;
  grid-template-columns: minmax(112px, 0.9fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 14px;
  min-height: 43px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(214, 190, 132, 0.12);
}

.v76-auth__account-details > div:last-child { border-bottom: 0; }

.v76-auth__account-details dt,
.v76-auth__account-details dd { margin: 0; }

.v76-auth__account-details dt {
  color: #a99a7d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.v76-auth__account-details dd {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #efe1bc;
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.v76-auth__account-details dd.is-active { color: #b9e6a1; }

.v76-auth__account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.v76-auth__account-actions button {
  min-height: 42px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 9px;
  color: #f5ecd2;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.12s, transform 0.1s;
}

#auth-wallet-connect {
  background: linear-gradient(180deg, #7257c7, #3d2c7f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#auth-logout { background: linear-gradient(180deg, #7c3328, #4b1d16); }

.v76-auth__account-actions button:hover { filter: brightness(1.12); }
.v76-auth__account-actions button:active { transform: translateY(1px); }

.v76-auth__field {
  display: grid;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b9a988;
}

.v76-auth__field input {
  padding: 11px 12px;
  border: 1px solid rgba(214, 190, 132, 0.2);
  border-radius: 8px;
  background: #14100c;
  color: #f0e2bd;
  font-size: 14px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.v76-auth__field input:focus {
  outline: none;
  border-color: rgba(240, 199, 94, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 199, 94, 0.12);
}

.v76-auth__status { min-height: 16px; font-size: 12.5px; color: #f2a894; text-align: center; }
.v76-auth__status.is-good { color: #b9e6a1; }

.v76-auth__actions { display: flex; gap: 10px; }

.v76-auth__actions button {
  flex: 1;
  padding: 12px 0;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  color: #f5ecd2;
  transition: filter 0.12s, transform 0.1s;
}
.v76-auth__actions button:active { transform: translateY(1px); }
.v76-auth__actions button:disabled { cursor:wait; opacity:.58; filter:saturate(.55); }

#auth-login.v76-auth__primary {
  background: linear-gradient(180deg, #f7d071, #cf9c33);
  color: #241a06;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 14px rgba(240, 199, 94, 0.2);
}
#auth-register { background: rgba(240, 199, 94, 0.07); border: 1px solid rgba(214, 190, 132, 0.3); }
.v76-auth__actions button:hover { filter: brightness(1.1); }

/* V101: deliberate new-player flow. It keeps the restrained leather/brass
   language of the HUD while giving each decision enough room to breathe. */
.v76-auth__card { width: min(520px, 100%); max-height: calc(100vh - 28px); overflow: auto; }
.v76-auth__view { display: grid; gap: 12px; }
.v76-auth__view[hidden] { display: none; }
.v101-auth-paths { display: grid; gap: 9px; }
.v101-auth-path {
  display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center;
  width: 100%; padding: 13px 14px; border: 1px solid rgba(214,190,132,.25); border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,236,185,.055), rgba(0,0,0,.12)); color: #e9ddbd;
  text-align: left; cursor: pointer; transition: border-color .14s, background .14s, transform .1s;
}
.v101-auth-path:hover { border-color: rgba(240,199,94,.58); background-color: rgba(240,199,94,.055); }
.v101-auth-path:active { transform: translateY(1px); }
.v101-auth-path--primary { border-color: rgba(240,199,94,.48); box-shadow: inset 0 1px rgba(255,242,198,.08); }
.v101-auth-path__icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#17110c; border:1px solid rgba(240,199,94,.3); color:#edc55f; font-size:18px; }
.v101-auth-path strong, .v101-auth-path small { display:block; }
.v101-auth-path strong { margin-bottom:3px; color:#f4e7c5; font: 700 15px/1.2 Georgia,serif; }
.v101-auth-path small { color:#aa9a7d; font-size:11.5px; line-height:1.35; }
.v101-auth-note { padding:9px 11px; border-left:2px solid #8d763e; background:rgba(0,0,0,.17); color:#aa9c80; font-size:11.5px; line-height:1.45; }
.v101-auth-note strong { color:#d9c99f; }
.v101-auth-back { justify-self:start; padding:2px 0; border:0; background:none; color:#ad9c7b; font-size:11.5px; cursor:pointer; }
.v101-auth-back:hover { color:#f0d993; }
.v101-auth-step { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; padding:9px 11px; border:1px solid rgba(214,190,132,.16); background:rgba(0,0,0,.14); }
.v101-auth-step > span { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#b98a2f; color:#1d1407; font-weight:900; }
.v101-auth-step strong, .v101-auth-step small { display:block; }
.v101-auth-step strong { color:#f1dfb2; font:700 14px/1.2 Georgia,serif; }
.v101-auth-step small { margin-top:2px; color:#9f9074; font-size:11px; }
.v101-name-preview { margin-top:-5px; color:#9e8f73; font-size:11.5px; }
.v101-name-preview strong { color:#e5cd8f; }
.v101-auth-rules { display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; margin:0; padding:0; list-style:none; color:#9c8b70; font-size:11px; }
.v101-auth-rules li::before { content:"○"; display:inline-block; width:16px; color:#786b57; }
.v101-auth-rules li.is-valid { color:#b7d99d; }
.v101-auth-rules li.is-valid::before { content:"✓"; color:#8fc66d; }
.v101-auth-rules li.is-invalid { color:#e4a08c; }
.v101-appearance { gap:10px; }
.v101-character-preview { position:relative; height:220px; overflow:hidden; border:1px solid rgba(214,190,132,.28); border-radius:10px; background:radial-gradient(circle at 50% 35%,#263630 0%,#111b18 60%,#0b100f 100%); box-shadow:inset 0 0 34px rgba(0,0,0,.42); }
.v101-character-preview canvas { display:block; width:100%; height:100%; }
.v101-character-preview > strong { position:absolute; z-index:2; left:50%; bottom:9px; transform:translateX(-50%); min-width:80px; padding:3px 9px; border-radius:10px; background:rgba(8,7,5,.58); color:#f4df9f; font-size:11.5px; text-align:center; text-shadow:1px 1px #000; pointer-events:none; }
.v101-appearance-options { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; }
.v101-appearance-options fieldset { min-width:0; margin:0; padding:8px; border:1px solid rgba(214,190,132,.17); border-radius:7px; }
.v101-appearance-options legend { padding:0 5px; color:#b7a681; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.v101-swatches { display:flex; flex-wrap:wrap; gap:6px; }
.v101-swatch { width:25px; height:25px; padding:0; border:2px solid #17110c; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px rgba(214,190,132,.2); cursor:pointer; }
.v101-swatch:hover { filter:brightness(1.15); }
.v101-swatch.is-selected { box-shadow:0 0 0 2px #e5bd58,0 0 0 4px #17110c; }
.v101-swatch:focus-visible { outline:2px solid #fff0b4; outline-offset:3px; }

.v101-intro { position:fixed; inset:0; z-index:69; display:grid; place-items:center; padding:18px; background:rgba(7,6,4,.7); backdrop-filter:blur(3px); }
.v101-intro[hidden] { display:none; }
.v101-intro__card { position:relative; width:min(720px,100%); padding:28px; border:1px solid #806936; border-radius:12px; color:#eaddbd; background:radial-gradient(circle at 50% 0,rgba(232,192,96,.1),transparent 36%),linear-gradient(180deg,#302419,#19130f); box-shadow:0 24px 70px #000,inset 0 0 0 2px rgba(255,229,166,.035); }
.v101-intro__crest { position:absolute; top:-25px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:49px; height:49px; rotate:45deg; border:2px solid #967939; background:#17120e; box-shadow:0 5px 18px #000; }
.v101-intro__crest span { rotate:-45deg; color:#e8c35f; font:700 20px Georgia,serif; }
.v101-intro header { text-align:center; }
.v101-intro header small { color:#b18f41; font-size:10px; font-weight:900; letter-spacing:.2em; }
.v101-intro h2 { margin:6px 0 5px; color:#f2d98d; font:700 25px/1.1 Georgia,serif; }
.v101-intro header p { max-width:530px; margin:0 auto; color:#b6a788; font-size:12px; line-height:1.5; }
.v101-intro__controls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:21px 0 18px; }
.v101-intro__controls article { display:grid; gap:5px; align-content:start; padding:13px; border:1px solid rgba(214,190,132,.18); background:rgba(0,0,0,.16); }
.v101-intro__controls kbd { justify-self:start; padding:3px 6px; border:1px solid #796640; border-bottom-width:2px; border-radius:4px; background:#17120e; color:#e5c876; font:700 10px system-ui,sans-serif; }
.v101-intro__controls strong { color:#ead7a1; font-size:12.5px; }.v101-intro__controls span { color:#9e9077; font-size:11px; line-height:1.4; }
.v101-intro__route { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-top:1px solid rgba(214,190,132,.16); border-bottom:1px solid rgba(214,190,132,.16); color:#c6b58e; font-size:10.5px; }
.v101-intro__route span { display:flex; align-items:center; gap:5px; white-space:nowrap; }.v101-intro__route b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#745d29; color:#f8dfa0; }.v101-intro__route i { width:18px; height:1px; background:#5f5034; }
.v101-intro footer { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.v101-intro footer button { min-height:39px; padding:0 16px; border:1px solid rgba(214,190,132,.28); border-radius:7px; background:rgba(255,255,255,.035); color:#c7b998; font-weight:800; cursor:pointer; }
#new-player-begin { border-color:#8f7131; background:linear-gradient(180deg,#e8c564,#b9872d); color:#211705; }
.v101-intro footer button:hover { filter:brightness(1.1); }

@media (max-width: 620px) {
  .v76-auth__card { padding:21px 17px 17px; }
  .v101-appearance-options { grid-template-columns:1fr; }
  .v101-intro__card { max-height:calc(100vh - 24px); overflow:auto; padding:25px 17px 18px; }
  .v101-intro__controls { grid-template-columns:1fr; }
  .v101-intro__route { display:grid; grid-template-columns:1fr 1fr; }
  .v101-intro__route i { display:none; }
}


/* ---- V78.17: OSRS-style two-screen player trade ----------------------- */
.v78-trade {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(700px, calc(100vw - 28px));
  max-height: min(82vh, 680px);
  transform: translate(-50%, -50%);
  z-index: 72;
  border: 3px solid #14100a;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 225, 155, 0.10), transparent 26%),
    linear-gradient(180deg, #4c3821 0%, #2f2418 55%, #1d160f 100%);
  box-shadow: 0 18px 38px rgba(0,0,0,.62), inset 0 0 0 2px rgba(225,178,95,.22);
  color: #ead7a0;
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}
.v78-trade[hidden] { display: none; }
.v78-trade__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: linear-gradient(180deg, #5a3e20, #2a1a0d);
  border-bottom: 2px solid #120d07;
}
.v78-trade__header strong {
  color: #ffd66c;
  font-size: 18px;
  text-shadow: 2px 2px #090604;
}
.v78-trade__header button {
  width: 32px;
  height: 28px;
  border: 2px solid #201409;
  border-radius: 5px;
  background: linear-gradient(180deg, #8b5926, #4c2b12);
  color: #ffd99a;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.v78-trade__notice {
  padding: 7px 12px;
  color: #f0ddab;
  background: rgba(0,0,0,.22);
  border-bottom: 1px solid rgba(255,210,125,.16);
  text-align: center;
}
.v78-trade__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}
.v78-trade__side h3,
.v78-trade__inventory-wrap h3,
.v78-trade__confirm-list h3 {
  margin: 0 0 6px;
  color: #ffd66c;
  font-size: 14px;
  text-shadow: 1px 1px #090604;
}
.v78-trade__offer {
  min-height: 154px;
  display: grid;
  grid-template-columns: repeat(4, 52px);
  align-content: start;
  gap: 6px;
  padding: 9px;
  border: 2px solid #1b1208;
  border-radius: 5px;
  background: rgba(18, 12, 7, .62);
  box-shadow: inset 0 0 18px rgba(0,0,0,.35);
}
.v78-trade__empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: #a99066;
  font-size: 13px;
}
.v78-trade__item,
.v78-trade__inv-slot {
  position: relative;
  width: 52px;
  height: 46px;
  border: 1px solid rgba(210,160,82,.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(83,55,27,.62), rgba(31,20,11,.82));
  color: #fff2bf;
  cursor: pointer;
}
.v78-trade__item:hover,
.v78-trade__inv-slot:hover {
  filter: brightness(1.18);
  border-color: #ffd66c;
}
.v78-trade__item img {
  max-width: 34px;
  max-height: 34px;
  image-rendering: auto;
}
.v78-trade__item em {
  display: none;
}
.v78-trade__qty {
  position: absolute;
  right: 3px;
  bottom: 2px;
  color: #fff066;
  font: 900 11px system-ui, sans-serif;
  text-shadow: 1px 1px 0 #000;
}
.v78-trade__inventory-wrap {
  padding: 0 12px 12px;
}
.v78-trade__inventory {
  display: grid;
  grid-template-columns: repeat(7, 48px);
  gap: 5px;
  justify-content: center;
  padding: 9px;
  border: 2px solid #1b1208;
  border-radius: 5px;
  background: rgba(14,10,7,.58);
}
.v78-trade__inventory .v78-trade__item,
.v78-trade__inv-slot {
  width: 48px;
  height: 42px;
}
.v78-trade__inv-slot.is-empty {
  cursor: default;
  opacity: .36;
}
.v78-trade__confirm-list {
  margin: 0 12px 12px;
  padding: 12px;
  border: 2px solid #1b1208;
  border-radius: 5px;
  background: rgba(14,10,7,.64);
}
.v78-trade__confirm-list[hidden] { display: none; }
.v78-trade__confirm-list section {
  display: inline-block;
  width: calc(50% - 8px);
  vertical-align: top;
}
.v78-trade__confirm-list ul,
.v78-trade__confirm-list p {
  margin: 0 0 10px;
  padding-left: 18px;
  color: #f4e7bf;
  font-size: 13px;
}
.v78-trade__warning {
  display: block;
  margin-top: 6px;
  color: #ff9a6f;
  text-align: center;
  text-shadow: 1px 1px #000;
}
.v78-trade__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-top: 2px solid #140e08;
  background: rgba(0,0,0,.20);
}
.v78-trade__footer button {
  min-width: 92px;
  padding: 8px 12px;
  border: 2px solid #181008;
  border-radius: 5px;
  color: #f9e9b8;
  font-weight: 900;
  cursor: pointer;
}
.v78-trade__accept,
.v78-trade__confirm {
  background: linear-gradient(180deg, #32753a, #17451f);
}
.v78-trade__decline {
  background: linear-gradient(180deg, #8a3430, #4a1614);
}
.v78-trade__footer button[hidden] { display: none; }
.v78-trade__status {
  min-width: 180px;
  color: #ceb98a;
  font-size: 12px;
}

.v78-hotkeys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid rgba(214, 171, 86, .35);
  border-radius: 5px;
  background: rgba(0,0,0,.24);
  color: #e7d09a;
  font-size: 12px;
}
.v78-hotkeys strong {
  grid-column: 1 / -1;
  color: #ffd66c;
}


/* ---- V78.20: premium dialogue portrait polish ------------------------- */
.dialogue-box {
  bottom: 84px;
  width: min(930px, calc(100vw - 360px));
}

.dialogue-frame {
  grid-template-columns: 142px minmax(0, 1fr) 142px;
  min-height: 158px;
  gap: 18px;
  padding: 14px 18px;
  border: 4px solid #3a3d38;
  border-radius: 7px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.45), transparent 36%),
    linear-gradient(180deg, rgba(237,233,218,.98), rgba(205,200,186,.98));
  box-shadow:
    0 22px 70px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(255,255,255,.62),
    inset 0 0 0 6px rgba(92,94,84,.18);
}

.dialogue-portrait {
  grid-column: 1;
  grid-row: 1;
  box-sizing: border-box;
  width: 132px;
  height: 132px;
  padding: 8px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #162124, #070909);
  border: 3px solid #1c211f;
  box-shadow:
    0 12px 28px rgba(0,0,0,.32),
    inset 0 0 0 2px rgba(219,183,96,.70),
    inset 0 0 0 5px rgba(255,244,183,.12);
  overflow: hidden;
}

.dialogue-portrait.is-player {
  grid-column: 3;
}

.dialogue-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 38%, rgba(72, 101, 93, .72), rgba(8, 13, 12, .96) 76%);
}

.dialogue-content {
  grid-column: 2;
  grid-row: 1;
}

.dialogue-portrait.is-speaking {
  filter: drop-shadow(0 0 13px rgba(255,210,95,.24));
}

.dialogue-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 34%, #f7f2df, #c9c0a5 74%);
  image-rendering: auto;
  filter: saturate(1.06) contrast(1.04);
}

.dialogue-content h2 {
  font-size: 1.08rem;
  margin-bottom: 9px;
}

.dialogue-content p {
  font-size: 1.08rem;
  line-height: 1.46;
}

@media (max-width: 1050px) {
  .dialogue-frame {
    grid-template-columns: 104px minmax(0, 1fr) 104px;
  }
  .dialogue-portrait {
    width: 96px;
    height: 96px;
    padding: 6px;
  }
}


/* V79 Collection Log -------------------------------------------------- */
.v79-open-collection-log {
  margin-top: 12px;
  align-self: stretch;
  border: 1px solid #5b4421;
  border-radius: 8px;
  background: linear-gradient(180deg, #4b3620 0%, #2d1f11 100%);
  color: #e7c86e;
  font: 700 16px/1.1 Georgia, serif;
  padding: 10px 12px;
  cursor: pointer;
}
.v79-clog { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.28); z-index: 61; }
.v79-clog__panel { width: min(1040px, calc(100vw - 40px)); height: min(640px, calc(100vh - 60px)); background: linear-gradient(180deg, #403729 0%, #2d261d 100%); border: 3px solid #15110b; box-shadow: 0 18px 44px rgba(0,0,0,.55); display: flex; flex-direction: column; color: #e6c46b; }
.v79-clog__header { display:flex; align-items:center; gap:16px; padding: 12px 16px; background: linear-gradient(180deg, #3d3121 0%, #241b12 100%); border-bottom: 2px solid #13100b; }
.v79-clog__header strong { flex:1; text-align:center; font: 700 18px/1.1 Georgia, serif; letter-spacing:.02em; }
.v79-clog__header button { border: 2px solid #1b130b; background: #8f6b2b; color: #1d1304; border-radius: 4px; width: 38px; height: 38px; font-size: 28px; cursor:pointer; }
.v79-clog__search { min-width: 170px; color:#cdb68b; font:600 14px/1.1 system-ui,sans-serif; }
.v79-clog__tabs { display:flex; gap:4px; padding: 10px 16px 0; }
.v79-clog__tabs button { border:1px solid #45331b; background:#342b21; color:#d2a249; padding: 10px 16px; font:700 14px/1 Georgia,serif; cursor:pointer; }
.v79-clog__tabs button.is-active { background:#22201e; color:#e8c56a; }
.v79-clog__tabs button:disabled { opacity:.55; cursor:default; }
.v79-clog__body { flex:1; display:grid; grid-template-columns: 320px minmax(0,1fr); min-height:0; }
.v79-clog__boss-list { overflow:auto; border-right: 2px solid #18130d; background: rgba(0,0,0,.14); padding: 8px 0; }
.v79-clog__boss { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding: 11px 16px; border:0; background: transparent; color:#d7a34c; cursor:pointer; text-align:left; }
.v79-clog__boss strong { font:700 16px/1.2 Georgia,serif; }
.v79-clog__boss span { font:600 12px/1.2 system-ui,sans-serif; color:#bda57f; }
.v79-clog__boss.is-active, .v79-clog__boss:hover { background: rgba(255,214,120,.08); color:#f1c765; }
.v79-clog__detail { padding: 16px; overflow:auto; }
.v79-clog__summary { display:flex; gap:28px; align-items:flex-end; flex-wrap:wrap; margin-bottom: 18px; border-bottom: 1px solid rgba(244,220,165,.15); padding-bottom: 12px; }
.v79-clog__summary h3 { margin:0; min-width: 240px; font:700 28px/1.05 Georgia,serif; color:#f0c96b; }
.v79-clog__summary p { margin:0; color:#d8c29a; font:600 15px/1.2 system-ui,sans-serif; }
.v79-clog__summary strong { color:#f5de9d; }
.v79-clog__drops { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.v79-clog__drop { min-height: 82px; border: 1px solid #4b3820; background: linear-gradient(180deg, rgba(76,60,40,.5) 0%, rgba(42,33,23,.75) 100%); display:grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; align-items:center; padding: 12px; box-shadow: inset 0 0 0 1px rgba(255,228,164,.06); }
.v79-clog__drop.is-missing { filter: grayscale(1); opacity:.72; }
.v79-clog__drop-icon { width: 52px; height: 52px; display:grid; place-items:center; border:1px solid rgba(245,214,152,.15); background: rgba(0,0,0,.18); }
.v79-clog__drop-icon img { max-width: 44px; max-height: 44px; image-rendering: auto; }
.v79-clog__drop-meta { min-width:0; display:flex; flex-direction:column; gap:4px; }
.v79-clog__drop-meta strong { color:#eed08a; font:700 16px/1.2 Georgia,serif; }
.v79-clog__drop-meta span { color:#c8b08a; font:600 12px/1.2 system-ui,sans-serif; }
.v79-clog__drop em { font:700 20px/1 Georgia,serif; color:#efe1b0; font-style:normal; }

.v79-clog[hidden] { display: none !important; }


/* V78.24 shell layout refresh --------------------------------------- */
.osrs-hud.osrs-hud--v26 {
  top: 14px !important;
  right: 18px !important;
  width: 330px !important;
  gap: 0 !important;
}
.v26-minimap-shell {
  width: 236px !important;
  height: 236px !important;
  margin: 0 auto 10px !important;
}
.v26-minimap-shell .minimap {
  inset: 26px !important;
  width: 184px !important;
  height: 184px !important;
}
.v26-minimap-frame { width: 236px !important; height: 236px !important; }
.v26-side-tabs.v26-side-tabs--top,
.v26-side-tabs.v26-side-tabs--bottom {
  width: 330px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 5px !important;
  padding: 4px 6px !important;
  margin: 0 !important;
  height: auto !important;
}
.v26-side-tabs.v26-side-tabs--top { margin-bottom: 0 !important; }
.v26-side-tabs.v26-side-tabs--bottom { margin-top: 0 !important; }
.v26-side-tabs.v26-side-tabs--top button,
.v26-side-tabs.v26-side-tabs--bottom button {
  height: 41px !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
.v26-side-tabs.v26-side-tabs--top button img,
.v26-side-tabs.v26-side-tabs--bottom button img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
}
.v26-panel-shell {
  width: 330px !important;
  min-height: 468px !important;
  padding: 10px !important;
}
.v26-tab-panel {
  width: auto !important;
  min-height: 448px !important;
  height: 448px !important;
  overflow: hidden auto !important;
}
.v26-tab-panel::before { height: 34px !important; line-height: 34px !important; }
.v80-clan-panel { display: flex; flex-direction: column; gap: 12px; height: 100%; padding-top: 36px; }
.v80-clan-card, .v80-social-card, .v80-social-list, .v80-magic-panel {
  border: 1px solid rgba(236, 197, 106, .18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(66,46,24,.35) 0%, rgba(27,18,10,.65) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,237,190,.04);
}
.v80-clan-card, .v80-social-card { padding: 12px 14px; display:flex; flex-direction:column; gap:6px; }
.v80-clan-card strong, .v80-social-card strong { color:#f0d086; font:700 17px/1.15 Georgia, serif; }
.v80-clan-card span, .v80-social-card span, .v80-social-row span, .v80-magic-note { color:#d6c4a2; font:600 12px/1.35 system-ui,sans-serif; }
.v80-journal-card { flex: 1; min-height: 0; border: 1px solid rgba(236, 197, 106, .18); border-radius: 10px; background: linear-gradient(180deg, rgba(66,46,24,.2) 0%, rgba(27,18,10,.48) 100%); padding: 10px 12px 12px; display:flex; flex-direction:column; }
.v80-journal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:#e9c971; }
.v80-journal-head strong { font:700 18px/1.15 Georgia,serif; }
.v80-journal-head small { color:#bfa26d; font:700 12px/1 system-ui,sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.v80-quest-overlay { position: static !important; inset: auto !important; height: 100%; display:flex; flex-direction:column; padding: 0 !important; background:none !important; }
.v26-quest-overlay strong#quest-summary { font-size: 22px !important; margin-bottom: 8px !important; }
.v26-quest-overlay span#quest-objective { margin-bottom: 12px !important; line-height: 1.35 !important; }
.v26-quest-overlay ul { flex:1; min-height: 0; margin:0 0 12px !important; padding-right: 4px !important; }
.v79-open-collection-log { width: 100%; margin-top: auto !important; padding: 12px 14px !important; font-size: 18px !important; }
.v80-social-panel { padding-top: 36px; display:flex; flex-direction:column; gap:12px; }
.v80-social-list { padding: 10px 12px; display:grid; gap:10px; }
.v80-social-row { display:grid; gap:4px; }
.v80-social-row strong { color:#efcd83; font:700 14px/1.15 Georgia,serif; }
.v80-magic-panel { margin-top: 36px; padding: 12px; display:flex; flex-direction:column; gap: 12px; }
.v80-magic-header { display:flex; justify-content:space-between; align-items:flex-end; }
.v80-magic-header strong { color:#efcd83; font:700 20px/1.1 Georgia,serif; }
.v80-magic-header span { color:#c7ad7c; font:700 12px/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.04em; }
.v80-magic-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.v80-spell { min-height: 88px; display:grid; grid-template-columns: 36px 1fr; grid-template-areas: "icon title" "icon sub"; align-items:center; column-gap:10px; border:1px solid #5c4524; border-radius:10px; background: linear-gradient(180deg, #48331c 0%, #2a1e11 100%); color:#efd698; padding: 10px; cursor:pointer; text-align:left; }
.v80-spell img { grid-area: icon; width: 30px; height: 30px; }
.v80-spell strong { grid-area:title; font:700 15px/1.1 Georgia,serif; }
.v80-spell span { grid-area:sub; font:600 12px/1.2 system-ui,sans-serif; color:#ccb58d; }
.v80-spell:hover { filter: brightness(1.08); }
@media (max-height: 920px) {
  .v26-panel-shell { min-height: 446px !important; }
  .v26-tab-panel { min-height: 426px !important; height: 426px !important; }
}


/* V78.25 OSRS-style chat line colours -------------------------------- */
.log-list li.v43-chat__killcount,
.log-list li.v43-chat__duration {
  color: #24180d !important;
}

.log-list li.v43-chat__valuable,
.log-list li.v43-chat__untradeable,
.log-list li.v43-chat__danger {
  color: #d93737 !important;
  font-weight: 700;
}

.log-list li.v43-chat__special {
  color: #b23fd6 !important;
  font-weight: 700;
}

.log-list li.v43-chat__success {
  color: #2fbf2f !important;
  font-weight: 700;
}

.log-list li.v43-chat__action {
  color: #244fdb !important;
}

.log-list .v43-chat__num {
  color: #d93737;
  font-weight: 900;
}


/* V78.26 chat readability + anti-spam polish -------------------------- */
.osrs-chatbox,
.osrs-chatbox.v26-chatbox,
.osrs-chatbox.v43-chat {
  background: linear-gradient(180deg, rgba(202, 194, 166, .96), rgba(174, 165, 137, .96)) !important;
  border-color: rgba(88, 74, 48, .72) !important;
}

.osrs-chatbox .v43-chat__scroll {
  background: rgba(231, 222, 190, .26) !important;
}

.osrs-chatbox .log-list {
  max-height: 118px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: rgba(92, 80, 55, .16) !important;
  padding: 6px 8px !important;
  gap: 2px !important;
}

.osrs-chatbox .log-list li,
.log-list li {
  color: #1f1710 !important;
  font-size: .78rem !important;
  line-height: 1.24 !important;
  padding: 1px 0 !important;
  border-bottom: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.log-list li.v43-chat__killcount,
.log-list li.v43-chat__duration,
.log-list li.v43-chat__loot {
  color: #20160d !important;
  font-weight: 600;
}

.log-list li.v43-chat__valuable,
.log-list li.v43-chat__untradeable,
.log-list li.v43-chat__danger {
  color: #b32929 !important;
  font-weight: 800;
}

.log-list li.v43-chat__special {
  color: #8f31af !important;
  font-weight: 800;
}

.log-list li.v43-chat__success {
  color: #247b2a !important;
  font-weight: 800;
}

.log-list li.v43-chat__action {
  color: #1f3f9c !important;
  font-weight: 650;
}

.log-list .v43-chat__num {
  color: #c62828 !important;
  font-weight: 950;
}

.chat-input-shell.v54-chat-input-shell {
  background: rgba(229, 219, 188, .86) !important;
  color: #1f1710 !important;
}

.v54-chat-input {
  color: #1f1710 !important;
}

.v54-chat-input::placeholder {
  color: rgba(31, 23, 16, .55) !important;
}


/* V78.28 OSRS-style Prayer Book + Quick Prayers ----------------------- */
.v39-orb {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
}

.v39-orb--prayer {
  cursor: pointer;
  position: relative;
}

.v39-orb--prayer.has-quick-prayers::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(11, 9, 5, .95);
  border-radius: 50%;
  background: #f0d46f;
  box-shadow: 0 0 7px rgba(240, 212, 111, .75);
}

.v39-orb--prayer.is-prayer-active .v39-orb__disc,
.v39-orb--prayer.is-quick-active .v39-orb__disc {
  border-color: #86d9ff;
  box-shadow:
    0 0 13px rgba(101, 205, 255, .78),
    inset 0 0 10px rgba(143, 224, 247, .28);
  filter: brightness(1.12);
}

.v81-prayer-panel {
  padding: 12px !important;
  gap: 9px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(123, 93, 42, .18), transparent 44%),
    linear-gradient(180deg, rgba(34, 25, 15, .42), rgba(12, 9, 6, .62));
}

.v81-prayer-header {
  padding: 0 2px;
}

.v81-prayer-header strong {
  color: #f0d177;
  font: 900 18px/1.1 Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px #080604;
}

.v81-prayer-header span {
  color: #b9dff7 !important;
  font: 800 12px/1.1 system-ui, sans-serif;
}

.v81-prayer-bar {
  height: 12px !important;
  border: 2px solid #161009 !important;
  background: linear-gradient(180deg, #18110a, #0b0805) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.75);
}

.v81-prayer-bar i {
  background: linear-gradient(90deg, #1d87d0, #74d6ff 58%, #d9f6ff) !important;
  box-shadow: 0 0 9px rgba(97, 201, 255, .55);
}

.v81-prayer-quick {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(231, 190, 105, .24);
  border-radius: 8px;
  background: rgba(0,0,0,.20);
}

.v81-prayer-quick button {
  min-height: 30px;
  border: 1px solid #5f4828;
  border-radius: 6px;
  background: linear-gradient(180deg, #5b3e1d, #291a0d);
  color: #f2d889;
  font: 900 11px/1.05 system-ui, sans-serif;
  cursor: pointer;
}

.v81-prayer-quick button.is-configuring {
  border-color: #8fd9ff;
  color: #dff7ff;
  box-shadow: 0 0 8px rgba(106, 207, 255, .32);
}

.v81-prayer-quick span {
  min-width: 0;
  color: #dbc89c;
  font: 700 11px/1.22 system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v81-prayer-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 8px;
  border: 1px solid rgba(222, 181, 92, .22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(18, 13, 8, .62), rgba(28, 20, 12, .46));
  box-shadow: inset 0 0 18px rgba(0,0,0,.28);
}

.v81-prayer-cell {
  position: relative;
  min-height: 51px;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center;
  padding: 5px !important;
  border: 1px solid rgba(119, 91, 45, .78) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,230,150,.10), transparent 54%),
    linear-gradient(180deg, #3c2c17, #1b1209) !important;
  cursor: pointer;
  overflow: hidden;
}

.v81-prayer-cell img {
  grid-row: auto !important;
  width: 36px !important;
  height: 36px !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.75));
  transition: transform .12s ease, filter .12s ease;
}

.v81-prayer-cell span,
.v81-prayer-cell em {
  display: none !important;
}

.v81-prayer-cell:hover {
  filter: brightness(1.18);
}

.v81-prayer-cell:hover img {
  transform: translateY(-1px) scale(1.04);
}

.v81-prayer-cell.is-active {
  border-color: #83d9ff !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(141, 222, 255, .28), transparent 55%),
    linear-gradient(180deg, #1e526c, #102a38) !important;
  box-shadow:
    0 0 10px rgba(98, 206, 255, .6),
    inset 0 0 10px rgba(213, 248, 255, .18) !important;
}

.v81-prayer-cell.is-quick::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 10px;
  height: 10px;
  border: 1px solid #241706;
  border-radius: 50%;
  background: #f0d46f;
  box-shadow: 0 0 7px rgba(240, 212, 111, .7);
}

.v81-prayer-cell.is-configurable {
  outline: 1px dashed rgba(240, 212, 111, .34);
  outline-offset: -4px;
}

.v81-prayer-cell.is-configurable.is-quick {
  outline-color: rgba(130, 221, 255, .84);
}

.v81-prayer-cell.is-locked {
  opacity: .42 !important;
  filter: grayscale(.82) saturate(.42) brightness(.78);
}

.v81-prayer-cell.is-locked::after {
  content: attr(data-level);
  position: absolute;
  inset: auto 2px 2px;
  color: #d7a1a1;
  font: 900 8px/1 system-ui, sans-serif;
  text-shadow: 1px 1px #000;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.v81-prayer-info {
  min-height: 66px !important;
  border-color: rgba(225, 185, 95, .25) !important;
  background: rgba(0,0,0,.28) !important;
  color: #decca1 !important;
  font-size: 11.5px !important;
}


/* V78.29 OSRS-style inventory interactions ---------------------------- */
.v82-inventory-grid {
  margin-top: 8px;
}

.v82-inventory-use-hint {
  margin: 38px 6px 6px;
  padding: 8px 10px;
  border: 1px solid rgba(238, 201, 104, .28);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(72, 49, 23, .74), rgba(28, 19, 10, .82));
  color: #ecd18a;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 173, .05);
}

.v82-inventory-use-hint[hidden] {
  display: none !important;
}

.v82-inventory-use-hint strong {
  display: block;
  font: 900 13px/1.15 Georgia, serif;
  color: #f3d979;
}

.v82-inventory-use-hint span {
  display: block;
  margin-top: 2px;
  font: 700 11px/1.25 system-ui, sans-serif;
  color: #d7c49a;
}

.inventory-slot.is-selected {
  border-color: #f0d46f !important;
  box-shadow:
    0 0 0 2px rgba(240, 212, 111, .24),
    0 0 14px rgba(240, 212, 111, .20),
    inset 0 1px rgba(255,255,255,.08) !important;
}

.context-menu.is-item-menu {
  min-width: 238px;
  border-radius: 8px;
  border-color: rgba(101, 82, 46, .95);
  background:
    linear-gradient(180deg, rgba(44, 37, 27, .98), rgba(20, 16, 11, .98));
  box-shadow:
    0 16px 36px rgba(0,0,0,.54),
    inset 0 0 0 1px rgba(236, 203, 126, .08);
  backdrop-filter: none;
}

.context-menu.is-item-menu .context-menu__title {
  color: #f0d16f;
  font: 900 12px/1.1 Georgia, serif;
  letter-spacing: .02em;
  text-transform: none;
  padding: 6px 8px 5px;
}

.context-menu__item-title {
  padding: 5px 8px 7px;
  color: #d8c39a;
  font: 800 11px/1.1 system-ui, sans-serif;
  border-bottom: 1px solid rgba(236, 203, 126, .12);
  margin-bottom: 4px;
}

.context-menu__item-title small {
  color: #f0d46f;
  font-weight: 900;
}

.context-menu.is-item-menu button {
  border-radius: 3px;
  padding: 6px 8px;
  color: #e8d7ad;
  font: 850 13px/1.08 Georgia, "Times New Roman", serif;
}

.context-menu.is-item-menu button:hover {
  background: rgba(238, 201, 104, .13);
  color: #ffe9a8;
}

.context-menu.is-item-menu button[data-tone="primary"] {
  color: #f4d271;
}

.context-menu.is-item-menu button[data-tone="use"] {
  color: #f0ead7;
}

.context-menu.is-item-menu button[data-tone="deposit"] {
  color: #88d686;
}

.context-menu.is-item-menu button[data-tone="drop"],
.context-menu.is-item-menu button[data-tone="warning"] {
  color: #df8a78;
}

.context-menu.is-item-menu button[data-tone="examine"] {
  color: #a7c7f2;
}

.context-menu__hint {
  margin-top: 4px;
  padding: 5px 8px 3px;
  border-top: 1px solid rgba(236, 203, 126, .10);
  color: rgba(222, 204, 163, .64);
  font: 700 10px/1.2 system-ui, sans-serif;
}


/* V78.31 OSRS-style Magic Spellbook ---------------------------------- */
.v83-magic-panel {
  margin-top: 36px !important;
  padding: 12px !important;
  min-height: 390px;
  gap: 10px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(68, 88, 144, .18), transparent 46%),
    linear-gradient(180deg, rgba(50, 36, 72, .44), rgba(16, 12, 24, .72)) !important;
}

.v83-magic-header strong {
  color: #d9c3ff !important;
  text-shadow: 1px 1px #07040c;
}

.v83-magic-header span {
  color: #a9d8ff !important;
}

.v83-magic-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.v83-magic-tabs button {
  min-height: 30px;
  border: 1px solid rgba(182, 153, 236, .28);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(65, 45, 97, .92), rgba(27, 19, 44, .96));
  color: #d8c6ff;
  font: 900 11px/1 system-ui, sans-serif;
  cursor: pointer;
}

.v83-magic-tabs button.is-active {
  border-color: rgba(151, 210, 255, .68);
  color: #eaf6ff;
  box-shadow: 0 0 8px rgba(105, 185, 255, .26);
}

.v83-magic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 9px;
  border: 1px solid rgba(190, 161, 235, .22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(14, 11, 22, .68), rgba(26, 18, 36, .54));
  box-shadow: inset 0 0 18px rgba(0,0,0,.32);
}

.v83-spell {
  position: relative;
  min-height: 73px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 38px auto auto !important;
  place-items: center !important;
  row-gap: 2px;
  padding: 7px 4px 5px !important;
  border: 1px solid rgba(131, 105, 178, .72) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(143, 203, 255, .14), transparent 55%),
    linear-gradient(180deg, #34284d, #171122) !important;
  color: #eadfff !important;
  text-align: center !important;
  cursor: pointer;
}

.v83-spell img {
  width: 34px !important;
  height: 34px !important;
  filter:
    hue-rotate(18deg)
    drop-shadow(0 0 5px rgba(126, 198, 255, .38))
    drop-shadow(0 2px 2px rgba(0,0,0,.8));
}

.v83-spell strong {
  font: 900 10.5px/1.05 Georgia, serif !important;
  color: #efe7ff;
}

.v83-spell span {
  font: 750 9px/1.05 system-ui, sans-serif !important;
  color: #c4b6df !important;
}

.v83-spell em {
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #74d6ff;
  color: #0b1724;
  font: 1000 8px/1.2 system-ui, sans-serif;
  font-style: normal;
}

.v83-spell:hover {
  filter: brightness(1.14);
}

.v83-spell.is-selected {
  border-color: #9bd6ff !important;
  box-shadow:
    0 0 10px rgba(122, 202, 255, .44),
    inset 0 0 12px rgba(212, 240, 255, .12);
}

.v83-spell.is-autocast {
  border-color: #f0d46f !important;
  box-shadow:
    0 0 12px rgba(240, 212, 111, .45),
    inset 0 0 12px rgba(240, 212, 111, .12);
}

.v83-spell.is-locked {
  opacity: .43;
  filter: grayscale(.76) saturate(.42) brightness(.75);
}

.v83-spell.is-locked::after {
  content: attr(data-level);
  position: absolute;
  inset: auto 3px 3px;
  color: #e7aaa5;
  font: 1000 8px/1 system-ui, sans-serif;
  text-shadow: 1px 1px #000;
}

.v83-magic-info {
  min-height: 82px;
  padding: 9px 10px;
  border: 1px solid rgba(190, 161, 235, .22);
  border-radius: 9px;
  background: rgba(0,0,0,.26);
  color: #d8ccea !important;
  font: 700 11.5px/1.35 system-ui, sans-serif !important;
}

.v83-magic-info strong {
  color: #eadfff;
  font-family: Georgia, serif;
}

.v83-magic-info span {
  color: #bde7ff;
}

.v83-magic-info small {
  display: block;
  margin-top: 3px;
  color: #b7a7d4;
  font: 700 10.5px/1.25 system-ui, sans-serif;
}


/* V78.32 character summary + quest/profile polish --------------------- */
.v84-profile-panel {
  padding-top: 36px !important;
  gap: 10px !important;
}

.v84-profile-card {
  border: 1px solid rgba(236, 197, 106, .22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(236,197,106,.10), transparent 44%),
    linear-gradient(180deg, rgba(66,46,24,.34) 0%, rgba(23,16,9,.70) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,237,190,.05);
  padding: 10px 12px;
}

.v84-profile-card__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.v84-profile-card__title strong {
  color: #f0d086;
  font: 900 18px/1.1 Georgia, serif;
}

.v84-profile-card__title span {
  color: #c9b384;
  font: 800 11px/1.1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.v84-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.v84-profile-grid div {
  min-height: 46px;
  border: 1px solid rgba(236, 197, 106, .13);
  border-radius: 8px;
  background: rgba(0,0,0,.20);
  padding: 7px 8px;
}

.v84-profile-grid small {
  display: block;
  color: #bca77f;
  font: 800 10px/1.1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.v84-profile-grid strong {
  display: block;
  margin-top: 4px;
  color: #f2dc9d;
  font: 900 18px/1 Georgia, serif;
}

.v84-profile-card--bosses {
  min-height: 92px;
}

.v84-boss-list {
  display: grid;
  gap: 5px;
}

.v84-boss-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.18);
  color: #d8c7a2;
  font: 750 11px/1.15 system-ui, sans-serif;
}

.v84-boss-row strong {
  color: #f0d46f;
  font: 900 12px/1 system-ui, sans-serif;
}

.v84-boss-empty {
  color: #bca77f;
  font: 750 11px/1.25 system-ui, sans-serif;
  padding: 4px 2px;
}

.v84-journal-card {
  min-height: 0;
}

.v84-journal-card .v79-open-collection-log {
  min-height: 38px;
}


/* V78.32.2 boss chat + OSRS icon-only spell/prayer books -------------- */
.log-list li.v43-chat__killcount,
.log-list li.v43-chat__duration {
  color: #24180d !important;
  font-weight: 750 !important;
}

.log-list li.v43-chat__valuable,
.log-list li.v43-chat__untradeable,
.log-list li.v43-chat__danger {
  color: #cf2e2e !important;
  font-weight: 850 !important;
}

.log-list li.v43-chat__special {
  color: #982fbd !important;
  font-weight: 850 !important;
}

.log-list .v43-chat__num {
  color: #e23232 !important;
  font-weight: 1000 !important;
}

.v83-magic-panel {
  padding: 10px 12px 12px !important;
}

.v83-magic-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
  align-content: start !important;
  overflow: visible !important;
}

.v83-spell {
  min-height: 50px !important;
  height: 50px !important;
  grid-template-rows: 1fr !important;
  padding: 5px !important;
  border-radius: 8px !important;
}

.v83-spell img {
  width: 36px !important;
  height: 36px !important;
}

.v83-spell strong,
.v83-spell span {
  display: none !important;
}

.v83-spell.is-locked::after {
  content: "" !important;
  display: none !important;
}

.v83-spell em {
  right: 2px !important;
  top: 2px !important;
  padding: 1px 3px !important;
  font-size: 7px !important;
}

.v83-magic-info {
  min-height: 74px !important;
  max-height: 96px !important;
  overflow: hidden auto !important;
}

.v81-prayer-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
  align-content: start !important;
}

.v81-prayer-cell {
  min-height: 50px !important;
  height: 50px !important;
  padding: 5px !important;
}

.v81-prayer-cell img {
  width: 36px !important;
  height: 36px !important;
}

.v81-prayer-cell span,
.v81-prayer-cell em {
  display: none !important;
}

.v81-prayer-cell.is-locked::after {
  content: "" !important;
  display: none !important;
}

.v81-prayer-info {
  min-height: 62px !important;
  max-height: 88px !important;
  overflow: hidden auto !important;
}

.v85-hud-hover-tooltip {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  min-width: 118px;
  max-width: 210px;
  padding: 7px 9px;
  border: 1px solid rgba(236, 197, 106, .38);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(32, 24, 15, .98), rgba(12, 9, 6, .98));
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,237,190,.06);
  color: #e9d7ac;
  font-family: system-ui, sans-serif;
}

.v85-hud-hover-tooltip[hidden] {
  display: none !important;
}

.v85-hud-hover-tooltip strong {
  display: block;
  color: #f0d46f;
  font: 900 12px/1.1 Georgia, serif;
}

.v85-hud-hover-tooltip span {
  display: block;
  margin-top: 3px;
  color: #d8c7a2;
  font: 750 10.5px/1.2 system-ui, sans-serif;
}


/* V78.32.3 OSRS Friends List + tabbed profile panel ------------------- */
.v87-friends-panel {
  height: 100%;
  padding: 36px 8px 10px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  background:
    radial-gradient(circle at 50% 0%, rgba(164, 126, 62, .10), transparent 45%),
    linear-gradient(180deg, rgba(31, 23, 14, .24), rgba(12, 9, 6, .40));
}

.v87-friends-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 2px solid #17100a;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a3521, #21170e);
  box-shadow: inset 0 0 0 1px rgba(238, 201, 104, .14);
  padding: 5px 7px;
}

.v87-friends-title strong {
  color: #f2cf65;
  font: 900 13px/1 Georgia, serif;
  text-shadow: 1px 1px #000;
}

.v87-friends-title span {
  color: #f4dd8f;
  font: 850 10px/1 system-ui, sans-serif;
}

.v87-friends-list {
  min-height: 0;
  overflow: hidden auto;
  border: 2px solid #130d08;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(70, 58, 42, .94), rgba(45, 38, 29, .96));
  box-shadow: inset 0 0 0 1px rgba(232, 204, 137, .10);
  padding: 4px;
  scrollbar-width: thin;
}

.v87-friend-row {
  width: 100%;
  height: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f0e3c0;
  padding: 1px 4px;
  text-align: left;
  cursor: pointer;
  font: 850 12px/1 "Trebuchet MS", system-ui, sans-serif;
}

.v87-friend-row:hover,
.v87-friend-row.is-selected {
  background: rgba(246, 213, 107, .18);
}

.v87-friend-row.is-online span,
.v87-friend-row.is-online strong {
  color: #ffff33;
  text-shadow: 1px 1px #000;
}

.v87-friend-row.is-offline span,
.v87-friend-row.is-offline strong {
  color: #ff3d3d;
  text-shadow: 1px 1px #000;
}

.v87-friend-row strong {
  font: 850 11px/1 "Trebuchet MS", system-ui, sans-serif;
}

.v87-friends-empty {
  padding: 18px 10px;
  color: #ceb990;
  text-align: center;
  font: 750 12px/1.35 system-ui, sans-serif;
}

.v87-friends-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 20px;
}

.v87-friends-actions button {
  min-height: 32px;
  border: 2px solid #17100a;
  border-radius: 2px;
  background: linear-gradient(180deg, #7c674b, #3c3126);
  color: #ffd97d;
  font: 900 11px/1 Georgia, serif;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.v87-friends-actions button:hover {
  filter: brightness(1.12);
}

.v86-profile-shell {
  height: 100%;
  padding: 36px 9px 10px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
}

.v86-profile-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 5px 8px;
  border: 2px solid #1a120b;
  border-radius: 7px;
  background: linear-gradient(180deg, #4a3825, #20160d);
}

.v86-profile-tabs button {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(236, 197, 106, .28);
  border-radius: 6px;
  background: linear-gradient(180deg, #3c2b1a, #160f09);
  cursor: pointer;
}

.v86-profile-tabs button.is-active {
  border-color: #f0d46f;
  box-shadow: 0 0 9px rgba(240, 212, 111, .32), inset 0 0 0 1px rgba(255,255,255,.08);
}

.v86-tab-gem {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(12, 8, 5, .85);
  border-radius: 50%;
  box-shadow: 0 2px 0 #090603, inset 0 2px rgba(255,255,255,.20);
}

.v86-tab-gem--profile { background: radial-gradient(circle at 35% 30%, #f5e4a6, #b09b62 48%, #4f442b); }
.v86-tab-gem--quests { background: radial-gradient(circle at 35% 30%, #d9ccff, #6258d8 48%, #22205a); }
.v86-tab-gem--collection { background: radial-gradient(circle at 35% 30%, #d2ffd0, #63d96a 48%, #245b27); }

.v86-profile-page {
  min-height: 0;
  overflow: hidden auto;
  border: 2px solid #1a120b;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(87, 74, 55, .96), rgba(58, 50, 39, .98));
  padding: 10px;
  scrollbar-width: thin;
}

.v86-nameplate {
  display: grid;
  place-items: center;
  min-height: 42px;
  margin-bottom: 8px;
}

.v86-nameplate strong {
  color: #f0b84d;
  font: 900 24px/1 Georgia, serif;
  text-shadow: 1px 2px #1a0f06;
}

.v86-score-panel,
.v86-score-grid > div,
.v86-boss-panel,
.v86-collection-row,
.v86-quest-overlay {
  border: 2px solid rgba(45, 34, 22, .72);
  border-radius: 7px;
  background: rgba(57, 48, 38, .78);
  box-shadow: inset 0 0 0 1px rgba(238, 213, 153, .08);
}

.v86-score-panel--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 7px;
}

.v86-score-panel--split > div,
.v86-score-panel--wide,
.v86-score-grid > div {
  min-height: 52px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px 7px;
}

.v86-score-panel--wide {
  margin-bottom: 7px;
}

.v86-score-panel span,
.v86-score-grid span {
  color: #d9a95f;
  font: 900 14px/1.1 Georgia, serif;
  text-shadow: 1px 1px #1a0f06;
}

.v86-score-panel strong,
.v86-score-grid strong {
  color: #72f15f;
  font: 900 18px/1.1 Georgia, serif;
  text-shadow: 1px 1px #071005;
}

.v86-score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

.v86-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d9a95f;
  margin: 1px 1px 8px;
}

.v86-panel-title strong {
  color: #f0d186;
  font: 900 17px/1 Georgia, serif;
}

.v86-panel-title span {
  color: #cfb982;
  font: 900 10px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.v86-boss-panel {
  padding: 8px;
}

.v86-quest-overlay {
  padding: 12px !important;
  position: static !important;
  inset: auto !important;
  min-height: 278px;
  overflow: hidden auto;
}

.v86-collection-list {
  display: grid;
  gap: 6px;
}

.v86-collection-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  color: #e1d1ac;
  font: 800 12px/1.2 system-ui, sans-serif;
}

.v86-collection-row strong {
  color: #72f15f;
  font: 900 13px/1 system-ui, sans-serif;
}

.v86-open-collection-log {
  margin-top: 10px !important;
  width: 100%;
}

/* override older profile card layout in this new tab */
.v86-profile-shell .v84-profile-card,
.v86-profile-shell .v80-journal-card {
  display: none !important;
}

/* =====================================================================
   V79 OSRS reskin — Magic spellbook + Profile. Replaces the neon-purple
   spellbook with the classic RuneScape look (beveled brown stone frame,
   desaturated dark-blue spell field, gold serif headings, green stat
   numbers) and deepens the profile's carved bevels. Appended last and
   restricted to colour / border / shadow so it can never shift layout.
   ===================================================================== */

/* Magic spellbook — brown interface frame */
.v83-magic-panel {
  background: linear-gradient(180deg, #4a3f2b, #33291a) !important;
  border: 2px solid #17110a !important;
  border-radius: 5px !important;
  box-shadow: inset 1px 1px 0 #6d5c3a, inset -1px -1px 0 #17110a, 0 3px 8px rgba(0,0,0,.55) !important;
}
.v83-magic-header strong { color: #f2d488 !important; font-family: Georgia, serif !important; text-shadow: 1px 1px 0 #000 !important; }
.v83-magic-header span { color: #74e666 !important; text-shadow: 1px 1px 0 #000 !important; }

/* filter tabs → beveled brown buttons */
.v83-magic-tabs button {
  border: 2px solid #17110a !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #5c4e33, #40351f) !important;
  box-shadow: inset 1px 1px 0 #806c44, inset -1px -1px 0 #17110a !important;
  color: #ecd9a8 !important;
  text-shadow: 1px 1px 0 #000 !important;
}
.v83-magic-tabs button.is-active {
  background: linear-gradient(180deg, #7c6842, #574625) !important;
  color: #fff1c8 !important;
  box-shadow: inset 1px 1px 0 #9e8758, inset -1px -1px 0 #17110a, 0 0 7px rgba(242,212,136,.4) !important;
}

/* spell field → OSRS dark-blue slate, inset into the frame */
.v83-magic-grid {
  border: 2px solid #100e09 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #2b3040, #1b1f2c) !important;
  box-shadow: inset 0 0 16px rgba(0,0,0,.55) !important;
}
.v83-spell {
  border: 1px solid #0f1220 !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #333b4f, #232838) !important;
  box-shadow: inset 1px 1px 0 rgba(130,150,190,.15) !important;
  color: #eadfff !important;
}
.v83-spell img { filter: drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell:hover { filter: brightness(1.12) !important; }
.v83-spell.is-selected {
  border-color: #f2d488 !important;
  box-shadow: 0 0 9px rgba(242,212,136,.5), inset 0 0 10px rgba(242,212,136,.15) !important;
}
.v83-spell.is-autocast {
  border-color: #74e666 !important;
  box-shadow: 0 0 9px rgba(116,230,102,.5), inset 0 0 10px rgba(116,230,102,.15) !important;
}
.v83-spell em { background: #f0d46f !important; color: #241606 !important; }

/* spell info readout → dark parchment */
.v83-magic-info {
  border: 2px solid #17110a !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #241f18, #16120c) !important;
  box-shadow: inset 1px 1px 0 #4a4029 !important;
  color: #d8c8a4 !important;
}
.v83-magic-info strong { color: #f2d488 !important; }
.v83-magic-info span { color: #8fd0ff !important; }
.v83-magic-info small { color: #74e666 !important; }

/* Profile — deepen the carved stone bevels on the frame + stat cells */
.v86-profile-page {
  border: 2px solid #17110a !important;
  box-shadow: inset 1px 1px 0 #6d5c3a, inset -1px -1px 0 #17110a !important;
}
.v86-score-panel--split > div,
.v86-score-panel--wide,
.v86-score-grid > div,
.v86-boss-panel,
.v86-collection-row {
  border: 2px solid #17110a !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #241f17, #15110b) !important;
  box-shadow: inset 1px 1px 0 #57492f, inset -1px -1px 0 #17110a !important;
}
.v86-profile-tabs button {
  border: 2px solid #17110a !important;
  box-shadow: inset 1px 1px 0 #7d6a44, inset -1px -1px 0 #17110a !important;
}
.v86-profile-tabs button.is-active {
  box-shadow: inset 1px 1px 0 #9e8758, inset -1px -1px 0 #17110a, 0 0 8px rgba(240,212,111,.45) !important;
}

/* Every spell currently shares one placeholder icon (skill-magic.png), so they
   were indistinguishable. Tint each by element/school so the book is readable
   at a glance — elemental strikes use their OSRS element colours. Real per-spell
   art would replace these tints. (Each keeps the base drop-shadow.) */
.v83-spell[data-magic-spell-id="wind_strike"] img    { filter: saturate(.25) brightness(1.5) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="water_strike"] img   { filter: saturate(1.6) brightness(1.05) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="earth_strike"] img   { filter: hue-rotate(-90deg) saturate(1.5) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="fire_strike"] img    { filter: hue-rotate(175deg) saturate(1.8) brightness(1.05) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="home_teleport"] img  { filter: hue-rotate(-40deg) saturate(1.4) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="bank_teleport"] img  { filter: hue-rotate(55deg) saturate(1.4) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="market_teleport"] img { filter: hue-rotate(195deg) saturate(1.5) brightness(1.05) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="mine_teleport"] img  { filter: hue-rotate(150deg) saturate(1.2) brightness(.92) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="portal_teleport"] img { filter: hue-rotate(100deg) saturate(1.5) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }
.v83-spell[data-magic-spell-id="high_alchemy"] img   { filter: hue-rotate(205deg) saturate(1.7) brightness(1.15) drop-shadow(0 2px 2px rgba(0,0,0,.85)) !important; }

/* =====================================================================
   V79 OSRS character-summary profile + tab-gap fix.
   The panel already draws a 34px title bar (.v26-tab-panel::before), so the
   inner shells must NOT add another ~36px on top — that was the strange gap
   under the three gem tabs in Profile / Friends. Then a clean OSRS "hiscore"
   summary: near-black inset stat cells, orange labels + icons, bright-green
   numbers, matching the RuneScape character summary.
   ===================================================================== */
.v86-profile-shell { padding-top: 6px !important; }
.v80-social-panel, .v80-clan-panel { padding-top: 8px !important; }

/* the three character gem tabs — flatter, tidier, sit right under the title */
.v86-profile-tabs { padding: 4px 6px !important; margin-bottom: 2px !important; }
.v86-tab-gem { box-shadow: 0 1px 0 #0a0704, inset 0 2px rgba(255,255,255,.28), inset 0 -2px rgba(0,0,0,.35) !important; }

/* Only when this page is the active sub-tab. Without the :not([hidden]) guard,
   display:flex !important overrode the [hidden] attribute and the Adventurer
   stats bled into the Quests / Collection sub-tabs. */
.osrs-summary:not([hidden]) { display: flex !important; flex-direction: column; gap: 7px; }
.v86-profile-page[hidden] { display: none !important; }
.osrs-summary__name { text-align: center; padding: 3px 0 5px; }
.osrs-summary__name strong {
  color: #eab557;
  font: 900 21px/1 Georgia, serif;
  letter-spacing: .01em;
  text-shadow: 0 2px 2px rgba(0,0,0,.9);
}
.osrs-summary__row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* Warm-stone stat plaques with a copper hairline — carved insets, not floating
   web cards (per the Waystone art direction: warm stone, copper/gold, dark trim). */
.osrs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 7px 6px;
  text-align: center;
  border: 1px solid #100a05;
  border-radius: 5px;
  background: linear-gradient(180deg, #2a2013 0%, #17100a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(198,138,60,.16),
    inset 1px 1px 0 rgba(210,150,70,.22),
    inset -1px -2px 3px rgba(0,0,0,.6);
}
.osrs-stat--wide { min-height: 44px; }
.osrs-stat__head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e6a94c;
  font: 800 10.5px/1.1 system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  white-space: nowrap;
}
.osrs-stat__ic {
  width: 15px;
  height: 15px;
  fill: #f0b45e;
  flex: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.75));
}
.osrs-stat strong {
  color: #5fe05a;
  font: 900 18px/1 Georgia, serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.osrs-stat--wide strong { font-size: 21px; }


/* V90: OSRS-style larger skills tab icons.
   The previous V31.1 compact override forced 23px icons and a bottom XP info box.
   This restores large readable skill icons, uses the freed space for a 3-column grid,
   and removes the bottom XP text panel so the tab feels closer to OSRS. */
[data-side-panel="stats"] .v26-skill-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 7px 8px 0 !important;
}

[data-side-panel="stats"] .v26-skill-cell {
  height: 68px !important;
  padding: 4px 2px 3px !important;
  display: grid !important;
  grid-template-rows: 43px 8px 11px 4px !important;
  justify-items: center !important;
  align-items: center !important;
  overflow: visible !important;
}

[data-side-panel="stats"] .v26-skill-cell img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translateY(-1px) scale(1.08) !important;
  transform-origin: center !important;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.62)) !important;
}

[data-side-panel="stats"] .v26-skill-cell span {
  max-width: 78px !important;
  margin: -1px auto 0 !important;
  font-size: .42rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

[data-side-panel="stats"] .v26-skill-cell strong {
  margin: -1px 0 0 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

[data-side-panel="stats"] .v29-skill-progress {
  width: 54px !important;
  height: 3px !important;
  margin: 1px auto 0 !important;
}

[data-side-panel="stats"] .v29-skill-hover {
  display: none !important;
}

[data-side-panel="stats"] .v26-total-level {
  bottom: 7px !important;
}


/* Al Tarim material crafting context menu. */
.context-menu.is-crafting-menu button {
  display: grid;
  gap: 2px;
  min-width: 230px;
  text-align: left;
}

.context-menu.is-crafting-menu button small {
  color: #bca977;
  font-size: .62rem;
  font-weight: 800;
}

.context-menu.is-crafting-menu button:disabled {
  opacity: .48;
  cursor: not-allowed;
}


/* V92: Skills + inventory side-tab polish.
   Smaller skill icons keep the premium art but stop the grid from feeling
   crowded. XP progress is a vertical green strip beside the icon, not a
   horizontal underline that clashes with the label/level. Inventory removes
   its redundant title/use banner so it behaves like a clean 28-slot backpack. */
[data-side-panel="stats"] .v26-skill-grid {
  gap: 5px !important;
  padding: 7px 8px 0 !important;
}

[data-side-panel="stats"] .v26-skill-cell {
  position: relative !important;
  height: 68px !important;
  padding: 4px 4px 4px !important;
  grid-template-rows: 38px 9px 12px !important;
  overflow: hidden !important;
}

[data-side-panel="stats"] .v26-skill-cell img {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  transform: translateY(0) scale(1) !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.64)) !important;
}

[data-side-panel="stats"] .v26-skill-cell span {
  margin: 0 auto !important;
  max-width: 76px !important;
  font-size: .40rem !important;
  line-height: .95 !important;
}

[data-side-panel="stats"] .v26-skill-cell strong {
  margin: 0 !important;
  font-size: .80rem !important;
  line-height: 1 !important;
}

[data-side-panel="stats"] .v29-skill-progress {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  width: 4px !important;
  height: 38px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(14, 16, 10, .72) !important;
  border: 1px solid rgba(0,0,0,.60) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.60) !important;
  display: flex !important;
  align-items: flex-end !important;
}

[data-side-panel="stats"] .v29-skill-progress > i {
  display: block !important;
  width: 100% !important;
  min-height: 2px !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, #a7ff7d 0%, #35d854 55%, #1fa53a 100%) !important;
  box-shadow: 0 0 6px rgba(88, 255, 93, .35) !important;
}

[data-side-panel="inventory"].v26-tab-panel::before,
[data-side-panel="combat"].v26-tab-panel::before,
[data-side-panel="stats"].v26-tab-panel::before,
[data-side-panel="prayer"].v26-tab-panel::before {
  display: none !important;
  content: none !important;
}

[data-side-panel="inventory"].v26-tab-panel,
[data-side-panel="combat"].v26-tab-panel,
[data-side-panel="stats"].v26-tab-panel,
[data-side-panel="prayer"].v26-tab-panel {
  padding-top: 0 !important;
}

[data-side-panel="inventory"] .v82-inventory-use-hint {
  display: none !important;
}

[data-side-panel="inventory"] .v82-inventory-grid,
[data-side-panel="inventory"] .v26-inventory-grid {
  margin-top: 0 !important;
  padding: 10px 12px 0 !important;
}


/* V94 OSRS-style skill guide overlay ---------------------------------- */
[data-side-panel="stats"] .v26-skill-cell {
  cursor: pointer !important;
}

[data-side-panel="stats"] .v26-skill-cell:hover {
  filter: brightness(1.12);
}

.v94-skill-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: grid;
  place-items: center;
  background: rgba(7, 6, 4, .46);
  backdrop-filter: blur(2px);
}

.v94-skill-guide-overlay[hidden] {
  display: none !important;
}

.v94-skill-guide {
  width: min(520px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: hidden;
  border: 2px solid #201508;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(92, 70, 38, .96), rgba(45, 32, 17, .98)),
    #3d2a15;
  box-shadow: 0 24px 70px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255, 215, 119, .18);
  color: #f3dfaa;
  text-shadow: 0 2px 2px rgba(0,0,0,.72);
}

.v94-skill-guide__header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 46px 12px 16px;
  border-bottom: 1px solid rgba(236, 190, 97, .26);
  background: linear-gradient(180deg, rgba(60, 39, 14, .95), rgba(42, 28, 12, .94));
}

.v94-skill-guide__close {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 218, 128, .42);
  border-radius: 8px;
  background: linear-gradient(180deg, #865333, #4d2418);
  color: #ffe6a0;
  font-size: 1.25rem;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
}

.v94-skill-guide__title {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.v94-skill-guide__title img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,.55));
}

.v94-skill-guide__title strong {
  display: block;
  color: #ffdf75;
  font-size: 1.18rem;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v94-skill-guide__title span,
.v94-skill-guide__level span {
  display: block;
  color: #d9bd7b;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v94-skill-guide__level {
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid rgba(231, 180, 83, .28);
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  text-align: center;
}

.v94-skill-guide__level b {
  display: block;
  margin-top: 2px;
  color: #fff4c2;
  font-size: 1.45rem;
  line-height: 1;
}

.v94-skill-guide__body {
  max-height: calc(min(680px, 100vh - 32px) - 92px);
  padding: 12px 14px 16px;
  overflow: auto;
  scrollbar-color: #b98a3d #211509;
}

.v94-skill-guide__xp {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(231, 180, 83, .22);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
  color: #ead19a;
  font-size: .72rem;
  font-weight: 900;
}

.v94-skill-guide__xp strong {
  color: #fff1bd;
}

.v94-skill-guide__xp > i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.50);
}

.v94-skill-guide__xp > i > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #30b947, #b8ff78);
  box-shadow: 0 0 12px rgba(121, 255, 88, .34);
}

.v94-skill-guide__section {
  margin-top: 10px;
  border: 1px solid rgba(231, 180, 83, .22);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(18, 12, 6, .42);
}

.v94-skill-guide__section h3 {
  margin: 0;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(231, 180, 83, .16);
  background: rgba(255, 214, 114, .07);
  color: #ffdf75;
  font-size: .78rem;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.v94-skill-guide__section table {
  width: 100%;
  border-collapse: collapse;
}

.v94-skill-guide__section tr + tr {
  border-top: 1px solid rgba(255,255,255,.06);
}

.v94-skill-guide__section td {
  padding: 8px 9px;
  vertical-align: middle;
  font-size: .72rem;
}

.v94-skill-guide__section td:first-child {
  width: 46px;
}

.v94-skill-guide__section td:last-child {
  width: 72px;
  color: #9df07a;
  font-size: .62rem;
  font-weight: 1000;
  text-align: right;
  text-transform: uppercase;
}

.v94-skill-guide__section tr.is-locked td:last-child {
  color: #e58a75;
}

.v94-skill-guide__section strong {
  display: block;
  color: #fff2c5;
  font-size: .76rem;
  font-weight: 1000;
}

.v94-skill-guide__section small {
  display: block;
  margin-top: 2px;
  color: #cfb681;
  font-size: .64rem;
  line-height: 1.25;
}

.v94-level-pill {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  border: 1px solid rgba(255, 221, 128, .30);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(111, 78, 29, .95), rgba(49, 32, 11, .95));
  color: #fff1bd;
  font-size: .74rem;
  font-weight: 1000;
}

.v94-skill-guide__section tr.is-locked {
  opacity: .62;
}

/* V95 OSRS-style camera controls */
#game-canvas.is-camera-dragging,
.stage:has(#game-canvas.is-camera-dragging) {
  cursor: grabbing !important;
}

/* V96: camera controls in Settings fit with the existing F-key list. */
[data-side-panel="settings"] .v35-settings {
  gap: 8px !important;
  padding-top: 72px !important;
}
[data-side-panel="settings"] .v35-settings__toggle {
  min-height: 34px !important;
}
#settings-camera-reset {
  border-color: rgba(112, 235, 211, .36);
  background: linear-gradient(180deg, rgba(55, 73, 70, .98), rgba(24, 36, 34, .98));
}



/* V92: OSRS-style worn equipment tab and equipment-stats popup. */
.v92-equipment-tab::before {
  display: none !important;
  content: "" !important;
}

.v92-equipment-tab {
  padding-top: 0 !important;
}

.v42-equip-panel {
  gap: 8px !important;
  padding: 12px 10px 0 !important;
}

.v92-equip-doll {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-areas:
    ".      head   ."
    "cape   neck   ammo"
    "weapon body   shield"
    ".      legs   ."
    "hands  feet   ring";
  grid-template-columns: repeat(3, 56px);
  grid-auto-rows: 48px;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 7px 16px;
  width: 236px;
  margin: 8px auto 0;
  padding: 13px 10px 10px;
  border-radius: 10px;
  border: 1px solid rgba(208, 180, 108, .28);
  background:
    radial-gradient(circle at 50% 42%, rgba(235, 217, 160, .06), transparent 46%),
    linear-gradient(180deg, rgba(55, 46, 34, .68), rgba(29, 24, 18, .72));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 18px 38px rgba(255,255,255,.03);
}

.v92-equip-slot {
  width: 44px !important;
  height: 44px !important;
  border-radius: 4px !important;
  border: 2px solid rgba(20, 18, 16, .95) !important;
  background:
    linear-gradient(180deg, #5b5a55, #3c3b38 50%, #2a2927) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -1px rgba(0,0,0,.7),
    0 2px 0 rgba(0,0,0,.55) !important;
}

.v92-equip-slot.is-filled {
  border-color: rgba(236, 204, 111, .58) !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,224,110,.18), transparent 52%),
    linear-gradient(180deg, #695d43, #3c3425 58%, #211b14) !important;
}

.v92-equip-slot .v40-equip-slot__ghost {
  width: 30px !important;
  height: 30px !important;
  opacity: .48 !important;
  filter: grayscale(.25) sepia(.15) brightness(.95);
}

.v92-equip-slot .v40-equip-slot__item {
  width: 36px !important;
  height: 36px !important;
}

.v92-show-equipment-stats {
  width: 172px;
  min-height: 26px;
  margin: 7px auto 0;
  display: block;
  border: 1px solid rgba(27, 22, 17, .95);
  border-radius: 4px;
  background:
    linear-gradient(180deg, #8b7c64, #5e5444 50%, #3b332a);
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    0 2px 0 rgba(0,0,0,.48);
  color: #f3e9cd;
  font: 900 10px/1.05 Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 1px #000;
  cursor: pointer;
}

.v92-show-equipment-stats:hover {
  filter: brightness(1.12);
}

.v92-equip-mini {
  width: 236px;
  margin: 6px auto 0;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  border: 1px solid rgba(212, 166, 82, .20);
  border-radius: 7px;
  background: rgba(0,0,0,.22);
  color: #d8c39a;
  font: 800 9px/1.1 system-ui, sans-serif;
  text-align: center;
  text-transform: uppercase;
}

.v92-equip-mini strong {
  display: block;
  margin-top: 2px;
  color: #fff1b6;
  font-size: 12px;
}

.v92-equipment-stats {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: grid;
  place-items: center;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.v92-equipment-stats[hidden] {
  display: none !important;
}

.v92-equipment-stats__panel {
  position: relative;
  pointer-events: auto;
  width: min(708px, calc(100vw - 36px));
  min-height: 440px;
  padding: 0;
  border: 3px solid #15110c;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #6d665b, #544d43);
  box-shadow:
    0 28px 90px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(205, 194, 169, .36),
    inset 0 0 34px rgba(0,0,0,.18);
  color: #ffb84c;
  overflow: hidden;
}

.v92-equipment-stats__close {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 2px solid #17120b;
  border-radius: 2px;
  background: #8b7c64;
  color: #1d160e;
  font: 1000 20px/20px Georgia, serif;
  cursor: pointer;
}

.v92-equipment-stats__header {
  padding: 13px 42px 9px 14px;
  min-height: 42px;
  background: linear-gradient(180deg, rgba(70,62,52,.55), rgba(52,46,39,.18));
  border-bottom: 2px solid rgba(24,20,16,.56);
  text-shadow: 1px 1px #000;
}

.v92-equipment-stats__header strong {
  display: block;
  color: #ffbf55;
  font: 1000 18px/1.1 Georgia, "Times New Roman", serif;
}

.v92-equipment-stats__header span {
  display: block;
  margin-top: 3px;
  color: #ead9b0;
  font: 800 11px/1.2 system-ui, sans-serif;
}

.v92-equipment-stats__body {
  display: grid;
  grid-template-columns: 205px 190px 1fr;
  min-height: 330px;
  padding: 16px 16px 10px;
  gap: 18px;
}

.v92-equipment-stats__slots {
  display: grid;
  grid-template-areas:
    ".      head   ."
    "cape   neck   ammo"
    "weapon body   shield"
    ".      legs   ."
    "hands  feet   ring";
  grid-template-columns: repeat(3, 52px);
  grid-auto-rows: 47px;
  gap: 6px 14px;
  align-content: center;
  justify-content: center;
  padding: 13px 6px;
  border: 1px solid rgba(20,16,12,.32);
  background: rgba(0,0,0,.08);
}

.v92-equipment-stats__avatar {
  position: relative;
  align-self: stretch;
  min-height: 312px;
  overflow: hidden;
  filter: drop-shadow(0 16px 11px rgba(0,0,0,.22));
}

.v92-equipment-avatar__shadow {
  position: absolute;
  left: 50%;
  bottom: 19px;
  width: 110px;
  height: 24px;
  transform: translateX(-50%) skewX(-10deg);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
}

.v92-equipment-avatar__cape {
  position: absolute;
  left: 50%;
  top: 79px;
  width: 72px;
  height: 128px;
  transform: translateX(-50%) skewX(-4deg);
  border-radius: 12px 12px 16px 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 38%),
    linear-gradient(180deg, #4b3187, #241a4e);
  border: 2px solid rgba(26,17,45,.72);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.04);
}

.v92-equipment-avatar__head,
.v92-equipment-avatar__neck,
.v92-equipment-avatar__body,
.v92-equipment-avatar__shoulder,
.v92-equipment-avatar__arm,
.v92-equipment-avatar__glove,
.v92-equipment-avatar__leg,
.v92-equipment-avatar__boot,
.v92-equipment-avatar__weapon,
.v92-equipment-avatar__shield {
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(32, 22, 13, .66);
  box-shadow:
    inset 0 1px rgba(255,255,255,.22),
    inset 0 -2px rgba(0,0,0,.18);
}

.v92-equipment-avatar__head {
  top: 38px;
  width: 44px;
  height: 48px;
  margin-left: -22px;
  border-radius: 7px 7px 11px 11px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), transparent 40%),
    #dca271;
}

.v92-equipment-avatar__hair {
  position: absolute;
  left: -3px;
  right: -3px;
  top: -6px;
  height: 18px;
  border-radius: 7px 7px 3px 3px;
  background: #4b2b16;
  box-shadow: inset 0 -2px rgba(0,0,0,.28);
}

.v92-equipment-avatar__eye {
  position: absolute;
  top: 22px;
  width: 4px;
  height: 5px;
  border-radius: 2px;
  background: #111;
}

.v92-equipment-avatar__eye--left { left: 13px; }
.v92-equipment-avatar__eye--right { right: 13px; }

.v92-equipment-avatar__beard {
  position: absolute;
  left: 14px;
  bottom: 5px;
  width: 16px;
  height: 8px;
  border-radius: 0 0 8px 8px;
  background: rgba(74,43,22,.82);
}

.v92-equipment-avatar__neck {
  top: 83px;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  border-radius: 0 0 5px 5px;
  background: #c98f5f;
}

.v92-equipment-avatar__body {
  top: 95px;
  width: 68px;
  height: 87px;
  margin-left: -34px;
  border-radius: 10px 10px 7px 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(180deg, #244b84 0%, #173766 100%);
  border-color: rgba(15, 28, 54, .80);
}

.v92-equipment-avatar__trim {
  position: absolute;
  inset: 8px 9px auto;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f0d27a, #a9792b);
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 2px rgba(0,0,0,.18);
}

.v92-equipment-avatar__belt {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 18px;
  height: 8px;
  border-radius: 3px;
  background: #24170d;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

.v92-equipment-avatar__shoulder {
  top: 101px;
  width: 27px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(180deg, #d8c078, #806537);
  border-color: rgba(57,42,22,.72);
}

.v92-equipment-avatar__shoulder--left { margin-left: -56px; transform: rotate(9deg); }
.v92-equipment-avatar__shoulder--right { margin-left: 29px; transform: rotate(-9deg); }

.v92-equipment-avatar__arm {
  top: 122px;
  width: 18px;
  height: 66px;
  border-radius: 9px;
  background: linear-gradient(180deg, #dca271, #c08355);
  border-color: rgba(76,45,23,.55);
}

.v92-equipment-avatar__arm--left { margin-left: -55px; transform: rotate(7deg); }
.v92-equipment-avatar__arm--right { margin-left: 37px; transform: rotate(-7deg); }

.v92-equipment-avatar__glove {
  top: 184px;
  width: 21px;
  height: 17px;
  border-radius: 6px;
  background: #6d5b3d;
}

.v92-equipment-avatar__glove--left { margin-left: -59px; }
.v92-equipment-avatar__glove--right { margin-left: 36px; }

.v92-equipment-avatar__leg {
  top: 181px;
  width: 27px;
  height: 82px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 40%),
    #1f6f8b;
  border-color: rgba(14,45,58,.70);
}

.v92-equipment-avatar__leg--left { margin-left: -31px; }
.v92-equipment-avatar__leg--right { margin-left: 4px; }

.v92-equipment-avatar__boot {
  top: 257px;
  width: 32px;
  height: 18px;
  border-radius: 7px 7px 4px 4px;
  background: #4a2b15;
}

.v92-equipment-avatar__boot--left { margin-left: -35px; }
.v92-equipment-avatar__boot--right { margin-left: 5px; }

.v92-equipment-avatar__weapon {
  top: 113px;
  width: 8px;
  height: 110px;
  margin-left: -78px;
  border-radius: 5px;
  transform: rotate(28deg);
  background: linear-gradient(180deg, #e7d083, #8b6429 46%, #39210f);
  border-color: rgba(49,34,18,.75);
}

.v92-equipment-avatar__weapon::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -12px;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(180deg, #89e3ff, #29678a);
  border: 2px solid rgba(13,41,56,.75);
  box-shadow: inset 0 1px rgba(255,255,255,.32);
}

.v92-equipment-avatar__shield {
  top: 120px;
  width: 34px;
  height: 56px;
  margin-left: 58px;
  border-radius: 9px 9px 13px 13px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(180deg, #5b4996, #2a2358);
  border-color: rgba(31,24,65,.80);
}


.v92-equipment-stats__bonuses {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 2px;
  text-shadow: 1px 1px #000;
}

.v92-equipment-stats__bonuses section {
  display: grid;
  gap: 2px;
}

.v92-equipment-stats__bonuses h3 {
  margin: 0 0 2px;
  color: #ffb84c;
  font: 1000 16px/1 Georgia, "Times New Roman", serif;
}

.v92-equipment-stats__bonuses dl {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
}

.v92-equipment-stats__bonuses dl div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
}

.v92-equipment-stats__bonuses dt,
.v92-equipment-stats__bonuses dd {
  margin: 0;
  color: #ffb84c;
  font: 900 13px/1.16 Georgia, "Times New Roman", serif;
}

.v92-equipment-stats__bonuses dd {
  text-align: left;
}

.v92-equipment-stats__footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px 14px 92px;
  color: #f4e8ca;
  font: 900 13px/1 system-ui, sans-serif;
}

.v92-equipment-stats__footer::before {
  content: "♟";
  color: #27231f;
  font-size: 21px;
  text-shadow: 1px 1px rgba(255,255,255,.18);
}

.v92-equipment-stats__footer strong {
  color: #ffb84c;
  text-shadow: 1px 1px #000;
}

@media (max-width: 860px) {
  .v92-equipment-stats__body {
    grid-template-columns: 170px 1fr;
  }

  .v92-equipment-stats__avatar {
    display: none;
  }
}



/* V93: OSRS-style instant inventory item stat tooltip. */
.v93-item-tooltip {
  position: fixed;
  z-index: 175;
  width: 226px;
  max-width: calc(100vw - 16px);
  padding: 6px 7px 7px;
  border: 2px solid rgba(36, 30, 22, .96);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(77, 70, 58, .96), rgba(48, 43, 36, .97));
  box-shadow:
    0 10px 24px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(201, 190, 154, .18);
  color: #f0dfb5;
  font: 900 12px/1.12 Georgia, "Times New Roman", serif;
  text-shadow:
    1px 1px 0 #000,
    0 1px 0 #000;
  pointer-events: none;
}

.v93-item-tooltip[hidden] {
  display: none !important;
}

.v93-item-tooltip__action {
  margin-bottom: 5px;
  color: #ffb84c;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v93-item-tooltip__section {
  margin: 4px 0 3px;
  color: #f2e4c0;
  font-size: 11px;
  text-transform: none;
}

.v93-item-tooltip__sub {
  margin: 5px 0 2px;
  color: #ffb84c;
  font-size: 12px;
}

.v93-item-tooltip__line {
  display: grid;
  grid-template-columns: 76px 37px 1fr;
  align-items: baseline;
  column-gap: 3px;
  min-height: 14px;
  white-space: nowrap;
}

.v93-item-tooltip__line span {
  color: #f1e2bb;
}

.v93-item-tooltip__line strong {
  color: #f1e2bb;
  font-weight: 900;
}

.v93-item-tooltip__line em {
  justify-self: start;
  font-style: normal;
  font-weight: 900;
}

.v93-item-tooltip__line em.is-positive {
  color: #41ff65;
}

.v93-item-tooltip__line em.is-negative {
  color: #ff4e48;
}

.v93-item-tooltip__line em.is-zero {
  color: #d3c4a1;
}

.v93-item-tooltip__food {
  display: grid;
  gap: 2px;
  margin-top: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(255, 224, 120, .18);
  background: rgba(0,0,0,.16);
}

.v93-item-tooltip__food strong {
  color: #41ff65;
  font-size: 13px;
}

.v93-item-tooltip__food span {
  color: #f0dfb5;
  font: 800 11px/1.15 system-ui, sans-serif;
  text-shadow: 1px 1px #000;
}

.v93-item-tooltip__examine {
  margin: 0;
  color: #f0dfb5;
  font: 800 11px/1.25 system-ui, sans-serif;
  text-shadow: 1px 1px #000;
}



/* V94: cleaner OSRS-structured equipment tab.
   - one-line Max hit label
   - centered item art
   - cleaner grey slot placeholders
   - subtle connector lines like the OSRS worn equipment tab */
.v92-equip-doll {
  width: 230px !important;
  min-height: 286px !important;
  margin-top: 8px !important;
  padding: 14px 10px 12px !important;
  grid-template-columns: repeat(3, 52px) !important;
  grid-auto-rows: 46px !important;
  gap: 6px 18px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(151, 126, 82, .44) !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(91, 76, 48, .18), transparent 58%),
    linear-gradient(180deg, rgba(54, 43, 29, .72), rgba(27, 21, 14, .78)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.62),
    inset 0 12px 32px rgba(255,255,255,.025) !important;
}

.v92-equip-doll::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 49px;
  right: 49px;
  top: 37px;
  bottom: 46px;
  opacity: .36;
  background:
    linear-gradient(#5b5141, #5b5141) 50% 31px / 3px 172px no-repeat,
    linear-gradient(#5b5141, #5b5141) 50% 31px / 91px 3px no-repeat,
    linear-gradient(#5b5141, #5b5141) 50% 83px / 118px 3px no-repeat,
    linear-gradient(#5b5141, #5b5141) 50% 136px / 3px 61px no-repeat,
    linear-gradient(#5b5141, #5b5141) 50% 196px / 118px 3px no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
  pointer-events: none;
}

.v92-equip-slot {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  border: 2px solid rgba(13, 12, 10, .94) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.10), transparent 48%),
    linear-gradient(180deg, #5b5a56 0%, #44433f 52%, #2b2a27 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -2px rgba(0,0,0,.62),
    0 2px 0 rgba(0,0,0,.56) !important;
}

.v92-equip-slot.is-filled {
  border-color: rgba(227, 195, 101, .70) !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,224,112,.18), transparent 54%),
    linear-gradient(180deg, #5b5140 0%, #332a20 58%, #1d1710 100%) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.16),
    inset 0 -2px rgba(0,0,0,.68),
    0 0 0 1px rgba(255,219,98,.12),
    0 2px 0 rgba(0,0,0,.56) !important;
}

.v92-equip-slot .v40-equip-slot__ghost {
  width: 31px !important;
  height: 31px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  opacity: .70 !important;
  transform: none !important;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.45)) grayscale(.15) sepia(.08) brightness(1.08) !important;
}

.v92-equip-slot .v40-equip-slot__item {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  transform: translate(0, 0) !important;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.58)) !important;
}

.v92-equip-slot .inventory-slot__qty {
  position: absolute !important;
  right: 2px !important;
  bottom: 1px !important;
  font-size: 9px !important;
}

.v92-show-equipment-stats {
  width: 170px !important;
  min-height: 24px !important;
  margin-top: 8px !important;
  font-size: 10px !important;
}

.v92-equip-mini {
  width: 230px !important;
  margin-top: 10px !important;
  padding: 6px 7px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
}

.v92-equip-mini span {
  display: block !important;
  min-width: 0 !important;
  color: #e7cf94 !important;
  font: 1000 8px/1.05 system-ui, sans-serif !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.v92-equip-mini strong {
  margin-top: 2px !important;
  color: #fff2bf !important;
  font-size: 12px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}



/* V16: boss-only center HP bar.
   Normal mobs keep the small top-left target status. Bosses use this OSRS-style
   centered bar so large fights read clearly without cluttering the HUD. */
.v16-boss-hp-status {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 32;
  width: min(520px, calc(100vw - 420px));
  transform: translateX(-50%);
  pointer-events: none;
}

.v16-boss-hp-status[hidden] {
  display: none !important;
}

.v16-boss-hp-status__panel {
  position: relative;
  padding: 8px 10px 10px;
  border: 3px solid rgba(20, 14, 8, .96);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(58, 48, 35, .98), rgba(25, 19, 13, .98));
  box-shadow:
    0 13px 34px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255, 223, 117, .22),
    inset 0 11px 24px rgba(255,255,255,.045);
}

.v16-boss-hp-status__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0 2px 5px;
  color: #ffd966;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow:
    1px 1px 0 #000,
    0 0 8px rgba(255, 208, 78, .26);
}

.v16-boss-hp-status__title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v16-boss-hp-status__title span {
  flex: 0 0 auto;
  color: #e7d4a2;
  font: 900 10px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.v16-boss-hp-status__bar {
  position: relative;
  height: 30px;
  overflow: hidden;
  border: 2px solid rgba(14, 10, 7, .98);
  border-radius: 2px;
  background:
    linear-gradient(90deg, #632016, #7a2115);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.45);
}

.v16-boss-hp-status__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%, rgba(0,0,0,.20)),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(0,0,0,.12) 23px 25px);
  pointer-events: none;
}

.v16-boss-hp-status__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 100%;
  min-width: 0;
  background:
    linear-gradient(180deg, #30f162, #11a538 70%, #087a24);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -3px 0 rgba(0,0,0,.26);
  transition: width .18s ease-out;
}

.v16-boss-hp-status__bar em {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: #ffffff;
  font: 1000 14px/1 Georgia, "Times New Roman", serif;
  font-style: normal;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    0 0 5px rgba(0,0,0,.85);
}

.v16-boss-hp-status.is-magic .v16-boss-hp-status__panel {
  box-shadow:
    0 13px 34px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(120, 220, 255, .36),
    0 0 18px rgba(64, 154, 255, .20);
}

.v16-boss-hp-status.is-ranged .v16-boss-hp-status__panel {
  box-shadow:
    0 13px 34px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(194, 255, 106, .32),
    0 0 18px rgba(121, 209, 52, .18);
}

.v16-boss-hp-status.is-melee .v16-boss-hp-status__panel {
  box-shadow:
    0 13px 34px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255, 117, 88, .34),
    0 0 18px rgba(206, 54, 38, .18);
}

.v16-boss-hp-status__panel.is-enraged .v16-boss-hp-status__bar i {
  background:
    linear-gradient(180deg, #ffef55, #fb8d25 54%, #ca2719);
}

@media (max-width: 1050px) {
  .v16-boss-hp-status {
    width: min(440px, calc(100vw - 24px));
    top: 12px;
  }
}



/* V24: proper crafting window for leather, jewellery and chitin recipes. */
.v24-crafting {
  width: min(620px, calc(100vw - 360px));
}

.v24-crafting__filters {
  display: flex;
  gap: 6px;
  padding: 8px 10px 2px;
  flex-wrap: wrap;
}

.v24-crafting__filters button {
  border: 1px solid rgba(30, 20, 10, .95);
  border-radius: 3px;
  padding: 5px 9px;
  background: linear-gradient(180deg, #5c4a30, #322514);
  color: #f5dfab;
  font: 800 11px/1 system-ui, sans-serif;
  cursor: pointer;
  text-shadow: 1px 1px 0 #000;
}

.v24-crafting__filters button.is-active {
  background: linear-gradient(180deg, #9b7338, #553514);
  color: #fff2c8;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 160, .32);
}

.v24-crafting__grid {
  max-height: 360px;
  overflow: auto;
}

.v24-crafting__item small {
  display: block;
  margin-top: 2px;
  color: #c8b27c;
  font-size: 10px;
  line-height: 1.1;
}


/* V80.2: shell coherence and interaction-quality pass.
   This deliberately sits last in the cascade and consolidates the live HUD
   without replacing its OSRS-like proportions or established artwork. */
:root {
  --ws-ui-ink: #171009;
  --ws-ui-deep: #21170d;
  --ws-ui-panel: #3d301f;
  --ws-ui-brass: #d5ad5d;
  --ws-ui-gold: #f1d070;
  --ws-ui-text: #f0dfb5;
  --ws-ui-muted: #c8b58c;
  --ws-ui-focus: #ffe28a;
}

button,
input {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ws-ui-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 226, 138, .18) !important;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed !important;
  filter: grayscale(.35) !important;
  opacity: .55 !important;
}

/* Treat the two tab rows and panel as one carved interface, not three cards. */
.v26-side-tabs.v26-side-tabs--top,
.v26-side-tabs.v26-side-tabs--bottom {
  border: 2px solid #171009 !important;
  background: linear-gradient(180deg, #4b3b27, #291e12) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.28) !important;
}

.v26-side-tabs.v26-side-tabs--top {
  border-radius: 7px 7px 0 0 !important;
  border-bottom-width: 1px !important;
}

.v26-side-tabs.v26-side-tabs--bottom {
  border-radius: 0 0 7px 7px !important;
  border-top-width: 1px !important;
}

.v26-side-tabs button {
  transform: none !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(95, 77, 50, .68), rgba(39, 29, 18, .76)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(0,0,0,.5) !important;
}

.v26-side-tabs button:hover {
  background: linear-gradient(180deg, rgba(119, 94, 55, .80), rgba(52, 37, 19, .86)) !important;
}

.v26-side-tabs button.is-active {
  background: linear-gradient(180deg, #7d6033, #3f2b15) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 222, 126, .26), inset 0 -2px rgba(0,0,0,.38) !important;
}

.v26-panel-shell {
  border-right: 2px solid #171009 !important;
  border-left: 2px solid #171009 !important;
  background: linear-gradient(180deg, #443522, #2b2014) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 198, 112, .08) !important;
}

.v26-tab-panel {
  border-radius: 3px !important;
  border-color: rgba(19, 13, 8, .92) !important;
  scrollbar-color: #8b7043 #21170d;
  scrollbar-width: thin;
}

.v26-tab-panel::before {
  color: var(--ws-ui-gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: .84rem !important;
  letter-spacing: .055em !important;
  background: linear-gradient(180deg, #47331b, #24180c) !important;
  border-bottom-color: rgba(216, 172, 84, .34) !important;
}

/* Remove inherited spacer hacks that created conspicuous blank bands. */
.v83-magic-panel {
  margin-top: 0 !important;
}

.v87-friends-panel {
  position: relative;
  padding: 8px 8px 10px !important;
}

[data-side-panel="settings"] .v35-settings {
  padding: 12px 16px 10px !important;
  gap: 8px !important;
}

.v35-settings__hint {
  margin: 2px 0 0 !important;
  line-height: 1.35 !important;
}

/* One real speaker label; the old pseudo-label produced “Wayfarer: You:”. */
.v43-chat .chat-input-shell::before,
.v43-chat .chat-input-shell::after {
  content: none !important;
  display: none !important;
}

.v54-chat-input-name {
  flex: 0 0 auto;
  color: #203f87 !important;
  font-weight: 900 !important;
}

.v54-chat-input::placeholder {
  color: rgba(46, 36, 23, .52) !important;
}

.v85-hud-hover-tooltip {
  border-radius: 3px;
  border-color: rgba(224, 187, 104, .52);
  background: linear-gradient(180deg, rgba(44, 34, 22, .99), rgba(17, 12, 8, .99));
  box-shadow: 0 10px 24px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,238,192,.07);
}

/* In-game friend entry replaces the browser prompt. */
.v97-friend-entry {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 8px;
  padding: 10px;
  border: 2px solid #171009;
  border-radius: 4px;
  background: linear-gradient(180deg, #493720, #21170d);
  box-shadow: 0 12px 30px rgba(0,0,0,.58), inset 0 0 0 1px rgba(238,201,104,.14);
}

.v97-friend-entry[hidden] {
  display: none !important;
}

.v97-friend-entry label {
  grid-column: 1 / -1;
  color: var(--ws-ui-gold);
  font: 900 11px/1 Georgia, serif;
}

.v97-friend-entry input {
  min-width: 0;
  height: 34px;
  border: 1px solid #171009;
  border-radius: 3px;
  background: #130d08;
  color: var(--ws-ui-text);
  padding: 0 9px;
  font: 800 12px/1 system-ui, sans-serif;
}

.v97-friend-entry > div {
  display: flex;
  gap: 5px;
}

.v97-friend-entry button {
  min-width: 54px;
  border: 1px solid #171009;
  border-radius: 3px;
  background: linear-gradient(180deg, #80663e, #40301d);
  color: #f4d982;
  font-weight: 900;
  cursor: pointer;
}

/* The former Logout panel was empty. It is now a compact account summary. */
.v97-account-panel {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 24px 24px 16px;
  text-align: center;
}

.v97-account-crest {
  position: relative;
  width: 72px;
  height: 72px;
  border: 3px solid #171009;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #f4dc91, #a96f2b 52%, #3a2412 100%);
  box-shadow: inset 0 0 0 2px rgba(255,241,192,.20), 0 10px 22px rgba(0,0,0,.36);
}

.v97-account-crest i {
  position: absolute;
  inset: 17px;
  transform: rotate(45deg);
  border: 3px solid rgba(40, 24, 8, .82);
  background: rgba(255, 226, 116, .30);
}

.v97-account-identity strong,
.v97-account-identity span {
  display: block;
}

.v97-account-identity strong {
  color: var(--ws-ui-gold);
  font: 900 19px/1.1 Georgia, serif;
}

.v97-account-identity span,
.v97-account-panel p {
  color: var(--ws-ui-muted);
  font: 750 11px/1.4 system-ui, sans-serif;
}

.v97-account-panel p {
  margin: 2px 0 0;
}

.v97-account-panel > button {
  width: 100%;
  min-height: 38px;
  border: 2px solid #171009;
  border-radius: 4px;
  background: linear-gradient(180deg, #806138, #3e2b17);
  color: #f5da84;
  font-weight: 900;
  cursor: pointer;
}

.v97-account-panel > button:hover {
  filter: brightness(1.12);
}

.v97-account-panel > .v97-account-logout {
  background: linear-gradient(180deg, #7f3e31, #411c16);
  color: #ffd2bd;
}

/* Desktop windows belong to the game viewport, not underneath the sidebar.
   The dialogue box is deliberately excluded — V109 anchors it to the chat
   footprint (bottom-left), like the classic client. */
@media (min-width: 981px) {
  .v33-bank-window,
  .v41-shop,
  .v71-loot,
  .v78-trade {
    left: calc((100vw - 350px) / 2) !important;
  }

  .v33-bank-window {
    width: min(940px, calc(100vw - 390px)) !important;
  }

  .v78-trade {
    width: min(700px, calc(100vw - 390px)) !important;
  }

  .v92-equipment-stats {
    padding-right: 350px;
  }
}

/* Keep the complete HUD reachable on common laptop-height displays. */
@media (max-height: 820px) and (min-width: 761px) {
  .osrs-hud.osrs-hud--v26 {
    top: 6px !important;
  }

  .v26-minimap-shell {
    width: 190px !important;
    height: 190px !important;
    margin-bottom: 5px !important;
  }

  .v26-minimap-frame {
    width: 190px !important;
    height: 190px !important;
  }

  .v26-minimap-shell .minimap {
    inset: 22px !important;
    width: 146px !important;
    height: 146px !important;
  }

  .v26-side-tabs.v26-side-tabs--top button,
  .v26-side-tabs.v26-side-tabs--bottom button {
    height: 35px !important;
  }

  .v26-panel-shell {
    min-height: 390px !important;
    padding: 7px !important;
  }

  .v26-tab-panel {
    min-height: 376px !important;
    height: 376px !important;
  }

  [data-side-panel="inventory"] .v26-inventory-grid {
    gap: 5px !important;
    padding: 7px 10px 0 !important;
  }

  [data-side-panel="inventory"] .inventory-slot {
    height: 43px !important;
  }
}

@media (max-width: 760px) {
  .osrs-hud.osrs-hud--v26 {
    right: 8px !important;
    width: min(300px, calc(100vw - 16px)) !important;
  }

  .v26-side-tabs.v26-side-tabs--top,
  .v26-side-tabs.v26-side-tabs--bottom,
  .v26-panel-shell {
    width: 100% !important;
  }

  .osrs-chatbox.v26-chatbox.v43-chat {
    left: 8px !important;
    width: calc(100vw - 16px) !important;
  }

  .v78-trade__body {
    grid-template-columns: 1fr;
  }

  .v78-trade__inventory {
    grid-template-columns: repeat(4, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.v97-quantity-dialog {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 6, 4, .58);
}

.v97-quantity-dialog[hidden] {
  display: none !important;
}

.v97-quantity-dialog__card {
  width: min(340px, 100%);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 3px solid #171009;
  border-radius: 5px;
  background: linear-gradient(180deg, #4c3820, #24180d);
  box-shadow: 0 22px 56px rgba(0,0,0,.68), inset 0 0 0 1px rgba(239,204,124,.16);
  color: var(--ws-ui-text);
}

.v97-quantity-dialog__card > strong {
  color: var(--ws-ui-gold);
  font: 900 18px/1.2 Georgia, "Times New Roman", serif;
  text-align: center;
}

.v97-quantity-dialog__card input {
  width: 100%;
  height: 44px;
  border: 2px solid #171009;
  border-radius: 4px;
  background: #120c07;
  color: #fff0bd;
  font: 900 20px/1 system-ui, sans-serif;
  text-align: center;
}

.v97-quantity-dialog__card input[aria-invalid="true"] {
  border-color: #d8644e;
  box-shadow: 0 0 0 3px rgba(216, 100, 78, .20);
}

.v97-quantity-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v97-quantity-dialog__actions button {
  min-height: 38px;
  border: 2px solid #171009;
  border-radius: 4px;
  background: linear-gradient(180deg, #806039, #3f2b18);
  color: #f5da84;
  font-weight: 900;
  cursor: pointer;
}

.v97-quantity-dialog__actions button:last-child {
  background: linear-gradient(180deg, #665849, #332b24);
  color: #e4d6b4;
}

/* ===== V82: OSRS quest tab, journal, helper + completion scroll ========== */

/* Quest Points header (image2 style). */
.v82-quest-points {
  display: flex; align-items: center; justify-content: space-between;
  margin: 2px 2px 6px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #3e3529, #2c251b);
  border: 1px solid #16120c;
  box-shadow: inset 0 0 0 1px rgba(126, 106, 72, 0.55);
  border-radius: 3px;
}
.v82-quest-points strong {
  font-size: 12.5px; letter-spacing: 0.02em;
  color: #ffb83c;
  text-shadow: 1px 1px 0 #000;
}
.v82-quest-points__gems { display: inline-flex; gap: 5px; }
.v82-quest-points__gems i {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.55);
}
.v82-quest-points__gems .g1 { background: #46b446; }
.v82-quest-points__gems .g2 { background: #6a5acd; }
.v82-quest-points__gems .g3 { background: #c23c3c; }

/* Quest list: OSRS colours — red not started, yellow in progress, green done. */
.v82-quest-list {
  display: flex; flex-direction: column; gap: 1px;
  overflow-y: auto; max-height: 100%;
  padding: 4px 2px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(22, 18, 12, 0.9);
  border-radius: 3px;
  flex: 1;
  min-height: 0;
}
.v82-quest-row {
  appearance: none; border: 0; background: transparent;
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: 12.5px; line-height: 1.25;
  padding: 4px 8px;
  text-shadow: 1px 1px 0 #000;
  border-radius: 2px;
}
.v82-quest-row:hover { background: rgba(255, 255, 255, 0.07); }
.v82-quest-row.is-locked { color: #ff3131; }
.v82-quest-row.is-progress { color: #f7e13c; }
.v82-quest-row.is-done { color: #2fdd2f; }

/* Read Journal (image3 style): parchment with coloured, struck-through lines. */
.v82-quest-journal { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.v82-quest-journal__head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #3e3529, #2c251b);
  border: 1px solid #16120c;
  border-radius: 3px 3px 0 0;
}
.v82-quest-journal__head strong {
  font-size: 12px; color: #ffb83c; text-shadow: 1px 1px 0 #000;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v82-quest-journal__head button {
  appearance: none; cursor: pointer;
  width: 22px; height: 20px; line-height: 1;
  background: linear-gradient(180deg, #6b5c48, #453a2c);
  color: #f4e6c2; border: 1px solid #17120b; border-radius: 3px;
  font-size: 13px; font-family: inherit;
}
.v82-quest-journal__head button:hover { filter: brightness(1.15); }
.v82-quest-journal__parchment {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 12px 14px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 86, 34, 0.18), transparent 60%),
    linear-gradient(180deg, #e5d7b3, #d9c9a1 40%, #cdbb90);
  border: 1px solid #16120c;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 0 22px rgba(96, 66, 20, 0.28);
}
.v82-quest-journal__parchment p { margin: 0 0 7px; font-size: 12.5px; line-height: 1.35; }
.v82-journal-meta { font-size: 11px; color: #6d5527; margin-bottom: 9px; font-style: italic; }
.v82-journal-hint { color: #00119c; }
.v82-journal-header { color: #3a2c11; font-weight: 700; }
.v82-journal-req.is-unmet { color: #a80f0f; font-weight: 700; }
.v82-journal-req.is-met { color: #7c1010; text-decoration: line-through; opacity: 0.8; }
.v82-journal-line { color: #472f10; }
.v82-journal-line.is-done { color: #6e1d10; text-decoration: line-through; opacity: 0.85; }
.v82-journal-current { color: #00119c; font-weight: 700; }
.v82-journal-check { color: #a80f0f; padding-left: 8px; }
.v82-journal-check.is-done { color: #1c7a1c; text-decoration: line-through; }
.v82-journal-complete {
  color: #1c7a1c; font-weight: 800; letter-spacing: 0.08em;
  text-align: center; margin-top: 10px; font-size: 13.5px;
}

/* Profile page must let the quest list flex. */
#profile-page-quests { display: flex; flex-direction: column; min-height: 0; }
#profile-page-quests[hidden] { display: none; }

/* Compact in-world quest guidance. */
.v82-quest-helper {
  position: absolute; top: 12px; left: 12px; z-index: 18;
  max-width: 275px;
  background: rgba(17, 14, 10, 0.88);
  border: 1px solid rgba(255, 184, 60, 0.55);
  border-radius: 5px;
  padding: 8px 11px 9px;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.v82-quest-helper__title {
  margin-bottom: 3px;
  color: #ffb83c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
}
.v82-quest-helper__step {
  color: #f2e7c9;
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 1px 1px 0 #000;
}

/* Quest complete scroll (image1 style). */
.v82-quest-complete {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.55);
}
.v82-quest-complete[hidden] { display: none; }
.v82-quest-complete__scroll {
  position: relative;
  width: min(520px, calc(100% - 48px));
  padding: 30px 38px 56px;
  text-align: center;
  color: #3c2a10;
  background:
    radial-gradient(130% 70% at 50% 0%, rgba(120, 86, 34, 0.20), transparent 55%),
    linear-gradient(180deg, #e9dcba 0%, #ddcda6 45%, #cdbb90 100%);
  border: 2px solid #71592e;
  border-radius: 10px 14px 12px 16px / 60px 20px 60px 22px;
  box-shadow:
    inset 0 0 30px rgba(96, 66, 20, 0.35),
    0 18px 50px rgba(0, 0, 0, 0.6);
  animation: v82ScrollIn 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}
@keyframes v82ScrollIn { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
.v82-quest-complete__scroll h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px; margin: 4px 0 8px; color: #2f1f08;
}
.v82-quest-complete__quest { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: #472f10; }
.v82-quest-complete__award { font-size: 13px; font-weight: 700; color: #5c421c; margin-bottom: 6px; }
#quest-complete-rewards { list-style: none; margin: 0 0 14px; padding: 0; }
#quest-complete-rewards li { font-size: 13.5px; line-height: 1.5; color: #333a8c; font-weight: 600; }
.v82-quest-complete__qp { font-size: 13px; font-weight: 800; color: #2f1f08; }
.v82-quest-complete__close {
  position: absolute; top: 10px; right: 12px;
  appearance: none; cursor: pointer;
  width: 26px; height: 24px;
  background: linear-gradient(180deg, #6b5c48, #453a2c);
  color: #f4e6c2; border: 1px solid #17120b; border-radius: 3px;
  font-size: 11px; font-family: inherit;
}
.v82-quest-complete__close:hover { filter: brightness(1.2); }
/* Quest-scroll emblem: a simple shield medallion drawn with gradients. */
.v82-quest-complete__emblem {
  position: absolute; left: 26px; top: 50%;
  width: 54px; height: 62px; transform: translateY(-70%);
  background:
    radial-gradient(circle at 38% 34%, #f6f1e2 0 26%, #b8b1a0 60%, #6d6250 100%);
  border: 3px solid #4a3a1c;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  box-shadow: inset -5px -6px 10px rgba(60, 42, 16, 0.5);
}
.v82-quest-complete__emblem::after {
  content: ""; position: absolute; inset: 8px 45% 8px 45%;
  background: #4a3a1c; border-radius: 3px;
}
/* Red prize rosette with twin ribbons, bottom-center like the reference. */
.v82-quest-complete__rosette {
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  width: 64px; height: 64px;
  background: repeating-conic-gradient(#a41818 0 20deg, #7e1010 20deg 40deg);
  border-radius: 50%;
  border: 4px solid #5f0c0c;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.v82-quest-complete__rosette span {
  position: absolute; inset: 16px;
  background: radial-gradient(circle at 40% 35%, #ffdf6b, #d9a83f 70%, #a87a20);
  border-radius: 50%;
  border: 2px solid #6b4c12;
}
.v82-quest-complete__rosette::before,
.v82-quest-complete__rosette::after {
  content: ""; position: absolute; top: 50px; width: 18px; height: 46px;
  background: linear-gradient(180deg, #a41818, #7e1010);
  border: 2px solid #5f0c0c;
}
.v82-quest-complete__rosette::before { left: 8px; transform: rotate(14deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.v82-quest-complete__rosette::after { right: 8px; transform: rotate(-14deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }


/* ===== V98: full-size OSRS quest journal modal ========================== */
.v82-quest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.v98-quest-row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v98-quest-row-qp { flex: 0 0 auto; color: rgba(231, 216, 176, 0.62); font-size: 10px; text-shadow: 1px 1px 0 #000; }

.v98-quest-journal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 6, 7, 0.62);
  backdrop-filter: blur(2px);
}
.v98-quest-journal-overlay[hidden] { display: none !important; }
.v98-quest-journal-window {
  width: min(620px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid #21170d;
  border-radius: 8px;
  background: #3a2b1d;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.72),
    inset 0 0 0 2px #87683c,
    inset 0 0 0 5px #49341e;
}
.v98-quest-journal-head {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    linear-gradient(180deg, #5e482f, #302316);
  border-bottom: 2px solid #160f09;
  box-shadow: inset 0 -1px 0 rgba(201, 157, 87, 0.45);
}
.v98-quest-journal-emblem {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid #1b1209;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0cf6c, #8b6026 55%, #3b2410 75%);
  box-shadow: inset 0 0 0 3px rgba(255, 230, 155, 0.18), 0 2px 5px rgba(0,0,0,.65);
}
.v98-quest-journal-emblem span {
  width: 21px;
  height: 29px;
  border: 3px solid #2a190b;
  border-radius: 50% 50% 42% 42%;
  transform: rotate(-10deg);
  box-shadow: inset 0 0 0 2px rgba(255, 242, 185, 0.24);
}
.v98-quest-journal-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v98-quest-journal-heading > span {
  color: #d8b56d;
  font: 700 11px/1.1 system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.v98-quest-journal-heading strong {
  color: #fff2c2;
  font: 700 23px/1.15 Georgia, serif;
  text-shadow: 2px 2px 0 #130d08;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.v98-quest-journal-heading small { color: #bda77d; font-size: 12px; }
.v98-quest-journal-status {
  padding: 5px 9px;
  border: 1px solid #18100a;
  border-radius: 3px;
  background: rgba(0,0,0,.22);
  font-size: 11px;
  font-weight: 800;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
.v98-quest-journal-status.is-locked { color: #ff6254; }
.v98-quest-journal-status.is-progress { color: #f4df45; }
.v98-quest-journal-status.is-done { color: #56df5d; }
.v98-quest-journal-close {
  width: 34px;
  height: 34px;
  appearance: none;
  cursor: pointer;
  border: 2px solid #1b120b;
  border-radius: 4px;
  background: linear-gradient(180deg, #776047, #3d2c1c);
  color: #f4dfb0;
  font: 700 24px/28px Georgia, serif;
  text-shadow: 1px 1px 0 #000;
  box-shadow: inset 0 0 0 1px rgba(225, 189, 121, 0.28);
}
.v98-quest-journal-close:hover { filter: brightness(1.16); }
.v98-quest-journal-parchment {
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
  color: #3d2b13;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 88% 94%, rgba(98,64,20,.16), transparent 34%),
    linear-gradient(180deg, #e8dcb9, #d8c69b 48%, #cbb486);
  box-shadow: inset 0 0 35px rgba(81, 51, 15, 0.34);
}
.v98-journal-section {
  margin: 0 0 15px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(88, 57, 19, 0.28);
}
.v98-journal-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.v98-journal-section-title {
  margin-bottom: 8px;
  color: #5d3a13;
  font: 700 16px/1.2 Georgia, serif;
  letter-spacing: .02em;
}
.v98-journal-overview-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 4px 12px;
  font-size: 12.5px;
}
.v98-journal-overview-grid span { color: #7b6036; }
.v98-journal-overview-grid strong { color: #33220e; }
.v98-journal-overview-grid strong.is-locked { color: #a51919; }
.v98-journal-overview-grid strong.is-progress { color: #8b6f00; }
.v98-journal-overview-grid strong.is-done { color: #237529; }
.v98-journal-requirements { display: grid; gap: 6px; }
.v98-journal-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(79, 48, 14, 0.25);
  border-radius: 3px;
  background: rgba(255,255,255,.12);
  font-size: 12.5px;
}
.v98-journal-requirement > span {
  width: 18px;
  text-align: center;
  font-weight: 900;
}
.v98-journal-requirement.is-met { color: #276e2d; }
.v98-journal-requirement.is-unmet { color: #9d1b17; }
.v98-journal-current-card {
  padding: 10px 12px;
  border: 1px solid rgba(20, 42, 115, 0.34);
  border-left: 4px solid #213b9d;
  border-radius: 3px;
  background: rgba(238, 242, 255, 0.34);
}
.v98-journal-current-card p { margin: 0 0 8px; color: #142d91; font-weight: 800; line-height: 1.4; }
.v98-journal-current-card p:last-child { margin-bottom: 0; }
.v98-journal-task { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: #8b1616; font-size: 12.5px; }
.v98-journal-task.is-done { color: #27702d; text-decoration: line-through; }
.v98-journal-task-box {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 900;
}
.v98-journal-history p { margin: 0 0 8px; font-size: 13px; line-height: 1.42; }
.v98-journal-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.v98-journal-rewards div { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.35; }
.v98-journal-rewards span { color: #9b6b1d; }

@media (max-width: 680px) {
  .v98-quest-journal-overlay { padding: 10px; }
  .v98-quest-journal-window { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .v98-quest-journal-head { grid-template-columns: 44px minmax(0,1fr) 32px; gap: 8px; min-height: 72px; }
  .v98-quest-journal-emblem { width: 40px; height: 40px; }
  .v98-quest-journal-status { display: none; }
  .v98-quest-journal-heading strong { font-size: 18px; }
  .v98-quest-journal-parchment { padding: 14px; }
  .v98-journal-rewards { grid-template-columns: 1fr; }
}


/* ===== V102: unified live shell + chat quality pass =====================
   This is the single final authority for the visible game shell. Earlier
   versioned rules remain for component-specific artwork, while this layer
   normalises contrast, spacing, interaction states and responsive behaviour. */
:root {
  --v102-ink: #120d08;
  --v102-deep: #1d150d;
  --v102-panel: #302418;
  --v102-panel-2: #46351f;
  --v102-line: #725a35;
  --v102-line-soft: rgba(225, 190, 113, .22);
  --v102-gold: #f0cf72;
  --v102-gold-bright: #ffe69a;
  --v102-text: #f1e4c4;
  --v102-muted: #bbaa88;
  --v102-green: #79c66b;
  --v102-red: #df7663;
  --v102-blue: #72b6db;
  --v102-shadow: 0 18px 48px rgba(0, 0, 0, .52);
}

html,
body,
button,
input {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Right-side game shell. */
.osrs-hud.osrs-hud--v26 {
  top: 12px !important;
  right: 14px !important;
  width: 320px !important;
  gap: 0 !important;
  filter: drop-shadow(0 13px 25px rgba(0, 0, 0, .34));
}

.v26-side-tabs.v26-side-tabs--top,
.v26-side-tabs.v26-side-tabs--bottom,
.v26-panel-shell {
  width: 320px !important;
}

.v26-side-tabs.v26-side-tabs--top,
.v26-side-tabs.v26-side-tabs--bottom {
  gap: 3px !important;
  padding: 5px !important;
  border-color: #120c07 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 35%),
    linear-gradient(180deg, #49381f, #251a0f) !important;
  box-shadow:
    inset 0 0 0 1px rgba(234, 197, 113, .11),
    0 7px 18px rgba(0,0,0,.26) !important;
}

.v26-side-tabs button {
  position: relative;
  height: 40px !important;
  border: 1px solid rgba(13, 9, 5, .92) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #57452a, #2d2114) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.075), inset 0 -2px rgba(0,0,0,.30) !important;
  transition: background .12s ease, filter .12s ease, box-shadow .12s ease !important;
}

.v26-side-tabs button::before {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}

.v26-side-tabs button img {
  width: 27px !important;
  height: 27px !important;
  opacity: .82;
  filter: saturate(.82) brightness(.92) drop-shadow(1px 1px 0 #000) !important;
  transition: opacity .12s ease, filter .12s ease !important;
}

.v26-side-tabs button:hover {
  background: linear-gradient(180deg, #735a33, #382716) !important;
  filter: none !important;
}

.v26-side-tabs button:hover img,
.v26-side-tabs button.is-active img {
  opacity: 1;
  filter: saturate(1.08) brightness(1.08) drop-shadow(0 0 5px rgba(246, 203, 104, .34)) !important;
}

.v26-side-tabs button.is-active {
  background: linear-gradient(180deg, #826538, #412c16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 139, .25), inset 0 -2px rgba(0,0,0,.32) !important;
}

.v26-side-tabs button.is-active::before {
  background: var(--v102-gold);
  box-shadow: 0 0 7px rgba(240, 207, 114, .55);
}

.v26-panel-shell {
  min-height: 448px !important;
  padding: 8px !important;
  border-color: #120c07 !important;
  background:
    radial-gradient(circle at 50% 0, rgba(225, 183, 93, .075), transparent 36%),
    linear-gradient(180deg, #3b2c1b, #24190f) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 198, 112, .08) !important;
}

.v26-tab-panel {
  min-height: 430px !important;
  height: 430px !important;
  border: 1px solid #171009 !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
    rgba(24, 17, 10, .62) !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.18) !important;
  scrollbar-color: #82663b #1b130c;
  scrollbar-width: thin;
}

.v26-tab-panel::before {
  height: 32px !important;
  line-height: 32px !important;
  color: var(--v102-gold) !important;
  border-bottom: 1px solid rgba(230, 190, 102, .24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 48%),
    linear-gradient(180deg, #49351d, #281a0d) !important;
  text-shadow: 1px 1px 0 #000;
}

.v26-tab-panel::-webkit-scrollbar,
.v87-friends-list::-webkit-scrollbar,
.v82-quest-list::-webkit-scrollbar {
  width: 7px;
}

.v26-tab-panel::-webkit-scrollbar-thumb,
.v87-friends-list::-webkit-scrollbar-thumb,
.v82-quest-list::-webkit-scrollbar-thumb {
  border: 1px solid #21160c;
  border-radius: 6px;
  background: linear-gradient(180deg, #9a7845, #5a4124);
}

/* Make nested panel copy readable without turning the HUD into large cards. */
.v29-combat-info,
.v31-combat-target-info,
.v53-prayer-info,
.v81-prayer-info,
.v83-magic-info,
.v35-settings__hint,
.v97-account-panel p {
  color: #cdbb96 !important;
  line-height: 1.42 !important;
}

.v29-combat-header,
.v53-prayer-header,
.v81-prayer-header,
.v80-magic-header,
.v87-friends-title,
.v86-panel-title {
  border-bottom-color: var(--v102-line-soft) !important;
}

.v35-settings__toggle,
.v87-friends-actions button,
.v81-prayer-quick button,
.v83-magic-tabs button {
  min-height: 34px;
  border: 1px solid #171009 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #634d2e, #342414) !important;
  color: #ecd49b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07) !important;
}

.v35-settings__toggle:hover,
.v87-friends-actions button:hover,
.v81-prayer-quick button:hover,
.v83-magic-tabs button:hover {
  filter: brightness(1.12);
}

.bank-empty,
.v84-boss-empty,
.v78-trade__empty,
.v43-chat__quiet {
  border: 1px dashed rgba(141, 116, 73, .36);
  border-radius: 4px;
  background: rgba(0,0,0,.11);
  color: #8f8065 !important;
  font-style: italic;
}

/* Status orbs: clearer numbers, quieter chrome. */
.v39-orb {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.42));
}

.v39-orb__num {
  font-variant-numeric: tabular-nums;
  text-shadow: 1px 1px 0 #000, 0 0 5px rgba(0,0,0,.55) !important;
}

.v39-orb button,
button.v39-orb {
  transition: transform .12s ease, filter .12s ease;
}

button.v39-orb:hover {
  filter: brightness(1.12) drop-shadow(0 4px 8px rgba(0,0,0,.42));
}

/* Chat: true channels, clear connection state, readable scrollback. */
.osrs-chatbox.v26-chatbox.v43-chat {
  left: 12px !important;
  bottom: 12px !important;
  width: min(540px, calc(100vw - 380px)) !important;
  max-height: none !important;
  border: 2px solid #21170d !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, rgba(220, 211, 182, .98), rgba(190, 179, 145, .98)) !important;
  box-shadow: 0 15px 38px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,251,225,.46) !important;
  backdrop-filter: none !important;
  transition: width .16s ease, opacity .16s ease;
}

.v102-chat-header {
  order: -3;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px 5px 9px;
  border-bottom: 1px solid rgba(62, 46, 25, .56);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(180deg, #4b3b27, #2b2116);
}

.v102-chat-heading,
.v102-chat-status {
  display: flex;
  align-items: center;
  min-width: 0;
}

.v102-chat-heading { gap: 7px; }
.v102-chat-status { gap: 7px; }

.v102-chat-heading strong {
  color: #f4d680;
  font: 800 12px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .025em;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}

.v102-chat-heading small,
.v102-chat-status > span {
  color: #bfae8d;
  font: 750 9.5px/1 system-ui, sans-serif;
  white-space: nowrap;
}

.v102-chat-heading small::before {
  content: "•";
  margin-right: 7px;
  color: #78684f;
}

.v102-chat-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border: 1px solid rgba(0,0,0,.62);
  border-radius: 50%;
  background: #967545;
  box-shadow: 0 0 0 2px rgba(255,255,255,.035);
}

.v102-chat-dot.is-online {
  background: #70c568;
  box-shadow: 0 0 6px rgba(112,197,104,.55);
}

.v102-chat-dot.is-offline { background: #bc6858; }

.v102-chat-dot.is-connecting {
  background: #d5a84c;
  animation: v102-chat-pulse 1.25s ease-in-out infinite;
}

@keyframes v102-chat-pulse {
  50% { opacity: .42; box-shadow: 0 0 8px rgba(213,168,76,.6); }
}

#chat-collapse {
  width: 23px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #171009;
  border-radius: 3px;
  background: linear-gradient(180deg, #6a573d, #382b1b);
  color: #f1d386;
  font: 900 15px/1 system-ui, sans-serif;
  cursor: pointer;
}

#chat-collapse:hover { filter: brightness(1.15); }

.v43-chat .v43-chat__scroll {
  order: -2;
  height: 142px !important;
  padding: 0 !important;
  background: rgba(239, 231, 202, .30) !important;
  scrollbar-color: #77664e rgba(91,75,49,.14);
}

.osrs-chatbox .log-list,
.v43-chat .v43-chat__scroll .log-list {
  min-height: 100% !important;
  max-height: none !important;
  padding: 7px 10px 8px !important;
  gap: 2px !important;
  background: transparent !important;
  overflow: visible !important;
}

.osrs-chatbox .log-list li,
.v43-chat .log-list li {
  min-height: 17px;
  padding: 1px 3px !important;
  border-radius: 2px;
  color: #241a10 !important;
  font-size: 12.5px !important;
  font-weight: 620 !important;
  line-height: 1.32 !important;
  overflow-wrap: break-word !important;
}

.v43-chat .log-list li:hover {
  background: rgba(71, 53, 29, .055);
}

.log-list li.v102-chat__public {
  color: #213e7e !important;
  font-weight: 700 !important;
}

.chat-input-shell.v54-chat-input-shell {
  order: -1;
  min-height: 34px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 9px !important;
  border-top: 1px solid rgba(81, 62, 35, .42) !important;
  background: rgba(231, 220, 188, .88) !important;
}

.v54-chat-input-name {
  color: #253e75 !important;
  font-size: 12px;
}

.v54-chat-input {
  min-width: 0;
  height: 23px;
  padding: 1px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 3px;
  background: transparent !important;
  color: #21170e !important;
  font-size: 12.5px !important;
}

.v54-chat-input:focus {
  border-color: rgba(67, 87, 137, .34) !important;
  background: rgba(255,255,255,.17) !important;
  outline: none !important;
  box-shadow: none !important;
}

.v43-chat .chat-tabs.v43-chat__tabs {
  order: 0;
  gap: 4px !important;
  padding: 5px !important;
  border-top: 2px solid #21170d !important;
  background: linear-gradient(180deg, #3f3222, #251c12) !important;
}

.v43-chat .chat-tabs button {
  height: 25px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #685944, #423729) !important;
  color: #d9caab !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}

.v43-chat .chat-tabs button:disabled {
  display: none !important;
}

.v43-chat .chat-tabs button.is-active {
  border-color: #8e713c !important;
  background: linear-gradient(180deg, #937845, #584522) !important;
  color: #fff0bd !important;
  box-shadow: inset 0 0 0 1px rgba(255,232,158,.20), 0 0 7px rgba(222,183,90,.15) !important;
}

.osrs-chatbox.is-collapsed {
  width: 260px !important;
}

.osrs-chatbox.is-collapsed .v43-chat__scroll,
.osrs-chatbox.is-collapsed .chat-input-shell,
.osrs-chatbox.is-collapsed .chat-tabs {
  display: none !important;
}

.osrs-chatbox.is-collapsed .v102-chat-heading small {
  display: none;
}

/* Quest helper reads as a compact task, never a second window. */
.v82-quest-helper {
  top: 54px;
  left: 14px;
  max-width: min(310px, calc(100vw - 380px));
  padding: 9px 11px 10px;
  border: 1px solid rgba(225, 184, 91, .55);
  border-left: 3px solid #e3b84f;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(36, 27, 17, .94), rgba(17, 12, 8, .94));
  box-shadow: 0 9px 24px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.045);
}

.v82-quest-helper__title {
  margin-bottom: 4px;
  color: #f0c75e;
  font-size: 10.5px;
  text-transform: uppercase;
}

.v82-quest-helper__step {
  color: #eee0bb;
  font-size: 12px;
  line-height: 1.42;
}

/* Context actions and hover information share one high-contrast language. */
.context-menu {
  min-width: 205px !important;
  overflow: hidden;
  border: 2px solid #120c07 !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #40311f, #21170e) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.62), inset 0 0 0 1px rgba(231,196,117,.10) !important;
}

.context-menu__title {
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(225, 190, 113, .20) !important;
  background: rgba(0,0,0,.17) !important;
  color: var(--v102-gold) !important;
}

.context-menu button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 2px !important;
  color: #eadcba !important;
  font-size: 12px !important;
}

.context-menu button:hover {
  background: rgba(236, 196, 106, .13) !important;
  filter: none !important;
}

.action-tooltip,
.v85-hud-hover-tooltip,
.v93-item-tooltip {
  border-color: rgba(225, 190, 113, .48) !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, rgba(50, 38, 24, .98), rgba(18, 13, 8, .99)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,240,194,.055) !important;
}

.v85-hud-hover-tooltip {
  max-width: 250px;
  padding: 8px 10px;
}

.v85-hud-hover-tooltip span {
  font-size: 11px;
  line-height: 1.3;
}

.v93-item-tooltip {
  width: 240px;
  padding: 8px 9px 9px;
  line-height: 1.2;
}

/* Desktop windows use a common, calm frame instead of unrelated outlines. */
.v33-bank-window,
.v41-shop,
.v71-loot,
.v78-trade,
.v79-clog__panel,
.v92-equipment-stats {
  border-color: #171009 !important;
  border-radius: 7px !important;
  box-shadow: var(--v102-shadow), inset 0 0 0 1px rgba(232, 196, 116, .12) !important;
}

.v92-equipment-stats__body {
  grid-template-columns: 205px minmax(0, 1fr) !important;
}

.v33-bank-header,
.v41-shop__header,
.v71-loot__header,
.v78-trade__header,
.v79-clog__header {
  min-height: 46px;
  border-bottom-color: rgba(229, 190, 102, .23) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 44%),
    linear-gradient(180deg, #4b3821, #291c10) !important;
}

.v33-bank-header > button,
.v41-shop__header > button,
.v71-loot__header > button,
.v78-trade__header > button,
.v79-clog__header > button {
  border-radius: 4px !important;
  color: #ead5a5 !important;
}

/* Responsive: preserve the game view and keep every control reachable. */
@media (max-height: 840px) and (min-width: 761px) {
  .osrs-hud.osrs-hud--v26 {
    top: 6px !important;
  }

  .v26-panel-shell {
    min-height: 382px !important;
  }

  .v26-tab-panel {
    min-height: 364px !important;
    height: 364px !important;
  }

  .v43-chat .v43-chat__scroll {
    height: 112px !important;
  }
}

@media (max-width: 980px) {
  .osrs-chatbox.v26-chatbox.v43-chat {
    width: min(500px, calc(100vw - 340px)) !important;
  }

  .v82-quest-helper {
    max-width: calc(100vw - 350px);
  }
}

@media (max-width: 760px) {
  .osrs-hud.osrs-hud--v26 {
    right: 6px !important;
    width: min(300px, calc(100vw - 12px)) !important;
  }

  .v26-side-tabs.v26-side-tabs--top,
  .v26-side-tabs.v26-side-tabs--bottom,
  .v26-panel-shell {
    width: 100% !important;
  }

  .osrs-chatbox.v26-chatbox.v43-chat {
    left: 6px !important;
    bottom: 6px !important;
    width: calc(100vw - 12px) !important;
  }

  .osrs-chatbox.is-collapsed {
    width: min(260px, calc(100vw - 12px)) !important;
  }

  .v43-chat .v43-chat__scroll {
    height: 105px !important;
  }

  .v102-chat-heading small,
  .v102-chat-status > span {
    display: none;
  }

  .v82-quest-helper {
    top: 46px;
    left: 8px;
    max-width: min(270px, calc(100vw - 16px));
  }
}

@media (max-width: 520px) {
  .osrs-hud.osrs-hud--v26 {
    top: 6px !important;
    transform: scale(.92);
    transform-origin: top right;
  }

  .v102-chat-header { min-height: 32px; }
  .v43-chat .chat-tabs button { font-size: 9px !important; }
}

/* ===== V82.1: OSRS settings window + launcher + profile restyle ========== */

/* ---- settings window (image-referenced OSRS Settings interface) -------- */
.v82s-window {
  position: absolute; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 5, 3, 0.45);
}
.v82s-window[hidden] { display: none; }
.v82s-frame {
  width: min(560px, calc(100% - 36px));
  height: min(388px, calc(100% - 60px));
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #4b4033, #3a3126 55%, #332b21);
  border: 2px solid #14100a;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px #6d5f4b,
    inset 0 0 0 3px #241d14,
    0 22px 60px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
.v82s-title {
  display: flex; align-items: center; justify-content: center;
  position: relative; height: 34px; flex: 0 0 auto;
  background: linear-gradient(180deg, #2f2719, #241d12);
  border-bottom: 1px solid #14100a;
  box-shadow: inset 0 -1px 0 #574a37;
}
.v82s-title span {
  font-size: 14.5px; font-weight: 800; letter-spacing: 0.04em;
  color: #ff981f; text-shadow: 1px 1px 0 #000;
}
.v82s-close {
  position: absolute; right: 7px; top: 6px;
  width: 24px; height: 22px;
  appearance: none; cursor: pointer;
  background: linear-gradient(180deg, #6b5c48, #453a2c);
  color: #f4e6c2; border: 1px solid #17120b; border-radius: 3px;
  font-size: 10px; font-family: inherit;
}
.v82s-close:hover { filter: brightness(1.2); }
.v82s-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; flex: 0 0 auto;
  border-bottom: 1px solid #14100a;
  box-shadow: inset 0 -1px 0 rgba(109, 95, 75, 0.6);
}
.v82s-search label { font-size: 12px; font-weight: 800; color: #ff981f; text-shadow: 1px 1px 0 #000; }
.v82s-search input {
  flex: 1; min-width: 0;
  background: #221c12; color: #f2e7c9;
  border: 1px solid #14100a; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(109, 95, 75, 0.35);
  font-family: inherit; font-size: 12.5px;
  padding: 5px 9px; outline: none;
}
.v82s-search input:focus { box-shadow: inset 0 1px 3px rgba(0,0,0,0.7), 0 0 0 2px rgba(255, 152, 31, 0.25); }
.v82s-body { display: flex; flex: 1; min-height: 0; }
.v82s-rail {
  flex: 0 0 108px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.16);
  border-right: 1px solid #14100a;
  box-shadow: inset -1px 0 0 rgba(109, 95, 75, 0.45);
  overflow-y: auto;
}
.v82s-cat {
  appearance: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: #e8d9b0; text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #55483a, #3d3327);
  border: 1px solid #17120b; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.18);
  padding: 6px 4px; text-align: center;
}
.v82s-cat:hover { filter: brightness(1.12); }
.v82s-cat.is-active {
  background: linear-gradient(180deg, #2b2318, #221b11);
  color: #ff981f;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.v82s-content { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 12px 14px; outline: none; }
.v82s-section h3 {
  text-align: center; margin: 8px 0 4px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  color: #f5ecd7; text-shadow: 1px 1px 0 #000;
}
.v82s-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px; border-radius: 3px;
}
.v82s-row:hover { background: rgba(255, 235, 190, 0.05); }
.v82s-row__label { font-size: 12.5px; font-weight: 700; color: #ff981f; text-shadow: 1px 1px 0 #000; }
.v82s-value { font-size: 12.5px; font-weight: 800; color: #f2e7c9; text-shadow: 1px 1px 0 #000; }
.v82s-check {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 21px; height: 21px;
  background: #221c12;
  border: 1px solid #14100a; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(109, 95, 75, 0.4);
  position: relative;
}
.v82s-check:hover { filter: brightness(1.25); }
.v82s-check.is-on::after {
  content: "";
  position: absolute; left: 4px; top: 2px;
  width: 8px; height: 12px;
  border: solid #35d435;
  border-width: 0 3px 3px 0;
  transform: rotate(40deg);
  filter: drop-shadow(0 1px 0 #0a3d0a);
}
.v82s-btn {
  appearance: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 800;
  color: #f4e6c2; text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #6b5c48, #453a2c);
  border: 1px solid #17120b; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.22);
  padding: 5px 14px;
}
.v82s-btn:hover { filter: brightness(1.15); }
.v82s-btn.is-danger { background: linear-gradient(180deg, #8c3226, #5c1d15); }
.v82s-empty { text-align: center; color: #b7a988; font-size: 12.5px; padding: 26px 8px; }

/* ---- settings tab launcher ---------------------------------------------- */
.v82s-launcher { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; align-items: center; text-align: center; }
.v82s-launcher__gear {
  width: 44px; height: 44px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #221c12 0 26%, transparent 27%),
    conic-gradient(#6b5c48 0deg 24deg, #453a2c 24deg 45deg, #6b5c48 45deg 69deg, #453a2c 69deg 90deg,
      #6b5c48 90deg 114deg, #453a2c 114deg 135deg, #6b5c48 135deg 159deg, #453a2c 159deg 180deg,
      #6b5c48 180deg 204deg, #453a2c 204deg 225deg, #6b5c48 225deg 249deg, #453a2c 249deg 270deg,
      #6b5c48 270deg 294deg, #453a2c 294deg 315deg, #6b5c48 315deg 339deg, #453a2c 339deg 360deg);
  border: 2px solid #17120b;
  box-shadow: inset 0 1px 0 rgba(255,235,190,0.2), 0 3px 8px rgba(0,0,0,0.5);
}
.v82s-launcher__lead { font-size: 12px; color: #cbbd9c; line-height: 1.45; margin: 0; }
.v82s-launcher__open {
  appearance: none; cursor: pointer; width: 100%;
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: 0.03em;
  color: #221703; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
  background: linear-gradient(180deg, #f2ca6a, #cf9c33 60%, #b98829);
  border: 1px solid #17120b; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4);
  padding: 10px 12px;
}
.v82s-launcher__open:hover { filter: brightness(1.07); }
.v82s-quick {
  appearance: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 12px; font-weight: 700;
  color: #ff981f; text-shadow: 1px 1px 0 #000;
  background: linear-gradient(180deg, #483d30, #372e22);
  border: 1px solid #17120b; border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.14);
  padding: 7px 10px; text-align: left;
}
.v82s-launcher__quick { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.v82s-quick__check {
  width: 17px; height: 17px; flex: 0 0 auto; position: relative;
  background: #221c12; border: 1px solid #14100a; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75);
}
.v82s-quick[aria-checked="true"] .v82s-quick__check::after {
  content: ""; position: absolute; left: 3px; top: 1px;
  width: 6px; height: 10px;
  border: solid #35d435; border-width: 0 2.5px 2.5px 0;
  transform: rotate(40deg);
}
.v82s-launcher__hint { font-size: 11px; color: #93865f; line-height: 1.5; margin: 2px 0 0; }

/* ---- profile tab restyle (stone + parchment, OSRS labels) ---------------- */
.v86-profile-tabs {
  gap: 4px !important; padding: 5px 6px !important;
  background: linear-gradient(180deg, #2f2719, #241d12) !important;
  border: 1px solid #14100a !important; border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(109, 95, 75, 0.5) !important;
}
.v86-profile-tabs button {
  background: linear-gradient(180deg, #55483a, #3d3327) !important;
  border: 1px solid #17120b !important; border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.16) !important;
}
.v86-profile-tabs button.is-active {
  background: linear-gradient(180deg, #2b2318, #221b11) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}
.osrs-summary__name strong {
  display: block; text-align: center;
  font-size: 14.5px; font-weight: 800; letter-spacing: 0.03em;
  color: #ff981f !important; text-shadow: 1px 1px 0 #000;
  padding: 6px 4px;
  background: linear-gradient(180deg, #2f2719, #241d12);
  border: 1px solid #14100a; border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(109, 95, 75, 0.5);
}
.osrs-stat {
  background: linear-gradient(180deg, #483d30, #372e22) !important;
  border: 1px solid #17120b !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.12) !important;
  padding: 6px 9px !important;
}
.osrs-stat .osrs-stat__head { color: #ff981f !important; text-shadow: 1px 1px 0 #000; font-weight: 700 !important; }
.osrs-stat .osrs-stat__ic { fill: #d8c69a !important; }
.osrs-stat strong { color: #f7f3b6 !important; text-shadow: 1px 1px 0 #000; }
.v86-panel-title {
  background: linear-gradient(180deg, #2f2719, #241d12) !important;
  border: 1px solid #14100a !important; border-radius: 4px 4px 0 0 !important;
  box-shadow: inset 0 1px 0 rgba(109, 95, 75, 0.5) !important;
}
.v86-panel-title strong { color: #ff981f !important; text-shadow: 1px 1px 0 #000; }
.v86-panel-title span { color: #cbbd9c !important; }

/* ===== V83.1: keybind buttons in the Settings window ===================== */
.v82s-keybind {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  min-width: 74px;
  font-family: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em;
  color: #f7f3b6; text-shadow: 1px 1px 0 #000;
  background: #221c12;
  border: 1px solid #14100a; border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(109, 95, 75, 0.4);
  padding: 5px 10px; text-align: center;
}
.v82s-keybind:hover { filter: brightness(1.25); }
.v82s-keybind.is-none { color: #93865f; }
.v82s-keybind.is-listening {
  color: #35d435;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.75), 0 0 0 2px rgba(53, 212, 53, 0.35);
  animation: v83KeybindPulse 0.9s ease-in-out infinite alternate;
}
@keyframes v83KeybindPulse { from { filter: brightness(1); } to { filter: brightness(1.45); } }

/* ===== V84: minimap controls + unified right-side interface

/* Compact controls sit on the carved minimap rim instead of covering POIs. */
.v84-minimap-zoom {
  position: absolute;
  right: 8px;
  bottom: 31px;
  z-index: 6;
  display: grid;
  width: 27px;
  overflow: hidden;
  border: 2px solid #171009;
  border-radius: 4px;
  background: #24190f;
  box-shadow:
    inset 0 0 0 1px rgba(235, 198, 112, .12),
    0 4px 10px rgba(0, 0, 0, .42);
}

.v84-minimap-zoom button {
  appearance: none;
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #171009;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #635034, #322416);
  color: #f3d987;
  font: 900 17px/21px Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.v84-minimap-zoom button:last-child { border-bottom: 0; }
.v84-minimap-zoom button:hover:not(:disabled) { background: linear-gradient(180deg, #80663b, #422d17); }
.v84-minimap-zoom button:active:not(:disabled) { background: linear-gradient(180deg, #342416, #5e4728); }
.v84-minimap-zoom button:disabled {
  opacity: .48 !important;
  filter: grayscale(.35) !important;
  cursor: default !important;
}
.v84-minimap-zoom.is-locked { box-shadow: inset 0 0 0 1px rgba(235, 198, 112, .07), 0 3px 8px rgba(0,0,0,.34); }

/* One restrained rectangular shell: the tab rows and panel now share a
   single border, radius and shadow instead of looking like unrelated pieces. */
.v84-side-interface {
  width: 320px;
  margin: 0;
  overflow: hidden;
  border: 2px solid #120c07;
  border-radius: 4px;
  background: linear-gradient(180deg, #45341f, #24190f);
  box-shadow:
    inset 0 0 0 1px rgba(235, 198, 112, .09),
    0 9px 22px rgba(0, 0, 0, .31);
}

.v84-side-interface > .v26-side-tabs.v26-side-tabs--top,
.v84-side-interface > .v26-side-tabs.v26-side-tabs--bottom,
.v84-side-interface > .v26-panel-shell {
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.v84-side-interface > .v26-side-tabs.v26-side-tabs--top,
.v84-side-interface > .v26-side-tabs.v26-side-tabs--bottom {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 38%),
    linear-gradient(180deg, #49381f, #281c10) !important;
}

.v84-side-interface > .v26-side-tabs.v26-side-tabs--top {
  border-bottom: 1px solid #120c07 !important;
}

.v84-side-interface > .v26-side-tabs.v26-side-tabs--bottom {
  border-top: 1px solid #120c07 !important;
}

.v84-side-interface > .v26-panel-shell {
  border-top: 1px solid rgba(235, 198, 112, .05) !important;
  border-bottom: 1px solid rgba(235, 198, 112, .05) !important;
  background:
    radial-gradient(circle at 50% 0, rgba(225, 183, 93, .065), transparent 36%),
    linear-gradient(180deg, #392a19, #24190f) !important;
}

.v84-side-interface .v26-side-tabs button,
.v84-side-interface .v26-tab-panel {
  border-radius: 2px !important;
}

.v84-side-interface .v26-side-tabs button {
  box-shadow: inset 0 1px rgba(255,255,255,.065), inset 0 -1px rgba(0,0,0,.38) !important;
}

@media (max-width: 760px) {
  .v84-side-interface { width: 100% !important; }
}


/* V86: OSRS-style player names and relative combat-level colours. */
.context-menu button .context-menu__player-name {
  color: #f4f0e2 !important;
}

.context-menu button .context-menu__combat-level[data-level-tone="much-lower"] {
  color: #00ff00 !important;
}

.context-menu button .context-menu__combat-level[data-level-tone="lower"] {
  color: #80ff00 !important;
}

.context-menu button .context-menu__combat-level[data-level-tone="even"] {
  color: #ffff00 !important;
}

.context-menu button .context-menu__combat-level[data-level-tone="higher"] {
  color: #ff981f !important;
}

.context-menu button .context-menu__combat-level[data-level-tone="much-higher"] {
  color: #ff3030 !important;
}

/* ============================================================
   V87: Mira Vell item-by-item market ledger.
   ============================================================ */
.v87-market {
  width: min(650px, calc(100vw - 34px));
}

.v87-market__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v87-market__item {
  min-height: 74px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name price"
    "icon unit price";
}

.v87-market__item.is-focused {
  border-color: #f2ca61;
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 145, 0.38),
    0 0 12px rgba(242, 202, 97, 0.16);
}

.v87-market__icon-wrap {
  grid-area: icon;
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(164, 127, 72, 0.38);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
}

.v87-market__icon-wrap img {
  width: 42px;
  height: 42px;
}

.v87-market__icon-wrap b {
  position: absolute;
  right: 2px;
  bottom: 1px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(17, 12, 7, 0.88);
  color: #fff0a8;
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

.v87-market__item .v41-shop__name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v87-market__unit {
  grid-area: unit;
  align-self: start;
  color: #bca97c;
  font-size: 0.67rem;
  font-weight: 700;
}

.v87-market__item .v41-shop__price {
  grid-area: price;
  align-self: center;
  max-width: 92px;
  text-align: right;
  line-height: 1.25;
}

.v87-market__footer {
  flex-wrap: wrap;
}

.v87-market__sell-all {
  margin-left: auto;
  padding: 7px 11px;
  border: 2px solid rgba(0, 0, 0, 0.74);
  border-radius: 5px;
  background: linear-gradient(180deg, #9a6d32, #4b2b16);
  color: #ffe39a;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  text-shadow: 0 1px 0 #000;
}

.v87-market__sell-all:hover {
  filter: brightness(1.12);
}

.v87-market__empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 28px 22px;
  border: 2px dashed rgba(155, 119, 66, 0.48);
  border-radius: 6px;
  background: rgba(12, 9, 6, 0.42);
  text-align: center;
}

.v87-market__empty strong {
  color: #f2cf72;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.v87-market__empty span {
  color: #bfae82;
  font-size: 0.74rem;
  line-height: 1.45;
}

@media (max-width: 610px) {
  .v87-market__grid {
    grid-template-columns: 1fr;
  }

  .v87-market__footer {
    justify-content: flex-start;
  }

  .v87-market__sell-all {
    width: 100%;
    margin-left: 0;
  }
}

/* ---- V84: Grand Exchange window --------------------------------------- */

.v84-exchange {
  width: min(600px, calc(100vw - 34px));
}

.v84-exchange__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.v84-exchange__tabs {
  display: flex;
  gap: 6px;
}

.v84-exchange__tabs button {
  min-width: 84px;
  padding: 7px 14px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  background: linear-gradient(180deg, #4c3520, #241609);
  color: #d9c184;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.v84-exchange__tabs button.is-active {
  background: linear-gradient(180deg, #8e6230, #4b2f16);
  color: #ffe28f;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, 0.35);
}

.v84-exchange__qty {
  display: flex;
  align-items: center;
  gap: 5px;
}

.v84-exchange__qty span {
  color: #b9a678;
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 2px;
}

.v84-exchange__qty button {
  min-width: 36px;
  padding: 6px 8px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  border-radius: 5px;
  background: linear-gradient(180deg, #3c2b18, #1d1409);
  color: #d9c184;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.v84-exchange__qty button.is-active {
  background: linear-gradient(180deg, #9a6c34, #513216);
  color: #ffe28f;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, 0.4);
}

.v84-exchange__search input {
  width: 100%;
  padding: 9px 12px;
  border: 2px solid rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  background: rgba(14, 10, 6, 0.85);
  color: #f2df9e;
  font-size: 0.82rem;
  outline: none;
}

.v84-exchange__search input:focus {
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, 0.35);
}

.v84-exchange__search input::placeholder {
  color: #8a7a58;
}

.v84-exchange__grid {
  grid-template-columns: repeat(3, 1fr);
  max-height: min(46vh, 430px);
  overflow-y: auto;
  padding-right: 4px;
}

@media (max-width: 640px) {
  .v84-exchange__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* V102 — OSRS-inspired logical world switcher. The account tab stays compact;
   selecting World Switcher swaps the card for a dense, readable world list. */
.v102-world-account-shell {
  min-height: 100%;
  color: #ead8aa;
}

.v102-world-account-shell .v97-account-panel {
  gap: 9px;
  padding: 14px 18px 12px;
}

.v102-world-account-shell .v97-account-crest {
  width: 56px;
  height: 56px;
}

.v102-world-account-shell .v97-account-crest i {
  inset: 13px;
}

.v102-current-world {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #24170c;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(105, 82, 47, .64), rgba(48, 35, 20, .86)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px);
  box-shadow: inset 0 1px 0 rgba(255, 232, 165, .10), 0 2px 7px rgba(0,0,0,.25);
}

.v102-current-world span,
.v102-current-world strong,
.v102-current-world small {
  display: block;
}

.v102-current-world span {
  color: #b6a176;
  font: 800 9px/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v102-current-world strong {
  margin-top: 2px;
  color: #ffdf72;
  font: 900 17px/1.1 Georgia, serif;
  text-shadow: 0 1px 0 #1a0f07;
}

.v102-current-world small {
  margin-top: 3px;
  color: #d3c29b;
  font: 700 10px/1.2 system-ui, sans-serif;
}

.v102-world-account-shell .v102-world-switcher-open {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #96753f, #4b3219 62%, #342313);
  color: #ffe59a;
  box-shadow: inset 0 1px 0 rgba(255,235,174,.18), 0 2px 5px rgba(0,0,0,.32);
}

.v102-world-switcher-icon {
  position: relative;
  width: 17px;
  height: 17px;
  border: 2px solid #171009;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #80d6d1 0 18%, #3b8f8f 19% 50%, #173f42 51%);
  box-shadow: inset 0 0 0 1px rgba(219,255,242,.18);
}

.v102-world-switcher-icon::before,
.v102-world-switcher-icon::after {
  content: "";
  position: absolute;
  background: rgba(229,255,245,.52);
}

.v102-world-switcher-icon::before {
  left: 7px;
  top: 1px;
  width: 1px;
  height: 11px;
}

.v102-world-switcher-icon::after {
  left: 2px;
  top: 6px;
  width: 11px;
  height: 1px;
}

.v102-world-account-home[hidden],
.v102-world-switcher[hidden] {
  display: none !important;
}

.v102-world-switcher {
  min-height: 100%;
  padding: 7px 8px 10px;
  background:
    radial-gradient(circle at 50% -12%, rgba(179, 134, 62, .18), transparent 46%),
    linear-gradient(180deg, rgba(75,56,33,.32), rgba(31,22,13,.12));
}

.v102-world-switcher__header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  min-height: 44px;
  border: 2px solid #171009;
  border-radius: 4px;
  background: linear-gradient(180deg, #6e5430, #382716);
  box-shadow: inset 0 1px 0 rgba(255,235,174,.13), 0 3px 8px rgba(0,0,0,.30);
}

.v102-world-switcher__header > button {
  width: 26px;
  height: 27px;
  margin: auto;
  border: 1px solid #1a1008;
  border-radius: 3px;
  background: linear-gradient(180deg, #947141, #4c341d);
  color: #ffe191;
  font: 900 17px/1 Georgia, serif;
  cursor: pointer;
}

.v102-world-switcher__header > button:hover {
  filter: brightness(1.15);
}

.v102-world-switcher__header > div {
  text-align: center;
}

.v102-world-switcher__header span {
  color: #d6c49a;
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.v102-world-switcher__header strong {
  margin-left: 5px;
  color: #ffe060;
  font: 900 16px/1 Georgia, serif;
}

.v102-world-switcher__intro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 6px;
  padding: 4px 5px 7px;
  border-bottom: 1px solid rgba(225, 192, 119, .18);
}

.v102-world-star {
  color: #f6c84f;
  font-size: 20px;
  text-shadow: 0 1px 0 #1b1006, 0 0 8px rgba(246,200,79,.28);
}

.v102-world-switcher__intro strong,
.v102-world-switcher__intro small {
  display: block;
}

.v102-world-switcher__intro strong {
  color: #f0d993;
  font: 900 13px/1.1 Georgia, serif;
}

.v102-world-switcher__intro small {
  margin-top: 2px;
  color: #ad9d7b;
  font: 700 9px/1.2 system-ui, sans-serif;
}

.v102-world-switcher__list {
  display: grid;
  gap: 5px;
  max-height: 245px;
  overflow-y: auto;
  padding: 2px 3px 4px;
  scrollbar-width: thin;
  scrollbar-color: #94713d #24170d;
}

.v102-world-row {
  display: grid;
  grid-template-columns: 21px 30px minmax(0, 1fr) 28px 58px;
  align-items: center;
  min-height: 47px;
  padding: 4px 6px;
  border: 2px solid #1b1109;
  border-radius: 4px;
  background: linear-gradient(180deg, #6f5937, #3f2e1c);
  color: #efddb0;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,239,184,.09), 0 2px 5px rgba(0,0,0,.24);
  cursor: pointer;
}

.v102-world-row:not(:disabled):hover {
  background: linear-gradient(180deg, #8d7042, #4e3821);
  transform: translateY(-1px);
}

.v102-world-row.is-current {
  border-color: #78612e;
  background: linear-gradient(180deg, #685f38, #3e3921);
  box-shadow: inset 0 0 0 1px rgba(255,218,92,.13), 0 2px 5px rgba(0,0,0,.24);
}

.v102-world-row.is-recommended:not(.is-current) {
  border-color: #6d7134;
}

.v102-world-row.is-full {
  filter: saturate(.55);
  opacity: .72;
}

.v102-world-row:disabled {
  cursor: default;
}

.v102-world-row__star {
  color: #f1c546;
  font-size: 15px;
  text-align: center;
  text-shadow: 0 1px 0 #1a0f07;
}

.v102-world-row__number {
  color: #ffe164;
  font: 900 15px/1 Georgia, serif;
  text-shadow: 0 1px 0 #1a0f07;
}

.v102-world-row__details {
  min-width: 0;
}

.v102-world-row__details b,
.v102-world-row__details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v102-world-row__details b {
  color: #efe1bd;
  font: 850 10px/1.2 system-ui, sans-serif;
}

.v102-world-row__details small {
  margin-top: 2px;
  color: #b8a57d;
  font: 700 9px/1.1 system-ui, sans-serif;
}

.v102-world-row__region {
  justify-self: center;
  min-width: 22px;
  padding: 2px 3px;
  border: 1px solid rgba(18,10,5,.82);
  border-radius: 2px;
  background: #284650;
  color: #c9eef1;
  font: 900 8px/1 system-ui, sans-serif;
  text-align: center;
}

.v102-world-row__badge {
  justify-self: end;
  color: #dac58e;
  font: 800 8px/1.15 system-ui, sans-serif;
  text-align: right;
  text-transform: uppercase;
}

.v102-world-row.is-current .v102-world-row__badge {
  color: #f5d55d;
}

.v102-world-row.is-recommended:not(.is-current) .v102-world-row__badge {
  color: #b8d77e;
}

.v102-world-switcher__empty {
  padding: 24px 12px;
  color: #b9a77f;
  font: 750 11px/1.4 system-ui, sans-serif;
  text-align: center;
}

.v102-world-switcher__status {
  min-height: 28px;
  margin: 6px 2px 0;
  color: #a99979;
  font: 700 9px/1.35 system-ui, sans-serif;
  text-align: center;
}

.v102-world-switcher__status[data-kind="warn"] {
  color: #efaa83;
}

.v102-world-switcher__status[data-kind="switching"] {
  color: #e8d166;
}

/* V103: compact OSRS-style milestone feedback ------------------------- */
.v103-collection-unlock {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 45;
  width: min(310px, calc(100vw - 420px));
  opacity: 0;
  transform: translate(-50%, -10px) scale(.975);
  pointer-events: none;
  transition: opacity .16s ease-out, transform .18s ease-out;
}

.v103-collection-unlock[hidden] {
  display: none !important;
}

.v103-collection-unlock.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.v103-collection-unlock.is-leaving {
  opacity: 0;
  transform: translate(-50%, -5px) scale(.985);
}

.v103-collection-unlock__frame {
  display: grid;
  overflow: hidden;
  border: 3px solid #17120d;
  border-radius: 3px;
  background: #30291f;
  box-shadow:
    0 0 0 2px #796a52,
    0 0 0 3px #2a2118,
    0 8px 20px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(226,199,143,.12);
  color: #f5eee0;
  text-align: center;
  text-shadow: 1px 1px 0 #0d0906;
}

.v103-collection-unlock__frame strong {
  padding: 8px 12px 7px;
  border-bottom: 3px solid #17120d;
  background: linear-gradient(180deg, #44382b, #332a21);
  color: #f0a63a;
  font: 900 22px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
  text-shadow: 1px 2px 0 #160d07;
}

.v103-collection-unlock__frame span {
  padding-top: 12px;
  color: #e7a34b;
  font: 800 14px/1.1 Georgia, "Times New Roman", serif;
}

.v103-collection-unlock__frame b {
  min-width: 0;
  overflow: hidden;
  padding: 7px 16px 14px;
  color: #fffdf5;
  font: 800 17px/1.15 Georgia, "Times New Roman", serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep milestone notices below the centered boss health bar. */
#boss-hp-status:not([hidden]) ~ .v103-collection-unlock {
  top: 96px;
}

.log-list li.v43-chat__levelup {
  color: #553c96 !important;
  font-weight: 850;
}

@media (max-width: 1050px) {
  .v103-collection-unlock {
    top: 78px;
    width: min(300px, calc(100vw - 24px));
  }

  #boss-hp-status:not([hidden]) ~ .v103-collection-unlock {
    top: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v103-collection-unlock {
    transition: opacity .08s linear;
  }
}

/* ---- V88: OSRS-style login screen -------------------------------------- */

.v88-login {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  background: #14100c;
  font-family: Georgia, "Times New Roman", serif;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.v88-login[hidden] { display: none; }

.v88-login.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.v88-login__backdrop { position: absolute; inset: 0; }

/* Chunky voxel brickwork out of layered gradients. */
.v88-login__bricks {
  position: absolute;
  inset: 0;
  background-color: #2b241d;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 46px, rgba(0, 0, 0, 0.5) 47px, rgba(255, 255, 255, 0.045) 48px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 2px, rgba(255, 255, 255, 0.035) 3px, transparent 4px, transparent 92px),
    linear-gradient(90deg, transparent 44px, rgba(0, 0, 0, 0.32) 46px, rgba(255, 255, 255, 0.03) 47px, transparent 48px),
    linear-gradient(160deg, #322a21 0%, #272019 42%, #1c1712 100%);
  background-size: auto 48px, 96px 96px, 96px 48px, 100% 100%;
}

.v88-login__glow {
  position: absolute;
  bottom: 6vh;
  width: 46vmin;
  height: 46vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 61, 0.24), rgba(255, 122, 30, 0.08) 45%, transparent 70%);
  animation: v88-glow 2.6s ease-in-out infinite;
  pointer-events: none;
}

.v88-login__glow--left { left: -8vmin; }
.v88-login__glow--right { right: -8vmin; animation-delay: -1.3s; }

@keyframes v88-glow {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

.v88-login__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 30%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.8) 100%);
}

/* Voxel braziers: stacked blocks, stepped flame animated with steps(). */
.v88-brazier {
  position: absolute;
  bottom: 10vh;
  width: 120px;
  display: grid;
  justify-items: center;
}

.v88-brazier--left { left: clamp(16px, 12vw, 220px); }
.v88-brazier--right { right: clamp(16px, 12vw, 220px); }

.v88-brazier__bowl {
  width: 104px;
  height: 30px;
  background: linear-gradient(180deg, #6a6e75, #3f4247);
  border: 3px solid #17191c;
  border-radius: 4px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.09);
}

.v88-brazier__coals {
  width: 84px;
  height: 12px;
  margin-bottom: -8px;
  z-index: 2;
  background: linear-gradient(90deg, #ff8a3d 0 14px, #b5481e 14px 28px, #ff6a2e 28px 44px, #8a2f0c 44px 58px, #ff8a3d 58px 84px);
  border: 2px solid #1c0f08;
  border-radius: 3px;
}

.v88-brazier__stem {
  width: 26px;
  height: 74px;
  background: linear-gradient(90deg, #55585e, #33363b);
  border: 3px solid #17191c;
}

.v88-brazier__base {
  width: 78px;
  height: 22px;
  background: linear-gradient(180deg, #55585e, #2c2f33);
  border: 3px solid #17191c;
  border-radius: 3px;
}

.v88-brazier__flame {
  position: relative;
  width: 90px;
  height: 96px;
  margin-bottom: -4px;
  z-index: 1;
}

.v88-brazier__flame i {
  position: absolute;
  bottom: 0;
  border-radius: 22% 22% 8% 8%;
  transform-origin: 50% 100%;
}

.v88-brazier__flame i:nth-child(1) {
  left: 14px;
  width: 62px;
  height: 84px;
  background: linear-gradient(180deg, #ffb238 0%, #ff7a2e 45%, #d84a0e 100%);
  animation: v88-flame 0.62s steps(3, end) infinite;
}

.v88-brazier__flame i:nth-child(2) {
  left: 26px;
  width: 38px;
  height: 58px;
  background: linear-gradient(180deg, #ffe27a 0%, #ffb238 70%);
  animation: v88-flame 0.47s steps(3, end) infinite reverse;
}

.v88-brazier__flame i:nth-child(3) {
  left: 36px;
  width: 18px;
  height: 34px;
  background: #fff3c4;
  animation: v88-flame 0.36s steps(2, end) infinite;
}

@keyframes v88-flame {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  33% { transform: scaleY(1.14) scaleX(0.92); }
  66% { transform: scaleY(0.88) scaleX(1.06); }
}

.v88-login__embers { position: absolute; inset: 0; pointer-events: none; }

.v88-login__embers i {
  position: absolute;
  bottom: 12vh;
  width: 5px;
  height: 5px;
  background: #ffb238;
  box-shadow: 0 0 6px rgba(255, 158, 61, 0.9);
  opacity: 0;
  animation: v88-ember 4.4s linear infinite;
}

.v88-login__embers i:nth-child(1) { left: 12%; animation-delay: 0s; }
.v88-login__embers i:nth-child(2) { left: 16%; animation-delay: 1.6s; }
.v88-login__embers i:nth-child(3) { left: 9%; animation-delay: 2.9s; }
.v88-login__embers i:nth-child(4) { right: 12%; animation-delay: 0.8s; }
.v88-login__embers i:nth-child(5) { right: 16%; animation-delay: 2.2s; }
.v88-login__embers i:nth-child(6) { right: 9%; animation-delay: 3.5s; }

@keyframes v88-ember {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-46vh) translateX(14px); opacity: 0; }
}

.v88-login__logo {
  position: absolute;
  z-index: 3;
  top: clamp(14px, 3.5vh, 38px);
  left: 50%;
  width: clamp(300px, 42vw, 520px);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.82));
}

.v88-login__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-height: 700px) {
  .v88-login__logo {
    top: 8px;
    width: clamp(260px, 36vw, 400px);
  }
}

@media (max-width: 560px) {
  .v88-login__logo {
    top: 10px;
    width: min(88vw, 360px);
  }
}

/* Central stone panel. */
.v88-login__panel {
  position: relative;
  z-index: 3;
  width: min(430px, calc(100vw - 40px));
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 28px 24px;
  border: 3px solid #101214;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(180deg, #4c5157 0%, #34383d 52%, #232629 100%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.85),
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    inset 0 0 46px rgba(0, 0, 0, 0.5);
}

.v88-login__panel-rivets i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9aa0a8, #3c4046 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.v88-login__panel-rivets i:nth-child(1) { top: 10px; left: 10px; }
.v88-login__panel-rivets i:nth-child(2) { top: 10px; right: 10px; }
.v88-login__panel-rivets i:nth-child(3) { bottom: 10px; left: 10px; }
.v88-login__panel-rivets i:nth-child(4) { bottom: 10px; right: 10px; }

.v88-login__view h1 {
  margin: 0 0 18px;
  color: #ffd76b;
  font-size: 1.28rem;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 0 #000;
}

.v88-login__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.v88-login__view[data-login-view="welcome"] .v88-login__actions,
.v88-login__view[data-login-view="play"] .v88-login__actions {
  grid-template-columns: 1fr 1fr;
}

.v88-btn {
  padding: 12px 10px;
  border: 2px solid #0d0e10;
  border-radius: 6px;
  background: linear-gradient(180deg, #6d7178 0%, #43474d 55%, #303338 100%);
  color: #f3efe2;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.v88-btn:hover { filter: brightness(1.12); }
.v88-btn:active { transform: translateY(1px); }
.v88-btn:disabled { opacity: 0.55; cursor: default; }

.v88-login button:focus-visible,
.v88-login input:focus-visible,
.v88-login a:focus-visible,
.v88-login code:focus-visible {
  outline: 3px solid #ffd76b;
  outline-offset: 3px;
}

.v88-btn--primary {
  background: linear-gradient(180deg, #b98a2a 0%, #8a6220 55%, #6a4a16 100%);
  color: #fff3c4;
}

.v88-btn--play {
  grid-column: 1 / -1;
  padding: 14px 12px;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  background: linear-gradient(180deg, #d8a625 0%, #a4761c 55%, #7a5412 100%);
  color: #1d1408;
  text-shadow: 0 1px 0 rgba(255, 240, 190, 0.6);
  animation: v88-play-pulse 1.8s ease-in-out infinite;
}

.v88-btn--play:disabled {
  animation: none;
  filter: saturate(0.55);
}

.v88-login__view[data-login-view="play"] > .v88-btn--play {
  display: block;
  width: min(100%, 250px);
  margin-inline: auto;
}

@keyframes v88-play-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 rgba(255, 215, 107, 0); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 26px rgba(255, 215, 107, 0.45); }
}

.v88-login__secondary {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 6px;
  border: 0;
  background: none;
  color: #b9a678;
  font-family: inherit;
  font-size: 0.76rem;
  text-decoration: underline;
  cursor: pointer;
}

.v88-login__secondary:hover { color: #ffd76b; }
.v88-login__secondary:disabled { opacity: 0.5; cursor: default; }

.v88-field { display: grid; gap: 5px; margin-bottom: 12px; }

.v88-field span {
  color: #d9c184;
  font-size: 0.78rem;
  font-weight: 700;
}

.v88-field input {
  padding: 11px 12px;
  border: 2px solid #0d0e10;
  border-radius: 6px;
  background: #17191c;
  color: #f3efe2;
  font-size: 0.95rem;
  outline: none;
}

.v88-field input:focus { box-shadow: inset 0 0 0 1px rgba(255, 215, 107, 0.45); }

.v88-login__hint {
  margin: 0 0 14px;
  color: #9b8b64;
  font-size: 0.72rem;
}

.v88-login__status {
  min-height: 1.1em;
  margin: 12px 0 0;
  color: #f0a884;
  font-size: 0.8rem;
  text-align: center;
}

.v88-login__status.is-good { color: #9fe08b; }

.v88-login__play-copy {
  margin: 0 0 18px;
  color: #e8dcc0;
  font-size: 0.92rem;
  text-align: center;
}

.v88-login__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}

.v88-login__world {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 8px 14px;
  border: 2px solid #0d0e10;
  border-radius: 8px;
  background: linear-gradient(180deg, #43474d, #26292d);
  color: #ffd76b;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

.v88-login__world:hover { filter: brightness(1.12); }
.v88-login__world:disabled { opacity: 0.55; cursor: not-allowed; filter: saturate(0.45); }
.v88-login__world small { grid-row: 1; color: #b9a678; font-size: 0.62rem; letter-spacing: 0.12em; }
.v88-login__world strong { grid-row: 2; font-size: 1.3rem; line-height: 1; }
.v88-login__world span { grid-column: 2; grid-row: 1 / span 2; color: #cfc4a2; font-size: 0.72rem; max-width: 180px; }

.v88-login__build {
  margin: 0;
  color: #8d7f5d;
  font-size: 0.7rem;
  text-align: right;
}

.v88-login__build a { color: #b9a678; }

.v88-login__worlds {
  position: absolute;
  left: 16px;
  bottom: 76px;
  z-index: 5;
  width: min(360px, calc(100vw - 32px));
  border: 3px solid #101214;
  border-radius: 10px;
  background: linear-gradient(180deg, #3c4046 0%, #26292d 100%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.v88-login__worlds[hidden] { display: none; }

.v88-login__worlds header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.32);
}

.v88-login__worlds header strong { color: #ffd76b; font-size: 0.95rem; }
.v88-login__worlds header span { grid-column: 1; color: #9b8b64; font-size: 0.68rem; }

.v88-login__worlds header button {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border: 2px solid #0d0e10;
  border-radius: 6px;
  background: #43474d;
  color: #ffd76b;
  font-size: 1.1rem;
  cursor: pointer;
}

#login-world-list { max-height: 300px; overflow-y: auto; padding: 8px; display: grid; gap: 6px; }

.v88-world-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid #0d0e10;
  border-radius: 7px;
  background: linear-gradient(180deg, #4a4e54, #303338);
  color: #f3efe2;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.v88-world-row:hover:not(:disabled) { filter: brightness(1.14); }
.v88-world-row:disabled { cursor: default; }
.v88-world-row.is-current { outline: 2px solid rgba(255, 215, 107, 0.55); }
.v88-world-row.is-full { opacity: 0.55; }

.v88-world-row strong { color: #ffd76b; font-size: 1.15rem; }
.v88-world-row .v88-world-row__players { font-size: 0.78rem; color: #cfe3b8; }
.v88-world-row .v88-world-row__region { font-size: 0.7rem; color: #b9a678; }
.v88-world-row .v88-world-row__badge {
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  color: #d9c184;
  font-size: 0.66rem;
  font-weight: 700;
}

.v88-empty-worlds { padding: 16px; color: #9b8b64; font-size: 0.78rem; text-align: center; }

@media (max-height: 620px) {
  .v88-login__logo,
  .v88-brazier,
  .v88-login__build {
    display: none;
  }

  .v88-login__panel {
    max-height: calc(100dvh - 86px);
    margin-bottom: 58px;
  }

  .v88-login__footer {
    justify-content: flex-start;
    padding: 8px;
  }
}

/* ---- V120: OSRS-inspired modular character creation ------------------ */

.v88-create {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 35%, rgba(38, 31, 21, .26), transparent 44%),
    rgba(8, 7, 5, .78);
  backdrop-filter: blur(2px) brightness(.72);
  font-family: Georgia, "Times New Roman", serif;
}

.v88-create[hidden] { display: none; }

.v120-create__card {
  width: min(960px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  box-sizing: border-box;
  overflow: auto;
  padding: 0;
  border: 3px solid #17130e;
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,.025), rgba(0,0,0,.06)),
    #625b4d;
  box-shadow:
    0 22px 80px rgba(0, 0, 0, .82),
    inset 0 0 0 1px #8b816d,
    inset 0 0 0 3px #3a342b;
  color: #ead9b2;
}

.v120-create__header {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 11px 18px 10px;
  border-bottom: 2px solid #1e1913;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 55%),
    #39352e;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.12), inset 0 0 0 1px #6f6758;
  text-align: center;
}

.v120-create__header .v120-create__eyebrow {
  color: #b7a985;
  font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
}

.v120-create__header strong {
  color: #f0c66a;
  font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.05;
  text-shadow: 1px 2px 0 #14110d;
}

.v120-create__header p {
  margin: 0;
  color: #d4c6a7;
  font-size: 12px;
  line-height: 1.35;
}

.v120-create__name {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(280px, 1.35fr);
  gap: 14px;
  align-items: center;
  margin: 10px 12px 0;
  padding: 8px 10px;
  border: 1px solid #2b251d;
  background: #4d473c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.v120-create__name[hidden] { display: none; }
.v120-create__name label { display: grid; gap: 2px; color: #f0c66a; }
.v120-create__name label span { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.v120-create__name label small { color: #c6b994; font: 600 10px/1.3 ui-sans-serif, system-ui, sans-serif; }
.v120-create__name-input { display: grid; grid-template-columns: 1fr; gap: 2px; }
.v120-create__name input {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  border: 2px solid #17140f;
  border-radius: 2px;
  background: #1e1d1a;
  color: #fff0bd;
  padding: 7px 10px;
  font: 700 15px Georgia, "Times New Roman", serif;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .72), 0 1px 0 rgba(255,255,255,.08);
}
.v120-create__name input:focus { outline: 2px solid #d5a93f; outline-offset: 1px; }
.v120-create__name-input > span { min-height: 12px; color: #ffb29f; font: 700 10px/1.2 ui-sans-serif, system-ui, sans-serif; }

.v120-create__body {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(270px, 1.12fr) minmax(230px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 10px 12px;
}

.v120-create__panel,
.v120-create__preview {
  min-width: 0;
  border: 2px solid #211c15;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 32%),
    #4b463c;
  box-shadow: inset 0 0 0 1px #746b5b, inset 0 0 18px rgba(0,0,0,.16);
}

.v120-create__panel { padding: 8px; }
.v120-create__panel h2 {
  margin: -3px -3px 7px;
  padding: 6px 8px;
  border: 1px solid #252018;
  background: #38342d;
  color: #e6b95b;
  font-size: 14px;
  text-align: center;
  text-shadow: 1px 1px 0 #15120e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.v120-create__selectors { display: grid; gap: 5px; }
.v120-create__selector { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; align-items: center; }
.v120-create__selector > strong {
  color: #e0c47f;
  font-size: 11px;
  text-align: right;
  line-height: 1;
}

.v120-create__selector-controls {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 3px;
  min-width: 0;
}

.v120-create__arrow,
.v120-create__turn button,
.v120-create__preview-top button {
  appearance: none;
  border: 1px solid #17130e;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #777064 0%, #514b42 48%, #3b362f 52%, #4c463d 100%);
  color: #ead9b2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 1px 1px rgba(0,0,0,.6);
  cursor: pointer;
  font-weight: 900;
  text-shadow: 1px 1px 0 #14110d;
}
.v120-create__arrow { min-height: 31px; font-size: 11px; }
.v120-create__arrow:hover,
.v120-create__turn button:hover,
.v120-create__preview-top button:hover { filter: brightness(1.18); color: #ffe39a; }
.v120-create__arrow:active,
.v120-create__turn button:active,
.v120-create__preview-top button:active { transform: translateY(1px); filter: brightness(.93); }
.v120-create__arrow:focus-visible,
.v120-create__turn button:focus-visible,
.v120-create__preview-top button:focus-visible { outline: 2px solid #efbd4d; outline-offset: 1px; }

.v120-create__choice {
  min-width: 0;
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid #2a241c;
  background: #2f2c27;
  color: #f1e3c4;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.035);
  font: 700 10.5px/1.1 ui-sans-serif, system-ui, sans-serif;
  text-align: center;
}
.v120-create__choice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v120-create__colour-chip {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid #100e0b;
  border-radius: 50%;
  background: var(--choice-colour);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.12);
}

.v120-create__preview {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(300px, 1fr) auto;
  justify-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(136, 119, 83, .42), transparent 48%),
    linear-gradient(180deg, #302e29, #1b1a18 72%, #24211d);
}

.v120-create__preview::before {
  content: "";
  position: absolute;
  inset: 32px 8px 42px;
  pointer-events: none;
  border: 1px solid rgba(219, 191, 126, .12);
  background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.025) 50%, transparent 50.3%);
}

.v120-create__preview-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 7px;
  border-bottom: 1px solid #211c15;
  background: rgba(50,46,40,.92);
}
.v120-create__preview-top span {
  padding: 3px 9px;
  border: 1px solid #7c6235;
  background: #2c271f;
  color: #f2ca71;
  font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.v120-create__preview-top button { min-height: 25px; padding: 3px 9px; font: 700 9.5px ui-sans-serif, system-ui, sans-serif; }

.v120-create__preview canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: block;
}

.v120-create__turn {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid #211c15;
  background: rgba(46,42,36,.95);
}
.v120-create__turn button { min-height: 30px; font-size: 17px; }
.v120-create__turn strong {
  overflow: hidden;
  color: #f1ca72;
  font-size: 14px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 1px 2px 0 #100e0b;
}

.v120-create__layer-note {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 6px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid #29231b;
  background: #37332c;
  color: #c9bc9c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.v120-create__layer-note > span { color: #d7aa47; text-align: center; }
.v120-create__layer-note p { margin: 0; font: 600 9px/1.35 ui-sans-serif, system-ui, sans-serif; }
.v120-create__layer-note strong { display: block; margin-bottom: 2px; color: #e4c57e; font-size: 9.5px; }

.v120-create__footer {
  display: grid;
  grid-template-columns: 1fr minmax(270px, .85fr);
  gap: 12px;
  align-items: center;
  padding: 9px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.v120-create__footer p { margin: 0; color: #c5b896; font: 600 10px/1.35 ui-sans-serif, system-ui, sans-serif; }
.v120-create__footer .v88-btn--play {
  min-height: 43px;
  border: 2px solid #1c160b;
  border-radius: 3px;
  background: linear-gradient(180deg, #e4b63d, #a87408 55%, #7f5205 56%, #b07b0c);
  color: #211708;
  box-shadow: inset 0 0 0 1px rgba(255,239,160,.55), 0 2px 2px rgba(0,0,0,.48);
  font: 700 17px Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 0 rgba(255,230,142,.52);
  cursor: pointer;
}
.v120-create__footer .v88-btn--play:hover { filter: brightness(1.08); }
.v120-create__footer .v88-btn--play:disabled { cursor: wait; filter: grayscale(.45) brightness(.75); }

@media (max-width: 820px) {
  .v120-create__card { max-height: calc(100dvh - 10px); }
  .v120-create__body { grid-template-columns: 1fr minmax(250px, 1.1fr); }
  .v120-create__panel--colour { grid-column: 1 / -1; }
  .v120-create__panel--colour .v120-create__selectors { grid-template-columns: 1fr 1fr; }
  .v120-create__layer-note { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .v88-create { place-items: start center; padding: 4px; }
  .v120-create__card { width: calc(100vw - 8px); max-height: calc(100dvh - 8px); }
  .v120-create__name { grid-template-columns: 1fr; gap: 5px; }
  .v120-create__body { grid-template-columns: 1fr; }
  .v120-create__preview { grid-row: 1; min-height: 390px; }
  .v120-create__panel--colour { grid-column: auto; }
  .v120-create__panel--colour .v120-create__selectors { grid-template-columns: 1fr; }
  .v120-create__footer { grid-template-columns: 1fr; }
  .v120-create__footer p { text-align: center; }
}

/* V89 account recovery and security -------------------------------------- */
.v89-recovery-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin: 8px 0 12px;
  border: 1px solid rgba(228, 181, 76, .62);
  background: rgba(19, 14, 9, .88);
  border-radius: 6px;
  text-align: center;
}
.v89-recovery-result[hidden] { display: none !important; }
.v89-recovery-result code {
  display: block;
  padding: 9px 7px;
  color: #ffe08a;
  background: #0d0a07;
  border: 1px solid #574521;
  font: 700 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.v89-recovery-result .v88-login__secondary { margin: 0; padding: 4px; }
.v89-recovery-result small { color: #c9b994; }
.v89-security {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 4, 3, .78);
  backdrop-filter: blur(3px);
}
.v89-security[hidden] { display: none; }
.v89-security__card {
  width: min(650px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  color: #eee2c8;
  border: 2px solid #6d552b;
  border-radius: 8px;
  background: linear-gradient(#211a12, #120f0b);
  box-shadow: 0 18px 60px #000, inset 0 0 0 1px rgba(255, 221, 141, .12);
}
.v89-security__card > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 17px;
  background: #19130e;
  border-bottom: 1px solid #5e4826;
}
.v89-security__card > header div { display: grid; gap: 2px; }
.v89-security__card > header small { color: #b79859; letter-spacing: .13em; }
.v89-security__card > header strong { color: #ffe19a; font-size: 20px; }
.v89-security__card > header button {
  width: 34px;
  height: 34px;
  color: #e9d8b4;
  border: 1px solid #5d4a2a;
  background: #2b2116;
  border-radius: 4px;
  font-size: 24px;
}
.v89-security__status {
  min-height: 20px;
  margin: 12px 16px 0;
  color: #f1c16c;
}
.v89-security__status.is-good { color: #8ed88a; }
.v89-security__section {
  display: grid;
  gap: 10px;
  margin: 14px 16px;
  padding: 14px;
  border: 1px solid #4a3a23;
  border-radius: 6px;
  background: rgba(8, 7, 5, .36);
}
.v89-security__section h3 { margin: 0; color: #e5c579; }
.v89-security__section p { margin: 0; color: #bfb091; line-height: 1.45; }
.v89-security__section label { display: grid; gap: 5px; color: #cab995; font-size: 13px; }
.v89-security__section input {
  min-height: 38px;
  padding: 7px 9px;
  color: #f1e7d2;
  border: 1px solid #5e4b2c;
  border-radius: 4px;
  background: #0c0a07;
}
.v89-security__section button {
  min-height: 36px;
  padding: 7px 11px;
  color: #f6e2ac;
  border: 1px solid #6d552b;
  border-radius: 4px;
  background: linear-gradient(#4b3a20, #2b2114);
  cursor: pointer;
}
.v89-security__section button:disabled { opacity: .55; cursor: wait; }
.v89-security__section button.is-danger { border-color: #834337; color: #ffd0c6; background: linear-gradient(#592b25, #321915); }
.v89-security__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v89-session-list { display: grid; gap: 7px; }
.v89-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid #40331f;
  border-radius: 4px;
  background: #12100c;
}
.v89-session__meta { display: grid; gap: 2px; min-width: 0; }
.v89-session__meta strong { color: #e8d3a3; }
.v89-session__meta span { color: #9f9278; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v89-session.is-current { border-color: #6c8f4a; }
@media (max-width: 620px) {
  .v89-security { padding: 8px; }
  .v89-security__card { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}

/* V93: The Bell Beneath Gullwater — cinematic + authored puzzle UI. */
.gullwater-quest-overlay{position:fixed;inset:0;z-index:9400;display:grid;place-items:center;background:transparent;font-family:Georgia,"Times New Roman",serif}.gullwater-quest-overlay[hidden]{display:none}.gullwater-quest-overlay.is-cinematic{pointer-events:all}.gullwater-letterbox{position:absolute;left:0;right:0;height:11vh;background:#070705;box-shadow:0 0 30px #000;transition:transform .45s ease}.gullwater-letterbox--top{top:0}.gullwater-letterbox--bottom{bottom:0}.gullwater-cinematic-caption{position:absolute;bottom:13vh;left:50%;transform:translateX(-50%);max-width:min(760px,82vw);padding:10px 22px;color:#f8e7b1;text-align:center;font-size:clamp(18px,2vw,28px);line-height:1.25;text-shadow:0 2px 3px #000,0 0 12px #000;background:linear-gradient(90deg,transparent,rgba(0,0,0,.68),transparent)}.gullwater-quest-overlay.is-puzzle{background:rgba(5,10,12,.72);backdrop-filter:blur(3px);pointer-events:all}.gullwater-puzzle-panel{width:min(680px,92vw);max-height:90vh;overflow:auto;padding:18px 20px 16px;border:3px solid #6d4c24;border-radius:7px;color:#eadfbf;background:linear-gradient(#2f302e,#202321);box-shadow:0 0 0 3px #17100a,0 18px 70px #000}.gullwater-puzzle-panel[hidden]{display:none}.gullwater-puzzle-panel header{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #77613d;padding-bottom:10px}.gullwater-puzzle-panel small{color:#70ccd1;letter-spacing:.18em;font-weight:700}.gullwater-puzzle-panel h2{margin:3px 0 0;color:#f2cf75;font-size:27px}.gullwater-puzzle-panel header button{width:34px;height:34px;border:1px solid #8f7447;background:#2a2118;color:#f5dfb0;font-size:25px}.gullwater-puzzle-copy{line-height:1.45;color:#ddd0ac}.gullwater-puzzle-board{margin:12px auto;display:grid;gap:5px;padding:9px;border:2px solid #15110d;background:#1a130e;box-shadow:inset 0 0 20px #000}.gullwater-puzzle-board.is-slide{grid-template-columns:repeat(5,1fr);width:min(520px,78vw);aspect-ratio:1}.tideglass-tile{position:relative;border:2px solid #1b120c;border-radius:2px;background-image:url("/client/assets/ui/generated/panels/gullwater-tideglass-chart.svg");background-size:500% 500%;background-position:calc(var(--tx) * 25%) calc(var(--ty) * 25%);box-shadow:inset 0 0 8px rgba(255,218,124,.24);cursor:pointer}.tideglass-tile::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,237,188,.16);box-shadow:inset 0 0 12px rgba(14,31,32,.28)}.tideglass-tile.is-empty{visibility:hidden}.gullwater-puzzle-board.is-knots{position:relative;grid-template-columns:repeat(3,1fr);width:min(420px,60vw);aspect-ratio:1;margin:24px auto;overflow:visible}.knot-tile{position:relative;min-width:0;border:2px solid #60431d;background:radial-gradient(circle at 50% 44%,#315f61,#162c31 68%);cursor:pointer;overflow:hidden;transition:border-color .14s ease,box-shadow .14s ease,filter .14s ease}.knot-tile:hover{filter:brightness(1.12)}.knot-tile.is-connected{border-color:#64b99e;box-shadow:inset 0 0 18px rgba(70,198,153,.22),0 0 7px rgba(70,198,153,.28)}.knot-tile.has-break{border-color:#8e4a35}.knot-strand{position:absolute;left:50%;top:50%;width:51%;height:10px;margin-top:-5px;transform-origin:0 50%;border-radius:8px;background:#d6bc79;box-shadow:0 0 7px rgba(141,216,213,.72);pointer-events:none;transition:background .14s ease,box-shadow .14s ease}.knot-strand--e{transform:rotate(0deg)}.knot-strand--s{transform:rotate(90deg)}.knot-strand--w{transform:rotate(180deg)}.knot-strand--n{transform:rotate(270deg)}.knot-strand.is-linked{background:#83e1ad;box-shadow:0 0 5px #b7ffd7,0 0 14px rgba(55,218,157,.9)}.knot-strand.is-broken::after{content:"";position:absolute;right:-3px;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%);background:#ff654c;box-shadow:0 0 5px #fff0d7,0 0 13px #ff3218}.knot-centre{position:absolute;left:50%;top:50%;width:22px;height:22px;border:3px solid #ead49a;border-radius:50%;transform:translate(-50%,-50%);background:#72562d;box-shadow:0 0 8px rgba(141,216,213,.8);pointer-events:none}.knot-tile.is-connected .knot-centre{border-color:#baffd6;background:#3f8d6d;box-shadow:0 0 12px rgba(75,235,170,.9)}.knot-endpoint{position:absolute;z-index:4;display:flex;align-items:center;gap:7px;transform:translateY(-50%);font-family:Arial,sans-serif;font-size:11px;letter-spacing:.08em;white-space:nowrap;pointer-events:none}.knot-endpoint__mark{display:grid;place-items:center;width:32px;height:32px;border:2px solid currentColor;border-radius:50%;background:#17130f;box-shadow:0 0 8px currentColor;font-size:17px}.knot-endpoint--start{left:-98px;top:16.666%;color:#f2bf3d;flex-direction:row-reverse}.knot-endpoint--end{right:-92px;top:83.333%;color:#59bde8}.knot-endpoint.is-linked .knot-endpoint__mark{background:currentColor;color:#102023;box-shadow:0 0 8px currentColor,0 0 20px currentColor}.knot-endpoint--start::after,.knot-endpoint--end::before{content:"";width:34px;height:8px;border-radius:7px;background:currentColor;box-shadow:0 0 9px currentColor}.knot-endpoint--start::after{margin-left:-7px}.knot-endpoint--end::before{margin-right:-7px}@media(max-width:620px){.gullwater-puzzle-board.is-knots{width:min(380px,74vw)}.knot-endpoint strong{display:none}.knot-endpoint--start{left:-40px}.knot-endpoint--end{right:-40px}.knot-endpoint--start::after,.knot-endpoint--end::before{width:18px}.knot-endpoint__mark{width:27px;height:27px;font-size:14px}}.gullwater-puzzle-status{text-align:center;min-height:24px;color:#8dd8d5}.gullwater-puzzle-panel footer{display:flex;justify-content:center;gap:10px}.gullwater-puzzle-panel footer button{padding:8px 14px;border:1px solid #8f7447;background:#3b2a19;color:#f0dca7;font-weight:700}.gullwater-puzzle-panel button:hover{filter:brightness(1.15)}

/* Temporary OSRS-style stat boosts ----------------------------------- */
[data-side-panel="stats"] .v26-skill-cell.is-boosted strong {
  color: #72e67d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(72, 210, 92, .38);
}

/* Phone-tier layout (premium UI pass): keep the playfield visible on
   narrow portrait screens — compact minimap, scaled side HUD, short chat.
   Above 700px the existing tablet/desktop tiers apply unchanged. */
@media (max-width: 700px) {
  .osrs-hud.osrs-hud--v26,
  .osrs-hud {
    top: 6px !important;
    right: 6px !important;
    width: 238px;
    transform: scale(0.64);
    transform-origin: top right;
  }

  .osrs-minimap-panel .minimap {
    height: 118px;
  }

  .osrs-chatbox {
    width: min(300px, 82vw);
    max-height: 200px;
    transform: scale(0.8);
    transform-origin: bottom left;
  }

  .osrs-chatbox .chat-log,
  .osrs-chatbox .chat-messages {
    max-height: 96px;
  }
}

/* Authenticated runtime connection guard. It deliberately blocks the entire
   playfield so no value-bearing action can look successful while disconnected. */
.v105-connection-guard {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #ead8a8;
  background:
    radial-gradient(circle at 50% 43%, rgba(112, 80, 31, .19), transparent 34%),
    rgba(6, 7, 5, .82);
  backdrop-filter: blur(5px) saturate(.68);
}
.v105-connection-guard[hidden] { display: none; }
.v105-connection-guard__card {
  width: min(390px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 27px 28px 24px;
  text-align: center;
  border: 1px solid #7a6336;
  outline: 1px solid #17120b;
  outline-offset: 4px;
  background: linear-gradient(155deg, #272015, #100e0a 66%);
  box-shadow: 0 22px 80px #000, inset 0 1px rgba(255, 227, 155, .1);
}
.v105-connection-guard__card small {
  color: #a99059;
  font: 700 10px/1.2 system-ui, sans-serif;
  letter-spacing: .22em;
}
.v105-connection-guard__card strong {
  color: #f1d787;
  font: 700 25px/1.15 Georgia, serif;
  text-shadow: 0 2px #000;
}
.v105-connection-guard__card p { margin: 0; color: #bdb294; line-height: 1.48; }
.v105-connection-guard__rune {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 2px solid #bd9440;
  background: radial-gradient(circle, #e0bd63 0 12%, #5c421d 15% 42%, #18130b 45%);
  box-shadow: 0 0 21px rgba(218, 166, 56, .22), inset 0 0 0 4px #251a0c;
}
.v105-connection-guard__rune i { width: 14px; height: 14px; border: 1px solid #f5d579; }
.v105-connection-guard__pulse { display: flex; gap: 6px; height: 10px; align-items: center; }
.v105-connection-guard__pulse i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4aa4e;
  animation: v105-link-pulse 1.1s infinite ease-in-out;
}
.v105-connection-guard__pulse i:nth-child(2) { animation-delay: .14s; }
.v105-connection-guard__pulse i:nth-child(3) { animation-delay: .28s; }
.v105-connection-guard__card button {
  min-width: 170px;
  margin-top: 5px;
  padding: 9px 15px;
  color: #f5dfaa;
  border: 1px solid #7e6332;
  background: linear-gradient(#4b391d, #2b2113);
  cursor: pointer;
}
@keyframes v105-link-pulse { 0%, 70%, 100% { opacity: .24; transform: scale(.7); } 35% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .v105-connection-guard__pulse i { animation: none; opacity: .8; } }

/* V93 Frostmaw warband killcount overlay (GWD essence style): top-left
   stone tally shown only inside the Frostmaw Depths. */
.frostmaw-kc {
  position: fixed;
  top: 88px;
  left: 16px;
  z-index: 17;
  min-width: 148px;
  padding: 8px 11px 9px;
  border: 1px solid #6d5a33;
  border-radius: 4px;
  background: linear-gradient(rgba(24, 20, 14, 0.88), rgba(15, 13, 9, 0.88));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  color: #e8dcb8;
  font-size: 0.72rem;
  line-height: 1.3;
  pointer-events: none;
  user-select: none;
}

.frostmaw-kc__title {
  margin-bottom: 4px;
  color: #ffd76b;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.frostmaw-kc__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  text-shadow: 1px 1px 0 #000;
}

.frostmaw-kc__count {
  color: #cfc4a0;
  font-variant-numeric: tabular-nums;
}

.frostmaw-kc__row--ready .frostmaw-kc__count {
  color: #7ee856;
  font-weight: 800;
}

@media (max-width: 700px) {
  .frostmaw-kc {
    top: 74px;
    left: 8px;
    min-width: 122px;
    padding: 6px 8px 7px;
    font-size: 0.62rem;
  }
}

/* ---- V104: window density consistency + compass affordance -------------- */
/* One shared rhythm for every major window: same header height, padding and
   title scale, so bank/shop/GE/trade stop feeling like different apps. */
#bank-window > header,
#shop-window > header,
#market-window > header,
#exchange-window > header,
#equipment-stats-window > header,
#trade-window > header,
#collection-log-window > header,
#loot-window > header,
#smith-window > header,
#crafting-window > header,
#settings-window > header {
  padding: 10px 14px;
  min-height: 42px;
  box-sizing: border-box;
  align-items: center;
}
#bank-window > header strong,
#shop-window > header strong,
#market-window > header strong,
#exchange-window > header strong,
#equipment-stats-window > header strong,
#trade-window > header strong,
#collection-log-window > header strong,
#loot-window > header strong,
#smith-window > header strong,
#crafting-window > header strong,
#settings-window > header strong {
  font-size: 15px;
  letter-spacing: 0.4px;
}
/* The compass is now a real control (click = face north). */
button.v39-compass {
  cursor: pointer;
  border: 0;
  font: inherit;
  color: inherit;
}
button.v39-compass:hover i { filter: brightness(1.25); }
button.v39-compass:active { transform: scale(0.94); }

/* V105: emoji icon fallback for shop items without generated art (Slayer
   reward stock) — sized to match the 40px item images. */
.v41-shop__emoji {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
}

/* V106: skills tab layout with 16 skills. The total level moves into the
   grid as an OSRS-style wide cell beside Slayer; the old absolute footer is
   hidden inside the stats tab (it collided with the 6th grid row). */
[data-side-panel="stats"] .v26-total-level {
  display: none !important;
}

[data-side-panel="stats"] .v26-skill-grid {
  padding-bottom: 8px !important;
}

.v26-skill-cell.v106-total-cell {
  grid-column: span 2;
}

[data-side-panel="stats"] .v26-skill-cell.v106-total-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  cursor: default !important;
}

[data-side-panel="stats"] .v26-skill-cell.v106-total-cell span {
  max-width: none !important;
  font-size: .46rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #d9c489 !important;
}

[data-side-panel="stats"] .v26-skill-cell.v106-total-cell strong {
  font-size: 1.12rem !important;
  line-height: 1 !important;
  color: #f4d979 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .85) !important;
}

/* V106.1: six skill rows must fit the fixed-height stats tab — compact the
   cells slightly (68px → 61px, 34px icons) so the Slayer/Total row is never
   clipped by the tab's bottom edge. */
[data-side-panel="stats"] .v26-skill-cell {
  height: 61px !important;
  padding: 3px 4px !important;
  grid-template-rows: 34px 9px 12px !important;
}

[data-side-panel="stats"] .v26-skill-cell img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
}

[data-side-panel="stats"] .v29-skill-progress {
  height: 34px !important;
  top: 7px !important;
  right: 8px !important;
}

[data-side-panel="stats"] .v26-skill-grid {
  gap: 4px !important;
}

/* ====================================================================
   V95 Solana wallet window + Grand Exchange USDC market (direct P2P).
   Palette: Waystone parchment/dark fantasy base with Solana accents —
   mint #14f195 for money-good states, violet #9945ff for web3 chrome.
   ==================================================================== */

.v95-wallet__card {
  max-width: 560px;
}

/* --- Hero: the linked payout wallet ------------------------------- */

.v95-wallet__hero {
  position: relative;
  overflow: hidden;
  margin: 12px 0 14px;
  padding: 16px 16px 14px;
  border: 1px solid #3c3a55;
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(153, 69, 255, 0.16), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(20, 241, 149, 0.12), transparent 55%),
    linear-gradient(160deg, #17141f 0%, #100e15 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.v95-wallet__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, #9945ff 0%, #43b4ca 50%, #14f195 100%);
  opacity: 0.85;
}

.v95-wallet__hero.is-linked {
  border-color: #2e5d49;
}

.v95-wallet__hero-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.v95-wallet__chip {
  padding: 3px 10px;
  border: 1px solid #4a4568;
  border-radius: 999px;
  background: rgba(38, 32, 56, 0.7);
  color: #c3b8ee;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.v95-wallet__chip--state {
  border-color: #6b4a3f;
  background: rgba(58, 34, 28, 0.65);
  color: #e6a58f;
}

.v95-wallet__chip--state.is-good {
  border-color: #2e6b52;
  background: rgba(18, 52, 40, 0.7);
  color: #6ff0b8;
}

.v95-wallet__chip--count {
  border-color: #7e6332;
  background: rgba(64, 48, 20, 0.75);
  color: #ffd76b;
  font-size: 0.74rem;
}

.v95-wallet__address {
  font-family: "JetBrains Mono", "Fira Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e9f8f0;
  text-shadow: 0 0 14px rgba(20, 241, 149, 0.25);
  margin: 2px 0 8px;
  word-break: break-all;
}

.v95-wallet__address.is-empty {
  color: #7d7690;
  text-shadow: none;
  font-size: 0.86rem;
  font-weight: 600;
}

.v95-wallet__hero-copy {
  margin: 0 0 12px;
  color: #a9a3bd;
  font-size: 0.74rem;
  line-height: 1.5;
}

.v95-wallet__hero-copy strong {
  color: #d9d2f0;
}

.v95-wallet__actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.v95-wallet__primary {
  border: 1px solid #2e6b52 !important;
  background: linear-gradient(160deg, #135f43 0%, #0c3d2c 100%) !important;
  color: #b8ffdd !important;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.18);
}

.v95-wallet__primary:hover:not(:disabled) {
  box-shadow: 0 0 18px rgba(20, 241, 149, 0.32);
}

/* --- Pending purchases + how-it-works ------------------------------ */

.v95-wallet__pending {
  border: 1px solid #7e6332 !important;
  border-radius: 8px;
  background: linear-gradient(rgba(64, 48, 20, 0.35), rgba(40, 30, 13, 0.35));
  padding: 10px 12px !important;
}

.v95-wallet__steps {
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
  counter-reset: v95step;
  display: grid;
  gap: 8px;
}

.v95-wallet__steps li {
  counter-increment: v95step;
  position: relative;
  padding-left: 34px;
  color: #b4ab90;
  font-size: 0.73rem;
  line-height: 1.5;
}

.v95-wallet__steps li strong {
  color: #efe3c0;
}

.v95-wallet__steps li::before {
  content: counter(v95step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4a4568;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(153, 69, 255, 0.25), rgba(20, 241, 149, 0.18));
  color: #d9d2f0;
  font-size: 0.72rem;
  font-weight: 800;
}

.v95-wallet__fee-note {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #43b4ca;
  background: rgba(23, 48, 56, 0.4);
  color: #9fd3de;
  font-size: 0.71rem;
  border-radius: 0 4px 4px 0;
}

.v95-wallet__history ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  font-size: 0.72rem;
  color: #cfc4a0;
}

.v95-wallet__history li {
  padding: 7px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.45;
}

.v95-wallet__history li:last-child {
  border-bottom: 0;
}

/* --- Grand Exchange USDC tab --------------------------------------- */

.v95-usdc-tab {
  border-color: #2e6b46 !important;
  color: #6ff0b8 !important;
}

/* The exchange grid can flow multi-column; the USDC sections must
   always span the full window width. */
#exchange-grid .v95-usdc__bar,
#exchange-grid .v95-usdc__paystatus,
#exchange-grid .v95-usdc__composer,
#exchange-grid .v95-usdc__listings,
#exchange-grid .v87-market__empty {
  grid-column: 1 / -1;
}

.v95-usdc__bar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid #33314a;
  border-radius: 8px;
  background:
    radial-gradient(100% 160% at 0% 0%, rgba(153, 69, 255, 0.14), transparent 50%),
    radial-gradient(100% 160% at 100% 100%, rgba(20, 241, 149, 0.1), transparent 50%),
    linear-gradient(rgba(20, 18, 28, 0.85), rgba(13, 12, 18, 0.85));
}

.v95-usdc__bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, #9945ff, #43b4ca, #14f195);
  opacity: 0.75;
}

.v95-usdc__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e6a58f;
  font-size: 0.72rem;
  font-weight: 700;
  margin-right: auto;
}

.v95-usdc__link i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3654a;
  box-shadow: 0 0 8px rgba(211, 101, 74, 0.7);
}

.v95-usdc__link.is-linked {
  color: #6ff0b8;
}

.v95-usdc__link.is-linked i {
  background: #14f195;
  box-shadow: 0 0 8px rgba(20, 241, 149, 0.8);
}

.v95-usdc__bar button,
.v95-usdc__composer button,
.v95-usdc__listing button {
  padding: 7px 14px;
  border: 1px solid #7e6332;
  background: linear-gradient(#4b391d, #2b2113);
  color: #f5dfaa;
  cursor: pointer;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  transition: filter 120ms ease, box-shadow 120ms ease;
}

.v95-usdc__bar button:hover:not(:disabled),
.v95-usdc__composer button:hover:not(:disabled),
.v95-usdc__listing button:hover:not(:disabled) {
  filter: brightness(1.18);
}

.v95-usdc__listing button:disabled,
.v95-usdc__composer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v95-usdc__claim {
  border-color: #b98a2e !important;
  background: linear-gradient(#6b5117, #43310c) !important;
  color: #ffe9a8 !important;
  box-shadow: 0 0 10px rgba(255, 215, 107, 0.25);
  animation: v95claimPulse 2.2s ease-in-out infinite;
}

@keyframes v95claimPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 107, 0.2); }
  50% { box-shadow: 0 0 18px rgba(255, 215, 107, 0.45); }
}

.v95-usdc__buy {
  border-color: #2e6b52 !important;
  background: linear-gradient(160deg, #135f43 0%, #0c3d2c 100%) !important;
  color: #b8ffdd !important;
}

.v95-usdc__buy:hover:not(:disabled) {
  box-shadow: 0 0 14px rgba(20, 241, 149, 0.3);
}

/* --- Live payment status ------------------------------------------- */

.v95-usdc__paystatus {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-bottom: 10px;
  border: 1px solid #43b4ca;
  border-radius: 8px;
  background: rgba(23, 48, 56, 0.5);
  color: #aee9f5;
  font-size: 0.74rem;
  font-weight: 700;
}

.v95-usdc__spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid rgba(174, 233, 245, 0.25);
  border-top-color: #14f195;
  border-radius: 50%;
  animation: v95spin 0.8s linear infinite;
}

@keyframes v95spin {
  to { transform: rotate(360deg); }
}

/* --- Sell composer -------------------------------------------------- */

.v95-usdc__composer {
  display: grid;
  grid-template-columns: minmax(140px, 1.6fr) 76px minmax(110px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #3a3322;
  border-radius: 8px;
  background: rgba(24, 20, 12, 0.6);
}

.v95-usdc__composer-title {
  grid-column: 1 / -1;
  color: #cdbd8f;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.v95-usdc__composer.is-locked {
  border-style: dashed;
  opacity: 0.85;
}

.v95-usdc__composer-hint {
  grid-column: 1 / -1;
  color: #d8b47a;
  font-size: 0.7rem;
}

.v95-usdc__composer select,
.v95-usdc__composer input {
  padding: 7px 9px;
  border: 1px solid #5c4a28;
  border-radius: 5px;
  background: rgba(16, 13, 9, 0.85);
  color: #efe3c0;
  font-size: 0.74rem;
}

.v95-usdc__composer select:focus,
.v95-usdc__composer input:focus {
  outline: none;
  border-color: #43b4ca;
  box-shadow: 0 0 0 2px rgba(67, 180, 202, 0.2);
}

/* --- Listing rows ---------------------------------------------------- */

.v95-usdc__listings {
  display: grid;
  gap: 8px;
}

.v95-usdc__listing {
  display: grid;
  grid-template-columns: 38px minmax(120px, 1.5fr) minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid #43391f;
  border-radius: 8px;
  background: linear-gradient(rgba(28, 24, 15, 0.8), rgba(20, 17, 10, 0.8));
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.v95-usdc__listing:hover {
  border-color: #6b5a30;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.v95-usdc__listing.is-mine {
  border-color: #2e6b46;
  background: linear-gradient(rgba(18, 36, 26, 0.6), rgba(13, 26, 19, 0.6));
}

.v95-usdc__listing.is-reserved {
  opacity: 0.66;
}

.v95-usdc__listing.is-paying {
  border-color: #43b4ca;
  box-shadow: 0 0 12px rgba(67, 180, 202, 0.25);
}

.v95-usdc__listing img,
.v95-usdc__emoji {
  width: 32px;
  height: 32px;
  object-fit: contain;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.v95-usdc__name {
  color: #f0e6c4;
  font-size: 0.77rem;
  font-weight: 700;
}

.v95-usdc__seller {
  color: #a89a74;
  font-size: 0.68rem;
}

.v95-usdc__listing.is-mine .v95-usdc__seller {
  color: #6ff0b8;
  font-weight: 700;
}

.v95-usdc__price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #6ff0b8;
  font-size: 0.84rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  text-shadow: 0 0 10px rgba(20, 241, 149, 0.25);
}

.v95-usdc__price small {
  color: #8fae9d;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

@media (max-width: 700px) {
  .v95-usdc__composer {
    grid-template-columns: 1fr 64px;
  }
  .v95-usdc__listing {
    grid-template-columns: 30px 1fr auto;
  }
  .v95-usdc__seller {
    display: none;
  }
}

/* ======================================================================
   V107 — OSRS-quality UI pass.
   One shared interface chrome for every dialog window (shops, exchange,
   smithing, crafting, market, bank): dark riveted steel frame, stone
   body, centered orange serif title — modelled on the classic reward
   interface. Item icons everywhere gain a crisp 1px black outline so
   they read against any background, exactly like the reference client.
   ====================================================================== */

:root {
  --osrs-orange: #ff981f;
  --osrs-gold: #ffb83f;
  --osrs-cream: #f6f1e4;
  --osrs-green: #4ade67;
  --osrs-red: #ff6a55;
  --osrs-muted: #c5b795;
  --w-stone: #474035;
  --w-stone-dark: #3b352c;
  --w-card: #3e372d;
  --w-card-dark: #373128;
  --w-card-line: #262119;
  --w-steel: #34312c;
  --w-steel-dark: #211f1b;
  --w-steel-line: #0b0a08;
  --item-outline:
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.85))
    drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85));
}

/* Never let a themed display beat the hidden attribute again. */
.v41-shop__footer[hidden],
.v41-shop__header[hidden],
.v84-exchange__controls[hidden],
.v84-exchange__search[hidden] {
  display: none !important;
}

/* ---- Shared window frame -------------------------------------------- */

.v41-shop,
.v33-bank-window {
  padding: 12px;
  border: 2px solid var(--w-steel-line);
  border-radius: 6px;
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 55%),
    linear-gradient(180deg, var(--w-stone), var(--w-stone-dark));
  box-shadow:
    inset 0 0 0 1px #5d574c,
    inset 0 0 0 4px var(--w-steel),
    inset 0 0 0 5px var(--w-steel-dark),
    inset 0 0 0 6px rgba(0, 0, 0, 0.55),
    0 34px 110px rgba(0, 0, 0, 0.72);
  color: var(--osrs-cream);
}

.v41-shop { gap: 9px; }

/* Corner screws on the steel band. */
.v41-shop::before,
.v33-bank-window::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
  background:
    radial-gradient(circle at 10px 10px, #756e60 0 1px, #14110d 1.6px 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) 10px, #756e60 0 1px, #14110d 1.6px 2.6px, transparent 3.4px),
    radial-gradient(circle at 10px calc(100% - 10px), #756e60 0 1px, #14110d 1.6px 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #756e60 0 1px, #14110d 1.6px 2.6px, transparent 3.4px);
}

/* ---- Shared window header: centered orange title on dark steel ------- */

.v41-shop .v41-shop__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 44px;
  border: 1px solid var(--w-steel-line);
  border-radius: 4px;
  background: linear-gradient(180deg, #2c2924, #201d19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  text-align: center;
}

.v41-shop .v41-shop__header strong {
  color: var(--osrs-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 152, 31, 0.22);
}

.v41-shop .v41-shop__header span {
  flex: none;
  color: #b9ad93;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
}

.v41-shop .v41-shop__header button {
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #0c0b09;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a453d, #2b2822);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #ded8ca;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: filter 100ms ease;
}

.v41-shop .v41-shop__header button:hover {
  filter: brightness(1.25);
  color: #fff;
}

/* ---- Item cards (reward-interface style) ----------------------------- */

#shop-grid.v41-shop__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

#smith-grid.v41-shop__grid,
#crafting-grid.v41-shop__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

/* Smithing recipes can contain two long material names. Give this window and
   its cards enough measured space so costs never spill into the next row. */
.v43-smith {
  width: min(620px, calc(100vw - 34px));
}

#smith-grid.v41-shop__grid {
  grid-auto-rows: minmax(128px, auto);
  max-height: min(410px, 56vh);
  align-items: stretch;
}

.v43-smith #smith-grid .v41-shop__item {
  position: relative;
  min-height: 128px;
  overflow: hidden;
}

#smith-grid .v43-smith__level {
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 2px 5px;
  border: 1px solid rgba(10, 9, 7, 0.88);
  border-radius: 3px;
  background: rgba(24, 21, 17, 0.78);
  color: #c9bea5;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 0 #000;
}

.v43-smith #smith-grid .v41-shop__price {
  display: grid;
  justify-items: center;
  align-content: end;
  width: 100%;
  min-height: 2.35em;
  font-size: 0.68rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

#smith-grid .v43-smith__ingredient {
  display: block;
}

@media (max-width: 560px) {
  #smith-grid.v41-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#shop-grid .v41-shop__item,
#smith-grid .v41-shop__item,
#crafting-grid .v41-shop__item,
#exchange-grid .v41-shop__item:not(.v87-market__item) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 108px;
  padding: 12px 8px 10px;
  border: 1px solid var(--w-card-line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--w-card), var(--w-card-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 2px 4px rgba(0, 0, 0, 0.28);
  text-align: center;
  cursor: pointer;
  transition: filter 110ms ease, border-color 110ms ease, box-shadow 110ms ease;
}

#shop-grid .v41-shop__item:hover,
#smith-grid .v41-shop__item:hover,
#crafting-grid .v41-shop__item:hover,
#exchange-grid .v41-shop__item:not(.v87-market__item):hover {
  border-color: #6d5c37;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 216, 107, 0.18),
    0 3px 8px rgba(0, 0, 0, 0.4);
  filter: brightness(1.1);
}

.v41-shop__item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: var(--item-outline) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

.v41-shop__emoji {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  filter: var(--item-outline) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

#shop-grid .v41-shop__name,
#smith-grid .v41-shop__name,
#crafting-grid .v41-shop__name,
#exchange-grid .v41-shop__item:not(.v87-market__item) .v41-shop__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
  min-height: 2.4em;
  color: var(--osrs-gold);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 1px 0 #000;
}

#shop-grid .v41-shop__price,
#smith-grid .v41-shop__price,
#crafting-grid .v41-shop__price,
#exchange-grid .v41-shop__item:not(.v87-market__item) .v41-shop__price {
  margin-top: auto;
  color: var(--osrs-cream);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 1px 0 #000;
}

.v41-shop__item.is-poor {
  filter: saturate(0.82);
}

.v41-shop__item.is-poor .v41-shop__price,
.v43-smith .v41-shop__item.is-poor .v41-shop__price {
  color: var(--osrs-red);
}

.v41-shop .v41-shop__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--w-card-line);
  border-radius: 4px;
  background: linear-gradient(180deg, #2c2924, #23201b);
  color: var(--osrs-muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.v41-shop__hint {
  margin-right: auto;
  color: #a3987e;
  font-size: 0.66rem;
  font-weight: 700;
}

.v41-shop .v41-shop__footer strong {
  color: var(--osrs-cream);
  font-size: 0.9rem;
  text-shadow: 0 1px 0 #000;
}

/* Row-style cards that stay rows (Mira's market sell list) pick up the
   same material so every surface matches. */
.v87-market__item {
  border: 1px solid var(--w-card-line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--w-card), var(--w-card-dark));
}

.v87-market__icon-wrap img {
  filter: var(--item-outline) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

/* Exchange controls harmonised with the steel header. */
.v84-exchange__tabs button,
.v84-exchange__qty button {
  border: 1px solid #0e0d0a;
  border-radius: 4px;
  background: linear-gradient(180deg, #453f35, #2c2822);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #e8dfc9;
  font-weight: 800;
  cursor: pointer;
}

.v84-exchange__tabs button.is-active {
  border-color: #7e6332;
  background: linear-gradient(180deg, #6b5423, #46350f);
  color: #ffe9a8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 10px rgba(255, 215, 107, 0.16);
}

.v84-exchange__tabs .v95-usdc-tab.is-active {
  border-color: #2e6b52;
  background: linear-gradient(160deg, #135f43 0%, #0c3d2c 100%);
  color: #b8ffdd;
  box-shadow: 0 0 12px rgba(20, 241, 149, 0.22);
}

/* ======================================================================
   Inventory — classic backpack: flat stone panel, borderless slots,
   big icons with black outlines, yellow stack counts top-left.
   ====================================================================== */

[data-side-panel="inventory"] {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 60%),
    linear-gradient(180deg, #453d31 0%, #3b342a 52%, #362f26 100%);
  border-color: rgba(20, 16, 11, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 0 34px rgba(0, 0, 0, 0.38);
}

/* The generated panel art (etched cells + fake items) is retired: the
   slots ARE the interface now. */
[data-side-panel="inventory"] .v26-panel-bg--inventory {
  display: none;
}

[data-side-panel="inventory"] .v26-inventory-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2px 6px !important;
  padding: 6px 10px 8px !important;
  height: 100%;
  align-content: stretch;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot {
  position: relative;
  height: auto !important;
  min-height: 47px;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
  opacity: 1 !important;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot.is-empty {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.07) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot:hover {
  background: rgba(255, 235, 170, 0.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 116, 0.22) !important;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot.is-selected {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: inset 0 0 0 1px rgba(244, 238, 226, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.12) !important;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot.is-drop-target {
  background: rgba(74, 222, 128, 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.6) !important;
}

.inventory-slot__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: var(--item-outline) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot__icon {
  font-size: 1.6rem;
  filter: var(--item-outline) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

/* OSRS puts the stack count in the top-left, in yellow. */
.inventory-slot__qty {
  right: auto;
  left: 3px;
  top: 1px;
  bottom: auto;
  color: #fff200;
  font-size: 0.6rem;
  font-weight: 1000;
  letter-spacing: 0.01em;
  text-shadow: 1px 1px 0 #000, 0 1px 0 #000, 1px 0 0 #000;
  pointer-events: none;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot__qty {
  color: #fff200;
  text-shadow: 1px 1px 0 #000, 0 1px 0 #000, 1px 0 0 #000;
}

.inventory-slot__noted {
  position: absolute;
  right: 2px;
  top: 1px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(20, 16, 10, 0.85);
  color: #9fd3ff;
  font-size: 0.56rem;
  font-weight: 1000;
  text-shadow: 0 1px 0 #000;
}

/* Bank reuses the same slot treatment. */
.v33-bank-slot {
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.v33-bank-slot:hover {
  border-color: rgba(255, 226, 116, 0.3);
  background: rgba(255, 235, 170, 0.06);
}

.v33-bank-slot img {
  filter: var(--item-outline) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

.v33-bank-slot .inventory-slot__qty {
  left: 3px;
  top: 1px;
  right: auto;
  bottom: auto;
}

/* Bank header: centered title, steel strip, matching close button. */
.v33-bank-header {
  position: relative;
  border: 1px solid var(--w-steel-line);
  border-radius: 4px;
  background: linear-gradient(180deg, #2c2924, #201d19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.v33-bank-header strong {
  color: var(--osrs-orange);
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 152, 31, 0.2);
}

/* Trade + collection log + tooltips: same outlined item icons. */
.v78-trade__inventory img,
.v78-trade__inv-slot img,
.v79-clog__drop-icon,
.v82-item-tooltip img,
.v40-equip-slot__item img,
.v40-equip-slot__item .inventory-slot__img,
.v95-usdc__listing img,
.v61-bank-tab img {
  filter: var(--item-outline) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}

/* USDC market + wallet window borders sit on the same steel palette. */
.v95-usdc__bar,
.v95-usdc__composer,
.v95-usdc__listing {
  border-color: var(--w-card-line);
}

/* Skill guide + quest + security cards: align frame lines. */
.v94-skill-guide,
.v89-security__card {
  border-color: var(--w-steel-line);
}

/* V107.1 — wallet window cleanup: hidden sections stay hidden, empty
   status strip collapses, buttons pick up the shared steel chrome. */
#wallet-pending-section[hidden] {
  display: none !important;
}

.v89-security__status:empty {
  display: none;
}

.v95-wallet__actions button {
  padding: 8px 14px;
  border: 1px solid #0e0d0a;
  border-radius: 4px;
  background: linear-gradient(180deg, #453f35, #2c2822);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: #e8dfc9;
  font-weight: 800;
  cursor: pointer;
  transition: filter 110ms ease;
}

.v95-wallet__actions button:hover:not(:disabled) {
  filter: brightness(1.15);
}

.v95-wallet__actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* V107.2 — context menu aligned with the interface chrome. */
.context-menu {
  border: 1px solid #0c0b09;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(41, 38, 32, 0.97), rgba(26, 24, 20, 0.97));
  box-shadow:
    inset 0 0 0 1px #504a40,
    0 18px 48px rgba(0, 0, 0, 0.55);
}

.context-menu__title {
  color: var(--osrs-orange);
  border-bottom: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ======================================================================
   V108 — NPC dialogue box brought into the interface set.
   The old cream parchment clashed with the dark steel chrome of every
   other window. This rebuilds it on the same riveted-steel / stone
   palette: a beveled portrait in a gold-ringed frame, an orange serif
   speaker name, warm readable body copy, and steel option rows that
   light gold on hover. A thin Solana-free gradient seam across the top
   gives it the finished, deliberate feel of the shop and bank headers.
   ====================================================================== */

.dialogue-box {
  bottom: 88px;
  width: min(940px, calc(100vw - 360px));
}

.dialogue-frame {
  position: relative;
  overflow: hidden;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 168px;
  gap: 18px;
  padding: 16px 20px 16px 18px;
  border: 2px solid var(--w-steel-line, #0b0a08);
  border-radius: 7px;
  background:
    radial-gradient(150% 110% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 46%),
    linear-gradient(180deg, #474035, #35302a);
  box-shadow:
    inset 0 0 0 1px #5d574c,
    inset 0 0 0 4px #34312c,
    inset 0 0 0 5px #211f1b,
    inset 0 0 0 6px rgba(0, 0, 0, 0.55),
    0 26px 80px rgba(0, 0, 0, 0.6);
  color: #f4ecd8;
}

/* Warm seam across the top edge — the same finishing touch the shop and
   bank headers carry. */
.dialogue-frame::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b98a3f 22%, #ffd27a 50%, #b98a3f 78%, transparent);
  opacity: 0.9;
}

/* Portrait: beveled black well with a gold inner ring, matching the
   window item-slot treatment. */
.dialogue-portrait {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid #0c0b09;
  background: linear-gradient(180deg, #14100b, #060504);
  box-shadow:
    inset 0 0 0 2px rgba(219, 183, 96, 0.55),
    inset 0 0 0 4px rgba(0, 0, 0, 0.6),
    inset 0 0 26px rgba(0, 0, 0, 0.6),
    0 6px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.dialogue-portrait.is-player {
  grid-column: 1;
}

.dialogue-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: radial-gradient(circle at 50% 36%, rgba(74, 66, 52, 0.9), rgba(8, 7, 5, 0.98) 78%);
}

.dialogue-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  border-radius: 5px;
  background: radial-gradient(circle at 50% 34%, #4a4234, #14100b 76%);
  image-rendering: auto;
  filter: saturate(1.05) contrast(1.03);
}

.dialogue-portrait.is-speaking {
  filter: drop-shadow(0 0 12px rgba(255, 210, 120, 0.22));
}

.dialogue-content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  place-items: initial;
  text-align: left;
  min-width: 0;
  padding: 2px 0;
}

.dialogue-content h2 {
  margin: 0 0 8px;
  color: var(--osrs-orange, #ff981f);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 152, 31, 0.22);
}

.dialogue-content p {
  margin: 0;
  color: #ece2cb;
  font-size: 1.04rem;
  line-height: 1.5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* "Click here to continue" — a quiet gold prompt, not a heavy button. */
.dialogue-continue {
  align-self: flex-start;
  margin-top: 12px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: #f2c761;
  font: 800 0.82rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.92;
  transition: color 120ms ease, opacity 120ms ease, transform 120ms ease;
  animation: v108continuePulse 1.9s ease-in-out infinite;
}

.dialogue-continue::after {
  content: " \203A";
  font-size: 1.05em;
}

.dialogue-continue:hover {
  color: #ffe29a;
  opacity: 1;
  transform: translateX(2px);
}

@keyframes v108continuePulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Choice list: steel rows that light gold on hover, numbered like the
   classic client. */
.dialogue-choices {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  counter-reset: v108choice;
}

.dialogue-choices[hidden] {
  display: none;
}

.dialogue-choices button {
  counter-increment: v108choice;
  position: relative;
  width: 100%;
  padding: 9px 12px 9px 38px;
  border: 1px solid #0e0d0a;
  border-radius: 5px;
  background: linear-gradient(180deg, #423b31, #322c24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #eaddc0;
  font: 700 0.9rem/1.3 Georgia, "Times New Roman", serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 110ms ease, filter 110ms ease, color 110ms ease;
}

.dialogue-choices button::before {
  content: counter(v108choice);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: linear-gradient(180deg, #57492e, #362b18);
  color: #f2c761;
  font-size: 0.72rem;
  font-weight: 900;
}

.dialogue-choices button:hover {
  border-color: #7e6332;
  color: #ffe9b5;
  filter: brightness(1.12);
}

.dialogue-choices button:hover::before {
  background: linear-gradient(180deg, #7a6231, #4a3813);
  color: #fff2c8;
}

@media (max-width: 1050px) {
  .dialogue-frame {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
  }
  .dialogue-portrait {
    width: 104px;
    height: 104px;
    padding: 6px;
  }
  .dialogue-content h2 { font-size: 1.04rem; }
  .dialogue-content p { font-size: 0.96rem; }
}

/* ======================================================================
   V109 — dialogue + level-ups live in the chat, OSRS-style.
   The NPC dialogue and the "you advanced a level" notice belong to the
   CHAT family, not the steel windows, so they sit in the chat's own
   footprint (bottom-left) on matching parchment: red speaker name, dark
   readable body, a blue "Click here to continue" prompt, and — for a
   conversation — the character portrait framed on the right. While either
   is open the live chat log is hidden underneath, exactly as it swaps in
   the classic client. Empty inventory tiles lose their cell art so the
   backpack reads as clean items on stone.
   ====================================================================== */

/* ---- Position: occupy the chat footprint, above the chat log --------- */
.dialogue-box {
  left: 12px;
  right: auto;
  bottom: 12px;
  transform: none;
  width: min(540px, calc(100vw - 380px));
  z-index: 72;
}

/* Hide the live chat under an open dialogue or level-up notice. */
body:has(#dialogue-box:not([hidden])) .osrs-chatbox,
body:has(#levelup-notice:not([hidden])) .osrs-chatbox {
  opacity: 0;
  pointer-events: none;
}

/* ---- Parchment frame (matches the chat panel) ----------------------- */
.dialogue-frame {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr) 128px;
  min-height: 156px;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid #21170d;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(223, 214, 185, 0.99), rgba(196, 185, 151, 0.99));
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 251, 225, 0.5),
    inset 0 0 0 2px rgba(89, 68, 33, 0.28);
  color: #2a1d0e;
}

.dialogue-frame::before {
  content: none;
}

/* Portrait framed on the right, like the classic client. */
.dialogue-portrait {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  box-sizing: border-box;
  width: 124px;
  height: 124px;
  padding: 5px;
  border-radius: 6px;
  border: 2px solid #21170d;
  background: linear-gradient(180deg, #2a2016, #140f09);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 205, 0.14),
    inset 0 0 18px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.dialogue-portrait.is-player,
.dialogue-portrait.is-speaking {
  grid-column: 2;
}

.dialogue-portrait canvas,
.dialogue-portrait img {
  border-radius: 4px;
}

.dialogue-portrait.is-speaking {
  filter: drop-shadow(0 0 10px rgba(150, 110, 40, 0.28));
}

/* ---- Content: red name, dark body, blue continue -------------------- */
.dialogue-content {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  place-items: initial;
  text-align: left;
  min-width: 0;
  padding: 2px 2px 2px 4px;
}

.dialogue-content h2 {
  margin: 0 0 7px;
  color: #9c2c15;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 249, 228, 0.5);
}

.dialogue-content p {
  margin: 0;
  color: #241a0d;
  font-size: 1.02rem;
  line-height: 1.46;
  text-shadow: 0 1px 0 rgba(255, 249, 228, 0.35);
}

.dialogue-continue {
  align-self: flex-start;
  margin-top: 11px;
  padding: 2px 2px;
  border: 0;
  background: none;
  color: #16389c;
  font: 700 0.94rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  animation: v109continuePulse 1.9s ease-in-out infinite;
}

.dialogue-continue::after {
  content: "";
}

.dialogue-continue:hover {
  color: #2b52d8;
  text-decoration: underline;
  transform: none;
}

@keyframes v109continuePulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* ---- Answer choices: blue option lines ------------------------------ */
.dialogue-choices {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 9px;
  counter-reset: v109choice;
}

.dialogue-choices button {
  counter-increment: v109choice;
  position: relative;
  width: 100%;
  padding: 5px 10px 5px 30px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #16389c;
  font: 700 0.96rem/1.3 Georgia, "Times New Roman", serif;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.dialogue-choices button::before {
  content: counter(v109choice) ".";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: #7a5a26;
  font-size: 0.9rem;
  font-weight: 800;
}

.dialogue-choices button:hover {
  background: rgba(120, 90, 40, 0.14);
  color: #2b52d8;
  filter: none;
}

.dialogue-choices button:hover::before {
  background: none;
  color: #5c4420;
}

/* ======================================================================
   Level-up notice — OSRS "you advanced a level" box in the chat.
   ====================================================================== */
.levelup-notice {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 73;
  width: min(540px, calc(100vw - 380px));
  pointer-events: auto;
}

.levelup-notice[hidden] {
  display: none;
}

.levelup-notice__frame {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 14px 18px;
  border: 2px solid #21170d;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(223, 214, 185, 0.99), rgba(196, 185, 151, 0.99));
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.46),
    inset 0 0 0 1px rgba(255, 251, 225, 0.5),
    inset 0 0 0 2px rgba(89, 68, 33, 0.28);
  text-align: center;
}

.levelup-notice__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  border: 2px solid #21170d;
  background: linear-gradient(180deg, #2a2016, #140f09);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 205, 0.14), inset 0 0 16px rgba(0, 0, 0, 0.5);
}

.levelup-notice__icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(1px 0 0 rgba(0, 0, 0, 0.85)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
}

.levelup-notice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.levelup-notice__body p {
  margin: 0;
  color: #241a0d;
  font: 700 1rem/1.32 Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 0 rgba(255, 249, 228, 0.4);
}

.levelup-notice__body p b {
  color: #9c2c15;
}

.levelup-notice__continue {
  align-self: center;
  margin-top: 6px;
  padding: 2px;
  border: 0;
  background: none;
  color: #16389c;
  font: 700 0.94rem/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
  animation: v109continuePulse 1.9s ease-in-out infinite;
}

.levelup-notice__continue:hover {
  color: #2b52d8;
  text-decoration: underline;
}

/* ======================================================================
   Clean inventory — empty tiles carry no cell art.
   ====================================================================== */
[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot.is-empty {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 1 !important;
}

[data-side-panel="inventory"] .v26-inventory-grid .inventory-slot.is-empty.is-drop-target {
  background: rgba(74, 222, 128, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.6) !important;
}

@media (max-width: 1050px) {
  .dialogue-frame {
    grid-template-columns: minmax(0, 1fr) 96px;
  }
  .dialogue-portrait {
    width: 92px;
    height: 92px;
  }
}

/* ======================================================================
   V110 — three fixes.
   1. Dialogue & level-up keep the chat channel tabs (All / Game / Public…)
      visible beneath them, integrated into the chat panel like the classic
      client: only the message log + input hide, the tab strip stays.
   2. Profile tab reads as one cohesive card set — one type system, one
      colour logic, and a Total XP figure that always fits.
   3. Side tab panels drop their redundant title bar.
   ====================================================================== */

/* ---- 1. Dialogue / level-up sit ON the chat, tabs stay --------------- */

/* Undo V109's full-chat hide: keep the panel, drop only the log + input. */
body:has(#dialogue-box:not([hidden])) .osrs-chatbox,
body:has(#levelup-notice:not([hidden])) .osrs-chatbox {
  opacity: 1 !important;
  pointer-events: auto !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

body:has(#dialogue-box:not([hidden])) .v102-chat-header,
body:has(#dialogue-box:not([hidden])) .v43-chat__scroll,
body:has(#dialogue-box:not([hidden])) .chat-input-shell,
body:has(#levelup-notice:not([hidden])) .v102-chat-header,
body:has(#levelup-notice:not([hidden])) .v43-chat__scroll,
body:has(#levelup-notice:not([hidden])) .chat-input-shell {
  display: none !important;
}

/* Park the boxes directly on top of the tab strip (37px tabs + borders). */
.dialogue-box {
  bottom: 53px;
}

.dialogue-frame {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  box-shadow:
    0 -6px 24px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 251, 225, 0.5),
    inset 0 0 0 2px rgba(89, 68, 33, 0.28);
}

.levelup-notice {
  bottom: 53px;
}

.levelup-notice__frame {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  min-height: 106px;
  box-shadow:
    0 -6px 24px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 251, 225, 0.5),
    inset 0 0 0 2px rgba(89, 68, 33, 0.28);
}

/* ---- 2. Profile tab: one type system, one colour logic -------------- */

/* Name plate. */
.osrs-summary__name strong {
  display: block;
  text-align: center;
  padding: 7px 4px;
  font: 800 15px/1.1 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.02em;
  color: #ffb43f !important;
  text-shadow: 0 1px 0 #000, 0 2px 5px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, #322818, #241c11);
  border: 1px solid #14100a;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(120, 100, 70, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

/* Every stat plaque: identical frame. */
.osrs-summary .osrs-stat {
  gap: 4px !important;
  min-height: 52px !important;
  padding: 8px 8px !important;
  border: 1px solid #14100a !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, #322818, #241c11) !important;
  box-shadow: inset 0 1px 0 rgba(120, 100, 70, 0.42), inset 0 -2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Label: one font, one colour, everywhere. */
.osrs-summary .osrs-stat .osrs-stat__head {
  gap: 5px;
  color: #c99a52 !important;
  font: 800 9.5px/1.1 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000 !important;
}

.osrs-summary .osrs-stat .osrs-stat__ic {
  width: 13px;
  height: 13px;
  fill: #c99a52 !important;
  opacity: 0.9;
}

/* Value: one font, one colour, everywhere; digits always tabular. */
.osrs-summary .osrs-stat strong {
  color: #ffe9ad !important;
  font: 800 18px/1 Georgia, "Times New Roman", serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 #000, 0 2px 3px rgba(0, 0, 0, 0.55) !important;
  white-space: nowrap;
}

/* Total XP spans the row; nowrap + tabular digits keep the biggest
   figures (100M+) on one line inside the card, with room for the glyphs. */
.osrs-summary .osrs-stat--wide {
  min-height: 58px !important;
  padding: 9px 8px !important;
}

.osrs-summary .osrs-stat--wide strong {
  font-size: 19px !important;
  line-height: 1.25 !important;
  max-width: 100%;
}

/* Boss-kills sub-panel header matches the plaques. */
.v86-panel-title strong {
  font: 800 13px/1.1 Georgia, "Times New Roman", serif !important;
  color: #ffb43f !important;
}

.v86-panel-title span {
  font: 700 9.5px/1.1 Georgia, "Times New Roman", serif !important;
  letter-spacing: 0.06em;
  color: #c99a52 !important;
  text-transform: uppercase;
}

/* ---- 3. Drop the redundant title bar on the remaining panels -------- */
[data-side-panel="clan"].v26-tab-panel::before,
[data-side-panel="friends"].v26-tab-panel::before,
[data-side-panel="logout"].v26-tab-panel::before,
[data-side-panel="settings"].v26-tab-panel::before,
[data-side-panel="magic"].v26-tab-panel::before,
[data-side-panel="equipment"].v26-tab-panel::before {
  display: none !important;
  content: none !important;
}

[data-side-panel="clan"].v26-tab-panel,
[data-side-panel="friends"].v26-tab-panel,
[data-side-panel="logout"].v26-tab-panel,
[data-side-panel="settings"].v26-tab-panel,
[data-side-panel="magic"].v26-tab-panel,
[data-side-panel="equipment"].v26-tab-panel {
  padding-top: 8px !important;
}

/* ======================================================================
   V111 — level-up width parity, minimap orb stack + spec orb, map lower.
   ====================================================================== */

/* ---- Level-up card matches the dialogue width exactly --------------- */
.levelup-notice {
  width: min(540px, calc(100vw - 380px));
}

/* ---- Minimap orbs curve along the circle (OSRS): XP, HP, Prayer,
   Spec, then the Map button dropped lower onto the lower-left arc. ------ */
.v39-orb--xp { transform: translateX(20px); }
.v39-orb--hp { transform: translateX(8px); }
.v39-orb--prayer { transform: translateX(0); }
.v39-orb--spec { transform: translateX(3px); }
.v39-orb--map {
  border: 0;
  padding: 0;
  background: transparent;
  transform: translate(19px, 13px);
}

/* Special-attack orb — gold ring, matching the HP/Prayer treatment. */
.v39-orb--spec {
  cursor: default;
}

.v39-orb--spec .v39-orb__disc {
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.22), transparent 42%) padding-box,
    linear-gradient(180deg, #7c5a1f, #2f2109) padding-box,
    conic-gradient(from 180deg, #ffc23e calc(var(--orb-fill, 1) * 360deg), rgba(10, 6, 4, 0.85) 0) border-box;
}

.v39-orb--spec .v39-orb__num {
  color: #ffd77a;
}

.v39-orb__spec-ic {
  width: 17px;
  height: 17px;
  fill: #ffe6a0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

/* ======================================================================
   V112 - boxed dialogue options + a readable OSRS-style spellbook.
   ====================================================================== */

/* ---- 1. Dialogue options: clean boxed rows (image2), parchment tone -- */
.dialogue-choices button {
  padding: 8px 12px 8px 38px !important;
  border: 1px solid #b6a877 !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(214, 204, 173, 0.92), rgba(198, 187, 152, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 232, 0.6), 0 1px 2px rgba(60, 46, 24, 0.22) !important;
  color: #2a1d0e;
  font: 700 0.92rem/1.3 Georgia, "Times New Roman", serif;
  transition: border-color 110ms ease, filter 110ms ease, background 110ms ease;
}

.dialogue-choices button::before {
  content: counter(v109choice) !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 21px !important;
  height: 21px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #6b4f22 !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #cfa659, #9c7736) !important;
  color: #2a1d0e !important;
  font: 900 0.72rem/1 Georgia, serif !important;
}

.dialogue-choices button:hover {
  border-color: #8a6a2f !important;
  background: linear-gradient(180deg, rgba(226, 216, 184, 0.98), rgba(210, 198, 160, 0.98)) !important;
  color: #16389c !important;
  filter: none !important;
}

.dialogue-choices button:hover::before {
  background: linear-gradient(180deg, #e6bf63, #b98a3d) !important;
}

/* ---- 2. Spellbook: readable, greyed-out unless castable ------------- */

/* Retire the old single-icon hue-rotate hack. */
.v83-spell img { display: none !important; }

.v83-magic-grid.v83-magic-grid {
  gap: 5px !important;
  padding: 8px !important;
  background: linear-gradient(180deg, #2a2f3e, #1c2029) !important;
  border-color: #0c0a08 !important;
}

.v112-spell {
  position: relative;
  display: grid !important;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px !important;
  border: 1px solid #11151f !important;
  border-radius: 6px !important;
  background: radial-gradient(circle at 50% 34%, #3a4358 0%, #232838 100%) !important;
  box-shadow: inset 0 1px 0 rgba(150, 170, 210, 0.14) !important;
}

.v112-spell__glyph {
  width: 60%;
  height: 60%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

/* Per-spell colour - teleports read as warm gold, combat by element. */
.v112-spell[data-magic-type="teleport"] .v112-spell__glyph { fill: #f2c766; }
.v112-spell[data-glyph="air"]   .v112-spell__glyph { fill: #e3ebf3; }
.v112-spell[data-glyph="water"] .v112-spell__glyph { fill: #5aa9e6; }
.v112-spell[data-glyph="earth"] .v112-spell__glyph { fill: #86c052; }
.v112-spell[data-glyph="fire"]  .v112-spell__glyph { fill: #ff8a3c; }
.v112-spell[data-glyph="arcane"] .v112-spell__glyph { fill: #c79bf0; }
.v112-spell[data-glyph="portals"] .v112-spell__glyph { fill: #b98bff; }

.v112-spell:not(.is-locked):hover {
  border-color: #6f7ea8 !important;
  filter: brightness(1.14) !important;
}

/* Castable spells get a soft ring so they read as "live". */
.v112-spell:not(.is-locked) {
  box-shadow: inset 0 1px 0 rgba(160, 180, 220, 0.18), 0 0 0 1px rgba(90, 110, 150, 0.35) !important;
}

/* Locked: blacked-out like the classic spellbook. */
.v112-spell.is-locked {
  background: linear-gradient(180deg, #14161d, #0d0f14) !important;
  border-color: #0a0b0f !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7) !important;
  cursor: default;
}

.v112-spell.is-locked .v112-spell__glyph {
  fill: #2b3040 !important;
  filter: none;
  opacity: 0.9;
}

/* Rune-locked (level ok, just short on runes) stays a touch readable. */
.v112-spell.is-rune-locked .v112-spell__glyph {
  fill: #3b4258 !important;
  opacity: 0.85;
}

/* Level requirement badge on level-locked spells. */
.v112-spell__lvl {
  position: absolute;
  bottom: 2px;
  right: 3px;
  color: #8892a6;
  font: 900 9px/1 system-ui, sans-serif;
  text-shadow: 0 1px 0 #000;
}

.v112-spell.is-selected {
  border-color: #f2d488 !important;
  box-shadow: 0 0 9px rgba(242, 212, 136, 0.5), inset 0 0 10px rgba(242, 212, 136, 0.15) !important;
}

.v112-spell.is-autocast {
  border-color: #74e666 !important;
  box-shadow: 0 0 9px rgba(116, 230, 102, 0.5), inset 0 0 10px rgba(116, 230, 102, 0.15) !important;
}

.v112-spell em {
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: #74e666 !important;
  color: #10240c !important;
  font: 900 7px/1 system-ui, sans-serif !important;
}

/* Header: clean "Spellbook" + green Magic level. */
.v83-magic-header strong { color: #d9c9ff !important; }
#magic-level-line { color: #7ce27c !important; font-weight: 800; }

/* V107: the Grand Exchange is the USDC market. Row polish, section strips,
   history badges and a wider listing grid on top of the V95 base styles. */
.v84-exchange .v84-exchange__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-content: start;
}

.v95-usdc__listing {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1.35fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.v95-usdc__listing.is-history {
  grid-template-columns: 40px minmax(0, 1.35fr) minmax(0, 1.2fr) auto auto;
}

.v107-ge__unit {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  opacity: .72;
  letter-spacing: .02em;
}

.v107-ge__section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(212, 166, 82, .22);
  color: #e8d5a4;
  font-size: .66rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.v107-ge__section b {
  color: #f4d979;
  font-size: .7rem;
  letter-spacing: .04em;
}

.v107-ge__settled {
  font-size: .6rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #79c76a;
  border: 1px solid rgba(121, 199, 106, .4);
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(38, 74, 32, .3);
}

.v87-market__empty.is-compact {
  padding: 12px 14px;
  min-height: 0;
}

.v84-exchange__tabs button {
  min-width: 86px;
}

/* V109: wallet-native sign-in. The wallet is a full credential — one click
   registers on first use, signs in afterwards. Solana-purple accent to set
   it apart from the name/password buttons; slots into the V88 login look. */
.v109-wallet-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 2px 2px;
  color: rgba(243, 239, 226, 0.5);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.v109-wallet-divider::before,
.v109-wallet-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(243, 239, 226, 0.16);
}
.v109-wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: linear-gradient(180deg, #9945ff 0%, #7a34d6 55%, #5f27ab 100%);
  color: #f6f0ff;
  border-color: #2c1350;
}
.v109-wallet-btn > i {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #14f195 0%, #14f195 45%, #9945ff 55%, #9945ff 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.v109-wallet-hint {
  margin: 6px 2px 0;
  color: rgba(243, 239, 226, 0.62);
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: center;
}
/* Wallet-panel "set a password" recovery block. */
.v109-wallet-pass label {
  display: block;
  margin: 8px 0 4px;
  font-size: 0.82rem;
}
.v109-wallet-pass input {
  width: 100%;
  box-sizing: border-box;
}

/* V110.2: compact OSRS-style player report dialog. Sized like an NPC
   dialogue / level-up popup, NOT a big modal: a tight parchment strip over
   the chat area with single-line rules. */
.v110-report {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 72;
  width: min(420px, calc(100vw - 360px));
  transform: translateX(-50%);
  pointer-events: auto;
}
.v110-report[hidden] { display: none; }
.v110-report__frame {
  border: 2px solid #20242a;
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(60, 64, 71, .98), rgba(44, 47, 53, .98));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
  padding: 6px 8px 8px;
  color: #f3ead4;
}
.v110-report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.v110-report__head strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffe9a8;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v110-report__head #report-dialog-target { color: #ffd062; }
.v110-report__close {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 1px solid #20242a;
  border-radius: 4px;
  background: #6d4a2a;
  color: #ffe6c4;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.v110-report__close:hover { filter: brightness(1.15); }
.v110-report__lead {
  margin: 5px 2px 4px;
  font-size: 0.7rem;
  color: #cfc6ae;
}
.v110-report__rules {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v110-report__rule {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: rgba(255, 255, 255, .015);
  color: #f1e7cf;
  cursor: pointer;
  line-height: 1.15;
}
.v110-report__rule:hover {
  background: rgba(255, 214, 120, .14);
  border-color: rgba(255, 214, 120, .5);
}
.v110-report__rule:active { transform: translateY(1px); }
.v110-report__key {
  flex: 0 0 auto;
  width: 15px;
  text-align: center;
  color: #ffce6a;
  font-weight: 800;
  font-size: 0.76rem;
}
.v110-report__label {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v110-report__status {
  margin: 4px 2px 0;
  min-height: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: #ffd98a;
}
.v110-report__status:empty { display: none; }